MaxFlowO₂ 终端浪人 https://paragraph.com/@maxflowo2 War veteran, Software developer, and one crazy cat on the blockchain... Mon, 06 Apr 2026 01:41:02 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed en MaxFlowO₂ 终端浪人 https://storage.googleapis.com/papyrus_images/ef17adfb702d30d2afb087ddb593b148b7db491efdcd9075882bdd4056edad6a.png https://paragraph.com/@maxflowo2 All rights reserved <![CDATA[MFO₂: Week[2] CSS 3 init()]]> https://paragraph.com/@maxflowo2/mfo-week-2-css-3-init FLJKTvDtShKRo1tu2Kk2 Sun, 01 Jan 2023 21:28:25 GMT <html lang="en"> <head> <meta charset="UTF-8" /> <title>MaxFlowO&#x2082's Hello World</title> <meta name="author" content="MaxFlowO&#x2082"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div> <h1>Tell Chow I said, "Hallo"</h1> </div> </body> </html> Kind of bland if you ask m...]]> So, let’s finally build from post to post… remember this one, aka last week?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>MaxFlowO&#x2082's Hello World</title>
    <meta name="author" content="MaxFlowO&#x2082">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div>
      <h1>Tell Chow I said, "Hallo"</h1>
    </div>
  </body>
</html>

Kind of bland if you ask me… here’s it hosted. Noticing something… this might be one of those things you can pick up on and see this week’s hosting. First thing first let’s make this more XML-ish by closing tags and what not. Now it’s this…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>MaxFlowO&#x2082's Hello World</title>
    <meta name="author" content="MaxFlowO&#x2082" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div>
      <h1>Tell Chow I said, "Hallo"</h1>
    </div>
  </body>
</html>

Also, we got to add CSS 3 the, “style sheets.” So, I made a directory called css, kinda blaring obvious here, and a file called week2.css. So since there’s three tags in there we are going to cover only three css elements, more to be added later.

body {}
div {}
h1 {}

So, how to style the body?

  • background-color: (value)

    • valid color name

    • hex values

    • RGB values

  • background-image: url(URI);

  • background--repeat: (value)

    • repeat - x (horizontal repeat)

    • repeat - y (vertical repeat)

    • no-repeat

  • background-position (location)

  • background-attachment: fixed

  • background: (color) (image) (repeat) (attachment) (position)

  • other global variables

    • padding

    • margin

    • color

    • border

    • border-radius

    • font-family

    • font-size (px/em)

    • height (percentage/px)

    • width (percentage/px)

    • text-align

    • text-shadow

    • box-shadow (inset) (x-offset) (y-offset) (blur radius) (color)

List goes on and on, but below is a neat way to center an image that’s reactive to any and all backgrounds

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../images/BG.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

So what are we going to do? Well, let’s go black or #000000 for a background, and worry about the rest when we have to, since we don’t want a global for everything…

body {
  background: #000000;
}

The next item would be the div, so let’s style this and make sure we got some margins/padding, curved edges, and a nice hard line with box shadows…

div {
  background: #ffffff;
  border: #505050;
  border-radius: 10px 10px 10px 10px;
  padding: 2em;
  margin: 2em;
  box-shadow: 5px 5px 10px violet;
}

Now how abut the font?

h1 {
  font-size: 2.5em;
  padding: 2em;
  margin: 2em;
  text-shadow: 1px 1px 2px #505050;
}

As you can see here versus here CSS makes the difference. This week was some basics… Did not want to get into reusable classes (week 3 writeup?). Probably some images for background, and get you really learning how to format data to be properly appeasing…

Thank you for the time,

Max Flow O₂

]]> maxflowo2@newsletter.paragraph.com (MaxFlowO₂ 终端浪人) <![CDATA[MFO₂: Week[1] HTML5 init()]]> https://paragraph.com/@maxflowo2/mfo-week-1-html5-init RI3qGqTJUM2LaVI8O9xZ Sun, 25 Dec 2022 21:33:53 GMT <html> <head> <title>Hello World!</title> </head> <body> Hello World! </body> ...]]> So we started this path of web3 development and I started at HTML5? Why? Roots… or foundations, plus since 99% of you are not developing on iOS or Android… you need to understand how to implement web3 on top of web2.

Where I’d start? How about a link…

But how do I start? Of course one of the 99+ hello world scrips, but you will be starting with my syntax a bit…

<!DOCTYPE html>
<html>
  <head>
     <title>Hello World!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

