Scrimba: a video format for communicating code | Hacker News Reader

Scrimba: a video format for communicating code

scrimba.com

401 pointsingve110 comments

Thanks a lot for all the feedback, everyone! We're overwhelmed by all the positive comments. If you have any feature requests, please submit them as issues here: https://github.com/scrimba/community

Also, a few people have asked us how to create content, so we're obviously not making it clear enough. To do that, simply create an account (with GitHub) and start screencasting in our browser editor.

If you want to get in touch with us, send me an email at per@scrimba.com.

Finally, I want to mention that we're applying for YC this spring. If any of you have any tips or connections you think we should speak with, please let me know :)

Please would you add an option to create an account with email and password? It's not GitHub's business to know I'm using your service (or of any other social login provider).

Anyway, what you built is a great improvement over normal video. Well done.

The console button isn't working for me on some of the codecasts. I'm using macOS Chrome Version 56.0.2924.87 (64-bit). Not sure if this is because I have set an unusual Content Security Policy for chrome. Here's what I see in my browser's console when watching

  Blocked script execution in 'https://scrimba.com/cast/cast-327.preview' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

https://developer.chrome.com/extensions/contentSecurityPolic...

Is the video format documented somewhere, or are you keeping that proprietary?

Y apply to YC. If ur serious about anything and ur a serious developer, u don't need money, connections, etc. Y dilute yourself, Y forever be beholden to investors. I know I don't want anyone telling me what to do regarding my baby.

Programming apps is quicker than ever now. All you need is a ramen noodle revenue stream to keep you afloat while you build.

I urge you to question why you really wanna go to YC. Is it to get consigned by "daddy"? It sure can feel good. It's an accomplishment of it's own, but a sub-par intention.

You got this far, why not monetize on your own so you can support yourself through your product, and never have to give up any equity and rights to decision making for YOUR COMPANY!

Too many people are eager to allow others to have a say on their baby. Don't do it unless you absolutely need to. Start charging. I'll pay for this product. Forget YC. Believe in yourself. Are you a follower that eagerly seeks direction from others or a leader who just knows what must be done and doesn't look to others for validation. Validation seekers will always fare less well because they are less confident. So the question is: why are you not confident in yourselves? Why is this going to fail if you don't go to YC? To put the question in the positive, how could you get to where you wanna go and farther without YC?? What do you need? Is it just ramen noodle revenue for you guys while you build? If so, maybe there are other ways. Have you even tried to explore them?

Fair points, the reason is simply because I think we'll be able to build a bigger company if we join YC. Specifically, the pie will grow more than the 7% YC takes from it.

But I might be wrong of course.

Let me just add my two cents, having gone both routes. The mantra you will hear all day long is exactly that... Wouldn't you rather have a smaller piece of a huge pie than a big piece of a small pie?

But I would urge you to weigh things out. That first 7% is just the beginning. They will urge you to hire the best and brightest, time is of the essence. They will tell you not to worry about money, more VC money will flow. And then you find yourself with a big payroll and the need to raise another round, and then another, and then another. Before you know it, you've built the $100 million business you always wanted, but you aren't in charge any more and you own maybe 10 percent. Dilution happens faster than you realize. (Unless your growth is off the charts and you can negotiate amazing terms because VCs are falling over themselves to give you money, ala facebook.)

At that point the question becomes, would you rather have a hundred percent of a $10 million business or 10 percent of a $100m business? I sure as heck would rather own all of the smaller business. You don't go to the board to ask for a raise, you don't hope for a liquidity event so you can get rich one day. You don't waste time trying to convince investors that you will succeed. You control your destiny.

But to each his own. Maybe you would never be able to get to that $10m on your own. And maybe you would rather be known as the founder of something big. Nothing wrong with that. Just know that the headaches and distractions of going the VC route are legion.

I've never applied to YC but that isn't totally correct. There's no one forcing you to raise venture capital. I know of YC companies who are quite successful who have never raised money or stopped after raising a smallish angel round and still own a majority of their company. Granted they're in the minority, but it can be done.

Ya, it definitely happens. But if the company didn't need to move on to raise more money (probably the biggest argument for YC is that it will be easier to raise more), I would question whether YC was really necessary in the first place. Was YC the only place you could have raised $100k? And if you were able to do it by raising only 100k, perhaps you could have done it without their money.

