Rotera

rotera

How to Write Your Own Typesafe React Router in 500 Lines

কিভাবে 500 লাইনে আপনার নিজের টাইপসেফ রিঅ্যাক্ট রাউটার লিখবেন

So schreiben Sie Ihren eigenen typsicheren React-Router in 500 Zeilen

Cómo escribir su propio enrutador Typesafe React en 500 líneas

Comment écrire votre propre routeur Typesafe React en 500 lignes

500 पंक्तियों में अपना खुद का टाइपसेफ रिएक्ट राउटर कैसे लिखें

独自のタイプセーフな React Router を 500 行で書く方法

500줄로 나만의 Typesafe React Router를 작성하는 방법

Como escrever seu próprio roteador Typesafe React em 500 linhas

Как написать свой собственный Typesafe React Router в 500 строк

Kendi Typesafe React Router'ınızı 500 Satırda Nasıl Yazabilirsiniz?

Cách viết Bộ định tuyến React Typesafe của riêng bạn trong 500 dòng

如何用 500 行代码编写自己的类型安全 React 路由器

https://www.youtube.com/shorts/9700RsFxMBc?embedable=true is an open-source API for building, storing & retrieving embeddings. Embedbase Today we will build a search engine for Paul Graham’s essays that we will use with Apple Siri Shortcuts, e.g. asking Siri questions about these essays. “Embeddings” are a concept in machine learning that allows you to compare data. We will not dive into the technical topic of embeddings today. A way to think about "embeddings" is like putting similar things together in a bag. So if you have a bag of toys, and you want to find a certain toy, you look in the bag and see what other toys are near it to figure out which one you want. A computer can do the same thing with words, putting similar words together in a bag, and then finding the word it wants based on the other words near it. When you want to use embeddings in your production software, you need to be able to store and access them easily. There are many vector databases and NLP models for storing and calculating embeddings. There are also some additional tricks to dealing with embeddings. For example, it can become to recompute when it is not necessary, e.g., if the note contains “dog” and then “dog,” you don’t necessarily want to recompute because the changed information might not be useful. costly and inefficient In addition, these vector databases require a steep learning curve and the need to understand machine learning. allows you to synchronize and semantically search data without knowing anything about machine learning, vector databases, and optimizing calculations in a few lines of code. Embedbase Searching Paul Graham essays with Siri In order, we will: Deploy Embedbase locally or on Google Cloud Run Build a crawler for Paul Graham essays using that ingest data into Embedbase Crawlee Build an Apple Siri Shortcut that lets you search Paul Graham essays’ through Embedbase with voice & natural language Build time! Tech stack Embedbase Typescript Crawlee + Playwright crawler for deployment Google Cloud Run for querying the index Apple Siri Shortcuts Cloning the repo git clone https://github.com/another-ai/embedbase
cd embedbase Setting up Pinecone Head to , login and create an index: Pinecone website We will name it “paul” and use dimension “1536” ( , under the hood, it is the “size” of OpenAI data structure “embeddings”), the other settings are less important. important to get this number right You need to get your Pinecone API key that will let Embedbase communicate with Pinecone: Configuring OpenAI Now you need to get your OpenAI configuration at (create an account if needed). https://platform.openai.com/account/api-keys Press “Create a new key”: Also, get your organization ID here: Creating your config Embedbase Now write and fill the values in the file “config.yaml” ( ): in embedbase directory # embedbase/config.yaml
# https://app.pinecone.io/
pinecone_index: "my index name"
# replace this with your environment
pinecone_environment: "us-east1-gcp"
pinecone_api_key: ""

# https://platform.openai.com/account/api-keys
openai_api_key: "sk-xxxxxxx"
# https://platform.openai.com/account/org-settings
openai_organization: "org-xxxxx" Running Embedbase 🎉 You can run now! Embedbase Start Docker, if you don’t have it, please install it by . following the instructions on the official website Now run Embedbase: docker-compose up (Optional) Cloud deployment This is optional, feel free to skip to the next part! Don’t want to handle infra? We’re launching a hosted version soon. Just click here to be first to know when it comes out If you are motivated, you can deploy to Google Cloud Run. Make sure to have a Google Cloud project and have installed the command line “gcloud” through . Embedbase official documentation # login to gcloud
gcloud auth login

# Get your Google Cloud project ID
PROJECT_ID=$(gcloud config get-value project)

# Enable container registry
gcloud services enable containerregistry.googleapis.com

# Enable Cloud Run
gcloud services enable run.googleapis.com

# Enable Secret Manager
gcloud services enable secretmanager.googleapis.com

# create a secret for the config
gcloud secrets create EMBEDBASE_PAUL_GRAHAM --replication-policy=automatic

# add a secret version based on your yaml config
gcloud secrets versions add EMBEDBASE_PAUL_GRAHAM --data-file=config.yaml

# Set your Docker image URL
IMAGE_URL="gcr.io/${PROJECT_ID}/embedbase-paul-graham:0.0.1"

# Build the Docker image for cloud deployment
docker buildx build . --platform linux/amd64 -t ${IMAGE_URL} -f ./search/Dockerfile

# Push the docker image to Google Cloud Docker registries
# Make sure to be authenticated https://cloud.google.com/container-registry/docs/advanced-authentication
docker push ${IMAGE_URL}

# Deploy Embedbase to Google Cloud Run
gcloud run deploy embedbase-paul-graham \
  --image ${IMAGE_URL} \
  --region us-central1 \
  --allow-unauthenticated \
  --set-secrets /secrets/config.yaml=EMBEDBASE_PAUL_GRAHAM:1 Building the Paul Graham essays’ crawler Web crawlers allow you to download all the pages of a website, it is the underlying algorithm used by Google. Clone the repository and install the dependencies: git clone https://github.com/another-ai/embedbase-paul-graham
cd embedbase-paul-graham
npm i Let’s look at the code, if you are overwhelmed with all the files necessary for a Typescript project, don’t worry & ignore them. // src/main.ts

// Here we want to start from the page that list all Paul's essays
const startUrls = ['http://www.paulgraham.com/articles.html'];

const crawler = new PlaywrightCrawler({
    requestHandler: router,
});

await crawler.run(startUrls); You can see that the crawler is initialized with “routes”, what are these mysterious routes? // src/routes.ts
router.addDefaultHandler(async ({ enqueueLinks, log }) => {
    log.info(`enqueueing new URLs`);
    await enqueueLinks({
        // Here we tell the crawler to only accept pages that are under
        // "http://www.paulgraham.com/" domain name,
        // for example if we find a link on Paul's website to an url
        // like "https://ycombinator.com/startups" if it will ignored
        globs: ['http://www.paulgraham.com/**'],
        label: 'detail',
    });
});

router.addHandler('detail', async ({ request, page, log }) => {
    // Here we will do some logic on all pages under
    // "http://www.paulgraham.com/" domain name

    // for example, collecting the page title
    const title = await page.title();

    // getting the essays' content
    const blogPost = await page.locator('body > table > tbody > tr > td:nth-child(3)').textContent();
    if (!blogPost) {
        log.info(`no blog post found for ${title}, skipping`);
        return;
    }
    log.info(`${title}`, { url: request.loadedUrl });
    
    // Remember that usually AI models and databases have some limits in input size
    // and thus we will split essays in chunks of paragraphs
    // split blog post in chunks on the \n\n
    const chunks = blogPost.split(/\n\n/);
    if (!chunks) {
        log.info(`no blog post found for ${title}, skipping`);
        return;
    }
    // If you are not familiar with Promises, don't worry for now
    // it's just a mean to do things faster
    await Promise.all(chunks.flatMap((chunk) => {
        const d = {
            url: request.loadedUrl,
            title: title,
            blogPost: chunk,
        };
        // Here we just want to send the page interesting
        // content into Embedbase (don't mind Dataset, it's optional local storage)
        return Promise.all([Dataset.pushData(d), add(title, chunk)]);
    }));
}); What is ? add() const add = (title: string, blogPost: string) => {
    // note "paul" in the URL, it can be anything you want
    // that will help you segment your data in
    // isolated parts
    const url = `${baseUrl}/v1/paul`;
    const data = {
        documents: [{
            data: blogPost,
        }],
    };
    // send the data to Embedbase using "node-fetch" library
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    }).then((response) => {
        return response.json();
    }).then((data) => {
        console.log('Success:', data);
    }).catch((error) => {
        console.error('Error:', error);
    });
}; Now you can run the crawler, it should take less than a minute to download & ingest everything in Embedbase. OpenAI credits will be used, for less than <$1 npm start If you deployed Embedbase to the cloud, please use # you can get your cloud run URL like this:
CLOUD_RUN_URL=$(gcloud run services list --platform managed --region us-central1 --format="value(status.url)" --filter="metadata.name=embedbase-paul-graham")
npm run playground ${CLOUD_RUN_URL} You should see some activity in your terminal (both Embedbase Docker container & the node process) without errors ( ). feel free to reach out for help otherwise (Optional) Searching through Embedbase in your terminal In the example repository you can notice “ ” which is a simple script that lets you interact with Embedbase in your terminal, the code is straightforward: src/playground.ts // src/playground.ts
const search = async (query: string) => {
    const url = `${baseUrl}/v1/paul/search`;
    const data = {
        query,
    };
    return fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    }).then((response) => {
        return response.json();
    }).then((data) => {
        console.log('Success:', data);
    }).catch((error) => {
        console.error('Error:', error);
    });
};

const p = prompt();

// this is an interactive terminal that let you search in paul graham
// blog posts using semantic search
// It is an infinite loop that will ask you for a query
// and show you the results
const start = async () => {
    console.log('Welcome to the Embedbase playground!');
    console.log('This playground is a simple example of how to use Embedbase');
    console.log('Currently using Embedbase server at', baseUrl);
    console.log('This is an interactive terminal that let you search in paul graham blog posts using semantic search');
    console.log('Try to run some queries such as "how to get rich"');
    console.log('or "how to pitch investor"');
    while (true) {
        const query = p('Enter a semantic query:');
        if (!query) {
            console.log('Bye!');
            return;
        }
        await search(query);
    }
};

