DEV Community: CiaraMaria

Developing a Full-Stack Project on Stacks with Clarity Smart Contracts and Stacks.js Part III: Frontend

CiaraMaria — Thu, 06 Oct 2022 16:22:53 +0000

Frontend

In the terminal from the root gm directory run:

cd frontend

npm install

Before we start writing code, let's take a quick look at the features we'll be using from Stacks.js.

Stacks.js is a full featured JavaScript library for dApps on Stacks.

@stacks/connect allows devs to connect web applications to Stacks wallet browser extensions.

@stacks/transactions allows for interactions with the smart contract functions and post conditions.

@stacks/network is a network and API library for working with Stacks blockchain nodes.

In your index.js file, replace the boilerplate code with:

import Head from "next/head";
import ConnectWallet from "../components/ConnectWallet";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>gm</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>gm</h1>

        <div className={styles.components}>
          {/* ConnectWallet file: `../components/ConnectWallet.js` */}
          <ConnectWallet />
        </div>
      </main>
    </div>
  );
}

Now run npm start and navigate to localhost:3000.

We have a super simple landing page with Hiro wallet login. We won't focus on styling for this example.

Looking at the code you'll see the ConnectWallet component has been created already. This is included as part of the Stacks.js Starters.

Let's go into the components directory. Here we see two files:

ConnectWallet.js
ContractCallVote.js

If you're curious about ContractCallVote you can add the component to index.js and try it out. For this example we won't be using it.

ConnectWallet.js contains an authenticate function that creates a userSession. This will give us the information we need to send to our contract after a user signs in.

Inside this file comment out these lines:

<p>mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}</p>
<p>testnet: {userSession.loadUserData().profile.stxAddress.testnet}</p>

This doesn't affect functionality, we just don't want the addresses on the page.

Now, we are going to create a new component.

Inside the component directory create a file called ContractCallGm.js

import { useCallback, useEffect, useState } from "react";
import { useConnect } from "@stacks/connect-react";
import { StacksMocknet } from "@stacks/network";
import styles from "../styles/Home.module.css";

import {
  AnchorMode,
  standardPrincipalCV,
  callReadOnlyFunction,
  makeStandardSTXPostCondition,
  FungibleConditionCode
} from "@stacks/transactions";
import { userSession } from "./ConnectWallet";
import useInterval from "@use-it/interval";

const ContractCallGm = () => {
  const { doContractCall } = useConnect();
  const [ post, setPost ] = useState("");
  const [ hasPosted, setHasPosted ] = useState(false);

  function handleGm() {
    const postConditionAddress = userSession.loadUserData().profile.stxAddress.testnet;
    const postConditionCode = FungibleConditionCode.LessEqual;
    const postConditionAmount = 1 * 1000000;
    doContractCall({
      network: new StacksMocknet(),
      anchorMode: AnchorMode.Any,
      contractAddress: "ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM",
      contractName: "gm",
      functionName: "say-gm",
      functionArgs: [],
      postConditions: [
        makeStandardSTXPostCondition(
          postConditionAddress,
          postConditionCode,
          postConditionAmount
        )
      ],
      onFinish: (data) => {
        console.log("onFinish:", data);
        console.log("Explorer:", `localhost:8000/txid/${data.txId}?chain=testnet`)
      },
      onCancel: () => {
        console.log("onCancel:", "Transaction was canceled");
      },
    });
  }

  const getGm = useCallback(async () => {

    if (userSession.isUserSignedIn()) {
      const userAddress = userSession.loadUserData().profile.stxAddress.testnet
      const options = {
          contractAddress: "ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM",
          contractName: "gm",
          functionName: "get-gm",
          network: new StacksMocknet(),
          functionArgs: [standardPrincipalCV(userAddress)],
          senderAddress: userAddress
      };

      const result = await callReadOnlyFunction(options);
      console.log(result);
      if (result.value) {
        setHasPosted(true)
        setPost(result.value.data)
      }
    }
  });

  useEffect(() => {
    getGm();
  }, [userSession.isUserSignedIn()])

  useInterval(getGm, 10000);

  if (!userSession.isUserSignedIn()) {
    return null;
  }

  return (
    <div>
      {!hasPosted &&
        <div>
          <h1 className={styles.title}>Say gm to everyone on Stacks! 👋</h1>
          <button className="Vote" onClick={() => handleGm()}>
            gm
          </button>
        </div>  
      }
      {hasPosted && 
        <div>
          <h1>{userSession.loadUserData().profile.stxAddress.testnet} says {post}!</h1>
        </div>
      }
    </div>
  ); 
};

export default ContractCallGm;

There are a few things going on here so let's break it down.

The first function handleGm is where the bulk of the work is being done.

  function handleGm() {
    const postConditionAddress = userSession.loadUserData().profile.stxAddress.testnet;
    const postConditionCode = FungibleConditionCode.LessEqual;
    const postConditionAmount = 1 * 1000000;
    doContractCall({
      network: new StacksMocknet(),
      anchorMode: AnchorMode.Any,
      contractAddress: "ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM",
      contractName: "gm",
      functionName: "say-gm",
      functionArgs: [],
      postConditions: [
        makeStandardSTXPostCondition(
          postConditionAddress,
          postConditionCode,
          postConditionAmount
        )
      ],
      onFinish: (data) => {
        console.log("onFinish:", data);
        console.log("Explorer:", `localhost:8000/txid/${data.txId}?chain=testnet`)
      },
      onCancel: () => {
        console.log("onCancel:", "Transaction was canceled");
      },
    });
  }

This function will execute on click of a button.

The first portion of this function is making the actual contract call to our say-gm function via doContractCall.

We pass to it the required options:

network: this is telling doContractCall what network to use to broadcast the function. There is mainnet, testnest, and devnet. We will be working with devnet and the network config for that is new StacksMocknet().
anchorMode: this specifies whether the tx should be included in an anchor block or a microblock. In our case, it doesn't matter which.
contractAddress: this is the standard principal that deploys the contract (notice it is the same as the one provided in Devnet.toml).
functionName: this is the function you want to call
functionArgs: any parameters required for the function being called.
postConditions: Post conditions are a feature unique to Clarity which allow a developer to set conditions which must be met for a transaction to complete execution and materialize to the chain.

If you want to learn more about Post Conditions, check out this great post.

We are using a standard STX post condition which is saying that the user will transfer less than or equal to 1 STX or the transaction will abort.

Upon successful broadcast, onFinish gets executed. We are simply logging some data.

Now let's take a look at the next function:

const getGm = useCallback(async () => {

    if (userSession.isUserSignedIn()) {
      const userAddress = userSession.loadUserData().profile.stxAddress.testnet
      const options = {
          contractAddress: "ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM",
          contractName: "gm",
          functionName: "get-gm",
          network: new StacksMocknet(),
          functionArgs: [standardPrincipalCV(userAddress)],
          senderAddress: userAddress
      };

      const result = await callReadOnlyFunction(options);
      console.log(result);
      if (result.value) {
        setHasPosted(true)
        setPost(result.value.data)
      }
    }
  });

