Best match

Most recent

Data

Usage

DataLakeHouse.io Usage Analytics for Snowflake will enable joint customers to gain valuable insights in their Snowflake accounts to improve data management capabilities and visibility of their ...

AICG Launches DataLakeHouse.io Usage Analytics for Snowflake on the Snowflake Data Cloud

Yahoo Finance

DataLakeHouse.io Usage Analytics for Snowflake will enable joint customers to gain valuable insights in their Snowflake accounts to improve data management capabilities and visibility of their Snowflake investments. CHARLOTTE, N.C., May 16, 2023 ...

雅虎財經

Google

Google also announced that its own generative AI tools would include metadata with each picture to indicate it’s an AI-created image, not a photo, regardless of whether you see it on a Google ...

Google’s new image search tools could help you identify AI-generated fakes

The Verge

Would you like to scale your digital marketing efforts without adding more headcount? Metadata.io might just be the solution you've been searching for. This AI-powered B2B dashboard helps VP of ...

Target Your Ideal Customer on Multiple Platforms with Just One Tool

LinkedIn

In this blog post, we'll delve into the world of inflation data, explore why and how it affects mortgage rates, and explain how Chris Black at LocalMortgage.io can help you make informed decisions ...

Navigating Mortgage Rates with Inflation Data: How Chris Black at LocalMortgage.io Has Your Back

Subscribe to your choice of industry specific newsletters, save $100 on conferences, search member directories, comment on stories and more. Free to qualified media, marketing and advertising ...

Metadata.io Raises $40 Million In Series B Financing

MediaPost

Get the most recent info and news about metadata.io on HackerNoon, where 10k+ technologists publish stories for 4M+ monthly readers.

Metadata Software, LLC designs and develops software solutions. The Company offers demand generation platform for inbound marketing and customer acquisition for business to business enterprises. Metadata Software serves customers in the United States.

metadata.io

Meet the Winners of Startups in North and Central America

"It's Easy to Start but Very Hard to Finish Strong" - Marketing Data Founders 

As the NFT area is growing every day, more new mechanics and experiments are coming to the world of priceless pixels. One of the popular approaches during NFT launches is a Reveal toggle functionality. Reveal functionality stands for hiding the NFT picture with some placeholder image initially. In this article we will go through the process of implementing such behavior and analyze why you’d possibly use it in your collection. Theory Firstly, let’s dive into the theory of NFTs to define the steps needed for our Reveal. NFTs are following standard of a non-fungible token and all of the generative collections follow interface as well. ERC721 ERC721Metadata interface ERC721Metadata {    
  function name() external view returns (string _name);
  function symbol() external view returns (string _symbol);   
  function tokenURI(uint256 _tokenId) external view returns (string);
} This interface allows us to specify name, symbol and tokenURI for each NFT in our collection. What we are interested here is function that is responsible for returning item’s metadata value. tokenURI So our task for implementing Reveal is the following: Create a flag variable in Smart Contract that indicates whether NFTs are hidden/revealed Add external function for toggling (or setting to true) flag variable value, that has to be accessed only by owner Override method to return the same single metadata file for every NFT during the Hidden phase and appropriate NFT metadata after reveal tokenURI Upload Hidden phase metadata to IPFS Updating Smart Contract I won’t go deep with explaining the common NFT smart-contract, assuming that you have one already ;) If not, then have a look on standard that provides gas-efficient minting, so your customers won’t pay a lot for transaction fee. I’ll be using ERC721A in this tutorial as well. ERC721A Let’s add the flag property to existing Contract class and initialize it with : false bool public revealed = false; Then let’s add a function for changing our value and make sure it could only be called by the . For doing that, I’d suggest derive from the OpenZeppelin contract that will add modifier for us. revealed owner Ownable onlyOwner contract HiddenReveal is ERC721A, Ownable {
  bool public revealed = false;  
  function reveal() external onlyOwner {revealed = true;}
} As you can see, I’m not toggling the value but just set it . In this way you won’t make your community nervous that you might hide their NFTs again after revealing 🙃 You can make it to toggle current value or set to the value passed into the function. revealed true Now is the most interesting part: overriding function based on our flag. tokenURI revealed function tokenURI(uint256 tokenId) public view virtual override returns (string memory) {
  if (!_exists(tokenId)) revert URIQueryForNonexistentToken();
  string memory baseURI = _baseURI();  
  string memory metadataPointerId = !revealed ? 'unrevealed' : _toString(tokenId);  
  string memory result = string(abi.encodePacked(baseURI, metadataPointerId, '.json'));  

  return bytes(baseURI).length != 0 ? result : '';  
} Check if token with such exists and revert with Custom Error if not tokenId Take the value to concat it with and get metadata URL baseURI tokenId Check the current state and if it’s then use string instead of , store it into revealed false unrevealed tokenId metadataPointerId Concat , and extension baseURI metadataPointerId .json Return the is baseURI is specified result Final result for will be something like this, for every NFT: revealed=false or https://www.mybaseurilink.com/folderipfshash/unrevealed.json ipfs://folderipfshash/unrevealed.json Here is the full Smart Contract code with Hide/Reveal functionality: contract HiddenReveal is ERC721A, Ownable {
  string private _baseTokenURI;
  bool public revealed = false;  

  function _baseURI() internal view virtual override returns (string memory) {  
    return _baseTokenURI;  
  }  

  function tokenURI(uint256 tokenId) public view virtual override returns (string memory) {  
    if (!_exists(tokenId)) revert URIQueryForNonexistentToken();  

    string memory baseURI = _baseURI();  
    string memory metadataPointerId = !revealed ? 'unrevealed' : _toString(tokenId);  
    string memory result = string(abi.encodePacked(baseURI, metadataPointerId, '.json'));  

    return bytes(baseURI).length != 0 ? result : '';  
  }  

  function setBaseURI(string calldata baseURI) external onlyOwner {  
    _baseTokenURI = baseURI;  
  }  

  function reveal() external onlyOwner {  
    revealed = true;  
  }
} Please, note that this Smart Contract is NOT production ready, as it doesn’t have mint functions lol. But you can use it as a reference to plug functionality into your solution Setting Up IPFS After finishing with Smart Contract part, you have to set up the storage for your Unrevealed items metadata. Generally, you will just need to store a placeholder image and metadata files in a separate IPFS folder. unrevealed.json Then you connect your Smart Contract to the IPFS storage through calling on contract with the folder’s hash. setBaseURI Here is an example of : unrevealed.json {
  "name": "@sir_fedos Hide/Reveal",
  "description": "Tutorial on how to create Reveal functionality on your NFT",
  "image": "ipfs://hAshToYoUrPlAcEhoLderImAge"
} Conclusion All in all, Reveal functionality is a great marketing tool and a tiny mechanic that could be added to every NFT drop with ease. Moreover, you can specify multiple reveal stages, define them as an enum and add some entertainment to the post-mint phase of your project! Follow for more tutorials! Also published . here

How to Create an NFT Reveal With Solidity

If you know , it’s easy to add the ability to create, mint, and manage non-fungible tokens (NFTs) to your app. The wraps REST calls to Ethereum nodes, abstracting away the technical compilations and making it possible to work with NFTs with just an Infura account, some configuration, and a few lines of code. The also doesn’t require the overhead of learning Solidity, importing ABIs, etc. Whether you are new to or highly experienced, Infura NFT SDK makes NFTs easy. typescript Infura NFT SDK Infura NFT SDK web3 Let’s jump in, build, and deploy an to see how it works. ERC721 NFT What is the Infura NFT SDK? The is an SDK that allows you to build and interact with NFTs easily.  It’s implemented in TypeScript, a programming language that is a strict superset of JavaScript. The SDK includes the ability to create, mint, and manage NFTs and query information about them. Infura NFT SDK The significant part is that it abstracts away the technical details so you can focus on the core functionality of your dApp instead of the (often difficult) details. It’s all about ease of use with Infura SDKs! Supported chains include: Write Ethereum: Mainnet, Goerli, Sepolia Polygon: Mainnet, Mumbai Read Ethereum: Mainnet, Goerli, Sepolia Polygon: Mainnet, Mumbai BSC: Mainnet By using the Infura NFT SDK, you also get access to Infura's core functionality and infrastructure, which provides access to Ethereum (and other blockchains) without requiring you to run a full node. With the SDK, you can leverage many capabilities, making it easier to build and scale your dApps. So let’s build an NFT and see what the SDK can do. Building and Deploying ERC721 NFT We will build a and on Ethereum and use the SDK to create a new NFT. We’ll do all this on the Ethereum Goerli testnet, so we don’t have to worry about defects or the cost of deploying to the mainnet. dApp smart contract Prerequisite Before getting started, you need the following prerequisites: and its package manager NPM. Verify you have Node.js installed by using the following terminal command: node -v && npm -v Node.js installed TypeScript An Infura account A basic understanding of TypeScript and JavaScript MetaMask Infura The Infura NFT SDK is really simple to use. In fact, most of this tutorial is just the setup and configuration needed to create a dApp. Let’s start by to your Infura account. You should be on your dashboard, where you can create a new key, as shown below. We’ll create a new key for this project. logging in Click the “Create a New Key” button and fill in the required information. After creating your key, your project ID will be visible on your dashboard under the API KEY section, as shown below. Copy and keep it somewhere; you’ll need it later in this tutorial. Set up IPFS project on Infura Dashboard Now, let’s create an project. is a P2P distributed file system for storing and accessing files (and other data). It works well with blockchain. We’ll need IPFS (and these credentials) to upload and store the metadata of our NFT project. IPFS IPFS Head to your dashboard and create another new key by clicking “Create a Key”, as shown below. This time we’ll choose IPFS as the network. This project will work on the mainnet and (what we will use it for) testnet. After creating your key, you’ll see your project ID and API key secret under the API KEY section of your dashboard. You’ll need this later as well, so copy it and keep it somewhere safe. Project Setup and Installation Next, we’ll set up and initialize a node.js Typescript project. Use the following commands in your console: mkdir typescript-nft-demo && cd typescript-nft-demo

npm init -y

npm install -D typescript ts-node

npx tsc --init Open the project in your preferred development environment. For example, if you are using Visual Studio Code, use the following command to open the project automatically: code . Install the Project Libraries Next, we need to install the Infura SDK and dotenv library for reading the environment variables. Use the following command: npm install @infura/sdk dotenv Your project should have something similar to what is shown below: Create a file at your project's root and add the following variables to it: .env INFURA_PROJECT_ID=<YOUR-INFURA-PROJECT-ID>

INFURA_PROJECT_SECRET=<YOUR-INFURA-PROJECT-API-KEY>

WALLET_PRIVATE_KEY=<YOUR-WALLET-MNEMONIC/PRIVATE-KEY>

EVM_RPC_URL=https://goerli.infura.io/v3/<YOUR-PROJECT-API-KEY>

INFURA_IPFS_PROJECT_ID=<YOUR-INFURA-IPFS-PROJECT-ID>

INFURA_IPFS_PROJECT_SECRET=<YOUR-INFURA-IPFS-PROJECT-SECRET-KEY>

WALLET_PUBLIC_ADDRESS=<YOUR-WALLET-ADDRESS> Replace and with the and key from the Infura project created earlier in this tutorial. <YOUR-INFURA-PROJECT-ID> <YOUR-INFURA-PROJECT-API-KEY> ID API Replace and with the and key from the project created earlier in this tutorial. <YOUR-INFURA-IPFS-PROJECT-ID> <YOUR-INFURA-IPFS-PROJECT-SECRET-KEY> ID API IPFS On the line starting with , replace with your . EVM_RPC_URL <YOUR-PROJECT-API-KEY> Infura API key should be replaced with your public blockchain address. <YOUR-WALLET-ADDRESS> is your wallet's private key. <YOUR-WALLET-MNEMONIC/PRIVATE-KEY> Note: Never share your private keys (mnemonic) with anyone, and keep them secure. You can find your wallet address and private key to your wallet on MetaMask in the following steps: Open MetaMask by clicking on the browser extension icon or visiting the MetaMask website. Click on the three dots in the top right corner of the MetaMask window. Select “Account Details” from the drop-down menu, and click on the “Export Private Key” button. A pop-up window will appear, asking you to enter your password. Enter your password and click on the “Unlock” button. Once your account is unlocked, you can see your private key. Remember: keep your and your private key with anyone else. Also, be sure you're connected to the Goerli testnet, not the mainnet, as shown in the image below. private key safe never share Now that we’ve successfully configured our project, create a new TypeScript file at the root level. nft.ts Your project structure should look similar to the one below. Setup Infura Authentication Authentication from inside our dApp requires our PROJECT_ID and PROJECT_SECRET. We’ll load these from our new .env file. Create an auth object inside the using the following code snippet: nft.ts import { config as loadEnv } from "dotenv";
import { SDK, Auth, Metadata, TEMPLATES } from "@infura/sdk";

// load environment variables from .env file
loadEnv();

// Create an instance of the Auth class 
const auth = new Auth({

  // set the projectId taken from the INFURA_PROJECT_ID environment variable 
  projectId: process.env.INFURA_PROJECT_ID,

  // set the secretId taken from the INFURA_PROJECT_SECRET environment variable 
  secretId: process.env.INFURA_PROJECT_SECRET,

  // set the private key taken from the WALLET_PRIVATE_KEY environment variable 
  privateKey: process.env.WALLET_PRIVATE_KEY,

  // set the rpcUrl taken from the EVM_RPC_URL environment variable 
  rpcUrl: process.env.EVM_RPC_URL,

  // set the chainId for the Goerli testnet
  chainId: 5, // Goerli

  // set the options for IPFS
  ipfs: {

    // set the project Id taken from the INFURA_IPFS_PROJECT_ID environment variable
    projectId: process.env.INFURA_IPFS_PROJECT_ID,

    // set the API key secret taken from the INFURA_IPFS_PROJECT_SECRET environment variable
    apiKeySecret: process.env.INFURA_IPFS_PROJECT_SECRET,
  },
});

// Instantiate the SDK
const sdk = new SDK(auth); Configure the file as shown. (You might get an error but keep going.) is a configuration file for TypeScript projects. It’s used to specify the compiler options and files that should be included in the project. tsconfig.json tsconfig.json Configure your with the following code snippet: tsconfig.json {
        "compilerOptions": {

          "target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */

          "module": "ES2022", /* Specify what module code is generated. */

          // "rootDir": "./",                                  /* Specify the root folder within your source files. */

          "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */

          "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */

          "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */

          /* Type Checking */

          "strict": true, /* Enable all strict type-checking options. */

          "skipLibCheck": true /* Skip type checking all .d.ts files. */
      }
} Next, add the module to the file using the following code snippet: type package.json //...

