DEV Community: Duc Ng

Keep Life Organized With Dashb.io: It changed my morning routine

Duc Ng — Tue, 31 Oct 2023 05:51:37 +0000

We've all wished for a one-stop solution to our bustling digital life—a single, cohesive tool that could streamline the multitude of apps, tabs and tools we use to keep our life in order. I found this Dashb.io, a web application designed to be your personal productivity dashboard, changed my morning routine and how I start my day with the information I need.

A Dashboard For All Your Needs

You know how we've all got a million tabs open for everything under the sun - weather, stocks, news, notes, and that essential lofi playlist to keep us sane throughout the day? Well, Dashb.io is a neat little solution to that mess. It lets you create a personal dashboard using widgets, and it's been super helpful in streamlining my digital chaos. Offering a wide range of customizable widgets, it gives you the power to create a dashboard that suits your needs and aligns with your lifestyle.

The platform is smooth and intuitive, providing a user-friendly experience. It's almost like having an assistant who neatly organizes all the important information you need on one convenient page. What's more, it's fully customizable. You can make your dashboard as minimalist or as detailed as you want, based on what you need at your fingertips.

My Take on Dashb.io

Using Dashb.io has genuinely improved my browser hygiene. No more scrambling between tabs, and no more feeling overwhelmed by the internet’s infinity. It's all there, in one place, beautifully organized, and fully under my control. Having a dedicated space for everything gives me a sense of calm and order in the otherwise chaotic digital world.

In a nutshell, Dashb.io is an incredibly handy tool for anyone juggling various digital tasks. It's like your personal command center, keeping you informed and in control. And who knows, it might just become your browser's default tab (I know it has become mine!).

The Dashb.io Experience: No Strings Attached

One thing that really stood out to me about Dashb.io was how easy it was to get started. No sign-up, no login, no need to remember another password. It's as easy as hitting the link and diving right in. And did I mention it's free? You get to try out all the features without spending a dime. It's about as no-strings-attached as you can get.

The best part? It's open source! (written in React, you can even create your own widget). You can try it out for free, and you don't even need to login or anything. Give it a try and let me know what you think! https://www.dashb.io

Create your next project with "create-blank-app" CLI

Duc Ng — Fri, 20 Oct 2023 00:01:57 +0000

Setting up a new project can be a tedious task, especially when you're dealing with multiple tech stacks. Wouldn't it be great if we could automate this process with a single command? That's where create-blank-app comes into play.

With the advent of AI technologies in the programming world, developers are now finding more efficient ways to create project codes. One of the latest techniques involves using OpenAI's ChatGPT to generate new project code. This method simplifies and accelerates the process of initializing projects with various tech stacks. In this blog post, I will introduce a tool named create-blank-app (or cba for short), which leverages this cutting-edge technique.

Simplify Your Project Initialization with 'create-blank-app'

create-blank-app is a powerful command-line tool designed to simplify the process of creating new apps. Users can quickly search for tech stacks using keywords, which makes this tool highly flexible and customizable. One of the unique features of create-blank-app is its support for generative AI. With just one command, you can leverage the power of AI to kick-start your project.

To install create-blank-app, assume you already have NodeJS installed, just run: $ npm install create-blank-app -g

Supported Tech Stacks

create-blank-app supports a wide range of popular tech stacks:

Frontend Frameworks: Vite, bun, create-react-app (CRA), create-next-app (CNA), create-nuxt-app, angular, create-web3js-app (CWA), and create-react-native-app (Expo)
Backend Framework: Express-generator-typescript
Mobile: React-native init
Bundler: Vite (vue, react, preact, lit-element, svelte app)

Using ChatGPT with create-blank-app (optional)

In addition to these tech stacks, create-blank-app also supports ChatGPT to generate a new app using a prompt file. This feature turbocharges the app creation process by allowing you to leverage the power of AI.

Steps to generate a New Project using ChatGPT:

Set OpenAI api key like $ export OPENAI_API_KEY=<yourkey>
Create an empty directory, inside, write your prompt in the "prompt" file (or "prompt.gpt4" for gpt-4 model).
Outside that directory, run: $ cba <name>

