Rowy

rowy

16 Open-Source Alternatives to Popular SaaS Tools: Cost-Effective & Customizable Solutions 👨‍💻🔥

International Draughts is a fun board game that's a bit like checkers but with more pieces and on a bigger board. It's all about moving your pieces, capturing your opponent, and trying to outsmart them. When one of your pieces reaches the other side, it becomes a 'king,' which is powerful. You win by capturing all your opponent's pieces or blocking them so they can't move. Now, imagine trying to make a computer play this game. It's pretty hard because there are so many moves to think about. That's where the minimax and alpha-beta search algorithm come in. It's a smart way to help computers play games like International Draughts and Checkers. The "minimax" part comes from maximizing your gains while minimizing your opponent's gains. The alpha-beta algorithm is like a shortcut for the computer. Instead of looking at every move, it ignores the ones that don't matter much. This way, the computer doesn't waste time on bad moves and can think more about the good ones. It's like if you were playing and only focused on your best moves. By using this algorithm, computers can play well. They can think ahead and make smart choices without taking too long. So, the alpha-beta algorithm helps computers be tough opponents in games like International Draughts, making the game exciting and challenging. Draughts International Draughts is a cool board game that's a bit like checkers but bigger and with more pieces. It's played on a big 10x10 board, each player starting with 20 pieces. The game is about diagonally moving your pieces and trying to capture your opponent's pieces by jumping over them. Here's how it works: you move your pieces forward on the dark squares. If you see an opponent's piece next to yours and there's a space just past it, you can jump over their piece and capture it. If you can keep jumping over more pieces, you can capture them, too! The game gets exciting when one of your pieces reaches the other side of the board. Then it turns into a "king," which can move forward and backward, making it super powerful. You win the game if you capture all your opponent's pieces or if they can't move anymore. International Draughts is fun because it's easy to learn but makes you think hard about your moves. It's a popular game worldwide; there are even big tournaments where people compete to be the best. Minimax The essence of the algorithm comes down to a simple thing: find the move that will bring us the greatest increase in points and, at the same time, minimize the potential number of points of the opponent. This algorithm is often used in games in conjunction with alpha-beta search Alpha-Beta Search The alpha-beta search algorithm is a significant concept in computer AI, particularly in board games like Checkers. At its core, this algorithm is a smarter, more efficient version of the minimax algorithm, which is used to determine the best move in a game by considering all possible moves. The alpha-beta algorithm enhances the minimax process by "pruning" or cutting off branches in the game tree that it deems unnecessary to explore. Essentially, it skips analyzing moves that won't affect the final decision, reducing the number of calculations the computer has to make. This is especially important in games like checkers, where the number of possible moves can be very large. By employing this algorithm, AI in games can analyze possible moves more quickly and deeply, leading to stronger play. In practice, this means that an AI using alpha-beta search can be a formidable opponent, capable of foreseeing several moves ahead and making strategically sound decisions, all within a reasonable amount of computing time. Scoring For the algorithm to work correctly, we will need to evaluate the quality of each move, and for this, we will use the following scoring functions: Score by piece count: we count the left items on the deck. Score by defensive position: the deeper we move to the enemy’s side, the more points we get. For each next row, we get an extra 0.5 points. Score by offensive positioning: The more first cells we have occupied by our checkers, the more points. This prevented the enemy from transferring his checker to the king. Score by mobility: The more moves we can make, the more points The final score for each color is a sum of all scores Prepare First, we need to initialize the project. I’m a little bit lazy, I’m going to use vite package yarn create vite client --template vanilla-ts Also we need checkers engine yarn add @jortvl/draughts And d3.js for render yarn add d3
yarn add @types/d3 --dev That’s enough for our project =) Calculations On each move we get FEN from the game engine FEN The initial position of the checkers board. This is used to record partial games (starting at some initial position). It is also necessary for some draughts variants where the initial position is not always the same as traditional checkers. If a FEN tag is used, a separate tag pair "SetUp" is required and have its value set to "1". as said wiki. Example of fen: B:W27,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50:B1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20 If we can simplify - it current board positions export function getFen(fen: string): FEN {
    const regex = /^(B|W):(W(.*)):(B(.*))$/;

    let m = regex.exec(fen)

    if (!m) {
        throw new Error('Invalid FEN')
    }

    return {
        move: m[1] === "B" ? "B" : "W",
        white: m[3].split(','),
        black: m[5].split(','),
    }
} convert fen to our purposes: Count checkers for each color export function scoreByPieceCount(board: FEN) {
    const KING_WEIGHT = 1.5; // Kings are usually more valuable
    let white_player_score = board.white.reduce((acc, row) => acc + (row.startsWith('K') ? KING_WEIGHT : 1), 0);
    let black_player_score = board.black.reduce((acc, row) => acc + (row.startsWith('K') ? KING_WEIGHT : 1), 0);

    return [white_player_score, black_player_score];
} Score by defensive position. Each next row add 0.5 points to color and if we have king - it weight 6 points, for reason is king can be everywhere and not going to turn into king griffindor export function scoreByDefensivePositioning(board: FEN) {
    let white_score = board.white.reduce((acc, row) => acc + (row.startsWith('K') ? 6 : (Math.floor((50 - parseInt(row, 10)) / 5) + 1) * 0.5), 0);
    let black_score = board.black.reduce((acc, row) => acc + (row.startsWith('K') ? 6 : (Math.floor(parseInt(row, 10) / 5) + 1) * 0.5), 0);

    return [white_score, black_score];
} Offensive: we check initial positions for checkers export function scoreByOffensivePositioning(board: FEN) {
    let white_score = ['46', '47', '48', '49', '50', 'K46', 'K47', 'K48', 'K49', 'K50'].filter((x) => board.white.includes(x)).length;
    let black_score = ['1', '2', '3', '4', '5', 'K1', 'K2', 'K3', 'K4', 'K5'].filter((x) => board.black.includes(x)).length;

    return [white_score, black_score];
} Score by mobility: we check how much moves we can make. if we can take checker, it give us addition 10 points export function scoreByMobility(fen: FEN) {
    let d1 = new Draughts();
    d1.load(`B:W${fen.white.join(',')}:B${fen.black.join(',')}`);

    let black_score = d1.moves().reduce((acc, cap) => acc + 1 + (cap.takes.length * 10), 0)
    d1.load(`W:W${fen.white.join(',')}:B${fen.black.join(',')}`);
    let white_score = d1.moves().reduce((acc, cap) => acc + 1 + (cap.takes.length * 10), 0)

    return [white_score, black_score];
} And the most interesting thing is why I started writing this article: function isGameOver(gameState: FEN) {
    return gameState.black.length === 0 || gameState.white.length === 0;
}

function getLegalMoves(gameState: FEN) {
    const d1 = new Draughts();
    d1.load(`${gameState.move}:W${gameState.white.join(',')}:B${gameState.black.join(',')}`);

    return d1.moves().map((x) => `${x.from}-${x.to}`).sort(() => Math.random() - 0.5);
}

function applyMove(gameState: FEN, move: string) {
    const d1 = new Draughts();
    d1.load(`${gameState.move}:W${gameState.white.join(',')}:B${gameState.black.join(',')}`);
    d1.move(move);
    return getFen(d1.fen());
}

export function alphaBeta(
    gameState: FEN,
    depth: number,
    paths: ABScore = {
        score: 0,
        path: []
    },
    alpha: number = -Infinity,
    beta: number = Infinity,
    maximizingPlayer: "B" | "W"
):
    ABScore {
    if (depth === 0 || isGameOver(gameState)) {
        return {
            score: combinedScore(gameState)[maximizingPlayer === "B" ? 1 : 0],
            path: paths.path
        };
    }

    if (gameState.move === maximizingPlayer) {
        let maxEval = {score: -Infinity, path: []};
        for (const move of getLegalMoves(gameState)) {
            const ev = alphaBeta(
                applyMove(gameState, move), depth - 1, {
                    score: 0,
                    path: paths.path.concat(move)
                }, alpha, beta, maximizingPlayer === "B" ? "W" : "B"
            );
            if (ev.score > maxEval.score) {
                maxEval = ev;
            }

            if (ev.score > alpha) {
                alpha = ev.score;
            }

            if (beta <= alpha) {
                break;
            }
        }
        return maxEval;
    } else {
        let minEval = {score: Infinity, path: []};
        for (const move of getLegalMoves(gameState)) {
            const ev = alphaBeta(
                applyMove(gameState, move),
                depth - 1,
                {
                    score: 0,
                    path: paths.path.concat(move)
                },
                alpha, beta,
                maximizingPlayer === "B" ? "W" : "B"
            );

            if (ev.score < minEval.score) {
                minEval = ev;
            }

            if (ev.score < beta) {
                beta = ev.score;
            }

            if (beta <= alpha) {
                break;
            }
        }
        return minEval;
    }
} The basic principle by which the search works: at the first stage, find the move that will give us the highest score, then we look at all the opponent’s moves and see which moves will give him the minimum score and again look at our moves and discard the least relevant moves Game Basic markup <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite + TS</title>
</head>
<body>
<div id="app"></div>
<div>
    <label for="depth">
        <input id="depth" value="2"/>
    </label>
    <button id="game">Run game</button>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html> Main game class: export class Board {
    _board: Draughts
    _el: string;
    _moves: number;

    constructor(element: string) {
        this._board = Draughts()
        this._el = element;
        this._container = d3.select(element);
        this._moves = 0;
    }

    gameOver() {
        return this._board.gameOver();
    }

    fen() {
        return this._board.fen();
    }
} Draw initial board export class Board {
    constructor(element: string) {
				...
				this.drawBoard();
    }

		drawBoard() {
        const svg = this._container.append("svg")
            .attr("width", 600)
            .attr("height", 400);

        const gameBoard = svg.append('g')

        const checkers = svg.append('g')
        checkers.attr('class', 'checkers');

        let position_index = 0;
        for (let i = 0; i < 100; i += 1) {
            if ((i % 2) != Math.floor(i / 10) % 2) {
                position_index += 1;

                const cell = gameBoard.append('g').attr('class', `tile`).attr('transform', `translate(${(i % 10) * 40}, ${Math.floor(i / 10) * 40})`)
                cell.append('rect').attr('width', 40).attr('height', 40).attr("rx", 4).attr("ry", 4).style('fill', 'gray')
                cell.append('text').text(position_index).attr("x", 0).attr("y", 12);
            }
        }

        const score = svg.append('g').attr('class', 'score').attr('transform', `translate(410, 0)`);

        score.append('text').text('white').attr("x", 80).attr("y", 12);
        score.append('text').text('black').attr("x", 150).attr("y", 12);
        score.append('text').text('piece:').attr("x", 10).attr("y", 48);
        score.append('text').attr('class', 'white-piece').text('0').attr("x", 80).attr("y", 48);
        score.append('text').attr('class', 'black-piece').text('0').attr("x", 150).attr("y", 48);
        score.append('text').text('def:').attr("x", 10).attr("y", 84);
        score.append('text').attr('class', 'white-def').text('0').attr("x", 80).attr("y", 84);
        score.append('text').attr('class', 'black-def').text('0').attr("x", 150).attr("y", 84);
        score.append('text').text('mobility:').attr("x", 10).attr("y", 120);
        score.append('text').attr('class', 'white-mobility').text('0').attr("x", 80).attr("y", 120);
        score.append('text').attr('class', 'black-mobility').text('0').attr("x", 150).attr("y", 120);
        score.append('text').text('offensive:').attr("x", 10).attr("y", 156);
        score.append('text').attr('class', 'white-offensive').text('0').attr("x", 80).attr("y", 156);
        score.append('text').attr('class', 'black-offensive').text('0').attr("x", 150).attr("y", 156);
        score.append('text').text('total:').attr("x", 10).attr("y", 192);
        score.append('text').attr('class', 'white-total').text('0').attr("x", 80).attr("y", 192);
        score.append('text').attr('class', 'black-total').text('0').attr("x", 150).attr("y", 192);
        score.append('text').text('move:').attr("x", 10).attr("y", 228);
        score.append('text').attr('class', 'moves').text('0').attr("x", 80).attr("y", 228);
    }
} Draw checkers (we redraw them after each move) export class Board {
    constructor(element: string) {
				...
				this.draw();
    }

		draw() {
        d3.selectAll('g.checker').remove()
        const checkers = d3.select('g.checkers')
        const external_position = this._board.position();
        let position_index = 0;
        for (let row = 0; row < 10; row++) {
            const shifted = row % 2 !== 0 ? 1 : 0
            for (let col = 0; col < 10; col++) {
                if ((col + shifted) % 2 === 1) {
                    position_index += 1;
                    const pieceGroup = checkers.append('g')
                        .attr('transform', `translate(${col * 40 + 20}, ${row * 40 + 20})`)
                        .attr('class', `checker ${external_position[position_index]}`)
                        .attr('data-index', position_index)

                    switch (external_position[position_index]) {
                        case 'b':
                            pieceGroup.append('circle').attr('r', 10).style('fill', 'black')
                            break;
                        case 'B':
                            pieceGroup.append('circle').attr('r', 10).style('fill', 'black').style('opacity', 0.4)
                            break;
                        case 'w':
                            pieceGroup.append('circle').attr('r', 10).style('fill', 'white')
                            break;
                        case 'W':
                            pieceGroup.append('circle').attr('r', 10).style('fill', 'white').style('opacity', 0.4)
                            break;
                    }
                }
            }
        }
    }
} Make move: export class Board {
  	move(depth: number) {
        if (this._board.gameOver()) {
            console.log('game over')
            return;
        }

        let ab1 = alphaBeta(getFen(this._board.fen()), depth, {
                score: 0,
                path: []
            },
            -Infinity,
            Infinity,
            this._board.turn().toUpperCase()
        );

        let path = ab1.path.length ? ab1.path[0] : this.getRandomeMove();
        this._board.move(path);
        this.draw()
        this._moves += 1;
    }
} And initialize game =) const game = new Board('#app');