This is making a call to our read-only function get-gm. You'll notice the formatting is slightly different, but the required options are the same ones we just discussed.

The main difference is that this is a callback function which we will call on an interval to check whether the user has called say-gm. Remember, get-gm will return none unless say-gm has successfully executed.

That's really all there is to it! The rest of the code is just React + JSX. Make sure you include this component in index.js and you're ready to move on to full interaction!

Boot up DevNet and once it's running, you can start your frontend app with npm start and navigate to localhost:3000.

Click Connect Wallet to login.

This will open a pop-up with your web wallet accounts.

Notice that it shows Devnet in the top right corner and the account that you configured to DevNet earlier now has a balance of 100M STX. This is your test faucet from the Devnet.toml file.

After logging in, your page should update and look like this:

Let's make a call to our say-gm function by clicking the purple button! Open your console in browser so you can see the logs.

You'll get the above tx request. It shows the postCondition we defined, the function being called, and fees.

Upon confirm, if everything went well you should see something like this in the browser console:

The onFinish and Explorer logs are coming from the handleGm function. The {type:} is coming from the getGm callback. As you can see, it pinged every 10 seconds and it took just less than a minute for our tx call to broadcast and reflect.

Once that result comes in, the page should update to reflect that UserPost has updated on chain to map your address with the string "gm".

There it is! A front to back Stacks application from scratch.

One last fun feature to explore: copy the URL from the Explorer log and paste it in your browser. This will give you a visual of what the transaction call would look like on the Stacks Explorer.

I do hope this has been helpful in understanding the fundamentals of creating a full-stack project on Stacks from developing and testing the smart contracts to setting up a site that users can use to make on-chain calls and simulating what that might look like. Let me know what you think! 🚀

Shameless plug: find me on Twitter @themariaverse

Developing a Full-Stack Project on Stacks with Clarity Smart Contracts and Stacks.js Part II: Backend

CiaraMaria — Thu, 06 Oct 2022 16:22:16 +0000

Backend

Our contract will simply post "gm" from a user to the chain for a small fee. We will do this by mapping the string "gm" to the users unique STX address. The functionality will be basic but enough to demonstrate concepts, testing, and frontend interaction.

In gm.clar goes the code:

;; gm
;; smart contract that posts a GM to the chain for 1 STX

;; constants
(define-constant CONTRACT_OWNER tx-sender)
(define-constant PRICE u1000000)
(define-constant ERR_STX_TRANSFER (err u100))

;; data maps and vars
(define-data-var total-gms uint u0)
(define-map UserPost principal (string-ascii 2))

;; public functions
(define-read-only (get-total-gms)
  (var-get total-gms)
)

(define-read-only (get-gm (user principal))
  (map-get? UserPost user)
)

(define-public (say-gm)
  (begin
    (unwrap! (stx-transfer? PRICE tx-sender CONTRACT_OWNER) ERR_STX_TRANSFER)
    (map-set UserPost tx-sender "gm")
    (var-set total-gms (+ (var-get total-gms) u1))
    (ok "Success")
  )
)

That's it! The entire contract and all the functionality needed is in the above code.

We have data space at the top of the file and all of the functions listed after.

Data:

define-constant: We have 3 constants defined. A constant is simply an immutable piece of data, meaning it cannot be changed once defined. In our case, we are using constants to define the contract deployer (I will go into this concept more in a bit), the price of writing the message denoted in microstacks (1,000,000 microstacks is equal to 1 STX), and an error response.
define-data-var: A variable is a piece of data that can be changed by means of future calls. They are, however, only modifiable by the contract in which they are defined. We are defining a variable to track the total number of writes.
define-map: A map is a data structure that allows you to map keys to values. We will be mapping a principal (Stacks wallet address) to the "gm" string.

Functions:

We have 3 functions, 2 read-only and 1 public.

A read-only function can only perform read operations. It cannot write or make changes to the chain. As you can see, our read-only functions are simply grabbing the value of our variable and map.

Now, we'll take a line-by-line look at the say-gm public function.

(define-public (say-gm)
  (begin
    (unwrap! (stx-transfer? PRICE tx-sender CONTRACT_OWNER) ERR_STX_TRANSFER)
    (map-set UserPost tx-sender "gm")
    (var-set total-gms (+ (var-get total-gms) u1))
    (ok "Success")
  )
)

A Clarity custom function takes the following form:

(define-public function-signature function-body)

The function definition can be any of the three Clarity function types: public, private, or read-only

The function signature is made up of the function name and any input parameters taken by the function.

The function body contains the function logic, is limited to one expression, and in the case of a public-function must return a response type of ok or err.

Our function signature is:

(define-public (say-gm))

Our function body is:

   (begin
    (unwrap! (stx-transfer? PRICE tx-sender CONTRACT_OWNER) ERR_STX_TRANSFER)
    (map-set UserPost tx-sender "gm")
    (var-set total-gms (+ (var-get total-gms) u1))
    (ok "Success")
  )

What exactly is happening here?

begin is one of the Clarity built-in functions. Recall that I mentioned the function body is limited to one expression, we use begin to evaluate multiple expressions in a single function.

Next we have:

(unwrap! (stx-transfer? PRICE tx-sender CONTRACT_OWNER) ERR_STX_TRANSFER)

There are a couple of things happening in this line so let's break it into two:

(stx-transfer? PRICE tx-sender CONTRACT_OWNER) is using another built-in function stx-transfer? which increases the STX balance of the recipient by debiting the sender.

PRICE is a constant that was defined at the top the file.
tx-sender is a Clarity keyword representing the address that called the function.
CONTRACT_OWNER is also a constant that was defined at the top of the file.

... But wait a minute!

(define-constant CONTRACT_OWNER tx-sender)

CONTRACT_OWNER is tx-sender.

tx-sender returns the address of the transaction sender, but it's context changes based on where and how it is used.

In the case of CONTRACT_OWNER, tx-sender will take the context of the standard principal that deployed the contract a.k.a the contract deployer.

Whereas within the say-gm function, tx-sender has the context of the standard principal that is calling into the function.

You can also manually change the context by using the as-contract built-in function to set tx-sender to the contract principal.

I will demonstrate this when we do our manual testing to give you a visual.

For now let's get back to the first expression.

The expression will return (ok true) if the transfer is successful, else it will return an (err) response. This is where unwrap! comes in. As the name suggests, it attempts to unwrap the result of the argument passed to it. Unwrapping is extracting the inner value and returning it. If the response is (ok ...) it will return the inner value otherwise it returns a throw value.

