Remix Project
Published in

Remix Project

The Remix Project in 2021’s Q3 & Q4

Over the past six months, the Remix team has popped off the back of our app to do some extensive rewiring. First among these changes was continued work on moving our code to React. We also expanded our reach by dialing in some effective channels to new communities, and onboarding new users with a basic product “tour” of our IDE. We also plugged in projects into our “experience”, integrating Slither, and Hardhat, as well as updating the Remix VSCode extension. And, if that’s not enough, we jammed on some tools for collaborative coding, improving Decentralized GIT and integrating Github. And last but not least, we’ve updated our existing plugins. In short, we’ve maxed it out to 11. Here are the “deep cuts” …

Behind the Curtain

React!

One of this year’s largest projects has been to move Remix entirely off our old framework and onto React. This move has made our code much more sustainable. Refactoring all this code has not been a small job, but it has been well worth the effort!

Dependency Review

We’ve updated our major dev dependencies to the latest stable version.

Dialing in New Users and New Remix URL Parameters

Outreach Workshops for Impact

Remix team continued to give industry-specific Ethereum workshops. We call these workshops “Ethereum4”—as in Ethereum4 Musicians, Ethereum4 NGOs, Ethereum4 Healthcare, among others.

In a virtual setting, we gather together people from a variety of disciplines within specific fields at a number of organizations to explain how Ethereum’s technology can be used in their industry, and then we introduce them to some Ethereum-based projects relevant for their field. In these meetings we also let them try some DApps, walk them through some smart contract code, and discuss potential projects they might want to undertake.

Remix is an excellent tool for explaining the basic concepts of Ethereum because it’s a point-and-click app that does not require any set up. Click to compile. Click to deploy. Click to interact with a function on a deployed contract. Get a transaction receipt. View opcodes. You can get users pretty far, pretty quick.

Over the past six months we have given Ethereum4 workshops to lawyers, doctors, and music professionals, and have also collaborated on a workshop with Benson Njuguna — a Fellow from the Next Billion team — about Ethereum4 Startups in Kenya.

To learn more about these workshops, read our article.

Remix AMAs

In the fall, we began monthly “Ask Remix Anything” calls.

Onboarding Tour for New Users

The first time you come to Remix, you’ll now see a 3-step tour.

In the coming year, we’ll be expanding these tours to show users some of the underused gems within Remix. And, to get a sense of what tools have been underused and which continue to be popular, last spring we implemented Matomo analytics. Here’s our latest analytics report.

Load Remix with a File or GIST in the Editor

Have you ever wanted to send someone the URL of a file and have it load in Remix? Ever wanted to send someone a GIST to load in Remix? If so—or even if not — take this URL for a spin:

https://remix.ethereum.org/#url=https://github.com/ethereum/remix-project/blob/master/apps/remix-ide/contracts/app/solidity/mode.sol

The parameters in the URL above will instruct Remix to load this file: https://github.com/ethereum/remix-project/blob/master/apps/remix-ide/contracts/app/solidity/mode.sol in the Editor. The file will appear in the code-sample workspace.

The Parameter for Loading a GIST is… Gist

https://remix.ethereum.org/#gist=26bf5df1a91adef830342e7ec95da0ea

To see more about Remix url parameters, check out our docs.

The Remix VSCode Extension

Compiling, Debugging, Metamask and Remixd

Did you know that Remix has a VSCode extension? With it you can use Remix in VSCode. Over the past six months we have vastly expanded the functionality of this extension. Not only can you compile and use plugins that operate on the compilation result, but you can deploy to a local chain, like Ganache or Hardhat. And by connecting the VSCode extension to Remix IDE Online with Remixd, you can use Metamask in the browser to approve transactions, thus giving you access to public networks.

For more info, see our article on the Remix VSCode extension.

Working Collaboratively on Remix?

We’ve Got your GIT Decentralized and Github(bly) Centralized

Remix now can track your files as a git repository! You can deal with GitHub repositories, clone, push & pull. All the good stuff. You can also store your repositories in IPFS and collaborate. All very exciting! This is done by using a plugin called dGit. Read more about it here.