start(); You can run it like this if you are running Embedbase locally: npm run playground Or, like this, if you deployed Embedbase to the cloud: npm run playground ${CLOUD_RUN_URL} Results: (Optional) Building Apple Siri Shortcut Fun time! Let’s build an Apple Siri Shortcut to be able to ask Siri questions about Paul Graham essays 😜 First, let’s start Apple Shortcuts: Create a new shortcut: We will name this shortcut “Search Paul” (be aware that it will be how you ask Siri to start the Shortcut, so pick something easy) In plain English, this shortcut asks the user a query and calls Embedbase with it, and tells Siri to pronounce out loud the essays it found. “Dictate text” let you ask your search query with voice (choose English language) We store the endpoint of in a “Text” for clarity, change according to your setup ("https://localhost:8000/v1/search” if you run locally) Embedbase Embedbase We set the endpoint in a variable again for clarity Same for the dictated text Now “Get contents of” will do an HTTP POST request to Embedbase using our previously defined during the crawling “vault_id” as “paul” and use the variable “query” for the “query” property “Get for in” will extract the property “similarities” from the Embedbase response “Repeat with each item in” will, for each similarity: Get the “document_path” property Add to a variable “paths” (a list) “Combine” will “join” the results with a new line (Optional, will show how below) This is a fun trick you can add to the shortcut for spiciness, using OpenAI GPT3 to transform a bit of the result text to sound better when Siri pronounces it We assemble the result into a “Text” to be voice-friendly Ask Siri to speak it https://www.youtube.com/shorts/9700RsFxMBc?embedable=true You can transform the results into nicer text using this functional GPT3 shortcut (fill “Authorization” value with “Bearer [YOUR OPENAI KEY]”) With Embedbase, you can build a semantic-powered product in no time without having the headache of building, storing & retrieving embeddings while keeping the cost low. Conclusion Please try Embedbase, drop an issue, and if you don’t mind supporting this effort & starring the repository ❤️ Don’t want to handle infra? We’re launching a hosted version soon. Just click here to be first to know when it comes out https://github.com/another-ai/embedbase-paul-graham?embedable=true https://www.youtube.com/shorts/9700RsFxMBc?embedable=true

Building an Embeddings Powered Product to Search Paul Graham Essays Using Siri

Creación de un producto con tecnología de incrustaciones para buscar ensayos de Paul Graham con Siri

Création d'un produit alimenté par intégrations pour rechercher des essais de Paul Graham à l'aide de Siri

सिरी का उपयोग करके पॉल ग्राहम निबंध खोजने के लिए एक एंबेडिंग संचालित उत्पाद का निर्माण

Siri を使用して Paul Graham のエッセイを検索する埋め込み機能を備えた製品の構築

Construindo um produto baseado em incorporações para pesquisar ensaios de Paul Graham usando a Siri

Xây dựng một sản phẩm hỗ trợ nhúng để tìm kiếm các bài luận của Paul Graham bằng Siri

构建嵌入驱动的产品以使用 Siri 搜索 Paul Graham 的散文

Today, we will be building a clone — a web service that allows users to upload and share text through links known as ‘pastes’. What follows is my journey of how I create a Pastebin clone using serverless functions through . If you are not familiar with Pastebin, I’d highly recommend you to give it a try before reading on. Pastebin Cloudflare Worker “Why Pastebin?” you might ask. Well, sending >50 lines long block of text (or code) through a chat app ( ) isn’t exactly the best way to communicate. looking at you, IRC TL;DR - Build a Serverless Pastebin Building a Pastebin clone using Cloudflare Worker and KV Project requirements and limitations planning Paste URL UUID generation logic with key generation service (KGS) GraphQL API design and implementation Live demo at paste.jerrynsh.com GitHub repository The design of this Pastebin clone would be very similar to , except we need to store the paste content instead of the original unshortened URL. building a TinyURL clone Before we begin, this is NOT a tutorial or guide on: How to tackle an actual system design interview Building a commercial grade paste tool like or Pastebin GitHub Gist Rather, this is a proof of concept (POC) of how to build a simple paste tool using serverless computing with Cloudflare Worker. To follow through this article, check out Steps 1 to 3 of this . Get Started Guide Let’s go! Requirements for Your Serverless Pastebin Let’s start by clarifying the use cases and constraints of our project. Functional Whenever a user enters a block of text (or code), our web service should generate a URL with a random key (UUID), e.g. paste.jerrynsh.com/aj7kLmN9 Whenever a user visits the generated URL, the user should be redirected to view the original paste content, i.e. the original block of text The link to the paste should expire after 24 hours The UUID should only contain alphanumeric characters ( ) Base62 The length of our UUID should be 8 characters Non-Functional Low latency Highly available Budget, Capacity, & Limitations Planning Like our previous attempt, the goal here is to host this service for free. With and in mind, our constraints are: Cloudflare Worker’s pricing platform limits 100k requests/day at 1k requests/min CPU runtime not exceeding 10ms Similar to a URL shortener, our application is expected to undergo a high read-to-write ratio. That being said, we will be using (KV in the following), a low-latency key-value store for this project. Cloudflare KV At the time of writing, the comes with the following : free tier of KV limits 100k reads/day 1k writes/day 1 GB of stored data (key size of 512 bytes; value size of 25 MiB) How Many Pastes Can We Store? In this section, we are going to do an estimation on how many pastes can our Pastebin clone possibly store, given the limitations above. Unlike storing a URL, storing text blocks can consume much more space (relatively speaking). Here are the assumptions that we are going to make: 1 character is 1 byte (using this ) byte counter Assuming on average, a single paste (file) can consist of about 200 lines of code (text), that would mean that the size of each paste would be about 10 KB With 1 GB of maximum storage size, that means that our Pastebin clone can only store up to 100,000 pastes Do take note that the limits are applied on a per-account basis. Storage & Database Cloudflare Worker KV For this POC, we are going to use KV as our database of choice. Let’s dive a little bit deeper into what it does. At present, CAP Theorem is often used to model distributed data stores. CAP Theorem states that a distributed system can only provide 2 of the following 3 guarantees ( ): source onsistency - is my data the same everywhere? C vailability - is my data always accessible? A artition tolerance - is my data resilient to regional outages? P In KV’s case, Cloudflare chooses to guarantee vailability and artition tolerance — which fits our non-functional requirement. Even though this combination screams eventual consistency, that is a tradeoff that we are fine with. A P Not forgetting to mention KV supports exceptionally high read volumes with ultra-low latency — perfect for our high read-to-write ratio application. Now that we understood the tradeoffs, let’s move on! How to Implement Your Serverless Pastebin URL Generation Logics The paste URL UUID generation logic is going to be very similar to a URL shortener. Here’s a quick summary of the possible approaches: Use a UUID generator to generate a UUID on demand for every new request Use the hash ( ) of the paste content as our UUID, then use the first N characters of the hash as part of our URL MD5 Using a combination of hashing + Base62 encoding Use an auto-incremented integer as our UUID However, we are going with another solution that is not mentioned above. Pre-generate UUID Key For this POC, we will pre-generate a list of UUID in a KV using a separate worker. We shall refer to the worker as a key generator service (KGS). Whenever we want to create a new paste, we will assign a pre-generated UUID to the new paste. So, what are the advantages of doing things in such a way? With this approach, we will not have to worry about key duplication or hash collisions (e.g. from approach 2 or 3) as our key generator will ensure that the keys inserted in our KV are unique. Here, we will be using 2 KVs: — used by our KGS to store a pre-generated list of UUID KEY_KV — used by our main app server to store a key-value pair; where the key is the UUID and the value is the content of a paste. PASTE_KV To create a KV, simply run the following commands with Wrangler CLI ( ). source # Production namespace:
wrangler kv:namespace create "PASTE_DB"
wrangler kv:namespace create "KEY_DB"

# This namespace is used for `wrangler dev` local testing:
wrangler kv:namespace create "PASTE_DB" --preview
wrangler kv:namespace create "KEY_DB" --preview For creating these KV namespaces, we will need to update our files to include the namespace bindings accordingly. To view your KV’s das board, visit . wrangler.toml h https://dash.cloudflare.com/<your_cloudflare_account_id>/workers/kv/namespaces How to Generate UUID For KGS to generate new UUIDs, we will be using the package. In case you’re lost, you can always refer to the folder on the GitHub repository. nanoid /kgs How does KGS know if there’s a duplicated key? Whenever KGS generates a key, it should always check if the UUID already exists in and . KEY_DB PASTE_DB In addition, the UUID should be removed from and be created at upon generating a new paste. We will cover the code in the API section. KEY_DB PASTE_DB // /kgs/src/utils/keyGenerator.js
import { customAlphabet } from "nanoid";
import { ALPHABET } from "./constants";

/*
Generate a `uuid` using `nanoid` package.

Keep retrying until a `uuid` that does not exist in both KV (`PASTE_DB` and `KEY_DB`) is generated.

KGS guarantees that the pre-generated keys are always unique.
*/
export const generateUUIDKey = async () => {
    const nanoId = customAlphabet(ALPHABET, 8);

    let uuid = nanoId();

    while (
        (await KEY_DB.get(uuid)) !== null &&
        (await PASTE_DB.get(uuid)) !== null
    ) {
        uuid = nanoId();
    }

    return uuid;
}; Running Out of Unique Keys to Generate Another potential issue that we might run into is — what should we do when all our UUIDs in our are completely used up? KEY_KV For this, we will set up a that replenishes our list of UUID periodically on a daily basis. To respond to a Cron trigger, we must add a event listener to the Workers script as shown later in the code below. Cron trigger "scheduled" // /kgs/src/index.js
import { MAX_KEYS } from "./utils/constants";
import { generateUUIDKey } from "./utils/keyGenerator";

/*
Pre-generate a list of unique `uuid`s.

Ensures that pre-generated `uuid` KV list always has `MAX_KEYS` number of keys.
*/
const handleRequest = async () => {
    const existingUUIDs = await KEY_DB.list();

    let keysToGenerate = MAX_KEYS - existingUUIDs.keys.length;

    console.log(`Existing # of keys: ${existingUUIDs.keys.length}.`);
    console.log(`Estimated # of keys to generate: ${keysToGenerate}.`);

    while (keysToGenerate != 0) {
        const newKey = await generateUUIDKey();

        await KEY_DB.put(newKey, "");
        console.log(`Generated new key in KEY_DB: ${newKey}.`);

        keysToGenerate--;
    }

    const currentUUIDs = await KEY_DB.list();
    console.log(`Current # of keys: ${currentUUIDs.keys.length}.`);
};

addEventListener("scheduled", (event) => {
    event.waitUntil(handleRequest(event));
}); As our POC can only support up to 1k writes/day, we will set the to generate to 1000. Feel free to tweak around according to your account limits. MAX_KEYS API On the high level, we probably need 2 APIs: Creating a URL for paste content Redirecting to the original paste content For this POC, we will be developing our API in using the server. Specifically, we will be using the worker template alongside . GraphQL Apollo GraphQL itty-router workers-graphql-server Before we move along, you can directly interact with the GraphQL API of this POC via the endpoint in case you are not familiar with GraphQL. GraphQL playground When lost, you can always refer to the folder. /server Routing To start, the entry point of our API server lies in where all the routing logic is handled by . src/index.js itty-router // server/src/index.js
const { missing, ThrowableRouter, withParams } = require("itty-router-extras");
const apollo = require("./handlers/apollo");
const index = require("./handlers/index");
const paste = require("./handlers/paste");
const playground = require("./handlers/playground");

const router = ThrowableRouter();

router.get("/", index);

router.all("/graphql", playground);

router.all("/__graphql", apollo);

router.get("/:uuid", withParams, paste);

router.all("*", () => missing("Not found"));

addEventListener("fetch", (event) => {
    event.respondWith(router.handle(event.request));
}); Creating Paste Typically to create any resource in GraphQL, we need a . In the REST API world, a GraphQL mutation to create would be very much similar to sending a request to a POST endpoint, e.g. . Here’s what our GraphQL mutation would look like: mutation /v1/api/paste mutation {
    createPaste(content: "Hello world!") {
        uuid
        content
        createdOn
        expireAt
    }
} Under the hood, the handler (resolver) should call that takes in from the HTTP JSON body. This endpoint is expected to return the following: createPaste content {
    "data": {
        "createPaste": {
            "uuid": "0pZUDXzd",
            "content": "Hello world!",
            "createdOn": "2022-01-29T04:07:06+00:00",
            "expireAt": "2022-01-30T04:07:06+00:00"
        }
    }
} You can check out the GraphQL schema . here Here’s the implementation in code of our resolvers: // /server/src/resolvers.js
const { ApolloError } = require("apollo-server-cloudflare");

module.exports = {
    Query: {
        getPaste: async (_source, { uuid }, { dataSources }) => {
            return dataSources.pasteAPI.getPaste(uuid);
        },
    },
    Mutation: {
        createPaste: async (_source, { content }, { dataSources }) => {
            if (!content || /^\s*$/.test(content)) {
                throw new ApolloError("Paste content is empty");
            }

            return dataSources.pasteAPI.createPaste(content);
        },
    },
}; To mitigate spam, we also added a small check to prevent the creation of empty pastes. Paste Creation Data Source We are keeping the API logic that interacts with our database (KV) within . /datasources As mentioned previously, we need to remove the key used from our KGS KV to avoid the risk of assigning duplicated keys for new pastes. KEY_DB Here, we can also set our key to have the of one day upon paste creation: expirationTtl // /server/src/datasources/paste.js
const { ApolloError } = require('apollo-server-cloudflare')
const moment = require('moment')

/*
Create a new paste in `PASTE_DB`.

Fetch a new `uuid` key from `KEY_DB`.

UUID is then removed from `KEY_DB` to avoid duplicates.
*/
async createPaste(content) {
    try {
        const { keys } = await KEY_DB.list({ limit: 1 })
        if (!keys.length) {
            throw new ApolloError('Ran out of keys')
        }
        const { name: uuid } = keys[0]

        const createdOn = moment().format()
        const expireAt = moment().add(ONE_DAY_FROM_NOW, 'seconds').format()

        await KEY_DB.delete(uuid) // Remove key from KGS
        await PASTE_DB.put(uuid, content, {
            metadata: { createdOn, expireAt },
            expirationTtl: ONE_DAY_FROM_NOW,
        })

        return {
            uuid,
            content,
            createdOn,
            expireAt,
        }
    } catch (error) {
        throw new ApolloError(`Failed to create paste. ${error.message}`)
    }
} Similarly, I have also created a to retrieve the paste content via UUID. We won’t be covering it in this article but feel free to check it out in the . To try it out on the : getPaste GraphQL query source code playground query {
    getPaste(uuid: "0pZUDXzd") {
        uuid
        content
        createdOn
        expireAt
    }
} In this POC, we won’t be supporting any deletion of the pastes since pastes would expire after 24 hours. Getting Paste Whenever a user visits a paste URL (GET ) the original content of the paste should be returned. If an invalid URL is entered, users should get a missing error code. View the full HTML . /:uuid here // /server/src/handlers/paste.js
const { missing } = require("itty-router-extras");
const moment = require("moment");

const handler = async ({ uuid }) => {
    const { value: content, metadata } = await PASTE_DB.getWithMetadata(uuid);
    if (!content) {
        return missing("Invalid paste link");
    }

    const expiringIn = moment(metadata.expireAt).from(metadata.createdOn);

    return new Response(html(content, expiringIn), {
        headers: { "Content-Type": "text/html" },
    });
}; Finally, to start the development API server locally, simply run wrangler dev Deploying Your Pastebin Before publishing your code, you will need to edit the files (within & ) and add your Cloudflare inside. You can read more information about configuring and publishing your code can be found in the . wrangler.toml server/ kgs/ account_id official documentation Do make sure that the KV namespace bindings are added to your files as well. wrangler.toml To publish any new changes to your Cloudflare Worker, simply run in the respective service. wrangler publish To deploy your application to a custom domain, check out . this short clip CI/CD In the , I have also set up a CI/CD workflow using GitHub Actions. To use , add into your GitHub repository secrets. GitHub repository Wrangler actions CF_API_TOKEN Conclusion: Building a Pastebin I did not expect this POC to take me this long to write and complete, I probably slacked more than I should. Like my previous post, I would love to end this with some improvements that can be made (or sucked into the backlog blackhole for eternity) in the future: potential Allowing users to set custom expiry Pastes edit and deletion Syntax highlighting Analytics Private pastes with password protection Like URL shorteners, Paste tools have a certain stigma about them — both tools make URLs opaque which spammers love to abuse. Well, at least the next time you ask “why doesn’t this code work?”, you’ll have your own paste tool to use, at least until you add in syntax highlighting.

How to Build Your Own Serverless Pastebin Tool

Designing a URL shortener such as and is one of the most common system design interview questions in software engineering. TinyURL Bitly While meddling around with Cloudflare Worker to , it gave me an idea to build an actual URL shortener that can be used by anyone. sync the Daily LeetCode Challenge to my Todoist What follows is my thought process with code examples on how we can create a URL shortener using . If you would like to follow through, you would need and use the . Cloudflare Worker a Cloudflare account Wrangler CLI TL;DR Building a URL shortener for free with Cloudflare Worker and KV Project requirements and limitations planning Short URL UUID generation logic Live demo at s.jerrynsh.com GitHub repository Before we begin, do not get your hopes up too high. This is not a guide on: How to tackle an actual System Design interview Building a commercial grade URL shortener like TinyURL or Bitly But, rather a proof of concept (POC) of how one builds an actual URL shortener service using serverless computing. So, throw “scalability”, “partitioning”, “replicas”, etc. out of the window and buckle up. I hope this will find this post insightful and entertaining to read! Requirements Like any System Design interview, let’s start by defining some functional and non-functional requirements. Functional Given a URL, our service should return a unique and short URL of it. E.g. → https://jerrynsh.com/how-to-write-clean-code-in-python/ s.jerrynsh.com/UcFDnviQ Whenever a user tries to access , the user would be directed back to the original URL. s.jerrynsh.com/UcFDnviQ The UUID (I sometimes call it URL key because it is the key of our storage object) should adhere to the (26 + 26 + 10): Base62 encoding scheme A lower case alphabet 'a' to 'z', a total of 26 characters An upper case alphabet 'A' to 'Z', a total of 26 characters A digit '0' to '9', a total of 10 characters In this POC, we will not be supporting custom short links The length of our UUID should be ≤ 8 characters as 62⁸ would give us about ~218 trillion possibilities. The short URL generated should never expire. Non-Functional Low latency High availability Budget, Capacity, & Limitations Planning The aim is simple — I want to be able to host this service for free. As a result, our constraints depend largely on and . Cloudflare Worker’s pricing platform limits At the time of writing this, the constraints per account to host our service for free are: 100k requests/day at 1k requests/min CPU runtime not exceeding 10ms Like most URL shorteners, our application is expected to encounter high reads but relatively low writes. To store our data, we will be using that supports high read with low latency — perfect for our use case. Cloudflare KV, a key-value data store Moving on from our previous constraints, the and allows us to have: free tier of KV limit 100k reads/day 1k writes/day 1 GB of stored data (key size of 512 bytes; value size of 25 MiB) How many short URLs can we store With 1 GB of free maximum stored data limit in mind, let’s try to estimate how many URLs can we possibly store. Here, I am using to estimate the byte size of the URL: this tool 1 character is 1 byte Since our UUID should only be a maximum of 8 characters, we have no issue with the key size limit. The value size limit on the other hand — I am making a calculated guess that the maximum URL size should average around 200 characters. Thus, I believe it is safe to assume that each stored object should be an average of ≤400 bytes, which is very well below 25 MiB. And finally, with 1 GB to work with, our URL shortener can support up to a total of 2,500,000 (1 GB divided by 400 bytes) short URLs. I know, I know. 2.5 million URLs is not a lot. Looking back, we could have made the length of our UUID ≥ 4 instead of 8 as 62⁴ possibilities are well more than 2.5 million. Having that said, let’s stick with a UUID with a length of 8. Overall, I would say that the free tier for Cloudflare Worker and KV is pretty generous and decent enough for our POC. Do note that the limits are applied on a per-account basis. Storage & Database As I mentioned earlier, we will be using Cloudflare KV as the database to store our shortened URLs as we are expecting more reads than writes. Eventually Consistent One important note — while KV can support exceptionally high read globally, it is an eventually consistent storage solution. In other words, any writes (i.e. creating a short URL) may take up to 60 seconds to propagate globally — this is a downside we are okay with. Through my experiments, I have yet to encounter anything more than a couple of seconds. Atomic Operation Reading about , KV is not ideal for situations that require atomic operations (e.g. a bank transaction between two account balances). Lucky for us, this does not concern us at all. how KV works For our POC, the key of our KV would be a UUID that follows after our domain name (e.g. ) while the value would consist of the long URL given by the users. s.jerrynsh.com/UcFDnviQ Creating a KV To create a KV, simply run the following commands with Wrangler CLI. # Production namespace:
wrangler kv:namespace create "URL_DB"

# This namespace is used for `wrangler dev` local testing:
wrangler kv:namespace create "URL_DB" --preview For creating these KV namespaces, we also need to update our file to include the namespace bindings accordingly. You can view your KV’s dashboard by visiting . wrangler.toml https://dash.cloudflare.com/<your_cloudflare_account_id>/workers/kv/namespaces Short URL UUID Generation Logic This is probably the most important aspect of our entire application. Based on our requirements, the aim is to generate an alphanumeric UUID for each URL whereby the length of our key should be no more than 8 characters. In a perfect world, the UUID of the short link generated should have no collision. Another important aspect to consider is — what if multiple users shorten the same URL? Ideally, we should also check for duplication. Let’s consider the following solutions: 1. Using a UUID generator https://jerrynsh.com/stop-using-exceptions-like-this-in-python/ → UUID Generator → s5OwuhqW → s.jerrynsh.com/s5OwuhqW This solution is relatively straightforward to implement. For every new URL that we encounter, we simply call our UUID generator to give us a new UUID. We would then assign the new URL with the generated UUID as our key. In the case whereby the UUID has already existed (collision) in our KV, we can keep retrying. However, we do want to be mindful of retrying as it can be relatively expensive. Furthermore, using a UUID generator would not help us when it comes to dealing with duplications in our KV. Looking up the long URL value within our KV would be relatively slow. 2. Hashing the URL https://betterprogramming.pub/how-to-write-clean-code-in-python-5d67746133f2 → MD5 Hash → 99d641e9923e135bd5f3a19dca1afbfa → 99d641e9 → s.jerrynsh.com/99d641e9 On the other hand, hashing a URL allows us to check for duplicated URLs because passing a string (URL) through a hashing function would always yield the same result. We can then use the result (key) to look up in our KV to check for duplication. Assuming that we use , we would end up with ≥ 8 characters for our key. So, what if we could just take the first 8 bytes of the generated MD5 hash? Problem solved right? MD5 Not exactly. Hashing function would always produce collisions. To reduce the , we could generate a longer hash. But, it would not be very user-friendly. Also, we want to keep our UUID ≤ 8 characters. probability of collision 3. Using an incremental counter https://betterprogramming.pub/3-useful-python-f-string-tricks-you-probably-dont-know-f908f7ed6cf5 → Counter → s.jerrynsh.com/12345678 Possibly the simplest yet most scalable solution in my opinion. Using this solution, we will not run into issues with collision. Whenever we consume the entire set (from 00000000 to 99999999), we can simply increment the number of characters in our UUID. Nonetheless, I do not want users to be able to randomly guess a short URL by simply visiting . So, this solution is out of the question. s.jerrynsh.com/12345678 Which to choose There are a lot of other solutions (e.g. pre-generate a list of keys and assign an unused key when a new request comes in) out there with their pros and cons. For our POC, we are going with as it is straightforward to implement and I am fine with duplicates. To cope with duplicates, we could cache our users’ requests to shorten URLs. solution 1 Nano ID To generate a UUID, we are using the package. To estimate our rate of collision, we can use the : nanoid Nano ID collision calculator Okay enough talk, let’s write some code! To handle the possibility of collision, we simply have to keep retrying: // utils/urlKey.js
import { customAlphabet } from "nanoid";

const ALPHABET =
    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

/*
Generate a unique `urlKey` using `nanoid` package.
Keep retrying until a unique urlKey which does not exist in the URL_DB.
*/
export const generateUniqueUrlKey = async () => {
    const nanoId = customAlphabet(ALPHABET, 8);
    let urlKey = nanoId();
    while ((await URL_DB.get(urlKey)) !== null) {
        urlKey = nanoId();
    }
    return urlKey;
}; API In this section, we will define the API endpoints that we would like to support. This project is initialized using the worker — it helps us with all the routing logic: itty-router template wrangler generate <project-name> https://github.com/cloudflare/worker-template-router The entry point of our project lies in the index.js: // index.js
import { Router } from "itty-router";
import { createShortUrl } from "./src/handlers/createShortUrl";
import { redirectShortUrl } from "./src/handlers/redirectShortUrl";
import { LANDING_PAGE_HTML } from "./src/utils/constants";

const router = Router();

// GET landing page html
router.get("/", () => {
    return new Response(LANDING_PAGE_HTML, {
        headers: {
            "content-type": "text/html;charset=UTF-8",
        },
    });
});

// GET redirects short URL to its original URL.
router.get("/:text", redirectShortUrl);

// POST creates a short URL that is associated with its an original URL.
router.post("/api/url", createShortUrl);

// 404 for everything else.
router.all("*", () => new Response("Not Found", { status: 404 }));

// All incoming requests are passed to the router where your routes are called and the response is sent.
addEventListener("fetch", (e) => {
    e.respondWith(router.handle(e.request));
}); In the name of a better user experience, I have created a simple HTML landing page that anyone could use; you can get the landing page’s HTML . here Creating short URL To start, we need a POST endpoint ( ) that calls that parses the from the body and generates a short URL from it. /api/url createShortUrl originalUrl Here’s the code example: // handlers/createShortUrl.js
import { generateUniqueUrlKey } from "../utils/urlKey";

export const createShortUrl = async (request, event) => {
    try {
        const urlKey = await generateUniqueUrlKey();

        const { host } = new URL(request.url);
        const shortUrl = `https://${host}/${urlKey}`;

        const { originalUrl } = await request.json();
        const response = new Response(
            JSON.stringify({
                urlKey,
                shortUrl,
                originalUrl,
            }),
            { headers: { "Content-Type": "application/json" } },
        );

        event.waitUntil(URL_DB.put(urlKey, originalUrl));

        return response;
    } catch (error) {
        console.error(error, error.stack);
        return new Response("Unexpected Error", { status: 500 });
    }
}; To try this out locally (you can use to start the server locally), use the command bellow: wrangler dev curl curl --request POST \\
  --url http://127.0.0.1:8787/api/url \\
  --header 'Content-Type: application/json' \\
  --data '{
	"originalUrl": "https://www.google.com/"
}' Redirecting short URL As a URL shortening service, we want users to be able to redirect to their original URL when they visit a short URL: // handlers/redirectShortUrl.js
export const redirectShortUrl = async ({ params }) => {
    const urlKey = decodeURIComponent(params.text);
    const originalUrl = await URL_DB.get(urlKey);
    if (originalUrl) {
        return Response.redirect(originalUrl, 301);
    }
    return new Response("Invalid Short URL", { status: 404 });
}; How about deletion? Since the user does not require any authorization to shorten any URL, the decision was made to move forward without a deletion API as it makes no sense that any user can simply delete another user’s short URL. To try out our URL shortener locally, simply run wrangler dev. Bonus: dealing with duplication with caching NOTE: Currently, this only works with a custom domain. What happens if a user decides to repeatedly shorten the same URL? We wouldn’t want our KV to end up with duplicated URLs with unique UUID assigned to them right? To mitigate this, we could use a cache middleware that caches the originalUrl submitted by users using the : Cache API import { URL_CACHE } from "../utils/constants";