Wrapping Up

Embrace the future of coding with create-blank-app, setting up a new project with your desired tech stack is just a command away. The support for ChatGPT adds another layer of convenience, not only does it save you time and effort, but with AI-driven code generation, it also opens new possibilities. Give it a try, contribute on GitHub, or share your feedback to help improve this tool.

Github: https://github.com/ngduc/create-blank-app

Generate New Project Code Using "create-blank-app" command and ChatGPT

Duc Ng — Wed, 13 Sep 2023 21:09:46 +0000

Simplify Your Project Initialization with 'create-blank-app'

create-blank-app is a powerful command-line tool designed to simplify the process of creating new apps. Users can search for tech stacks using keywords, which makes this tool highly flexible and customizable. One of the unique features of create-blank-app is its support for generative AI. With just one command, you can leverage the power of AI to kick-start your project.

To install create-blank-app, assume you already have NodeJS installed, just run: $ npm install create-blank-app -g

Supported Tech Stacks

create-blank-app supports a wide range of popular tech stacks:

Using ChatGPT with create-blank-app

Steps to generate a New Project using ChatGPT:

Set OpenAI api key like $ export OPENAI_API_KEY=<yourkey>
Create an empty directory, inside, write your prompt in the "prompt" file (or "prompt.gpt4" for gpt-4 model).
Outside that directory, run: $ cba <name>

Wrapping Up

Embrace the future of coding with 'create-blank-app', setting up a new project with your desired tech stack is just a command away. The support for ChatGPT adds another layer of convenience, not only does it save you time and effort, but with AI-driven code generation, it also opens new possibilities. Give it a try, contribute on GitHub, or share your feedback to help improve this tool.

Github: https://github.com/ngduc/create-blank-app

Try React 18 with Vite, Typescript and Vercel

Duc Ng — Thu, 17 Jun 2021 00:45:00 +0000

What's New In React 18?

Please visit https://nnote.io/s/x4od5/react-18-with-vite-and-vercel for the latest updates for this article.

The new version of React - React 18 alpha has just come out. From ReactJS.org:

There are no significant out-of-the-box breaking changes to component behavior. You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release"

New Improvements:

React.lazy - new streaming server renderer support.
Automatic batching.
New APIs (like startTransition).
Article: What’s coming in React 18 - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

This tutorial will demonstrate a step-by-step guide to create your project using React 18 alpha, Typescript, Vite and deploy it to Vercel (freemium).

Create a Vite project

Required tools:

NodeJS
Yarn (npm install yarn -g)

Run this command to create your new project:
(Vite is a code generator similar to CRA but it takes < 1s to launch dev mode versus > 45s using CRA)

yarn create @vitejs/app my-project --template react-ts
cd my-project

Install the latest React 18 alpha version:

yarn add react@alpha react-dom@alpha

As @types/react doesn't understand the new React 18's APIs or types yet, we need to update "tsconfig.json" file: after "jsx": "react" add:

"types": ["react/next", "react-dom/next"]

Then run the new project:

yarn dev

vite v2.3.7 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 174ms.

And that's it! We have React 18 up and running with Typescript! Ready to rock.

Deploy to Vercel

First, we need to build this project:

yarn build

Then deploy the build (dist) directory to Vercel:

cd dist
npx vercel .

...
✅  Deployed to: https://react-18-ts-vite-app.vercel.app [copied to clipboard] [11s]

Now, visit the link https://react-18-ts-vite-app.vercel.app, we should have the app up and running there:

Introduction to Web3 and MetaMask

Duc Ng — Wed, 19 May 2021 18:15:15 +0000

Web3 - Javascript - Resources

Web3.js is a collection of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC or WebSocket.

MetaMask is a browser plugin that serves as an Ethereum wallet. Users can store Ether and other ERC-20 tokens in the MetaMask wallet. The wallet can also be used to interact with decentralized applications, or dapps.

