Mozilla Thimble | Hacker News Reader

Mozilla Thimble

thimble.mozilla.org

565 pointsMaxLeiter82 comments

Open articleView on HN

From the video this looks like Mozilla's version of JSFiddle or JS Bin, but with four major differences:

1. Mozilla's awesome docs built-in

2. Integrated tutorials while you code

3. Mobile screen size preview

4. Completely free and no ads

These are some nice differentiators IMO. I'll definitely give it a try.

It looks like it's geared more for a learning or simple content tool, more so than JSFiddle (which feels more like a pastebin)

Having played it with it a bit more, yeah, definitely. For example, the key bindings are a little weird / non-customizable that I can tell and auto-completion leaves a bit to be desired vs Vim / Emacs / Sublime keybindings (which JS Bin offers). Also I couldn't find a way to support meta CSS languages.

Also, like most (all?) Mozilla projects, it's open source. Neat!

https://github.com/mozilla/thimble.mozilla.org

The biggest factor in my opinion.

Some crazy dependencies. It would be cool if there was something like this completely local, an SPA for the UI and LocalStorage & IndexedDB for persistence and docs.

Pretty sure some of those dependencies are dev-dependencies

Ah. Not apparent to the uninitiated!

Not a very nice thing to do anyhow. Guess it doesn't matter too much for this project but not marking development dependencies as such is horrible for any consumers of the module.

Thimble itself is an end-product, not a module. The only way to work with it outside of our deployment infrastructure is to run it with all the dependencies installed and brackets installed on the side. We're thinking of just dockerizing it, but there is no "casual install" for Thimble right now.

Seems the `package.json` is mostly development dependencies, and some HTTP server stuff. The front-end dependencies are tiny: https://github.com/mozilla/thimble.mozilla.org/blob/master/b...

The other big difference is that with Thimble, you have a little file system for multiple html/css/js files. (JSBin/JSFiddle/CodePen etc only give you one of each within a workspace).

This makes it a really great way to teach basic web design/developed for an entire site (as opposed to individual components which I think CodePen etc excel at).

I like the workspace thing. My girlfriend is learning web basics on Treehouse and I know I personally dig the idea/execution of the workspace!

You're right. I was excited when HyperDev launched with support for multiple files in their web editor [0]. It really changes broadens the scope of what can be accomplished — the line between "snippet editors" and full-blown web IDEs is becoming increasingly thin.

[0]: http://www.joelonsoftware.com/items/2016/05/30.html

The integrated tutorials / prompts are great. Thanks for the share.

One feature of JSFiddle I miss instantly is the ability to pull in a web framework via a dropdown. A reasonable counter-argument is that they're available as Google-hosted libraries[1], but you have to go hunt'm up yourself.

  [1]: https://developers.google.com/speed/libraries/

I have been using Thimble to teach kids web development for several years via CoderDojo Silicon Valley. Kids just love it...it's simple and doesn't get in the way. I have tried Cloud9, CodePen and other cloud-based IDE's, but always keep coming back to Thimble.

Here's a sample parent+child class on building a holiday greeting card: https://thimbleprojects.org/nik/20062

Here's a canvas drawing sample: https://thimbleprojects.org/nik/102205

The published Thimble project URL used to be hackable to remove the Remix button so kids could have free Github-like hosting, but alas it was removed.

[Edit: Fixed links]

Heads up, your links are broken. They'll only work for you since they take you to the editor - can you use the links from the Publish dialog?

Thank you. Links are fixed.

No problem! I had a big hand the design of this current version of Thimble, and if you're willing to share, I'd love to hear about your experiences using it to Teach. Shoot me a message on Twitter @flukeout or you can email me at luke@mozillafoundation.org if you're interested. Cheers.

Like some mentioned, Thimble uses Brackets in it's core. After some hiatus, Brackets has seen more commits to the past month than in the past year combined.

There's tons of starter issues (and more advanced ones) that can be tackled in the core right now too. If you want to get into OSS contributing or maybe you already are and want to contribute in general, check out the issues on GitHub!

https://github.com/adobe/brackets

(Disclaimer: third party contributor of Brackets)

I made a thing:

