Skip to main content

Posts

Why return in if and no else?

  Common pattern without else Many developers prefer an early return instead of else : function login ( user ) { if ( ! user ) { console . log( "No user found" ); return ; } console . log( "Welcome" ); } Here no else is needed because return exits the function. Rule: If there is no else , JavaScript simply ignores the if block when the condition is false and continues executing the next line. why return return is used to immediately stop a function and optionally send a value back . Example without return : function greet () { console . log( "Hello" ); console . log( "Welcome" ); } greet (); Output: Hello Welcome Both lines run. Example with return : function greet () { console . log( "Hello" ); return ; console . log( "Welcome" ); } greet (); Output: Hello After return , the function ends immediately. Anything below it is not executed. That's why de...
Post a Comment
Read more
Recent posts

What ShippingFormInputs actually does ?

  What <ShippingFormInputs> actually does useForm < ShippingFormInputs >() This is NOT runtime code . It only tells TypeScript: “This form should only accept fields defined in ShippingFormInputs.” 📦 Example type type ShippingFormInputs = { email: string ; age: number ; }; So valid fields are only: "email" "age" ❌ How it catches typos Example mistake: register ( "emial" ); // ❌ typo 👉 TypeScript immediately checks: “Is 'emial' a key in ShippingFormInputs?” Answer: ❌ NO So it shows error: Argument of type '"emial"' is not assignable to parameter of type '"email" | "age"'
Post a Comment
Read more

UseForm working

 Let’s make it super clear with a real example. You have this: type ShippingFormInputs = { email: string ; age: number ; }; and this Zod schema: const shippingFormSchema = z . object({ email: z . string() . email(), age: z . number() . min( 18 ), }); and this form: const { register, handleSubmit, formState: { errors } } = useForm < ShippingFormInputs >({ resolver: zodResolver ( shippingFormSchema ) }); 🧠 What happens step by step 1. TypeScript ( <ShippingFormInputs> ) — BEFORE running code This only works while coding. Example mistake: register ( "emial" ); // ❌ typo 👉 TypeScript will immediately show error: "Property 'emial' does not exist" ✔ This is ONLY for developer safety. 2. Zod ( shippingFormSchema ) — WHEN user submits form Now user runs the app and enters: email: "abc" age: 10 Then user clicks submit. 👉 Now Zod runs: z . string() . email() ❌ invalid z . number() . min( 18 ) ❌ in...
Post a Comment
Read more

Why Z.infer is use in Zod ?

 Without z.infer , you must manually create the TypeScript type . Without z.infer import { z } from "zod" ; const UserSchema = z . object({ name: z . string(), age: z . number(), }); type User = { name: string ; age: number ; }; Notice that you're writing the same structure twice: Zod schema (for validation) TypeScript type (for type checking) With z.infer import { z } from "zod" ; const UserSchema = z . object({ name: z . string(), age: z . number(), }); type User = z . infer < typeof UserSchema >; Now you only write the structure once (in the schema), and TypeScript generates the type for you. The problem without z.infer Suppose you add an email field: const UserSchema = z . object({ name: z . string(), age: z . number(), email: z . string(), }); You must also remember to update: type User = { name: string ; age: number ; email: string ; }; If you forget, your schema and type become inco...
Post a Comment
Read more
 Started to learn zustand got problem in create function of zustand. Problem was weaker concept of callback and nested function . i think i am confident in these topics now.
Post a Comment
Read more

position vs translate

  The Golden Rule 🏠 Positioning ( top , left , etc.) 👉 Moves relative to the PARENT 🚶 Translate ( translate-x , translate-y ) 👉 Moves relative to ITSELF That’s it. If you remember only this, you’ll never confuse them again. 🎯 Imagine This Real-Life Story Think of a room (parent) and a table (element) . 1️⃣ left-1/2 → Parent Based You tell someone: “Put the table so its left edge is at 50% of the room.” The room decides the position. Room Width = 1000 px 50% = 500 px Table 's left edge is placed at 500px So positioning = 📏 Room measurement 2️⃣ translate-x-1/2 → Self Based Now you say: “Move the table forward by half of its own width.” The table measures itself. Table Width = 200px 50 % = 100px It moves 100px So translate = 📦 Self measurement 🔥 Ultimate Memory Formula Positioning → Parent controls me Translate → I control myself 💡 Why Centering Needs Both When you do: left - 1 / 2 You move the left edge to center. But the e...
Post a Comment
Read more