React Js Tutorial Step By Step

25 Views

In this React JS Latihan article, we will cover the basic and advanced concepts of ReactJS. Let us menginjak by getting an overview of what we’ll be going through in this ReactJS Beginner Tutorial.

ReactJS Les for Beginners

Let me begin with an overview of what I’m going to cover in this ReactJS kursus.

What is ReactJS?
What is the use of ReactJS?
Why learn React JS?
Features of ReactJS
Pros and cons of ReactJS
ReactJS Installation
ReactJS Components
ReactJS-Component Life Cycle
React Forms

What is ReactJS?

ReactJS is one of the most widely popular open-source JavaScript libraries developed by Facebook. It is responsible for managing the view layer for both web and mobile-based applications. The primary use of React is in building reusable UI components.

ReactJS is user-friendly and therefore has a strong foundation and community behind it.

Interested to learn more about React framework – Then check out our Online
React Js Certification Training
to gain expertise to build React JS Applications.

What is the use of ReactJS?

The main feature of ReactJS is developing a User Interface (UI) to improve application speed. The JavaScript virtual DOM, which is faster than the regular Dom, makes it possible to enhance its performance.

A ReactJS application consists of multiple components, where each is responsible for producing a small, reusable part of HTML code. You can nest these components with other ones to build complex applications with simple building blocks.

React’s component and data patterns boost readability and help handle large applications. You can make use of ReactJS on both the client, server-side, and other frameworks.

ReactJS Pelajaran For Beginners | Getting started with React JS