https://thimbleprojects.org/smlefevre/102167/

Bash cheat sheet-- keyboard shortcuts for jumping and deleting words

I liked it so I pitched in. Too lazy to make an account, though, so I put it in a gist [1].

[1] https://gist.github.com/anonymous/a22380f8c37b22dba03606e368...

EDIT: now that I think of it, Ctrl-R is really the killer app of bash/readline and it's saved me many more keystrokes than the word/line delete or cursor motion keys.

Making account was very smooth and quick. Just username/password/email and Click.. auto login... and you are back to work.

Passwords are inconvenient. There's no real reason not to offer SSO/OAuth in this day and age.

Unless the SSO provider decides to turn off your account.

Or decides to turn off themselves[1]

[1] https://wiki.mozilla.org/Identity/Persona_Shutdown_Guideline...

Just saying hi because of how similar our usernames are, ha.

There's no real reason not to use a password manager.

Exactly I use password manager. So it was breeze as original comment :-)

Except for the password rules. It took me three tries to comply, because it only displayed one violation at a time. Besides, do I really need a strong password for a site like this?

Other than that, yes, super easy.

> Move cursor to beginning of line

> Ctrl+E

Isn't it Ctrl+A?

That's awesome!

I bookmarked it. Please keep adding to it. You could make it the best bash cheat sheet on the web, if you steal from all the other ones out there. It needs a lot more shortcuts.

It's just for me-- only the ones I'm trying to memorize ; )

It would be pretty neat if this was collaborative (like google docs). That would be a nice way to teach HTML+CSS+JS remotely.

I was actually expecting that feature when I saw that it was developed by Mozilla, as they made Together.js[1].

[1] https://togetherjs.com/

The together.js page says:

>Log into Thimble, then click the 'Collaborate' button to start collaborating with a friend! //

... so it sounds like it's collaborative.

It appears that the collaborate functionality is a feature of the old version of Thimble. I cannot find any collaboration functionality in the new one.

They've clearly made an effort to appeal to a young audience and that should be commended

I don't know how up to date it is, but it looks like there is more about the technology at [1].

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

This has been around for a while. The product is great for beginners but yet doesn't get the attention it deserves. May be Mozilla should market more.

It would be most excellent to describe roughly what this is in the title, expand upon <company> <random word>

The HN guidelines (https://news.ycombinator.com/newsguidelines.html) ask us not to, instead saying to use the original title.

Thimble is also extensively localized for users and learners who speak other languages. https://github.com/mozilla/thimble.mozilla.org/tree/master/l...

Isn't it exactly what was Mozilla Webmaker some years ago ?

This one lets you do a mobile view.

Which is sort of ironic given mobile Mozilla marketshare is less than IE.

FWIW, I use Firefox on Android, and I'm extremely happy with it.

Except for when clicking on hyperlinks doesn't work until the next update!

You do realize that that bug only was shipped in nightly, and only for 3 days, and never in the beta or release channels?

If low market share was a reason not to do something in browser-land, there would only be one browser. If anything, low market share is exactly when you should try to outdo the established competition =)

It does seem to use a webmaker.org login

It looks like it _did_ live on Webmaker; https://thimble.webmaker.org/ redirects to this one.