"type": "module",
"scripts": {},

//... Create Token Metadata Now we’re done configuring. Let’s get to the exciting stuff! First, we’ll create the token metadata. Token metadata refers to additional information or data associated with a token (typically an ERC-721 or ERC-1155 token on the Ethereum blockchain). This metadata can include information such as the token's name, symbol, image, and other attributes that describe the token or give it context. The metadata is stored on the blockchain and is typically represented as a URI or a URL that points to a JSON file containing the metadata. Inside the , add the following code snippet. It will create and store the token metadata. The metadata class is from the Infura NFT SDK. nft.ts file (Note: The external_url is just for demo purposes here and can be replaced.) consensys.net // Define the properties of the token, including its description, external URL, image, name, and attributes
const tokenMetadata = Metadata.openSeaTokenLevelStandard({

  description: "Fantastic creature of different emojis",

  external_url: "https://consensys.net/",

  image: await sdk.storeFile({

    // Store the image from the given URL
    metadata: "https://res.cloudinary.com/olanetsoft/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1672327921/demo.jpg",

  }),
  name: "Kandy Jane",
  attributes: [],
});

// Log the token metadata object to the console
console.log("Token Metadata: ", tokenMetadata);


// Store the token metadata and log the result
const storeTokenMetadata = await sdk.storeMetadata({ metadata: tokenMetadata });

console.log("Store Token Metadata: ", storeTokenMetadata); Create the Contract Metadata Contract metadata refers to additional information or data associated with a smart contract on a blockchain network. This metadata can include information such as the contract's name, symbol, version, and other attributes that describe the contract or give it context. The metadata is stored on the blockchain and is typically represented as a URI or a URL that points to a JSON file containing the metadata. Create contract metadata using the following code snippet: //...

// Define the properties of the collection, including its description, external URL, image, name, and attributes
const collectionMetadata = Metadata.openSeaCollectionLevelStandard({

  name: "Emojis collection", // Sets the name of the collection to "Emojis collection"

  description:
    "A small digital image or icon used to express an idea or emotion in electronic communication. Emoji's come in many forms, such as smiley faces, animals, food, and activities. ", // Sets the description of the collection
  image: await sdk.storeFile({

    // Sets the image property of the collection using the storeFile method
    metadata:
"https://res.cloudinary.com/olanetsoft/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1672327921/demo.jpg", // The URL of the image file
  }),

  external_link: "https://google.com/", // Sets the external link property of the collection
});

// Logs the collection metadata to the console
console.log("Collection Metadata:- ", collectionMetadata); 

// stores the metadata using the storeMetadata method
const storeMetadata = await sdk.storeMetadata({ metadata: collectionMetadata }); 

// Logs the store metadata to the console
console.log("Store Metadata: ", storeMetadata); This code snippet above creates an object using the method from the Metadata class. The method creates standard collection-level metadata compatible with , a leading marketplace for NFTs. It sets the collection's name, description, image, and external link properties; stores the metadata using the method; then logs it and stores it in the console for . collectionMetadata openSeaCollectionLevelStandard openSeaCollectionLevelStandard OpenSea storeMetadata debugging Create a New Contract and Mint an NFT Add the following code to create a new contract and mint an NFT using the Infura NFT SDK. Most of this functionality comes to us from our new NFT SDK! //...

// Create a new contract
const newContract = await sdk.deploy({   // deploys a new contract using the sdk.deploy method

  template: TEMPLATES.ERC721Mintable,     // sets the template for the contract to ERC721Mintable
  params: {
    name: "1507Contract",                  // sets the name of the contract as "1507Contract"
    symbol: "EMOJI",                        // sets the symbol of the contract as "EMOJI"
    contractURI: storeMetadata,             // sets the contract URI with the storeMetadata
  },
});

console.log("Contract Address: \n", newContract.contractAddress);  // logs the contract address to the console

// mint an NFT
const mint = await newContract.mint({  // mints a new NFT using the mint method from the new contract

  publicAddress:
    process.env.WALLET_PUBLIC_ADDRESS ??

    "0x510e5EA32386B7C48C4DEEAC80e86859b5e2416C", // sets the public address of the wallet, if not set it will use the given address

  tokenURI: storeTokenMetadata,                // sets the token URI with the storeTokenMetadata

});

const minted = await mint.wait();            // waits for the minting process to complete

console.log("Minted: ", minted);               // logs the minted NFT to the console This code creates a new contract using the method and sets the template for the contract to . Then it sets the contract's name, symbol, and contract URI. The contract address is logged for debugging. sdk.deploy ERC721Mintable It then mints a new NFT using the method from the new contract and sets the wallet's public address. If not specified, it uses the given address and then sets the token URI with the . mint storeTokenMetadata Finally, it waits for the minting process to complete and logs the minted NFT to the console. Let’s test it out! ts-node-esm nft.ts You should see something similar to what is shown below: Verify Contract on Account and Goerli Etherscan Finally, let’s verify the contract using a blockchain explorer on the . Go to the and paste the transaction hash from your output above (as shown below). Goerli Etherscan Goerli Ethereum testnet site You should see the details. That was easy! We successfully utilized the Infura NFT SDK to build, deploy, and mint an NFT on the Goerli testnet. Import token on MetaMask Let’s look at our new NFT from a front-end perspective using MetaMask. First, we have to import our wallet to MetaMask. Click “Import Tokens”, as shown in MetaMask. (Be sure you are connected to the Goerli Testnet as shown.) Copy and paste the contract address to import your token on MetaMask, as shown below. And there it is! An easy and fast way to add NFTs to your dApps. You can use the SDK now to manage the NFTs and more ( ). see the docs for current capabilities Verify Minted NFT on OpenSea We’ve successfully imported the minted NFT on MetaMask, but now let’s verify on . Connect your wallet and view your new NFT. You should have something similar to what is shown below. OpenSea tesnet For reference, to the NFT created. You can find the complete code on a GitHub repository . here’s the OpenSea link here Conclusion In conclusion, the new Infura NFT SDK for TypeScript is a powerful tool for developers looking to incorporate NFTs into their dApps. With its easy-to-use functions and comprehensive features, this SDK makes it simple to deploy, mint, and manage NFTs on the Ethereum blockchain. ! Sign up and start building I'd love to connect with you on | | | Twitter LinkedIn GitHub Portfolio See you in my next blog article. Take care!!! Also published . here

Easily Create An NFT App Using The New Infura NFT SDK TypeScript

So far in this blog series, we've created our first live streaming channel, learned how to create a playback experience in the browser, and enhanced that experience with the Amazon Interactive Video Service (Amazon IVS) player SDK. In the next few posts, we're going to look at adding some interactivity to our playback experience. Live streaming is clearly popular, but it's more than just the video that appeals to viewers. Interacting with the broadcaster and other viewers is a major reason so many people keep coming back to certain streams and streamers. Amazon IVS gives us a few pretty amazing features that enable interactivity, and one of the cooler elements that we can use to enhance our live stream is (obligatory " "). timed metadata official doc link Timed Metadata? Timed metadata is a way to embed information in your live stream at a specific point in time. The metadata that you publish becomes a part of the video stream itself since it uses ID3 tags embedded directly into the video segments. That means they are available in later on if we record our live streams. ID3 tags? Ever wonder how your music player knows the artist, song title, album and more about the song it’s playing? Audio files contain a small chunk of data that contains this information. Audio players read this data and display it! What Is It Good For? All kinds of stuff! Using timed metadata, we can create an interactive experience for our viewers outside of the video player. Imagine a game show live stream that can render questions in the browser when the host asks them. Think about a live shopping experience that updates the page with product images, reviews, pricing information, or discount codes as the presenter is demoing the product. What about updating leaderboards, box scores, detailed stats during a live streamed sporting (or e-sports) event? Picture a live streamed bike race that broadcasts the rider’s GPS location with the stream and display it in real time on a map. There are so many use cases, and I’m sure you’ve already thought of a few for your own applications. Enough talk, let’s build something! Listening For Timed Metadata Let's head back once again to the Amazon IVS page. Notice that there is a test stream listed here that contains timed metadata. Nice! We'll plug this into our Amazon IVS player example that we've been working with and build upon it. Here's how that looks: test streams <video id="video-player" controls autoplay playsinline></video> const videoEl = document.getElementById('video-player');
const streamUrl = 'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8';
const ivsPlayer = IVSPlayer.create();
ivsPlayer.attachHTMLVideoElement(videoEl);
ivsPlayer.load(streamUrl);
ivsPlayer.play(); This stream is an example of a “live trivia” stream where the host reads a few trivia questions. A timed metadata event is embedded at the exact point in time that the host reads a trivia question. We can listen for, and respond to this event. If you remember from our last post, we can use on the Amazon IVS player to listen for various events, and ( ) is one of those events. addEventListener() TEXT_METADATA_CUE docs ivsPlayer.addEventListener(IVSPlayer.PlayerEventType.TEXT_METADATA_CUE, (e) => {
    console.log(e);
}); If we play our stream, we can check the console after the host reads a question and observe the logged event. It should look similar to this: {
    "startTime": 61.04233333333333,
    "endTime": 61.04233333333333,
    "type": "TextMetadataCue",
    "description": "",
    "text": "{\"question\": \"From what language does the term R.S.V.P. originate from?\",\"answers\": [ \"Russian\", \"Italian\", \"French\", \"Portuguese\" ],\"correctIndex\": 2}",
    "owner": "metadata.live-video.net"
} The key represents the time since the stream started the event took place (61 seconds in the example above). The interesting bit we're after here is the key, which contains the metadata. Here, it's a JSON string, but it can be whatever you need it to be. startTime text The only limitation on timed metadata is that the payload must be less than 1kb. That might sound small, but metadata isn't intended to deliver large payloads. We can perform additional steps on the client side if necessary. For example, we could pass a question ID in the example above instead of passing the question, answers, and correct answer and fetch the rest of the information from client memory or a remote API call. But since we've got the entire trivia payload, let's parse the metadata. const metadata = JSON.parse(e.text); The parsed metadata structure uses the following structure: {
    "question": "From what language does the term R.S.V.P. originate from?",
    "answers": [
        "Russian",
        "Italian",
        "French",
        "Portuguese"
    ],
    "correctIndex": 2
} Rendering the Question and Answers So we've got the questions, answers, and the index of the correct answer. Certainly our viewers would be really honest and never poke around in the browser's developer tools to view the correct answer, so we'll proceed with our trivia app on the honor system. Let's render the question and answers. First, we'll add some HTML markup (styled with Bootstrap) below the video player. <div class="card mt-3">

    <div class="card-header bg-dark text-white">
        <h4>Question</h4>
    </div>

    <div class="card-body">

        <div class="card-title">
            <h4 id="question"></h4>
        </div>

        <div id="answerContainer">
            <ul id="answers" class="list-group"></ul>
        </div>

    </div>

    <div class="card-footer text-center">
        <button class="btn btn-dark" id="check-answer-btn" disabled>Submit</button>
    </div>

</div> So we've got a container for our question, and the answers. We've also added a button to check the answer that is initially . Let's add some code inside of our event handler to store the correct answer in the global scope so that we can check the user's answer later on. disabled window.correctIndex = metadata.correctIndex; Now we can enable the submit button, display the question, and clear out the answer container. // enable the submit button
document.getElementById('check-answer-btn').removeAttribute('disabled');

// display the question
document.getElementById('question').innerHTML = metadata.question;

// clear previous answers
const answersEl = document.getElementById('answers');
answersEl.replaceChildren(); Now we can loop over all the answers in the metadata object and render them to the page. // render the answers for this question
metadata.answers.forEach((a, i) => {
    // create an answer container
    const answerEl = document.createElement('li');
    answerEl.classList.add('list-group-item');

    // radio button to select the answer
    const answerRadio = document.createElement('input');
    answerRadio.setAttribute('name', 'answer-input');
    answerRadio.type = 'radio';
    answerRadio.id = `answer-input-${i}`;
    answerRadio.classList.add('me-2', 'form-check-input');
    answerRadio.dataset.index = i;
    answerEl.appendChild(answerRadio);

    // label to display the answer text
    const answerLbl = document.createElement('label');
    answerLbl.setAttribute('for', `answer-input-${i}`);
    answerLbl.innerHTML = a;
    answerEl.appendChild(answerLbl);

    answersEl.appendChild(answerEl);
}); Checking for the Correct Answer Now our application will display the question and answers on the page. We'll need a function that can check whether the user's answer is correct that will provide user feedback, so let's create that now. const checkAnswer = () => {
    // disable the submit btn
    document.getElementById('check-answer-btn').setAttribute('disabled', 'disabled');

    // check the current answer
    const selectedAnswer = document.querySelector('input[name="answer-input"]:checked');
    const selectedIdx = parseInt(selectedAnswer.dataset.index);

    // highlight the correct answer
    document.querySelector(`input[data-index="${window.correctIndex}"]`).nextSibling.classList.add('text-success');

    // if they're wrong, highlight the incorrect answer
    if (selectedIdx !== window.correctIndex) {
        selectedAnswer.nextSibling.classList.add('text-danger');
    }
} Don't forget to attach an event listener for the event on our button. We'll add that in our function. click Submit init() document.getElementById('check-answer-btn').addEventListener('click', checkAnswer); And we're ready to see it in action! If you're playing along at home, check your code against the code in the demo below. If not, check it out anyway to see the final solution. Give it a shot and see how many questions you can get right! Note, you may have to scroll down in the demo to see the question. Producing Timed Metadata We've looked at how to consume metadata, but we've not yet seen how to produce it. No worries - it's not that hard to do! There are several ways to produce timed metadata, and all of them require the . You can get this value from the Amazon IVS Management Console in the channel details, or via the AWS CLI. Channel ARN $ aws \
    ivs \
    list-channels \
    --filter-by-name [YOUR CHANNEL NAME] \
    --query "channels[0].arn" \
    --output text Check out the . Need to Install the CLI? install guide With the AWS CLI One way to produce timed metadata is to use the AWS CLI. I don't know if this is a method that you'd use very often, but for testing and debugging purposes, it's good to know how to do it. $ aws \
    ivs \
    put-metadata \
    --channel-arn [YOUR CHANNEL ARN] \
    --metadata '{"test": true}' . AWS CLI Docs With the Amazon IVS SDK Node SDK import AWS from 'aws-sdk';