(unwrap! (stx-transfer? PRICE tx-sender CONTRACT_OWNER) ERR_STX_TRANSFER)

So there we are unwrapping the result of stx-transfer?

Now we have:

(map-set UserPost tx-sender "gm")

map-set sets the value of the input key to the input value. As part of this function call, we are setting the corresponding value of "gm" to the key of the standard principal calling the function.

Then:

(var-set total-gms (+ (var-get total-gms) u1))

var-set sets the value of the input variable to the expression passed as the second parameter. Here we are performing an incremental count to increase total-gms by one each time this function executes successfully.

Finally:

(ok "Success")

because we must return a response type at the end of a function and I just want a success message on completion.

Manual Contract Calls

To make sure our contract is working we'll do a few things.

Run:

clarinet check

This checks your contract's syntax for errors. If all is well, you should return this message:

Now run:

clarinet console

You should see the following tables:

The first table contains the contract identifier (which is also the contract principal) and the available functions.

The second table contains 10 sets of dummy principals and balances. This data is pulled directly from the Devnet.toml file. If you open that file and compare the standard principals, you will notice they are the same.

From here we can make some contract calls to ensure the desired functionality of each function is there.

To make a contract call, we follow the format:

(contract-call? .contract-id function-name function-params)

Make the following call to our say-gm function:

(contract-call? .gm say-gm)

Did you get an err u100? We set our constant ERR_STX_TRANSFER to err u100. So why did we get this?

It is because we just attempted to transfer STX between the same addresses.

When we run clarinet console, tx-sender is automatically set to the contract deployer. You can verify this by running tx-sender from within the console. If you compare this to the data inside of Devnet.toml you'll see that the address is the same as the one listed under [accounts.deployer]. It is also the first address in the table that loads when opening console.

This comes back to the "context" I mentioned above. You can think of that first address as the deployer and all subsequent addresses as "users" that can call into your function.

We're going to want to change the tx-sender within console. You can do this by running

::set_tx_sender address

You can copy/paste any address from the assets table or Devnet.toml.

Let's call get-total-gms:

(contract-call? .gm get-total-gms)

Another error? use of unresolved contract.

This is happening because we changed our tx-sender we now have to explicitly state the contract-id as part of the contract call. You can grab this from the assets table. If you cleared the console and need to bring it up again run:

::get_contracts

Now try the following call:

(contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.gm get-total-gms)

This should return u0

(contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.gm get-gm tx-sender)

This should return none

Good this is expected because we have not yet called any write functions.

Alright, let's call say-gm.

(contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.gm say-gm)

We should see (ok "Success")

Now if we make calls again to get-total-gms and get-gm we should get u1 and (some "gm") respectively which means the functionality works!

You can also run:

::get_assets_maps

This is will bring up the assets table and you will be able to see the transfer of STX between addresses reflected in the balances.

Great! We've now manually tested our functions. Before moving on, we're going to do one more thing to demonstrate the context for tx-sender.

I mentioned the as-contract built-in function and how it changes the context of tx-sender from the standard principal to the contract principal.

Exit the console and replace your CONTRACT_OWNER definition with:

(define-constant CONTRACT_OWNER (as-contract tx-sender))

Now run clarinet console again and make the following contract-call:

(contract-call? .gm say-gm)

We didn't get an error this time and didn't have to change the tx-sender. Why?

Running

::get_assets_maps

will provide an answer.

Notice a new address has been added to the table. A contract principal. So even though we made the call from the deployer, we were able to transfer STX because CONTRACT_OWNER was initialized as the contract and so we aren't transferring STX between the same address, we are transferring from the deployer's standard principal to the contract principal which is capable of holding tokens as well.

This demonstrates what the as-contract function does.

Unit Tests

Unit testing is a critical part of smart contract development. Due to the nature of smart contract and the potential use cases, as smart contract developers we want to ensure that we account for as many scenarios as possible.

Tests are written in typescript and a template is auto generated for you.

Let's take a look at gm_test.ts

import { Clarinet, Tx, Chain, Account, types } from 'https://deno.land/x/clarinet@v0.31.0/index.ts';
import { assertEquals } from 'https://deno.land/std@0.90.0/testing/asserts.ts';

Clarinet.test({
    name: "Ensure that <...>",
    async fn(chain: Chain, accounts: Map<string, Account>) {
        let block = chain.mineBlock([
            /* 
             * Add transactions with: 
             * Tx.contractCall(...)
            */
        ]);
        assertEquals(block.receipts.length, 0);
        assertEquals(block.height, 2);

        block = chain.mineBlock([
            /* 
             * Add transactions with: 
             * Tx.contractCall(...)
            */
        ]);
        assertEquals(block.receipts.length, 0);
        assertEquals(block.height, 3);
    },
});

This is your boilerplate test code. I recommend browsing the Deno documentation provided at the top the file.

We are just going to write a single basic test together as part of this example.

Clarinet.test({
    name: "A user can say gm",
    async fn(chain: Chain, accounts: Map<string, Account>) {
        const deployer = accounts.get('deployer')!.address;
        const user = accounts.get('wallet_1')!.address

        let block = chain.mineBlock([
            Tx.contractCall(
                "gm",
                "say-gm",
                [],
                user
            )
        ]);
        assertEquals(block.receipts.length, 1);
        assertEquals(block.height, 2);

        const messageMapped = chain.callReadOnlyFn(
            "gm",
            "get-gm",
            [types.principal(user)],
            user
        )
        assertEquals(messageMapped.result, types.some(types.ascii("gm")));

        const totalCountIncreased = chain.callReadOnlyFn(
            "gm",
            "get-total-gms",
            [],
            user
        )
        assertEquals(totalCountIncreased.result, types.uint(1));
    }
});

Here we're adding a few things to the boilerplate code provided.

const deployer = accounts.get('deployer')!.address;
const user = accounts.get('wallet_1')!.address

This is grabbing the standard principals from Devnet.toml that correspond to the string we pass to accounts.get()

Tx.contractCall(
 "gm",
 "say-gm",
 [],
 user
)

Tx.contractCall is how we can simulate a contract call from our test. It takes 4 parameters:

The contract name
The function name
Any params accepted by the function as an array
The address calling the function

assertEquals(block.receipts.length, 1);
assertEquals(block.height, 2);

We need to also simulate a block being mined. Our test assumes a start at genesis block 1.

block.receipts.length accounts for the number of transactions in that block.

block.height accounts for the block height at mining.

In this case we are calling one tx and mining one block.

const messageMapped = chain.callReadOnlyFn(
 "gm",
 "get-gm",
 [types.principal(user)],
 user
)
assertEquals(messageMapped.result, types.some(types.ascii("gm")));

Here we are calling a read-only function with chain.callReadOnlyFn() which takes the same parameters as Tx.contractCall() and we are asserting that the result is an ascii string "gm". Why? If the say-gm call is successful we can assume that the result of this get-gm will be that string mapped to the user.