This page is a collection of resources, tutorials, guides, articles, etc. for learning Web3 with Javascript.

Last update: 05/21/2021 - Bookmark and come back to this page for more updates later.

Tools / Requirements:

NodeJs
MetaMask (chrome extension) - connect to your test wallets.
Golang - to run some geth commands.
Ganache - local block chain for dev.
VSCode and extensions.

Setups:

Setting up Local block chain using Ganache and MetaMask
- article: https://docs.moralis.io/guides/setting-up-ganache

Articles

Intro to Web3.js · Ethereum Blockchain Developer Crash Course

article: https://www.dappuniversity.com/articles/web3-js-intro

How to send transactions with Web3 and Node.JS?

using web3, @truffle/hdwallet-provider, send transaction
article: https://morioh.com/p/d3ef8b16c770

How to Connect Web3.js to MetaMask in 2021

using window.ethereum.send('eth_requestAccounts')
medium: https://medium.com/valist/how-to-connect-web3-js-to-metamask-in-2020-fee2b2edf58a

Hooks and components to use Moralis in a React app

using react-moralis, useMoralis hook
build A Simple Dap in 3 Mins - https://docs.moralis.io/guides/build-a-simple-dap-in-3-mins-login-part-2
github repo: https://github.com/MoralisWeb3/react-moralis

Tutorial Videos

How to connect smartContract to UI with Metamask(web3 tutorial)

web3.js - web js - metamask - getAccount eth_requestAccounts - test with BNB token - send Eth button - eth_sendTransaction from/to account
youtube: https://www.youtube.com/watch?v=NseL8v9EH_Q

How to send transactions with Web3 and NodeJS? (Backend Blockchain Development)

web3.js - nodejs - test nest rinkeby - eth smart contract - sendTransaction
youtube: https://www.youtube.com/watch?v=n9QLsSagUzE&t=423s

Links

For latest updates, please follow and bookmark this page:
https://nnote.cc/s/zeiu8/web3-javascript-resources

Benchmark your computers with real-world Web Development Tools

Duc Ng — Thu, 31 Dec 2020 20:31:08 +0000

Recently I realized that I own multiple computers for web development. I wanted to know which one can run my Web Dev Tools faster and more efficiently. So, I created this simple script to benchmark them by running my regular tools like CRA, express generator etc. and measure the time.

Usually, we assume that a newer, more expensive computers should be faster than an old one. That is true but how much faster? We will need some numbers to prove that. And nothing is better than the performance results from real-world development tools.

How does it work?

The run.sh script will temporarily generate a CRA webapp (benchmark1) and an Express NodeJS app (benchmark2).
Then it will run the usual npm commands like npm run build, npm run test, and measure the time (in seconds).
Results will be added to this README.md file. (run git status to see the changes)

Usage

Node JS v15+
This has been tested with Ubuntu, Debian, MacOS, Windows (with Cygwin).

- Clone and Run:
git clone https://github.com/ngduc/dev-benchmark.git
cd dev-benchmark
sh run.sh "Brand Model - OS - CPU - RAM - HDD"

- Run sh run.sh twice to get more accurate results. (due to caching)
Results
After running the script (run it twice for accurate results), the benchmark results (in seconds) will be added to this README.md file.

The result will look like this:

### HP 17z-ca300 - Ubuntu - AMD Ryzen 5 4500U - 16 GB DDR4-2666 SDRAM - SSD
#### CRA
- create 36.71
- npm run build 8.71
- npm run test 3.08
#### express
- create 18.55
- npm run build 3.90
- npm run test 4.82

You can create Pull Requests to add results of your computer performance to share with fellow developers.

Any ideas, feedbacks, suggestions are welcome. Thanks.

Github Repository: https://github.com/ngduc/dev-benchmark

Create and deploy an Express NodeJS with UI using Vercel (Free)

Duc Ng — Sat, 07 Nov 2020 07:48:36 +0000

Disclosure: I have no affiliation or investment in any company mentioned in this post. This is just my experience.

I assumed you have some experience with NodeJS, ExpressJS and signed up with Vercel.