export const shortUrlCacheMiddleware = async (request) => {
    const { originalUrl } = await request.clone().json();

    if (!originalUrl) {
        return new Response("Invalid Request Body", {
            status: 400,
        });
    }

    const cache = await caches.open(URL_CACHE);
    const response = await cache.match(originalUrl);

    if (response) {
        console.log("Serving response from cache.");
        return response;
    }
}; To use this cache middleware, simply update our accordingly: index.js // index.js
...
router.post('/api/url', shortUrlCacheMiddleware, createShortUrl)
... Finally, we need to make sure that we update our cache instance with the original URL upon shortening it: // handlers/createShortUrl.js
import { URL_CACHE } from "../utils/constants";
import { generateUniqueUrlKey } from "../utils/urlKey";

export const createShortUrl = async (request, event) => {
    try {
        const urlKey = await generateUniqueUrlKey();

        const { host } = new URL(request.url);
        const shortUrl = `https://${host}/${urlKey}`;

        const { originalUrl } = await request.json();
        const response = new Response(
            JSON.stringify({
                urlKey,
                shortUrl,
                originalUrl,
            }),
            { headers: { "Content-Type": "application/json" } },
        );

        const cache = await caches.open(URL_CACHE); // Access our API cache instance

        event.waitUntil(URL_DB.put(urlKey, originalUrl));
        event.waitUntil(cache.put(originalUrl, response.clone())); // Update our cache here

        return response;
    } catch (error) {
        console.error(error, error.stack);
        return new Response("Unexpected Error", { status: 500 });
    }
}; During my testing with , it seems like the . wrangler dev Worker cache does not work locally or on any worker.dev domain The workaround to test this is to run to publish the application on a custom domain. You can validate the changes by sending a request to the endpoint while observing the log via . wrangler publish /api/url wrangler tail Deployment No side project is ever done without hosting it right? Before publishing your code you need to edit the file and add your Cloudflare inside. You can read more information about configuring and publishing your code can be found in the . wrangler.toml account_id official documentation To deploy and publish any new changes to your Cloudflare Worker, simply run . To deploy your application to a custom domain, check out this . wrangler publish short clip In case you are lost halfway through, you can always check out the GitHub repository . And that’s it! here Final Thoughts Honestly, this is the most fun I have had in a while — researching, writing, and building this POC at the same time. There’s a lot more on top of my mind that we could have done for our URL shortener; just to name a few: Storing such as creation date, number of visits metadata Adding authentication Handle short URL deletion and expiration Analytics for users Custom link A problem that most URL shortening services face is that short URLs are often abused to lead users to malicious sites. I think it’d be an interesting topic to look further into. That’s all for today! Thank you for reading and cheers!

