DEV Community: superoverflow

Using Binance APIs

superoverflow — Mon, 12 Jun 2023 20:10:55 +0000

Background

As someone who worked with data for entire of my career, I always love to learn how to build a useful live data dashboard. One of the problems for build a live data dashboard comes with live data. Most live data are behind a hefty price wall and not really accessible to most people. However, Binance has a wonderful public Websocket API and it is really useful for anyone to learn!

In this blog, I am going to share my experience in learning websocket. This is the link to the final product.

Websocket API

The websocket API we are going to use is the miniticker, which we can receive the latest closing price. According to the document, this is the payload

  {
    "e": "24hrMiniTicker",  // Event type
    "E": 123456789,         // Event time
    "s": "BNBBTC",          // Symbol
    "c": "0.0025",          // Close price
    "o": "0.0010",          // Open price
    "h": "0.0025",          // High price
    "l": "0.0010",          // Low price
    "v": "10000",           // Total traded base asset volume
    "q": "18"               // Total traded quote asset volume
  }

In order to receive the miniTicker socket stream, we would need to subscribe to it. What it means is that, we need to send below json to websocket url, say if we want to subscribe to BTCUSDT and ETHUSDT

{
    "method": "SUBSCRIBE",
    "params":
    [
        "btcusdt@miniTicker",
        "ethusdt@miniTicker"
    ],
    "id": 1
}

Finally, the market data websocket url is wss://data-stream.binance.vision. Now, we are good to go 😎

Trying the websocket API

Most morden web browser support websocket, so we just need to open the developer console to try

const ws = new WebSocket('wss://data-stream.binance.vision/ws');
ws.onmessage = function (e) { console.log(e.data) };
ws.send('{"method":"SUBSCRIBE","params":["btcusdt@miniTicker"],"id":0}');

we should see log messages like below

{"e":"24hrMiniTicker","E":1686600526157,"s":"BTCUSDT","c":"25813.21000000","o":"26116.47000000","h":"26206.88000000","l":"25602.11000000","v":"32722.94617000","q":"846855564.49409930"}
...
{"e":"24hrMiniTicker","E":1686600527217,"s":"BTCUSDT","c":"25813.20000000","o":"26114.91000000","h":"26206.88000000","l":"25602.11000000","v":"32711.86119000","q":"846566058.39423260"}

WIP
https://codesandbox.io/s/binance-websocket-l2dglq?file=/src/ContextProvider.tsx

Something for interviews

superoverflow — Mon, 01 May 2023 17:46:18 +0000

There are some important phrases thats good to have a refresher just before you head to an interview room to show that you are not just a code monkey 🐵.

SOLID is 5 principles to follow when you ask where you should put your code:

Single responsibility
Open-closed principle
Liskov subsitution principle
Interface Segregation
Dependency Injection

ACID is database characteristic for ensuring transactions correctness

Atomicity
Consistency
Isolation
Durability

Database isolation has 4 levels. Make sure you know what is dirty read, non-repeatable read and phantom read

Read Uncommitted
Read committed
Repeatable Read
Serialisable

Make a slide open envelope

superoverflow — Fri, 23 Dec 2022 18:25:26 +0000

Intro

Everyone loves receiving a letter from a friend. But with technology advances, does anyone miss receiving one?

I thought of making a wedding invitation recently. And I wanted to make the receipients felt like opening a letter!

To do that, I have learnt:

How to create an envelope just by css
How to animate the envelope openning with framer motion

The end result for me looks like this and I am pretty happy with it :)

Making an envelope with css

Before making an animated envelopes, it is important we can make a static one and understand how it works. Here is an example,

Point to note:

The envelope is essentially a zero width/height div with transparent top border
To make the lip half open, we will just need to use transform: rotateX(45deg)

Making css animation with framer motion

Framer motion is an easy way to animate the evelope lid open
see below example

Repo and Demo

With above serving the basics and some hard work, you will be able to make a scroll controlled envelope. Enjoy!

Repo
Demo
GSheet capturing response

Learning Rust Offline

superoverflow — Sat, 20 Nov 2021 12:55:24 +0000

I would be on a 13 hour flight and I look for some good offline resources to learn rust:

The Rust Programming Language

This is THE first book to rust. If you already have rustup installed on your laptop, you can read the book from your browser offline pretty easily

rustup doc --book

Rust by example

While the first book gives you lots of background and theory, this book gives you some more examples for some common tasks that can get you started. The github page gives you instruction to use mdbook, which allows you to read the book offline.

rust-by-example

Rust Cookbook

I found this book really practical. It has some example, say to connect to a database, manipulating datetime, which are very common things you need to deal with at work. Again, blessed by mdbook, you can read it offline too!

