DEV Community: official_dulin

Why Material UI table component prop can violates w3c html element nesting rules?

official_dulin — Tue, 06 Aug 2024 08:01:41 +0000

The <Table/> component has a component prop:

The component used for the root node. Either a string to use a HTML element or a component.

I set the component prop to 'p' element for <Table/> and <TableHead />, the table can render as normal.

But, this will violates w3c html element nesting rules. See 9.3.1 Paragraphs: the P element

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

So, I'm worried that this will cause some potential problems. Can you explain is this safe to use?

export default function CustomizedTables() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 700 }} aria-label="customized table" component='p'>
        <TableHead component='p'>
          <TableRow>
            <StyledTableCell>Dessert (100g serving)</StyledTableCell>
            <StyledTableCell align="right">Calories</StyledTableCell>
            <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
            <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
            <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <StyledTableRow key={row.name}>
              <StyledTableCell component="th" scope="row">
                {row.name}
              </StyledTableCell>
              <StyledTableCell align="right">{row.calories}</StyledTableCell>
              <StyledTableCell align="right">{row.fat}</StyledTableCell>
              <StyledTableCell align="right">{row.carbs}</StyledTableCell>
              <StyledTableCell align="right">{row.protein}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Inspect the HTML elements:

stackblitz demo

Is there any way to monitor micro task and macro task queue?

official_dulin — Wed, 16 Aug 2023 04:35:26 +0000

I am looking for a way to monitor/visualize the JavaScript micro task and macro task queue like this view in the answer

The microtask created by queueMicrotask API or Promise.

The macro task created by setTimeout().

Is there any way?

Pick and large interface V.S. small interface. Which one is better?

official_dulin — Tue, 29 Nov 2022 03:08:35 +0000

When I use the option 1 to make my business types(T0, T1, etc...), I found I repeated Pick<ChannelBaseInfo1, 'channelCode'> too many. So maybe option 2 is better? Please give me some suggestion. Thanks.

// Option 1. 
type ChannelBaseInfo1 = {
  channelCode: string;
  channelName: string;
}

// Use Pick utility type
type T0 = Pick<ChannelBaseInfo1, 'channelCode'> & {
  t0: string;
}

type T1 = ChannelBaseInfo1 & {
  t50: string;
}

type T2 = Partial<Pick<ChannelBaseInfo1, 'channelCode'>> & {
  t2: any;
}

// a lots of types using ChannelBaseInfo1 or Pick<ChannelBaseInfo1, 'channelCode'>
// ...
type T100 = Pick<ChannelBaseInfo1, 'channelName'> & {
  t100: string;
}

// Option 2.
type ChannelCode = {
  channelCode: string;
}
type ChannelName = {
  channelName: string;
}
type ChannelBaseInfo2 = ChannelCode & ChannelName;

type T101 = ChannelCode & {
  t101: string;
}

type T102 = ChannelBaseInfo2 & {
  t102: string;
}
type T103 = Partial<ChannelCode> & {
  t103: string;
}
// a lots of types using ChannelBaseInfo2, ChannelCode and ChannelName
// ...
type T200 = ChannelName & {
  t200: string;
}

TypeScript Playground

Should the useState hook verify that the lazy initial state function must be synchronous

official_dulin — Thu, 13 Oct 2022 08:06:14 +0000

By now, you can pass asynchronous function to the ReactJS useState hook to lazy initialize the state. But this seems not correct, the state will be a JavaScript promise.

const [state] = useState(async () => 'a');
console.log(state); // "state" is a promise.

So I think ReactJS useState hook should validate this function to make sure it is synchronous.

Something like this:

const syncCallback = () => 'a';
const asyncCallback = async () => 'b';

const AsyncFunction = (async () => { }).constructor;

function isAsync(fn: Function) {
  return fn instanceof AsyncFunction;
}

function useState<S>(initialState: S | (() => S)) {
  if (typeof initialState === 'function' && isAsync(initialState)) throw new Error('initial state function must be synchronous.')
  if (initialState instanceof Function) {
    return initialState();
  }
  return initialState
}