How to Build Your Own TinyURL

Breadcrumbs are a website navigation tool that allows a user to see their current page's "stack" of how it is nested under any parent pages. Users can then jump back to a parent page by clicking the associated breadcrumb link. These increase the User Experience of the application, making it easier for the users to navigate nested pages efficiently and effectively. "Crumbs" Breadcrumbs are popular enough that if you are building a web dashboard or application, you may have considered adding them. Generating these breadcrumb links efficiently and with the appropriate context is key to an improved user experience. React component that will parse the current route and build a dynamic breadcrumbs display that can handle both static & dynamic routes efficiently. Let's build a smart NextBreadcrumbs My projects usually revolve around and (formerly Material-UI) so that is the angle that I am going to approach this problem from, although the solution should work for Nextjs-related application. Nextjs MUI any Static Route Breadcrumbs To start, our component will only handle static routes, meaning that our project has only static pages defined in the directory. NextBreadcrumbs pages The following are examples of static routes because they do not contain s and s in the route names, meaning the directory structure lines up 1:1 exactly with the expected URLs that they serve. [ ] --> pages/index.js / --> pages/about.js /about --> pages/my/super/nested/route.js /my/super/nested/route The solution will be extended to handle dynamic routes later. Defining the Basic Component We can start with the basic component that uses the component as a baseline. MUI Breadcrumbs import Breadcrumbs from '@mui/material/Breadcrumbs';
import * as React from 'react';

