Scrimba release notes — November

Search, file navigation, asset uploading and much more.

Click the image to see a Scrimba screencast where I explain the updates.

Our latest deployment includes seven awesome improvements, which will make it easier to both teach and learn using Scrimba.

For students, the content discovery and viewing experience has been improved significantly.

For teachers it’s become easier to create screencasts and it’s also possible to create more complex casts with the new features.

Let’s go through each of the updates. If you have any comments, please let us know in our Gitter chat.

1. Search for casts

Search was our most upvoted feature request on GitHub.

A lot of users have requested ways for exploring more of the content at Scrimba, so we’re happy to finally deploy a search feature. Click the search icon in the header, write your query and hit enter.

2. “Next up” queue

The next screencast in the playlist will automatically be suggested as next up.

If you’re watching a screencast which is a part of a playlist, you’ll probably want a quick way of jumping to the next one. So now we’ll play the next cast automatically (though with the option to cancel, of course). You can also scroll through the entire playlist by clicking the hamburger icon in the lower right corner.

3. Skip back and forth

You can skip 10 seconds backward or 45 seconds forward.

Sometimes you’ll watch tutorials that are a little bit too easy or too hard. In those scenarios, it’s important to be able to quickly jump back or forth. So we’ve added the ability to jump 10 seconds backward or 45 seconds forward with a single click.

4. Keep notes in casts

This is how it looks when you’re inside one of your notes.

When you’re interacting with the code inside of someone’s screencast, you might want to save your edits. You can do that now with a new concept we call Notes.

Just start editing the code, and you’ll see a yellow bar at the top. Here’s you’ll be able to Discard or Save your Note. If you hit Back you’re taken to the original screencast again.

Your saved notes will be available on your profile and also inside the given screencast, in the top right corner:

Click the top right corner to see your saved “Notes”.

5. File navigation

You have a full file system on the left hand side.

This is a huge step forward for both creators and students. Previously you had to keep all your files in a single folder. This is not the case anymore. You now have a file system on the left hand side, where you can create and delete files and folders.

Notice that we’ve also added the dependencies in the sidebar as well. This makes it easier for people to see which NPM packages are being used in the screencast.

6. Asset uploading

Simply drag and drop a file into the file system.

Got an image or code file on your local computer which you want to use in the cast? Simply drag and drop it into the sidebar. This makes it a lot easier to setup a Scrimba screencast.

7. Better post processing tools

You can “Cut”, “Speedup” or “Silence” parts.

One of our most important goals it so make it dead simple for developers to share their skills with screencasts. In order to achieve this, the creators need to have simple tools for post processing their cast. So we’ve redesigned the post processing tool and added a few handy features.

Here’s what you can do:

  • Cut: remove the given section.
  • Silence: mute the audio, but play through the section.
  • Speedup: speeds the section.
  • Loop playback: this gives you the opportunity to loop the section when you’re editing.

The road ahead

The next big project here at Scrimba is to create our first full blown course. If Scrimba is to become the worlds best platform for teaching and learning code, we’ll need to create a setup for courses. Or actually, we’ll have to redefine a lot of the aspect of coding courses. And that’s exactly our plan.

Our very first course will be about CSS Grid and it’ll be totally free. Magnus and I will be teaching it.

UPDATE: The course has been launched. Check it out here.
Click the image to get to the CSS Grid course.

And that’s it. Thanks for reading! Please give us a clap so that more people get to know about the updates :)