const state1 = useState(syncCallback); // correct usage
console.log('state1: ', state1); 
const state2 = useState(asyncCallback); // Only allow synchronous function, so it will throw error to developer.

TypeScript Playground

What do you think?

Is it a bad design to remove the setState callback?

official_dulin — Thu, 04 Aug 2022 07:54:00 +0000

When we use React class component, there is a instance method setState(updater[, callback])

setState callback which is guaranteed to fire after the update has been applied.

However, when we use the setState method returned by useState() hook, it has no callback anymore.

Let's compare setState(updater[, callback]) and the setState returns by useState() hook.

// We can see all the logic at a glance
const onIncreaseButtonClick = () => {
  // step 1. Updating the state
  const nextState = {};
  this.setState(nextState, () => {
    // step 2. call API
  });
}
//...

const [state, setState] = useState();
useEffect(() => {
  // step 2. call API
}, [state]);

// We need to scroll the editor to the top to see the second part of the logic
// 200 lines code
// ...
// ...

const onIncreaseButtonClick = () => {
  // step 1. Updating the state
  const nextState = {};
  setState(nextState);
}

Do you see the difference?

When the button click event occurs, we have two parts of logic: update state and call API.

In the former case, the two parts of the logic code are organized together, and the execution order and code writing order are the same.

In the latter case, the two parts of the logic are split in different places, the logic for updating the state is in the event handler and the logic for the call API is placed in useEffect(). And the order of execution and the order of reading (writing) is not the same.

Some people have the same view as me, such as https://stackoverflow.com/questions/54954091/how-to-use-callback-with-usestate-hook-in-react

That's why someone implements a useStateCallback hook.

What do you think?

Use TypeScript interface extends and type composition semantically

official_dulin — Wed, 06 Jul 2022 06:55:49 +0000

Consider below example, you have an API which accepts three parameters: current, pageSize and channelCode.

interface Pagination {
  current: number;
  pageSize: number;
} 
interface GetUsersByPageRequestDTO {
  channelCode?: string;
}

Now you have two choice to pack these parameters.

Option 1:

interface GetUsersByPageRequestDTO extends Pagination {
  channelCode?: string;
}

Option 2:

type GetUsersByPageRequestDTO = {
  channelCode?: string;
} & Pagination;

Which one will you choose? Inheritance or composition?

For me, I will choose option 2, use intersection type(type composition). Because using inheritance requires semantic correctness. Which means the two need to have is-a relationship. E.g. Bear is an animal. So bear interface can extend animal interface.

Apparently, GetUsersByPageRequestDTO is NOT a Pagination.

So we know the difference between interface and type, but we also have to pay attention to the semantic correctness, not only to get the final correct shape, right?

How to prevent other team member installing new npm package?

official_dulin — Fri, 24 Jun 2022 11:02:47 +0000

Requirements:

Only the project owner can install new npm package.
npm install should work for local development and CI/CD pipeline.
When other team member run npm install <PackageName> command, it should print an error message like: "Installing new npm package is prevent, please contact the project owner."

Motivation: I don't want other team member install package at will. I want to limit this behavior through code or script.

This is an optional-based question, Thanks for any advice.

Should event handlers be named using business actions or UI events?

official_dulin — Fri, 04 Mar 2022 06:55:31 +0000

This problem is not specific to a framework, But I demonstrate questions in React.

Example 1. Suppose the following is a user registration page component

const Register = () => {
  // business actions
  const onUserRegistered = () => {
    userService.register();
  };
  // Element event
  const onUserRegisteredFormSubmit = () => {
    userService.register();
  };

  return (
    <form onSubmit={onUserRegistered}>
      <button type="submit">Register</button>
    </form>
  );
};

Example 2. Suppose the following is a product create page component.

