插播：在線交互教育軟件系統(tǒng) Scrimba 要聞

歡迎指導(dǎo) React 開發(fā)演示制作 https://scrimba.com/scrim/cB32EPsv

React.js Demos

插播：在線交互教育軟件系統(tǒng)的要聞

Scrimba 不同于傳統(tǒng)的視頻教學(xué)除了評(píng)論就什么也不能做，Scrimba 是音頻、編碼記錄回放的形式展現(xiàn)，用戶能隨時(shí)暫停，同時(shí)還能進(jìn)行編輯，結(jié)合 discord 還可以在線交流。第一次見到這種可直接編輯代碼的教學(xué)視頻，知道大概的原理就是記錄所有的鍵盤和鼠標(biāo)事件并重繪 DOM，當(dāng)然音軌也要保持同步。這種基于事件回放，沒有任何像素點(diǎn)的錄制方式節(jié)約了不少流量，播放過程也十分流暢，最重要的是可交互式的回放，類似的技術(shù)最早從 OpenCanvas 繪圖軟件見識(shí)過。

來看看創(chuàng)始人對(duì)采訪的問答：

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

這真是一個(gè)神奇的網(wǎng)站，新手找教程，老鳥找靈感 Scrimba - Interactive Screencasts Created in an Instant！

Scrimba 是一個(gè)開發(fā)者團(tuán)隊(duì)的屏幕直播流分享工具，有自主的基于代碼的稱為 scrims 的視頻格式。Scrimba AS 總部位于挪威奧斯陸，核心團(tuán)隊(duì)由 6 人組成，得到了 StartupLab、北歐制造商、Alliance Venture 和 Amasia 的支持。

Scrims 這種視頻格式是交互式的，在官網(wǎng)編輯時(shí)以 Note 顯示，每一個(gè) Note 都是基本組織單元，每個(gè) Note 都是可嵌套的，可以一層 Note 套著多個(gè)子 Note。每個(gè) Note 有帶聲音的錄制狀態(tài)，和非錄制狀態(tài)。錄制狀態(tài)的 Note 可以播放重現(xiàn)原來的交互動(dòng)作記錄，而不帶錄制的 Note 就是一個(gè)原樣展示的內(nèi)容，每個(gè) Note 都可以通過一個(gè) URL 分享。

在 Note 進(jìn)行操作時(shí)會(huì)自動(dòng)進(jìn)入編輯模式，如果前面沒有正在編輯中的 Note，這個(gè)操作會(huì)產(chǎn)生一個(gè)新 Note，編輯完成后就可以將這個(gè) Note 設(shè)置為確認(rèn)狀態(tài)，未確認(rèn)修改的 Note 會(huì)在退出后就丟失。

Scrims 這種結(jié)構(gòu)類似 Git 的分支結(jié)構(gòu)，但這里有個(gè)問題是 Note 如何合并，畢竟 Scrims 不是 Git。

以上是 Scrimba 官網(wǎng)目前免費(fèi)使用的版本的基本功能，可以制作免費(fèi)的內(nèi)容。收費(fèi)的專業(yè)版本可以參加所有的課程，訓(xùn)練營和職業(yè)道路，不知道可以不可以發(fā)布收費(fèi)的教學(xué)內(nèi)容：

  • Monthly 60$
  • Semester 360$
  • Annual 601$

整個(gè)官網(wǎng)就是一個(gè)課程資源加內(nèi)容制作工具，編輯界面主要是編程 IDE 環(huán)境，除了基本的 HTML, CSS, JavaScript，已經(jīng)支持 Python、TypeScript、Imba 等編程語言，還有 React、Vue、Angular、Mithril.js、Svelte、jQuery 等等開發(fā)工具。

目前主要為開發(fā)者提供教學(xué)內(nèi)容，但可以想象的是其它領(lǐng)域也可以實(shí)現(xiàn)，是一個(gè)非常有前景的項(xiàng)目，從開發(fā)團(tuán)隊(duì)收到的資本支持也可以推斷這到點(diǎn)。

Sindre Aars?ther 作為 CTO 和聯(lián)合創(chuàng)始人，開發(fā)了比 JavaScript 更簡(jiǎn)潔的 Imba 編程語言。整個(gè) Scrimba 學(xué)習(xí)平臺(tái)都是用 Imba 搭建的，包括前端和后端。

Imba 依賴了 Go 語言實(shí)現(xiàn)的 esbuild，基于 ESM 的打包機(jī)。Vite 和 snowpack 底層都是用了 esbuild。從 Vite 的 README 上可以發(fā)現(xiàn) esbuild 的執(zhí)行速度非常快，TypeScript 轉(zhuǎn)義成 JavaScript 要比官方的 tsc 快 20-30 倍。對(duì) React、Vue 和 Imba 進(jìn)行基準(zhǔn)測(cè)試，結(jié)果是 Imba 的 DOM 改寫速度快了 20-30 倍。Imba 速度很快，真的非常快。同時(shí)支持 VSCode 和 Sublime，開發(fā)非常便利。

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>

