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…

How to deploy your own Express Node.js App from GitHub to Vercel

Image for post
Image for post

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

I assume you have some experience with Node.js, Express and have signed up for a free Vercel account.

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.

Github repository link:
- https://github.com/ngduc/vercel-express

First, clone the above repository to a local directory. Set up…


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 integration.

An Authentication Service should be simple…


Image for post
Image for post

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…


(’til you make it!)

Image for post
Image for post

Many times we just want to start developing a UI Prototype quickly without too many dependencies.

But the reality is, for a usable real-world component, we often need to fetch some data and have the UI handle it then render something.

Then we will either:
- Write some quick Backend code (with backend frameworks like express, koa, happy, etc.)
to have a couple of APIs, routes to return some dummy data or data from a database.
- Research and utilize a fake API service from the internet.

For Option 1 — write our own Backend. We have to spend a…


Image for post
Image for post
Create your own command line

This post will show you how to create a command-line npm module (CLI) using Commander.js module.

Commander.js is a very popular module that lets you create your own CLI program.

First, start your new project — let’s say my project name is “json-now”

$ git clone https://github.com/yourname/json-now.git
$ cd json-now

Now, create your package.json file:

{
"name": "json-now",
"version": "0.0.1",
"bin": {
"json-now": "./bin/index.js"
},
"dependencies": {
"commander": "^3.0.1"
}
}

Then, install dependencies:

$ npm install

The “bin” section specifies your command line name. As you see, go ahead and create a “bin” directory with “index.js” file there:

#!/usr/bin/env…


A simple way to work with Forms in React. This is my attempt to address complicate form rendering:

<FormContainer onSubmit={this.onSubmit} render={props => (
<Form use="bootstrap4">
<Field label="Text" name="text" />
<Field name="password" />
<Field textarea name="textarea" />
<Field select options={animals} name="select" />
<Field radios options={genders} name="radio" />
<Field checkboxes options={roles} name="checkboxes" />
<Field number name="number" />
<Field date name="date" />
<Field time name="time" />
<Field toggle inline name="toggle" />
<Field file label="File Upload" name="file1" />
<Field file withPreview label="File Upload (with Preview)" name="file2" />
<Field range name="range" />

<Button type="submit"/>
<Button>Cancel</Button>
</Form>
)} />

Result: (Full form, validation (with yup) & error messages)

Image for post
Image for post

Demo
Github

I appreciate any feedbacks, suggestions or ideas below. Thanks! :)


React is great. I get it, it lets us create Components like a snap. But sometimes, especially for some old-timers like me who used to work with pure Javascript and HTML tags in the past, I feel that nowadays, there is more work to wire things together to have a simple thing working as expected like before.

For example, to create a simple form, we can just quickly code like this:

<form>
<span>Email</span><input id=“email” />
<button type=“submit”>Submit</button>
</form>

Then came XHTML validation and new requirements (add a dropdown & form validation), I have learned to create a “proper” form with…


Image for post
Image for post

As usual, there are so many choices when it comes to pick a React Component, in this case, a Grid Component. This post is an attempt to compare those choices.

Below is a list of popular grid components:

- react-virtualized grid (bvaughn) — MIT [Demo](https://bvaughn.github.io/react-virtualized/#/components/Grid)

- react-tools/react-table — MIT [Demo](https://react-table.js.org/#/story/readme)

- react-data-grid (adazzle) — MIT [Demo](http://adazzle.github.io/react-data-grid/#/examples/all-features)

- react-bootstrap-table2 — MIT [Demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html)

- olifolkerd/tabulator (react version: [react-tabulator](https://github.com/ngduc/react-tabulator)) — MIT [Demo](http://tabulator.info/examples/4.0)

They are really high quality and popular components. So most common use cases are supported. …


One of the key metrics when writing code is speed. But there is no convenient way to measure the speed of your code efficiently so far. Chrome and other browsers do have APIs (new Date(), performance.now(), console.time) that let you put them around your code, then you will do a simple calculation to find out the diff, like: t2 - t1

Another Approach

That works for an instant need when you want to know how much time a block of code executes. However, when you want to do more, you will have to write some util functions or library.

Performance.now() is a…

Duc N.

Full-stack Web/Mobile JS Dev.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store