const Ivs = new AWS.IVS({ region: 'us-east-1', credentials });

const putMetadata = async (metadata) => {
    const input = {
        channelArn: '[YOUR CHANNEL ARN]',
        metadata: JSON.stringify(metadata)
    };
    let output;
    try {
        output = await Ivs.putMetadata(input).promise();
    }
    catch (e) {
        console.error(e);
        if (e.name === 'ChannelNotBroadcasting') {
            output = { offline: true };
        }
        else {
            throw new Error(e);
        }
    }
    return output;
} . Node SDK docs Python SDK import boto3
client = boto3.client('ivs')

response = client.put_metadata(
    channelArn='[YOUR CHANNEL ARN]',
    metadata='{"python": true}'
)
print(response) . Python SDK Docs Other Languages Check the for the syntax to publish metadata events in your favorite language. SDK specific documentation Summary Timed metadata is infinitely cool and has many applications to make our live stream engaging and interactive. In our next post, we’re going to look at another way we can add interactivity to our live streams - Amazon IVS Chat! Also Published Here

Using Amazon IVS to Create Interactive Live Streaming Experiences with Timed Metadata

Uso de Amazon IVS para crear experiencias interactivas de transmisión en vivo con metadatos cronometrados

is a lightweight web framework capable of shipping highly performant websites with minimal (or non-existent) JavaScript bundles. In this guide, we’re going to create our content with Cosmic and retrieve it in our Astro project, allowing for quick and easy content creation and collaboration. The end result will be a clean and composable website that aces the lighthouse scores all across the board. Astro TL;DR Install the Cosmic template. Simple Astro Blog Download the Simple Astro Blog . source code Step 1: Configure your Astro project To create a new Astro project, run .  Astro provides a convenient to set up some boilerplate code and get your project configured quickly. You can choose from a few different templates, but in our case, we’re keeping it simple with the “Just the Basics” option configuring a nice organized directory, a few Astro components to reference, and an Astro config file. npm create astro@latest CLI tool If you are using Cosmic in this guide, make sure you install the : Cosmic NPM package # npm
npm install cosmicjs
# pnpm
pnpm add cosmicjs
# yarn
yarn add cosmicjs Next, we will create two items in our project directory. First, create a folder in the folder, and then create a file. After you’ve created this file, create a in the root of your directory. Here, we will store our environment variables from the Cosmic Bucket we’re about to set up, and in our file we will import the environment variables and create our API calls to retrieve our data. lib src cosmic.js .env cosmic.js Once you’ve created these two items, put them aside for now, as we go on to creating our Content Model in Cosmic. Step 1.5 (Optional): Adding Astro Integrations Astro provides some useful , allowing you to quickly configure your favorite UI libraries, SSR adapters, and other tools like and . For this guide, we encourage using both the and integrations as they will improve website performance and developer experience. integrations Astro Image Tailwind CSS Astro Image Tailwind CSS Using the Astro CLI, we can run the commands and , and Astro will install each individual package and update the file to support the integration. npx astro add image npx astro add tailwind astro.config.mjs Step 2: Configure a Cosmic Bucket What is a headless CMS? With a headless CMS, content is created using a dashboard and then delivered using an API. The content layer is separated from the presentation layer, making content flexible, reusable, and scalable. If you’d like to learn more about what a headless CMS is, we created explaining it. this concise article Create an account If you haven’t already, create a . Then navigate to the dashboard to create a new project. We’re going to start from scratch here, but you choose from a wide variety of templates by selecting “Start with a template” and clicking “Select Template” on the desired template. Name your project and Bucket Environment, then click “Save Bucket.” Cosmic account Creating an Object Let’s create a simple Object, click “Add Object Type” and then you will see that we can now setup our first Object. We’re going to call this Object “Posts”, which will contain multiple blog posts, so go ahead and select “Multiple” then under “Singular Name” type in “Post.” Our default fields will contain the and the , so you can leave these as they are. Slug field Content field Content Model The Content Model is where we design the structure of our content. We can use different like strings, numbers, and even media (images). From this structure, we can craft our API calls to retrieve this specific data and render it onto our application. Metafields Our Object will consist of: An Excerpt (text) A Cover Image (media) Once you’ve created these Metafields, click “Save Object Type.” Let’s create our first Post! Navigate to “Posts” in the sidebar and click “Add Post.” Fill in the , , and with some sample text. Then, upload an image for the and select “Publish.” Title Excerpt Content Cover Image Now that we’ve got our first published Object, we’re ready to tie it all together and get this data into our Astro application. Step 3: Retrieve data from the Cosmic API Before we leave the Cosmic dashboard, we need to grab a couple of things. On the sidebar, click on To make this easier, I’m going to rename the to something like then click “Save Settings” Settings>API Acess. Bucket Slug my-astro-blog . Now we’re going to take the and values and place them into our file in our Astro app. Bucket Slug Read Key .env # .env
PUBLIC_COSMIC_BUCKET_SLUG=my-astro-blog
PUBLIC_COSMIC_READ_KEY=<your_read_key_here> Once set, let’s go into the file we created in Step 1. We will import the Cosmic module, instantiate an variable and import our environment variables. Refer to for setting environment variables in Astro. cosmic.js api these docs // src/lib/cosmic.js
import Cosmic from "cosmicjs";
const api = Cosmic();

const bucket = api.bucket({
  slug: import.meta.env.PUBLIC_COSMIC_BUCKET_SLUG,
  read_key: import.meta.env.PUBLIC_COSMIC_READ_KEY,
}); Now that we’re all set up, let’s write our API call to get the Post we made in our dashboard. // src/lib/cosmic.js
export async function getAllPosts() {
  const data = await bucket.objects
    .find({
      type: "posts",
    })
    .props("title,slug,content,metadata")
  return data.objects;
} Using Cosmic’s , we can the specific type of Object in our API, which is “posts” (the slug of the Object itself), and set the to all of the parameters we set up when we created our Object earlier. In our case, we want to retrieve the , , , and the Cover Image, which lives inside of the chaining methods find props title slug content metadata. Remember that the default parameters are accessible at a higher level than the metadata, and the metadata itself comes from the custom metafields you create within an Object. Grabbing the Cover Image would look like this: . metadata.cover_image.imgix_url Rendering the data Now we can pull in the API call onto one of our Astro pages. By calling the function in the “helmet” of our Astro page or component, we can access all of the content we create in Cosmic. getAllPosts // src/pages/index.astro
import { getAllPosts } from "../lib/cosmic"
const data = await getAllPosts() To render out a list of the posts we make, we can create a minimal Card component like this: // src/components/Card.Astro
---
const { href, title, body } = Astro.props
---
<li class="bg-white rounded-md shadow-md hover:shadow-xl transition">
  <a href={`/blog/${href}`}>
    <div class="flex flex-col h-full gap-y-2 p-6">
      <h2 class="font-semibold text-xl pr-4 pt-2">
        {title}
      </h2>
      <p>
        {body}
      </p>
    </div>
  </a>
</li> Note that this is an Astro component. We can pass props to it by defining a de-structured object to . This functionality is done within the dashes at the top of the component, or the “helmet.” Astro.props Going back to our index.astro page, let’s pass the data from Cosmic and render the card. // src/pages/index.astro
---
import { getAllPosts } from "../lib/cosmic"
import Card from "../components/Card.astro";
const data = await getAllPosts()
---

<section>
    <ul class="grid md:grid-cols-2 gap-8">
      {
        data.map((post) => (
          <Card
            title={post.title}
            href={post.slug}
            body={post.metadata.excerpt}
          />
        ))
      }
    </ul>
  </section> You’ll notice that we are passing the slug of our Cosmic post into the prop. We can generate dynamic routes easily with Astro. We do this using , which will generate dynamic page routes at build time. href getStaticPaths // src/pages/blolg/[slug].astro
---
import { getAllPosts } from "../../lib/cosmic";
import { Image } from "@astrojs/image/components";

export async function getStaticPaths() {
  const data = (await getAllPosts()) || [];

  return data.map((post) => {
    return {
      params: { slug: post.slug },
      props: { post },
    };
  });
}

const { post } = Astro.props;
---

<article>
  <section class="border-b pb-8">
    <h1 class="text-4xl font-bold">{post.title}</h1>
    <div class="my-8"></div>
  </section>
  <Image
    src={post.metadata.cover_image.imgix_url}
    format="webp"
    width={1200}
    aspectRatio={16 / 9}
    quality={50}
    alt=""
    class={"rounded-md shadow-lg my-12"}
  />
  <p>{post.content}</p>
</article> Using , we are generating the path for each “Post” in Cosmic using it’s . This happens at build time and uses the data stored in . We then pass the data for each “Post” through to the and further set the { } object to We can re-use our HTML template below the helmet for each blog post we render. getStaticPaths slug params props post Astro.props. After running a mobile Lighthouse report for the application, we have achieved 100s all across the board with little effort. Conclusion I hope you found this guide helpful to learn how Astro provides ease of use in development, easy integration with a headless CMS, and the capability to achieve high-performing Lighthouse scores out of the box. You can check out the template used in this guide here Also Published Here

Adding a Headless CMS to Astro in 3 Steps

Searching and filtering data is a common feature for websites and apps, especially in e-commerce. In this article, we will discuss how to build a search and filter feature for products using React. The product data will be queried from a ( ) with the UI updated instantly. We will also talk about how the debounce technique handles state management using Hooks and API usage optimization. headless CMS Cosmic Install the Template Demo Content To get started with this example, install the template which includes the demo content that we will use for the search and filter functionality. Or you can skip this step and just follow along with the code. uNFT Marketplace Log in to your . Cosmic account Go to the and click “Select Template”. uNFT Marketplace Follow the steps to create a new Project and Bucket and import the demo content. See the demo content now installed in your Bucket. Go to Products and note the Metafields which contain the data that we will use for our React search/filter feature. Create the Search/Filter React App. To make things easier, we’ve already built a small app with the search/filter feature available on . StackBlitz Using the Cosmic API, we can filter the product results by search criteria. Now, let’s see how it works. Create the Search/Filter Query To filter the products in our feature, we will need to send a request to the Cosmic API to get only the products that match the search criteria. We will use to do this. Cosmic Queries To create the query, we create an object with properties that match up with the Object Metadata values that we are searching for like , , and . query color price categories Here is an example with comments to explain what each query property does. const query = {
  // Find Objects in products Object Type
  "type":"products"
  // Find products with a price greater than or equal to 10 and less than or equal to 100
  "metadata.price":{
    "$gte":10,
    "$lte":100
  },
  // Find products that have the color Blue
  "metadata.color":"Blue",
  // Find products that have the category Sale (uses category Object id)
  "metadata.categories":"627e23f18bb13a000911ea55",
} After we build our query, we send the query to the using the method. We use to limit the response to only the properties we need. Here's an example of what the implementation looks like. Cosmic NPM module getObjects props import Cosmic from 'cosmicjs';

const bucket = Cosmic().bucket({
  slug: "YOUR_COSMIC_BUCKET_SLUG",
  read_key: "YOUR_COSMIC_BUCKET_READ_KEY",
});

const params = {
  query,
  props: 'title,slug,metadata,created_at'
}
const data = await bucket.getObjects(params); Enter fullscreen mode. Exit fullscreen mode. Now, let’s get into the details about how React handles the UI state updates using Hooks. React Hooks React uses one-way data flow, passing data down the component hierarchy from parent to child components and Hooks allows function components to have access to state. For every search and filter update to the input fields, we are adding state to the React application using the state hook . useState // App.js
const [search, setSearch] = useState('');
const [{ min, max }, setRangeValues] = useState({ min: '', max: '' }); Enter fullscreen mode. Exit fullscreen mode. To display the filtered data on the webpage, we map over the array and display the appropriate list of products. filterResult // App.js
<div className={styles.list}>
  {filterResult?.length ? (
    filterResult?.map(product => (
      <Card className={styles.card} item={product} key={product.slug} />
    ))
  ) : (
    <p className={styles.inform}>Try another category!</p>
  )}
</div> React Custom Hook useDebounce When the user types something in the input field, the state of the variable will be updated. To improve the search and filter experience, we will create a . search React Custom Hook useDebounce This hook enables a debounce that clears any fast-changing value. The debounced value will only reflect the latest value when the hook has not been called for the specified time period. When used in conjunction with , you can ensure that expensive operations like API calls are not executed too frequently. useDebounce useEffect // utils/hooks/useDebounce.js
import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    // Update debounced value after delay
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cancel the timeout if value changes (also on delay change or unmount)
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]); // Only re-call effect if value or delay changes

  return debouncedValue;
}

export default useDebounce; The example below allows you to search the Cosmic API and uses to prevent API calls from being fired on every keystroke. The goal is only to have the API call fire when the user stops typing, so we aren't hitting the Cosmic API rapidly. useDebounce // App.js
const [search, setSearch] = useState('');

// Debounce search term so that it only gives us latest value
// If search has not been updated within last 500ms, query the Cosmic API
const debouncedSearchTerm = useDebounce(search, 500);

useEffect(() => {
  let isMount = true;

  if (isMount && debouncedSearchTerm?.length) {
    handleFilterDataByParams({
      search: debouncedSearchTerm,
    });
  }

  return () => {
    isMount = false;
  };

}, [debouncedSearchTerm]); Conclusion Searching and filtering is a common feature for many websites and apps which can prove challenging to build. But by using the right tools and techniques, building this feature can be made easier and more enjoyable for the end user. In this article, we showed you how you can use Cosmic Queries, React Hooks, and debounce to create a great search and filter experience. The examples explained in this article are all part of the . You can view the full demo , install the in your Cosmic dashboard, or clone the . To learn more about Cosmic Queries, go to the . uNFT Marketplace app template here app template GitHub repository Cosmic documentation If you have any questions about Cosmic integration and features, you can reach out to them on , , or follow the . Twitter Slack YouTube channel Also published here

How to Search and Filter Data Using React Hooks and a Headless CMS 

