References

Part 1: JavaScript Foundation

phatnguyenuit / how-to-compose-react-providers-with-typescript.md

Last active February 17, 2025 20:19

How to compose React Providers with TypeScript

Photo by Sergei A on Unsplash

Hi guys 😁! Long time no new articles!

Today, I am going to show you how to compose React providers with TypeScript.

phatnguyenuit / subscriptions.html

Last active September 23, 2023 11:24

Flexbox - Sample UI for displaying cards which have the same size even though it is wrapped due to breakpoints.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Subscriptions</title>
	<style>
	.subscriptions {
	width: 100%;

phatnguyenuit / env.d.ts

Created September 13, 2023 13:50

Using global utility for Jest pattern

phatnguyenuit / Roadmap.md

Last active July 11, 2023 13:28

Web Designer roadmap

phatnguyenuit / webpack.config.js

Created October 19, 2022 15:20

Sample webpack.config.js

	const path = require('path');
	const webpack = require('webpack');

	/** @type {webpack.Configuration} */
	const developmentConfiguration = {
	mode: 'development',
	target: 'node',
	entry: path.resolve(__dirname, './index.js'),
	output: {
	path: path.resolve(__dirname, 'dist', 'development'),

phatnguyenuit / is-valid-num.js

Created July 20, 2022 14:50

	/*
	A valid number can be split up into these components (in order):

	- A decimal number or an integer.
	- (Optional) An 'e' or 'E', followed by an integer.

	=> A decimal number can be split up into these components (in order):

	-> (Optional) A sign character (either '+' or '-').
	-> One of the following formats:

phatnguyenuit / .eslintrc.js

Last active May 2, 2022 13:51

How to sort imports like a pro in TypeScript | .eslintrc.js | import resolver settings

	module.exports = {
	// Extends the previous ESLint configuration by adding `settings`
	// <--! Previous configuration comes here !-->
	settings: {
	'import/resolver': {
	typescript: {
	project: './tsconfig.json',
	},
	},
	},

phatnguyenuit / .eslintrc.js

Created May 2, 2022 13:49

How to sort imports like a pro in TypeScript | .eslintrc.js | import rules

	module.exports = {
	// <--! Previous configuration comes here !-->

	plugins: ['@typescript-eslint', 'prettier', 'import'], // Add "import" plugin
	extends: [
	'eslint:recommended',
	'plugin:@typescript-eslint/recommended',
	'plugin:prettier/recommended',

	// Extends two more configuration from "import" plugin

phatnguyenuit / .eslintrc.js

Created May 2, 2022 13:46

How to sort imports like a pro in TypeScript | .eslintrc.js | sort-import rules

	module.exports = {
	// Extends the previous ESLint configuration by adding rules
	// <--! Previous configuration comes here !-->
	rules: {
	'sort-imports': [
	'error',
	{
	ignoreCase: false,
	ignoreDeclarationSort: true, // don"t want to sort import lines, use eslint-plugin-import instead
	ignoreMemberSort: false,