Vercel (zeit) has been working fine for me for a while. The problem is there are different ways on the internet to set it up and most of them doesn't work for me anymore, maybe due to changes from Vercel. But I'm glad this setup works now.

In this article, I just want to share my experience and github repository which you can use it to create your own Express NodeJS App and deploy it to Vercel.

Github repository link:

https://github.com/ngduc/vercel-express

Set up & Deploy with Vercel

$ npm install vercel -g
$ npm install
$ vercel

Vercel will generate ".vercel" directory, don't share or commit this one.
After deploying, open your URL like this:
- http://YOUR-VERCEL-APP-ID.vercel.app
- Example: https://vercel-express-3.ngduc.vercel.app

app/index.js

If you're using Typescript, build your source directory, output to "app"
Update package.json: "main": "app/index.js"

vercel.json

Map API routes (/api/...) and static (UI) routes (/...).

Now you have a full-stack web application deployed to the Internet using Vercel! Happy coding!

Links:

This official article describes more in details about Vercel and Express - https://vercel.com/guides/using-express-with-vercel
Github Repo - https://github.com/ngduc/vercel-express

Hello world v2

Duc Ng — Sun, 20 Sep 2020 20:31:40 +0000

We know that "Hello world" is the simplest code example to demonstrate how to output a simple message in a programming language.

This "version 2" aims to cover more basic syntax.

It is a One-Page Code Example of:

String handling, length, spliting, template string.
Characters, char codes handling.
Array, array items accessing, looping.
Number, casting, basic math calculation.
Function, returning a value.
JSON, parsing.
From: http://b.link/hello-world-v2 (please keep this link)

In different Programming Languages

Python 3.7+

Live example

Javascript - In Progress

Typescript - In Progress

(Please open a PR to add for other languages here)

Github link

https://github.com/ngduc/syntax.codes/blob/master/docs/articles/hello-world-v2.mdx

Please comment with any idea or feedback. Thanks.

Compare React Component Libraries in September 2020

Duc Ng — Wed, 09 Sep 2020 21:47:29 +0000

Compare React Component Libraries in September 2020

Recently, I need to evaluate many React Component Libraries so I tried them all, compared and took some notes about them in a table format. Hope you find it useful.

Please note that I didn't intend to cover all libraries, only the ones with latest techs like Typescript, latest changes, etc.

Features

	Chakra UI	Reakit	Semantic UI React	Material UI
Links	Github - Demo	Github - Link	Github - Demo	Github - Blog - Demo
Status	9k ★ since 06-2019	4.2k ★ since 01-2018	11.5k ★ since 10-2016	61k ★ since 08-2014
Components	~52	~22	~52	~55
Size	100 KB gz	20 KB gz	?	404 KB
Tree shaking	✔	✔	✔	✔
Typescript source	✔	✔	JS with d.ts	JS with d.ts
WAI-ARIA	✔ 1.1	✔ 1.1	Yes, partial	Yes, partial
Styles	Style props	React	LESS	JSS
Themes	styleConfig({...}), CSS-in-JS	Yes, reakit-system-bootstrap	LESS vars	"classes" prop
Dark Theme	✔	N/A	N/A	✔
Layout	Grid, Flex, Box	N/A	Container, Grid	Box, Container, Grid
Icons	✔	N/A	✔	✔
Popover	✔	✔	✔ Popper	✔ Popper
Table	N/A	N/A	✔	✔

Form

	Chakra	Reakit	Semantic UI React	Material UI
Form	uses Formik	reakit/Form	✔	✔ Formik works
Validation	Field validate prop	useFormState onValidate	react-hook-form	Formik validate
Field error style	✔	✔	Yes, error prop	✔

Modal

	Chakra	Reakit	Semantic UI React	Material UI
Syntax	Modal isOpen onClose	DialogBackdrop, Dialog	Modal open, Modal.Content	Modal, Dialog
Animating	✔ CSS?	✔ CSS	✔	✔
Nested	?	✔	?	✔