export default function NextBreadcrumbs() {
  return (
    <Breadcrumbs aria-label="breadcrumb" />
  );
} The above creates the basic structure of the React component, imports the correct dependencies, and renders an empty MUI component. NextBreadcrumbs Breadcrumbs We can then add in the hooks, which will allow us to build the breadcrumbs from the current route. next/router We also create a component that will be used to render each link. This is a pretty dumb component for now, except that it will render normal text instead of a link for the last breadcrumb. Crumb In a situation like , it would render as the following: /settings/notifications Home (/ link) > Settings (/settings link) > Notifications (no link) This is because the user is already on the last breadcrumb's page, so there is no need to link out to the same page. All the other crumbs are rendered as links to be clicked. import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { useRouter } from 'next/router';
import React from 'react';


export default function NextBreadcrumbs() {
  // Gives us ability to load the current route details
  const router = useRouter();
  
  return (
    <Breadcrumbs aria-label="breadcrumb" />
  );
}


// Each individual "crumb" in the breadcrumbs list
function Crumb({ text, href, last=false }) {
  // The last crumb is rendered as normal text since we are already on the page
  if (last) {
  	return <Typography color="text.primary">{text}</Typography>
  }

  // All other crumbs will be rendered as links that can be visited 
  return (
    <Link underline="hover" color="inherit" href={href}>
      {text}
    </Link>
  );
} With this layout, we can then dive back into the component to generate the breadcrumbs from the route. NextBreadcrumbs Some existing code will start to be omitted to keep the code pieces smaller. The full example is shown below. We will generate a list of breadcrumb objects that contain the information to be rendered by each element. Each breadcrumb will be created by parsing the property, which is a string containing the route as shown in the browser URL bar. Crumb Nextjs router's asPath We will strip any query parameters, such as , from the URL to make the breadcrumb creation process more straightforward. ?query=value export default function NextBreadcrumbs() {
  // Gives us ability to load the current route details
  const router = useRouter();
  
  function generateBreadcrumbs() {
    // Remove any query parameters, as those aren't included in breadcrumbs
    const asPathWithoutQuery = router.asPath.split("?")[0];
	
	// Break down the path between "/"s, removing empty entities
	// Ex:"/my/nested/path" --> ["my", "nested", "path"]
	const asPathNestedRoutes = asPathWithoutQuery.split("/")
												 .filter(v => v.length > 0);
	
	// Iterate over the list of nested route parts and build
	// a "crumb" object for each one.
	const crumblist = asPathParts.map((subpath, idx) => {
	  // We can get the partial nested route for the crumb
	  // by joining together the path parts up to this point.
	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
	  // The title will just be the route string for now
	  const title = subpath;
  	  return { href, text }; 
    })
	
	// Add in a default "Home" crumb for the top-level
	return [{ href: "/", text: "Home" }, ...crumblist];
  }
  
  // Call the function to generate the breadcrumbs list
  const breadcrumbs = generateBreadcrumbs();
  
  return (
    <Breadcrumbs aria-label="breadcrumb" />
  );
} With this list of breadcrumbs, we can now render them using the and components. As previously mentioned, only the portion of our component is shown for brevity. Breadcrumbs Crumb return // ...rest of NextBreadcrumbs component above...
  return (
    {/* The old breadcrumb ending with '/>' was converted into this */}
    <Breadcrumbs aria-label="breadcrumb">
	  {/*
	    Iterate through the crumbs, and render each individually.
		We "mark" the last crumb to not have a link.
      */}
	  {breadcrumbs.map((crumb, idx) => (
	    <Crumb {...crumb} key={idx} last={idx === breadcrumbs.length - 1} />
	  ))}
	</Breadcrumbs>
  ); This should start generating some very basic - but working - breadcrumbs on our site once rendered; would render as /user/settings/notifications Home > user > settings > notifications Memoizing Generated Breadcrumbs There is a quick improvement that we can make before going further though. Right now the breadcrumb list is recreated every time the component re-renders, so we can the crumb list for a given route to save some performance. To accomplish this, we can wrap our function call in the React hook. memoize generateBreadcrumbs useMemo const router = useRouter();
  
  // this is the same "generateBreadcrumbs" function, but placed
  // inside a "useMemo" call that is dependent on "router.asPath"
  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathWithoutQuery = router.asPath.split("?")[0];
	const asPathNestedRoutes = asPathWithoutQuery.split("/")
												 .filter(v => v.length > 0);

	const crumblist = asPathParts.map((subpath, idx) => {
	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return { href, text: subpath }; 
    })
	
	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath]);
  
  return // ...rest below... Improving Breadcrumb Text Display Before we start incorporating dynamic routes, we can clean this current solution up more by including a nice way to change the text shown for each crumb generated. Right now, if we have a path like , then it will show: /user/settings/notifications Home > user > settings > notifications which is not very appealing. We can provide a function to the component that will try to generate a more user-friendly name for each of these nested route crumbs. NextBreadcrumbs const _defaultGetDefaultTextGenerator= path => path

export default function NextBreadcrumbs({ getDefaultTextGenerator=_defaultGetDefaultTextGenerator }) {
  const router = useRouter();

  // Two things of importance:
  // 1. The addition of getDefaultTextGenerator in the useMemo dependency list
  // 2. getDefaultTextGenerator is now being used for building the text property
  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathWithoutQuery = router.asPath.split("?")[0];
	const asPathNestedRoutes = asPathWithoutQuery.split("/")
												 .filter(v => v.length > 0);

	const crumblist = asPathParts.map((subpath, idx) => {
	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return { href, text: getDefaultTextGenerator(subpath, href) }; 
    })

	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath, getDefaultTextGenerator]);
  
  return ( // ...rest below and then our parent component can have something like the following, to title-ize the subpaths, or maybe even replace them with a new string. {/* Assume that `titleize` is written and works appropriately */}
<NextBreadcrumbs getDefaultTextGenerator={path => titleize(path)} /> This implementation would then result in the following breadcrumbs. The full code example at the bottom has more examples of this. Home > User > Settings > Notifications Nextjs Dynamic Routes Nextjs's router allows for including that uses to allow for URLs to have slugs, UUIDs, and other dynamic values that will then be passed to your views. dynamic routes Pattern Matching For example, if your Nextjs application has a page component at , then the routes and will match it. pages/post/[post_id].js /post/1 /post/abc For our breadcrumbs component, we would like to show the name of the associated post instead of just its UUID. This means that the component will need to dynamically look up the post data based on the nested URL route path and regenerate the text of the associated crumb. Right now, if you visit , you would see breadcrumbs that look like /post/abc post > abc but if the post with UUID has a title of , then we want to change the breadcrumbs to say My First Post post > My First Post Let's dive into how that can happen using functions. async Nextjs Router: vs asPath pathname The router instance in our code has two useful properties for our component; and . The router is the URL path as shown directly in the URL bar of the browser. The is a more internal version of the URL that has the dynamic parts of the path replaced with their components. next/router NextBreadcrumbs asPath pathname asPath pathname [parameter] For example, consider the path from above. /post/abc The would be as the URL is shown asPath /post/abc The would be as our directory dictates pathname /post/[post_id] pages We can use these two URL path variants to build a way to dynamically fetch information about the breadcrumb, so we can show more contextually appropriate information to the user. There is a lot going on below, so please re-read it - and the helpful notes below it - a few times over if needed. const _defaultGetTextGenerator = (param, query) => null;
const _defaultGetDefaultTextGenerator = path => path;

// Pulled out the path part breakdown because its
// going to be used by both `asPath` and `pathname`
const generatePathParts = pathStr => {
  const pathWithoutQuery = pathStr.split("?")[0];
  return pathWithoutQuery.split("/")
						 .filter(v => v.length > 0);
}

export default function NextBreadcrumbs({
  getTextGenerator=_defaultGetTextGenerator,
  getDefaultTextGenerator=_defaultGetDefaultTextGenerator
}) {
  const router = useRouter();

  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathNestedRoutes = generatePathParts(router.asPath);
	const pathnameNestedRoutes = generatePathParts(router.pathname);

	const crumblist = asPathParts.map((subpath, idx) => {
	  // Pull out and convert "[post_id]" into "post_id"
	  const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", "");

	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return {
	  	href, textGenerator: getTextGenerator(param, router.query),
		text: getDefaultTextGenerator(subpath, href)
	  }; 
    })

	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]);
  
  return ( // ...rest below The breakdown was moved to a function since the same logic is used for both and . asPath generatePathParts router.asPath router.pathname Determine the eter that lines up with the dynamic route value, so would result in . param abc post_id The nested route eter and all associated query values ( ) are passed to a provided which will return either a value or a response that should return the dynamic string to use in the associated breadcrumb. param router.query getTextGenerator null Promise The dependency array has more dependencies added; , , and . useMemo router.pathname router.query getTextGenerator Finally, we need to update the component to use this value if it is provided for the associated crumb object. Crumb textGenerator function Crumb({ text: defaultText, textGenerator, href, last=false }) {

  const [text, setText] = React.useState(defaultText);
  
  useEffect(async () => {
    // If `textGenerator` is nonexistent, then don't do anything
    if (!Boolean(textGenerator)) { return; }
	// Run the text generator and set the text again
    const finalText = await textGenerator();
    setText(finalText);
  }, [textGenerator]);

  if (last) {
  	return <Typography color="text.primary">{text}</Typography>
  }

  return (
    <Link underline="hover" color="inherit" href={href}>
      {text}
    </Link>
  );
} The breadcrumbs can now handle both static routes and dynamic routes cleanly with the potential to display user-friendly values. While the above code is the business logic of the component, this can all be used with a parent component that looks like the final example below. Full Example // NextBreadcrumbs.js

