# interactive website A website whose pages provide user-responsive behavior through web technologies such as JavaScript. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Copy-pasting more than just text DevFeed: [Copy-pasting more than just text]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-08-31T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [Web Development](), [JavaScript](), [React](), [interactive website]() Tags: [alt-text](), [copy](), [engineering](), [interactive-content](), [javascript](), [news](), [web-frontend](), [widget]() ### AI overview Sam Lau describes how Khan Academy improved copy-pasting in Perseus, its interactive exercise and article editor, by moving widget metadata alongside copied text. The change preserves information such as image URLs and a number line's starting value, making it easier for content creators to move or duplicate widgets. ### Source excerpt By Sam Lau The Result I'll skip to the happy ending. This little feature implements more sophisticated copy-pasting ... Read more ## TikTok Is Quietly Putting Web Apps Inside Its App DevFeed: [TikTok Is Quietly Putting Web Apps Inside Its App]() Original publisher: [Read original article]() Author: Alex Harper Published: 2026-09-10T17:33:18Z Content type: article Language: en Sources: [Web Designer Depot]() Topics: [modern web development](), [Web Development](), [interactive website](), [App](), [React Native]() Tags: [app-development](), [app-ecosystem](), [browser](), [digital-platforms](), [embedded-apps](), [framework](), [future-of-apps](), [in-app-experiences](), [javascript](), [mini-apps](), [mobile-apps](), [mobile-web](), [platform](), [react](), [social-commerce](), [social-media](), [technology](), [tiktok](), [tiktok-apps](), [tiktok-developers](), [ui-design](), [ux-design](), [web](), [web-apps](), [web-design](), [web-designers](), [web-development]() ### AI overview TikTok Minis let third-party, web-based experiences run inside TikTok, using technologies such as HTML, JavaScript, React, and Vue. The article examines how this could blur the boundaries between websites, social networks, and apps while noting TikTok's platform, configuration, and approval constraints. ### Source excerpt TikTok isn't just hosting videos anymore--it's quietly letting web-based experiences live inside the app. TikTok Minis could blur the line between social network, browser, and app platform, and web designers should be paying attention. ## Creating Web Widgets Using the Document Picture-in-Picture API DevFeed: [Creating Web Widgets Using the Document Picture-in-Picture API]() Original publisher: [Read original article]() Author: Daniel Schwarz Published: 2026-08-27T14:41:06Z Content type: tutorial Language: en Sources: [CSS-Tricks]() Topics: [Web Development](), [modern web development](), [interactive website]() Tags: [api](), [articles](), [browser](), [chrome](), [css](), [firefox](), [html](), [javascript](), [picture-in-picture](), [web]() ### AI overview A tutorial on using the Document Picture-in-Picture API to create persistent web widgets, including a cloned stock ticker. It covers HTML, CSS, JavaScript, browser support checks, and styling considerations for content moved into a DPIP window. ### Source excerpt The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it. Creating Web Widgets Using the Document Picture-in-Picture API originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well. ## AI fluency isn't the finish line DevFeed: [AI fluency isn't the finish line]() Original publisher: [Read original article]() Author: Andrew Hogan Published: 2026-07-31T21:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Artificial Intelligence](), [Low-Code / Internal Tools](), [interactive website](), [Figma]() Tags: [ai](), [ai-tools](), [developers](), [interactive-website](), [internal-tools]() ### AI overview The article argues that AI fluency is only one part of adapting to AI-shaped work. It emphasizes shared systems, collaboration, facilitation, and turning individual knowledge into reusable team tools such as internal tools, plugins, prompt libraries, and interactive websites. ### Source excerpt More than 90% of product builders say AI skills are essential to their future success. But what if we're focused on the wrong ones? ## Building docfind: Fast Client-Side Search with Rust and WebAssembly DevFeed: [Building docfind: Fast Client-Side Search with Rust and WebAssembly]() Original publisher: [Read original article]() Author: João Moreno Published: 2026-01-15T00:00:00Z Content type: article Language: en Sources: [Visual Studio Code - Code Editing. Redefined.]() Topics: [Web Development](), [interactive website](), [AI-assisted coding]() Tags: [blog](), [browser](), [github-copilot](), [performance](), [rust](), [search](), [webassembly]() ### AI overview An account of building docfind, a compact client-side search engine for the VS Code website using Rust and WebAssembly. It discusses the search requirements, evaluates alternatives, and traces the design inspiration to finite-state transducers. ### Source excerpt How we built docfind, a high-performance client-side search engine using Rust and WebAssembly, and how GitHub Copilot accelerated development. Read the full article ## Livewire 4 Is Here! The Artisan of the Day Is Caleb Porzio. DevFeed: [Livewire 4 Is Here! The Artisan of the Day Is Caleb Porzio.]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2025-08-18T10:55:06Z Content type: release Language: en Sources: [Laravel Blog]() Topics: [interactive website](), [modern web development](), [Web Development]() Tags: [developer-experience](), [frontend-development](), [javascript](), [laravel](), [performance](), [php](), [reactive](), [tailwind]() ### AI overview Livewire 4 introduces a new default approach to components, with single-file components, updated project structure, PHP 8.4 property hooks, slots and refs, simpler loading states, and performance improvements for polling. ### Source excerpt Caleb Porzio walks through the new Livewire 4 and a fourth new way to make components. ## Build Your Own Full-Text Search CMS with Neon and pg\_search DevFeed: [Build Your Own Full-Text Search CMS with Neon and pg\_search]() Original publisher: [Read original article]() Author: Tristan Partin Published: 2025-07-07T16:22:34Z Content type: tutorial Language: en Sources: [Blog -- Neon Docs]() Topics: [Web Development](), [modern web development](), [interactive website]() Tags: [aws](), [building](), [database](), [javascript](), [next-js](), [postgres](), [prisma](), [search](), [typescript](), [webflow](), [wordpress]() ### AI overview A tutorial for building a lightweight CMS with Neon, the pg_search extension, Prisma, and Next.js, with full-text search backed by a PostgreSQL database. ### Source excerpt A CMS is a "must-have" for building a website. And your choices are many. If you want full-stack, you can go with WordPress or Webflow. If you want headless, you can go with Sanity or Contentful. Heck, with the aid of a GitHub Action, you can just turn your Notion pages directly... ## Birds in the cloud DevFeed: [Birds in the cloud]() Original publisher: [Read original article]() Author: Alexey Milovidov Published: 2025-06-04T08:43:33Z Content type: article Language: en Sources: [ClickHouse Blog]() Topics: [clickhouse](), [data-processing](), [CSV](), [Command-line interface](), [interactive website](), [Zip](), [Website]() Tags: [clickhouse](), [command-line](), [data](), [data-processing](), [interactive-website](), [zip]() ### AI overview This article demonstrates how to download, preview, process, and analyze the eBird bird-observation dataset with ClickHouse. It uses clickhouse-local to work with large CSV data inside a ZIP archive, then loads the data into clickhouse-server to support an interactive website. ### Source excerpt ClickHouse handles 1.5B bird observations with ease. Alexey Milovidov shows how to go from raw data to interactive maps, with full pipeline and best practices. ## Compass: A starter kit for online courses DevFeed: [Compass: A starter kit for online courses]() Original publisher: [Read original article]() Published: 2025-05-14T19:00:00Z Content type: article Language: en Sources: [Tailwind CSS Blog]() Topics: [modern web development](), [Web Development](), [interactive website]() Tags: [apis](), [browsers](), [css](), [javascript](), [next-js](), [picture-in-picture](), [tailwind](), [transcripts](), [ui](), [video]() ### AI overview Compass is a Tailwind CSS and Next.js starter kit for publishing online courses. The article describes its video interface, including an IntersectionObserver-based alternative to passive Picture-in-Picture behavior, and discusses authoring interview transcripts. ### Source excerpt I've been itching to get back into screencasting and teaching lately, and the natural first step was to build our own course platform. So we just released Compass, a Next.js starter kit for publishing your own online course. ## 2024 year in review DevFeed: [2024 year in review]() Original publisher: [Read original article]() Author: Shinya Fujino; Sarah Rainsberger Published: 2025-01-17T00:00:00Z Content type: article Language: en Sources: [The Astro Blog]() Topics: [releases](), [Web Development](), [interactive website]() Tags: [astro](), [feature](), [releases](), [review](), [year-in-review]() ### AI overview A year-in-review article covering Astro's 2024 releases, ecosystem activity, adoption indicators, and framework evolution. ### Source excerpt Revisit everything that happened in Astro last year: new feature releases, survey results, Astro Together, and more! ## Fixing your website's JavaScript performance DevFeed: [Fixing your website's JavaScript performance]() Original publisher: [Read original article]() Author: debugbear Published: 2024-10-09T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [modern web development](), [Web platform](), [interactive website]() Tags: [browser](), [javascript](), [next-js](), [optimization](), [payload](), [performance](), [user-interfaces](), [web]() ### AI overview The article explains JavaScript-related web performance bottlenecks: long main-thread tasks, large bundles, and client-side hydration. It shows how slow parsing and execution can leave server-rendered content visible but temporarily unresponsive. ### Source excerpt Learn about lesser-known web performance bottlenecks connected to excessive JavaScript usage, like long tasks, large bundle sizes, and hydration issues. ## Zero-JavaScript View Transitions DevFeed: [Zero-JavaScript View Transitions]() Original publisher: [Read original article]() Author: Fred Schott Published: 2024-06-11T00:00:00Z Content type: article Language: en Sources: [The Astro Blog]() Topics: [interactive website](), [modern web development](), [Web Development]() Tags: [animation](), [api](), [astro](), [browser](), [chrome](), [edge](), [javascript](), [view-transitions]() ### AI overview Astro can use browser-native cross-document view transitions to provide animated page navigation without sending JavaScript to supported browsers. ### Source excerpt Part one of our series on The Future of Astro. Browser-native page transitions are now possible with zero JavaScript required. ## New Tailwind CSS + Framer Motion template and Tailwind Jobs DevFeed: [New Tailwind CSS + Framer Motion template and Tailwind Jobs]() Original publisher: [Read original article]() Published: 2022-08-19T12:45:00Z Content type: news Language: en Sources: [Tailwind CSS Blog]() Topics: [Tailwind CSS](), [Framer Motion](), [Next.js](), [Template](), [interactive website](), [jobs]() Tags: [css](), [framer](), [jobs](), [projects](), [tailwind]() ### AI overview Tailwind CSS announces Pocket, a new Tailwind UI template built with Next.js and Tailwind CSS. The mobile app landing page uses Framer Motion for animations and interactions, including an animated graph, mobile device interface, and Frogger-inspired testimonials. The update also discusses the official Tailwind CSS job board and ongoing template maintenance. ### Source excerpt All about the brand new Tailwind UI template we just shipped, the official Tailwind CSS job board, and a bunch of new projects coming out in the next few weeks. ## Petite-Vue: A 5.8 KB JavaScript Library for Adding Small Interactions to Server-Rendered Pages DevFeed: [Petite-Vue: A 5.8 KB JavaScript Library for Adding Small Interactions to Server-Rendered Pages]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2021-08-20T06:41:00Z Content type: article Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Vue.js](), [JavaScript](), [Library](), [Web Development](), [Front end](), [interactive website]() Tags: [5-8kb](), [bits](), [gives](), [insights](), [interaction](), [javascript](), [library](), [optimized](), [pages](), [petite-vue](), [power](), [slimmed](), [small](), [sprinkling](), [tiny](), [vue](), [vue-js](), [web]() ### AI overview This article introduces Petite-Vue, a 5.8 KB JavaScript micro-framework for progressively enhancing server-rendered HTML with small interactive features. It compares Petite-Vue with Alpine.js and highlights its Vue-compatible API, migration path to Vue.js, existing Vue ecosystem, and TypeScript support. ### Source excerpt Petite-Vue is a tiny 5.8kb JavaScript library that gives you the power of Vue.js, but slimmed down & optimized for sprinkling small bits of interaction on your web pages ## Interactive Magenta.js Tutorial for Browser Music Generation DevFeed: [Interactive Magenta.js Tutorial for Browser Music Generation]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2018-11-07T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [JavaScript](), [Library](), [Web](), [interactive website]() Tags: [interactive](), [javascript](), [tutorial]() ### AI overview An introductory interactive tutorial on using the music-generation features of @magenta/music, a Magenta.js library, to make music in a browser. ### Source excerpt Magenta.js is a JavaScript library that helps you generate art and music on the web. It's also the team that I work on now! One of the things that I do whenever I join a new team is learn a bunch of things, and then make a bunch of tutorials that past Monica would've loved to stumble over. This is one of them! In this tutorial, we'll talk about the music generation bits in @magenta/music (one of the several libraries in Magenta.js) - how to make your browser sing, and in particular, how to make your browser sing like you!. The tutorial is interactive, and introductory and on Glitch. Go play with all the examples, and have fun! 💕 ## How to show Groovy and Kotlin DSL samples side-by-side DevFeed: [How to show Groovy and Kotlin DSL samples side-by-side]() Original publisher: [Read original article]() Author: Eric Wendelin Published: 2018-10-11T04:00:00Z Content type: tutorial Language: en Sources: [The Gradle Blog]() Topics: [Groovy](), [Kotlin](), [Documentation](), [GitHub](), [Markdown](), [CSS](), [HTML](), [JavaScript](), [interactive website](), [Vanilla JavaScript](), [LocalStorage](), [Web Development]() Tags: [css](), [documentation](), [github](), [gradle](), [groovy](), [guides](), [html](), [javascript](), [kotlin](), [markdown](), [ui]() ### AI overview A tutorial on displaying Groovy and Kotlin DSL examples side by side in GitHub READMEs and web-based documentation. It covers Markdown and HTML disclosure elements for GitHub, plus a CSS and vanilla JavaScript language-selector UI for websites that remembers the user's preferred language. ### Source excerpt Gradle build script samples now have Kotlin DSL snippets alongside the Groovy snippets in Gradle 5.0 docs and many Gradle guides. We want you to be able to show both DSLs in your READMEs and web-based documentation, so this post shows ways you can display examples in multiple languages on GitHub and on your websites. Groovy and Kotlin DSL samples on GitHub It's hard to find OSS projects that don't have a README.md or README.adoc. Though there aren't many ways to make these README pages interactive, we can use the
and HTML elements within Markdown or Asciidoc achieve a bit of interactivity yet avoid the verbosity of having multiple subsequent samples in view. Use these code snippets to show multi-language snippets on GitHub.
Groovy ```groovy logging.captureStandardOutput LogLevel.INFO println 'A message which is logged at INFO level' ```
Kotlin ```kotlin logging.captureStandardOutput(LogLevel.INFO) println("A message which is logged at INFO level") ```
++++
Groovy ++++ [source,groovy] ---- logging.captureStandardOutput LogLevel.INFO println 'A message which is logged at INFO level' ---- ++++
++++ ++++
Kotlin ++++ [source,kotlin] ---- logging.captureStandardOutput(LogLevel.INFO) println("A message which is logged at INFO level") ---- ++++
++++ Here it is in action: Note that this won't work for jekyll or static websites, so there we have to write a bit of code. Groovy and Kotlin DSL samples on the web With a bit of CSS and JavaScript, you can make a nice little language selector UI that remembers user selections. The combination of this vanilla CSS, HTML, and JavaScript creates what you see at the top of the post. A little bit about what the code does: First, the JS initializes the preferred language, getting and storing in window.localStorage so that user preferences are saved. Ne ## Why Web Developers Need to Care about Interactivity DevFeed: [Why Web Developers Need to Care about Interactivity]() Original publisher: [Read original article]() Published: 2017-12-19T17:25:23Z Content type: article Language: en Sources: [Philip Walton]() Topics: [interactive website](), [Web Development](), [JavaScript](), [Document Object Model (DOM)](), [browser]() Tags: [browser](), [javascript](), [main-thread](), [technical](), [time-to-interactive](), [web-developers]() ### AI overview The article explains web interactivity as a page's ability to respond quickly to user input. It identifies delayed JavaScript loading and a busy browser main thread as the two primary causes of poor responsiveness, while focusing mainly on main-thread work. ### Source excerpt Anyone who's browsed the web on their phone has, at one point or another, experienced this situation: You open a web page and click on something, but nothing happens. You click on it again--still nothing. ## Building Year in Review 2014 with SVG and Rails DevFeed: [Building Year in Review 2014 with SVG and Rails]() Original publisher: [Read original article]() Author: Tessa Thornton Published: 2015-02-11T14:43:00Z Content type: tutorial Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [modern web development](), [Web Development](), [interactive website](), [HTML5 and CSS3 tricks]() Tags: [css](), [data](), [javascript](), [shopify](), [svg](), [web-graphics](), [year-in-review]() ### AI overview A tutorial on building Shopify's Year in Review with SVG, JavaScript, Rails helpers, and d3.js. It explains why SVG suited the project's graphics and animations, including data visualizations and scroll-driven path drawing. ### Source excerpt As we have for the past 3 years, Shopify released a Year in Review to highlight some of the exciting growth and change we've observed over the past year. Designers James and Veronica had ambitious ideas for this year's review, including strong, bold typographic treatments and interactive data visualizations. We've gotten some great feedback on the final product, as well as some curious developers wondering how we pulled it off, so we're going to review the development process for Year in Review and talk about some of the technologies we leveraged to make it all happen. ## Create rich media experiences using timed comments DevFeed: [Create rich media experiences using timed comments]() Original publisher: [Read original article]() Published: 2012-04-11T00:00:00Z Content type: article Language: en Sources: [SoundCloud Backstage Blog]() Topics: [interactive website](), [SDKs]() Tags: [announcements](), [apps](), [event](), [experiments](), [hacks](), [javascript](), [media]() ### AI overview SoundCloud describes using timed comments to trigger rich-media visuals and interactions during track playback, supported by a JavaScript SDK event and demonstrated through several experiments. ### Source excerpt In the last weeks we got pretty excited about the idea of using timed comments to create and script rich media experiences. Imagine being able to trigger all kinds of visualizations & interactions for a timed comment while playing a track. Timed Comments with Media ## Marbleo.us DevFeed: [Marbleo.us]() Original publisher: [Read original article]() Published: 2011-04-28T00:00:00Z Content type: article Language: en Sources: [SoundCloud Backstage Blog]() Topics: [Web Development](), [modern web development](), [interactive website]() Tags: [css](), [git](), [github](), [hacks](), [hosting](), [javascript](), [persistence]() ### AI overview An overview of Marbleo.us, a client-side marble-run simulator that encodes shared maps in URL fragments, uses static hosting, and renders maps on a canvas. ### Source excerpt Greetings! I'm Robb and this is my first SoundCloud Backstage blog post. During the day I'm a developer working on the Mac App here in the... ## Notes from O'Reilly's Website Optimization DevFeed: [Notes from O'Reilly's Website Optimization]() Original publisher: [Read original article]() Author: Graham King Published: 2010-06-05T03:59:46Z Content type: article Language: en Sources: [Graham King]() Topics: [Optimization](), [Website](), [web design](), [Usability](), [trust](), [Users](), [interactive website]() Tags: [animation](), [book](), [chat](), [conversion-rate-optimization](), [design](), [gender](), [guide](), [international](), [live](), [local](), [marketing](), [navigation](), [optimization](), [software](), [trust](), [usability](), [website]() ### AI overview Notes from O'Reilly's Website Optimization covering conversion rate optimization, website credibility, persuasion principles, branding, imagery, interactivity, and customer personas. ### Source excerpt Optimize your way to success: A guide for the web Renaissance person.