Previously, you could work with Remixd to connect the browser to a folder on your hard drive in order to have version control there. But now, saving your files on Remix IDE Online has more options!

Hardhat Console Logs Can Now be Seen in the Remix Terminal!

“Hardhat in Remix???” you ask….

Hardhat projects can now be brought into Remix via Remixd and compiled with the Hardhat compiler or the Remix compiler.

Hardhat Console Logs in Remix

The big advancement in the past 6 months is that Hardhat console logs can be seen in the Remix Terminal when making a transaction or when running Solidity unit tests! Check the Remix docs about Hardhat console logs!

To try it out, you’ll need to input an import statement and use console.log to print the value as shown in the image below.

And, you’ll get the log-in to the Remix terminal.

Here is a link to the docs about Hardhat integration on Remix.

A New Editor: Monaco

We have now moved Remix’s code Editor to Monaco! The Monaco Editor looks just like the one in VSCode because… it is the same one used in VSCode. The Monaco Editor is a much more mature, full-featured editor.

For example:

  • The right side column of tiny text allows you to quickly get to a section of your code.
  • Multiple cursors allow for writing the same thing on multiple lines.
  • A spaciously delicious (or deliciously spacious) gutter allows for delicious spaciousness.

File Explorer Updates

Right Click and See the Shortcuts!

We’ve updated the Remix API, enabling plugin-specific items to the File Explorers’ popup context menu.

Multi-select

We’ve added an easier way of deleting multiple files. Now you can Multi-select with shift + click and then Right-click to get a context menu to Delete All!

Plugin Devs can Add to the Context Menu

For all you plugin devs, your plugins can now register their own context menu items (right click).

Debugger Updates

Now in the Debugger’s Opcode list, we’ve changed the color of the next five commands.

So when a JUMP occurs…

the next five opcode will have a color change but that change happens where the JUMP lands (in JUMP DESTINATION).

Solidity Unit Testing Update

When writing Solidity Unit Tests, have you needed to debug a transaction to see what is going on? Now there is a button to open the debugger on every Unit Testing transaction. It’s the button with a BUG on it.

Static Analysis with Slither

Slither is a popular static analysis tool that usually runs from a CLI.

To get Slither working with Remix, you need to have Slither installed as well as solc and solc-select. Then in the File Explorer’s Workspace pulldown, select localhost. This will connect you to Remixd (always use the latest version). For more about Remixd, please check our docs.

In the Static Analysis plugin, a checkbox will ask if you want to enable Slither Analysis. If you are not connected to Remixd, you won’t get this option.

For more info check the Remix docs about Slither.

Remix Cooks with London Gas-flavored Ethereum (EIP 1159)

The London hard fork seems like so long ago. With gas pricing policies brought in with EIP 1159, we updated Remix to support the London gas flavor of Ethereum. The change in the Remix UI is that we have updated the modal that appears when you deploy to the Mainnet:

In this modal, Remix now asks for the new inputs: Max Priority fee and the Max fee.

But remember the Max fee MUST be more than the base fee. If it is less, you’ll get an error.

And, if you do not put anything in the Max fee modal, you’ll get an error complaining that you need to input a number.

For those of you who have never seen this modal, it only appears when deploying to the Mainnet.

Help for Developing PLUGINS that INTERACT with other PLUGINS

For you plugin devs! There is now an additional field in the local plugin form to list what plugins you’d like your plugin to activate.

So make a plugin that activates the Optimism compiler, the Flattener, the Gas Profiler, Remixd, Tenderly, and Learneth… or whatever you like!

Remix Plugin Engine Updates: Plugins Can Activate Other Plugins

Plugins can activate each other as needed. We’ve updated the Solidity Unit Testing and Solidity Static Analysis plugins so that they automatically activate the Solidity Compiler if it’s not already activated.

Thank You Esteemed Users!

Please report any problems you find in Remix. Also please send us your suggestions about any changes you’d like to see in Remix, or any functionality you think would be useful to add.

We strive to make the IDE more convenient and easy to use. You can reach us on Twitter, Gitter, and via email (remix@ethereum.org) and Discord.
TIA!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store