Skip to content

Instantly share code, notes, and snippets.

View phatnguyenuit's full-sized avatar
💪
Working on ReactJS and TypeScript.

Phát Nguyễn (Fast) phatnguyenuit

💪
Working on ReactJS and TypeScript.
76 followers · 42 following
View GitHub Profile
@phatnguyenuit
phatnguyenuit / how-to-compose-react-providers-with-typescript.md
Last active May 4, 2024 12:21
How to compose React Providers with TypeScript

How to compose React Providers with TypeScript

Tree and sunset

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
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
phatnguyenuit / env.d.ts
Created September 13, 2023 13:50
Using global utility for Jest pattern
declare global {
namespace NodeJS {
interface Global {
yourUtility(...args: any[]): void;
}
}
}
@phatnguyenuit
phatnguyenuit / Roadmap.md
Last active July 11, 2023 13:28
Web Designer roadmap
@phatnguyenuit
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
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
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
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
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,
@phatnguyenuit
phatnguyenuit / .eslintrc.js
Created May 2, 2022 13:43
How to sort imports like a pro in TypeScript | .eslintrc.js | base ESLint
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
env: {
node: true,
},
plugins: ['@typescript-eslint', 'prettier'],