typescript
types
css
svg
class-naming
function
attr
pseudo-element
layout
grid
column
inheritation
reset
number
variable
list-style
gradient
screen-width
flex
image
onerror
http
CORS
tools
frontend
python
pip
mirrors
virtual-environment
django
settings
templates
url
linux
shell
models
DB
auth
node
git
views
functional
admin
javascript
react
mui
proxy
ignore
db
images
statics
signup
forms
yarn
npm
programming
functions
generator
classes
interfaces
conditional
todo
async
orm
api
namespaces
modules
styles
css-in-js
css-modules
svgs
tailwind
router
rest
state
redux
react-query
tests
react-testing-library
jest
errors
hooks
class-based
django-crispy-forms
envs
medias
ruby
github
wechat
events
mini-program
- typescript
- Make unknown type data strongly typed using type assertion function
- Create a typescript project with create-react-app
- use semicolon to separate Properties of object type definitions in Typescript
- Babel REPL is an online tool to explore JSX
- DefinitelyTyped maintains module type declaration for open source projects
- Use CommonJS and AMD code in Typescript
- Type declarations with extension .d.ts in Typescript
- Safely use dynamic imports in Typescript
- Prefer modules over namespaces when possible in Typescript
- Module mode vs script mode in Typescript
- Gradually migrating from Javascript to Typescript
- Add static function to Enum using namespace in Typescript
- Type safe Event Emitter interface using mapped type in Typescript
- Promise interface in Typescript
- TypeORM is an ORM for Typescript
- Use web workers to do multi-threading in the browser
- Type cast or type assertion using as keyword in Typescript
- Some built-in conditional types in Typescript
- Simulate nominal types in Typescript
- Safely extend the prototype in Typescript
- Non-null assertion in Typescript
- Handle errors with Option type in Typescript
- Flatten an array of arrays into an array in Typescript
- Definite assignment assertions in Typescript
- Typescript uses infer keyword to declare generic types inline for conditional types
- Distributive conditional types in Typescript
- Create user-defined type guard with is operator and carry type refinement over to new scopes
- Create conditional types in Typescript
- Create a tuple constructor function in Typescript
- Use Record type to create a map that enforces a specific set of keys in Typescript
- Use Mapped types to create super index signatures in Typescript
- Typescript has separate namespaces for values and for types and the companion object pattern
- Excess property checking for fresh object literal type when assign to another type
- Type widening in Typescript
- Prevent type widening in Typescript
- Simulate final classes that are non-extensible in Typescript
- Implement a factory pattern in Typescript
- Implement a builder pattern in Typescript
- Interfaces and type aliases are mostly two syntaxes for the same thing in Typescript
- Implementing interfaces versus extending abstract classes in Typescript
- Implement mixin in Typescript
- Implement interface using implements keyword in Typescript
- Differences between type aliases and interfaces in Typescript
- Classes declare both values and types in Typescript
- Classes are structurally typed Typescript compares classes by their struct not by name
- Class constructor type in Typescript
- super keyword in Typescript class
- public protected private access modifier in the class constructor automatically assigns the parameter to this in Typescript
- Use this as a return type in Typescript
- Generic type defaults in Typescript
- Generic type aliases in Typescript
- Define an abstract class in Typescript
- Add bound to generic type using extends in Typescript
- The scope of function type generic parameter in Typescript
- Overloaded function type in Typescript
- Define function type with generic type parameter in Typescript
- Rest parameters of functions in Typescript
- Optional and default parameters in Typescript
- Invoke functions with call apply bind in Typescript
- Generator functions in Typescript
- Function type or function call signature in Typescript
- Contextual typing in Typescript
- Avoid using enum in Typescript
- Annotate the type for function this parameter in Typescript
- Always explicitly annotate function parameters and annotate return type when needed in Typescript
- Type tuple in Typescript
- Type null undefined void and never in Typescript
- Type union and intersection in Typescript
- Type symbol in Typescript
- Type number and bigint in Typescript
- Type array in Typescript
- Type aliases in Typescript
- Objects types in Typescript
- Typescript online playground
- Type unknown in Typescript
- Type literal in Typescript
- Type any in Typescript
- Create a Typescript project from scratch
- Annotated types and inferred types in Typescript
- Steps of typescript compiler TSC compiles TS to JS
- Type operators for Object types in Typescript
- types
- Types for forwardRef in React
- type for useRef Hook in React
- Use EventHander functions from React types to provide type for event handler as defining useCallback
- Types of DOM events in React
- Types for class components in React
- Type of style props in React
- Type of state setter function returned by useState in React
- Type of component children in React
- The return type of custom hooks as tuple instead of an array in React
- Collect HTML element all props with type ComponentPropsWithoutRef and use prop spreading in React
- Make unknown type data strongly typed using type assertion function
- use semicolon to separate Properties of object type definitions in Typescript
- DefinitelyTyped maintains module type declaration for open source projects
- Type declarations with extension .d.ts in Typescript
- Type cast or type assertion using as keyword in Typescript
- Some built-in conditional types in Typescript
- Simulate nominal types in Typescript
- Safely extend the prototype in Typescript
- Non-null assertion in Typescript
- Handle errors with Option type in Typescript
- Flatten an array of arrays into an array in Typescript
- Definite assignment assertions in Typescript
- Typescript uses infer keyword to declare generic types inline for conditional types
- Distributive conditional types in Typescript
- Create user-defined type guard with is operator and carry type refinement over to new scopes
- Create conditional types in Typescript
- Create a tuple constructor function in Typescript
- Use Record type to create a map that enforces a specific set of keys in Typescript
- Use Mapped types to create super index signatures in Typescript
- Typescript has separate namespaces for values and for types and the companion object pattern
- Excess property checking for fresh object literal type when assign to another type
- Type widening in Typescript
- Prevent type widening in Typescript
- Interfaces and type aliases are mostly two syntaxes for the same thing in Typescript
- Implementing interfaces versus extending abstract classes in Typescript
- Implement interface using implements keyword in Typescript
- Differences between type aliases and interfaces in Typescript
- Class constructor type in Typescript
- Use this as a return type in Typescript
- Generic type defaults in Typescript
- Generic type aliases in Typescript
- Add bound to generic type using extends in Typescript
- The scope of function type generic parameter in Typescript
- Overloaded function type in Typescript
- Define function type with generic type parameter in Typescript
- Function type or function call signature in Typescript
- Contextual typing in Typescript
- Avoid using enum in Typescript
- Type tuple in Typescript
- Type null undefined void and never in Typescript
- Type union and intersection in Typescript
- Type symbol in Typescript
- Type number and bigint in Typescript
- Type array in Typescript
- Type aliases in Typescript
- Objects types in Typescript
- Type unknown in Typescript
- Type literal in Typescript
- Type any in Typescript
- Annotated types and inferred types in Typescript
- Type operators for Object types in Typescript
- css
- Use plain CSS to style React frontend apps
- Use Tailwind CSS to style React frontend apps
- Style numbers in input fields
- Hide image when URL is broken with onerror
- Flex layout main axis and secondary axis alignment
- Design CSS for narrow screen first
- Create polka dot background via radial-gradient
- Create CSS list style with counter style by @counter-style
- Create CSS custom properties or CSS variables
- Control the number font style with CSS property font-variant-numeric
- CSS reset files
- CSS properties that are not inherited by children
- CSS multiple column layout
- CSS grid layout with grip-template-areas
- CSS gets element's attribute value via attr function, display HTML attributes via CSS using pseudo elements
- CSS architecture and BEM CSS Class naming
- CSS SVG frame and viewBox size
- svg
- CSS SVG frame and viewBox size
- class-naming
- CSS architecture and BEM CSS Class naming
- function
- CSS gets element's attribute value via attr function, display HTML attributes via CSS using pseudo elements
- attr
- CSS gets element's attribute value via attr function, display HTML attributes via CSS using pseudo elements
- pseudo-element
- CSS gets element's attribute value via attr function, display HTML attributes via CSS using pseudo elements
- layout
- Flex layout main axis and secondary axis alignment
- CSS multiple column layout
- CSS grid layout with grip-template-areas
- grid
- CSS grid layout with grip-template-areas
- column
- CSS multiple column layout
- inheritation
- CSS properties that are not inherited by children
- reset
- CSS reset files
- number
- Style numbers in input fields
- Control the number font style with CSS property font-variant-numeric
- variable
- Create CSS custom properties or CSS variables
- list-style
- Create CSS list style with counter style by @counter-style
- gradient
- Create polka dot background via radial-gradient
- screen-width
- Design CSS for narrow screen first
- flex
- Flex layout main axis and secondary axis alignment
- image
- Hide image when URL is broken with onerror
- onerror
- Hide image when URL is broken with onerror
- http
- What Counts as Cross-Origin with CORS
- CORS
- What Counts as Cross-Origin with CORS
- tools
- Google PageSpeed Insights for measuring page load time
- Typescript online playground
- miniPaint an Online image editor
- Online SQLite viewer from inloop
- Setup Mui on Codesandbox.io
- Manage node versions with nvm
- Manage python versions and virtual environments with pyenv and pyenv-virtualenv
- Copepen.io for pure front-end stack playground
- Codesandbox.io for front-end framework playground
- frontend
- Google PageSpeed Insights for measuring page load time
- Setup Mui on Codesandbox.io
- Copepen.io for pure front-end stack playground
- Codesandbox.io for front-end framework playground
- python
- default, auto_now, auto_now_add in Django DateTimeField
- Define model field choices with enumeration class such as TextChoices and IntegerChoices in Django
- Define default sort order and database index in Django
- Useful third party packages for Django
- Serve static files for production with WhiteNoise in Django
- Generate Django secret key using python secrets module
- Create search results page with ListView and get_queryset in Django
- Restrict access only to logged-in users with LoginRequiredMixin in a class based view in Django
- Create custom permission in model inner Meta class in Django
- Primary Keys, IDs, Slugs, UUIDs of model object in Django
- File and image uploads as media files in Django
- Create model with foreign key in Django
- Create a class based list view with ListView in Django
- Create a class based detail view with DetailView in Django
- Use environs package in Django
- Customize emails for django-allauth in Django
- Use crispy forms in Django
- Create email login authentication with django-allauth in Django
- Collect static files for production serving in Django
- set the login redirect URL in Django
- Create a class based sign up view with CreateView in Django
- Create a class based template view with TemplateView in Django
- Basic Django project tests
- Create custom user model in Django
- Djano deployment PaaS such as Heroku, PythonAnywhere Dokku
- Implement login required authentication for function views
- Implement CRUD with function views and ModelForm
- Create django form from model
- Show wether a user is logged in
- Implement the login feature
- Implement a logout feature
- Implement a basic sign up feature
- Customize fields of UserCreationForm
- Overwrite a folder in Python
- Serve static files
- Implement object detail page with function view
- Display object information in django admin
- Define app URLs under their own path
- Create links in template with URL path name
- Create and use Django base templates
- Sever media files uploaded by a user during development
- Register a model to django admin
- Implement search or filter feature with a functional view
- Implement object listing feature with a functional view
- Why we have to place template files under a sub-folder which is named after app name
- Create a superuser account for a Django project
- Create a Model in Django app and manage migrations
- Install Django and start a new project
- Django project structure and folder contents
- Define an URL and link it to a function view
- Create an app in a Django project
- Connect Django view to Django template
- Basic settings of Django project
- Manage python versions and virtual environments with pyenv and pyenv-virtualenv
- Config Python PyPi mirrors
- pip
- Config Python PyPi mirrors
- mirrors
- Config mirror for ruby gems
- Config Python PyPi mirrors
- virtual-environment
- Manage python versions and virtual environments with pyenv and pyenv-virtualenv
- django
- default, auto_now, auto_now_add in Django DateTimeField
- Define model field choices with enumeration class such as TextChoices and IntegerChoices in Django
- Define default sort order and database index in Django
- Useful third party packages for Django
- Serve static files for production with WhiteNoise in Django
- Generate Django secret key using python secrets module
- Create search results page with ListView and get_queryset in Django
- Restrict access only to logged-in users with LoginRequiredMixin in a class based view in Django
- Create custom permission in model inner Meta class in Django
- Primary Keys, IDs, Slugs, UUIDs of model object in Django
- File and image uploads as media files in Django
- Create model with foreign key in Django
- Create a class based list view with ListView in Django
- Create a class based detail view with DetailView in Django
- Use environs package in Django
- Customize emails for django-allauth in Django
- Use crispy forms in Django
- Create email login authentication with django-allauth in Django
- Collect static files for production serving in Django
- set the login redirect URL in Django
- Create a class based sign up view with CreateView in Django
- Create a class based template view with TemplateView in Django
- Basic Django project tests
- Create custom user model in Django
- Djano deployment PaaS such as Heroku, PythonAnywhere Dokku
- Implement login required authentication for function views
- Implement CRUD with function views and ModelForm
- Create django form from model
- Show wether a user is logged in
- Implement the login feature
- Implement a logout feature
- Implement a basic sign up feature
- Customize fields of UserCreationForm
- Serve static files
- Implement object detail page with function view
- Display object information in django admin
- Define app URLs under their own path
- Create links in template with URL path name
- Create and use Django base templates
- Sever media files uploaded by a user during development
- Register a model to django admin
- Implement search or filter feature with a functional view
- Implement object listing feature with a functional view
- Why we have to place template files under a sub-folder which is named after app name
- Create a superuser account for a Django project
- Create a Model in Django app and manage migrations
- Install Django and start a new project
- Django project structure and folder contents
- Define an URL and link it to a function view
- Create an app in a Django project
- Connect Django view to Django template
- Basic settings of Django project
- settings
- Basic settings of Django project
- templates
- Create links in template with URL path name
- Create and use Django base templates
- Implement search or filter feature with a functional view
- Implement object listing feature with a functional view
- Why we have to place template files under a sub-folder which is named after app name
- Connect Django view to Django template
- url
- Define app URLs under their own path
- Create links in template with URL path name
- Define an URL and link it to a function view
- linux
- Sort and remove duplicate lines from a text file
- How to view directory tree structure in Linux
- shell
- Sort and remove duplicate lines from a text file
- Overwrite a folder in Python
- How to view directory tree structure in Linux
- models
- default, auto_now, auto_now_add in Django DateTimeField
- Define model field choices with enumeration class such as TextChoices and IntegerChoices in Django
- Define default sort order and database index in Django
- Primary Keys, IDs, Slugs, UUIDs of model object in Django
- Create model with foreign key in Django
- Implement CRUD with function views and ModelForm
- Display object information in django admin
- Register a model to django admin
- Create a Model in Django app and manage migrations
- DB
- Create a Model in Django app and manage migrations
- auth
- Restrict access only to logged-in users with LoginRequiredMixin in a class based view in Django
- Create custom permission in model inner Meta class in Django
- Customize emails for django-allauth in Django
- Create email login authentication with django-allauth in Django
- set the login redirect URL in Django
- Create custom user model in Django
- Implement login required authentication for function views
- Show wether a user is logged in
- Implement the login feature
- Implement a logout feature
- Implement a basic sign up feature
- Customize fields of UserCreationForm
- Create a superuser account for a Django project
- node
- Create a Typescript project from scratch
- Config mirrors for yarn and npm
- Manage node versions with nvm
- git
- Status of files in git
- Show entire change history of a file
- Ignore files that have already been committed to a Git repository
- views
- Create search results page with ListView and get_queryset in Django
- Restrict access only to logged-in users with LoginRequiredMixin in a class based view in Django
- Create a class based list view with ListView in Django
- Create a class based detail view with DetailView in Django
- Create a class based sign up view with CreateView in Django
- Create a class based template view with TemplateView in Django
- Implement CRUD with function views and ModelForm
- Implement object detail page with function view
- Implement search or filter feature with a functional view
- Implement object listing feature with a functional view
- functional
- Implement search or filter feature with a functional view
- Implement object listing feature with a functional view
- admin
- Display object information in django admin
- Register a model to django admin
- javascript
- Event.target vs Event.currentTarget in Javascript
- DefinitelyTyped maintains module type declaration for open source projects
- Gradually migrating from Javascript to Typescript
- Javascript module standards
- Use web workers to do multi-threading in the browser
- Javascript Event Loop
- How to download a file from URI using Javascript
- react
- Use useImperativeHandle Hook to expose custom ref handle in React
- Use react-error-boundary package with TS support built-in for function components in React
- Types for forwardRef in React
- type for useRef Hook in React
- Use EventHander functions from React types to provide type for event handler as defining useCallback
- Types of DOM events in React
- Types for class components in React
- Type of style props in React
- Type of state setter function returned by useState in React
- Type of component children in React
- The return type of custom hooks as tuple instead of an array in React
- Test pure functions with Jest in React App
- Test components with Jest and React Testing Library in React
- Simulate user interactions using user-event in React
- Get code coverage for React Testing Library tests
- Collect HTML element all props with type ComponentPropsWithoutRef and use prop spreading in React
- Use TanStack React Query for REST API calling cache
- Use React Router loader for data loading
- Add environment variables to create-react-app React APP
- Use Redux in React
- Use React Router Form and action
- Use React Hook Form
- Navigate is similar to Link in React Router
- Handle uncontrolled form fields in React
- Handle controlled form fields in React
- Use search parameters in React Router
- Lazy loading in React Router
- Index route in React Router
- Create React Router error page
- Understand React Router
- Route parameter in React Router
- Nested routes and Outlet in React Router
- Link and NavLink in React Router
- Use plain CSS to style React frontend apps
- Use Tailwind CSS to style React frontend apps
- Use SVGs in react frontend apps
- Use CSS modules to style React frontend apps
- Use CSS-in-JS to style React frontend apps
- Create a typescript project with create-react-app
- Babel REPL is an online tool to explore JSX
- Setup Mui on Codesandbox.io
- Create an Array Input or Tag input feature with React and Mui
- mui
- Setup Mui on Codesandbox.io
- Create an Array Input or Tag input feature with React and Mui
- proxy
- Proxy in Linux
- ignore
- Use TanStack React Query for REST API calling cache
- Proxy in Linux
- db
- One-to-one, one-to-many, many-to-many relationship in Database
- TypeORM is an ORM for Typescript
- Online SQLite viewer from inloop
- images
- miniPaint an Online image editor
- statics
- Serve static files for production with WhiteNoise in Django
- Collect static files for production serving in Django
- Serve static files
- signup
- Implement a basic sign up feature
- Customize fields of UserCreationForm
- forms
- Use crispy forms in Django
- Use React Router Form and action
- Use React Hook Form
- Handle uncontrolled form fields in React
- Handle controlled form fields in React
- Implement CRUD with function views and ModelForm
- Create django form from model
- yarn
- Config mirrors for yarn and npm
- npm
- Create a Typescript project from scratch
- Config mirrors for yarn and npm
- programming
- parameter vs argument in function
- functions
- Make unknown type data strongly typed using type assertion function
- The scope of function type generic parameter in Typescript
- Overloaded function type in Typescript
- Define function type with generic type parameter in Typescript
- Rest parameters of functions in Typescript
- Optional and default parameters in Typescript
- Invoke functions with call apply bind in Typescript
- Generator functions in Typescript
- Function type or function call signature in Typescript
- Contextual typing in Typescript
- Annotate the type for function this parameter in Typescript
- Always explicitly annotate function parameters and annotate return type when needed in Typescript
- parameter vs argument in function
- generator
- Generator functions in Typescript
- classes
- Simulate final classes that are non-extensible in Typescript
- Implement a factory pattern in Typescript
- Implement a builder pattern in Typescript
- Implementing interfaces versus extending abstract classes in Typescript
- Implement mixin in Typescript
- Implement interface using implements keyword in Typescript
- Classes declare both values and types in Typescript
- Classes are structurally typed Typescript compares classes by their struct not by name
- Class constructor type in Typescript
- super keyword in Typescript class
- public protected private access modifier in the class constructor automatically assigns the parameter to this in Typescript
- Use this as a return type in Typescript
- Define an abstract class in Typescript
- interfaces
- Interfaces and type aliases are mostly two syntaxes for the same thing in Typescript
- Implementing interfaces versus extending abstract classes in Typescript
- Implement mixin in Typescript
- Implement interface using implements keyword in Typescript
- Differences between type aliases and interfaces in Typescript
- conditional
- Typescript uses infer keyword to declare generic types inline for conditional types
- Distributive conditional types in Typescript
- Create conditional types in Typescript
- todo
- Github pages issues
- Use TanStack React Query for REST API calling cache
- Handle errors with Option type in Typescript
- async
- Type safe Event Emitter interface using mapped type in Typescript
- Promise interface in Typescript
- Use web workers to do multi-threading in the browser
- Javascript Event Loop
- orm
- TypeORM is an ORM for Typescript
- api
- Typed code-generated APIs tools such as Swagger, Apollo and gRPC
- namespaces
- Add static function to Enum using namespace in Typescript
- modules
- Use CommonJS and AMD code in Typescript
- Safely use dynamic imports in Typescript
- Prefer modules over namespaces when possible in Typescript
- Module mode vs script mode in Typescript
- styles
- Use plain CSS to style React frontend apps
- Use Tailwind CSS to style React frontend apps
- Use CSS modules to style React frontend apps
- Use CSS-in-JS to style React frontend apps
- css-in-js
- Use CSS-in-JS to style React frontend apps
- css-modules
- Use CSS modules to style React frontend apps
- svgs
- Use SVGs in react frontend apps
- tailwind
- Use Tailwind CSS to style React frontend apps
- router
- Use React Router loader for data loading
- Use React Router Form and action
- Navigate is similar to Link in React Router
- Use search parameters in React Router
- Lazy loading in React Router
- Index route in React Router
- Create React Router error page
- Understand React Router
- Route parameter in React Router
- Nested routes and Outlet in React Router
- Link and NavLink in React Router
- rest
- Create REST API using JSON Server
- state
- Use Redux in React
- redux
- Use Redux in React
- react-query
- Use TanStack React Query for REST API calling cache
- tests
- Basic Django project tests
- Test pure functions with Jest in React App
- Test components with Jest and React Testing Library in React
- Simulate user interactions using user-event in React
- Get code coverage for React Testing Library tests
- react-testing-library
- Test components with Jest and React Testing Library in React
- Simulate user interactions using user-event in React
- Get code coverage for React Testing Library tests
- jest
- Test pure functions with Jest in React App
- Test components with Jest and React Testing Library in React
- errors
- Use react-error-boundary package with TS support built-in for function components in React
- hooks
- Use useImperativeHandle Hook to expose custom ref handle in React
- class-based
- Create search results page with ListView and get_queryset in Django
- Restrict access only to logged-in users with LoginRequiredMixin in a class based view in Django
- Create a class based list view with ListView in Django
- Create a class based detail view with DetailView in Django
- Create a class based sign up view with CreateView in Django
- Create a class based template view with TemplateView in Django
- django-crispy-forms
- Use crispy forms in Django
- envs
- Use environs package in Django
- medias
- File and image uploads as media files in Django
- ruby
- Github pages issues
- Config mirror for ruby gems
- github
- Github pages issues
- Wechat mini program basic structure
- Wechat mini-program statistic tools
- Install wechat min program development environment on Ubuntu
- events
- Event.target vs Event.currentTarget in Javascript
- mini-program
- Wechat mini program basic structure
- Wechat mini-program statistic tools