const totalCountIncreased = chain.callReadOnlyFn(
  "gm",
  "get-total-gms",
  ],
  user
)
assertEquals(totalCountIncreased.result, types.uint(1));

Finally, we make a call to get-total-gms and assert that the total has been incremented to 1.

Now in the terminal you can run

clarinet test

You should see a successful pass:

Clarinet offers an extensive testing suite that includes lcov code coverage reports.

Curious about TDD for contracts? Check out this blog.

Spinning up DevNet

Our backend is complete! Let's get DevNet running and hook it up to our web wallet so that it's ready to go after we build the frontend.

Make sure Docker is running.

In your terminal run:

clarinet integrate

With this command, Clarinet fetches the appropriate Docker images for the Bitcoin node, Stacks node, Stacks API node, Hyperchain node, and the Bitcoin and Stacks Explorers.

Boot up can take several minutes the first time you launch.

When complete, you should see something like this:

Great! You've got DevNet running. You can read more about the interface in the docs.

There is some configuration left to do before you can interact with your frontend app.

You need to import information from your Hiro web wallet into your Devnet.toml file.

Note: Devnet.toml is not listed in .gitignore meaning the information you add to the configuration may be visible, so you want to either add the file to .gitignore, or create a separate wallet for testing if you plan to push your code to GitHub.

From your browser open up your web wallet and change your network to Devnet. This setting can be found by clicking the three dots on the top right corner and selecting Change Network.

Devnet will only be available for selection while you have your local DevNet running.

Once you change networks, open up the menu again and click View Secret Key. You need to copy this and paste it in Devnet.toml under [accounts.wallet_1] where it says mnemonic=

You will be replacing the generated keys with the ones copied from your web wallet.

That's it! Configuration is complete and you're ready to start building the frontend app.

Developing a Full-Stack Project on Stacks with Clarity Smart Contracts and Stacks.js Part I: Intro and Project Setup

CiaraMaria — Thu, 06 Oct 2022 16:21:39 +0000

Intro

I am a software developer at Whitelabel Co and a current Resident with the Stacks Foundation to deliver and scale developer education around the Clarity smart contract language and building on Stacks. I became involved in the Stacks community late Spring of 2021 under a pseudonym and have since been involved with multiple projects throughout the ecosystem as a web developer and advisor. Since starting the residency, one of the most common pieces of feedback I've received from new developers to Stacks is a desire for more comprehensive walkthroughs of the full-stack development process.

I won't get into the Stacks blockchain itself as part of this series, but if you are not familiar with the network check out this intro.

We'll walk through the fundamental steps of creating a front to back application on Stacks. I will demonstrate a simple smart contract in Clarity, the language used to write smart contracts on Stacks, go over unit testing, practice manual contract calls in clarinet console using Clarinet, a CLI package and developer environment for creating smart contracts, build a frontend using Stacks.js Starters to quickly bootstrap a frontend app, hook up the contract to the client, and run a local DevNet instance to demonstrate the application in action as if it was on-chain.

Mainnet vs Testnet vs DevNet

It's important to understand the difference between the various "nets" and when you would interact with each one. For Stacks there are three "nets", they are all separate chains and each hold their own data.

Mainnet is the main Stacks blockchain network. This is fully public and where users interact with deployed smart contracts. In web2 development lingo, you can think of an app on mainnet as in production, prior to which it will be in staging on testnet. The Stacks explorer is a browser based tool that allows users to access information on Stacks mainnet. Here you can see things like recent blocks, pending and confirmed transactions, as well as the deployed smart contracts themselves.

Testnet is a separate blockchain from the Stacks mainnet that can be thought of as a sort of staging environment. It is used by developers to test their apps and smart contracts and allows users to interact with the application using test STX tokens rather than their actual tokens. The Stacks explorer allows users to switch to testnet view by clicking Network on the top right of the page and selecting stacks.co testnet. There is also a testnet Sandbox available for writing and deploying, making contract calls, and receiving test STX via the STX faucet.

DevNet is an integration feature provided by our friends at Hiro that allows us to spin up a simulated blockchain locally. This allows developers to perform frontend integration and testing without having to deploy to a public tesnet. DevNet is useful when you are in the early stages of development or buidling incognito.

In this tutorial we will be using DevNet.

Prerequisites

In order to run DevNet there are a few things you'll need to have installed. 👇

Clarinet

You'll need to install Clarinet. The detailed instructions can be found in the Hiro docs.

Quickstart:

macOS

brew install clarinet

windows

winget install clarinet

You can verify whether it has successfully installed by running the following command:

clarinet --version

Docker

You'll also need Docker on your machine for running DevNet. Instructions can be found in the Docker docs.

Project structure

From the terminal, make sure you are in your desired starting directory and run:

mkdir gm

This will create a main directory for our project which will hold our frontend and backend folders. Move into this directory with:

cd gm

Initialize the frontend directory with:

npm create stacks --template frontend

This will spin up a Next app called "frontend" with Stacks.js scaffolding which makes getting started a breeze. Writing the frontend code will be the final step in this example, so we will come back to that directory later.

Now to initialize the backend directory; for readability in separating the contracts from the client, I'll call this clarinet project "backend":

clarinet new backend

As you can see, running the clarinet new command will generate a number of files and directories. Let's briefly look at the main ones.

Clarinet.toml: This is your configuration file. Within this file you'll notice [contracts.gm] path = "contracts/gm.clar", any contract dependencies whether from contracts you create or import from those deployed on mainnet will show up here.
/settings/Devnet.toml: This file contains dummy data which you can use for testing your contract. It provides you with a deployer and a number of wallets. We will be interacting closely with this file throughout this example.
/contracts and /tests: These directories are initialized but remain empty until you create your first contract. We'll come back to these after the next step.

cd backend

and create your contract with:

clarinet contract new gm

Now, the /contracts and /tests directories have files.

contracts/gm.clar: This is where the Clarity code goes.
tests/gm_test.ts: This is where the Typescript unit tests that correspond to each contract go.

Great! Your Clarity smart contract project is set up.
From here you can write your code inside of gm.clar and write unit tests inside of gm_test.ts

My Introduction to CSS Animations: Using Inkscape to Create Text Animation

CiaraMaria — Fri, 01 Jan 2021 21:05:46 +0000