Mobile Browser

	Chakra	Reakit	Semantic UI React	Material UI
Touch / Tap	✔	✔	✔	✔
Smooth animation	✔	✔	✔	✔
Accordion	Works	N/A	Works	Works
Drawer / Sidebar	Works	N/A	Works	Works
Modal	Works	Works, body shifted	Works, partially cut off	Works
Modal scroll	Works	?	Works, partially cut off	Works
Popover	Works	Works	Works	Works
Table	?	?	Works	Works
Tooltip	Works	Works	Works	Works

Summary

	Chakra	Reakit	Semantic UI React	Material UI
Strengths	+ Many components	+ Small size	+ Many components	+ Many components
	+ Style props (inspired by Tailwinds)	+ Lower level components	+ Layouts	+ Works well on mobile
	+ Layouts			+ Layout
Need improvements		Need more components, layouts	Better demos for mobile

FAQ

Obviously not every library can be evaluated and added, but I also evaluated other libraries: Carbon (IBM), Rebass, Atlaskit, Fluent UI (Fabric, Microsoft), Lucid UI, Grommet, Spectrum, PatternFly, etc. They may get into this list later.

For the latest updates, please visit nnote.cc/s/0wihj.

Compare React Component Libraries in August 2020

Duc Ng — Thu, 06 Aug 2020 03:10:25 +0000

Recently, I need to evaluate many React Component Libraries so I tried them all, compared and took some notes about them in a table format. Hope you find it useful.

Please note that I didn't intend to cover all libraries, only the ones with latest techs like Typescript, latest changes, etc.

Features

	Chakra UI	Reakit	Semantic UI React
Links	Github - Demo	Github - Link	Github - Demo
Status	9k stars	4.2k stars	11.5k stars
Size	100 KB gz	20 KB gz	?
Typescript source	✔	✔	JS with d.ts
Tree shaking	✔	✔	✔
WAI-ARIA	✔ 1.1	✔ 1.1	Yes, partial
Styles	Style props	React	LESS
Themes	styleConfig({...}), CSS-in-JS	Yes, reakit-system-bootstrap	LESS vars
Dark Theme	✔	N/A	N/A
Layout	Grid, Flex, Box	N/A	Container, Grid
Icons	✔	N/A	✔
Table	N/A	N/A	✔
Popover	✔	✔	✔ Popper
Smart popover	✔	✔	✔
Table	N/A	N/A	✔

Form

	Chakra	Reakit	Semantic UI React
Form	uses Formik	Custom reakit/Form	Custom
Validation	Field validate prop	useFormState onValidate	react-hook-form
Field error style	✔	✔	Yes, error prop

Modal

	Chakra	Reakit	Semantic UI React
Syntax	Modal isOpen onClose	DialogBackdrop, Dialog	Modal open, Modal.Content
Animating	✔ CSS?	✔ CSS	✔
Nested	?	✔	?

Mobile Browser

	Chakra	Reakit	Semantic UI React
Touch / Tap	✔	✔	✔
Smooth animation	✔	✔	✔
Accordion	Works	N/A	Works
Drawer / Sidebar	Works	N/A	Works
Modal	Works	Works, body shifted	Works, partially cut off
Modal scroll	Works	?	Works, partially cut off
Popover	Works	Works	Works
Table	?	?	Works
Tooltip	Works	Works

Summary

	Chakra	Reakit	Semantic UI React
Strengths	+ Many components	+ Small size	+ Many components
	+ Style props (inspired by Tailwinds)	+ Lower level components	+ Layouts
	+ Layouts
Need improvements		Need more components, layouts	Better demos for mobile

FAQ

I also evaluated other libraries: Rebass, Material UI, Atlaskit, Fluent, Spectrum, PatternFly, etc. They may get into this list later.

Found a mistake? - Please feel free to create a ticket.

Want to suggest a UI Component Library? - If it's comparable with the above projects, please feel free to create a ticket.

For the latest updates, please visit syntax.wiki/articles/react-component-library-comparison.

How to add Authentication to your React app using AuthUI

