- Frequently asked questions (FAQ)
- Do a recording
- Edit your recording
- The browser
- The console
- Import / Export
- External JavaScript libraries
- HTML and JS limitations
- Editor keyboard shortcuts
To record, simply hit the Record button in the top right corner:
This will bring up a record dialog where you can choose which microphone you want to use:
When you're finished recording, hit the STOP button. You'll then get the ability to both save or discard your recording.
You can also check out this YouTube video, which amongst other things goes through how to create a Scrimba screencast.
Once you're fininshed recording, you can edit your timeline by clicking the BRUSHUP icon. Check this video if you want to watch a walkthrough of the post processing feature:
This will bring up a timeline with audio waveforms, where you can do three different editations: cut, speedup sections or silence a section. You can also make a section loop so that you can hear through it, however this is for editation purposes only.
To edit a section, hold the shift button down, click on the timeline and then drag the cursor over the area you want to edit. Then you'll see a menu appear with the editing options.
The browser window can be toggled with the BROWSER option in the left sidebar. Once opened, you can choose between two modes: fixed or floating. We recommend you to use the fixed option. This forces you to focus on either the code or the browser window. As a result, the viewing experience of your screencast will become better, especially on smaller screen sizes. Secondly, we're likely to limit the size of floating browser windows in the future, meaning it'll only be suitable for small examples.
To toggle between fixed and floating mode in the browser, click the green button in the top left corner.
Here's how it looks like when the browser window is fixed and you're focusing on it. As you can see, the background is faded out.
When you click outside the browser (or on the yellow minimize-button) it'll will move out of the way, so that you can focus on the code.
Here's how it looks with the browser window in floating mode. As you can see, this opens up for the possibility to focus on both the code and the browser at the same time.
The reason we want to limit instructors ability to do this, is that it can introduce problems when we're adapting your screencast to be viewed on smaller screen sizes (i.e. the browser appearing above code). This adaptation is much easier to do when we know if you're focusing on code or browser.
You can log out to the console in Scrimba screencasts. To toggle the console, click the CONSOLE option in the left sidebar of the project.
We'll also show the latest console log for a few seconds after running the code. This means you can keep the console closed, and still take advantage of it.
You can import and export between files using the require() function and the exports object.
Exporting using exports:
Importing using require():
To use external scripts, you can either link to a CDN via a script tag or use npm.
First click the npm icon in the top right corner. This will open up a dialog where you can specify which package you want to add.
Import the package to a .js file using import or require:
There are some limitations for what kind of HTML tags and JavaScript features you can use in a Scrimba screencast:
Our DOM recorder does not record the content of a <canvas> tag, meaning the live preview window will be blank when a <canvas> screencast is replayed.
You can use the <select> tag, however we only record when the select element changes selection, and not the dropdown effect.
You can use this tag, but we won't record the date picker component, only when the value of the input field is changed.
You can create links between the HTML files in your project. However, external links won't result in anything.
These function calls won't be recorded by the Scrimba recorder, so there is no point using them in a Scrimba screencast. We recommend you to use console.log() instead where that's possible.