Now syntax is everything, and this is beyond simplistic… but you are a rookie remember (if you aren’t you’ll lol a bit reading this)? So what is that? Any thing written in ‘words’ is called a tag, ‘/words’ would close that tag. Some need to be closed whereas others don’t but it’s easier to close everything when in doubt.

The HTML tag

The HEAD tag

  • Examples

  • Meta tags I’d include

    • meta charset="UTF-8"

    • meta name="viewport" content="width=device-width"

    • This is basically the webpage’s metadata…

  • TITLE Tag

  • Some JS for

    • LINK Tag

      • For CSS

        • link href=”” rel=”stylesheet”

      • For favicon

        • link rel=”icon” href=””

  • The BODY tag

    • Examples

    • Some tags i’d read up on cause you’ll use them a lot

      • div

      • button

      • h1-h6

      • hr

      • br

      • p

      • code

      • script

    Seems like a lot for a simple Hello World right? Let’s look at a bit more advanced “Hello World” then

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>MaxFlowO&#x2082's Hello World</title>
    <meta name="author" content="MaxFlowO&#x2082">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div>
      <h1>Tell Chow I said, "Hallo"</h1>
    </div>
  </body>
</html>

    As you can see, there’s a bit more fun stuff but with UTF-8 you can insert things, even emojis. Keep cranking out code and play with Hello World… Next installment is CSS 3 so you can start adding to this Hello World and link things together… like custom html tags, classes, and how-to, “format a page.”

    Thanks for the time,

    Max Flow O₂

    P.S. I know this was ultra basic but week[2] and week[3] will build off this.

]]> maxflowo2@newsletter.paragraph.com (MaxFlowO₂ 终端浪人) <![CDATA[WaveDaemons: The rollup]]> https://paragraph.com/@maxflowo2/wavedaemons-the-rollup FtsWROkG0fDFNF2d8Nbv Sat, 17 Dec 2022 10:39:50 GMT Four score, and seven epochs ago, I had a dream that not all smart contracts were created equal, and 0xdEaD is not the way to burn NFT’s… yes it’s a quib to a friend, but still valiant effort old friend.

So let’s begin this great ballad of the next DaemonDAO perfection shall we? This is episode 4, aka “The return of the Waves.” You might remember the developer from Episode 1 (DaemonDAO, aka “The Daemons Awaken”) and 3 (TinyDaemons aka “Attack of the Tinies”). Well I’m back with one simple quest… Make some Tiny’s disappear. I will eventually publish those rollups as well, or I won’t since the only one that matters in this scenario is the TinyDaemon project.

Project’s premise is simple, PFP + Music = new ERC721. Well hold the phone let me drop the requirements from Lucky himself…

  • publicMint(uint256 quant) @ 60 FTM

  • burnToMint(uint256[] ids) - burn 5 Tinies for 1 Wave

  • teamMint(uint256 quant) - 400 Team mints for holders et al

  • name()/symbol() - WaveDaemons/WAVEDMN

  • 1k supply

  • IPFS/API mint

    • Images/metadata provided

    • Use that python magic for names/images/random

    • Provenance for Metadata/Images (Pseudorandom engine)

    • EIP 2981 - Tie to TinyDaemon contract

    • TimeCop settings

      • 1671314400 (17 Dec 2022 @ 10p GMT) - Start

      • ***NO PRESALES***

  • Tie to UI Provided

    • WaveDameons HTML/JS

Actually not difficult to write, only difficult to implement, for a few factors mainly setApprovalForAll v approve, and writing an interface just to reach the burn function for TinyDameons. So let’s kick off with round 1, and remember this is a 12 round fight. Here’s the summary of round 1.

https://testnet.ftmscan.com/address/0x35628b61395946ed69c7938120d9e08579d479ce#code

Let’s see how astute you are for these two code blocks…

  function burnToMint(
    uint256[] memory ids
  ) external
    notPaused()
    onlySale()
    nonReentrant() {
    // now to get the five per
    uint256 quant = ids.length / 5;
    if (quant == 0) {
      revert MaxSplaining({
        reason: "Main:B1"
      });
    } else {
      for (uint x = 0; x < quant;) {
        _safeMint(msg.sender, _nextUp());
        _oneRegularMint();
        unchecked { ++x; }
      }
      // must call Approve for all first
      for (uint y = 0; y < quant * 5;) {
        ERC721Burnable(Tinys).burn(ids[y]);
      }
    }
  }

  function teamMint(
    uint256 quant
  ) external
    onlyOwner() {
    if (this.minterMinted() + quant > this.minterCapacity() && 
        this.minterTeamMintsMinted() + quant > this.minterTeamMintsCapacity()) {
      revert MaxSplaining ({
        reason: "Main:TM1"
      });
    }
    for (uint x = 0; x < quant;) {
      // mint it
      _mint(this.owner(), _nextUp());
      _oneTeamMint();
      unchecked { ++x; }
    }
  }