I awoke one December morning with a single thought in my head: "I want to create a handwriting animation." It was a consuming idea and I quickly got out of bed, made some coffee --a mandatory obligation as a self-proclaimed coffee enthusiast (if that's even a thing?)-- and settled in front of my laptop with the same thought in my head: "I want to create a handwriting animation."

I had generated my ideal early morning working environment and as I put my hands to the keyboard it hit me; I had no idea what I was doing.

From Dense Fog to Slightly Less Dense Fog

If there is one thing I've had to radically accept as a developer, it's the feeling of not knowing how to do something. Luckily, we live in a time where nearly all of the world's information is available via teh interwebz.

The first few hours of that morning were spent searching terms like:

How to make a handwriting animation CSS
CSS animation
SVG
How to create SVG
Online SVG maker
Adobe Illustrator
Adobe Illustrator free
Illustrator alternatives
How to use Inkscape

That's a little snippet into my thought process and path toward learning that I would first need to draw up my own "handwritten" text so that I can then bring it to life with CSS.

Inkscape

Inkscape is a free and open-source vector graphics editor used to create vector images. Upon researching a bit more about Inkscape and how it stands up to Illustrator, it appears to be well-liked among designers and a legitimate alternative for someone who is not interested in paying for proprietary software at the moment (e.g., yours truly). As someone who has not previously worked with Illustrator and fairly new to Inkscape, I can't speak on the pros and cons of each, but I can say that I was able to successfully use Inkscape to draw a high-quality SVG and create my animation. So there's that.

Below is a demo of the logo I made that day.

Creating Scalable Vector Graphics(SVG)

Here is the MDN documentation for SVG if you're interested.

This isn't a "how to use Inkscape" guide. I will go over the steps I took to create the above example with a short demo.

Below is the (sped up) process for creating the SVG using Inkscape. It consists of:

creating a text object and selecting the desired font
using the pen tool to draw Bézier curves and lines
setting fill and stroke (note: I added fill by mistake in this demo so you'll see me add it and then remove it)
editing paths by nodes to properly align stroke (I went quick for the purposes of this demo so excuse the spazzing on the H--luckily there's no sound)
selecting object to path
selecting clip -> set
saving as optimized SVG

Rendering SVG and Animating with CSS

I'm using React for this demo. I have a functional component that returns my SVG. I opened the file using VSCode and, in this case, simply copied the code into my component, removing the <defs> tags and <g> tags and their contents. I then added className to the svg tag for sizing and positioning, and to the final path tag which handles the animation. So I'm left with something like this:

And in my CSS file:

.img {
  width: 100%;
  height: 250px;
  margin: auto;
}

.path {
  opacity: 0;
  stroke-dasharray: 4000;
  stroke-dashoffset: 5000; 
  animation: dash 4s linear forwards;
}


@keyframes dash {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: transform 900ms linear;
      will-change: transform;
  }
}

Final product:

Welp, That's It

As stated on my profile: [I love being a] perpetual learner and creator. Software development not only allows for that but demands it. I'm excited to get more practice and exposure to the world of CSS animation as I had a lot of fun making my first ones.

Interactive Navigation in React SPA

CiaraMaria — Mon, 21 Dec 2020 21:31:34 +0000

I wanted a way to show a top navigation bar in the hero section and a hamburger drop-down navigation as a user scrolls down the rest of the page as part of my React single page application.

After a lot of Googling along with some trial and error, I put together a few ideas to achieve my desired end result which looks like this:

Getting Started

I used:

react-scroll npm i react-scroll
react-burger-menu npm i react-burger-menu
Two separate components: one for top nav and one for the drop-down nav

Setting Up Burger Menu

Instructions for burger set up and customization are here. Here is what my Sidenav.js and Sidenav.css files looked like after tweaking the default:

import React, {Component} from 'react';
import './Sidenav.css';
import { slide as Menu } from 'react-burger-menu';
import {Link} from 'react-scroll';

class Sidenav extends Component {

  render () {

    return (
      <div className='sidenav'>
        <Menu width={ '15%' } >

          <Link className='nav-li' style={{ cursor: 
           "pointer"}} to="home" spy={true} smooth= 
           {true}>Home</Link>

          <Link className='nav-li' style={{ cursor: 
           "pointer"}} to="about" spy={true} smooth= 
           {true}>About</Link>

          <Link className='nav-li' style={{ cursor: 
           "pointer"}} to="work" spy={true} smooth= 
           {true}>Work</Link>

          <Link className='nav-li' style={{ cursor: 
           "pointer"}} to="contact" spy={true} smooth= 
           {true}>Contact</Link>

          <a className='nav-li' target='_blank' rel="noopener 
           noreferrer" href='linktoyourblog'>Blog</a>

        </Menu>    
      </div>
    );
  }
}

export default Sidenav;

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 30px;
  height: 25px;
  left: 10px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background-color: #EFC6BA;
}


/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #222222;
}

/*
Sidebar wrapper styles
Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
*/
.bm-menu-wrap {
  position: fixed;
  height: 100%;
}

/* General sidebar styles */
.bm-menu {
  background: #FFFFFF;
  padding: 2.5em 0.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #FFFFFF;
}

/* Wrapper for item list */
.bm-item-list {
  color: #FFFFFF;
  padding: 0.8em;
}

/* Individual item */
.bm-item {
  display: inline-block;
}

/* Styling of overlay */
.bm-overlay {
  background: #FFFFFF;
}

/* Styling of links */
.nav-li {
  font-family: 'Playfair Display';
  color: #000000;
  outline: none;
  padding: 10%;
  text-decoration: underline;
  text-transform: uppercase;
}

/* Removes purple outline when clicked */
.nav-li:focus {
  outline: none;
}

.nav-li:hover {
  text-decoration: none;
  font-weight: bold;
}

Managing State

At this point, the burger menu is working. There are additional state and event handlers available which are useful. By adding the following above render(), the side menu will close when a link is clicked rather than having to click on the 'X':


    state = {
      menuOpen: false,
    }

    handleStateChange (state) {
      this.setState({menuOpen: state.isOpen})  
    }

    // closes menu on link click
    closeMenu () {
      this.setState({menuOpen: false})
    }

Next, I added props to the Menu and Link components in return().

Menu receives isOpen={this.state.menuOpen} onStateChange={(state) => this.handleStateChange(state)}
Link (and <a>) receives onClick={() => this.closeMenu()}

<Menu width={ '15%' } isOpen={this.state.menuOpen} 
  onStateChange={(state) => this.handleStateChange(state)}>

 <Link className='nav-li' style={{ cursor: "pointer"}} 
  to="home" spy={true} smooth={true} onClick={() => 
  this.closeMenu()}>Home</Link>

 <Link className='nav-li' style={{ cursor: "pointer"}} 
  to="about" spy={true} smooth={true} onClick={() => 
  this.closeMenu()}>About</Link>

 <Link className='nav-li' style={{ cursor: "pointer"}} 
  to="work" spy={true} smooth={true} onClick={() => 
  this.closeMenu()}>Work</Link>

 <Link className='nav-li' style={{ cursor: "pointer"}} 
  to="contact" spy={true} smooth={true} onClick={() => 
  this.closeMenu()}>Contact</Link>

 <a className='nav-li' target='_blank' rel="noopener 
  noreferrer" href='linktoyourblog' onClick={() => 
  this.closeMenu()}>Blog</a>

