插播：在线交互教育软件系统 Scrimba 要闻

作者: 坚果jimbowhy | 来源:发表于2021-01-29 16:11 被阅读0次

欢迎指导 React 开发演示制作 https://scrimba.com/scrim/cB32EPsv

React.js Demos

插播：在线交互教育软件系统的要闻

网站开发者的感想：Why we're creating a new video format for code
关于开发者的采访稿：Interview with Per Harald Borgen https://survivejs.com/blog/scrimba-interview/
Welcome to Scrimba https://scrimba.com/casts/cast-279
Scrimba CLI for scrimcasting from your local environment https://cnpmjs.org/package/scrimba
Introduction Imba https://imba.io/language/introduction
Official site for Imba https://github.com/imba/imba.io
The friendly full-stack language https://github.com/imba/imba
ESBuild https://github.com/evanw/esbuild
7GUIs: A GUI Programming Benchmark https://eugenkiss.github.io/7guis/
Learn Vue.js for free https://scrimba.com/learn/learnvue
Learn React for free https://scrimba.com/learn/learnreact
Jasmine - A JavaScript Testing Framework https://jasmine.github.io/tutorials/your_first_suite
21 Web Dev Tips for 2021 🎇- with Ania Kubow https://scrimba.com/learn/21tips/tip-4-test-driven-programming-cwwRVJSV
Introduction to TypeScript with Dylan C. Israel https://scrimba.com/learn/intrototypescript
你所需要知道的代码整洁之道 https://zhuanlan.zhihu.com/p/103365961
Smarter Ways to Generate a Deep Nested HTML Structure by Ana Tudor https://css-tricks.com/smarter-ways-to-generate-a-deep-nested-html-structure/
https://scrimba.com/learn/flexbox/your-first-flexbox-layout-flexbox-tutorial-canLGCw

Scrimba 不同于传统的视频教学除了评论就什么也不能做，Scrimba 是音频、编码记录回放的形式展现，用户能随时暂停，同时还能进行编辑，结合 discord 还可以在线交流。第一次见到这种可直接编辑代码的教学视频，知道大概的原理就是记录所有的键盘和鼠标事件并重绘 DOM，当然音轨也要保持同步。这种基于事件回放，没有任何像素点的录制方式节约了不少流量，播放过程也十分流畅，最重要的是可交互式的回放，类似的技术最早从 OpenCanvas 绘图软件见识过。

来看看创始人对采访的问答：

How would you describe Scrimba to someone who has never heard of it?
Scrimba is an interactive video format for communicating code. It makes the experience significantly better for both the creator and the viewer. The easiest way to understand Scrimba is to watch the 1 minute screencast below:

Welcome to Scrimba https://scrimba.com/casts/cast-279

As a viewer, you can pause and edit the code at any given time. So if you're struggling to understand something, just hit pause, jump into the environment and play around with the code until you understand it properly.

Scrimba also makes the creation experience much less frustrating, as we remove all the hassle involved with creating coding screencasts. No more setup, edit, encode, upload and re-encode. Just code while you talk and then publish it instantly.

How does Scrimba work?
We record the underlying events instead of pixels. When replaying a Scrimba screencast, we recreate exactly what the creator did.

This opens up a whole new world of possibilities for interactivity, creation, responsiveness, search, and recommendations. We've only begun scratching the surface of what we can do with this format.

How does Scrimba differ from other solutions?
Compared to traditional video, Scrimba has the following benefits:

Much easier to create
Interactive (viewer can pause and edit code)
1% file size of video
Better mobile experience (because of responsiveness)
Indexable/searchable

这真是一个神奇的网站，新手找教程，老鸟找灵感 Scrimba - Interactive Screencasts Created in an Instant！

Scrimba 是一个开发者团队的屏幕直播流分享工具，有自主的基于代码的称为 scrims 的视频格式。Scrimba AS 总部位于挪威奥斯陆，核心团队由 6 人组成，得到了 StartupLab、北欧制造商、Alliance Venture 和 Amasia 的支持。

