Top 5 JavaScript Frameworks for Web Development in 2025/title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Source+Code+Pro:wght@400;600&display=swap" rel="stylesheet">
<!-- Theme CSS -->
<style>
/* General Styles */
body {
font-family: 'Roboto', sans-serif;
line-height: 1.8;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
color: #2c3e50;
}
h1 {
font-size: 2.5rem;
margin-top: 0;
}
h2 {
font-size: 2rem;
margin-top: 2rem;
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
p {
font-size: 1.1rem;
color: #555;
}
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Code Blocks */
pre {
background: #2c3e50;
color: #ecf0f1;
padding: 1.5rem;
border-radius: 8px;
overflow-x: auto;
position: relative;
font-family: 'Source Code Pro', monospace;
font-size: 1rem;
line-height: 1.6;
margin: 1.5rem 0;
cursor: pointer;
}
pre:hover {
background: #34495e; /* Slightly lighter background on hover */
}
code {
background: #2c3e50;
color: #ecf0f1;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-family: 'Source Code Pro', monospace;
}
.copy-message {
color: #27ae60;
font-weight: bold;
display: none;
margin-top: 0.5rem;
}
/* Highlighted Text */
.highlight {
background-color: #e8f4f8;
padding: 0.5rem;
border-radius: 4px;
display: inline-block;
color: #2c3e50;
}
/* Container */
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
/* Responsive Design */
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
.container {
padding: 1rem;
}
}
</style>
<script>
function copyCode(elementId) {
const codeElement = document.getElementById(elementId);
const textArea = document.createElement('textarea');
textArea.value = codeElement.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// Show copy message
const copyMessage = document.getElementById('copy-message-' + elementId);
copyMessage.style.display = 'block';
setTimeout(() => {
copyMessage.style.display = 'none';
}, 2000);
}
// Add click event listeners to all code blocks
document.addEventListener('DOMContentLoaded', function () {
const codeBlocks = document.querySelectorAll('pre');
codeBlocks.forEach((block) => {
block.addEventListener('click', function () {
const code = this.textContent;
const textArea = document.createElement('textarea');
textArea.value = code;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// Show copy message
const copyMessage = this.nextElementSibling;
if (copyMessage && copyMessage.classList.contains('copy-message')) {
copyMessage.style.display = 'block';
setTimeout(() => {
copyMessage.style.display = 'none';
}, 2000);
}
});
});
});
</script>
</head>
<body>
<div class="container">
<h1>Top 5 JavaScript Frameworks for Web Development in 2023</h1>
<p>JavaScript frameworks are essential tools for modern web development. They help developers build dynamic, responsive, and scalable web applications. In this post, we'll explore the top 5 JavaScript frameworks for 2023, along with code examples and tips to get started.</p>
<h2>1. React</h2>
<p><strong>React</strong> is a popular JavaScript library for building user interfaces. Developed by Facebook, React is known for its component-based architecture and virtual DOM.</p>
<pre id="code1">
// Example: Simple React Component
import React from 'react';
function App() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
export default App;
</pre>
<p class="copy-message" id="copy-message-code1">Code copied to clipboard!</p>
<h2>2. Angular</h2>
<p><strong>Angular</strong> is a powerful framework developed by Google. It's ideal for building large-scale applications with features like two-way data binding and dependency injection.</p>
<pre id="code2">
// Example: Angular Component
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, World!</h1>
`
})
export class AppComponent {}
</pre>
<p class="copy-message" id="copy-message-code2">Code copied to clipboard!</p>
<h2>3. Vue.js</h2>
<p><strong>Vue.js</strong> is a progressive framework that's easy to integrate into projects. It's known for its simplicity and flexibility.</p>
<pre id="code3">
// Example: Vue.js Component
<template>
<div>
<h1>Hello, World!</h1>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
</pre>
<p class="copy-message" id="copy-message-code3">Code copied to clipboard!</p>
<h2>4. Svelte</h2>
<p><strong>Svelte</strong> is a modern framework that shifts the work from the browser to the build step, resulting in highly efficient applications.</p>
<pre id="code4">
// Example: Svelte Component
<script>
let name = 'World';
</script>
<h1>Hello, {name}!</h1>
</pre>
<p class="copy-message" id="copy-message-code4">Code copied to clipboard!</p>
<h2>5. Next.js</h2>
<p><strong>Next.js</strong> is a React-based framework that enables server-side rendering and static site generation, making it perfect for SEO-friendly applications.</p>
<pre id="code5">
// Example: Next.js Page
export default function Home() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
</pre>
<p class="copy-message" id="copy-message-code5">Code copied to clipboard!</p>
<h2>Conclusion</h2>
<p>Choosing the right JavaScript framework depends on your project requirements and personal preferences. React, Angular, Vue.js, Svelte, and Next.js are all excellent choices for building modern web applications. Experiment with these frameworks to find the one that best suits your needs!</p>
</div>
</body>
</html>
</div>
<div id='ads-bottom-target'></div>
</div>
<blockquote class='post-copyright'>
<div class='content'>
<p id='breadcrumb' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>
<span>
<span>
<a href='https://snakifytech.blogspot.com/' title='Home'>
<span>Home</span>
</a> »
<span>
<span class='breadlabel' itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
<a href='https://snakifytech.blogspot.com/search/label/Frontend%20Development' itemprop='item' title='Frontend Development'>
<span itemprop='name'>Frontend Development</span>
</a> »
<meta content='1' itemprop='position'/>
</span>
<span aria-current='page' class='breadcrumb_last'>
Top 5 JavaScript Frameworks for Web Development in 2025
</span>
</span>
</span>
</span>
</p>
</div>
<footer>
<a href='javascript:;'>
<img alt='Sufyan Ahmad' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg7gXvJzMbQrHL8HY-_Ie6FQb_tQCbIUMfxZ11EsZELFU-sOpozUHu9aRnGthNIS9t_zxMwXeb6z_apiMzHaP2SJovESmzttyL_G66qH0LnnYNdc0c3YX_TQcMYQOAP5No0yaGDx658IUgSp8qx379y042NTvLXVAuVeKwEbMOxW7zzA/w400/5073511e-7292-4053-ab61-472cf63ac941.jpeg' title='Sufyan Ahmad'/>
Sufyan Ahmad
</a>
</footer>
</blockquote>
<div class='post-footer'>
<meta content='Top 5 JavaScript Frameworks for Web Development in 2025' itemprop='keywords'/>
<span itemprop='keywords'>
<ul class='article-tag-list'>
<li class='article-tag-list-item'>
<a class='article-tag-list-link' href='https://snakifytech.blogspot.com/search/label/Frontend%20Development' rel='category tag' title='Frontend Development'>Frontend Development</a>
</li>
<li class='article-tag-list-item'>
<a class='article-tag-list-link' href='https://snakifytech.blogspot.com/search/label/JavaScript%20Frameworks' rel='category tag' title='JavaScript Frameworks'>JavaScript Frameworks</a>
</li>
<li class='article-tag-list-item'>
<a class='article-tag-list-link' href='https://snakifytech.blogspot.com/search/label/Web%20Development' rel='category tag' title='Web Development'>Web Development</a>
</li>
</ul>
</span>
<div class='page-share-wrap'>
<div class='page-share' id='pageShare'>
<ul class='reset share-icons'>
<li>
<a class='facebook share-sns' data-title='Facebook' href='https://www.facebook.com/sharer/sharer.php?u=https://snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html' target='_blank'>
<i class='icon icon-facebook'></i>
</a>
</li>
<li>
<a class='twitter share-sns' data-title='Twitter' href='http://twitter.com/share?url=https://snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html' target='_blank'>
<i class='icon icon-twitter'></i>
</a>
</li>
<li>
<a class='whatsapp share-sns' data-title='whatsapp' href='whatsapp://send?text=https://snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html' target='_blank'>
<i class='icon icon-whatsapp'></i>
</a>
</li>
</ul>
</div>
<a class='page-share-fab waves-effect waves-circle' href='javascript:;' id='shareFab'>
<i class='icon icon-share-alt icon-lg'></i>
</a>
</div>
</div>
</div>
<nav class='post-nav flex-row flex-justify-between'>
<div class='waves-block waves-effect prev'>
<a class='blog-pager-newer-link post-nav-link' href='https://snakifytech.blogspot.com/2025/03/mastering-quantum-computing.html' id='post-prev'>
<div class='tips'><i class='icon icon-angle-left icon-lg icon-pr'></i>
Newer Posts</div>
<h4 class='title'>
Newer Posts
</h4>
</a>
</div>
<div class='waves-block waves-effect next'>
<a class='blog-pager-older-link post-nav-link' href='https://snakifytech.blogspot.com/2025/03/how-to-build-personal-portfolio-website.html' id='post-next'>
<div class='tips'>Older Posts
<i class='icon icon-angle-right icon-lg icon-pl'></i></div>
<h4 class='title'>
Older Posts
</h4>
</a>
</div>
</nav>
<script>
//<![CDATA[
function removetag(string, longlength) {
var identtag = string.split("<");
for (var f = 0; f < identtag.length; f++) {
if (identtag[f].indexOf(">") != -1) {
identtag[f] = identtag[f].substring(identtag[f].indexOf(">") + 1, identtag[f].length);
}
}
identtag = identtag.join("");
identtag = identtag.substring(0, longlength - 1);
return identtag;
}
var maxrelated = 4,
maxsnippet = 150,
allrelatedfeedorigin = new Array,
images_notfound = "https://placehold.it/250x200/777/eee?text=No+Images",
index = 0; // untuk index feed soalnya feednya itu ada 2 atau lebih
function extractfeed(json) {
var feedentry = json.feed.entry,
maxpost = feedentry.length,
monthformat = new Array();
monthformat[01] = "Jan",
monthformat[02] = "Feb",
monthformat[03] = "Mar",
monthformat[04] = "Apr",
monthformat[05] = "May",
monthformat[06] = "Jun",
monthformat[07] = "Jul",
monthformat[08] = "Aug",
monthformat[09] = "Sep",
monthformat[10] = "Oct",
monthformat[11] = "Nov",
monthformat[12] = "Dec";
for(i = 0; i < maxpost; i++){
// get title
var title = feedentry[i].title.$t;
// get date
var published = feedentry[i].published.$t,
yearpublished = published.substring(0, 4),
monthpublished = published.substring(5, 7),
daypublished = published.substring(8, 10),
timepublished = published.substring(11, 16),
date = daypublished + "-" + monthformat[parseInt(monthpublished, 10)] + "-" + yearpublished;
// get snippet
var snippetorigin;
if ("summary" in feedentry[i]) {
snippetorigin = feedentry[i].summary.$t;
}else if ("content" in feedentry[i]) {
snippetorigin = feedentry[i].content.$t;
}
var snippet = removetag(snippetorigin,maxsnippet);
// get images
if ("media$thumbnail" in feedentry[i]) {
var imagesorigin = feedentry[i].media$thumbnail.url;
imagesorigin = imagesorigin.replace('/s72-c/', '/w120-h100-c/');
}else {
var imagesorigin = images_notfound;
}
var images = imagesorigin;
// get link
for(var h=0; h < feedentry[i].link.length; h++){
if (feedentry[i].link[h].rel == "alternate") {
var link = feedentry[i].link[h].href;
break;
}
}
// get author
var author = feedentry[i].author[0].name.$t;
allrelatedfeedorigin.push({
"title" : title,
"link" : link,
"images" : images,
"snippet" : snippet
});
index++;
}
}
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
const removeDupliactes = (values) => {
let concatArray = values.map(eachValue => {
return Object.values(eachValue).join('')
})
let filterValues = values.filter((value, index) => {
return concatArray.indexOf(concatArray[index]) === index
})
return filterValues
}
function artikelterkait(){
var allrelatedfeed = shuffle(removeDupliactes(allrelatedfeedorigin));
var allrelatedfeedlength = allrelatedfeed.length;
var url_path = location.protocol + '//' + location.host + location.pathname;
html = "<div class='post-related-box'>";
html += "<h4>Postingan lainnya</h4>";
html += "<div class='clear'></div>";
html += "<ul id='related-summary'>";
document.write(html);
for (var xx = 0; xx < allrelatedfeedlength; xx++) {
if (allrelatedfeed[xx].link !== url_path) {
content = "<li class='news-title clearfix'>";
content += " <a href='" + allrelatedfeed[xx].link + "' rel='nofollow' target='_top' title='" + allrelatedfeed[xx].title + "'>";
content += " <div class='overlayb'>";
content += " <img alt='" + allrelatedfeed[xx].title + "' class='lazy' src='" + allrelatedfeed[xx].images + "' />";
content += " </div>";
content += " </a>";
content += " <div class='overlaytext'>";
content += " <a class='post-related-title' href='" + allrelatedfeed[xx].link + "' target='_top' title='" + allrelatedfeed[xx].title + "'>" + allrelatedfeed[xx].title + "</a>";
content += " </div>";
content += " <span class='news-text'>" + allrelatedfeed[xx].snippet + "</span>";
content += "</li>";
document.write(content);
if (xx >= maxrelated) {
break;
}
}
}
html = "</ul>";
html += "</div>";
document.write(html);
}
//]]>
</script>
<script src='/feeds/posts/default/-/Frontend Development?alt=json-in-script&callback=extractfeed&max-results=3' type='text/javascript'></script>
<script src='/feeds/posts/default/-/JavaScript Frameworks?alt=json-in-script&callback=extractfeed&max-results=3' type='text/javascript'></script>
<script src='/feeds/posts/default/-/Web Development?alt=json-in-script&callback=extractfeed&max-results=3' type='text/javascript'></script>
<div class='post-related'>
<script type='text/javascript'>
artikelterkait();
</script>
</div>
<div class='comments-container'>
<section class='comments threaded' data-embed='true' data-num-comments='0' id='comments'>
<h3 class='title'>
Comments
</h3>
<div class='comment-disable'>
Post a Comment
</div>
<div class='comment-footer'>
<div class='comment-form'>
<a href='https://www.blogger.com/comment/frame/9155866793860587752?po=1713464603467314596&hl=en-GB&saa=85391&skin=contempo' id='comment-editor-src'></a>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='https://www.blogger.com/comment/frame/9155866793860587752?po=1713464603467314596&hl=en-GB&saa=85391&skin=contempo' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/1167892209-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>
</div>
</div>
</section>
</div>
</div>
</article>
</div>
<div class='widget HTML' data-version='2' id='HTML111'>
<div id='ads-top-post-source'>
<div class='adspost'>
<script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4888221492141750" crossorigin="anonymous"></script>
<!-- sssssss -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-4888221492141750"
data-ad-slot="7211411570"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function() {
kodein_MoveByID('ads-top-post-source','ads-top-target');
});
</script>
</div><div class='widget HTML' data-version='2' id='HTML333'>
<div class='adspost center' id='content-ads'>
<script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4888221492141750" crossorigin="anonymous"></script>
<!-- sssssss -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-4888221492141750"
data-ad-slot="7211411570"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div><div class='widget HTML' data-version='2' id='HTML444'>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function() {
var setting = {
taghtml: "br",
index: "3"
};
kodein_moveElement('after',setting.taghtml,setting.index,'content-ads','post-content','beforeend');
});
</script>
</div><div class='widget HTML' data-version='2' id='HTML222'>
<div id='ads-bottom-post-source'>
<div class='adspost bottom'>
<script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4888221492141750" crossorigin="anonymous"></script>
<!-- sssssss -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-4888221492141750"
data-ad-slot="7211411570"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function() {
kodein_MoveByID('ads-bottom-post-source','ads-bottom-target');
});
</script>
</div></div>
</div>
<!-- Begin Footer ================================================== -->
<footer class='footer'>
<div class='top'>
<div class='section' id='ElementerFooter'><div class='widget HTML' data-version='2' id='HTML599'>
<script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4888221492141750" crossorigin="anonymous"></script>
<!-- sssssss -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-4888221492141750"
data-ad-slot="7211411570"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><div class='widget HTML' data-version='2' id='HTML595'>
<script type="text/javascript">
var setting = {
pageurl : "/p/redirect-link.html",
pengecualianstatus : false,
pengecualian : "google.com,twitter.com,javascript:;,mailto:",
hanyauntukstatus : true,
hanyauntuk : "githubusercontent.com",
path : "#link?from="
};
</script>
<script type="text/javascript" src='https://cdn.statically.io/gh/riedayme/bloggercode/master/js/crypto.js'></script>
<script type="text/javascript" src='https://cdn.statically.io/gh/riedayme/bloggercode/master/js/replacelink.js'></script>
</div><div class='widget PageList' data-version='2' id='PageList1'>
<p itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<span>
<a href='https://snakify.blogspot.com/' itemprop='url' title='Home'>
<span itemprop='name'>Home</span>
</a>
</span>
</p>
</div></div>
</div>
<div class='bottom'>
<p>
<span>Snakify Tech © 2019</span>
<span id='busuanzi_container_site_uv' style='display:none'>
Pengunjung Situs：<span id='busuanzi_value_site_uv'></span>
</span>
<span id='busuanzi_container_site_pv' style='display:none'>
Lalu Lintas：<span id='busuanzi_value_site_pv'></span>
</span>
</p>
</div>
</footer>
<!-- End Footer ================================================== -->
</main>
<div class='mask' id='mask'></div><!-- mask for navigation -->
<!-- Begin ================================================== -->
<a class='waves-effect waves-circle waves-light' href='javascript:;' id='gotop'><span class='icon icon-lg icon-chevron-up'></span></a>
<!-- End ================================================== -->
<!-- Begin ================================================== -->
<div class='global-share' id='globalShare'>
<ul class='reset share-icons'>
<li><a class='facebook share-sns' data-title=' Facebook' href='https://www.facebook.com/sharer/sharer.php?u=https://snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html' target='_blank'><i class='icon icon-facebook'></i></a></li>
<li><a class='twitter share-sns' data-title=' Twitter' href='http://twitter.com/share?url=https://snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html' target='_blank'><i class='icon icon-twitter'></i></a></li>
<li><a class='whatsapp share-sns' data-title='whatsapp' href='whatsapp://send?text=https://snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html' target='_blank'><i class='icon icon-whatsapp'></i></a></li>
</ul>
</div>
<div class='page-modal wx-share' id='wxShare'>
</div>
<!-- End ================================================== -->
<!-- Begin ================================================== -->
<div class='search-panel' id='search-panel'>
<ul class='search-result' id='search-result'></ul>
</div>
<template id='search-tpl'>
</template>
<!-- End ================================================== -->
<!-- Begin Fiture ================================================== -->
<div class='section' id='ElementerFitur'><div class='widget HTML' data-version='2' id='HTML556'>
<script>
//<![CDATA[
!function(t){var e=function(e){this._options={checkOnLoad:!1,resetOnEnd:!1,loopCheckTime:50,loopMaxNumber:5,baitClass:"pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links",baitStyle:"width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;",debug:!1},this._var={version:"3.2.1",bait:null,checking:!1,loop:null,loopNumber:0,event:{detected:[],notDetected:[]}},void 0!==e&&this.setOption(e);var i=this,o=function(){setTimeout(function(){i._options.checkOnLoad===!0&&(i._options.debug===!0&&i._log("onload->eventCallback","A check loading is launched"),null===i._var.bait&&i._creatBait(),setTimeout(function(){i.check()},1))},1)};void 0!==t.addEventListener?t.addEventListener("load",o,!1):t.attachEvent("onload",o)};e.prototype._options=null,e.prototype._var=null,e.prototype._bait=null,e.prototype._log=function(t,e){console.log("[FuckAdBlock]["+t+"] "+e)},e.prototype.setOption=function(t,e){if(void 0!==e){var i=t;t={},t[i]=e}for(var o in t)this._options[o]=t[o],this._options.debug===!0&&this._log("setOption",'The option "'+o+'" he was assigned to "'+t[o]+'"');return this},e.prototype._creatBait=function(){var e=document.createElement("div");e.setAttribute("class",this._options.baitClass),e.setAttribute("style",this._options.baitStyle),this._var.bait=t.document.body.appendChild(e),this._var.bait.offsetParent,this._var.bait.offsetHeight,this._var.bait.offsetLeft,this._var.bait.offsetTop,this._var.bait.offsetWidth,this._var.bait.clientHeight,this._var.bait.clientWidth,this._options.debug===!0&&this._log("_creatBait","Bait has been created")},e.prototype._destroyBait=function(){t.document.body.removeChild(this._var.bait),this._var.bait=null,this._options.debug===!0&&this._log("_destroyBait","Bait has been removed")},e.prototype.check=function(t){if(void 0===t&&(t=!0),this._options.debug===!0&&this._log("check","An audit was requested "+(t===!0?"with a":"without")+" loop"),this._var.checking===!0)return this._options.debug===!0&&this._log("check","A check was canceled because there is already an ongoing"),!1;this._var.checking=!0,null===this._var.bait&&this._creatBait();var e=this;return this._var.loopNumber=0,t===!0&&(this._var.loop=setInterval(function(){e._checkBait(t)},this._options.loopCheckTime)),setTimeout(function(){e._checkBait(t)},1),this._options.debug===!0&&this._log("check","A check is in progress ..."),!0},e.prototype._checkBait=function(e){var i=!1;if(null===this._var.bait&&this._creatBait(),(null!==t.document.body.getAttribute("abp")||null===this._var.bait.offsetParent||0==this._var.bait.offsetHeight||0==this._var.bait.offsetLeft||0==this._var.bait.offsetTop||0==this._var.bait.offsetWidth||0==this._var.bait.clientHeight||0==this._var.bait.clientWidth)&&(i=!0),void 0!==t.getComputedStyle){var o=t.getComputedStyle(this._var.bait,null);!o||"none"!=o.getPropertyValue("display")&&"hidden"!=o.getPropertyValue("visibility")||(i=!0)}this._options.debug===!0&&this._log("_checkBait","A check ("+(this._var.loopNumber+1)+"/"+this._options.loopMaxNumber+" ~"+(1+this._var.loopNumber*this._options.loopCheckTime)+"ms) was conducted and detection is "+(i===!0?"positive":"negative")),e===!0&&(this._var.loopNumber++,this._var.loopNumber>=this._options.loopMaxNumber&&this._stopLoop()),i===!0?(this._stopLoop(),this._destroyBait(),this.emitEvent(!0),e===!0&&(this._var.checking=!1)):(null===this._var.loop||e===!1)&&(this._destroyBait(),this.emitEvent(!1),e===!0&&(this._var.checking=!1))},e.prototype._stopLoop=function(t){clearInterval(this._var.loop),this._var.loop=null,this._var.loopNumber=0,this._options.debug===!0&&this._log("_stopLoop","A loop has been stopped")},e.prototype.emitEvent=function(t){this._options.debug===!0&&this._log("emitEvent","An event with a "+(t===!0?"positive":"negative")+" detection was called");var e=this._var.event[t===!0?"detected":"notDetected"];for(var i in e)this._options.debug===!0&&this._log("emitEvent","Call function "+(parseInt(i)+1)+"/"+e.length),e.hasOwnProperty(i)&&e[i]();return this._options.resetOnEnd===!0&&this.clearEvent(),this},e.prototype.clearEvent=function(){this._var.event.detected=[],this._var.event.notDetected=[],this._options.debug===!0&&this._log("clearEvent","The event list has been cleared")},e.prototype.on=function(t,e){return this._var.event[t===!0?"detected":"notDetected"].push(e),this._options.debug===!0&&this._log("on",'A type of event "'+(t===!0?"detected":"notDetected")+'" was added'),this},e.prototype.onDetected=function(t){return this.on(!0,t)},e.prototype.onNotDetected=function(t){return this.on(!1,t)},t.FuckAdBlock=e,void 0===t.fuckAdBlock&&(t.fuckAdBlock=new e({checkOnLoad:!0,resetOnEnd:!0}))}(window);
//]]>
fuckAdBlock.on(true, function() {
$("#adbs").html("Adblock Detected");
$("#adb").removeClass('hidden');
$("body").css('overflow','hidden');
}).on(false, function() {
});
</script>
<div class='adb hidden' id='adb'>
<div class='adbs' id='adbs'></div>
</div>
</div><div class='widget HTML' data-version='2' id='HTML597'>
<script>
/*<![CDATA[*/
var bszCaller,bszTag;!function(){var c,d,e,a=!1,b=[];ready=function(c){return a||"interactive"===document.readyState||"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a||(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a||document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()}})}}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="none")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})}};
/*]]>*/
</script>
</div><div class='widget ContactForm' data-version='2' id='ContactForm1'></div></div>
<!-- End Fiture ================================================== -->
<div class='no-items section' id='reset'></div>
<body>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1447683341-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7JL3b8JjFrin0E5VvkZLXIMJQcng:1751955999995';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d9155866793860587752','//snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html','9155866793860587752');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '9155866793860587752', 'title': 'Snakify Tech', 'url': 'https://snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html', 'canonicalUrl': 'https://snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html', 'homepageUrl': 'https://snakifytech.blogspot.com/', 'searchUrl': 'https://snakifytech.blogspot.com/search', 'canonicalHomepageUrl': 'https://snakifytech.blogspot.com/', 'blogspotFaviconUrl': 'https://snakifytech.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en-GB', 'localeUnderscoreDelimited': 'en_gb', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Snakify Tech - Atom\x22 href\x3d\x22https://snakifytech.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Snakify Tech - RSS\x22 href\x3d\x22https://snakifytech.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Snakify Tech - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/9155866793860587752/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Snakify Tech - Atom\x22 href\x3d\x22https://snakifytech.blogspot.com/feeds/1713464603467314596/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-4888221492141750', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/7658af4fdeb4efeb', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en_GB\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'See Full Post \xbb', 'pageType': 'item', 'postId': '1713464603467314596', 'pageName': 'Top 5 JavaScript Frameworks for Web Development in 2025', 'pageTitle': 'Snakify Tech: Top 5 JavaScript Frameworks for Web Development in 2025', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard', 'ok': 'Ok', 'postLink': 'Post link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Top 5 JavaScript Frameworks for Web Development in 2025', 'description': 'Explore the world of tech with Snakify Tech. From beginner guides to expert insights on AI, cybersecurity, and quantum computing, we cover it all.', 'url': 'https://snakifytech.blogspot.com/2025/03/top-5-javascript-frameworks-for-web.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 1713464603467314596}}, {'name': 'widgets', 'data': [{'title': 'Avatar URL', 'type': 'HTML', 'sectionId': 'ElementerHeader', 'id': 'HTML1'}, {'title': 'Social Icon', 'type': 'LinkList', 'sectionId': 'ElementerHeader', 'id': 'LinkList1'}, {'title': 'Navigation Pages [Vertical]', 'type': 'PageList', 'sectionId': 'ElementerNavigasi1', 'id': 'PageList2'}, {'title': 'Navigation Label [Vertical]', 'type': 'Label', 'sectionId': 'ElementerNavigasi1', 'id': 'Label1'}, {'title': 'Search', 'type': 'BlogSearch', 'sectionId': 'b-section-BlogSearch1', 'id': 'BlogSearch1'}, {'title': 'Snakify Tech (Header)', 'type': 'Header', 'sectionId': 'b-section-Header2', 'id': 'Header2'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'b-section-Header2', 'id': 'Blog2', 'posts': [{'id': '1713464603467314596', 'title': 'Top 5 JavaScript Frameworks for Web Development in 2025', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'comments'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'comments'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': ''}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Navigation Label [Horizontal]', 'type': 'Label', 'sectionId': 'ElementerNavigasi2', 'id': 'Label2'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'ElementerBlog', 'id': 'Blog1', 'posts': [{'id': '1713464603467314596', 'title': 'Top 5 JavaScript Frameworks for Web Development in 2025', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'author', 'label': 'Posted by:'}, {'name': 'timestamp', 'label': ''}, {'name': 'share', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comments'}, {'name': 'icons', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Tags:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Posted by:'}, {'name': 'timestamp', 'label': ''}, {'name': 'share', 'label': ''}, {'name': 'comments', 'label': 'Comments'}, {'name': 'icons', 'label': ''}, {'name': 'labels', 'label': 'Tags:'}]}, {'title': 'Advertisement Post Feed', 'type': 'HTML', 'sectionId': 'ElementerBlog', 'id': 'HTML555'}, {'title': 'Advertisement Post Top', 'type': 'HTML', 'sectionId': 'ElementerBlog', 'id': 'HTML111'}, {'title': 'Advertisement Center', 'type': 'HTML', 'sectionId': 'ElementerBlog', 'id': 'HTML333'}, {'title': 'Advertisement Center [Setting]', 'type': 'HTML', 'sectionId': 'ElementerBlog', 'id': 'HTML444'}, {'title': 'Advertisement Post Bottom', 'type': 'HTML', 'sectionId': 'ElementerBlog', 'id': 'HTML222'}, {'title': 'Free HTML', 'type': 'HTML', 'sectionId': 'ElementerFooter', 'id': 'HTML599'}, {'title': 'Redirect Link JS', 'type': 'HTML', 'sectionId': 'ElementerFooter', 'id': 'HTML595'}, {'title': 'Navigation Pages [Footer]', 'type': 'PageList', 'sectionId': 'ElementerFooter', 'id': 'PageList1'}, {'title': 'Adblock Plugin', 'type': 'HTML', 'sectionId': 'ElementerFitur', 'id': 'HTML556'}, {'title': 'Count Viewer', 'type': 'HTML', 'sectionId': 'ElementerFitur', 'id': 'HTML597'}, {'title': 'Contact Static Page', 'type': 'ContactForm', 'sectionId': 'ElementerFitur', 'id': 'ContactForm1'}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'ElementerHeader', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'ElementerHeader', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList2', 'ElementerNavigasi1', document.getElementById('PageList2'), {'title': 'Navigation Pages [Vertical]', 'links': [{'isCurrentPage': false, 'href': 'https://snakify.blogspot.com/', 'title': 'Home'}, {'isCurrentPage': false, 'href': 'https://snakify.blogspot.com', 'title': 'Download Template'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'ElementerNavigasi1', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'b-section-BlogSearch1', document.getElementById('BlogSearch1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header2', 'b-section-Header2', document.getElementById('Header2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog2', 'b-section-Header2', document.getElementById('Blog2'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3236230316-lbx__en_gb.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label2', 'ElementerNavigasi2', document.getElementById('Label2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'ElementerBlog', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3236230316-lbx__en_gb.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML555', 'ElementerBlog', document.getElementById('HTML555'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML111', 'ElementerBlog', document.getElementById('HTML111'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML333', 'ElementerBlog', document.getElementById('HTML333'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML444', 'ElementerBlog', document.getElementById('HTML444'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML222', 'ElementerBlog', document.getElementById('HTML222'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML599', 'ElementerFooter', document.getElementById('HTML599'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML595', 'ElementerFooter', document.getElementById('HTML595'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'ElementerFooter', document.getElementById('PageList1'), {'title': 'Navigation Pages [Footer]', 'links': [{'isCurrentPage': false, 'href': 'https://snakify.blogspot.com/', 'title': 'Home'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML556', 'ElementerFitur', document.getElementById('HTML556'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML597', 'ElementerFitur', document.getElementById('HTML597'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'ElementerFitur', document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Static Page', 'blogId': '9155866793860587752', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AOuZoY6RpsxBi6BX4OMrBYC464gyjrhyFw:1751955999995', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>
</body>
<!-- Blogger TOC -->
<script type='text/javascript'>
//<![CDATA[
/* Move Element by Kodein :D
========================================================================== */
function kodein_checkelement(e) {
return document.getElementById(e) ? 1 : 0
}
function kodein_insertelement(e, n, t) {
var r = n.parentNode;
"after" == t && r.insertBefore(e, n.nextSibling), "before" == t && r.insertBefore(e, n)
}
function kodein_moveElement(e, n, t, r, i, o) {
if (!kodein_checkelement(r)) return !1;
var m = document.getElementById(i),
d = m.getElementsByTagName(n),
l = document.getElementById(r);
if (0 == t || d.length < 0 || d.length < t) return m.insertAdjacentElement(o, l), !1;
kodein_insertelement(l, d[t -= 1], e)
}
function kodein_MoveByID(e, n) {
var t = document.createDocumentFragment();
t.appendChild(document.getElementById(e)), document.getElementById(n).appendChild(t)
}
//]]>
</script>
<script id='jquery' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>window.lazyScripts=[]</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js'></script>
<script type='text/javascript'>hljs.initHighlightingOnLoad();</script>
<!-- Blogger TOC -->
<script type='text/javascript'>
/*
* SEO Friendly Blogspot Table Of Contents
* https://bibit.ws/toc-di-blogspot.php
*/
//<![CDATA[
function bwstoc() {
var bwstoc = i = headinglength = getheading = 0;
var no = 1;
headinglength = document.getElementById("get-post-toc").querySelectorAll("h2, h3, h4").length;
if (headinglength > 1) {
for (i = 0; i < headinglength; i++) {
getheading = document.getElementById("get-post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
var bws_2 = bws_1.trim();
var getHeadUri = bws_2.replace(/\s/g, "_");
document.getElementById("get-post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
bwstoc = "<li class='post-toc-item post-toc-level-2'><a class='post-toc-link' href='#" + getHeadUri + "'><span class='post-toc-number'>"+ no +"</span> <span class='post-toc-text'>" + getheading + "</span></a></li>";
document.getElementById("bwstoc").innerHTML += bwstoc;
no++;
}
} else {
bwstoc = "<li class='post-toc-item post-toc-level-2'><a class='post-toc-link' href='javascript:;'><span class='post-toc-number'></span> <span class='post-toc-text'>Not Found</span></a></li>";
document.getElementById("bwstoc").innerHTML += bwstoc;
}
}
//]]>
</script>
<script>bwstoc();</script>
<noscript><style type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: false };
/*<![CDATA[*/
/* Class Active */
var current=location.pathname?location.pathname:"./";$(".nav li a").each(function(){var a=$(this);encodeURI(a.attr("href"))==current&&a.parents("li").addClass("active")}),$(".tags-list a").each(function(){var a=$(this);encodeURI(a.attr("href"))==current&&a.addClass("active")});
/*!
* Waves v0.7.4
* http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/
!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],function(){return b.apply(a)}):"object"==typeof exports?module.exports=b.call(a):a.Waves=b.call(a)}("object"==typeof global?global:this,function(){"use strict";function a(a){return null!==a&&a===a.window}function b(b){return a(b)?b:9===b.nodeType&&b.defaultView}function c(a){var b=typeof a;return"function"===b||"object"===b&&!!a}function d(a){return c(a)&&a.nodeType>0}function e(a){var b=m.call(a);return"[object String]"===b?l(a):c(a)&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(b)&&a.hasOwnProperty("length")?a:d(a)?[a]:[]}function f(a){var c,d,e={top:0,left:0},f=a&&a.ownerDocument;return c=f.documentElement,"undefined"!=typeof a.getBoundingClientRect&&(e=a.getBoundingClientRect()),d=b(f),{top:e.top+d.pageYOffset-c.clientTop,left:e.left+d.pageXOffset-c.clientLeft}}function g(a){var b="";for(var c in a)a.hasOwnProperty(c)&&(b+=c+":"+a[c]+";");return b}function h(a,b,c){if(c){c.classList.remove("waves-rippling");var d=c.getAttribute("data-x"),e=c.getAttribute("data-y"),f=c.getAttribute("data-scale"),h=c.getAttribute("data-translate"),i=Date.now()-Number(c.getAttribute("data-hold")),j=350-i;0>j&&(j=0),"mousemove"===a.type&&(j=150);var k="mousemove"===a.type?2500:o.duration;setTimeout(function(){var a={top:e+"px",left:d+"px",opacity:"0","-webkit-transition-duration":k+"ms","-moz-transition-duration":k+"ms","-o-transition-duration":k+"ms","transition-duration":k+"ms","-webkit-transform":f+" "+h,"-moz-transform":f+" "+h,"-ms-transform":f+" "+h,"-o-transform":f+" "+h,transform:f+" "+h};c.setAttribute("style",g(a)),setTimeout(function(){try{b.removeChild(c)}catch(a){return!1}},k)},j)}}function i(a){if(q.allowEvent(a)===!1)return null;for(var b=null,c=a.target||a.srcElement;null!==c.parentElement;){if(c.classList.contains("waves-effect")&&!(c instanceof SVGElement)){b=c;break}c=c.parentElement}return b}function j(a){var b=i(a);if(null!==b){if(b.disabled||b.getAttribute("disabled")||b.classList.contains("disabled"))return;if(q.registerEvent(a),"touchstart"===a.type&&o.delay){var c=!1,d=setTimeout(function(){d=null,o.show(a,b)},o.delay),e=function(e){d&&(clearTimeout(d),d=null,o.show(a,b)),c||(c=!0,o.hide(e,b))},f=function(a){d&&(clearTimeout(d),d=null),e(a)};b.addEventListener("touchmove",f,!1),b.addEventListener("touchend",e,!1),b.addEventListener("touchcancel",e,!1)}else o.show(a,b),n&&(b.addEventListener("touchend",o.hide,!1),b.addEventListener("touchcancel",o.hide,!1)),b.addEventListener("mouseup",o.hide,!1),b.addEventListener("mouseleave",o.hide,!1)}}var k=k||{},l=document.querySelectorAll.bind(document),m=Object.prototype.toString,n="ontouchstart"in window,o={duration:750,delay:200,show:function(a,b,c){if(2===a.button)return!1;b=b||this;var d=document.createElement("div");d.className="waves-ripple waves-rippling",b.appendChild(d);var e=f(b),h=0,i=0;"touches"in a&&a.touches.length?(h=a.touches[0].pageY-e.top,i=a.touches[0].pageX-e.left):(h=a.pageY-e.top,i=a.pageX-e.left),i=i>=0?i:0,h=h>=0?h:0;var j="scale("+b.clientWidth/100*3+")",k="translate(0,0)";c&&(k="translate("+c.x+"px, "+c.y+"px)"),d.setAttribute("data-hold",Date.now()),d.setAttribute("data-x",i),d.setAttribute("data-y",h),d.setAttribute("data-scale",j),d.setAttribute("data-translate",k);var l={top:h+"px",left:i+"px"};d.classList.add("waves-notransition"),d.setAttribute("style",g(l)),d.classList.remove("waves-notransition"),l["-webkit-transform"]=j+" "+k,l["-moz-transform"]=j+" "+k,l["-ms-transform"]=j+" "+k,l["-o-transform"]=j+" "+k,l.transform=j+" "+k,l.opacity="1";var m="mousemove"===a.type?2500:o.duration;l["-webkit-transition-duration"]=m+"ms",l["-moz-transition-duration"]=m+"ms",l["-o-transition-duration"]=m+"ms",l["transition-duration"]=m+"ms",d.setAttribute("style",g(l))},hide:function(a,b){b=b||this;for(var c=b.getElementsByClassName("waves-rippling"),d=0,e=c.length;e>d;d++)h(a,b,c[d])}},p={input:function(a){var b=a.parentNode;if("i"!==b.tagName.toLowerCase()||!b.classList.contains("waves-effect")){var c=document.createElement("i");c.className=a.className+" waves-input-wrapper",a.className="waves-button-input",b.replaceChild(c,a),c.appendChild(a);var d=window.getComputedStyle(a,null),e=d.color,f=d.backgroundColor;c.setAttribute("style","color:"+e+";background:"+f),a.setAttribute("style","background-color:rgba(0,0,0,0);")}},img:function(a){var b=a.parentNode;if("i"!==b.tagName.toLowerCase()||!b.classList.contains("waves-effect")){var c=document.createElement("i");b.replaceChild(c,a),c.appendChild(a)}}},q={touches:0,allowEvent:function(a){var b=!0;return/^(mousedown|mousemove)$/.test(a.type)&&q.touches&&(b=!1),b},registerEvent:function(a){var b=a.type;"touchstart"===b?q.touches+=1:/^(touchend|touchcancel)$/.test(b)&&setTimeout(function(){q.touches&&(q.touches-=1)},500)}};return k.init=function(a){var b=document.body;a=a||{},"duration"in a&&(o.duration=a.duration),"delay"in a&&(o.delay=a.delay),n&&(b.addEventListener("touchstart",j,!1),b.addEventListener("touchcancel",q.registerEvent,!1),b.addEventListener("touchend",q.registerEvent,!1)),b.addEventListener("mousedown",j,!1)},k.attach=function(a,b){a=e(a),"[object Array]"===m.call(b)&&(b=b.join(" ")),b=b?" "+b:"";for(var c,d,f=0,g=a.length;g>f;f++)c=a[f],d=c.tagName.toLowerCase(),-1!==["input","img"].indexOf(d)&&(p[d](c),c=c.parentElement),-1===c.className.indexOf("waves-effect")&&(c.className+=" waves-effect"+b)},k.ripple=function(a,b){a=e(a);var c=a.length;if(b=b||{},b.wait=b.wait||0,b.position=b.position||null,c)for(var d,g,h,i={},j=0,k={type:"mousedown",button:1},l=function(a,b){return function(){o.hide(a,b)}};c>j;j++)if(d=a[j],g=b.position||{x:d.clientWidth/2,y:d.clientHeight/2},h=f(d),i.x=h.left+g.x,i.y=h.top+g.y,k.pageX=i.x,k.pageY=i.y,o.show(k,d),b.wait>=0&&null!==b.wait){var m={type:"mouseup",button:1};setTimeout(l(m,d),b.wait)}},k.calm=function(a){a=e(a);for(var b={type:"mouseup",button:1},c=0,d=a.length;d>c;c++)o.hide(b,a[c])},k.displayEffect=function(a){k.init(a)},k});
/* Main Script */
!function(t,e){var i=e.body,n=e.querySelector.bind(e),s=e.querySelectorAll.bind(e),a=n("html"),o=n("#gotop"),r=n("#menu"),c=n("#header"),l=n("#mask"),d=n("#menu-toggle"),h=n("#menu-off"),u=n("#loading"),f=t.requestAnimationFrame,m=Array.prototype.forEach,g="ontouchstart"in t&&/Mobile|Android|iOS|iPhone|iPad|iPod|Windows Phone|KFAPWI/i.test(navigator.userAgent)?"touchstart":"click",v=/micromessenger/i.test(navigator.userAgent),L=function(){},p=function(){return e.documentElement.scrollTop||e.body.scrollTop},w={goTop:function(e){var i=p(),n=arguments.length>2?arguments[1]:Math.abs(i-e)/12;i&&i>e?(t.scrollTo(0,Math.max(i-n,0)),f(arguments.callee.bind(this,e,n))):e&&e>i?(t.scrollTo(0,Math.min(i+n,e)),f(arguments.callee.bind(this,e,n))):this.toc.actived(e)},toggleGotop:function(e){e>t.innerHeight/2?o.classList.add("in"):o.classList.remove("in")},toggleMenu:function(e){var i=n("#main");if(e){if(r.classList.remove("hide"),t.innerWidth<1241)if(l.classList.add("in"),r.classList.add("show"),v){var s=p();i.classList.add("lock"),i.scrollTop=s}else a.classList.add("lock")}else if(r.classList.remove("show"),l.classList.remove("in"),v){s=i.scrollTop;i.classList.remove("lock"),t.scrollTo(0,s)}else a.classList.remove("lock")},fixedHeader:function(t){t>c.clientHeight?c.classList.add("fixed"):c.classList.remove("fixed")},hideOnMask:[],modal:function(t){this.$modal=n(t),this.$off=this.$modal.querySelector(".close");var e=this;this.show=function(){l.classList.add("in"),e.$modal.classList.add("ready"),setTimeout(function(){e.$modal.classList.add("in")},0)},this.onHide=L,this.hide=function(){e.onHide(),l.classList.remove("in"),e.$modal.classList.remove("in"),setTimeout(function(){e.$modal.classList.remove("ready")},300)},this.toggle=function(){return e.$modal.classList.contains("in")?e.hide():e.show()},w.hideOnMask.push(this.hide),this.$off&&this.$off.addEventListener(g,this.hide)},share:function(){var t=n("#pageShare"),i=n("#shareFab"),a=new this.modal("#globalShare");n("#menuShare").addEventListener(g,a.toggle),i&&(i.addEventListener(g,function(){t.classList.toggle("in")},!1),e.addEventListener(g,function(e){!i.contains(e.target)&&t.classList.remove("in")},!1));var o=new this.modal("#wxShare");o.onHide=a.hide,m.call(s(".wxFab"),function(t){t.addEventListener(g,o.toggle)})},search:function(){var t=n("#search-wrap");n("#search").addEventListener(g,function(){t.classList.toggle("in")})},reward:function(){var t=new this.modal("#reward");n("#rewardBtn").addEventListener(g,t.toggle);var e=n("#rewardToggle"),i=n("#rewardCode");e&&e.addEventListener("change",function(){i.src=this.checked?this.dataset.alipay:this.dataset.wechat})},waterfall:function(){t.innerWidth<760||m.call(s(".waterfall"),function(t){var e=t.querySelectorAll(".waterfall-item"),i=[0,0];m.call(e,function(t){var e=i[0]<=i[1]?0:1;t.style.cssText="top:"+i[e]+"px;left:"+(e>0?"50%":0),i[e]+=t.offsetHeight}),t.style.height=Math.max(i[0],i[1])+"px",t.classList.add("in")})},tabBar:function(t){t.parentNode.parentNode.classList.toggle("expand")},page:function(){var t=s(".fade, .fade-scale"),e=!1;return{loaded:function(){m.call(t,function(t){t.classList.add("in")}),e=!0},unload:function(){m.call(t,function(t){t.classList.remove("in")}),e=!1},visible:e}}(),lightbox:function(){function n(n){var s,a,o,r,c;this.$img=n.querySelector("img"),this.$overlay=n.querySelector("overlay"),this.margin=40,this.title=this.$img.title||this.$img.alt||"",this.isZoom=!1,this.calcRect=function(){r=i.clientWidth;var t=(c=i.clientHeight)-2*this.margin,e=s,n=a,l=(this.margin,e>r?r/e:1),d=n>t?t/n:1,h=Math.min(l,d);return{w:e*=h,h:n*=h,t:(c-n)/2-o.top,l:(r-e)/2-o.left+this.$img.offsetLeft}},this.setImgRect=function(t){this.$img.style.cssText="width: "+t.w+"px; max-width: "+t.w+"px; height:"+t.h+"px; top: "+t.t+"px; left: "+t.l+"px"},this.setFrom=function(){this.setImgRect({w:o.width,h:o.height,t:0,l:(n.offsetWidth-o.width)/2})},this.setTo=function(){this.setImgRect(this.calcRect())},this.addTitle=function(){this.title&&(this.$caption=e.createElement("div"),this.$caption.innerHTML=this.title,this.$caption.className="overlay-title",n.appendChild(this.$caption))},this.removeTitle=function(){this.$caption&&n.removeChild(this.$caption)};var l=this;this.zoomIn=function(){s=this.$img.naturalWidth||this.$img.width,a=this.$img.naturalHeight||this.$img.height,o=this.$img.getBoundingClientRect(),n.style.height=o.height+"px",n.classList.add("ready"),this.setFrom(),this.addTitle(),this.$img.classList.add("zoom-in"),setTimeout(function(){n.classList.add("active"),l.setTo(),l.isZoom=!0},0)},this.zoomOut=function(){this.isZoom=!1,n.classList.remove("active"),this.$img.classList.add("zoom-in"),this.setFrom(),setTimeout(function(){l.$img.classList.remove("zoom-in"),l.$img.style.cssText="",l.removeTitle(),n.classList.remove("ready"),n.removeAttribute("style")},300)},n.addEventListener("click",function(t){l.isZoom?l.zoomOut():"IMG"===t.target.tagName&&l.zoomIn()}),e.addEventListener("scroll",function(){l.isZoom&&l.zoomOut()}),t.addEventListener("resize",function(){l.isZoom&&l.zoomOut()})}m.call(s(".img-lightbox"),function(t){new n(t)})}(),loadScript:function(t){t.forEach(function(t){var n=e.createElement("script");n.src=t,n.async=!0,i.appendChild(n)})}};t.addEventListener("load",function(){u.classList.remove("active"),w.page.loaded(),t.lazyScripts&&t.lazyScripts.length&&w.loadScript(t.lazyScripts)}),t.addEventListener("DOMContentLoaded",function(){w.waterfall();p()});var E=!1,$=n('a[href^="mailto"]');$&&$.addEventListener(g,function(){E=!0}),t.addEventListener("beforeunload",function(t){E?E=!1:w.page.unload()}),t.addEventListener("pageshow",function(){!w.page.visible&&w.page.loaded()}),t.addEventListener("resize",function(){t.BLOG.even=g="ontouchstart"in t?"touchstart":"click",w.toggleMenu(),w.waterfall()}),o.addEventListener(g,function(){f(w.goTop.bind(w,0))},!1),d.addEventListener(g,function(t){w.toggleMenu(!0),t.preventDefault()},!1),h.addEventListener(g,function(){r.classList.add("hide")},!1),l.addEventListener(g,function(t){w.toggleMenu(),w.hideOnMask.forEach(function(t){t()}),t.preventDefault()},!1),e.addEventListener("scroll",function(){var t=p();w.toggleGotop(t),w.fixedHeader(t)},!1),t.BLOG.SHARE&&w.share(),t.BLOG.REWARD&&w.reward(),w.noop=L,w.even=g,w.$=n,w.$$=s,Object.keys(w).reduce(function(t,e){return t[e]=w[e],t},t.BLOG),t.Waves?(Waves.init(),Waves.attach(".global-share li",["waves-block"]),Waves.attach(".article-tag-list-link, #page-nav a, #page-nav span",["waves-button"])):console.error("Waves loading failed.")}(window,document),function(){function t(t,e){return e.lastIndex=0,e.test(t)}function e(e,i){return t(e.title,i)||e.tags.some(function(e){return t(e.name,i)})||t(e.text,i)}function i(t){var i=this.value.trim();if(i){var a=new RegExp(i.replace(/[ ]/g,"|"),"gmi");(function(t){if(n)t(n);else{var e=new XMLHttpRequest;e.open("GET",m,!0),e.onload=function(){if(this.status>=200&&this.status<300){var e=JSON.parse(this.response);n=e instanceof Array?e:e.posts,t(n)}else console.error(this.statusText)},e.onerror=function(){console.error(this.statusText)},e.send()}})(function(t){(function(t){var e;e=t.length?t.map(function(t){return function(t,e){return t.replace(/\{\w+\}/g,function(t){var i=t.replace(/\{|\}/g,"");return e[i]||""})}(f,{title:t.title,path:(s.BLOG.ROOT+"/"+t.path).replace(/\/{2,}/g,"/"),date:new Date(t.date).toLocaleDateString(),tags:t.tags.map(function(t){return"<span>#"+t.name+"</span>"}).join("")})}).join(""):'<li class="tips"><i class="icon icon-coffee icon-3x"></i><p>Results not found!</p></li>',u.innerHTML=e})(t.filter(function(t){return e(t,a)})),v.show()}),t.preventDefault()}}var n,s=window||this,a=s.BLOG.even,o=s.BLOG.$,r=o("#search"),c=o("#search-wrap"),l=o("#key"),d=o("#back"),h=o("#search-panel"),u=o("#search-result"),f=o("#search-tpl").innerHTML,m=(s.BLOG.ROOT+"/content.json").replace(/\/{2}/g,"/"),g=(s.BLOG.noop,o("html")),v={show:function(){s.innerWidth<760&&g.classList.add("lock-size"),h.classList.add("in")},hide:function(){s.innerWidth<760&&g.classList.remove("lock-size"),h.classList.remove("in")}};r.addEventListener(a,function(){c.classList.toggle("in"),l.value="",c.classList.contains("in")?l.focus():l.blur()}),d.addEventListener(a,function(){c.classList.remove("in"),v.hide()}),document.addEventListener(a,function(t){"key"!==t.target.id&&"click"===a&&v.hide()}),l.addEventListener("input",i),l.addEventListener(a,i)}.call(this);
/*]]>*/
</script>
</body>
</html>