</Menu>

Alright! The burger menu is fully functional now.

So... how do we only make it visible as a user scrolls away from the landing view?

componentDidMount() and onscroll events

componendDidMount() is invoked immediately after a component is mounted. As this happens we will watch for a scroll event to initiate a state change which changes the <div> opacity.

In Sidenav.js:

 state = {
      menuOpen: false,
      opacity: '0'
    }

    // will show sidenav when scroll position is above 500
    componentDidMount() {
      if (typeof window !== 'undefined') {
        window.onscroll = () => {
          let currentScrollPos = window.pageYOffset;
          let maxScroll = document.body.scrollHeight - 
          window.innerHeight;
          if (currentScrollPos < 500 && currentScrollPos < 
           maxScroll) { 
            this.setState({ opacity: '0'})
            // to get position: console.log(currentScrollPos)
           } else {
            this.setState({ opacity: '1' })
          }
        }
      }
    }

What's happening here? I'm using state and inline CSS styling to control the visibility of the drop-down menu. I added opacity to our state and give it a default value of 0 so that it does not display on page load. In the function, I use setState to change the opacity based on the current scroll position of the page.

Let's go back to return(). All of the content should be wrapped in a <div className='sidenav>, to which we add inline styling:

<div className='sidenav' style={{ opacity: `${this.state.opacity}`}}>

...

</div>

That's it! Now the drop-down is only visible after a certain point on the page view.

Conclusion & Addressing Performance

A somewhat hodgepodge interactive navigation design for SPA's.

After doing more research on componentDidMount() and onscroll events, I noticed some concerns about performance issues using this type of approach. In its current usage, this isn't completely killing my app's performance.

Upon running a Lighthouse audit I get:

Although, that is a drop from the previous 97 on Performance and 100 on Best Practices. 👀

That being said, I'd love to have a discussion on performance or perhaps a more efficient way to implement this interactive navigation that I'm not aware of-- so if you have something to teach me, drop a comment below! 💭

Using PropTypes in React

CiaraMaria — Fri, 11 Dec 2020 19:04:15 +0000

In a previous post, I wrote about passing props in React. 👇

Article No Longer Available

Today, I will discuss how we can improve the way we receive props.

What's PropTypes?

PropTypes is a package provided by the React team. It allows us to define the type of prop being passed down to a component and alerts us if an incorrect prop is used. When building a small application on your own this isn't really an issue, but when working on a team using PropTypes can ensure that if someone uses your component incorrectly during development, they will get a warning and fix the error.

Installing PropTypes

PropTypes is part of React and just requires installation. To use it in your React App simply run: npm install --save prop-types

Setting up our example

For our example, we will use a simple app that displays a person's name and age. We will be working with two files, App.js and Person.js.

Our App Component should look like this:

import React, { Component } from 'react'
import './App.css';
import Person from './Person/Person';

class App extends Component {

  state = {
    people: [
      {id: 1, name: 'Marzbarz', age: 30},
      {id: 2, name: 'Rino', age: 34}
    ]
  }

  render() {

    let people = <div> {this.state.people.map((person, index) => {
      console.log(person)
      return <Person key={index} name={person.name} age={person.age}/>
    })}
    </div>

    return (
      <div className="App-header">
        {people}
      </div>
    );
  };
}

export default App;

It's pretty much the basic layout provided when you create-react-app, we have added state which holds the data for our people in an array of objects and has id, name, and age. Inside the render() we are mapping over our array of people objects and passing props down to the Person Component. Then inside the return() we use JSX to call our variable created for mapping.

Our Person Component should look like this:

import React from 'react';

const Person = (props) => {
    return(
        <div>
            <p> Hi my name is {props.name} and I'm {props.age} years old.</p>
        </div>
    )
}

export default Person;

It is simply taking in props and returning a <p> element with some text.

If you open up your browser at this point you should see:

Using PropsTypes

We will be setting up PropTypes inside our Person.js file:

import React from 'react';
import PropTypes from 'prop-types';

const Person = (props) => {
    return(
        <div>
            <p> Hi my name is {props.name} and I'm {props.age} years old.</p>
        </div>
    )
}

Person.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number
}

export default Person;

Take a look at the above code snippet. We import PropTypes from 'prop-types' and after the component definition we access our component Person, add a new property by adding a dot, and then propTypes-- notice that the 'p' is lowercase here. Now we create a JavaScript object with key/value pairs where the keys are the prop names and the values are PropTypes--notice this time the 'p' is uppercase--and the type of data. If you remember from our state in App.js, the name prop was set to a string and the age prop was set to a number. There are multiple types of data available and you should see a suggestion dropdown like so:

As it stands, nothing should change with our application. In order to see PropTypes in action let's make a small change to state inside App.js:

state = {
    people: [
      {id: 1, name: 'Marzbarz', age: '30'},
      {id: 2, name: 'Rino', age: '34'}
    ]
  }

Let's switch the age value from a number to a string as shown above. Now, this prop is being passed down a string but our PropTypes in Person.js is still expecting a number.

If we check our console in the browser there is now a warning message!

Conclusion

Using PropTypes is especially helpful when working on teams or in a scenario where other developers are using your components and you want to be very clear on which props a component takes and what type of data is being passed.

Quick minimal contact form creation in React App

CiaraMaria — Sun, 06 Dec 2020 00:41:48 +0000

In my last 3 projects, I've needed to add a contact form. So I decided to write up a simple and speedy base layout for a form that can be customized easily.

First our JSX which consists of our main <div>, a header, and a few <input> tags:

<div className='contact'>
  <h2 className='contactus'>Contact Us</h2>
    <input type="text" id="name" name="name" 
     placeholder="Name"/>
    <input type="text" id="email" name="email" 
     placeholder="Email"/>
    <textarea id="subject" name="subject" placeholder="Tell us 
     about you!" />
    <input type="submit" value="Send"/>
</div>

Next, in our CSS file we will add some styling to the main <div>, our text input, and our submit input or button:

.contact {
  margin-top: 50px;
  margin-left: 400px;
  width: 500px;
  height: auto;
  padding: 10px;
  border: 8px solid transparent;
}

input[type=text], select, textarea {
  width: 90%; 
  padding: 12px; 
  border: 1px solid #262626; 
  box-sizing: border-box;
  margin-top: 5px; 
  margin-bottom: 5px; 
  resize: vertical; 
  font-size: medium;
  background-color: transparent;
}

input[type=submit] {
  background-color: transparent;
  border: none; 
  color: #262626;
  width: 100px;
  padding: 4px;
  cursor: pointer;
  font-size: medium;
  margin-left: 35%;
}

input[type=submit]:hover {
  color: #262626;
  transform: scale(1.2);
  transition: 500ms;
  border: 1px solid #262626;
}

