From Finger to Click<\/title>\n<style>\n #touch-timeline * { box-sizing: border-box; margin: 0; padding: 0; }\n\n #touch-timeline {\n background: #0a0a0f;\n font-family: Georgia, 'Times New Roman', serif;\n color: #e8e4d9;\n border-radius: 8px;\n overflow: hidden;\n max-width: 100%;\n }\n\n #touch-timeline .tl-header {\n padding: 40px 40px 24px;\n border-bottom: 1px solid #1e1e2e;\n background: linear-gradient(180deg, #0d0d18 0%, #0a0a0f 100%);\n }\n\n #touch-timeline .tl-eyebrow {\n font-size: 11px;\n letter-spacing: 4px;\n color: #5a5a7a;\n text-transform: uppercase;\n margin-bottom: 8px;\n font-family: monospace;\n }\n\n #touch-timeline .tl-title {\n font-size: clamp(24px, 4vw, 42px);\n font-weight: normal;\n color: #e8e4d9;\n letter-spacing: -1px;\n line-height: 1.1;\n }\n\n #touch-timeline .tl-subtitle {\n margin-top: 10px;\n color: #5a5a7a;\n font-size: 14px;\n font-style: italic;\n }\n\n \/* Timeline strip *\/\n #touch-timeline .tl-strip {\n display: flex;\n overflow-x: auto;\n padding: 24px 40px 0;\n border-bottom: 1px solid #1e1e2e;\n background: #0a0a0f;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n #touch-timeline .tl-strip::-webkit-scrollbar { display: none; }\n\n #touch-timeline .tl-node {\n display: flex;\n flex-direction: column;\n align-items: center;\n cursor: pointer;\n padding: 0 18px 20px;\n position: relative;\n flex-shrink: 0;\n }\n\n #touch-timeline .tl-line {\n position: absolute;\n top: 7px;\n height: 2px;\n background: #1e1e2e;\n z-index: 0;\n transition: background 0.3s;\n }\n\n #touch-timeline .tl-dot {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #1e1e2e;\n border: 2px solid #2e2e4e;\n z-index: 1;\n transition: all 0.2s;\n flex-shrink: 0;\n margin-bottom: 10px;\n }\n\n #touch-timeline .tl-node.active .tl-dot {\n border-color: var(--node-color);\n background: var(--node-color);\n }\n\n #touch-timeline .tl-node:hover .tl-dot {\n border-color: var(--node-color);\n }\n\n #touch-timeline .tl-node-icon { font-size: 18px; margin-bottom: 4px; }\n\n #touch-timeline .tl-node-year {\n font-size: 11px;\n font-family: monospace;\n color: #4a4a6a;\n white-space: nowrap;\n transition: color 0.2s;\n }\n\n #touch-timeline .tl-node.active .tl-node-year {\n color: var(--node-color);\n font-weight: bold;\n }\n\n \/* Body *\/\n #touch-timeline .tl-body {\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: 420px;\n }\n\n @media (max-width: 640px) {\n #touch-timeline .tl-body { grid-template-columns: 1fr; }\n #touch-timeline .tl-right { border-top: 1px solid #1e1e2e; border-left: none !important; }\n #touch-timeline .tl-header, #touch-timeline .tl-strip,\n #touch-timeline .tl-left, #touch-timeline .tl-right { padding-left: 20px; padding-right: 20px; }\n }\n\n #touch-timeline .tl-left {\n padding: 40px;\n border-right: 1px solid #1e1e2e;\n }\n\n #touch-timeline .tl-right { padding: 40px; }\n\n #touch-timeline .tl-era-tag {\n display: inline-block;\n padding: 4px 12px;\n border-radius: 2px;\n font-size: 11px;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-family: monospace;\n margin-bottom: 16px;\n }\n\n #touch-timeline .tl-card-title {\n font-size: clamp(20px, 2.5vw, 28px);\n font-weight: normal;\n color: #e8e4d9;\n line-height: 1.2;\n margin-bottom: 6px;\n }\n\n #touch-timeline .tl-card-year {\n font-size: 13px;\n font-family: monospace;\n margin-bottom: 28px;\n opacity: 0.8;\n }\n\n #touch-timeline .tl-section-label {\n font-size: 10px;\n color: #4a4a6a;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-family: monospace;\n margin-bottom: 8px;\n }\n\n #touch-timeline .tl-layer-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 14px;\n background: #0e0e18;\n border-radius: 2px;\n margin-bottom: 28px;\n }\n\n #touch-timeline .tl-layer-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n #touch-timeline .tl-layer-text {\n font-size: 12px;\n font-family: monospace;\n color: #a0a0c0;\n }\n\n #touch-timeline .tl-who {\n color: #b0afc0;\n line-height: 1.6;\n font-size: 15px;\n font-style: italic;\n margin-bottom: 24px;\n }\n\n #touch-timeline .tl-what {\n color: #c8c7d8;\n line-height: 1.8;\n font-size: 15px;\n }\n\n \/* Right side *\/\n #touch-timeline .tl-constraint-box {\n background: #0e0e18;\n border: 1px solid rgba(232,71,71,0.2);\n border-left: 3px solid #e84747;\n padding: 20px;\n margin-bottom: 24px;\n border-radius: 0 2px 2px 0;\n }\n\n #touch-timeline .tl-constraint-label {\n font-size: 10px;\n color: #e84747;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-family: monospace;\n margin-bottom: 10px;\n }\n\n #touch-timeline .tl-constraint-text {\n color: #c0b8b8;\n line-height: 1.8;\n font-size: 14px;\n }\n\n #touch-timeline .tl-detail-box {\n padding: 20px;\n border-radius: 2px;\n }\n\n #touch-timeline .tl-detail-label {\n font-size: 10px;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-family: monospace;\n margin-bottom: 10px;\n }\n\n #touch-timeline .tl-detail-text {\n color: #b0b0c8;\n line-height: 1.9;\n font-size: 14px;\n }\n\n \/* Nav *\/\n #touch-timeline .tl-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 32px;\n border-top: 1px solid #1e1e2e;\n padding-top: 20px;\n }\n\n #touch-timeline .tl-btn {\n background: none;\n border: 1px solid #3e3e5e;\n color: #8080a0;\n padding: 8px 18px;\n cursor: pointer;\n font-family: monospace;\n font-size: 12px;\n letter-spacing: 2px;\n transition: all 0.2s;\n }\n\n #touch-timeline .tl-btn:disabled {\n border-color: #1e1e2e;\n color: #2e2e4e;\n cursor: not-allowed;\n }\n\n #touch-timeline .tl-btn.next-btn:not(:disabled) {\n background: var(--accent-bg);\n border-color: var(--accent-border);\n color: var(--accent-color);\n }\n\n #touch-timeline .tl-counter {\n color: #3a3a5a;\n font-family: monospace;\n font-size: 11px;\n }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"touch-timeline\">\n <div class=\"tl-header\">\n <div class=\"tl-eyebrow\">A Technical History<\/div>\n <h2 class=\"tl-title\">From Finger to Click<\/h2>\n <p class=\"tl-subtitle\">How the web learned to feel a human touch · 1965 – Present<\/p>\n <\/div>\n <div class=\"tl-strip\" id=\"tlStrip\"><\/div>\n <div class=\"tl-body\">\n <div class=\"tl-left\" id=\"tlLeft\"><\/div>\n <div class=\"tl-right\" id=\"tlRight\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n(function() {\n const data = [\n {\n year: \"1965\", era: \"The Spark\", color: \"#e8c547\", icon: \"\u26a1\",\n title: \"The Idea Is Born\",\n who: \"Eric Arthur Johnson \u2014 Royal Radar Establishment, England\",\n what: \"Johnson writes the first paper describing a capacitive touchscreen to aid air traffic control. His patent is granted in 1969.\",\n constraint: \"Pure research. No consumer devices. Resistive touch would dominate for decades because it was cheaper.\",\n layer: \"Hardware\",\n detail: \"Johnson's capacitive idea detected the electrical disturbance a finger makes on a conductive surface. The concept sat dormant for 40+ years before smartphones made it viable at scale.\"\n },\n {\n year: \"1982\", era: \"Early Experiments\", color: \"#e87447\", icon: \"\ud83d\udd90\",\n title: \"First Multi-Touch Screen\",\n who: \"Nimish Mehta \u2014 University of Toronto + Bell Labs' Bob Boie\",\n what: \"Mehta creates the first human-controlled multi-touch device. Boie at Bell Labs creates the first transparent multi-touch interface \u2014 a foundational leap.\",\n constraint: \"Extremely expensive. No software existed to take advantage of it. Operating systems only understood mouse coordinates \u2014 a single X,Y point.\",\n layer: \"Hardware + OS\",\n detail: \"These were lab experiments. The hardware existed but the software world had no concept of 'touch events'. There was no OS infrastructure to interpret multiple simultaneous touch points.\"\n },\n {\n year: \"2000\u20132006\", era: \"Before the Storm\", color: \"#47a3e8\", icon: \"\ud83d\udcf1\",\n title: \"Resistive Touch & Stylus Era\",\n who: \"Palm, Windows Mobile, Nokia, Blackberry\",\n what: \"PDAs and early smartphones used resistive touchscreens requiring a stylus. The web mostly didn't load on these devices anyway.\",\n constraint: \"Resistive screens needed pressure \u2014 fingers barely worked. Web browsers were stripped-down with no touch event model whatsoever.\",\n layer: \"OS + Browser\",\n detail: \"Windows Mobile had a stylus-first model. Tapping with a stylus was treated like a mouse click because the precision was similar. There was no need for a new event model \u2014 it was essentially still a pointing device.\"\n },\n {\n year: \"Jan 2007\", era: \"The Earthquake\", color: \"#e84747\", icon: \"\ud83c\udf4e\",\n title: \"Apple Ships the iPhone\",\n who: \"Apple \u2014 Scott Forstall's iOS team + WebKit team\",\n what: \"iPhone launches with a capacitive multi-touch screen AND a real web browser. No stylus. Fingers only. The entire web was built for mouse events.\",\n constraint: \"Every dropdown, every button, every link \u2014 designed for pixel-precise cursor clicks. Apple had to bridge this gap on day one.\",\n layer: \"OS + Browser + Hardware\",\n detail: \"Apple's solution: fire a synthetic 'click' event after a tap \u2014 with a 300ms delay. The OS would wait to see if a second tap was coming (double-tap to zoom). If not: click. Every existing website 'worked' on day one, even though none were designed for touch.\"\n },\n {\n year: \"2007\u20132008\", era: \"The Scramble\", color: \"#9b47e8\", icon: \"\ud83d\udd27\",\n title: \"Browsers Didn't Know Touch Existed\",\n who: \"Mozilla (Firefox), Opera Mobile \u2014 scrambling to catch up\",\n what: \"iPhone's Safari shipped with a proprietary touch event API: touchstart, touchmove, touchend. No other browser had anything like this. No standard existed.\",\n constraint: \"Apple invented their own API. Android (2008) copied it. Firefox and Opera had to reverse-engineer it from scratch \u2014 there was no W3C spec yet.\",\n layer: \"Browser\",\n detail: \"This was NOT a coordinated industry effort. Apple shipped their model and the rest of the browser world had to copy it. Researcher Peter-Paul Koch wrote an advisory paper in 2010 saying browsers MUST copy Apple's touch model. It was descriptive, not prescriptive \u2014 the industry was just making it up.\"\n },\n {\n year: \"2008\", era: \"Android Enters\", color: \"#47e87a\", icon: \"\ud83e\udd16\",\n title: \"Android Ships, Copies Apple's Model\",\n who: \"Google \/ Android team\",\n what: \"Android's browser deliberately implements Apple's touch event model: touchstart, touchmove, touchend. The 300ms delay is also copied.\",\n constraint: \"The 300ms delay was now on two major platforms. Every tap on the mobile web felt sluggish because the browser was always waiting to see if another tap was coming.\",\n layer: \"OS + Browser\",\n detail: \"Google's choice to copy Apple's API meant the same JavaScript code worked on both platforms. But it also meant the 300ms delay became industry standard, baked into hundreds of millions of devices.\"\n },\n {\n year: \"2011\", era: \"Standards Wake Up\", color: \"#e8a347\", icon: \"\ud83d\udccb\",\n title: \"W3C Publishes Touch Events Spec\",\n who: \"W3C (World Wide Web Consortium)\",\n what: \"The W3C formalizes 'Touch Events Level 1' \u2014 essentially rubber-stamping what Apple and Android already shipped. Four years after the iPhone.\",\n constraint: \"Patent issues with Apple temporarily stalled progress. Microsoft refused to implement Touch Events, building their own 'Pointer Events' model instead.\",\n layer: \"Standards Body\",\n detail: \"The spec was written AFTER the implementations already existed. This is backwards from how standards normally work \u2014 usually you standardize first, then ship. Touch events were the wild west: ship first, standardize later.\"\n },\n {\n year: \"2012\u20132013\", era: \"Microsoft's Rebellion\", color: \"#47d4e8\", icon: \"\ud83e\ude9f\",\n title: \"IE10 Invents Pointer Events\",\n who: \"Microsoft \u2014 for Windows 8 \/ Surface devices\",\n what: \"Microsoft invents 'Pointer Events' \u2014 a unified model where mouse, touch, and stylus are all just 'pointers'. IE10 ships with this. A better idea, ignored for years.\",\n constraint: \"Now developers had THREE things to support: mouse events, touch events, and pointer events. The fragmentation was maddening.\",\n layer: \"Browser + Standards\",\n detail: \"Microsoft's idea was actually superior \u2014 one event model to rule them all. But Apple refused to implement Pointer Events. Chrome initially pledged support, then backed out in 2015, citing performance concerns. The better solution lost the standards war for nearly a decade.\"\n },\n {\n year: \"2013\u20132015\", era: \"Killing the Delay\", color: \"#e84796\", icon: \"\u26a1\",\n title: \"The 300ms Delay Gets Killed\",\n who: \"Google Chrome team + FT Labs (FastClick.js)\",\n what: \"Google introduces 'touch-action: manipulation' CSS property \u2014 declare this and the browser fires the click instantly. Before the official fix, developers used FastClick.js, a JS hack built by the Financial Times.\",\n constraint: \"Sites relying on double-tap zoom would break if the delay was removed globally. It had to be opt-in. The web was full of sites that never updated.\",\n layer: \"Browser + CSS\",\n detail: \"FastClick.js listened for touchend events and manually fired a fake click immediately \u2014 bypassing the 300ms wait. This hack was used on millions of production websites for years. A library whose entire purpose was to make a button feel responsive.\"\n },\n {\n year: \"2019\", era: \"The Unification\", color: \"#47e8c5\", icon: \"\ud83c\udfaf\",\n title: \"Safari Finally Adopts Pointer Events\",\n who: \"Apple \u2014 Safari 13\",\n what: \"Apple, the last holdout, ships Pointer Events in Safari 13. For the first time, ALL major browsers support one unified input model.\",\n constraint: \"It took 12 years from iPhone launch to get here. Touch Events are now a 'legacy API' \u2014 still supported, but developers are encouraged to use Pointer Events.\",\n layer: \"Browser + Standards\",\n detail: \"Apple's late adoption was partly stubbornness, partly valid technical concerns about the original spec's performance. Once those were resolved, they came on board. Safari 13 was the moment the industry finally had one standard for all input types.\"\n },\n {\n year: \"Today\", era: \"The Present\", color: \"#a3e847\", icon: \"\u2705\",\n title: \"One Event Model To Rule Them All\",\n who: \"All browsers \u2014 Chrome, Safari, Firefox, Edge\",\n what: \"Pointer Events is the modern standard. Your tap, mouse click, stylus stroke, and trackpad tap all fire the same 'pointerdown' event. The browser handles the translation automatically.\",\n constraint: \"Touch Events still exist and still work \u2014 billions of lines of old code depend on them. They will never be fully removed.\",\n layer: \"Fully Unified\",\n detail: \"The journey from 'a tap fires a synthetic mouse click with a 300ms delay' to 'a unified pointer event model across all devices' took 12 years, involved Apple, Google, Microsoft, Mozilla, the W3C, and countless individual engineers shouting into the void.\"\n }\n ];\n\n let current = 3;\n\n function hexToRgba(hex, alpha) {\n const r = parseInt(hex.slice(1,3),16);\n const g = parseInt(hex.slice(3,5),16);\n const b = parseInt(hex.slice(5,7),16);\n return `rgba(${r},${g},${b},${alpha})`;\n }\n\n function renderStrip() {\n const strip = document.getElementById('tlStrip');\n strip.innerHTML = '';\n data.forEach((item, i) => {\n const node = document.createElement('div');\n node.className = 'tl-node' + (i === current ? ' active' : '');\n node.style.setProperty('--node-color', item.color);\n node.onclick = () => { current = i; render(); };\n\n \/\/ connector line\n const line = document.createElement('div');\n line.className = 'tl-line';\n line.style.left = i === 0 ? '50%' : '0';\n line.style.right = i === data.length - 1 ? '50%' : '0';\n line.style.background = i === current ? item.color : '#1e1e2e';\n\n const dot = document.createElement('div');\n dot.className = 'tl-dot';\n if (i === current) {\n dot.style.background = item.color;\n dot.style.borderColor = item.color;\n dot.style.boxShadow = `0 0 12px ${hexToRgba(item.color, 0.5)}`;\n }\n\n const icon = document.createElement('div');\n icon.className = 'tl-node-icon';\n icon.textContent = item.icon;\n\n const year = document.createElement('div');\n year.className = 'tl-node-year';\n year.textContent = item.year;\n\n node.appendChild(line);\n node.appendChild(dot);\n node.appendChild(icon);\n node.appendChild(year);\n strip.appendChild(node);\n });\n }\n\n function renderLeft() {\n const item = data[current];\n const left = document.getElementById('tlLeft');\n left.innerHTML = `\n <div class=\"tl-era-tag\" style=\"background:${hexToRgba(item.color,0.13)};border:1px solid ${hexToRgba(item.color,0.27)};color:${item.color}\">${item.era}<\/div>\n <h3 class=\"tl-card-title\">${item.icon} ${item.title}<\/h3>\n <div class=\"tl-card-year\" style=\"color:${item.color}\">${item.year}<\/div>\n <div class=\"tl-section-label\">Where this happened<\/div>\n <div class=\"tl-layer-badge\" style=\"border:1px solid ${hexToRgba(item.color,0.2)}\">\n <div class=\"tl-layer-dot\" style=\"background:${item.color}\"><\/div>\n <span class=\"tl-layer-text\">${item.layer}<\/span>\n <\/div>\n <div class=\"tl-section-label\">Key Players<\/div>\n <p class=\"tl-who\">${item.who}<\/p>\n <div class=\"tl-section-label\">What Happened<\/div>\n <p class=\"tl-what\">${item.what}<\/p>\n `;\n }\n\n function renderRight() {\n const item = data[current];\n const right = document.getElementById('tlRight');\n right.innerHTML = `\n <div class=\"tl-constraint-box\">\n <div class=\"tl-constraint-label\">\u26a0 The Constraint<\/div>\n <p class=\"tl-constraint-text\">${item.constraint}<\/p>\n <\/div>\n <div class=\"tl-detail-box\" style=\"background:${hexToRgba(item.color,0.04)};border:1px solid ${hexToRgba(item.color,0.13)}\">\n <div class=\"tl-detail-label\" style=\"color:${item.color}\">\ud83d\udd0d The Full Story<\/div>\n <p class=\"tl-detail-text\">${item.detail}<\/p>\n <\/div>\n <div class=\"tl-nav\">\n <button class=\"tl-btn prev-btn\" ${current === 0 ? 'disabled' : ''} onclick=\"tlPrev()\">\u2190 PREV<\/button>\n <span class=\"tl-counter\">${current + 1} \/ ${data.length}<\/span>\n <button class=\"tl-btn next-btn\" ${current === data.length - 1 ? 'disabled' : ''}\n style=\"--accent-bg:${hexToRgba(item.color,0.13)};--accent-border:${hexToRgba(item.color,0.27)};--accent-color:${item.color}\"\n onclick=\"tlNext()\">NEXT \u2192<\/button>\n <\/div>\n `;\n }\n\n function render() {\n renderStrip();\n renderLeft();\n renderRight();\n }\n\n window.tlPrev = function() { if (current > 0) { current--; render(); } };\n window.tlNext = function() { if (current < data.length - 1) { current++; render(); } };\n\n render();\n})();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Constraint: A Finger Is Not a Cursor<\/strong><\/h2>\n\n\n\n<p>A mouse cursor is, effectively, a point. One pixel. When you click, the operating system knows exactly \u2014 to the pixel \u2014 where you meant to click.<\/p>\n\n\n\n<p>A human fingertip, pressed against glass, covers roughly 44 by 44 pixels. It's warm and soft and slightly irregular. And crucially: it has no hover state. A cursor can sit above a button without clicking it, giving the button a chance to highlight and signal its presence. A finger is either touching or it isn't. There is no in-between.<\/p>\n\n\n\n<p>This created a cascade of problems that were easy to dismiss in a keynote but brutal in practice:<\/p>\n\n\n\n<p>Precision. That tiny 10-pixel link in a paragraph of text? Basically untappable. Users would tap, miss, tap again. Frustrating.<\/p>\n\n\n\n<p>Hover states. An entire category of web interaction \u2014 menus that appeared on hover, tooltips, preview cards \u2014 simply could not exist. There was nothing to hover with.<\/p>\n\n\n\n<p>Ambiguity. When a finger touches the screen, is the user trying to tap a button, or beginning to scroll? A mouse cursor never scrolls by being clicked. A finger does both. The operating system had to guess.<\/p>\n\n\n\n<p>That last problem \u2014 the tap versus scroll ambiguity \u2014 is what led to one of the most famous hacks in the history of the web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The 300 Milliseconds That Haunted a Generation of Developers<\/strong><\/h2>\n\n\n\n<p>Apple's engineers faced an immediate problem when building Mobile Safari for the original iPhone. The web expected click events. Fingers produced touches. How do you translate one into the other?<\/p>\n\n\n\n<p>Their solution was pragmatic: when a finger lifts from the screen, wait. Wait 300 milliseconds. If a second tap comes within that window, the user is double-tapping \u2014 probably to zoom in on text. If no second tap comes, <em>then<\/em> fire the click event.<\/p>\n\n\n\n<p>It worked. Every existing website technically functioned on the iPhone. Buttons were clickable. Links were tappable. The web, slightly jankily, ran on a touchscreen.<\/p>\n\n\n\n<p><em>But 300 milliseconds is a long time when you're tapping a button. Long enough to notice. Long enough to make an interface feel sluggish and unresponsive. Long enough to make users tap again because they thought the first tap didn't register \u2014 accidentally double-tapping and zooming into the page.<\/em><\/p>\n\n\n\n<p>This delay shipped in 2007. It was copied by Android in 2008. It became the default behaviour of every mobile browser on earth. And it quietly tortured developers and users for the better part of a decade.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Scramble: Nobody Was Ready<\/strong><\/h2>\n\n\n\n<p>Here is something the history books tend to gloss over: the response to the iPhone was not coordinated.<\/p>\n\n\n\n<p>There was no summit of browser vendors. No emergency W3C working group convened the week after the keynote. Apple had invented their own touch event system \u2014 <em>touchstart, touchmove, touchend<\/em> \u2014 and shipped it as a proprietary API with no public specification. Android copied Apple's model when they launched in 2008, essentially because it was the only model that existed.<\/p>\n\n\n\n<p>Mozilla, Opera, and Microsoft were left looking at Apple's implementation and reverse-engineering it from the outside.<\/p>\n\n\n\n<p>Peter-Paul Koch, a web developer who did foundational research into mobile browser behaviour at the time, published an advisory paper in 2010 that reads almost comically in retrospect. He wrote, in effect: <em>other browsers must copy Apple's touch event model \u2014 there is no reason not to, it is already the market standard<\/em>. A web researcher, not a standards body, was the one telling the industry what to do.<\/p>\n\n\n\n<p>The W3C \u2014 the organisation nominally responsible for defining how the web works \u2014 published a formal Touch Events specification in 2011. That is four years after the iPhone shipped. Four years during which the industry had been improvising.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Microsoft's Rebellion, and a Better Idea<\/strong><\/h2>\n\n\n\n<p>While everyone was scrambling to copy Apple, Microsoft went its own way.<\/p>\n\n\n\n<p>In 2012, building their Surface tablet and Windows 8 touch interface, Microsoft's browser team looked at the chaos \u2014 touch events for iOS\/Android, nothing for desktop \u2014 and decided to solve the root problem. They introduced Pointer Events: a single unified model where a mouse click, a finger tap, and a stylus stroke all produced the same type of event, just with a property saying which input device had caused it.<\/p>\n\n\n\n<p>One event handler. All devices. Clean, elegant, forward-thinking.<\/p>\n\n\n\n<p>The web standards community loved it. Chrome and Firefox pledged support. The W3C began standardising it. It looked like the fragmentation was about to end.<\/p>\n\n\n\n<p><em>Then Apple refused to implement it. Safari, the browser that started all of this, declined to support the very standard that would have unified everything.<\/em><\/p>\n\n\n\n<p>Apple had patent concerns around the touch event specification. Chrome, watching Apple's refusal and worrying about the performance implications of Pointer Events, backed out of their commitment in 2015. Suddenly developers had three parallel systems to support: mouse events for desktop, touch events for iOS and Android, and pointer events for Windows and some versions of Chrome.<\/p>\n\n\n\n<p>The next four years were, charitably, a mess.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Killing the Delay<\/strong><\/h2>\n\n\n\n<p>While the standards war dragged on, developers found their own ways to fight back.<\/p>\n\n\n\n<p>The Financial Times built a JavaScript library called FastClick.js. Its entire purpose was this: listen for the <em>touchend<\/em> event \u2014 the moment the finger lifts \u2014 and immediately fire a fake click, bypassing the browser's 300-millisecond wait entirely. It was a hack, built on top of a hack, to fix a problem that shouldn't have existed.<\/p>\n\n\n\n<p>FastClick was downloaded millions of times. It ran on production websites across the internet. A library whose entire purpose was to make a button feel responsive when tapped.<\/p>\n\n\n\n<p>The official fix came in stages. Google introduced a CSS property called <em>touch-action: manipulation<\/em> that let developers tell the browser: this element doesn't use double-tap zoom, so you can fire the click immediately. Chrome later made instant-click the default for pages that declared a proper mobile viewport. The 300-millisecond delay, built into hundreds of millions of devices in 2007, was finally, quietly deprecated over the course of 2015 and 2016.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What About Scrolling?<\/strong><\/h2>\n\n\n\n<p>If the tap-to-click story is remarkable, the scroll story is something else entirely.<\/p>\n\n\n\n<p>On a desktop, scrolling comes from a mouse wheel \u2014 a mechanical device that sends discrete <em>delta<\/em> signals to the operating system. Move the wheel three clicks downward, and the OS receives three signals saying 'scroll down three units.' The page moves. A <em>scroll event<\/em> fires.<\/p>\n\n\n\n<p>On a phone, scrolling is a physical drag. Your finger touches the screen, moves downward, and lifts. The operating system tracks the velocity of that movement and continues the scroll after your finger lifts, simulating momentum \u2014 a kind of physics engine running in your pocket, calculating friction and deceleration to make the page feel like it has real weight.<\/p>\n\n\n\n<p>Two completely different physical actions. One mechanical, one biological. One discrete, one continuous. One that stops the moment you stop moving, one that glides on after you've let go.<\/p>\n\n\n\n<p><em>And yet: both of them fire the exact same scroll event. The browser doesn't care how the scroll happened. It just updates the page position and tells JavaScript: here is the new Y coordinate.<\/em><\/p>\n\n\n\n<p>This is why when an analytics platform like Google Analytics or Mixpanel measures scroll depth \u2014 tracking what percentage of a page a user read \u2014 it works identically on desktop and mobile. It is listening for <em>window.scroll<\/em> events and checking <em>window.scrollY<\/em>. The source of the scroll is invisible. A mouse wheel and a flicked finger produce the same signal.<\/p>\n\n\n\n<p>There is something philosophically strange here that is worth sitting with. When you flick your finger upward on a phone and lift it, the page keeps moving. The operating system's physics simulation takes over. JavaScript scroll events keep firing. Your analytics platform keeps counting. It is, technically, recording the behaviour of a physics engine as evidence of human reading intent.<\/p>\n\n\n\n<p>Nobody decided this was how it should work. It emerged from a series of engineering decisions made under constraint, and it turned out to be good enough \u2014 good enough that nobody has challenged it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Resolution<\/strong><\/h2>\n\n\n\n<p>In 2019, twelve years after the iPhone was announced, Apple shipped Safari 13. Quietly, without fanfare, it included support for Pointer Events \u2014 the unified input model that Microsoft had proposed seven years earlier, that Chrome and Firefox had long since implemented, that Apple had spent the better part of a decade resisting.<\/p>\n\n\n\n<p>For the first time in the history of the touchscreen web, all major browsers spoke the same language. One event model. Mouse, finger, stylus, trackpad \u2014 all producing a pointerdown event. All handled by the same code.<\/p>\n\n\n\n<p>The W3C has since declared the old Touch Events API a legacy specification. It still works, and will work for years, because billions of lines of code depend on it. But new code is encouraged to use Pointer Events instead.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What It All Means<\/strong><\/h2>\n\n\n\n<p>The story of touch on the web is not a story of brilliant foresight. Nobody planned this. Apple shipped a phone, invented an API, and left the rest of the industry to catch up. A standards body wrote a spec four years late. A browser vendor had a good idea and was ignored for seven years. Developers built elaborate hacks to work around a 300-millisecond delay.<\/p>\n\n\n\n<p>And somehow, through all of it, the web worked. A person on a train in Mumbai and a person at a desk in London tap and click on the same buttons, scroll through the same pages, and the same analytics event fires for both of them. They are counted as the same kind of user, making the same kind of gesture.<\/p>\n\n\n\n<p><em>The web is not an elegant system. It is an accretion of solutions to problems that weren't anticipated, built by people who were making it up as they went, constrained by decisions made years before them by people they had never met.<\/em><\/p>\n\n\n\n<p>That it works at all is the marvel. That it works as seamlessly as it does is something close to a miracle.<\/p>\n\n\n\n<p>The next time you tap a button on your phone, there is a small chain of events worth appreciating. A capacitive sensor detects the disturbance your finger makes in an electrical field. Your operating system translates that into coordinates. A browser \u2014 Safari, Chrome, whatever you use \u2014 translates those coordinates into a pointer event. That event finds the button it belongs to. The button responds.<\/p>\n\n\n\n<p>Between your finger and that response: forty years of research, a decade of browser wars, millions of lines of code, and at least one famously annoying 300-millisecond wait.<\/p>\n\n\n\n<p><em>All so tapping a button on a piece of glass feels as natural as breathing.<\/em><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Picture this. It is January 9, 2007. Steve Jobs walks onto a stage in San Francisco and holds up a phone with no keyboard. He swipes the screen with his finger. The audience gasps. And somewhere, in offices around the world, a very specific group of people \u2014 browser engineers, web developers, OS architects \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[11],"tags":[],"class_list":["post-1004","post","type-post","status-publish","format-standard","hentry","category-random"],"_links":{"self":[{"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/posts\/1004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/comments?post=1004"}],"version-history":[{"count":3,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/posts\/1004\/revisions"}],"predecessor-version":[{"id":1008,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/posts\/1004\/revisions\/1008"}],"wp:attachment":[{"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/media?parent=1004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/categories?post=1004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/tags?post=1004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1004,"date":"2026-03-07T14:12:20","date_gmt":"2026-03-07T14:12:20","guid":{"rendered":"https:\/\/sid.assawa.com\/?p=1004"},"modified":"2026-03-07T15:39:02","modified_gmt":"2026-03-07T15:39:02","slug":"the-2007-iphone-literally-broke-internet","status":"publish","type":"post","link":"https:\/\/sid.assawa.com\/spa\/the-2007-iphone-literally-broke-internet\/","title":{"rendered":"The Iphone (2007) Broke the Internet – Literally"},"content":{"rendered":"\n