Scrims 这种视频格式是交互式的，在官网编辑时以 Note 显示，每一个 Note 都是基本组织单元，每个 Note 都是可嵌套的，可以一层 Note 套着多个子 Note。每个 Note 有带声音的录制状态，和非录制状态。录制状态的 Note 可以播放重现原来的交互动作记录，而不带录制的 Note 就是一个原样展示的内容，每个 Note 都可以通过一个 URL 分享。

在 Note 进行操作时会自动进入编辑模式，如果前面没有正在编辑中的 Note，这个操作会产生一个新 Note，编辑完成后就可以将这个 Note 设置为确认状态，未确认修改的 Note 会在退出后就丢失。

Scrims 这种结构类似 Git 的分支结构，但这里有个问题是 Note 如何合并，毕竟 Scrims 不是 Git。

以上是 Scrimba 官网目前免费使用的版本的基本功能，可以制作免费的内容。收费的专业版本可以参加所有的课程，训练营和职业道路，不知道可以不可以发布收费的教学内容：

Monthly 60$
Semester 360$
Annual 601$

整个官网就是一个课程资源加内容制作工具，编辑界面主要是编程 IDE 环境，除了基本的 HTML, CSS, JavaScript，已经支持 Python、TypeScript、Imba 等编程语言，还有 React、Vue、Angular、Mithril.js、Svelte、jQuery 等等开发工具。

目前主要为开发者提供教学内容，但可以想象的是其它领域也可以实现，是一个非常有前景的项目，从开发团队收到的资本支持也可以推断这到点。

Sindre Aarsæther 作为 CTO 和联合创始人，开发了比 JavaScript 更简洁的 Imba 编程语言。整个 Scrimba 学习平台都是用 Imba 搭建的，包括前端和后端。

Imba 依赖了 Go 语言实现的 esbuild，基于 ESM 的打包机。Vite 和 snowpack 底层都是用了 esbuild。从 Vite 的 README 上可以发现 esbuild 的执行速度非常快，TypeScript 转义成 JavaScript 要比官方的 tsc 快 20-30 倍。对 React、Vue 和 Imba 进行基准测试，结果是 Imba 的 DOM 改写速度快了 20-30 倍。Imba 速度很快，真的非常快。同时支持 VSCode 和 Sublime，开发非常便利。

Imba 语法很像 Python，如官方的 Paint 示范程序：

# https://imba.io/examples/apps/paint/app.imba
const dpr = window.devicePixelRatio

tag app-paint
    prop size = 500
    
    def draw e
        let path = e.$path ||= new Path2D
        path.lineTo(e.x * dpr,e.y * dpr)
        $canvas.getContext('2d').stroke(path)

    def render
        <self[d:block overflow:hidden bg:blue1]>
            <canvas$canvas[size:{size}px]
                width=size*dpr height=size*dpr @touch.fit(self)=draw>

imba.mount <app-paint>

再看一个例子，样式的使用，:flex 表示 display: flex，简直就是 Web 专用的语言，颜色指定使用的是 Tailwind CSS 的预配置，数字越大色彩越深：

# https://imba.io/examples/apps/playground/app.imba
tag x-app
    css .blue bg:blue2 @hover:blue3 color:blue8
    css .teal bg:teal2 @hover:teal3 color:teal8
    css .yellow bg:yellow2 @hover:yellow3 color:yellow8
    css .red bg:red2 @hover:red3 color:red8 
    css .item p:4 flex:1 rd:3 m:4

    def render
        <self [d:flex flw:wrap]>
            <div.blue.item> "One"
            <div.red.item> "Two"
            <div.teal.item> "Three"
            <div.yellow.item> "Four"

imba.mount <x-app>

Tailwind 是一款 utility-first 的框架，可以被用于快速地构建 UI。在创建网站时，您只需要确定项目的范围，而无需自行编写 CSS。虽然 Tailwind 并不提供默认的主题，您也找不到任何内置的 UI 组件，但是您可以使用预设计的部件菜单，来构建目标网站。

Scrimba 目前在实现上还有些问题，如播放有时出问题，可能是服务器问题。选择模板时，只能单选，比如不能同时选择 TypeScript 和 React。如果选择了 TypeScript 再添加 React 依赖也不能正常 import 导入，需要按以下方式，而且 ReactDOM 还不能导入，服务器稳定性不够：

