What is Vim.Wasm?

Small introduction to Vim port to WebAssembly with screenshot and developer notes
16 July 2018   2489

Vim.wasm is experimental fork of Vim editor to compile it into WebAssembly using emscripten and binaryen.

Developer added some notices:

  • Please access from a desktop browser (Chrome/Firefox/Safari/Edge). Safari seems the best on macOS.
  • Please avoid mobile networks. Your browser will fetch some large files (up to 2.5MB).
  • vim.wasm takes key inputs from DOM keydown event. Please disable your browser extensions which affect key inputs (incognito mode would be the best).
  • This project is very early phase of experiment. Currently only tiny features are supported. More features will be implemented (please see TODO section). And you may notice soon on trying it... it's buggy :)
  • If inputting something does not change anything, please try to click somewhere in the page. Vim may have lost the focus.

The goal of this project is running Vim editor on browser by compiling Vim C sources into WebAssembly. 

Vim.wasm screenshot
Vim.wasm screenshot 

WebAssembly frontend for Vim is implemented as a new GUI frontend. C sources are compiled to each LLVM bitcode files and then they are linked to one bitcode file vim.bc by emccemcc finally compiles the vim.bc into vim.wasm binary using binaryen and generates HTML/JavaScript runtime.

You can find more info at GitHub.

Frontend News Digest 21 - 27.03

Embrace modern image formats, how to indicate scroll postion on page with CSS, integrate TypeScript with GraphQL and more
27 March 2020   2574

Greetings! I hope your week went great! Here's new frontend technologies news digest.

Learn how to use the currentColor value in CSS, how to debug a child process in Node and Gatsby.js with Chrome, how to Debug a Node.js Application: Tips, Tricks and Tools and other cool, useful and demanded things, related to all parts of frontend development.

Guides

  • Embracing modern image formats

Learn how modern images formats and <picture> element can reduce image sizes

  • How to use the currentColor value in CSS

A tutorial on a basic CSS feature, great for newbies

  • Indicating Scroll Position on a Page With CSS

This guide will teach you how to indicate scroll position, using only CSS

  • How to debug a child process in Node and Gatsby.js with Chrome

Learn how to patch `jest-worker`package used by Gatsby.js and by patching enable child process debugging using Chrome Dev Tools in this tutorial

  • Integrating TypeScript with GraphQL

Learn how to integrade TypeScript with GraphQL

  • How to Debug a Node.js Application: Tips, Tricks and Tools

Massive tutorial on Node app debugging, with some tips, that can be useful even for skilled developers

Articles

  • Full Third-Party Cookie Blocking and More (in Safari)

Safari’s Intelligent Tracking, has been in beta for some time, introduces significant privacy changes, including cross-site cookies now being blocked by default

Video

  • The Complete AEA DC 2019 Now Online

Giant number of different interesting speeches from An Event Apart session, that was realeased special in a pack for you to stay home

Updates

  • uppload

JS image uploader with 30+ plugins 

  • Node-SQLite

SQLite client library for Node.js applications 

  • Backstage

Open platform for building developer portals