[{"data":1,"prerenderedAt":22889},["ShallowReactive",2],{"list-count-blog-posts":3,"content-query-rs9xCjaXQT":12804},[4,699,1032,1257,1608,1798,2260,2407,2658,2855,3111,3267,3489,3613,3736,3968,4155,4457,4748,5106,5492,6373,6818,7029,7199,7572,7736,7893,8307,8554,9327,9510,9724,9889,10736,10936,11327,11504,11801,12221,12585],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"seoTitle":11,"seoDescription":12,"keywords":13,"image":18,"alt":19,"ogImage":18,"tags":20,"categories":24,"published":25,"author":26,"link":5,"date":27,"sitemap":28,"body":34,"_type":693,"_id":694,"_source":695,"_file":696,"_stem":697,"_extension":698},"/blog-posts/0-new-features-of-the-main-php-versions-from-7-to-8","blog-posts",false,"","[0] New features of the main PHP versions from 7 to 8","Performance improvements, syntax changes, and new PHP functionalities from versions 7 to 8.","New features of PHP 7 and PHP 8","Explore new features of PHP from versions 7 to 8, including performance boosts, syntax changes, and functionality upgrades.",[14,15,16,17],"PHP 7 vs 8","PHP new features","Performance improvements in PHP","PHP updates","/images/blog-posts/features-from-php7.0-8.0.png.webp","PHP",[21,22,23],"it","back-end","php",[21,22,23],true,"Adam Biro","2022-03-26",{"loc":29,"lastmod":27,"changefreq":30,"priority":31,"images":32},"/blog-posts/0-new-features-of-the-main-php-versions-from-7-to-8/","monthly",0.8,[33],{"loc":18},{"type":35,"children":36,"toc":684},"root",[37,45,52,211,217,224,330,336,342,385,391,397,464,470,476,673,679],{"type":38,"tag":39,"props":40,"children":41},"element","p",{},[42],{"type":43,"value":44},"text","This post wants to go through PHP's main features from 7.0 to 8.0 in a bullet point style with some links to more details. I am doing so because I would like to check the new features of PHP 8.0, and a list like this can be helpful for what functionalities I need to check. By the way, some of these new features extend a preexisting attribute that was introduced in the previous PHP versions. So this is the best time for me to check the past PHP features in a retrospected style.",{"type":38,"tag":46,"props":47,"children":49},"h2",{"id":48},"what-were-the-new-features-of-php-70",[50],{"type":43,"value":51},"What were the new Features of PHP 7.0?",{"type":38,"tag":53,"props":54,"children":55},"ul",{},[56,68],{"type":38,"tag":57,"props":58,"children":59},"li",{},[60],{"type":38,"tag":61,"props":62,"children":66},"a",{"href":63,"rel":64},"https://www.tutorialspoint.com/php7/index.htm",[65],"nofollow",[67],{"type":43,"value":63},{"type":38,"tag":57,"props":69,"children":70},{},[71,81],{"type":38,"tag":72,"props":73,"children":74},"strong",{},[75],{"type":38,"tag":76,"props":77,"children":78},"em",{},[79],{"type":43,"value":80},"New Features Included:",{"type":38,"tag":82,"props":83,"children":84},"ol",{},[85,96,107,118,129,140,151,156,161,166,171,176,181,186,191,196,201,206],{"type":38,"tag":57,"props":86,"children":87},{},[88],{"type":38,"tag":72,"props":89,"children":90},{},[91],{"type":38,"tag":76,"props":92,"children":93},{},[94],{"type":43,"value":95},"Scalar type declarations",{"type":38,"tag":57,"props":97,"children":98},{},[99],{"type":38,"tag":72,"props":100,"children":101},{},[102],{"type":38,"tag":76,"props":103,"children":104},{},[105],{"type":43,"value":106},"Return type declarations",{"type":38,"tag":57,"props":108,"children":109},{},[110],{"type":38,"tag":72,"props":111,"children":112},{},[113],{"type":38,"tag":76,"props":114,"children":115},{},[116],{"type":43,"value":117},"Null coalescing operator",{"type":38,"tag":57,"props":119,"children":120},{},[121],{"type":38,"tag":72,"props":122,"children":123},{},[124],{"type":38,"tag":76,"props":125,"children":126},{},[127],{"type":43,"value":128},"Spaceship operator",{"type":38,"tag":57,"props":130,"children":131},{},[132],{"type":38,"tag":72,"props":133,"children":134},{},[135],{"type":38,"tag":76,"props":136,"children":137},{},[138],{"type":43,"value":139},"Constant arrays using define()",{"type":38,"tag":57,"props":141,"children":142},{},[143],{"type":38,"tag":72,"props":144,"children":145},{},[146],{"type":38,"tag":76,"props":147,"children":148},{},[149],{"type":43,"value":150},"Anonymous classes",{"type":38,"tag":57,"props":152,"children":153},{},[154],{"type":43,"value":155},"Unicode codepoint escape syntax",{"type":38,"tag":57,"props":157,"children":158},{},[159],{"type":43,"value":160},"Closure::call()",{"type":38,"tag":57,"props":162,"children":163},{},[164],{"type":43,"value":165},"Filtered unserialize()",{"type":38,"tag":57,"props":167,"children":168},{},[169],{"type":43,"value":170},"IntlChar",{"type":38,"tag":57,"props":172,"children":173},{},[174],{"type":43,"value":175},"Expectations",{"type":38,"tag":57,"props":177,"children":178},{},[179],{"type":43,"value":180},"Group use declarations",{"type":38,"tag":57,"props":182,"children":183},{},[184],{"type":43,"value":185},"Generator Return Expressions",{"type":38,"tag":57,"props":187,"children":188},{},[189],{"type":43,"value":190},"Generator delegation",{"type":38,"tag":57,"props":192,"children":193},{},[194],{"type":43,"value":195},"Integer division with intdiv()",{"type":38,"tag":57,"props":197,"children":198},{},[199],{"type":43,"value":200},"Session options",{"type":38,"tag":57,"props":202,"children":203},{},[204],{"type":43,"value":205},"preg_replace_callback_array()",{"type":38,"tag":57,"props":207,"children":208},{},[209],{"type":43,"value":210},"CSPRNG Functions",{"type":38,"tag":46,"props":212,"children":214},{"id":213},"what-were-the-new-features-of-php-72",[215],{"type":43,"value":216},"What were the new features of PHP 7.2?",{"type":38,"tag":218,"props":219,"children":221},"h6",{"id":220},"released-30-nov-2017",[222],{"type":43,"value":223},"Released: 30 Nov 2017",{"type":38,"tag":53,"props":225,"children":226},{},[227],{"type":38,"tag":57,"props":228,"children":229},{},[230,237],{"type":38,"tag":72,"props":231,"children":232},{},[233],{"type":38,"tag":76,"props":234,"children":235},{},[236],{"type":43,"value":80},{"type":38,"tag":82,"props":238,"children":239},{},[240,268,279,302,325],{"type":38,"tag":57,"props":241,"children":242},{},[243,251],{"type":38,"tag":72,"props":244,"children":245},{},[246],{"type":38,"tag":76,"props":247,"children":248},{},[249],{"type":43,"value":250},"New object type hinting",{"type":38,"tag":53,"props":252,"children":253},{},[254,259],{"type":38,"tag":57,"props":255,"children":256},{},[257],{"type":43,"value":258},"Scalar type hint was introduced in PHP 7.0",{"type":38,"tag":57,"props":260,"children":261},{},[262],{"type":38,"tag":61,"props":263,"children":266},{"href":264,"rel":265},"https://wiki.php.net/rfc/object-typehint",[65],[267],{"type":43,"value":264},{"type":38,"tag":57,"props":269,"children":270},{},[271],{"type":38,"tag":72,"props":272,"children":273},{},[274],{"type":38,"tag":76,"props":275,"children":276},{},[277],{"type":43,"value":278},"Parameter type widening",{"type":38,"tag":57,"props":280,"children":281},{},[282,290],{"type":38,"tag":72,"props":283,"children":284},{},[285],{"type":38,"tag":76,"props":286,"children":287},{},[288],{"type":43,"value":289},"Abstract method overriding",{"type":38,"tag":53,"props":291,"children":292},{},[293],{"type":38,"tag":57,"props":294,"children":295},{},[296],{"type":38,"tag":61,"props":297,"children":300},{"href":298,"rel":299},"https://wiki.php.net/rfc/allow-abstract-function-override",[65],[301],{"type":43,"value":298},{"type":38,"tag":57,"props":303,"children":304},{},[305,313],{"type":38,"tag":72,"props":306,"children":307},{},[308],{"type":38,"tag":76,"props":309,"children":310},{},[311],{"type":43,"value":312},"Trailing comma in list syntax",{"type":38,"tag":53,"props":314,"children":315},{},[316],{"type":38,"tag":57,"props":317,"children":318},{},[319],{"type":38,"tag":61,"props":320,"children":323},{"href":321,"rel":322},"https://gist.github.com/marcioAlmada/75f8f1d47da5dcac2e57",[65],[324],{"type":43,"value":321},{"type":38,"tag":57,"props":326,"children":327},{},[328],{"type":43,"value":329},"New Sodium extension",{"type":38,"tag":46,"props":331,"children":333},{"id":332},"what-are-the-new-features-of-php-73",[334],{"type":43,"value":335},"What are the new features of PHP 7.3?",{"type":38,"tag":218,"props":337,"children":339},{"id":338},"released-06-dec-2018",[340],{"type":43,"value":341},"Released: 06 Dec 2018",{"type":38,"tag":53,"props":343,"children":344},{},[345],{"type":38,"tag":57,"props":346,"children":347},{},[348,355],{"type":38,"tag":72,"props":349,"children":350},{},[351],{"type":38,"tag":76,"props":352,"children":353},{},[354],{"type":43,"value":80},{"type":38,"tag":82,"props":356,"children":357},{},[358,363,368],{"type":38,"tag":57,"props":359,"children":360},{},[361],{"type":43,"value":362},"Multibyte string functions",{"type":38,"tag":57,"props":364,"children":365},{},[366],{"type":43,"value":367},"Argon2 password hash enhancements",{"type":38,"tag":57,"props":369,"children":370},{},[371,373],{"type":43,"value":372},"More flexible heredoc and nowdoc syntaxes\n",{"type":38,"tag":53,"props":374,"children":375},{},[376],{"type":38,"tag":57,"props":377,"children":378},{},[379],{"type":38,"tag":61,"props":380,"children":383},{"href":381,"rel":382},"https://laravel-news.com/flexible-heredoc-and-nowdoc-coming-to-php-7-3",[65],[384],{"type":43,"value":381},{"type":38,"tag":46,"props":386,"children":388},{"id":387},"what-are-the-new-features-of-php-74",[389],{"type":43,"value":390},"What are the new features of PHP 7.4?",{"type":38,"tag":218,"props":392,"children":394},{"id":393},"released-28-nov-2019",[395],{"type":43,"value":396},"Released: 28 Nov 2019",{"type":38,"tag":53,"props":398,"children":399},{},[400],{"type":38,"tag":57,"props":401,"children":402},{},[403,410],{"type":38,"tag":72,"props":404,"children":405},{},[406],{"type":38,"tag":76,"props":407,"children":408},{},[409],{"type":43,"value":80},{"type":38,"tag":82,"props":411,"children":412},{},[413,434,439,444,449,454,459],{"type":38,"tag":57,"props":414,"children":415},{},[416,422],{"type":38,"tag":61,"props":417,"children":419},{"href":418},"/blog-posts/what-is-a-closure-in-computer-programming",[420],{"type":43,"value":421},"Arrow functions for cleaner one-liner functions",{"type":38,"tag":53,"props":423,"children":424},{},[425],{"type":38,"tag":57,"props":426,"children":427},{},[428],{"type":38,"tag":61,"props":429,"children":432},{"href":430,"rel":431},"https://stitcher.io/blog/short-closures-in-php",[65],[433],{"type":43,"value":430},{"type":38,"tag":57,"props":435,"children":436},{},[437],{"type":43,"value":438},"Preloading to improve performance",{"type":38,"tag":57,"props":440,"children":441},{},[442],{"type":43,"value":443},"Support for typed properties",{"type":38,"tag":57,"props":445,"children":446},{},[447],{"type":43,"value":448},"Custom object serialization",{"type":38,"tag":57,"props":450,"children":451},{},[452],{"type":43,"value":453},"Unpacking inside arrays",{"type":38,"tag":57,"props":455,"children":456},{},[457],{"type":43,"value":458},"Weak references",{"type":38,"tag":57,"props":460,"children":461},{},[462],{"type":43,"value":463},"Improved type variance",{"type":38,"tag":46,"props":465,"children":467},{"id":466},"what-are-the-new-features-of-php-80",[468],{"type":43,"value":469},"What are the new features of PHP 8.0?",{"type":38,"tag":218,"props":471,"children":473},{"id":472},"release-nov-26-2020",[474],{"type":43,"value":475},"Release: Nov 26 2020",{"type":38,"tag":53,"props":477,"children":478},{},[479],{"type":38,"tag":57,"props":480,"children":481},{},[482,490],{"type":38,"tag":72,"props":483,"children":484},{},[485],{"type":38,"tag":76,"props":486,"children":487},{},[488],{"type":43,"value":489},"New Features will include:",{"type":38,"tag":53,"props":491,"children":492},{},[493,498,503,508,513,518,523,528,533,538,543,548,553,567,572,577,582,587,636,641,652,657,662],{"type":38,"tag":57,"props":494,"children":495},{},[496],{"type":43,"value":497},"JIT Compiler",{"type":38,"tag":57,"props":499,"children":500},{},[501],{"type":43,"value":502},"Union Types",{"type":38,"tag":57,"props":504,"children":505},{},[506],{"type":43,"value":507},"The null safe operator",{"type":38,"tag":57,"props":509,"children":510},{},[511],{"type":43,"value":512},"Named arguments",{"type":38,"tag":57,"props":514,"children":515},{},[516],{"type":43,"value":517},"Attributes",{"type":38,"tag":57,"props":519,"children":520},{},[521],{"type":43,"value":522},"Match expression",{"type":38,"tag":57,"props":524,"children":525},{},[526],{"type":43,"value":527},"Constructor property promotion",{"type":38,"tag":57,"props":529,"children":530},{},[531],{"type":43,"value":532},"New static return type",{"type":38,"tag":57,"props":534,"children":535},{},[536],{"type":43,"value":537},"New mixed type",{"type":38,"tag":57,"props":539,"children":540},{},[541],{"type":43,"value":542},"Throw expression",{"type":38,"tag":57,"props":544,"children":545},{},[546],{"type":43,"value":547},"Inheritance with private methods",{"type":38,"tag":57,"props":549,"children":550},{},[551],{"type":43,"value":552},"Weak maps",{"type":38,"tag":57,"props":554,"children":555},{},[556,558,565],{"type":43,"value":557},"Allowing ",{"type":38,"tag":559,"props":560,"children":562},"code",{"className":561},[],[563],{"type":43,"value":564},"::class",{"type":43,"value":566}," on objects",{"type":38,"tag":57,"props":568,"children":569},{},[570],{"type":43,"value":571},"Non-capturing catches",{"type":38,"tag":57,"props":573,"children":574},{},[575],{"type":43,"value":576},"Trailing comma in parameter lists",{"type":38,"tag":57,"props":578,"children":579},{},[580],{"type":43,"value":581},"New Stringable interface",{"type":38,"tag":57,"props":583,"children":584},{},[585],{"type":43,"value":586},"Create DateTime objects from the interface",{"type":38,"tag":57,"props":588,"children":589},{},[590,592],{"type":43,"value":591},"New:",{"type":38,"tag":53,"props":593,"children":594},{},[595,600,611,616,626],{"type":38,"tag":57,"props":596,"children":597},{},[598],{"type":43,"value":599},"str_contains() function",{"type":38,"tag":57,"props":601,"children":602},{},[603,609],{"type":38,"tag":559,"props":604,"children":606},{"className":605},[],[607],{"type":43,"value":608},"fdiv()",{"type":43,"value":610}," function",{"type":38,"tag":57,"props":612,"children":613},{},[614],{"type":43,"value":615},"str_starts_with() and str_ends_with() functions",{"type":38,"tag":57,"props":617,"children":618},{},[619,625],{"type":38,"tag":559,"props":620,"children":622},{"className":621},[],[623],{"type":43,"value":624},"get_debug_type()",{"type":43,"value":610},{"type":38,"tag":57,"props":627,"children":628},{},[629,635],{"type":38,"tag":559,"props":630,"children":632},{"className":631},[],[633],{"type":43,"value":634},"get_resource_id()",{"type":43,"value":610},{"type":38,"tag":57,"props":637,"children":638},{},[639],{"type":43,"value":640},"Abstract methods in traits improvements ",{"type":38,"tag":57,"props":642,"children":643},{},[644,646],{"type":43,"value":645},"Object implementation of ",{"type":38,"tag":559,"props":647,"children":649},{"className":648},[],[650],{"type":43,"value":651},"token_get_all()",{"type":38,"tag":57,"props":653,"children":654},{},[655],{"type":43,"value":656},"Variable syntax tweaks",{"type":38,"tag":57,"props":658,"children":659},{},[660],{"type":43,"value":661},"Type annotations for internal functions",{"type":38,"tag":57,"props":663,"children":664},{},[665,671],{"type":38,"tag":559,"props":666,"children":668},{"className":667},[],[669],{"type":43,"value":670},"ext-json",{"type":43,"value":672}," always available",{"type":38,"tag":46,"props":674,"children":676},{"id":675},"conclusion-closing",[677],{"type":43,"value":678},"Conclusion & Closing",{"type":38,"tag":39,"props":680,"children":681},{},[682],{"type":43,"value":683},"As it looks on the list above, PHP has evolved a lot in the past years. Developers implemented many great features already in the version of 7.0, which was much faster than PHP 5.6 because of the new PHP – Next-Gen engine. In the following posts, I will focus on the new features of PHP 8.0.",{"title":8,"searchDepth":685,"depth":685,"links":686},2,[687,688,689,690,691,692],{"id":48,"depth":685,"text":51},{"id":213,"depth":685,"text":216},{"id":332,"depth":685,"text":335},{"id":387,"depth":685,"text":390},{"id":466,"depth":685,"text":469},{"id":675,"depth":685,"text":678},"markdown","content:blog-posts:0-new-features-of-the-main-php-versions-from-7-to-8.md","content","blog-posts/0-new-features-of-the-main-php-versions-from-7-to-8.md","blog-posts/0-new-features-of-the-main-php-versions-from-7-to-8","md",{"_path":700,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":701,"description":702,"seoTitle":703,"seoDescription":704,"keywords":705,"image":710,"alt":711,"ogImage":710,"tags":712,"categories":715,"published":25,"author":26,"link":700,"date":716,"sitemap":717,"body":721,"_type":693,"_id":1029,"_source":695,"_file":1030,"_stem":1031,"_extension":698},"/blog-posts/1-how-to-start-playing-with-vuejs","[1] How to start playing with Vue.js","A beginner-friendly guide to starting with Vue.js: installation setup and first steps.","How to start with Vue.js","Learn how to start playing with Vue.js, covering installation, setup, and beginner-friendly steps to build your first project.",[706,707,708,709],"Vue.js for beginners","Vue.js setup guide","Getting started with Vue.js","Frontend frameworks","/images/blog-posts/vue-js-768x432.jpeg.webp","VueJS3",[21,713,714],"front-end","vuejs3",[21,713,714],"2022-02-18",{"loc":718,"lastmod":716,"changefreq":30,"priority":31,"images":719},"/blog-posts/1-how-to-start-playing-with-vuejs/",[720],{"loc":710},{"type":35,"children":722,"toc":1019},[723,736,745,750,759,764,773,789,798,806,814,822,830,856,862,875,883,891,897,910,919,937,945,953,962,967,1005,1009],{"type":38,"tag":39,"props":724,"children":725},{},[726,728,734],{"type":43,"value":727},"VueJS is an essential part of ",{"type":38,"tag":61,"props":729,"children":731},{"href":730},"/blog-posts/what-do-i-need-to-know-about-inertiajs/",[732],{"type":43,"value":733},"InertiaJS",{"type":43,"value":735}," when we use the Vue adapter of Inertia. Working with this software stack, we need to know VueJS too. This note will be the first about the VueJS Framework.",{"type":38,"tag":46,"props":737,"children":739},{"id":738},"origin-of-vuejs",[740],{"type":38,"tag":72,"props":741,"children":742},{},[743],{"type":43,"value":744},"Origin of VueJS",{"type":38,"tag":39,"props":746,"children":747},{},[748],{"type":43,"value":749},"Vue was implemented in 2014 by Even You. Even used to be an Angular developer.",{"type":38,"tag":46,"props":751,"children":753},{"id":752},"what-is-vuejs",[754],{"type":38,"tag":72,"props":755,"children":756},{},[757],{"type":43,"value":758},"What is VueJS?",{"type":38,"tag":39,"props":760,"children":761},{},[762],{"type":43,"value":763},"Vue (pronounce /VJU/) is a progressive framework for building user interfaces and client-side applications. By default, Vue components generate and manipulate HTML DOM.",{"type":38,"tag":46,"props":765,"children":767},{"id":766},"how-we-can-initialize-a-vuejs-in-the-simplest-way",[768],{"type":38,"tag":72,"props":769,"children":770},{},[771],{"type":43,"value":772},"How we can initialize a VueJS in the simplest way?",{"type":38,"tag":53,"props":774,"children":775},{},[776],{"type":38,"tag":57,"props":777,"children":778},{},[779,781],{"type":43,"value":780},"Import the main Vue script in the first place\n",{"type":38,"tag":53,"props":782,"children":783},{},[784],{"type":38,"tag":57,"props":785,"children":786},{},[787],{"type":43,"value":788},"(note: The remaining JS files should go lower than the main Vue JS.",{"type":38,"tag":790,"props":791,"children":793},"pre",{"code":792},"\u003Cscript src=\"https://unpkg.com/vue@next\">\u003C/script>\n\u003Cscript src=\"app.js\">\u003C/script>\n",[794],{"type":38,"tag":559,"props":795,"children":796},{"__ignoreMap":8},[797],{"type":43,"value":792},{"type":38,"tag":53,"props":799,"children":800},{},[801],{"type":38,"tag":57,"props":802,"children":803},{},[804],{"type":43,"value":805},"Define the main content part with an id attribute where Vue should load all the contents",{"type":38,"tag":790,"props":807,"children":809},{"code":808},"\u003Cdiv id=\"app\">\u003C/div>\n",[810],{"type":38,"tag":559,"props":811,"children":812},{"__ignoreMap":8},[813],{"type":43,"value":808},{"type":38,"tag":53,"props":815,"children":816},{},[817],{"type":38,"tag":57,"props":818,"children":819},{},[820],{"type":43,"value":821},"Define in the app.js what element it will control",{"type":38,"tag":790,"props":823,"children":825},{"code":824},"Vue.createApp({}).mount('#app')\n",[826],{"type":38,"tag":559,"props":827,"children":828},{"__ignoreMap":8},[829],{"type":43,"value":824},{"type":38,"tag":53,"props":831,"children":832},{},[833,846,851],{"type":38,"tag":57,"props":834,"children":835},{},[836,838],{"type":43,"value":837},"The above line creates a Vue app with an empty object.\n",{"type":38,"tag":53,"props":839,"children":840},{},[841],{"type":38,"tag":57,"props":842,"children":843},{},[844],{"type":43,"value":845},"We can customize Vue behavior in that object with different options",{"type":38,"tag":57,"props":847,"children":848},{},[849],{"type":43,"value":850},"We tell Vue which HTML element should be used as mounting point of tha app.",{"type":38,"tag":57,"props":852,"children":853},{},[854],{"type":43,"value":855},"This mounting point will be the root of the App if we check it in the Vue Devtools",{"type":38,"tag":46,"props":857,"children":859},{"id":858},"how-can-we-initialize-a-vue-app-with-data",[860],{"type":43,"value":861},"How can we initialize a Vue App with Data?",{"type":38,"tag":53,"props":863,"children":864},{},[865,870],{"type":38,"tag":57,"props":866,"children":867},{},[868],{"type":43,"value":869},"During the initialization Vue search for a data function for component data",{"type":38,"tag":57,"props":871,"children":872},{},[873],{"type":43,"value":874},"We can define here: String, Number, Boolean, Object, Array.",{"type":38,"tag":790,"props":876,"children":878},{"code":877},"Vue.createApp({\n   data(){\n       return {\n          firstname: 'John'\n       }\n   }\n}).mount('#app')\n",[879],{"type":38,"tag":559,"props":880,"children":881},{"__ignoreMap":8},[882],{"type":43,"value":877},{"type":38,"tag":790,"props":884,"children":886},{"code":885},"\u003Cdiv id=\"app\">{{firstname}}\u003C/div>\n",[887],{"type":38,"tag":559,"props":888,"children":889},{"__ignoreMap":8},[890],{"type":43,"value":885},{"type":38,"tag":46,"props":892,"children":894},{"id":893},"can-we-have-multiple-instances-of-the-root-app",[895],{"type":43,"value":896},"Can we have multiple instances of the root app?",{"type":38,"tag":53,"props":898,"children":899},{},[900,905],{"type":38,"tag":57,"props":901,"children":902},{},[903],{"type":43,"value":904},"Yes. But we can not tie it to class just to id with different names.",{"type":38,"tag":57,"props":906,"children":907},{},[908],{"type":43,"value":909},"Anyway, it is not a common approach to do that.",{"type":38,"tag":46,"props":911,"children":913},{"id":912},"what-is-vue-proxy",[914],{"type":38,"tag":72,"props":915,"children":916},{},[917],{"type":43,"value":918},"What is Vue Proxy?",{"type":38,"tag":53,"props":920,"children":921},{},[922,927,932],{"type":38,"tag":57,"props":923,"children":924},{},[925],{"type":43,"value":926},"Vue has a bunch of getters and setters under the hood. These getters and setters help us to access and change data.",{"type":38,"tag":57,"props":928,"children":929},{},[930],{"type":43,"value":931},"Without this proxy, we should type longer code to access and change data.",{"type":38,"tag":57,"props":933,"children":934},{},[935],{"type":43,"value":936},"In the codes below, you can see the difference between accessing data without and with proxy lower.",{"type":38,"tag":790,"props":938,"children":940},{"code":939},"vm.$data.firstname\n",[941],{"type":38,"tag":559,"props":942,"children":943},{"__ignoreMap":8},[944],{"type":43,"value":939},{"type":38,"tag":790,"props":946,"children":948},{"code":947},"vm.firstname\n",[949],{"type":38,"tag":559,"props":950,"children":951},{"__ignoreMap":8},[952],{"type":43,"value":947},{"type":38,"tag":46,"props":954,"children":956},{"id":955},"what-options-do-we-have-to-customize-vue-app-behavior",[957],{"type":38,"tag":72,"props":958,"children":959},{},[960],{"type":43,"value":961},"What options do we have to customize Vue App behavior?",{"type":38,"tag":39,"props":963,"children":964},{},[965],{"type":43,"value":966},"The first parameter of the 'vue.createApp' method is an object. This object can have the following properties that define the behavior of the main app or any other component in the relevant component code. I will go through these in future posts.",{"type":38,"tag":53,"props":968,"children":969},{},[970,975,980,985,990,995,1000],{"type":38,"tag":57,"props":971,"children":972},{},[973],{"type":43,"value":974},"data",{"type":38,"tag":57,"props":976,"children":977},{},[978],{"type":43,"value":979},"props",{"type":38,"tag":57,"props":981,"children":982},{},[983],{"type":43,"value":984},"computed properties",{"type":38,"tag":57,"props":986,"children":987},{},[988],{"type":43,"value":989},"methods",{"type":38,"tag":57,"props":991,"children":992},{},[993],{"type":43,"value":994},"watch",{"type":38,"tag":57,"props":996,"children":997},{},[998],{"type":43,"value":999},"emits",{"type":38,"tag":57,"props":1001,"children":1002},{},[1003],{"type":43,"value":1004},"expose",{"type":38,"tag":46,"props":1006,"children":1007},{"id":675},[1008],{"type":43,"value":678},{"type":38,"tag":39,"props":1010,"children":1011},{},[1012,1017],{"type":38,"tag":61,"props":1013,"children":1014},{"href":718},[1015],{"type":43,"value":1016},"This post",{"type":43,"value":1018}," is just the first step to have at least a local playground have some basic idea about Vue. The options above and other important info will come soon ...",{"title":8,"searchDepth":685,"depth":685,"links":1020},[1021,1022,1023,1024,1025,1026,1027,1028],{"id":738,"depth":685,"text":744},{"id":752,"depth":685,"text":758},{"id":766,"depth":685,"text":772},{"id":858,"depth":685,"text":861},{"id":893,"depth":685,"text":896},{"id":912,"depth":685,"text":918},{"id":955,"depth":685,"text":961},{"id":675,"depth":685,"text":678},"content:blog-posts:1-how-to-start-playing-with-vuejs.md","blog-posts/1-how-to-start-playing-with-vuejs.md","blog-posts/1-how-to-start-playing-with-vuejs",{"_path":1033,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1034,"description":1035,"seoTitle":1036,"seoDescription":1037,"keywords":1038,"image":18,"alt":8,"ogImage":18,"tags":1043,"categories":1044,"published":25,"author":26,"link":1033,"date":1045,"sitemap":1046,"body":1050,"_type":693,"_id":1254,"_source":695,"_file":1255,"_stem":1256,"_extension":698},"/blog-posts/1-jit-union-types-null-safe-operator-as-new-php8-features","[1] JIT, union types, and null-safe operator as new PHP 8 features","Deep dive into PHP 8's JIT compiler, union types, and null-safe operator with examples.","PHP 8 JIT, Union Types & Null-Safe Operator","Discover PHP 8's new features, including the JIT compiler, union types, and null-safe operator, with practical examples and insights.",[1039,1040,1041,1042],"PHP 8 JIT","Union types PHP 8","Null-safe operator in PHP 8","PHP 8 tutorials",[21,22,23],[21,22,23],"2022-03-30",{"loc":1047,"lastmod":1045,"changefreq":30,"priority":31,"images":1048},"/blog-posts/1-jit-union-types-null-safe-operator-as-new-php8-features/",[1049],{"loc":18},{"type":35,"children":1051,"toc":1247},[1052,1064,1070,1075,1080,1086,1099,1105,1113,1192,1198,1212,1220,1224,1238,1242],{"type":38,"tag":39,"props":1053,"children":1054},{},[1055,1057,1062],{"type":43,"value":1056},"In this series, I want to go into the details of PHP8.0's New Features. PHP8.0's release date was Nov 26, 2020. Because of this, it has brought several new features into our life. JIT Compiler, Union Types, Null safe operator are just a few examples from the list. You can see the list of features ",{"type":38,"tag":61,"props":1058,"children":1059},{"href":5},[1060],{"type":43,"value":1061},"here",{"type":43,"value":1063},".",{"type":38,"tag":46,"props":1065,"children":1067},{"id":1066},"jit-compiler-in-php8",[1068],{"type":43,"value":1069},"JIT Compiler in PHP8",{"type":38,"tag":39,"props":1071,"children":1072},{},[1073],{"type":43,"value":1074},"JIT is a \"Just In Time\" compiler for PHP 8.0. The purpose of the JIT Compiler is to compile parts of the code at runtime. We could think about this as a \"cached version\" of the interpreted code. This code will be created at runtime. The positive effect of the compiler depends on where we want to use it. If our task contains many re-executing parts like fractal generation, then it has a huge performance boost on our application. Otherwise, it is hardly measurable.",{"type":38,"tag":39,"props":1076,"children":1077},{},[1078],{"type":43,"value":1079},"Unfortunately, web development does not have too many re-executing code parts. So the benefit of this feature is not that relevant from the web-development point of view.",{"type":38,"tag":46,"props":1081,"children":1083},{"id":1082},"how-does-jit-compiler-work",[1084],{"type":43,"value":1085},"How does JIT Compiler work?",{"type":38,"tag":39,"props":1087,"children":1088},{},[1089,1091],{"type":43,"value":1090},"In short: The JIT compiler has a detection phase. During this process, it detects the re-executed parts of your code and marks them as \"warm\" or \"hot\" depending on the frequency. The hot parts will be compiled into an optimized machine code. This optimized code will run on the fly instead of the real code. ",{"type":38,"tag":61,"props":1092,"children":1096},{"href":1093,":target":1094,"rel":1095},"https://stitcher.io/blog/php-jit","_blank",[65],[1097],{"type":43,"value":1098},"You can read more about the topic here.",{"type":38,"tag":46,"props":1100,"children":1102},{"id":1101},"union-types-in-php8",[1103],{"type":43,"value":1104},"Union Types in PHP8:",{"type":38,"tag":790,"props":1106,"children":1108},{"code":1107},"class Revenue {\n    private int|float $revenue;\n\n    public function setRevenue(int|float $number): void {\n        $this->revenue = $number;\n    }\n\n    public function getRevenue(): int|float {\n        return $this->revenue;\n    }\n}\n",[1109],{"type":38,"tag":559,"props":1110,"children":1111},{"__ignoreMap":8},[1112],{"type":43,"value":1107},{"type":38,"tag":39,"props":1114,"children":1115},{},[1116,1118,1124,1126,1132,1134,1140,1142,1148,1150,1155,1156,1161,1163,1168,1170,1176,1178,1183,1185,1191],{"type":43,"value":1117},"Before PHP version 8.0, you could only declare a single type for properties, parameters, and return types. PHP 7.1 and newer versions have nullable types, which means you can declare the type to be ",{"type":38,"tag":559,"props":1119,"children":1121},{"className":1120},[],[1122],{"type":43,"value":1123},"null",{"type":43,"value":1125}," with a type declaration similar to ",{"type":38,"tag":559,"props":1127,"children":1129},{"className":1128},[],[1130],{"type":43,"value":1131},"?string",{"type":43,"value":1133},". So you can declare a type as nullable by prefixing a ",{"type":38,"tag":559,"props":1135,"children":1137},{"className":1136},[],[1138],{"type":43,"value":1139},"?",{"type":43,"value":1141}," sign to the type. For example, if a certain property can be a ",{"type":38,"tag":559,"props":1143,"children":1145},{"className":1144},[],[1146],{"type":43,"value":1147},"string",{"type":43,"value":1149}," ",{"type":38,"tag":76,"props":1151,"children":1152},{},[1153],{"type":43,"value":1154},"or",{"type":43,"value":1149},{"type":38,"tag":559,"props":1157,"children":1159},{"className":1158},[],[1160],{"type":43,"value":1123},{"type":43,"value":1162},", you can declare it as ",{"type":38,"tag":559,"props":1164,"children":1166},{"className":1165},[],[1167],{"type":43,"value":1131},{"type":43,"value":1169},". With PHP 8.0 Union Types ",{"type":38,"tag":559,"props":1171,"children":1173},{"className":1172},[],[1174],{"type":43,"value":1175},"string|null",{"type":43,"value":1177}," will be functionally equivalent to ",{"type":38,"tag":559,"props":1179,"children":1181},{"className":1180},[],[1182],{"type":43,"value":1131},{"type":43,"value":1184},". You can read more ",{"type":38,"tag":61,"props":1186,"children":1189},{"href":1187,":target":1094,"rel":1188},"https://php.watch/versions/8.0/union-types",[65],[1190],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":1193,"children":1195},{"id":1194},"and-lastly-php8s-null-safe-operator",[1196],{"type":43,"value":1197},"And lastly PHP8's Null Safe Operator",{"type":38,"tag":39,"props":1199,"children":1200},{},[1201,1203,1210],{"type":43,"value":1202},"The ",{"type":38,"tag":61,"props":1204,"children":1207},{"href":1205,":target":1094,"rel":1206},"https://www.phptutorial.net/php-tutorial/php-null-coalescing-operator/",[65],[1208],{"type":43,"value":1209},"null coalescing operator",{"type":43,"value":1211}," has a disadvantage. It does not work on method calls. With this feature we can do things like this:",{"type":38,"tag":790,"props":1213,"children":1215},{"code":1214},"$dateAsString = $booking->getStartDate()?->asDateTimeString();\n",[1216],{"type":38,"tag":559,"props":1217,"children":1218},{"__ignoreMap":8},[1219],{"type":43,"value":1214},{"type":38,"tag":1221,"props":1222,"children":1223},"hr",{},[],{"type":38,"tag":39,"props":1225,"children":1226},{},[1227,1229,1236],{"type":43,"value":1228},"For a bit more info you can check this ",{"type":38,"tag":61,"props":1230,"children":1233},{"href":1231,":target":1094,"rel":1232},"https://stitcher.io/blog/php-8-nullsafe-operator",[65],[1234],{"type":43,"value":1235},"link",{"type":43,"value":1237}," too.",{"type":38,"tag":46,"props":1239,"children":1240},{"id":675},[1241],{"type":43,"value":678},{"type":38,"tag":39,"props":1243,"children":1244},{},[1245],{"type":43,"value":1246},"The previous post was a retrospective about the introduced features of the previous PHP versions. Some of these features paved the way for PHP8 new features in the latest main version. The next couple of posts will focus on these features.",{"title":8,"searchDepth":685,"depth":685,"links":1248},[1249,1250,1251,1252,1253],{"id":1066,"depth":685,"text":1069},{"id":1082,"depth":685,"text":1085},{"id":1101,"depth":685,"text":1104},{"id":1194,"depth":685,"text":1197},{"id":675,"depth":685,"text":678},"content:blog-posts:1-jit-union-types-null-safe-operator-as-new-php8-features.md","blog-posts/1-jit-union-types-null-safe-operator-as-new-php8-features.md","blog-posts/1-jit-union-types-null-safe-operator-as-new-php8-features",{"_path":1258,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1259,"description":1260,"seoTitle":1261,"seoDescription":1262,"keywords":1263,"image":710,"alt":1268,"ogImage":710,"tags":1269,"categories":1270,"published":25,"author":26,"link":1258,"date":1271,"sitemap":1272,"body":1275,"_type":693,"_id":1605,"_source":695,"_file":1606,"_stem":1607,"_extension":698},"/blog-posts/2-interpolations-directives-and-components-in-vuejs","[2] Interpolations, directives, and components in Vue.js","Learn how to use interpolations, directives, and components with Vue.js for dynamic and reactive applications.","Vue.js Interpolations, Directives, and Components","Master Vue.js interpolations, directives, and components to create dynamic, reactive, and modular web applications with ease.",[1264,1265,1266,1267],"Vue.js interpolations","vue components","vue directives guide","dynamic applications in Vue.js","Inertia JS logo",[21,713,714],[21,713,714],"2022-02-22",{"loc":1258,"lastmod":1271,"changefreq":30,"priority":31,"images":1273},[1274],{"loc":710},{"type":35,"children":1276,"toc":1598},[1277,1282,1288,1308,1336,1341,1349,1357,1360,1366,1371,1377,1382,1525,1531,1536,1541,1546,1551,1556,1561,1566,1571,1577],{"type":38,"tag":39,"props":1278,"children":1279},{},[1280],{"type":43,"value":1281},"Interpolations, Directives, and Components are VueJS terms. Directives and Components are also essential building blocks to build beautiful Front-End interfaces. This topic tries to cover all these VueJS terms and concepts briefly.",{"type":38,"tag":46,"props":1283,"children":1285},{"id":1284},"declarative-rendering",[1286],{"type":43,"value":1287},"Declarative rendering:",{"type":38,"tag":39,"props":1289,"children":1290},{},[1291,1293,1300,1302,1306],{"type":43,"value":1292},"Let's focus on the difference between the declarative and imperative conceptions. You don't have to say the step-by-step way what you want in a ",{"type":38,"tag":61,"props":1294,"children":1297},{"href":1295,"rel":1296},"https://www.freecodecamp.org/news/imperative-vs-declarative-programming-difference/",[65],[1298],{"type":43,"value":1299},"declarative programming language",{"type":43,"value":1301},". So the question in a declarative world would be: \"What would you like to achieve?\" The proper answer is \"I would like to be a Vue master\"!",{"type":38,"tag":1303,"props":1304,"children":1305},"br",{},[],{"type":43,"value":1307},"\nIn an imperative world, you will have to say how to get what you want in a step-by-step way. So the question would be: \"How would you like to achieve?\" The correct answers:",{"type":38,"tag":82,"props":1309,"children":1310},{},[1311],{"type":38,"tag":57,"props":1312,"children":1313},{},[1314,1316,1319,1321,1324,1326,1329,1331,1334],{"type":43,"value":1315},"I want to learn the basics first.",{"type":38,"tag":1303,"props":1317,"children":1318},{},[],{"type":43,"value":1320},"\na. Read the introduction section.",{"type":38,"tag":1303,"props":1322,"children":1323},{},[],{"type":43,"value":1325},"\nb. Write the Hello World.",{"type":38,"tag":1303,"props":1327,"children":1328},{},[],{"type":43,"value":1330},"\nc. Understand the central concepts.",{"type":38,"tag":1303,"props":1332,"children":1333},{},[],{"type":43,"value":1335},"\nd. etc.",{"type":38,"tag":39,"props":1337,"children":1338},{},[1339],{"type":43,"value":1340},"VueJS is a declarative framework. You need to define what you want to achieve.",{"type":38,"tag":790,"props":1342,"children":1344},{"code":1343},"\u003Cdiv id=\"app\">\n{{message}}\n\u003C/div>\n",[1345],{"type":38,"tag":559,"props":1346,"children":1347},{"__ignoreMap":8},[1348],{"type":43,"value":1343},{"type":38,"tag":790,"props":1350,"children":1352},{"code":1351},"const HelloVueApp = {\n  data() {\n    return {\n      message: 'Hello Vue!!'\n    }\n  }\n}\n\nVue.createApp(HelloVueApp).mount('#app')\n",[1353],{"type":38,"tag":559,"props":1354,"children":1355},{"__ignoreMap":8},[1356],{"type":43,"value":1351},{"type":38,"tag":1221,"props":1358,"children":1359},{},[],{"type":38,"tag":46,"props":1361,"children":1363},{"id":1362},"interpolations-in-vuejs",[1364],{"type":43,"value":1365},"Interpolations in VueJS",{"type":38,"tag":39,"props":1367,"children":1368},{},[1369],{"type":43,"value":1370},"We can talk about Interpolation when VueJS exchanges a property to its assigned value or when it evaluates an expression or returns the result of a function. All these operations are interpolations. If Vue found a pair of curly brackets in the template during the compilation phase, it would modify it at once. Interpolation doesn't depend on curly brackets. In the following example, we changed the curly brackets to a v-once attribute, and the output will be the same. You could say what magic! But in reality, it is just a directive. So we got the same result because we used a Directive.",{"type":38,"tag":46,"props":1372,"children":1374},{"id":1373},"directives-in-vuejs",[1375],{"type":43,"value":1376},"Directives in VueJS",{"type":38,"tag":39,"props":1378,"children":1379},{},[1380],{"type":43,"value":1381},"Well, Directives are an essential building block of VueJS. It is an attribute with a value that we declare on a starting tag of an HTML element. It has a 'v-' full notation and a shorter dot notation. The official term for the latter one is shorthand notation anyway. The other important thing we need to note is the syntax of the events. VueJS, similarly to the native JavaScript, contains events. We can invoke them, ( eg. 'v-on:click' ). The shorthand version of this is the (@click).",{"type":38,"tag":1383,"props":1384,"children":1385},"figure",{},[1386,1516],{"type":38,"tag":1387,"props":1388,"children":1389},"table",{},[1390],{"type":38,"tag":1391,"props":1392,"children":1393},"tbody",{},[1394,1413,1428,1443,1458,1473,1488,1503],{"type":38,"tag":1395,"props":1396,"children":1397},"tr",{},[1398,1407],{"type":38,"tag":1399,"props":1400,"children":1404},"td",{"className":1401,"dataAlign":1403},[1402],"has-text-align-center","center",[1405],{"type":43,"value":1406},"v-text",{"type":38,"tag":1399,"props":1408,"children":1410},{"className":1409,"dataAlign":1403},[1402],[1411],{"type":43,"value":1412},"v-model",{"type":38,"tag":1395,"props":1414,"children":1415},{},[1416,1422],{"type":38,"tag":1399,"props":1417,"children":1419},{"className":1418,"dataAlign":1403},[1402],[1420],{"type":43,"value":1421},"v-html",{"type":38,"tag":1399,"props":1423,"children":1425},{"className":1424,"dataAlign":1403},[1402],[1426],{"type":43,"value":1427},"v-slot",{"type":38,"tag":1395,"props":1429,"children":1430},{},[1431,1437],{"type":38,"tag":1399,"props":1432,"children":1434},{"className":1433,"dataAlign":1403},[1402],[1435],{"type":43,"value":1436},"v-show",{"type":38,"tag":1399,"props":1438,"children":1440},{"className":1439,"dataAlign":1403},[1402],[1441],{"type":43,"value":1442},"v-pre",{"type":38,"tag":1395,"props":1444,"children":1445},{},[1446,1452],{"type":38,"tag":1399,"props":1447,"children":1449},{"className":1448,"dataAlign":1403},[1402],[1450],{"type":43,"value":1451},"v-if",{"type":38,"tag":1399,"props":1453,"children":1455},{"className":1454,"dataAlign":1403},[1402],[1456],{"type":43,"value":1457},"v-cloak",{"type":38,"tag":1395,"props":1459,"children":1460},{},[1461,1467],{"type":38,"tag":1399,"props":1462,"children":1464},{"className":1463,"dataAlign":1403},[1402],[1465],{"type":43,"value":1466},"v-else",{"type":38,"tag":1399,"props":1468,"children":1470},{"className":1469,"dataAlign":1403},[1402],[1471],{"type":43,"value":1472},"v-once",{"type":38,"tag":1395,"props":1474,"children":1475},{},[1476,1482],{"type":38,"tag":1399,"props":1477,"children":1479},{"className":1478,"dataAlign":1403},[1402],[1480],{"type":43,"value":1481},"v-else-if",{"type":38,"tag":1399,"props":1483,"children":1485},{"className":1484,"dataAlign":1403},[1402],[1486],{"type":43,"value":1487},"v-memo",{"type":38,"tag":1395,"props":1489,"children":1490},{},[1491,1497],{"type":38,"tag":1399,"props":1492,"children":1494},{"className":1493,"dataAlign":1403},[1402],[1495],{"type":43,"value":1496},"v-for",{"type":38,"tag":1399,"props":1498,"children":1500},{"className":1499,"dataAlign":1403},[1402],[1501],{"type":43,"value":1502},"v-is",{"type":38,"tag":1395,"props":1504,"children":1505},{},[1506,1512],{"type":38,"tag":1399,"props":1507,"children":1509},{"className":1508,"dataAlign":1403},[1402],[1510],{"type":43,"value":1511},"v-bind",{"type":38,"tag":1399,"props":1513,"children":1515},{"className":1514,"dataAlign":1403},[1402],[],{"type":38,"tag":1517,"props":1518,"children":1519},"figcaption",{},[1520],{"type":38,"tag":39,"props":1521,"children":1522},{},[1523],{"type":43,"value":1524},"VueJS Directives",{"type":38,"tag":46,"props":1526,"children":1528},{"id":1527},"components-in-vuejs",[1529],{"type":43,"value":1530},"Components in VueJS",{"type":38,"tag":39,"props":1532,"children":1533},{},[1534],{"type":43,"value":1535},"VueJS components are reusable instances with a name. The main 'app' is also a component, but it is a root component, and it is not reusable. So this is an exception. We can modify a component behavior with optional parameters.",{"type":38,"tag":39,"props":1537,"children":1538},{},[1539],{"type":43,"value":1540},"We can use the following properties to modify a component behavior.",{"type":38,"tag":39,"props":1542,"children":1543},{},[1544],{"type":43,"value":1545},"The Data property is a function that returns the component data information. It can be String, Number, Boolean, Object, Array.",{"type":38,"tag":39,"props":1547,"children":1548},{},[1549],{"type":43,"value":1550},"Props are for the parent component data properties that the current child component is inherited. It can be an Array or Object type. If that is an Object, we can validate the inherited data property type.",{"type":38,"tag":39,"props":1552,"children":1553},{},[1554],{"type":43,"value":1555},"In the Computed block, we can create dynamic properties that need to meet certain criteria.",{"type":38,"tag":39,"props":1557,"children":1558},{},[1559],{"type":43,"value":1560},"Methods block is for functions that are callable from the component's template.",{"type":38,"tag":39,"props":1562,"children":1563},{},[1564],{"type":43,"value":1565},"We can use event listeners to detect dynamic property changes in the watch block. In case of objects changes, we need to use the deep watch.",{"type":38,"tag":39,"props":1567,"children":1568},{},[1569],{"type":43,"value":1570},"To notify the parent component about any modification of a property, we need to use the emit feature of VueJS.",{"type":38,"tag":46,"props":1572,"children":1574},{"id":1573},"conclusion-and-closing",[1575],{"type":43,"value":1576},"Conclusion and closing",{"type":38,"tag":39,"props":1578,"children":1579},{},[1580,1582,1587,1589,1596],{"type":43,"value":1581},"In the ",{"type":38,"tag":61,"props":1583,"children":1584},{"href":700},[1585],{"type":43,"value":1586},"previous post",{"type":43,"value":1588},", I wrote about a plain simple sandbox configuration. In this post, I have tried to dive into the main functionalities of ",{"type":38,"tag":61,"props":1590,"children":1593},{"href":1591,"rel":1592},"https://v3.vuejs.org/guide/introduction.html#what-is-vue-js",[65],[1594],{"type":43,"value":1595},"VueJS",{"type":43,"value":1597},". Although there are many things left, I covered a lot briefly.",{"title":8,"searchDepth":685,"depth":685,"links":1599},[1600,1601,1602,1603,1604],{"id":1284,"depth":685,"text":1287},{"id":1362,"depth":685,"text":1365},{"id":1373,"depth":685,"text":1376},{"id":1527,"depth":685,"text":1530},{"id":1573,"depth":685,"text":1576},"content:blog-posts:2-interpolations-directives-and-components-in-vuejs.md","blog-posts/2-interpolations-directives-and-components-in-vuejs.md","blog-posts/2-interpolations-directives-and-components-in-vuejs",{"_path":1609,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1610,"description":1611,"seoTitle":1612,"seoDescription":1613,"keywords":1614,"image":18,"alt":19,"ogImage":18,"tags":1619,"categories":1620,"published":25,"author":26,"link":1609,"date":1621,"sitemap":1622,"body":1626,"_type":693,"_id":1795,"_source":695,"_file":1796,"_stem":1797,"_extension":698},"/blog-posts/2-named-arguments-attributes-match-expression-php-8","[2] Named arguments, attributes, and the match expression in PHP 8","Explore named arguments, attributes, and the match expression introduced in PHP 8 with examples and use cases.","PHP 8 Named Arguments, Attributes & Match Expression","Discover PHP 8 advancements like named arguments, attributes, and the powerful match expression with practical examples.",[1615,1616,1617,1618],"PHP 8 named arguments","match expression in PHP","PHP attributes","PHP 8 features",[21,22,23],[21,22,23],"2022-04-03",{"loc":1623,"lastmod":1621,"changefreq":30,"priority":31,"images":1624},"/blog-posts/2-named-arguments-attributes-match-expression-php-8/",[1625],{"loc":18},{"type":35,"children":1627,"toc":1789},[1628,1644,1654,1659,1667,1672,1677,1705,1713,1721,1727,1732,1737,1745,1750,1758,1765,1775,1781],{"type":38,"tag":39,"props":1629,"children":1630},{},[1631,1633,1637,1639,1643],{"type":43,"value":1632},"In this second episode of the series, I want to go through the Named arguments, Attributes, and Match expressions as new PHP8 features. You can see the list of features ",{"type":38,"tag":61,"props":1634,"children":1635},{"href":5},[1636],{"type":43,"value":1061},{"type":43,"value":1638}," and if you want to check the first episode you can read that ",{"type":38,"tag":61,"props":1640,"children":1641},{"href":1033},[1642],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":1645,"children":1647},{"id":1646},"named-arguments-of-php8",[1648,1652],{"type":38,"tag":72,"props":1649,"children":1650},{},[1651],{"type":43,"value":512},{"type":43,"value":1653}," of PHP8",{"type":38,"tag":39,"props":1655,"children":1656},{},[1657],{"type":43,"value":1658},"Named arguments are a practical feature, and it improves the readability of the code. It allows us to ignore the order of the function parameters because we can specify the param name.",{"type":38,"tag":790,"props":1660,"children":1662},{"code":1661},"function getNamedParams(string $a, string $b, ?string $c = null, ?string $d = null) \n{ /* … */ }\n\ngetNamedParams(\n    b: 'value b', \n    a: 'value a', \n    d: 'value d',\n);\n",[1663],{"type":38,"tag":559,"props":1664,"children":1665},{"__ignoreMap":8},[1666],{"type":43,"value":1661},{"type":38,"tag":46,"props":1668,"children":1670},{"id":1669},"attributes",[1671],{"type":43,"value":517},{"type":38,"tag":39,"props":1673,"children":1674},{},[1675],{"type":43,"value":1676},"Attributes are annotations. We used annotation in PHP within the dock block section. We simulated the behavior in PHP in the comment section in the code. The new PHP version 8.0 provides a first-class citizen in the language to represent this kind of metadata.",{"type":38,"tag":39,"props":1678,"children":1679},{},[1680,1682,1694,1696,1703],{"type":43,"value":1681},"The \"first-class citizen\" expression is usable because attributes are simple classes, annotated themselves with the ",{"type":38,"tag":76,"props":1683,"children":1684},{},[1685,1687,1692],{"type":43,"value":1686},"#[",{"type":38,"tag":76,"props":1688,"children":1689},{},[1690],{"type":43,"value":1691},"Attribute",{"type":43,"value":1693},"]",{"type":43,"value":1695}," attribute; this base Attribute used to be called PhpAttribute in the original RFC but was changed with ",{"type":38,"tag":61,"props":1697,"children":1700},{"href":1698,"rel":1699},"https://wiki.php.net/rfc/attribute_amendments",[65],[1701],{"type":43,"value":1702},"another RFC",{"type":43,"value":1704}," afterward.",{"type":38,"tag":790,"props":1706,"children":1708},{"code":1707},"use App\\Attributes\\ExampleAttribute;\n\n#[ExampleAttribute]\nclass Foo\n{\n    #[ExampleAttribute]\n    public const FOO = 'foo';\n \n    #[ExampleAttribute]\n    public $x;\n \n    #[ExampleAttribute]\n    public function foo(#[ExampleAttribute] $bar) { }\n}\n",[1709],{"type":38,"tag":559,"props":1710,"children":1711},{"__ignoreMap":8},[1712],{"type":43,"value":1707},{"type":38,"tag":790,"props":1714,"children":1716},{"code":1715},"#[Attribute]\nclass ExampleAttribute\n{\n    public $value;\n \n    public function __construct($value)\n    {\n        $this->value = $value;\n    }\n}\n",[1717],{"type":38,"tag":559,"props":1718,"children":1719},{"__ignoreMap":8},[1720],{"type":43,"value":1715},{"type":38,"tag":46,"props":1722,"children":1724},{"id":1723},"match-expression-in-the-php-version-8",[1725],{"type":43,"value":1726},"Match expression in the PHP version 8",{"type":38,"tag":39,"props":1728,"children":1729},{},[1730],{"type":43,"value":1731},"Match expression is a similar structure to the switch-case expression but it is on steroids. It is much shorter but provides the same logic as the switch.",{"type":38,"tag":39,"props":1733,"children":1734},{},[1735],{"type":43,"value":1736},"Se let's see the switch-case example first:",{"type":38,"tag":790,"props":1738,"children":1740},{"code":1739},"switch ($statusCode) {\n    case 200:\n    case 300:\n        $message = null;\n        break;\n    case 400:\n        $message = 'not found';\n        break;\n    case 500:\n        $message = 'server error';\n        break;\n    default:\n        $message = 'unknown status code';\n        break;\n}\n",[1741],{"type":38,"tag":559,"props":1742,"children":1743},{"__ignoreMap":8},[1744],{"type":43,"value":1739},{"type":38,"tag":39,"props":1746,"children":1747},{},[1748],{"type":43,"value":1749},"And this would be the match equivalent of the previous example:",{"type":38,"tag":790,"props":1751,"children":1753},{"code":1752},"$message = match ($statusCode) {\n    200, 300 => null,\n    400 => 'not found',\n    500 => 'server error',\n    default => 'unknown status code',\n};\n",[1754],{"type":38,"tag":559,"props":1755,"children":1756},{"__ignoreMap":8},[1757],{"type":43,"value":1752},{"type":38,"tag":1759,"props":1760,"children":1762},"h4",{"id":1761},"useful-topic-related-links",[1763],{"type":43,"value":1764},"Useful Topic related Links:",{"type":38,"tag":39,"props":1766,"children":1767},{},[1768],{"type":38,"tag":61,"props":1769,"children":1772},{"href":1770,"rel":1771},"https://stitcher.io/blog/new-in-php-8",[65],[1773],{"type":43,"value":1774},"New in PHP 8",{"type":38,"tag":1759,"props":1776,"children":1778},{"id":1777},"previous-part-of-the-series",[1779],{"type":43,"value":1780},"Previous part of the series",{"type":38,"tag":39,"props":1782,"children":1783},{},[1784],{"type":38,"tag":61,"props":1785,"children":1786},{"href":1033},[1787],{"type":43,"value":1788},"PHP 8.0: JIT Compiler, Union Types, Null safe operator",{"title":8,"searchDepth":685,"depth":685,"links":1790},[1791,1793,1794],{"id":1646,"depth":685,"text":1792},"Named arguments of PHP8",{"id":1669,"depth":685,"text":517},{"id":1723,"depth":685,"text":1726},"content:blog-posts:2-named-arguments-attributes-match-expression-php-8.md","blog-posts/2-named-arguments-attributes-match-expression-php-8.md","blog-posts/2-named-arguments-attributes-match-expression-php-8",{"_path":1799,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1800,"description":1801,"seoTitle":1802,"seoDescription":1803,"keywords":1804,"image":710,"alt":1595,"ogImage":710,"tags":1809,"categories":1810,"published":25,"author":26,"link":1799,"date":1811,"sitemap":1812,"body":1816,"_type":693,"_id":2257,"_source":695,"_file":2258,"_stem":2259,"_extension":698},"/blog-posts/3-data-props-and-computed-modifiers-of-vue-options-api","[3] Data, props, and computed modifiers of Vue options API","In-depth exploration of data, props, and computed properties using Vue.js options API for state and data management.","Vue.js Options API: Data, Props & Computed","Understand how to manage state and data using Vue.js options API, exploring data, props, and computed modifiers in detail.",[1805,1806,1807,1808],"Vue.js props","options API computed properties","Vue.js data examples","frontend state management with Vue",[21,713,714],[21,713,714],"2022-02-26",{"loc":1813,"lastmod":1811,"changefreq":30,"priority":31,"images":1814},"/blog-posts/3-data-props-and-computed-modifiers-of-vue-options-api/",[1815],{"loc":710},{"type":35,"children":1817,"toc":2249},[1818,1823,1831,1837,1854,1860,1878,1898,1904,1917,1925,1946,1954,1982,1990,2011,2017,2022,2027,2035,2041,2049,2055,2063,2068,2076,2084,2090,2144,2168,2213,2219,2227,2237],{"type":38,"tag":39,"props":1819,"children":1820},{},[1821],{"type":43,"value":1822},"OptionsAPI is a VueJS term. It refers to all functions and properties like Data, Props, Computed, and many others that can behave as modifiers of a component. You will declare these modifiers between the script tags section inside the create app object. In this note, I am going to write about the Data, Props, and Computed modifiers of the options API. It is worth mentioning that modifier is not an official term. I made it up because of the purpose of these properties.",{"type":38,"tag":790,"props":1824,"children":1826},{"code":1825},"Vue.createApp({\n   // you will define the options API here\n}).mount('#app')\n",[1827],{"type":38,"tag":559,"props":1828,"children":1829},{"__ignoreMap":8},[1830],{"type":43,"value":1825},{"type":38,"tag":46,"props":1832,"children":1834},{"id":1833},"what-are-the-data-modifier-of-options-api",[1835],{"type":43,"value":1836},"What are the Data modifier of Options API ?",{"type":38,"tag":39,"props":1838,"children":1839},{},[1840,1842,1845,1847],{"type":43,"value":1841},"The official definition of the data property is \"A function that returns the initial reactive state for the component instance.\" So in that object, you declare the default values of your component that you will be able to access with the 'this' keyword outside the data method but inside in the create app object.",{"type":38,"tag":1303,"props":1843,"children":1844},{},[],{"type":43,"value":1846},"\nWe can pass the properties of the data method to child components. In this case, the parent Data definition becomes the definition of a Prop in the child component. ",{"type":38,"tag":61,"props":1848,"children":1851},{"href":1849,"rel":1850},"https://vuejs.org/api/options-state.html#data",[65],[1852],{"type":43,"value":1853},"You can read here more about data methods.",{"type":38,"tag":46,"props":1855,"children":1857},{"id":1856},"what-are-props-of-options-api",[1858],{"type":43,"value":1859},"What are Props of Options API?",{"type":38,"tag":53,"props":1861,"children":1862},{},[1863,1868,1873],{"type":38,"tag":57,"props":1864,"children":1865},{},[1866],{"type":43,"value":1867},"Passed Data to a child component is called Props.",{"type":38,"tag":57,"props":1869,"children":1870},{},[1871],{"type":43,"value":1872},"It is like custom attributes for our components.",{"type":38,"tag":57,"props":1874,"children":1875},{},[1876],{"type":43,"value":1877},"The purpose of the props to customize the behavior of our component similarly to how HTML attributes change the behavior of an element.",{"type":38,"tag":1383,"props":1879,"children":1880},{},[1881,1890],{"type":38,"tag":39,"props":1882,"children":1883},{},[1884],{"type":38,"tag":1885,"props":1886,"children":1889},"img",{"alt":1887,"src":1888},"Props passed from the root App to Greeting and User components","/images/blog-posts/Screenshot-from-2022-01-06-14-41-12.png",[],{"type":38,"tag":1517,"props":1891,"children":1892},{},[1893],{"type":38,"tag":39,"props":1894,"children":1895},{},[1896],{"type":43,"value":1897},"Pass data to components with props. Eg from the root component to the child components.",{"type":38,"tag":1759,"props":1899,"children":1901},{"id":1900},"how-to-pass-data-downwards-the-hierarchy-chain",[1902],{"type":43,"value":1903},"How to pass data downwards the hierarchy chain?",{"type":38,"tag":53,"props":1905,"children":1906},{},[1907,1912],{"type":38,"tag":57,"props":1908,"children":1909},{},[1910],{"type":43,"value":1911},"Define a Data property at the parent level",{"type":38,"tag":57,"props":1913,"children":1914},{},[1915],{"type":43,"value":1916},"Define it as Props in the child level",{"type":38,"tag":790,"props":1918,"children":1920},{"code":1919},"\u003Ctemplate>\n  \u003Ch3>Heyy!\u003C/h3>\n  \u003Cgreeting :age=\"age\">\u003C/greeting>\n  \u003Cuser :age=\"age\">\u003C/user>\n\u003C/template>\n\n\u003Cscript>\n// Import components locally in VueJS\nimport Greeting from \"@/components/Greeting.vue\";\nimport User from \"@/components/User\";\n\n// Vue common code section\nexport default {\n  name: \"App\",\n  components:{\n    Greeting,\n    User\n  },\n  data(){\n    return{\n      age: 20\n    }\n  }\n\n}\n\u003C/script>\n",[1921],{"type":38,"tag":559,"props":1922,"children":1923},{"__ignoreMap":8},[1924],{"type":43,"value":1919},{"type":38,"tag":39,"props":1926,"children":1927},{},[1928,1933,1934,1942],{"type":38,"tag":76,"props":1929,"children":1930},{},[1931],{"type":43,"value":1932},"This is the code of the parent",{"type":43,"value":1149},{"type":38,"tag":72,"props":1935,"children":1936},{},[1937],{"type":38,"tag":76,"props":1938,"children":1939},{},[1940],{"type":43,"value":1941},"App component",{"type":38,"tag":76,"props":1943,"children":1944},{},[1945],{"type":43,"value":1063},{"type":38,"tag":790,"props":1947,"children":1949},{"code":1948},"\u003Ctemplate>\n  \u003Cp v-if=\"age > 25\">{{ msg }}\u003C/p>\n  \u003Cp v-else>You must be 25 years or older to view this message\u003C/p>\n\u003C/template>\n\u003Cscript>\nexport default {\n  name: \"Greeting\",\n  data(){\n    return {\n      msg: \"Hello test\"\n    }\n  },\n  props:[\"age\"]\n}\n\u003C/script>\n",[1950],{"type":38,"tag":559,"props":1951,"children":1952},{"__ignoreMap":8},[1953],{"type":43,"value":1948},{"type":38,"tag":39,"props":1955,"children":1956},{},[1957],{"type":38,"tag":76,"props":1958,"children":1959},{},[1960,1962,1981],{"type":43,"value":1961},"This o_ne ",{"type":38,"tag":76,"props":1963,"children":1964},{},[1965,1967,1972,1973],{"type":43,"value":1966},"is f_or ",{"type":38,"tag":76,"props":1968,"children":1969},{},[1970],{"type":43,"value":1971},"the child",{"type":43,"value":1149},{"type":38,"tag":72,"props":1974,"children":1975},{},[1976],{"type":38,"tag":76,"props":1977,"children":1978},{},[1979],{"type":43,"value":1980},"Greeting component",{"type":43,"value":1063},{"type":38,"tag":790,"props":1983,"children":1985},{"code":1984},"\u003Ctemplate>\n  \u003Cp>The user is {{age}} years old\u003C/p>\n\u003C/template>\n\u003Cscript>\nexport default {\n  name: \"User\",\n  props: [\n      \"age\"\n  ]\n\n}\n\u003C/script>\n",[1986],{"type":38,"tag":559,"props":1987,"children":1988},{"__ignoreMap":8},[1989],{"type":43,"value":1984},{"type":38,"tag":39,"props":1991,"children":1992},{},[1993,1998,1999,2007],{"type":38,"tag":76,"props":1994,"children":1995},{},[1996],{"type":43,"value":1997},"This is the code of the child",{"type":43,"value":1149},{"type":38,"tag":72,"props":2000,"children":2001},{},[2002],{"type":38,"tag":76,"props":2003,"children":2004},{},[2005],{"type":43,"value":2006},"User component",{"type":38,"tag":76,"props":2008,"children":2009},{},[2010],{"type":43,"value":1063},{"type":38,"tag":46,"props":2012,"children":2014},{"id":2013},"how-to-validate-props-why-is-it-important",[2015],{"type":43,"value":2016},"How to validate props? Why is it important?",{"type":38,"tag":39,"props":2018,"children":2019},{},[2020],{"type":43,"value":2021},"Validating props help you to debug the application. It forces the parent component to pass the proper data type to the component. This way we can catch and prevent the error before shipping the application. ",{"type":38,"tag":39,"props":2023,"children":2024},{},[2025],{"type":43,"value":2026},"To be able to validate props you need to convert the props array to an object. In the object you can define several properties like default, required, etc ... You can see the options below as guidance:",{"type":38,"tag":790,"props":2028,"children":2030},{"code":2029},"// code above \n... \n  // props: [\n  //     \"age\"\n  // ],\n  props: {\n    age: {\n      // All JavaScript data type is allowed to use like: String Number, Boolean, Array, Object, Date, Function, Symbol,\n      type: Number,\n      //required: true\n      // default: 20 // if the type is an array or object the default has to be a function with returning data type\n      validator(value) {\n        console.log(value)\n        if(value \u003C 130) {\n          return true\n        }\n        console.error('you can\\'t be older than 130 years old' );\n      }\n    }\n  },\n...\n// code below \n",[2031],{"type":38,"tag":559,"props":2032,"children":2033},{"__ignoreMap":8},[2034],{"type":43,"value":2029},{"type":38,"tag":46,"props":2036,"children":2038},{"id":2037},"computed-modifiers-in-options-api",[2039],{"type":43,"value":2040},"Computed modifiers in Options API!",{"type":38,"tag":53,"props":2042,"children":2043},{},[2044],{"type":38,"tag":57,"props":2045,"children":2046},{},[2047],{"type":43,"value":2048},"It is a dynamic property.",{"type":38,"tag":1759,"props":2050,"children":2052},{"id":2051},"how-do-we-define-a-computed-property",[2053],{"type":43,"value":2054},"How do we define a Computed property?",{"type":38,"tag":790,"props":2056,"children":2058},{"code":2057},"\u003Cdiv id=\"app\" v-cloak>\n    \u003Cp>{{ fullName }}\u003C/p>\n\u003C/div>\n",[2059],{"type":38,"tag":559,"props":2060,"children":2061},{"__ignoreMap":8},[2062],{"type":43,"value":2057},{"type":38,"tag":39,"props":2064,"children":2065},{},[2066],{"type":43,"value":2067},"We refer to it as a pr_operty in the HTML template._",{"type":38,"tag":790,"props":2069,"children":2071},{"code":2070},"const vm = Vue.createApp({\n    data() {\n        return {}\n    },\n    methods: {},\n    computed: {\n        fullName() {\n            console.log('this is a computed call')\n            return `${this.firstName} ${this.lastName.toUpperCase()}`\n        },\n    }\n}).mount('#app')\n",[2072],{"type":38,"tag":559,"props":2073,"children":2074},{"__ignoreMap":8},[2075],{"type":43,"value":2070},{"type":38,"tag":39,"props":2077,"children":2078},{},[2079],{"type":38,"tag":76,"props":2080,"children":2081},{},[2082],{"type":43,"value":2083},"But we define it as a method in the computed options block",{"type":38,"tag":46,"props":2085,"children":2087},{"id":2086},"why-do-we-need-this-if-it-seems-to-work-as-a-method",[2088],{"type":43,"value":2089},"Why do we need this if it seems to work as a method?",{"type":38,"tag":53,"props":2091,"children":2092},{},[2093,2098,2103,2116,2121,2126,2131],{"type":38,"tag":57,"props":2094,"children":2095},{},[2096],{"type":43,"value":2097},"It does not behave the same as a method.",{"type":38,"tag":57,"props":2099,"children":2100},{},[2101],{"type":43,"value":2102},"Calling the method section will reload the page. So all the defined functions will be executed even if we call a different method.",{"type":38,"tag":57,"props":2104,"children":2105},{},[2106,2108],{"type":43,"value":2107},"Computed property change is not reloading the page.\n",{"type":38,"tag":53,"props":2109,"children":2110},{},[2111],{"type":38,"tag":57,"props":2112,"children":2113},{},[2114],{"type":43,"value":2115},"So it will not cause any side effects as the methods do.",{"type":38,"tag":57,"props":2117,"children":2118},{},[2119],{"type":43,"value":2120},"We save execution time.",{"type":38,"tag":57,"props":2122,"children":2123},{},[2124],{"type":43,"value":2125},"The performance will be better.",{"type":38,"tag":57,"props":2127,"children":2128},{},[2129],{"type":43,"value":2130},"Vue calls the computed property functions internally.",{"type":38,"tag":57,"props":2132,"children":2133},{},[2134,2136],{"type":43,"value":2135},"Vue stores the computed properties, not the function.\n",{"type":38,"tag":53,"props":2137,"children":2138},{},[2139],{"type":38,"tag":57,"props":2140,"children":2141},{},[2142],{"type":43,"value":2143},"That's why we can see this in the Vue devtool as output.",{"type":38,"tag":1383,"props":2145,"children":2146},{},[2147,2161],{"type":38,"tag":2148,"props":2149,"children":2151},"div",{"style":2150},"text-align: center;",[2152,2154,2160],{"type":43,"value":2153},"\n    ",{"type":38,"tag":1885,"props":2155,"children":2159},{"style":2156,"src":2157,"alt":2158},"width: 100%;","/images/blog-posts/computed-properties.png","Computed property in the Devtool",[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":2162,"children":2163},{},[2164],{"type":38,"tag":39,"props":2165,"children":2166},{},[2167],{"type":43,"value":2158},{"type":38,"tag":53,"props":2169,"children":2170},{},[2171,2195],{"type":38,"tag":57,"props":2172,"children":2173},{},[2174,2176],{"type":43,"value":2175},"We can't pass a value to computed properties\n",{"type":38,"tag":53,"props":2177,"children":2178},{},[2179,2184],{"type":38,"tag":57,"props":2180,"children":2181},{},[2182],{"type":43,"value":2183},"We do not use parenthesis in the HTML either",{"type":38,"tag":57,"props":2185,"children":2186},{},[2187],{"type":38,"tag":72,"props":2188,"children":2189},{},[2190],{"type":38,"tag":76,"props":2191,"children":2192},{},[2193],{"type":43,"value":2194},"If you need to pass params to a computed property then you need to write a method! Not a computed property!",{"type":38,"tag":57,"props":2196,"children":2197},{},[2198,2200],{"type":43,"value":2199},"For more details check this video:\n",{"type":38,"tag":53,"props":2201,"children":2202},{},[2203],{"type":38,"tag":57,"props":2204,"children":2205},{},[2206],{"type":38,"tag":61,"props":2207,"children":2210},{"href":2208,"rel":2209},"https://www.udemy.com/course/complete-vue-js-developer-zero-to-mastery-vuex/learn/lecture/23578932#overview",[65],[2211],{"type":43,"value":2212},"udemy",{"type":38,"tag":1759,"props":2214,"children":2216},{"id":2215},"when-should-we-use-computed-property",[2217],{"type":43,"value":2218},"When should we use computed property ?",{"type":38,"tag":53,"props":2220,"children":2221},{},[2222],{"type":38,"tag":57,"props":2223,"children":2224},{},[2225],{"type":43,"value":2226},"When you would like to write a function that calculates a value then you should write a computed property.",{"type":38,"tag":46,"props":2228,"children":2229},{"id":675},[2230,2232],{"type":43,"value":2231},"Co",{"type":38,"tag":72,"props":2233,"children":2234},{},[2235],{"type":43,"value":2236},"nclusion & Closing",{"type":38,"tag":39,"props":2238,"children":2239},{},[2240,2242,2247],{"type":43,"value":2241},"This topic continued my previous VueJS basics notes about ",{"type":38,"tag":61,"props":2243,"children":2244},{"href":1258},[2245],{"type":43,"value":2246},"Interpolations, Directives, and Components in VueJS",{"type":43,"value":2248},". In this one, I wrote about the Options API in VuJS 3 specifically the data, props, and computed methods option. When and why are they useful. Next time I am going to continue with the rest of the modifiers.",{"title":8,"searchDepth":685,"depth":685,"links":2250},[2251,2252,2253,2254,2255,2256],{"id":1833,"depth":685,"text":1836},{"id":1856,"depth":685,"text":1859},{"id":2013,"depth":685,"text":2016},{"id":2037,"depth":685,"text":2040},{"id":2086,"depth":685,"text":2089},{"id":675,"depth":685,"text":678},"content:blog-posts:3-data-props-and-computed-modifiers-of-vue-options-api.md","blog-posts/3-data-props-and-computed-modifiers-of-vue-options-api.md","blog-posts/3-data-props-and-computed-modifiers-of-vue-options-api",{"_path":2261,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2262,"description":2263,"seoTitle":2264,"seoDescription":2265,"keywords":2266,"image":18,"alt":19,"ogImage":18,"tags":2271,"categories":2272,"published":25,"author":26,"ink":2261,"date":2273,"sitemap":2274,"body":2278,"_type":693,"_id":2404,"_source":695,"_file":2405,"_stem":2406,"_extension":698},"/blog-posts/3-php-8-0-constructor-property-promotion-new-static-return-type-new-mixed-type","[3] PHP 8.0 Constructor property promotion, new static return type, new mixed type","Learn about PHP 8 improvements like constructor property promotion, static return types, and the mixed type.","PHP 8 Constructor Property Promotion & Types","See how PHP 8 simplifies coding with constructor property promotion, introduces static return types, and uses the mixed type.",[2267,2268,2269,2270],"PHP 8 constructor promotion","static return type PHP 8","mixed type in PHP","PHP coding improvements",[21,22,23],[21,22,23],"2022-04-07",{"loc":2275,"lastmod":2273,"changefreq":30,"priority":31,"images":2276},"/blog-posts/3-php-8-0-constructor-property-promotion-new-static-return-type-new-mixed-type/",[2277],{"loc":18},{"type":35,"children":2279,"toc":2402},[2280,2296,2301,2306,2314,2319,2327,2333,2338,2346,2352,2363,2368,2376,2380,2388,2394],{"type":38,"tag":39,"props":2281,"children":2282},{},[2283,2285,2289,2291,2295],{"type":43,"value":2284},"PHP 8.0 release date was on Nov 26, 2020. Because of this, it brought several new interesting features to our life. This is the third part of the series and in the current post, I want to go through the Constructor property promotion, New static return type, and New mixed type. You can see the full list of features ",{"type":38,"tag":61,"props":2286,"children":2287},{"href":5},[2288],{"type":43,"value":1061},{"type":43,"value":2290},". Furthermore, you can read the second part of the series ",{"type":38,"tag":61,"props":2292,"children":2293},{"href":1609},[2294],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":1759,"props":2297,"children":2299},{"id":2298},"constructor-property-promotion",[2300],{"type":43,"value":527},{"type":38,"tag":39,"props":2302,"children":2303},{},[2304],{"type":43,"value":2305},"Constructor Property Promotion is syntactic sugar. It helps to reduce the code. We do not have to define separately the class property and the assignment sections. We can do this with a simple code and PHP transform our code to the familiar syntax under the hood before the execution. So instead of writing the following code:",{"type":38,"tag":790,"props":2307,"children":2309},{"code":2308},"class Money \n{\n    public Currency $currency;\n \n    public int $amount;\n \n    public function __construct(\n        Currency $currency,\n        int $amount,\n    ) {\n        $this->currency = $currency;\n        $this->amount = $amount;\n    }\n}\n",[2310],{"type":38,"tag":559,"props":2311,"children":2312},{"__ignoreMap":8},[2313],{"type":43,"value":2308},{"type":38,"tag":39,"props":2315,"children":2316},{},[2317],{"type":43,"value":2318},"We can write this one and it will be converted to the code above before the code start running.",{"type":38,"tag":790,"props":2320,"children":2322},{"code":2321},"class Money \n{\n    public function __construct(\n        public Currency $currency,\n        public int $amount,\n    ) {}\n}\n",[2323],{"type":38,"tag":559,"props":2324,"children":2325},{"__ignoreMap":8},[2326],{"type":43,"value":2321},{"type":38,"tag":1759,"props":2328,"children":2330},{"id":2329},"new-static-return-type",[2331],{"type":43,"value":2332},"New Static Return Type",{"type":38,"tag":39,"props":2334,"children":2335},{},[2336],{"type":43,"value":2337},"We could already return self but returning static was not a valid return type until PHP 8. But in the new version of PHP we will be able to do this:",{"type":38,"tag":790,"props":2339,"children":2341},{"code":2340},"class Foo\n{\n    public function test(): static\n    {\n        return new static();\n    }\n}\n",[2342],{"type":38,"tag":559,"props":2343,"children":2344},{"__ignoreMap":8},[2345],{"type":43,"value":2340},{"type":38,"tag":1759,"props":2347,"children":2349},{"id":2348},"new-mixed-type",[2350],{"type":43,"value":2351},"New Mixed Type",{"type":38,"tag":39,"props":2353,"children":2354},{},[2355,2357,2362],{"type":43,"value":2356},"When the type of the returning data depends on a condition then the IDE generates a mixed return type in the dock block section. PHP 8 introduces the Mixed type into the language as an option. Due to this Mixed type can be one of the following types: ",{"type":38,"tag":76,"props":2358,"children":2359},{},[2360],{"type":43,"value":2361},"array, bool, callable, int, float, null, object, resource, string",{"type":43,"value":1063},{"type":38,"tag":39,"props":2364,"children":2365},{},[2366],{"type":43,"value":2367},"Mixed can also be used as a parameter or property type, not just as a return type. Since mixed already includes null, it's not allowed to make it nullable. The code below will trigger an error:",{"type":38,"tag":790,"props":2369,"children":2371},{"code":2370},"// Fatal error: Mixed types cannot be nullable, null is already part of the mixed type. function bar(): ?mixed {}\n",[2372],{"type":38,"tag":559,"props":2373,"children":2374},{"__ignoreMap":8},[2375],{"type":43,"value":2370},{"type":38,"tag":1759,"props":2377,"children":2378},{"id":1761},[2379],{"type":43,"value":1764},{"type":38,"tag":39,"props":2381,"children":2382},{},[2383],{"type":38,"tag":61,"props":2384,"children":2386},{"href":1770,"rel":2385},[65],[2387],{"type":43,"value":1774},{"type":38,"tag":1759,"props":2389,"children":2391},{"id":2390},"the-previous-part-of-the-series",[2392],{"type":43,"value":2393},"The previous part of the series",{"type":38,"tag":39,"props":2395,"children":2396},{},[2397],{"type":38,"tag":61,"props":2398,"children":2399},{"href":1609},[2400],{"type":43,"value":2401},"[2] Named arguments, Attributes, Match expressions as new PHP8 features",{"title":8,"searchDepth":685,"depth":685,"links":2403},[],"content:blog-posts:3-php-8-0-constructor-property-promotion-new-static-return-type-new-mixed-type.md","blog-posts/3-php-8-0-constructor-property-promotion-new-static-return-type-new-mixed-type.md","blog-posts/3-php-8-0-constructor-property-promotion-new-static-return-type-new-mixed-type",{"_path":2408,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2409,"description":2410,"seoTitle":2411,"seoDescription":2412,"keywords":2413,"image":710,"alt":1595,"ogImage":710,"tags":2419,"categories":2420,"published":25,"author":26,"link":2408,"date":2421,"sitemap":2422,"body":2426,"_type":693,"_id":2655,"_source":695,"_file":2656,"_stem":2657,"_extension":698},"/blog-posts/4-emit-watch-and-methods-of-vue-js-options-api","[4] Emit, watch, and methods of Vue.js options API","A guide to using emit, watch, and methods in Vue.js options API to handle events, observe changes, and execute logic.","Vue.js Emit, Watch & Methods","Learn the emit, watch, and method features in Vue.js options API to create dynamic, event-driven, and reactive applications.",[2414,2415,2416,2417,2418],"Vue.js watch","emit in Vue.js","methods in Vue.js","Vue.js reactivity","event handling in Vue",[21,713,714],[21,713,714],"2022-03-02",{"loc":2423,"lastmod":2421,"changefreq":30,"priority":31,"images":2424},"/blog-posts/4-emit-watch-and-methods-of-vue-js-options-api/",[2425],{"loc":710},{"type":35,"children":2427,"toc":2649},[2428,2440,2446,2454,2462,2467,2475,2483,2492,2528,2536,2545,2563,2574,2579,2587,2604,2612,2634,2638],{"type":38,"tag":39,"props":2429,"children":2430},{},[2431,2433,2439],{"type":43,"value":2432},"In the current episode am about to give some detail about Emit, Watch, and Methods of the OptionsAPI. I wrote about data, props, and computed properties in the previous episode and this post tries to extend that list with further OptionsApi elements of the ",{"type":38,"tag":61,"props":2434,"children":2437},{"href":2435,"rel":2436},"https://vuejs.org/guide/introduction.html",[65],[2438],{"type":43,"value":1595},{"type":43,"value":1063},{"type":38,"tag":46,"props":2441,"children":2443},{"id":2442},"what-is-the-purpose-of-the-methods-block-of-optionsapi",[2444],{"type":43,"value":2445},"What is the purpose of the methods block of OptionsAPI?",{"type":38,"tag":53,"props":2447,"children":2448},{},[2449],{"type":38,"tag":57,"props":2450,"children":2451},{},[2452],{"type":43,"value":2453},"To avoid complex functionalities at the template level, we can define and call methods instead.",{"type":38,"tag":790,"props":2455,"children":2457},{"code":2456},"\u003Cdiv id=\"app\">\n    {{firstName}} {{lastName.toUpperCase()}}\n\u003C/div>\n",[2458],{"type":38,"tag":559,"props":2459,"children":2460},{"__ignoreMap":8},[2461],{"type":43,"value":2456},{"type":38,"tag":39,"props":2463,"children":2464},{},[2465],{"type":43,"value":2466},"Instead of this above, we can write this below.",{"type":38,"tag":790,"props":2468,"children":2470},{"code":2469},"\u003Cdiv id=\"app\">\n    {{ fullName()}}\n\u003C/div>\n",[2471],{"type":38,"tag":559,"props":2472,"children":2473},{"__ignoreMap":8},[2474],{"type":43,"value":2469},{"type":38,"tag":790,"props":2476,"children":2478},{"code":2477},"const vm = Vue.createApp({\n    data() {\n        return {\n            firstName: 'John',\n            lastName: 'Doe'\n        }\n    },\n    methods: {\n        fullName() {\n            return `${this.firstName} ${this.lastName.toUpperCase()}`\n        }\n    }\n}).mount('#app')\n",[2479],{"type":38,"tag":559,"props":2480,"children":2481},{"__ignoreMap":8},[2482],{"type":43,"value":2477},{"type":38,"tag":46,"props":2484,"children":2486},{"id":2485},"when-can-we-use-the-watch-property",[2487],{"type":38,"tag":72,"props":2488,"children":2489},{},[2490],{"type":43,"value":2491},"When can we use the watch property?",{"type":38,"tag":53,"props":2493,"children":2494},{},[2495,2500,2518,2523],{"type":38,"tag":57,"props":2496,"children":2497},{},[2498],{"type":43,"value":2499},"Developers use watchers to perform additional actions whenever a value changes. It is especially true whenever you want to perform an asynchronous task.",{"type":38,"tag":57,"props":2501,"children":2502},{},[2503,2505],{"type":43,"value":2504},"Computed properties are similar to watchers because they watch our data for changes.\n",{"type":38,"tag":53,"props":2506,"children":2507},{},[2508,2513],{"type":38,"tag":57,"props":2509,"children":2510},{},[2511],{"type":43,"value":2512},"But computed properties can never be asynchronous. At least they shouldn't be.",{"type":38,"tag":57,"props":2514,"children":2515},{},[2516],{"type":43,"value":2517},"You expect a value from a computed properties function.",{"type":38,"tag":57,"props":2519,"children":2520},{},[2521],{"type":43,"value":2522},"With watchers, you have the freedom for asynchronous tasks.",{"type":38,"tag":57,"props":2524,"children":2525},{},[2526],{"type":43,"value":2527},"Although, it is not a common scenario when you need to use it.",{"type":38,"tag":790,"props":2529,"children":2531},{"code":2530},"const vm = Vue.createApp({\n    data() {\n        return {}\n    },\n    methods: {},\n    computed: {},\n    watch: {\n        age(newVal, oldVal) {\n            setTimeout(() => {\n                this.age = 20;\n            },3000)\n        }\n    }\n}).mount('#app')\n",[2532],{"type":38,"tag":559,"props":2533,"children":2534},{"__ignoreMap":8},[2535],{"type":43,"value":2530},{"type":38,"tag":46,"props":2537,"children":2539},{"id":2538},"what-about-with-optionsapi-emit",[2540],{"type":38,"tag":72,"props":2541,"children":2542},{},[2543],{"type":43,"value":2544},"What about with OptionsApi Emit?",{"type":38,"tag":53,"props":2546,"children":2547},{},[2548,2553,2558],{"type":38,"tag":57,"props":2549,"children":2550},{},[2551],{"type":43,"value":2552},"Emit means to produce or trigger an event.",{"type":38,"tag":57,"props":2554,"children":2555},{},[2556],{"type":43,"value":2557},"We need to use it to change the property value on the parent scope.",{"type":38,"tag":57,"props":2559,"children":2560},{},[2561],{"type":43,"value":2562},"But we do not need to use it to show the value.",{"type":38,"tag":1759,"props":2564,"children":2566},{"id":2565},"only-parent-components-can-listen-for-events-from-children-components",[2567,2572],{"type":38,"tag":72,"props":2568,"children":2569},{},[2570],{"type":43,"value":2571},"Only parent components can listen for events from children components",{"type":43,"value":2573},":",{"type":38,"tag":39,"props":2575,"children":2576},{},[2577],{"type":43,"value":2578},"So if we have a property on the global level that we want to update in the child component then we need to use emit in the following way:",{"type":38,"tag":790,"props":2580,"children":2582},{"code":2581},"\u003Ctemplate>\n  \u003Ch3>Heyy!\u003C/h3>\n\n  \u003Cgreeting :age=\"age\">\u003C/greeting>\n  \u003C!-- we listen ( with v-on or @ directive ) for the age-change event an increase the value -->\n  \u003Cuser :age=\"age\" @age-change=\"age++\">\u003C/user>\n  \u003C!-- We can pass params to the event if it is a function -->\n  \u003C!-- \u003Cuser :age=\"age\" @age-change=\"updateAge\">\u003C/user> -->\n\u003C/template>\n\n\u003Cscript>\n// Import components locally in VueJS\nimport Greeting from \"@/components/Greeting.vue\";\nimport User from \"@/components/User\";\n\n// Vue common code section\nexport default {\n  name: \"App\",\n  components:{\n    Greeting,\n    User\n  },\n  data(){\n    return{\n      age: 20\n    }\n  },\n  methods:{\n    updateAge(num){\n      this.age +=num\n    }\n  }\n}\n",[2583],{"type":38,"tag":559,"props":2584,"children":2585},{"__ignoreMap":8},[2586],{"type":43,"value":2581},{"type":38,"tag":39,"props":2588,"children":2589},{},[2590,2595,2596],{"type":38,"tag":76,"props":2591,"children":2592},{},[2593],{"type":43,"value":2594},"The age property with the value 20 is in the root level on the",{"type":43,"value":1149},{"type":38,"tag":72,"props":2597,"children":2598},{},[2599],{"type":38,"tag":76,"props":2600,"children":2601},{},[2602],{"type":43,"value":2603},"App component.",{"type":38,"tag":790,"props":2605,"children":2607},{"code":2606},"\u003Ctemplate>\n  \u003C!-- We call onClickAge method on click -->\n  \u003Cbutton type=\"button\" @click=\"onClickAge\">Increase Age\u003C/button>\n  \u003Cp>The user is {{age}} years old\u003C/p>\n\u003C/template>\n\u003Cscript>\n\nexport default {\n  name: \"User\",\n  props: [\n      \"age\"\n  ],\n  // Without passing the eventHandler name to the emit property we will have error or warning: 'Extraneous non-emits event listeners (ageChange) were passed to component ... '\n  emits:['age-change'], // this is a recommended good practise by vue\n  methods:{\n    onClickAge(){\n      // We emit an event with the 'age-change' name upward the hierarch chain\n      this.$emit('age-change', 3)\n    }\n  }\n\n}\n\u003C/script>\n",[2608],{"type":38,"tag":559,"props":2609,"children":2610},{"__ignoreMap":8},[2611],{"type":43,"value":2606},{"type":38,"tag":39,"props":2613,"children":2614},{},[2615,2620,2621,2628,2629],{"type":38,"tag":76,"props":2616,"children":2617},{},[2618],{"type":43,"value":2619},"We increase the age property from the",{"type":43,"value":1149},{"type":38,"tag":72,"props":2622,"children":2623},{},[2624],{"type":38,"tag":76,"props":2625,"children":2626},{},[2627],{"type":43,"value":2006},{"type":43,"value":1149},{"type":38,"tag":76,"props":2630,"children":2631},{},[2632],{"type":43,"value":2633},"that is defined in the parent component level.",{"type":38,"tag":46,"props":2635,"children":2636},{"id":1573},[2637],{"type":43,"value":1576},{"type":38,"tag":39,"props":2639,"children":2640},{},[2641,2642,2647],{"type":43,"value":1581},{"type":38,"tag":61,"props":2643,"children":2644},{"href":1813},[2645],{"type":43,"value":2646},"previous",{"type":43,"value":2648}," and in this note we went through all features of the OptionsAPI. Why we need them and when we need to use them.",{"title":8,"searchDepth":685,"depth":685,"links":2650},[2651,2652,2653,2654],{"id":2442,"depth":685,"text":2445},{"id":2485,"depth":685,"text":2491},{"id":2538,"depth":685,"text":2544},{"id":1573,"depth":685,"text":1576},"content:blog-posts:4-emit-watch-and-methods-of-vue-js-options-api.md","blog-posts/4-emit-watch-and-methods-of-vue-js-options-api.md","blog-posts/4-emit-watch-and-methods-of-vue-js-options-api",{"_path":2659,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2660,"description":2661,"seoTitle":2662,"seoDescription":2663,"keywords":2664,"image":18,"alt":8,"ogImage":18,"tags":2669,"categories":2670,"published":25,"author":26,"link":2659,"date":2671,"sitemap":2672,"body":2676,"_type":693,"_id":2852,"_source":695,"_file":2853,"_stem":2854,"_extension":698},"/blog-posts/4-php-8-0-throw-expression-inheritance-with-private-methods-weak-maps","[4] PHP 8.0 throw expression, inheritance with private methods, weak maps","Explore PHP 8.0 updates: throw expressions for concise error handling, improved inheritance mechanisms, and weak maps support.","PHP 8.0 Throw Expression, Private Methods & Weak Maps","Detailed insights into PHP 8.0's throw expressions, inheritance rules for private methods, and the inclusion of weak maps.",[2665,2666,2667,2668],"PHP 8 throw expression","weak maps in PHP","inheritance private methods in PHP 8","PHP 8 improvements",[21,22,23],[21,22,23],"2022-04-11",{"loc":2673,"lastmod":2671,"changefreq":30,"priority":31,"images":2674},"/blog-posts/4-php-8-0-throw-expression-inheritance-with-private-methods-weak-maps/",[2675],{"loc":18},{"type":35,"children":2677,"toc":2850},[2678,2694,2699,2704,2731,2739,2744,2752,2757,2762,2767,2781,2789,2794,2809,2817,2825,2830,2838,2842],{"type":38,"tag":39,"props":2679,"children":2680},{},[2681,2683,2687,2689,2693],{"type":43,"value":2682},"This is the fourth part of the series and in the current post, I want to go through the Throw expression, Inheritance with private methods, and Weak maps. I am doing so because I want to keep up with the new features of PHP8. I know there are several other articles about this theme but I wanted to write down my notes about this topic because this way it stays in my memory longer. Anyway, you can see the full list of features ",{"type":38,"tag":61,"props":2684,"children":2685},{"href":5},[2686],{"type":43,"value":1061},{"type":43,"value":2688},". Furthermore, you can read the third part of the series ",{"type":38,"tag":61,"props":2690,"children":2691},{"href":2261},[2692],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":1759,"props":2695,"children":2697},{"id":2696},"throw-expression",[2698],{"type":43,"value":542},{"type":38,"tag":39,"props":2700,"children":2701},{},[2702],{"type":43,"value":2703},"Okay! Let's start with the definition. According to the Wikipedia, the difference between statement and expression is:",{"type":38,"tag":2705,"props":2706,"children":2707},"blockquote",{},[2708],{"type":38,"tag":39,"props":2709,"children":2710},{},[2711,2713,2720,2722,2729],{"type":43,"value":2712},"\"In most languages, statements contrast with ",{"type":38,"tag":61,"props":2714,"children":2717},{"href":2715,"rel":2716},"https://en.wikipedia.org/wiki/Expression_(programming)",[65],[2718],{"type":43,"value":2719},"expressions",{"type":43,"value":2721}," in that statements do not return results and are executed solely for their ",{"type":38,"tag":61,"props":2723,"children":2726},{"href":2724,"rel":2725},"https://en.wikipedia.org/wiki/Side_effect_(programming)",[65],[2727],{"type":43,"value":2728},"side effects",{"type":43,"value":2730},", while expressions always return a result and often do not have side effects at all.\"",{"type":38,"tag":790,"props":2732,"children":2734},{"code":2733},"// A statement\nprint('Hello, World.')\n// An expression:\nX=your data\nprint (X)\n",[2735],{"type":38,"tag":559,"props":2736,"children":2737},{"__ignoreMap":8},[2738],{"type":43,"value":2733},{"type":38,"tag":39,"props":2740,"children":2741},{},[2742],{"type":43,"value":2743},"Currently or before PHP 8.0 throw was a statement. Changing the Throw statement to expression helps us to write structures like this:",{"type":38,"tag":790,"props":2745,"children":2747},{"code":2746},"$triggerError = fn () => throw new MyError();\n\n$foo = $bar['offset'] ?? throw new OffsetDoesNotExist('offset');\n",[2748],{"type":38,"tag":559,"props":2749,"children":2750},{"__ignoreMap":8},[2751],{"type":43,"value":2746},{"type":38,"tag":1759,"props":2753,"children":2755},{"id":2754},"inheritance-with-private-methods",[2756],{"type":43,"value":547},{"type":38,"tag":39,"props":2758,"children":2759},{},[2760],{"type":43,"value":2761},"Before PHP 8.0 the engine checked the public, protected and private methods signatures in the same way. However, this check was unnecessary because private methods won't be accessible by child classes. So there was extra not very useful check on private methods.",{"type":38,"tag":1759,"props":2763,"children":2765},{"id":2764},"weak-maps",[2766],{"type":43,"value":552},{"type":38,"tag":39,"props":2768,"children":2769},{},[2770,2772,2779],{"type":43,"value":2771},"PHP 8.0 implements Weak maps upon ",{"type":38,"tag":61,"props":2773,"children":2776},{"href":2774,"rel":2775},"https://wiki.php.net/rfc/weakrefs",[65],[2777],{"type":43,"value":2778},"Weak References",{"type":43,"value":2780}," functionality which was introduced in PHP 7.4.",{"type":38,"tag":2705,"props":2782,"children":2783},{},[2784],{"type":38,"tag":39,"props":2785,"children":2786},{},[2787],{"type":43,"value":2788},"\"Weak References allow the programmer to retain a reference to an object which does not prevent the object from being destroyed; They are useful for implementing cache like structures. They are currently supported in PHP by extension.\"",{"type":38,"tag":39,"props":2790,"children":2791},{},[2792],{"type":43,"value":2793},"Let's see when will be Weak maps useful:",{"type":38,"tag":2705,"props":2795,"children":2796},{},[2797],{"type":38,"tag":39,"props":2798,"children":2799},{},[2800,2802,2807],{"type":43,"value":2801},"\"Take the example of ORMs, they often implement caches which hold references to entity classes to improve the performance of relations between entities. These entity objects can not be garbage collected, as long as this cache has a reference to them, even if the cache is the ",{"type":38,"tag":76,"props":2803,"children":2804},{},[2805],{"type":43,"value":2806},"only",{"type":43,"value":2808}," thing referencing them.\"",{"type":38,"tag":2705,"props":2810,"children":2811},{},[2812],{"type":38,"tag":39,"props":2813,"children":2814},{},[2815],{"type":43,"value":2816},"\"If this caching layer uses weak references and maps instead, PHP will garbage collect these objects when nothing else references them anymore. Especially in the case of ORMs, which can manage several hundred, if not thousands of entities within a request; weak maps can offer a better, more resource-friendly way of dealing with these objects.\"",{"type":38,"tag":790,"props":2818,"children":2820},{"code":2819},"class Foo \n{\n    private WeakMap $cache;\n \n    public function getSomethingWithCaching(object $obj): object\n    {\n        return $this->cache[$obj]\n           ??= $this->computeSomethingExpensive($obj);\n    }\n}\n",[2821],{"type":38,"tag":559,"props":2822,"children":2823},{"__ignoreMap":8},[2824],{"type":43,"value":2819},{"type":38,"tag":1759,"props":2826,"children":2827},{"id":1761},[2828],{"type":43,"value":2829},"Useful Topic related Links",{"type":38,"tag":39,"props":2831,"children":2832},{},[2833],{"type":38,"tag":61,"props":2834,"children":2836},{"href":1770,"rel":2835},[65],[2837],{"type":43,"value":1774},{"type":38,"tag":1759,"props":2839,"children":2840},{"id":2390},[2841],{"type":43,"value":2393},{"type":38,"tag":39,"props":2843,"children":2844},{},[2845],{"type":38,"tag":61,"props":2846,"children":2847},{"href":2261},[2848],{"type":43,"value":2849},"[3] New PHP8 Constructor property promotion, static return, mixed type features",{"title":8,"searchDepth":685,"depth":685,"links":2851},[],"content:blog-posts:4-php-8-0-throw-expression-inheritance-with-private-methods-weak-maps.md","blog-posts/4-php-8-0-throw-expression-inheritance-with-private-methods-weak-maps.md","blog-posts/4-php-8-0-throw-expression-inheritance-with-private-methods-weak-maps",{"_path":2856,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2857,"description":2858,"seoTitle":2859,"seoDescription":2860,"keywords":2861,"image":710,"alt":1268,"ogImage":710,"tags":2866,"categories":2867,"published":25,"author":26,"link":2856,"date":2868,"sitemap":2869,"body":2873,"_type":693,"_id":3108,"_source":695,"_file":3109,"_stem":3110,"_extension":698},"/blog-posts/5-how-to-use-composition-api-in-vuejs","[5] How to use Composition API in Vue.js","A beginner's guide to leveraging the Composition API in Vue.js for modular and reusable code.","Vue.js Composition API Guide","Understand how to use Vue.js Composition API to make your applications more modular, reusable, and maintainable.",[2862,2863,2864,2865],"Composition API in Vue.js","Vue.js modular code","Vue.js Composition tips","frontend architecture with Vue",[21,713,714],[21,713,714],"2022-03-14",{"loc":2870,"lastmod":2868,"changefreq":30,"priority":31,"images":2871},"/blog-posts/5-how-to-use-composition-api-in-vuejs/",[2872],{"loc":710},{"type":35,"children":2874,"toc":3103},[2875,2881,2886,2943,2956,2961,2967,2972,3047,3057,3071,3075],{"type":38,"tag":46,"props":2876,"children":2878},{"id":2877},"a-brief-introduction-to-composition-api",[2879],{"type":43,"value":2880},"A brief introduction to Composition API",{"type":38,"tag":39,"props":2882,"children":2883},{},[2884],{"type":43,"value":2885},"Composition API is an umbrella term that covers different APIs. It allows the component author to use imported functions instead of declaring options. As a result, the following APIs are available:",{"type":38,"tag":53,"props":2887,"children":2888},{},[2889,2907,2925],{"type":38,"tag":57,"props":2890,"children":2891},{},[2892,2894],{"type":43,"value":2893},"Reactivity API\n",{"type":38,"tag":53,"props":2895,"children":2896},{},[2897,2902],{"type":38,"tag":57,"props":2898,"children":2899},{},[2900],{"type":43,"value":2901},"ref()",{"type":38,"tag":57,"props":2903,"children":2904},{},[2905],{"type":43,"value":2906},"reactive()",{"type":38,"tag":57,"props":2908,"children":2909},{},[2910,2912],{"type":43,"value":2911},"Lifecycle Hooks\n",{"type":38,"tag":53,"props":2913,"children":2914},{},[2915,2920],{"type":38,"tag":57,"props":2916,"children":2917},{},[2918],{"type":43,"value":2919},"onMounted()",{"type":38,"tag":57,"props":2921,"children":2922},{},[2923],{"type":43,"value":2924},"onUnmounted()",{"type":38,"tag":57,"props":2926,"children":2927},{},[2928,2930],{"type":43,"value":2929},"Dependency Injection\n",{"type":38,"tag":53,"props":2931,"children":2932},{},[2933,2938],{"type":38,"tag":57,"props":2934,"children":2935},{},[2936],{"type":43,"value":2937},"provide()",{"type":38,"tag":57,"props":2939,"children":2940},{},[2941],{"type":43,"value":2942},"inject()",{"type":38,"tag":39,"props":2944,"children":2945},{},[2946,2948,2954],{"type":43,"value":2947},"It is a built-in feature of VueJS3. However, it is available for Vue2 also with a plugin. (",{"type":38,"tag":61,"props":2949,"children":2952},{"href":2950,"rel":2951},"https://github.com/vuejs/composition-api",[65],[2953],{"type":43,"value":2950},{"type":43,"value":2955},"). And it works with the script setup syntax as well.",{"type":38,"tag":39,"props":2957,"children":2958},{},[2959],{"type":43,"value":2960},"Although it is NOT functional programming, It uses Vue's mutable fine-grained reactivity paradigm. ",{"type":38,"tag":46,"props":2962,"children":2964},{"id":2963},"what-are-the-benefits-of-using-composition-api",[2965],{"type":43,"value":2966},"What are the benefits of using Composition API?",{"type":38,"tag":39,"props":2968,"children":2969},{},[2970],{"type":43,"value":2971},"So Competition API performs better in five main area over the Options API are:",{"type":38,"tag":53,"props":2973,"children":2974},{},[2975,2998,3016,3029],{"type":38,"tag":57,"props":2976,"children":2977},{},[2978,2980],{"type":43,"value":2979},"Better Logic Reusability\n",{"type":38,"tag":53,"props":2981,"children":2982},{},[2983,2988,2993],{"type":38,"tag":57,"props":2984,"children":2985},{},[2986],{"type":43,"value":2987},"Because of the composable functions.",{"type":38,"tag":57,"props":2989,"children":2990},{},[2991],{"type":43,"value":2992},"Because It makes possible to write clean & efficient logically reusable",{"type":38,"tag":57,"props":2994,"children":2995},{},[2996],{"type":43,"value":2997},"And due to we do not need to use mixins",{"type":38,"tag":57,"props":2999,"children":3000},{},[3001,3003],{"type":43,"value":3002},"Flexible Code Organization approach\n",{"type":38,"tag":53,"props":3004,"children":3005},{},[3006,3011],{"type":38,"tag":57,"props":3007,"children":3008},{},[3009],{"type":43,"value":3010},"Options API can be viable for small projects.",{"type":38,"tag":57,"props":3012,"children":3013},{},[3014],{"type":43,"value":3015},"However, beyond a certain complexity threshold, the Options API becomes limited.",{"type":38,"tag":57,"props":3017,"children":3018},{},[3019,3021],{"type":43,"value":3020},"Type Interface (provides TypeScript compatibility)\n",{"type":38,"tag":53,"props":3022,"children":3023},{},[3024],{"type":38,"tag":57,"props":3025,"children":3026},{},[3027],{"type":43,"value":3028},"This feature helps tp write more robust code",{"type":38,"tag":57,"props":3030,"children":3031},{},[3032,3034,3039],{"type":43,"value":3033},"Smaller production Bundle ",{"type":38,"tag":76,"props":3035,"children":3036},{},[3037],{"type":43,"value":3038},"althouh you will not see the benefits in performance point of view",{"type":38,"tag":53,"props":3040,"children":3041},{},[3042],{"type":38,"tag":57,"props":3043,"children":3044},{},[3045],{"type":43,"value":3046},"Due to the script setup is more efficient and minification-friendly than the Options API approach",{"type":38,"tag":3048,"props":3049,"children":3056},"iframe",{"width":3050,"height":3051,"frameBorder":3052,"src":3053,"scrolling":3054,"style":3055},600,400,"0","https://www.mindmeister.com/maps/public_map_shell/2196777565/vuejs?width=600&height=400&z=auto&t=4vY88D48KZ","no","overflow: hidden; margin-bottom: 5px;",[],{"type":38,"tag":39,"props":3058,"children":3059},{},[3060,3062,3069],{"type":43,"value":3061},"You can check my mindmap above for more Composition related info or check the ",{"type":38,"tag":61,"props":3063,"children":3066},{"href":3064,"rel":3065},"https://vuejs.org/guide/extras/composition-api-faq.html#relationship-with-options-api",[65],[3067],{"type":43,"value":3068},"spec",{"type":43,"value":3070}," of the Composition API.",{"type":38,"tag":46,"props":3072,"children":3073},{"id":675},[3074],{"type":43,"value":678},{"type":38,"tag":39,"props":3076,"children":3077},{},[3078,3080,3085,3087,3092,3094,3101],{"type":43,"value":3079},"In the previous VueJS related topic, I detailed the Options API main features [",{"type":38,"tag":61,"props":3081,"children":3082},{"href":1799},[3083],{"type":43,"value":3084},"Options API1",{"type":43,"value":3086},", ",{"type":38,"tag":61,"props":3088,"children":3089},{"href":2408},[3090],{"type":43,"value":3091},"Options Api2",{"type":43,"value":3093},"]. In this post, I have tried to dive into the Composition API. I did so because I use VueJS on the Front-End side for a project, so I need to become familiar with this topic. I hope these notes will have benefits for others, not just me. Anyway here is a ",{"type":38,"tag":61,"props":3095,"children":3098},{"href":3096,"rel":3097},"https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf",[65],[3099],{"type":43,"value":3100},"cheatsheet",{"type":43,"value":3102}," about Composition AP.",{"title":8,"searchDepth":685,"depth":685,"links":3104},[3105,3106,3107],{"id":2877,"depth":685,"text":2880},{"id":2963,"depth":685,"text":2966},{"id":675,"depth":685,"text":678},"content:blog-posts:5-how-to-use-composition-api-in-vuejs.md","blog-posts/5-how-to-use-composition-api-in-vuejs.md","blog-posts/5-how-to-use-composition-api-in-vuejs",{"_path":3112,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3113,"description":3114,"seoTitle":3115,"seoDescription":3116,"keywords":3117,"image":18,"alt":8,"ogImage":18,"tags":3121,"categories":3122,"published":25,"author":26,"link":3112,"date":3123,"sitemap":3124,"body":3128,"_type":693,"_id":3264,"_source":695,"_file":3265,"_stem":3266,"_extension":698},"/blog-posts/5-php-8-0-allowing-class-on-objects-non-capturing-catches-and-trailing-comma-in-parameter-lists","[5] PHP 8.0 Allowing class on objects, non-capturing catches, and trailing comma in parameter lists","Learn about class usage on objects, non-capturing catches, and the trailing comma in parameter lists introduced in PHP 8.0.","PHP 8.0 Class on Objects, Non-Capturing Catches & Commas","Discover PHP 8.0 additions including class support on objects, non-capturing catches, and trailing commas in parameter lists.",[3118,3119,3120,1618],"PHP 8 class on objects","non-capturing catches in PHP","trailing comma parameter list",[21,22,23],[21,22,23],"2022-04-24",{"loc":3125,"lastmod":3123,"changefreq":30,"priority":31,"images":3126},"/blog-posts/5-php-8-0-allowing-class-on-objects-non-capturing-catches-and-trailing-comma-in-parameter-lists/",[3127],{"loc":18},{"type":35,"children":3129,"toc":3259},[3130,3153,3159,3164,3172,3177,3185,3190,3195,3203,3208,3216,3222,3227,3235,3239,3247,3251],{"type":38,"tag":39,"props":3131,"children":3132},{},[3133,3135,3140,3142,3146,3148,3152],{"type":43,"value":3134},"This is the ",{"type":38,"tag":72,"props":3136,"children":3137},{},[3138],{"type":43,"value":3139},"fifth part",{"type":43,"value":3141}," of the series and in the current post, I want to go through the Allowing class on objects, Non-capturing catches, and Trailing comma in parameter lists. You can see the full list of features ",{"type":38,"tag":61,"props":3143,"children":3144},{"href":5},[3145],{"type":43,"value":1061},{"type":43,"value":3147},". Furthermore, you can read the previous part of the series ",{"type":38,"tag":61,"props":3149,"children":3150},{"href":2659},[3151],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":3154,"children":3156},{"id":3155},"allowing-class-on-objects",[3157],{"type":43,"value":3158},"Allowing class on objects",{"type":38,"tag":39,"props":3160,"children":3161},{},[3162],{"type":43,"value":3163},"At the moment, in order to get the name of a class we need to use the get_class() method. You could use this feature as you can see below.",{"type":38,"tag":790,"props":3165,"children":3167},{"code":3166},"\u003C?php\n\nclass foo {\n}\n\n// create an object\n$bar = new foo();\n\n// external call\necho \"The name is \" . get_class($bar) . \"\\n\";\n?>\n",[3168],{"type":38,"tag":559,"props":3169,"children":3170},{"__ignoreMap":8},[3171],{"type":43,"value":3166},{"type":38,"tag":39,"props":3173,"children":3174},{},[3175],{"type":43,"value":3176},"With this new feature you will get the same result as you can see it:",{"type":38,"tag":790,"props":3178,"children":3180},{"code":3179},"\u003C?php\n\nclass foo {\n}\n\n// create an object\n$bar = new foo();\n\n// external call\necho \"The name is \" . $bar::class . \"\\n\";\n?>\n",[3181],{"type":38,"tag":559,"props":3182,"children":3183},{"__ignoreMap":8},[3184],{"type":43,"value":3179},{"type":38,"tag":46,"props":3186,"children":3188},{"id":3187},"non-capturing-catches",[3189],{"type":43,"value":571},{"type":38,"tag":39,"props":3191,"children":3192},{},[3193],{"type":43,"value":3194},"Before PHP 8.0 we had to pass a variable in the catch side of the try-catch block even if we did not want to use it. So we had to write a code like this:",{"type":38,"tag":790,"props":3196,"children":3198},{"code":3197},"try {\n    // Something goes wrong\n} catch (MySpecialException $exception) {\n    Log::error(\"Something went wrong\");\n}\n",[3199],{"type":38,"tag":559,"props":3200,"children":3201},{"__ignoreMap":8},[3202],{"type":43,"value":3197},{"type":38,"tag":39,"props":3204,"children":3205},{},[3206],{"type":43,"value":3207},"With PHP 8.0 we can omit to pass that variable to the catch block.",{"type":38,"tag":790,"props":3209,"children":3211},{"code":3210},"try {\n    // Something goes wrong\n} catch (MySpecialException) {\n    Log::error(\"Something went wrong\");\n}\n",[3212],{"type":38,"tag":559,"props":3213,"children":3214},{"__ignoreMap":8},[3215],{"type":43,"value":3210},{"type":38,"tag":46,"props":3217,"children":3219},{"id":3218},"trailing-commas-in-parameter-lists",[3220],{"type":43,"value":3221},"Trailing commas in parameter lists",{"type":38,"tag":39,"props":3223,"children":3224},{},[3225],{"type":43,"value":3226},"Before PHP 8.0 you could not add a comma at the end of the parameter list. In the new version of PHP, you can do that.",{"type":38,"tag":790,"props":3228,"children":3230},{"code":3229},"public function(\n    string $parameterA,\n    int $parameterB,\n    Foo $objectfoo,\n) {\n    // …\n}\n",[3231],{"type":38,"tag":559,"props":3232,"children":3233},{"__ignoreMap":8},[3234],{"type":43,"value":3229},{"type":38,"tag":1759,"props":3236,"children":3237},{"id":1761},[3238],{"type":43,"value":2829},{"type":38,"tag":39,"props":3240,"children":3241},{},[3242],{"type":38,"tag":61,"props":3243,"children":3245},{"href":1770,":target":1094,"rel":3244},[65],[3246],{"type":43,"value":1774},{"type":38,"tag":1759,"props":3248,"children":3249},{"id":2390},[3250],{"type":43,"value":2393},{"type":38,"tag":39,"props":3252,"children":3253},{},[3254],{"type":38,"tag":61,"props":3255,"children":3256},{"href":2659},[3257],{"type":43,"value":3258},"PHP 8.0: Throw expression, Inheritance with private methods, Weak maps",{"title":8,"searchDepth":685,"depth":685,"links":3260},[3261,3262,3263],{"id":3155,"depth":685,"text":3158},{"id":3187,"depth":685,"text":571},{"id":3218,"depth":685,"text":3221},"content:blog-posts:5-php-8-0-allowing-class-on-objects-non-capturing-catches-and-trailing-comma-in-parameter-lists.md","blog-posts/5-php-8-0-allowing-class-on-objects-non-capturing-catches-and-trailing-comma-in-parameter-lists.md","blog-posts/5-php-8-0-allowing-class-on-objects-non-capturing-catches-and-trailing-comma-in-parameter-lists",{"_path":3268,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3269,"description":3270,"seoTitle":3271,"seoDescription":3272,"keywords":3273,"image":710,"alt":1268,"ogImage":710,"tags":3278,"categories":3279,"published":25,"author":26,"link":3268,"date":3280,"sitemap":3281,"body":3285,"_type":693,"_id":3486,"_source":695,"_file":3487,"_stem":3488,"_extension":698},"/blog-posts/6-mixins-and-the-reason-for-the-birth-of-composition-api","[6] Mixins and the reason for the birth of Composition API","Understand why Vue.js Composition API replaced mixins and how it addresses their shortcomings for clean coding.","Mixins vs. Composition API in Vue.js","Learn why Vue.js Composition API emerged as a better alternative to mixins for modular, reusable, and scalable coding.",[3274,3275,3276,3277],"Vue.js mixins","Composition API vs mixins","Vue modular coding","frontend best practices",[21,713,714],[21,713,714],"2022-03-18",{"loc":3282,"lastmod":3280,"changefreq":30,"priority":31,"images":3283},"/blog-posts/6-mixins-and-the-reason-for-the-birth-of-composition-api/",[3284],{"loc":710},{"type":35,"children":3286,"toc":3478},[3287,3293,3303,3309,3314,3319,3327,3335,3343,3351,3363,3369,3374,3382,3394,3399,3405,3410,3418,3423,3429,3455,3459],{"type":38,"tag":46,"props":3288,"children":3290},{"id":3289},"composition-api-summary",[3291],{"type":43,"value":3292},"Composition API summary",{"type":38,"tag":39,"props":3294,"children":3295},{},[3296,3298,3301],{"type":43,"value":3297},"Composition API is an alternative syntax for VUE JS for component writing. It is optional, so you are not obliged to use it. It is not a replacement for the Options API, so you can also continue using it.",{"type":38,"tag":1303,"props":3299,"children":3300},{},[],{"type":43,"value":3302},"\nTo dispel some myths, it neither improves the performance nor the security. The Composition API was born because Vue 2 had far from ideal TypeScript support and the Vue Team wanted to provide a better one. So this was the main reason why they wrote it. Besides, it also has several other benefits next to the TypeScript support, like code organization and reusability. Although Vue 2 has provided mixins for reusability, that is still available in Vue 3. Mixins are not as flexible as they should be.",{"type":38,"tag":46,"props":3304,"children":3306},{"id":3305},"lets-see-how-mixins-work",[3307],{"type":43,"value":3308},"Let's see how Mixins work",{"type":38,"tag":39,"props":3310,"children":3311},{},[3312],{"type":43,"value":3313},"Mixins are a flexible way to distribute functionalities for Vue components, but they have drawbacks. Mixins do not work on their own and do not mean to. They are objects that will merge with an instance of Vue or a component. Mixins object must match the option names in a components options object.",{"type":38,"tag":39,"props":3315,"children":3316},{},[3317],{"type":43,"value":3318},"In the following code, we will create a root component that will use the options properties of the mixin as it were the property of a component.",{"type":38,"tag":790,"props":3320,"children":3322},{"code":3321},"export default {\n  data(){\n    return{\n      offset: 0,\n    }\n  },\n  mounted(){\n    window.addEventListener('scroll', this.update);\n  },\n  methods:{\n    update(){\n      this.offset = window.pageYOffset;\n    }\n  }\n}\n",[3323],{"type":38,"tag":559,"props":3324,"children":3325},{"__ignoreMap":8},[3326],{"type":43,"value":3321},{"type":38,"tag":39,"props":3328,"children":3329},{},[3330],{"type":38,"tag":76,"props":3331,"children":3332},{},[3333],{"type":43,"value":3334},"this is the code of the mixins.js",{"type":38,"tag":790,"props":3336,"children":3338},{"code":3337},"\u003Ctemplate>\n  \u003Cdiv id=\"app\">\n    \u003Cdiv class=\"scrollPosition\">\n      {{offset}}\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nimport mixin from \"./mixin\";\nexport default {\n  name: 'App',\n  mixins:[mixin]\n};\n\u003C/script>\n\n\u003Cstyle>\n#app {\n  width: 100%;\n  height: 3000px;\n  position: relative;\n}\n.scrollPosition{\n  position:fixed;\n  left: 10px;\n  right: 10px;\n}\n\u003C/style>\n",[3339],{"type":38,"tag":559,"props":3340,"children":3341},{"__ignoreMap":8},[3342],{"type":43,"value":3337},{"type":38,"tag":39,"props":3344,"children":3345},{},[3346],{"type":38,"tag":76,"props":3347,"children":3348},{},[3349],{"type":43,"value":3350},"code of the root component App. vue",{"type":38,"tag":39,"props":3352,"children":3353},{},[3354,3356,3361],{"type":43,"value":3355},"Between the script tags in the main component, we have imported the separated mixin file and we set the mixins array property. So we could use the ",{"type":38,"tag":72,"props":3357,"children":3358},{},[3359],{"type":43,"value":3360},"offset",{"type":43,"value":3362}," property which was initialized in the mixin file.",{"type":38,"tag":46,"props":3364,"children":3366},{"id":3365},"the-reason-for-the-composition-api",[3367],{"type":43,"value":3368},"The reason for the Composition API",{"type":38,"tag":39,"props":3370,"children":3371},{},[3372],{"type":43,"value":3373},"Due to mixins drawbacks, Vue launched the Composition API. Let's define an offset property with a different value in the component.",{"type":38,"tag":790,"props":3375,"children":3377},{"code":3376},"...\nexport default {\n  name: 'App',\n  mixins: [mixin],\n  // This will have priority over the mixin version\n  data() {\n    return {\n      offset: 110,\n    };\n  },\n};\n\u003C/script>\n\n\u003Cstyle>\n...\n",[3378],{"type":38,"tag":559,"props":3379,"children":3380},{"__ignoreMap":8},[3381],{"type":43,"value":3376},{"type":38,"tag":39,"props":3383,"children":3384},{},[3385,3387,3392],{"type":43,"value":3386},"If we run the code leaving the mixin as it is above. We can see the component property will have \"priority\" over the Mixin value. (",{"type":38,"tag":76,"props":3388,"children":3389},{},[3390],{"type":43,"value":3391},"In fact, this is a drawback that we call Namespace collision",{"type":43,"value":3393},"). It is because Mixin properties have lower levels than the component's properties. So the value of the component property will be used. If there is no collision in the property names, they will live next to each other.",{"type":38,"tag":39,"props":3395,"children":3396},{},[3397],{"type":43,"value":3398},"Components data stay isolated all the time. So there will be no leaking between them. They remain isolated and share data between the mixin and the data with multiple copies of that property. One component does not influence any other component's data, even if they are registering the same mixin. And they will have a unique version of data. So mixins can be useful for generating generic functions that can be shared across multiple components.",{"type":38,"tag":46,"props":3400,"children":3402},{"id":3401},"how-do-lifecycle-functions-are-treated-with-mixins",[3403],{"type":43,"value":3404},"How do lifecycle functions are treated with mixins?",{"type":38,"tag":39,"props":3406,"children":3407},{},[3408],{"type":43,"value":3409},"If a mixin and a component have the same lifecycle definition then both will run. This allows defining lifecycle functions without them conflicting with another freely. We can test it with the following code that you need to add to the App.vue component's code.",{"type":38,"tag":790,"props":3411,"children":3413},{"code":3412},"  mounted() {\n    console.log('App mounted lifecycle function');\n  }\n",[3414],{"type":38,"tag":559,"props":3415,"children":3416},{"__ignoreMap":8},[3417],{"type":43,"value":3412},{"type":38,"tag":39,"props":3419,"children":3420},{},[3421],{"type":43,"value":3422},"If you build and run the application you should see this message in the console while the scroll position and that means Mixin's lifecycle hooks work with component one. So they both run.",{"type":38,"tag":46,"props":3424,"children":3426},{"id":3425},"the-issue-with-mixins",[3427],{"type":43,"value":3428},"The issue with Mixins",{"type":38,"tag":53,"props":3430,"children":3431},{},[3432],{"type":38,"tag":57,"props":3433,"children":3434},{},[3435,3437],{"type":43,"value":3436},"Namespace collision\n",{"type":38,"tag":53,"props":3438,"children":3439},{},[3440,3445,3450],{"type":38,"tag":57,"props":3441,"children":3442},{},[3443],{"type":43,"value":3444},"You will not be notified",{"type":38,"tag":57,"props":3446,"children":3447},{},[3448],{"type":43,"value":3449},"You have to rename the property and make sure you have unique values",{"type":38,"tag":57,"props":3451,"children":3452},{},[3453],{"type":43,"value":3454},"Collision can happen between multiple mixin properties too",{"type":38,"tag":46,"props":3456,"children":3457},{"id":675},[3458],{"type":43,"value":678},{"type":38,"tag":39,"props":3460,"children":3461},{},[3462,3467,3469,3476],{"type":38,"tag":61,"props":3463,"children":3464},{"href":2856},[3465],{"type":43,"value":3466},"In the previous VueJS related topic",{"type":43,"value":3468},", I have already written about the Composition API. In this post, I have added some extra details while I have tried to detail ",{"type":38,"tag":61,"props":3470,"children":3473},{"href":3471,"rel":3472},"https://vuejs.org/api/options-composition.html#mixins",[65],[3474],{"type":43,"value":3475},"VueJS's Mixins feature",{"type":43,"value":3477}," and the issue with Mixins that partly inspired the developers of VueJS to implement the Composition API.",{"title":8,"searchDepth":685,"depth":685,"links":3479},[3480,3481,3482,3483,3484,3485],{"id":3289,"depth":685,"text":3292},{"id":3305,"depth":685,"text":3308},{"id":3365,"depth":685,"text":3368},{"id":3401,"depth":685,"text":3404},{"id":3425,"depth":685,"text":3428},{"id":675,"depth":685,"text":678},"content:blog-posts:6-mixins-and-the-reason-for-the-birth-of-composition-api.md","blog-posts/6-mixins-and-the-reason-for-the-birth-of-composition-api.md","blog-posts/6-mixins-and-the-reason-for-the-birth-of-composition-api",{"_path":3490,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3491,"description":3492,"seoTitle":3493,"seoDescription":3494,"keywords":3495,"image":18,"alt":8,"ogImage":18,"tags":3500,"categories":3501,"published":25,"author":26,"link":3490,"date":3502,"sitemap":3503,"body":3507,"_type":693,"_id":3610,"_source":695,"_file":3611,"_stem":3612,"_extension":698},"/blog-posts/6-php-8-0-datetime-objects-from-interface-stringable-interface-and-str_contains-function","[6] PHP 8.0 DateTime objects from interface, stringable interface, and str_contains function","Explore PHP 8.0's updates including DateTime objects from interfaces, the Stringable interface, and str_contains function.","PHP 8.0 DateTime Objects, Stringable Interface & str_contains","Learn about PHP 8.0 features like DateTime object creation from interfaces, the Stringable interface, and str_contains function.",[3496,3497,3498,3499],"PHP 8 DateTime interface","str_contains function in PHP 8","Stringable in PHP","PHP 8 functionality",[21,22,23],[21,22,23],"2022-04-28",{"loc":3504,"lastmod":3502,"changefreq":30,"priority":31,"images":3505},"/blog-posts/6-php-8-0-datetime-objects-from-interface-stringable-interface-and-str_contains-function/",[3506],{"loc":18},{"type":35,"children":3508,"toc":3605},[3509,3531,3536,3544,3549,3554,3562,3568,3573,3581,3585,3593,3597],{"type":38,"tag":39,"props":3510,"children":3511},{},[3512,3513,3518,3520,3524,3526,3530],{"type":43,"value":3134},{"type":38,"tag":72,"props":3514,"children":3515},{},[3516],{"type":43,"value":3517},"sixth part",{"type":43,"value":3519}," of the series and in the current post, I want to go through the DateTime objects 'From' interface, Stringable interface, and str_contains function. You can see the full list of features ",{"type":38,"tag":61,"props":3521,"children":3522},{"href":5},[3523],{"type":43,"value":1061},{"type":43,"value":3525},". Furthermore, you can read the fifth part of the series ",{"type":38,"tag":61,"props":3527,"children":3528},{"href":3112},[3529],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":3532,"children":3534},{"id":3533},"create-datetime-objects-from-the-interface",[3535],{"type":43,"value":586},{"type":38,"tag":790,"props":3537,"children":3539},{"code":3538},"DateTime::createFromInterface(DateTimeInterface $other);\n\nDateTimeImmutable::createFromInterface(DateTimeInterface $other);\n",[3540],{"type":38,"tag":559,"props":3541,"children":3542},{"__ignoreMap":8},[3543],{"type":43,"value":3538},{"type":38,"tag":46,"props":3545,"children":3547},{"id":3546},"new-stringable-interface",[3548],{"type":43,"value":581},{"type":38,"tag":39,"props":3550,"children":3551},{},[3552],{"type":43,"value":3553},"The Stringable interface can be used as a type hint to anything that implements __toString(). When we implement the __toString() method that will automatically implement the interface behind the scene.",{"type":38,"tag":790,"props":3555,"children":3557},{"code":3556},"class Foo\n{\n    public function __toString(): string\n    {\n        return 'foo';\n    }\n}\n\nfunction bar(string|Stringable $stringable) { /* … */ }\n\nbar(new Foo());\nbar('abc');\n",[3558],{"type":38,"tag":559,"props":3559,"children":3560},{"__ignoreMap":8},[3561],{"type":43,"value":3556},{"type":38,"tag":46,"props":3563,"children":3565},{"id":3564},"new-str_contains-function",[3566],{"type":43,"value":3567},"New str_contains function",{"type":38,"tag":39,"props":3569,"children":3570},{},[3571],{"type":43,"value":3572},"This function works as the in_array function but it is for Strings. We can check whether the word is in the string expression or not.",{"type":38,"tag":790,"props":3574,"children":3576},{"code":3575},"if (str_contains('string with lots of words', 'words')) { /* … */ }\n",[3577],{"type":38,"tag":559,"props":3578,"children":3579},{"__ignoreMap":8},[3580],{"type":43,"value":3575},{"type":38,"tag":1759,"props":3582,"children":3583},{"id":1761},[3584],{"type":43,"value":2829},{"type":38,"tag":39,"props":3586,"children":3587},{},[3588],{"type":38,"tag":61,"props":3589,"children":3591},{"href":1770,":target":1094,"rel":3590},[65],[3592],{"type":43,"value":1774},{"type":38,"tag":1759,"props":3594,"children":3595},{"id":2390},[3596],{"type":43,"value":2393},{"type":38,"tag":39,"props":3598,"children":3599},{},[3600],{"type":38,"tag":61,"props":3601,"children":3602},{"href":3112},[3603],{"type":43,"value":3604},"PHP 8.0: Allowing class on objects, Non-capturing catches, and Trailing comma in parameter lists",{"title":8,"searchDepth":685,"depth":685,"links":3606},[3607,3608,3609],{"id":3533,"depth":685,"text":586},{"id":3546,"depth":685,"text":581},{"id":3564,"depth":685,"text":3567},"content:blog-posts:6-php-8-0-datetime-objects-from-interface-stringable-interface-and-str_contains-function.md","blog-posts/6-php-8-0-datetime-objects-from-interface-stringable-interface-and-str_contains-function.md","blog-posts/6-php-8-0-datetime-objects-from-interface-stringable-interface-and-str_contains-function",{"_path":3614,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3615,"description":3616,"seoTitle":3617,"seoDescription":3618,"keywords":3619,"image":18,"alt":3624,"ogImage":18,"tags":3625,"categories":3626,"published":25,"author":26,"link":3614,"date":3627,"sitemap":3628,"body":3632,"_type":693,"_id":3733,"_source":695,"_file":3734,"_stem":3735,"_extension":698},"/blog-posts/7-php-8-0-string-start-and-string-end-fdiv-and-get_debug_type-functions","[7] PHP 8.0 string start and string end, fdiv and get_debug_type functions","Discover PHP 8.0 updates like string start/end checking, floating-point division (fdiv), and the get_debug_type function.","PHP 8.0 String Start/End, fdiv & get_debug_type","Explore PHP 8.0 features such as string start/end methods, fdiv for floating-point division, and the get_debug_type function.",[3620,3621,3622,3623],"PHP 8 string start end","fdiv function in PHP","get_debug_type PHP 8","PHP 8 features and functions","PHP 8",[21,22,23],[21,22,23],"2022-05-02",{"loc":3629,"lastmod":3627,"changefreq":30,"priority":31,"images":3630},"/blog-posts/7-php-8-0-string-start-and-string-end-fdiv-and-get_debug_type-functions/",[3631],{"loc":18},{"type":35,"children":3633,"toc":3728},[3634,3656,3662,3667,3675,3681,3693,3699,3704,3708,3716,3720],{"type":38,"tag":39,"props":3635,"children":3636},{},[3637,3638,3643,3645,3649,3651,3655],{"type":43,"value":3134},{"type":38,"tag":72,"props":3639,"children":3640},{},[3641],{"type":43,"value":3642},"seventh part",{"type":43,"value":3644}," of the series, and in the current post, I want to go through the str_starts_with and str_ends_with, fdiv, get_debug_type functions of PHP8. You can see the full list of features ",{"type":38,"tag":61,"props":3646,"children":3647},{"href":5},[3648],{"type":43,"value":1061},{"type":43,"value":3650},". Furthermore, you can read the sixth part of the series ",{"type":38,"tag":61,"props":3652,"children":3653},{"href":3490},[3654],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":3657,"children":3659},{"id":3658},"the-str_starts_with-and-str_ends_with-functions",[3660],{"type":43,"value":3661},"The str_starts_with and str_ends_with functions",{"type":38,"tag":39,"props":3663,"children":3664},{},[3665],{"type":43,"value":3666},"PHP8 introduces several new functions into the language. The str_starts_with and the str_ends_with functions are new string-related functions. They return a boolean value based on whether the string is available or not, in the beginning, or at the end of the other string.",{"type":38,"tag":790,"props":3668,"children":3670},{"code":3669},"str_starts_with('haystack', 'hay'); // true\nstr_ends_with('haystack', 'stack'); // true\n",[3671],{"type":38,"tag":559,"props":3672,"children":3673},{"__ignoreMap":8},[3674],{"type":43,"value":3669},{"type":38,"tag":46,"props":3676,"children":3678},{"id":3677},"the-fdiv-function",[3679],{"type":43,"value":3680},"The fdiv function",{"type":38,"tag":39,"props":3682,"children":3683},{},[3684,3686,3691],{"type":43,"value":3685},"The new ",{"type":38,"tag":559,"props":3687,"children":3689},{"className":3688},[],[3690],{"type":43,"value":608},{"type":43,"value":3692}," function allows division by zero without throwing an error. Instead of the error, it will return with INF, -INF, and NAN depending on the case.",{"type":38,"tag":46,"props":3694,"children":3696},{"id":3695},"the-get_debug_type-functions",[3697],{"type":43,"value":3698},"The get_debug_type functions",{"type":38,"tag":39,"props":3700,"children":3701},{},[3702],{"type":43,"value":3703},"The get_debug_type function returns type information. It is similar to the gettype function but the returning information is much more detailed when we use it with arrays, strings, anonymous classes, and objects.",{"type":38,"tag":39,"props":3705,"children":3706},{},[3707],{"type":43,"value":2829},{"type":38,"tag":39,"props":3709,"children":3710},{},[3711],{"type":38,"tag":61,"props":3712,"children":3714},{"href":1770,":target":1094,"rel":3713},[65],[3715],{"type":43,"value":1774},{"type":38,"tag":39,"props":3717,"children":3718},{},[3719],{"type":43,"value":2393},{"type":38,"tag":39,"props":3721,"children":3722},{},[3723],{"type":38,"tag":61,"props":3724,"children":3725},{"href":3504},[3726],{"type":43,"value":3727},"PHP 8.0 DateTime objects ‘From’ interface, Stringable interface and str_contains function",{"title":8,"searchDepth":685,"depth":685,"links":3729},[3730,3731,3732],{"id":3658,"depth":685,"text":3661},{"id":3677,"depth":685,"text":3680},{"id":3695,"depth":685,"text":3698},"content:blog-posts:7-php-8-0-string-start-and-string-end-fdiv-and-get_debug_type-functions.md","blog-posts/7-php-8-0-string-start-and-string-end-fdiv-and-get_debug_type-functions.md","blog-posts/7-php-8-0-string-start-and-string-end-fdiv-and-get_debug_type-functions",{"_path":3737,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3738,"description":3739,"seoTitle":3740,"seoDescription":3741,"keywords":3742,"image":710,"alt":3747,"ogImage":710,"tags":3748,"categories":3749,"published":25,"author":26,"link":3737,"date":3750,"sitemap":3751,"body":3765,"_type":693,"_id":3965,"_source":695,"_file":3966,"_stem":3967,"_extension":698},"/blog-posts/7-the-installation-process-of-vue-cli","[7] The installation process of Vue CLI","Step-by-step guide to installing Vue CLI and configuring your environment for modern Vue.js development.","How to Install Vue CLI","Learn the step-by-step process of installing Vue CLI and setting up your development environment for Vue.js projects.",[3743,3744,3745,3746],"Vue CLI installation","install Vue CLI steps","Vue.js development setup","Vue environment configuration","Vue",[21,713,714],[21,713,714],"2022-03-22",{"loc":3752,"lastmod":3750,"changefreq":30,"priority":31,"images":3753},"/blog-posts/7-the-installation-process-of-vue-cli/",[3754,3755,3757,3759,3761,3763],{"loc":710},{"loc":3756},"/images/blog-posts/externalibraries.png.webp",{"loc":3758},"/images/blog-posts/application-files.png.webp",{"loc":3760},"/images/blog-posts/vue-clie-list-of-commands.png.webp",{"loc":3762},"/images/blog-posts/vue-cli2.png.webp",{"loc":3764},"/images/blog-posts/npm-run-serve.png.webp",{"type":35,"children":3766,"toc":3960},[3767,3773,3778,3786,3802,3810,3827,3854,3860,3868,3884,3892,3908,3911,3919,3936,3940],{"type":38,"tag":46,"props":3768,"children":3770},{"id":3769},"benefits-of-using-vue-cli",[3771],{"type":43,"value":3772},"Benefits of using VUE CLI",{"type":38,"tag":39,"props":3774,"children":3775},{},[3776],{"type":43,"value":3777},"Vue CLI is a command-line tool of Vue JS. To detail this a bit more we need to talk about the codebases first. A codebase of an application has two main categories:",{"type":38,"tag":53,"props":3779,"children":3780},{},[3781],{"type":38,"tag":57,"props":3782,"children":3783},{},[3784],{"type":43,"value":3785},"External libraries eg:",{"type":38,"tag":1383,"props":3787,"children":3788},{},[3789],{"type":38,"tag":2148,"props":3790,"children":3791},{"style":2150},[3792,3793,3797,3798],{"type":43,"value":2153},{"type":38,"tag":1885,"props":3794,"children":3796},{"style":2156,"src":3756,"alt":3795},"External libraries",[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":3799,"children":3800},{},[3801],{"type":43,"value":3795},{"type":38,"tag":53,"props":3803,"children":3804},{},[3805],{"type":38,"tag":57,"props":3806,"children":3807},{},[3808],{"type":43,"value":3809},"Application files eg:",{"type":38,"tag":1383,"props":3811,"children":3812},{},[3813],{"type":38,"tag":2148,"props":3814,"children":3815},{"style":2150},[3816,3817,3821,3822],{"type":43,"value":2153},{"type":38,"tag":1885,"props":3818,"children":3820},{"style":2156,"src":3758,"alt":3819},"Application files",[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":3823,"children":3824},{},[3825],{"type":43,"value":3826},"Application Files",{"type":38,"tag":39,"props":3828,"children":3829},{},[3830,3832,3839,3841,3845,3847,3852],{"type":43,"value":3831},"These parts of the codebase are independent of each other. Due to this, the maintenance of these structures without a tool would be tiresome. They have to work along with each other. VueJS offers a ",{"type":38,"tag":61,"props":3833,"children":3836},{"href":3834,"rel":3835},"https://vuejs.org/guide/scaling-up/tooling.html",[65],[3837],{"type":43,"value":3838},"Vue CLI",{"type":43,"value":3840}," tool that makes the maintenance and configuration simpler. ",{"type":38,"tag":61,"props":3842,"children":3843},{"href":718},[3844],{"type":43,"value":3838},{"type":43,"value":3846}," is a tool manager that helps to configure different tools that make the task simpler. It can help to build the project either production or development. It can minimize and bundle your project code as well. So we do not need to include the vue.js files in the header, as you have seen in the ",{"type":38,"tag":61,"props":3848,"children":3849},{"href":718},[3850],{"type":43,"value":3851},"previous notes",{"type":43,"value":3853},". Furthermore, it created a server for our application locally.",{"type":38,"tag":46,"props":3855,"children":3857},{"id":3856},"installing-and-checking-available-commands-of-vue-cli",[3858],{"type":43,"value":3859},"Installing and checking available commands of Vue CLI",{"type":38,"tag":790,"props":3861,"children":3863},{"code":3862},"npm install -g @vue/cli\n",[3864],{"type":38,"tag":559,"props":3865,"children":3866},{"__ignoreMap":8},[3867],{"type":43,"value":3862},{"type":38,"tag":1383,"props":3869,"children":3870},{},[3871],{"type":38,"tag":2148,"props":3872,"children":3873},{"style":2150},[3874,3875,3879,3880],{"type":43,"value":2153},{"type":38,"tag":1885,"props":3876,"children":3878},{"style":2156,"src":3760,"alt":3877},"Vue CLI list of commands",[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":3881,"children":3882},{},[3883],{"type":43,"value":3877},{"type":38,"tag":790,"props":3885,"children":3887},{"code":3886},"vue create your-project-name\n",[3888],{"type":38,"tag":559,"props":3889,"children":3890},{"__ignoreMap":8},[3891],{"type":43,"value":3886},{"type":38,"tag":1383,"props":3893,"children":3894},{},[3895],{"type":38,"tag":2148,"props":3896,"children":3897},{"style":2150},[3898,3899,3903,3904],{"type":43,"value":2153},{"type":38,"tag":1885,"props":3900,"children":3902},{"style":2156,"src":3762,"alt":3901},"Options for Vue versions",[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":3905,"children":3906},{},[3907],{"type":43,"value":3901},{"type":38,"tag":1303,"props":3909,"children":3910},{},[],{"type":38,"tag":790,"props":3912,"children":3914},{"code":3913},"cd your-project-name // to step into the installation folder\nnpm run serve // launch the initialized application\n",[3915],{"type":38,"tag":559,"props":3916,"children":3917},{"__ignoreMap":8},[3918],{"type":43,"value":3913},{"type":38,"tag":1383,"props":3920,"children":3921},{},[3922],{"type":38,"tag":2148,"props":3923,"children":3924},{"style":2150},[3925,3926,3930,3931],{"type":43,"value":2153},{"type":38,"tag":1885,"props":3927,"children":3929},{"style":2156,"src":3764,"alt":3928},"npm run serve shows the local address where the application is running",[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":3932,"children":3933},{},[3934],{"type":43,"value":3935},"\n        \"npm run serve\" command will notify you about the local domain where your application is running.\n        ",{"type":38,"tag":46,"props":3937,"children":3938},{"id":1573},[3939],{"type":43,"value":1576},{"type":38,"tag":39,"props":3941,"children":3942},{},[3943,3945,3951,3953,3958],{"type":43,"value":3944},"Although I posted about the Composition API in the previous note, that is an advanced feature. I still have to touch the parts of the less advanced area like the Vue CLI. So I went over the command-line functionalities of ",{"type":38,"tag":61,"props":3946,"children":3949},{"href":3947,"rel":3948},"https://vuejs.org/",[65],[3950],{"type":43,"value":1595},{"type":43,"value":3952}," that provide much faster work and a convenient way to configure the work environment. By the way, this is the official way! ",{"type":38,"tag":61,"props":3954,"children":3955},{"href":718},[3956],{"type":43,"value":3957},"My first note on this topic",{"type":43,"value":3959}," is just the first step to clarifying the terms.",{"title":8,"searchDepth":685,"depth":685,"links":3961},[3962,3963,3964],{"id":3769,"depth":685,"text":3772},{"id":3856,"depth":685,"text":3859},{"id":1573,"depth":685,"text":1576},"content:blog-posts:7-the-installation-process-of-vue-cli.md","blog-posts/7-the-installation-process-of-vue-cli.md","blog-posts/7-the-installation-process-of-vue-cli",{"_path":3969,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3970,"description":3971,"seoTitle":3972,"seoDescription":3973,"keywords":3974,"image":18,"alt":3624,"ogImage":18,"tags":3979,"categories":3980,"published":25,"author":26,"link":3969,"date":3981,"sitemap":3982,"body":3986,"_type":693,"_id":4152,"_source":695,"_file":4153,"_stem":4154,"_extension":698},"/blog-posts/8-php8-get_resource_id-token_get_all-function-abstract-methods-in-traits-improvements","[8] PHP 8 get_resource_id, token_get_all function, abstract methods in traits improvements","Dive into PHP 8 updates like get_resource_id, changes to token_get_all, and improvements to abstract methods in traits.","PHP 8 get_resource_id, token_get_all & Traits","Explore PHP 8 features: get_resource_id for resources, updates to token_get_all, and better implementation of abstract methods in traits.",[3975,3976,3977,3978],"PHP 8 get_resource_id","token_get_all function","traits abstract methods","PHP 8 new features",[21,22,23],[21,22,23],"2022-05-06",{"loc":3983,"lastmod":3981,"changefreq":30,"priority":31,"images":3984},"/blog-posts/8-php8-get_resource_id-token_get_all-function-abstract-methods-in-traits-improvements/",[3985],{"loc":18},{"type":35,"children":3987,"toc":4147},[3988,4010,4016,4021,4026,4034,4040,4045,4058,4066,4079,4086,4091,4097,4102,4110,4115,4123,4127,4135,4139],{"type":38,"tag":39,"props":3989,"children":3990},{},[3991,3992,3997,3999,4003,4005,4009],{"type":43,"value":3134},{"type":38,"tag":72,"props":3993,"children":3994},{},[3995],{"type":43,"value":3996},"eighth part",{"type":43,"value":3998}," of the PHP8 series and in the current post, I want to go through the get_resource_id and token_get_all functions and the Abstract methods in trait improvements. You can see the full list of features ",{"type":38,"tag":61,"props":4000,"children":4001},{"href":5},[4002],{"type":43,"value":1061},{"type":43,"value":4004},". Furthermore, you can read the seventh part of the series ",{"type":38,"tag":61,"props":4006,"children":4007},{"href":3614},[4008],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":4011,"children":4013},{"id":4012},"the-get_resource_id-function",[4014],{"type":43,"value":4015},"The get_resource_id function",{"type":38,"tag":39,"props":4017,"children":4018},{},[4019],{"type":43,"value":4020},"The resource is a special PHP variable. It is referring to external resources. One example is a MySQL connection, another one is the file handle.",{"type":38,"tag":39,"props":4022,"children":4023},{},[4024],{"type":43,"value":4025},"When we are working with resources, then PHP generates an ID for every resource. The type of this identifier before PHP8 was a string and we had to typecast it to an integer. So in order to avoid the typecast the new get_resource_id function can help. This is the new type-safe way to get the identifier of the resource.",{"type":38,"tag":790,"props":4027,"children":4029},{"code":4028},"// Before PHP 8.0 we had to typecast the resource identifier\n$resourceId = (int) $resource;\n// In PHP 8.0 we can use the get_resource_id function without typecasting.\n$resourceId = get_resource_id($resource);\n",[4030],{"type":38,"tag":559,"props":4031,"children":4032},{"__ignoreMap":8},[4033],{"type":43,"value":4028},{"type":38,"tag":46,"props":4035,"children":4037},{"id":4036},"the-token_get_all-function",[4038],{"type":43,"value":4039},"The token_get_all function",{"type":38,"tag":39,"props":4041,"children":4042},{},[4043],{"type":43,"value":4044},"The token_get_all function is available since PHP4.2. At the moment the function definition according to the documentation is the following:",{"type":38,"tag":53,"props":4046,"children":4047},{},[4048,4053],{"type":38,"tag":57,"props":4049,"children":4050},{},[4051],{"type":43,"value":4052},"Split a given source into PHP tokens",{"type":38,"tag":57,"props":4054,"children":4055},{},[4056],{"type":43,"value":4057},"It parses the given source string into PHP language tokens using the Zend engine's lexical scanner.",{"type":38,"tag":790,"props":4059,"children":4061},{"code":4060},"\u003C?php\n$tokens = token_get_all('\u003C?php echo; ?>');\n\nforeach ($tokens as $token) {\n    if (is_array($token)) {\n        echo \"Line {$token[2]}: \", token_name($token[0]), \" ('{$token[1]}')\", PHP_EOL;\n    }\n}\n?>\n/* \n  The output of the code above:\n  Line 1: T_OPEN_TAG ('\u003C?php ')\n  Line 1: T_ECHO ('echo')\n  Line 1: T_WHITESPACE (' ')\n  Line 1: T_CLOSE_TAG ('?>')\n*/\n",[4062],{"type":38,"tag":559,"props":4063,"children":4064},{"__ignoreMap":8},[4065],{"type":43,"value":4060},{"type":38,"tag":39,"props":4067,"children":4068},{},[4069,4071,4077],{"type":43,"value":4070},"As we can see from the code above. PHP understands the input string syntax and it parses the string based on that. We can find the List of Parser Tokens ",{"type":38,"tag":61,"props":4072,"children":4075},{"href":4073,":target":1094,"rel":4074},"https://www.php.net/manual/en/tokens.php",[65],[4076],{"type":43,"value":1061},{"type":43,"value":4078}," that PHP be able to identify in the input string.",{"type":38,"tag":4080,"props":4081,"children":4083},"h5",{"id":4082},"okay-but-what-is-the-new-feature-if-the-function-is-available-from-php-42",[4084],{"type":43,"value":4085},"Okay, but what is the new feature if the function is available from PHP 4.2?",{"type":38,"tag":39,"props":4087,"children":4088},{},[4089],{"type":43,"value":4090},"Developers added a new PhpToken class into the language with a PhpToken::getAll() method. This implementation works with objects instead of plain values, and the benefit is that it consumes less memory and is easier to read.",{"type":38,"tag":46,"props":4092,"children":4094},{"id":4093},"the-abstract-methods-in-traits-improvements",[4095],{"type":43,"value":4096},"The Abstract methods in traits improvements",{"type":38,"tag":39,"props":4098,"children":4099},{},[4100],{"type":43,"value":4101},"Traits can specify abstract methods, but they must be implemented by the class which is using them. Before PHP 8.0 this method was not validated. So we could write a code like this without getting any errors:",{"type":38,"tag":790,"props":4103,"children":4105},{"code":4104},"trait ExampleTrait {\n    abstract public function Example(int $input): int;\n}\n\nclass UsesExampleTrat\n{\n    use ExampleTrait;\n\n    public function Example($input)\n    {\n        return $input;\n    }\n}\n",[4106],{"type":38,"tag":559,"props":4107,"children":4108},{"__ignoreMap":8},[4109],{"type":43,"value":4104},{"type":38,"tag":39,"props":4111,"children":4112},{},[4113],{"type":43,"value":4114},"But in PHP 8.0 we can not do that. We need to write this instead of the code above:",{"type":38,"tag":790,"props":4116,"children":4118},{"code":4117},"class UsesTrait\n{\n    use ExampleTrait;\n\n    public function Example(int $input): int\n    {\n        return $input;\n    }\n}\n",[4119],{"type":38,"tag":559,"props":4120,"children":4121},{"__ignoreMap":8},[4122],{"type":43,"value":4117},{"type":38,"tag":39,"props":4124,"children":4125},{},[4126],{"type":43,"value":2829},{"type":38,"tag":39,"props":4128,"children":4129},{},[4130],{"type":38,"tag":61,"props":4131,"children":4133},{"href":1770,":target":1094,"rel":4132},[65],[4134],{"type":43,"value":1774},{"type":38,"tag":39,"props":4136,"children":4137},{},[4138],{"type":43,"value":1780},{"type":38,"tag":39,"props":4140,"children":4141},{},[4142],{"type":38,"tag":61,"props":4143,"children":4144},{"href":3614},[4145],{"type":43,"value":4146},"PHP 8.0 str_starts_with, str_ends_with, fdiv and get_debug_type functions",{"title":8,"searchDepth":685,"depth":685,"links":4148},[4149,4150,4151],{"id":4012,"depth":685,"text":4015},{"id":4036,"depth":685,"text":4039},{"id":4093,"depth":685,"text":4096},"content:blog-posts:8-php8-get_resource_id-token_get_all-function-abstract-methods-in-traits-improvements.md","blog-posts/8-php8-get_resource_id-token_get_all-function-abstract-methods-in-traits-improvements.md","blog-posts/8-php8-get_resource_id-token_get_all-function-abstract-methods-in-traits-improvements",{"_path":4156,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":4157,"description":4158,"seoTitle":4159,"seoDescription":4160,"keywords":4161,"image":4167,"alt":4168,"ogImage":4167,"tags":4169,"categories":4172,"published":25,"author":26,"link":4156,"date":4175,"sitemap":4176,"body":4180,"_type":693,"_id":4454,"_source":695,"_file":4455,"_stem":4456,"_extension":698},"/blog-posts/action-service-pattern-in-php","Understanding the Action–Service Pattern in PHP","Learn how to structure your Laravel application using the Action–Service pattern for better code organization, reusability, and testability.","Action–Service Pattern in PHP: Clean Architecture for Laravel Projects","Explore the Action–Service design pattern in PHP and Laravel to keep your controllers slim and business logic reusable and testable.",[4162,4163,4164,4165,4166],"Laravel","PHP patterns","Action–Service pattern","Laravel architecture","clean code PHP","/images/blog-posts/action-service-pattern.png.webp","Diagram showing Action and Service pattern flow",[4162,19,4170,4171],"Clean Architecture","Design Patterns",[4173,4174],"backend","laravel","2025-06-29",{"loc":4177,"lastmod":4175,"changefreq":30,"priority":31,"images":4178},"/blog-posts/action-service-pattern-in-php/",[4179],{"loc":4167},{"type":35,"children":4181,"toc":4440},[4182,4188,4199,4204,4207,4213,4218,4241,4246,4249,4255,4260,4268,4271,4277,4282,4289,4299,4305,4314,4320,4329,4335,4340,4363,4369,4392,4398,4429,4435],{"type":38,"tag":4183,"props":4184,"children":4186},"h1",{"id":4185},"understanding-the-actionservice-pattern-in-php",[4187],{"type":43,"value":4157},{"type":38,"tag":39,"props":4189,"children":4190},{},[4191,4193,4197],{"type":43,"value":4192},"When building modern PHP applications—especially in Laravel—maintaining a clean architecture becomes critical as your project grows.\nOne highly effective way to achieve this is by using the ",{"type":38,"tag":72,"props":4194,"children":4195},{},[4196],{"type":43,"value":4164},{"type":43,"value":4198},", which helps you separate concerns, improve reusability, and simplify testing.",{"type":38,"tag":39,"props":4200,"children":4201},{},[4202],{"type":43,"value":4203},"In this post, we'll break down the core idea behind this pattern, show how to implement it in Laravel, and explain when and why you should use it.",{"type":38,"tag":1221,"props":4205,"children":4206},{},[],{"type":38,"tag":46,"props":4208,"children":4210},{"id":4209},"what-is-the-actionservice-pattern",[4211],{"type":43,"value":4212},"💡 What Is the Action–Service Pattern?",{"type":38,"tag":39,"props":4214,"children":4215},{},[4216],{"type":43,"value":4217},"At a high level:",{"type":38,"tag":53,"props":4219,"children":4220},{},[4221,4231],{"type":38,"tag":57,"props":4222,"children":4223},{},[4224,4229],{"type":38,"tag":72,"props":4225,"children":4226},{},[4227],{"type":43,"value":4228},"Action",{"type":43,"value":4230}," classes handle a specific, atomic task — typically tied to a controller endpoint.",{"type":38,"tag":57,"props":4232,"children":4233},{},[4234,4239],{"type":38,"tag":72,"props":4235,"children":4236},{},[4237],{"type":43,"value":4238},"Service",{"type":43,"value":4240}," classes encapsulate reusable business logic that might be needed across multiple actions or contexts.",{"type":38,"tag":39,"props":4242,"children":4243},{},[4244],{"type":43,"value":4245},"This structure helps keep your controllers thin, your logic well-organized, and your system more maintainable.",{"type":38,"tag":1221,"props":4247,"children":4248},{},[],{"type":38,"tag":46,"props":4250,"children":4252},{"id":4251},"folder-structure",[4253],{"type":43,"value":4254},"🧱 Folder Structure",{"type":38,"tag":39,"props":4256,"children":4257},{},[4258],{"type":43,"value":4259},"A common convention in Laravel projects:",{"type":38,"tag":790,"props":4261,"children":4263},{"code":4262},"app/\n├── Actions/\n│ └── RegisterUserAction.php\n├── Services/\n│ └── RegisterUserService.php\n└── Http/\n└── Controllers/\n└── Auth/\n└── RegisterController.php\n",[4264],{"type":38,"tag":559,"props":4265,"children":4266},{"__ignoreMap":8},[4267],{"type":43,"value":4262},{"type":38,"tag":1221,"props":4269,"children":4270},{},[],{"type":38,"tag":46,"props":4272,"children":4274},{"id":4273},"example-user-registration",[4275],{"type":43,"value":4276},"🧩 Example: User Registration",{"type":38,"tag":39,"props":4278,"children":4279},{},[4280],{"type":43,"value":4281},"Let’s walk through a basic example: registering a user.",{"type":38,"tag":4283,"props":4284,"children":4286},"h3",{"id":4285},"_1-controller",[4287],{"type":43,"value":4288},"1. Controller",{"type":38,"tag":790,"props":4290,"children":4294},{"code":4291,"language":23,"meta":8,"className":4292},"class RegisterController extends Controller\n{\n    public function __invoke(Request $request, RegisterUserAction $action)\n    {\n        $user = $action->execute($request->all());\n\n        return response()->json(['user' => $user], 201);\n    }\n}\n",[4293],"language-php",[4295],{"type":38,"tag":559,"props":4296,"children":4297},{"__ignoreMap":8},[4298],{"type":43,"value":4291},{"type":38,"tag":4283,"props":4300,"children":4302},{"id":4301},"_2-action",[4303],{"type":43,"value":4304},"2, Action",{"type":38,"tag":790,"props":4306,"children":4309},{"code":4307,"language":23,"meta":8,"className":4308},"class RegisterUserAction\n{\n    public function __construct(RegisterUserService $registerUserService)\n    {\n        $this->registerUserService = $registerUserService;\n    }\n\n    public function execute(array $data)\n    {\n        return $this->registerUserService->register($data);\n    }\n}\n",[4293],[4310],{"type":38,"tag":559,"props":4311,"children":4312},{"__ignoreMap":8},[4313],{"type":43,"value":4307},{"type":38,"tag":4283,"props":4315,"children":4317},{"id":4316},"_3-service",[4318],{"type":43,"value":4319},"3, Service",{"type":38,"tag":790,"props":4321,"children":4324},{"code":4322,"language":23,"meta":8,"className":4323},"class RegisterUserService\n{\n    public function register(array $data): User\n    {\n        $user = User::create([\n        'name' => $data['name'],\n        'email' => $data['email'],\n        'password' => bcrypt($data['password']),\n        ]);\n\n        Mail::to($user->email)->send(new WelcomeEmail($user));\n\n        return $user;\n    }\n}\n",[4293],[4325],{"type":38,"tag":559,"props":4326,"children":4327},{"__ignoreMap":8},[4328],{"type":43,"value":4322},{"type":38,"tag":4283,"props":4330,"children":4332},{"id":4331},"why-use-this-pattern",[4333],{"type":43,"value":4334},"🚀 Why Use This Pattern?",{"type":38,"tag":39,"props":4336,"children":4337},{},[4338],{"type":43,"value":4339},"Here are the key benefits:",{"type":38,"tag":53,"props":4341,"children":4342},{},[4343,4348,4353,4358],{"type":38,"tag":57,"props":4344,"children":4345},{},[4346],{"type":43,"value":4347},"✅ Separation of concerns: Controllers stay clean, actions remain specific, and services remain reusable.",{"type":38,"tag":57,"props":4349,"children":4350},{},[4351],{"type":43,"value":4352},"🧪 Testability: Both actions and services are easily unit-tested in isolation.",{"type":38,"tag":57,"props":4354,"children":4355},{},[4356],{"type":43,"value":4357},"🔁 Reusability: Services can be injected wherever needed — not just in HTTP controllers.",{"type":38,"tag":57,"props":4359,"children":4360},{},[4361],{"type":43,"value":4362},"🧩 Scalability: As your project grows, it becomes easier to maintain and onboard new team members.",{"type":38,"tag":4283,"props":4364,"children":4366},{"id":4365},"️-pro-tips",[4367],{"type":43,"value":4368},"🛠️ Pro Tips",{"type":38,"tag":53,"props":4370,"children":4371},{},[4372,4377,4382,4387],{"type":38,"tag":57,"props":4373,"children":4374},{},[4375],{"type":43,"value":4376},"Let the Controller handle validation or form requests.",{"type":38,"tag":57,"props":4378,"children":4379},{},[4380],{"type":43,"value":4381},"Keep Action classes focused on a single responsibility.",{"type":38,"tag":57,"props":4383,"children":4384},{},[4385],{"type":43,"value":4386},"Avoid business logic in controllers or models — use services instead.",{"type":38,"tag":57,"props":4388,"children":4389},{},[4390],{"type":43,"value":4391},"If the action becomes too large, split it into smaller service methods.",{"type":38,"tag":4283,"props":4393,"children":4395},{"id":4394},"when-to-use-it",[4396],{"type":43,"value":4397},"📌 When to Use It",{"type":38,"tag":53,"props":4399,"children":4400},{},[4401],{"type":38,"tag":57,"props":4402,"children":4403},{},[4404,4406],{"type":43,"value":4405},"Use the Action–Service pattern if:\n",{"type":38,"tag":53,"props":4407,"children":4408},{},[4409,4414,4419,4424],{"type":38,"tag":57,"props":4410,"children":4411},{},[4412],{"type":43,"value":4413},"Your controller methods are getting too complex.",{"type":38,"tag":57,"props":4415,"children":4416},{},[4417],{"type":43,"value":4418},"You want to follow clean architecture or DDD principles.",{"type":38,"tag":57,"props":4420,"children":4421},{},[4422],{"type":43,"value":4423},"You want your logic to be testable and reusable.",{"type":38,"tag":57,"props":4425,"children":4426},{},[4427],{"type":43,"value":4428},"You're working in a large team or codebase.",{"type":38,"tag":4283,"props":4430,"children":4432},{"id":4431},"final-thoughts",[4433],{"type":43,"value":4434},"🧠 Final Thoughts",{"type":38,"tag":39,"props":4436,"children":4437},{},[4438],{"type":43,"value":4439},"The Action–Service pattern is a powerful approach to structuring Laravel applications cleanly and professionally.\nIt encourages best practices, improves code readability, and prepares your project to scale. Have you tried this pattern\nin your projects? Let me know how it worked for you — or feel free to share your own variations and tips!",{"title":8,"searchDepth":685,"depth":685,"links":4441},[4442,4443,4444],{"id":4209,"depth":685,"text":4212},{"id":4251,"depth":685,"text":4254},{"id":4273,"depth":685,"text":4276,"children":4445},[4446,4448,4449,4450,4451,4452,4453],{"id":4285,"depth":4447,"text":4288},3,{"id":4301,"depth":4447,"text":4304},{"id":4316,"depth":4447,"text":4319},{"id":4331,"depth":4447,"text":4334},{"id":4365,"depth":4447,"text":4368},{"id":4394,"depth":4447,"text":4397},{"id":4431,"depth":4447,"text":4434},"content:blog-posts:action-service-pattern-in-php.md","blog-posts/action-service-pattern-in-php.md","blog-posts/action-service-pattern-in-php",{"_path":4458,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":4459,"description":4460,"seoTitle":4461,"seoDescription":4462,"keywords":4463,"image":4468,"alt":1268,"ogImage":4468,"tags":4469,"categories":4472,"published":25,"author":26,"link":4458,"date":4475,"sitemap":4476,"body":4480,"_type":693,"_id":4745,"_source":695,"_file":4746,"_stem":4747,"_extension":698},"/blog-posts/active-link-and-pagination-usage-in-inertiajs-with-laravel","Active link and pagination usage in Inertia.js with Laravel","Learn how to implement active links and pagination using Inertia.js and Laravel for dynamic web applications.","Active Links & Pagination in Inertia.js with Laravel","Discover how to use Inertia.js and Laravel to handle active links and implement pagination effectively in your projects.",[4464,4465,4466,4467],"Inertia.js active links","pagination with Inertia.js","Laravel dynamic web apps","Inertia.js and Laravel","/images/blog-posts/inertiaJS.png.webp",[4470,4174,4471,714],"inertiajs","php8",[4470,21,23,4473,4474],"programming","vue","2022-01-28",{"loc":4477,"lastmod":4475,"changefreq":30,"priority":31,"images":4478},"/blog-posts/active-link-and-pagination-usage-in-inertiajs-with-laravel/",[4479],{"loc":4468},{"type":35,"children":4481,"toc":4737},[4482,4487,4493,4498,4516,4528,4534,4539,4547,4553,4565,4578,4586,4592,4597,4605,4611,4616,4629,4634,4642,4647,4667,4672,4680,4685,4697,4705,4713,4717],{"type":38,"tag":39,"props":4483,"children":4484},{},[4485],{"type":43,"value":4486},"Today I would like to write about the active link and pagination functionality of InertiaJS. We use them almost everywhere. An active link is an inside tool of InertiaJS but we will need to set a few things in Laravel to make the pagination work. Let's dive into the details.",{"type":38,"tag":46,"props":4488,"children":4490},{"id":4489},"active-link-functionality-of-inertiajs",[4491],{"type":43,"value":4492},"Active link functionality of InertiaJS:",{"type":38,"tag":39,"props":4494,"children":4495},{},[4496],{"type":43,"value":4497},"There are three types of approaches that are worth mentioning when we want to talk about active link handling. ",{"type":38,"tag":53,"props":4499,"children":4500},{},[4501,4506,4511],{"type":38,"tag":57,"props":4502,"children":4503},{},[4504],{"type":43,"value":4505},"URL method",{"type":38,"tag":57,"props":4507,"children":4508},{},[4509],{"type":43,"value":4510},"Start With method",{"type":38,"tag":57,"props":4512,"children":4513},{},[4514],{"type":43,"value":4515},"Component method",{"type":38,"tag":39,"props":4517,"children":4518},{},[4519,4521,4527],{"type":43,"value":4520},"We need to use all of these methods on the $page object. You can see the details about this object ",{"type":38,"tag":61,"props":4522,"children":4525},{"href":4523,"rel":4524},"https://inertiajs.com/releases/inertia-vue-0.3.0-2020-10-09#top",[65],[4526],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":4529,"children":4531},{"id":4530},"the-url-method-in-inertiajs",[4532],{"type":43,"value":4533},"The URL method in InertiaJS",{"type":38,"tag":39,"props":4535,"children":4536},{},[4537],{"type":43,"value":4538},"The URL method will return the current URL of the page so we can make a comparison in the HTML code like this:",{"type":38,"tag":790,"props":4540,"children":4542},{"code":4541},"\u003CLink\ntype=\"button\"\nclass=\"btn btn-link\"\n:class=\"{'font-bold': $page.url === '/logout'}\"\nhref=\"/logout\"\nmethod=\"post\"\n:data=\"{user:'Mr.John Doe'}\"\nas=\"button\">\nLog out as post\n\u003C/Link>\n",[4543],{"type":38,"tag":559,"props":4544,"children":4545},{"__ignoreMap":8},[4546],{"type":43,"value":4541},{"type":38,"tag":46,"props":4548,"children":4550},{"id":4549},"the-start-with-method",[4551],{"type":43,"value":4552},"The Start With method",{"type":38,"tag":39,"props":4554,"children":4555},{},[4556,4558,4564],{"type":43,"value":4557},"This method is not related to any framework. It is a JavaScript method that we can use to make comparisons on the URL method of the page object if this is what we need. See below the definition of the method or read more on the link under ",{"type":38,"tag":61,"props":4559,"children":4562},{"href":4560,"rel":4561},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith.",[65],[4563],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":2705,"props":4566,"children":4567},{},[4568,4573],{"type":38,"tag":39,"props":4569,"children":4570},{},[4571],{"type":43,"value":4572},"\"This method lets you determine whether or not a string begins with another string. This method is case-sensitive.\"",{"type":38,"tag":39,"props":4574,"children":4575},{},[4576],{"type":43,"value":4577},"mozilla.org",{"type":38,"tag":790,"props":4579,"children":4581},{"code":4580},"\u003CLink\ntype=\"button\"\nclass=\"btn btn-link\"\n:class=\"{'font-bold': $page.url.startsWith('/settings')}\"\nhref=\"/settings\">\nSettings\n\u003C/Link>\n",[4582],{"type":38,"tag":559,"props":4583,"children":4584},{"__ignoreMap":8},[4585],{"type":43,"value":4580},{"type":38,"tag":46,"props":4587,"children":4589},{"id":4588},"the-component-method",[4590],{"type":43,"value":4591},"The Component method",{"type":38,"tag":39,"props":4593,"children":4594},{},[4595],{"type":43,"value":4596},"This third method returns the name of the component. In my opinion, this is the most elegant way. Stakeholders could change their minds about an URL. But the component name is up to us. We can use the component names in an app as constant values from the beginning.",{"type":38,"tag":790,"props":4598,"children":4600},{"code":4599},"\u003CLink\ntype=\"button\"\nclass=\"btn btn-link\"\n:class=\"{'font-bold': $page.component === 'Users'}\"\nhref=\"/users\">\nUsers\n\u003C/Link>\n",[4601],{"type":38,"tag":559,"props":4602,"children":4603},{"__ignoreMap":8},[4604],{"type":43,"value":4599},{"type":38,"tag":46,"props":4606,"children":4608},{"id":4607},"the-pagination",[4609],{"type":43,"value":4610},"The pagination",{"type":38,"tag":39,"props":4612,"children":4613},{},[4614],{"type":43,"value":4615},"There are some pre-requirements on the Laravel side that we need to set.",{"type":38,"tag":53,"props":4617,"children":4618},{},[4619,4624],{"type":38,"tag":57,"props":4620,"children":4621},{},[4622],{"type":43,"value":4623},"Routing",{"type":38,"tag":57,"props":4625,"children":4626},{},[4627],{"type":43,"value":4628},"InertiaJS render method",{"type":38,"tag":39,"props":4630,"children":4631},{},[4632],{"type":43,"value":4633},"The latter should use the pagination method of Laravel with the record number as a parameter.",{"type":38,"tag":790,"props":4635,"children":4637},{"code":4636},"Route::get('/users', function () {\n// The Vue Template name should be capital because of convention\nreturn Inertia::render('Users', [\n'time' => now()->toTimeString(),\n'users' => User::paginate(10)\n]);\n});\n",[4638],{"type":38,"tag":559,"props":4639,"children":4640},{"__ignoreMap":8},[4641],{"type":43,"value":4636},{"type":38,"tag":39,"props":4643,"children":4644},{},[4645],{"type":43,"value":4646},"Due to the paginate method, the data and the extra metadata will be available for the InertiaJS component like so:",{"type":38,"tag":1383,"props":4648,"children":4649},{},[4650],{"type":38,"tag":2148,"props":4651,"children":4652},{"style":2150},[4653,4654,4659,4660],{"type":43,"value":2153},{"type":38,"tag":1885,"props":4655,"children":4658},{"style":2156,"src":4656,"alt":4657},"/images/blog-posts/paginated-data-with-meta.png.webp","Laravel paginate data example",[],{"type":43,"value":2153},{"type":38,"tag":39,"props":4661,"children":4664},{"className":4662},[4663],"bulma-has-text-centered",[4665],{"type":43,"value":4666},"Laravel paginate data for InertiaJS component. (VUE Devtools)",{"type":38,"tag":39,"props":4668,"children":4669},{},[4670],{"type":43,"value":4671},"The pagination will have two main sections on the Front-End. One section is for the data loop and the other for the paginations link. We need to loop over the data with a VueJS first. We used the name property of the user's data object and added an edit link to the row.",{"type":38,"tag":790,"props":4673,"children":4675},{"code":4674},"        \u003Cdiv class=\"row\">\n            \u003Cdiv class=\"col-12\">\n                \u003Ctable class=\"table\">\n                    \u003Cthead>\n                    \u003Ctr>\n                        \u003Cth scope=\"col\">#\u003C/th>\n                        \u003Cth scope=\"col\">Username\u003C/th>\n                        \u003Cth scope=\"col\">Edit\u003C/th>\n                    \u003C/tr>\n                    \u003C/thead>\n                    \u003Ctbody>\n                    \u003Ctr v-for=\"user of users.data\" :key=\"user.id\">\n                        \u003Cth scope=\"row\">{{ user.id }}\u003C/th>\n                        \u003Ctd v-text=\"user.name\">\u003C/td>\n                        \u003Ctd>\n                            \u003CLink :href=\"`/users/${user.id}/edit`\">\n                                \u003Ci class=\"bi bi-pen-fill\">\u003C/i>\n                            \u003C/Link>\n                        \u003C/td>\n                    \u003C/tr>\n                    \u003C/tbody>\n                \u003C/table>\n            \u003C/div>\n        \u003C/div>\n",[4676],{"type":38,"tag":559,"props":4677,"children":4678},{"__ignoreMap":8},[4679],{"type":43,"value":4674},{"type":38,"tag":39,"props":4681,"children":4682},{},[4683],{"type":43,"value":4684},"Here, in the code section below will be two different approaches. One approach will use a Component. The other will use the v-if, v-else VueJS one_._",{"type":38,"tag":53,"props":4686,"children":4687},{},[4688],{"type":38,"tag":57,"props":4689,"children":4690},{},[4691],{"type":38,"tag":61,"props":4692,"children":4695},{"href":4693,"rel":4694},"https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive",[65],[4696],{"type":43,"value":4693},{"type":38,"tag":790,"props":4698,"children":4700},{"code":4699},"\u003Ctemplate v-for=\"link in users.links\">\n    \u003Cli class=\"page-item\"\n        :class=\"{ \n        active: users.current_page == link.label, \n        disabled: !link.url\n    }\">\n        \u003CComponent\n            :is=\"link.url ? 'Link' : 'span'\"\n            class=\"page-link\"\n            :href=\"link.url\"\n            v-html=\"link.label\"/>\n\n    \u003C/li>\n\u003C/template>\n",[4701],{"type":38,"tag":559,"props":4702,"children":4703},{"__ignoreMap":8},[4704],{"type":43,"value":4699},{"type":38,"tag":790,"props":4706,"children":4708},{"code":4707},"\u003Ctemplate v-for=\"link in users.links\">\n    \u003Cli class=\"page-item\"\n        :class=\"{ active: users.current_page == link.label}\"\n        v-if=\"link.url\">\n        \u003CLink\n            class=\"page-link\"\n            :href=\"link.url\"\n            v-html=\"link.label\">\n        \u003C/Link>\n\n    \u003C/li>\n    \u003Cli class=\"page-item disabled\" v-else>\n        \u003Ca class=\"page-link\"\n           href=\"#\" tabindex=\"-1\" aria-disabled=\"true\" v-html=\"link.label\">\u003C/a>\n    \u003C/li>\n\u003C/template>\n",[4709],{"type":38,"tag":559,"props":4710,"children":4711},{"__ignoreMap":8},[4712],{"type":43,"value":4707},{"type":38,"tag":46,"props":4714,"children":4715},{"id":675},[4716],{"type":43,"value":678},{"type":38,"tag":39,"props":4718,"children":4719},{},[4720,4722,4728,4730,4735],{"type":43,"value":4721},"In the last post, I wrote about the ",{"type":38,"tag":61,"props":4723,"children":4725},{"href":4724},"/blog-posts/inertiajs-link-component-and-laravel-get-post-patch-put-methods",[4726],{"type":43,"value":4727},"link components",{"type":43,"value":4729},". ",{"type":38,"tag":61,"props":4731,"children":4732},{"href":4458},[4733],{"type":43,"value":4734},"Today's topic was",{"type":43,"value":4736}," about data management with links and paginator. All three active links approaches are valid and viable options. We should use it with the pagination when we need it.",{"title":8,"searchDepth":685,"depth":685,"links":4738},[4739,4740,4741,4742,4743,4744],{"id":4489,"depth":685,"text":4492},{"id":4530,"depth":685,"text":4533},{"id":4549,"depth":685,"text":4552},{"id":4588,"depth":685,"text":4591},{"id":4607,"depth":685,"text":4610},{"id":675,"depth":685,"text":678},"content:blog-posts:active-link-and-pagination-usage-in-inertiajs-with-laravel.md","blog-posts/active-link-and-pagination-usage-in-inertiajs-with-laravel.md","blog-posts/active-link-and-pagination-usage-in-inertiajs-with-laravel",{"_path":4749,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":4750,"description":4751,"seoTitle":4752,"seoDescription":4753,"keywords":4754,"image":4760,"alt":4752,"ogImage":4760,"tags":4761,"categories":4766,"published":25,"author":26,"link":4749,"date":4768,"sitemap":4769,"body":4773,"_type":693,"_id":5103,"_source":695,"_file":5104,"_stem":5105,"_extension":698},"/blog-posts/avoid-overengineering-reactivity-in-vue-3","Avoid Overengineering Reactivity in Vue 3: Let Your Components Own Their Data","Learn how to avoid overengineering in Vue 3 by managing data locally in your components and embracing its declarative reactive architecture.","Avoid Overengineering Reactivity in Vue 3","Discover best practices in Vue 3 to avoid over-complicating component communication and maintain cleaner, more manageable code.",[4755,4756,4757,4758,4759],"Vue 3","Composition API","frontend development","reactivity","state management","/images/blog-posts/avoid-overengineering.png.webp",[4755,4756,4762,4763,4764,4765],"frontend","architecture","SPA","Pinia",[4767,4755],"Frontend","2025-08-02",{"loc":4770,"lastmod":4768,"changefreq":30,"priority":31,"images":4771},"/blog-posts/avoid-overengineering-reactivity-in-vue-3/",[4772],{"loc":4760},{"type":35,"children":4774,"toc":5092},[4775,4780,4786,4805,4810,4828,4833,4839,4844,4874,4879,4907,4913,4925,4950,4955,4961,4967,4978,4983,4989,4998,5003,5009,5014,5019,5032,5059,5064,5074,5079,5084],{"type":38,"tag":39,"props":4776,"children":4777},{},[4778],{"type":43,"value":4779},"In modern front-end development, especially when working with Vue 3, it's easy to fall into the trap of overengineering\ncomponent communication and data flow. This often happens when developers transition from traditional server-rendered,\nsession-based frameworks like Laravel, Symfony, or Spring — and bring along habits that don't fit well in a reactive,\nstateless architecture.",{"type":38,"tag":46,"props":4781,"children":4783},{"id":4782},"why-this-happens-stateful-thinking-in-a-stateless-world",[4784],{"type":43,"value":4785},"Why This Happens: Stateful Thinking in a Stateless World",{"type":38,"tag":39,"props":4787,"children":4788},{},[4789,4791,4796,4798,4803],{"type":43,"value":4790},"One of the root causes is the shift from ",{"type":38,"tag":72,"props":4792,"children":4793},{},[4794],{"type":43,"value":4795},"stateful",{"type":43,"value":4797}," to ",{"type":38,"tag":72,"props":4799,"children":4800},{},[4801],{"type":43,"value":4802},"stateless",{"type":43,"value":4804}," architecture.",{"type":38,"tag":39,"props":4806,"children":4807},{},[4808],{"type":43,"value":4809},"In classic MVC applications, the backend often remembers the user's state through sessions. It knows who the user is,\nwhat they just did, and what should happen next — making it easy to control data and UI flow from a centralized point.",{"type":38,"tag":39,"props":4811,"children":4812},{},[4813,4815,4820,4822,4826],{"type":43,"value":4814},"Vue 3 apps, on the other hand, typically communicate via ",{"type":38,"tag":72,"props":4816,"children":4817},{},[4818],{"type":43,"value":4819},"REST or GraphQL APIs",{"type":43,"value":4821},", which are ",{"type":38,"tag":72,"props":4823,"children":4824},{},[4825],{"type":43,"value":4802},{"type":43,"value":4827},". Every\nrequest must be complete in itself. There's no persistent server-side memory of what the user just did unless you build\nthat manually.",{"type":38,"tag":39,"props":4829,"children":4830},{},[4831],{"type":43,"value":4832},"This mismatch in mental models leads many developers to implement event-driven or shared-store patterns in Vue apps to\nrecreate that server-driven control — but this often results in overly complex and fragile architecture.",{"type":38,"tag":46,"props":4834,"children":4836},{"id":4835},"the-problem-externally-driven-components",[4837],{"type":43,"value":4838},"The Problem: Externally-Driven Components",{"type":38,"tag":39,"props":4840,"children":4841},{},[4842],{"type":43,"value":4843},"Here's the pattern that shows up:",{"type":38,"tag":53,"props":4845,"children":4846},{},[4847,4859,4864,4869],{"type":38,"tag":57,"props":4848,"children":4849},{},[4850,4852,4857],{"type":43,"value":4851},"A component does ",{"type":38,"tag":72,"props":4853,"children":4854},{},[4855],{"type":43,"value":4856},"not",{"type":43,"value":4858}," fetch or manage its own data.",{"type":38,"tag":57,"props":4860,"children":4861},{},[4862],{"type":43,"value":4863},"Instead, it waits for an external signal — an event, a global store change, or an emitted trigger.",{"type":38,"tag":57,"props":4865,"children":4866},{},[4867],{"type":43,"value":4868},"The flow becomes fragmented. Component A emits an event, Component B reacts, and Component C updates its UI.",{"type":38,"tag":57,"props":4870,"children":4871},{},[4872],{"type":43,"value":4873},"There's hidden coupling and unclear data ownership.",{"type":38,"tag":39,"props":4875,"children":4876},{},[4877],{"type":43,"value":4878},"This kind of indirect logic:",{"type":38,"tag":53,"props":4880,"children":4881},{},[4882,4887,4892,4897,4902],{"type":38,"tag":57,"props":4883,"children":4884},{},[4885],{"type":43,"value":4886},"Obscures the flow of data and reactivity",{"type":38,"tag":57,"props":4888,"children":4889},{},[4890],{"type":43,"value":4891},"Makes debugging harder",{"type":38,"tag":57,"props":4893,"children":4894},{},[4895],{"type":43,"value":4896},"Introduces subtle bugs and race conditions",{"type":38,"tag":57,"props":4898,"children":4899},{},[4900],{"type":43,"value":4901},"Breaks encapsulation and reusability",{"type":38,"tag":57,"props":4903,"children":4904},{},[4905],{"type":43,"value":4906},"May result in unmaintainable code in the medium term if not earlier",{"type":38,"tag":46,"props":4908,"children":4910},{"id":4909},"vue-3-wants-you-to-think-declaratively",[4911],{"type":43,"value":4912},"Vue 3 Wants You to Think Declaratively",{"type":38,"tag":39,"props":4914,"children":4915},{},[4916,4918,4923],{"type":43,"value":4917},"Vue 3 and its Composition API promote a ",{"type":38,"tag":72,"props":4919,"children":4920},{},[4921],{"type":43,"value":4922},"declarative",{"type":43,"value":4924}," approach:",{"type":38,"tag":53,"props":4926,"children":4927},{},[4928,4933,4938],{"type":38,"tag":57,"props":4929,"children":4930},{},[4931],{"type":43,"value":4932},"Each component should manage its own data lifecycle.",{"type":38,"tag":57,"props":4934,"children":4935},{},[4936],{"type":43,"value":4937},"Components should react to their own state or prop changes, not external triggers.",{"type":38,"tag":57,"props":4939,"children":4940},{},[4941,4943,4948],{"type":43,"value":4942},"Shared state should live in a store ",{"type":38,"tag":72,"props":4944,"children":4945},{},[4946],{"type":43,"value":4947},"only if",{"type":43,"value":4949}," it's actually shared.",{"type":38,"tag":39,"props":4951,"children":4952},{},[4953],{"type":43,"value":4954},"Trying to force imperative thinking into a declarative system defeats the point of using Vue.\nBy the way, this is a common pitfall in new technologies that we try to apply previous technology\npatterns, which can go against the paradigm of the new one.",{"type":38,"tag":46,"props":4956,"children":4958},{"id":4957},"real-world-example",[4959],{"type":43,"value":4960},"Real-World Example",{"type":38,"tag":4283,"props":4962,"children":4964},{"id":4963},"bad",[4965],{"type":43,"value":4966},"❌ Bad:",{"type":38,"tag":790,"props":4968,"children":4973},{"className":4969,"code":4971,"language":4972,"meta":8},[4970],"language-ts","// Somewhere globally\nbus.emit('refresh-users')\n\n// Inside UserList.vue\nbus.on('refresh-users', () => {\n    fetchUsers()\n})\n","ts",[4974],{"type":38,"tag":559,"props":4975,"children":4976},{"__ignoreMap":8},[4977],{"type":43,"value":4971},{"type":38,"tag":39,"props":4979,"children":4980},{},[4981],{"type":43,"value":4982},"This setup creates hidden dependencies. If you remove the global event, the component breaks.",{"type":38,"tag":4283,"props":4984,"children":4986},{"id":4985},"good",[4987],{"type":43,"value":4988},"✅ Good:",{"type":38,"tag":790,"props":4990,"children":4993},{"className":4991,"code":4992,"language":4972,"meta":8},[4970],"// Inside UserList.vue\nonMounted(() => {\n    fetchUsers()\n})\n\nwatch(() => props.userId, () => {\n    fetchUsers()\n})\n",[4994],{"type":38,"tag":559,"props":4995,"children":4996},{"__ignoreMap":8},[4997],{"type":43,"value":4992},{"type":38,"tag":39,"props":4999,"children":5000},{},[5001],{"type":43,"value":5002},"This is predictable, self-contained, and much easier to test and refactor.",{"type":38,"tag":46,"props":5004,"children":5006},{"id":5005},"use-stores-responsibly",[5007],{"type":43,"value":5008},"Use Stores Responsibly",{"type":38,"tag":39,"props":5010,"children":5011},{},[5012],{"type":43,"value":5013},"Stores like Pinia are excellent tools, but not every piece of data belongs there. Overusing the store for everything\nleads to unclear state boundaries.",{"type":38,"tag":39,"props":5015,"children":5016},{},[5017],{"type":43,"value":5018},"Ask yourself:",{"type":38,"tag":53,"props":5020,"children":5021},{},[5022,5027],{"type":38,"tag":57,"props":5023,"children":5024},{},[5025],{"type":43,"value":5026},"Is this state truly shared?",{"type":38,"tag":57,"props":5028,"children":5029},{},[5030],{"type":43,"value":5031},"Or is it just needed for this one view or feature?",{"type":38,"tag":39,"props":5033,"children":5034},{},[5035,5037,5043,5044,5050,5052,5057],{"type":43,"value":5036},"If it's local, keep it local — use ",{"type":38,"tag":559,"props":5038,"children":5040},{"className":5039},[],[5041],{"type":43,"value":5042},"ref",{"type":43,"value":3086},{"type":38,"tag":559,"props":5045,"children":5047},{"className":5046},[],[5048],{"type":43,"value":5049},"reactive",{"type":43,"value":5051},", or ",{"type":38,"tag":559,"props":5053,"children":5055},{"className":5054},[],[5056],{"type":43,"value":994},{"type":43,"value":5058}," inside the component or composable.",{"type":38,"tag":46,"props":5060,"children":5061},{"id":4431},[5062],{"type":43,"value":5063},"Final Thoughts",{"type":38,"tag":39,"props":5065,"children":5066},{},[5067,5069],{"type":43,"value":5068},"Vue 3 gives you the tools to build maintainable, testable, and elegant applications — ",{"type":38,"tag":72,"props":5070,"children":5071},{},[5072],{"type":43,"value":5073},"but only if you respect the\nreactive, declarative nature of the framework.",{"type":38,"tag":39,"props":5075,"children":5076},{},[5077],{"type":43,"value":5078},"If you try to recreate traditional server-driven patterns in your frontend, you'll end up with a mess of events,\nsubscriptions, and hard-to-follow dependencies.",{"type":38,"tag":39,"props":5080,"children":5081},{},[5082],{"type":43,"value":5083},"Let your components own their own behavior and data.",{"type":38,"tag":2705,"props":5085,"children":5086},{},[5087],{"type":38,"tag":39,"props":5088,"children":5089},{},[5090],{"type":43,"value":5091},"A healthy SPA starts with healthy component boundaries.",{"title":8,"searchDepth":685,"depth":685,"links":5093},[5094,5095,5096,5097,5101,5102],{"id":4782,"depth":685,"text":4785},{"id":4835,"depth":685,"text":4838},{"id":4909,"depth":685,"text":4912},{"id":4957,"depth":685,"text":4960,"children":5098},[5099,5100],{"id":4963,"depth":4447,"text":4966},{"id":4985,"depth":4447,"text":4988},{"id":5005,"depth":685,"text":5008},{"id":4431,"depth":685,"text":5063},"content:blog-posts:avoid-overengineering-reactivity-in-vue-3.md","blog-posts/avoid-overengineering-reactivity-in-vue-3.md","blog-posts/avoid-overengineering-reactivity-in-vue-3",{"_path":5107,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":5108,"description":5109,"seoTitle":5110,"seoDescription":5111,"keywords":5112,"image":5119,"alt":5120,"ogImage":5119,"tags":5121,"categories":5124,"published":25,"author":26,"link":5107,"date":5125,"sitemap":5126,"body":5130,"_type":693,"_id":5489,"_source":695,"_file":5490,"_stem":5491,"_extension":698},"/blog-posts/avoiding-eventbus-pitfalls-in-vue-3-with-mitt","Avoiding EventBus Pitfalls in Vue 3 with mitt","Learn how to prevent duplicate API calls and event name collisions when using mitt as a global event bus in Vue 3 with the Composition API.","Vue 3 EventBus Best Practices with mitt","Real-world guide to using mitt in Vue 3 composition API apps, avoiding redundant listeners and scoping events properly.",[5113,5114,5115,5116,5117,5118],"vue 3","eventbus","mitt","composition api","vue best practices","global events","/images/blog-posts/vue-and-mitt.png.webp","Vue 3 mitt eventbus communication",[4755,5122,5123],"JavaScript","Best Practices",[4767,3747],"2025-05-27",{"loc":5127,"lastmod":5125,"changefreq":30,"priority":31,"images":5128},"/blog-posts/avoiding-eventbus-pitfalls-in-vue-3-with-mitt/",[5129],{"loc":5119},{"type":35,"children":5131,"toc":5473},[5132,5135,5141,5154,5175,5196,5202,5207,5216,5249,5252,5258,5289,5292,5298,5309,5318,5329,5338,5349,5352,5358,5370,5379,5382,5388,5400,5420,5432,5435,5441],{"type":38,"tag":1221,"props":5133,"children":5134},{},[],{"type":38,"tag":46,"props":5136,"children":5138},{"id":5137},"avoiding-eventbus-pitfalls-in-vue-3-with-mitt",[5139],{"type":43,"value":5140},"Avoiding EventBus Pitfalls in Vue 3 with 'mitt'",{"type":38,"tag":39,"props":5142,"children":5143},{},[5144,5146,5152],{"type":43,"value":5145},"When building reactive and dynamic interfaces in Vue 3, you might turn to a lightweight event bus like ",{"type":38,"tag":61,"props":5147,"children":5150},{"href":5148,"rel":5149},"https://github.com/developit/mitt",[65],[5151],{"type":43,"value":5115},{"type":43,"value":5153}," to communicate across components. It's clean, simple, and integrates easily with the Composition API.",{"type":38,"tag":39,"props":5155,"children":5156},{},[5157,5159,5173],{"type":43,"value":5158},"But ",{"type":38,"tag":72,"props":5160,"children":5161},{},[5162,5164,5171],{"type":43,"value":5163},"using ",{"type":38,"tag":72,"props":5165,"children":5166},{},[5167],{"type":38,"tag":72,"props":5168,"children":5169},{},[5170],{"type":43,"value":5115},{"type":43,"value":5172}," carelessly can lead to subtle and frustrating bugs",{"type":43,"value":5174},"—like unnecessary API calls or event collisions.",{"type":38,"tag":46,"props":5176,"children":5178},{"id":5177},"in-this-article-ill-share-a-real-world-debugging-experience-and-show-how-to-use-mitt-correctly-to-avoid-memory-leaks-redundant-listeners-and-naming-conflicts",[5179,5181,5195],{"type":43,"value":5180},"In this article, I’ll share a real-world debugging experience and show how to ",{"type":38,"tag":72,"props":5182,"children":5183},{},[5184,5186,5193],{"type":43,"value":5185},"use ",{"type":38,"tag":72,"props":5187,"children":5188},{},[5189],{"type":38,"tag":72,"props":5190,"children":5191},{},[5192],{"type":43,"value":5115},{"type":43,"value":5194}," correctly to avoid memory leaks, redundant listeners, and naming conflicts",{"type":43,"value":1063},{"type":38,"tag":46,"props":5197,"children":5199},{"id":5198},"the-bug-redundant-api-calls",[5200],{"type":43,"value":5201},"The Bug: Redundant API Calls",{"type":38,"tag":39,"props":5203,"children":5204},{},[5205],{"type":43,"value":5206},"Initially, I had this code in a Vue 3 component:",{"type":38,"tag":790,"props":5208,"children":5211},{"className":5209,"code":5210,"language":4972,"meta":8},[4970],"import emitter from '@/plugins/mitt';\n\nonMounted(() => {\n  emitter.on('search-by-filters', () => {\n    fetchData();\n  });\n});\n",[5212],{"type":38,"tag":559,"props":5213,"children":5214},{"__ignoreMap":8},[5215],{"type":43,"value":5210},{"type":38,"tag":39,"props":5217,"children":5218},{},[5219,5221,5226,5228,5234,5236,5241,5243,5248],{"type":43,"value":5220},"Everything seemed fine—until I started ",{"type":38,"tag":72,"props":5222,"children":5223},{},[5224],{"type":43,"value":5225},"navigating between pages",{"type":43,"value":5227}," that used the same component structure. Suddenly, every ",{"type":38,"tag":559,"props":5229,"children":5231},{"className":5230},[],[5232],{"type":43,"value":5233},"search-by-filters",{"type":43,"value":5235}," event started ",{"type":38,"tag":72,"props":5237,"children":5238},{},[5239],{"type":43,"value":5240},"triggering multiple times",{"type":43,"value":5242},", making ",{"type":38,"tag":72,"props":5244,"children":5245},{},[5246],{"type":43,"value":5247},"duplicate API requests",{"type":43,"value":1063},{"type":38,"tag":1221,"props":5250,"children":5251},{},[],{"type":38,"tag":46,"props":5253,"children":5255},{"id":5254},"the-root-cause",[5256],{"type":43,"value":5257},"The Root Cause",{"type":38,"tag":82,"props":5259,"children":5260},{},[5261,5271],{"type":38,"tag":57,"props":5262,"children":5263},{},[5264,5269],{"type":38,"tag":72,"props":5265,"children":5266},{},[5267],{"type":43,"value":5268},"I never cleaned up the event listener.",{"type":43,"value":5270},"\nThe global emitter kept the old handlers in memory.",{"type":38,"tag":57,"props":5272,"children":5273},{},[5274,5279,5281,5287],{"type":38,"tag":72,"props":5275,"children":5276},{},[5277],{"type":43,"value":5278},"I used unscoped event names.",{"type":43,"value":5280},"\nThe same ",{"type":38,"tag":559,"props":5282,"children":5284},{"className":5283},[],[5285],{"type":43,"value":5286},"'goToPage'",{"type":43,"value":5288}," name was used in multiple places, causing unintended side effects.",{"type":38,"tag":1221,"props":5290,"children":5291},{},[],{"type":38,"tag":46,"props":5293,"children":5295},{"id":5294},"the-fix-clean-up-and-scope-your-events",[5296],{"type":43,"value":5297},"The Fix: Clean Up and Scope Your Events",{"type":38,"tag":4283,"props":5299,"children":5301},{"id":5300},"_1-remove-listeners-on-component-unmount",[5302,5304],{"type":43,"value":5303},"1. ",{"type":38,"tag":72,"props":5305,"children":5306},{},[5307],{"type":43,"value":5308},"Remove Listeners on Component Unmount",{"type":38,"tag":790,"props":5310,"children":5313},{"className":5311,"code":5312,"language":4972,"meta":8},[4970],"onBeforeUnmount(() => {\n  emitter.off('search-by-filters');\n  emitter.off(`${scope}goToPage`);\n});\n",[5314],{"type":38,"tag":559,"props":5315,"children":5316},{"__ignoreMap":8},[5317],{"type":43,"value":5312},{"type":38,"tag":4283,"props":5319,"children":5321},{"id":5320},"_2-scope-your-event-names",[5322,5324],{"type":43,"value":5323},"2. ",{"type":38,"tag":72,"props":5325,"children":5326},{},[5327],{"type":43,"value":5328},"Scope Your Event Names",{"type":38,"tag":790,"props":5330,"children":5333},{"className":5331,"code":5332,"language":4972,"meta":8},[4970],"const scope = 'searchResults-';\nemitter.on(`${scope}goToPage`, goToPage);\n",[5334],{"type":38,"tag":559,"props":5335,"children":5336},{"__ignoreMap":8},[5337],{"type":43,"value":5332},{"type":38,"tag":39,"props":5339,"children":5340},{},[5341,5343,5348],{"type":43,"value":5342},"This prevents your component from listening to events that ",{"type":38,"tag":72,"props":5344,"children":5345},{},[5346],{"type":43,"value":5347},"don’t belong to it",{"type":43,"value":1063},{"type":38,"tag":1221,"props":5350,"children":5351},{},[],{"type":38,"tag":46,"props":5353,"children":5355},{"id":5354},"pro-tip-create-a-scoped-wrapper",[5356],{"type":43,"value":5357},"Pro Tip: Create a Scoped Wrapper",{"type":38,"tag":39,"props":5359,"children":5360},{},[5361,5363,5368],{"type":43,"value":5362},"To make this cleaner, you can wrap ",{"type":38,"tag":559,"props":5364,"children":5366},{"className":5365},[],[5367],{"type":43,"value":5115},{"type":43,"value":5369}," in a scoped utility:",{"type":38,"tag":790,"props":5371,"children":5374},{"className":5372,"code":5373,"language":4972,"meta":8},[4970],"export function useScopedEmitter(scope: string) {\n  return {\n    on: (event: string, handler: any) => emitter.on(`${scope}${event}`, handler),\n    off: (event: string, handler?: any) => emitter.off(`${scope}${event}`, handler),\n    emit: (event: string, payload: any) => emitter.emit(`${scope}${event}`, payload)\n  };\n}\n",[5375],{"type":38,"tag":559,"props":5376,"children":5377},{"__ignoreMap":8},[5378],{"type":43,"value":5373},{"type":38,"tag":1221,"props":5380,"children":5381},{},[],{"type":38,"tag":46,"props":5383,"children":5385},{"id":5384},"summary",[5386],{"type":43,"value":5387},"Summary",{"type":38,"tag":39,"props":5389,"children":5390},{},[5391,5393,5398],{"type":43,"value":5392},"If you're using ",{"type":38,"tag":559,"props":5394,"children":5396},{"className":5395},[],[5397],{"type":43,"value":5115},{"type":43,"value":5399}," with Vue 3, remember:",{"type":38,"tag":39,"props":5401,"children":5402},{},[5403,5405,5411,5413,5418],{"type":43,"value":5404},"Always clean up listeners in ",{"type":38,"tag":559,"props":5406,"children":5408},{"className":5407},[],[5409],{"type":43,"value":5410},"onBeforeUnmount",{"type":43,"value":5412},"\nScope your event names to avoid collisions\nConsider wrapping ",{"type":38,"tag":559,"props":5414,"children":5416},{"className":5415},[],[5417],{"type":43,"value":5115},{"type":43,"value":5419}," in a scoped utility",{"type":38,"tag":39,"props":5421,"children":5422},{},[5423,5425,5430],{"type":43,"value":5424},"These best practices can ",{"type":38,"tag":72,"props":5426,"children":5427},{},[5428],{"type":43,"value":5429},"prevent memory leaks, improve performance",{"type":43,"value":5431},", and keep your codebase clean and understandable.",{"type":38,"tag":1221,"props":5433,"children":5434},{},[],{"type":38,"tag":46,"props":5436,"children":5438},{"id":5437},"related-resources",[5439],{"type":43,"value":5440},"Related Resources",{"type":38,"tag":53,"props":5442,"children":5443},{},[5444,5453,5463],{"type":38,"tag":57,"props":5445,"children":5446},{},[5447],{"type":38,"tag":61,"props":5448,"children":5450},{"href":5148,"rel":5449},[65],[5451],{"type":43,"value":5452},"mitt on GitHub",{"type":38,"tag":57,"props":5454,"children":5455},{},[5456],{"type":38,"tag":61,"props":5457,"children":5460},{"href":5458,"rel":5459},"https://vuejs.org/api/composition-api-lifecycle.html",[65],[5461],{"type":43,"value":5462},"Vue 3 Lifecycle Hooks",{"type":38,"tag":57,"props":5464,"children":5465},{},[5466],{"type":38,"tag":61,"props":5467,"children":5470},{"href":5468,"rel":5469},"https://vuejs.org/guide/components/communication.html",[65],[5471],{"type":43,"value":5472},"Handling global state and communication in Vue 3",{"title":8,"searchDepth":685,"depth":685,"links":5474},[5475,5476,5478,5479,5480,5486,5487,5488],{"id":5137,"depth":685,"text":5140},{"id":5177,"depth":685,"text":5477},"In this article, I’ll share a real-world debugging experience and show how to use mitt correctly to avoid memory leaks, redundant listeners, and naming conflicts.",{"id":5198,"depth":685,"text":5201},{"id":5254,"depth":685,"text":5257},{"id":5294,"depth":685,"text":5297,"children":5481},[5482,5484],{"id":5300,"depth":4447,"text":5483},"1. Remove Listeners on Component Unmount",{"id":5320,"depth":4447,"text":5485},"2. Scope Your Event Names",{"id":5354,"depth":685,"text":5357},{"id":5384,"depth":685,"text":5387},{"id":5437,"depth":685,"text":5440},"content:blog-posts:avoiding-eventbus-pitfalls-in-vue-3-with-mitt.md","blog-posts/avoiding-eventbus-pitfalls-in-vue-3-with-mitt.md","blog-posts/avoiding-eventbus-pitfalls-in-vue-3-with-mitt",{"_path":5493,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":5494,"description":5495,"seoTitle":5496,"seoDescription":5497,"keywords":5498,"image":5508,"alt":5509,"ogImage":5508,"tags":5510,"categories":5514,"published":25,"author":26,"link":5493,"date":5515,"sitemap":5516,"body":5520,"_type":693,"_id":6370,"_source":695,"_file":6371,"_stem":6372,"_extension":698},"/blog-posts/comparing-vue-3-data-grid-solutions-for-large-datasets","Comparing Vue 3 Data Grid Solutions for Large Datasets","A practical comparison of six Vue 3-compatible table grid components with support for large datasets, server-side pagination, i18n, and CRUD-friendly integration.","Vue 3 Data Grids Compared: vue-good-table-next vs Vuetify vs AG Grid and More","Explore six data grid solutions compatible with Vue 3 and Composition API. Compare vue-good-table-next, AG Grid, Vuetify, RevoGrid, and more for large-scale CRUD apps.",[5499,5500,5501,5502,5503,5504,5505,5506,5507],"vue 3 data grid","vue table component","vue-good-table-next","vuetify v-data-table-server","ag grid vue","revogrid","vue3-easy-data-table","large dataset pagination","vue crud table","/images/blog-posts/vue-table-grid.png.webp","Comparison table of Vue 3 data grids",[5113,5511,5512,5513],"datatable","grid","comparison",[4767],"2025-06-19",{"loc":5517,"lastmod":5515,"changefreq":30,"priority":31,"images":5518},"/blog-posts/comparing-vue-3-data-grid-solutions-for-large-datasets/",[5519],{"loc":5508},{"type":35,"children":5521,"toc":6358},[5522,5527,5545,5557,5562,5565,5571,5988,5991,5997,6001,6011,6049,6053,6062,6099,6102,6107,6116,6154,6157,6163,6172,6210,6213,6217,6226,6264,6267,6271,6276,6293,6318,6321,6327,6332,6350,6353],{"type":38,"tag":39,"props":5523,"children":5524},{},[5525],{"type":43,"value":5526},"In my current project, I implemented a table grid with pagination, allowing users to manage records through basic CRUD operations (Create, Read, Update, Delete).",{"type":38,"tag":39,"props":5528,"children":5529},{},[5530,5532,5537,5539,5543],{"type":43,"value":5531},"Before jumping into development, I explored several options to find a reliable and flexible grid system that could handle large datasets efficiently. The stack I was working with included ",{"type":38,"tag":72,"props":5533,"children":5534},{},[5535],{"type":43,"value":5536},"Vue 3 (Composition API)",{"type":43,"value":5538}," on the frontend and ",{"type":38,"tag":72,"props":5540,"children":5541},{},[5542],{"type":43,"value":4162},{"type":43,"value":5544}," on the backend.",{"type":38,"tag":39,"props":5546,"children":5547},{},[5548,5550,5555],{"type":43,"value":5549},"After researching the available solutions, I shortlisted ",{"type":38,"tag":72,"props":5551,"children":5552},{},[5553],{"type":43,"value":5554},"six table/grid components",{"type":43,"value":5556}," that integrate well with Vue 3 and offer varying levels of functionality and performance.",{"type":38,"tag":39,"props":5558,"children":5559},{},[5560],{"type":43,"value":5561},"In this post, I’ll share what I found and compare these six Vue-compatible data grid solutions — focusing on performance, flexibility, ease of integration, i18n support, and developer experience.",{"type":38,"tag":1221,"props":5563,"children":5564},{},[],{"type":38,"tag":46,"props":5566,"children":5568},{"id":5567},"summary-comparison-table",[5569],{"type":43,"value":5570},"Summary Comparison Table",{"type":38,"tag":1387,"props":5572,"children":5573},{},[5574,5610],{"type":38,"tag":5575,"props":5576,"children":5577},"thead",{},[5578],{"type":38,"tag":1395,"props":5579,"children":5580},{},[5581,5587,5591,5595,5600,5605],{"type":38,"tag":5582,"props":5583,"children":5584},"th",{},[5585],{"type":43,"value":5586},"Feature / Grid",{"type":38,"tag":5582,"props":5588,"children":5589},{},[5590],{"type":43,"value":5501},{"type":38,"tag":5582,"props":5592,"children":5593},{},[5594],{"type":43,"value":5505},{"type":38,"tag":5582,"props":5596,"children":5597},{},[5598],{"type":43,"value":5599},"Vuetify v-data-table-server",{"type":38,"tag":5582,"props":5601,"children":5602},{},[5603],{"type":43,"value":5604},"AG Grid (Community)",{"type":38,"tag":5582,"props":5606,"children":5607},{},[5608],{"type":43,"value":5609},"RevoGrid",{"type":38,"tag":1391,"props":5611,"children":5612},{},[5613,5645,5676,5707,5738,5768,5799,5830,5860,5891,5923,5956],{"type":38,"tag":1395,"props":5614,"children":5615},{},[5616,5621,5626,5630,5635,5640],{"type":38,"tag":1399,"props":5617,"children":5618},{},[5619],{"type":43,"value":5620},"Vue 3 Support",{"type":38,"tag":1399,"props":5622,"children":5623},{},[5624],{"type":43,"value":5625},"✅ Composition API",{"type":38,"tag":1399,"props":5627,"children":5628},{},[5629],{"type":43,"value":5625},{"type":38,"tag":1399,"props":5631,"children":5632},{},[5633],{"type":43,"value":5634},"✅ Vuetify 3 native",{"type":38,"tag":1399,"props":5636,"children":5637},{},[5638],{"type":43,"value":5639},"✅ Official wrapper",{"type":38,"tag":1399,"props":5641,"children":5642},{},[5643],{"type":43,"value":5644},"✅ Web component wrapper",{"type":38,"tag":1395,"props":5646,"children":5647},{},[5648,5653,5658,5662,5666,5671],{"type":38,"tag":1399,"props":5649,"children":5650},{},[5651],{"type":43,"value":5652},"Server-side Pagination",{"type":38,"tag":1399,"props":5654,"children":5655},{},[5656],{"type":43,"value":5657},"✅ Yes",{"type":38,"tag":1399,"props":5659,"children":5660},{},[5661],{"type":43,"value":5657},{"type":38,"tag":1399,"props":5663,"children":5664},{},[5665],{"type":43,"value":5657},{"type":38,"tag":1399,"props":5667,"children":5668},{},[5669],{"type":43,"value":5670},"✅ Full control",{"type":38,"tag":1399,"props":5672,"children":5673},{},[5674],{"type":43,"value":5675},"⚠️ Manual",{"type":38,"tag":1395,"props":5677,"children":5678},{},[5679,5684,5689,5693,5698,5703],{"type":38,"tag":1399,"props":5680,"children":5681},{},[5682],{"type":43,"value":5683},"Server-side Filtering",{"type":38,"tag":1399,"props":5685,"children":5686},{},[5687],{"type":43,"value":5688},"✅ Customizable",{"type":38,"tag":1399,"props":5690,"children":5691},{},[5692],{"type":43,"value":5688},{"type":38,"tag":1399,"props":5694,"children":5695},{},[5696],{"type":43,"value":5697},"✅ Built-in",{"type":38,"tag":1399,"props":5699,"children":5700},{},[5701],{"type":43,"value":5702},"✅ Full",{"type":38,"tag":1399,"props":5704,"children":5705},{},[5706],{"type":43,"value":5675},{"type":38,"tag":1395,"props":5708,"children":5709},{},[5710,5715,5720,5725,5729,5734],{"type":38,"tag":1399,"props":5711,"children":5712},{},[5713],{"type":43,"value":5714},"Virtual Scroll",{"type":38,"tag":1399,"props":5716,"children":5717},{},[5718],{"type":43,"value":5719},"❌ No",{"type":38,"tag":1399,"props":5721,"children":5722},{},[5723],{"type":43,"value":5724},"⚠️ Limited",{"type":38,"tag":1399,"props":5726,"children":5727},{},[5728],{"type":43,"value":5719},{"type":38,"tag":1399,"props":5730,"children":5731},{},[5732],{"type":43,"value":5733},"✅ Excellent",{"type":38,"tag":1399,"props":5735,"children":5736},{},[5737],{"type":43,"value":5733},{"type":38,"tag":1395,"props":5739,"children":5740},{},[5741,5746,5751,5755,5760,5764],{"type":38,"tag":1399,"props":5742,"children":5743},{},[5744],{"type":43,"value":5745},"Inline Cell Editing",{"type":38,"tag":1399,"props":5747,"children":5748},{},[5749],{"type":43,"value":5750},"❌ Manual only",{"type":38,"tag":1399,"props":5752,"children":5753},{},[5754],{"type":43,"value":5750},{"type":38,"tag":1399,"props":5756,"children":5757},{},[5758],{"type":43,"value":5759},"❌ Not supported",{"type":38,"tag":1399,"props":5761,"children":5762},{},[5763],{"type":43,"value":5697},{"type":38,"tag":1399,"props":5765,"children":5766},{},[5767],{"type":43,"value":5697},{"type":38,"tag":1395,"props":5769,"children":5770},{},[5771,5776,5781,5785,5790,5795],{"type":38,"tag":1399,"props":5772,"children":5773},{},[5774],{"type":43,"value":5775},"i18n (Multilingual UI)",{"type":38,"tag":1399,"props":5777,"children":5778},{},[5779],{"type":43,"value":5780},"✅ Via props",{"type":38,"tag":1399,"props":5782,"children":5783},{},[5784],{"type":43,"value":5780},{"type":38,"tag":1399,"props":5786,"children":5787},{},[5788],{"type":43,"value":5789},"✅ Vuetify i18n system",{"type":38,"tag":1399,"props":5791,"children":5792},{},[5793],{"type":43,"value":5794},"✅ localeText support",{"type":38,"tag":1399,"props":5796,"children":5797},{},[5798],{"type":43,"value":5675},{"type":38,"tag":1395,"props":5800,"children":5801},{},[5802,5807,5812,5816,5820,5825],{"type":38,"tag":1399,"props":5803,"children":5804},{},[5805],{"type":43,"value":5806},"Column Customization",{"type":38,"tag":1399,"props":5808,"children":5809},{},[5810],{"type":43,"value":5811},"✅ Scoped slots",{"type":38,"tag":1399,"props":5813,"children":5814},{},[5815],{"type":43,"value":5811},{"type":38,"tag":1399,"props":5817,"children":5818},{},[5819],{"type":43,"value":5811},{"type":38,"tag":1399,"props":5821,"children":5822},{},[5823],{"type":43,"value":5824},"✅ Cell renderer",{"type":38,"tag":1399,"props":5826,"children":5827},{},[5828],{"type":43,"value":5829},"✅ Templates",{"type":38,"tag":1395,"props":5831,"children":5832},{},[5833,5838,5842,5846,5850,5855],{"type":38,"tag":1399,"props":5834,"children":5835},{},[5836],{"type":43,"value":5837},"Row Selection",{"type":38,"tag":1399,"props":5839,"children":5840},{},[5841],{"type":43,"value":5697},{"type":38,"tag":1399,"props":5843,"children":5844},{},[5845],{"type":43,"value":5697},{"type":38,"tag":1399,"props":5847,"children":5848},{},[5849],{"type":43,"value":5697},{"type":38,"tag":1399,"props":5851,"children":5852},{},[5853],{"type":43,"value":5854},"✅ Checkbox + custom",{"type":38,"tag":1399,"props":5856,"children":5857},{},[5858],{"type":43,"value":5859},"✅ Configurable",{"type":38,"tag":1395,"props":5861,"children":5862},{},[5863,5868,5872,5876,5881,5886],{"type":38,"tag":1399,"props":5864,"children":5865},{},[5866],{"type":43,"value":5867},"Grouping / Tree Data",{"type":38,"tag":1399,"props":5869,"children":5870},{},[5871],{"type":43,"value":5759},{"type":38,"tag":1399,"props":5873,"children":5874},{},[5875],{"type":43,"value":5719},{"type":38,"tag":1399,"props":5877,"children":5878},{},[5879],{"type":43,"value":5880},"⚠️ Limited w/ expansion",{"type":38,"tag":1399,"props":5882,"children":5883},{},[5884],{"type":43,"value":5885},"✅ Group + Pivot",{"type":38,"tag":1399,"props":5887,"children":5888},{},[5889],{"type":43,"value":5890},"✅ Basic tree",{"type":38,"tag":1395,"props":5892,"children":5893},{},[5894,5899,5904,5909,5914,5919],{"type":38,"tag":1399,"props":5895,"children":5896},{},[5897],{"type":43,"value":5898},"Bundle Size",{"type":38,"tag":1399,"props":5900,"children":5901},{},[5902],{"type":43,"value":5903},"🟢 ~50 KB",{"type":38,"tag":1399,"props":5905,"children":5906},{},[5907],{"type":43,"value":5908},"🟢 ~25 KB",{"type":38,"tag":1399,"props":5910,"children":5911},{},[5912],{"type":43,"value":5913},"⚠️ Vuetify core dependent",{"type":38,"tag":1399,"props":5915,"children":5916},{},[5917],{"type":43,"value":5918},"🔴 ~500 KB",{"type":38,"tag":1399,"props":5920,"children":5921},{},[5922],{"type":43,"value":5903},{"type":38,"tag":1395,"props":5924,"children":5925},{},[5926,5931,5936,5941,5946,5951],{"type":38,"tag":1399,"props":5927,"children":5928},{},[5929],{"type":43,"value":5930},"Design / Theming",{"type":38,"tag":1399,"props":5932,"children":5933},{},[5934],{"type":43,"value":5935},"✅ Good UX",{"type":38,"tag":1399,"props":5937,"children":5938},{},[5939],{"type":43,"value":5940},"✅ Modern styling",{"type":38,"tag":1399,"props":5942,"children":5943},{},[5944],{"type":43,"value":5945},"✅ Vuetify Material Design",{"type":38,"tag":1399,"props":5947,"children":5948},{},[5949],{"type":43,"value":5950},"⚠️ Raw CSS themes",{"type":38,"tag":1399,"props":5952,"children":5953},{},[5954],{"type":43,"value":5955},"❌ Minimal",{"type":38,"tag":1395,"props":5957,"children":5958},{},[5959,5964,5969,5973,5978,5983],{"type":38,"tag":1399,"props":5960,"children":5961},{},[5962],{"type":43,"value":5963},"Learning Curve",{"type":38,"tag":1399,"props":5965,"children":5966},{},[5967],{"type":43,"value":5968},"🟢 Easy",{"type":38,"tag":1399,"props":5970,"children":5971},{},[5972],{"type":43,"value":5968},{"type":38,"tag":1399,"props":5974,"children":5975},{},[5976],{"type":43,"value":5977},"🟢 Easy for Vuetify users",{"type":38,"tag":1399,"props":5979,"children":5980},{},[5981],{"type":43,"value":5982},"🔴 Steep",{"type":38,"tag":1399,"props":5984,"children":5985},{},[5986],{"type":43,"value":5987},"⚠️ Moderate",{"type":38,"tag":1221,"props":5989,"children":5990},{},[],{"type":38,"tag":46,"props":5992,"children":5994},{"id":5993},"best-use-cases",[5995],{"type":43,"value":5996},"Best Use Cases",{"type":38,"tag":4283,"props":5998,"children":5999},{"id":5501},[6000],{"type":43,"value":5501},{"type":38,"tag":39,"props":6002,"children":6003},{},[6004,6006],{"type":43,"value":6005},"✅ ",{"type":38,"tag":72,"props":6007,"children":6008},{},[6009],{"type":43,"value":6010},"Best for admin dashboards with clean UX, custom filters, and server-side pagination",{"type":38,"tag":53,"props":6012,"children":6013},{},[6014,6019,6024,6029,6038],{"type":38,"tag":57,"props":6015,"children":6016},{},[6017],{"type":43,"value":6018},"Great for small-to-medium datasets (1k–50k rows)",{"type":38,"tag":57,"props":6020,"children":6021},{},[6022],{"type":43,"value":6023},"Excellent integration with i18n, scoped slots, and Composition API",{"type":38,"tag":57,"props":6025,"children":6026},{},[6027],{"type":43,"value":6028},"Editing via modal is recommended over in-table editing",{"type":38,"tag":57,"props":6030,"children":6031},{},[6032],{"type":38,"tag":61,"props":6033,"children":6036},{":target":1094,"href":6034,"rel":6035},"https://borisflesch.github.io/vue-good-table-next/",[65],[6037],{"type":43,"value":5501},{"type":38,"tag":57,"props":6039,"children":6040},{},[6041,6043],{"type":43,"value":6042},"GitHub: ",{"type":38,"tag":61,"props":6044,"children":6047},{":target":1094,"href":6045,"rel":6046},"https://github.com/BorisFlesch/vue-good-table-next",[65],[6048],{"type":43,"value":6045},{"type":38,"tag":4283,"props":6050,"children":6051},{"id":5505},[6052],{"type":43,"value":5505},{"type":38,"tag":39,"props":6054,"children":6055},{},[6056,6057],{"type":43,"value":6005},{"type":38,"tag":72,"props":6058,"children":6059},{},[6060],{"type":43,"value":6061},"Best for simple and fast Vue 3 tables with built-in search, sort, and styling",{"type":38,"tag":53,"props":6063,"children":6064},{},[6065,6070,6075,6080,6089],{"type":38,"tag":57,"props":6066,"children":6067},{},[6068],{"type":43,"value":6069},"Lightweight and clean UI",{"type":38,"tag":57,"props":6071,"children":6072},{},[6073],{"type":43,"value":6074},"Easy to integrate",{"type":38,"tag":57,"props":6076,"children":6077},{},[6078],{"type":43,"value":6079},"Limited support for advanced features",{"type":38,"tag":57,"props":6081,"children":6082},{},[6083],{"type":38,"tag":61,"props":6084,"children":6087},{":target":1094,"href":6085,"rel":6086},"https://hc200ok.github.io/vue3-easy-data-table-doc/",[65],[6088],{"type":43,"value":5505},{"type":38,"tag":57,"props":6090,"children":6091},{},[6092,6093],{"type":43,"value":6042},{"type":38,"tag":61,"props":6094,"children":6097},{":target":1094,"href":6095,"rel":6096},"https://github.com/HC200ok/vue3-easy-data-table",[65],[6098],{"type":43,"value":6095},{"type":38,"tag":1221,"props":6100,"children":6101},{},[],{"type":38,"tag":4283,"props":6103,"children":6105},{"id":6104},"vuetify-v-data-table-server",[6106],{"type":43,"value":5599},{"type":38,"tag":39,"props":6108,"children":6109},{},[6110,6111],{"type":43,"value":6005},{"type":38,"tag":72,"props":6112,"children":6113},{},[6114],{"type":43,"value":6115},"Best for projects already using Vuetify",{"type":38,"tag":53,"props":6117,"children":6118},{},[6119,6124,6129,6134,6143],{"type":38,"tag":57,"props":6120,"children":6121},{},[6122],{"type":43,"value":6123},"Beautiful out-of-the-box design with Material styling",{"type":38,"tag":57,"props":6125,"children":6126},{},[6127],{"type":43,"value":6128},"Tight integration with Vuetify’s theming and i18n",{"type":38,"tag":57,"props":6130,"children":6131},{},[6132],{"type":43,"value":6133},"Basic server-side support, but no virtual scroll or in-grid editing",{"type":38,"tag":57,"props":6135,"children":6136},{},[6137],{"type":38,"tag":61,"props":6138,"children":6141},{":target":1094,"href":6139,"rel":6140},"https://next.vuetifyjs.com/en/components/data-tables/#server-side-pagination",[65],[6142],{"type":43,"value":5599},{"type":38,"tag":57,"props":6144,"children":6145},{},[6146,6148],{"type":43,"value":6147},"Vuetify Docs: ",{"type":38,"tag":61,"props":6149,"children":6152},{":target":1094,"href":6150,"rel":6151},"https://next.vuetifyjs.com",[65],[6153],{"type":43,"value":6150},{"type":38,"tag":1221,"props":6155,"children":6156},{},[],{"type":38,"tag":4283,"props":6158,"children":6160},{"id":6159},"ag-grid-community-edition",[6161],{"type":43,"value":6162},"AG Grid (Community Edition)",{"type":38,"tag":39,"props":6164,"children":6165},{},[6166,6167],{"type":43,"value":6005},{"type":38,"tag":72,"props":6168,"children":6169},{},[6170],{"type":43,"value":6171},"Best for enterprise-level data handling, spreadsheet UX, and full virtual scroll",{"type":38,"tag":53,"props":6173,"children":6174},{},[6175,6180,6185,6190,6200],{"type":38,"tag":57,"props":6176,"children":6177},{},[6178],{"type":43,"value":6179},"Advanced performance (100k+ rows)",{"type":38,"tag":57,"props":6181,"children":6182},{},[6183],{"type":43,"value":6184},"In-cell editing, filtering, aggregation, pivoting",{"type":38,"tag":57,"props":6186,"children":6187},{},[6188],{"type":43,"value":6189},"Steeper learning curve and larger bundle size",{"type":38,"tag":57,"props":6191,"children":6192},{},[6193],{"type":38,"tag":61,"props":6194,"children":6197},{":target":1094,"href":6195,"rel":6196},"https://www.ag-grid.com/vue-data-grid/",[65],[6198],{"type":43,"value":6199},"AG Grid (Vue 3)",{"type":38,"tag":57,"props":6201,"children":6202},{},[6203,6204],{"type":43,"value":6042},{"type":38,"tag":61,"props":6205,"children":6208},{":target":1094,"href":6206,"rel":6207},"https://github.com/ag-grid/ag-grid",[65],[6209],{"type":43,"value":6206},{"type":38,"tag":1221,"props":6211,"children":6212},{},[],{"type":38,"tag":4283,"props":6214,"children":6215},{"id":5504},[6216],{"type":43,"value":5609},{"type":38,"tag":39,"props":6218,"children":6219},{},[6220,6221],{"type":43,"value":6005},{"type":38,"tag":72,"props":6222,"children":6223},{},[6224],{"type":43,"value":6225},"Best for performance-optimized, spreadsheet-style apps with minimal dependencies",{"type":38,"tag":53,"props":6227,"children":6228},{},[6229,6234,6239,6244,6254],{"type":38,"tag":57,"props":6230,"children":6231},{},[6232],{"type":43,"value":6233},"Extremely fast for virtualized rendering",{"type":38,"tag":57,"props":6235,"children":6236},{},[6237],{"type":43,"value":6238},"Small bundle size",{"type":38,"tag":57,"props":6240,"children":6241},{},[6242],{"type":43,"value":6243},"More complex integration (Web Component), less styled",{"type":38,"tag":57,"props":6245,"children":6246},{},[6247],{"type":38,"tag":61,"props":6248,"children":6251},{":target":1094,"href":6249,"rel":6250},"https://revolist.github.io/revogrid/#/vue3",[65],[6252],{"type":43,"value":6253},"RevoGrid (Vue wrapper)",{"type":38,"tag":57,"props":6255,"children":6256},{},[6257,6258],{"type":43,"value":6042},{"type":38,"tag":61,"props":6259,"children":6262},{":target":1094,"href":6260,"rel":6261},"https://github.com/revolist/vue3-datagrid",[65],[6263],{"type":43,"value":6260},{"type":38,"tag":1221,"props":6265,"children":6266},{},[],{"type":38,"tag":46,"props":6268,"children":6269},{"id":4431},[6270],{"type":43,"value":5063},{"type":38,"tag":39,"props":6272,"children":6273},{},[6274],{"type":43,"value":6275},"There’s no one-size-fits-all answer. Your ideal table component depends on your data volume, UX needs, and technical requirements.",{"type":38,"tag":39,"props":6277,"children":6278},{},[6279,6284,6286,6291],{"type":38,"tag":72,"props":6280,"children":6281},{},[6282],{"type":43,"value":6283},"For most Vue 3 + Laravel CRUD apps",{"type":43,"value":6285},", a combination of ",{"type":38,"tag":559,"props":6287,"children":6289},{"className":6288},[],[6290],{"type":43,"value":5501},{"type":43,"value":6292}," and a custom filtering form (with server-side logic) is a clean, scalable solution.",{"type":38,"tag":39,"props":6294,"children":6295},{},[6296,6298,6303,6305,6310,6312,6316],{"type":43,"value":6297},"If you’re building something more ",{"type":38,"tag":72,"props":6299,"children":6300},{},[6301],{"type":43,"value":6302},"spreadsheet-like",{"type":43,"value":6304},", or need high-performance grid editing, ",{"type":38,"tag":72,"props":6306,"children":6307},{},[6308],{"type":43,"value":6309},"AG Grid",{"type":43,"value":6311}," or ",{"type":38,"tag":72,"props":6313,"children":6314},{},[6315],{"type":43,"value":5609},{"type":43,"value":6317}," will be better investments — despite the extra setup.",{"type":38,"tag":1221,"props":6319,"children":6320},{},[],{"type":38,"tag":46,"props":6322,"children":6324},{"id":6323},"pro-tip",[6325],{"type":43,"value":6326},"Pro Tip",{"type":38,"tag":39,"props":6328,"children":6329},{},[6330],{"type":43,"value":6331},"For large datasets:",{"type":38,"tag":53,"props":6333,"children":6334},{},[6335,6340,6345],{"type":38,"tag":57,"props":6336,"children":6337},{},[6338],{"type":43,"value":6339},"Always filter and paginate on the server",{"type":38,"tag":57,"props":6341,"children":6342},{},[6343],{"type":43,"value":6344},"Avoid infinite scroll for UX reasons",{"type":38,"tag":57,"props":6346,"children":6347},{},[6348],{"type":43,"value":6349},"Consider exposing a “jump to page” or direct search field",{"type":38,"tag":1221,"props":6351,"children":6352},{},[],{"type":38,"tag":39,"props":6354,"children":6355},{},[6356],{"type":43,"value":6357},"Let me know what grid you use in your project — or if you’d like to see a side-by-side demo! By the way, in my case,\nI ended up using Vuetify’s v-data-table-server because the project I’m working on is built with the Vuetify Component Framework.",{"title":8,"searchDepth":685,"depth":685,"links":6359},[6360,6361,6368,6369],{"id":5567,"depth":685,"text":5570},{"id":5993,"depth":685,"text":5996,"children":6362},[6363,6364,6365,6366,6367],{"id":5501,"depth":4447,"text":5501},{"id":5505,"depth":4447,"text":5505},{"id":6104,"depth":4447,"text":5599},{"id":6159,"depth":4447,"text":6162},{"id":5504,"depth":4447,"text":5609},{"id":4431,"depth":685,"text":5063},{"id":6323,"depth":685,"text":6326},"content:blog-posts:comparing-vue-3-data-grid-solutions-for-large-datasets.md","blog-posts/comparing-vue-3-data-grid-solutions-for-large-datasets.md","blog-posts/comparing-vue-3-data-grid-solutions-for-large-datasets",{"_path":6374,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":6375,"description":6376,"seoTitle":6377,"seoDescription":6378,"keywords":6379,"image":6387,"alt":6388,"ogImage":6387,"tags":6389,"categories":6390,"published":7,"author":26,"link":6374,"date":6392,"body":6393,"_type":693,"_id":6815,"_source":695,"_file":6816,"_stem":6817,"_extension":698},"/blog-posts/comparing-vue-good-table-and-vuetifys-v-data-table-server-in-vue-3","Comparing vue-good-table and Vuetify’s v-data-table-server in Vue 3","A practical comparison of vue-good-table and Vuetify’s v-data-table-server using Vue 3 + TypeScript. Learn when to use each for performance and scalability.","vue-good-table vs Vuetify v-data-table-server | Vue 3 Table Plugin Comparison","Discover the pros and cons of vue-good-table and Vuetify’s v-data-table-server in a Vue 3 + TypeScript project with real-world examples.",[6380,6381,6382,4755,6383,6384,6385,6386],"vue-good-table","vuetify","v-data-table-server","data table comparison","typescript","pagination","performance","/images/blog-posts/nuxt.webp","Vue 3 data table comparison: vue-good-table vs Vuetify",[4474,6381,4762,5511],[3747,6391,4767],"Component Comparison","2025-06-14",{"type":35,"children":6394,"toc":6801},[6395,6415,6442,6447,6450,6456,6504,6507,6520,6531,6537,6543,6566,6572,6590,6599,6604,6627,6632,6650,6785,6791,6796],{"type":38,"tag":46,"props":6396,"children":6398},{"id":6397},"comparing-vue-good-table-and-vuetifys-v-data-table-server-in-a-vue-3-typescript-project",[6399,6401,6406,6408,6413],{"type":43,"value":6400},"Comparing ",{"type":38,"tag":559,"props":6402,"children":6404},{"className":6403},[],[6405],{"type":43,"value":6380},{"type":43,"value":6407}," and Vuetify’s ",{"type":38,"tag":559,"props":6409,"children":6411},{"className":6410},[],[6412],{"type":43,"value":6382},{"type":43,"value":6414}," in a Vue 3 + TypeScript Project",{"type":38,"tag":39,"props":6416,"children":6417},{},[6418,6420,6430,6431,6441],{"type":43,"value":6419},"When building admin interfaces in Vue 3, choosing the right data table plugin is essential—especially if you anticipate large datasets, server-side pagination, or rich customization. In this post, we’ll compare two popular options: ",{"type":38,"tag":61,"props":6421,"children":6424},{"href":6422,"rel":6423},"https://xaksis.github.io/vue-good-table/",[65],[6425],{"type":38,"tag":559,"props":6426,"children":6428},{"className":6427},[],[6429],{"type":43,"value":6380},{"type":43,"value":6407},{"type":38,"tag":61,"props":6432,"children":6435},{"href":6433,"rel":6434},"https://vuetifyjs.com/en/components/data-tables/basics/#usage",[65],[6436],{"type":38,"tag":559,"props":6437,"children":6439},{"className":6438},[],[6440],{"type":43,"value":6382},{"type":43,"value":1063},{"type":38,"tag":39,"props":6443,"children":6444},{},[6445],{"type":43,"value":6446},"We’ll use the same user data and show how each table handles pagination, customization, and integration.",{"type":38,"tag":1221,"props":6448,"children":6449},{},[],{"type":38,"tag":4283,"props":6451,"children":6453},{"id":6452},"project-context",[6454],{"type":43,"value":6455},"🛠 Project Context",{"type":38,"tag":53,"props":6457,"children":6458},{},[6459,6469,6479],{"type":38,"tag":57,"props":6460,"children":6461},{},[6462,6467],{"type":38,"tag":72,"props":6463,"children":6464},{},[6465],{"type":43,"value":6466},"Frontend stack:",{"type":43,"value":6468}," Vue 3 + TypeScript + Vuetify 3",{"type":38,"tag":57,"props":6470,"children":6471},{},[6472,6477],{"type":38,"tag":72,"props":6473,"children":6474},{},[6475],{"type":43,"value":6476},"Back-End API:",{"type":43,"value":6478}," Laravel",{"type":38,"tag":57,"props":6480,"children":6481},{},[6482,6487,6489,6495,6496,6502],{"type":38,"tag":72,"props":6483,"children":6484},{},[6485],{"type":43,"value":6486},"Use Case:",{"type":43,"value":6488}," Admin panel listing system users with pagination and action icons (",{"type":38,"tag":559,"props":6490,"children":6492},{"className":6491},[],[6493],{"type":43,"value":6494},"edit",{"type":43,"value":3086},{"type":38,"tag":559,"props":6497,"children":6499},{"className":6498},[],[6500],{"type":43,"value":6501},"view",{"type":43,"value":6503},", etc.)",{"type":38,"tag":1221,"props":6505,"children":6506},{},[],{"type":38,"tag":4283,"props":6508,"children":6510},{"id":6509},"_1-vue-good-table-fast-setup-limited-integration",[6511,6513,6518],{"type":43,"value":6512},"1. 🔍 ",{"type":38,"tag":559,"props":6514,"children":6516},{"className":6515},[],[6517],{"type":43,"value":6380},{"type":43,"value":6519},": Fast Setup, Limited Integration",{"type":38,"tag":790,"props":6521,"children":6526},{"className":6522,"code":6524,"language":6525,"meta":8},[6523],"language-html","\u003Cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :pagination-options=\"{\n    enabled: true,\n    perPage: 2,\n    perPageDropdown: [3, 6, 9],\n    mode: 'pages'\n  }\"\n>\n  \u003Ctemplate #table-row=\"props\">\n    \u003Cv-icon v-if=\"props.column.field === 'view'\" icon=\"mdi-eye\" />\n    \u003Cv-icon v-if=\"props.column.field === 'edit'\" icon=\"mdi-pen\" @click=\"showNameAlert(props.row.name)\" />\n  \u003C/template>\n\u003C/vue-good-table>\n","html",[6527],{"type":38,"tag":559,"props":6528,"children":6529},{"__ignoreMap":8},[6530],{"type":43,"value":6524},{"type":38,"tag":4283,"props":6532,"children":6534},{"id":6533},"pros-and-cons",[6535],{"type":43,"value":6536},"Pros and Cons",{"type":38,"tag":4283,"props":6538,"children":6540},{"id":6539},"pros",[6541],{"type":43,"value":6542},"✅ Pros",{"type":38,"tag":53,"props":6544,"children":6545},{},[6546,6551,6556,6561],{"type":38,"tag":57,"props":6547,"children":6548},{},[6549],{"type":43,"value":6550},"Very easy to set up",{"type":38,"tag":57,"props":6552,"children":6553},{},[6554],{"type":43,"value":6555},"Client-side pagination is fast for small datasets",{"type":38,"tag":57,"props":6557,"children":6558},{},[6559],{"type":43,"value":6560},"Clean separation of columns and rows",{"type":38,"tag":57,"props":6562,"children":6563},{},[6564],{"type":43,"value":6565},"Supports scoped slots for cell customization",{"type":38,"tag":4283,"props":6567,"children":6569},{"id":6568},"cons",[6570],{"type":43,"value":6571},"❌ Cons",{"type":38,"tag":53,"props":6573,"children":6574},{},[6575,6580,6585],{"type":38,"tag":57,"props":6576,"children":6577},{},[6578],{"type":43,"value":6579},"Not suitable for large datasets (no native server-side mode)",{"type":38,"tag":57,"props":6581,"children":6582},{},[6583],{"type":43,"value":6584},"Pagination is handled entirely on the client",{"type":38,"tag":57,"props":6586,"children":6587},{},[6588],{"type":43,"value":6589},"Vuetify design integration requires extra effort",{"type":38,"tag":790,"props":6591,"children":6594},{"className":6592,"code":6593,"language":6525,"meta":8},[6523],"\u003Cv-data-table-server\n  :headers=\"headers\"\n  :items=\"rows\"\n  :items-length=\"totalRows\"\n  :loading=\"isLoading\"\n  @update:options=\"loadItems\"\n>\n  \u003Ctemplate v-slot:item.email_verified_at=\"{ item }\">\n    \u003Cv-icon v-if=\"!item.email_verified_at\" icon=\"mdi-close-circle\" color=\"grey-darken-1\" />\n    \u003Cspan v-else>{{ item.email_verified_at }}\u003C/span>\n  \u003C/template>\n\n  \u003Ctemplate v-slot:item.actions=\"{ item }\">\n    \u003Cv-icon icon=\"mdi-account-reactivate-outline\" color=\"green\" @click=\"showNameAlert(item.name)\" />\n  \u003C/template>\n\u003C/v-data-table-server>\n\n",[6595],{"type":38,"tag":559,"props":6596,"children":6597},{"__ignoreMap":8},[6598],{"type":43,"value":6593},{"type":38,"tag":4283,"props":6600,"children":6602},{"id":6601},"pros-1",[6603],{"type":43,"value":6542},{"type":38,"tag":53,"props":6605,"children":6606},{},[6607,6612,6617,6622],{"type":38,"tag":57,"props":6608,"children":6609},{},[6610],{"type":43,"value":6611},"Full server-side pagination support",{"type":38,"tag":57,"props":6613,"children":6614},{},[6615],{"type":43,"value":6616},"Seamless Vuetify design language",{"type":38,"tag":57,"props":6618,"children":6619},{},[6620],{"type":43,"value":6621},"Built-in loading state, pagination handling",{"type":38,"tag":57,"props":6623,"children":6624},{},[6625],{"type":43,"value":6626},"Easy to add conditional rendering and dynamic styling",{"type":38,"tag":4283,"props":6628,"children":6630},{"id":6629},"cons-1",[6631],{"type":43,"value":6571},{"type":38,"tag":53,"props":6633,"children":6634},{},[6635,6640,6645],{"type":38,"tag":57,"props":6636,"children":6637},{},[6638],{"type":43,"value":6639},"More boilerplate and configuration required",{"type":38,"tag":57,"props":6641,"children":6642},{},[6643],{"type":43,"value":6644},"Harder to test without a real API",{"type":38,"tag":57,"props":6646,"children":6647},{},[6648],{"type":43,"value":6649},"TypeScript typing for slots can be verbose",{"type":38,"tag":1387,"props":6651,"children":6652},{},[6653,6680],{"type":38,"tag":5575,"props":6654,"children":6655},{},[6656],{"type":38,"tag":1395,"props":6657,"children":6658},{},[6659,6664,6672],{"type":38,"tag":5582,"props":6660,"children":6661},{},[6662],{"type":43,"value":6663},"Feature",{"type":38,"tag":5582,"props":6665,"children":6666},{},[6667],{"type":38,"tag":559,"props":6668,"children":6670},{"className":6669},[],[6671],{"type":43,"value":6380},{"type":38,"tag":5582,"props":6673,"children":6674},{},[6675],{"type":38,"tag":559,"props":6676,"children":6678},{"className":6677},[],[6679],{"type":43,"value":6382},{"type":38,"tag":1391,"props":6681,"children":6682},{},[6683,6701,6719,6735,6751,6767],{"type":38,"tag":1395,"props":6684,"children":6685},{},[6686,6691,6696],{"type":38,"tag":1399,"props":6687,"children":6688},{},[6689],{"type":43,"value":6690},"Setup speed",{"type":38,"tag":1399,"props":6692,"children":6693},{},[6694],{"type":43,"value":6695},"⭐⭐⭐⭐⭐",{"type":38,"tag":1399,"props":6697,"children":6698},{},[6699],{"type":43,"value":6700},"⭐⭐",{"type":38,"tag":1395,"props":6702,"children":6703},{},[6704,6709,6714],{"type":38,"tag":1399,"props":6705,"children":6706},{},[6707],{"type":43,"value":6708},"Server-side support",{"type":38,"tag":1399,"props":6710,"children":6711},{},[6712],{"type":43,"value":6713},"❌",{"type":38,"tag":1399,"props":6715,"children":6716},{},[6717],{"type":43,"value":6718},"✅",{"type":38,"tag":1395,"props":6720,"children":6721},{},[6722,6727,6731],{"type":38,"tag":1399,"props":6723,"children":6724},{},[6725],{"type":43,"value":6726},"Vuetify integration",{"type":38,"tag":1399,"props":6728,"children":6729},{},[6730],{"type":43,"value":6713},{"type":38,"tag":1399,"props":6732,"children":6733},{},[6734],{"type":43,"value":6718},{"type":38,"tag":1395,"props":6736,"children":6737},{},[6738,6743,6747],{"type":38,"tag":1399,"props":6739,"children":6740},{},[6741],{"type":43,"value":6742},"Custom cell rendering",{"type":38,"tag":1399,"props":6744,"children":6745},{},[6746],{"type":43,"value":6718},{"type":38,"tag":1399,"props":6748,"children":6749},{},[6750],{"type":43,"value":6718},{"type":38,"tag":1395,"props":6752,"children":6753},{},[6754,6759,6763],{"type":38,"tag":1399,"props":6755,"children":6756},{},[6757],{"type":43,"value":6758},"Performance with 50k rows",{"type":38,"tag":1399,"props":6760,"children":6761},{},[6762],{"type":43,"value":6713},{"type":38,"tag":1399,"props":6764,"children":6765},{},[6766],{"type":43,"value":6718},{"type":38,"tag":1395,"props":6768,"children":6769},{},[6770,6775,6780],{"type":38,"tag":1399,"props":6771,"children":6772},{},[6773],{"type":43,"value":6774},"Best for...",{"type":38,"tag":1399,"props":6776,"children":6777},{},[6778],{"type":43,"value":6779},"Small lists, MVPs",{"type":38,"tag":1399,"props":6781,"children":6782},{},[6783],{"type":43,"value":6784},"Large data, full-featured apps",{"type":38,"tag":4283,"props":6786,"children":6788},{"id":6787},"conclusion",[6789],{"type":43,"value":6790},"🔚 Conclusion",{"type":38,"tag":39,"props":6792,"children":6793},{},[6794],{"type":43,"value":6795},"If you’re working on a lightweight admin page or a prototype, vue-good-table is a fantastic quick-start tool. However, if you expect to scale to large user datasets or want full Vuetify integration with server-side pagination, v-data-table-server is the better long-term solution.",{"type":38,"tag":39,"props":6797,"children":6798},{},[6799],{"type":43,"value":6800},"Whichever you choose, building your table with reusable column definitions, scoped slots, and localization (vue-i18n) will give you a flexible and scalable result.",{"title":8,"searchDepth":685,"depth":685,"links":6802},[6803],{"id":6397,"depth":685,"text":6804,"children":6805},"Comparing vue-good-table and Vuetify’s v-data-table-server in a Vue 3 + TypeScript Project",[6806,6807,6809,6810,6811,6812,6813,6814],{"id":6452,"depth":4447,"text":6455},{"id":6509,"depth":4447,"text":6808},"1. 🔍 vue-good-table: Fast Setup, Limited Integration",{"id":6533,"depth":4447,"text":6536},{"id":6539,"depth":4447,"text":6542},{"id":6568,"depth":4447,"text":6571},{"id":6601,"depth":4447,"text":6542},{"id":6629,"depth":4447,"text":6571},{"id":6787,"depth":4447,"text":6790},"content:blog-posts:comparing-vue-good-table-and-vuetifys-v-data-table-server-in-vue-3.md","blog-posts/comparing-vue-good-table-and-vuetifys-v-data-table-server-in-vue-3.md","blog-posts/comparing-vue-good-table-and-vuetifys-v-data-table-server-in-vue-3",{"_path":6819,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":6820,"description":6821,"seoTitle":6822,"seoDescription":6823,"keywords":6824,"image":6830,"alt":1268,"ogImage":6830,"tags":6831,"categories":6835,"published":25,"author":26,"link":6819,"date":6836,"sitemap":6837,"body":6841,"_type":693,"_id":7026,"_source":695,"_file":7027,"_stem":7028,"_extension":698},"/blog-posts/git-workflows-pros-and-cons","Git workflows: Pros and cons","A comprehensive guide to various Git workflows, comparing their advantages and disadvantages for team collaboration.","Git Workflows Comparison: Pros & Cons","Learn about popular Git workflows like Git Flow, GitHub Flow, and more, along with their benefits and limitations for development teams.",[6825,6826,6827,6828,6829],"Git workflows","Git Flow","GitHub Flow","team collaboration Git","pros and cons Git workflows","/images/blog-posts/git-590x330.png.webp",[6832,6833,6834],"git","svn","version-control-systems",[21,4473],"2022-02-14",{"loc":6838,"lastmod":6836,"changefreq":30,"priority":31,"images":6839},"/blog-posts/git-workflows-pros-and-cons/",[6840],{"loc":6830},{"type":35,"children":6842,"toc":7022},[6843,6848,6858,6864,6869,6891,6901,6919,6926,6939,6946,6969,6976,6994,6999,7005,7009],{"type":38,"tag":39,"props":6844,"children":6845},{},[6846],{"type":43,"value":6847},"There are many different Git workflows that we could integrate into our development process. Many times these decisions are based on a lack of knowledge. \"We used this at the previous company.\" => But does that mean this approach will be a good fit here if it worked there? Of course not! And few people take the time and effort to explore the options even though discovering the pros and cons and deciding based on the input information would be essential.",{"type":38,"tag":39,"props":6849,"children":6850},{},[6851,6853,6856],{"type":43,"value":6852},"Git is the number one distributed version control system among developers. It replaced SVN in many development teams.",{"type":38,"tag":1303,"props":6854,"children":6855},{},[],{"type":43,"value":6857},"\nA workflow should not connect to companies in any way, but unfortunately, they connect. Giant corporations provide different web-based tools. But their software work with their own applications only. Due to this, one Git Flow approach in a different environment will not necessarily work.",{"type":38,"tag":46,"props":6859,"children":6861},{"id":6860},"the-most-common-git-workflows",[6862],{"type":43,"value":6863},"The most common Git workflows",{"type":38,"tag":39,"props":6865,"children":6866},{},[6867],{"type":43,"value":6868},"There are four common git-low:",{"type":38,"tag":53,"props":6870,"children":6871},{},[6872,6877,6881,6886],{"type":38,"tag":57,"props":6873,"children":6874},{},[6875],{"type":43,"value":6876},"One Flow",{"type":38,"tag":57,"props":6878,"children":6879},{},[6880],{"type":43,"value":6826},{"type":38,"tag":57,"props":6882,"children":6883},{},[6884],{"type":43,"value":6885},"Git Lab Flow",{"type":38,"tag":57,"props":6887,"children":6888},{},[6889],{"type":43,"value":6890},"Git Hub Flow",{"type":38,"tag":39,"props":6892,"children":6893},{},[6894],{"type":38,"tag":72,"props":6895,"children":6896},{},[6897],{"type":38,"tag":72,"props":6898,"children":6899},{},[6900],{"type":43,"value":6885},{"type":38,"tag":53,"props":6902,"children":6903},{},[6904,6909,6914],{"type":38,"tag":57,"props":6905,"children":6906},{},[6907],{"type":43,"value":6908},"Ideal when it needs to maintain a single version in production.",{"type":38,"tag":57,"props":6910,"children":6911},{},[6912],{"type":43,"value":6913},"It advocates the Feature Driven Development.",{"type":38,"tag":57,"props":6915,"children":6916},{},[6917],{"type":43,"value":6918},"It can become complex as Git Flow when it needs to maintain multiple version in production.",{"type":38,"tag":39,"props":6920,"children":6921},{},[6922],{"type":38,"tag":72,"props":6923,"children":6924},{},[6925],{"type":43,"value":6826},{"type":38,"tag":53,"props":6927,"children":6928},{},[6929,6934],{"type":38,"tag":57,"props":6930,"children":6931},{},[6932],{"type":43,"value":6933},"Ideal when it needs to maintain multiple version in production.",{"type":38,"tag":57,"props":6935,"children":6936},{},[6937],{"type":43,"value":6938},"It isn’t recommended when it need to maintain single version in production.",{"type":38,"tag":39,"props":6940,"children":6941},{},[6942],{"type":38,"tag":72,"props":6943,"children":6944},{},[6945],{"type":43,"value":6876},{"type":38,"tag":53,"props":6947,"children":6948},{},[6949,6954,6959,6964],{"type":38,"tag":57,"props":6950,"children":6951},{},[6952],{"type":43,"value":6953},"The git history will be cleaner, less messy and more readable.",{"type":38,"tag":57,"props":6955,"children":6956},{},[6957],{"type":43,"value":6958},"It is ideal when it needs to maintain a single version in production.",{"type":38,"tag":57,"props":6960,"children":6961},{},[6962],{"type":43,"value":6963},"Drop-in replacement for GitFlow",{"type":38,"tag":57,"props":6965,"children":6966},{},[6967],{"type":43,"value":6968},"It isn’t that useful for projects with Continuous Delivery or Continuous Deploy.",{"type":38,"tag":39,"props":6970,"children":6971},{},[6972],{"type":38,"tag":72,"props":6973,"children":6974},{},[6975],{"type":43,"value":6890},{"type":38,"tag":53,"props":6977,"children":6978},{},[6979,6984,6989],{"type":38,"tag":57,"props":6980,"children":6981},{},[6982],{"type":43,"value":6983},"A simpler alternative to Git Flow.",{"type":38,"tag":57,"props":6985,"children":6986},{},[6987],{"type":43,"value":6988},"It is ideal when we need to maintain single version in production.",{"type":38,"tag":57,"props":6990,"children":6991},{},[6992],{"type":43,"value":6993},"It isn’t recommended when multiple versions in production are needed.",{"type":38,"tag":39,"props":6995,"children":6996},{},[6997],{"type":43,"value":6998},"See the differences of these GitFlows in depth why and when we should use them:",{"type":38,"tag":3048,"props":7000,"children":7002},{"width":3050,"height":3051,"frameBorder":3052,"src":7001,"scrolling":3054,"style":3055},"https://www.mindmeister.com/maps/public_map_shell/1500731802/version-control-flows-with-git?width=600&height=400&z=auto&presentation=1",[7003],{"type":43,"value":7004},"Your browser is not able to display frames. Please visit \u003Ca href=\"https://www.mindmeister.com/1500731802/version-control-flows-with-git\" target=\"_blank\" rel=\"noopener\">Version Control Flows with GIT\u003C/a> on MindMeister.",{"type":38,"tag":46,"props":7006,"children":7007},{"id":675},[7008],{"type":43,"value":678},{"type":38,"tag":39,"props":7010,"children":7011},{},[7012,7014,7020],{"type":43,"value":7013},"In this topic, I have tried to collect the pros and cons of the different Git Flows. If you have checked the attached mindmap, you should know which one you should use when. By the way, here you can read about the ",{"type":38,"tag":61,"props":7015,"children":7017},{"href":7016},"/blog-posts/version-control-comparison-with-git-and-svn",[7018],{"type":43,"value":7019},"GIT vs. SVN comparison",{"type":43,"value":7021}," if you like.",{"title":8,"searchDepth":685,"depth":685,"links":7023},[7024,7025],{"id":6860,"depth":685,"text":6863},{"id":675,"depth":685,"text":678},"content:blog-posts:git-workflows-pros-and-cons.md","blog-posts/git-workflows-pros-and-cons.md","blog-posts/git-workflows-pros-and-cons",{"_path":7030,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7031,"description":7032,"seoTitle":7033,"seoDescription":7034,"keywords":7035,"image":7041,"alt":7042,"ogImage":7041,"tags":7043,"categories":7045,"published":25,"author":26,"link":7030,"date":7047,"sitemap":7048,"body":7052,"_type":693,"_id":7196,"_source":695,"_file":7197,"_stem":7198,"_extension":698},"/blog-posts/how-to-add-custom-tags-with-vuetify-3-autocomplete","How to Add Custom Tags with Vuetify 3 Autocomplete","Learn how to enhance Vuetify 3’s Autocomplete with chips and multiple selection by allowing users to add custom tags not in the initial list.","Vuetify 3 Autocomplete with Custom Tags and Chips","Step-by-step guide to enable new tag creation with Vuetify 3’s Autocomplete component using chips and keyboard events.",[7036,7037,7038,4755,7039,7040],"Vuetify 3","Autocomplete","Chips","Custom tags","v-autocomplete","/images/blog-posts/vuetify-vue.png.webp","Split image with Vue and Vuetify official logos on gradient background",[4474,6381,4762,7044],"ui",[3747,7046],"Vuetify","2025-06-08",{"loc":7049,"lastmod":7047,"changefreq":30,"priority":31,"images":7050},"/blog-posts/how-to-add-custom-tags-with-vuetify-3-autocomplete/",[7051],{"loc":7041},{"type":35,"children":7053,"toc":7191},[7054,7060,7073,7078,7098,7103,7121,7124,7130,7135,7156,7161,7164,7170,7180,7186],{"type":38,"tag":4183,"props":7055,"children":7057},{"id":7056},"the-issue",[7058],{"type":43,"value":7059},"The issue",{"type":38,"tag":39,"props":7061,"children":7062},{},[7063,7065,7071],{"type":43,"value":7064},"While working on a recent internal project, I ran into a limitation with Vuetify 3’s ",{"type":38,"tag":61,"props":7066,"children":7069},{":target":1094,"href":7067,"rel":7068},"https://vuetifyjs.com/en/components/autocompletes/#usage",[65],[7070],{"type":43,"value":7040},{"type":43,"value":7072},". I implemented a multi-select autocomplete component to allow users to add their tags, but I realized the old allow-new prop was missing. Here's how I worked around it.",{"type":38,"tag":39,"props":7074,"children":7075},{},[7076],{"type":43,"value":7077},"The component had to provide a list of routes where we could attach and save translations for the selected routes.",{"type":38,"tag":39,"props":7079,"children":7080},{},[7081,7083,7088,7090,7096],{"type":43,"value":7082},"Vuetify’s ",{"type":38,"tag":559,"props":7084,"children":7086},{"className":7085},[],[7087],{"type":43,"value":7040},{"type":43,"value":7089}," component is powerful for building tag-input fields — but as of Vuetify 3, it no longer\nprovides a built-in ",{"type":38,"tag":559,"props":7091,"children":7093},{"className":7092},[],[7094],{"type":43,"value":7095},"allow-new",{"type":43,"value":7097}," prop to add custom values.",{"type":38,"tag":39,"props":7099,"children":7100},{},[7101],{"type":43,"value":7102},"In this brief tutorial, I try to show a solution for these requirements:",{"type":38,"tag":53,"props":7104,"children":7105},{},[7106,7111,7116],{"type":38,"tag":57,"props":7107,"children":7108},{},[7109],{"type":43,"value":7110},"Need to allow users to select multiple values with chips.",{"type":38,"tag":57,"props":7112,"children":7113},{},[7114],{"type":43,"value":7115},"Need to be able to add new, custom tags not present in the original list.",{"type":38,"tag":57,"props":7117,"children":7118},{},[7119],{"type":43,"value":7120},"Need to maintain a clean and intuitive user experience using the Vue 3 Composition API.",{"type":38,"tag":1221,"props":7122,"children":7123},{},[],{"type":38,"tag":46,"props":7125,"children":7127},{"id":7126},"use-case",[7128],{"type":43,"value":7129},"Use Case",{"type":38,"tag":39,"props":7131,"children":7132},{},[7133],{"type":43,"value":7134},"Imagine a tagging system where users can either:",{"type":38,"tag":53,"props":7136,"children":7137},{},[7138,7143],{"type":38,"tag":57,"props":7139,"children":7140},{},[7141],{"type":43,"value":7142},"Pick from a predefined list of tags",{"type":38,"tag":57,"props":7144,"children":7145},{},[7146,7148,7154],{"type":43,"value":7147},"Or type in a new one and press ",{"type":38,"tag":559,"props":7149,"children":7151},{"className":7150},[],[7152],{"type":43,"value":7153},"Enter",{"type":43,"value":7155}," to add it",{"type":38,"tag":39,"props":7157,"children":7158},{},[7159],{"type":43,"value":7160},"This problem is a common requirement in blog platforms, CMSs, or project labelers. Let's check how we can do it.",{"type":38,"tag":1221,"props":7162,"children":7163},{},[],{"type":38,"tag":46,"props":7165,"children":7167},{"id":7166},"the-working-solution",[7168],{"type":43,"value":7169},"The Working Solution",{"type":38,"tag":790,"props":7171,"children":7175},{"className":7172,"code":7174,"language":4474,"meta":8},[7173],"language-vue","\u003Ctemplate>\n  \u003Cv-autocomplete\n      v-model=\"selectedItems\"\n      :items=\"items\"\n      label=\"Add or select items\"\n      multiple\n      chips\n      closable-chips\n      :search=\"search\"                    \u003C!-- ← Bind the search input -->\n  @update:search=\"val => search = val\"    \u003C!-- ← Sync the search string -->\n  @keydown.enter=\"addNewItem\"             \u003C!-- ← Handle the custom entry on Enter -->\n  />\n\u003C/template>\n\n\u003Cscript setup>\n  import { ref } from 'vue'\n\n  const items = ref(['Vue', 'Vuetify', 'JavaScript'])\n  const selectedItems = ref([])\n  const search = ref('') // ← Holds the current search string\n\n  function addNewItem() { // ← Triggered on Enter\n    const trimmed = search.value.trim()\n    if (trimmed && !items.value.includes(trimmed)) {\n      items.value.push(trimmed) // ← Add to available options\n    }\n    if (trimmed && !selectedItems.value.includes(trimmed)) {\n      selectedItems.value.push(trimmed) // ← Add to a selected list\n    }\n    search.value = '' // ← Reset input field\n  }\n\u003C/script>\n\n",[7176],{"type":38,"tag":559,"props":7177,"children":7178},{"__ignoreMap":8},[7179],{"type":43,"value":7174},{"type":38,"tag":46,"props":7181,"children":7183},{"id":7182},"the-conclusion",[7184],{"type":43,"value":7185},"The conclusion",{"type":38,"tag":39,"props":7187,"children":7188},{},[7189],{"type":43,"value":7190},"The component combines both selection from existing options and the ability to add new custom entries, making it\nflexible for use cases like tagging systems.",{"title":8,"searchDepth":685,"depth":685,"links":7192},[7193,7194,7195],{"id":7126,"depth":685,"text":7129},{"id":7166,"depth":685,"text":7169},{"id":7182,"depth":685,"text":7185},"content:blog-posts:how-to-add-custom-tags-with-vuetify-3-autocomplete.md","blog-posts/how-to-add-custom-tags-with-vuetify-3-autocomplete.md","blog-posts/how-to-add-custom-tags-with-vuetify-3-autocomplete",{"_path":7200,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7201,"description":7202,"seoTitle":7203,"seoDescription":7204,"keywords":7205,"image":7211,"alt":8,"ogImage":8,"tags":7212,"categories":7213,"published":25,"author":26,"link":7200,"date":7214,"sitemap":7215,"body":7219,"_type":693,"_id":7569,"_source":695,"_file":7570,"_stem":7571,"_extension":698},"/blog-posts/http-methods-differences","HTTP methods differences","An in-depth comparison of HTTP methods, explaining when to use GET, POST, PUT, PATCH, DELETE, and other HTTP request types.","HTTP Methods Explained: GET, POST, PUT, PATCH & DELETE","Understand the differences between HTTP methods such as GET, POST, PUT, PATCH, and DELETE, and when to use each for effective API design.",[7206,7207,7208,7209,7210],"HTTP methods comparison","GET vs POST","PUT vs PATCH","DELETE HTTP method","API request methods","/images/blog-posts/php-logo-h375.png.webp",[23,4473],[21,23,4473],"2022-01-17",{"loc":7216,"lastmod":7214,"changefreq":30,"priority":31,"images":7217},"/blog-posts/http-methods-differences/",[7218],{"loc":7211},{"type":35,"children":7220,"toc":7560},[7221,7251,7257,7262,7312,7318,7402,7408,7422,7428,7436,7442,7450,7532,7545,7550],{"type":38,"tag":39,"props":7222,"children":7223},{},[7224,7229,7231,7236,7238,7243,7245,7249],{"type":38,"tag":72,"props":7225,"children":7226},{},[7227],{"type":43,"value":7228},"Get",{"type":43,"value":7230}," and ",{"type":38,"tag":72,"props":7232,"children":7233},{},[7234],{"type":43,"value":7235},"Post methods are",{"type":43,"value":7237}," the most common method of ",{"type":38,"tag":72,"props":7239,"children":7240},{},[7241],{"type":43,"value":7242},"HTTP",{"type":43,"value":7244},". HTTP is an acronym for the Hypertext Transfer Protocol (",{"type":38,"tag":72,"props":7246,"children":7247},{},[7248],{"type":43,"value":7242},{"type":43,"value":7250},"). It enables communications between clients and servers as a request-response protocol.",{"type":38,"tag":46,"props":7252,"children":7254},{"id":7253},"http-methods",[7255],{"type":43,"value":7256},"HTTP Methods",{"type":38,"tag":39,"props":7258,"children":7259},{},[7260],{"type":43,"value":7261},"There are several other methods than the Get and the Post. All of them have a specific purpose.",{"type":38,"tag":53,"props":7263,"children":7264},{},[7265,7273,7281,7289,7294,7299,7307],{"type":38,"tag":57,"props":7266,"children":7267},{},[7268],{"type":38,"tag":72,"props":7269,"children":7270},{},[7271],{"type":43,"value":7272},"GET",{"type":38,"tag":57,"props":7274,"children":7275},{},[7276],{"type":38,"tag":72,"props":7277,"children":7278},{},[7279],{"type":43,"value":7280},"POST",{"type":38,"tag":57,"props":7282,"children":7283},{},[7284],{"type":38,"tag":72,"props":7285,"children":7286},{},[7287],{"type":43,"value":7288},"PUT",{"type":38,"tag":57,"props":7290,"children":7291},{},[7292],{"type":43,"value":7293},"HEAD",{"type":38,"tag":57,"props":7295,"children":7296},{},[7297],{"type":43,"value":7298},"DELETE",{"type":38,"tag":57,"props":7300,"children":7301},{},[7302],{"type":38,"tag":72,"props":7303,"children":7304},{},[7305],{"type":43,"value":7306},"PATCH",{"type":38,"tag":57,"props":7308,"children":7309},{},[7310],{"type":43,"value":7311},"OPTION",{"type":38,"tag":46,"props":7313,"children":7315},{"id":7314},"so-what-are-the-differences-between-the-get-and-post-methods",[7316],{"type":43,"value":7317},"So what are the differences between the Get and Post methods?",{"type":38,"tag":82,"props":7319,"children":7320},{},[7321,7330,7340,7357,7366,7381,7393],{"type":38,"tag":57,"props":7322,"children":7323},{},[7324,7328],{"type":38,"tag":72,"props":7325,"children":7326},{},[7327],{"type":43,"value":7272},{"type":43,"value":7329}," displays the submitted data as part of the URL.",{"type":38,"tag":57,"props":7331,"children":7332},{},[7333,7334,7338],{"type":43,"value":1581},{"type":38,"tag":72,"props":7335,"children":7336},{},[7337],{"type":43,"value":7280},{"type":43,"value":7339}," method, the request contains the encoded information",{"type":38,"tag":57,"props":7341,"children":7342},{},[7343,7355],{"type":38,"tag":72,"props":7344,"children":7345},{},[7346,7348,7353],{"type":43,"value":7347},"GET can handle a maximum of ",{"type":38,"tag":76,"props":7349,"children":7350},{},[7351],{"type":43,"value":7352},"2048",{"type":43,"value":7354}," characters",{"type":43,"value":7356},",",{"type":38,"tag":57,"props":7358,"children":7359},{},[7360,7364],{"type":38,"tag":72,"props":7361,"children":7362},{},[7363],{"type":43,"value":7280},{"type":43,"value":7365}," has no such restrictions.",{"type":38,"tag":57,"props":7367,"children":7368},{},[7369,7373,7375,7379],{"type":38,"tag":72,"props":7370,"children":7371},{},[7372],{"type":43,"value":7272},{"type":43,"value":7374}," allows only ASCII data, ",{"type":38,"tag":72,"props":7376,"children":7377},{},[7378],{"type":43,"value":7280},{"type":43,"value":7380}," does not have any such limitation, and we can use binary data also.",{"type":38,"tag":57,"props":7382,"children":7383},{},[7384,7386,7391],{"type":43,"value":7385},"Ideally, the ",{"type":38,"tag":72,"props":7387,"children":7388},{},[7389],{"type":43,"value":7390},"GET method",{"type":43,"value":7392}," is for data retrieval.",{"type":38,"tag":57,"props":7394,"children":7395},{},[7396,7400],{"type":38,"tag":72,"props":7397,"children":7398},{},[7399],{"type":43,"value":7280},{"type":43,"value":7401}," to insert and update.",{"type":38,"tag":46,"props":7403,"children":7405},{"id":7404},"is-there-any-difference-between-the-put-and-patch-methods",[7406],{"type":43,"value":7407},"Is there any difference between the put and patch methods?",{"type":38,"tag":39,"props":7409,"children":7410},{},[7411,7413,7420],{"type":43,"value":7412},"Yes! There is. ",{"type":38,"tag":61,"props":7414,"children":7417},{"href":7415,"rel":7416},"https://www.geeksforgeeks.org/difference-between-put-and-patch-request/",[65],[7418],{"type":43,"value":7419},"Check it for more details.",{"type":43,"value":7421}," The rest of this note uses the content of the link anyway!",{"type":38,"tag":4283,"props":7423,"children":7425},{"id":7424},"put",[7426],{"type":43,"value":7427},"Put",{"type":38,"tag":53,"props":7429,"children":7430},{},[7431],{"type":38,"tag":57,"props":7432,"children":7433},{},[7434],{"type":43,"value":7435}," Put is similar to Post in that it can create resources, but it does so when there is a defined URL wherein Put replaces the entire resource if it exists or creates new if it does not exist.",{"type":38,"tag":4283,"props":7437,"children":7439},{"id":7438},"patch",[7440],{"type":43,"value":7441},"Patch",{"type":38,"tag":53,"props":7443,"children":7444},{},[7445],{"type":38,"tag":57,"props":7446,"children":7447},{},[7448],{"type":43,"value":7449},"Unlike PUT Request, PATCH does partial updates e.g. Fields that need to be updated by the client, only that field is updated without modifying the other field.",{"type":38,"tag":1387,"props":7451,"children":7452},{},[7453],{"type":38,"tag":1391,"props":7454,"children":7455},{},[7456,7473,7486,7499,7519],{"type":38,"tag":1395,"props":7457,"children":7458},{},[7459,7466],{"type":38,"tag":1399,"props":7460,"children":7461},{},[7462],{"type":38,"tag":72,"props":7463,"children":7464},{},[7465],{"type":43,"value":7288},{"type":38,"tag":1399,"props":7467,"children":7468},{},[7469],{"type":38,"tag":72,"props":7470,"children":7471},{},[7472],{"type":43,"value":7306},{"type":38,"tag":1395,"props":7474,"children":7475},{},[7476,7481],{"type":38,"tag":1399,"props":7477,"children":7478},{},[7479],{"type":43,"value":7480},"PUT is a method of modifying resources where the client sends data that updates the entire resource.          ",{"type":38,"tag":1399,"props":7482,"children":7483},{},[7484],{"type":43,"value":7485},"PATCH is a method of modifying resources where the client sends partial data. It is not modifying the entire data.",{"type":38,"tag":1395,"props":7487,"children":7488},{},[7489,7494],{"type":38,"tag":1399,"props":7490,"children":7491},{},[7492],{"type":43,"value":7493},"In a PUT request, the enclosed entity is a modified version of the resource in comparison to what is on the origin server. The client version will replace what is on the server.",{"type":38,"tag":1399,"props":7495,"children":7496},{},[7497],{"type":43,"value":7498},"With PATCH, however, the enclosed entity contains a set of instructions describing how a resource currently residing on the origin server should be modified to produce a new version.",{"type":38,"tag":1395,"props":7500,"children":7501},{},[7502,7514],{"type":38,"tag":1399,"props":7503,"children":7504},{},[7505,7507,7512],{"type":43,"value":7506},"HTTP PUT is said to be ",{"type":38,"tag":76,"props":7508,"children":7509},{},[7510],{"type":43,"value":7511},"idempotent",{"type":43,"value":7513},", So if you send retry a request multiple times, that should be equivalent to a single request modification",{"type":38,"tag":1399,"props":7515,"children":7516},{},[7517],{"type":43,"value":7518},"HTTP PATCH is said to be non-idempotent. So if you retry the request N times, you will create N resources with N different URIs on the server.",{"type":38,"tag":1395,"props":7520,"children":7521},{},[7522,7527],{"type":38,"tag":1399,"props":7523,"children":7524},{},[7525],{"type":43,"value":7526},"It has High Bandwidth",{"type":38,"tag":1399,"props":7528,"children":7529},{},[7530],{"type":43,"value":7531},"It has Low Bandwidth because we send only the necessary resources in the payload.",{"type":38,"tag":2705,"props":7533,"children":7534},{},[7535,7540],{"type":38,"tag":39,"props":7536,"children":7537},{},[7538],{"type":43,"value":7539},"Idempotence is the property of certain operations in mathematics and computer science whereby they can be applied multiple times without changing the result beyond the initial application.",{"type":38,"tag":39,"props":7541,"children":7542},{},[7543],{"type":43,"value":7544},"Wikipedia",{"type":38,"tag":46,"props":7546,"children":7547},{"id":6787},[7548],{"type":43,"value":7549},"Conclusion",{"type":38,"tag":39,"props":7551,"children":7552},{},[7553,7555],{"type":43,"value":7554},"When we receive a question, whether, in an interview or a technical debate, we realize the depth of our knowledge is limited. We can always go deeper and deeper. Furthermore, we can make notes that we can review from time to time to have up-to-date knowledge. ",{"type":38,"tag":61,"props":7556,"children":7557},{"href":7200},[7558],{"type":43,"value":7559},"So that's why I have tried to detail the topic in this note.",{"title":8,"searchDepth":685,"depth":685,"links":7561},[7562,7563,7564,7568],{"id":7253,"depth":685,"text":7256},{"id":7314,"depth":685,"text":7317},{"id":7404,"depth":685,"text":7407,"children":7565},[7566,7567],{"id":7424,"depth":4447,"text":7427},{"id":7438,"depth":4447,"text":7441},{"id":6787,"depth":685,"text":7549},"content:blog-posts:http-methods-differences.md","blog-posts/http-methods-differences.md","blog-posts/http-methods-differences",{"_path":4724,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7573,"description":7574,"seoTitle":7575,"seoDescription":7576,"keywords":7577,"image":4468,"alt":1268,"ogImage":4468,"tags":7582,"categories":7583,"published":25,"author":26,"link":4724,"date":7584,"sitemap":7585,"body":7589,"_type":693,"_id":7733,"_source":695,"_file":7734,"_stem":7735,"_extension":698},"InertiaJS link component & Laravel GET, POST, PATCH, PUT methods","Explore the InertiaJS link component and how to work with Laravel's HTTP methods such as GET, POST, PATCH, and PUT in an integrated workflow.","InertiaJS Link Component & Laravel HTTP Methods","Learn about the InertiaJS link component and how Laravel's HTTP methods (GET, POST, PATCH, PUT) can be seamlessly integrated.",[7578,7579,7580,7581],"InertiaJS link component","Laravel HTTP methods","GET POST PATCH PUT Laravel","InertiaJS Laravel integration",[4470,4174,4471,714],[21,23,4473,4474],"2022-01-21",{"loc":7586,"lastmod":7584,"changefreq":30,"priority":31,"images":7587},"/blog-posts/inertiajs-link-component-and-laravel-get-post-patch-put-methods/",[7588],{"loc":4468},{"type":35,"children":7590,"toc":7727},[7591,7596,7601,7607,7615,7620,7628,7634,7639,7647,7655,7661,7666,7674,7682,7686],{"type":38,"tag":39,"props":7592,"children":7593},{},[7594],{"type":43,"value":7595},"InertiaJS has an inbuilt component that we can use on the client-side to make 'href' links. The reason we need to use this is to get access to extra functionalities which will help a lot during the development.",{"type":38,"tag":39,"props":7597,"children":7598},{},[7599],{"type":43,"value":7600},"This Link component helps our work in the post, patch, and put methods on the client-side. In the past, we had to create a form on the Front-End to be able to use these methods like the post, patch, put on the Back-End side. Now we do not have to do this with InertiaJS. Let's define them on the Back-End first and later on the Front-End.",{"type":38,"tag":46,"props":7602,"children":7604},{"id":7603},"laravel-get-route-and-inertiajs-link-component",[7605],{"type":43,"value":7606},"Laravel get route and InertiaJS Link Component",{"type":38,"tag":790,"props":7608,"children":7610},{"code":7609},"// Note: All the route codes below will go to the routes/web.php file.\nRoute::get('/settings', function () {\n    // The Vue Template name should be capital because of convention\n    return Inertia::render('Settings');\n});\n",[7611],{"type":38,"tag":559,"props":7612,"children":7613},{"__ignoreMap":8},[7614],{"type":43,"value":7609},{"type":38,"tag":39,"props":7616,"children":7617},{},[7618],{"type":43,"value":7619},"The relevant Front-End code will not differ too much from a regular 'href 'link tag. But then why do we have to use the Link component? Well, the reason is quite simple. An anchor tag provides regular navigation that reloads the page. Because InertiaJS is for SPA-s we do not want to page reload but we want to stay on the same page or at least mimic that we are still on the same. To achieve this we need to use the Link component. So we need to define a link component like this in InertiaJS for the get method:",{"type":38,"tag":790,"props":7621,"children":7623},{"code":7622},"\u003CLink type=\"button\" class=\"btn btn-link\" href=\"/settings\">Settings\u003C/Link>\n",[7624],{"type":38,"tag":559,"props":7625,"children":7626},{"__ignoreMap":8},[7627],{"type":43,"value":7622},{"type":38,"tag":46,"props":7629,"children":7631},{"id":7630},"laravel-post-route-and-inertiajs-link-component",[7632],{"type":43,"value":7633},"Laravel post route and InertiaJS Link Component",{"type":38,"tag":39,"props":7635,"children":7636},{},[7637],{"type":43,"value":7638},"Now we have a dummy post route as you can see below. It would get the name input value from a form if it wasn't InertiaJS on the Front-End. But thanks to InertiaJS we do not need to define a form at all! It saves us a huge amount of time and at least three or four lines of code per endpoint.",{"type":38,"tag":790,"props":7640,"children":7642},{"code":7641},"// Note: All the route codes below will go to the routes/web.php file.\nRoute::post('/logout', function () {\n    dd('We Log you Out: ' . request('user'));\n});\n",[7643],{"type":38,"tag":559,"props":7644,"children":7645},{"__ignoreMap":8},[7646],{"type":43,"value":7641},{"type":38,"tag":790,"props":7648,"children":7650},{"code":7649},"\u003CLink \ntype=\"button\" \nclass=\"btn btn-link\" \nhref=\"/logout\" method=\"post\" :data=\"{user:'Mr.John Doe'}\" \nas=\"button\">Log out as post\u003C/Link>\n",[7651],{"type":38,"tag":559,"props":7652,"children":7653},{"__ignoreMap":8},[7654],{"type":43,"value":7649},{"type":38,"tag":46,"props":7656,"children":7658},{"id":7657},"laravel-put-and-patch-route-and-inertiajs-link-component",[7659],{"type":43,"value":7660},"Laravel put and patch route and InertiaJS Link Component",{"type":38,"tag":39,"props":7662,"children":7663},{},[7664],{"type":43,"value":7665},"Similar to the previous InertiaJS post-implementation, the put and patch methods implementation is as simple as the post.",{"type":38,"tag":790,"props":7667,"children":7669},{"code":7668},"// Note: All the route codes below will go to the routes/web.php file.\n// Update with patch\nRoute::patch('/update-user-data', function () {\n    dd('Update user name: ' . request('user'));\n});\n\n// Update with put\nRoute::put('/update-user-data-2', function () {\n    dd('Update user name: ' . request('user'));\n});\n",[7670],{"type":38,"tag":559,"props":7671,"children":7672},{"__ignoreMap":8},[7673],{"type":43,"value":7668},{"type":38,"tag":790,"props":7675,"children":7677},{"code":7676},"\u003CLink \ntype=\"button\" \nclass=\"btn btn-link\" \nhref=\"/update-user-data\" \nmethod=\"patch\" \n:data=\"{user:'Miss.Janie Doe patch'}\" \nas=\"button\">Change user data as patch\u003C/Link>\n\n\u003CLink \ntype=\"button\" \nclass=\"btn btn-link\" \nhref=\"/update-user-data-2\" \nmethod=\"put\" \n:data=\"{user:'Mrs.Jane Doe'}\" \nas=\"button\">\nChange user data as put\u003C/Link>\n",[7678],{"type":38,"tag":559,"props":7679,"children":7680},{"__ignoreMap":8},[7681],{"type":43,"value":7676},{"type":38,"tag":46,"props":7683,"children":7684},{"id":675},[7685],{"type":43,"value":678},{"type":38,"tag":39,"props":7687,"children":7688},{},[7689,7695,7697,7703,7704,7711,7713,7719,7720,7725],{"type":38,"tag":61,"props":7690,"children":7692},{"href":7691},"/blog-posts/provide-data-between-inertiajs-and-laravel",[7693],{"type":43,"value":7694},"Previously",{"type":43,"value":7696}," I detailed how we can pass data from ",{"type":38,"tag":61,"props":7698,"children":7701},{"href":7699,"rel":7700},"https://laravel.com/",[65],[7702],{"type":43,"value":4162},{"type":43,"value":4797},{"type":38,"tag":61,"props":7705,"children":7708},{"href":7706,"rel":7707},"https://v3.vuejs.org/guide/component-props.html#props",[65],[7709],{"type":43,"value":7710},"Vue.JS props",{"type":43,"value":7712}," through ",{"type":38,"tag":61,"props":7714,"children":7717},{"href":7715,"rel":7716},"https://inertiajs.com/",[65],[7718],{"type":43,"value":733},{"type":43,"value":4729},{"type":38,"tag":61,"props":7721,"children":7722},{"href":4724},[7723],{"type":43,"value":7724},"In this part",{"type":43,"value":7726},", I have written some notes and info on why we should use the Link component and what benefit they can provide for us. I hope these notes will be useful to others too.",{"title":8,"searchDepth":685,"depth":685,"links":7728},[7729,7730,7731,7732],{"id":7603,"depth":685,"text":7606},{"id":7630,"depth":685,"text":7633},{"id":7657,"depth":685,"text":7660},{"id":675,"depth":685,"text":678},"content:blog-posts:inertiajs-link-component-and-laravel-get-post-patch-put-methods.md","blog-posts/inertiajs-link-component-and-laravel-get-post-patch-put-methods.md","blog-posts/inertiajs-link-component-and-laravel-get-post-patch-put-methods",{"_path":7737,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7738,"description":7739,"seoTitle":7740,"seoDescription":7741,"keywords":7742,"image":7747,"alt":1268,"ogImage":7747,"tags":7748,"categories":7749,"published":25,"author":26,"link":7737,"date":7750,"sitemap":7751,"body":7755,"_type":693,"_id":7890,"_source":695,"_file":7891,"_stem":7892,"_extension":698},"/blog-posts/is-your-experience-with-swiperjs-slider-in-vuejs-good","Is your experience with SwiperJS slider in VueJS good?","A guide to implementing SwiperJS slider in Vue.js applications and ensuring smooth performance for your sliders.","SwiperJS Slider in VueJS: Tips & Implementation","Learn how to use SwiperJS slider in Vue.js for seamless and responsive sliders that enhance your application's UI.",[7743,7744,7745,7746],"SwiperJS Vue.js","Slider in VueJS","SwiperJS tutorial","Vue slider integration","/images/blog-posts/swiper-720x478.png.webp",[21,713,714],[21,713,714],"2022-04-16",{"loc":7752,"lastmod":7750,"changefreq":30,"priority":31,"images":7753},"/blog-posts/is-your-experience-with-swiperjs-slider-in-vuejs-good/",[7754],{"loc":7747},{"type":35,"children":7756,"toc":7885},[7757,7763,7775,7803,7808,7828,7834,7839,7847,7852,7860,7865,7869,7874],{"type":38,"tag":46,"props":7758,"children":7760},{"id":7759},"the-vuejs-slick-carousel-story-and-swiperjs-slider",[7761],{"type":43,"value":7762},"The VueJS Slick Carousel Story and SwiperJS Slider",{"type":38,"tag":39,"props":7764,"children":7765},{},[7766,7768,7774],{"type":43,"value":7767},"A few days ago, I got a template that used a jQuery Slick slider plugin. It is a feature-rich plugin, and it turned out there are not many alternatives for VueJS. You can find the jQuery link ",{"type":38,"tag":61,"props":7769,"children":7772},{"href":7770,"rel":7771},"https://kenwheeler.github.io/slick/",[65],[7773],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":39,"props":7776,"children":7777},{},[7778,7780,7787,7789,7796,7798,7801],{"type":43,"value":7779},"There is a good-looking carousel ",{"type":38,"tag":61,"props":7781,"children":7784},{"href":7782,"rel":7783},"https://github.com/gs-shop/vue-slick-carousel",[65],[7785],{"type":43,"value":7786},"plugin",{"type":43,"value":7788},", but that is not compatible with Vue 3, just Vue 2.\nSo, I had to start a depth search, and I ran into this ",{"type":38,"tag":61,"props":7790,"children":7793},{"href":7791,"rel":7792},"https://ismail9k.github.io/vue3-carousel/",[65],[7794],{"type":43,"value":7795},"slider",{"type":43,"value":7797}," for Vue3 in the end. It knew everything I needed, except the vertical scroll, which was necessary for my task.",{"type":38,"tag":1303,"props":7799,"children":7800},{},[],{"type":43,"value":7802},"\n(Anyway, at the writing of this post, the vertical scroll feature of the vue3- carousel is in progress, and I am sure the result will be good because I have tested the plugin, and it seemed promising. )",{"type":38,"tag":39,"props":7804,"children":7805},{},[7806],{"type":43,"value":7807},"Unfortunately, waiting was not an option for me. I had to start implementing something. After further searching, I bumped into the swiperJS. This mobile touch slider has several great features, and it is compatible with VueJS3 and many other Front-End frameworks. It has good documentation, and I had to use it several times to be able to reproduce the jQuery slick slider functionality. You can find the public GitHub repository link below.",{"type":38,"tag":1383,"props":7809,"children":7810},{},[7811,7820],{"type":38,"tag":39,"props":7812,"children":7813},{},[7814],{"type":38,"tag":61,"props":7815,"children":7818},{"href":7816,"rel":7817},"https://github.com/biroa/swiperjs-customized-scroll",[65],[7819],{"type":43,"value":7816},{"type":38,"tag":1517,"props":7821,"children":7822},{},[7823],{"type":38,"tag":39,"props":7824,"children":7825},{},[7826],{"type":43,"value":7827},"SwiperJS Customized scroll for Vue3",{"type":38,"tag":46,"props":7829,"children":7831},{"id":7830},"did-you-have-any-impediments",[7832],{"type":43,"value":7833},"Did you have any impediments?",{"type":38,"tag":39,"props":7835,"children":7836},{},[7837],{"type":43,"value":7838},"Of course! (He-he) Impediments and difficulties are parts of this job and we have to solve them! But to be serious, one of the issues I had was that there was no option to position the scroll arrows vertically. Swiperjs has a lot of vertical functionality, but somehow they forgot to add this feature. So if someone needs a vertical arrow feature, then it is only achievable from CSS. So, if you check the 'App.vue' file in the public GitHub repo in the link above, then you can see that the solution was a few lines of CSS for the vertical arrows:",{"type":38,"tag":790,"props":7840,"children":7842},{"code":7841},".swiper-vertical .swiper-button-next, .swiper-vertical .swiper-button-prev {\n     left: 50%;\n     transform: rotate(90deg);\n     transform-origin: left center;\n}\n.swiper-vertical .swiper-button-prev {\n     top: 10px;\n}\n.swiper-vertical .swiper-button-next {\n         top: auto;\n         bottom: 10px;\n}\n",[7843],{"type":38,"tag":559,"props":7844,"children":7845},{"__ignoreMap":8},[7846],{"type":43,"value":7841},{"type":38,"tag":39,"props":7848,"children":7849},{},[7850],{"type":43,"value":7851},"The other impediment was the fact that this plugin works by scroll by default. So I had to go through the documentation and had to find a way how I can disable the scroll and make it work by mouse click. That needed two properties that I had to bind as a parameter to the swiper component:",{"type":38,"tag":790,"props":7853,"children":7855},{"code":7854},"    \u003Cswiper\n        :direction=\"'vertical'\"\n        :navigation=\"true\"\n        :slidesPerView=\"4\"\n        :spaceBetween=\"30\"\n        :watchSlidesProgress=\"true\"\n        :slideToClickedSlide=\"true\"\n        :loop=\"true\"\n        :modules=\"modules\"\n        class=\"mySwiper\"\n    >\n",[7856],{"type":38,"tag":559,"props":7857,"children":7858},{"__ignoreMap":8},[7859],{"type":43,"value":7854},{"type":38,"tag":39,"props":7861,"children":7862},{},[7863],{"type":43,"value":7864},"Although it is not an impediment it is worth mentioning that this slider rotates in both directions. The Slick Slider jQuery plugin in the template that I mentioned, in the beginning, rotated in one direction. Luckily the stakeholders of the projects did not mind this small difference.",{"type":38,"tag":46,"props":7866,"children":7867},{"id":675},[7868],{"type":43,"value":678},{"type":38,"tag":39,"props":7870,"children":7871},{},[7872],{"type":43,"value":7873},"As of the date of this post-writing, SwiperJS is the most robust solution for VueJS sliders. There are few alternatives at the moment. It has perfect documentation, and it is not a newborn tool. It has versions to React, Angular, and VueJS. Svelte and native JavaScript is also available. Solving my issues did not take too much time and I was satisfied with the result. My experience was good with it I highly recommend it. However, it is also worth checking the progress of the vue-slick-carousel time-to-time because that would be an official rewrite of the Slick Slider jQuery plugin for Vue3.",{"type":38,"tag":39,"props":7875,"children":7876},{},[7877,7879,7884],{"type":43,"value":7878},"By the way, if you are interested in my previous VueJS post you can read it ",{"type":38,"tag":61,"props":7880,"children":7882},{"href":7881},"/blog-posts/lifecycle-hooks-of-the-options-api",[7883],{"type":43,"value":1061},{"type":43,"value":1063},{"title":8,"searchDepth":685,"depth":685,"links":7886},[7887,7888,7889],{"id":7759,"depth":685,"text":7762},{"id":7830,"depth":685,"text":7833},{"id":675,"depth":685,"text":678},"content:blog-posts:is-your-experience-with-swiperjs-slider-in-vuejs-good.md","blog-posts/is-your-experience-with-swiperjs-slider-in-vuejs-good.md","blog-posts/is-your-experience-with-swiperjs-slider-in-vuejs-good",{"_path":7894,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7895,"description":7896,"seoTitle":7897,"seoDescription":7898,"keywords":7899,"image":710,"alt":1268,"ogImage":710,"tags":7904,"categories":7905,"published":25,"author":26,"link":7894,"date":7906,"sitemap":7907,"body":7911,"_type":693,"_id":8304,"_source":695,"_file":8305,"_stem":8306,"_extension":698},"/blog-posts/lifecycle-hooks-of-the-composition-api","Lifecycle hooks of the Composition API","Understand the lifecycle hooks of Vue.js Composition API, their usage, and how they differ from Options API lifecycle hooks.","Lifecycle Hooks in Vue Composition API","Learn about the lifecycle hooks in Vue.js Composition API and how they improve reactivity and component behavior.",[7900,7901,7902,7903],"Vue Composition API hooks","Composition API lifecycle hooks","Vue reactivity","Lifecycle in Composition API",[21,713,714],[21,713,714],"2022-04-20",{"loc":7908,"lastmod":7906,"changefreq":30,"priority":31,"images":7909},"/blog-posts/lifecycle-hooks-of-the-composition-api/",[7910],{"loc":710},{"type":35,"children":7912,"toc":8292},[7913,7940,7952,7958,7963,7984,7990,8003,8009,8014,8020,8025,8043,8049,8054,8067,8073,8081,8087,8133,8138,8156,8164,8230,8236,8254,8260,8276,8280],{"type":38,"tag":39,"props":7914,"children":7915},{},[7916,7918,7931,7933,7938],{"type":43,"value":7917},"All Vue components go through the ",{"type":38,"tag":61,"props":7919,"children":7922},{"href":7920,"rel":7921},"https://vuejs.org/api/options-lifecycle.html",[65],[7923],{"type":38,"tag":72,"props":7924,"children":7925},{},[7926],{"type":38,"tag":76,"props":7927,"children":7928},{},[7929],{"type":43,"value":7930},"Lifecycle Hooks",{"type":43,"value":7932}," phases. These phases are different initialization steps. Not just the subcomponents but the main root component go through these stages. It is worth to note the purposes of these phases are different. Furthermore, Options API and Composition API lifecycle hooks differ a bit. In a ",{"type":38,"tag":61,"props":7934,"children":7935},{"href":7881},[7936],{"type":43,"value":7937},"previous VueJS post",{"type":43,"value":7939},", I already went through the details of the Options API lifecycle hooks, so in this one, I am going to focus on the lifecycle hooks of the Composition API. The lifecycle hooks of the Composition API are also functions, like the Options API ones. And their purpose is the same.",{"type":38,"tag":39,"props":7941,"children":7942},{},[7943,7945,7950],{"type":43,"value":7944},"When we use Composition API, the name of the lifecycle hooks starts with an ",{"type":38,"tag":72,"props":7946,"children":7947},{},[7948],{"type":43,"value":7949},"on",{"type":43,"value":7951}," prefix. Based on this, let's see which are these.",{"type":38,"tag":46,"props":7953,"children":7955},{"id":7954},"on-mounted-lifecycle-hook",[7956],{"type":43,"value":7957},"on Mounted Lifecycle Hook",{"type":38,"tag":39,"props":7959,"children":7960},{},[7961],{"type":43,"value":7962},"The callback will run after the component has been mounted. One component is mounted when:",{"type":38,"tag":53,"props":7964,"children":7965},{},[7966,7979],{"type":38,"tag":57,"props":7967,"children":7968},{},[7969,7971],{"type":43,"value":7970},"all of its synchronous child components have been mounted\n",{"type":38,"tag":53,"props":7972,"children":7973},{},[7974],{"type":38,"tag":57,"props":7975,"children":7976},{},[7977],{"type":43,"value":7978},"it does not include the async components",{"type":38,"tag":57,"props":7980,"children":7981},{},[7982],{"type":43,"value":7983},"The component's DOM tree has been created and inserted into the parent container.",{"type":38,"tag":46,"props":7985,"children":7987},{"id":7986},"on-updated-lifecycle-hook",[7988],{"type":43,"value":7989},"on Updated Lifecycle Hook",{"type":38,"tag":39,"props":7991,"children":7992},{},[7993,7995,8002],{"type":43,"value":7994},"The callback will run after the component has updated its DOM tree due to a reactive state change. If we need to access the updated DOM after a specific change, we should use the ",{"type":38,"tag":61,"props":7996,"children":7999},{"href":7997,"rel":7998},"https://vuejs.org/api/general.html#nexttick",[65],[8000],{"type":43,"value":8001},"nextTick function instead",{"type":43,"value":1063},{"type":38,"tag":46,"props":8004,"children":8006},{"id":8005},"on-unmounted",[8007],{"type":43,"value":8008},"on Unmounted",{"type":38,"tag":39,"props":8010,"children":8011},{},[8012],{"type":43,"value":8013},"The callback will run after the component has been unmounted. We are talking about an unmounted component when all of its child components have been unmounted. Render effect and computed / watchers executions are not running.",{"type":38,"tag":46,"props":8015,"children":8017},{"id":8016},"on-beforemount-lifecycle-hook",[8018],{"type":43,"value":8019},"on BeforeMount Lifecycle Hook",{"type":38,"tag":39,"props":8021,"children":8022},{},[8023],{"type":43,"value":8024},"It will run, right before the component is to be mounted. ",{"type":38,"tag":53,"props":8026,"children":8027},{},[8028,8033,8038],{"type":38,"tag":57,"props":8029,"children":8030},{},[8031],{"type":43,"value":8032},"The component has finished setting up its reactive state. ",{"type":38,"tag":57,"props":8034,"children":8035},{},[8036],{"type":43,"value":8037},"No DOM nodes have been created yet. ",{"type":38,"tag":57,"props":8039,"children":8040},{},[8041],{"type":43,"value":8042},"It is about to execute its DOM render effect for the first time.",{"type":38,"tag":46,"props":8044,"children":8046},{"id":8045},"on-beforeupdate",[8047],{"type":43,"value":8048},"on BeforeUpdate",{"type":38,"tag":39,"props":8050,"children":8051},{},[8052],{"type":43,"value":8053},"The hook will run right before the component is about to update its DOM tree due to a reactive state change. ",{"type":38,"tag":53,"props":8055,"children":8056},{},[8057,8062],{"type":38,"tag":57,"props":8058,"children":8059},{},[8060],{"type":43,"value":8061},"In this hook, we can safely modify the component state. ",{"type":38,"tag":57,"props":8063,"children":8064},{},[8065],{"type":43,"value":8066},"We can change the DOM too before Vue do it. ",{"type":38,"tag":46,"props":8068,"children":8070},{"id":8069},"on-beforeunmount-lifecycle-hook",[8071],{"type":43,"value":8072},"on BeforeUnmount Lifecycle Hook",{"type":38,"tag":53,"props":8074,"children":8075},{},[8076],{"type":38,"tag":57,"props":8077,"children":8078},{},[8079],{"type":43,"value":8080},"It runs right before a component instance is to be unmounted.",{"type":38,"tag":46,"props":8082,"children":8084},{"id":8083},"on-errorcaptured",[8085],{"type":43,"value":8086},"on ErrorCaptured",{"type":38,"tag":53,"props":8088,"children":8089},{},[8090],{"type":38,"tag":57,"props":8091,"children":8092},{},[8093,8095],{"type":43,"value":8094},"We can capture errors from descendent components from these sources:\n",{"type":38,"tag":53,"props":8096,"children":8097},{},[8098,8103,8108,8113,8118,8123,8128],{"type":38,"tag":57,"props":8099,"children":8100},{},[8101],{"type":43,"value":8102},"Component renders",{"type":38,"tag":57,"props":8104,"children":8105},{},[8106],{"type":43,"value":8107},"Event handlers",{"type":38,"tag":57,"props":8109,"children":8110},{},[8111],{"type":43,"value":8112},"Lifecycle hooks",{"type":38,"tag":57,"props":8114,"children":8115},{},[8116],{"type":43,"value":8117},"setup() function",{"type":38,"tag":57,"props":8119,"children":8120},{},[8121],{"type":43,"value":8122},"Watchers",{"type":38,"tag":57,"props":8124,"children":8125},{},[8126],{"type":43,"value":8127},"Custom directive hooks",{"type":38,"tag":57,"props":8129,"children":8130},{},[8131],{"type":43,"value":8132},"Transition hooks",{"type":38,"tag":39,"props":8134,"children":8135},{},[8136],{"type":43,"value":8137},"This hook receives three arguments:",{"type":38,"tag":53,"props":8139,"children":8140},{},[8141,8146,8151],{"type":38,"tag":57,"props":8142,"children":8143},{},[8144],{"type":43,"value":8145},"the error ",{"type":38,"tag":57,"props":8147,"children":8148},{},[8149],{"type":43,"value":8150},"the component instance that triggered the error, ",{"type":38,"tag":57,"props":8152,"children":8153},{},[8154],{"type":43,"value":8155},"the information string specifying the error source type.",{"type":38,"tag":39,"props":8157,"children":8158},{},[8159],{"type":38,"tag":72,"props":8160,"children":8161},{},[8162],{"type":43,"value":8163},"Error Propagation Rules",{"type":38,"tag":53,"props":8165,"children":8166},{},[8167,8179,8192,8211],{"type":38,"tag":57,"props":8168,"children":8169},{},[8170,8172,8177],{"type":43,"value":8171},"1, If the application-level (",{"type":38,"tag":76,"props":8173,"children":8174},{},[8175],{"type":43,"value":8176},"app.config.errorHandler",{"type":43,"value":8178},") error handling is defined we will get errors reports.",{"type":38,"tag":57,"props":8180,"children":8181},{},[8182,8184],{"type":43,"value":8183},"2, Multiple errorCaptured:\n",{"type":38,"tag":53,"props":8185,"children":8186},{},[8187],{"type":38,"tag":57,"props":8188,"children":8189},{},[8190],{"type":43,"value":8191},"If this hook exits on a component's inheritance chain or parent chain then all of them will be invoked on the same error.",{"type":38,"tag":57,"props":8193,"children":8194},{},[8195,8197],{"type":43,"value":8196},"3, ErrorCaptured hook throws the error\n",{"type":38,"tag":53,"props":8198,"children":8199},{},[8200],{"type":38,"tag":57,"props":8201,"children":8202},{},[8203,8205,8209],{"type":43,"value":8204},"then this and the original error too are sent to the (",{"type":38,"tag":76,"props":8206,"children":8207},{},[8208],{"type":43,"value":8176},{"type":43,"value":8210},")",{"type":38,"tag":57,"props":8212,"children":8213},{},[8214,8216],{"type":43,"value":8215},"4, ErrorCaptured hook returns false to prevent error propagation further.\n",{"type":38,"tag":53,"props":8217,"children":8218},{},[8219],{"type":38,"tag":57,"props":8220,"children":8221},{},[8222,8224,8228],{"type":43,"value":8223},"This is essentially saying \"this error has been handled and should be ignored.\" It will prevent any additional errorCaptured hooks or ",{"type":38,"tag":76,"props":8225,"children":8226},{},[8227],{"type":43,"value":8176},{"type":43,"value":8229}," from being invoked for this error.",{"type":38,"tag":46,"props":8231,"children":8233},{"id":8232},"on-activated-lifecycle-hook",[8234],{"type":43,"value":8235},"on Activated Lifecycle Hook",{"type":38,"tag":53,"props":8237,"children":8238},{},[8239],{"type":38,"tag":57,"props":8240,"children":8241},{},[8242,8244,8253],{"type":43,"value":8243},"It runs when the component instance is inserted into the DOM as part of a tree cached by ",{"type":38,"tag":61,"props":8245,"children":8248},{"href":8246,"rel":8247},"https://vuejs.org/api/built-in-components.html#keepalive",[65],[8249],{"type":38,"tag":8250,"props":8251,"children":8252},"keep-alive",{},[],{"type":43,"value":1063},{"type":38,"tag":46,"props":8255,"children":8257},{"id":8256},"on-deactivated",[8258],{"type":43,"value":8259},"on Deactivated",{"type":38,"tag":53,"props":8261,"children":8262},{},[8263],{"type":38,"tag":57,"props":8264,"children":8265},{},[8266,8268,8275],{"type":43,"value":8267},"It runs when the component instance is removed from the DOM as part of a tree cached by ",{"type":38,"tag":61,"props":8269,"children":8271},{"href":8246,"rel":8270},[65],[8272],{"type":38,"tag":8250,"props":8273,"children":8274},{},[],{"type":43,"value":1063},{"type":38,"tag":46,"props":8277,"children":8278},{"id":6787},[8279],{"type":43,"value":7549},{"type":38,"tag":39,"props":8281,"children":8282},{},[8283,8285,8290],{"type":43,"value":8284},"As I mentioned at the beginning of the post the Lifecycle Hooks are just a bit different in the Composition API context than in the Options one. You can check the details of the Options API lifecycle hooks in my ",{"type":38,"tag":61,"props":8286,"children":8287},{"href":7881},[8288],{"type":43,"value":8289},"previous post here",{"type":43,"value":8291},". Anyway, the main difference is the name of the functions and not all methods are available on the Composition API version. Otherwise, the purpose and why we need to use it are the same.",{"title":8,"searchDepth":685,"depth":685,"links":8293},[8294,8295,8296,8297,8298,8299,8300,8301,8302,8303],{"id":7954,"depth":685,"text":7957},{"id":7986,"depth":685,"text":7989},{"id":8005,"depth":685,"text":8008},{"id":8016,"depth":685,"text":8019},{"id":8045,"depth":685,"text":8048},{"id":8069,"depth":685,"text":8072},{"id":8083,"depth":685,"text":8086},{"id":8232,"depth":685,"text":8235},{"id":8256,"depth":685,"text":8259},{"id":6787,"depth":685,"text":7549},"content:blog-posts:lifecycle-hooks-of-the-composition-api.md","blog-posts/lifecycle-hooks-of-the-composition-api.md","blog-posts/lifecycle-hooks-of-the-composition-api",{"_path":7881,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":8308,"description":8309,"seoTitle":8310,"seoDescription":8311,"keywords":8312,"image":710,"alt":1268,"ogImage":710,"tags":8317,"categories":8318,"published":25,"author":26,"link":7881,"date":8319,"sitemap":8320,"body":8326,"_type":693,"_id":8551,"_source":695,"_file":8552,"_stem":8553,"_extension":698},"Lifecycle hooks of the Options API","Explore the lifecycle hooks of Vue.js Options API and their relevance in managing component behavior and state.","Lifecycle Hooks in Vue Options API","Discover the lifecycle hooks of Vue.js Options API and how they enable better component behavior and state management.",[8313,8314,8315,8316],"Vue Options API lifecycle hooks","Options API lifecycle","Vue lifecycle events","Vue component behavior",[21,713,714],[21,713,714],"2022-04-14",{"loc":8321,"lastmod":8319,"changefreq":30,"priority":31,"images":8322},"/blog-posts/lifecycle-hooks-of-the-options-api/",[8323,8324],{"loc":710},{"loc":8325},"/images/blog-posts/vuejs-life-cycle-hooks.png.webp",{"type":35,"children":8327,"toc":8540},[8328,8346,8354,8370,8373,8378,8386,8392,8397,8403,8408,8429,8434,8440,8445,8451,8456,8474,8480,8485,8498,8504,8509,8515,8520,8526,8531,8535],{"type":38,"tag":39,"props":8329,"children":8330},{},[8331,8333,8344],{"type":43,"value":8332},"All Vue components go through the ",{"type":38,"tag":72,"props":8334,"children":8335},{},[8336],{"type":38,"tag":76,"props":8337,"children":8338},{},[8339],{"type":38,"tag":61,"props":8340,"children":8342},{":target":1094,"href":7920,"rel":8341},[65],[8343],{"type":43,"value":7930},{"type":43,"value":8345}," phases. These phases are different initialization steps. Not just the subcomponents but the main root component go through these stages. It is worth to note the purposes of these phases are different. Furthermore, Options API and Composition API lifecycle hooks differ a bit.",{"type":38,"tag":39,"props":8347,"children":8348},{},[8349],{"type":38,"tag":1885,"props":8350,"children":8353},{"alt":8351,"src":8352},"Vue lifecycle hooks from Setup through Unmounted","/images/blog-posts/Screenshot-from-2022-04-02-18-23-55.png",[],{"type":38,"tag":1383,"props":8355,"children":8356},{},[8357],{"type":38,"tag":2148,"props":8358,"children":8359},{"style":2150},[8360,8361,8365,8366],{"type":43,"value":2153},{"type":38,"tag":1885,"props":8362,"children":8364},{"style":2156,"src":8325,"alt":8363},"Vue JS Life Cycle Hooks",[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":8367,"children":8368},{},[8369],{"type":43,"value":8363},{"type":38,"tag":1303,"props":8371,"children":8372},{},[],{"type":38,"tag":39,"props":8374,"children":8375},{},[8376],{"type":43,"value":8377},"These hooks are accessible in the code of the templates as a function, and we can use these stages for our purposes. Below you see the snippet that implements all the Lifecycle Hooks for the Options API.",{"type":38,"tag":790,"props":8379,"children":8381},{"code":8380},"let vm = Vue.createApp({\n  data() {\n    return {\n      message: \"Hello world!\"\n    }\n  },\n\n  beforeCreate() {\n    // Before the Vue instance is initialized\n    console.log('beforeCreate() function called!', this.message)\n  },\n\n  created() {\n    // If we want to make changes in the data only then you can use this lifecycle\n    console.log('created() function called!', this.message)\n  },\n\n  beforeMount() {\n    // It is triggered when the template is compiled, but it hasn't been added to the template yet.\n    console.log('beforeMount() function called!', this.$el) // $el value will be the element where vue will be mounted\n  },\n\n  mounted() {\n    // This mounted lifecycle is only triggered once the template is compiled and inserted into a Document\n    // We can access the template here if we want to make a change in it.\n    console.log('mounted() function called!', this.$el)\n  },\n\n  beforeUpdate() {\n    // This hook gets called whenever an update in our data occurs but before these changes applied to the template\n    console.log('beforeUpdate() function called!')\n  },\n\n  updated() {\n    console.log('updated() funcction called!')\n  },\n\n  beforeUnmount() {\n    // This hook gets triggered before the instance is unmounted. Let us making last minute changes. We still have\n    // access to the data and methods\n    console.log('beforeUnmount() function called!')\n  },\n\n  unmounted() {\n    // When the instance is unmounted\n    console.log('unmounted() function called!')\n  }\n})\n\nvm.mount('#app')\n",[8382],{"type":38,"tag":559,"props":8383,"children":8384},{"__ignoreMap":8},[8385],{"type":43,"value":8380},{"type":38,"tag":46,"props":8387,"children":8389},{"id":8388},"before-create",[8390],{"type":43,"value":8391},"Before Create",{"type":38,"tag":39,"props":8393,"children":8394},{},[8395],{"type":43,"value":8396},"The Before Create hook runs when the component instance is initialized, before the data and computed parameter processing.",{"type":38,"tag":46,"props":8398,"children":8400},{"id":8399},"created",[8401],{"type":43,"value":8402},"Created",{"type":38,"tag":39,"props":8404,"children":8405},{},[8406],{"type":43,"value":8407},"The created hook runs when",{"type":38,"tag":53,"props":8409,"children":8410},{},[8411,8415,8419,8424],{"type":38,"tag":57,"props":8412,"children":8413},{},[8414],{"type":43,"value":984},{"type":38,"tag":57,"props":8416,"children":8417},{},[8418],{"type":43,"value":989},{"type":38,"tag":57,"props":8420,"children":8421},{},[8422],{"type":43,"value":8423},"watchers",{"type":38,"tag":57,"props":8425,"children":8426},{},[8427],{"type":43,"value":8428},"reactive data",{"type":38,"tag":39,"props":8430,"children":8431},{},[8432],{"type":43,"value":8433},"have been set up. But the mounting phase has not been started. Due to this, the \"$el\" DOM property is not available.",{"type":38,"tag":46,"props":8435,"children":8437},{"id":8436},"before-mounted",[8438],{"type":43,"value":8439},"Before Mounted",{"type":38,"tag":39,"props":8441,"children":8442},{},[8443],{"type":43,"value":8444},"Components have finished setting up their reactive state, but no DOM nodes have been created yet. (No execution in SSR approach)",{"type":38,"tag":46,"props":8446,"children":8448},{"id":8447},"mounted",[8449],{"type":43,"value":8450},"Mounted",{"type":38,"tag":39,"props":8452,"children":8453},{},[8454],{"type":43,"value":8455},"This hook will run when the component is mounted. One component is mounted when:",{"type":38,"tag":53,"props":8457,"children":8458},{},[8459,8470],{"type":38,"tag":57,"props":8460,"children":8461},{},[8462,8463],{"type":43,"value":7970},{"type":38,"tag":53,"props":8464,"children":8465},{},[8466],{"type":38,"tag":57,"props":8467,"children":8468},{},[8469],{"type":43,"value":7978},{"type":38,"tag":57,"props":8471,"children":8472},{},[8473],{"type":43,"value":7983},{"type":38,"tag":46,"props":8475,"children":8477},{"id":8476},"before-update",[8478],{"type":43,"value":8479},"Before Update",{"type":38,"tag":39,"props":8481,"children":8482},{},[8483],{"type":43,"value":8484},"It will run before any reactive property state change. We can use this hook when we want to access the DOM state before Vue updates the DOM. It is also safe to modify the component state in this hook.",{"type":38,"tag":39,"props":8486,"children":8487},{},[8488,8496],{"type":38,"tag":72,"props":8489,"children":8490},{},[8491],{"type":38,"tag":76,"props":8492,"children":8493},{},[8494],{"type":43,"value":8495},"\"Do not mutate component state in the updated hook - this will likely lead to an infinite update loop!\"",{"type":43,"value":8497}," - by vuejs.org",{"type":38,"tag":46,"props":8499,"children":8501},{"id":8500},"updated",[8502],{"type":43,"value":8503},"Updated",{"type":38,"tag":39,"props":8505,"children":8506},{},[8507],{"type":43,"value":8508},"This state will run when the reactive properties have changed already.",{"type":38,"tag":46,"props":8510,"children":8512},{"id":8511},"before-unmount",[8513],{"type":43,"value":8514},"Before Unmount",{"type":38,"tag":39,"props":8516,"children":8517},{},[8518],{"type":43,"value":8519},"It runs before the unmount phase of a component. The component instance is still fully functional.",{"type":38,"tag":46,"props":8521,"children":8523},{"id":8522},"unmounted",[8524],{"type":43,"value":8525},"UnMounted",{"type":38,"tag":39,"props":8527,"children":8528},{},[8529],{"type":43,"value":8530},"This hook runs after when the components are unmounted. One component is unmounted when all of its child components have been unmounted. Render effect and computed / watchers executions are stopped.",{"type":38,"tag":46,"props":8532,"children":8533},{"id":675},[8534],{"type":43,"value":678},{"type":38,"tag":39,"props":8536,"children":8537},{},[8538],{"type":43,"value":8539},"In this post, I focused on the details of the lifecycle hooks in the Options API. Sometimes, in the next VueJS-related post I am going to dive into the lifecycle hooks of the Composition API. They are a bit different but it would not be that difficult. I hope this is useful not just for me but for others too. Thanks for reading if you got here ...",{"title":8,"searchDepth":685,"depth":685,"links":8541},[8542,8543,8544,8545,8546,8547,8548,8549,8550],{"id":8388,"depth":685,"text":8391},{"id":8399,"depth":685,"text":8402},{"id":8436,"depth":685,"text":8439},{"id":8447,"depth":685,"text":8450},{"id":8476,"depth":685,"text":8479},{"id":8500,"depth":685,"text":8503},{"id":8511,"depth":685,"text":8514},{"id":8522,"depth":685,"text":8525},{"id":675,"depth":685,"text":678},"content:blog-posts:lifecycle-hooks-of-the-options-api.md","blog-posts/lifecycle-hooks-of-the-options-api.md","blog-posts/lifecycle-hooks-of-the-options-api",{"_path":8555,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":8556,"description":8557,"seoTitle":8558,"seoDescription":8559,"keywords":8560,"image":8568,"alt":8569,"ogImage":8568,"tags":8570,"categories":8572,"published":25,"author":26,"link":8555,"date":8574,"sitemap":8575,"body":8579,"_type":693,"_id":9324,"_source":695,"_file":9325,"_stem":9326,"_extension":698},"/blog-posts/php-hashing-functions","Comparing PHP Hashing Functions: `md5`, `sha1`, `hash()`, `password_hash()`, and `hash_hmac()`","A practical comparison of PHP’s hashing functions including `md5`, `sha1`, `hash()`, `password_hash()`, and `hash_hmac()` — which one should you use and why?","PHP Hashing Functions Compared: md5 vs sha1 vs hash vs password_hash vs hash_hmac","Learn the differences between PHP's hashing functions and understand when to use each one securely in modern PHP applications.",[19,8561,8562,8563,8564,8565,8566,8567],"hashing","password_hash","hash_hmac","sha1","md5","security","encryption","/images/blog-posts/php-hash-functions.png.webp","PHP Hashing Functions Comparison",[23,8566,8561,8571],"development",[19,8573],"Security","2025-07-18",{"loc":8576,"lastmod":8574,"changefreq":30,"priority":31,"images":8577},"/blog-posts/php-hashing-functions/",[8578],{"loc":8568},{"type":35,"children":8580,"toc":9313},[8581,8587,8592,8605,8611,8616,8621,8669,8672,8678,8687,8692,8705,8710,8728,8741,8747,8756,8760,8773,8777,8790,8802,8808,8817,8821,8839,8843,8856,8868,8874,8883,8887,8915,8919,8932,8944,8950,8954,8977,8981,8994,9006,9012,9241,9276,9280,9285,9308],{"type":38,"tag":46,"props":8582,"children":8584},{"id":8583},"foreword",[8585],{"type":43,"value":8586},"Foreword",{"type":38,"tag":39,"props":8588,"children":8589},{},[8590],{"type":43,"value":8591},"In a recent project, I needed to implement a redirection mechanism that included certain GET parameters in the URL.\nTo prevent exposing these parameters publicly and to ensure they couldn't be reverse-engineered, I decided to use HMAC\nhashing with a secret key.",{"type":38,"tag":39,"props":8593,"children":8594},{},[8595,8597,8603],{"type":43,"value":8596},"By using ",{"type":38,"tag":559,"props":8598,"children":8600},{"className":8599},[],[8601],{"type":43,"value":8602},"hash_hmac('sha256', $decryptNeededInfo, $secret)",{"type":43,"value":8604},", where the secret is securely stored and privately shared between\napplications on different domains, I was able to generate non-reversible, tamper-proof tokens. This approach provides a\nrobust level of security for encoding identifiers or temporary access keys — and it served as the inspiration behind\nthis post.",{"type":38,"tag":46,"props":8606,"children":8608},{"id":8607},"storing-sensitive-data-in-php",[8609],{"type":43,"value":8610},"Storing Sensitive Data in PHP",{"type":38,"tag":39,"props":8612,"children":8613},{},[8614],{"type":43,"value":8615},"Hashing is a fundamental technique in any PHP application that needs to store or verify sensitive data, such as passwords\nor API tokens. PHP provides several hashing functions, but not all are equally secure or suitable for the same use cases.",{"type":38,"tag":39,"props":8617,"children":8618},{},[8619],{"type":43,"value":8620},"In this post, we’ll compare the most commonly used PHP hashing functions:",{"type":38,"tag":53,"props":8622,"children":8623},{},[8624,8633,8642,8651,8660],{"type":38,"tag":57,"props":8625,"children":8626},{},[8627],{"type":38,"tag":559,"props":8628,"children":8630},{"className":8629},[],[8631],{"type":43,"value":8632},"md5()",{"type":38,"tag":57,"props":8634,"children":8635},{},[8636],{"type":38,"tag":559,"props":8637,"children":8639},{"className":8638},[],[8640],{"type":43,"value":8641},"sha1()",{"type":38,"tag":57,"props":8643,"children":8644},{},[8645],{"type":38,"tag":559,"props":8646,"children":8648},{"className":8647},[],[8649],{"type":43,"value":8650},"hash()",{"type":38,"tag":57,"props":8652,"children":8653},{},[8654],{"type":38,"tag":559,"props":8655,"children":8657},{"className":8656},[],[8658],{"type":43,"value":8659},"password_hash()",{"type":38,"tag":57,"props":8661,"children":8662},{},[8663],{"type":38,"tag":559,"props":8664,"children":8666},{"className":8665},[],[8667],{"type":43,"value":8668},"hash_hmac()",{"type":38,"tag":1221,"props":8670,"children":8671},{},[],{"type":38,"tag":46,"props":8673,"children":8675},{"id":8674},"_1-md5-fast-but-unsafe",[8676],{"type":43,"value":8677},"1. md5() – Fast but Unsafe",{"type":38,"tag":790,"props":8679,"children":8682},{"className":8680,"code":8681,"language":23,"meta":8},[4293],"$hash = md5(\"mypassword\");\n",[8683],{"type":38,"tag":559,"props":8684,"children":8685},{"__ignoreMap":8},[8686],{"type":43,"value":8681},{"type":38,"tag":39,"props":8688,"children":8689},{},[8690],{"type":43,"value":8691},"✅ Pros:",{"type":38,"tag":53,"props":8693,"children":8694},{},[8695,8700],{"type":38,"tag":57,"props":8696,"children":8697},{},[8698],{"type":43,"value":8699},"Extremely fast",{"type":38,"tag":57,"props":8701,"children":8702},{},[8703],{"type":43,"value":8704},"Available in all PHP versions",{"type":38,"tag":39,"props":8706,"children":8707},{},[8708],{"type":43,"value":8709},"❌ Cons:",{"type":38,"tag":53,"props":8711,"children":8712},{},[8713,8718,8723],{"type":38,"tag":57,"props":8714,"children":8715},{},[8716],{"type":43,"value":8717},"Cryptographically broken",{"type":38,"tag":57,"props":8719,"children":8720},{},[8721],{"type":43,"value":8722},"Easily cracked with rainbow tables or brute force",{"type":38,"tag":57,"props":8724,"children":8725},{},[8726],{"type":43,"value":8727},"Not recommended for password hashing",{"type":38,"tag":39,"props":8729,"children":8730},{},[8731,8739],{"type":38,"tag":76,"props":8732,"children":8733},{},[8734],{"type":38,"tag":72,"props":8735,"children":8736},{},[8737],{"type":43,"value":8738},"Verdict:",{"type":43,"value":8740}," Only use it for non-security tasks like file integrity checks or cache keys.",{"type":38,"tag":46,"props":8742,"children":8744},{"id":8743},"_2-sha1-slightly-better-still-weak",[8745],{"type":43,"value":8746},"2. sha1() – Slightly Better, Still Weak",{"type":38,"tag":790,"props":8748,"children":8751},{"className":8749,"code":8750,"language":23,"meta":8},[4293],"$hash = sha1(\"mypassword\");\n",[8752],{"type":38,"tag":559,"props":8753,"children":8754},{"__ignoreMap":8},[8755],{"type":43,"value":8750},{"type":38,"tag":39,"props":8757,"children":8758},{},[8759],{"type":43,"value":8691},{"type":38,"tag":53,"props":8761,"children":8762},{},[8763,8768],{"type":38,"tag":57,"props":8764,"children":8765},{},[8766],{"type":43,"value":8767},"Slightly stronger than md5",{"type":38,"tag":57,"props":8769,"children":8770},{},[8771],{"type":43,"value":8772},"Still fast and simple to use",{"type":38,"tag":39,"props":8774,"children":8775},{},[8776],{"type":43,"value":8709},{"type":38,"tag":53,"props":8778,"children":8779},{},[8780,8785],{"type":38,"tag":57,"props":8781,"children":8782},{},[8783],{"type":43,"value":8784},"Also cryptographically broken",{"type":38,"tag":57,"props":8786,"children":8787},{},[8788],{"type":43,"value":8789},"Not resistant to collisions or brute force",{"type":38,"tag":39,"props":8791,"children":8792},{},[8793,8800],{"type":38,"tag":76,"props":8794,"children":8795},{},[8796],{"type":38,"tag":72,"props":8797,"children":8798},{},[8799],{"type":43,"value":8738},{"type":43,"value":8801}," Like md5, sha1 is outdated for security-critical applications. Still insecure for passwords or tokens.\nAvoid for anything sensitive.",{"type":38,"tag":46,"props":8803,"children":8805},{"id":8804},"_3-hash-flexible-general-purpose-hashing",[8806],{"type":43,"value":8807},"3. hash() – Flexible, General-Purpose Hashing",{"type":38,"tag":790,"props":8809,"children":8812},{"className":8810,"code":8811,"language":23,"meta":8},[4293],"$hash = hash('sha256', \"mypassword\");\n",[8813],{"type":38,"tag":559,"props":8814,"children":8815},{"__ignoreMap":8},[8816],{"type":43,"value":8811},{"type":38,"tag":39,"props":8818,"children":8819},{},[8820],{"type":43,"value":8691},{"type":38,"tag":53,"props":8822,"children":8823},{},[8824,8829,8834],{"type":38,"tag":57,"props":8825,"children":8826},{},[8827],{"type":43,"value":8828},"Supports many modern algorithms",{"type":38,"tag":57,"props":8830,"children":8831},{},[8832],{"type":43,"value":8833},"Better than md5 / sha1 for general-purpose usage",{"type":38,"tag":57,"props":8835,"children":8836},{},[8837],{"type":43,"value":8838},"Great for hashing file contents, non-sensitive values",{"type":38,"tag":39,"props":8840,"children":8841},{},[8842],{"type":43,"value":8709},{"type":38,"tag":53,"props":8844,"children":8845},{},[8846,8851],{"type":38,"tag":57,"props":8847,"children":8848},{},[8849],{"type":43,"value":8850},"No salting or cost factor",{"type":38,"tag":57,"props":8852,"children":8853},{},[8854],{"type":43,"value":8855},"Fast by design — not ideal for password hashing",{"type":38,"tag":39,"props":8857,"children":8858},{},[8859,8866],{"type":38,"tag":76,"props":8860,"children":8861},{},[8862],{"type":38,"tag":72,"props":8863,"children":8864},{},[8865],{"type":43,"value":8738},{"type":43,"value":8867}," Use hash() for general hashing, not for passwords. For example, use hash_hmac() for token signing.",{"type":38,"tag":46,"props":8869,"children":8871},{"id":8870},"_4-password_hash-the-gold-standard-for-passwords",[8872],{"type":43,"value":8873},"4. password_hash() – The Gold Standard for Passwords",{"type":38,"tag":790,"props":8875,"children":8878},{"className":8876,"code":8877,"language":23,"meta":8},[4293],"$hash = password_hash(\"mypassword\", PASSWORD_DEFAULT);\n",[8879],{"type":38,"tag":559,"props":8880,"children":8881},{"__ignoreMap":8},[8882],{"type":43,"value":8877},{"type":38,"tag":39,"props":8884,"children":8885},{},[8886],{"type":43,"value":8691},{"type":38,"tag":53,"props":8888,"children":8889},{},[8890,8895,8900,8905,8910],{"type":38,"tag":57,"props":8891,"children":8892},{},[8893],{"type":43,"value":8894},"Built-in salting automatically",{"type":38,"tag":57,"props":8896,"children":8897},{},[8898],{"type":43,"value":8899},"Supports bcrypt and Argon2",{"type":38,"tag":57,"props":8901,"children":8902},{},[8903],{"type":43,"value":8904},"Adjustable cost factor",{"type":38,"tag":57,"props":8906,"children":8907},{},[8908],{"type":43,"value":8909},"Paired with password_verify() for safe validation",{"type":38,"tag":57,"props":8911,"children":8912},{},[8913],{"type":43,"value":8914},"Resistant to brute-force attacks",{"type":38,"tag":39,"props":8916,"children":8917},{},[8918],{"type":43,"value":8709},{"type":38,"tag":53,"props":8920,"children":8921},{},[8922,8927],{"type":38,"tag":57,"props":8923,"children":8924},{},[8925],{"type":43,"value":8926},"Slightly slower (which is actually a security feature)",{"type":38,"tag":57,"props":8928,"children":8929},{},[8930],{"type":43,"value":8931},"Generates a longer string (60+ characters)",{"type":38,"tag":39,"props":8933,"children":8934},{},[8935,8942],{"type":38,"tag":76,"props":8936,"children":8937},{},[8938],{"type":38,"tag":72,"props":8939,"children":8940},{},[8941],{"type":43,"value":8738},{"type":43,"value":8943}," Always use password_hash() for passwords. Pair it with password_verify() to check the hash.",{"type":38,"tag":46,"props":8945,"children":8947},{"id":8946},"_5-hash_hmac-secure-and-tamper-proof-with-a-secret",[8948],{"type":43,"value":8949},"5. hash_hmac() – Secure and Tamper-Proof with a Secret",{"type":38,"tag":39,"props":8951,"children":8952},{},[8953],{"type":43,"value":8691},{"type":38,"tag":53,"props":8955,"children":8956},{},[8957,8962,8967,8972],{"type":38,"tag":57,"props":8958,"children":8959},{},[8960],{"type":43,"value":8961},"Combines hashing with a secret key",{"type":38,"tag":57,"props":8963,"children":8964},{},[8965],{"type":43,"value":8966},"Resistant to tampering and forgery",{"type":38,"tag":57,"props":8968,"children":8969},{},[8970],{"type":43,"value":8971},"Great for URL tokens, APIs, and integrity checks",{"type":38,"tag":57,"props":8973,"children":8974},{},[8975],{"type":43,"value":8976},"Output is deterministic and consistent",{"type":38,"tag":39,"props":8978,"children":8979},{},[8980],{"type":43,"value":8709},{"type":38,"tag":53,"props":8982,"children":8983},{},[8984,8989],{"type":38,"tag":57,"props":8985,"children":8986},{},[8987],{"type":43,"value":8988},"Requires secure management of the secret key",{"type":38,"tag":57,"props":8990,"children":8991},{},[8992],{"type":43,"value":8993},"Not suitable for password hashing",{"type":38,"tag":39,"props":8995,"children":8996},{},[8997,9004],{"type":38,"tag":76,"props":8998,"children":8999},{},[9000],{"type":38,"tag":72,"props":9001,"children":9002},{},[9003],{"type":43,"value":8738},{"type":43,"value":9005}," Use for secure message authentication and token protection. Strong and reliable when paired with a secret key.",{"type":38,"tag":46,"props":9007,"children":9009},{"id":9008},"summary-table",[9010],{"type":43,"value":9011},"Summary Table",{"type":38,"tag":1387,"props":9013,"children":9014},{},[9015,9056],{"type":38,"tag":5575,"props":9016,"children":9017},{},[9018],{"type":38,"tag":1395,"props":9019,"children":9020},{},[9021,9026,9031,9036,9041,9046,9051],{"type":38,"tag":5582,"props":9022,"children":9023},{},[9024],{"type":43,"value":9025},"Function",{"type":38,"tag":5582,"props":9027,"children":9028},{},[9029],{"type":43,"value":9030},"Secure?",{"type":38,"tag":5582,"props":9032,"children":9033},{},[9034],{"type":43,"value":9035},"Use for Passwords?",{"type":38,"tag":5582,"props":9037,"children":9038},{},[9039],{"type":43,"value":9040},"Salting",{"type":38,"tag":5582,"props":9042,"children":9043},{},[9044],{"type":43,"value":9045},"Adjustable Cost",{"type":38,"tag":5582,"props":9047,"children":9048},{},[9049],{"type":43,"value":9050},"Requires Secret?",{"type":38,"tag":5582,"props":9052,"children":9053},{},[9054],{"type":43,"value":9055},"Recommended Use",{"type":38,"tag":1391,"props":9057,"children":9058},{},[9059,9095,9131,9169,9205],{"type":38,"tag":1395,"props":9060,"children":9061},{},[9062,9070,9074,9078,9082,9086,9090],{"type":38,"tag":1399,"props":9063,"children":9064},{},[9065],{"type":38,"tag":559,"props":9066,"children":9068},{"className":9067},[],[9069],{"type":43,"value":8632},{"type":38,"tag":1399,"props":9071,"children":9072},{},[9073],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9075,"children":9076},{},[9077],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9079,"children":9080},{},[9081],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9083,"children":9084},{},[9085],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9087,"children":9088},{},[9089],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9091,"children":9092},{},[9093],{"type":43,"value":9094},"Checksums, cache keys",{"type":38,"tag":1395,"props":9096,"children":9097},{},[9098,9106,9110,9114,9118,9122,9126],{"type":38,"tag":1399,"props":9099,"children":9100},{},[9101],{"type":38,"tag":559,"props":9102,"children":9104},{"className":9103},[],[9105],{"type":43,"value":8641},{"type":38,"tag":1399,"props":9107,"children":9108},{},[9109],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9111,"children":9112},{},[9113],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9115,"children":9116},{},[9117],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9119,"children":9120},{},[9121],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9123,"children":9124},{},[9125],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9127,"children":9128},{},[9129],{"type":43,"value":9130},"Checksums, legacy support",{"type":38,"tag":1395,"props":9132,"children":9133},{},[9134,9142,9147,9151,9156,9160,9164],{"type":38,"tag":1399,"props":9135,"children":9136},{},[9137],{"type":38,"tag":559,"props":9138,"children":9140},{"className":9139},[],[9141],{"type":43,"value":8650},{"type":38,"tag":1399,"props":9143,"children":9144},{},[9145],{"type":43,"value":9146},"⚠️ Partial",{"type":38,"tag":1399,"props":9148,"children":9149},{},[9150],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9152,"children":9153},{},[9154],{"type":43,"value":9155},"⚠️ (manual)",{"type":38,"tag":1399,"props":9157,"children":9158},{},[9159],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9161,"children":9162},{},[9163],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9165,"children":9166},{},[9167],{"type":43,"value":9168},"File contents, general hashing",{"type":38,"tag":1395,"props":9170,"children":9171},{},[9172,9180,9184,9188,9192,9196,9200],{"type":38,"tag":1399,"props":9173,"children":9174},{},[9175],{"type":38,"tag":559,"props":9176,"children":9178},{"className":9177},[],[9179],{"type":43,"value":8659},{"type":38,"tag":1399,"props":9181,"children":9182},{},[9183],{"type":43,"value":5657},{"type":38,"tag":1399,"props":9185,"children":9186},{},[9187],{"type":43,"value":5657},{"type":38,"tag":1399,"props":9189,"children":9190},{},[9191],{"type":43,"value":5657},{"type":38,"tag":1399,"props":9193,"children":9194},{},[9195],{"type":43,"value":5657},{"type":38,"tag":1399,"props":9197,"children":9198},{},[9199],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9201,"children":9202},{},[9203],{"type":43,"value":9204},"Password storage",{"type":38,"tag":1395,"props":9206,"children":9207},{},[9208,9216,9220,9224,9228,9232,9236],{"type":38,"tag":1399,"props":9209,"children":9210},{},[9211],{"type":38,"tag":559,"props":9212,"children":9214},{"className":9213},[],[9215],{"type":43,"value":8668},{"type":38,"tag":1399,"props":9217,"children":9218},{},[9219],{"type":43,"value":5657},{"type":38,"tag":1399,"props":9221,"children":9222},{},[9223],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9225,"children":9226},{},[9227],{"type":43,"value":5675},{"type":38,"tag":1399,"props":9229,"children":9230},{},[9231],{"type":43,"value":5719},{"type":38,"tag":1399,"props":9233,"children":9234},{},[9235],{"type":43,"value":5657},{"type":38,"tag":1399,"props":9237,"children":9238},{},[9239],{"type":43,"value":9240},"API tokens, signed URLs, HMAC validation",{"type":38,"tag":2705,"props":9242,"children":9243},{},[9244],{"type":38,"tag":39,"props":9245,"children":9246},{},[9247,9249,9254,9255,9260,9262,9267,9269,9274],{"type":43,"value":9248},"⚠️ ",{"type":38,"tag":559,"props":9250,"children":9252},{"className":9251},[],[9253],{"type":43,"value":8650},{"type":43,"value":7230},{"type":38,"tag":559,"props":9256,"children":9258},{"className":9257},[],[9259],{"type":43,"value":8668},{"type":43,"value":9261}," support ",{"type":38,"tag":72,"props":9263,"children":9264},{},[9265],{"type":43,"value":9266},"manual salting",{"type":43,"value":9268}," — you can prepend or append a salt to the input data before hashing. However, unlike ",{"type":38,"tag":559,"props":9270,"children":9272},{"className":9271},[],[9273],{"type":43,"value":8659},{"type":43,"value":9275},", salting is not automatic, so it's your responsibility to manage it securely.",{"type":38,"tag":46,"props":9277,"children":9278},{"id":6787},[9279],{"type":43,"value":7549},{"type":38,"tag":39,"props":9281,"children":9282},{},[9283],{"type":43,"value":9284},"Choose your hashing function based on your use case:",{"type":38,"tag":53,"props":9286,"children":9287},{},[9288,9293,9298,9303],{"type":38,"tag":57,"props":9289,"children":9290},{},[9291],{"type":43,"value":9292},"✅ Use password_hash() for storing user passwords.",{"type":38,"tag":57,"props":9294,"children":9295},{},[9296],{"type":43,"value":9297},"✅ Use hash_hmac() for token generation, secure redirection, and API signatures — as long as your secret key is safe.",{"type":38,"tag":57,"props":9299,"children":9300},{},[9301],{"type":43,"value":9302},"⚠️ Use hash() for general hashing of content or filenames.",{"type":38,"tag":57,"props":9304,"children":9305},{},[9306],{"type":43,"value":9307},"🚫 Avoid md5() and sha1() in any security-sensitive context.",{"type":38,"tag":39,"props":9309,"children":9310},{},[9311],{"type":43,"value":9312},"Hashing is powerful — but only when used appropriately.",{"title":8,"searchDepth":685,"depth":685,"links":9314},[9315,9316,9317,9318,9319,9320,9321,9322,9323],{"id":8583,"depth":685,"text":8586},{"id":8607,"depth":685,"text":8610},{"id":8674,"depth":685,"text":8677},{"id":8743,"depth":685,"text":8746},{"id":8804,"depth":685,"text":8807},{"id":8870,"depth":685,"text":8873},{"id":8946,"depth":685,"text":8949},{"id":9008,"depth":685,"text":9011},{"id":6787,"depth":685,"text":7549},"content:blog-posts:php-hashing-functions.md","blog-posts/php-hashing-functions.md","blog-posts/php-hashing-functions",{"_path":9328,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9329,"description":9330,"seoTitle":9331,"seoDescription":9332,"keywords":9333,"image":9338,"alt":1268,"ogImage":9338,"tags":9339,"categories":9342,"published":25,"author":26,"link":9328,"date":9343,"sitemap":9344,"body":9348,"_type":693,"_id":9507,"_source":695,"_file":9508,"_stem":9509,"_extension":698},"/blog-posts/pinia-the-new-vue-state-management-tool","Pinia - The new Vue state management tool","Learn about Pinia, the newest official state management tool for Vue.js, and explore how it simplifies managing application state.","Pinia: Vue's New State Management Tool","Discover how Pinia introduces a simpler and more powerful way to manage state in your Vue.js applications.",[9334,9335,9336,9337],"Pinia Vue.js","state management Vue","Vue Pinia tutorial","Pinia vs Vuex","/images/blog-posts/vue_and_pinia.webp",[713,9340,9341],"state-managing","pinia",[713,9340,9341],"2022-05-10",{"loc":9345,"lastmod":9343,"changefreq":30,"priority":31,"images":9346},"/blog-posts/pinia-the-new-vue-state-management-tool/",[9347],{"loc":9338},{"type":35,"children":9349,"toc":9499},[9350,9356,9367,9379,9385,9390,9395,9401,9406,9412,9417,9422,9435,9440,9458,9471,9477,9483,9487],{"type":38,"tag":46,"props":9351,"children":9353},{"id":9352},"pinia-the-new-vue-state-manager",[9354],{"type":43,"value":9355},"PINIA the new Vue State Manager",{"type":38,"tag":39,"props":9357,"children":9358},{},[9359,9365],{"type":38,"tag":61,"props":9360,"children":9363},{"href":9361,":target":1094,"rel":9362},"https://pinia.vuejs.org/",[65],[9364],{"type":43,"value":4765},{"type":43,"value":9366}," is a new state management tool for VueJS. It is also recommended by the Vue team officially. Eduardo San Martin Morote implemented it, who is also a Vue core developer. The features of the Vue router tie to him. ",{"type":38,"tag":39,"props":9368,"children":9369},{},[9370,9372,9378],{"type":43,"value":9371},"Pinia uses the new VUE3 reactivity system, and this State Management System was born to test the proposals for the following iterations of Vuex. That means the new Vuex 5 will share many similarities with PINIA. By the way, Vuex is another State Management System. You can ",{"type":38,"tag":61,"props":9373,"children":9375},{"href":9374},"/blog-posts/push-the-capabilities-of-vuejs-further-with-vuex/",[9376],{"type":43,"value":9377},"read more about Vuex here",{"type":43,"value":1063},{"type":38,"tag":46,"props":9380,"children":9382},{"id":9381},"state-management-systems-in-general",[9383],{"type":43,"value":9384},"State Management Systems in general",{"type":38,"tag":39,"props":9386,"children":9387},{},[9388],{"type":43,"value":9389},"State Management Tools help developers to share components data in a much simpler way. We can remove many Vue-related data emitters and props to pass up and down data in the components tree. So we can reduce the complexity of the component's communication. Due to this, we will have a much cleaner and more readable code.",{"type":38,"tag":39,"props":9391,"children":9392},{},[9393],{"type":43,"value":9394},"State Management Systems introduces a single global state into the application that is sharable between the components. We can mutate this state which means we can make CRUD operations on them. ",{"type":38,"tag":46,"props":9396,"children":9398},{"id":9397},"why-pinia",[9399],{"type":43,"value":9400},"Why PINIA?",{"type":38,"tag":39,"props":9402,"children":9403},{},[9404],{"type":43,"value":9405},"One of the most crucial factors why PINIA is worth trying is the speed. It is fast, and in some cases, it performs better than the Vuex state manager because its size is small. It is around 1KB. It is extendible and supports transactions and local storage synchronization. It is modular, so you have the option for code splitting and creating multiple stores. You can group state changes. It has a Devtool integration due to this you will get an enhanced development experience. It is intuitive and it has a Type-Safe autocompletion feature.",{"type":38,"tag":46,"props":9407,"children":9409},{"id":9408},"installation-of-pinia-with-vue",[9410],{"type":43,"value":9411},"Installation of PINIA with Vue",{"type":38,"tag":39,"props":9413,"children":9414},{},[9415],{"type":43,"value":9416},"The installation process differs when you try to install it at the beginning of the project or into an existing project that does not have the PINIA feature.",{"type":38,"tag":39,"props":9418,"children":9419},{},[9420],{"type":43,"value":9421},"1, You can install it at the beginning of the project when you scaffold the project.",{"type":38,"tag":53,"props":9423,"children":9424},{},[9425,9430],{"type":38,"tag":57,"props":9426,"children":9427},{},[9428],{"type":43,"value":9429},"npm init vue@3",{"type":38,"tag":57,"props":9431,"children":9432},{},[9433],{"type":43,"value":9434},"After the command, you can select PINIA from the options",{"type":38,"tag":39,"props":9436,"children":9437},{},[9438],{"type":43,"value":9439},"2, You can install it as a package with the ",{"type":38,"tag":53,"props":9441,"children":9442},{},[9443,9448,9453],{"type":38,"tag":57,"props":9444,"children":9445},{},[9446],{"type":43,"value":9447},"yarn add pinia",{"type":38,"tag":57,"props":9449,"children":9450},{},[9451],{"type":43,"value":9452},"# or with npm",{"type":38,"tag":57,"props":9454,"children":9455},{},[9456],{"type":43,"value":9457},"npm install pinia",{"type":38,"tag":2705,"props":9459,"children":9460},{},[9461,9466],{"type":38,"tag":39,"props":9462,"children":9463},{},[9464],{"type":43,"value":9465},"Pinia tries to stay as close to Vuex’s philosophy as possible. It was designed to test out a proposal for the next iteration of Vuex and it was a success as we currently have an open RFC for Vuex 5 with an API very similar to the one used by Pinia. My personal intention with this project is to redesign the experience of using a global Store while keeping the approachable philosophy of Vue. I keep the API of Pinia as close as Vuex as it keeps moving forward to make it easy for people to migrate to Vuex or to even fusion both projects (under Vuex) in the future.",{"type":38,"tag":39,"props":9467,"children":9468},{},[9469],{"type":43,"value":9470},"Eduardo San Martin Morote the authors of PINIA",{"type":38,"tag":46,"props":9472,"children":9474},{"id":9473},"my-mindmap-about-the-topic",[9475],{"type":43,"value":9476},"My mindmap about the topic",{"type":38,"tag":3048,"props":9478,"children":9480},{"width":3050,"height":3051,"frameBorder":3052,"src":9479,"scrolling":3054,"style":3055},"https://www.mindmeister.com/maps/public_map_shell/2277869914/pinia?width=600&height=400&z=auto&t=9jpr2jTAvc&no_logo=1",[9481],{"type":43,"value":9482},"Your browser is not able to display frames. Please visit \u003Ca href=\"https://www.mindmeister.com/2277869914/pinia?t=9jpr2jTAvc\" target=\"_blank\" rel=\"noopener\">PINIA\u003C/a> on MindMeister.",{"type":38,"tag":46,"props":9484,"children":9485},{"id":675},[9486],{"type":43,"value":678},{"type":38,"tag":39,"props":9488,"children":9489},{},[9490,9492,9498],{"type":43,"value":9491},"PINIA is a new State Management tool for VueJS. It is recommended by the Vue team officially. It is for small and medium-sized projects, while Vuex is for the big ones. If further details are needed you can check a comparison ",{"type":38,"tag":61,"props":9493,"children":9496},{"href":9494,":target":1094,"rel":9495},"https://blog.logrocket.com/pinia-vs-vuex/",[65],[9497],{"type":43,"value":1061},{"type":43,"value":1063},{"title":8,"searchDepth":685,"depth":685,"links":9500},[9501,9502,9503,9504,9505,9506],{"id":9352,"depth":685,"text":9355},{"id":9381,"depth":685,"text":9384},{"id":9397,"depth":685,"text":9400},{"id":9408,"depth":685,"text":9411},{"id":9473,"depth":685,"text":9476},{"id":675,"depth":685,"text":678},"content:blog-posts:pinia-the-new-vue-state-management-tool.md","blog-posts/pinia-the-new-vue-state-management-tool.md","blog-posts/pinia-the-new-vue-state-management-tool",{"_path":7691,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9511,"description":9512,"seoTitle":9513,"seoDescription":9514,"keywords":9515,"image":4468,"alt":8,"ogImage":8,"tags":9519,"categories":9520,"published":25,"author":26,"link":7691,"date":9521,"sitemap":9522,"body":9530,"_type":693,"_id":9721,"_source":695,"_file":9722,"_stem":9723,"_extension":698},"Provide data between InertiaJS and Laravel","Learn how to transfer and share data between InertiaJS and Laravel to create seamless and dynamic applications.","Data Sharing Between InertiaJS and Laravel","Explore techniques to share and manage data between InertiaJS and Laravel for better integration and performance.",[9516,9517,9518],"InertiaJS Laravel data sharing","pass data InertiaJS Laravel","dynamic apps InertiaJS Laravel",[4470,4174,4471,714],[21,23,4473,4474],"2022-01-13",{"loc":9523,"lastmod":9521,"changefreq":30,"priority":31,"images":9524},"/blog-posts/provide-data-between-inertiajs-and-laravel/",[9525,9526,9528],{"loc":4468},{"loc":9527},"/images/blog-posts/inertia-render.png.webp",{"loc":9529},"/images/blog-posts/vue-devtools-output.png.webp",{"type":35,"children":9531,"toc":9715},[9532,9538,9543,9551,9566,9594,9608,9614,9619,9627,9632,9646,9652,9657,9675,9680],{"type":38,"tag":46,"props":9533,"children":9535},{"id":9534},"what-does-laravel-return-for-inertiajs-in-the-methods",[9536],{"type":43,"value":9537},"What does Laravel return for InertiaJS in the methods?",{"type":38,"tag":39,"props":9539,"children":9540},{},[9541],{"type":43,"value":9542},"In a method of a Laravel Controller where we would return the blade view template we ask InertiaJS to render a\nclient-side view as a response:",{"type":38,"tag":790,"props":9544,"children":9546},{"code":9545},"        return Inertia::render('Organizations/Index', [\n            'filters' => Request::all('search', 'trashed'),\n            'organizations' => Auth::user()->account->organizations()\n                ->orderBy('name')\n                ->filter(Request::only('search', 'trashed'))\n                ->paginate(10)\n                ->withQueryString()\n                ->through(fn ($organization) => [\n                    'id' => $organization->id,\n                    'name' => $organization->name,\n                    'phone' => $organization->phone,\n                    'city' => $organization->city,\n                    'deleted_at' => $organization->deleted_at,\n                ]),\n        ]);\n",[9547],{"type":38,"tag":559,"props":9548,"children":9549},{"__ignoreMap":8},[9550],{"type":43,"value":9545},{"type":38,"tag":39,"props":9552,"children":9553},{},[9554,9556,9564],{"type":43,"value":9555},"The second parameter of ",{"type":38,"tag":72,"props":9557,"children":9558},{},[9559],{"type":38,"tag":76,"props":9560,"children":9561},{},[9562],{"type":43,"value":9563},"Inertia:render",{"type":43,"value":9565}," is an array that passes the data as props to the Front-End:",{"type":38,"tag":2705,"props":9567,"children":9568},{},[9569,9577,9589],{"type":38,"tag":39,"props":9570,"children":9571},{},[9572],{"type":38,"tag":72,"props":9573,"children":9574},{},[9575],{"type":43,"value":9576},"Anyway, what are props?",{"type":38,"tag":39,"props":9578,"children":9579},{},[9580,9582,9587],{"type":43,"value":9581},"In Vue, props (or properties), are ",{"type":38,"tag":72,"props":9583,"children":9584},{},[9585],{"type":43,"value":9586},"the way that we pass data from a parent component down to it's child components",{"type":43,"value":9588},".\nWhen we build our applications out of components, we end up building a data structure called a tree.",{"type":38,"tag":39,"props":9590,"children":9591},{},[9592],{"type":43,"value":9593},"By Google",{"type":38,"tag":2148,"props":9595,"children":9596},{"style":2150},[9597,9598,9602,9603],{"type":43,"value":2153},{"type":38,"tag":1885,"props":9599,"children":9601},{"style":2156,"src":9527,"alt":9600},"Data params go to the Front-End as Vue props.",[],{"type":43,"value":2153},{"type":38,"tag":39,"props":9604,"children":9606},{"className":9605},[4663],[9607],{"type":43,"value":9600},{"type":38,"tag":46,"props":9609,"children":9611},{"id":9610},"do-we-define-a-regular-web-route-in-laravel",[9612],{"type":43,"value":9613},"Do we define a regular web route in Laravel?",{"type":38,"tag":39,"props":9615,"children":9616},{},[9617],{"type":43,"value":9618},"Yes! We need to declare a regular route in the web.php file of the Laravel Framework to provide data to InertiaJS and have\nsome kind of routing. InertiaJS is an adapter and we use Laravel with VueJS. What is useful in this is the fact that we\ncan write Vue code on the Front-End without needing to think about Vue routing because Laravel handles that for us.",{"type":38,"tag":790,"props":9620,"children":9622},{"code":9621},"Route::get('organizations', [OrganizationsController::class, 'index'])\n    ->name('organizations')\n    ->middleware('auth');\n",[9623],{"type":38,"tag":559,"props":9624,"children":9625},{"__ignoreMap":8},[9626],{"type":43,"value":9621},{"type":38,"tag":39,"props":9628,"children":9629},{},[9630],{"type":43,"value":9631},"Because of the Inertia JS rendering, we get a structured JSON response without defining a REST API endpoint in the Laravel\nAPI routing file. Due to this approach, we load data through an AJAX call that provides much faster page loads. For example,\nthe main component gets these default data on the first rendering:",{"type":38,"tag":2148,"props":9633,"children":9634},{"style":2150},[9635,9636,9640,9641],{"type":43,"value":2153},{"type":38,"tag":1885,"props":9637,"children":9639},{"style":2156,"src":9529,"alt":9638},"Vue DevTools output",[],{"type":43,"value":2153},{"type":38,"tag":39,"props":9642,"children":9644},{"className":9643},[4663],[9645],{"type":43,"value":9638},{"type":38,"tag":46,"props":9647,"children":9649},{"id":9648},"what-is-vue-devtools",[9650],{"type":43,"value":9651},"What is Vue Devtools?",{"type":38,"tag":39,"props":9653,"children":9654},{},[9655],{"type":43,"value":9656},"VueJS Devtools is a debugger for Vue applications. The previous screenshot shows it in work. It is quite a useful tool\nand this is what google says about it as an 'official' definition:",{"type":38,"tag":2705,"props":9658,"children":9659},{},[9660,9671],{"type":38,"tag":39,"props":9661,"children":9662},{},[9663,9665,9670],{"type":43,"value":9664},"Devtools is ",{"type":38,"tag":72,"props":9666,"children":9667},{},[9668],{"type":43,"value":9669},"a set of utility tools that help a developer in developing and debugginf applications",{"type":43,"value":1063},{"type":38,"tag":39,"props":9672,"children":9673},{},[9674],{"type":43,"value":9593},{"type":38,"tag":46,"props":9676,"children":9677},{"id":675},[9678],{"type":43,"value":9679},"Conclusion & closing",{"type":38,"tag":39,"props":9681,"children":9682},{},[9683,9685,9691,9693,9698,9700,9706,9708,9713],{"type":43,"value":9684},"Previously I wrote about the ",{"type":38,"tag":61,"props":9686,"children":9688},{"href":9687},"/blog-posts/what-do-i-need-to-know-about-inertiajs",[9689],{"type":43,"value":9690},"installation",{"type":43,"value":9692}," and integration of InertiaJS.\n",{"type":38,"tag":61,"props":9694,"children":9695},{"href":7691},[9696],{"type":43,"value":9697},"In this post",{"type":43,"value":9699},", I went through the data rendering from Laravel to ",{"type":38,"tag":61,"props":9701,"children":9703},{"href":3947,"rel":9702},[65],[9704],{"type":43,"value":9705},"Vue.js",{"type":43,"value":9707},"\nusing the help of InertiaJS](",{"type":38,"tag":61,"props":9709,"children":9711},{"href":7715,"rel":9710},[65],[9712],{"type":43,"value":7715},{"type":43,"value":9714},").",{"title":8,"searchDepth":685,"depth":685,"links":9716},[9717,9718,9719,9720],{"id":9534,"depth":685,"text":9537},{"id":9610,"depth":685,"text":9613},{"id":9648,"depth":685,"text":9651},{"id":675,"depth":685,"text":9679},"content:blog-posts:provide-data-between-inertiajs-and-laravel.md","blog-posts/provide-data-between-inertiajs-and-laravel.md","blog-posts/provide-data-between-inertiajs-and-laravel",{"_path":9725,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9726,"description":9727,"seoTitle":9728,"seoDescription":9729,"keywords":9730,"image":9735,"alt":1268,"ogImage":9735,"tags":9736,"categories":9738,"published":25,"author":26,"link":9725,"date":9739,"sitemap":9740,"body":9743,"_type":693,"_id":9886,"_source":695,"_file":9887,"_stem":9888,"_extension":698},"/blog-posts/push-the-capabilities-of-vuejs-further-with-vuex","Push the capabilities of VueJS further with Vuex","Learn how Vuex enhances the capabilities of Vue.js by adding centralized state management features for advanced applications.","Vuex: Enhancing VueJS Capabilities","Discover how Vuex enables centralized state management in Vue.js, making advanced application development more efficient.",[9731,9732,9733,9734],"Vuex state management","centralized state Vue.js","Vue advanced features","Vuex tutorial","/images/blog-posts/vuex.png.webp",[713,9340,9737],"vuex",[713,9340,9737],"2022-03-06",{"loc":9374,"lastmod":9739,"changefreq":30,"priority":31,"images":9741},[9742],{"loc":9735},{"type":35,"children":9744,"toc":9879},[9745,9751,9765,9770,9775,9780,9786,9796,9827,9840,9846,9851,9857,9863,9867],{"type":38,"tag":46,"props":9746,"children":9748},{"id":9747},"use-vuex-when-you-face-the-limit-and-the-restrictions-of-vuejs",[9749],{"type":43,"value":9750},"Use Vuex when you face the limit and the restrictions of VueJS.",{"type":38,"tag":39,"props":9752,"children":9753},{},[9754,9756,9763],{"type":43,"value":9755},"Currently, the project that I have been working on uses the VueJS (InertiaJS) Framework on the Front-End side (now already ",{"type":38,"tag":61,"props":9757,"children":9760},{"href":9758,"rel":9759},"https://vuex.vuejs.org/",[65],[9761],{"type":43,"value":9762},"Vuex",{"type":43,"value":9764}," too), and it relies on the Laravel 8 Framework on the Back-End. The final project will be an enormous one with many different microservices communication. However, what is interesting is that I have reached the limit of VueJS's parent-child communication after two or three weeks.",{"type":38,"tag":39,"props":9766,"children":9767},{},[9768],{"type":43,"value":9769},"In the project, I have tried to follow SOC as much as possible to have a flexible Front-End architecture with reusable components. But SOC has a drawback in the component tree point of view. Passing data through four-five levels of Vue components can cause a performance issue mainly in the long run. Furthermore, in the case of this project, the need for sharing specific objects and properties among all the components had become an early requirement.",{"type":38,"tag":39,"props":9771,"children":9772},{},[9773],{"type":43,"value":9774},"I had to find a fast solution. The project owners need to see that the dev team is making progress.",{"type":38,"tag":39,"props":9776,"children":9777},{},[9778],{"type":43,"value":9779},"So I started reading about what other communication options we have in VueJS. Most of the articles preferred Vuex as one of the cleanest approaches, so I have started reading and playing with it in detail. Please check my mindmap about this topic below if you want to know more about Vuex.",{"type":38,"tag":46,"props":9781,"children":9783},{"id":9782},"anyway-what-is-vuex-exactly",[9784],{"type":43,"value":9785},"Anyway, what is Vuex exactly?",{"type":38,"tag":39,"props":9787,"children":9788},{},[9789,9791,9794],{"type":43,"value":9790},"Vuex is similar to a global object where we can store data independently from the components. But this Vuex object is reactive, and we can not directly mutate the store's state while we can access these data from any Vue components. (Store is the center container of Vuex.)",{"type":38,"tag":1303,"props":9792,"children":9793},{},[],{"type":43,"value":9795},"\nSo we can distract the components' data from a Component into a shared state/data manager where all our Vue Component can access it or update it in a specific way. It is like global object storage on steroids.",{"type":38,"tag":39,"props":9797,"children":9798},{},[9799,9801,9808,9810,9817,9819,9826],{"type":43,"value":9800},"Anyway, Vuex is inspired by ",{"type":38,"tag":61,"props":9802,"children":9805},{"href":9803,"rel":9804},"https://facebook.github.io/flux/docs/overview",[65],[9806],{"type":43,"value":9807},"Flux",{"type":43,"value":9809},", ",{"type":38,"tag":61,"props":9811,"children":9814},{"href":9812,"rel":9813},"http://redux.js.org/",[65],[9815],{"type":43,"value":9816},"Redux",{"type":43,"value":9818},", and ",{"type":38,"tag":61,"props":9820,"children":9823},{"href":9821,"rel":9822},"https://guide.elm-lang.org/architecture/",[65],[9824],{"type":43,"value":9825},"The Elm Architecture",{"type":43,"value":1063},{"type":38,"tag":2705,"props":9828,"children":9829},{},[9830,9835],{"type":38,"tag":39,"props":9831,"children":9832},{},[9833],{"type":43,"value":9834},"Flux libraries are like glasses: you’ll know when you need them.",{"type":38,"tag":39,"props":9836,"children":9837},{},[9838],{"type":43,"value":9839},"Dan Abramov, the author of Redux.",{"type":38,"tag":46,"props":9841,"children":9843},{"id":9842},"when-we-should-use-vuex",[9844],{"type":43,"value":9845},"When we should use Vuex?",{"type":38,"tag":39,"props":9847,"children":9848},{},[9849],{"type":43,"value":9850},"Ideally, Vuex is for medium and big projects when you need to separate the data from the components.",{"type":38,"tag":46,"props":9852,"children":9854},{"id":9853},"what-are-the-main-features-of-vuex",[9855],{"type":43,"value":9856},"What are the main features of Vuex ?",{"type":38,"tag":3048,"props":9858,"children":9860},{"width":3050,"height":3051,"frameBorder":3052,"src":9859,"scrolling":3054,"style":3055},"https://www.mindmeister.com/maps/public_map_shell/2186845719/vuex?width=600&height=400&z=auto&no_share=1&no_logo=1&presentation=1",[9861],{"type":43,"value":9862},"Your browser is not able to display frames. Please visit \u003Ca href=\"https://www.mindmeister.com/2186845719/vuex\" target=\"_blank\" rel=\"noopener\">VUEX\u003C/a> on MindMeister.",{"type":38,"tag":46,"props":9864,"children":9865},{"id":675},[9866],{"type":43,"value":678},{"type":38,"tag":39,"props":9868,"children":9869},{},[9870,9872,9878],{"type":43,"value":9871},"In this post, I have tried to cover in a mindmap what features Vuex has and when we can use this State Management Pattern in our Vue code. Anyway, you can check the doc about ",{"type":38,"tag":61,"props":9873,"children":9875},{"href":9758,"rel":9874},[65],[9876],{"type":43,"value":9877},"Vuex here",{"type":43,"value":1063},{"title":8,"searchDepth":685,"depth":685,"links":9880},[9881,9882,9883,9884,9885],{"id":9747,"depth":685,"text":9750},{"id":9782,"depth":685,"text":9785},{"id":9842,"depth":685,"text":9845},{"id":9853,"depth":685,"text":9856},{"id":675,"depth":685,"text":678},"content:blog-posts:push-the-capabilities-of-vuejs-further-with-vuex.md","blog-posts/push-the-capabilities-of-vuejs-further-with-vuex.md","blog-posts/push-the-capabilities-of-vuejs-further-with-vuex",{"_path":9890,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9891,"description":9892,"seoTitle":9893,"seoDescription":9894,"keywords":9895,"image":9898,"alt":9899,"ogImage":9898,"tags":9900,"categories":9901,"published":25,"author":26,"link":9890,"date":9902,"sitemap":9903,"body":9907,"_type":693,"_id":10733,"_source":695,"_file":10734,"_stem":10735,"_extension":698},"/blog-posts/ref-vs-shallowref","Vue 3: Understanding the Difference Between `ref` and `shallowRef`","Learn when to use `ref` vs `shallowRef` in Vue 3 and how their reactivity and performance impact your application.","Vue 3: ref vs shallowRef – Differences and Performance Implications","Explore the similarities, differences, and real-world performance use cases between Vue 3's ref and shallowRef for efficient reactivity handling.",[4755,5042,9896,7902,6386,9897],"shallowRef","composition API","/images/blog-posts/vue-ref-vs-shallowref.png.webp","Vue 3 ref vs shallowRef illustration",[4755,4756],[3747],"2025-07-06",{"loc":9904,"lastmod":9902,"changefreq":30,"priority":31,"images":9905},"/blog-posts/ref-vs-shallowref/",[9906],{"loc":9898},{"type":35,"children":9908,"toc":10713},[9909,9929,9949,9952,9958,9975,10019,10024,10033,10039,10045,10063,10072,10078,10098,10107,10112,10127,10159,10168,10174,10179,10185,10190,10199,10204,10213,10218,10224,10237,10246,10251,10257,10262,10271,10276,10282,10421,10438,10456,10462,10552,10558,10618,10622,10634,10652,10664,10673,10679,10705],{"type":38,"tag":4183,"props":9910,"children":9912},{"id":9911},"vue-3-ref-vs-shallowref-whats-the-difference",[9913,9915,9920,9922,9927],{"type":43,"value":9914},"Vue 3: ",{"type":38,"tag":559,"props":9916,"children":9918},{"className":9917},[],[9919],{"type":43,"value":5042},{"type":43,"value":9921}," vs ",{"type":38,"tag":559,"props":9923,"children":9925},{"className":9924},[],[9926],{"type":43,"value":9896},{"type":43,"value":9928}," – What’s the Difference?",{"type":38,"tag":39,"props":9930,"children":9931},{},[9932,9934,9939,9941,9947],{"type":43,"value":9933},"When we implement an application—or even just a feature—we need to consider the performance implications of our reactive\nstate management choices. In Vue 3’s Composition API, we often reach for ",{"type":38,"tag":559,"props":9935,"children":9937},{"className":9936},[],[9938],{"type":43,"value":2901},{"type":43,"value":9940}," to create reactive variables. However,\nVue also provides ",{"type":38,"tag":559,"props":9942,"children":9944},{"className":9943},[],[9945],{"type":43,"value":9946},"shallowRef()",{"type":43,"value":9948},", which appears similar at first glance but behaves quite differently under the hood,\nespecially in terms of reactivity and performance. In this article, we’ll explore the differences between the two,\nbenchmark them with large data sets, and identify when each is most appropriate.",{"type":38,"tag":1221,"props":9950,"children":9951},{},[],{"type":38,"tag":46,"props":9953,"children":9955},{"id":9954},"what-they-have-in-common",[9956],{"type":43,"value":9957},"✅ What They Have in Common",{"type":38,"tag":39,"props":9959,"children":9960},{},[9961,9963,9968,9969,9974],{"type":43,"value":9962},"Both ",{"type":38,"tag":559,"props":9964,"children":9966},{"className":9965},[],[9967],{"type":43,"value":5042},{"type":43,"value":7230},{"type":38,"tag":559,"props":9970,"children":9972},{"className":9971},[],[9973],{"type":43,"value":9896},{"type":43,"value":2573},{"type":38,"tag":53,"props":9976,"children":9977},{},[9978,9983,9988,10001],{"type":38,"tag":57,"props":9979,"children":9980},{},[9981],{"type":43,"value":9982},"Are part of Vue’s Composition API",{"type":38,"tag":57,"props":9984,"children":9985},{},[9986],{"type":43,"value":9987},"Wrap any value (primitive or object) and make it reactive",{"type":38,"tag":57,"props":9989,"children":9990},{},[9991,9993,9999],{"type":43,"value":9992},"Return an object with a ",{"type":38,"tag":559,"props":9994,"children":9996},{"className":9995},[],[9997],{"type":43,"value":9998},".value",{"type":43,"value":10000}," property",{"type":38,"tag":57,"props":10002,"children":10003},{},[10004,10006,10012,10013],{"type":43,"value":10005},"Can be used in templates and watched with ",{"type":38,"tag":559,"props":10007,"children":10009},{"className":10008},[],[10010],{"type":43,"value":10011},"watch()",{"type":43,"value":6311},{"type":38,"tag":559,"props":10014,"children":10016},{"className":10015},[],[10017],{"type":43,"value":10018},"watchEffect()",{"type":38,"tag":39,"props":10020,"children":10021},{},[10022],{"type":43,"value":10023},"Example:",{"type":38,"tag":790,"props":10025,"children":10028},{"className":10026,"code":10027,"language":4972,"meta":8},[4970],"const count = ref(0)\nconst shallowCount = shallowRef(0)\n\nconsole.log(count.value)        // 0\nconsole.log(shallowCount.value) // 0\n",[10029],{"type":38,"tag":559,"props":10030,"children":10031},{"__ignoreMap":8},[10032],{"type":43,"value":10027},{"type":38,"tag":46,"props":10034,"children":10036},{"id":10035},"where-they-differ-deep-vs-shallow-reactivity",[10037],{"type":43,"value":10038},"🔍 Where They Differ – Deep vs Shallow Reactivity",{"type":38,"tag":4283,"props":10040,"children":10042},{"id":10041},"deep-ref",[10043],{"type":43,"value":10044},"(Deep) ref()",{"type":38,"tag":53,"props":10046,"children":10047},{},[10048,10053,10058],{"type":38,"tag":57,"props":10049,"children":10050},{},[10051],{"type":43,"value":10052},"The ref() helper provides Deep Reactivity.",{"type":38,"tag":57,"props":10054,"children":10055},{},[10056],{"type":43,"value":10057},"It recursively makes all nested properties reactive.",{"type":38,"tag":57,"props":10059,"children":10060},{},[10061],{"type":43,"value":10062},"It is useful when you need fine-grained reactivity inside objects or arrays.",{"type":38,"tag":790,"props":10064,"children":10067},{"className":10065,"code":10066,"language":4972,"meta":8},[4970],"const user = ref({\n  name: 'Adam Biro',\n  preferences: {\n    theme: 'dark'\n  }\n})\n\nuser.value.preferences.theme = 'light' // ✅ reactive update\n",[10068],{"type":38,"tag":559,"props":10069,"children":10070},{"__ignoreMap":8},[10071],{"type":43,"value":10066},{"type":38,"tag":4283,"props":10073,"children":10075},{"id":10074},"shallowref-shallow-reactivity",[10076],{"type":43,"value":10077},"shallowRef() – Shallow Reactivity",{"type":38,"tag":53,"props":10079,"children":10080},{},[10081,10093],{"type":38,"tag":57,"props":10082,"children":10083},{},[10084,10086,10091],{"type":43,"value":10085},"The shallowRef() helper only makes the top-level  ",{"type":38,"tag":559,"props":10087,"children":10089},{"className":10088},[],[10090],{"type":43,"value":9998},{"type":43,"value":10092}," reactive.",{"type":38,"tag":57,"props":10094,"children":10095},{},[10096],{"type":43,"value":10097},"Nested properties are not made reactive, and their changes won’t trigger DOM updates or watchers.",{"type":38,"tag":790,"props":10099,"children":10102},{"className":10100,"code":10101,"language":4972,"meta":8},[4970],"const user = shallowRef({\n  name: 'Adam',\n  preferences: {\n    theme: 'dark'\n  }\n})\n\nuser.value.preferences.theme = 'light' // ❌ no reactivity triggered\nuser.value = { ...user.value }         // ✅ reactivity triggered (new object)\n",[10103],{"type":38,"tag":559,"props":10104,"children":10105},{"__ignoreMap":8},[10106],{"type":43,"value":10101},{"type":38,"tag":39,"props":10108,"children":10109},{},[10110],{"type":43,"value":10111},"This behavior above is intentional—and useful when you don’t want Vue to deeply track large or third-party objects.",{"type":38,"tag":39,"props":10113,"children":10114},{},[10115],{"type":38,"tag":72,"props":10116,"children":10117},{},[10118,10120,10125],{"type":43,"value":10119},"To clarify what top-level ",{"type":38,"tag":559,"props":10121,"children":10123},{"className":10122},[],[10124],{"type":43,"value":9998},{"type":43,"value":10126}," means:",{"type":38,"tag":53,"props":10128,"children":10129},{},[10130,10141],{"type":38,"tag":57,"props":10131,"children":10132},{},[10133,10135,10140],{"type":43,"value":10134},"The entire object ({ person: {...}, preferences: {...} }) is the top-level ",{"type":38,"tag":559,"props":10136,"children":10138},{"className":10137},[],[10139],{"type":43,"value":9998},{"type":43,"value":1063},{"type":38,"tag":57,"props":10142,"children":10143},{},[10144,10146],{"type":43,"value":10145},"shallowRef() makes this outer object reactive, but:\n",{"type":38,"tag":53,"props":10147,"children":10148},{},[10149,10154],{"type":38,"tag":57,"props":10150,"children":10151},{},[10152],{"type":43,"value":10153},"it does not touch or proxy the nested person or preferences objects",{"type":38,"tag":57,"props":10155,"children":10156},{},[10157],{"type":43,"value":10158},"Vue won’t track internal changes like .person.name or .preferences.theme",{"type":38,"tag":790,"props":10160,"children":10163},{"className":10161,"code":10162,"language":4972,"meta":8},[4970],"const user = shallowRef({\n    person: { name: 'Adam' },\n    preference: { theme: 'dark' }\n})\n",[10164],{"type":38,"tag":559,"props":10165,"children":10166},{"__ignoreMap":8},[10167],{"type":43,"value":10162},{"type":38,"tag":46,"props":10169,"children":10171},{"id":10170},"performance-implications",[10172],{"type":43,"value":10173},"🚀 Performance Implications",{"type":38,"tag":39,"props":10175,"children":10176},{},[10177],{"type":43,"value":10178},"In real-world projects, performance differences can be significant depending on your use case.",{"type":38,"tag":4283,"props":10180,"children":10182},{"id":10181},"_1-faster-initialization",[10183],{"type":43,"value":10184},"1. Faster Initialization",{"type":38,"tag":39,"props":10186,"children":10187},{},[10188],{"type":43,"value":10189},"Using ref() on a deeply nested structure or large array causes Vue to walk the object recursively and create proxies for every nested item.",{"type":38,"tag":790,"props":10191,"children":10194},{"className":10192,"code":10193,"language":4972,"meta":8},[4970],"const big = ref({\n  items: new Array(10000).fill({ active: true })\n});\n",[10195],{"type":38,"tag":559,"props":10196,"children":10197},{"__ignoreMap":8},[10198],{"type":43,"value":10193},{"type":38,"tag":39,"props":10200,"children":10201},{},[10202],{"type":43,"value":10203},"With shallowRef(), Vue only wraps the top-level object:",{"type":38,"tag":790,"props":10205,"children":10208},{"className":10206,"code":10207,"language":4972,"meta":8},[4970],"const big = shallowRef({\n  items: new Array(10000).fill({ active: true })\n});\n",[10209],{"type":38,"tag":559,"props":10210,"children":10211},{"__ignoreMap":8},[10212],{"type":43,"value":10207},{"type":38,"tag":39,"props":10214,"children":10215},{},[10216],{"type":43,"value":10217},"✅ Result: Faster setup and lower memory usage.",{"type":38,"tag":4283,"props":10219,"children":10221},{"id":10220},"_2-avoiding-unnecessary-renders",[10222],{"type":43,"value":10223},"2. Avoiding Unnecessary Renders",{"type":38,"tag":53,"props":10225,"children":10226},{},[10227,10232],{"type":38,"tag":57,"props":10228,"children":10229},{},[10230],{"type":43,"value":10231},"Changes deep inside a ref-wrapped object can trigger re-renders or watchers, even if you're not displaying those properties in the DOM.",{"type":38,"tag":57,"props":10233,"children":10234},{},[10235],{"type":43,"value":10236},"With shallowRef(), such internal changes don’t trigger updates:",{"type":38,"tag":790,"props":10238,"children":10241},{"className":10239,"code":10240,"language":4972,"meta":8},[4970],"// Using ref\nuser.value.preferences.fontSize++ // will re-render\n\n// Using shallowRef\nuser.value.preferences.fontSize++ // won't re-render\n",[10242],{"type":38,"tag":559,"props":10243,"children":10244},{"__ignoreMap":8},[10245],{"type":43,"value":10240},{"type":38,"tag":39,"props":10247,"children":10248},{},[10249],{"type":43,"value":10250},"✅ Result: Better control over what actually triggers change detection.",{"type":38,"tag":4283,"props":10252,"children":10254},{"id":10253},"_3-safer-for-third-party-instances",[10255],{"type":43,"value":10256},"3. Safer for Third-party Instances",{"type":38,"tag":39,"props":10258,"children":10259},{},[10260],{"type":43,"value":10261},"When working with libraries like Leaflet, Chart.js, or any class instance, you usually don’t want Vue to proxy every method and property.",{"type":38,"tag":790,"props":10263,"children":10266},{"className":10264,"code":10265,"language":4972,"meta":8},[4970],"const chart = shallowRef(null)\n\nonMounted(() => {\n  chart.value = new Chart(ctx, options)\n})\n",[10267],{"type":38,"tag":559,"props":10268,"children":10269},{"__ignoreMap":8},[10270],{"type":43,"value":10265},{"type":38,"tag":39,"props":10272,"children":10273},{},[10274],{"type":43,"value":10275},"✅ Result: Avoid reactivity issues and proxy-related bugs.",{"type":38,"tag":4283,"props":10277,"children":10279},{"id":10278},"when-to-use-which",[10280],{"type":43,"value":10281},"💡 When to Use Which?",{"type":38,"tag":1387,"props":10283,"children":10284},{},[10285,10315],{"type":38,"tag":5575,"props":10286,"children":10287},{},[10288],{"type":38,"tag":1395,"props":10289,"children":10290},{},[10291,10296,10306],{"type":38,"tag":5582,"props":10292,"children":10293},{},[10294],{"type":43,"value":10295},"Situation",{"type":38,"tag":5582,"props":10297,"children":10298},{},[10299,10301],{"type":43,"value":10300},"Use ",{"type":38,"tag":559,"props":10302,"children":10304},{"className":10303},[],[10305],{"type":43,"value":2901},{"type":38,"tag":5582,"props":10307,"children":10308},{},[10309,10310],{"type":43,"value":10300},{"type":38,"tag":559,"props":10311,"children":10313},{"className":10312},[],[10314],{"type":43,"value":9946},{"type":38,"tag":1391,"props":10316,"children":10317},{},[10318,10334,10350,10366,10382,10398],{"type":38,"tag":1395,"props":10319,"children":10320},{},[10321,10326,10330],{"type":38,"tag":1399,"props":10322,"children":10323},{},[10324],{"type":43,"value":10325},"Primitive value",{"type":38,"tag":1399,"props":10327,"children":10328},{},[10329],{"type":43,"value":6718},{"type":38,"tag":1399,"props":10331,"children":10332},{},[10333],{"type":43,"value":6718},{"type":38,"tag":1395,"props":10335,"children":10336},{},[10337,10342,10346],{"type":38,"tag":1399,"props":10338,"children":10339},{},[10340],{"type":43,"value":10341},"Nested object with reactive properties",{"type":38,"tag":1399,"props":10343,"children":10344},{},[10345],{"type":43,"value":6718},{"type":38,"tag":1399,"props":10347,"children":10348},{},[10349],{"type":43,"value":6713},{"type":38,"tag":1395,"props":10351,"children":10352},{},[10353,10358,10362],{"type":38,"tag":1399,"props":10354,"children":10355},{},[10356],{"type":43,"value":10357},"Third-party library objects (Map, Chart)",{"type":38,"tag":1399,"props":10359,"children":10360},{},[10361],{"type":43,"value":6713},{"type":38,"tag":1399,"props":10363,"children":10364},{},[10365],{"type":43,"value":6718},{"type":38,"tag":1395,"props":10367,"children":10368},{},[10369,10374,10378],{"type":38,"tag":1399,"props":10370,"children":10371},{},[10372],{"type":43,"value":10373},"Performance-sensitive large objects",{"type":38,"tag":1399,"props":10375,"children":10376},{},[10377],{"type":43,"value":6713},{"type":38,"tag":1399,"props":10379,"children":10380},{},[10381],{"type":43,"value":6718},{"type":38,"tag":1395,"props":10383,"children":10384},{},[10385,10390,10394],{"type":38,"tag":1399,"props":10386,"children":10387},{},[10388],{"type":43,"value":10389},"Want deep reactivity",{"type":38,"tag":1399,"props":10391,"children":10392},{},[10393],{"type":43,"value":6718},{"type":38,"tag":1399,"props":10395,"children":10396},{},[10397],{"type":43,"value":6713},{"type":38,"tag":1395,"props":10399,"children":10400},{},[10401,10413,10417],{"type":38,"tag":1399,"props":10402,"children":10403},{},[10404,10406,10411],{"type":43,"value":10405},"Only care about top-level ",{"type":38,"tag":559,"props":10407,"children":10409},{"className":10408},[],[10410],{"type":43,"value":9998},{"type":43,"value":10412}," changes",{"type":38,"tag":1399,"props":10414,"children":10415},{},[10416],{"type":43,"value":6713},{"type":38,"tag":1399,"props":10418,"children":10419},{},[10420],{"type":43,"value":6718},{"type":38,"tag":46,"props":10422,"children":10424},{"id":10423},"vue-3-performance-benchmark-ref-vs-shallowref",[10425,10427,10432,10433],{"type":43,"value":10426},"🔬 Vue 3 Performance Benchmark: ",{"type":38,"tag":559,"props":10428,"children":10430},{"className":10429},[],[10431],{"type":43,"value":2901},{"type":43,"value":9921},{"type":38,"tag":559,"props":10434,"children":10436},{"className":10435},[],[10437],{"type":43,"value":9946},{"type":38,"tag":39,"props":10439,"children":10440},{},[10441,10443,10448,10449,10454],{"type":43,"value":10442},"This benchmark code below compares the performance characteristics and reactivity behavior of ",{"type":38,"tag":559,"props":10444,"children":10446},{"className":10445},[],[10447],{"type":43,"value":2901},{"type":43,"value":7230},{"type":38,"tag":559,"props":10450,"children":10452},{"className":10451},[],[10453],{"type":43,"value":9946},{"type":43,"value":10455},"\nin Vue 3 when dealing with large, nested data structures.",{"type":38,"tag":4283,"props":10457,"children":10459},{"id":10458},"test-summary",[10460],{"type":43,"value":10461},"Test Summary",{"type":38,"tag":53,"props":10463,"children":10464},{},[10465,10484,10503,10527,10547],{"type":38,"tag":57,"props":10466,"children":10467},{},[10468,10470,10475,10477,10483],{"type":43,"value":10469},"A data structure with ",{"type":38,"tag":72,"props":10471,"children":10472},{},[10473],{"type":43,"value":10474},"100,000 deeply nested items",{"type":43,"value":10476}," is generated via ",{"type":38,"tag":559,"props":10478,"children":10480},{"className":10479},[],[10481],{"type":43,"value":10482},"generateLargeData()",{"type":43,"value":1063},{"type":38,"tag":57,"props":10485,"children":10486},{},[10487,10488,10494,10496,10501],{"type":43,"value":1202},{"type":38,"tag":559,"props":10489,"children":10491},{"className":10490},[],[10492],{"type":43,"value":10493},"triggerDeepAccess()",{"type":43,"value":10495}," function accesses every nested property to ",{"type":38,"tag":72,"props":10497,"children":10498},{},[10499],{"type":43,"value":10500},"force Vue's lazy deep reactivity mechanism",{"type":43,"value":10502}," to proxy the entire object graph.",{"type":38,"tag":57,"props":10504,"children":10505},{},[10506,10507,10512,10513,10518,10520,10526],{"type":43,"value":1202},{"type":38,"tag":559,"props":10508,"children":10510},{"className":10509},[],[10511],{"type":43,"value":2901},{"type":43,"value":7230},{"type":38,"tag":559,"props":10514,"children":10516},{"className":10515},[],[10517],{"type":43,"value":9946},{"type":43,"value":10519}," wrappers are applied separately, and initialization time is measured with ",{"type":38,"tag":559,"props":10521,"children":10523},{"className":10522},[],[10524],{"type":43,"value":10525},"performance.now()",{"type":43,"value":1063},{"type":38,"tag":57,"props":10528,"children":10529},{},[10530,10532,10537,10539,10545],{"type":43,"value":10531},"A ",{"type":38,"tag":559,"props":10533,"children":10535},{"className":10534},[],[10536],{"type":43,"value":10011},{"type":43,"value":10538}," is set up on a specific deeply nested property (",{"type":38,"tag":559,"props":10540,"children":10542},{"className":10541},[],[10543],{"type":43,"value":10544},"items[50000].details.price",{"type":43,"value":10546},") in both cases.",{"type":38,"tag":57,"props":10548,"children":10549},{},[10550],{"type":43,"value":10551},"After a delay, the watched property is mutated to observe whether reactivity is triggered.",{"type":38,"tag":4283,"props":10553,"children":10555},{"id":10554},"expected-behavior",[10556],{"type":43,"value":10557},"Expected Behavior",{"type":38,"tag":53,"props":10559,"children":10560},{},[10561,10578,10601],{"type":38,"tag":57,"props":10562,"children":10563},{},[10564,10569,10571,10576],{"type":38,"tag":559,"props":10565,"children":10567},{"className":10566},[],[10568],{"type":43,"value":2901},{"type":43,"value":10570}," will recursively convert nested structures into reactive proxies upon access. Thus, the watcher ",{"type":38,"tag":72,"props":10572,"children":10573},{},[10574],{"type":43,"value":10575},"will be triggered",{"type":43,"value":10577}," after mutation.",{"type":38,"tag":57,"props":10579,"children":10580},{},[10581,10586,10588,10593,10595,10600],{"type":38,"tag":559,"props":10582,"children":10584},{"className":10583},[],[10585],{"type":43,"value":9946},{"type":43,"value":10587}," only proxies the top-level value; nested changes are ",{"type":38,"tag":72,"props":10589,"children":10590},{},[10591],{"type":43,"value":10592},"not tracked",{"type":43,"value":10594},". Therefore, the watcher will ",{"type":38,"tag":72,"props":10596,"children":10597},{},[10598],{"type":43,"value":10599},"not be triggered",{"type":43,"value":1063},{"type":38,"tag":57,"props":10602,"children":10603},{},[10604,10609,10611,10616],{"type":38,"tag":559,"props":10605,"children":10607},{"className":10606},[],[10608],{"type":43,"value":9946},{"type":43,"value":10610}," shows ",{"type":38,"tag":72,"props":10612,"children":10613},{},[10614],{"type":43,"value":10615},"significantly lower initialization cost",{"type":43,"value":10617}," and avoids the overhead of recursive proxy generation.",{"type":38,"tag":4283,"props":10619,"children":10620},{"id":7126},[10621],{"type":43,"value":7129},{"type":38,"tag":39,"props":10623,"children":10624},{},[10625,10627,10632],{"type":43,"value":10626},"This benchmark highlights the importance of choosing ",{"type":38,"tag":559,"props":10628,"children":10630},{"className":10629},[],[10631],{"type":43,"value":9946},{"type":43,"value":10633}," when:",{"type":38,"tag":53,"props":10635,"children":10636},{},[10637,10642,10647],{"type":38,"tag":57,"props":10638,"children":10639},{},[10640],{"type":43,"value":10641},"You only need to react to top-level changes",{"type":38,"tag":57,"props":10643,"children":10644},{},[10645],{"type":43,"value":10646},"Working with third-party class instances or static nested data",{"type":38,"tag":57,"props":10648,"children":10649},{},[10650],{"type":43,"value":10651},"Optimizing performance for large datasets that don’t require full reactivity",{"type":38,"tag":39,"props":10653,"children":10654},{},[10655,10657,10662],{"type":43,"value":10656},"For scenarios requiring deep reactivity (e.g., DOM-bound nested structures), ",{"type":38,"tag":559,"props":10658,"children":10660},{"className":10659},[],[10661],{"type":43,"value":2901},{"type":43,"value":10663}," remains the appropriate choice.",{"type":38,"tag":790,"props":10665,"children":10668},{"className":10666,"code":10667,"language":4972,"meta":8},[4970],"\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef, watch, onMounted } from 'vue'\n\nfunction triggerDeepAccess(obj) {\n  for (let i = 0; i \u003C obj.items.length; i++) {\n    const item = obj.items[i]\n    void item.name\n    void item.details.price\n    void item.details.active\n  }\n}\n\nfunction generateLargeData() {\n  return {\n    items: Array.from({ length: 100_000 }, (_, i) => ({\n      name: `Item ${i}`,\n      details: {\n        price: i,\n        active: true\n      }\n    }))\n  }\n}\n\nonMounted(() => {\n  const TARGET_INDEX = 50000\n\n  // Deep ref setup\n  const data1 = generateLargeData()\n  const t1 = performance.now()\n  const deep = ref(data1)\n  triggerDeepAccess(deep.value)\n  const t2 = performance.now()\n  const deepTime = (t2 - t1).toFixed(3)\n  const deepCount = deep.value.items.length\n\n  // Watch a deep property\n  watch(\n    () => deep.value.items[TARGET_INDEX].details.price,\n    (newVal, oldVal) => {\n      console.log(`🔁 deep watcher triggered: ${oldVal} → ${newVal}`)\n    }\n  )\n\n  // Mutate it after a tick\n  setTimeout(() => {\n    deep.value.items[TARGET_INDEX].details.price++\n  }, 500)\n\n  // Shallow ref setup\n  const data2 = generateLargeData()\n  const t3 = performance.now()\n  const shallow = shallowRef(data2)\n  triggerDeepAccess(shallow.value)\n  const t4 = performance.now()\n  const shallowTime = (t4 - t3).toFixed(3)\n  const shallowCount = shallow.value.items.length\n\n  // Watch the same nested property in shallowRef\n  watch(\n    () => shallow.value.items[TARGET_INDEX].details.price,\n    (newVal, oldVal) => {\n      console.log(`🔁 shallow watcher triggered: ${oldVal} → ${newVal}`)\n    }\n  )\n\n  setTimeout(() => {\n    shallow.value.items[TARGET_INDEX].details.price++\n  }, 500)\n\n  console.log(`⏱️ Deep ref init time: ${deepTime} ms (${deepCount} items)`)\n  console.log(`⏱️ Shallow ref init time: ${shallowTime} ms (${shallowCount} items)`)\n})\n",[10669],{"type":38,"tag":559,"props":10670,"children":10671},{"__ignoreMap":8},[10672],{"type":43,"value":10667},{"type":38,"tag":4283,"props":10674,"children":10676},{"id":10675},"️-console-output-snapshot",[10677],{"type":43,"value":10678},"🖥️ Console Output Snapshot",{"type":38,"tag":39,"props":10680,"children":10681},{},[10682,10684,10689,10691,10696,10698,10703],{"type":43,"value":10683},"The following screenshot captures the actual console output from the benchmark test. As expected, the initialization\ntime for ",{"type":38,"tag":559,"props":10685,"children":10687},{"className":10686},[],[10688],{"type":43,"value":2901},{"type":43,"value":10690}," is significantly higher due to Vue’s deep proxying, while ",{"type":38,"tag":559,"props":10692,"children":10694},{"className":10693},[],[10695],{"type":43,"value":9946},{"type":43,"value":10697}," remains much faster.\nAdditionally, only the ",{"type":38,"tag":559,"props":10699,"children":10701},{"className":10700},[],[10702],{"type":43,"value":2901},{"type":43,"value":10704}," triggers the watcher upon mutation of a deeply nested property, confirming its deep\nreactivity behavior:",{"type":38,"tag":10706,"props":10707,"children":10712},"prose-img",{"alt":10708,"height":3050,"src":10709,"title":10710,"width":10711},"Red and shallowRef benchmark","/images/blog-posts/ref-shallowref-benchmark.png.webp","The Ref and shallowRef code snippet output.",800,[],{"title":8,"searchDepth":685,"depth":685,"links":10714},[10715,10716,10720,10726],{"id":9954,"depth":685,"text":9957},{"id":10035,"depth":685,"text":10038,"children":10717},[10718,10719],{"id":10041,"depth":4447,"text":10044},{"id":10074,"depth":4447,"text":10077},{"id":10170,"depth":685,"text":10173,"children":10721},[10722,10723,10724,10725],{"id":10181,"depth":4447,"text":10184},{"id":10220,"depth":4447,"text":10223},{"id":10253,"depth":4447,"text":10256},{"id":10278,"depth":4447,"text":10281},{"id":10423,"depth":685,"text":10727,"children":10728},"🔬 Vue 3 Performance Benchmark: ref() vs shallowRef()",[10729,10730,10731,10732],{"id":10458,"depth":4447,"text":10461},{"id":10554,"depth":4447,"text":10557},{"id":7126,"depth":4447,"text":7129},{"id":10675,"depth":4447,"text":10678},"content:blog-posts:ref-vs-shallowref.md","blog-posts/ref-vs-shallowref.md","blog-posts/ref-vs-shallowref",{"_path":10737,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":10738,"description":10739,"seoTitle":10740,"seoDescription":10741,"keywords":10742,"image":9338,"alt":1268,"ogImage":9338,"tags":10747,"categories":10748,"published":25,"author":26,"link":10737,"date":10749,"sitemap":10750,"body":10758,"_type":693,"_id":10933,"_source":695,"_file":10934,"_stem":10935,"_extension":698},"/blog-posts/states-actions-getters-in-pinia","States, actions, and getters in Pinia","Learn how to effectively utilize states, actions, and getters with Pinia, Vue's official, intuitive state management library.","States, Actions & Getters in Pinia","Explore how to manage states, implement actions, and use getters with Pinia for improved application state management.",[10743,10744,10745,10746],"Pinia states","Pinia actions","Pinia getters","state management Vue Pinia",[713,9340,9341],[713,9340,9341],"2022-05-15",{"loc":10751,"lastmod":10749,"changefreq":30,"priority":31,"images":10752},"/blog-posts/states-actions-getters-in-pinia/",[10753,10754,10756],{"loc":9338},{"loc":10755},"/images/blog-posts/file-tree.png.webp",{"loc":10757},"/images/blog-posts/bare-bone-store-example.png.webp",{"type":35,"children":10759,"toc":10926},[10760,10780,10786,10791,10808,10837,10853,10859,10864,10872,10878,10883,10891,10897,10902,10910,10914],{"type":38,"tag":39,"props":10761,"children":10762},{},[10763,10765,10771,10773,10778],{"type":43,"value":10764},"In this post, we check the meaning of the basic keywords of the store's option object in PINIA. These are the States, Actions, and the Getters. In ",{"type":38,"tag":61,"props":10766,"children":10768},{"href":9361,":target":1094,"rel":10767},[65],[10769],{"type":43,"value":10770},"PINIA",{"type":43,"value":10772}," you will define separate stores. While ",{"type":38,"tag":61,"props":10774,"children":10775},{"href":9725},[10776],{"type":43,"value":10777},"Vuex State Manager",{"type":43,"value":10779}," stores state at a single root level by default. These separated PINIA stores together will provide the Global Store in the PINIA State Manager.",{"type":38,"tag":46,"props":10781,"children":10783},{"id":10782},"create-a-pinia-store",[10784],{"type":43,"value":10785},"Create a PINIA Store",{"type":38,"tag":39,"props":10787,"children":10788},{},[10789],{"type":43,"value":10790},"Let's create our first PINIA store example. It will be a simple javaScript file. You can name it anyhow you want. Although, it is good practice to follow the 'Store' suffix convention. For example WhateverStore.js and place these files into a dedicated folder like stores. See below the screenshot. You can see there is a ProductStore.js inside the store folder.",{"type":38,"tag":1383,"props":10792,"children":10793},{},[10794],{"type":38,"tag":2148,"props":10795,"children":10796},{"style":2150},[10797,10798,10803,10804],{"type":43,"value":2153},{"type":38,"tag":1885,"props":10799,"children":10802},{"style":10800,"src":10755,"alt":10801},"height: 647px;","File tree and store folder",[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":10805,"children":10806},{},[10807],{"type":43,"value":10801},{"type":38,"tag":39,"props":10809,"children":10810},{},[10811,10813,10818,10820,10823,10828,10830,10835],{"type":43,"value":10812},"First, you need to import the ",{"type":38,"tag":76,"props":10814,"children":10815},{},[10816],{"type":43,"value":10817},"defineStore",{"type":43,"value":10819}," method from PINIA. The",{"type":38,"tag":1303,"props":10821,"children":10822},{},[],{"type":38,"tag":76,"props":10824,"children":10825},{},[10826],{"type":43,"value":10827},"defineStores",{"type":43,"value":10829}," method takes two parameters a name that should be unique in the whole project, and options object as a second parameter where you can define the body of the options object. We need to export the ",{"type":38,"tag":76,"props":10831,"children":10832},{},[10833],{"type":43,"value":10834},"definStore",{"type":43,"value":10836}," so we assign it to a property. It is also a good practice to use the 'use' prefix and the 'store' suffix for the property name.",{"type":38,"tag":1383,"props":10838,"children":10839},{},[10840],{"type":38,"tag":2148,"props":10841,"children":10842},{"style":2150},[10843,10844,10848,10849],{"type":43,"value":2153},{"type":38,"tag":1885,"props":10845,"children":10847},{"style":2156,"src":10757,"alt":10846},"WhateverStore.js",[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":10850,"children":10851},{},[10852],{"type":43,"value":10846},{"type":38,"tag":46,"props":10854,"children":10856},{"id":10855},"what-the-pinia-states-is",[10857],{"type":43,"value":10858},"What the PINIA States is!",{"type":38,"tag":39,"props":10860,"children":10861},{},[10862],{"type":43,"value":10863},"The state is the central part of your stores. It is the whole reason the store exists. So it's used for defining data that should be accessible across all components of your application. It does not mean every file or component should use it, but the option is there.",{"type":38,"tag":790,"props":10865,"children":10867},{"code":10866},"    // Example state with an items array return\n    state: () => {\n        return {\n            items: [],\n        }\n    }\n",[10868],{"type":38,"tag":559,"props":10869,"children":10870},{"__ignoreMap":8},[10871],{"type":43,"value":10866},{"type":38,"tag":46,"props":10873,"children":10875},{"id":10874},"what-are-actions-in-pinia",[10876],{"type":43,"value":10877},"What are Actions in PINIA?",{"type":38,"tag":39,"props":10879,"children":10880},{},[10881],{"type":43,"value":10882},"Actions in your store are synonymous with methods for your component except they denoted mutating your store's data instead of a component's local data. You can see an example here of how to define it.",{"type":38,"tag":790,"props":10884,"children":10886},{"code":10885},"    // Example addItem Action that adds a new the items to the array\n    actions:{\n        addItems(item){\n                this.items.push(item);\n        }\n    }\n",[10887],{"type":38,"tag":559,"props":10888,"children":10889},{"__ignoreMap":8},[10890],{"type":43,"value":10885},{"type":38,"tag":46,"props":10892,"children":10894},{"id":10893},"what-are-getters",[10895],{"type":43,"value":10896},"What are Getters?",{"type":38,"tag":39,"props":10898,"children":10899},{},[10900],{"type":43,"value":10901},"Getters are synonymous with computed props in a component. Its purpose is to return a computed value based on the store's state.",{"type":38,"tag":790,"props":10903,"children":10905},{"code":10904},"    // Example count Getter that return the length of the items array\n    getters:{\n        count(){\n            return this.items.length;\n        }\n    }\n",[10906],{"type":38,"tag":559,"props":10907,"children":10908},{"__ignoreMap":8},[10909],{"type":43,"value":10904},{"type":38,"tag":46,"props":10911,"children":10912},{"id":675},[10913],{"type":43,"value":678},{"type":38,"tag":39,"props":10915,"children":10916},{},[10917,10919,10924],{"type":43,"value":10918},"In this post, I tried to highlight the basic mini-steps on how we can define a store in PINIA. How we can structure the code for the three main blocks of the ",{"type":38,"tag":76,"props":10920,"children":10921},{},[10922],{"type":43,"value":10923},"defineStore's",{"type":43,"value":10925}," options object and what are the main keywords that define the behavior of a store. Thanks for reading!",{"title":8,"searchDepth":685,"depth":685,"links":10927},[10928,10929,10930,10931,10932],{"id":10782,"depth":685,"text":10785},{"id":10855,"depth":685,"text":10858},{"id":10874,"depth":685,"text":10877},{"id":10893,"depth":685,"text":10896},{"id":675,"depth":685,"text":678},"content:blog-posts:states-actions-getters-in-pinia.md","blog-posts/states-actions-getters-in-pinia.md","blog-posts/states-actions-getters-in-pinia",{"_path":10937,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":10938,"description":10939,"seoTitle":10940,"seoDescription":10941,"keywords":10942,"image":10947,"alt":1268,"ogImage":10947,"tags":10948,"categories":10950,"published":25,"author":26,"link":10937,"date":10953,"sitemap":10954,"body":10964,"_type":693,"_id":11324,"_source":695,"_file":11325,"_stem":11326,"_extension":698},"/blog-posts/the-first-steps-in-angular-10","The first steps in Angular 10","A beginner-friendly guide to getting started with Angular 10, covering the essential setup and basics for new developers.","Getting Started with Angular 10","Learn the basics of Angular 10 and follow this step-by-step guide to set up and build your first Angular application.",[10943,10944,10945,10946],"Angular 10 basics","Getting started Angular","Angular 10 tutorial","Angular first steps","/images/blog-posts/angular10.png.webp",[10949],"angular 10",[21,10951,10952],"angular","js","2022-02-10",{"loc":10955,"lastmod":10953,"changefreq":30,"priority":31,"images":10956},"/blog-posts/the-first-steps-in-angular-10/",[10957,10958,10960,10962],{"loc":10947},{"loc":10959},"/images/blog-posts/bootstrap-min-style-section.png.webp",{"loc":10961},"/images/blog-posts/bootstrap-folder.png.webp",{"loc":10963},"/images/blog-posts/ng-command.png.webp",{"type":35,"children":10965,"toc":11315},[10966,10975,10980,10985,10990,10995,11005,11011,11016,11021,11029,11034,11039,11047,11052,11067,11072,11087,11093,11098,11111,11126,11134,11139,11147,11170,11173,11184,11225,11228,11234,11238,11243,11247,11268,11274],{"type":38,"tag":46,"props":10967,"children":10969},{"id":10968},"introduction",[10970],{"type":38,"tag":72,"props":10971,"children":10972},{},[10973],{"type":43,"value":10974},"Introduction",{"type":38,"tag":39,"props":10976,"children":10977},{},[10978],{"type":43,"value":10979},"Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.",{"type":38,"tag":39,"props":10981,"children":10982},{},[10983],{"type":43,"value":10984},"Most of the time when developers talk about AngularJS then they are talking about Angular version one (1.0-1.8).  ",{"type":38,"tag":39,"props":10986,"children":10987},{},[10988],{"type":43,"value":10989},"In 2016 Google published the second version of Angular. Since that time when we are talking about Angular, we are referring to the versions above two (2\u003CX).  Angular 2, 4, 5, 6, 9, 10 are almost identical with small differences. In this series, I would like to write about the features of Angular 10 but in this episode, I will write about the first steps in Angular 10",{"type":38,"tag":46,"props":10991,"children":10992},{"id":9690},[10993],{"type":43,"value":10994},"Installation",{"type":38,"tag":39,"props":10996,"children":10997},{},[10998,11000,11003],{"type":43,"value":10999},"To be able to work freely with any kind of front-end framework you need to have at least one version of the Node JavaScript runtime environment. Node.js has several versions and it is a common thing that you need to upgrade and downgrade them based on your project.",{"type":38,"tag":1303,"props":11001,"children":11002},{},[],{"type":43,"value":11004},"\nDue to this, it is a good practice to have another program that manages multiple Node.JS versions parallel. The name of this program is Node Version Manager aka NVM. You can find NVM to Linux / Windows and macOS too.",{"type":38,"tag":46,"props":11006,"children":11008},{"id":11007},"lets-start-with-a-blank-bootstrap-3-project",[11009],{"type":43,"value":11010},"Let's start with a blank Bootstrap 3 project",{"type":38,"tag":39,"props":11012,"children":11013},{},[11014],{"type":43,"value":11015},"Assuming we already have NVM on our computer and we already installed the latest Node.JS version and NPM through NVM. We can create a new blank project from ground zero.",{"type":38,"tag":39,"props":11017,"children":11018},{},[11019],{"type":43,"value":11020},"Let's run the following command in our command-line tool. It can be a terminal, power Shell, or Windows cmd.",{"type":38,"tag":790,"props":11022,"children":11024},{"code":11023},"sudo npm install -g @angular/cli@latest\n",[11025],{"type":38,"tag":559,"props":11026,"children":11027},{"__ignoreMap":8},[11028],{"type":43,"value":11023},{"type":38,"tag":39,"props":11030,"children":11031},{},[11032],{"type":43,"value":11033},"In order to install Angular on macOS or on Linux, you might need to use the sudo command to install it as an Administrator. Under Ubuntu 18.04 with NVM, sudo command is not necessary.",{"type":38,"tag":39,"props":11035,"children":11036},{},[11037],{"type":43,"value":11038},"Anyway, in general, I prefer using Bootstrap for front-end work, so if it happened you wanted to try Bootstrap version 3, you can do this with the following command.",{"type":38,"tag":790,"props":11040,"children":11042},{"code":11041},"npm install --save bootstrap@3\n",[11043],{"type":38,"tag":559,"props":11044,"children":11045},{"__ignoreMap":8},[11046],{"type":43,"value":11041},{"type":38,"tag":39,"props":11048,"children":11049},{},[11050],{"type":43,"value":11051},"Now we have the Angular Framework and we have the Bootstrap one but they do not know anything about each other at this stage. We need to introduce them to each other. So we have to add the path of the bootstrap.min.css file in the styles section of the angular.json file.",{"type":38,"tag":2148,"props":11053,"children":11054},{"style":2150},[11055,11056,11060,11061],{"type":43,"value":2153},{"type":38,"tag":1885,"props":11057,"children":11059},{"style":2156,"src":10959,"alt":11058},"bootstrap.min.css file path",[],{"type":43,"value":2153},{"type":38,"tag":39,"props":11062,"children":11064},{"className":11063},[4663],[11065],{"type":43,"value":11066},"So we have to add the path of the bootstrap.min.css file",{"type":38,"tag":39,"props":11068,"children":11069},{},[11070],{"type":43,"value":11071},"The above bootstrap installation command created a new Boostrap folder inside the node_modules folder. That folder contains the 'bootstrap.min.css' we need to use.",{"type":38,"tag":2148,"props":11073,"children":11074},{"style":2150},[11075,11076,11081,11082],{"type":43,"value":2153},{"type":38,"tag":1885,"props":11077,"children":11080},{"style":11078,"src":10961,"alt":11079},"width: 75%;","Bootstrap folder structure",[],{"type":43,"value":2153},{"type":38,"tag":39,"props":11083,"children":11085},{"className":11084},[4663],[11086],{"type":43,"value":11079},{"type":38,"tag":46,"props":11088,"children":11090},{"id":11089},"create-and-run",[11091],{"type":43,"value":11092},"Create and Run",{"type":38,"tag":39,"props":11094,"children":11095},{},[11096],{"type":43,"value":11097},"The installed Angular comes with a command-line tool. If you type the ng command into the terminal and hit enter you can see a list of commands.",{"type":38,"tag":2148,"props":11099,"children":11100},{"style":2150},[11101,11102,11105,11106],{"type":43,"value":2153},{"type":38,"tag":1885,"props":11103,"children":11104},{"style":2156,"src":10963,"alt":11079},[],{"type":43,"value":2153},{"type":38,"tag":39,"props":11107,"children":11109},{"className":11108},[4663],[11110],{"type":43,"value":11079},{"type":38,"tag":39,"props":11112,"children":11113},{},[11114,11116,11124],{"type":43,"value":11115},"If we type the ",{"type":38,"tag":72,"props":11117,"children":11118},{},[11119],{"type":38,"tag":76,"props":11120,"children":11121},{},[11122],{"type":43,"value":11123},"ng new [project-name]",{"type":43,"value":11125}," command we can create our project.",{"type":38,"tag":790,"props":11127,"children":11129},{"code":11128},"# new (n) Creates a new workspace and an initial Angular application.\nng new my-dream-app\n",[11130],{"type":38,"tag":559,"props":11131,"children":11132},{"__ignoreMap":8},[11133],{"type":43,"value":11128},{"type":38,"tag":39,"props":11135,"children":11136},{},[11137],{"type":43,"value":11138},"So far, we installed the Framework and Bootstrap. We taught Angular to handle Bootstrap and we created an empty project. The only missing piece is to launch the project.",{"type":38,"tag":790,"props":11140,"children":11142},{"code":11141},"# Let's run the Application\nng serve\n",[11143],{"type":38,"tag":559,"props":11144,"children":11145},{"__ignoreMap":8},[11146],{"type":43,"value":11141},{"type":38,"tag":39,"props":11148,"children":11149},{},[11150,11151,11159,11161,11168],{"type":43,"value":1202},{"type":38,"tag":72,"props":11152,"children":11153},{},[11154],{"type":38,"tag":76,"props":11155,"children":11156},{},[11157],{"type":43,"value":11158},"ng serve",{"type":43,"value":11160}," command will run the development server of Angular. While ",{"type":38,"tag":72,"props":11162,"children":11163},{},[11164],{"type":38,"tag":76,"props":11165,"children":11166},{},[11167],{"type":43,"value":11158},{"type":43,"value":11169}," is running the Framework checks all the changes in the project and rebuilds the project if any changes happened.",{"type":38,"tag":1221,"props":11171,"children":11172},{},[],{"type":38,"tag":39,"props":11174,"children":11175},{},[11176],{"type":38,"tag":72,"props":11177,"children":11178},{},[11179],{"type":38,"tag":76,"props":11180,"children":11181},{},[11182],{"type":43,"value":11183},"Notes:",{"type":38,"tag":53,"props":11185,"children":11186},{},[11187,11192,11202,11211,11220],{"type":38,"tag":57,"props":11188,"children":11189},{},[11190],{"type":43,"value":11191},"Unfortunately,on Linux the real-time watch is not working properly.",{"type":38,"tag":57,"props":11193,"children":11194},{},[11195,11197],{"type":43,"value":11196},"The issue is solved with the following command:",{"type":38,"tag":72,"props":11198,"children":11199},{},[11200],{"type":43,"value":11201},"ng serve --poll=2000",{"type":38,"tag":57,"props":11203,"children":11204},{},[11205],{"type":38,"tag":61,"props":11206,"children":11209},{"href":11207,":target":1094,"rel":11208},"https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers",[65],[11210],{"type":43,"value":11207},{"type":38,"tag":57,"props":11212,"children":11213},{},[11214],{"type":38,"tag":61,"props":11215,"children":11218},{"href":11216,":target":1094,"rel":11217},"https://github.com/angular/angular-cli/issues/8313#issuecomment-362728855",[65],[11219],{"type":43,"value":11216},{"type":38,"tag":57,"props":11221,"children":11222},{},[11223],{"type":43,"value":11224},"Notes: On Linux file systems the changes are connected to the ‘inotify’ listener number. This number defines the watchable file numbers. If this number exceeds then changes will not be detected.",{"type":38,"tag":1221,"props":11226,"children":11227},{},[],{"type":38,"tag":3048,"props":11229,"children":11231},{"width":3050,"height":3051,"frameBorder":3052,"src":11230,"scrolling":3054,"style":3055},"https://www.mindmeister.com/maps/public_map_shell/1728817994/angular-10?width=600&height=400&z=auto&no_share=1&no_logo=1",[11232],{"type":43,"value":11233},"Your browser is not able to display frames. Please visit \u003Ca href=\"https://www.mindmeister.com/1728817994/angular-10\" target=\"_blank\" rel=\"noopener\">Angular 10\u003C/a> on MindMeister.",{"type":38,"tag":46,"props":11235,"children":11236},{"id":6787},[11237],{"type":43,"value":7549},{"type":38,"tag":39,"props":11239,"children":11240},{},[11241],{"type":43,"value":11242},"In this episode, I covered only the basic steps if someone wants to start playing and going deeper into the Angular Framework. In the next episodes I want to go into the details of the Modules, Components, Databinding, Directives, Views, and Debugging sections and the Framework.",{"type":38,"tag":46,"props":11244,"children":11245},{"id":1761},[11246],{"type":43,"value":2829},{"type":38,"tag":53,"props":11248,"children":11249},{},[11250,11259],{"type":38,"tag":57,"props":11251,"children":11252},{},[11253],{"type":38,"tag":61,"props":11254,"children":11256},{"href":11207,":target":1094,"rel":11255},[65],[11257],{"type":43,"value":11258},"inotify",{"type":38,"tag":57,"props":11260,"children":11261},{},[11262],{"type":38,"tag":61,"props":11263,"children":11265},{"href":11216,":target":1094,"rel":11264},[65],[11266],{"type":43,"value":11267},"ng serve --watch",{"type":38,"tag":46,"props":11269,"children":11271},{"id":11270},"episodes",[11272],{"type":43,"value":11273},"Episodes",{"type":38,"tag":53,"props":11275,"children":11276},{},[11277,11285,11290,11295,11300,11305,11310],{"type":38,"tag":57,"props":11278,"children":11279},{},[11280],{"type":38,"tag":61,"props":11281,"children":11282},{"href":10937},[11283],{"type":43,"value":11284},"First steps",{"type":38,"tag":57,"props":11286,"children":11287},{},[11288],{"type":43,"value":11289},"Modules",{"type":38,"tag":57,"props":11291,"children":11292},{},[11293],{"type":43,"value":11294},"Components",{"type":38,"tag":57,"props":11296,"children":11297},{},[11298],{"type":43,"value":11299},"Databindings",{"type":38,"tag":57,"props":11301,"children":11302},{},[11303],{"type":43,"value":11304},"Directives",{"type":38,"tag":57,"props":11306,"children":11307},{},[11308],{"type":43,"value":11309},"Views",{"type":38,"tag":57,"props":11311,"children":11312},{},[11313],{"type":43,"value":11314},"Debugging",{"title":8,"searchDepth":685,"depth":685,"links":11316},[11317,11318,11319,11320,11321,11322,11323],{"id":10968,"depth":685,"text":10974},{"id":9690,"depth":685,"text":10994},{"id":11007,"depth":685,"text":11010},{"id":11089,"depth":685,"text":11092},{"id":6787,"depth":685,"text":7549},{"id":1761,"depth":685,"text":2829},{"id":11270,"depth":685,"text":11273},"content:blog-posts:the-first-steps-in-angular-10.md","blog-posts/the-first-steps-in-angular-10.md","blog-posts/the-first-steps-in-angular-10",{"_path":11328,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11329,"description":11330,"seoTitle":11331,"seoDescription":11332,"keywords":11333,"image":4468,"alt":1268,"ogImage":4468,"tags":11338,"categories":11339,"published":25,"author":26,"link":11328,"date":11340,"sitemap":11341,"body":11345,"_type":693,"_id":11501,"_source":695,"_file":11502,"_stem":11503,"_extension":698},"/blog-posts/usage-of-inertiajs-reactive-forms","Usage of InertiaJS reactive forms","Understand how to create and maintain reactive forms with InertiaJS for dynamic and seamless user experiences.","Reactive Forms with InertiaJS","Learn how to use InertiaJS to create reactive forms that improve the interactivity and efficiency of your Laravel-based applications.",[11334,11335,11336,11337],"InertiaJS reactive forms","dynamic forms InertiaJS","InertiaJS forms tutorial","Laravel reactive forms",[4470,4174,4471,714],[4470,21,23,4473,4474],"2022-01-29",{"loc":11342,"lastmod":11340,"changefreq":30,"priority":31,"images":11343},"/blog-posts/usage-of-inertiajs-reactive-forms/",[11344],{"loc":4468},{"type":35,"children":11346,"toc":11496},[11347,11352,11358,11392,11397,11405,11411,11416,11424,11429,11437,11442,11450,11455,11460,11465,11473,11477],{"type":38,"tag":39,"props":11348,"children":11349},{},[11350],{"type":43,"value":11351},"InertiaJS reactive forms have three approaches to manage them.",{"type":38,"tag":46,"props":11353,"children":11355},{"id":11354},"inertiajs-form-usage-in-general",[11356],{"type":43,"value":11357},"InertiaJS form usage in general",{"type":38,"tag":53,"props":11359,"children":11360},{},[11361,11374,11379],{"type":38,"tag":57,"props":11362,"children":11363},{},[11364,11366],{"type":43,"value":11365},"Original form approach\n",{"type":38,"tag":53,"props":11367,"children":11368},{},[11369],{"type":38,"tag":57,"props":11370,"children":11371},{},[11372],{"type":43,"value":11373},"It will work, but it reloads the page that violates the SPA approach.",{"type":38,"tag":57,"props":11375,"children":11376},{},[11377],{"type":43,"value":11378},"reactive approach",{"type":38,"tag":57,"props":11380,"children":11381},{},[11382,11384],{"type":43,"value":11383},"form helper approach\n",{"type":38,"tag":53,"props":11385,"children":11386},{},[11387],{"type":38,"tag":57,"props":11388,"children":11389},{},[11390],{"type":43,"value":11391},"This approach has some inbuild things that we can use",{"type":38,"tag":39,"props":11393,"children":11394},{},[11395],{"type":43,"value":11396},"To be able to use the reactive approach, we need to import the followings:",{"type":38,"tag":790,"props":11398,"children":11400},{"code":11399},"import { reactive } from 'vue'\nimport { Inertia } from '@inertiajs/inertia'\n",[11401],{"type":38,"tag":559,"props":11402,"children":11403},{"__ignoreMap":8},[11404],{"type":43,"value":11399},{"type":38,"tag":46,"props":11406,"children":11408},{"id":11407},"udage-of-inertiajs-reactive-forms",[11409],{"type":43,"value":11410},"Udage of InertiaJS reactive forms",{"type":38,"tag":39,"props":11412,"children":11413},{},[11414],{"type":43,"value":11415},"Two-way data binding is necessary to detect any change in the input fields, so we need the v-model directives in the form inputs.",{"type":38,"tag":790,"props":11417,"children":11419},{"code":11418},"\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submit\">\n    \u003Clabel for=\"first_name\">First name:\u003C/label>\n    \u003Cinput id=\"first_name\" v-model=\"form.first_name\" />\n    \u003Clabel for=\"last_name\">Last name:\u003C/label>\n    \u003Cinput id=\"last_name\" v-model=\"form.last_name\" />\n    \u003Clabel for=\"email\">Email:\u003C/label>\n    \u003Cinput id=\"email\" v-model=\"form.email\" />\n    \u003Cbutton type=\"submit\">Submit\u003C/button>\n  \u003C/form>\n\u003C/template>\n",[11420],{"type":38,"tag":559,"props":11421,"children":11422},{"__ignoreMap":8},[11423],{"type":43,"value":11418},{"type":38,"tag":39,"props":11425,"children":11426},{},[11427],{"type":43,"value":11428},"Furthermore, to handle the form data, we need to define a correspondence form object that will store the form input information in an object.",{"type":38,"tag":790,"props":11430,"children":11432},{"code":11431},"let form = reactive({\n      first_name: null,\n      last_name: null,\n      email: null,\n    })\n",[11433],{"type":38,"tag":559,"props":11434,"children":11435},{"__ignoreMap":8},[11436],{"type":43,"value":11431},{"type":38,"tag":39,"props":11438,"children":11439},{},[11440],{"type":43,"value":11441},"By the way, we do not want to manage the form in the 'old' way. So neither the action nor the method attribute on the form tag is necessary. But we need to prevent the default submission while calling our submit function to make the form post. Due to this, the @submit.prevent=submit attribute solves that problem by calling the method below:",{"type":38,"tag":790,"props":11443,"children":11445},{"code":11444},"let submit = () => {\n      Inertia.post('/users', form)\n}\n",[11446],{"type":38,"tag":559,"props":11447,"children":11448},{"__ignoreMap":8},[11449],{"type":43,"value":11444},{"type":38,"tag":39,"props":11451,"children":11452},{},[11453],{"type":43,"value":11454},"Let's see the InertiaJS code in one place:",{"type":38,"tag":39,"props":11456,"children":11457},{},[11458],{"type":43,"value":11459},"Worth noting:",{"type":38,"tag":39,"props":11461,"children":11462},{},[11463],{"type":43,"value":11464},"The third parameter of the InertiaJS form method is the options param. This param can accept here callback hooks to make changes in the different states of the submission.",{"type":38,"tag":790,"props":11466,"children":11468},{"code":11467},"Inertia.post('/users', data, {\n  onBefore: (visit) => {},\n  onStart: (visit) => {},\n  onProgress: (progress) => {},\n  onSuccess: (page) => {},\n  onError: (errors) => {},\n  onCancel: () => {},\n  onFinish: visit => {},\n})\n",[11469],{"type":38,"tag":559,"props":11470,"children":11471},{"__ignoreMap":8},[11472],{"type":43,"value":11467},{"type":38,"tag":46,"props":11474,"children":11475},{"id":675},[11476],{"type":43,"value":678},{"type":38,"tag":39,"props":11478,"children":11479},{},[11480,11482,11487,11489,11494],{"type":43,"value":11481},"Previously, I wrote a note about ",{"type":38,"tag":61,"props":11483,"children":11484},{"href":4458},[11485],{"type":43,"value":11486},"active link creation",{"type":43,"value":11488}," in ",{"type":38,"tag":61,"props":11490,"children":11492},{"href":7715,":target":1094,"rel":11491},[65],[11493],{"type":43,"value":733},{"type":43,"value":11495},". In this one, I have written about the reactive forms. So the next one is going to detail the form helper. It can make the usage of reactive forms easier.",{"title":8,"searchDepth":685,"depth":685,"links":11497},[11498,11499,11500],{"id":11354,"depth":685,"text":11357},{"id":11407,"depth":685,"text":11410},{"id":675,"depth":685,"text":678},"content:blog-posts:usage-of-inertiajs-reactive-forms.md","blog-posts/usage-of-inertiajs-reactive-forms.md","blog-posts/usage-of-inertiajs-reactive-forms",{"_path":7016,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11505,"description":11506,"seoTitle":11507,"seoDescription":11508,"keywords":11509,"image":11514,"alt":11515,"ogImage":8,"tags":11516,"categories":11517,"published":25,"author":26,"link":7016,"date":11518,"sitemap":11519,"body":11523,"_type":693,"_id":11798,"_source":695,"_file":11799,"_stem":11800,"_extension":698},"Version control comparison: Git and SVN","A comprehensive comparison of Git and SVN, highlighting their strengths, weaknesses, and use-case scenarios.","Git vs SVN: Version Control Systems Compared","Explore the differences between Git and SVN, including their pros, cons, and which version control system best suits your project.",[11510,11511,11512,11513],"Git vs SVN","version control comparison","Git advantages","SVN features","/images/blog-posts/git-vs-svn-590x330.png.webp","Git and SVN logo",[6832,6833,6834],[21,4473],"2022-02-02",{"loc":11520,"lastmod":11518,"changefreq":30,"priority":31,"images":11521},"/blog-posts/version-control-comparison-with-git-and-svn/",[11522],{"loc":11514},{"type":35,"children":11524,"toc":11789},[11525,11531,11541,11564,11570,11575,11602,11608,11635,11640,11646,11663,11669,11674,11709,11715,11724,11733,11739,11755,11761,11766,11771],{"type":38,"tag":46,"props":11526,"children":11528},{"id":11527},"what-is-version-control",[11529],{"type":43,"value":11530},"What is version control?",{"type":38,"tag":39,"props":11532,"children":11533},{},[11534,11539],{"type":38,"tag":72,"props":11535,"children":11536},{},[11537],{"type":43,"value":11538},"Version Control Systems",{"type":43,"value":11540}," like Git, SVN, CVS, Mercurial are software tools that can be useful. They help the developer team to manage changes in the source code. When a mistake happens, developers can turn back the time and compare earlier versions and states. It helps them to fix errors while minimizing disruption to all team members.",{"type":38,"tag":39,"props":11542,"children":11543},{},[11544,11549,11551,11556,11558,11562],{"type":38,"tag":72,"props":11545,"children":11546},{},[11547],{"type":43,"value":11548},"Git",{"type":43,"value":11550}," and ",{"type":38,"tag":72,"props":11552,"children":11553},{},[11554],{"type":43,"value":11555},"SVN",{"type":43,"value":11557}," are the two most common ",{"type":38,"tag":72,"props":11559,"children":11560},{},[11561],{"type":43,"value":11538},{"type":43,"value":11563},". Both of them have pros and cons.",{"type":38,"tag":4283,"props":11565,"children":11567},{"id":11566},"categories-of-version-control-systems",[11568],{"type":43,"value":11569},"Categories of Version Control Systems.",{"type":38,"tag":39,"props":11571,"children":11572},{},[11573],{"type":43,"value":11574},"We can categorize the Version Control Systems into three types.",{"type":38,"tag":82,"props":11576,"children":11577},{},[11578,11586,11594],{"type":38,"tag":57,"props":11579,"children":11580},{},[11581],{"type":38,"tag":72,"props":11582,"children":11583},{},[11584],{"type":43,"value":11585},"Local Version Control System",{"type":38,"tag":57,"props":11587,"children":11588},{},[11589],{"type":38,"tag":72,"props":11590,"children":11591},{},[11592],{"type":43,"value":11593},"Centralized Version Control System",{"type":38,"tag":57,"props":11595,"children":11596},{},[11597],{"type":38,"tag":72,"props":11598,"children":11599},{},[11600],{"type":43,"value":11601},"Distributed Version Control System",{"type":38,"tag":46,"props":11603,"children":11605},{"id":11604},"about-git-version-control",[11606],{"type":43,"value":11607},"About GIT Version Control",{"type":38,"tag":39,"props":11609,"children":11610},{},[11611,11615,11617,11622,11624,11629,11630,11634],{"type":38,"tag":72,"props":11612,"children":11613},{},[11614],{"type":43,"value":11548},{"type":43,"value":11616}," is the most common ",{"type":38,"tag":72,"props":11618,"children":11619},{},[11620],{"type":43,"value":11621},"Version Control System",{"type":43,"value":11623}," among developers nowadays. Based on the categories above, it belongs to the third category. So it is a ",{"type":38,"tag":72,"props":11625,"children":11626},{},[11627],{"type":43,"value":11628},"Distributed",{"type":43,"value":1149},{"type":38,"tag":72,"props":11631,"children":11632},{},[11633],{"type":43,"value":11621},{"type":43,"value":1063},{"type":38,"tag":39,"props":11636,"children":11637},{},[11638],{"type":43,"value":11639},"It is installed on a workstation and acts as a client and a server. Every developer has a local copy of the whole version history of the project on their machine. Git changes happen locally. So, the developers do not need to have a constant internet connection. When a developer has the code on the local workstation, the local operations are faster. ",{"type":38,"tag":46,"props":11641,"children":11643},{"id":11642},"about-svn-version-control",[11644],{"type":43,"value":11645},"About SVN Version Control",{"type":38,"tag":39,"props":11647,"children":11648},{},[11649,11651,11655,11657,11661],{"type":43,"value":11650},"SVN belongs to the second category above. So it is a ",{"type":38,"tag":72,"props":11652,"children":11653},{},[11654],{"type":43,"value":11593},{"type":43,"value":11656},". It means you need an internet connection to work with ",{"type":38,"tag":72,"props":11658,"children":11659},{},[11660],{"type":43,"value":11555},{"type":43,"value":11662},". It has a separate server and client. Only the files a developer is working on are available on the local machine, and the developer must be online, working with the server. Users check out files and commit changes back to the server. ",{"type":38,"tag":46,"props":11664,"children":11666},{"id":11665},"the-clash-of-the-two-vcs",[11667],{"type":43,"value":11668},"The Clash of the two VCS!",{"type":38,"tag":1759,"props":11670,"children":11671},{"id":6386},[11672],{"type":43,"value":11673},"Performance",{"type":38,"tag":39,"props":11675,"children":11676},{},[11677,11679,11683,11685,11689,11691,11695,11696,11701,11702,11707],{"type":43,"value":11678},"When it comes to ",{"type":38,"tag":72,"props":11680,"children":11681},{},[11682],{"type":43,"value":11548},{"type":43,"value":11684}," vs. ",{"type":38,"tag":72,"props":11686,"children":11687},{},[11688],{"type":43,"value":11555},{"type":43,"value":11690}," performance, the client-server model of ",{"type":38,"tag":72,"props":11692,"children":11693},{},[11694],{"type":43,"value":11555},{"type":43,"value":1149},{"type":38,"tag":72,"props":11697,"children":11698},{},[11699],{"type":43,"value":11700},"outperforms with larger files",{"type":43,"value":1149},{"type":38,"tag":72,"props":11703,"children":11704},{},[11705],{"type":43,"value":11706},"and codebases",{"type":43,"value":11708}," because SVN does not have issues with binary files compression. However, GIT is much faster with smaller files mainly because developers commit the changes locally, and they do not have to push the code to the remote server every time.",{"type":38,"tag":1759,"props":11710,"children":11712},{"id":11711},"permission",[11713],{"type":43,"value":11714},"Permission",{"type":38,"tag":39,"props":11716,"children":11717},{},[11718,11722],{"type":38,"tag":72,"props":11719,"children":11720},{},[11721],{"type":43,"value":11548},{"type":43,"value":11723}," assumes that all the contributors have the same permissions. ",{"type":38,"tag":39,"props":11725,"children":11726},{},[11727,11731],{"type":38,"tag":72,"props":11728,"children":11729},{},[11730],{"type":43,"value":11555},{"type":43,"value":11732}," allows you to specify, read and write access controls per file-level and per-directory level. ",{"type":38,"tag":1759,"props":11734,"children":11736},{"id":11735},"availability",[11737],{"type":43,"value":11738},"Availability",{"type":38,"tag":39,"props":11740,"children":11741},{},[11742,11744,11748,11749,11753],{"type":43,"value":11743},"Unlike ",{"type":38,"tag":72,"props":11745,"children":11746},{},[11747],{"type":43,"value":11555},{"type":43,"value":9809},{"type":38,"tag":72,"props":11750,"children":11751},{},[11752],{"type":43,"value":11548},{"type":43,"value":11754}," can work offline, allowing your team to continue working without losing features if they lose connection.",{"type":38,"tag":1759,"props":11756,"children":11758},{"id":11757},"single-point-failure",[11759],{"type":43,"value":11760},"Single Point Failure",{"type":38,"tag":39,"props":11762,"children":11763},{},[11764],{"type":43,"value":11765},"If the SVN central repository goes down or some code breaks the build, no one can commit their code until the repository recovers. With Git, developers can continue the work locally. They can commit the code, but the push can happen when the central repository works again.",{"type":38,"tag":46,"props":11767,"children":11768},{"id":675},[11769],{"type":43,"value":11770},"Conclusion & Closing**",{"type":38,"tag":39,"props":11772,"children":11773},{},[11774,11778,11780,11787],{"type":38,"tag":61,"props":11775,"children":11776},{"href":7016},[11777],{"type":43,"value":1016},{"type":43,"value":11779}," is a quick comparison of the most common version control systems. Pros and cons and in which situation we should prefer one or the other. Anyway, this one is ",{"type":38,"tag":61,"props":11781,"children":11784},{"href":11782,":target":1094,"rel":11783},"https://www.gitkraken.com/blog/git-vs-svn",[65],[11785],{"type":43,"value":11786},"another good comparison",{"type":43,"value":11788}," if you are interested.",{"title":8,"searchDepth":685,"depth":685,"links":11790},[11791,11794,11795,11796,11797],{"id":11527,"depth":685,"text":11530,"children":11792},[11793],{"id":11566,"depth":4447,"text":11569},{"id":11604,"depth":685,"text":11607},{"id":11642,"depth":685,"text":11645},{"id":11665,"depth":685,"text":11668},{"id":675,"depth":685,"text":11770},"content:blog-posts:version-control-comparison-with-git-and-svn.md","blog-posts/version-control-comparison-with-git-and-svn.md","blog-posts/version-control-comparison-with-git-and-svn",{"_path":9687,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11802,"description":11803,"seoTitle":11804,"seoDescription":11805,"keywords":11806,"image":4468,"alt":8,"ogImage":8,"tags":11811,"categories":11812,"published":25,"author":26,"link":9687,"date":11813,"sitemap":11814,"body":11819,"_type":693,"_id":12218,"_source":695,"_file":12219,"_stem":12220,"_extension":698},"What do I need to know about InertiaJS?","An essential guide to InertiaJS, understanding its core concepts, benefits, and when to use it for your projects.","InertiaJS Essentials: What You Need to Know","Discover the fundamentals of InertiaJS, how it works, and the benefits it brings to building modern web applications.",[11807,11808,11809,11810],"InertiaJS guide","InertiaJS overview","How to use InertiaJS","InertiaJS benefits",[4470,4174,4471,714],[21,23,4473,4474],"2022-01-09",{"loc":730,"lastmod":11813,"changefreq":30,"priority":31,"images":11815},[11816,11817],{"loc":4468},{"loc":11818},"/images/blog-posts/webpack-mix.png.webp",{"type":35,"children":11820,"toc":12207},[11821,11827,11840,11846,11884,11890,11906,11911,11934,11940,11948,11960,11966,11971,11979,11984,11992,11997,12002,12028,12042,12047,12055,12060,12068,12076,12081,12089,12095,12100,12108,12121,12129,12135,12148,12156,12162,12167,12175,12180,12185,12193,12197],{"type":38,"tag":46,"props":11822,"children":11824},{"id":11823},"intro-to-inertiajs",[11825],{"type":43,"value":11826},"Intro to InertiaJS",{"type":38,"tag":39,"props":11828,"children":11829},{},[11830,11832,11838],{"type":43,"value":11831},"In this note, I would like to go through how we can integrate ",{"type":38,"tag":61,"props":11833,"children":11835},{"href":7715,"rel":11834},[65],[11836],{"type":43,"value":11837},"IntertiaJS",{"type":43,"value":11839}," with Laravel 8.",{"type":38,"tag":46,"props":11841,"children":11843},{"id":11842},"what-is-that",[11844],{"type":43,"value":11845},"What is that?",{"type":38,"tag":53,"props":11847,"children":11848},{},[11849,11854,11859,11864,11869,11874,11879],{"type":38,"tag":57,"props":11850,"children":11851},{},[11852],{"type":43,"value":11853},"Inertia JS is for SPA without building an API.",{"type":38,"tag":57,"props":11855,"children":11856},{},[11857],{"type":43,"value":11858},"Instead, you reach classic server-side routing and controllers.",{"type":38,"tag":57,"props":11860,"children":11861},{},[11862],{"type":43,"value":11863},"Inertia does not link to Laravel either Vue.",{"type":38,"tag":57,"props":11865,"children":11866},{},[11867],{"type":43,"value":11868},"But it offers an adapter to Laravel and Vue or React.",{"type":38,"tag":57,"props":11870,"children":11871},{},[11872],{"type":43,"value":11873},"It is not sitting on the top of Vue.",{"type":38,"tag":57,"props":11875,"children":11876},{},[11877],{"type":43,"value":11878},"It is rather a glue/adapter for a server-side Framework like Laravel and a client-side Framework like Vue.",{"type":38,"tag":57,"props":11880,"children":11881},{},[11882],{"type":43,"value":11883},"So you will be able to use traditional Controllers, Routing, etc …",{"type":38,"tag":46,"props":11885,"children":11887},{"id":11886},"useful-links-about-inertiajs-and-integration",[11888],{"type":43,"value":11889},"Useful links about InertiaJS and integration",{"type":38,"tag":53,"props":11891,"children":11892},{},[11893],{"type":38,"tag":57,"props":11894,"children":11895},{},[11896,11898,11904],{"type":43,"value":11897},"[Install Debug tools for Chrome or Firefox.](",{"type":38,"tag":61,"props":11899,"children":11902},{"href":11900,"rel":11901},"https://chrome.google.com/webstore/detail/vuejs-",[65],[11903],{"type":43,"value":11900},{"type":43,"value":11905}," devtools/nhdogjmejiglipccpnnnanhbledajbpd)",{"type":38,"tag":39,"props":11907,"children":11908},{},[11909],{"type":43,"value":11910},"If you start an InertiaJS app from the ground then:",{"type":38,"tag":53,"props":11912,"children":11913},{},[11914,11924],{"type":38,"tag":57,"props":11915,"children":11916},{},[11917],{"type":38,"tag":61,"props":11918,"children":11921},{"href":11919,"rel":11920},"https://inertiajs.com/server-side-setup",[65],[11922],{"type":43,"value":11923},"Install Server Side Setup of InertjaJS.",{"type":38,"tag":57,"props":11925,"children":11926},{},[11927],{"type":38,"tag":61,"props":11928,"children":11931},{"href":11929,"rel":11930},"https://inertiajs.com/client-side-setup",[65],[11932],{"type":43,"value":11933},"Install Client/Front-End Side Setups of InertiaJS.",{"type":38,"tag":46,"props":11935,"children":11937},{"id":11936},"pre-requisites-for-the-integration",[11938],{"type":43,"value":11939},"Pre-requisites for the integration:",{"type":38,"tag":39,"props":11941,"children":11942},{},[11943],{"type":38,"tag":76,"props":11944,"children":11945},{},[11946],{"type":43,"value":11947},"You need to have these tools on your computer to be able to follow the steps below.",{"type":38,"tag":53,"props":11949,"children":11950},{},[11951,11955],{"type":38,"tag":57,"props":11952,"children":11953},{},[11954],{"type":43,"value":3624},{"type":38,"tag":57,"props":11956,"children":11957},{},[11958],{"type":43,"value":11959},"Laravel 8",{"type":38,"tag":46,"props":11961,"children":11963},{"id":11962},"integrate-inertiajs-into-the-laravel-framework-back-end",[11964],{"type":43,"value":11965},"Integrate InertiaJS into the Laravel Framework: Back-End",{"type":38,"tag":39,"props":11967,"children":11968},{},[11969],{"type":43,"value":11970},"Install the necessary package via composer command:",{"type":38,"tag":790,"props":11972,"children":11974},{"code":11973},"composer require inertiajs/inertia-laravel\n",[11975],{"type":38,"tag":559,"props":11976,"children":11977},{"__ignoreMap":8},[11978],{"type":43,"value":11973},{"type":38,"tag":39,"props":11980,"children":11981},{},[11982],{"type":43,"value":11983},"Set the Welcome blade:",{"type":38,"tag":790,"props":11985,"children":11987},{"code":11986},"\u003C!DOCTYPE html>\n    \u003Chtml>\n        \u003Chead>\n            \u003Cmeta charset=\"utf-8\" />\n            \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\" />\n            \u003Clink href=\"{{ mix('/css/app.css') }}\" rel=\"stylesheet\" />\n            \u003Cscript src=\"{{ mix('/js/app.js') }}\" defer>\u003C/script>\n        \u003C/head>\n    \u003Cbody>\n        @inertia\n    \u003C/body>\n\u003C/html>\n",[11988],{"type":38,"tag":559,"props":11989,"children":11990},{"__ignoreMap":8},[11991],{"type":43,"value":11986},{"type":38,"tag":39,"props":11993,"children":11994},{},[11995],{"type":43,"value":11996},"It is worth mentioning that we are adding here the @inertia directive to the template. That makes it possible to render the content via InertiaJS. Because of InertiaJS, we can execute Ajax calls from the Front-End without implementing an API endpoint. To provide default data on the first-page load InertaJS will generate initial data into the data-page attribute of the main app div in the HTML code. This main app div will be the main content div. This main app div will be generated to the output instead of the @inertia directive.",{"type":38,"tag":39,"props":11998,"children":11999},{},[12000],{"type":43,"value":12001},"Setting up the Mix",{"type":38,"tag":39,"props":12003,"children":12004},{},[12005,12012,12014,12019,12021,12026],{"type":38,"tag":61,"props":12006,"children":12009},{"href":12007,"rel":12008,":target":1094},"https://webpack.js.org/",[65],[12010],{"type":43,"value":12011},"Webpack",{"type":43,"value":12013}," is an incredibly powerful module bundler that prepares your JavaScript and assets for the browser. The only understandable downside is that it requires a bit of a learning curve. To flatten the learning curve, Laravel Framework has a Mix tool. This Mix tool is a thin layer on top of the Webpack. To be able to generate the JS and assets codes we need to configure the default mix settings for InertiaJS based on the screenshot below. After these modifications, the ",{"type":38,"tag":72,"props":12015,"children":12016},{},[12017],{"type":43,"value":12018},"npx mix",{"type":43,"value":12020}," and the ",{"type":38,"tag":72,"props":12022,"children":12023},{},[12024],{"type":43,"value":12025},"npx mix watch",{"type":43,"value":12027}," commands will generate the necessary output for our InertiaJS application.",{"type":38,"tag":2148,"props":12029,"children":12030},{"style":2150},[12031,12032,12036,12037],{"type":43,"value":2153},{"type":38,"tag":1885,"props":12033,"children":12035},{"style":2156,"src":11818,"alt":12034},"Configure Laravel Mix for InertiaJS in the webpack.mix.js file",[],{"type":43,"value":2153},{"type":38,"tag":39,"props":12038,"children":12040},{"className":12039},[4663],[12041],{"type":43,"value":12034},{"type":38,"tag":39,"props":12043,"children":12044},{},[12045],{"type":43,"value":12046},"Set the Middleware:",{"type":38,"tag":790,"props":12048,"children":12050},{"code":12049},"php artisan inertia:middleware\n",[12051],{"type":38,"tag":559,"props":12052,"children":12053},{"__ignoreMap":8},[12054],{"type":43,"value":12049},{"type":38,"tag":39,"props":12056,"children":12057},{},[12058],{"type":43,"value":12059},"Registration in the Kernel:",{"type":38,"tag":53,"props":12061,"children":12062},{},[12063],{"type":38,"tag":57,"props":12064,"children":12065},{},[12066],{"type":43,"value":12067},"Register the HandleInertia request middleware in your App\\Http\\Kernel, as the last item in your web middleware group",{"type":38,"tag":790,"props":12069,"children":12071},{"code":12070},"'web' => [\n// ...\n\\App\\Http\\Middleware\\HandleInertiaRequests::class,\n],\n",[12072],{"type":38,"tag":559,"props":12073,"children":12074},{"__ignoreMap":8},[12075],{"type":43,"value":12070},{"type":38,"tag":39,"props":12077,"children":12078},{},[12079],{"type":43,"value":12080},"Set Inertia response in a method like:",{"type":38,"tag":790,"props":12082,"children":12084},{"code":12083},"Set Inertia response in a method like:\nuse Inertia\\Inertia;\n\nclass EventsController extends Controller\n{\n    public function show(Event $event)\n    {\n        return Inertia::render('Event/Show', [\n            'event' => $event->only(\n            'id',\n            'title',\n            'start_date',\n            'description'\n        ),\n        ]);\n    }\n}\n",[12085],{"type":38,"tag":559,"props":12086,"children":12087},{"__ignoreMap":8},[12088],{"type":43,"value":12083},{"type":38,"tag":46,"props":12090,"children":12092},{"id":12091},"integrate-inertiajs-into-the-laravel-framework-front-end",[12093],{"type":43,"value":12094},"Integrate InertiaJS into the Laravel Framework: Front-End",{"type":38,"tag":39,"props":12096,"children":12097},{},[12098],{"type":43,"value":12099},"Install the following npm packages",{"type":38,"tag":790,"props":12101,"children":12103},{"code":12102},"npm install @inertiajs/inertia\nnpm install vue@next\nnpm install -D @vue/compiler-sfc\n",[12104],{"type":38,"tag":559,"props":12105,"children":12106},{"__ignoreMap":8},[12107],{"type":43,"value":12102},{"type":38,"tag":2705,"props":12109,"children":12110},{},[12111],{"type":38,"tag":39,"props":12112,"children":12113},{},[12114,12116,12119],{"type":43,"value":12115},"For me the installation was not successful at first and I could not run the mix command.",{"type":38,"tag":1303,"props":12117,"children":12118},{},[],{"type":43,"value":12120},"\nI used the following commands under (Ubuntu 20.04) that fixed my problems in the end.",{"type":38,"tag":790,"props":12122,"children":12124},{"code":12123},"npm install vue-loader@^16.2.0 --save-dev --legacy-peer-deps\nrm -rf node_modules/\nnpm clean-install\n",[12125],{"type":38,"tag":559,"props":12126,"children":12127},{"__ignoreMap":8},[12128],{"type":43,"value":12123},{"type":38,"tag":46,"props":12130,"children":12132},{"id":12131},"deleting-and-file-renaming-in-laravel",[12133],{"type":43,"value":12134},"Deleting and file renaming in Laravel:",{"type":38,"tag":53,"props":12136,"children":12137},{},[12138,12143],{"type":38,"tag":57,"props":12139,"children":12140},{},[12141],{"type":43,"value":12142},"Delete app/resources/bootstrap.js",{"type":38,"tag":57,"props":12144,"children":12145},{},[12146],{"type":43,"value":12147},"Delete the content of the app/resources/js/app.js file and replace it with the following code:",{"type":38,"tag":790,"props":12149,"children":12151},{"code":12150},"import {createApp, h} from 'vue'\nimport {createInertiaApp} from '@inertiajs/inertia-vue3'\n\ncreateInertiaApp({\n    resolve: name => require(`./Pages/${name}`),\n      setup({el, App, props, plugin}) {\n          createApp({render: () => h(App, props)})\n          .use(plugin)\n          .mount(el)\n      },\n});\n",[12152],{"type":38,"tag":559,"props":12153,"children":12154},{"__ignoreMap":8},[12155],{"type":43,"value":12150},{"type":38,"tag":46,"props":12157,"children":12159},{"id":12158},"lets-check-how-it-works",[12160],{"type":43,"value":12161},"Let's check how it works:",{"type":38,"tag":39,"props":12163,"children":12164},{},[12165],{"type":43,"value":12166},"To make InertiaJS work, we need to return the data in a specific render method. It looks similar to the blade template\nstructure, but it is for InertiaJS. Let's create this route in the web.php file of the Laravel Framework.",{"type":38,"tag":790,"props":12168,"children":12170},{"code":12169}," Route::get('/', function () {\n    // The Vue Template name should be capital because of convention\n    return Inertia::render('Home', [\n       'name' => 'Adam Biro',\n    ]);\n });\n",[12171],{"type":38,"tag":559,"props":12172,"children":12173},{"__ignoreMap":8},[12174],{"type":43,"value":12169},{"type":38,"tag":39,"props":12176,"children":12177},{},[12178],{"type":43,"value":12179},"When we added the snippet in the app.js file, we defined the path of the inertia rendering. We set it in the 'require'\nmethod as param. Because we have defined a 'Page' in the path, we need to create that Page directory. Se lets define it\nto have that path: '/resources/js/Pages/'.",{"type":38,"tag":39,"props":12181,"children":12182},{},[12183],{"type":43,"value":12184},"To access the name property on the Front-End, we need to create a Vue template file. So let's create the\n'resources/js/Pages/Home.vue' file and pass this snippet there. The template and the script tags are mandatory because\nthat is a Vue convention. Sometimes we need to extend a Vue file with specific CSS-related code. In that case, we can add\nthe style tag into the Vue file.",{"type":38,"tag":790,"props":12186,"children":12188},{"code":12187},"\u003Ctemplate>\n    \u003Ch1>Hello, {{name}}\u003C/h1>\n\u003C/template>\n\u003Cscript>\nexport default {\n    props:{\n        name: String,\n    }\n};\n\u003C/script>\n",[12189],{"type":38,"tag":559,"props":12190,"children":12191},{"__ignoreMap":8},[12192],{"type":43,"value":12187},{"type":38,"tag":46,"props":12194,"children":12195},{"id":675},[12196],{"type":43,"value":9679},{"type":38,"tag":39,"props":12198,"children":12199},{},[12200,12205],{"type":38,"tag":61,"props":12201,"children":12202},{"href":9687},[12203],{"type":43,"value":12204},"After these steps above",{"type":43,"value":12206}," we have a functional InertjaJS environment\nthat is integrated into Laravel and tested. We should see the dummy name on the output so we can start playing with it more.",{"title":8,"searchDepth":685,"depth":685,"links":12208},[12209,12210,12211,12212,12213,12214,12215,12216,12217],{"id":11823,"depth":685,"text":11826},{"id":11842,"depth":685,"text":11845},{"id":11886,"depth":685,"text":11889},{"id":11936,"depth":685,"text":11939},{"id":11962,"depth":685,"text":11965},{"id":12091,"depth":685,"text":12094},{"id":12131,"depth":685,"text":12134},{"id":12158,"depth":685,"text":12161},{"id":675,"depth":685,"text":9679},"content:blog-posts:what-do-i-need-to-know-about-inertiajs.md","blog-posts/what-do-i-need-to-know-about-inertiajs.md","blog-posts/what-do-i-need-to-know-about-inertiajs",{"_path":418,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":12222,"description":12223,"seoTitle":12224,"seoDescription":12225,"keywords":12226,"image":12231,"alt":1268,"ogImage":12231,"tags":12232,"categories":12235,"published":25,"author":26,"link":418,"date":12236,"sitemap":12237,"body":12241,"_type":693,"_id":12582,"_source":695,"_file":12583,"_stem":12584,"_extension":698},"What is a Closure in Computer Programming?","Understand the concept of closures in computer programming, how they work, and their applications in various programming languages.","Closures in Programming: Explanation & Examples","Learn about closures in programming, their inner workings, and why they are so essential in languages like JavaScript and Python.",[12227,12228,12229,12230],"Closures in programming","what is a closure","closures in JavaScript","closures explained","/images/blog-posts/large.webp",[12233,12234,23],"closure","lambda",[12233,12234,23],"2022-03-10",{"loc":12238,"lastmod":12236,"changefreq":30,"priority":31,"images":12239},"/blog-posts/what-is-a-closure-in-computer-programming/",[12240],{"loc":12231},{"type":35,"children":12242,"toc":12576},[12243,12288,12294,12299,12338,12346,12354,12387,12395,12403,12409,12420,12428,12434,12451,12475,12483,12501,12511,12522,12530,12535,12540,12548,12553,12558,12566,12571],{"type":38,"tag":39,"props":12244,"children":12245},{},[12246,12248,12258,12260,12269,12270,12279,12281,12286],{"type":43,"value":12247},"To understand the concept of closure, we need to know the differences between the\n",{"type":38,"tag":61,"props":12249,"children":12252},{":target":1094,"href":12250,"rel":12251},"https://www.geeksforgeeks.org/static-and-dynamic-scoping/",[65],[12253],{"type":38,"tag":72,"props":12254,"children":12255},{},[12256],{"type":43,"value":12257},"static",{"type":43,"value":12259}," \n",{"type":38,"tag":61,"props":12261,"children":12263},{":target":1094,"href":12250,"rel":12262},[65],[12264],{"type":38,"tag":72,"props":12265,"children":12266},{},[12267],{"type":43,"value":12268},"scope",{"type":43,"value":12259},{"type":38,"tag":61,"props":12271,"children":12273},{":target":1094,"href":12250,"rel":12272},[65],[12274],{"type":38,"tag":72,"props":12275,"children":12276},{},[12277],{"type":43,"value":12278},"and dynamic scope",{"type":43,"value":12280}," \nBesides, we need to know what is a ",{"type":38,"tag":72,"props":12282,"children":12283},{},[12284],{"type":43,"value":12285},"Lambda",{"type":43,"value":12287}," function also. These terms are the preconditions to dive into the Closure term.",{"type":38,"tag":46,"props":12289,"children":12291},{"id":12290},"static-or-lexical-vs-dynamic-scoping",[12292],{"type":43,"value":12293},"Static or Lexical vs. Dynamic scoping",{"type":38,"tag":39,"props":12295,"children":12296},{},[12297],{"type":43,"value":12298},"In programming, we divide scoping into two classes:",{"type":38,"tag":53,"props":12300,"children":12301},{},[12302],{"type":38,"tag":57,"props":12303,"children":12304},{},[12305,12310],{"type":38,"tag":72,"props":12306,"children":12307},{},[12308],{"type":43,"value":12309},"Static Scoping",{"type":38,"tag":53,"props":12311,"children":12312},{},[12313],{"type":38,"tag":57,"props":12314,"children":12315},{},[12316,12318,12323,12325,12330,12332,12336],{"type":43,"value":12317},"In ",{"type":38,"tag":72,"props":12319,"children":12320},{},[12321],{"type":43,"value":12322},"Static scoping",{"type":43,"value":12324}," or ",{"type":38,"tag":72,"props":12326,"children":12327},{},[12328],{"type":43,"value":12329},"lexical scoping",{"type":43,"value":12331}," a variable always refers to its top-level environment. This is a property of the program text and unrelated to the run-time call stack. ",{"type":38,"tag":72,"props":12333,"children":12334},{},[12335],{"type":43,"value":12322},{"type":43,"value":12337}," also makes it much easier to make a modular code. A programmer can figure out the scope just by looking at the code.",{"type":38,"tag":790,"props":12339,"children":12341},{"code":12340},"// A C program to demonstrate static scoping. \n#include\u003Cstdio.h> \nint x = 10; \n  \n// Called by g() \nint f() \n{ \n   return x; \n} \n  \n// g() has its own variable \n// named as x and calls f() \nint g() \n{ \n   int x = 20; \n   return f(); \n} \n  \nint main() \n{ \n  printf(\"%d\", g()); \n  printf(\"\\n\"); \n  return 0; \n} \n",[12342],{"type":38,"tag":559,"props":12343,"children":12344},{"__ignoreMap":8},[12345],{"type":43,"value":12340},{"type":38,"tag":790,"props":12347,"children":12349},{"code":12348},"// Output\n10\n",[12350],{"type":38,"tag":559,"props":12351,"children":12352},{"__ignoreMap":8},[12353],{"type":43,"value":12348},{"type":38,"tag":53,"props":12355,"children":12356},{},[12357],{"type":38,"tag":57,"props":12358,"children":12359},{},[12360,12365,12367,12372],{"type":38,"tag":72,"props":12361,"children":12362},{},[12363],{"type":43,"value":12364},"Dynamic",{"type":43,"value":12366}," ",{"type":38,"tag":72,"props":12368,"children":12369},{},[12370],{"type":43,"value":12371},"Scoping",{"type":38,"tag":53,"props":12373,"children":12374},{},[12375],{"type":38,"tag":57,"props":12376,"children":12377},{},[12378,12380,12385],{"type":43,"value":12379},"With ",{"type":38,"tag":72,"props":12381,"children":12382},{},[12383],{"type":43,"value":12384},"dynamic scope",{"type":43,"value":12386},", a global identifier refers to the identifier associated with the most recent environment and is uncommon in modern languages. In technical terms, this means that each identifier has a global stack of bindings and the occurrence of an identifier is searched in the most recent binding.",{"type":38,"tag":790,"props":12388,"children":12390},{"code":12389},"// Since dynamic scoping is very uncommon in  \n// the familiar languages, we consider the  \n// following pseudo code as our example. It \n// prints 20 in a language that uses dynamic \n// scoping.    \n  \nint x = 10; \n  \n// Called by g() \nint f() \n{ \n   return x; \n} \n  \n// g() has its own variable \n// named as x and calls f() \nint g() \n{ \n   int x = 20; \n   return f(); \n} \n  \nmain() \n{ \n  printf(g()); \n}\n",[12391],{"type":38,"tag":559,"props":12392,"children":12393},{"__ignoreMap":8},[12394],{"type":43,"value":12389},{"type":38,"tag":790,"props":12396,"children":12398},{"code":12397},"// Output\n20\n",[12399],{"type":38,"tag":559,"props":12400,"children":12401},{"__ignoreMap":8},[12402],{"type":43,"value":12397},{"type":38,"tag":46,"props":12404,"children":12406},{"id":12405},"so-what-is-a-lambda-function",[12407],{"type":43,"value":12408},"So what is a Lambda function?",{"type":38,"tag":39,"props":12410,"children":12411},{},[12412,12414,12418],{"type":43,"value":12413},"Because the function has no name, you can’t use it as a regular function. Instead, you must either assign it to a variable or pass it to another function as an argument. So ",{"type":38,"tag":72,"props":12415,"children":12416},{},[12417],{"type":43,"value":12285},{"type":43,"value":12419}," is an anonymous function.",{"type":38,"tag":790,"props":12421,"children":12423},{"code":12422},"// Anonymous function assigned to variable\n$greeting = function () {\n return \"Hello world\";\n}\n\n// Call function\necho $greeting();\n// Returns \"Hello world\"\n",[12424],{"type":38,"tag":559,"props":12425,"children":12426},{"__ignoreMap":8},[12427],{"type":43,"value":12422},{"type":38,"tag":46,"props":12429,"children":12431},{"id":12430},"what-is-a-closure-then",[12432],{"type":43,"value":12433},"What is a Closure then?",{"type":38,"tag":39,"props":12435,"children":12436},{},[12437,12438,12443,12445,12449],{"type":43,"value":10531},{"type":38,"tag":72,"props":12439,"children":12440},{},[12441],{"type":43,"value":12442},"Closure",{"type":43,"value":12444}," is essentially the same as a ",{"type":38,"tag":72,"props":12446,"children":12447},{},[12448],{"type":43,"value":12285},{"type":43,"value":12450},", apart from it can access variables outside the scope of the closure. The most understandable definition for closure would be this:",{"type":38,"tag":39,"props":12452,"children":12453},{},[12454,12456,12460,12462,12467,12469,12473],{"type":43,"value":12455},"“",{"type":38,"tag":72,"props":12457,"children":12458},{},[12459],{"type":43,"value":12442},{"type":43,"value":12461}," is when a function “remembers” its ",{"type":38,"tag":72,"props":12463,"children":12464},{},[12465],{"type":43,"value":12466},"lexical scope",{"type":43,"value":12468}," even when the function is executed outside that ",{"type":38,"tag":72,"props":12470,"children":12471},{},[12472],{"type":43,"value":12466},{"type":43,"value":12474},"”.",{"type":38,"tag":790,"props":12476,"children":12478},{"code":12477},"// Create a user  \n$user = \"Philip\";\n\n// Create a Closure  \n$greeting = function() use ($user) {  \necho \"Hello $user\";  \n};\n\n// Greet the user  \n$greeting(); // Returns \"Hello Philip\"\n",[12479],{"type":38,"tag":559,"props":12480,"children":12481},{"__ignoreMap":8},[12482],{"type":43,"value":12477},{"type":38,"tag":39,"props":12484,"children":12485},{},[12486,12488,12492,12494,12499],{"type":43,"value":12487},"As you can see above, the ",{"type":38,"tag":72,"props":12489,"children":12490},{},[12491],{"type":43,"value":12442},{"type":43,"value":12493}," is able to access the $user variable. because it was declared in the use clause of the ",{"type":38,"tag":72,"props":12495,"children":12496},{},[12497],{"type":43,"value":12498},"Closure function",{"type":43,"value":12500}," definition.",{"type":38,"tag":39,"props":12502,"children":12503},{},[12504,12509],{"type":38,"tag":72,"props":12505,"children":12506},{},[12507],{"type":43,"value":12508},"Closures",{"type":43,"value":12510}," are useful when you want to make more complicated synchronous operations by containing an external state within an inner function expression.",{"type":38,"tag":39,"props":12512,"children":12513},{},[12514,12516,12520],{"type":43,"value":12515},"If you were to alter the $user variable within the ",{"type":38,"tag":72,"props":12517,"children":12518},{},[12519],{"type":43,"value":12442},{"type":43,"value":12521},", it would not affect the original variable. To update the original variable, we can append an ampersand. An ampersand before a variable means this is a reference and so the original variable is also updated.",{"type":38,"tag":790,"props":12523,"children":12525},{"code":12524},"// Set counter  \n$i = 0;  \n// Increase counter within the scope  \n// of the function  \n$closure = function () use ($i){ $i++; };  \n// Run the function  \n$closure();  \n// The global count hasn’t changed  \necho $i; // Returns 0\n\n// Reset count  \n$i = 0;  \n// Increase counter within the scope  \n// of the function but pass it as a reference  \n$closure = function () use (&$i){ $i++; };  \n// Run the function  \n$closure();  \n// The global count has increased  \necho $i; // Returns 1  \n",[12526],{"type":38,"tag":559,"props":12527,"children":12528},{"__ignoreMap":8},[12529],{"type":43,"value":12524},{"type":38,"tag":39,"props":12531,"children":12532},{},[12533],{"type":43,"value":12534},"Closures are also useful when using PHP functions that accept a callback function like array_map, array_filter, array_reduce, or array_walk.",{"type":38,"tag":39,"props":12536,"children":12537},{},[12538],{"type":43,"value":12539},"The array_walk function takes an array and runs it through the callback function.",{"type":38,"tag":790,"props":12541,"children":12543},{"code":12542},"// An array of names  \n$users = array(\"John\", \"Jane\", \"Sally\", \"Philip\");\n\n// Pass the array to array_walk  \narray_walk($users, function ($name) {  \necho \"Hello $name\u003Cbr>\";  \n});  \n// Returns  \n// -> Hello John  \n// -> Hello Jane  \n// -> .. \n",[12544],{"type":38,"tag":559,"props":12545,"children":12546},{"__ignoreMap":8},[12547],{"type":43,"value":12542},{"type":38,"tag":46,"props":12549,"children":12550},{"id":1573},[12551],{"type":43,"value":12552},"Conclusion and Closing",{"type":38,"tag":39,"props":12554,"children":12555},{},[12556],{"type":43,"value":12557},"In this post, I have tried to clarify what is Lambda and what is Closure. To summarize this in a topic, let's check the following example:",{"type":38,"tag":790,"props":12559,"children":12561},{"code":12560},"function ($quantity, $product) use ($tax, &$total)\n",[12562],{"type":38,"tag":559,"props":12563,"children":12564},{"__ignoreMap":8},[12565],{"type":43,"value":12560},{"type":38,"tag":39,"props":12567,"children":12568},{},[12569],{"type":43,"value":12570},"With closures, to access variables that are outside the context of the function you need to explicitly grant permission to the function using the use function. What it means, in this case, is that you're granting the function access to the $tax and $total variables.",{"type":38,"tag":39,"props":12572,"children":12573},{},[12574],{"type":43,"value":12575},"Another thing to point out is that $tax is passed as a copy while $total is passed by reference (by appending the & sign in front). Passing by reference allows the closure to modify the value of the variable. Any changes to the value of $tax, in this case, will only be effective within the closure while the real value of $total will change outside as well.",{"title":8,"searchDepth":685,"depth":685,"links":12577},[12578,12579,12580,12581],{"id":12290,"depth":685,"text":12293},{"id":12405,"depth":685,"text":12408},{"id":12430,"depth":685,"text":12433},{"id":1573,"depth":685,"text":12552},"content:blog-posts:what-is-a-closure-in-computer-programming.md","blog-posts/what-is-a-closure-in-computer-programming.md","blog-posts/what-is-a-closure-in-computer-programming",{"_path":12586,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":12587,"description":12588,"seoTitle":12589,"seoDescription":12590,"keywords":12591,"image":6387,"alt":1268,"ogImage":6387,"tags":12596,"categories":12598,"published":25,"author":26,"link":12586,"date":12600,"sitemap":12601,"body":12605,"_type":693,"_id":12801,"_source":695,"_file":12802,"_stem":12803,"_extension":698},"/blog-posts/what-is-nuxtjs-framework-for-why-we-should-use-it","What is the NuxtJS Framework for & Why We Should Use It?","Get an overview of the NuxtJS framework, its purpose, features, and why it's a great tool for building Vue.js applications.","NuxtJS Framework: Overview & Benefits","Learn about NuxtJS, its features, and how it simplifies building powerful Vue.js applications with server-side rendering and more.",[12592,12593,12594,12595],"NuxtJS framework overview","NuxtJS benefits","Vue.js framework","Why use NuxtJS",[714,12597],"nuxt",[12599,21,12597,10952,4474],"technologies","2022-02-06",{"loc":12602,"lastmod":12600,"changefreq":30,"priority":31,"images":12603},"/blog-posts/what-is-nuxtjs-framework-for-why-we-should-use-it/",[12604],{"loc":6387},{"type":35,"children":12606,"toc":12794},[12607,12613,12625,12631,12636,12641,12646,12652,12657,12675,12681,12700,12706,12717,12723,12728,12785,12789],{"type":38,"tag":46,"props":12608,"children":12610},{"id":12609},"introduction-to-nuxtjs-framework",[12611],{"type":43,"value":12612},"Introduction to NuxtJS Framework",{"type":38,"tag":39,"props":12614,"children":12615},{},[12616,12623],{"type":38,"tag":61,"props":12617,"children":12620},{":target":1094,"href":12618,"rel":12619},"https://nuxtjs.org/",[65],[12621],{"type":43,"value":12622},"NuxtJS",{"type":43,"value":12624}," is a progressive JS framework based on VueJS to create modern web applications. It is a top layer above VueJS. NuxtJS goal is to make web development performant with good developer experience in mind.",{"type":38,"tag":46,"props":12626,"children":12628},{"id":12627},"what-is-the-purpose-nuxtjs-framework-on-the-top-of-vuejs",[12629],{"type":43,"value":12630},"What is the purpose NuxtJS Framework on the top of VueJS?",{"type":38,"tag":39,"props":12632,"children":12633},{},[12634],{"type":43,"value":12635},"All the common JavaScript Frameworks like Angular, React, VueJS populate the content of their pages dynamically. ",{"type":38,"tag":39,"props":12637,"children":12638},{},[12639],{"type":43,"value":12640},"So these Frameworks achieve client-side rendering that is bad from an SEO point of view. Eg. the Google search engine finishes with the page crawling of the page, but our content is still not available there. That is because these Frameworks just started injecting the content only. ",{"type":38,"tag":39,"props":12642,"children":12643},{},[12644],{"type":43,"value":12645},"Different framework implementations try to provide an SEO-friendly webpage using unique solutions to solve the problem. NuxtJS is one solution for server-side rendering. This approach is compatible with the VUEJS Framework. So this is the reason why Nuxt JS sits on the top of VUE.js.",{"type":38,"tag":46,"props":12647,"children":12649},{"id":12648},"what-are-the-benefits-of-nuxtjs",[12650],{"type":43,"value":12651},"What are the benefits of NuxtJS?",{"type":38,"tag":39,"props":12653,"children":12654},{},[12655],{"type":43,"value":12656},"Developers who designed NuxtJS give you an architecture to follow the official VueJS guidelines. You can create everything from static landing pages to complex enterprise-ready web applications. Furthermore, it supports different targets (server, serverless or static), and the server-side rendering feature is switchable also.",{"type":38,"tag":39,"props":12658,"children":12659},{},[12660,12662,12667,12668,12673],{"type":43,"value":12661},"It is extendable with a module system. So you can connect it to your REST or GraphQL endpoints. It also communicates with your favorite CMS and CSS frameworks. Furthermore, the ",{"type":38,"tag":72,"props":12663,"children":12664},{},[12665],{"type":43,"value":12666},"PWA",{"type":43,"value":11550},{"type":38,"tag":72,"props":12669,"children":12670},{},[12671],{"type":43,"value":12672},"AMP",{"type":43,"value":12674}," support is only a module away from your NuxtJS project.",{"type":38,"tag":46,"props":12676,"children":12678},{"id":12677},"wait-what-is-pwa",[12679],{"type":43,"value":12680},"Wait! What is PWA?",{"type":38,"tag":39,"props":12682,"children":12683},{},[12684,12691,12693,12698],{"type":38,"tag":61,"props":12685,"children":12688},{":target":1094,"href":12686,"rel":12687},"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps",[65],[12689],{"type":43,"value":12690},"Progressive Web Apps (PWA)",{"type":43,"value":12692}," are built and enhanced with modern APIs to deliver native-like capabilities, reliability, and installability while reaching ",{"type":38,"tag":76,"props":12694,"children":12695},{},[12696],{"type":43,"value":12697},"anyone, anywhere, on any device",{"type":43,"value":12699}," with a single codebase.",{"type":38,"tag":1759,"props":12701,"children":12703},{"id":12702},"and-what-is-an-amp",[12704],{"type":43,"value":12705},"And what is an AMP?",{"type":38,"tag":39,"props":12707,"children":12708},{},[12709,12715],{"type":38,"tag":61,"props":12710,"children":12713},{":target":1094,"href":12711,"rel":12712},"https://amp.dev/",[65],[12714],{"type":43,"value":12672},{"type":43,"value":12716}," is a simple and robust web components framework. It makes it easy to build fast websites that are user-first experiences for the web.",{"type":38,"tag":1759,"props":12718,"children":12720},{"id":12719},"what-type-of-applications-can-we-build-with-nuxtjs",[12721],{"type":43,"value":12722},"What type of applications can we build with NuxtJS?",{"type":38,"tag":39,"props":12724,"children":12725},{},[12726],{"type":43,"value":12727},"NuxtJS allows us to create three types of applications, depending on our purpose.",{"type":38,"tag":53,"props":12729,"children":12730},{},[12731,12749,12772],{"type":38,"tag":57,"props":12732,"children":12733},{},[12734,12736],{"type":43,"value":12735},"Static Generated Pages (Pre-rendering)\n",{"type":38,"tag":53,"props":12737,"children":12738},{},[12739,12744],{"type":38,"tag":57,"props":12740,"children":12741},{},[12742],{"type":43,"value":12743},"They do not require API calls to fetch data",{"type":38,"tag":57,"props":12745,"children":12746},{},[12747],{"type":43,"value":12748},"The page contains the data already",{"type":38,"tag":57,"props":12750,"children":12751},{},[12752,12754],{"type":43,"value":12753},"Single Page Application (SAP)\n",{"type":38,"tag":53,"props":12755,"children":12756},{},[12757,12762,12767],{"type":38,"tag":57,"props":12758,"children":12759},{},[12760],{"type":43,"value":12761},"Most of the JavaScript frameworks are single-page applications",{"type":38,"tag":57,"props":12763,"children":12764},{},[12765],{"type":43,"value":12766},"The content is dynamically populated",{"type":38,"tag":57,"props":12768,"children":12769},{},[12770],{"type":43,"value":12771},"Most of the SPAs use the HTML5 history API or the location HASH for routing",{"type":38,"tag":57,"props":12773,"children":12774},{},[12775,12777],{"type":43,"value":12776},"Server Side Rendered Applications (SSR)\n",{"type":38,"tag":53,"props":12778,"children":12779},{},[12780],{"type":38,"tag":57,"props":12781,"children":12782},{},[12783],{"type":43,"value":12784},"Fetching and displaying the client-side data on the server to set a fully rendered SEO-friendly page to the client.",{"type":38,"tag":46,"props":12786,"children":12787},{"id":675},[12788],{"type":43,"value":678},{"type":38,"tag":39,"props":12790,"children":12791},{},[12792],{"type":43,"value":12793},"This post tried clarifying some basic info of NUXT.js that provides server-side rendering for the VUE.JS Framework. As I detailed above, the benefit of using makes faster page loads and helps our page in SEO ranking.",{"title":8,"searchDepth":685,"depth":685,"links":12795},[12796,12797,12798,12799,12800],{"id":12609,"depth":685,"text":12612},{"id":12627,"depth":685,"text":12630},{"id":12648,"depth":685,"text":12651},{"id":12677,"depth":685,"text":12680},{"id":675,"depth":685,"text":678},"content:blog-posts:what-is-nuxtjs-framework-for-why-we-should-use-it.md","blog-posts/what-is-nuxtjs-framework-for-why-we-should-use-it.md","blog-posts/what-is-nuxtjs-framework-for-why-we-should-use-it",[12805,13358,13620,13786,14058,14200,14571,14684,14885,15037,15229,15352,15521,15618,15711,15894,16039,16265,16489,16757,17052,17784,18143,18307,18429,18727,18851,18968,19294,19490,20151,20285,20451,20568,21273,21424,21739,21876,22106,22441,22727],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"seoTitle":11,"seoDescription":12,"keywords":12806,"image":18,"alt":19,"ogImage":18,"tags":12807,"categories":12808,"published":25,"author":26,"link":5,"date":27,"sitemap":12809,"body":12812,"_type":693,"_id":694,"_source":695,"_file":696,"_stem":697,"_extension":698},[14,15,16,17],[21,22,23],[21,22,23],{"loc":29,"lastmod":27,"changefreq":30,"priority":31,"images":12810},[12811],{"loc":18},{"type":35,"children":12813,"toc":13350},[12814,12818,12822,12954,12958,12962,13059,13063,13067,13106,13110,13114,13172,13176,13180,13342,13346],{"type":38,"tag":39,"props":12815,"children":12816},{},[12817],{"type":43,"value":44},{"type":38,"tag":46,"props":12819,"children":12820},{"id":48},[12821],{"type":43,"value":51},{"type":38,"tag":53,"props":12823,"children":12824},{},[12825,12833],{"type":38,"tag":57,"props":12826,"children":12827},{},[12828],{"type":38,"tag":61,"props":12829,"children":12831},{"href":63,"rel":12830},[65],[12832],{"type":43,"value":63},{"type":38,"tag":57,"props":12834,"children":12835},{},[12836,12843],{"type":38,"tag":72,"props":12837,"children":12838},{},[12839],{"type":38,"tag":76,"props":12840,"children":12841},{},[12842],{"type":43,"value":80},{"type":38,"tag":82,"props":12844,"children":12845},{},[12846,12856,12866,12876,12886,12896,12906,12910,12914,12918,12922,12926,12930,12934,12938,12942,12946,12950],{"type":38,"tag":57,"props":12847,"children":12848},{},[12849],{"type":38,"tag":72,"props":12850,"children":12851},{},[12852],{"type":38,"tag":76,"props":12853,"children":12854},{},[12855],{"type":43,"value":95},{"type":38,"tag":57,"props":12857,"children":12858},{},[12859],{"type":38,"tag":72,"props":12860,"children":12861},{},[12862],{"type":38,"tag":76,"props":12863,"children":12864},{},[12865],{"type":43,"value":106},{"type":38,"tag":57,"props":12867,"children":12868},{},[12869],{"type":38,"tag":72,"props":12870,"children":12871},{},[12872],{"type":38,"tag":76,"props":12873,"children":12874},{},[12875],{"type":43,"value":117},{"type":38,"tag":57,"props":12877,"children":12878},{},[12879],{"type":38,"tag":72,"props":12880,"children":12881},{},[12882],{"type":38,"tag":76,"props":12883,"children":12884},{},[12885],{"type":43,"value":128},{"type":38,"tag":57,"props":12887,"children":12888},{},[12889],{"type":38,"tag":72,"props":12890,"children":12891},{},[12892],{"type":38,"tag":76,"props":12893,"children":12894},{},[12895],{"type":43,"value":139},{"type":38,"tag":57,"props":12897,"children":12898},{},[12899],{"type":38,"tag":72,"props":12900,"children":12901},{},[12902],{"type":38,"tag":76,"props":12903,"children":12904},{},[12905],{"type":43,"value":150},{"type":38,"tag":57,"props":12907,"children":12908},{},[12909],{"type":43,"value":155},{"type":38,"tag":57,"props":12911,"children":12912},{},[12913],{"type":43,"value":160},{"type":38,"tag":57,"props":12915,"children":12916},{},[12917],{"type":43,"value":165},{"type":38,"tag":57,"props":12919,"children":12920},{},[12921],{"type":43,"value":170},{"type":38,"tag":57,"props":12923,"children":12924},{},[12925],{"type":43,"value":175},{"type":38,"tag":57,"props":12927,"children":12928},{},[12929],{"type":43,"value":180},{"type":38,"tag":57,"props":12931,"children":12932},{},[12933],{"type":43,"value":185},{"type":38,"tag":57,"props":12935,"children":12936},{},[12937],{"type":43,"value":190},{"type":38,"tag":57,"props":12939,"children":12940},{},[12941],{"type":43,"value":195},{"type":38,"tag":57,"props":12943,"children":12944},{},[12945],{"type":43,"value":200},{"type":38,"tag":57,"props":12947,"children":12948},{},[12949],{"type":43,"value":205},{"type":38,"tag":57,"props":12951,"children":12952},{},[12953],{"type":43,"value":210},{"type":38,"tag":46,"props":12955,"children":12956},{"id":213},[12957],{"type":43,"value":216},{"type":38,"tag":218,"props":12959,"children":12960},{"id":220},[12961],{"type":43,"value":223},{"type":38,"tag":53,"props":12963,"children":12964},{},[12965],{"type":38,"tag":57,"props":12966,"children":12967},{},[12968,12975],{"type":38,"tag":72,"props":12969,"children":12970},{},[12971],{"type":38,"tag":76,"props":12972,"children":12973},{},[12974],{"type":43,"value":80},{"type":38,"tag":82,"props":12976,"children":12977},{},[12978,13003,13013,13034,13055],{"type":38,"tag":57,"props":12979,"children":12980},{},[12981,12988],{"type":38,"tag":72,"props":12982,"children":12983},{},[12984],{"type":38,"tag":76,"props":12985,"children":12986},{},[12987],{"type":43,"value":250},{"type":38,"tag":53,"props":12989,"children":12990},{},[12991,12995],{"type":38,"tag":57,"props":12992,"children":12993},{},[12994],{"type":43,"value":258},{"type":38,"tag":57,"props":12996,"children":12997},{},[12998],{"type":38,"tag":61,"props":12999,"children":13001},{"href":264,"rel":13000},[65],[13002],{"type":43,"value":264},{"type":38,"tag":57,"props":13004,"children":13005},{},[13006],{"type":38,"tag":72,"props":13007,"children":13008},{},[13009],{"type":38,"tag":76,"props":13010,"children":13011},{},[13012],{"type":43,"value":278},{"type":38,"tag":57,"props":13014,"children":13015},{},[13016,13023],{"type":38,"tag":72,"props":13017,"children":13018},{},[13019],{"type":38,"tag":76,"props":13020,"children":13021},{},[13022],{"type":43,"value":289},{"type":38,"tag":53,"props":13024,"children":13025},{},[13026],{"type":38,"tag":57,"props":13027,"children":13028},{},[13029],{"type":38,"tag":61,"props":13030,"children":13032},{"href":298,"rel":13031},[65],[13033],{"type":43,"value":298},{"type":38,"tag":57,"props":13035,"children":13036},{},[13037,13044],{"type":38,"tag":72,"props":13038,"children":13039},{},[13040],{"type":38,"tag":76,"props":13041,"children":13042},{},[13043],{"type":43,"value":312},{"type":38,"tag":53,"props":13045,"children":13046},{},[13047],{"type":38,"tag":57,"props":13048,"children":13049},{},[13050],{"type":38,"tag":61,"props":13051,"children":13053},{"href":321,"rel":13052},[65],[13054],{"type":43,"value":321},{"type":38,"tag":57,"props":13056,"children":13057},{},[13058],{"type":43,"value":329},{"type":38,"tag":46,"props":13060,"children":13061},{"id":332},[13062],{"type":43,"value":335},{"type":38,"tag":218,"props":13064,"children":13065},{"id":338},[13066],{"type":43,"value":341},{"type":38,"tag":53,"props":13068,"children":13069},{},[13070],{"type":38,"tag":57,"props":13071,"children":13072},{},[13073,13080],{"type":38,"tag":72,"props":13074,"children":13075},{},[13076],{"type":38,"tag":76,"props":13077,"children":13078},{},[13079],{"type":43,"value":80},{"type":38,"tag":82,"props":13081,"children":13082},{},[13083,13087,13091],{"type":38,"tag":57,"props":13084,"children":13085},{},[13086],{"type":43,"value":362},{"type":38,"tag":57,"props":13088,"children":13089},{},[13090],{"type":43,"value":367},{"type":38,"tag":57,"props":13092,"children":13093},{},[13094,13095],{"type":43,"value":372},{"type":38,"tag":53,"props":13096,"children":13097},{},[13098],{"type":38,"tag":57,"props":13099,"children":13100},{},[13101],{"type":38,"tag":61,"props":13102,"children":13104},{"href":381,"rel":13103},[65],[13105],{"type":43,"value":381},{"type":38,"tag":46,"props":13107,"children":13108},{"id":387},[13109],{"type":43,"value":390},{"type":38,"tag":218,"props":13111,"children":13112},{"id":393},[13113],{"type":43,"value":396},{"type":38,"tag":53,"props":13115,"children":13116},{},[13117],{"type":38,"tag":57,"props":13118,"children":13119},{},[13120,13127],{"type":38,"tag":72,"props":13121,"children":13122},{},[13123],{"type":38,"tag":76,"props":13124,"children":13125},{},[13126],{"type":43,"value":80},{"type":38,"tag":82,"props":13128,"children":13129},{},[13130,13148,13152,13156,13160,13164,13168],{"type":38,"tag":57,"props":13131,"children":13132},{},[13133,13137],{"type":38,"tag":61,"props":13134,"children":13135},{"href":418},[13136],{"type":43,"value":421},{"type":38,"tag":53,"props":13138,"children":13139},{},[13140],{"type":38,"tag":57,"props":13141,"children":13142},{},[13143],{"type":38,"tag":61,"props":13144,"children":13146},{"href":430,"rel":13145},[65],[13147],{"type":43,"value":430},{"type":38,"tag":57,"props":13149,"children":13150},{},[13151],{"type":43,"value":438},{"type":38,"tag":57,"props":13153,"children":13154},{},[13155],{"type":43,"value":443},{"type":38,"tag":57,"props":13157,"children":13158},{},[13159],{"type":43,"value":448},{"type":38,"tag":57,"props":13161,"children":13162},{},[13163],{"type":43,"value":453},{"type":38,"tag":57,"props":13165,"children":13166},{},[13167],{"type":43,"value":458},{"type":38,"tag":57,"props":13169,"children":13170},{},[13171],{"type":43,"value":463},{"type":38,"tag":46,"props":13173,"children":13174},{"id":466},[13175],{"type":43,"value":469},{"type":38,"tag":218,"props":13177,"children":13178},{"id":472},[13179],{"type":43,"value":475},{"type":38,"tag":53,"props":13181,"children":13182},{},[13183],{"type":38,"tag":57,"props":13184,"children":13185},{},[13186,13193],{"type":38,"tag":72,"props":13187,"children":13188},{},[13189],{"type":38,"tag":76,"props":13190,"children":13191},{},[13192],{"type":43,"value":489},{"type":38,"tag":53,"props":13194,"children":13195},{},[13196,13200,13204,13208,13212,13216,13220,13224,13228,13232,13236,13240,13244,13254,13258,13262,13266,13270,13312,13316,13325,13329,13333],{"type":38,"tag":57,"props":13197,"children":13198},{},[13199],{"type":43,"value":497},{"type":38,"tag":57,"props":13201,"children":13202},{},[13203],{"type":43,"value":502},{"type":38,"tag":57,"props":13205,"children":13206},{},[13207],{"type":43,"value":507},{"type":38,"tag":57,"props":13209,"children":13210},{},[13211],{"type":43,"value":512},{"type":38,"tag":57,"props":13213,"children":13214},{},[13215],{"type":43,"value":517},{"type":38,"tag":57,"props":13217,"children":13218},{},[13219],{"type":43,"value":522},{"type":38,"tag":57,"props":13221,"children":13222},{},[13223],{"type":43,"value":527},{"type":38,"tag":57,"props":13225,"children":13226},{},[13227],{"type":43,"value":532},{"type":38,"tag":57,"props":13229,"children":13230},{},[13231],{"type":43,"value":537},{"type":38,"tag":57,"props":13233,"children":13234},{},[13235],{"type":43,"value":542},{"type":38,"tag":57,"props":13237,"children":13238},{},[13239],{"type":43,"value":547},{"type":38,"tag":57,"props":13241,"children":13242},{},[13243],{"type":43,"value":552},{"type":38,"tag":57,"props":13245,"children":13246},{},[13247,13248,13253],{"type":43,"value":557},{"type":38,"tag":559,"props":13249,"children":13251},{"className":13250},[],[13252],{"type":43,"value":564},{"type":43,"value":566},{"type":38,"tag":57,"props":13255,"children":13256},{},[13257],{"type":43,"value":571},{"type":38,"tag":57,"props":13259,"children":13260},{},[13261],{"type":43,"value":576},{"type":38,"tag":57,"props":13263,"children":13264},{},[13265],{"type":43,"value":581},{"type":38,"tag":57,"props":13267,"children":13268},{},[13269],{"type":43,"value":586},{"type":38,"tag":57,"props":13271,"children":13272},{},[13273,13274],{"type":43,"value":591},{"type":38,"tag":53,"props":13275,"children":13276},{},[13277,13281,13290,13294,13303],{"type":38,"tag":57,"props":13278,"children":13279},{},[13280],{"type":43,"value":599},{"type":38,"tag":57,"props":13282,"children":13283},{},[13284,13289],{"type":38,"tag":559,"props":13285,"children":13287},{"className":13286},[],[13288],{"type":43,"value":608},{"type":43,"value":610},{"type":38,"tag":57,"props":13291,"children":13292},{},[13293],{"type":43,"value":615},{"type":38,"tag":57,"props":13295,"children":13296},{},[13297,13302],{"type":38,"tag":559,"props":13298,"children":13300},{"className":13299},[],[13301],{"type":43,"value":624},{"type":43,"value":610},{"type":38,"tag":57,"props":13304,"children":13305},{},[13306,13311],{"type":38,"tag":559,"props":13307,"children":13309},{"className":13308},[],[13310],{"type":43,"value":634},{"type":43,"value":610},{"type":38,"tag":57,"props":13313,"children":13314},{},[13315],{"type":43,"value":640},{"type":38,"tag":57,"props":13317,"children":13318},{},[13319,13320],{"type":43,"value":645},{"type":38,"tag":559,"props":13321,"children":13323},{"className":13322},[],[13324],{"type":43,"value":651},{"type":38,"tag":57,"props":13326,"children":13327},{},[13328],{"type":43,"value":656},{"type":38,"tag":57,"props":13330,"children":13331},{},[13332],{"type":43,"value":661},{"type":38,"tag":57,"props":13334,"children":13335},{},[13336,13341],{"type":38,"tag":559,"props":13337,"children":13339},{"className":13338},[],[13340],{"type":43,"value":670},{"type":43,"value":672},{"type":38,"tag":46,"props":13343,"children":13344},{"id":675},[13345],{"type":43,"value":678},{"type":38,"tag":39,"props":13347,"children":13348},{},[13349],{"type":43,"value":683},{"title":8,"searchDepth":685,"depth":685,"links":13351},[13352,13353,13354,13355,13356,13357],{"id":48,"depth":685,"text":51},{"id":213,"depth":685,"text":216},{"id":332,"depth":685,"text":335},{"id":387,"depth":685,"text":390},{"id":466,"depth":685,"text":469},{"id":675,"depth":685,"text":678},{"_path":700,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":701,"description":702,"seoTitle":703,"seoDescription":704,"keywords":13359,"image":710,"alt":711,"ogImage":710,"tags":13360,"categories":13361,"published":25,"author":26,"link":700,"date":716,"sitemap":13362,"body":13365,"_type":693,"_id":1029,"_source":695,"_file":1030,"_stem":1031,"_extension":698},[706,707,708,709],[21,713,714],[21,713,714],{"loc":718,"lastmod":716,"changefreq":30,"priority":31,"images":13363},[13364],{"loc":710},{"type":35,"children":13366,"toc":13610},[13367,13376,13383,13387,13394,13398,13405,13419,13426,13433,13440,13447,13454,13476,13480,13491,13498,13505,13509,13520,13527,13542,13549,13556,13563,13567,13598,13602],{"type":38,"tag":39,"props":13368,"children":13369},{},[13370,13371,13375],{"type":43,"value":727},{"type":38,"tag":61,"props":13372,"children":13373},{"href":730},[13374],{"type":43,"value":733},{"type":43,"value":735},{"type":38,"tag":46,"props":13377,"children":13378},{"id":738},[13379],{"type":38,"tag":72,"props":13380,"children":13381},{},[13382],{"type":43,"value":744},{"type":38,"tag":39,"props":13384,"children":13385},{},[13386],{"type":43,"value":749},{"type":38,"tag":46,"props":13388,"children":13389},{"id":752},[13390],{"type":38,"tag":72,"props":13391,"children":13392},{},[13393],{"type":43,"value":758},{"type":38,"tag":39,"props":13395,"children":13396},{},[13397],{"type":43,"value":763},{"type":38,"tag":46,"props":13399,"children":13400},{"id":766},[13401],{"type":38,"tag":72,"props":13402,"children":13403},{},[13404],{"type":43,"value":772},{"type":38,"tag":53,"props":13406,"children":13407},{},[13408],{"type":38,"tag":57,"props":13409,"children":13410},{},[13411,13412],{"type":43,"value":780},{"type":38,"tag":53,"props":13413,"children":13414},{},[13415],{"type":38,"tag":57,"props":13416,"children":13417},{},[13418],{"type":43,"value":788},{"type":38,"tag":790,"props":13420,"children":13421},{"code":792},[13422],{"type":38,"tag":559,"props":13423,"children":13424},{"__ignoreMap":8},[13425],{"type":43,"value":792},{"type":38,"tag":53,"props":13427,"children":13428},{},[13429],{"type":38,"tag":57,"props":13430,"children":13431},{},[13432],{"type":43,"value":805},{"type":38,"tag":790,"props":13434,"children":13435},{"code":808},[13436],{"type":38,"tag":559,"props":13437,"children":13438},{"__ignoreMap":8},[13439],{"type":43,"value":808},{"type":38,"tag":53,"props":13441,"children":13442},{},[13443],{"type":38,"tag":57,"props":13444,"children":13445},{},[13446],{"type":43,"value":821},{"type":38,"tag":790,"props":13448,"children":13449},{"code":824},[13450],{"type":38,"tag":559,"props":13451,"children":13452},{"__ignoreMap":8},[13453],{"type":43,"value":824},{"type":38,"tag":53,"props":13455,"children":13456},{},[13457,13468,13472],{"type":38,"tag":57,"props":13458,"children":13459},{},[13460,13461],{"type":43,"value":837},{"type":38,"tag":53,"props":13462,"children":13463},{},[13464],{"type":38,"tag":57,"props":13465,"children":13466},{},[13467],{"type":43,"value":845},{"type":38,"tag":57,"props":13469,"children":13470},{},[13471],{"type":43,"value":850},{"type":38,"tag":57,"props":13473,"children":13474},{},[13475],{"type":43,"value":855},{"type":38,"tag":46,"props":13477,"children":13478},{"id":858},[13479],{"type":43,"value":861},{"type":38,"tag":53,"props":13481,"children":13482},{},[13483,13487],{"type":38,"tag":57,"props":13484,"children":13485},{},[13486],{"type":43,"value":869},{"type":38,"tag":57,"props":13488,"children":13489},{},[13490],{"type":43,"value":874},{"type":38,"tag":790,"props":13492,"children":13493},{"code":877},[13494],{"type":38,"tag":559,"props":13495,"children":13496},{"__ignoreMap":8},[13497],{"type":43,"value":877},{"type":38,"tag":790,"props":13499,"children":13500},{"code":885},[13501],{"type":38,"tag":559,"props":13502,"children":13503},{"__ignoreMap":8},[13504],{"type":43,"value":885},{"type":38,"tag":46,"props":13506,"children":13507},{"id":893},[13508],{"type":43,"value":896},{"type":38,"tag":53,"props":13510,"children":13511},{},[13512,13516],{"type":38,"tag":57,"props":13513,"children":13514},{},[13515],{"type":43,"value":904},{"type":38,"tag":57,"props":13517,"children":13518},{},[13519],{"type":43,"value":909},{"type":38,"tag":46,"props":13521,"children":13522},{"id":912},[13523],{"type":38,"tag":72,"props":13524,"children":13525},{},[13526],{"type":43,"value":918},{"type":38,"tag":53,"props":13528,"children":13529},{},[13530,13534,13538],{"type":38,"tag":57,"props":13531,"children":13532},{},[13533],{"type":43,"value":926},{"type":38,"tag":57,"props":13535,"children":13536},{},[13537],{"type":43,"value":931},{"type":38,"tag":57,"props":13539,"children":13540},{},[13541],{"type":43,"value":936},{"type":38,"tag":790,"props":13543,"children":13544},{"code":939},[13545],{"type":38,"tag":559,"props":13546,"children":13547},{"__ignoreMap":8},[13548],{"type":43,"value":939},{"type":38,"tag":790,"props":13550,"children":13551},{"code":947},[13552],{"type":38,"tag":559,"props":13553,"children":13554},{"__ignoreMap":8},[13555],{"type":43,"value":947},{"type":38,"tag":46,"props":13557,"children":13558},{"id":955},[13559],{"type":38,"tag":72,"props":13560,"children":13561},{},[13562],{"type":43,"value":961},{"type":38,"tag":39,"props":13564,"children":13565},{},[13566],{"type":43,"value":966},{"type":38,"tag":53,"props":13568,"children":13569},{},[13570,13574,13578,13582,13586,13590,13594],{"type":38,"tag":57,"props":13571,"children":13572},{},[13573],{"type":43,"value":974},{"type":38,"tag":57,"props":13575,"children":13576},{},[13577],{"type":43,"value":979},{"type":38,"tag":57,"props":13579,"children":13580},{},[13581],{"type":43,"value":984},{"type":38,"tag":57,"props":13583,"children":13584},{},[13585],{"type":43,"value":989},{"type":38,"tag":57,"props":13587,"children":13588},{},[13589],{"type":43,"value":994},{"type":38,"tag":57,"props":13591,"children":13592},{},[13593],{"type":43,"value":999},{"type":38,"tag":57,"props":13595,"children":13596},{},[13597],{"type":43,"value":1004},{"type":38,"tag":46,"props":13599,"children":13600},{"id":675},[13601],{"type":43,"value":678},{"type":38,"tag":39,"props":13603,"children":13604},{},[13605,13609],{"type":38,"tag":61,"props":13606,"children":13607},{"href":718},[13608],{"type":43,"value":1016},{"type":43,"value":1018},{"title":8,"searchDepth":685,"depth":685,"links":13611},[13612,13613,13614,13615,13616,13617,13618,13619],{"id":738,"depth":685,"text":744},{"id":752,"depth":685,"text":758},{"id":766,"depth":685,"text":772},{"id":858,"depth":685,"text":861},{"id":893,"depth":685,"text":896},{"id":912,"depth":685,"text":918},{"id":955,"depth":685,"text":961},{"id":675,"depth":685,"text":678},{"_path":1033,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1034,"description":1035,"seoTitle":1036,"seoDescription":1037,"keywords":13621,"image":18,"alt":8,"ogImage":18,"tags":13622,"categories":13623,"published":25,"author":26,"link":1033,"date":1045,"sitemap":13624,"body":13627,"_type":693,"_id":1254,"_source":695,"_file":1255,"_stem":1256,"_extension":698},[1039,1040,1041,1042],[21,22,23],[21,22,23],{"loc":1047,"lastmod":1045,"changefreq":30,"priority":31,"images":13625},[13626],{"loc":18},{"type":35,"children":13628,"toc":13779},[13629,13638,13642,13646,13650,13654,13663,13667,13674,13737,13741,13751,13758,13761,13771,13775],{"type":38,"tag":39,"props":13630,"children":13631},{},[13632,13633,13637],{"type":43,"value":1056},{"type":38,"tag":61,"props":13634,"children":13635},{"href":5},[13636],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":13639,"children":13640},{"id":1066},[13641],{"type":43,"value":1069},{"type":38,"tag":39,"props":13643,"children":13644},{},[13645],{"type":43,"value":1074},{"type":38,"tag":39,"props":13647,"children":13648},{},[13649],{"type":43,"value":1079},{"type":38,"tag":46,"props":13651,"children":13652},{"id":1082},[13653],{"type":43,"value":1085},{"type":38,"tag":39,"props":13655,"children":13656},{},[13657,13658],{"type":43,"value":1090},{"type":38,"tag":61,"props":13659,"children":13661},{"href":1093,":target":1094,"rel":13660},[65],[13662],{"type":43,"value":1098},{"type":38,"tag":46,"props":13664,"children":13665},{"id":1101},[13666],{"type":43,"value":1104},{"type":38,"tag":790,"props":13668,"children":13669},{"code":1107},[13670],{"type":38,"tag":559,"props":13671,"children":13672},{"__ignoreMap":8},[13673],{"type":43,"value":1107},{"type":38,"tag":39,"props":13675,"children":13676},{},[13677,13678,13683,13684,13689,13690,13695,13696,13701,13702,13706,13707,13712,13713,13718,13719,13724,13725,13730,13731,13736],{"type":43,"value":1117},{"type":38,"tag":559,"props":13679,"children":13681},{"className":13680},[],[13682],{"type":43,"value":1123},{"type":43,"value":1125},{"type":38,"tag":559,"props":13685,"children":13687},{"className":13686},[],[13688],{"type":43,"value":1131},{"type":43,"value":1133},{"type":38,"tag":559,"props":13691,"children":13693},{"className":13692},[],[13694],{"type":43,"value":1139},{"type":43,"value":1141},{"type":38,"tag":559,"props":13697,"children":13699},{"className":13698},[],[13700],{"type":43,"value":1147},{"type":43,"value":1149},{"type":38,"tag":76,"props":13703,"children":13704},{},[13705],{"type":43,"value":1154},{"type":43,"value":1149},{"type":38,"tag":559,"props":13708,"children":13710},{"className":13709},[],[13711],{"type":43,"value":1123},{"type":43,"value":1162},{"type":38,"tag":559,"props":13714,"children":13716},{"className":13715},[],[13717],{"type":43,"value":1131},{"type":43,"value":1169},{"type":38,"tag":559,"props":13720,"children":13722},{"className":13721},[],[13723],{"type":43,"value":1175},{"type":43,"value":1177},{"type":38,"tag":559,"props":13726,"children":13728},{"className":13727},[],[13729],{"type":43,"value":1131},{"type":43,"value":1184},{"type":38,"tag":61,"props":13732,"children":13734},{"href":1187,":target":1094,"rel":13733},[65],[13735],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":13738,"children":13739},{"id":1194},[13740],{"type":43,"value":1197},{"type":38,"tag":39,"props":13742,"children":13743},{},[13744,13745,13750],{"type":43,"value":1202},{"type":38,"tag":61,"props":13746,"children":13748},{"href":1205,":target":1094,"rel":13747},[65],[13749],{"type":43,"value":1209},{"type":43,"value":1211},{"type":38,"tag":790,"props":13752,"children":13753},{"code":1214},[13754],{"type":38,"tag":559,"props":13755,"children":13756},{"__ignoreMap":8},[13757],{"type":43,"value":1214},{"type":38,"tag":1221,"props":13759,"children":13760},{},[],{"type":38,"tag":39,"props":13762,"children":13763},{},[13764,13765,13770],{"type":43,"value":1228},{"type":38,"tag":61,"props":13766,"children":13768},{"href":1231,":target":1094,"rel":13767},[65],[13769],{"type":43,"value":1235},{"type":43,"value":1237},{"type":38,"tag":46,"props":13772,"children":13773},{"id":675},[13774],{"type":43,"value":678},{"type":38,"tag":39,"props":13776,"children":13777},{},[13778],{"type":43,"value":1246},{"title":8,"searchDepth":685,"depth":685,"links":13780},[13781,13782,13783,13784,13785],{"id":1066,"depth":685,"text":1069},{"id":1082,"depth":685,"text":1085},{"id":1101,"depth":685,"text":1104},{"id":1194,"depth":685,"text":1197},{"id":675,"depth":685,"text":678},{"_path":1258,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1259,"description":1260,"seoTitle":1261,"seoDescription":1262,"keywords":13787,"image":710,"alt":1268,"ogImage":710,"tags":13788,"categories":13789,"published":25,"author":26,"link":1258,"date":1271,"sitemap":13790,"body":13793,"_type":693,"_id":1605,"_source":695,"_file":1606,"_stem":1607,"_extension":698},[1264,1265,1266,1267],[21,713,714],[21,713,714],{"loc":1258,"lastmod":1271,"changefreq":30,"priority":31,"images":13791},[13792],{"loc":710},{"type":35,"children":13794,"toc":14051},[13795,13799,13803,13817,13840,13844,13851,13858,13861,13865,13869,13873,13877,13996,14000,14004,14008,14012,14016,14020,14024,14028,14032,14036],{"type":38,"tag":39,"props":13796,"children":13797},{},[13798],{"type":43,"value":1281},{"type":38,"tag":46,"props":13800,"children":13801},{"id":1284},[13802],{"type":43,"value":1287},{"type":38,"tag":39,"props":13804,"children":13805},{},[13806,13807,13812,13813,13816],{"type":43,"value":1292},{"type":38,"tag":61,"props":13808,"children":13810},{"href":1295,"rel":13809},[65],[13811],{"type":43,"value":1299},{"type":43,"value":1301},{"type":38,"tag":1303,"props":13814,"children":13815},{},[],{"type":43,"value":1307},{"type":38,"tag":82,"props":13818,"children":13819},{},[13820],{"type":38,"tag":57,"props":13821,"children":13822},{},[13823,13824,13827,13828,13831,13832,13835,13836,13839],{"type":43,"value":1315},{"type":38,"tag":1303,"props":13825,"children":13826},{},[],{"type":43,"value":1320},{"type":38,"tag":1303,"props":13829,"children":13830},{},[],{"type":43,"value":1325},{"type":38,"tag":1303,"props":13833,"children":13834},{},[],{"type":43,"value":1330},{"type":38,"tag":1303,"props":13837,"children":13838},{},[],{"type":43,"value":1335},{"type":38,"tag":39,"props":13841,"children":13842},{},[13843],{"type":43,"value":1340},{"type":38,"tag":790,"props":13845,"children":13846},{"code":1343},[13847],{"type":38,"tag":559,"props":13848,"children":13849},{"__ignoreMap":8},[13850],{"type":43,"value":1343},{"type":38,"tag":790,"props":13852,"children":13853},{"code":1351},[13854],{"type":38,"tag":559,"props":13855,"children":13856},{"__ignoreMap":8},[13857],{"type":43,"value":1351},{"type":38,"tag":1221,"props":13859,"children":13860},{},[],{"type":38,"tag":46,"props":13862,"children":13863},{"id":1362},[13864],{"type":43,"value":1365},{"type":38,"tag":39,"props":13866,"children":13867},{},[13868],{"type":43,"value":1370},{"type":38,"tag":46,"props":13870,"children":13871},{"id":1373},[13872],{"type":43,"value":1376},{"type":38,"tag":39,"props":13874,"children":13875},{},[13876],{"type":43,"value":1381},{"type":38,"tag":1383,"props":13878,"children":13879},{},[13880,13989],{"type":38,"tag":1387,"props":13881,"children":13882},{},[13883],{"type":38,"tag":1391,"props":13884,"children":13885},{},[13886,13899,13912,13925,13938,13951,13964,13977],{"type":38,"tag":1395,"props":13887,"children":13888},{},[13889,13894],{"type":38,"tag":1399,"props":13890,"children":13892},{"className":13891,"dataAlign":1403},[1402],[13893],{"type":43,"value":1406},{"type":38,"tag":1399,"props":13895,"children":13897},{"className":13896,"dataAlign":1403},[1402],[13898],{"type":43,"value":1412},{"type":38,"tag":1395,"props":13900,"children":13901},{},[13902,13907],{"type":38,"tag":1399,"props":13903,"children":13905},{"className":13904,"dataAlign":1403},[1402],[13906],{"type":43,"value":1421},{"type":38,"tag":1399,"props":13908,"children":13910},{"className":13909,"dataAlign":1403},[1402],[13911],{"type":43,"value":1427},{"type":38,"tag":1395,"props":13913,"children":13914},{},[13915,13920],{"type":38,"tag":1399,"props":13916,"children":13918},{"className":13917,"dataAlign":1403},[1402],[13919],{"type":43,"value":1436},{"type":38,"tag":1399,"props":13921,"children":13923},{"className":13922,"dataAlign":1403},[1402],[13924],{"type":43,"value":1442},{"type":38,"tag":1395,"props":13926,"children":13927},{},[13928,13933],{"type":38,"tag":1399,"props":13929,"children":13931},{"className":13930,"dataAlign":1403},[1402],[13932],{"type":43,"value":1451},{"type":38,"tag":1399,"props":13934,"children":13936},{"className":13935,"dataAlign":1403},[1402],[13937],{"type":43,"value":1457},{"type":38,"tag":1395,"props":13939,"children":13940},{},[13941,13946],{"type":38,"tag":1399,"props":13942,"children":13944},{"className":13943,"dataAlign":1403},[1402],[13945],{"type":43,"value":1466},{"type":38,"tag":1399,"props":13947,"children":13949},{"className":13948,"dataAlign":1403},[1402],[13950],{"type":43,"value":1472},{"type":38,"tag":1395,"props":13952,"children":13953},{},[13954,13959],{"type":38,"tag":1399,"props":13955,"children":13957},{"className":13956,"dataAlign":1403},[1402],[13958],{"type":43,"value":1481},{"type":38,"tag":1399,"props":13960,"children":13962},{"className":13961,"dataAlign":1403},[1402],[13963],{"type":43,"value":1487},{"type":38,"tag":1395,"props":13965,"children":13966},{},[13967,13972],{"type":38,"tag":1399,"props":13968,"children":13970},{"className":13969,"dataAlign":1403},[1402],[13971],{"type":43,"value":1496},{"type":38,"tag":1399,"props":13973,"children":13975},{"className":13974,"dataAlign":1403},[1402],[13976],{"type":43,"value":1502},{"type":38,"tag":1395,"props":13978,"children":13979},{},[13980,13985],{"type":38,"tag":1399,"props":13981,"children":13983},{"className":13982,"dataAlign":1403},[1402],[13984],{"type":43,"value":1511},{"type":38,"tag":1399,"props":13986,"children":13988},{"className":13987,"dataAlign":1403},[1402],[],{"type":38,"tag":1517,"props":13990,"children":13991},{},[13992],{"type":38,"tag":39,"props":13993,"children":13994},{},[13995],{"type":43,"value":1524},{"type":38,"tag":46,"props":13997,"children":13998},{"id":1527},[13999],{"type":43,"value":1530},{"type":38,"tag":39,"props":14001,"children":14002},{},[14003],{"type":43,"value":1535},{"type":38,"tag":39,"props":14005,"children":14006},{},[14007],{"type":43,"value":1540},{"type":38,"tag":39,"props":14009,"children":14010},{},[14011],{"type":43,"value":1545},{"type":38,"tag":39,"props":14013,"children":14014},{},[14015],{"type":43,"value":1550},{"type":38,"tag":39,"props":14017,"children":14018},{},[14019],{"type":43,"value":1555},{"type":38,"tag":39,"props":14021,"children":14022},{},[14023],{"type":43,"value":1560},{"type":38,"tag":39,"props":14025,"children":14026},{},[14027],{"type":43,"value":1565},{"type":38,"tag":39,"props":14029,"children":14030},{},[14031],{"type":43,"value":1570},{"type":38,"tag":46,"props":14033,"children":14034},{"id":1573},[14035],{"type":43,"value":1576},{"type":38,"tag":39,"props":14037,"children":14038},{},[14039,14040,14044,14045,14050],{"type":43,"value":1581},{"type":38,"tag":61,"props":14041,"children":14042},{"href":700},[14043],{"type":43,"value":1586},{"type":43,"value":1588},{"type":38,"tag":61,"props":14046,"children":14048},{"href":1591,"rel":14047},[65],[14049],{"type":43,"value":1595},{"type":43,"value":1597},{"title":8,"searchDepth":685,"depth":685,"links":14052},[14053,14054,14055,14056,14057],{"id":1284,"depth":685,"text":1287},{"id":1362,"depth":685,"text":1365},{"id":1373,"depth":685,"text":1376},{"id":1527,"depth":685,"text":1530},{"id":1573,"depth":685,"text":1576},{"_path":1609,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1610,"description":1611,"seoTitle":1612,"seoDescription":1613,"keywords":14059,"image":18,"alt":19,"ogImage":18,"tags":14060,"categories":14061,"published":25,"author":26,"link":1609,"date":1621,"sitemap":14062,"body":14065,"_type":693,"_id":1795,"_source":695,"_file":1796,"_stem":1797,"_extension":698},[1615,1616,1617,1618],[21,22,23],[21,22,23],{"loc":1623,"lastmod":1621,"changefreq":30,"priority":31,"images":14063},[14064],{"loc":18},{"type":35,"children":14066,"toc":14195},[14067,14081,14089,14093,14100,14104,14108,14128,14135,14142,14146,14150,14154,14161,14165,14172,14176,14184,14188],{"type":38,"tag":39,"props":14068,"children":14069},{},[14070,14071,14075,14076,14080],{"type":43,"value":1632},{"type":38,"tag":61,"props":14072,"children":14073},{"href":5},[14074],{"type":43,"value":1061},{"type":43,"value":1638},{"type":38,"tag":61,"props":14077,"children":14078},{"href":1033},[14079],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":14082,"children":14083},{"id":1646},[14084,14088],{"type":38,"tag":72,"props":14085,"children":14086},{},[14087],{"type":43,"value":512},{"type":43,"value":1653},{"type":38,"tag":39,"props":14090,"children":14091},{},[14092],{"type":43,"value":1658},{"type":38,"tag":790,"props":14094,"children":14095},{"code":1661},[14096],{"type":38,"tag":559,"props":14097,"children":14098},{"__ignoreMap":8},[14099],{"type":43,"value":1661},{"type":38,"tag":46,"props":14101,"children":14102},{"id":1669},[14103],{"type":43,"value":517},{"type":38,"tag":39,"props":14105,"children":14106},{},[14107],{"type":43,"value":1676},{"type":38,"tag":39,"props":14109,"children":14110},{},[14111,14112,14121,14122,14127],{"type":43,"value":1681},{"type":38,"tag":76,"props":14113,"children":14114},{},[14115,14116,14120],{"type":43,"value":1686},{"type":38,"tag":76,"props":14117,"children":14118},{},[14119],{"type":43,"value":1691},{"type":43,"value":1693},{"type":43,"value":1695},{"type":38,"tag":61,"props":14123,"children":14125},{"href":1698,"rel":14124},[65],[14126],{"type":43,"value":1702},{"type":43,"value":1704},{"type":38,"tag":790,"props":14129,"children":14130},{"code":1707},[14131],{"type":38,"tag":559,"props":14132,"children":14133},{"__ignoreMap":8},[14134],{"type":43,"value":1707},{"type":38,"tag":790,"props":14136,"children":14137},{"code":1715},[14138],{"type":38,"tag":559,"props":14139,"children":14140},{"__ignoreMap":8},[14141],{"type":43,"value":1715},{"type":38,"tag":46,"props":14143,"children":14144},{"id":1723},[14145],{"type":43,"value":1726},{"type":38,"tag":39,"props":14147,"children":14148},{},[14149],{"type":43,"value":1731},{"type":38,"tag":39,"props":14151,"children":14152},{},[14153],{"type":43,"value":1736},{"type":38,"tag":790,"props":14155,"children":14156},{"code":1739},[14157],{"type":38,"tag":559,"props":14158,"children":14159},{"__ignoreMap":8},[14160],{"type":43,"value":1739},{"type":38,"tag":39,"props":14162,"children":14163},{},[14164],{"type":43,"value":1749},{"type":38,"tag":790,"props":14166,"children":14167},{"code":1752},[14168],{"type":38,"tag":559,"props":14169,"children":14170},{"__ignoreMap":8},[14171],{"type":43,"value":1752},{"type":38,"tag":1759,"props":14173,"children":14174},{"id":1761},[14175],{"type":43,"value":1764},{"type":38,"tag":39,"props":14177,"children":14178},{},[14179],{"type":38,"tag":61,"props":14180,"children":14182},{"href":1770,"rel":14181},[65],[14183],{"type":43,"value":1774},{"type":38,"tag":1759,"props":14185,"children":14186},{"id":1777},[14187],{"type":43,"value":1780},{"type":38,"tag":39,"props":14189,"children":14190},{},[14191],{"type":38,"tag":61,"props":14192,"children":14193},{"href":1033},[14194],{"type":43,"value":1788},{"title":8,"searchDepth":685,"depth":685,"links":14196},[14197,14198,14199],{"id":1646,"depth":685,"text":1792},{"id":1669,"depth":685,"text":517},{"id":1723,"depth":685,"text":1726},{"_path":1799,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1800,"description":1801,"seoTitle":1802,"seoDescription":1803,"keywords":14201,"image":710,"alt":1595,"ogImage":710,"tags":14202,"categories":14203,"published":25,"author":26,"link":1799,"date":1811,"sitemap":14204,"body":14207,"_type":693,"_id":2257,"_source":695,"_file":2258,"_stem":2259,"_extension":698},[1805,1806,1807,1808],[21,713,714],[21,713,714],{"loc":1813,"lastmod":1811,"changefreq":30,"priority":31,"images":14205},[14206],{"loc":710},{"type":35,"children":14208,"toc":14563},[14209,14213,14220,14224,14237,14241,14256,14272,14276,14287,14294,14313,14320,14344,14351,14370,14374,14378,14382,14389,14393,14400,14404,14411,14415,14422,14429,14433,14478,14496,14535,14539,14546,14554],{"type":38,"tag":39,"props":14210,"children":14211},{},[14212],{"type":43,"value":1822},{"type":38,"tag":790,"props":14214,"children":14215},{"code":1825},[14216],{"type":38,"tag":559,"props":14217,"children":14218},{"__ignoreMap":8},[14219],{"type":43,"value":1825},{"type":38,"tag":46,"props":14221,"children":14222},{"id":1833},[14223],{"type":43,"value":1836},{"type":38,"tag":39,"props":14225,"children":14226},{},[14227,14228,14231,14232],{"type":43,"value":1841},{"type":38,"tag":1303,"props":14229,"children":14230},{},[],{"type":43,"value":1846},{"type":38,"tag":61,"props":14233,"children":14235},{"href":1849,"rel":14234},[65],[14236],{"type":43,"value":1853},{"type":38,"tag":46,"props":14238,"children":14239},{"id":1856},[14240],{"type":43,"value":1859},{"type":38,"tag":53,"props":14242,"children":14243},{},[14244,14248,14252],{"type":38,"tag":57,"props":14245,"children":14246},{},[14247],{"type":43,"value":1867},{"type":38,"tag":57,"props":14249,"children":14250},{},[14251],{"type":43,"value":1872},{"type":38,"tag":57,"props":14253,"children":14254},{},[14255],{"type":43,"value":1877},{"type":38,"tag":1383,"props":14257,"children":14258},{},[14259,14265],{"type":38,"tag":39,"props":14260,"children":14261},{},[14262],{"type":38,"tag":1885,"props":14263,"children":14264},{"alt":1887,"src":1888},[],{"type":38,"tag":1517,"props":14266,"children":14267},{},[14268],{"type":38,"tag":39,"props":14269,"children":14270},{},[14271],{"type":43,"value":1897},{"type":38,"tag":1759,"props":14273,"children":14274},{"id":1900},[14275],{"type":43,"value":1903},{"type":38,"tag":53,"props":14277,"children":14278},{},[14279,14283],{"type":38,"tag":57,"props":14280,"children":14281},{},[14282],{"type":43,"value":1911},{"type":38,"tag":57,"props":14284,"children":14285},{},[14286],{"type":43,"value":1916},{"type":38,"tag":790,"props":14288,"children":14289},{"code":1919},[14290],{"type":38,"tag":559,"props":14291,"children":14292},{"__ignoreMap":8},[14293],{"type":43,"value":1919},{"type":38,"tag":39,"props":14295,"children":14296},{},[14297,14301,14302,14309],{"type":38,"tag":76,"props":14298,"children":14299},{},[14300],{"type":43,"value":1932},{"type":43,"value":1149},{"type":38,"tag":72,"props":14303,"children":14304},{},[14305],{"type":38,"tag":76,"props":14306,"children":14307},{},[14308],{"type":43,"value":1941},{"type":38,"tag":76,"props":14310,"children":14311},{},[14312],{"type":43,"value":1063},{"type":38,"tag":790,"props":14314,"children":14315},{"code":1948},[14316],{"type":38,"tag":559,"props":14317,"children":14318},{"__ignoreMap":8},[14319],{"type":43,"value":1948},{"type":38,"tag":39,"props":14321,"children":14322},{},[14323],{"type":38,"tag":76,"props":14324,"children":14325},{},[14326,14327,14343],{"type":43,"value":1961},{"type":38,"tag":76,"props":14328,"children":14329},{},[14330,14331,14335,14336],{"type":43,"value":1966},{"type":38,"tag":76,"props":14332,"children":14333},{},[14334],{"type":43,"value":1971},{"type":43,"value":1149},{"type":38,"tag":72,"props":14337,"children":14338},{},[14339],{"type":38,"tag":76,"props":14340,"children":14341},{},[14342],{"type":43,"value":1980},{"type":43,"value":1063},{"type":38,"tag":790,"props":14345,"children":14346},{"code":1984},[14347],{"type":38,"tag":559,"props":14348,"children":14349},{"__ignoreMap":8},[14350],{"type":43,"value":1984},{"type":38,"tag":39,"props":14352,"children":14353},{},[14354,14358,14359,14366],{"type":38,"tag":76,"props":14355,"children":14356},{},[14357],{"type":43,"value":1997},{"type":43,"value":1149},{"type":38,"tag":72,"props":14360,"children":14361},{},[14362],{"type":38,"tag":76,"props":14363,"children":14364},{},[14365],{"type":43,"value":2006},{"type":38,"tag":76,"props":14367,"children":14368},{},[14369],{"type":43,"value":1063},{"type":38,"tag":46,"props":14371,"children":14372},{"id":2013},[14373],{"type":43,"value":2016},{"type":38,"tag":39,"props":14375,"children":14376},{},[14377],{"type":43,"value":2021},{"type":38,"tag":39,"props":14379,"children":14380},{},[14381],{"type":43,"value":2026},{"type":38,"tag":790,"props":14383,"children":14384},{"code":2029},[14385],{"type":38,"tag":559,"props":14386,"children":14387},{"__ignoreMap":8},[14388],{"type":43,"value":2029},{"type":38,"tag":46,"props":14390,"children":14391},{"id":2037},[14392],{"type":43,"value":2040},{"type":38,"tag":53,"props":14394,"children":14395},{},[14396],{"type":38,"tag":57,"props":14397,"children":14398},{},[14399],{"type":43,"value":2048},{"type":38,"tag":1759,"props":14401,"children":14402},{"id":2051},[14403],{"type":43,"value":2054},{"type":38,"tag":790,"props":14405,"children":14406},{"code":2057},[14407],{"type":38,"tag":559,"props":14408,"children":14409},{"__ignoreMap":8},[14410],{"type":43,"value":2057},{"type":38,"tag":39,"props":14412,"children":14413},{},[14414],{"type":43,"value":2067},{"type":38,"tag":790,"props":14416,"children":14417},{"code":2070},[14418],{"type":38,"tag":559,"props":14419,"children":14420},{"__ignoreMap":8},[14421],{"type":43,"value":2070},{"type":38,"tag":39,"props":14423,"children":14424},{},[14425],{"type":38,"tag":76,"props":14426,"children":14427},{},[14428],{"type":43,"value":2083},{"type":38,"tag":46,"props":14430,"children":14431},{"id":2086},[14432],{"type":43,"value":2089},{"type":38,"tag":53,"props":14434,"children":14435},{},[14436,14440,14444,14455,14459,14463,14467],{"type":38,"tag":57,"props":14437,"children":14438},{},[14439],{"type":43,"value":2097},{"type":38,"tag":57,"props":14441,"children":14442},{},[14443],{"type":43,"value":2102},{"type":38,"tag":57,"props":14445,"children":14446},{},[14447,14448],{"type":43,"value":2107},{"type":38,"tag":53,"props":14449,"children":14450},{},[14451],{"type":38,"tag":57,"props":14452,"children":14453},{},[14454],{"type":43,"value":2115},{"type":38,"tag":57,"props":14456,"children":14457},{},[14458],{"type":43,"value":2120},{"type":38,"tag":57,"props":14460,"children":14461},{},[14462],{"type":43,"value":2125},{"type":38,"tag":57,"props":14464,"children":14465},{},[14466],{"type":43,"value":2130},{"type":38,"tag":57,"props":14468,"children":14469},{},[14470,14471],{"type":43,"value":2135},{"type":38,"tag":53,"props":14472,"children":14473},{},[14474],{"type":38,"tag":57,"props":14475,"children":14476},{},[14477],{"type":43,"value":2143},{"type":38,"tag":1383,"props":14479,"children":14480},{},[14481,14489],{"type":38,"tag":2148,"props":14482,"children":14483},{"style":2150},[14484,14485,14488],{"type":43,"value":2153},{"type":38,"tag":1885,"props":14486,"children":14487},{"style":2156,"src":2157,"alt":2158},[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":14490,"children":14491},{},[14492],{"type":38,"tag":39,"props":14493,"children":14494},{},[14495],{"type":43,"value":2158},{"type":38,"tag":53,"props":14497,"children":14498},{},[14499,14520],{"type":38,"tag":57,"props":14500,"children":14501},{},[14502,14503],{"type":43,"value":2175},{"type":38,"tag":53,"props":14504,"children":14505},{},[14506,14510],{"type":38,"tag":57,"props":14507,"children":14508},{},[14509],{"type":43,"value":2183},{"type":38,"tag":57,"props":14511,"children":14512},{},[14513],{"type":38,"tag":72,"props":14514,"children":14515},{},[14516],{"type":38,"tag":76,"props":14517,"children":14518},{},[14519],{"type":43,"value":2194},{"type":38,"tag":57,"props":14521,"children":14522},{},[14523,14524],{"type":43,"value":2199},{"type":38,"tag":53,"props":14525,"children":14526},{},[14527],{"type":38,"tag":57,"props":14528,"children":14529},{},[14530],{"type":38,"tag":61,"props":14531,"children":14533},{"href":2208,"rel":14532},[65],[14534],{"type":43,"value":2212},{"type":38,"tag":1759,"props":14536,"children":14537},{"id":2215},[14538],{"type":43,"value":2218},{"type":38,"tag":53,"props":14540,"children":14541},{},[14542],{"type":38,"tag":57,"props":14543,"children":14544},{},[14545],{"type":43,"value":2226},{"type":38,"tag":46,"props":14547,"children":14548},{"id":675},[14549,14550],{"type":43,"value":2231},{"type":38,"tag":72,"props":14551,"children":14552},{},[14553],{"type":43,"value":2236},{"type":38,"tag":39,"props":14555,"children":14556},{},[14557,14558,14562],{"type":43,"value":2241},{"type":38,"tag":61,"props":14559,"children":14560},{"href":1258},[14561],{"type":43,"value":2246},{"type":43,"value":2248},{"title":8,"searchDepth":685,"depth":685,"links":14564},[14565,14566,14567,14568,14569,14570],{"id":1833,"depth":685,"text":1836},{"id":1856,"depth":685,"text":1859},{"id":2013,"depth":685,"text":2016},{"id":2037,"depth":685,"text":2040},{"id":2086,"depth":685,"text":2089},{"id":675,"depth":685,"text":678},{"_path":2261,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2262,"description":2263,"seoTitle":2264,"seoDescription":2265,"keywords":14572,"image":18,"alt":19,"ogImage":18,"tags":14573,"categories":14574,"published":25,"author":26,"ink":2261,"date":2273,"sitemap":14575,"body":14578,"_type":693,"_id":2404,"_source":695,"_file":2405,"_stem":2406,"_extension":698},[2267,2268,2269,2270],[21,22,23],[21,22,23],{"loc":2275,"lastmod":2273,"changefreq":30,"priority":31,"images":14576},[14577],{"loc":18},{"type":35,"children":14579,"toc":14682},[14580,14594,14598,14602,14609,14613,14620,14624,14628,14635,14639,14648,14652,14659,14663,14671,14675],{"type":38,"tag":39,"props":14581,"children":14582},{},[14583,14584,14588,14589,14593],{"type":43,"value":2284},{"type":38,"tag":61,"props":14585,"children":14586},{"href":5},[14587],{"type":43,"value":1061},{"type":43,"value":2290},{"type":38,"tag":61,"props":14590,"children":14591},{"href":1609},[14592],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":1759,"props":14595,"children":14596},{"id":2298},[14597],{"type":43,"value":527},{"type":38,"tag":39,"props":14599,"children":14600},{},[14601],{"type":43,"value":2305},{"type":38,"tag":790,"props":14603,"children":14604},{"code":2308},[14605],{"type":38,"tag":559,"props":14606,"children":14607},{"__ignoreMap":8},[14608],{"type":43,"value":2308},{"type":38,"tag":39,"props":14610,"children":14611},{},[14612],{"type":43,"value":2318},{"type":38,"tag":790,"props":14614,"children":14615},{"code":2321},[14616],{"type":38,"tag":559,"props":14617,"children":14618},{"__ignoreMap":8},[14619],{"type":43,"value":2321},{"type":38,"tag":1759,"props":14621,"children":14622},{"id":2329},[14623],{"type":43,"value":2332},{"type":38,"tag":39,"props":14625,"children":14626},{},[14627],{"type":43,"value":2337},{"type":38,"tag":790,"props":14629,"children":14630},{"code":2340},[14631],{"type":38,"tag":559,"props":14632,"children":14633},{"__ignoreMap":8},[14634],{"type":43,"value":2340},{"type":38,"tag":1759,"props":14636,"children":14637},{"id":2348},[14638],{"type":43,"value":2351},{"type":38,"tag":39,"props":14640,"children":14641},{},[14642,14643,14647],{"type":43,"value":2356},{"type":38,"tag":76,"props":14644,"children":14645},{},[14646],{"type":43,"value":2361},{"type":43,"value":1063},{"type":38,"tag":39,"props":14649,"children":14650},{},[14651],{"type":43,"value":2367},{"type":38,"tag":790,"props":14653,"children":14654},{"code":2370},[14655],{"type":38,"tag":559,"props":14656,"children":14657},{"__ignoreMap":8},[14658],{"type":43,"value":2370},{"type":38,"tag":1759,"props":14660,"children":14661},{"id":1761},[14662],{"type":43,"value":1764},{"type":38,"tag":39,"props":14664,"children":14665},{},[14666],{"type":38,"tag":61,"props":14667,"children":14669},{"href":1770,"rel":14668},[65],[14670],{"type":43,"value":1774},{"type":38,"tag":1759,"props":14672,"children":14673},{"id":2390},[14674],{"type":43,"value":2393},{"type":38,"tag":39,"props":14676,"children":14677},{},[14678],{"type":38,"tag":61,"props":14679,"children":14680},{"href":1609},[14681],{"type":43,"value":2401},{"title":8,"searchDepth":685,"depth":685,"links":14683},[],{"_path":2408,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2409,"description":2410,"seoTitle":2411,"seoDescription":2412,"keywords":14685,"image":710,"alt":1595,"ogImage":710,"tags":14686,"categories":14687,"published":25,"author":26,"link":2408,"date":2421,"sitemap":14688,"body":14691,"_type":693,"_id":2655,"_source":695,"_file":2656,"_stem":2657,"_extension":698},[2414,2415,2416,2417,2418],[21,713,714],[21,713,714],{"loc":2423,"lastmod":2421,"changefreq":30,"priority":31,"images":14689},[14690],{"loc":710},{"type":35,"children":14692,"toc":14879},[14693,14703,14707,14714,14721,14725,14732,14739,14746,14776,14783,14790,14805,14813,14817,14824,14839,14846,14866,14870],{"type":38,"tag":39,"props":14694,"children":14695},{},[14696,14697,14702],{"type":43,"value":2432},{"type":38,"tag":61,"props":14698,"children":14700},{"href":2435,"rel":14699},[65],[14701],{"type":43,"value":1595},{"type":43,"value":1063},{"type":38,"tag":46,"props":14704,"children":14705},{"id":2442},[14706],{"type":43,"value":2445},{"type":38,"tag":53,"props":14708,"children":14709},{},[14710],{"type":38,"tag":57,"props":14711,"children":14712},{},[14713],{"type":43,"value":2453},{"type":38,"tag":790,"props":14715,"children":14716},{"code":2456},[14717],{"type":38,"tag":559,"props":14718,"children":14719},{"__ignoreMap":8},[14720],{"type":43,"value":2456},{"type":38,"tag":39,"props":14722,"children":14723},{},[14724],{"type":43,"value":2466},{"type":38,"tag":790,"props":14726,"children":14727},{"code":2469},[14728],{"type":38,"tag":559,"props":14729,"children":14730},{"__ignoreMap":8},[14731],{"type":43,"value":2469},{"type":38,"tag":790,"props":14733,"children":14734},{"code":2477},[14735],{"type":38,"tag":559,"props":14736,"children":14737},{"__ignoreMap":8},[14738],{"type":43,"value":2477},{"type":38,"tag":46,"props":14740,"children":14741},{"id":2485},[14742],{"type":38,"tag":72,"props":14743,"children":14744},{},[14745],{"type":43,"value":2491},{"type":38,"tag":53,"props":14747,"children":14748},{},[14749,14753,14768,14772],{"type":38,"tag":57,"props":14750,"children":14751},{},[14752],{"type":43,"value":2499},{"type":38,"tag":57,"props":14754,"children":14755},{},[14756,14757],{"type":43,"value":2504},{"type":38,"tag":53,"props":14758,"children":14759},{},[14760,14764],{"type":38,"tag":57,"props":14761,"children":14762},{},[14763],{"type":43,"value":2512},{"type":38,"tag":57,"props":14765,"children":14766},{},[14767],{"type":43,"value":2517},{"type":38,"tag":57,"props":14769,"children":14770},{},[14771],{"type":43,"value":2522},{"type":38,"tag":57,"props":14773,"children":14774},{},[14775],{"type":43,"value":2527},{"type":38,"tag":790,"props":14777,"children":14778},{"code":2530},[14779],{"type":38,"tag":559,"props":14780,"children":14781},{"__ignoreMap":8},[14782],{"type":43,"value":2530},{"type":38,"tag":46,"props":14784,"children":14785},{"id":2538},[14786],{"type":38,"tag":72,"props":14787,"children":14788},{},[14789],{"type":43,"value":2544},{"type":38,"tag":53,"props":14791,"children":14792},{},[14793,14797,14801],{"type":38,"tag":57,"props":14794,"children":14795},{},[14796],{"type":43,"value":2552},{"type":38,"tag":57,"props":14798,"children":14799},{},[14800],{"type":43,"value":2557},{"type":38,"tag":57,"props":14802,"children":14803},{},[14804],{"type":43,"value":2562},{"type":38,"tag":1759,"props":14806,"children":14807},{"id":2565},[14808,14812],{"type":38,"tag":72,"props":14809,"children":14810},{},[14811],{"type":43,"value":2571},{"type":43,"value":2573},{"type":38,"tag":39,"props":14814,"children":14815},{},[14816],{"type":43,"value":2578},{"type":38,"tag":790,"props":14818,"children":14819},{"code":2581},[14820],{"type":38,"tag":559,"props":14821,"children":14822},{"__ignoreMap":8},[14823],{"type":43,"value":2581},{"type":38,"tag":39,"props":14825,"children":14826},{},[14827,14831,14832],{"type":38,"tag":76,"props":14828,"children":14829},{},[14830],{"type":43,"value":2594},{"type":43,"value":1149},{"type":38,"tag":72,"props":14833,"children":14834},{},[14835],{"type":38,"tag":76,"props":14836,"children":14837},{},[14838],{"type":43,"value":2603},{"type":38,"tag":790,"props":14840,"children":14841},{"code":2606},[14842],{"type":38,"tag":559,"props":14843,"children":14844},{"__ignoreMap":8},[14845],{"type":43,"value":2606},{"type":38,"tag":39,"props":14847,"children":14848},{},[14849,14853,14854,14861,14862],{"type":38,"tag":76,"props":14850,"children":14851},{},[14852],{"type":43,"value":2619},{"type":43,"value":1149},{"type":38,"tag":72,"props":14855,"children":14856},{},[14857],{"type":38,"tag":76,"props":14858,"children":14859},{},[14860],{"type":43,"value":2006},{"type":43,"value":1149},{"type":38,"tag":76,"props":14863,"children":14864},{},[14865],{"type":43,"value":2633},{"type":38,"tag":46,"props":14867,"children":14868},{"id":1573},[14869],{"type":43,"value":1576},{"type":38,"tag":39,"props":14871,"children":14872},{},[14873,14874,14878],{"type":43,"value":1581},{"type":38,"tag":61,"props":14875,"children":14876},{"href":1813},[14877],{"type":43,"value":2646},{"type":43,"value":2648},{"title":8,"searchDepth":685,"depth":685,"links":14880},[14881,14882,14883,14884],{"id":2442,"depth":685,"text":2445},{"id":2485,"depth":685,"text":2491},{"id":2538,"depth":685,"text":2544},{"id":1573,"depth":685,"text":1576},{"_path":2659,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2660,"description":2661,"seoTitle":2662,"seoDescription":2663,"keywords":14886,"image":18,"alt":8,"ogImage":18,"tags":14887,"categories":14888,"published":25,"author":26,"link":2659,"date":2671,"sitemap":14889,"body":14892,"_type":693,"_id":2852,"_source":695,"_file":2853,"_stem":2854,"_extension":698},[2665,2666,2667,2668],[21,22,23],[21,22,23],{"loc":2673,"lastmod":2671,"changefreq":30,"priority":31,"images":14890},[14891],{"loc":18},{"type":35,"children":14893,"toc":15035},[14894,14908,14912,14916,14935,14942,14946,14953,14957,14961,14965,14975,14982,14986,14998,15005,15012,15016,15024,15028],{"type":38,"tag":39,"props":14895,"children":14896},{},[14897,14898,14902,14903,14907],{"type":43,"value":2682},{"type":38,"tag":61,"props":14899,"children":14900},{"href":5},[14901],{"type":43,"value":1061},{"type":43,"value":2688},{"type":38,"tag":61,"props":14904,"children":14905},{"href":2261},[14906],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":1759,"props":14909,"children":14910},{"id":2696},[14911],{"type":43,"value":542},{"type":38,"tag":39,"props":14913,"children":14914},{},[14915],{"type":43,"value":2703},{"type":38,"tag":2705,"props":14917,"children":14918},{},[14919],{"type":38,"tag":39,"props":14920,"children":14921},{},[14922,14923,14928,14929,14934],{"type":43,"value":2712},{"type":38,"tag":61,"props":14924,"children":14926},{"href":2715,"rel":14925},[65],[14927],{"type":43,"value":2719},{"type":43,"value":2721},{"type":38,"tag":61,"props":14930,"children":14932},{"href":2724,"rel":14931},[65],[14933],{"type":43,"value":2728},{"type":43,"value":2730},{"type":38,"tag":790,"props":14936,"children":14937},{"code":2733},[14938],{"type":38,"tag":559,"props":14939,"children":14940},{"__ignoreMap":8},[14941],{"type":43,"value":2733},{"type":38,"tag":39,"props":14943,"children":14944},{},[14945],{"type":43,"value":2743},{"type":38,"tag":790,"props":14947,"children":14948},{"code":2746},[14949],{"type":38,"tag":559,"props":14950,"children":14951},{"__ignoreMap":8},[14952],{"type":43,"value":2746},{"type":38,"tag":1759,"props":14954,"children":14955},{"id":2754},[14956],{"type":43,"value":547},{"type":38,"tag":39,"props":14958,"children":14959},{},[14960],{"type":43,"value":2761},{"type":38,"tag":1759,"props":14962,"children":14963},{"id":2764},[14964],{"type":43,"value":552},{"type":38,"tag":39,"props":14966,"children":14967},{},[14968,14969,14974],{"type":43,"value":2771},{"type":38,"tag":61,"props":14970,"children":14972},{"href":2774,"rel":14971},[65],[14973],{"type":43,"value":2778},{"type":43,"value":2780},{"type":38,"tag":2705,"props":14976,"children":14977},{},[14978],{"type":38,"tag":39,"props":14979,"children":14980},{},[14981],{"type":43,"value":2788},{"type":38,"tag":39,"props":14983,"children":14984},{},[14985],{"type":43,"value":2793},{"type":38,"tag":2705,"props":14987,"children":14988},{},[14989],{"type":38,"tag":39,"props":14990,"children":14991},{},[14992,14993,14997],{"type":43,"value":2801},{"type":38,"tag":76,"props":14994,"children":14995},{},[14996],{"type":43,"value":2806},{"type":43,"value":2808},{"type":38,"tag":2705,"props":14999,"children":15000},{},[15001],{"type":38,"tag":39,"props":15002,"children":15003},{},[15004],{"type":43,"value":2816},{"type":38,"tag":790,"props":15006,"children":15007},{"code":2819},[15008],{"type":38,"tag":559,"props":15009,"children":15010},{"__ignoreMap":8},[15011],{"type":43,"value":2819},{"type":38,"tag":1759,"props":15013,"children":15014},{"id":1761},[15015],{"type":43,"value":2829},{"type":38,"tag":39,"props":15017,"children":15018},{},[15019],{"type":38,"tag":61,"props":15020,"children":15022},{"href":1770,"rel":15021},[65],[15023],{"type":43,"value":1774},{"type":38,"tag":1759,"props":15025,"children":15026},{"id":2390},[15027],{"type":43,"value":2393},{"type":38,"tag":39,"props":15029,"children":15030},{},[15031],{"type":38,"tag":61,"props":15032,"children":15033},{"href":2261},[15034],{"type":43,"value":2849},{"title":8,"searchDepth":685,"depth":685,"links":15036},[],{"_path":2856,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2857,"description":2858,"seoTitle":2859,"seoDescription":2860,"keywords":15038,"image":710,"alt":1268,"ogImage":710,"tags":15039,"categories":15040,"published":25,"author":26,"link":2856,"date":2868,"sitemap":15041,"body":15044,"_type":693,"_id":3108,"_source":695,"_file":3109,"_stem":3110,"_extension":698},[2862,2863,2864,2865],[21,713,714],[21,713,714],{"loc":2870,"lastmod":2868,"changefreq":30,"priority":31,"images":15042},[15043],{"loc":710},{"type":35,"children":15045,"toc":15224},[15046,15050,15054,15102,15112,15116,15120,15124,15187,15190,15200,15204],{"type":38,"tag":46,"props":15047,"children":15048},{"id":2877},[15049],{"type":43,"value":2880},{"type":38,"tag":39,"props":15051,"children":15052},{},[15053],{"type":43,"value":2885},{"type":38,"tag":53,"props":15055,"children":15056},{},[15057,15072,15087],{"type":38,"tag":57,"props":15058,"children":15059},{},[15060,15061],{"type":43,"value":2893},{"type":38,"tag":53,"props":15062,"children":15063},{},[15064,15068],{"type":38,"tag":57,"props":15065,"children":15066},{},[15067],{"type":43,"value":2901},{"type":38,"tag":57,"props":15069,"children":15070},{},[15071],{"type":43,"value":2906},{"type":38,"tag":57,"props":15073,"children":15074},{},[15075,15076],{"type":43,"value":2911},{"type":38,"tag":53,"props":15077,"children":15078},{},[15079,15083],{"type":38,"tag":57,"props":15080,"children":15081},{},[15082],{"type":43,"value":2919},{"type":38,"tag":57,"props":15084,"children":15085},{},[15086],{"type":43,"value":2924},{"type":38,"tag":57,"props":15088,"children":15089},{},[15090,15091],{"type":43,"value":2929},{"type":38,"tag":53,"props":15092,"children":15093},{},[15094,15098],{"type":38,"tag":57,"props":15095,"children":15096},{},[15097],{"type":43,"value":2937},{"type":38,"tag":57,"props":15099,"children":15100},{},[15101],{"type":43,"value":2942},{"type":38,"tag":39,"props":15103,"children":15104},{},[15105,15106,15111],{"type":43,"value":2947},{"type":38,"tag":61,"props":15107,"children":15109},{"href":2950,"rel":15108},[65],[15110],{"type":43,"value":2950},{"type":43,"value":2955},{"type":38,"tag":39,"props":15113,"children":15114},{},[15115],{"type":43,"value":2960},{"type":38,"tag":46,"props":15117,"children":15118},{"id":2963},[15119],{"type":43,"value":2966},{"type":38,"tag":39,"props":15121,"children":15122},{},[15123],{"type":43,"value":2971},{"type":38,"tag":53,"props":15125,"children":15126},{},[15127,15146,15161,15172],{"type":38,"tag":57,"props":15128,"children":15129},{},[15130,15131],{"type":43,"value":2979},{"type":38,"tag":53,"props":15132,"children":15133},{},[15134,15138,15142],{"type":38,"tag":57,"props":15135,"children":15136},{},[15137],{"type":43,"value":2987},{"type":38,"tag":57,"props":15139,"children":15140},{},[15141],{"type":43,"value":2992},{"type":38,"tag":57,"props":15143,"children":15144},{},[15145],{"type":43,"value":2997},{"type":38,"tag":57,"props":15147,"children":15148},{},[15149,15150],{"type":43,"value":3002},{"type":38,"tag":53,"props":15151,"children":15152},{},[15153,15157],{"type":38,"tag":57,"props":15154,"children":15155},{},[15156],{"type":43,"value":3010},{"type":38,"tag":57,"props":15158,"children":15159},{},[15160],{"type":43,"value":3015},{"type":38,"tag":57,"props":15162,"children":15163},{},[15164,15165],{"type":43,"value":3020},{"type":38,"tag":53,"props":15166,"children":15167},{},[15168],{"type":38,"tag":57,"props":15169,"children":15170},{},[15171],{"type":43,"value":3028},{"type":38,"tag":57,"props":15173,"children":15174},{},[15175,15176,15180],{"type":43,"value":3033},{"type":38,"tag":76,"props":15177,"children":15178},{},[15179],{"type":43,"value":3038},{"type":38,"tag":53,"props":15181,"children":15182},{},[15183],{"type":38,"tag":57,"props":15184,"children":15185},{},[15186],{"type":43,"value":3046},{"type":38,"tag":3048,"props":15188,"children":15189},{"width":3050,"height":3051,"frameBorder":3052,"src":3053,"scrolling":3054,"style":3055},[],{"type":38,"tag":39,"props":15191,"children":15192},{},[15193,15194,15199],{"type":43,"value":3061},{"type":38,"tag":61,"props":15195,"children":15197},{"href":3064,"rel":15196},[65],[15198],{"type":43,"value":3068},{"type":43,"value":3070},{"type":38,"tag":46,"props":15201,"children":15202},{"id":675},[15203],{"type":43,"value":678},{"type":38,"tag":39,"props":15205,"children":15206},{},[15207,15208,15212,15213,15217,15218,15223],{"type":43,"value":3079},{"type":38,"tag":61,"props":15209,"children":15210},{"href":1799},[15211],{"type":43,"value":3084},{"type":43,"value":3086},{"type":38,"tag":61,"props":15214,"children":15215},{"href":2408},[15216],{"type":43,"value":3091},{"type":43,"value":3093},{"type":38,"tag":61,"props":15219,"children":15221},{"href":3096,"rel":15220},[65],[15222],{"type":43,"value":3100},{"type":43,"value":3102},{"title":8,"searchDepth":685,"depth":685,"links":15225},[15226,15227,15228],{"id":2877,"depth":685,"text":2880},{"id":2963,"depth":685,"text":2966},{"id":675,"depth":685,"text":678},{"_path":3112,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3113,"description":3114,"seoTitle":3115,"seoDescription":3116,"keywords":15230,"image":18,"alt":8,"ogImage":18,"tags":15231,"categories":15232,"published":25,"author":26,"link":3112,"date":3123,"sitemap":15233,"body":15236,"_type":693,"_id":3264,"_source":695,"_file":3265,"_stem":3266,"_extension":698},[3118,3119,3120,1618],[21,22,23],[21,22,23],{"loc":3125,"lastmod":3123,"changefreq":30,"priority":31,"images":15234},[15235],{"loc":18},{"type":35,"children":15237,"toc":15347},[15238,15257,15261,15265,15272,15276,15283,15287,15291,15298,15302,15309,15313,15317,15324,15328,15336,15340],{"type":38,"tag":39,"props":15239,"children":15240},{},[15241,15242,15246,15247,15251,15252,15256],{"type":43,"value":3134},{"type":38,"tag":72,"props":15243,"children":15244},{},[15245],{"type":43,"value":3139},{"type":43,"value":3141},{"type":38,"tag":61,"props":15248,"children":15249},{"href":5},[15250],{"type":43,"value":1061},{"type":43,"value":3147},{"type":38,"tag":61,"props":15253,"children":15254},{"href":2659},[15255],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":15258,"children":15259},{"id":3155},[15260],{"type":43,"value":3158},{"type":38,"tag":39,"props":15262,"children":15263},{},[15264],{"type":43,"value":3163},{"type":38,"tag":790,"props":15266,"children":15267},{"code":3166},[15268],{"type":38,"tag":559,"props":15269,"children":15270},{"__ignoreMap":8},[15271],{"type":43,"value":3166},{"type":38,"tag":39,"props":15273,"children":15274},{},[15275],{"type":43,"value":3176},{"type":38,"tag":790,"props":15277,"children":15278},{"code":3179},[15279],{"type":38,"tag":559,"props":15280,"children":15281},{"__ignoreMap":8},[15282],{"type":43,"value":3179},{"type":38,"tag":46,"props":15284,"children":15285},{"id":3187},[15286],{"type":43,"value":571},{"type":38,"tag":39,"props":15288,"children":15289},{},[15290],{"type":43,"value":3194},{"type":38,"tag":790,"props":15292,"children":15293},{"code":3197},[15294],{"type":38,"tag":559,"props":15295,"children":15296},{"__ignoreMap":8},[15297],{"type":43,"value":3197},{"type":38,"tag":39,"props":15299,"children":15300},{},[15301],{"type":43,"value":3207},{"type":38,"tag":790,"props":15303,"children":15304},{"code":3210},[15305],{"type":38,"tag":559,"props":15306,"children":15307},{"__ignoreMap":8},[15308],{"type":43,"value":3210},{"type":38,"tag":46,"props":15310,"children":15311},{"id":3218},[15312],{"type":43,"value":3221},{"type":38,"tag":39,"props":15314,"children":15315},{},[15316],{"type":43,"value":3226},{"type":38,"tag":790,"props":15318,"children":15319},{"code":3229},[15320],{"type":38,"tag":559,"props":15321,"children":15322},{"__ignoreMap":8},[15323],{"type":43,"value":3229},{"type":38,"tag":1759,"props":15325,"children":15326},{"id":1761},[15327],{"type":43,"value":2829},{"type":38,"tag":39,"props":15329,"children":15330},{},[15331],{"type":38,"tag":61,"props":15332,"children":15334},{"href":1770,":target":1094,"rel":15333},[65],[15335],{"type":43,"value":1774},{"type":38,"tag":1759,"props":15337,"children":15338},{"id":2390},[15339],{"type":43,"value":2393},{"type":38,"tag":39,"props":15341,"children":15342},{},[15343],{"type":38,"tag":61,"props":15344,"children":15345},{"href":2659},[15346],{"type":43,"value":3258},{"title":8,"searchDepth":685,"depth":685,"links":15348},[15349,15350,15351],{"id":3155,"depth":685,"text":3158},{"id":3187,"depth":685,"text":571},{"id":3218,"depth":685,"text":3221},{"_path":3268,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3269,"description":3270,"seoTitle":3271,"seoDescription":3272,"keywords":15353,"image":710,"alt":1268,"ogImage":710,"tags":15354,"categories":15355,"published":25,"author":26,"link":3268,"date":3280,"sitemap":15356,"body":15359,"_type":693,"_id":3486,"_source":695,"_file":3487,"_stem":3488,"_extension":698},[3274,3275,3276,3277],[21,713,714],[21,713,714],{"loc":3282,"lastmod":3280,"changefreq":30,"priority":31,"images":15357},[15358],{"loc":710},{"type":35,"children":15360,"toc":15513},[15361,15365,15373,15377,15381,15385,15392,15399,15406,15413,15422,15426,15430,15437,15446,15450,15454,15458,15465,15469,15473,15495,15499],{"type":38,"tag":46,"props":15362,"children":15363},{"id":3289},[15364],{"type":43,"value":3292},{"type":38,"tag":39,"props":15366,"children":15367},{},[15368,15369,15372],{"type":43,"value":3297},{"type":38,"tag":1303,"props":15370,"children":15371},{},[],{"type":43,"value":3302},{"type":38,"tag":46,"props":15374,"children":15375},{"id":3305},[15376],{"type":43,"value":3308},{"type":38,"tag":39,"props":15378,"children":15379},{},[15380],{"type":43,"value":3313},{"type":38,"tag":39,"props":15382,"children":15383},{},[15384],{"type":43,"value":3318},{"type":38,"tag":790,"props":15386,"children":15387},{"code":3321},[15388],{"type":38,"tag":559,"props":15389,"children":15390},{"__ignoreMap":8},[15391],{"type":43,"value":3321},{"type":38,"tag":39,"props":15393,"children":15394},{},[15395],{"type":38,"tag":76,"props":15396,"children":15397},{},[15398],{"type":43,"value":3334},{"type":38,"tag":790,"props":15400,"children":15401},{"code":3337},[15402],{"type":38,"tag":559,"props":15403,"children":15404},{"__ignoreMap":8},[15405],{"type":43,"value":3337},{"type":38,"tag":39,"props":15407,"children":15408},{},[15409],{"type":38,"tag":76,"props":15410,"children":15411},{},[15412],{"type":43,"value":3350},{"type":38,"tag":39,"props":15414,"children":15415},{},[15416,15417,15421],{"type":43,"value":3355},{"type":38,"tag":72,"props":15418,"children":15419},{},[15420],{"type":43,"value":3360},{"type":43,"value":3362},{"type":38,"tag":46,"props":15423,"children":15424},{"id":3365},[15425],{"type":43,"value":3368},{"type":38,"tag":39,"props":15427,"children":15428},{},[15429],{"type":43,"value":3373},{"type":38,"tag":790,"props":15431,"children":15432},{"code":3376},[15433],{"type":38,"tag":559,"props":15434,"children":15435},{"__ignoreMap":8},[15436],{"type":43,"value":3376},{"type":38,"tag":39,"props":15438,"children":15439},{},[15440,15441,15445],{"type":43,"value":3386},{"type":38,"tag":76,"props":15442,"children":15443},{},[15444],{"type":43,"value":3391},{"type":43,"value":3393},{"type":38,"tag":39,"props":15447,"children":15448},{},[15449],{"type":43,"value":3398},{"type":38,"tag":46,"props":15451,"children":15452},{"id":3401},[15453],{"type":43,"value":3404},{"type":38,"tag":39,"props":15455,"children":15456},{},[15457],{"type":43,"value":3409},{"type":38,"tag":790,"props":15459,"children":15460},{"code":3412},[15461],{"type":38,"tag":559,"props":15462,"children":15463},{"__ignoreMap":8},[15464],{"type":43,"value":3412},{"type":38,"tag":39,"props":15466,"children":15467},{},[15468],{"type":43,"value":3422},{"type":38,"tag":46,"props":15470,"children":15471},{"id":3425},[15472],{"type":43,"value":3428},{"type":38,"tag":53,"props":15474,"children":15475},{},[15476],{"type":38,"tag":57,"props":15477,"children":15478},{},[15479,15480],{"type":43,"value":3436},{"type":38,"tag":53,"props":15481,"children":15482},{},[15483,15487,15491],{"type":38,"tag":57,"props":15484,"children":15485},{},[15486],{"type":43,"value":3444},{"type":38,"tag":57,"props":15488,"children":15489},{},[15490],{"type":43,"value":3449},{"type":38,"tag":57,"props":15492,"children":15493},{},[15494],{"type":43,"value":3454},{"type":38,"tag":46,"props":15496,"children":15497},{"id":675},[15498],{"type":43,"value":678},{"type":38,"tag":39,"props":15500,"children":15501},{},[15502,15506,15507,15512],{"type":38,"tag":61,"props":15503,"children":15504},{"href":2856},[15505],{"type":43,"value":3466},{"type":43,"value":3468},{"type":38,"tag":61,"props":15508,"children":15510},{"href":3471,"rel":15509},[65],[15511],{"type":43,"value":3475},{"type":43,"value":3477},{"title":8,"searchDepth":685,"depth":685,"links":15514},[15515,15516,15517,15518,15519,15520],{"id":3289,"depth":685,"text":3292},{"id":3305,"depth":685,"text":3308},{"id":3365,"depth":685,"text":3368},{"id":3401,"depth":685,"text":3404},{"id":3425,"depth":685,"text":3428},{"id":675,"depth":685,"text":678},{"_path":3490,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3491,"description":3492,"seoTitle":3493,"seoDescription":3494,"keywords":15522,"image":18,"alt":8,"ogImage":18,"tags":15523,"categories":15524,"published":25,"author":26,"link":3490,"date":3502,"sitemap":15525,"body":15528,"_type":693,"_id":3610,"_source":695,"_file":3611,"_stem":3612,"_extension":698},[3496,3497,3498,3499],[21,22,23],[21,22,23],{"loc":3504,"lastmod":3502,"changefreq":30,"priority":31,"images":15526},[15527],{"loc":18},{"type":35,"children":15529,"toc":15613},[15530,15549,15553,15560,15564,15568,15575,15579,15583,15590,15594,15602,15606],{"type":38,"tag":39,"props":15531,"children":15532},{},[15533,15534,15538,15539,15543,15544,15548],{"type":43,"value":3134},{"type":38,"tag":72,"props":15535,"children":15536},{},[15537],{"type":43,"value":3517},{"type":43,"value":3519},{"type":38,"tag":61,"props":15540,"children":15541},{"href":5},[15542],{"type":43,"value":1061},{"type":43,"value":3525},{"type":38,"tag":61,"props":15545,"children":15546},{"href":3112},[15547],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":15550,"children":15551},{"id":3533},[15552],{"type":43,"value":586},{"type":38,"tag":790,"props":15554,"children":15555},{"code":3538},[15556],{"type":38,"tag":559,"props":15557,"children":15558},{"__ignoreMap":8},[15559],{"type":43,"value":3538},{"type":38,"tag":46,"props":15561,"children":15562},{"id":3546},[15563],{"type":43,"value":581},{"type":38,"tag":39,"props":15565,"children":15566},{},[15567],{"type":43,"value":3553},{"type":38,"tag":790,"props":15569,"children":15570},{"code":3556},[15571],{"type":38,"tag":559,"props":15572,"children":15573},{"__ignoreMap":8},[15574],{"type":43,"value":3556},{"type":38,"tag":46,"props":15576,"children":15577},{"id":3564},[15578],{"type":43,"value":3567},{"type":38,"tag":39,"props":15580,"children":15581},{},[15582],{"type":43,"value":3572},{"type":38,"tag":790,"props":15584,"children":15585},{"code":3575},[15586],{"type":38,"tag":559,"props":15587,"children":15588},{"__ignoreMap":8},[15589],{"type":43,"value":3575},{"type":38,"tag":1759,"props":15591,"children":15592},{"id":1761},[15593],{"type":43,"value":2829},{"type":38,"tag":39,"props":15595,"children":15596},{},[15597],{"type":38,"tag":61,"props":15598,"children":15600},{"href":1770,":target":1094,"rel":15599},[65],[15601],{"type":43,"value":1774},{"type":38,"tag":1759,"props":15603,"children":15604},{"id":2390},[15605],{"type":43,"value":2393},{"type":38,"tag":39,"props":15607,"children":15608},{},[15609],{"type":38,"tag":61,"props":15610,"children":15611},{"href":3112},[15612],{"type":43,"value":3604},{"title":8,"searchDepth":685,"depth":685,"links":15614},[15615,15616,15617],{"id":3533,"depth":685,"text":586},{"id":3546,"depth":685,"text":581},{"id":3564,"depth":685,"text":3567},{"_path":3614,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3615,"description":3616,"seoTitle":3617,"seoDescription":3618,"keywords":15619,"image":18,"alt":3624,"ogImage":18,"tags":15620,"categories":15621,"published":25,"author":26,"link":3614,"date":3627,"sitemap":15622,"body":15625,"_type":693,"_id":3733,"_source":695,"_file":3734,"_stem":3735,"_extension":698},[3620,3621,3622,3623],[21,22,23],[21,22,23],{"loc":3629,"lastmod":3627,"changefreq":30,"priority":31,"images":15623},[15624],{"loc":18},{"type":35,"children":15626,"toc":15706},[15627,15646,15650,15654,15661,15665,15675,15679,15683,15687,15695,15699],{"type":38,"tag":39,"props":15628,"children":15629},{},[15630,15631,15635,15636,15640,15641,15645],{"type":43,"value":3134},{"type":38,"tag":72,"props":15632,"children":15633},{},[15634],{"type":43,"value":3642},{"type":43,"value":3644},{"type":38,"tag":61,"props":15637,"children":15638},{"href":5},[15639],{"type":43,"value":1061},{"type":43,"value":3650},{"type":38,"tag":61,"props":15642,"children":15643},{"href":3490},[15644],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":15647,"children":15648},{"id":3658},[15649],{"type":43,"value":3661},{"type":38,"tag":39,"props":15651,"children":15652},{},[15653],{"type":43,"value":3666},{"type":38,"tag":790,"props":15655,"children":15656},{"code":3669},[15657],{"type":38,"tag":559,"props":15658,"children":15659},{"__ignoreMap":8},[15660],{"type":43,"value":3669},{"type":38,"tag":46,"props":15662,"children":15663},{"id":3677},[15664],{"type":43,"value":3680},{"type":38,"tag":39,"props":15666,"children":15667},{},[15668,15669,15674],{"type":43,"value":3685},{"type":38,"tag":559,"props":15670,"children":15672},{"className":15671},[],[15673],{"type":43,"value":608},{"type":43,"value":3692},{"type":38,"tag":46,"props":15676,"children":15677},{"id":3695},[15678],{"type":43,"value":3698},{"type":38,"tag":39,"props":15680,"children":15681},{},[15682],{"type":43,"value":3703},{"type":38,"tag":39,"props":15684,"children":15685},{},[15686],{"type":43,"value":2829},{"type":38,"tag":39,"props":15688,"children":15689},{},[15690],{"type":38,"tag":61,"props":15691,"children":15693},{"href":1770,":target":1094,"rel":15692},[65],[15694],{"type":43,"value":1774},{"type":38,"tag":39,"props":15696,"children":15697},{},[15698],{"type":43,"value":2393},{"type":38,"tag":39,"props":15700,"children":15701},{},[15702],{"type":38,"tag":61,"props":15703,"children":15704},{"href":3504},[15705],{"type":43,"value":3727},{"title":8,"searchDepth":685,"depth":685,"links":15707},[15708,15709,15710],{"id":3658,"depth":685,"text":3661},{"id":3677,"depth":685,"text":3680},{"id":3695,"depth":685,"text":3698},{"_path":3737,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3738,"description":3739,"seoTitle":3740,"seoDescription":3741,"keywords":15712,"image":710,"alt":3747,"ogImage":710,"tags":15713,"categories":15714,"published":25,"author":26,"link":3737,"date":3750,"sitemap":15715,"body":15723,"_type":693,"_id":3965,"_source":695,"_file":3966,"_stem":3967,"_extension":698},[3743,3744,3745,3746],[21,713,714],[21,713,714],{"loc":3752,"lastmod":3750,"changefreq":30,"priority":31,"images":15716},[15717,15718,15719,15720,15721,15722],{"loc":710},{"loc":3756},{"loc":3758},{"loc":3760},{"loc":3762},{"loc":3764},{"type":35,"children":15724,"toc":15889},[15725,15729,15733,15740,15755,15762,15777,15797,15801,15808,15823,15830,15845,15848,15855,15870,15874],{"type":38,"tag":46,"props":15726,"children":15727},{"id":3769},[15728],{"type":43,"value":3772},{"type":38,"tag":39,"props":15730,"children":15731},{},[15732],{"type":43,"value":3777},{"type":38,"tag":53,"props":15734,"children":15735},{},[15736],{"type":38,"tag":57,"props":15737,"children":15738},{},[15739],{"type":43,"value":3785},{"type":38,"tag":1383,"props":15741,"children":15742},{},[15743],{"type":38,"tag":2148,"props":15744,"children":15745},{"style":2150},[15746,15747,15750,15751],{"type":43,"value":2153},{"type":38,"tag":1885,"props":15748,"children":15749},{"style":2156,"src":3756,"alt":3795},[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":15752,"children":15753},{},[15754],{"type":43,"value":3795},{"type":38,"tag":53,"props":15756,"children":15757},{},[15758],{"type":38,"tag":57,"props":15759,"children":15760},{},[15761],{"type":43,"value":3809},{"type":38,"tag":1383,"props":15763,"children":15764},{},[15765],{"type":38,"tag":2148,"props":15766,"children":15767},{"style":2150},[15768,15769,15772,15773],{"type":43,"value":2153},{"type":38,"tag":1885,"props":15770,"children":15771},{"style":2156,"src":3758,"alt":3819},[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":15774,"children":15775},{},[15776],{"type":43,"value":3826},{"type":38,"tag":39,"props":15778,"children":15779},{},[15780,15781,15786,15787,15791,15792,15796],{"type":43,"value":3831},{"type":38,"tag":61,"props":15782,"children":15784},{"href":3834,"rel":15783},[65],[15785],{"type":43,"value":3838},{"type":43,"value":3840},{"type":38,"tag":61,"props":15788,"children":15789},{"href":718},[15790],{"type":43,"value":3838},{"type":43,"value":3846},{"type":38,"tag":61,"props":15793,"children":15794},{"href":718},[15795],{"type":43,"value":3851},{"type":43,"value":3853},{"type":38,"tag":46,"props":15798,"children":15799},{"id":3856},[15800],{"type":43,"value":3859},{"type":38,"tag":790,"props":15802,"children":15803},{"code":3862},[15804],{"type":38,"tag":559,"props":15805,"children":15806},{"__ignoreMap":8},[15807],{"type":43,"value":3862},{"type":38,"tag":1383,"props":15809,"children":15810},{},[15811],{"type":38,"tag":2148,"props":15812,"children":15813},{"style":2150},[15814,15815,15818,15819],{"type":43,"value":2153},{"type":38,"tag":1885,"props":15816,"children":15817},{"style":2156,"src":3760,"alt":3877},[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":15820,"children":15821},{},[15822],{"type":43,"value":3877},{"type":38,"tag":790,"props":15824,"children":15825},{"code":3886},[15826],{"type":38,"tag":559,"props":15827,"children":15828},{"__ignoreMap":8},[15829],{"type":43,"value":3886},{"type":38,"tag":1383,"props":15831,"children":15832},{},[15833],{"type":38,"tag":2148,"props":15834,"children":15835},{"style":2150},[15836,15837,15840,15841],{"type":43,"value":2153},{"type":38,"tag":1885,"props":15838,"children":15839},{"style":2156,"src":3762,"alt":3901},[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":15842,"children":15843},{},[15844],{"type":43,"value":3901},{"type":38,"tag":1303,"props":15846,"children":15847},{},[],{"type":38,"tag":790,"props":15849,"children":15850},{"code":3913},[15851],{"type":38,"tag":559,"props":15852,"children":15853},{"__ignoreMap":8},[15854],{"type":43,"value":3913},{"type":38,"tag":1383,"props":15856,"children":15857},{},[15858],{"type":38,"tag":2148,"props":15859,"children":15860},{"style":2150},[15861,15862,15865,15866],{"type":43,"value":2153},{"type":38,"tag":1885,"props":15863,"children":15864},{"style":2156,"src":3764,"alt":3928},[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":15867,"children":15868},{},[15869],{"type":43,"value":3935},{"type":38,"tag":46,"props":15871,"children":15872},{"id":1573},[15873],{"type":43,"value":1576},{"type":38,"tag":39,"props":15875,"children":15876},{},[15877,15878,15883,15884,15888],{"type":43,"value":3944},{"type":38,"tag":61,"props":15879,"children":15881},{"href":3947,"rel":15880},[65],[15882],{"type":43,"value":1595},{"type":43,"value":3952},{"type":38,"tag":61,"props":15885,"children":15886},{"href":718},[15887],{"type":43,"value":3957},{"type":43,"value":3959},{"title":8,"searchDepth":685,"depth":685,"links":15890},[15891,15892,15893],{"id":3769,"depth":685,"text":3772},{"id":3856,"depth":685,"text":3859},{"id":1573,"depth":685,"text":1576},{"_path":3969,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3970,"description":3971,"seoTitle":3972,"seoDescription":3973,"keywords":15895,"image":18,"alt":3624,"ogImage":18,"tags":15896,"categories":15897,"published":25,"author":26,"link":3969,"date":3981,"sitemap":15898,"body":15901,"_type":693,"_id":4152,"_source":695,"_file":4153,"_stem":4154,"_extension":698},[3975,3976,3977,3978],[21,22,23],[21,22,23],{"loc":3983,"lastmod":3981,"changefreq":30,"priority":31,"images":15899},[15900],{"loc":18},{"type":35,"children":15902,"toc":16034},[15903,15922,15926,15930,15934,15941,15945,15949,15960,15967,15977,15981,15985,15989,15993,16000,16004,16011,16015,16023,16027],{"type":38,"tag":39,"props":15904,"children":15905},{},[15906,15907,15911,15912,15916,15917,15921],{"type":43,"value":3134},{"type":38,"tag":72,"props":15908,"children":15909},{},[15910],{"type":43,"value":3996},{"type":43,"value":3998},{"type":38,"tag":61,"props":15913,"children":15914},{"href":5},[15915],{"type":43,"value":1061},{"type":43,"value":4004},{"type":38,"tag":61,"props":15918,"children":15919},{"href":3614},[15920],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":15923,"children":15924},{"id":4012},[15925],{"type":43,"value":4015},{"type":38,"tag":39,"props":15927,"children":15928},{},[15929],{"type":43,"value":4020},{"type":38,"tag":39,"props":15931,"children":15932},{},[15933],{"type":43,"value":4025},{"type":38,"tag":790,"props":15935,"children":15936},{"code":4028},[15937],{"type":38,"tag":559,"props":15938,"children":15939},{"__ignoreMap":8},[15940],{"type":43,"value":4028},{"type":38,"tag":46,"props":15942,"children":15943},{"id":4036},[15944],{"type":43,"value":4039},{"type":38,"tag":39,"props":15946,"children":15947},{},[15948],{"type":43,"value":4044},{"type":38,"tag":53,"props":15950,"children":15951},{},[15952,15956],{"type":38,"tag":57,"props":15953,"children":15954},{},[15955],{"type":43,"value":4052},{"type":38,"tag":57,"props":15957,"children":15958},{},[15959],{"type":43,"value":4057},{"type":38,"tag":790,"props":15961,"children":15962},{"code":4060},[15963],{"type":38,"tag":559,"props":15964,"children":15965},{"__ignoreMap":8},[15966],{"type":43,"value":4060},{"type":38,"tag":39,"props":15968,"children":15969},{},[15970,15971,15976],{"type":43,"value":4070},{"type":38,"tag":61,"props":15972,"children":15974},{"href":4073,":target":1094,"rel":15973},[65],[15975],{"type":43,"value":1061},{"type":43,"value":4078},{"type":38,"tag":4080,"props":15978,"children":15979},{"id":4082},[15980],{"type":43,"value":4085},{"type":38,"tag":39,"props":15982,"children":15983},{},[15984],{"type":43,"value":4090},{"type":38,"tag":46,"props":15986,"children":15987},{"id":4093},[15988],{"type":43,"value":4096},{"type":38,"tag":39,"props":15990,"children":15991},{},[15992],{"type":43,"value":4101},{"type":38,"tag":790,"props":15994,"children":15995},{"code":4104},[15996],{"type":38,"tag":559,"props":15997,"children":15998},{"__ignoreMap":8},[15999],{"type":43,"value":4104},{"type":38,"tag":39,"props":16001,"children":16002},{},[16003],{"type":43,"value":4114},{"type":38,"tag":790,"props":16005,"children":16006},{"code":4117},[16007],{"type":38,"tag":559,"props":16008,"children":16009},{"__ignoreMap":8},[16010],{"type":43,"value":4117},{"type":38,"tag":39,"props":16012,"children":16013},{},[16014],{"type":43,"value":2829},{"type":38,"tag":39,"props":16016,"children":16017},{},[16018],{"type":38,"tag":61,"props":16019,"children":16021},{"href":1770,":target":1094,"rel":16020},[65],[16022],{"type":43,"value":1774},{"type":38,"tag":39,"props":16024,"children":16025},{},[16026],{"type":43,"value":1780},{"type":38,"tag":39,"props":16028,"children":16029},{},[16030],{"type":38,"tag":61,"props":16031,"children":16032},{"href":3614},[16033],{"type":43,"value":4146},{"title":8,"searchDepth":685,"depth":685,"links":16035},[16036,16037,16038],{"id":4012,"depth":685,"text":4015},{"id":4036,"depth":685,"text":4039},{"id":4093,"depth":685,"text":4096},{"_path":4156,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":4157,"description":4158,"seoTitle":4159,"seoDescription":4160,"keywords":16040,"image":4167,"alt":4168,"ogImage":4167,"tags":16041,"categories":16042,"published":25,"author":26,"link":4156,"date":4175,"sitemap":16043,"body":16046,"_type":693,"_id":4454,"_source":695,"_file":4455,"_stem":4456,"_extension":698},[4162,4163,4164,4165,4166],[4162,19,4170,4171],[4173,4174],{"loc":4177,"lastmod":4175,"changefreq":30,"priority":31,"images":16044},[16045],{"loc":4167},{"type":35,"children":16047,"toc":16252},[16048,16052,16061,16065,16068,16072,16076,16095,16099,16102,16106,16110,16117,16120,16124,16128,16132,16140,16144,16152,16156,16164,16168,16172,16191,16195,16214,16218,16244,16248],{"type":38,"tag":4183,"props":16049,"children":16050},{"id":4185},[16051],{"type":43,"value":4157},{"type":38,"tag":39,"props":16053,"children":16054},{},[16055,16056,16060],{"type":43,"value":4192},{"type":38,"tag":72,"props":16057,"children":16058},{},[16059],{"type":43,"value":4164},{"type":43,"value":4198},{"type":38,"tag":39,"props":16062,"children":16063},{},[16064],{"type":43,"value":4203},{"type":38,"tag":1221,"props":16066,"children":16067},{},[],{"type":38,"tag":46,"props":16069,"children":16070},{"id":4209},[16071],{"type":43,"value":4212},{"type":38,"tag":39,"props":16073,"children":16074},{},[16075],{"type":43,"value":4217},{"type":38,"tag":53,"props":16077,"children":16078},{},[16079,16087],{"type":38,"tag":57,"props":16080,"children":16081},{},[16082,16086],{"type":38,"tag":72,"props":16083,"children":16084},{},[16085],{"type":43,"value":4228},{"type":43,"value":4230},{"type":38,"tag":57,"props":16088,"children":16089},{},[16090,16094],{"type":38,"tag":72,"props":16091,"children":16092},{},[16093],{"type":43,"value":4238},{"type":43,"value":4240},{"type":38,"tag":39,"props":16096,"children":16097},{},[16098],{"type":43,"value":4245},{"type":38,"tag":1221,"props":16100,"children":16101},{},[],{"type":38,"tag":46,"props":16103,"children":16104},{"id":4251},[16105],{"type":43,"value":4254},{"type":38,"tag":39,"props":16107,"children":16108},{},[16109],{"type":43,"value":4259},{"type":38,"tag":790,"props":16111,"children":16112},{"code":4262},[16113],{"type":38,"tag":559,"props":16114,"children":16115},{"__ignoreMap":8},[16116],{"type":43,"value":4262},{"type":38,"tag":1221,"props":16118,"children":16119},{},[],{"type":38,"tag":46,"props":16121,"children":16122},{"id":4273},[16123],{"type":43,"value":4276},{"type":38,"tag":39,"props":16125,"children":16126},{},[16127],{"type":43,"value":4281},{"type":38,"tag":4283,"props":16129,"children":16130},{"id":4285},[16131],{"type":43,"value":4288},{"type":38,"tag":790,"props":16133,"children":16135},{"code":4291,"language":23,"meta":8,"className":16134},[4293],[16136],{"type":38,"tag":559,"props":16137,"children":16138},{"__ignoreMap":8},[16139],{"type":43,"value":4291},{"type":38,"tag":4283,"props":16141,"children":16142},{"id":4301},[16143],{"type":43,"value":4304},{"type":38,"tag":790,"props":16145,"children":16147},{"code":4307,"language":23,"meta":8,"className":16146},[4293],[16148],{"type":38,"tag":559,"props":16149,"children":16150},{"__ignoreMap":8},[16151],{"type":43,"value":4307},{"type":38,"tag":4283,"props":16153,"children":16154},{"id":4316},[16155],{"type":43,"value":4319},{"type":38,"tag":790,"props":16157,"children":16159},{"code":4322,"language":23,"meta":8,"className":16158},[4293],[16160],{"type":38,"tag":559,"props":16161,"children":16162},{"__ignoreMap":8},[16163],{"type":43,"value":4322},{"type":38,"tag":4283,"props":16165,"children":16166},{"id":4331},[16167],{"type":43,"value":4334},{"type":38,"tag":39,"props":16169,"children":16170},{},[16171],{"type":43,"value":4339},{"type":38,"tag":53,"props":16173,"children":16174},{},[16175,16179,16183,16187],{"type":38,"tag":57,"props":16176,"children":16177},{},[16178],{"type":43,"value":4347},{"type":38,"tag":57,"props":16180,"children":16181},{},[16182],{"type":43,"value":4352},{"type":38,"tag":57,"props":16184,"children":16185},{},[16186],{"type":43,"value":4357},{"type":38,"tag":57,"props":16188,"children":16189},{},[16190],{"type":43,"value":4362},{"type":38,"tag":4283,"props":16192,"children":16193},{"id":4365},[16194],{"type":43,"value":4368},{"type":38,"tag":53,"props":16196,"children":16197},{},[16198,16202,16206,16210],{"type":38,"tag":57,"props":16199,"children":16200},{},[16201],{"type":43,"value":4376},{"type":38,"tag":57,"props":16203,"children":16204},{},[16205],{"type":43,"value":4381},{"type":38,"tag":57,"props":16207,"children":16208},{},[16209],{"type":43,"value":4386},{"type":38,"tag":57,"props":16211,"children":16212},{},[16213],{"type":43,"value":4391},{"type":38,"tag":4283,"props":16215,"children":16216},{"id":4394},[16217],{"type":43,"value":4397},{"type":38,"tag":53,"props":16219,"children":16220},{},[16221],{"type":38,"tag":57,"props":16222,"children":16223},{},[16224,16225],{"type":43,"value":4405},{"type":38,"tag":53,"props":16226,"children":16227},{},[16228,16232,16236,16240],{"type":38,"tag":57,"props":16229,"children":16230},{},[16231],{"type":43,"value":4413},{"type":38,"tag":57,"props":16233,"children":16234},{},[16235],{"type":43,"value":4418},{"type":38,"tag":57,"props":16237,"children":16238},{},[16239],{"type":43,"value":4423},{"type":38,"tag":57,"props":16241,"children":16242},{},[16243],{"type":43,"value":4428},{"type":38,"tag":4283,"props":16245,"children":16246},{"id":4431},[16247],{"type":43,"value":4434},{"type":38,"tag":39,"props":16249,"children":16250},{},[16251],{"type":43,"value":4439},{"title":8,"searchDepth":685,"depth":685,"links":16253},[16254,16255,16256],{"id":4209,"depth":685,"text":4212},{"id":4251,"depth":685,"text":4254},{"id":4273,"depth":685,"text":4276,"children":16257},[16258,16259,16260,16261,16262,16263,16264],{"id":4285,"depth":4447,"text":4288},{"id":4301,"depth":4447,"text":4304},{"id":4316,"depth":4447,"text":4319},{"id":4331,"depth":4447,"text":4334},{"id":4365,"depth":4447,"text":4368},{"id":4394,"depth":4447,"text":4397},{"id":4431,"depth":4447,"text":4434},{"_path":4458,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":4459,"description":4460,"seoTitle":4461,"seoDescription":4462,"keywords":16266,"image":4468,"alt":1268,"ogImage":4468,"tags":16267,"categories":16268,"published":25,"author":26,"link":4458,"date":4475,"sitemap":16269,"body":16272,"_type":693,"_id":4745,"_source":695,"_file":4746,"_stem":4747,"_extension":698},[4464,4465,4466,4467],[4470,4174,4471,714],[4470,21,23,4473,4474],{"loc":4477,"lastmod":4475,"changefreq":30,"priority":31,"images":16270},[16271],{"loc":4468},{"type":35,"children":16273,"toc":16481},[16274,16278,16282,16286,16301,16311,16315,16319,16326,16330,16340,16351,16358,16362,16366,16373,16377,16381,16392,16396,16403,16407,16423,16427,16434,16438,16449,16456,16463,16467],{"type":38,"tag":39,"props":16275,"children":16276},{},[16277],{"type":43,"value":4486},{"type":38,"tag":46,"props":16279,"children":16280},{"id":4489},[16281],{"type":43,"value":4492},{"type":38,"tag":39,"props":16283,"children":16284},{},[16285],{"type":43,"value":4497},{"type":38,"tag":53,"props":16287,"children":16288},{},[16289,16293,16297],{"type":38,"tag":57,"props":16290,"children":16291},{},[16292],{"type":43,"value":4505},{"type":38,"tag":57,"props":16294,"children":16295},{},[16296],{"type":43,"value":4510},{"type":38,"tag":57,"props":16298,"children":16299},{},[16300],{"type":43,"value":4515},{"type":38,"tag":39,"props":16302,"children":16303},{},[16304,16305,16310],{"type":43,"value":4520},{"type":38,"tag":61,"props":16306,"children":16308},{"href":4523,"rel":16307},[65],[16309],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":46,"props":16312,"children":16313},{"id":4530},[16314],{"type":43,"value":4533},{"type":38,"tag":39,"props":16316,"children":16317},{},[16318],{"type":43,"value":4538},{"type":38,"tag":790,"props":16320,"children":16321},{"code":4541},[16322],{"type":38,"tag":559,"props":16323,"children":16324},{"__ignoreMap":8},[16325],{"type":43,"value":4541},{"type":38,"tag":46,"props":16327,"children":16328},{"id":4549},[16329],{"type":43,"value":4552},{"type":38,"tag":39,"props":16331,"children":16332},{},[16333,16334,16339],{"type":43,"value":4557},{"type":38,"tag":61,"props":16335,"children":16337},{"href":4560,"rel":16336},[65],[16338],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":2705,"props":16341,"children":16342},{},[16343,16347],{"type":38,"tag":39,"props":16344,"children":16345},{},[16346],{"type":43,"value":4572},{"type":38,"tag":39,"props":16348,"children":16349},{},[16350],{"type":43,"value":4577},{"type":38,"tag":790,"props":16352,"children":16353},{"code":4580},[16354],{"type":38,"tag":559,"props":16355,"children":16356},{"__ignoreMap":8},[16357],{"type":43,"value":4580},{"type":38,"tag":46,"props":16359,"children":16360},{"id":4588},[16361],{"type":43,"value":4591},{"type":38,"tag":39,"props":16363,"children":16364},{},[16365],{"type":43,"value":4596},{"type":38,"tag":790,"props":16367,"children":16368},{"code":4599},[16369],{"type":38,"tag":559,"props":16370,"children":16371},{"__ignoreMap":8},[16372],{"type":43,"value":4599},{"type":38,"tag":46,"props":16374,"children":16375},{"id":4607},[16376],{"type":43,"value":4610},{"type":38,"tag":39,"props":16378,"children":16379},{},[16380],{"type":43,"value":4615},{"type":38,"tag":53,"props":16382,"children":16383},{},[16384,16388],{"type":38,"tag":57,"props":16385,"children":16386},{},[16387],{"type":43,"value":4623},{"type":38,"tag":57,"props":16389,"children":16390},{},[16391],{"type":43,"value":4628},{"type":38,"tag":39,"props":16393,"children":16394},{},[16395],{"type":43,"value":4633},{"type":38,"tag":790,"props":16397,"children":16398},{"code":4636},[16399],{"type":38,"tag":559,"props":16400,"children":16401},{"__ignoreMap":8},[16402],{"type":43,"value":4636},{"type":38,"tag":39,"props":16404,"children":16405},{},[16406],{"type":43,"value":4646},{"type":38,"tag":1383,"props":16408,"children":16409},{},[16410],{"type":38,"tag":2148,"props":16411,"children":16412},{"style":2150},[16413,16414,16417,16418],{"type":43,"value":2153},{"type":38,"tag":1885,"props":16415,"children":16416},{"style":2156,"src":4656,"alt":4657},[],{"type":43,"value":2153},{"type":38,"tag":39,"props":16419,"children":16421},{"className":16420},[4663],[16422],{"type":43,"value":4666},{"type":38,"tag":39,"props":16424,"children":16425},{},[16426],{"type":43,"value":4671},{"type":38,"tag":790,"props":16428,"children":16429},{"code":4674},[16430],{"type":38,"tag":559,"props":16431,"children":16432},{"__ignoreMap":8},[16433],{"type":43,"value":4674},{"type":38,"tag":39,"props":16435,"children":16436},{},[16437],{"type":43,"value":4684},{"type":38,"tag":53,"props":16439,"children":16440},{},[16441],{"type":38,"tag":57,"props":16442,"children":16443},{},[16444],{"type":38,"tag":61,"props":16445,"children":16447},{"href":4693,"rel":16446},[65],[16448],{"type":43,"value":4693},{"type":38,"tag":790,"props":16450,"children":16451},{"code":4699},[16452],{"type":38,"tag":559,"props":16453,"children":16454},{"__ignoreMap":8},[16455],{"type":43,"value":4699},{"type":38,"tag":790,"props":16457,"children":16458},{"code":4707},[16459],{"type":38,"tag":559,"props":16460,"children":16461},{"__ignoreMap":8},[16462],{"type":43,"value":4707},{"type":38,"tag":46,"props":16464,"children":16465},{"id":675},[16466],{"type":43,"value":678},{"type":38,"tag":39,"props":16468,"children":16469},{},[16470,16471,16475,16476,16480],{"type":43,"value":4721},{"type":38,"tag":61,"props":16472,"children":16473},{"href":4724},[16474],{"type":43,"value":4727},{"type":43,"value":4729},{"type":38,"tag":61,"props":16477,"children":16478},{"href":4458},[16479],{"type":43,"value":4734},{"type":43,"value":4736},{"title":8,"searchDepth":685,"depth":685,"links":16482},[16483,16484,16485,16486,16487,16488],{"id":4489,"depth":685,"text":4492},{"id":4530,"depth":685,"text":4533},{"id":4549,"depth":685,"text":4552},{"id":4588,"depth":685,"text":4591},{"id":4607,"depth":685,"text":4610},{"id":675,"depth":685,"text":678},{"_path":4749,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":4750,"description":4751,"seoTitle":4752,"seoDescription":4753,"keywords":16490,"image":4760,"alt":4752,"ogImage":4760,"tags":16491,"categories":16492,"published":25,"author":26,"link":4749,"date":4768,"sitemap":16493,"body":16496,"_type":693,"_id":5103,"_source":695,"_file":5104,"_stem":5105,"_extension":698},[4755,4756,4757,4758,4759],[4755,4756,4762,4763,4764,4765],[4767,4755],{"loc":4770,"lastmod":4768,"changefreq":30,"priority":31,"images":16494},[16495],{"loc":4760},{"type":35,"children":16497,"toc":16746},[16498,16502,16506,16520,16524,16538,16542,16546,16550,16574,16578,16601,16605,16614,16634,16638,16642,16646,16654,16658,16662,16670,16674,16678,16682,16686,16697,16719,16723,16731,16735,16739],{"type":38,"tag":39,"props":16499,"children":16500},{},[16501],{"type":43,"value":4779},{"type":38,"tag":46,"props":16503,"children":16504},{"id":4782},[16505],{"type":43,"value":4785},{"type":38,"tag":39,"props":16507,"children":16508},{},[16509,16510,16514,16515,16519],{"type":43,"value":4790},{"type":38,"tag":72,"props":16511,"children":16512},{},[16513],{"type":43,"value":4795},{"type":43,"value":4797},{"type":38,"tag":72,"props":16516,"children":16517},{},[16518],{"type":43,"value":4802},{"type":43,"value":4804},{"type":38,"tag":39,"props":16521,"children":16522},{},[16523],{"type":43,"value":4809},{"type":38,"tag":39,"props":16525,"children":16526},{},[16527,16528,16532,16533,16537],{"type":43,"value":4814},{"type":38,"tag":72,"props":16529,"children":16530},{},[16531],{"type":43,"value":4819},{"type":43,"value":4821},{"type":38,"tag":72,"props":16534,"children":16535},{},[16536],{"type":43,"value":4802},{"type":43,"value":4827},{"type":38,"tag":39,"props":16539,"children":16540},{},[16541],{"type":43,"value":4832},{"type":38,"tag":46,"props":16543,"children":16544},{"id":4835},[16545],{"type":43,"value":4838},{"type":38,"tag":39,"props":16547,"children":16548},{},[16549],{"type":43,"value":4843},{"type":38,"tag":53,"props":16551,"children":16552},{},[16553,16562,16566,16570],{"type":38,"tag":57,"props":16554,"children":16555},{},[16556,16557,16561],{"type":43,"value":4851},{"type":38,"tag":72,"props":16558,"children":16559},{},[16560],{"type":43,"value":4856},{"type":43,"value":4858},{"type":38,"tag":57,"props":16563,"children":16564},{},[16565],{"type":43,"value":4863},{"type":38,"tag":57,"props":16567,"children":16568},{},[16569],{"type":43,"value":4868},{"type":38,"tag":57,"props":16571,"children":16572},{},[16573],{"type":43,"value":4873},{"type":38,"tag":39,"props":16575,"children":16576},{},[16577],{"type":43,"value":4878},{"type":38,"tag":53,"props":16579,"children":16580},{},[16581,16585,16589,16593,16597],{"type":38,"tag":57,"props":16582,"children":16583},{},[16584],{"type":43,"value":4886},{"type":38,"tag":57,"props":16586,"children":16587},{},[16588],{"type":43,"value":4891},{"type":38,"tag":57,"props":16590,"children":16591},{},[16592],{"type":43,"value":4896},{"type":38,"tag":57,"props":16594,"children":16595},{},[16596],{"type":43,"value":4901},{"type":38,"tag":57,"props":16598,"children":16599},{},[16600],{"type":43,"value":4906},{"type":38,"tag":46,"props":16602,"children":16603},{"id":4909},[16604],{"type":43,"value":4912},{"type":38,"tag":39,"props":16606,"children":16607},{},[16608,16609,16613],{"type":43,"value":4917},{"type":38,"tag":72,"props":16610,"children":16611},{},[16612],{"type":43,"value":4922},{"type":43,"value":4924},{"type":38,"tag":53,"props":16615,"children":16616},{},[16617,16621,16625],{"type":38,"tag":57,"props":16618,"children":16619},{},[16620],{"type":43,"value":4932},{"type":38,"tag":57,"props":16622,"children":16623},{},[16624],{"type":43,"value":4937},{"type":38,"tag":57,"props":16626,"children":16627},{},[16628,16629,16633],{"type":43,"value":4942},{"type":38,"tag":72,"props":16630,"children":16631},{},[16632],{"type":43,"value":4947},{"type":43,"value":4949},{"type":38,"tag":39,"props":16635,"children":16636},{},[16637],{"type":43,"value":4954},{"type":38,"tag":46,"props":16639,"children":16640},{"id":4957},[16641],{"type":43,"value":4960},{"type":38,"tag":4283,"props":16643,"children":16644},{"id":4963},[16645],{"type":43,"value":4966},{"type":38,"tag":790,"props":16647,"children":16649},{"className":16648,"code":4971,"language":4972,"meta":8},[4970],[16650],{"type":38,"tag":559,"props":16651,"children":16652},{"__ignoreMap":8},[16653],{"type":43,"value":4971},{"type":38,"tag":39,"props":16655,"children":16656},{},[16657],{"type":43,"value":4982},{"type":38,"tag":4283,"props":16659,"children":16660},{"id":4985},[16661],{"type":43,"value":4988},{"type":38,"tag":790,"props":16663,"children":16665},{"className":16664,"code":4992,"language":4972,"meta":8},[4970],[16666],{"type":38,"tag":559,"props":16667,"children":16668},{"__ignoreMap":8},[16669],{"type":43,"value":4992},{"type":38,"tag":39,"props":16671,"children":16672},{},[16673],{"type":43,"value":5002},{"type":38,"tag":46,"props":16675,"children":16676},{"id":5005},[16677],{"type":43,"value":5008},{"type":38,"tag":39,"props":16679,"children":16680},{},[16681],{"type":43,"value":5013},{"type":38,"tag":39,"props":16683,"children":16684},{},[16685],{"type":43,"value":5018},{"type":38,"tag":53,"props":16687,"children":16688},{},[16689,16693],{"type":38,"tag":57,"props":16690,"children":16691},{},[16692],{"type":43,"value":5026},{"type":38,"tag":57,"props":16694,"children":16695},{},[16696],{"type":43,"value":5031},{"type":38,"tag":39,"props":16698,"children":16699},{},[16700,16701,16706,16707,16712,16713,16718],{"type":43,"value":5036},{"type":38,"tag":559,"props":16702,"children":16704},{"className":16703},[],[16705],{"type":43,"value":5042},{"type":43,"value":3086},{"type":38,"tag":559,"props":16708,"children":16710},{"className":16709},[],[16711],{"type":43,"value":5049},{"type":43,"value":5051},{"type":38,"tag":559,"props":16714,"children":16716},{"className":16715},[],[16717],{"type":43,"value":994},{"type":43,"value":5058},{"type":38,"tag":46,"props":16720,"children":16721},{"id":4431},[16722],{"type":43,"value":5063},{"type":38,"tag":39,"props":16724,"children":16725},{},[16726,16727],{"type":43,"value":5068},{"type":38,"tag":72,"props":16728,"children":16729},{},[16730],{"type":43,"value":5073},{"type":38,"tag":39,"props":16732,"children":16733},{},[16734],{"type":43,"value":5078},{"type":38,"tag":39,"props":16736,"children":16737},{},[16738],{"type":43,"value":5083},{"type":38,"tag":2705,"props":16740,"children":16741},{},[16742],{"type":38,"tag":39,"props":16743,"children":16744},{},[16745],{"type":43,"value":5091},{"title":8,"searchDepth":685,"depth":685,"links":16747},[16748,16749,16750,16751,16755,16756],{"id":4782,"depth":685,"text":4785},{"id":4835,"depth":685,"text":4838},{"id":4909,"depth":685,"text":4912},{"id":4957,"depth":685,"text":4960,"children":16752},[16753,16754],{"id":4963,"depth":4447,"text":4966},{"id":4985,"depth":4447,"text":4988},{"id":5005,"depth":685,"text":5008},{"id":4431,"depth":685,"text":5063},{"_path":5107,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":5108,"description":5109,"seoTitle":5110,"seoDescription":5111,"keywords":16758,"image":5119,"alt":5120,"ogImage":5119,"tags":16759,"categories":16760,"published":25,"author":26,"link":5107,"date":5125,"sitemap":16761,"body":16764,"_type":693,"_id":5489,"_source":695,"_file":5490,"_stem":5491,"_extension":698},[5113,5114,5115,5116,5117,5118],[4755,5122,5123],[4767,3747],{"loc":5127,"lastmod":5125,"changefreq":30,"priority":31,"images":16762},[16763],{"loc":5119},{"type":35,"children":16765,"toc":17039},[16766,16769,16773,16783,16800,16817,16821,16825,16833,16858,16861,16865,16890,16893,16897,16905,16913,16921,16929,16938,16941,16945,16955,16963,16966,16970,16980,16996,17005,17008,17012],{"type":38,"tag":1221,"props":16767,"children":16768},{},[],{"type":38,"tag":46,"props":16770,"children":16771},{"id":5137},[16772],{"type":43,"value":5140},{"type":38,"tag":39,"props":16774,"children":16775},{},[16776,16777,16782],{"type":43,"value":5145},{"type":38,"tag":61,"props":16778,"children":16780},{"href":5148,"rel":16779},[65],[16781],{"type":43,"value":5115},{"type":43,"value":5153},{"type":38,"tag":39,"props":16784,"children":16785},{},[16786,16787,16799],{"type":43,"value":5158},{"type":38,"tag":72,"props":16788,"children":16789},{},[16790,16791,16798],{"type":43,"value":5163},{"type":38,"tag":72,"props":16792,"children":16793},{},[16794],{"type":38,"tag":72,"props":16795,"children":16796},{},[16797],{"type":43,"value":5115},{"type":43,"value":5172},{"type":43,"value":5174},{"type":38,"tag":46,"props":16801,"children":16802},{"id":5177},[16803,16804,16816],{"type":43,"value":5180},{"type":38,"tag":72,"props":16805,"children":16806},{},[16807,16808,16815],{"type":43,"value":5185},{"type":38,"tag":72,"props":16809,"children":16810},{},[16811],{"type":38,"tag":72,"props":16812,"children":16813},{},[16814],{"type":43,"value":5115},{"type":43,"value":5194},{"type":43,"value":1063},{"type":38,"tag":46,"props":16818,"children":16819},{"id":5198},[16820],{"type":43,"value":5201},{"type":38,"tag":39,"props":16822,"children":16823},{},[16824],{"type":43,"value":5206},{"type":38,"tag":790,"props":16826,"children":16828},{"className":16827,"code":5210,"language":4972,"meta":8},[4970],[16829],{"type":38,"tag":559,"props":16830,"children":16831},{"__ignoreMap":8},[16832],{"type":43,"value":5210},{"type":38,"tag":39,"props":16834,"children":16835},{},[16836,16837,16841,16842,16847,16848,16852,16853,16857],{"type":43,"value":5220},{"type":38,"tag":72,"props":16838,"children":16839},{},[16840],{"type":43,"value":5225},{"type":43,"value":5227},{"type":38,"tag":559,"props":16843,"children":16845},{"className":16844},[],[16846],{"type":43,"value":5233},{"type":43,"value":5235},{"type":38,"tag":72,"props":16849,"children":16850},{},[16851],{"type":43,"value":5240},{"type":43,"value":5242},{"type":38,"tag":72,"props":16854,"children":16855},{},[16856],{"type":43,"value":5247},{"type":43,"value":1063},{"type":38,"tag":1221,"props":16859,"children":16860},{},[],{"type":38,"tag":46,"props":16862,"children":16863},{"id":5254},[16864],{"type":43,"value":5257},{"type":38,"tag":82,"props":16866,"children":16867},{},[16868,16876],{"type":38,"tag":57,"props":16869,"children":16870},{},[16871,16875],{"type":38,"tag":72,"props":16872,"children":16873},{},[16874],{"type":43,"value":5268},{"type":43,"value":5270},{"type":38,"tag":57,"props":16877,"children":16878},{},[16879,16883,16884,16889],{"type":38,"tag":72,"props":16880,"children":16881},{},[16882],{"type":43,"value":5278},{"type":43,"value":5280},{"type":38,"tag":559,"props":16885,"children":16887},{"className":16886},[],[16888],{"type":43,"value":5286},{"type":43,"value":5288},{"type":38,"tag":1221,"props":16891,"children":16892},{},[],{"type":38,"tag":46,"props":16894,"children":16895},{"id":5294},[16896],{"type":43,"value":5297},{"type":38,"tag":4283,"props":16898,"children":16899},{"id":5300},[16900,16901],{"type":43,"value":5303},{"type":38,"tag":72,"props":16902,"children":16903},{},[16904],{"type":43,"value":5308},{"type":38,"tag":790,"props":16906,"children":16908},{"className":16907,"code":5312,"language":4972,"meta":8},[4970],[16909],{"type":38,"tag":559,"props":16910,"children":16911},{"__ignoreMap":8},[16912],{"type":43,"value":5312},{"type":38,"tag":4283,"props":16914,"children":16915},{"id":5320},[16916,16917],{"type":43,"value":5323},{"type":38,"tag":72,"props":16918,"children":16919},{},[16920],{"type":43,"value":5328},{"type":38,"tag":790,"props":16922,"children":16924},{"className":16923,"code":5332,"language":4972,"meta":8},[4970],[16925],{"type":38,"tag":559,"props":16926,"children":16927},{"__ignoreMap":8},[16928],{"type":43,"value":5332},{"type":38,"tag":39,"props":16930,"children":16931},{},[16932,16933,16937],{"type":43,"value":5342},{"type":38,"tag":72,"props":16934,"children":16935},{},[16936],{"type":43,"value":5347},{"type":43,"value":1063},{"type":38,"tag":1221,"props":16939,"children":16940},{},[],{"type":38,"tag":46,"props":16942,"children":16943},{"id":5354},[16944],{"type":43,"value":5357},{"type":38,"tag":39,"props":16946,"children":16947},{},[16948,16949,16954],{"type":43,"value":5362},{"type":38,"tag":559,"props":16950,"children":16952},{"className":16951},[],[16953],{"type":43,"value":5115},{"type":43,"value":5369},{"type":38,"tag":790,"props":16956,"children":16958},{"className":16957,"code":5373,"language":4972,"meta":8},[4970],[16959],{"type":38,"tag":559,"props":16960,"children":16961},{"__ignoreMap":8},[16962],{"type":43,"value":5373},{"type":38,"tag":1221,"props":16964,"children":16965},{},[],{"type":38,"tag":46,"props":16967,"children":16968},{"id":5384},[16969],{"type":43,"value":5387},{"type":38,"tag":39,"props":16971,"children":16972},{},[16973,16974,16979],{"type":43,"value":5392},{"type":38,"tag":559,"props":16975,"children":16977},{"className":16976},[],[16978],{"type":43,"value":5115},{"type":43,"value":5399},{"type":38,"tag":39,"props":16981,"children":16982},{},[16983,16984,16989,16990,16995],{"type":43,"value":5404},{"type":38,"tag":559,"props":16985,"children":16987},{"className":16986},[],[16988],{"type":43,"value":5410},{"type":43,"value":5412},{"type":38,"tag":559,"props":16991,"children":16993},{"className":16992},[],[16994],{"type":43,"value":5115},{"type":43,"value":5419},{"type":38,"tag":39,"props":16997,"children":16998},{},[16999,17000,17004],{"type":43,"value":5424},{"type":38,"tag":72,"props":17001,"children":17002},{},[17003],{"type":43,"value":5429},{"type":43,"value":5431},{"type":38,"tag":1221,"props":17006,"children":17007},{},[],{"type":38,"tag":46,"props":17009,"children":17010},{"id":5437},[17011],{"type":43,"value":5440},{"type":38,"tag":53,"props":17013,"children":17014},{},[17015,17023,17031],{"type":38,"tag":57,"props":17016,"children":17017},{},[17018],{"type":38,"tag":61,"props":17019,"children":17021},{"href":5148,"rel":17020},[65],[17022],{"type":43,"value":5452},{"type":38,"tag":57,"props":17024,"children":17025},{},[17026],{"type":38,"tag":61,"props":17027,"children":17029},{"href":5458,"rel":17028},[65],[17030],{"type":43,"value":5462},{"type":38,"tag":57,"props":17032,"children":17033},{},[17034],{"type":38,"tag":61,"props":17035,"children":17037},{"href":5468,"rel":17036},[65],[17038],{"type":43,"value":5472},{"title":8,"searchDepth":685,"depth":685,"links":17040},[17041,17042,17043,17044,17045,17049,17050,17051],{"id":5137,"depth":685,"text":5140},{"id":5177,"depth":685,"text":5477},{"id":5198,"depth":685,"text":5201},{"id":5254,"depth":685,"text":5257},{"id":5294,"depth":685,"text":5297,"children":17046},[17047,17048],{"id":5300,"depth":4447,"text":5483},{"id":5320,"depth":4447,"text":5485},{"id":5354,"depth":685,"text":5357},{"id":5384,"depth":685,"text":5387},{"id":5437,"depth":685,"text":5440},{"_path":5493,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":5494,"description":5495,"seoTitle":5496,"seoDescription":5497,"keywords":17053,"image":5508,"alt":5509,"ogImage":5508,"tags":17054,"categories":17055,"published":25,"author":26,"link":5493,"date":5515,"sitemap":17056,"body":17059,"_type":693,"_id":6370,"_source":695,"_file":6371,"_stem":6372,"_extension":698},[5499,5500,5501,5502,5503,5504,5505,5506,5507],[5113,5511,5512,5513],[4767],{"loc":5517,"lastmod":5515,"changefreq":30,"priority":31,"images":17057},[17058],{"loc":5508},{"type":35,"children":17060,"toc":17772},[17061,17065,17079,17088,17092,17095,17099,17459,17462,17466,17470,17478,17510,17514,17522,17554,17557,17561,17569,17601,17604,17608,17616,17648,17651,17655,17663,17695,17698,17702,17706,17720,17739,17742,17746,17750,17765,17768],{"type":38,"tag":39,"props":17062,"children":17063},{},[17064],{"type":43,"value":5526},{"type":38,"tag":39,"props":17066,"children":17067},{},[17068,17069,17073,17074,17078],{"type":43,"value":5531},{"type":38,"tag":72,"props":17070,"children":17071},{},[17072],{"type":43,"value":5536},{"type":43,"value":5538},{"type":38,"tag":72,"props":17075,"children":17076},{},[17077],{"type":43,"value":4162},{"type":43,"value":5544},{"type":38,"tag":39,"props":17080,"children":17081},{},[17082,17083,17087],{"type":43,"value":5549},{"type":38,"tag":72,"props":17084,"children":17085},{},[17086],{"type":43,"value":5554},{"type":43,"value":5556},{"type":38,"tag":39,"props":17089,"children":17090},{},[17091],{"type":43,"value":5561},{"type":38,"tag":1221,"props":17093,"children":17094},{},[],{"type":38,"tag":46,"props":17096,"children":17097},{"id":5567},[17098],{"type":43,"value":5570},{"type":38,"tag":1387,"props":17100,"children":17101},{},[17102,17132],{"type":38,"tag":5575,"props":17103,"children":17104},{},[17105],{"type":38,"tag":1395,"props":17106,"children":17107},{},[17108,17112,17116,17120,17124,17128],{"type":38,"tag":5582,"props":17109,"children":17110},{},[17111],{"type":43,"value":5586},{"type":38,"tag":5582,"props":17113,"children":17114},{},[17115],{"type":43,"value":5501},{"type":38,"tag":5582,"props":17117,"children":17118},{},[17119],{"type":43,"value":5505},{"type":38,"tag":5582,"props":17121,"children":17122},{},[17123],{"type":43,"value":5599},{"type":38,"tag":5582,"props":17125,"children":17126},{},[17127],{"type":43,"value":5604},{"type":38,"tag":5582,"props":17129,"children":17130},{},[17131],{"type":43,"value":5609},{"type":38,"tag":1391,"props":17133,"children":17134},{},[17135,17162,17189,17216,17243,17270,17297,17324,17351,17378,17405,17432],{"type":38,"tag":1395,"props":17136,"children":17137},{},[17138,17142,17146,17150,17154,17158],{"type":38,"tag":1399,"props":17139,"children":17140},{},[17141],{"type":43,"value":5620},{"type":38,"tag":1399,"props":17143,"children":17144},{},[17145],{"type":43,"value":5625},{"type":38,"tag":1399,"props":17147,"children":17148},{},[17149],{"type":43,"value":5625},{"type":38,"tag":1399,"props":17151,"children":17152},{},[17153],{"type":43,"value":5634},{"type":38,"tag":1399,"props":17155,"children":17156},{},[17157],{"type":43,"value":5639},{"type":38,"tag":1399,"props":17159,"children":17160},{},[17161],{"type":43,"value":5644},{"type":38,"tag":1395,"props":17163,"children":17164},{},[17165,17169,17173,17177,17181,17185],{"type":38,"tag":1399,"props":17166,"children":17167},{},[17168],{"type":43,"value":5652},{"type":38,"tag":1399,"props":17170,"children":17171},{},[17172],{"type":43,"value":5657},{"type":38,"tag":1399,"props":17174,"children":17175},{},[17176],{"type":43,"value":5657},{"type":38,"tag":1399,"props":17178,"children":17179},{},[17180],{"type":43,"value":5657},{"type":38,"tag":1399,"props":17182,"children":17183},{},[17184],{"type":43,"value":5670},{"type":38,"tag":1399,"props":17186,"children":17187},{},[17188],{"type":43,"value":5675},{"type":38,"tag":1395,"props":17190,"children":17191},{},[17192,17196,17200,17204,17208,17212],{"type":38,"tag":1399,"props":17193,"children":17194},{},[17195],{"type":43,"value":5683},{"type":38,"tag":1399,"props":17197,"children":17198},{},[17199],{"type":43,"value":5688},{"type":38,"tag":1399,"props":17201,"children":17202},{},[17203],{"type":43,"value":5688},{"type":38,"tag":1399,"props":17205,"children":17206},{},[17207],{"type":43,"value":5697},{"type":38,"tag":1399,"props":17209,"children":17210},{},[17211],{"type":43,"value":5702},{"type":38,"tag":1399,"props":17213,"children":17214},{},[17215],{"type":43,"value":5675},{"type":38,"tag":1395,"props":17217,"children":17218},{},[17219,17223,17227,17231,17235,17239],{"type":38,"tag":1399,"props":17220,"children":17221},{},[17222],{"type":43,"value":5714},{"type":38,"tag":1399,"props":17224,"children":17225},{},[17226],{"type":43,"value":5719},{"type":38,"tag":1399,"props":17228,"children":17229},{},[17230],{"type":43,"value":5724},{"type":38,"tag":1399,"props":17232,"children":17233},{},[17234],{"type":43,"value":5719},{"type":38,"tag":1399,"props":17236,"children":17237},{},[17238],{"type":43,"value":5733},{"type":38,"tag":1399,"props":17240,"children":17241},{},[17242],{"type":43,"value":5733},{"type":38,"tag":1395,"props":17244,"children":17245},{},[17246,17250,17254,17258,17262,17266],{"type":38,"tag":1399,"props":17247,"children":17248},{},[17249],{"type":43,"value":5745},{"type":38,"tag":1399,"props":17251,"children":17252},{},[17253],{"type":43,"value":5750},{"type":38,"tag":1399,"props":17255,"children":17256},{},[17257],{"type":43,"value":5750},{"type":38,"tag":1399,"props":17259,"children":17260},{},[17261],{"type":43,"value":5759},{"type":38,"tag":1399,"props":17263,"children":17264},{},[17265],{"type":43,"value":5697},{"type":38,"tag":1399,"props":17267,"children":17268},{},[17269],{"type":43,"value":5697},{"type":38,"tag":1395,"props":17271,"children":17272},{},[17273,17277,17281,17285,17289,17293],{"type":38,"tag":1399,"props":17274,"children":17275},{},[17276],{"type":43,"value":5775},{"type":38,"tag":1399,"props":17278,"children":17279},{},[17280],{"type":43,"value":5780},{"type":38,"tag":1399,"props":17282,"children":17283},{},[17284],{"type":43,"value":5780},{"type":38,"tag":1399,"props":17286,"children":17287},{},[17288],{"type":43,"value":5789},{"type":38,"tag":1399,"props":17290,"children":17291},{},[17292],{"type":43,"value":5794},{"type":38,"tag":1399,"props":17294,"children":17295},{},[17296],{"type":43,"value":5675},{"type":38,"tag":1395,"props":17298,"children":17299},{},[17300,17304,17308,17312,17316,17320],{"type":38,"tag":1399,"props":17301,"children":17302},{},[17303],{"type":43,"value":5806},{"type":38,"tag":1399,"props":17305,"children":17306},{},[17307],{"type":43,"value":5811},{"type":38,"tag":1399,"props":17309,"children":17310},{},[17311],{"type":43,"value":5811},{"type":38,"tag":1399,"props":17313,"children":17314},{},[17315],{"type":43,"value":5811},{"type":38,"tag":1399,"props":17317,"children":17318},{},[17319],{"type":43,"value":5824},{"type":38,"tag":1399,"props":17321,"children":17322},{},[17323],{"type":43,"value":5829},{"type":38,"tag":1395,"props":17325,"children":17326},{},[17327,17331,17335,17339,17343,17347],{"type":38,"tag":1399,"props":17328,"children":17329},{},[17330],{"type":43,"value":5837},{"type":38,"tag":1399,"props":17332,"children":17333},{},[17334],{"type":43,"value":5697},{"type":38,"tag":1399,"props":17336,"children":17337},{},[17338],{"type":43,"value":5697},{"type":38,"tag":1399,"props":17340,"children":17341},{},[17342],{"type":43,"value":5697},{"type":38,"tag":1399,"props":17344,"children":17345},{},[17346],{"type":43,"value":5854},{"type":38,"tag":1399,"props":17348,"children":17349},{},[17350],{"type":43,"value":5859},{"type":38,"tag":1395,"props":17352,"children":17353},{},[17354,17358,17362,17366,17370,17374],{"type":38,"tag":1399,"props":17355,"children":17356},{},[17357],{"type":43,"value":5867},{"type":38,"tag":1399,"props":17359,"children":17360},{},[17361],{"type":43,"value":5759},{"type":38,"tag":1399,"props":17363,"children":17364},{},[17365],{"type":43,"value":5719},{"type":38,"tag":1399,"props":17367,"children":17368},{},[17369],{"type":43,"value":5880},{"type":38,"tag":1399,"props":17371,"children":17372},{},[17373],{"type":43,"value":5885},{"type":38,"tag":1399,"props":17375,"children":17376},{},[17377],{"type":43,"value":5890},{"type":38,"tag":1395,"props":17379,"children":17380},{},[17381,17385,17389,17393,17397,17401],{"type":38,"tag":1399,"props":17382,"children":17383},{},[17384],{"type":43,"value":5898},{"type":38,"tag":1399,"props":17386,"children":17387},{},[17388],{"type":43,"value":5903},{"type":38,"tag":1399,"props":17390,"children":17391},{},[17392],{"type":43,"value":5908},{"type":38,"tag":1399,"props":17394,"children":17395},{},[17396],{"type":43,"value":5913},{"type":38,"tag":1399,"props":17398,"children":17399},{},[17400],{"type":43,"value":5918},{"type":38,"tag":1399,"props":17402,"children":17403},{},[17404],{"type":43,"value":5903},{"type":38,"tag":1395,"props":17406,"children":17407},{},[17408,17412,17416,17420,17424,17428],{"type":38,"tag":1399,"props":17409,"children":17410},{},[17411],{"type":43,"value":5930},{"type":38,"tag":1399,"props":17413,"children":17414},{},[17415],{"type":43,"value":5935},{"type":38,"tag":1399,"props":17417,"children":17418},{},[17419],{"type":43,"value":5940},{"type":38,"tag":1399,"props":17421,"children":17422},{},[17423],{"type":43,"value":5945},{"type":38,"tag":1399,"props":17425,"children":17426},{},[17427],{"type":43,"value":5950},{"type":38,"tag":1399,"props":17429,"children":17430},{},[17431],{"type":43,"value":5955},{"type":38,"tag":1395,"props":17433,"children":17434},{},[17435,17439,17443,17447,17451,17455],{"type":38,"tag":1399,"props":17436,"children":17437},{},[17438],{"type":43,"value":5963},{"type":38,"tag":1399,"props":17440,"children":17441},{},[17442],{"type":43,"value":5968},{"type":38,"tag":1399,"props":17444,"children":17445},{},[17446],{"type":43,"value":5968},{"type":38,"tag":1399,"props":17448,"children":17449},{},[17450],{"type":43,"value":5977},{"type":38,"tag":1399,"props":17452,"children":17453},{},[17454],{"type":43,"value":5982},{"type":38,"tag":1399,"props":17456,"children":17457},{},[17458],{"type":43,"value":5987},{"type":38,"tag":1221,"props":17460,"children":17461},{},[],{"type":38,"tag":46,"props":17463,"children":17464},{"id":5993},[17465],{"type":43,"value":5996},{"type":38,"tag":4283,"props":17467,"children":17468},{"id":5501},[17469],{"type":43,"value":5501},{"type":38,"tag":39,"props":17471,"children":17472},{},[17473,17474],{"type":43,"value":6005},{"type":38,"tag":72,"props":17475,"children":17476},{},[17477],{"type":43,"value":6010},{"type":38,"tag":53,"props":17479,"children":17480},{},[17481,17485,17489,17493,17501],{"type":38,"tag":57,"props":17482,"children":17483},{},[17484],{"type":43,"value":6018},{"type":38,"tag":57,"props":17486,"children":17487},{},[17488],{"type":43,"value":6023},{"type":38,"tag":57,"props":17490,"children":17491},{},[17492],{"type":43,"value":6028},{"type":38,"tag":57,"props":17494,"children":17495},{},[17496],{"type":38,"tag":61,"props":17497,"children":17499},{":target":1094,"href":6034,"rel":17498},[65],[17500],{"type":43,"value":5501},{"type":38,"tag":57,"props":17502,"children":17503},{},[17504,17505],{"type":43,"value":6042},{"type":38,"tag":61,"props":17506,"children":17508},{":target":1094,"href":6045,"rel":17507},[65],[17509],{"type":43,"value":6045},{"type":38,"tag":4283,"props":17511,"children":17512},{"id":5505},[17513],{"type":43,"value":5505},{"type":38,"tag":39,"props":17515,"children":17516},{},[17517,17518],{"type":43,"value":6005},{"type":38,"tag":72,"props":17519,"children":17520},{},[17521],{"type":43,"value":6061},{"type":38,"tag":53,"props":17523,"children":17524},{},[17525,17529,17533,17537,17545],{"type":38,"tag":57,"props":17526,"children":17527},{},[17528],{"type":43,"value":6069},{"type":38,"tag":57,"props":17530,"children":17531},{},[17532],{"type":43,"value":6074},{"type":38,"tag":57,"props":17534,"children":17535},{},[17536],{"type":43,"value":6079},{"type":38,"tag":57,"props":17538,"children":17539},{},[17540],{"type":38,"tag":61,"props":17541,"children":17543},{":target":1094,"href":6085,"rel":17542},[65],[17544],{"type":43,"value":5505},{"type":38,"tag":57,"props":17546,"children":17547},{},[17548,17549],{"type":43,"value":6042},{"type":38,"tag":61,"props":17550,"children":17552},{":target":1094,"href":6095,"rel":17551},[65],[17553],{"type":43,"value":6095},{"type":38,"tag":1221,"props":17555,"children":17556},{},[],{"type":38,"tag":4283,"props":17558,"children":17559},{"id":6104},[17560],{"type":43,"value":5599},{"type":38,"tag":39,"props":17562,"children":17563},{},[17564,17565],{"type":43,"value":6005},{"type":38,"tag":72,"props":17566,"children":17567},{},[17568],{"type":43,"value":6115},{"type":38,"tag":53,"props":17570,"children":17571},{},[17572,17576,17580,17584,17592],{"type":38,"tag":57,"props":17573,"children":17574},{},[17575],{"type":43,"value":6123},{"type":38,"tag":57,"props":17577,"children":17578},{},[17579],{"type":43,"value":6128},{"type":38,"tag":57,"props":17581,"children":17582},{},[17583],{"type":43,"value":6133},{"type":38,"tag":57,"props":17585,"children":17586},{},[17587],{"type":38,"tag":61,"props":17588,"children":17590},{":target":1094,"href":6139,"rel":17589},[65],[17591],{"type":43,"value":5599},{"type":38,"tag":57,"props":17593,"children":17594},{},[17595,17596],{"type":43,"value":6147},{"type":38,"tag":61,"props":17597,"children":17599},{":target":1094,"href":6150,"rel":17598},[65],[17600],{"type":43,"value":6150},{"type":38,"tag":1221,"props":17602,"children":17603},{},[],{"type":38,"tag":4283,"props":17605,"children":17606},{"id":6159},[17607],{"type":43,"value":6162},{"type":38,"tag":39,"props":17609,"children":17610},{},[17611,17612],{"type":43,"value":6005},{"type":38,"tag":72,"props":17613,"children":17614},{},[17615],{"type":43,"value":6171},{"type":38,"tag":53,"props":17617,"children":17618},{},[17619,17623,17627,17631,17639],{"type":38,"tag":57,"props":17620,"children":17621},{},[17622],{"type":43,"value":6179},{"type":38,"tag":57,"props":17624,"children":17625},{},[17626],{"type":43,"value":6184},{"type":38,"tag":57,"props":17628,"children":17629},{},[17630],{"type":43,"value":6189},{"type":38,"tag":57,"props":17632,"children":17633},{},[17634],{"type":38,"tag":61,"props":17635,"children":17637},{":target":1094,"href":6195,"rel":17636},[65],[17638],{"type":43,"value":6199},{"type":38,"tag":57,"props":17640,"children":17641},{},[17642,17643],{"type":43,"value":6042},{"type":38,"tag":61,"props":17644,"children":17646},{":target":1094,"href":6206,"rel":17645},[65],[17647],{"type":43,"value":6206},{"type":38,"tag":1221,"props":17649,"children":17650},{},[],{"type":38,"tag":4283,"props":17652,"children":17653},{"id":5504},[17654],{"type":43,"value":5609},{"type":38,"tag":39,"props":17656,"children":17657},{},[17658,17659],{"type":43,"value":6005},{"type":38,"tag":72,"props":17660,"children":17661},{},[17662],{"type":43,"value":6225},{"type":38,"tag":53,"props":17664,"children":17665},{},[17666,17670,17674,17678,17686],{"type":38,"tag":57,"props":17667,"children":17668},{},[17669],{"type":43,"value":6233},{"type":38,"tag":57,"props":17671,"children":17672},{},[17673],{"type":43,"value":6238},{"type":38,"tag":57,"props":17675,"children":17676},{},[17677],{"type":43,"value":6243},{"type":38,"tag":57,"props":17679,"children":17680},{},[17681],{"type":38,"tag":61,"props":17682,"children":17684},{":target":1094,"href":6249,"rel":17683},[65],[17685],{"type":43,"value":6253},{"type":38,"tag":57,"props":17687,"children":17688},{},[17689,17690],{"type":43,"value":6042},{"type":38,"tag":61,"props":17691,"children":17693},{":target":1094,"href":6260,"rel":17692},[65],[17694],{"type":43,"value":6260},{"type":38,"tag":1221,"props":17696,"children":17697},{},[],{"type":38,"tag":46,"props":17699,"children":17700},{"id":4431},[17701],{"type":43,"value":5063},{"type":38,"tag":39,"props":17703,"children":17704},{},[17705],{"type":43,"value":6275},{"type":38,"tag":39,"props":17707,"children":17708},{},[17709,17713,17714,17719],{"type":38,"tag":72,"props":17710,"children":17711},{},[17712],{"type":43,"value":6283},{"type":43,"value":6285},{"type":38,"tag":559,"props":17715,"children":17717},{"className":17716},[],[17718],{"type":43,"value":5501},{"type":43,"value":6292},{"type":38,"tag":39,"props":17721,"children":17722},{},[17723,17724,17728,17729,17733,17734,17738],{"type":43,"value":6297},{"type":38,"tag":72,"props":17725,"children":17726},{},[17727],{"type":43,"value":6302},{"type":43,"value":6304},{"type":38,"tag":72,"props":17730,"children":17731},{},[17732],{"type":43,"value":6309},{"type":43,"value":6311},{"type":38,"tag":72,"props":17735,"children":17736},{},[17737],{"type":43,"value":5609},{"type":43,"value":6317},{"type":38,"tag":1221,"props":17740,"children":17741},{},[],{"type":38,"tag":46,"props":17743,"children":17744},{"id":6323},[17745],{"type":43,"value":6326},{"type":38,"tag":39,"props":17747,"children":17748},{},[17749],{"type":43,"value":6331},{"type":38,"tag":53,"props":17751,"children":17752},{},[17753,17757,17761],{"type":38,"tag":57,"props":17754,"children":17755},{},[17756],{"type":43,"value":6339},{"type":38,"tag":57,"props":17758,"children":17759},{},[17760],{"type":43,"value":6344},{"type":38,"tag":57,"props":17762,"children":17763},{},[17764],{"type":43,"value":6349},{"type":38,"tag":1221,"props":17766,"children":17767},{},[],{"type":38,"tag":39,"props":17769,"children":17770},{},[17771],{"type":43,"value":6357},{"title":8,"searchDepth":685,"depth":685,"links":17773},[17774,17775,17782,17783],{"id":5567,"depth":685,"text":5570},{"id":5993,"depth":685,"text":5996,"children":17776},[17777,17778,17779,17780,17781],{"id":5501,"depth":4447,"text":5501},{"id":5505,"depth":4447,"text":5505},{"id":6104,"depth":4447,"text":5599},{"id":6159,"depth":4447,"text":6162},{"id":5504,"depth":4447,"text":5609},{"id":4431,"depth":685,"text":5063},{"id":6323,"depth":685,"text":6326},{"_path":6374,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":6375,"description":6376,"seoTitle":6377,"seoDescription":6378,"keywords":17785,"image":6387,"alt":6388,"ogImage":6387,"tags":17786,"categories":17787,"published":7,"author":26,"link":6374,"date":6392,"body":17788,"_type":693,"_id":6815,"_source":695,"_file":6816,"_stem":6817,"_extension":698},[6380,6381,6382,4755,6383,6384,6385,6386],[4474,6381,4762,5511],[3747,6391,4767],{"type":35,"children":17789,"toc":18131},[17790,17806,17830,17834,17837,17841,17880,17883,17893,17901,17905,17909,17928,17932,17947,17955,17959,17978,17982,17997,18119,18123,18127],{"type":38,"tag":46,"props":17791,"children":17792},{"id":6397},[17793,17794,17799,17800,17805],{"type":43,"value":6400},{"type":38,"tag":559,"props":17795,"children":17797},{"className":17796},[],[17798],{"type":43,"value":6380},{"type":43,"value":6407},{"type":38,"tag":559,"props":17801,"children":17803},{"className":17802},[],[17804],{"type":43,"value":6382},{"type":43,"value":6414},{"type":38,"tag":39,"props":17807,"children":17808},{},[17809,17810,17819,17820,17829],{"type":43,"value":6419},{"type":38,"tag":61,"props":17811,"children":17813},{"href":6422,"rel":17812},[65],[17814],{"type":38,"tag":559,"props":17815,"children":17817},{"className":17816},[],[17818],{"type":43,"value":6380},{"type":43,"value":6407},{"type":38,"tag":61,"props":17821,"children":17823},{"href":6433,"rel":17822},[65],[17824],{"type":38,"tag":559,"props":17825,"children":17827},{"className":17826},[],[17828],{"type":43,"value":6382},{"type":43,"value":1063},{"type":38,"tag":39,"props":17831,"children":17832},{},[17833],{"type":43,"value":6446},{"type":38,"tag":1221,"props":17835,"children":17836},{},[],{"type":38,"tag":4283,"props":17838,"children":17839},{"id":6452},[17840],{"type":43,"value":6455},{"type":38,"tag":53,"props":17842,"children":17843},{},[17844,17852,17860],{"type":38,"tag":57,"props":17845,"children":17846},{},[17847,17851],{"type":38,"tag":72,"props":17848,"children":17849},{},[17850],{"type":43,"value":6466},{"type":43,"value":6468},{"type":38,"tag":57,"props":17853,"children":17854},{},[17855,17859],{"type":38,"tag":72,"props":17856,"children":17857},{},[17858],{"type":43,"value":6476},{"type":43,"value":6478},{"type":38,"tag":57,"props":17861,"children":17862},{},[17863,17867,17868,17873,17874,17879],{"type":38,"tag":72,"props":17864,"children":17865},{},[17866],{"type":43,"value":6486},{"type":43,"value":6488},{"type":38,"tag":559,"props":17869,"children":17871},{"className":17870},[],[17872],{"type":43,"value":6494},{"type":43,"value":3086},{"type":38,"tag":559,"props":17875,"children":17877},{"className":17876},[],[17878],{"type":43,"value":6501},{"type":43,"value":6503},{"type":38,"tag":1221,"props":17881,"children":17882},{},[],{"type":38,"tag":4283,"props":17884,"children":17885},{"id":6509},[17886,17887,17892],{"type":43,"value":6512},{"type":38,"tag":559,"props":17888,"children":17890},{"className":17889},[],[17891],{"type":43,"value":6380},{"type":43,"value":6519},{"type":38,"tag":790,"props":17894,"children":17896},{"className":17895,"code":6524,"language":6525,"meta":8},[6523],[17897],{"type":38,"tag":559,"props":17898,"children":17899},{"__ignoreMap":8},[17900],{"type":43,"value":6524},{"type":38,"tag":4283,"props":17902,"children":17903},{"id":6533},[17904],{"type":43,"value":6536},{"type":38,"tag":4283,"props":17906,"children":17907},{"id":6539},[17908],{"type":43,"value":6542},{"type":38,"tag":53,"props":17910,"children":17911},{},[17912,17916,17920,17924],{"type":38,"tag":57,"props":17913,"children":17914},{},[17915],{"type":43,"value":6550},{"type":38,"tag":57,"props":17917,"children":17918},{},[17919],{"type":43,"value":6555},{"type":38,"tag":57,"props":17921,"children":17922},{},[17923],{"type":43,"value":6560},{"type":38,"tag":57,"props":17925,"children":17926},{},[17927],{"type":43,"value":6565},{"type":38,"tag":4283,"props":17929,"children":17930},{"id":6568},[17931],{"type":43,"value":6571},{"type":38,"tag":53,"props":17933,"children":17934},{},[17935,17939,17943],{"type":38,"tag":57,"props":17936,"children":17937},{},[17938],{"type":43,"value":6579},{"type":38,"tag":57,"props":17940,"children":17941},{},[17942],{"type":43,"value":6584},{"type":38,"tag":57,"props":17944,"children":17945},{},[17946],{"type":43,"value":6589},{"type":38,"tag":790,"props":17948,"children":17950},{"className":17949,"code":6593,"language":6525,"meta":8},[6523],[17951],{"type":38,"tag":559,"props":17952,"children":17953},{"__ignoreMap":8},[17954],{"type":43,"value":6593},{"type":38,"tag":4283,"props":17956,"children":17957},{"id":6601},[17958],{"type":43,"value":6542},{"type":38,"tag":53,"props":17960,"children":17961},{},[17962,17966,17970,17974],{"type":38,"tag":57,"props":17963,"children":17964},{},[17965],{"type":43,"value":6611},{"type":38,"tag":57,"props":17967,"children":17968},{},[17969],{"type":43,"value":6616},{"type":38,"tag":57,"props":17971,"children":17972},{},[17973],{"type":43,"value":6621},{"type":38,"tag":57,"props":17975,"children":17976},{},[17977],{"type":43,"value":6626},{"type":38,"tag":4283,"props":17979,"children":17980},{"id":6629},[17981],{"type":43,"value":6571},{"type":38,"tag":53,"props":17983,"children":17984},{},[17985,17989,17993],{"type":38,"tag":57,"props":17986,"children":17987},{},[17988],{"type":43,"value":6639},{"type":38,"tag":57,"props":17990,"children":17991},{},[17992],{"type":43,"value":6644},{"type":38,"tag":57,"props":17994,"children":17995},{},[17996],{"type":43,"value":6649},{"type":38,"tag":1387,"props":17998,"children":17999},{},[18000,18026],{"type":38,"tag":5575,"props":18001,"children":18002},{},[18003],{"type":38,"tag":1395,"props":18004,"children":18005},{},[18006,18010,18018],{"type":38,"tag":5582,"props":18007,"children":18008},{},[18009],{"type":43,"value":6663},{"type":38,"tag":5582,"props":18011,"children":18012},{},[18013],{"type":38,"tag":559,"props":18014,"children":18016},{"className":18015},[],[18017],{"type":43,"value":6380},{"type":38,"tag":5582,"props":18019,"children":18020},{},[18021],{"type":38,"tag":559,"props":18022,"children":18024},{"className":18023},[],[18025],{"type":43,"value":6382},{"type":38,"tag":1391,"props":18027,"children":18028},{},[18029,18044,18059,18074,18089,18104],{"type":38,"tag":1395,"props":18030,"children":18031},{},[18032,18036,18040],{"type":38,"tag":1399,"props":18033,"children":18034},{},[18035],{"type":43,"value":6690},{"type":38,"tag":1399,"props":18037,"children":18038},{},[18039],{"type":43,"value":6695},{"type":38,"tag":1399,"props":18041,"children":18042},{},[18043],{"type":43,"value":6700},{"type":38,"tag":1395,"props":18045,"children":18046},{},[18047,18051,18055],{"type":38,"tag":1399,"props":18048,"children":18049},{},[18050],{"type":43,"value":6708},{"type":38,"tag":1399,"props":18052,"children":18053},{},[18054],{"type":43,"value":6713},{"type":38,"tag":1399,"props":18056,"children":18057},{},[18058],{"type":43,"value":6718},{"type":38,"tag":1395,"props":18060,"children":18061},{},[18062,18066,18070],{"type":38,"tag":1399,"props":18063,"children":18064},{},[18065],{"type":43,"value":6726},{"type":38,"tag":1399,"props":18067,"children":18068},{},[18069],{"type":43,"value":6713},{"type":38,"tag":1399,"props":18071,"children":18072},{},[18073],{"type":43,"value":6718},{"type":38,"tag":1395,"props":18075,"children":18076},{},[18077,18081,18085],{"type":38,"tag":1399,"props":18078,"children":18079},{},[18080],{"type":43,"value":6742},{"type":38,"tag":1399,"props":18082,"children":18083},{},[18084],{"type":43,"value":6718},{"type":38,"tag":1399,"props":18086,"children":18087},{},[18088],{"type":43,"value":6718},{"type":38,"tag":1395,"props":18090,"children":18091},{},[18092,18096,18100],{"type":38,"tag":1399,"props":18093,"children":18094},{},[18095],{"type":43,"value":6758},{"type":38,"tag":1399,"props":18097,"children":18098},{},[18099],{"type":43,"value":6713},{"type":38,"tag":1399,"props":18101,"children":18102},{},[18103],{"type":43,"value":6718},{"type":38,"tag":1395,"props":18105,"children":18106},{},[18107,18111,18115],{"type":38,"tag":1399,"props":18108,"children":18109},{},[18110],{"type":43,"value":6774},{"type":38,"tag":1399,"props":18112,"children":18113},{},[18114],{"type":43,"value":6779},{"type":38,"tag":1399,"props":18116,"children":18117},{},[18118],{"type":43,"value":6784},{"type":38,"tag":4283,"props":18120,"children":18121},{"id":6787},[18122],{"type":43,"value":6790},{"type":38,"tag":39,"props":18124,"children":18125},{},[18126],{"type":43,"value":6795},{"type":38,"tag":39,"props":18128,"children":18129},{},[18130],{"type":43,"value":6800},{"title":8,"searchDepth":685,"depth":685,"links":18132},[18133],{"id":6397,"depth":685,"text":6804,"children":18134},[18135,18136,18137,18138,18139,18140,18141,18142],{"id":6452,"depth":4447,"text":6455},{"id":6509,"depth":4447,"text":6808},{"id":6533,"depth":4447,"text":6536},{"id":6539,"depth":4447,"text":6542},{"id":6568,"depth":4447,"text":6571},{"id":6601,"depth":4447,"text":6542},{"id":6629,"depth":4447,"text":6571},{"id":6787,"depth":4447,"text":6790},{"_path":6819,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":6820,"description":6821,"seoTitle":6822,"seoDescription":6823,"keywords":18144,"image":6830,"alt":1268,"ogImage":6830,"tags":18145,"categories":18146,"published":25,"author":26,"link":6819,"date":6836,"sitemap":18147,"body":18150,"_type":693,"_id":7026,"_source":695,"_file":7027,"_stem":7028,"_extension":698},[6825,6826,6827,6828,6829],[6832,6833,6834],[21,4473],{"loc":6838,"lastmod":6836,"changefreq":30,"priority":31,"images":18148},[18149],{"loc":6830},{"type":35,"children":18151,"toc":18303},[18152,18156,18164,18168,18172,18191,18201,18216,18223,18234,18241,18260,18267,18282,18286,18290,18294],{"type":38,"tag":39,"props":18153,"children":18154},{},[18155],{"type":43,"value":6847},{"type":38,"tag":39,"props":18157,"children":18158},{},[18159,18160,18163],{"type":43,"value":6852},{"type":38,"tag":1303,"props":18161,"children":18162},{},[],{"type":43,"value":6857},{"type":38,"tag":46,"props":18165,"children":18166},{"id":6860},[18167],{"type":43,"value":6863},{"type":38,"tag":39,"props":18169,"children":18170},{},[18171],{"type":43,"value":6868},{"type":38,"tag":53,"props":18173,"children":18174},{},[18175,18179,18183,18187],{"type":38,"tag":57,"props":18176,"children":18177},{},[18178],{"type":43,"value":6876},{"type":38,"tag":57,"props":18180,"children":18181},{},[18182],{"type":43,"value":6826},{"type":38,"tag":57,"props":18184,"children":18185},{},[18186],{"type":43,"value":6885},{"type":38,"tag":57,"props":18188,"children":18189},{},[18190],{"type":43,"value":6890},{"type":38,"tag":39,"props":18192,"children":18193},{},[18194],{"type":38,"tag":72,"props":18195,"children":18196},{},[18197],{"type":38,"tag":72,"props":18198,"children":18199},{},[18200],{"type":43,"value":6885},{"type":38,"tag":53,"props":18202,"children":18203},{},[18204,18208,18212],{"type":38,"tag":57,"props":18205,"children":18206},{},[18207],{"type":43,"value":6908},{"type":38,"tag":57,"props":18209,"children":18210},{},[18211],{"type":43,"value":6913},{"type":38,"tag":57,"props":18213,"children":18214},{},[18215],{"type":43,"value":6918},{"type":38,"tag":39,"props":18217,"children":18218},{},[18219],{"type":38,"tag":72,"props":18220,"children":18221},{},[18222],{"type":43,"value":6826},{"type":38,"tag":53,"props":18224,"children":18225},{},[18226,18230],{"type":38,"tag":57,"props":18227,"children":18228},{},[18229],{"type":43,"value":6933},{"type":38,"tag":57,"props":18231,"children":18232},{},[18233],{"type":43,"value":6938},{"type":38,"tag":39,"props":18235,"children":18236},{},[18237],{"type":38,"tag":72,"props":18238,"children":18239},{},[18240],{"type":43,"value":6876},{"type":38,"tag":53,"props":18242,"children":18243},{},[18244,18248,18252,18256],{"type":38,"tag":57,"props":18245,"children":18246},{},[18247],{"type":43,"value":6953},{"type":38,"tag":57,"props":18249,"children":18250},{},[18251],{"type":43,"value":6958},{"type":38,"tag":57,"props":18253,"children":18254},{},[18255],{"type":43,"value":6963},{"type":38,"tag":57,"props":18257,"children":18258},{},[18259],{"type":43,"value":6968},{"type":38,"tag":39,"props":18261,"children":18262},{},[18263],{"type":38,"tag":72,"props":18264,"children":18265},{},[18266],{"type":43,"value":6890},{"type":38,"tag":53,"props":18268,"children":18269},{},[18270,18274,18278],{"type":38,"tag":57,"props":18271,"children":18272},{},[18273],{"type":43,"value":6983},{"type":38,"tag":57,"props":18275,"children":18276},{},[18277],{"type":43,"value":6988},{"type":38,"tag":57,"props":18279,"children":18280},{},[18281],{"type":43,"value":6993},{"type":38,"tag":39,"props":18283,"children":18284},{},[18285],{"type":43,"value":6998},{"type":38,"tag":3048,"props":18287,"children":18288},{"width":3050,"height":3051,"frameBorder":3052,"src":7001,"scrolling":3054,"style":3055},[18289],{"type":43,"value":7004},{"type":38,"tag":46,"props":18291,"children":18292},{"id":675},[18293],{"type":43,"value":678},{"type":38,"tag":39,"props":18295,"children":18296},{},[18297,18298,18302],{"type":43,"value":7013},{"type":38,"tag":61,"props":18299,"children":18300},{"href":7016},[18301],{"type":43,"value":7019},{"type":43,"value":7021},{"title":8,"searchDepth":685,"depth":685,"links":18304},[18305,18306],{"id":6860,"depth":685,"text":6863},{"id":675,"depth":685,"text":678},{"_path":7030,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7031,"description":7032,"seoTitle":7033,"seoDescription":7034,"keywords":18308,"image":7041,"alt":7042,"ogImage":7041,"tags":18309,"categories":18310,"published":25,"author":26,"link":7030,"date":7047,"sitemap":18311,"body":18314,"_type":693,"_id":7196,"_source":695,"_file":7197,"_stem":7198,"_extension":698},[7036,7037,7038,4755,7039,7040],[4474,6381,4762,7044],[3747,7046],{"loc":7049,"lastmod":7047,"changefreq":30,"priority":31,"images":18312},[18313],{"loc":7041},{"type":35,"children":18315,"toc":18424},[18316,18320,18330,18334,18350,18354,18369,18372,18376,18380,18397,18401,18404,18408,18416,18420],{"type":38,"tag":4183,"props":18317,"children":18318},{"id":7056},[18319],{"type":43,"value":7059},{"type":38,"tag":39,"props":18321,"children":18322},{},[18323,18324,18329],{"type":43,"value":7064},{"type":38,"tag":61,"props":18325,"children":18327},{":target":1094,"href":7067,"rel":18326},[65],[18328],{"type":43,"value":7040},{"type":43,"value":7072},{"type":38,"tag":39,"props":18331,"children":18332},{},[18333],{"type":43,"value":7077},{"type":38,"tag":39,"props":18335,"children":18336},{},[18337,18338,18343,18344,18349],{"type":43,"value":7082},{"type":38,"tag":559,"props":18339,"children":18341},{"className":18340},[],[18342],{"type":43,"value":7040},{"type":43,"value":7089},{"type":38,"tag":559,"props":18345,"children":18347},{"className":18346},[],[18348],{"type":43,"value":7095},{"type":43,"value":7097},{"type":38,"tag":39,"props":18351,"children":18352},{},[18353],{"type":43,"value":7102},{"type":38,"tag":53,"props":18355,"children":18356},{},[18357,18361,18365],{"type":38,"tag":57,"props":18358,"children":18359},{},[18360],{"type":43,"value":7110},{"type":38,"tag":57,"props":18362,"children":18363},{},[18364],{"type":43,"value":7115},{"type":38,"tag":57,"props":18366,"children":18367},{},[18368],{"type":43,"value":7120},{"type":38,"tag":1221,"props":18370,"children":18371},{},[],{"type":38,"tag":46,"props":18373,"children":18374},{"id":7126},[18375],{"type":43,"value":7129},{"type":38,"tag":39,"props":18377,"children":18378},{},[18379],{"type":43,"value":7134},{"type":38,"tag":53,"props":18381,"children":18382},{},[18383,18387],{"type":38,"tag":57,"props":18384,"children":18385},{},[18386],{"type":43,"value":7142},{"type":38,"tag":57,"props":18388,"children":18389},{},[18390,18391,18396],{"type":43,"value":7147},{"type":38,"tag":559,"props":18392,"children":18394},{"className":18393},[],[18395],{"type":43,"value":7153},{"type":43,"value":7155},{"type":38,"tag":39,"props":18398,"children":18399},{},[18400],{"type":43,"value":7160},{"type":38,"tag":1221,"props":18402,"children":18403},{},[],{"type":38,"tag":46,"props":18405,"children":18406},{"id":7166},[18407],{"type":43,"value":7169},{"type":38,"tag":790,"props":18409,"children":18411},{"className":18410,"code":7174,"language":4474,"meta":8},[7173],[18412],{"type":38,"tag":559,"props":18413,"children":18414},{"__ignoreMap":8},[18415],{"type":43,"value":7174},{"type":38,"tag":46,"props":18417,"children":18418},{"id":7182},[18419],{"type":43,"value":7185},{"type":38,"tag":39,"props":18421,"children":18422},{},[18423],{"type":43,"value":7190},{"title":8,"searchDepth":685,"depth":685,"links":18425},[18426,18427,18428],{"id":7126,"depth":685,"text":7129},{"id":7166,"depth":685,"text":7169},{"id":7182,"depth":685,"text":7185},{"_path":7200,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7201,"description":7202,"seoTitle":7203,"seoDescription":7204,"keywords":18430,"image":7211,"alt":8,"ogImage":8,"tags":18431,"categories":18432,"published":25,"author":26,"link":7200,"date":7214,"sitemap":18433,"body":18436,"_type":693,"_id":7569,"_source":695,"_file":7570,"_stem":7571,"_extension":698},[7206,7207,7208,7209,7210],[23,4473],[21,23,4473],{"loc":7216,"lastmod":7214,"changefreq":30,"priority":31,"images":18434},[18435],{"loc":7211},{"type":35,"children":18437,"toc":18718},[18438,18461,18465,18469,18512,18516,18587,18591,18601,18605,18612,18616,18623,18695,18706,18710],{"type":38,"tag":39,"props":18439,"children":18440},{},[18441,18445,18446,18450,18451,18455,18456,18460],{"type":38,"tag":72,"props":18442,"children":18443},{},[18444],{"type":43,"value":7228},{"type":43,"value":7230},{"type":38,"tag":72,"props":18447,"children":18448},{},[18449],{"type":43,"value":7235},{"type":43,"value":7237},{"type":38,"tag":72,"props":18452,"children":18453},{},[18454],{"type":43,"value":7242},{"type":43,"value":7244},{"type":38,"tag":72,"props":18457,"children":18458},{},[18459],{"type":43,"value":7242},{"type":43,"value":7250},{"type":38,"tag":46,"props":18462,"children":18463},{"id":7253},[18464],{"type":43,"value":7256},{"type":38,"tag":39,"props":18466,"children":18467},{},[18468],{"type":43,"value":7261},{"type":38,"tag":53,"props":18470,"children":18471},{},[18472,18479,18486,18493,18497,18501,18508],{"type":38,"tag":57,"props":18473,"children":18474},{},[18475],{"type":38,"tag":72,"props":18476,"children":18477},{},[18478],{"type":43,"value":7272},{"type":38,"tag":57,"props":18480,"children":18481},{},[18482],{"type":38,"tag":72,"props":18483,"children":18484},{},[18485],{"type":43,"value":7280},{"type":38,"tag":57,"props":18487,"children":18488},{},[18489],{"type":38,"tag":72,"props":18490,"children":18491},{},[18492],{"type":43,"value":7288},{"type":38,"tag":57,"props":18494,"children":18495},{},[18496],{"type":43,"value":7293},{"type":38,"tag":57,"props":18498,"children":18499},{},[18500],{"type":43,"value":7298},{"type":38,"tag":57,"props":18502,"children":18503},{},[18504],{"type":38,"tag":72,"props":18505,"children":18506},{},[18507],{"type":43,"value":7306},{"type":38,"tag":57,"props":18509,"children":18510},{},[18511],{"type":43,"value":7311},{"type":38,"tag":46,"props":18513,"children":18514},{"id":7314},[18515],{"type":43,"value":7317},{"type":38,"tag":82,"props":18517,"children":18518},{},[18519,18527,18536,18549,18557,18570,18579],{"type":38,"tag":57,"props":18520,"children":18521},{},[18522,18526],{"type":38,"tag":72,"props":18523,"children":18524},{},[18525],{"type":43,"value":7272},{"type":43,"value":7329},{"type":38,"tag":57,"props":18528,"children":18529},{},[18530,18531,18535],{"type":43,"value":1581},{"type":38,"tag":72,"props":18532,"children":18533},{},[18534],{"type":43,"value":7280},{"type":43,"value":7339},{"type":38,"tag":57,"props":18537,"children":18538},{},[18539,18548],{"type":38,"tag":72,"props":18540,"children":18541},{},[18542,18543,18547],{"type":43,"value":7347},{"type":38,"tag":76,"props":18544,"children":18545},{},[18546],{"type":43,"value":7352},{"type":43,"value":7354},{"type":43,"value":7356},{"type":38,"tag":57,"props":18550,"children":18551},{},[18552,18556],{"type":38,"tag":72,"props":18553,"children":18554},{},[18555],{"type":43,"value":7280},{"type":43,"value":7365},{"type":38,"tag":57,"props":18558,"children":18559},{},[18560,18564,18565,18569],{"type":38,"tag":72,"props":18561,"children":18562},{},[18563],{"type":43,"value":7272},{"type":43,"value":7374},{"type":38,"tag":72,"props":18566,"children":18567},{},[18568],{"type":43,"value":7280},{"type":43,"value":7380},{"type":38,"tag":57,"props":18571,"children":18572},{},[18573,18574,18578],{"type":43,"value":7385},{"type":38,"tag":72,"props":18575,"children":18576},{},[18577],{"type":43,"value":7390},{"type":43,"value":7392},{"type":38,"tag":57,"props":18580,"children":18581},{},[18582,18586],{"type":38,"tag":72,"props":18583,"children":18584},{},[18585],{"type":43,"value":7280},{"type":43,"value":7401},{"type":38,"tag":46,"props":18588,"children":18589},{"id":7404},[18590],{"type":43,"value":7407},{"type":38,"tag":39,"props":18592,"children":18593},{},[18594,18595,18600],{"type":43,"value":7412},{"type":38,"tag":61,"props":18596,"children":18598},{"href":7415,"rel":18597},[65],[18599],{"type":43,"value":7419},{"type":43,"value":7421},{"type":38,"tag":4283,"props":18602,"children":18603},{"id":7424},[18604],{"type":43,"value":7427},{"type":38,"tag":53,"props":18606,"children":18607},{},[18608],{"type":38,"tag":57,"props":18609,"children":18610},{},[18611],{"type":43,"value":7435},{"type":38,"tag":4283,"props":18613,"children":18614},{"id":7438},[18615],{"type":43,"value":7441},{"type":38,"tag":53,"props":18617,"children":18618},{},[18619],{"type":38,"tag":57,"props":18620,"children":18621},{},[18622],{"type":43,"value":7449},{"type":38,"tag":1387,"props":18624,"children":18625},{},[18626],{"type":38,"tag":1391,"props":18627,"children":18628},{},[18629,18646,18657,18668,18684],{"type":38,"tag":1395,"props":18630,"children":18631},{},[18632,18639],{"type":38,"tag":1399,"props":18633,"children":18634},{},[18635],{"type":38,"tag":72,"props":18636,"children":18637},{},[18638],{"type":43,"value":7288},{"type":38,"tag":1399,"props":18640,"children":18641},{},[18642],{"type":38,"tag":72,"props":18643,"children":18644},{},[18645],{"type":43,"value":7306},{"type":38,"tag":1395,"props":18647,"children":18648},{},[18649,18653],{"type":38,"tag":1399,"props":18650,"children":18651},{},[18652],{"type":43,"value":7480},{"type":38,"tag":1399,"props":18654,"children":18655},{},[18656],{"type":43,"value":7485},{"type":38,"tag":1395,"props":18658,"children":18659},{},[18660,18664],{"type":38,"tag":1399,"props":18661,"children":18662},{},[18663],{"type":43,"value":7493},{"type":38,"tag":1399,"props":18665,"children":18666},{},[18667],{"type":43,"value":7498},{"type":38,"tag":1395,"props":18669,"children":18670},{},[18671,18680],{"type":38,"tag":1399,"props":18672,"children":18673},{},[18674,18675,18679],{"type":43,"value":7506},{"type":38,"tag":76,"props":18676,"children":18677},{},[18678],{"type":43,"value":7511},{"type":43,"value":7513},{"type":38,"tag":1399,"props":18681,"children":18682},{},[18683],{"type":43,"value":7518},{"type":38,"tag":1395,"props":18685,"children":18686},{},[18687,18691],{"type":38,"tag":1399,"props":18688,"children":18689},{},[18690],{"type":43,"value":7526},{"type":38,"tag":1399,"props":18692,"children":18693},{},[18694],{"type":43,"value":7531},{"type":38,"tag":2705,"props":18696,"children":18697},{},[18698,18702],{"type":38,"tag":39,"props":18699,"children":18700},{},[18701],{"type":43,"value":7539},{"type":38,"tag":39,"props":18703,"children":18704},{},[18705],{"type":43,"value":7544},{"type":38,"tag":46,"props":18707,"children":18708},{"id":6787},[18709],{"type":43,"value":7549},{"type":38,"tag":39,"props":18711,"children":18712},{},[18713,18714],{"type":43,"value":7554},{"type":38,"tag":61,"props":18715,"children":18716},{"href":7200},[18717],{"type":43,"value":7559},{"title":8,"searchDepth":685,"depth":685,"links":18719},[18720,18721,18722,18726],{"id":7253,"depth":685,"text":7256},{"id":7314,"depth":685,"text":7317},{"id":7404,"depth":685,"text":7407,"children":18723},[18724,18725],{"id":7424,"depth":4447,"text":7427},{"id":7438,"depth":4447,"text":7441},{"id":6787,"depth":685,"text":7549},{"_path":4724,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7573,"description":7574,"seoTitle":7575,"seoDescription":7576,"keywords":18728,"image":4468,"alt":1268,"ogImage":4468,"tags":18729,"categories":18730,"published":25,"author":26,"link":4724,"date":7584,"sitemap":18731,"body":18734,"_type":693,"_id":7733,"_source":695,"_file":7734,"_stem":7735,"_extension":698},[7578,7579,7580,7581],[4470,4174,4471,714],[21,23,4473,4474],{"loc":7586,"lastmod":7584,"changefreq":30,"priority":31,"images":18732},[18733],{"loc":4468},{"type":35,"children":18735,"toc":18845},[18736,18740,18744,18748,18755,18759,18766,18770,18774,18781,18788,18792,18796,18803,18810,18814],{"type":38,"tag":39,"props":18737,"children":18738},{},[18739],{"type":43,"value":7595},{"type":38,"tag":39,"props":18741,"children":18742},{},[18743],{"type":43,"value":7600},{"type":38,"tag":46,"props":18745,"children":18746},{"id":7603},[18747],{"type":43,"value":7606},{"type":38,"tag":790,"props":18749,"children":18750},{"code":7609},[18751],{"type":38,"tag":559,"props":18752,"children":18753},{"__ignoreMap":8},[18754],{"type":43,"value":7609},{"type":38,"tag":39,"props":18756,"children":18757},{},[18758],{"type":43,"value":7619},{"type":38,"tag":790,"props":18760,"children":18761},{"code":7622},[18762],{"type":38,"tag":559,"props":18763,"children":18764},{"__ignoreMap":8},[18765],{"type":43,"value":7622},{"type":38,"tag":46,"props":18767,"children":18768},{"id":7630},[18769],{"type":43,"value":7633},{"type":38,"tag":39,"props":18771,"children":18772},{},[18773],{"type":43,"value":7638},{"type":38,"tag":790,"props":18775,"children":18776},{"code":7641},[18777],{"type":38,"tag":559,"props":18778,"children":18779},{"__ignoreMap":8},[18780],{"type":43,"value":7641},{"type":38,"tag":790,"props":18782,"children":18783},{"code":7649},[18784],{"type":38,"tag":559,"props":18785,"children":18786},{"__ignoreMap":8},[18787],{"type":43,"value":7649},{"type":38,"tag":46,"props":18789,"children":18790},{"id":7657},[18791],{"type":43,"value":7660},{"type":38,"tag":39,"props":18793,"children":18794},{},[18795],{"type":43,"value":7665},{"type":38,"tag":790,"props":18797,"children":18798},{"code":7668},[18799],{"type":38,"tag":559,"props":18800,"children":18801},{"__ignoreMap":8},[18802],{"type":43,"value":7668},{"type":38,"tag":790,"props":18804,"children":18805},{"code":7676},[18806],{"type":38,"tag":559,"props":18807,"children":18808},{"__ignoreMap":8},[18809],{"type":43,"value":7676},{"type":38,"tag":46,"props":18811,"children":18812},{"id":675},[18813],{"type":43,"value":678},{"type":38,"tag":39,"props":18815,"children":18816},{},[18817,18821,18822,18827,18828,18833,18834,18839,18840,18844],{"type":38,"tag":61,"props":18818,"children":18819},{"href":7691},[18820],{"type":43,"value":7694},{"type":43,"value":7696},{"type":38,"tag":61,"props":18823,"children":18825},{"href":7699,"rel":18824},[65],[18826],{"type":43,"value":4162},{"type":43,"value":4797},{"type":38,"tag":61,"props":18829,"children":18831},{"href":7706,"rel":18830},[65],[18832],{"type":43,"value":7710},{"type":43,"value":7712},{"type":38,"tag":61,"props":18835,"children":18837},{"href":7715,"rel":18836},[65],[18838],{"type":43,"value":733},{"type":43,"value":4729},{"type":38,"tag":61,"props":18841,"children":18842},{"href":4724},[18843],{"type":43,"value":7724},{"type":43,"value":7726},{"title":8,"searchDepth":685,"depth":685,"links":18846},[18847,18848,18849,18850],{"id":7603,"depth":685,"text":7606},{"id":7630,"depth":685,"text":7633},{"id":7657,"depth":685,"text":7660},{"id":675,"depth":685,"text":678},{"_path":7737,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7738,"description":7739,"seoTitle":7740,"seoDescription":7741,"keywords":18852,"image":7747,"alt":1268,"ogImage":7747,"tags":18853,"categories":18854,"published":25,"author":26,"link":7737,"date":7750,"sitemap":18855,"body":18858,"_type":693,"_id":7890,"_source":695,"_file":7891,"_stem":7892,"_extension":698},[7743,7744,7745,7746],[21,713,714],[21,713,714],{"loc":7752,"lastmod":7750,"changefreq":30,"priority":31,"images":18856},[18857],{"loc":7747},{"type":35,"children":18859,"toc":18963},[18860,18864,18874,18894,18898,18916,18920,18924,18931,18935,18942,18946,18950,18954],{"type":38,"tag":46,"props":18861,"children":18862},{"id":7759},[18863],{"type":43,"value":7762},{"type":38,"tag":39,"props":18865,"children":18866},{},[18867,18868,18873],{"type":43,"value":7767},{"type":38,"tag":61,"props":18869,"children":18871},{"href":7770,"rel":18870},[65],[18872],{"type":43,"value":1061},{"type":43,"value":1063},{"type":38,"tag":39,"props":18875,"children":18876},{},[18877,18878,18883,18884,18889,18890,18893],{"type":43,"value":7779},{"type":38,"tag":61,"props":18879,"children":18881},{"href":7782,"rel":18880},[65],[18882],{"type":43,"value":7786},{"type":43,"value":7788},{"type":38,"tag":61,"props":18885,"children":18887},{"href":7791,"rel":18886},[65],[18888],{"type":43,"value":7795},{"type":43,"value":7797},{"type":38,"tag":1303,"props":18891,"children":18892},{},[],{"type":43,"value":7802},{"type":38,"tag":39,"props":18895,"children":18896},{},[18897],{"type":43,"value":7807},{"type":38,"tag":1383,"props":18899,"children":18900},{},[18901,18909],{"type":38,"tag":39,"props":18902,"children":18903},{},[18904],{"type":38,"tag":61,"props":18905,"children":18907},{"href":7816,"rel":18906},[65],[18908],{"type":43,"value":7816},{"type":38,"tag":1517,"props":18910,"children":18911},{},[18912],{"type":38,"tag":39,"props":18913,"children":18914},{},[18915],{"type":43,"value":7827},{"type":38,"tag":46,"props":18917,"children":18918},{"id":7830},[18919],{"type":43,"value":7833},{"type":38,"tag":39,"props":18921,"children":18922},{},[18923],{"type":43,"value":7838},{"type":38,"tag":790,"props":18925,"children":18926},{"code":7841},[18927],{"type":38,"tag":559,"props":18928,"children":18929},{"__ignoreMap":8},[18930],{"type":43,"value":7841},{"type":38,"tag":39,"props":18932,"children":18933},{},[18934],{"type":43,"value":7851},{"type":38,"tag":790,"props":18936,"children":18937},{"code":7854},[18938],{"type":38,"tag":559,"props":18939,"children":18940},{"__ignoreMap":8},[18941],{"type":43,"value":7854},{"type":38,"tag":39,"props":18943,"children":18944},{},[18945],{"type":43,"value":7864},{"type":38,"tag":46,"props":18947,"children":18948},{"id":675},[18949],{"type":43,"value":678},{"type":38,"tag":39,"props":18951,"children":18952},{},[18953],{"type":43,"value":7873},{"type":38,"tag":39,"props":18955,"children":18956},{},[18957,18958,18962],{"type":43,"value":7878},{"type":38,"tag":61,"props":18959,"children":18960},{"href":7881},[18961],{"type":43,"value":1061},{"type":43,"value":1063},{"title":8,"searchDepth":685,"depth":685,"links":18964},[18965,18966,18967],{"id":7759,"depth":685,"text":7762},{"id":7830,"depth":685,"text":7833},{"id":675,"depth":685,"text":678},{"_path":7894,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7895,"description":7896,"seoTitle":7897,"seoDescription":7898,"keywords":18969,"image":710,"alt":1268,"ogImage":710,"tags":18970,"categories":18971,"published":25,"author":26,"link":7894,"date":7906,"sitemap":18972,"body":18975,"_type":693,"_id":8304,"_source":695,"_file":8305,"_stem":8306,"_extension":698},[7900,7901,7902,7903],[21,713,714],[21,713,714],{"loc":7908,"lastmod":7906,"changefreq":30,"priority":31,"images":18973},[18974],{"loc":710},{"type":35,"children":18976,"toc":19282},[18977,18998,19007,19011,19015,19033,19037,19047,19051,19055,19059,19063,19078,19082,19086,19097,19101,19108,19112,19150,19154,19169,19176,19231,19235,19250,19254,19269,19273],{"type":38,"tag":39,"props":18978,"children":18979},{},[18980,18981,18992,18993,18997],{"type":43,"value":7917},{"type":38,"tag":61,"props":18982,"children":18984},{"href":7920,"rel":18983},[65],[18985],{"type":38,"tag":72,"props":18986,"children":18987},{},[18988],{"type":38,"tag":76,"props":18989,"children":18990},{},[18991],{"type":43,"value":7930},{"type":43,"value":7932},{"type":38,"tag":61,"props":18994,"children":18995},{"href":7881},[18996],{"type":43,"value":7937},{"type":43,"value":7939},{"type":38,"tag":39,"props":18999,"children":19000},{},[19001,19002,19006],{"type":43,"value":7944},{"type":38,"tag":72,"props":19003,"children":19004},{},[19005],{"type":43,"value":7949},{"type":43,"value":7951},{"type":38,"tag":46,"props":19008,"children":19009},{"id":7954},[19010],{"type":43,"value":7957},{"type":38,"tag":39,"props":19012,"children":19013},{},[19014],{"type":43,"value":7962},{"type":38,"tag":53,"props":19016,"children":19017},{},[19018,19029],{"type":38,"tag":57,"props":19019,"children":19020},{},[19021,19022],{"type":43,"value":7970},{"type":38,"tag":53,"props":19023,"children":19024},{},[19025],{"type":38,"tag":57,"props":19026,"children":19027},{},[19028],{"type":43,"value":7978},{"type":38,"tag":57,"props":19030,"children":19031},{},[19032],{"type":43,"value":7983},{"type":38,"tag":46,"props":19034,"children":19035},{"id":7986},[19036],{"type":43,"value":7989},{"type":38,"tag":39,"props":19038,"children":19039},{},[19040,19041,19046],{"type":43,"value":7994},{"type":38,"tag":61,"props":19042,"children":19044},{"href":7997,"rel":19043},[65],[19045],{"type":43,"value":8001},{"type":43,"value":1063},{"type":38,"tag":46,"props":19048,"children":19049},{"id":8005},[19050],{"type":43,"value":8008},{"type":38,"tag":39,"props":19052,"children":19053},{},[19054],{"type":43,"value":8013},{"type":38,"tag":46,"props":19056,"children":19057},{"id":8016},[19058],{"type":43,"value":8019},{"type":38,"tag":39,"props":19060,"children":19061},{},[19062],{"type":43,"value":8024},{"type":38,"tag":53,"props":19064,"children":19065},{},[19066,19070,19074],{"type":38,"tag":57,"props":19067,"children":19068},{},[19069],{"type":43,"value":8032},{"type":38,"tag":57,"props":19071,"children":19072},{},[19073],{"type":43,"value":8037},{"type":38,"tag":57,"props":19075,"children":19076},{},[19077],{"type":43,"value":8042},{"type":38,"tag":46,"props":19079,"children":19080},{"id":8045},[19081],{"type":43,"value":8048},{"type":38,"tag":39,"props":19083,"children":19084},{},[19085],{"type":43,"value":8053},{"type":38,"tag":53,"props":19087,"children":19088},{},[19089,19093],{"type":38,"tag":57,"props":19090,"children":19091},{},[19092],{"type":43,"value":8061},{"type":38,"tag":57,"props":19094,"children":19095},{},[19096],{"type":43,"value":8066},{"type":38,"tag":46,"props":19098,"children":19099},{"id":8069},[19100],{"type":43,"value":8072},{"type":38,"tag":53,"props":19102,"children":19103},{},[19104],{"type":38,"tag":57,"props":19105,"children":19106},{},[19107],{"type":43,"value":8080},{"type":38,"tag":46,"props":19109,"children":19110},{"id":8083},[19111],{"type":43,"value":8086},{"type":38,"tag":53,"props":19113,"children":19114},{},[19115],{"type":38,"tag":57,"props":19116,"children":19117},{},[19118,19119],{"type":43,"value":8094},{"type":38,"tag":53,"props":19120,"children":19121},{},[19122,19126,19130,19134,19138,19142,19146],{"type":38,"tag":57,"props":19123,"children":19124},{},[19125],{"type":43,"value":8102},{"type":38,"tag":57,"props":19127,"children":19128},{},[19129],{"type":43,"value":8107},{"type":38,"tag":57,"props":19131,"children":19132},{},[19133],{"type":43,"value":8112},{"type":38,"tag":57,"props":19135,"children":19136},{},[19137],{"type":43,"value":8117},{"type":38,"tag":57,"props":19139,"children":19140},{},[19141],{"type":43,"value":8122},{"type":38,"tag":57,"props":19143,"children":19144},{},[19145],{"type":43,"value":8127},{"type":38,"tag":57,"props":19147,"children":19148},{},[19149],{"type":43,"value":8132},{"type":38,"tag":39,"props":19151,"children":19152},{},[19153],{"type":43,"value":8137},{"type":38,"tag":53,"props":19155,"children":19156},{},[19157,19161,19165],{"type":38,"tag":57,"props":19158,"children":19159},{},[19160],{"type":43,"value":8145},{"type":38,"tag":57,"props":19162,"children":19163},{},[19164],{"type":43,"value":8150},{"type":38,"tag":57,"props":19166,"children":19167},{},[19168],{"type":43,"value":8155},{"type":38,"tag":39,"props":19170,"children":19171},{},[19172],{"type":38,"tag":72,"props":19173,"children":19174},{},[19175],{"type":43,"value":8163},{"type":38,"tag":53,"props":19177,"children":19178},{},[19179,19188,19199,19215],{"type":38,"tag":57,"props":19180,"children":19181},{},[19182,19183,19187],{"type":43,"value":8171},{"type":38,"tag":76,"props":19184,"children":19185},{},[19186],{"type":43,"value":8176},{"type":43,"value":8178},{"type":38,"tag":57,"props":19189,"children":19190},{},[19191,19192],{"type":43,"value":8183},{"type":38,"tag":53,"props":19193,"children":19194},{},[19195],{"type":38,"tag":57,"props":19196,"children":19197},{},[19198],{"type":43,"value":8191},{"type":38,"tag":57,"props":19200,"children":19201},{},[19202,19203],{"type":43,"value":8196},{"type":38,"tag":53,"props":19204,"children":19205},{},[19206],{"type":38,"tag":57,"props":19207,"children":19208},{},[19209,19210,19214],{"type":43,"value":8204},{"type":38,"tag":76,"props":19211,"children":19212},{},[19213],{"type":43,"value":8176},{"type":43,"value":8210},{"type":38,"tag":57,"props":19216,"children":19217},{},[19218,19219],{"type":43,"value":8215},{"type":38,"tag":53,"props":19220,"children":19221},{},[19222],{"type":38,"tag":57,"props":19223,"children":19224},{},[19225,19226,19230],{"type":43,"value":8223},{"type":38,"tag":76,"props":19227,"children":19228},{},[19229],{"type":43,"value":8176},{"type":43,"value":8229},{"type":38,"tag":46,"props":19232,"children":19233},{"id":8232},[19234],{"type":43,"value":8235},{"type":38,"tag":53,"props":19236,"children":19237},{},[19238],{"type":38,"tag":57,"props":19239,"children":19240},{},[19241,19242,19249],{"type":43,"value":8243},{"type":38,"tag":61,"props":19243,"children":19245},{"href":8246,"rel":19244},[65],[19246],{"type":38,"tag":8250,"props":19247,"children":19248},{},[],{"type":43,"value":1063},{"type":38,"tag":46,"props":19251,"children":19252},{"id":8256},[19253],{"type":43,"value":8259},{"type":38,"tag":53,"props":19255,"children":19256},{},[19257],{"type":38,"tag":57,"props":19258,"children":19259},{},[19260,19261,19268],{"type":43,"value":8267},{"type":38,"tag":61,"props":19262,"children":19264},{"href":8246,"rel":19263},[65],[19265],{"type":38,"tag":8250,"props":19266,"children":19267},{},[],{"type":43,"value":1063},{"type":38,"tag":46,"props":19270,"children":19271},{"id":6787},[19272],{"type":43,"value":7549},{"type":38,"tag":39,"props":19274,"children":19275},{},[19276,19277,19281],{"type":43,"value":8284},{"type":38,"tag":61,"props":19278,"children":19279},{"href":7881},[19280],{"type":43,"value":8289},{"type":43,"value":8291},{"title":8,"searchDepth":685,"depth":685,"links":19283},[19284,19285,19286,19287,19288,19289,19290,19291,19292,19293],{"id":7954,"depth":685,"text":7957},{"id":7986,"depth":685,"text":7989},{"id":8005,"depth":685,"text":8008},{"id":8016,"depth":685,"text":8019},{"id":8045,"depth":685,"text":8048},{"id":8069,"depth":685,"text":8072},{"id":8083,"depth":685,"text":8086},{"id":8232,"depth":685,"text":8235},{"id":8256,"depth":685,"text":8259},{"id":6787,"depth":685,"text":7549},{"_path":7881,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":8308,"description":8309,"seoTitle":8310,"seoDescription":8311,"keywords":19295,"image":710,"alt":1268,"ogImage":710,"tags":19296,"categories":19297,"published":25,"author":26,"link":7881,"date":8319,"sitemap":19298,"body":19302,"_type":693,"_id":8551,"_source":695,"_file":8552,"_stem":8553,"_extension":698},[8313,8314,8315,8316],[21,713,714],[21,713,714],{"loc":8321,"lastmod":8319,"changefreq":30,"priority":31,"images":19299},[19300,19301],{"loc":710},{"loc":8325},{"type":35,"children":19303,"toc":19479},[19304,19320,19326,19341,19344,19348,19355,19359,19363,19367,19371,19390,19394,19398,19402,19406,19410,19428,19432,19436,19447,19451,19455,19459,19463,19467,19471,19475],{"type":38,"tag":39,"props":19305,"children":19306},{},[19307,19308,19319],{"type":43,"value":8332},{"type":38,"tag":72,"props":19309,"children":19310},{},[19311],{"type":38,"tag":76,"props":19312,"children":19313},{},[19314],{"type":38,"tag":61,"props":19315,"children":19317},{":target":1094,"href":7920,"rel":19316},[65],[19318],{"type":43,"value":7930},{"type":43,"value":8345},{"type":38,"tag":39,"props":19321,"children":19322},{},[19323],{"type":38,"tag":1885,"props":19324,"children":19325},{"alt":8351,"src":8352},[],{"type":38,"tag":1383,"props":19327,"children":19328},{},[19329],{"type":38,"tag":2148,"props":19330,"children":19331},{"style":2150},[19332,19333,19336,19337],{"type":43,"value":2153},{"type":38,"tag":1885,"props":19334,"children":19335},{"style":2156,"src":8325,"alt":8363},[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":19338,"children":19339},{},[19340],{"type":43,"value":8363},{"type":38,"tag":1303,"props":19342,"children":19343},{},[],{"type":38,"tag":39,"props":19345,"children":19346},{},[19347],{"type":43,"value":8377},{"type":38,"tag":790,"props":19349,"children":19350},{"code":8380},[19351],{"type":38,"tag":559,"props":19352,"children":19353},{"__ignoreMap":8},[19354],{"type":43,"value":8380},{"type":38,"tag":46,"props":19356,"children":19357},{"id":8388},[19358],{"type":43,"value":8391},{"type":38,"tag":39,"props":19360,"children":19361},{},[19362],{"type":43,"value":8396},{"type":38,"tag":46,"props":19364,"children":19365},{"id":8399},[19366],{"type":43,"value":8402},{"type":38,"tag":39,"props":19368,"children":19369},{},[19370],{"type":43,"value":8407},{"type":38,"tag":53,"props":19372,"children":19373},{},[19374,19378,19382,19386],{"type":38,"tag":57,"props":19375,"children":19376},{},[19377],{"type":43,"value":984},{"type":38,"tag":57,"props":19379,"children":19380},{},[19381],{"type":43,"value":989},{"type":38,"tag":57,"props":19383,"children":19384},{},[19385],{"type":43,"value":8423},{"type":38,"tag":57,"props":19387,"children":19388},{},[19389],{"type":43,"value":8428},{"type":38,"tag":39,"props":19391,"children":19392},{},[19393],{"type":43,"value":8433},{"type":38,"tag":46,"props":19395,"children":19396},{"id":8436},[19397],{"type":43,"value":8439},{"type":38,"tag":39,"props":19399,"children":19400},{},[19401],{"type":43,"value":8444},{"type":38,"tag":46,"props":19403,"children":19404},{"id":8447},[19405],{"type":43,"value":8450},{"type":38,"tag":39,"props":19407,"children":19408},{},[19409],{"type":43,"value":8455},{"type":38,"tag":53,"props":19411,"children":19412},{},[19413,19424],{"type":38,"tag":57,"props":19414,"children":19415},{},[19416,19417],{"type":43,"value":7970},{"type":38,"tag":53,"props":19418,"children":19419},{},[19420],{"type":38,"tag":57,"props":19421,"children":19422},{},[19423],{"type":43,"value":7978},{"type":38,"tag":57,"props":19425,"children":19426},{},[19427],{"type":43,"value":7983},{"type":38,"tag":46,"props":19429,"children":19430},{"id":8476},[19431],{"type":43,"value":8479},{"type":38,"tag":39,"props":19433,"children":19434},{},[19435],{"type":43,"value":8484},{"type":38,"tag":39,"props":19437,"children":19438},{},[19439,19446],{"type":38,"tag":72,"props":19440,"children":19441},{},[19442],{"type":38,"tag":76,"props":19443,"children":19444},{},[19445],{"type":43,"value":8495},{"type":43,"value":8497},{"type":38,"tag":46,"props":19448,"children":19449},{"id":8500},[19450],{"type":43,"value":8503},{"type":38,"tag":39,"props":19452,"children":19453},{},[19454],{"type":43,"value":8508},{"type":38,"tag":46,"props":19456,"children":19457},{"id":8511},[19458],{"type":43,"value":8514},{"type":38,"tag":39,"props":19460,"children":19461},{},[19462],{"type":43,"value":8519},{"type":38,"tag":46,"props":19464,"children":19465},{"id":8522},[19466],{"type":43,"value":8525},{"type":38,"tag":39,"props":19468,"children":19469},{},[19470],{"type":43,"value":8530},{"type":38,"tag":46,"props":19472,"children":19473},{"id":675},[19474],{"type":43,"value":678},{"type":38,"tag":39,"props":19476,"children":19477},{},[19478],{"type":43,"value":8539},{"title":8,"searchDepth":685,"depth":685,"links":19480},[19481,19482,19483,19484,19485,19486,19487,19488,19489],{"id":8388,"depth":685,"text":8391},{"id":8399,"depth":685,"text":8402},{"id":8436,"depth":685,"text":8439},{"id":8447,"depth":685,"text":8450},{"id":8476,"depth":685,"text":8479},{"id":8500,"depth":685,"text":8503},{"id":8511,"depth":685,"text":8514},{"id":8522,"depth":685,"text":8525},{"id":675,"depth":685,"text":678},{"_path":8555,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":8556,"description":8557,"seoTitle":8558,"seoDescription":8559,"keywords":19491,"image":8568,"alt":8569,"ogImage":8568,"tags":19492,"categories":19493,"published":25,"author":26,"link":8555,"date":8574,"sitemap":19494,"body":19497,"_type":693,"_id":9324,"_source":695,"_file":9325,"_stem":9326,"_extension":698},[19,8561,8562,8563,8564,8565,8566,8567],[23,8566,8561,8571],[19,8573],{"loc":8576,"lastmod":8574,"changefreq":30,"priority":31,"images":19495},[19496],{"loc":8568},{"type":35,"children":19498,"toc":20140},[19499,19503,19507,19517,19521,19525,19529,19572,19575,19579,19587,19591,19602,19606,19621,19632,19636,19644,19648,19659,19663,19674,19685,19689,19697,19701,19716,19720,19731,19742,19746,19754,19758,19781,19785,19796,19807,19811,19815,19834,19838,19849,19860,19864,20079,20109,20113,20117,20136],{"type":38,"tag":46,"props":19500,"children":19501},{"id":8583},[19502],{"type":43,"value":8586},{"type":38,"tag":39,"props":19504,"children":19505},{},[19506],{"type":43,"value":8591},{"type":38,"tag":39,"props":19508,"children":19509},{},[19510,19511,19516],{"type":43,"value":8596},{"type":38,"tag":559,"props":19512,"children":19514},{"className":19513},[],[19515],{"type":43,"value":8602},{"type":43,"value":8604},{"type":38,"tag":46,"props":19518,"children":19519},{"id":8607},[19520],{"type":43,"value":8610},{"type":38,"tag":39,"props":19522,"children":19523},{},[19524],{"type":43,"value":8615},{"type":38,"tag":39,"props":19526,"children":19527},{},[19528],{"type":43,"value":8620},{"type":38,"tag":53,"props":19530,"children":19531},{},[19532,19540,19548,19556,19564],{"type":38,"tag":57,"props":19533,"children":19534},{},[19535],{"type":38,"tag":559,"props":19536,"children":19538},{"className":19537},[],[19539],{"type":43,"value":8632},{"type":38,"tag":57,"props":19541,"children":19542},{},[19543],{"type":38,"tag":559,"props":19544,"children":19546},{"className":19545},[],[19547],{"type":43,"value":8641},{"type":38,"tag":57,"props":19549,"children":19550},{},[19551],{"type":38,"tag":559,"props":19552,"children":19554},{"className":19553},[],[19555],{"type":43,"value":8650},{"type":38,"tag":57,"props":19557,"children":19558},{},[19559],{"type":38,"tag":559,"props":19560,"children":19562},{"className":19561},[],[19563],{"type":43,"value":8659},{"type":38,"tag":57,"props":19565,"children":19566},{},[19567],{"type":38,"tag":559,"props":19568,"children":19570},{"className":19569},[],[19571],{"type":43,"value":8668},{"type":38,"tag":1221,"props":19573,"children":19574},{},[],{"type":38,"tag":46,"props":19576,"children":19577},{"id":8674},[19578],{"type":43,"value":8677},{"type":38,"tag":790,"props":19580,"children":19582},{"className":19581,"code":8681,"language":23,"meta":8},[4293],[19583],{"type":38,"tag":559,"props":19584,"children":19585},{"__ignoreMap":8},[19586],{"type":43,"value":8681},{"type":38,"tag":39,"props":19588,"children":19589},{},[19590],{"type":43,"value":8691},{"type":38,"tag":53,"props":19592,"children":19593},{},[19594,19598],{"type":38,"tag":57,"props":19595,"children":19596},{},[19597],{"type":43,"value":8699},{"type":38,"tag":57,"props":19599,"children":19600},{},[19601],{"type":43,"value":8704},{"type":38,"tag":39,"props":19603,"children":19604},{},[19605],{"type":43,"value":8709},{"type":38,"tag":53,"props":19607,"children":19608},{},[19609,19613,19617],{"type":38,"tag":57,"props":19610,"children":19611},{},[19612],{"type":43,"value":8717},{"type":38,"tag":57,"props":19614,"children":19615},{},[19616],{"type":43,"value":8722},{"type":38,"tag":57,"props":19618,"children":19619},{},[19620],{"type":43,"value":8727},{"type":38,"tag":39,"props":19622,"children":19623},{},[19624,19631],{"type":38,"tag":76,"props":19625,"children":19626},{},[19627],{"type":38,"tag":72,"props":19628,"children":19629},{},[19630],{"type":43,"value":8738},{"type":43,"value":8740},{"type":38,"tag":46,"props":19633,"children":19634},{"id":8743},[19635],{"type":43,"value":8746},{"type":38,"tag":790,"props":19637,"children":19639},{"className":19638,"code":8750,"language":23,"meta":8},[4293],[19640],{"type":38,"tag":559,"props":19641,"children":19642},{"__ignoreMap":8},[19643],{"type":43,"value":8750},{"type":38,"tag":39,"props":19645,"children":19646},{},[19647],{"type":43,"value":8691},{"type":38,"tag":53,"props":19649,"children":19650},{},[19651,19655],{"type":38,"tag":57,"props":19652,"children":19653},{},[19654],{"type":43,"value":8767},{"type":38,"tag":57,"props":19656,"children":19657},{},[19658],{"type":43,"value":8772},{"type":38,"tag":39,"props":19660,"children":19661},{},[19662],{"type":43,"value":8709},{"type":38,"tag":53,"props":19664,"children":19665},{},[19666,19670],{"type":38,"tag":57,"props":19667,"children":19668},{},[19669],{"type":43,"value":8784},{"type":38,"tag":57,"props":19671,"children":19672},{},[19673],{"type":43,"value":8789},{"type":38,"tag":39,"props":19675,"children":19676},{},[19677,19684],{"type":38,"tag":76,"props":19678,"children":19679},{},[19680],{"type":38,"tag":72,"props":19681,"children":19682},{},[19683],{"type":43,"value":8738},{"type":43,"value":8801},{"type":38,"tag":46,"props":19686,"children":19687},{"id":8804},[19688],{"type":43,"value":8807},{"type":38,"tag":790,"props":19690,"children":19692},{"className":19691,"code":8811,"language":23,"meta":8},[4293],[19693],{"type":38,"tag":559,"props":19694,"children":19695},{"__ignoreMap":8},[19696],{"type":43,"value":8811},{"type":38,"tag":39,"props":19698,"children":19699},{},[19700],{"type":43,"value":8691},{"type":38,"tag":53,"props":19702,"children":19703},{},[19704,19708,19712],{"type":38,"tag":57,"props":19705,"children":19706},{},[19707],{"type":43,"value":8828},{"type":38,"tag":57,"props":19709,"children":19710},{},[19711],{"type":43,"value":8833},{"type":38,"tag":57,"props":19713,"children":19714},{},[19715],{"type":43,"value":8838},{"type":38,"tag":39,"props":19717,"children":19718},{},[19719],{"type":43,"value":8709},{"type":38,"tag":53,"props":19721,"children":19722},{},[19723,19727],{"type":38,"tag":57,"props":19724,"children":19725},{},[19726],{"type":43,"value":8850},{"type":38,"tag":57,"props":19728,"children":19729},{},[19730],{"type":43,"value":8855},{"type":38,"tag":39,"props":19732,"children":19733},{},[19734,19741],{"type":38,"tag":76,"props":19735,"children":19736},{},[19737],{"type":38,"tag":72,"props":19738,"children":19739},{},[19740],{"type":43,"value":8738},{"type":43,"value":8867},{"type":38,"tag":46,"props":19743,"children":19744},{"id":8870},[19745],{"type":43,"value":8873},{"type":38,"tag":790,"props":19747,"children":19749},{"className":19748,"code":8877,"language":23,"meta":8},[4293],[19750],{"type":38,"tag":559,"props":19751,"children":19752},{"__ignoreMap":8},[19753],{"type":43,"value":8877},{"type":38,"tag":39,"props":19755,"children":19756},{},[19757],{"type":43,"value":8691},{"type":38,"tag":53,"props":19759,"children":19760},{},[19761,19765,19769,19773,19777],{"type":38,"tag":57,"props":19762,"children":19763},{},[19764],{"type":43,"value":8894},{"type":38,"tag":57,"props":19766,"children":19767},{},[19768],{"type":43,"value":8899},{"type":38,"tag":57,"props":19770,"children":19771},{},[19772],{"type":43,"value":8904},{"type":38,"tag":57,"props":19774,"children":19775},{},[19776],{"type":43,"value":8909},{"type":38,"tag":57,"props":19778,"children":19779},{},[19780],{"type":43,"value":8914},{"type":38,"tag":39,"props":19782,"children":19783},{},[19784],{"type":43,"value":8709},{"type":38,"tag":53,"props":19786,"children":19787},{},[19788,19792],{"type":38,"tag":57,"props":19789,"children":19790},{},[19791],{"type":43,"value":8926},{"type":38,"tag":57,"props":19793,"children":19794},{},[19795],{"type":43,"value":8931},{"type":38,"tag":39,"props":19797,"children":19798},{},[19799,19806],{"type":38,"tag":76,"props":19800,"children":19801},{},[19802],{"type":38,"tag":72,"props":19803,"children":19804},{},[19805],{"type":43,"value":8738},{"type":43,"value":8943},{"type":38,"tag":46,"props":19808,"children":19809},{"id":8946},[19810],{"type":43,"value":8949},{"type":38,"tag":39,"props":19812,"children":19813},{},[19814],{"type":43,"value":8691},{"type":38,"tag":53,"props":19816,"children":19817},{},[19818,19822,19826,19830],{"type":38,"tag":57,"props":19819,"children":19820},{},[19821],{"type":43,"value":8961},{"type":38,"tag":57,"props":19823,"children":19824},{},[19825],{"type":43,"value":8966},{"type":38,"tag":57,"props":19827,"children":19828},{},[19829],{"type":43,"value":8971},{"type":38,"tag":57,"props":19831,"children":19832},{},[19833],{"type":43,"value":8976},{"type":38,"tag":39,"props":19835,"children":19836},{},[19837],{"type":43,"value":8709},{"type":38,"tag":53,"props":19839,"children":19840},{},[19841,19845],{"type":38,"tag":57,"props":19842,"children":19843},{},[19844],{"type":43,"value":8988},{"type":38,"tag":57,"props":19846,"children":19847},{},[19848],{"type":43,"value":8993},{"type":38,"tag":39,"props":19850,"children":19851},{},[19852,19859],{"type":38,"tag":76,"props":19853,"children":19854},{},[19855],{"type":38,"tag":72,"props":19856,"children":19857},{},[19858],{"type":43,"value":8738},{"type":43,"value":9005},{"type":38,"tag":46,"props":19861,"children":19862},{"id":9008},[19863],{"type":43,"value":9011},{"type":38,"tag":1387,"props":19865,"children":19866},{},[19867,19901],{"type":38,"tag":5575,"props":19868,"children":19869},{},[19870],{"type":38,"tag":1395,"props":19871,"children":19872},{},[19873,19877,19881,19885,19889,19893,19897],{"type":38,"tag":5582,"props":19874,"children":19875},{},[19876],{"type":43,"value":9025},{"type":38,"tag":5582,"props":19878,"children":19879},{},[19880],{"type":43,"value":9030},{"type":38,"tag":5582,"props":19882,"children":19883},{},[19884],{"type":43,"value":9035},{"type":38,"tag":5582,"props":19886,"children":19887},{},[19888],{"type":43,"value":9040},{"type":38,"tag":5582,"props":19890,"children":19891},{},[19892],{"type":43,"value":9045},{"type":38,"tag":5582,"props":19894,"children":19895},{},[19896],{"type":43,"value":9050},{"type":38,"tag":5582,"props":19898,"children":19899},{},[19900],{"type":43,"value":9055},{"type":38,"tag":1391,"props":19902,"children":19903},{},[19904,19939,19974,20009,20044],{"type":38,"tag":1395,"props":19905,"children":19906},{},[19907,19915,19919,19923,19927,19931,19935],{"type":38,"tag":1399,"props":19908,"children":19909},{},[19910],{"type":38,"tag":559,"props":19911,"children":19913},{"className":19912},[],[19914],{"type":43,"value":8632},{"type":38,"tag":1399,"props":19916,"children":19917},{},[19918],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19920,"children":19921},{},[19922],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19924,"children":19925},{},[19926],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19928,"children":19929},{},[19930],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19932,"children":19933},{},[19934],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19936,"children":19937},{},[19938],{"type":43,"value":9094},{"type":38,"tag":1395,"props":19940,"children":19941},{},[19942,19950,19954,19958,19962,19966,19970],{"type":38,"tag":1399,"props":19943,"children":19944},{},[19945],{"type":38,"tag":559,"props":19946,"children":19948},{"className":19947},[],[19949],{"type":43,"value":8641},{"type":38,"tag":1399,"props":19951,"children":19952},{},[19953],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19955,"children":19956},{},[19957],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19959,"children":19960},{},[19961],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19963,"children":19964},{},[19965],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19967,"children":19968},{},[19969],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19971,"children":19972},{},[19973],{"type":43,"value":9130},{"type":38,"tag":1395,"props":19975,"children":19976},{},[19977,19985,19989,19993,19997,20001,20005],{"type":38,"tag":1399,"props":19978,"children":19979},{},[19980],{"type":38,"tag":559,"props":19981,"children":19983},{"className":19982},[],[19984],{"type":43,"value":8650},{"type":38,"tag":1399,"props":19986,"children":19987},{},[19988],{"type":43,"value":9146},{"type":38,"tag":1399,"props":19990,"children":19991},{},[19992],{"type":43,"value":5719},{"type":38,"tag":1399,"props":19994,"children":19995},{},[19996],{"type":43,"value":9155},{"type":38,"tag":1399,"props":19998,"children":19999},{},[20000],{"type":43,"value":5719},{"type":38,"tag":1399,"props":20002,"children":20003},{},[20004],{"type":43,"value":5719},{"type":38,"tag":1399,"props":20006,"children":20007},{},[20008],{"type":43,"value":9168},{"type":38,"tag":1395,"props":20010,"children":20011},{},[20012,20020,20024,20028,20032,20036,20040],{"type":38,"tag":1399,"props":20013,"children":20014},{},[20015],{"type":38,"tag":559,"props":20016,"children":20018},{"className":20017},[],[20019],{"type":43,"value":8659},{"type":38,"tag":1399,"props":20021,"children":20022},{},[20023],{"type":43,"value":5657},{"type":38,"tag":1399,"props":20025,"children":20026},{},[20027],{"type":43,"value":5657},{"type":38,"tag":1399,"props":20029,"children":20030},{},[20031],{"type":43,"value":5657},{"type":38,"tag":1399,"props":20033,"children":20034},{},[20035],{"type":43,"value":5657},{"type":38,"tag":1399,"props":20037,"children":20038},{},[20039],{"type":43,"value":5719},{"type":38,"tag":1399,"props":20041,"children":20042},{},[20043],{"type":43,"value":9204},{"type":38,"tag":1395,"props":20045,"children":20046},{},[20047,20055,20059,20063,20067,20071,20075],{"type":38,"tag":1399,"props":20048,"children":20049},{},[20050],{"type":38,"tag":559,"props":20051,"children":20053},{"className":20052},[],[20054],{"type":43,"value":8668},{"type":38,"tag":1399,"props":20056,"children":20057},{},[20058],{"type":43,"value":5657},{"type":38,"tag":1399,"props":20060,"children":20061},{},[20062],{"type":43,"value":5719},{"type":38,"tag":1399,"props":20064,"children":20065},{},[20066],{"type":43,"value":5675},{"type":38,"tag":1399,"props":20068,"children":20069},{},[20070],{"type":43,"value":5719},{"type":38,"tag":1399,"props":20072,"children":20073},{},[20074],{"type":43,"value":5657},{"type":38,"tag":1399,"props":20076,"children":20077},{},[20078],{"type":43,"value":9240},{"type":38,"tag":2705,"props":20080,"children":20081},{},[20082],{"type":38,"tag":39,"props":20083,"children":20084},{},[20085,20086,20091,20092,20097,20098,20102,20103,20108],{"type":43,"value":9248},{"type":38,"tag":559,"props":20087,"children":20089},{"className":20088},[],[20090],{"type":43,"value":8650},{"type":43,"value":7230},{"type":38,"tag":559,"props":20093,"children":20095},{"className":20094},[],[20096],{"type":43,"value":8668},{"type":43,"value":9261},{"type":38,"tag":72,"props":20099,"children":20100},{},[20101],{"type":43,"value":9266},{"type":43,"value":9268},{"type":38,"tag":559,"props":20104,"children":20106},{"className":20105},[],[20107],{"type":43,"value":8659},{"type":43,"value":9275},{"type":38,"tag":46,"props":20110,"children":20111},{"id":6787},[20112],{"type":43,"value":7549},{"type":38,"tag":39,"props":20114,"children":20115},{},[20116],{"type":43,"value":9284},{"type":38,"tag":53,"props":20118,"children":20119},{},[20120,20124,20128,20132],{"type":38,"tag":57,"props":20121,"children":20122},{},[20123],{"type":43,"value":9292},{"type":38,"tag":57,"props":20125,"children":20126},{},[20127],{"type":43,"value":9297},{"type":38,"tag":57,"props":20129,"children":20130},{},[20131],{"type":43,"value":9302},{"type":38,"tag":57,"props":20133,"children":20134},{},[20135],{"type":43,"value":9307},{"type":38,"tag":39,"props":20137,"children":20138},{},[20139],{"type":43,"value":9312},{"title":8,"searchDepth":685,"depth":685,"links":20141},[20142,20143,20144,20145,20146,20147,20148,20149,20150],{"id":8583,"depth":685,"text":8586},{"id":8607,"depth":685,"text":8610},{"id":8674,"depth":685,"text":8677},{"id":8743,"depth":685,"text":8746},{"id":8804,"depth":685,"text":8807},{"id":8870,"depth":685,"text":8873},{"id":8946,"depth":685,"text":8949},{"id":9008,"depth":685,"text":9011},{"id":6787,"depth":685,"text":7549},{"_path":9328,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9329,"description":9330,"seoTitle":9331,"seoDescription":9332,"keywords":20152,"image":9338,"alt":1268,"ogImage":9338,"tags":20153,"categories":20154,"published":25,"author":26,"link":9328,"date":9343,"sitemap":20155,"body":20158,"_type":693,"_id":9507,"_source":695,"_file":9508,"_stem":9509,"_extension":698},[9334,9335,9336,9337],[713,9340,9341],[713,9340,9341],{"loc":9345,"lastmod":9343,"changefreq":30,"priority":31,"images":20156},[20157],{"loc":9338},{"type":35,"children":20159,"toc":20277},[20160,20164,20173,20182,20186,20190,20194,20198,20202,20206,20210,20214,20225,20229,20244,20255,20259,20263,20267],{"type":38,"tag":46,"props":20161,"children":20162},{"id":9352},[20163],{"type":43,"value":9355},{"type":38,"tag":39,"props":20165,"children":20166},{},[20167,20172],{"type":38,"tag":61,"props":20168,"children":20170},{"href":9361,":target":1094,"rel":20169},[65],[20171],{"type":43,"value":4765},{"type":43,"value":9366},{"type":38,"tag":39,"props":20174,"children":20175},{},[20176,20177,20181],{"type":43,"value":9371},{"type":38,"tag":61,"props":20178,"children":20179},{"href":9374},[20180],{"type":43,"value":9377},{"type":43,"value":1063},{"type":38,"tag":46,"props":20183,"children":20184},{"id":9381},[20185],{"type":43,"value":9384},{"type":38,"tag":39,"props":20187,"children":20188},{},[20189],{"type":43,"value":9389},{"type":38,"tag":39,"props":20191,"children":20192},{},[20193],{"type":43,"value":9394},{"type":38,"tag":46,"props":20195,"children":20196},{"id":9397},[20197],{"type":43,"value":9400},{"type":38,"tag":39,"props":20199,"children":20200},{},[20201],{"type":43,"value":9405},{"type":38,"tag":46,"props":20203,"children":20204},{"id":9408},[20205],{"type":43,"value":9411},{"type":38,"tag":39,"props":20207,"children":20208},{},[20209],{"type":43,"value":9416},{"type":38,"tag":39,"props":20211,"children":20212},{},[20213],{"type":43,"value":9421},{"type":38,"tag":53,"props":20215,"children":20216},{},[20217,20221],{"type":38,"tag":57,"props":20218,"children":20219},{},[20220],{"type":43,"value":9429},{"type":38,"tag":57,"props":20222,"children":20223},{},[20224],{"type":43,"value":9434},{"type":38,"tag":39,"props":20226,"children":20227},{},[20228],{"type":43,"value":9439},{"type":38,"tag":53,"props":20230,"children":20231},{},[20232,20236,20240],{"type":38,"tag":57,"props":20233,"children":20234},{},[20235],{"type":43,"value":9447},{"type":38,"tag":57,"props":20237,"children":20238},{},[20239],{"type":43,"value":9452},{"type":38,"tag":57,"props":20241,"children":20242},{},[20243],{"type":43,"value":9457},{"type":38,"tag":2705,"props":20245,"children":20246},{},[20247,20251],{"type":38,"tag":39,"props":20248,"children":20249},{},[20250],{"type":43,"value":9465},{"type":38,"tag":39,"props":20252,"children":20253},{},[20254],{"type":43,"value":9470},{"type":38,"tag":46,"props":20256,"children":20257},{"id":9473},[20258],{"type":43,"value":9476},{"type":38,"tag":3048,"props":20260,"children":20261},{"width":3050,"height":3051,"frameBorder":3052,"src":9479,"scrolling":3054,"style":3055},[20262],{"type":43,"value":9482},{"type":38,"tag":46,"props":20264,"children":20265},{"id":675},[20266],{"type":43,"value":678},{"type":38,"tag":39,"props":20268,"children":20269},{},[20270,20271,20276],{"type":43,"value":9491},{"type":38,"tag":61,"props":20272,"children":20274},{"href":9494,":target":1094,"rel":20273},[65],[20275],{"type":43,"value":1061},{"type":43,"value":1063},{"title":8,"searchDepth":685,"depth":685,"links":20278},[20279,20280,20281,20282,20283,20284],{"id":9352,"depth":685,"text":9355},{"id":9381,"depth":685,"text":9384},{"id":9397,"depth":685,"text":9400},{"id":9408,"depth":685,"text":9411},{"id":9473,"depth":685,"text":9476},{"id":675,"depth":685,"text":678},{"_path":7691,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9511,"description":9512,"seoTitle":9513,"seoDescription":9514,"keywords":20286,"image":4468,"alt":8,"ogImage":8,"tags":20287,"categories":20288,"published":25,"author":26,"link":7691,"date":9521,"sitemap":20289,"body":20294,"_type":693,"_id":9721,"_source":695,"_file":9722,"_stem":9723,"_extension":698},[9516,9517,9518],[4470,4174,4471,714],[21,23,4473,4474],{"loc":9523,"lastmod":9521,"changefreq":30,"priority":31,"images":20290},[20291,20292,20293],{"loc":4468},{"loc":9527},{"loc":9529},{"type":35,"children":20295,"toc":20445},[20296,20300,20304,20311,20323,20346,20359,20363,20367,20374,20378,20391,20395,20399,20415,20419],{"type":38,"tag":46,"props":20297,"children":20298},{"id":9534},[20299],{"type":43,"value":9537},{"type":38,"tag":39,"props":20301,"children":20302},{},[20303],{"type":43,"value":9542},{"type":38,"tag":790,"props":20305,"children":20306},{"code":9545},[20307],{"type":38,"tag":559,"props":20308,"children":20309},{"__ignoreMap":8},[20310],{"type":43,"value":9545},{"type":38,"tag":39,"props":20312,"children":20313},{},[20314,20315,20322],{"type":43,"value":9555},{"type":38,"tag":72,"props":20316,"children":20317},{},[20318],{"type":38,"tag":76,"props":20319,"children":20320},{},[20321],{"type":43,"value":9563},{"type":43,"value":9565},{"type":38,"tag":2705,"props":20324,"children":20325},{},[20326,20333,20342],{"type":38,"tag":39,"props":20327,"children":20328},{},[20329],{"type":38,"tag":72,"props":20330,"children":20331},{},[20332],{"type":43,"value":9576},{"type":38,"tag":39,"props":20334,"children":20335},{},[20336,20337,20341],{"type":43,"value":9581},{"type":38,"tag":72,"props":20338,"children":20339},{},[20340],{"type":43,"value":9586},{"type":43,"value":9588},{"type":38,"tag":39,"props":20343,"children":20344},{},[20345],{"type":43,"value":9593},{"type":38,"tag":2148,"props":20347,"children":20348},{"style":2150},[20349,20350,20353,20354],{"type":43,"value":2153},{"type":38,"tag":1885,"props":20351,"children":20352},{"style":2156,"src":9527,"alt":9600},[],{"type":43,"value":2153},{"type":38,"tag":39,"props":20355,"children":20357},{"className":20356},[4663],[20358],{"type":43,"value":9600},{"type":38,"tag":46,"props":20360,"children":20361},{"id":9610},[20362],{"type":43,"value":9613},{"type":38,"tag":39,"props":20364,"children":20365},{},[20366],{"type":43,"value":9618},{"type":38,"tag":790,"props":20368,"children":20369},{"code":9621},[20370],{"type":38,"tag":559,"props":20371,"children":20372},{"__ignoreMap":8},[20373],{"type":43,"value":9621},{"type":38,"tag":39,"props":20375,"children":20376},{},[20377],{"type":43,"value":9631},{"type":38,"tag":2148,"props":20379,"children":20380},{"style":2150},[20381,20382,20385,20386],{"type":43,"value":2153},{"type":38,"tag":1885,"props":20383,"children":20384},{"style":2156,"src":9529,"alt":9638},[],{"type":43,"value":2153},{"type":38,"tag":39,"props":20387,"children":20389},{"className":20388},[4663],[20390],{"type":43,"value":9638},{"type":38,"tag":46,"props":20392,"children":20393},{"id":9648},[20394],{"type":43,"value":9651},{"type":38,"tag":39,"props":20396,"children":20397},{},[20398],{"type":43,"value":9656},{"type":38,"tag":2705,"props":20400,"children":20401},{},[20402,20411],{"type":38,"tag":39,"props":20403,"children":20404},{},[20405,20406,20410],{"type":43,"value":9664},{"type":38,"tag":72,"props":20407,"children":20408},{},[20409],{"type":43,"value":9669},{"type":43,"value":1063},{"type":38,"tag":39,"props":20412,"children":20413},{},[20414],{"type":43,"value":9593},{"type":38,"tag":46,"props":20416,"children":20417},{"id":675},[20418],{"type":43,"value":9679},{"type":38,"tag":39,"props":20420,"children":20421},{},[20422,20423,20427,20428,20432,20433,20438,20439,20444],{"type":43,"value":9684},{"type":38,"tag":61,"props":20424,"children":20425},{"href":9687},[20426],{"type":43,"value":9690},{"type":43,"value":9692},{"type":38,"tag":61,"props":20429,"children":20430},{"href":7691},[20431],{"type":43,"value":9697},{"type":43,"value":9699},{"type":38,"tag":61,"props":20434,"children":20436},{"href":3947,"rel":20435},[65],[20437],{"type":43,"value":9705},{"type":43,"value":9707},{"type":38,"tag":61,"props":20440,"children":20442},{"href":7715,"rel":20441},[65],[20443],{"type":43,"value":7715},{"type":43,"value":9714},{"title":8,"searchDepth":685,"depth":685,"links":20446},[20447,20448,20449,20450],{"id":9534,"depth":685,"text":9537},{"id":9610,"depth":685,"text":9613},{"id":9648,"depth":685,"text":9651},{"id":675,"depth":685,"text":9679},{"_path":9725,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9726,"description":9727,"seoTitle":9728,"seoDescription":9729,"keywords":20452,"image":9735,"alt":1268,"ogImage":9735,"tags":20453,"categories":20454,"published":25,"author":26,"link":9725,"date":9739,"sitemap":20455,"body":20458,"_type":693,"_id":9886,"_source":695,"_file":9887,"_stem":9888,"_extension":698},[9731,9732,9733,9734],[713,9340,9737],[713,9340,9737],{"loc":9374,"lastmod":9739,"changefreq":30,"priority":31,"images":20456},[20457],{"loc":9735},{"type":35,"children":20459,"toc":20561},[20460,20464,20474,20478,20482,20486,20490,20498,20520,20531,20535,20539,20543,20547,20551],{"type":38,"tag":46,"props":20461,"children":20462},{"id":9747},[20463],{"type":43,"value":9750},{"type":38,"tag":39,"props":20465,"children":20466},{},[20467,20468,20473],{"type":43,"value":9755},{"type":38,"tag":61,"props":20469,"children":20471},{"href":9758,"rel":20470},[65],[20472],{"type":43,"value":9762},{"type":43,"value":9764},{"type":38,"tag":39,"props":20475,"children":20476},{},[20477],{"type":43,"value":9769},{"type":38,"tag":39,"props":20479,"children":20480},{},[20481],{"type":43,"value":9774},{"type":38,"tag":39,"props":20483,"children":20484},{},[20485],{"type":43,"value":9779},{"type":38,"tag":46,"props":20487,"children":20488},{"id":9782},[20489],{"type":43,"value":9785},{"type":38,"tag":39,"props":20491,"children":20492},{},[20493,20494,20497],{"type":43,"value":9790},{"type":38,"tag":1303,"props":20495,"children":20496},{},[],{"type":43,"value":9795},{"type":38,"tag":39,"props":20499,"children":20500},{},[20501,20502,20507,20508,20513,20514,20519],{"type":43,"value":9800},{"type":38,"tag":61,"props":20503,"children":20505},{"href":9803,"rel":20504},[65],[20506],{"type":43,"value":9807},{"type":43,"value":9809},{"type":38,"tag":61,"props":20509,"children":20511},{"href":9812,"rel":20510},[65],[20512],{"type":43,"value":9816},{"type":43,"value":9818},{"type":38,"tag":61,"props":20515,"children":20517},{"href":9821,"rel":20516},[65],[20518],{"type":43,"value":9825},{"type":43,"value":1063},{"type":38,"tag":2705,"props":20521,"children":20522},{},[20523,20527],{"type":38,"tag":39,"props":20524,"children":20525},{},[20526],{"type":43,"value":9834},{"type":38,"tag":39,"props":20528,"children":20529},{},[20530],{"type":43,"value":9839},{"type":38,"tag":46,"props":20532,"children":20533},{"id":9842},[20534],{"type":43,"value":9845},{"type":38,"tag":39,"props":20536,"children":20537},{},[20538],{"type":43,"value":9850},{"type":38,"tag":46,"props":20540,"children":20541},{"id":9853},[20542],{"type":43,"value":9856},{"type":38,"tag":3048,"props":20544,"children":20545},{"width":3050,"height":3051,"frameBorder":3052,"src":9859,"scrolling":3054,"style":3055},[20546],{"type":43,"value":9862},{"type":38,"tag":46,"props":20548,"children":20549},{"id":675},[20550],{"type":43,"value":678},{"type":38,"tag":39,"props":20552,"children":20553},{},[20554,20555,20560],{"type":43,"value":9871},{"type":38,"tag":61,"props":20556,"children":20558},{"href":9758,"rel":20557},[65],[20559],{"type":43,"value":9877},{"type":43,"value":1063},{"title":8,"searchDepth":685,"depth":685,"links":20562},[20563,20564,20565,20566,20567],{"id":9747,"depth":685,"text":9750},{"id":9782,"depth":685,"text":9785},{"id":9842,"depth":685,"text":9845},{"id":9853,"depth":685,"text":9856},{"id":675,"depth":685,"text":678},{"_path":9890,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9891,"description":9892,"seoTitle":9893,"seoDescription":9894,"keywords":20569,"image":9898,"alt":9899,"ogImage":9898,"tags":20570,"categories":20571,"published":25,"author":26,"link":9890,"date":9902,"sitemap":20572,"body":20575,"_type":693,"_id":10733,"_source":695,"_file":10734,"_stem":10735,"_extension":698},[4755,5042,9896,7902,6386,9897],[4755,4756],[3747],{"loc":9904,"lastmod":9902,"changefreq":30,"priority":31,"images":20573},[20574],{"loc":9898},{"type":35,"children":20576,"toc":21254},[20577,20593,20609,20612,20616,20632,20668,20672,20680,20684,20688,20703,20711,20715,20732,20740,20744,20757,20785,20793,20797,20801,20805,20809,20817,20821,20829,20833,20837,20848,20856,20860,20864,20868,20876,20880,20884,21014,21029,21045,21049,21124,21128,21178,21182,21192,21207,21217,21225,21229,21251],{"type":38,"tag":4183,"props":20578,"children":20579},{"id":9911},[20580,20581,20586,20587,20592],{"type":43,"value":9914},{"type":38,"tag":559,"props":20582,"children":20584},{"className":20583},[],[20585],{"type":43,"value":5042},{"type":43,"value":9921},{"type":38,"tag":559,"props":20588,"children":20590},{"className":20589},[],[20591],{"type":43,"value":9896},{"type":43,"value":9928},{"type":38,"tag":39,"props":20594,"children":20595},{},[20596,20597,20602,20603,20608],{"type":43,"value":9933},{"type":38,"tag":559,"props":20598,"children":20600},{"className":20599},[],[20601],{"type":43,"value":2901},{"type":43,"value":9940},{"type":38,"tag":559,"props":20604,"children":20606},{"className":20605},[],[20607],{"type":43,"value":9946},{"type":43,"value":9948},{"type":38,"tag":1221,"props":20610,"children":20611},{},[],{"type":38,"tag":46,"props":20613,"children":20614},{"id":9954},[20615],{"type":43,"value":9957},{"type":38,"tag":39,"props":20617,"children":20618},{},[20619,20620,20625,20626,20631],{"type":43,"value":9962},{"type":38,"tag":559,"props":20621,"children":20623},{"className":20622},[],[20624],{"type":43,"value":5042},{"type":43,"value":7230},{"type":38,"tag":559,"props":20627,"children":20629},{"className":20628},[],[20630],{"type":43,"value":9896},{"type":43,"value":2573},{"type":38,"tag":53,"props":20633,"children":20634},{},[20635,20639,20643,20653],{"type":38,"tag":57,"props":20636,"children":20637},{},[20638],{"type":43,"value":9982},{"type":38,"tag":57,"props":20640,"children":20641},{},[20642],{"type":43,"value":9987},{"type":38,"tag":57,"props":20644,"children":20645},{},[20646,20647,20652],{"type":43,"value":9992},{"type":38,"tag":559,"props":20648,"children":20650},{"className":20649},[],[20651],{"type":43,"value":9998},{"type":43,"value":10000},{"type":38,"tag":57,"props":20654,"children":20655},{},[20656,20657,20662,20663],{"type":43,"value":10005},{"type":38,"tag":559,"props":20658,"children":20660},{"className":20659},[],[20661],{"type":43,"value":10011},{"type":43,"value":6311},{"type":38,"tag":559,"props":20664,"children":20666},{"className":20665},[],[20667],{"type":43,"value":10018},{"type":38,"tag":39,"props":20669,"children":20670},{},[20671],{"type":43,"value":10023},{"type":38,"tag":790,"props":20673,"children":20675},{"className":20674,"code":10027,"language":4972,"meta":8},[4970],[20676],{"type":38,"tag":559,"props":20677,"children":20678},{"__ignoreMap":8},[20679],{"type":43,"value":10027},{"type":38,"tag":46,"props":20681,"children":20682},{"id":10035},[20683],{"type":43,"value":10038},{"type":38,"tag":4283,"props":20685,"children":20686},{"id":10041},[20687],{"type":43,"value":10044},{"type":38,"tag":53,"props":20689,"children":20690},{},[20691,20695,20699],{"type":38,"tag":57,"props":20692,"children":20693},{},[20694],{"type":43,"value":10052},{"type":38,"tag":57,"props":20696,"children":20697},{},[20698],{"type":43,"value":10057},{"type":38,"tag":57,"props":20700,"children":20701},{},[20702],{"type":43,"value":10062},{"type":38,"tag":790,"props":20704,"children":20706},{"className":20705,"code":10066,"language":4972,"meta":8},[4970],[20707],{"type":38,"tag":559,"props":20708,"children":20709},{"__ignoreMap":8},[20710],{"type":43,"value":10066},{"type":38,"tag":4283,"props":20712,"children":20713},{"id":10074},[20714],{"type":43,"value":10077},{"type":38,"tag":53,"props":20716,"children":20717},{},[20718,20728],{"type":38,"tag":57,"props":20719,"children":20720},{},[20721,20722,20727],{"type":43,"value":10085},{"type":38,"tag":559,"props":20723,"children":20725},{"className":20724},[],[20726],{"type":43,"value":9998},{"type":43,"value":10092},{"type":38,"tag":57,"props":20729,"children":20730},{},[20731],{"type":43,"value":10097},{"type":38,"tag":790,"props":20733,"children":20735},{"className":20734,"code":10101,"language":4972,"meta":8},[4970],[20736],{"type":38,"tag":559,"props":20737,"children":20738},{"__ignoreMap":8},[20739],{"type":43,"value":10101},{"type":38,"tag":39,"props":20741,"children":20742},{},[20743],{"type":43,"value":10111},{"type":38,"tag":39,"props":20745,"children":20746},{},[20747],{"type":38,"tag":72,"props":20748,"children":20749},{},[20750,20751,20756],{"type":43,"value":10119},{"type":38,"tag":559,"props":20752,"children":20754},{"className":20753},[],[20755],{"type":43,"value":9998},{"type":43,"value":10126},{"type":38,"tag":53,"props":20758,"children":20759},{},[20760,20770],{"type":38,"tag":57,"props":20761,"children":20762},{},[20763,20764,20769],{"type":43,"value":10134},{"type":38,"tag":559,"props":20765,"children":20767},{"className":20766},[],[20768],{"type":43,"value":9998},{"type":43,"value":1063},{"type":38,"tag":57,"props":20771,"children":20772},{},[20773,20774],{"type":43,"value":10145},{"type":38,"tag":53,"props":20775,"children":20776},{},[20777,20781],{"type":38,"tag":57,"props":20778,"children":20779},{},[20780],{"type":43,"value":10153},{"type":38,"tag":57,"props":20782,"children":20783},{},[20784],{"type":43,"value":10158},{"type":38,"tag":790,"props":20786,"children":20788},{"className":20787,"code":10162,"language":4972,"meta":8},[4970],[20789],{"type":38,"tag":559,"props":20790,"children":20791},{"__ignoreMap":8},[20792],{"type":43,"value":10162},{"type":38,"tag":46,"props":20794,"children":20795},{"id":10170},[20796],{"type":43,"value":10173},{"type":38,"tag":39,"props":20798,"children":20799},{},[20800],{"type":43,"value":10178},{"type":38,"tag":4283,"props":20802,"children":20803},{"id":10181},[20804],{"type":43,"value":10184},{"type":38,"tag":39,"props":20806,"children":20807},{},[20808],{"type":43,"value":10189},{"type":38,"tag":790,"props":20810,"children":20812},{"className":20811,"code":10193,"language":4972,"meta":8},[4970],[20813],{"type":38,"tag":559,"props":20814,"children":20815},{"__ignoreMap":8},[20816],{"type":43,"value":10193},{"type":38,"tag":39,"props":20818,"children":20819},{},[20820],{"type":43,"value":10203},{"type":38,"tag":790,"props":20822,"children":20824},{"className":20823,"code":10207,"language":4972,"meta":8},[4970],[20825],{"type":38,"tag":559,"props":20826,"children":20827},{"__ignoreMap":8},[20828],{"type":43,"value":10207},{"type":38,"tag":39,"props":20830,"children":20831},{},[20832],{"type":43,"value":10217},{"type":38,"tag":4283,"props":20834,"children":20835},{"id":10220},[20836],{"type":43,"value":10223},{"type":38,"tag":53,"props":20838,"children":20839},{},[20840,20844],{"type":38,"tag":57,"props":20841,"children":20842},{},[20843],{"type":43,"value":10231},{"type":38,"tag":57,"props":20845,"children":20846},{},[20847],{"type":43,"value":10236},{"type":38,"tag":790,"props":20849,"children":20851},{"className":20850,"code":10240,"language":4972,"meta":8},[4970],[20852],{"type":38,"tag":559,"props":20853,"children":20854},{"__ignoreMap":8},[20855],{"type":43,"value":10240},{"type":38,"tag":39,"props":20857,"children":20858},{},[20859],{"type":43,"value":10250},{"type":38,"tag":4283,"props":20861,"children":20862},{"id":10253},[20863],{"type":43,"value":10256},{"type":38,"tag":39,"props":20865,"children":20866},{},[20867],{"type":43,"value":10261},{"type":38,"tag":790,"props":20869,"children":20871},{"className":20870,"code":10265,"language":4972,"meta":8},[4970],[20872],{"type":38,"tag":559,"props":20873,"children":20874},{"__ignoreMap":8},[20875],{"type":43,"value":10265},{"type":38,"tag":39,"props":20877,"children":20878},{},[20879],{"type":43,"value":10275},{"type":38,"tag":4283,"props":20881,"children":20882},{"id":10278},[20883],{"type":43,"value":10281},{"type":38,"tag":1387,"props":20885,"children":20886},{},[20887,20915],{"type":38,"tag":5575,"props":20888,"children":20889},{},[20890],{"type":38,"tag":1395,"props":20891,"children":20892},{},[20893,20897,20906],{"type":38,"tag":5582,"props":20894,"children":20895},{},[20896],{"type":43,"value":10295},{"type":38,"tag":5582,"props":20898,"children":20899},{},[20900,20901],{"type":43,"value":10300},{"type":38,"tag":559,"props":20902,"children":20904},{"className":20903},[],[20905],{"type":43,"value":2901},{"type":38,"tag":5582,"props":20907,"children":20908},{},[20909,20910],{"type":43,"value":10300},{"type":38,"tag":559,"props":20911,"children":20913},{"className":20912},[],[20914],{"type":43,"value":9946},{"type":38,"tag":1391,"props":20916,"children":20917},{},[20918,20933,20948,20963,20978,20993],{"type":38,"tag":1395,"props":20919,"children":20920},{},[20921,20925,20929],{"type":38,"tag":1399,"props":20922,"children":20923},{},[20924],{"type":43,"value":10325},{"type":38,"tag":1399,"props":20926,"children":20927},{},[20928],{"type":43,"value":6718},{"type":38,"tag":1399,"props":20930,"children":20931},{},[20932],{"type":43,"value":6718},{"type":38,"tag":1395,"props":20934,"children":20935},{},[20936,20940,20944],{"type":38,"tag":1399,"props":20937,"children":20938},{},[20939],{"type":43,"value":10341},{"type":38,"tag":1399,"props":20941,"children":20942},{},[20943],{"type":43,"value":6718},{"type":38,"tag":1399,"props":20945,"children":20946},{},[20947],{"type":43,"value":6713},{"type":38,"tag":1395,"props":20949,"children":20950},{},[20951,20955,20959],{"type":38,"tag":1399,"props":20952,"children":20953},{},[20954],{"type":43,"value":10357},{"type":38,"tag":1399,"props":20956,"children":20957},{},[20958],{"type":43,"value":6713},{"type":38,"tag":1399,"props":20960,"children":20961},{},[20962],{"type":43,"value":6718},{"type":38,"tag":1395,"props":20964,"children":20965},{},[20966,20970,20974],{"type":38,"tag":1399,"props":20967,"children":20968},{},[20969],{"type":43,"value":10373},{"type":38,"tag":1399,"props":20971,"children":20972},{},[20973],{"type":43,"value":6713},{"type":38,"tag":1399,"props":20975,"children":20976},{},[20977],{"type":43,"value":6718},{"type":38,"tag":1395,"props":20979,"children":20980},{},[20981,20985,20989],{"type":38,"tag":1399,"props":20982,"children":20983},{},[20984],{"type":43,"value":10389},{"type":38,"tag":1399,"props":20986,"children":20987},{},[20988],{"type":43,"value":6718},{"type":38,"tag":1399,"props":20990,"children":20991},{},[20992],{"type":43,"value":6713},{"type":38,"tag":1395,"props":20994,"children":20995},{},[20996,21006,21010],{"type":38,"tag":1399,"props":20997,"children":20998},{},[20999,21000,21005],{"type":43,"value":10405},{"type":38,"tag":559,"props":21001,"children":21003},{"className":21002},[],[21004],{"type":43,"value":9998},{"type":43,"value":10412},{"type":38,"tag":1399,"props":21007,"children":21008},{},[21009],{"type":43,"value":6713},{"type":38,"tag":1399,"props":21011,"children":21012},{},[21013],{"type":43,"value":6718},{"type":38,"tag":46,"props":21015,"children":21016},{"id":10423},[21017,21018,21023,21024],{"type":43,"value":10426},{"type":38,"tag":559,"props":21019,"children":21021},{"className":21020},[],[21022],{"type":43,"value":2901},{"type":43,"value":9921},{"type":38,"tag":559,"props":21025,"children":21027},{"className":21026},[],[21028],{"type":43,"value":9946},{"type":38,"tag":39,"props":21030,"children":21031},{},[21032,21033,21038,21039,21044],{"type":43,"value":10442},{"type":38,"tag":559,"props":21034,"children":21036},{"className":21035},[],[21037],{"type":43,"value":2901},{"type":43,"value":7230},{"type":38,"tag":559,"props":21040,"children":21042},{"className":21041},[],[21043],{"type":43,"value":9946},{"type":43,"value":10455},{"type":38,"tag":4283,"props":21046,"children":21047},{"id":10458},[21048],{"type":43,"value":10461},{"type":38,"tag":53,"props":21050,"children":21051},{},[21052,21067,21082,21104,21120],{"type":38,"tag":57,"props":21053,"children":21054},{},[21055,21056,21060,21061,21066],{"type":43,"value":10469},{"type":38,"tag":72,"props":21057,"children":21058},{},[21059],{"type":43,"value":10474},{"type":43,"value":10476},{"type":38,"tag":559,"props":21062,"children":21064},{"className":21063},[],[21065],{"type":43,"value":10482},{"type":43,"value":1063},{"type":38,"tag":57,"props":21068,"children":21069},{},[21070,21071,21076,21077,21081],{"type":43,"value":1202},{"type":38,"tag":559,"props":21072,"children":21074},{"className":21073},[],[21075],{"type":43,"value":10493},{"type":43,"value":10495},{"type":38,"tag":72,"props":21078,"children":21079},{},[21080],{"type":43,"value":10500},{"type":43,"value":10502},{"type":38,"tag":57,"props":21083,"children":21084},{},[21085,21086,21091,21092,21097,21098,21103],{"type":43,"value":1202},{"type":38,"tag":559,"props":21087,"children":21089},{"className":21088},[],[21090],{"type":43,"value":2901},{"type":43,"value":7230},{"type":38,"tag":559,"props":21093,"children":21095},{"className":21094},[],[21096],{"type":43,"value":9946},{"type":43,"value":10519},{"type":38,"tag":559,"props":21099,"children":21101},{"className":21100},[],[21102],{"type":43,"value":10525},{"type":43,"value":1063},{"type":38,"tag":57,"props":21105,"children":21106},{},[21107,21108,21113,21114,21119],{"type":43,"value":10531},{"type":38,"tag":559,"props":21109,"children":21111},{"className":21110},[],[21112],{"type":43,"value":10011},{"type":43,"value":10538},{"type":38,"tag":559,"props":21115,"children":21117},{"className":21116},[],[21118],{"type":43,"value":10544},{"type":43,"value":10546},{"type":38,"tag":57,"props":21121,"children":21122},{},[21123],{"type":43,"value":10551},{"type":38,"tag":4283,"props":21125,"children":21126},{"id":10554},[21127],{"type":43,"value":10557},{"type":38,"tag":53,"props":21129,"children":21130},{},[21131,21145,21164],{"type":38,"tag":57,"props":21132,"children":21133},{},[21134,21139,21140,21144],{"type":38,"tag":559,"props":21135,"children":21137},{"className":21136},[],[21138],{"type":43,"value":2901},{"type":43,"value":10570},{"type":38,"tag":72,"props":21141,"children":21142},{},[21143],{"type":43,"value":10575},{"type":43,"value":10577},{"type":38,"tag":57,"props":21146,"children":21147},{},[21148,21153,21154,21158,21159,21163],{"type":38,"tag":559,"props":21149,"children":21151},{"className":21150},[],[21152],{"type":43,"value":9946},{"type":43,"value":10587},{"type":38,"tag":72,"props":21155,"children":21156},{},[21157],{"type":43,"value":10592},{"type":43,"value":10594},{"type":38,"tag":72,"props":21160,"children":21161},{},[21162],{"type":43,"value":10599},{"type":43,"value":1063},{"type":38,"tag":57,"props":21165,"children":21166},{},[21167,21172,21173,21177],{"type":38,"tag":559,"props":21168,"children":21170},{"className":21169},[],[21171],{"type":43,"value":9946},{"type":43,"value":10610},{"type":38,"tag":72,"props":21174,"children":21175},{},[21176],{"type":43,"value":10615},{"type":43,"value":10617},{"type":38,"tag":4283,"props":21179,"children":21180},{"id":7126},[21181],{"type":43,"value":7129},{"type":38,"tag":39,"props":21183,"children":21184},{},[21185,21186,21191],{"type":43,"value":10626},{"type":38,"tag":559,"props":21187,"children":21189},{"className":21188},[],[21190],{"type":43,"value":9946},{"type":43,"value":10633},{"type":38,"tag":53,"props":21193,"children":21194},{},[21195,21199,21203],{"type":38,"tag":57,"props":21196,"children":21197},{},[21198],{"type":43,"value":10641},{"type":38,"tag":57,"props":21200,"children":21201},{},[21202],{"type":43,"value":10646},{"type":38,"tag":57,"props":21204,"children":21205},{},[21206],{"type":43,"value":10651},{"type":38,"tag":39,"props":21208,"children":21209},{},[21210,21211,21216],{"type":43,"value":10656},{"type":38,"tag":559,"props":21212,"children":21214},{"className":21213},[],[21215],{"type":43,"value":2901},{"type":43,"value":10663},{"type":38,"tag":790,"props":21218,"children":21220},{"className":21219,"code":10667,"language":4972,"meta":8},[4970],[21221],{"type":38,"tag":559,"props":21222,"children":21223},{"__ignoreMap":8},[21224],{"type":43,"value":10667},{"type":38,"tag":4283,"props":21226,"children":21227},{"id":10675},[21228],{"type":43,"value":10678},{"type":38,"tag":39,"props":21230,"children":21231},{},[21232,21233,21238,21239,21244,21245,21250],{"type":43,"value":10683},{"type":38,"tag":559,"props":21234,"children":21236},{"className":21235},[],[21237],{"type":43,"value":2901},{"type":43,"value":10690},{"type":38,"tag":559,"props":21240,"children":21242},{"className":21241},[],[21243],{"type":43,"value":9946},{"type":43,"value":10697},{"type":38,"tag":559,"props":21246,"children":21248},{"className":21247},[],[21249],{"type":43,"value":2901},{"type":43,"value":10704},{"type":38,"tag":10706,"props":21252,"children":21253},{"alt":10708,"height":3050,"src":10709,"title":10710,"width":10711},[],{"title":8,"searchDepth":685,"depth":685,"links":21255},[21256,21257,21261,21267],{"id":9954,"depth":685,"text":9957},{"id":10035,"depth":685,"text":10038,"children":21258},[21259,21260],{"id":10041,"depth":4447,"text":10044},{"id":10074,"depth":4447,"text":10077},{"id":10170,"depth":685,"text":10173,"children":21262},[21263,21264,21265,21266],{"id":10181,"depth":4447,"text":10184},{"id":10220,"depth":4447,"text":10223},{"id":10253,"depth":4447,"text":10256},{"id":10278,"depth":4447,"text":10281},{"id":10423,"depth":685,"text":10727,"children":21268},[21269,21270,21271,21272],{"id":10458,"depth":4447,"text":10461},{"id":10554,"depth":4447,"text":10557},{"id":7126,"depth":4447,"text":7129},{"id":10675,"depth":4447,"text":10678},{"_path":10737,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":10738,"description":10739,"seoTitle":10740,"seoDescription":10741,"keywords":21274,"image":9338,"alt":1268,"ogImage":9338,"tags":21275,"categories":21276,"published":25,"author":26,"link":10737,"date":10749,"sitemap":21277,"body":21282,"_type":693,"_id":10933,"_source":695,"_file":10934,"_stem":10935,"_extension":698},[10743,10744,10745,10746],[713,9340,9341],[713,9340,9341],{"loc":10751,"lastmod":10749,"changefreq":30,"priority":31,"images":21278},[21279,21280,21281],{"loc":9338},{"loc":10755},{"loc":10757},{"type":35,"children":21283,"toc":21417},[21284,21299,21303,21307,21322,21344,21359,21363,21367,21374,21378,21382,21389,21393,21397,21404,21408],{"type":38,"tag":39,"props":21285,"children":21286},{},[21287,21288,21293,21294,21298],{"type":43,"value":10764},{"type":38,"tag":61,"props":21289,"children":21291},{"href":9361,":target":1094,"rel":21290},[65],[21292],{"type":43,"value":10770},{"type":43,"value":10772},{"type":38,"tag":61,"props":21295,"children":21296},{"href":9725},[21297],{"type":43,"value":10777},{"type":43,"value":10779},{"type":38,"tag":46,"props":21300,"children":21301},{"id":10782},[21302],{"type":43,"value":10785},{"type":38,"tag":39,"props":21304,"children":21305},{},[21306],{"type":43,"value":10790},{"type":38,"tag":1383,"props":21308,"children":21309},{},[21310],{"type":38,"tag":2148,"props":21311,"children":21312},{"style":2150},[21313,21314,21317,21318],{"type":43,"value":2153},{"type":38,"tag":1885,"props":21315,"children":21316},{"style":10800,"src":10755,"alt":10801},[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":21319,"children":21320},{},[21321],{"type":43,"value":10801},{"type":38,"tag":39,"props":21323,"children":21324},{},[21325,21326,21330,21331,21334,21338,21339,21343],{"type":43,"value":10812},{"type":38,"tag":76,"props":21327,"children":21328},{},[21329],{"type":43,"value":10817},{"type":43,"value":10819},{"type":38,"tag":1303,"props":21332,"children":21333},{},[],{"type":38,"tag":76,"props":21335,"children":21336},{},[21337],{"type":43,"value":10827},{"type":43,"value":10829},{"type":38,"tag":76,"props":21340,"children":21341},{},[21342],{"type":43,"value":10834},{"type":43,"value":10836},{"type":38,"tag":1383,"props":21345,"children":21346},{},[21347],{"type":38,"tag":2148,"props":21348,"children":21349},{"style":2150},[21350,21351,21354,21355],{"type":43,"value":2153},{"type":38,"tag":1885,"props":21352,"children":21353},{"style":2156,"src":10757,"alt":10846},[],{"type":43,"value":2153},{"type":38,"tag":1517,"props":21356,"children":21357},{},[21358],{"type":43,"value":10846},{"type":38,"tag":46,"props":21360,"children":21361},{"id":10855},[21362],{"type":43,"value":10858},{"type":38,"tag":39,"props":21364,"children":21365},{},[21366],{"type":43,"value":10863},{"type":38,"tag":790,"props":21368,"children":21369},{"code":10866},[21370],{"type":38,"tag":559,"props":21371,"children":21372},{"__ignoreMap":8},[21373],{"type":43,"value":10866},{"type":38,"tag":46,"props":21375,"children":21376},{"id":10874},[21377],{"type":43,"value":10877},{"type":38,"tag":39,"props":21379,"children":21380},{},[21381],{"type":43,"value":10882},{"type":38,"tag":790,"props":21383,"children":21384},{"code":10885},[21385],{"type":38,"tag":559,"props":21386,"children":21387},{"__ignoreMap":8},[21388],{"type":43,"value":10885},{"type":38,"tag":46,"props":21390,"children":21391},{"id":10893},[21392],{"type":43,"value":10896},{"type":38,"tag":39,"props":21394,"children":21395},{},[21396],{"type":43,"value":10901},{"type":38,"tag":790,"props":21398,"children":21399},{"code":10904},[21400],{"type":38,"tag":559,"props":21401,"children":21402},{"__ignoreMap":8},[21403],{"type":43,"value":10904},{"type":38,"tag":46,"props":21405,"children":21406},{"id":675},[21407],{"type":43,"value":678},{"type":38,"tag":39,"props":21409,"children":21410},{},[21411,21412,21416],{"type":43,"value":10918},{"type":38,"tag":76,"props":21413,"children":21414},{},[21415],{"type":43,"value":10923},{"type":43,"value":10925},{"title":8,"searchDepth":685,"depth":685,"links":21418},[21419,21420,21421,21422,21423],{"id":10782,"depth":685,"text":10785},{"id":10855,"depth":685,"text":10858},{"id":10874,"depth":685,"text":10877},{"id":10893,"depth":685,"text":10896},{"id":675,"depth":685,"text":678},{"_path":10937,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":10938,"description":10939,"seoTitle":10940,"seoDescription":10941,"keywords":21425,"image":10947,"alt":1268,"ogImage":10947,"tags":21426,"categories":21427,"published":25,"author":26,"link":10937,"date":10953,"sitemap":21428,"body":21434,"_type":693,"_id":11324,"_source":695,"_file":11325,"_stem":11326,"_extension":698},[10943,10944,10945,10946],[10949],[21,10951,10952],{"loc":10955,"lastmod":10953,"changefreq":30,"priority":31,"images":21429},[21430,21431,21432,21433],{"loc":10947},{"loc":10959},{"loc":10961},{"loc":10963},{"type":35,"children":21435,"toc":21730},[21436,21443,21447,21451,21455,21459,21467,21471,21475,21479,21486,21490,21494,21501,21505,21518,21522,21535,21539,21543,21556,21568,21575,21579,21586,21606,21609,21619,21654,21657,21661,21665,21669,21673,21692,21696],{"type":38,"tag":46,"props":21437,"children":21438},{"id":10968},[21439],{"type":38,"tag":72,"props":21440,"children":21441},{},[21442],{"type":43,"value":10974},{"type":38,"tag":39,"props":21444,"children":21445},{},[21446],{"type":43,"value":10979},{"type":38,"tag":39,"props":21448,"children":21449},{},[21450],{"type":43,"value":10984},{"type":38,"tag":39,"props":21452,"children":21453},{},[21454],{"type":43,"value":10989},{"type":38,"tag":46,"props":21456,"children":21457},{"id":9690},[21458],{"type":43,"value":10994},{"type":38,"tag":39,"props":21460,"children":21461},{},[21462,21463,21466],{"type":43,"value":10999},{"type":38,"tag":1303,"props":21464,"children":21465},{},[],{"type":43,"value":11004},{"type":38,"tag":46,"props":21468,"children":21469},{"id":11007},[21470],{"type":43,"value":11010},{"type":38,"tag":39,"props":21472,"children":21473},{},[21474],{"type":43,"value":11015},{"type":38,"tag":39,"props":21476,"children":21477},{},[21478],{"type":43,"value":11020},{"type":38,"tag":790,"props":21480,"children":21481},{"code":11023},[21482],{"type":38,"tag":559,"props":21483,"children":21484},{"__ignoreMap":8},[21485],{"type":43,"value":11023},{"type":38,"tag":39,"props":21487,"children":21488},{},[21489],{"type":43,"value":11033},{"type":38,"tag":39,"props":21491,"children":21492},{},[21493],{"type":43,"value":11038},{"type":38,"tag":790,"props":21495,"children":21496},{"code":11041},[21497],{"type":38,"tag":559,"props":21498,"children":21499},{"__ignoreMap":8},[21500],{"type":43,"value":11041},{"type":38,"tag":39,"props":21502,"children":21503},{},[21504],{"type":43,"value":11051},{"type":38,"tag":2148,"props":21506,"children":21507},{"style":2150},[21508,21509,21512,21513],{"type":43,"value":2153},{"type":38,"tag":1885,"props":21510,"children":21511},{"style":2156,"src":10959,"alt":11058},[],{"type":43,"value":2153},{"type":38,"tag":39,"props":21514,"children":21516},{"className":21515},[4663],[21517],{"type":43,"value":11066},{"type":38,"tag":39,"props":21519,"children":21520},{},[21521],{"type":43,"value":11071},{"type":38,"tag":2148,"props":21523,"children":21524},{"style":2150},[21525,21526,21529,21530],{"type":43,"value":2153},{"type":38,"tag":1885,"props":21527,"children":21528},{"style":11078,"src":10961,"alt":11079},[],{"type":43,"value":2153},{"type":38,"tag":39,"props":21531,"children":21533},{"className":21532},[4663],[21534],{"type":43,"value":11079},{"type":38,"tag":46,"props":21536,"children":21537},{"id":11089},[21538],{"type":43,"value":11092},{"type":38,"tag":39,"props":21540,"children":21541},{},[21542],{"type":43,"value":11097},{"type":38,"tag":2148,"props":21544,"children":21545},{"style":2150},[21546,21547,21550,21551],{"type":43,"value":2153},{"type":38,"tag":1885,"props":21548,"children":21549},{"style":2156,"src":10963,"alt":11079},[],{"type":43,"value":2153},{"type":38,"tag":39,"props":21552,"children":21554},{"className":21553},[4663],[21555],{"type":43,"value":11079},{"type":38,"tag":39,"props":21557,"children":21558},{},[21559,21560,21567],{"type":43,"value":11115},{"type":38,"tag":72,"props":21561,"children":21562},{},[21563],{"type":38,"tag":76,"props":21564,"children":21565},{},[21566],{"type":43,"value":11123},{"type":43,"value":11125},{"type":38,"tag":790,"props":21569,"children":21570},{"code":11128},[21571],{"type":38,"tag":559,"props":21572,"children":21573},{"__ignoreMap":8},[21574],{"type":43,"value":11128},{"type":38,"tag":39,"props":21576,"children":21577},{},[21578],{"type":43,"value":11138},{"type":38,"tag":790,"props":21580,"children":21581},{"code":11141},[21582],{"type":38,"tag":559,"props":21583,"children":21584},{"__ignoreMap":8},[21585],{"type":43,"value":11141},{"type":38,"tag":39,"props":21587,"children":21588},{},[21589,21590,21597,21598,21605],{"type":43,"value":1202},{"type":38,"tag":72,"props":21591,"children":21592},{},[21593],{"type":38,"tag":76,"props":21594,"children":21595},{},[21596],{"type":43,"value":11158},{"type":43,"value":11160},{"type":38,"tag":72,"props":21599,"children":21600},{},[21601],{"type":38,"tag":76,"props":21602,"children":21603},{},[21604],{"type":43,"value":11158},{"type":43,"value":11169},{"type":38,"tag":1221,"props":21607,"children":21608},{},[],{"type":38,"tag":39,"props":21610,"children":21611},{},[21612],{"type":38,"tag":72,"props":21613,"children":21614},{},[21615],{"type":38,"tag":76,"props":21616,"children":21617},{},[21618],{"type":43,"value":11183},{"type":38,"tag":53,"props":21620,"children":21621},{},[21622,21626,21634,21642,21650],{"type":38,"tag":57,"props":21623,"children":21624},{},[21625],{"type":43,"value":11191},{"type":38,"tag":57,"props":21627,"children":21628},{},[21629,21630],{"type":43,"value":11196},{"type":38,"tag":72,"props":21631,"children":21632},{},[21633],{"type":43,"value":11201},{"type":38,"tag":57,"props":21635,"children":21636},{},[21637],{"type":38,"tag":61,"props":21638,"children":21640},{"href":11207,":target":1094,"rel":21639},[65],[21641],{"type":43,"value":11207},{"type":38,"tag":57,"props":21643,"children":21644},{},[21645],{"type":38,"tag":61,"props":21646,"children":21648},{"href":11216,":target":1094,"rel":21647},[65],[21649],{"type":43,"value":11216},{"type":38,"tag":57,"props":21651,"children":21652},{},[21653],{"type":43,"value":11224},{"type":38,"tag":1221,"props":21655,"children":21656},{},[],{"type":38,"tag":3048,"props":21658,"children":21659},{"width":3050,"height":3051,"frameBorder":3052,"src":11230,"scrolling":3054,"style":3055},[21660],{"type":43,"value":11233},{"type":38,"tag":46,"props":21662,"children":21663},{"id":6787},[21664],{"type":43,"value":7549},{"type":38,"tag":39,"props":21666,"children":21667},{},[21668],{"type":43,"value":11242},{"type":38,"tag":46,"props":21670,"children":21671},{"id":1761},[21672],{"type":43,"value":2829},{"type":38,"tag":53,"props":21674,"children":21675},{},[21676,21684],{"type":38,"tag":57,"props":21677,"children":21678},{},[21679],{"type":38,"tag":61,"props":21680,"children":21682},{"href":11207,":target":1094,"rel":21681},[65],[21683],{"type":43,"value":11258},{"type":38,"tag":57,"props":21685,"children":21686},{},[21687],{"type":38,"tag":61,"props":21688,"children":21690},{"href":11216,":target":1094,"rel":21689},[65],[21691],{"type":43,"value":11267},{"type":38,"tag":46,"props":21693,"children":21694},{"id":11270},[21695],{"type":43,"value":11273},{"type":38,"tag":53,"props":21697,"children":21698},{},[21699,21706,21710,21714,21718,21722,21726],{"type":38,"tag":57,"props":21700,"children":21701},{},[21702],{"type":38,"tag":61,"props":21703,"children":21704},{"href":10937},[21705],{"type":43,"value":11284},{"type":38,"tag":57,"props":21707,"children":21708},{},[21709],{"type":43,"value":11289},{"type":38,"tag":57,"props":21711,"children":21712},{},[21713],{"type":43,"value":11294},{"type":38,"tag":57,"props":21715,"children":21716},{},[21717],{"type":43,"value":11299},{"type":38,"tag":57,"props":21719,"children":21720},{},[21721],{"type":43,"value":11304},{"type":38,"tag":57,"props":21723,"children":21724},{},[21725],{"type":43,"value":11309},{"type":38,"tag":57,"props":21727,"children":21728},{},[21729],{"type":43,"value":11314},{"title":8,"searchDepth":685,"depth":685,"links":21731},[21732,21733,21734,21735,21736,21737,21738],{"id":10968,"depth":685,"text":10974},{"id":9690,"depth":685,"text":10994},{"id":11007,"depth":685,"text":11010},{"id":11089,"depth":685,"text":11092},{"id":6787,"depth":685,"text":7549},{"id":1761,"depth":685,"text":2829},{"id":11270,"depth":685,"text":11273},{"_path":11328,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11329,"description":11330,"seoTitle":11331,"seoDescription":11332,"keywords":21740,"image":4468,"alt":1268,"ogImage":4468,"tags":21741,"categories":21742,"published":25,"author":26,"link":11328,"date":11340,"sitemap":21743,"body":21746,"_type":693,"_id":11501,"_source":695,"_file":11502,"_stem":11503,"_extension":698},[11334,11335,11336,11337],[4470,4174,4471,714],[4470,21,23,4473,4474],{"loc":11342,"lastmod":11340,"changefreq":30,"priority":31,"images":21744},[21745],{"loc":4468},{"type":35,"children":21747,"toc":21871},[21748,21752,21756,21785,21789,21796,21800,21804,21811,21815,21822,21826,21833,21837,21841,21845,21852,21856],{"type":38,"tag":39,"props":21749,"children":21750},{},[21751],{"type":43,"value":11351},{"type":38,"tag":46,"props":21753,"children":21754},{"id":11354},[21755],{"type":43,"value":11357},{"type":38,"tag":53,"props":21757,"children":21758},{},[21759,21770,21774],{"type":38,"tag":57,"props":21760,"children":21761},{},[21762,21763],{"type":43,"value":11365},{"type":38,"tag":53,"props":21764,"children":21765},{},[21766],{"type":38,"tag":57,"props":21767,"children":21768},{},[21769],{"type":43,"value":11373},{"type":38,"tag":57,"props":21771,"children":21772},{},[21773],{"type":43,"value":11378},{"type":38,"tag":57,"props":21775,"children":21776},{},[21777,21778],{"type":43,"value":11383},{"type":38,"tag":53,"props":21779,"children":21780},{},[21781],{"type":38,"tag":57,"props":21782,"children":21783},{},[21784],{"type":43,"value":11391},{"type":38,"tag":39,"props":21786,"children":21787},{},[21788],{"type":43,"value":11396},{"type":38,"tag":790,"props":21790,"children":21791},{"code":11399},[21792],{"type":38,"tag":559,"props":21793,"children":21794},{"__ignoreMap":8},[21795],{"type":43,"value":11399},{"type":38,"tag":46,"props":21797,"children":21798},{"id":11407},[21799],{"type":43,"value":11410},{"type":38,"tag":39,"props":21801,"children":21802},{},[21803],{"type":43,"value":11415},{"type":38,"tag":790,"props":21805,"children":21806},{"code":11418},[21807],{"type":38,"tag":559,"props":21808,"children":21809},{"__ignoreMap":8},[21810],{"type":43,"value":11418},{"type":38,"tag":39,"props":21812,"children":21813},{},[21814],{"type":43,"value":11428},{"type":38,"tag":790,"props":21816,"children":21817},{"code":11431},[21818],{"type":38,"tag":559,"props":21819,"children":21820},{"__ignoreMap":8},[21821],{"type":43,"value":11431},{"type":38,"tag":39,"props":21823,"children":21824},{},[21825],{"type":43,"value":11441},{"type":38,"tag":790,"props":21827,"children":21828},{"code":11444},[21829],{"type":38,"tag":559,"props":21830,"children":21831},{"__ignoreMap":8},[21832],{"type":43,"value":11444},{"type":38,"tag":39,"props":21834,"children":21835},{},[21836],{"type":43,"value":11454},{"type":38,"tag":39,"props":21838,"children":21839},{},[21840],{"type":43,"value":11459},{"type":38,"tag":39,"props":21842,"children":21843},{},[21844],{"type":43,"value":11464},{"type":38,"tag":790,"props":21846,"children":21847},{"code":11467},[21848],{"type":38,"tag":559,"props":21849,"children":21850},{"__ignoreMap":8},[21851],{"type":43,"value":11467},{"type":38,"tag":46,"props":21853,"children":21854},{"id":675},[21855],{"type":43,"value":678},{"type":38,"tag":39,"props":21857,"children":21858},{},[21859,21860,21864,21865,21870],{"type":43,"value":11481},{"type":38,"tag":61,"props":21861,"children":21862},{"href":4458},[21863],{"type":43,"value":11486},{"type":43,"value":11488},{"type":38,"tag":61,"props":21866,"children":21868},{"href":7715,":target":1094,"rel":21867},[65],[21869],{"type":43,"value":733},{"type":43,"value":11495},{"title":8,"searchDepth":685,"depth":685,"links":21872},[21873,21874,21875],{"id":11354,"depth":685,"text":11357},{"id":11407,"depth":685,"text":11410},{"id":675,"depth":685,"text":678},{"_path":7016,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11505,"description":11506,"seoTitle":11507,"seoDescription":11508,"keywords":21877,"image":11514,"alt":11515,"ogImage":8,"tags":21878,"categories":21879,"published":25,"author":26,"link":7016,"date":11518,"sitemap":21880,"body":21883,"_type":693,"_id":11798,"_source":695,"_file":11799,"_stem":11800,"_extension":698},[11510,11511,11512,11513],[6832,6833,6834],[21,4473],{"loc":11520,"lastmod":11518,"changefreq":30,"priority":31,"images":21881},[21882],{"loc":11514},{"type":35,"children":21884,"toc":22097},[21885,21889,21897,21915,21919,21923,21947,21951,21974,21978,21982,21996,22000,22004,22033,22037,22045,22053,22057,22071,22075,22079,22083],{"type":38,"tag":46,"props":21886,"children":21887},{"id":11527},[21888],{"type":43,"value":11530},{"type":38,"tag":39,"props":21890,"children":21891},{},[21892,21896],{"type":38,"tag":72,"props":21893,"children":21894},{},[21895],{"type":43,"value":11538},{"type":43,"value":11540},{"type":38,"tag":39,"props":21898,"children":21899},{},[21900,21904,21905,21909,21910,21914],{"type":38,"tag":72,"props":21901,"children":21902},{},[21903],{"type":43,"value":11548},{"type":43,"value":11550},{"type":38,"tag":72,"props":21906,"children":21907},{},[21908],{"type":43,"value":11555},{"type":43,"value":11557},{"type":38,"tag":72,"props":21911,"children":21912},{},[21913],{"type":43,"value":11538},{"type":43,"value":11563},{"type":38,"tag":4283,"props":21916,"children":21917},{"id":11566},[21918],{"type":43,"value":11569},{"type":38,"tag":39,"props":21920,"children":21921},{},[21922],{"type":43,"value":11574},{"type":38,"tag":82,"props":21924,"children":21925},{},[21926,21933,21940],{"type":38,"tag":57,"props":21927,"children":21928},{},[21929],{"type":38,"tag":72,"props":21930,"children":21931},{},[21932],{"type":43,"value":11585},{"type":38,"tag":57,"props":21934,"children":21935},{},[21936],{"type":38,"tag":72,"props":21937,"children":21938},{},[21939],{"type":43,"value":11593},{"type":38,"tag":57,"props":21941,"children":21942},{},[21943],{"type":38,"tag":72,"props":21944,"children":21945},{},[21946],{"type":43,"value":11601},{"type":38,"tag":46,"props":21948,"children":21949},{"id":11604},[21950],{"type":43,"value":11607},{"type":38,"tag":39,"props":21952,"children":21953},{},[21954,21958,21959,21963,21964,21968,21969,21973],{"type":38,"tag":72,"props":21955,"children":21956},{},[21957],{"type":43,"value":11548},{"type":43,"value":11616},{"type":38,"tag":72,"props":21960,"children":21961},{},[21962],{"type":43,"value":11621},{"type":43,"value":11623},{"type":38,"tag":72,"props":21965,"children":21966},{},[21967],{"type":43,"value":11628},{"type":43,"value":1149},{"type":38,"tag":72,"props":21970,"children":21971},{},[21972],{"type":43,"value":11621},{"type":43,"value":1063},{"type":38,"tag":39,"props":21975,"children":21976},{},[21977],{"type":43,"value":11639},{"type":38,"tag":46,"props":21979,"children":21980},{"id":11642},[21981],{"type":43,"value":11645},{"type":38,"tag":39,"props":21983,"children":21984},{},[21985,21986,21990,21991,21995],{"type":43,"value":11650},{"type":38,"tag":72,"props":21987,"children":21988},{},[21989],{"type":43,"value":11593},{"type":43,"value":11656},{"type":38,"tag":72,"props":21992,"children":21993},{},[21994],{"type":43,"value":11555},{"type":43,"value":11662},{"type":38,"tag":46,"props":21997,"children":21998},{"id":11665},[21999],{"type":43,"value":11668},{"type":38,"tag":1759,"props":22001,"children":22002},{"id":6386},[22003],{"type":43,"value":11673},{"type":38,"tag":39,"props":22005,"children":22006},{},[22007,22008,22012,22013,22017,22018,22022,22023,22027,22028,22032],{"type":43,"value":11678},{"type":38,"tag":72,"props":22009,"children":22010},{},[22011],{"type":43,"value":11548},{"type":43,"value":11684},{"type":38,"tag":72,"props":22014,"children":22015},{},[22016],{"type":43,"value":11555},{"type":43,"value":11690},{"type":38,"tag":72,"props":22019,"children":22020},{},[22021],{"type":43,"value":11555},{"type":43,"value":1149},{"type":38,"tag":72,"props":22024,"children":22025},{},[22026],{"type":43,"value":11700},{"type":43,"value":1149},{"type":38,"tag":72,"props":22029,"children":22030},{},[22031],{"type":43,"value":11706},{"type":43,"value":11708},{"type":38,"tag":1759,"props":22034,"children":22035},{"id":11711},[22036],{"type":43,"value":11714},{"type":38,"tag":39,"props":22038,"children":22039},{},[22040,22044],{"type":38,"tag":72,"props":22041,"children":22042},{},[22043],{"type":43,"value":11548},{"type":43,"value":11723},{"type":38,"tag":39,"props":22046,"children":22047},{},[22048,22052],{"type":38,"tag":72,"props":22049,"children":22050},{},[22051],{"type":43,"value":11555},{"type":43,"value":11732},{"type":38,"tag":1759,"props":22054,"children":22055},{"id":11735},[22056],{"type":43,"value":11738},{"type":38,"tag":39,"props":22058,"children":22059},{},[22060,22061,22065,22066,22070],{"type":43,"value":11743},{"type":38,"tag":72,"props":22062,"children":22063},{},[22064],{"type":43,"value":11555},{"type":43,"value":9809},{"type":38,"tag":72,"props":22067,"children":22068},{},[22069],{"type":43,"value":11548},{"type":43,"value":11754},{"type":38,"tag":1759,"props":22072,"children":22073},{"id":11757},[22074],{"type":43,"value":11760},{"type":38,"tag":39,"props":22076,"children":22077},{},[22078],{"type":43,"value":11765},{"type":38,"tag":46,"props":22080,"children":22081},{"id":675},[22082],{"type":43,"value":11770},{"type":38,"tag":39,"props":22084,"children":22085},{},[22086,22090,22091,22096],{"type":38,"tag":61,"props":22087,"children":22088},{"href":7016},[22089],{"type":43,"value":1016},{"type":43,"value":11779},{"type":38,"tag":61,"props":22092,"children":22094},{"href":11782,":target":1094,"rel":22093},[65],[22095],{"type":43,"value":11786},{"type":43,"value":11788},{"title":8,"searchDepth":685,"depth":685,"links":22098},[22099,22102,22103,22104,22105],{"id":11527,"depth":685,"text":11530,"children":22100},[22101],{"id":11566,"depth":4447,"text":11569},{"id":11604,"depth":685,"text":11607},{"id":11642,"depth":685,"text":11645},{"id":11665,"depth":685,"text":11668},{"id":675,"depth":685,"text":11770},{"_path":9687,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11802,"description":11803,"seoTitle":11804,"seoDescription":11805,"keywords":22107,"image":4468,"alt":8,"ogImage":8,"tags":22108,"categories":22109,"published":25,"author":26,"link":9687,"date":11813,"sitemap":22110,"body":22114,"_type":693,"_id":12218,"_source":695,"_file":12219,"_stem":12220,"_extension":698},[11807,11808,11809,11810],[4470,4174,4471,714],[21,23,4473,4474],{"loc":730,"lastmod":11813,"changefreq":30,"priority":31,"images":22111},[22112,22113],{"loc":4468},{"loc":11818},{"type":35,"children":22115,"toc":22430},[22116,22120,22130,22134,22165,22169,22182,22186,22205,22209,22216,22227,22231,22235,22242,22246,22253,22257,22261,22280,22293,22297,22304,22308,22315,22322,22326,22333,22337,22341,22348,22359,22366,22370,22381,22388,22392,22396,22403,22407,22411,22418,22422],{"type":38,"tag":46,"props":22117,"children":22118},{"id":11823},[22119],{"type":43,"value":11826},{"type":38,"tag":39,"props":22121,"children":22122},{},[22123,22124,22129],{"type":43,"value":11831},{"type":38,"tag":61,"props":22125,"children":22127},{"href":7715,"rel":22126},[65],[22128],{"type":43,"value":11837},{"type":43,"value":11839},{"type":38,"tag":46,"props":22131,"children":22132},{"id":11842},[22133],{"type":43,"value":11845},{"type":38,"tag":53,"props":22135,"children":22136},{},[22137,22141,22145,22149,22153,22157,22161],{"type":38,"tag":57,"props":22138,"children":22139},{},[22140],{"type":43,"value":11853},{"type":38,"tag":57,"props":22142,"children":22143},{},[22144],{"type":43,"value":11858},{"type":38,"tag":57,"props":22146,"children":22147},{},[22148],{"type":43,"value":11863},{"type":38,"tag":57,"props":22150,"children":22151},{},[22152],{"type":43,"value":11868},{"type":38,"tag":57,"props":22154,"children":22155},{},[22156],{"type":43,"value":11873},{"type":38,"tag":57,"props":22158,"children":22159},{},[22160],{"type":43,"value":11878},{"type":38,"tag":57,"props":22162,"children":22163},{},[22164],{"type":43,"value":11883},{"type":38,"tag":46,"props":22166,"children":22167},{"id":11886},[22168],{"type":43,"value":11889},{"type":38,"tag":53,"props":22170,"children":22171},{},[22172],{"type":38,"tag":57,"props":22173,"children":22174},{},[22175,22176,22181],{"type":43,"value":11897},{"type":38,"tag":61,"props":22177,"children":22179},{"href":11900,"rel":22178},[65],[22180],{"type":43,"value":11900},{"type":43,"value":11905},{"type":38,"tag":39,"props":22183,"children":22184},{},[22185],{"type":43,"value":11910},{"type":38,"tag":53,"props":22187,"children":22188},{},[22189,22197],{"type":38,"tag":57,"props":22190,"children":22191},{},[22192],{"type":38,"tag":61,"props":22193,"children":22195},{"href":11919,"rel":22194},[65],[22196],{"type":43,"value":11923},{"type":38,"tag":57,"props":22198,"children":22199},{},[22200],{"type":38,"tag":61,"props":22201,"children":22203},{"href":11929,"rel":22202},[65],[22204],{"type":43,"value":11933},{"type":38,"tag":46,"props":22206,"children":22207},{"id":11936},[22208],{"type":43,"value":11939},{"type":38,"tag":39,"props":22210,"children":22211},{},[22212],{"type":38,"tag":76,"props":22213,"children":22214},{},[22215],{"type":43,"value":11947},{"type":38,"tag":53,"props":22217,"children":22218},{},[22219,22223],{"type":38,"tag":57,"props":22220,"children":22221},{},[22222],{"type":43,"value":3624},{"type":38,"tag":57,"props":22224,"children":22225},{},[22226],{"type":43,"value":11959},{"type":38,"tag":46,"props":22228,"children":22229},{"id":11962},[22230],{"type":43,"value":11965},{"type":38,"tag":39,"props":22232,"children":22233},{},[22234],{"type":43,"value":11970},{"type":38,"tag":790,"props":22236,"children":22237},{"code":11973},[22238],{"type":38,"tag":559,"props":22239,"children":22240},{"__ignoreMap":8},[22241],{"type":43,"value":11973},{"type":38,"tag":39,"props":22243,"children":22244},{},[22245],{"type":43,"value":11983},{"type":38,"tag":790,"props":22247,"children":22248},{"code":11986},[22249],{"type":38,"tag":559,"props":22250,"children":22251},{"__ignoreMap":8},[22252],{"type":43,"value":11986},{"type":38,"tag":39,"props":22254,"children":22255},{},[22256],{"type":43,"value":11996},{"type":38,"tag":39,"props":22258,"children":22259},{},[22260],{"type":43,"value":12001},{"type":38,"tag":39,"props":22262,"children":22263},{},[22264,22269,22270,22274,22275,22279],{"type":38,"tag":61,"props":22265,"children":22267},{"href":12007,"rel":22266,":target":1094},[65],[22268],{"type":43,"value":12011},{"type":43,"value":12013},{"type":38,"tag":72,"props":22271,"children":22272},{},[22273],{"type":43,"value":12018},{"type":43,"value":12020},{"type":38,"tag":72,"props":22276,"children":22277},{},[22278],{"type":43,"value":12025},{"type":43,"value":12027},{"type":38,"tag":2148,"props":22281,"children":22282},{"style":2150},[22283,22284,22287,22288],{"type":43,"value":2153},{"type":38,"tag":1885,"props":22285,"children":22286},{"style":2156,"src":11818,"alt":12034},[],{"type":43,"value":2153},{"type":38,"tag":39,"props":22289,"children":22291},{"className":22290},[4663],[22292],{"type":43,"value":12034},{"type":38,"tag":39,"props":22294,"children":22295},{},[22296],{"type":43,"value":12046},{"type":38,"tag":790,"props":22298,"children":22299},{"code":12049},[22300],{"type":38,"tag":559,"props":22301,"children":22302},{"__ignoreMap":8},[22303],{"type":43,"value":12049},{"type":38,"tag":39,"props":22305,"children":22306},{},[22307],{"type":43,"value":12059},{"type":38,"tag":53,"props":22309,"children":22310},{},[22311],{"type":38,"tag":57,"props":22312,"children":22313},{},[22314],{"type":43,"value":12067},{"type":38,"tag":790,"props":22316,"children":22317},{"code":12070},[22318],{"type":38,"tag":559,"props":22319,"children":22320},{"__ignoreMap":8},[22321],{"type":43,"value":12070},{"type":38,"tag":39,"props":22323,"children":22324},{},[22325],{"type":43,"value":12080},{"type":38,"tag":790,"props":22327,"children":22328},{"code":12083},[22329],{"type":38,"tag":559,"props":22330,"children":22331},{"__ignoreMap":8},[22332],{"type":43,"value":12083},{"type":38,"tag":46,"props":22334,"children":22335},{"id":12091},[22336],{"type":43,"value":12094},{"type":38,"tag":39,"props":22338,"children":22339},{},[22340],{"type":43,"value":12099},{"type":38,"tag":790,"props":22342,"children":22343},{"code":12102},[22344],{"type":38,"tag":559,"props":22345,"children":22346},{"__ignoreMap":8},[22347],{"type":43,"value":12102},{"type":38,"tag":2705,"props":22349,"children":22350},{},[22351],{"type":38,"tag":39,"props":22352,"children":22353},{},[22354,22355,22358],{"type":43,"value":12115},{"type":38,"tag":1303,"props":22356,"children":22357},{},[],{"type":43,"value":12120},{"type":38,"tag":790,"props":22360,"children":22361},{"code":12123},[22362],{"type":38,"tag":559,"props":22363,"children":22364},{"__ignoreMap":8},[22365],{"type":43,"value":12123},{"type":38,"tag":46,"props":22367,"children":22368},{"id":12131},[22369],{"type":43,"value":12134},{"type":38,"tag":53,"props":22371,"children":22372},{},[22373,22377],{"type":38,"tag":57,"props":22374,"children":22375},{},[22376],{"type":43,"value":12142},{"type":38,"tag":57,"props":22378,"children":22379},{},[22380],{"type":43,"value":12147},{"type":38,"tag":790,"props":22382,"children":22383},{"code":12150},[22384],{"type":38,"tag":559,"props":22385,"children":22386},{"__ignoreMap":8},[22387],{"type":43,"value":12150},{"type":38,"tag":46,"props":22389,"children":22390},{"id":12158},[22391],{"type":43,"value":12161},{"type":38,"tag":39,"props":22393,"children":22394},{},[22395],{"type":43,"value":12166},{"type":38,"tag":790,"props":22397,"children":22398},{"code":12169},[22399],{"type":38,"tag":559,"props":22400,"children":22401},{"__ignoreMap":8},[22402],{"type":43,"value":12169},{"type":38,"tag":39,"props":22404,"children":22405},{},[22406],{"type":43,"value":12179},{"type":38,"tag":39,"props":22408,"children":22409},{},[22410],{"type":43,"value":12184},{"type":38,"tag":790,"props":22412,"children":22413},{"code":12187},[22414],{"type":38,"tag":559,"props":22415,"children":22416},{"__ignoreMap":8},[22417],{"type":43,"value":12187},{"type":38,"tag":46,"props":22419,"children":22420},{"id":675},[22421],{"type":43,"value":9679},{"type":38,"tag":39,"props":22423,"children":22424},{},[22425,22429],{"type":38,"tag":61,"props":22426,"children":22427},{"href":9687},[22428],{"type":43,"value":12204},{"type":43,"value":12206},{"title":8,"searchDepth":685,"depth":685,"links":22431},[22432,22433,22434,22435,22436,22437,22438,22439,22440],{"id":11823,"depth":685,"text":11826},{"id":11842,"depth":685,"text":11845},{"id":11886,"depth":685,"text":11889},{"id":11936,"depth":685,"text":11939},{"id":11962,"depth":685,"text":11965},{"id":12091,"depth":685,"text":12094},{"id":12131,"depth":685,"text":12134},{"id":12158,"depth":685,"text":12161},{"id":675,"depth":685,"text":9679},{"_path":418,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":12222,"description":12223,"seoTitle":12224,"seoDescription":12225,"keywords":22442,"image":12231,"alt":1268,"ogImage":12231,"tags":22443,"categories":22444,"published":25,"author":26,"link":418,"date":12236,"sitemap":22445,"body":22448,"_type":693,"_id":12582,"_source":695,"_file":12583,"_stem":12584,"_extension":698},[12227,12228,12229,12230],[12233,12234,23],[12233,12234,23],{"loc":12238,"lastmod":12236,"changefreq":30,"priority":31,"images":22446},[22447],{"loc":12231},{"type":35,"children":22449,"toc":22721},[22450,22486,22490,22494,22526,22533,22540,22567,22574,22581,22585,22594,22601,22605,22619,22638,22645,22659,22667,22676,22683,22687,22691,22698,22702,22706,22713,22717],{"type":38,"tag":39,"props":22451,"children":22452},{},[22453,22454,22462,22463,22471,22472,22480,22481,22485],{"type":43,"value":12247},{"type":38,"tag":61,"props":22455,"children":22457},{":target":1094,"href":12250,"rel":22456},[65],[22458],{"type":38,"tag":72,"props":22459,"children":22460},{},[22461],{"type":43,"value":12257},{"type":43,"value":12259},{"type":38,"tag":61,"props":22464,"children":22466},{":target":1094,"href":12250,"rel":22465},[65],[22467],{"type":38,"tag":72,"props":22468,"children":22469},{},[22470],{"type":43,"value":12268},{"type":43,"value":12259},{"type":38,"tag":61,"props":22473,"children":22475},{":target":1094,"href":12250,"rel":22474},[65],[22476],{"type":38,"tag":72,"props":22477,"children":22478},{},[22479],{"type":43,"value":12278},{"type":43,"value":12280},{"type":38,"tag":72,"props":22482,"children":22483},{},[22484],{"type":43,"value":12285},{"type":43,"value":12287},{"type":38,"tag":46,"props":22487,"children":22488},{"id":12290},[22489],{"type":43,"value":12293},{"type":38,"tag":39,"props":22491,"children":22492},{},[22493],{"type":43,"value":12298},{"type":38,"tag":53,"props":22495,"children":22496},{},[22497],{"type":38,"tag":57,"props":22498,"children":22499},{},[22500,22504],{"type":38,"tag":72,"props":22501,"children":22502},{},[22503],{"type":43,"value":12309},{"type":38,"tag":53,"props":22505,"children":22506},{},[22507],{"type":38,"tag":57,"props":22508,"children":22509},{},[22510,22511,22515,22516,22520,22521,22525],{"type":43,"value":12317},{"type":38,"tag":72,"props":22512,"children":22513},{},[22514],{"type":43,"value":12322},{"type":43,"value":12324},{"type":38,"tag":72,"props":22517,"children":22518},{},[22519],{"type":43,"value":12329},{"type":43,"value":12331},{"type":38,"tag":72,"props":22522,"children":22523},{},[22524],{"type":43,"value":12322},{"type":43,"value":12337},{"type":38,"tag":790,"props":22527,"children":22528},{"code":12340},[22529],{"type":38,"tag":559,"props":22530,"children":22531},{"__ignoreMap":8},[22532],{"type":43,"value":12340},{"type":38,"tag":790,"props":22534,"children":22535},{"code":12348},[22536],{"type":38,"tag":559,"props":22537,"children":22538},{"__ignoreMap":8},[22539],{"type":43,"value":12348},{"type":38,"tag":53,"props":22541,"children":22542},{},[22543],{"type":38,"tag":57,"props":22544,"children":22545},{},[22546,22550,22551,22555],{"type":38,"tag":72,"props":22547,"children":22548},{},[22549],{"type":43,"value":12364},{"type":43,"value":12366},{"type":38,"tag":72,"props":22552,"children":22553},{},[22554],{"type":43,"value":12371},{"type":38,"tag":53,"props":22556,"children":22557},{},[22558],{"type":38,"tag":57,"props":22559,"children":22560},{},[22561,22562,22566],{"type":43,"value":12379},{"type":38,"tag":72,"props":22563,"children":22564},{},[22565],{"type":43,"value":12384},{"type":43,"value":12386},{"type":38,"tag":790,"props":22568,"children":22569},{"code":12389},[22570],{"type":38,"tag":559,"props":22571,"children":22572},{"__ignoreMap":8},[22573],{"type":43,"value":12389},{"type":38,"tag":790,"props":22575,"children":22576},{"code":12397},[22577],{"type":38,"tag":559,"props":22578,"children":22579},{"__ignoreMap":8},[22580],{"type":43,"value":12397},{"type":38,"tag":46,"props":22582,"children":22583},{"id":12405},[22584],{"type":43,"value":12408},{"type":38,"tag":39,"props":22586,"children":22587},{},[22588,22589,22593],{"type":43,"value":12413},{"type":38,"tag":72,"props":22590,"children":22591},{},[22592],{"type":43,"value":12285},{"type":43,"value":12419},{"type":38,"tag":790,"props":22595,"children":22596},{"code":12422},[22597],{"type":38,"tag":559,"props":22598,"children":22599},{"__ignoreMap":8},[22600],{"type":43,"value":12422},{"type":38,"tag":46,"props":22602,"children":22603},{"id":12430},[22604],{"type":43,"value":12433},{"type":38,"tag":39,"props":22606,"children":22607},{},[22608,22609,22613,22614,22618],{"type":43,"value":10531},{"type":38,"tag":72,"props":22610,"children":22611},{},[22612],{"type":43,"value":12442},{"type":43,"value":12444},{"type":38,"tag":72,"props":22615,"children":22616},{},[22617],{"type":43,"value":12285},{"type":43,"value":12450},{"type":38,"tag":39,"props":22620,"children":22621},{},[22622,22623,22627,22628,22632,22633,22637],{"type":43,"value":12455},{"type":38,"tag":72,"props":22624,"children":22625},{},[22626],{"type":43,"value":12442},{"type":43,"value":12461},{"type":38,"tag":72,"props":22629,"children":22630},{},[22631],{"type":43,"value":12466},{"type":43,"value":12468},{"type":38,"tag":72,"props":22634,"children":22635},{},[22636],{"type":43,"value":12466},{"type":43,"value":12474},{"type":38,"tag":790,"props":22639,"children":22640},{"code":12477},[22641],{"type":38,"tag":559,"props":22642,"children":22643},{"__ignoreMap":8},[22644],{"type":43,"value":12477},{"type":38,"tag":39,"props":22646,"children":22647},{},[22648,22649,22653,22654,22658],{"type":43,"value":12487},{"type":38,"tag":72,"props":22650,"children":22651},{},[22652],{"type":43,"value":12442},{"type":43,"value":12493},{"type":38,"tag":72,"props":22655,"children":22656},{},[22657],{"type":43,"value":12498},{"type":43,"value":12500},{"type":38,"tag":39,"props":22660,"children":22661},{},[22662,22666],{"type":38,"tag":72,"props":22663,"children":22664},{},[22665],{"type":43,"value":12508},{"type":43,"value":12510},{"type":38,"tag":39,"props":22668,"children":22669},{},[22670,22671,22675],{"type":43,"value":12515},{"type":38,"tag":72,"props":22672,"children":22673},{},[22674],{"type":43,"value":12442},{"type":43,"value":12521},{"type":38,"tag":790,"props":22677,"children":22678},{"code":12524},[22679],{"type":38,"tag":559,"props":22680,"children":22681},{"__ignoreMap":8},[22682],{"type":43,"value":12524},{"type":38,"tag":39,"props":22684,"children":22685},{},[22686],{"type":43,"value":12534},{"type":38,"tag":39,"props":22688,"children":22689},{},[22690],{"type":43,"value":12539},{"type":38,"tag":790,"props":22692,"children":22693},{"code":12542},[22694],{"type":38,"tag":559,"props":22695,"children":22696},{"__ignoreMap":8},[22697],{"type":43,"value":12542},{"type":38,"tag":46,"props":22699,"children":22700},{"id":1573},[22701],{"type":43,"value":12552},{"type":38,"tag":39,"props":22703,"children":22704},{},[22705],{"type":43,"value":12557},{"type":38,"tag":790,"props":22707,"children":22708},{"code":12560},[22709],{"type":38,"tag":559,"props":22710,"children":22711},{"__ignoreMap":8},[22712],{"type":43,"value":12560},{"type":38,"tag":39,"props":22714,"children":22715},{},[22716],{"type":43,"value":12570},{"type":38,"tag":39,"props":22718,"children":22719},{},[22720],{"type":43,"value":12575},{"title":8,"searchDepth":685,"depth":685,"links":22722},[22723,22724,22725,22726],{"id":12290,"depth":685,"text":12293},{"id":12405,"depth":685,"text":12408},{"id":12430,"depth":685,"text":12433},{"id":1573,"depth":685,"text":12552},{"_path":12586,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":12587,"description":12588,"seoTitle":12589,"seoDescription":12590,"keywords":22728,"image":6387,"alt":1268,"ogImage":6387,"tags":22729,"categories":22730,"published":25,"author":26,"link":12586,"date":12600,"sitemap":22731,"body":22734,"_type":693,"_id":12801,"_source":695,"_file":12802,"_stem":12803,"_extension":698},[12592,12593,12594,12595],[714,12597],[12599,21,12597,10952,4474],{"loc":12602,"lastmod":12600,"changefreq":30,"priority":31,"images":22732},[22733],{"loc":6387},{"type":35,"children":22735,"toc":22882},[22736,22740,22749,22753,22757,22761,22765,22769,22773,22787,22791,22805,22809,22818,22822,22826,22874,22878],{"type":38,"tag":46,"props":22737,"children":22738},{"id":12609},[22739],{"type":43,"value":12612},{"type":38,"tag":39,"props":22741,"children":22742},{},[22743,22748],{"type":38,"tag":61,"props":22744,"children":22746},{":target":1094,"href":12618,"rel":22745},[65],[22747],{"type":43,"value":12622},{"type":43,"value":12624},{"type":38,"tag":46,"props":22750,"children":22751},{"id":12627},[22752],{"type":43,"value":12630},{"type":38,"tag":39,"props":22754,"children":22755},{},[22756],{"type":43,"value":12635},{"type":38,"tag":39,"props":22758,"children":22759},{},[22760],{"type":43,"value":12640},{"type":38,"tag":39,"props":22762,"children":22763},{},[22764],{"type":43,"value":12645},{"type":38,"tag":46,"props":22766,"children":22767},{"id":12648},[22768],{"type":43,"value":12651},{"type":38,"tag":39,"props":22770,"children":22771},{},[22772],{"type":43,"value":12656},{"type":38,"tag":39,"props":22774,"children":22775},{},[22776,22777,22781,22782,22786],{"type":43,"value":12661},{"type":38,"tag":72,"props":22778,"children":22779},{},[22780],{"type":43,"value":12666},{"type":43,"value":11550},{"type":38,"tag":72,"props":22783,"children":22784},{},[22785],{"type":43,"value":12672},{"type":43,"value":12674},{"type":38,"tag":46,"props":22788,"children":22789},{"id":12677},[22790],{"type":43,"value":12680},{"type":38,"tag":39,"props":22792,"children":22793},{},[22794,22799,22800,22804],{"type":38,"tag":61,"props":22795,"children":22797},{":target":1094,"href":12686,"rel":22796},[65],[22798],{"type":43,"value":12690},{"type":43,"value":12692},{"type":38,"tag":76,"props":22801,"children":22802},{},[22803],{"type":43,"value":12697},{"type":43,"value":12699},{"type":38,"tag":1759,"props":22806,"children":22807},{"id":12702},[22808],{"type":43,"value":12705},{"type":38,"tag":39,"props":22810,"children":22811},{},[22812,22817],{"type":38,"tag":61,"props":22813,"children":22815},{":target":1094,"href":12711,"rel":22814},[65],[22816],{"type":43,"value":12672},{"type":43,"value":12716},{"type":38,"tag":1759,"props":22819,"children":22820},{"id":12719},[22821],{"type":43,"value":12722},{"type":38,"tag":39,"props":22823,"children":22824},{},[22825],{"type":43,"value":12727},{"type":38,"tag":53,"props":22827,"children":22828},{},[22829,22844,22863],{"type":38,"tag":57,"props":22830,"children":22831},{},[22832,22833],{"type":43,"value":12735},{"type":38,"tag":53,"props":22834,"children":22835},{},[22836,22840],{"type":38,"tag":57,"props":22837,"children":22838},{},[22839],{"type":43,"value":12743},{"type":38,"tag":57,"props":22841,"children":22842},{},[22843],{"type":43,"value":12748},{"type":38,"tag":57,"props":22845,"children":22846},{},[22847,22848],{"type":43,"value":12753},{"type":38,"tag":53,"props":22849,"children":22850},{},[22851,22855,22859],{"type":38,"tag":57,"props":22852,"children":22853},{},[22854],{"type":43,"value":12761},{"type":38,"tag":57,"props":22856,"children":22857},{},[22858],{"type":43,"value":12766},{"type":38,"tag":57,"props":22860,"children":22861},{},[22862],{"type":43,"value":12771},{"type":38,"tag":57,"props":22864,"children":22865},{},[22866,22867],{"type":43,"value":12776},{"type":38,"tag":53,"props":22868,"children":22869},{},[22870],{"type":38,"tag":57,"props":22871,"children":22872},{},[22873],{"type":43,"value":12784},{"type":38,"tag":46,"props":22875,"children":22876},{"id":675},[22877],{"type":43,"value":678},{"type":38,"tag":39,"props":22879,"children":22880},{},[22881],{"type":43,"value":12793},{"title":8,"searchDepth":685,"depth":685,"links":22883},[22884,22885,22886,22887,22888],{"id":12609,"depth":685,"text":12612},{"id":12627,"depth":685,"text":12630},{"id":12648,"depth":685,"text":12651},{"id":12677,"depth":685,"text":12680},{"id":675,"depth":685,"text":678},1791651674927]