const _defaultGetTextGenerator = (param, query) => null;
const _defaultGetDefaultTextGenerator = path => path;

// Pulled out the path part breakdown because its
// going to be used by both `asPath` and `pathname`
const generatePathParts = pathStr => {
  const pathWithoutQuery = pathStr.split("?")[0];
  return pathWithoutQuery.split("/")
						 .filter(v => v.length > 0);
}

export default function NextBreadcrumbs({
  getTextGenerator=_defaultGetTextGenerator,
  getDefaultTextGenerator=_defaultGetDefaultTextGenerator
}) {
  const router = useRouter();

  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathNestedRoutes = generatePathParts(router.asPath);
	const pathnameNestedRoutes = generatePathParts(router.pathname);

	const crumblist = asPathParts.map((subpath, idx) => {
	  // Pull out and convert "[post_id]" into "post_id"
	  const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", "");

	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return {
	  	href, textGenerator: getTextGenerator(param, router.query),
		text: getDefaultTextGenerator(subpath, href)
	  }; 
    })

	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]);
  
  return (
    <Breadcrumbs aria-label="breadcrumb">
	  {breadcrumbs.map((crumb, idx) => (
	    <Crumb {...crumb} key={idx} last={idx === breadcrumbs.length - 1} />
	  ))}
	</Breadcrumbs>
  );
}


function Crumb({ text: defaultText, textGenerator, href, last=false }) {

  const [text, setText] = React.useState(defaultText);
  
  useEffect(async () => {
    // If `textGenerator` is nonexistent, then don't do anything
    if (!Boolean(textGenerator)) { return; }
	// Run the text generator and set the text again
    const finalText = await textGenerator();
    setText(finalText);
  }, [textGenerator]);

  if (last) {
  	return <Typography color="text.primary">{text}</Typography>
  }

  return (
    <Link underline="hover" color="inherit" href={href}>
      {text}
    </Link>
  );
} and then an example of this being used can be seen below. Note that is used to create only one reference to each helper function which will prevent unnecessary re-renders of the breadcrumbs when/if the page layout component re-rendered. You also move this out to the top-level scope of the file, but I don't like to pollute the global scope like that. NextBreadcrumbs useCallback could // MyPage.js (Parent Component)

import React from 'react';
import NextBreadcrumbs from "./NextBreadcrumbs";


function MyPageLayout() {

  // Either lookup a nice label for the subpath, or just titleize it
  const getDefaultTextGenerator = React.useCallback((subpath) => {
    return {
	  "post": "Posts",
	  "settings": "User Settings",
	}[subpath] || titleize(subpath);
  }, [])
  
  // Assuming `fetchAPI` loads data from the API and this will use the
  // parameter name to determine how to resolve the text. In the example,
  // we fetch the post from the API and return it's `title` property
  const getTextGenerator = React.useCallback((param, query) => {
    return {
	  "post_id": () => await fetchAPI(`/posts/${query.post_id}/`).title,
	}[param];
  }, []);

  return () {
    <div>
	  {/* ...Whatever else... */}
	  <NextBreadcrumbs
	    getDefaultTextGenerator={getDefaultTextGenerator}
		getTextGenerator={getTextGenerator}
	  />
	  {/* ...Whatever else... */}
	</div>
  }

} This is one of my more in-depth and technical posts, so I hope you enjoyed it, and please comment or reach out so that I can ensure consistency and correctness. Hopefully, this post taught you a few strategies or concepts about Nextjs. If you liked this or , please for weekly tech updates! my other posts subscribe to my brand new Newsletter First published here

Implement a Dynamic Breadcrumb in React/NextJS

Implementar una ruta de navegación dinámica en React/NextJS

Disclaimer Next.js is a dynamically developed framework and a lot of old articles about it could be outdated because Next.js made a huge leap forward. I wrote this article in May 2021 and now the current version is 10.2.3 I suggest checking while you look at examples because some tips could be outdated due to improved API docs Features Were Released You Probably Don't Know If you use Next.js for a long time your projects should have a huge amount of code, and you just keep writing it in the style that it already has. Sometimes because you use to and sometimes because you use your codebase as a catalog of snippets and examples. That's why you can skip new cool stuff. Server redirects and not found status These features, as well as previous ones, were released in version 10 and I still see a lot of questions about how to make redirect on the server. First of all, I suggest checking if you use modern fetching methods because only they get updates and new features. I explained other reasons why to use modern fetching methods. here Here is a simple way to make redirect or show page 404: { { : { : , : ,
		}
	}
} { { : }
} // Redirect export ( ) function getServerSideProps return redirect destination '/' permanent false // Page 404 export ( ) function getServerSideProps return notFound true Automatic resolving of href param Try to find in your project that has and as prop as well. If you found it, it's time to update that links. Because starts with 10.x version you don't need to pass both of the params you can drop param and rename to , and it will work well. next/link href href as href Link { } { } import from 'next/link' // Before ( ) function MyComponent return Blog post < = = > Link href "/posts/[post]" as "/posts/blog-post" </ > Link // Since v10.x ( ) function MyComponent return Blog post < = > Link href "/posts/blog-post" </ > Link Client Router Functions I noticed that people often use from . If you use it in functions that were wrapped in useCallback or just inside useEffect you have to mention it in dependencies like in the example down below. router.push useRouter { useEffect, useCallback } { useRouter } { { push } = useRouter() handleClick = useCallback( { push( )
	}, [push])

	useEffect( { (...) {
			push( )
		}
	}, [push]) import from 'react' import from 'next/router' ( ) function MyComponent const const => () // some logic '/profile' => () if '/sign-in' return ... } <> </> It's completely unnecessary because these functions don't update over re-renders but ESlint rules will tell you that you should do it. Solutions for this are fairly easy. Just use routing functions from the Router. It makes your code cleaner and nicer 😉 Router { handleClick = useCallback( { Router.push( )
	}, [])

	useEffect( { (...) {
			Router.push( )
		}
	}, []) import from 'next/router' ( ) function MyComponent const => () // some logic '/profile' => () if '/sign-in' return ... } <> </> Sometimes when I work with the router I need to get the current pathname. But react/router stores the dynamic representation of the router in that field, and it's the same as router filed. We can create these params by ourselves with . I created a wrapper over and always have access to the props If I need them. asPath useRouter { useRouter useNextRouter } { router = useNextRouter() [pathname, queryString = ] = router.asPath.split( ); .assign(router, { pathname, queryString });
} // lib/router.ts import as from 'next/router' export ( ) function useRouter const const "" "?" return Object The wrapper gives us handy props that we can use in a situation when we need to update a current route. Router { useRouter } { { query, pathname } = useRouter() { params = FormData(evt.currentTarget).getAll( );

    evt.preventDefault();
		Router.replace(
			{ pathname, : { ...query, params }}, ,
			{ : }
		)
	} ( <button type="submit">Apply</button> )
} import from 'next/router' import from 'lib/router' ( ) function MyComponent const ( ) function handleSubmit evt const new "fruits" query null shallow true return {...} < > form </ > form Do you wonder why the second param in is ? Since 10.x with automatic resolving, we can skip that param. Router.replace null Since we have such a feature as automatic resolving we can use it , but it is a small inconvenience in its API. Because if you want to pass you should pass dynamic route to the first argument and full path to the second in earlier versions and Next.js kept those 3 arguments for backward compatibility. I have small handy functions that help me to use router functions easier. next/router options NextRouter { NextRouter.push(url, , opts)
} Router = {
	...NextRouter,
	push,
} Router Router, { useRouter } { { query } = useRouter() { params = FormData(evt.currentTarget).getAll( );

    evt.preventDefault();
    Router.push({ pathname, : { ...query, params } }, { : });
  } // lib/router.ts import from 'next/router' ( ) function push url, opts return null const export default /* ... */ // pages/params.tsx import from 'lib/router' ( ) function MyComponent const ( ) function handleSubmit evt const new "fruits" query shallow true return {...} } <> </> Conclusion Thank you for reading the article till the end. You can find complete code on . There is always some way to make good tools better. Small improvements could help you and your project a lot. GitHub Previously published at https://pavel.mineev.me/blog/nextjs-router-tips-and-tricks

An Overview of Next.js Router 

Ever wondered how streams are working in Node.js? I had. So far I know that using streams will most certainly reduce memory usage on the server when processing large files. Instead of reading whole file into memory we stream it in chunks to whoever requested it and apply transformations to that stream if needed. That's huge benefit as it allows to avoid vertical scaling. Processing files is common task but not as common as interacting with databases and that's going to be my focus now. I'll build simple API with 2 endpoints. Both will be returning large amount of records from Postgres DB. One endpoint will stream data to the client and another will read whole data into memory and return in one chunk. If I work in Node.js environment, there's usually Express.js framework in front of it with Sequelize orm. For this experiment I decided to try something different and choose Koa.js framework and Knex orm. Let's start. I'll setup the project first: mkdir streamer && streamer npm init -y # let's name our project "streamer" cd # I'm happy with npm defaults for this project so: Now time to add app dependencies. You can see all packages . To setup my development environment I'll use and Let's see how looks like: here Docker docker-compose. Dockerfile.dev node: . API_PORT ${API_PORT} FROM 12.16 1 # create new working directory WORKDIR /src # expecting to receive API_PORT as argument ARG # make sure to run latest version of npm RUN npm i npm@latest -g # fetch dependencies on a separate layer first as it's not changing that often, # will be cached and speed up the image build process COPY ./package.json ./package-lock.json ./ RUN npm i # copy the rest of the source files into working directory COPY . . EXPOSE CMD [ , , ] "npm" "run" "start:dev" Pretty standard right? Now to add DB dependency and bootstrap whole thing: docker-compose.yml version: "3.7" volumes: streamervolume: name: streamer-volume networks: streamernetwork: name: streamer-network services: pg: image: postgres:12.0 restart: on-failure env_file: - .env ports: - "${POSTGRES_PORT}:${POSTGRES_PORT}" volumes: - streamervolume: /var/lib/postgresql/data networks: - streamernetwork streamer_api: build: context: . dockerfile: Dockerfile.dev args: API_PORT: ${API_PORT} restart: on-failure depends_on: - pg volumes: - ./:/src ports: - "${API_PORT}:${API_PORT}" networks: - streamernetwork env_file: - .env Now that environment is pretty much ready, I'll continue with application logic itself. Let's look at : app.js ( ).config(); Koa = ( ); errorHandler = ( ); router = ( ); app = Koa();

app
  .use(errorHandler)
  .use(router.routes())
  .use(router.allowedMethods()); .exports = app; // src/app.js require 'dotenv' const require 'koa' const require './middleware/errorHandler' const require './routes' const new module I first load vars, import Koa, my custom error handling middleware and router. The error handling middleware looks like this: .env .exports = (ctx, next) => { { next();
  } (err) { .error(err);
    ctx.status = err.status || ;
    ctx.body = { : err.message || ,
    };
  }
} // src/middleware/errorHandler.js module async try await catch console 500 msg 'Oops. Something went wrong. Please try again later' According to documentation, error handling middleware has to be added first in Koa app in order to capture all exceptions. Next stop is router: Router = ( ); router = Router();