Result:

From here you can change up the styling to make it look how you want!

Additional uses for the React "children" prop

CiaraMaria — Sat, 28 Nov 2020 21:30:03 +0000

In the last post of my React series, I went over how to pass props including calling on the "children" prop.

Article No Longer Available

Today, I will dive a bit deeper into the "children" prop by demonstrating another usage: rendering adjacent JSX elements.

React components must return a single JSX element (typically a <div>). That element can have other elements inside of it, but you must only return one root JSX element. This means that an extra <div> gets rendered with each component along with everything inside of it.

What if we don't want the extra element?

We can achieve this by using Higher-Order Components. A higher-order component is a function that takes a component and returns a new component. HOC along with the "children" prop can be used where we want to have adjacent JSX elements without an extra DOM element being rendered.

Using the `props.children` in HOC

Picking up from the example in the preceding post, we have a component that renders a Person.

import React from 'react';

const Person = (props) => {

    return (
        <div>
            <p onClick={props.click}>I'm {props.name} and I am 
               {props.age} years old</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.change} value= 
               {props.name} /> 
        </div>   
    )
}

export default Person;

Currently, we have two <p> elements and an <input> wrapped inside of the <div>.

If we removed the enclosing <div> tags we would get the following error:

Let's use HOC and props.children to demonstrate an alternative way to render these adjacent elements.

I created a folder src/hoc and a file inside of it named Aux.js which will hold our higher-order component.

const Aux = props => props.children;

export default Aux;

The sole purpose of our new Aux components is to return props.children which is a special property that simply outputs whatever is entered between the opening and closing tags of a component. Refer to "Passing Props in React" linked at the start of this post for more on props.children.

We can now go back to our Person component and make the following changes:

import React from 'react';
import Aux from '../../../hoc/Aux';

const Person = (props) => {

    return (
        <Aux>
            <p onClick={props.click}>I'm {props.name} and I am 
               {props.age} years old</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.change} value= 
            {props.name} /> 
        </Aux>
    )
}

export default Person;

We have imported the Aux component and replace the enclosing <div> element with opening and closing tags for Aux.

It is basically an empty wrapper utilizing the "children" property to render the JSX elements between the opening and closing tags of the Aux component!

Side note: you may have noticed there is no React import in the Aux component. This is because we're not using any JSX in it, so we're not implicitly using React.createElement() and therefore it works without the import.

That's it!

I hope this quick detour into exploring other uses for the "children" prop was helpful.

Starter Guide to Big O Notation

CiaraMaria — Sun, 22 Nov 2020 01:59:53 +0000

As a developer without a Computer Science background, Big O Notation is one of those concepts that I've had to double down on in order to improve my algorithmic skills. In this post, I will cover some basics of Big O using JavaScript.

What is Big O Notation?

Big O Notation is used to describe how long a function takes to run and allows us to talk formally about how the runtime grows as the inputs grow. It specifically describes the worst-case scenario in terms of runtime.

Big O is expressed as O(n) where n is the size of the input.
We will look at three specific expressions: O(1), O(n), and O(n²).

When determining the amount of time it takes to run an algorithm, we have some helpful rules of thumb:

When considering Big O, we only care about the broadest view. We're looking at what happens as n gets ridiculously large. As this happens, the significant effect of adding 100 or multiplying by 5 decreases.
Constants don't matter:

If we have O(5 n) we simplify to O(n)
If we have O(42) we simplify to O(1)
If we have O(10 n²) we simplify to O(n²)

O(1)

This expression means that a function takes a constant amount of runtime. Whether the input is 1 or 1000, as the input grows the time expended remains the same.

For example:

function logAtMostFive(n) {
  for (let i = 1; i <= Math.min(5, n); i++) {
    console.log(i)
  }
}

In the above function, regardless of what n is the runtime will remain constant. So, if you run this function you'll notice that whether you pass in 5 or 200, the log will only be 1, 2, 3, 4, 5.

As a result, we can say that the Big O Notation for this function is O(1).

O(n)

This expression means that it takes an amount of time linear with the size of n. The runtime will increase in relation to the increase of the input.

For example:

function logAtLeastFive(n) {
  for (let i = 1; i <= Math.max(5, n); i++) {
    console.log(i)
  }
}

In the above function, we see the opposite effect as in the previous example. As n increases, runtime increases in relation to n. If you run this function, you'll notice that if you pass in 5 the log will be 1, 2, 3, 4, 5 however, if you pass in 200 the log will be 1, 2, 3, 4, 5, 6, 7...200

As a result, we can say that the Big O Notation for this function is O(n).

O(n²)

This expression means that an algorithm's runtime is directly proportional to the square of n. Time will exponentially increase in relation to the increase of the input. This is common in functions that involve nested iterations. Deeper nesting will result in O(n³), O(n⁴), etc.

For example:

function printAllPairs(n) {
  for (var i = 0; i <= n; i++) {
    for (var j = 0; j <= n; j++) {
      console.log(i, j);
    }
  }
}

In the above function, as n increases, the runtime increases exponentially. This can seriously inhibit performance as the size of n gets ridiculously large as mentioned earlier.

As a result, we can say that the Big O Notation for this function is O(n²).

Conclusion

Big O Notation allows us to describe the amount of time an algorithm will take to run. As applications grow and the amount or size of data being handled grows, the way our functions process that information becomes critical.

Hopefully, you enjoyed this starter guide to Big O!

Passing Props in React

CiaraMaria — Sun, 15 Nov 2020 03:04:01 +0000

How do you pass data from one component to another in a React application? Cue, Props!

What are props?

"Props" is short for properties and can be used to pass dynamic data between components. Props at their core are plain JavaScript objects which hold attributes. React has a uni-directional data flow meaning props get passed from parent to child.

How do we pass props?

We'll be building on our previous example from "Getting started with React."

Article No Longer Available

We have our App and Person components. We will be passing data from App to Person in order to give our person a name.

Our App.js file looks like this:

import React, { Component } from 'react'
import './App.css';
import Person from './Person/Person';

class App extends Component {

  render() {

    return (
      <div className="App-header">
        <h1>I'm building a React app!</h1>
        <Person />
      </div>
    );
  };
}

export default App;

Our Person.js file looks like this:

import React from 'react';

const Person = () => {
    return(
        <div>
            <p> Hi my name is... </p>
        </div>
    )
}

export default Person;

And this is what the above code currently renders in the browser:

Now let's name our person! We can do this by hardcoding the name in Person.js, sure. However, we want to make our component flexible, configurable, and dynamic.

In App.js, we can pass attributes to our Person component like so:

 <Person name="Marzbarz" />

We have created a keyword, in this case name, and assigned it a string.

If you try to run this, you'll notice that nothing has changed and that is because we need to add some things to our Person.js file in order for it to handle this new data.