For this tutorial, I will show you how to build a marketplace app using Next.js, Cosmic, and Stripe. After we are done, you will be equipped with a foundation to build your own projects using these powerful tools. Let’s get started. Bonus features include deploying to Vercel, dark and light mode, and using to measure the performance of the website’s , which dramatically increases the user's experience and in SEO search results (this app's Lighthouse score displayed below). Lighthouse core web vitals metrics website visibility Guys, if you like it please on . upvote Product Hunt Tools we’ll be using Next.js - scalable and high-performance framework for modern web development. Provides a large set of features, such as hybrid rendering, route prefetching, automatic image optimization, and internationalization, out of the box. React.js Cosmic - fast, fully managed headless CMS that enables us to quickly manage and create website content including UGC (user-generated content). Stripe - payments infrastructure that provides API tools to receive one-time and subscription payments. TL;DR Check out the code View the live demo Install the app template First, we need to provide architecture and design Designing is fundamentally about taking things apart, in such a way that they can be put back together. Separating things into things that can be composed that's what design is. — . Rich Hickey stands for model-view-controller software design pattern MVC Here's what each of those components means: : The backend that contains all the data logic. Cosmic Object Types ( help us create dynamic, scalable data structures and the essence of their transformations is independent of the outer world. Model Multiple or Singleton) : The frontend or graphical user interface (GUI). For it, we use React, which is described as the “ layer in the MVC. View (UI) V” : The brains of the application control how data is displayed. We use React’s Context API to decouple the state from the presentation and facilitate business logic re-use. Controller View MVC pattern is used for modern web applications because it allows the application to be scalable, maintainable, and easy to expand. Setting up a project with Next.js sets out to improve two things: and is a complete toolkit to build blazing fast React apps. Next.js offers an abstraction that solves the most common, mundane, and complex tasks like routing, internalization, and image optimization. Next.js developer and user experiences By default, Next.js pre-renders every page. This means that Next.js , instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and . generates HTML for each page in advance SEO Next.js has two forms of pre-rendering: and . Static Generation (SSG) Server-side Rendering (SSR) is the pre-rendering method that generates the HTML at . The pre-rendered HTML is then on each request. Static Generation build time reused is the pre-rendering method that generates the HTML on . Server-side Rendering each request In our project, we use for dynamic data and pre-render pages that will always be up-to-date. Server-side Rendering To get started, we'll create a Next.js app that includes tooling and configurations. For this tutorial, you'll need Node.js 12.22.0 or a later version. Open the terminal, paste or type npx create-next-app@latest unft-marketplace
# or
yarn create next-app unft-marketplace Change into the new directory and install the dependencies using a package manager like , , or and then start the app in the development mode: npm yarn pnpm cd unft-marketplace
npm install cosmicjs stripe @stripe/stripe-js sass

npm run dev
# or
yarn dev To use the template UI you need to clone it on . Open the terminal, paste or type this code to install all dependencies, and run it. GitHub git clone https://github.com/cosmicjs/unft-marketplace
cd unft-marketplace

yarn install
yarn dev Open http://localhost:3000 in your browser to see the ascetic home page. Managing API keys/secrets with Next.js When working with API keys and secrets, we need to make sure we keep them secret and out of version control, while conveniently making them available as variables. You'll need to create a .env file at the root of the project. Log in to Cosmic and from takes the following values: .env Bucket Settings > API Access NEXT_PUBLIC_COSMIC_BUCKET_SLUG=your_cosmic_slug
NEXT_PUBLIC_COSMIC_READ_KEY=your_cosmic_read_key
COSMIC_WRITE_KEY=your_cosmic_write_key

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
STRIPE_SECRET_KEY=your_stripe_secret_key The prefix automatically exposes this variable to the browser. Next.js will insert the value for these into the publicly viewable source code at build/render time. Therefore make sure to not use this prefix for secret values! In the same way login to Stripe and section take your . NEXT_PUBLIC_ for developers keys Next.js API routes Next.js API Routes to create API endpoints inside the Next.js app. They will be deployed as (also known as ). In our case, for filtering Cosmic content by parameters we’ll create a file called in directory that has the following format: Serverless Functions Lambdas filter.js pages/api //pages/api/filter
import Cosmic from 'cosmicjs';

const bucket = Cosmic().bucket({
// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login
  slug: '',
  read_key: '',
} )

export default async function filterHandler(req, res) {
  const { query: {min, max, color, category, search} } = req;

  let queryParam = {};

  if(typeof min !== 'undefined' || typeof max !== 'undefined') {
    queryParam = { ...queryParam, "metadata.price": {"$gte": typeof min !== 'undefined' ? Number(min) : 1, "$lte": typeof max !== 'undefined' ? Number(max) : 1000000000 },}
  }

  if(typeof color !== 'undefined') {
    queryParam = { ...queryParam, "metadata.color": color,}
  }

  if(typeof category !== 'undefined') {
    queryParam = { ...queryParam, "metadata.categories": category,}
  }

  if(typeof search !== 'undefined') {
    queryParam = { ...queryParam, "title": { "$regex": search, "$options": "i" },}
  }

  const params = {
    query: {
      ...queryParam,
      type: 'products',
    },
    props: 'title,slug,metadata,created_at',
  }

  try {
    const data = await bucket.getObjects(params);
    res.status(200).json(data);
  } catch (error) {
    res.status(404).json(error);
  }
} Note that: is an instance of http.IncomingMessage, plus some pre-built middlewares. req is an instance of http.ServerResponse, plus some helper functions. res Cosmic features overview and integration is a great headless CMS that enables us to model, manage, and store our content and media in a convenient hosted dashboard, then fetch our content using available API tools. The API provides search and filtering capabilities out of the box which makes building search and filter features in our app easy. . Cosmic Cosmic provides full modern functionality and features for creating interactive, independent, and dynamic websites - Build out the schema, models, and controllers for the API from the admin dashboard. Cosmic offers both a API for our convenience. Customizable API REST and GraphQL - Call back anywhere you need, to get the functionality you want, out of the box. - allow you to find the correct asset with your data by . You can use some advanced queries to create more granular search capabilities. Webhooks Queries searching, filtering, and sorting - You can enable user-generated content in your app using the Cosmic API. Users can upload and create interactive content within your defined data models. Cosmic is not only a fully-managed content management system, but the API can be used to create user-generated content experiences as well. Add Media and Object Getting started with Cosmic The first step is creating a free Cosmic account into Cosmic Dashboard and a new Project. Let's select the "Start from scratch" option. Cosmic Object Types ( help us create dynamic, scalable, reusable data structures and our content model. Creating model sections, easy from scratch, defines the "Metafields" in the "Content Model". For a reusable model used across multiple Objects choose . For our project, we will create a reusable Object Type model using with . This will enable us to add or remove to enable searching, and filtering by category. Multiple or Singleton) Multiple Object Type Products Multiple Object Relationships Categories Products Categories and After creating the content model for our Products, you can begin adding Products from the dashboard like this: You can define other content models by creating Object Types following this schema design: Singleton for a unique model, Multiple for reusable models. Using Cosmic , you can quickly find the specific content according to criteria. queries search, filter, and sorting User-generated content Using the Cosmic capabilities to logged-in users can upload and create their own form-submitted content. For our use case, the user can create new to add to the marketplace for sale. Add Media and Objects, Products Uploading files and dynamic content to Next.js requires API Routes as we will need to store secret keys securely in server-side environment variables. Here is a brief overview of how to upload files with React and Next.js API routes using , , and the Cosmic method. formidable fs bucket.addMedia //api/upload.js
import Cosmic from 'cosmicjs';
import formidable from 'formidable';
import fs from "fs";

const bucket = Cosmic().bucket({
  slug: process.env.NEXT_PUBLIC_COSMIC_BUCKET_SLUG,
  read_key: process.env.NEXT_PUBLIC_COSMIC_READ_KEY,
  write_key: process.env.COSMIC_WRITE_KEY,
});

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function uploadHandler( req,res ) {
  const form = new formidable.IncomingForm({ multiple: false });

  try {
    form.parse( req, async ( err, fields, files ) => {
      if (err) return reject(err);
      const cosmicRes = await saveFile(files.file);
      res.status( 200 ).json(cosmicRes);
    } );

  } catch (error) {
    res.status(404).json(error.message)
  }
}

const saveFile = async ( file ) => {
  const filedata = fs.readFileSync( file?.filepath );
  const media_object = { originalname: file.originalFilename, buffer: filedata };

  try {
    // Add media to Cosmic Bucket
    const cosmic_res = await bucket.addMedia({
      media: media_object
    } );
    await fs.unlinkSync(file?.filepath);
    return cosmic_res;
  } catch (error) {
    console.log(error);
    return;
  }
}; Stripe overview and integration provides a way to capture payments in your application. Much like Cosmic has done all of the heavy liftings for content infrastructure, Stripe provides the e-commerce infrastructure and tools to build delightful payment experiences for your customers, irrespective of the service or product being sold. Stripe Due to PCI compliance requirements, the Stripe.js library has to be loaded from Stripe's servers. This creates a challenge when working with server-side rendered apps, as the window object is not available on the server. To help us manage that complexity, Stripe provides a that allows importing Stripe.js like an ES module: loading wrapper //lib/getStripe
import { loadStripe } from '@stripe/stripe-js';

let stripePromise;

const getStripe = () => {
  if(!stripePromise) {
    stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
  }

  return stripePromise;
}

export default getStripe; Stripe.js is loaded as a side effect of the statement. import '@stripe/stripe-js' Create the Stripe checkout session Add an endpoint on your server that creates a . A Checkout Session controls what your customer sees on the payment page such as line items, the order amount and currency, and acceptable payment methods. Also, you can enable or disable payment methods directly in the . Checkout Session Stripe Dashboard //api/stripe
import Stripe from 'stripe';

const stripe = new Stripe( process.env.STRIPE_SECRET_KEY );

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const params = {
        submit_type: 'pay',
        mode: 'payment',
        payment_method_types: ['card'],
        billing_address_collection: 'auto',
        shipping_options: [
          { shipping_rate: 'shr_1L4pafH6oGDppJjV9MrYC7z0' },
          { shipping_rate: 'shr_1L4pn4H6oGDppJjVBL7vPTk1' },
        ],
        line_items: req.body.map((item) => {
          const img = item.metadata.image.imgix_url;

          return {
            price_data: { 
              currency: 'usd',
              product_data: { 
                name: item.title,
                images: [img],
              },
              unit_amount: item.metadata.price * 100,
            },
            adjustable_quantity: {
              enabled:true,
              minimum: 1,
            },
            quantity: item.quantity
          }
        }),
        success_url: `${req.headers.origin}/`,
        cancel_url: `${req.headers.origin}/`,
      }

      // Create Checkout Sessions from body params.
      const session = await stripe.checkout.sessions.create(params);

      res.status(200).json(session);
    } catch (err) {
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
} Next steps Though this marketplace app is mainly a proof of concept to learn about these modern solutions, it is a good starter to build on. There is potential to add new features such as: User account page to display orders User profile page to show off purchased jpegs Comment system to capture reviews and conversations Bitcoin / Lightning option for making purchases Conclusion I hope you enjoyed this tutorial exploring how to use powerful API-first tools to build a full-featured marketplace application. This dynamic, functional, customizable, and fully integrated uNFT marketplace, powered by can be customized for other types of businesses as well. Please feel free to , and use it how you prefer! Next.js, Cosmic, and Stripe fork the code

Building an uNFT Marketplace Using Next.js, Cosmic and Stripe 

Overview Metadata is the data that constitutes the data. In database terms, any data that describes the database is metadata. Column names, database names, usernames, table names, etc., and data customization library tables that store information about database objects are metadata. ShardingSphere core functions such as data sharding, encryption, and decryption are all based on the database metadata. This shows that metadata is the core of the ShardingSphere system and is also the core data of every data storage-related middleware or component. With the injection of metadata, it is equivalent to having a nerve center for the whole system, which can be combined with metadata to perform personalized operations on libraries, tables, and columns, such as data sharding, data encryption, SQL rewriting, etc. For the ShardingSphere metadata loading process, it is first necessary to clarify the type and hierarchy of metadata in ShardingSphere. The metadata in ShardingSphere is mainly based around the , the core of which is the , which is the metadata of the database and is also the top-level object of the data source metadata. The structure of the database metadata in ShardingSphere is shown as below, for each layer, the upper layer data comes from the assembly of the lower layer data, so we use the following bottom-up hierarchy to analyze one by one. ShardingSphereMetaData ShardingSphereSchema ColumMetaData and IndexMetaData and are the basic elements that make up . In the following, we will analyze the structure of the two metadata types and the loading process separately. has the following main structure: ColumMetaData IndexMetaData TableMetaData ColumMetaData public final class ColumnMetaData {
    // 
    private final String name;
    // 
    private final int dataType;
    // 
    private final boolean primaryKey;
    // 
    private final boolean generated;
    //
    private final boolean caseSensitive;
} The loading process is mainly encapsulated in the method, and its main process is to load the metadata of all the columns under a table name by getting the metadata matching the table name through the database link. The core code is as follows: org.apache.shardingsphere.infra.metadata.schema.builder.loader.ColumnMetaDataLoader#load /**
 * Load column meta data list.
 *
 * @param connection connection
 * @param tableNamePattern table name pattern
 * @param databaseType database type
 * @return column meta data list
 * @throws SQLException SQL exception
 */