1 billion percent agree with this sentiment. It's all a trick. It's all perception. It's all egos at play that want to be validated by larger egos. You're a friggin fantastic coder. You can build something that YC will accept. And you're choosing to complicate your lives, introduce all these players you just met into your circle, etc. For what? Can you really not make a living off your programming chops to sustain your own startup on the side that increasingly takes up more and more of your time as it generates money?

If you're not trying to do that, it's solely because you have ego issues and your greedy. Your willing to take this huge risk of a shittier situation with lots of stress and other people telling you what to do to prove to the world how great you are and so you can attain way more than you really need. It's a false a conception of what will make you happy--cuz it wont. I can make $65k a year in the states and live an extravagant life-style, doing all the trips and experiences I want to. All while working primarily on my own stuff and doing minor contracts here and there. I worked very hard to get here and learn these lessons. I used to make way way more, but the quality of my life was worse. I used to pursue startups with partners, making some industry I barely care about more efficient. Now i work on my own project--which for all intents and purposes, let's just say it's a surfing startup. Everything I truly love is aligned with my career skills. It's not a surfing startup, but that should paint the picture. Most of all, I don't have investors down my back, partners I'm constantly disputing with, higher percentages taken away in taxes, and generally a million unnecessary people to deal with. And actually more importantly, I'm not building some bullshit like Uber which has nothing to do with my interests. I love to code, but i think if anyone loves coding more than traveling, hanging out with friends, being in the world, you have a problem. What I'm saying is: if you're building Uber, you don't love taxis, you just better hope you're solving interesting problems. And "interesting problems" is far less interesting than traveling to Machu Pichu with my girlfriend and taking ayahuasca in the Amazon (for example).

Programming is a means to an end, not the end in itself. Programming isn't life. It's far from it. Building software companies and the business side is even farther. Those guys are going to YC for ego and greed, and like 90% will pay the price and likely fail, whereas they could have something bringing them income and quality of life right now. They could already be at the end of the road and living in the now, i.e. having a functioning product that doesn't need to go even farther to be labeled a success. If they could live off their product right now, they would be a success. The route they're gonna go--as you mentioned--will lead to more and more rounds and likely never achieving a state they're happy with. It's the essence of the human condition and addiction. It's nothing unique to startups, programmers and YC. They just would be way happier if they simplified their life. Like everyone, they'll have to find out the hard way though and complicate their life to the extreme before they realize.

AKA If Prince had been an internet entrepeneur

While you do make some good points, I think it unwise to speak with a negative sentiment about YC... on YC...

Also spelling.

If you provided an embeddable iframe widget that I could put on my own site, and intercept the file changes to do my own rendering, something like:

    <script src="http://scrimba.com/widget.js">
    scrimbaWidget(".my-container", "sc-ri-mbaID", function onFileChanged(name, source, output) {
      persistToMyBackend(name, source)
      output.innerHTML = renderFromMyServer(name)
    })
    </script>

... this would be a very interesting platform play. You would be providing essentially the audio, text capture, and synchronization, but I could keep doing my app hosting. Not having to store audio or deal with browser incompatibilities around recording and playback would be worth some money to me.

Like Filestack for screen recording.

Really cool tool. Congratulations and great job! Look forward to seeing where this goes.

Feedback: the rerun project button is hard to locate and not prominent. I wanted to rerun the project after making some changes. I felt encouraged to save (fork) or resume playback, overwriting my edits. Make it more intuitive to rerun after making an edit.

I really like the idea and I expect to see a lot of great tutorials in this format. I would really use a version that works with tmux or iterm though, something like asciinema but for multiple terminals + a browser. I wouldn't even mind if the result is read only as long as the viewer can copy paste from it.

Edit: Just to add one more note: I know recording terminal and chrome at the same time is too complicated to productize, but I wouldn't mind having to set it up. I am a developer. I set things up.

I literally yelled aloud, "Wait! Stop! What is going on?! THIS IS COOL." when I first interacted with your product. This is novel & fantastic. Well done.

EDIT: I've gone ahead and moved all my UI/UX feedback into GitHub per your request. Good luck working on this! :)

