[{"data":1,"prerenderedAt":448},["ShallowReactive",2],{"all-blogs":3},[4,25,40,55,69,82,97,117,132,145,159,171,183,200,215,230,244,258,273,289,303,318,333,348,359,372,387,398,410,423,436],{"id":5,"slug":6,"title":7,"subtitle":8,"shortDescription":9,"description":10,"featureImage":11,"category":12,"tags":13,"author":17,"publishedDate":18,"featured":19,"relatedPosts":20,"tech":24},13,"es2024-new-features","ES2024 New Features You Should Know","Exploring the latest JavaScript features","ES2024 introduces Array grouping, Promise.withResolvers, and more powerful features.","ES2024 (ES15) brings several new features to JavaScript. Let's explore the most important ones.\n\n## Object.groupBy() and Map.groupBy()\n\n```javascript\nconst products = [\n  { name: 'Apple', category: 'fruit' },\n  { name: 'Carrot', category: 'vegetable' },\n  { name: 'Banana', category: 'fruit' }\n]\n\nconst grouped = Object.groupBy(products, product => product.category)\n\u002F\u002F { fruit: [{...}, {...}], vegetable: [{...}] }\n```\n\n## Promise.withResolvers()\n\n```javascript\nconst { promise, resolve, reject } = Promise.withResolvers()\n\n\u002F\u002F Use resolve\u002Freject anywhere\nsetTimeout(() => resolve('Done!'), 1000)\n\nawait promise \u002F\u002F 'Done!'\n```\n\n## Well-Formed Unicode Strings\n\n```javascript\nconst str = 'Hello\\uD800World'\nconst wellFormed = str.toWellFormed()\n\u002F\u002F 'Hello\\uFFFDWorld'\n\nstr.isWellFormed() \u002F\u002F false\nwellFormed.isWellFormed() \u002F\u002F true\n```\n\n## ArrayBuffer Transfer\n\n```javascript\nconst buffer = new ArrayBuffer(8)\nconst newBuffer = buffer.transfer(16)\n\u002F\u002F buffer is now detached\n\u002F\u002F newBuffer has 16 bytes with original data\n```\n\n## Atomics.waitAsync()\n\nFor better async coordination in SharedArrayBuffer:\n\n```javascript\nconst result = Atomics.waitAsync(int32Array, 0, 0)\nresult.value.then(() => console.log('Value changed!'))\n```\n\n## Browser Support\n\nAll major browsers support these features. For older environments, use polyfills.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1579468118864-1b9ea3c0db4a?w=800&auto=format&fit=crop","JavaScript",[14,12,15,16],"ES2024","New Features","ECMAScript","Satish Vishwakarma","2026-04-16",true,[21,22,23],14,15,16,"javascript",{"id":21,"slug":26,"title":27,"subtitle":28,"shortDescription":29,"description":30,"featureImage":31,"category":12,"tags":32,"author":17,"publishedDate":37,"featured":19,"relatedPosts":38,"tech":24},"javascript-closures-deep-dive","JavaScript Closures: A Deep Dive","Understanding closures and their practical applications","Master JavaScript closures to write more powerful and flexible code.","Closures are one of the most powerful features in JavaScript. Let's understand them thoroughly.\n\n## What is a Closure?\n\nA closure is a function that has access to variables from its outer (enclosing) scope, even after that scope has finished executing.\n\n```javascript\nfunction createCounter() {\n  let count = 0  \u002F\u002F Private variable\n  \n  return {\n    increment() {\n      count++\n      return count\n    },\n    decrement() {\n      count--\n      return count\n    },\n    getCount() {\n      return count\n    }\n  }\n}\n\nconst counter = createCounter()\ncounter.increment() \u002F\u002F 1\ncounter.increment() \u002F\u002F 2\ncounter.getCount() \u002F\u002F 2\n```\n\n## Practical Use Cases\n\n### Data Privacy\n\n```javascript\nfunction createBankAccount(initialBalance) {\n  let balance = initialBalance\n  \n  return {\n    deposit(amount) {\n      balance += amount\n      return balance\n    },\n    withdraw(amount) {\n      if (amount \u003C= balance) {\n        balance -= amount\n        return balance\n      }\n      throw new Error('Insufficient funds')\n    },\n    getBalance() {\n      return balance\n    }\n  }\n}\n```\n\n### Function Factories\n\n```javascript\nfunction createMultiplier(multiplier) {\n  return function(number) {\n    return number * multiplier\n  }\n}\n\nconst double = createMultiplier(2)\nconst triple = createMultiplier(3)\n\ndouble(5)  \u002F\u002F 10\ntriple(5)  \u002F\u002F 15\n```\n\n## Common Pitfalls\n\n### Loop Variable Capture\n\n```javascript\n\u002F\u002F Problem\nfor (var i = 0; i \u003C 3; i++) {\n  setTimeout(() => console.log(i), 100)\n}\n\u002F\u002F Outputs: 3, 3, 3\n\n\u002F\u002F Solution: Use let\nfor (let i = 0; i \u003C 3; i++) {\n  setTimeout(() => console.log(i), 100)\n}\n\u002F\u002F Outputs: 0, 1, 2\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1515879218367-8466d910aaa4?w=800&auto=format&fit=crop",[33,34,35,36],"Closures","Scope","Functions","Advanced","2026-04-11",[5,22,39],17,{"id":22,"slug":41,"title":42,"subtitle":43,"shortDescription":44,"description":45,"featureImage":46,"category":12,"tags":47,"author":17,"publishedDate":52,"featured":53,"relatedPosts":54,"tech":24},"async-await-best-practices","Async\u002FAwait Best Practices in JavaScript","Write cleaner asynchronous code","Learn the best practices for using async\u002Fawait in modern JavaScript.","Async\u002Fawait makes asynchronous code easier to write and read. Let's explore best practices.\n\n## Basic Usage\n\n```javascript\nasync function fetchUser(id) {\n  try {\n    const response = await fetch(`\u002Fapi\u002Fusers\u002F${id}`)\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`)\n    }\n    return await response.json()\n  } catch (error) {\n    console.error('Failed to fetch user:', error)\n    throw error\n  }\n}\n```\n\n## Parallel Execution\n\n```javascript\n\u002F\u002F Sequential - Slow\nasync function getDataSequential() {\n  const users = await fetchUsers()\n  const posts = await fetchPosts()\n  return { users, posts }\n}\n\n\u002F\u002F Parallel - Fast\nasync function getDataParallel() {\n  const [users, posts] = await Promise.all([\n    fetchUsers(),\n    fetchPosts()\n  ])\n  return { users, posts }\n}\n```\n\n## Error Handling Patterns\n\n### Individual Error Handling\n\n```javascript\nconst [usersResult, postsResult] = await Promise.allSettled([\n  fetchUsers(),\n  fetchPosts()\n])\n\nif (usersResult.status === 'fulfilled') {\n  console.log(usersResult.value)\n}\n```\n\n### Wrapper Function\n\n```javascript\nasync function safeAsync(promise) {\n  try {\n    const data = await promise\n    return [data, null]\n  } catch (error) {\n    return [null, error]\n  }\n}\n\nconst [user, error] = await safeAsync(fetchUser(1))\nif (error) {\n  \u002F\u002F Handle error\n}\n```\n\n## Common Mistakes\n\n### Forgetting await\n\n```javascript\n\u002F\u002F Bug: returns Promise, not data\nfunction getData() {\n  return fetch('\u002Fapi\u002Fdata').then(r => r.json())\n}\n\n\u002F\u002F Fix\nasync function getData() {\n  return await fetch('\u002Fapi\u002Fdata').then(r => r.json())\n}\n```\n\n### Await in Loops\n\n```javascript\n\u002F\u002F Slow: sequential\nfor (const id of ids) {\n  await processItem(id)\n}\n\n\u002F\u002F Fast: parallel\nawait Promise.all(ids.map(id => processItem(id)))\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1542831371-29b0f74f9713?w=800&auto=format&fit=crop",[48,49,50,51],"Async\u002FAwait","Promises","Asynchronous","Best Practices","2026-04-06",false,[5,21,23],{"id":23,"slug":56,"title":57,"subtitle":58,"shortDescription":59,"description":60,"featureImage":61,"category":12,"tags":62,"author":17,"publishedDate":67,"featured":53,"relatedPosts":68,"tech":24},"javascript-debounce-throttle","Debounce vs Throttle: When to Use Each","Optimizing event handlers for performance","Learn the difference between debounce and throttle and when to use each technique.","Debounce and throttle are essential techniques for optimizing performance. Let's understand when to use each.\n\n## Debounce\n\nDebounce delays execution until after a period of inactivity.\n\n```javascript\nfunction debounce(fn, delay) {\n  let timeoutId\n  return function (...args) {\n    clearTimeout(timeoutId)\n    timeoutId = setTimeout(() => fn.apply(this, args), delay)\n  }\n}\n\n\u002F\u002F Usage: Search input\nconst handleSearch = debounce((query) => {\n  fetchSearchResults(query)\n}, 300)\n\ninput.addEventListener('input', (e) => handleSearch(e.target.value))\n```\n\n**Use debounce for:**\n- Search inputs\n- Window resize handlers\n- Form auto-save\n- Button clicks (prevent double-click)\n\n## Throttle\n\nThrottle ensures a function executes at most once per time period.\n\n```javascript\nfunction throttle(fn, limit) {\n  let inThrottle\n  return function (...args) {\n    if (!inThrottle) {\n      fn.apply(this, args)\n      inThrottle = true\n      setTimeout(() => inThrottle = false, limit)\n    }\n  }\n}\n\n\u002F\u002F Usage: Scroll handler\nconst handleScroll = throttle(() => {\n  updateScrollPosition()\n}, 100)\n\nwindow.addEventListener('scroll', handleScroll)\n```\n\n**Use throttle for:**\n- Scroll events\n- Mouse move tracking\n- Game loop updates\n- API rate limiting\n\n## Visual Comparison\n\n```\nEvents:    |--x-x-x-x-x-x-x-------x-x-x-x|\n\nDebounce:  |------------------------x----|\n           (Fires after last event + delay)\n\nThrottle:  |--x-----x-----x-------x------|\n           (Fires at regular intervals)\n```\n\n## Advanced: Leading & Trailing\n\n```javascript\nfunction debounce(fn, delay, { leading = false, trailing = true } = {}) {\n  let timeoutId\n  let lastCallTime\n  \n  return function (...args) {\n    const now = Date.now()\n    \n    if (leading && (!lastCallTime || now - lastCallTime > delay)) {\n      fn.apply(this, args)\n      lastCallTime = now\n    }\n    \n    clearTimeout(timeoutId)\n    \n    if (trailing) {\n      timeoutId = setTimeout(() => {\n        fn.apply(this, args)\n        lastCallTime = Date.now()\n      }, delay)\n    }\n  }\n}\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1504868584819-f8e8b4b6d7e3?w=800&auto=format&fit=crop",[63,64,65,66],"Debounce","Throttle","Performance","Event Handling","2026-03-30",[21,22,39],{"id":39,"slug":70,"title":71,"subtitle":72,"shortDescription":73,"description":74,"featureImage":75,"category":12,"tags":76,"author":17,"publishedDate":80,"featured":19,"relatedPosts":81,"tech":24},"javascript-event-loop-explained","JavaScript Event Loop Explained","Understanding how JavaScript handles asynchronous operations","A deep dive into the JavaScript event loop and how it manages async code.","Understanding the event loop is crucial for writing efficient JavaScript. Let's break it down.\n\n## The Call Stack\n\nJavaScript is single-threaded, with one call stack:\n\n```javascript\nfunction third() { console.log('Third') }\nfunction second() { third(); console.log('Second') }\nfunction first() { second(); console.log('First') }\n\nfirst()\n\u002F\u002F Third, Second, First\n```\n\n## Web APIs and Task Queue\n\n```javascript\nconsole.log('Start')\n\nsetTimeout(() => {\n  console.log('Timeout')\n}, 0)\n\nconsole.log('End')\n\n\u002F\u002F Output: Start, End, Timeout\n```\n\n## Microtasks vs Macrotasks\n\n```javascript\nconsole.log('1')\n\nsetTimeout(() => console.log('2'), 0)\n\nPromise.resolve().then(() => console.log('3'))\n\nconsole.log('4')\n\n\u002F\u002F Output: 1, 4, 3, 2\n```\n\n**Microtasks (higher priority):**\n- Promise callbacks\n- queueMicrotask()\n- MutationObserver\n\n**Macrotasks:**\n- setTimeout\u002FsetInterval\n- I\u002FO operations\n- UI rendering\n\n## Event Loop Cycle\n\n1. Execute all synchronous code\n2. Execute all microtasks\n3. Execute one macrotask\n4. Repeat\n\n## Practical Example\n\n```javascript\nasync function async1() {\n  console.log('async1 start')\n  await async2()\n  console.log('async1 end')\n}\n\nasync function async2() {\n  console.log('async2')\n}\n\nconsole.log('script start')\n\nsetTimeout(() => console.log('setTimeout'), 0)\n\nasync1()\n\nnew Promise((resolve) => {\n  console.log('promise1')\n  resolve()\n}).then(() => console.log('promise2'))\n\nconsole.log('script end')\n\n\u002F\u002F Output:\n\u002F\u002F script start\n\u002F\u002F async1 start\n\u002F\u002F async2\n\u002F\u002F promise1\n\u002F\u002F script end\n\u002F\u002F async1 end\n\u002F\u002F promise2\n\u002F\u002F setTimeout\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1484417894907-623942c8ee29?w=800&auto=format&fit=crop",[77,78,79,36],"Event Loop","Async","Concurrency","2026-03-22",[21,22,23],{"id":83,"slug":84,"title":85,"subtitle":86,"shortDescription":87,"description":88,"featureImage":89,"category":12,"tags":90,"author":17,"publishedDate":95,"featured":53,"relatedPosts":96,"tech":24},18,"javascript-modern-array-methods","Modern JavaScript Array Methods You Should Know","Essential array methods for cleaner code","Master modern array methods to write more expressive JavaScript code.","Modern JavaScript provides powerful array methods. Let's explore the essential ones.\n\n## Array.prototype.at()\n\n```javascript\nconst arr = [1, 2, 3, 4, 5]\n\narr.at(0)   \u002F\u002F 1\narr.at(-1)  \u002F\u002F 5 (last element)\narr.at(-2)  \u002F\u002F 4\n```\n\n## Array.prototype.findLast()\n\n```javascript\nconst numbers = [1, 2, 3, 4, 5, 4, 3]\n\nnumbers.findLast(n => n > 3)      \u002F\u002F 4\nnumbers.findLastIndex(n => n > 3) \u002F\u002F 5\n```\n\n## Array.prototype.toSorted()\n\nNon-mutating sort:\n\n```javascript\nconst original = [3, 1, 4, 1, 5]\nconst sorted = original.toSorted()\n\nconsole.log(original) \u002F\u002F [3, 1, 4, 1, 5]\nconsole.log(sorted)   \u002F\u002F [1, 1, 3, 4, 5]\n```\n\n## Array.prototype.toReversed()\n\n```javascript\nconst arr = [1, 2, 3]\nconst reversed = arr.toReversed()\n\nconsole.log(arr)      \u002F\u002F [1, 2, 3]\nconsole.log(reversed) \u002F\u002F [3, 2, 1]\n```\n\n## Array.prototype.toSpliced()\n\n```javascript\nconst arr = [1, 2, 3, 4, 5]\nconst newArr = arr.toSpliced(1, 2, 'a', 'b')\n\nconsole.log(arr)    \u002F\u002F [1, 2, 3, 4, 5]\nconsole.log(newArr) \u002F\u002F [1, 'a', 'b', 4, 5]\n```\n\n## Array.prototype.with()\n\n```javascript\nconst arr = [1, 2, 3]\nconst newArr = arr.with(1, 'two')\n\nconsole.log(arr)    \u002F\u002F [1, 2, 3]\nconsole.log(newArr) \u002F\u002F [1, 'two', 3]\n```\n\n## Practical Examples\n\n```javascript\n\u002F\u002F Chain methods for powerful transformations\nconst users = [\n  { name: 'Alice', age: 30 },\n  { name: 'Bob', age: 25 },\n  { name: 'Charlie', age: 35 }\n]\n\nconst result = users\n  .filter(u => u.age >= 25)\n  .toSorted((a, b) => a.age - b.age)\n  .map(u => u.name)\n\n\u002F\u002F ['Bob', 'Alice', 'Charlie']\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1516116216624-53e697fedbea?w=800&auto=format&fit=crop",[91,92,93,94],"Arrays","Methods","ES2023","Modern JavaScript","2026-03-15",[5,21,23],{"id":98,"slug":99,"title":100,"subtitle":101,"shortDescription":102,"description":103,"featureImage":104,"category":105,"tags":106,"author":17,"publishedDate":111,"featured":19,"relatedPosts":112,"tech":116},1,"laravel-12-new-features","What's New in Laravel 12: Complete Guide","Explore all the exciting features and improvements in Laravel 12","Laravel 12 brings significant improvements including better performance, new Artisan commands, and enhanced security features.","Laravel 12 represents a major milestone in the framework's evolution. This release focuses on developer experience, performance optimizations, and introduces several groundbreaking features that will change how we build web applications.\n\n## Key Highlights\n\n### 1. Enhanced Performance\nLaravel 12 introduces lazy loading optimizations and query caching improvements that can boost your application's performance by up to 40%.\n\n### 2. New Artisan Commands\nThe new `php artisan make:action` command streamlines the creation of action classes, promoting single responsibility principle.\n\n### 3. Improved Type Safety\nBetter PHP 8.3 integration with improved type hints and return types across the framework.\n\n```php\n\u002F\u002F New Action class pattern\nclass CreateUserAction\n{\n    public function execute(array $data): User\n    {\n        return User::create($data);\n    }\n}\n```\n\n## Migration Guide\nUpgrading from Laravel 11 to 12 is straightforward. Most applications won't require any code changes.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1618477247222-acbdb0e159b3?w=800&auto=format&fit=crop","Laravel",[107,108,109,110],"Laravel 12","PHP","Framework","Updates","2026-04-15",[113,114,115],2,3,4,"laravel",{"id":113,"slug":118,"title":119,"subtitle":120,"shortDescription":121,"description":122,"featureImage":123,"category":105,"tags":124,"author":17,"publishedDate":129,"featured":19,"relatedPosts":130,"tech":116},"laravel-service-container-deep-dive","Laravel Service Container: A Deep Dive","Understanding dependency injection and IoC in Laravel","Master the Laravel Service Container to write more maintainable and testable code.","The Service Container is the heart of Laravel's dependency injection system. Understanding it deeply will transform how you architect your applications.\n\n## What is the Service Container?\n\nThe Service Container is a powerful tool for managing class dependencies and performing dependency injection. It's essentially a registry of all your application's bindings.\n\n## Binding Basics\n\n```php\n\u002F\u002F Simple binding\n$this->app->bind(PaymentGateway::class, StripePaymentGateway::class);\n\n\u002F\u002F Singleton binding\n$this->app->singleton(Logger::class, function ($app) {\n    return new FileLogger($app['config']['logging.path']);\n});\n\n\u002F\u002F Instance binding\n$this->app->instance(Config::class, $configInstance);\n```\n\n## Contextual Binding\n\nWhen you need different implementations for different classes:\n\n```php\n$this->app->when(PhotoController::class)\n    ->needs(Filesystem::class)\n    ->give(function () {\n        return Storage::disk('photos');\n    });\n```\n\n## Best Practices\n\n1. Always program to interfaces\n2. Use constructor injection\n3. Avoid the service locator pattern\n4. Keep your bindings organized in Service Providers","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555099962-4199c345e5dd?w=800&auto=format&fit=crop",[125,126,127,128],"Service Container","Dependency Injection","IoC","Architecture","2026-04-10",[98,114,131],5,{"id":114,"slug":133,"title":134,"subtitle":135,"shortDescription":136,"description":137,"featureImage":89,"category":105,"tags":138,"author":17,"publishedDate":143,"featured":53,"relatedPosts":144,"tech":116},"laravel-middleware-complete-guide","Laravel Middleware: Complete Guide with Examples","Learn how to create and use middleware effectively","A comprehensive guide to Laravel middleware for filtering HTTP requests.","Middleware provides a convenient mechanism for filtering HTTP requests entering your application. Let's explore everything about Laravel middleware.\n\n## Creating Middleware\n\n```bash\nphp artisan make:middleware EnsureUserIsAdmin\n```\n\n```php\nclass EnsureUserIsAdmin\n{\n    public function handle(Request $request, Closure $next): Response\n    {\n        if (! $request->user()?->isAdmin()) {\n            return redirect('home');\n        }\n\n        return $next($request);\n    }\n}\n```\n\n## Before & After Middleware\n\n### Before Middleware\n```php\npublic function handle($request, Closure $next)\n{\n    \u002F\u002F Perform action before request is handled\n    return $next($request);\n}\n```\n\n### After Middleware\n```php\npublic function handle($request, Closure $next)\n{\n    $response = $next($request);\n    \u002F\u002F Perform action after request is handled\n    return $response;\n}\n```\n\n## Middleware Groups\n\nGroup middleware for web and API routes in your `bootstrap\u002Fapp.php`:\n\n```php\n->withMiddleware(function (Middleware $middleware) {\n    $middleware->web(append: [\n        MyCustomMiddleware::class,\n    ]);\n})\n```",[139,140,141,142],"Middleware","Security","HTTP","Request Handling","2026-04-05",[98,113,115],{"id":115,"slug":146,"title":147,"subtitle":148,"shortDescription":149,"description":150,"featureImage":151,"category":105,"tags":152,"author":17,"publishedDate":157,"featured":53,"relatedPosts":158,"tech":116},"laravel-events-listeners-guide","Events and Listeners in Laravel: Practical Guide","Decouple your application logic with events","Learn how to use Laravel's event system to build loosely coupled applications.","Laravel's events provide a simple observer implementation, allowing you to subscribe and listen for various events in your application.\n\n## Creating Events\n\n```bash\nphp artisan make:event OrderPlaced\n```\n\n```php\nclass OrderPlaced\n{\n    use Dispatchable, SerializesModels;\n\n    public function __construct(\n        public Order $order\n    ) {}\n}\n```\n\n## Creating Listeners\n\n```bash\nphp artisan make:listener SendOrderNotification --event=OrderPlaced\n```\n\n```php\nclass SendOrderNotification\n{\n    public function handle(OrderPlaced $event): void\n    {\n        $event->order->user->notify(\n            new OrderConfirmation($event->order)\n        );\n    }\n}\n```\n\n## Dispatching Events\n\n```php\n\u002F\u002F Using the event helper\nevent(new OrderPlaced($order));\n\n\u002F\u002F Using the dispatch method\nOrderPlaced::dispatch($order);\n```\n\n## Event Discovery\n\nLaravel can automatically discover event listeners:\n\n```php\npublic function shouldDiscoverEvents(): bool\n{\n    return true;\n}\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1551288049-bebda4e38f71?w=800&auto=format&fit=crop",[153,154,155,156],"Events","Listeners","Observer Pattern","Decoupling","2026-03-28",[113,114,131],{"id":131,"slug":160,"title":161,"subtitle":162,"shortDescription":163,"description":164,"featureImage":165,"category":105,"tags":166,"author":17,"publishedDate":169,"featured":19,"relatedPosts":170,"tech":116},"laravel-rest-api-best-practices","Laravel REST API Best Practices 2026","Build scalable and maintainable APIs with Laravel","A comprehensive guide to building production-ready REST APIs with Laravel.","Building a REST API requires careful consideration of various factors. Here's a complete guide to Laravel API best practices.\n\n## API Versioning\n\n```php\n\u002F\u002F routes\u002Fapi.php\nRoute::prefix('v1')->group(function () {\n    Route::apiResource('users', UserController::class);\n});\n```\n\n## API Resources\n\n```php\nclass UserResource extends JsonResource\n{\n    public function toArray(Request $request): array\n    {\n        return [\n            'id' => $this->id,\n            'name' => $this->name,\n            'email' => $this->email,\n            'created_at' => $this->created_at->toISOString(),\n            'posts' => PostResource::collection($this->whenLoaded('posts')),\n        ];\n    }\n}\n```\n\n## Consistent Response Format\n\n```php\ntrait ApiResponse\n{\n    protected function success($data, $message = null, $code = 200)\n    {\n        return response()->json([\n            'success' => true,\n            'message' => $message,\n            'data' => $data\n        ], $code);\n    }\n\n    protected function error($message, $code = 400)\n    {\n        return response()->json([\n            'success' => false,\n            'message' => $message,\n            'data' => null\n        ], $code);\n    }\n}\n```\n\n## Rate Limiting\n\n```php\nRateLimiter::for('api', function (Request $request) {\n    return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip());\n});\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1558494949-ef010cbdcc31?w=800&auto=format&fit=crop",[167,168,51,128],"REST API","Backend","2026-03-20",[98,113,115],{"id":172,"slug":173,"title":174,"subtitle":175,"shortDescription":176,"description":177,"featureImage":178,"category":105,"tags":179,"author":17,"publishedDate":95,"featured":53,"relatedPosts":182,"tech":116},6,"laravel-facades-explained","Understanding Laravel Facades: How They Work","Demystifying the magic behind Laravel facades","Learn how Laravel facades work under the hood and when to use them.","Facades provide a static interface to classes available in the application's service container. Let's understand how they work.\n\n## How Facades Work\n\n```php\nuse Illuminate\\Support\\Facades\\Cache;\n\nCache::get('key');\n```\n\nThis is equivalent to:\n\n```php\napp('cache')->get('key');\n```\n\n## Creating Custom Facades\n\n```php\nnamespace App\\Facades;\n\nuse Illuminate\\Support\\Facades\\Facade;\n\nclass Payment extends Facade\n{\n    protected static function getFacadeAccessor(): string\n    {\n        return 'payment';\n    }\n}\n```\n\nRegister in your service provider:\n\n```php\npublic function register(): void\n{\n    $this->app->singleton('payment', function ($app) {\n        return new PaymentGateway($app['config']['payment']);\n    });\n}\n```\n\n## Real-Time Facades\n\n```php\nuse Facades\\App\\Services\\PaymentService;\n\nPaymentService::process($order);\n```\n\n## When to Use Facades\n\n- Quick prototyping\n- Simple applications\n- When testability isn't a primary concern\n\n## When to Avoid Facades\n\n- When building large applications\n- When you need clear dependency declarations\n- In domain logic where explicit dependencies are preferred","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1504639725590-34d0984388bd?w=800&auto=format&fit=crop",[180,181,125,128],"Facades","Design Patterns",[113,114,131],{"id":184,"slug":185,"title":186,"subtitle":187,"shortDescription":188,"description":189,"featureImage":190,"category":191,"tags":192,"author":196,"publishedDate":197,"featured":19,"relatedPosts":198,"tech":199},201,"react-server-components-complete-guide","React Server Components (RSC): The Complete Guide 2025","Zero bundle size, direct database access, and the future of React","Master React Server Components – learn how to reduce JavaScript bundle size, access backend resources directly, and build faster apps with the RSC architecture. Includes Next.js App Router patterns.","\u003Ch2>Table of Contents\u003C\u002Fh2>\u003Cul>\u003Cli>What Are React Server Components?\u003C\u002Fli>\u003Cli>Client vs Server Components\u003C\u002Fli>\u003Cli>When to Use Each\u003C\u002Fli>\u003Cli>Data Fetching Patterns\u003C\u002Fli>\u003Cli>Performance Impact\u003C\u002Fli>\u003Cli>Common Mistakes\u003C\u002Fli>\u003Cli>Interview Q&A\u003C\u002Fli>\u003Cli>FAQ\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>What Are React Server Components?\u003C\u002Fh2>\u003Cp>React Server Components (RSC) let you write components that run \u003Cstrong>only on the server\u003C\u002Fstrong>. They never send JavaScript to the client – only their rendered output (like HTML). This means zero bundle size for those components.\u003C\u002Fp>\u003Ch2>Client vs Server Components\u003C\u002Fh2>\u003Cp>\u003Cstrong>Server Components\u003C\u002Fstrong> can access databases, filesystems, or any backend resource directly. They cannot use useState, useEffect, or browser APIs. \u003Cstrong>Client Components\u003C\u002Fstrong> are what we've always used – they hydrate and run in the browser.\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-jsx\">\u002F\u002F ServerComponent.server.jsx – runs only on server\nexport default async function ServerComponent() {\n  const data = await db.query('SELECT * FROM users');\n  return <div>{data.map(...)}<\u002Fdiv>;\n}\n\n\u002F\u002F App.jsx – mixing both\nimport ClientCounter from '.\u002FClientCounter.client';\nimport ServerComponent from '.\u002FServerComponent.server';\n\nexport default function Page() {\n  return (\n    <div>\n      <ServerComponent \u002F>  {\u002F* zero JS sent *\u002F}\n      <ClientCounter \u002F>    {\u002F* interactive *\u002F}\n    <\u002Fdiv>\n  );\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Impact\u003C\u002Fh2>\u003Cp>RSC dramatically reduces bundle size – sometimes by 60-80%. Large rendering logic, heavy dependencies (date-fns, lodash) stay on the server. First Contentful Paint improves by 30-50% in typical apps.\u003C\u002Fp>\u003Ch2>Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Putting client hooks (useState) in Server Components – error\u003C\u002Fli>\u003Cli>Forgetting the 'use client' directive for client components\u003C\u002Fli>\u003Cli>Trying to use localStorage or window in Server Components\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: Can Server Components re-render?\u003C\u002Fstrong> Yes, but on the server via navigation or refetch. They don't re-render on client.\u003Cbr>\u003Cstrong>Q: How do Server Components communicate with Client Components?\u003C\u002Fstrong> Via props – you can pass serializable data down, or use context with a provider boundary.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>RSC is the biggest shift in React since hooks. Adopt gradually: start with static pages, then data-heavy lists, finally full migration. Pair with Next.js App Router for production.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Frsc-guide-cover.jpg","React",[191,193,194,65,195],"Server Components","Next.js","React 19","Sarah Chen","2025-04-10",[],"react",{"id":201,"slug":202,"title":203,"subtitle":204,"shortDescription":205,"description":206,"featureImage":207,"category":208,"tags":209,"author":212,"publishedDate":213,"featured":53,"relatedPosts":214,"tech":199},202,"zustand-state-management-mastery","Zustand Mastery: The Minimal State Manager for React","Why Zustand beats Redux and Context for 90% of apps","Learn Zustand from zero to hero – simple API, no boilerplate, perfect TypeScript support, and production-ready patterns. Includes middleware, persistence, and testing.","\u003Ch2>Why Zustand?\u003C\u002Fh2>\u003Cp>Zustand is a small, fast, and scalable state management library. Unlike Redux, there's no providers, actions, reducers, or dispatch. Unlike Context, it doesn't cause unnecessary re-renders. Just a hook.\u003C\u002Fp>\u003Ch2>Basic Store\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-typescript\">import { create } from 'zustand';\n\ninterface BearState {\n  bears: number;\n  increase: () => void;\n  removeAll: () => void;\n}\n\nconst useBearStore = create\u003CBearState>((set) => ({\n  bears: 0,\n  increase: () => set((state) => ({ bears: state.bears + 1 })),\n  removeAll: () => set({ bears: 0 }),\n}));\n\n\u002F\u002F Usage in component\nfunction BearCounter() {\n  const bears = useBearStore((state) => state.bears);\n  const increase = useBearStore((state) => state.increase);\n  return <div>{bears}<button onClick={increase}>+<\u002Fbutton><\u002Fdiv>;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Production Pattern: Slice Pattern\u003C\u002Fh2>\u003Cpre>\u003Ccode>const createUserSlice = (set) => ({ user: null, setUser: (user) => set({ user }) });\nconst createCartSlice = (set) => ({ cart: [], addItem: (item) => set((state) => ({ cart: [...state.cart, item] })) });\n\nconst useStore = create((...a) => ({\n  ...createUserSlice(...a),\n  ...createCartSlice(...a),\n}));\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Tips\u003C\u002Fh2>\u003Cul>\u003Cli>Use selectors to avoid re-renders: \u003Ccode>const bears = useBearStore(state => state.bears)\u003C\u002Fcode> instead of destructuring whole store.\u003C\u002Fli>\u003Cli>Use shallow equality for nested objects: \u003Ccode>import { shallow } from 'zustand\u002Fshallow'\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: How does Zustand prevent unnecessary re-renders?\u003C\u002Fstrong> It uses strict equality checks by default – only re-renders when selected slice changes.\u003Cbr>\u003Cstrong>Q: Can Zustand handle async actions?\u003C\u002Fstrong> Yes – just make the action async and call set when done.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>Zustand is the best state manager for most React apps. It's simple, performant, and scales from small to large.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Fzustand-mastery.jpg","State Management",[210,208,191,211],"Zustand","TypeScript","Michael Okonkwo","2025-04-05",[],{"id":216,"slug":217,"title":218,"subtitle":219,"shortDescription":220,"description":221,"featureImage":222,"category":223,"tags":224,"author":227,"publishedDate":228,"featured":53,"relatedPosts":229,"tech":199},203,"react-router-v6-deep-dive","React Router v6: Deep Dive into Modern Routing","Loaders, actions, error boundaries, and nested routes","Master React Router v6 with data loading, mutations, and advanced patterns. Build production-grade routing with authentication, lazy loading, and route protection.","\u003Ch2>What's New in v6\u003C\u002Fh2>\u003Cp>React Router v6 introduced a completely new data API: loaders, actions, and error boundaries. Routes become self-contained with data fetching and mutations.\u003C\u002Fp>\u003Ch2>Basic Setup\u003C\u002Fh2>\u003Cpre>\u003Ccode>import { createBrowserRouter, RouterProvider } from 'react-router-dom';\n\nconst router = createBrowserRouter([\n  {\n    path: '\u002F',\n    element: <Root \u002F>,\n    loader: rootLoader,\n    children: [\n      { index: true, element: <Home \u002F> },\n      { path: 'contact\u002F:id', element: <Contact \u002F>, loader: contactLoader },\n    ],\n  },\n]);\n\nfunction App() { return <RouterProvider router={router} \u002F>; }\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Loaders and Actions\u003C\u002Fh2>\u003Cpre>\u003Ccode>\u002F\u002F loader runs before rendering\nexport async function contactLoader({ params }) {\n  const contact = await fetchContact(params.id);\n  return { contact };\n}\n\n\u002F\u002F action handles form submissions\nexport async function action({ request, params }) {\n  const formData = await request.formData();\n  await updateContact(params.id, formData);\n  return redirect(`\u002Fcontact\u002F${params.id}`);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Tips\u003C\u002Fh2>\u003Cul>\u003Cli>Use lazy loading for route components: \u003Ccode>lazy: () => import('.\u002Froutes\u002FContact')\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Implement route-level code splitting with \u003Ccode>React.lazy\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Avoid nesting too deep – max 3-4 levels for maintainability\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting to use \u003Ccode><Outlet \u002F>\u003C\u002Fcode> for nested routes\u003C\u002Fli>\u003Cli>Not handling loader errors – use \u003Ccode>errorElement\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Mutating data without actions – leads to stale UI\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: Difference between \u003Ccode>useNavigate\u003C\u002Fcode> and \u003Ccode><Link>\u003C\u002Fcode>?\u003C\u002Fstrong> Link is declarative for navigation, useNavigate is imperative (after async operations).\u003Cbr>\u003Cstrong>Q: How does React Router handle code splitting?\u003C\u002Fstrong> Use \u003Ccode>lazy\u003C\u002Fcode> property in route object with React.lazy.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>React Router v6 is the most powerful routing library for React. Master loaders\u002Factions for data-driven apps.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Freact-router-v6.jpg","React Router",[223,225,226,191],"Routing","SPA","David Kim","2025-03-28",[],{"id":231,"slug":232,"title":233,"subtitle":234,"shortDescription":235,"description":236,"featureImage":237,"category":191,"tags":238,"author":241,"publishedDate":242,"featured":19,"relatedPosts":243,"tech":199},204,"react-useTransition-useDeferredValue-guide","useTransition and useDeferredValue: Taming Expensive Renders","Keep your app responsive during heavy UI updates","Learn React's concurrent rendering features – useTransition for marking non-urgent updates, useDeferredValue for deferring expensive re-renders. Practical examples and performance measurements.","\u003Ch2>Why Concurrent Features?\u003C\u002Fh2>\u003Cp>React 18 introduced concurrent rendering. Instead of blocking the main thread for expensive updates, you can mark some updates as 'transition' – letting urgent updates (like typing) jump ahead.\u003C\u002Fp>\u003Ch2>useTransition Example\u003C\u002Fh2>\u003Cpre>\u003Ccode>import { useTransition, useState } from 'react';\n\nfunction SearchPage() {\n  const [isPending, startTransition] = useTransition();\n  const [query, setQuery] = useState('');\n  const [results, setResults] = useState([]);\n\n  function handleChange(e) {\n    const value = e.target.value;\n    setQuery(value); \u002F\u002F urgent\n    startTransition(() => {\n      \u002F\u002F non-urgent: expensive filtering\n      const filtered = filterLargeList(value);\n      setResults(filtered);\n    });\n  }\n\n  return (\n    <div>\n      <input value={query} onChange={handleChange} \u002F>\n      {isPending && <Spinner \u002F>}\n      <Results data={results} \u002F>\n    <\u002Fdiv>\n  );\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>useDeferredValue Example\u003C\u002Fh2>\u003Cpre>\u003Ccode>const [query, setQuery] = useState('');\nconst deferredQuery = useDeferredValue(query);\n\u002F\u002F deferredQuery updates lag behind query\n\u002F\u002F perfect for expensive child components\n\nreturn <ExpensiveList searchTerm={deferredQuery} \u002F>;\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Impact\u003C\u002Fh2>\u003Cp>Without transitions, typing into an input that filters 10,000 items would feel janky. With useTransition, typing stays smooth – the expensive filter runs in the background.\u003C\u002Fp>\u003Ch2>Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Wrapping every state update in startTransition – overuse adds overhead\u003C\u002Fli>\u003Cli>Not showing pending indicator – users may think app is broken\u003C\u002Fli>\u003Cli>Using with synchronous external stores – requires useSyncExternalStore\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: Difference between useTransition and useDeferredValue?\u003C\u002Fstrong> useTransition gives you a pending flag and control over which update is urgent. useDeferredValue just gives you a delayed value without flag.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>Use useTransition for user-triggered updates (search, tabs, navigation). Use useDeferredValue for props that come from parent.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Fconcurrent-react.jpg",[191,239,65,240],"Concurrent","useTransition","Elena Rossi","2025-04-12",[],{"id":245,"slug":246,"title":247,"subtitle":248,"shortDescription":249,"description":250,"featureImage":251,"category":191,"tags":252,"author":255,"publishedDate":256,"featured":53,"relatedPosts":257,"tech":199},205,"react-suspense-data-fetching-patterns","React Suspense for Data Fetching: The Complete Guide","Declarative loading states and error boundaries","Master React Suspense with data fetching libraries like Relay, Next.js, or custom solutions. Learn to build seamless loading UX without waterfall requests.","\u003Ch2>What is Suspense?\u003C\u002Fh2>\u003Cp>Suspense lets components 'wait' for something before rendering – traditionally code splitting, now also data fetching. You wrap a component in \u003Ccode><Suspense fallback={...}>\u003C\u002Fcode>, and React handles loading states automatically.\u003C\u002Fp>\u003Ch2>Basic Usage\u003C\u002Fh2>\u003Cpre>\u003Ccode>import { Suspense } from 'react';\nimport UserProfile from '.\u002FUserProfile';\n\nfunction App() {\n  return (\n    <Suspense fallback={<LoadingSpinner \u002F>}>\n      <UserProfile userId={123} \u002F>\n    <\u002FSuspense>\n  );\n}\n\n\u002F\u002F UserProfile internally throws a promise to suspend\nfunction UserProfile({ userId }) {\n  const user = useSuspenseQuery(userId); \u002F\u002F from Relay or custom\n  return <div>{user.name}<\u002Fdiv>;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Custom Suspense Hook (Advanced)\u003C\u002Fh2>\u003Cpre>\u003Ccode>function useSuspenseData(url) {\n  const ref = useRef();\n  if (!ref.current) {\n    throw fetchData(url).then(result => ref.current = result);\n  }\n  return ref.current;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Tips\u003C\u002Fh2>\u003Cul>\u003Cli>Avoid nested Suspense boundaries unless necessary – each adds overhead\u003C\u002Fli>\u003Cli>Use Suspense with React.lazy for code splitting\u003C\u002Fli>\u003Cli>Combine with ErrorBoundary for graceful failures\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Not having a fallback – blank screen during loading\u003C\u002Fli>\u003Cli>Putting Suspense too high – entire page shows loading\u003C\u002Fli>\u003Cli>Forgetting error boundaries – unhandled promise rejections\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: How does Suspense avoid waterfall requests?\u003C\u002Fstrong> By letting components declare their data needs – React can fetch in parallel before rendering.\u003Cbr>\u003Cstrong>Q: Can I use Suspense without a library?\u003C\u002Fstrong> Yes, implement a promise-cache pattern.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>Suspense + error boundaries create a robust loading\u002Ferror UX. Start with React.lazy, then adopt data Suspense with Relay or Next.js.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Freact-suspense.jpg",[253,254,191,65],"Suspense","Data Fetching","James Liu","2025-04-08",[],{"id":259,"slug":260,"title":261,"subtitle":262,"shortDescription":263,"description":264,"featureImage":265,"category":195,"tags":266,"author":270,"publishedDate":271,"featured":19,"relatedPosts":272,"tech":199},206,"react-19-actions-useoptimistic","React 19 Actions and useOptimistic: The Future of Forms","Automatic pending states, optimistic updates, and form handling","Explore React 19's new Actions API, useOptimistic, useFormStatus, and how they simplify form submissions, mutations, and real-time UI updates.","\u003Ch2>What Are Actions?\u003C\u002Fh2>\u003Cp>React 19 introduces Actions – async functions passed to \u003Ccode>action\u003C\u002Fcode> prop on \u003Ccode><form>\u003C\u002Fcode>. React manages pending states, errors, and optimistic updates automatically.\u003C\u002Fp>\u003Ch2>Basic Form Action\u003C\u002Fh2>\u003Cpre>\u003Ccode>function UpdateName() {\n  async function updateName(formData) {\n    const name = formData.get('name');\n    await updateUser(name);\n  }\n\n  return (\n    <form action={updateName}>\n      <input name=\"name\" \u002F>\n      <button type=\"submit\">Update<\u002Fbutton>\n    <\u002Fform>\n  );\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>useOptimistic Hook\u003C\u002Fh2>\u003Cpre>\u003Ccode>function Thread({ messages, sendMessage }) {\n  const [optimisticMessages, addOptimistic] = useOptimistic(\n    messages,\n    (state, newMsg) => [...state, { ...newMsg, sending: true }]\n  );\n\n  async function formAction(formData) {\n    const message = formData.get('message');\n    addOptimistic({ text: message });\n    await sendMessage(message);\n  }\n\n  return (\n    <>\n      {optimisticMessages.map(m => <Message key={m.id} {...m} \u002F>)}\n      <form action={formAction}><input name=\"message\" \u002F><\u002Fform>\n    <\u002F>\n  );\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>useFormStatus (in child components)\u003C\u002Fh2>\u003Cpre>\u003Ccode>function SubmitButton() {\n  const { pending } = useFormStatus();\n  return <button disabled={pending}>{pending ? 'Saving...' : 'Submit'}<\u002Fbutton>;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Impact\u003C\u002Fh2>\u003Cp>Actions reduce boilerplate by 60% compared to manual loading\u002Ferror state management. Optimistic updates make UI feel instant.\u003C\u002Fp>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: How is useOptimistic different from just setting state optimistically?\u003C\u002Fstrong> useOptimistic automatically rolls back if the async action fails.\u003Cbr>\u003Cstrong>Q: Can Actions work with Server Actions (Next.js)?\u003C\u002Fstrong> Yes – same API works on client and server.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>React 19 Actions make form handling and mutations declarative. Adopt now – they're stable.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Freact19-actions.jpg",[195,267,268,269],"Actions","Forms","Optimistic UI","Maria Gonzalez","2025-04-15",[],{"id":274,"slug":275,"title":276,"subtitle":277,"shortDescription":278,"description":279,"featureImage":280,"category":281,"tags":282,"author":286,"publishedDate":287,"featured":53,"relatedPosts":288,"tech":199},207,"useref-mastery-dom-refs-instance-variables","useRef Mastery: DOM Refs, Instance Variables, and forwardRef","When and how to use refs – from basic DOM access to advanced imperative handles","Complete guide to useRef and refs in React – accessing DOM elements, storing mutable values without re-renders, forwarding refs, and building imperative component APIs.","\u003Ch2>Two Main Uses of useRef\u003C\u002Fh2>\u003Cp>1. \u003Cstrong>DOM refs:\u003C\u002Fstrong> Directly access HTML elements. 2. \u003Cstrong>Instance variables:\u003C\u002Fstrong> Store mutable values that persist across renders without causing re-renders.\u003C\u002Fp>\u003Ch2>DOM Ref Example\u003C\u002Fh2>\u003Cpre>\u003Ccode>function InputFocus() {\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    inputRef.current.focus();\n  }, []);\n\n  return <input ref={inputRef} \u002F>;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Instance Variable (no re-render)\u003C\u002Fh2>\u003Cpre>\u003Ccode>function Timer() {\n  const intervalRef = useRef(null);\n\n  const startTimer = () => {\n    intervalRef.current = setInterval(() => {}, 1000);\n  };\n\n  const stopTimer = () => {\n    clearInterval(intervalRef.current);\n  };\n\n  return <button onClick={stopTimer}>Stop<\u002Fbutton>;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>forwardRef + useImperativeHandle\u003C\u002Fh2>\u003Cpre>\u003Ccode>const FancyInput = forwardRef((props, ref) => {\n  const inputRef = useRef();\n\n  useImperativeHandle(ref, () => ({\n    focus: () => inputRef.current.focus(),\n    scrollToTop: () => inputRef.current.scrollTop = 0\n  }));\n\n  return <input ref={inputRef} \u002F>;\n});\n\nfunction Parent() {\n  const ref = useRef();\n  return <><FancyInput ref={ref} \u002F><button onClick={() => ref.current.focus()}>Focus<\u002Fbutton><\u002F>;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Tips\u003C\u002Fh2>\u003Cul>\u003Cli>Reading\u002Fwriting refs doesn't trigger re-renders – use for performance-critical mutable data\u003C\u002Fli>\u003Cli>Avoid setting refs during render – use effect or callbacks\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Using refs for state that should trigger UI updates\u003C\u002Fli>\u003Cli>Expecting ref changes to cause re-renders\u003C\u002Fli>\u003Cli>Not using forwardRef when passing ref to custom component\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: Difference between useRef and createRef?\u003C\u002Fstrong> useRef is for functional components (persists across renders). createRef is for class components.\u003Cbr>\u003Cstrong>Q: Can you use ref on a custom component?\u003C\u002Fstrong> Only if that component uses forwardRef.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>useRef is essential for imperative DOM operations and mutable storage. Master forwardRef and useImperativeHandle for reusable component APIs.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Fuseref-mastery.jpg","React Hooks",[283,284,285,281],"useRef","forwardRef","DOM","Priya Sharma","2025-04-02",[],{"id":290,"slug":291,"title":292,"subtitle":293,"shortDescription":294,"description":295,"featureImage":296,"category":208,"tags":297,"author":300,"publishedDate":301,"featured":53,"relatedPosts":302,"tech":199},208,"react-context-usereducer-scalable-state","React Context + useReducer: Scalable State Without Redux","Build a lightweight Redux-like store using only built-in React APIs","Learn to combine React Context with useReducer to create a scalable state management solution for small-to-medium apps – no external libraries needed. Includes TypeScript, performance optimizations, and testing.","\u003Ch2>Why Context + useReducer?\u003C\u002Fh2>\u003Cp>useReducer manages complex state logic. Context shares that state across the component tree. Together they replace Redux for many apps – without the boilerplate.\u003C\u002Fp>\u003Ch2>Implementation\u003C\u002Fh2>\u003Cpre>\u003Ccode>\u002F\u002F store\u002FtodoReducer.js\nexport const initialState = { todos: [], filter: 'all' };\n\nexport function todoReducer(state, action) {\n  switch (action.type) {\n    case 'ADD_TODO': return { ...state, todos: [...state.todos, action.payload] };\n    case 'TOGGLE_TODO': return { ...state, todos: state.todos.map(t => t.id === action.id ? { ...t, done: !t.done } : t) };\n    default: return state;\n  }\n}\n\n\u002F\u002F context\u002FTodoContext.jsx\nconst TodoContext = createContext();\n\nexport function TodoProvider({ children }) {\n  const [state, dispatch] = useReducer(todoReducer, initialState);\n  return <TodoContext.Provider value={{ state, dispatch }}>{children}<\u002FTodoContext.Provider>;\n}\n\nexport function useTodo() {\n  const context = useContext(TodoContext);\n  if (!context) throw new Error('useTodo must be used within TodoProvider');\n  return context;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Usage in Components\u003C\u002Fh2>\u003Cpre>\u003Ccode>function AddTodo() {\n  const { dispatch } = useTodo();\n  const [text, setText] = useState('');\n  return (\n    <form onSubmit={(e) => { e.preventDefault(); dispatch({ type: 'ADD_TODO', payload: { id: Date.now(), text, done: false } }); setText(''); }}>\n      <input value={text} onChange={e => setText(e.target.value)} \u002F>\n    <\u002Fform>\n  );\n}\n\nfunction TodoList() {\n  const { state } = useTodo();\n  return state.todos.map(todo => <div key={todo.id}>{todo.text}<\u002Fdiv>);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Optimization\u003C\u002Fh2>\u003Cp>The above pattern causes all consumers to re-render on any state change. Fix with selectors:\u003C\u002Fp>\u003Cpre>\u003Ccode>function useTodoSelector(selector) {\n  const { state } = useTodo();\n  return selector(state);\n}\n\n\u002F\u002F Then: const todos = useTodoSelector(state => state.todos);\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Putting the provider too high (re-renders entire app)\u003C\u002Fli>\u003Cli>Not memoizing dispatch actions\u003C\u002Fli>\u003Cli>Mutating state directly in reducer\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: When should you switch from Context+Reducer to Redux?\u003C\u002Fstrong> When you have frequent updates (many state changes per second), deeply nested selectors, or need devtools time-travel debugging.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>For small-to-medium apps, Context + useReducer is simpler and uses zero dependencies. Add selectors for performance.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Fcontext-reducer.jpg",[298,299,208,191],"Context API","useReducer","Tom Wilkinson","2025-03-25",[],{"id":304,"slug":305,"title":306,"subtitle":307,"shortDescription":308,"description":309,"featureImage":310,"category":191,"tags":311,"author":315,"publishedDate":316,"featured":53,"relatedPosts":317,"tech":199},209,"react-error-boundaries-error-handling","React Error Boundaries: Catching and Handling Errors Gracefully","Prevent entire app crashes with error boundaries and fallback UIs","Learn how to use React Error Boundaries to catch JavaScript errors in components, display fallback UI, log errors, and recover gracefully. Includes patterns for async errors and error recovery.","\u003Ch2>What Are Error Boundaries?\u003C\u002Fh2>\u003Cp>Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log them, and display a fallback UI instead of crashing the whole app.\u003C\u002Fp>\u003Ch2>Creating an Error Boundary (Class Component)\u003C\u002Fh2>\u003Cpre>\u003Ccode>class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    console.error('Logged:', error, errorInfo);\n    \u002F\u002F Send to Sentry\u002FLogRocket\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback || <div>Something went wrong<\u002Fdiv>;\n    }\n    return this.props.children;\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Using with Hooks (react-error-boundary library)\u003C\u002Fh2>\u003Cpre>\u003Ccode>import { ErrorBoundary } from 'react-error-boundary';\n\nfunction fallbackRender({ error, resetErrorBoundary }) {\n  return (\n    <div role=\"alert\">\n      <p>Something failed: {error.message}<\u002Fp>\n      <button onClick={resetErrorBoundary}>Try again<\u002Fbutton>\n    <\u002Fdiv>\n  );\n}\n\nfunction App() {\n  return (\n    <ErrorBoundary fallbackRender={fallbackRender} onReset={() => window.location.reload()}>\n      <MyComponent \u002F>\n    <\u002FErrorBoundary>\n  );\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Async Error Handling\u003C\u002Fh2>\u003Cp>Error boundaries don't catch errors in event handlers or async code. Use try\u002Fcatch:\u003C\u002Fp>\u003Cpre>\u003Ccode>function handleSubmit() {\n  try {\n    await saveData();\n  } catch (error) {\n    setError(error); \u002F\u002F display error in component state\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Production Tips\u003C\u002Fh2>\u003Cul>\u003Cli>Place boundaries at feature boundaries (e.g., each widget or route)\u003C\u002Fli>\u003Cli>Provide specific fallbacks per feature\u003C\u002Fli>\u003Cli>Log errors to monitoring service\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: Why are error boundaries class components?\u003C\u002Fstrong> Hooks have no equivalent for getDerivedStateFromError or componentDidCatch. The react-error-boundary library provides a hook-friendly wrapper.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>Error boundaries are essential for production React apps. Wrap each major UI section to prevent cascading failures.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Ferror-boundaries.jpg",[312,313,191,314],"Error Handling","Error Boundaries","Debugging","Nina Patel","2025-04-07",[],{"id":319,"slug":320,"title":321,"subtitle":322,"shortDescription":323,"description":324,"featureImage":325,"category":195,"tags":326,"author":330,"publishedDate":331,"featured":19,"relatedPosts":332,"tech":199},210,"react-compiler-forget-automatic-memoization","React Compiler (React Forget): Automatic Memoization Explained","Stop writing useMemo, useCallback, and React.memo – the compiler does it for you","Deep dive into React Compiler (formerly Forget) – how it automatically memoizes components, eliminates manual optimization, and improves performance. Includes adoption strategies and benchmarks.","\u003Ch2>What is React Compiler?\u003C\u002Fh2>\u003Cp>React Compiler is a build-time tool that automatically memoizes components – meaning you no longer need \u003Ccode>useMemo\u003C\u002Fcode>, \u003Ccode>useCallback\u003C\u002Fcode>, or \u003Ccode>React.memo\u003C\u002Fcode>. It analyzes your code and inserts memoization where beneficial.\u003C\u002Fp>\u003Ch2>How It Works\u003C\u002Fh2>\u003Cp>The compiler performs a static analysis of your component's dependencies (props, state, context). It determines which values can change and which remain stable, then automatically wraps components and hooks with memoization primitives.\u003C\u002Fp>\u003Ch2>Before (Manual)\u003C\u002Fh2>\u003Cpre>\u003Ccode>const ExpensiveList = React.memo(({ items, onItemClick }) => {\n  const sorted = useMemo(() => items.sort(), [items]);\n  const handleClick = useCallback((id) => onItemClick(id), [onItemClick]);\n  return <ul>{sorted.map(item => <li key={item.id} onClick={() => handleClick(item.id)}>{item.name}<\u002Fli>)}<\u002Ful>;\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>After (Compiler)\u003C\u002Fh2>\u003Cpre>\u003Ccode>function ExpensiveList({ items, onItemClick }) {\n  const sorted = items.sort();\n  const handleClick = (id) => onItemClick(id);\n  return <ul>{sorted.map(item => <li key={item.id} onClick={() => handleClick(item.id)}>{item.name}<\u002Fli>)}<\u002Ful>;\n}\n\u002F\u002F Compiler adds memoization automatically\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance Impact\u003C\u002Fh2>\u003Cp>Early benchmarks show 30-50% reduction in render time for complex apps. Code becomes simpler and less error-prone. No more incorrect dependency arrays or missing memoization.\u003C\u002Fp>\u003Ch2>Adoption Strategy\u003C\u002Fh2>\u003Col>\u003Cli>Enable compiler on a per-component basis with \u003Ccode>'use memo'\u003C\u002Fcode> directive\u003C\u002Fli>\u003Cli>Run codemod to remove existing manual memoization\u003C\u002Fli>\u003Cli>Test thoroughly – compiler respects existing memoization (won't break)\u003C\u002Fli>\u003C\u002Fol>\u003Ch2>Limitations\u003C\u002Fh2>\u003Cul>\u003Cli>Still experimental (as of React 19 beta)\u003C\u002Fli>\u003Cli>Doesn't work with dynamic imports or eval\u003C\u002Fli>\u003Cli>May increase bundle size slightly (but reduces runtime work)\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Interview Q&A\u003C\u002Fh2>\u003Cp>\u003Cstrong>Q: Will React Compiler replace useMemo\u002FuseCallback?\u003C\u002Fstrong> Eventually, yes – the goal is for manual hooks to become rare, only for advanced edge cases.\u003Cbr>\u003Cstrong>Q: Is React Compiler production-ready?\u003C\u002Fstrong> As of 2025 Q2, it's in beta. Major companies (Meta, Shopify) are testing internally.\u003C\u002Fp>\u003Ch2>Conclusion\u003C\u002Fh2>\u003Cp>React Compiler is the future of React performance. Start experimenting today – your code will become simpler and faster automatically.\u003C\u002Fp>","https:\u002F\u002Fcdn.example.com\u002Freact-compiler.jpg",[327,65,328,195,329],"React Compiler","Memoization","React Forget","Sophia Zhang","2025-04-14",[],{"id":98,"slug":334,"title":335,"subtitle":336,"shortDescription":337,"description":338,"featureImage":339,"category":340,"tags":341,"author":344,"publishedDate":345,"featured":19,"relatedPosts":346,"tech":347},"mastering-vue-3-composition-api","Mastering Vue 3 Composition API","A deep dive into reactive state management","Explore the Vue 3 Composition API and learn how to build scalable, maintainable applications with reactive state, composables, and the setup() function.","\u003Cp>The Vue 3 Composition API represents a fundamental shift in how we organize and reuse component logic. Unlike the Options API, the Composition API lets you group related logic together, making complex components far easier to understand and maintain.\u003C\u002Fp>\u003Ch2>Why the Composition API?\u003C\u002Fh2>\u003Cp>When components grow beyond a few hundred lines, the Options API can become difficult to navigate — related logic is split across \u003Ccode>data\u003C\u002Fcode>, \u003Ccode>methods\u003C\u002Fcode>, \u003Ccode>computed\u003C\u002Fcode>, and \u003Ccode>watch\u003C\u002Fcode>. The Composition API solves this by letting you co-locate logic by feature.\u003C\u002Fp>\u003Ch2>Key Concepts\u003C\u002Fh2>\u003Cp>\u003Cstrong>setup()\u003C\u002Fstrong> is the entry point for Composition API code. It runs before the component is created, so \u003Ccode>this\u003C\u002Fcode> is unavailable. Instead, you use \u003Ccode>ref()\u003C\u002Fcode> and \u003Ccode>reactive()\u003C\u002Fcode> to declare state.\u003C\u002Fp>\u003Cp>\u003Cstrong>Composables\u003C\u002Fstrong> are the real power — reusable functions that encapsulate and return reactive state. Think of them as Vue's answer to React Hooks.\u003C\u002Fp>\u003Ch2>Practical Example\u003C\u002Fh2>\u003Cp>A \u003Ccode>useCounter()\u003C\u002Fcode> composable returns \u003Ccode>count\u003C\u002Fcode>, \u003Ccode>increment\u003C\u002Fcode>, and \u003Ccode>decrement\u003C\u002Fcode>, and can be reused across any component. This pattern scales beautifully to complex state management without reaching for Vuex or Pinia prematurely.\u003C\u002Fp>\u003Cp>The Composition API isn't just syntactic sugar — it unlocks TypeScript inference, tree-shaking, and a cleaner mental model for complex component logic.\u003C\u002Fp>","https:\u002F\u002Fextensive-amber-3i6-draft.caffeine.xyz\u002Fassets\u002Fgenerated\u002Fblog-vue-mastery.dim_800x450.jpg","Vue.js",[340,12,342,343],"Composition API","Frontend","Alex Chen","2024-03-15",[113,114],"vue",{"id":113,"slug":349,"title":350,"subtitle":351,"shortDescription":352,"description":353,"featureImage":354,"category":191,"tags":355,"author":344,"publishedDate":357,"featured":19,"relatedPosts":358,"tech":347},"advanced-react-patterns-2024","Advanced React Patterns in 2024","Compound components, render props, and hooks deep dive","Discover the most powerful React patterns for building flexible, reusable component libraries — compound components, render props, custom hooks, and the latest React 19 features.","\u003Cp>React's component model is deceptively simple, but mastering advanced patterns unlocks a whole new level of expressiveness and reusability. In 2024, with React 19 stable, these patterns have never been more powerful.\u003C\u002Fp>\u003Ch2>Compound Components\u003C\u002Fh2>\u003Cp>Compound components share implicit state through React Context, giving consumers a clean API while hiding the complexity. The classic example is a custom \u003Ccode><Select>\u003C\u002Fcode> with \u003Ccode><Select.Option>\u003C\u002Fcode> children — each child knows about the parent's selected value without explicit prop drilling.\u003C\u002Fp>\u003Ch2>Custom Hooks\u003C\u002Fh2>\u003Cp>Hooks are React's composability story. A well-crafted \u003Ccode>useAsync()\u003C\u002Fcode> hook handles loading, error, and data states uniformly across your application. Combine it with \u003Ccode>useCallback\u003C\u002Fcode> for stable references and you have a production-ready data-fetching primitive.\u003C\u002Fp>\u003Ch2>React 19 Improvements\u003C\u002Fh2>\u003Cp>React 19 introduces the \u003Ccode>use()\u003C\u002Fcode> hook for reading resources, improved server components, and the Actions API for form handling. These aren't just incremental improvements — they reshape how we think about async in React components.\u003C\u002Fp>\u003Cp>Understanding these patterns deeply will make you a better library author and a more thoughtful component designer.\u003C\u002Fp>","\u002Fassets\u002Fgenerated\u002Fblog-react-patterns.dim_800x450.jpg",[191,12,211,356,343],"Patterns","2024-04-02",[98,114],{"id":114,"slug":360,"title":361,"subtitle":362,"shortDescription":363,"description":364,"featureImage":365,"category":366,"tags":367,"author":344,"publishedDate":370,"featured":53,"relatedPosts":371,"tech":347},"tailwind-css-design-systems","Building Design Systems with Tailwind CSS","From tokens to components — a systematic approach","Learn how to architect a robust design system using Tailwind CSS, OKLCH color tokens, and component variants that scale across large teams and diverse products.","\u003Cp>Tailwind CSS has transformed front-end development, but its true power emerges when you use it as the foundation of a systematic design language — not just a utility library.\u003C\u002Fp>\u003Ch2>Design Tokens First\u003C\u002Fh2>\u003Cp>Great design systems start with tokens: semantic color aliases, spacing scales, and typography definitions. With Tailwind's CSS variable support and OKLCH colors, you can build tokens that work perfectly across light and dark modes with predictable perceptual contrast.\u003C\u002Fp>\u003Ch2>Component Variants with CVA\u003C\u002Fh2>\u003Cp>\u003Ccode>class-variance-authority\u003C\u002Fcode> (CVA) brings type-safe component variants to Tailwind. Define your \u003Ccode>Button\u003C\u002Fcode> with variants like \u003Ccode>variant\u003C\u002Fcode> and \u003Ccode>size\u003C\u002Fcode>, and CVA handles the conditional class logic cleanly. No more ternary soup in your JSX.\u003C\u002Fp>\u003Ch2>Dark Mode Done Right\u003C\u002Fh2>\u003Cp>Don't just invert colors — rethink them. OKLCH lets you maintain perceptual brightness and saturation relationships across themes. A primary blue at L:0.5 in light mode should be L:0.62 in dark mode to feel equally prominent.\u003C\u002Fp>\u003Cp>A systematic approach to Tailwind pays dividends as your product scales — consistent spacing, predictable hover states, and a single source of truth for every visual decision.\u003C\u002Fp>","https:\u002F\u002Fextensive-amber-3i6-draft.caffeine.xyz\u002Fassets\u002Fgenerated\u002Fblog-tailwind-design.dim_800x450.jpg","CSS",[368,369,366,343],"Tailwind CSS","Design Systems","2024-04-18",[98,113],{"id":373,"slug":374,"title":375,"subtitle":376,"shortDescription":377,"description":378,"featureImage":379,"category":340,"tags":380,"author":17,"publishedDate":382,"featured":19,"relatedPosts":383,"tech":347},7,"vue-35-new-features","Vue 3.5 New Features: Complete Overview","Exploring the latest improvements in Vue 3.5","Vue 3.5 introduces reactive props destructuring, improved SSR, and performance enhancements.","Vue 3.5 brings several exciting features that improve developer experience and application performance. Let's dive into what's new.\n\n## Reactive Props Destructuring\n\n```vue\n\u003Cscript setup>\nconst { title, count = 0 } = defineProps(['title', 'count'])\n\u003C\u002Fscript>\n```\n\nProps are now reactive when destructured in `\u003Cscript setup>`. This was a highly requested feature!\n\n## useTemplateRef()\n\n```vue\n\u003Cscript setup>\nimport { useTemplateRef, onMounted } from 'vue'\n\nconst inputRef = useTemplateRef('input')\n\nonMounted(() => {\n  inputRef.value?.focus()\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput ref=\"input\" \u002F>\n\u003C\u002Ftemplate>\n```\n\n## Deferred Teleport\n\n```vue\n\u003CTeleport defer to=\"#container\">\n  \u003Cdiv>Teleported content\u003C\u002Fdiv>\n\u003C\u002FTeleport>\n```\n\nThe `defer` attribute ensures the target element exists before teleporting.\n\n## Performance Improvements\n\n- 56% faster SSR\n- Improved memory usage in reactive system\n- Better tree-shaking support\n\n## Migration\n\nUpgrade is seamless for most applications:\n\n```bash\nnpm update vue\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1614624532983-4ce03382d63d?w=800&auto=format&fit=crop",[381,340,343,110],"Vue 3.5","2026-04-18",[384,385,386],8,9,10,{"id":384,"slug":388,"title":389,"subtitle":390,"shortDescription":391,"description":392,"featureImage":393,"category":340,"tags":394,"author":17,"publishedDate":395,"featured":19,"relatedPosts":396,"tech":347},"vue-composition-api-complete-guide","Vue Composition API: Complete Guide","Master the Composition API for better code organization","Learn how to use the Composition API to write more maintainable Vue applications.","The Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options.\n\n## Why Composition API?\n\n1. Better logic reuse through composables\n2. More flexible code organization\n3. Better TypeScript integration\n4. Improved tree-shaking\n\n## Reactive State\n\n```vue\n\u003Cscript setup>\nimport { ref, reactive, computed } from 'vue'\n\n\u002F\u002F Primitive values\nconst count = ref(0)\n\n\u002F\u002F Objects\nconst user = reactive({\n  name: 'Satish',\n  role: 'Developer'\n})\n\n\u002F\u002F Computed\nconst doubleCount = computed(() => count.value * 2)\n\nfunction increment() {\n  count.value++\n}\n\u003C\u002Fscript>\n```\n\n## Watchers\n\n```js\nimport { watch, watchEffect } from 'vue'\n\n\u002F\u002F Watch specific source\nwatch(count, (newVal, oldVal) => {\n  console.log(`Count changed from ${oldVal} to ${newVal}`)\n})\n\n\u002F\u002F Auto-track dependencies\nwatchEffect(() => {\n  console.log(`Count is: ${count.value}`)\n})\n```\n\n## Lifecycle Hooks\n\n```js\nimport { onMounted, onUnmounted } from 'vue'\n\nonMounted(() => {\n  console.log('Component mounted')\n})\n\nonUnmounted(() => {\n  console.log('Component unmounted')\n})\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1627398242454-45a1465c2479?w=800&auto=format&fit=crop",[342,340,51,128],"2026-04-12",[373,385,397],11,{"id":385,"slug":399,"title":400,"subtitle":401,"shortDescription":402,"description":403,"featureImage":404,"category":340,"tags":405,"author":17,"publishedDate":408,"featured":53,"relatedPosts":409,"tech":347},"vue-composables-patterns","Vue Composables: Patterns and Best Practices","Building reusable logic with composables","Learn how to create and use composables effectively in your Vue applications.","Composables are functions that leverage Vue's Composition API to encapsulate and reuse stateful logic.\n\n## Creating a Composable\n\n```js\n\u002F\u002F composables\u002FuseMouse.js\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nexport function useMouse() {\n  const x = ref(0)\n  const y = ref(0)\n\n  function update(event) {\n    x.value = event.pageX\n    y.value = event.pageY\n  }\n\n  onMounted(() => window.addEventListener('mousemove', update))\n  onUnmounted(() => window.removeEventListener('mousemove', update))\n\n  return { x, y }\n}\n```\n\n## Using Composables\n\n```vue\n\u003Cscript setup>\nimport { useMouse } from '@\u002Fcomposables\u002FuseMouse'\n\nconst { x, y } = useMouse()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>Mouse position: {{ x }}, {{ y }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n```\n\n## Async Composable Pattern\n\n```js\nexport function useFetch(url) {\n  const data = ref(null)\n  const error = ref(null)\n  const loading = ref(true)\n\n  fetch(url)\n    .then(res => res.json())\n    .then(json => {\n      data.value = json\n    })\n    .catch(err => {\n      error.value = err\n    })\n    .finally(() => {\n      loading.value = false\n    })\n\n  return { data, error, loading }\n}\n```\n\n## Best Practices\n\n1. Start with `use` prefix\n2. Return refs, not raw values\n3. Handle cleanup in `onUnmounted`\n4. Keep composables focused and small","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-bf19f8fd1085?w=800&auto=format&fit=crop",[406,342,407,356],"Composables","Reusability","2026-04-08",[373,384,386],{"id":386,"slug":411,"title":412,"subtitle":413,"shortDescription":414,"description":415,"featureImage":416,"category":340,"tags":417,"author":17,"publishedDate":421,"featured":53,"relatedPosts":422,"tech":347},"vue-navigation-guards","Vue Router Navigation Guards Explained","Controlling navigation flow in Vue applications","Master Vue Router navigation guards for authentication and route protection.","Navigation guards allow you to control navigation in your Vue application. Let's explore all types of guards.\n\n## Global Guards\n\n```js\nrouter.beforeEach((to, from) => {\n  if (to.meta.requiresAuth && !isAuthenticated()) {\n    return { name: 'login' }\n  }\n})\n\nrouter.afterEach((to, from) => {\n  sendAnalytics(to.fullPath)\n})\n```\n\n## Per-Route Guards\n\n```js\nconst routes = [\n  {\n    path: '\u002Fdashboard',\n    component: Dashboard,\n    beforeEnter: (to, from) => {\n      if (!hasPermission()) {\n        return '\u002Funauthorized'\n      }\n    }\n  }\n]\n```\n\n## In-Component Guards\n\n```vue\n\u003Cscript setup>\nimport { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'\n\nonBeforeRouteLeave((to, from) => {\n  if (hasUnsavedChanges.value) {\n    return confirm('Discard changes?')\n  }\n})\n\nonBeforeRouteUpdate((to, from) => {\n  \u002F\u002F Fetch new data when route params change\n  fetchData(to.params.id)\n})\n\u003C\u002Fscript>\n```\n\n## Route Meta Fields\n\n```js\n{\n  path: '\u002Fadmin',\n  meta: { requiresAuth: true, roles: ['admin'] },\n  component: AdminPanel\n}\n```\n\n## Navigation Resolution Flow\n\n1. beforeRouteLeave (component)\n2. beforeEach (global)\n3. beforeEnter (route)\n4. beforeRouteEnter (component)\n5. afterEach (global)","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1558618666-fcd25c85cd64?w=800&auto=format&fit=crop",[418,419,420,140],"Vue Router","Navigation Guards","Authentication","2026-04-02",[384,385,397],{"id":397,"slug":424,"title":425,"subtitle":426,"shortDescription":427,"description":428,"featureImage":429,"category":340,"tags":430,"author":17,"publishedDate":434,"featured":19,"relatedPosts":435,"tech":347},"pinia-vs-vuex-comparison","Pinia vs Vuex: Which Should You Choose?","A comprehensive comparison of Vue state management solutions","Comparing Pinia and Vuex to help you choose the right state management for your project.","Pinia is now the official state management solution for Vue. Let's compare it with Vuex to understand the differences.\n\n## Pinia Example\n\n```js\nimport { defineStore } from 'pinia'\n\nexport const useUserStore = defineStore('user', {\n  state: () => ({\n    name: '',\n    isLoggedIn: false\n  }),\n  \n  getters: {\n    greeting: (state) => `Hello, ${state.name}!`\n  },\n  \n  actions: {\n    async login(credentials) {\n      const user = await api.login(credentials)\n      this.name = user.name\n      this.isLoggedIn = true\n    }\n  }\n})\n```\n\n## Key Differences\n\n| Feature | Pinia | Vuex |\n|---------|-------|------|\n| Mutations | No | Yes |\n| TypeScript | Excellent | Good |\n| Devtools | Built-in | Built-in |\n| Bundle Size | ~1KB | ~10KB |\n| Modules | Flat stores | Nested |\n\n## Pinia Composition Style\n\n```js\nexport const useCounterStore = defineStore('counter', () => {\n  const count = ref(0)\n  const doubleCount = computed(() => count.value * 2)\n  \n  function increment() {\n    count.value++\n  }\n  \n  return { count, doubleCount, increment }\n})\n```\n\n## Recommendation\n\n**Choose Pinia** for new projects - it's simpler, more intuitive, and officially recommended.\n\n**Migrate from Vuex** when possible - the migration path is straightforward.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1633356122544-f134324a6cee?w=800&auto=format&fit=crop",[431,432,208,433],"Pinia","Vuex","Comparison","2026-03-25",[373,384,385],{"id":437,"slug":438,"title":439,"subtitle":440,"shortDescription":441,"description":442,"featureImage":443,"category":340,"tags":444,"author":17,"publishedDate":446,"featured":53,"relatedPosts":447,"tech":347},12,"vue-performance-optimization","Vue.js Performance Optimization: Advanced Guide","Techniques to make your Vue apps lightning fast","Advanced performance optimization techniques for Vue.js applications.","Performance is crucial for user experience. Let's explore advanced optimization techniques for Vue.js.\n\n## Virtual Scrolling\n\nFor large lists, use virtual scrolling:\n\n```vue\n\u003Cscript setup>\nimport { useVirtualList } from '@vueuse\u002Fcore'\n\nconst { list, containerProps, wrapperProps } = useVirtualList(\n  largeArray,\n  { itemHeight: 50 }\n)\n\u003C\u002Fscript>\n```\n\n## Lazy Loading Components\n\n```js\nconst HeavyComponent = defineAsyncComponent(() =>\n  import('.\u002FHeavyComponent.vue')\n)\n```\n\n## v-once for Static Content\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv v-once>\n    \u003Ch1>{{ staticTitle }}\u003C\u002Fh1>\n    \u003CComplexStaticTree \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## v-memo for Expensive Updates\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv v-memo=\"[item.id, item.selected]\">\n    \u003CExpensiveComponent :item=\"item\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## Computed vs Methods\n\nAlways prefer computed for derived values:\n\n```js\n\u002F\u002F Good - cached\nconst filteredList = computed(() => \n  list.value.filter(item => item.active)\n)\n\n\u002F\u002F Bad - recalculates every render\nfunction getFilteredList() {\n  return list.value.filter(item => item.active)\n}\n```\n\n## Key Takeaways\n\n1. Profile before optimizing\n2. Use Vue Devtools performance tab\n3. Lazy load routes and components\n4. Avoid unnecessary reactivity","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1460925895917-afdab827c52f?w=800&auto=format&fit=crop",[65,445,51,36],"Optimization","2026-03-18",[373,384,397],1779734542281]