Now let’s scope the errors shall we?

So what went wrong? Let’s break it down… for starters dropped the ERC721Burnable(Tinys).burn(ids[y]); for IERC721Burnable(Tinys).burn(ids[y]); but there’s a glaring issue there in the for loop. There’s no ++y. Add a dash of unchecked { ++y; } and that remedied this Error. Also, forgot an “overflow” and fixed that as well. So now we got this…

  function burnToMint(
    uint256[] memory ids
  ) external
    notPaused()
    onlySale()
    nonReentrant() {
    // now to get the five per
    uint256 quant = ids.length / 5;
    if (quant == 0) {
      revert MaxSplaining({
        reason: "Main:B1"
      });
    } else if (this.minterMinted() + quant > this.minterCapacity()) {
      revert MaxSplaining ({
        reason: "Main:B2"
      });
    } else {
      for (uint x = 0; x < quant;) {
        _safeMint(msg.sender, _nextUp());
        _oneRegularMint();
        unchecked { ++x; }
      }
      // must call Approve for all first
      for (uint y = 0; y < quant * 5;) {
        IERC721Burnable(Tinys).burn(ids[y]);
        unchecked { ++y; }
      }
    }
  }

What about the second error? It all lies with this… (this.minterMinted() + quant > this.minterCapacity() && this.minterTeamMintsMinted() + quant > this.minterTeamMintsCapacity()). If you use && then both have to fire true to toss the revert. Simple hot fix, swap || for && and then either or can short circuit the if statement. Now we got this…

  function teamMint(
    uint256 quant
  ) external
    onlyOwner() {
    if (this.minterMinted() + quant > this.minterCapacity() || 
        this.minterTeamMintsMinted() + quant > this.minterTeamMintsCapacity()) {
      revert MaxSplaining ({
        reason: "Main:TM1"
      });
    }
    for (uint x = 0; x < quant;) {
      // mint it
      _mint(this.owner(), _nextUp());
      _oneTeamMint();
      unchecked { ++x; }
    }
  }

So after passing my unit tests like normal, here we go

  • ERC 721 - passed

  • EIP 1412 - passed (safeBatchTransferFrom())

  • EIP 2981 - passed

  • MaxAccess - passed (EIP 173-esque control with bytes4 roles)

  • PaymentSplitterV2 - passed

  • PsuedoRandom.Engine - passed

  • TimeCop - passed

Next comes the metadata, and you know how I usually get this… a massive dump file or I generate those pesky images and jsons (Hash-Lips). Well this is Lucky, so I at least don’t have to do that but… There’s this magic where I randomize the images (again), generate provenances, and IPFS pin those hashes. So, we break for forty minutes and upload it all, this time he didn’t kill me with gigabytes of data. Oh and don’t forget I go pull the current NFT Metadata Standards from a big source. Here’s a before and after screenshot.

Left: Lucky's file drop, Right: MaxFlowO₂'s finished product
Left: Lucky's file drop, Right: MaxFlowO₂'s finished product

Key takeaways:

  • Frequency added to Attributes

    • used in a few marketplaces like PaintSwap

    • provides on chain rarity

  • Count added to Attributes

    • provides on chain rarity

  • IPFS links

    • avoid directories you pin these

    • link to files

  • Image and Animation URL

    • This is a combo, PFP and Music

    • Moved from directory hash/file to file hash

Now we can talk about API vs. IPFS since this is a chainID 250 (Fantom main net) deployment, we can easily go API for free using the RPC of https://rpc.fantom.tools and some quick and hot JavaScript for this back end. Guess what the back end count is at now… two. A simple REST API via Express.JS is more than sufficient if you just need to know. On my weekly series I’ll cover this during, “NFT Weeks.” Once minted out, or we end the mint, this has happened before see the DaemonDAO mint. I’ll swap this from API to IPFS and shut down the queries to my server.

A screen cap of the Rest API that 99% of users don't care about...
A screen cap of the Rest API that 99% of users don't care about...