public static Collection<ColumnMetaData> load(final Connection 
connection, final String tableNamePattern, final DatabaseType 
databaseType) throws SQLException {
    Collection<ColumnMetaData> result = new LinkedList<>();
    Collection<String> primaryKeys = loadPrimaryKeys(connection, tableNamePattern);
    List<String> columnNames = new ArrayList<>();
    List<Integer> columnTypes = new ArrayList<>();
    List<String> columnTypeNames = new ArrayList<>();
    List<Boolean> isPrimaryKeys = new ArrayList<>();
    List<Boolean> isCaseSensitives = new ArrayList<>();
    try (ResultSet resultSet =
 connection.getMetaData().getColumns(connection.getCatalog(),
 connection.getSchema(), tableNamePattern, "%")) {
        while (resultSet.next()) {
            String tableName = resultSet.getString(TABLE_NAME);
            if (Objects.equals(tableNamePattern, tableName)) {
                String columnName =
 resultSet.getString(COLUMN_NAME);
                columnTypes.add(resultSet.getInt(DATA_TYPE));
                columnTypeNames.add(resultSet.getString(TYPE_NAME));
                isPrimaryKeys.add(primaryKeys.contains(columnName));
                columnNames.add(columnName);
            }
        }
    }
    try (Statement statement = connection.createStatement();
 ResultSet resultSet =
 statement.executeQuery(generateEmptyResultSQL(tableNamePattern,
 databaseType))) {
        for (int i = 0; i < columnNames.size(); i++) {

            isCaseSensitives.add(resultSet.getMetaData().isCaseSensitive(resultS
et.findColumn(columnNames.get(i))));
            result.add(new ColumnMetaData(columnNames.get(i), 
columnTypes.get(i), isPrimaryKeys.get(i),
                    resultSet.getMetaData().isAutoIncrement(i + 1), 
isCaseSensitives.get(i)));
        }
    }
    return result;
} is the name of the index in the table, so there are no complex structural properties, just a name. Instead of going into detail, we rather focus on the loading process. Its loading process is similar to that of the column, and the main process is in the method. The basic process is also through the database link to obtain core in the organization of the relevant database and table metadata, and the implementation code is as follows: IndexMetaData org.apache.shardingsphere.infra.metadata.schema.builder.loader.IndexMetaDataLoader#load IndexMetaData IndexInfo public static Collection<IndexMetaData> load(final Connection connection, final String table) throws SQLException {
    Collection<IndexMetaData> result = new HashSet<>();
    try (ResultSet resultSet = connection.getMetaData().getIndexInfo(
connection.getCatalog(), 
connection.getSchema(), table, false, false)) {
        while (resultSet.next()) {
            String indexName = resultSet.getString(INDEX_NAME);
            if (null != indexName) {
                result.add(new IndexMetaData(indexName));
            }
        }
    } catch (final SQLException ex) {
        if (ORACLE_VIEW_NOT_APPROPRIATE_VENDOR_CODE != 
ex.getErrorCode()) {
            throw ex;
        }
    }
    return result;
} TableMetaData This class is the basic element of ShardingSphereMetaData and has the following structure: public final class TableMetaData {
    // Table Name
    private final String name;
    // Column Metadata
    private final Map<String, ColumnMetaData> columns;
    // Index Metadata
    private final Map<String, IndexMetaData> indexes;
    // Omit other methods
} From the above structure, we can see that is assembled from and , so the loading process of can be understood as an intermediate layer, and the specific implementation still depends on and to get the table name and related links for data loading. So the relatively simple loading process is mainly in the method, and its core loading process is as follows: TableMetaData ColumnMetaData IndexMetaData TableMetaData ColumnMetaDataLoader IndexMetaDataLoader TableMetaData org.apache.shardingsphere.infra.metadata.schema.builder.loader.TableMetaDataLoader#load public static Optional<TableMetaData> load(final DataSource 
dataSource, final String tableNamePattern, final DatabaseType 
databaseType) throws SQLException {
    // Get the Link 
    try (MetaDataLoaderConnectionAdapter connectionAdapter = new
MetaDataLoaderConnectionAdapter(databaseType, 
dataSource.getConnection())) {
        // Format fuzzy matching field of the table name, according to database type
        String formattedTableNamePattern = 
databaseType.formatTableNamePattern(tableNamePattern);
        // Load ColumnMetaData and IndexMetaData to assemble TableMetaData
        return isTableExist(connectionAdapter,
formattedTableNamePattern)
                ? Optional.of(new TableMetaData(tableNamePattern, 
ColumnMetaDataLoader.load(
                        connectionAdapter,
formattedTableNamePattern, databaseType),
IndexMetaDataLoader.load(connectionAdapter,
formattedTableNamePattern)))
                : Optional.empty();
    }
} SchemaMetaData According to the analysis of the two lower layers, it’s clear that this layer is the outermost layer of metadata exposure, and the outermost layer is structured as a with the following main structure: ShardingSphereSchema /**
 * ShardingSphere schema.
 */
@Getter
public final class ShardingSphereSchema {

    private final Map<String, TableMetaData> tables;

    @SuppressWarnings("CollectionWithoutInitialCapacity")
    public ShardingSphereSchema() {
        tables = new ConcurrentHashMap<>();
    }

    public ShardingSphereSchema(final Map<String, TableMetaData> 
tables) {
        this.tables = new ConcurrentHashMap<>(tables.size(), 1);
        tables.forEach((key, value) ->
 this.tables.put(key.toLowerCase(), value));
    } In line with the schema concept, it contains several tables. The attribute of is a map structure, the key is , and the value is the metadata of the table corresponding to the .
Initialization is done primarily through the constructor. So again, the focus is on the table metadata loading, let’s follow up from the entry.
The core entry point for the entire metadata load is in In the build, we assemble and load the corresponding metadata through configuration rules. The core code is as follows: ShardingSphereSchema tableName tableName org.apache.shardingsphere.infra.context.metadata.MetaDataContextsBuilder#build. /**
 * Build meta data contexts.
 * 
 * @exception SQLException SQL exception
 * @return meta data contexts
 */
public StandardMetaDataContexts build() throws SQLException {
    Map<String, ShardingSphereMetaData> metaDataMap = new HashMap<>
(schemaRuleConfigs.size(), 1);
    Map<String, ShardingSphereMetaData> actualMetaDataMap = new
 HashMap<>(schemaRuleConfigs.size(), 1);
    for (String each : schemaRuleConfigs.keySet()) {
        Map<String, DataSource> dataSourceMap = 
dataSources.get(each);
        Collection<RuleConfiguration> ruleConfigs = 
schemaRuleConfigs.get(each);
        DatabaseType databaseType =
DatabaseTypeRecognizer.getDatabaseType(dataSourceMap.values());
        // Obtain configuration rules
        Collection<ShardingSphereRule> rules =
ShardingSphereRulesBuilder.buildSchemaRules(each, ruleConfigs, 
databaseType, dataSourceMap);
        // Load actualTableMetaData andlogicTableMetaData
        Map<TableMetaData, TableMetaData> tableMetaDatas = 
SchemaBuilder.build(new SchemaBuilderMaterials(databaseType, 
dataSourceMap, rules, props));
        // Assemble rule metadata
        ShardingSphereRuleMetaData ruleMetaData = new
ShardingSphereRuleMetaData(ruleConfigs, rules);
        // Assemble data source metadata
        ShardingSphereResource resource =
buildResource(databaseType, dataSourceMap);
        // Assemble database metdadata
        ShardingSphereSchema actualSchema = new 
ShardingSphereSchema(tableMetaDatas.keySet().stream().filter(Objects
::nonNull).collect(Collectors.toMap(TableMetaData::getName, v -> 
v)));
        actualMetaDataMap.put(each, new ShardingSphereMetaData(each, 
resource, ruleMetaData, actualSchema));
        metaDataMap.put(each, new ShardingSphereMetaData(each, 
resource, ruleMetaData, buildSchema(tableMetaDatas)));
    }
    // 
    OptimizeContextFactory optimizeContextFactory = new 
OptimizeContextFactory(actualMetaDataMap);
    return new StandardMetaDataContexts(metaDataMap, 
buildGlobalSchemaMetaData(metaDataMap), executorEngine, props, 
optimizeContextFactory);
} The above code shows that in the build method, the basic database data such as database type, database connection pool, etc. are loaded based on the configured , through which the assembly of the is completed; the assembly of the such as configuration rules, encryption rules, authentication rules, etc. are assembled; the necessary database metadata in the are loaded. Trace to find the method for loading table metadata, namely , in which the and are loaded respectively. schemarule ShardingSphereResource ShardingSphereRuleMetaData ShardingSphereSchema org.apache.shardingsphere.infra.metadata.schema.builder.SchemaBuilder#build actualTableMetaData logicTableMetaData Then what is an and what is a ? Simply put for , is considered a node of , so in the concept of analysis, is , while and is . With these two concepts clearly defined, we then look at the build method together, mainly divided into the following two steps. actualTable logicTable t_order_1 t_order_2 t_order t_order logicTable t_order_1 t_order_2 actualTable 1) actualTableMetaData loading is the basic table of system sharding. In the 5.0 beta version, we adopt the method of database dialect to use SQL to query and load metadata, so the basic process is to query and load database metadata through SQL first. If no database dialect loader is found, the JDBC driver connection is used to obtain it, and then the metadata of the configuration table is loaded in combination with the table name configured in ShardingSphereRule. The core code is shown below. ActualTableMetaData private static Map<String, TableMetaData> 
buildActualTableMetaDataMap(final SchemaBuilderMaterials materials) 
throws SQLException {
    Map<String, TableMetaData> result = new HashMap<>
(materials.getRules().size(), 1);
    // Database SQL Loading Metadata
    appendRemainTables(materials, result);
    for (ShardingSphereRule rule : materials.getRules()) {
        if (rule instanceof TableContainedRule) {
            for (String table : ((TableContainedRule) 
rule).getTables()) {
                if (!result.containsKey(table)) {
                    TableMetaDataBuilder.load(table, 
materials).map(optional -> result.put(table, optional));
                }
            }
        }
    }
    return result;
} 2) logicTableMetaData loading From the above concept we can see that is an actual logical node assembled from an based on different rules, which may be a sharded node or a cryptographic node or something else. Therefore, the is based on the , combined with specific configuration rules such as library and table rules and other associated nodes. In terms of the specific process, it first obtains the table name of the configuration rule, then determines whether the has been loaded, and generates the metadata of the relevant logical node by combining the configuration rule with the method. The core code flow is shown below: logicTable actualTable logicTableMetaData actualTableMetaData actualTableMetaData TableMetaDataBuilder#decorate private static Map<String, TableMetaData> 
buildLogicTableMetaDataMap(final SchemaBuilderMaterials materials, 
final Map<String, TableMetaData> tables) throws SQLException {
    Map<String, TableMetaData> result = new HashMap<>
(materials.getRules().size(), 1);
    for (ShardingSphereRule rule : materials.getRules()) {
        if (rule instanceof TableContainedRule) {
            for (String table : ((TableContainedRule) 
rule).getTables()) {
                if (tables.containsKey(table)) {
                    TableMetaData metaData = 
TableMetaDataBuilder.decorate(table, tables.get(table), 
materials.getRules());
                    result.put(table, metaData);
                }
            }
        }
    }
    return result;
} At this point, the core metadata is loaded and encapsulated into a Map for return, for use in each requirement scenario. Metadata Loading Optimization Analysis Although metadata is the essential core of our system, data loading during system startup will inevitably increase system load and lower system startup efficiency. Therefore, we need to optimize the loading process. At present, we are exploring the following two ways: A. Replace Native JDBC Driver Connections with SQL Queries Prior to the 5.0 beta version, the approach used was to load via the native JDBC driver. In 5.0 beta, we have gradually adopted a multi-threaded approach to metadata loading using a database dialect, via SQL queries. The speed of loading system data has been further improved. A detailed dialect loader can be found in the related implementation of . org.apache.shardingsphere.infra.metadata.schema.builder.spi.DialectTableMetaDataLoader B. Reduce Metadata Load Times For the loading of resources common to the system, we follow the concept of “one-time loading for multiple uses”. Of course, we must consider space and time in this process. As a result, we are constantly optimizing to reduce duplicate loading of metadata to enhance overall system efficiency. ShardingSphere Community: ShardingSphere Github: https://github.com/apache/shardingsphere

Optimized Metadata Loading Process on ShardingSphere: A Technical Deep-Dive

