Million Ether Homepage

Storing Colors in a Pixel Grid

Million Ether Page Essential Smart Contract

Tip: Mining only when there are transactions

Tip: Using Remix IDE

Getting Started

Getting The Pixels and Ethereum Events

Building a DApp UI

Drawing in HTML Canvas

Using Websockets with Web3

Web3 and Events Over WebSockets

Drawing Pixels from the Blockchain

Viewing Pixels

Buying An Image -- Reading Pixels

Buying An Image -- Sending Transactions

Pixel bidding and structs

Payable Contracts, payable Functions

Contract Owner and require

Payable color pixel function

Buying Pixels

Sending funds from a contract

The safer way to send funds from a contract

The Pull Payment Pattern - Withdraw payments when outbid

Million Ether Homepage Summary

Auctioning Pixels

solidity

In this course, we'll build a DApp inspired by [The Million Dollar Homepage](https://en.wikipedia.org/wiki/The_Million_Dollar_Homepage). We'll build a 1 million pixel page, and each pixel can be colored by placing the highest bid.

In this course we'll walk through every step of writing a smart contract, deploying it, hosting auctions, and connecting it to the browser through web3. 

If you're looking to build real, full-stack ethereum Dapps, then this is a perfectly-sized example.

We'll build a DApp inspired by the Million Dollar Homepage, powered by an auction on the Ethereum blockchain

I want to give you another tip that will save you tons of time. When developing your smart contracts, use an IDE like Remix. 

In our videos we've been compiling our smart contracts by hand using 

 and this is a good idea for learning what's going on and it's a best practice for production contracts. 

That said, when we're in the early development stages, copying and pasting bytecode and ABIs can be a real pain.

Thankfully there are editors like Remix that make this a lot easier.

But I want to give a disclaimer first. In this video and in this course I'm going to be using Remix as a tool to quickly compile, deploy, and experiment with smart contracts.

I want you to know that Remix is not essential. You can and should be able to do anything I'm doing in Remix on the commandline. We've covered how to do it in earlier videos. 

Remix is a tool to make our lives easier, but it's not a requirement.

Another thing I want you to keep in mind is that Remix is under active development. I'm using the most recent version of Remix, but by the time you're watching this video, the design might have changed a little bit. 

If you see me using a feature that doesn't appear in your version, check the comment section for updated instructions.

In the main pane you can see some default solidity code. On the right we have our file explorer, and on the left we have some tools.

For our development, we want to connect this page in two ways to our local computer.

Keep in mind that we need to be very careful about security here. It's probably fine in this case to connect to your local 

 instance as long as it doesn't hold your real private keys.

That said, if you want to be extra careful with your security, I'd recommend downloading remix from Github and running a local instance instead of using this hosted instance. 

The hack scenario would be where an attacker hacks the hosted version of Remix and secretly configures it to steal your private keys. This hasn't happened yet, that I know of, but better safe than sorry.

Let's connect Remix to our local file system using remixd.

, which gives you installation instructions.

npm install -g remixd
ls
# and we can point it to whatever directory we want to use for our contracts
remixd -S million-ether-page/contracts/

---
title: 'Tip: Using Remix IDE'


slug: 'tip-using-remix-ide'
thumbnail: https://embed-ssl.wistia.com/deliveries/ce5fdfdcfd433ccc9eaca43a6c5346ff52e3a9b2.jpg

privateVideoUrl: https://fullstack.wistia.com/medias/1w9ptjcadj
description: ""



---

I want to give you another tip that will save you tons of time. When developing your smart contracts, use an IDE like Remix. 

In our videos we've been compiling our smart contracts by hand using `solc` and this is a good idea for learning what's going on and it's a best practice for production contracts. 

That said, when we're in the early development stages, copying and pasting bytecode and ABIs can be a real pain.

Thankfully there are editors like Remix that make this a lot easier.

[screen of remix]

But I want to give a disclaimer first. In this video and in this course I'm going to be using Remix as a tool to quickly compile, deploy, and experiment with smart contracts.

I want you to know that Remix is not essential. You can and should be able to do anything I'm doing in Remix on the commandline. We've covered how to do it in earlier videos. 

Remix is a tool to make our lives easier, but it's not a requirement.

Another thing I want you to keep in mind is that Remix is under active development. I'm using the most recent version of Remix, but by the time you're watching this video, the design might have changed a little bit. 

If you see me using a feature that doesn't appear in your version, check the comment section for updated instructions.

So let's take a look at remix

## Remix

There's a deployed version of remix at [https://remix.ethereum.org](remix.ethereum.org). You can also find the code at [GitHub](https://github.com/ethereum/remix).

In the main pane you can see some default solidity code. On the right we have our file explorer, and on the left we have some tools.

For our development, we want to connect this page in two ways to our local computer.

1.  We can connect the filesystem to our local filesystem using remixd and 
2.  We can connect this page to our local `geth` test network using Web3

Keep in mind that we need to be very careful about security here. It's probably fine in this case to connect to your local `geth` instance as long as it doesn't hold your real private keys.

That said, if you want to be extra careful with your security, I'd recommend downloading remix from Github and running a local instance instead of using this hosted instance. 

The hack scenario would be where an attacker hacks the hosted version of Remix and secretly configures it to steal your private keys. This hasn't happened yet, that I know of, but better safe than sorry.

## Remixd

Let's connect Remix to our local file system using remixd.

You can view [the Github repo for remixd here](https://github.com/ethereum/remixd), which gives you installation instructions.

Right now it uses npm install:

    npm install -g remixd
    ls
    # and we can point it to whatever directory we want to use for our contracts
    remixd -S million-ether-page/contracts/

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Million Ether Homepage

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Getting Started

Lesson 1: (3:23)

Million Ether Homepage

Lesson 2: (3:18)

Storing Colors in a Pixel Grid

Lesson 3: (4:29)

Million Ether Page Essential Smart Contract

Lesson 4: (1:56)

Tip: Mining only when there are transactions

Lesson 5: (7:08)

Tip: Using Remix IDE

Module 2: Viewing Pixels

Lesson 1: (6:08)

Getting The Pixels and Ethereum Events

Lesson 2: (7:15)

Gas

Lesson 3: (1:01)

Building a DApp UI

Lesson 4: (3:09)

Drawing in HTML Canvas

Lesson 5: (1:15)

Using Websockets with Web3

Lesson 6: (3:09)

Web3 and Events Over WebSockets

Lesson 7: (3:41)

Drawing Pixels from the Blockchain

Module 3: Buying Pixels

Lesson 1: (1:57)

Buying An Image -- Reading Pixels

Lesson 2: (4:51)

Buying An Image -- Sending Transactions

Lesson 3: (1:25)

Pixel bidding and structs

Lesson 4: (2:48)

Payable Contracts, payable Functions

Lesson 5: (3:35)

Contract Owner and require

Lesson 6: (2:38)

Payable color pixel function

Module 4: Auctioning Pixels

Lesson 1: (4:03)

Sending funds from a contract

Lesson 2: (3:26)

The safer way to send funds from a contract

Lesson 3: (4:37)

The Pull Payment Pattern - Withdraw payments when outbid

Lesson 4: (6:46)

Million Ether Homepage Summary

Tip: Using Remix IDE