Picture this. <\/em>It is January 9, 2007. Steve Jobs walks onto a stage in San Francisco and holds up a phone with no keyboard. He swipes the screen with his finger. The audience gasps. And somewhere, in offices around the world, a very specific group of people \u2014 browser engineers, web developers, OS architects \u2014 feel a cold sweat forming.<\/strong><\/em><\/strong><\/p>\n\n\n\n

\n\n\n\n
<\/p>\n\n\n\n
Because they know something the audience doesn’t.<\/strong><\/p>\n\n\n\n
The entire web is broken on that device. Every button, every link, every dropdown menu ever built \u2014 designed for a mouse cursor, a precise single pixel moving across a screen. And now there’s a human finger, blunt and imprecise, pressed against glass. The question nobody had publicly answered yet: what happens when that finger lifts?<\/p>\n\n\n\n
The answer they came up with, quietly and imperfectly and brilliantly over the next decade, is one of the great unsung engineering stories of the internet age.<\/p>\n\n\n\n
The World Before Touch<\/strong><\/h2>\n\n\n\n
To understand why this was such a crisis, you need to understand how the web worked in 2007.<\/p>\n\n\n\n
Every interactive element on a webpage \u2014 a button, a link, a form \u2014 was built around a single assumption: a mouse click. A mouse sends the operating system two things: coordinates (where the cursor is) and a signal (the button was pressed). The OS packages these into an event called a click<\/em>, which gets passed to the browser, which passes it to whatever element lives at those coordinates. The webpage reacts.<\/strong><\/p>\n\n\n\n
This system had been standard for over twenty years. Millions of websites were built on it. JavaScript libraries assumed it. Analytics platforms measured it. The entire architecture of the interactive web rested on one small assumption: the user has a mouse.<\/p>\n\n\n\n
Hover menus. Tiny 10-pixel links. Right-click context menus. Dropdowns that appeared when a cursor passed over them. All of it, designed for a device with no finger equivalent.<\/em><\/p>\n\n\n\n
Nobody had planned for a world where the pointing device was attached to a human hand.<\/p>\n\n\n\n\n\n\n\n\nFrom Finger to Click<\/title>\n<style>\n #touch-timeline * { box-sizing: border-box; margin: 0; padding: 0; }\n\n #touch-timeline {\n background: #0a0a0f;\n font-family: Georgia, 'Times New Roman', serif;\n color: #e8e4d9;\n border-radius: 8px;\n overflow: hidden;\n max-width: 100%;\n }\n\n #touch-timeline .tl-header {\n padding: 40px 40px 24px;\n border-bottom: 1px solid #1e1e2e;\n background: linear-gradient(180deg, #0d0d18 0%, #0a0a0f 100%);\n }\n\n #touch-timeline .tl-eyebrow {\n font-size: 11px;\n letter-spacing: 4px;\n color: #5a5a7a;\n text-transform: uppercase;\n margin-bottom: 8px;\n font-family: monospace;\n }\n\n #touch-timeline .tl-title {\n font-size: clamp(24px, 4vw, 42px);\n font-weight: normal;\n color: #e8e4d9;\n letter-spacing: -1px;\n line-height: 1.1;\n }\n\n #touch-timeline .tl-subtitle {\n margin-top: 10px;\n color: #5a5a7a;\n font-size: 14px;\n font-style: italic;\n }\n\n \/* Timeline strip *\/\n #touch-timeline .tl-strip {\n display: flex;\n overflow-x: auto;\n padding: 24px 40px 0;\n border-bottom: 1px solid #1e1e2e;\n background: #0a0a0f;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n #touch-timeline .tl-strip::-webkit-scrollbar { display: none; }\n\n #touch-timeline .tl-node {\n display: flex;\n flex-direction: column;\n align-items: center;\n cursor: pointer;\n padding: 0 18px 20px;\n position: relative;\n flex-shrink: 0;\n }\n\n #touch-timeline .tl-line {\n position: absolute;\n top: 7px;\n height: 2px;\n background: #1e1e2e;\n z-index: 0;\n transition: background 0.3s;\n }\n\n #touch-timeline .tl-dot {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #1e1e2e;\n border: 2px solid #2e2e4e;\n z-index: 1;\n transition: all 0.2s;\n flex-shrink: 0;\n margin-bottom: 10px;\n }\n\n #touch-timeline .tl-node.active .tl-dot {\n border-color: var(--node-color);\n background: var(--node-color);\n }\n\n #touch-timeline .tl-node:hover .tl-dot {\n border-color: var(--node-color);\n }\n\n #touch-timeline .tl-node-icon { font-size: 18px; margin-bottom: 4px; }\n\n #touch-timeline .tl-node-year {\n font-size: 11px;\n font-family: monospace;\n color: #4a4a6a;\n white-space: nowrap;\n transition: color 0.2s;\n }\n\n #touch-timeline .tl-node.active .tl-node-year {\n color: var(--node-color);\n font-weight: bold;\n }\n\n \/* Body *\/\n #touch-timeline .tl-body {\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: 420px;\n }\n\n @media (max-width: 640px) {\n #touch-timeline .tl-body { grid-template-columns: 1fr; }\n #touch-timeline .tl-right { border-top: 1px solid #1e1e2e; border-left: none !important; }\n #touch-timeline .tl-header, #touch-timeline .tl-strip,\n #touch-timeline .tl-left, #touch-timeline .tl-right { padding-left: 20px; padding-right: 20px; }\n }\n\n #touch-timeline .tl-left {\n padding: 40px;\n border-right: 1px solid #1e1e2e;\n }\n\n #touch-timeline .tl-right { padding: 40px; }\n\n #touch-timeline .tl-era-tag {\n display: inline-block;\n padding: 4px 12px;\n border-radius: 2px;\n font-size: 11px;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-family: monospace;\n margin-bottom: 16px;\n }\n\n #touch-timeline .tl-card-title {\n font-size: clamp(20px, 2.5vw, 28px);\n font-weight: normal;\n color: #e8e4d9;\n line-height: 1.2;\n margin-bottom: 6px;\n }\n\n #touch-timeline .tl-card-year {\n font-size: 13px;\n font-family: monospace;\n margin-bottom: 28px;\n opacity: 0.8;\n }\n\n #touch-timeline .tl-section-label {\n font-size: 10px;\n color: #4a4a6a;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-family: monospace;\n margin-bottom: 8px;\n }\n\n #touch-timeline .tl-layer-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 14px;\n background: #0e0e18;\n border-radius: 2px;\n margin-bottom: 28px;\n }\n\n #touch-timeline .tl-layer-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n #touch-timeline .tl-layer-text {\n font-size: 12px;\n font-family: monospace;\n color: #a0a0c0;\n }\n\n #touch-timeline .tl-who {\n color: #b0afc0;\n line-height: 1.6;\n font-size: 15px;\n font-style: italic;\n margin-bottom: 24px;\n }\n\n #touch-timeline .tl-what {\n color: #c8c7d8;\n line-height: 1.8;\n font-size: 15px;\n }\n\n \/* Right side *\/\n #touch-timeline .tl-constraint-box {\n background: #0e0e18;\n border: 1px solid rgba(232,71,71,0.2);\n border-left: 3px solid #e84747;\n padding: 20px;\n margin-bottom: 24px;\n border-radius: 0 2px 2px 0;\n }\n\n #touch-timeline .tl-constraint-label {\n font-size: 10px;\n color: #e84747;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-family: monospace;\n margin-bottom: 10px;\n }\n\n #touch-timeline .tl-constraint-text {\n color: #c0b8b8;\n line-height: 1.8;\n font-size: 14px;\n }\n\n #touch-timeline .tl-detail-box {\n padding: 20px;\n border-radius: 2px;\n }\n\n #touch-timeline .tl-detail-label {\n font-size: 10px;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-family: monospace;\n margin-bottom: 10px;\n }\n\n #touch-timeline .tl-detail-text {\n color: #b0b0c8;\n line-height: 1.9;\n font-size: 14px;\n }\n\n \/* Nav *\/\n #touch-timeline .tl-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 32px;\n border-top: 1px solid #1e1e2e;\n padding-top: 20px;\n }\n\n #touch-timeline .tl-btn {\n background: none;\n border: 1px solid #3e3e5e;\n color: #8080a0;\n padding: 8px 18px;\n cursor: pointer;\n font-family: monospace;\n font-size: 12px;\n letter-spacing: 2px;\n transition: all 0.2s;\n }\n\n #touch-timeline .tl-btn:disabled {\n border-color: #1e1e2e;\n color: #2e2e4e;\n cursor: not-allowed;\n }\n\n #touch-timeline .tl-btn.next-btn:not(:disabled) {\n background: var(--accent-bg);\n border-color: var(--accent-border);\n color: var(--accent-color);\n }\n\n #touch-timeline .tl-counter {\n color: #3a3a5a;\n font-family: monospace;\n font-size: 11px;\n }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"touch-timeline\">\n <div class=\"tl-header\">\n <div class=\"tl-eyebrow\">A Technical History<\/div>\n <h2 class=\"tl-title\">From Finger to Click<\/h2>\n <p class=\"tl-subtitle\">How the web learned to feel a human touch · 1965 – Present<\/p>\n <\/div>\n <div class=\"tl-strip\" id=\"tlStrip\"><\/div>\n <div class=\"tl-body\">\n <div class=\"tl-left\" id=\"tlLeft\"><\/div>\n <div class=\"tl-right\" id=\"tlRight\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n(function() {\n const data = [\n {\n year: \"1965\", era: \"The Spark\", color: \"#e8c547\", icon: \"\u26a1\",\n title: \"The Idea Is Born\",\n who: \"Eric Arthur Johnson \u2014 Royal Radar Establishment, England\",\n what: \"Johnson writes the first paper describing a capacitive touchscreen to aid air traffic control. His patent is granted in 1969.\",\n constraint: \"Pure research. No consumer devices. Resistive touch would dominate for decades because it was cheaper.\",\n layer: \"Hardware\",\n detail: \"Johnson's capacitive idea detected the electrical disturbance a finger makes on a conductive surface. The concept sat dormant for 40+ years before smartphones made it viable at scale.\"\n },\n {\n year: \"1982\", era: \"Early Experiments\", color: \"#e87447\", icon: \"\ud83d\udd90\",\n title: \"First Multi-Touch Screen\",\n who: \"Nimish Mehta \u2014 University of Toronto + Bell Labs' Bob Boie\",\n what: \"Mehta creates the first human-controlled multi-touch device. Boie at Bell Labs creates the first transparent multi-touch interface \u2014 a foundational leap.\",\n constraint: \"Extremely expensive. No software existed to take advantage of it. Operating systems only understood mouse coordinates \u2014 a single X,Y point.\",\n layer: \"Hardware + OS\",\n detail: \"These were lab experiments. The hardware existed but the software world had no concept of 'touch events'. There was no OS infrastructure to interpret multiple simultaneous touch points.\"\n },\n {\n year: \"2000\u20132006\", era: \"Before the Storm\", color: \"#47a3e8\", icon: \"\ud83d\udcf1\",\n title: \"Resistive Touch & Stylus Era\",\n who: \"Palm, Windows Mobile, Nokia, Blackberry\",\n what: \"PDAs and early smartphones used resistive touchscreens requiring a stylus. The web mostly didn't load on these devices anyway.\",\n constraint: \"Resistive screens needed pressure \u2014 fingers barely worked. Web browsers were stripped-down with no touch event model whatsoever.\",\n layer: \"OS + Browser\",\n detail: \"Windows Mobile had a stylus-first model. Tapping with a stylus was treated like a mouse click because the precision was similar. There was no need for a new event model \u2014 it was essentially still a pointing device.\"\n },\n {\n year: \"Jan 2007\", era: \"The Earthquake\", color: \"#e84747\", icon: \"\ud83c\udf4e\",\n title: \"Apple Ships the iPhone\",\n who: \"Apple \u2014 Scott Forstall's iOS team + WebKit team\",\n what: \"iPhone launches with a capacitive multi-touch screen AND a real web browser. No stylus. Fingers only. The entire web was built for mouse events.\",\n constraint: \"Every dropdown, every button, every link \u2014 designed for pixel-precise cursor clicks. Apple had to bridge this gap on day one.\",\n layer: \"OS + Browser + Hardware\",\n detail: \"Apple's solution: fire a synthetic 'click' event after a tap \u2014 with a 300ms delay. The OS would wait to see if a second tap was coming (double-tap to zoom). If not: click. Every existing website 'worked' on day one, even though none were designed for touch.\"\n },\n {\n year: \"2007\u20132008\", era: \"The Scramble\", color: \"#9b47e8\", icon: \"\ud83d\udd27\",\n title: \"Browsers Didn't Know Touch Existed\",\n who: \"Mozilla (Firefox), Opera Mobile \u2014 scrambling to catch up\",\n what: \"iPhone's Safari shipped with a proprietary touch event API: touchstart, touchmove, touchend. No other browser had anything like this. No standard existed.\",\n constraint: \"Apple invented their own API. Android (2008) copied it. Firefox and Opera had to reverse-engineer it from scratch \u2014 there was no W3C spec yet.\",\n layer: \"Browser\",\n detail: \"This was NOT a coordinated industry effort. Apple shipped their model and the rest of the browser world had to copy it. Researcher Peter-Paul Koch wrote an advisory paper in 2010 saying browsers MUST copy Apple's touch model. It was descriptive, not prescriptive \u2014 the industry was just making it up.\"\n },\n {\n year: \"2008\", era: \"Android Enters\", color: \"#47e87a\", icon: \"\ud83e\udd16\",\n title: \"Android Ships, Copies Apple's Model\",\n who: \"Google \/ Android team\",\n what: \"Android's browser deliberately implements Apple's touch event model: touchstart, touchmove, touchend. The 300ms delay is also copied.\",\n constraint: \"The 300ms delay was now on two major platforms. Every tap on the mobile web felt sluggish because the browser was always waiting to see if another tap was coming.\",\n layer: \"OS + Browser\",\n detail: \"Google's choice to copy Apple's API meant the same JavaScript code worked on both platforms. But it also meant the 300ms delay became industry standard, baked into hundreds of millions of devices.\"\n },\n {\n year: \"2011\", era: \"Standards Wake Up\", color: \"#e8a347\", icon: \"\ud83d\udccb\",\n title: \"W3C Publishes Touch Events Spec\",\n who: \"W3C (World Wide Web Consortium)\",\n what: \"The W3C formalizes 'Touch Events Level 1' \u2014 essentially rubber-stamping what Apple and Android already shipped. Four years after the iPhone.\",\n constraint: \"Patent issues with Apple temporarily stalled progress. Microsoft refused to implement Touch Events, building their own 'Pointer Events' model instead.\",\n layer: \"Standards Body\",\n detail: \"The spec was written AFTER the implementations already existed. This is backwards from how standards normally work \u2014 usually you standardize first, then ship. Touch events were the wild west: ship first, standardize later.\"\n },\n {\n year: \"2012\u20132013\", era: \"Microsoft's Rebellion\", color: \"#47d4e8\", icon: \"\ud83e\ude9f\",\n title: \"IE10 Invents Pointer Events\",\n who: \"Microsoft \u2014 for Windows 8 \/ Surface devices\",\n what: \"Microsoft invents 'Pointer Events' \u2014 a unified model where mouse, touch, and stylus are all just 'pointers'. IE10 ships with this. A better idea, ignored for years.\",\n constraint: \"Now developers had THREE things to support: mouse events, touch events, and pointer events. The fragmentation was maddening.\",\n layer: \"Browser + Standards\",\n detail: \"Microsoft's idea was actually superior \u2014 one event model to rule them all. But Apple refused to implement Pointer Events. Chrome initially pledged support, then backed out in 2015, citing performance concerns. The better solution lost the standards war for nearly a decade.\"\n },\n {\n year: \"2013\u20132015\", era: \"Killing the Delay\", color: \"#e84796\", icon: \"\u26a1\",\n title: \"The 300ms Delay Gets Killed\",\n who: \"Google Chrome team + FT Labs (FastClick.js)\",\n what: \"Google introduces 'touch-action: manipulation' CSS property \u2014 declare this and the browser fires the click instantly. Before the official fix, developers used FastClick.js, a JS hack built by the Financial Times.\",\n constraint: \"Sites relying on double-tap zoom would break if the delay was removed globally. It had to be opt-in. The web was full of sites that never updated.\",\n layer: \"Browser + CSS\",\n detail: \"FastClick.js listened for touchend events and manually fired a fake click immediately \u2014 bypassing the 300ms wait. This hack was used on millions of production websites for years. A library whose entire purpose was to make a button feel responsive.\"\n },\n {\n year: \"2019\", era: \"The Unification\", color: \"#47e8c5\", icon: \"\ud83c\udfaf\",\n title: \"Safari Finally Adopts Pointer Events\",\n who: \"Apple \u2014 Safari 13\",\n what: \"Apple, the last holdout, ships Pointer Events in Safari 13. For the first time, ALL major browsers support one unified input model.\",\n constraint: \"It took 12 years from iPhone launch to get here. Touch Events are now a 'legacy API' \u2014 still supported, but developers are encouraged to use Pointer Events.\",\n layer: \"Browser + Standards\",\n detail: \"Apple's late adoption was partly stubbornness, partly valid technical concerns about the original spec's performance. Once those were resolved, they came on board. Safari 13 was the moment the industry finally had one standard for all input types.\"\n },\n {\n year: \"Today\", era: \"The Present\", color: \"#a3e847\", icon: \"\u2705\",\n title: \"One Event Model To Rule Them All\",\n who: \"All browsers \u2014 Chrome, Safari, Firefox, Edge\",\n what: \"Pointer Events is the modern standard. Your tap, mouse click, stylus stroke, and trackpad tap all fire the same 'pointerdown' event. The browser handles the translation automatically.\",\n constraint: \"Touch Events still exist and still work \u2014 billions of lines of old code depend on them. They will never be fully removed.\",\n layer: \"Fully Unified\",\n detail: \"The journey from 'a tap fires a synthetic mouse click with a 300ms delay' to 'a unified pointer event model across all devices' took 12 years, involved Apple, Google, Microsoft, Mozilla, the W3C, and countless individual engineers shouting into the void.\"\n }\n ];\n\n let current = 3;\n\n function hexToRgba(hex, alpha) {\n const r = parseInt(hex.slice(1,3),16);\n const g = parseInt(hex.slice(3,5),16);\n const b = parseInt(hex.slice(5,7),16);\n return `rgba(${r},${g},${b},${alpha})`;\n }\n\n function renderStrip() {\n const strip = document.getElementById('tlStrip');\n strip.innerHTML = '';\n data.forEach((item, i) => {\n const node = document.createElement('div');\n node.className = 'tl-node' + (i === current ? ' active' : '');\n node.style.setProperty('--node-color', item.color);\n node.onclick = () => { current = i; render(); };\n\n \/\/ connector line\n const line = document.createElement('div');\n line.className = 'tl-line';\n line.style.left = i === 0 ? '50%' : '0';\n line.style.right = i === data.length - 1 ? '50%' : '0';\n line.style.background = i === current ? item.color : '#1e1e2e';\n\n const dot = document.createElement('div');\n dot.className = 'tl-dot';\n if (i === current) {\n dot.style.background = item.color;\n dot.style.borderColor = item.color;\n dot.style.boxShadow = `0 0 12px ${hexToRgba(item.color, 0.5)}`;\n }\n\n const icon = document.createElement('div');\n icon.className = 'tl-node-icon';\n icon.textContent = item.icon;\n\n const year = document.createElement('div');\n year.className = 'tl-node-year';\n year.textContent = item.year;\n\n node.appendChild(line);\n node.appendChild(dot);\n node.appendChild(icon);\n node.appendChild(year);\n strip.appendChild(node);\n });\n }\n\n function renderLeft() {\n const item = data[current];\n const left = document.getElementById('tlLeft');\n left.innerHTML = `\n <div class=\"tl-era-tag\" style=\"background:${hexToRgba(item.color,0.13)};border:1px solid ${hexToRgba(item.color,0.27)};color:${item.color}\">${item.era}<\/div>\n <h3 class=\"tl-card-title\">${item.icon} ${item.title}<\/h3>\n <div class=\"tl-card-year\" style=\"color:${item.color}\">${item.year}<\/div>\n <div class=\"tl-section-label\">Where this happened<\/div>\n <div class=\"tl-layer-badge\" style=\"border:1px solid ${hexToRgba(item.color,0.2)}\">\n <div class=\"tl-layer-dot\" style=\"background:${item.color}\"><\/div>\n <span class=\"tl-layer-text\">${item.layer}<\/span>\n <\/div>\n <div class=\"tl-section-label\">Key Players<\/div>\n <p class=\"tl-who\">${item.who}<\/p>\n <div class=\"tl-section-label\">What Happened<\/div>\n <p class=\"tl-what\">${item.what}<\/p>\n `;\n }\n\n function renderRight() {\n const item = data[current];\n const right = document.getElementById('tlRight');\n right.innerHTML = `\n <div class=\"tl-constraint-box\">\n <div class=\"tl-constraint-label\">\u26a0 The Constraint<\/div>\n <p class=\"tl-constraint-text\">${item.constraint}<\/p>\n <\/div>\n <div class=\"tl-detail-box\" style=\"background:${hexToRgba(item.color,0.04)};border:1px solid ${hexToRgba(item.color,0.13)}\">\n <div class=\"tl-detail-label\" style=\"color:${item.color}\">\ud83d\udd0d The Full Story<\/div>\n <p class=\"tl-detail-text\">${item.detail}<\/p>\n <\/div>\n <div class=\"tl-nav\">\n <button class=\"tl-btn prev-btn\" ${current === 0 ? 'disabled' : ''} onclick=\"tlPrev()\">\u2190 PREV<\/button>\n <span class=\"tl-counter\">${current + 1} \/ ${data.length}<\/span>\n <button class=\"tl-btn next-btn\" ${current === data.length - 1 ? 'disabled' : ''}\n style=\"--accent-bg:${hexToRgba(item.color,0.13)};--accent-border:${hexToRgba(item.color,0.27)};--accent-color:${item.color}\"\n onclick=\"tlNext()\">NEXT \u2192<\/button>\n <\/div>\n `;\n }\n\n function render() {\n renderStrip();\n renderLeft();\n renderRight();\n }\n\n window.tlPrev = function() { if (current > 0) { current--; render(); } };\n window.tlNext = function() { if (current < data.length - 1) { current++; render(); } };\n\n render();\n})();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Constraint: A Finger Is Not a Cursor<\/strong><\/h2>\n\n\n\n<p>A mouse cursor is, effectively, a point. One pixel. When you click, the operating system knows exactly \u2014 to the pixel \u2014 where you meant to click.<\/p>\n\n\n\n<p>A human fingertip, pressed against glass, covers roughly 44 by 44 pixels. It's warm and soft and slightly irregular. And crucially: it has no hover state. A cursor can sit above a button without clicking it, giving the button a chance to highlight and signal its presence. A finger is either touching or it isn't. There is no in-between.<\/p>\n\n\n\n<p>This created a cascade of problems that were easy to dismiss in a keynote but brutal in practice:<\/p>\n\n\n\n<p>Precision. That tiny 10-pixel link in a paragraph of text? Basically untappable. Users would tap, miss, tap again. Frustrating.<\/p>\n\n\n\n<p>Hover states. An entire category of web interaction \u2014 menus that appeared on hover, tooltips, preview cards \u2014 simply could not exist. There was nothing to hover with.<\/p>\n\n\n\n<p>Ambiguity. When a finger touches the screen, is the user trying to tap a button, or beginning to scroll? A mouse cursor never scrolls by being clicked. A finger does both. The operating system had to guess.<\/p>\n\n\n\n<p>That last problem \u2014 the tap versus scroll ambiguity \u2014 is what led to one of the most famous hacks in the history of the web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The 300 Milliseconds That Haunted a Generation of Developers<\/strong><\/h2>\n\n\n\n<p>Apple's engineers faced an immediate problem when building Mobile Safari for the original iPhone. The web expected click events. Fingers produced touches. How do you translate one into the other?<\/p>\n\n\n\n<p>Their solution was pragmatic: when a finger lifts from the screen, wait. Wait 300 milliseconds. If a second tap comes within that window, the user is double-tapping \u2014 probably to zoom in on text. If no second tap comes, <em>then<\/em> fire the click event.<\/p>\n\n\n\n<p>It worked. Every existing website technically functioned on the iPhone. Buttons were clickable. Links were tappable. The web, slightly jankily, ran on a touchscreen.<\/p>\n\n\n\n<p><em>But 300 milliseconds is a long time when you're tapping a button. Long enough to notice. Long enough to make an interface feel sluggish and unresponsive. Long enough to make users tap again because they thought the first tap didn't register \u2014 accidentally double-tapping and zooming into the page.<\/em><\/p>\n\n\n\n<p>This delay shipped in 2007. It was copied by Android in 2008. It became the default behaviour of every mobile browser on earth. And it quietly tortured developers and users for the better part of a decade.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Scramble: Nobody Was Ready<\/strong><\/h2>\n\n\n\n<p>Here is something the history books tend to gloss over: the response to the iPhone was not coordinated.<\/p>\n\n\n\n<p>There was no summit of browser vendors. No emergency W3C working group convened the week after the keynote. Apple had invented their own touch event system \u2014 <em>touchstart, touchmove, touchend<\/em> \u2014 and shipped it as a proprietary API with no public specification. Android copied Apple's model when they launched in 2008, essentially because it was the only model that existed.<\/p>\n\n\n\n<p>Mozilla, Opera, and Microsoft were left looking at Apple's implementation and reverse-engineering it from the outside.<\/p>\n\n\n\n<p>Peter-Paul Koch, a web developer who did foundational research into mobile browser behaviour at the time, published an advisory paper in 2010 that reads almost comically in retrospect. He wrote, in effect: <em>other browsers must copy Apple's touch event model \u2014 there is no reason not to, it is already the market standard<\/em>. A web researcher, not a standards body, was the one telling the industry what to do.<\/p>\n\n\n\n<p>The W3C \u2014 the organisation nominally responsible for defining how the web works \u2014 published a formal Touch Events specification in 2011. That is four years after the iPhone shipped. Four years during which the industry had been improvising.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Microsoft's Rebellion, and a Better Idea<\/strong><\/h2>\n\n\n\n<p>While everyone was scrambling to copy Apple, Microsoft went its own way.<\/p>\n\n\n\n<p>In 2012, building their Surface tablet and Windows 8 touch interface, Microsoft's browser team looked at the chaos \u2014 touch events for iOS\/Android, nothing for desktop \u2014 and decided to solve the root problem. They introduced Pointer Events: a single unified model where a mouse click, a finger tap, and a stylus stroke all produced the same type of event, just with a property saying which input device had caused it.<\/p>\n\n\n\n<p>One event handler. All devices. Clean, elegant, forward-thinking.<\/p>\n\n\n\n<p>The web standards community loved it. Chrome and Firefox pledged support. The W3C began standardising it. It looked like the fragmentation was about to end.<\/p>\n\n\n\n<p><em>Then Apple refused to implement it. Safari, the browser that started all of this, declined to support the very standard that would have unified everything.<\/em><\/p>\n\n\n\n<p>Apple had patent concerns around the touch event specification. Chrome, watching Apple's refusal and worrying about the performance implications of Pointer Events, backed out of their commitment in 2015. Suddenly developers had three parallel systems to support: mouse events for desktop, touch events for iOS and Android, and pointer events for Windows and some versions of Chrome.<\/p>\n\n\n\n<p>The next four years were, charitably, a mess.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Killing the Delay<\/strong><\/h2>\n\n\n\n<p>While the standards war dragged on, developers found their own ways to fight back.<\/p>\n\n\n\n<p>The Financial Times built a JavaScript library called FastClick.js. Its entire purpose was this: listen for the <em>touchend<\/em> event \u2014 the moment the finger lifts \u2014 and immediately fire a fake click, bypassing the browser's 300-millisecond wait entirely. It was a hack, built on top of a hack, to fix a problem that shouldn't have existed.<\/p>\n\n\n\n<p>FastClick was downloaded millions of times. It ran on production websites across the internet. A library whose entire purpose was to make a button feel responsive when tapped.<\/p>\n\n\n\n<p>The official fix came in stages. Google introduced a CSS property called <em>touch-action: manipulation<\/em> that let developers tell the browser: this element doesn't use double-tap zoom, so you can fire the click immediately. Chrome later made instant-click the default for pages that declared a proper mobile viewport. The 300-millisecond delay, built into hundreds of millions of devices in 2007, was finally, quietly deprecated over the course of 2015 and 2016.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What About Scrolling?<\/strong><\/h2>\n\n\n\n<p>If the tap-to-click story is remarkable, the scroll story is something else entirely.<\/p>\n\n\n\n<p>On a desktop, scrolling comes from a mouse wheel \u2014 a mechanical device that sends discrete <em>delta<\/em> signals to the operating system. Move the wheel three clicks downward, and the OS receives three signals saying 'scroll down three units.' The page moves. A <em>scroll event<\/em> fires.<\/p>\n\n\n\n<p>On a phone, scrolling is a physical drag. Your finger touches the screen, moves downward, and lifts. The operating system tracks the velocity of that movement and continues the scroll after your finger lifts, simulating momentum \u2014 a kind of physics engine running in your pocket, calculating friction and deceleration to make the page feel like it has real weight.<\/p>\n\n\n\n<p>Two completely different physical actions. One mechanical, one biological. One discrete, one continuous. One that stops the moment you stop moving, one that glides on after you've let go.<\/p>\n\n\n\n<p><em>And yet: both of them fire the exact same scroll event. The browser doesn't care how the scroll happened. It just updates the page position and tells JavaScript: here is the new Y coordinate.<\/em><\/p>\n\n\n\n<p>This is why when an analytics platform like Google Analytics or Mixpanel measures scroll depth \u2014 tracking what percentage of a page a user read \u2014 it works identically on desktop and mobile. It is listening for <em>window.scroll<\/em> events and checking <em>window.scrollY<\/em>. The source of the scroll is invisible. A mouse wheel and a flicked finger produce the same signal.<\/p>\n\n\n\n<p>There is something philosophically strange here that is worth sitting with. When you flick your finger upward on a phone and lift it, the page keeps moving. The operating system's physics simulation takes over. JavaScript scroll events keep firing. Your analytics platform keeps counting. It is, technically, recording the behaviour of a physics engine as evidence of human reading intent.<\/p>\n\n\n\n<p>Nobody decided this was how it should work. It emerged from a series of engineering decisions made under constraint, and it turned out to be good enough \u2014 good enough that nobody has challenged it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Resolution<\/strong><\/h2>\n\n\n\n<p>In 2019, twelve years after the iPhone was announced, Apple shipped Safari 13. Quietly, without fanfare, it included support for Pointer Events \u2014 the unified input model that Microsoft had proposed seven years earlier, that Chrome and Firefox had long since implemented, that Apple had spent the better part of a decade resisting.<\/p>\n\n\n\n<p>For the first time in the history of the touchscreen web, all major browsers spoke the same language. One event model. Mouse, finger, stylus, trackpad \u2014 all producing a pointerdown event. All handled by the same code.<\/p>\n\n\n\n<p>The W3C has since declared the old Touch Events API a legacy specification. It still works, and will work for years, because billions of lines of code depend on it. But new code is encouraged to use Pointer Events instead.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What It All Means<\/strong><\/h2>\n\n\n\n<p>The story of touch on the web is not a story of brilliant foresight. Nobody planned this. Apple shipped a phone, invented an API, and left the rest of the industry to catch up. A standards body wrote a spec four years late. A browser vendor had a good idea and was ignored for seven years. Developers built elaborate hacks to work around a 300-millisecond delay.<\/p>\n\n\n\n<p>And somehow, through all of it, the web worked. A person on a train in Mumbai and a person at a desk in London tap and click on the same buttons, scroll through the same pages, and the same analytics event fires for both of them. They are counted as the same kind of user, making the same kind of gesture.<\/p>\n\n\n\n<p><em>The web is not an elegant system. It is an accretion of solutions to problems that weren't anticipated, built by people who were making it up as they went, constrained by decisions made years before them by people they had never met.<\/em><\/p>\n\n\n\n<p>That it works at all is the marvel. That it works as seamlessly as it does is something close to a miracle.<\/p>\n\n\n\n<p>The next time you tap a button on your phone, there is a small chain of events worth appreciating. A capacitive sensor detects the disturbance your finger makes in an electrical field. Your operating system translates that into coordinates. A browser \u2014 Safari, Chrome, whatever you use \u2014 translates those coordinates into a pointer event. That event finds the button it belongs to. The button responds.<\/p>\n\n\n\n<p>Between your finger and that response: forty years of research, a decade of browser wars, millions of lines of code, and at least one famously annoying 300-millisecond wait.<\/p>\n\n\n\n<p><em>All so tapping a button on a piece of glass feels as natural as breathing.<\/em><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Picture this. It is January 9, 2007. Steve Jobs walks onto a stage in San Francisco and holds up a phone with no keyboard. He swipes the screen with his finger. The audience gasps. And somewhere, in offices around the world, a very specific group of people \u2014 browser engineers, web developers, OS architects \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[11],"tags":[],"class_list":["post-1004","post","type-post","status-publish","format-standard","hentry","category-random"],"_links":{"self":[{"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/posts\/1004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/comments?post=1004"}],"version-history":[{"count":3,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/posts\/1004\/revisions"}],"predecessor-version":[{"id":1008,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/posts\/1004\/revisions\/1008"}],"wp:attachment":[{"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/media?parent=1004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/categories?post=1004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sid.assawa.com\/spa\/wp-json\/wp\/v2\/tags?post=1004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}