router.get( , ( ));
router.get( , ( )); .exports = router; // src/routes/index.js const require '@koa/router' const new '/nostream' require './users/nostream' '/stream' require './users/stream' module Interesting thing to mention is that in I use middleware that handles unsupported methods with for me. Lets look at the handlers next. app.js router.allowedMethods() 405 Method Not Allowed nostream: db = ( ); .exports = (ctx) => { { users = db.select( ).from( );
    ctx.status = ;
    ctx.body = users;
  } (err) {
    ctx.throw( , err);
  }
}; // src/routes/users/nostream/index.js const require '../../../services/db' module async try const await '*' 'users' 200 catch 500 Pretty sure you're wondering how that looks like: db config = ( ); knex = ( )({ : , : { : config.dbHost, : config.dbUser, : config.dbPwd, : config.db,
  },
}); .exports = knex; // src/services/db.js const require './config' const require 'knex' client 'pg' connection host user password database module is just simple object literal that exposes some env vars. You can see it . I require knex, establish db connection and export instance of it. Since all node modules are singletons, no matter how many times I'll require this package, initiation will be performed only once. Everything else in handler is pretty much straightforward. Please refer to Koa or Knex documentation for more details. Next let's look at handler: config here nostream stream Stringify = ( ) db = ( ); .exports = (ctx) => {
  ctx.type = ;
  ctx.set( , ); { stream = db
      .select( )
      .from( )
      .stream();

    ctx.status = ; pipe(stream, ctx.res, { : });
  } (err) {
    ctx.throw( , err);
  }
}; { ( { .pipe(Stringify())
      .pipe(to, options); .on( , reject); .on( , resolve);
  })
} // src/routes/users/stream/index.js const require 'streaming-json-stringify' const require '../../../services/db' module async 'application/json; charset=utf-8' 'Connection' 'keep-alive' try const '*' 'users' 200 await end false catch 500 ( ) function pipe from, to, options return new Promise ( ) => resolve, reject from from 'error' from 'end' Here I call on my query to get stream instance. I then pipe this query stream to client. In order for that to happen I have function that returns a promise and we don't exit the handler instantly but rather wait until streaming is done or error occurs. I added stringify package here because response (writeable stream) expects an input of a type string or an instance of Buffer and DB stream operates with Object types. .stream() pipe By the way, all will be captured by middleware we created previously. Now before I jump into testing my server I need some data in DB. Since I have Knex already installed locally, I need a config file for it to be able to run migrations, seeds etc: ctx.throw errorHandler ./node_modules/.bin/knex init This will generate . I have slightly changed it to use my env vars. You can see it . Now I'll generate the migration: knexfile.js here ./node_modules/.bin/knex migrate:make users This will create a migration file in You can review it . Before I run it, start the application: migrations/{timestapm}_users.js here docker-compose up --build Now since app is up and running, time to run migration: POSTGRES_HOST=localhost npm run migrate:up I specify postgres host here since I run migration from host machine for DB  that runs in docker environment under pg host name and if I don't specify it, pg name will be used from env vars which will end up with failed connection attempt. Now what I need is some records in users table for my API to serve. Knex cli can ease this process. It has command to generate a seed file: ./node_modules/.bin/knex seed:make create_users This will generate a seed file in directory. You can see what I did with it . If you'll run into issues running it, try reducing amount of records you try to create. Currently it'll try to create 60k records. Lets run it: seeds here POSTGRES_HOST=localhost npm run db:seed OK, with all that in place, I can now test both endpoints and see how well they perform. Let's start with nostream endpoint: And now stream endpoint: So, streaming might be less memory intensive operation but it takes a bit longer to retrieve all data (60k users in this case). That certainly works when sending/processing large amounts of data and could be perfect fit for file processing or BI where we have to work with large data sets. When it comes to common tasks though, say admin panel that retrieves 10-100 records per page, most likely streaming wouldn't be the best fit. Not only because it takes a bit more time, but also due to code complexity as it requires more code to achieve same output. It all boils down to good old saying: I hope you have learned something useful. You can find the whole project . "choose the right tool for the job". here

Node.js Streams in Action

Blockchain was originally invented in 2008, by The original purpose was to create an accounting method for Bitcoin, the virtual currency that was going to be launched in 2009. In the past ten years, however, the Satoshi Nakamoto, a name of fantasy used to represent either an individual or a group of people — the real identity still remains unknown. blockchain technology has developed into something greater than expected, as it is being used and explored in a wide variety of other sectors and is rapidly disrupting industries such as healthcare, shipping and energy. “Today, blockchain might seem like a trinket for computer geeks. But once widely adopted, it will transform the world,” wrote Ginni Rometty, CEO of IBM, on the Wall Street Journal, at the end of 2016. A blockchain is a decentralized, digitalized and distributed cloud-based public ledger of all transactions, which uses the proof of concept method to verify each transaction — a complex mathematical equation, that takes considerable time and energy for even the smartest computers to solve. The idea behind this is that . In the blockchain, information moves between several nodes as it departs from the sender of the information to the recipient. Each node only knows where the information came from and where it is going, making all transactions complete secure, untraceable and private. Every time information goes from one node to the next, the proof of concept algorithm must be executed, thus ensuring the integrity of the information travelling on the blockchain. This process is what assures the validity of each transaction. each information exchange is unique and verifiable “Put simply, blockchain technology is a method of recording and confirming transactions where instead of a centralized platform, participants each hold a complete record of transactions through peer to peer verification of transactions”, say Adrian Lee and KiHoon Hong, respectively senior lecturer in finance and assistant professor at the University of Technology, Sydney. Being a decentralized system, blockchain allows the parties involved to establish any kind of agreement without the necessity of any middleman, including lawyers, public accountants, notaries, government institutions, civil servants or any other party needed to attest to the information’s integrity. All that is needed is a (as described above, where the information goes from node to node using the proof of concept to validate the flow). As the intermediaries’ oversight and intervention get minimized, the costs related to them also reduce, and in some cases they even get eliminated. smart contract: a set of codes that will help both sides exchange money or other values in a transparent, secure and trustable way Because blockchain offers the possibility to regulate self-executing and self-verifying transactions and allows the parties to cut down intermediaries such as clearing houses, this technology has been particularly useful in the financial industry, contributing in the trading activity in particular. “the functioning of stock exchanges involves complex procedures that can be time consuming, cost inefficient, cumbersome, and prone to risks”. “its potential ability to streamline the process” Prableen Bajpai, founder and managing partner of FinFix Research and Analytics, wrote for Nasdaq, in June 2017, that For this reason, this environment offers blockchain the opportunity to prove and a lot of money and resources are being invested to see how this technology can be leveraged in this sense, especially by Nasdaq and the US stock exchange itself. The first application of blockchain in trading was seen in May of 2015, when Nasdaq launched Linq, a blockchain private trading platform that would allow private companies to digitally represent their share ownership, even though they are not listed on a stock exchange. The system managed to successfully complete and record a private-securities transaction to a private investor and, since then, blockchain has been featuring several other projects not only by Nasdaq, that has teamed up with banks like Citi and SEB to develop new payment solutions and mutual-fund trading platforms, but also by other stock exchanges across the world. Still in 2015 ASX started to evaluate CHESS replacing options and, two years later, selected an American blockchain startup to develop distributed ledger based solutions for clearing and settling trades. In November 2016, instead, Deutsche Börse and Deutsche Bundesbank a prototype for the blockchain technology based settlement of securities. presented The blockchain functions through a viable bookkeeping system and can register every transaction, denying the possibility of changing and deleting any of them. Once the parties involved agree on the validity of a specific movement, this “block” of operations is secured in the system and cannot be removed. This guarantees that the data will not be manipulated or modified by any means; it will just be impossible to duplicate, erase or fake information, as they will be recorded in a permanent way. “Think of blockchain as the new internet and the new trust protocol. If information is available with everyone, no one needs an authority to stamp authenticity”, writes Team Koinex, on the blog Medium. This metaphor has been used quite often and appears to be realistic, also considering the wade applicability that blockchain has. For this aspect of the system, many experts also like to explain blockchain starting by making a comparison between this technology and Google Docs, that allows every part involved to make trackable changes. Blockchain data is accurate, timely, complete, consistent and easily accessible. Essentially, the . The technology has the potential to offer brokers a solution for reducing significantly the amount of time that occurs between when an investor’s order is placed and when money and securities are actually exchanged. Not to mention that the risks related to trading will be greatly minimized. blockchain technology greatly simplifies not only the trading in stocks, but also in other securities, by speeding up the processes, increasing the traceability of their provenance and facilitating the availability of the records The blockchain technology is able to track and monitor in real time any movement and operation. The traditional ways of verifying transactions become unnecessary, as, if suspicious or abnormal movements may occur, the network would be able to block it and report it to the parties, assuring the safety of the system and the robustness of the platform. Today, stock trading requires the following procedures: Order placing to either buy or sale of certain number of securities for a specified price Order execution as per requirements Contract note preparation by the broker Delivery and clearing of shares Settlement of the securities The new digitalized operations could replace a lot of paperwork and inefficiencies. The power can be brought back in the parties’ hands, and this can automatize the process, reduce inefficiencies, democratize the trading activity and prevent frauds, that have been a sensitive issue in the past. Trades can be settled by peer confirmation — Way easier, right? will build a blockchain wallet in every trader’s account and will provide a brand new trading experience. Your personal broker, in your hand. Order placing, bidding, asking, buying and selling, in real time and in a completely secure way. — Are you ready for it? AITrading REFERENCES Aitken, R. (2017, November 21). Smart Contracts On The Blockchain: Can Businesses Reap The Benefits? Retrieved from https://www.forbes.com/sites/rogeraitken/2017/11/21/smart-contracts-on-the-blockchain-can-businesses-reap-the-benefits/#6c4b90d01074 Bajpai, P. (2017, June 12). How Stock Exchanges Are Experimenting With Blockchain Technology. Retrieved from https://www.nasdaq.com/article/how-stock-exchanges-are-experimenting-with-blockchain-technology-cm801802 /. (2018, January 16). Blockchain Stock News: After Hype, Real Blockchain Action To Come Soon | Stock News & Stock Market Analysis — IBD. Retrieved from https://www.investors.com/news/blockchain-stock-news-after-hype-real-blockchain-action-to-come-soon/ Dakers, M. (2015, December 31). Nasdaq makes first share trade using blockchain technology. Retrieved from https://www.telegraph.co.uk/finance/markets/12075825/nasdaq-blockchain-share-trade-bitcoin-technology.html How Blockchain Tech is About to Transform Sharemarket Trading. (2016, February 08). Retrieved from https://www.coindesk.com/how-blockchain-technology-is-about-to-transform-sharemarket-trading/ How blockchain will change the way you trade in stock markets. (2018, January 15). Retrieved from https://economictimes.indiatimes.com/markets/stocks/news/how-blockchain-will-change-the-way-you-trade-in-stock-markets/articleshow/62161610.cms How Stock Exchanges Are Utilising Blockchain Technology. (2018, January 09). Retrieved from https://internationalbanker.com/brokerage/stock-exchanges-utilising-blockchain-technology/ Koinex, T. (2017, June 07). Trading in the age of Blockchain — Koinex Crunch — Medium. Retrieved from https://medium.com/koinex-crunch/trading-in-the-age-of-blockchain-2d9ea62554df _A blockchain is a digitized, decentralized, public ledger of all cryptocurrency transactions. Blockchain has been…_hackernoon.com Blockchain - Hacker Noon

