Blog
Learn frontend skills in-depth at Frontendly, where we dive into React, TypeScript, JavaScript, Algorithm, CSS, and more, all in a clear and practical fashion.
![React Compiler – What, Why & How?](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2024%2F06%2F12115649%2Freact-compile-thumb-1200x663.png&w=3840&q=75)
React Compiler – What, Why & How?
Discover how the React Compiler optimises apps by auto-memoizing code, eliminating the need for useMemo, useCallback, and React.memo, ensuring more efficient updates.
![SSG, SSR, ISR, CSR Rendering Strategies in NextJS](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2024%2F03%2F06012223%2Fnextjs-rendering-1200x663.png&w=3840&q=75)
SSG, SSR, ISR, CSR Rendering Strategies in NextJS
Dive into how SSG, SSR, ISR, and CSR in NextJS can boost performance and efficiency.
![Server and Client Component – NextJS](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F12%2F15093311%2Fnextjs-server-client-component-1200x663.png&w=3840&q=75)
Server and Client Component – NextJS
Dive into NextJS’s server and client components: understanding their key features and collaborative functionality.
![React useState: A Deep Dive into Hooks](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F12%2F12112456%2Freact-usestate-thumb-1-1200x663.png&w=3840&q=75)
React useState: A Deep Dive into Hooks
Dive into React’s useState hook: master its uses and avoid common pitfalls.
![Testing Stripe Webhook Locally with Next.js](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F12%2F12110442%2Fstripe-webhook-locally-nextjs-thumb-1200x663.png&w=3840&q=75)
Testing Stripe Webhook Locally with Next.js
Learn how to test Stripe webhooks locally using Next.js, streamlining your integration process and accelerating application development
![Event Loop & Concurrency Model – Task Queue – How the JS Engine Works – Part 3/6](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2024%2F06%2F11091058%2Fevent-loop-thumb-1200x663.png&w=3840&q=75)
Event Loop & Concurrency Model – Task Queue – How the JS Engine Works – Part 3/6
Master JS async concurrency model with Web API, task queue, and event loop in the JS Runtime Environment through coding examples
![Call Stack & Execution Context – How the JS Engine Works – Part 2/6](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2024%2F04%2F23052013%2Fcall-stack-execution-context-1200x663.png&w=3840&q=75)
Call Stack & Execution Context – How the JS Engine Works – Part 2/6
Explore how the call stack and execution context function with clear, practical examples.
![Understanding Memory Heap & Memory Leaks – How the JS Engine Works – Part 1/6](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2024%2F03%2F19015608%2Fjs-engine-part-1-1-1200x663.png&w=3840&q=75)
Understanding Memory Heap & Memory Leaks – How the JS Engine Works – Part 1/6
Learn JS synchronous nature, asynchronous programming, memory leaks and Memory Heap.
![Debounce in JavaScript](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2024%2F01%2F24231637%2Fdebounce-thumb-1200x663.png&w=3840&q=75)
Debounce in JavaScript
Learn how to write your own debounce function, a crucial skill for your next JS interview.
![Understanding call(), apply() & bind() in JavaScript: Learn & Build Your Own](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F08%2F10010121%2Fcall-apply-bind-1200x663.png&w=3840&q=75)
Understanding call(), apply() & bind() in JavaScript: Learn & Build Your Own
Explore JavaScript’s call(), apply(), and bind() methods: understand their functionality, differences, and learn to write your own.
![Responsive Card Grid Layout](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2024%2F04%2F16050319%2Fresponsive-card-grid-layout-thumb-1200x663.png&w=3840&q=75)
Responsive Card Grid Layout
Explore creating a responsive card grid with detailed examples.
![CSS Custom Media Queries](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F12%2F13082811%2Fcss-custom-media-queries-thumb-1200x663.png&w=3840&q=75)
CSS Custom Media Queries
Learn CSS Custom Media Queries to efficiently manage and reuse media queries for responsive, modern web development
![CSS Modules](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F11%2F29034051%2Fcss-modules-thumb-1200x663.png&w=3840&q=75)
CSS Modules
Discover how CSS Modules combined with OOCSS/BEM enhance web development, offering a balanced approach to creating maintainable and streamlined UI.
![CSS Custom Properties & SASS variables](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F12%2F12110034%2Fcss-custom-properties-thumb-1200x663.png&w=3840&q=75)
CSS Custom Properties & SASS variables
Unleash the power of CSS custom properties (aka. CSS variables) by comparing with SASS variables for enhanced styling flexibility and maintainability.
![CSS Specificity in Depth](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F12%2F12105909%2Fcss-specificity-thumb-1200x663.png&w=3840&q=75)
CSS Specificity in Depth
Learn how CSS specificity works and how to use it to write better CSS code and avoid CSS leak in this in-depth guide.
![Nth Fibonacci Number](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2024%2F05%2F15061232%2Ffib-thumb-1200x664.png&w=3840&q=75)
Nth Fibonacci Number
Discover how to calculate the Fibonacci sequence using both iterative and recursive approaches, and optimise recursion with memoization for improved efficiency.
![Singly Linked List & Array Methods](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2024%2F04%2F02041622%2Fsingly-linked-list-thumb-1200x664.png&w=3840&q=75)
Singly Linked List & Array Methods
Dive into Singly Linked Lists: methods, complexities, and tech interview prep with this comprehensive guide.
![Valid Parentheses (JavaScript & Python)](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F12%2F21030604%2Fvalid-parentheses-1200x664.png&w=3840&q=75)
Valid Parentheses (JavaScript & Python)
Learn the ‘Valid Parentheses’ algorithm: Step-by-step guide in JavaScript (Python solution too) for your next interview
![Recursion (with Common Interview Questions)](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F12%2F20023823%2Frecursion-1200x664.png&w=3840&q=75)
Recursion (with Common Interview Questions)
Learn recursion with clear examples with common interview questions and enhance your programming skills effectively.
![Integer to Roman (JavaScript & Python)](/_next/image?url=https%3A%2F%2Fmedia.frontendly.io%2Fassets%2Fuploads%2F2023%2F11%2F28015232%2Finteger-to-roman-1200x664.png&w=3840&q=75)
Integer to Roman (JavaScript & Python)
Discover the commonly asked interview question about converting integers to Roman numerals, with JavaScript (includes Python code as well).