<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Techcookies</title>
    <link>https://techcookies.com</link>
    <description>JavaScript, React, Next.js, AWS and serverless tutorials for developers</description>
    <language>en-us</language>
    <atom:link href="https://techcookies.com/feed.xml" rel="self" type="application/rss+xml"/>
    <item>
      <title><![CDATA[JavaScript Arrays & Their Methods]]></title>
      <link>https://techcookies.com/posts/javascript-arrays-their-methods</link>
      <guid isPermaLink="true">https://techcookies.com/posts/javascript-arrays-their-methods</guid>
      <description><![CDATA[Most JavaScript bugs do not come from complicated logic. They often happen because the method does not fit the task. In interviews and real-world code, the strongest answer is rarely "I can make it work." It is "I can choose the method that makes the code easier to understand."]]></description>
      <pubDate>Fri, 01 May 2026 16:19:02 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Design System Interview Guide — React Ecosystem]]></title>
      <link>https://techcookies.com/posts/design-system-interview-guide-react-ecosystem</link>
      <guid isPermaLink="true">https://techcookies.com/posts/design-system-interview-guide-react-ecosystem</guid>
      <description><![CDATA["How do you build a consistent, reusable UI library for your product?" It's a collection of UI components, design tokens, and guidelines that teams use to build consistent user interfaces across products.]]></description>
      <pubDate>Thu, 30 Apr 2026 05:49:41 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Frontend System Design — Complete Interview Guide]]></title>
      <link>https://techcookies.com/posts/frontend-system-design-complete-interview-guide</link>
      <guid isPermaLink="true">https://techcookies.com/posts/frontend-system-design-complete-interview-guide</guid>
      <description><![CDATA[A comprehensive guide covering famous interview questions and in-depth explanations of all core system design topics for mid and senior frontend engineers.]]></description>
      <pubDate>Wed, 29 Apr 2026 05:33:57 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Hexagonal Architecture and DDD]]></title>
      <link>https://techcookies.com/posts/hexagonal-architecture-ddd</link>
      <guid isPermaLink="true">https://techcookies.com/posts/hexagonal-architecture-ddd</guid>
      <description><![CDATA["How do we build software where the business logic is completely independent of databases, frameworks, UIs, and external APIs — so we can swap any of them without touching the business code?"]]></description>
      <pubDate>Tue, 28 Apr 2026 18:13:47 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Domain-Driven Design Architecture]]></title>
      <link>https://techcookies.com/posts/domain-driven-design</link>
      <guid isPermaLink="true">https://techcookies.com/posts/domain-driven-design</guid>
      <description><![CDATA[Domain-Driven Design (DDD) is a way of building software where the business problem drives every design decision. The code should mirror the real world so closely that a business person — someone who has never written code — can read it and understand what it does.]]></description>
      <pubDate>Sun, 26 Apr 2026 18:30:00 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Javascript array methods]]></title>
      <link>https://techcookies.com/posts/Javascript-array-methods</link>
      <guid isPermaLink="true">https://techcookies.com/posts/Javascript-array-methods</guid>
      <description><![CDATA[An array in JavaScript is a data structure that can be used to store fixed or variable number of elements. JavaScript has multple built-in methods that can be used for unique functionalities.]]></description>
      <pubDate>Fri, 04 Oct 2024 16:51:35 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Mutation observer API using ReactJS and TypeScript.]]></title>
      <link>https://techcookies.com/posts/mutation-observer-using-react-typescript</link>
      <guid isPermaLink="true">https://techcookies.com/posts/mutation-observer-using-react-typescript</guid>
      <description><![CDATA[We have learned about Mutation observer API in our last blog, you can refer for basics and details. In this blog we'll learn how we can implement it in ReactJS using TypeScript. Mutation observer is an built-in JavaScript API that watch for changes made to the DOM tree and fires a callback function when it detects a change.
tags: JavaScript, ReactJS, TypeScript]]></description>
      <pubDate>Tue, 01 Oct 2024 16:59:31 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Mutation observer API]]></title>
      <link>https://techcookies.com/posts/mutation-observer-api</link>
      <guid isPermaLink="true">https://techcookies.com/posts/mutation-observer-api</guid>
      <description><![CDATA[Mutation observer is an built-in JavaScript API that watch for changes made to the DOM tree and fires a callback function when it detects a change. Syntax is very similar to other JavaScript observer APIs - Intersection observer API and Resize observer API. Changes are passed using callback function as first arguments as a list of MutationRecord objects.]]></description>
      <pubDate>Sat, 28 Sep 2024 16:47:20 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Javascript Resize Observer]]></title>
      <link>https://techcookies.com/posts/javascript-resize-observer</link>
      <guid isPermaLink="true">https://techcookies.com/posts/javascript-resize-observer</guid>
      <description><![CDATA[Resize Observer is the most preferred way to detect element size changes and makes changing content/styles or any custom action on a page based on resizing. The Resize Observer API provides a performant mechanism by which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes.]]></description>
      <pubDate>Sun, 22 Sep 2024 16:54:10 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[CSS Container Queries]]></title>
      <link>https://techcookies.com/posts/CSS-container-queries</link>
      <guid isPermaLink="true">https://techcookies.com/posts/CSS-container-queries</guid>
      <description><![CDATA[CSS container queries allow us to style an element with regard to its parent or container size (width and height), not the viewport size like with media query. It allow us to organize our style elements at one place and plan our layout better.]]></description>
      <pubDate>Sat, 21 Sep 2024 16:45:40 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Use intersection observer api with react and typescript]]></title>
      <link>https://techcookies.com/posts/Use-intersection-observer-api-with-react-and-typescript</link>
      <guid isPermaLink="true">https://techcookies.com/posts/Use-intersection-observer-api-with-react-and-typescript</guid>
      <description><![CDATA[We have learned about Intersection observer API in our last blog, you can refer for basics and details. In this blog we'll learn how we can implement it in ReactJS using TypeScript Intersection observer API helps detect the visibility of an element, i.e. if it’s in the current viewport, and also the relative visibility of two elements in relationship to each other - triggering a callback function.]]></description>
      <pubDate>Fri, 20 Sep 2024 16:43:29 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Understand intersection observer API]]></title>
      <link>https://techcookies.com/posts/Understand-intersection-observer-api</link>
      <guid isPermaLink="true">https://techcookies.com/posts/Understand-intersection-observer-api</guid>
      <description><![CDATA[JavaScript has 3 observer based APIs, one being Intersection and other two being Resize Observer and Mutation Observer. Intersection Observer in my opinion is the most useful because of how easy it makes things like infinite scrolling, lazing loading images, and scroll based animations. In JavaScript, attaching an event listener on 'scroll' to constantly trigger callback function on scroll can be performance-intensive, and if may end up having a sluggish user experience. Intersection Observer API helps build a better and well performant UI.]]></description>
      <pubDate>Thu, 19 Sep 2024 16:41:02 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Understanding context of self and this]]></title>
      <link>https://techcookies.com/posts/understanding-context-of-self-and-this</link>
      <guid isPermaLink="true">https://techcookies.com/posts/understanding-context-of-self-and-this</guid>
      <description><![CDATA[By default self refers to window object. Actually self is window.self which is different to this. If we are using a function that is executed in the global scope and is not in strict mode, this defaults to window.]]></description>
      <pubDate>Wed, 04 Sep 2024 16:39:07 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Broadcast channel with react and typescript]]></title>
      <link>https://techcookies.com/posts/broadcast-channel-with-react-typescript</link>
      <guid isPermaLink="true">https://techcookies.com/posts/broadcast-channel-with-react-typescript</guid>
      <description><![CDATA[Let's assume we have a scenario where we want to logout our opened application in another tab/window in the same browser in a React application or we have similar scenarios mentioned below]]></description>
      <pubDate>Tue, 03 Sep 2024 16:37:30 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Handling broadcast channel on same page using JavaScript.]]></title>
      <link>https://techcookies.com/posts/handling-broadcast-channel-on-same-page</link>
      <guid isPermaLink="true">https://techcookies.com/posts/handling-broadcast-channel-on-same-page</guid>
      <description><![CDATA[Let's assume, we have a requirement for the same where we want to broadcast to the same page, for example, if from profile page we have triggered logout and want this to reflect to the other tab and i have receiving event listener on the same page. We can achieve this using 2 BroadcastChannel, following steps can help achieve the same.]]></description>
      <pubDate>Sun, 01 Sep 2024 16:35:42 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Broadcast Channel API]]></title>
      <link>https://techcookies.com/posts/broadcast-channel-API</link>
      <guid isPermaLink="true">https://techcookies.com/posts/broadcast-channel-API</guid>
      <description><![CDATA[JavaScript offer many APIs for communication across different sections of an web application or with other web applications. 1. Broadcast channel 2. MessageChannel API 3. Window.postMessage() 4. Shared workers.]]></description>
      <pubDate>Mon, 26 Aug 2024 16:33:35 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Understand proxy and reflect API]]></title>
      <link>https://techcookies.com/posts/understand-proxy-and-reflect-api</link>
      <guid isPermaLink="true">https://techcookies.com/posts/understand-proxy-and-reflect-api</guid>
      <description><![CDATA[Proxies enable us to intercept and customize operations performed on objects (such as  like reading/writing properties). They are a metaprogramming feature.]]></description>
      <pubDate>Sat, 24 Aug 2024 16:32:24 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Understanding big O notation]]></title>
      <link>https://techcookies.com/posts/uderstanding-big-O-notation</link>
      <guid isPermaLink="true">https://techcookies.com/posts/uderstanding-big-O-notation</guid>
      <description><![CDATA[Big O notation is a mathematical notation used to describe the upper bound or worst-case scenario of the runtime complexity of an algorithm in terms of the input size.
In simple terms Big O notation helps us determine, "How code slows as data grows."]]></description>
      <pubDate>Sat, 17 Aug 2024 16:31:11 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Stack and queue in typescript]]></title>
      <link>https://techcookies.com/posts/Stack-and-queue-in-typescript</link>
      <guid isPermaLink="true">https://techcookies.com/posts/Stack-and-queue-in-typescript</guid>
      <description><![CDATA[A queue is a linear data structure that stores the elements sequentially. It uses FIFO, First and First Out approach. Where as, Stack follows LIFO, Last in First Out approach that is allows insertion and deletion operations from one end of the stack, that is top.]]></description>
      <pubDate>Fri, 16 Aug 2024 16:29:18 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Deep copy in JavaScript]]></title>
      <link>https://techcookies.com/posts/deep-copy-in-javascript</link>
      <guid isPermaLink="true">https://techcookies.com/posts/deep-copy-in-javascript</guid>
      <description><![CDATA[Deep copy is a technique where we recursively copy values of proprties without retaining its parent/original object reference. Unfortunately, JavaScript doesn't have any in-build method yet for deep copy.]]></description>
      <pubDate>Mon, 25 Dec 2023 12:26:17 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Method chaining in JavaScript]]></title>
      <link>https://techcookies.com/posts/method-chaining-in-javascript</link>
      <guid isPermaLink="true">https://techcookies.com/posts/method-chaining-in-javascript</guid>
      <description><![CDATA[Method chaining is a pattern of calling a method on another method of the same object. JavaScript this keyword refers to the current object in which it is called so if we return this from chained functions, we are actually passing entire object's context as input to next function.]]></description>
      <pubDate>Sat, 16 Dec 2023 12:23:33 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Understanding Generator functions]]></title>
      <link>https://techcookies.com/posts/Understanding-Generator-functions</link>
      <guid isPermaLink="true">https://techcookies.com/posts/Understanding-Generator-functions</guid>
      <description><![CDATA[Generators are function definition that lazly, on demand returns synchronous iteratables. Lazy means here, it (generator function) doesn't execute immediately when invoked, we can fetch data explicitly whenever you need. ]]></description>
      <pubDate>Sun, 27 Nov 2022 18:30:00 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[How module works in DenoJS]]></title>
      <link>https://techcookies.com/posts/How-module-works-in-DenoJS</link>
      <guid isPermaLink="true">https://techcookies.com/posts/How-module-works-in-DenoJS</guid>
      <description><![CDATA[Deno supports es6 module system that means each module will have separate file and JavaScript's import and export statement would work here. Unlike NodeJS, we'll have to explicitly mention file name extension while import.]]></description>
      <pubDate>Thu, 28 Apr 2022 13:09:41 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Understanding useMemo hook of ReactJS]]></title>
      <link>https://techcookies.com/posts/Understanding-useMemo-hook-of-ReactJS</link>
      <guid isPermaLink="true">https://techcookies.com/posts/Understanding-useMemo-hook-of-ReactJS</guid>
      <description><![CDATA[useMemo returns a memorized value, primary purpose of this hook is to optimize performance. It remembers the results of output for a given set of inputs. React re-renders the component and entire child component hierarchy when an update is made and when this re-rendering involves some heavy computation, it may degrade the performance and poor user experience.]]></description>
      <pubDate>Tue, 26 Apr 2022 13:16:52 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Understanding useCallback hook of ReactJS]]></title>
      <link>https://techcookies.com/posts/Understanding-useCallback-hook-of-ReactJS</link>
      <guid isPermaLink="true">https://techcookies.com/posts/Understanding-useCallback-hook-of-ReactJS</guid>
      <description><![CDATA[useCallback hook helps create memorized callback. useCallback memoizes our callback functions, so they not recreated on every re-render. Using useCallback correctly can improve the performance of our app significantly.]]></description>
      <pubDate>Tue, 19 Apr 2022 13:14:27 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Understanding for-in and for-of loop of JavaScript]]></title>
      <link>https://techcookies.com/posts/Understanding-for-in-and-for-of-loop-of-JavaScript</link>
      <guid isPermaLink="true">https://techcookies.com/posts/Understanding-for-in-and-for-of-loop-of-JavaScript</guid>
      <description><![CDATA[Understanding for-in and for-of loop]]></description>
      <pubDate>Sun, 17 Apr 2022 13:12:23 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Git cheat sheet]]></title>
      <link>https://techcookies.com/posts/git-cheat-sheet</link>
      <guid isPermaLink="true">https://techcookies.com/posts/git-cheat-sheet</guid>
      <description><![CDATA[Git is the free and open source distributed version control system that's responsible for everything GitHub
related that happens locally on your computer. This cheat sheet features the most important and commonly used Git commands for easy reference.]]></description>
      <pubDate>Fri, 29 Nov 2019 13:07:52 GMT</pubDate>
    </item>
    <item>
      <title><![CDATA[Angular life cycle hooks]]></title>
      <link>https://techcookies.com/posts/angular-life-cycle-hooks</link>
      <guid isPermaLink="true">https://techcookies.com/posts/angular-life-cycle-hooks</guid>
      <description><![CDATA[Angular manages creation, initialization, rendering, data-binding and removal of component and its child components. Angular offers life cycle hooks that provide more control over these key life moments and the ability to act when they occur.]]></description>
      <pubDate>Sun, 17 Nov 2019 13:18:20 GMT</pubDate>
    </item>
  </channel>
</rss>