Thanks for really valuable feedback :) Great if you want to submit and follow up at github.com/scrimba/community! We hadn't really planned for a HN launch yet so a lot of the ux is rough around the edges.

Yep :) I know how valuable the "I've never used this before" interactions can be with a product! I'll toss up an issue!

This is a wonderful idea and execution.

Tip for people trying this out, to experience it fully you have to:

- login with github - edit some text - then hit play again. The preview will then update.

- also, you can record your own edits to the video.

I am surprised by the quality and thoughtful demos.

Some simple things would make it better, like updating automatically without hitting play. Also, I think the videos should have x buttons to close them, not just clicking in another area.

Nice to hear you praise the quality. We haven't spent a lot of time on producing the current casts, it's just that the tool makes it easy to create casts of high-production value. No more fiddling with screen-recording software and post-production. It makes a big difference when you can go from "I want to explain this" to a finished cast in three minutes.

The "casts are shown in an overlay"-feature was released yesterday. It certainly requires more iterations. Thanks for the feedback.

Neat! The audience for the tool seems to be someone who can hear, though. Has there been any awareness or discussion of those who cannot hear? Of those that cannot hear, a large majority use captioning or sign language. Video in a PIP mode, or captioning support, would go a long way in including everyone to the party. Also, the earlier these features are added, the more content is accessible.

I don't get it at all. If I edit the code and press play, the code just reverts back to what it was. My edits never execute.

Are you pressing the play icon in the lower left corner? That is for resuming back to the timeline the of the creator of the cast.

To run the code, press the play icon in the top right corner. When you hover over it, it says 'Run code'.

We clearly have some UX challenges here :)

Ah, that was it, thanks. Yeah, your UX is non-great :(

Correct me if I'm wrong, but it looks like this written in a Imba[0].

[0]: http://imba.io

You are correct :) Initially it was meant as a tool to teach people Imba, but now we support other languages as well!

This is the coolest web tech I have seen in a while.

I am actually not super convinced on the usecase of being able to edit the code at any time, but simply being able to copy it is already so much added value over traditional video course material.

I will definitely be checking out the possibilities with this.

A good usecase is for when you are learning something through the video and can play with it right there. Khan Academy uses something similar and it is awesome.

Super cool. One issue...

I was watching the flexbox video and modified the CSS code but the view layout didn't update. I clicked the save button thinking that would update the view, but then it had me sign up. After signing up, I ended up with a fork of the video. Cool, but not what I wanted.

All I really wanted to do was fool around with the code while I had it paused, see the updates in the layout, and click play again - at which point I would have expected the code to revert to the script.

Oh, you need to click the "run" button (upper right) once before the CSS changes apply. After that it should be live. We need to make that more clear.

Ditto. Also was prohibitive to seeing the one "ah ha" moment for users. Would have been nice to experience it before signing up.

Yes. This. ^

Wow this is so much better than a traditional video explanation of code. Really well done and polished for a beta project.

Speaking of 'beta', what is the plan for Scrimba? Are you interested in it being an open place for sharing videos and demonstrations? Or are you planning on monetizing in some way?

We plan to add monetization options yes. Basically sell courses through Scrimba. But it will also be possible to simply share casts for free.

Thats great!

Very cool.

In the last few weeks I've been thinking something similar would be great for podcasts. Not on-screen editing, but tools for displaying information and soliciting feedback.

In my case I've been listening to a lot of podcasts about real estate. Frequently they reference a PDF or web site to sign up for more info. It would be nice if that just showed up onscreen rather than having to open a browser on my phone (especially when I'm in the car).

Dedicated apps can do this, of course, but I an open protocol would have a lot more uptake from semi-technical people who want to create simple online course distributed via podcast.

There is so much opportunity for learning here... I agree, I wish podcasts had some kind of technology that allowed you to follow things that are hard to convey through Audio.

I once started writing a podcast app like that. As a listener I would reallly like the idea. Unfortunately I don't see why a podcaster would do the job of adding metadata on my platform if they don't get anything out of it. If it was a core of their value proposition, they would probably use a mooc platform and not a podcast.

Then I though I would probably need to build a more useful tool to manage other needs of a publisher, like website, feed generation, pushing to multiple platforms, etc. That way I would have all sorts of metadata for free AND I would provide value to the publishers (automatic publishing to all other platforms). I could host the content too and give them download numbers, could post listening habits from my app, and all that. But that is a lot of work though, before I can provide any value to either the listeners or the publishers.

