Tutorial

Why Dark Mode Screenshots? Dark mode has gone mainstream. Most popular websites and apps now support it, and many users prefer it. If you’re capturing screenshots for documentation, marketing materials, or visual testing, you need to capture both light and dark mode variants. The challenge? Programmatically telling a website to render in dark mode isn’t as simple as toggling a switch. How Dark Mode Works on the Web Websites implement dark mode using the CSS prefers-color-scheme media query: ...

What We’re Building A URL shortener that automatically generates a QR code for every shortened link. Users paste a long URL, get a short link, and can download a QR code that points to it. We’ll use Node.js with Express for the backend and the ToolCenter QR Code API for generating QR codes. Prerequisites Node.js 18+ installed A ToolCenter key Basic knowledge of Express.js Project Setup mkdir url-shortener-qr cd url-shortener-qr npm init -y npm install express nanoid Project Structure u ├ ├ │ └ r ─ ─ ─ l ─ ─ ─ - s s p └ p h e u ─ a o r b ─ c r v l k t e i i a e r c n g n . / d e e j e . r s x j - . s q h o r t n / m l Step 1: Build the Server Create server.js: ...

When you paste a URL into Slack, Twitter, or iMessage, a rich preview appears showing the page title, description, and an image. These link previews feel like magic to users, but behind the scenes, someone had to fetch and parse the metadata from that URL. In this tutorial, you will learn how to build beautiful link previews for your own application using a metadata extraction API. We will cover Open Graph tags, Twitter Cards, fallback strategies, and production-ready code examples. ...

Taking a full page screenshot of a website might sound simple, but anyone who has tried it programmatically knows the pain. Lazy-loaded images, infinite scroll, sticky headers, cookie banners — there are dozens of edge cases that make capturing an entire webpage surprisingly complex. In this guide, you will learn how to take full page screenshots programmatically using a screenshot API, with practical code examples you can use in production today. ...