DEV Community: Thanh Minh

Boost NextJS TTI & FID performance without compromise and pain

Thanh Minh — Wed, 08 Jun 2022 07:22:52 +0000

Why should you read this blog?

As the title said: “Boost NextJS TTI & FID performance without compromise and pain”
Islands Architectures for Nextjs

Result

Before

https://next-lazy-hydrate-origin.vercel.app/

Live check PageSpeed

After

https://next-lazy-hydrate-optimized.vercel.app/

Live check PageSpeed

Hydrating is PURE OVERHEAD

Hydration is Pure Overhead

As described in the post above, Hydration progress is PURE OVERHEAD since you need to load the code and render the component twice.

Imagine you have a very long landing page built by Nextjs and most of it is a static component, then when you hit the Enter in the URL:

HTML contains all your landing page content sent to the browser (Which is the result of SSR)
JavaScript is downloaded to the browser, get parsed, and executed (Most of it contains text content only which is nearly the same as your HTML)
Which Javascript downloaded, now it attaches events to the DOM. Now your website is fully usable

The second moves make most of SSR page has TTI (Time To Interactive) and FID (First Input Delay) so high

Progressive Hydration

Let’s take a step to optimize our long-landing-page. Because on our landing page, most of the component is static (Only text and image, nothing much called “interactive”) so it’s a waste of time to hydrate those components. What if we disable hydrate for some components or only hydrate components when it’s in the Viewport

This can easily archive using react-hydration-on-demand

import withHydrationOnDemand from "react-hydration-on-demand";
import Card from "../Card";

// Hydrate when the component enters the viewport
const CardWithHydrationOnDemand = withHydrationOnDemand({ on: ["visible"] })(
    Card
);

export default class App extends React.Component {
    render() {
        return (
            <CardWithHydrationOnDemand
                title="my card"
                wrapperProps={{
                    className: "customClassName",
                    style: { display: "contents" },
                }}
            />
        );
    }
}

Now you can optimize the 3rd bullet - Reduce the time JavaScript executed to hydrate our landing page. Good job!

Lazy load component code and hydrate when needed

We can save some executed time using react-hydration-on-demand but we still have lots of redundancy code here.

JavaScript of those components is still downloaded and parsed, it just doesn’t get executed.
Do we have any way to fully render the HTML of the website but only load the component’s JS only when needed?

There is an answer for that: https://www.patterns.dev/posts/islands-architecture/

The idea is quite simple:

Fully render HTML in SSR
Load a really minimum of JavaScript to listen to the events
If an event is fired, load the JS related to it and executed

This solution comes with a huge performance boost by scarifying a little time between every user’s interactive. But I do think it worse doing so 🌟

Disable Javascript reduces the TTI more than 7 times. What if we can remove half of it?

This is nice! The solution is simple but quite hard to do. Why?

Because Reactjs only supports hydrating a full application (It will be solved when v18 is fully implemented). The react-hydration-on-demand actually do some trick to skip the hydrating process
In Nextjs, if the component is defined as dynamic and it renders in SSR, its JS also gets sent to the browser right away so nothing called lazy here

Why Progressive Hydration is Harder than You Think

So I make a package that can

Skip the component hydrating process. Heavily based on react-hydration-on-demand
Remove the JS from the bundle and make you control when the JS is loaded

How can I do this trick? Check it out

Here is the result

How to use it

Install

npm install next-lazy-hydrate
yarn add next-lazy-hydrate

Usage

import lazyHydrate from 'next-lazy-hydrate';

// Static component
const WhyUs = lazyHydrate(() => import('../components/whyus'));

// Lazy hydrate when users hover the component
const Footer = lazyHydrate(
  () => import('../components/footer', { on: ['hover'] })
);

const HomePage = () => {
  return (
    <div>
      <AboveTheFoldComponent />
      {/* ----The Fold---- */}
      <WhyUs />
      <Footer />
    </div>
  );
};

Document

https://github.com/thanhlmm/next-lazy-hydrate

The API is quite simple, I’d love to see how this package can help you Boost NextJS TTI & FID performance without compromise and pain

Original post: https://thanhle.blog/en/blog/boost-nextjs-tti-fid-performance-without-compromise-and-pain

Frontend performance pattern

Thanh Minh — Fri, 18 Feb 2022 03:57:41 +0000

Original post: https://thanhle.blog/blog/frontend-performance-pattern-en

Why should you read this?

Common patterns use to optimize frontend performance
Boost your web app speed
Convince your boss and colleague

When should I care about performance?

First of all, let’s make an agreement that whenever we design a system, structure for an app, it means that we’re making trade-offs. We cut some parts to gain others in order to make the system fit with the problem. What if we want all? It’s impossible, because resources when kick off the project is always limited, however, the problem on the opposite can grow endlessly.

Centralize vs Decentralize
Monolithic vs Microservice
SSR vs CSR
OOP vs FP
SQL vs No-SQL
Language X vs Language Y
API vs GraphQL
Stream vs Batch

Then when should I care about performance? And which is the trade-off?

For me, a frontend app has to maintain 3 aspects

Functional - Your app must run with correct logic
Maintainable/Readable - If it run right, then it should be easy to maintain and add a new feature
Performance - it should be fast, delight the user journey

Functional is easy to understand, it is the only aspect that we can not make a trade-off. Then now, our application becomes a slider between clean code vs performance, it’s depended on each project and the problem to trade-off

🐣 You are a guy in the project, so you have the right to know which is more important? Do you want to launch many features at a fast pace or do you want the feature is running lighting fast?

I was really obsessing with performance and had a chance to see that many juniors got the same obsession as me. Once upon a time, I spend a day paralleling a script that validates the CSV file. The optimization looks good, reduce the time from 15 minutes to 4 minutes. Sadly, the script run only 1 time a week and in turn, it can only save about 40 minutes a month on a free server

Performance pattern

Here are some common patterns used to optimize performance. And because it is quite popular so it’s quite easy to apply for your project which our sacrifice much on Maintainenable/Readable

Split code/Lazyload

Difficulty: Easy

When to apply: As soon as the project start, we can start with a simple one like split code by pages/routes. After that, if you want to take this further, you can split the code by user interaction.

Spell: Only load what users need

How: It depends on your framework, so search Google with this formula: Framework + code splitting

Example on React

Code-Splitting - React

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Prevent installing the duplicated lib

