{"id":57,"date":"2026-01-27T07:10:20","date_gmt":"2026-01-27T00:10:20","guid":{"rendered":"https:\/\/bee-soft.net\/web-apis-that-replace-entire-libraries\/"},"modified":"2026-02-26T15:25:45","modified_gmt":"2026-02-26T08:25:45","slug":"web-apis-that-replace-entire-libraries","status":"publish","type":"post","link":"https:\/\/bee-soft.net\/en\/web-apis-that-replace-entire-libraries\/","title":{"rendered":"Web APIs That Replace Entire Libraries"},"content":{"rendered":"<p>Anh Browsers have become incredibly powerful. Features that used to require heavy JavaScript libraries are now built right into the browser. And honestly, it\u2019s about time. Let me walk you through the Web APIs that are replacing entire libraries and making your bundle sizes way smaller.<\/p>\n<article class=\"meteredContent\">\n<div class=\"y\">\n<div class=\"y\">\n<section>\n<div>\n<div class=\"mj to tp kg tq\">\n<div class=\"o q\">\n<div class=\"dw n dx dy dz ea\">\n<h2 id=\"34fd\" class=\"zn zo uf as zp oo zq op ow ox zr oy pf pg zs ph po pp zt pq px py zu pz qg zv cn\" data-selectable-paragraph=\"\">1. View Transitions API<\/h2>\n<p id=\"d3d2\" class=\"pw-post-body-paragraph yl ym uf yn b yo zw yq yr ys zx yu yv yw zy yy yz za zz zc zd ze aba zg zh zi mj cn\" data-selectable-paragraph=\"\">Back then, you needed to install Framer Motion, GSAP, or some other animation library for smooth page transitions. Now the View Transitions API handles all of this natively, and it\u2019s actually pretty amazing.<\/p>\n<p id=\"2d51\" class=\"pw-post-body-paragraph yl ym uf yn b yo yp yq yr ys yt yu yv yw yx yy yz za zb zc zd ze zf zg zh zi mj cn\" data-selectable-paragraph=\"\">For example, you want smooth transitions between pages in your app. Before, you\u2019d install a library, manage state, and handle animations manually. Now?<\/p>\n<pre class=\"abj abk abl abm abn abo abp abq th abr ch cn\"><span id=\"f9bf\" class=\"abs zo uf abp b ck abt abu y abv abw\" data-selectable-paragraph=\"\"><span class=\"hljs-comment\">\/\/ Single-page app transitions<\/span>\r\n<span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title.function\">navigateToNewView<\/span>() {\r\nif (!<span class=\"hljs-variable.language\">document<\/span>.<span class=\"hljs-property\">startViewTransition<\/span>) {\r\n    <span class=\"hljs-comment\">\/\/ Fallback for older browsers<\/span>\r\n<span class=\"hljs-title.function\">updateDOM<\/span>();\r\n    <span class=\"hljs-keyword\">return<\/span>;\r\n}\r\n\r\n<span class=\"hljs-variable.language\">document<\/span>.<span class=\"hljs-title.function\">startViewTransition<\/span>(<span class=\"hljs-function\">() =&gt;<\/span>  {\r\n    <span class=\"hljs-title.function\">updateDOM<\/span>();\r\n });\r\n}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/article>\n<div class=\"o q\">\n<div class=\"dw n dx dy dz ea\"><\/div>\n<\/div>\n<pre><code>\r\nfunction tecnologia_highlight_search_terms( $text ) {\r\n    if ( is_search() &amp;&amp; in_the_loop() &amp;&amp; is_main_query() ) {\r\n        $query = get_search_query();\r\n        if ( $query ) {\r\n            $text = preg_replace(\r\n                '\/(' . preg_quote($query, '\/') . ')\/iu',\r\n                '<mark class=\"search-highlight\">$1<\/mark>',\r\n                $text\r\n            );\r\n        }\r\n    }\r\n    return $text;\r\n}\r\n<\/code><\/pre>\n<pre>\r\n    <code>\r\ndocument.querySelectorAll('.view-more').forEach(btn =&gt; {\r\n        btn.addEventListener('click', function (e) {\r\n            e.preventDefault();\r\n\r\n            const targetId = this.dataset.target;\r\n            const detail = document.getElementById(targetId);\r\n            const isOpen = detail.classList.contains('is-open');\r\n\r\n            \/\/ \u0111\u00f3ng t\u1ea5t c\u1ea3\r\n            document.querySelectorAll('.vendor-detail').forEach(el =&gt; {\r\n                el.classList.remove('is-open');\r\n            });\r\n\r\n            \/\/ toggle card hi\u1ec7n t\u1ea1i\r\n            if (!isOpen) {\r\n                detail.classList.add('is-open');\r\n            }\r\n        });\r\n    });\r\n    <\/code>\r\n    \r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Anh Browsers have become incredibly powerful. Features that used to require heavy JavaScript libraries are now built right into the browser. And honestly, it\u2019s about time. Let me walk you through the Web APIs that are replacing entire libraries and making your bundle sizes way smaller. 1. View Transitions API Back then, you needed to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-57","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/posts\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":1,"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/posts\/57\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bee-soft.net\/en\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}