Mahammedi Abdelghani abdelghanyMh

React Hooks

useState
useEffect
useRef
useReducer
useContext
React Router
React.memo
useCallback

Modern JavaScript Best Practices Guide 2024

A comprehensive guide to modern JavaScript best practices for cleaner, more maintainable, and performant code.

Surrogate and Natural Keys

Key Concepts:

Natural Key: An identifier provided by the client (e.g., an invoice number like 1234-567).
Surrogate Key: An identifier generated by the server (e.g., a database auto-incremented ID like 101).
HTTP Verbs:
- POST: Used when the server determines the resource’s URI (uses surrogate keys).
- PUT: Used when the client determines the resource’s URI (uses natural keys).

Resources and Sub-Resources

Let’s clarify the distinction between POST and PUT in the context of resources and sub-resources, using the Cash Card and Invoice APIs as examples:

Key Idea: Resources vs. Sub-Resources

A resource is any entity your API manages (e.g., a Cash Card or Invoice).
A sub-resource is a child entity nested under a parent resource (e.g., a specific Cash Card under the /cashcards collection).

Description:

A summary table of HTTP methods (POST, PUT, PATCH) and their roles in CRUD operations, tailored for the Cash Card API. The table clarifies which methods are implemented (bold rows) and their behavior, including URI definitions, response codes, and response bodies. Non-bold rows indicate features not supported by the Cash Card API.

HTTP Method	Operation	Definition of Resource URI	What Does It Do?	Response Status Code	Response Body
POST	Create	Server generates and returns the URI	Creates a sub-resource under the request URI (e.g., `/cashcards/101`)	`201 CREATED`	The created resource
PUT	Create	Client supplies the URI	Creates a resource at the exact request URI (e.g., `/invoices/1234-567`)	`201 CREATED`	The created resource
PUT	Update	Client supplies the URI	Replaces the **

	#!/usr/bin/python3
	import sys
	from gi.repository import Gio
	import time

	# for light theme ./dark_light.py light
	# for dark theme ./dark_light.py dark

	# if no theme has been specified scripte will stop
	if len(sys.argv) == 1:

	:root {
	--transition: 0.3s ease-in-out all
	--text-font-stack: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif
	--shadow-1: 0px 0px 0px 3px var(--colors-blue-50);
	--border-radius: 4px;
	--ring-color: rgba(66, 153, 225, 0.6);
	--colors-transparent: transparent;
	--colors-current: currentColor;
	--colors-black: #000000;
	--colors-white: #ffffff;

	<div class='container' onmousemove='MagneticBtn(event)'>
	<button class='btn'>hello</button>
	</div>