
Thimble – An online code editor - tbassetto
https://thimble.mozilla.org/?
======
tempodox
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?

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

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

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

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

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

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

[http://blog.humphd.org/thimble-and-bramble/](http://blog.humphd.org/thimble-
and-bramble/)

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

------
hmsimha
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

~~~
TheRealPomax
[http://blog.humphd.org/thimble-and-bramble/](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.

------
paulojreis
I was just doing some experiments and, while writing CSS selectors, the
preview pane highlighted the matched elements. Pretty cool!

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

------
ohitsdom
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/](https://googlecreativelab.github.io/coder/)

------
AdmiralAsshat
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).

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

~~~
TheRealPomax
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](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](https://github.com/humphd/brackets) to
have it added to the default set, problem solved!

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

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

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

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

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

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

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

e.g.
[https://id.webmaker.org/login?client_id=wm_id_wMvw9BSwq2A480...](https://id.webmaker.org/login?client_id=wm_id_wMvw9BSwq2A480dxr&response_type=code&state=e9baaf0a-07e0-497d-85d7-72a7eefc36&scopes=user%20email)

If you try to login just from
[https://id.webmaker.org/login](https://id.webmaker.org/login) you will get
the error you saw.

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

------
filearts
I'm the creator of [http://plnkr.co/edit/](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.

------
flannelhead
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](https://en.wikipedia.org/wiki/Fixed_%28typeface%29)

~~~
TheRealPomax
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](https://github.com/mozilla/thimble.webmaker.org)

~~~
flannelhead
Done. Thanks for the reminder.

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

~~~
TheRealPomax
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](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/](https://d157rqmxrxj6ey.cloudfront.net/mopaxian/817/)

------
ominous
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…"](https://mozillathimblelivepreview…")
> }

~~~
coldtea
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](https://support.mozilla.org/en-US/questions/new)

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

~~~
coldtea
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?").

------
hacker_9
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?

~~~
klez
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/](https://teach.mozilla.org/)

EDIT: forgot the link

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

------
_RPM
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?

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

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

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

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

------
ErikRogneby
pretty slick online editor. Has some nice touches.

------
poseid
nice! reminds me on a better processing IDE

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

------
VOYD
too bad it doesn't work.

------
danvesma
no safari 9 support makes dan a sad boy.

