July 8, 2014•By Amir HameedMy WritingsTechnology

Zen Coding

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abb

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:

div#page>div.logo+ul#navigation>li*5>a

…can be expanded into:

Read more about current Zen Coding syntax Abbreviation engine has a modular structure which allows you to expand abbreviations into different languages. Zen Coding currently supports CSS, HTML, XML/XSL and HAML languages via filters.

Current features of abbreviation engine

ID and CLASS attributes: div#page.section.main.
Custom attributes: div, a, td[colspan=2].
Element multiplication: li*5 will output
tag five times.
Item numbering with $ character: li.item$*3 will output
tag three times, replacing $ character with item number.
Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001
Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.
Filters support
div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.
(v0.7) Text support: p>{Click }+a{here}+{ to continue}.

To better understand how Zen Coding works, watch demo video and read Smashing Magazine tutorial. Zen Coding isn’t only a decent abbreviation engine, it also provides some very useful actions for HTML-coder’s every day needs, like: Wrap with Abbreviation, Tag Balancing, Toggle Comment, Remove Tag etc. Read more about available actions.

Officially supported editors

These plugins are developed by Zen Coding team and guarantee to have full support of all Zen Coding latest features.

Aptana/Zend Studio/Eclipse (crossplatform) https://github.com/sergeche/eclipse-zencoding
TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate). Bundles > Zen Coding menu item
Coda (Mac) — external download, via TEA for Coda. Plug-ins > TEA for Coda > Zen Coding menu item
Espresso (Mac) — external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. Actions > HTML menu item
Komodo Edit/IDE (crossplatform) — external download. Tools > Zen Coding menu item
Notepad++ (Windows). Zen Coding menu item Also a Python version of NPP plugin is available: http://sourceforge.net/projects/npppythonscript/files/
PSPad (Windows). Scripts > Zen Coding menu item
</strong> (browser-based). See <a href="//zen-coding.ru/textarea/%22">online demo</a>.</li> <li><strong>editArea</strong> (browser-based). See <a href="//zen-coding.ru/demo/%22">online demo</a>.</li> <li><strong>CodeMirror</strong> (browser-based). See <a href="//zen-coding.ru/codemirror/%22">online demo</a>.</li> <li><strong>CodeMirror2</strong> (browser-based). See <a href="//media.chikuyonok.ru/codemirror2/%22">online demo</a>.</li> </ul> <h2 id="third-party-supported-editors">Third-party supported editors</h2> <p>These plugins are using official Zen Coding engine and developed by third-party developers. Thus, no guarantee that they support all latest ZC features.</p> <ul> <li><strong>Dreamweaver</strong> (Windows, Mac)</li> <li><strong>Sublime Text</strong> (Windows)</li> <li><strong>Sublime Text 2</strong> (crossplatform) — <a href="//www.quora.com/Sublime-Text/How-do-I-install-Zen-Coding-for-Sublime-Text-2%22">install it from Package Control</a></li> <li><strong>UltraEdit</strong> (Windows)</li> <li><strong>TopStyle</strong> (Windows)</li> <li><strong>GEdit</strong> (crossplatform) — <a href="//github.com/fmarcia/zen-coding-gedit%22">Franck Marcia’s plugin</a>, <a href="//github.com/mikecrittenden/zen-coding-gedit%22">Mike Crittenden’s plugin</a></li> <li><strong>BBEdit/TextWrangler</strong> (Mac) — <a href="//www.angelwatt.com/coding/zen-coding_bbedit.php%22">external download</a></li> <li><strong>Visual Studio</strong> (Windows) — at <a href="//visualstudiogallery.msdn.microsoft.com/abd79254-b4f7-492d-95ae-d9fa38e0af48%22">Visual Studio Gallery</a></li> <li><strong>EmEditor</strong> (Windows) — <a href="//www.emeditor.com/modules/mydownloads/singlefile.php?cid=18&lid=281%22">external download</a></li> <li><strong>Sakura Editor</strong> (Windows) — <a href="//mwlab.net/zen-coding-for-sakuraeditor%22">external download</a></li> <li><strong>EditPlus</strong> (windows) — <a href="//www.editplus.com%22">external download</a>, <a href="//www.editplus.com/trouble.html%22">release notes</a></li> <li><strong>NetBeans</strong> (crossplatform) — <a href="//github.com/lorenzos/ZenCodingNetBeansPlugin#readme%22">download</a></li> <li><strong>Chrome Extension</strong> — <a href="//chrome.google.com/extensions/detail/iodhcpffklplnfaihoolhfbejbinhcgn%22">external download</a></li> <li><strong>Userscript for Greasemonkey</strong> — <a href="//userscripts.org/scripts/show/105015%22">external download</a></li> <li><strong>Geany</strong> — <a href="//github.com/codebrainz/geany-zencoding%22">external download</a></li> <li><strong>RJ TextEd</strong> — <a href="//www.rj-texted.se/%22">built in since v7.50</a></li> <li><strong>AkelPad</strong> — <a href="//akelpad.sourceforge.net/forum/viewtopic.php?p=8084#8084%22">external download</a></li> <li><strong><a href="//www.wiode.com/%22">WIODE web-based IDE</a></strong></li> <li><strong><a href="//bluefish.openoffice.nl/%22">BlueFish</a></strong> — built-in in v2.2.1</li> <li><strong><a href="//www.codelobster.com/%22">Codelobster PHP Edition</a></strong> — built-in in v4.3</li> <li><strong><a href="//shiftedit.net%22">ShiftEdit</a></strong> — online IDE</li> </ul> <h2 id="unofficial-implementations">Unofficial implementations</h2> <p>These plugins are developed by third-party and has their own ZC engine implementation, which leads to different feature set and abbreviation syntax. Zen Coding team has no relation to this projects.</p> <ul> <li><strong>IntelliJ IDEA/WebStorm/PHPStorm</strong> (crossplatform) — built-in in latest versions</li> <li><strong>Emacs</strong> (crossplatform) — <a href="//www.emacswiki.org/emacs/ZenCoding%22">external download</a></li> <li><strong>Vim</strong> (crossplatform) — <a href="//github.com/rstacruz/sparkup%22">Sparkup</a>, <a href="//www.vim.org/scripts/script.php?script_id=2981%22">Zen Coding for Vim</a></li> <li><a href="//confluence.jetbrains.net/display/ReSharper/ZenCoding%22">ReSharper plugin</a> for <strong>Visual Studio</strong></li> </ul> <p>Find Zen Coding on Smashing Magazine: [button href=““<a href="http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/%E2%80%9D">http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/”</a> title=“” target=“blank” shape=“square, rounded, pill” size=“mini, small, regular, large, x-large, jumbo” block=“false” circle=“false” icon_only=“true” info=“popover, tooltip” info_place=“top, right, bottom, left” info_trigger=“hover, click, focus” info_content=“”] Zen Coding at Smashing Magazine [/button] Go to the Source:</p> <p><a href="http://code.google.com/p/zen-coding/">Go to Source</a></p> </div><div class="mt-8 flex justify-between items-center text-sm"><a href="/blog" class="font-semibold text-indigo-600 dark:text-indigo-400 hover:underline">← Back to all writings</a><a href="/about" class="text-zinc-500 hover:text-zinc-900 dark:hover:text-white">About the author →</a></div></article></main><footer class="mt-20 border-t border-zinc-200 dark:border-zinc-800/80 bg-zinc-100/50 dark:bg-zinc-950/50 py-12" data-astro-cid-z4jru4n3><div class="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col md:flex-row items-center justify-between gap-6" data-astro-cid-z4jru4n3><div class="flex flex-col items-center md:items-start" data-astro-cid-z4jru4n3><div class="font-bold text-zinc-900 dark:text-white" data-astro-cid-z4jru4n3>Amir Hameed</div></div><div class="flex items-center gap-6 text-sm text-zinc-500 dark:text-zinc-400" data-astro-cid-z4jru4n3><a href="/projects" class="hover:text-zinc-900 dark:hover:text-white transition-colors" data-astro-cid-z4jru4n3>Projects</a><a href="/blog" class="hover:text-zinc-900 dark:hover:text-white transition-colors" data-astro-cid-z4jru4n3>Blog</a><a href="/playground" class="hover:text-zinc-900 dark:hover:text-white transition-colors" data-astro-cid-z4jru4n3>Playground</a><a href="/about" class="hover:text-zinc-900 dark:hover:text-white transition-colors" data-astro-cid-z4jru4n3>About</a><a href="/contact" class="hover:text-zinc-900 dark:hover:text-white transition-colors" data-astro-cid-z4jru4n3>Contact</a><a href="https://github.com/picwellwisher12pk" target="_blank" rel="noopener noreferrer" class="hover:text-zinc-900 dark:hover:text-white transition-colors" data-astro-cid-z4jru4n3>GitHub</a></div><div class="flex flex-col sm:flex-row items-center gap-4" data-astro-cid-z4jru4n3><div id="theme-switcher-widget" class="relative inline-flex items-center theme-switcher-widget"><div class="relative"><button id="theme-switcher-toggle" disabled aria-disabled="true" class="flex items-center gap-2 px-3 py-1.5 rounded-full border border-zinc-200 dark:border-zinc-800/90 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-sm text-xs font-mono text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-75 select-none transition-all" title="Theme switching is disabled for now"><span class="w-2 h-2 rounded-full bg-[#d4af37]" id="active-theme-dot"></span><span id="active-theme-name" class="font-medium">Luxury Classical</span><svg class="w-3.5 h-3.5 text-zinc-400/80 dark:text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4 5 5 0 015-5h4a5 5 0 015 5 4 4 0 01-4 4H7zM12 3v6m0 0l-3-3m3 3l3-3"></path></svg><span class="text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-zinc-200/50 dark:bg-zinc-800/60 text-zinc-500 dark:text-zinc-400 font-sans">Disabled</span></button><div id="theme-switcher-menu" class="hidden absolute bottom-full mb-3 right-0 sm:right-auto sm:left-0 w-72 p-4 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-2xl space-y-3 font-sans z-50 pointer-events-none"><div class="flex items-center justify-between pb-2 border-b border-zinc-100 dark:border-zinc-800"><span class="text-xs font-bold text-zinc-900 dark:text-white uppercase tracking-wider font-mono">Theme Personality</span><button id="close-theme-menu" class="text-zinc-400 hover:text-zinc-600 dark:hover:text-white text-xs">×</button></div><div class="space-y-1.5" id="theme-options-list"><button data-theme-choice="modern" class="theme-opt w-full flex items-center justify-between p-2 rounded-xl text-left hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-xs font-medium cursor-pointer"><div class="flex items-center gap-2.5"><span class="w-3 h-3 rounded-full bg-indigo-500"></span><div><div class="text-zinc-900 dark:text-white font-semibold">Modern Studio</div><div class="text-[10px] text-zinc-500 font-mono">Indigo glow • Rounded cards</div></div></div><span class="theme-check text-indigo-500 font-bold hidden">✓</span></button><button data-theme-choice="mono" class="theme-opt w-full flex items-center justify-between p-2 rounded-xl text-left hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-xs font-medium cursor-pointer"><div class="flex items-center gap-2.5"><span class="w-3 h-3 rounded-xs bg-emerald-500"></span><div><div class="text-zinc-900 dark:text-white font-semibold font-mono">Cyber / Mono</div><div class="text-[10px] text-zinc-500 font-mono">JetBrains • Sharp wireframe</div></div></div><span class="theme-check text-emerald-500 font-bold hidden">✓</span></button><button data-theme-choice="editorial" class="theme-opt w-full flex items-center justify-between p-2 rounded-xl text-left hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-xs font-medium cursor-pointer"><div class="flex items-center gap-2.5"><span class="w-3 h-3 rounded-full bg-orange-600"></span><div><div class="text-zinc-900 dark:text-white font-semibold font-serif">Editorial Warm</div><div class="text-[10px] text-zinc-500 font-mono">Playfair serif • Warm paper</div></div></div><span class="theme-check text-orange-600 font-bold hidden">✓</span></button><button data-theme-choice="brutalist" class="theme-opt w-full flex items-center justify-between p-2 rounded-xl text-left hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-xs font-medium cursor-pointer"><div class="flex items-center gap-2.5"><span class="w-3 h-3 rounded-xs bg-amber-500 border border-black"></span><div><div class="text-zinc-900 dark:text-white font-bold">Neo-Brutalist</div><div class="text-[10px] text-zinc-500 font-mono">Solid borders • Hard shadows</div></div></div><span class="theme-check text-amber-500 font-bold hidden">✓</span></button><button data-theme-choice="luxury" class="theme-opt w-full flex items-center justify-between p-2 rounded-xl text-left hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-xs font-medium cursor-pointer"><div class="flex items-center gap-2.5"><span class="w-3 h-3 rounded-full bg-[#d4af37] shadow-[0_0_8px_rgba(212,175,55,0.6)]"></span><div><div class="text-zinc-900 dark:text-white font-semibold font-serif tracking-wider">Luxury Classical</div><div class="text-[10px] text-zinc-500 font-mono">Pitch black • Cinzel serif • Gold</div></div></div><span class="theme-check text-[#d4af37] font-bold hidden">✓</span></button></div><div class="pt-2 border-t border-zinc-100 dark:border-zinc-800"><button id="toggle-ab-mode" class="w-full py-2 px-2.5 rounded-xl border border-dashed border-zinc-300 dark:border-zinc-700 hover:border-indigo-500 text-zinc-700 dark:text-zinc-300 text-xs font-mono flex items-center justify-between transition-colors cursor-pointer"><span class="flex items-center gap-1.5"><span>🎲</span> Random A/B Mode</span><span id="ab-status" class="px-2 py-0.5 rounded text-[10px] font-bold bg-zinc-100 dark:bg-zinc-800 text-zinc-500">OFF</span></button></div></div></div></div><script type="module">var e={modern:`Modern`,mono:`Cyber Mono`,editorial:`Editorial`,brutalist:`Brutalist`,luxury:`Luxury Classical`},t={modern:`#6366f1`,mono:`#10b981`,editorial:`#ea580c`,brutalist:`#f59e0b`,luxury:`#d4af37`},n=document.getElementById(`theme-switcher-toggle`),r=document.getElementById(`theme-switcher-menu`),i=document.getElementById(`close-theme-menu`),a=document.getElementById(`active-theme-dot`),o=document.getElementById(`active-theme-name`),s=document.querySelectorAll(`.theme-opt`),c=document.getElementById(`toggle-ab-mode`),l=document.getElementById(`ab-status`);function u(n){o&&(o.textContent=e[n]||`Theme`),a&&(a.style.backgroundColor=t[n]||`#d4af37`),s.forEach(e=>{let t=e.getAttribute(`data-theme-choice`),r=e.querySelector(`.theme-check`);t===n?(r?.classList.remove(`hidden`),e.classList.add(`bg-zinc-100`,`dark:bg-zinc-800`)):(r?.classList.add(`hidden`),e.classList.remove(`bg-zinc-100`,`dark:bg-zinc-800`))});let r=localStorage.getItem(`ab-theme-mode`)===`true`;l&&(l.textContent=r?`ON`:`OFF`,l.className=r?`px-2 py-0.5 rounded text-[10px] font-bold bg-indigo-50 text-indigo-600 dark:bg-indigo-950 dark:text-indigo-400`:`px-2 py-0.5 rounded text-[10px] font-bold bg-zinc-100 dark:bg-zinc-800 text-zinc-500`)}n?.addEventListener(`click`,e=>{e.preventDefault(),e.stopPropagation()}),i?.addEventListener(`click`,()=>{r?.classList.add(`hidden`)}),document.addEventListener(`click`,e=>{!r?.contains(e.target)&&!n?.contains(e.target)&&r?.classList.add(`hidden`)}),s.forEach(e=>{e.addEventListener(`click`,()=>{})}),c?.addEventListener(`click`,()=>{}),u(document.documentElement.getAttribute(`data-theme`)||`luxury`);</script><div class="text-xs text-zinc-400 dark:text-zinc-500 font-mono" data-astro-cid-z4jru4n3>© 2026 amirhameed.com</div></div></div></footer><script type="module">(function(){let e=document.getElementById(`site-header`);function t(){e&&(window.scrollY>10?e.classList.add(`header-scrolled`):e.classList.remove(`header-scrolled`))}window.addEventListener(`scroll`,t,{passive:!0}),t()})();</script><script type="module">var e=document.getElementById(`viewport-menu-btn`),t=document.getElementById(`viewport-fullscreen-menu`),n=document.getElementById(`viewport-menu-close-btn`);function r(){t&&(t.classList.remove(`opacity-0`,`pointer-events-none`),t.classList.add(`opacity-100`,`pointer-events-auto`),t.setAttribute(`aria-hidden`,`false`),e?.setAttribute(`aria-expanded`,`true`),document.documentElement.classList.add(`overflow-hidden`),document.body.classList.add(`overflow-hidden`))}function i(){t&&(t.classList.remove(`opacity-100`,`pointer-events-auto`),t.classList.add(`opacity-0`,`pointer-events-none`),t.setAttribute(`aria-hidden`,`true`),e?.setAttribute(`aria-expanded`,`false`),document.documentElement.classList.remove(`overflow-hidden`),document.body.classList.remove(`overflow-hidden`))}e?.addEventListener(`click`,r),n?.addEventListener(`click`,i),window.addEventListener(`keydown`,e=>{e.key===`Escape`&&i()}),t?.querySelectorAll(`.viewport-nav-link`).forEach(e=>{e.addEventListener(`click`,i)});</script><vercel-analytics data-props="{"data-astro-cid-z4jru4n3":true}" data-params="{"slug":"zen-coding"}" data-pathname="/blog/zen-coding/"></vercel-analytics><script type="module">var e=()=>{window.va||(window.va=function(...e){window.vaq||(window.vaq=[]),window.vaq.push(e)})},t=`@vercel/analytics`,n=`2.0.1`;function r(){return typeof window<`u`}function i(){return`production`}function a(e=`auto`){if(e===`auto`){window.vam=i();return}window.vam=e}function o(){return(r()?window.vam:i())||`production`}function s(){return o()===`development`}function c(e,t){if(!e||!t)return e;let n=e;try{let e=Object.entries(t);for(let[t,r]of e)if(!Array.isArray(r)){let e=l(r);e.test(n)&&(n=n.replace(e,`/[${t}]`))}for(let[t,r]of e)if(Array.isArray(r)){let e=l(r.join(`/`));e.test(n)&&(n=n.replace(e,`/[...${t}]`))}return n}catch{return e}}function l(e){return RegExp(`/${u(e)}(?=[/?#]|$)`)}function u(e){return e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)}function d(e){return e.scriptSrc?p(e.scriptSrc):s()?`https://va.vercel-scripts.com/v1/script.debug.js`:e.basePath?p(`${e.basePath}/insights/script.js`):`/_vercel/insights/script.js`}function f(e,r){let i=e;if(r)try{i={...JSON.parse(r)?.analytics,...e}}catch{}a(i.mode);let o={sdkn:t+(i.framework?`/${i.framework}`:``),sdkv:n};return i.disableAutoTrack&&(o.disableAutoTrack=`1`),i.viewEndpoint&&(o.viewEndpoint=p(i.viewEndpoint)),i.eventEndpoint&&(o.eventEndpoint=p(i.eventEndpoint)),i.sessionEndpoint&&(o.sessionEndpoint=p(i.sessionEndpoint)),s()&&i.debug===!1&&(o.debug=`false`),i.dsn&&(o.dsn=i.dsn),i.endpoint?o.endpoint=i.endpoint:i.basePath&&(o.endpoint=p(`${i.basePath}/insights`)),{beforeSend:i.beforeSend,src:d(i),dataset:o}}function p(e){return e.startsWith(`http://`)||e.startsWith(`https://`)||e.startsWith(`/`)?e:`/${e}`}function m(t={debug:!0},n){var i;if(!r())return;let{beforeSend:a,src:o,dataset:c}=f(t,n);if(e(),a&&((i=window.va)==null||i.call(window,`beforeSend`,a)),document.head.querySelector(`script[src*="${o}"]`))return;let l=document.createElement(`script`);l.src=o;for(let[e,t]of Object.entries(c))l.dataset[e]=t;l.defer=!0,l.onerror=()=>{let e=s()?`Please check if any ad blockers are enabled and try again.`:`Be sure to enable Web Analytics for your project and deploy again. See https://vercel.com/docs/analytics/quickstart for more information.`;console.log(`[Vercel Web Analytics] Failed to load script from ${o}. ${e}`)},document.head.appendChild(l)}function h({route:e,path:t}){var n;(n=window.va)==null||n.call(window,`pageview`,{route:e,path:t})}function g(){try{return}catch{}}function _(){try{return`{"analytics":{"scriptSrc":"24414944d2c18c05/script.js","viewEndpoint":"24414944d2c18c05/view","eventEndpoint":"24414944d2c18c05/event","sessionEndpoint":"24414944d2c18c05/session"},"speedInsights":{"scriptSrc":"ac1990045c91239a/script.js","endpoint":"ac1990045c91239a/vitals"}}`}catch{}}customElements.define(`vercel-analytics`,class extends HTMLElement{constructor(){super();try{let e=JSON.parse(this.dataset.props??`{}`),t=JSON.parse(this.dataset.params??`{}`);m({...e,disableAutoTrack:!0,framework:`astro`,basePath:g(),beforeSend:window.webAnalyticsBeforeSend},_());let n=this.dataset.pathname;h({route:c(n??``,t),path:n})}catch(e){throw Error(`Failed to parse WebAnalytics properties: ${e}`)}}});</script><div id="custom-cursor" aria-hidden="true" style="position:fixed;top:0;left:0;width:36px;height:36px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:99999;transform:translate(-100px,-100px);transition:opacity 0.3s ease,width 0.2s ease,height 0.2s ease;will-change:transform;" data-astro-cid-z4jru4n3></div><script type="module">(function(){if(!window.matchMedia(`(hover: hover) and (pointer: fine)`).matches)return;let e=document.getElementById(`custom-cursor`);if(!e)return;let t=.01,n=.78,r=-300,i=-300,a=0,o=0,s=-300,c=-300,l=!1;window.addEventListener(`pointermove`,t=>{s=t.clientX,c=t.clientY,l||(l=!0,e.style.opacity=`1`)},{passive:!0}),window.addEventListener(`pointerleave`,()=>{l=!1,e.style.opacity=`0`});let u=`a,button,input,textarea,select,[role='button'],[tabindex]`;document.addEventListener(`pointerover`,t=>{t.target?.closest(u)&&(e.style.width=`64px`,e.style.height=`64px`)}),document.addEventListener(`pointerout`,t=>{t.target?.closest(u)&&(e.style.width=`36px`,e.style.height=`36px`)}),document.addEventListener(`pointerdown`,()=>{e.style.width=`22px`,e.style.height=`22px`}),document.addEventListener(`pointerup`,()=>{e.style.width=`36px`,e.style.height=`36px`}),(function l(){a=(a+(s-r)*t)*n,o=(o+(c-i)*t)*n,r+=a,i+=o,window.__cx=r,window.__cy=i;let u=parseFloat(e.style.width)||36,d=parseFloat(e.style.height)||36;e.style.transform=`translate(${r-u*.5}px,${i-d*.5}px)`,requestAnimationFrame(l)})(),e.style.opacity=`0`})();</script><div id="build-badge" style="display:none" class="fixed bottom-3 right-3 z-[999] font-mono text-[10px] leading-relaxed bg-black/80 backdrop-blur-sm border border-white/10 text-white/60 px-3 py-2 rounded-lg shadow-xl pointer-events-auto select-all" data-astro-cid-z4jru4n3><div class="flex items-center gap-1.5 mb-0.5" data-astro-cid-z4jru4n3><span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" data-astro-cid-z4jru4n3></span><span class="text-white/40 uppercase tracking-widest text-[9px]" data-astro-cid-z4jru4n3>Build</span></div><div data-astro-cid-z4jru4n3><span class="text-white/40" data-astro-cid-z4jru4n3>commit </span><a id="build-commit-link" href="#" target="_blank" rel="noopener" class="text-[#d4af37] hover:text-yellow-300 transition-colors" data-astro-cid-z4jru4n3></a></div><div id="build-time-line" data-astro-cid-z4jru4n3><span class="text-white/40" data-astro-cid-z4jru4n3>built </span><span id="build-time-val" class="text-white/70" data-astro-cid-z4jru4n3></span></div></div><script type="module">(function(){let e=`2026-10-20T17:51:57.385Z`,t=document.getElementById(`build-badge`),n=document.getElementById(`build-commit-link`),r=document.getElementById(`build-time-val`);if(n&&(n.textContent=`dev`,n.href=`https://github.com/picwellwisher12pk/amirhameed-astro/commit/dev`),r)try{r.textContent=new Date(e).toLocaleString(`en-GB`,{day:`2-digit`,month:`short`,year:`numeric`,hour:`2-digit`,minute:`2-digit`,timeZoneName:`short`})}catch{r.textContent=e}function i(){t&&(t.style.display=`block`)}new URLSearchParams(window.location.search).get(`v`)===`1`?(i(),sessionStorage.setItem(`showBuildBadge`,`1`)):sessionStorage.getItem(`showBuildBadge`)===`1`&&i()})();</script></body></html>