DEV Community: Alison Haire

🌈🦄 Build your own AI-generated Art NFT DApp!

Alison Haire — Fri, 27 Jan 2023 14:51:45 +0000

🦄 Quick links:

Video version

GitHub code

Bacalhau Docs

👩💻 What we'll do...

This blog will walk you through how to

Build an opensource python-based text-to-image script based on Tensorflow (you can also just use the Bacalhau HTTP endpoint if this isn't of interest to you)
Run this script on Bacalhau (an open p2p off-chain compute platform)
Create an NFT Contract in Solidity (based on an Open Zeppelin ERC721 contract)
Deploy the NFT Contract to the Filecoin Virtual Machine (FVM) Hyperspace Testnet with Hardhat
Front-end interactions - How to interact with Bacalhau text-to-image script and your NFT contract in React
How to save your NFT Metadata to NFT.Storage
How to deploy your Front-End DApp to Fleek

I've deliberately chosen to use as much open-source and decentralised tech as is available in this stack.

This blog is going to be pretty lengthy (hey - I want to give ALL THE INFO and make sure we're being beginner-friendly and inclusive!) - so feel free to skip through to the parts that are useful to you in the table of contents <3

🎮 Try it!

This app is hosted live here

[Fleek link coming soon]

🏛 Architecture Diagram (kinda)

🥞 DApp Technology Stack

(get it - it's a pancake stack #sorrynotsorry)

Open Source & Web3-valued from the ground up :)

Smart Contract [Solidity, Open Zeppelin]
Smart Contract IDE [Hardhat]
Blockchain Testnet [Filecoin Virtual Machine Hyperspace]
NFT Metadata Storage [NFT.Storage]
Front-End [NextJS / React + NPM]
Smart Contract Interactions from client [Metamask, Ethers, Chainstack RPC Node]
AI Text-To-Image Stable Diffusion Script [Python, Tensorflow]
Decentralised Off-Chain Compute for AI Text-To-Image Generation [Bacalhau]
Decentralised DApp Deployment [Fleek]

🏗 Building the Python Text-To-Image Script

💡 TLDR Tip 💡

This script is already available for use through Bacalhau via the CLI and an HTTP endpoint, so feel free to skip this part.

Quick Intro to Stable Diffusion

Stable Diffusion is currently the leading Machine Learning Model for doing text-to-image processing (& is the same model Dall-E uses). It is a type of Deep Learning - a subset of Machine Learning that teaches itself to perform a specific task - in this case converting a text input to an image output.

In this example, we're using a diffusion probabilistic model that uses a transformer to generate images from text.

Don't worry though - we don't need to go and train a machine learning model for this (though hey - if that's your thing - you totally could!)

Instead, we're going to use a pre-trained model from Google's TensorFlow open-source Machine Learning library in our python script because the ML weights have been pre-calculated for us.

More correctly, we're using an optimised Keras/TensorFlow implementation fork of the original ML model.

The Python Script

🦄 You can find a complete walkthrough of how to build and Dockerise this text-to-image script and run it on Bacalhau in both the Bacalhau docs and in this @BacalhauProject YouTube video.

🦄 You can also run it in this Google Collabs Notebook

Here's the full python script!

import argparse
from stable_diffusion_tf.stable_diffusion import Text2Image
from PIL import Image
import os

parser = argparse.ArgumentParser(description="Stable Diffusion")
parser.add_argument("--h",dest="height", type=int,help="height of the image",default=512)
parser.add_argument("--w",dest="width", type=int,help="width of the image",default=512)
parser.add_argument("--p",dest="prompt", type=str,help="Description of the image you want to generate",default="cat")
parser.add_argument("--n",dest="numSteps", type=int,help="Number of Steps",default=50)
parser.add_argument("--u",dest="unconditionalGuidanceScale", type=float,help="Number of Steps",default=7.5)
parser.add_argument("--t",dest="temperature", type=int,help="Number of Steps",default=1)
parser.add_argument("--b",dest="batchSize", type=int,help="Number of Images",default=1)
parser.add_argument("--o",dest="output", type=str,help="Output Folder where to store the Image",default="./")

args=parser.parse_args()
height=args.height
width=args.width
prompt=args.prompt
numSteps=args.numSteps
unconditionalGuidanceScale=args.unconditionalGuidanceScale
temperature=args.temperature
batchSize=args.batchSize
output=args.output

generator = Text2Image(
    img_height=height,
    img_width=width,
    jit_compile=False, # You can try True as well (different performance profile)
)

img = generator.generate(
    prompt,
    num_steps=numSteps,
    unconditional_guidance_scale=unconditionalGuidanceScale,
    temperature=temperature,
    batch_size=batchSize,
)
for i in range(0,batchSize):
  pil_img = Image.fromarray(img[i])
  image = pil_img.save(f"{output}/image{i}.png")

The script above simply takes in a text prompt input argument and some other optional parameters and then calls the forked TensorFlow library to generate the image(s) and save them to an outputs file.

All of the heavy lifting done here happens in the section below - this is where the Machine Learning Model does its magic. 🪄

generator = Text2Image(
    img_height=height,
    img_width=width,
    jit_compile=False,
)

img = generator.generate(
    prompt,
    num_steps=numSteps,
    unconditional_guidance_scale=unconditionalGuidanceScale,
    temperature=temperature,
    batch_size=batchSize,
)

Great, we can generate images from a text prompt, but um... where to run this GPU-required script..... 🤔🤔

If there's one thing that blockchain technology does not do inherently well, it is large data processing. This is due to the cost of computing over a distributed system to provide other powerful properties like trustlessness and censorship resistance.

Using your local machine for small examples is possible - in fact I did manage to get this particular example working on my (very unhappy about it) Mac M1, however, it was a very long wait on results (game of table tennis anyone?) so, once you start doing bigger data processing, you are going to need more gas (pun intended) and if you dont have a dedicated server lying around the house, then youre going to need to use a virtual machine on a cloud computing platform. Not only is that centralised, it's also inefficient - due to the data being an unknown distance from the computation machine, and it can get costly fast. I failed to find any free-tier cloud computing service that offered GPU processing for this (did someone say crypto mining bans..?) and plans came in at > US$400 a month.

Bacalhau!

Luckily though, these problems are some of the issues Bacalhau is trying to solve. Making data processing and computation open and available to everyone and speeding up the processing times is possible in Bacalhau, firstly - by using batch processing across multiple nodes and secondly by putting the processing nodes where the data lives!

Bacalhau is aiming to help democratise the future of data processing by enabling off-chain computation over data without giving up the decentralisation values inherent to IPFS, Filecoin & Web3 more broadly.

Bacalhau is a peer-to-peer open computation network that provides a platform for public, transparent and optionally verifiable computation processes where users can run Docker containers or Web Assembly images as tasks against any data including data stored in IPFS (& soon Filecoin). It even has support for GPU jobs (something that I couldn't find on any free tier from a cloud provider!)

Running the script on Bacalhau

To run this script, we can Dockerise it for use on Bacalhau. You can follow the tutorial here if you want to learn to do that.

We can then run it with the Bacalhau CLI with just one line of code (after installing Bacalhau with another one-liner):

bacalhau docker run --gpu 1 ghcr.io/bacalhau-project/examples/stable-diffusion-gpu:0.0.1 -- python main.py --o ./outputs --p "Rainbow Unicorn"

In this example though, I'm going to use an HTTP endpoint that connects me to this dockerised stable diffusion script, which I'll show you in the Integrations section!

I'll note here though, that this is a powerful and flexible way to run data computation processes that is also web3 friendly - we're not just limited to this one small model.

Let's move on to the NFT script though! :)

Building & Deploying the Solidity NFT Script

The Smart Contract

The NFT Smart Contract is based on Open Zeppelin's implementation of ERC721 but uses the ERC721URIStorage implementation, which includes the metadata standard extensions (so we can pass in our IPFS-addressed metadata - which we'll save on NFT.Storage, to the contract).

This base contract additionally gives us the general functionality of an NFT contract with functions like mint() and transfer() already implemented for us.

You'll notice I've also added a couple of getter functions to fetch data for my front end as well as an Event that will be emitted on-chain each time a new NFT is minted. This gives the ability to listen to on-chain events from the DApp.

💡 Try it out on remix and see all the available functions by clicking this link! 💡

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@hardhat/console.sol"; 

contract BacalhauFRC721 is ERC721URIStorage {
/** @notice Counter keeps track of the token ID number for each unique NFT minted in the NFT collection */
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

/** @notice This struct stores information about each NFT minted */
    struct bacalhauFRC721NFT {
        address owner;
        string tokenURI;
        uint256 tokenId;
    }

 /** @notice Keeping an array for each of the NFT's minted on this contract allows me to get information on them all with a read-only front end call */
    bacalhauFRC721NFT[] public nftCollection;
/** @notice The mapping allows me to find NFT's owned by a particular wallet address. I'm only handling the case where an NFT is minted to an owner in this contract - but you'd need to handle others in a mainnet contract like sending to other wallets */
    mapping(address => bacalhauFRC721NFT[]) public nftCollectionByOwner;

/** @notice This event will be triggered (emitted) each time a new NFT is minted - which I will watch for on my front end in order to load new information that comes in about the collection as it happens */
    event NewBacalhauFRC721NFTMinted(
      address indexed sender,
      uint256 indexed tokenId,
      string tokenURI
    );

/** @notice Creates the NFT Collection Contract with a Name and Symbol */
    constructor() ERC721("Bacalhau NFTs", "BAC") {
      console.log("Hello Fil-ders! Now creating Bacalhau FRC721 NFT contract!");
    }

/** 
@notice The main function which will mint each NFT.
The ipfsURI is a link to the ipfs content identifier hash of the NFT metadata stored on NFT.Storage. This data minimally includes name, description and the image in a JSON.
*/
    function mintBacalhauNFT(address owner, string memory ipfsURI)
        public
        returns (uint256)
    {
        // get the tokenID for this new NFT
        uint256 newItemId = _tokenIds.current();

        // Format info for saving to our array
        bacalhauFRC721NFT memory newNFT = bacalhauFRC721NFT({
            owner: msg.sender,
            tokenURI: ipfsURI,
            tokenId: newItemId
        });

        //mint the NFT to the chain
        _mint(owner, newItemId);
        //Set the NFT Metadata for this NFT
        _setTokenURI(newItemId, ipfsURI);

        _tokenIds.increment();

        //Add it to our collection array & owner mapping
        nftCollection.push(newNFT);
        nftCollectionByOwner[owner].push(newNFT);

        // Emit an event on-chain to say we've minted an NFT
        emit NewBacalhauFRC721NFTMinted(
          msg.sender,
          newItemId,
          ipfsURI
        );

        return newItemId;
    }

    /**
     * @notice helper function to display NFTs for frontends
     */
    function getNFTCollection() public view returns (bacalhauFRC721NFT[] memory) {
        return nftCollection;
    }

    /**
     * @notice helper function to fetch NFT's by owner
     */
    function getNFTCollectionByOwner(address owner) public view returns (bacalhauFRC721NFT[] memory){
        return nftCollectionByOwner[owner];
    }

Requirements

I'll be deploying this contract to the Filecoin Virtual Machine Hyperspace Testnet, but you could deploy this contract to any EVM-compatible chain including Polygon, BSC, Optimism, Arbitrum, Avalanche and more. You could even tweak your front end to make a multi-chain NFT (hint: this repo)!

To deploy to Hyperspace Testnet we'll need to

Set up & connect Metamask Wallet to Hyperspace Testnet
Get some test tFIL funds from a faucet (Yoga or Zondax)

Deploying the Smart Contract with Hardhat

I'm using hardhat to deploy this contract to the Hyperspace testnet.

Hyperspace RPC & BlockExplorer Options:

For the config set-up, we can choose from any of the available public RPC endpoints.

hardhat.config.ts

import '@nomicfoundation/hardhat-toolbox';
import { config as dotenvConfig } from 'dotenv';
import { HardhatUserConfig } from 'hardhat/config';
import { resolve } from 'path';

//Import our customised tasks
// import './pages/api/hardhat/tasks';

const dotenvConfigPath: string = process.env.DOTENV_CONFIG_PATH || './.env';
dotenvConfig({ path: resolve(__dirname, dotenvConfigPath) });

// Ensure that we have all the environment variables we need.
const walletPrivateKey: string | undefined = process.env.WALLET_PRIVATE_KEY;
if (!walletPrivateKey) {
  throw new Error('Please set your Wallet private key in a .env file');
}

const config: HardhatUserConfig = {
  solidity: '0.8.17',
  defaultNetwork: 'filecoinHyperspace',
  networks: {
    hardhat: {},
    filecoinHyperspace: {
      url: 'https://api.hyperspace.node.glif.io/rpc/v1',
      chainId: 3141,
      accounts: [process.env.WALLET_PRIVATE_KEY ?? 'undefined'],
    },
    // bleeding edge often-reset FVM testnet
    filecoinWallaby: {
      url: 'https://wallaby.node.glif.io/rpc/v0',
      chainId: 31415,
      accounts: [process.env.WALLET_PRIVATE_KEY ?? 'undefined'],
      //explorer: https://wallaby.filscan.io/ and starboard
    },
  },
// I am using the path mapping so I can keep my hardhat deployment within the /pages folder of my DApp and therefore access the contract ABI for use on my frontend
  paths: {
    root: './pages/api/hardhat',
    tests: './pages/api/hardhat/tests', //who names a directory in the singular?!!! Grammarly would not be happy
    cache: './pages/api/hardhat/cache',
  },
};

export default config;

And to deploy the smart contract we created

deploy/deployBacalhauFRC721.ts

import hre from 'hardhat';

import type { BacalhauFRC721 } from '../typechain-types/contracts/BacalhauFRC721';
import type { BacalhauFRC721 __factory } from '../typechain-types/factories/contracts/BacalhauFRC721__ factory';

async function main() {
  console.log('Bacalhau721 deploying....');

   // needed as hardhat's default does not map correctly to the FEVM
  const owner = new hre.ethers.Wallet(
    process.env.WALLET_PRIVATE_KEY || 'undefined',
    hre.ethers.provider
  );
  const bacalhauFRC721Factory: BacalhauFRC721__factory = <
    BacalhauFRC721__factory
  > await hre.ethers.getContractFactory('BacalhauFRC721', owner);

  const bacalhauFRC721: BacalhauFRC721 = <BacalhauFRC721>(
    await bacalhauFRC721Factory.deploy()
  );
  await bacalhauFRC721.deployed();
  console.log('bacalhauFRC721 deployed to ', bacalhauFRC721.address);
  // optionally log to a file here
}

main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

To deploy, run the above script in the terminal by using the following code (NB: since we've set the default network to filecoinHyperspace in our config, it's not necessary to pass a flag for the network though this is shown below)

> cd ./pages/hardhat/deploy/

npx hardhat run ./deployBacalhauFRC721.ts --network filecoinHyperspace

Celebrate! We've just deployed our NFT contract to the Filecoin hyperspace testnet!

🎬 Building the Front-End Interactions

[coming soon]

NFT.Storage

Contract Interactions

Bacalhau Interactions

Creating the front-end API endpoint for Bacalhau is documented in this project report by engineer Luke Marsden.

The API currently only directly hits the stable diffusion scripts documented in this blog, however, the team is in the process of extending it into a more generic API so that you can call any of the examples, and also your own deployed scripts from an HTTP REST API. Keep an eye on this here or in the #bacalhau channel in filecoinproject.slack.

curl -XPOST -d '{"prompt": "rainbow unicorn"}' 'http://dashboard.bacalhau.org:1000/api/v1/stablediffusion';


import { CID } from 'multiformats/cid';

export const callBacalhauJob = async (promptInput: string) => {
  //Bacalahau HTTP Stable Diffusion Endpoint
  const url = 'http://dashboard.bacalhau.org:1000/api/v1/stablediffusion';
  const headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  };
  const data = {
    prompt: promptInput, //The user text prompt!
  };
  /* FETCH FROM BACALHAU ENDPOINT */
  const cid = await fetch(url, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: headers,
  })
    .then(async (res) => {
      let body = await res.json();
      if (body.cid) {
/* Bacalhau returns a V0 CID which we want to convert to a V1 CID for easier usage with http gateways (ie. displaying the image on web), so I'm using the IPFS multiformats package to convert it here */
        return CID.parse(body.cid).toV1().toString();
      }
    })
    .catch((err) => {
      console.log('error in bac job', err);
    });
  return cid;
};

This call will return an IPFS CID (content identifier) with a folder structure like the one below. The image can be found at /outputs/image0.png. See it for yourself by clicking here!

📺 Deploying the front end to Fleek

[coming soon]

🌟 Final Thoughts: Possibilities for AI & Blockchain

[coming soon]

🐠 The Bacalhau Roadmap

We're currently building out a way for you to run Bacalhau directly from your smart contracts!!!

Keep in touch!

Congrats if you read all the way through!!!

I'd appreciate a like, comment, follow or share if this was useful to you! <3

Keep in touch with Bacalhau!

Twitter @BacalhauProject
YouTube @BacalhauProject
Filecoin Project Slack #bacalhau @filecoinproject
Github @bacalhau.org
Forum github.com/filecoin-project/bacalhau/discussions

@DeveloperAlly

Is web3 business just web2 in disguise? Why importing web2 thinking is hurting our startups

Alison Haire — Fri, 14 Oct 2022 22:37:36 +0000

Despite the technological advantages of blockchain giving us access to trustlessness, transparency and more fairness in our tech, it seems to me that many web3 companies are importing the cultures from web2 that do the exact opposite.

This is a time to be rethinking how we are cooperating and collaborating as people and to be empowering new ways of working that include autonomy, fairness and transparent processes., Instead of importing the same problems that perpetuate lack of pay equality, unequal power dynamics and a lack of transparency and support, we should be embracing the benefits web3 gives us and the values it stands for.

Building & Deploying Full Stack DApps

Alison Haire — Sat, 24 Sep 2022 07:23:28 +0000

Why I left leading the Filecoin Virtual Machine (FVM) DevRel Team

Alison Haire — Sat, 24 Sep 2022 06:16:50 +0000

The Risks of Startup & Scaleup Culture

Alison Haire — Thu, 22 Sep 2022 23:10:43 +0000

Startups are great right?

So fun and lively and autonomous.

Unfortunately, there are also some very real risks to working for startups and startup cultures.

Including

Lack of process
Lack of support
Lack of fairness
Shifting expectations
Victim blaming

Unique challenges for women in crypto

Alison Haire — Thu, 22 Sep 2022 10:47:30 +0000

Unique challenges: (let’s make this list, then let's make a list on how to combat them!)

The trad tech shade / hatred thrown at crypto.
This is tough to handle for anyone - but I’d posit it’s potentially even harder for women and minorities that may already feel like their voice is not heard or valued.

Lack of a safe space and culture
The crypto world has a lot of cryptobros (but also increasingly a lot of awesome women and minority supporters - after all this is the place we are trying to make things fairer - we are in a unique position to understand what it’s like to be marginalised.

Lack of mentors
I put this one down to people being utterly time poor with one million different things on their plate at any one time! How do we solve this?

Unseen Gender Discrimination in the Workplace & it's effects [WIP]

Alison Haire — Thu, 22 Sep 2022 10:03:06 +0000

Up until recently, I didn’t have much to say about the need for diversity pushes in the workplace, I understood their value and intent and could explain those initiatives to the male colleagues that asked, and yes, I’ve had some encounters with backwards people and bosses.

It may also have helped that I was the eldest of 3 girls, went to an all-girls school, and was never told I was less than anyone. In fact, I was consistently told I could do anything I put my mind to by my father, who was a man that believed in education for girls and was ahead of his time, quite frankly. Another factor being that I ran my own business in my twenties and had plenty of life experience before I entered the world of tech and big corp's.

Until recently. When I realised in the most awful way, the myriad of interconnected biases and treatments that can create a “death by 1000 cuts” scenario for underrepresented folks in the workplace. These stories are much harder to quantify. They are not as overt, they don’t evoke the same amount of outcry and they leave individuals feeling powerless to even bring the topic up.

While men can be our best allies in the quest for workplace equality (and believe me I have had some amazing male mentors - shout out to you guys - you know who you are), they can also be the absolute worst offenders and gate-keepers to the male privilege of having it all.

There’s a few things I want to make clear first, I am a person that will (barring a bad day) give everyone the benefit of best intentions. If someone is shocked I’m technical because I’m a woman, ok, it’s annoying that I have to play the role, but I will educate them that there are many smart and beautiful women doing amazing things in modern society. And they are not “women coders” or “women scientists” - they are just experts in their (non-gendered) field. When I see women’s groups who are just leveraging the movement for their own advantage or virtue signalling to get ahead, I am also absolutely furious. These women set things back 100 years.

Basically, if you wanted a balanced, non-confrontational view on the issues, I was the person you might ask. Several times I was that person. Once on whether all-women hackathons should exists (shout out to the male that was curious enough to ask and felt safe enough to do so) - and the answer is yes, they should. Why? Because traditional underlying social roles crop up otherwise. A woman might be a great project lead, but she may also unconsciously just let a man on the team do it, for example.

The problem isn’t with the broad strokes of things. The big issue lies in biases.

These problems are much more insidious

How micromanagement & low-trust environments are detrimental to productivity, project outcomes & your business [WIP]

Alison Haire — Thu, 22 Sep 2022 10:01:09 +0000

The Effects of micromanagement & low-trust environments on productivity, project outcomes & your business

TL:DR;

Low-trust environments (at best) slow down productivity and outcomes
Low-trust environments lead to stagnation, lack of original ideas and abandonment of innovation
Low-trust environments produce lower levels of outcomes and lower quality of work
Low-trust environments cause bottlenecks and blockers in achieving outcomes because even small decisions must be reviewed
Low-trust environments are marked by an overabundance of checkin’s and meetings for no real purpose, breaking workflow and slowing down outcomes
Low-trust environments are marked by fear and a lack of openness to feedback or different viewpoints, leading to a lack of collaboration, innovation or new ideas. Innovation requires an experimental attitude that embraces “mistakes” as a path to learning what works. In low-trust environments, making a mistake is fatal.
Low-trust environments are run by mandate rather than consensus leading to resentment in employees
Low-trust environments create cynical, disengaged employees
Low-trust environments lead to higher levels of stress, and increased employee turnover.
Low-trust environments cost a business in both time, innovation and money.

I want to start out by saying I've worked for both great leaders, and appalling managers. And I use the two different terms, because a leader is a person who creates a high functioning, happy, healthy and innovative team and psychologically safe team environment that embraces differences and leverages them for constructive outcomes. A manager on the other hand, simply looks at day to day operational functions. They aren't inherently good or bad at their roles, but whether they are simply task managers or micromanagers creating unhealthy outcomes, they are never leaders.
Leaders inspire, managers simply organise.

Why Trust Matters

The role of trust in the workplace is essential. As Hungerford puts it - “Trust is an essential condition of human society, unifying families, communities, groups and countries.”

The ILM defines trust in six dimensions:

Ability
Understanding
Fairness
Openness
Integrity
Consistency

Rosenfeld likened leadership trust to the kind of trust that develops in families... “Their deeds have to match their words, because everyone is going to be watching,”.

What are these?

How are low-trust environments characterised?

Low-trust environments are characterised by a const focus on the details, the "how" rather than on achieving outcomes
Low-trust environments are characterised by one person bottlenecks & blockers
Low-trust environments require constant review requirements leading to a break of workflow and slowing down of outcomes
Low-trust environments are characterised by constant check in, communication and reporting requirements taking away the ability of the team to be innovative or to achieve tasks in a timely manner.
Low-trust environments may engender a lack of support or praise for work
Low-trust environments create and inability to give feedback, handle opposing opinions or to raise concerns and provide little or no support and a culture of fear.
characterised by gaslighting

What are their effects?
-on your business outcomes
-on your employees

How do you improve these?
-as a leader
Leadership training
Bias training
Regular feedback processes
A genuine commitment to constructive action on feedback and concerns
People managers being distinct from up-line management
Career coaching & support for those levelling up to new positions

-as an individual

How do you rectify issues?
-as a leader
-as an individual

What processes should be in place for concerns?

How do you rebuild trust in the workplace?
Most research agrees on the fundamentals of rebuilding trust in the workplace

Acknowledgement of what caused broken trust
Permission and allowance for feelings and emotions to be discussed.
Support processes

Research articles
'High Trust’ and ‘Low Trust’ Workplace Settings: Implications for Our Mental Health and Wellbeing

Characterising low & high trust environments

Warning signs that your org is low-trust

Broken Trust is Bad for Business

"When employees do not trust managers and leaders, various forms of organizational fallout are likely, including low engagement, high turnover and reduced innovation" - Hastings (Broken Trust is Bad for Business).

Recognition in the workplace: Its Not What You Think It Is

Want to learn Reactjs? Here's the 2020 resource list for you!

Alison Haire — Thu, 08 Oct 2020 05:11:54 +0000

Hello 👋

I’ve been a dev for a few years now, and one of the top things I get asked (after what language should I learn and where do I start) is where can I find some good resources for learning ‘x’. So here’s some of my fave resources for learning Reactjs🙂!

React is an open source javascript library originally developed by Facebook and released in May 2013. It continues to be developed & maintained by a core Facebook React team and the awesome open source dev community.

It’s also MIT licensed (as are all the React products including Jest, Flow, React Native & Immutable) which pretty much means you’re able to use it for private and commercial projects freely (thanks to the open source movement).

If you’re just getting started in front end development, there are some key skills you want to have a decent idea of before you delve into a library like React. These include what the internet runs on at its most basic level - css, html and javascript and I’d also recommend knowing how to use git versioning.

While these aren’t essential to know and you can learn them in combination, if you’re serious about your learning, that’s definitely the place I’d start. If you want a React learning pathway to map your studies you can check out this handy React Roadmap

Assuming you have some prior knowledge in these things though… here’s some of the best resources the interwebs has to offer (in my humble dev opinion) for learning React either for free (and one sneaky cheap one - because it's totally worth the dollarydoos) as well as some of the people and sites to subscribe to or follow to stay up to date on all things React.

Where to start

The best idea when learning a new tech language, library
or framework is to start with... Yep, the documentation. (Sorry not sorry)

😂😂😂 https://t.co/EmImS4V2cO

— Ally Haire (@developerally)

July

28, 2020

We’re in luck here though, because React is particularly good on documentation! It’s comprehensive, easy to read and well set out - hurrah.
Even better - React has a complete beginners tutorial on their
site and even course recommendations
(so I guess there’s no need for you to read the rest of this article now huh? 😜)

As a quick aside - The React team is working on a major rewrite of the React docs site as we speak and looking for community feedback on how people currently use the docs and what improvements would be most helpful - you can help by taking this survey

The React written walk-through tutorial is really the ultimate place for a beginner to start (can’t really beat something written by the developers themselves can you?!). You can find it here.

If you prefer to learn via video or with step by step hand-ons
interactions or want some social communities or mail-lists to subscribe to, then read on my friend 😃 !

Hands-on & Written Beginner’s Tutorials

Codecademy

Codecademy is one of the best free resources for those
wanting hands-on learning all in one browser window. You get instant feedback on what’s right (or wrong) with your code and follow one-page tutorials.

Find it here

W3schools

W3schools gets an honourable mention for being one of the
oldest (but still relevant!) developer tutorial resources on the web.
Founded in 1998, it focuses on being both a tutorial and resource and is continually adding languages and libraries to its site. It’s a great free resource if you prefer to read and run examples.

Find it here

Video courses

Stephen Grider
One of my all-time favourite dev teachers is Stephen
Grider. This guy has a way of explaining sometimes complex topics in a simple and easy to understand way.

Not only is he a great teacher - but he’s very consistent at updating his content to make sure it’s keeping up with current React trends. This guy gets 5/5 hot dogs 🌭 from me (Stephen says this phrase a bit in his videos and I for one am good with it)

My recommendation for starting is his 2020 updated “Modern React with Redux”. Once you’ve mastered that you can move on to his “Advanced React and Redux” course too (perk!).

You can find his courses on Udemy, and while they aren’t entirely free - they are well worth the $10 you can get them for by going through his website for a discount coupon (or you can wait for a very frequent Udemy sale to happen).

Find it here.

FreeCodeCamp

FreeCodeCamp offers a free (obviously) 10 hour hands-on
YouTube tutorial series which has recently been updated as of October 2020! This course will take you through the fundamentals of React including how to get setup and teach you modern React concepts (like Hooks - which were introduced in v16 in 2019). This is an awesome free development course and big kudo’s to freecodecamp for making coding accessible to all.

Check it out here

PluralSight

For a free video course that takes you through
the essential React concepts while you code-along, try out “React: Getting Started” on PluralSight. This course is completely free and even includes a Javascript crash course if you’re a bit rusty or still learning.

You’ll find it here

React Development Social Communities

Find peers, ask questions and get help in some of these awesome React Dev communities found on Reddit, Discord and Slack.

Discord: The original React discord since 2015 is Reactiflux. Likely named when Flux was still the UI state management system of choice (things move fast in front-end development - which is why I’ve included a people and blogs to follow section!)

Find it here

Reddit:
This reddit even has a beginner’s thread - so don’t be afraid to ask any and all questions! Most dev’s I know are happy to help others - after all, we all started somewhere too!

Find it here

Slack:
You can find a lively community of react and react-native
developers on slack too.

Join the slack here

Meetups:
Don’t forget about the awesome resource of Meetups! Meetups are often run by passionate developers, and given the popularity of Reactjs - you’re pretty likely to find a react meetup near you. It’s also an awesome way to meet other react developers and network.

Check out your local groups here

People & Blogs to follow

Dan Abramov
Dan Abramov is the undisputed down-to-earth King of React (who probably would wince a bit at being called that). He’s so associated with React, that it’s a common misconception he created React (it was actually originally created by Jordan Walke).

He did however develop Redux - which you can think of as a
UI data storage system that keeps your data values synchronised & consistent and able to be connected to any React UI page. He also continues to be a core member of the React development team and runs the overreacted.io blog.

No React article would be complete without a hat-tip to Dan.

Twitter: @dan_abramov
Github: @gaeron

Ryan Florence

Creator of react router (basically used to give your react app the ability to move between pages) and founder of the reacttraining.com learning site.
This guy does an awesome workshop and conference talk - check out his chat from ReactSummit - the official React Conference, this year on YouTube.

Twitter: @ryanflorence

Oh, and check out his tongue-in-check 90s website if you're after a chuckle too (Thanks Ryan 😂)

Robin Wieruch
This guy has been blogging and writing tutorials about React from nearly the start.

Web: Robin Wieruch
Twitter: @rwieruch

Go use your new-found tech powers!

If you're interested in hearing more about opensource or choosing a tech framework - check out The TechJam podcast!

Let me know if I’ve missed an awesome resource, great community or someone to follow and thanks for reading! 💙