Search with Highlighting
Build a search that filters articles and highlights all occurrences of the query in both titles and body text. The article data is ready — implement the filtering and highlighting logic.
Getting Started with React
React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small, isolated pieces of code called components. React has been designed from the start for gradual adoption, and you can use as little or as much React as you need.
Understanding JavaScript Closures
A closure is the combination of a function bundled together with references to its surrounding state. In JavaScript, closures are created every time a function is created, at function creation time. Closures are useful because they let you associate data with a function that operates on that data.
CSS Grid Layout Guide
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns. Grid layout gives us a method of creating grid structures that are described in CSS and not in HTML. It helps us to create layouts that can be redefined using media queries.
Introduction to TypeScript
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. TypeScript code converts to JavaScript which runs anywhere JavaScript runs.
Web Performance Optimization
Web performance refers to how quickly site content loads and renders in a web browser. Performance optimization includes reducing load times, making the site interactive sooner, and ensuring smooth scrolling and responsive interactions for the user experience.
Node.js Event Loop Explained
The event loop is what allows Node.js to perform non-blocking operations despite JavaScript being single-threaded. It works by offloading operations to the system kernel whenever possible. The event loop continuously checks the call stack and the callback queue to execute pending callbacks.
Split text around matches using text.split(new RegExp(`(${query})` , "gi")) — this gives alternating non-match and match segments. Map over them and wrap matches in a <mark> tag. Remember to escape special regex characters in the query. Check the TODOs in the code.