Javascript is a language that's understood by the browser. It is used to load dynamic content without refreshing the page. You need to make your Javascript code more readable in fewer lines of code. We have listed out some of the recommended ways to get more ways to write javascript code: 1. Use Template Literals Template literals are the strings (variables) that can embed in the expression. Template literals make code much simpler and readable. For example, we can use template literals in JavaScript as below: code = ; str = ; var "javascript" var `
  I love I love ` ${code} ${code} Without template literals, we can write the above example as below: code = ; str1 = +  code + +  code + ; var "javascript" var "\n I love " "\n I love " "\n" 2. Using Ternary Operator In programming, you mostly have to encounter logical operations. If you want to perform logic between two statements, the ternary operator is much more readable. price= isMember ? : let '$2.00' '$10.00' You can read more about the conditional statement in JavaScript . on this page 3. Use Include Statement in JavaScript a statement in JavaScript is the simpler way to search for a string in an . include array and sentence You can use a statement in JavaScript as below: include str = ; word = str.includes( ); var "I love JavaScript." var "javaScript" // result: true In array,  we can use include a statement as below: str = [ , , ]; n = str.includes( ); var "taimoor" "ali" "umer" var "taimoor" // result: true statement return true or false depends on the string is present in sentence or array. include 4. Nullish Operator If you are working in 3rd party API, you may have encountered that same key-value not appear in every query. You have to check for nullish keys in JSON so that code does not throw an error. To check for the nullish key, you can use the following: Conditional Statement The nullish coalescing operator (??) - (Recommended) For example, we have following JSON in JavaScript as below: person = { : , : , : { : }
} var name "Taimoor Sattar" age 21 metadata hobby "football, blog" Using , we can access the key in the metadata of JSON as below: Conditional Statement hobby hobby = ; (person.metadata){
  hobby = person.metadata.hobby ? person.metadata.hobby : ;
} let "" if "" Using , we can access the key in the metadata of JSON as below: nullish coalescing operator hobby hobby = person.metadata?.hobby ?? ; let "" The above code check for the key in the metadata of JSON, If available it returns the value else returns the empty string. hobby 5. Default Parameter Value in Function Some of the functions in JavaScript allows you to send option parameter. Based on the optional parameter the return value of the function can change. we can demonstrate the default parameter in function through an example as below: { name;
} string1 = outputName(); string2 = outputName( ); ( ) function outputName name= "taimoor" return let // result: taimoor let "ali" // result: ali 6. Type Check for Parameter in Function Probably, there might be conditions where your function parameter has not a valid type. You can perform additional checks to validate your parameter type. We can demonstrate this with an example as below: { result = ( a == && b == ) ? a + b : ; result
}

sum( , ) sum( , ) ( ) function sum a, b let typeof "number" typeof "number" null return "s" 6 // result: null 4 6 // result: 10 7. Wrap Code in Try/Catch Statement Try/Catch statements are used to check the errors in the code. If errors, catch statement will run. We can demonstrate this with an example as below: {
  functionnotexist();
} (e){ .log( );
} try catch console "error" The above code console logs the error as the function does not exist. 8. Destructuring Destructuring allows you to breakdown complex parts into chunks. For example... If your complex function required a lot of parameters for execution, then it's better to De-structuring the function. Rather than passing a single parameter like a string, float, etc; pass an object in function. Single Objects can hold multiple values. We can demonstrate this example as below: { name;
} person = { : , : , : { : }
} str = outputName(person); ( ) function outputName {name = } "taimoor" // De-structuring return var name "Taimoor Sattar" age 21 metadata hobby "football, blog" let // Taimoor Sattar 9. Write DRY Code DRY means (don't repeat yourself). You avoid duplication in the code to avoid confusion. To avoid confusion in the code, you can follow the following rules. Write a reusable function Define clear names for variable and function Thank you for taking your time to read my article. For updates, you can find me on my , and . personal website Twitter Linkedin You can join my . 📧📧📧 email newsletter on substack

9 tips for better Code with JavaScript

According to Wikipedia, is a form of dynamic program analysis that measures, for example, the space (memory) or time complexity of a program, the usage of particular instructions, or the frequency and duration of function calls. Software profiling Most commonly, profiling information serves to aid program optimization. Profiling is achieved by instrumenting either the program source code or its binary executable form using a tool called a profiler (or code profiler). One of the most popular profilers in the Java world is . It is a visual tool that integrates command line JDK tools and lightweight profiling capabilities. The project is Open Source and maintained by Oracle, you can find the codebase . The tool was designed for development and production time use. VisualVM here VisualVM was included in the JDK until version 8. Some of its main features: Display Local And Remote Java Processes Display Process Configuration And Environment Monitor Process Performance And Memory Visualize Process Threads Profile Performance And Memory Usage Take And Display Thread Dumps Take And Browse Heap Dumps Analyze Core Dumps Analyze Applications Offline You could find more information about the different features in the project’s webpage, but definitely I would suggest you to just download it and start playing around, it’s “easy” to use. And then there’s , I mean, everybody knows and loves it! Seriously, it’s by far the most used and loved Java Runtime and Framework platform, take a look at the . Spring Boot JRebel 2020 Report Recently I needed to profile a Spring Boot app and made some interesting findings that I wanted to share since these are not really obvious. Prepare your app for profiling Something really cool about Spring Boot is , by “default” you can benefit from one single executable JAR with all the app classes and dependencies in it. One JAR, one App, just execute it and that’s it! FAT JARs FAT JARs are definitely powerful, but there are some tradeoffs when you use them. For example . when creating Docker images And… Explode your FAT JAR. This is fundamental, I wasted a lot of time before on a Windows machine with JDK 8 trying to profile an unexploded JAR (it failed silently). When you need to profile an application using VisualVM! On my current computer, a Mac with JDK 12, the profiler fails to start! (ERROR: ). It’s clear, the classes cannot be found therefore cannot be instrumented. Profiler engine warning: class *FAKE_CLASS_1* that should be instrumented is not loaded by target VM I’ll demo my point using… The ! The best Spring demo project ever! Spring Petclinic Demo App Clone the repo, build the app and explode the JAR file in a new folder: git https://github.com/spring-projects/spring-petclinic.git spring-petclinic
mvn package
mkdir jar-content jar-content/
jar xvf ../target/spring-petclinic-2.4.0.BUILD-SNAPSHOT.jar clone cd cd At the end of the process, you should end up with the following folders: BOOT-INF: Contains all classes and dependencies META-INF: Contains all JAR metadataorg: Contains Spring Boot launcher classes It’s of special interest the file , there you’d find what are your main and start classes. With all that info you’re ready to execute/start your app: META-INF/MANIFEST.MF java -cp .:BOOT-INF/lib/*:BOOT-INF/classes org.springframework.boot.loader.JarLauncher org.springframework.samples.petclinic.PetClinicApplication NOTE: If you’re using Windows, remember to change by and slashes by backslashes. “:” “;” There you go, that’s all we need for now! Profile your app In order to profile your app, and execute it. You should see your app configured under the Local menu. In case you’re trying to profile a remote app keep in mind the download VisualVM following configurations Double click on your app, go to the profile tab and change the profile class to match your Spring Boot app root package! Important: add to the end (to include all classes in that package). For example: “.**” org.springframework.samples.petclinic.** One last final tip: from my experience the best view is the Hot Spots, it allows you to quickly see where are your potential bottlenecks. Final words Software profiling is definitively very useful when trying to understand bottlenecks and potential areas of improvement. A must to know tool for understanding your application and tuning it. Tools like VisualVM really empower you and are super useful to have in your toolbox. Especially useful, the Open Source nature of the tool, you’d find tons of related information out there! And finally, but not least, yes, you can profile a Spring Boot App! In later articles I might write about heap and stack dumps, and see how you can even use Spring Boot Actuators for getting that information. Also published at https://medium.com/kayvan-kaseb/tips-and-tricks-for-profiling-your-spring-boot-app-using-visualvm-de627cae02d1

Tips For Profiling Your Spring Boot Application Using VisualVM

ASP.NET FAQs

It is difficult for the metadata in dNFT(dynamic NFT) to achieve “decentralization” and “dynamic change” at the same time. Decentralized metadata storage About (most NFTs are static) metadata is decentralized and stored on IPFS. The format suffix is *,* where refers to the NFT collection, where is a number, such as “26”. An example of such a project is , the metadata of which is stored in IPFS, although the BaseURI used for IPFS can be changed by the contract owner. 48% of NFT ipfs/your_collection_file_hash/tokenid your_collection_file tokenid Bored Ape Yacht Club Suppose the platform wants to provide NFT customization capabilities and put metadata in decentralized storage. In that case, developers need to exhaust all possible combinations of attributes, put all the varieties of metadata on IPFS, and then index according to the combination of attributes to find the in IPFS to get the metadata. tokenURI The disadvantages of this approach are: First, many metadata combinations lead to much storage cost in advance. You have to store them all in advance; Second, if the platform wants to add a Smartglasses option to the feature of Glasses, or when it provides the ability to change dynamically, it can change the metadata information in the NFT about the game level and other metadata information in the NFT according to the goals of the World Cup during a match. At this point, the timeliness requirements for metadata changes are higher. For example, this dynamic change almost equals replacing a new NFT, and the cost of changing NFT metadata will rise sharply. Dynamically update first The second method is to abandon the decentralized metadata storage and only put the ownership on the Chain to ensure timely and rapid dynamic changes. Some projects generate metadata through a centralized server, and the metadata information of the customized NFT will be combined and generated in a centralized manner. To be able to display different houses in 2022 and 2027, NFT minter should first put other roofs on the Chain, store metadata off the Chain, and the URL of a centralized service to do the correlation, pointing to one of them in 2022, and replacing it in 2037 to another one. However, they store metadata on their central storage, and these servers can fail in the blink of an eye, costing NFT owners millions worldwide. More importantly, it isn’t easy to guarantee that such storage will not be tampered with. Especially for some game NFTs, their value does not lie in the displayed pictures but in the information that is crucial in the game, such as force values, levels, etc. This information is stored in metadata. It is impossible to guarantee that only the owner of the NFT owner who can change the metadata based on centralized storage. And when the metadata storage is separated from data on the Chain, the dynamic metadata history does not leave traces on the Chain, and the two are unrelated, so it isn’t easy to carry out practical analysis and insight. Year Transaction price Metadata history 2021 $40,000 old roof; old door 2025 $45,000 old roof; old door 2027 $48,000 old roof—>new roof; old door 2029 $70,000 2031 old door—>new door; new roof 2037 ? The history of the house Currently, only the first two columns of data are kept on-chain, which you can see directly from platforms like OpenSea. But you only know that the price is increasing over time, but you need to understand why. The last data column is in the platform’s centralized server, which is unreliable. For example, a sharp price increase in 2029 is due to the repair of a new roof — the information about this is in the third column of metadata. Because the metadata is changing and is not stored on the Chain, it may be tampered with, so you cannot know, nor is it challenging to analyze and understand what a more reasonable price in 2037 is. These problems may lead to a poor display experience of dNFT in the NFT trading market, making it difficult for dNFT to circulate and prosper in the secondary market. For example, in OpenSea, a dNFT that changes with the daily sunshine conditions rotates the animation every 8 hours, the change history of metadata is not presented on the website, and the dynamic feature is completely invisible when you first enter it. You have no way of knowing this is dynamic. Put all the things on the Chain. Therefore, it is best to put all metadata, images, transaction information, etc., on the Chain and can add the metadata and change it conveniently and dynamically. Your signature should perform the changes, and the NFT platform as an intermediary minimizes the direct touch of data (reading and writing, caching, etc.). DB3 network Here, let me introduce the , a decentralized storage solution that adopts the key-value storage paradigm and has advanced database properties, such as mutation and programmability. DB3 network Change metadata quickly based on decentralized storage. DB3 can support convenient CRUD-like operations, insert, update, read and delete stored data. This is easy to achieve for centralized storage, but it is challenging for decentralized storage. The reason is that the update operation conflicts with the immutable characteristics of the blockchain. But in use cases such as the dynamic NFT mentioned above, immutable storage is important from a security point of view. Still, it limits the number of possible applications (such as the evolutionary ability of NFT). A mutation is defined in the DB3 network as our core concept. All operations on data modification are defined as mutation. You can use mutation to insert, update and delete data. For example, you can easily complete the data renewal when you want to modify roof color metadata. >put house roofcolor offwhite
submit mutation to mempool done!
>get house roofcolor
roof -> offwhite At the same time, mutation can perform data update operations, and the other three: insert/update/delete and the hash returned by these operations will be submitted to the block. the operation is recorded into blocks. Analyze metadata history onchain Every metadata change of dNFT will be recorded on the chain like a snapshot. At the same time, because we have optimized the efficiency of our storage engine, we can achieve high-performance queries, not inferior to the web2 database. Therefore, in the future, analysis of dNFT will be very easy to read and display a more credible metadata history. Claim metadata ownership Secondly, the description information of dNFT will be stored in a concept similar to the “table” in web2. The operation and modification of this table need to obtain the user’s permission, which the user completely controls, ensuring the ownership of dNFT. The centralized service should barely touch metadata. Since the metadata defines the asset, securing metadata is as important as securing ownership. Our ： Github Browse some design docs; Start coding from ; goodfirstissue Discuss with us according the . WIPissue Also published . here

Storing Dynamic NFT Metadata on the DB3 Network

Dear Bankless Nation, Some popular NFT platforms from the 2017-2018 era, like Ascribe, Digital Objects, and Editional, eventually went under. These projects stored their metadata on their own servers, so when they went bust, their tokens’ visuals were lost to time. Lost NFTs are nothing new, then. But these early losses later spurred lots of advances around decentralized storage networks as well as totally on-chain NFTs, whose metadata are forever retrievable from the blockchain. Not everyone pays attention to the lessons of crypto history, though. For example, consider Sam Bankman-Fried of FTX notoriety. This is what his first NFT minted on FTX looked like circa September 2021: No Picasso, right? Certainly not, but at least it had visuals and metadata then. Fast forward to today and in the wake of FTX’s collapse that same NFT, plus all the other NFTs minted at FTX, now have broken metadata: Why? Because SBF and FTX relied on a centralized server system and it’s not running those servers anymore. This system was “good enough” before, but it’s nonexistent now! As such, this episode is the latest big reminder that metadata — whether that be through nodes on decentralized storage networks like Arweave and IPFS or on-chain through Ethereum nodes — is part of the magic of NFTs. decentralizing All that said, . In the meantime let’s catch you up on all the latest headlines in the space, have a great weekend everyone ✌️ backup what NFTs you can when you can -WMP 📣 General NFT News held its third drop ft. Li Jin: Bankless Bankless Collectibles commenced claims for its . Blur second airdrop introduced the : CoinLedger NFT Tax Loss Harvestooor , a new general NFT marketplace, . GigaMart launched introduced the Ledger Stax, a new crypto hardware wallet that’s capable of displaying NFTs: Ledger introduced . Mirror improved NFT embeds added to its community marketplace generator. Rarible Polygon support , a membership rewards program in collaboration with Polygon, . Starbucks Odyssey kicked off , an early-stage web3 fund, . Variant acquired multiple Nouns 🏆 Digital Collectibles launched oracle connectivity, meaning finiliars now respond with emotional animations to their native cryptos’ prices: Finiliar reached a 4Ξ floor for the . Pudgy Penguins first time this year mints and holders stats . Reddit Avatar continue to boom 🎨 Cryptoart selections began, a project he collaborated on with the estate of artist László Moholy-Nagy: Dmitri Cherniak’s Light Years added a , for tracking recent payments and royalties, to Manifold Studio. Manifold Token Activity dashboard , a new marketplace for generative art, has arrived: sansa 🎮 Decentralized Gaming introduced , a new series of expanded gameplay mechanics. Axie Infinity Axie Core , a decentralized esports team, entered into a . BLKHVND partnership with ParagonsDAO introduced code that allows projects to receive royalties from . Pirate Nation both Blur and OpenSea 💽 Music NFTs celebrated its first birthday: Sound 🌐 Virtual Worlds , the parent entity of Aave, acquired mobile with plans to integrate web3 social infra Lens Protocol into the platform. Aave Companies mobiel metaverse Sonar added support for to its marketplace. Decentraland LAND rentals 💎 DeFi x NFTs borrowers can now mint, transfer, or sell their . NFTfi loan obligations , a protocol for collective ownership of NFTs, . Tessera launched Action steps 🆕 Read and in (newsletter) The Status of Web3 Social The Perks of Decentralized Perps Bankless 🗣️ Watch on (YouTube) The Bull Case for Modular Blockchains Bankless 🌱 Watch on Circles UBI with Martin Koppelmann Green Pill 🙇 Catch up on my other write-ups from this week! ✧ NFT TCRs ✧ Collective NFT experiences with Tessera ✧ The Bankless Holiday Crypto Gift Guide Author Bio William M. Peaster is a professional writer and creator of Metaversal —a Bankless newsletter focused on the emergence of NFTs in the crypto economy. He’s also recently been contributing content to Bankless, JPG, and beyond! First Published Here .

Where Has Your NFT Metadata Gone?

The first step you’ll take to building an NFT minting Dapp is to prepare the artwork. Without the artwork, you can’t have your NFT project actualized. Another reason for preprocessing your artworks is for generating metadata for each of the images. Without this metadata, your NFT cannot be sold in any of the big secondary markets, such as Opensea. For example, the image below is an NFT in the Opensea marketplace bearing some metadata which can also be seen below. The above information including the artwork, its details, and traits can be seen on the IPFS image below. Setting up Project Dependencies Open your terminal and navigate to your project directory or create a project folder at a specific location. For example, running on the terminal will create a folder called “ on your specified location. **mkdir preprocessor** preprocessor” Next, run the following commands on the terminal. cd preprocessor
npm init -y
npm install sharp @faker.js/faker --save-dev The above commands will install both and libraries on your project. The faker library will help us generate random information. Whereas, the sharp library will help us process the image to a certain dimension, quality, and format. sharp faker Next, create a folder in your project called and another called . In the “arts” folder, put all the images for processing inside it. arts outputs With the above steps accomplished, open the project on “VS code”. The project structure should look like the one below. - preprocessor/
  - arts/
  - node_modules/
  - outputs/
  - package.json
  - package-lock.json Great, let’s move on to coding the engine responsible for processing the images. Prerequisites You’ll need the following installed on your computer to complete this tutorial. NodeJs IPFS Desktop app VS Code Coding the Processing Engine Create a file at the root of your project called and paste the following code **imagify.js** const fs = require('fs')
const path = require('path')
const sharp = require('sharp')
const { faker } = require('@faker-js/faker')
const input = './arts'
const output = './outputs'

let img_counter = 1
const imgSize = { width: 500, height: 500 }
const desired_ext = '.webp'
const base_url = 'https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/'
const attributes = {
  weapon: [
    'Stick',
    'Knife',
    'Blade',
    'Clube',
    'Ax',
    'Sword',
    'Spear',
    'Gun',
    'Craft',
  ],
  environment: [
    'Space',
    'Sky',
    'Desert',
    'Forest',
    'Grassland',
    'Moiuntains',
    'Oceans',
    'Rainforest',
  ],
  rarity: Array.from(Array(10).keys()),
}

fs.readdirSync(input).forEach((file) => {
  const orginal_ext = path.extname(file)
  const orginal_file_name = path.basename(file).split('.')[0]

  if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) {
    const id = img_counter

    const metadata = {
      id,
      name: `Adulam NFT #${id}`,
      description:
        'A.I Arts NFTs Collection, Mint and collect the hottest NFTs around.',
      price: 1,
      image: base_url + id + desired_ext,
      demand: faker.random.numeric({ min: 10, max: 100 }),
      attributes: [
        {
          trait_type: 'Environment',
          value: attributes.environment.sort(() => 0.5 - Math.random())[0],
        },
        {
          trait_type: 'Weapon',
          value: attributes.weapon.sort(() => 0.5 - Math.random())[0],
        },
        {
          trait_type: 'Rarity',
          value: attributes.rarity.sort(() => 0.5 - Math.random())[0],
          max_value: 10,
        },
        {
          display_type: 'date',
          trait_type: 'Created',
          value: Date.now(),
        },
        {
          display_type: 'number',
          trait_type: 'generation',
          value: 1,
        },
      ],
    }

    if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) {
      sharp(`${input}/${orginal_file_name + orginal_ext}`)
        .resize(imgSize.height, imgSize.width)
        .toFile(`${output}/images/${id + desired_ext}`, (err, info) =>
          console.log(err),
        )

      fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), {
        encoding: 'utf-8',
        flag: 'w',
      })
    }
    console.log(metadata)
    img_counter++
  }
}) The following steps will help you understand how this metadata processing engine works. Importing Essential Libraries const fs = require('fs')
const path = require('path')
const sharp = require('sharp')
const { faker } = require('@faker-js/faker')
const input = './arts'
const output = './outputs' The represents the file system, it is an inbuilt module that came with NodeJs. It has the responsibility of managing file reading and writing activities on your machine. fs The is another node module that helps you navigate through the directory structures on your machine. This will be instrumental in locating where our images are kept. path Sharp is the module we use for processing the image such as resizing and transforming to a different file type. We’ll use the faker to generate a random number. Lastly, the variable contains the location where the images to be processed are located and the points to the location where the processed images will be saved. input output Defining Essential Variables let img_counter = 1
const imgSize = { width: 500, height: 500 }
const desired_ext = '.webp'
const base_url = 'https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/'
const attributes = {
  weapon: [
    'Stick',
    'Knife',
    'Blade',
    'Clube',
    'Ax',
    'Sword',
    'Spear',
    'Gun',
    'Craft',
  ],
  environment: [
    'Space',
    'Sky',
    'Desert',
    'Forest',
    'Grassland',
    'Moiuntains',
    'Oceans',
    'Rainforest',
  ],
  rarity: Array.from(Array(10).keys()),
} The above codes contain important variables to be used in the course of generating our metadata. helps us to number the images consistently with the current iteration. **Image_counter** defines the dimension of the width and height of each image to be processed. **ImgSize** speaks of the file format you want your processed images to bear. **Desired_ext** specifies the location where the images are to be stored on the IPFS. **Base_url** holds further information about each image’s metadata. **Attributes** Executing Recursive Task fs.readdirSync(input).forEach((file) => {
  if(['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) {
    // Images and metadata tasks are recursively performed here...
  }
}) In the above block of code, we used the file system library (fs) to loop through all the images in the location (arts). And for each of the images, we made sure our engine is only selecting images from an approved list of extensions. **input** Performing The Metadata Task const id = img_counter
const metadata = {
  id,
  name: `Adulam NFT #${id}`,
  description:
    'A.I Arts NFTs Collection, Mint and collect the hottest NFTs around.',
  price: 1,
  image: base_url + id + desired_ext,
  demand: faker.random.numeric({ min: 10, max: 100 }),
  attributes: [
    {
      trait_type: 'Environment',
      value: attributes.environment.sort(() => 0.5 - Math.random())[0],
    },
    {
      trait_type: 'Weapon',
      value: attributes.weapon.sort(() => 0.5 - Math.random())[0],
    },
    {
      trait_type: 'Rarity',
      value: attributes.rarity.sort(() => 0.5 - Math.random())[0],
      max_value: 10,
    },
    {
      display_type: 'date',
      trait_type: 'Created',
      value: Date.now(),
    },
    {
      display_type: 'number',
      trait_type: 'generation',
      value: 1,
    },
  ],
} In the code block above, we supplied values for each metadata space. For example, environments, weapons, and all the trait values are randomly and dynamically supplied. Performing The Image Transformation Task if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) {
  sharp(`${input}/${orginal_file_name + orginal_ext}`)
    .resize(imgSize.height, imgSize.width)
    .toFile(`${output}/images/${id + desired_ext}`, (err, info) =>
      console.log(err),
    )

  fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), {
    encoding: 'utf-8',
    flag: 'w',
  })
}

