llms.txt
# Marko Denic Tech
> Real-life web dev tips & resources by Marko Denic. One practical, copy-pasteable tip every Saturday: HTML, CSS, JavaScript, UI/UX, and developer productivity.
- Author: Marko Denic (https://markodenic.com/)
- Newsletter signup: https://markodenic.tech/newsletter/
- RSS feed: https://markodenic.tech/feed/
- Sitemap: https://markodenic.tech/wp-sitemap.xml
- Contact / sponsorship: https://markodenic.tech/sponsorship/
## Posts
- [Your articles need a "Copy for AI" button](https://markodenic.tech/your-articles-need-a-copy-for-ai-button/): 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](https://markodenic.tech/stream-ai-answers-word-by-word-in-15-lines/): 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](https://markodenic.tech/let-ai-agents-use-your-site-with-3-html-attributes/): 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](https://markodenic.tech/skeleton-loaders-in-pure-css/): Spinners make pages jump and flicker. Build a skeleton loader in pure CSS that only appears when loading is actually slow. Zero dependencies.
- [Skip the CSV export library: 12 lines of vanilla JS](https://markodenic.tech/export-any-table-to-csv-in-12-lines/): Turn any HTML table into a CSV download with 12 lines of JavaScript. No backend, no library, and it opens correctly in Excel.
- [A tag input that feels like a real product](https://markodenic.tech/a-tag-input-that-feels-like-a-real-product/): 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](https://markodenic.tech/a-countdown-that-stays-accurate-in-a-background-tab/): 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](https://markodenic.tech/a-sticky-table-header-and-first-column-in-6-lines-of-css/): Freeze a table's header row and first column with five lines of CSS.
- [An animated FAQ accordion in pure HTML](https://markodenic.tech/an-animated-faq-accordion-in-pure-html/): Delete every line of accordion JavaScript. Three lines of CSS replace it.
- [A real chart in 15 lines of SVG, no library](https://markodenic.tech/a-real-chart-in-15-lines-of-svg-no-library/): 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](https://markodenic.tech/a-before-after-image-slider-in-2-lines-of-javascript/): 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](https://markodenic.tech/delete-your-auto-resize-textarea-script/): 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](https://markodenic.tech/give-your-site-the-cmdk-menu-users-expect/): 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](https://markodenic.tech/how-to-build-a-swipeable-carousel-with-just-css/): You don't need a carousel library. Six lines of CSS scroll snap will do it.
- [Turn any table sortable in 20 lines](https://markodenic.tech/turn-any-table-sortable-in-20-lines/): Make any HTML table sortable in 20 lines of vanilla JS.
- [How to stop a sticky header from covering your headings](https://markodenic.tech/how-to-stop-a-sticky-header-from-covering-your-headings/): One line of CSS fixes every anchor link that jumps behind your fixed header
- [How to stop a modal from scrolling the page behind it](https://markodenic.tech/how-to-stop-a-modal-from-scrolling-the-page-behind-it/): One CSS property stops scroll from leaking out of a modal or sidebar into the page behind it. No JavaScript scroll locking needed.
- [How to read and update URL query params without regex](https://markodenic.tech/how-to-read-and-update-url-query-params-without-regex/): URLSearchParams reads, sets, and removes query string values with a clean API. No string splitting, no manual parsing.
- [How to stop a search box from firing 20 requests at once.](https://markodenic.tech/how-to-stop-a-search-box-from-firing-20-requests-at-once/): A debounce function waits until the user stops typing before firing the request. Ten lines of code, zero libraries, fixes one of the most common performance bugs.
- [How to build a responsive grid without a single media query.](https://markodenic.tech/how-to-build-a-responsive-grid-without-a-single-media-query/): One line of CSS creates a grid that fits as many columns as possible at any screen size. No breakpoints, no JavaScript, no framework needed.
- [How to make three API calls finish in the time it takes to make one.](https://markodenic.tech/how-to-make-three-api-calls-finish-in-the-time-it-takes-to-make-one/): Stop running async calls one by one. Promise.all runs them in parallel and cuts wait time to the slowest request, not the sum of all.
- [How to remember your users without a database.](https://markodenic.tech/how-to-remember-your-users-without-a-database/): Save user preferences, theme choices, and UI state in the browser with three methods and zero backend. No account, no server needed.
- [Your page is freezing because of this. Here is how to fix it.](https://markodenic.tech/your-page-is-freezing-because-of-this-here-is-how-to-fix-it/): JavaScript runs on one thread. Heavy tasks block everything. Web Workers move that work to the background so your UI stays smooth. No libraries needed.
- [How to add a native share button with four lines of JavaScript.](https://markodenic.tech/how-to-add-a-native-share-button-with-four-lines-of-javascript/): Replace six share buttons with one native share sheet. Four lines of JS, no library, works with every app already on the user's phone.
- [Stop tweaking your user prompts. (Do this instead)](https://markodenic.tech/stop-tweaking-your-user-prompts-do-this-instead/): Stop wasting time tweaking user messages. This simple system prompt framework forces any AI to listen and finally stop giving you wordy garbage.
- [Make page loads feel instant. No framework.](https://markodenic.tech/make-page-loads-feel-instant-no-framework/): Prerender pages before a click using one JSON script tag. No framework, no build step. Pure progressive enhancement for instant navigation.
- [Make your app look globally professional. Instantly.](https://markodenic.tech/make-your-app-look-globally-professional-instantly/): Stop writing number formatting functions. The browser has Intl.NumberFormat built in. Currencies, locales, compact notation. No library needed.
- [The One-Liner That Sends Browser Notifications (No App Needed)](https://markodenic.tech/the-one-liner-that-sends-browser-notifications-no-app-needed/): Learn how to send native OS notifications from the browser using the Notifications API, no libraries, no apps, just two simple steps.
- [Give your website a voice](https://markodenic.tech/give-your-website-a-voice/): Make your website talk for free with the Web Speech API. Use speechSynthesis.speak() to create native, offline voiceovers with zero JS libraries.
- [Seamless CSS Marquees](https://markodenic.tech/seamless-css-marquees/): Create a seamless infinite marquee with CSS. Use the translateX(-50%) trick to build smooth, high-performance loops without any JavaScript.
- [Fix "Full Height" on mobile](https://markodenic.tech/fix-full-height-on-mobile/): Fix the 100vh mobile bug with one line of CSS. Use the svh unit to ensure your hero sections always fit the screen perfectly without any JavaScript hacks.
- [App-like page transitions (with zero JS)](https://markodenic.tech/app-like-page-transitions-with-zero-js/): The browser finally handles the page transitions for us.
- [Zero-JS tooltips and menus](https://markodenic.tech/zero-js-tooltips-and-menus/): HTML now has a native way to handle "floating" UI. By using the popover attribute...
- [A better way to handle Aspect Ratios](https://markodenic.tech/a-better-way-to-handle-aspect-ratios/): We’ve all had to do it. You need a responsive 16:9 video container, so you reach for that weird math trick:
- [Stop using margin-left and padding-right](https://markodenic.tech/stop-using-margin-left-and-padding-right/): If you’ve ever had to localize a website for languages like Arabic or Hebrew, you know the pain of "flipping" your CSS. You end up writing code like this:
- [Stop duplicating your CSS for Dark Mode 🌓](https://markodenic.tech/stop-duplicating-your-css-for-dark-mode/): It’s a lot of boilerplate to maintain, and it’s easy to miss a variable. Not anymore.
- [Stop writing click handlers for UI](https://markodenic.tech/stop-writing-click-handlers-for-ui/): We’ve spent years writing the same "glue code" just to open a dialog or a popover. Not anymore.
- [ES6 JavaScript](https://markodenic.tech/es6-javascript/): Let’s explore these JavaScript features one-by-one to unlock their potential.
- [Worth Revisiting: The Most Useful Past Issues](https://markodenic.tech/worth-revisiting-the-most-useful-past-issues/): A quick curated list of standout past newsletter issues with practical ideas for web developers and builders.
- [Tools I made for you](https://markodenic.tech/tools-i-made-for-you/): I've made quite a few tools, so I'd love to share them with you in case you don't know about them yet. Let's roll!
- [CSS `:has()` Isn’t New, But Most Developers Still Aren’t Using It Well](https://markodenic.tech/css-has-isnt-new-but-most-developers-still-arent-using-it-well/): Discover how the CSS :has() selector finally makes the impossible possible for your most stunning and responsive layouts yet!
- [10 JavaScript array methods to simplify your code](https://markodenic.tech/10-javascript-array-methods-to-simplify-your-code/): Explanations and examples included. Check it out.
- [What Actually Matters for Developers This Year](https://markodenic.tech/what-actually-matters-for-developers-this-year/): Filter the noise.
- [CSS is the New Photoshop](https://markodenic.tech/css-is-the-new-photoshop/): Want to make images look better without opening Photoshop? CSS filters let you change the look of images directly in the browser.
- [How to Add a Scroll Progress Bar in 5 Minutes (No Libraries)](https://markodenic.tech/how-to-add-a-scroll-progress-bar-in-5-minutes-no-libraries/): Ever visited a long article and wondered how far you’ve scrolled? A simple progress bar at the top can make your pages feel more polished and keep readers engaged. Here’s how to build a clean, modern one with just 20 lines of HTML, CSS, and JS. No frameworks. No dependencies.
- [The complete guide to HTML input types. Hint: there are more than you know](https://markodenic.tech/the-complete-guide-to-html-input-types-hint-there-are-more-than-you-know/): What are input types in HTML? How many input types does HTML actually provide? Let me show it to you in this article.
- [CSS Now Has if() Statements. Here’s How They Work](https://markodenic.tech/css-now-has-if-statements-heres-how-they-work/): The new CSS if() function introduces real conditional logic inside native stylesheets.
- [Let's build QR Code Generator in Under 10 Minutes](https://markodenic.tech/lets-build-qr-code-generator-in-under-10-minutes/): Today I’m going to show you how to create the cleanest, fastest QR code generator possible.
- [Interactive learning tools](https://markodenic.tech/interactive-learning-tools/): Learning how to code in an interactive way is much more fun. So I created a list of interactive learning tools for you. You can find tools to learn CSS, JavaScript, TypeScript, React, Python, Git, SQL, Regex, and more in this list.
- [Best Websites to Get HTML/CSS Templates](https://markodenic.tech/best-websites-to-get-html-css-templates/): This article highlights the best resources for finding and downloading free HTML templates.
- [Technical interview resources](https://markodenic.tech/technical-interview-resources/): Technical interviews are difficult. So I decided to gather resources that will help you crush your next interview.
- [I Took Pong Wars and made it Playable](https://markodenic.tech/i-took-pong-wars-and-made-it-playable/): I recreated Pong Wars into a fully interactive, color-customizable, pause-and-reset version that still fits in one single HTML.
- [Free certifications for developers](https://markodenic.tech/free-certifications-for-developers/): Certifications can be costly, so I prepared a list of free ones you can take to enhance your credibility.
- [GitHub Repositories to Improve Your Programming Skills](https://markodenic.tech/github-repositories-to-improve-your-programming-skills/): If you want to level up your programming skills, GitHub is full of hidden gems. I’ve put together a list of repositories that helped me (and countless others) learn faster, practice smarter, and actually build stuff that matters.
- [CSS Generators](https://markodenic.tech/css-generators/): You can use CSS generators to save time on some time-consuming tasks. I made a collection of the best CSS generators for you to use.
- [Use `console.log()` like a pro](https://markodenic.tech/use-console-log-like-a-pro/): Using console.log() for JavaScript debugging is the most common practice among developers. But there is more.
- [Git Cheat Sheet](https://markodenic.tech/git-cheat-sheet/): This Git cheat sheet gives you a quick, practical reference to the most useful commands so you can manage version control with confidence.
- [Make Your First Open Source Contribution](https://markodenic.tech/make-your-first-open-source-contribution/): By making open-source contributions, you will learn a lot. Open-source contributions allow you to become a part of the open-source community.
- [9 Most Useful JavaScript Tips and Tricks](https://markodenic.tech/9-most-useful-javascript-tips-and-tricks/): In this article I will share with you some really handy JavaScript tips.
- [HTML tips you won't find in most tutorials](https://markodenic.tech/html-tips-you-wont-find-in-most-tutorials/): Modern HTML is more than just basic building blocks. Discover lesser-known, super useful features that go beyond the basics in this guide.
- [Showcase Blog Posts Automatically on GitHub Profile](https://markodenic.tech/showcase-blog-posts-automatically-on-github-profile/): Keep your GitHub profile up-to-date by automatically showcasing your latest blog posts. Set it up once, and your profile will always be updated with your latest content.
- [CSS Pulse Animation](https://markodenic.tech/css-pulse-animation/): In this article, I'll show you how to create a beautiful pulse effect. I'll also discuss the use cases and explain how you can improve performance.
- [9 Most Powerful CSS One-Liners](https://markodenic.tech/9-most-powerful-css-one-liners/): Make your projects more visually appealing with these easy-to-implement, CSS one-liners.
- [From zero to Web Developer](https://markodenic.tech/from-zero-to-web-developer/): From zero to web developer -> in 14 actionable steps.
## Glossary
- [All terms](https://markodenic.tech/glossary/)
- [A/B Testing](https://markodenic.tech/glossary/a-b-testing/)
- [AI Agent](https://markodenic.tech/glossary/ai-agent/)
- [API](https://markodenic.tech/glossary/api/)
- [Caching](https://markodenic.tech/glossary/caching/)
- [CDN](https://markodenic.tech/glossary/cdn/)
- [Context Window](https://markodenic.tech/glossary/context-window/)
- [CORS](https://markodenic.tech/glossary/cors/)
- [Daemon](https://markodenic.tech/glossary/daemon/)
- [DNS](https://markodenic.tech/glossary/dns/)
- [Embedding](https://markodenic.tech/glossary/embedding/)
- [Headless CMS](https://markodenic.tech/glossary/headless-cms/)
- [JSON](https://markodenic.tech/glossary/json/)
- [JWT](https://markodenic.tech/glossary/jwt/)
- [Kubernetes](https://markodenic.tech/glossary/kubernetes/)
- [LLM](https://markodenic.tech/glossary/llm/)
- [llms.txt](https://markodenic.tech/glossary/llms-txt/)
- [MCP](https://markodenic.tech/glossary/mcp/)
- [Nginx](https://markodenic.tech/glossary/nginx/)
- [OAuth](https://markodenic.tech/glossary/oauth/)
- [Open Rate](https://markodenic.tech/glossary/open-rate/)
- [Prompt Injection](https://markodenic.tech/glossary/prompt-injection/)
- [RAG](https://markodenic.tech/glossary/rag/)
- [Regex](https://markodenic.tech/glossary/regex/)
- [Responsive Design](https://markodenic.tech/glossary/responsive-design/)
- [SQL](https://markodenic.tech/glossary/sql/)
- [SSL/TLS](https://markodenic.tech/glossary/ssl-tls/)
- [SSR](https://markodenic.tech/glossary/ssr/)
- [Token](https://markodenic.tech/glossary/token/)
- [Vite](https://markodenic.tech/glossary/vite/)
- [Webhook](https://markodenic.tech/glossary/webhook/)
- [WebMCP](https://markodenic.tech/glossary/webmcp/)
- [WebSocket](https://markodenic.tech/glossary/websocket/)
- [YAML](https://markodenic.tech/glossary/yaml/)
## Pages
- [Newsletter](https://markodenic.tech/newsletter/)
- [Tools I use](https://markodenic.tech/tools/)
- [Sponsorship](https://markodenic.tech/sponsorship/)