再看一個(gè)例子，樣式的使用，:flex 表示 display: flex，簡(jiǎn)直就是 Web 專用的語言，顏色指定使用的是 Tailwind CSS 的預(yù)配置，數(shù)字越大色彩越深：

# 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 的框架，可以被用于快速地構(gòu)建 UI。在創(chuàng)建網(wǎng)站時(shí)，您只需要確定項(xiàng)目的范圍，而無需自行編寫 CSS。雖然 Tailwind 并不提供默認(rèn)的主題，您也找不到任何內(nèi)置的 UI 組件，但是您可以使用預(yù)設(shè)計(jì)的部件菜單，來構(gòu)建目標(biāo)網(wǎng)站。

Scrimba 目前在實(shí)現(xiàn)上還有些問題，如播放有時(shí)出問題，可能是服務(wù)器問題。選擇模板時(shí)，只能單選，比如不能同時(shí)選擇 TypeScript 和 React。如果選擇了 TypeScript 再添加 React 依賴也不能正常 import 導(dǎo)入，需要按以下方式，而且 ReactDOM 還不能導(dǎo)入，服務(wù)器穩(wěn)定性不夠：

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

運(yùn)行后就會(huì)在 Chrome 打開一個(gè) scrim，接下來就可以通過 scrim 交互，編輯和保存文件，并通過 URL 分享本地的工作環(huán)境。

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 這個(gè)在線代 IDE，前端開發(fā)者肯定不陌生，完善的工程管理，完善的編輯快捷鍵功能，完善的社區(qū)交流。如果說 Dribbble 是設(shè)計(jì)師們聚集的圣地，那么 CodePen 則是前端開發(fā)者們約碼的天堂。它不僅提供給你了一個(gè) Showcase 的平臺(tái)，而且能夠開拓你的視野，讓你能夠及時(shí)的了解最新前端技術(shù)的應(yīng)用，同時(shí)幫助交互設(shè)計(jì)師找尋更多的靈感。

CodePen 是一個(gè)完全免費(fèi)的前端代碼托管服務(wù)，與 GitHub Pages 相比，它最重要的優(yōu)勢(shì)是即時(shí)預(yù)覽。無論是 Jade、 LESS、 Sass，還是 CoffeeScript、 Babel es6+、TypeScript 都能盡情使用。

快速添加外部資源文件，只需在輸入框里輸入庫名，CodePen 就會(huì)尋找匹配的 CDN 上的 css 或 js 庫。免費(fèi)用戶支持創(chuàng)建三個(gè)模板，不是每個(gè)作品都需要從白板開始。優(yōu)秀的外嵌生成，且支持 oEmbed，在 WordPress 或 Reddit 等支持 oEmbed 的平臺(tái)上，只要簡(jiǎn)單地把鏈接貼入編輯框，發(fā)布后會(huì)自動(dòng)轉(zhuǎn)為嵌入作品。

當(dāng)然，它不是 Git ，不能記錄提交歷史只能有 fork 功能，通常出于備份他人優(yōu)秀作品，防止未來該作品消失了或者變了樣子。

在 CodePen 上發(fā)布的公開作品均使用 MIT 開源協(xié)議。CodePen 團(tuán)隊(duì)目前只有八個(gè)人，完全稱得上小而精。

CodePen 每年會(huì)出一期名為 The Most Hearted 作品集專題，讓我們?cè)隗@嘆前端開發(fā)者創(chuàng)造力的同時(shí)，也能夠?qū)W習(xí)一些新的技術(shù)，捕捉一些新的想法。2016 年專題中盤點(diǎn)了 100 個(gè)最受歡迎的 Pens，參考其中一些經(jīng)典示范：

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

    在作品中，作者利用了音階生成器 、琶音模式生成器以及 Tone.js 實(shí)現(xiàn)的一個(gè) Web（HTML/CSS/JS）應(yīng)用。

  • Shader 圖像變換特效

    在這個(gè)作品中，作者便擴(kuò)展了 THREE.js 這個(gè) WebGL 第三方庫中的 MeshPhongMaterial 實(shí)現(xiàn)了動(dòng)畫的任意變換。另外，他還利用 THREE.js 實(shí)現(xiàn)了文本變換，而此作品也是基于文本變換而來的。實(shí)現(xiàn)交互式變換，拖動(dòng)鼠標(biāo)可以對(duì)動(dòng)畫時(shí)間進(jìn)行定位。

  • Flexbox 游樂場(chǎng)

    在這個(gè)作品中，作者為大家展示了 Flex 容器屬性與項(xiàng)目屬性的應(yīng)用，交互地學(xué)習(xí) Web 的 Flexbox 布局技術(shù)。UI 控件的設(shè)計(jì)做得不錯(cuò)，拖動(dòng)可以調(diào)整數(shù)值，點(diǎn)擊可以設(shè)置預(yù)配置屬性。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容