Difficulty: Quite Easy

When to apply: When you start thinking about installing a new library. Then we have 3 options:

If you use existing lib, pray it to fit with your problem
If you use new lib, change the legacy code, and pray it to fit with the legacy problem, testing for regression bugs
Use both libs ⇒ ONLY this is your last hope... like your PM is hanging a knife on your neck

In my current project, we have 3 libraries to handle date-time: momment, date-fns và dayjs . Which moment and date-fns is big bundle size.

You might not need date-fns

Spell: Check packages.json before searching/installing new libraries

Choose the library that supported ES6 and tree shaking

Difficulty: Easy, but depends on community

When to apply: All the time. Bundle size and tree shaking support should be important points to consider.

Spell: The newer library the more chance it is better (But it does not guarantee that it is stable and correctly)

How: Check library on https://bundlephobia.com/

redux bundle size is 1.6kB when Gzip and supported tree-shaking

Minimizing bundle size - MUI

Debounce user input

Difficulty: Quite easy

When to apply: When we’re hooking user typing, scrolling event which some tasks

Spell: Search input ⇒ Debounce

Debounce Your Input Handlers | Web Fundamentals | Google Developers

In more advantage cases, we can use debounce for API response. A common case is to debounce the response for trading/order book on weak computers

Add `loading=lazy` for tag `img`, `iframe`

Difficulty: Easy

When to apply: Most of the time you see img tag, unless you are sure that the img is above the fold

Spell: Image + loading=lazy ⇒ ✈️

<img src="https://www.notion.so/image/https:%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Feed374b2-19d1-444a-b21a-ee686940bb30%2FScreen_Shot_2022-01-21_at_12.45.19_PM.png?table=block&id=a6b45670-a7e6-40bc-ba3d-db40424d6a91&cache=v2" loading="lazy" alt="Nimbus" />

Memorized function

Difficulty: Normal

When to apply: When your function drain lots of CPU and RAM

Spell: Cache the expensive task

How to use Memoize to cache JavaScript function results and speed up your code

In addition, you can use Web Worker to push those computations into background processes

const cachedResult = useMemo(() => {
    // CPU intensive task here
}, [dependencies]);

Cache frontend assets using Service Worker

Difficulty: Normal, hard. It’s quite hard when starting but the result is worst it

When to apply: When you are working in a really big app, bundle size is huge likes complex Admin/CRM

Spell: Complex, big web app ⇒ Service Worker

Example in React

React PWA with Workbox

Trust me, after you have done this, users will only ever see the loading indicator for the beginning. After that, you can update the app in the background. I will go into detail about how I do it in another post.

Virtual list

Difficulty: Hard

When to apply: When you have a list containing lots of items. Users have to scroll a while to view all items

Spell: You have a table more than 100 items, you are building something like feed on Facebook, Twitter ⇒ Virtual list

React Virtual

I highly recommend this one. Supper power and lightweight. Forget outdated react-window, react-virutalize

When working with Virtual list, developers should know about the concept how it works, and also when the component is rerendered to take full power from it. If not, you’re shooting on your foot.

Break long-run functions into multiple short-run functions

Difficulty: Hard

When to apply: When you run the function, and your laptop hangs 🙃

Spell: Like Above

How: You break your long-run, CPU-bound function into multiple short-run functions with setTimeOut ,requestAnimationFrame. However, when breaking long-run functions into many small ones is not an easy task, sometimes your need to keep those functions running sequentially to make sure the function is always correct

Optimistic update

Difficulty: Easy, normal, hard

Easy when you apply for simple entity

Normal when those entities start conflicting with local and server and you need to solve the conflict

Hard when the logic is quite complex and you have also to deal with solving the conflict on local state and server state

For eg: The like button is easy, the comment is normal, and posting a status is a really hard case

When to apply: When the feature is quite simple. The success rate of the API is about 99.99%

Spell: Simple logic, 99.99% success ⇒ Optimistic update

Cheat Code for a Lightning Fast Front End: Building an Optimistic UI

Lazy polyfill/Dynamic polyfill

Difficulty: Normal, hard

When to apply: When you’re too tired, don’t have any other option to optimize

Spell: When you see that the polyfill bundle size is quite huge but users are all high-tech

How: Leading right now is Polyfill.io. However, it is quite hard because you need to know how to set up in both frontend and backend

Which is the pattern that you use to optimize performance? let me know, I’m excited to explore more

Write lean state-management

Thanh Minh — Tue, 14 Dec 2021 10:37:24 +0000

Original post: https://thanhle.blog/blog/write-lean-state-management

Why should you read this article?

Improve your level of state management
Code state in a leaner way
There is another way to approach the problem on the frontend

I had a chance to meet a few friends when they first started working as a frontend and I found that most of them had the same problem: Writing logic in state management was too complicated, leading to code that was both confusing and difficult to debug.
Usually, after such reviews, I'm the guy who deletes all that code to have a leaner version, so hopefully, through this article, everyone will learn a few skills when writing state-management code.