Blockchain benefits in trading

In recent years, the introduction of modern technology has powered the rate at which our lives became globalised. Inventions that we now take for granted, such as the commercial airliner, have changed the way we see the world; bringing distant communities closer together. The arrival of the mobile phone, for example, has changed the way we communicate, dismissing distance as an obstruction. These technologies, and many more, have spurred the development of a truly global community. Borders have become more open as people from all backgrounds are free to relocate to practically anywhere. While many industries have evolved quickly in order to assist globalisation, a fundamental industry has remained outdated, and it’s a big one. Whether you’re supporting a family member who’s studying abroad; living abroad as an expat; or an employee working abroad to support a family back home; transferring money is likely to be a frequent occurrence for you. While the money transfer industry is very established, with household names such as Western Union, Lebara and TransferWise, the services available have quickly fallen behind the times. With so many providers to choose from, each offering different rates, choosing one require significant time and research. In fact, it would take you over 5 and a half hours to individually search through the 100+ money transfer providers in the UK, and by the time you’ve finally compared the often concealed rates of all the available providers the rate is likely to have changed and your son or daughter has spent the last of their money at the student nightclub and is now waiting for your transfer in order to secure a greasy breakfast. You’ll then have to send Know Your Customer (KYC) forms, and other personal info, to your chosen transfer company for review. Tied in with handling the Anti Money Laundering (AML) requirements, this could take 2–26 days to review. At which point your son/daughter has started selling their school books and living on meal deals. Combine this lengthy process with the high transfer costs, low transparency, poor customer service and frustrating an user experience, and it becomes clear just how outdated the industry truly is. So what can be done to bring the $582bn¹ industry up to speed? One UK based start-up has a convincing solution, and it’s turning the heads of users and investors across the globe. Find.Exchange, founded in 2015, has spotted the pitfalls of the current services available in the money transfer industry and have developed a convenient solution, which is evolving quickly. Founder and start-up wizard, Ricky Lee, responsible for creating ‘Revolut’ (now worth £300m), spotted an opportunity to save people time and money on their transfers. Having spotted the potential of the rapidly growing comparison market, often used for insurance and travel, Find.Exchange brought the comparison services to the money transfer industry. This has provided users with a number of advantages. Not only can users compare the rates of transfer providers in real time, they can also check the live exchange rates, compare the estimated transfer time of each provider and have KYC and AML handled by Find.Exchange, enabling users to quickly transfer with any desired provider. Users can now use Western Union in the morning, Lebara in the afternoon, and Transferwise in the evening without the hassle of having to be KYC’d by each company! The Find.Exchange solution is looking to lead the way for the future of the transfer industry. Find more information at . https://find.exchange Find.Exchange 2015 ¹ https://www.forbes.com/sites/rogeraitken/2017/01/14/remitly-shaking-up-billion-dollar-digital-remittances-market-adds-massachusetts-to-network/#5c0ef52f49b5

The $582bn Industry Thriving on Hidden Fees

collage by stellabelle using pixabay TRON Token Abbreviation: TRX TRON Official Website: https://tron.network/en.html TRON Official Twitter: https://twitter.com/Tronfoundation TRON Founder Justin Sun’s Twitter: https://twitter.com/justinsuntron What is TRON? “Tron is a blockchain-based, open-source protocol for the global digital entertainment industry in which TRX, Tron’s token, is circulated. It enables one-on-one interaction between the suppliers of digital content and the normal users. Thanks to tron, content providers no longer need to pay high channel fees to the platforms such as Google Play store and Apple’s Appstore.” -NDTV ) https://www.ndtv.com/business/bitcoin-in-making-tron-trx-jumps-over-100-in-one-day-five-things-to-know-1795887 Who is behind TRON? Justin Sun, a successful young entrepreneur and protege of Alibaba Founder Jack Ma, who has successfully built an app, called Peiwo, which has 10 million users. From one of Justin’s latest tweets, you’ll start to appreciate that he already has a built-in audience of 10 million for TRON: All PEIWO 10 million users can use TRX to tip the show soon. PEIWO will be the first live streaming app to receive cryptos.$trx -Justin Sun’s Twitter A lot of cryptocurrencies suffer because they don’t have built-in audiences, and teaching mainstream people how to use crypto has been very challenging. TRON will not have this difficulty. Also, one look at TRON’s advisors and one doesn’t have be a rocket scientist to see where this is going. Jihan Wu, Founder of Bitmain is behind TRON. I went through the entire list of team members and advisors and it’s staggering. Why I Think TRON Has Potential If you combined all the lazy and silly adults in the world with all the children in the world, you’d realize you have a massive population of game-oriented human beings. Games are much more appealing to most humans than are serious endeavors. Escapism is still the most lucrative genre in all of human history and nothing has really changed. Mix escapism with futuristic new games and you get something like the concept of TRON. A futuristic novelty that people can easily grasp is going to make blockchain go viral. Remember, it’s usually not the complex invention that wins the race. It’s the person who can create bubble gum out of the complex invention. 2. The founder is already a successful and charismatic entrepreneur with a goliath businessman (Jack Ma of Alibaba) helping him learn the ropes. 3. Justin Sun will bring his 10 million Peiwo app users into TRON. 4. Alibaba devs are already self-poaching and moving to TRON. (Follow the talent) 5. But the most important reason has nothing to do with tech or the team: TRON has that uber futuristic and sexy feel to it and it reminds us all that we are about to head into the era of the Singularity which Musk has so perfectly laid out for our imaginations. We are all primed and ready for that future in which we wear electric blue helmets and cruise along in an Augmented Reality dreamscape, collecting and dispensing our TRON Tokens to magnetic pink flamingo robots who whisper to us: “Let’s go into the dream and become electric, there’s nothing to be afraid of anymore.” Ok, I’m Ready To Buy, How Do I Get My TRON Tokens? image credit: https://www.gamingwithswag.com/blog/2017/6/1/film-friday-tron Best place to buy TRON TRX: Binance I heard that Binance is not accepting new accounts…… https://www.binance.com/login.html Send your TRX tokens to:MyEtherWallet Remember you can use your Trezor to sign into MyEtherWallet. (Not sure if Ledger Nano has this same functionality…I think it does.) https://www.myetherwallet.com/ Also, I would suggest registering for a TRON account (but I would hold off on sending your TRX to this wallet, just to be safe). Here are the detailed instructions how to register for an official TRON account on the website. This tutorial was to help English speakers navigate the website which is in Chinese: https://www.reddit.com/r/Tronix/comments/7lqc1x/registering_on_the_tron_platform_tutorial/ Disclaimer: Remember, this is not investment advice. Never invest what you cannot afford to lose. Also, bear in mind: one of the words in the title is ‘dummies’. I have no clue if TRON is going to disrupt both Google Play and the Apple AppStore, but you can bet I’m not going to sit by the sidelines and wonder if. The TRON train is moving at the speed of blue light, and I’m jumping on, like everyone else. Further reading from Forbes: https://www.forbes.com/sites/rogeraitken/2017/08/12/could-this-millennial-crypto-tech-visionary-be-the-next-jack-ma/#6cfb2edb7064 Further study of Peiwo App and TRON integration: https://medium.com/@Tronfoundation/the-expected-schedule-compatible-with-trx-announced-by-peiwo-app-526a8f07d0c5

Stories, News & Mentions about ROTERA

Rotera’s Stories on HackerNoon