-
Notifications
You must be signed in to change notification settings - Fork 86
docs: add intro page, improve layout page #186
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from 3 commits
9706a23
c8410e6
f9123c7
daf4201
d1a0cf2
5e35c83
a15e087
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,12 @@ | ||
| ## Remix is composed of four panels. | ||
|  | ||
|
|
||
|  | ||
| Each component of the Remix IDE performs specific functions: | ||
|
|
||
| - Most plugins appear in the **Side Panel**. | ||
| - Editing code happens in tabs in the **Main Panel**. | ||
| - The results of transactions and other actions are visible in the **Terminal**. | ||
| - Switching between plugins happens in the **Icons Panel**. | ||
| - To make a panel larger, drag its border. | ||
| - Most plugins appear in the **Side Panel**. | ||
| - The **Top Bar** allows you to switch between workspaces, login with GitHub, set your themes, and access system settings. | ||
| - You can edit code in tabs on the **Main Panel**. | ||
| - You can view the results of transactions and other actions performed on the IDE in the **Terminal**. | ||
| - You can switch between plugins on the **Icon Panel**. | ||
| - The **Status Bar** provides info about your current branch, alerts, and tips. | ||
|
|
||
| Try clicking the **Solidity Compiler** icon  in the **Icons Panel**. Then click the **Deploy & Run** icon . Then come back to **LearnEth** by clicking this icon . | ||
|
|
||
| In the **Main Panel** of Remix, make sure you see the **Home** tab. The **Home** tab has lots of useful links. To navigate there, either click the **Home** tab in the **Main Panel** or click the Remix icon  on the top of the icon panel. | ||
|
|
||
| - See all the plugins in the **Plugin Manager**. Click this icon  in the lower left corner Remix. | ||
| **TIP: You can make a panel larger (or smaller) by dragging its border.** | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can make a panel wider |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| Remix IDE is a browser-based (also includes a desktop variant) development environment for building, testing, and shipping smart contracts. It’s designed to remove setup friction, make feedback loops tight, and help you reason about what’s really happening on-chain. | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think people who come to this tutorial are wondering how to use to the tool, and not why to use it. This general intro seems like a distraction. Maybe this is better in your intro to Blockchain tutorial. |
||
|
|
||
| This page explains what Remix is for, how it’s structured, and the mental model to bring to it. | ||
|
|
||
| ## Why Remix? | ||
|
|
||
| Writing smart contracts without Remix often starts with setup work that distracts from the code. First, you have to setup a local development environment by installing Node.js so JavaScript-based tools and CLIs can run, adding a Solidity compiler that matches your code so builds are deterministic.You also have to choose a framework like Hardhat or Foundry for compilation, testing, scripting, and deployments. | ||
|
|
||
| You might also include plugins like Ethers/Web3 for calls, coverage and gas reporters for quality, and linters or formatters for consistency. All this is before you write a single line of contract code. | ||
|
|
||
| Remix compresses this process in your browser and all you need to do is open a URL (remix.ethereum.org), write Solidity (or Vyper via plugin), compile, deploy to a network, and interact with your contracts, all in one place. | ||
|
|
||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. From here up - the same comment as above. It could be that your intro to blockchain is an intro to blockchain development. |
||
| ## How Remix is Structured | ||
|
|
||
| Think of Remix as three layers: | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. So the 3 layers are: Workspaces & Files, Plugins, and Network & Accounts?
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think the old version was more direct to introducing them to the layout. |
||
|
|
||
| ### Workspace & Files | ||
|
|
||
| Your code lives in a workspace: folders and files you can create, import, or connect to external sources. Remix stores data in the browser (IndexedDB) or via integrations; you can export at any time. | ||
|
|
||
| ### Plugins | ||
|
|
||
| Everything in Remix is a plugin, even “core” modules, so you can enable/disable to fit your flow. Some examples of core plugins include: | ||
|
|
||
| - **File Explorer**: Allows you to navigate and manage files in Remix. | ||
| - **Compiler**: Turns Solidity/Vyper into bytecode and ABI. | ||
|
|
||
| - **Deploy & Run**: Sends transactions, deploys contracts, and lets you call functions. | ||
|
|
||
| - **Debugger**: Steps through transactions with stack, memory, and storage views. | ||
|
|
||
| - **Static Analysis & Linting**: Catches common pitfalls before you ship. | ||
|
|
||
| ### Network & Accounts | ||
|
|
||
| Remix can talk to a local VM (in-browser EVM for fast iteration), testnets, or mainnets via a provider. Accounts can be generated by Remix’s in-memory VM or injected from wallet extensions. You choose the environment each time you deploy or run a call. | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,15 +8,15 @@ The **default_workspace** has three Solidity (.sol) files in the contracts folde | |
|
|
||
|  | ||
|
|
||
| But Workspaces are not only for templates. When cloning a repo into Remix, the files will be put into a Workspace. | ||
| But Workspaces are not only for templates. When cloning a repo into Remix, the files will be put into a Workspace. | ||
|
|
||
| Let's create a new Workspace | ||
|
|
||
| 1. At the top of the File Explorer, click the hamburger icon (the 3 horizontal lines). Read through the commands and tools in this menu. | ||
| 1. At the top of the File Explorer, click the hamburger icon (the 3 horizontal lines). Read through the commands and tools in this menu. | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Workspaces have moved - this text needs updating. |
||
|
|
||
| 2. Select **+ Create** (the first choice). | ||
|
|
||
| 3. In the modal the comes up, choose one of the templates. | ||
| 3. In the modal the comes up, choose one of the templates. | ||
|
|
||
|  | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. New image needed. |
||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you are missing an h in https in the URL
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The max size for an image size in learneth is probably 600px. It could link to a larger image. But the image at the size you have it is too large to work. There might be another example in the tutorials of links to an image or PDF