⚠️ In the context of this post, I will only focus on most of the Frontend frameworks today (React, Vue, Sveltve, Angular,...) Usually, I use React as an example, but most of the others will be similar. because [state management is framework independent](https://thanhle.blog/blog/guide-to-choosing-state-management-library-for-your-next-project)

UI = f(state)

Legendary Formula for Frontend Developer

State - the particular condition that someone or something is in at a specific time.

Cambridge

In a nutshell, the state of your application will be mapped through the respective UI through a mapping function. So, clean state management (now called clean state management) means designing the state in the application in a neat way to:

Mapping via UI is easier ‍💨
Less code means fewer bugs 🐹
Less code means easier to maintain 😌

When does the state change?

To write a clean state, you must first find out what causes the state to change

In an application, there are 2 things that can change your state

Event from user interactive with App
Event from 3rd party (Here I define everything that triggers events into the app that doesn't come from the user as 3rd party, it can be a response from backend, an event from WebSocket, or... power outage, network failure. )

Normally, the flow of writing the state that I often see will follow a structure like this:

Event is triggered (User or 3rd party)
The code that handles that event get called
Save the processed data to state
UI render according to the new state

It is possible to re-example that flow in the case: Filter the list of Done tasks as follows

User triggers filter done task
Get event from user, filter the done task
Save the result into state
Render result into the UI

If people learn about the data maker, it will call this flow: ETL - (Extract - Transform - Load). You Extract data from the event, transform it into the required data, then load it into the state

ETL explained

What's the problem with doing ETL in the front-end?

When there are multiple events combined to produce the same UI output.

Imagine with the original Todo list example, I need to do more Search todo list features. Now our state will be

{
    "source": [], // List todo raw
    "status": "Done" | "Undone",
    "keyword": "",
    "result": []
}

Since most of the software build process will follow Agile, which means creating incremental by each iteration, the case of completing the todo list with the Done/Undone filter and then adding the feature search todo is a common thing ☺️ . Don't blame any guy for not telling you to do it from the beginning.

Now you will see it is quite simple:

When users inputs search keyword
Get the source data, filter by status, then filter again by keyword
Then save it back to the state

Now Todo list will have the following 2 flows

Do you see the problem here? Flow filter by status will be wrong because it only filter by status and drops filter by keyword. You are new to the project, you only know the task to do is add more flow search by keyword, but you do not know that the old flows also change the output when adding a new state this is also understandable! You only care the flow you just did: Search by keyword!

Ok, I saw the bug 🤡 so now it's good to combine it into a function. After that, if you need to add filter by XYZ, put it in that function and it's done, how many QA guys come in and poke 😎.

No, not that easy! Now add a case like this: In addition to the filtered todo list as required above, the user also wants to have an additional list containing only the todos whose priority is Important.
I'll call the flow I've been working on is flow 1 and the flow we gonna do next is flow 2

Now the flow code will look like in the picture. You need to calculate a new list to filter by priority according to the filtered results, there are 2 ways:

Run the transform function again in the flow 1. The downside is that this transform function has to be run twice
Get the results in State 1for further calculation. The downside is that your app will have to re-render 2 times, first rendering according to the first flow, then getting the results from state 1, and then running again with flow 2 leading to the 2nd rendering to get the desired results.

🚫 Don't try to attach Filter by Priority to flow 1 and always produce state 1 and state 2 because doing so will make your app even more confusing 🙃 because:

The code is not self-explanatory to show the flow of the app well

Flow expects will be described: Get the output of the flow 1, filter by priority to get the flow 2 output. However, if you look at the code you combine both detailed processing of flow 1 and detailed processing of flow 2 into one function. Please don't

A good flow is one that clearly shows:

What is the required input

What is the desired output

When will this flow be run

The problem in general

In general, you are handling the event independently, and for each UI need, you save a separate state for it. Doing so makes your code more difficult to extend, and also has to save more state like the example I mentioned earlier, but the more code, the more bugs 🐞

A better way with ELT (Extract - Load - Transform)

Now let's try to flip the steps between load and transform. Instead of transforming and then load it to the state, we can do the opposite. Load the state first and then transform it to render the UI

At this point, have you noticed that our state is a billion times more compact? By changing the order of running the flow, namely the transform to the last step and then taking that output to render to the UI, I don't need to save anything.

Let's go back to the original example and see it:

Flow 1, when users trigger an event filter by status or filter by keyword, save event data status or keyword into the state. Then there is a transform function with input as
- Source data
- Status
- Keyword

Every time one of the 3 inputs of the state above changes, the render function will run again transform function will calculate new result UI is updated

Flow 2, when the user has an event filter by priority. There will be a transform function corresponding to the input
- Priority
- The output of transform function in the flow 1

Very clear without sacrificing performance right?

FAQ

Performance? Every time the app renders, does the transform function rerun as well?

As I said above, the state of the app only changes when an event is fired. So whether you run the transform function when there is an event and then save the result to the state or save the state and run the transform, it makes no difference, you have to run the transform again.

So what if an unrelated event causes the component to re-render ⇒ it has to run the transform function again while the input of that transform function doesn't change anything?

I find it's easy to fix if you use it react, put it in useMemowith the dependencies as the list inputof the transform, in vue it's even more easier, just put it into computed and now you done. If you use other frameworks, the keyword to solve is memorized function
Is it possible to scale in a large application?

Yes, absolutely! Imagine that source data is unique - a source of trust, any component that consumes data will have a different way of looking at that data.

For eg: Todo list is the source of trust that is saved from the backend. The Todo component will filter from that source of trust Undone tasks. The history component will filter from that source of trust past tasks.

So each component will have a different way of viewing data, and that view will, along with the component's lifecycle, be created when the component is created and deleted when the component is destroyed.
isloading?

To put it simply, there are 2 events that will change isLoading. The first is the user triggering request, and the other is when the response returns the result. This is a sub-state to represent the UI. And certainly, this type must be saved, but this type of state usually has nothing to do with other UI outputs, so I'm still ok when I put it in the state. Actually, I don't know any other way to handle these cases
State normalization is better?

Actually, it's not very relevant, state normalization is a way to deal with redundancy in the state. So it blends well with ELT. Now the flow will be ETLT
- Extract - data from API (Run once)
- Transform - normalize data (Run once)
- Load - save to state (Run once)
- Transform - depending on how the component consumes state, transform the way it wants

Summary

The change from ETL through ELT will make your code lean more and this also changes the Mindset of physician employment state: From thinking how to handle the event to ***the calculated output based on the current state (Computed state)*

Applying ELT is super simple, just apply the spell.

🪄 Only save the data coming from the event to the state, and do not save anything else in the state.

Original post: https://thanhle.blog/blog/write-lean-state-management

Refi App - From SaaS to open source product

Thanh Minh — Sun, 05 Dec 2021 08:18:59 +0000

Original post from https://thanhle.blog/blog/refi-app-from-saas-to-open-source-product

Why should you read this article?

Lesson learned for your next side-project
Why Open source is good for starting

What is Refi App

An open-source GUI tool to make interacting with Firestore less painful

Refi App

...once upon the time

When I work with Firestore for the first time, so many things excited me. It has real-time data, nicely SDK for most languages I can think of.

But when really dig in, I make an accident that drops a collection by thinking it is just a document, the same issue happened to my colleagues, luckily, it is a dev environment, I just need to ask for sample data and insert those again.

When I first worked with FireStore I faced many issues

How can I filter documents by some criteria?
How can I insert a new document from a JSON, in fact, I have to write a script to insert some new documents
I have to use GC Storage to back up the data, which I need to spend more time learning about. WTF 🤬 why not just export and import by a JSON file?
If I edit the same field of many documents, I need to go through documents and documents to edit.

So I talk to myself

I need to save other developers from Firestore 😎

It might be a SaaS product

From the beginning, I believe there are many many developers out there who have the same pain with Firestore (Yeah, there is no number or feedback to prove it, just my feeling 🤡). For that reason, I draw a beautiful canvas to prove I'm right and Refi will bring me money by solving other developers pain

I built Refi App with a goal in mind

It must be FAST and FRIENDLY for development
Users shouldn't worry about their data getting stolen

After about 2 months of building, It was ready to launch, this is the most interesting time I have

Building a new landing website
Starting to marketing Refi App
Thinking about domain
Setting up auto-update
Refi App logo
Adding feedback function
...etc

Those tasks keep going more and more and I was lost in it. It's quite difficult for me though when trying to do something I'm not good at. I want the landing page should be a professional, exciting feature introduction, but I can not design it LOL. I want to add a testimonial but I don't have any, also I don't want to fake it.

Getting users is HARD

The plan is, I will test it with my college, but they are afraid of using it, since their project is important and it's in the finance domain, so security is the first priority.

https://gfycat.com/samefamousamazontreeboa

So I tried to post it on Reddit, Twitter, and Hackernews. I didn't want to post it to Product Hunt because only want to post it there when Refi App got market-fit state, if it gets market-fit state, posting on Product Hunt will bring me a huge amount of users and upvote

However... nothing follows the plan, I don't have many users and if I do, I don't know if they like it or not, I don't know if Refi app really helps or they just tried and then come back to Firestore webpage.

I fail on this step many many times before and these are exactly the same steps how I fail before 🙃

Test and sell before building

That is what I haven't learned. I did try to search why I can not get any users, all the way lead me to an answer

I do not have any connection with my target users

https://gfycat.com/ifr/SandyImpureAsiantrumpetfish

I don't know many users using Firestore. I'm not sure that my colleague has the same problem as I was when using Firestore. People using Firebase don't know me!

After realizing the point I fail, I start building my Twitter profile, and this time, I don't know how to write content. I don't know how to make my tweet interesting for others.

So I searching for an answer

I was trying to post my product on social and think people will care and used it.
Instead, giving before asking them to do anything is the key

And that time, it was totally different, I tested to share knowledge with a group at Facebook and now it got more than 1k likes (average likes on my post is about 20) which is a big change

It was getting better, but I didn't care about it like before

Refi app is getting more users, but slowly, really slow. And I have a new job that doesn't touch anything with Firestore so I starting to ignore building Refi App.

To be honest, I feel excited when building a new product, imaging it got huge users and money will flow. And when the reality is different from my expectations, I feel down. I don't have any connection with users to give me feedback and most importantly, courage me to keep building!

Then I post Refi app on https://tinyacquisitions.com/ with the hope that someone gonna find it useful then take it off

And it actually get someone excited, I was happy to hear that. However, they like to put a paywall to the Product, which gets me bored.

When I built Refi app, I want it to have the same business as https://tableplus.com/ which is free for daily tasks and only charges when they want more advantage features. So I declined

Why open-source?

For now, I see many products that appear to solve the same problem I was tried with Refi app

https://www.rowy.io/ - turn your Firestore into Airtable
https://firefoo.app/ - which is a really good tool

And I am no longer working with Firebase so I think it is better to make Refi lead by the community, it will open more opportunities for anyone to contribute and keep Refi moving forward

It turns into a great journey

Thanh Le 😎

@cuthanh15

I have my first launch with Refi App yesterday. And here is the result 👇

14:25 PM - 01 Dec 2021

Conclusion

Finding users is hard if you don't own any community target the issue
By turning a failed SaaS into open source, you can get a community and lots more opportunities
Keep #BUIDL

Build realtime dashboard using Decentralized platform - Streamr

Thanh Minh — Mon, 29 Nov 2021 12:46:26 +0000

Original post from https://thanhle.blog/blog/build-realtime-dashboard-using-centralized-platform-streamr

Why should you read this article?

A use-case of Streamr
Flow from (ELT) - extract, load, transform and visualize it
Though on real-time BI and decentralize

Demo

https://streamr-dex-chart.vercel.app/

Story

Our team is working mainly on data and how to gain insight via data, when doing Cryptocurrency research, I found some problems:

There are lots of data our there, but it takes time to gather data private data
There is some BI tool out there but it depends on which data they provided (Glassnode, dune.xyz, Messari, IntoTheBlock,...)
It's not supported in real-time. I believed that in cryptocurrency or many other industries. If we can go a step ahead, we can take lots of benefits

You can say that, if we need to quick result on the result, we can use Glassnode or Dune.xyz but our team wants to build a tool that everyone can get what data they want, without any or basic technical knowledge and the dashboard must be in REAL-TIME.

Then we come up with the expected data flow

But this is a very starting point so we don't want to build anything from scratch, so we are going to build a really simple flow

FAQ

What is Prefect? Why is it needed here?https://www.prefect.io/ - The easiest way to build, run, and monitor data pipelines at scale.

After trying many ETL tools, we think that Prefect is a perfect fit, it clean, easy to write, and the community is really good, and we can also scale the infrastructure easily (They are building a serverless Agent in future)

Why not send data directly to Streamr?
I want to but Streamr hasn't supported Python SDK for now and we don't have much time to build an SDK on Python. But I think python client is really important since most of the data tools are written in Python

What is Airbyte? Why is it needed here?
Another open-source data ingestion tool, it is the fastest-growing data ingestion tool with supported many data source and destination

We got funds by Streamr to #BUIDL

As you can see, if Streamr can connect to Airbyte, it opens a huge amount of data that can flow into it platform, from Google Analysis, HubSpot, Salesforce to MySQL, BigQuery, Postgres,...

With the Airbyte connectors, now you can publish tons of data into Streamr without any efforts

https://github.com/devmate-cloud/streamr-airbyte-connectors

Which support from Streamr data-fund, our team can focus on building the hardest part on the pipeline and this integration also brings them the potential to acquire more users. This is a win-win relationship!

You guys can apply data-fund to building awesome things with Streamr at https://streamr.network/fund/

Which sponsor for the hardest part, we now can start building

Crawler to crawl DEX volume on https://coinmarketcap.com/rankings/exchanges/dex/
Building a frontend app to get real-time data and visualize it

https://github.com/devmate-cloud/streamr-dex-chart
https://github.com/thanhlmm/prefect_cmc

...on building real-time BI tool

This is a really hard journey but we started with a very first step, there are lots of problems we need to solve

Building a Crawling tool for anyone is hard

The internet is an open world that we can get many data there, but doing that with scale is hard. Most of the data is their website assets, so you end up building a crawling tool to get that data or buy from them via API. That why their business is, to make it hard to be crawl

Our team is thinking of building a SQL-like language to crawl data

The idea is that we can crawl most of the website data via SQL syntax

Eg:

SELECT a[href], img[alt] FROM "https://coinmarketcap.coin" WHERE a[class="cmc-link"];

SELECT div[innerText] FROM "https://streamr.network" WHERE div CHILD OF ".Hero__Inner";

Realtime BI tool

Its lack of a tool to visualize real-time data, most of them can do batch data by querying from data-warehouse database but supported in real-time is a hard problem.

Thanh Le 😎

@cuthanh15

If you plan to build real-time pipeline, you MUST use @apachekafka

15:35 PM - 19 Nov 2021

Kafka is the only tool that we can use to build a real-time data pipeline, and we only see https://metatron.app/ supported Kafka right now

Is Streamr fit?

No, at the moment. By far, Streamr is supported most of the basic cases: We can subscribe to real-time data, get past data by time,... but it doesn't support the most important cases:

Process the data. Imagine you have a stream input of DEX volume data by every 30 mins and we need a stream of DEX volume data by every 4 hours as output.

And we think Streamr can utilize its nodes to run lots of potential use-cases not just as an infrastructure to stream data. For eg:

Support smart contract so we can make a node as a crawler data point. By doing so, we can leverage lots of nodes on Streamr Network to get data.
Support smart contract so it can process stream like my above example. We got and stream as input → Smart contract → stream as output
Our team don't want to expose my Private key when integrating Streamr on the frontend, we can hide it by running the Streamr node on my server but we think it takes effort to do and operate our node

This is lots of works to do but our team believed, which the fast-growing industry, we can have those abilities in the near future

Guide to choosing state management library for your next project

Thanh Minh — Wed, 10 Nov 2021 05:13:32 +0000

Read the original post from https://thanhle.blog/blog/guide-to-choosing-state-management-library-for-your-next-project

Why should you read this article?

There is a set of criteria when choosing a library for Frontend State Management
What is state management?
What does state management care about?
Have a bunch of reasons to drop Redux

Usually, people who find this post gonna be in one of two groups

A Frontend engineer is too tired, suffer from redux 😵‍💫
Are you just starting out in frontend and want to learn more about state management

If you're in group 1 then... Great, I'm writing this post with 80% of my energy wanting to get rid of redux 😄. If you belong to group 2, this post will help you have more perspectives on state management, how to act cool with colleagues

So what the hell is State management?

If you find "what is state management" on Google, there are quite a few definitions, but it can be summarized into two main ideas as follows:

☠️ State is the skeleton of the application
🏃 State management is to manage that skeleton

It's fuking simple, right?

So which state management to choose?

⚛️ In this part, I only focus on React, because my current job is focusing on React.

Short: Basically you don't need any state-management library, React + ReactContext + API query library is enough 🤷‍♂️

%[https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367]

People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at the indirection Redux introduced to their code. “Why do I have to touch three files to get a simple feature working?” Why indeed!

Basically, most of your state is only shared in one feature, so it will be encapsulated in a route (eg: /users, /posts). Therefore, for each route, we only need one ReactContext to handle 80% of cases.

Some features will need data users, if so, do we have to query users every time? Most modern query libraries solve this case for you by caching. Try swr or react-query

If things start to get complicated, add libraries like Recoiljs, Jotai. These libraries can be added and easily replaced useState by Search & Replace.

Don't complicate things when it's simple, prepare for it.

Long:

Features

State also has many different types, so there are also many different types of classification, but I found this article is really good at state classification.

%[https://javascript.plainenglish.io/do-you-know-the-5-types-of-states-in-react-8734a04a5ffb]

Some best practices

Form state: Do not move it to the global state/store .... whatever. Hey, it's best in just one component. So it react-hook-form is enough.
Navigation state: react-router is almost the default in every project, better we ignore it. If you want to integrate with the global state, the best sync direction is Navigation state → Global state. This case is often seen when making a search page with a filter

Ok we have 3 guys left

Logical state
Server state
Browser state

💡 **That means we need to find a state management library to manage* the Logical state, Server state, and Browser state*

Easy to add

A good library, for me, DX must be good, I don't want to spend half a day just trying to figure out how to integrate it into my app.

Since state management, in particular, is a complicated thing, so of course, it's complicated to add, but don't make it any more complicated... Redux 😡

However, this part only needs to be done a few times when coding a new project, so this criterion is only slightly important.

Easy to write, easy to understand

Don't force yourself to code a normal use case: Query API → Render list user in the following step:

Dispatch query action with keyword
Write a reducer that takes a query, then dispatches a saga action
Write action sagas
Write 2 more reducers for sagas succeed case and fail case
If successful, merge the received data into the state tree
Mapping state into UI

This is the job that I find the most de-optimized that most frontend engineers have to do. It's true that "people make it complicated", a good library is a library that must help devs and "enjoy the moment".

In addition, I don't have to spend all day explaining to a Junior that the data will go through these steps, and he replied "it's too confusing 😭", and then I can't hide when it doesn't work.

💡So easy to write also means easy to understand

Community = Easy to debug/enhance

Community is not natural but is always a criterion that everyone cares about when choosing Library, Framework, ....etc

Community is the part that can cover lots of factors.

Follow the doc not add lib → search google → done.
Can't write → search google → done.

So the power of a library comes from the community that supports it, and Redux is on-top in this criteria

Performance

Often core libraries like this can't, or are very difficult to replace when you realize: "this library is running slow, I can't optimize"

Therefore, Performance is a criterion to consider when this is a long-term project and has a huge future expansion.

Performance can be divided into 2 criteria:

Load time - often depends on library size, network,...
Interactive time - usually depends on the "intrinsic" of that library

The state management focuses mainly on data logic, so the part Interactive time is the most important. Especially in react context, you need to pay attention to how it triggers re-render component when the state is updated

⚠️ If your project has a small to medium scope, you should not care about this. I think the scope of this type of project should be concerned with the code so that it is fast and easy to understand. Optimized but only 10ms faster is not worth the trade-off. I had to fix a lot of small and unpredictable bugs because the previous coder focused on optimizing too early!

What type of project is it suitable for?

It is not natural that there are so many state-management libraries, simply for two reasons:

They are tired of Redux 😫
Depending on the project with different complexity, there will be suitable tradeoffs → create a library suitable for that tradeoff

👉 This is the most important criterion that I see the difference between a "technology enthusiast" and a "pragmatic technology enthusiast". I met some people who really liked new technology, this new one was so cool but he accidentally forgot, that cool thing is never applied in the project, sometimes it's also an anchor for the team to move forward 🙃

Result

This is the result of my assessment after working on a real project with some of the top libraries in this field, but this is just a personal perspective, do your own research.

🚫 Please! Don't use Redux anymore - Redux only handles well Logical state

If you want to add server state, add redux-saga, or redux-thunk go! - - At the same time, spend an extra day reading the document to see what they are.
1 day to put them together, and 1 week to debug why not run 🙂
Sticking to react? The extra redux-react
App after a while of coding, it runs slow? Append reselect

It is too much to read, too much to code and learn to manage the state. In fact, redux is the most de-optimize factor in the frontend stack

Hopefully, through this post, you will have an overview of state management and how it is used in react. And especially, please, don't use redux if it doesn't fit anymore

Morphling - dApp to join Binance Launchpad without any restriction

Thanh Minh — Tue, 02 Nov 2021 12:57:53 +0000

📝 Morphling - dApp to join Binance Launchpad without any restriction
thanhle.blog (1377 words)

Why should you read this article?

More perspective on dAPP. Why do I use Smart Contract instead of something centralized?
Tips when building apps on EVM-chain (Etherium, Binance Smart Chain, ...)
The reason this dApp failed (If it fails in the future ‍♂️)

What app is that?

Morphling is a dApp that allows people in crypto-banned countries to join Binance Launchpad, specifically China.

Why build this?

If any of you are used to sending money to CZ or Binance, you must be familiar with a Feature on Binance: Launchpad

With recent data, most of these Launchpad rounds bring huge profits to investors and are almost risk-free, as long as you hold BNB, you got money 🤑

However, there is one problem: Binance does not allow users in some countries to join Launchpad, typically China.

Users from the following countries or regions will not be able to participate in token sales on the Binance Launchpad platform:

Belarus, People's Republic of China, Democratic Republic of Congo, Cuba, Iraq, Iran, North Korea, Sudan, Syria, United States of America and its territories (American Samoa, Guam, the Northern Mariana Islands, Puerto Rico, and the U.S. Virgin Islands), Zimbabwe.

To get around this limitation, some of my Chinese colleagues have sent me BNB to join the Launchpad. It was time to hold the BNB number with a value of more than $100,000, in my mind, those questions popped up:

What if I lose this BNB number?
What if I "accidentally" lose it? Can the guys in China catch me? Or do I do a few things to build trust and then wait for more than 10 million and then "accidentally" lose it?
After getting the token from Binance, how can I share it with everyone?

When I joined Launchpad to help the other guys, I also encountered some pretty annoying things like:

I need to calculate the share ratio for each one, it's quite boring, sometimes I have a few BNB put in, then the calculation is messed up again.
While holding Launchpad, someone withdraws BNB because the loan interest is increasing dramatically 🏃‍♂️, or sometimes while holding, someone deposits extra BNB to participate.
Distribute the reward for each person. This part is the most annoying to me because it takes lots of time. After calculating the number of BNB and Token to distribute to each person, I must: Ask for their Address, confirm, go to Binance to withdraw, input OTP email, input OTP password, input OTP 2FA, input my YubiKey, confirm that they have received Token 😫. And each user I will have to redo this series twice because Binance does not support sending BNB and Token at the same time.

There was a time when I sent the wrong Token via BNB, so I had to send all the tokens to him and ask him to re-distribute the token to others. And my friend also had to do endless steps like me to re-distribute it.

If we look broadly, it can be seen that this model only works based on individual beliefs with each other. That party trust me, so they send lots of BNB to me, I also really trust them once I sent all the rewards to that person.

So I came up with MorphlingIt's a Dota hero famous for his ability to change between Agility and Strength (Damage and HP)

Operation model

My idea is quite simple, the system will have 3 pools

Cover pool
Staking pool
Reward pool

To solve the trust issue when I am the representative holding BNB, I will need to put some money in to make a trust. When things go wrong, this pool cover will be un-locked to distribute among those who have put BNB into staking.
After it's time to hold BNB on Launchpad, I will lock the staking pool and withdraw funds from this pool, then put it on Binance to join the launchpad.
Finally, when Binance gave me back my BNB and Token. I just need to withdraw and put it into the pool. Then this pool will be divided equally according to the rate deposited in the staking pool

By circulating BNB and tokens in the 3 pools above, I don't have to run the calculation, distribute tokens to everyone manually (Save me 10 minutes for each user, and reduce the risk of wrong input number, or sent by mistake at the same time). In addition, the timing of returning tokens to everyone is also quite sensitive, price can go up and down!

Income 🤑

Nothing for free, I charge 5% for the reward token. So if I do it manually, holding about $10,000 will only get paid about $50-$100, the risk ratio is too high. Therefore, if I can scale this model, I can have a decent cash flow without doing much

Ex: 100 users, each deposit 5BNB and get about $100 token reward each person

So I can make a profit: 100*100*5% = $500 already (Depending on the Pump level of the reward token, the profit may be different)

My part of the risk will be pushed to the Smart Contract side, or I will not suffer anything, or I will lose everything

It's not that easy 😌

In terms of operation, it is quite simple, but if you think more deeply, you will need to handle a lot of questions?

If the cover is too little, will the user trust to stake BNB?
What if the amount of cover is greater than the amount of BNB in the staking pool? Then just put 1BNB and then claim to redeem 1.2BNB cover is done, it's a risk-free investment in a few minutes 🤷‍♂️.
If after getting the token, BNB from Launchpad, if I eat a little less and then deposit it into the Reward pool, how will the Users side handle it?
What's the use of this dApp when buying a Binance account in another country?
Usually, the token payment time will be delayed randomly compared to the time that the token is listed on the exchange, if that token dumps or pumps, how does it affect this model?
Each user participating in Launchpad will be limited to the maximum number of tokens that can be purchased, called Hardcap, so if I need to to run this modal to many other Binance accounts, I need to design the modal so that they will not take BNB and run away.

Why Smart Contracts?

Naming a piece of code that runs on ETH or Binance is already something that I find very cool! Why not set it to Decentralize Logic, Distributed code,...

By definition, a contract is an agreement between 3 parties: Party A, Party B, and a third party to ensure fairness between Party A and Party B. In fact, all contracts that you agree to. For daily transactions such as labor contracts, real estate purchase and sale contracts, etc., the third party is the state.

The smart contract is 3rd party to ensure the cooperation of party A and party B is the logical lines that you code. Therefore, in terms, the economic model in Smart Contract must be very careful and carefully calculated. It's like you're coding a strict referee in a football match.

Pierluigi Collina

As you can see, in Morphling, there is party A: BNB recipient to join Launchpad, party B: stake BNB to profit from participating in Launchpad. And the third party, which is a smart contract that is responsible for ensuring that Party A does not cheat on Party B, and Party B does not cheat on Party A or if even they cheat, then, in the end, the cheater will also be the one pay the bill 😭

Therefore, designing a set of rules for this Smart Contract guy needs a lot of brain 🧠 power and it is the most basic foundation in the era of Decentralized everything. Does your platform have developers? Are there any users using it? Is anyone participating in running the node? Is there any user deposit liquidity pool?... All must be built on the set of rules it defines.

This is a very difficult and interesting problem, maybe I will write more on this topic, but basically, the Rules will be built on 2 basic fundamentals:

Game theory
Nash equilibrium

Where's the code?

I'm beta testing this app, so I won't publicize the code at the moment, but will soon. Stay tuned!

Building journey

I'm thinking of a way to show some problems/tips during app build like a timeline. But right now, it's not built yet, so I leave this section blank

Electron multiple Tabs without dealing with performance

Thanh Minh — Wed, 28 Apr 2021 06:36:56 +0000

Hi everyone,

I'm Thanh, Refi App creator

In the journey of building a tool to interact with Firestore, I found an insight that:

Developers usually working on multiple projects at the same time
And they also tend to use multiple tabs on the browser to work with the same Firebase project to have multiple views

Indeed, Refi App should support them by:

Implement user's familiar UX tabs - Like what chrome does
Hotkeys all the thing (Cmd + T for new tab, Cmd + W to close current one)
Fast

In search of solutions

It popped out on my head for some solution:

Just use some Tabs component, there are hundred of Tabs components out there
Is there any optimized solution for electron? Here we have https://github.com/brrd/electron-tabs

But none of them can give me the right solution, why?

If I use Tabs component in react, the multiple application will work on just one process and it app is will hanging when we have more than 3 tabs open since Refi App do lots of things in the background: It listens on the database changes and update the UI in realtime, showing many documents at the same time in the Table view

How about electron-tabs, it uses webview under the hood. I tested it and end up can not make my app running properly due to application architecture. The webview also have many issues remains that event Slack or Figma team can not deal with:

Growing Pains: Migrating Slack's Desktop App to BrowserView - Slack Engineering

Introducing BrowserView for Electron

But those awesome team has introduced a great alternative solution for it BrowserView. It basically works like BrowserWindow but you can put BrowserView anywhere in BrowserWindow.

It likes position relative/absolute in CSS, the BrowserWindow is the parent which has position: relative; and the BrowserView is children have position: absolute;. And yes, you can put many BrowserView inside its parent as you want, just like CSS

BrowserWindow = position relative, BrowserView = position Absolute

Here is the output

The output is awesome, each tab instance has its own process, and the performance is incredible, it like we change tab in the Chrome browser (In fact, the mechanism is almost the same as Chrome is doing)

I'm too tired right now so if you're curious about how to do that, let's wait for the next post.

If you guys think this post is useful and one to know more trick on optimize the performance of Electron, let's follow me at https://twitter.com/cuthanh15

RecoilJS in practical - complex application

Thanh Minh — Thu, 01 Apr 2021 16:07:19 +0000

Hi there,
I just use Recoil for my own product for the first time.

Refi App - A tool to make developer less painful when interacting with Firestore DB

Thanh Minh ・ Mar 30 '21

#firebase #typescript #javascript #react

So I decided to share my own experience when using Recoil 🤘

Why?

With the non-requirement of Refi App, it must be fast to bring the best DX so I need something to manage the state in a very optimized way

Why not Redux? Zustan? DVA?

The boilderplace is so fukin hard. Besides, it really hard for optimizing to only render a component which subscribe to a sub-tree state. I need to use selector, memorize, immutable, ...

Why not MobX? MST?

It has been a long time since I last use Mobx, MST. It's cool, but now the world has changed a lot, no more Class component, so I don't know it supports a lot.
One more thing I don't want to use MobX is that the API is changed a lot in each major version. No! I don't want to use an outdated library for the rest of my life
I feel can not control how Component will render when I use MobX

Why Recoil?

It solves my concern, each component is subscribed to a very small state object (called atom) and only render once they changed
It plays nice with Functional Component. You can easily change useState to useRecoilState and vice versa. It's cool because "Alway use local state, only move it to global once needed"
I can map the product concept to state in my brain. A cell in a table should be an atom, so that the cell will render on its own.

How can I struct my state?

When using recoil, your state will build from pieces of atom - A bottom-up approach. So that if you don't have a strategy for structuring it, you will end up with tons of atom

I decided to orders those atoms by

firebase atoms
navigator atoms
UI atoms
hotkeys atom

If it is biz state, I divided it by domain
If it is for something to manage display, I divided it by its function

As you can see in the images, I also make a .action.ts files. Once using recoil in a complex app, you will often need to update state of many atoms for one action.
For eg: Once users click on the Commit button, I will need to submit all the modified/new/deleted documents to the server, I also need to update a UI atom to show loading.

By splitting all actions to .action.ts file. I can list out all the use cases and convenient to not mess my mind once add or edit something.

One more thing is all the atoms, selectors must postfix with Atom. If not your brain will get confused when using it. Is this object is Atom Value, Atom State, or just a local state?

For that strategy, RefiApp tech about 60 atoms object so far. I'm happy with the current status but I think I gonna divide it for smaller if the app is grow

The funny parts

As I write above, it really easy to convert from useRecoilState to useState which is free my brain a lot. I don't need to ask myself, should I put it at global every time I try to introduce a new state.
An atom state can easily convert to selector and vice versa. Why I will need that?

In the image above, I have a propertyListAtom to store the propertys that will show in each collection table. It will have an empty array [] as the default value. But I have a case that if users access a collection for the first time, I will generate some property to put on that list so that I introduce a null type for that atom. If I change the type of propertyListAtom then I gonna need to find everywhere using that atom to make an update.
No, you don't need to do that!. I just add a new atom propertyListCoreAtom and turn my old atom one to selector. Really enjoy!

Components will only render if its subscribed atoms update which is my own goal. No more energy to put on a stupid thing like redux and selector...

The awful parts

You have to write all the logic in a component, there is no official way to mutate a state from outside. I know they have reason to make it, but it feels poor for developers to follow it. But I found a way to eliminate that

There is a way to update states on recoilJS outside of component? #289

orhalimi posted on Jun 09, 2020

So I'm trying recoilJS for a js game that I am building and it pretty neat, but the need to update atoms from components only feels like a limitation.

To create a game loop, I put all the logic on empty component so I will be able to read and write states. Even if I will construct the logic outside of the component, I will need especially move different stats around all the time. There is a way to update atoms outside of react component (not via hooks)?

View on GitHub
There are some issues on performance still not solve yet. The components will render if the selector value is not changed (their dependencies changed)
The component rerender even the value from selector is not change #924
thanhlmm posted on Mar 17, 2021
How to reproduce

https://codesandbox.io/s/recoil-test-8jove?file=/src/App.js
- I have an atom to keep track an array of item - AtomA
- A selector to validate the length of above array - SelectorB
So every time I add new item to AtomA but the SelectorB still return same result, the component subscribe to it always rerender
</div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/facebookexperimental/Recoil/issues/924">View on GitHub</a></div>
I have a collection contains for about 100 documents. And I tried to update 100 atoms once I received the document data, the app is hanged. The recoil and react is not smart enough to batch those update! But it turns on an idea in my head 💡 which this approach I can batch update my app which out to do lots thing and the result is incredible. I called this approach is Separated tree timeline, and it also applicable for Redux, let's do it on the next post

You can not subscribe to an atom value without making your component rerender. I solve that by introducing RxJS to my code, not that hard when combining them

The only debug tool that worked for me is console. Despise there some DevTool for Recoil but it's buggy and the DX is bad

Takeaways

⚡️ Recoil is fast and easy to use
🆙 It will boost productivity by "Use useState and convert it to useRecoilState when needed"
😤 You gonna need a strategy to struct your atoms because it will be lots more
⚠️ It still lacks some support on the advantage cases, you will need help for other libs.

Refi App - A tool to make developer less painful when interacting with Firestore DB

Thanh Minh — Tue, 30 Mar 2021 15:06:17 +0000

Hello there,

When I first working with FireStore I had to face many issues

How can I filter documents by some criteria?
How can I insert a new document from a JSON, in fact, I have to write a script to insert some new document
I have to use GC Storge to backup the data, which is I need to spend more time learning about it. WTF 🤬 why not just export and import by a JSON file?
If I edit the same field of many documents, I need to go through documents and documents to edit.

Is there any tool to interact with FireStore like TablePlus - A question pop on my head. But you know what

So yeah, I think many of you will phase the same issues like me, so I decided to make one.

Check out it at https://refiapp.io/

Features

The first version includes:
🔐 Privacy - Your privacy is our first priority. We do not keep any of your data

We never ever send any of your data. Your data is your and always your

📜 Table view - Easy view & edit a large amount of data like Excel

🗒️ JSON Editor - You can add, edit documents like in your editor. No more wasted time clicking to add just a document

We integrated Monaco Editor - aka **VS Code* core so you can feel like 🏠*

👨‍💻 Build for Developer - With hotkeys, you can do anything without leaving your keyboard. We are developer, we love keyboard

Press Cmd + Shift + P or Cmd + / to open Command list

🚧 Preview changes - Confidence edit data without making Production crash

P/S

This is an early version, so let help me make it better by giving me some feedback. I think we can make it better

P/S 2

This tool is built by Electron, Typescript, React, Vite
And the Homepage is built by Cloudflare worker, Notion as backend

There some many interesting when building it, I think it would be shared with the community. Which one make you interesting most?

DEV Community: Thanh Minh

Boost NextJS TTI & FID performance without compromise and pain

Why should you read this blog?

Result

Before

After

Hydrating is PURE OVERHEAD

Progressive Hydration

Lazy load component code and hydrate when needed

How to use it

Frontend performance pattern

Why should you read this?

When should I care about performance?

Performance pattern

Split code/Lazyload

Prevent installing the duplicated lib

Choose the library that supported ES6 and tree shaking

Debounce user input

Add loading=lazy for tag img, iframe

Memorized function

Cache frontend assets using Service Worker

Virtual list

Break long-run functions into multiple short-run functions

Optimistic update

Lazy polyfill/Dynamic polyfill

Write lean state-management

Why should you read this article?

UI = f(state)

When does the state change?

What's the problem with doing ETL in the front-end?

The problem in general

A better way with ELT (Extract - Load - Transform)

FAQ

Summary

Refi App - From SaaS to open source product

Why should you read this article?

What is Refi App

...once upon the time

It might be a SaaS product

Getting users is HARD

Test and sell before building

It was getting better, but I didn't care about it like before

Why open-source?

Conclusion

Build realtime dashboard using Decentralized platform - Streamr

Why should you read this article?

Demo

Story

FAQ

We got funds by Streamr to #BUIDL

...on building real-time BI tool

Building a Crawling tool for anyone is hard

Realtime BI tool

Is Streamr fit?

Guide to choosing state management library for your next project

Why should you read this article?

So what the hell is State management?

So which state management to choose?

Features

Easy to add

Easy to write, easy to understand

Community = Easy to debug/enhance

Performance

What type of project is it suitable for?

Result

Morphling - dApp to join Binance Launchpad without any restriction

Why should you read this article?

What app is that?

Why build this?

Operation model

Income 🤑

It's not that easy 😌

Why Smart Contracts?

Where's the code?

Building journey

Electron multiple Tabs without dealing with performance

In search of solutions

Here is the output

RecoilJS in practical - complex application

Refi App - A tool to make developer less painful when interacting with Firestore DB

Add `loading=lazy` for tag `img`, `iframe`