Then I listened to a podcast about the podcast ecosystem (how meta) about how podcasters actually benefit from the ecosystem being so distributed. If there was a single format for metadata dictated by a single company (would probably be apple) it would eat into their advertising revenue. They would not admit it, but it's actually good for publishers if they only have rough download numbers. Without clicks, they can just make up their numbers, and sell ads even though everyone fast forwards on the ads. If they had actual clicks, their revenue would become dependent on it.

For sponsored podcasts you're right. But much of what I listen to doesn't have advertising, or it's indirect in the form of interviewing guests who promote their products.

For example, one of the podcasts I really like is run by a guy who a) knows a lot about real estate and b) sells a SaaS product for people who want to do what he does. He frequently references show notes, PDFs, webinar signups and the like in his show, and I engage with most of that stuff... if I remember to do it when I get home.

In his case the value per customer is quite high, so he would probably make the investment in rich media. He doesn't have sponsors and so isn't beholden to click through rates.

And I'd wager that's true for the vast majority of podcasts. A handful make money from advertising because they have really large audiences. The rest do it as a hobby or to promote their businesses.

Much like IanDrake said, this is super cool but kind of "primes" the user into thinking that he'll be able to play around with the code while paused. It'd be great if you supported that, e.g. by doing a "fork" into local storage.

Anyway, the project is really great and impressive! :)

We do support that. Hit the 'Edit' button in the lower right corner :)

This is really cool!

However... I might be a bit obtuse or something, but how can I produce my own videos?

Maybe I'm overlooking a link?

Just login and you'll see a plus icon in the top right corner:)

Aha!

My script blocker was preventing the button from showing up.

I though I was going mad...

Thanks!

Wow, this could be a game changer. Imagine using a tool like this to teach math as well. Great job guys.

Wow, this is far much better for code than standard videos.

Is it recorded using the scrimba.com website ? Is it only for web code ? The about page https://scrimba.com/about does not explain much.

Yes! You can sign up now and record your own casts. For now it's focused on client-side libraries, but we're looking at supporting server-side languages as well.

What languages are on the road map?

Also, really really well done!

Not 100% decided exactly which. But expect the most popular ones. More info will come :)

Basically "web version" of asciinema, right?

Great idea and great execute, I like it! One thing that I haven't seen yet but what I think would be a really important feature would be embeddable "videos" which developers could put as a widget in an iframe on e.g. their website blog.

This is insanely well executed - like most people here I am psyched to play with it

I was thinking about something very similar, essentially embedding an IDE on top of Youtube videos. Like others, I agree this is very neat. Is it just me that can't hear any audio?

If I stop the video, then use the "resume video" in the lower-right corner, then I get the audio but it's out of sync by however long it took me to stop the video in the first place.

Maybe you need a YouTube video detailing the experience, as it obviously isn't quite as good on mobile Chrome (no sound, I only realised from the comments here; also awkward to control accurately).

A video would also give people a sense of what the environment/process looked like before they hand over details - I'm happy to trade my details for a good experience once I know it's likely to be a good experience, less so when I'm not confident, it becomes a bit chicken and egg...

Stuck on "loading" in Edge on all videos.

Same here. Console shows syntax error after loading a stream.

The moment I try scrimba, I notice is using the code completion from VS code, so I went with my instinct and open a file with .ts(for typescript) and it work

EDIT: a bit hackish but it is possible to add d.ts, by putting the file directly(like creating a file call jquery.d.ts and put the jquery def inside), the def will actually load in

Great job! Is there any other way to login that's not github? I'm trying to move away from github and so far the only thing preventing me are sites that require github login. It would be great if you offered just plain old email login :)

Why are you trying to move away from Github, out of curiosity?

just a personal stance. It's a good service, I just personally don't like it.

I think its because they use github for storage/forking things, but they could certainly extend it to work without it later.

that makes (some) sense. It would be great if in the future they could not rely on github.

Is there sound accompanying the video? I watched several but didn't hear anything.

Yes. It's supposed to have audio. Could you submit an issue at https://github.com/scrimba/community with details about your browser/environment?