rust cookbook

Async Rust

Another common task you will come across a lot at work is parallelism. The textbook way to handle it is threading. but for small/simple task (eg downloading files from web), async may be a better choice since it consume less resources. This book gives a good walk through of this feature in rust. Of course, it can be read offline with mdbook !

Rust Async

So thats it! If you are also preparing for your flight ✈️, I wish you a safe journey!

building a cryto pnl dashboard lightweight-chart (part 1)

superoverflow — Sun, 11 Jul 2021 22:22:13 +0000

I used Binance to trade some crypto. While they offer a competitive fees and wide range of products, I found understand it P&L a bit difficult. Usually I use TradingView to visualize my positions, therefore I am thinking if it is possible to build an app to show my crypto P&L 🤑 and that begin my journey

I haven't decided everything yet, but I want to use NextJs for building this project. The project scaffoldings is nice and the deployment pipeline is surprising wonderful! For chart library, I want to try the one offered by TradingView - lightweight-chart.

The example of lightweight-chart is not a common React style I learnt. After a bit of studying, we can achieve the same with useRef

import { createChart } from "lightweight-charts";
import { useEffect, useRef } from "react";

const data = [
  { time: "2019-04-11", value: 80.01 },
  { time: "2019-04-12", value: 96.63 },
  //... skipped ...
  { time: "2019-04-20", value: 74.43 }
];

const Chart = () => {
  const chartRef = useRef(null);
  useEffect(() => {
    const chart = createChart(chartRef.current, { width: 200, height: 200 });
    const lineSeries = chart.addLineSeries();
    lineSeries.setData(data);
  }, []);

  return <div ref={chartRef} />;
};

export default Chart;

My understanding is that:
1) first a div is created in the React Page, the chartRef is bind.
2) the useEffect hook kicks in after the page is loaded
3) the createChart can render into the div that was bind

The full example will be liked this:

which is still having one error to resolve:

SyntaxError: Cannot use import statement outside a module

This error basically means that the lightweight-chart is a frontend library but we are using it in a SSR (server side rendering) context, which is how NextJs work. Fortunately, it is pretty easy to resolve it. You will just need to dynamics import it

const Chart = dynamics(() => import("../components/charts", {
  ssr: false
});

There are some Babel plugin config difference with codesandbox, but the code works on my VSCode. The working version of code can be found here and demo can be found here

Visualising data

superoverflow — Sat, 29 May 2021 20:49:25 +0000

As a backend engineer, I always wanted to build graphs to show some data interactively. I look up a few libraries but they are not quite easy to use as a relatively new React dev. So I ask my si-fu @_denb again, he recommended me to look at visx/xychar. And yea, it was surprising neat!

Step 1: display a simple line chart
https://codesandbox.io/s/visx-xychart-00-qp99f

The main thing to display the data is just this piece of code. Simple enough!

      <XYChart height={300} 
        xScale={{ type: 'band' }} 
        yScale={{ type: 'linear' }}>
          <Axis orientation="bottom" />
          <Axis orientation="left" />
          <LineSeries data={data} dataKey="line" {...accessors} />
      </XYChart>

Step Final: custom y axis, adding glyph and toolstips, etc

In the final code, I tried to represent a team match position. Since position 1 means the team is a top, I will need to reverse the y-axis. And to make it the graph interactive, I added some icons on the data points and tools tip

visx has other lower level libraries, but I found xychart is really battery included and simple to use :D

Making a Dropdown

superoverflow — Sun, 21 Feb 2021 00:29:04 +0000

I was trying to make a dropdown button with React. It turns out to be more tricky than I first thought 🤯.

After discussing with my React Si-Fu @_denb , I finally managed to make a prototype. Below are the libraries I need to use.

downshift: a base library for making a dropdown.
react-useportal: a library to move the dropdown items to the end of body
react-popper: a library to fix the position of the dropdown items

Step 1: make a dropdown menu

It is already a dropdown-ish component. However, you will notice when the dropdown list opens, it pushes the content below it down. This is not ideal.

Step 2: adding in Portal

now, if the dropdown list open, it is appended at the end. This is still not what we want

Step 3: adding in Popper

finally, the dropdown list open, it is rendered below the dropdown button on top of the text. This is what we want. However, the dropdown items still doesn't align with the dropdown button (It will if you resize the window). I think this is because the component reference is set up before rendering and thus confused Popper for the sizing

Step 4: fixing alignment issue after resizing window

Now, I tried to use useState instead of useRef. It seems to solve the initial alignment issue

What's next?

I hope to add a transition components wrapper next to make it look even better✌🏻