In Person.js we will receive one argument in our function which is passed by default by React. This is props and while you don't have to name it 'props,' it is conventional and recommended.

const Person = (props) => {
    return(
        <div>
            <p> Hi my name is {props.name} </p>
        </div>
    )
}

As you can see, we are passing props as an argument and returning "Hi my name is {props.name}" with "name" being the keyword that we assigned to our property in App.js. This syntax is JSX. The curly braces tell the JSX parser that the syntax should be interpreted as JavaScript even though it is surrounded by HTML.

Now the browser should look like this:

Awesome! We have successfully passed props from one component to another!

Understanding the "children" prop

There is a special prop called "children" which is a reserved word. "Children" refers to any elements including plain text that are written in between the opening and closing tags of a child component.

For example, say we make this change to our App.js file:

 <Person name={'Marzbarz'}> and I love to code! </Person>

As it stands, nothing will look different in the browser. But if we now go into Person.js and add to our return:

<p> Hi my name is {props.name} 
    {props.children}
</p>

You'll now see:

Nice! We have dynamically passed data in two ways!

Of course, as our applications grow and become more complex we may need to introduce state which will affect how we pass props. In my next series entry, I will dive into understanding and using state.

Conclusion

We looked at what props are, practiced passing props, and accessing the reserved "children" prop.

I hope you found this guide helpful! As I continue on in my React series, I welcome feedback, discussion, and suggestions for concepts you'd like to see me tackle.

Lottie Animations for React

CiaraMaria — Sun, 08 Nov 2020 02:16:55 +0000

Who doesn't love animations? They're fun, engaging, and versatile. In this post, I will introduce Lottie animations and how to implement them into your React website.

What is a Lottie?

A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform. They are small files that work on any device and can scale up or down without pixelation.

Integrating Lottie into React App

Step 1: install the library

npm install --save react-lottie

Step 2: select an animation from LottieFiles

You can download it as a JSON or use the Lottie Animation URL.
Personally, I prefer to download and store it in a folder in my application.
Here's an example of the file structure:

Step 3: create a Lottie.js file in src

The code inside that file should look like this:

import React from "react";
import Lottie from "react-lottie";

export default function LottieAnimation({ lotti, width, height }) {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: lotti,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <div>
      <Lottie options={defaultOptions} height={height} width={width} />
    </div>
  );
};

Step 4: import your Lottie into the component you want to return the animation:

import React from 'react';
import LottieAnimation from '../Lottie';
import home from '../Animation/dev.json';

const Example = () => {

    return ( 
         <div className='example'> 
           <LottieAnimation lotti={home} height={300} width={300} />
        </div>
    )
}

export default Example;

Note: This example implies that you then add <Example /> into render in App.js

That's it! Your beautiful Lottie animation should now render to your site!

As always, feedback and discussion is welcome. 💁

Complex Forms in Rails

CiaraMaria — Sun, 01 Nov 2020 02:34:50 +0000

Rails offers all kinds of intuitive solutions for programmers, one of which is form helpers. In this post, I'll be breaking down the steps for creating a nested form - which is basically a form within a form. Formception.

When creating my first Rails project, I found myself searching for guidance on creating this type of form. While there are many sources that show you how to do this with a has_many association, I struggled to find examples for belongs_to. So, we will be working with a complex form for a joins table.

We're building a mood diary. We have two models to work with regarding our nested form: Entry and Emotion.

Entry is our joins table and so it's association is belongs_to :emotion, while Emotion has_many :entries.
When imagining the functionality of our form, we can conclude that we want to have the ability to create our Entry and either assign it an existing emotion or create a new one.

First, we want to use accepts_nested_attributes_for class method in our Entry model. This method defines an attributes writer for the specified association, in this case, Emotion.
Going along with the Rails penchant for convention over configuration, a good rule of thumb to remember when setting up nested forms is:
If the association 'belongs to' a singular model (e.g., emotion) we will maintain the singular form of reference. If the association 'has many' plural models we will maintain the plural form of reference throughout our code.

Now we will need to modify our declared permitted parameters to accommodate the nested attributes. Following our example, we will add this to our EntriesController. In the code below I have added a key for association attributes, where the association is the relationship you want to 'nest' into your form. Put simply, it's the one you added to accepts_nested_attributes_for. This key holds the specified association's attributes that we want passed in.

Note: In this example, :emotion_id is included outside of emotion_attributes: - As shown in the Rails guide we can also use:

def entry_params
    params.require(:entry).permit(:content, emotion_attributes: [
         :id, :name
    ])
end

Finally, we are ready to create our form!

The magic happens within the fields_for tag which, when associated with accepts_nested_attributes, renders a block once for every element of the association. We then use the build_association method which instantiates the object from the passed attributes and sets a link through the foreign key.

Note: Pay close attention to build_association method. Not to be confused with collection.build, which instantiates an object from the passed attributes and creates a foreign key. The latter is a method made accessible when declaring a has_many association.

Our final product (plus a bit of CSS) looks like this, with the option to select or create an emotion:

DEV Community: CiaraMaria

Developing a Full-Stack Project on Stacks with Clarity Smart Contracts and Stacks.js Part III: Frontend

Frontend

Developing a Full-Stack Project on Stacks with Clarity Smart Contracts and Stacks.js Part II: Backend

Backend

Data:

Functions:

Manual Contract Calls

Unit Tests

Spinning up DevNet

Developing a Full-Stack Project on Stacks with Clarity Smart Contracts and Stacks.js Part I: Intro and Project Setup

Intro

Mainnet vs Testnet vs DevNet

Prerequisites

Clarinet

Docker

Project structure

My Introduction to CSS Animations: Using Inkscape to Create Text Animation

From Dense Fog to Slightly Less Dense Fog

Inkscape

Creating Scalable Vector Graphics(SVG)

Rendering SVG and Animating with CSS

Welp, That's It

Interactive Navigation in React SPA

Getting Started

Setting Up Burger Menu

Managing State

componentDidMount() and onscroll events

Conclusion & Addressing Performance

Using PropTypes in React

Article No Longer Available

What's PropTypes?

Installing PropTypes

Setting up our example

Using PropsTypes

Conclusion

Quick minimal contact form creation in React App

Additional uses for the React "children" prop

Article No Longer Available

Using the props.children in HOC

Starter Guide to Big O Notation

What is Big O Notation?

O(1)

O(n)

O(n²)

Conclusion

Passing Props in React

What are props?

How do we pass props?

Article No Longer Available

Understanding the "children" prop

Conclusion

Lottie Animations for React

What is a Lottie?

Integrating Lottie into React App

Step 1: install the library

Step 2: select an animation from LottieFiles

Step 3: create a Lottie.js file in src

Step 4: import your Lottie into the component you want to return the animation:

Complex Forms in Rails

Using the `props.children` in HOC