console.log(metadata)
img_counter++ In the snippet above, we used the file system module again to first locate each one of our artwork and resized it to our specified dimension (500 x 500). Also, we supplied a new name in line with the current iteration and gave it our desired extension (webp). Resizing and transforming the images into greatly optimized our artworks to an astonishing height. webp For example, where I subjected this image preprocessing engine to images totaling a size of . The size went down to for the extension and an astonishing for the extension. That huge size reduction accounts for a big leap in the load time of a Minting website built with my images. in this video 99 111MB 62MB .png 4.5MB .webp Lastly from the block of code above, we created metadata for each image processed, bearing both an identical name and a URL pointing to the image’s location. This metadata is what we’ll deploy to IPFS after processing the images. JSON Now, run the command below to have your image transformed. Be sure you are in your project folder. node imagify.js At this point, we are done with our image engine, our output folder should have the following file structure as the result. - output/
  - images
    - 1.webp
    - 2.webp
    - ......
  - metadata
    - 1.json
    - 2.json
    - ...... Uploading Images and Metadata to IPFS IPFS stands for the interplanetary file system, it is peer-to-peer and decentralized. There isn’t an easy way to pull out data stored on the IPFS and as such, it is a near-perfect peer to use along with your blockchain applications for storing media contents. To use the easy and less confusing way, head to the IPFS Desktop app installation page and follow the instructions specified there. After the installation is successful, open up the IPFS app and upload FIRST, and I repeat, FIRST upload the images folder. A unique CID (content Identification) string will be generated as part of the folder name, see the image below. Now, copy the images folder CID as can be seen from the image above, and replace it in your code. See the code below. **imagify.js** const base_url = "https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/" //old string
const base_url = "https://ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/" //new string Now, run the again to include the accurate location of each image to your metadata. See an example of the generated JSON metadata before and after the replacement of the CID. **node imagify.js** JSON You can watch this video to understand how I used these Images and metadata on a full NFT minting Project. https://www.youtube.com/watch?v=QN3wb_mXBjY?embedable=true Before CID Replacement {
  id: 97,
  name: 'Adulam NFT #97',
  description: 'A.I Arts NFTs Collection, Mint and collect the hottest NFTs around.',
  price: 1,
  image: 'https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/97.webp',
  demand: '4',
  attributes: [
    { trait_type: 'Environment', value: 'Forest' },
    { trait_type: 'Weapon', value: 'Craft' },
    { trait_type: 'Rarity', value: 4, max_value: 10 },
    {
      display_type: 'date',
      trait_type: 'Created',
      value: 1664478034024
    },
    { display_type: 'number', trait_type: 'generation', value: 1 }
  ]
} After CID Replacement {
  id: 97,
  name: 'Adulam NFT #97',
  description: 'A.I Arts NFTs Collection, Mint and collect the hottest NFTs around.',
  price: 1,
  image: 'https://ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/97.webp',
  demand: '7',
  attributes: [
    { trait_type: 'Environment', value: 'Moiuntains' },
    { trait_type: 'Weapon', value: 'Clube' },
    { trait_type: 'Rarity', value: 2, max_value: 10 },
    {
      display_type: 'date',
      trait_type: 'Created',
      value: 1664478110287
    },
    { display_type: 'number', trait_type: 'generation', value: 1 }
  ]
} Finally, as shown in the image below, upload the metadata folder to IPFS alongside the images folder. Fantastic, now let’s pin it on the web for the world to see. Currently, both folders are sitting on your local IPFS node (Your Computer), for it to be accessible worldwide, you need to use a Pinning service such as . Pinata Pinning your folders to IPFS First, head to and sign up if you haven’t done that before. Then click on the account icon and select API Keys. See the image below. Pinata pin manager On the keys creation page, click on create a new key and enter the name for the key. Observe the image below. Now copy the JWT key on your clipboard. This is what we’ll use to link our IPFS Desktop with our Pinata account. See the image below. Next, open up your IPFS desktop application, head to the settings tab and add a new service, select Pinata and paste your JWT token to the space provided. Refer to the image below. The last thing to do is to actually pin your folders to Pinata using the instruction below. Head to the files tab, click on the triple dotted line, and select set pinning. This will pop up in the image below. Select Pinata and apply, by so doing, your images folder will be accessible globally. Confirming Global Image Accessibility Head to this website, copy and paste your CID on the IPFS input field and click on the cache button. This scans the entire set of publicly available IPFS gateways in search of your images. See the image below. The results from the above image show that many IPFS nodes now have copies of the images folder available and accessible globally even if you deleted the original copy on your local node. With the steps clearly outlined for you, also Pin the metadata folder to make them publicly available online. Now you can use any of the links in the image above as your base URL for tokens. See the image below. ERC721 And there you have it, that is how to prepare and upload your artworks on the IPFS. Conclusion You will always encounter the need to understand how to preprocess and upload artworks on the IPFS at a batch scale. Once you understand how to work and process images to the IPFS you can start using it on your special web3 projects. Till next time, keep crushing it! See live demo usage on my NFT project on the Goerli testnet . See Opensea’s location . You can watch the video version on my YouTube Channel. here here https://www.youtube.com/watch?v=YzurgMLwFVQ?embedable=true About the Author I am a full-stack blockchain developer with years of experience in the software development industry. 6+ By combining Software Development, writing, and teaching, I demonstrate how to build decentralized applications on EVM-compatible blockchain networks. My stacks include , , , , , , , , and more. JavaScript React Vue Angular Node React Native NextJs Solidity to learn how to build a Web3 app from scratch. I also offer private and specialized classes for serious folks who want to learn one-on-one from a mentor. Subscribe to my YouTube channel . Book your Web3 classes here Now, let me show you how to represent the above image and metadata in your code.

How to Richly Preprocess your IPFS NFT Images and Metadata

Cómo preprocesar enriquecidamente sus imágenes y metadatos IPFS NFT

Comment prétraiter de manière riche vos images et métadonnées IPFS NFT

अपने आईपीएफएस एनएफटी छवियों और मेटाडेटा को बड़े पैमाने पर प्रीप्रोसेस कैसे करें

IPFS NFT 画像とメタデータを豊富に前処理する方法

Como pré-processar ricamente suas imagens e metadados IPFS NFT

Cách tiền xử lý phong phú Hình ảnh và Siêu dữ liệu IPFS NFT của bạn

如何丰富地预处理您的 IPFS NFT 图像和元数据

With the use of blockchain explorer or by retrieving it from the smart contracts that manage them, you may locate the metadata for your NFTs. is data that provides information about other data; in the case of an NFT, it describes that NFT's essential properties, including its name, description, and anything else its creator feels is important. In many cases, an NFT's metadata also contains links to the images and other "primary" digital assets that give an NFT its value. Metadata (opens new window) Individually identifiable digital representations of blockchain-based tangible or intangible objects called are not typically divided into smaller parts. Instead, structured metadata related to actual or virtual things is represented by NFTs. Often, the tokens are not connected to the objects and serve as distinct identifiers, advancing the interoperable commercialization of the physical or digital items, according to their proponents. nonfungible tokens (NFTs) Hashes of files or other data were added to in 2012 or 2013 to demonstrate their existence or legitimacy at a particular moment. This development served as the foundation for creating "Colored Coins," uniquely identified tokens, which are recognized by adding metadata to Bitcoin transactions. the Bitcoin blockchain What is Metadata? So, what is this metadata, and how is it generated? In this article, we will explore these questions and also deep dive into how you can retrieve metadata of the NFT from the contract; how you read NFT files; and how you can view the metadata of any NFT. What exactly is the location of NFTs that are stored off-chain? Is it anything like Amazon Web Services or Google Drive? This is a crucial point that causes confusion surrounding NFT information. Who else is in charge of the NFT metadata storage online? Since NFT marketplaces use metadata to show nonfungible tokens to buyers and sellers, metadata must be in a format that marketplaces can understand. In other words, you're writing computer code—a smart contract—that instructs the blockchain to initialise a table on your behalf. Your NFTs' ownership and metadata are kept in this table. More particular, each table row has the following details: The Token Identifier (or ID) The Owner of the Token The Metadata associated with the token How can you view the metadata of any NFT? When an NFT project is made available for the minting and you buy it, a random number generator will give your NFT a set of characteristics. The metadata contains this information. The blockchain contains an immutable record of the token's info. This record contains information about the token's purpose, present owner, and previous transactional activity. Consequently, how can you create NFT metadata? Viewing an NFT's metadata, confirming its ownership and tracing its transaction history are all possible using an NFT tracking and verification service through which you can verify that the token ID and contract address are connected to the legitimate owner of the content using a marketplace database. If you select a service that complies with NFT's coding standard, one of the many NFT verification tools available can search for you. An Ethereum blockchain explorer called is a well-known tool for locating and confirming NFTs. The platform allows users to verify transaction histories, wallet addresses, metadata, smart contracts and other on-chain data. Similarly, you can access all the NFT metadata you require on the BNB Chain network by using a blockchain explorer like BscScan. Etherscan However, to retrieve the metadata of a nonfungible token from the smart contracts that control it, you'll need to access the NFT's smart contract. The metadata should be accessible for inspection and verification under the contract's "Details" section. If the NFT complies with the current nonfungible token standard, the following details ought to be shown: Here is a JSON metadata file for a sample NFT. ash-nft.json{ "description": "Friendly OpenSea Creature", "image": "https://opensea-prod.appspot.com/puffs/3.png", "name": "Dave Starbelly", "attributes": [ { "trait_type": "Base", "value": "Starfish" }, { "trait_type": "Eyes", "value": "Big" }, { "trait_type": "Mouth","value": "Surprised" }, ] } The second essential component of NFTs that lets them work is NFT metadata. NFTs have the ability to link to data outside of their smart contract, effectively enabling the network to refer to off-chain data. As a result, executing NFTs on a network like expenses than it otherwise would. Ethereum has lower computing The asset itself often resides off-chain, whereas the Non-Fungible Token that defines the provenance of an asset resides on the blockchain. There are a few exceptions; one is the collection OnChain Monkeys, which was totally built on chain in a single transaction. Since the complete collection is hosted on-chain, no file storage solution is required.