import * as React from 'react';
import * as ReactDOM from 'react-dom';

Imba 试用：

npm install -g imba@2.0.0-alpha.109
git clone --bare https://github.com/imba/imba-starter-app
cd imba-starter-app
imba -w server.imba

Scrimba 命令行工具提供的功能：

Live stream your local dev environment to a URL
Collaborate in real-time and discuss via voice chat
Keep a recording of the session afterwards
The most popular use-cases are code review, onbarding, and documentation.

Quick-start

# install the CLI
$ npm -g install scrimba

# navigate to your project
$ md scrimba-demo && cd scrimba-demo

# start a live stream
$ scrimba start

运行后就会在 Chrome 打开一个 scrim，接下来就可以通过 scrim 交互，编辑和保存文件，并通过 URL 分享本地的工作环境。

All features

Codebase, terminal and browser sharing
Real-time collaboration
Mouse pointer for each participant
Voice chat
Conferences (up to 4 people)
Record sessions
Dashboard for recorded sessions

说到 CodePen 这个在线代 IDE，前端开发者肯定不陌生，完善的工程管理，完善的编辑快捷键功能，完善的社区交流。如果说 Dribbble 是设计师们聚集的圣地，那么 CodePen 则是前端开发者们约码的天堂。它不仅提供给你了一个 Showcase 的平台，而且能够开拓你的视野，让你能够及时的了解最新前端技术的应用，同时帮助交互设计师找寻更多的灵感。

CodePen 是一个完全免费的前端代码托管服务，与 GitHub Pages 相比，它最重要的优势是即时预览。无论是 Jade、 LESS、 Sass，还是 CoffeeScript、 Babel es6+、TypeScript 都能尽情使用。

快速添加外部资源文件，只需在输入框里输入库名，CodePen 就会寻找匹配的 CDN 上的 css 或 js 库。免费用户支持创建三个模板，不是每个作品都需要从白板开始。优秀的外嵌生成，且支持 oEmbed，在 WordPress 或 Reddit 等支持 oEmbed 的平台上，只要简单地把链接贴入编辑框，发布后会自动转为嵌入作品。

当然，它不是 Git ，不能记录提交历史只能有 fork 功能，通常出于备份他人优秀作品，防止未来该作品消失了或者变了样子。

在 CodePen 上发布的公开作品均使用 MIT 开源协议。CodePen 团队目前只有八个人，完全称得上小而精。

CodePen 每年会出一期名为 The Most Hearted 作品集专题，让我们在惊叹前端开发者创造力的同时，也能够学习一些新的技术，捕捉一些新的想法。2016 年专题中盘点了 100 个最受欢迎的 Pens，参考其中一些经典示范：

渐近式琶音器 Musical Chord Progression Arpeggiator - Jake Albaugh

在作品中，作者利用了音阶生成器、琶音模式生成器以及 Tone.js 实现的一个 Web（HTML/CSS/JS）应用。
- 作品地址 https://codepen.io/jakealbaugh/pen/qNrZyw
- 依赖库地址 https://github.com/Tonejs/Tone.js
Shader 图像变换特效

在这个作品中，作者便扩展了 THREE.js 这个 WebGL 第三方库中的 MeshPhongMaterial 实现了动画的任意变换。另外，他还利用 THREE.js 实现了文本变换，而此作品也是基于文本变换而来的。实现交互式变换，拖动鼠标可以对动画时间进行定位。
- 作品地址 https://codepen.io/zadvorsky/pen/PNXbGo
Flexbox 游乐场

在这个作品中，作者为大家展示了 Flex 容器属性与项目属性的应用，交互地学习 Web 的 Flexbox 布局技术。UI 控件的设计做得不错，拖动可以调整数值，点击可以设置预配置属性。
- 参考阮一峰的 Flex 布局教程 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- 作品地址 https://codepen.io/enxaneta/pen/adLPwv

插播：在线交互教育软件系统 Scrimba 要闻

插播：在线交互教育软件系统的要闻

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读