document.querySelector('#game').addEventListener('click', async () => {
    const depth = parseInt((document.querySelector('#depth') as HTMLInputElement).value, 10);

    let i = 1;
    while (!game.gameOver() && i < 300) {
        game.move(depth);
        game.drawScore();
        await new Promise((resolve) => setTimeout(resolve, 1000));
        i += 1;

    }
}); Basic game is done =) If I forget something, working example on GitHub Results Depth: 1 Depth: 2 Depth: 3 As the search depth increases, moves become more meaningful and less random, although the time spent calculating each move increases. Conclusion In the article, we quickly went over the minimax alpha-.beta search. Maybe I forgot something, but I’ll hope not =) Next time, I’ll try to add a couple of genetic algorithms here and see the results. The game’s code is available on . Github

Teaching a Machine to Play International Draughts Through Alpha-Beta Search

Sometimes we encounter problems processing big files using Node.js because the main thread (responsible for the event loop) can stop. For this reason, I decided to write about how to use streams in Node.js showing a funny example. Let's go! : Node.js application that downloads a huge CSV file from Google Cloud Storage, processes the data, transforms it into a JSON file, extracts some data insights, and finally compresses the file and uploads it again to the Cloud Storage. (We are going to create a terminal progress bar to visualize the process progress) Application : Main principles Streams: Interface to work with chunks of data. Readable Streams: Interface to consume data streams. Writable Streams: Interface to provide data and source to the data streams. Duplex Streams: Implement both interfaces, Readable and Writable. Transform Streams: It's a Duplex Stream used to modify the data during the process. PassThrough: It's a Transform Stream useful when we need to check or test something during the stream pipeline process. Pipeline: It's useful to handle all the stream process. : Steps to reproduce Download file stream Create a progress bar Transform each CSV file line into javascript objects Get information from the file Convert the data into JSON format Compress the data Upload the new file converted Requirements The CSV file you can find here We are going to use Node version 16.16 You need to have a Google account to access Google Cloud Services. Cloud Storage Service We need to install cloud storage library to deal with google cloud service. npm install @google-cloud/storage If you need help configuring your Cloud Storage service on your Google account, there are many tutorials that can help with that, it's not the purpose of this tutorial. Let's create our first file in folder to work with our storage. cloudStorageFileService.js src src/cloudStorageFileService.js const { Storage } = require('@google-cloud/storage')
const path = require('path')
const serviceKey = path.join(__dirname, '../gkeys.json')


class CloudStorageFileService {

// (1)
    constructor() {
        this.storage = new Storage({
            projectId: 'my-project-id',
            keyFilename: serviceKey
        })
    }

// (2)
    async downloadFile(bucketName, fileName) {
        return await this.storage
            .bucket(bucketName)
            .file(fileName)
            .createReadStream()
    }

// (3)
    async uploadFile(bucketName, destFileName) {
        return await this.storage
            .bucket(bucketName)
            .file(destFileName)
            .createWriteStream()
    }

// (4)
    async getFileSize(bucketName, fileName) {
        const [metadata] = await this.storage
                        .bucket(bucketName)
                        .file(fileName)
                        .getMetadata();
        return metadata.size
    }
}

module.exports = CloudStorageFileService From the code sections above: Basic configurations to use Cloud Storage service, as the project id and the path with your Google Cloud credentials. Google Cloud Storage provides us a Readable Stream for downloading files. We can use it to download our huge file as a stream and not have the main Node.js thread become stuck. Google Cloud Storage also provides a Writable Stream to upload files. The last function we are going to use to create our progress bar. Progress Bar Here we are extending because we don't need to apply any modification to the stream, only to get some data to create our progress bar. PassThrough It is important to know that Streams implement interface, and we can work with to emit events and to listen to them. Event Emitter emit on src/progressPass.js const { PassThrough } = require('stream')

class ProgressPass extends PassThrough {

// (1)
    constructor(fileSize, options = {}) {
        super({ ...options })
        this.on('data', this.processData)
        this.on('progress', this.showResult)
        this.on('close', this.finishProgress)
        this.bytesRead = 0
        this.progress = 0
        this.fileSize = fileSize
        this.createProgressBar()
    }

// (2)
    processData(data) {
        this.bytesRead += data.length
        this.progress = (this.bytesRead / this.fileSize) * 100
        this.emit('progress', Math.floor(this.progress))
    }

// (3)
    createProgressBar() {
        process.stdout.write("\x1B[?25l")
        process.stdout.write('[')
        for(let i = 1; i <= 101; i++) {
            process.stdout.write('-')
        }
        process.stdout.write(']')
    }

// (4)
    showResult(progress) {
        process.stdout.cursorTo(progress+1)
        process.stdout.write('=')


        process.stdout.cursorTo(105)
        process.stdout.write(`${progress}%`)

    }

    finishProgress() {
        process.stdout.write("\x1B[?25h")
        process.stdout.write("\n")
    }
}


module.exports = ProgressPass From the code sections above: Initializing our progress bar: The file size parameter added to the constructor will be useful to create the progress percentage. event is emitted when a new chunk comes to the current stream. data is our custom event that we emit to update the progress bar. progress is the event emitted when there is no more data to pass through the stream. close Every time new data comes we get the chunk and add to the sum the chunk's length and emitting event to update the progress bar. progress Creating a unfilled progress bar like: [------------------------------------------------] 4 When the event happens we update the progress bar with the current percentage: progress [===========-------------------------------------]  25% Transforming CSV Line Into a Javascript Object Now it's time to get every line of our CSV file and convert it to a JS object. The intention of this is to manipulate the data easier and at the final step of the process, convert it to a JSON file. The strategy is to convert the binary chunk into text, and to read every line of the it. To get the values we need to split the lines using . , When we are reading using streams, by default each chunk has 16kb (we can modify it). Moments of separation could occur similar to the examples below: chunk 1: value1, value2, val chunk 2: ue3, value4, value5 Keep in mind we need to treat this kind of thing and temporarily save the previous chunk before splitting the text. To treat the transformation we are going to use Transform Stream. As I mentioned it's useful when we want to transform our data chunks. src/objectTransform.js const { Transform } = require('stream')

class ObjectTranform extends Transform {

// (1)
    constructor(options = {}) {
        super({ ...options })
        this.headerLine = true
        this.keys = []
        this.tailChunk = ''
    }

// (2) 
    _transform(chunk, encoding, callback) {
        const stringChunks = chunk.toString("utf8")
        const lines = stringChunks.split('\n')

        for (const line of lines) {
            const lineString = (this.tailChunk + line)
            let values = lineString.split(',')

            if (this.headerLine) {
                this.keys = values
                this.headerLine = false
                continue
            }


            if (values.length !== this.keys.length || lineString[lineString.length - 1] === ',') {
                this.tailChunk = line
            } else {
                const chunkObject = {}

                this.keys.forEach((element, index) => {
                    chunkObject[element] = values[index]
                })

                this.tailChunk = ''
                this.push(`${JSON.stringify(chunkObject)}`)
            }
        }
        callback()
    }

// (3)
    _flush(callback) {
        callback()
    }

}

module.exports = ObjectTranform From the code sections above: Let's save the keys to create our JS objects using a flag. The is for saving the incomplete CSV lines. tailChunk The magic happens here. We read every line, split the text whether the lines are completed, and convert it to JS object. is called when there is no more data to be processed. flush Extracting Information Now that we have JS objects we can extract some data from the chunks. Here again, we are going to use PassThrough Stream because we only want to check some information. src/monitorTransform.js const { PassThrough } = require('stream')

class MonitorTransform extends PassThrough {
    constructor(options = {}) {
        super({ ...options })
        this.on('data', this.processData)
        this.on('close', this.showResult)
        this.totalCrimes = 0
        this.boroughTotal = new Map()
        this.monthTotal = new Map()
        this.yearTotal = new Map()
    }

// (1)
    processData(data) {
        const row = JSON.parse(data.toString())
        const rowCrimeQuantity = Number(row.value) || 0
        const currentBoroughTotal = Number(this.boroughTotal.get(row.borough)) || 0
        const currentMonthTotal = Number(this.monthTotal.get(row.month)) || 0
        const currentYearTotal = Number(this.yearTotal.get(row.year)) || 0

        this.totalCrimes += rowCrimeQuantity
        this.boroughTotal.set(row.borough, currentBoroughTotal + rowCrimeQuantity)
        this.monthTotal.set(row.month, currentMonthTotal + rowCrimeQuantity)
        this.yearTotal.set(row.year, currentYearTotal + rowCrimeQuantity)
    }

// (2)
    showResult() {
        console.log(this.totalCrimes)
        console.log(this.boroughTotal)
        console.log(this.monthTotal)
        console.log(this.yearTotal)
    }
}


module.exports = MonitorTransform From the code sections above: When a event happens we can process the chunk and get whatever we want from it. data If there is no more data to process we show the extracted information. Transforming The File to a JSON File All the chunks are in a JS object format, but when we save the file, this won't work properly. We need to treat it by transforming it into an array of objects using Transform Stream. src/jsonTransform.js const { Transform } = require('stream')

class JsonTransform extends Transform {
    constructor (options = {}) {
        super({ ...options })
        this.once('data', this.startJson)
        this.firstLine = true
    }

// (1)
    startJson() {
        this.push('[')
    }

// (2)
    _transform (chunk, encoding, callback) {
        const row = JSON.parse(chunk.toString())
        const newChunk = this.firstLine ? `${JSON.stringify(row)}` : `,${JSON.stringify(row)}`
        this.push(newChunk)
        if(this.firstLine) {
            this.firstLine = false
        }
        callback()
    }

// (3)
    _flush(callback) {
        this.push(']')
        callback()
    }

}

module.exports = JsonTransform From the code section above: Our array should start with , it happens only in the first chunk. Here we are using instead of , to listen only one time the event . [ once on data Here we are putting to separate our JS objects. , At the end of the file we need to close the array with ] Compressing The Chunks We don't need to exert a lot of effort for this step because Node.js has a core library to help. The from Node.js is a Transform Stream used to compress chunks of data during the streaming process. We only need to add this to our stream pipeline. zlib Creating The Stream Pipeline Process The pipeline process needs to have at least the Readable and the Writable Stream, and it can have how ever many Transform Streams and PassThrough Streams we want. To handle the pipeline process we are going to use the Builder design pattern, to control the creation process of our pipeline and throw some errors. src/fileProcessor.js const { pipeline } = require('stream/promises')

class FileProcessor {
    constructor() {
        this.readableStream = null
        this.transforms = []
        this.writableStream = null
    }

// (1)
    setReadable(readableStream) {
        this.readableStream = readableStream
        return this
    }

// (2)
    addTransforms(transformsStream) {
        this.transforms = transformsStream
        return this
    }

// (3)
    setWritable(writableStream) {
        this.writableStream = writableStream
        return this
    }

// (4)
    async execute() {
        try {
            if(!this.readableStream) {
                throw Error('Readable stream not implemented')
            }
            if(!this.writableStream) {
                throw Error('Writable stream not implemented')
            }
            await pipeline(this.readableStream, ...this.transforms, this.writableStream)
        } catch (error) {
            console.log(error)
        }
    }
}