Now some of the final things to do… tie a front end to a smart contract. Knowing Lucky, and at this point of over 15 months of working together, he’s probably done a front end and didn’t close all the HTML5 tags. Do not worry, I got you, and already did the two space tabs and closed tags first… Once you know me two spaces are the key, because I split screen almost everything. I also mirror all front ends before pushing to the repositories on GitHub.com. Why? Because it’s easier to destroy it on my server and fix it, than to constantly wait for a host to upload it.

So, let’s deploy this thing…

$ truffle migrate --network FTM... WTF it's a truffle deployment?!?!
$ truffle migrate --network FTM... WTF it's a truffle deployment?!?!
and a double git push for good measure
and a double git push for good measure

So where are we at now… yeah about to write some web3.js for a front end in HTML5 or something. So post HTML5 cleanup and importing all the right npm’s, we can use web3.js pretty effectively. Here’s some screen caps of me chopping away at some of the forked code (from tinydaemons.js) we don’t need anymore…

Left: web3.js, Right: HTML5, basically 24/7 CLI of what I do...
Left: web3.js, Right: HTML5, basically 24/7 CLI of what I do...
How the browser sees it via console.log and HTML5
How the browser sees it via console.log and HTML5

This is why you are verbose in console.log and web3. You must know what your program is doing and why it’s tossing errors left and right during the, “burn it to the ground,” phase of building. like look at this sexy combo of, “how we do this…”

Left: web3.JS source Right: Console.log of "localhost"
Left: web3.JS source Right: Console.log of "localhost"

So after tying up some loose ends and getting all the HTML5 and web3.JS to agree then you must push it. So there was a huge change log to this but I’ll skim over the absolute details in a bit. You probably won’t get everything as a green light the first time unless you got some skills. Good news? I got some skills. So from starting this only 24h ago we got this massive checklist done…

  • Smart Contracts tested and deployed to testnet

  • NFT Metadata “reshuffled” and enhanced

  • IPFS Pinning of all Images/JSONs/Music

  • Web2 tied into Web3

  • Smart Contract Deployed to main net

  • States loaded

  • Approval sent to PaintSwap

So what was the main take away of this? For starters the Max-721/2022 is a well developed streamlined program that is highly modular that needs maybe one more reduction of externals to jam the full breadth in there. I’m talking about ERC-20 and “ETH” payments. I’m talking about having EIP 2981 and ContractURI in the same mix with the Psuedorandom engine and Allow Lists and basic ERC-721. Soon I’ll roll parts of the Max-721/2023 that’s UUPS into the 2022 edition to optimize it some more. 24kb is 24kb, that’s the part that sucks the worst. Stay tuned… there’s always going to be more.

Thanks for the time,

Max Flow O₂

P.S. Web Repo, Contracts Repo

]]> maxflowo2@newsletter.paragraph.com (MaxFlowO₂ 终端浪人) <![CDATA[fBOMB: The rollup]]> https://paragraph.com/@maxflowo2/fbomb-the-rollup 1AyEooMhTNJusN7AM2Na Sat, 17 Dec 2022 06:25:50 GMT      Post every project I will be writing an apologue or two about the development process and mythology that stems from it. This would be the inaugural one, so let’s dive in to the saga of fBOMB. Obviously being a developer I must start with a requirements and some sort of npm/yarn install right?

{
  "devDependencies": {
    "@TL/CR": "^0.0.1",
    "@requirements": "^1.0.0",
    "@MaxFlowO2": "latest"
  }
}

     So this saga comes with me as the 3rd gen developer of the first meme coin on Fantom. Yes, we are talking about $BOMB on chainID 250. Obviously there was a needed wrapper so wBOMB came from a developer named lookee. He also did a great UI. But the man, the myth, the legend also named Fiery Dev, aka @Dev_Enjoys on bird app came to me while doing updates with wBOMB. The challenge get BOMB to all the chains. The answer, omnichain. Why me? Answer, TinyDaemons…

     First thing is first you must get the original contracts so you can build localhost and or testnet editions for testing. So copied the verified source from FTMScan found here BOMBv3 and wBOMB. Next challenge was 1822 UUPS ERC20. I didn’t like OZ’s so rolled my own called Lib20 with a struct named Token, aka Lib20.Token. Tied that to EIP-20, and off to the races. Added the Non Blocking Receiver from LZ and made the payload uint256 amount, kind of obvious there.