It would be nice if somebody could mention what changed on Thimble for this to come up again. (It could be that somebody who didn't know about it before just found it, which is cool too.)

when you sign up you get an email saying "Welcome to Mozilla Webmaker! Thank you for joining us to discover, create and share the Web. I'm looking forward to seeing what you create."

This is the spiritual successor of that. "Webmaker" changed from a single product to "a suite of products" at the time, with this tool getting renamed to "Thimble". That thimble used Code Mirror for its editor, and only allowed you to write a single file. Since webpages aren't single files anymore, and haven't been for a while, we made a choice to try to integrate quite a few technologies (Adobe's Brackets as editor with tons of features, Filer for faking a POSIX filesystem in the browser, etc) into something that is both the same, but also a lot better, and the old Thimble got turned off (after about a year of having both up at the same time) last June.

Did you guys look into VS Code as an option for possible in-browser editors?

We didn't, mostly because VS Code didn't exist yet when we added in Brackets. It got released when we were already beta testing, and was still in extreme beta by the time we officially launched the updated tool in August 2015. It would be interesting to see how many other now-existing solutions might work for the code editor part, but at this point it would disturb quite a few people who now use Thimble in the classroom or at learn-to-code events, so while as a contributor PR it would be fantastic, we don't have the man hours to investigate a completely new code editor component (with its own UI that needs tailoring, filesystem requirements, plugin infrastructure, etc).

This thing is getting old now. It's the best way to learn HTML + CSS imo. Not Bracket or not any other coding school-like page.

Now would you use that as a jsfiddle or a IDE? No. This is to learn only. And it is awesome.

The new version (with file/folder support and brackets as editor) has only been out for a year, I wouldn't call it brand new for obvious reasons, but it's not really "old" either?

It doesn't work in FF's private mode: "There was an error loading your Project. Please refresh your browser.

NOTE: if you are using Private Browsing mode, please reload in normal mode."

Any reason why?

If you're using private browsing mode or "Never remember history" in Firefox settings, IndexedDB is also disabled.

https://bugzilla.mozilla.org/show_bug.cgi?id=781982

Thank you, sir.

This reminds me, I've been using Brackets for a while and have been mostly satisfied. Should I make a switch?

I'm confused. Why would you make a switch if you have been satisfied? Also, this doesn't seem like it's in the same category as Brackets; this seems more in the educational space.

Thought this was going to be a Windows Live Writer competitor. Man, I miss that software.

http://openlivewriter.org/

Miss it no more: https://github.com/OpenLiveWriter

Should keep in mind that this just for learning purpose, can't really compare Thimble to an IDE or full pledged editor like Sublime or Atom

With other conversations here about people being worried that Mozilla may up and abandon this one day, was the fact that you called Sublime and Atom "full pledged" a freudian slip?

Haha, indeed.

I really love JSbin (thank you Remy), I'll need to give this one a try! :D

"Keep calm and...."

Ugh, when will this trend die

It died quite a while ago, which is why you see it almost nowhere anymore. But: it's open source, file an issue if you have a better starter idea. Everyone'll win.

thought this was the codepen beta..

Considering this as JSFiddle or Codepen alternative, I would find difficulties in using it, having in mind all of these projects that Mozilla killed lately.

I hope that Mozilla will finally figure out exactly what are their goals. They won't gain trust by releasing something promising and dropping it while after because it didn't match their expectations.

More fun : Mozilla was a precusor of web based editors with Bespin but the project was fucked up in a typical Mozillan way. It's the basis of Cloud9 IDE now

Thimble uses Adobe brackets for the editor, which is built on CodeMirrorc which is the main OSS competitor to ACE/Bespin.

> having in mind all of these projects that Mozilla killed lately

I actually got angry when I saw it was from Mozilla. It's gotten to the point that supporting their projects seems like a waste of time. It's the old... "fool me twice, shame on me".

Something like this would have fit in nicely with Firefox OS, too.

They don't just pull the plug on interesting projects, they do it so quickly.

> dropping it while after because it didn't match their expectations.

I wonder what those are? Entry into the educational market, tie-in into other projects (that haven't already been killed), showcasing open technologies...

Honestly, I'm not even sure they know themselves./rant

Still... like much of their previous work, this looks promising.

> Something like this would have fit in nicely with Firefox OS, too.

Speaking of wastes of time....

I may be missing something, but I really don't understand this "Organisation X killed product Y so you should never use their products again" meme. Particularly when Y is open source.

In this case, you are going to ignore what sounds like a very promising and useful product because the organisation that provides it once dropped support for something else. Despite it being open source - so if they did kill support you could continue to use all their hard work.

My suggestion is to take each product on it's merits. If it's useful to you, use it - which adds to it's popularity and makes it less likely to be killed.

And the fact that it's completely different teams of people working in completely different parts of Mozilla. It may not be a massively huge company, but at 1000+ employees don't for a moment believe that one team knows exactly what another team is up to and everyone is responsible for all the things.

It is open source. If Mozilla wants to discontinue it you always can host it yourself.

Reply on news.ycombinator.com