module.exports = FileProcessor From the code section above: Setting our Readable Stream, in this case, should be the download function from Google Cloud Storage. Adding Transforms to our pipeline. All the Transform and PassThrough should be added as an array. The Writable Stream is the upload function from Google Cloud Storage. To execute the pipeline if there is the Writable and Readable Stream. The function must have at least these two functions. pipeline Joining Everything It's time to import everything we've created, define the constants, and execute the entire app. src/index.js // (1)
const FileProcessor = require('./fileProcessor')
const JsonTransform = require('./jsonTransform')
const MonitorTransform = require('./monitorTransform')
const ObjectTransform = require('./objectTransform')
const { createGzip } = require('node:zlib')
const CloudStorageFileService = require('./cloudStorageFileService')
const ProgressPass = require('./progressPass')
const fileProcessor = new FileProcessor()
const cloudFileService = new CloudStorageFileService()

// (2)
const gzip = createGzip()

// (3)
const bucketName = 'myfileuploads'
const fileName = 'london_crime_by_lsoa2.csv'
const destFileName = 'london_crime_by_lsoa2.tar.gz'

// (4)
    ;
(async () => {
    try {
        const fileSize = await cloudFileService.getFileSize(bucketName, fileName)
        await fileProcessor
            .setReadable(await cloudFileService.downloadFile(bucketName, fileName))
            .addTransforms([new ProgressPass(fileSize), new ObjectTransform(), new MonitorTransform(), new JsonTransform(), gzip])
            .setWritable(await cloudFileService.uploadFile(bucketName, destFileName))
            .execute()
    } catch (e) {
        console.log(e)
    }
})() From the code sections above: Here are all the things we've created, services, Transform Streams and PassThrough Streams. As I mentioned, this is the Node.js library to compress data. We need to define our Cloud Storage bucket and file. This is our final function to execute everything together, defining the Readable, Transforms, and the Writable. Takeaways You can use this approach to import and export data between databases or generate reports. Streams are useful to process and treat audio and video files and for file conversion. You can take a look at the entire code here Also published here

Processing Massive Amounts of On Demand Data  Without Crashing NodeJS Main Thread

And how we stopped our React Context re-rendering everything Refs are a seldom-used feature in React. If you’ve read the , they’re introduced as an “escape hatch” out of the typical React data flow, with a warning to use them sparingly, and they’re primarily billed as the correct way to access a component’s underlying DOM element. official React guide But alongside the concept of Hooks, the React team introduced the Hook, which extends this functionality: useRef is useful for more than the attribute. It’s similar to how you’d use instance fields in classes. useRef() ref handy for keeping any mutable value around While I overlooked this point when the new Hook APIs launched, it proved to be surprisingly useful. 👉 Click here to skip to the solution and code snippets The Problem I’m a software engineer working on , an open-source React app that combines a spreadsheet UI with the full power of Firestore and Firebase. One of its key features is the , a form-like UI to edit a single row, that slides over the main table. Rowy side drawer When the user clicks on a cell in the table, the side drawer can be opened to edit that cell’s corresponding row. In other words, what we render in the side drawer is dependent on the currently selected row — this should be stored in state. The most logical place to put this state is within the side drawer component itself because when the user selects a different cell, it should affect the side drawer. However: only We need to this state from the table component. We’re using to render the table itself, and it accepts a callback prop that’s called whenever the user selects a cell. Currently, it’s the only way to respond to that event. set react-data-grid But the side drawer and table components are siblings, so they can’t directly access each other’s state. React’s recommendation is to to the components’ closest common ancestor, in this case, . But we decided against moving the state here because: lift this state TablePage didn’t contain any state and was primarily a container for the table and side drawer components, neither of which received any props. We preferred to keep it this way. TablePage We were already sharing a lot of “global” data via a located close to the root of the component tree, and we felt it made sense to add this state to that central data store. context Side note: even if we put the state in TablePage , we would have run into the same problem below anyway. The problem was whenever the user selected a cell or opened the side drawer, the update to this global context would cause . This included the main table component, which could have dozens of cells displayed at a time, each with its own editor component. This would result in a render time of around (!), long enough to see a visible delay in the side drawer’s open animation. the entire app to re-render 650 ms Notice the delay between clicking the open button and when the side drawer animates to open The reason behind this is a key feature of context — the very reason why it’s better to use in React as opposed to global JavaScript variables: All consumers that are descendants of a Provider will re-render whenever the Provider’s prop changes. value While this Hook into React’s state and lifecycle has served us well so far, it seems we had now shot ourselves in the foot. The Aha Moment We first explored a few different solutions (from on the issue) before settling on : Dan Abramov’s post useRef The table would still need to consume the new context, which still updates when the side drawer opens, unnecessarily. Split the context, i.e. create a new SideDrawerContext . causing the table to re-render The table would still need to call to access the side drawer’s state and . Wrap the table component in React.memo or useMemo . useContext neither API prevents it from causing re-renders This would have introduced more verbosity to our code. We also found it prevented re-renders, requiring us to spend more time fixing or restructuring our code entirely, solely to implement the side drawer. Memoize the react-data-grid component used to render the table. necessary While reading through the Hook APIs and a few more times, I finally came across that point about : useMemo useRef is useful for more than the attribute. It’s similar to how you’d use instance fields in classes. useRef() ref handy for keeping any mutable value around And more importantly: notify you when its content changes. Mutating the property . useRef doesn’t .current doesn’t cause a re-render And that’s when it hit me: We didn’t need to store the side drawer’s state — we only needed a reference to the function that sets that state. The Solution Keep the open and cell states in the side drawer. Create a ref to those states and store it in the context. Call the set state functions (inside the side drawer) using the ref from the table when the user clicks on a cell. The code below is an abbreviated version of the code used on Rowy and includes the TypeScript types for the ref: Side note: since function components run the entire function body on re-render, whenever the cell or open state updates (and causes a re-render), sideDrawerRef always has the latest value in .current . This solution proved to be the best since: The current cell and open states are stored inside the side drawer component itself, the most logical place to put it. The table component has access to its sibling’s state it needs it. when When either the current cell or open states are updated, it only triggers a re-render for the side drawer component and not any other component throughout the app. You can see how this is used in Rowy and . here here When to useRef This doesn’t mean you should go ahead and use this pattern for everything you build, though. It’s best used for when you . React’s core concepts of lifting state up and one-way data flow are enough to cover most app architectures anyway. need to access or update another component’s state at specific times, but your component doesn’t depend or render based on that state Thanks for reading! You can and follow me on Twitter . find out more about Rowy here @nots_dney Also published at https://medium.com/better-programming/how-to-useref-to-fix-react-performance-issues-4d92a8120c09

How to Optimize React Performace by Using useRef Hooks

