# email newsletter for coders Published articles for email newsletter for coders. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Your AI chat scrolls wrong. Fix it in 4 lines of CSS DevFeed: [Your AI chat scrolls wrong. Fix it in 4 lines of CSS]() Original publisher: [Read original article]() Author: Marko Published: 2026-10-31T12:23:04Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [CSS](), [AI Chat](), [Front end](), [User interface design](), [Web Development]() Tags: [ai](), [blog-for-developers](), [browser-support](), [build-faster](), [chat](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [streams](), [ux](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview For a streaming chat, a `column-reverse` scroll container can keep new text visible without forcing the user back to the bottom after they scroll up. The article puts messages inside a `.messages` wrapper, then styles the outer `.chat` with `display: flex`, `flex-direction: column-reverse`, `overflow-y: auto`, and `overscroll-behavior: contain`; it removes the per-update `scrollTop = scrollHeight` call. In this layout, the bottom is `scrollTop = 0`, scrolling upward produces negative values, and sending a new message can reset to zero. A wrapper preserves message order in both the DOM and display. The article says staying anchored while reading relies on browser scroll anchoring, which it reports works in Chrome, Edge, Firefox, and Safari 27; in older Safari, viewed text may drift as the answer streams. Short conversations start at the bottom. ### Source excerpt Stop dragging users back to the bottom while the answer streams. Four lines of CSS make your chat follow new text, and stop the moment the user scrolls up. ## Highlight search matches without touching the DOM DevFeed: [Highlight search matches without touching the DOM]() Original publisher: [Read original article]() Author: Marko Published: 2026-10-24T13:38:02Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [custom highlight api](), [Front end](), [CSS](), [Highlight.js]() Tags: [api](), [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [custom-highlight-api](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [search](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview The CSS Custom Highlight API can mark search matches without changing page elements: walk the content's text nodes, create a `Range` for each match, register them in a `Highlight` with `CSS.highlights.set`, and style the group with `::highlight(search)`. Replacing the named highlight on each input clears old matches; a second, higher-priority highlight can mark the current match and scroll it into view. The excerpt says current Chrome, Edge, Safari, and Firefox support the API, but recommends checking `CSS.highlights`; highlights are paint only, so screen readers need a separate result-count announcement. Matches spanning multiple text nodes are missed, and large pages may need debouncing. ### Source excerpt Stop wrapping search matches in mark tags. The CSS Custom Highlight API paints every match without adding a single element to your page. ## Your articles need a "Copy for AI" button DevFeed: [Your articles need a "Copy for AI" button]() Original publisher: [Read original article]() Author: Marko Published: 2026-10-17T10:00:14Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [Markdown](), [AI Chat](), [MDX](), [Image]() Tags: [ai](), [ai-tools](), [article](), [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [markdown](), [responsive-design-tips](), [ux](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview This tutorial shows how to add a "Copy for AI" button that converts an article into Markdown and copies it with the page URL. Its JavaScript example skips page controls and formats headings, lists, links, and code; the author notes that tables, images, and nested lists are not covered. ### Source excerpt Your readers already paste your articles into AI chats. Give them a clean Markdown copy instead, with one button and about 30 lines of JavaScript. ## Stream AI answers word by word in 15 lines DevFeed: [Stream AI answers word by word in 15 lines]() Original publisher: [Read original article]() Author: Marko Published: 2026-10-09T18:53:46Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [Artificial Intelligence](), [JavaScript](), [AI Chat]() Tags: [ai](), [api](), [async](), [await](), [blog-for-developers](), [build-faster](), [button](), [clicks](), [client](), [code](), [code-productivity](), [code-smarter](), [coding](), [content-monetization](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [fetch](), [front-end-development](), [github-profile-automation](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [performance](), [responsive-design-tips](), [ux](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A tutorial shows how to stream AI-generated text to a browser using JavaScript fetch, a readable response stream, and TextDecoderStream. It also explains how the server can forward provider output, how users can cancel a request, and how to check for reverse proxy buffering. ### Source excerpt Stop making users stare at a spinner while your AI feature thinks. Stream the answer word by word with 15 lines of JavaScript, no library, in every modern browser. ## Let AI agents use your site with 3 HTML attributes DevFeed: [Let AI agents use your site with 3 HTML attributes]() Original publisher: [Read original article]() Author: Marko Published: 2026-10-03T09:22:00Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [Web Development](), [agentic browsing]() Tags: [ai](), [ai-agents](), [api](), [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [forms](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview The tutorial explains how to expose website features to AI agents through WebMCP. It demonstrates adding attributes to forms and registering JavaScript tools, and notes that WebMCP is experimental in Chrome and requires an origin trial token for visitors. ### Source excerpt AI agents guess their way through your UI. Add 3 HTML attributes to your search form and they call it like a function instead. No library, no backend. ## Skeleton loaders in pure CSS DevFeed: [Skeleton loaders in pure CSS]() Original publisher: [Read original article]() Author: Marko Published: 2026-09-26T10:50:35Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [CSS](), [Web Development](), [User interface design]() Tags: [accessibility](), [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [dependencies](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [gradient](), [html-tips](), [javascript-tricks](), [learn-to-code](), [loading](), [motion](), [performance](), [responsive-design-tips](), [ui](), [ux](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization](), [zero]() ### AI overview A tutorial on building skeleton loaders with pure CSS. It explains how matching placeholder shapes prevent layout shifts, how to delay loaders to avoid flicker, and how to handle accessibility and reduced motion. ### Source excerpt Spinners make pages jump and flicker. Build a skeleton loader in pure CSS that only appears when loading is actually slow. Zero dependencies. ## Export any table to CSV in 12 lines DevFeed: [Export any table to CSV in 12 lines]() Original publisher: [Read original article]() Author: Marko Published: 2026-09-19T10:49:43Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [CSV](), [export](), [Web](), [browser](), [dashboards](), [data](), [debugging]() Tags: [blog-for-developers](), [browser](), [build-faster](), [code-productivity](), [code-smarter](), [coding](), [content-monetization](), [css-animation](), [css-performance](), [csv](), [dashboard](), [data](), [debugging](), [developer-growth](), [developer-resources](), [developers](), [email-newsletter-for-coders](), [export](), [front-end-development](), [github-profile-automation](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [marketing](), [responsive-design-tips](), [table](), [tutorials](), [ui](), [ux](), [web](), [web-dev-newsletter](), [web-developers](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A tutorial explains how to export an HTML table to CSV entirely in the browser. It covers CSV escaping, UTF-8 BOM handling for Excel, CRLF line endings, object URL cleanup, and spreadsheet formula injection safety. ### Source excerpt Weekly newsletter with tips, tutorials, and resources for web developers. Learn coding best practices and improve your workflow. ## A tag input that feels like a real product DevFeed: [A tag input that feels like a real product]() Original publisher: [Read original article]() Author: Marko Published: 2026-09-12T09:00:23Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [GUI](), [bug](), [Web Accessibility (a11y)]() Tags: [blog-for-developers](), [bug](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [forms](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [product](), [responsive-design-tips](), [ui](), [ux](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A tutorial on building a robust tag-input control. It covers committing values with Enter, commas, blur, and paste; handling spreadsheet delimiters; avoiding duplicate tags; synchronizing hidden form inputs; and providing accessible chip removal controls. ### Source excerpt Your tag input is silently dropping the last thing users type. Here's the 4-line fix, plus paste handling that finally works with spreadsheets. ## A countdown that stays accurate in a background tab DevFeed: [A countdown that stays accurate in a background tab]() Original publisher: [Read original article]() Author: Marko Published: 2026-09-05T06:30:19Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [Web app](), [client](), [Server]() Tags: [blog-for-developers](), [browsers](), [bug](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [http](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [server](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A tutorial on building accurate web countdowns despite background-tab timer throttling. It recommends calculating remaining time from an absolute deadline, forcing a render when a tab returns, and treating the server clock as the authority for consequential expirations. ### Source excerpt Your checkout timer says 4:55 when the cart already expired. Why background tabs break setInterval countdowns, and the three-line fix. ## A sticky table header and first column in 6 lines of CSS DevFeed: [A sticky table header and first column in 6 lines of CSS]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-29T11:00:37Z Content type: article Language: en Sources: [Marko Denic Tech]() Topics: [CSS](), [Web Development]() Tags: [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [content](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [developers](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [markdown](), [performance](), [responsive-design-tips](), [tech](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A concise guide to freezing a table's header row and first column with CSS, covering sticky positioning, semantic row headers, backgrounds, scrolling containers, the corner cell, scroll behavior, and visual borders. ### Source excerpt Freeze a table's header row and first column with five lines of CSS. ## An animated FAQ accordion in pure HTML DevFeed: [An animated FAQ accordion in pure HTML]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-22T09:30:55Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [HTML](), [CSS](), [Web Development](), [Web Accessibility (a11y)](), [JavaScript]() Tags: [accessibility](), [animation](), [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview Tutorial showing how to build an animated FAQ accordion with pure HTML and CSS. It explains how shared form grouping provides exclusive-panel behavior and how modern CSS enables height transitions without JavaScript or manually measured pixel values. ### Source excerpt Delete every line of accordion JavaScript. Three lines of CSS replace it. ## A real chart in 15 lines of SVG, no library DevFeed: [A real chart in 15 lines of SVG, no library]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-19T11:34:04Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [SVG](), [CSS](), [Canvas](), [data](), [Web Development]() Tags: [blog-for-developers](), [build-faster](), [code](), [code-productivity](), [code-smarter](), [coding](), [content-monetization](), [css](), [css-animation](), [css-performance](), [design](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [marketing](), [responsive-design-tips](), [svg](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A practical guide to creating responsive, accessible data visualizations with inline SVG in about 15 lines, without a charting library. It explains coordinate mapping, responsive sizing, area fills, bar spacing, and common rendering considerations. ### Source excerpt No chart library needed. Inline SVG plots your data in 15 lines, scales to any container, and styles with the same CSS as everything else. ## A before/after image slider in 2 lines of JavaScript DevFeed: [A before/after image slider in 2 lines of JavaScript]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-15T09:34:36Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [image slider](), [JavaScript](), [CSS](), [Web Development]() Tags: [blog-for-developers](), [browser](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [image-slider](), [images](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A concise tutorial showing how to build an accessible before/after image slider with two stacked images, CSS clipping, a native range input, and only two lines of JavaScript. ### Source excerpt The plugin you were about to install is just input[type=range]. Stack two images, clip one, done. Works with the keyboard too. ## Delete your auto-resize textarea script DevFeed: [Delete your auto-resize textarea script]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-08T11:05:28Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [CSS](), [Web Development](), [browser]() Tags: [blog-for-developers](), [browser](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview The article explains how CSS field-sizing: content can replace JavaScript auto-resize textarea scripts. It covers growth limits, placeholder sizing, width constraints, fallback behavior, browser support, and manual resizing. ### Source excerpt The CSS property field-sizing: content replaces your auto-resize textarea script. One line, no input listener, no scrollHeight. Plus the limits to set. ## Give your site the Cmd+K menu users expect DevFeed: [Give your site the Cmd+K menu users expect]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-01T10:15:27Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [dialog](), [Code](), [Programming](), [browser](), [Firefox](), [Google Chrome]() Tags: [blog-for-developers](), [browser](), [build-faster](), [chrome](), [code](), [code-productivity](), [code-smarter](), [coding](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [dialog](), [email-newsletter-for-coders](), [firefox](), [front-end-development](), [github](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview This tutorial explains how to build a dependency-free Cmd+K command palette for a multi-page website using the dialog element, a keydown listener, and a text filter. It covers keyboard handling across Mac and Windows, browser-specific behavior, modal focus and scrolling, and use cases such as admin panels and documentation sites. ### Source excerpt Linear and GitHub both have it. Build the same command palette with the dialog element, one keydown listener, and a filter. No libraries. ## How to build a swipeable carousel with just CSS DevFeed: [How to build a swipeable carousel with just CSS]() Original publisher: [Read original article]() Author: Marko Published: 2026-07-25T13:55:58Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [CSS](), [Web Development]() Tags: [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [coding](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [how-to](), [html](), [html-tips](), [javascript-tricks](), [learn-to-code](), [performance](), [responsive-design-tips](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview Tutorial showing how to build a swipeable carousel with CSS scroll snap instead of JavaScript or a carousel library. It covers snap behavior, slide alignment, touch and trackpad scrolling, interactive slides, keyboard focus, accessibility, browser support, and practical use cases such as testimonials, product galleries, and mobile card rows. ### Source excerpt You don't need a carousel library. Six lines of CSS scroll snap will do it. ## Turn any table sortable in 20 lines DevFeed: [Turn any table sortable in 20 lines]() Original publisher: [Read original article]() Author: Marko Published: 2026-07-17T12:26:58Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [JavaScript](), [HTML](), [Sorting](), [Web Development]() Tags: [blog-for-developers](), [build-faster](), [code](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [markdown](), [responsive-design-tips](), [sorting](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A concise tutorial showing how to make a plain HTML table sortable with about 20 lines of vanilla JavaScript. It explains moving existing DOM rows, reversing sort direction, parsing numeric values correctly, and falling back to text sorting. ### Source excerpt Make any HTML table sortable in 20 lines of vanilla JS.