const NewProduct = () => {
  // business actions
  const onProductCreated = () => {
    productService.create();
  };
  // Element event
  const onProductCreateButtonClick = () => {
    productService.create();
  };
  return (
    <>
      <button type="button" onClick={onProductCreated}>
        Create
      </button>
    </>
  );
};

As you can see, I am hesitant to use business actions, or elements events to name event handlers. I prefer element events to name the event handler because this is the presentation layer, the presentation layer should not care about business actions. The service layer contains business actions. Please advice.

Business action name composed by: on + BusinessAction

UI event name composed by: on + WhichElement + Event

How would you name the TS interface like this(TS types naming convention)?

official_dulin — Wed, 23 Feb 2022 07:05:54 +0000

For the API /v1/users, the data shape of the user is:

{
  id: 1,
  name: 'teresa teng'
}

For the API /v1/user/:id, the data shape of the user has some extra fields:

{
  id: 1,
  name: 'teresa teng',
  role: 'admin',
  email: '[email protected]'
}

I'm looking for good names for the interfaces. The names I've used are:

Option 1:

interface BaseUserEntity {
  id: number;
  name: string; 
}
interface UserEntity extends BaseUserEntity {
  role: string;
  email: string;
}

I don't really like Base prefix for the interface name.

Option 2:

interface UserEntity {
  id: number;
  name: string; 
}
interface UserDetailEntity extends UserEntity {
  role: string;
  email: string;
}

I think User and UserDetail are the same thing, introducing excess words - Detail. Do you have any suggestions for the naming convension? Thanks.

When I create a post, how to automatically complete the tag metadata?

official_dulin — Sat, 18 Sep 2021 06:15:07 +0000

The current situation is that I don't know what tags are available at all unless I check from tags. I don't know the exact name of the tag available either. For example, the tag about JavaScript is js or javascript? The tag about Go is go or golang?

Or, the tag can be anything? Will dev.to create the new tag automatically?

Is there any way to automatically complete the available tags?

React & Redux Application Architecture

official_dulin — Thu, 05 Aug 2021 08:37:14 +0000

Architecture based on React Hooks and React FC design:

View layer

React functional component to build the view, containing :

ReactElement, the JSX view element
Event handling functions for the view, such as onClick, etc.
Use the hooks provided by the controller layer to get the View Model

The view logic using the internal state of the component is encapsulated by a custom hook that exports the state and the functions to manipulate the state, and the event handling functions directly call the custom hook exported functions to change the state of the view.

Controller layer

Mainly using React hooks to implement, including

Business custom hooks
UI custom hooks

UI custom hooks encapsulate the internal state of the component (defined by useState) and its change operations, the internal state of the component may depend on the component's props calculated by logic, all encapsulated in hooks, this piece of code logic should not be placed in the component.

Business custom hooks encapsulate data and its operations related to business logic, data sources include backend service API call returns, web storage, cookies, constants, URL query parameter, etc. Need to persist data to the redux store data acquisition method using dispatch + redux-thunk created asynchronous action creator (redux-saga, etc.), considering that some views are very independent and do not need to persist API data to the redux store, you can omit dispatch + async action creator, directly call the front-end fetch wrapped API service directly to call the backend service API.
The data generated by user-view interaction may be persisted in the redux store, typically data such as filter conditions, obtained through useSelector+selector, with this redux state corresponding redux action operations are also encapsulated in the hook, through useDispatch+action creator for operations.

Data Access layer

Contains.

Selector created by Reselect library, used to read data from redux store and calculate derived data
Redux thunk (redux-saga) and other middleware created by thunk or saga, used for asynchronous process control, action meta data processing, call front-end API service, incoming verification and processing, to ensure that the parameters passed to the API service method is correct.