</p> <h3 id="learn-reactjs">Why learn React JS?</h3> <p>There are several JavaScript frameworks available, but React is one of the most popular ones among them. The difference between the older frameworks and React is that the former ones use a traditional data flow structure, using the DOM (Document Object Model).</p> <p>But, what is DOM? A browser creates objects every time you load a web page. Data is added or removed at the back end after any modifications, and every time a new Basilika is created for the same page. Hence, memory is wasted unnecessarily due to the repeated procedure, leading to reduced application performance.</p> <p>To solve the above problem, Facebook invented ReactJS. Although it still follows the traditional data flow structure, it does titinada directly operate on the browser’s Dom (Document Object Model) but a virtual Basilika instead. Therefore, it fixes any DOM changes built and run in the memory itself.</p> <h3 id="features">Features of ReactJS</h3> <ol> <li> <strong>JSX:</strong><br /> It is a JavaScript syntax extension. JSX stands for JavaScript XML. Although it is not necessary to use JSX, it is recommended to use it.</li> <li> <strong>Components:</strong><br /> Components are the core of React. They are essential when you are handling the code for large-scale projects.</li> <li> <strong>One-way data-binding:</strong><br /> React applies a one-way data-binding or a unidirectional data flow. The advantage of this is that it gives the user better control over the application. Flux ensures the unidirectional flow of data. It increases efficiency by improving the application’s flexibility.</li> <li> <strong>Simplicity:</strong><br /> The JSX file in ReactJS simplifies the application.</li> <li> <strong>Performer:</strong><br /> React’s performance is excellent. The main reason behind it is that it uses a virtual DOM, unlike the other frameworks.</li> <li> <strong>License:</strong><br /> ReactJS is licensed under Facebook Inc.</li> </ol> <h3 id="pros-cons">Advantages and Disadvantages of ReactJS</h3> <p>ReactJS is the most popular and widely used open-source JavaScript library. You can create excellent web apps with minimal effort. There are, however, several pros and cons of ReactJS. Let’s look at some of them.</p> <h4>Advantages of ReactJS:</h4> <p>Here are important pros/benefits of using ReactJS:</p> <ul> <li>It is user-friendly. React provides its users with helpful documentation, training resources, and in-depth tutorials.</li> <li>You can quickly build dynamic web applications with ReactJS as it offers high functionality. It uses the JSX (JavaScript Extension) that allows you to create an app with minimum coding.</li> <li>React’s components are reusable, which makes it easier to develop and maintain your apps.</li> <li>React provides its developers several handy tools.</li> <li>React uses a virtual Dom. This JavaScript object improves the app’s performance because the virtual DOM is faster than the regular DOM.</li> <li>You can use React on the client, server-side, and other frameworks as well.</li> <li>The data and component patterns in React optimize readability, which is useful when handling larger apps.</li> </ul> <h4>Disadvantages of ReactJS:</h4> <p>Here are the cons/ drawbacks of using ReactJS:</p> <ul> <li>To obtain the complete development toolset, you have to choose different technologies since React covers only its view layer.</li> <li>Developers usually do titinada prefer React’s usage of JSX and inline templating.</li> <li>Developers might find it challenging to adopt continuous updates in React. They have to keep upgrading their skills to keep up.</li> <li>Since React is a continually updating technology, it isn’tepi langit easy to make proper documentation for it. Therefore, developers usually end up writing instructions on their own.</li> </ul> <h3 id="installation">ReactJS Installation</h3> <p>There are two main ways to install the ReactJS application.</p> <h4>1. Using the npm command</h4> <p>Steps to follow to install ReactJS using the npm command are:</p> <p>1. Install NodeJS and NPM. They are platforms that are required to develop ReactJS applications.</p> <p>2. Install React and React DOM.</p> <ul> <li>Make a<br /> <strong>root</strong><br /> folder and name it<br /> <strong>reactApp</strong>.</li> <li>Create a<br /> <strong>package.json</strong><br /> file.</li> <li>Install<br /> <strong>react</strong><br /> along with its DOM<br /> <strong>packages</strong></li> </ul> <p>3. Install Webpack. Its functions include module packaging, development, and production pipeline automation.</p> <p> <em>Leave an Inquiry to learn React JS Online Course Bangalore</em> </p> <p>4. Install Babel. It is a JavaScript transpiler and compiler that converts one source code to others.</p> <p>5. Add the files—<strong>index.html, App.js, main.js, webpack.config.js</strong>, and<br /> <strong>.babelrc</strong><br /> in your project folder.</p> <p>6. Configure webpack in the<br /> <strong>webpack.config.js</strong><br /> file.</p> <p>7.<br /> <strong>App.jsx</strong><br /> and<br /> <strong>main.js</strong><br /> is the first React component.</p> <p>8. Create a<br /> <strong>.babelrc</strong><br /> file.</p> <p>9. After the installation process is complete and you set up the app, you can start the server.</p> <p>10. Generate the bundle for your app. Bundling is when you follow imported files and merge them into a single file? called?a bundle.</p> <h4>2. Using the create-react-app command</h4> <p>Steps to follow to install ReactJS using the create-react-app command are:</p> <ul> <li>Install NodeJS and NPM. They are platforms you require to develop ReactJS applications.</li> <li>Install React using the .npm package manager.</li> <li>Create a new React project using the create-react-app command.</li> <li>After you complete the installation process, you can now menginjak the server.</li> </ul> <h3>What is React JSX?</h3> <p>ReactJS is a JavaScript extension. With this template script, you can use HTML and JavaScript together.</p> <p>An example of a JSX code is:</p> <pre class="language-markup"> <code>const h1tag="<h1>Hello, from Mindmajix Tutorials!</h1>";</code> </pre> <h4>Reasons to use JSX in React</h4> <p>In React, you can write HTML/XML structures in the same file as the JavaScript code. Then, the preprocessor converts the expressions into JavaScript code. Additionally, you can also manage the state changes in the basilika in the most effective manner.</p> <p>JSX tags include a tag name, attributes, and children.</p> <p>Some of the reasons to use JSX in React are:</p> <ul> <li>It works at a more incredible speed than regular JavaScript. While it translates the code to JavaScript, it also performs optimization.</li> <li>It makes use of components that include both markup and logic.</li> <li>You can find the errors during the compilation time as it is type-safe.</li> <li>You can easily create templates in JSX.</li> </ul> <p> <em>Moving ahead in this ReactJS tutorial, Now, let’s see What are Components in ReactJS?</em> </p> <h3 id="components">ReactJS Components</h3> <p>Components are the core building blocks of React applications. They are logical groups of code that make up the entire application. With the use of components, you can build UIs quickly. Every component works independently, and you can merge them into a parent component.</p> <p>React components have their unique structure, methods, and APIs. Additionally, they are also reusable.</p> <p>There are two types of components in ReactJS:</p> <ol> <li>Functional components</li> <li>Class components</li> </ol> <h4>1. Functional Components</h4> <p>You can only write components using a render method with functional components. These are JavaScript functions that may or may not receive data as parameters. Functional components are also called stateless components since they do not manage the local state. Given below is an example of a functional component:</p> <pre class="language-markup"> <code>function WelcomeMessage(props) { return <h1>Welcome to the,{props.name}</h1>; } </code> </pre> <h4>2. Class Components</h4> <p>Class components are more complicated than functional components since you have to extend from React. They are also called stateful components since they manage the local state. You can perform the following with class components:</p> <ul> <li>You can move data from one class to another class component.</li> <li>You can create a class by defining a class that has a render function.</li> </ul> <p>Given below is an example of a class component:</p> <pre class="language-javascript"> <code>class MyComponent extends React.Component { render(){ return( <div>This is main component.</div> ); } }</code> </pre> <p> <em>Moving on to the core aspect of our ReactJS les, let us discuss what is a State in ReactJS?</em> </p> <h3>ReactJS State</h3> <p>In ReactJS, the state contains information about the components and can change over time. It can either be a response to user action or a system event. Data collected in a state is a private object.</p> <p>Components within the state are called stateful components. They regulate the component’s behavior and make it more interactive.</p> <p>You can access or modify the state only inside the component or directly by the component. You should always simplify your state as much as possible and reduce the number of stateful components. For example, if you have ten components requiring data from the state, you should create a single container component that will keep the state for all the components.</p> <h3>ReactJS Props</h3> <p> <strong>What are Props in ReactJS?</strong> </p> <p>Props are nothing but properties you can use inside a component. They are read-only variables that store the value of attributes of a tag. Props are similar to function arguments because you can pass them to the components in a similar way as arguments.</p> <p>You cannot modify props from inside the components. Instead, you can add attributes called props.</p> <h4>Props to Function Component:</h4> <p>Given below is an example of moving props to a function component.</p> <pre class="language-javascript"> <code>import React from 'react'; import ReactDOM from 'react-katedral'; function Hello(props) { return <h1>{props.msg}</h1>; } const Hello_comp = <Hello msg="Hello, from Mindmajix Tutorials!" />; export default Hello_comp;</code> </pre> <p>As you can see in the above example, the<br /> <strong>msg<br /> </strong>attribute is added to the <Hello/> component. You can also access it as<br /> <strong>props</strong><br /> inside the Hello function. It will include the details of the<br /> <strong>msg</strong><br /> attribute.</p> <h3 id="life-cycle">ReactJS – Component Life Cycle</h3> <p>There are four phases in a component’s lifecycle. They are:</p> <ol> <li>Initial phase</li> <li>Mounting phase</li> <li>Updating phase</li> <li>Unmounting phase</li> </ol> <h4>1. Initial Phase</h4> <p>This phase is considered the birth phase in a ReactJS component’s lifecycle. In this, the component begins its way to the Gereja. During this phase, the component includes both default Props and the initial State.</p> <p>The initial phase includes the following methods:</p> <ul> <li> <strong>getDefaultProps():</strong><br /> It defines the default value of this.props.</li> <li> <strong>getInitialState():</strong><br /> It defines the default value of this.state.</li> </ul> <h4>2. Mounting Phase</h4> <p>In the mounting phase, you create the component instance and insert it into the Dom. It has the following methods:</p> <ul> <li> <strong>componentWillMount():</strong><br /> You call this method before the rendering of a component into the Gereja. The component will not re-render when you call<br /> <strong>setState()</strong><br /> in this method.</li> <li> <strong>componentDidMount():</strong><br /> You call this method after rendering a component and placing it on the DOM. Then, you can perform Basilika querying operations.</li> <li> <strong>render():</strong><br /> You define this method in every component. You cannot return a single root HTml node element. However, you can return a<br /> <strong>null<br /> </strong>or<br /> <strong>false<br /> </strong>value if you don’t want to render anything.</li> </ul> <p> <em>Visit here to Learn React JS Certification Course in Hyderabad</em> </p> <h4>3. Updating Phase</h4> <p>In this phase, you can handle the user interaction and communication with the hierarchy of components. In this phase, the priority is to make sure that the component’s latest version is displayed. Unlike the previous stages, the updating phase repeats adv lewat and adv lewat again. It includes the following methods:</p> <ul> <li> <strong>componentWillReceiveProps():</strong><br /> You call this method when a component receives a new prop.</li> <li> <strong>shouldComponentUpdate():</strong><br /> You call this method when a component decides it wants to make changes to the DOM. You can control the component’s behavior when it gets updated.</li> <li> <strong>componentWillUpdate():<br /> </strong>You call this method before the component update. You cannot use the<br /> <strong>this.setState()</strong><br /> method to change the component state. Further, if<br /> <strong>shouldComponentUpdate()</strong><br /> returns false, then this method will not be called.</li> <li> <strong>render():</strong><br /> You call this to inspect<br /> <strong>this.props</strong><br /> and<br /> <strong>this.state</strong>. It returns any of the following: Arrays and fragments, String and Number, Booleans or null, React elements.</li> <li> <strong>componentDidUpdate():</strong><br /> You immediately call this method when the component is updated.</li> </ul> <h4>4. Unmounting Phase</h4> <p>The unmounting phase is the last phase of the React component lifecycle. It is invoked in a situation when a component instance is unmounted and destroyed from the DOM. It contains only one method, as given below:</p> <ul> <li> <strong>componentWillUnmount():</strong><br /> You call this component before a component is unmounted and eliminated permanently. This method performs cleanup tasks like event listening, canceling network requests, invalidating timers, cleaning up DOM elements, etc.</li> </ul> <h3 id="react-forms">React Forms</h3> <p>Forms are useful in web applications as they make it possible for the users to interact with the application. They can perform various tasks such as adding users, searching, filtering, ordering, booking, etc. Forms can contain elements such as text fields, buttons, radio buttons, checkboxes, etc.</p> <h4>Creating Form in ReactJS</h4> <p>In ReactJS, the component handles the React form. There are two different types of forms:</p> <ol> <li>Uncontrolled components</li> <li>Controlled components</li> </ol> <table> <tbody> <tr> <td> <strong>Controlled components</strong> </td> <td> <strong>Uncontrolled components</strong> </td> </tr> <tr> <td>In controlled components, the parent component controls the data.</td> <td>In uncontrolled components, the DOM handles the data.</td> </tr> <tr> <td>It permits validation control.</td> <td>It does not permit validation control.</td> </tr> <tr> <td>Here, the internal state is not maintained.</td> <td>Here, the intern states are maintained.</td> </tr> <tr> <td>It accepts current values as a prop.</td> <td>It uses a ref for its current values.</td> </tr> <tr> <td>It holds better control over the elements and data in forms.</td> <td>It holds limited control adv lewat elements and data in forms.</td> </tr> </tbody> </table> <h3>ReactJS Events</h3> <p>Events are actions that are triggered by either system-generated events or user actions. A few examples of events are loading a web page, resizing a window, pressing keys, etc.</p> <p>React’s event handling system is called<br /> <strong>synthetic events</strong><br /> and is similar to the system on DOM elements.</p> <p>You can use the setState() method to update the state during user interaction with an HTML element.</p> <h3>ReactJS Router</h3> <p>When a user is directed to a page based on their action or request, the process is called<br /> <strong>routing</strong>. The primary function of a ReactJS Router is to develop Single Page Web Applications. For example, when a user types a URl in their browser, they will be redirected to a route that matches the URL path.</p> <p>In React, routing is created using the React Router package.</p> <h4>Why do you need a React Router?</h4> <p>The most important reason why you need a React router is to show multiple views in single-page applications. Several popular social ki alat websites like Instagram, for example, use React Router to display multiple views.</p> <h4>What are the components in React Router?</h4> <p>React Router includes two types of router components:</p> <ul> <li> <strong>BrowserRouter:</strong><br /> This component handles the dynamic URL.</li> <li> <strong>HashRouter:</strong><br /> This component handles the static request.</li> </ul> <p> <strong>Conclusion</strong> </p> <p>In summary, ReactJS is an open-source JavaScript library maintained by Facebook to build user interfaces. Today, many companies around the world use it for UI development.</p> <p>The main features of ReactJS are JSX, props, state, functional and class-based components, and component lifecycle.</p> <p>Many modern websites are built on the MVC (Berbudaya View Controller) architecture, where V represents React.</p> <p>With a variety of JavaScript frameworks available to learn, React is still a popular choice.</p> <p>This brings us to the end of this React JS les blog. Hope each and every aspect discussed above is clear to all. To learn more about React JS, check out our ReactJS Courses.</p> </p></div> </p></div> </div> <p><span style="color: #0000ff;"><strong>Source: https://mindmajix.com/react-js-tutorial</strong></span></p> <div style="font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;"></div> </div> </div> </article> <ul class="default-wp-page clearfix"> <li class="previous"><a href="https://soaltugas.net/gerakan-mengayun-tangan-melatih-otot/" rel="prev"><span class="meta-nav">←</span> Gerakan Mengayun Tangan Melatih Otot</a></li> <li class="next"><a href="https://soaltugas.net/react-server-side-rendering-tutorial/" rel="next">React Server Side Rendering Tutorial <span class="meta-nav">→</span></a></li> </ul> <div class="share-buttons"> <span class="share">Share This Post:</span> <div class="box"> <div id="twitter" class="twitter-share share" data-share="twitter-share"> <i class="fa fa-twitter"></i> </div> </div> <div class="box"> <div id="facebook" class="facebook-share share" data-share="facebook-share"> <i class="fa fa-facebook-square"></i> </div> </div> <div class="box"> <div id="pinterest" class="pinterest-share share" data-share="pinterest-share"> <i class="fa fa-pinterest"></i> </div> </div> </div> </div> </div> <div id="secondary"> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Terbaru</span></h3> <ul> <li> <a href="https://soaltugas.net/daftar-riwayat-hidup-kematian-kristen/">Daftar Riwayat Hidup Kematian Kristen</a> </li> <li> <a href="https://soaltugas.net/sperma-disalurkan-keluar-tubuh-melalui/">Sperma Disalurkan Keluar Tubuh Melalui</a> </li> <li> <a href="https://soaltugas.net/poster-tentang-mencintai-negara-indonesia/">Poster Tentang Mencintai Negara Indonesia</a> </li> <li> <a href="https://soaltugas.net/melakukan-konfigurasi-dedicated-hosting-server/">Melakukan Konfigurasi Dedicated Hosting Server</a> </li> <li> <a href="https://soaltugas.net/andromax-a-terkunci-akun-google/">Andromax A Terkunci Akun Google</a> </li> <li> <a href="https://soaltugas.net/graffiti-angka-1-10-3d/">Graffiti Angka 1 10 3d</a> </li> <li> <a href="https://soaltugas.net/masukan-temperatur-tubuhmu-saat-ini/">Masukan Temperatur Tubuhmu Saat Ini</a> </li> <li> <a href="https://soaltugas.net/prosa-fiksi-dan-non-fiksi/">Prosa Fiksi Dan Non Fiksi</a> </li> <li> <a href="https://soaltugas.net/jumlah-21-suku-pertama-adalah/">Jumlah 21 Suku Pertama Adalah</a> </li> <li> <a href="https://soaltugas.net/daerah-penghasil-pasir-besi-adalah/">Daerah Penghasil Pasir Besi Adalah</a> </li> <li> <a href="https://soaltugas.net/silsilah-syekh-abdul-manaf-mahmud/">Silsilah Syekh Abdul Manaf Mahmud</a> </li> <li> <a href="https://soaltugas.net/contoh-pestisida-yang-bersifat-alkalis/">Contoh Pestisida Yang Bersifat Alkalis</a> </li> <li> <a href="https://soaltugas.net/bagian-bagian-mesin-serut-kayu/">Bagian Bagian Mesin Serut Kayu</a> </li> <li> <a href="https://soaltugas.net/cara-menginstall-debian-di-virtualbox/">Cara Menginstall Debian Di Virtualbox</a> </li> <li> <a href="https://soaltugas.net/arti-raudhah-min-riyadhil-jannah/">Arti Raudhah Min Riyadhil Jannah</a> </li> <li> <a href="https://soaltugas.net/spesifikasi-laptop-client-unbk-2019/">Spesifikasi Laptop Client Unbk 2019</a> </li> <li> <a href="https://soaltugas.net/tentukan-faktorisasi-prima-dari-1250/">Tentukan Faktorisasi Prima Dari 1250</a> </li> <li> <a href="https://soaltugas.net/bagaimana-pembahasan-bidang-pada-informatika/">Bagaimana Pembahasan Bidang Pada Informatika</a> </li> </ul> </aside> </div> </div> </div> <footer id="colophon" class="clearfix "> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> <nav class="footer-menu clearfix"> <div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="https://soaltugas.net/cookie-privacy-policy/">Cookie Privacy Policy</a></li> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="https://soaltugas.net/privacy-policy-2/">Privacy Policy</a></li> <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="https://soaltugas.net/terms-of-use/">Terms of Use</a></li> <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="https://soaltugas.net/about/">Tentang Kami</a></li> <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="https://soaltugas.net/contact/">Hubungi Kami</a></li> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="https://soaltugas.net/dmca/">DMCA</a></li> </ul></div> </nav> </div> <div class="footer-socket-left-section"> <div class="copyright">Copyright © 2023 <a href="https://soaltugas.net/" title="SoalTugas.net" ><span>SoalTugas.net</span></a>. All rights reserved.</div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script data-phast-original-type="text/javascript" type="text/phast" src="//laughedaffront.com/99/a4/5a/99a45a8346e3dc4f4d81133fb52b6a4c.js"></script> <script data-phast-original-type="text/javascript" type="text/phast">var _Hasync=_Hasync||[];_Hasync.push(['Histats.start','1,4686030,4,0,0,0,00010000']);_Hasync.push(['Histats.fasi','1']);_Hasync.push(['Histats.track_hits','']);(function(){var hs=document.createElement('script');hs.type='text/javascript';hs.async=true;hs.src=('//s10.histats.com/js15_as.js');(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(hs);})();</script> <noscript><a href="/" target="_blank"><img loading="lazy" src="//sstatic1.histats.com/0.gif?4686030&101" alt></a></noscript> <script data-phast-original-type="text/javascript" type="text/phast" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" id="bootstrap_js-js"></script> <script data-phast-original-src="https://soaltugas.net/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.7.3" data-phast-params='{"ref":"NiAb21fQ6vM"}' data-phast-original-type="text/javascript" type="text/phast" id="swv-js"></script> <script data-phast-original-type="text/javascript" type="text/phast" id="contact-form-7-js-extra">var wpcf7={"api":{"root":"https:\/\/soaltugas.net\/wp-json\/","namespace":"contact-form-7\/v1"}};</script> <script data-phast-original-src="https://soaltugas.net/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.7.3" data-phast-params='{"ref":"8YvJ4l-xw-4"}' data-phast-original-type="text/javascript" type="text/phast" id="contact-form-7-js"></script> <script data-phast-original-src="https://soaltugas.net/wp-content/themes/colormag-pro/js/navigation.min.js?ver=3.3.7" data-phast-params='{"ref":"X2sF65-TTs4"}' data-phast-original-type="text/javascript" type="text/phast" id="colormag-navigation-js"></script> <script data-phast-original-src="https://soaltugas.net/wp-content/themes/colormag-pro/js/fitvids/jquery.fitvids.min.js?ver=3.3.7" data-phast-params='{"ref":"QsdHxmRlhd4"}' data-phast-original-type="text/javascript" type="text/phast" id="colormag-fitvids-js"></script> <script data-phast-original-src="https://soaltugas.net/wp-content/themes/colormag-pro/js/skip-link-focus-fix.min.js?ver=3.3.7" data-phast-params='{"ref":"L4wKRiwBlpw"}' data-phast-original-type="text/javascript" type="text/phast" id="colormag-skip-link-focus-fix-js"></script> <script data-phast-original-type="text/javascript" type="text/phast" id="colormag-custom-js-extra">var colormag_load_more={"tg_nonce":"32526f2b6a","ajax_url":"https:\/\/soaltugas.net\/wp-admin\/admin-ajax.php"};</script> <script data-phast-original-src="https://soaltugas.net/wp-content/themes/colormag-pro/js/colormag-custom.min.js?ver=3.3.7" data-phast-params='{"ref":"chGOA6Wrlsk"}' data-phast-original-type="text/javascript" type="text/phast" id="colormag-custom-js"></script> <script data-phast-original-type="text/javascript" type="text/phast" id="colormag-loadmore-js-extra">var colormag_script_vars={"no_more_posts":"No more post"};</script> <script data-phast-original-src="https://soaltugas.net/wp-content/themes/colormag-pro/js/loadmore.min.js?ver=3.3.7" data-phast-params='{"ref":"eZsB_gR8sXs"}' data-phast-original-type="text/javascript" type="text/phast" id="colormag-loadmore-js"></script> <script data-phast-original-type="text/javascript" type="text/phast" id="colormag-infinite-scroll-js-extra">var colormagInfiniteScrollParams={"isSinglePost":"","queryVars":"{\"page\":0,\"name\":\"react-js-tutorial-step-by-step\",\"error\":\"\",\"m\":\"\",\"p\":0,\"post_parent\":\"\",\"subpost\":\"\",\"subpost_id\":\"\",\"attachment\":\"\",\"attachment_id\":0,\"pagename\":\"\",\"page_id\":0,\"second\":\"\",\"minute\":\"\",\"hour\":\"\",\"day\":0,\"monthnum\":0,\"year\":0,\"w\":0,\"category_name\":\"\",\"tag\":\"\",\"cat\":\"\",\"tag_id\":\"\",\"author\":\"\",\"author_name\":\"\",\"feed\":\"\",\"tb\":\"\",\"paged\":0,\"meta_key\":\"\",\"meta_value\":\"\",\"preview\":\"\",\"s\":\"\",\"sentence\":\"\",\"title\":\"\",\"fields\":\"\",\"menu_order\":\"\",\"embed\":\"\",\"category__in\":[],\"category__not_in\":[],\"category__and\":[],\"post__in\":[],\"post__not_in\":[],\"post_name__in\":[],\"tag__in\":[],\"tag__not_in\":[],\"tag__and\":[],\"tag_slug__in\":[],\"tag_slug__and\":[],\"post_parent__in\":[],\"post_parent__not_in\":[],\"author__in\":[],\"author__not_in\":[],\"ignore_sticky_posts\":false,\"suppress_filters\":false,\"cache_results\":true,\"update_post_term_cache\":true,\"update_menu_item_cache\":false,\"lazy_load_term_meta\":true,\"update_post_meta_cache\":true,\"post_type\":\"\",\"posts_per_page\":11,\"nopaging\":false,\"comments_per_page\":\"50\",\"no_found_rows\":false,\"order\":\"DESC\"}","ajaxUrl":"https:\/\/soaltugas.net\/wp-admin\/admin-ajax.php","infiniteCount":"2","infiniteTotal":"0","pagination":"infinite_scroll","infiniteScrollEvent":"scroll","infiniteNonce":"59a5b85ee7","allPostsLoadedMessage":"All Posts Loaded"};</script> <script data-phast-original-src="https://soaltugas.net/wp-content/themes/colormag-pro/js/infinite-scroll.min.js?ver=3.3.7" data-phast-params='{"ref":"CQpZQiORwWg"}' data-phast-original-type="text/javascript" type="text/phast" id="colormag-infinite-scroll-js"></script> <script data-phast-compiled-js-names="ScriptsProxyService/rewrite-function.js,CSSInlining/ie-fallback.js,CSSInlining/inlined-css-retriever.js,ScriptsDeferring/scripts-loader.js,ScriptsDeferring/rewrite.js">(function phastScripts(phast){phast.scripts=[(function(){phast.config=JSON.parse(atob(phast.config));while(phast.scripts.length){phast.scripts.shift()()} }),(function(){(function(a,b){typeof exports==="object"&&typeof module!=="undefined"?module.exports=b():typeof define==="function"&&define.amd?define(b):a.ES6Promise=b()})(phast,function(){"use strict";function c(ia){var ja=typeof ia;return ia!==null&&(ja==="object"||ja==="function")}function d(ka){return typeof ka==="function"}var e=void 0;if(Array.isArray){e=Array.isArray}else{e=function(la){return Object.prototype.toString.call(la)==="[object Array]"}}var f=e;var g=0;var h=void 0;var i=void 0;var j=function ma(na,oa){w[g]=na;w[g+1]=oa;g+=2;if(g===2){if(i){i(x)}else{z()}}};function k(pa){i=pa}function l(qa){j=qa}var m=typeof window!=="undefined"?window:undefined;var n=m||{};var o=n.MutationObserver||n.WebKitMutationObserver;var p=typeof self==="undefined"&&typeof process!=="undefined"&&{}.toString.call(process)==="[object process]";var q=typeof Uint8ClampedArray!=="undefined"&&typeof importScripts!=="undefined"&&typeof MessageChannel!=="undefined";function r(){return function(){return process.nextTick(x)}}function s(){if(typeof h!=="undefined"){return function(){h(x)}}return v()}function t(){var ra=0;var sa=new o(x);var ta=document.createTextNode("");sa.observe(ta,{characterData:true});return function(){ta.data=ra=++ra%2}}function u(){var ua=new MessageChannel;ua.port1.onmessage=x;return function(){return ua.port2.postMessage(0)}}function v(){var va=setTimeout;return function(){return va(x,1)}}var w=new Array(1e3);function x(){for(var wa=0;wa<g;wa+=2){var xa=w[wa];var ya=w[wa+1];xa(ya);w[wa]=undefined;w[wa+1]=undefined}g=0}function y(){try{var za=Function("return this")().require("vertx");h=za.runOnLoop||za.runOnContext;return s()}catch(Aa){return v()}}var z=void 0;if(p){z=r()}else if(o){z=t()}else if(q){z=u()}else if(m===undefined&&typeof require==="function"){z=y()}else{z=v()}function A(Ba,Ca){var Da=this;var Ea=new this.constructor(D);if(Ea[C]===undefined){$(Ea)}var Fa=Da._state;if(Fa){var Ga=arguments[Fa-1];j(function(){return W(Fa,Ea,Ga,Da._result)})}else{T(Da,Ea,Ba,Ca)}return Ea}function B(Ha){var Ia=this;if(Ha&&typeof Ha==="object"&&Ha.constructor===Ia){return Ha}var Ja=new Ia(D);P(Ja,Ha);return Ja}var C=Math.random().toString(36).substring(2);function D(){}var E=void 0;var F=1;var G=2;var H={error:null};function I(){return new TypeError("You cannot resolve a promise with itself")}function J(){return new TypeError("A promises callback cannot return that same promise.")}function K(Ka){try{return Ka.then}catch(La){H.error=La;return H}}function L(Ma,Na,Oa,Pa){try{Ma.call(Na,Oa,Pa)}catch(Qa){return Qa}}function M(Ra,Sa,Ta){j(function(Ua){var Va=false;var Wa=L(Ta,Sa,function(Xa){if(Va){return}Va=true;if(Sa!==Xa){P(Ua,Xa)}else{R(Ua,Xa)}},function(Ya){if(Va){return}Va=true;S(Ua,Ya)},"Settle: "+(Ua._label||" unknown promise"));if(!Va&&Wa){Va=true;S(Ua,Wa)}},Ra)}function N(Za,$a){if($a._state===F){R(Za,$a._result)}else if($a._state===G){S(Za,$a._result)}else{T($a,undefined,function(_a){return P(Za,_a)},function(a0){return S(Za,a0)})}}function O(b0,c0,d0){if(c0.constructor===b0.constructor&&d0===A&&c0.constructor.resolve===B){N(b0,c0)}else{if(d0===H){S(b0,H.error);H.error=null}else if(d0===undefined){R(b0,c0)}else if(d(d0)){M(b0,c0,d0)}else{R(b0,c0)}}}function P(e0,f0){if(e0===f0){S(e0,I())}else if(c(f0)){O(e0,f0,K(f0))}else{R(e0,f0)}}function Q(g0){if(g0._onerror){g0._onerror(g0._result)}U(g0)}function R(h0,i0){if(h0._state!==E){return}h0._result=i0;h0._state=F;if(h0._subscribers.length!==0){j(U,h0)}}function S(j0,k0){if(j0._state!==E){return}j0._state=G;j0._result=k0;j(Q,j0)}function T(l0,m0,n0,o0){var p0=l0._subscribers;var q0=p0.length;l0._onerror=null;p0[q0]=m0;p0[q0+F]=n0;p0[q0+G]=o0;if(q0===0&&l0._state){j(U,l0)}}function U(r0){var s0=r0._subscribers;var t0=r0._state;if(s0.length===0){return}var u0=void 0,v0=void 0,w0=r0._result;for(var x0=0;x0<s0.length;x0+=3){u0=s0[x0];v0=s0[x0+t0];if(u0){W(t0,u0,v0,w0)}else{v0(w0)}}r0._subscribers.length=0}function V(y0,z0){try{return y0(z0)}catch(A0){H.error=A0;return H}}function W(B0,C0,D0,E0){var F0=d(D0),G0=void 0,H0=void 0,I0=void 0,J0=void 0;if(F0){G0=V(D0,E0);if(G0===H){J0=true;H0=G0.error;G0.error=null}else{I0=true}if(C0===G0){S(C0,J());return}}else{G0=E0;I0=true}if(C0._state!==E){}else if(F0&&I0){P(C0,G0)}else if(J0){S(C0,H0)}else if(B0===F){R(C0,G0)}else if(B0===G){S(C0,G0)}}function X(K0,L0){try{L0(function M0(N0){P(K0,N0)},function O0(P0){S(K0,P0)})}catch(Q0){S(K0,Q0)}}var Y=0;function Z(){return Y++}function $(R0){R0[C]=Y++;R0._state=undefined;R0._result=undefined;R0._subscribers=[]}function _(){return new Error("Array Methods must be provided an Array")}var aa=function(){function S0(T0,U0){this._instanceConstructor=T0;this.promise=new T0(D);if(!this.promise[C]){$(this.promise)}if(f(U0)){this.length=U0.length;this._remaining=U0.length;this._result=new Array(this.length);if(this.length===0){R(this.promise,this._result)}else{this.length=this.length||0;this._enumerate(U0);if(this._remaining===0){R(this.promise,this._result)}}}else{S(this.promise,_())}}S0.prototype._enumerate=function V0(W0){for(var X0=0;this._state===E&&X0<W0.length;X0++){this._eachEntry(W0[X0],X0)}};S0.prototype._eachEntry=function Y0(Z0,$0){var _0=this._instanceConstructor;var ab=_0.resolve;if(ab===B){var bb=K(Z0);if(bb===A&&Z0._state!==E){this._settledAt(Z0._state,$0,Z0._result)}else if(typeof bb!=="function"){this._remaining--;this._result[$0]=Z0}else if(_0===ga){var cb=new _0(D);O(cb,Z0,bb);this._willSettleAt(cb,$0)}else{this._willSettleAt(new _0(function(db){return db(Z0)}),$0)}}else{this._willSettleAt(ab(Z0),$0)}};S0.prototype._settledAt=function eb(fb,gb,hb){var ib=this.promise;if(ib._state===E){this._remaining--;if(fb===G){S(ib,hb)}else{this._result[gb]=hb}}if(this._remaining===0){R(ib,this._result)}};S0.prototype._willSettleAt=function jb(kb,lb){var mb=this;T(kb,undefined,function(nb){return mb._settledAt(F,lb,nb)},function(ob){return mb._settledAt(G,lb,ob)})};return S0}();function ba(pb){return new aa(this,pb).promise}function ca(qb){var rb=this;if(!f(qb)){return new rb(function(sb,tb){return tb(new TypeError("You must pass an array to race."))})}else{return new rb(function(ub,vb){var wb=qb.length;for(var xb=0;xb<wb;xb++){rb.resolve(qb[xb]).then(ub,vb)}})}}function da(yb){var zb=this;var Ab=new zb(D);S(Ab,yb);return Ab}function ea(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}function fa(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}var ga=function(){function Bb(Cb){this[C]=Z();this._result=this._state=undefined;this._subscribers=[];if(D!==Cb){typeof Cb!=="function"&&ea();this instanceof Bb?X(this,Cb):fa()}}Bb.prototype.catch=function Db(Eb){return this.then(null,Eb)};Bb.prototype.finally=function Fb(Gb){var Hb=this;var Ib=Hb.constructor;return Hb.then(function(Jb){return Ib.resolve(Gb()).then(function(){return Jb})},function(Kb){return Ib.resolve(Gb()).then(function(){throw Kb})})};return Bb}();ga.prototype.then=A;ga.all=ba;ga.race=ca;ga.resolve=B;ga.reject=da;ga._setScheduler=k;ga._setAsap=l;ga._asap=j;function ha(){var Lb=void 0;if(typeof global!=="undefined"){Lb=global}else if(typeof self!=="undefined"){Lb=self}else{try{Lb=Function("return this")()}catch(Ob){throw new Error("polyfill failed because global object is unavailable in this environment")}}var Mb=Lb.Promise;if(Mb){var Nb=null;try{Nb=Object.prototype.toString.call(Mb.resolve())}catch(Pb){}if(Nb==="[object Promise]"&&!Mb.cast){return}}Lb.Promise=ga}ga.polyfill=ha;ga.Promise=ga;return ga}); }),(function(){function murmurhash3_32_gc(a,b){var c,d,e,f,g,h,i,j,k,l;c=a.length&3;d=a.length-c;e=b;g=3432918353;i=461845907;l=0;while(l<d){k=a.charCodeAt(l)&255|(a.charCodeAt(++l)&255)<<8|(a.charCodeAt(++l)&255)<<16|(a.charCodeAt(++l)&255)<<24;++l;k=(k&65535)*g+(((k>>>16)*g&65535)<<16)&4294967295;k=k<<15|k>>>17;k=(k&65535)*i+(((k>>>16)*i&65535)<<16)&4294967295;e^=k;e=e<<13|e>>>19;f=(e&65535)*5+(((e>>>16)*5&65535)<<16)&4294967295;e=(f&65535)+27492+(((f>>>16)+58964&65535)<<16)}k=0;switch(c){case 3:k^=(a.charCodeAt(l+2)&255)<<16;case 2:k^=(a.charCodeAt(l+1)&255)<<8;case 1:k^=a.charCodeAt(l)&255;k=(k&65535)*g+(((k>>>16)*g&65535)<<16)&4294967295;k=k<<15|k>>>17;k=(k&65535)*i+(((k>>>16)*i&65535)<<16)&4294967295;e^=k}e^=a.length;e^=e>>>16;e=(e&65535)*2246822507+(((e>>>16)*2246822507&65535)<<16)&4294967295;e^=e>>>13;e=(e&65535)*3266489909+(((e>>>16)*3266489909&65535)<<16)&4294967295;e^=e>>>16;return e>>>0}phast.hash=murmurhash3_32_gc; }),(function(){phast.buildServiceUrl=function(a,b){if(a.pathInfo){return appendPathInfo(a.serviceUrl,buildQuery(b))}else{return appendQueryString(a.serviceUrl,buildQuery(b))}};function buildQuery(c){if(typeof c==="string"){return c}var d=[];for(var e in c){if(c.hasOwnProperty(e)){d.push(encodeURIComponent(e)+"="+encodeURIComponent(c[e]))}}return d.join("&")}function appendPathInfo(f,g){var h=btoa(g).replace(/=/g,"").replace(/\//g,"_").replace(/\+/g,"-");var i=j(h+".q.js");return f.replace(/\?.*$/,"").replace(/\/__p__\.js$/,"")+"/"+i;function j(l){return k(k(l).match(/[\s\S]{1,255}/g).join("/"))}function k(m){return m.split("").reverse().join("")}}function appendQueryString(n,o){var p=n.indexOf("?")>-1?"&":"?";return n+p+o} }),(function(){var Promise=phast.ES6Promise.Promise;phast.ResourceLoader=function(a,b){this.get=function(c){return b.get(c).then(function(d){if(typeof d!=="string"){throw new Error("response should be string")}return d}).catch(function(){var e=a.get(c);e.then(function(f){b.set(c,f)});return e})}};phast.ResourceLoader.RequestParams={};phast.ResourceLoader.RequestParams.FaultyParams={};phast.ResourceLoader.RequestParams.fromString=function(g){try{return JSON.parse(g)}catch(h){return phast.ResourceLoader.RequestParams.FaultyParams}};phast.ResourceLoader.BundlerServiceClient=function(i,j,k){var l=phast.ResourceLoader.BundlerServiceClient.RequestsPack;var m=l.PackItem;var n;this.get=function(q){if(q===phast.ResourceLoader.RequestParams.FaultyParams){return Promise.reject(new Error("Parameters did not parse as JSON"))}return new Promise(function(r,s){if(n===undefined){n=new l(j)}n.add(new m({success:r,error:s},q));setTimeout(o);if(n.toQuery().length>4500){console.log("[Phast] Resource loader: Pack got too big; flushing early...");o()}})};function o(){if(n===undefined){return}var t=n;n=undefined;p(t)}function p(u){var v=phast.buildServiceUrl({serviceUrl:i,pathInfo:k},"service=bundler&"+u.toQuery());var w=function(){console.error("[Phast] Request to bundler failed with status",y.status);console.log("URL:",v);u.handleError()};var x=function(){if(y.status>=200&&y.status<300){u.handleResponse(y.responseText)}else{u.handleError()}};var y=new XMLHttpRequest;y.open("GET",v);y.addEventListener("error",w);y.addEventListener("abort",w);y.addEventListener("load",x);y.send()}};phast.ResourceLoader.BundlerServiceClient.RequestsPack=function(z){var A={};this.getLength=function(){var F=0;for(var G in A){F++}return F};this.add=function(H){var I;if(H.params.token){I="token="+H.params.token}else if(H.params.ref){I="ref="+H.params.ref}else{I=""}if(!A[I]){A[I]={params:H.params,requests:[H.request]}}else{A[I].requests.push(H.request)}};this.toQuery=function(){var J=[],K=[],L="";B().forEach(function(M){var N,O;for(var P in A[M].params){if(P==="cacheMarker"){K.push(A[M].params.cacheMarker);continue}N=z[P]?z[P]:P;if(P==="strip-imports"){O=encodeURIComponent(N)}else if(P==="src"){O=encodeURIComponent(N)+"="+encodeURIComponent(C(A[M].params.src,L));L=A[M].params.src}else{O=encodeURIComponent(N)+"="+encodeURIComponent(A[M].params[P])}J.push(O)}});if(K.length>0){J.unshift("c="+phast.hash(K.join("|"),23045))}return E(J.join("&"))};function B(){return Object.keys(A).sort(function(R,S){return Q(R,S)?1:Q(S,R)?-1:0});function Q(T,U){if(typeof A[T].params.src!=="undefined"&&typeof A[U].params.src!=="undefined"){return A[T].params.src>A[U].params.src}return T>U}}function C(V,W){var X=0,Y=Math.pow(36,2)-1;while(X<W.length&&V[X]===W[X]){X++}X=Math.min(X,Y);return D(X)+""+V.substr(X)}function D(Z){var $=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];var _=Z%36;var aa=Math.floor((Z-_)/36);return $[aa]+$[_]}function E(ba){if(!/(^|&)s=/.test(ba)){return ba}return ba.replace(/(%..)|([A-M])|([N-Z])/gi,function(ca,da,ea,fa){if(da){return ca}return String.fromCharCode(ca.charCodeAt(0)+(ea?13:-13))})}this.handleResponse=function(ga){try{var ha=JSON.parse(ga)}catch(ja){this.handleError();return}var ia=B();if(ha.length!==ia.length){console.error("[Phast] Requested",ia.length,"items from bundler, but got",ha.length,"response(s)");this.handleError();return}ha.forEach(function(ka,la){if(ka.status===200){A[ia[la]].requests.forEach(function(ma){ma.success(ka.content)})}else{A[ia[la]].requests.forEach(function(na){na.error(new Error("Got from bundler: "+JSON.stringify(ka)))})}})}.bind(this);this.handleError=function(){for(var oa in A){A[oa].requests.forEach(function(pa){pa.error()})}}};phast.ResourceLoader.BundlerServiceClient.RequestsPack.PackItem=function(qa,ra){this.request=qa;this.params=ra};phast.ResourceLoader.IndexedDBStorage=function(sa){var ta=phast.ResourceLoader.IndexedDBStorage;var ua=ta.logPrefix;var va=ta.requestToPromise;var wa;Ba();this.get=function(Ca){return xa("readonly").then(function(Da){return va(Da.get(Ca)).catch(ya("reading from store"))})};this.store=function(Ea){return xa("readwrite").then(function(Fa){return va(Fa.put(Ea)).catch(ya("writing to store"))})};this.clear=function(){return xa("readwrite").then(function(Ga){return va(Ga.clear())})};this.iterateOnAll=function(Ha){return xa("readonly").then(function(Ia){return za(Ha,Ia.openCursor()).catch(ya("iterating on all"))})};function xa(Ja){return wa.get().then(function(Ka){try{return Ka.transaction(sa.storeName,Ja).objectStore(sa.storeName)}catch(La){console.error(ua,"Could not open store; recreating database:",La);Aa();throw La}})}function ya(Ma){return function(Na){console.error(ua,"Error "+Ma+":",Na);Aa();throw Na}}function za(Oa,Pa){return new Promise(function(Qa,Ra){Pa.onsuccess=function(Sa){var Ta=Sa.target.result;if(Ta){Oa(Ta.value);Ta.continue()}else{Qa()}};Pa.onerror=Ra})}function Aa(){var Ua=wa.dropDB().then(Ba);wa={get:function(){return Promise.reject(new Error("Database is being dropped and recreated"))},dropDB:function(){return Ua}}}function Ba(){wa=new phast.ResourceLoader.IndexedDBStorage.Connection(sa)}};phast.ResourceLoader.IndexedDBStorage.logPrefix="[Phast] Resource loader:";phast.ResourceLoader.IndexedDBStorage.requestToPromise=function(Va){return new Promise(function(Wa,Xa){Va.onsuccess=function(){Wa(Va.result)};Va.onerror=function(){Xa(Va.error)}})};phast.ResourceLoader.IndexedDBStorage.ConnectionParams=function(){this.dbName="phastResourcesCache";this.dbVersion=1;this.storeName="resources"};phast.ResourceLoader.IndexedDBStorage.StoredResource=function(Ya,Za){this.token=Ya;this.content=Za};phast.ResourceLoader.IndexedDBStorage.Connection=function($a){var _a=phast.ResourceLoader.IndexedDBStorage.logPrefix;var a0=phast.ResourceLoader.IndexedDBStorage.requestToPromise;var b0;this.get=c0;this.dropDB=d0;function c0(){if(!b0){b0=e0($a)}return b0}function d0(){return c0().then(function(g0){console.error(_a,"Dropping DB");g0.close();b0=null;return a0(window.indexedDB.deleteDatabase($a.dbName))})}function e0(h0){if(typeof window.indexedDB==="undefined"){return Promise.reject(new Error("IndexedDB is not available"))}var i0=window.indexedDB.open(h0.dbName,h0.dbVersion);i0.onupgradeneeded=function(){f0(i0.result,h0)};return a0(i0).then(function(j0){j0.onversionchange=function(){console.debug(_a,"Closing DB");j0.close();if(b0){b0=null}};return j0}).catch(function(k0){console.log(_a,"IndexedDB cache is not available. This is usually due to using private browsing mode.");throw k0})}function f0(l0,m0){l0.createObjectStore(m0.storeName,{keyPath:"token"})}};phast.ResourceLoader.StorageCache=function(n0,o0){var p0=phast.ResourceLoader.IndexedDBStorage.StoredResource;this.get=function(x0){return s0(r0(x0))};this.set=function(y0,z0){return t0(r0(y0),z0,false)};var q0=null;function r0(A0){return JSON.stringify(A0)}function s0(B0){return o0.get(B0).then(function(C0){if(C0){return Promise.resolve(C0.content)}return Promise.resolve()})}function t0(D0,E0,F0){return w0().then(function(G0){var H0=E0.length+G0;if(H0>n0.maxStorageSize){return F0||E0.length>n0.maxStorageSize?Promise.reject(new Error("Storage quota will be exceeded")):u0(D0,E0)}q0=H0;var I0=new p0(D0,E0);return o0.store(I0)})}function u0(J0,K0){return v0().then(function(){return t0(J0,K0,true)})}function v0(){return o0.clear().then(function(){q0=0})}function w0(){if(q0!==null){return Promise.resolve(q0)}var L0=0;return o0.iterateOnAll(function(M0){L0+=M0.content.length}).then(function(){q0=L0;return Promise.resolve(q0)})}};phast.ResourceLoader.StorageCache.StorageCacheParams=function(){this.maxStorageSize=4.5*1024*1024};phast.ResourceLoader.BlackholeCache=function(){this.get=function(){return Promise.reject()};this.set=function(){return Promise.reject()}};phast.ResourceLoader.make=function(N0,O0,P0){var Q0=S0();var R0=new phast.ResourceLoader.BundlerServiceClient(N0,O0,P0);return new phast.ResourceLoader(R0,Q0);function S0(){var T0=window.navigator.userAgent;if(/safari/i.test(T0)&&!/chrome|android/i.test(T0)){console.log("[Phast] Not using IndexedDB cache on Safari");return new phast.ResourceLoader.BlackholeCache}else{var U0=new phast.ResourceLoader.IndexedDBStorage.ConnectionParams;var V0=new phast.ResourceLoader.IndexedDBStorage(U0);var W0=new phast.ResourceLoader.StorageCache.StorageCacheParams;return new phast.ResourceLoader.StorageCache(W0,V0)}}}; }),(function(){var Promise=phast.ES6Promise;phast.ResourceLoader.instance=phast.ResourceLoader.make(phast.config.resourcesLoader.serviceUrl,phast.config.resourcesLoader.shortParamsMappings,phast.config.resourcesLoader.pathInfo);phast.forEachSelectedElement=function(a,b){Array.prototype.forEach.call(window.document.querySelectorAll(a),b)};phast.once=function(c){var d=false;return function(){if(!d){d=true;c.apply(this,Array.prototype.slice(arguments))}}};phast.on=function(e,f){return new Promise(function(g){e.addEventListener(f,g)})};phast.wait=function(h){return new Promise(function(i){setTimeout(i,h)})};phast.on(document,"DOMContentLoaded").then(function(){var j,k;function l(n){return n&&n.nodeType===8&&/^\s*\[Phast\]/.test(n.textContent)}function m(o){while(o){if(l(o)){return o}o=o.nextSibling}return false}k=m(document.documentElement.nextSibling);if(k===false){k=m(document.body.firstChild)}if(k){j=k.textContent.replace(/^\s+|\s+$/g,"").split("\n");console.groupCollapsed(j.shift());console.log(j.join("\n"));console.groupEnd()}});phast.on(document,"DOMContentLoaded").then(function(){var p=performance.timing;var q=[];q.push(["Downloading phases:"]);q.push([" Look up hostname in DNS + %s ms",t(p.domainLookupEnd-p.fetchStart)]);q.push([" Establish connection + %s ms",t(p.connectEnd-p.domainLookupEnd)]);q.push([" Send request + %s ms",t(p.requestStart-p.connectEnd)]);q.push([" Receive first byte + %s ms",t(p.responseStart-p.requestStart)]);q.push([" Download page + %s ms",t(p.responseEnd-p.responseStart)]);q.push([""]);q.push(["Totals:"]);q.push([" Time to first byte %s ms",t(p.responseStart-p.fetchStart)]);q.push([" (since request start) %s ms",t(p.responseStart-p.requestStart)]);q.push([" Total request time %s ms",t(p.responseEnd-p.fetchStart)]);q.push([" (since request start) %s ms",t(p.responseEnd-p.requestStart)]);q.push([" "]);var r=[];var s=[];q.forEach(function(u){r.push(u.shift());s=s.concat(u)});console.groupCollapsed("[Phast] Client-side performance metrics");console.log.apply(console,[r.join("\n")].concat(s));console.groupEnd();function t(v){v=""+v;while(v.length<4){v=" "+v}return v}}); }),(function(){var config=phast.config["script-proxy-service"];var urlPattern=/^(https?:)?\/\//;var typePattern=/^\s*(application|text)\/(x-)?(java|ecma|j|live)script/i;var cacheMarker=Math.floor((new Date).getTime()/1e3/config.urlRefreshTime);var whitelist=compileWhitelistPatterns(config.whitelist);phast.scripts.push(function(){overrideDOMMethod("appendChild");overrideDOMMethod("insertBefore")});function compileWhitelistPatterns(a){var b=/^(.)(.*)\1([a-z]*)$/i;var c=[];a.forEach(function(d){var e=b.exec(d);if(!e){window.console&&window.console.log("Phast: Not a pattern:",d);return}try{c.push(new RegExp(e[2],e[3]))}catch(f){window.console&&window.console.log("Phast: Failed to compile pattern:",d)}});return c}function checkWhitelist(g){for(var h=0;h<whitelist.length;h++){if(whitelist[h].exec(g)){return true}}return false}function overrideDOMMethod(i){var j=Element.prototype[i];var k=function(){var l=processNode(arguments[0]);var m=j.apply(this,arguments);l();return m};Element.prototype[i]=k;window.addEventListener("load",function(){if(Element.prototype[i]===k){delete Element.prototype[i]}})}function processNode(n){if(!n||n.nodeType!==Node.ELEMENT_NODE||n.tagName!=="SCRIPT"||!urlPattern.test(n.src)||n.type&&!typePattern.test(n.type)||n.src.substr(0,config.serviceUrl.length)===config.serviceUrl||!checkWhitelist(n.src)){return function(){}}var o=n.src;n.src=phast.buildServiceUrl(config,{service:"scripts",src:o,cacheMarker:cacheMarker});n.setAttribute("data-phast-rewritten","");return function(){n.src=o}} }),(function(){(function(){var a=function(){if(!("FontFace"in window)){return false}var b=new FontFace("t",'url( "data:font/woff2;base64,d09GMgABAAAAAADwAAoAAAAAAiQAAACoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAALAogOAE2AiQDBgsGAAQgBSAHIBuDAciO1EZ3I/mL5/+5/rfPnTt9/9Qa8H4cUUZxaRbh36LiKJoVh61XGzw6ufkpoeZBW4KphwFYIJGHB4LAY4hby++gW+6N1EN94I49v86yCpUdYgqeZrOWN34CMQg2tAmthdli0eePIwAKNIIRS4AGZFzdX9lbBUAQlm//f262/61o8PlYO/D1/X4FrWFFgdCQD9DpGJSxmFyjOAGUU4P0qigcNb82GAAA" ) format( "woff2" )',{});b.load()["catch"](function(){});return b.status=="loading"||b.status=="loaded"}();if(a){return}console.log("[Phast] Browser does not support WOFF2, falling back to original stylesheets");Array.prototype.forEach.call(document.querySelectorAll("style[data-phast-ie-fallback-url]"),function(c){var d=document.createElement("link");if(c.hasAttribute("media")){d.setAttribute("media",c.getAttribute("media"))}d.setAttribute("rel","stylesheet");d.setAttribute("href",c.getAttribute("data-phast-ie-fallback-url"));c.parentNode.insertBefore(d,c);c.parentNode.removeChild(c)});Array.prototype.forEach.call(document.querySelectorAll("style[data-phast-nested-inlined]"),function(e){e.parentNode.removeChild(e)})})(); }),(function(){phast.stylesLoading=0;var resourceLoader=phast.ResourceLoader.instance;phast.forEachSelectedElement("style[data-phast-params]",function(a){var b=a.getAttribute("data-phast-params");var c=phast.ResourceLoader.RequestParams.fromString(b);phast.stylesLoading++;resourceLoader.get(c).then(function(d){a.textContent=d;a.removeAttribute("data-phast-params")}).catch(function(e){console.warn("[Phast] Failed to load CSS",c,e);var f=a.getAttribute("data-phast-original-src");if(!f){console.error("[Phast] No data-phast-original-src on <style>!",a);return}console.info("[Phast] Falling back to <link> element for",f);var g=document.createElement("link");g.href=f;g.media=a.media;g.rel="stylesheet";g.addEventListener("load",function(){if(a.parentNode){a.parentNode.removeChild(a)}});a.parentNode.insertBefore(g,a.nextSibling)}).finally(function(){phast.stylesLoading--;if(phast.stylesLoading===0&&phast.onStylesLoaded){phast.onStylesLoaded()}})});(function(){var h=[];phast.forEachSelectedElement("style[data-phast-original-id]",function(i){var j=i.getAttribute("data-phast-original-id");if(h[j]){return}h[j]=true;console.warn("[Phast] The style element with id",j,"has been split into multiple style tags due to @import statements and the id attribute has been removed. Normally, this does not cause any issues.")})})(); }),(function(){var Promise=phast.ES6Promise;var hasCurrentScript=!!document.currentScript;phast.ScriptsLoader={};phast.ScriptsLoader.getScriptsInExecutionOrder=function(a,b){var c=Array.prototype.slice.call(a.querySelectorAll('script[type="text/phast"]')).filter(g);var d=[],e=[];for(var f=0;f<c.length;f++){if(getSrc(c[f])!==undefined&&isDefer(c[f])){e.push(c[f])}else{d.push(c[f])}}return d.concat(e).map(function(j){return b.makeScriptFromElement(j)});function g(k){try{var l=phast.config.scriptsLoader.csp}catch(m){return true}if(l.nonce==null){return true}if(k.nonce===l.nonce){return true}try{h(l,k)}catch(n){console.error("Could not send CSP report due to error:",n)}if(l.reportOnly){console.warn("Script with missing or invalid nonce would not be executed (but report-only mode is enabled):",k);return true}console.warn("Script with missing or invalid nonce will not be executed:",k);return false}function h(o,p){var q={"blocked-uri":getSrc(p),disposition:o.reportOnly?"report":"enforce","document-uri":location.href,referrer:a.referrer,"script-sample":i(p),implementation:"phast"};try{p.dispatchEvent(new SecurityPolicyViolationEvent("securitypolicyviolation",{blockedURI:q["blocked-uri"],disposition:q["disposition"],documentURI:q["document-uri"],effectiveDirective:"script-src-elem",originalPolicy:"phast",referrer:q["referrer"],sample:q["script-sample"],statusCode:200,violatedDirective:"script-src-elem"}))}catch(s){console.error("[Phast] Could not dispatch securitypolicyviolation event",s)}if(!o.reportUri){return}var r={"csp-report":q};fetch(o.reportUri,{method:"POST",headers:{"Content-Type":"application/csp-report"},credentials:"same-origin",redirect:"error",keepalive:true,body:JSON.stringify(r)})}function i(t){if(!t.hasAttribute("src")){return t.textContent.substr(0,40)}}};phast.ScriptsLoader.executeScripts=function(u){var v=u.map(function(x){return x.init()});var w=Promise.resolve();u.forEach(function(y){w=phast.ScriptsLoader.chainScript(w,y)});return w.then(function(){return Promise.all(v).catch(function(){})})};phast.ScriptsLoader.chainScript=function(z,A){var B;try{if(A.describe){B=A.describe()}else{B="unknown script"}}catch(C){B="script.describe() failed"}return z.then(function(){var D=A.execute();D.then(function(){console.debug("✓",B)});return D}).catch(function(E){console.error("✘",B);if(E){console.log(E)}})};var insertBefore=window.Element.prototype.insertBefore;phast.ScriptsLoader.Utilities=function(F){this._document=F;var G=0;function H(R){return new Promise(function(S){var T="PhastCompleteScript"+ ++G;var U=I(R);var V=I(T+"()");window[T]=W;F.body.appendChild(U);F.body.appendChild(V);function W(){S();F.body.removeChild(U);F.body.removeChild(V);delete window[T]}})}function I(X){var Y=F.createElement("script");Y.textContent=X;Y.nonce=phast.config.scriptsLoader.csp.nonce;return Y}function J(Z){var $=F.createElement(Z.nodeName);Array.prototype.forEach.call(Z.attributes,function(_){$.setAttribute(_.nodeName,_.nodeValue)});return $}function K(aa){aa.removeAttribute("data-phast-params");var ba={};Array.prototype.map.call(aa.attributes,function(ca){return ca.nodeName}).map(function(da){var ea=da.match(/^data-phast-original-(.*)/i);if(ea){ba[ea[1].toLowerCase()]=aa.getAttribute(da);aa.removeAttribute(da)}});Object.keys(ba).sort().map(function(fa){aa.setAttribute(fa,ba[fa])});if(!("type"in ba)){aa.removeAttribute("type")}}function L(ga,ha){return new Promise(function(ia,ja){var ka=ha.getAttribute("src");ha.addEventListener("load",ia);ha.addEventListener("error",ja);ha.removeAttribute("src");insertBefore.call(ga.parentNode,ha,ga);ga.parentNode.removeChild(ga);if(ka){ha.setAttribute("src",ka)}})}function M(la,ma){return O(la,function(){return P(la,function(){return H(ma)})})}function N(na,oa){return O(oa,function(){return L(na,oa)})}function O(pa,qa){var ra=pa.nextElementSibling;var sa=Promise.resolve();var ta;if(isAsync(pa)){ta="async"}else if(isDefer(pa)){ta="defer"}F.write=function(xa){if(ta){console.warn("document.write call from "+ta+" script ignored");return}ua(xa)};F.writeln=function(ya){if(ta){console.warn("document.writeln call from "+ta+" script ignored");return}ua(ya+"\n")};function ua(za){var Aa=F.createElement("div");Aa.innerHTML=za;var Ba=va(Aa);if(ra&&ra.parentNode!==pa.parentNode){ra=pa.nextElementSibling}while(Aa.firstChild){pa.parentNode.insertBefore(Aa.firstChild,ra)}Ba.map(wa)}function va(Ca){return Array.prototype.slice.call(Ca.getElementsByTagName("script")).filter(function(Da){var Ea=Da.getAttribute("type");return!Ea||/^(text|application)\/javascript(;|$)/i.test(Ea)})}function wa(Fa){var Ga=new phast.ScriptsLoader.Scripts.Factory(F);var Ha=Ga.makeScriptFromElement(Fa);sa=phast.ScriptsLoader.chainScript(sa,Ha)}return qa().then(function(){return sa}).finally(function(){delete F.write;delete F.writeln})}function P(Ia,Ja){if(hasCurrentScript){try{Object.defineProperty(F,"currentScript",{configurable:true,get:function(){return Ia}})}catch(Ka){console.error("[Phast] Unable to override document.currentScript on this browser: ",Ka)}}return Ja().finally(function(){if(hasCurrentScript){delete F.currentScript}})}function Q(La){var Ma=F.createElement("link");Ma.setAttribute("rel","preload");Ma.setAttribute("as","script");Ma.setAttribute("href",La);F.head.appendChild(Ma)}this.executeString=H;this.copyElement=J;this.restoreOriginals=K;this.replaceElement=L;this.writeProtectAndExecuteString=M;this.writeProtectAndReplaceElement=N;this.addPreload=Q};phast.ScriptsLoader.Scripts={};phast.ScriptsLoader.Scripts.InlineScript=function(Na,Oa){this._utils=Na;this._element=Oa;this.init=function(){return Promise.resolve()};this.execute=function(){var Pa=Oa.textContent.replace(/^\s*