Duc Ng — Sat, 27 Jun 2020 23:44:40 +0000

When starting a new project, it takes some effort to implement Login / Sign-up screens. We often have to repeat the same implementation again and again.

Authentication should be simple to remove friction to build an MVP (Most Viable Product) or get users started.
Authentication logic should be reused to save development time.

There are a few online services that let you integrate your application with their Authentication APIs. But it doesn't really save much time when we have to go through long documentation to understand it, then spend more time learning and integrating.

An Authentication Service should be simple to integrate with. Below is an example:

Step 1 - Import and use Login Component

$ npm install authui-ui

import LoginBox from "authui-ui/dist/js/components/LoginBox/LoginBox";

<LoginBox accountId="MyProductName" afterSubmit={afterSubmitHandler} />

LoginBox source code can also be customized and used directly.

Step 2 - Handle response

After user submitted the form (Sign up or Log in), the "afterSubmit" callback function will be called. Here you can handle the response (full User object) by redirecting user to the home page, dashboard, etc.

const afterSubmitHandler = (jwtData) => {
  if (jwtData && jwtData.email) {
    alert('jwtData: ' + JSON.stringify(jwtData))
  }
}

jwtData is the user object which has properties like: user uuid, accessToken, email, name, picUrl, etc. which can be used in the app (or store in localStorage).

That's it! There is no Step 3. In the next article, I will write more about how it works. In the meantime, there is more information in the links below:

AuthUI Repo - both UI and APIs are open source.
Live Example

If you are a maker or have a project that needs Authentication, give it a try. Please feel free to reach out (via Github) if you need help to integrate with it!

How to create an UI app using latest Rails + React + Typescript + Jest - June, 2020.

Duc Ng — Sat, 06 Jun 2020 02:44:13 +0000

This article will show you how to create an UI app using Rails + React + Typescript + Jest with the latest versions.

First, make sure you have these requirements installed:

ruby 2.7.0p0
gem 3.1.2
rails 6.0.3.1
node 13.x
yarn 1.22.0

Create your Rails application with React support:

$ rails new myapp --webpack=react
$ cd myapp

Add Typescript:
$ bundle exec rails webpacker:install:typescript

Add eslint which is a linting program to check for syntax errors in your typescript code:

$ yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-preact @types/webpack-env eslint-plugin-react -D
$ yarn add babel-plugin-transform-react-jsx

Add ".eslintrc" - a config file of eslint:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  settings: {
    react: {
      version: 'detect'
    }
  }
};

Now we have the base rails app with React & Typescript support. Next, create your first Rails Controller:

$ rails generate controller hello

Open "app/controllers/hello_controller.rb", update it:

class HelloController < ApplicationController
  def home
  end
end

Open "config/routes.rb", update it to point root URL to the new controller:

Rails.application.routes.draw do
  root to: 'hello#home'
end

We also need a "View" file to render the page:

Open "app/views/hello/home.html.erb", add:

<%= javascript_pack_tag 'hello_typescript' %>
<h1>Hello world!</h1>

Finally, you can create your first React component in Typescript: "app/javascript/packs/hello_typescript.tsx" (source link at the bottom)

It's time to add Jest so you can write some jest tests:

$ yarn add jest ts-jest @types/jest @testing-library/react @testing-library/jest-dom -D

In "package.json", add "jest" section point to "setupTests.ts" file to configure jest. Also add "script" section so we can run $ yarn lint and $yarn test:

"scripts": {
  "lint": "eslint app/javascript/**/*.ts[x]",
  "test": "jest"
}

Write your first test "hello.spec.tsx"

import * as React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import { Hello } from './hello_typescript';

it('Hello test', () => {
  const { container } = render(<Hello name="Jest" />);
  expect(container).toHaveTextContent('Hello Jest!');
});

That's it! Now you can enjoy your Rails app with the latest support from React, Typescript and Jest! It's time to run your app:

$ rails s --binding=127.0.0.1

I will write another article to show how to create and use a Rails API endpoint from a React component.