diff --git a/.babelrc b/.babelrc deleted file mode 100755 index 15bd1b6..0000000 --- a/.babelrc +++ /dev/null @@ -1,10 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - "@babel/preset-react" - ], - "plugins": [ - "@babel/transform-runtime", - "@babel/plugin-proposal-class-properties" - ] -} diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100755 index 6c44e4f..0000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,10 +0,0 @@ -# Circle CI 2.0 Config File -# This config file will prevent tests from being run on the gh-pages branch. -version: 2 -jobs: - build: - machine: true - branches: - ignore: gh-pages - steps: - - run: echo "Skipping tests on gh-pages branch" diff --git a/.env.development b/.env.development deleted file mode 100644 index 404cefb..0000000 --- a/.env.development +++ /dev/null @@ -1 +0,0 @@ -GATSBY_GRAPHQL_IDE=playground \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 16eca2a..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,11 +0,0 @@ -module.exports = { - extends: "airbnb", - env: { - browser: true - }, - rules: { - 'react/jsx-filename-extension': 'off', - 'jsx-a11y/anchor-is-valid': 'off' // temporary solution (while we don't have a router) - }, - "parser": "babel-eslint" -} diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index f53dc3b..0000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,8 +0,0 @@ -# These are supported funding model platforms - -github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] -patreon: # Replace with a single Patreon username -open_collective: # Replace with a single Open Collective username -ko_fi: # Replace with a single Ko-fi username -tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel -custom: # Replace with a single custom sponsorship URL diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md deleted file mode 100755 index 3d23e57..0000000 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ /dev/null @@ -1,18 +0,0 @@ ---------------- -bug : ---------------- - -**Describe the bug** -A clear and concise description of what the bug is. - -**To Reproduce** -Steps to reproduce the behavior: - -**Expected behavior** -A clear and concise description of what you expected to happen. - -**Screenshots** -If applicable, add screenshots to help explain your problem. - -**Reference** -Share the refernce url diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md deleted file mode 100755 index 99bb9a0..0000000 --- a/.github/ISSUE_TEMPLATE/custom.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -name: Custom issue template -about: Describe this issue template's purpose here. - ---- - - diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 1d8e739..0000000 --- a/.gitignore +++ /dev/null @@ -1,72 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# Typescript v1 declaration files -typings/ - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# dotenv environment variables file -.env - -# gatsby files -.cache/ -public - -# Mac files -.DS_Store - -# Yarn -yarn-error.log -.pnp/ -.pnp.js -# Yarn Integrity file -.yarn-integrity - -package-lock.json -yarn.lock diff --git a/.npmignore b/.npmignore deleted file mode 100755 index 689d5d3..0000000 --- a/.npmignore +++ /dev/null @@ -1,6 +0,0 @@ -# .npmignore -src -examples -.babelrc -.gitignore -webpack.config.js diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 5149b1b..0000000 --- a/.prettierrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "trailingComma": "es5", - "semi": false, - "singleQuote": true -} diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 4bc394a..0000000 --- a/.travis.yml +++ /dev/null @@ -1,10 +0,0 @@ -# language: node_js -# os: -# - linux - -# node_js: -# - stable - -# script: -# - yarn build -# - bash ./script/deploy-to-gh-pages.sh \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 23fd35f..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "editor.formatOnSave": true -} \ No newline at end of file diff --git a/Contributors.md b/Contributors.md deleted file mode 100755 index c8399fd..0000000 --- a/Contributors.md +++ /dev/null @@ -1,70 +0,0 @@ -# Contributing - -When contributing to this repository, please first discuss the change you wish to make via issue, -email, or create ticket or any other method with the owners of this repository before making a change. - -Please note we have a code of conduct, please follow it in all your interactions with the project. - -## Pull Request Process - -1. Ensure any install or build dependencies are removed before the end of the layer when doing a - build. -2. Update the README.md with details of changes to the interface, this includes new environment - variables, exposed ports, useful file locations and container parameters. -3. Increase the version numbers in any examples files and the README.md to the new version that this - Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). -4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you - do not have permission to do that, you may request the second reviewer to merge it for you. - -## Code of Conduct - -### Our Pledge - -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, gender identity and expression, level of experience, -nationality, personal appearance, race, religion, or sexual identity and -orientation. - -### Our Standards - -Examples of behavior that contributes to creating a positive environment -include: - -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members - -Examples of unacceptable behavior by participants include: - -- The use of sexualized language or imagery and unwelcome sexual attention or - advances -- Trolling, insulting/derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or electronic - address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a - professional setting - -# Contributors of this repository - - - -[
Elangovan Sundar ](https://github.com/elangovanshanthi) -[
Kevin Boer ](https://github.com/kev1nboer)] -[
Fadhil Nur Mahardi ]( https://github.com/fadhilnurmahardi ) -[
Heni Hendaoui ]( https://github.com/hendaoui ) -1. [Elangovan Sundar](https://github.com/elangovanshanthi) -2. [Kevin Boer](https://github.com/kev1nboer) -3. [Fadhil Nur Mahardi](https://github.com/fadhilnurmahardi) -4. [D'jay](https://github.com/Djay1407) -5. [Heni Hendaoui](https://github.com/hendaoui) -6. [jamal](https://github.com/jamaluddinfikri) - diff --git a/LICENSE-website b/LICENSE-website deleted file mode 100644 index 1180a1c..0000000 --- a/LICENSE-website +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2015 Gatsbyjs - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index 308f858..0000000 --- a/README.md +++ /dev/null @@ -1,28 +0,0 @@ - -# 10secondsofcode -10secondsofcode is a easy way to understand the JavaScript and ReactJS snippets in 10 seconds.
-This website idea is inspired from https://javascript.info - -## Website -https://www.10secondsofcode.com - -# To add any concepts like reactjs and javascript follow the below steps - -1. Create / Edit the reactjs and javascripts concepts file in `src/pages/`. -2. Those files linked into `src/components/data.js` and create a PR. - -# To contribute to 10secondsofcode! -Follow these steps to make your first pull request- - 1. Fork this repository. - 2. Clone your forked repository to your local machine. - 3. Take any one of the issue from issues list and make a Pull Request. - 4. Write these commands on your terminal- - ``` - git add -A - git commit -m "your name" - git push origin master - ``` - 5. Then create a pull request. - 6. Star the official repository of `10secondsofcode`. - 7. Congratulations!! You have successfully made a pull request. - diff --git a/Ref/Notes.md b/Ref/Notes.md deleted file mode 100644 index 7d34c3c..0000000 --- a/Ref/Notes.md +++ /dev/null @@ -1,2591 +0,0 @@ -## JS Questions - -Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/javascript-questions.md). Pull requests for suggestions and corrections are welcome! - -* [Explain event delegation](#explain-event-delegation) -* [Explain how `this` works in JavaScript](#explain-how-this-works-in-javascript) -* [Explain how prototypal inheritance works](#explain-how-prototypal-inheritance-works) -* [What do you think of AMD vs CommonJS?](#what-do-you-think-of-amd-vs-commonjs) -* [Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?](#explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife) -* [What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?](#whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states) -* [What is a closure, and how/why would you use one?](#what-is-a-closure-and-howwhy-would-you-use-one) -* [Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?](#can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other) -* [What's a typical use case for anonymous functions?](#whats-a-typical-use-case-for-anonymous-functions) -* [How do you organize your code? (module pattern, classical inheritance?)](#how-do-you-organize-your-code-module-pattern-classical-inheritance) -* [What's the difference between host objects and native objects?](#whats-the-difference-between-host-objects-and-native-objects) -* [Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?](#difference-between-function-person-var-person--person-and-var-person--new-person) -* [What's the difference between `.call` and `.apply`?](#whats-the-difference-between-call-and-apply) -* [Explain `Function.prototype.bind`.](#explain-functionprototypebind) -* [When would you use `document.write()`?](#when-would-you-use-documentwrite) -* [What's the difference between feature detection, feature inference, and using the UA string?](#whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string) -* [Explain Ajax in as much detail as possible.](#explain-ajax-in-as-much-detail-as-possible) -* [What are the advantages and disadvantages of using Ajax?](#what-are-the-advantages-and-disadvantages-of-using-ajax) -* [Explain how JSONP works (and how it's not really Ajax).](#explain-how-jsonp-works-and-how-its-not-really-ajax) -* [Have you ever used JavaScript templating? If so, what libraries have you used?](#have-you-ever-used-javascript-templating-if-so-what-libraries-have-you-used) -* [Explain "hoisting".](#explain-hoisting) -* [Describe event bubbling.](#describe-event-bubbling) -* [What's the difference between an "attribute" and a "property"?](#whats-the-difference-between-an-attribute-and-a-property) -* [Why is extending built-in JavaScript objects not a good idea?](#why-is-extending-built-in-javascript-objects-not-a-good-idea) -* [Difference between document `load` event and document `DOMContentLoaded` event?](#difference-between-document-load-event-and-document-domcontentloaded-event) -* [What is the difference between `==` and `===`?](#what-is-the-difference-between--and-) -* [Explain the same-origin policy with regards to JavaScript.](#explain-the-same-origin-policy-with-regards-to-javascript) -* [Make this work: `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`](#make-this-work) -* [Why is it called a Ternary expression, what does the word "Ternary" indicate?](#why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate) -* [What is "use strict";? what are the advantages and disadvantages to using it?](#what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it) -* [Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5](#create-a-for-loop-that-iterates-up-to-100-while-outputting-fizz-at-multiples-of-3-buzz-at-multiples-of-5-and-fizzbuzz-at-multiples-of-3-and-5) -* [Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?](#why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it) -* [Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?](#why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those) -* [Explain what a single page app is and how to make one SEO-friendly.](#explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly) -* [What is the extent of your experience with Promises and/or their polyfills?](#what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills) -* [What are the pros and cons of using Promises instead of callbacks?](#what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks) -* [What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?](#what-are-some-of-the-advantagesdisadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript) -* [What tools and techniques do you use debugging JavaScript code?](#what-tools-and-techniques-do-you-use-for-debugging-javascript-code) -* [What language constructions do you use for iterating over object properties and array items?](#what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items) -* [Explain the difference between mutable and immutable objects.](#explain-the-difference-between-mutable-and-immutable-objects) -* [Explain the difference between synchronous and asynchronous functions.](#explain-the-difference-between-synchronous-and-asynchronous-functions) -* [What is event loop? What is the difference between call stack and task queue?](#what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue) -* [Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}`](#explain-the-differences-on-the-usage-of-foo-between-function-foo--and-var-foo--function-) -* [What are the differences between variables created using `let`, `var` or `const`?](#what-are-the-differences-between-variables-created-using-let-var-or-const) -* [What are the differences between ES6 class and ES5 function constructors?](#what-are-the-differences-between-es6-class-and-es5-function-constructors) -* [Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?](#can-you-offer-a-use-case-for-the-new-arrow--function-syntax-how-does-this-new-syntax-differ-from-other-functions) -* [What advantage is there for using the arrow syntax for a method in a constructor?](#what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor) -* [What is the definition of a higher-order function?](#what-is-the-definition-of-a-higher-order-function) -* [Can you give an example for destructuring an object or an array?](#can-you-give-an-example-for-destructuring-an-object-or-an-array) -* [ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?](#es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example) -* [Can you give an example of a curry function and why this syntax offers an advantage?](#can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage) -* [What are the benefits of using spread syntax and how is it different from rest syntax?](#what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax) -* [How can you share code between files?](#how-can-you-share-code-between-files) -* [Why you might want to create static class members?](#why-you-might-want-to-create-static-class-members) - -### Explain event delegation - -Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are: - -* Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant. -* There is no need to unbind the handler from elements that are removed and to bind the event for new elements. - -###### References - -* https://davidwalsh.name/event-delegate -* https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation - -[[↑] Back to top](#js-questions) - -### Explain how `this` works in JavaScript - -There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of `this` depends on how the function is called. I have read many explanations on `this` online, and I found [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)'s explanation to be the clearest. The following rules are applied: - -1. If the `new` keyword is used when calling the function, `this` inside the function is a brand new object. -2. If `apply`, `call`, or `bind` are used to call/create a function, `this` inside the function is the object that is passed in as the argument. -3. If a function is called as a method, such as `obj.method()` — `this` is the object that the function is a property of. -4. If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, `this` is the global object. In a browser, it is the `window` object. If in strict mode (`'use strict'`), `this` will be `undefined` instead of the global object. -5. If multiple of the above rules apply, the rule that is higher wins and will set the `this` value. -6. If the function is an ES2015 arrow function, it ignores all the rules above and receives the `this` value of its surrounding scope at the time it is created. - -For an in-depth explanation, do check out his [article on Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3). - -###### References - -* https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3 -* https://stackoverflow.com/a/3127440/1751946 - -[[↑] Back to top](#js-questions) - -### Explain how prototypal inheritance works - -This is an extremely common JavaScript interview question. All JavaScript objects have a `prototype` property, that is a reference to another object. When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's `prototype`, and the `prototype`'s `prototype` and so on, until it finds the property defined on one of the `prototype`s or until it reaches the end of the prototype chain. This behavior simulates classical inheritance, but it is really more of [delegation than inheritance](https://davidwalsh.name/javascript-objects). - -###### References - -* https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson -* https://davidwalsh.name/javascript-objects - -[[↑] Back to top](#js-questions) - -### What do you think of AMD vs CommonJS? - -Both are ways to implement a module system, which was not natively present in JavaScript until ES2015 came along. CommonJS is synchronous while AMD (Asynchronous Module Definition) is obviously asynchronous. CommonJS is designed with server-side development in mind while AMD, with its support for asynchronous loading of modules, is more intended for browsers. - -I find AMD syntax to be quite verbose and CommonJS is closer to the style you would write import statements in other languages. Most of the time, I find AMD unnecessary, because if you served all your JavaScript into one concatenated bundle file, you wouldn't benefit from the async loading properties. Also, CommonJS syntax is closer to Node style of writing modules and there is less context-switching overhead when switching between client side and server side JavaScript development. - -I'm glad that with ES2015 modules, that has support for both synchronous and asynchronous loading, we can finally just stick to one approach. Although it hasn't been fully rolled out in browsers and in Node, we can always use transpilers to convert our code. - -###### References - -* https://auth0.com/blog/javascript-module-systems-showdown/ -* https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs - -[[↑] Back to top](#js-questions) - -### Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE? - -IIFE stands for Immediately Invoked Function Expressions. The JavaScript parser reads `function foo(){ }();` as `function foo(){ }` and `();`, where the former is a function declaration and the latter (a pair of brackets) is an attempt at calling a function but there is no name specified, hence it throws `Uncaught SyntaxError: Unexpected token )`. - -Here are two ways to fix it that involves adding more brackets: `(function foo(){ })()` and `(function foo(){ }())`. These functions are not exposed in the global scope and you can even omit its name if you do not need to reference itself within the body. - -You might also use `void` operator: `void function foo(){ }();`. Unfortunately, there is one issue with such approach. The evaluation of given expression is always `undefined`, so if your IIFE function returns anything, you can't use it. An example: - -``` -// Don't add JS syntax to this code block to prevent Prettier from formatting it. -const foo = void function bar() { return 'foo'; }(); - -console.log(foo); // undefined -``` - -###### References - -* http://lucybain.com/blog/2014/immediately-invoked-function-expression/ -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void - -[[↑] Back to top](#js-questions) - -### What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states? - -**Undeclared** variables are created when you assign a value to an identifier that is not previously created using `var`, `let` or `const`. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a `ReferenceError` will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a `try`/`catch` block. - -```js -function foo() { - x = 1; // Throws a ReferenceError in strict mode -} - -foo(); -console.log(x); // 1 -``` - -A variable that is `undefined` is a variable that has been declared, but not assigned a value. It is of type `undefined`. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of `undefined`. To check for it, compare using the strict equality (`===`) operator or `typeof` which will give the `'undefined'` string. Note that you should not be using the abstract equality operator to check, as it will also return `true` if the value is `null`. - -```js -var foo; -console.log(foo); // undefined -console.log(foo === undefined); // true -console.log(typeof foo === 'undefined'); // true - -console.log(foo == null); // true. Wrong, don't use this to check! - -function bar() {} -var baz = bar(); -console.log(baz); // undefined -``` - -A variable that is `null` will have been explicitly assigned to the `null` value. It represents no value and is different from `undefined` in the sense that it has been explicitly assigned. To check for `null,` simply compare using the strict equality operator. Note that like the above, you should not be using the abstract equality operator (`==`) to check, as it will also return `true` if the value is `undefined`. - -```js -var foo = null; -console.log(foo === null); // true -console.log(typeof foo === 'object'); // true - -console.log(foo == undefined); // true. Wrong, don't use this to check! -``` - -As a personal habit, I never leave my variables undeclared or unassigned. I will explicitly assign `null` to them after declaring if I don't intend to use it yet. If you use a linter in your workflow, it will usually also be able to check that you are not referencing undeclared variables. - -###### References - -* https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables -* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined - -[[↑] Back to top](#js-questions) - -### What is a closure, and how/why would you use one? - -A closure is the combination of a function and the lexical environment within which that function was declared. The word "lexical" refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Closures are functions that have access to the outer (enclosing) function's variables—scope chain even after the outer function has returned. - -**Why would you use one?** - -* Data privacy / emulating private methods with closures. Commonly used in the [module pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript). -* [Partial applications or currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x). - -###### References - -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures -* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36 - -[[↑] Back to top](#js-questions) - -### Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other? - -To understand the differences between the two, let's look at what each function does. - -**`forEach`** - -* Iterates through the elements in an array. -* Executes a callback for each element. -* Does not return a value. - -```js -const a = [1, 2, 3]; -const doubled = a.forEach((num, index) => { - // Do something with num and/or index. -}); - -// doubled = undefined -``` - -**`map`** - -* Iterates through the elements in an array. -* "Maps" each element to a new element by calling the function on each element, creating a new array as a result. - -```js -const a = [1, 2, 3]; -const doubled = a.map(num => { - return num * 2; -}); - -// doubled = [2, 4, 6] -``` - -The main difference between `.forEach` and `.map()` is that `.map()` returns a new array. If you need the result, but do not wish to mutate the original array, `.map()` is the clear choice. If you simply need to iterate over an array, `forEach` is a fine choice. - -###### References - -* https://codeburst.io/javascript-map-vs-foreach-f38111822c0f - -[[↑] Back to top](#js-questions) - -### What's a typical use case for anonymous functions? - -They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope. - -```js -(function() { - // Some code here. -})(); -``` - -As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body. - -```js -setTimeout(function() { - console.log('Hello world!'); -}, 1000); -``` - -Arguments to functional programming constructs or Lodash (similar to callbacks). - -```js -const arr = [1, 2, 3]; -const double = arr.map(function(el) { - return el * 2; -}); -console.log(double); // [2, 4, 6] -``` - -###### References - -* https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions -* https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo - -[[↑] Back to top](#js-questions) - -### How do you organize your code? (module pattern, classical inheritance?) - -In the past, I used Backbone for my models which encourages a more OOP approach, creating Backbone models and attaching methods to them. - -The module pattern is still great, but these days, I use React/Redux which utilize a single-directional data flow based on Flux architecture. I would represent my app's models using plain objects and write utility pure functions to manipulate these objects. State is manipulated using actions and reducers like in any other Redux application. - -I avoid using classical inheritance where possible. When and if I do, I stick to [these rules](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4). - -[[↑] Back to top](#js-questions) - -### What's the difference between host objects and native objects? - -Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification, such as `String`, `Math`, `RegExp`, `Object`, `Function`, etc. - -Host objects are provided by the runtime environment (browser or Node), such as `window`, `XMLHTTPRequest`, etc. - -###### References - -* https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects - -[[↑] Back to top](#js-questions) - -### Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`? - -This question is pretty vague. My best guess at its intention is that it is asking about constructors in JavaScript. Technically speaking, `function Person(){}` is just a normal function declaration. The convention is to use PascalCase for functions that are intended to be used as constructors. - -`var person = Person()` invokes the `Person` as a function, and not as a constructor. Invoking as such is a common mistake if it the function is intended to be used as a constructor. Typically, the constructor does not return anything, hence invoking the constructor like a normal function will return `undefined` and that gets assigned to the variable intended as the instance. - -`var person = new Person()` creates an instance of the `Person` object using the `new` operator, which inherits from `Person.prototype`. An alternative would be to use `Object.create`, such as: `Object.create(Person.prototype)`. - -```js -function Person(name) { - this.name = name; -} - -var person = Person('John'); -console.log(person); // undefined -console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined - -var person = new Person('John'); -console.log(person); // Person { name: "John" } -console.log(person.name); // "john" -``` - -###### References - -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new - -[[↑] Back to top](#js-questions) - -### What's the difference between `.call` and `.apply`? - -Both `.call` and `.apply` are used to invoke functions and the first parameter will be used as the value of `this` within the function. However, `.call` takes in comma-separated arguments as the next arguments while `.apply` takes in an array of arguments as the next argument. An easy way to remember this is C for `call` and comma-separated and A for `apply` and an array of arguments. - -```js -function add(a, b) { - return a + b; -} - -console.log(add.call(null, 1, 2)); // 3 -console.log(add.apply(null, [1, 2])); // 3 -``` - -[[↑] Back to top](#js-questions) - -### Explain `Function.prototype.bind`. - -Taken word-for-word from [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind): - -> The `bind()` method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. - -In my experience, it is most useful for binding the value of `this` in methods of classes that you want to pass into other functions. This is frequently done in React components. - -###### References - -* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind - -[[↑] Back to top](#js-questions) - -### When would you use `document.write()`? - -`document.write()` writes a string of text to a document stream opened by `document.open()`. When `document.write()` is executed after the page has loaded, it will call `document.open` which clears the whole document (`` and `` removed!) and replaces the contents with the given parameter value. Hence it is usually considered dangerous and prone to misuse. - -There are some answers online that explain `document.write()` is being used in analytics code or [when you want to include styles that should only work if JavaScript is enabled](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html). It is even being used in HTML5 boilerplate to [load scripts in parallel and preserve execution order](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)! However, I suspect those reasons might be outdated and in the modern day, they can be achieved without using `document.write()`. Please do correct me if I'm wrong about this. - -###### References - -* https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html -* https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag - -[[↑] Back to top](#js-questions) - -### What's the difference between feature detection, feature inference, and using the UA string? - -**Feature Detection** - -Feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. For example: - -```js -if ('geolocation' in navigator) { - // Can use navigator.geolocation -} else { - // Handle lack of feature -} -``` - -[Modernizr](https://modernizr.com/) is a great library to handle feature detection. - -**Feature Inference** - -Feature inference checks for a feature just like feature detection, but uses another function because it assumes it will also exist, e.g.: - -```js -if (document.getElementsByTagName) { - element = document.getElementById(id); -} -``` - -This is not really recommended. Feature detection is more foolproof. - -**UA String** - -This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via `navigator.userAgent`. However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method. - -###### References - -* https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection -* https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th -* https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent - -[[↑] Back to top](#js-questions) - -### Explain Ajax in as much detail as possible. - -Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly substitute use JSON instead of XML, due to the advantages of JSON being native to JavaScript. - -The `XMLHttpRequest` API is frequently used for the asynchronous communication or these days, the `fetch` API. - -###### References - -* https://en.wikipedia.org/wiki/Ajax_(programming) -* https://developer.mozilla.org/en-US/docs/AJAX - -[[↑] Back to top](#js-questions) - -### What are the advantages and disadvantages of using Ajax? - -**Advantages** - -* Better interactivity. New content from the server can be changed dynamically without the need to reload the entire page. -* Reduce connections to the server since scripts and stylesheets only have to be requested once. -* State can be maintained on a page. JavaScript variables and DOM state will persist because the main container page was not reloaded. -* Basically most of the advantages of an SPA. - -**Disadvantages** - -* Dynamic webpages are harder to bookmark. -* Does not work if JavaScript has been disabled in the browser. -* Some webcrawlers do not execute JavaScript and would not see content that has been loaded by JavaScript. -* Basically most of the disadvantages of an SPA. - -[[↑] Back to top](#js-questions) - -### Explain how JSONP works (and how it's not really Ajax). - -JSONP (JSON with Padding) is a method commonly used to bypass the cross-domain policies in web browsers because Ajax requests from the current page to a cross-origin domain is not allowed. - -JSONP works by making a request to a cross-origin domain via a ` - - -``` - -```js -// File loaded from https://example.com?callback=printData -printData({ name: 'Yang Shun' }); -``` - -The client has to have the `printData` function in its global scope and the function will be executed by the client when the response from the cross-origin domain is received. - -JSONP can be unsafe and has some security implications. As JSONP is really JavaScript, it can do everything else JavaScript can do, so you need to trust the provider of the JSONP data. - -These days, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) is the recommended approach and JSONP is seen as a hack. - -###### References - -* https://stackoverflow.com/a/2067584/1751946 - -[[↑] Back to top](#js-questions) - -### Have you ever used JavaScript templating? If so, what libraries have you used? - -Yes. Handlebars, Underscore, Lodash, AngularJS, and JSX. I disliked templating in AngularJS because it made heavy use of strings in the directives and typos would go uncaught. JSX is my new favorite as it is closer to JavaScript and there is barely any syntax to learn. Nowadays, you can even use ES2015 template string literals as a quick way for creating templates without relying on third-party code. - -```js -const template = `
My name is: ${name}
`; -``` - -However, do be aware of a potential XSS in the above approach as the contents are not escaped for you, unlike in templating libraries. - -[[↑] Back to top](#js-questions) - -### Explain "hoisting". - -Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the `var` keyword will have their declaration "moved" up to the top of the current scope, which we refer to as hoisting. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is. - -Note that the declaration is not actually moved - the JavaScript engine parses the declarations during compilation and becomes aware of declarations and their scopes. It is just easier to understand this behavior by visualizing the declarations as being hoisted to the top of their scope. Let's explain with a few examples. - -```js -// var declarations are hoisted. -console.log(foo); // undefined -var foo = 1; -console.log(foo); // 1 - -// let/const declarations are NOT hoisted. -console.log(bar); // ReferenceError: bar is not defined -let bar = 2; -console.log(bar); // 2 -``` - -Function declarations have the body hoisted while the function expressions (written in the form of variable declarations) only has the variable declaration hoisted. - -```js -// Function Declaration -console.log(foo); // [Function: foo] -foo(); // 'FOOOOO' -function foo() { - console.log('FOOOOO'); -} -console.log(foo); // [Function: foo] - -// Function Expression -console.log(bar); // undefined -bar(); // Uncaught TypeError: bar is not a function -var bar = function() { - console.log('BARRRR'); -}; -console.log(bar); // [Function: bar] -``` - -[[↑] Back to top](#js-questions) - -### Describe event bubbling. - -When an event triggers on a DOM element, it will attempt to handle the event if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. This bubbling occurs up the element's ancestors all the way to the `document`. Event bubbling is the mechanism behind event delegation. - -[[↑] Back to top](#js-questions) - -### What's the difference between an "attribute" and a "property"? - -Attributes are defined on the HTML markup but properties are defined on the DOM. To illustrate the difference, imagine we have this text field in our HTML: ``. - -```js -const input = document.querySelector('input'); -console.log(input.getAttribute('value')); // Hello -console.log(input.value); // Hello -``` - -But after you change the value of the text field by adding "World!" to it, this becomes: - -```js -console.log(input.getAttribute('value')); // Hello -console.log(input.value); // Hello World! -``` - -###### References - -* https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html - -[[↑] Back to top](#js-questions) - -### Why is extending built-in JavaScript objects not a good idea? - -Extending a built-in/native JavaScript object means adding properties/functions to its `prototype`. While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the `Array.prototype` by adding the same `contains` method, the implementations will overwrite each other and your code will break if the behavior of these two methods is not the same. - -The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser. - -###### References - -* http://lucybain.com/blog/2014/js-extending-built-in-objects/ - -[[↑] Back to top](#js-questions) - -### Difference between document `load` event and document `DOMContentLoaded` event? - -The `DOMContentLoaded` event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. - -`window`'s `load` event is only fired after the DOM and all dependent resources and assets have loaded. - -###### References - -* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded -* https://developer.mozilla.org/en-US/docs/Web/Events/load - -[[↑] Back to top](#js-questions) - -### What is the difference between `==` and `===`? - -`==` is the abstract equality operator while `===` is the strict equality operator. The `==` operator will compare for equality after doing any necessary type conversions. The `===` operator will not do type conversion, so if two values are not the same type `===` will simply return `false`. When using `==`, funky things can happen, such as: - -```js -1 == '1'; // true -1 == [1]; // true -1 == true; // true -0 == ''; // true -0 == '0'; // true -0 == false; // true -``` - -My advice is never to use the `==` operator, except for convenience when comparing against `null` or `undefined`, where `a == null` will return `true` if `a` is `null` or `undefined`. - -```js -var a = null; -console.log(a == null); // true -console.log(a == undefined); // true -``` - -###### References - -* https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons - -[[↑] Back to top](#js-questions) - -### Explain the same-origin policy with regards to JavaScript. - -The same-origin policy prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model. - -###### References - -* https://en.wikipedia.org/wiki/Same-origin_policy - -[[↑] Back to top](#js-questions) - -### Make this work: - -```js -duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5] -``` - -```js -function duplicate(arr) { - return arr.concat(arr); -} - -duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5] -``` - -[[↑] Back to top](#js-questions) - -### Why is it called a Ternary expression, what does the word "Ternary" indicate? - -"Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list. - -###### References - -* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator - -[[↑] Back to top](#js-questions) - -### What is `"use strict";`? What are the advantages and disadvantages to using it? - -'use strict' is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript. - -Advantages: - -* Makes it impossible to accidentally create global variables. -* Makes assignments which would otherwise silently fail to throw an exception. -* Makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect). -* Requires that function parameter names be unique. -* `this` is undefined in the global context. -* It catches some common coding bloopers, throwing exceptions. -* It disables features that are confusing or poorly thought out. - -Disadvantages: - -* Many missing features that some developers might be used to. -* No more access to `function.caller` and `function.arguments`. -* Concatenation of scripts written in different strict modes might cause issues. - -Overall, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode. - -###### References - -* http://2ality.com/2011/10/strict-mode-hatred.html -* http://lucybain.com/blog/2014/js-use-strict/ - -[[↑] Back to top](#js-questions) - -### Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, **"buzz"** at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5`. - -Check out this version of FizzBuzz by [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724). - -```js -for (let i = 1; i <= 100; i++) { - let f = i % 3 == 0, - b = i % 5 == 0; - console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i); -} -``` - -I would not advise you to write the above during interviews though. Just stick with the long but clear approach. For more wacky versions of FizzBuzz, check out the reference link below. - -###### References - -* https://gist.github.com/jaysonrowe/1592432 - -[[↑] Back to top](#js-questions) - -### Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it? - -Every script has access to the global scope, and if everyone uses the global namespace to define their variables, collisions will likely occur. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace. - -[[↑] Back to top](#js-questions) - -### Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those? - -The `load` event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading. - -The DOM event `DOMContentLoaded` will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing. - -TODO. - -###### References - -* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload - -[[↑] Back to top](#js-questions) - -### Explain what a single page app is and how to make one SEO-friendly. - -The below is taken from the awesome [Grab Front End Guide](https://github.com/grab/front-end-guide), which coincidentally, is written by me! - -Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the two terms, web apps tend to be highly interactive and dynamic, allowing the user to perform actions and receive a response to their action. Traditionally, the browser receives HTML from the server and renders it. When the user navigates to another URL, a full-page refresh is required and the server sends fresh new HTML to the new page. This is called server-side rendering. - -However, in modern SPAs, client-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). New data required for the new page, usually in JSON format, is retrieved by the browser via [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work. - -The benefits: - -* The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes. -* Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load. -* Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. You can also modify the technology stack on the client and server independently, as long as the API contract is not broken. - -The downsides: - -* Heavier initial page load due to the loading of framework, app code, and assets required for multiple pages. -* There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there. -* SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as [Prerender](https://prerender.io/) to "render your javascript in a browser, save the static HTML, and return that to the crawlers". - -###### References - -* https://github.com/grab/front-end-guide#single-page-apps-spas -* http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages -* http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/ -* https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52 - -[[↑] Back to top](#js-questions) - -### What is the extent of your experience with Promises and/or their polyfills? - -Possess working knowledge of it. A promise is an object that may produce a single value sometime in the future: either a resolved value or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection. - -Some common polyfills are `$.deferred`, Q and Bluebird but not all of them comply with the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days. - -###### References - -* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261 - -[[↑] Back to top](#js-questions) - -### What are the pros and cons of using Promises instead of callbacks? - -**Pros** - -* Avoid callback hell which can be unreadable. -* Makes it easy to write sequential asynchronous code that is readable with `.then()`. -* Makes it easy to write parallel asynchronous code with `Promise.all()`. - -**Cons** - -* Slightly more complex code (debatable). -* In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it. - -[[↑] Back to top](#js-questions) - -### What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript? - -Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript, and TypeScript. - -Advantages: - -* Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns. -* Enables you to write shorter code, by providing some syntactic sugar on top of JavaScript, which I think ES5 lacks, but ES2015 is awesome. -* Static types are awesome (in the case of TypeScript) for large projects that need to be maintained over time. - -Disadvantages: - -* Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers. -* Debugging can be a pain if your source maps do not map nicely to your pre-compiled source. -* Most developers are not familiar with these languages and will need to learn it. There's a ramp up cost involved for your team if you use it for your projects. -* Smaller community (depends on the language), which means resources, tutorials, libraries, and tooling would be harder to find. -* IDE/editor support might be lacking. -* These languages will always be behind the latest JavaScript standard. -* Developers should be cognizant of what their code is being compiled to — because that is what would actually be running, and that is what matters in the end. - -Practically, ES2015 has vastly improved JavaScript and made it much nicer to write. I don't really see the need for CoffeeScript these days. - -###### References - -* https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript - -[[↑] Back to top](#js-questions) - -### What tools and techniques do you use for debugging JavaScript code? - -* React and Redux - * [React Devtools](https://github.com/facebook/react-devtools) - * [Redux Devtools](https://github.com/gaearon/redux-devtools) -* Vue - * [Vue Devtools](https://github.com/vuejs/vue-devtools) -* JavaScript - * [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d) - * `debugger` statement - * Good old `console.log` debugging - -###### References - -* https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d -* https://raygun.com/blog/javascript-debugging/ - -[[↑] Back to top](#js-questions) - -### What language constructions do you use for iterating over object properties and array items? - -For objects: - -* `for` loops - `for (var property in obj) { console.log(property); }`. However, this will also iterate through its inherited properties, and you will add an `obj.hasOwnProperty(property)` check before using it. -* `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. `Object.keys()` is a static method that will lists all enumerable properties of the object that you pass it. -* `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()` is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it. - -For arrays: - -* `for` loops - `for (var i = 0; i < arr.length; i++)`. The common pitfall here is that `var` is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces `let` which has block scope and it is recommended to use that instead. So this becomes: `for (let i = 0; i < arr.length; i++)`. -* `forEach` - `arr.forEach(function (el, index) { ... })`. This construct can be more convenient at times because you do not have to use the `index` if all you need is the array elements. There are also the `every` and `some` methods which will allow you to terminate the iteration early. - -Most of the time, I would prefer the `.forEach` method, but it really depends on what you are trying to do. `for` loops allow more flexibility, such as prematurely terminate the loop using `break` or incrementing the iterator more than once per loop. - -[[↑] Back to top](#js-questions) - -### Explain the difference between mutable and immutable objects. - -* What is an example of an immutable object in JavaScript? -* What are the pros and cons of immutability? -* How can you achieve immutability in your own code? - -TODO - -[[↑] Back to top](#js-questions) - -### Explain the difference between synchronous and asynchronous functions. - -Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case, the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time. - -Asynchronous functions usually accept a callback as a parameter and execution continue on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze). - -[[↑] Back to top](#js-questions) - -### What is event loop? What is the difference between call stack and task queue? - -The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed. - -If you haven't already checked out Philip Robert's [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html), you should. It is one of the most viewed videos on JavaScript. - -###### References - -* https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html -* http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/ - -[[↑] Back to top](#js-questions) - -### Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` - -The former is a function declaration while the latter is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as variables). For more explanation on hoisting, refer to the question above on hoisting. If you try to invoke a function expression before it is defined, you will get an `Uncaught TypeError: XXX is not a function` error. - -**Function Declaration** - -```js -foo(); // 'FOOOOO' -function foo() { - console.log('FOOOOO'); -} -``` - -**Function Expression** - -```js -foo(); // Uncaught TypeError: foo is not a function -var foo = function() { - console.log('FOOOOO'); -}; -``` - -###### References - -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function - -[[↑] Back to top](#js-questions) - -### What are the differences between variables created using `let`, `var` or `const`? - -Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are _block scoped_, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop). - -```js -function foo() { - // All variables are accessible within functions. - var bar = 'bar'; - let baz = 'baz'; - const qux = 'qux'; - - console.log(bar); // bar - console.log(baz); // baz - console.log(qux); // qux -} - -console.log(bar); // ReferenceError: bar is not defined -console.log(baz); // ReferenceError: baz is not defined -console.log(qux); // ReferenceError: qux is not defined -``` - -```js -if (true) { - var bar = 'bar'; - let baz = 'baz'; - const qux = 'qux'; -} - -// var declared variables are accessible anywhere in the function scope. -console.log(bar); // bar -// let and const defined variables are not accessible outside of the block they were defined in. -console.log(baz); // ReferenceError: baz is not defined -console.log(qux); // ReferenceError: qux is not defined -``` - -`var` allows variables to be hoisted, meaning they can be referenced in code before they are declared. `let` and `const` will not allow this, instead throwing an error. - -```js -console.log(foo); // undefined - -var foo = 'foo'; - -console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization - -let baz = 'baz'; - -console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization - -const bar = 'bar'; -``` - -Redeclaring a variable with `var` will not throw an error, but 'let' and 'const' will. - -```js -var foo = 'foo'; -var foo = 'bar'; -console.log(foo); // "bar" - -let baz = 'baz'; -let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared -``` - -`let` and `const` differ in that `let` allows reassigning the variable's value while `const` does not. - -```js -// This is fine. -let foo = 'foo'; -foo = 'bar'; - -// This causes an exception. -const baz = 'baz'; -baz = 'qux'; -``` - -###### References - -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const - -[[↑] Back to top](#js-questions) - -### What are the differences between ES6 class and ES5 function constructors? - -Let's first look at example of each: - -```js -// ES5 Function Constructor -function Person(name) { - this.name = name; -} - -// ES6 Class -class Person { - constructor(name) { - this.name = name; - } -} -``` - -For simple constructors, they look pretty similar. - -The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do in addition to the above. - -```js -// ES5 Function Constructor -function Student(name, studentId) { - // Call constructor of superclass to initialize superclass-derived members. - Person.call(this, name); - - // Initialize subclass's own members. - this.studentId = studentId; -} - -Student.prototype = Object.create(Person.prototype); -Student.prototype.constructor = Student; - -// ES6 Class -class Student extends Person { - constructor(name, studentId) { - super(name); - this.studentId = studentId; - } -} -``` - -It's much more verbose to use inheritance in ES5 and the ES6 version is easier to understand and remember. - -###### References - -* https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance -* https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5 - -[[↑] Back to top](#js-questions) - -### Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions? - -TODO - -[[↑] Back to top](#js-questions) - -### What advantage is there for using the arrow syntax for a method in a constructor? - -TODO - -[[↑] Back to top](#js-questions) - -### What is the definition of a higher-order function? - -A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `map`, which takes an array and a function as arguments. `map` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `forEach`, `filter`, and `reduce`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Function.prototype.bind` is one such example in JavaScript. - -**Map** - -Let say we have an array of names which we need to transform each string to uppercase. - -```js -const names = ['irish', 'daisy', 'anna']; -``` - -The imperative way will be as such: - -```js -const transformNamesToUppercase = function(names) { - const results = []; - for (let i = 0; i < names.length; i++) { - results.push(names[i].toUpperCase()); - } - return results; -}; -transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA'] -``` - -Use `.map(transformerFn)` makes the code shorter and more declarative. - -```js -const transformNamesToUppercase = function(names) { - return names.map(name => name.toUpperCase()); -}; -transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA'] -``` - -###### References - -* https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99 -* https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a -* https://eloquentjavascript.net/05_higher_order.html - -[[↑] Back to top](#js-questions) - -### Can you give an example for destructuring an object or an array? - -Destructuring is an expression available in ES6 which enables a succinct and convenient way to extract values of Objects or Arrays and place them into distinct variables. - -**Array destructuring** - -```js -// Variable assignment. -const foo = ['one', 'two', 'three']; - -const [one, two, three] = foo; -console.log(one); // "one" -console.log(two); // "two" -console.log(three); // "three" -``` - -```js -// Swapping variables -let a = 1; -let b = 3; - -[a, b] = [b, a]; -console.log(a); // 3 -console.log(b); // 1 -``` - -**Object destructuring** - -```js -// Variable assignment. -const o = { p: 42, q: true }; -const { p, q } = o; - -console.log(p); // 42 -console.log(q); // true -``` - -###### References - -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment -* https://ponyfoo.com/articles/es6-destructuring-in-depth - -[[↑] Back to top](#js-questions) - -### ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example? - -TODO - -[[↑] Back to top](#js-questions) - -### Can you give an example of a curry function and why this syntax offers an advantage? - -Currying is a pattern where a function with more than one parameter is broken into multiple functions that, when called in series, will accumulate all of the required parameters one at a time. This technique can be useful for making code written in a functional style easier to read and compose. It's important to note that for a function to be curried, it needs to start out as one function, then broken out into a sequence of functions that each accepts one parameter. - -```js -function curry(fn) { - if (fn.length === 0) { - return fn; - } - - function _curried(depth, args) { - return function(newArgument) { - if (depth - 1 === 0) { - return fn(...args, newArgument); - } - return _curried(depth - 1, [...args, newArgument]); - }; - } - - return _curried(fn.length, []); -} - -function add(a, b) { - return a + b; -} - -var curriedAdd = curry(add); -var addFive = curriedAdd(5); - -var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10] -``` - -###### References - -* https://hackernoon.com/currying-in-js-d9ddc64f162e - -[[↑] Back to top](#js-questions) - -### What are the benefits of using spread syntax and how is it different from rest syntax? - -ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and rx.js projects. - -```js -function putDookieInAnyArray(arr) { - return [...arr, 'dookie']; -} - -const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"] - -const person = { - name: 'Todd', - age: 29, -}; - -const copyOfTodd = { ...person }; -``` - -ES6's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments. - -```js -function addFiveToABunchOfNumbers(...numbers) { - return numbers.map(x => x + 5); -} - -const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15] - -const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4] - -const { e, f, ...others } = { - e: 1, - f: 2, - g: 3, - h: 4, -}; // e: 1, f: 2, others: { g: 3, h: 4 } -``` - -###### References - -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment - -[[↑] Back to top](#js-questions) - -### How can you share code between files? - -This depends on the JavaScript environment. - -On the client (browser environment), as long as the variables/functions are declared in the global scope (`window`), all scripts can refer to them. Alternatively, adopt the Asynchronous Module Definition (AMD) via RequireJS for a more modular approach. - -On the server (Node.js), the common way has been to use CommonJS. Each file is treated as a module and it can export variables and functions by attaching them to the `module.exports` object. - -ES2015 defines a module syntax which aims to replace both AMD and CommonJS. This will eventually be supported in both browser and Node environments. - -[[↑] Back to top](#js-questions) - -###### References - -* http://requirejs.org/docs/whyamd.html -* https://nodejs.org/docs/latest/api/modules.html -* http://2ality.com/2014/09/es6-modules-final.html - -### Why you might want to create static class members? - -Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance. - -###### References - -* https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods - -[[↑] Back to top](#js-questions) - -### Other Answers - -* http://flowerszhong.github.io/2013/11/20/javascript-questions.html -========================================================================================================= -## Topics Based - -#spread-vs-rest-operators - -Rest parameter: collects all remaining elements into an array. -When using rest arguments, you are collapsing all remaining arguments of a function into one array: - -var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5] -Here ...m is a collector, it collects the rest of the parameters. Internally when we write: - -var [c, ...m] = [1,2,3,4,5]; JavaScript does following - -var c = 1, - m = [2, 3, 4, 5]; - -function add(x, y) { - return x + y; -} - -add(1, 2, 3, 4, 5) // returns 3 - -function add(...args) { - let result = 0; - - for (let arg of args) result += arg; - - return result -} - -add(1) // returns 1 -add(1,2) // returns 3 -add(1, 2, 3, 4, 5) // returns 15 - -function xyz(x, y, ...z) { - console.log(x, ' ', y); // hey hello - - console.log(z); // ["wassup", "goodmorning", "hi", "howdy"] - console.log(z[0]); // wassup - console.log(z.length); // 4 -} - -xyz("hey", "hello", "wassup", "goodmorning", "hi", "howdy") - -Before rest parameters existed, to get all the arguments in a function we used arguments which is an array-likeobject. - -function someFunction() { - return arguments; -} - -someFunction("joykare", 100, false); - -someFunction returns the arguments and their indexes, [Arguments] { '0': 'joykare', '1': 100, '2': false }. - -The downside of using the arguments keyword is that, it returns an array-like object; this means you essentially cannot perform any array-methods like; Array.filer, Array.map. Another pitfall, is that we cannot use arguments in arrow functions. - - -#Spread operator: allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements. - -The spread operator allows us to expand elements. - -you are expanding a single variable into more: - -var params = [ "hello", true, 7 ]; -var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7] -Here, ...params spreads so as to assing all of its elements to other - -Internally javaScript does following - -var other = [1, 2].concat(params); - -const arr = ["Joy", "Wangari", "Warugu"]; -const newArr = ["joykare", ...arr]; - -const myNames = [...arr, "joykare"]; - -We can use the spread operator to copy an array. - -const arr = [1, 2, 3]; -const arr2 = [...arr]; - -## Explain how prototypal inheritance works -This is an extremely common JavaScript interview question. All JavaScript objects have a prototype property, that is a reference to another object. When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's prototype, and the prototype's prototype and so on, until it finds the property defined on one of the prototypes or until it reaches the end of the prototype chain. This behavior simulates classical inheritance, but it is really more of delegation than inheritance. - -#Javascripts: - -var - The scope of a variable declared with the keyword var is its current execution context. -Let - let are block scoped and not function scoped. - -#Hoisting functions - -Function declarations - -hoisted(); // Output: "This function has been hoisted." - -function hoisted() { - console.log('This function has been hoisted.'); -}; - -Function expressions - -Function expressions, however are not hoisted. - -expression(); // Ouput: TypeError: expression is not a function - -var expression = function hoisting() { - console.log('Will this work?'); -}; - - -https://scotch.io/tutorials/understanding-hoisting-in-javascript - -async / await -promises -callbacks - -#Async/await - -Async/await is a new way to write asynchronous code. Previous options for asynchronous code are callbacks and promises. -Async/await is actually built on top of promises. It cannot be used with plain callbacks or node callbacks. -Async/await is, like promises, non blocking. -Async/await makes asynchronous code look and behave a little more like synchronous code. This is where all its power lies. - -const makeRequest = () => - getJSON() - .then(data => { - console.log(data) - return "done" - }) - -makeRequest() - -const makeRequest = async () => { - console.log(await getJSON()) - return "done" -} - -makeRequest() - -#closures - -A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: - - it has access to its own scope (variables defined between its curly brackets). - - it has access to the outer function’s variables. - - it has access to the global variables. - -Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. - -Inner function can access variables and parameters of an outer function. -It is useful in hiding implementation detail in JavaScript. - -function showName (firstName, lastName) { -var nameIntro = "Your name is "; - // this inner function has access to the outer function's variables, including the parameter -function makeFullName () { -return nameIntro + firstName + " " + lastName; -} - -return makeFullName (); -} - -showName ("Michael", "Jackson"); // Your name is Michael Jackson - -function OuterFunction() { - - var outerVariable = 100; - - function InnerFunction() { - alert(outerVariable); - } - - return InnerFunction; -} -var innerFunc = OuterFunction(); - -innerFunc(); // 100 - - -function Counter() { - var counter = 0; - - function IncreaseCounter() { - return counter += 1; - }; - - return IncreaseCounter; -} - -var counter = Counter(); -alert(counter()); // 1 -alert(counter()); // 2 -alert(counter()); // 3 -alert(counter()); // 4 - -In the above example, return InnerFunction; returns InnerFunction from OuterFunction when you call OuterFunction(). A variable innerFunc reference the InnerFunction() only, not the OuterFunction(). So now, when you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure. - -#IIFE - -IIFE is a function expression that automatically invokes after completion of the definition. -The parenthesis () plays important role in IIFE pattern. -use () operator to call this anonymous function immediately after completion of its definition. -(function () { - //write your js code here -})(); - -Adcvantages: - -Do not create unnecessary global variables and functions -Functions and variables defined in IIFE do not conflict with other functions & variables even if they have same name. -Organize JavaScript code. -Make JavaScript code maintainable. - -#this(): - -The following four rules applies to this in order to know which object is referred by this keyword. - -Global Scope -Object's Method -call() or apply() method -bind() method - -# Arrow Functions -Arrow function was introduced in ES6 using a new syntax for declaring functions called the arrow syntax. This new syntax uses less verbose syntax. - -Arrow function can easily identified by the arrow symbol ‘ => ’ from where it gets its name. As part the syntax and rules for writing arrow functions is that the parameters come before the arrow element and the main body of the function comes after. - -Arrow functions are always anonymous, and you need to assign them to a variable, so you can refer to them. - -Advantage - -There are numerous advantages of using arrow functions over other function declaration methods: - --They are much less verbose --Do not need to use parentheses for single parameters --The body of the function does not need to be placed inside a block if it is only one line --If the return statement is the only statement in the body of the function, the return keyword is not required --They do not bind their own value of this to the function - -Example: - -const square = x => x*x; -In this example the ‘x’ did not need to be in parentheses because is only one parameter; multiple parameters needs to go inside parentheses. - -Example with two parameters: - -const add = (x,y) => x = y; -But if the function does not require any parameters you can use empty parameters before the arrow symbol: - -const hello = ( ) => alert(‘Hello World!’); -In all these examples the function fits onto one line, so there is no need to put them inside a block. But for longer functions you will require to use curly brackets to define the body of the function and the return keywork at the end. - -const tax = (salary) => { -const taxable = salary – 5000; -const lowerRate = 0.25 * taxable; -taxable = taxable -15000; -const higherRate = 0.4 * taxable; -return lowerRate + higherRate; -} -As you can see the benefit of using arrow functions is lost when using it in a longer function. Arrow functions are a better fit for short and anonymous functions. - -# 1. Can you name two programming paradigms important for JavaScript app developers? -JavaScript is a multi-paradigm language, supporting imperative/procedural programming along with OOP (Object-Oriented Programming) and functional programming. JavaScript supports OOP with prototypal inheritance. - -Good to hear: - -Prototypal inheritance (also: prototypes, OLOO). -Functional programming (also: closures, first class functions, lambdas). -Red flags: - -No clue what a paradigm is, no mention of prototypal oo or functional programming. -Learn More: - -The Two Pillars of JavaScript Part 1 — Prototypal OO. -The Two Pillars of JavaScript Part 2 — Functional Programming. - -# 2. What is functional programming? -Functional programming produces programs by composing mathematical functions and avoids shared state & mutable data. Lisp (specified in 1958) was among the first languages to support functional programming, and was heavily inspired by lambda calculus. Lisp and many Lisp family languages are still in common use today. - -Functional programming is an essential concept in JavaScript (one of the two pillars of JavaScript). Several common functional utilities were added to JavaScript in ES5. - -Good to hear: - -Pure functions / function purity. -Avoid side-effects. -Simple function composition. -Examples of functional languages: Lisp, ML, Haskell, Erlang, Clojure, Elm, F Sharp, OCaml, etc… -Mention of features that support FP: first-class functions, higher order functions, functions as arguments/values. -Red flags: - -No mention of pure functions / avoiding side-effects. -Unable to provide examples of functional programming languages. -Unable to identify the features of JavaScript that enable FP. -Learn More: - -The Two Pillars of JavaScript Part 2. -The Dao of Immutability. -Composing Software. -The Haskell School of Music. - -# 3. What is the difference between classical inheritance and prototypal inheritance? -Class Inheritance: instances inherit from classes (like a blueprint — a description of the class), and create sub-class relationships: hierarchical class taxonomies. Instances are typically instantiated via constructor functions with the `new` keyword. Class inheritance may or may not use the `class` keyword from ES6. - -Prototypal Inheritance: instances inherit directly from other objects. Instances are typically instantiated via factory functions or `Object.create()`. Instances may be composed from many different objects, allowing for easy selective inheritance. - -In JavaScript, prototypal inheritance is simpler & -more flexible than class inheritance. -Good to hear: - -Classes: create tight coupling or hierarchies/taxonomies. -Prototypes: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition. -Red Flags: - -No preference for prototypal inheritance & composition over class inheritance. -Learn More: - -The Two Pillars of JavaScript Part 1 — Prototypal OO. -Common Misconceptions About Inheritance in JavaScript. - -#4. What are the pros and cons of functional programming vs object-oriented programming? -OOP Pros: It’s easy to understand the basic concept of objects and easy to interpret the meaning of method calls. OOP tends to use an imperative style rather than a declarative style, which reads like a straight-forward set of instructions for the computer to follow. - -OOP Cons: OOP Typically depends on shared state. Objects and behaviors are typically tacked together on the same entity, which may be accessed at random by any number of functions with non-deterministic order, which may lead to undesirable behavior such as race conditions. - -FP Pros: Using the functional paradigm, programmers avoid any shared state or side-effects, which eliminates bugs caused by multiple functions competing for the same resources. With features such as the availability of point-free style (aka tacit programming), functions tend to be radically simplified and easily recomposed for more generally reusable code compared to OOP. - -FP also tends to favor declarative and denotational styles, which do not spell out step-by-step instructions for operations, but instead concentrate on what to do, letting the underlying functions take care of the how. This leaves tremendous latitude for refactoring and performance optimization, even allowing you to replace entire algorithms with more efficient ones with very little code change. (e.g., memoize, or use lazy evaluation in place of eager evaluation.) - -Computation that makes use of pure functions is also easy to scale across multiple processors, or across distributed computing clusters without fear of threading resource conflicts, race conditions, etc… - -FP Cons: Over exploitation of FP features such as point-free style and large compositions can potentially reduce readability because the resulting code is often more abstractly specified, more terse, and less concrete. - -More people are familiar with OO and imperative programming than functional programming, so even common idioms in functional programming can be confusing to new team members. - -FP has a much steeper learning curve than OOP because the broad popularity of OOP has allowed the language and learning materials of OOP to become more conversational, whereas the language of FP tends to be much more academic and formal. FP concepts are frequently written about using idioms and notations from lambda calculus, algebras, and category theory, all of which requires a prior knowledge foundation in those domains to be understood. - -Good to hear: - -Mentions of trouble with shared state, different things competing for the same resources, etc… -Awareness of FP’s capability to radically simplify many applications. -Awareness of the differences in learning curves. -Articulation of side-effects and how they impact program maintainability. -Awareness that a highly functional codebase can have a steep learning curve. -Awareness that a highly OOP codebase can be extremely resistant to change and very brittle compared to an equivalent FP codebase. -Awareness that immutability gives rise to an extremely accessible and malleable program state history, allowing for the easy addition of features like infinite undo/redo, rewind/replay, time-travel debugging, and so on. Immutability can be achieved in either paradigm, but a proliferation of shared stateful objects complicates the implementation in OOP. -Red flags: - -Unable to list disadvantages of one style or another — Anybody experienced with either style should have bumped up against some of the limitations. -Learn More: - -The Two Pillars of JavaScript Part 1 — Prototypal OO. -The Two Pillars of JavaScript Part 2 — Functional Programming. - -# 5. When is classical inheritance an appropriate choice? -The answer is never, or almost never. Certainly never more than one level. Multi-level class hierarchies are an anti-pattern. I’ve been issuing this challenge for years, and the only answers I’ve ever heard fall into one of several common misconceptions. More frequently, the challenge is met with silence. - -“If a feature is sometimes useful -and sometimes dangerous -and if there is a better option -then always use the better option.” -~ Douglas Crockford -Good to hear: - -Rarely, almost never, or never. -A single level is sometimes OK, from a framework base-class such as React.Component. -“Favor object composition over class inheritance.” -Learn More: - -The Two Pillars of JavaScript Part 1 — Prototypal OO. -JS Objects — Inherited a Mess. - -# 6. When is prototypal inheritance an appropriate choice? -There is more than one type of prototypal inheritance: - -Delegation (i.e., the prototype chain). -Concatenative (i.e. mixins, `Object.assign()`). -Functional (Not to be confused with functional programming. A function used to create a closure for private state/encapsulation). -Each type of prototypal inheritance has its own set of use-cases, but all of them are equally useful in their ability to enable composition, which creates has-a or uses-a or can-do relationships as opposed to the is-a relationship created with class inheritance. - -Good to hear: - -In situations where modules or functional programming don’t provide an obvious solution. -When you need to compose objects from multiple sources. -Any time you need inheritance. -Red flags: - -No knowledge of when to use prototypes. -No awareness of mixins or `Object.assign()`. -Learn More: - -“Programming JavaScript Applications”: Prototypes section. - -# 7. What does “favor object composition over class inheritance” mean? -This is a quote from “Design Patterns: Elements of Reusable Object-Oriented Software”. It means that code reuse should be achieved by assembling smaller units of functionality into new objects instead of inheriting from classes and creating object taxonomies. - -In other words, use can-do, has-a, or uses-a relationships instead of is-a relationships. - -Good to hear: - -Avoid class hierarchies. -Avoid brittle base class problem. -Avoid tight coupling. -Avoid rigid taxonomy (forced is-a relationships that are eventually wrong for new use cases). -Avoid the gorilla banana problem (“what you wanted was a banana, what you got was a gorilla holding the banana, and the entire jungle”). -Make code more flexible. -Red Flags: - -Fail to mention any of the problems above. -Fail to articulate the difference between composition and class inheritance, or the advantages of composition. -Learn More: - - -Introducing -the Stamp Specification - -Move Over, `class`: -Composable Factory Functions Are Here -medium.com - -# 8. What are two-way data binding and one-way data flow, and how are they different? -Two way data binding means that UI fields are bound to model data dynamically such that when a UI field changes, the model data changes with it and vice-versa. - -One way data flow means that the model is the single source of truth. Changes in the UI trigger messages that signal user intent to the model (or “store” in React). Only the model has the access to change the app’s state. The effect is that data always flows in a single direction, which makes it easier to understand. - -One way data flows are deterministic, whereas two-way binding can cause side-effects which are harder to follow and understand. - -Good to hear: - -React is the new canonical example of one-way data flow, so mentions of React are a good signal. Cycle.js is another popular implementation of uni-directional data flow. -Angular is a popular framework which uses two-way binding. -Red flags: - -No understanding of what either one means. Unable to articulate the difference. -Learn more: - - -# 9. What are the pros and cons of monolithic vs microservice architectures? -A monolithic architecture means that your app is written as one cohesive unit of code whose components are designed to work together, sharing the same memory space and resources. - -A microservice architecture means that your app is made up of lots of smaller, independent applications capable of running in their own memory space and scaling independently from each other across potentially many separate machines. - -Monolithic Pros: The major advantage of the monolithic architecture is that most apps typically have a large number of cross-cutting concerns, such as logging, rate limiting, and security features such audit trails and DOS protection. - -When everything is running through the same app, it’s easy to hook up components to those cross-cutting concerns. - -There can also be performance advantages, since shared-memory access is faster than inter-process communication (IPC). - -Monolithic cons: Monolithic app services tend to get tightly coupled and entangled as the application evolves, making it difficult to isolate services for purposes such as independent scaling or code maintainability. - -Monolithic architectures are also much harder to understand, because there may be dependencies, side-effects, and magic which are not obvious when you’re looking at a particular service or controller. - -Microservice pros: Microservice architectures are typically better organized, since each microservice has a very specific job, and is not concerned with the jobs of other components. Decoupled services are also easier to recompose and reconfigure to serve the purposes of different apps (for example, serving both the web clients and public API). - -They can also have performance advantages depending on how they’re organized because it’s possible to isolate hot services and scale them independent of the rest of the app. - -Microservice cons: As you’re building a new microservice architecture, you’re likely to discover lots of cross-cutting concerns that you did not anticipate at design time. A monolithic app could establish shared magic helpers or middleware to handle such cross-cutting concerns without much effort. - -In a microservice architecture, you’ll either need to incur the overhead of separate modules for each cross-cutting concern, or encapsulate cross-cutting concerns in another service layer that all traffic gets routed through. - -Eventually, even monolthic architectures tend to route traffic through an outer service layer for cross-cutting concerns, but with a monolithic architecture, it’s possible to delay the cost of that work until the project is much more mature. - -Microservices are frequently deployed on their own virtual machines or containers, causing a proliferation of VM wrangling work. These tasks are frequently automated with container fleet management tools. - -Good to hear: - -Positive attitudes toward microservices, despite the higher initial cost vs monolthic apps. Aware that microservices tend to perform and scale better in the long run. -Practical about microservices vs monolithic apps. Structure the app so that services are independent from each other at the code level, but easy to bundle together as a monolithic app in the beginning. Microservice overhead costs can be delayed until it becomes more practical to pay the price. -Red flags: - -Unaware of the differences between monolithic and microservice architectures. -Unaware or impractical about the additional overhead of microservices. -Unaware of the additional performance overhead caused by IPC and network communication for microservices. -Too negative about the drawbacks of microservices. Unable to articulate ways in which to decouple monolithic apps such that they’re easy to split into microservices when the time comes. -Underestimates the advantage of independently scalable microservices. - -# 10. What is asynchronous programming, and why is it important in JavaScript? -Synchronous programming means that, barring conditionals and function calls, code is executed sequentially from top-to-bottom, blocking on long-running tasks such as network requests and disk I/O. - -Asynchronous programming means that the engine runs in an event loop. When a blocking operation is needed, the request is started, and the code keeps running without blocking for the result. When the response is ready, an interrupt is fired, which causes an event handler to be run, where the control flow continues. In this way, a single program thread can handle many concurrent operations. - -User interfaces are asynchronous by nature, and spend most of their time waiting for user input to interrupt the event loop and trigger event handlers. - -Node is asynchronous by default, meaning that the server works in much the same way, waiting in a loop for a network request, and accepting more incoming requests while the first one is being handled. - -This is important in JavaScript, because it is a very natural fit for user interface code, and very beneficial to performance on the server. - -Good to hear: - -An understanding of what blocking means, and the performance implications. -An understanding of event handling, and why its important for UI code. -Red flags: - -Unfamiliar with the terms asynchronous or synchronous. -Unable to articulate performance implications or the relationship between asynchronous code and UI code. - -What is Big O notation, and why is it useful? -What is the DOM? -What is the event loop? -What is a closure? -How does prototypal inheritance work, and how is it different from classical inheritance? (this is not a useful question IMO, but a lot of people like to ask it) -How does this work? -What is event bubbling and how does it work? (this is also a bad question IMO, but a lot of people like to ask it too) -Describe a few ways to communicate between a server and a client. Describe how a few network protocols work at a high level (IP, TCP, HTTP/S/2, UDP, RTC, DNS, etc.) -What is REST, and why do people use it? -My website is slow. Walk me through diagnosing and fixing it. What are some performance optimizations people use, and when should they be used? -What frameworks have you used? What are the pros and cons of each? Why do people use frameworks? What kinds of problems do frameworks solve? - -# HTML Questions - -Answers to [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md). Pull requests for suggestions and corrections are welcome! - -* [What does a doctype do?](#what-does-a-doctype-do) -* [How do you serve a page with content in multiple languages?](#how-do-you-serve-a-page-with-content-in-multiple-languages) -* [What kind of things must you be wary of when design or developing for multilingual sites?](#what-kind-of-things-must-you-be-wary-of-when-designing-or-developing-for-multilingual-sites) -* [What are `data-` attributes good for?](#what-are-data--attributes-good-for) -* [Consider HTML5 as an open web platform. What are the building blocks of HTML5?](#consider-html5-as-an-open-web-platform-what-are-the-building-blocks-of-html5) -* [Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage) -* [Describe the difference between ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/search_index.json b/docs/search_index.json new file mode 100644 index 0000000..428ec71 --- /dev/null +++ b/docs/search_index.json @@ -0,0 +1 @@ +{"index":{"version":"0.5.12","fields":[{"name":"title","boost":10},{"name":"keywords","boost":15},{"name":"body","boost":1}],"ref":"url","documentStore":{"store":{"./":["10","10secondsofcod","10secondsofcode,",":","about!","acknowledg","anyon","author","bootstrap4","bug,","built","clone","code","conduct,","contribut","contributing.md","contributor","detail","dream","easi","etc","file","found","get","git","hat","help","hesit","https://10secondsofcode.github.io/10secondsofcode/","https://github.com/10secondsofcode/10secondsofcode.git","idea","improv","inspir","instal","introduct","issue.","licens","license.md","list","make","mit","npm","open","particip","pleas","process","project","project.","pull","reactj","read","repo","request","seconds.","see","snippet","start","submit","time","tip","under","understand","us","us.","way","websit","whose"]},"length":1},"tokenStore":{"root":{"1":{"0":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}},"s":{"docs":{},"e":{"docs":{},"c":{"docs":{},"o":{"docs":{},"n":{"docs":{},"d":{"docs":{},"s":{"docs":{},"o":{"docs":{},"f":{"docs":{},"c":{"docs":{},"o":{"docs":{},"d":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}},"e":{"docs":{},",":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}}}}}}}}}}},"docs":{}},"docs":{},":":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}},"a":{"docs":{},"b":{"docs":{},"o":{"docs":{},"u":{"docs":{},"t":{"docs":{},"!":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}},"c":{"docs":{},"k":{"docs":{},"n":{"docs":{},"o":{"docs":{},"w":{"docs":{},"l":{"docs":{},"e":{"docs":{},"d":{"docs":{},"g":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}}}}},"n":{"docs":{},"y":{"docs":{},"o":{"docs":{},"n":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}},"u":{"docs":{},"t":{"docs":{},"h":{"docs":{},"o":{"docs":{},"r":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}},"b":{"docs":{},"o":{"docs":{},"o":{"docs":{},"t":{"docs":{},"s":{"docs":{},"t":{"docs":{},"r":{"docs":{},"a":{"docs":{},"p":{"4":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}},"docs":{}}}}}}}}},"u":{"docs":{},"g":{"docs":{},",":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}},"i":{"docs":{},"l":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}},"c":{"docs":{},"l":{"docs":{},"o":{"docs":{},"n":{"docs":{},"e":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}}}},"o":{"docs":{},"d":{"docs":{},"e":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}},"n":{"docs":{},"d":{"docs":{},"u":{"docs":{},"c":{"docs":{},"t":{"docs":{},",":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}},"t":{"docs":{},"r":{"docs":{},"i":{"docs":{},"b":{"docs":{},"u":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}},"i":{"docs":{},"n":{"docs":{},"g":{"docs":{},".":{"docs":{},"m":{"docs":{},"d":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}},"o":{"docs":{},"r":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}}}}}}},"d":{"docs":{},"e":{"docs":{},"t":{"docs":{},"a":{"docs":{},"i":{"docs":{},"l":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}}}}},"r":{"docs":{},"e":{"docs":{},"a":{"docs":{},"m":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}},"e":{"docs":{},"a":{"docs":{},"s":{"docs":{},"i":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"t":{"docs":{},"c":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"f":{"docs":{},"i":{"docs":{},"l":{"docs":{},"e":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"o":{"docs":{},"u":{"docs":{},"n":{"docs":{},"d":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}},"g":{"docs":{},"e":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}},"i":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"h":{"docs":{},"a":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}},"e":{"docs":{},"l":{"docs":{},"p":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}},"s":{"docs":{},"i":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}},"t":{"docs":{},"t":{"docs":{},"p":{"docs":{},"s":{"docs":{},":":{"docs":{},"/":{"docs":{},"/":{"1":{"0":{"docs":{},"s":{"docs":{},"e":{"docs":{},"c":{"docs":{},"o":{"docs":{},"n":{"docs":{},"d":{"docs":{},"s":{"docs":{},"o":{"docs":{},"f":{"docs":{},"c":{"docs":{},"o":{"docs":{},"d":{"docs":{},"e":{"docs":{},".":{"docs":{},"g":{"docs":{},"i":{"docs":{},"t":{"docs":{},"h":{"docs":{},"u":{"docs":{},"b":{"docs":{},".":{"docs":{},"i":{"docs":{},"o":{"docs":{},"/":{"1":{"0":{"docs":{},"s":{"docs":{},"e":{"docs":{},"c":{"docs":{},"o":{"docs":{},"n":{"docs":{},"d":{"docs":{},"s":{"docs":{},"o":{"docs":{},"f":{"docs":{},"c":{"docs":{},"o":{"docs":{},"d":{"docs":{},"e":{"docs":{},"/":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}}}}}}}}}}},"docs":{}},"docs":{}}}}}}}}}}}}}}}}}}}}}}}}}},"docs":{}},"docs":{},"g":{"docs":{},"i":{"docs":{},"t":{"docs":{},"h":{"docs":{},"u":{"docs":{},"b":{"docs":{},".":{"docs":{},"c":{"docs":{},"o":{"docs":{},"m":{"docs":{},"/":{"1":{"0":{"docs":{},"s":{"docs":{},"e":{"docs":{},"c":{"docs":{},"o":{"docs":{},"n":{"docs":{},"d":{"docs":{},"s":{"docs":{},"o":{"docs":{},"f":{"docs":{},"c":{"docs":{},"o":{"docs":{},"d":{"docs":{},"e":{"docs":{},"/":{"1":{"0":{"docs":{},"s":{"docs":{},"e":{"docs":{},"c":{"docs":{},"o":{"docs":{},"n":{"docs":{},"d":{"docs":{},"s":{"docs":{},"o":{"docs":{},"f":{"docs":{},"c":{"docs":{},"o":{"docs":{},"d":{"docs":{},"e":{"docs":{},".":{"docs":{},"g":{"docs":{},"i":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}}}}}}}}}}}}}},"docs":{}},"docs":{}}}}}}}}}}}}}}}},"docs":{}},"docs":{}}}}}}}}}}}}}}}}}}}},"i":{"docs":{},"d":{"docs":{},"e":{"docs":{},"a":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"m":{"docs":{},"p":{"docs":{},"r":{"docs":{},"o":{"docs":{},"v":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}},"n":{"docs":{},"s":{"docs":{},"p":{"docs":{},"i":{"docs":{},"r":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"t":{"docs":{},"a":{"docs":{},"l":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}},"t":{"docs":{},"r":{"docs":{},"o":{"docs":{},"d":{"docs":{},"u":{"docs":{},"c":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":10}}}}}}}}}},"s":{"docs":{},"s":{"docs":{},"u":{"docs":{},"e":{"docs":{},".":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}},"l":{"docs":{},"i":{"docs":{},"c":{"docs":{},"e":{"docs":{},"n":{"docs":{},"s":{"docs":{"./":{"ref":"./","tf":0.0379746835443038}},"e":{"docs":{},".":{"docs":{},"m":{"docs":{},"d":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}}}},"s":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}},"m":{"docs":{},"a":{"docs":{},"k":{"docs":{},"e":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"i":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"n":{"docs":{},"p":{"docs":{},"m":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}}},"o":{"docs":{},"p":{"docs":{},"e":{"docs":{},"n":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}},"p":{"docs":{},"a":{"docs":{},"r":{"docs":{},"t":{"docs":{},"i":{"docs":{},"c":{"docs":{},"i":{"docs":{},"p":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}}},"l":{"docs":{},"e":{"docs":{},"a":{"docs":{},"s":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}},"r":{"docs":{},"o":{"docs":{},"c":{"docs":{},"e":{"docs":{},"s":{"docs":{},"s":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}},"j":{"docs":{},"e":{"docs":{},"c":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}},".":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}}},"u":{"docs":{},"l":{"docs":{},"l":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}}}},"r":{"docs":{},"e":{"docs":{},"a":{"docs":{},"c":{"docs":{},"t":{"docs":{},"j":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}}},"d":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}},"p":{"docs":{},"o":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}},"q":{"docs":{},"u":{"docs":{},"e":{"docs":{},"s":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}}}}}}},"s":{"docs":{},"e":{"docs":{},"c":{"docs":{},"o":{"docs":{},"n":{"docs":{},"d":{"docs":{},"s":{"docs":{},".":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}},"e":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}},"n":{"docs":{},"i":{"docs":{},"p":{"docs":{},"p":{"docs":{},"e":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}},"t":{"docs":{},"a":{"docs":{},"r":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}}}},"u":{"docs":{},"b":{"docs":{},"m":{"docs":{},"i":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.02531645569620253}}}}}}}},"t":{"docs":{},"i":{"docs":{},"m":{"docs":{},"e":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}},"p":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"u":{"docs":{},"n":{"docs":{},"d":{"docs":{},"e":{"docs":{},"r":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}},"s":{"docs":{},"t":{"docs":{},"a":{"docs":{},"n":{"docs":{},"d":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}}}}},"s":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}},".":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}},"w":{"docs":{},"a":{"docs":{},"y":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}},"e":{"docs":{},"b":{"docs":{},"s":{"docs":{},"i":{"docs":{},"t":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}},"h":{"docs":{},"o":{"docs":{},"s":{"docs":{},"e":{"docs":{"./":{"ref":"./","tf":0.012658227848101266}}}}}}}},"length":67},"corpusTokens":["10","10secondsofcod","10secondsofcode,",":","about!","acknowledg","anyon","author","bootstrap4","bug,","built","clone","code","conduct,","contribut","contributing.md","contributor","detail","dream","easi","etc","file","found","get","git","hat","help","hesit","https://10secondsofcode.github.io/10secondsofcode/","https://github.com/10secondsofcode/10secondsofcode.git","idea","improv","inspir","instal","introduct","issue.","licens","license.md","list","make","mit","npm","open","particip","pleas","process","project","project.","pull","reactj","read","repo","request","seconds.","see","snippet","start","submit","time","tip","under","understand","us","us.","way","websit","whose"],"pipeline":["stopWordFilter","stemmer"]},"store":{"./":{"url":"./","title":"Introduction","keywords":"","body":"10secondsofcode\n10secondsofcode is a easy way to understand the reactjs snippets in 10 seconds. \nWebsite : https://10secondsofcode.github.io/10secondsofcode/\nGetting Started\ngit clone https://github.com/10secondsofcode/10secondsofcode.git\nnpm install\nnpm start\nBuilt With\n\nReactJs \nBootStrap4 \n\nContributing\nIf you have any idea for an improvement or found a bug, do not hesitate to open an issue. And if you have time clone this repo and submit a pull request and help me make 10secondsofcode, we all dream about! Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.\nAuthors\nSee also the list of contributors who participated in this project.\nLicense\nThis project is licensed under the MIT License - see the LICENSE.md file for details\nAcknowledgments\n\nHat tip to anyone whose code was used\nInspiration\netc\n\n"}}} \ No newline at end of file diff --git a/gatsby-browser.js b/gatsby-browser.js deleted file mode 100644 index d8ab650..0000000 --- a/gatsby-browser.js +++ /dev/null @@ -1,2 +0,0 @@ -import './src/utils/theme.css' -import 'bootstrap/dist/css/bootstrap.min.css'; diff --git a/gatsby-config.js b/gatsby-config.js deleted file mode 100644 index 16d8ee8..0000000 --- a/gatsby-config.js +++ /dev/null @@ -1,80 +0,0 @@ -module.exports = { - siteMetadata: { - title: '10secondsofcode', - author: '10secondsofcode', - description: 'Love to Code', - siteUrl: 'https://10secondsofcode.com', - social: { - twitter: '#', - }, - }, - pathPrefix: '/', - plugins: [ - { - resolve: `gatsby-source-filesystem`, - options: { - path: `${__dirname}/src/pages`, - name: 'pages', - }, - }, - { - resolve: `gatsby-transformer-remark`, - options: { - plugins: [ - { - resolve: `gatsby-remark-images`, - options: { - maxWidth: 590, - }, - }, - { - resolve: `gatsby-remark-responsive-iframe`, - options: { - wrapperStyle: `margin-bottom: 1.0725rem`, - }, - }, - 'gatsby-remark-autolink-headers', - { - resolve: 'gatsby-remark-prismjs', - options: { - inlineCodeMarker: '÷', - }, - }, - 'gatsby-remark-copy-linked-files', - 'gatsby-remark-smartypants', - ], - }, - }, - `gatsby-transformer-sharp`, - `gatsby-plugin-sharp`, - { - resolve: `gatsby-plugin-google-analytics`, - options: { - trackingId: `UA-122222-1`, - head: true - }, - }, - `gatsby-plugin-feed`, - `gatsby-plugin-sitemap`, - { - resolve: `gatsby-plugin-manifest`, - options: { - name: `10secondsofcode`, - short_name: `10secondsofcode`, - start_url: `/`, - background_color: `#ffffff`, - theme_color: `#d23636`, - display: `minimal-ui`, - icon: `src/assets/icon.png`, - }, - }, - `gatsby-plugin-react-helmet`, - { - resolve: 'gatsby-plugin-typography', - options: { - pathToConfigModule: 'src/utils/typography', - }, - }, - 'gatsby-plugin-offline', - ], -} diff --git a/gatsby-node.js b/gatsby-node.js deleted file mode 100644 index 277a444..0000000 --- a/gatsby-node.js +++ /dev/null @@ -1,72 +0,0 @@ -const _ = require('lodash') -const Promise = require('bluebird') -const path = require('path') -const { createFilePath } = require('gatsby-source-filesystem') - -exports.createPages = ({ graphql, actions }) => { - const { createPage } = actions - - return new Promise((resolve, reject) => { - const blogPost = path.resolve('./src/templates/blog-post.js') - resolve( - graphql( - ` - { - allMarkdownRemark( - sort: { fields: [frontmatter___date], order: DESC } - limit: 1000 - ) { - edges { - node { - fields { - slug - } - frontmatter { - title - } - } - } - } - } - ` - ).then(result => { - if (result.errors) { - console.log(result.errors) - reject(result.errors) - } - - // Create blog posts pages. - const posts = result.data.allMarkdownRemark.edges - - _.each(posts, (post, index) => { - const previous = - index === posts.length - 1 ? null : posts[index + 1].node - const next = index === 0 ? null : posts[index - 1].node - - createPage({ - path: '/blog' + post.node.fields.slug, - component: blogPost, - context: { - slug: post.node.fields.slug, - previous, - next, - }, - }) - }) - }) - ) - }) -} - -exports.onCreateNode = ({ node, actions, getNode }) => { - const { createNodeField } = actions - - if (node.internal.type === `MarkdownRemark`) { - const value = createFilePath({ node, getNode }) - createNodeField({ - name: `slug`, - node, - value, - }) - } -} diff --git a/index.html b/index.html new file mode 100644 index 0000000..bf8c615 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ + 10secondsofcode - reactjs | reactjs online | ReactJS Tutorial
\ No newline at end of file diff --git a/leaf.js b/leaf.js new file mode 100644 index 0000000..7b763d6 --- /dev/null +++ b/leaf.js @@ -0,0 +1,113 @@ +!function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=131)}([function(t,e,n){"use strict";t.exports=n(32)},function(t,e,n){"use strict";t.exports=function(t){return i.test("number"==typeof t?r(t):t.charAt(0))};var r=String.fromCharCode,i=/\s/},function(t,e){t.exports=function(){for(var t={},e=0;e=48&&e<=57}},function(t,e,n){"use strict";t.exports=s;var r=n(73),i=r.CONTINUE,o=r.SKIP,a=r.EXIT;function s(t,e,n,i){"function"==typeof e&&"function"!=typeof n&&(i=n,n=e,e=null),r(t,e,function(t,e){var r=e[e.length-1],i=r?r.children.indexOf(t):null;return n(t,i,r)},i)}s.CONTINUE=i,s.SKIP=o,s.EXIT=a},function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e){function n(t,e){for(var n=0;n1)for(var n=1;n=55296&&ot<=57343||ot>1114111?(O(x,z),N="�"):N in i?(O(b,z),N=i[N]):(P="",S(N)&&O(b,z),N>65535&&(P+=c((N-=65536)>>>10|55296),N=56320|1023&N),N=P+c(N))):M!==d&&O(T,z)),N?(lt(),F=at(),H=R-1,et+=R-L+1,it.push(N),(W=at()).offset++,V&&V.call(J,N,{start:F,end:W},t.slice(L-1,R)),F=W):(p=t.slice(L-1,R),rt+=p,et+=p.length,H=R-1)}var ot;return it.join("");function at(){return{line:nt,column:et,offset:H+(B.offset||0)}}function st(e){return t.charAt(e)}function lt(){rt&&(it.push(rt),Y&&Y.call(Q,rt,{start:F,end:at()}),rt="")}}(t,a)};var u={}.hasOwnProperty,c=String.fromCharCode,f=Function.prototype,p={warning:null,reference:null,text:null,warningContext:null,referenceContext:null,textContext:null,position:{},additional:null,attribute:!1,nonTerminated:!0},d="named",h="hexadecimal",v="decimal",m={};m[h]=16,m[v]=10;var y={};y[d]=s,y[v]=o,y[h]=a;var g=1,w=2,_=3,T=4,E=5,b=6,x=7,C={};function S(t){return t>=1&&t<=8||11===t||t>=13&&t<=31||t>=127&&t<=159||t>=64976&&t<=65007||65535==(65535&t)||65534==(65535&t)}C[g]="Named character references must be terminated by a semicolon",C[w]="Numeric character references must be terminated by a semicolon",C[_]="Named character references cannot be empty",C[T]="Numeric character references cannot be empty",C[E]="Named character references must be known",C[b]="Numeric character references cannot be disallowed",C[x]="Numeric character references cannot be outside the permissible Unicode range"},function(t,e,n){"use strict"; +/*! + * repeat-string + * + * Copyright (c) 2014-2015, Jon Schlinkert. + * Licensed under the MIT License. + */var r,i="";t.exports=function(t,e){if("string"!=typeof t)throw new TypeError("expected a string");if(1===e)return t;if(2===e)return t+t;var n=t.length*e;if(r!==t||void 0===r)r=t,i="";else if(i.length>=n)return i.substr(0,n);for(;n>i.length&&e>1;)1&e&&(i+=t),e>>=1,t+=t;return i=(i+=t).substr(0,n)}},function(t,e,n){"use strict";t.exports=function(t){var e=String(t),n=e.length;for(;e.charAt(--n)===r;);return e.slice(0,n+1)};var r="\n"},function(t,e,n){"use strict";t.exports=function(t,e,n,r){var i,o,a,s,l,u,c=["pedantic","commonmark"],f=c.length,p=t.length,d=-1;for(;++d=0;r--){var i=t[r];"."===i?t.splice(r,1):".."===i?(t.splice(r,1),n++):n&&(t.splice(r,1),n--)}if(e)for(;n--;n)t.unshift("..");return t}var r=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/,i=function(t){return r.exec(t).slice(1)};function o(t,e){if(t.filter)return t.filter(e);for(var n=[],r=0;r=-1&&!r;i--){var a=i>=0?arguments[i]:t.cwd();if("string"!=typeof a)throw new TypeError("Arguments to path.resolve must be strings");a&&(e=a+"/"+e,r="/"===a.charAt(0))}return(r?"/":"")+(e=n(o(e.split("/"),function(t){return!!t}),!r).join("/"))||"."},e.normalize=function(t){var r=e.isAbsolute(t),i="/"===a(t,-1);return(t=n(o(t.split("/"),function(t){return!!t}),!r).join("/"))||r||(t="."),t&&i&&(t+="/"),(r?"/":"")+t},e.isAbsolute=function(t){return"/"===t.charAt(0)},e.join=function(){var t=Array.prototype.slice.call(arguments,0);return e.normalize(o(t,function(t,e){if("string"!=typeof t)throw new TypeError("Arguments to path.join must be strings");return t}).join("/"))},e.relative=function(t,n){function r(t){for(var e=0;e=0&&""===t[n];n--);return e>n?[]:t.slice(e,n-e+1)}t=e.resolve(t).substr(1),n=e.resolve(n).substr(1);for(var i=r(t.split("/")),o=r(n.split("/")),a=Math.min(i.length,o.length),s=a,l=0;l=97&&e<=122||e>=65&&e<=90}},function(t,e,n){"use strict";t.exports={position:!0,gfm:!0,commonmark:!1,footnotes:!1,pedantic:!1,blocks:n(70)}},function(t,e,n){"use strict";t.exports=function(t){var e,n=0,i=0,o=t.charAt(n),a={};for(;o in r;)e=r[o],i+=e,e>1&&(i=Math.floor(i/e)*e),a[i]=n,o=t.charAt(++n);return{indent:i,stops:a}};var r={" ":1,"\t":4}},function(t,e,n){"use strict";var r="<[A-Za-z][A-Za-z0-9\\-]*(?:\\s+[a-zA-Z_:][a-zA-Z0-9:._-]*(?:\\s*=\\s*(?:[^\"'=<>`\\u0000-\\u0020]+|'[^']*'|\"[^\"]*\"))?)*\\s*\\/?>",i="<\\/[A-Za-z][A-Za-z0-9\\-]*\\s*>";e.openCloseTag=new RegExp("^(?:"+r+"|"+i+")"),e.tag=new RegExp("^(?:"+r+"|"+i+"|\x3c!----\x3e|\x3c!--(?:-?[^>-])(?:-?[^-])*--\x3e|<[?].*?[?]>|]*>|)")},function(t,e,n){"use strict";t.exports=function(t,e){return t.indexOf("<",e)}},function(t,e,n){"use strict";t.exports=function(t,e){var n=t.indexOf("[",e),r=t.indexOf("![",e);if(-1===r)return n;return n0&&e-1 in t)}b.fn=b.prototype={jquery:"3.3.1",constructor:b,length:0,toArray:function(){return l.call(this)},get:function(t){return null==t?l.call(this):t<0?this[t+this.length]:this[t]},pushStack:function(t){var e=b.merge(this.constructor(),t);return e.prevObject=this,e},each:function(t){return b.each(this,t)},map:function(t){return this.pushStack(b.map(this,function(e,n){return t.call(e,n,e)}))},slice:function(){return this.pushStack(l.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(t){var e=this.length,n=+t+(t<0?e:0);return this.pushStack(n>=0&&n+~]|"+M+")"+M+"*"),Y=new RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),V=new RegExp(W),X=new RegExp("^"+U+"$"),Q={ID:new RegExp("^#("+U+")"),CLASS:new RegExp("^\\.("+U+")"),TAG:new RegExp("^("+U+"|[*])"),ATTR:new RegExp("^"+F),PSEUDO:new RegExp("^"+W),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+L+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},J=/^(?:input|select|textarea|button)$/i,Z=/^h\d$/i,B=/^[^{]+\{\s*\[native \w/,G=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,q=/[+~]/,H=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),tt=function(t,e,n){var r="0x"+e-65536;return r!=r||n?e:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},et=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,nt=function(t,e){return e?"\0"===t?"�":t.slice(0,-1)+"\\"+t.charCodeAt(t.length-1).toString(16)+" ":"\\"+t},rt=function(){p()},it=gt(function(t){return!0===t.disabled&&("form"in t||"label"in t)},{dir:"parentNode",next:"legend"});try{P.apply(D=I.call(T.childNodes),T.childNodes),D[T.childNodes.length].nodeType}catch(t){P={apply:D.length?function(t,e){k.apply(t,I.call(e))}:function(t,e){for(var n=t.length,r=0;t[n++]=e[r++];);t.length=n-1}}}function ot(t,e,r,i){var o,s,u,c,f,h,y,g=e&&e.ownerDocument,E=e?e.nodeType:9;if(r=r||[],"string"!=typeof t||!t||1!==E&&9!==E&&11!==E)return r;if(!i&&((e?e.ownerDocument||e:T)!==d&&p(e),e=e||d,v)){if(11!==E&&(f=G.exec(t)))if(o=f[1]){if(9===E){if(!(u=e.getElementById(o)))return r;if(u.id===o)return r.push(u),r}else if(g&&(u=g.getElementById(o))&&w(e,u)&&u.id===o)return r.push(u),r}else{if(f[2])return P.apply(r,e.getElementsByTagName(t)),r;if((o=f[3])&&n.getElementsByClassName&&e.getElementsByClassName)return P.apply(r,e.getElementsByClassName(o)),r}if(n.qsa&&!S[t+" "]&&(!m||!m.test(t))){if(1!==E)g=e,y=t;else if("object"!==e.nodeName.toLowerCase()){for((c=e.getAttribute("id"))?c=c.replace(et,nt):e.setAttribute("id",c=_),s=(h=a(t)).length;s--;)h[s]="#"+c+" "+yt(h[s]);y=h.join(","),g=q.test(t)&&vt(e.parentNode)||e}if(y)try{return P.apply(r,g.querySelectorAll(y)),r}catch(t){}finally{c===_&&e.removeAttribute("id")}}}return l(t.replace(R,"$1"),e,r,i)}function at(){var t=[];return function e(n,i){return t.push(n+" ")>r.cacheLength&&delete e[t.shift()],e[n+" "]=i}}function st(t){return t[_]=!0,t}function lt(t){var e=d.createElement("fieldset");try{return!!t(e)}catch(t){return!1}finally{e.parentNode&&e.parentNode.removeChild(e),e=null}}function ut(t,e){for(var n=t.split("|"),i=n.length;i--;)r.attrHandle[n[i]]=e}function ct(t,e){var n=e&&t,r=n&&1===t.nodeType&&1===e.nodeType&&t.sourceIndex-e.sourceIndex;if(r)return r;if(n)for(;n=n.nextSibling;)if(n===e)return-1;return t?1:-1}function ft(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function pt(t){return function(e){var n=e.nodeName.toLowerCase();return("input"===n||"button"===n)&&e.type===t}}function dt(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&it(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ht(t){return st(function(e){return e=+e,st(function(n,r){for(var i,o=t([],n.length,e),a=o.length;a--;)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function vt(t){return t&&void 0!==t.getElementsByTagName&&t}for(e in n=ot.support={},o=ot.isXML=function(t){var e=t&&(t.ownerDocument||t).documentElement;return!!e&&"HTML"!==e.nodeName},p=ot.setDocument=function(t){var e,i,a=t?t.ownerDocument||t:T;return a!==d&&9===a.nodeType&&a.documentElement?(h=(d=a).documentElement,v=!o(d),T!==d&&(i=d.defaultView)&&i.top!==i&&(i.addEventListener?i.addEventListener("unload",rt,!1):i.attachEvent&&i.attachEvent("onunload",rt)),n.attributes=lt(function(t){return t.className="i",!t.getAttribute("className")}),n.getElementsByTagName=lt(function(t){return t.appendChild(d.createComment("")),!t.getElementsByTagName("*").length}),n.getElementsByClassName=B.test(d.getElementsByClassName),n.getById=lt(function(t){return h.appendChild(t).id=_,!d.getElementsByName||!d.getElementsByName(_).length}),n.getById?(r.filter.ID=function(t){var e=t.replace(H,tt);return function(t){return t.getAttribute("id")===e}},r.find.ID=function(t,e){if(void 0!==e.getElementById&&v){var n=e.getElementById(t);return n?[n]:[]}}):(r.filter.ID=function(t){var e=t.replace(H,tt);return function(t){var n=void 0!==t.getAttributeNode&&t.getAttributeNode("id");return n&&n.value===e}},r.find.ID=function(t,e){if(void 0!==e.getElementById&&v){var n,r,i,o=e.getElementById(t);if(o){if((n=o.getAttributeNode("id"))&&n.value===t)return[o];for(i=e.getElementsByName(t),r=0;o=i[r++];)if((n=o.getAttributeNode("id"))&&n.value===t)return[o]}return[]}}),r.find.TAG=n.getElementsByTagName?function(t,e){return void 0!==e.getElementsByTagName?e.getElementsByTagName(t):n.qsa?e.querySelectorAll(t):void 0}:function(t,e){var n,r=[],i=0,o=e.getElementsByTagName(t);if("*"===t){for(;n=o[i++];)1===n.nodeType&&r.push(n);return r}return o},r.find.CLASS=n.getElementsByClassName&&function(t,e){if(void 0!==e.getElementsByClassName&&v)return e.getElementsByClassName(t)},y=[],m=[],(n.qsa=B.test(d.querySelectorAll))&&(lt(function(t){h.appendChild(t).innerHTML="",t.querySelectorAll("[msallowcapture^='']").length&&m.push("[*^$]="+M+"*(?:''|\"\")"),t.querySelectorAll("[selected]").length||m.push("\\["+M+"*(?:value|"+L+")"),t.querySelectorAll("[id~="+_+"-]").length||m.push("~="),t.querySelectorAll(":checked").length||m.push(":checked"),t.querySelectorAll("a#"+_+"+*").length||m.push(".#.+[+~]")}),lt(function(t){t.innerHTML="";var e=d.createElement("input");e.setAttribute("type","hidden"),t.appendChild(e).setAttribute("name","D"),t.querySelectorAll("[name=d]").length&&m.push("name"+M+"*[*^$|!~]?="),2!==t.querySelectorAll(":enabled").length&&m.push(":enabled",":disabled"),h.appendChild(t).disabled=!0,2!==t.querySelectorAll(":disabled").length&&m.push(":enabled",":disabled"),t.querySelectorAll("*,:x"),m.push(",.*:")})),(n.matchesSelector=B.test(g=h.matches||h.webkitMatchesSelector||h.mozMatchesSelector||h.oMatchesSelector||h.msMatchesSelector))&<(function(t){n.disconnectedMatch=g.call(t,"*"),g.call(t,"[s!='']:x"),y.push("!=",W)}),m=m.length&&new RegExp(m.join("|")),y=y.length&&new RegExp(y.join("|")),e=B.test(h.compareDocumentPosition),w=e||B.test(h.contains)?function(t,e){var n=9===t.nodeType?t.documentElement:t,r=e&&e.parentNode;return t===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):t.compareDocumentPosition&&16&t.compareDocumentPosition(r)))}:function(t,e){if(e)for(;e=e.parentNode;)if(e===t)return!0;return!1},A=e?function(t,e){if(t===e)return f=!0,0;var r=!t.compareDocumentPosition-!e.compareDocumentPosition;return r||(1&(r=(t.ownerDocument||t)===(e.ownerDocument||e)?t.compareDocumentPosition(e):1)||!n.sortDetached&&e.compareDocumentPosition(t)===r?t===d||t.ownerDocument===T&&w(T,t)?-1:e===d||e.ownerDocument===T&&w(T,e)?1:c?j(c,t)-j(c,e):0:4&r?-1:1)}:function(t,e){if(t===e)return f=!0,0;var n,r=0,i=t.parentNode,o=e.parentNode,a=[t],s=[e];if(!i||!o)return t===d?-1:e===d?1:i?-1:o?1:c?j(c,t)-j(c,e):0;if(i===o)return ct(t,e);for(n=t;n=n.parentNode;)a.unshift(n);for(n=e;n=n.parentNode;)s.unshift(n);for(;a[r]===s[r];)r++;return r?ct(a[r],s[r]):a[r]===T?-1:s[r]===T?1:0},d):d},ot.matches=function(t,e){return ot(t,null,null,e)},ot.matchesSelector=function(t,e){if((t.ownerDocument||t)!==d&&p(t),e=e.replace(Y,"='$1']"),n.matchesSelector&&v&&!S[e+" "]&&(!y||!y.test(e))&&(!m||!m.test(e)))try{var r=g.call(t,e);if(r||n.disconnectedMatch||t.document&&11!==t.document.nodeType)return r}catch(t){}return ot(e,d,null,[t]).length>0},ot.contains=function(t,e){return(t.ownerDocument||t)!==d&&p(t),w(t,e)},ot.attr=function(t,e){(t.ownerDocument||t)!==d&&p(t);var i=r.attrHandle[e.toLowerCase()],o=i&&N.call(r.attrHandle,e.toLowerCase())?i(t,e,!v):void 0;return void 0!==o?o:n.attributes||!v?t.getAttribute(e):(o=t.getAttributeNode(e))&&o.specified?o.value:null},ot.escape=function(t){return(t+"").replace(et,nt)},ot.error=function(t){throw new Error("Syntax error, unrecognized expression: "+t)},ot.uniqueSort=function(t){var e,r=[],i=0,o=0;if(f=!n.detectDuplicates,c=!n.sortStable&&t.slice(0),t.sort(A),f){for(;e=t[o++];)e===t[o]&&(i=r.push(o));for(;i--;)t.splice(r[i],1)}return c=null,t},i=ot.getText=function(t){var e,n="",r=0,o=t.nodeType;if(o){if(1===o||9===o||11===o){if("string"==typeof t.textContent)return t.textContent;for(t=t.firstChild;t;t=t.nextSibling)n+=i(t)}else if(3===o||4===o)return t.nodeValue}else for(;e=t[r++];)n+=i(e);return n},(r=ot.selectors={cacheLength:50,createPseudo:st,match:Q,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(t){return t[1]=t[1].replace(H,tt),t[3]=(t[3]||t[4]||t[5]||"").replace(H,tt),"~="===t[2]&&(t[3]=" "+t[3]+" "),t.slice(0,4)},CHILD:function(t){return t[1]=t[1].toLowerCase(),"nth"===t[1].slice(0,3)?(t[3]||ot.error(t[0]),t[4]=+(t[4]?t[5]+(t[6]||1):2*("even"===t[3]||"odd"===t[3])),t[5]=+(t[7]+t[8]||"odd"===t[3])):t[3]&&ot.error(t[0]),t},PSEUDO:function(t){var e,n=!t[6]&&t[2];return Q.CHILD.test(t[0])?null:(t[3]?t[2]=t[4]||t[5]||"":n&&V.test(n)&&(e=a(n,!0))&&(e=n.indexOf(")",n.length-e)-n.length)&&(t[0]=t[0].slice(0,e),t[2]=n.slice(0,e)),t.slice(0,3))}},filter:{TAG:function(t){var e=t.replace(H,tt).toLowerCase();return"*"===t?function(){return!0}:function(t){return t.nodeName&&t.nodeName.toLowerCase()===e}},CLASS:function(t){var e=x[t+" "];return e||(e=new RegExp("(^|"+M+")"+t+"("+M+"|$)"))&&x(t,function(t){return e.test("string"==typeof t.className&&t.className||void 0!==t.getAttribute&&t.getAttribute("class")||"")})},ATTR:function(t,e,n){return function(r){var i=ot.attr(r,t);return null==i?"!="===e:!e||(i+="","="===e?i===n:"!="===e?i!==n:"^="===e?n&&0===i.indexOf(n):"*="===e?n&&i.indexOf(n)>-1:"$="===e?n&&i.slice(-n.length)===n:"~="===e?(" "+i.replace(z," ")+" ").indexOf(n)>-1:"|="===e&&(i===n||i.slice(0,n.length+1)===n+"-"))}},CHILD:function(t,e,n,r,i){var o="nth"!==t.slice(0,3),a="last"!==t.slice(-4),s="of-type"===e;return 1===r&&0===i?function(t){return!!t.parentNode}:function(e,n,l){var u,c,f,p,d,h,v=o!==a?"nextSibling":"previousSibling",m=e.parentNode,y=s&&e.nodeName.toLowerCase(),g=!l&&!s,w=!1;if(m){if(o){for(;v;){for(p=e;p=p[v];)if(s?p.nodeName.toLowerCase()===y:1===p.nodeType)return!1;h=v="only"===t&&!h&&"nextSibling"}return!0}if(h=[a?m.firstChild:m.lastChild],a&&g){for(w=(d=(u=(c=(f=(p=m)[_]||(p[_]={}))[p.uniqueID]||(f[p.uniqueID]={}))[t]||[])[0]===E&&u[1])&&u[2],p=d&&m.childNodes[d];p=++d&&p&&p[v]||(w=d=0)||h.pop();)if(1===p.nodeType&&++w&&p===e){c[t]=[E,d,w];break}}else if(g&&(w=d=(u=(c=(f=(p=e)[_]||(p[_]={}))[p.uniqueID]||(f[p.uniqueID]={}))[t]||[])[0]===E&&u[1]),!1===w)for(;(p=++d&&p&&p[v]||(w=d=0)||h.pop())&&((s?p.nodeName.toLowerCase()!==y:1!==p.nodeType)||!++w||(g&&((c=(f=p[_]||(p[_]={}))[p.uniqueID]||(f[p.uniqueID]={}))[t]=[E,w]),p!==e)););return(w-=i)===r||w%r==0&&w/r>=0}}},PSEUDO:function(t,e){var n,i=r.pseudos[t]||r.setFilters[t.toLowerCase()]||ot.error("unsupported pseudo: "+t);return i[_]?i(e):i.length>1?(n=[t,t,"",e],r.setFilters.hasOwnProperty(t.toLowerCase())?st(function(t,n){for(var r,o=i(t,e),a=o.length;a--;)t[r=j(t,o[a])]=!(n[r]=o[a])}):function(t){return i(t,0,n)}):i}},pseudos:{not:st(function(t){var e=[],n=[],r=s(t.replace(R,"$1"));return r[_]?st(function(t,e,n,i){for(var o,a=r(t,null,i,[]),s=t.length;s--;)(o=a[s])&&(t[s]=!(e[s]=o))}):function(t,i,o){return e[0]=t,r(e,null,o,n),e[0]=null,!n.pop()}}),has:st(function(t){return function(e){return ot(t,e).length>0}}),contains:st(function(t){return t=t.replace(H,tt),function(e){return(e.textContent||e.innerText||i(e)).indexOf(t)>-1}}),lang:st(function(t){return X.test(t||"")||ot.error("unsupported lang: "+t),t=t.replace(H,tt).toLowerCase(),function(e){var n;do{if(n=v?e.lang:e.getAttribute("xml:lang")||e.getAttribute("lang"))return(n=n.toLowerCase())===t||0===n.indexOf(t+"-")}while((e=e.parentNode)&&1===e.nodeType);return!1}}),target:function(e){var n=t.location&&t.location.hash;return n&&n.slice(1)===e.id},root:function(t){return t===h},focus:function(t){return t===d.activeElement&&(!d.hasFocus||d.hasFocus())&&!!(t.type||t.href||~t.tabIndex)},enabled:dt(!1),disabled:dt(!0),checked:function(t){var e=t.nodeName.toLowerCase();return"input"===e&&!!t.checked||"option"===e&&!!t.selected},selected:function(t){return t.parentNode&&t.parentNode.selectedIndex,!0===t.selected},empty:function(t){for(t=t.firstChild;t;t=t.nextSibling)if(t.nodeType<6)return!1;return!0},parent:function(t){return!r.pseudos.empty(t)},header:function(t){return Z.test(t.nodeName)},input:function(t){return J.test(t.nodeName)},button:function(t){var e=t.nodeName.toLowerCase();return"input"===e&&"button"===t.type||"button"===e},text:function(t){var e;return"input"===t.nodeName.toLowerCase()&&"text"===t.type&&(null==(e=t.getAttribute("type"))||"text"===e.toLowerCase())},first:ht(function(){return[0]}),last:ht(function(t,e){return[e-1]}),eq:ht(function(t,e,n){return[n<0?n+e:n]}),even:ht(function(t,e){for(var n=0;n=0;)t.push(r);return t}),gt:ht(function(t,e,n){for(var r=n<0?n+e:n;++r1?function(e,n,r){for(var i=t.length;i--;)if(!t[i](e,n,r))return!1;return!0}:t[0]}function _t(t,e,n,r,i){for(var o,a=[],s=0,l=t.length,u=null!=e;s-1&&(o[u]=!(a[u]=f))}}else y=_t(y===a?y.splice(h,y.length):y),i?i(null,a,y,l):P.apply(a,y)})}function Et(t){for(var e,n,i,o=t.length,a=r.relative[t[0].type],s=a||r.relative[" "],l=a?1:0,c=gt(function(t){return t===e},s,!0),f=gt(function(t){return j(e,t)>-1},s,!0),p=[function(t,n,r){var i=!a&&(r||n!==u)||((e=n).nodeType?c(t,n,r):f(t,n,r));return e=null,i}];l1&&wt(p),l>1&&yt(t.slice(0,l-1).concat({value:" "===t[l-2].type?"*":""})).replace(R,"$1"),n,l0,i=t.length>0,o=function(o,a,s,l,c){var f,h,m,y=0,g="0",w=o&&[],_=[],T=u,b=o||i&&r.find.TAG("*",c),x=E+=null==T?1:Math.random()||.1,C=b.length;for(c&&(u=a===d||a||c);g!==C&&null!=(f=b[g]);g++){if(i&&f){for(h=0,a||f.ownerDocument===d||(p(f),s=!v);m=t[h++];)if(m(f,a||d,s)){l.push(f);break}c&&(E=x)}n&&((f=!m&&f)&&y--,o&&w.push(f))}if(y+=g,n&&g!==y){for(h=0;m=e[h++];)m(w,_,a,s);if(o){if(y>0)for(;g--;)w[g]||_[g]||(_[g]=O.call(l));_=_t(_)}P.apply(l,_),c&&!o&&_.length>0&&y+e.length>1&&ot.uniqueSort(l)}return c&&(E=x,u=T),w};return n?st(o):o}(o,i))).selector=t}return s},l=ot.select=function(t,e,n,i){var o,l,u,c,f,p="function"==typeof t&&t,d=!i&&a(t=p.selector||t);if(n=n||[],1===d.length){if((l=d[0]=d[0].slice(0)).length>2&&"ID"===(u=l[0]).type&&9===e.nodeType&&v&&r.relative[l[1].type]){if(!(e=(r.find.ID(u.matches[0].replace(H,tt),e)||[])[0]))return n;p&&(e=e.parentNode),t=t.slice(l.shift().value.length)}for(o=Q.needsContext.test(t)?0:l.length;o--&&(u=l[o],!r.relative[c=u.type]);)if((f=r.find[c])&&(i=f(u.matches[0].replace(H,tt),q.test(l[0].type)&&vt(e.parentNode)||e))){if(l.splice(o,1),!(t=i.length&&yt(l)))return P.apply(n,i),n;break}}return(p||s(t,d))(i,e,!v,n,!e||q.test(t)&&vt(e.parentNode)||e),n},n.sortStable=_.split("").sort(A).join("")===_,n.detectDuplicates=!!f,p(),n.sortDetached=lt(function(t){return 1&t.compareDocumentPosition(d.createElement("fieldset"))}),lt(function(t){return t.innerHTML="","#"===t.firstChild.getAttribute("href")})||ut("type|href|height|width",function(t,e,n){if(!n)return t.getAttribute(e,"type"===e.toLowerCase()?1:2)}),n.attributes&<(function(t){return t.innerHTML="",t.firstChild.setAttribute("value",""),""===t.firstChild.getAttribute("value")})||ut("value",function(t,e,n){if(!n&&"input"===t.nodeName.toLowerCase())return t.defaultValue}),lt(function(t){return null==t.getAttribute("disabled")})||ut(L,function(t,e,n){var r;if(!n)return!0===t[e]?e.toLowerCase():(r=t.getAttributeNode(e))&&r.specified?r.value:null}),ot}(n);b.find=S,b.expr=S.selectors,b.expr[":"]=b.expr.pseudos,b.uniqueSort=b.unique=S.uniqueSort,b.text=S.getText,b.isXMLDoc=S.isXML,b.contains=S.contains,b.escapeSelector=S.escape;var A=function(t,e,n){for(var r=[],i=void 0!==n;(t=t[e])&&9!==t.nodeType;)if(1===t.nodeType){if(i&&b(t).is(n))break;r.push(t)}return r},N=function(t,e){for(var n=[];t;t=t.nextSibling)1===t.nodeType&&t!==e&&n.push(t);return n},D=b.expr.match.needsContext;function O(t,e){return t.nodeName&&t.nodeName.toLowerCase()===e.toLowerCase()}var k=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function P(t,e,n){return g(e)?b.grep(t,function(t,r){return!!e.call(t,r,t)!==n}):e.nodeType?b.grep(t,function(t){return t===e!==n}):"string"!=typeof e?b.grep(t,function(t){return f.call(e,t)>-1!==n}):b.filter(e,t,n)}b.filter=function(t,e,n){var r=e[0];return n&&(t=":not("+t+")"),1===e.length&&1===r.nodeType?b.find.matchesSelector(r,t)?[r]:[]:b.find.matches(t,b.grep(e,function(t){return 1===t.nodeType}))},b.fn.extend({find:function(t){var e,n,r=this.length,i=this;if("string"!=typeof t)return this.pushStack(b(t).filter(function(){for(e=0;e1?b.uniqueSort(n):n},filter:function(t){return this.pushStack(P(this,t||[],!1))},not:function(t){return this.pushStack(P(this,t||[],!0))},is:function(t){return!!P(this,"string"==typeof t&&D.test(t)?b(t):t||[],!1).length}});var I,j=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(b.fn.init=function(t,e,n){var r,i;if(!t)return this;if(n=n||I,"string"==typeof t){if(!(r="<"===t[0]&&">"===t[t.length-1]&&t.length>=3?[null,t,null]:j.exec(t))||!r[1]&&e)return!e||e.jquery?(e||n).find(t):this.constructor(e).find(t);if(r[1]){if(e=e instanceof b?e[0]:e,b.merge(this,b.parseHTML(r[1],e&&e.nodeType?e.ownerDocument||e:a,!0)),k.test(r[1])&&b.isPlainObject(e))for(r in e)g(this[r])?this[r](e[r]):this.attr(r,e[r]);return this}return(i=a.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return t.nodeType?(this[0]=t,this.length=1,this):g(t)?void 0!==n.ready?n.ready(t):t(b):b.makeArray(t,this)}).prototype=b.fn,I=b(a);var L=/^(?:parents|prev(?:Until|All))/,M={children:!0,contents:!0,next:!0,prev:!0};function U(t,e){for(;(t=t[e])&&1!==t.nodeType;);return t}b.fn.extend({has:function(t){var e=b(t,this),n=e.length;return this.filter(function(){for(var t=0;t-1:1===n.nodeType&&b.find.matchesSelector(n,t))){o.push(n);break}return this.pushStack(o.length>1?b.uniqueSort(o):o)},index:function(t){return t?"string"==typeof t?f.call(b(t),this[0]):f.call(this,t.jquery?t[0]:t):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(t,e){return this.pushStack(b.uniqueSort(b.merge(this.get(),b(t,e))))},addBack:function(t){return this.add(null==t?this.prevObject:this.prevObject.filter(t))}}),b.each({parent:function(t){var e=t.parentNode;return e&&11!==e.nodeType?e:null},parents:function(t){return A(t,"parentNode")},parentsUntil:function(t,e,n){return A(t,"parentNode",n)},next:function(t){return U(t,"nextSibling")},prev:function(t){return U(t,"previousSibling")},nextAll:function(t){return A(t,"nextSibling")},prevAll:function(t){return A(t,"previousSibling")},nextUntil:function(t,e,n){return A(t,"nextSibling",n)},prevUntil:function(t,e,n){return A(t,"previousSibling",n)},siblings:function(t){return N((t.parentNode||{}).firstChild,t)},children:function(t){return N(t.firstChild)},contents:function(t){return O(t,"iframe")?t.contentDocument:(O(t,"template")&&(t=t.content||t),b.merge([],t.childNodes))}},function(t,e){b.fn[t]=function(n,r){var i=b.map(this,e,n);return"Until"!==t.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=b.filter(r,i)),this.length>1&&(M[t]||b.uniqueSort(i),L.test(t)&&i.reverse()),this.pushStack(i)}});var F=/[^\x20\t\r\n\f]+/g;function W(t){return t}function z(t){throw t}function R(t,e,n,r){var i;try{t&&g(i=t.promise)?i.call(t).done(e).fail(n):t&&g(i=t.then)?i.call(t,e,n):e.apply(void 0,[t].slice(r))}catch(t){n.apply(void 0,[t])}}b.Callbacks=function(t){t="string"==typeof t?function(t){var e={};return b.each(t.match(F)||[],function(t,n){e[n]=!0}),e}(t):b.extend({},t);var e,n,r,i,o=[],a=[],s=-1,l=function(){for(i=i||t.once,r=e=!0;a.length;s=-1)for(n=a.shift();++s-1;)o.splice(n,1),n<=s&&s--}),this},has:function(t){return t?b.inArray(t,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return i=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return i=a=[],n||e||(o=n=""),this},locked:function(){return!!i},fireWith:function(t,n){return i||(n=[t,(n=n||[]).slice?n.slice():n],a.push(n),e||l()),this},fire:function(){return u.fireWith(this,arguments),this},fired:function(){return!!r}};return u},b.extend({Deferred:function(t){var e=[["notify","progress",b.Callbacks("memory"),b.Callbacks("memory"),2],["resolve","done",b.Callbacks("once memory"),b.Callbacks("once memory"),0,"resolved"],["reject","fail",b.Callbacks("once memory"),b.Callbacks("once memory"),1,"rejected"]],r="pending",i={state:function(){return r},always:function(){return o.done(arguments).fail(arguments),this},catch:function(t){return i.then(null,t)},pipe:function(){var t=arguments;return b.Deferred(function(n){b.each(e,function(e,r){var i=g(t[r[4]])&&t[r[4]];o[r[1]](function(){var t=i&&i.apply(this,arguments);t&&g(t.promise)?t.promise().progress(n.notify).done(n.resolve).fail(n.reject):n[r[0]+"With"](this,i?[t]:arguments)})}),t=null}).promise()},then:function(t,r,i){var o=0;function a(t,e,r,i){return function(){var s=this,l=arguments,u=function(){var n,u;if(!(t=o&&(r!==z&&(s=void 0,l=[n]),e.rejectWith(s,l))}};t?c():(b.Deferred.getStackHook&&(c.stackTrace=b.Deferred.getStackHook()),n.setTimeout(c))}}return b.Deferred(function(n){e[0][3].add(a(0,n,g(i)?i:W,n.notifyWith)),e[1][3].add(a(0,n,g(t)?t:W)),e[2][3].add(a(0,n,g(r)?r:z))}).promise()},promise:function(t){return null!=t?b.extend(t,i):i}},o={};return b.each(e,function(t,n){var a=n[2],s=n[5];i[n[1]]=a.add,s&&a.add(function(){r=s},e[3-t][2].disable,e[3-t][3].disable,e[0][2].lock,e[0][3].lock),a.add(n[3].fire),o[n[0]]=function(){return o[n[0]+"With"](this===o?void 0:this,arguments),this},o[n[0]+"With"]=a.fireWith}),i.promise(o),t&&t.call(o,o),o},when:function(t){var e=arguments.length,n=e,r=Array(n),i=l.call(arguments),o=b.Deferred(),a=function(t){return function(n){r[t]=this,i[t]=arguments.length>1?l.call(arguments):n,--e||o.resolveWith(r,i)}};if(e<=1&&(R(t,o.done(a(n)).resolve,o.reject,!e),"pending"===o.state()||g(i[n]&&i[n].then)))return o.then();for(;n--;)R(i[n],a(n),o.reject);return o.promise()}});var $=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;b.Deferred.exceptionHook=function(t,e){n.console&&n.console.warn&&t&&$.test(t.name)&&n.console.warn("jQuery.Deferred exception: "+t.message,t.stack,e)},b.readyException=function(t){n.setTimeout(function(){throw t})};var K=b.Deferred();function Y(){a.removeEventListener("DOMContentLoaded",Y),n.removeEventListener("load",Y),b.ready()}b.fn.ready=function(t){return K.then(t).catch(function(t){b.readyException(t)}),this},b.extend({isReady:!1,readyWait:1,ready:function(t){(!0===t?--b.readyWait:b.isReady)||(b.isReady=!0,!0!==t&&--b.readyWait>0||K.resolveWith(a,[b]))}}),b.ready.then=K.then,"complete"===a.readyState||"loading"!==a.readyState&&!a.documentElement.doScroll?n.setTimeout(b.ready):(a.addEventListener("DOMContentLoaded",Y),n.addEventListener("load",Y));var V=function(t,e,n,r,i,o,a){var s=0,l=t.length,u=null==n;if("object"===E(n))for(s in i=!0,n)V(t,e,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,g(r)||(a=!0),u&&(a?(e.call(t,r),e=null):(u=e,e=function(t,e,n){return u.call(b(t),n)})),e))for(;s1,null,!0)},removeData:function(t){return this.each(function(){H.remove(this,t)})}}),b.extend({queue:function(t,e,n){var r;if(t)return e=(e||"fx")+"queue",r=q.get(t,e),n&&(!r||Array.isArray(n)?r=q.access(t,e,b.makeArray(n)):r.push(n)),r||[]},dequeue:function(t,e){e=e||"fx";var n=b.queue(t,e),r=n.length,i=n.shift(),o=b._queueHooks(t,e);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===e&&n.unshift("inprogress"),delete o.stop,i.call(t,function(){b.dequeue(t,e)},o)),!r&&o&&o.empty.fire()},_queueHooks:function(t,e){var n=e+"queueHooks";return q.get(t,n)||q.access(t,n,{empty:b.Callbacks("once memory").add(function(){q.remove(t,[e+"queue",n])})})}}),b.fn.extend({queue:function(t,e){var n=2;return"string"!=typeof t&&(e=t,t="fx",n--),arguments.length\x20\t\r\n\f]+)/i,ht=/^$|^module$|\/(?:java|ecma)script/i,vt={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function mt(t,e){var n;return n=void 0!==t.getElementsByTagName?t.getElementsByTagName(e||"*"):void 0!==t.querySelectorAll?t.querySelectorAll(e||"*"):[],void 0===e||e&&O(t,e)?b.merge([t],n):n}function yt(t,e){for(var n=0,r=t.length;n-1)i&&i.push(o);else if(u=b.contains(o.ownerDocument,o),a=mt(f.appendChild(o),"script"),u&&yt(a),n)for(c=0;o=a[c++];)ht.test(o.type||"")&&n.push(o);return f}gt=a.createDocumentFragment().appendChild(a.createElement("div")),(wt=a.createElement("input")).setAttribute("type","radio"),wt.setAttribute("checked","checked"),wt.setAttribute("name","t"),gt.appendChild(wt),y.checkClone=gt.cloneNode(!0).cloneNode(!0).lastChild.checked,gt.innerHTML="",y.noCloneChecked=!!gt.cloneNode(!0).lastChild.defaultValue;var Et=a.documentElement,bt=/^key/,xt=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ct=/^([^.]*)(?:\.(.+)|)/;function St(){return!0}function At(){return!1}function Nt(){try{return a.activeElement}catch(t){}}function Dt(t,e,n,r,i,o){var a,s;if("object"==typeof e){for(s in"string"!=typeof n&&(r=r||n,n=void 0),e)Dt(t,s,n,r,e[s],o);return t}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=At;else if(!i)return t;return 1===o&&(a=i,(i=function(t){return b().off(t),a.apply(this,arguments)}).guid=a.guid||(a.guid=b.guid++)),t.each(function(){b.event.add(this,e,i,r,n)})}b.event={global:{},add:function(t,e,n,r,i){var o,a,s,l,u,c,f,p,d,h,v,m=q.get(t);if(m)for(n.handler&&(n=(o=n).handler,i=o.selector),i&&b.find.matchesSelector(Et,i),n.guid||(n.guid=b.guid++),(l=m.events)||(l=m.events={}),(a=m.handle)||(a=m.handle=function(e){return void 0!==b&&b.event.triggered!==e.type?b.event.dispatch.apply(t,arguments):void 0}),u=(e=(e||"").match(F)||[""]).length;u--;)d=v=(s=Ct.exec(e[u])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=b.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=b.event.special[d]||{},c=b.extend({type:d,origType:v,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&b.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=l[d])||((p=l[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),b.event.global[d]=!0)},remove:function(t,e,n,r,i){var o,a,s,l,u,c,f,p,d,h,v,m=q.hasData(t)&&q.get(t);if(m&&(l=m.events)){for(u=(e=(e||"").match(F)||[""]).length;u--;)if(d=v=(s=Ct.exec(e[u])||[])[1],h=(s[2]||"").split(".").sort(),d){for(f=b.event.special[d]||{},p=l[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;o--;)c=p[o],!i&&v!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(t,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(t,h,m.handle)||b.removeEvent(t,d,m.handle),delete l[d])}else for(d in l)b.event.remove(t,d+e[u],n,r,!0);b.isEmptyObject(l)&&q.remove(t,"handle events")}},dispatch:function(t){var e,n,r,i,o,a,s=b.event.fix(t),l=new Array(arguments.length),u=(q.get(this,"events")||{})[s.type]||[],c=b.event.special[s.type]||{};for(l[0]=s,e=1;e=1))for(;u!==this;u=u.parentNode||this)if(1===u.nodeType&&("click"!==t.type||!0!==u.disabled)){for(o=[],a={},n=0;n-1:b.find(i,this,null,[u]).length),a[i]&&o.push(r);o.length&&s.push({elem:u,handlers:o})}return u=this,l\x20\t\r\n\f]*)[^>]*)\/>/gi,kt=/\s*$/g;function jt(t,e){return O(t,"table")&&O(11!==e.nodeType?e:e.firstChild,"tr")&&b(t).children("tbody")[0]||t}function Lt(t){return t.type=(null!==t.getAttribute("type"))+"/"+t.type,t}function Mt(t){return"true/"===(t.type||"").slice(0,5)?t.type=t.type.slice(5):t.removeAttribute("type"),t}function Ut(t,e){var n,r,i,o,a,s,l,u;if(1===e.nodeType){if(q.hasData(t)&&(o=q.access(t),a=q.set(e,o),u=o.events))for(i in delete a.handle,a.events={},u)for(n=0,r=u[i].length;n1&&"string"==typeof h&&!y.checkClone&&Pt.test(h))return t.each(function(i){var o=t.eq(i);v&&(e[0]=h.call(this,i,o.html())),Ft(o,e,n,r)});if(p&&(o=(i=Tt(e,t[0].ownerDocument,!1,t,r)).firstChild,1===i.childNodes.length&&(i=o),o||r)){for(s=(a=b.map(mt(i,"script"),Lt)).length;f")},clone:function(t,e,n){var r,i,o,a,s,l,u,c=t.cloneNode(!0),f=b.contains(t.ownerDocument,t);if(!(y.noCloneChecked||1!==t.nodeType&&11!==t.nodeType||b.isXMLDoc(t)))for(a=mt(c),r=0,i=(o=mt(t)).length;r0&&yt(a,!f&&mt(t,"script")),c},cleanData:function(t){for(var e,n,r,i=b.event.special,o=0;void 0!==(n=t[o]);o++)if(B(n)){if(e=n[q.expando]){if(e.events)for(r in e.events)i[r]?b.event.remove(n,r):b.removeEvent(n,r,e.handle);n[q.expando]=void 0}n[H.expando]&&(n[H.expando]=void 0)}}}),b.fn.extend({detach:function(t){return Wt(this,t,!0)},remove:function(t){return Wt(this,t)},text:function(t){return V(this,function(t){return void 0===t?b.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=t)})},null,t,arguments.length)},append:function(){return Ft(this,arguments,function(t){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||jt(this,t).appendChild(t)})},prepend:function(){return Ft(this,arguments,function(t){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var e=jt(this,t);e.insertBefore(t,e.firstChild)}})},before:function(){return Ft(this,arguments,function(t){this.parentNode&&this.parentNode.insertBefore(t,this)})},after:function(){return Ft(this,arguments,function(t){this.parentNode&&this.parentNode.insertBefore(t,this.nextSibling)})},empty:function(){for(var t,e=0;null!=(t=this[e]);e++)1===t.nodeType&&(b.cleanData(mt(t,!1)),t.textContent="");return this},clone:function(t,e){return t=null!=t&&t,e=null==e?t:e,this.map(function(){return b.clone(this,t,e)})},html:function(t){return V(this,function(t){var e=this[0]||{},n=0,r=this.length;if(void 0===t&&1===e.nodeType)return e.innerHTML;if("string"==typeof t&&!kt.test(t)&&!vt[(dt.exec(t)||["",""])[1].toLowerCase()]){t=b.htmlPrefilter(t);try{for(;n=0&&(l+=Math.max(0,Math.ceil(t["offset"+e[0].toUpperCase()+e.slice(1)]-o-l-s-.5))),l}function te(t,e,n){var r=Rt(t),i=Kt(t,e,r),o="border-box"===b.css(t,"boxSizing",!1,r),a=o;if(zt.test(i)){if(!n)return i;i="auto"}return a=a&&(y.boxSizingReliable()||i===t.style[e]),("auto"===i||!parseFloat(i)&&"inline"===b.css(t,"display",!1,r))&&(i=t["offset"+e[0].toUpperCase()+e.slice(1)],a=!0),(i=parseFloat(i)||0)+Ht(t,e,n||(o?"border":"content"),a,r,i)+"px"}function ee(t,e,n,r,i){return new ee.prototype.init(t,e,n,r,i)}b.extend({cssHooks:{opacity:{get:function(t,e){if(e){var n=Kt(t,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(t,e,n,r){if(t&&3!==t.nodeType&&8!==t.nodeType&&t.style){var i,o,a,s=Z(e),l=Xt.test(e),u=t.style;if(l||(e=Gt(s)),a=b.cssHooks[e]||b.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(t,!1,r))?i:u[e];"string"===(o=typeof n)&&(i=it.exec(n))&&i[1]&&(n=lt(t,e,i),o="number"),null!=n&&n==n&&("number"===o&&(n+=i&&i[3]||(b.cssNumber[s]?"":"px")),y.clearCloneStyle||""!==n||0!==e.indexOf("background")||(u[e]="inherit"),a&&"set"in a&&void 0===(n=a.set(t,n,r))||(l?u.setProperty(e,n):u[e]=n))}},css:function(t,e,n,r){var i,o,a,s=Z(e);return Xt.test(e)||(e=Gt(s)),(a=b.cssHooks[e]||b.cssHooks[s])&&"get"in a&&(i=a.get(t,!0,n)),void 0===i&&(i=Kt(t,e,r)),"normal"===i&&e in Jt&&(i=Jt[e]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),b.each(["height","width"],function(t,e){b.cssHooks[e]={get:function(t,n,r){if(n)return!Vt.test(b.css(t,"display"))||t.getClientRects().length&&t.getBoundingClientRect().width?te(t,e,r):st(t,Qt,function(){return te(t,e,r)})},set:function(t,n,r){var i,o=Rt(t),a="border-box"===b.css(t,"boxSizing",!1,o),s=r&&Ht(t,e,r,a,o);return a&&y.scrollboxSize()===o.position&&(s-=Math.ceil(t["offset"+e[0].toUpperCase()+e.slice(1)]-parseFloat(o[e])-Ht(t,e,"border",!1,o)-.5)),s&&(i=it.exec(n))&&"px"!==(i[3]||"px")&&(t.style[e]=n,n=b.css(t,e)),qt(0,n,s)}}}),b.cssHooks.marginLeft=Yt(y.reliableMarginLeft,function(t,e){if(e)return(parseFloat(Kt(t,"marginLeft"))||t.getBoundingClientRect().left-st(t,{marginLeft:0},function(){return t.getBoundingClientRect().left}))+"px"}),b.each({margin:"",padding:"",border:"Width"},function(t,e){b.cssHooks[t+e]={expand:function(n){for(var r=0,i={},o="string"==typeof n?n.split(" "):[n];r<4;r++)i[t+ot[r]+e]=o[r]||o[r-2]||o[0];return i}},"margin"!==t&&(b.cssHooks[t+e].set=qt)}),b.fn.extend({css:function(t,e){return V(this,function(t,e,n){var r,i,o={},a=0;if(Array.isArray(e)){for(r=Rt(t),i=e.length;a1)}}),b.Tween=ee,ee.prototype={constructor:ee,init:function(t,e,n,r,i,o){this.elem=t,this.prop=n,this.easing=i||b.easing._default,this.options=e,this.start=this.now=this.cur(),this.end=r,this.unit=o||(b.cssNumber[n]?"":"px")},cur:function(){var t=ee.propHooks[this.prop];return t&&t.get?t.get(this):ee.propHooks._default.get(this)},run:function(t){var e,n=ee.propHooks[this.prop];return this.options.duration?this.pos=e=b.easing[this.easing](t,this.options.duration*t,0,1,this.options.duration):this.pos=e=t,this.now=(this.end-this.start)*e+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):ee.propHooks._default.set(this),this}},ee.prototype.init.prototype=ee.prototype,ee.propHooks={_default:{get:function(t){var e;return 1!==t.elem.nodeType||null!=t.elem[t.prop]&&null==t.elem.style[t.prop]?t.elem[t.prop]:(e=b.css(t.elem,t.prop,""))&&"auto"!==e?e:0},set:function(t){b.fx.step[t.prop]?b.fx.step[t.prop](t):1!==t.elem.nodeType||null==t.elem.style[b.cssProps[t.prop]]&&!b.cssHooks[t.prop]?t.elem[t.prop]=t.now:b.style(t.elem,t.prop,t.now+t.unit)}}},ee.propHooks.scrollTop=ee.propHooks.scrollLeft={set:function(t){t.elem.nodeType&&t.elem.parentNode&&(t.elem[t.prop]=t.now)}},b.easing={linear:function(t){return t},swing:function(t){return.5-Math.cos(t*Math.PI)/2},_default:"swing"},b.fx=ee.prototype.init,b.fx.step={};var ne,re,ie=/^(?:toggle|show|hide)$/,oe=/queueHooks$/;function ae(){re&&(!1===a.hidden&&n.requestAnimationFrame?n.requestAnimationFrame(ae):n.setTimeout(ae,b.fx.interval),b.fx.tick())}function se(){return n.setTimeout(function(){ne=void 0}),ne=Date.now()}function le(t,e){var n,r=0,i={height:t};for(e=e?1:0;r<4;r+=2-e)i["margin"+(n=ot[r])]=i["padding"+n]=t;return e&&(i.opacity=i.width=t),i}function ue(t,e,n){for(var r,i=(ce.tweeners[e]||[]).concat(ce.tweeners["*"]),o=0,a=i.length;o1)},removeAttr:function(t){return this.each(function(){b.removeAttr(this,t)})}}),b.extend({attr:function(t,e,n){var r,i,o=t.nodeType;if(3!==o&&8!==o&&2!==o)return void 0===t.getAttribute?b.prop(t,e,n):(1===o&&b.isXMLDoc(t)||(i=b.attrHooks[e.toLowerCase()]||(b.expr.match.bool.test(e)?fe:void 0)),void 0!==n?null===n?void b.removeAttr(t,e):i&&"set"in i&&void 0!==(r=i.set(t,n,e))?r:(t.setAttribute(e,n+""),n):i&&"get"in i&&null!==(r=i.get(t,e))?r:null==(r=b.find.attr(t,e))?void 0:r)},attrHooks:{type:{set:function(t,e){if(!y.radioValue&&"radio"===e&&O(t,"input")){var n=t.value;return t.setAttribute("type",e),n&&(t.value=n),e}}}},removeAttr:function(t,e){var n,r=0,i=e&&e.match(F);if(i&&1===t.nodeType)for(;n=i[r++];)t.removeAttribute(n)}}),fe={set:function(t,e,n){return!1===e?b.removeAttr(t,n):t.setAttribute(n,n),n}},b.each(b.expr.match.bool.source.match(/\w+/g),function(t,e){var n=pe[e]||b.find.attr;pe[e]=function(t,e,r){var i,o,a=e.toLowerCase();return r||(o=pe[a],pe[a]=i,i=null!=n(t,e,r)?a:null,pe[a]=o),i}});var de=/^(?:input|select|textarea|button)$/i,he=/^(?:a|area)$/i;function ve(t){return(t.match(F)||[]).join(" ")}function me(t){return t.getAttribute&&t.getAttribute("class")||""}function ye(t){return Array.isArray(t)?t:"string"==typeof t&&t.match(F)||[]}b.fn.extend({prop:function(t,e){return V(this,b.prop,t,e,arguments.length>1)},removeProp:function(t){return this.each(function(){delete this[b.propFix[t]||t]})}}),b.extend({prop:function(t,e,n){var r,i,o=t.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&b.isXMLDoc(t)||(e=b.propFix[e]||e,i=b.propHooks[e]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(t,n,e))?r:t[e]=n:i&&"get"in i&&null!==(r=i.get(t,e))?r:t[e]},propHooks:{tabIndex:{get:function(t){var e=b.find.attr(t,"tabindex");return e?parseInt(e,10):de.test(t.nodeName)||he.test(t.nodeName)&&t.href?0:-1}}},propFix:{for:"htmlFor",class:"className"}}),y.optSelected||(b.propHooks.selected={get:function(t){var e=t.parentNode;return e&&e.parentNode&&e.parentNode.selectedIndex,null},set:function(t){var e=t.parentNode;e&&(e.selectedIndex,e.parentNode&&e.parentNode.selectedIndex)}}),b.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){b.propFix[this.toLowerCase()]=this}),b.fn.extend({addClass:function(t){var e,n,r,i,o,a,s,l=0;if(g(t))return this.each(function(e){b(this).addClass(t.call(this,e,me(this)))});if((e=ye(t)).length)for(;n=this[l++];)if(i=me(n),r=1===n.nodeType&&" "+ve(i)+" "){for(a=0;o=e[a++];)r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=ve(r))&&n.setAttribute("class",s)}return this},removeClass:function(t){var e,n,r,i,o,a,s,l=0;if(g(t))return this.each(function(e){b(this).removeClass(t.call(this,e,me(this)))});if(!arguments.length)return this.attr("class","");if((e=ye(t)).length)for(;n=this[l++];)if(i=me(n),r=1===n.nodeType&&" "+ve(i)+" "){for(a=0;o=e[a++];)for(;r.indexOf(" "+o+" ")>-1;)r=r.replace(" "+o+" "," ");i!==(s=ve(r))&&n.setAttribute("class",s)}return this},toggleClass:function(t,e){var n=typeof t,r="string"===n||Array.isArray(t);return"boolean"==typeof e&&r?e?this.addClass(t):this.removeClass(t):g(t)?this.each(function(n){b(this).toggleClass(t.call(this,n,me(this),e),e)}):this.each(function(){var e,i,o,a;if(r)for(i=0,o=b(this),a=ye(t);e=a[i++];)o.hasClass(e)?o.removeClass(e):o.addClass(e);else void 0!==t&&"boolean"!==n||((e=me(this))&&q.set(this,"__className__",e),this.setAttribute&&this.setAttribute("class",e||!1===t?"":q.get(this,"__className__")||""))})},hasClass:function(t){var e,n,r=0;for(e=" "+t+" ";n=this[r++];)if(1===n.nodeType&&(" "+ve(me(n))+" ").indexOf(e)>-1)return!0;return!1}});var ge=/\r/g;b.fn.extend({val:function(t){var e,n,r,i=this[0];return arguments.length?(r=g(t),this.each(function(n){var i;1===this.nodeType&&(null==(i=r?t.call(this,n,b(this).val()):t)?i="":"number"==typeof i?i+="":Array.isArray(i)&&(i=b.map(i,function(t){return null==t?"":t+""})),(e=b.valHooks[this.type]||b.valHooks[this.nodeName.toLowerCase()])&&"set"in e&&void 0!==e.set(this,i,"value")||(this.value=i))})):i?(e=b.valHooks[i.type]||b.valHooks[i.nodeName.toLowerCase()])&&"get"in e&&void 0!==(n=e.get(i,"value"))?n:"string"==typeof(n=i.value)?n.replace(ge,""):null==n?"":n:void 0}}),b.extend({valHooks:{option:{get:function(t){var e=b.find.attr(t,"value");return null!=e?e:ve(b.text(t))}},select:{get:function(t){var e,n,r,i=t.options,o=t.selectedIndex,a="select-one"===t.type,s=a?null:[],l=a?o+1:i.length;for(r=o<0?l:a?o:0;r-1)&&(n=!0);return n||(t.selectedIndex=-1),o}}}}),b.each(["radio","checkbox"],function(){b.valHooks[this]={set:function(t,e){if(Array.isArray(e))return t.checked=b.inArray(b(t).val(),e)>-1}},y.checkOn||(b.valHooks[this].get=function(t){return null===t.getAttribute("value")?"on":t.value})}),y.focusin="onfocusin"in n;var we=/^(?:focusinfocus|focusoutblur)$/,_e=function(t){t.stopPropagation()};b.extend(b.event,{trigger:function(t,e,r,i){var o,s,l,u,c,f,p,d,v=[r||a],m=h.call(t,"type")?t.type:t,y=h.call(t,"namespace")?t.namespace.split("."):[];if(s=d=l=r=r||a,3!==r.nodeType&&8!==r.nodeType&&!we.test(m+b.event.triggered)&&(m.indexOf(".")>-1&&(y=m.split("."),m=y.shift(),y.sort()),c=m.indexOf(":")<0&&"on"+m,(t=t[b.expando]?t:new b.Event(m,"object"==typeof t&&t)).isTrigger=i?2:3,t.namespace=y.join("."),t.rnamespace=t.namespace?new RegExp("(^|\\.)"+y.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,t.result=void 0,t.target||(t.target=r),e=null==e?[t]:b.makeArray(e,[t]),p=b.event.special[m]||{},i||!p.trigger||!1!==p.trigger.apply(r,e))){if(!i&&!p.noBubble&&!w(r)){for(u=p.delegateType||m,we.test(u+m)||(s=s.parentNode);s;s=s.parentNode)v.push(s),l=s;l===(r.ownerDocument||a)&&v.push(l.defaultView||l.parentWindow||n)}for(o=0;(s=v[o++])&&!t.isPropagationStopped();)d=s,t.type=o>1?u:p.bindType||m,(f=(q.get(s,"events")||{})[t.type]&&q.get(s,"handle"))&&f.apply(s,e),(f=c&&s[c])&&f.apply&&B(s)&&(t.result=f.apply(s,e),!1===t.result&&t.preventDefault());return t.type=m,i||t.isDefaultPrevented()||p._default&&!1!==p._default.apply(v.pop(),e)||!B(r)||c&&g(r[m])&&!w(r)&&((l=r[c])&&(r[c]=null),b.event.triggered=m,t.isPropagationStopped()&&d.addEventListener(m,_e),r[m](),t.isPropagationStopped()&&d.removeEventListener(m,_e),b.event.triggered=void 0,l&&(r[c]=l)),t.result}},simulate:function(t,e,n){var r=b.extend(new b.Event,n,{type:t,isSimulated:!0});b.event.trigger(r,null,e)}}),b.fn.extend({trigger:function(t,e){return this.each(function(){b.event.trigger(t,e,this)})},triggerHandler:function(t,e){var n=this[0];if(n)return b.event.trigger(t,e,n,!0)}}),y.focusin||b.each({focus:"focusin",blur:"focusout"},function(t,e){var n=function(t){b.event.simulate(e,t.target,b.event.fix(t))};b.event.special[e]={setup:function(){var r=this.ownerDocument||this,i=q.access(r,e);i||r.addEventListener(t,n,!0),q.access(r,e,(i||0)+1)},teardown:function(){var r=this.ownerDocument||this,i=q.access(r,e)-1;i?q.access(r,e,i):(r.removeEventListener(t,n,!0),q.remove(r,e))}}});var Te=n.location,Ee=Date.now(),be=/\?/;b.parseXML=function(t){var e;if(!t||"string"!=typeof t)return null;try{e=(new n.DOMParser).parseFromString(t,"text/xml")}catch(t){e=void 0}return e&&!e.getElementsByTagName("parsererror").length||b.error("Invalid XML: "+t),e};var xe=/\[\]$/,Ce=/\r?\n/g,Se=/^(?:submit|button|image|reset|file)$/i,Ae=/^(?:input|select|textarea|keygen)/i;function Ne(t,e,n,r){var i;if(Array.isArray(e))b.each(e,function(e,i){n||xe.test(t)?r(t,i):Ne(t+"["+("object"==typeof i&&null!=i?e:"")+"]",i,n,r)});else if(n||"object"!==E(e))r(t,e);else for(i in e)Ne(t+"["+i+"]",e[i],n,r)}b.param=function(t,e){var n,r=[],i=function(t,e){var n=g(e)?e():e;r[r.length]=encodeURIComponent(t)+"="+encodeURIComponent(null==n?"":n)};if(Array.isArray(t)||t.jquery&&!b.isPlainObject(t))b.each(t,function(){i(this.name,this.value)});else for(n in t)Ne(n,t[n],e,i);return r.join("&")},b.fn.extend({serialize:function(){return b.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var t=b.prop(this,"elements");return t?b.makeArray(t):this}).filter(function(){var t=this.type;return this.name&&!b(this).is(":disabled")&&Ae.test(this.nodeName)&&!Se.test(t)&&(this.checked||!pt.test(t))}).map(function(t,e){var n=b(this).val();return null==n?null:Array.isArray(n)?b.map(n,function(t){return{name:e.name,value:t.replace(Ce,"\r\n")}}):{name:e.name,value:n.replace(Ce,"\r\n")}}).get()}});var De=/%20/g,Oe=/#.*$/,ke=/([?&])_=[^&]*/,Pe=/^(.*?):[ \t]*([^\r\n]*)$/gm,Ie=/^(?:GET|HEAD)$/,je=/^\/\//,Le={},Me={},Ue="*/".concat("*"),Fe=a.createElement("a");function We(t){return function(e,n){"string"!=typeof e&&(n=e,e="*");var r,i=0,o=e.toLowerCase().match(F)||[];if(g(n))for(;r=o[i++];)"+"===r[0]?(r=r.slice(1)||"*",(t[r]=t[r]||[]).unshift(n)):(t[r]=t[r]||[]).push(n)}}function ze(t,e,n,r){var i={},o=t===Me;function a(s){var l;return i[s]=!0,b.each(t[s]||[],function(t,s){var u=s(e,n,r);return"string"!=typeof u||o||i[u]?o?!(l=u):void 0:(e.dataTypes.unshift(u),a(u),!1)}),l}return a(e.dataTypes[0])||!i["*"]&&a("*")}function Re(t,e){var n,r,i=b.ajaxSettings.flatOptions||{};for(n in e)void 0!==e[n]&&((i[n]?t:r||(r={}))[n]=e[n]);return r&&b.extend(!0,t,r),t}Fe.href=Te.href,b.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:Te.href,type:"GET",isLocal:/^(?:about|app|app-storage|.+-extension|file|res|widget):$/.test(Te.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Ue,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":b.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(t,e){return e?Re(Re(t,b.ajaxSettings),e):Re(b.ajaxSettings,t)},ajaxPrefilter:We(Le),ajaxTransport:We(Me),ajax:function(t,e){"object"==typeof t&&(e=t,t=void 0),e=e||{};var r,i,o,s,l,u,c,f,p,d,h=b.ajaxSetup({},e),v=h.context||h,m=h.context&&(v.nodeType||v.jquery)?b(v):b.event,y=b.Deferred(),g=b.Callbacks("once memory"),w=h.statusCode||{},_={},T={},E="canceled",x={readyState:0,getResponseHeader:function(t){var e;if(c){if(!s)for(s={};e=Pe.exec(o);)s[e[1].toLowerCase()]=e[2];e=s[t.toLowerCase()]}return null==e?null:e},getAllResponseHeaders:function(){return c?o:null},setRequestHeader:function(t,e){return null==c&&(t=T[t.toLowerCase()]=T[t.toLowerCase()]||t,_[t]=e),this},overrideMimeType:function(t){return null==c&&(h.mimeType=t),this},statusCode:function(t){var e;if(t)if(c)x.always(t[x.status]);else for(e in t)w[e]=[w[e],t[e]];return this},abort:function(t){var e=t||E;return r&&r.abort(e),C(0,e),this}};if(y.promise(x),h.url=((t||h.url||Te.href)+"").replace(je,Te.protocol+"//"),h.type=e.method||e.type||h.method||h.type,h.dataTypes=(h.dataType||"*").toLowerCase().match(F)||[""],null==h.crossDomain){u=a.createElement("a");try{u.href=h.url,u.href=u.href,h.crossDomain=Fe.protocol+"//"+Fe.host!=u.protocol+"//"+u.host}catch(t){h.crossDomain=!0}}if(h.data&&h.processData&&"string"!=typeof h.data&&(h.data=b.param(h.data,h.traditional)),ze(Le,h,e,x),c)return x;for(p in(f=b.event&&h.global)&&0==b.active++&&b.event.trigger("ajaxStart"),h.type=h.type.toUpperCase(),h.hasContent=!Ie.test(h.type),i=h.url.replace(Oe,""),h.hasContent?h.data&&h.processData&&0===(h.contentType||"").indexOf("application/x-www-form-urlencoded")&&(h.data=h.data.replace(De,"+")):(d=h.url.slice(i.length),h.data&&(h.processData||"string"==typeof h.data)&&(i+=(be.test(i)?"&":"?")+h.data,delete h.data),!1===h.cache&&(i=i.replace(ke,"$1"),d=(be.test(i)?"&":"?")+"_="+Ee+++d),h.url=i+d),h.ifModified&&(b.lastModified[i]&&x.setRequestHeader("If-Modified-Since",b.lastModified[i]),b.etag[i]&&x.setRequestHeader("If-None-Match",b.etag[i])),(h.data&&h.hasContent&&!1!==h.contentType||e.contentType)&&x.setRequestHeader("Content-Type",h.contentType),x.setRequestHeader("Accept",h.dataTypes[0]&&h.accepts[h.dataTypes[0]]?h.accepts[h.dataTypes[0]]+("*"!==h.dataTypes[0]?", "+Ue+"; q=0.01":""):h.accepts["*"]),h.headers)x.setRequestHeader(p,h.headers[p]);if(h.beforeSend&&(!1===h.beforeSend.call(v,x,h)||c))return x.abort();if(E="abort",g.add(h.complete),x.done(h.success),x.fail(h.error),r=ze(Me,h,e,x)){if(x.readyState=1,f&&m.trigger("ajaxSend",[x,h]),c)return x;h.async&&h.timeout>0&&(l=n.setTimeout(function(){x.abort("timeout")},h.timeout));try{c=!1,r.send(_,C)}catch(t){if(c)throw t;C(-1,t)}}else C(-1,"No Transport");function C(t,e,a,s){var u,p,d,_,T,E=e;c||(c=!0,l&&n.clearTimeout(l),r=void 0,o=s||"",x.readyState=t>0?4:0,u=t>=200&&t<300||304===t,a&&(_=function(t,e,n){for(var r,i,o,a,s=t.contents,l=t.dataTypes;"*"===l[0];)l.shift(),void 0===r&&(r=t.mimeType||e.getResponseHeader("Content-Type"));if(r)for(i in s)if(s[i]&&s[i].test(r)){l.unshift(i);break}if(l[0]in n)o=l[0];else{for(i in n){if(!l[0]||t.converters[i+" "+l[0]]){o=i;break}a||(a=i)}o=o||a}if(o)return o!==l[0]&&l.unshift(o),n[o]}(h,x,a)),_=function(t,e,n,r){var i,o,a,s,l,u={},c=t.dataTypes.slice();if(c[1])for(a in t.converters)u[a.toLowerCase()]=t.converters[a];for(o=c.shift();o;)if(t.responseFields[o]&&(n[t.responseFields[o]]=e),!l&&r&&t.dataFilter&&(e=t.dataFilter(e,t.dataType)),l=o,o=c.shift())if("*"===o)o=l;else if("*"!==l&&l!==o){if(!(a=u[l+" "+o]||u["* "+o]))for(i in u)if((s=i.split(" "))[1]===o&&(a=u[l+" "+s[0]]||u["* "+s[0]])){!0===a?a=u[i]:!0!==u[i]&&(o=s[0],c.unshift(s[1]));break}if(!0!==a)if(a&&t.throws)e=a(e);else try{e=a(e)}catch(t){return{state:"parsererror",error:a?t:"No conversion from "+l+" to "+o}}}return{state:"success",data:e}}(h,_,x,u),u?(h.ifModified&&((T=x.getResponseHeader("Last-Modified"))&&(b.lastModified[i]=T),(T=x.getResponseHeader("etag"))&&(b.etag[i]=T)),204===t||"HEAD"===h.type?E="nocontent":304===t?E="notmodified":(E=_.state,p=_.data,u=!(d=_.error))):(d=E,!t&&E||(E="error",t<0&&(t=0))),x.status=t,x.statusText=(e||E)+"",u?y.resolveWith(v,[p,E,x]):y.rejectWith(v,[x,E,d]),x.statusCode(w),w=void 0,f&&m.trigger(u?"ajaxSuccess":"ajaxError",[x,h,u?p:d]),g.fireWith(v,[x,E]),f&&(m.trigger("ajaxComplete",[x,h]),--b.active||b.event.trigger("ajaxStop")))}return x},getJSON:function(t,e,n){return b.get(t,e,n,"json")},getScript:function(t,e){return b.get(t,void 0,e,"script")}}),b.each(["get","post"],function(t,e){b[e]=function(t,n,r,i){return g(n)&&(i=i||r,r=n,n=void 0),b.ajax(b.extend({url:t,type:e,dataType:i,data:n,success:r},b.isPlainObject(t)&&t))}}),b._evalUrl=function(t){return b.ajax({url:t,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,throws:!0})},b.fn.extend({wrapAll:function(t){var e;return this[0]&&(g(t)&&(t=t.call(this[0])),e=b(t,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&e.insertBefore(this[0]),e.map(function(){for(var t=this;t.firstElementChild;)t=t.firstElementChild;return t}).append(this)),this},wrapInner:function(t){return g(t)?this.each(function(e){b(this).wrapInner(t.call(this,e))}):this.each(function(){var e=b(this),n=e.contents();n.length?n.wrapAll(t):e.append(t)})},wrap:function(t){var e=g(t);return this.each(function(n){b(this).wrapAll(e?t.call(this,n):t)})},unwrap:function(t){return this.parent(t).not("body").each(function(){b(this).replaceWith(this.childNodes)}),this}}),b.expr.pseudos.hidden=function(t){return!b.expr.pseudos.visible(t)},b.expr.pseudos.visible=function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)},b.ajaxSettings.xhr=function(){try{return new n.XMLHttpRequest}catch(t){}};var $e={0:200,1223:204},Ke=b.ajaxSettings.xhr();y.cors=!!Ke&&"withCredentials"in Ke,y.ajax=Ke=!!Ke,b.ajaxTransport(function(t){var e,r;if(y.cors||Ke&&!t.crossDomain)return{send:function(i,o){var a,s=t.xhr();if(s.open(t.type,t.url,t.async,t.username,t.password),t.xhrFields)for(a in t.xhrFields)s[a]=t.xhrFields[a];for(a in t.mimeType&&s.overrideMimeType&&s.overrideMimeType(t.mimeType),t.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest"),i)s.setRequestHeader(a,i[a]);e=function(t){return function(){e&&(e=r=s.onload=s.onerror=s.onabort=s.ontimeout=s.onreadystatechange=null,"abort"===t?s.abort():"error"===t?"number"!=typeof s.status?o(0,"error"):o(s.status,s.statusText):o($e[s.status]||s.status,s.statusText,"text"!==(s.responseType||"text")||"string"!=typeof s.responseText?{binary:s.response}:{text:s.responseText},s.getAllResponseHeaders()))}},s.onload=e(),r=s.onerror=s.ontimeout=e("error"),void 0!==s.onabort?s.onabort=r:s.onreadystatechange=function(){4===s.readyState&&n.setTimeout(function(){e&&r()})},e=e("abort");try{s.send(t.hasContent&&t.data||null)}catch(t){if(e)throw t}},abort:function(){e&&e()}}}),b.ajaxPrefilter(function(t){t.crossDomain&&(t.contents.script=!1)}),b.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(t){return b.globalEval(t),t}}}),b.ajaxPrefilter("script",function(t){void 0===t.cache&&(t.cache=!1),t.crossDomain&&(t.type="GET")}),b.ajaxTransport("script",function(t){var e,n;if(t.crossDomain)return{send:function(r,i){e=b("