Beware: The website asks my mobile browser for permissions to take pictures and video.

Oh, it's probably because we ask for webrtc mic-access when you record. Will look into it :)

Great job,

- Any plan on embedding option for 3rd party websites? - Self-hosted versions?

Yes!

This is really awesome! I was wondering about how you are planning to monetize or sustain the project. Are you going to give the ability for users to monetize their own contributions?

Yes, that's on our bucket list!

We're still young so we have plenty of time! :)

Looks great on desktop. On my android though, it's slow, low-contrast, and a bit janky.

The desktop experience, though, is better than comparable stuff I've seen. Nice work.

Man this is good. Any plans to extend it to other languages?

Thanks. Yes, other (server-side) languages are definitely coming. We're currently working with a prototype that integrates with Jupyter/IPython, and we're also playing with the idea of using Docker images for giving a full terminal. The biggest challenge is to give a powerful execution environment and make it easy for the viewer to play with the code and be able to run it.

Have you guys seen https://runkit.com/ ? I suspect they are using something like docker for snapshot and replaying. I'm sure there are some tricks to be learned from them

Do you have a blog where you would update this?

We'll create a blog soon, which will be linked to at Scrimba.com.

Would love to see something like this for golang. I mean the tour of go is already great, but this is yet another step better :-)

Awesome work, this seems like something pulled from the future.

One quick question have you considered including Python related stuff?

Support for Python and various other server-side languages is on our roadmap yes.

This is a great idea.

I have one small suggestion: Please give the cursor a better contrast or outline/shadow.

Does anyone have any tips to start playing around in this environment with ES2015 stage-2?

We'll open up for that soon!

Minor nit: some of the thumbnails report they've been viewed "1.52" times.

Thank you for reporting. Fixed now.

If I edit some text in a video that I created, do I need to re-record all of the audio?

As for now, you can't change the code after it has been recorded audio over it.

Bug: if you hover over the "popular" ones, some say 3.81 views, etc.

feature request: Ability to change playback speed. Eg 0.5x, 1.5x, 2x

I've opened an issue for tracking this here: https://github.com/scrimba/community/issues/9

Is there a way to search all videos?

We're working on search, discovery, and sorely needed social features as we speak. It's coming very soon!

very cool tool. would be even better if you add #tags so say you can filter all the #imba casts.

Looks great! Signup took seconds.

Insane and well executed!

Needs a volume slider.

Please add a favicon!

This is pointless, tried editing , did not work as I thought it would. Sad!

There is a small "play" button in the top right corner you have to press after editing.

You don't need permissions to edit, but you do need them to save.

Yeah I saw that , little bit too minimal to be honest , doesn't scream "click me" so was a bit confused initially. Though it was just another play button for the video. Maybe moving it to the output window would be a bit less confusing

Just wanted to say I think you've done an excellent job with this!

Wow, very exciting! Already starting to use it. Question: How to embed a scrimba "video" on another page?

Support for that will come, but it might be a pro feature. Any specific use case you were thinking?

Just to post in blogs, github pages, etc. I'm biased but I think you would get free marketing if people embed it, and a paid feature for people to keep them private (password locked, whatever).

That way people who publish free educational content (freecodeacademy, me - example, a todo app tutorial: http://gun.js.org/think.html , etc.) would spread scrimba awareness. The inverse, sites that charge for classes - Udemy, etc., have a natural incentive to keep their content secret, which they'd have to pay for.

This is so badly needed in a world of video coding tutorials (cough Unity3D). Awesome technology

<rant> I cannot wait for the "everything needs to be a small looping video clip" fad to go away.

Video clips of typing make no sense. The animation is distracting, it provides no useful information, and they always either loop too quickly (frustrating me because I lose my place and have to wait for the whole thing to come back), or go too slowly (frustrating me because it won't hurry up). A 3 second loop is great for a hamster meme, it's not great for displaying text that I want to read.

It's like an entire group of people completely misunderstood why GIF animations were despised and died off.

Seriously, what value are these video clips adding? </rant>

Did you actually click on the link in OP?

You can pause and edit the code inline...

You can also skip to the end and mess with the finished code via the progress bar and edit button if you don't care for the explanation.

Reply on news.ycombinator.com