Easy Way to Find Your NFT’s Metadata

This article introduces the design and implementation of metadata storage in Alluxio Master, either on heap and off heap (based on RocksDB). Background Alluxio is the world’s first open source data orchestration platform for analytics and AI for the cloud. Alluxio bridges the gap between data driven applications and storage systems. It brings data from the storage tier closer to the data driven applications and makes it easily accessible enabling applications to connect to numerous storage systems through a common interface. Alluxio’s architecture enables data access at speeds orders of magnitude faster than existing solutions. As a distributed system, Alluxio employs a Master-Worker architecture. An Alluxio cluster consists of one or more Master nodes and several Worker nodes. The Alluxio Master serves all user requests and journals file system metadata changes. Alluxio workers are responsible for managing user-configurable local resources allocated to Alluxio (e.g. memory, SSDs, HDDs). Alluxio workers store data as blocks and serve client requests that read or write data by reading or creating new blocks within their local resources. This article introduces how Alluxio implements metadata storage in Alluxio Master. Two Ways of Storing Metadata in Alluxio Inside Alluxio master, each file or a directory is represented by a data structure called inode which contains attributes like file permissions, and other metadata like block locations. Alluxio master stores the metadata of the entire file system as an inode tree, similar to HDFS and other UNIX-based file systems. Alluxio provides two ways to store the metadata: ROCKS: an on-disk, RocksDB-based metastore HEAP: an on-heap metastore The default is the ROCKS. The Alluxio source code provides two interfaces, InodeStore and BlockStore, in the /core/server/master/src/main/java/alluxio/master/metastore directory. The metadata managed by InodeStore includes individual inodes and the parent-child relationship between different inodes. BlockStore is responsible for managing the block size and block location of file data blocks. The cachingInodeStore implements an on java heap configurable cache in front of RocksDB to improve performance. In HEAP, these interfaces are implemented through HeapInodeStore and HeapBlockStore. The overall dependency relationships are as follows. During the AlluxioMasterProcess, two Factories are generated to corresponding stores, and different InodeStore and BlockStore are generated in the Factories based on the configurations. ROCKS Metastore RocksDB is an embedded Key-Value database. Users can achieve efficient KV data storage and access by calling the API interface. The BlockStore interface is implemented by RocksBlockStore, with the process as follows. Factory is added to the mContext in AlluxioMasterProcess. MasterUtils.createMasters() will create all the Master threads in order. When creating DefaultBlockMaster, it will call BlockStore.Factory to create a RocksBlockStore instance. RocksDB.loadLibrary() will be called when initiating RocksBlockStore to load the dependent libraries and then create an instance of RocksStore class according to the configuration file. RocksStore is used to operate the RocksDB database, including initializing the database, backing up and restoring the database, etc. When creating RocksStore, an instance of RocksDB class is created by calling RocksDB.open() method in the create() method. DefaultBlockMaster reads and writes to the RocksDB database by using this RocksDB class. RocksBlockStore uses the following main methods: getBlock(long id) putBlock(long id, BlockMeta meta) removeBlock(long id) getLocations(long id) addLocation(long id, BlockLocation location) removeLocation(long blockId, long workerId) Let’s take getBlock() as an example. getBlock() is used to get the metadata of the corresponding block by blockId as follows. @Override
  public Optional<BlockMeta> getBlock(long id) {
    byte[] meta;
    try {
  meta = db().get(mBlockMetaColumn.get(), Longs.toByteArray(id));
    } catch (RocksDBException e) {
      throw new RuntimeException(e);
    }
    if (meta == null) {
      return Optional.empty();
 }
    try {
      return Optional.of(BlockMeta.parseFrom(meta));
    } catch (Exception e) {
      throw new RuntimeException(e);
    }
  } Below is to interact with RocksDB: meta = db().get(mBlockMetaColumn.get(), Longs.toByteArray(id)); The db() method in the above code will return the previously created RocksDB class and then call the RocksDB.get() method. get() method needs two parameters, the first one is the ColumnFamilyHandle and the second is blockId. Each K-V pair in RocksDB corresponds to a ColumnFamily, and ColumnFamily is equivalent to the logical partition in RocksDB. When we need to query the data in a ColumnFamily, we need to operate the underlying database through ColumnFamilyHandle, which is created while creating RocksDB instance. The K-V data stored in RocksDB are stored as byte strings, so we need to convert the blockId to byte[], and convert the value returned from RocksDB back into a BlockMeta Java object using Google Protocol buffers. The InodeStore interface in ROCKS method is implemented by CachingInodeStore and RocksInodeStore. The CachingInodeStore uses memory to store the metadata cache, while the RocksInodeStore is a metastore implemented by RocksDB as the backing store of CachingInodeStore. When the metadata of the Alluxio cluster can be completely stored in the CachingInodeStore, Alluxio does not interact with the RocksInodeStore, but uses CachingInodeStore to get better performance instead. When the storage capacity of the CachingInodeStore reaches a threshold, Alluxio automatically migrates the metadata from the CachingInodeStore to the RocksInodeStore. At this point, the performance of metadata access depends on the cache hit rate of CachingInodeStore and the performance of RocksDB. The process of creating and using RocksInodeStore is similar to RocksBlockStore. If MASTER_METASTORE_INODE_CACHE_MAX_SIZE is set to 0, then it uses RocksInodeStore. if it is not 0, then it requires creating both CachingInodeStore and RocksInodeStore. case ROCKS:
InstancedConfiguration conf = ServerConfiguration.global();
  if (conf.getInt(PropertyKey.MASTER_METASTORE_INODE_CACHE_MAX_SIZE) == 0) {
    return lockManager -> new RocksInodeStore(baseDir);
  } else {
    return lockManager -> new CachingInodeStore(new RocksInodeStore(baseDir), lockManager);
  } Heap Metastore Alluxio uses heap memory as storage in the Heap method. When creating the AlluxioMasterProcess, the HeapInodeStore and HeapBlockStore are built to implement the InodeStore and BlockStore interfaces. When creating the HeapInodeStore, a ConcurrentHashMap called mInodes is created to store the Inode information of files and folders. At the same time, a TwoKeyConcurrentMap called mEdges will be created to store the parent-child relationship of different nodes. private final Map<Long, MutableInode<?>> mInodes = new ConcurrentHashMap<>();
  // Map from inode id to ids of children of that inode. The inner maps are ordered by child name.
  private final TwoKeyConcurrentMap<Long, String, Long, Map<String, Long>> mEdges =
      new TwoKeyConcurrentMap<>(() -> new ConcurrentHashMap<>(4)); TwoKeyConcurrentMap is a class defined in Alluxio, which implements a ConcurrentMap supporting two keys with the following logical structure: <k1, <k2, value>>. Each key in the mEdges data structure maps an a Inode ID to a map of its children, which then maps each child’s name to its Inode ID. In HeapBlockStore, a ConcurrentHashMap called mBlocks is created to store the metadata of each block, and a TwoKeyConcurrentMap called mBlockLocations is created to store the location of the block in the worker. // Map from block id to block metadata.
  public final Map<Long, BlockMeta> mBlocks = new ConcurrentHashMap<>();
  // Map from block id to block locations.
  public final TwoKeyConcurrentMap<Long, Long, BlockLocation, Map<Long, BlockLocation>>
      mBlockLocations = new TwoKeyConcurrentMap<>(() -> new HashMap<>(4)); The two keys in mBlockLocations are blockId and workerId, and the value is the specific locations on the worker where the block is stored. The blockId can be used to get the location of the block stored in the worker. Summary Alluxio provides two ways to store metadata, ROCKS and HEAP, and the default storage is the ROCKS. For ROCKS, in addition to using RocksDB, Alluxio provides a memory-based cache to improve metadata read and write performance. As a result, we can get high performance when the size of the metastore is limited. With RocksDB, we can store metadata to the hard disk to get more storage space. In general, we should use the RocksDB to store metadata in Alluxio Master. If you only need to store a small amount of metadata which requires very high metadata read and write performance, you can also consider using the HEAP method. About the Author Changsheng Gu, Big Data Engineer at China Mobile. Gu works in China Mobile Cloud Center, developing cloud-native data lake with a focus on HDFS and Alluxio.

Deep Dive into the Implementation of Metadata Storage

We cannot expect doctors to remember every detail about each patient throughout their careers and diagnose illnesses instantly as it is not conceivable. However, if the doctor has instant access to all of the data, he will be able to provide personalized care for all of his patients and eliminate the need for new tests. Healthcare data must be appropriately classified and safeguarded to enable easy data access. A solid Metadata management solution is required to achieve these goals. Healthcare metadata management ensures that the data is easily integrated, shared, linked, analyzed, and maintained to foster more innovation in the healthcare industry. Whether you are a doctor, nurse, or CEO, metadata management solutions can significantly impact patients' lives. How can metadata management make a difference in the healthcare industry? Whenever someone utters the word data, our mind usually jumps to numbers that can improve marketing strategies, attract customers, and boost revenue. However, have you ever thought of data as a lifesaver? According to , 3,03,000 women die during labor and birth each year, 2.7 million babies die within the first one month, and 2.6 million babies are stillborn. If we can pinpoint where, when, and to whom these incidents occur, it will be much easier to conduct research and improve maternal health. WHO Healthcare metadata management will do the trick! It helps you search and find relevant information across unstructured data like X-rays, tissue samples, and other images. Metadata management solution gives a clear understanding of every data in the hospital industry. Healthcare sectors are trying to bring in more innovation and improve the success rate of clinical trials. With a robust metadata management solution, doctors can quickly identify the factors contributing to a trial's success or failure by tracking down the data to its root. It enables you to understand where and when various factors such as medications, recommended therapy, or food habits contributed to the trial's outcome, reducing the likelihood of the same error occurring twice. Manually determining the reason will take a significant amount of resources and time from your business intelligence team. An AI-powered metadata management solution can help you with quick and accurate conclusions while enabling transparency between teams. Let us take a look at the healthcare metadata management solution use cases. Understand your data's lineage Everyone's primary concern in the aftermath of the pandemic is healthcare. Many patients are being admitted and discharged from the hospital, resulting in a massive data volume. A robust metadata management solution will assist the business intelligence team in identifying the data source, detecting errors in the report, and correcting them at an earlier stage, much to the delight of the healthcare industry. For example, suppose anybody accuses your hospital of any mishaps. In that case, you can quickly identify the source of the problem and who is responsible for it without panicking and losing millions of dollars as a penalty with a healthcare metadata management solution. It records who last accessed the data, when, where, and who changed it. It enables you to track the data as it evolves over time and quickly identifies any problems in the hospital. With the right solution, you can get accurate answers and deal with day-to-day challenges in minutes. Find your data instantly Everyone wants to access relevant data with the swipe of a finger. However, it's like trying to find a needle in a haystack without its metadata. A sound healthcare metadata management system will assist you in making the most of your data collection. With automated data discovery, you can find your data in seconds. Quick data discovery allows doctors to prescribe more effective treatments and make clinical decisions that are more accurate and timely. It is a mandate in the healthcare industry to comply with regulatory requirements. To achieve compliance, the data team will need to put in a lot of effort during auditing to determine the data source. With a metadata management solution in place, you can quickly create a visual representation of data that will assist you in identifying each data set and its source. You can save your data team a lot of time searching for numbers, allowing them to focus more on analysis. Enable collaboration across your organization Data flow from various sources, including pharmacies, patients, wearables, billing and finance, and human resources, are labeled differently. The issue with this is that it results in data redundancy, which wastes resources in managing and analyzing the data. The metadata management solution creates a clearly defined glossary term for each information set in the organization, allowing for data collaboration across departments to address this issue. If business terminologies are not correctly named and defined, it will lead to confusion and mistakes. A hospital business glossary provides a common understanding of every term in the hospital industry, improving the quality of care and patient safety. Patients in the hospital sector are routinely referred to specialists for accurate diagnosis. The only issue is that vital information gets lost in the process. With a defined business glossary, metadata in the healthcare industry aims to solve this issue and enable effective collaboration of patient data across various healthcare organizations to use the patient history in emergencies, thereby avoiding catastrophes. Drive more significant insights and transform the healthcare industry with a metadata management solution The healthcare industries need to make rapid and intelligent decisions based on precise patient data. Between 20% and 25% of US healthcare spending is squandered. That's about a trillion dollars, and according to study, better data utilization could eliminate 50 to 75% of that waste. Automated metadata management is your go-to solution to achieve this instantly. McKinsey's At Xtract.io, we help the healthcare industry save money, prevent corruption, innovate, enable fast diagnosis and provide exemplary patient care with our robust . metadata management solution

metadata.io News on
HackerNoon and Around the Web

Winner for Best Startup in South San Francisco, United States!

metadata.io

31 employees

Since 2015

metadata.io Story Mentions

Articles Around the Web

Read More Tech Stories Related to #metadata.io

metadata.io News on HackerNoon and Around the Web

Winner for Best Startup in South San Francisco, United States!

metadata.io

31 employees

Since 2015

metadata.io Story Mentions

Articles Around the Web

Read More Tech Stories Related to #metadata.io

metadata.io News on
HackerNoon and Around the Web