The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
See full terms...

All Frontend books on one shelf: frontend interview preparation, modern JavaScript and CSS, Web Components, Angular and Svelte, and building with AI agents using MCP, WebMCP and generative UI.
Bought separately
$299
Minimum price
$250
$300
About the Bundle
Frontend work has changed twice in a few years. The platform got much better: container queries, :has(), native masonry, workers and threads, Web Components that work. Then interfaces started to be written, and used, by AI agents. This bundle gives you 23 books that follow both changes, from the browser's own APIs up to agents that call tools on a web page.
Many of the books are built around one real project, and the code in them was run before it was printed. You build a booking agent, a component library, a design system or a photo gallery, and you finish with something that works.
Get the job
Frontend Interviews in the Agent Era has 1,048 questions on JavaScript, CSS, the browser, coding rounds, system design and agentic frontends, each with an answer you can say in 30 seconds and a deeper one for the follow-up. Advanced JavaScript for the Agent Era explains how JavaScript really works, then builds agents you can stop, trace and trust, and ends with 100 interview questions. Quick JavaScript Interview Questions is the short revision list.
Write modern CSS and JavaScript
Modern CSS: The Platform Grew Up replaces hacks, preprocessors and scripts with native CSS. CSS Grid Lanes covers native masonry layout, with a responsive, accessible gallery as the project. CSS Houdini in Practice builds an app with @property, the Typed OM and the Paint API. Beyond the Main Thread keeps an app responsive with workers, Atomics, WebAssembly threads, the Scheduler API, OPFS and Observables, with demos measured in real Chrome. Quick Web Worker With JavaScript is the short introduction to background threads.
Build components and design systems
Web Components Handson builds ten accessible, tested components with Lit 3, with exercises and solutions. Web Components with Lit starts from the browser's own component model and ends with a design system that is accessible, tested, server-rendered and published to npm. Web Components & Design Systems follows one project, Prism DS, to a component library ready for AI agents. Mastering Svelte 5 Component Development builds and publishes a production-grade Svelte 5 library with Runes, Snippets, TypeScript and WAI-ARIA 1.2.
Build for AI agents
Generative UI with OpenUI shows how to build screens that a language model writes: component libraries, prompts, streaming, safety and evals, with measured results. WebMCP in Practice turns a form into a tool that agents can call, then defends it against prompt injection, tests it and ships it. MCP Apps for Claude builds interactive cards, carousels and fullscreen views inside the chat. Building Agentic Applications Using Angular and Genkit builds a meeting-room booking agent with streaming UI, tools, memory, approvals, multi-agent delegation, evaluation and deployment. Angular Microfrontends with Nx and Native Federation goes from an empty workspace to deployment.
Tooling guides
Six short books cover older tools, and are useful where you still meet them: Quick Browserify, Quick ES2015 Scripting Using Babel.js, Quick Build System with Gulp, Quick CSS Authoring In SASS Way, Quick Start Handlebar Templating and Quick Desktop Application Development Using Electron.
Who it is for
About the Books
Frontend interviews now cover the web platform, JavaScript and algorithms, and the work of building products on top of AI models. This book prepares you for all three.
It has 1,048 questions in 61 chapters. Each one is laid out the same way: how it is usually asked, what the interviewer is testing, a 30-second answer you can say aloud, a deeper answer for the follow-ups, and the red flags that cost candidates points. Chapters end with a timed mock interview and a summary.
The traditional rounds are covered in depth: HTML and accessibility, CSS, JavaScript functions, objects, values and asynchronous code, TypeScript, the DOM and rendering, networking, security, performance, state and data fetching, polyfills and small libraries, UI machine coding, algorithm patterns, and frontend system design.
A part of its own covers agentic frontends: how models behave from the interface's point of view, streaming and chat state, tools and generated UI, sandboxed surfaces, approvals and agent state, tool design and failure modes, browser agents, safety, evaluation and cost, working with AI coding agents, and agentic system design interviews.
The code is real. Listings come from tested files, outputs are captured from real runs, and the diagrams are drawn in one style. A reading path for junior, mid, senior and agentic roles, and study plans for two, six and twelve weeks, are in the appendices.
Who it is for
Build a complete AI agent with a streaming Angular front end and a Genkit back end: tools, memory, retrieval with citations, planning, human approval, multi-agent delegation, evaluation and deployment. One working application, explained chapter by chapter, with every code listing checked against the repository.
What you will learn
Who this book is for
Web developers who have built something in Angular and now need to add an agent to a product, and back-end TypeScript developers who want to know what the front end of an agent has to do. You should be comfortable with TypeScript. No API key is required: the example application includes an offline scripted model, so every chapter runs on a laptop and every test is deterministic.
A model can answer with a paragraph. It can also answer with a screen.
This book shows how to build the second kind with OpenUI: a compact language the model writes, a component library you control, and a renderer that draws the screen while the answer is still streaming.
It is written for engineers who have built a React app and called an LLM API. It does not assume you have built a generative interface before.
Most agent bugs are really JavaScript bugs.
An agent juggles model calls that stream for a minute, tools that run in parallel and time out, users who press Stop halfway through, and conversations that outgrow memory and the model's context window. Frameworks hide those problems until they break in production. This book teaches you the language rules underneath, then shows you how to build the agent yourself.
Advanced JavaScript for the Agent Era goes from the inside out. Each chapter starts with a failure its own code reproduces, explains the mechanism behind it, and shows where that mechanism appears in nanoagent, a complete agent runtime with no dependencies that you build across the whole book.
What you will learn
this, prototypes and classes, types, equality, and coercion.async/await patterns, generators and async generators, streams and fetch, and cancellation with AbortSignal.Proxy, Reflect, symbols, and the observer pattern.using, and Temporal.
How the book works
npm install anywhere in the main text.
Who it is for
Developers with one to three years of JavaScript who know the syntax, arrays and objects, fetch, and async/await, and who want to understand why their code behaves the way it does and build agents they can trust without a framework they cannot see inside.
Several teams, one product, separate deployments. This book builds Storefront, an online store in which a shell loads separately built Angular remotes at runtime with Native Federation, and it takes the case study from an empty Nx workspace to a deployed, tested and observable system. Angular 22, Nx 23 and Native Federation 22 are the versions in use. Every listing, measurement and screenshot comes from running the code.
Older tutorials no longer match the tools: Nx's Module Federation generators for Angular are deprecated, and Native Federation is the supported path. The book is written against the tools as they are today, and it says where they fall short.
What you will learn
Move beyond isolated toy tutorials. Architect, test, and publish a production-grade UI component library and design system with Svelte 5 from first principles.
Building internal application screens is forgiving: you control the container, data flow, CSS cascade, and lifecycle. Building a shared UI component library is entirely different. Your primitives must survive server-side rendering pipelines, hydrate without layout shift, adapt to nested theme overrides, coordinate complex multi-input forms, and adhere strictly to international accessibility standards—all while exposing clean, type-safe interfaces that bundlers can tree-shake down to the byte.
Mastering Svelte 5 Component Development is an engineering-first guide to building production design systems with modern Svelte. Svelte 5 replaces legacy compiler heuristics with a single-execution setup model, fine-grained reactive signals, first-class render delegation, and universal headless logic. Rather than toy examples, this book guides you step by step through engineering PulseUI, a complete, themeable, accessible component library built entirely from scratch.
What You Will Master:Who This Book Is For:
Senior frontend engineers, design system architects, and full-stack SvelteKit developers who want an authoritative, real-world resource for building enterprise component libraries or migrating existing codebases to Svelte 5. Readers should be familiar with modern web standards, TypeScript, and foundational frontend concepts.
A page freezes when one long task holds the main thread. This book covers the browser's tools for keeping that work out of the way: dedicated, shared and service workers, OffscreenCanvas, SharedArrayBuffer and Atomics, WebAssembly threads, the Scheduler API, the Origin Private File System, and Observables.
Each chapter explains one tool, shows where it is used, and builds a demo you can run. The timings come from measurements in real Chrome, and the code is in a download that goes with the book. Where a result was surprising, the book says so: plain JavaScript beat our hand written WebAssembly on a single thread, and moving work to a worker didn't make it faster at all.
Some of what the demos measure
pagehide handler never noticedWho this book is for
Web developers who know JavaScript and want to keep their pages responsive. You don't need to have used workers or shared memory before.
Your stylesheets are full of workarounds for things CSS could not do. Modern CSS: The Platform Grew Up shows you which ones you can delete.Between 2022 and 2026, browsers shipped more CSS than in the previous decade. Container queries, :has(), cascade layers, nesting, perceptual color, subgrid, popovers and view transitions are now Baseline, so you can use them in production. Many teams have not caught up. They still reach for the same preprocessor, the same class toggles and the same scroll listeners.
This book is for working front-end developers who already know flexbox and grid. It skips the basics and focuses on the features that replace hacks and JavaScript. Each of the seventeen chapters starts with a problem you have probably solved the hard way, shows the modern solution with working code, and ends with what you need to ship it: browser support, fallbacks, and the dependencies or glue code you can remove.
Every example is a working page you can open and change, and the code is free to use under the MIT licence. Most screenshots are real renders from Chrome. The book marks the two that are not, and it says so when a feature is still experimental.
The book covers architecture (cascade layers, native nesting, @scope and typed custom properties), layout (container queries, subgrid, intrinsic ratios and grid), selectors and state (:has(), context-aware styling and scroll-state queries), visual design (OKLCH color, light-dark(), typography and shape), motion (entry and exit animations, scroll-driven animations and view transitions), native components (popovers, dialogs, anchor positioning and widgets without JavaScript), and production (a capstone component kit and a migration playbook for real codebases).
Three appendices cover a dependency diet, a browser support matrix and a cheat sheet.
The aim is less code: fewer dependencies, fewer event listeners, and stylesheets you can still understand next year.
Cards of different heights that fit together without gaps, like a photo wall, used to need a JavaScript library or CSS tricks. With CSS Grid Lanes you build them in a few lines of CSS, starting with display: grid-lanes.
This book teaches it by building one project, a photo gallery. You start with a plain grid that leaves gaps, and you finish with a responsive gallery that works for keyboard and screen-reader users and still looks right in browsers without support.
Grid Lanes is new, and browsers do not agree on everything yet. Where they differ, the book shows the measurement instead of guessing.
Key Features
display: grid-lanes, and test it with a short scriptflow-tolerance to settle ties between lanes@supports and ship a fallback for every browsercontent-visibility without breaking the layoutWho this book is for
Front-end developers who are comfortable with HTML and CSS and have used Flexbox and CSS Grid. You do not need to have used a masonry library or to know anything about Grid Lanes. If your Grid is rusty, Chapter 2 covers what the rest of the book relies on. Two chapters include short JavaScript, for a fallback and for testing, and both are explained line by line.
An AI agent on your website works the way a screen reader does: it reads the page and guesses which button to press. WebMCP is the alternative. Your page hands the agent a list of things it can do (search this catalog, add this to the cart, set this address), described in your words and running your code, in the tab the visitor already has open.
WebMCP in Practice is a short, hands-on guide for web developers. You build one small shop, Kiosk, and every runnable listing was run before it was written about. You start with a working tool from a few HTML attributes on a form you already have. Then you register tools in JavaScript, write descriptions and errors an agent can act on, make tools appear and disappear as the page changes, and test them.
The part that matters most: a tool runs as the logged-in user, with no API key and no sandbox in between. Chapter 6 shows a prompt-injection attack on the book's own shop, step by step. Chapter 7 covers the annotations the platform offers, what they do not enforce, and how your page can ask the shopper before a consequential tool runs.
WebMCP is a W3C Community Group draft with one implementation, behind an origin trial in Chrome (149 through 156) and a matching trial in Edge. This book is for someone who wants to build on it anyway, with their eyes open. Every claim that depends on a version carries the version and the date it was checked. The places where the shipping code disagrees with the spec are listed in an appendix. Where a number matters, the book gives you the command to check it yourself.
A web developer who knows the DOM and can read JavaScript. You do not need to have used the Model Context Protocol or built an agent. You do not need an AI account or an API key, and no chapter calls a model. A skeptical reader is welcome: the book argues its case and shows the costs.
Build interactive apps that live inside Claude's conversations.
Ask an AI assistant whether a meeting room is free and you usually get a sentence. With an MCP App, you get a card instead: the room, the next free half hour, and a Book button that works right there in the chat. MCP Apps for Claude shows you how to build that kind of interface, from the first tool to a listing in Claude's connector directory.
The book follows one real app, Snug, a meeting-room booking connector, from a text-only MCP server to a polished, tested app that runs in claude.ai, in Claude Desktop and in the Claude Android app. Every code example is cut from a real, tested file, and every screenshot was taken in Claude.
What you'll learn
ui:// resources, and the sandboxed card Claude shows in the conversationupdateModelContext, sendMessage, app-only tools and linksWho this book is for
Web developers who know JavaScript or TypeScript and want to build interactive connectors for Claude. You don't need to know MCP already: Chapter 2 teaches the parts you need.
What you get
Web Components Handson teaches web components by building ten of the hardest ones with Lit 3: tabs, dialogs and popovers, form-associated inputs, a combobox, a date range picker, a virtualized data table, a tree view, a carousel, a multi-step stepper and an image cropper. Each is a standalone package with its own tests and demo page, built on one shared set of design tokens.
The book explains each concept before the code, builds the component step by step, and ends every chapter with its styling API, accessibility behavior, real test output and the mistakes to avoid. Every listing is pasted from the real package files, and the tests pass against them: 270 in the chapters, plus tested solutions to all 55 exercises in Appendix E. Appendices cover token naming, packaging for npm, using the components in frameworks and an accessibility checklist, followed by a glossary and an index.
It is written for front-end developers who already know JavaScript or TypeScript. It is not an introduction to web components. The code was tested with Lit 3.3.3, in Google Chrome, and the components are browser only.
CSS Houdini promised to let developers extend the browser's own styling engine. Ten years on, its five APIs have had five very different fates. @property works in every browser and is one of the most useful additions to CSS in years. The Typed OM works everywhere except Firefox. The Paint API runs only in Chrome and Edge. The Layout API and Animation Worklet never shipped, and native CSS now covers most of what people wanted them for.
In this practical book, Sandeep Kumar Patel shows you which parts of Houdini to build on today, which to use with care, and what to use instead. You learn by building: every chapter hands you a copy of the same small app, Gauge, an analytics panel with stat cards, sparklines, ring meters and a theme switch, exactly as the previous chapter left it, and you add that chapter's feature a few lines at a time, checking each step in the browser. Where the obvious code goes wrong, you write it, watch it fail, and fix it.
With this book, you'll:
@propertydisplay: grid-lanes and animation-timeline: scroll()
Every step of every chapter is a real file, run automatically in Chrome, Firefox and Safari's engine to confirm it does what the page says, and every browser-support claim is dated and traced to its source. You need only the basics of HTML, CSS and JavaScript. The complete code, including a starting copy of the app for every chapter, is a free download.
Frameworks come and go. The components you build on the browser's own element model don't have to.
Web Components with Lit teaches the platform first — custom elements, shadow DOM, slots, the upgrade problem, retargeted events — with no framework in sight, because Lit is a thin layer over those primitives and the layer makes more sense once you've felt the bare platform. Then it builds up Lit itself: reactive properties, the update lifecycle, templates and directives, reactive controllers, context, state management, and forms that work inside a native <form>.
One project runs through the whole book. Cinder is a small design system, published as cinder-ui. It starts in Chapter 6 as a button that does almost nothing and ends as a versioned, documented, server-renderable npm package with a React wrapper and written guidance for every other framework. Along the way you build an icon, a text field and checkbox that participate in form validation, an accessible dialog, a toast system, and a theming layer driven by design tokens.
The book is written to be read four ways. If you're new to web components, Part I teaches the platform from zero. If you're coming from React, Vue, or Angular, it shows you the parts of the browser your framework hides and where Lit's reactivity diverges from what you know. If you already ship Lit, it starts you at the patterns most Lit codebases get wrong — controllers, context, state, forms — and the delivery material that's hardest to find written down: accessibility, testing, visual regression, localization, server-side rendering, and publishing.
Every example is plain JavaScript. Lit needs no compiler and no build step to start, and the standards-only syntax — static properties, no decorators — is the version that will still run unchanged years from now. Where TypeScript changes the picture, a short callout shows the decorator equivalent, and an appendix collects all of it.
Every runnable listing in the book was actually run, in a real browser or a real terminal, before the text described what it does — including the listings that are meant to fail. Every cross-reference was checked. Every version number was verified against the live source. Where checking the code caught the first draft being wrong, the correction was left in the text.
Targets Lit 3.3.3. 36 chapters, 5 appendices, 102 figures.
You'll learn how to:
• Define custom elements and manage their lifecycle without a framework
• Use shadow DOM, slots, and CSS encapsulation deliberately
• Model reactive state with Lit's properties and update lifecycle
• Write templates, use built-in directives, and build your own
• Style and theme components with custom properties, parts, and design tokens
• Extract behavior into reactive controllers and share state with context and stores
• Build form-associated components that validate inside a native <form>
• Make components accessible: focus management, overlays, ARIA across the shadow boundary
• Test components, add visual-regression and end-to-end coverage, and wire up CI
• Localize, server-render and hydrate, and publish a component library to npm
• Consume the library from React and other frameworks
Who it's for: developers who can write modern JavaScript and have touched the DOM directly at least once. No TypeScript, no build tool, and no prior component-library experience required.
Web Components & Design Systems teaches you to build durable, framework-agnostic UI on the platform itself, through one running project: Prism DS, a genuinely real design system built up chapter by chapter — design tokens, themed components, an accessible form-control library, a component manifest, a documentation pipeline, and (in the book's second half) an MCP server that lets an AI coding agent consume your design system correctly instead of guessing at it.
You don't need prior web-components experience — Part I starts from the platform's own primitives (custom elements, shadow DOM, templates and slots). You do need to be comfortable with JavaScript and the DOM already.
What's inside:
458 pages. Twenty-seven chapters plus three reference appendices. Every runnable example ships as a companion code download.
This book is all about Browserify process to reuse NPM modules in a browser environment.This books Begins from the installation of browserify to applying it to a real time application.After reading this book you will know to develop Grunt/Gulp task to simplify the browserify process.This book also covers some handy tools like Beefy,watchify to simplify your development environment.Each and Every chapter has sufficient amount of coded example with screenshot.
This book is all about ECMASCRIPT 2015/ES6 features.This book conatains 11 chapters and each chapter explain a new feature of ES6.Each chapter has coded example and proper screenshot to explain the detail of this chapter.The book has used Babel.js transpilar to run the coded example.However you can use other transpiler like Traceur.
Web Workers provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface.The Web Workers specification defines an API for spawning background scripts in your web application. Web Workers allow you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.This book will take you through all the important feature of Web Worker with coded example.
Electron framework is built on 2 different processes named as browser and renderer process.Each of these process has a list of modules which handles specific area on desktop application development.Some of the modules are common to both of these processes.This book has focused some of the importnat module and explained it with coded examples.Some of the important topics are listed as follows:-
This book is all about key concepts in javascript.This book has a colloection of frequently asked question in a javascript interview.It covers sufficient amount of coded examples to understand the concepts of javascript.It will take you through all important questions quickly.
Handlebar is a templating framework for HTML Code.Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.This book covers all the important features of this templating library.
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
See full terms...
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
Learn more about writing on Leanpub
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!
Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.
Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.