Now here were the requirements:

  • One way deposit BOMB/wBOMB → fBOMB

    • Smart contract handles 100% of burning it all

      • wBOMB can not burn

      • BOMB can burn

  • Bridgable

    • LZ enabled via traverseChains(uint256 amount)

  • Taxation

    • 1% on all intra-chain transactions

      • Same as wBOMB on Fantom

      • Same as BOMB on Fantom

    • 1% tax to treasury for bridging

    • Exemption for certain v2 AMM’s and Balancers

  • Upgradable

    • EIP 1822 UUPS

  • Tied to fbomb.finance

     We can fast forward to currently and stop the technical jargon and you can see the deployed contract source here. It is currently on Optimism and Fantom blockchains and will be migrated to five others very soon. Why take my word for it, look here.

     So I’ll post another update this when the UI is done, for for now I must say, “Bon voyage.” This was the birth of the Max-20/2023 UUPS LZ. I will be forever grateful for it. Heard a rumor about some MCLB token or something…

Thank you for the time,

Max Flow O₂

]]> maxflowo2@newsletter.paragraph.com (MaxFlowO₂ 终端浪人) <![CDATA[MFO₂: Week[0] So you wanna be a developer?]]> https://paragraph.com/@maxflowo2/mfo-week-0-so-you-wanna-be-a-developer y09ZG8uwstZkz7pCJMOt Thu, 15 Dec 2022 22:53:25 GMT      To understand the realm of what you are about to enter understand that, “Hacker School,” might sound cool, but it isn’t. It’s far from cool. This will cost you friends, your old ways, and seriously isolate you if you go freelance…

     TL:CR (Too long, can’t read)

  • Learn OO

    • JS/TS

    • Python

    • HTML/CSS

    • C/C++/C#

    • Go/Rust

  • Write stuff

     I get this question a lot more than I’d like to admit, “How did you become a web3 dev?” Answer is simple, be born in 1982, and become a hacker in the 90’s. If that’s not you, then I’d recommend knowing a few things. I would say off the top of my head knowing web2 and how it’s progressed, and adding web3 when it’s applicable.

     So for starters, let’s dive into what is exactly web2? Well if you look at the canonical definition of it, as you should because code does not care about your feelings ever, it is Hypertext with JavaScript for rich user front ends. Trust me web, “back in my day,” was nothing but static and a server query with a magical thing called SQL. So the JavaScript actually gives you this, “experience,” if you will. Want this on a tablet, iPhone, desktop? JavaScript can deduce the sizes and resize everything. Welcome to front end 101, an article I will post later in a weekly series here starting on Fridays next week (23 Dec 2022). OG web, would of had a mobile.domain or m.domain for other devices. Now we have frameworks like Bootstrap, React, Next, and whatever else is out there in JavaScript. Welcome to a post Y2K world right?

     So for web2, you’ll need to know a few things before even the framework. You will have to understand HTML5, and I recommend developer.mozilla.org/en-US/docs/Glossary/HTML5. There are always new and fun things to be added, but the problem is this is very clunky. Next thing to browse, CSS, and I recommend developer.mozilla.org/en-US/docs/Web/CSS. This will add the effects of the HTML tags, and is very extensive. The last bit would be JavaScript, and low and behold go here for the docs developer.mozilla.org/en-US/docs/Web/JavaScript. Now realize this… you just took a step to being a web developer. LMAO, made you look.

     So where’s the web3, I WAS PROMISED WEB3!!!? Ok, so let’s honestly look at what web3 is, and that’s storage. Mappings are, you guessed it SQL, funny when a key and value are stored in a mapping and you call it otherwise. So what is a smart contract honestly? Storage. Plain and simple. Yes there’s tons of, “use cases,” of storage, fungible tokens, non fungible tokens, semi-fungible tokens, swapping of tokens, wrapping of tokens, transferring data from chain to chain, generating passwords and proving them (zk’s), and my new favorite cryptological signatures. Know what else is in a smart contract? 24kb of pain, and 50 memory slots. Guess what every external function = more byte code. Got to admire limits.

     Well you learned the first dirty secret, web3 is just a database. A public one. Now to tie that to a front end, use some JavaScript. Web3.JS web3js.readthedocs.io/en/v1.8.1/ or Ethers.JS docs.ethers.org/v5/ should suffice. Honestly I’d read up on QRModal over MetaMask, but that’s on you for an intermediate.

     Eventually I’ll talk about the, “smart contracts,” that aren’t really smart but they are a contract and the ways to make mutable and immutable code from them. To include the languages. This topic definitely covered the JS/TS, HTML + CSS, and will expand it to how to serve these files and the pros/cons of them all. Now go out and be lonely, reading and googling everything within eyesight. Soon we will cover the fun shit in web3.

Thank you,

MaxFlowO₂

]]> maxflowo2@newsletter.paragraph.com (MaxFlowO₂ 终端浪人)