Use the createSelector method provided by the reselect library to create a selector as a method to access the redux store. selector can be used either by useSelector or in redux-thunk by xxxSelector(getState(). which is used to get a certain state slice on the redux store.
Another purpose of selector is to provide optimization for computing derived data. selector can compute derived data based on the component's props and state, Accessing React Props in Selectors, which can calculate derived data based on dynamic or non-dynamic arguments How do I create a selector that takes an argument?, the selector provides a memozie function that returns the result of the last calculation (equal references, equal values) with the same input, in conjunction with React.memo, useEffect's dependency list skips the effect and uses useMemo. If the dependency list uses the derived data returned by the selector, the memorized result can be created while the reference and value of the returned result remain unchanged, avoiding the component to render re-executes expensive logic, completes the rendering optimization of the component, and reduces unnecessary re-render.

Translated with www.DeepL.com/Translator (free version)

Service layer

A relatively broad category containing helper, utils, third-party libraries, generic custom hooks, third-party hooks, etc. dedicated to a specific task.
The main function is to interface to external data sources, backend API service, third-party APIs, websockets, etc. The communication protocol is mainly HTTP protocal, and the preprocessing of requests is done through interceptors. Pre-processing of requests, pre-processing of responses and error handling. No matter what external data source interface is called, the data structure of the output of the front-end API service should be fixed by a unified standard (pre-defined interface), for example, the output object contains three fields: {error: null, result: null, message: null}.
helper, utils store generic methods, do not care about and should not contain business logic, not to repeat.
The API service methods can be called in the controller layer hooks or in the async action creator created by redux thunk, not directly in the component view layer.

Data Persistence layer

The data stored in the Redux store is not considered persistent in the strict sense, as it is stored in the application memory and belongs to Memory DB, the life cycle is the life cycle of the application, the application is initialized (refresh the browser, start, restart the service), then the previously stored data is lost. Depending on the requirements decide whether to use libraries such as redux-presist to persist the data in Redux store to Web Storage.

The main types of data stored are as follows.

Business data from external data sources
Data generated by user interaction with the View layer, such as forms, filter conditions, etc.
Data from Web Storage and cookies to initialize the redux store, depending on the requirements

Other data sources that the application depends on: Web Storage, cookies, URL query parameter, application-defined constants, etc. for the browser environment.

The specific architecture is adjusted according to the requirements, and the separation of concerns is achieved through layering, partitioning, etc. Combined with componentization, modularization, high cohesion, low coupling, TDD to improve the quality of front-end code, improve readability, maintainability, scalability, reusability.

Additional: components are divided into display components and container components, and container components can be subdivided into page level, component level, and according to the scope of the role can also be divided into page level, component level, it is customary to create hooks.ts in the directory where the component files are located to store the custom hooks needed for that level of components. The larger the scope, the more generic the hooks are, and the closer the files are to the root directory.

Translated with www.DeepL.com/Translator (free version)

Original article link: https://github.com/mrdulin/blog/issues/95

New Button for dev.to, mark article read.

official_dulin — Thu, 22 Apr 2021 10:44:45 +0000

A tampermonkey script for marking article read on dev.to. Use IndexedDB to store your read list in your browser. So make sure your browser supports the IndexedDB feature.

Q：Why I want to write this script？

A: I often read articles on dev.to site, dev.to provides three buttons, namely like, unicorn and readinglist. But I want a button to indicate whether the current article has been read, similar to the read function of mailing lists and RSS.

There are some articles that I don't like, unicorn, and don't want to add them to my readinglist. These articles are not useful to me. I want to know if I had read them, That's why I made this button. Just mark this kind of article as read.

Another reason is https://dev.to/mrdulin/why-are-there-duplicate-subscription-emails-sent-to-me-461n

My mail subscription list will be repeated. Even though the subject of some mails is different, the articles pushed are the same, which makes me very inefficient. With this button, I open the article link and see if it has been read. If it's read, directly command + w to close the browser tab

The article you have not read.

The article you marked as read.

You can export and save the read list to your local file, GitHub Gist, etc...

Install this script from here: https://greasyfork.org/en/scripts/425384-mark-post-read-on-dev-to

Source code: https://github.com/mrdulin/dl-toolkits/blob/master/scripts/mark-post-read-on-devto.js