Pytorch is a deep learning framework; a set of functions and libraries which allow you to do higher-order programming designed for Python language, based on . Torch is an open-source machine learning package based on the programming language . It is primarily developed by Facebook’s artificial-intelligence research group and Uber’s probabilistic programming language software is built on it. Torch Lua Pyro PyTorch is more “pythonic” and has a more consistent API. It also has native model exports which can be used to speed up inference. PyTorch shares many commands with , which helps in learning the framework with ease. ONNX numpy At its core, PyTorch provides two main features: An n-dimensional Tensor, similar to Numpy but can run on GPUs Automatic differentiation for building and training neural networks If you’re using anaconda distribution, you can install the Pytorch by running the below command in the anaconda prompt. conda install pytorch-cpu torchvision-cpu -c pytorch The rest of the article is structured as follows: What is Colab, Anyway? Setting up GPU in Colab Pytorch Tensors Simple Tensor Operations Pytorch to Numpy Bridge CUDA Support Automatic DifferentiationConclusion If you want to skip the theory part and get into the code right away, Niranjankumar-c/DeepLearning-PadhAI Colab — Colaboratory is a research tool for machine learning education and research. It’s a Jupyter notebook environment that requires no setup to use. Colab offers a free GPU cloud service hosted by Google to encourage collaboration in the field of Machine Learning, without worrying about the hardware requirements. Colab was released to the public by Google in October 2017. Google Colab Getting Started with Colab Sign in with your Google Account Create a new notebook via File -> New Python 3 notebook or New Python 2 notebook You can also create a notebook in Colab via Google Drive Go to Google Drive Create a folder of any name in the drive to save the project Create a new notebook via Right click > More > Colaboratory To rename the notebook, just click on the file name present at the top of the notebook. Setting up GPU in Colab In Colab, you will get 12 hours of execution time but the session will be disconnected if you are idle for more than 60 minutes. It means that for every 12 hours Disk, RAM, CPU Cache and the Data that is on our allocated virtual machine will get erased. To enable GPU hardware accelerator, just go to Runtime -> Change runtime type -> Hardware accelerator -> GPU Pytorch — Tensors Numpy based operations are not optimized to utilize GPUs to accelerate its numerical computations. For modern deep neural networks, GPUs often provide speedups of . So, unfortunately, numpy won’t be enough for modern deep learning. This where Pytorch introduces the concept of . A Pytorch Tensor is conceptually identical to an n-dimensional numpy array. Unlike the numpy, PyTorch Tensors can utilize GPUs to accelerate their numeric computations 50x or greater Tensor Let’s see how you can create a Pytorch Tensor. First, we will import the required libraries. Remember that torch, numpy and matplotlib are pre-installed in Colab’s virtual machine. torch numpy matplotlib.pyplot plt import import import as The default tensor type in PyTorch is a float tensor defined as . We can create tensors by using the inbuilt functions present inside the package. torch.FloatTensor torch ## creating a tensor rows and columns consisting ones 
>> x = torch.ones( , ) 
>> print(x) tensor([[ , ], [ , ], [ , ]]) 
## creating a tensor rows and columns consisting zeros 
>> x = torch.zeros( , ) 
>> print(x) tensor([[ , ], [ , ], [ , ]]) of 3 2 of 3 2 1. 1. 1. 1. 1. 1. of 3 2 of 3 2 0. 0. 0. 0. 0. 0. Creating a tensor by random initialization To increase the reproducibility, we often set the random seed to a specific value first. 
>> torch.manual_seed( ) #generating tensor randomly 
>> x = torch.rand( , ) 
>> print(x) #generating tensor randomly normal distribution 
>> x = torch.randn( , ) 
>> print(x) 2 3 2 from 3 3 Simple Tensor Operations Slicing of Tensors You can slice PyTorch tensors the same way you slice ndarrays #create a tensor 
>> x = torch.tensor([[ , ], [ , ], [ , ]]) 
>> print(x[:, ]) # Every row, only the last column >> print(x[ , :]) # Every column first row >> y = x[ , ] # take the element first row and first column and create a another tensor >> print(y) 1 2 3 4 5 6 1 0 in 1 1 in Reshape Tensor Reshape a Tensor to a different shape >> x = torch.tensor([[ , ], [ , ], [ , ]]) #( rows and columns) 
>> y = x.view( , ) #reshaping to rows and columns 1 2 3 4 5 6 3 2 2 3 2 3 Use of to reshape the tensors -1 indicates that the shape will be inferred from previous dimensions. In the below code snippet will result in a tensor of shape 6x1 because we have fixed the size of rows to be 6, Pytorch will now infer the best possible dimension for the column such that it will be able to accommodate all the values present in the tensor. -1 x.view(6,-1) >> x = torch.tensor([[ , ], [ , ], [ , ]]) #( rows and columns) 
>> y = x.view( , ) #y shape will be x1 1 2 3 4 5 6 3 2 6 -1 6 Mathematical Operations #Create two tensors 
>> x = torch.ones([ , ]) 
>> y = torch.ones([ , ]) #adding two tensors 
>> z = x + y #method >> z = torch.add(x,y) #method #subtracting two tensors 
>> z = x - y #method >> torch.sub(x,y) #method 3 2 3 2 1 2 1 2 In-place Operations In Pytorch all operations on the tensor that operate in-place on it will have an postfix. For example, is the out-of-place version, and is the in-place version. _ add add_ >> y.add_(x) #tensor y added x and result will be stored y with in Pytorch to Numpy Bridge Converting a Pytorch tensor to a numpy ndarray is very useful sometimes. By using . on a tensor, we can easily convert tensor to ndarray. numpy() >> x = torch.linspace( , , steps = ) #creating a tensor using linspace 
>> x_np = x.numpy() #convert tensor to numpy 
>> print(type(x), type(x_np)) 
< 0 1 5 ' . '> < ' . '> class torch Tensor class numpy ndarray To convert numpy ndarray to pytorch tensor, we can use to convert ndarray to tensor. .from_numpy() >> a = np.random.randn( ) #generate a random numpy array 
>> a_pt = torch.from_numpy(a) #convert numpy array to a tensor 
>> print(type(a), type(a_pt)) 
< 5 ' . '> < ' . '> class numpy ndarray class torch Tensor During the conversion, Pytorch tensor and numpy ndarray will share their underlying memory locations and changing one will change the other. CUDA Support To check how many CUDA supported GPU’s are connected to the machine, you can use the code snippet below. If you are executing the code in Colab you will get 1, that means that the Colab virtual machine is connected to one GPU. is used to set up and run CUDA operations. It keeps track of the currently selected GPU. >> print(torch.cuda.device_count()) 1 If you want to get the name of the GPU Card connected to the machine: >> print(torch.cuda.get_device_name( )) 
Tesla T4 0 The important thing to note is that we can reference this CUDA supported GPU card to a variable and use this variable for any Pytorch Operations. All CUDA tensors you allocate will be created on that device. The selected GPU device can be changed with a context manager. torch.cuda.device #Assign cuda GPU located at location to a variable 
>> cuda0 = torch.device( ) #Performing the addition on GPU 
>> a = torch.ones( , , device=cuda0) #creating a tensor on GPU >> b = torch.ones( , , device=cuda0) #creating a tensor on GPU >> c = a + b 
>> print(c) 
tensor([[ , ], [ , ], [ , ]], device= ) '0' 'cuda:0' 3 2 'a' 3 2 'b' 2. 2. 2. 2. 2. 2. 'cuda:0' As you can see from the above code snippet the tensors are created on GPU and any operation you do on these tensors will be done on GPU. If you want to move the result to CPU you just have to do .cpu() #moving the result to cpu 
>> c = c.cpu() 
>> print(c) 
tensor([[ , ], [ , ], [ , ]]) 2. 2. 2. 2. 2. 2. Automatic Differentiation In this section, we will discuss the important package called automatic differentiation or autograd in Pytorch. The autograd package gives us the ability to perform automatic differentiation or automatic gradient computation for all operations on tensors. It is a define-by-run framework, which means that your back-propagation is defined by how your code is run. Let’s see how to perform automatic differentiation by using a simple example. First, we create a tensor with parameter set to True because we want to track all the operations performing on that tensor. requires_grad #create a tensor requires_grad = True 
>> x = torch.ones([ , ], requires_grad = True) 
>> print(x) 
tensor([[ , ], [ , ], [ , ]], requires_grad=True) with 3 2 1. 1. 1. 1. 1. 1. Perform a simple tensor addition operation. >> y = x + #tensor addition 
>> print(y) #check the result 
tensor([[ , ], [ , ], [ , ]], grad_fn= 5 6. 6. 6. 6. 6. 6. ) < > AddBackward0 Because y was created as a result of an operation on x, so it has a grad_fn. Perform more operations on y and create a new tensor z. >> z = y*y + >> print(z) 
tensor([[ , ], [ , ], [ , ]], grad_fn= <SumBackward0>) 1 37. 37. 37. 37. 37. 37. ) >> t = torch.sum(z) #adding all the values in z 
>> print(t) 
tensor(222., grad_fn= < > AddBackward0 Back-Propagation To perform back-propagation, you can just call t.backward() >> t.backward() 
#peform backpropagation but pytorch will not print any output. Print gradients . d(t)/dx >> print(x.grad) 
tensor([[ , ], [ , ], [ , ]]) 12. 12. 12. 12. 12. 12. will give you the partial derivative of with respect to . If you are able to figure out how we got a tensor with all the values equal to 12, then you have understood the automatic differentiation. If not don't worry just follow along, when we execute we are calculating the partial derivate of t with respect to . Remember that t is a function of , which in turn is a function of . x.grad t x t.backward() x z x d(t)/dx = 2y * 1 at x = 1 and y = 6, where y = x + 5 The important point to note is that the value of the derivative is calculated at the point where we initialized the tensor x. Since we initialized x at a value equal to one, we get an output tensor with all the values equal to 12. The entire code discussed in the article is present in the Kaggle Kernel. Feel free to fork it or download it. . The best part is that you can directly run the code in Kaggle Kernel once you fork it, don’t need to worry about installing the packages GettingStartedWithPytorch_GPU If Colab is your jam, click to execute the code directly and get your hands dirty. here Niranjankumar-c/DeepLearning-PadhAI Conclusion In this post, we briefly looked at the Pytorch & Google Colab and we also saw how to enable GPU hardware accelerator in Colab. Then we have seen how to create tensors in Pytorch and perform some basic operations on those tensors by utilizing CUDA supported GPU. After that, we discussed the Pytorch package which gives us the ability to perform automatic gradient computation on tensors by taking a simple example. If you have any issues or doubts while implementing the above code, feel free to ask them in the comment section below or send me a message in citing this article. autograd LinkedIn Learn More If you want to learn more about Data Science, Machine Learning. Check out the and by Abhishek and Pukhraj from . One of the good points about these courses is that they teach in both Python and R, so it’s your choice. Machine Learning Basics Advanced Machine Learning Starttechacademy Recommended Reading Deep Learning Best Practices: Activation Functions & Weight Initialization Methods — Part 1 Demystifying Different Variants of Gradient Descent Optimization Algorithm In my next post, we will discuss how to implement the feedforward neural network using Pytorch (nn.Functional, nn.Parameters). So make sure you follow me on medium to get notified as soon as it drops. Until then Peace :) NK. Author Bio is Retail Risk Analyst Intern at HSBC Analytics division. He is passionate about Deep learning and Artificial Intelligence. He is one of the top writers at in . You can find all of Niranjan’s blog . You can connect with Niranjan on , and to stay up to date with his latest blog posts. Niranjan Kumar Medium Artificial Intelligence here LinkedIn Twitter GitHub . I am looking for opportunities either full-time or freelance projects, in the field of Machine Learning and Deep Learning. If there are any relevant opportunities, feel free to drop me a message on LinkedIn or you can reach me through email as well. I would love to discuss Originally published at https://www.marktechpost.com on June 9, 2019.

Getting Started With Pytorch In Google Collab With Free GPU

This is part 1 of my ISIC cancer classification series. You can find part 2 here . (Pictured Above: A malignant lesion from the ISIC dataset) Computer vision based melanoma diagnosis has been a side project of mine on and off for almost 2 years now, so I plan on making this the first of a short series of posts on the topic. This post is intended as a quick/informative read for those with basic experience looking for an introduction to the ISIC problem, and those just getting out of their first or second machine learning/data mining course who’d like a simple problem to get their hands dirty with. machine learning Tools for early diagnosis of different diseases are a major reason machine learning has a lot of people excited today. The process for these innovations is a long one: Labeled datasets need built, engineers and data scientists need trained, and each problem comes with its own set of edge cases that often make building robust classifiers very tricky (even for the experts). Here I’m going to focus on building a classifier. First I’ll show you a simple classifier, then talk about how we can measure its success, and how we can improve it. The early diagnosis challenge I’ll be exploring here is called the challenge. Here’s an excerpt of their problem statement: ISIC The International Skin Imaging Collaboration: Melanoma Project is an academia and industry partnership designed to facilitate the application of digital skin imaging to help reduce melanoma mortality. When recognized and treated in its earliest stages, melanoma is readily curable. Digital images of skin lesions can be used to educate professionals and the public in melanoma recognition as well as directly aid in the diagnosis of melanoma through teledermatology, clinical decision support, and automated diagnosis. I thought I would share some of the details for a simple classification system for this problem that can be built from only the things implemented in an early machine learning class. No or bleeding-edge research papers here; the goal of this post is only to build and analyze a classifier with modest performance that demonstrates how to judge your own entry into the ISIC challenge. The code is all on , so much of my work will be reusable by anyone interested in the problem. deep learning Github We’ll be using PCA (Principal Components Analysis) to reduce the dimensionality of the dataset, once the dimensionality is smaller we’ll train a random forest classifier on it. Then we’ll do some analysis on the classifier to see how it could be improved, and gather some important metrics for the ISIC challenge such as AUC (Area Under Curve), ROC curve, and confusion matrix. If you’re unfamiliar with any of these terms or why don’t worry, I’ll briefly overview them in their corresponding sections and provide references for further study. The Dataset I won’t dive deep into the details of the dataset, as the ISIC , but in this post we’ll focus on the binary classification portion of the challenge, and not the lesion segmentation, or dermoscopic feature extraction. In the binary classification challenge you’re asked to differentiate melanoma images from seborrheic keratosis and benign tumors, as well as seborrheic keratosis images from melanoma and benign tumors. I’ll focus on just the melanoma vs. others portion, as any work done that way can easily be swapped out to accomplish the seborrheic keratosis part of the challenge. It’s also important to know that the distribution of the dataset is 374 melanoma images, 254 seborrheic keratosis, and another 1372 benign images (also called nevus). More on how this skewed distribution will affect how we judge our classifier later. explains it all Dimensionality Reduction with PCA In image classification tasks individual pixels are your features, so dimensionality reduction is key. A typical 500x500 RGB image has 750,000 (500*500*3) features, which is intractable for any dataset numbering in the thousands, so we’ll need to employ a dimensionality reduction technique. Principal components analysis is what we’ll use to reduce the dimensionality. PCA will find the vectors accounting for the maximum variance in our data set, and we’ll use those vectors as our features (instead of the large number of individual pixels). You can pick the number of vectors you want to use for your dataset, and in our case we’ll use 20. If you’re new to machine learning, and have some undergraduate linear algebra skills, implementing PCA is a good exercise to learn the specifics. But if you don’t have a few hours to spare, think of PCA as an operation that will take us from a matrix to an matrix while retaining most of the information in our dataset (in our 20-feature case 80% of the variance is retained). At the cost of a longer preprocessing time, we could always increase the number of features to account for more of the variance of our data until we have features. MxN Mx20 N def reduce_dimensionality(dataset): data_with_class = np.load(dataset)
    data_no_class, y = extract_features_and_class(data_with_class)

    # Will Seg-fault regular PCA due to dataset size
    # Somewhat arbitrary batch size here. 
    pca = IncrementalPCA(n_components=N_COMPS)
    num_batches = int(math.ceil(y.shape[ ] / float(BATCH_SIZE))) i xrange(num_batches):
        batch = get_next_batch(data_no_class, i, BATCH_SIZE) 
        pca.partial_fit(batch)

    reduced_data = None i xrange(num_batches):
        batch = get_next_batch(data_no_class, i, BATCH_SIZE) 
        transformed_chunk = pca.transform(batch) reduced_data == None:
            reduced_data = transformed_chunk :
            reduced_data = np.vstack((reduced_data, transformed_chunk))
    reduced_data_with_class = np.hstack((reduced_data,y)) reduced_data_with_class
 
def get_next_batch(data, i, batch_size): (i + ) * batch_size > data.shape[ ]: data[i * batch_size:data.shape[ ], :] data[i * batch_size:(i + ) * batch_size, :]

def extract_features_and_class(data_with_class): y = data_with_class[:, ]
    # Reshape into column vector instead row
    y_col = y.reshape(y.size, )
    n_columns = data_with_class.shape[ ] - data_no_class = data_with_class[:, :n_columns] data_no_class, y_col "" " Reduces the dimensionality of dataset (assuming it stored using numpy) " "" with 0 for in for in if else return "" " Returns the ith batch of size batch_size from data. 
      If  (i + 1) * batch_size goes past the size of the data, 
      this just returns the remaining rows" "" if 1 0 return 0 return 1 "" " Seperates the features from the label. 
      Assumes the labels the final column of data_with_class. " "" -1 of 1 1 1 0 return The above is a little snippet of the PCA code I used in this classifier. was necessary here because the images are somewhat large; it adds a bit to the size/complexity of the code, but on the ISIC dataset the code above can still be completed on my laptop in 20 or so minutes (your mileage may vary; I’m running a Macbook with a 2.9gHz i9, and 16 gigs of RAM). It’s also worth noting that the images needed resizing in order to be uniform for the input into PCA. Incremental PCA Now that our dataset is smaller, let’s train a classifier on it! Classification For this I went with a tried-and-true classic: a random forest. The gist of this classifier is that some number of decision trees are built, each one trained using a random subset of the feature space. Then (as in other ensemble classifiers) the individual trees are used to vote on the classes of new examples. I really only picked the random forest because it tends to be a strong out-of-the-box classifier that trains quickly. The top papers for the ISIC challenge tend to utilize convolutional neural networks; these employ convolution and pooling operations on images in order to reduce their dimensionality before running the images into a plain neural network. Some papers even ensemble convolutional networks! I hope to release some details on how to do this effectively for the ISIC challenge in another blog post :) I chose not to include the code for the classification in this post as it’s pretty trivial (just a plug-and-play sklearn classifier). You can find the classification file on the Github page . here Analyzing Our Results The ISIC classification competition score is based on your classifier’s AUC (Area Under Curve) for its ROC (Receiver Operator Characteristic) curve. If you’re unfamiliar with these terms, the ROC curve is a plot of the true positive rate and false positive rate of our classifier at different classification thresholds. The ROC is handy because it let’s us see how much sensitivity we’ll sacrifice for a higher specificity. In melanoma diagnosis a low false-positive rate (AKA a high specificity) is key because any melanoma detection indicates the need for an invasive biopsy of the lesion. By changing the classification threshold, we can always give up sensitivity for specificity or vice versa; the ROC graph just shows us the trade off. AUC is the primary metric that your submission for the ISIC challenge will be judged upon. AUC is a crucial metric for imbalanced datasets because a high accuracy is often only indicative of a classifiers ability to guess the dominant label. Using the ROC along with its AUC we can get around any misleading accuracy percentages. The ISIC dataset you’ll download has far fewer melanoma examples than seborrheic keratosis, and nevus. Only about 20% of the default ISIC dataset is malignant, 374 images total. The skewed distribution has a big impact on how we judge our classifier, and how we train it. First of all, 80% accuracy would not be impressive on the initial dataset because we could get it by simply guessing “benign” everywhere. Any classifier that does this will end up with a low specificity and appear to be “guessing” on the ROC curve (a linear line on an ROC curve implies random guessing, which hurts AUC). Another problem with the imbalanced dataset is that your classifier will usually be built to minimize some loss function, so the imbalanced dataset will “trick” the classifier into only guessing the dominant class; even if it could make predictions based on something other than the dominant class’ prior probability. To remedy the skewed distribution we’ll undersample the dataset. In the case of the Stanford paper I mention below, I saw in their taxonomy that their percentage of benign lesions was 60%, so I went ahead and under-sampled until I had a 60/40 distribution. The under-sampling was random, AKA I just threw out random benign images (which isn’t the best approach), but more on that later. The undersampling dramatically improves the AUC for the PCA to random forest model we built. Before we jump into our classifier’s accuracies, sensitivities etc. we need to establish what a good score is. We’ll judge our classifier by comparing it to how dermatologists score today. Here are some ROC curves from a popular paper that came out this year titled . Nature “Dermatologist-level classification of skin cancer with deep neural networks” (The melanoma vs. all ROC curve for dermatologists in the paper mentioned above. The orientation is different than I’m personally used to because paper actually plots the sensitivity (true positive rate) vs the specificity (true negative rate). Most ROC curves plot the sensitivity on the y-axis and the false-positive rate on the x-axis, but this representation is equivalent. The difference between the two graphs is the way the photo was taken: dermoscopy images are taken with a special device called a dermoscope, and the others were taken in a normal clinical setting.) ) (The ROC curve for our classifier for each fold of our cross validation. Note that this is for both dermoscopy and non-dermoscopy images. I decided to flip this curve to match the one provided in the Stanford paper for easier comparison Look above, and you’ll be shocked to see that we didn’t do as well as a team of Stanford Ph.Ds… However, our graph isn’t bad for a first attempt. Note that it’s also likely that our classifier would perform worse in the real world due to the small size of the dataset (unlike the Stanford paper mentioned above which had two orders of magnitude more data). After doing that and running the classifier I got a mean accuracy of 75%, mean sensitivity of 73%, and mean precision of 71% across the 7 folds for the malignant detection task, and because we were doing a 60/40 split this does seem to indicate that our classifier is learning something! , dermatologists tend to get 60% accuracy unaided by dermoscopic imaging, and 75%-84% accuracy when aided by imaging techniques. So our classifier is almost as accurate as a dermatologist with the assistance of their dermatoscope, and likely better than the blind eye (assuming the dataset used to get that accuracy has a similar distribution as ours). According to the ISIC (The confusion matrix for one of the K-folds trials. The 60/40 imbalance in the dataset likely contributes to the higher misclassification rate for melanomas.) Our AUC for melanoma vs all is on average 80%. Top papers tend to have in the low 90s for the melanoma vs all AUC (and in the high 90s for other AUCs), so we still have a long way to go. Improving our Classifier Adding more data from the archive The ISIC provides an that using a REST API. Getting more malignant data this way so you don’t need to undersample is probably the easiest way to increase the performance of the classifier you just read about. archive of additional data you can query Better Sampling Techinques A core issue with the dataset is the underrepresentation of melanomas. If we train the classifier using a dataset comprised of 80% non-malignant data our classifier is heavily biased, resulting in very poor performance (you can do this experiment yourself quite easily, the AUC drops to about 65% as the sensitivity of the classifier becomes weaker). To mitigate the skewed distribution we’re currently undersampling the benign images, however a better approach may be to oversample the malignant examples with some noise. There are some pretty sophisticated oversampling techniques out there, like , which creates its own “synthetic” examples instead of simply duplicating the existing minority class. SMOTE Segmentation / Thresholding This is actually another totally separate subcategory within the ISIC challenge, but we can use it to crop the image to only sections where the lesion exist, and then train on those areas. This may improve classification accuracy by removing background “noise”. Choosing the right segmentation technique is tricky though, as many will fail and white-out the whole image. I actually include some of this code on the Github repository, and if you want to see that let me know. I’d be happy to make another post, or guide you through it. Utilizing associated metadata The ISIC also provides age, and sex information on the images, seeing if those affect the AUC for your classifier is low hanging fruit. In papers I’ve read, I’ve seen these features have an effect on the performance of convolutional neural networks in seborrheic keratosis classification, but not always in melanomas. Final Remarks If you’ve made it this far I hope it was helpful! You can find part 2 . here Originally I intended to use convolutional networks in this post, but I realized that with the analysis portion the post ended up being too long-winded (I worked a little to keep this around 2000 words), so I built a simple classifier so the guide could mostly focus on the analysis. If you find any mistakes definitely let me know! Also, the code was written in a somewhat hurried fashion, so if you’d like to reuse the code yourself as an exercise, but you’ve run into trouble, just message me and I can guide you through it. Thanks again :) : Minor grammatical mistake, added the second tutorial Edits

Machine Learning for ISIC Skin Cancer Classification Challenge

I recently built an app utilising data from the WHO (World Health Organisation), the WikiQuotes API, Recharts, lots of CSS and JS, and, of course, passion for the subject. This will show you how to do it minutely. Intro: Before beginning a project there is one thing you must know, and that is what exactly you are passionate about. I’ll leave that fundamental conundrum to you. Personally, I love to dwell on life on Earth and the folks on it with all the disparate forces within their lives. I decided to do this: Ten data sets containing data expressing something intense about life. Ten charts to create a user experience with the data. Ten quotes correlating with the data, from the WikiQuotes . API This is what the app looks like in the end: Quick viewing of the app This guide will be separated as so: Creating the app with Create App React Manipulation of data to create charts with Recharts Utilising the WikiQuotes API to scrape quotes Dynamically changing pages and passing props Deploying on Github Pages You can definitely do this. this is possibly, probably, maybe an exaggeration Creating a React App npm install -g create-react-app Then this: create-react-app name_of_app_you're_creating This creates a directory with the file structure within it Go into this new directory or npm start yarn start Pop! You have the file structure all set up! Take a peak at it: my-app/  README.md  node_modules/  package.json  public/    index.html    favicon.ico  src/    App.css    App.js    App.test.js    index.css    index.js    logo.svg node-modules? Contains countless lines of code written by some smart folks to do all sorts of heavy lifting for you so you can simply focus on the easy-to-conceptualise part of writing code (functions that do relatable things and visual aspects) public? Here is the HTML file that will be rendered on the page, the starting point of your app, visually. , that’s that little image on your tab. It is referenced in the favicon.ico manifest.json The is mainly used for metadata manifest.json src This is where just about everything you write will be located See the and the . Both do the same thing. I thought of it this way. What will I want to occur visually globally throughout the app? Put that into the . All else put into the . It’s a small app. index.css App.css index.css App.css The , this creates ‘workers’ that do tasks to improve a users experience with a website as well as improving the functioning of the site as a whole. registerServiceWorker.js The is linking the to everything you are to write. index.js index.html The juicy part, the , is your app. This is the dwelling place. The place where everything comes together. Personally, I deleted everything in the return statement except the as I did not want a header. App.js div Notice the data folder I have there. Go find some data, personally I used: and clicked around until I found data of interest. After the JSON is downloaded, move the files to the data folder. WHO data Now, onto the actual writing of code. How many individual pages will you have? Well, you should create a component for each one. The beginning of my plan was this. Ten files of data to create ten charts. So I will show how to create the charts. First, create a new folder to hold these components that you will create and simultaneously create the files associated. Manipulation of data and creation of charts I’ll show you how to create this chart: I did mention expressing something intense about life Link to data if curious: Data Set With data originally structured as so: { "dimension": [many_irrelevant_objects],"fact": [ {  
               "dims": {  
                           "COUNTRY": "Afganhistan",  
                           "YEAR": "2010",  
                           "GHO": "Knowledge about sexual      
                           transmission of AIDS",  
                           "SEX": "Female"  
                       },  
               "Value": "8.8"

},  
          ...many\_more\_objects of same format  
       \] } For my chart I want the data to end up looking like this: [{"year": "1993","Burkina Faso": 16,"Ghana": 0,"Kenya": 0},...,{"year": "2010","Burkina Faso": 80.4,"Ghana": 75.05,...}] Formatting the data Notice how the initial format has the odd field which is unneeded, all that is needed is within ‘s and . So, here I am grabbing those values and setting them to an individual object. “dimension” "fact" "dims" "Value" const initialReformat = (data) => {let temp = {}return data.fact.map(row => {temp = row.Valuerow = row.dimsrow.Value = tempreturn row})} I now have this: [{COUNTRY: 'Afghanistan',YEAR: '2010',GHO: 'Knowledge about sexual transmission of AIDS',SEX: 'Female',Value: '8.8'},...] Next, I created an object, set each year to a key whose value is to be an array of every piece of data with a YEAR value correlating. const sortDataByYear = data => {var sortByYear = {}data.forEach( row => {if (!sortByYear[row.YEAR]) {sortByYear[row.YEAR] = [];sortByYear[row.YEAR].push(row);} else {sortByYear[row.YEAR].push(row);}})return sortByYear} Quite simple, check if year does not exist, if so, create a new array and push that data into it. Otherwise, push the data into the year array that has already been created. And I end up with this object: {1992:[ { COUNTRY: 'Malawi',YEAR: '1992',GHO: 'Knowledge about sexual transmission of AIDS',SEX: 'Male',Value: '0.0' },...],1993: [...],...} Now, the last function to get the necessitated data structure for the chart: const finalData = []for (const year in sortByYear) {finalData.push({ year })sortByYear[year].forEach(obj => {if (parseFloat(finalData[i][obj.COUNTRY]) > 0) {finalData[i][obj.COUNTRY] = (finalData[i][obj.COUNTRY] + parseFloat(obj.Value)) / 2}else finalData[i][obj.COUNTRY] =parseFloat(obj.Value).toFixed(2)})i++} First, I made a brand new array to store the final data. Then, I created a new object for each year and set that year as one of the objects key/value pairs ( ). Lastly, I looped through the array corresponding with the year from the previous functions returned object: . finalData.push({ year }) sortByYear Inside this array, I have two layers to check: Has the country been set as a key for the object in the final data array? If it has not, it means that I am seeing a different sex (gender), so I should average this number with the previous, . (finalData[i][obj.COUNTRY] + parseFloat(obj.Value)) / 2 is used so the next year is in the next index of the array. i We are at the point. Though, a quick description of the creation of a react component will happen next. Then the visual presentation. arranged Taking a look at the rendering of a React Component import React, { Component } from 'react' Create a class and a constructor class HIVKnowledge extends Component {constructor(props) {super(props)this.state = {data: [],quote: ""}}... 3. Import the data and when the “component mounts”, set the state of the data. const HIVKnowledgeData = require('../data/diseases-hiv-knowledge.json'); ...where I left off above componentDidMount() {const data = []data = initialReformat(HIVKnowledgeData)this.setState({ data })} runs when the page is “mounted” or ready to load and whatever is put here affects the initial rendering. componentDidMount 4. Final data management prior to rendering the page: render() {let sortByYear = [],finalData = [],i = 0if (this.state.data.length > 0) {sortByYear = sortDataByYear(this.state.data)...then run the last data function on sortByYear} Check if the length is greater than zero, as does not occur immediately. So, at the first check of this if statement the data will be an empty array, which is not at all what we want to be inputted into our graph. componentDidMount The creation of the chart and the rendering of the page npm install recharts What to import from recharts: import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; What to put into your index.html right above the tag (also change that if you want the tab to say something other then React App) <title> <link rel="stylesheet" href=" "><script src=" " integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM="crossorigin="anonymous"></script><script src=" "></script> https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css https://code.jquery.com/jquery-2.1.3.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js What to put in your render’s return statement: return (<div className="chart bar HIV"><h6>Knowlege about sexual transmission of AIDS (AverageBoth Sexes)</h6><ResponsiveContainer width='100%' height={300}><LineChartcx="50%"cy="50%"outerRadius="80%"data={finalData}><XAxis dataKey="year" /><YAxis /><CartesianGrid strokeDasharray="3 3" /><Tooltip /><LineconnectNulls={true}type="monotone"dataKey="Zambia"stroke="black"/>...rest of lines and closing tags This is what will render on the page. This is JSX. The className is React’s way to set class. Otherwise, the is as one expects and notice how the graph is quite HTML’y as well. Notice, a defining factor of JSX components is the camelCase. <h6> As for the chart: The responsive container does exactly what one expects, gets larger and smaller based upon the screen size. are not random numbers. This is a secret recipe to get a centered location for the chart. width cx cy outerRadius is how the data is inputted into the chart. data={finalData} is what sets the years as the… x-axis, very complex. <XAxis datakey=”year” /> creates a lovely user interaction when hovering over data. <Tooltip /> is each line with the color, country (key in the array), and will do just that, if the next year is a distance away, the line will connect. Helpful with this data as many countries skip many years between studies. <Line … /> connectNulls Export the component at end of file export default HIVKnowledge Import the component in App.js import HIVKnowledge from ‘./poem-1-data/HIVKnowledge’ Render the chart component Put inside the within the return statement of the render method. <HIVKnowledge /> div You should now see the the chart on the page. Hopefully not Utilising the WikiQuotes API to render quotes 1. I used this module readily available on github: https://github.com/natetyler/wikiquotes-api Copy and paste it into a file in your app. I used a file called . WikiQuote.js 2. Import jQuery at the top of this file: import * as $ from ‘jquery’ 3. Export the module: export const WikiquoteApi = ... 4. Create the necessary error callback: export const error = (err) => {console.error(err)} 5. Import into the chart component: import { WikiquoteApi, error } from ‘../WikiQuote.js’ 6a. Create the callback function within the so that the variable is set when this is called: success componentDidMount quote const success = (wikiData) => {quote = `"${wikiData.quote}"`} 6b. Create a function that waits for the WikiQuote function to finish (this is an asynchronous challenge), repeatedly calling itself until that occurs, setting state immediately. Put this also in the checkQuoteLength componentDidMount const checkQuoteLength = () => {if (quote.length > 0) {this.setState({ quote, data })} else {setTimeout(checkQuoteLength, 100)}} 6c. Invoke : checkQuoteLength checkQuoteLength() 6d. Call the : WikiquoteApi.getRandomQuote(title_to_search_in_wikiquotes, success, error) componentDidMount () {let quote = "", data = []const success = (wikiData) => {quote = `"${wikiData.quote}"`}const checkQuoteLength = () => {if (quote.length > 0) {this.setState({ quote, data })} else {setTimeout(checkQuoteLength, 100)}}WikiquoteApi.getRandomQuote("HIV/AIDS", success, error)data = initialReformat(HIVKnowledgeData)checkQuoteLength()} 7. Render the Quote: return (<div className="chart bar HIV"><h6>Knowlege about sexual transmission of AIDS (AverageBoth Sexes)</h6><p>{this.state.quote}</p><ResponsiveContainer width='100%' height={300}>... Voila! Now the quote exists on the webpage. Now you can do all sorts of stuff with this in apps But you only have a single page with one chart, create more charts at this time before moving on if you are planning to. Next, what will be shown is how to go from one page to the next in a simple way. Dynamically changing pages and passing props Creating some buttons: I used to make my life easier. CSS Button Generator Creating a buttons component, for a left and a right button: Make a file called that will contain the HTML for the buttons. Buttons Create a class component (same as previously done) with two initial states, and . leftButtonDisable: true rightButtonDisable: false In the return create the buttons: <div className="buttons"><button className="btn" value="left" disabled={this.state.leftButtonDisable} onClick={this.handleClick}>◀</button><button className="btn" value="right" disabled={this.state.rightButtonDisable} onClick={this.handleClick}>▶</button></div> 3. Create the class method: handleClick handleClick(event) {let value = 0if (event.target.value === "left") {value--this.props.onPageChange(value)} else {value++this.props.onPageChange(value)}} Set value to zero, and if it is left then decrement it, otherwise increment it. And pass that value into… . Will go over this next. this.props.onPageChange 4. Export the component Within the App.js: import Buttons from ‘./Buttons’ Create a currentPage state and set it to zero: currentPage: 0 2. Create an class method and set the context to allow the corresponding page to render onPageChange this constructor (props) {...this.onPageChange = this.onPageChange.bind(this)} onPageChange(value) {const currentPage = this.state.currentPage + valuethis.setState({ currentPage })} 3. Put the Buttons component in the render and pass and as props to the component onPageChange currentPage Buttons <ButtonscurrentPage={this.state.currentPage}onPageChange={this.onPageChange}/> Back to the Buttons Component Use the life cycle method to know when to disable buttons componentWillRecieveProps componentWillReceiveProps(nextProps) {let currentPage = nextProps.currentPageif (currentPage === 0) {this.setState({leftButtonDisable: true})}else if (currentPage === 9) {this.setState({rightButtonDisable: true})} else {this.setState({leftButtonDisable: false,rightButtonDisable: false})}} This runs whenever the props that is passing down to changes, in this case, changes. When changes runs and is an object with key/values of the props being passed down as the incoming value. This allows you to alter the state at this instance, and in turn alter the component being viewed visually on the page. App.js buttons.js currentPage currentPage componentWillReceiveProps nextProps Ah buttons, wonderful buttons Rendering different pages based upon **currentPage** Create a render page class method in App.js renderPage(curPage) {switch (curPage) {case 0:return <HIVKnowledge />case 1:return <LifeExpectancy />...default:return console.error("Something is wrong with your buttons")}} 2. call this function in the statement of the class method return render <div className="App">{this.renderPage(this.state.currentPage)}<Buttons currentPage={this.state.currentPage} onPageChange={this.onPageChange} /></div> And now, possibly, hopefully you know how to create a multi-page react app. If yes, you must feel this way Deploying the App to Github Pages Info is thanks to . this Medium Article Go to your and add two new fields as so: package.json {..."private": true, //below this add:"homepage": "scripts": {"eject": "react-scripts-eject", //below this add:"deploy: "npm run build&&gh-pages -d build"...} "https://github_username.github.io/repository_name",       ... 2. Then do this: . Push your code to master. npm install --save-dev gh-pages 3. which will create a bundle of all the code in your application (after running it, look in your file system and you will see a folder containing all of the code in a tightly woven, unreadable format). npm run build build 4. is the last step in the terminal npm run deploy 5. Go onto your GitHub account. Go to the applications page, then to settings, scroll down until you reach the GitHub Pages, click the Source dropdown and find then wait a moment and you are… gh-pages branch Deployed! In the future, if you edit some code or something similar be sure to run then for your deployed app to be affected! npm run build npm run deploy buenisimo In Closing No matter your skill level in React, I aimed to make sure this article held nuances that anyone can learn from. This was written directly after completing the aforementioned project so the troubles, the tribulations are fresh on my mind (in relation to the person I am this moment, while I am typing these words, that are reference). Still there are countless resources in React, and this was only a few of a giant assortment of resources. If you read this but know there is something else you want to do, check this repo out: . awesome-react-components Here’s a quote by Marcel Proust: “Every reader finds himself. The writer’s work is merely a kind of optical instrument that makes it possible for the reader to discern what, without this book, he would perhaps never have seen in himself.” Let’s hope that React is a tool that helps you write code that does the same. There is a corresponding CSS article… here And this is the repo: Quote and a Chart And thank’s Doug and Kyle for the proofreading! All the best in your journey, I am regularly creating content so follow me if you learned a thing or two, and those clap thingies are surely welcome. Comments too.

How to Create and Deploy a Create React App with Recharts, the WikiQuotes API, and a Data Set

I had an interesting problem to solve recently. Being just out of college and seeing the first instance of something that was learnt, in the real world scenario was kind of exciting. The thing is that there were occasional orders and some request getting failed within our e-commerce Rails app. From the exception handles we found out that it was caused by errors. API MySQL "Deadlock found when trying to get lock; try restarting transaction" "Lock wait timeout exceeded; try restarting transaction" This was bad as something which is an integral part of the business should not fail. So my first priority was to isolate the cause of this. From the logs, I was able to backtrace to which line of code was failing and also find out that both of the above errors were for the same line of code. So what exactly is a deadlock? Suppose there are two transactions which need to acquire some lock so that it can commit the transaction. Transaction A: Locks row X and awaits to lock row Y. Transaction B: Locks row Y and awaits to lock row X. But these two transactions holds the lock on the row that the other requires to function, thus creating a situation wherein both ceases to function. In such cases, MySQL times out one or both of the transactions and the locks are released. But the thing with Rails is that you have the ORM, transaction enclosed callbacks and I often forget about the SQL, underlying database protocols and ACID properties it has to maintain. It’s all Rails magic. To the muggle world now! Three things could be deduced now: Locks required for the failing line of code are in reverse order of what locks the other transaction needs, thus causing deadlocks. There is some heavy transaction which might be locking the table instead of the row such that orders are failed due to timeouts. As its the same line of code that is failed, a timeout error occurs when deadlock does not happen. So the next step was to find out the other transaction which is locking the rows causing timeouts and deadlocks. Troubleshooting Deadlocks: In the MySQL console execute the query: SHOW ENGINE INNODB STATUS; This gives you the state of the InnoDB storage engine. It has different sections of information among which you can find the information on latest detected deadlock. You can read more on this . here Here is a sample deadlock section: ------------------------LATEST DETECTED DEADLOCK------------------------141016 15:39:58*** (1) TRANSACTION:TRANSACTION 3D009, ACTIVE 19 sec starting index readmysql tables in use 1, locked 1LOCK WAIT 2 lock struct(s), heap size 376, 1 row lock(s)MySQL thread id 2, OS thread handle 0x7f0ee43cd700, query id 78 localhost rootupdatingDELETE FROM t WHERE i = 1*** (1) WAITING FOR THIS LOCK TO BE GRANTED:RECORD LOCKS space id 0 page no 2428 n bits 72 index `GEN_CLUST_INDEX` of table`mysql`.`t` trx id 3D009 lock_mode X waitingRecord lock, heap no 2 PHYSICAL RECORD: n_fields 4; compact format; info bits 00: len 6; hex 000000000700; asc       ;;1: len 6; hex 00000003d007; asc       ;;2: len 7; hex 87000009560110; asc     V  ;;3: len 4; hex 80000001; asc     ;; *** (2) TRANSACTION:TRANSACTION 3D008, ACTIVE 69 sec starting index readmysql tables in use 1, locked 14 lock struct(s), heap size 1248, 3 row lock(s)MySQL thread id 1, OS thread handle 0x7f0ee440e700, query id 79 localhost rootupdatingDELETE FROM t WHERE i = 1*** (2) HOLDS THE LOCK(S):RECORD LOCKS space id 0 page no 2428 n bits 72 index `GEN_CLUST_INDEX` of table`mysql`.`t` trx id 3D008 lock mode SRecord lock, heap no 1 PHYSICAL RECORD: n_fields 1; compact format; info bits 00: len 8; hex 73757072656d756d; asc supremum;; Record lock, heap no 2 PHYSICAL RECORD: n_fields 4; compact format; info bits 00: len 6; hex 000000000700; asc       ;;1: len 6; hex 00000003d007; asc       ;;2: len 7; hex 87000009560110; asc     V  ;;3: len 4; hex 80000001; asc     ;; *** (2) WAITING FOR THIS LOCK TO BE GRANTED:RECORD LOCKS space id 0 page no 2428 n bits 72 index `GEN_CLUST_INDEX` of table`mysql`.`t` trx id 3D008 lock_mode X waitingRecord lock, heap no 2 PHYSICAL RECORD: n_fields 4; compact format; info bits 00: len 6; hex 000000000700; asc       ;;1: len 6; hex 00000003d007; asc       ;;2: len 7; hex 87000009560110; asc     V  ;;3: len 4; hex 80000001; asc     ;; *** WE ROLL BACK TRANSACTION (1) I admit that I was quite overwhelmed seeing the whole bunch of information. But then, if you squint a little it all starts to make sense. Within the section you can understand what are the transactions which had caused deadlocks, the type of lock that was held and was waited for. Things you can infer from this chunk of information: : From the transaction sections you can figure out the locked index of the table more importantly, transactional query for and Transactions involved [_RECORD LOCKS_](https://dev.mysql.com/doc/refman/5.5/en/innodb-locking.html#innodb-record-locks) SPACE id 0 , WAITING FOR THIS LOCK TO BE GRANTED _HOLDS THE LOCKS(S)_ . : You can see and above_._ It’s necessary that you understand how locking works so that you you know why deadlock happened. Locks modes involved lock mode S lock mode X : A kind of that prevents any other from locking the same row. Exclusive lock (X) lock transaction : A kind of that allows other to read the locked object, and to also acquire other shared locks on it, but not to write to it. Shared lock (S) lock transactions Voila! Now you know what transactions are causing the trouble. Avoiding Deadlocks: A web application is a fairly complex system of hardware, software and networking. There can be multiple users requesting the web app simultaneously. And your app must be coded in a way such that it can handle concurrent data access. If this is not done properly it can result in time-outs and deadlocks. Also, App server can have multiple processes such that your host can run Ruby code for multiple requests concurrently. Therefore the two main tools for you to handle concurrency is transactions and locks. Keep in mind the following points to avoid deadlocks Transactions must be short — lock fewer rows for the smallest amount of time as much as possible. 2 . Care about ActiveRecord callbacks that you use. Use for a long running code. For example: after_commit class SailBoathas_many :passengersafter_create :get_passenger_listdef get_passenger_list# associating all passengersendend Now the callback opens up a transaction block for a large period of time and does associations. This is bad as this locks up rows and invites deadlocks. 3. Make sure the common workflows always acquires lock in the same order. 4. Use queues to prevent concurrent data access. 5. Check whether your Application use-case requires what mode of . By default, INNODB uses . Isolation level REPEATABLE READ Solving the issue Transactions holding the lock was from an external service that was being hit to our application. Also thanks to Unicorn, these requests happen concurrently and increases the timeout/deadlock probability. Why? Because these were heavy transaction borne requests and sometimes it goes well beyond the default 50 sec lock wait or will acquire the locks just to create a deadlock. From I was able to figure out the query that and that was from a stored procedure that the API request invoked. The lock acquisition within the order flow and the stored procedure were the reverse. Making them the same order was a lot of change. But introducing a new within the stored procedure such that, rather than joining two indexed table directly, joining it through an indexed temporary table solved the problem from re-occurring. INNODB STATUS HOLDS THE LOCK(S) TEMPORARY TABLE And for the deadlock/timeout API request that’s been failing, I simply implemented a queue with retry block and pushed them to it. Whew, I guess I am done here! It was quite a learning curve and pretty cool understanding the how database hustles around with each queries keeping true to its properties. Also feel free to correct me in case of any mistakes made or share your thoughts in the comments. Have a good day. Code Long and Prosper!

Troubleshooting and avoiding deadlocks — MySQL/Rails

Greetings! Welcome to another Startups of the Week feature! Each week, the HackerNoon team highlights standout Startups from our Startups of the Year database. Every featured startup, has been nominated as the best in their respective technology category or region. Under this week’s spotlight, we present to you: ROW Marketing Agency, Violet, and YellowMay. Want to be nominated for HackerNoon’s Startups of The Year? Learn how here. Meet the Startups of the Week ROW Marketing Agency ROW Marketing Agency redefines digital marketing by blending innovation, strategy, and creativity. With a focus on SEO optimization, social media management, content marketing, digital strategy development, and online reputation management, each solution is designed to elevate brands in a competitive digital landscape. Operating out of Lahore, Pakistan, ROW Marketing Agency has been nominated as a top startup in the region, as well as in the Marketing, Creative Agency, and Social Media Industries. Vote for ROW Marketing Agency here. Violet Violet simplifies investing in nature by connecting institutional capital to regenerative agriculture, conservation, and bioeconomy projects in Brazil. Their goal is to build the infrastructure for Brazil to lead the global transition to a regenerative economy. Violet's new website is now live, showcasing a refined approach to bridging nature and finance. This milestone reflects a deep understanding of stakeholders—from producers and investors to corporations and NGOs—offering financial solutions that work for both nature and markets. Violet has been nominated as the top startup in the following: Sao Paulo, Brazil region, FinTech, Banking, and ClimateTech Industries. Vote for Violet here. YellowMay YellowMay redefines insurance by blending exploration, analysis, and connection to drive innovation. Offering tailored frameworks, market insights, and strategic partnerships, the company helps providers develop cutting-edge insurance products and processes. With a buyer-centric approach and data-driven strategies, YellowMay empowers businesses to navigate global and local markets. YellowMay has been nominated as the top startup in Helsinki, Finland region, and FinTech, Banking, and Risk Management Industries. Vote for YellowMay here. Featured Interview of the Week https://hackernoon.com/startups-of-the-year-2024-yellowmay-innovating-the-insurance-industry?embedable=true Follow YellowMay’s lead by answering some questions about your startup journey, milestones, achievements, and what Startups of The Year nomination means to you and your company! “If the insurance industry does not innovate and find solutions in this risky world, then someone else does so. That´s why we are here to help the industry develop new ways of thinking!” For your free interview, you can choose from our Startup Interview Templates, tailored to specific industries and regions. For example, the Startups of The Year: Education Interview covers the aspects of educational technology or approach that enhances the learning experience for students compared to traditional methods, challenges encountered in integrating technology with education, role of technology in shaping the future of education. Just like YellowMay, create your business page on HackerNoon that comes with perks of having your own Evergreen Tech Company News Page, inclusion in our weekly Tech Companies Ranking, and access to a free Startups of the Year interview. Featured Startups Special Package Discover our Lead Generation package, delivering 1M impressions through the HackerNoon Newsletter! With this package, you’ll get: 4 Total Newsletters Sent: 325,000 per send (85% of subscribers reside in the US)

Open Rate: 13% - 15%
Click-to-Open Rate: 13.61%
Sample: Here


Your Evergreen Tech Company News Page Learn more about this package here or book a meeting with us! That’s all for this week, folks! See you in the next one. The HackerNoon Team About HackerNoon’s Startups of The Year Startups of The Year 2024 is HackerNoon’s flagship community-driven event celebrating startups, technology, and the spirit of innovation. Currently in its third iteration, the prestigious Internet award recognizes and celebrates tech startups of all shapes and sizes. This year, over 150,000 entities across 4200+ cities, 6 continents, and 100+ industries will participate in a bid to be crowned the best startup of the year! Millions of votes have been cast over the past few years, and many storieshave been written about these daring and rising startups. The winners will get a free interview on HackerNoon and an Evergreen Tech Company News page. Visit our FAQpage to learn more. Download our design assets here. Check out the Startups of the Year Merch Shop here. HackerNoon’s Startups of The Year is a branding opportunity unlike any other. Whether your goal is brand awareness or lead generation, HackerNoon has curated startup-friendly packagesto solve your marketing challenges. Meet our sponsors: Wellfound: Join the #1 global, startup-focused community. At Wellfound, we're not just a job board—we're the place where top startup talent and the world's most exciting companies connect to build the future. Notion: Notion is trusted and loved by thousands of startups as their connected workspace—from building product roadmaps to tracking fundraising. Try Notion with unlimited AI, FREE for up to 6 months, to build and scale your company with one powerful tool. Get your offer now! Hubspot: If you’re looking for a smart CRM platform that meets the needs of small businesses, look no further than HubSpot. Seamlessly connect your data, teams and customers in one easy-to-use scalable platform that grows with your business. Get started for free. Bright Data: Startups that leverage public web data can make faster, data-driven decisions, giving them a competitive edge. With Bright Data’s scalable web data collection, businesses can grow from a small operation to an enterprise by harnessing insights at every stage. Algolia: Algolia NeuralSearch is the world's only AI end-to-end Search and Discovery Platform combining powerful keyword and natural language processing in a single API. Greetings! Welcome to another Startups of the Week feature! Each week, the HackerNoon team highlights standout Startups from our Startups of the Year database. Every featured startup, has been nominated as the best in their respective technology category or region. Startups of the Year Under this week’s spotlight, we present to you: ROW Marketing Agency, Violet, and YellowMay. ROW Marketing Agency , Violet , ROW Marketing Agency Violet YellowMay . YellowMay Want to be nominated for HackerNoon’s Startups of The Year? Learn how here. Want to be nominated for HackerNoon’s Startups of The Year? Learn how here . here here Meet the Startups of the Week ROW Marketing Agency ROW Marketing Agency ROW Marketing Agency redefines digital marketing by blending innovation, strategy, and creativity. With a focus on SEO optimization, social media management, content marketing, digital strategy development, and online reputation management, each solution is designed to elevate brands in a competitive digital landscape. Operating out of Lahore, Pakistan, ROW Marketing Agency has been nominated as a top startup in the region, as well as in the Marketing , Creative Agency, and Social Media Industries. Lahore, Pakistan , Lahore, Pakistan Marketing Marketing Creative Agency , Creative Agency Social Media Social Media Vote for ROW Marketing Agency here. Vote for ROW Marketing Agency here. here . here Violet Violet Violet simplifies investing in nature by connecting institutional capital to regenerative agriculture, conservation, and bioeconomy projects in Brazil. Their goal is to build the infrastructure for Brazil to lead the global transition to a regenerative economy. Violet's new website is now live, showcasing a refined approach to bridging nature and finance. This milestone reflects a deep understanding of stakeholders—from producers and investors to corporations and NGOs—offering financial solutions that work for both nature and markets. website Violet has been nominated as the top startup in the following: Sao Paulo, Brazil region , FinTech, Banking, and ClimateTech Industries . Sao Paulo, Brazil region Sao Paulo, Brazil FinTech , Banking , FinTech Banking ClimateTech Industries ClimateTech Vote for Violet here. Vote for Violet here. here . here YellowMay YellowMay YellowMay redefines insurance by blending exploration, analysis, and connection to drive innovation. Offering tailored frameworks, market insights, and strategic partnerships, the company helps providers develop cutting-edge insurance products and processes. With a buyer-centric approach and data-driven strategies, YellowMay empowers businesses to navigate global and local markets. YellowMay has been nominated as the top startup in Helsinki, Finland region, and FinTech , Banking , and Risk Management Industries. Helsinki, Finland Helsinki, Finland FinTech FinTech Banking Banking Risk Management Risk Management Vote for YellowMay here. Vote for YellowMay here . here here Featured Interview of the Week https://hackernoon.com/startups-of-the-year-2024-yellowmay-innovating-the-insurance-industry?embedable=true https://hackernoon.com/startups-of-the-year-2024-yellowmay-innovating-the-insurance-industry?embedable=true Follow YellowMay ’s lead by answering some questions about your startup journey, milestones, achievements, and what Startups of The Year nomination means to you and your company! YellowMay “If the insurance industry does not innovate and find solutions in this risky world, then someone else does so. That´s why we are here to help the industry develop new ways of thinking!” “If the insurance industry does not innovate and find solutions in this risky world, then someone else does so. That´s why we are here to help the industry develop new ways of thinking!” For your free interview, you can choose from our Startup Interview Templates , tailored to specific industries and regions. For example, the Startups of The Year: Education Interview covers the aspects of educational technology or approach that enhances the learning experience for students compared to traditional methods, challenges encountered in integrating technology with education, role of technology in shaping the future of education. Startup Interview Templates Startups of The Year: Education Interview Just like YellowMay, create your business page on HackerNoon that comes with perks of having your own Evergreen Tech Company News Page , inclusion in our weekly Tech Companies Ranking , and access to a free Startups of the Year interview . create your business page create your business page Evergreen Tech Company News Page Evergreen Tech Company News Page weekly Tech Companies Ranking Tech Companies Ranking free Startups of the Year interview free Startups of the Year interview Featured Startups Special Package Discover our Lead Generation package, delivering 1M impressions through the HackerNoon Newsletter! Lead Generation With this package, you’ll get: With this package, you’ll get: 4 Total Newsletters Sent: 325,000 per send (85% of subscribers reside in the US)

Open Rate: 13% - 15%
Click-to-Open Rate: 13.61%
Sample: Here Your Evergreen Tech Company News Page 4 Total Newsletters Sent: 325,000 per send (85% of subscribers reside in the US) Open Rate: 13% - 15%
Click-to-Open Rate: 13.61%
Sample: Here Open Rate: 13% - 15% Click-to-Open Rate: 13.61% Sample: Here Open Rate: 13% - 15% Click-to-Open Rate: 13.61% Sample: Here Here Your Evergreen Tech Company News Page Evergreen Tech Company News Page Learn more about this package here or book a meeting with us! Learn more about this package here or book a meeting with us ! here here book a meeting with us book a meeting with us That’s all for this week, folks! See you in the next one. The HackerNoon Team About HackerNoon’s Startups of The Year Startups of The Year 2024 is HackerNoon’s flagship community-driven event celebrating startups, technology, and the spirit of innovation. Currently in its third iteration, the prestigious Internet award recognizes and celebrates tech startups of all shapes and sizes. This year, over 150,000 entities across 4200+ cities, 6 continents, and 100+ industries will participate in a bid to be crowned the best startup of the year! Millions of votes have been cast over the past few years, and many stories have been written about these daring and rising startups. Startups of The Year 2024 many stories The winners will get a free interview on HackerNoon and an Evergreen Tech Company News page. free interview Evergreen Tech Company News Visit our FAQ page to learn more. FAQ Download our design assets here . here Check out the Startups of the Year Merch Shop here . here HackerNoon’s Startups of The Year is a branding opportunity unlike any other. Whether your goal is brand awareness or lead generation, HackerNoon has curated startup-friendly packages to solve your marketing challenges. startup-friendly packages Meet our sponsors: Meet our sponsors: Wellfound: Join the #1 global, startup-focused community . At Wellfound, we're not just a job board—we're the place where top startup talent and the world's most exciting companies connect to build the future. Wellfound: Join the #1 global, startup-focused community Notion: Notion is trusted and loved by thousands of startups as their connected workspace—from building product roadmaps to tracking fundraising. Try Notion with unlimited AI, FREE for up to 6 months , to build and scale your company with one powerful tool. Get your offer now ! Notion: Try Notion with unlimited AI, FREE for up to 6 months Get your offer now ! Hubspot: If you’re looking for a smart CRM platform that meets the needs of small businesses, look no further than HubSpot. Seamlessly connect your data, teams and customers in one easy-to-use scalable platform that grows with your business. Get started for free . Hubspot: Get started for free Bright Data: Startups that leverage public web data can make faster, data-driven decisions, giving them a competitive edge. With Bright Data’s scalable web data collection , businesses can grow from a small operation to an enterprise by harnessing insights at every stage. Bright Data: Bright Data’s scalable web data collection Algolia: Algolia NeuralSearch is the world's only AI end-to-end Search and Discovery Platform combining powerful keyword and natural language processing in a single API. Algolia: AI end-to-end Search and Discovery Platform

ROW Marketing Agency, Violet, & YellowMay: HackerNoon Startups of the Week

Маркетынгавае агенцтва ROW, Violet і YellowMay: стартапы тыдня HackerNoon

Agencia de Marketing ROW, Violet y YellowMay: Startups de la Semana de HackerNoon

ROW Marketing Agency, Violet, & YellowMay: HackerNoon asteko Startups

ROW मार्केटिंग एजेंसी, वायलेट, और येलोमे: हैकरनून स्टार्टअप्स ऑफ़ द वीक

Marketinška agencija ROW, Violet i YellowMay: HackerNoon startupi tjedna

ROW Marketing Agency, Violet ו-YellowMay: סטארט-אפ השבוע של HackerNoon

ROW マーケティング エージェンシー、Violet、YellowMay: HackerNoon の今週のスタートアップ

ROW Marketing Agency, Violet en YellowMay: HackerNoon Startups van de week

ROW Agency Agency Agency, Violet, & UmuhondoMay: HackerNtangiriro ryicyumweru

ROW Marketing Agentligi, Violet we YellowMay: HakerNoon hepdäniň başlangyçlary

ROW Marketing Agency, Violet, at YellowMay: HackerNoon Startups of the Week

I-ROW Marketing Agency, Violet, & YellowMay: I-HackerNoon Startups yeviki

ROAD TOWN, British Virgin Islands, October 30th, 2024, Chainwire/-- Blast Royale has announced the upcoming pre-sale of its Low FDV Community Offering (LCO) for the $NOOB token, scheduled for November 6th. As a community-focused initiative, this offering aims to integrate players and supporters, marking a significant move in the Gaming x Meme token space. With record engagement, including over 85,000 Daily Active Users (DAU), more than 20 million social media impressions and 3 million $NOOB tokens spent on in-game assets in the last 28 days alone, Blast Royale is setting new benchmarks for community engagement. Backed by $6 million in funding from notable investors including Animoca Brands, Mechanism Capital, and Dragonfly, $NOOB will serve as the studio token for First Light Games. Supporting both Blast Royale and future games development, $NOOB reinforces the studio's commitment to community-driven projects in crypto gaming. Details of the LCO The $NOOB LCO will feature a Fully Diluted Valuation (FDV) of $10 million, structured as a pre-sale with accessibility as its central focus. Inspired by meme coin culture, 25% of the $NOOB token supply is dedicated to this offering, enabling players and early supporters to contribute to the future of Blast Royale. This initiative underscores Blast Royale's goal to establish a new standard for community-driven offerings in the gaming sector. Empowering the Community The LCO offers the freedom of choice with a capped ticket starting from as little as 1$, allowing early adopters and community members to join the $NOOB ecosystem at a significant milestone. Blast Royale NFT holders will have access to higher allocation in the offering, ensuring that the most engaged community members are positioned at the center of $NOOB’s growth strategy. As a point of comparison, leading crypto games such as Illuvium reached FDVs of up to $18 billion with their tokens during previous market peaks, highlighting the potential for early participants in $NOOB as Blast Royale's footprint within mobile gaming grows. How to Participate in the LCO To participate, individuals must complete the KYC process via the PAID Network at link.paidnetwork.com/Blast_Royale before November 5th. Following the LCO launch on November 6th, $NOOB will be officially listed on November 13th. Key Details for the $NOOB LCO Community Round Start Date: November 6th, 2023
FDV: $10 Million
Corpos Holders Ticket: from 1$ to 1000$ (per NFT)
Plague Doctor Holders Ticket: from 1$ to 700$ (per NFT)
Public Ticket: from 1$ to 500$
Vesting Schedule: 7.5% unlocked at TGE (Token Generation Event), with full unlock over 9 months
Official Listing Date: November 13th, 2023 About Blast Royale Blast Royale is a community-driven mobile game that integrates blockchain technology and the cultural appeal of meme tokens to create a unique user experience. With significant backing from industry-leading investors, Blast Royale is focused on delivering engaging gaming content while providing users with active roles in the growth and development of its tokenomics and in-game ecosystem. The $NOOB token, designed to connect gaming and meme coin culture, represents the platform’s commitment to both community engagement and the evolution of gaming within the blockchain space. Official X profile: https://x.com/blastroyale More about Blast Royale: https://hub.xyz/blast-royale Contact Mr Persis Sarmiento Fun Dimensions persis@yourcontract.org This story was distributed as a release by Chainwire under HackerNoon’s Business Blogging Program. Learn more about the program here ROAD TOWN, British Virgin Islands, October 30th, 2024, Chainwire/-- Blast Royale has announced the upcoming pre-sale of its Low FDV Community Offering (LCO) for the $NOOB token, scheduled for November 6th. As a community-focused initiative, this offering aims to integrate players and supporters, marking a significant move in the Gaming x Meme token space. With record engagement, including over 85,000 Daily Active Users (DAU), more than 20 million social media impressions and 3 million $NOOB tokens spent on in-game assets in the last 28 days alone, Blast Royale is setting new benchmarks for community engagement. ROAD TOWN, British Virgin Islands, October 30th, 2024, Chainwire/-- Blast Royale Backed by $6 million in funding from notable investors including Animoca Brands, Mechanism Capital, and Dragonfly, $NOOB will serve as the studio token for First Light Games. Supporting both Blast Royale and future games development, $NOOB reinforces the studio's commitment to community-driven projects in crypto gaming. Details of the LCO The $NOOB LCO will feature a Fully Diluted Valuation (FDV) of $10 million, structured as a pre-sale with accessibility as its central focus. Inspired by meme coin culture, 25% of the $NOOB token supply is dedicated to this offering, enabling players and early supporters to contribute to the future of Blast Royale. This initiative underscores Blast Royale's goal to establish a new standard for community-driven offerings in the gaming sector. Empowering the Community The LCO offers the freedom of choice with a capped ticket starting from as little as 1$, allowing early adopters and community members to join the $NOOB ecosystem at a significant milestone. Blast Royale NFT holders will have access to higher allocation in the offering, ensuring that the most engaged community members are positioned at the center of $NOOB’s growth strategy. As a point of comparison, leading crypto games such as Illuvium reached FDVs of up to $18 billion with their tokens during previous market peaks, highlighting the potential for early participants in $NOOB as Blast Royale's footprint within mobile gaming grows. How to Participate in the LCO To participate, individuals must complete the KYC process via the PAID Network at link.paidnetwork.com/Blast_Royale before November 5th. Following the LCO launch on November 6th, $NOOB will be officially listed on November 13th. link.paidnetwork.com/Blast_Royale link.paidnetwork.com/Blast_Royale Key Details for the $NOOB LCO Community Round Start Date: November 6th, 2023 FDV: $10 Million Corpos Holders Ticket: from 1$ to 1000$ (per NFT) Plague Doctor Holders Ticket: from 1$ to 700$ (per NFT) Public Ticket: from 1$ to 500$ Vesting Schedule: 7.5% unlocked at TGE (Token Generation Event), with full unlock over 9 months Official Listing Date: November 13th, 2023 Community Round Start Date: November 6th, 2023 FDV: $10 Million Corpos Holders Ticket: from 1$ to 1000$ (per NFT) Corpos Holders Corpos Holders Plague Doctor Holders Ticket: from 1$ to 700$ (per NFT) Plague Doctor Holders Plague Doctor Holders Public Ticket: from 1$ to 500$ Vesting Schedule: 7.5% unlocked at TGE (Token Generation Event), with full unlock over 9 months Official Listing Date: November 13th, 2023 About Blast Royale Blast Royale is a community-driven mobile game that integrates blockchain technology and the cultural appeal of meme tokens to create a unique user experience. With significant backing from industry-leading investors, Blast Royale is focused on delivering engaging gaming content while providing users with active roles in the growth and development of its tokenomics and in-game ecosystem. The $NOOB token, designed to connect gaming and meme coin culture, represents the platform’s commitment to both community engagement and the evolution of gaming within the blockchain space. Blast Royale Blast Royale Official X profile: https://x.com/blastroyale https://x.com/blastroyale https://x.com/blastroyale More about Blast Royale: https://hub.xyz/blast-royale https://hub.xyz/blast-royale https://hub.xyz/blast-royale Contact Mr Persis Sarmiento Fun Dimensions persis@yourcontract.org This story was distributed as a release by Chainwire under HackerNoon’s Business Blogging Program. Learn more about the program here This story was distributed as a release by Chainwire under HackerNoon’s Business Blogging Program. Learn more about the program here here here

Blast Royale to Launch $NOOB Low FDV Community Offering (LCO) For First Gaming x Meme Token

Blast Royale, İlk Oyun x Meme Tokeni üçün $NOOB Aşağı FDV İcma Təklifini (LCO) təqdim edəcək

Blast Royale lanzará una oferta comunitaria de $NOOB con bajo FDV (LCO) para el primer token de juegos x memes

Blast Royale پیشنهاد انجمن $NOOB Low FDV (LCO) را برای اولین بازی x Meme Token راه اندازی می کند

Blast Royale lance une offre communautaire à faible FDV (LCO) $NOOB pour le premier jeton Gaming x Meme

Blast Royale ישיק $NOOB Low FDV Community Offering (LCO) עבור משחק ראשון x Meme Token

Blast Royale、初のゲーム x ミームトークンとして $NOOB 低 FDV コミュニティ オファリング (LCO) を開始

Blast Royale, First Gaming x Meme 토큰을 위한 $NOOB Low FDV 커뮤니티 오퍼링(LCO) 출시

Blast Royale eko lancer $NOOB Low FDV Communautaire Offrande (LCO) Pona Jeux Ya Liboso x Meme Token

Blast Royale පළමු ක්‍රීඩා x Meme Token සඳහා $NOOB අඩු FDV ප්‍රජා පිරිනැමීම (LCO) දියත් කිරීමට නියමිතය

Blast Royale spustí komunitnú ponuku $NOOB Low FDV (LCO) pre prvý herný x meme token

Blast Royale ra mắt $NOOB Low FDV Community Offering (LCO) cho First Gaming x Meme Token

I-Blast Royale Izokwethula Umnikelo Womphakathi ongu-$NOOB Ophansi we-FDV (LCO) Wokudlala Kokuqala Kwegeyimu x Ithokheni ye-Meme

Stories, News & Mentions about ROWY

Trending Topics

Classic

Neon Noir

Minty

Newspaper

HN StartUps