[{"data":1,"prerenderedAt":158661},["ShallowReactive",2],{"search-index-blog":3,"blog-list":917},[4,11,19,24,30,35,41,46,52,57,62,67,72,78,84,90,95,101,107,113,118,125,130,135,141,146,151,156,163,168,174,179,185,190,195,200,205,210,215,221,226,231,236,241,246,251,256,261,266,272,277,282,287,293,298,304,309,314,319,325,330,335,340,345,351,356,363,368,373,378,384,389,394,399,405,410,415,420,426,432,437,443,448,454,459,464,469,474,480,485,490,495,500,505,510,515,521,526,531,537,542,547,552,557,562,567,573,579,584,589,594,599,604,609,614,620,625,630,635,640,645,651,656,661,666,671,676,682,687,692,697,702,707,712,719,724,729,734,739,745,750,755,760,765,770,775,780,786,791,797,802,808,813,818,823,829,834,839,844,849,854,860,865,871,876,881,886,891,896,901,906,912],{"title":5,"path":6,"description":7,"tags":8},"ADOBE ILLUSTRATOR SHORTCUTS","\u002Fblog\u002Fadobe-illustrator-shortcuts","Here are 26 Adobe Illustrator shortcuts that can help you to speed up productivity. I use most of them (in fact, I can’t work without them). Most of shortcuts listed in this article aren’t documented in the software, so keep reading and you’re sure to find at least one new trick to put up your sleeve. Enjoy!",[9,10],"design","illustrator",{"title":12,"path":13,"description":14,"tags":15},"ANGULAR CONTROLLERS SHARE STATE","\u002Fblog\u002Fangular-controllers-share-state","When your Angular.js application expands to a state that you no longer find it easy to understand, it's time you used dependency injection and modularise your application into units of interrelated modules.",[16,17,18],"development","javascript","angular.js",{"title":20,"path":21,"description":22,"tags":23},"ANGULAR TRANSLATE","\u002Fblog\u002Fangular-translate","Angular Translate is an AngularJS module called angular-translate which makes i18n and l10n easier with your Angular application. The acronym i18n stands for internationalization, and l10n for localization.",[16,17,18],{"title":25,"path":26,"description":27,"tags":28},"ANIMATION SPEED IN JAVASCRIPT AND CSS","\u002Fblog\u002Fanimation-speed-in-javascript-and-css","In this article, we go through how JavaScript-based DOM animation libraries, such as Velocity.js and GSAP, are more efficient than jQuery and CSS-based animation libraries. We will discuss how those libraries work, where to use them and what other alternatives are out there for animation.",[16,17,29],"css",{"title":31,"path":32,"description":33,"tags":34},"ARRAY COMPREHENSIONS","\u002Fblog\u002Farray-comprehensions","Array comprehension is creating a list B based on another list A, where each entry of B is the result of a custom operation performed on the items of list A.",[16,17],{"title":36,"path":37,"description":38,"tags":39},"ASYNCHRONOUS JAVASCRIPT WITH ASYNC\u002FAWAIT","\u002Fblog\u002Fasynchronous-javascript-asyncawait","'Promises are great but the its nested syntax can get easily complex and hard to follow.",[16,17,40],"react",{"title":42,"path":43,"description":44,"tags":45},"BABEL & WEBPACK","\u002Fblog\u002Fbabel-webpack","Babel has been one of the big newcomers of JavaScript community in 2015. It allows us to use features from the future of JavaScript. It will transform your futuristic code into a format, browsers understand. You can even use it to develop your own language features. Babel’s built-in JSX support will come in handy here.",[16,17],{"title":47,"path":48,"description":49,"tags":50},"BACKBONE CUSTOMIZING COLLECTIONS","\u002Fblog\u002Fbackbone-customizing-collections","Backbone collections are an ordered set of models, which only use one type of model. Customizing these collections can help your Backbone application to leverage data the way you want.",[16,17,51],"backbone.js",{"title":53,"path":54,"description":55,"tags":56},"BACKBONE – MODELS","\u002Fblog\u002Fbackbone-models","Models are the heart of any JavaScript MVC application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.",[16,17,51],{"title":58,"path":59,"description":60,"tags":61},"BACKBONE PATTERNS","\u002Fblog\u002Fbackbone-patterns","In this article, we’ll discuss different patterns that you can use with popular open-source JavaScript MV* framework, Backbone.js. Developers run into problems when they first use Backbone.js as it provides structure to the application leaving the developer to make decisions on design petterns.",[16,17,51],{"title":63,"path":64,"description":65,"tags":66},"BACKBONE- ROUTERS","\u002Fblog\u002Fbackbone-routers","In the traditional MVC sense Routers don’t necessarily fit the semantics. Though a Backbone \"router\" is still very useful for any application\u002Ffeature that needs URL routing\u002Fhistory capabilities. Backbone routers are used for routing your applications URL’s when using hash tags(#).",[16,17,51],{"title":68,"path":69,"description":70,"tags":71},"BEM","\u002Fblog\u002Fbem","BEM stands for Block, Element, Modifier. BEM is a stricter standard for naming CSS classes for larger projects, where standards need to be enforced. BEM helps scale your project, and add meaning to your CSS. Therefore it is valuable to understand this convention.",[16,29],{"title":73,"path":74,"description":75,"tags":76},"BENEFITS OF AUTOMATED DEPLOYMENT","\u002Fblog\u002Fbenefits-of-automated-deployment","When deploying software manually, the tendancy is to deploy once a month or perhaps once every two or three months. Deployment doesn’t stop for production only, there are test, staging and production as well.",[16,77],"deployment",{"title":79,"path":80,"description":81,"tags":82},"BROWSERSYNC & GULP","\u002Fblog\u002Fbrowsersync-gulp","BrowserSync & Gulp are a two very useful combination when it comes to developing applications efficiently, without having to refresh the web page every time you make a change. Let’s look at what BrowserSync & Gulp are, and how to install and use them.",[16,17,83],"gulp",{"title":85,"path":86,"description":87,"tags":88},"CHROMATIC ABERRATION","\u002Fblog\u002Fchromatic-aberration","In optical lenses, chromatic aberration (also known as achromatism or chromatic distortion) is a type of distortion in which there is a failure of a lens to focus all colors to the same convergence point.",[89],"photography",{"title":91,"path":92,"description":93,"tags":94},"CHROME DEVTOOLS FOR WEB APP DEVELOPERS","\u002Fblog\u002Fchrome-devtools-web-app-developers","The Chrome DevTools (Developer Tools), are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. ",[16,17],{"title":96,"path":97,"description":98,"tags":99},"COFFEESCRIPT INTRODUCTION","\u002Fblog\u002Fcoffeescript-introduction","CoffeeScript is a language that makes JavaScript easier to write and read. It simplifies JavaScript, making it readable and understandable, as well easier to maintain. CoffeeScript compiles into JavaScript",[16,17,100],"coffeescript",{"title":102,"path":103,"description":104,"tags":105},"COFFEESCRIPT – JQUERY","\u002Fblog\u002Fcoffeescript-jquery","Writing jQuery in CoffeeScript, further simplifies the syntax. The jQuery(function($)) can be written as jQuery($) -> or simply $ ->.",[16,17,106,100],"jquery",{"title":108,"path":109,"description":110,"tags":111},"CONTENT AWARE SCALING IN PHOTOSHOP","\u002Fblog\u002Fcontent-aware-scaling-in-photoshop","In Photoshop CS6, content-aware scaling (also known as seam carving) is a cool image-sizing feature.",[9,112],"photoshop",{"title":114,"path":115,"description":116,"tags":117},"CREATE FAVICONS IN PHOTOSHOP","\u002Fblog\u002Fcreate-favicons-in-photoshop","'Having a favicon for your site helps users to find your web site on a bookmarks bar, or among open tabs.",[9,112],{"title":119,"path":120,"description":121,"tags":122},"CREATE A RAILS 5 API APPLICATION","\u002Fblog\u002Fcreate-rails-5-api-application","'Rails 5 ships a new gem rails-api which makes building API only rails apps a breeze.",[16,123,124],"rails","ruby",{"title":126,"path":127,"description":128,"tags":129},"CSS – CLEARING FLOATS","\u002Fblog\u002Fcss-clearing-floats","A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accommodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.",[16,17],{"title":131,"path":132,"description":133,"tags":134},"CSS INTRODUCTION","\u002Fblog\u002Fcss-introduction","Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language, most often used to change the style of web pages written in HTML. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.",[16,29],{"title":136,"path":137,"description":138,"tags":139},"CSS MODULES","\u002Fblog\u002Fcss-modules","A CSS Module is a CSS file in which all class names and animation names are scoped locally by default, eleminating the problems with global nature of the CSS namespace.",[16,17,29,140],"react.js",{"title":142,"path":143,"description":144,"tags":145},"CSS3 MEDIA QUERIES","\u002Fblog\u002Fcss3-media-queries","When you are designing your responisve layout for mobile devices, CSS3 media queries are an essential component on your stylesheets. Let’s discuss how they work and what min-with and max-with work together.",[16,29],{"title":147,"path":148,"description":149,"tags":150},"DEFERRED AND PROMISE IN JQUERY","\u002Fblog\u002Fdeferred-and-promise-in-jquery","Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like Ajax.",[16,17,106],{"title":152,"path":153,"description":154,"tags":155},"DEPLOYING ASP.NET MVC APPLICATIONS","\u002Fblog\u002Fdeploying-aspnet-mvc-applications","In a continuous integration environment, deploying ASP.NET MVC applications are done by a click of a button, triggered by a check-in, and then many moving parts of the integration service will take care of distributing the artifacts to the relevant servers. But here we are discussing about how to get your ASP.NET code to be tested on a local IIS server environment. So let’s start with dependancies, and what needs to be included with the deployment.",[16,17],{"title":157,"path":158,"description":159,"tags":160},"DEVELOP MOBILE APPS WITH PHONEGAP","\u002Fblog\u002Fdevelop-mobile-apps-phonegap","PhoneGap is a web-based mobile development framework based on opened source Cordova project, which allows you to create app store ready mobile applications. PhoneGap allows you to use web technologies such as HTML, CSS and JavaScript for cross platform development. It was created by Nitobi in 2009. In 2011, Nitobi was bought by Adobe, and PhoneGap was donated to Apache Foundation, and PhoneGap was renamed to Cordova.",[16,161,17,162],"mobile","phonegap",{"title":164,"path":165,"description":166,"tags":167},"DODGE BURN AND SPONGE TOOLS IN PHOTOSHOP CS6","\u002Fblog\u002Fdodge-burn-and-sponge-tools-in-photoshop-cs6","The Dodge, Burn, and Sponge tools in Photoshop CS 6 can be used to correct the lighting of an image. Let’s look at each of these tools and what they are useful for.",[9,89,112],{"title":169,"path":170,"description":171,"tags":172},"EMBER & HANDLEBARS","\u002Fblog\u002Fember-handlebars","Before getting into handlebars, let's look at how routing works in Ember.js. Router is solely responsible for all URLs in Ember.",[16,17,173],"ember.js",{"title":175,"path":176,"description":177,"tags":178},"EMBER – RESOURCE ROUTES","\u002Fblog\u002Fember-resource-routes","The difference between resource() and route() in Ember.js is that you should use this.resource for URLs that represent a noun, and this.route for URLs that represent adjectives or verbs modifying those nouns.",[16,17,173],{"title":180,"path":181,"description":182,"tags":183},"ENTITY FRAMEWORK CODE FIRST","\u002Fblog\u002Fentity-framework-code-first","Entity Framework introduced Code First approach from Entity Framework 4.1. This tutorial covers all the features of Entity Framework Code-First. We will start with the basics of code-first and then we will see how we can configure one-to-one, one-to-many and many-to-many relationship with DataAnnotation as well as Fluent API.",[16,184],"csharp",{"title":186,"path":187,"description":188,"tags":189},"ES2020 New Features","\u002Fblog\u002Fes2020-new-features","Since ES2015, updates from the TC39 committee are released annually. Their latest release ES2020 comes with many new features.",[16,17],{"title":191,"path":192,"description":193,"tags":194},"ES6 ADVANCED FEATURES","\u002Fblog\u002Fes6-advanced-features","We have learned about the new features ES6 brings us in ES6 New Features article. In this post, we will go through the advanced features of ES6 and how we can implement them.",[16,17],{"title":196,"path":197,"description":198,"tags":199},"ES6 ARROW FUNCTIONS","\u002Fblog\u002Fes6-arrow-functions","Arrow functionss are a function shorthand using the => syntax (fat arrow). They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both expression and statement bodies. Unlike functions, arrows share the same lexical this as their surrounding code.",[16,17],{"title":201,"path":202,"description":203,"tags":204},"ES6 CLASSES","\u002Fblog\u002Fes6-classes","JavaScript classes are simply syntactic sugar over existing JavaScript prototype chain. But classes give you a cleaner way to organise your code, and make it slightly easier for the beginner or people who are familiar with class oriented languages to read JS and understand.",[16,17],{"title":206,"path":207,"description":208,"tags":209},"ES6 DEFAULT, REST & SPREAD","\u002Fblog\u002Fes6-default-rest-spread","Many programming languages support the concept of a default argument for a function parameter so that the caller does not always need to specify the argument value. Unfortunately, ES5 does not have a default argument support in its syntax. ES6 functions have come a long way by taking aboard the years of complaints and improving parameter handling that is less error-prone and more powerful.",[16,17],{"title":211,"path":212,"description":213,"tags":214},"ES6 DESTRUCTURING","\u002Fblog\u002Fes6-destructuring","The destructuring assignment syntax is a JavaScript expression in ES6 that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.",[16,17],{"title":216,"path":217,"description":218,"tags":219},"ES6 GENERATORS","\u002Fblog\u002Fes6-generators","ES6 generators are functions that can be paused or resumed, and work cooperatively in a multitasking applications.",[16,17,220],"es6",{"title":222,"path":223,"description":224,"tags":225},"ES6 ITERATORS & FOR..OF","\u002Fblog\u002Fes6-iterators-for-of","To loop over an array or a collection JavaScript has been traditionally using for loops. ES5 introduced the for ..each loop. But ES6 introduces a little shorter version, a new interface for iteration called Iterable.",[16,17],{"title":227,"path":228,"description":229,"tags":230},"ES6 LET & CONST","\u002Fblog\u002Fes6-let-const","If you are familiar with JavaScript, you have probably known the term scope. If you are familiar with other languages, you would know that a scope of a variable is to the nearest block – block scope. But JavaScript is different. A variable created with var will be scoped to the nearest parent function.",[16,17],{"title":232,"path":233,"description":234,"tags":235},"ES6 MODULES","\u002Fblog\u002Fes6-modules","A module is a self-contained unit of code, which is usually stored in a file. In ES6, modules get language-level support for component definition. Modules export values, which can then be imported by other modules.",[16,17],{"title":237,"path":238,"description":239,"tags":240},"ES6 NEW FEATURES","\u002Fblog\u002Fes6-new-features","Arrows are a function shorthand using the => syntax (‘fat arrow’). They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both expression and statement bodies. Unlike functions, arrows share the same lexical this as their surrounding code.",[16,17],{"title":242,"path":243,"description":244,"tags":245},"WEB APPLICATION SECURITY","\u002Fblog\u002Fes6-parameter-handling","ES6 introduced improved parameter handling in JavaScript. Instead of the half array arguments object, these new improvements will significantly improve how we handle arguments and parameters.",[16,17,220],{"title":247,"path":248,"description":249,"tags":250},"ES6 RECURSION WITH FUNCTIONAL PROGRAMMING","\u002Fblog\u002Fes6-recursion-with-functional-programming","In this article, we are going to use ES6 recursion with functional programming to understand how we can implement list operations like map, reduce, filter and join.",[16,17,220],{"title":252,"path":253,"description":254,"tags":255},"ES6 SYMBOLS","\u002Fblog\u002Fes6-symbols","Symbols are a new primitive type in ES6. If you ask me, they’re an awful lot like strings. They are tokens that serve as unique IDs. They will help avoid name clashes between properties.",[16,17],{"title":257,"path":258,"description":259,"tags":260},"ES6 TEMPLATE STRINGS","\u002Fblog\u002Fes6-template-strings","Template strings in JavaScript consist of literal text, and placeholders where the runtime can evaluate an expression to inject data into the text.",[16,17],{"title":262,"path":263,"description":264,"tags":265},"ESLINT","\u002Fblog\u002Feslint","ESLint is a pattern identifying and reporting tool for JavaScript code. Somewhat it is similar to JSLint and JSHint with few differences.",[16,17],{"title":267,"path":268,"description":269,"tags":270},"EXT JS DEVELOPING RESPONSIVE APPLICATIONS","\u002Fblog\u002Fext-js-developing-responsive-applications","Creating responsive web applications have been made easier with the arrival of the new JavaScript Framework Ext JS 5. In this article let's look at how we can use responsiveConfig to implement this feature.",[16,17,271],"ext.js",{"title":273,"path":274,"description":275,"tags":276},"EXT.JS – INTRODUCTION","\u002Fblog\u002Fext-js-introduction","Ext JS is a product of Sencha. Ext JS is the industry’s most powerful desktop application development platform with unparalleled cross-browser compatibility, advanced MVC architecture, plugin-free charting, and modern UI widgets.",[16,17,271],{"title":278,"path":279,"description":280,"tags":281},"FETCH API","\u002Fblog\u002Ffetch-api","The Fetch API is a Promise-based standard for performing AJAX requests. It provides a fetch method which returns a Promise on the window object, which we can use to perform requests from remote resources.",[16,17],{"title":283,"path":284,"description":285,"tags":286},"FOCAL LENGTH AND F-STOP","\u002Fblog\u002Ffocal-length-f-stop","Very simply, focal-length is the distance from the lens to the film, when focused on a subject at infinity. In other words, focal length equals image distance for a far subject. To focus on something closer than infinity, the lens is moved farther away from the film or sensor. This is why most lenses get longer when you turn the focusing ring.",[89],{"title":288,"path":289,"description":290,"tags":291},"FOUNDATION 5 NEW FEATURES","\u002Fblog\u002Ffoundation-5-new-features","ZURB’s Foundation framework is a feature-rich, easy to implement, light weight framework for designing responsive web applications. Designed with mobile-first approach in mind, it comes packed with CSS3 media queries, The Grid, reusable HTML5 components and several jQuery plugins to aid interactivity.",[16,29,292],"sass",{"title":294,"path":295,"description":296,"tags":297},"FREE PHOTOSHOP PLUGINS","\u002Fblog\u002Ffree-photoshop-plugins","There are so many amazing free Photoshop plugins you can download for Photoshop CS6 and CC. There are plugins for photo effects, noise reduction, painting, abstract art, layouts, and more! Let’s have a look at few of the best.",[9,112],{"title":299,"path":300,"description":301,"tags":302},"FRONT END PERFORMANCE","\u002Fblog\u002Ffront-end-performance","Front end performance can be a great experience or a horrifying nightmare that could highly impact the end user experience, and lead to users leaving your website.",[16,303],"performance",{"title":305,"path":306,"description":307,"tags":308},"FUNCTIONAL JAVASCRIPT","\u002Fblog\u002Ffunctional-javascript","To understand Functional JavaScript and the quirks of JavaScript, we will have to look into the history of JavaScript and how it was created.",[16,17],{"title":310,"path":311,"description":312,"tags":313},"FUNCTIONAL PROGRAMMING","\u002Fblog\u002Ffunctional-programming","Abstract control flow and operations on data with functions in order to avoid side effects & reduce mutation of state",[16,17],{"title":315,"path":316,"description":317,"tags":318},"GIT – CLONING & BRANCHING","\u002Fblog\u002Fgit-cloning-branching","Imagine you are working in a team and one of your colleagues wants a copy of the your work, how do we start collaborating?",[16,17],{"title":320,"path":321,"description":322,"tags":323},"GIT INTRODUCTION","\u002Fblog\u002Fgit-introduction","Git is a distributed source control system, that is lighting fast and different from client-server systems. In this tutorial, we will learn how to get started with Git. By the end of this tutorial, you should be able to create a Git repository, record snapshots of your project for safekeeping, and view your project's history.",[16,324],"git",{"title":326,"path":327,"description":328,"tags":329},"GIT STAGING & REMOTES","\u002Fblog\u002Fgit-staging-remotes","Let’s say you are working on your local branch, made some changes and now not sure which files you have changed, how are you going to find your changes? You can find your changes by running the git diff command as below:",[16,324],{"title":331,"path":332,"description":333,"tags":334},"GIT STASH","\u002Fblog\u002Fgit-stash","Say you are halfway done with work on a branch, but an issue with 'master' needs fixing NOW. You're not quite ready to commit what you're working on, but need to make a quick fix to master. Fear not, just stash your current changes so you can switch to master quickly.",[16,324],{"title":336,"path":337,"description":338,"tags":339},"GOOGLE DRIVE – AUTHENTICATION","\u002Fblog\u002Fgoogle-drive-authentication","When you are developing an application interfacing Google Driver API, it's mandatory to consider how you are going to handle the authentication for your user. In this article, we are discussing how to implement Google Drive Authentication for your app via its API.",[16,17],{"title":341,"path":342,"description":343,"tags":344},"GOOGLE PICKER WITH DRIVE","\u002Fblog\u002Fgoogle-picker-with-drive","\"Google Drive is a file storage service that enables users to organize, backup, and",[16,17],{"title":346,"path":347,"description":348,"tags":349},"GRUNT WATCH & LIVERELOAD WITH JAVASCRIPT & SASS","\u002Fblog\u002Fgrunt-watch-livereload-with-javascript-sass","Grunt is a task runner that has a ton of plugins for doing things like compiling LESS\u002FSASS into CSS, concatenating JavaScript, minifying, etc. It also has a package for watching files (the same way CodeKit and Prepros does) and firing off certain tasks when they’re modified.",[16,17,350],"grunt",{"title":352,"path":353,"description":354,"tags":355},"HOW TO USE GRUNT","\u002Fblog\u002Fhow-to-use-grunt","In this article, we’ll look at how to use Grunt in your project to automate some of your repetitive tasks. We’ll look at what Grunt is, how to setup Grunt and then create a simple project with Grunt doing the heavy lifting of the some of the tasks.",[16,17,350],{"title":357,"path":358,"description":359,"tags":360},"HOW TO ADD A COVER TO AN EPUB, PDF OR A KINDLE MOBI BOOK","\u002Fblog\u002Fhow-to-add-a-cover-to-an-epub-pdf-or-a-kindle-mobi-book","EPUB, PDF and Kindle MOBI books converted from other formats or downloaded from torrent sites are sometimes cover-missing, which inevitably makes the whole eBook-reading journey less satisfactory",[361,362],"technology","tips",{"title":364,"path":365,"description":366,"tags":367},"How to lint staged Git files","\u002Fblog\u002Fhow-to-lint-staged-git-files","We use linting to automate code formatting issues, to fix syntax errors and coding style. For example, you may have forgotten a semi-colon during aor bug fix you may have accidentally left a console.log statement.",[16,17],{"title":369,"path":370,"description":371,"tags":372},"HOW TO MAKE AJAX CALLS IN JQUERY","\u002Fblog\u002Fhow-to-make-ajax-calls-in-jquery","There are more than one way to make AJAX calls in jQuery. In this tutorial, let’s compare these methods as well as inspect the AJAX calls with Firebug.",[16,17],{"title":374,"path":375,"description":376,"tags":377},"HOW TO USE TELEPHOTO LENSES","\u002Fblog\u002Fhow-to-use-telephoto-lenses","Telephoto lenses are useful for wildlife and landscape photography, given their ability to enlarge distant subjects, but they’re also great for giving your photo an artistic look.",[89],{"title":379,"path":380,"description":381,"tags":382},"HTML INTRODUCTION","\u002Fblog\u002Fhtml-introduction","The language of a webpage is HTML. HTML allows you to take a plain text document created in any simple text editor and organize it into lists, link to other webpages, including images, and more.",[16,383],"html",{"title":385,"path":386,"description":387,"tags":388},"HTML5 API – LOCAL STORAGE, GEOLOCATION & OFFLINE CACHE MANIFEST","\u002Fblog\u002Fhtml5-api-local-storage-geolocation-offline-cache-manifest","Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.",[16,17],{"title":390,"path":391,"description":392,"tags":393},"HTML5 ELEMENTS","\u002Fblog\u002Fhtml5-elements","HTML5 offers new elements for improving semantics of code as well as better document structure. These elements could now be used to replace traditional HTML code like \u003Cdiv id=”nav”> \u003Cdiv class=”header”> \u003Cdiv id=”footer”>",[16,383],{"title":395,"path":396,"description":397,"tags":398},"HTML5 INTRODUCTION","\u002Fblog\u002Fhtml5-introduction","HTML5 is the latest HTML standard. It walks hand in hand with CSS3, the latest CSS standard.",[16,17],{"title":400,"path":401,"description":402,"tags":403},"HTTP2: NEW FEATURES","\u002Fblog\u002Fhttp2-new-features","HTTP\u002F2 (originally named HTTP\u002F2.0) is the second major version of the HTTP network protocol used by the World Wide Web.",[16,404],"http2",{"title":406,"path":407,"description":408,"tags":409},"IMMUTABLE.JS","\u002Fblog\u002Fimmutable-js","Immutable.js is a library from Facebook which provides immutable data structures and utilities that we can introduce to our applications",[16,17],{"title":411,"path":412,"description":413,"tags":414},"Improve JavaScript Performance with Tree Shaking","\u002Fblog\u002Fimprove-javascript-performance-with-treeshaking","Tree shaking is the process used by bundlers like Webpack for dead-code elimination in JavaScript.",[16,17],{"title":416,"path":417,"description":418,"tags":419},"Improving JavaScript Performance for Web","\u002Fblog\u002Fimproving-javascript-performance-for-web","JavaScript optimisation is becoming increasingly necessary for improving application performance. Let’s look at some of the challenges associated with JavaScript and how to optimise performance.",[16,17,303],{"title":421,"path":422,"description":423,"tags":424},"Improving Next.js Performance","\u002Fblog\u002Fimproving-next-js-performance","Next.js is a zero-config React framework for building server-side and static web applications bundled with enhanced developer experience with features for products such as smart bundling, TypeScript support, route pre-fetching, hybrid static & server rendering, and more.",[16,17,425,303],"nextjs",{"title":427,"path":428,"description":429,"tags":430},"INDEXEDDB","\u002Fblog\u002Findexeddb","IndexedDB stands for Indexed Database, is a web standard for storing large amounts of client-side data in a structured manner. This low-level API is able to index data which enables performance rich search on data.",[16,17,431],"indexeddb",{"title":433,"path":434,"description":435,"tags":436},"INSTALL D-LINK DWA-125 WIRELESS DRIVER ON LINUX","\u002Fblog\u002Finstall-d-link-dwa-125-wireless-driver-on-linux","'If you have recently bought a D-Link Wireless Adapter (DWA-125) for your Linux machine and wondering how to get it working, this article might help you get started.",[361,362],{"title":438,"path":439,"description":440,"tags":441},"INSTALLING NODE.JS","\u002Fblog\u002Finstalling-node-js","In this article we are discussing how to get Node.js working on OSX along with npm, the package manager for node.",[16,17,442],"node.js",{"title":444,"path":445,"description":446,"tags":447},"INTEROPERABLE CSS","\u002Fblog\u002Finteroperable-css","Interoperable CSS or ICSS is a low-level file format that enables CSS Modules, designed for loader implementers (not for end users).",[16,29],{"title":449,"path":450,"description":451,"tags":452},"INTRODUCTION TO D3","\u002Fblog\u002Fintroduction-to-d3","D3 is a data visualization library written in JavaScript. It stands for Data-Driven Documents where Document stand for the DOM or the Docucment Object Model of a wweb page.",[16,17,453],"d3",{"title":455,"path":456,"description":457,"tags":458},"INTRODUCTION TO EMBER.JS","\u002Fblog\u002Fintroduction-to-ember-js","Ember.js is a JavaScript web application framework based on the MVC architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.",[16,17,173],{"title":460,"path":461,"description":462,"tags":463},"INTRODUCTION TO GULP","\u002Fblog\u002Fintroduction-to-gulp","Gulp is a JavaScript task runner. It’s an alternative to Grunt, which allowed you to define your tasks using JavaScript inside of a file called Gruntfile.js. In this tutorial, I’ll show you how to install Gulp and create a simple configuration file to get your feet wet with this great new task runner.",[16,17,83],{"title":465,"path":466,"description":467,"tags":468},"INTRODUCTION TO HAPI","\u002Fblog\u002Fintroduction-to-hapi","Created by Eran Hammer, hapi.js is an open source framework built on top of Node.js for building web applications and services by Wallmart. In this tutorial, we will go through the advantages of hapi and build a simple application using hapi as the server.",[16,17,442],{"title":470,"path":471,"description":472,"tags":473},"INTRODUCTION TO WEBPACK","\u002Fblog\u002Fintroduction-to-webpack","Webpack is a module bundler. Webpack takes modules with dependencies and generates static assets representing those modules.",[16,17,140],{"title":475,"path":476,"description":477,"tags":478},"ios-7-design-guidelines","\u002Fblog\u002Fios-7-design-guidelines","With the release of iOS 7 design guidelines, app designers and developers will have to adjust the language to match the new \"flat\" design of iOS. In addition to the grid system, the dimensions of icons and commonly used elements, typography and iconography has been updated by Apple in many ways.",[16,9,479],"ios",{"title":481,"path":482,"description":483,"tags":484},"ISO NOISE REDUCTION","\u002Fblog\u002Fiso-noise-reduction","Using great noise reduction is like upgrading your lens. Why do we pay 16x more for one 50mm lens vs. another?",[89],{"title":486,"path":487,"description":488,"tags":489},"ISOMORPHIC JAVASCRIPT","\u002Fblog\u002Fisomorphic-javascript","Isomorphic JavaScript means that we get to share the same code on the client and on the server. So basically, you are rendering your application markup on the server and piping it down as complete HTML to the browser.",[16,17],{"title":491,"path":492,"description":493,"tags":494},"ITCSS","\u002Fblog\u002Fitcss","ITCSS or Inverted Triangle CSS is a meta framework designed to address some common issues around CSS we encounter today. Introduced by Harry Roberts, it is a sane, scalable, managed architecture for CSS.",[16,29],{"title":496,"path":497,"description":498,"tags":499},"JAVASCRIPT ARRAYS","\u002Fblog\u002Fjavascript-arrays","This beginner-level article will discuss further about JavaScript arrays in detail. JavaScript arrays are used to store multiple values in a single variable. JavaScript has an built-in object for manipulating arrays called Array.",[16,17],{"title":501,"path":502,"description":503,"tags":504},"JAVASCRIPT & CLOSURES","\u002Fblog\u002Fjavascript-closures","A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain.",[16,17],{"title":506,"path":507,"description":508,"tags":509},"JAVASCRIPT CONSOLE","\u002Fblog\u002Fjavascript-console","'The JavaScript Console or the Console Object provides access to the browser’s debugging console.",[16,17],{"title":511,"path":512,"description":513,"tags":514},"JAVASCRIPT & CONSTRUCTOR","\u002Fblog\u002Fjavascript-constructor","ECMAScript is a object based language. An object has a built-in property named constructor.",[16,17],{"title":516,"path":517,"description":518,"tags":519},"JavaScript Design Patterns","\u002Fblog\u002Fjavascript-design-patterns","Design patterns are advanced object-oriented solutions to commonly occurring software problems.  Patterns are about reusable designs and interactions of objects.  Each pattern has a name and becomes part of a vocabulary when discussing complex design solutions.",[16,17,520],"patterns",{"title":522,"path":523,"description":524,"tags":525},"JAVASCRIPT HOISTING AND SCOPE","\u002Fblog\u002Fjavascript-hoisting-and-scope","Hoisting is JavaScript's default behaviour of moving all declarations to the top of the current scope (to the top of the current script or the current function). In different words, a variable can be used before it has been declared.",[16,17],{"title":527,"path":528,"description":529,"tags":530},"JAVASCRIPT & PROTOTYPE","\u002Fblog\u002Fjavascript-prototype","Prototype objects are just simple JavaScript objects and may have their own prototypes. If a prototype has a non-null reference to its prototype, and so on, this is called the prototype chain.",[16,17],{"title":532,"path":533,"description":534,"tags":535},"JELLY BEAN (ANDROID 4.1 SDK) NEW FEATURES","\u002Fblog\u002Fjelly-bean-android-4-1-sdk-new-features","In this article I would like to discuss the new features of Jelly Bean, what has changed from the previous releases, and more.",[361,536],"android",{"title":538,"path":539,"description":540,"tags":541},"JQUERY INTRODUCTION","\u002Fblog\u002Fjquery-introduction","JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.",[16,17,106],{"title":543,"path":544,"description":545,"tags":546},"JQUERY – HOW TO USE","\u002Fblog\u002Fjquery-use","In this article we’ll look at how we can use jquery to manipulate, traverse and select DOM elements at ease. Before we start we have to download jquery and load it in your HTML document",[16,17,106],{"title":548,"path":549,"description":550,"tags":551},"LEXICAL SCOPE","\u002Fblog\u002Flexical-scope","Lexical scope means that scope is defined by author-time decisions of where functions are declared. The lexing phase of compilation is essentially able to know where and how all identifiers are declared, and predict how they will be looked up during execution.",[16,17],{"title":553,"path":554,"description":555,"tags":556},"MAINTAINABLE JAVASCRIPT","\u002Fblog\u002Fmaintainable-javascript","If you are working on a project by your own, you might not worry about the structure, convention and organisation of your code given you fully understand how it works. But working in a team environment it is necessary to make sure that your team members understand your code, easily adaptable and extensible so the importance of maintainable javascript is inevitable.",[16,17],{"title":558,"path":559,"description":560,"tags":561},"MOBILE WEB INTRODUCTION","\u002Fblog\u002Fmobile-web-introduction","What is the mobile web? The mobile web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone or a feature phone, connected to a mobile network or other wireless network.",[16,29,161],{"title":563,"path":564,"description":565,"tags":566},"MODELS & EMBER DATA","\u002Fblog\u002Fmodels-ember-data","If you are thinking of consuming data in your Ember application, you can store them in fixtures. But what if you want to fetch data from a server?",[16,17,173],{"title":568,"path":569,"description":570,"tags":571},".NET FRAMEWORK Q&A","\u002Fblog\u002Fnet-framework-qna","In this article, we are discussing few common .NET frequently asked questions and answers.",[16,572],".net-framework",{"title":574,"path":575,"description":576,"tags":577},"NextJS Client-side, Server-side & Static Rendering","\u002Fblog\u002Fnextjs-client-side-server-side-and-static-rendering","The future of SEO and search ranking algorithms are now in heavy favour of static or server-side rendering. This means building static or server-side rendered apps instantly gain advantages in rankings.",[16,17,425,578],"ssr",{"title":580,"path":581,"description":582,"tags":583},"NODE JS SECURITY","\u002Fblog\u002Fnode-js-security","Node.js has gained momentum in the recent years but there are not many security guidelines available out there.",[16,17],{"title":585,"path":586,"description":587,"tags":588},"NODE.JS – EVENTS","\u002Fblog\u002Fnodejs-events","Many objects in Node emit events: a net.Server emits an event each time a peer connects to it, and fs.readStream emits an event when the file is opened. All objects which emit events are instances of events.EventEmitter.",[16,17,442],{"title":590,"path":591,"description":592,"tags":593},"NODEJS INSTALL WITH NVM","\u002Fblog\u002Fnodejs-install-with-nvm","Node Version Manager is a simple bash script to manage multiple active node.js versions. In this article, we are going to discuss about managing NodeJS install with NVM.",[16,17,442],{"title":595,"path":596,"description":597,"tags":598},"NODE.JS INTRODUCTION","\u002Fblog\u002Fnodejs-introduction","\"Node.js allows you to build scalable network",[16,17,442],{"title":600,"path":601,"description":602,"tags":603},"Node.js Memory Management","\u002Fblog\u002Fnodejs-memory-management","Node.js memory management provides means to dynamically allocate memory chunks for programs when they request them and free it when they are no longer needed, so they can be reused. Application-level memory management can be manual or automatic.",[16,17,442],{"title":605,"path":606,"description":607,"tags":608},"NODEJS PATTERNS","\u002Fblog\u002Fnodejs-patterns","A design pattern is a general, reusable solution to a commonly occurring problem. In this article we are going to look at some common design patterns we can use for Node.js.",[16,442],{"title":610,"path":611,"description":612,"tags":613},"NPM SCRIPTS","\u002Fblog\u002Fnpm-scripts","Task runners like Gulp or Grunt have been go to choice for the front end projects for last few years. Gulp being the latest between the two, and being the popular choice for last couple of years, one might wonder what’s wrong with it.",[16,17,442],{"title":615,"path":616,"description":617,"tags":618},"OPTIMIZING ASP.NET MVC SITES","\u002Fblog\u002Foptimizing-asp-net-mvc-sites","In this article we discuss about four ways of optimizing ASP.NET MVC sites",[16,184,619],"asp.net",{"title":621,"path":622,"description":623,"tags":624},"PHOTOSHOP CC NEW FEATURES","\u002Fblog\u002Fphotoshop-cc-new-features","Adobe Creative Cloud’s Photoshop CC is packed with new tools and features, as well as some key workflow enhancements.",[9,112],{"title":626,"path":627,"description":628,"tags":629},"POSTCSS","\u002Fblog\u002Fpostcss","PostCSS is a tool for transforming CSS with JavaScript plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more",[16,29],{"title":631,"path":632,"description":633,"tags":634},"PROPER TAIL CALLS","\u002Fblog\u002Fproper-tail-calls","A tail call happens when a function Foo calls a function Bar as its final action. At that point Foo stops and passes the execution to function Bar and disappears not having to do anything from there onwards.",[16,17],{"title":636,"path":637,"description":638,"tags":639},"PROXIES","\u002Fblog\u002Fproxies","Proxies enable you to intercept and customize actions performed on JavaScript objects such as `getter` and `setter` for getting and setting properties. This is really helpful in scenarios like JSON based API interaction where you have to customize data coming back from the API.",[16,17],{"title":641,"path":642,"description":643,"tags":644},"REACT BEST PRACTICES & PATTERNS","\u002Fblog\u002Freact-best-practices-patterns","In this article we discuss about React best practices & patterns for writing React components, and the recommendations here aim at coding convensions and patterns.",[16,17,140],{"title":646,"path":647,"description":648,"tags":649},"React Component Library with Material UI","\u002Fblog\u002Freact-component-library-with-material-ui","Using Material UI which supports Styled Components is an excellent combination of libraries to start building a design system of your own",[16,17,40,650],"material-ui",{"title":652,"path":653,"description":654,"tags":655},"REACT CONCURRENT MODE","\u002Fblog\u002Freact-concurrent-mode","'Regardless of all the optimizations we do in in React apps, rendering process so far has been a blocking and cannot be interrupted.",[16,40],{"title":657,"path":658,"description":659,"tags":660},"REACT CONTEXT API","\u002Fblog\u002Freact-context-api","The context API will finally become a first-class citizen with the release of React 16.3. Facebook has announced that they are going to release a stable yet revamped version of the context API.",[16,17,40],{"title":662,"path":663,"description":664,"tags":665},"REACT & CSS","\u002Fblog\u002Freact-css","In a scaling project, the way CSS spans out can bring us various problems. Let’s look at these issues, and discuss them in detail.",[16,17],{"title":667,"path":668,"description":669,"tags":670},"REACT DEPLOYMENT","\u002Fblog\u002Freact-deployment","In this article, we are discussing about how to perform a production deployment for React",[16,17,140],{"title":672,"path":673,"description":674,"tags":675},"REACT & ES6","\u002Fblog\u002Freact-es6","ES6 is here and now. So writing React JS components in ES6 will be beneficial considering the new features ES6 brings to us.",[16,17],{"title":677,"path":678,"description":679,"tags":680},"REACT & FLUX","\u002Fblog\u002Freact-flux","Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework.",[16,17,681],"raect.js",{"title":683,"path":684,"description":685,"tags":686},"REACT & NIGHTWATCH","\u002Fblog\u002Freact-nightwatch","Nightwatch is an end-to-end test framework. The reasons nightwatch is your best choice can be decided upon the reasons described in this article.",[16,17],{"title":688,"path":689,"description":690,"tags":691},"React Re-rendering Components","\u002Fblog\u002Freact-re-rendering-components","React is known for providing a fast user experience by only updating the parts of the UI that have changed. In this article, we discuss how we can optimise the render performance by understanding how React decides to re-render",[16,17,40],{"title":693,"path":694,"description":695,"tags":696},"REACT & REDUX","\u002Fblog\u002Freact-redux","'Redux allows you to manage the state with a minimal API but completely predictable behaviour – a predictable state container for JavaScript apps.",[16,17,140],{"title":698,"path":699,"description":700,"tags":701},"REACT ROUTER","\u002Fblog\u002Freact-router","React Router is the most popular routing library for React, which synchronizes your UI with the URL. It is built on top of React and helps you to build new screens quickly.",[16,17,140],{"title":703,"path":704,"description":705,"tags":706},"REACT STATELESS FUNCTIONAL COMPONENTS","\u002Fblog\u002Freact-stateless-functional-components","React stateless functional components are pure JavaScript functions that only have a render() function and no lifecycle methods like componentDidMount.",[16,17,140],{"title":708,"path":709,"description":710,"tags":711},"REACT V15","\u002Fblog\u002Freact-v15","Facebook released React v15.0.0 on 07\u002F04\u002F2016. The most noticeable change was the version number jump from 0.14 to 15.0.",[16,17,140],{"title":713,"path":714,"description":715,"tags":716},"REDUX & SAGAS","\u002Fblog\u002Fredux-sagas","In reality, for a real world application, just consuming an API end point and displaying the data is not going to cut it.",[16,17,140,717,718],"redux","redux-saga",{"title":720,"path":721,"description":722,"tags":723},"REQUIREJS & HANDLEBARS","\u002Fblog\u002Frequirejs-handlebars","If we are building a web application, code complexity could grow and the app can get bigger. Number of plug-ins can grow bigger, and you will feel the need of adding more modular components. RequireJS can address these issues to increase the speed of your application in an efficient way.",[16,17],{"title":725,"path":726,"description":727,"tags":728},"RESCUING THE DETAILS WITH TOPAZ LABS","\u002Fblog\u002Frescuing-details-topaz-labs","Here are the steps on how to recover shadows and make an image more vibrant with the Topaz Lab’s plug-ins.",[89],{"title":730,"path":731,"description":732,"tags":733},"RUBY API – REST ROUTES, CONSTRAINTS & NAMESPACES","\u002Fblog\u002Fruby-api-rest-routes-constraints-namespaces","In this article, we are going to study REST, routes, constraints, and namespaces. Before we dive into these concepts let’s take a look at how web-based services in the perspective of web users.",[16,124],{"title":735,"path":736,"description":737,"tags":738},"RUBY – INTRODUCTION","\u002Fblog\u002Fruby-introduction","Ruby is a dynamic, reflective, object-oriented, general-purpose programming language. It was designed and developed in the mid-1990s by Yukihiro “Matz” Matsumoto in Japan.",[16,124],{"title":740,"path":741,"description":742,"tags":743},"RUN COMMANDS FOR WINDOWS 7","\u002Fblog\u002Frun-commands-for-windows-7","A run command is the name of the file that starts an application, which is an executable for a program.",[361,744],"windows",{"title":746,"path":747,"description":748,"tags":749},"SAFARI CSS HACKS","\u002Fblog\u002Fsafari-css-hacks","Applying changes only for Safari has been always a challenging task. Also adding the fact that Safari has changed since version 6.1 makes it even harder. In this article we are going to discuss Safari CSS hacks.",[16,29,383],{"title":751,"path":752,"description":753,"tags":754},"SASS CONTROL DIRECTIVES","\u002Fblog\u002Fsass-control-directives","Sass control directives helps creating libraries for reuse and distribution, there by contribute to writing leaner Sass. Advanced frameworks use mixins. These mixins use directives such as @if, @for, each and @while.",[16,17],{"title":756,"path":757,"description":758,"tags":759},"SASS FOR CSS","\u002Fblog\u002Fsass-for-css","Sass is a scripting langauage that is interpreted into CSS. Sass stands for Syntatically Awesome Stylesheets. Sass consists of two syntaxes. The original syntax, called “the indented syntax”, uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules.",[16,29,292],{"title":761,"path":762,"description":763,"tags":764},"SASS INTRODUCTION","\u002Fblog\u002Fsass-introduction","CSS is crafted to be simple, but over time your styles become large and your files become bloated with selectors growing out of control. Scaling simplicity is difficult.",[16,17],{"title":766,"path":767,"description":768,"tags":769},"SASS – VARIABLES","\u002Fblog\u002Fsass-variables","Native CSS variable support is still in its infancy, but Sass affords us a way to set reusable values.",[16,29,292],{"title":771,"path":772,"description":773,"tags":774},"SECURING YOUR ASP.NET MVC 4 APPLICATION","\u002Fblog\u002Fsecuring-your-asp-net-mvc-4-application","Out of the Box when you create an MVC web site, anyone can post anything to your web site. So we need to control the user access.",[16,184,619],{"title":776,"path":777,"description":778,"tags":779},"SEMANTIC HTML","\u002Fblog\u002Fsemantic-hmtl","Semantic HTML is a way of describing the content of an HTML document, it is not a way of making your page look pretty or visually appealing.",[16,383],{"title":781,"path":782,"description":783,"tags":784},"SEND EMAIL IN UMBRACO","\u002Fblog\u002Fsend-email-in-umbraco","Sending email is a common functionality of any client-facing website. Is it possible to be implemented in Umbraco without a plugin? Yes, and I’m going to demonstrate how to implement such functionality.",[16,785,619],"umbraco",{"title":787,"path":788,"description":789,"tags":790},"Server Side Rendering with Suspense in React 18","\u002Fblog\u002Fserver-side-rendering-with-suspense-in-react-18","React 18 will include architectural improvements to React server-side rendering (SSR) performance.",[16,17,40,578],{"title":792,"path":793,"description":794,"tags":795},"SERVICE WORKERS","\u002Fblog\u002Fservice-workers","Service Worker is a new browser feature which provides event-driven scripts that run independently of web pages. Unlike other workers, Service Workers can be shut down at the end of events, note the lack of retained references from documents, and they have access to domain-wide events such as network fetches.",[16,17,796],"service-worker",{"title":798,"path":799,"description":800,"tags":801},"SETTING UP UMBRACO IN VISUAL STUDIO","\u002Fblog\u002Fsetting-up-umbraco-in-visual-studio","In this article we discuss about setting an Umbraco project with ASP.NET with step by step instructions",[16,619,785],{"title":803,"path":804,"description":805,"tags":806},"Should we declare React functional components with a const or a function?","\u002Fblog\u002Fshould-we-declare-react-functional-components-with-a-const-or-a-function","If you have been writing React functional components for a while now, you may have encountered two ways of declaring a component - an arrow function or a function declaration.",[16,17,807,40],"typesript",{"title":809,"path":810,"description":811,"tags":812},"SMACSS","\u002Fblog\u002Fsmacss","SMACSS stands for Scalable and Modular Architecture for CSS. It is pronounced “smacks” and introduced by Jonathan Snook.",[16,29,292],{"title":814,"path":815,"description":816,"tags":817},"STRUCTURE YOUR SASS","\u002Fblog\u002Fstructure-your-sass","Sass enables your you to separate your stylesheets into individual files, and then you can use the @import directive to include your individual files into one master stylesheet.",[16,29,292],{"title":819,"path":820,"description":821,"tags":822},"STYLUS FOR CSS","\u002Fblog\u002Fstylus-for-css","When your site grows, the CSS can grow along with it, and the maintenance is no longer trivial. You could break your CSS in to different files and use @import to structure it into one file. But this doesn’t resolve all your architecting and maintenance problems. ",[16,29],{"title":824,"path":825,"description":826,"tags":827},"TAPE & TAP","\u002Fblog\u002Ftape-tap","Tape & Tap are testing tools you can use instead of Mocha or Jasmine. The Test Anything Protocol (TAP) is a definition that has been around since 1987 and Tape is a test harness written in JavaScript for Node and the browser.",[16,17,828],"testing",{"title":830,"path":831,"description":832,"tags":833},"TESTING REACT COMPONENTS WITH ENZYME","\u002Fblog\u002Ftesting-react-components-enzyme","React has become the framework of choice recently within the JavaScript community. And the tools for testing React components has also gained lot of attention.",[16,17,220],{"title":835,"path":836,"description":837,"tags":838},"THE MOST EXPENSIVE CAMERAS IN THE WORLD","\u002Fblog\u002Fthe-most-expensive-cameras-in-the-world","Digital photography has become a hobby that is more and more affordable in recent years, with the increase of hobbyist photographers to serious enthusiasts the camera and lens manufacturers have become competitive and innovative in releasing high specification products.",[89],{"title":840,"path":841,"description":842,"tags":843},"Things to avoid when using React Hooks","\u002Fblog\u002Fthings-to-avoid-when-using-react-hooks","In this article we discuss about a few things to avoid when writing React Hooks and forming good habits through understanding",[16,17,40],{"title":845,"path":846,"description":847,"tags":848},"THINK REACT","\u002Fblog\u002Fthink-react","As we know, React is a library for creating user interfaces. It renders your UI and responds to events aka: the V in MVC. Because it is not as opinionated as many of other front-end JavaScript libraries, it plays nicely with your stack, whatever it maybe, Ruby, Java, Node.js or .NET.",[16,17,140],{"title":850,"path":851,"description":852,"tags":853},"THROTTLE FUNCTION CALLS IN JAVASCRIPT","\u002Fblog\u002Fthrottle-function-calls-in-javascript","If you have written a search component that returns matching result as you type – you would realise that sending a request to the server on every key press is not required as that can result in burdening the server with too many requests.",[16,17],{"title":855,"path":856,"description":857,"tags":858},"Turborepo: The Next Big Thing in Build Systems","\u002Fblog\u002Fturborepo-the-next-big-thing-in-build-systems","Turborepo is a high-performance build system for JavaScript and TypeScript codebases. Vercel who acquired Turborepo claims, through incremental builds, intelligent remote caching, and optimized task scheduling, Turborepo can boost build speeds by 85% or more, enabling teams of all sizes to maintain a fast and efficient build system that scales as codebases and teams grow.",[16,17,859],"nodejs",{"title":861,"path":862,"description":863,"tags":864},"TypeScript Enums vs String Literals","\u002Fblog\u002Ftypescript-enums-vs-string-literals","Enums help to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases.",[16,17,807],{"title":866,"path":867,"description":868,"tags":869},"TypeScript Features You Should No Longer Use","\u002Fblog\u002Ftypescript-features-you-should-no-longer-use","When TypeScript was originally invented by Microsoft in 2010, they implemented features missing from JavaScript at the time including module systems, classes, enums and decorators.",[16,17,870],"typescript",{"title":872,"path":873,"description":874,"tags":875},"Understanding cloneElement, isValidElement and Render Props","\u002Fblog\u002Funderstanding-cloneelement-isvalidelement-and-render-props","React provides several APIs for transforming elements: cloneElement, isValidElement.",[16,17,40],{"title":877,"path":878,"description":879,"tags":880},"UNITS FOR CSS FONT-SIZE","\u002Fblog\u002Funits-for-css-font-size","Fonts sizes in CSS can be measured in four different units adding confusion to the web developer on top of having to deal with different browsers. Which of these four units is the best? Finding a definitive answer is difficult.",[16,29],{"title":882,"path":883,"description":884,"tags":885},"USING ES6 WITH BABEL","\u002Fblog\u002Fusing-es6-babel","Some of the modern browsers are yet to catch up with the new language additions to ES6. This means we have to use Babel to transpile our code into ES5.",[16,17,220],{"title":887,"path":888,"description":889,"tags":890},"VIRTUAL DOM","\u002Fblog\u002Fvirtual-dom","If you are using React, there is a better chance you have heard about virtual DOM. In a nutshell, virtual DOM is an abstract version of the DOM, a lightweight copy of the actual DOM which we can manipulate the way we want and then apply to the DOM tree.",[16,17],{"title":242,"path":892,"description":893,"tags":894},"\u002Fblog\u002Fweb-application-security","'Cyber security has become a necessity for any web developer building client-facing web applications.",[16,895],"security",{"title":897,"path":898,"description":899,"tags":900},"WEB PAGE RENDERING","\u002Fblog\u002Fweb-page-rendering","'Web page rendering is an important subject to study in order to optimize page load times, and to understand how to design solutions to cater for that.",[16,17,29,383],{"title":902,"path":903,"description":904,"tags":905},"WEBPACK EXPORT MODULES","\u002Fblog\u002Fwebpack-export-modules","You may be working in a complex project, where multiple isolated modules need to be imported into a single parent module, you might want to configure Webpack.config to enable exporting modules.",[16,17],{"title":907,"path":908,"description":909,"tags":910},"WHAT IS AGILE PROJECT MANAGEMENT?","\u002Fblog\u002Fwhat-is-agile-project-management","Agile project management allows you to produce a smaller amount of deliverables more frequently and efficiently , making it an excellent choice for the teams that are working in the field of business analysis, product development, programming , and other areas of collaboration.",[16,911],"agile",{"title":913,"path":914,"description":915,"tags":916},"WRITING FORMS IN REACT AND REDUX","\u002Fblog\u002Fwriting-forms-react","rWiting forms in React and Redux can be challenging, having to deal with forms and fields. In this article we are going to build couple of form using an exisiting library sepcifically for Redux called react-redux-form.",[16,29,383],[918,1598,2131,14864,15930,17001,19100,19694,21602,22479,23370,24034,24316,25187,26587,27319,28145,28506,29484,30503,31274,31688,32079,32983,34525,34893,35431,35786,36854,38092,38618,39826,40990,41615,42190,42555,43495,43939,44391,45140,45542,45884,47053,47792,48046,48820,49734,50099,50311,51202,60744,61962,62778,64261,69780,70219,70429,70772,71247,71490,72005,73336,73846,75035,76856,77856,81379,81645,82188,82654,83715,84158,85401,86406,86589,87235,87858,88441,88939,89612,90692,91567,92222,92956,93839,95372,96621,97395,97880,98754,99279,99773,100307,100795,102464,105297,105851,106547,107522,108222,108674,109849,110231,111310,111651,112206,112639,112874,113542,114797,115588,116371,117846,118091,119098,119722,120734,121202,121364,122722,123544,124446,126888,128612,130005,130224,130732,131167,131670,131766,132525,133356,133430,133802,134877,136771,136878,137324,137419,137987,142911,143018,143694,144718,145335,146058,146292,147968,148170,148480,148907,150086,150809,150983,152473,152632,152889,154104,154392,155426,155589,155738,155942,156146,156639,156955,157014,157154,157722,157944,158460,158515],{"id":919,"title":411,"author":920,"body":921,"date":1590,"description":413,"extension":1591,"image":1592,"meta":1593,"navigation":1050,"path":412,"seo":1594,"stem":1595,"tags":1596,"__hash__":1597},"blog\u002Fblog\u002Fimprove-javascript-performance-with-treeshaking.md","Sean Amarasinghe",{"type":922,"value":923,"toc":1582},"minimark",[924,949,952,957,960,967,970,989,992,1086,1089,1093,1104,1112,1118,1171,1174,1212,1215,1218,1275,1279,1296,1303,1369,1372,1376,1379,1429,1432,1436,1439,1518,1522,1529,1578],[925,926,927,931,932,939,940,944,945,948],"p",{},[928,929,930],"em",{},"Tree shaking"," is the process used by bundlers like Webpack for dead-code elimination in JavaScript. It relies on the ",[933,934,938],"a",{"href":935,"rel":936},"http:\u002F\u002Fexploringjs.com\u002Fes6\u002Fch_modules.html#static-module-structure",[937],"nofollow","static structure"," of ES2015 or ES6 module syntax,\ni.e. ",[941,942,943],"code",{},"import"," and ",[941,946,947],{},"export",".",[925,950,951],{},"We can follow the same concepts used by these bundlers in our code to optimise our apps and increase performance.",[953,954,956],"h2",{"id":955},"why-do-we-need-tree-shaking","Why do we need tree shaking?",[925,958,959],{},"The tree-shaking process reduces the code bundle size by shaving off the unused components and libraries included in our bundle. If this process wasn’t available, then we will be shipping all the components and libraries included in our app, even though they are not being used. This results in increased download time, longer decompressing, parsing and even executing times.",[925,961,962],{},[963,964],"img",{"alt":965,"src":966},"Source: Google","\u002Fimages\u002Fblog\u002F2022-02-13-improve-javascript-performance-with-treeshaking\u002Ftree-shaking.png",[925,968,969],{},"This way, tree-shaking helps us to:",[971,972,973,977,980,983,986],"ol",{},[974,975,976],"li",{},"Reduce transpiled code size",[974,978,979],{},"Increased bundle download time",[974,981,982],{},"Shorter bundle decompressing time",[974,984,985],{},"Faster code parsing time",[974,987,988],{},"And faster execution time",[925,990,991],{},"The older JavaScript module import syntax like AMD modules and CommonJS, used to import code dynamically, which make it hard to analyse code size at the time it was transpiled. But with the introduction of webpack 2, built-in support for ES2015 was introduced as well as unused module export detection.",[993,994,999],"pre",{"className":995,"code":996,"language":997,"meta":998,"style":998},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F CommonJS: The entire package is imported\nconst lodash = require('lodash'); 70.7K (gzipped: 24.7k);\n\n\u002F\u002F ES2015(ES6): A specific dependency is imported with tree shaking\nimport toLower from \"lodash\u002FtoLower\"; 2.2K (gzipped: 942);\n","js","",[941,1000,1001,1010,1045,1052,1058],{"__ignoreMap":998},[1002,1003,1006],"span",{"class":1004,"line":1005},"line",1,[1002,1007,1009],{"class":1008},"sJ8bj","\u002F\u002F CommonJS: The entire package is imported\n",[1002,1011,1013,1017,1021,1024,1028,1032,1036,1039,1042],{"class":1004,"line":1012},2,[1002,1014,1016],{"class":1015},"szBVR","const",[1002,1018,1020],{"class":1019},"sj4cs"," lodash",[1002,1022,1023],{"class":1015}," =",[1002,1025,1027],{"class":1026},"sScJk"," require",[1002,1029,1031],{"class":1030},"sVt8B","(",[1002,1033,1035],{"class":1034},"sZZnC","'lodash'",[1002,1037,1038],{"class":1030},"); 70.7",[1002,1040,1041],{"class":1026},"K",[1002,1043,1044],{"class":1030}," (gzipped: 24.7k);\n",[1002,1046,1048],{"class":1004,"line":1047},3,[1002,1049,1051],{"emptyLinePlaceholder":1050},true,"\n",[1002,1053,1055],{"class":1004,"line":1054},4,[1002,1056,1057],{"class":1008},"\u002F\u002F ES2015(ES6): A specific dependency is imported with tree shaking\n",[1002,1059,1061,1063,1066,1069,1072,1075,1077,1080,1083],{"class":1004,"line":1060},5,[1002,1062,943],{"class":1015},[1002,1064,1065],{"class":1030}," toLower ",[1002,1067,1068],{"class":1015},"from",[1002,1070,1071],{"class":1034}," \"lodash\u002FtoLower\"",[1002,1073,1074],{"class":1030},"; 2.2",[1002,1076,1041],{"class":1026},[1002,1078,1079],{"class":1030}," (gzipped: ",[1002,1081,1082],{"class":1019},"942",[1002,1084,1085],{"class":1030},");\n",[925,1087,1088],{},"By using ES2015 moulde import syntax here, the tree-shaking technique is importing a dependency by importing what’s only required from the global package, reducing the size of the imported dependencies, instead of importing the whole global package.",[953,1090,1092],{"id":1091},"minimisingsideeffects","Minimising sideEffects",[925,1094,1095,1096,1099,1100,1103],{},"The new webpack 4 release expands on this capability with a way to provide hints to the compiler by using the ",[941,1097,1098],{},"sideEffects"," property in the ",[941,1101,1102],{},"package.json"," file to denote which files in your project are \"pure\" and therefore safe to prune if unused.",[925,1105,1106,1111],{},[1107,1108,1109],"strong",{},[941,1110,1098],{}," is much more effective since it allows to skip whole modules\u002Ffiles and the complete subtree.",[925,1113,1114,1115,1117],{},"Side effects happen when a function or expression modifies state outside its own context. Some examples of side effects include making a call to an API, manipulating the DOM, and writing to a database. In order to exclude such files or make webpack aware of the state of the files it’ll be transpiling, we can go ahead and configure this in either the ",[941,1116,1102],{}," file or within the webpack.config.json file like so:",[993,1119,1123],{"className":1120,"code":1121,"language":1122,"meta":998,"style":998},"language-json shiki shiki-themes github-light github-dark","{\n \"name\": \"webpack-tree-shaking-example\",\n \"version\": \"1.0.0\",\n \"sideEffects\": false\n}\n","json",[941,1124,1125,1130,1144,1156,1166],{"__ignoreMap":998},[1002,1126,1127],{"class":1004,"line":1005},[1002,1128,1129],{"class":1030},"{\n",[1002,1131,1132,1135,1138,1141],{"class":1004,"line":1012},[1002,1133,1134],{"class":1019}," \"name\"",[1002,1136,1137],{"class":1030},": ",[1002,1139,1140],{"class":1034},"\"webpack-tree-shaking-example\"",[1002,1142,1143],{"class":1030},",\n",[1002,1145,1146,1149,1151,1154],{"class":1004,"line":1047},[1002,1147,1148],{"class":1019}," \"version\"",[1002,1150,1137],{"class":1030},[1002,1152,1153],{"class":1034},"\"1.0.0\"",[1002,1155,1143],{"class":1030},[1002,1157,1158,1161,1163],{"class":1004,"line":1054},[1002,1159,1160],{"class":1019}," \"sideEffects\"",[1002,1162,1137],{"class":1030},[1002,1164,1165],{"class":1019},"false\n",[1002,1167,1168],{"class":1004,"line":1060},[1002,1169,1170],{"class":1030},"}\n",[925,1172,1173],{},"Or alternatively, in webpack.config.json file to specify which files to exclude:",[993,1175,1177],{"className":1120,"code":1176,"language":1122,"meta":998,"style":998},"{\n \"name\": \"Webpack Tree Shaking Example\",\n \"side-effects\": [\".\u002Fsrc\u002Fa-file-with-side-effect.js\"]\n}\n",[941,1178,1179,1183,1194,1208],{"__ignoreMap":998},[1002,1180,1181],{"class":1004,"line":1005},[1002,1182,1129],{"class":1030},[1002,1184,1185,1187,1189,1192],{"class":1004,"line":1012},[1002,1186,1134],{"class":1019},[1002,1188,1137],{"class":1030},[1002,1190,1191],{"class":1034},"\"Webpack Tree Shaking Example\"",[1002,1193,1143],{"class":1030},[1002,1195,1196,1199,1202,1205],{"class":1004,"line":1047},[1002,1197,1198],{"class":1019}," \"side-effects\"",[1002,1200,1201],{"class":1030},": [",[1002,1203,1204],{"class":1034},"\".\u002Fsrc\u002Fa-file-with-side-effect.js\"",[1002,1206,1207],{"class":1030},"]\n",[1002,1209,1210],{"class":1004,"line":1054},[1002,1211,1170],{"class":1030},[925,1213,1214],{},"This assumes that any file that is not included in the list, is free of side effects.",[925,1216,1217],{},"You can also add these files via module.rules as below:",[993,1219,1221],{"className":995,"code":1220,"language":997,"meta":998,"style":998},"module.rules: [\n {\n include: path.resolve(\"node_modules\", \"lodash\"),\n sideEffects: false\n }\n]\n",[941,1222,1223,1231,1236,1258,1265,1270],{"__ignoreMap":998},[1002,1224,1225,1228],{"class":1004,"line":1005},[1002,1226,1227],{"class":1019},"module",[1002,1229,1230],{"class":1030},".rules: [\n",[1002,1232,1233],{"class":1004,"line":1012},[1002,1234,1235],{"class":1030}," {\n",[1002,1237,1238,1241,1244,1246,1249,1252,1255],{"class":1004,"line":1047},[1002,1239,1240],{"class":1030}," include: path.",[1002,1242,1243],{"class":1026},"resolve",[1002,1245,1031],{"class":1030},[1002,1247,1248],{"class":1034},"\"node_modules\"",[1002,1250,1251],{"class":1030},", ",[1002,1253,1254],{"class":1034},"\"lodash\"",[1002,1256,1257],{"class":1030},"),\n",[1002,1259,1260,1263],{"class":1004,"line":1054},[1002,1261,1262],{"class":1030}," sideEffects: ",[1002,1264,1165],{"class":1019},[1002,1266,1267],{"class":1004,"line":1060},[1002,1268,1269],{"class":1030}," }\n",[1002,1271,1273],{"class":1004,"line":1272},6,[1002,1274,1207],{"class":1030},[953,1276,1278],{"id":1277},"prevent-babel-from-transpiling-es6-modules-to-commonjs-modules","Prevent Babel from transpiling ES6 modules to CommonJS modules",[925,1280,1281,1282,1287,1288,1291,1292,1295],{},"If you're using ",[933,1283,1286],{"href":1284,"rel":1285},"https:\u002F\u002Fbabeljs.io\u002Fdocs\u002Fplugins\u002Fpreset-env\u002F",[937],"babel-preset-env"," in your Babel config, it automatically transpile your ES6 modules into more widely compatible CommonJS modules (converting ",[941,1289,1290],{},"imports"," into ",[941,1293,1294],{},"require","). This becomes problematic when we want to start tree shaking, as webpack won’t know what to prune from the bundle if we use it.",[925,1297,1298,1299,1302],{},"To fix this issue, we can tell ",[933,1300,1286],{"href":1284,"rel":1301},[937]," to ignore ES6 modules:",[993,1304,1306],{"className":1120,"code":1305,"language":1122,"meta":998,"style":998},"{\n \"presets\": [\n [\n \"env\",\n {\n \"modules\": false\n }\n ]\n ]\n}\n",[941,1307,1308,1312,1320,1325,1332,1337,1346,1352,1358,1364],{"__ignoreMap":998},[1002,1309,1310],{"class":1004,"line":1005},[1002,1311,1129],{"class":1030},[1002,1313,1314,1317],{"class":1004,"line":1012},[1002,1315,1316],{"class":1019}," \"presets\"",[1002,1318,1319],{"class":1030},": [\n",[1002,1321,1322],{"class":1004,"line":1047},[1002,1323,1324],{"class":1030}," [\n",[1002,1326,1327,1330],{"class":1004,"line":1054},[1002,1328,1329],{"class":1034}," \"env\"",[1002,1331,1143],{"class":1030},[1002,1333,1334],{"class":1004,"line":1060},[1002,1335,1336],{"class":1030}," {\n",[1002,1338,1339,1342,1344],{"class":1004,"line":1272},[1002,1340,1341],{"class":1019}," \"modules\"",[1002,1343,1137],{"class":1030},[1002,1345,1165],{"class":1019},[1002,1347,1349],{"class":1004,"line":1348},7,[1002,1350,1351],{"class":1030}," }\n",[1002,1353,1355],{"class":1004,"line":1354},8,[1002,1356,1357],{"class":1030}," ]\n",[1002,1359,1361],{"class":1004,"line":1360},9,[1002,1362,1363],{"class":1030}," ]\n",[1002,1365,1367],{"class":1004,"line":1366},10,[1002,1368,1170],{"class":1030},[925,1370,1371],{},"Now instead of Babel converting your code for wide compatibility, webpack can convert the code as well as tree-shake.",[953,1373,1375],{"id":1374},"import-only-modules-you-want","Import only modules you want",[925,1377,1378],{},"Just like in the example where we imported the toLower module from lodash, we can do the same for the moduels we write.",[993,1380,1382],{"className":995,"code":1381,"language":997,"meta":998,"style":998},"\u002F\u002F import sort from \"..\u002Futils\u002Fsort\";\n\nimport { quickSort } from '..\u002Futils\u002Fsort';\n\n\u002F\u002F sort.quickSort();\n\nquickSort();\n",[941,1383,1384,1389,1393,1408,1412,1417,1421],{"__ignoreMap":998},[1002,1385,1386],{"class":1004,"line":1005},[1002,1387,1388],{"class":1008},"\u002F\u002F import sort from \"..\u002Futils\u002Fsort\";\n",[1002,1390,1391],{"class":1004,"line":1012},[1002,1392,1051],{"emptyLinePlaceholder":1050},[1002,1394,1395,1397,1400,1402,1405],{"class":1004,"line":1047},[1002,1396,943],{"class":1015},[1002,1398,1399],{"class":1030}," { quickSort } ",[1002,1401,1068],{"class":1015},[1002,1403,1404],{"class":1034}," '..\u002Futils\u002Fsort'",[1002,1406,1407],{"class":1030},";\n",[1002,1409,1410],{"class":1004,"line":1054},[1002,1411,1051],{"emptyLinePlaceholder":1050},[1002,1413,1414],{"class":1004,"line":1060},[1002,1415,1416],{"class":1008},"\u002F\u002F sort.quickSort();\n",[1002,1418,1419],{"class":1004,"line":1272},[1002,1420,1051],{"emptyLinePlaceholder":1050},[1002,1422,1423,1426],{"class":1004,"line":1348},[1002,1424,1425],{"class":1026},"quickSort",[1002,1427,1428],{"class":1030},"();\n",[925,1430,1431],{},"Rather than importing the whole module, we have only imported the export we needed. This will collectively with other module imports, will significantly reduce your final bundle size, resulting in faster bundle download speeds, increasing the page load speed.",[953,1433,1435],{"id":1434},"minify-the-output","Minify the output",[925,1437,1438],{},"By using the importand export syntax, we managed to mark our \"dead code\" to be dropped, but we still need to drop it from the bundle. In order to do that, set the modeconfiguration option to production.",[993,1440,1442],{"className":995,"code":1441,"language":997,"meta":998,"style":998},"module.exports = {\n entry: '.\u002Fsrc\u002Findex.js',\n output: {\n filename: 'bundle.js',\n path: path.resolve(__dirname, 'dist'),\n },\n mode: 'production',\n};\n",[941,1443,1444,1458,1468,1473,1483,1498,1503,1513],{"__ignoreMap":998},[1002,1445,1446,1448,1450,1453,1455],{"class":1004,"line":1005},[1002,1447,1227],{"class":1019},[1002,1449,948],{"class":1030},[1002,1451,1452],{"class":1019},"exports",[1002,1454,1023],{"class":1015},[1002,1456,1457],{"class":1030}," {\n",[1002,1459,1460,1463,1466],{"class":1004,"line":1012},[1002,1461,1462],{"class":1030}," entry: ",[1002,1464,1465],{"class":1034},"'.\u002Fsrc\u002Findex.js'",[1002,1467,1143],{"class":1030},[1002,1469,1470],{"class":1004,"line":1047},[1002,1471,1472],{"class":1030}," output: {\n",[1002,1474,1475,1478,1481],{"class":1004,"line":1054},[1002,1476,1477],{"class":1030}," filename: ",[1002,1479,1480],{"class":1034},"'bundle.js'",[1002,1482,1143],{"class":1030},[1002,1484,1485,1488,1490,1493,1496],{"class":1004,"line":1060},[1002,1486,1487],{"class":1030}," path: path.",[1002,1489,1243],{"class":1026},[1002,1491,1492],{"class":1030},"(__dirname, ",[1002,1494,1495],{"class":1034},"'dist'",[1002,1497,1257],{"class":1030},[1002,1499,1500],{"class":1004,"line":1272},[1002,1501,1502],{"class":1030}," },\n",[1002,1504,1505,1508,1511],{"class":1004,"line":1348},[1002,1506,1507],{"class":1030}," mode: ",[1002,1509,1510],{"class":1034},"'production'",[1002,1512,1143],{"class":1030},[1002,1514,1515],{"class":1004,"line":1354},[1002,1516,1517],{"class":1030},"};\n",[953,1519,1521],{"id":1520},"summary","Summary",[925,1523,1524,1525,1528],{},"What we've learned is that in order to take advantage of ",[928,1526,1527],{},"tree shaking",", you must...",[1530,1531,1532,1540,1549,1559],"ul",{},[974,1533,1534,1535,944,1537,1539],{},"Use ES2015 module syntax (i.e. ",[941,1536,943],{},[941,1538,947],{},").",[974,1541,1542,1543,1548],{},"Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behaviour of the popular Babel preset @babel\u002Fpreset-env - see the ",[933,1544,1547],{"href":1545,"rel":1546},"https:\u002F\u002Fbabeljs.io\u002Fdocs\u002Fen\u002Fbabel-preset-env#modules",[937],"documentation"," for more details).",[974,1550,1551,1552,1555,1556,1558],{},"Add a ",[941,1553,1554],{},"\"sideEffects\""," property to your project's ",[941,1557,1102],{}," file.",[974,1560,1561,1562,1567,1568,1571,1572,1577],{},"Use the ",[933,1563,1566],{"href":1564,"rel":1565},"https:\u002F\u002Fwebpack.js.org\u002Fconfiguration\u002Fmode\u002F#mode-production",[937],"production"," ",[941,1569,1570],{},"mode"," configuration option to enable ",[933,1573,1576],{"href":1574,"rel":1575},"https:\u002F\u002Fwebpack.js.org\u002Fconfiguration\u002Fmode\u002F#usage",[937],"various optimizations"," including minification and tree shaking.",[1579,1580,1581],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":1583},[1584,1585,1586,1587,1588,1589],{"id":955,"depth":1012,"text":956},{"id":1091,"depth":1012,"text":1092},{"id":1277,"depth":1012,"text":1278},{"id":1374,"depth":1012,"text":1375},{"id":1434,"depth":1012,"text":1435},{"id":1520,"depth":1012,"text":1521},"2022-02-13","md","\u002Fimages\u002Fblog\u002Ffeatures\u002Fimprove-javascript-performance-with-treeshaking.jpg",{},{"title":411,"description":413},"blog\u002Fimprove-javascript-performance-with-treeshaking",[16,17],"SkRG0R1_Fr7jfdvQnG_L8ReK6FCloS9FOCd2mn9vLSc",{"id":1599,"title":855,"author":920,"body":1600,"date":2124,"description":857,"extension":1591,"image":2125,"meta":2126,"navigation":1050,"path":856,"seo":2127,"stem":2128,"tags":2129,"__hash__":2130},"blog\u002Fblog\u002Fturborepo-the-next-big-thing-in-build-systems.md",{"type":922,"value":1601,"toc":2103},[1602,1606,1609,1612,1632,1635,1639,1642,1645,1647,1651,1654,1659,1662,1666,1669,1673,1676,1680,1683,1687,1690,1694,1697,1701,1704,1708,1711,1715,1719,1722,1733,1736,1742,1751,1754,1762,1765,1774,1781,1785,1795,1834,1838,1841,1844,2025,2028,2053,2056,2059,2063,2066,2075,2080,2083,2092,2094,2097,2100],[953,1603,1605],{"id":1604},"what-is-a-monorepo","What is a monorepo?",[925,1607,1608],{},"A monorepo (mono repository) is a single repository that stores all of your code and assets for every project. These include your frontend as well as backend code.",[925,1610,1611],{},"The benfits of a monorepo are:",[1530,1613,1614,1617,1620,1623,1626,1629],{},[974,1615,1616],{},"A single source of truth. (e.g. dependency management with a single package.json file, tests and configs)",[974,1618,1619],{},"Share and reuse code easily.",[974,1621,1622],{},"Visibility to manage dependencies (e.g., if you make a change, what else will be impacted?).",[974,1624,1625],{},"To make atomic changes (e.g., one operation to make a change across multiple projects).",[974,1627,1628],{},"Ease of teams to collaborate more.",[974,1630,1631],{},"For making large-scale changes (e.g., code refactoring).",[925,1633,1634],{},"This seems to be the trend with companies like Google and Facebook.",[953,1636,1638],{"id":1637},"what-is-turborepo","What is Turborepo?",[925,1640,1641],{},"Monorepos are incredible for productivity, especially on the frontend, but the tooling can be a nightmare. There’s a lot of stuff to do (and things to mess up). Nothing “just works.” It’s become completely normal to waste entire days or weeks on plumbing — tweaking configs, writing one-off scripts, and stitching stuff together.",[925,1643,1644],{},"According to Jared Palmer the founder of Turborepo, it is a fresh take on the whole tooling setup. Designed to glue everything together. A toolchain with sensible defaults, but even better escape hatches. Built with the same techniques used by the big guys, but in a way that doesn’t require staff to maintain.",[925,1646,857],{},[953,1648,1650],{"id":1649},"what-does-turborepo-offer","What does Turborepo offer?",[925,1652,1653],{},"Turborepo reimagines build system techniques used by Facebook and Google to remove maintenance burden and overhead.",[1655,1656,1658],"h3",{"id":1657},"incremental-builds-cache-artifacts","Incremental builds (cache artifacts)",[925,1660,1661],{},"By skipping the artifacts that have already been computed by building once, Turborepo will remember what you’ve built.",[1655,1663,1665],{"id":1664},"content-aware-hashing-contents-not-timestamps","Content-aware hashing (contents not timestamps)",[925,1667,1668],{},"Turborepo looks at the contents of your files, not timestamps to figure out what needs to be built.",[1655,1670,1672],{"id":1671},"remote-caching-share-build-cache","Remote Caching (Share build cache)",[925,1674,1675],{},"Share a remote build cache with your teammates and CI\u002FCD for even faster builds.",[1655,1677,1679],{"id":1678},"parallel-execution-maximise-cpu-usage","Parallel execution (Maximise CPU usage)",[925,1681,1682],{},"Execute builds using every core at maximum parallelism without wasting idle CPUs.",[1655,1684,1686],{"id":1685},"zero-runtime-overhead-wont-interfere-with-your-code","Zero runtime overhead (Won’t interfere with your code)",[925,1688,1689],{},"Turborepo won’t interfere with your runtime code or touch your sourcemaps.",[1655,1691,1693],{"id":1692},"pruned-subsets-speed-up-paas","Pruned subsets (Speed up PaaS)",[925,1695,1696],{},"Speed up PaaS (Platform as a Service) deploys by generating a subset of your monorepo with only what’s needed to build a specific target.",[1655,1698,1700],{"id":1699},"task-pipelines-task-relationships","Task pipelines (Task relationships)",[925,1702,1703],{},"Define the relationships between your tasks and then let Turborepo optimize what to build and when.",[1655,1705,1707],{"id":1706},"profile-in-your-browser-generate-build-profiles","Profile in your browser (Generate build profiles)",[925,1709,1710],{},"Generate build profiles and import them in Chrome or Edge to understand which tasks are taking the longest.",[953,1712,1714],{"id":1713},"getting-started","Getting Started",[1655,1716,1718],{"id":1717},"brand-new-monorepo","Brand new monorepo",[925,1720,1721],{},"If you’re starting a brand new monorepo, you can get started with a single command.",[993,1723,1727],{"className":1724,"code":1725,"language":1726,"meta":998,"style":998},"language-sh-pr shiki shiki-themes github-light github-dark","npx create-turbo@latest\n","sh-pr",[941,1728,1729],{"__ignoreMap":998},[1002,1730,1731],{"class":1004,"line":1005},[1002,1732,1725],{},[925,1734,1735],{},"Follow the prompts to bootstrap a brand new Turborepo.",[925,1737,1738],{},[963,1739],{"alt":1740,"src":1741},"Bootstrap a brand new Turborepo","\u002Fimages\u002Fblog\u002F2022-01-01-turborepo-the-next-big-thing-in-build-systems\u002Fbootstrap-new.png",[993,1743,1745],{"className":1724,"code":1744,"language":1726,"meta":998,"style":998},"yarn add turbo -W --dev\n",[941,1746,1747],{"__ignoreMap":998},[1002,1748,1749],{"class":1004,"line":1005},[1002,1750,1744],{},[925,1752,1753],{},"Exisiting monorepo",[993,1755,1756],{"className":1724,"code":1744,"language":1726,"meta":998,"style":998},[941,1757,1758],{"__ignoreMap":998},[1002,1759,1760],{"class":1004,"line":1005},[1002,1761,1744],{},[925,1763,1764],{},"Or",[993,1766,1768],{"className":1724,"code":1767,"language":1726,"meta":998,"style":998},"npm install turbo -D\n",[941,1769,1770],{"__ignoreMap":998},[1002,1771,1772],{"class":1004,"line":1005},[1002,1773,1767],{},[925,1775,1776,1777,1780],{},"The turbo package is a little shell that will install the proper ",[941,1778,1779],{},"@turborepo\u002F*"," packages.",[1655,1782,1784],{"id":1783},"add-turbo-to-packagejson","Add turbo to package.json",[925,1786,1787,1788,1790,1791,1794],{},"In your root ",[941,1789,1102],{},", add a key ",[941,1792,1793],{},"turbo",". If your git repo's base branch is NOT origin\u002Fmaster then you need to specify a baseBranch too (for example, ours is set to origin\u002Fmain).",[993,1796,1800],{"className":1797,"code":1798,"language":1799,"meta":998,"style":998},"language-sh shiki shiki-themes github-light github-dark","{\n \"turbo\": {\n \"baseBranch\": \"origin\u002Fmain\"\n }\n}\n","sh",[941,1801,1802,1806,1816,1826,1830],{"__ignoreMap":998},[1002,1803,1804],{"class":1004,"line":1005},[1002,1805,1129],{"class":1030},[1002,1807,1808,1811,1814],{"class":1004,"line":1012},[1002,1809,1810],{"class":1026}," \"turbo\"",[1002,1812,1813],{"class":1019},":",[1002,1815,1457],{"class":1034},[1002,1817,1818,1821,1823],{"class":1004,"line":1047},[1002,1819,1820],{"class":1026}," \"baseBranch\"",[1002,1822,1813],{"class":1019},[1002,1824,1825],{"class":1034}," \"origin\u002Fmain\"\n",[1002,1827,1828],{"class":1004,"line":1054},[1002,1829,1269],{"class":1030},[1002,1831,1832],{"class":1004,"line":1060},[1002,1833,1170],{"class":1030},[1655,1835,1837],{"id":1836},"create-a-pipeline","Create a pipeline",[925,1839,1840],{},"In your package.json, add the commands you want to \"turbocharge\" to your pipeline.",[925,1842,1843],{},"Your pipeline both defines the way in which your NPM package.json scripts relate to each other, and configures cache artifacts for those scripts. These relationships and cache settings are then fanned out and applied to all package tasks across your entire monorepo.",[993,1845,1847],{"className":1797,"code":1846,"language":1799,"meta":998,"style":998},"{\n \"turbo\": {\n \"baseBranch\": \"origin\u002Fmain\",\n \"pipeline\": {\n \"build\": {\n \"dependsOn\": [\"^build\"],\n \"outputs\": [\".next\u002F**\"]\n },\n \"test\": {\n \"dependsOn\": [\"^build\"],\n \"outputs\": []\n },\n \"lint\": {\n \"outputs\": []\n },\n \"dev\": {\n \"cache\": false\n }\n }\n }\n}\n",[941,1848,1849,1853,1861,1870,1879,1888,1904,1918,1923,1932,1944,1954,1959,1969,1978,1983,1993,2004,2009,2015,2020],{"__ignoreMap":998},[1002,1850,1851],{"class":1004,"line":1005},[1002,1852,1129],{"class":1030},[1002,1854,1855,1857,1859],{"class":1004,"line":1012},[1002,1856,1810],{"class":1026},[1002,1858,1813],{"class":1019},[1002,1860,1457],{"class":1034},[1002,1862,1863,1865,1867],{"class":1004,"line":1047},[1002,1864,1820],{"class":1026},[1002,1866,1813],{"class":1019},[1002,1868,1869],{"class":1034}," \"origin\u002Fmain\",\n",[1002,1871,1872,1875,1877],{"class":1004,"line":1054},[1002,1873,1874],{"class":1026}," \"pipeline\"",[1002,1876,1813],{"class":1019},[1002,1878,1457],{"class":1034},[1002,1880,1881,1884,1886],{"class":1004,"line":1060},[1002,1882,1883],{"class":1026}," \"build\"",[1002,1885,1813],{"class":1019},[1002,1887,1457],{"class":1034},[1002,1889,1890,1893,1895,1898,1901],{"class":1004,"line":1272},[1002,1891,1892],{"class":1026}," \"dependsOn\"",[1002,1894,1813],{"class":1019},[1002,1896,1897],{"class":1030}," [",[1002,1899,1900],{"class":1034},"\"^build\"",[1002,1902,1903],{"class":1030},"],\n",[1002,1905,1906,1909,1911,1913,1916],{"class":1004,"line":1348},[1002,1907,1908],{"class":1026}," \"outputs\"",[1002,1910,1813],{"class":1019},[1002,1912,1897],{"class":1030},[1002,1914,1915],{"class":1034},"\".next\u002F**\"",[1002,1917,1207],{"class":1030},[1002,1919,1920],{"class":1004,"line":1354},[1002,1921,1922],{"class":1030}," },\n",[1002,1924,1925,1928,1930],{"class":1004,"line":1360},[1002,1926,1927],{"class":1026}," \"test\"",[1002,1929,1813],{"class":1019},[1002,1931,1457],{"class":1034},[1002,1933,1934,1936,1938,1940,1942],{"class":1004,"line":1366},[1002,1935,1892],{"class":1026},[1002,1937,1813],{"class":1019},[1002,1939,1897],{"class":1030},[1002,1941,1900],{"class":1034},[1002,1943,1903],{"class":1030},[1002,1945,1947,1949,1951],{"class":1004,"line":1946},11,[1002,1948,1908],{"class":1026},[1002,1950,1813],{"class":1019},[1002,1952,1953],{"class":1030}," []\n",[1002,1955,1957],{"class":1004,"line":1956},12,[1002,1958,1922],{"class":1030},[1002,1960,1962,1965,1967],{"class":1004,"line":1961},13,[1002,1963,1964],{"class":1026}," \"lint\"",[1002,1966,1813],{"class":1019},[1002,1968,1457],{"class":1034},[1002,1970,1972,1974,1976],{"class":1004,"line":1971},14,[1002,1973,1908],{"class":1026},[1002,1975,1813],{"class":1019},[1002,1977,1953],{"class":1030},[1002,1979,1981],{"class":1004,"line":1980},15,[1002,1982,1922],{"class":1030},[1002,1984,1986,1989,1991],{"class":1004,"line":1985},16,[1002,1987,1988],{"class":1026}," \"dev\"",[1002,1990,1813],{"class":1019},[1002,1992,1457],{"class":1034},[1002,1994,1996,1999,2001],{"class":1004,"line":1995},17,[1002,1997,1998],{"class":1026}," \"cache\"",[1002,2000,1813],{"class":1019},[1002,2002,2003],{"class":1019}," false\n",[1002,2005,2007],{"class":1004,"line":2006},18,[1002,2008,1351],{"class":1030},[1002,2010,2012],{"class":1004,"line":2011},19,[1002,2013,2014],{"class":1030}," }\n",[1002,2016,2018],{"class":1004,"line":2017},20,[1002,2019,1269],{"class":1030},[1002,2021,2023],{"class":1004,"line":2022},21,[1002,2024,1170],{"class":1030},[925,2026,2027],{},"In the above example, the build and test tasks are dependent on their packages dependencies and devDependencies being built first, this is denoted with the ^ prefix.",[925,2029,2030,2031,2034,2035,2038,2039,2044,2045,2048,2049,2052],{},"For each script in each workspace’s package.json, Turborepo will cache files outputted to ",[941,2032,2033],{},"dist\u002F"," and ",[941,2036,2037],{},"build\u002F"," folders by default if an override isn't added. Using the ",[933,2040,2043],{"href":2041,"rel":2042},"https:\u002F\u002Fturborepo.org\u002Fdocs\u002Ffeatures\u002Fcaching#configuring-cache-outputs-1",[937],"outputs"," array allows you to override the default cache folders, like in the example above, where the ",[941,2046,2047],{},".next\u002F"," folder is selected to be the default cache folder for the build task. Turborepo will automatically record and cache logs to ",[941,2050,2051],{},".turbo\u002Fturbo-\u003Cscript>.log"," for you, so you don't ever need to specify that in the outputs array.",[925,2054,2055],{},"Finally, the dev task has its caching disabled using the cache key with a value of false.",[925,2057,2058],{},"See the pipeline documentation for more details on how to configure your pipeline.",[1655,2060,2062],{"id":2061},"run","Run",[925,2064,2065],{},"To build with your freshly installed turbo, type the following:",[993,2067,2069],{"className":1724,"code":2068,"language":1726,"meta":998,"style":998},"yarn turbo run build\n",[941,2070,2071],{"__ignoreMap":998},[1002,2072,2073],{"class":1004,"line":1005},[1002,2074,2068],{},[925,2076,2077],{},[963,2078],{"alt":2062,"src":2079},"\u002Fimages\u002Fblog\u002F2022-01-01-turborepo-the-next-big-thing-in-build-systems\u002Fturbo-run-build.png",[925,2081,2082],{},"Once it’s built, you can run the apps inside your repo:",[993,2084,2086],{"className":1724,"code":2085,"language":1726,"meta":998,"style":998},"yarn dev\n",[941,2087,2088],{"__ignoreMap":998},[1002,2089,2090],{"class":1004,"line":1005},[1002,2091,2085],{},[953,2093,1521],{"id":1520},[925,2095,2096],{},"Turborepo significantly increases build speeds as well as serves as an abstraction of the declarative build pipeline, easy to use config options, profiling and debugging options and documentation.",[925,2098,2099],{},"Turborepo would most certainly change the minds of people who hesitated the monorepo approach for building apps.",[1579,2101,2102],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":2104},[2105,2106,2107,2117,2123],{"id":1604,"depth":1012,"text":1605},{"id":1637,"depth":1012,"text":1638},{"id":1649,"depth":1012,"text":1650,"children":2108},[2109,2110,2111,2112,2113,2114,2115,2116],{"id":1657,"depth":1047,"text":1658},{"id":1664,"depth":1047,"text":1665},{"id":1671,"depth":1047,"text":1672},{"id":1678,"depth":1047,"text":1679},{"id":1685,"depth":1047,"text":1686},{"id":1692,"depth":1047,"text":1693},{"id":1699,"depth":1047,"text":1700},{"id":1706,"depth":1047,"text":1707},{"id":1713,"depth":1012,"text":1714,"children":2118},[2119,2120,2121,2122],{"id":1717,"depth":1047,"text":1718},{"id":1783,"depth":1047,"text":1784},{"id":1836,"depth":1047,"text":1837},{"id":2061,"depth":1047,"text":2062},{"id":1520,"depth":1012,"text":1521},"2022-01-01","\u002Fimages\u002Fblog\u002Ffeatures\u002Fturborepo-the-next-big-thing-in-build-systems.jpg",{},{"title":855,"description":857},"blog\u002Fturborepo-the-next-big-thing-in-build-systems",[16,17,859],"xJ4_43FqB-D008jcLVipmqOoKxmuFWaFa-y3AsOC25o",{"id":2132,"title":516,"author":920,"body":2133,"date":14857,"description":518,"extension":1591,"image":14858,"meta":14859,"navigation":1050,"path":517,"seo":14860,"stem":14861,"tags":14862,"__hash__":14863},"blog\u002Fblog\u002Fjavascript-design-patterns.md",{"type":922,"value":2134,"toc":14825},[2135,2143,2146,2149,2152,2155,2161,2165,2168,2194,2198,2202,2209,2217,2222,2225,2958,2961,2965,2968,2973,2976,3286,3289,3293,3301,3306,3313,3316,3886,3889,3892,3896,3904,3909,3916,3919,4259,4265,4269,4276,4281,4284,4287,4550,4553,4556,4559,4563,4570,4573,4578,4581,4829,4832,4836,4843,4846,4857,4862,4876,4879,5756,5759,5763,5770,5775,5778,5781,6590,6593,6597,6604,6607,6612,6634,6986,7001,7005,7012,7017,7024,7035,7597,7600,7604,7611,7616,7619,7622,7659,7670,8115,8118,8122,8134,8139,8142,8145,8185,8194,8575,8587,8591,8598,8603,8610,8623,9063,9066,9070,9077,9082,9089,9092,9605,9608,9612,9619,9624,9627,9869,9872,9876,9883,9888,9895,9909,10508,10512,10516,10523,10528,10535,11067,11074,11091,11095,11104,11109,11116,11792,11795,11812,11816,11819,11824,11831,12447,12470,12474,12479,12484,12491,12785,12810,12816,12823,12828,12835,13364,13373,13388,13391,13397,13400,13405,13412,14222,14225,14229,14236,14241,14248,14803,14805,14808,14816,14819,14822],[2136,2137,2138],"blockquote",{},[925,2139,2140],{},[928,2141,2142],{},"“Each pattern describes a problem which occurs over and over again … and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without doing it the same way twice.” – Christopher Alexander",[925,2144,2145],{},"The 23 Gang of Four (GoF) patterns are generally considered the foundation for all other patterns. There are 23 different known design patterns, and they can be separated into three categories by purpose: Creational, Structural, and Behavioral (see below for a complete list).",[925,2147,2148],{},"C - Creational",[925,2150,2151],{},"S - Structural",[925,2153,2154],{},"B - Behavioral",[925,2156,2157],{},[963,2158],{"alt":2159,"src":2160},"Design patterns categorised for creational, behavioral and structural","\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fdesign-patterns.jpeg",[953,2162,2164],{"id":2163},"why-design-patterns","Why Design Patterns?",[925,2166,2167],{},"We already use design patterns every day. They help us solve recurring design problems. But is it necessary to spend time learning them? Let’s look into a few key benefits that design patterns grant us.",[1530,2169,2170,2176,2182,2188],{},[974,2171,2172,2175],{},[1107,2173,2174],{},"Do not Repeat Yourself (DRY)"," Patterns help in implementing DRY – this helps to keep our codebase lean.",[974,2177,2178,2181],{},[1107,2179,2180],{},"Reusability"," Code reusability helps to minimise bugs and test functionality in a clean and concise manner. This also helps to improve code readability.",[974,2183,2184,2187],{},[1107,2185,2186],{},"Proven Solutions"," You can be assured that they were revised multiple times and optimizations were probably implemented.",[974,2189,2190,2193],{},[1107,2191,2192],{},"Eases communication:"," When developers are familiar with design patterns, they can more easily communicate with one another about potential solutions to a given problem.",[953,2195,2197],{"id":2196},"creational-design-patterns","Creational Design Patterns",[1655,2199,2201],{"id":2200},"factory-method","Factory Method",[925,2203,2204,2205,2208],{},"A Factory Pattern or Factory Method Pattern says that just ",[1107,2206,2207],{},"define an interface or abstract class for creating an object but let the subclasses decide which class to instantiate."," In other words, subclasses are responsible to create the instance of the class.",[925,2210,2211,2212,2216],{},"A ",[1107,2213,2214],{},[928,2215,2201],{}," creates new objects as instructed by the client. One way to create objects in JavaScript is by invoking a constructor function with the new operator. There are maybe scenarios, where the client does not know which one of several candidates objects to instantiate. The Factory Method allows the client to delegate object creation while still retaining control over which type to instantiate.",[925,2218,2219],{},[963,2220],{"alt":2201,"src":2221},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Ffactory-method.png",[925,2223,2224],{},"The factory method will simply set up and return the new object when you call the function. Check out this example:",[993,2226,2230],{"className":2227,"code":2228,"language":2229,"meta":998,"style":998},"language-jsx shiki shiki-themes github-light github-dark","const VEHICLE_TYPE = {\n CAR: 'car',\n VAN: 'van',\n};\n\nconst VEHICLE_COLOR = {\n WHITE: 'white',\n SILVER: 'silver',\n ORANGE: 'orange',\n};\n\nconst VEHICLE_TRANSMISSION = {\n MANUAL: 'manual',\n AUTO: 'auto',\n};\n\nclass Car {\n constructor(options) {\n this.vehicleType = options.vehicleType;\n this.doors = options.doors ?? 4;\n this.transmission = options.transmission ?? VEHICLE_TRANSMISSION.AUTO;\n this.color = options.color ?? VEHICLE_COLOR.SILVER;\n }\n}\n\nclass Van {\n constructor(options) {\n this.vehicleType = options.vehicleType;\n this.transmission = options.transmission ?? VEHICLE_TRANSMISSION.MANUAL;\n this.color = options.color ?? VEHICLE_COLOR.ORANGE;\n }\n}\n\nclass VehicleFactory {\n createVehicle(options) {\n switch (options.vehicleType) {\n case VEHICLE_TYPE.CAR:\n this.vehicle = Car;\n break;\n case VEHICLE_TYPE.VAN:\n this.vehicle = Van;\n break;\n }\n\n return new this.vehicle(options);\n }\n}\n\nconst carFactory = new VehicleFactory();\n\nconst car = carFactory.createVehicle({\n vehicleType: VEHICLE_TYPE.CAR,\n color: VEHICLE_COLOR.WHITE,\n doors: 3,\n});\n\nconst van = carFactory.createVehicle({\n vehicleType: VEHICLE_TYPE.VAN,\n color: VEHICLE_COLOR.ORANGE,\n doors: 5,\n});\n\n\u002F\u002F true\nconsole.log(car.vehicleType === VEHICLE_TYPE.CAR);\n\u002F\u002F { vehicleType: 'car', color: 'white', doors: 5, transmission: 'auto' }\nconsole.log(car);\n\u002F\u002F true\nconsole.log(van.vehicleType === VEHICLE_TYPE.VAN);\n\u002F\u002F { vehicleType: 'van', color: 'orange', doors: 5, transmission: 'manual' }\nconsole.log(van);\n","jsx",[941,2231,2232,2243,2253,2263,2267,2271,2282,2292,2302,2312,2316,2320,2331,2341,2351,2355,2359,2369,2383,2397,2417,2440,2464,2469,2474,2479,2489,2500,2511,2533,2555,2560,2565,2570,2580,2592,2601,2617,2631,2639,2653,2665,2672,2677,2682,2702,2707,2712,2717,2733,2738,2757,2772,2788,2799,2805,2810,2826,2839,2852,2862,2867,2872,2878,2901,2907,2917,2922,2942,2948],{"__ignoreMap":998},[1002,2233,2234,2236,2239,2241],{"class":1004,"line":1005},[1002,2235,1016],{"class":1015},[1002,2237,2238],{"class":1019}," VEHICLE_TYPE",[1002,2240,1023],{"class":1015},[1002,2242,1457],{"class":1030},[1002,2244,2245,2248,2251],{"class":1004,"line":1012},[1002,2246,2247],{"class":1030}," CAR: ",[1002,2249,2250],{"class":1034},"'car'",[1002,2252,1143],{"class":1030},[1002,2254,2255,2258,2261],{"class":1004,"line":1047},[1002,2256,2257],{"class":1030}," VAN: ",[1002,2259,2260],{"class":1034},"'van'",[1002,2262,1143],{"class":1030},[1002,2264,2265],{"class":1004,"line":1054},[1002,2266,1517],{"class":1030},[1002,2268,2269],{"class":1004,"line":1060},[1002,2270,1051],{"emptyLinePlaceholder":1050},[1002,2272,2273,2275,2278,2280],{"class":1004,"line":1272},[1002,2274,1016],{"class":1015},[1002,2276,2277],{"class":1019}," VEHICLE_COLOR",[1002,2279,1023],{"class":1015},[1002,2281,1457],{"class":1030},[1002,2283,2284,2287,2290],{"class":1004,"line":1348},[1002,2285,2286],{"class":1030}," WHITE: ",[1002,2288,2289],{"class":1034},"'white'",[1002,2291,1143],{"class":1030},[1002,2293,2294,2297,2300],{"class":1004,"line":1354},[1002,2295,2296],{"class":1030}," SILVER: ",[1002,2298,2299],{"class":1034},"'silver'",[1002,2301,1143],{"class":1030},[1002,2303,2304,2307,2310],{"class":1004,"line":1360},[1002,2305,2306],{"class":1030}," ORANGE: ",[1002,2308,2309],{"class":1034},"'orange'",[1002,2311,1143],{"class":1030},[1002,2313,2314],{"class":1004,"line":1366},[1002,2315,1517],{"class":1030},[1002,2317,2318],{"class":1004,"line":1946},[1002,2319,1051],{"emptyLinePlaceholder":1050},[1002,2321,2322,2324,2327,2329],{"class":1004,"line":1956},[1002,2323,1016],{"class":1015},[1002,2325,2326],{"class":1019}," VEHICLE_TRANSMISSION",[1002,2328,1023],{"class":1015},[1002,2330,1457],{"class":1030},[1002,2332,2333,2336,2339],{"class":1004,"line":1961},[1002,2334,2335],{"class":1030}," MANUAL: ",[1002,2337,2338],{"class":1034},"'manual'",[1002,2340,1143],{"class":1030},[1002,2342,2343,2346,2349],{"class":1004,"line":1971},[1002,2344,2345],{"class":1030}," AUTO: ",[1002,2347,2348],{"class":1034},"'auto'",[1002,2350,1143],{"class":1030},[1002,2352,2353],{"class":1004,"line":1980},[1002,2354,1517],{"class":1030},[1002,2356,2357],{"class":1004,"line":1985},[1002,2358,1051],{"emptyLinePlaceholder":1050},[1002,2360,2361,2364,2367],{"class":1004,"line":1995},[1002,2362,2363],{"class":1015},"class",[1002,2365,2366],{"class":1026}," Car",[1002,2368,1457],{"class":1030},[1002,2370,2371,2374,2376,2380],{"class":1004,"line":2006},[1002,2372,2373],{"class":1015}," constructor",[1002,2375,1031],{"class":1030},[1002,2377,2379],{"class":2378},"s4XuR","options",[1002,2381,2382],{"class":1030},") {\n",[1002,2384,2385,2388,2391,2394],{"class":1004,"line":2011},[1002,2386,2387],{"class":1019}," this",[1002,2389,2390],{"class":1030},".vehicleType ",[1002,2392,2393],{"class":1015},"=",[1002,2395,2396],{"class":1030}," options.vehicleType;\n",[1002,2398,2399,2401,2404,2406,2409,2412,2415],{"class":1004,"line":2017},[1002,2400,2387],{"class":1019},[1002,2402,2403],{"class":1030},".doors ",[1002,2405,2393],{"class":1015},[1002,2407,2408],{"class":1030}," options.doors ",[1002,2410,2411],{"class":1015},"??",[1002,2413,2414],{"class":1019}," 4",[1002,2416,1407],{"class":1030},[1002,2418,2419,2421,2424,2426,2429,2431,2433,2435,2438],{"class":1004,"line":2022},[1002,2420,2387],{"class":1019},[1002,2422,2423],{"class":1030},".transmission ",[1002,2425,2393],{"class":1015},[1002,2427,2428],{"class":1030}," options.transmission ",[1002,2430,2411],{"class":1015},[1002,2432,2326],{"class":1019},[1002,2434,948],{"class":1030},[1002,2436,2437],{"class":1019},"AUTO",[1002,2439,1407],{"class":1030},[1002,2441,2443,2445,2448,2450,2453,2455,2457,2459,2462],{"class":1004,"line":2442},22,[1002,2444,2387],{"class":1019},[1002,2446,2447],{"class":1030},".color ",[1002,2449,2393],{"class":1015},[1002,2451,2452],{"class":1030}," options.color ",[1002,2454,2411],{"class":1015},[1002,2456,2277],{"class":1019},[1002,2458,948],{"class":1030},[1002,2460,2461],{"class":1019},"SILVER",[1002,2463,1407],{"class":1030},[1002,2465,2467],{"class":1004,"line":2466},23,[1002,2468,1269],{"class":1030},[1002,2470,2472],{"class":1004,"line":2471},24,[1002,2473,1170],{"class":1030},[1002,2475,2477],{"class":1004,"line":2476},25,[1002,2478,1051],{"emptyLinePlaceholder":1050},[1002,2480,2482,2484,2487],{"class":1004,"line":2481},26,[1002,2483,2363],{"class":1015},[1002,2485,2486],{"class":1026}," Van",[1002,2488,1457],{"class":1030},[1002,2490,2492,2494,2496,2498],{"class":1004,"line":2491},27,[1002,2493,2373],{"class":1015},[1002,2495,1031],{"class":1030},[1002,2497,2379],{"class":2378},[1002,2499,2382],{"class":1030},[1002,2501,2503,2505,2507,2509],{"class":1004,"line":2502},28,[1002,2504,2387],{"class":1019},[1002,2506,2390],{"class":1030},[1002,2508,2393],{"class":1015},[1002,2510,2396],{"class":1030},[1002,2512,2514,2516,2518,2520,2522,2524,2526,2528,2531],{"class":1004,"line":2513},29,[1002,2515,2387],{"class":1019},[1002,2517,2423],{"class":1030},[1002,2519,2393],{"class":1015},[1002,2521,2428],{"class":1030},[1002,2523,2411],{"class":1015},[1002,2525,2326],{"class":1019},[1002,2527,948],{"class":1030},[1002,2529,2530],{"class":1019},"MANUAL",[1002,2532,1407],{"class":1030},[1002,2534,2536,2538,2540,2542,2544,2546,2548,2550,2553],{"class":1004,"line":2535},30,[1002,2537,2387],{"class":1019},[1002,2539,2447],{"class":1030},[1002,2541,2393],{"class":1015},[1002,2543,2452],{"class":1030},[1002,2545,2411],{"class":1015},[1002,2547,2277],{"class":1019},[1002,2549,948],{"class":1030},[1002,2551,2552],{"class":1019},"ORANGE",[1002,2554,1407],{"class":1030},[1002,2556,2558],{"class":1004,"line":2557},31,[1002,2559,1269],{"class":1030},[1002,2561,2563],{"class":1004,"line":2562},32,[1002,2564,1170],{"class":1030},[1002,2566,2568],{"class":1004,"line":2567},33,[1002,2569,1051],{"emptyLinePlaceholder":1050},[1002,2571,2573,2575,2578],{"class":1004,"line":2572},34,[1002,2574,2363],{"class":1015},[1002,2576,2577],{"class":1026}," VehicleFactory",[1002,2579,1457],{"class":1030},[1002,2581,2583,2586,2588,2590],{"class":1004,"line":2582},35,[1002,2584,2585],{"class":1026}," createVehicle",[1002,2587,1031],{"class":1030},[1002,2589,2379],{"class":2378},[1002,2591,2382],{"class":1030},[1002,2593,2595,2598],{"class":1004,"line":2594},36,[1002,2596,2597],{"class":1015}," switch",[1002,2599,2600],{"class":1030}," (options.vehicleType) {\n",[1002,2602,2604,2607,2609,2611,2614],{"class":1004,"line":2603},37,[1002,2605,2606],{"class":1015}," case",[1002,2608,2238],{"class":1019},[1002,2610,948],{"class":1030},[1002,2612,2613],{"class":1019},"CAR",[1002,2615,2616],{"class":1030},":\n",[1002,2618,2620,2623,2626,2628],{"class":1004,"line":2619},38,[1002,2621,2622],{"class":1019}," this",[1002,2624,2625],{"class":1030},".vehicle ",[1002,2627,2393],{"class":1015},[1002,2629,2630],{"class":1030}," Car;\n",[1002,2632,2634,2637],{"class":1004,"line":2633},39,[1002,2635,2636],{"class":1015}," break",[1002,2638,1407],{"class":1030},[1002,2640,2642,2644,2646,2648,2651],{"class":1004,"line":2641},40,[1002,2643,2606],{"class":1015},[1002,2645,2238],{"class":1019},[1002,2647,948],{"class":1030},[1002,2649,2650],{"class":1019},"VAN",[1002,2652,2616],{"class":1030},[1002,2654,2656,2658,2660,2662],{"class":1004,"line":2655},41,[1002,2657,2622],{"class":1019},[1002,2659,2625],{"class":1030},[1002,2661,2393],{"class":1015},[1002,2663,2664],{"class":1030}," Van;\n",[1002,2666,2668,2670],{"class":1004,"line":2667},42,[1002,2669,2636],{"class":1015},[1002,2671,1407],{"class":1030},[1002,2673,2675],{"class":1004,"line":2674},43,[1002,2676,2014],{"class":1030},[1002,2678,2680],{"class":1004,"line":2679},44,[1002,2681,1051],{"emptyLinePlaceholder":1050},[1002,2683,2685,2688,2691,2694,2696,2699],{"class":1004,"line":2684},45,[1002,2686,2687],{"class":1015}," return",[1002,2689,2690],{"class":1015}," new",[1002,2692,2693],{"class":1019}," this",[1002,2695,948],{"class":1030},[1002,2697,2698],{"class":1026},"vehicle",[1002,2700,2701],{"class":1030},"(options);\n",[1002,2703,2705],{"class":1004,"line":2704},46,[1002,2706,1269],{"class":1030},[1002,2708,2710],{"class":1004,"line":2709},47,[1002,2711,1170],{"class":1030},[1002,2713,2715],{"class":1004,"line":2714},48,[1002,2716,1051],{"emptyLinePlaceholder":1050},[1002,2718,2720,2722,2725,2727,2729,2731],{"class":1004,"line":2719},49,[1002,2721,1016],{"class":1015},[1002,2723,2724],{"class":1019}," carFactory",[1002,2726,1023],{"class":1015},[1002,2728,2690],{"class":1015},[1002,2730,2577],{"class":1026},[1002,2732,1428],{"class":1030},[1002,2734,2736],{"class":1004,"line":2735},50,[1002,2737,1051],{"emptyLinePlaceholder":1050},[1002,2739,2741,2743,2746,2748,2751,2754],{"class":1004,"line":2740},51,[1002,2742,1016],{"class":1015},[1002,2744,2745],{"class":1019}," car",[1002,2747,1023],{"class":1015},[1002,2749,2750],{"class":1030}," carFactory.",[1002,2752,2753],{"class":1026},"createVehicle",[1002,2755,2756],{"class":1030},"({\n",[1002,2758,2760,2763,2766,2768,2770],{"class":1004,"line":2759},52,[1002,2761,2762],{"class":1030}," vehicleType: ",[1002,2764,2765],{"class":1019},"VEHICLE_TYPE",[1002,2767,948],{"class":1030},[1002,2769,2613],{"class":1019},[1002,2771,1143],{"class":1030},[1002,2773,2775,2778,2781,2783,2786],{"class":1004,"line":2774},53,[1002,2776,2777],{"class":1030}," color: ",[1002,2779,2780],{"class":1019},"VEHICLE_COLOR",[1002,2782,948],{"class":1030},[1002,2784,2785],{"class":1019},"WHITE",[1002,2787,1143],{"class":1030},[1002,2789,2791,2794,2797],{"class":1004,"line":2790},54,[1002,2792,2793],{"class":1030}," doors: ",[1002,2795,2796],{"class":1019},"3",[1002,2798,1143],{"class":1030},[1002,2800,2802],{"class":1004,"line":2801},55,[1002,2803,2804],{"class":1030},"});\n",[1002,2806,2808],{"class":1004,"line":2807},56,[1002,2809,1051],{"emptyLinePlaceholder":1050},[1002,2811,2813,2815,2818,2820,2822,2824],{"class":1004,"line":2812},57,[1002,2814,1016],{"class":1015},[1002,2816,2817],{"class":1019}," van",[1002,2819,1023],{"class":1015},[1002,2821,2750],{"class":1030},[1002,2823,2753],{"class":1026},[1002,2825,2756],{"class":1030},[1002,2827,2829,2831,2833,2835,2837],{"class":1004,"line":2828},58,[1002,2830,2762],{"class":1030},[1002,2832,2765],{"class":1019},[1002,2834,948],{"class":1030},[1002,2836,2650],{"class":1019},[1002,2838,1143],{"class":1030},[1002,2840,2842,2844,2846,2848,2850],{"class":1004,"line":2841},59,[1002,2843,2777],{"class":1030},[1002,2845,2780],{"class":1019},[1002,2847,948],{"class":1030},[1002,2849,2552],{"class":1019},[1002,2851,1143],{"class":1030},[1002,2853,2855,2857,2860],{"class":1004,"line":2854},60,[1002,2856,2793],{"class":1030},[1002,2858,2859],{"class":1019},"5",[1002,2861,1143],{"class":1030},[1002,2863,2865],{"class":1004,"line":2864},61,[1002,2866,2804],{"class":1030},[1002,2868,2870],{"class":1004,"line":2869},62,[1002,2871,1051],{"emptyLinePlaceholder":1050},[1002,2873,2875],{"class":1004,"line":2874},63,[1002,2876,2877],{"class":1008},"\u002F\u002F true\n",[1002,2879,2881,2884,2887,2890,2893,2895,2897,2899],{"class":1004,"line":2880},64,[1002,2882,2883],{"class":1030},"console.",[1002,2885,2886],{"class":1026},"log",[1002,2888,2889],{"class":1030},"(car.vehicleType ",[1002,2891,2892],{"class":1015},"===",[1002,2894,2238],{"class":1019},[1002,2896,948],{"class":1030},[1002,2898,2613],{"class":1019},[1002,2900,1085],{"class":1030},[1002,2902,2904],{"class":1004,"line":2903},65,[1002,2905,2906],{"class":1008},"\u002F\u002F { vehicleType: 'car', color: 'white', doors: 5, transmission: 'auto' }\n",[1002,2908,2910,2912,2914],{"class":1004,"line":2909},66,[1002,2911,2883],{"class":1030},[1002,2913,2886],{"class":1026},[1002,2915,2916],{"class":1030},"(car);\n",[1002,2918,2920],{"class":1004,"line":2919},67,[1002,2921,2877],{"class":1008},[1002,2923,2925,2927,2929,2932,2934,2936,2938,2940],{"class":1004,"line":2924},68,[1002,2926,2883],{"class":1030},[1002,2928,2886],{"class":1026},[1002,2930,2931],{"class":1030},"(van.vehicleType ",[1002,2933,2892],{"class":1015},[1002,2935,2238],{"class":1019},[1002,2937,948],{"class":1030},[1002,2939,2650],{"class":1019},[1002,2941,1085],{"class":1030},[1002,2943,2945],{"class":1004,"line":2944},69,[1002,2946,2947],{"class":1008},"\u002F\u002F { vehicleType: 'van', color: 'orange', doors: 5, transmission: 'manual' }\n",[1002,2949,2951,2953,2955],{"class":1004,"line":2950},70,[1002,2952,2883],{"class":1030},[1002,2954,2886],{"class":1026},[1002,2956,2957],{"class":1030},"(van);\n",[925,2959,2960],{},"Extensibility is the key objective of the Factory Method. Factory Methods are often used in applications that maintain, manage, or even manipulate different collections of objects but at the same time have many characteristics (i.e. methods and properties) in common. An example would be a collection of documents with a mix of markdown documents, pdf documents, and RTF documents.",[1655,2962,2964],{"id":2963},"abstract-factory","Abstract Factory",[925,2966,2967],{},"Abstract Factory creates groups of common objects without specifying their concrete classes. There are situations when we have some of the same types of factories and we want to encapsulate the logic of choice, what of the factories use to a given task.",[925,2969,2970],{},[963,2971],{"alt":2964,"src":2972},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fabstract-factory.png",[925,2974,2975],{},"Suppose we have two Abstract Factories whose task is to create vehicles such as cars and vans. One is the Car Factory which creates vehicles that are cars and the other is the Van Factory which creates vehicles that are vans. Both Factories creates vehicles, but they differ in what they do, which is their common theme. This is an implementation of the Abstract Factory pattern.",[993,2977,2979],{"className":2227,"code":2978,"language":2229,"meta":998,"style":998},"class Vehicle {\n startEngine() {}\n}\n\nclass Car extends Vehicle {\n startEngine() {\n console.log('Car: Start engine');\n }\n}\n\nclass Van extends Vehicle {\n startEngine() {\n console.log('Van: Start engine');\n }\n}\n\nclass VehicleFactory {\n make() {}\n}\n\nclass CarFactory extends VehicleFactory {\n makeCar() {\n console.log('Car created');\n return new Car();\n }\n}\n\nclass VanFactory extends VehicleFactory {\n makeVan() {\n console.log('Van created');\n return new Van();\n }\n}\n\nconst carFactory = new CarFactory();\nconst car = carFactory.makeCar();\ncar.startEngine();\n\nconst vanFactory = new VanFactory();\n",[941,2980,2981,2990,2998,3002,3006,3019,3026,3040,3044,3048,3052,3064,3070,3083,3087,3091,3095,3103,3110,3114,3118,3131,3138,3151,3161,3165,3169,3173,3186,3193,3206,3216,3220,3224,3228,3242,3257,3267,3271],{"__ignoreMap":998},[1002,2982,2983,2985,2988],{"class":1004,"line":1005},[1002,2984,2363],{"class":1015},[1002,2986,2987],{"class":1026}," Vehicle",[1002,2989,1457],{"class":1030},[1002,2991,2992,2995],{"class":1004,"line":1012},[1002,2993,2994],{"class":1026}," startEngine",[1002,2996,2997],{"class":1030},"() {}\n",[1002,2999,3000],{"class":1004,"line":1047},[1002,3001,1170],{"class":1030},[1002,3003,3004],{"class":1004,"line":1054},[1002,3005,1051],{"emptyLinePlaceholder":1050},[1002,3007,3008,3010,3012,3015,3017],{"class":1004,"line":1060},[1002,3009,2363],{"class":1015},[1002,3011,2366],{"class":1026},[1002,3013,3014],{"class":1015}," extends",[1002,3016,2987],{"class":1026},[1002,3018,1457],{"class":1030},[1002,3020,3021,3023],{"class":1004,"line":1272},[1002,3022,2994],{"class":1026},[1002,3024,3025],{"class":1030},"() {\n",[1002,3027,3028,3031,3033,3035,3038],{"class":1004,"line":1348},[1002,3029,3030],{"class":1030}," console.",[1002,3032,2886],{"class":1026},[1002,3034,1031],{"class":1030},[1002,3036,3037],{"class":1034},"'Car: Start engine'",[1002,3039,1085],{"class":1030},[1002,3041,3042],{"class":1004,"line":1354},[1002,3043,1269],{"class":1030},[1002,3045,3046],{"class":1004,"line":1360},[1002,3047,1170],{"class":1030},[1002,3049,3050],{"class":1004,"line":1366},[1002,3051,1051],{"emptyLinePlaceholder":1050},[1002,3053,3054,3056,3058,3060,3062],{"class":1004,"line":1946},[1002,3055,2363],{"class":1015},[1002,3057,2486],{"class":1026},[1002,3059,3014],{"class":1015},[1002,3061,2987],{"class":1026},[1002,3063,1457],{"class":1030},[1002,3065,3066,3068],{"class":1004,"line":1956},[1002,3067,2994],{"class":1026},[1002,3069,3025],{"class":1030},[1002,3071,3072,3074,3076,3078,3081],{"class":1004,"line":1961},[1002,3073,3030],{"class":1030},[1002,3075,2886],{"class":1026},[1002,3077,1031],{"class":1030},[1002,3079,3080],{"class":1034},"'Van: Start engine'",[1002,3082,1085],{"class":1030},[1002,3084,3085],{"class":1004,"line":1971},[1002,3086,1269],{"class":1030},[1002,3088,3089],{"class":1004,"line":1980},[1002,3090,1170],{"class":1030},[1002,3092,3093],{"class":1004,"line":1985},[1002,3094,1051],{"emptyLinePlaceholder":1050},[1002,3096,3097,3099,3101],{"class":1004,"line":1995},[1002,3098,2363],{"class":1015},[1002,3100,2577],{"class":1026},[1002,3102,1457],{"class":1030},[1002,3104,3105,3108],{"class":1004,"line":2006},[1002,3106,3107],{"class":1026}," make",[1002,3109,2997],{"class":1030},[1002,3111,3112],{"class":1004,"line":2011},[1002,3113,1170],{"class":1030},[1002,3115,3116],{"class":1004,"line":2017},[1002,3117,1051],{"emptyLinePlaceholder":1050},[1002,3119,3120,3122,3125,3127,3129],{"class":1004,"line":2022},[1002,3121,2363],{"class":1015},[1002,3123,3124],{"class":1026}," CarFactory",[1002,3126,3014],{"class":1015},[1002,3128,2577],{"class":1026},[1002,3130,1457],{"class":1030},[1002,3132,3133,3136],{"class":1004,"line":2442},[1002,3134,3135],{"class":1026}," makeCar",[1002,3137,3025],{"class":1030},[1002,3139,3140,3142,3144,3146,3149],{"class":1004,"line":2466},[1002,3141,3030],{"class":1030},[1002,3143,2886],{"class":1026},[1002,3145,1031],{"class":1030},[1002,3147,3148],{"class":1034},"'Car created'",[1002,3150,1085],{"class":1030},[1002,3152,3153,3155,3157,3159],{"class":1004,"line":2471},[1002,3154,2687],{"class":1015},[1002,3156,2690],{"class":1015},[1002,3158,2366],{"class":1026},[1002,3160,1428],{"class":1030},[1002,3162,3163],{"class":1004,"line":2476},[1002,3164,1269],{"class":1030},[1002,3166,3167],{"class":1004,"line":2481},[1002,3168,1170],{"class":1030},[1002,3170,3171],{"class":1004,"line":2491},[1002,3172,1051],{"emptyLinePlaceholder":1050},[1002,3174,3175,3177,3180,3182,3184],{"class":1004,"line":2502},[1002,3176,2363],{"class":1015},[1002,3178,3179],{"class":1026}," VanFactory",[1002,3181,3014],{"class":1015},[1002,3183,2577],{"class":1026},[1002,3185,1457],{"class":1030},[1002,3187,3188,3191],{"class":1004,"line":2513},[1002,3189,3190],{"class":1026}," makeVan",[1002,3192,3025],{"class":1030},[1002,3194,3195,3197,3199,3201,3204],{"class":1004,"line":2535},[1002,3196,3030],{"class":1030},[1002,3198,2886],{"class":1026},[1002,3200,1031],{"class":1030},[1002,3202,3203],{"class":1034},"'Van created'",[1002,3205,1085],{"class":1030},[1002,3207,3208,3210,3212,3214],{"class":1004,"line":2557},[1002,3209,2687],{"class":1015},[1002,3211,2690],{"class":1015},[1002,3213,2486],{"class":1026},[1002,3215,1428],{"class":1030},[1002,3217,3218],{"class":1004,"line":2562},[1002,3219,1269],{"class":1030},[1002,3221,3222],{"class":1004,"line":2567},[1002,3223,1170],{"class":1030},[1002,3225,3226],{"class":1004,"line":2572},[1002,3227,1051],{"emptyLinePlaceholder":1050},[1002,3229,3230,3232,3234,3236,3238,3240],{"class":1004,"line":2582},[1002,3231,1016],{"class":1015},[1002,3233,2724],{"class":1019},[1002,3235,1023],{"class":1015},[1002,3237,2690],{"class":1015},[1002,3239,3124],{"class":1026},[1002,3241,1428],{"class":1030},[1002,3243,3244,3246,3248,3250,3252,3255],{"class":1004,"line":2594},[1002,3245,1016],{"class":1015},[1002,3247,2745],{"class":1019},[1002,3249,1023],{"class":1015},[1002,3251,2750],{"class":1030},[1002,3253,3254],{"class":1026},"makeCar",[1002,3256,1428],{"class":1030},[1002,3258,3259,3262,3265],{"class":1004,"line":2603},[1002,3260,3261],{"class":1030},"car.",[1002,3263,3264],{"class":1026},"startEngine",[1002,3266,1428],{"class":1030},[1002,3268,3269],{"class":1004,"line":2619},[1002,3270,1051],{"emptyLinePlaceholder":1050},[1002,3272,3273,3275,3278,3280,3282,3284],{"class":1004,"line":2633},[1002,3274,1016],{"class":1015},[1002,3276,3277],{"class":1019}," vanFactory",[1002,3279,1023],{"class":1015},[1002,3281,2690],{"class":1015},[1002,3283,3179],{"class":1026},[1002,3285,1428],{"class":1030},[925,3287,3288],{},"Over time the Abstract Factory and Factory Method patterns have merged into a more general pattern called Factory. A Factory is simply an object that creates other objects.",[1655,3290,3292],{"id":3291},"builder","Builder",[925,3294,3295,3296,3300],{},"The ",[1107,3297,3298],{},[928,3299,3292],{}," is a creational design pattern that allows you to construct a complex object by specifying the type and content only. Construction details are hidden from the client entirely.",[925,3302,3303],{},[963,3304],{"alt":3292,"src":3305},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fbuilder.png",[925,3307,3308,3309,3312],{},"The biggest reason for using the Builder pattern is to simplify client code that creates complex objects. The client can still direct the steps taken by the Builder without knowing how the actual work is implemented under the hood. Builders frequently encapsulate the construction of ",[1107,3310,3311],{},"Composite objects"," (another GoF design pattern) because the code involved is often complex and repetitive.",[925,3314,3315],{},"Let's look at an example to demonstrate this pattern using a Vehicle Builder class:",[993,3317,3319],{"className":2227,"code":3318,"language":2229,"meta":998,"style":998},"const VEHICLE_TYPE = {\n CAR: 'car',\n VAN: 'van',\n};\n\nconst VEHICLE_COLOR = {\n WHITE: 'white',\n SILVER: 'silver',\n ORANGE: 'orange',\n};\n\nconst VEHICLE_TRANSMISSION = {\n MANUAL: 'manual',\n AUTO: 'auto',\n};\n\nclass Vehicle {\n spec() {\n return `Type: ${this.vehicleType}, \nColor: ${this.color}, \nDoors: ${this.doors},\nTransmission: ${this.transmission}`;\n }\n}\n\nclass VehicleBuilder {\n constructor(vehicle = new Vehicle()) {\n this.vehicle = vehicle;\n return this;\n }\n\n ofType(vehicleType) {\n this.vehicle.vehicleType = vehicleType;\n return this;\n }\n\n addColor(color) {\n this.vehicle.color = color;\n return this;\n }\n\n addDoors(doors) {\n this.vehicle.doors = doors;\n return this;\n }\n\n addTransmission(transmission) {\n this.vehicle.transmission = transmission;\n return this;\n }\n\n build() {\n return this.vehicle;\n }\n}\n\nconst vehicleBuilder = new VehicleBuilder();\n\nconst vehicle = vehicleBuilder\n .ofType(VEHICLE_TYPE.CAR)\n .addColor(VEHICLE_COLOR.SILVER)\n .addDoors(4)\n .addTransmission(VEHICLE_TRANSMISSION.AUTO)\n .build();\n\nconsole.log(vehicle.spec());\n",[941,3320,3321,3331,3339,3347,3351,3355,3365,3373,3381,3389,3393,3397,3407,3415,3423,3427,3431,3439,3446,3464,3478,3493,3510,3514,3518,3522,3531,3548,3559,3567,3571,3575,3586,3598,3606,3610,3614,3625,3637,3645,3649,3653,3664,3676,3684,3688,3692,3703,3715,3723,3727,3731,3738,3747,3751,3755,3759,3774,3778,3790,3809,3826,3840,3858,3867,3871],{"__ignoreMap":998},[1002,3322,3323,3325,3327,3329],{"class":1004,"line":1005},[1002,3324,1016],{"class":1015},[1002,3326,2238],{"class":1019},[1002,3328,1023],{"class":1015},[1002,3330,1457],{"class":1030},[1002,3332,3333,3335,3337],{"class":1004,"line":1012},[1002,3334,2247],{"class":1030},[1002,3336,2250],{"class":1034},[1002,3338,1143],{"class":1030},[1002,3340,3341,3343,3345],{"class":1004,"line":1047},[1002,3342,2257],{"class":1030},[1002,3344,2260],{"class":1034},[1002,3346,1143],{"class":1030},[1002,3348,3349],{"class":1004,"line":1054},[1002,3350,1517],{"class":1030},[1002,3352,3353],{"class":1004,"line":1060},[1002,3354,1051],{"emptyLinePlaceholder":1050},[1002,3356,3357,3359,3361,3363],{"class":1004,"line":1272},[1002,3358,1016],{"class":1015},[1002,3360,2277],{"class":1019},[1002,3362,1023],{"class":1015},[1002,3364,1457],{"class":1030},[1002,3366,3367,3369,3371],{"class":1004,"line":1348},[1002,3368,2286],{"class":1030},[1002,3370,2289],{"class":1034},[1002,3372,1143],{"class":1030},[1002,3374,3375,3377,3379],{"class":1004,"line":1354},[1002,3376,2296],{"class":1030},[1002,3378,2299],{"class":1034},[1002,3380,1143],{"class":1030},[1002,3382,3383,3385,3387],{"class":1004,"line":1360},[1002,3384,2306],{"class":1030},[1002,3386,2309],{"class":1034},[1002,3388,1143],{"class":1030},[1002,3390,3391],{"class":1004,"line":1366},[1002,3392,1517],{"class":1030},[1002,3394,3395],{"class":1004,"line":1946},[1002,3396,1051],{"emptyLinePlaceholder":1050},[1002,3398,3399,3401,3403,3405],{"class":1004,"line":1956},[1002,3400,1016],{"class":1015},[1002,3402,2326],{"class":1019},[1002,3404,1023],{"class":1015},[1002,3406,1457],{"class":1030},[1002,3408,3409,3411,3413],{"class":1004,"line":1961},[1002,3410,2335],{"class":1030},[1002,3412,2338],{"class":1034},[1002,3414,1143],{"class":1030},[1002,3416,3417,3419,3421],{"class":1004,"line":1971},[1002,3418,2345],{"class":1030},[1002,3420,2348],{"class":1034},[1002,3422,1143],{"class":1030},[1002,3424,3425],{"class":1004,"line":1980},[1002,3426,1517],{"class":1030},[1002,3428,3429],{"class":1004,"line":1985},[1002,3430,1051],{"emptyLinePlaceholder":1050},[1002,3432,3433,3435,3437],{"class":1004,"line":1995},[1002,3434,2363],{"class":1015},[1002,3436,2987],{"class":1026},[1002,3438,1457],{"class":1030},[1002,3440,3441,3444],{"class":1004,"line":2006},[1002,3442,3443],{"class":1026}," spec",[1002,3445,3025],{"class":1030},[1002,3447,3448,3450,3453,3456,3458,3461],{"class":1004,"line":2011},[1002,3449,2687],{"class":1015},[1002,3451,3452],{"class":1034}," `Type: ${",[1002,3454,3455],{"class":1019},"this",[1002,3457,948],{"class":1034},[1002,3459,3460],{"class":1030},"vehicleType",[1002,3462,3463],{"class":1034},"}, \n",[1002,3465,3466,3469,3471,3473,3476],{"class":1004,"line":2017},[1002,3467,3468],{"class":1034},"Color: ${",[1002,3470,3455],{"class":1019},[1002,3472,948],{"class":1034},[1002,3474,3475],{"class":1030},"color",[1002,3477,3463],{"class":1034},[1002,3479,3480,3483,3485,3487,3490],{"class":1004,"line":2022},[1002,3481,3482],{"class":1034},"Doors: ${",[1002,3484,3455],{"class":1019},[1002,3486,948],{"class":1034},[1002,3488,3489],{"class":1030},"doors",[1002,3491,3492],{"class":1034},"},\n",[1002,3494,3495,3498,3500,3502,3505,3508],{"class":1004,"line":2442},[1002,3496,3497],{"class":1034},"Transmission: ${",[1002,3499,3455],{"class":1019},[1002,3501,948],{"class":1034},[1002,3503,3504],{"class":1030},"transmission",[1002,3506,3507],{"class":1034},"}`",[1002,3509,1407],{"class":1030},[1002,3511,3512],{"class":1004,"line":2466},[1002,3513,1269],{"class":1030},[1002,3515,3516],{"class":1004,"line":2471},[1002,3517,1170],{"class":1030},[1002,3519,3520],{"class":1004,"line":2476},[1002,3521,1051],{"emptyLinePlaceholder":1050},[1002,3523,3524,3526,3529],{"class":1004,"line":2481},[1002,3525,2363],{"class":1015},[1002,3527,3528],{"class":1026}," VehicleBuilder",[1002,3530,1457],{"class":1030},[1002,3532,3533,3535,3537,3539,3541,3543,3545],{"class":1004,"line":2491},[1002,3534,2373],{"class":1015},[1002,3536,1031],{"class":1030},[1002,3538,2698],{"class":2378},[1002,3540,1023],{"class":1015},[1002,3542,2690],{"class":1015},[1002,3544,2987],{"class":1026},[1002,3546,3547],{"class":1030},"()) {\n",[1002,3549,3550,3552,3554,3556],{"class":1004,"line":2502},[1002,3551,2387],{"class":1019},[1002,3553,2625],{"class":1030},[1002,3555,2393],{"class":1015},[1002,3557,3558],{"class":1030}," vehicle;\n",[1002,3560,3561,3563,3565],{"class":1004,"line":2513},[1002,3562,2687],{"class":1015},[1002,3564,2693],{"class":1019},[1002,3566,1407],{"class":1030},[1002,3568,3569],{"class":1004,"line":2535},[1002,3570,1269],{"class":1030},[1002,3572,3573],{"class":1004,"line":2557},[1002,3574,1051],{"emptyLinePlaceholder":1050},[1002,3576,3577,3580,3582,3584],{"class":1004,"line":2562},[1002,3578,3579],{"class":1026}," ofType",[1002,3581,1031],{"class":1030},[1002,3583,3460],{"class":2378},[1002,3585,2382],{"class":1030},[1002,3587,3588,3590,3593,3595],{"class":1004,"line":2567},[1002,3589,2387],{"class":1019},[1002,3591,3592],{"class":1030},".vehicle.vehicleType ",[1002,3594,2393],{"class":1015},[1002,3596,3597],{"class":1030}," vehicleType;\n",[1002,3599,3600,3602,3604],{"class":1004,"line":2572},[1002,3601,2687],{"class":1015},[1002,3603,2693],{"class":1019},[1002,3605,1407],{"class":1030},[1002,3607,3608],{"class":1004,"line":2582},[1002,3609,1269],{"class":1030},[1002,3611,3612],{"class":1004,"line":2594},[1002,3613,1051],{"emptyLinePlaceholder":1050},[1002,3615,3616,3619,3621,3623],{"class":1004,"line":2603},[1002,3617,3618],{"class":1026}," addColor",[1002,3620,1031],{"class":1030},[1002,3622,3475],{"class":2378},[1002,3624,2382],{"class":1030},[1002,3626,3627,3629,3632,3634],{"class":1004,"line":2619},[1002,3628,2387],{"class":1019},[1002,3630,3631],{"class":1030},".vehicle.color ",[1002,3633,2393],{"class":1015},[1002,3635,3636],{"class":1030}," color;\n",[1002,3638,3639,3641,3643],{"class":1004,"line":2633},[1002,3640,2687],{"class":1015},[1002,3642,2693],{"class":1019},[1002,3644,1407],{"class":1030},[1002,3646,3647],{"class":1004,"line":2641},[1002,3648,1269],{"class":1030},[1002,3650,3651],{"class":1004,"line":2655},[1002,3652,1051],{"emptyLinePlaceholder":1050},[1002,3654,3655,3658,3660,3662],{"class":1004,"line":2667},[1002,3656,3657],{"class":1026}," addDoors",[1002,3659,1031],{"class":1030},[1002,3661,3489],{"class":2378},[1002,3663,2382],{"class":1030},[1002,3665,3666,3668,3671,3673],{"class":1004,"line":2674},[1002,3667,2387],{"class":1019},[1002,3669,3670],{"class":1030},".vehicle.doors ",[1002,3672,2393],{"class":1015},[1002,3674,3675],{"class":1030}," doors;\n",[1002,3677,3678,3680,3682],{"class":1004,"line":2679},[1002,3679,2687],{"class":1015},[1002,3681,2693],{"class":1019},[1002,3683,1407],{"class":1030},[1002,3685,3686],{"class":1004,"line":2684},[1002,3687,1269],{"class":1030},[1002,3689,3690],{"class":1004,"line":2704},[1002,3691,1051],{"emptyLinePlaceholder":1050},[1002,3693,3694,3697,3699,3701],{"class":1004,"line":2709},[1002,3695,3696],{"class":1026}," addTransmission",[1002,3698,1031],{"class":1030},[1002,3700,3504],{"class":2378},[1002,3702,2382],{"class":1030},[1002,3704,3705,3707,3710,3712],{"class":1004,"line":2714},[1002,3706,2387],{"class":1019},[1002,3708,3709],{"class":1030},".vehicle.transmission ",[1002,3711,2393],{"class":1015},[1002,3713,3714],{"class":1030}," transmission;\n",[1002,3716,3717,3719,3721],{"class":1004,"line":2719},[1002,3718,2687],{"class":1015},[1002,3720,2693],{"class":1019},[1002,3722,1407],{"class":1030},[1002,3724,3725],{"class":1004,"line":2735},[1002,3726,1269],{"class":1030},[1002,3728,3729],{"class":1004,"line":2740},[1002,3730,1051],{"emptyLinePlaceholder":1050},[1002,3732,3733,3736],{"class":1004,"line":2759},[1002,3734,3735],{"class":1026}," build",[1002,3737,3025],{"class":1030},[1002,3739,3740,3742,3744],{"class":1004,"line":2774},[1002,3741,2687],{"class":1015},[1002,3743,2693],{"class":1019},[1002,3745,3746],{"class":1030},".vehicle;\n",[1002,3748,3749],{"class":1004,"line":2790},[1002,3750,1269],{"class":1030},[1002,3752,3753],{"class":1004,"line":2801},[1002,3754,1170],{"class":1030},[1002,3756,3757],{"class":1004,"line":2807},[1002,3758,1051],{"emptyLinePlaceholder":1050},[1002,3760,3761,3763,3766,3768,3770,3772],{"class":1004,"line":2812},[1002,3762,1016],{"class":1015},[1002,3764,3765],{"class":1019}," vehicleBuilder",[1002,3767,1023],{"class":1015},[1002,3769,2690],{"class":1015},[1002,3771,3528],{"class":1026},[1002,3773,1428],{"class":1030},[1002,3775,3776],{"class":1004,"line":2828},[1002,3777,1051],{"emptyLinePlaceholder":1050},[1002,3779,3780,3782,3785,3787],{"class":1004,"line":2841},[1002,3781,1016],{"class":1015},[1002,3783,3784],{"class":1019}," vehicle",[1002,3786,1023],{"class":1015},[1002,3788,3789],{"class":1030}," vehicleBuilder\n",[1002,3791,3792,3795,3798,3800,3802,3804,3806],{"class":1004,"line":2854},[1002,3793,3794],{"class":1030}," .",[1002,3796,3797],{"class":1026},"ofType",[1002,3799,1031],{"class":1030},[1002,3801,2765],{"class":1019},[1002,3803,948],{"class":1030},[1002,3805,2613],{"class":1019},[1002,3807,3808],{"class":1030},")\n",[1002,3810,3811,3813,3816,3818,3820,3822,3824],{"class":1004,"line":2864},[1002,3812,3794],{"class":1030},[1002,3814,3815],{"class":1026},"addColor",[1002,3817,1031],{"class":1030},[1002,3819,2780],{"class":1019},[1002,3821,948],{"class":1030},[1002,3823,2461],{"class":1019},[1002,3825,3808],{"class":1030},[1002,3827,3828,3830,3833,3835,3838],{"class":1004,"line":2869},[1002,3829,3794],{"class":1030},[1002,3831,3832],{"class":1026},"addDoors",[1002,3834,1031],{"class":1030},[1002,3836,3837],{"class":1019},"4",[1002,3839,3808],{"class":1030},[1002,3841,3842,3844,3847,3849,3852,3854,3856],{"class":1004,"line":2874},[1002,3843,3794],{"class":1030},[1002,3845,3846],{"class":1026},"addTransmission",[1002,3848,1031],{"class":1030},[1002,3850,3851],{"class":1019},"VEHICLE_TRANSMISSION",[1002,3853,948],{"class":1030},[1002,3855,2437],{"class":1019},[1002,3857,3808],{"class":1030},[1002,3859,3860,3862,3865],{"class":1004,"line":2880},[1002,3861,3794],{"class":1030},[1002,3863,3864],{"class":1026},"build",[1002,3866,1428],{"class":1030},[1002,3868,3869],{"class":1004,"line":2903},[1002,3870,1051],{"emptyLinePlaceholder":1050},[1002,3872,3873,3875,3877,3880,3883],{"class":1004,"line":2909},[1002,3874,2883],{"class":1030},[1002,3876,2886],{"class":1026},[1002,3878,3879],{"class":1030},"(vehicle.",[1002,3881,3882],{"class":1026},"spec",[1002,3884,3885],{"class":1030},"());\n",[925,3887,3888],{},"The code above has a Vehicle (the Director) and a builder object: VehicleBuilder. The Vehicle's construct method accepts a Builder instance which it then takes through a series of assembly steps: ofType, addColor, and addTransmission. The Builder's get method returns the newly assembled product (Vehicle).",[925,3890,3891],{},"Usually it is the last step (build) that returns the newly created object which makes it easy for a Builder to participate in fluent interfaces in which multiple method calls, separated by dot operators, are chained together.",[1655,3893,3895],{"id":3894},"prototype","Prototype",[925,3897,3898,3899,3903],{},"The ",[1107,3900,3901],{},[928,3902,3895],{}," is a creational design pattern that is used when the type of objects to create is determined by a prototypical instance, which is cloned to produce new objects.",[925,3905,3906],{},[963,3907],{"alt":3895,"src":3908},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fprototype.png",[925,3910,3295,3911,3915],{},[1107,3912,3913],{},[928,3914,3895],{}," Pattern creates new objects that are initialized with values it copied from a prototype. JavaScript being a prototypal language uses this pattern for creating new objects and their prototypes.",[925,3917,3918],{},"An example of where the Prototype pattern is useful is the initialization of business objects with values that match the default values in the database. The prototype object holds the default values that are copied over into a newly created business object.",[993,3920,3922],{"className":2227,"code":3921,"language":2229,"meta":998,"style":998},"const VEHICLE_TYPE = {\n CAR: 'car',\n VAN: 'van',\n};\n\nclass Vehicle {\n constructor(vehicleType, model) {\n this.vehicleType = vehicleType;\n this.model = model;\n }\n\n spec() {\n console.log(`Type: ${this.vehicleType}, model: ${this.model}`);\n }\n\n clone() {\n return new Vehicle(this.vehicleType, this.model);\n }\n\n setVehicleType(vehicleType) {\n this.vehicleType = vehicleType;\n }\n\n setModel(model) {\n this.model = model;\n }\n}\n\nconst car = new Vehicle(VEHICLE_TYPE.CAR, 'X3');\ncar.spec();\n\nconst van = car.clone();\nvan.spec();\n\nvan.setVehicleType(VEHICLE_TYPE.VAN);\nvan.setModel('X10');\nvan.spec();\n",[941,3923,3924,3934,3942,3950,3954,3958,3966,3981,3991,4003,4007,4011,4017,4047,4051,4055,4062,4082,4086,4090,4101,4111,4115,4119,4130,4140,4144,4148,4152,4179,4187,4191,4207,4216,4220,4237,4251],{"__ignoreMap":998},[1002,3925,3926,3928,3930,3932],{"class":1004,"line":1005},[1002,3927,1016],{"class":1015},[1002,3929,2238],{"class":1019},[1002,3931,1023],{"class":1015},[1002,3933,1457],{"class":1030},[1002,3935,3936,3938,3940],{"class":1004,"line":1012},[1002,3937,2247],{"class":1030},[1002,3939,2250],{"class":1034},[1002,3941,1143],{"class":1030},[1002,3943,3944,3946,3948],{"class":1004,"line":1047},[1002,3945,2257],{"class":1030},[1002,3947,2260],{"class":1034},[1002,3949,1143],{"class":1030},[1002,3951,3952],{"class":1004,"line":1054},[1002,3953,1517],{"class":1030},[1002,3955,3956],{"class":1004,"line":1060},[1002,3957,1051],{"emptyLinePlaceholder":1050},[1002,3959,3960,3962,3964],{"class":1004,"line":1272},[1002,3961,2363],{"class":1015},[1002,3963,2987],{"class":1026},[1002,3965,1457],{"class":1030},[1002,3967,3968,3970,3972,3974,3976,3979],{"class":1004,"line":1348},[1002,3969,2373],{"class":1015},[1002,3971,1031],{"class":1030},[1002,3973,3460],{"class":2378},[1002,3975,1251],{"class":1030},[1002,3977,3978],{"class":2378},"model",[1002,3980,2382],{"class":1030},[1002,3982,3983,3985,3987,3989],{"class":1004,"line":1354},[1002,3984,2387],{"class":1019},[1002,3986,2390],{"class":1030},[1002,3988,2393],{"class":1015},[1002,3990,3597],{"class":1030},[1002,3992,3993,3995,3998,4000],{"class":1004,"line":1360},[1002,3994,2387],{"class":1019},[1002,3996,3997],{"class":1030},".model ",[1002,3999,2393],{"class":1015},[1002,4001,4002],{"class":1030}," model;\n",[1002,4004,4005],{"class":1004,"line":1366},[1002,4006,1269],{"class":1030},[1002,4008,4009],{"class":1004,"line":1946},[1002,4010,1051],{"emptyLinePlaceholder":1050},[1002,4012,4013,4015],{"class":1004,"line":1956},[1002,4014,3443],{"class":1026},[1002,4016,3025],{"class":1030},[1002,4018,4019,4021,4023,4025,4028,4030,4032,4034,4037,4039,4041,4043,4045],{"class":1004,"line":1961},[1002,4020,3030],{"class":1030},[1002,4022,2886],{"class":1026},[1002,4024,1031],{"class":1030},[1002,4026,4027],{"class":1034},"`Type: ${",[1002,4029,3455],{"class":1019},[1002,4031,948],{"class":1034},[1002,4033,3460],{"class":1030},[1002,4035,4036],{"class":1034},"}, model: ${",[1002,4038,3455],{"class":1019},[1002,4040,948],{"class":1034},[1002,4042,3978],{"class":1030},[1002,4044,3507],{"class":1034},[1002,4046,1085],{"class":1030},[1002,4048,4049],{"class":1004,"line":1971},[1002,4050,1269],{"class":1030},[1002,4052,4053],{"class":1004,"line":1980},[1002,4054,1051],{"emptyLinePlaceholder":1050},[1002,4056,4057,4060],{"class":1004,"line":1985},[1002,4058,4059],{"class":1026}," clone",[1002,4061,3025],{"class":1030},[1002,4063,4064,4066,4068,4070,4072,4074,4077,4079],{"class":1004,"line":1995},[1002,4065,2687],{"class":1015},[1002,4067,2690],{"class":1015},[1002,4069,2987],{"class":1026},[1002,4071,1031],{"class":1030},[1002,4073,3455],{"class":1019},[1002,4075,4076],{"class":1030},".vehicleType, ",[1002,4078,3455],{"class":1019},[1002,4080,4081],{"class":1030},".model);\n",[1002,4083,4084],{"class":1004,"line":2006},[1002,4085,1269],{"class":1030},[1002,4087,4088],{"class":1004,"line":2011},[1002,4089,1051],{"emptyLinePlaceholder":1050},[1002,4091,4092,4095,4097,4099],{"class":1004,"line":2017},[1002,4093,4094],{"class":1026}," setVehicleType",[1002,4096,1031],{"class":1030},[1002,4098,3460],{"class":2378},[1002,4100,2382],{"class":1030},[1002,4102,4103,4105,4107,4109],{"class":1004,"line":2022},[1002,4104,2387],{"class":1019},[1002,4106,2390],{"class":1030},[1002,4108,2393],{"class":1015},[1002,4110,3597],{"class":1030},[1002,4112,4113],{"class":1004,"line":2442},[1002,4114,1269],{"class":1030},[1002,4116,4117],{"class":1004,"line":2466},[1002,4118,1051],{"emptyLinePlaceholder":1050},[1002,4120,4121,4124,4126,4128],{"class":1004,"line":2471},[1002,4122,4123],{"class":1026}," setModel",[1002,4125,1031],{"class":1030},[1002,4127,3978],{"class":2378},[1002,4129,2382],{"class":1030},[1002,4131,4132,4134,4136,4138],{"class":1004,"line":2476},[1002,4133,2387],{"class":1019},[1002,4135,3997],{"class":1030},[1002,4137,2393],{"class":1015},[1002,4139,4002],{"class":1030},[1002,4141,4142],{"class":1004,"line":2481},[1002,4143,1269],{"class":1030},[1002,4145,4146],{"class":1004,"line":2491},[1002,4147,1170],{"class":1030},[1002,4149,4150],{"class":1004,"line":2502},[1002,4151,1051],{"emptyLinePlaceholder":1050},[1002,4153,4154,4156,4158,4160,4162,4164,4166,4168,4170,4172,4174,4177],{"class":1004,"line":2513},[1002,4155,1016],{"class":1015},[1002,4157,2745],{"class":1019},[1002,4159,1023],{"class":1015},[1002,4161,2690],{"class":1015},[1002,4163,2987],{"class":1026},[1002,4165,1031],{"class":1030},[1002,4167,2765],{"class":1019},[1002,4169,948],{"class":1030},[1002,4171,2613],{"class":1019},[1002,4173,1251],{"class":1030},[1002,4175,4176],{"class":1034},"'X3'",[1002,4178,1085],{"class":1030},[1002,4180,4181,4183,4185],{"class":1004,"line":2535},[1002,4182,3261],{"class":1030},[1002,4184,3882],{"class":1026},[1002,4186,1428],{"class":1030},[1002,4188,4189],{"class":1004,"line":2557},[1002,4190,1051],{"emptyLinePlaceholder":1050},[1002,4192,4193,4195,4197,4199,4202,4205],{"class":1004,"line":2562},[1002,4194,1016],{"class":1015},[1002,4196,2817],{"class":1019},[1002,4198,1023],{"class":1015},[1002,4200,4201],{"class":1030}," car.",[1002,4203,4204],{"class":1026},"clone",[1002,4206,1428],{"class":1030},[1002,4208,4209,4212,4214],{"class":1004,"line":2567},[1002,4210,4211],{"class":1030},"van.",[1002,4213,3882],{"class":1026},[1002,4215,1428],{"class":1030},[1002,4217,4218],{"class":1004,"line":2572},[1002,4219,1051],{"emptyLinePlaceholder":1050},[1002,4221,4222,4224,4227,4229,4231,4233,4235],{"class":1004,"line":2582},[1002,4223,4211],{"class":1030},[1002,4225,4226],{"class":1026},"setVehicleType",[1002,4228,1031],{"class":1030},[1002,4230,2765],{"class":1019},[1002,4232,948],{"class":1030},[1002,4234,2650],{"class":1019},[1002,4236,1085],{"class":1030},[1002,4238,4239,4241,4244,4246,4249],{"class":1004,"line":2594},[1002,4240,4211],{"class":1030},[1002,4242,4243],{"class":1026},"setModel",[1002,4245,1031],{"class":1030},[1002,4247,4248],{"class":1034},"'X10'",[1002,4250,1085],{"class":1030},[1002,4252,4253,4255,4257],{"class":1004,"line":2603},[1002,4254,4211],{"class":1030},[1002,4256,3882],{"class":1026},[1002,4258,1428],{"class":1030},[925,4260,4261,4262,4264],{},"The Prototype pattern delegates the cloning process to the actual objects that are being cloned. The pattern declares a common interface for all objects that support cloning. This interface lets you clone an object without coupling your code to the class of that object. Usually, such an interface contains just a single ",[941,4263,4204],{}," method.",[1655,4266,4268],{"id":4267},"singleton","Singleton",[925,4270,3898,4271,4275],{},[1107,4272,4273],{},[928,4274,4268],{}," is a creational design pattern that restricts the instantiation of a class to one “single” instance. This is useful when exactly one object is needed to coordinate actions across the system.",[925,4277,4278],{},[963,4279],{"alt":4268,"src":4280},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fsingleton.png",[925,4282,4283],{},"Singletons limit the need for global variables which is particularly important in JavaScript because it reduces the associated risk of name collisions and namespace pollution. The Module pattern is JavaScript's manifestation of the Singleton pattern.",[925,4285,4286],{},"For example, let's create a Singleton Vehicle class:",[993,4288,4290],{"className":2227,"code":4289,"language":2229,"meta":998,"style":998},"const VEHICLE_TYPE = {\n CAR: 'car',\n VAN: 'van',\n};\n\nclass Vehicle {\n constructor(vehicleType) {\n const instance = this.constructor.instance;\n if (instance) {\n return instance;\n }\n this.vahicleType = vehicleType;\n this.constructor.instance = this;\n }\n\n spec() {\n console.log(this.vahicleType);\n }\n}\n\nconst car1 = new Vehicle(VEHICLE_TYPE.CAR);\nconst car2 = new Vehicle(VEHICLE_TYPE.VAN);\n\nconsole.log(car1 === car2); \u002F\u002F true\nconsole.log(car1.spec()); \u002F\u002F car\nconsole.log(car2.spec()); \u002F\u002F car (not van!)\n",[941,4291,4292,4302,4310,4318,4322,4326,4334,4344,4364,4372,4380,4384,4395,4412,4416,4420,4426,4439,4443,4447,4451,4474,4497,4501,4517,4534],{"__ignoreMap":998},[1002,4293,4294,4296,4298,4300],{"class":1004,"line":1005},[1002,4295,1016],{"class":1015},[1002,4297,2238],{"class":1019},[1002,4299,1023],{"class":1015},[1002,4301,1457],{"class":1030},[1002,4303,4304,4306,4308],{"class":1004,"line":1012},[1002,4305,2247],{"class":1030},[1002,4307,2250],{"class":1034},[1002,4309,1143],{"class":1030},[1002,4311,4312,4314,4316],{"class":1004,"line":1047},[1002,4313,2257],{"class":1030},[1002,4315,2260],{"class":1034},[1002,4317,1143],{"class":1030},[1002,4319,4320],{"class":1004,"line":1054},[1002,4321,1517],{"class":1030},[1002,4323,4324],{"class":1004,"line":1060},[1002,4325,1051],{"emptyLinePlaceholder":1050},[1002,4327,4328,4330,4332],{"class":1004,"line":1272},[1002,4329,2363],{"class":1015},[1002,4331,2987],{"class":1026},[1002,4333,1457],{"class":1030},[1002,4335,4336,4338,4340,4342],{"class":1004,"line":1348},[1002,4337,2373],{"class":1015},[1002,4339,1031],{"class":1030},[1002,4341,3460],{"class":2378},[1002,4343,2382],{"class":1030},[1002,4345,4346,4349,4352,4354,4356,4358,4361],{"class":1004,"line":1354},[1002,4347,4348],{"class":1015}," const",[1002,4350,4351],{"class":1019}," instance",[1002,4353,1023],{"class":1015},[1002,4355,2693],{"class":1019},[1002,4357,948],{"class":1030},[1002,4359,4360],{"class":1019},"constructor",[1002,4362,4363],{"class":1030},".instance;\n",[1002,4365,4366,4369],{"class":1004,"line":1360},[1002,4367,4368],{"class":1015}," if",[1002,4370,4371],{"class":1030}," (instance) {\n",[1002,4373,4374,4377],{"class":1004,"line":1366},[1002,4375,4376],{"class":1015}," return",[1002,4378,4379],{"class":1030}," instance;\n",[1002,4381,4382],{"class":1004,"line":1946},[1002,4383,2014],{"class":1030},[1002,4385,4386,4388,4391,4393],{"class":1004,"line":1956},[1002,4387,2387],{"class":1019},[1002,4389,4390],{"class":1030},".vahicleType ",[1002,4392,2393],{"class":1015},[1002,4394,3597],{"class":1030},[1002,4396,4397,4399,4401,4403,4406,4408,4410],{"class":1004,"line":1961},[1002,4398,2387],{"class":1019},[1002,4400,948],{"class":1030},[1002,4402,4360],{"class":1019},[1002,4404,4405],{"class":1030},".instance ",[1002,4407,2393],{"class":1015},[1002,4409,2693],{"class":1019},[1002,4411,1407],{"class":1030},[1002,4413,4414],{"class":1004,"line":1971},[1002,4415,1269],{"class":1030},[1002,4417,4418],{"class":1004,"line":1980},[1002,4419,1051],{"emptyLinePlaceholder":1050},[1002,4421,4422,4424],{"class":1004,"line":1985},[1002,4423,3443],{"class":1026},[1002,4425,3025],{"class":1030},[1002,4427,4428,4430,4432,4434,4436],{"class":1004,"line":1995},[1002,4429,3030],{"class":1030},[1002,4431,2886],{"class":1026},[1002,4433,1031],{"class":1030},[1002,4435,3455],{"class":1019},[1002,4437,4438],{"class":1030},".vahicleType);\n",[1002,4440,4441],{"class":1004,"line":2006},[1002,4442,1269],{"class":1030},[1002,4444,4445],{"class":1004,"line":2011},[1002,4446,1170],{"class":1030},[1002,4448,4449],{"class":1004,"line":2017},[1002,4450,1051],{"emptyLinePlaceholder":1050},[1002,4452,4453,4455,4458,4460,4462,4464,4466,4468,4470,4472],{"class":1004,"line":2022},[1002,4454,1016],{"class":1015},[1002,4456,4457],{"class":1019}," car1",[1002,4459,1023],{"class":1015},[1002,4461,2690],{"class":1015},[1002,4463,2987],{"class":1026},[1002,4465,1031],{"class":1030},[1002,4467,2765],{"class":1019},[1002,4469,948],{"class":1030},[1002,4471,2613],{"class":1019},[1002,4473,1085],{"class":1030},[1002,4475,4476,4478,4481,4483,4485,4487,4489,4491,4493,4495],{"class":1004,"line":2442},[1002,4477,1016],{"class":1015},[1002,4479,4480],{"class":1019}," car2",[1002,4482,1023],{"class":1015},[1002,4484,2690],{"class":1015},[1002,4486,2987],{"class":1026},[1002,4488,1031],{"class":1030},[1002,4490,2765],{"class":1019},[1002,4492,948],{"class":1030},[1002,4494,2650],{"class":1019},[1002,4496,1085],{"class":1030},[1002,4498,4499],{"class":1004,"line":2466},[1002,4500,1051],{"emptyLinePlaceholder":1050},[1002,4502,4503,4505,4507,4510,4512,4515],{"class":1004,"line":2471},[1002,4504,2883],{"class":1030},[1002,4506,2886],{"class":1026},[1002,4508,4509],{"class":1030},"(car1 ",[1002,4511,2892],{"class":1015},[1002,4513,4514],{"class":1030}," car2); ",[1002,4516,2877],{"class":1008},[1002,4518,4519,4521,4523,4526,4528,4531],{"class":1004,"line":2476},[1002,4520,2883],{"class":1030},[1002,4522,2886],{"class":1026},[1002,4524,4525],{"class":1030},"(car1.",[1002,4527,3882],{"class":1026},[1002,4529,4530],{"class":1030},"()); ",[1002,4532,4533],{"class":1008},"\u002F\u002F car\n",[1002,4535,4536,4538,4540,4543,4545,4547],{"class":1004,"line":2481},[1002,4537,2883],{"class":1030},[1002,4539,2886],{"class":1026},[1002,4541,4542],{"class":1030},"(car2.",[1002,4544,3882],{"class":1026},[1002,4546,4530],{"class":1030},[1002,4548,4549],{"class":1008},"\u002F\u002F car (not van!)\n",[925,4551,4552],{},"Singleton is a manifestation of a common JavaScript pattern called the Module pattern. The module is the basis of all popular JavaScript libraries and frameworks (React, Vue, Angular, etc.)",[953,4554,2197],{"id":4555},"creational-design-patterns-1",[925,4557,4558],{},"Behavioral Design Patterns focus on improving the communication between disperate objects in the system.",[953,4560,4562],{"id":4561},"chain-of-responsibility","Chain of Responsibility",[925,4564,3898,4565,4569],{},[1107,4566,4567],{},[928,4568,4562],{}," is a behavioral design pattern consisting of a source of command objects and a series of processing objects.",[925,4571,4572],{},"It provides a chain of loosely coupled objects one of which can satisfy a request. This pattern is essentially a linear search for an object that can handle a particular request.",[925,4574,4575],{},[963,4576],{"alt":4562,"src":4577},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fchain-of-responsibility.png",[925,4579,4580],{},"The example below demonstrates a solution for dispensing money from an ATM machine. It breaks down the combination of bank notes ($100, $50, $20, $10, $5) that satisfies the request.",[993,4582,4584],{"className":2227,"code":4583,"language":2229,"meta":998,"style":998},"class ATM {\n constructor(amount) {\n this.amount = amount;\n console.log(`Request: $${amount}\\n`);\n }\n\n request(bill) {\n const count = Math.floor(this.amount \u002F bill);\n this.amount -= count * bill;\n console.log(`Dispense: ${count} $${bill} bills`);\n\n return this;\n }\n}\n\nconst atm = new ATM(425);\n\natm.request(100).request(50).request(20).request(10).request(5);\n",[941,4585,4586,4595,4606,4618,4642,4646,4650,4662,4689,4707,4731,4735,4743,4747,4751,4755,4775,4779],{"__ignoreMap":998},[1002,4587,4588,4590,4593],{"class":1004,"line":1005},[1002,4589,2363],{"class":1015},[1002,4591,4592],{"class":1026}," ATM",[1002,4594,1457],{"class":1030},[1002,4596,4597,4599,4601,4604],{"class":1004,"line":1012},[1002,4598,2373],{"class":1015},[1002,4600,1031],{"class":1030},[1002,4602,4603],{"class":2378},"amount",[1002,4605,2382],{"class":1030},[1002,4607,4608,4610,4613,4615],{"class":1004,"line":1047},[1002,4609,2387],{"class":1019},[1002,4611,4612],{"class":1030},".amount ",[1002,4614,2393],{"class":1015},[1002,4616,4617],{"class":1030}," amount;\n",[1002,4619,4620,4622,4624,4626,4629,4631,4634,4637,4640],{"class":1004,"line":1054},[1002,4621,3030],{"class":1030},[1002,4623,2886],{"class":1026},[1002,4625,1031],{"class":1030},[1002,4627,4628],{"class":1034},"`Request: $${",[1002,4630,4603],{"class":1030},[1002,4632,4633],{"class":1034},"}",[1002,4635,4636],{"class":1019},"\\n",[1002,4638,4639],{"class":1034},"`",[1002,4641,1085],{"class":1030},[1002,4643,4644],{"class":1004,"line":1060},[1002,4645,1269],{"class":1030},[1002,4647,4648],{"class":1004,"line":1272},[1002,4649,1051],{"emptyLinePlaceholder":1050},[1002,4651,4652,4655,4657,4660],{"class":1004,"line":1348},[1002,4653,4654],{"class":1026}," request",[1002,4656,1031],{"class":1030},[1002,4658,4659],{"class":2378},"bill",[1002,4661,2382],{"class":1030},[1002,4663,4664,4666,4669,4671,4674,4677,4679,4681,4683,4686],{"class":1004,"line":1354},[1002,4665,4348],{"class":1015},[1002,4667,4668],{"class":1019}," count",[1002,4670,1023],{"class":1015},[1002,4672,4673],{"class":1030}," Math.",[1002,4675,4676],{"class":1026},"floor",[1002,4678,1031],{"class":1030},[1002,4680,3455],{"class":1019},[1002,4682,4612],{"class":1030},[1002,4684,4685],{"class":1015},"\u002F",[1002,4687,4688],{"class":1030}," bill);\n",[1002,4690,4691,4693,4695,4698,4701,4704],{"class":1004,"line":1360},[1002,4692,2387],{"class":1019},[1002,4694,4612],{"class":1030},[1002,4696,4697],{"class":1015},"-=",[1002,4699,4700],{"class":1030}," count ",[1002,4702,4703],{"class":1015},"*",[1002,4705,4706],{"class":1030}," bill;\n",[1002,4708,4709,4711,4713,4715,4718,4721,4724,4726,4729],{"class":1004,"line":1366},[1002,4710,3030],{"class":1030},[1002,4712,2886],{"class":1026},[1002,4714,1031],{"class":1030},[1002,4716,4717],{"class":1034},"`Dispense: ${",[1002,4719,4720],{"class":1030},"count",[1002,4722,4723],{"class":1034},"} $${",[1002,4725,4659],{"class":1030},[1002,4727,4728],{"class":1034},"} bills`",[1002,4730,1085],{"class":1030},[1002,4732,4733],{"class":1004,"line":1946},[1002,4734,1051],{"emptyLinePlaceholder":1050},[1002,4736,4737,4739,4741],{"class":1004,"line":1956},[1002,4738,2687],{"class":1015},[1002,4740,2693],{"class":1019},[1002,4742,1407],{"class":1030},[1002,4744,4745],{"class":1004,"line":1961},[1002,4746,1269],{"class":1030},[1002,4748,4749],{"class":1004,"line":1971},[1002,4750,1170],{"class":1030},[1002,4752,4753],{"class":1004,"line":1980},[1002,4754,1051],{"emptyLinePlaceholder":1050},[1002,4756,4757,4759,4762,4764,4766,4768,4770,4773],{"class":1004,"line":1985},[1002,4758,1016],{"class":1015},[1002,4760,4761],{"class":1019}," atm",[1002,4763,1023],{"class":1015},[1002,4765,2690],{"class":1015},[1002,4767,4592],{"class":1026},[1002,4769,1031],{"class":1030},[1002,4771,4772],{"class":1019},"425",[1002,4774,1085],{"class":1030},[1002,4776,4777],{"class":1004,"line":1995},[1002,4778,1051],{"emptyLinePlaceholder":1050},[1002,4780,4781,4784,4787,4789,4792,4794,4796,4798,4801,4803,4805,4807,4810,4812,4814,4816,4819,4821,4823,4825,4827],{"class":1004,"line":2006},[1002,4782,4783],{"class":1030},"atm.",[1002,4785,4786],{"class":1026},"request",[1002,4788,1031],{"class":1030},[1002,4790,4791],{"class":1019},"100",[1002,4793,1539],{"class":1030},[1002,4795,4786],{"class":1026},[1002,4797,1031],{"class":1030},[1002,4799,4800],{"class":1019},"50",[1002,4802,1539],{"class":1030},[1002,4804,4786],{"class":1026},[1002,4806,1031],{"class":1030},[1002,4808,4809],{"class":1019},"20",[1002,4811,1539],{"class":1030},[1002,4813,4786],{"class":1026},[1002,4815,1031],{"class":1030},[1002,4817,4818],{"class":1019},"10",[1002,4820,1539],{"class":1030},[1002,4822,4786],{"class":1026},[1002,4824,1031],{"class":1030},[1002,4826,2859],{"class":1019},[1002,4828,1085],{"class":1030},[925,4830,4831],{},"An example of the chain of responsibility pattern is event-bubbling in which an event propagates through a series of nested controls one of which may choose to handle the event.",[953,4833,4835],{"id":4834},"command","Command",[925,4837,3898,4838,4842],{},[1107,4839,4840],{},[928,4841,4835],{}," pattern is a behavioral design pattern in which an object is used to encapsulate all information needed to perform an action or trigger an event at a later time.",[925,4844,4845],{},"This information includes:",[971,4847,4848,4851,4854],{},[974,4849,4850],{},"The method name",[974,4852,4853],{},"The object that owns the method and",[974,4855,4856],{},"Values for the method parameters.",[925,4858,4859],{},[963,4860],{"alt":4835,"src":4861},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fcommand.png",[925,4863,3295,4864,4868,4869,4872,4873,948],{},[1107,4865,4866],{},[928,4867,4835],{}," pattern encapsulates actions as objects. Command objects allow for loosely coupled systems by separating the objects that issue a request from the objects that actually process the request. These requests are called ",[1107,4870,4871],{},"events"," and the code that processes the requests are called ",[1107,4874,4875],{},"event handlers",[925,4877,4878],{},"In our example we have a calculator with 6 operations: add, subtract, multiply, divide, undo and execute. Each operation is encapsulated by a Command object.",[993,4880,4882],{"className":2227,"code":4881,"language":2229,"meta":998,"style":998},"class Calculator {\n constructor() {\n this.value = 0;\n this.history = [];\n }\n\n executeCommand(command) {\n this.value = command.execute(this.value);\n this.history.push(command);\n }\n\n undo() {\n const command = this.history.pop();\n this.value = command.undo(this.value);\n }\n\n add(value) {\n this.value = this.value + value;\n }\n\n subtract(value) {\n this.value = this.value - value;\n }\n\n multiply(value) {\n this.value = this.value * value;\n }\n\n divide(value) {\n this.value = this.value \u002F value;\n }\n}\n\nclass AddCommand {\n constructor(value) {\n this.valueToAdd = value;\n }\n\n execute(currentValue) {\n return currentValue + this.valueToAdd;\n }\n\n undo(currentValue) {\n return currentValue - this.valueToAdd;\n }\n}\n\nclass SubtractCommand {\n constructor(value) {\n this.valueToSubtract = value;\n }\n\n execute(currentValue) {\n return currentValue - this.valueToSubtract;\n }\n\n undo(currentValue) {\n return currentValue + this.valueToSubtract;\n }\n}\n\nclass MultiplyCommand {\n constructor(value) {\n this.valueToMultiply = value;\n }\n\n execute(currentValue) {\n return currentValue * this.valueToMultiply;\n }\n\n undo(currentValue) {\n return currentValue \u002F this.valueToMultiply;\n }\n}\n\nclass DivideCommand {\n constructor(value) {\n this.valueToDivide = value;\n }\n\n execute(currentValue) {\n return currentValue \u002F this.valueToDivide;\n }\n\n undo(currentValue) {\n return currentValue * this.valueToDivide;\n }\n}\n\nconst calculator = new Calculator();\n\ncalculator.executeCommand(new AddCommand(10));\ncalculator.executeCommand(new MultiplyCommand(2));\ncalculator.executeCommand(new SubtractCommand(10));\ncalculator.executeCommand(new DivideCommand(2));\nconsole.log(calculator.value); \u002F\u002F 5\ncalculator.undo();\nconsole.log(calculator.value); \u002F\u002F 10\n",[941,4883,4884,4893,4899,4913,4925,4929,4933,4944,4965,4978,4982,4986,4993,5011,5030,5034,5038,5050,5068,5072,5076,5087,5104,5108,5112,5123,5139,5143,5147,5158,5174,5178,5182,5186,5195,5205,5216,5220,5224,5236,5250,5254,5258,5268,5280,5284,5288,5292,5301,5311,5322,5326,5330,5340,5353,5357,5361,5371,5383,5387,5391,5395,5404,5414,5425,5429,5433,5443,5456,5460,5464,5475,5488,5493,5498,5503,5513,5524,5536,5541,5546,5557,5571,5576,5581,5592,5605,5610,5615,5620,5636,5641,5664,5684,5703,5722,5735,5744],{"__ignoreMap":998},[1002,4885,4886,4888,4891],{"class":1004,"line":1005},[1002,4887,2363],{"class":1015},[1002,4889,4890],{"class":1026}," Calculator",[1002,4892,1457],{"class":1030},[1002,4894,4895,4897],{"class":1004,"line":1012},[1002,4896,2373],{"class":1015},[1002,4898,3025],{"class":1030},[1002,4900,4901,4903,4906,4908,4911],{"class":1004,"line":1047},[1002,4902,2387],{"class":1019},[1002,4904,4905],{"class":1030},".value ",[1002,4907,2393],{"class":1015},[1002,4909,4910],{"class":1019}," 0",[1002,4912,1407],{"class":1030},[1002,4914,4915,4917,4920,4922],{"class":1004,"line":1054},[1002,4916,2387],{"class":1019},[1002,4918,4919],{"class":1030},".history ",[1002,4921,2393],{"class":1015},[1002,4923,4924],{"class":1030}," [];\n",[1002,4926,4927],{"class":1004,"line":1060},[1002,4928,1269],{"class":1030},[1002,4930,4931],{"class":1004,"line":1272},[1002,4932,1051],{"emptyLinePlaceholder":1050},[1002,4934,4935,4938,4940,4942],{"class":1004,"line":1348},[1002,4936,4937],{"class":1026}," executeCommand",[1002,4939,1031],{"class":1030},[1002,4941,4834],{"class":2378},[1002,4943,2382],{"class":1030},[1002,4945,4946,4948,4950,4952,4955,4958,4960,4962],{"class":1004,"line":1354},[1002,4947,2387],{"class":1019},[1002,4949,4905],{"class":1030},[1002,4951,2393],{"class":1015},[1002,4953,4954],{"class":1030}," command.",[1002,4956,4957],{"class":1026},"execute",[1002,4959,1031],{"class":1030},[1002,4961,3455],{"class":1019},[1002,4963,4964],{"class":1030},".value);\n",[1002,4966,4967,4969,4972,4975],{"class":1004,"line":1360},[1002,4968,2387],{"class":1019},[1002,4970,4971],{"class":1030},".history.",[1002,4973,4974],{"class":1026},"push",[1002,4976,4977],{"class":1030},"(command);\n",[1002,4979,4980],{"class":1004,"line":1366},[1002,4981,1269],{"class":1030},[1002,4983,4984],{"class":1004,"line":1946},[1002,4985,1051],{"emptyLinePlaceholder":1050},[1002,4987,4988,4991],{"class":1004,"line":1956},[1002,4989,4990],{"class":1026}," undo",[1002,4992,3025],{"class":1030},[1002,4994,4995,4997,5000,5002,5004,5006,5009],{"class":1004,"line":1961},[1002,4996,4348],{"class":1015},[1002,4998,4999],{"class":1019}," command",[1002,5001,1023],{"class":1015},[1002,5003,2693],{"class":1019},[1002,5005,4971],{"class":1030},[1002,5007,5008],{"class":1026},"pop",[1002,5010,1428],{"class":1030},[1002,5012,5013,5015,5017,5019,5021,5024,5026,5028],{"class":1004,"line":1971},[1002,5014,2387],{"class":1019},[1002,5016,4905],{"class":1030},[1002,5018,2393],{"class":1015},[1002,5020,4954],{"class":1030},[1002,5022,5023],{"class":1026},"undo",[1002,5025,1031],{"class":1030},[1002,5027,3455],{"class":1019},[1002,5029,4964],{"class":1030},[1002,5031,5032],{"class":1004,"line":1980},[1002,5033,1269],{"class":1030},[1002,5035,5036],{"class":1004,"line":1985},[1002,5037,1051],{"emptyLinePlaceholder":1050},[1002,5039,5040,5043,5045,5048],{"class":1004,"line":1995},[1002,5041,5042],{"class":1026}," add",[1002,5044,1031],{"class":1030},[1002,5046,5047],{"class":2378},"value",[1002,5049,2382],{"class":1030},[1002,5051,5052,5054,5056,5058,5060,5062,5065],{"class":1004,"line":2006},[1002,5053,2387],{"class":1019},[1002,5055,4905],{"class":1030},[1002,5057,2393],{"class":1015},[1002,5059,2693],{"class":1019},[1002,5061,4905],{"class":1030},[1002,5063,5064],{"class":1015},"+",[1002,5066,5067],{"class":1030}," value;\n",[1002,5069,5070],{"class":1004,"line":2011},[1002,5071,1269],{"class":1030},[1002,5073,5074],{"class":1004,"line":2017},[1002,5075,1051],{"emptyLinePlaceholder":1050},[1002,5077,5078,5081,5083,5085],{"class":1004,"line":2022},[1002,5079,5080],{"class":1026}," subtract",[1002,5082,1031],{"class":1030},[1002,5084,5047],{"class":2378},[1002,5086,2382],{"class":1030},[1002,5088,5089,5091,5093,5095,5097,5099,5102],{"class":1004,"line":2442},[1002,5090,2387],{"class":1019},[1002,5092,4905],{"class":1030},[1002,5094,2393],{"class":1015},[1002,5096,2693],{"class":1019},[1002,5098,4905],{"class":1030},[1002,5100,5101],{"class":1015},"-",[1002,5103,5067],{"class":1030},[1002,5105,5106],{"class":1004,"line":2466},[1002,5107,1269],{"class":1030},[1002,5109,5110],{"class":1004,"line":2471},[1002,5111,1051],{"emptyLinePlaceholder":1050},[1002,5113,5114,5117,5119,5121],{"class":1004,"line":2476},[1002,5115,5116],{"class":1026}," multiply",[1002,5118,1031],{"class":1030},[1002,5120,5047],{"class":2378},[1002,5122,2382],{"class":1030},[1002,5124,5125,5127,5129,5131,5133,5135,5137],{"class":1004,"line":2481},[1002,5126,2387],{"class":1019},[1002,5128,4905],{"class":1030},[1002,5130,2393],{"class":1015},[1002,5132,2693],{"class":1019},[1002,5134,4905],{"class":1030},[1002,5136,4703],{"class":1015},[1002,5138,5067],{"class":1030},[1002,5140,5141],{"class":1004,"line":2491},[1002,5142,1269],{"class":1030},[1002,5144,5145],{"class":1004,"line":2502},[1002,5146,1051],{"emptyLinePlaceholder":1050},[1002,5148,5149,5152,5154,5156],{"class":1004,"line":2513},[1002,5150,5151],{"class":1026}," divide",[1002,5153,1031],{"class":1030},[1002,5155,5047],{"class":2378},[1002,5157,2382],{"class":1030},[1002,5159,5160,5162,5164,5166,5168,5170,5172],{"class":1004,"line":2535},[1002,5161,2387],{"class":1019},[1002,5163,4905],{"class":1030},[1002,5165,2393],{"class":1015},[1002,5167,2693],{"class":1019},[1002,5169,4905],{"class":1030},[1002,5171,4685],{"class":1015},[1002,5173,5067],{"class":1030},[1002,5175,5176],{"class":1004,"line":2557},[1002,5177,1269],{"class":1030},[1002,5179,5180],{"class":1004,"line":2562},[1002,5181,1170],{"class":1030},[1002,5183,5184],{"class":1004,"line":2567},[1002,5185,1051],{"emptyLinePlaceholder":1050},[1002,5187,5188,5190,5193],{"class":1004,"line":2572},[1002,5189,2363],{"class":1015},[1002,5191,5192],{"class":1026}," AddCommand",[1002,5194,1457],{"class":1030},[1002,5196,5197,5199,5201,5203],{"class":1004,"line":2582},[1002,5198,2373],{"class":1015},[1002,5200,1031],{"class":1030},[1002,5202,5047],{"class":2378},[1002,5204,2382],{"class":1030},[1002,5206,5207,5209,5212,5214],{"class":1004,"line":2594},[1002,5208,2387],{"class":1019},[1002,5210,5211],{"class":1030},".valueToAdd ",[1002,5213,2393],{"class":1015},[1002,5215,5067],{"class":1030},[1002,5217,5218],{"class":1004,"line":2603},[1002,5219,1269],{"class":1030},[1002,5221,5222],{"class":1004,"line":2619},[1002,5223,1051],{"emptyLinePlaceholder":1050},[1002,5225,5226,5229,5231,5234],{"class":1004,"line":2633},[1002,5227,5228],{"class":1026}," execute",[1002,5230,1031],{"class":1030},[1002,5232,5233],{"class":2378},"currentValue",[1002,5235,2382],{"class":1030},[1002,5237,5238,5240,5243,5245,5247],{"class":1004,"line":2641},[1002,5239,2687],{"class":1015},[1002,5241,5242],{"class":1030}," currentValue ",[1002,5244,5064],{"class":1015},[1002,5246,2693],{"class":1019},[1002,5248,5249],{"class":1030},".valueToAdd;\n",[1002,5251,5252],{"class":1004,"line":2655},[1002,5253,1269],{"class":1030},[1002,5255,5256],{"class":1004,"line":2667},[1002,5257,1051],{"emptyLinePlaceholder":1050},[1002,5259,5260,5262,5264,5266],{"class":1004,"line":2674},[1002,5261,4990],{"class":1026},[1002,5263,1031],{"class":1030},[1002,5265,5233],{"class":2378},[1002,5267,2382],{"class":1030},[1002,5269,5270,5272,5274,5276,5278],{"class":1004,"line":2679},[1002,5271,2687],{"class":1015},[1002,5273,5242],{"class":1030},[1002,5275,5101],{"class":1015},[1002,5277,2693],{"class":1019},[1002,5279,5249],{"class":1030},[1002,5281,5282],{"class":1004,"line":2684},[1002,5283,1269],{"class":1030},[1002,5285,5286],{"class":1004,"line":2704},[1002,5287,1170],{"class":1030},[1002,5289,5290],{"class":1004,"line":2709},[1002,5291,1051],{"emptyLinePlaceholder":1050},[1002,5293,5294,5296,5299],{"class":1004,"line":2714},[1002,5295,2363],{"class":1015},[1002,5297,5298],{"class":1026}," SubtractCommand",[1002,5300,1457],{"class":1030},[1002,5302,5303,5305,5307,5309],{"class":1004,"line":2719},[1002,5304,2373],{"class":1015},[1002,5306,1031],{"class":1030},[1002,5308,5047],{"class":2378},[1002,5310,2382],{"class":1030},[1002,5312,5313,5315,5318,5320],{"class":1004,"line":2735},[1002,5314,2387],{"class":1019},[1002,5316,5317],{"class":1030},".valueToSubtract ",[1002,5319,2393],{"class":1015},[1002,5321,5067],{"class":1030},[1002,5323,5324],{"class":1004,"line":2740},[1002,5325,1269],{"class":1030},[1002,5327,5328],{"class":1004,"line":2759},[1002,5329,1051],{"emptyLinePlaceholder":1050},[1002,5331,5332,5334,5336,5338],{"class":1004,"line":2774},[1002,5333,5228],{"class":1026},[1002,5335,1031],{"class":1030},[1002,5337,5233],{"class":2378},[1002,5339,2382],{"class":1030},[1002,5341,5342,5344,5346,5348,5350],{"class":1004,"line":2790},[1002,5343,2687],{"class":1015},[1002,5345,5242],{"class":1030},[1002,5347,5101],{"class":1015},[1002,5349,2693],{"class":1019},[1002,5351,5352],{"class":1030},".valueToSubtract;\n",[1002,5354,5355],{"class":1004,"line":2801},[1002,5356,1269],{"class":1030},[1002,5358,5359],{"class":1004,"line":2807},[1002,5360,1051],{"emptyLinePlaceholder":1050},[1002,5362,5363,5365,5367,5369],{"class":1004,"line":2812},[1002,5364,4990],{"class":1026},[1002,5366,1031],{"class":1030},[1002,5368,5233],{"class":2378},[1002,5370,2382],{"class":1030},[1002,5372,5373,5375,5377,5379,5381],{"class":1004,"line":2828},[1002,5374,2687],{"class":1015},[1002,5376,5242],{"class":1030},[1002,5378,5064],{"class":1015},[1002,5380,2693],{"class":1019},[1002,5382,5352],{"class":1030},[1002,5384,5385],{"class":1004,"line":2841},[1002,5386,1269],{"class":1030},[1002,5388,5389],{"class":1004,"line":2854},[1002,5390,1170],{"class":1030},[1002,5392,5393],{"class":1004,"line":2864},[1002,5394,1051],{"emptyLinePlaceholder":1050},[1002,5396,5397,5399,5402],{"class":1004,"line":2869},[1002,5398,2363],{"class":1015},[1002,5400,5401],{"class":1026}," MultiplyCommand",[1002,5403,1457],{"class":1030},[1002,5405,5406,5408,5410,5412],{"class":1004,"line":2874},[1002,5407,2373],{"class":1015},[1002,5409,1031],{"class":1030},[1002,5411,5047],{"class":2378},[1002,5413,2382],{"class":1030},[1002,5415,5416,5418,5421,5423],{"class":1004,"line":2880},[1002,5417,2387],{"class":1019},[1002,5419,5420],{"class":1030},".valueToMultiply ",[1002,5422,2393],{"class":1015},[1002,5424,5067],{"class":1030},[1002,5426,5427],{"class":1004,"line":2903},[1002,5428,1269],{"class":1030},[1002,5430,5431],{"class":1004,"line":2909},[1002,5432,1051],{"emptyLinePlaceholder":1050},[1002,5434,5435,5437,5439,5441],{"class":1004,"line":2919},[1002,5436,5228],{"class":1026},[1002,5438,1031],{"class":1030},[1002,5440,5233],{"class":2378},[1002,5442,2382],{"class":1030},[1002,5444,5445,5447,5449,5451,5453],{"class":1004,"line":2924},[1002,5446,2687],{"class":1015},[1002,5448,5242],{"class":1030},[1002,5450,4703],{"class":1015},[1002,5452,2693],{"class":1019},[1002,5454,5455],{"class":1030},".valueToMultiply;\n",[1002,5457,5458],{"class":1004,"line":2944},[1002,5459,1269],{"class":1030},[1002,5461,5462],{"class":1004,"line":2950},[1002,5463,1051],{"emptyLinePlaceholder":1050},[1002,5465,5467,5469,5471,5473],{"class":1004,"line":5466},71,[1002,5468,4990],{"class":1026},[1002,5470,1031],{"class":1030},[1002,5472,5233],{"class":2378},[1002,5474,2382],{"class":1030},[1002,5476,5478,5480,5482,5484,5486],{"class":1004,"line":5477},72,[1002,5479,2687],{"class":1015},[1002,5481,5242],{"class":1030},[1002,5483,4685],{"class":1015},[1002,5485,2693],{"class":1019},[1002,5487,5455],{"class":1030},[1002,5489,5491],{"class":1004,"line":5490},73,[1002,5492,1269],{"class":1030},[1002,5494,5496],{"class":1004,"line":5495},74,[1002,5497,1170],{"class":1030},[1002,5499,5501],{"class":1004,"line":5500},75,[1002,5502,1051],{"emptyLinePlaceholder":1050},[1002,5504,5506,5508,5511],{"class":1004,"line":5505},76,[1002,5507,2363],{"class":1015},[1002,5509,5510],{"class":1026}," DivideCommand",[1002,5512,1457],{"class":1030},[1002,5514,5516,5518,5520,5522],{"class":1004,"line":5515},77,[1002,5517,2373],{"class":1015},[1002,5519,1031],{"class":1030},[1002,5521,5047],{"class":2378},[1002,5523,2382],{"class":1030},[1002,5525,5527,5529,5532,5534],{"class":1004,"line":5526},78,[1002,5528,2387],{"class":1019},[1002,5530,5531],{"class":1030},".valueToDivide ",[1002,5533,2393],{"class":1015},[1002,5535,5067],{"class":1030},[1002,5537,5539],{"class":1004,"line":5538},79,[1002,5540,1269],{"class":1030},[1002,5542,5544],{"class":1004,"line":5543},80,[1002,5545,1051],{"emptyLinePlaceholder":1050},[1002,5547,5549,5551,5553,5555],{"class":1004,"line":5548},81,[1002,5550,5228],{"class":1026},[1002,5552,1031],{"class":1030},[1002,5554,5233],{"class":2378},[1002,5556,2382],{"class":1030},[1002,5558,5560,5562,5564,5566,5568],{"class":1004,"line":5559},82,[1002,5561,2687],{"class":1015},[1002,5563,5242],{"class":1030},[1002,5565,4685],{"class":1015},[1002,5567,2693],{"class":1019},[1002,5569,5570],{"class":1030},".valueToDivide;\n",[1002,5572,5574],{"class":1004,"line":5573},83,[1002,5575,1269],{"class":1030},[1002,5577,5579],{"class":1004,"line":5578},84,[1002,5580,1051],{"emptyLinePlaceholder":1050},[1002,5582,5584,5586,5588,5590],{"class":1004,"line":5583},85,[1002,5585,4990],{"class":1026},[1002,5587,1031],{"class":1030},[1002,5589,5233],{"class":2378},[1002,5591,2382],{"class":1030},[1002,5593,5595,5597,5599,5601,5603],{"class":1004,"line":5594},86,[1002,5596,2687],{"class":1015},[1002,5598,5242],{"class":1030},[1002,5600,4703],{"class":1015},[1002,5602,2693],{"class":1019},[1002,5604,5570],{"class":1030},[1002,5606,5608],{"class":1004,"line":5607},87,[1002,5609,1269],{"class":1030},[1002,5611,5613],{"class":1004,"line":5612},88,[1002,5614,1170],{"class":1030},[1002,5616,5618],{"class":1004,"line":5617},89,[1002,5619,1051],{"emptyLinePlaceholder":1050},[1002,5621,5623,5625,5628,5630,5632,5634],{"class":1004,"line":5622},90,[1002,5624,1016],{"class":1015},[1002,5626,5627],{"class":1019}," calculator",[1002,5629,1023],{"class":1015},[1002,5631,2690],{"class":1015},[1002,5633,4890],{"class":1026},[1002,5635,1428],{"class":1030},[1002,5637,5639],{"class":1004,"line":5638},91,[1002,5640,1051],{"emptyLinePlaceholder":1050},[1002,5642,5644,5647,5650,5652,5655,5657,5659,5661],{"class":1004,"line":5643},92,[1002,5645,5646],{"class":1030},"calculator.",[1002,5648,5649],{"class":1026},"executeCommand",[1002,5651,1031],{"class":1030},[1002,5653,5654],{"class":1015},"new",[1002,5656,5192],{"class":1026},[1002,5658,1031],{"class":1030},[1002,5660,4818],{"class":1019},[1002,5662,5663],{"class":1030},"));\n",[1002,5665,5667,5669,5671,5673,5675,5677,5679,5682],{"class":1004,"line":5666},93,[1002,5668,5646],{"class":1030},[1002,5670,5649],{"class":1026},[1002,5672,1031],{"class":1030},[1002,5674,5654],{"class":1015},[1002,5676,5401],{"class":1026},[1002,5678,1031],{"class":1030},[1002,5680,5681],{"class":1019},"2",[1002,5683,5663],{"class":1030},[1002,5685,5687,5689,5691,5693,5695,5697,5699,5701],{"class":1004,"line":5686},94,[1002,5688,5646],{"class":1030},[1002,5690,5649],{"class":1026},[1002,5692,1031],{"class":1030},[1002,5694,5654],{"class":1015},[1002,5696,5298],{"class":1026},[1002,5698,1031],{"class":1030},[1002,5700,4818],{"class":1019},[1002,5702,5663],{"class":1030},[1002,5704,5706,5708,5710,5712,5714,5716,5718,5720],{"class":1004,"line":5705},95,[1002,5707,5646],{"class":1030},[1002,5709,5649],{"class":1026},[1002,5711,1031],{"class":1030},[1002,5713,5654],{"class":1015},[1002,5715,5510],{"class":1026},[1002,5717,1031],{"class":1030},[1002,5719,5681],{"class":1019},[1002,5721,5663],{"class":1030},[1002,5723,5725,5727,5729,5732],{"class":1004,"line":5724},96,[1002,5726,2883],{"class":1030},[1002,5728,2886],{"class":1026},[1002,5730,5731],{"class":1030},"(calculator.value); ",[1002,5733,5734],{"class":1008},"\u002F\u002F 5\n",[1002,5736,5738,5740,5742],{"class":1004,"line":5737},97,[1002,5739,5646],{"class":1030},[1002,5741,5023],{"class":1026},[1002,5743,1428],{"class":1030},[1002,5745,5747,5749,5751,5753],{"class":1004,"line":5746},98,[1002,5748,2883],{"class":1030},[1002,5750,2886],{"class":1026},[1002,5752,5731],{"class":1030},[1002,5754,5755],{"class":1008},"\u002F\u002F 10\n",[925,5757,5758],{},"JavaScript's function objects and callbacks are native command objects. They can be passed around like objects.",[953,5760,5762],{"id":5761},"interpreter","Interpreter",[925,5764,3295,5765,5769],{},[1107,5766,5767],{},[928,5768,5762],{}," is a behavioral design pattern that offers a scripting language for end-users to customize their solution.",[925,5771,5772],{},[963,5773],{"alt":5762,"src":5774},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Finterpreter.png",[925,5776,5777],{},"Some applications are so complex that they require advanced configuration. You could offer a basic scripting language that allows the end-user to manipulate your application through simple instructions. The Interpreter pattern solves this particular problem by introducing a simple scripting language.",[925,5779,5780],{},"The example below is to build an interpreter which translates roman numerals to decimal numbers.",[993,5782,5784],{"className":2227,"code":5783,"language":2229,"meta":998,"style":998},"class Context {\n constructor(input) {\n this.input = input;\n this.output = 0;\n }\n\n startsWith(str) {\n return this.input.substr(0, str.length) === str;\n }\n}\n\nclass Expression {\n constructor(name, one, four, five, nine, multiplier) {\n this.name = name;\n this.one = one;\n this.four = four;\n this.five = five;\n this.nine = nine;\n this.multiplier = multiplier;\n }\n\n interpret(context) {\n if (context.input.length == 0) {\n return;\n } else if (context.startsWith(this.nine)) {\n context.output += 9 * this.multiplier;\n context.input = context.input.substr(2);\n } else if (context.startsWith(this.four)) {\n context.output += 4 * this.multiplier;\n context.input = context.input.substr(2);\n } else if (context.startsWith(this.five)) {\n context.output += 5 * this.multiplier;\n context.input = context.input.substr(1);\n }\n\n while (context.startsWith(this.one)) {\n context.output += 1 * this.multiplier;\n context.input = context.input.substr(1);\n }\n }\n}\n\nconst roman = 'MCMLXXVII';\nconst context = new Context(roman);\nconst tree = [];\n\ntree.push(new Expression('thousand', 'M', ' ', ' ', ' ', 1000));\ntree.push(new Expression('hundred', 'C', 'CD', 'D', 'CM', 100));\ntree.push(new Expression('ten', 'X', 'XL', 'L', 'XC', 10));\ntree.push(new Expression('one', 'I', 'IV', 'V', 'IX', 1));\n\nfor (let i = 0, len = tree.length; i \u003C len; i++) {\n tree[i].interpret(context);\n}\n\nconsole.log(roman + ' = ' + context.output); \u002F\u002F 1977\n",[941,5785,5786,5795,5806,5818,5831,5835,5839,5851,5882,5886,5890,5894,5903,5939,5951,5963,5975,5987,5999,6011,6015,6019,6031,6047,6053,6077,6096,6114,6133,6147,6163,6182,6197,6214,6218,6222,6238,6253,6269,6273,6277,6281,6285,6299,6315,6326,6330,6373,6416,6459,6502,6506,6548,6559,6563,6567],{"__ignoreMap":998},[1002,5787,5788,5790,5793],{"class":1004,"line":1005},[1002,5789,2363],{"class":1015},[1002,5791,5792],{"class":1026}," Context",[1002,5794,1457],{"class":1030},[1002,5796,5797,5799,5801,5804],{"class":1004,"line":1012},[1002,5798,2373],{"class":1015},[1002,5800,1031],{"class":1030},[1002,5802,5803],{"class":2378},"input",[1002,5805,2382],{"class":1030},[1002,5807,5808,5810,5813,5815],{"class":1004,"line":1047},[1002,5809,2387],{"class":1019},[1002,5811,5812],{"class":1030},".input ",[1002,5814,2393],{"class":1015},[1002,5816,5817],{"class":1030}," input;\n",[1002,5819,5820,5822,5825,5827,5829],{"class":1004,"line":1054},[1002,5821,2387],{"class":1019},[1002,5823,5824],{"class":1030},".output ",[1002,5826,2393],{"class":1015},[1002,5828,4910],{"class":1019},[1002,5830,1407],{"class":1030},[1002,5832,5833],{"class":1004,"line":1060},[1002,5834,1269],{"class":1030},[1002,5836,5837],{"class":1004,"line":1272},[1002,5838,1051],{"emptyLinePlaceholder":1050},[1002,5840,5841,5844,5846,5849],{"class":1004,"line":1348},[1002,5842,5843],{"class":1026}," startsWith",[1002,5845,1031],{"class":1030},[1002,5847,5848],{"class":2378},"str",[1002,5850,2382],{"class":1030},[1002,5852,5853,5855,5857,5860,5863,5865,5868,5871,5874,5877,5879],{"class":1004,"line":1354},[1002,5854,2687],{"class":1015},[1002,5856,2693],{"class":1019},[1002,5858,5859],{"class":1030},".input.",[1002,5861,5862],{"class":1026},"substr",[1002,5864,1031],{"class":1030},[1002,5866,5867],{"class":1019},"0",[1002,5869,5870],{"class":1030},", str.",[1002,5872,5873],{"class":1019},"length",[1002,5875,5876],{"class":1030},") ",[1002,5878,2892],{"class":1015},[1002,5880,5881],{"class":1030}," str;\n",[1002,5883,5884],{"class":1004,"line":1360},[1002,5885,1269],{"class":1030},[1002,5887,5888],{"class":1004,"line":1366},[1002,5889,1170],{"class":1030},[1002,5891,5892],{"class":1004,"line":1946},[1002,5893,1051],{"emptyLinePlaceholder":1050},[1002,5895,5896,5898,5901],{"class":1004,"line":1956},[1002,5897,2363],{"class":1015},[1002,5899,5900],{"class":1026}," Expression",[1002,5902,1457],{"class":1030},[1002,5904,5905,5907,5909,5912,5914,5917,5919,5922,5924,5927,5929,5932,5934,5937],{"class":1004,"line":1961},[1002,5906,2373],{"class":1015},[1002,5908,1031],{"class":1030},[1002,5910,5911],{"class":2378},"name",[1002,5913,1251],{"class":1030},[1002,5915,5916],{"class":2378},"one",[1002,5918,1251],{"class":1030},[1002,5920,5921],{"class":2378},"four",[1002,5923,1251],{"class":1030},[1002,5925,5926],{"class":2378},"five",[1002,5928,1251],{"class":1030},[1002,5930,5931],{"class":2378},"nine",[1002,5933,1251],{"class":1030},[1002,5935,5936],{"class":2378},"multiplier",[1002,5938,2382],{"class":1030},[1002,5940,5941,5943,5946,5948],{"class":1004,"line":1971},[1002,5942,2387],{"class":1019},[1002,5944,5945],{"class":1030},".name ",[1002,5947,2393],{"class":1015},[1002,5949,5950],{"class":1030}," name;\n",[1002,5952,5953,5955,5958,5960],{"class":1004,"line":1980},[1002,5954,2387],{"class":1019},[1002,5956,5957],{"class":1030},".one ",[1002,5959,2393],{"class":1015},[1002,5961,5962],{"class":1030}," one;\n",[1002,5964,5965,5967,5970,5972],{"class":1004,"line":1985},[1002,5966,2387],{"class":1019},[1002,5968,5969],{"class":1030},".four ",[1002,5971,2393],{"class":1015},[1002,5973,5974],{"class":1030}," four;\n",[1002,5976,5977,5979,5982,5984],{"class":1004,"line":1995},[1002,5978,2387],{"class":1019},[1002,5980,5981],{"class":1030},".five ",[1002,5983,2393],{"class":1015},[1002,5985,5986],{"class":1030}," five;\n",[1002,5988,5989,5991,5994,5996],{"class":1004,"line":2006},[1002,5990,2387],{"class":1019},[1002,5992,5993],{"class":1030},".nine ",[1002,5995,2393],{"class":1015},[1002,5997,5998],{"class":1030}," nine;\n",[1002,6000,6001,6003,6006,6008],{"class":1004,"line":2011},[1002,6002,2387],{"class":1019},[1002,6004,6005],{"class":1030},".multiplier ",[1002,6007,2393],{"class":1015},[1002,6009,6010],{"class":1030}," multiplier;\n",[1002,6012,6013],{"class":1004,"line":2017},[1002,6014,1269],{"class":1030},[1002,6016,6017],{"class":1004,"line":2022},[1002,6018,1051],{"emptyLinePlaceholder":1050},[1002,6020,6021,6024,6026,6029],{"class":1004,"line":2442},[1002,6022,6023],{"class":1026}," interpret",[1002,6025,1031],{"class":1030},[1002,6027,6028],{"class":2378},"context",[1002,6030,2382],{"class":1030},[1002,6032,6033,6035,6038,6040,6043,6045],{"class":1004,"line":2466},[1002,6034,4368],{"class":1015},[1002,6036,6037],{"class":1030}," (context.input.",[1002,6039,5873],{"class":1019},[1002,6041,6042],{"class":1015}," ==",[1002,6044,4910],{"class":1019},[1002,6046,2382],{"class":1030},[1002,6048,6049,6051],{"class":1004,"line":2471},[1002,6050,4376],{"class":1015},[1002,6052,1407],{"class":1030},[1002,6054,6055,6058,6061,6064,6067,6070,6072,6074],{"class":1004,"line":2476},[1002,6056,6057],{"class":1030}," } ",[1002,6059,6060],{"class":1015},"else",[1002,6062,6063],{"class":1015}," if",[1002,6065,6066],{"class":1030}," (context.",[1002,6068,6069],{"class":1026},"startsWith",[1002,6071,1031],{"class":1030},[1002,6073,3455],{"class":1019},[1002,6075,6076],{"class":1030},".nine)) {\n",[1002,6078,6079,6082,6085,6088,6091,6093],{"class":1004,"line":2481},[1002,6080,6081],{"class":1030}," context.output ",[1002,6083,6084],{"class":1015},"+=",[1002,6086,6087],{"class":1019}," 9",[1002,6089,6090],{"class":1015}," *",[1002,6092,2693],{"class":1019},[1002,6094,6095],{"class":1030},".multiplier;\n",[1002,6097,6098,6101,6103,6106,6108,6110,6112],{"class":1004,"line":2491},[1002,6099,6100],{"class":1030}," context.input ",[1002,6102,2393],{"class":1015},[1002,6104,6105],{"class":1030}," context.input.",[1002,6107,5862],{"class":1026},[1002,6109,1031],{"class":1030},[1002,6111,5681],{"class":1019},[1002,6113,1085],{"class":1030},[1002,6115,6116,6118,6120,6122,6124,6126,6128,6130],{"class":1004,"line":2502},[1002,6117,6057],{"class":1030},[1002,6119,6060],{"class":1015},[1002,6121,6063],{"class":1015},[1002,6123,6066],{"class":1030},[1002,6125,6069],{"class":1026},[1002,6127,1031],{"class":1030},[1002,6129,3455],{"class":1019},[1002,6131,6132],{"class":1030},".four)) {\n",[1002,6134,6135,6137,6139,6141,6143,6145],{"class":1004,"line":2513},[1002,6136,6081],{"class":1030},[1002,6138,6084],{"class":1015},[1002,6140,2414],{"class":1019},[1002,6142,6090],{"class":1015},[1002,6144,2693],{"class":1019},[1002,6146,6095],{"class":1030},[1002,6148,6149,6151,6153,6155,6157,6159,6161],{"class":1004,"line":2535},[1002,6150,6100],{"class":1030},[1002,6152,2393],{"class":1015},[1002,6154,6105],{"class":1030},[1002,6156,5862],{"class":1026},[1002,6158,1031],{"class":1030},[1002,6160,5681],{"class":1019},[1002,6162,1085],{"class":1030},[1002,6164,6165,6167,6169,6171,6173,6175,6177,6179],{"class":1004,"line":2557},[1002,6166,6057],{"class":1030},[1002,6168,6060],{"class":1015},[1002,6170,6063],{"class":1015},[1002,6172,6066],{"class":1030},[1002,6174,6069],{"class":1026},[1002,6176,1031],{"class":1030},[1002,6178,3455],{"class":1019},[1002,6180,6181],{"class":1030},".five)) {\n",[1002,6183,6184,6186,6188,6191,6193,6195],{"class":1004,"line":2562},[1002,6185,6081],{"class":1030},[1002,6187,6084],{"class":1015},[1002,6189,6190],{"class":1019}," 5",[1002,6192,6090],{"class":1015},[1002,6194,2693],{"class":1019},[1002,6196,6095],{"class":1030},[1002,6198,6199,6201,6203,6205,6207,6209,6212],{"class":1004,"line":2567},[1002,6200,6100],{"class":1030},[1002,6202,2393],{"class":1015},[1002,6204,6105],{"class":1030},[1002,6206,5862],{"class":1026},[1002,6208,1031],{"class":1030},[1002,6210,6211],{"class":1019},"1",[1002,6213,1085],{"class":1030},[1002,6215,6216],{"class":1004,"line":2572},[1002,6217,2014],{"class":1030},[1002,6219,6220],{"class":1004,"line":2582},[1002,6221,1051],{"emptyLinePlaceholder":1050},[1002,6223,6224,6227,6229,6231,6233,6235],{"class":1004,"line":2594},[1002,6225,6226],{"class":1015}," while",[1002,6228,6066],{"class":1030},[1002,6230,6069],{"class":1026},[1002,6232,1031],{"class":1030},[1002,6234,3455],{"class":1019},[1002,6236,6237],{"class":1030},".one)) {\n",[1002,6239,6240,6242,6244,6247,6249,6251],{"class":1004,"line":2603},[1002,6241,6081],{"class":1030},[1002,6243,6084],{"class":1015},[1002,6245,6246],{"class":1019}," 1",[1002,6248,6090],{"class":1015},[1002,6250,2693],{"class":1019},[1002,6252,6095],{"class":1030},[1002,6254,6255,6257,6259,6261,6263,6265,6267],{"class":1004,"line":2619},[1002,6256,6100],{"class":1030},[1002,6258,2393],{"class":1015},[1002,6260,6105],{"class":1030},[1002,6262,5862],{"class":1026},[1002,6264,1031],{"class":1030},[1002,6266,6211],{"class":1019},[1002,6268,1085],{"class":1030},[1002,6270,6271],{"class":1004,"line":2633},[1002,6272,2014],{"class":1030},[1002,6274,6275],{"class":1004,"line":2641},[1002,6276,1269],{"class":1030},[1002,6278,6279],{"class":1004,"line":2655},[1002,6280,1170],{"class":1030},[1002,6282,6283],{"class":1004,"line":2667},[1002,6284,1051],{"emptyLinePlaceholder":1050},[1002,6286,6287,6289,6292,6294,6297],{"class":1004,"line":2674},[1002,6288,1016],{"class":1015},[1002,6290,6291],{"class":1019}," roman",[1002,6293,1023],{"class":1015},[1002,6295,6296],{"class":1034}," 'MCMLXXVII'",[1002,6298,1407],{"class":1030},[1002,6300,6301,6303,6306,6308,6310,6312],{"class":1004,"line":2679},[1002,6302,1016],{"class":1015},[1002,6304,6305],{"class":1019}," context",[1002,6307,1023],{"class":1015},[1002,6309,2690],{"class":1015},[1002,6311,5792],{"class":1026},[1002,6313,6314],{"class":1030},"(roman);\n",[1002,6316,6317,6319,6322,6324],{"class":1004,"line":2684},[1002,6318,1016],{"class":1015},[1002,6320,6321],{"class":1019}," tree",[1002,6323,1023],{"class":1015},[1002,6325,4924],{"class":1030},[1002,6327,6328],{"class":1004,"line":2704},[1002,6329,1051],{"emptyLinePlaceholder":1050},[1002,6331,6332,6335,6337,6339,6341,6343,6345,6348,6350,6353,6355,6358,6360,6362,6364,6366,6368,6371],{"class":1004,"line":2709},[1002,6333,6334],{"class":1030},"tree.",[1002,6336,4974],{"class":1026},[1002,6338,1031],{"class":1030},[1002,6340,5654],{"class":1015},[1002,6342,5900],{"class":1026},[1002,6344,1031],{"class":1030},[1002,6346,6347],{"class":1034},"'thousand'",[1002,6349,1251],{"class":1030},[1002,6351,6352],{"class":1034},"'M'",[1002,6354,1251],{"class":1030},[1002,6356,6357],{"class":1034},"' '",[1002,6359,1251],{"class":1030},[1002,6361,6357],{"class":1034},[1002,6363,1251],{"class":1030},[1002,6365,6357],{"class":1034},[1002,6367,1251],{"class":1030},[1002,6369,6370],{"class":1019},"1000",[1002,6372,5663],{"class":1030},[1002,6374,6375,6377,6379,6381,6383,6385,6387,6390,6392,6395,6397,6400,6402,6405,6407,6410,6412,6414],{"class":1004,"line":2714},[1002,6376,6334],{"class":1030},[1002,6378,4974],{"class":1026},[1002,6380,1031],{"class":1030},[1002,6382,5654],{"class":1015},[1002,6384,5900],{"class":1026},[1002,6386,1031],{"class":1030},[1002,6388,6389],{"class":1034},"'hundred'",[1002,6391,1251],{"class":1030},[1002,6393,6394],{"class":1034},"'C'",[1002,6396,1251],{"class":1030},[1002,6398,6399],{"class":1034},"'CD'",[1002,6401,1251],{"class":1030},[1002,6403,6404],{"class":1034},"'D'",[1002,6406,1251],{"class":1030},[1002,6408,6409],{"class":1034},"'CM'",[1002,6411,1251],{"class":1030},[1002,6413,4791],{"class":1019},[1002,6415,5663],{"class":1030},[1002,6417,6418,6420,6422,6424,6426,6428,6430,6433,6435,6438,6440,6443,6445,6448,6450,6453,6455,6457],{"class":1004,"line":2719},[1002,6419,6334],{"class":1030},[1002,6421,4974],{"class":1026},[1002,6423,1031],{"class":1030},[1002,6425,5654],{"class":1015},[1002,6427,5900],{"class":1026},[1002,6429,1031],{"class":1030},[1002,6431,6432],{"class":1034},"'ten'",[1002,6434,1251],{"class":1030},[1002,6436,6437],{"class":1034},"'X'",[1002,6439,1251],{"class":1030},[1002,6441,6442],{"class":1034},"'XL'",[1002,6444,1251],{"class":1030},[1002,6446,6447],{"class":1034},"'L'",[1002,6449,1251],{"class":1030},[1002,6451,6452],{"class":1034},"'XC'",[1002,6454,1251],{"class":1030},[1002,6456,4818],{"class":1019},[1002,6458,5663],{"class":1030},[1002,6460,6461,6463,6465,6467,6469,6471,6473,6476,6478,6481,6483,6486,6488,6491,6493,6496,6498,6500],{"class":1004,"line":2735},[1002,6462,6334],{"class":1030},[1002,6464,4974],{"class":1026},[1002,6466,1031],{"class":1030},[1002,6468,5654],{"class":1015},[1002,6470,5900],{"class":1026},[1002,6472,1031],{"class":1030},[1002,6474,6475],{"class":1034},"'one'",[1002,6477,1251],{"class":1030},[1002,6479,6480],{"class":1034},"'I'",[1002,6482,1251],{"class":1030},[1002,6484,6485],{"class":1034},"'IV'",[1002,6487,1251],{"class":1030},[1002,6489,6490],{"class":1034},"'V'",[1002,6492,1251],{"class":1030},[1002,6494,6495],{"class":1034},"'IX'",[1002,6497,1251],{"class":1030},[1002,6499,6211],{"class":1019},[1002,6501,5663],{"class":1030},[1002,6503,6504],{"class":1004,"line":2740},[1002,6505,1051],{"emptyLinePlaceholder":1050},[1002,6507,6508,6511,6514,6517,6520,6522,6524,6527,6529,6532,6534,6537,6540,6543,6546],{"class":1004,"line":2759},[1002,6509,6510],{"class":1015},"for",[1002,6512,6513],{"class":1030}," (",[1002,6515,6516],{"class":1015},"let",[1002,6518,6519],{"class":1030}," i ",[1002,6521,2393],{"class":1015},[1002,6523,4910],{"class":1019},[1002,6525,6526],{"class":1030},", len ",[1002,6528,2393],{"class":1015},[1002,6530,6531],{"class":1030}," tree.",[1002,6533,5873],{"class":1019},[1002,6535,6536],{"class":1030},"; i ",[1002,6538,6539],{"class":1015},"\u003C",[1002,6541,6542],{"class":1030}," len; i",[1002,6544,6545],{"class":1015},"++",[1002,6547,2382],{"class":1030},[1002,6549,6550,6553,6556],{"class":1004,"line":2774},[1002,6551,6552],{"class":1030}," tree[i].",[1002,6554,6555],{"class":1026},"interpret",[1002,6557,6558],{"class":1030},"(context);\n",[1002,6560,6561],{"class":1004,"line":2790},[1002,6562,1170],{"class":1030},[1002,6564,6565],{"class":1004,"line":2801},[1002,6566,1051],{"emptyLinePlaceholder":1050},[1002,6568,6569,6571,6573,6576,6578,6581,6584,6587],{"class":1004,"line":2807},[1002,6570,2883],{"class":1030},[1002,6572,2886],{"class":1026},[1002,6574,6575],{"class":1030},"(roman ",[1002,6577,5064],{"class":1015},[1002,6579,6580],{"class":1034}," ' = '",[1002,6582,6583],{"class":1015}," +",[1002,6585,6586],{"class":1030}," context.output); ",[1002,6588,6589],{"class":1008},"\u002F\u002F 1977\n",[925,6591,6592],{},"The Context object - maintains the input which is the roman numeral and the resulting output as it is being parsed and interpreted. The Expression object - represents the nodes in the grammar tree and it supports the interpret method.",[953,6594,6596],{"id":6595},"iterator","Iterator",[925,6598,6599,6603],{},[1107,6600,6601],{},[928,6602,6596],{}," is a behavioral design pattern that accesses the elements of an object without exposing its underlying representation.",[925,6605,6606],{},"It is a common task in programming to traverse and manipulate a collection of objects. These collections may be stored as an array or perhaps something more complex, such as a tree or graph structure. In addition, you may need to access the items in the collection in a certain order, such as, front to back, back to front, depth-first (as in tree searches), skip evenly numbered objects, etc.",[925,6608,6609],{},[963,6610],{"alt":6596,"src":6611},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fiterator.png",[925,6613,3295,6614,6616,6617,6620,6621,6620,6624,6620,6627,6630,6631,948],{},[941,6615,6596],{}," object maintains a reference to the collection and the current position. It also implements the 'standard' Iterator interface with methods like: ",[941,6618,6619],{},"first",", ",[941,6622,6623],{},"next",[941,6625,6626],{},"hasNext",[941,6628,6629],{},"reset",", and ",[941,6632,6633],{},"each",[993,6635,6637],{"className":2227,"code":6636,"language":2229,"meta":998,"style":998},"class Iterator {\n constructor(items) {\n this.index = 0;\n this.items = items;\n }\n\n first() {\n this.reset();\n return this.next();\n }\n\n next() {\n return this.items[this.index++];\n }\n\n hasNext() {\n return this.index \u003C= this.items.length;\n }\n\n reset() {\n this.index = 0;\n }\n\n each(callback) {\n for (let item = this.first(); this.hasNext(); item = this.next()) {\n callback(item);\n }\n }\n}\n\nconst items = ['Apple', 'Banana', 'Pear', 'Orange'];\nconst iter = new Iterator(items);\n\niter.each(function (item) {\n console.log(item);\n});\n",[941,6638,6639,6648,6659,6672,6684,6688,6692,6699,6709,6721,6725,6729,6736,6755,6759,6763,6770,6790,6794,6798,6805,6817,6821,6825,6837,6879,6887,6891,6895,6899,6903,6934,6950,6954,6973,6982],{"__ignoreMap":998},[1002,6640,6641,6643,6646],{"class":1004,"line":1005},[1002,6642,2363],{"class":1015},[1002,6644,6645],{"class":1026}," Iterator",[1002,6647,1457],{"class":1030},[1002,6649,6650,6652,6654,6657],{"class":1004,"line":1012},[1002,6651,2373],{"class":1015},[1002,6653,1031],{"class":1030},[1002,6655,6656],{"class":2378},"items",[1002,6658,2382],{"class":1030},[1002,6660,6661,6663,6666,6668,6670],{"class":1004,"line":1047},[1002,6662,2387],{"class":1019},[1002,6664,6665],{"class":1030},".index ",[1002,6667,2393],{"class":1015},[1002,6669,4910],{"class":1019},[1002,6671,1407],{"class":1030},[1002,6673,6674,6676,6679,6681],{"class":1004,"line":1054},[1002,6675,2387],{"class":1019},[1002,6677,6678],{"class":1030},".items ",[1002,6680,2393],{"class":1015},[1002,6682,6683],{"class":1030}," items;\n",[1002,6685,6686],{"class":1004,"line":1060},[1002,6687,1269],{"class":1030},[1002,6689,6690],{"class":1004,"line":1272},[1002,6691,1051],{"emptyLinePlaceholder":1050},[1002,6693,6694,6697],{"class":1004,"line":1348},[1002,6695,6696],{"class":1026}," first",[1002,6698,3025],{"class":1030},[1002,6700,6701,6703,6705,6707],{"class":1004,"line":1354},[1002,6702,2387],{"class":1019},[1002,6704,948],{"class":1030},[1002,6706,6629],{"class":1026},[1002,6708,1428],{"class":1030},[1002,6710,6711,6713,6715,6717,6719],{"class":1004,"line":1360},[1002,6712,2687],{"class":1015},[1002,6714,2693],{"class":1019},[1002,6716,948],{"class":1030},[1002,6718,6623],{"class":1026},[1002,6720,1428],{"class":1030},[1002,6722,6723],{"class":1004,"line":1366},[1002,6724,1269],{"class":1030},[1002,6726,6727],{"class":1004,"line":1946},[1002,6728,1051],{"emptyLinePlaceholder":1050},[1002,6730,6731,6734],{"class":1004,"line":1956},[1002,6732,6733],{"class":1026}," next",[1002,6735,3025],{"class":1030},[1002,6737,6738,6740,6742,6745,6747,6750,6752],{"class":1004,"line":1961},[1002,6739,2687],{"class":1015},[1002,6741,2693],{"class":1019},[1002,6743,6744],{"class":1030},".items[",[1002,6746,3455],{"class":1019},[1002,6748,6749],{"class":1030},".index",[1002,6751,6545],{"class":1015},[1002,6753,6754],{"class":1030},"];\n",[1002,6756,6757],{"class":1004,"line":1971},[1002,6758,1269],{"class":1030},[1002,6760,6761],{"class":1004,"line":1980},[1002,6762,1051],{"emptyLinePlaceholder":1050},[1002,6764,6765,6768],{"class":1004,"line":1985},[1002,6766,6767],{"class":1026}," hasNext",[1002,6769,3025],{"class":1030},[1002,6771,6772,6774,6776,6778,6781,6783,6786,6788],{"class":1004,"line":1995},[1002,6773,2687],{"class":1015},[1002,6775,2693],{"class":1019},[1002,6777,6665],{"class":1030},[1002,6779,6780],{"class":1015},"\u003C=",[1002,6782,2693],{"class":1019},[1002,6784,6785],{"class":1030},".items.",[1002,6787,5873],{"class":1019},[1002,6789,1407],{"class":1030},[1002,6791,6792],{"class":1004,"line":2006},[1002,6793,1269],{"class":1030},[1002,6795,6796],{"class":1004,"line":2011},[1002,6797,1051],{"emptyLinePlaceholder":1050},[1002,6799,6800,6803],{"class":1004,"line":2017},[1002,6801,6802],{"class":1026}," reset",[1002,6804,3025],{"class":1030},[1002,6806,6807,6809,6811,6813,6815],{"class":1004,"line":2022},[1002,6808,2387],{"class":1019},[1002,6810,6665],{"class":1030},[1002,6812,2393],{"class":1015},[1002,6814,4910],{"class":1019},[1002,6816,1407],{"class":1030},[1002,6818,6819],{"class":1004,"line":2442},[1002,6820,1269],{"class":1030},[1002,6822,6823],{"class":1004,"line":2466},[1002,6824,1051],{"emptyLinePlaceholder":1050},[1002,6826,6827,6830,6832,6835],{"class":1004,"line":2471},[1002,6828,6829],{"class":1026}," each",[1002,6831,1031],{"class":1030},[1002,6833,6834],{"class":2378},"callback",[1002,6836,2382],{"class":1030},[1002,6838,6839,6842,6844,6846,6849,6851,6853,6855,6857,6860,6862,6864,6866,6869,6871,6873,6875,6877],{"class":1004,"line":2476},[1002,6840,6841],{"class":1015}," for",[1002,6843,6513],{"class":1030},[1002,6845,6516],{"class":1015},[1002,6847,6848],{"class":1030}," item ",[1002,6850,2393],{"class":1015},[1002,6852,2693],{"class":1019},[1002,6854,948],{"class":1030},[1002,6856,6619],{"class":1026},[1002,6858,6859],{"class":1030},"(); ",[1002,6861,3455],{"class":1019},[1002,6863,948],{"class":1030},[1002,6865,6626],{"class":1026},[1002,6867,6868],{"class":1030},"(); item ",[1002,6870,2393],{"class":1015},[1002,6872,2693],{"class":1019},[1002,6874,948],{"class":1030},[1002,6876,6623],{"class":1026},[1002,6878,3547],{"class":1030},[1002,6880,6881,6884],{"class":1004,"line":2481},[1002,6882,6883],{"class":1026}," callback",[1002,6885,6886],{"class":1030},"(item);\n",[1002,6888,6889],{"class":1004,"line":2491},[1002,6890,2014],{"class":1030},[1002,6892,6893],{"class":1004,"line":2502},[1002,6894,1269],{"class":1030},[1002,6896,6897],{"class":1004,"line":2513},[1002,6898,1170],{"class":1030},[1002,6900,6901],{"class":1004,"line":2535},[1002,6902,1051],{"emptyLinePlaceholder":1050},[1002,6904,6905,6907,6910,6912,6914,6917,6919,6922,6924,6927,6929,6932],{"class":1004,"line":2557},[1002,6906,1016],{"class":1015},[1002,6908,6909],{"class":1019}," items",[1002,6911,1023],{"class":1015},[1002,6913,1897],{"class":1030},[1002,6915,6916],{"class":1034},"'Apple'",[1002,6918,1251],{"class":1030},[1002,6920,6921],{"class":1034},"'Banana'",[1002,6923,1251],{"class":1030},[1002,6925,6926],{"class":1034},"'Pear'",[1002,6928,1251],{"class":1030},[1002,6930,6931],{"class":1034},"'Orange'",[1002,6933,6754],{"class":1030},[1002,6935,6936,6938,6941,6943,6945,6947],{"class":1004,"line":2562},[1002,6937,1016],{"class":1015},[1002,6939,6940],{"class":1019}," iter",[1002,6942,1023],{"class":1015},[1002,6944,2690],{"class":1015},[1002,6946,6645],{"class":1026},[1002,6948,6949],{"class":1030},"(items);\n",[1002,6951,6952],{"class":1004,"line":2567},[1002,6953,1051],{"emptyLinePlaceholder":1050},[1002,6955,6956,6959,6961,6963,6966,6968,6971],{"class":1004,"line":2572},[1002,6957,6958],{"class":1030},"iter.",[1002,6960,6633],{"class":1026},[1002,6962,1031],{"class":1030},[1002,6964,6965],{"class":1015},"function",[1002,6967,6513],{"class":1030},[1002,6969,6970],{"class":2378},"item",[1002,6972,2382],{"class":1030},[1002,6974,6975,6978,6980],{"class":1004,"line":2582},[1002,6976,6977],{"class":1030}," console.",[1002,6979,2886],{"class":1026},[1002,6981,6886],{"class":1030},[1002,6983,6984],{"class":1004,"line":2594},[1002,6985,2804],{"class":1030},[925,6987,3295,6988,6990,6991,6993,6994,6620,6996,6630,6998,7000],{},[941,6989,6633],{}," method internally uses the ",[941,6992,6510],{}," loop which uses the ",[941,6995,6619],{},[941,6997,6626],{},[941,6999,6623],{}," methods to control the iteration. But to the client, the syntax has been greatly simplified.",[953,7002,7004],{"id":7003},"mediator","Mediator",[925,7006,3898,7007,7011],{},[1107,7008,7009],{},[928,7010,7004],{}," is a behavioral design pattern that adds a third-party object to control the interaction between two objects. It allows loose coupling between classes by being the only class that has detailed knowledge of their methods.",[925,7013,7014],{},[963,7015],{"alt":7004,"src":7016},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fmediator.png",[925,7018,3295,7019,7023],{},[1107,7020,7021],{},[928,7022,7004],{}," pattern provides central authority over a group of objects by encapsulating how these objects interact. This model is useful for scenarios where there is a need to manage complex conditions in which every object is aware of any state change in any other object in the group.",[925,7025,7026,7027,7030,7031,7034],{},"Let’s look at an example where we have four participants that are joining in a chat session by registering with a ",[941,7028,7029],{},"Chatroom"," (the Mediator). Each participant is represented by a ",[941,7032,7033],{},"Participant"," object. Participants send messages to each other and the Chatroom manages the routing.",[993,7036,7038],{"className":2227,"code":7037,"language":2229,"meta":998,"style":998},"class Participant {\n constructor(name) {\n this.name = name;\n this.chatroom = null;\n }\n\n send(message, to) {\n this.chatroom.send(message, this, to);\n }\n\n receive(message, from) {\n console.log(from.name + ' -> ' + this.name + ': ' + message);\n }\n}\n\nclass Chatroom {\n constructor() {\n this.participants = {};\n }\n\n join(participant) {\n this.participants[participant.name] = participant;\n participant.chatroom = this;\n }\n\n send(message, from, to) {\n if (to) {\n \u002F\u002F single message\n to.receive(message, from);\n } else {\n \u002F\u002F broadcast message\n for (const key in this.participants) {\n if (this.participants[key] !== from) {\n this.participants[key].receive(message, from);\n }\n }\n }\n }\n}\n\nconst michael = new Participant('Michael');\nconst jane = new Participant('Jane');\nconst paul = new Participant('Paul');\nconst emily = new Participant('Emily');\n\nconst chatroom = new Chatroom();\nchatroom.join(michael);\nchatroom.join(jane);\nchatroom.join(paul);\nchatroom.join(emily);\n\nmichael.send('Hey Jane, how was your weekend?');\njane.send('Hey Michael, it was great. How was yours?', michael);\npaul.send('Hey peeps, how are we going?');\nemily.send('Great Paul. Thank you', paul);\n",[941,7039,7040,7049,7059,7069,7083,7087,7091,7108,7126,7130,7134,7149,7179,7183,7187,7191,7200,7206,7218,7222,7226,7238,7250,7261,7265,7269,7287,7294,7299,7310,7318,7323,7343,7361,7373,7378,7382,7386,7390,7394,7398,7418,7438,7458,7478,7482,7497,7508,7517,7526,7535,7539,7553,7568,7582],{"__ignoreMap":998},[1002,7041,7042,7044,7047],{"class":1004,"line":1005},[1002,7043,2363],{"class":1015},[1002,7045,7046],{"class":1026}," Participant",[1002,7048,1457],{"class":1030},[1002,7050,7051,7053,7055,7057],{"class":1004,"line":1012},[1002,7052,2373],{"class":1015},[1002,7054,1031],{"class":1030},[1002,7056,5911],{"class":2378},[1002,7058,2382],{"class":1030},[1002,7060,7061,7063,7065,7067],{"class":1004,"line":1047},[1002,7062,2387],{"class":1019},[1002,7064,5945],{"class":1030},[1002,7066,2393],{"class":1015},[1002,7068,5950],{"class":1030},[1002,7070,7071,7073,7076,7078,7081],{"class":1004,"line":1054},[1002,7072,2387],{"class":1019},[1002,7074,7075],{"class":1030},".chatroom ",[1002,7077,2393],{"class":1015},[1002,7079,7080],{"class":1019}," null",[1002,7082,1407],{"class":1030},[1002,7084,7085],{"class":1004,"line":1060},[1002,7086,1269],{"class":1030},[1002,7088,7089],{"class":1004,"line":1272},[1002,7090,1051],{"emptyLinePlaceholder":1050},[1002,7092,7093,7096,7098,7101,7103,7106],{"class":1004,"line":1348},[1002,7094,7095],{"class":1026}," send",[1002,7097,1031],{"class":1030},[1002,7099,7100],{"class":2378},"message",[1002,7102,1251],{"class":1030},[1002,7104,7105],{"class":2378},"to",[1002,7107,2382],{"class":1030},[1002,7109,7110,7112,7115,7118,7121,7123],{"class":1004,"line":1354},[1002,7111,2387],{"class":1019},[1002,7113,7114],{"class":1030},".chatroom.",[1002,7116,7117],{"class":1026},"send",[1002,7119,7120],{"class":1030},"(message, ",[1002,7122,3455],{"class":1019},[1002,7124,7125],{"class":1030},", to);\n",[1002,7127,7128],{"class":1004,"line":1360},[1002,7129,1269],{"class":1030},[1002,7131,7132],{"class":1004,"line":1366},[1002,7133,1051],{"emptyLinePlaceholder":1050},[1002,7135,7136,7139,7141,7143,7145,7147],{"class":1004,"line":1946},[1002,7137,7138],{"class":1026}," receive",[1002,7140,1031],{"class":1030},[1002,7142,7100],{"class":2378},[1002,7144,1251],{"class":1030},[1002,7146,1068],{"class":2378},[1002,7148,2382],{"class":1030},[1002,7150,7151,7153,7155,7158,7160,7163,7165,7167,7169,7171,7174,7176],{"class":1004,"line":1956},[1002,7152,3030],{"class":1030},[1002,7154,2886],{"class":1026},[1002,7156,7157],{"class":1030},"(from.name ",[1002,7159,5064],{"class":1015},[1002,7161,7162],{"class":1034}," ' -> '",[1002,7164,6583],{"class":1015},[1002,7166,2693],{"class":1019},[1002,7168,5945],{"class":1030},[1002,7170,5064],{"class":1015},[1002,7172,7173],{"class":1034}," ': '",[1002,7175,6583],{"class":1015},[1002,7177,7178],{"class":1030}," message);\n",[1002,7180,7181],{"class":1004,"line":1961},[1002,7182,1269],{"class":1030},[1002,7184,7185],{"class":1004,"line":1971},[1002,7186,1170],{"class":1030},[1002,7188,7189],{"class":1004,"line":1980},[1002,7190,1051],{"emptyLinePlaceholder":1050},[1002,7192,7193,7195,7198],{"class":1004,"line":1985},[1002,7194,2363],{"class":1015},[1002,7196,7197],{"class":1026}," Chatroom",[1002,7199,1457],{"class":1030},[1002,7201,7202,7204],{"class":1004,"line":1995},[1002,7203,2373],{"class":1015},[1002,7205,3025],{"class":1030},[1002,7207,7208,7210,7213,7215],{"class":1004,"line":2006},[1002,7209,2387],{"class":1019},[1002,7211,7212],{"class":1030},".participants ",[1002,7214,2393],{"class":1015},[1002,7216,7217],{"class":1030}," {};\n",[1002,7219,7220],{"class":1004,"line":2011},[1002,7221,1269],{"class":1030},[1002,7223,7224],{"class":1004,"line":2017},[1002,7225,1051],{"emptyLinePlaceholder":1050},[1002,7227,7228,7231,7233,7236],{"class":1004,"line":2022},[1002,7229,7230],{"class":1026}," join",[1002,7232,1031],{"class":1030},[1002,7234,7235],{"class":2378},"participant",[1002,7237,2382],{"class":1030},[1002,7239,7240,7242,7245,7247],{"class":1004,"line":2442},[1002,7241,2387],{"class":1019},[1002,7243,7244],{"class":1030},".participants[participant.name] ",[1002,7246,2393],{"class":1015},[1002,7248,7249],{"class":1030}," participant;\n",[1002,7251,7252,7255,7257,7259],{"class":1004,"line":2466},[1002,7253,7254],{"class":1030}," participant.chatroom ",[1002,7256,2393],{"class":1015},[1002,7258,2693],{"class":1019},[1002,7260,1407],{"class":1030},[1002,7262,7263],{"class":1004,"line":2471},[1002,7264,1269],{"class":1030},[1002,7266,7267],{"class":1004,"line":2476},[1002,7268,1051],{"emptyLinePlaceholder":1050},[1002,7270,7271,7273,7275,7277,7279,7281,7283,7285],{"class":1004,"line":2481},[1002,7272,7095],{"class":1026},[1002,7274,1031],{"class":1030},[1002,7276,7100],{"class":2378},[1002,7278,1251],{"class":1030},[1002,7280,1068],{"class":2378},[1002,7282,1251],{"class":1030},[1002,7284,7105],{"class":2378},[1002,7286,2382],{"class":1030},[1002,7288,7289,7291],{"class":1004,"line":2491},[1002,7290,4368],{"class":1015},[1002,7292,7293],{"class":1030}," (to) {\n",[1002,7295,7296],{"class":1004,"line":2502},[1002,7297,7298],{"class":1008}," \u002F\u002F single message\n",[1002,7300,7301,7304,7307],{"class":1004,"line":2513},[1002,7302,7303],{"class":1030}," to.",[1002,7305,7306],{"class":1026},"receive",[1002,7308,7309],{"class":1030},"(message, from);\n",[1002,7311,7312,7314,7316],{"class":1004,"line":2535},[1002,7313,6057],{"class":1030},[1002,7315,6060],{"class":1015},[1002,7317,1457],{"class":1030},[1002,7319,7320],{"class":1004,"line":2557},[1002,7321,7322],{"class":1008}," \u002F\u002F broadcast message\n",[1002,7324,7325,7328,7330,7332,7335,7338,7340],{"class":1004,"line":2562},[1002,7326,7327],{"class":1015}," for",[1002,7329,6513],{"class":1030},[1002,7331,1016],{"class":1015},[1002,7333,7334],{"class":1019}," key",[1002,7336,7337],{"class":1015}," in",[1002,7339,2693],{"class":1019},[1002,7341,7342],{"class":1030},".participants) {\n",[1002,7344,7345,7348,7350,7352,7355,7358],{"class":1004,"line":2567},[1002,7346,7347],{"class":1015}," if",[1002,7349,6513],{"class":1030},[1002,7351,3455],{"class":1019},[1002,7353,7354],{"class":1030},".participants[key] ",[1002,7356,7357],{"class":1015},"!==",[1002,7359,7360],{"class":1030}," from) {\n",[1002,7362,7363,7366,7369,7371],{"class":1004,"line":2572},[1002,7364,7365],{"class":1019}," this",[1002,7367,7368],{"class":1030},".participants[key].",[1002,7370,7306],{"class":1026},[1002,7372,7309],{"class":1030},[1002,7374,7375],{"class":1004,"line":2582},[1002,7376,7377],{"class":1030}," }\n",[1002,7379,7380],{"class":1004,"line":2594},[1002,7381,1351],{"class":1030},[1002,7383,7384],{"class":1004,"line":2603},[1002,7385,2014],{"class":1030},[1002,7387,7388],{"class":1004,"line":2619},[1002,7389,1269],{"class":1030},[1002,7391,7392],{"class":1004,"line":2633},[1002,7393,1170],{"class":1030},[1002,7395,7396],{"class":1004,"line":2641},[1002,7397,1051],{"emptyLinePlaceholder":1050},[1002,7399,7400,7402,7405,7407,7409,7411,7413,7416],{"class":1004,"line":2655},[1002,7401,1016],{"class":1015},[1002,7403,7404],{"class":1019}," michael",[1002,7406,1023],{"class":1015},[1002,7408,2690],{"class":1015},[1002,7410,7046],{"class":1026},[1002,7412,1031],{"class":1030},[1002,7414,7415],{"class":1034},"'Michael'",[1002,7417,1085],{"class":1030},[1002,7419,7420,7422,7425,7427,7429,7431,7433,7436],{"class":1004,"line":2667},[1002,7421,1016],{"class":1015},[1002,7423,7424],{"class":1019}," jane",[1002,7426,1023],{"class":1015},[1002,7428,2690],{"class":1015},[1002,7430,7046],{"class":1026},[1002,7432,1031],{"class":1030},[1002,7434,7435],{"class":1034},"'Jane'",[1002,7437,1085],{"class":1030},[1002,7439,7440,7442,7445,7447,7449,7451,7453,7456],{"class":1004,"line":2674},[1002,7441,1016],{"class":1015},[1002,7443,7444],{"class":1019}," paul",[1002,7446,1023],{"class":1015},[1002,7448,2690],{"class":1015},[1002,7450,7046],{"class":1026},[1002,7452,1031],{"class":1030},[1002,7454,7455],{"class":1034},"'Paul'",[1002,7457,1085],{"class":1030},[1002,7459,7460,7462,7465,7467,7469,7471,7473,7476],{"class":1004,"line":2679},[1002,7461,1016],{"class":1015},[1002,7463,7464],{"class":1019}," emily",[1002,7466,1023],{"class":1015},[1002,7468,2690],{"class":1015},[1002,7470,7046],{"class":1026},[1002,7472,1031],{"class":1030},[1002,7474,7475],{"class":1034},"'Emily'",[1002,7477,1085],{"class":1030},[1002,7479,7480],{"class":1004,"line":2684},[1002,7481,1051],{"emptyLinePlaceholder":1050},[1002,7483,7484,7486,7489,7491,7493,7495],{"class":1004,"line":2704},[1002,7485,1016],{"class":1015},[1002,7487,7488],{"class":1019}," chatroom",[1002,7490,1023],{"class":1015},[1002,7492,2690],{"class":1015},[1002,7494,7197],{"class":1026},[1002,7496,1428],{"class":1030},[1002,7498,7499,7502,7505],{"class":1004,"line":2709},[1002,7500,7501],{"class":1030},"chatroom.",[1002,7503,7504],{"class":1026},"join",[1002,7506,7507],{"class":1030},"(michael);\n",[1002,7509,7510,7512,7514],{"class":1004,"line":2714},[1002,7511,7501],{"class":1030},[1002,7513,7504],{"class":1026},[1002,7515,7516],{"class":1030},"(jane);\n",[1002,7518,7519,7521,7523],{"class":1004,"line":2719},[1002,7520,7501],{"class":1030},[1002,7522,7504],{"class":1026},[1002,7524,7525],{"class":1030},"(paul);\n",[1002,7527,7528,7530,7532],{"class":1004,"line":2735},[1002,7529,7501],{"class":1030},[1002,7531,7504],{"class":1026},[1002,7533,7534],{"class":1030},"(emily);\n",[1002,7536,7537],{"class":1004,"line":2740},[1002,7538,1051],{"emptyLinePlaceholder":1050},[1002,7540,7541,7544,7546,7548,7551],{"class":1004,"line":2759},[1002,7542,7543],{"class":1030},"michael.",[1002,7545,7117],{"class":1026},[1002,7547,1031],{"class":1030},[1002,7549,7550],{"class":1034},"'Hey Jane, how was your weekend?'",[1002,7552,1085],{"class":1030},[1002,7554,7555,7558,7560,7562,7565],{"class":1004,"line":2774},[1002,7556,7557],{"class":1030},"jane.",[1002,7559,7117],{"class":1026},[1002,7561,1031],{"class":1030},[1002,7563,7564],{"class":1034},"'Hey Michael, it was great. How was yours?'",[1002,7566,7567],{"class":1030},", michael);\n",[1002,7569,7570,7573,7575,7577,7580],{"class":1004,"line":2790},[1002,7571,7572],{"class":1030},"paul.",[1002,7574,7117],{"class":1026},[1002,7576,1031],{"class":1030},[1002,7578,7579],{"class":1034},"'Hey peeps, how are we going?'",[1002,7581,1085],{"class":1030},[1002,7583,7584,7587,7589,7591,7594],{"class":1004,"line":2801},[1002,7585,7586],{"class":1030},"emily.",[1002,7588,7117],{"class":1026},[1002,7590,1031],{"class":1030},[1002,7592,7593],{"class":1034},"'Great Paul. Thank you'",[1002,7595,7596],{"class":1030},", paul);\n",[925,7598,7599],{},"Another example of Mediator is that of a control tower on an airport coordinating arrivals and departures of aeroplanes.",[953,7601,7603],{"id":7602},"memento","Memento",[925,7605,3295,7606,7610],{},[1107,7607,7608],{},[928,7609,7603],{}," pattern is a behavioral design pattern that restoration of an object to its previous state as well as provides temporary storage. The mechanism in which you store the object’s state depends on the required duration of persistence, which may vary.",[925,7612,7613],{},[963,7614],{"alt":7602,"src":7615},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fmemento.png",[925,7617,7618],{},"The memento pattern is implemented with three objects: the originator, a caretaker and a memento.",[925,7620,7621],{},"Let’s look at them individually:",[1530,7623,7624,7637,7646],{},[974,7625,7626,7629],{},[1107,7627,7628],{},"Originator",[1530,7630,7631,7634],{},[974,7632,7633],{},"Implements interface to create and restore mementos of itself",[974,7635,7636],{},"The object whose state is temporary being saved and restored",[974,7638,7639,7641],{},[1107,7640,7603],{},[1530,7642,7643],{},[974,7644,7645],{},"The internal state of the Originator object in some storage format",[974,7647,7648,7651],{},[1107,7649,7650],{},"CareTaker",[1530,7652,7653,7656],{},[974,7654,7655],{},"Responsible for storing mementos",[974,7657,7658],{},"Just a repository; does not make changes to mementos",[925,7660,7661,7662,7665,7666,7669],{},"In the example code below, there are two people named John and Emily are being created using the ",[941,7663,7664],{},"Person"," constructor function. Next, their mementos are created which are maintained by the ",[941,7667,7668],{},"LocalStorage"," object.",[993,7671,7673],{"className":2227,"code":7672,"language":2229,"meta":998,"style":998},"class Person {\n constructor(name) {\n this.name = name;\n }\n\n hydrate() {\n const memento = JSON.stringify(this);\n return memento;\n }\n\n dehydrate(memento) {\n const m = JSON.parse(memento);\n this.name = m.name;\n }\n}\n\n\u002F\u002F CareTaker\nclass LocalStorage {\n constructor() {\n this.mementos = {};\n }\n\n add(key, memento) {\n this.mementos[key] = memento;\n }\n\n get(key) {\n return this.mementos[key];\n }\n}\n\nconst john = new Person('John Doe');\nconst emily = new Person('Emily Smith');\nconst localStorage = new LocalStorage();\n\n\u002F\u002F Save state\nlocalStorage.add(1, john.hydrate());\nlocalStorage.add(2, emily.hydrate());\n\n\u002F\u002F Assign false names\njohn.name = 'Michael Knight';\nemily.name = 'Stephanie Mason';\n\n\u002F\u002F Restore original state\njohn.dehydrate(localStorage.get(1));\nemily.dehydrate(localStorage.get(2));\n\nconsole.log(john.name);\nconsole.log(emily.name);\n",[941,7674,7675,7684,7694,7704,7708,7712,7719,7742,7749,7753,7757,7768,7787,7798,7802,7806,7810,7815,7824,7830,7841,7845,7849,7864,7875,7879,7883,7894,7903,7907,7911,7915,7935,7954,7969,7973,7978,7998,8015,8019,8024,8036,8048,8052,8057,8077,8093,8097,8106],{"__ignoreMap":998},[1002,7676,7677,7679,7682],{"class":1004,"line":1005},[1002,7678,2363],{"class":1015},[1002,7680,7681],{"class":1026}," Person",[1002,7683,1457],{"class":1030},[1002,7685,7686,7688,7690,7692],{"class":1004,"line":1012},[1002,7687,2373],{"class":1015},[1002,7689,1031],{"class":1030},[1002,7691,5911],{"class":2378},[1002,7693,2382],{"class":1030},[1002,7695,7696,7698,7700,7702],{"class":1004,"line":1047},[1002,7697,2387],{"class":1019},[1002,7699,5945],{"class":1030},[1002,7701,2393],{"class":1015},[1002,7703,5950],{"class":1030},[1002,7705,7706],{"class":1004,"line":1054},[1002,7707,1269],{"class":1030},[1002,7709,7710],{"class":1004,"line":1060},[1002,7711,1051],{"emptyLinePlaceholder":1050},[1002,7713,7714,7717],{"class":1004,"line":1272},[1002,7715,7716],{"class":1026}," hydrate",[1002,7718,3025],{"class":1030},[1002,7720,7721,7723,7726,7728,7731,7733,7736,7738,7740],{"class":1004,"line":1348},[1002,7722,4348],{"class":1015},[1002,7724,7725],{"class":1019}," memento",[1002,7727,1023],{"class":1015},[1002,7729,7730],{"class":1019}," JSON",[1002,7732,948],{"class":1030},[1002,7734,7735],{"class":1026},"stringify",[1002,7737,1031],{"class":1030},[1002,7739,3455],{"class":1019},[1002,7741,1085],{"class":1030},[1002,7743,7744,7746],{"class":1004,"line":1354},[1002,7745,2687],{"class":1015},[1002,7747,7748],{"class":1030}," memento;\n",[1002,7750,7751],{"class":1004,"line":1360},[1002,7752,1269],{"class":1030},[1002,7754,7755],{"class":1004,"line":1366},[1002,7756,1051],{"emptyLinePlaceholder":1050},[1002,7758,7759,7762,7764,7766],{"class":1004,"line":1946},[1002,7760,7761],{"class":1026}," dehydrate",[1002,7763,1031],{"class":1030},[1002,7765,7602],{"class":2378},[1002,7767,2382],{"class":1030},[1002,7769,7770,7772,7775,7777,7779,7781,7784],{"class":1004,"line":1956},[1002,7771,4348],{"class":1015},[1002,7773,7774],{"class":1019}," m",[1002,7776,1023],{"class":1015},[1002,7778,7730],{"class":1019},[1002,7780,948],{"class":1030},[1002,7782,7783],{"class":1026},"parse",[1002,7785,7786],{"class":1030},"(memento);\n",[1002,7788,7789,7791,7793,7795],{"class":1004,"line":1961},[1002,7790,2387],{"class":1019},[1002,7792,5945],{"class":1030},[1002,7794,2393],{"class":1015},[1002,7796,7797],{"class":1030}," m.name;\n",[1002,7799,7800],{"class":1004,"line":1971},[1002,7801,1269],{"class":1030},[1002,7803,7804],{"class":1004,"line":1980},[1002,7805,1170],{"class":1030},[1002,7807,7808],{"class":1004,"line":1985},[1002,7809,1051],{"emptyLinePlaceholder":1050},[1002,7811,7812],{"class":1004,"line":1995},[1002,7813,7814],{"class":1008},"\u002F\u002F CareTaker\n",[1002,7816,7817,7819,7822],{"class":1004,"line":2006},[1002,7818,2363],{"class":1015},[1002,7820,7821],{"class":1026}," LocalStorage",[1002,7823,1457],{"class":1030},[1002,7825,7826,7828],{"class":1004,"line":2011},[1002,7827,2373],{"class":1015},[1002,7829,3025],{"class":1030},[1002,7831,7832,7834,7837,7839],{"class":1004,"line":2017},[1002,7833,2387],{"class":1019},[1002,7835,7836],{"class":1030},".mementos ",[1002,7838,2393],{"class":1015},[1002,7840,7217],{"class":1030},[1002,7842,7843],{"class":1004,"line":2022},[1002,7844,1269],{"class":1030},[1002,7846,7847],{"class":1004,"line":2442},[1002,7848,1051],{"emptyLinePlaceholder":1050},[1002,7850,7851,7853,7855,7858,7860,7862],{"class":1004,"line":2466},[1002,7852,5042],{"class":1026},[1002,7854,1031],{"class":1030},[1002,7856,7857],{"class":2378},"key",[1002,7859,1251],{"class":1030},[1002,7861,7602],{"class":2378},[1002,7863,2382],{"class":1030},[1002,7865,7866,7868,7871,7873],{"class":1004,"line":2471},[1002,7867,2387],{"class":1019},[1002,7869,7870],{"class":1030},".mementos[key] ",[1002,7872,2393],{"class":1015},[1002,7874,7748],{"class":1030},[1002,7876,7877],{"class":1004,"line":2476},[1002,7878,1269],{"class":1030},[1002,7880,7881],{"class":1004,"line":2481},[1002,7882,1051],{"emptyLinePlaceholder":1050},[1002,7884,7885,7888,7890,7892],{"class":1004,"line":2491},[1002,7886,7887],{"class":1026}," get",[1002,7889,1031],{"class":1030},[1002,7891,7857],{"class":2378},[1002,7893,2382],{"class":1030},[1002,7895,7896,7898,7900],{"class":1004,"line":2502},[1002,7897,2687],{"class":1015},[1002,7899,2693],{"class":1019},[1002,7901,7902],{"class":1030},".mementos[key];\n",[1002,7904,7905],{"class":1004,"line":2513},[1002,7906,1269],{"class":1030},[1002,7908,7909],{"class":1004,"line":2535},[1002,7910,1170],{"class":1030},[1002,7912,7913],{"class":1004,"line":2557},[1002,7914,1051],{"emptyLinePlaceholder":1050},[1002,7916,7917,7919,7922,7924,7926,7928,7930,7933],{"class":1004,"line":2562},[1002,7918,1016],{"class":1015},[1002,7920,7921],{"class":1019}," john",[1002,7923,1023],{"class":1015},[1002,7925,2690],{"class":1015},[1002,7927,7681],{"class":1026},[1002,7929,1031],{"class":1030},[1002,7931,7932],{"class":1034},"'John Doe'",[1002,7934,1085],{"class":1030},[1002,7936,7937,7939,7941,7943,7945,7947,7949,7952],{"class":1004,"line":2567},[1002,7938,1016],{"class":1015},[1002,7940,7464],{"class":1019},[1002,7942,1023],{"class":1015},[1002,7944,2690],{"class":1015},[1002,7946,7681],{"class":1026},[1002,7948,1031],{"class":1030},[1002,7950,7951],{"class":1034},"'Emily Smith'",[1002,7953,1085],{"class":1030},[1002,7955,7956,7958,7961,7963,7965,7967],{"class":1004,"line":2572},[1002,7957,1016],{"class":1015},[1002,7959,7960],{"class":1019}," localStorage",[1002,7962,1023],{"class":1015},[1002,7964,2690],{"class":1015},[1002,7966,7821],{"class":1026},[1002,7968,1428],{"class":1030},[1002,7970,7971],{"class":1004,"line":2582},[1002,7972,1051],{"emptyLinePlaceholder":1050},[1002,7974,7975],{"class":1004,"line":2594},[1002,7976,7977],{"class":1008},"\u002F\u002F Save state\n",[1002,7979,7980,7983,7986,7988,7990,7993,7996],{"class":1004,"line":2603},[1002,7981,7982],{"class":1030},"localStorage.",[1002,7984,7985],{"class":1026},"add",[1002,7987,1031],{"class":1030},[1002,7989,6211],{"class":1019},[1002,7991,7992],{"class":1030},", john.",[1002,7994,7995],{"class":1026},"hydrate",[1002,7997,3885],{"class":1030},[1002,7999,8000,8002,8004,8006,8008,8011,8013],{"class":1004,"line":2619},[1002,8001,7982],{"class":1030},[1002,8003,7985],{"class":1026},[1002,8005,1031],{"class":1030},[1002,8007,5681],{"class":1019},[1002,8009,8010],{"class":1030},", emily.",[1002,8012,7995],{"class":1026},[1002,8014,3885],{"class":1030},[1002,8016,8017],{"class":1004,"line":2633},[1002,8018,1051],{"emptyLinePlaceholder":1050},[1002,8020,8021],{"class":1004,"line":2641},[1002,8022,8023],{"class":1008},"\u002F\u002F Assign false names\n",[1002,8025,8026,8029,8031,8034],{"class":1004,"line":2655},[1002,8027,8028],{"class":1030},"john.name ",[1002,8030,2393],{"class":1015},[1002,8032,8033],{"class":1034}," 'Michael Knight'",[1002,8035,1407],{"class":1030},[1002,8037,8038,8041,8043,8046],{"class":1004,"line":2667},[1002,8039,8040],{"class":1030},"emily.name ",[1002,8042,2393],{"class":1015},[1002,8044,8045],{"class":1034}," 'Stephanie Mason'",[1002,8047,1407],{"class":1030},[1002,8049,8050],{"class":1004,"line":2674},[1002,8051,1051],{"emptyLinePlaceholder":1050},[1002,8053,8054],{"class":1004,"line":2679},[1002,8055,8056],{"class":1008},"\u002F\u002F Restore original state\n",[1002,8058,8059,8062,8065,8068,8071,8073,8075],{"class":1004,"line":2684},[1002,8060,8061],{"class":1030},"john.",[1002,8063,8064],{"class":1026},"dehydrate",[1002,8066,8067],{"class":1030},"(localStorage.",[1002,8069,8070],{"class":1026},"get",[1002,8072,1031],{"class":1030},[1002,8074,6211],{"class":1019},[1002,8076,5663],{"class":1030},[1002,8078,8079,8081,8083,8085,8087,8089,8091],{"class":1004,"line":2704},[1002,8080,7586],{"class":1030},[1002,8082,8064],{"class":1026},[1002,8084,8067],{"class":1030},[1002,8086,8070],{"class":1026},[1002,8088,1031],{"class":1030},[1002,8090,5681],{"class":1019},[1002,8092,5663],{"class":1030},[1002,8094,8095],{"class":1004,"line":2709},[1002,8096,1051],{"emptyLinePlaceholder":1050},[1002,8098,8099,8101,8103],{"class":1004,"line":2714},[1002,8100,2883],{"class":1030},[1002,8102,2886],{"class":1026},[1002,8104,8105],{"class":1030},"(john.name);\n",[1002,8107,8108,8110,8112],{"class":1004,"line":2719},[1002,8109,2883],{"class":1030},[1002,8111,2886],{"class":1026},[1002,8113,8114],{"class":1030},"(emily.name);\n",[925,8116,8117],{},"We assign John and Emily fake names before restoring them from their mementos. Following the restoration, we confirm that the person objects are back to their original state with valid names.",[953,8119,8121],{"id":8120},"observer","Observer",[925,8123,3295,8124,8128,8129,8133],{},[1107,8125,8126],{},[928,8127,8121],{}," pattern is a behavioral design pattern that allows a number of observer objects to see an event. In another word, the ",[1107,8130,8131],{},[928,8132,8121],{}," pattern offers a subscription model in which objects subscribe to an event and get notified when the event occurs.",[925,8135,8136],{},[963,8137],{"alt":8121,"src":8138},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fobserver.png",[925,8140,8141],{},"The observer pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.",[925,8143,8144],{},"Let’s look at the participating objects individually:",[1530,8146,8147,8169],{},[974,8148,8149,8152],{},[1107,8150,8151],{},"Subject",[1530,8153,8154,8157,8160,8163],{},[974,8155,8156],{},"maintains list of observers. Any number of Observer objects may observe a Subject",[974,8158,8159],{},"implements an interface that lets observer objects subscribe or unsubscribe",[974,8161,8162],{},"sends a notification to its observers when its state changes",[974,8164,8165,8168],{},[941,8166,8167],{},"Event"," class in the example code",[974,8170,8171,8174],{},[1107,8172,8173],{},"Observers",[1530,8175,8176,8179],{},[974,8177,8178],{},"has a function signature that can be invoked when Subject changes (i.e. event occurs)",[974,8180,8181,8184],{},[941,8182,8183],{},"handleClick"," function in the example code",[925,8186,8187,8188,8190,8191,8193],{},"In our example below, the ",[941,8189,8167],{}," class represents the Subject. The ",[941,8192,8183],{}," function is the subscribing Observer. This handler subscribes, unsubscribes, and then subscribes it while events are firing. It gets notified only of events #1 and #3.",[993,8195,8197],{"className":2227,"code":8196,"language":2229,"meta":998,"style":998},"const window = global; \u002F\u002F because we run in Node.js not the browser\n\nclass Event {\n constructor() {\n this.handlers = []; \u002F\u002F observers\n }\n\n subscribe(fn) {\n this.handlers.push(fn);\n }\n\n unsubscribe(fn) {\n this.handlers = this.handlers.filter(function (item) {\n if (item !== fn) {\n return item;\n }\n });\n }\n\n fire(eventDetails, context) {\n const scope = context || window;\n\n this.handlers.forEach(function (item) {\n item.call(scope, eventDetails);\n });\n }\n}\n\nconst handleClick = function (item) {\n console.log('fired: ' + item);\n};\n\nconst event = new Event();\n\nevent.subscribe(handleClick);\nevent.fire('event #1');\nevent.unsubscribe(handleClick);\nevent.fire('event #2');\nevent.subscribe(handleClick);\nevent.fire('event #3');\n",[941,8198,8199,8214,8218,8227,8233,8248,8252,8256,8268,8280,8284,8288,8299,8324,8337,8345,8349,8354,8358,8362,8378,8396,8400,8419,8430,8434,8438,8442,8446,8464,8480,8484,8488,8503,8507,8518,8532,8541,8554,8562],{"__ignoreMap":998},[1002,8200,8201,8203,8206,8208,8211],{"class":1004,"line":1005},[1002,8202,1016],{"class":1015},[1002,8204,8205],{"class":1019}," window",[1002,8207,1023],{"class":1015},[1002,8209,8210],{"class":1030}," global; ",[1002,8212,8213],{"class":1008},"\u002F\u002F because we run in Node.js not the browser\n",[1002,8215,8216],{"class":1004,"line":1012},[1002,8217,1051],{"emptyLinePlaceholder":1050},[1002,8219,8220,8222,8225],{"class":1004,"line":1047},[1002,8221,2363],{"class":1015},[1002,8223,8224],{"class":1026}," Event",[1002,8226,1457],{"class":1030},[1002,8228,8229,8231],{"class":1004,"line":1054},[1002,8230,2373],{"class":1015},[1002,8232,3025],{"class":1030},[1002,8234,8235,8237,8240,8242,8245],{"class":1004,"line":1060},[1002,8236,2387],{"class":1019},[1002,8238,8239],{"class":1030},".handlers ",[1002,8241,2393],{"class":1015},[1002,8243,8244],{"class":1030}," []; ",[1002,8246,8247],{"class":1008},"\u002F\u002F observers\n",[1002,8249,8250],{"class":1004,"line":1272},[1002,8251,1269],{"class":1030},[1002,8253,8254],{"class":1004,"line":1348},[1002,8255,1051],{"emptyLinePlaceholder":1050},[1002,8257,8258,8261,8263,8266],{"class":1004,"line":1354},[1002,8259,8260],{"class":1026}," subscribe",[1002,8262,1031],{"class":1030},[1002,8264,8265],{"class":2378},"fn",[1002,8267,2382],{"class":1030},[1002,8269,8270,8272,8275,8277],{"class":1004,"line":1360},[1002,8271,2387],{"class":1019},[1002,8273,8274],{"class":1030},".handlers.",[1002,8276,4974],{"class":1026},[1002,8278,8279],{"class":1030},"(fn);\n",[1002,8281,8282],{"class":1004,"line":1366},[1002,8283,1269],{"class":1030},[1002,8285,8286],{"class":1004,"line":1946},[1002,8287,1051],{"emptyLinePlaceholder":1050},[1002,8289,8290,8293,8295,8297],{"class":1004,"line":1956},[1002,8291,8292],{"class":1026}," unsubscribe",[1002,8294,1031],{"class":1030},[1002,8296,8265],{"class":2378},[1002,8298,2382],{"class":1030},[1002,8300,8301,8303,8305,8307,8309,8311,8314,8316,8318,8320,8322],{"class":1004,"line":1961},[1002,8302,2387],{"class":1019},[1002,8304,8239],{"class":1030},[1002,8306,2393],{"class":1015},[1002,8308,2693],{"class":1019},[1002,8310,8274],{"class":1030},[1002,8312,8313],{"class":1026},"filter",[1002,8315,1031],{"class":1030},[1002,8317,6965],{"class":1015},[1002,8319,6513],{"class":1030},[1002,8321,6970],{"class":2378},[1002,8323,2382],{"class":1030},[1002,8325,8326,8329,8332,8334],{"class":1004,"line":1971},[1002,8327,8328],{"class":1015}," if",[1002,8330,8331],{"class":1030}," (item ",[1002,8333,7357],{"class":1015},[1002,8335,8336],{"class":1030}," fn) {\n",[1002,8338,8339,8342],{"class":1004,"line":1980},[1002,8340,8341],{"class":1015}," return",[1002,8343,8344],{"class":1030}," item;\n",[1002,8346,8347],{"class":1004,"line":1985},[1002,8348,1351],{"class":1030},[1002,8350,8351],{"class":1004,"line":1995},[1002,8352,8353],{"class":1030}," });\n",[1002,8355,8356],{"class":1004,"line":2006},[1002,8357,1269],{"class":1030},[1002,8359,8360],{"class":1004,"line":2011},[1002,8361,1051],{"emptyLinePlaceholder":1050},[1002,8363,8364,8367,8369,8372,8374,8376],{"class":1004,"line":2017},[1002,8365,8366],{"class":1026}," fire",[1002,8368,1031],{"class":1030},[1002,8370,8371],{"class":2378},"eventDetails",[1002,8373,1251],{"class":1030},[1002,8375,6028],{"class":2378},[1002,8377,2382],{"class":1030},[1002,8379,8380,8382,8385,8387,8390,8393],{"class":1004,"line":2022},[1002,8381,4348],{"class":1015},[1002,8383,8384],{"class":1019}," scope",[1002,8386,1023],{"class":1015},[1002,8388,8389],{"class":1030}," context ",[1002,8391,8392],{"class":1015},"||",[1002,8394,8395],{"class":1030}," window;\n",[1002,8397,8398],{"class":1004,"line":2442},[1002,8399,1051],{"emptyLinePlaceholder":1050},[1002,8401,8402,8404,8406,8409,8411,8413,8415,8417],{"class":1004,"line":2466},[1002,8403,2387],{"class":1019},[1002,8405,8274],{"class":1030},[1002,8407,8408],{"class":1026},"forEach",[1002,8410,1031],{"class":1030},[1002,8412,6965],{"class":1015},[1002,8414,6513],{"class":1030},[1002,8416,6970],{"class":2378},[1002,8418,2382],{"class":1030},[1002,8420,8421,8424,8427],{"class":1004,"line":2471},[1002,8422,8423],{"class":1030}," item.",[1002,8425,8426],{"class":1026},"call",[1002,8428,8429],{"class":1030},"(scope, eventDetails);\n",[1002,8431,8432],{"class":1004,"line":2476},[1002,8433,8353],{"class":1030},[1002,8435,8436],{"class":1004,"line":2481},[1002,8437,1269],{"class":1030},[1002,8439,8440],{"class":1004,"line":2491},[1002,8441,1170],{"class":1030},[1002,8443,8444],{"class":1004,"line":2502},[1002,8445,1051],{"emptyLinePlaceholder":1050},[1002,8447,8448,8450,8453,8455,8458,8460,8462],{"class":1004,"line":2513},[1002,8449,1016],{"class":1015},[1002,8451,8452],{"class":1026}," handleClick",[1002,8454,1023],{"class":1015},[1002,8456,8457],{"class":1015}," function",[1002,8459,6513],{"class":1030},[1002,8461,6970],{"class":2378},[1002,8463,2382],{"class":1030},[1002,8465,8466,8468,8470,8472,8475,8477],{"class":1004,"line":2535},[1002,8467,6977],{"class":1030},[1002,8469,2886],{"class":1026},[1002,8471,1031],{"class":1030},[1002,8473,8474],{"class":1034},"'fired: '",[1002,8476,6583],{"class":1015},[1002,8478,8479],{"class":1030}," item);\n",[1002,8481,8482],{"class":1004,"line":2557},[1002,8483,1517],{"class":1030},[1002,8485,8486],{"class":1004,"line":2562},[1002,8487,1051],{"emptyLinePlaceholder":1050},[1002,8489,8490,8492,8495,8497,8499,8501],{"class":1004,"line":2567},[1002,8491,1016],{"class":1015},[1002,8493,8494],{"class":1019}," event",[1002,8496,1023],{"class":1015},[1002,8498,2690],{"class":1015},[1002,8500,8224],{"class":1026},[1002,8502,1428],{"class":1030},[1002,8504,8505],{"class":1004,"line":2572},[1002,8506,1051],{"emptyLinePlaceholder":1050},[1002,8508,8509,8512,8515],{"class":1004,"line":2582},[1002,8510,8511],{"class":1030},"event.",[1002,8513,8514],{"class":1026},"subscribe",[1002,8516,8517],{"class":1030},"(handleClick);\n",[1002,8519,8520,8522,8525,8527,8530],{"class":1004,"line":2594},[1002,8521,8511],{"class":1030},[1002,8523,8524],{"class":1026},"fire",[1002,8526,1031],{"class":1030},[1002,8528,8529],{"class":1034},"'event #1'",[1002,8531,1085],{"class":1030},[1002,8533,8534,8536,8539],{"class":1004,"line":2603},[1002,8535,8511],{"class":1030},[1002,8537,8538],{"class":1026},"unsubscribe",[1002,8540,8517],{"class":1030},[1002,8542,8543,8545,8547,8549,8552],{"class":1004,"line":2619},[1002,8544,8511],{"class":1030},[1002,8546,8524],{"class":1026},[1002,8548,1031],{"class":1030},[1002,8550,8551],{"class":1034},"'event #2'",[1002,8553,1085],{"class":1030},[1002,8555,8556,8558,8560],{"class":1004,"line":2633},[1002,8557,8511],{"class":1030},[1002,8559,8514],{"class":1026},[1002,8561,8517],{"class":1030},[1002,8563,8564,8566,8568,8570,8573],{"class":1004,"line":2641},[1002,8565,8511],{"class":1030},[1002,8567,8524],{"class":1026},[1002,8569,1031],{"class":1030},[1002,8571,8572],{"class":1034},"'event #3'",[1002,8574,1085],{"class":1030},[925,8576,8577,8578,8580,8581,8583,8584,8586],{},"Notice that the ",[941,8579,8524],{}," method accepts two arguments. The first one has details about the event and the second one is the context, that is, the ",[941,8582,3455],{}," value for when the event handlers are called. If no context is provided ",[941,8585,3455],{}," will be bound to the global object (window).",[953,8588,8590],{"id":8589},"state","State",[925,8592,3898,8593,8597],{},[1107,8594,8595],{},[928,8596,8590],{}," pattern is a behavioral software design pattern that allows an object to alter its behavior when its internal state changes. This pattern is close to the concept of finite-state machines.",[925,8599,8600],{},[963,8601],{"alt":8590,"src":8602},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fstate.png",[925,8604,3295,8605,8609],{},[1107,8606,8607],{},[928,8608,8590],{}," pattern provides state-specific logic to a limited set of objects in which each object represents a particular state.",[925,8611,8612,8613,6620,8616,944,8619,8622],{},"Our example is a traffic light with 3 different states: ",[941,8614,8615],{},"Red",[941,8617,8618],{},"Yellow",[941,8620,8621],{},"Green",", each with its own set of rules. The rules go like this: Say the traffic light is Red. After a delay the Red state changes to the Green state. Then, after another delay, the Green state changes to the Yellow state. After a very brief delay, the Yellow state is changed to Red. And on and on.",[993,8624,8626],{"className":2227,"code":8625,"language":2229,"meta":998,"style":998},"class Red {\n constructor(light) {\n this.light = light;\n }\n\n go() {\n console.log('Red -> for 1 minute');\n light.change(new Green(light));\n }\n}\n\nclass Yellow {\n constructor(light) {\n this.light = light;\n }\n\n go() {\n console.log('Yellow -> for 10 seconds');\n light.change(new Red(light));\n }\n}\n\nclass Green {\n constructor(light) {\n this.light = light;\n }\n\n go() {\n console.log('Green -> for 1 minute');\n light.change(new Red(light));\n }\n}\n\nclass TrafficLight {\n constructor() {\n this.count = 0;\n this.currentState = new Red(this);\n }\n\n change(state) {\n \u002F\u002F Limits number of changes\n if (this.count++ >= 10) return;\n this.currentState = state;\n this.currentState.go();\n }\n\n start() {\n this.currentState.go();\n }\n}\n\nconst light = new TrafficLight();\nlight.start();\n",[941,8627,8628,8637,8648,8660,8664,8668,8675,8688,8706,8710,8714,8718,8727,8737,8747,8751,8755,8761,8774,8788,8792,8796,8800,8808,8818,8828,8832,8836,8842,8855,8869,8873,8877,8881,8890,8896,8909,8928,8932,8936,8947,8952,8978,8989,9001,9005,9009,9016,9026,9030,9034,9038,9053],{"__ignoreMap":998},[1002,8629,8630,8632,8635],{"class":1004,"line":1005},[1002,8631,2363],{"class":1015},[1002,8633,8634],{"class":1026}," Red",[1002,8636,1457],{"class":1030},[1002,8638,8639,8641,8643,8646],{"class":1004,"line":1012},[1002,8640,2373],{"class":1015},[1002,8642,1031],{"class":1030},[1002,8644,8645],{"class":2378},"light",[1002,8647,2382],{"class":1030},[1002,8649,8650,8652,8655,8657],{"class":1004,"line":1047},[1002,8651,2387],{"class":1019},[1002,8653,8654],{"class":1030},".light ",[1002,8656,2393],{"class":1015},[1002,8658,8659],{"class":1030}," light;\n",[1002,8661,8662],{"class":1004,"line":1054},[1002,8663,1269],{"class":1030},[1002,8665,8666],{"class":1004,"line":1060},[1002,8667,1051],{"emptyLinePlaceholder":1050},[1002,8669,8670,8673],{"class":1004,"line":1272},[1002,8671,8672],{"class":1026}," go",[1002,8674,3025],{"class":1030},[1002,8676,8677,8679,8681,8683,8686],{"class":1004,"line":1348},[1002,8678,3030],{"class":1030},[1002,8680,2886],{"class":1026},[1002,8682,1031],{"class":1030},[1002,8684,8685],{"class":1034},"'Red -> for 1 minute'",[1002,8687,1085],{"class":1030},[1002,8689,8690,8693,8696,8698,8700,8703],{"class":1004,"line":1354},[1002,8691,8692],{"class":1030}," light.",[1002,8694,8695],{"class":1026},"change",[1002,8697,1031],{"class":1030},[1002,8699,5654],{"class":1015},[1002,8701,8702],{"class":1026}," Green",[1002,8704,8705],{"class":1030},"(light));\n",[1002,8707,8708],{"class":1004,"line":1360},[1002,8709,1269],{"class":1030},[1002,8711,8712],{"class":1004,"line":1366},[1002,8713,1170],{"class":1030},[1002,8715,8716],{"class":1004,"line":1946},[1002,8717,1051],{"emptyLinePlaceholder":1050},[1002,8719,8720,8722,8725],{"class":1004,"line":1956},[1002,8721,2363],{"class":1015},[1002,8723,8724],{"class":1026}," Yellow",[1002,8726,1457],{"class":1030},[1002,8728,8729,8731,8733,8735],{"class":1004,"line":1961},[1002,8730,2373],{"class":1015},[1002,8732,1031],{"class":1030},[1002,8734,8645],{"class":2378},[1002,8736,2382],{"class":1030},[1002,8738,8739,8741,8743,8745],{"class":1004,"line":1971},[1002,8740,2387],{"class":1019},[1002,8742,8654],{"class":1030},[1002,8744,2393],{"class":1015},[1002,8746,8659],{"class":1030},[1002,8748,8749],{"class":1004,"line":1980},[1002,8750,1269],{"class":1030},[1002,8752,8753],{"class":1004,"line":1985},[1002,8754,1051],{"emptyLinePlaceholder":1050},[1002,8756,8757,8759],{"class":1004,"line":1995},[1002,8758,8672],{"class":1026},[1002,8760,3025],{"class":1030},[1002,8762,8763,8765,8767,8769,8772],{"class":1004,"line":2006},[1002,8764,3030],{"class":1030},[1002,8766,2886],{"class":1026},[1002,8768,1031],{"class":1030},[1002,8770,8771],{"class":1034},"'Yellow -> for 10 seconds'",[1002,8773,1085],{"class":1030},[1002,8775,8776,8778,8780,8782,8784,8786],{"class":1004,"line":2011},[1002,8777,8692],{"class":1030},[1002,8779,8695],{"class":1026},[1002,8781,1031],{"class":1030},[1002,8783,5654],{"class":1015},[1002,8785,8634],{"class":1026},[1002,8787,8705],{"class":1030},[1002,8789,8790],{"class":1004,"line":2017},[1002,8791,1269],{"class":1030},[1002,8793,8794],{"class":1004,"line":2022},[1002,8795,1170],{"class":1030},[1002,8797,8798],{"class":1004,"line":2442},[1002,8799,1051],{"emptyLinePlaceholder":1050},[1002,8801,8802,8804,8806],{"class":1004,"line":2466},[1002,8803,2363],{"class":1015},[1002,8805,8702],{"class":1026},[1002,8807,1457],{"class":1030},[1002,8809,8810,8812,8814,8816],{"class":1004,"line":2471},[1002,8811,2373],{"class":1015},[1002,8813,1031],{"class":1030},[1002,8815,8645],{"class":2378},[1002,8817,2382],{"class":1030},[1002,8819,8820,8822,8824,8826],{"class":1004,"line":2476},[1002,8821,2387],{"class":1019},[1002,8823,8654],{"class":1030},[1002,8825,2393],{"class":1015},[1002,8827,8659],{"class":1030},[1002,8829,8830],{"class":1004,"line":2481},[1002,8831,1269],{"class":1030},[1002,8833,8834],{"class":1004,"line":2491},[1002,8835,1051],{"emptyLinePlaceholder":1050},[1002,8837,8838,8840],{"class":1004,"line":2502},[1002,8839,8672],{"class":1026},[1002,8841,3025],{"class":1030},[1002,8843,8844,8846,8848,8850,8853],{"class":1004,"line":2513},[1002,8845,3030],{"class":1030},[1002,8847,2886],{"class":1026},[1002,8849,1031],{"class":1030},[1002,8851,8852],{"class":1034},"'Green -> for 1 minute'",[1002,8854,1085],{"class":1030},[1002,8856,8857,8859,8861,8863,8865,8867],{"class":1004,"line":2535},[1002,8858,8692],{"class":1030},[1002,8860,8695],{"class":1026},[1002,8862,1031],{"class":1030},[1002,8864,5654],{"class":1015},[1002,8866,8634],{"class":1026},[1002,8868,8705],{"class":1030},[1002,8870,8871],{"class":1004,"line":2557},[1002,8872,1269],{"class":1030},[1002,8874,8875],{"class":1004,"line":2562},[1002,8876,1170],{"class":1030},[1002,8878,8879],{"class":1004,"line":2567},[1002,8880,1051],{"emptyLinePlaceholder":1050},[1002,8882,8883,8885,8888],{"class":1004,"line":2572},[1002,8884,2363],{"class":1015},[1002,8886,8887],{"class":1026}," TrafficLight",[1002,8889,1457],{"class":1030},[1002,8891,8892,8894],{"class":1004,"line":2582},[1002,8893,2373],{"class":1015},[1002,8895,3025],{"class":1030},[1002,8897,8898,8900,8903,8905,8907],{"class":1004,"line":2594},[1002,8899,2387],{"class":1019},[1002,8901,8902],{"class":1030},".count ",[1002,8904,2393],{"class":1015},[1002,8906,4910],{"class":1019},[1002,8908,1407],{"class":1030},[1002,8910,8911,8913,8916,8918,8920,8922,8924,8926],{"class":1004,"line":2603},[1002,8912,2387],{"class":1019},[1002,8914,8915],{"class":1030},".currentState ",[1002,8917,2393],{"class":1015},[1002,8919,2690],{"class":1015},[1002,8921,8634],{"class":1026},[1002,8923,1031],{"class":1030},[1002,8925,3455],{"class":1019},[1002,8927,1085],{"class":1030},[1002,8929,8930],{"class":1004,"line":2619},[1002,8931,1269],{"class":1030},[1002,8933,8934],{"class":1004,"line":2633},[1002,8935,1051],{"emptyLinePlaceholder":1050},[1002,8937,8938,8941,8943,8945],{"class":1004,"line":2641},[1002,8939,8940],{"class":1026}," change",[1002,8942,1031],{"class":1030},[1002,8944,8589],{"class":2378},[1002,8946,2382],{"class":1030},[1002,8948,8949],{"class":1004,"line":2655},[1002,8950,8951],{"class":1008}," \u002F\u002F Limits number of changes\n",[1002,8953,8954,8956,8958,8960,8963,8965,8968,8971,8973,8976],{"class":1004,"line":2667},[1002,8955,4368],{"class":1015},[1002,8957,6513],{"class":1030},[1002,8959,3455],{"class":1019},[1002,8961,8962],{"class":1030},".count",[1002,8964,6545],{"class":1015},[1002,8966,8967],{"class":1015}," >=",[1002,8969,8970],{"class":1019}," 10",[1002,8972,5876],{"class":1030},[1002,8974,8975],{"class":1015},"return",[1002,8977,1407],{"class":1030},[1002,8979,8980,8982,8984,8986],{"class":1004,"line":2674},[1002,8981,2387],{"class":1019},[1002,8983,8915],{"class":1030},[1002,8985,2393],{"class":1015},[1002,8987,8988],{"class":1030}," state;\n",[1002,8990,8991,8993,8996,8999],{"class":1004,"line":2679},[1002,8992,2387],{"class":1019},[1002,8994,8995],{"class":1030},".currentState.",[1002,8997,8998],{"class":1026},"go",[1002,9000,1428],{"class":1030},[1002,9002,9003],{"class":1004,"line":2684},[1002,9004,1269],{"class":1030},[1002,9006,9007],{"class":1004,"line":2704},[1002,9008,1051],{"emptyLinePlaceholder":1050},[1002,9010,9011,9014],{"class":1004,"line":2709},[1002,9012,9013],{"class":1026}," start",[1002,9015,3025],{"class":1030},[1002,9017,9018,9020,9022,9024],{"class":1004,"line":2714},[1002,9019,2387],{"class":1019},[1002,9021,8995],{"class":1030},[1002,9023,8998],{"class":1026},[1002,9025,1428],{"class":1030},[1002,9027,9028],{"class":1004,"line":2719},[1002,9029,1269],{"class":1030},[1002,9031,9032],{"class":1004,"line":2735},[1002,9033,1170],{"class":1030},[1002,9035,9036],{"class":1004,"line":2740},[1002,9037,1051],{"emptyLinePlaceholder":1050},[1002,9039,9040,9042,9045,9047,9049,9051],{"class":1004,"line":2759},[1002,9041,1016],{"class":1015},[1002,9043,9044],{"class":1019}," light",[1002,9046,1023],{"class":1015},[1002,9048,2690],{"class":1015},[1002,9050,8887],{"class":1026},[1002,9052,1428],{"class":1030},[1002,9054,9055,9058,9061],{"class":1004,"line":2774},[1002,9056,9057],{"class":1030},"light.",[1002,9059,9060],{"class":1026},"start",[1002,9062,1428],{"class":1030},[925,9064,9065],{},"Two other examples where the State pattern is useful include: elevator logic which moves riders up or down depending on certain complex rules that attempt to minimize wait and ride times, and vending machines that dispense products when a correct combination of coins is entered.",[953,9067,9069],{"id":9068},"strategy","Strategy",[925,9071,3898,9072,9076],{},[1107,9073,9074],{},[928,9075,9069],{}," pattern is a behavioral design pattern that enables selecting an algorithm at runtime. Instead of implementing a single algorithm directly, code receives run-time instructions as to which in a family of algorithms to use.",[925,9078,9079],{},[963,9080],{"alt":9069,"src":9081},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fstrategy.png",[925,9083,3295,9084,9088],{},[1107,9085,9086],{},[928,9087,9069],{}," pattern encapsulates alternative algorithms (or strategies) for a particular task. It allows a method to be swapped out at runtime by any other method (strategy) without the client realizing it. Essentially, Strategy is a group of algorithms that are interchangeable.",[925,9090,9091],{},"In this example, we have a product order that needs to be shipped from a warehouse to a customer. Different shipping companies are evaluated to determine the best price. This can be useful with shopping carts where customers select their shipping preferences and the selected Strategy returns the estimated cost.",[993,9093,9095],{"className":2227,"code":9094,"language":2229,"meta":998,"style":998},"class Shipping {\n constructor() {\n this.company = '';\n }\n\n setStrategy(company) {\n this.company = company;\n }\n\n calculate(pkg) {\n return this.company.calculate(pkg);\n }\n}\n\nclass UPS {\n calculate({ weight }) {\n const basePrice = 15.26;\n const total = basePrice * weight;\n\n return total;\n }\n}\n\nclass USPS {\n calculate({ weight }) {\n const basePrice = 21.21;\n const total = basePrice * weight;\n\n return total;\n }\n}\n\nclass Fedex {\n calculate({ weight }) {\n const basePrice = 17.54;\n const total = basePrice * weight;\n\n return total;\n }\n}\n\nconst package = { from: '82563', to: '10400', weight: 2 };\n\nconst ups = new UPS();\nconst usps = new USPS();\nconst fedex = new Fedex();\n\nconst shipping = new Shipping();\n\nshipping.setStrategy(ups);\nconsole.log('UPS Strategy: $' + shipping.calculate(package));\nshipping.setStrategy(usps);\nconsole.log('USPS Strategy: $' + shipping.calculate(package));\nshipping.setStrategy(fedex);\nconsole.log('Fedex Strategy: $' + shipping.calculate(package));\n",[941,9096,9097,9106,9112,9126,9130,9134,9146,9157,9161,9165,9177,9192,9196,9200,9204,9213,9226,9240,9257,9261,9268,9272,9276,9280,9289,9299,9312,9326,9330,9336,9340,9344,9348,9357,9367,9380,9394,9398,9404,9408,9412,9416,9445,9449,9464,9479,9494,9498,9513,9517,9528,9549,9558,9577,9586],{"__ignoreMap":998},[1002,9098,9099,9101,9104],{"class":1004,"line":1005},[1002,9100,2363],{"class":1015},[1002,9102,9103],{"class":1026}," Shipping",[1002,9105,1457],{"class":1030},[1002,9107,9108,9110],{"class":1004,"line":1012},[1002,9109,2373],{"class":1015},[1002,9111,3025],{"class":1030},[1002,9113,9114,9116,9119,9121,9124],{"class":1004,"line":1047},[1002,9115,2387],{"class":1019},[1002,9117,9118],{"class":1030},".company ",[1002,9120,2393],{"class":1015},[1002,9122,9123],{"class":1034}," ''",[1002,9125,1407],{"class":1030},[1002,9127,9128],{"class":1004,"line":1054},[1002,9129,1269],{"class":1030},[1002,9131,9132],{"class":1004,"line":1060},[1002,9133,1051],{"emptyLinePlaceholder":1050},[1002,9135,9136,9139,9141,9144],{"class":1004,"line":1272},[1002,9137,9138],{"class":1026}," setStrategy",[1002,9140,1031],{"class":1030},[1002,9142,9143],{"class":2378},"company",[1002,9145,2382],{"class":1030},[1002,9147,9148,9150,9152,9154],{"class":1004,"line":1348},[1002,9149,2387],{"class":1019},[1002,9151,9118],{"class":1030},[1002,9153,2393],{"class":1015},[1002,9155,9156],{"class":1030}," company;\n",[1002,9158,9159],{"class":1004,"line":1354},[1002,9160,1269],{"class":1030},[1002,9162,9163],{"class":1004,"line":1360},[1002,9164,1051],{"emptyLinePlaceholder":1050},[1002,9166,9167,9170,9172,9175],{"class":1004,"line":1366},[1002,9168,9169],{"class":1026}," calculate",[1002,9171,1031],{"class":1030},[1002,9173,9174],{"class":2378},"pkg",[1002,9176,2382],{"class":1030},[1002,9178,9179,9181,9183,9186,9189],{"class":1004,"line":1946},[1002,9180,2687],{"class":1015},[1002,9182,2693],{"class":1019},[1002,9184,9185],{"class":1030},".company.",[1002,9187,9188],{"class":1026},"calculate",[1002,9190,9191],{"class":1030},"(pkg);\n",[1002,9193,9194],{"class":1004,"line":1956},[1002,9195,1269],{"class":1030},[1002,9197,9198],{"class":1004,"line":1961},[1002,9199,1170],{"class":1030},[1002,9201,9202],{"class":1004,"line":1971},[1002,9203,1051],{"emptyLinePlaceholder":1050},[1002,9205,9206,9208,9211],{"class":1004,"line":1980},[1002,9207,2363],{"class":1015},[1002,9209,9210],{"class":1026}," UPS",[1002,9212,1457],{"class":1030},[1002,9214,9215,9217,9220,9223],{"class":1004,"line":1985},[1002,9216,9169],{"class":1026},[1002,9218,9219],{"class":1030},"({ ",[1002,9221,9222],{"class":2378},"weight",[1002,9224,9225],{"class":1030}," }) {\n",[1002,9227,9228,9230,9233,9235,9238],{"class":1004,"line":1995},[1002,9229,4348],{"class":1015},[1002,9231,9232],{"class":1019}," basePrice",[1002,9234,1023],{"class":1015},[1002,9236,9237],{"class":1019}," 15.26",[1002,9239,1407],{"class":1030},[1002,9241,9242,9244,9247,9249,9252,9254],{"class":1004,"line":2006},[1002,9243,4348],{"class":1015},[1002,9245,9246],{"class":1019}," total",[1002,9248,1023],{"class":1015},[1002,9250,9251],{"class":1030}," basePrice ",[1002,9253,4703],{"class":1015},[1002,9255,9256],{"class":1030}," weight;\n",[1002,9258,9259],{"class":1004,"line":2011},[1002,9260,1051],{"emptyLinePlaceholder":1050},[1002,9262,9263,9265],{"class":1004,"line":2017},[1002,9264,2687],{"class":1015},[1002,9266,9267],{"class":1030}," total;\n",[1002,9269,9270],{"class":1004,"line":2022},[1002,9271,1269],{"class":1030},[1002,9273,9274],{"class":1004,"line":2442},[1002,9275,1170],{"class":1030},[1002,9277,9278],{"class":1004,"line":2466},[1002,9279,1051],{"emptyLinePlaceholder":1050},[1002,9281,9282,9284,9287],{"class":1004,"line":2471},[1002,9283,2363],{"class":1015},[1002,9285,9286],{"class":1026}," USPS",[1002,9288,1457],{"class":1030},[1002,9290,9291,9293,9295,9297],{"class":1004,"line":2476},[1002,9292,9169],{"class":1026},[1002,9294,9219],{"class":1030},[1002,9296,9222],{"class":2378},[1002,9298,9225],{"class":1030},[1002,9300,9301,9303,9305,9307,9310],{"class":1004,"line":2481},[1002,9302,4348],{"class":1015},[1002,9304,9232],{"class":1019},[1002,9306,1023],{"class":1015},[1002,9308,9309],{"class":1019}," 21.21",[1002,9311,1407],{"class":1030},[1002,9313,9314,9316,9318,9320,9322,9324],{"class":1004,"line":2491},[1002,9315,4348],{"class":1015},[1002,9317,9246],{"class":1019},[1002,9319,1023],{"class":1015},[1002,9321,9251],{"class":1030},[1002,9323,4703],{"class":1015},[1002,9325,9256],{"class":1030},[1002,9327,9328],{"class":1004,"line":2502},[1002,9329,1051],{"emptyLinePlaceholder":1050},[1002,9331,9332,9334],{"class":1004,"line":2513},[1002,9333,2687],{"class":1015},[1002,9335,9267],{"class":1030},[1002,9337,9338],{"class":1004,"line":2535},[1002,9339,1269],{"class":1030},[1002,9341,9342],{"class":1004,"line":2557},[1002,9343,1170],{"class":1030},[1002,9345,9346],{"class":1004,"line":2562},[1002,9347,1051],{"emptyLinePlaceholder":1050},[1002,9349,9350,9352,9355],{"class":1004,"line":2567},[1002,9351,2363],{"class":1015},[1002,9353,9354],{"class":1026}," Fedex",[1002,9356,1457],{"class":1030},[1002,9358,9359,9361,9363,9365],{"class":1004,"line":2572},[1002,9360,9169],{"class":1026},[1002,9362,9219],{"class":1030},[1002,9364,9222],{"class":2378},[1002,9366,9225],{"class":1030},[1002,9368,9369,9371,9373,9375,9378],{"class":1004,"line":2582},[1002,9370,4348],{"class":1015},[1002,9372,9232],{"class":1019},[1002,9374,1023],{"class":1015},[1002,9376,9377],{"class":1019}," 17.54",[1002,9379,1407],{"class":1030},[1002,9381,9382,9384,9386,9388,9390,9392],{"class":1004,"line":2594},[1002,9383,4348],{"class":1015},[1002,9385,9246],{"class":1019},[1002,9387,1023],{"class":1015},[1002,9389,9251],{"class":1030},[1002,9391,4703],{"class":1015},[1002,9393,9256],{"class":1030},[1002,9395,9396],{"class":1004,"line":2603},[1002,9397,1051],{"emptyLinePlaceholder":1050},[1002,9399,9400,9402],{"class":1004,"line":2619},[1002,9401,2687],{"class":1015},[1002,9403,9267],{"class":1030},[1002,9405,9406],{"class":1004,"line":2633},[1002,9407,1269],{"class":1030},[1002,9409,9410],{"class":1004,"line":2641},[1002,9411,1170],{"class":1030},[1002,9413,9414],{"class":1004,"line":2655},[1002,9415,1051],{"emptyLinePlaceholder":1050},[1002,9417,9418,9420,9423,9425,9428,9431,9434,9437,9440,9442],{"class":1004,"line":2667},[1002,9419,1016],{"class":1015},[1002,9421,9422],{"class":1019}," package",[1002,9424,1023],{"class":1015},[1002,9426,9427],{"class":1030}," { from: ",[1002,9429,9430],{"class":1034},"'82563'",[1002,9432,9433],{"class":1030},", to: ",[1002,9435,9436],{"class":1034},"'10400'",[1002,9438,9439],{"class":1030},", weight: ",[1002,9441,5681],{"class":1019},[1002,9443,9444],{"class":1030}," };\n",[1002,9446,9447],{"class":1004,"line":2674},[1002,9448,1051],{"emptyLinePlaceholder":1050},[1002,9450,9451,9453,9456,9458,9460,9462],{"class":1004,"line":2679},[1002,9452,1016],{"class":1015},[1002,9454,9455],{"class":1019}," ups",[1002,9457,1023],{"class":1015},[1002,9459,2690],{"class":1015},[1002,9461,9210],{"class":1026},[1002,9463,1428],{"class":1030},[1002,9465,9466,9468,9471,9473,9475,9477],{"class":1004,"line":2684},[1002,9467,1016],{"class":1015},[1002,9469,9470],{"class":1019}," usps",[1002,9472,1023],{"class":1015},[1002,9474,2690],{"class":1015},[1002,9476,9286],{"class":1026},[1002,9478,1428],{"class":1030},[1002,9480,9481,9483,9486,9488,9490,9492],{"class":1004,"line":2704},[1002,9482,1016],{"class":1015},[1002,9484,9485],{"class":1019}," fedex",[1002,9487,1023],{"class":1015},[1002,9489,2690],{"class":1015},[1002,9491,9354],{"class":1026},[1002,9493,1428],{"class":1030},[1002,9495,9496],{"class":1004,"line":2709},[1002,9497,1051],{"emptyLinePlaceholder":1050},[1002,9499,9500,9502,9505,9507,9509,9511],{"class":1004,"line":2714},[1002,9501,1016],{"class":1015},[1002,9503,9504],{"class":1019}," shipping",[1002,9506,1023],{"class":1015},[1002,9508,2690],{"class":1015},[1002,9510,9103],{"class":1026},[1002,9512,1428],{"class":1030},[1002,9514,9515],{"class":1004,"line":2719},[1002,9516,1051],{"emptyLinePlaceholder":1050},[1002,9518,9519,9522,9525],{"class":1004,"line":2735},[1002,9520,9521],{"class":1030},"shipping.",[1002,9523,9524],{"class":1026},"setStrategy",[1002,9526,9527],{"class":1030},"(ups);\n",[1002,9529,9530,9532,9534,9536,9539,9541,9544,9546],{"class":1004,"line":2740},[1002,9531,2883],{"class":1030},[1002,9533,2886],{"class":1026},[1002,9535,1031],{"class":1030},[1002,9537,9538],{"class":1034},"'UPS Strategy: $'",[1002,9540,6583],{"class":1015},[1002,9542,9543],{"class":1030}," shipping.",[1002,9545,9188],{"class":1026},[1002,9547,9548],{"class":1030},"(package));\n",[1002,9550,9551,9553,9555],{"class":1004,"line":2759},[1002,9552,9521],{"class":1030},[1002,9554,9524],{"class":1026},[1002,9556,9557],{"class":1030},"(usps);\n",[1002,9559,9560,9562,9564,9566,9569,9571,9573,9575],{"class":1004,"line":2774},[1002,9561,2883],{"class":1030},[1002,9563,2886],{"class":1026},[1002,9565,1031],{"class":1030},[1002,9567,9568],{"class":1034},"'USPS Strategy: $'",[1002,9570,6583],{"class":1015},[1002,9572,9543],{"class":1030},[1002,9574,9188],{"class":1026},[1002,9576,9548],{"class":1030},[1002,9578,9579,9581,9583],{"class":1004,"line":2790},[1002,9580,9521],{"class":1030},[1002,9582,9524],{"class":1026},[1002,9584,9585],{"class":1030},"(fedex);\n",[1002,9587,9588,9590,9592,9594,9597,9599,9601,9603],{"class":1004,"line":2801},[1002,9589,2883],{"class":1030},[1002,9591,2886],{"class":1026},[1002,9593,1031],{"class":1030},[1002,9595,9596],{"class":1034},"'Fedex Strategy: $'",[1002,9598,6583],{"class":1015},[1002,9600,9543],{"class":1030},[1002,9602,9188],{"class":1026},[1002,9604,9548],{"class":1030},[925,9606,9607],{},"In JavaScript the Strategy pattern is widely used as a plug-in mechanism when building extensible frameworks.",[953,9609,9611],{"id":9610},"template-method","Template Method",[925,9613,3898,9614,9618],{},[1107,9615,9616],{},[928,9617,9611],{}," is a method in a superclass, usually an abstract superclass, and defines the skeleton of an operation in terms of a number of high-level steps.",[925,9620,9621],{},[963,9622],{"alt":9611,"src":9623},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Ftemplate-method.png",[925,9625,9626],{},"Template Methods are frequently used in libraries or general-purpose frameworks that will be used by other developers. An example is an object that fires a sequence of events in response to an action, for example, a process request. The object generates a 'preprocess' event, a 'process' event and a 'postprocess' event. The developer has the option to adjust the response immediately before the processing, during the processing and immediately after the processing.",[993,9628,9630],{"className":2227,"code":9629,"language":2229,"meta":998,"style":998},"class Database {\n process() {\n this.connect();\n this.select();\n this.disconnect();\n return true;\n }\n}\n\nclass MySQL extends Database {\n constructor() {\n super();\n }\n}\n\nconst mySql = new MySQL();\n\nmySql.connect = function () {\n console.log('MySQL: Connect step');\n};\n\nmySql.select = function () {\n console.log('MySQL: Select step');\n};\n\nmySql.disconnect = function () {\n console.log('MySQL: Disconnect step');\n};\n\nmySql.process();\n",[941,9631,9632,9641,9648,9659,9670,9681,9690,9694,9698,9702,9715,9721,9728,9732,9736,9740,9755,9759,9773,9786,9790,9794,9806,9819,9823,9827,9839,9852,9856,9860],{"__ignoreMap":998},[1002,9633,9634,9636,9639],{"class":1004,"line":1005},[1002,9635,2363],{"class":1015},[1002,9637,9638],{"class":1026}," Database",[1002,9640,1457],{"class":1030},[1002,9642,9643,9646],{"class":1004,"line":1012},[1002,9644,9645],{"class":1026}," process",[1002,9647,3025],{"class":1030},[1002,9649,9650,9652,9654,9657],{"class":1004,"line":1047},[1002,9651,2387],{"class":1019},[1002,9653,948],{"class":1030},[1002,9655,9656],{"class":1026},"connect",[1002,9658,1428],{"class":1030},[1002,9660,9661,9663,9665,9668],{"class":1004,"line":1054},[1002,9662,2387],{"class":1019},[1002,9664,948],{"class":1030},[1002,9666,9667],{"class":1026},"select",[1002,9669,1428],{"class":1030},[1002,9671,9672,9674,9676,9679],{"class":1004,"line":1060},[1002,9673,2387],{"class":1019},[1002,9675,948],{"class":1030},[1002,9677,9678],{"class":1026},"disconnect",[1002,9680,1428],{"class":1030},[1002,9682,9683,9685,9688],{"class":1004,"line":1272},[1002,9684,2687],{"class":1015},[1002,9686,9687],{"class":1019}," true",[1002,9689,1407],{"class":1030},[1002,9691,9692],{"class":1004,"line":1348},[1002,9693,1269],{"class":1030},[1002,9695,9696],{"class":1004,"line":1354},[1002,9697,1170],{"class":1030},[1002,9699,9700],{"class":1004,"line":1360},[1002,9701,1051],{"emptyLinePlaceholder":1050},[1002,9703,9704,9706,9709,9711,9713],{"class":1004,"line":1366},[1002,9705,2363],{"class":1015},[1002,9707,9708],{"class":1026}," MySQL",[1002,9710,3014],{"class":1015},[1002,9712,9638],{"class":1026},[1002,9714,1457],{"class":1030},[1002,9716,9717,9719],{"class":1004,"line":1946},[1002,9718,2373],{"class":1015},[1002,9720,3025],{"class":1030},[1002,9722,9723,9726],{"class":1004,"line":1956},[1002,9724,9725],{"class":1019}," super",[1002,9727,1428],{"class":1030},[1002,9729,9730],{"class":1004,"line":1961},[1002,9731,1269],{"class":1030},[1002,9733,9734],{"class":1004,"line":1971},[1002,9735,1170],{"class":1030},[1002,9737,9738],{"class":1004,"line":1980},[1002,9739,1051],{"emptyLinePlaceholder":1050},[1002,9741,9742,9744,9747,9749,9751,9753],{"class":1004,"line":1985},[1002,9743,1016],{"class":1015},[1002,9745,9746],{"class":1019}," mySql",[1002,9748,1023],{"class":1015},[1002,9750,2690],{"class":1015},[1002,9752,9708],{"class":1026},[1002,9754,1428],{"class":1030},[1002,9756,9757],{"class":1004,"line":1995},[1002,9758,1051],{"emptyLinePlaceholder":1050},[1002,9760,9761,9764,9766,9768,9770],{"class":1004,"line":2006},[1002,9762,9763],{"class":1030},"mySql.",[1002,9765,9656],{"class":1026},[1002,9767,1023],{"class":1015},[1002,9769,8457],{"class":1015},[1002,9771,9772],{"class":1030}," () {\n",[1002,9774,9775,9777,9779,9781,9784],{"class":1004,"line":2011},[1002,9776,6977],{"class":1030},[1002,9778,2886],{"class":1026},[1002,9780,1031],{"class":1030},[1002,9782,9783],{"class":1034},"'MySQL: Connect step'",[1002,9785,1085],{"class":1030},[1002,9787,9788],{"class":1004,"line":2017},[1002,9789,1517],{"class":1030},[1002,9791,9792],{"class":1004,"line":2022},[1002,9793,1051],{"emptyLinePlaceholder":1050},[1002,9795,9796,9798,9800,9802,9804],{"class":1004,"line":2442},[1002,9797,9763],{"class":1030},[1002,9799,9667],{"class":1026},[1002,9801,1023],{"class":1015},[1002,9803,8457],{"class":1015},[1002,9805,9772],{"class":1030},[1002,9807,9808,9810,9812,9814,9817],{"class":1004,"line":2466},[1002,9809,6977],{"class":1030},[1002,9811,2886],{"class":1026},[1002,9813,1031],{"class":1030},[1002,9815,9816],{"class":1034},"'MySQL: Select step'",[1002,9818,1085],{"class":1030},[1002,9820,9821],{"class":1004,"line":2471},[1002,9822,1517],{"class":1030},[1002,9824,9825],{"class":1004,"line":2476},[1002,9826,1051],{"emptyLinePlaceholder":1050},[1002,9828,9829,9831,9833,9835,9837],{"class":1004,"line":2481},[1002,9830,9763],{"class":1030},[1002,9832,9678],{"class":1026},[1002,9834,1023],{"class":1015},[1002,9836,8457],{"class":1015},[1002,9838,9772],{"class":1030},[1002,9840,9841,9843,9845,9847,9850],{"class":1004,"line":2491},[1002,9842,6977],{"class":1030},[1002,9844,2886],{"class":1026},[1002,9846,1031],{"class":1030},[1002,9848,9849],{"class":1034},"'MySQL: Disconnect step'",[1002,9851,1085],{"class":1030},[1002,9853,9854],{"class":1004,"line":2502},[1002,9855,1517],{"class":1030},[1002,9857,9858],{"class":1004,"line":2513},[1002,9859,1051],{"emptyLinePlaceholder":1050},[1002,9861,9862,9864,9867],{"class":1004,"line":2535},[1002,9863,9763],{"class":1030},[1002,9865,9866],{"class":1026},"process",[1002,9868,1428],{"class":1030},[925,9870,9871],{},"The template methods allow the client to change the database (MySQL Server, PostgreSQL, etc.) by adjusting (filling in the blanks) only the template methods. The rest, such as the order of the steps, stays the same for any datastore.",[953,9873,9875],{"id":9874},"visitor","Visitor",[925,9877,3898,9878,9882],{},[1107,9879,9880],{},[928,9881,9875],{}," design pattern is a way of separating an algorithm from an object structure on which it operates. A practical result of this separation is the ability to add new operations to existing object structures without modifying the structures.",[925,9884,9885],{},[963,9886],{"alt":9875,"src":9887},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fvisitor.png",[925,9889,3295,9890,9894],{},[1107,9891,9892],{},[928,9893,9875],{}," pattern defines a new operation to a collection of objects without changing the objects themselves. The new logic resides in a separate object called the Visitor.",[925,9896,9897,9898,9901,9902,944,9905,9908],{},"In this example, three employees are created with the ",[941,9899,9900],{},"Employee"," constructor function. Each is getting a 10% salary raise and 2 more vacation days. Two visitor objects, ",[941,9903,9904],{},"ExtraSalary",[941,9906,9907],{},"ExtraVacation",", make the necessary changes to the employee objects.",[993,9910,9912],{"className":2227,"code":9911,"language":2229,"meta":998,"style":998},"class Employee {\n constructor(name, salary, vacationDays) {\n this.name = name;\n this.salary = salary;\n this.vacationDays = vacationDays;\n }\n\n accept(visitor) {\n visitor.visit(this);\n }\n\n getName() {\n return this.name;\n }\n\n getSalary() {\n return this.salary;\n }\n\n setSalary(salary) {\n this.salary = salary;\n }\n\n getVacationDays() {\n return this.vacationDays;\n }\n\n setVacationDays(days) {\n this.vacationDays = days;\n }\n}\n\nclass Salary {\n visit(employee) {\n employee.setSalary(employee.getSalary() * 10.1);\n }\n}\n\nclass Vacation {\n visit(employee) {\n employee.setVacationDays(employee.getVacationDays() + 2);\n }\n}\n\nconst employees = [\n new Employee('Joe', 100000, 12),\n new Employee('Jane', 200000, 38),\n new Employee('Mark', 150000, 41),\n];\n\nconst visitorSalary = new Salary();\nconst visitorVacation = new Vacation();\n\nfor (let i = 0, len = employees.length; i \u003C len; i++) {\n const employee = employees[i];\n\n employee.accept(visitorSalary);\n employee.accept(visitorVacation);\n\n console.log(\n `emp.getName() earns $${employee.getSalary()} and gets ${employee.getVacationDays()} vacation days`,\n );\n}\n",[941,9913,9914,9923,9943,9953,9965,9977,9981,9985,9996,10010,10014,10018,10025,10034,10038,10042,10049,10058,10062,10066,10077,10087,10091,10095,10102,10111,10115,10119,10131,10142,10146,10150,10154,10163,10175,10199,10203,10207,10211,10220,10230,10251,10255,10259,10263,10275,10299,10321,10344,10348,10352,10367,10382,10386,10419,10432,10436,10447,10456,10460,10469,10499,10504],{"__ignoreMap":998},[1002,9915,9916,9918,9921],{"class":1004,"line":1005},[1002,9917,2363],{"class":1015},[1002,9919,9920],{"class":1026}," Employee",[1002,9922,1457],{"class":1030},[1002,9924,9925,9927,9929,9931,9933,9936,9938,9941],{"class":1004,"line":1012},[1002,9926,2373],{"class":1015},[1002,9928,1031],{"class":1030},[1002,9930,5911],{"class":2378},[1002,9932,1251],{"class":1030},[1002,9934,9935],{"class":2378},"salary",[1002,9937,1251],{"class":1030},[1002,9939,9940],{"class":2378},"vacationDays",[1002,9942,2382],{"class":1030},[1002,9944,9945,9947,9949,9951],{"class":1004,"line":1047},[1002,9946,2387],{"class":1019},[1002,9948,5945],{"class":1030},[1002,9950,2393],{"class":1015},[1002,9952,5950],{"class":1030},[1002,9954,9955,9957,9960,9962],{"class":1004,"line":1054},[1002,9956,2387],{"class":1019},[1002,9958,9959],{"class":1030},".salary ",[1002,9961,2393],{"class":1015},[1002,9963,9964],{"class":1030}," salary;\n",[1002,9966,9967,9969,9972,9974],{"class":1004,"line":1060},[1002,9968,2387],{"class":1019},[1002,9970,9971],{"class":1030},".vacationDays ",[1002,9973,2393],{"class":1015},[1002,9975,9976],{"class":1030}," vacationDays;\n",[1002,9978,9979],{"class":1004,"line":1272},[1002,9980,1269],{"class":1030},[1002,9982,9983],{"class":1004,"line":1348},[1002,9984,1051],{"emptyLinePlaceholder":1050},[1002,9986,9987,9990,9992,9994],{"class":1004,"line":1354},[1002,9988,9989],{"class":1026}," accept",[1002,9991,1031],{"class":1030},[1002,9993,9874],{"class":2378},[1002,9995,2382],{"class":1030},[1002,9997,9998,10001,10004,10006,10008],{"class":1004,"line":1360},[1002,9999,10000],{"class":1030}," visitor.",[1002,10002,10003],{"class":1026},"visit",[1002,10005,1031],{"class":1030},[1002,10007,3455],{"class":1019},[1002,10009,1085],{"class":1030},[1002,10011,10012],{"class":1004,"line":1366},[1002,10013,1269],{"class":1030},[1002,10015,10016],{"class":1004,"line":1946},[1002,10017,1051],{"emptyLinePlaceholder":1050},[1002,10019,10020,10023],{"class":1004,"line":1956},[1002,10021,10022],{"class":1026}," getName",[1002,10024,3025],{"class":1030},[1002,10026,10027,10029,10031],{"class":1004,"line":1961},[1002,10028,2687],{"class":1015},[1002,10030,2693],{"class":1019},[1002,10032,10033],{"class":1030},".name;\n",[1002,10035,10036],{"class":1004,"line":1971},[1002,10037,1269],{"class":1030},[1002,10039,10040],{"class":1004,"line":1980},[1002,10041,1051],{"emptyLinePlaceholder":1050},[1002,10043,10044,10047],{"class":1004,"line":1985},[1002,10045,10046],{"class":1026}," getSalary",[1002,10048,3025],{"class":1030},[1002,10050,10051,10053,10055],{"class":1004,"line":1995},[1002,10052,2687],{"class":1015},[1002,10054,2693],{"class":1019},[1002,10056,10057],{"class":1030},".salary;\n",[1002,10059,10060],{"class":1004,"line":2006},[1002,10061,1269],{"class":1030},[1002,10063,10064],{"class":1004,"line":2011},[1002,10065,1051],{"emptyLinePlaceholder":1050},[1002,10067,10068,10071,10073,10075],{"class":1004,"line":2017},[1002,10069,10070],{"class":1026}," setSalary",[1002,10072,1031],{"class":1030},[1002,10074,9935],{"class":2378},[1002,10076,2382],{"class":1030},[1002,10078,10079,10081,10083,10085],{"class":1004,"line":2022},[1002,10080,2387],{"class":1019},[1002,10082,9959],{"class":1030},[1002,10084,2393],{"class":1015},[1002,10086,9964],{"class":1030},[1002,10088,10089],{"class":1004,"line":2442},[1002,10090,1269],{"class":1030},[1002,10092,10093],{"class":1004,"line":2466},[1002,10094,1051],{"emptyLinePlaceholder":1050},[1002,10096,10097,10100],{"class":1004,"line":2471},[1002,10098,10099],{"class":1026}," getVacationDays",[1002,10101,3025],{"class":1030},[1002,10103,10104,10106,10108],{"class":1004,"line":2476},[1002,10105,2687],{"class":1015},[1002,10107,2693],{"class":1019},[1002,10109,10110],{"class":1030},".vacationDays;\n",[1002,10112,10113],{"class":1004,"line":2481},[1002,10114,1269],{"class":1030},[1002,10116,10117],{"class":1004,"line":2491},[1002,10118,1051],{"emptyLinePlaceholder":1050},[1002,10120,10121,10124,10126,10129],{"class":1004,"line":2502},[1002,10122,10123],{"class":1026}," setVacationDays",[1002,10125,1031],{"class":1030},[1002,10127,10128],{"class":2378},"days",[1002,10130,2382],{"class":1030},[1002,10132,10133,10135,10137,10139],{"class":1004,"line":2513},[1002,10134,2387],{"class":1019},[1002,10136,9971],{"class":1030},[1002,10138,2393],{"class":1015},[1002,10140,10141],{"class":1030}," days;\n",[1002,10143,10144],{"class":1004,"line":2535},[1002,10145,1269],{"class":1030},[1002,10147,10148],{"class":1004,"line":2557},[1002,10149,1170],{"class":1030},[1002,10151,10152],{"class":1004,"line":2562},[1002,10153,1051],{"emptyLinePlaceholder":1050},[1002,10155,10156,10158,10161],{"class":1004,"line":2567},[1002,10157,2363],{"class":1015},[1002,10159,10160],{"class":1026}," Salary",[1002,10162,1457],{"class":1030},[1002,10164,10165,10168,10170,10173],{"class":1004,"line":2572},[1002,10166,10167],{"class":1026}," visit",[1002,10169,1031],{"class":1030},[1002,10171,10172],{"class":2378},"employee",[1002,10174,2382],{"class":1030},[1002,10176,10177,10180,10183,10186,10189,10192,10194,10197],{"class":1004,"line":2582},[1002,10178,10179],{"class":1030}," employee.",[1002,10181,10182],{"class":1026},"setSalary",[1002,10184,10185],{"class":1030},"(employee.",[1002,10187,10188],{"class":1026},"getSalary",[1002,10190,10191],{"class":1030},"() ",[1002,10193,4703],{"class":1015},[1002,10195,10196],{"class":1019}," 10.1",[1002,10198,1085],{"class":1030},[1002,10200,10201],{"class":1004,"line":2594},[1002,10202,1269],{"class":1030},[1002,10204,10205],{"class":1004,"line":2603},[1002,10206,1170],{"class":1030},[1002,10208,10209],{"class":1004,"line":2619},[1002,10210,1051],{"emptyLinePlaceholder":1050},[1002,10212,10213,10215,10218],{"class":1004,"line":2633},[1002,10214,2363],{"class":1015},[1002,10216,10217],{"class":1026}," Vacation",[1002,10219,1457],{"class":1030},[1002,10221,10222,10224,10226,10228],{"class":1004,"line":2641},[1002,10223,10167],{"class":1026},[1002,10225,1031],{"class":1030},[1002,10227,10172],{"class":2378},[1002,10229,2382],{"class":1030},[1002,10231,10232,10234,10237,10239,10242,10244,10246,10249],{"class":1004,"line":2655},[1002,10233,10179],{"class":1030},[1002,10235,10236],{"class":1026},"setVacationDays",[1002,10238,10185],{"class":1030},[1002,10240,10241],{"class":1026},"getVacationDays",[1002,10243,10191],{"class":1030},[1002,10245,5064],{"class":1015},[1002,10247,10248],{"class":1019}," 2",[1002,10250,1085],{"class":1030},[1002,10252,10253],{"class":1004,"line":2667},[1002,10254,1269],{"class":1030},[1002,10256,10257],{"class":1004,"line":2674},[1002,10258,1170],{"class":1030},[1002,10260,10261],{"class":1004,"line":2679},[1002,10262,1051],{"emptyLinePlaceholder":1050},[1002,10264,10265,10267,10270,10272],{"class":1004,"line":2684},[1002,10266,1016],{"class":1015},[1002,10268,10269],{"class":1019}," employees",[1002,10271,1023],{"class":1015},[1002,10273,10274],{"class":1030}," [\n",[1002,10276,10277,10280,10282,10284,10287,10289,10292,10294,10297],{"class":1004,"line":2704},[1002,10278,10279],{"class":1015}," new",[1002,10281,9920],{"class":1026},[1002,10283,1031],{"class":1030},[1002,10285,10286],{"class":1034},"'Joe'",[1002,10288,1251],{"class":1030},[1002,10290,10291],{"class":1019},"100000",[1002,10293,1251],{"class":1030},[1002,10295,10296],{"class":1019},"12",[1002,10298,1257],{"class":1030},[1002,10300,10301,10303,10305,10307,10309,10311,10314,10316,10319],{"class":1004,"line":2709},[1002,10302,10279],{"class":1015},[1002,10304,9920],{"class":1026},[1002,10306,1031],{"class":1030},[1002,10308,7435],{"class":1034},[1002,10310,1251],{"class":1030},[1002,10312,10313],{"class":1019},"200000",[1002,10315,1251],{"class":1030},[1002,10317,10318],{"class":1019},"38",[1002,10320,1257],{"class":1030},[1002,10322,10323,10325,10327,10329,10332,10334,10337,10339,10342],{"class":1004,"line":2714},[1002,10324,10279],{"class":1015},[1002,10326,9920],{"class":1026},[1002,10328,1031],{"class":1030},[1002,10330,10331],{"class":1034},"'Mark'",[1002,10333,1251],{"class":1030},[1002,10335,10336],{"class":1019},"150000",[1002,10338,1251],{"class":1030},[1002,10340,10341],{"class":1019},"41",[1002,10343,1257],{"class":1030},[1002,10345,10346],{"class":1004,"line":2719},[1002,10347,6754],{"class":1030},[1002,10349,10350],{"class":1004,"line":2735},[1002,10351,1051],{"emptyLinePlaceholder":1050},[1002,10353,10354,10356,10359,10361,10363,10365],{"class":1004,"line":2740},[1002,10355,1016],{"class":1015},[1002,10357,10358],{"class":1019}," visitorSalary",[1002,10360,1023],{"class":1015},[1002,10362,2690],{"class":1015},[1002,10364,10160],{"class":1026},[1002,10366,1428],{"class":1030},[1002,10368,10369,10371,10374,10376,10378,10380],{"class":1004,"line":2759},[1002,10370,1016],{"class":1015},[1002,10372,10373],{"class":1019}," visitorVacation",[1002,10375,1023],{"class":1015},[1002,10377,2690],{"class":1015},[1002,10379,10217],{"class":1026},[1002,10381,1428],{"class":1030},[1002,10383,10384],{"class":1004,"line":2774},[1002,10385,1051],{"emptyLinePlaceholder":1050},[1002,10387,10388,10390,10392,10394,10396,10398,10400,10402,10404,10407,10409,10411,10413,10415,10417],{"class":1004,"line":2790},[1002,10389,6510],{"class":1015},[1002,10391,6513],{"class":1030},[1002,10393,6516],{"class":1015},[1002,10395,6519],{"class":1030},[1002,10397,2393],{"class":1015},[1002,10399,4910],{"class":1019},[1002,10401,6526],{"class":1030},[1002,10403,2393],{"class":1015},[1002,10405,10406],{"class":1030}," employees.",[1002,10408,5873],{"class":1019},[1002,10410,6536],{"class":1030},[1002,10412,6539],{"class":1015},[1002,10414,6542],{"class":1030},[1002,10416,6545],{"class":1015},[1002,10418,2382],{"class":1030},[1002,10420,10421,10424,10427,10429],{"class":1004,"line":2801},[1002,10422,10423],{"class":1015}," const",[1002,10425,10426],{"class":1019}," employee",[1002,10428,1023],{"class":1015},[1002,10430,10431],{"class":1030}," employees[i];\n",[1002,10433,10434],{"class":1004,"line":2807},[1002,10435,1051],{"emptyLinePlaceholder":1050},[1002,10437,10438,10441,10444],{"class":1004,"line":2812},[1002,10439,10440],{"class":1030}," employee.",[1002,10442,10443],{"class":1026},"accept",[1002,10445,10446],{"class":1030},"(visitorSalary);\n",[1002,10448,10449,10451,10453],{"class":1004,"line":2828},[1002,10450,10440],{"class":1030},[1002,10452,10443],{"class":1026},[1002,10454,10455],{"class":1030},"(visitorVacation);\n",[1002,10457,10458],{"class":1004,"line":2841},[1002,10459,1051],{"emptyLinePlaceholder":1050},[1002,10461,10462,10464,10466],{"class":1004,"line":2854},[1002,10463,6977],{"class":1030},[1002,10465,2886],{"class":1026},[1002,10467,10468],{"class":1030},"(\n",[1002,10470,10471,10474,10476,10478,10480,10483,10486,10488,10490,10492,10494,10497],{"class":1004,"line":2864},[1002,10472,10473],{"class":1034}," `emp.getName() earns $${",[1002,10475,10172],{"class":1030},[1002,10477,948],{"class":1034},[1002,10479,10188],{"class":1026},[1002,10481,10482],{"class":1034},"()",[1002,10484,10485],{"class":1034},"} and gets ${",[1002,10487,10172],{"class":1030},[1002,10489,948],{"class":1034},[1002,10491,10241],{"class":1026},[1002,10493,10482],{"class":1034},[1002,10495,10496],{"class":1034},"} vacation days`",[1002,10498,1143],{"class":1030},[1002,10500,10501],{"class":1004,"line":2869},[1002,10502,10503],{"class":1030}," );\n",[1002,10505,10506],{"class":1004,"line":2874},[1002,10507,1170],{"class":1030},[953,10509,10511],{"id":10510},"structural-design-patterns","Structural Design Patterns",[1655,10513,10515],{"id":10514},"adapter","Adapter",[925,10517,3898,10518,10522],{},[1107,10519,10520],{},[928,10521,10515],{}," Pattern is a structural design pattern that allows the interface of an existing class to be used as another interface. It is often used to make existing classes work with others without modifying their source code.",[925,10524,10525],{},[963,10526],{"alt":10515,"src":10527},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fadapter.png",[925,10529,3295,10530,10534],{},[1107,10531,10532],{},[928,10533,10515],{}," pattern translates one interface (an object‘s properties and methods) to another. Adapters allow programming components to work together that otherwise wouldn't because of mismatched interfaces. The Adapter pattern is also referred to as the Wrapper Pattern.",[993,10536,10538],{"className":2227,"code":10537,"language":2229,"meta":998,"style":998},"\u002F\u002F old interface\nclass Shipping {\n request(zipStart, zipEnd, weight) {\n const baseCost = 24.38;\n return baseCost * weight;\n }\n}\n\n\u002F\u002F new interface\nclass AdvancedShipping {\n login(credentials) {\n this.credentials = credentials;\n }\n\n setStart(start) {\n this.start = start;\n }\n\n setDestination(destination) {\n this.destination = destination;\n }\n\n calculate(weight) {\n const baseCost = 22.49;\n return baseCost * weight;\n }\n}\n\n\u002F\u002F adapter interface\nclass ShippingAdapter {\n constructor(credentials) {\n this.credentials = credentials;\n const shipping = new AdvancedShipping();\n\n shipping.login(credentials);\n\n return {\n request: function (zipStart, zipEnd, weight) {\n shipping.setStart(zipStart);\n shipping.setDestination(zipEnd);\n return shipping.calculate(weight);\n },\n };\n }\n}\n\nconst shipping = new Shipping();\nconst credentials = { token: '49ab1-7re8' };\nconst adapter = new ShippingAdapter(credentials);\n\n\u002F\u002F original shipping object and interface\nlet cost = shipping.request('89801', '10210', 2);\nconsole.log('Old cost: $' + cost);\n\n\u002F\u002F new shipping object with adapted interface\ncost = adapter.request('89801', '10210', 2);\n\nconsole.log('New cost: $' + cost);\n",[941,10539,10540,10545,10553,10573,10587,10598,10602,10606,10610,10615,10624,10636,10648,10652,10656,10667,10679,10683,10687,10699,10711,10715,10719,10729,10742,10752,10756,10760,10764,10769,10778,10788,10798,10812,10816,10827,10831,10837,10860,10871,10881,10892,10896,10901,10905,10909,10913,10927,10944,10959,10963,10968,10997,11013,11017,11022,11048,11052],{"__ignoreMap":998},[1002,10541,10542],{"class":1004,"line":1005},[1002,10543,10544],{"class":1008},"\u002F\u002F old interface\n",[1002,10546,10547,10549,10551],{"class":1004,"line":1012},[1002,10548,2363],{"class":1015},[1002,10550,9103],{"class":1026},[1002,10552,1457],{"class":1030},[1002,10554,10555,10557,10559,10562,10564,10567,10569,10571],{"class":1004,"line":1047},[1002,10556,4654],{"class":1026},[1002,10558,1031],{"class":1030},[1002,10560,10561],{"class":2378},"zipStart",[1002,10563,1251],{"class":1030},[1002,10565,10566],{"class":2378},"zipEnd",[1002,10568,1251],{"class":1030},[1002,10570,9222],{"class":2378},[1002,10572,2382],{"class":1030},[1002,10574,10575,10577,10580,10582,10585],{"class":1004,"line":1054},[1002,10576,4348],{"class":1015},[1002,10578,10579],{"class":1019}," baseCost",[1002,10581,1023],{"class":1015},[1002,10583,10584],{"class":1019}," 24.38",[1002,10586,1407],{"class":1030},[1002,10588,10589,10591,10594,10596],{"class":1004,"line":1060},[1002,10590,2687],{"class":1015},[1002,10592,10593],{"class":1030}," baseCost ",[1002,10595,4703],{"class":1015},[1002,10597,9256],{"class":1030},[1002,10599,10600],{"class":1004,"line":1272},[1002,10601,1269],{"class":1030},[1002,10603,10604],{"class":1004,"line":1348},[1002,10605,1170],{"class":1030},[1002,10607,10608],{"class":1004,"line":1354},[1002,10609,1051],{"emptyLinePlaceholder":1050},[1002,10611,10612],{"class":1004,"line":1360},[1002,10613,10614],{"class":1008},"\u002F\u002F new interface\n",[1002,10616,10617,10619,10622],{"class":1004,"line":1366},[1002,10618,2363],{"class":1015},[1002,10620,10621],{"class":1026}," AdvancedShipping",[1002,10623,1457],{"class":1030},[1002,10625,10626,10629,10631,10634],{"class":1004,"line":1946},[1002,10627,10628],{"class":1026}," login",[1002,10630,1031],{"class":1030},[1002,10632,10633],{"class":2378},"credentials",[1002,10635,2382],{"class":1030},[1002,10637,10638,10640,10643,10645],{"class":1004,"line":1956},[1002,10639,2387],{"class":1019},[1002,10641,10642],{"class":1030},".credentials ",[1002,10644,2393],{"class":1015},[1002,10646,10647],{"class":1030}," credentials;\n",[1002,10649,10650],{"class":1004,"line":1961},[1002,10651,1269],{"class":1030},[1002,10653,10654],{"class":1004,"line":1971},[1002,10655,1051],{"emptyLinePlaceholder":1050},[1002,10657,10658,10661,10663,10665],{"class":1004,"line":1980},[1002,10659,10660],{"class":1026}," setStart",[1002,10662,1031],{"class":1030},[1002,10664,9060],{"class":2378},[1002,10666,2382],{"class":1030},[1002,10668,10669,10671,10674,10676],{"class":1004,"line":1985},[1002,10670,2387],{"class":1019},[1002,10672,10673],{"class":1030},".start ",[1002,10675,2393],{"class":1015},[1002,10677,10678],{"class":1030}," start;\n",[1002,10680,10681],{"class":1004,"line":1995},[1002,10682,1269],{"class":1030},[1002,10684,10685],{"class":1004,"line":2006},[1002,10686,1051],{"emptyLinePlaceholder":1050},[1002,10688,10689,10692,10694,10697],{"class":1004,"line":2011},[1002,10690,10691],{"class":1026}," setDestination",[1002,10693,1031],{"class":1030},[1002,10695,10696],{"class":2378},"destination",[1002,10698,2382],{"class":1030},[1002,10700,10701,10703,10706,10708],{"class":1004,"line":2017},[1002,10702,2387],{"class":1019},[1002,10704,10705],{"class":1030},".destination ",[1002,10707,2393],{"class":1015},[1002,10709,10710],{"class":1030}," destination;\n",[1002,10712,10713],{"class":1004,"line":2022},[1002,10714,1269],{"class":1030},[1002,10716,10717],{"class":1004,"line":2442},[1002,10718,1051],{"emptyLinePlaceholder":1050},[1002,10720,10721,10723,10725,10727],{"class":1004,"line":2466},[1002,10722,9169],{"class":1026},[1002,10724,1031],{"class":1030},[1002,10726,9222],{"class":2378},[1002,10728,2382],{"class":1030},[1002,10730,10731,10733,10735,10737,10740],{"class":1004,"line":2471},[1002,10732,4348],{"class":1015},[1002,10734,10579],{"class":1019},[1002,10736,1023],{"class":1015},[1002,10738,10739],{"class":1019}," 22.49",[1002,10741,1407],{"class":1030},[1002,10743,10744,10746,10748,10750],{"class":1004,"line":2476},[1002,10745,2687],{"class":1015},[1002,10747,10593],{"class":1030},[1002,10749,4703],{"class":1015},[1002,10751,9256],{"class":1030},[1002,10753,10754],{"class":1004,"line":2481},[1002,10755,1269],{"class":1030},[1002,10757,10758],{"class":1004,"line":2491},[1002,10759,1170],{"class":1030},[1002,10761,10762],{"class":1004,"line":2502},[1002,10763,1051],{"emptyLinePlaceholder":1050},[1002,10765,10766],{"class":1004,"line":2513},[1002,10767,10768],{"class":1008},"\u002F\u002F adapter interface\n",[1002,10770,10771,10773,10776],{"class":1004,"line":2535},[1002,10772,2363],{"class":1015},[1002,10774,10775],{"class":1026}," ShippingAdapter",[1002,10777,1457],{"class":1030},[1002,10779,10780,10782,10784,10786],{"class":1004,"line":2557},[1002,10781,2373],{"class":1015},[1002,10783,1031],{"class":1030},[1002,10785,10633],{"class":2378},[1002,10787,2382],{"class":1030},[1002,10789,10790,10792,10794,10796],{"class":1004,"line":2562},[1002,10791,2387],{"class":1019},[1002,10793,10642],{"class":1030},[1002,10795,2393],{"class":1015},[1002,10797,10647],{"class":1030},[1002,10799,10800,10802,10804,10806,10808,10810],{"class":1004,"line":2567},[1002,10801,4348],{"class":1015},[1002,10803,9504],{"class":1019},[1002,10805,1023],{"class":1015},[1002,10807,2690],{"class":1015},[1002,10809,10621],{"class":1026},[1002,10811,1428],{"class":1030},[1002,10813,10814],{"class":1004,"line":2572},[1002,10815,1051],{"emptyLinePlaceholder":1050},[1002,10817,10818,10821,10824],{"class":1004,"line":2582},[1002,10819,10820],{"class":1030}," shipping.",[1002,10822,10823],{"class":1026},"login",[1002,10825,10826],{"class":1030},"(credentials);\n",[1002,10828,10829],{"class":1004,"line":2594},[1002,10830,1051],{"emptyLinePlaceholder":1050},[1002,10832,10833,10835],{"class":1004,"line":2603},[1002,10834,2687],{"class":1015},[1002,10836,1457],{"class":1030},[1002,10838,10839,10842,10844,10846,10848,10850,10852,10854,10856,10858],{"class":1004,"line":2619},[1002,10840,10841],{"class":1026}," request",[1002,10843,1137],{"class":1030},[1002,10845,6965],{"class":1015},[1002,10847,6513],{"class":1030},[1002,10849,10561],{"class":2378},[1002,10851,1251],{"class":1030},[1002,10853,10566],{"class":2378},[1002,10855,1251],{"class":1030},[1002,10857,9222],{"class":2378},[1002,10859,2382],{"class":1030},[1002,10861,10862,10865,10868],{"class":1004,"line":2633},[1002,10863,10864],{"class":1030}," shipping.",[1002,10866,10867],{"class":1026},"setStart",[1002,10869,10870],{"class":1030},"(zipStart);\n",[1002,10872,10873,10875,10878],{"class":1004,"line":2641},[1002,10874,10864],{"class":1030},[1002,10876,10877],{"class":1026},"setDestination",[1002,10879,10880],{"class":1030},"(zipEnd);\n",[1002,10882,10883,10885,10887,10889],{"class":1004,"line":2655},[1002,10884,8341],{"class":1015},[1002,10886,9543],{"class":1030},[1002,10888,9188],{"class":1026},[1002,10890,10891],{"class":1030},"(weight);\n",[1002,10893,10894],{"class":1004,"line":2667},[1002,10895,1922],{"class":1030},[1002,10897,10898],{"class":1004,"line":2674},[1002,10899,10900],{"class":1030}," };\n",[1002,10902,10903],{"class":1004,"line":2679},[1002,10904,1269],{"class":1030},[1002,10906,10907],{"class":1004,"line":2684},[1002,10908,1170],{"class":1030},[1002,10910,10911],{"class":1004,"line":2704},[1002,10912,1051],{"emptyLinePlaceholder":1050},[1002,10914,10915,10917,10919,10921,10923,10925],{"class":1004,"line":2709},[1002,10916,1016],{"class":1015},[1002,10918,9504],{"class":1019},[1002,10920,1023],{"class":1015},[1002,10922,2690],{"class":1015},[1002,10924,9103],{"class":1026},[1002,10926,1428],{"class":1030},[1002,10928,10929,10931,10934,10936,10939,10942],{"class":1004,"line":2714},[1002,10930,1016],{"class":1015},[1002,10932,10933],{"class":1019}," credentials",[1002,10935,1023],{"class":1015},[1002,10937,10938],{"class":1030}," { token: ",[1002,10940,10941],{"class":1034},"'49ab1-7re8'",[1002,10943,9444],{"class":1030},[1002,10945,10946,10948,10951,10953,10955,10957],{"class":1004,"line":2719},[1002,10947,1016],{"class":1015},[1002,10949,10950],{"class":1019}," adapter",[1002,10952,1023],{"class":1015},[1002,10954,2690],{"class":1015},[1002,10956,10775],{"class":1026},[1002,10958,10826],{"class":1030},[1002,10960,10961],{"class":1004,"line":2735},[1002,10962,1051],{"emptyLinePlaceholder":1050},[1002,10964,10965],{"class":1004,"line":2740},[1002,10966,10967],{"class":1008},"\u002F\u002F original shipping object and interface\n",[1002,10969,10970,10972,10975,10977,10979,10981,10983,10986,10988,10991,10993,10995],{"class":1004,"line":2759},[1002,10971,6516],{"class":1015},[1002,10973,10974],{"class":1030}," cost ",[1002,10976,2393],{"class":1015},[1002,10978,9543],{"class":1030},[1002,10980,4786],{"class":1026},[1002,10982,1031],{"class":1030},[1002,10984,10985],{"class":1034},"'89801'",[1002,10987,1251],{"class":1030},[1002,10989,10990],{"class":1034},"'10210'",[1002,10992,1251],{"class":1030},[1002,10994,5681],{"class":1019},[1002,10996,1085],{"class":1030},[1002,10998,10999,11001,11003,11005,11008,11010],{"class":1004,"line":2774},[1002,11000,2883],{"class":1030},[1002,11002,2886],{"class":1026},[1002,11004,1031],{"class":1030},[1002,11006,11007],{"class":1034},"'Old cost: $'",[1002,11009,6583],{"class":1015},[1002,11011,11012],{"class":1030}," cost);\n",[1002,11014,11015],{"class":1004,"line":2790},[1002,11016,1051],{"emptyLinePlaceholder":1050},[1002,11018,11019],{"class":1004,"line":2801},[1002,11020,11021],{"class":1008},"\u002F\u002F new shipping object with adapted interface\n",[1002,11023,11024,11027,11029,11032,11034,11036,11038,11040,11042,11044,11046],{"class":1004,"line":2807},[1002,11025,11026],{"class":1030},"cost ",[1002,11028,2393],{"class":1015},[1002,11030,11031],{"class":1030}," adapter.",[1002,11033,4786],{"class":1026},[1002,11035,1031],{"class":1030},[1002,11037,10985],{"class":1034},[1002,11039,1251],{"class":1030},[1002,11041,10990],{"class":1034},[1002,11043,1251],{"class":1030},[1002,11045,5681],{"class":1019},[1002,11047,1085],{"class":1030},[1002,11049,11050],{"class":1004,"line":2812},[1002,11051,1051],{"emptyLinePlaceholder":1050},[1002,11053,11054,11056,11058,11060,11063,11065],{"class":1004,"line":2828},[1002,11055,2883],{"class":1030},[1002,11057,2886],{"class":1026},[1002,11059,1031],{"class":1030},[1002,11061,11062],{"class":1034},"'New cost: $'",[1002,11064,6583],{"class":1015},[1002,11066,11012],{"class":1030},[925,11068,11069,11070,11073],{},"The example code above shows an online shopping cart in which a shipping object is used to compute shipping costs. The old ",[941,11071,11072],{},"Shipping"," object is replaced by a new and improved Shipping object that is more secure and offers better prices.",[925,11075,11076,11077,11080,11081,11084,11085,11087,11088,11090],{},"The new object is named ",[941,11078,11079],{},"AdvancedShipping"," and has a very different interface which the client program does not expect. ",[941,11082,11083],{},"ShippingAdapter"," allows the client program to continue functioning without any API changes by mapping (adapting) the old ",[941,11086,11072],{}," interface to the new ",[941,11089,11079],{}," interface.",[1655,11092,11094],{"id":11093},"bridge","Bridge",[925,11096,11097,11098,11103],{},"Bridge is a ",[1107,11099,11100],{},[928,11101,11102],{},"Structural"," design pattern that lets you split a large class or a set of closely related classes into two separate hierarchies — abstraction and implementation — which can be developed independently of each other.",[925,11105,11106],{},[963,11107],{"alt":11094,"src":11108},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fbridge.png",[925,11110,3295,11111,11115],{},[1107,11112,11113],{},[928,11114,11094],{}," pattern allows two components, a client and a service, to work together with each component having its own interface. Bridge is a high-level architectural pattern and its main goal is to write better code through two levels of abstraction. It facilitates the very loose coupling of objects. It is sometimes referred to as a double Adapter pattern.",[993,11117,11119],{"className":2227,"code":11118,"language":2229,"meta":998,"style":998},"\u002F\u002F input devices\nclass Gestures {\n constructor(output) {\n this.output = output;\n }\n\n tap() {\n this.output.click();\n }\n\n swipe() {\n this.output.move();\n }\n\n pan() {\n this.output.drag();\n }\n\n pinch() {\n this.output.zoom();\n }\n}\n\nclass Mouse {\n constructor(output) {\n this.output = output;\n }\n\n click() {\n this.output.click();\n }\n\n move() {\n this.output.move();\n }\n\n down() {\n this.output.drag();\n }\n\n wheel() {\n this.output.zoom();\n }\n}\n\n\u002F\u002F output devices\nclass Screen {\n click() {\n console.log('Screen select');\n }\n\n move() {\n console.log('Screen move');\n }\n\n drag() {\n console.log('Screen drag');\n }\n\n zoom() {\n console.log('Screen zoom in');\n }\n}\n\nclass Audio {\n click() {\n console.log('Sound oink');\n }\n\n move() {\n console.log('Sound waves');\n }\n\n drag() {\n console.log('Sound screetch');\n }\n\n zoom() {\n console.log('Sound volume up');\n }\n}\n\nconst screen = new Screen();\nconst audio = new Audio();\n\nconst hand = new Gestures(screen);\nconst mouse = new Mouse(audio);\n\nhand.tap();\nhand.swipe();\nhand.pinch();\n\nmouse.click();\nmouse.move();\nmouse.wheel();\n",[941,11120,11121,11126,11135,11146,11157,11161,11165,11172,11184,11188,11192,11199,11210,11214,11218,11225,11236,11240,11244,11251,11262,11266,11270,11274,11283,11293,11303,11307,11311,11318,11328,11332,11336,11343,11353,11357,11361,11368,11378,11382,11386,11393,11403,11407,11411,11415,11420,11429,11435,11448,11452,11456,11462,11475,11479,11483,11490,11503,11507,11511,11518,11531,11535,11539,11543,11552,11558,11571,11575,11579,11585,11598,11602,11606,11612,11625,11629,11633,11639,11652,11656,11660,11664,11679,11694,11698,11714,11730,11734,11744,11753,11762,11766,11775,11783],{"__ignoreMap":998},[1002,11122,11123],{"class":1004,"line":1005},[1002,11124,11125],{"class":1008},"\u002F\u002F input devices\n",[1002,11127,11128,11130,11133],{"class":1004,"line":1012},[1002,11129,2363],{"class":1015},[1002,11131,11132],{"class":1026}," Gestures",[1002,11134,1457],{"class":1030},[1002,11136,11137,11139,11141,11144],{"class":1004,"line":1047},[1002,11138,2373],{"class":1015},[1002,11140,1031],{"class":1030},[1002,11142,11143],{"class":2378},"output",[1002,11145,2382],{"class":1030},[1002,11147,11148,11150,11152,11154],{"class":1004,"line":1054},[1002,11149,2387],{"class":1019},[1002,11151,5824],{"class":1030},[1002,11153,2393],{"class":1015},[1002,11155,11156],{"class":1030}," output;\n",[1002,11158,11159],{"class":1004,"line":1060},[1002,11160,1269],{"class":1030},[1002,11162,11163],{"class":1004,"line":1272},[1002,11164,1051],{"emptyLinePlaceholder":1050},[1002,11166,11167,11170],{"class":1004,"line":1348},[1002,11168,11169],{"class":1026}," tap",[1002,11171,3025],{"class":1030},[1002,11173,11174,11176,11179,11182],{"class":1004,"line":1354},[1002,11175,2387],{"class":1019},[1002,11177,11178],{"class":1030},".output.",[1002,11180,11181],{"class":1026},"click",[1002,11183,1428],{"class":1030},[1002,11185,11186],{"class":1004,"line":1360},[1002,11187,1269],{"class":1030},[1002,11189,11190],{"class":1004,"line":1366},[1002,11191,1051],{"emptyLinePlaceholder":1050},[1002,11193,11194,11197],{"class":1004,"line":1946},[1002,11195,11196],{"class":1026}," swipe",[1002,11198,3025],{"class":1030},[1002,11200,11201,11203,11205,11208],{"class":1004,"line":1956},[1002,11202,2387],{"class":1019},[1002,11204,11178],{"class":1030},[1002,11206,11207],{"class":1026},"move",[1002,11209,1428],{"class":1030},[1002,11211,11212],{"class":1004,"line":1961},[1002,11213,1269],{"class":1030},[1002,11215,11216],{"class":1004,"line":1971},[1002,11217,1051],{"emptyLinePlaceholder":1050},[1002,11219,11220,11223],{"class":1004,"line":1980},[1002,11221,11222],{"class":1026}," pan",[1002,11224,3025],{"class":1030},[1002,11226,11227,11229,11231,11234],{"class":1004,"line":1985},[1002,11228,2387],{"class":1019},[1002,11230,11178],{"class":1030},[1002,11232,11233],{"class":1026},"drag",[1002,11235,1428],{"class":1030},[1002,11237,11238],{"class":1004,"line":1995},[1002,11239,1269],{"class":1030},[1002,11241,11242],{"class":1004,"line":2006},[1002,11243,1051],{"emptyLinePlaceholder":1050},[1002,11245,11246,11249],{"class":1004,"line":2011},[1002,11247,11248],{"class":1026}," pinch",[1002,11250,3025],{"class":1030},[1002,11252,11253,11255,11257,11260],{"class":1004,"line":2017},[1002,11254,2387],{"class":1019},[1002,11256,11178],{"class":1030},[1002,11258,11259],{"class":1026},"zoom",[1002,11261,1428],{"class":1030},[1002,11263,11264],{"class":1004,"line":2022},[1002,11265,1269],{"class":1030},[1002,11267,11268],{"class":1004,"line":2442},[1002,11269,1170],{"class":1030},[1002,11271,11272],{"class":1004,"line":2466},[1002,11273,1051],{"emptyLinePlaceholder":1050},[1002,11275,11276,11278,11281],{"class":1004,"line":2471},[1002,11277,2363],{"class":1015},[1002,11279,11280],{"class":1026}," Mouse",[1002,11282,1457],{"class":1030},[1002,11284,11285,11287,11289,11291],{"class":1004,"line":2476},[1002,11286,2373],{"class":1015},[1002,11288,1031],{"class":1030},[1002,11290,11143],{"class":2378},[1002,11292,2382],{"class":1030},[1002,11294,11295,11297,11299,11301],{"class":1004,"line":2481},[1002,11296,2387],{"class":1019},[1002,11298,5824],{"class":1030},[1002,11300,2393],{"class":1015},[1002,11302,11156],{"class":1030},[1002,11304,11305],{"class":1004,"line":2491},[1002,11306,1269],{"class":1030},[1002,11308,11309],{"class":1004,"line":2502},[1002,11310,1051],{"emptyLinePlaceholder":1050},[1002,11312,11313,11316],{"class":1004,"line":2513},[1002,11314,11315],{"class":1026}," click",[1002,11317,3025],{"class":1030},[1002,11319,11320,11322,11324,11326],{"class":1004,"line":2535},[1002,11321,2387],{"class":1019},[1002,11323,11178],{"class":1030},[1002,11325,11181],{"class":1026},[1002,11327,1428],{"class":1030},[1002,11329,11330],{"class":1004,"line":2557},[1002,11331,1269],{"class":1030},[1002,11333,11334],{"class":1004,"line":2562},[1002,11335,1051],{"emptyLinePlaceholder":1050},[1002,11337,11338,11341],{"class":1004,"line":2567},[1002,11339,11340],{"class":1026}," move",[1002,11342,3025],{"class":1030},[1002,11344,11345,11347,11349,11351],{"class":1004,"line":2572},[1002,11346,2387],{"class":1019},[1002,11348,11178],{"class":1030},[1002,11350,11207],{"class":1026},[1002,11352,1428],{"class":1030},[1002,11354,11355],{"class":1004,"line":2582},[1002,11356,1269],{"class":1030},[1002,11358,11359],{"class":1004,"line":2594},[1002,11360,1051],{"emptyLinePlaceholder":1050},[1002,11362,11363,11366],{"class":1004,"line":2603},[1002,11364,11365],{"class":1026}," down",[1002,11367,3025],{"class":1030},[1002,11369,11370,11372,11374,11376],{"class":1004,"line":2619},[1002,11371,2387],{"class":1019},[1002,11373,11178],{"class":1030},[1002,11375,11233],{"class":1026},[1002,11377,1428],{"class":1030},[1002,11379,11380],{"class":1004,"line":2633},[1002,11381,1269],{"class":1030},[1002,11383,11384],{"class":1004,"line":2641},[1002,11385,1051],{"emptyLinePlaceholder":1050},[1002,11387,11388,11391],{"class":1004,"line":2655},[1002,11389,11390],{"class":1026}," wheel",[1002,11392,3025],{"class":1030},[1002,11394,11395,11397,11399,11401],{"class":1004,"line":2667},[1002,11396,2387],{"class":1019},[1002,11398,11178],{"class":1030},[1002,11400,11259],{"class":1026},[1002,11402,1428],{"class":1030},[1002,11404,11405],{"class":1004,"line":2674},[1002,11406,1269],{"class":1030},[1002,11408,11409],{"class":1004,"line":2679},[1002,11410,1170],{"class":1030},[1002,11412,11413],{"class":1004,"line":2684},[1002,11414,1051],{"emptyLinePlaceholder":1050},[1002,11416,11417],{"class":1004,"line":2704},[1002,11418,11419],{"class":1008},"\u002F\u002F output devices\n",[1002,11421,11422,11424,11427],{"class":1004,"line":2709},[1002,11423,2363],{"class":1015},[1002,11425,11426],{"class":1026}," Screen",[1002,11428,1457],{"class":1030},[1002,11430,11431,11433],{"class":1004,"line":2714},[1002,11432,11315],{"class":1026},[1002,11434,3025],{"class":1030},[1002,11436,11437,11439,11441,11443,11446],{"class":1004,"line":2719},[1002,11438,3030],{"class":1030},[1002,11440,2886],{"class":1026},[1002,11442,1031],{"class":1030},[1002,11444,11445],{"class":1034},"'Screen select'",[1002,11447,1085],{"class":1030},[1002,11449,11450],{"class":1004,"line":2735},[1002,11451,1269],{"class":1030},[1002,11453,11454],{"class":1004,"line":2740},[1002,11455,1051],{"emptyLinePlaceholder":1050},[1002,11457,11458,11460],{"class":1004,"line":2759},[1002,11459,11340],{"class":1026},[1002,11461,3025],{"class":1030},[1002,11463,11464,11466,11468,11470,11473],{"class":1004,"line":2774},[1002,11465,3030],{"class":1030},[1002,11467,2886],{"class":1026},[1002,11469,1031],{"class":1030},[1002,11471,11472],{"class":1034},"'Screen move'",[1002,11474,1085],{"class":1030},[1002,11476,11477],{"class":1004,"line":2790},[1002,11478,1269],{"class":1030},[1002,11480,11481],{"class":1004,"line":2801},[1002,11482,1051],{"emptyLinePlaceholder":1050},[1002,11484,11485,11488],{"class":1004,"line":2807},[1002,11486,11487],{"class":1026}," drag",[1002,11489,3025],{"class":1030},[1002,11491,11492,11494,11496,11498,11501],{"class":1004,"line":2812},[1002,11493,3030],{"class":1030},[1002,11495,2886],{"class":1026},[1002,11497,1031],{"class":1030},[1002,11499,11500],{"class":1034},"'Screen drag'",[1002,11502,1085],{"class":1030},[1002,11504,11505],{"class":1004,"line":2828},[1002,11506,1269],{"class":1030},[1002,11508,11509],{"class":1004,"line":2841},[1002,11510,1051],{"emptyLinePlaceholder":1050},[1002,11512,11513,11516],{"class":1004,"line":2854},[1002,11514,11515],{"class":1026}," zoom",[1002,11517,3025],{"class":1030},[1002,11519,11520,11522,11524,11526,11529],{"class":1004,"line":2864},[1002,11521,3030],{"class":1030},[1002,11523,2886],{"class":1026},[1002,11525,1031],{"class":1030},[1002,11527,11528],{"class":1034},"'Screen zoom in'",[1002,11530,1085],{"class":1030},[1002,11532,11533],{"class":1004,"line":2869},[1002,11534,1269],{"class":1030},[1002,11536,11537],{"class":1004,"line":2874},[1002,11538,1170],{"class":1030},[1002,11540,11541],{"class":1004,"line":2880},[1002,11542,1051],{"emptyLinePlaceholder":1050},[1002,11544,11545,11547,11550],{"class":1004,"line":2903},[1002,11546,2363],{"class":1015},[1002,11548,11549],{"class":1026}," Audio",[1002,11551,1457],{"class":1030},[1002,11553,11554,11556],{"class":1004,"line":2909},[1002,11555,11315],{"class":1026},[1002,11557,3025],{"class":1030},[1002,11559,11560,11562,11564,11566,11569],{"class":1004,"line":2919},[1002,11561,3030],{"class":1030},[1002,11563,2886],{"class":1026},[1002,11565,1031],{"class":1030},[1002,11567,11568],{"class":1034},"'Sound oink'",[1002,11570,1085],{"class":1030},[1002,11572,11573],{"class":1004,"line":2924},[1002,11574,1269],{"class":1030},[1002,11576,11577],{"class":1004,"line":2944},[1002,11578,1051],{"emptyLinePlaceholder":1050},[1002,11580,11581,11583],{"class":1004,"line":2950},[1002,11582,11340],{"class":1026},[1002,11584,3025],{"class":1030},[1002,11586,11587,11589,11591,11593,11596],{"class":1004,"line":5466},[1002,11588,3030],{"class":1030},[1002,11590,2886],{"class":1026},[1002,11592,1031],{"class":1030},[1002,11594,11595],{"class":1034},"'Sound waves'",[1002,11597,1085],{"class":1030},[1002,11599,11600],{"class":1004,"line":5477},[1002,11601,1269],{"class":1030},[1002,11603,11604],{"class":1004,"line":5490},[1002,11605,1051],{"emptyLinePlaceholder":1050},[1002,11607,11608,11610],{"class":1004,"line":5495},[1002,11609,11487],{"class":1026},[1002,11611,3025],{"class":1030},[1002,11613,11614,11616,11618,11620,11623],{"class":1004,"line":5500},[1002,11615,3030],{"class":1030},[1002,11617,2886],{"class":1026},[1002,11619,1031],{"class":1030},[1002,11621,11622],{"class":1034},"'Sound screetch'",[1002,11624,1085],{"class":1030},[1002,11626,11627],{"class":1004,"line":5505},[1002,11628,1269],{"class":1030},[1002,11630,11631],{"class":1004,"line":5515},[1002,11632,1051],{"emptyLinePlaceholder":1050},[1002,11634,11635,11637],{"class":1004,"line":5526},[1002,11636,11515],{"class":1026},[1002,11638,3025],{"class":1030},[1002,11640,11641,11643,11645,11647,11650],{"class":1004,"line":5538},[1002,11642,3030],{"class":1030},[1002,11644,2886],{"class":1026},[1002,11646,1031],{"class":1030},[1002,11648,11649],{"class":1034},"'Sound volume up'",[1002,11651,1085],{"class":1030},[1002,11653,11654],{"class":1004,"line":5543},[1002,11655,1269],{"class":1030},[1002,11657,11658],{"class":1004,"line":5548},[1002,11659,1170],{"class":1030},[1002,11661,11662],{"class":1004,"line":5559},[1002,11663,1051],{"emptyLinePlaceholder":1050},[1002,11665,11666,11668,11671,11673,11675,11677],{"class":1004,"line":5573},[1002,11667,1016],{"class":1015},[1002,11669,11670],{"class":1019}," screen",[1002,11672,1023],{"class":1015},[1002,11674,2690],{"class":1015},[1002,11676,11426],{"class":1026},[1002,11678,1428],{"class":1030},[1002,11680,11681,11683,11686,11688,11690,11692],{"class":1004,"line":5578},[1002,11682,1016],{"class":1015},[1002,11684,11685],{"class":1019}," audio",[1002,11687,1023],{"class":1015},[1002,11689,2690],{"class":1015},[1002,11691,11549],{"class":1026},[1002,11693,1428],{"class":1030},[1002,11695,11696],{"class":1004,"line":5583},[1002,11697,1051],{"emptyLinePlaceholder":1050},[1002,11699,11700,11702,11705,11707,11709,11711],{"class":1004,"line":5594},[1002,11701,1016],{"class":1015},[1002,11703,11704],{"class":1019}," hand",[1002,11706,1023],{"class":1015},[1002,11708,2690],{"class":1015},[1002,11710,11132],{"class":1026},[1002,11712,11713],{"class":1030},"(screen);\n",[1002,11715,11716,11718,11721,11723,11725,11727],{"class":1004,"line":5607},[1002,11717,1016],{"class":1015},[1002,11719,11720],{"class":1019}," mouse",[1002,11722,1023],{"class":1015},[1002,11724,2690],{"class":1015},[1002,11726,11280],{"class":1026},[1002,11728,11729],{"class":1030},"(audio);\n",[1002,11731,11732],{"class":1004,"line":5612},[1002,11733,1051],{"emptyLinePlaceholder":1050},[1002,11735,11736,11739,11742],{"class":1004,"line":5617},[1002,11737,11738],{"class":1030},"hand.",[1002,11740,11741],{"class":1026},"tap",[1002,11743,1428],{"class":1030},[1002,11745,11746,11748,11751],{"class":1004,"line":5622},[1002,11747,11738],{"class":1030},[1002,11749,11750],{"class":1026},"swipe",[1002,11752,1428],{"class":1030},[1002,11754,11755,11757,11760],{"class":1004,"line":5638},[1002,11756,11738],{"class":1030},[1002,11758,11759],{"class":1026},"pinch",[1002,11761,1428],{"class":1030},[1002,11763,11764],{"class":1004,"line":5643},[1002,11765,1051],{"emptyLinePlaceholder":1050},[1002,11767,11768,11771,11773],{"class":1004,"line":5666},[1002,11769,11770],{"class":1030},"mouse.",[1002,11772,11181],{"class":1026},[1002,11774,1428],{"class":1030},[1002,11776,11777,11779,11781],{"class":1004,"line":5686},[1002,11778,11770],{"class":1030},[1002,11780,11207],{"class":1026},[1002,11782,1428],{"class":1030},[1002,11784,11785,11787,11790],{"class":1004,"line":5705},[1002,11786,11770],{"class":1030},[1002,11788,11789],{"class":1026},"wheel",[1002,11791,1428],{"class":1030},[925,11793,11794],{},"The objective of the example is to show that with the Bridge pattern input and output devices can vary independently (without changes to the code); the devices are loosely coupled by two levels of abstraction.",[925,11796,11797,11800,11801,11804,11805,944,11808,11811],{},[941,11798,11799],{},"Gestures"," (finger movements) and the ",[941,11802,11803],{},"Mouse"," are very different input devices, but their actions map to a common set of output instructions: click, move, drag, etc. ",[941,11806,11807],{},"Screen",[941,11809,11810],{},"Audio"," are very different output devices, but they respond to the same set of instructions. Of course, the effects are totally different, that is, video updates vs. sound effects. The Bridge pattern allows any input device to work with any output device.",[1655,11813,11815],{"id":11814},"composite","Composite",[925,11817,11818],{},"The composite pattern describes a group of objects that are treated the same way as a single instance of the same type of object.",[925,11820,11821],{},[963,11822],{"alt":11815,"src":11823},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fcomposite.png",[925,11825,3295,11826,11830],{},[1107,11827,11828],{},[928,11829,11815],{}," pattern allows the creation of objects with properties that are primitive items or a collection of objects. Each item in the collection can hold other collections themselves, creating deeply nested structures.",[993,11832,11834],{"className":2227,"code":11833,"language":2229,"meta":998,"style":998},"class Node {\n constructor(name) {\n this.children = [];\n this.name = name;\n }\n\n add(child) {\n this.children.push(child);\n }\n\n remove(child) {\n const length = this.children.length;\n for (let i = 0; i \u003C length; i++) {\n if (this.children[i] === child) {\n this.children.splice(i, 1);\n return;\n }\n }\n }\n\n getChild(i) {\n return this.children[i];\n }\n\n hasChildren() {\n return this.children.length > 0;\n }\n}\n\n\u002F\u002F recursively traverse a (sub)tree\nfunction traverse(indent, node) {\n console.log(Array(indent++).join('--') + node.name);\n\n for (let i = 0, len = node.children.length; i \u003C len; i++) {\n traverse(indent, node.getChild(i));\n }\n}\n\nconst tree = new Node('root');\nconst left = new Node('left');\nconst right = new Node('right');\nconst leftLeft = new Node('leftLeft');\nconst leftRight = new Node('leftRight');\nconst rightLeft = new Node('rightLeft');\nconst rightRight = new Node('rightRight');\n\ntree.add(left);\ntree.add(right);\ntree.remove(right);\ntree.add(right);\n\nleft.add(leftLeft);\nleft.add(leftRight);\n\nright.add(rightLeft);\nright.add(rightRight);\n\ntraverse(1, tree);\n",[941,11835,11836,11845,11855,11866,11876,11880,11884,11895,11907,11911,11915,11926,11943,11968,11984,12000,12006,12010,12014,12018,12022,12034,12043,12047,12051,12058,12075,12079,12083,12087,12092,12111,12143,12147,12181,12195,12199,12203,12207,12226,12246,12266,12286,12306,12326,12346,12350,12359,12368,12377,12385,12389,12399,12408,12412,12422,12431,12435],{"__ignoreMap":998},[1002,11837,11838,11840,11843],{"class":1004,"line":1005},[1002,11839,2363],{"class":1015},[1002,11841,11842],{"class":1026}," Node",[1002,11844,1457],{"class":1030},[1002,11846,11847,11849,11851,11853],{"class":1004,"line":1012},[1002,11848,2373],{"class":1015},[1002,11850,1031],{"class":1030},[1002,11852,5911],{"class":2378},[1002,11854,2382],{"class":1030},[1002,11856,11857,11859,11862,11864],{"class":1004,"line":1047},[1002,11858,2387],{"class":1019},[1002,11860,11861],{"class":1030},".children ",[1002,11863,2393],{"class":1015},[1002,11865,4924],{"class":1030},[1002,11867,11868,11870,11872,11874],{"class":1004,"line":1054},[1002,11869,2387],{"class":1019},[1002,11871,5945],{"class":1030},[1002,11873,2393],{"class":1015},[1002,11875,5950],{"class":1030},[1002,11877,11878],{"class":1004,"line":1060},[1002,11879,1269],{"class":1030},[1002,11881,11882],{"class":1004,"line":1272},[1002,11883,1051],{"emptyLinePlaceholder":1050},[1002,11885,11886,11888,11890,11893],{"class":1004,"line":1348},[1002,11887,5042],{"class":1026},[1002,11889,1031],{"class":1030},[1002,11891,11892],{"class":2378},"child",[1002,11894,2382],{"class":1030},[1002,11896,11897,11899,11902,11904],{"class":1004,"line":1354},[1002,11898,2387],{"class":1019},[1002,11900,11901],{"class":1030},".children.",[1002,11903,4974],{"class":1026},[1002,11905,11906],{"class":1030},"(child);\n",[1002,11908,11909],{"class":1004,"line":1360},[1002,11910,1269],{"class":1030},[1002,11912,11913],{"class":1004,"line":1366},[1002,11914,1051],{"emptyLinePlaceholder":1050},[1002,11916,11917,11920,11922,11924],{"class":1004,"line":1946},[1002,11918,11919],{"class":1026}," remove",[1002,11921,1031],{"class":1030},[1002,11923,11892],{"class":2378},[1002,11925,2382],{"class":1030},[1002,11927,11928,11930,11933,11935,11937,11939,11941],{"class":1004,"line":1956},[1002,11929,4348],{"class":1015},[1002,11931,11932],{"class":1019}," length",[1002,11934,1023],{"class":1015},[1002,11936,2693],{"class":1019},[1002,11938,11901],{"class":1030},[1002,11940,5873],{"class":1019},[1002,11942,1407],{"class":1030},[1002,11944,11945,11947,11949,11951,11953,11955,11957,11959,11961,11964,11966],{"class":1004,"line":1961},[1002,11946,6841],{"class":1015},[1002,11948,6513],{"class":1030},[1002,11950,6516],{"class":1015},[1002,11952,6519],{"class":1030},[1002,11954,2393],{"class":1015},[1002,11956,4910],{"class":1019},[1002,11958,6536],{"class":1030},[1002,11960,6539],{"class":1015},[1002,11962,11963],{"class":1030}," length; i",[1002,11965,6545],{"class":1015},[1002,11967,2382],{"class":1030},[1002,11969,11970,11972,11974,11976,11979,11981],{"class":1004,"line":1971},[1002,11971,8328],{"class":1015},[1002,11973,6513],{"class":1030},[1002,11975,3455],{"class":1019},[1002,11977,11978],{"class":1030},".children[i] ",[1002,11980,2892],{"class":1015},[1002,11982,11983],{"class":1030}," child) {\n",[1002,11985,11986,11988,11990,11993,11996,11998],{"class":1004,"line":1980},[1002,11987,2622],{"class":1019},[1002,11989,11901],{"class":1030},[1002,11991,11992],{"class":1026},"splice",[1002,11994,11995],{"class":1030},"(i, ",[1002,11997,6211],{"class":1019},[1002,11999,1085],{"class":1030},[1002,12001,12002,12004],{"class":1004,"line":1985},[1002,12003,8341],{"class":1015},[1002,12005,1407],{"class":1030},[1002,12007,12008],{"class":1004,"line":1995},[1002,12009,1351],{"class":1030},[1002,12011,12012],{"class":1004,"line":2006},[1002,12013,2014],{"class":1030},[1002,12015,12016],{"class":1004,"line":2011},[1002,12017,1269],{"class":1030},[1002,12019,12020],{"class":1004,"line":2017},[1002,12021,1051],{"emptyLinePlaceholder":1050},[1002,12023,12024,12027,12029,12032],{"class":1004,"line":2022},[1002,12025,12026],{"class":1026}," getChild",[1002,12028,1031],{"class":1030},[1002,12030,12031],{"class":2378},"i",[1002,12033,2382],{"class":1030},[1002,12035,12036,12038,12040],{"class":1004,"line":2442},[1002,12037,2687],{"class":1015},[1002,12039,2693],{"class":1019},[1002,12041,12042],{"class":1030},".children[i];\n",[1002,12044,12045],{"class":1004,"line":2466},[1002,12046,1269],{"class":1030},[1002,12048,12049],{"class":1004,"line":2471},[1002,12050,1051],{"emptyLinePlaceholder":1050},[1002,12052,12053,12056],{"class":1004,"line":2476},[1002,12054,12055],{"class":1026}," hasChildren",[1002,12057,3025],{"class":1030},[1002,12059,12060,12062,12064,12066,12068,12071,12073],{"class":1004,"line":2481},[1002,12061,2687],{"class":1015},[1002,12063,2693],{"class":1019},[1002,12065,11901],{"class":1030},[1002,12067,5873],{"class":1019},[1002,12069,12070],{"class":1015}," >",[1002,12072,4910],{"class":1019},[1002,12074,1407],{"class":1030},[1002,12076,12077],{"class":1004,"line":2491},[1002,12078,1269],{"class":1030},[1002,12080,12081],{"class":1004,"line":2502},[1002,12082,1170],{"class":1030},[1002,12084,12085],{"class":1004,"line":2513},[1002,12086,1051],{"emptyLinePlaceholder":1050},[1002,12088,12089],{"class":1004,"line":2535},[1002,12090,12091],{"class":1008},"\u002F\u002F recursively traverse a (sub)tree\n",[1002,12093,12094,12096,12099,12101,12104,12106,12109],{"class":1004,"line":2557},[1002,12095,6965],{"class":1015},[1002,12097,12098],{"class":1026}," traverse",[1002,12100,1031],{"class":1030},[1002,12102,12103],{"class":2378},"indent",[1002,12105,1251],{"class":1030},[1002,12107,12108],{"class":2378},"node",[1002,12110,2382],{"class":1030},[1002,12112,12113,12115,12117,12119,12122,12125,12127,12129,12131,12133,12136,12138,12140],{"class":1004,"line":2562},[1002,12114,6977],{"class":1030},[1002,12116,2886],{"class":1026},[1002,12118,1031],{"class":1030},[1002,12120,12121],{"class":1026},"Array",[1002,12123,12124],{"class":1030},"(indent",[1002,12126,6545],{"class":1015},[1002,12128,1539],{"class":1030},[1002,12130,7504],{"class":1026},[1002,12132,1031],{"class":1030},[1002,12134,12135],{"class":1034},"'--'",[1002,12137,5876],{"class":1030},[1002,12139,5064],{"class":1015},[1002,12141,12142],{"class":1030}," node.name);\n",[1002,12144,12145],{"class":1004,"line":2567},[1002,12146,1051],{"emptyLinePlaceholder":1050},[1002,12148,12149,12152,12154,12156,12158,12160,12162,12164,12166,12169,12171,12173,12175,12177,12179],{"class":1004,"line":2572},[1002,12150,12151],{"class":1015}," for",[1002,12153,6513],{"class":1030},[1002,12155,6516],{"class":1015},[1002,12157,6519],{"class":1030},[1002,12159,2393],{"class":1015},[1002,12161,4910],{"class":1019},[1002,12163,6526],{"class":1030},[1002,12165,2393],{"class":1015},[1002,12167,12168],{"class":1030}," node.children.",[1002,12170,5873],{"class":1019},[1002,12172,6536],{"class":1030},[1002,12174,6539],{"class":1015},[1002,12176,6542],{"class":1030},[1002,12178,6545],{"class":1015},[1002,12180,2382],{"class":1030},[1002,12182,12183,12186,12189,12192],{"class":1004,"line":2582},[1002,12184,12185],{"class":1026}," traverse",[1002,12187,12188],{"class":1030},"(indent, node.",[1002,12190,12191],{"class":1026},"getChild",[1002,12193,12194],{"class":1030},"(i));\n",[1002,12196,12197],{"class":1004,"line":2594},[1002,12198,1269],{"class":1030},[1002,12200,12201],{"class":1004,"line":2603},[1002,12202,1170],{"class":1030},[1002,12204,12205],{"class":1004,"line":2619},[1002,12206,1051],{"emptyLinePlaceholder":1050},[1002,12208,12209,12211,12213,12215,12217,12219,12221,12224],{"class":1004,"line":2633},[1002,12210,1016],{"class":1015},[1002,12212,6321],{"class":1019},[1002,12214,1023],{"class":1015},[1002,12216,2690],{"class":1015},[1002,12218,11842],{"class":1026},[1002,12220,1031],{"class":1030},[1002,12222,12223],{"class":1034},"'root'",[1002,12225,1085],{"class":1030},[1002,12227,12228,12230,12233,12235,12237,12239,12241,12244],{"class":1004,"line":2641},[1002,12229,1016],{"class":1015},[1002,12231,12232],{"class":1019}," left",[1002,12234,1023],{"class":1015},[1002,12236,2690],{"class":1015},[1002,12238,11842],{"class":1026},[1002,12240,1031],{"class":1030},[1002,12242,12243],{"class":1034},"'left'",[1002,12245,1085],{"class":1030},[1002,12247,12248,12250,12253,12255,12257,12259,12261,12264],{"class":1004,"line":2655},[1002,12249,1016],{"class":1015},[1002,12251,12252],{"class":1019}," right",[1002,12254,1023],{"class":1015},[1002,12256,2690],{"class":1015},[1002,12258,11842],{"class":1026},[1002,12260,1031],{"class":1030},[1002,12262,12263],{"class":1034},"'right'",[1002,12265,1085],{"class":1030},[1002,12267,12268,12270,12273,12275,12277,12279,12281,12284],{"class":1004,"line":2667},[1002,12269,1016],{"class":1015},[1002,12271,12272],{"class":1019}," leftLeft",[1002,12274,1023],{"class":1015},[1002,12276,2690],{"class":1015},[1002,12278,11842],{"class":1026},[1002,12280,1031],{"class":1030},[1002,12282,12283],{"class":1034},"'leftLeft'",[1002,12285,1085],{"class":1030},[1002,12287,12288,12290,12293,12295,12297,12299,12301,12304],{"class":1004,"line":2674},[1002,12289,1016],{"class":1015},[1002,12291,12292],{"class":1019}," leftRight",[1002,12294,1023],{"class":1015},[1002,12296,2690],{"class":1015},[1002,12298,11842],{"class":1026},[1002,12300,1031],{"class":1030},[1002,12302,12303],{"class":1034},"'leftRight'",[1002,12305,1085],{"class":1030},[1002,12307,12308,12310,12313,12315,12317,12319,12321,12324],{"class":1004,"line":2679},[1002,12309,1016],{"class":1015},[1002,12311,12312],{"class":1019}," rightLeft",[1002,12314,1023],{"class":1015},[1002,12316,2690],{"class":1015},[1002,12318,11842],{"class":1026},[1002,12320,1031],{"class":1030},[1002,12322,12323],{"class":1034},"'rightLeft'",[1002,12325,1085],{"class":1030},[1002,12327,12328,12330,12333,12335,12337,12339,12341,12344],{"class":1004,"line":2684},[1002,12329,1016],{"class":1015},[1002,12331,12332],{"class":1019}," rightRight",[1002,12334,1023],{"class":1015},[1002,12336,2690],{"class":1015},[1002,12338,11842],{"class":1026},[1002,12340,1031],{"class":1030},[1002,12342,12343],{"class":1034},"'rightRight'",[1002,12345,1085],{"class":1030},[1002,12347,12348],{"class":1004,"line":2704},[1002,12349,1051],{"emptyLinePlaceholder":1050},[1002,12351,12352,12354,12356],{"class":1004,"line":2709},[1002,12353,6334],{"class":1030},[1002,12355,7985],{"class":1026},[1002,12357,12358],{"class":1030},"(left);\n",[1002,12360,12361,12363,12365],{"class":1004,"line":2714},[1002,12362,6334],{"class":1030},[1002,12364,7985],{"class":1026},[1002,12366,12367],{"class":1030},"(right);\n",[1002,12369,12370,12372,12375],{"class":1004,"line":2719},[1002,12371,6334],{"class":1030},[1002,12373,12374],{"class":1026},"remove",[1002,12376,12367],{"class":1030},[1002,12378,12379,12381,12383],{"class":1004,"line":2735},[1002,12380,6334],{"class":1030},[1002,12382,7985],{"class":1026},[1002,12384,12367],{"class":1030},[1002,12386,12387],{"class":1004,"line":2740},[1002,12388,1051],{"emptyLinePlaceholder":1050},[1002,12390,12391,12394,12396],{"class":1004,"line":2759},[1002,12392,12393],{"class":1030},"left.",[1002,12395,7985],{"class":1026},[1002,12397,12398],{"class":1030},"(leftLeft);\n",[1002,12400,12401,12403,12405],{"class":1004,"line":2774},[1002,12402,12393],{"class":1030},[1002,12404,7985],{"class":1026},[1002,12406,12407],{"class":1030},"(leftRight);\n",[1002,12409,12410],{"class":1004,"line":2790},[1002,12411,1051],{"emptyLinePlaceholder":1050},[1002,12413,12414,12417,12419],{"class":1004,"line":2801},[1002,12415,12416],{"class":1030},"right.",[1002,12418,7985],{"class":1026},[1002,12420,12421],{"class":1030},"(rightLeft);\n",[1002,12423,12424,12426,12428],{"class":1004,"line":2807},[1002,12425,12416],{"class":1030},[1002,12427,7985],{"class":1026},[1002,12429,12430],{"class":1030},"(rightRight);\n",[1002,12432,12433],{"class":1004,"line":2812},[1002,12434,1051],{"emptyLinePlaceholder":1050},[1002,12436,12437,12440,12442,12444],{"class":1004,"line":2828},[1002,12438,12439],{"class":1026},"traverse",[1002,12441,1031],{"class":1030},[1002,12443,6211],{"class":1019},[1002,12445,12446],{"class":1030},", tree);\n",[925,12448,12449,12450,12453,12454,6620,12456,6620,12458,6630,12460,12463,12464,12466,12467,12469],{},"In the example, a tree structure is created from ",[941,12451,12452],{},"Node"," objects. Each node has a name and 4 methods: ",[941,12455,7985],{},[941,12457,12374],{},[941,12459,12191],{},[941,12461,12462],{},"hasChildren",". The methods are added to ",[941,12465,12452],{},"'s prototype. This reduces the memory requirements as these methods are now shared by all nodes. ",[941,12468,12452],{}," is fully recursive and there is no need for separate Component or Leaf objects.",[1655,12471,12473],{"id":12472},"decorator","Decorator",[925,12475,3898,12476,12478],{},[1107,12477,12473],{}," pattern is a design pattern that allows behavior to be added to an individual object, dynamically, without affecting the behavior of other objects from the same class.",[925,12480,12481],{},[963,12482],{"alt":12473,"src":12483},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fdecorator.png",[925,12485,3295,12486,12490],{},[1107,12487,12488],{},[928,12489,12473],{}," pattern extends (decorates) an object’s behavior dynamically. The ability to add new behavior at runtime is accomplished by a Decorator object which ‘wraps itself’ around the original object. Multiple decorators can add or override functionality to the original object.",[993,12492,12494],{"className":2227,"code":12493,"language":2229,"meta":998,"style":998},"class User {\n constructor(name) {\n this.name = name;\n }\n\n describe() {\n console.log('User: ' + this.name);\n }\n}\n\nclass DecoratedUser {\n constructor(user, street, city) {\n this.user = user;\n this.name = user.name; \u002F\u002F ensures interface stays the same\n this.street = street;\n this.city = city;\n }\n\n say() {\n console.log(`Decorated User: ${this.name}, ${this.street}, ${this.city}`);\n }\n}\n\nconst user = new User('Kelly');\nuser.describe();\n\nconst decorated = new DecoratedUser(user, 'Broadway', 'New York');\ndecorated.say();\n",[941,12495,12496,12505,12515,12525,12529,12533,12540,12558,12562,12566,12570,12579,12600,12612,12626,12638,12650,12654,12658,12665,12703,12707,12711,12715,12735,12745,12749,12775],{"__ignoreMap":998},[1002,12497,12498,12500,12503],{"class":1004,"line":1005},[1002,12499,2363],{"class":1015},[1002,12501,12502],{"class":1026}," User",[1002,12504,1457],{"class":1030},[1002,12506,12507,12509,12511,12513],{"class":1004,"line":1012},[1002,12508,2373],{"class":1015},[1002,12510,1031],{"class":1030},[1002,12512,5911],{"class":2378},[1002,12514,2382],{"class":1030},[1002,12516,12517,12519,12521,12523],{"class":1004,"line":1047},[1002,12518,2387],{"class":1019},[1002,12520,5945],{"class":1030},[1002,12522,2393],{"class":1015},[1002,12524,5950],{"class":1030},[1002,12526,12527],{"class":1004,"line":1054},[1002,12528,1269],{"class":1030},[1002,12530,12531],{"class":1004,"line":1060},[1002,12532,1051],{"emptyLinePlaceholder":1050},[1002,12534,12535,12538],{"class":1004,"line":1272},[1002,12536,12537],{"class":1026}," describe",[1002,12539,3025],{"class":1030},[1002,12541,12542,12544,12546,12548,12551,12553,12555],{"class":1004,"line":1348},[1002,12543,3030],{"class":1030},[1002,12545,2886],{"class":1026},[1002,12547,1031],{"class":1030},[1002,12549,12550],{"class":1034},"'User: '",[1002,12552,6583],{"class":1015},[1002,12554,2693],{"class":1019},[1002,12556,12557],{"class":1030},".name);\n",[1002,12559,12560],{"class":1004,"line":1354},[1002,12561,1269],{"class":1030},[1002,12563,12564],{"class":1004,"line":1360},[1002,12565,1170],{"class":1030},[1002,12567,12568],{"class":1004,"line":1366},[1002,12569,1051],{"emptyLinePlaceholder":1050},[1002,12571,12572,12574,12577],{"class":1004,"line":1946},[1002,12573,2363],{"class":1015},[1002,12575,12576],{"class":1026}," DecoratedUser",[1002,12578,1457],{"class":1030},[1002,12580,12581,12583,12585,12588,12590,12593,12595,12598],{"class":1004,"line":1956},[1002,12582,2373],{"class":1015},[1002,12584,1031],{"class":1030},[1002,12586,12587],{"class":2378},"user",[1002,12589,1251],{"class":1030},[1002,12591,12592],{"class":2378},"street",[1002,12594,1251],{"class":1030},[1002,12596,12597],{"class":2378},"city",[1002,12599,2382],{"class":1030},[1002,12601,12602,12604,12607,12609],{"class":1004,"line":1961},[1002,12603,2387],{"class":1019},[1002,12605,12606],{"class":1030},".user ",[1002,12608,2393],{"class":1015},[1002,12610,12611],{"class":1030}," user;\n",[1002,12613,12614,12616,12618,12620,12623],{"class":1004,"line":1971},[1002,12615,2387],{"class":1019},[1002,12617,5945],{"class":1030},[1002,12619,2393],{"class":1015},[1002,12621,12622],{"class":1030}," user.name; ",[1002,12624,12625],{"class":1008},"\u002F\u002F ensures interface stays the same\n",[1002,12627,12628,12630,12633,12635],{"class":1004,"line":1980},[1002,12629,2387],{"class":1019},[1002,12631,12632],{"class":1030},".street ",[1002,12634,2393],{"class":1015},[1002,12636,12637],{"class":1030}," street;\n",[1002,12639,12640,12642,12645,12647],{"class":1004,"line":1985},[1002,12641,2387],{"class":1019},[1002,12643,12644],{"class":1030},".city ",[1002,12646,2393],{"class":1015},[1002,12648,12649],{"class":1030}," city;\n",[1002,12651,12652],{"class":1004,"line":1995},[1002,12653,1269],{"class":1030},[1002,12655,12656],{"class":1004,"line":2006},[1002,12657,1051],{"emptyLinePlaceholder":1050},[1002,12659,12660,12663],{"class":1004,"line":2011},[1002,12661,12662],{"class":1026}," say",[1002,12664,3025],{"class":1030},[1002,12666,12667,12669,12671,12673,12676,12678,12680,12682,12685,12687,12689,12691,12693,12695,12697,12699,12701],{"class":1004,"line":2017},[1002,12668,3030],{"class":1030},[1002,12670,2886],{"class":1026},[1002,12672,1031],{"class":1030},[1002,12674,12675],{"class":1034},"`Decorated User: ${",[1002,12677,3455],{"class":1019},[1002,12679,948],{"class":1034},[1002,12681,5911],{"class":1030},[1002,12683,12684],{"class":1034},"}, ${",[1002,12686,3455],{"class":1019},[1002,12688,948],{"class":1034},[1002,12690,12592],{"class":1030},[1002,12692,12684],{"class":1034},[1002,12694,3455],{"class":1019},[1002,12696,948],{"class":1034},[1002,12698,12597],{"class":1030},[1002,12700,3507],{"class":1034},[1002,12702,1085],{"class":1030},[1002,12704,12705],{"class":1004,"line":2022},[1002,12706,1269],{"class":1030},[1002,12708,12709],{"class":1004,"line":2442},[1002,12710,1170],{"class":1030},[1002,12712,12713],{"class":1004,"line":2466},[1002,12714,1051],{"emptyLinePlaceholder":1050},[1002,12716,12717,12719,12722,12724,12726,12728,12730,12733],{"class":1004,"line":2471},[1002,12718,1016],{"class":1015},[1002,12720,12721],{"class":1019}," user",[1002,12723,1023],{"class":1015},[1002,12725,2690],{"class":1015},[1002,12727,12502],{"class":1026},[1002,12729,1031],{"class":1030},[1002,12731,12732],{"class":1034},"'Kelly'",[1002,12734,1085],{"class":1030},[1002,12736,12737,12740,12743],{"class":1004,"line":2476},[1002,12738,12739],{"class":1030},"user.",[1002,12741,12742],{"class":1026},"describe",[1002,12744,1428],{"class":1030},[1002,12746,12747],{"class":1004,"line":2481},[1002,12748,1051],{"emptyLinePlaceholder":1050},[1002,12750,12751,12753,12756,12758,12760,12762,12765,12768,12770,12773],{"class":1004,"line":2491},[1002,12752,1016],{"class":1015},[1002,12754,12755],{"class":1019}," decorated",[1002,12757,1023],{"class":1015},[1002,12759,2690],{"class":1015},[1002,12761,12576],{"class":1026},[1002,12763,12764],{"class":1030},"(user, ",[1002,12766,12767],{"class":1034},"'Broadway'",[1002,12769,1251],{"class":1030},[1002,12771,12772],{"class":1034},"'New York'",[1002,12774,1085],{"class":1030},[1002,12776,12777,12780,12783],{"class":1004,"line":2502},[1002,12778,12779],{"class":1030},"decorated.",[1002,12781,12782],{"class":1026},"say",[1002,12784,1428],{"class":1030},[925,12786,12787,12788,12791,12792,12795,12796,12799,12800,12803,12804,12806,12807,12809],{},"In the example code, a ",[941,12789,12790],{},"User"," object is decorated (enhanced) by a ",[941,12793,12794],{},"DecoratedUser"," object. It extends the User with several address-based properties. The original interface must stay the same, which explains why ",[941,12797,12798],{},"user.name"," is assigned to ",[941,12801,12802],{},"this.name",". Also, the ",[941,12805,12782],{}," method of DecoratedUser hides the ",[941,12808,12782],{}," method of User.",[1655,12811,12813],{"id":12812},"façade",[1107,12814,12815],{},"Façade",[925,12817,3898,12818,12822],{},[1107,12819,12820],{},[928,12821,12815],{}," pattern is a structural design pattern commonly used in object-oriented programming. Analogous to a facade in architecture, a facade is an object that serves as a front-facing interface masking more complex underlying or structural code.",[925,12824,12825],{},[963,12826],{"alt":12815,"src":12827},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Ffacade.png",[925,12829,3295,12830,12834],{},[1107,12831,12832],{},[928,12833,12815],{}," pattern provides an interface that shields clients from complex functionality in one or more subsystems. It is a simple pattern that may seem trivial but it is powerful and extremely useful. It is often present in systems that are built around a multi-layer architecture.",[993,12836,12838],{"className":2227,"code":12837,"language":2229,"meta":998,"style":998},"const APPROVED_LIST = ['John', 'Lisa'];\n\nclass Mortgage {\n constructor(name) {\n this.name = name;\n }\n\n applyFor(amount) {\n \u002F\u002F access multiple subsystems\n let result = 'approved';\n\n if (!new Bank().verify(this.name, amount)) {\n result = 'denied';\n } else if (!new Credit().get(this.name)) {\n result = 'denied';\n } else if (!new Background().check(this.name)) {\n result = 'denied';\n }\n return `${this.name} has been ${result} for a ${amount} mortgage`;\n }\n}\n\nclass Bank {\n verify(name, amount) {\n if (APPROVED_LIST.includes(name) && amount \u003C 200000) {\n return true;\n }\n\n return false;\n }\n}\n\nclass Credit {\n get(name) {\n if (APPROVED_LIST.includes(name)) {\n return true;\n }\n return false;\n }\n}\n\nclass Background {\n check(name) {\n if (APPROVED_LIST.includes(name)) {\n return true;\n }\n return false;\n }\n}\n\nconst mortgage = new Mortgage('John');\nconst result = mortgage.applyFor(100000);\n\nconsole.log(result);\n",[941,12839,12840,12861,12865,12874,12884,12894,12898,12902,12913,12918,12933,12937,12962,12974,13000,13010,13036,13046,13050,13079,13083,13087,13091,13099,13114,13144,13152,13156,13160,13169,13173,13177,13181,13189,13199,13214,13222,13226,13234,13238,13242,13246,13254,13265,13279,13287,13291,13299,13303,13307,13311,13330,13351,13355],{"__ignoreMap":998},[1002,12841,12842,12844,12847,12849,12851,12854,12856,12859],{"class":1004,"line":1005},[1002,12843,1016],{"class":1015},[1002,12845,12846],{"class":1019}," APPROVED_LIST",[1002,12848,1023],{"class":1015},[1002,12850,1897],{"class":1030},[1002,12852,12853],{"class":1034},"'John'",[1002,12855,1251],{"class":1030},[1002,12857,12858],{"class":1034},"'Lisa'",[1002,12860,6754],{"class":1030},[1002,12862,12863],{"class":1004,"line":1012},[1002,12864,1051],{"emptyLinePlaceholder":1050},[1002,12866,12867,12869,12872],{"class":1004,"line":1047},[1002,12868,2363],{"class":1015},[1002,12870,12871],{"class":1026}," Mortgage",[1002,12873,1457],{"class":1030},[1002,12875,12876,12878,12880,12882],{"class":1004,"line":1054},[1002,12877,2373],{"class":1015},[1002,12879,1031],{"class":1030},[1002,12881,5911],{"class":2378},[1002,12883,2382],{"class":1030},[1002,12885,12886,12888,12890,12892],{"class":1004,"line":1060},[1002,12887,2387],{"class":1019},[1002,12889,5945],{"class":1030},[1002,12891,2393],{"class":1015},[1002,12893,5950],{"class":1030},[1002,12895,12896],{"class":1004,"line":1272},[1002,12897,1269],{"class":1030},[1002,12899,12900],{"class":1004,"line":1348},[1002,12901,1051],{"emptyLinePlaceholder":1050},[1002,12903,12904,12907,12909,12911],{"class":1004,"line":1354},[1002,12905,12906],{"class":1026}," applyFor",[1002,12908,1031],{"class":1030},[1002,12910,4603],{"class":2378},[1002,12912,2382],{"class":1030},[1002,12914,12915],{"class":1004,"line":1360},[1002,12916,12917],{"class":1008}," \u002F\u002F access multiple subsystems\n",[1002,12919,12920,12923,12926,12928,12931],{"class":1004,"line":1366},[1002,12921,12922],{"class":1015}," let",[1002,12924,12925],{"class":1030}," result ",[1002,12927,2393],{"class":1015},[1002,12929,12930],{"class":1034}," 'approved'",[1002,12932,1407],{"class":1030},[1002,12934,12935],{"class":1004,"line":1946},[1002,12936,1051],{"emptyLinePlaceholder":1050},[1002,12938,12939,12941,12943,12946,12949,12952,12955,12957,12959],{"class":1004,"line":1956},[1002,12940,4368],{"class":1015},[1002,12942,6513],{"class":1030},[1002,12944,12945],{"class":1015},"!new",[1002,12947,12948],{"class":1026}," Bank",[1002,12950,12951],{"class":1030},"().",[1002,12953,12954],{"class":1026},"verify",[1002,12956,1031],{"class":1030},[1002,12958,3455],{"class":1019},[1002,12960,12961],{"class":1030},".name, amount)) {\n",[1002,12963,12964,12967,12969,12972],{"class":1004,"line":1961},[1002,12965,12966],{"class":1030}," result ",[1002,12968,2393],{"class":1015},[1002,12970,12971],{"class":1034}," 'denied'",[1002,12973,1407],{"class":1030},[1002,12975,12976,12978,12980,12982,12984,12986,12989,12991,12993,12995,12997],{"class":1004,"line":1971},[1002,12977,6057],{"class":1030},[1002,12979,6060],{"class":1015},[1002,12981,6063],{"class":1015},[1002,12983,6513],{"class":1030},[1002,12985,12945],{"class":1015},[1002,12987,12988],{"class":1026}," Credit",[1002,12990,12951],{"class":1030},[1002,12992,8070],{"class":1026},[1002,12994,1031],{"class":1030},[1002,12996,3455],{"class":1019},[1002,12998,12999],{"class":1030},".name)) {\n",[1002,13001,13002,13004,13006,13008],{"class":1004,"line":1980},[1002,13003,12966],{"class":1030},[1002,13005,2393],{"class":1015},[1002,13007,12971],{"class":1034},[1002,13009,1407],{"class":1030},[1002,13011,13012,13014,13016,13018,13020,13022,13025,13027,13030,13032,13034],{"class":1004,"line":1985},[1002,13013,6057],{"class":1030},[1002,13015,6060],{"class":1015},[1002,13017,6063],{"class":1015},[1002,13019,6513],{"class":1030},[1002,13021,12945],{"class":1015},[1002,13023,13024],{"class":1026}," Background",[1002,13026,12951],{"class":1030},[1002,13028,13029],{"class":1026},"check",[1002,13031,1031],{"class":1030},[1002,13033,3455],{"class":1019},[1002,13035,12999],{"class":1030},[1002,13037,13038,13040,13042,13044],{"class":1004,"line":1995},[1002,13039,12966],{"class":1030},[1002,13041,2393],{"class":1015},[1002,13043,12971],{"class":1034},[1002,13045,1407],{"class":1030},[1002,13047,13048],{"class":1004,"line":2006},[1002,13049,2014],{"class":1030},[1002,13051,13052,13054,13057,13059,13061,13063,13066,13069,13072,13074,13077],{"class":1004,"line":2011},[1002,13053,2687],{"class":1015},[1002,13055,13056],{"class":1034}," `${",[1002,13058,3455],{"class":1019},[1002,13060,948],{"class":1034},[1002,13062,5911],{"class":1030},[1002,13064,13065],{"class":1034},"} has been ${",[1002,13067,13068],{"class":1030},"result",[1002,13070,13071],{"class":1034},"} for a ${",[1002,13073,4603],{"class":1030},[1002,13075,13076],{"class":1034},"} mortgage`",[1002,13078,1407],{"class":1030},[1002,13080,13081],{"class":1004,"line":2017},[1002,13082,1269],{"class":1030},[1002,13084,13085],{"class":1004,"line":2022},[1002,13086,1170],{"class":1030},[1002,13088,13089],{"class":1004,"line":2442},[1002,13090,1051],{"emptyLinePlaceholder":1050},[1002,13092,13093,13095,13097],{"class":1004,"line":2466},[1002,13094,2363],{"class":1015},[1002,13096,12948],{"class":1026},[1002,13098,1457],{"class":1030},[1002,13100,13101,13104,13106,13108,13110,13112],{"class":1004,"line":2471},[1002,13102,13103],{"class":1026}," verify",[1002,13105,1031],{"class":1030},[1002,13107,5911],{"class":2378},[1002,13109,1251],{"class":1030},[1002,13111,4603],{"class":2378},[1002,13113,2382],{"class":1030},[1002,13115,13116,13118,13120,13123,13125,13128,13131,13134,13137,13139,13142],{"class":1004,"line":2476},[1002,13117,4368],{"class":1015},[1002,13119,6513],{"class":1030},[1002,13121,13122],{"class":1019},"APPROVED_LIST",[1002,13124,948],{"class":1030},[1002,13126,13127],{"class":1026},"includes",[1002,13129,13130],{"class":1030},"(name) ",[1002,13132,13133],{"class":1015},"&&",[1002,13135,13136],{"class":1030}," amount ",[1002,13138,6539],{"class":1015},[1002,13140,13141],{"class":1019}," 200000",[1002,13143,2382],{"class":1030},[1002,13145,13146,13148,13150],{"class":1004,"line":2481},[1002,13147,4376],{"class":1015},[1002,13149,9687],{"class":1019},[1002,13151,1407],{"class":1030},[1002,13153,13154],{"class":1004,"line":2491},[1002,13155,2014],{"class":1030},[1002,13157,13158],{"class":1004,"line":2502},[1002,13159,1051],{"emptyLinePlaceholder":1050},[1002,13161,13162,13164,13167],{"class":1004,"line":2513},[1002,13163,2687],{"class":1015},[1002,13165,13166],{"class":1019}," false",[1002,13168,1407],{"class":1030},[1002,13170,13171],{"class":1004,"line":2535},[1002,13172,1269],{"class":1030},[1002,13174,13175],{"class":1004,"line":2557},[1002,13176,1170],{"class":1030},[1002,13178,13179],{"class":1004,"line":2562},[1002,13180,1051],{"emptyLinePlaceholder":1050},[1002,13182,13183,13185,13187],{"class":1004,"line":2567},[1002,13184,2363],{"class":1015},[1002,13186,12988],{"class":1026},[1002,13188,1457],{"class":1030},[1002,13190,13191,13193,13195,13197],{"class":1004,"line":2572},[1002,13192,7887],{"class":1026},[1002,13194,1031],{"class":1030},[1002,13196,5911],{"class":2378},[1002,13198,2382],{"class":1030},[1002,13200,13201,13203,13205,13207,13209,13211],{"class":1004,"line":2582},[1002,13202,4368],{"class":1015},[1002,13204,6513],{"class":1030},[1002,13206,13122],{"class":1019},[1002,13208,948],{"class":1030},[1002,13210,13127],{"class":1026},[1002,13212,13213],{"class":1030},"(name)) {\n",[1002,13215,13216,13218,13220],{"class":1004,"line":2594},[1002,13217,4376],{"class":1015},[1002,13219,9687],{"class":1019},[1002,13221,1407],{"class":1030},[1002,13223,13224],{"class":1004,"line":2603},[1002,13225,2014],{"class":1030},[1002,13227,13228,13230,13232],{"class":1004,"line":2619},[1002,13229,2687],{"class":1015},[1002,13231,13166],{"class":1019},[1002,13233,1407],{"class":1030},[1002,13235,13236],{"class":1004,"line":2633},[1002,13237,1269],{"class":1030},[1002,13239,13240],{"class":1004,"line":2641},[1002,13241,1170],{"class":1030},[1002,13243,13244],{"class":1004,"line":2655},[1002,13245,1051],{"emptyLinePlaceholder":1050},[1002,13247,13248,13250,13252],{"class":1004,"line":2667},[1002,13249,2363],{"class":1015},[1002,13251,13024],{"class":1026},[1002,13253,1457],{"class":1030},[1002,13255,13256,13259,13261,13263],{"class":1004,"line":2674},[1002,13257,13258],{"class":1026}," check",[1002,13260,1031],{"class":1030},[1002,13262,5911],{"class":2378},[1002,13264,2382],{"class":1030},[1002,13266,13267,13269,13271,13273,13275,13277],{"class":1004,"line":2679},[1002,13268,4368],{"class":1015},[1002,13270,6513],{"class":1030},[1002,13272,13122],{"class":1019},[1002,13274,948],{"class":1030},[1002,13276,13127],{"class":1026},[1002,13278,13213],{"class":1030},[1002,13280,13281,13283,13285],{"class":1004,"line":2684},[1002,13282,4376],{"class":1015},[1002,13284,9687],{"class":1019},[1002,13286,1407],{"class":1030},[1002,13288,13289],{"class":1004,"line":2704},[1002,13290,2014],{"class":1030},[1002,13292,13293,13295,13297],{"class":1004,"line":2709},[1002,13294,2687],{"class":1015},[1002,13296,13166],{"class":1019},[1002,13298,1407],{"class":1030},[1002,13300,13301],{"class":1004,"line":2714},[1002,13302,1269],{"class":1030},[1002,13304,13305],{"class":1004,"line":2719},[1002,13306,1170],{"class":1030},[1002,13308,13309],{"class":1004,"line":2735},[1002,13310,1051],{"emptyLinePlaceholder":1050},[1002,13312,13313,13315,13318,13320,13322,13324,13326,13328],{"class":1004,"line":2740},[1002,13314,1016],{"class":1015},[1002,13316,13317],{"class":1019}," mortgage",[1002,13319,1023],{"class":1015},[1002,13321,2690],{"class":1015},[1002,13323,12871],{"class":1026},[1002,13325,1031],{"class":1030},[1002,13327,12853],{"class":1034},[1002,13329,1085],{"class":1030},[1002,13331,13332,13334,13337,13339,13342,13345,13347,13349],{"class":1004,"line":2759},[1002,13333,1016],{"class":1015},[1002,13335,13336],{"class":1019}," result",[1002,13338,1023],{"class":1015},[1002,13340,13341],{"class":1030}," mortgage.",[1002,13343,13344],{"class":1026},"applyFor",[1002,13346,1031],{"class":1030},[1002,13348,10291],{"class":1019},[1002,13350,1085],{"class":1030},[1002,13352,13353],{"class":1004,"line":2774},[1002,13354,1051],{"emptyLinePlaceholder":1050},[1002,13356,13357,13359,13361],{"class":1004,"line":2790},[1002,13358,2883],{"class":1030},[1002,13360,2886],{"class":1026},[1002,13362,13363],{"class":1030},"(result);\n",[925,13365,3295,13366,13369,13370,13372],{},[941,13367,13368],{},"Mortgage"," object is the Façade in the example code. It presents a simple interface to the client with only a single method: ",[941,13371,13344],{},". But underneath this simple API lies considerable complexity.",[925,13374,13375,13376,13378,13379,6620,13382,6630,13385,948],{},"The applicant's name is passed into the Mortgage constructor function. Then the ",[941,13377,13344],{}," method is called with the requested loan amount. Internally, this method uses services from 3 separate subsystems that are complex and possibly take some time to process; they are ",[941,13380,13381],{},"Bank",[941,13383,13384],{},"Credit",[941,13386,13387],{},"Background",[925,13389,13390],{},"Based on several criteria (bank statements, credit reports, and criminal background) the applicant is either accepted or denied for the requested loan.",[1655,13392,13394],{"id":13393},"flyweight",[1107,13395,13396],{},"Flyweight",[925,13398,13399],{},"A flyweight is an object that minimizes memory usage by sharing as much data as possible with other similar objects.",[925,13401,13402],{},[963,13403],{"alt":13396,"src":13404},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fflyweight.png",[925,13406,3295,13407,13411],{},[1107,13408,13409],{},[928,13410,13396],{}," pattern conserves memory by sharing large numbers of fine-grained objects efficiently. Shared flyweight objects are immutable, that is, they cannot be changed as they represent the characteristics that are shared with other objects.",[993,13413,13415],{"className":2227,"code":13414,"language":2229,"meta":998,"style":998},"class Flyweight {\n contructor(make, model, processor) {\n this.make = make;\n this.model = model;\n this.processor = processor;\n }\n}\n\nclass FlyWeightFactory {\n static flyweights = {};\n static count = 0;\n\n static get(make, model, processor) {\n if (!FlyWeightFactory.flyweights[make + model]) {\n FlyWeightFactory.flyweights[make + model] = new Flyweight(\n make,\n model,\n processor,\n );\n }\n\n return FlyWeightFactory.flyweights[make + model];\n }\n\n static getCount() {\n for (let f in FlyWeightFactory.flyweights) FlyWeightFactory.count++;\n return FlyWeightFactory.count;\n }\n}\n\nlet count = 0;\n\nclass ComputerCollection {\n computers = {};\n\n add(make, model, processor, memory, tag) {\n computers[tag] = new Computer(make, model, processor, memory, tag);\n count++;\n }\n\n get(tag) {\n return computers[tag];\n }\n\n getCount() {\n return count;\n }\n}\n\nclass Computer {\n constructor(make, model, processor, memory, tag) {\n this.flyweight = FlyWeightFactory.get(make, model, processor);\n this.memory = memory;\n this.tag = tag;\n this.getMake = function () {\n return this.flyweight.make;\n };\n }\n}\n\nconst computers = new ComputerCollection();\n\ncomputers.add('Apple', 'MacBook Pro', 'Intel', '5G', 'Y755P');\ncomputers.add('Apple', 'MacBook Pro', 'Intel', '6G', 'X997T');\ncomputers.add('Apple', 'MacBook Pro', 'Intel', '2G', 'U8U80');\ncomputers.add('Apple', 'MacBook Pro', 'Intel', '2G', 'NT777');\ncomputers.add('Apple', 'MacBook Pro', 'Intel', '2G', '0J88A');\ncomputers.add('HP', 'Envy', 'Intel', '4G', 'CNU883701');\ncomputers.add('HP', 'Envy', 'Intel', '2G', 'TXU003283');\n\nconsole.log('Computers: ' + computers.getCount());\nconsole.log('Flyweights: ' + FlyWeightFactory.getCount());\n",[941,13416,13417,13426,13447,13459,13469,13481,13485,13489,13493,13502,13514,13526,13530,13551,13568,13586,13591,13596,13601,13606,13610,13614,13626,13630,13634,13643,13664,13671,13675,13679,13683,13695,13699,13708,13717,13721,13749,13764,13773,13777,13781,13791,13798,13802,13806,13813,13820,13824,13828,13832,13840,13866,13883,13895,13907,13922,13931,13935,13939,13943,13947,13962,13966,13999,14029,14059,14088,14117,14149,14178,14182,14203],{"__ignoreMap":998},[1002,13418,13419,13421,13424],{"class":1004,"line":1005},[1002,13420,2363],{"class":1015},[1002,13422,13423],{"class":1026}," Flyweight",[1002,13425,1457],{"class":1030},[1002,13427,13428,13431,13433,13436,13438,13440,13442,13445],{"class":1004,"line":1012},[1002,13429,13430],{"class":1026}," contructor",[1002,13432,1031],{"class":1030},[1002,13434,13435],{"class":2378},"make",[1002,13437,1251],{"class":1030},[1002,13439,3978],{"class":2378},[1002,13441,1251],{"class":1030},[1002,13443,13444],{"class":2378},"processor",[1002,13446,2382],{"class":1030},[1002,13448,13449,13451,13454,13456],{"class":1004,"line":1047},[1002,13450,2387],{"class":1019},[1002,13452,13453],{"class":1030},".make ",[1002,13455,2393],{"class":1015},[1002,13457,13458],{"class":1030}," make;\n",[1002,13460,13461,13463,13465,13467],{"class":1004,"line":1054},[1002,13462,2387],{"class":1019},[1002,13464,3997],{"class":1030},[1002,13466,2393],{"class":1015},[1002,13468,4002],{"class":1030},[1002,13470,13471,13473,13476,13478],{"class":1004,"line":1060},[1002,13472,2387],{"class":1019},[1002,13474,13475],{"class":1030},".processor ",[1002,13477,2393],{"class":1015},[1002,13479,13480],{"class":1030}," processor;\n",[1002,13482,13483],{"class":1004,"line":1272},[1002,13484,1269],{"class":1030},[1002,13486,13487],{"class":1004,"line":1348},[1002,13488,1170],{"class":1030},[1002,13490,13491],{"class":1004,"line":1354},[1002,13492,1051],{"emptyLinePlaceholder":1050},[1002,13494,13495,13497,13500],{"class":1004,"line":1360},[1002,13496,2363],{"class":1015},[1002,13498,13499],{"class":1026}," FlyWeightFactory",[1002,13501,1457],{"class":1030},[1002,13503,13504,13507,13510,13512],{"class":1004,"line":1366},[1002,13505,13506],{"class":1015}," static",[1002,13508,13509],{"class":2378}," flyweights",[1002,13511,1023],{"class":1015},[1002,13513,7217],{"class":1030},[1002,13515,13516,13518,13520,13522,13524],{"class":1004,"line":1946},[1002,13517,13506],{"class":1015},[1002,13519,4668],{"class":2378},[1002,13521,1023],{"class":1015},[1002,13523,4910],{"class":1019},[1002,13525,1407],{"class":1030},[1002,13527,13528],{"class":1004,"line":1956},[1002,13529,1051],{"emptyLinePlaceholder":1050},[1002,13531,13532,13534,13537,13539,13541,13543,13545,13547,13549],{"class":1004,"line":1961},[1002,13533,13506],{"class":1015},[1002,13535,13536],{"class":1026}," get",[1002,13538,1031],{"class":1030},[1002,13540,13435],{"class":2378},[1002,13542,1251],{"class":1030},[1002,13544,3978],{"class":2378},[1002,13546,1251],{"class":1030},[1002,13548,13444],{"class":2378},[1002,13550,2382],{"class":1030},[1002,13552,13553,13555,13557,13560,13563,13565],{"class":1004,"line":1971},[1002,13554,4368],{"class":1015},[1002,13556,6513],{"class":1030},[1002,13558,13559],{"class":1015},"!",[1002,13561,13562],{"class":1030},"FlyWeightFactory.flyweights[make ",[1002,13564,5064],{"class":1015},[1002,13566,13567],{"class":1030}," model]) {\n",[1002,13569,13570,13573,13575,13578,13580,13582,13584],{"class":1004,"line":1980},[1002,13571,13572],{"class":1030}," FlyWeightFactory.flyweights[make ",[1002,13574,5064],{"class":1015},[1002,13576,13577],{"class":1030}," model] ",[1002,13579,2393],{"class":1015},[1002,13581,2690],{"class":1015},[1002,13583,13423],{"class":1026},[1002,13585,10468],{"class":1030},[1002,13587,13588],{"class":1004,"line":1985},[1002,13589,13590],{"class":1030}," make,\n",[1002,13592,13593],{"class":1004,"line":1995},[1002,13594,13595],{"class":1030}," model,\n",[1002,13597,13598],{"class":1004,"line":2006},[1002,13599,13600],{"class":1030}," processor,\n",[1002,13602,13603],{"class":1004,"line":2011},[1002,13604,13605],{"class":1030}," );\n",[1002,13607,13608],{"class":1004,"line":2017},[1002,13609,2014],{"class":1030},[1002,13611,13612],{"class":1004,"line":2022},[1002,13613,1051],{"emptyLinePlaceholder":1050},[1002,13615,13616,13618,13621,13623],{"class":1004,"line":2442},[1002,13617,2687],{"class":1015},[1002,13619,13620],{"class":1030}," FlyWeightFactory.flyweights[make ",[1002,13622,5064],{"class":1015},[1002,13624,13625],{"class":1030}," model];\n",[1002,13627,13628],{"class":1004,"line":2466},[1002,13629,1269],{"class":1030},[1002,13631,13632],{"class":1004,"line":2471},[1002,13633,1051],{"emptyLinePlaceholder":1050},[1002,13635,13636,13638,13641],{"class":1004,"line":2476},[1002,13637,13506],{"class":1015},[1002,13639,13640],{"class":1026}," getCount",[1002,13642,3025],{"class":1030},[1002,13644,13645,13647,13649,13651,13654,13657,13660,13662],{"class":1004,"line":2481},[1002,13646,6841],{"class":1015},[1002,13648,6513],{"class":1030},[1002,13650,6516],{"class":1015},[1002,13652,13653],{"class":1030}," f ",[1002,13655,13656],{"class":1015},"in",[1002,13658,13659],{"class":1030}," FlyWeightFactory.flyweights) FlyWeightFactory.count",[1002,13661,6545],{"class":1015},[1002,13663,1407],{"class":1030},[1002,13665,13666,13668],{"class":1004,"line":2491},[1002,13667,2687],{"class":1015},[1002,13669,13670],{"class":1030}," FlyWeightFactory.count;\n",[1002,13672,13673],{"class":1004,"line":2502},[1002,13674,1269],{"class":1030},[1002,13676,13677],{"class":1004,"line":2513},[1002,13678,1170],{"class":1030},[1002,13680,13681],{"class":1004,"line":2535},[1002,13682,1051],{"emptyLinePlaceholder":1050},[1002,13684,13685,13687,13689,13691,13693],{"class":1004,"line":2557},[1002,13686,6516],{"class":1015},[1002,13688,4700],{"class":1030},[1002,13690,2393],{"class":1015},[1002,13692,4910],{"class":1019},[1002,13694,1407],{"class":1030},[1002,13696,13697],{"class":1004,"line":2562},[1002,13698,1051],{"emptyLinePlaceholder":1050},[1002,13700,13701,13703,13706],{"class":1004,"line":2567},[1002,13702,2363],{"class":1015},[1002,13704,13705],{"class":1026}," ComputerCollection",[1002,13707,1457],{"class":1030},[1002,13709,13710,13713,13715],{"class":1004,"line":2572},[1002,13711,13712],{"class":2378}," computers",[1002,13714,1023],{"class":1015},[1002,13716,7217],{"class":1030},[1002,13718,13719],{"class":1004,"line":2582},[1002,13720,1051],{"emptyLinePlaceholder":1050},[1002,13722,13723,13725,13727,13729,13731,13733,13735,13737,13739,13742,13744,13747],{"class":1004,"line":2594},[1002,13724,5042],{"class":1026},[1002,13726,1031],{"class":1030},[1002,13728,13435],{"class":2378},[1002,13730,1251],{"class":1030},[1002,13732,3978],{"class":2378},[1002,13734,1251],{"class":1030},[1002,13736,13444],{"class":2378},[1002,13738,1251],{"class":1030},[1002,13740,13741],{"class":2378},"memory",[1002,13743,1251],{"class":1030},[1002,13745,13746],{"class":2378},"tag",[1002,13748,2382],{"class":1030},[1002,13750,13751,13754,13756,13758,13761],{"class":1004,"line":2603},[1002,13752,13753],{"class":1030}," computers[tag] ",[1002,13755,2393],{"class":1015},[1002,13757,2690],{"class":1015},[1002,13759,13760],{"class":1026}," Computer",[1002,13762,13763],{"class":1030},"(make, model, processor, memory, tag);\n",[1002,13765,13766,13769,13771],{"class":1004,"line":2619},[1002,13767,13768],{"class":1030}," count",[1002,13770,6545],{"class":1015},[1002,13772,1407],{"class":1030},[1002,13774,13775],{"class":1004,"line":2633},[1002,13776,1269],{"class":1030},[1002,13778,13779],{"class":1004,"line":2641},[1002,13780,1051],{"emptyLinePlaceholder":1050},[1002,13782,13783,13785,13787,13789],{"class":1004,"line":2655},[1002,13784,7887],{"class":1026},[1002,13786,1031],{"class":1030},[1002,13788,13746],{"class":2378},[1002,13790,2382],{"class":1030},[1002,13792,13793,13795],{"class":1004,"line":2667},[1002,13794,2687],{"class":1015},[1002,13796,13797],{"class":1030}," computers[tag];\n",[1002,13799,13800],{"class":1004,"line":2674},[1002,13801,1269],{"class":1030},[1002,13803,13804],{"class":1004,"line":2679},[1002,13805,1051],{"emptyLinePlaceholder":1050},[1002,13807,13808,13811],{"class":1004,"line":2684},[1002,13809,13810],{"class":1026}," getCount",[1002,13812,3025],{"class":1030},[1002,13814,13815,13817],{"class":1004,"line":2704},[1002,13816,2687],{"class":1015},[1002,13818,13819],{"class":1030}," count;\n",[1002,13821,13822],{"class":1004,"line":2709},[1002,13823,1269],{"class":1030},[1002,13825,13826],{"class":1004,"line":2714},[1002,13827,1170],{"class":1030},[1002,13829,13830],{"class":1004,"line":2719},[1002,13831,1051],{"emptyLinePlaceholder":1050},[1002,13833,13834,13836,13838],{"class":1004,"line":2735},[1002,13835,2363],{"class":1015},[1002,13837,13760],{"class":1026},[1002,13839,1457],{"class":1030},[1002,13841,13842,13844,13846,13848,13850,13852,13854,13856,13858,13860,13862,13864],{"class":1004,"line":2740},[1002,13843,2373],{"class":1015},[1002,13845,1031],{"class":1030},[1002,13847,13435],{"class":2378},[1002,13849,1251],{"class":1030},[1002,13851,3978],{"class":2378},[1002,13853,1251],{"class":1030},[1002,13855,13444],{"class":2378},[1002,13857,1251],{"class":1030},[1002,13859,13741],{"class":2378},[1002,13861,1251],{"class":1030},[1002,13863,13746],{"class":2378},[1002,13865,2382],{"class":1030},[1002,13867,13868,13870,13873,13875,13878,13880],{"class":1004,"line":2759},[1002,13869,2387],{"class":1019},[1002,13871,13872],{"class":1030},".flyweight ",[1002,13874,2393],{"class":1015},[1002,13876,13877],{"class":1030}," FlyWeightFactory.",[1002,13879,8070],{"class":1026},[1002,13881,13882],{"class":1030},"(make, model, processor);\n",[1002,13884,13885,13887,13890,13892],{"class":1004,"line":2774},[1002,13886,2387],{"class":1019},[1002,13888,13889],{"class":1030},".memory ",[1002,13891,2393],{"class":1015},[1002,13893,13894],{"class":1030}," memory;\n",[1002,13896,13897,13899,13902,13904],{"class":1004,"line":2790},[1002,13898,2387],{"class":1019},[1002,13900,13901],{"class":1030},".tag ",[1002,13903,2393],{"class":1015},[1002,13905,13906],{"class":1030}," tag;\n",[1002,13908,13909,13911,13913,13916,13918,13920],{"class":1004,"line":2801},[1002,13910,2387],{"class":1019},[1002,13912,948],{"class":1030},[1002,13914,13915],{"class":1026},"getMake",[1002,13917,1023],{"class":1015},[1002,13919,8457],{"class":1015},[1002,13921,9772],{"class":1030},[1002,13923,13924,13926,13928],{"class":1004,"line":2807},[1002,13925,4376],{"class":1015},[1002,13927,2693],{"class":1019},[1002,13929,13930],{"class":1030},".flyweight.make;\n",[1002,13932,13933],{"class":1004,"line":2812},[1002,13934,10900],{"class":1030},[1002,13936,13937],{"class":1004,"line":2828},[1002,13938,1269],{"class":1030},[1002,13940,13941],{"class":1004,"line":2841},[1002,13942,1170],{"class":1030},[1002,13944,13945],{"class":1004,"line":2854},[1002,13946,1051],{"emptyLinePlaceholder":1050},[1002,13948,13949,13951,13954,13956,13958,13960],{"class":1004,"line":2864},[1002,13950,1016],{"class":1015},[1002,13952,13953],{"class":1019}," computers",[1002,13955,1023],{"class":1015},[1002,13957,2690],{"class":1015},[1002,13959,13705],{"class":1026},[1002,13961,1428],{"class":1030},[1002,13963,13964],{"class":1004,"line":2869},[1002,13965,1051],{"emptyLinePlaceholder":1050},[1002,13967,13968,13971,13973,13975,13977,13979,13982,13984,13987,13989,13992,13994,13997],{"class":1004,"line":2874},[1002,13969,13970],{"class":1030},"computers.",[1002,13972,7985],{"class":1026},[1002,13974,1031],{"class":1030},[1002,13976,6916],{"class":1034},[1002,13978,1251],{"class":1030},[1002,13980,13981],{"class":1034},"'MacBook Pro'",[1002,13983,1251],{"class":1030},[1002,13985,13986],{"class":1034},"'Intel'",[1002,13988,1251],{"class":1030},[1002,13990,13991],{"class":1034},"'5G'",[1002,13993,1251],{"class":1030},[1002,13995,13996],{"class":1034},"'Y755P'",[1002,13998,1085],{"class":1030},[1002,14000,14001,14003,14005,14007,14009,14011,14013,14015,14017,14019,14022,14024,14027],{"class":1004,"line":2880},[1002,14002,13970],{"class":1030},[1002,14004,7985],{"class":1026},[1002,14006,1031],{"class":1030},[1002,14008,6916],{"class":1034},[1002,14010,1251],{"class":1030},[1002,14012,13981],{"class":1034},[1002,14014,1251],{"class":1030},[1002,14016,13986],{"class":1034},[1002,14018,1251],{"class":1030},[1002,14020,14021],{"class":1034},"'6G'",[1002,14023,1251],{"class":1030},[1002,14025,14026],{"class":1034},"'X997T'",[1002,14028,1085],{"class":1030},[1002,14030,14031,14033,14035,14037,14039,14041,14043,14045,14047,14049,14052,14054,14057],{"class":1004,"line":2903},[1002,14032,13970],{"class":1030},[1002,14034,7985],{"class":1026},[1002,14036,1031],{"class":1030},[1002,14038,6916],{"class":1034},[1002,14040,1251],{"class":1030},[1002,14042,13981],{"class":1034},[1002,14044,1251],{"class":1030},[1002,14046,13986],{"class":1034},[1002,14048,1251],{"class":1030},[1002,14050,14051],{"class":1034},"'2G'",[1002,14053,1251],{"class":1030},[1002,14055,14056],{"class":1034},"'U8U80'",[1002,14058,1085],{"class":1030},[1002,14060,14061,14063,14065,14067,14069,14071,14073,14075,14077,14079,14081,14083,14086],{"class":1004,"line":2909},[1002,14062,13970],{"class":1030},[1002,14064,7985],{"class":1026},[1002,14066,1031],{"class":1030},[1002,14068,6916],{"class":1034},[1002,14070,1251],{"class":1030},[1002,14072,13981],{"class":1034},[1002,14074,1251],{"class":1030},[1002,14076,13986],{"class":1034},[1002,14078,1251],{"class":1030},[1002,14080,14051],{"class":1034},[1002,14082,1251],{"class":1030},[1002,14084,14085],{"class":1034},"'NT777'",[1002,14087,1085],{"class":1030},[1002,14089,14090,14092,14094,14096,14098,14100,14102,14104,14106,14108,14110,14112,14115],{"class":1004,"line":2919},[1002,14091,13970],{"class":1030},[1002,14093,7985],{"class":1026},[1002,14095,1031],{"class":1030},[1002,14097,6916],{"class":1034},[1002,14099,1251],{"class":1030},[1002,14101,13981],{"class":1034},[1002,14103,1251],{"class":1030},[1002,14105,13986],{"class":1034},[1002,14107,1251],{"class":1030},[1002,14109,14051],{"class":1034},[1002,14111,1251],{"class":1030},[1002,14113,14114],{"class":1034},"'0J88A'",[1002,14116,1085],{"class":1030},[1002,14118,14119,14121,14123,14125,14128,14130,14133,14135,14137,14139,14142,14144,14147],{"class":1004,"line":2924},[1002,14120,13970],{"class":1030},[1002,14122,7985],{"class":1026},[1002,14124,1031],{"class":1030},[1002,14126,14127],{"class":1034},"'HP'",[1002,14129,1251],{"class":1030},[1002,14131,14132],{"class":1034},"'Envy'",[1002,14134,1251],{"class":1030},[1002,14136,13986],{"class":1034},[1002,14138,1251],{"class":1030},[1002,14140,14141],{"class":1034},"'4G'",[1002,14143,1251],{"class":1030},[1002,14145,14146],{"class":1034},"'CNU883701'",[1002,14148,1085],{"class":1030},[1002,14150,14151,14153,14155,14157,14159,14161,14163,14165,14167,14169,14171,14173,14176],{"class":1004,"line":2944},[1002,14152,13970],{"class":1030},[1002,14154,7985],{"class":1026},[1002,14156,1031],{"class":1030},[1002,14158,14127],{"class":1034},[1002,14160,1251],{"class":1030},[1002,14162,14132],{"class":1034},[1002,14164,1251],{"class":1030},[1002,14166,13986],{"class":1034},[1002,14168,1251],{"class":1030},[1002,14170,14051],{"class":1034},[1002,14172,1251],{"class":1030},[1002,14174,14175],{"class":1034},"'TXU003283'",[1002,14177,1085],{"class":1030},[1002,14179,14180],{"class":1004,"line":2950},[1002,14181,1051],{"emptyLinePlaceholder":1050},[1002,14183,14184,14186,14188,14190,14193,14195,14198,14201],{"class":1004,"line":5466},[1002,14185,2883],{"class":1030},[1002,14187,2886],{"class":1026},[1002,14189,1031],{"class":1030},[1002,14191,14192],{"class":1034},"'Computers: '",[1002,14194,6583],{"class":1015},[1002,14196,14197],{"class":1030}," computers.",[1002,14199,14200],{"class":1026},"getCount",[1002,14202,3885],{"class":1030},[1002,14204,14205,14207,14209,14211,14214,14216,14218,14220],{"class":1004,"line":5477},[1002,14206,2883],{"class":1030},[1002,14208,2886],{"class":1026},[1002,14210,1031],{"class":1030},[1002,14212,14213],{"class":1034},"'Flyweights: '",[1002,14215,6583],{"class":1015},[1002,14217,13877],{"class":1030},[1002,14219,14200],{"class":1026},[1002,14221,3885],{"class":1030},[925,14223,14224],{},"In the above example code, we are building computers. Many models, makes, and processor combinations are common, so these characteristics are factored out and shared by Flyweight objects.",[1655,14226,14228],{"id":14227},"proxy","Proxy",[925,14230,3898,14231,14235],{},[1107,14232,14233],{},[928,14234,14228],{}," pattern is a structural design pattern. A proxy, in its most general form, is a class functioning as an interface to something else.",[925,14237,14238],{},[963,14239],{"alt":14228,"src":14240},"\u002Fimages\u002Fblog\u002F2021-12-16-javascript-design-patterns\u002Fproxy.png",[925,14242,3295,14243,14247],{},[1107,14244,14245],{},[928,14246,14228],{}," pattern provides a surrogate or placeholder object for another object and controls access to this other object.",[993,14249,14251],{"className":2227,"code":14250,"language":2229,"meta":998,"style":998},"class GeoCoder {\n getLatLng(address) {\n if (address === 'Amsterdam') {\n return '52.3700° N, 4.8900° E';\n } else if (address === 'London') {\n return '51.5171° N, 0.1062° W';\n } else if (address === 'Paris') {\n return '48.8742° N, 2.3470° E';\n } else if (address === 'Berlin') {\n return '52.5233° N, 13.4127° E';\n } else {\n return '';\n }\n }\n}\n\nclass GeoProxy {\n constructor() {\n const geocoder = new GeoCoder();\n const geocache = {};\n\n return {\n getLatLng: function (address) {\n if (!geocache[address]) {\n geocache[address] = geocoder.getLatLng(address);\n }\n console.log(address + ': ' + geocache[address]);\n return geocache[address];\n },\n getCount: function () {\n const count = 0;\n for (let code in geocache) {\n count++;\n }\n return count;\n },\n };\n }\n}\n\nconst geo = new GeoProxy();\n\n\u002F\u002F geolocation requests\ngeo.getLatLng('Paris');\ngeo.getLatLng('London');\ngeo.getLatLng('London');\ngeo.getLatLng('London');\ngeo.getLatLng('London');\ngeo.getLatLng('Amsterdam');\ngeo.getLatLng('Amsterdam');\ngeo.getLatLng('Amsterdam');\ngeo.getLatLng('Amsterdam');\ngeo.getLatLng('London');\ngeo.getLatLng('London');\n\nconsole.log('\\nCache size: ' + geo.getCount());\n",[941,14252,14253,14262,14274,14288,14297,14314,14323,14340,14349,14366,14375,14383,14391,14395,14399,14403,14407,14416,14422,14437,14448,14452,14458,14473,14484,14500,14504,14523,14530,14534,14545,14558,14575,14584,14588,14594,14598,14602,14606,14610,14614,14629,14633,14638,14652,14665,14677,14689,14701,14714,14726,14738,14750,14762,14774,14778],{"__ignoreMap":998},[1002,14254,14255,14257,14260],{"class":1004,"line":1005},[1002,14256,2363],{"class":1015},[1002,14258,14259],{"class":1026}," GeoCoder",[1002,14261,1457],{"class":1030},[1002,14263,14264,14267,14269,14272],{"class":1004,"line":1012},[1002,14265,14266],{"class":1026}," getLatLng",[1002,14268,1031],{"class":1030},[1002,14270,14271],{"class":2378},"address",[1002,14273,2382],{"class":1030},[1002,14275,14276,14278,14281,14283,14286],{"class":1004,"line":1047},[1002,14277,4368],{"class":1015},[1002,14279,14280],{"class":1030}," (address ",[1002,14282,2892],{"class":1015},[1002,14284,14285],{"class":1034}," 'Amsterdam'",[1002,14287,2382],{"class":1030},[1002,14289,14290,14292,14295],{"class":1004,"line":1054},[1002,14291,4376],{"class":1015},[1002,14293,14294],{"class":1034}," '52.3700° N, 4.8900° E'",[1002,14296,1407],{"class":1030},[1002,14298,14299,14301,14303,14305,14307,14309,14312],{"class":1004,"line":1060},[1002,14300,6057],{"class":1030},[1002,14302,6060],{"class":1015},[1002,14304,6063],{"class":1015},[1002,14306,14280],{"class":1030},[1002,14308,2892],{"class":1015},[1002,14310,14311],{"class":1034}," 'London'",[1002,14313,2382],{"class":1030},[1002,14315,14316,14318,14321],{"class":1004,"line":1272},[1002,14317,4376],{"class":1015},[1002,14319,14320],{"class":1034}," '51.5171° N, 0.1062° W'",[1002,14322,1407],{"class":1030},[1002,14324,14325,14327,14329,14331,14333,14335,14338],{"class":1004,"line":1348},[1002,14326,6057],{"class":1030},[1002,14328,6060],{"class":1015},[1002,14330,6063],{"class":1015},[1002,14332,14280],{"class":1030},[1002,14334,2892],{"class":1015},[1002,14336,14337],{"class":1034}," 'Paris'",[1002,14339,2382],{"class":1030},[1002,14341,14342,14344,14347],{"class":1004,"line":1354},[1002,14343,4376],{"class":1015},[1002,14345,14346],{"class":1034}," '48.8742° N, 2.3470° E'",[1002,14348,1407],{"class":1030},[1002,14350,14351,14353,14355,14357,14359,14361,14364],{"class":1004,"line":1360},[1002,14352,6057],{"class":1030},[1002,14354,6060],{"class":1015},[1002,14356,6063],{"class":1015},[1002,14358,14280],{"class":1030},[1002,14360,2892],{"class":1015},[1002,14362,14363],{"class":1034}," 'Berlin'",[1002,14365,2382],{"class":1030},[1002,14367,14368,14370,14373],{"class":1004,"line":1366},[1002,14369,4376],{"class":1015},[1002,14371,14372],{"class":1034}," '52.5233° N, 13.4127° E'",[1002,14374,1407],{"class":1030},[1002,14376,14377,14379,14381],{"class":1004,"line":1946},[1002,14378,6057],{"class":1030},[1002,14380,6060],{"class":1015},[1002,14382,1457],{"class":1030},[1002,14384,14385,14387,14389],{"class":1004,"line":1956},[1002,14386,4376],{"class":1015},[1002,14388,9123],{"class":1034},[1002,14390,1407],{"class":1030},[1002,14392,14393],{"class":1004,"line":1961},[1002,14394,2014],{"class":1030},[1002,14396,14397],{"class":1004,"line":1971},[1002,14398,1269],{"class":1030},[1002,14400,14401],{"class":1004,"line":1980},[1002,14402,1170],{"class":1030},[1002,14404,14405],{"class":1004,"line":1985},[1002,14406,1051],{"emptyLinePlaceholder":1050},[1002,14408,14409,14411,14414],{"class":1004,"line":1995},[1002,14410,2363],{"class":1015},[1002,14412,14413],{"class":1026}," GeoProxy",[1002,14415,1457],{"class":1030},[1002,14417,14418,14420],{"class":1004,"line":2006},[1002,14419,2373],{"class":1015},[1002,14421,3025],{"class":1030},[1002,14423,14424,14426,14429,14431,14433,14435],{"class":1004,"line":2011},[1002,14425,4348],{"class":1015},[1002,14427,14428],{"class":1019}," geocoder",[1002,14430,1023],{"class":1015},[1002,14432,2690],{"class":1015},[1002,14434,14259],{"class":1026},[1002,14436,1428],{"class":1030},[1002,14438,14439,14441,14444,14446],{"class":1004,"line":2017},[1002,14440,4348],{"class":1015},[1002,14442,14443],{"class":1019}," geocache",[1002,14445,1023],{"class":1015},[1002,14447,7217],{"class":1030},[1002,14449,14450],{"class":1004,"line":2022},[1002,14451,1051],{"emptyLinePlaceholder":1050},[1002,14453,14454,14456],{"class":1004,"line":2442},[1002,14455,2687],{"class":1015},[1002,14457,1457],{"class":1030},[1002,14459,14460,14463,14465,14467,14469,14471],{"class":1004,"line":2466},[1002,14461,14462],{"class":1026}," getLatLng",[1002,14464,1137],{"class":1030},[1002,14466,6965],{"class":1015},[1002,14468,6513],{"class":1030},[1002,14470,14271],{"class":2378},[1002,14472,2382],{"class":1030},[1002,14474,14475,14477,14479,14481],{"class":1004,"line":2471},[1002,14476,7347],{"class":1015},[1002,14478,6513],{"class":1030},[1002,14480,13559],{"class":1015},[1002,14482,14483],{"class":1030},"geocache[address]) {\n",[1002,14485,14486,14489,14491,14494,14497],{"class":1004,"line":2476},[1002,14487,14488],{"class":1030}," geocache[address] ",[1002,14490,2393],{"class":1015},[1002,14492,14493],{"class":1030}," geocoder.",[1002,14495,14496],{"class":1026},"getLatLng",[1002,14498,14499],{"class":1030},"(address);\n",[1002,14501,14502],{"class":1004,"line":2481},[1002,14503,7377],{"class":1030},[1002,14505,14506,14509,14511,14514,14516,14518,14520],{"class":1004,"line":2491},[1002,14507,14508],{"class":1030}," console.",[1002,14510,2886],{"class":1026},[1002,14512,14513],{"class":1030},"(address ",[1002,14515,5064],{"class":1015},[1002,14517,7173],{"class":1034},[1002,14519,6583],{"class":1015},[1002,14521,14522],{"class":1030}," geocache[address]);\n",[1002,14524,14525,14527],{"class":1004,"line":2502},[1002,14526,8341],{"class":1015},[1002,14528,14529],{"class":1030}," geocache[address];\n",[1002,14531,14532],{"class":1004,"line":2513},[1002,14533,1922],{"class":1030},[1002,14535,14536,14539,14541,14543],{"class":1004,"line":2535},[1002,14537,14538],{"class":1026}," getCount",[1002,14540,1137],{"class":1030},[1002,14542,6965],{"class":1015},[1002,14544,9772],{"class":1030},[1002,14546,14547,14550,14552,14554,14556],{"class":1004,"line":2557},[1002,14548,14549],{"class":1015}," const",[1002,14551,4668],{"class":1019},[1002,14553,1023],{"class":1015},[1002,14555,4910],{"class":1019},[1002,14557,1407],{"class":1030},[1002,14559,14560,14563,14565,14567,14570,14572],{"class":1004,"line":2562},[1002,14561,14562],{"class":1015}," for",[1002,14564,6513],{"class":1030},[1002,14566,6516],{"class":1015},[1002,14568,14569],{"class":1030}," code ",[1002,14571,13656],{"class":1015},[1002,14573,14574],{"class":1030}," geocache) {\n",[1002,14576,14577,14580,14582],{"class":1004,"line":2567},[1002,14578,14579],{"class":1030}," count",[1002,14581,6545],{"class":1015},[1002,14583,1407],{"class":1030},[1002,14585,14586],{"class":1004,"line":2572},[1002,14587,7377],{"class":1030},[1002,14589,14590,14592],{"class":1004,"line":2582},[1002,14591,8341],{"class":1015},[1002,14593,13819],{"class":1030},[1002,14595,14596],{"class":1004,"line":2594},[1002,14597,1922],{"class":1030},[1002,14599,14600],{"class":1004,"line":2603},[1002,14601,10900],{"class":1030},[1002,14603,14604],{"class":1004,"line":2619},[1002,14605,1269],{"class":1030},[1002,14607,14608],{"class":1004,"line":2633},[1002,14609,1170],{"class":1030},[1002,14611,14612],{"class":1004,"line":2641},[1002,14613,1051],{"emptyLinePlaceholder":1050},[1002,14615,14616,14618,14621,14623,14625,14627],{"class":1004,"line":2655},[1002,14617,1016],{"class":1015},[1002,14619,14620],{"class":1019}," geo",[1002,14622,1023],{"class":1015},[1002,14624,2690],{"class":1015},[1002,14626,14413],{"class":1026},[1002,14628,1428],{"class":1030},[1002,14630,14631],{"class":1004,"line":2667},[1002,14632,1051],{"emptyLinePlaceholder":1050},[1002,14634,14635],{"class":1004,"line":2674},[1002,14636,14637],{"class":1008},"\u002F\u002F geolocation requests\n",[1002,14639,14640,14643,14645,14647,14650],{"class":1004,"line":2679},[1002,14641,14642],{"class":1030},"geo.",[1002,14644,14496],{"class":1026},[1002,14646,1031],{"class":1030},[1002,14648,14649],{"class":1034},"'Paris'",[1002,14651,1085],{"class":1030},[1002,14653,14654,14656,14658,14660,14663],{"class":1004,"line":2684},[1002,14655,14642],{"class":1030},[1002,14657,14496],{"class":1026},[1002,14659,1031],{"class":1030},[1002,14661,14662],{"class":1034},"'London'",[1002,14664,1085],{"class":1030},[1002,14666,14667,14669,14671,14673,14675],{"class":1004,"line":2704},[1002,14668,14642],{"class":1030},[1002,14670,14496],{"class":1026},[1002,14672,1031],{"class":1030},[1002,14674,14662],{"class":1034},[1002,14676,1085],{"class":1030},[1002,14678,14679,14681,14683,14685,14687],{"class":1004,"line":2709},[1002,14680,14642],{"class":1030},[1002,14682,14496],{"class":1026},[1002,14684,1031],{"class":1030},[1002,14686,14662],{"class":1034},[1002,14688,1085],{"class":1030},[1002,14690,14691,14693,14695,14697,14699],{"class":1004,"line":2714},[1002,14692,14642],{"class":1030},[1002,14694,14496],{"class":1026},[1002,14696,1031],{"class":1030},[1002,14698,14662],{"class":1034},[1002,14700,1085],{"class":1030},[1002,14702,14703,14705,14707,14709,14712],{"class":1004,"line":2719},[1002,14704,14642],{"class":1030},[1002,14706,14496],{"class":1026},[1002,14708,1031],{"class":1030},[1002,14710,14711],{"class":1034},"'Amsterdam'",[1002,14713,1085],{"class":1030},[1002,14715,14716,14718,14720,14722,14724],{"class":1004,"line":2735},[1002,14717,14642],{"class":1030},[1002,14719,14496],{"class":1026},[1002,14721,1031],{"class":1030},[1002,14723,14711],{"class":1034},[1002,14725,1085],{"class":1030},[1002,14727,14728,14730,14732,14734,14736],{"class":1004,"line":2740},[1002,14729,14642],{"class":1030},[1002,14731,14496],{"class":1026},[1002,14733,1031],{"class":1030},[1002,14735,14711],{"class":1034},[1002,14737,1085],{"class":1030},[1002,14739,14740,14742,14744,14746,14748],{"class":1004,"line":2759},[1002,14741,14642],{"class":1030},[1002,14743,14496],{"class":1026},[1002,14745,1031],{"class":1030},[1002,14747,14711],{"class":1034},[1002,14749,1085],{"class":1030},[1002,14751,14752,14754,14756,14758,14760],{"class":1004,"line":2774},[1002,14753,14642],{"class":1030},[1002,14755,14496],{"class":1026},[1002,14757,1031],{"class":1030},[1002,14759,14662],{"class":1034},[1002,14761,1085],{"class":1030},[1002,14763,14764,14766,14768,14770,14772],{"class":1004,"line":2790},[1002,14765,14642],{"class":1030},[1002,14767,14496],{"class":1026},[1002,14769,1031],{"class":1030},[1002,14771,14662],{"class":1034},[1002,14773,1085],{"class":1030},[1002,14775,14776],{"class":1004,"line":2801},[1002,14777,1051],{"emptyLinePlaceholder":1050},[1002,14779,14780,14782,14784,14786,14789,14791,14794,14796,14799,14801],{"class":1004,"line":2807},[1002,14781,2883],{"class":1030},[1002,14783,2886],{"class":1026},[1002,14785,1031],{"class":1030},[1002,14787,14788],{"class":1034},"'",[1002,14790,4636],{"class":1019},[1002,14792,14793],{"class":1034},"Cache size: '",[1002,14795,6583],{"class":1015},[1002,14797,14798],{"class":1030}," geo.",[1002,14800,14200],{"class":1026},[1002,14802,3885],{"class":1030},[953,14804,1521],{"id":1520},[925,14806,14807],{},"Design patterns represent some of the best practices adopted by experienced object-oriented software developers. They are time-tested solutions for various software design problems.",[925,14809,14810,14811,948],{},"The repository for all the code snippets can be found ",[933,14812,14815],{"href":14813,"rel":14814},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fjavascript-design-patterns",[937],"here",[925,14817,14818],{},"In this article, we have explored common creational design patterns in JavaScript including the following:",[925,14820,14821],{},"Factory Method\nAbstract Factory\nBuilder\nPrototype\nSingleton\nChain of responsibility\nCommand\nInterpreter\nIterator\nMediator\nMemento\nObserver\nState\nStrategy\nTemplate Method\nVisitor\nAdapter\nBridge\nComposite\nDecorator\nFaçade\nFlyweight\nProxy",[1579,14823,14824],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":14826},[14827,14828,14835,14836,14837,14838,14839,14840,14841,14842,14843,14844,14845,14846,14847,14856],{"id":2163,"depth":1012,"text":2164},{"id":2196,"depth":1012,"text":2197,"children":14829},[14830,14831,14832,14833,14834],{"id":2200,"depth":1047,"text":2201},{"id":2963,"depth":1047,"text":2964},{"id":3291,"depth":1047,"text":3292},{"id":3894,"depth":1047,"text":3895},{"id":4267,"depth":1047,"text":4268},{"id":4555,"depth":1012,"text":2197},{"id":4561,"depth":1012,"text":4562},{"id":4834,"depth":1012,"text":4835},{"id":5761,"depth":1012,"text":5762},{"id":6595,"depth":1012,"text":6596},{"id":7003,"depth":1012,"text":7004},{"id":7602,"depth":1012,"text":7603},{"id":8120,"depth":1012,"text":8121},{"id":8589,"depth":1012,"text":8590},{"id":9068,"depth":1012,"text":9069},{"id":9610,"depth":1012,"text":9611},{"id":9874,"depth":1012,"text":9875},{"id":10510,"depth":1012,"text":10511,"children":14848},[14849,14850,14851,14852,14853,14854,14855],{"id":10514,"depth":1047,"text":10515},{"id":11093,"depth":1047,"text":11094},{"id":11814,"depth":1047,"text":11815},{"id":12472,"depth":1047,"text":12473},{"id":12812,"depth":1047,"text":12815},{"id":13393,"depth":1047,"text":13396},{"id":14227,"depth":1047,"text":14228},{"id":1520,"depth":1012,"text":1521},"2021-12-16","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjavascript-design-patterns.jpg",{},{"title":516,"description":518},"blog\u002Fjavascript-design-patterns",[16,17,520],"JBdXOfhgp6kVrtVFFAVVSzUHAU9pE5N4FxwGZyVYcEg",{"id":14865,"title":421,"author":920,"body":14866,"date":15923,"description":423,"extension":1591,"image":15924,"meta":15925,"navigation":1050,"path":422,"seo":15926,"stem":15927,"tags":15928,"__hash__":15929},"blog\u002Fblog\u002Fimproving-next-js-performance.md",{"type":922,"value":14867,"toc":15911},[14868,14871,14875,14895,14898,14901,14906,14909,14914,14917,14922,14933,14938,14941,14944,14948,14959,15118,15124,15127,15131,15134,15144,15149,15152,15155,15158,15169,15172,15176,15192,15200,15204,15207,15215,15218,15228,15259,15262,15286,15289,15292,15301,15304,15335,15338,15380,15383,15389,15396,15403,15406,15409,15412,15426,15429,15508,15516,15519,15522,15835,15838,15847,15850,15853,15871,15886,15889,15891,15894,15908],[925,14869,14870],{},"If you have been using Next.js in production, you may want to explore a few different ways to improve your web application performance and get the best possible outcome from what Next.js provides you.",[953,14872,14874],{"id":14873},"table-of-contents","Table of Contents",[971,14876,14877,14880,14883,14886,14889,14892],{},[974,14878,14879],{},"Select the right rendering mode",[974,14881,14882],{},"Defer loading non-critical scripts to load when the page is idle",[974,14884,14885],{},"Image Optimization with the Image component",[974,14887,14888],{},"Code-splitting client-side code to reduce initial bundle size",[974,14890,14891],{},"Server-side rendering with React Server components (Beta)",[974,14893,14894],{},"Faster build times with SWC",[953,14896,14879],{"id":14897},"select-the-right-rendering-mode",[925,14899,14900],{},"Next.js at the moment supports three different methods of rendering pages that are built into the framework. Understanding how these methods work will greatly help you build your web application for performance.",[925,14902,14903],{},[1107,14904,14905],{},"Server-Rendering (SSR)",[925,14907,14908],{},"In response to each request, renders the app on the server, and then sends the rendered HTML and JavaScript back to the client.",[925,14910,14911],{},[1107,14912,14913],{},"Client-Side Rendering (CSR)",[925,14915,14916],{},"Renders the app in the browser on the client at run time.",[925,14918,14919],{},[1107,14920,14921],{},"Static Rendering (SR)",[925,14923,14924,14925,14928,14929,14932],{},"Usually generating a static HTML page for every URL. Pre-built app, or renders the app at build time (e.g. when you run the ",[928,14926,14927],{},"npm run build"," or ",[928,14930,14931],{},"yarn build"," command).",[925,14934,14935],{},[1107,14936,14937],{},"React Server components",[925,14939,14940],{},"React Server Components which is available in React 18 beta, will render components entirely server-side, making it possible to have a zero-KB client-side bundle.",[925,14942,14943],{},"Now let's look at the ways we can improve the performance of these methods.",[925,14945,14946],{},[1107,14947,14905],{},[925,14949,14950,14951,14954,14955,14958],{},"For a given time, if the content is considered ",[928,14952,14953],{},"fresh"," , you can add ",[941,14956,14957],{},"Cache-Control"," headers to instruct Vercel\u002FCDNs to cache the resulting HTML for a given period:",[993,14960,14962],{"className":2227,"code":14961,"language":2229,"meta":998,"style":998},"export async function getServerSideProps({ query, res }) {\n res.setHeader(\n 'Cache-Control',\n 'public, s-maxage=43200, stale-while-revalidate=60',\n );\n\n const { title, body, imageUrl } = await fetch('YOUR_API_URL');\n\n return {\n props: {\n generatedAt: Date.new().toString(),\n title,\n body,\n imageUrl,\n },\n };\n}\n",[941,14963,14964,14988,14998,15005,15012,15016,15020,15058,15062,15069,15074,15089,15094,15099,15104,15109,15114],{"__ignoreMap":998},[1002,14965,14966,14968,14971,14973,14976,14978,14981,14983,14986],{"class":1004,"line":1005},[1002,14967,947],{"class":1015},[1002,14969,14970],{"class":1015}," async",[1002,14972,8457],{"class":1015},[1002,14974,14975],{"class":1026}," getServerSideProps",[1002,14977,9219],{"class":1030},[1002,14979,14980],{"class":2378},"query",[1002,14982,1251],{"class":1030},[1002,14984,14985],{"class":2378},"res",[1002,14987,9225],{"class":1030},[1002,14989,14990,14993,14996],{"class":1004,"line":1012},[1002,14991,14992],{"class":1030}," res.",[1002,14994,14995],{"class":1026},"setHeader",[1002,14997,10468],{"class":1030},[1002,14999,15000,15003],{"class":1004,"line":1047},[1002,15001,15002],{"class":1034}," 'Cache-Control'",[1002,15004,1143],{"class":1030},[1002,15006,15007,15010],{"class":1004,"line":1054},[1002,15008,15009],{"class":1034}," 'public, s-maxage=43200, stale-while-revalidate=60'",[1002,15011,1143],{"class":1030},[1002,15013,15014],{"class":1004,"line":1060},[1002,15015,10503],{"class":1030},[1002,15017,15018],{"class":1004,"line":1272},[1002,15019,1051],{"emptyLinePlaceholder":1050},[1002,15021,15022,15024,15027,15030,15032,15035,15037,15040,15043,15045,15048,15051,15053,15056],{"class":1004,"line":1348},[1002,15023,10423],{"class":1015},[1002,15025,15026],{"class":1030}," { ",[1002,15028,15029],{"class":1019},"title",[1002,15031,1251],{"class":1030},[1002,15033,15034],{"class":1019},"body",[1002,15036,1251],{"class":1030},[1002,15038,15039],{"class":1019},"imageUrl",[1002,15041,15042],{"class":1030}," } ",[1002,15044,2393],{"class":1015},[1002,15046,15047],{"class":1015}," await",[1002,15049,15050],{"class":1026}," fetch",[1002,15052,1031],{"class":1030},[1002,15054,15055],{"class":1034},"'YOUR_API_URL'",[1002,15057,1085],{"class":1030},[1002,15059,15060],{"class":1004,"line":1354},[1002,15061,1051],{"emptyLinePlaceholder":1050},[1002,15063,15064,15067],{"class":1004,"line":1360},[1002,15065,15066],{"class":1015}," return",[1002,15068,1457],{"class":1030},[1002,15070,15071],{"class":1004,"line":1366},[1002,15072,15073],{"class":1030}," props: {\n",[1002,15075,15076,15079,15081,15083,15086],{"class":1004,"line":1946},[1002,15077,15078],{"class":1030}," generatedAt: Date.",[1002,15080,5654],{"class":1026},[1002,15082,12951],{"class":1030},[1002,15084,15085],{"class":1026},"toString",[1002,15087,15088],{"class":1030},"(),\n",[1002,15090,15091],{"class":1004,"line":1956},[1002,15092,15093],{"class":1030}," title,\n",[1002,15095,15096],{"class":1004,"line":1961},[1002,15097,15098],{"class":1030}," body,\n",[1002,15100,15101],{"class":1004,"line":1971},[1002,15102,15103],{"class":1030}," imageUrl,\n",[1002,15105,15106],{"class":1004,"line":1980},[1002,15107,15108],{"class":1030}," },\n",[1002,15110,15111],{"class":1004,"line":1985},[1002,15112,15113],{"class":1030}," };\n",[1002,15115,15116],{"class":1004,"line":1995},[1002,15117,1170],{"class":1030},[925,15119,15120,15123],{},[1107,15121,15122],{},"res.setHeader"," - This will cache the content of this page for 12 hours. After 12 hours, the content will continue to be served for a grace period of 60 seconds as new data is fetched. Then, the CDN will store a fresh copy for the next user.",[925,15125,15126],{},"This will enable you to offer server-side rendered dynamic content much faster to the users.",[925,15128,15129],{},[1107,15130,14921],{},[925,15132,15133],{},"This is the fastest way to load your website. Statically rendered pages are generated at the time your site is built. If your website doesn’t have a lot of content, and it doesn’t change between deployments, statically rendered pages will be the best option for you.",[925,15135,15136,15137,2034,15140,15143],{},"This is the default rending method for Next.js when ",[941,15138,15139],{},"getServerSideProps",[941,15141,15142],{},"getInitialProps"," are not being used in your page components.",[925,15145,15146],{},[1107,15147,15148],{},"Incremental static regeneration (ISR)",[925,15150,15151],{},"Incremental static regeneration is great for blogs and articles. If you publish content that can be rendered once per deployment, and it won’t change that often after, SR is the best option to go for.",[925,15153,15154],{},"For instance, let's say you deploy your web application every time you create new content\u002Fblog pages, this is the ideal option. But if the publication process involves third-party CMS platforms like Sitecore and the publication process doesn't involve deploying your codebase, then SSR is the best option to dynamically load content.",[925,15156,15157],{},"An ISR page differs by waiting until the browser requests the page before generating it. That process looks like this:",[1530,15159,15160,15163,15166],{},[974,15161,15162],{},"User requests the page (e.g. \u002Fpost).",[974,15164,15165],{},"If this is the first request for the \u002Fpost page since the last deployment, the server will generate and store the page in cache until the next deployment.",[974,15167,15168],{},"Each following request to \u002Fpost will then be served the pre-generated page from a cache.",[925,15170,15171],{},"Following this approach in a content-heavy web application (with many hundreds or even thousands of pages or articles), you will be able to reduce build wait time significantly while still offering viewers lightening fast page renders.",[1655,15173,15175],{"id":15174},"to-summarise-the-rendering-methods","To summarise the rendering methods:",[1530,15177,15178,15181,15189],{},[974,15179,15180],{},"For dynamic content or when the query parameters alter the rendered content of your page, use Server-Side Rendering (SSR).",[974,15182,15183,15184,948],{},"For scenarios where you have plenty of pages but don’t want to wait for them to be statically generated, use ",[933,15185,15188],{"href":15186,"rel":15187},"https:\u002F\u002Fvercel.com\u002Fdocs\u002Fconcepts\u002Fnext.js\u002Fincremental-static-regeneration",[937],"Incremental Static Regeneration (ISR)",[974,15190,15191],{},"If any of the above use cases don’t apply, use Statically Rendered pages.",[925,15193,15194,15195],{},"Read more about different Next.js rendering methods here: ",[933,15196,15199],{"href":15197,"rel":15198},"https:\u002F\u002Fszaranger.medium.com\u002Fnextjs-client-side-server-side-static-rendering-1836337998b9?source=your_stories_page----------------------------------------",[937],"https:\u002F\u002Fszaranger.medium.com\u002Fnextjs-client-side-server-side-static-rendering-1836337998b9",[15201,15202,14882],"h1",{"id":15203},"defer-loading-non-critical-scripts-to-load-when-the-page-is-idle",[925,15205,15206],{},"Websites often use third-party scripts for analytics, ads, customer support widgets, and consent management. However, this can introduce problems that impact both user and developer experience:",[1530,15208,15209,15212],{},[974,15210,15211],{},"Some third-party scripts are heavy on loading performance and can drag down the user experience, especially if they are render-blocking and delay any page content from loading",[974,15213,15214],{},"Developers often struggle to decide where to place third-party scripts in an application to ensure optimal loading",[925,15216,15217],{},"The Script component makes it easier for developers to place a third-party script anywhere in their application while taking care of optimizing its loading strategy.",[925,15219,15220,15221,15224,15225,15227],{},"With ",[941,15222,15223],{},"next\u002Fscript",", you decide when to load your third-party script by using the ",[941,15226,9068],{}," property:",[993,15229,15231],{"className":2227,"code":15230,"language":2229,"meta":998,"style":998},"\u003CScript src=\"https:\u002F\u002Fconnect.facebook.net\u002Fen_US\u002Fsdk.js\" strategy=\"lazyOnload\" \u002F>\n",[941,15232,15233],{"__ignoreMap":998},[1002,15234,15235,15237,15240,15243,15245,15248,15251,15253,15256],{"class":1004,"line":1005},[1002,15236,6539],{"class":1030},[1002,15238,15239],{"class":1019},"Script",[1002,15241,15242],{"class":1026}," src",[1002,15244,2393],{"class":1015},[1002,15246,15247],{"class":1034},"\"https:\u002F\u002Fconnect.facebook.net\u002Fen_US\u002Fsdk.js\"",[1002,15249,15250],{"class":1026}," strategy",[1002,15252,2393],{"class":1015},[1002,15254,15255],{"class":1034},"\"lazyOnload\"",[1002,15257,15258],{"class":1030}," \u002F>\n",[925,15260,15261],{},"There are three different loading strategies that can be used:",[1530,15263,15264,15270,15280],{},[974,15265,15266,15269],{},[941,15267,15268],{},"beforeInteractive",": Load before the page is interactive",[974,15271,15272,15275,15276,15279],{},[941,15273,15274],{},"afterInteractive",": (",[1107,15277,15278],{},"default","): Load immediately after the page becomes interactive",[974,15281,15282,15285],{},[941,15283,15284],{},"lazyOnload",": Load during idle time",[925,15287,15288],{},"If you’d like a script to have minimal impact on your page, use lazyOnload.",[953,15290,14885],{"id":15291},"image-optimization-with-the-image-component",[925,15293,15294,15295,15300],{},"Next’s ",[933,15296,15299],{"href":15297,"rel":15298},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fbasic-features\u002Fimage-optimization",[937],"Image"," is a powerful component that simplifies the responsive image generation, optimized using compression algorithms.",[925,15302,15303],{},"Here are some of the benefits of the Image component:",[1530,15305,15306,15316,15323,15329],{},[974,15307,15308,15311,15312,15315],{},[1107,15309,15310],{},"Built-in WebP and AVIF support."," The browser can display AVIF, WebP, PNG, SVG, or any other image-based MIME type by making the servers to be able to decipher which format to send via HTTP header. Eg: Accept: image\u002Favif, image\u002Fwebp, image\u002Fapng, image\u002Fsvg+xml, image\u002F",[928,15313,15314],{},",","\u002F*;q=0.8.",[974,15317,15318,15319,15322],{},"A",[1107,15320,15321],{},"utomatically avoid Cumulative Layout Shifts"," by placing a blurred or transparent placeholder image until the image has loaded.",[974,15324,15325,15328],{},[1107,15326,15327],{},"Responsive images are resized on the fly",", able to be cached by CDNs.",[974,15330,15331,15334],{},[1107,15332,15333],{},"It’s adaptable to responsive design."," The layout attribute allows you to specify images that should scale to fit or fill their containers.",[925,15336,15337],{},"You can enable WebP and AVIF by adding them to the to next.config.js:",[993,15339,15341],{"className":2227,"code":15340,"language":2229,"meta":998,"style":998},"{\n images: {\n formats: ['image\u002Fwebp', 'image\u002Favif'];\n }\n}\n",[941,15342,15343,15347,15355,15372,15376],{"__ignoreMap":998},[1002,15344,15345],{"class":1004,"line":1005},[1002,15346,1129],{"class":1030},[1002,15348,15349,15352],{"class":1004,"line":1012},[1002,15350,15351],{"class":1026}," images",[1002,15353,15354],{"class":1030},": {\n",[1002,15356,15357,15360,15362,15365,15367,15370],{"class":1004,"line":1047},[1002,15358,15359],{"class":1026}," formats",[1002,15361,1201],{"class":1030},[1002,15363,15364],{"class":1034},"'image\u002Fwebp'",[1002,15366,1251],{"class":1030},[1002,15368,15369],{"class":1034},"'image\u002Favif'",[1002,15371,6754],{"class":1030},[1002,15373,15374],{"class":1004,"line":1054},[1002,15375,1269],{"class":1030},[1002,15377,15378],{"class":1004,"line":1060},[1002,15379,1170],{"class":1030},[925,15381,15382],{},"By offering AVIF images to supported clients, you can reduce large detailed blog illustrations by 60% for large desktop displays.",[925,15384,15385,15386,15388],{},"Next.js’ Image component provides the power and flexibility that most pages require and is a solid upgrade on base functionality provided by native ",[963,15387],{}," elements.",[925,15390,15391,15392],{},"Read more about the options here: ",[933,15393,15394],{"href":15394,"rel":15395},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapi-reference\u002Fnext\u002Fimage",[937],[953,15397,15399,15400],{"id":15398},"code-splitting-client-side-code-to-reduce-initial-bundle-size","Code-splitting ",[1107,15401,15402],{},"client-side code to reduce initial bundle size",[925,15404,15405],{},"Code-splitting using dynamic imports, we can keep the Next.js bundle sizes small.",[925,15407,15408],{},"Code-splitting allows you to lazily-load dependencies or application code, as required by the user. This is done by splitting JavaScript bundles into smaller chunks which are small JavaScript files.",[925,15410,15411],{},"This helps us to accomplish the following:",[1530,15413,15414,15417,15420,15423],{},[974,15415,15416],{},"Faster initial page loads",[974,15418,15419],{},"Only load what’s required, so fewer to download",[974,15421,15422],{},"Fewer JavaScript to parse, compile and execute helping slower mobile devices",[974,15424,15425],{},"Chunks can be cached individually",[925,15427,15428],{},"In the example below, we are heavily reducing initial JavaScript bundle size by dynamically loading the Ad component, keeping them from appearing in the main JavaScript bundle:",[993,15430,15432],{"className":2227,"code":15431,"language":2229,"meta":998,"style":998},"\u002F\u002F Before\nimport Ad from 'components\u002FAd';\n\n\u002F\u002F After\nimport dynamic from 'next\u002Fdynamic';\n\nconst Ad = dynamic(() => import('components\u002FAd'));\n",[941,15433,15434,15439,15453,15457,15462,15476,15480],{"__ignoreMap":998},[1002,15435,15436],{"class":1004,"line":1005},[1002,15437,15438],{"class":1008},"\u002F\u002F Before\n",[1002,15440,15441,15443,15446,15448,15451],{"class":1004,"line":1012},[1002,15442,943],{"class":1015},[1002,15444,15445],{"class":1030}," Ad ",[1002,15447,1068],{"class":1015},[1002,15449,15450],{"class":1034}," 'components\u002FAd'",[1002,15452,1407],{"class":1030},[1002,15454,15455],{"class":1004,"line":1047},[1002,15456,1051],{"emptyLinePlaceholder":1050},[1002,15458,15459],{"class":1004,"line":1054},[1002,15460,15461],{"class":1008},"\u002F\u002F After\n",[1002,15463,15464,15466,15469,15471,15474],{"class":1004,"line":1060},[1002,15465,943],{"class":1015},[1002,15467,15468],{"class":1030}," dynamic ",[1002,15470,1068],{"class":1015},[1002,15472,15473],{"class":1034}," 'next\u002Fdynamic'",[1002,15475,1407],{"class":1030},[1002,15477,15478],{"class":1004,"line":1272},[1002,15479,1051],{"emptyLinePlaceholder":1050},[1002,15481,15482,15484,15487,15489,15492,15495,15498,15501,15503,15506],{"class":1004,"line":1348},[1002,15483,1016],{"class":1015},[1002,15485,15486],{"class":1019}," Ad",[1002,15488,1023],{"class":1015},[1002,15490,15491],{"class":1026}," dynamic",[1002,15493,15494],{"class":1030},"(() ",[1002,15496,15497],{"class":1015},"=>",[1002,15499,15500],{"class":1015}," import",[1002,15502,1031],{"class":1030},[1002,15504,15505],{"class":1034},"'components\u002FAd'",[1002,15507,5663],{"class":1030},[925,15509,15510,15511],{},"To see a complete list of options for dynamic loading, see the ",[933,15512,15515],{"href":15513,"rel":15514},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fadvanced-features\u002Fdynamic-import",[937],"official Next.js documentation.",[953,15517,14891],{"id":15518},"server-side-rendering-with-react-server-components-beta",[925,15520,15521],{},"By using Server Components, you will be able to opt-in which parts of your application are rendered on the server-side and when client-side code is required. In Next.js, a server component will be denoted by filename, e.g., post.server.js, whereas a client-side component will use post.client.js.",[993,15523,15525],{"className":2227,"code":15524,"language":2229,"meta":998,"style":998},"\u002F\u002F pages\u002F[post].server.js\nimport React, { Suspense } from 'react';\nimport dynamic from 'next\u002Fdynamic';\n\nimport Layout from 'components\u002FLayout.server.js';\nimport Content from 'components\u002FContent.server.js';\nimport { getContent } from 'data';\n\nconst Ad = dynamic(() => import('components\u002FAd.client.js'));\n\nexport default function Post({ slug }) {\n const { title, createdDate, content } = getContent({ slug: slug });\n\n return (\n \u003CLayout>\n \u003Carticle>\n \u003Cheader>\n \u003Ch1>{title}\u003C\u002Fh1>\n \u003Cp>Published: {createdDate}\u003C\u002Fp>\n \u003C\u002Fheader>\n\n \u003CSuspense>\n \u003CAd \u002F>\n \u003C\u002FSuspense>\n\n \u003CContent source={content} \u002F>\n \u003C\u002Farticle>\n \u003CLayout>\n );\n}\n",[941,15526,15527,15532,15546,15558,15562,15576,15590,15604,15608,15631,15635,15654,15682,15686,15693,15704,15715,15725,15739,15752,15761,15765,15774,15783,15791,15795,15810,15819,15827,15831],{"__ignoreMap":998},[1002,15528,15529],{"class":1004,"line":1005},[1002,15530,15531],{"class":1008},"\u002F\u002F pages\u002F[post].server.js\n",[1002,15533,15534,15536,15539,15541,15544],{"class":1004,"line":1012},[1002,15535,943],{"class":1015},[1002,15537,15538],{"class":1030}," React, { Suspense } ",[1002,15540,1068],{"class":1015},[1002,15542,15543],{"class":1034}," 'react'",[1002,15545,1407],{"class":1030},[1002,15547,15548,15550,15552,15554,15556],{"class":1004,"line":1047},[1002,15549,943],{"class":1015},[1002,15551,15468],{"class":1030},[1002,15553,1068],{"class":1015},[1002,15555,15473],{"class":1034},[1002,15557,1407],{"class":1030},[1002,15559,15560],{"class":1004,"line":1054},[1002,15561,1051],{"emptyLinePlaceholder":1050},[1002,15563,15564,15566,15569,15571,15574],{"class":1004,"line":1060},[1002,15565,943],{"class":1015},[1002,15567,15568],{"class":1030}," Layout ",[1002,15570,1068],{"class":1015},[1002,15572,15573],{"class":1034}," 'components\u002FLayout.server.js'",[1002,15575,1407],{"class":1030},[1002,15577,15578,15580,15583,15585,15588],{"class":1004,"line":1272},[1002,15579,943],{"class":1015},[1002,15581,15582],{"class":1030}," Content ",[1002,15584,1068],{"class":1015},[1002,15586,15587],{"class":1034}," 'components\u002FContent.server.js'",[1002,15589,1407],{"class":1030},[1002,15591,15592,15594,15597,15599,15602],{"class":1004,"line":1348},[1002,15593,943],{"class":1015},[1002,15595,15596],{"class":1030}," { getContent } ",[1002,15598,1068],{"class":1015},[1002,15600,15601],{"class":1034}," 'data'",[1002,15603,1407],{"class":1030},[1002,15605,15606],{"class":1004,"line":1354},[1002,15607,1051],{"emptyLinePlaceholder":1050},[1002,15609,15610,15612,15614,15616,15618,15620,15622,15624,15626,15629],{"class":1004,"line":1360},[1002,15611,1016],{"class":1015},[1002,15613,15486],{"class":1019},[1002,15615,1023],{"class":1015},[1002,15617,15491],{"class":1026},[1002,15619,15494],{"class":1030},[1002,15621,15497],{"class":1015},[1002,15623,15500],{"class":1015},[1002,15625,1031],{"class":1030},[1002,15627,15628],{"class":1034},"'components\u002FAd.client.js'",[1002,15630,5663],{"class":1030},[1002,15632,15633],{"class":1004,"line":1366},[1002,15634,1051],{"emptyLinePlaceholder":1050},[1002,15636,15637,15639,15642,15644,15647,15649,15652],{"class":1004,"line":1946},[1002,15638,947],{"class":1015},[1002,15640,15641],{"class":1015}," default",[1002,15643,8457],{"class":1015},[1002,15645,15646],{"class":1026}," Post",[1002,15648,9219],{"class":1030},[1002,15650,15651],{"class":2378},"slug",[1002,15653,9225],{"class":1030},[1002,15655,15656,15658,15660,15662,15664,15667,15669,15672,15674,15676,15679],{"class":1004,"line":1956},[1002,15657,10423],{"class":1015},[1002,15659,15026],{"class":1030},[1002,15661,15029],{"class":1019},[1002,15663,1251],{"class":1030},[1002,15665,15666],{"class":1019},"createdDate",[1002,15668,1251],{"class":1030},[1002,15670,15671],{"class":1019},"content",[1002,15673,15042],{"class":1030},[1002,15675,2393],{"class":1015},[1002,15677,15678],{"class":1026}," getContent",[1002,15680,15681],{"class":1030},"({ slug: slug });\n",[1002,15683,15684],{"class":1004,"line":1961},[1002,15685,1051],{"emptyLinePlaceholder":1050},[1002,15687,15688,15690],{"class":1004,"line":1971},[1002,15689,15066],{"class":1015},[1002,15691,15692],{"class":1030}," (\n",[1002,15694,15695,15698,15701],{"class":1004,"line":1980},[1002,15696,15697],{"class":1030}," \u003C",[1002,15699,15700],{"class":1019},"Layout",[1002,15702,15703],{"class":1030},">\n",[1002,15705,15706,15709,15713],{"class":1004,"line":1985},[1002,15707,15708],{"class":1030}," \u003C",[1002,15710,15712],{"class":15711},"s9eBZ","article",[1002,15714,15703],{"class":1030},[1002,15716,15717,15720,15723],{"class":1004,"line":1995},[1002,15718,15719],{"class":1030}," \u003C",[1002,15721,15722],{"class":15711},"header",[1002,15724,15703],{"class":1030},[1002,15726,15727,15730,15732,15735,15737],{"class":1004,"line":2006},[1002,15728,15729],{"class":1030}," \u003C",[1002,15731,15201],{"class":15711},[1002,15733,15734],{"class":1030},">{title}\u003C\u002F",[1002,15736,15201],{"class":15711},[1002,15738,15703],{"class":1030},[1002,15740,15741,15743,15745,15748,15750],{"class":1004,"line":2011},[1002,15742,15729],{"class":1030},[1002,15744,925],{"class":15711},[1002,15746,15747],{"class":1030},">Published: {createdDate}\u003C\u002F",[1002,15749,925],{"class":15711},[1002,15751,15703],{"class":1030},[1002,15753,15754,15757,15759],{"class":1004,"line":2017},[1002,15755,15756],{"class":1030}," \u003C\u002F",[1002,15758,15722],{"class":15711},[1002,15760,15703],{"class":1030},[1002,15762,15763],{"class":1004,"line":2022},[1002,15764,1051],{"emptyLinePlaceholder":1050},[1002,15766,15767,15769,15772],{"class":1004,"line":2442},[1002,15768,15719],{"class":1030},[1002,15770,15771],{"class":1019},"Suspense",[1002,15773,15703],{"class":1030},[1002,15775,15776,15778,15781],{"class":1004,"line":2466},[1002,15777,15729],{"class":1030},[1002,15779,15780],{"class":1019},"Ad",[1002,15782,15258],{"class":1030},[1002,15784,15785,15787,15789],{"class":1004,"line":2471},[1002,15786,15756],{"class":1030},[1002,15788,15771],{"class":1019},[1002,15790,15703],{"class":1030},[1002,15792,15793],{"class":1004,"line":2476},[1002,15794,1051],{"emptyLinePlaceholder":1050},[1002,15796,15797,15799,15802,15805,15807],{"class":1004,"line":2481},[1002,15798,15719],{"class":1030},[1002,15800,15801],{"class":1019},"Content",[1002,15803,15804],{"class":1026}," source",[1002,15806,2393],{"class":1015},[1002,15808,15809],{"class":1030},"{content} \u002F>\n",[1002,15811,15812,15815,15817],{"class":1004,"line":2491},[1002,15813,15814],{"class":1030}," \u003C\u002F",[1002,15816,15712],{"class":15711},[1002,15818,15703],{"class":1030},[1002,15820,15821,15823,15825],{"class":1004,"line":2502},[1002,15822,15697],{"class":1030},[1002,15824,15700],{"class":1019},[1002,15826,15703],{"class":1030},[1002,15828,15829],{"class":1004,"line":2513},[1002,15830,10503],{"class":1030},[1002,15832,15833],{"class":1004,"line":2535},[1002,15834,1170],{"class":1030},[925,15836,15837],{},"In the above example, we fetch content from a static data folder or a CMS and render markdown. The resulting client-side JavaScript from this page will only include the Ad, which is dynamically loaded. This way, you can first deliver server-rendered content, then enhance the page with client-side components, and then React will resolve Suspense boundaries client-side.",[925,15839,15840,15841],{},"Learn more about ",[1107,15842,15843],{},[933,15844,787],{"href":15845,"rel":15846},"https:\u002F\u002Fszaranger.medium.com\u002Fserver-side-rendering-with-suspense-in-react-18-123988a7b39e?source=your_stories_page----------------------------------------",[937],[953,15848,14894],{"id":15849},"faster-build-times-with-swc",[925,15851,15852],{},"Next.js uses webpack and Babel under the hood to compile JavaScript bundles. Babel using a JavaScript runtime and has been slow to compile.",[993,15854,15858],{"className":15855,"code":15856,"language":15857,"meta":998,"style":998},"language-bash shiki shiki-themes github-light github-dark","$ next build\n","bash",[941,15859,15860],{"__ignoreMap":998},[1002,15861,15862,15865,15868],{"class":1004,"line":1005},[1002,15863,15864],{"class":1026},"$",[1002,15866,15867],{"class":1034}," next",[1002,15869,15870],{"class":1034}," build\n",[925,15872,15873,15874,15879,15880,15885],{},"With the arrrival of ",[933,15875,15878],{"href":15876,"rel":15877},"https:\u002F\u002Fswc.rs\u002F",[937],"SWC",", a new Rust based compiler for JavaScript, which has superior compilation speeds, ",[933,15881,15884],{"href":15882,"rel":15883},"https:\u002F\u002Fnextjs.org\u002Fblog\u002Fnext-12#faster-builds-and-fast-refresh-with-rust-compiler",[937],"Next.js 12 announced SWC"," as it's new experimental JS bundler. This means that next build, live-reloads and deployments will all be faster.",[925,15887,15888],{},"In order to kick-in SWC as the compiler, make sure to remove the babel.config.js file.",[1655,15890,1521],{"id":1520},[925,15892,15893],{},"To improve your web application performance and get the best possible outcome from what Next.js provides you, we can:",[971,15895,15896,15898,15900,15902,15904,15906],{},[974,15897,14879],{},[974,15899,14882],{},[974,15901,14885],{},[974,15903,14888],{},[974,15905,14891],{},[974,15907,14894],{},[1579,15909,15910],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":15912},[15913,15914,15917,15918,15919,15920],{"id":14873,"depth":1012,"text":14874},{"id":14897,"depth":1012,"text":14879,"children":15915},[15916],{"id":15174,"depth":1047,"text":15175},{"id":15291,"depth":1012,"text":14885},{"id":15398,"depth":1012,"text":14888},{"id":15518,"depth":1012,"text":14891},{"id":15849,"depth":1012,"text":14894,"children":15921},[15922],{"id":1520,"depth":1047,"text":1521},"2021-12-05","\u002Fimages\u002Fblog\u002Ffeatures\u002Fimproving-next-js-performance.jpg",{},{"title":421,"description":423},"blog\u002Fimproving-next-js-performance",[16,17,425,303],"nMfa0MgC3xnBuLUV0pnbi992Nkv27RKAwC-p_twEB7Q",{"id":15931,"title":416,"author":920,"body":15932,"date":16994,"description":418,"extension":1591,"image":16995,"meta":16996,"navigation":1050,"path":417,"seo":16997,"stem":16998,"tags":16999,"__hash__":17000},"blog\u002Fblog\u002Fimproving-javascript-performance-for-web.md",{"type":922,"value":15933,"toc":16977},[15934,15938,15941,15945,15948,15965,15970,15973,15979,15988,15994,15997,16003,16005,16008,16012,16015,16018,16036,16039,16053,16056,16062,16078,16084,16100,16178,16181,16187,16301,16304,16309,16323,16327,16330,16333,16340,16343,16351,16354,16381,16384,16392,16398,16423,16426,16430,16440,16451,16454,16465,16470,16481,16516,16533,16538,16545,16640,16650,16653,16656,16773,16776,16781,16784,16950,16957,16959,16962,16974],[953,15935,15937],{"id":15936},"why-should-we-concern-about-javascript-performance","Why should we concern about JavaScript Performance?",[925,15939,15940],{},"JavaScript is a common language in mobile and web app development today. Nobody wants an app that crashes or a web page that is slow to load. The expectation for website load time has been around 2 seconds, or you will have to expect your visitors to leave.",[953,15942,15944],{"id":15943},"what-causes-javascript-to-perform-slow","What causes JavaScript to perform slow?",[925,15946,15947],{},"There are several areas that will have the biggest impact on both real and perceived performance in your site or app. We can look at a few separate types of JavaScript Performance issues:",[971,15949,15950,15953,15956,15959,15962],{},[974,15951,15952],{},"Slow parsing and compilation",[974,15954,15955],{},"Render blocking",[974,15957,15958],{},"Repaints and reflows",[974,15960,15961],{},"Memory allocation",[974,15963,15964],{},"Memory leaks",[953,15966,15968],{"id":15967},"slow-parsing-and-compilation",[1107,15969,15952],{},[925,15971,15972],{},"Browsers need to parse and compile our code before they can run our code. Where possible this is done lazily to avoid spending time on code that will never run.",[1655,15974,15976],{"id":15975},"parsing",[1107,15977,15978],{},"Parsing",[925,15980,15981,15982,15987],{},"The step where source code is turned into an intermediate representation to be consumed by a compiler (in V8, the bytecode compiler ",[933,15983,15986],{"href":15984,"rel":15985},"https:\u002F\u002Fv8.dev\u002Fblog\u002Fignition-interpreter",[937],"I","gnition).",[1655,15989,15991],{"id":15990},"critical-path",[1107,15992,15993],{},"Critical path",[925,15995,15996],{},"Parsing and compiling happen on the critical path of web page startup, and not all functions shipped to the browser are immediately needed during startup.",[925,15998,15999],{},[963,16000],{"alt":16001,"src":16002},"Source: Google V8","\u002Fimages\u002Fblog\u002F2021-11-21-improving-javascript-performance-for-web\u002Fparsing.png",[925,16004,16001],{},[925,16006,16007],{},"How soon a user can interact with your site can be delayed by the time in parsing\u002Fcompiling code. The more JavaScript you send, the longer it will take to parse and compile it before your site is interactive.",[1655,16009,16011],{"id":16010},"render-blocking","Render Blocking",[925,16013,16014],{},"Render-blocking resources are portions of code in website files, usually CSS and JavaScript, that prevent a web page from loading quickly. These resources take a relatively long time for the browser to process, but may not be necessary for the immediate user experience. Render-blocking resources can be removed or delayed until the browser needs to process them.",[925,16016,16017],{},"This includes:",[1530,16019,16020,16023,16030,16033],{},[974,16021,16022],{},"CSS stylesheets",[974,16024,16025,16026,16029],{},"JavaScript files added in the ",[941,16027,16028],{},"\u003Chead>"," section",[974,16031,16032],{},"Fonts added from either CDN or a local server",[974,16034,16035],{},"HTML imports (even though obsolete, you might still encounter them on legacy pages)",[925,16037,16038],{},"In order to reduce the number and impact of render-blocking resources, let's look at five strategies:",[971,16040,16041,16044,16047,16050],{},[974,16042,16043],{},"Don’t add CSS with the @import rule",[974,16045,16046],{},"Use the media attribute for conditional CSS",[974,16048,16049],{},"Use the defer and async attributes to eliminate render-blocking JavaScript",[974,16051,16052],{},"Split, bundle, and minify CSS and JavaScript files",[1655,16054,15958],{"id":16055},"repaints-and-reflows",[925,16057,2211,16058,16061],{},[1107,16059,16060],{},"repaint"," occurs when changes are made to an elements skin that changes visibly but does not affect its layout.",[925,16063,16064,16065,6620,16068,6620,16071,16074,16075,16077],{},"Examples of this include ",[941,16066,16067],{},"outline",[941,16069,16070],{},"visibility",[941,16072,16073],{},"background",", or ",[941,16076,3475],{},". According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree.",[925,16079,2211,16080,16083],{},[1107,16081,16082],{},"reflow"," is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page).",[925,16085,16086,16087,6620,16090,6620,16093,6620,16096,16099],{},"Examples that cause reflows include: adding or removing content, explicitly or implicitly changing ",[941,16088,16089],{},"width",[941,16091,16092],{},"height",[941,16094,16095],{},"font-family",[941,16097,16098],{},"font-size"," and more.",[993,16101,16103],{"className":2227,"code":16102,"language":2229,"meta":998,"style":998},"for (let i = 1; i \u003C= 100; i++ {\n const p = document.createElement('p');\n p.textContent = 'Newly created paragraph element';\n\n document.body.appendChild(p);\n}\n",[941,16104,16105,16133,16153,16165,16169,16174],{"__ignoreMap":998},[1002,16106,16107,16109,16111,16113,16115,16117,16119,16121,16123,16126,16129,16131],{"class":1004,"line":1005},[1002,16108,6510],{"class":1015},[1002,16110,6513],{"class":1030},[1002,16112,6516],{"class":1015},[1002,16114,6519],{"class":1030},[1002,16116,2393],{"class":1015},[1002,16118,6246],{"class":1019},[1002,16120,6536],{"class":1030},[1002,16122,6780],{"class":1015},[1002,16124,16125],{"class":1019}," 100",[1002,16127,16128],{"class":1030},"; i",[1002,16130,6545],{"class":1015},[1002,16132,1457],{"class":1030},[1002,16134,16135,16138,16140,16143,16146,16148,16151],{"class":1004,"line":1012},[1002,16136,16137],{"class":1030}," const p ",[1002,16139,2393],{"class":1015},[1002,16141,16142],{"class":1030}," document.",[1002,16144,16145],{"class":1026},"createElement",[1002,16147,1031],{"class":1030},[1002,16149,16150],{"class":1034},"'p'",[1002,16152,1085],{"class":1030},[1002,16154,16155,16158,16160,16163],{"class":1004,"line":1047},[1002,16156,16157],{"class":1030}," p.textContent ",[1002,16159,2393],{"class":1015},[1002,16161,16162],{"class":1034}," 'Newly created paragraph element'",[1002,16164,1407],{"class":1030},[1002,16166,16167],{"class":1004,"line":1054},[1002,16168,1051],{"emptyLinePlaceholder":1050},[1002,16170,16171],{"class":1004,"line":1060},[1002,16172,16173],{"class":1030}," document.body.appendChild(p);\n",[1002,16175,16176],{"class":1004,"line":1272},[1002,16177,1170],{"class":1030},[925,16179,16180],{},"The above code is very inefficient, causing 100 reflow processes for every new paragraph element appended.",[925,16182,16183,16184],{},"You can mitigate this computationally stressful process by using ",[941,16185,16186],{},".createDocumentFragment()",[993,16188,16190],{"className":2227,"code":16189,"language":2229,"meta":998,"style":998},"const fragment = document.createDocumentFragment();\n\nfor (let i = 1; i \u003C= 100; i++) {\n const p = document.createElement('p');\n p.textContent = 'Newly created paragraph element';\n\n fragment.appendChild(p);\n}\n\ndocument.body.appendChild(fragment);\n",[941,16191,16192,16208,16212,16238,16257,16268,16272,16283,16287,16291],{"__ignoreMap":998},[1002,16193,16194,16196,16199,16201,16203,16206],{"class":1004,"line":1005},[1002,16195,1016],{"class":1015},[1002,16197,16198],{"class":1019}," fragment",[1002,16200,1023],{"class":1015},[1002,16202,16142],{"class":1030},[1002,16204,16205],{"class":1026},"createDocumentFragment",[1002,16207,1428],{"class":1030},[1002,16209,16210],{"class":1004,"line":1012},[1002,16211,1051],{"emptyLinePlaceholder":1050},[1002,16213,16214,16216,16218,16220,16222,16224,16226,16228,16230,16232,16234,16236],{"class":1004,"line":1047},[1002,16215,6510],{"class":1015},[1002,16217,6513],{"class":1030},[1002,16219,6516],{"class":1015},[1002,16221,6519],{"class":1030},[1002,16223,2393],{"class":1015},[1002,16225,6246],{"class":1019},[1002,16227,6536],{"class":1030},[1002,16229,6780],{"class":1015},[1002,16231,16125],{"class":1019},[1002,16233,16128],{"class":1030},[1002,16235,6545],{"class":1015},[1002,16237,2382],{"class":1030},[1002,16239,16240,16242,16245,16247,16249,16251,16253,16255],{"class":1004,"line":1054},[1002,16241,10423],{"class":1015},[1002,16243,16244],{"class":1019}," p",[1002,16246,1023],{"class":1015},[1002,16248,16142],{"class":1030},[1002,16250,16145],{"class":1026},[1002,16252,1031],{"class":1030},[1002,16254,16150],{"class":1034},[1002,16256,1085],{"class":1030},[1002,16258,16259,16262,16264,16266],{"class":1004,"line":1060},[1002,16260,16261],{"class":1030}," p.textContent ",[1002,16263,2393],{"class":1015},[1002,16265,16162],{"class":1034},[1002,16267,1407],{"class":1030},[1002,16269,16270],{"class":1004,"line":1272},[1002,16271,1051],{"emptyLinePlaceholder":1050},[1002,16273,16274,16277,16280],{"class":1004,"line":1348},[1002,16275,16276],{"class":1030}," fragment.",[1002,16278,16279],{"class":1026},"appendChild",[1002,16281,16282],{"class":1030},"(p);\n",[1002,16284,16285],{"class":1004,"line":1354},[1002,16286,1170],{"class":1030},[1002,16288,16289],{"class":1004,"line":1360},[1002,16290,1051],{"emptyLinePlaceholder":1050},[1002,16292,16293,16296,16298],{"class":1004,"line":1366},[1002,16294,16295],{"class":1030},"document.body.",[1002,16297,16279],{"class":1026},[1002,16299,16300],{"class":1030},"(fragment);\n",[925,16302,16303],{},"The above code will now instead only use the reflow process 1x for the creation of 100 new paragraph elements.",[925,16305,16306],{},[963,16307],{"alt":16001,"src":16308},"\u002Fimages\u002Fblog\u002F2021-11-21-improving-javascript-performance-for-web\u002Freflow.png",[1530,16310,16311,16317],{},[974,16312,16313,16316],{},[941,16314,16315],{},"Reflow",": compute the layout of each visible element (position and size).",[974,16318,16319,16322],{},[941,16320,16321],{},"Repaint",": renders the pixels to the screen.",[953,16324,16326],{"id":16325},"memory-allocation","Memory Allocation",[925,16328,16329],{},"Browsers have a finite amount of memory.",[925,16331,16332],{},"The exact amount varies by browser and device, and on modern browsers and new devices, it can be quite high. But it’s not unlimited.",[925,16334,16335,16336,16339],{},"Modern JavaScript applications tend to use ",[928,16337,16338],{},"a lot"," of memory, and it shows. After a while, the apps start to get slow and laggy and sometimes will freeze entirely. This is particularly noticeable in single-page apps.",[925,16341,16342],{},"The two biggest offenders:",[971,16344,16345,16348],{},[974,16346,16347],{},"Lots of event listeners attached to individual elements",[974,16349,16350],{},"Store huge amounts of data in memory",[925,16352,16353],{},"Modern frameworks encourage the bad practice of attaching event listeners directly on elements.",[993,16355,16357],{"className":2227,"code":16356,"language":2229,"meta":998,"style":998},"\u003Cbutton onclick=\"doSomething()\">Click Me\u003C\u002Fbutton>\n",[941,16358,16359],{"__ignoreMap":998},[1002,16360,16361,16363,16366,16369,16371,16374,16377,16379],{"class":1004,"line":1005},[1002,16362,6539],{"class":1030},[1002,16364,16365],{"class":15711},"button",[1002,16367,16368],{"class":1026}," onclick",[1002,16370,2393],{"class":1015},[1002,16372,16373],{"class":1034},"\"doSomething()\"",[1002,16375,16376],{"class":1030},">Click Me\u003C\u002F",[1002,16378,16365],{"class":15711},[1002,16380,15703],{"class":1030},[925,16382,16383],{},"A better approach is to use event delegation, which greatly reduces the number of listeners in the browser memory.",[925,16385,16386,16391],{},[933,16387,16390],{"href":16388,"rel":16389},"https:\u002F\u002Fgomakethings.com\u002Fclasses-vs.-prototypal-inheritance-in-vanilla-js\u002F",[937],"Using Constructors and prototypal inheritance"," can also reduce the memory load for certain types of JavaScript libraries, particularly ones where the same methods and properties are shared by multiple items.",[925,16393,16394,16395,16397],{},"But large apps also tend to store huge amounts of ",[928,16396,8589],{}," in memory.",[993,16399,16401],{"className":2227,"code":16400,"language":2229,"meta":998,"style":998},"const appData = {\n \u002F\u002F every single detail about the current state of the application...\n};\n",[941,16402,16403,16414,16419],{"__ignoreMap":998},[1002,16404,16405,16407,16410,16412],{"class":1004,"line":1005},[1002,16406,1016],{"class":1015},[1002,16408,16409],{"class":1019}," appData",[1002,16411,1023],{"class":1015},[1002,16413,1457],{"class":1030},[1002,16415,16416],{"class":1004,"line":1012},[1002,16417,16418],{"class":1008}," \u002F\u002F every single detail about the current state of the application...\n",[1002,16420,16421],{"class":1004,"line":1047},[1002,16422,1517],{"class":1030},[925,16424,16425],{},"Across multiple views in a single-page app, the size of this in-memory data can grow rapidly so quickly. Storing state in the relevant component will help to control the size of the memory as those will be removed when the components unmount",[953,16427,16429],{"id":16428},"memory-leaks","Memory Leaks",[925,16431,16432,16433,16436,16437,948],{},"The main cause of memory leaks in JavaScript is ",[928,16434,16435],{},"unwanted references",". JavaScript's garbage collector uses an algorithm known as ",[928,16438,16439],{},"mark-and-sweep",[971,16441,16442,16445,16448],{},[974,16443,16444],{},"The garbage collector builds a list of \"roots\". Roots usually are global variables to which a reference is kept in code. The window object is always present, so the garbage collector can consider it and all of its children to be always present (i.e. not garbage).",[974,16446,16447],{},"All roots are inspected and marked as active (i.e. not garbage). All children are inspected recursively as well. Everything that can be reached from a root is not considered garbage.",[974,16449,16450],{},"All pieces of memory not marked as active can now be considered garbage. The collector can now free that memory and return it to the OS.",[925,16452,16453],{},"There are three types of common JavaScript leaks:",[971,16455,16456,16459,16462],{},[974,16457,16458],{},"Accidental global variables",[974,16460,16461],{},"Forgotten timers or callbacks",[974,16463,16464],{},"Out of DOM references",[1655,16466,16468],{"id":16467},"accidental-global-variables",[1107,16469,16458],{},[925,16471,16472,16473,16476,16477,16480],{},"One of the ways in which JavaScript is permissive is in the way it handles undeclared variables: a reference to an undeclared variable creates a new variable inside the ",[928,16474,16475],{},"global"," object. In the case of browsers, the global object is ",[941,16478,16479],{},"window",". In other words:",[993,16482,16484],{"className":2227,"code":16483,"language":2229,"meta":998,"style":998},"function doSomething() {\n foo = 'this is a hidden global variable';\n \u002F\u002F window.foo = \"this is a hidden global variable\";\n}\n",[941,16485,16486,16495,16507,16512],{"__ignoreMap":998},[1002,16487,16488,16490,16493],{"class":1004,"line":1005},[1002,16489,6965],{"class":1015},[1002,16491,16492],{"class":1026}," doSomething",[1002,16494,3025],{"class":1030},[1002,16496,16497,16500,16502,16505],{"class":1004,"line":1012},[1002,16498,16499],{"class":1030}," foo ",[1002,16501,2393],{"class":1015},[1002,16503,16504],{"class":1034}," 'this is a hidden global variable'",[1002,16506,1407],{"class":1030},[1002,16508,16509],{"class":1004,"line":1047},[1002,16510,16511],{"class":1008}," \u002F\u002F window.foo = \"this is a hidden global variable\";\n",[1002,16513,16514],{"class":1004,"line":1054},[1002,16515,1170],{"class":1030},[925,16517,16518,16519,16522,16523,16526,16527,16529,16530,16532],{},"If ",[941,16520,16521],{},"foo"," was supposed to hold a reference to a variable only inside the scope of the ",[941,16524,16525],{},"doSomething"," function and you forget to use ",[941,16528,1016],{}," or ",[941,16531,6516],{}," to declare it, an unexpected global variable is created. In this example, leaking a simple string won't do much harm, but it could certainly be worse.",[1655,16534,16536],{"id":16535},"forgotten-timers-or-callbacks",[1107,16537,16461],{},[925,16539,16540,16541,16544],{},"The use of ",[941,16542,16543],{},"setInterval"," is quite common in JavaScript. Other libraries provide observers and other facilities that take callbacks. Most of these libraries take care of making any references to the callback unreachable after their own instances become unreachable as well. In the case of setInterval, however, code like this is quite common:",[993,16546,16548],{"className":2227,"code":16547,"language":2229,"meta":998,"style":998},"const data = getData();\n\nsetInterval(function() {\n const node = document.getElementById('Node');\n if(node) {\n \u002F\u002F Do stuff with node and data\n node.innerHTML = JSON.stringify(data));\n }\n}, 1000);\n",[941,16549,16550,16564,16568,16578,16599,16606,16611,16627,16631],{"__ignoreMap":998},[1002,16551,16552,16554,16557,16559,16562],{"class":1004,"line":1005},[1002,16553,1016],{"class":1015},[1002,16555,16556],{"class":1019}," data",[1002,16558,1023],{"class":1015},[1002,16560,16561],{"class":1026}," getData",[1002,16563,1428],{"class":1030},[1002,16565,16566],{"class":1004,"line":1012},[1002,16567,1051],{"emptyLinePlaceholder":1050},[1002,16569,16570,16572,16574,16576],{"class":1004,"line":1047},[1002,16571,16543],{"class":1026},[1002,16573,1031],{"class":1030},[1002,16575,6965],{"class":1015},[1002,16577,3025],{"class":1030},[1002,16579,16580,16582,16585,16587,16589,16592,16594,16597],{"class":1004,"line":1054},[1002,16581,4348],{"class":1015},[1002,16583,16584],{"class":1019}," node",[1002,16586,1023],{"class":1015},[1002,16588,16142],{"class":1030},[1002,16590,16591],{"class":1026},"getElementById",[1002,16593,1031],{"class":1030},[1002,16595,16596],{"class":1034},"'Node'",[1002,16598,1085],{"class":1030},[1002,16600,16601,16603],{"class":1004,"line":1060},[1002,16602,4368],{"class":1015},[1002,16604,16605],{"class":1030},"(node) {\n",[1002,16607,16608],{"class":1004,"line":1272},[1002,16609,16610],{"class":1008}," \u002F\u002F Do stuff with node and data\n",[1002,16612,16613,16616,16618,16620,16622,16624],{"class":1004,"line":1348},[1002,16614,16615],{"class":1030}," node.innerHTML ",[1002,16617,2393],{"class":1015},[1002,16619,7730],{"class":1019},[1002,16621,948],{"class":1030},[1002,16623,7735],{"class":1026},[1002,16625,16626],{"class":1030},"(data));\n",[1002,16628,16629],{"class":1004,"line":1354},[1002,16630,2014],{"class":1030},[1002,16632,16633,16636,16638],{"class":1004,"line":1360},[1002,16634,16635],{"class":1030},"}, ",[1002,16637,6370],{"class":1019},[1002,16639,1085],{"class":1030},[925,16641,16642,16643,16645,16646,16649],{},"This example illustrates what can happen with dangling timers: timers that make reference to nodes or data that is no longer required. The object represented by ",[941,16644,12108],{}," may be removed in the future, making the whole block inside the interval handler unnecessary. However, the handler, as the interval is still active, cannot be collected (the interval needs to be stopped for that to happen). If the interval handler cannot be collected, its dependencies cannot be collected either. That means that ",[941,16647,16648],{},"data",", which presumably stores sizable data, cannot be collected either.",[925,16651,16652],{},"For the case of observers, it is important to make explicit calls to remove them once they are not needed anymore (or the associated object is about to be made unreachable).",[925,16654,16655],{},"Most browserswill collect observer handlers once the observed object becomes unreachable, even if the listener is not explicitly removed. It remains good practice, however, to explicitly remove these observers before the object is disposed. For instance:",[993,16657,16659],{"className":2227,"code":16658,"language":2229,"meta":998,"style":998},"const element = document.getElementById('button');\n\nfunction onClick(event) {\n element.innerHtml = 'text';\n}\n\nelement.addEventListener('click', onClick);\n\u002F\u002F ...\nelement.removeEventListener('click', onClick);\n\n\u002F\u002F important!\nelement.parentNode.removeChild(element);\n",[941,16660,16661,16681,16685,16699,16711,16715,16719,16735,16740,16753,16757,16762],{"__ignoreMap":998},[1002,16662,16663,16665,16668,16670,16672,16674,16676,16679],{"class":1004,"line":1005},[1002,16664,1016],{"class":1015},[1002,16666,16667],{"class":1019}," element",[1002,16669,1023],{"class":1015},[1002,16671,16142],{"class":1030},[1002,16673,16591],{"class":1026},[1002,16675,1031],{"class":1030},[1002,16677,16678],{"class":1034},"'button'",[1002,16680,1085],{"class":1030},[1002,16682,16683],{"class":1004,"line":1012},[1002,16684,1051],{"emptyLinePlaceholder":1050},[1002,16686,16687,16689,16692,16694,16697],{"class":1004,"line":1047},[1002,16688,6965],{"class":1015},[1002,16690,16691],{"class":1026}," onClick",[1002,16693,1031],{"class":1030},[1002,16695,16696],{"class":2378},"event",[1002,16698,2382],{"class":1030},[1002,16700,16701,16704,16706,16709],{"class":1004,"line":1054},[1002,16702,16703],{"class":1030}," element.innerHtml ",[1002,16705,2393],{"class":1015},[1002,16707,16708],{"class":1034}," 'text'",[1002,16710,1407],{"class":1030},[1002,16712,16713],{"class":1004,"line":1060},[1002,16714,1170],{"class":1030},[1002,16716,16717],{"class":1004,"line":1272},[1002,16718,1051],{"emptyLinePlaceholder":1050},[1002,16720,16721,16724,16727,16729,16732],{"class":1004,"line":1348},[1002,16722,16723],{"class":1030},"element.",[1002,16725,16726],{"class":1026},"addEventListener",[1002,16728,1031],{"class":1030},[1002,16730,16731],{"class":1034},"'click'",[1002,16733,16734],{"class":1030},", onClick);\n",[1002,16736,16737],{"class":1004,"line":1354},[1002,16738,16739],{"class":1008},"\u002F\u002F ...\n",[1002,16741,16742,16744,16747,16749,16751],{"class":1004,"line":1360},[1002,16743,16723],{"class":1030},[1002,16745,16746],{"class":1026},"removeEventListener",[1002,16748,1031],{"class":1030},[1002,16750,16731],{"class":1034},[1002,16752,16734],{"class":1030},[1002,16754,16755],{"class":1004,"line":1366},[1002,16756,1051],{"emptyLinePlaceholder":1050},[1002,16758,16759],{"class":1004,"line":1946},[1002,16760,16761],{"class":1008},"\u002F\u002F important!\n",[1002,16763,16764,16767,16770],{"class":1004,"line":1956},[1002,16765,16766],{"class":1030},"element.parentNode.",[1002,16768,16769],{"class":1026},"removeChild",[1002,16771,16772],{"class":1030},"(element);\n",[925,16774,16775],{},"Now when an element goes out of scope, both element and onClick will be collected even in old browsers that don't\nhandle cycles well.",[1655,16777,16779],{"id":16778},"out-of-dom-references",[1107,16780,16464],{},[925,16782,16783],{},"Sometimes it may be useful to store DOM nodes inside data structures. Suppose you want to rapidly update the contents of several rows in a table. It may make sense to store a reference to each DOM row in a dictionary or array. When this happens, two references to the same DOM element are kept: one in the DOM tree and the other in the dictionary. If at some point in the future you decide to remove these rows, you need to make both references unreachable.",[993,16785,16787],{"className":2227,"code":16786,"language":2229,"meta":998,"style":998},"const elements = {\n button: document.getElementById('button'),\n image: document.getElementById('image'),\n text: document.getElementById('text'),\n};\n\nfunction doSomething() {\n image.src = 'http:\u002F\u002Fsome.url\u002Fimage';\n button.click();\n console.log(text.innerHTML);\n}\n\nfunction removeButton() {\n \u002F\u002F The button is a direct child of body.\n document.body.removeChild(document.getElementById('button'));\n\n \u002F\u002F At this point, we still have a reference to #button in the global\n \u002F\u002F elements dictionary. In other words, the button element is still in\n \u002F\u002F memory and cannot be collected by the GC.\n}\n",[941,16788,16789,16800,16813,16827,16841,16845,16849,16857,16869,16878,16887,16891,16895,16904,16909,16927,16931,16936,16941,16946],{"__ignoreMap":998},[1002,16790,16791,16793,16796,16798],{"class":1004,"line":1005},[1002,16792,1016],{"class":1015},[1002,16794,16795],{"class":1019}," elements",[1002,16797,1023],{"class":1015},[1002,16799,1457],{"class":1030},[1002,16801,16802,16805,16807,16809,16811],{"class":1004,"line":1012},[1002,16803,16804],{"class":1030}," button: document.",[1002,16806,16591],{"class":1026},[1002,16808,1031],{"class":1030},[1002,16810,16678],{"class":1034},[1002,16812,1257],{"class":1030},[1002,16814,16815,16818,16820,16822,16825],{"class":1004,"line":1047},[1002,16816,16817],{"class":1030}," image: document.",[1002,16819,16591],{"class":1026},[1002,16821,1031],{"class":1030},[1002,16823,16824],{"class":1034},"'image'",[1002,16826,1257],{"class":1030},[1002,16828,16829,16832,16834,16836,16839],{"class":1004,"line":1054},[1002,16830,16831],{"class":1030}," text: document.",[1002,16833,16591],{"class":1026},[1002,16835,1031],{"class":1030},[1002,16837,16838],{"class":1034},"'text'",[1002,16840,1257],{"class":1030},[1002,16842,16843],{"class":1004,"line":1060},[1002,16844,1517],{"class":1030},[1002,16846,16847],{"class":1004,"line":1272},[1002,16848,1051],{"emptyLinePlaceholder":1050},[1002,16850,16851,16853,16855],{"class":1004,"line":1348},[1002,16852,6965],{"class":1015},[1002,16854,16492],{"class":1026},[1002,16856,3025],{"class":1030},[1002,16858,16859,16862,16864,16867],{"class":1004,"line":1354},[1002,16860,16861],{"class":1030}," image.src ",[1002,16863,2393],{"class":1015},[1002,16865,16866],{"class":1034}," 'http:\u002F\u002Fsome.url\u002Fimage'",[1002,16868,1407],{"class":1030},[1002,16870,16871,16874,16876],{"class":1004,"line":1360},[1002,16872,16873],{"class":1030}," button.",[1002,16875,11181],{"class":1026},[1002,16877,1428],{"class":1030},[1002,16879,16880,16882,16884],{"class":1004,"line":1366},[1002,16881,6977],{"class":1030},[1002,16883,2886],{"class":1026},[1002,16885,16886],{"class":1030},"(text.innerHTML);\n",[1002,16888,16889],{"class":1004,"line":1946},[1002,16890,1170],{"class":1030},[1002,16892,16893],{"class":1004,"line":1956},[1002,16894,1051],{"emptyLinePlaceholder":1050},[1002,16896,16897,16899,16902],{"class":1004,"line":1961},[1002,16898,6965],{"class":1015},[1002,16900,16901],{"class":1026}," removeButton",[1002,16903,3025],{"class":1030},[1002,16905,16906],{"class":1004,"line":1971},[1002,16907,16908],{"class":1008}," \u002F\u002F The button is a direct child of body.\n",[1002,16910,16911,16914,16916,16919,16921,16923,16925],{"class":1004,"line":1980},[1002,16912,16913],{"class":1030}," document.body.",[1002,16915,16769],{"class":1026},[1002,16917,16918],{"class":1030},"(document.",[1002,16920,16591],{"class":1026},[1002,16922,1031],{"class":1030},[1002,16924,16678],{"class":1034},[1002,16926,5663],{"class":1030},[1002,16928,16929],{"class":1004,"line":1985},[1002,16930,1051],{"emptyLinePlaceholder":1050},[1002,16932,16933],{"class":1004,"line":1995},[1002,16934,16935],{"class":1008}," \u002F\u002F At this point, we still have a reference to #button in the global\n",[1002,16937,16938],{"class":1004,"line":2006},[1002,16939,16940],{"class":1008}," \u002F\u002F elements dictionary. In other words, the button element is still in\n",[1002,16942,16943],{"class":1004,"line":2011},[1002,16944,16945],{"class":1008}," \u002F\u002F memory and cannot be collected by the GC.\n",[1002,16947,16948],{"class":1004,"line":2017},[1002,16949,1170],{"class":1030},[925,16951,16952,16953,16956],{},"An additional consideration for this has to do with references to inner or leaf nodes inside a DOM tree. Suppose you keep a reference to a specific cell of a table (a ",[941,16954,16955],{},"\u003Ctd>"," tag) in your JavaScript code. At some point in the future, you decide to remove the table from the DOM but keep the reference to that cell. Intuitively one may suppose the GC will collect everything but that cell. In practice, this won't happen: the cell is a child node of that table and children keep references to their parents. In other words, the reference to the table cell from JavaScript code causes the whole table to stay in memory. Consider this carefully when keeping references to DOM elements.",[953,16958,1521],{"id":1520},[925,16960,16961],{},"In this article we carefully looked at the issues that cause JavaScript performance and how to mitigate them for the following issues:",[971,16963,16964,16966,16968,16970,16972],{},[974,16965,15952],{},[974,16967,15955],{},[974,16969,15958],{},[974,16971,15961],{},[974,16973,15964],{},[1579,16975,16976],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":16978},[16979,16980,16981,16987,16988,16993],{"id":15936,"depth":1012,"text":15937},{"id":15943,"depth":1012,"text":15944},{"id":15967,"depth":1012,"text":15952,"children":16982},[16983,16984,16985,16986],{"id":15975,"depth":1047,"text":15978},{"id":15990,"depth":1047,"text":15993},{"id":16010,"depth":1047,"text":16011},{"id":16055,"depth":1047,"text":15958},{"id":16325,"depth":1012,"text":16326},{"id":16428,"depth":1012,"text":16429,"children":16989},[16990,16991,16992],{"id":16467,"depth":1047,"text":16458},{"id":16535,"depth":1047,"text":16461},{"id":16778,"depth":1047,"text":16464},{"id":1520,"depth":1012,"text":1521},"2021-11-21","\u002Fimages\u002Fblog\u002Ffeatures\u002Fimproving-javascript-performance-for-web.jpg",{},{"title":416,"description":418},"blog\u002Fimproving-javascript-performance-for-web",[16,17,303],"go0ZHEIEG_lgoIGVyfnij8xsj15pTbMwSf52NJbKKu4",{"id":17002,"title":866,"author":920,"body":17003,"date":19093,"description":868,"extension":1591,"image":19094,"meta":19095,"navigation":1050,"path":867,"seo":19096,"stem":19097,"tags":19098,"__hash__":19099},"blog\u002Fblog\u002Ftypescript-features-you-should-no-longer-use.md",{"type":922,"value":17004,"toc":19074},[17005,17008,17011,17014,17018,17021,17038,17042,17045,17161,17164,17167,17176,17421,17425,17428,17431,17736,17743,17746,17750,17753,17756,17875,17878,17884,17887,17890,17942,17949,17952,17954,17966,18012,18022,18026,18032,18035,18041,18044,18047,18050,18180,18183,18186,18218,18221,18271,18274,18292,18295,18450,18453,18495,18498,18542,18545,18552,18558,18561,18564,18659,18662,18714,18717,18778,18781,18841,18844,18847,18934,18937,18940,18944,18947,18975,18978,18984,18991,19050,19053,19055,19058,19071],[925,17006,17007],{},"But in 2015 JavaScript added some of these features into the ECMAScript standard when ES6 was standardised.",[925,17009,17010],{},"TypeScript since then changed its governing principle to adapt to these changes and focus more on the type space and leave JavaScript to govern the runtime.",[925,17012,17013],{},"There are still a few remaining TypeScript features before this decision and they don’t fit the pattern of the rest of the language. To keep the relationship between TypeScript and JavaScript as clear as possible we should avoid these features.",[953,17015,17017],{"id":17016},"decorators","Decorators",[925,17019,17020],{},"Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members. Decorators can be used in five ways:",[1530,17022,17023,17026,17029,17032,17035],{},[974,17024,17025],{},"class declaration",[974,17027,17028],{},"property",[974,17030,17031],{},"method",[974,17033,17034],{},"parameter",[974,17036,17037],{},"accessor",[1655,17039,17041],{"id":17040},"class-decorator","Class Decorator",[925,17043,17044],{},"When a class is decorated you have to be careful with inheritance because its descendants will not inherit the decorators. Let’s freeze the class to prevent inheritance completely.",[993,17046,17050],{"className":17047,"code":17048,"language":17049,"meta":998,"style":998},"language-tsx shiki shiki-themes github-light github-dark","@Freeze\nclass Person {}\n\nfunction Freeze(constructor: Function) {\n Object.freeze(constructor);\n Object.freeze(constructor.prototype);\n}\n\nconsole.log(Object.isFrozen(Person)); \u002F\u002F true\n\nclass Cat extends Person {} \u002F\u002F error, cannot be extended\n","tsx",[941,17051,17052,17057,17066,17070,17088,17099,17115,17119,17123,17140,17144],{"__ignoreMap":998},[1002,17053,17054],{"class":1004,"line":1005},[1002,17055,17056],{"class":1030},"@Freeze\n",[1002,17058,17059,17061,17063],{"class":1004,"line":1012},[1002,17060,2363],{"class":1015},[1002,17062,7681],{"class":1026},[1002,17064,17065],{"class":1030}," {}\n",[1002,17067,17068],{"class":1004,"line":1047},[1002,17069,1051],{"emptyLinePlaceholder":1050},[1002,17071,17072,17074,17077,17079,17081,17083,17086],{"class":1004,"line":1054},[1002,17073,6965],{"class":1015},[1002,17075,17076],{"class":1026}," Freeze",[1002,17078,1031],{"class":1030},[1002,17080,4360],{"class":1026},[1002,17082,1813],{"class":1015},[1002,17084,17085],{"class":1026}," Function",[1002,17087,2382],{"class":1030},[1002,17089,17090,17093,17096],{"class":1004,"line":1060},[1002,17091,17092],{"class":1030}," Object.",[1002,17094,17095],{"class":1026},"freeze",[1002,17097,17098],{"class":1030},"(constructor);\n",[1002,17100,17101,17103,17105,17107,17109,17111,17113],{"class":1004,"line":1272},[1002,17102,17092],{"class":1030},[1002,17104,17095],{"class":1026},[1002,17106,1031],{"class":1030},[1002,17108,4360],{"class":1019},[1002,17110,948],{"class":1030},[1002,17112,3894],{"class":1019},[1002,17114,1085],{"class":1030},[1002,17116,17117],{"class":1004,"line":1348},[1002,17118,1170],{"class":1030},[1002,17120,17121],{"class":1004,"line":1354},[1002,17122,1051],{"emptyLinePlaceholder":1050},[1002,17124,17125,17127,17129,17132,17135,17138],{"class":1004,"line":1360},[1002,17126,2883],{"class":1030},[1002,17128,2886],{"class":1026},[1002,17130,17131],{"class":1030},"(Object.",[1002,17133,17134],{"class":1026},"isFrozen",[1002,17136,17137],{"class":1030},"(Person)); ",[1002,17139,2877],{"class":1008},[1002,17141,17142],{"class":1004,"line":1366},[1002,17143,1051],{"emptyLinePlaceholder":1050},[1002,17145,17146,17148,17151,17153,17155,17158],{"class":1004,"line":1946},[1002,17147,2363],{"class":1015},[1002,17149,17150],{"class":1026}," Cat",[1002,17152,3014],{"class":1015},[1002,17154,7681],{"class":1026},[1002,17156,17157],{"class":1030}," {} ",[1002,17159,17160],{"class":1008},"\u002F\u002F error, cannot be extended\n",[1655,17162,17041],{"id":17163},"class-decorator-1",[925,17165,17166],{},"Property decorators can be used for listening to state changes in a class.",[925,17168,17169,17170,17175],{},"Let’s override the name property to surround it in emojis. This allows us to set a regular string value, but run additional code on get\u002Fset as ",[928,17171,17172],{},[1107,17173,17174],{},"middleware",", if you will.",[993,17177,17179],{"className":17047,"code":17178,"language":17049,"meta":998,"style":998},"export class Person {\n @Emoji()\n name = 'Sean';\n}\n\n\u002F\u002F Property Decorator\nfunction Emoji() {\n return function (target: Object, key: string | symbol) {\n let val = target[key];\n\n const getter = () => {\n return val;\n };\n const setter = (next) => {\n console.log('updating name...');\n val = `${next}`;\n };\n\n Object.defineProperty(target, key, {\n get: getter,\n set: setter,\n enumerable: true,\n configurable: true,\n });\n };\n}\n",[941,17180,17181,17192,17203,17215,17219,17223,17228,17237,17270,17282,17286,17302,17309,17313,17332,17346,17361,17365,17369,17380,17385,17390,17400,17409,17413,17417],{"__ignoreMap":998},[1002,17182,17183,17185,17188,17190],{"class":1004,"line":1005},[1002,17184,947],{"class":1015},[1002,17186,17187],{"class":1015}," class",[1002,17189,7681],{"class":1026},[1002,17191,1457],{"class":1030},[1002,17193,17194,17197,17200],{"class":1004,"line":1012},[1002,17195,17196],{"class":1030}," @",[1002,17198,17199],{"class":1026},"Emoji",[1002,17201,17202],{"class":1030},"()\n",[1002,17204,17205,17208,17210,17213],{"class":1004,"line":1047},[1002,17206,17207],{"class":2378}," name",[1002,17209,1023],{"class":1015},[1002,17211,17212],{"class":1034}," 'Sean'",[1002,17214,1407],{"class":1030},[1002,17216,17217],{"class":1004,"line":1054},[1002,17218,1170],{"class":1030},[1002,17220,17221],{"class":1004,"line":1060},[1002,17222,1051],{"emptyLinePlaceholder":1050},[1002,17224,17225],{"class":1004,"line":1272},[1002,17226,17227],{"class":1008},"\u002F\u002F Property Decorator\n",[1002,17229,17230,17232,17235],{"class":1004,"line":1348},[1002,17231,6965],{"class":1015},[1002,17233,17234],{"class":1026}," Emoji",[1002,17236,3025],{"class":1030},[1002,17238,17239,17241,17243,17245,17248,17250,17253,17255,17257,17259,17262,17265,17268],{"class":1004,"line":1354},[1002,17240,15066],{"class":1015},[1002,17242,8457],{"class":1015},[1002,17244,6513],{"class":1030},[1002,17246,17247],{"class":2378},"target",[1002,17249,1813],{"class":1015},[1002,17251,17252],{"class":1026}," Object",[1002,17254,1251],{"class":1030},[1002,17256,7857],{"class":2378},[1002,17258,1813],{"class":1015},[1002,17260,17261],{"class":1019}," string",[1002,17263,17264],{"class":1015}," |",[1002,17266,17267],{"class":1019}," symbol",[1002,17269,2382],{"class":1030},[1002,17271,17272,17274,17277,17279],{"class":1004,"line":1360},[1002,17273,12922],{"class":1015},[1002,17275,17276],{"class":1030}," val ",[1002,17278,2393],{"class":1015},[1002,17280,17281],{"class":1030}," target[key];\n",[1002,17283,17284],{"class":1004,"line":1366},[1002,17285,1051],{"emptyLinePlaceholder":1050},[1002,17287,17288,17290,17293,17295,17298,17300],{"class":1004,"line":1946},[1002,17289,4348],{"class":1015},[1002,17291,17292],{"class":1026}," getter",[1002,17294,1023],{"class":1015},[1002,17296,17297],{"class":1030}," () ",[1002,17299,15497],{"class":1015},[1002,17301,1457],{"class":1030},[1002,17303,17304,17306],{"class":1004,"line":1956},[1002,17305,4376],{"class":1015},[1002,17307,17308],{"class":1030}," val;\n",[1002,17310,17311],{"class":1004,"line":1961},[1002,17312,10900],{"class":1030},[1002,17314,17315,17317,17320,17322,17324,17326,17328,17330],{"class":1004,"line":1971},[1002,17316,4348],{"class":1015},[1002,17318,17319],{"class":1026}," setter",[1002,17321,1023],{"class":1015},[1002,17323,6513],{"class":1030},[1002,17325,6623],{"class":2378},[1002,17327,5876],{"class":1030},[1002,17329,15497],{"class":1015},[1002,17331,1457],{"class":1030},[1002,17333,17334,17337,17339,17341,17344],{"class":1004,"line":1980},[1002,17335,17336],{"class":1030}," console.",[1002,17338,2886],{"class":1026},[1002,17340,1031],{"class":1030},[1002,17342,17343],{"class":1034},"'updating name...'",[1002,17345,1085],{"class":1030},[1002,17347,17348,17351,17353,17355,17357,17359],{"class":1004,"line":1985},[1002,17349,17350],{"class":1030}," val ",[1002,17352,2393],{"class":1015},[1002,17354,13056],{"class":1034},[1002,17356,6623],{"class":1030},[1002,17358,3507],{"class":1034},[1002,17360,1407],{"class":1030},[1002,17362,17363],{"class":1004,"line":1995},[1002,17364,10900],{"class":1030},[1002,17366,17367],{"class":1004,"line":2006},[1002,17368,1051],{"emptyLinePlaceholder":1050},[1002,17370,17371,17374,17377],{"class":1004,"line":2011},[1002,17372,17373],{"class":1030}," Object.",[1002,17375,17376],{"class":1026},"defineProperty",[1002,17378,17379],{"class":1030},"(target, key, {\n",[1002,17381,17382],{"class":1004,"line":2017},[1002,17383,17384],{"class":1030}," get: getter,\n",[1002,17386,17387],{"class":1004,"line":2022},[1002,17388,17389],{"class":1030}," set: setter,\n",[1002,17391,17392,17395,17398],{"class":1004,"line":2442},[1002,17393,17394],{"class":1030}," enumerable: ",[1002,17396,17397],{"class":1019},"true",[1002,17399,1143],{"class":1030},[1002,17401,17402,17405,17407],{"class":1004,"line":2466},[1002,17403,17404],{"class":1030}," configurable: ",[1002,17406,17397],{"class":1019},[1002,17408,1143],{"class":1030},[1002,17410,17411],{"class":1004,"line":2471},[1002,17412,8353],{"class":1030},[1002,17414,17415],{"class":1004,"line":2476},[1002,17416,15113],{"class":1030},[1002,17418,17419],{"class":1004,"line":2481},[1002,17420,1170],{"class":1030},[953,17422,17424],{"id":17423},"method-decorator","Method Decorator",[925,17426,17427],{},"Method decorators allow us to override a method’s function, change its control flow, and execute additional code before\u002Fafter it runs.",[925,17429,17430],{},"The following decorator will show a confirm message in the browser before executing the method. If the user clicks cancel, it will be bypassed. Notice how we have two decorators stacked below - they will be applied from top to bottom.",[993,17432,17434],{"className":17047,"code":17433,"language":17049,"meta":998,"style":998},"export class Person {\n names = [];\n\n @Confirmable('Are you sure?')\n @Confirmable('Are you super, super sure? There is no going back!')\n addName(name) {\n this.names.push(name);\n }\n}\n\n\u002F\u002F Method Decorator\nfunction Confirmable(message: string) {\n return function (\n target: Object,\n key: string | symbol,\n descriptor: PropertyDescriptor,\n ) {\n const original = descriptor.value;\n\n descriptor.value = function (...args: any[]) {\n const allow = confirm(message);\n\n if (allow) {\n const result = original.apply(this, args);\n return result;\n } else {\n return null;\n }\n };\n\n return descriptor;\n };\n}\n",[941,17435,17436,17446,17455,17459,17473,17486,17497,17509,17513,17517,17521,17526,17543,17551,17562,17577,17589,17594,17606,17610,17637,17653,17657,17664,17685,17692,17701,17709,17713,17717,17721,17728,17732],{"__ignoreMap":998},[1002,17437,17438,17440,17442,17444],{"class":1004,"line":1005},[1002,17439,947],{"class":1015},[1002,17441,17187],{"class":1015},[1002,17443,7681],{"class":1026},[1002,17445,1457],{"class":1030},[1002,17447,17448,17451,17453],{"class":1004,"line":1012},[1002,17449,17450],{"class":2378}," names",[1002,17452,1023],{"class":1015},[1002,17454,4924],{"class":1030},[1002,17456,17457],{"class":1004,"line":1047},[1002,17458,1051],{"emptyLinePlaceholder":1050},[1002,17460,17461,17463,17466,17468,17471],{"class":1004,"line":1054},[1002,17462,17196],{"class":1030},[1002,17464,17465],{"class":1026},"Confirmable",[1002,17467,1031],{"class":1030},[1002,17469,17470],{"class":1034},"'Are you sure?'",[1002,17472,3808],{"class":1030},[1002,17474,17475,17477,17479,17481,17484],{"class":1004,"line":1060},[1002,17476,17196],{"class":1030},[1002,17478,17465],{"class":1026},[1002,17480,1031],{"class":1030},[1002,17482,17483],{"class":1034},"'Are you super, super sure? There is no going back!'",[1002,17485,3808],{"class":1030},[1002,17487,17488,17491,17493,17495],{"class":1004,"line":1272},[1002,17489,17490],{"class":1026}," addName",[1002,17492,1031],{"class":1030},[1002,17494,5911],{"class":2378},[1002,17496,2382],{"class":1030},[1002,17498,17499,17501,17504,17506],{"class":1004,"line":1348},[1002,17500,2387],{"class":1019},[1002,17502,17503],{"class":1030},".names.",[1002,17505,4974],{"class":1026},[1002,17507,17508],{"class":1030},"(name);\n",[1002,17510,17511],{"class":1004,"line":1354},[1002,17512,1269],{"class":1030},[1002,17514,17515],{"class":1004,"line":1360},[1002,17516,1170],{"class":1030},[1002,17518,17519],{"class":1004,"line":1366},[1002,17520,1051],{"emptyLinePlaceholder":1050},[1002,17522,17523],{"class":1004,"line":1946},[1002,17524,17525],{"class":1008},"\u002F\u002F Method Decorator\n",[1002,17527,17528,17530,17533,17535,17537,17539,17541],{"class":1004,"line":1956},[1002,17529,6965],{"class":1015},[1002,17531,17532],{"class":1026}," Confirmable",[1002,17534,1031],{"class":1030},[1002,17536,7100],{"class":2378},[1002,17538,1813],{"class":1015},[1002,17540,17261],{"class":1019},[1002,17542,2382],{"class":1030},[1002,17544,17545,17547,17549],{"class":1004,"line":1961},[1002,17546,15066],{"class":1015},[1002,17548,8457],{"class":1015},[1002,17550,15692],{"class":1030},[1002,17552,17553,17556,17558,17560],{"class":1004,"line":1971},[1002,17554,17555],{"class":2378}," target",[1002,17557,1813],{"class":1015},[1002,17559,17252],{"class":1026},[1002,17561,1143],{"class":1030},[1002,17563,17564,17567,17569,17571,17573,17575],{"class":1004,"line":1980},[1002,17565,17566],{"class":2378}," key",[1002,17568,1813],{"class":1015},[1002,17570,17261],{"class":1019},[1002,17572,17264],{"class":1015},[1002,17574,17267],{"class":1019},[1002,17576,1143],{"class":1030},[1002,17578,17579,17582,17584,17587],{"class":1004,"line":1985},[1002,17580,17581],{"class":2378}," descriptor",[1002,17583,1813],{"class":1015},[1002,17585,17586],{"class":1026}," PropertyDescriptor",[1002,17588,1143],{"class":1030},[1002,17590,17591],{"class":1004,"line":1995},[1002,17592,17593],{"class":1030}," ) {\n",[1002,17595,17596,17598,17601,17603],{"class":1004,"line":2006},[1002,17597,4348],{"class":1015},[1002,17599,17600],{"class":1019}," original",[1002,17602,1023],{"class":1015},[1002,17604,17605],{"class":1030}," descriptor.value;\n",[1002,17607,17608],{"class":1004,"line":2011},[1002,17609,1051],{"emptyLinePlaceholder":1050},[1002,17611,17612,17615,17617,17619,17621,17623,17626,17629,17631,17634],{"class":1004,"line":2017},[1002,17613,17614],{"class":1030}," descriptor.",[1002,17616,5047],{"class":1026},[1002,17618,1023],{"class":1015},[1002,17620,8457],{"class":1015},[1002,17622,6513],{"class":1030},[1002,17624,17625],{"class":1015},"...",[1002,17627,17628],{"class":2378},"args",[1002,17630,1813],{"class":1015},[1002,17632,17633],{"class":1019}," any",[1002,17635,17636],{"class":1030},"[]) {\n",[1002,17638,17639,17642,17645,17647,17650],{"class":1004,"line":2022},[1002,17640,17641],{"class":1015}," const",[1002,17643,17644],{"class":1019}," allow",[1002,17646,1023],{"class":1015},[1002,17648,17649],{"class":1026}," confirm",[1002,17651,17652],{"class":1030},"(message);\n",[1002,17654,17655],{"class":1004,"line":2442},[1002,17656,1051],{"emptyLinePlaceholder":1050},[1002,17658,17659,17661],{"class":1004,"line":2466},[1002,17660,8328],{"class":1015},[1002,17662,17663],{"class":1030}," (allow) {\n",[1002,17665,17666,17668,17670,17672,17675,17678,17680,17682],{"class":1004,"line":2471},[1002,17667,14549],{"class":1015},[1002,17669,13336],{"class":1019},[1002,17671,1023],{"class":1015},[1002,17673,17674],{"class":1030}," original.",[1002,17676,17677],{"class":1026},"apply",[1002,17679,1031],{"class":1030},[1002,17681,3455],{"class":1019},[1002,17683,17684],{"class":1030},", args);\n",[1002,17686,17687,17689],{"class":1004,"line":2476},[1002,17688,8341],{"class":1015},[1002,17690,17691],{"class":1030}," result;\n",[1002,17693,17694,17697,17699],{"class":1004,"line":2481},[1002,17695,17696],{"class":1030}," } ",[1002,17698,6060],{"class":1015},[1002,17700,1457],{"class":1030},[1002,17702,17703,17705,17707],{"class":1004,"line":2491},[1002,17704,8341],{"class":1015},[1002,17706,7080],{"class":1019},[1002,17708,1407],{"class":1030},[1002,17710,17711],{"class":1004,"line":2502},[1002,17712,1351],{"class":1030},[1002,17714,17715],{"class":1004,"line":2513},[1002,17716,10900],{"class":1030},[1002,17718,17719],{"class":1004,"line":2535},[1002,17720,1051],{"emptyLinePlaceholder":1050},[1002,17722,17723,17725],{"class":1004,"line":2557},[1002,17724,2687],{"class":1015},[1002,17726,17727],{"class":1030}," descriptor;\n",[1002,17729,17730],{"class":1004,"line":2562},[1002,17731,15113],{"class":1030},[1002,17733,17734],{"class":1004,"line":2567},[1002,17735,1170],{"class":1030},[925,17737,17738,17739,17742],{},"Originally added to support the Angular framework and it also requires the ",[928,17740,17741],{},"experimentalDecorators"," property to be set in tsconfig.json.",[925,17744,17745],{},"Their implementation has not yet been standardised by TC39, so any code you write today using decorators is liable to break or become non-standard in the future. Unless you’re using Angular or another framework that requires annotations and until they’re standardised, don’t use TypeScript’s decorators.",[953,17747,17749],{"id":17748},"enums","Enums",[925,17751,17752],{},"Enums allow a developer to define a set of named constants, instead of using numbers to avoid mistakes. For example, instead of using numbers like 1, 2 and 3, named constants like MONDAY, TUESDAY and WEDNESDAY can be used. This way the programmer doesn't have to remember which number to use.",[925,17754,17755],{},"Many programming languages use this concept. TypeScript also adds them to JavaScript:",[993,17757,17759],{"className":17047,"code":17758,"language":17049,"meta":998,"style":998},"enum WeekDay {\n MONDAY = 0,\n TUESDAY = 1,\n WEDNESDAY = 2,\n THURSDAY = 3,\n FRIDAY = 4,\n SATURDAY = 5,\n SUNDAY = 6,\n}\n\nconst Wednesday = WeekDay.WEDNESDAY;\n",[941,17760,17761,17771,17782,17793,17804,17816,17827,17838,17850,17854,17858],{"__ignoreMap":998},[1002,17762,17763,17766,17769],{"class":1004,"line":1005},[1002,17764,17765],{"class":1015},"enum",[1002,17767,17768],{"class":1026}," WeekDay",[1002,17770,1457],{"class":1030},[1002,17772,17773,17776,17778,17780],{"class":1004,"line":1012},[1002,17774,17775],{"class":1019}," MONDAY",[1002,17777,1023],{"class":1015},[1002,17779,4910],{"class":1019},[1002,17781,1143],{"class":1030},[1002,17783,17784,17787,17789,17791],{"class":1004,"line":1047},[1002,17785,17786],{"class":1019}," TUESDAY",[1002,17788,1023],{"class":1015},[1002,17790,6246],{"class":1019},[1002,17792,1143],{"class":1030},[1002,17794,17795,17798,17800,17802],{"class":1004,"line":1054},[1002,17796,17797],{"class":1019}," WEDNESDAY",[1002,17799,1023],{"class":1015},[1002,17801,10248],{"class":1019},[1002,17803,1143],{"class":1030},[1002,17805,17806,17809,17811,17814],{"class":1004,"line":1060},[1002,17807,17808],{"class":1019}," THURSDAY",[1002,17810,1023],{"class":1015},[1002,17812,17813],{"class":1019}," 3",[1002,17815,1143],{"class":1030},[1002,17817,17818,17821,17823,17825],{"class":1004,"line":1272},[1002,17819,17820],{"class":1019}," FRIDAY",[1002,17822,1023],{"class":1015},[1002,17824,2414],{"class":1019},[1002,17826,1143],{"class":1030},[1002,17828,17829,17832,17834,17836],{"class":1004,"line":1348},[1002,17830,17831],{"class":1019}," SATURDAY",[1002,17833,1023],{"class":1015},[1002,17835,6190],{"class":1019},[1002,17837,1143],{"class":1030},[1002,17839,17840,17843,17845,17848],{"class":1004,"line":1354},[1002,17841,17842],{"class":1019}," SUNDAY",[1002,17844,1023],{"class":1015},[1002,17846,17847],{"class":1019}," 6",[1002,17849,1143],{"class":1030},[1002,17851,17852],{"class":1004,"line":1360},[1002,17853,1170],{"class":1030},[1002,17855,17856],{"class":1004,"line":1366},[1002,17857,1051],{"emptyLinePlaceholder":1050},[1002,17859,17860,17862,17865,17867,17870,17873],{"class":1004,"line":1946},[1002,17861,1016],{"class":1015},[1002,17863,17864],{"class":1019}," Wednesday",[1002,17866,1023],{"class":1015},[1002,17868,17869],{"class":1030}," WeekDay.",[1002,17871,17872],{"class":1019},"WEDNESDAY",[1002,17874,1407],{"class":1030},[925,17876,17877],{},"But with TypeScript, enums have some quirks. There are actually several variants on enums that all have subtly different behaviours.",[925,17879,17880,17881,948],{},"Before looking into these behaviours, let's get familiarised with a term called ",[928,17882,17883],{},"substitution",[1655,17885,17886],{"id":17883},"Substitution",[925,17888,17889],{},"For performance and code size reasons, it's often preferable to have a reference to an enum member replaced by its numeric equivalent when compiled:",[993,17891,17893],{"className":17047,"code":17892,"language":17049,"meta":998,"style":998},"const enum Weekday {\n THURSDAY = 4,\n}\nconst Thursday = Weekday.THURSDAY; \u002F\u002F emitted as \"var Thursday = 4;\"\n",[941,17894,17895,17907,17917,17921],{"__ignoreMap":998},[1002,17896,17897,17899,17902,17905],{"class":1004,"line":1005},[1002,17898,1016],{"class":1015},[1002,17900,17901],{"class":1015}," enum",[1002,17903,17904],{"class":1026}," Weekday",[1002,17906,1457],{"class":1030},[1002,17908,17909,17911,17913,17915],{"class":1004,"line":1012},[1002,17910,17808],{"class":1019},[1002,17912,1023],{"class":1015},[1002,17914,2414],{"class":1019},[1002,17916,1143],{"class":1030},[1002,17918,17919],{"class":1004,"line":1047},[1002,17920,1170],{"class":1030},[1002,17922,17923,17925,17928,17930,17933,17936,17939],{"class":1004,"line":1054},[1002,17924,1016],{"class":1015},[1002,17926,17927],{"class":1019}," Thursday",[1002,17929,1023],{"class":1015},[1002,17931,17932],{"class":1030}," Weekday.",[1002,17934,17935],{"class":1019},"THURSDAY",[1002,17937,17938],{"class":1030},"; ",[1002,17940,17941],{"class":1008},"\u002F\u002F emitted as \"var Thursday = 4;\"\n",[925,17943,17944,17945,17948],{},"Sometimes you will ",[928,17946,17947],{},"not"," want enum members to be inlined, for example, because the enum value might change in a future version of the API.",[925,17950,17951],{},"Now let's look at the different variants of enums available in TypeScript.",[1655,17953,1016],{"id":1016},[925,17955,17956,17957,17959,17960,6620,17962,17965],{},"An enum declaration can have the ",[941,17958,1016],{}," modifier. If an enum is ",[941,17961,1016],{},[928,17963,17964],{},"all"," references to its members are inlined.",[993,17967,17969],{"className":17047,"code":17968,"language":17049,"meta":998,"style":998},"const enum Weekday {\n THURSDAY = 4,\n}\nconst Thursday = Weekday.THURSDAY; \u002F\u002F emitted as \"var Thursday = 4;\", always\n",[941,17970,17971,17981,17991,17995],{"__ignoreMap":998},[1002,17972,17973,17975,17977,17979],{"class":1004,"line":1005},[1002,17974,1016],{"class":1015},[1002,17976,17901],{"class":1015},[1002,17978,17904],{"class":1026},[1002,17980,1457],{"class":1030},[1002,17982,17983,17985,17987,17989],{"class":1004,"line":1012},[1002,17984,17808],{"class":1019},[1002,17986,1023],{"class":1015},[1002,17988,2414],{"class":1019},[1002,17990,1143],{"class":1030},[1002,17992,17993],{"class":1004,"line":1047},[1002,17994,1170],{"class":1030},[1002,17996,17997,17999,18001,18003,18005,18007,18009],{"class":1004,"line":1054},[1002,17998,1016],{"class":1015},[1002,18000,17927],{"class":1019},[1002,18002,1023],{"class":1015},[1002,18004,17932],{"class":1030},[1002,18006,17935],{"class":1019},[1002,18008,17938],{"class":1030},[1002,18010,18011],{"class":1008},"\u002F\u002F emitted as \"var Thursday = 4;\", always\n",[925,18013,18014,18015,18018,18019,18021],{},"const enums do not produce a lookup object when compiled. That means const enums go away completely at runtime. For this reason, it is an error to reference ",[941,18016,18017],{},"Weekday"," in the above code except as part of a member reference. No ",[941,18020,18017],{}," object will be present at runtime.",[1655,18023,18025],{"id":18024},"const-with-preserveconstenums-flag","const with -preserveConstEnums flag",[925,18027,18028,18029,18031],{},"This flag has exactly one effect: non-declare const enums will emit a lookup object. ",[928,18030,17886],{}," is not affected. This is useful for debugging.",[1655,18033,18034],{"id":18034},"number",[925,18036,18037,18038,18040],{},"A number-valued enum like ",[941,18039,18017],{},". This is not safe as not any number can be assigned to this. It was originally designed to make bit flag structures possible.",[1655,18042,18043],{"id":18043},"string",[925,18045,18046],{},"A string-valued enum. This offers type safety, and also more transparent values at runtime. But unlike every other type in TypeScript, it is not structurally typed.",[925,18048,18049],{},"Since every other type in TypeScript uses structural typing for assignability, nominally typed string-valued enums come as a surprise:",[993,18051,18053],{"className":17047,"code":18052,"language":17049,"meta":998,"style":998},"enum WeekDay {\n MONDAY = 'Monday',\n TUESDAY = 'Tuesday',\n WEDNESDAY = 'Wednesday',\n THURSDAY = 'Thursday',\n FRIDAY = 'Friday',\n SATURDAY = 'Saturday',\n SUNDAY = 'Sunday',\n}\n\nlet Wednesday = WeekDay.WEDNESDAY; \u002F\u002F Type is WeekDay\nWednesday = 'Wednesday'; \u002F\u002F Error: Type '\"Wednesday\"' is not assignable to type 'WeekDay'.\n",[941,18054,18055,18063,18074,18085,18096,18107,18118,18129,18140,18144,18148,18166],{"__ignoreMap":998},[1002,18056,18057,18059,18061],{"class":1004,"line":1005},[1002,18058,17765],{"class":1015},[1002,18060,17768],{"class":1026},[1002,18062,1457],{"class":1030},[1002,18064,18065,18067,18069,18072],{"class":1004,"line":1012},[1002,18066,17775],{"class":1019},[1002,18068,1023],{"class":1015},[1002,18070,18071],{"class":1034}," 'Monday'",[1002,18073,1143],{"class":1030},[1002,18075,18076,18078,18080,18083],{"class":1004,"line":1047},[1002,18077,17786],{"class":1019},[1002,18079,1023],{"class":1015},[1002,18081,18082],{"class":1034}," 'Tuesday'",[1002,18084,1143],{"class":1030},[1002,18086,18087,18089,18091,18094],{"class":1004,"line":1054},[1002,18088,17797],{"class":1019},[1002,18090,1023],{"class":1015},[1002,18092,18093],{"class":1034}," 'Wednesday'",[1002,18095,1143],{"class":1030},[1002,18097,18098,18100,18102,18105],{"class":1004,"line":1060},[1002,18099,17808],{"class":1019},[1002,18101,1023],{"class":1015},[1002,18103,18104],{"class":1034}," 'Thursday'",[1002,18106,1143],{"class":1030},[1002,18108,18109,18111,18113,18116],{"class":1004,"line":1272},[1002,18110,17820],{"class":1019},[1002,18112,1023],{"class":1015},[1002,18114,18115],{"class":1034}," 'Friday'",[1002,18117,1143],{"class":1030},[1002,18119,18120,18122,18124,18127],{"class":1004,"line":1348},[1002,18121,17831],{"class":1019},[1002,18123,1023],{"class":1015},[1002,18125,18126],{"class":1034}," 'Saturday'",[1002,18128,1143],{"class":1030},[1002,18130,18131,18133,18135,18138],{"class":1004,"line":1354},[1002,18132,17842],{"class":1019},[1002,18134,1023],{"class":1015},[1002,18136,18137],{"class":1034}," 'Sunday'",[1002,18139,1143],{"class":1030},[1002,18141,18142],{"class":1004,"line":1360},[1002,18143,1170],{"class":1030},[1002,18145,18146],{"class":1004,"line":1366},[1002,18147,1051],{"emptyLinePlaceholder":1050},[1002,18149,18150,18152,18155,18157,18159,18161,18163],{"class":1004,"line":1946},[1002,18151,6516],{"class":1015},[1002,18153,18154],{"class":1030}," Wednesday ",[1002,18156,2393],{"class":1015},[1002,18158,17869],{"class":1030},[1002,18160,17872],{"class":1019},[1002,18162,17938],{"class":1030},[1002,18164,18165],{"class":1008},"\u002F\u002F Type is WeekDay\n",[1002,18167,18168,18171,18173,18175,18177],{"class":1004,"line":1956},[1002,18169,18170],{"class":1030},"Wednesday ",[1002,18172,2393],{"class":1015},[1002,18174,18093],{"class":1034},[1002,18176,17938],{"class":1030},[1002,18178,18179],{"class":1008},"\u002F\u002F Error: Type '\"Wednesday\"' is not assignable to type 'WeekDay'.\n",[925,18181,18182],{},"This could course issues if you are exporting this as a module.",[925,18184,18185],{},"Let's assume you have a function that takes this enum as a parameter.",[993,18187,18189],{"className":17047,"code":18188,"language":17049,"meta":998,"style":998},"function assignDayOfWeek(weekday: WeekDay) {\n ...\n}\n",[941,18190,18191,18209,18214],{"__ignoreMap":998},[1002,18192,18193,18195,18198,18200,18203,18205,18207],{"class":1004,"line":1005},[1002,18194,6965],{"class":1015},[1002,18196,18197],{"class":1026}," assignDayOfWeek",[1002,18199,1031],{"class":1030},[1002,18201,18202],{"class":2378},"weekday",[1002,18204,1813],{"class":1015},[1002,18206,17768],{"class":1026},[1002,18208,2382],{"class":1030},[1002,18210,18211],{"class":1004,"line":1012},[1002,18212,18213],{"class":1015}," ...\n",[1002,18215,18216],{"class":1004,"line":1047},[1002,18217,1170],{"class":1030},[925,18219,18220],{},"If we are using this library inside a TypeScript project, we will have to import the enum and use that instead of passing in the day of the week as a string:",[993,18222,18224],{"className":17047,"code":18223,"language":17049,"meta":998,"style":998},"import { WeekDay } from 'days';\n\nassignDayOfWeek('Wednesday'); \u002F\u002F Error!\n\nassignDayOfWeek(WeekDay.Wednesday);\n",[941,18225,18226,18240,18244,18260,18264],{"__ignoreMap":998},[1002,18227,18228,18230,18233,18235,18238],{"class":1004,"line":1005},[1002,18229,943],{"class":1015},[1002,18231,18232],{"class":1030}," { WeekDay } ",[1002,18234,1068],{"class":1015},[1002,18236,18237],{"class":1034}," 'days'",[1002,18239,1407],{"class":1030},[1002,18241,18242],{"class":1004,"line":1012},[1002,18243,1051],{"emptyLinePlaceholder":1050},[1002,18245,18246,18249,18251,18254,18257],{"class":1004,"line":1047},[1002,18247,18248],{"class":1026},"assignDayOfWeek",[1002,18250,1031],{"class":1030},[1002,18252,18253],{"class":1034},"'Wednesday'",[1002,18255,18256],{"class":1030},"); ",[1002,18258,18259],{"class":1008},"\u002F\u002F Error!\n",[1002,18261,18262],{"class":1004,"line":1054},[1002,18263,1051],{"emptyLinePlaceholder":1050},[1002,18265,18266,18268],{"class":1004,"line":1060},[1002,18267,18248],{"class":1026},[1002,18269,18270],{"class":1030},"(WeekDay.Wednesday);\n",[925,18272,18273],{},"But if the user is only using JavaScript, this can be used directly:",[993,18275,18277],{"className":2227,"code":18276,"language":2229,"meta":998,"style":998},"assignDayOfWeek('Wednesday'); \u002F\u002F Ok!\n",[941,18278,18279],{"__ignoreMap":998},[1002,18280,18281,18283,18285,18287,18289],{"class":1004,"line":1005},[1002,18282,18248],{"class":1026},[1002,18284,1031],{"class":1030},[1002,18286,18253],{"class":1034},[1002,18288,18256],{"class":1030},[1002,18290,18291],{"class":1008},"\u002F\u002F Ok!\n",[925,18293,18294],{},"This inconsistency is one reason we should avoid using string-valued enums. The other reason is the amount of code emitted by the TypeScript compiler:",[993,18296,18298],{"className":2227,"code":18297,"language":2229,"meta":998,"style":998},"'use strict';\nvar WeekDay;\n(function (WeekDay) {\n WeekDay['MONDAY'] = 'Monday';\n WeekDay['TUESDAY'] = 'Tuesday';\n WeekDay['WEDNESDAY'] = 'Wednesday';\n WeekDay['THURSDAY'] = 'Thursday';\n WeekDay['FRIDAY'] = 'Friday';\n WeekDay['SATURDAY'] = 'Saturday';\n WeekDay['SUNDAY'] = 'Sunday';\n})(WeekDay || (WeekDay = {}));\n",[941,18299,18300,18307,18315,18328,18345,18360,18375,18390,18405,18420,18435],{"__ignoreMap":998},[1002,18301,18302,18305],{"class":1004,"line":1005},[1002,18303,18304],{"class":1034},"'use strict'",[1002,18306,1407],{"class":1030},[1002,18308,18309,18312],{"class":1004,"line":1012},[1002,18310,18311],{"class":1015},"var",[1002,18313,18314],{"class":1030}," WeekDay;\n",[1002,18316,18317,18319,18321,18323,18326],{"class":1004,"line":1047},[1002,18318,1031],{"class":1030},[1002,18320,6965],{"class":1015},[1002,18322,6513],{"class":1030},[1002,18324,18325],{"class":2378},"WeekDay",[1002,18327,2382],{"class":1030},[1002,18329,18330,18333,18336,18339,18341,18343],{"class":1004,"line":1054},[1002,18331,18332],{"class":1030}," WeekDay[",[1002,18334,18335],{"class":1034},"'MONDAY'",[1002,18337,18338],{"class":1030},"] ",[1002,18340,2393],{"class":1015},[1002,18342,18071],{"class":1034},[1002,18344,1407],{"class":1030},[1002,18346,18347,18349,18352,18354,18356,18358],{"class":1004,"line":1060},[1002,18348,18332],{"class":1030},[1002,18350,18351],{"class":1034},"'TUESDAY'",[1002,18353,18338],{"class":1030},[1002,18355,2393],{"class":1015},[1002,18357,18082],{"class":1034},[1002,18359,1407],{"class":1030},[1002,18361,18362,18364,18367,18369,18371,18373],{"class":1004,"line":1272},[1002,18363,18332],{"class":1030},[1002,18365,18366],{"class":1034},"'WEDNESDAY'",[1002,18368,18338],{"class":1030},[1002,18370,2393],{"class":1015},[1002,18372,18093],{"class":1034},[1002,18374,1407],{"class":1030},[1002,18376,18377,18379,18382,18384,18386,18388],{"class":1004,"line":1348},[1002,18378,18332],{"class":1030},[1002,18380,18381],{"class":1034},"'THURSDAY'",[1002,18383,18338],{"class":1030},[1002,18385,2393],{"class":1015},[1002,18387,18104],{"class":1034},[1002,18389,1407],{"class":1030},[1002,18391,18392,18394,18397,18399,18401,18403],{"class":1004,"line":1354},[1002,18393,18332],{"class":1030},[1002,18395,18396],{"class":1034},"'FRIDAY'",[1002,18398,18338],{"class":1030},[1002,18400,2393],{"class":1015},[1002,18402,18115],{"class":1034},[1002,18404,1407],{"class":1030},[1002,18406,18407,18409,18412,18414,18416,18418],{"class":1004,"line":1360},[1002,18408,18332],{"class":1030},[1002,18410,18411],{"class":1034},"'SATURDAY'",[1002,18413,18338],{"class":1030},[1002,18415,2393],{"class":1015},[1002,18417,18126],{"class":1034},[1002,18419,1407],{"class":1030},[1002,18421,18422,18424,18427,18429,18431,18433],{"class":1004,"line":1366},[1002,18423,18332],{"class":1030},[1002,18425,18426],{"class":1034},"'SUNDAY'",[1002,18428,18338],{"class":1030},[1002,18430,2393],{"class":1015},[1002,18432,18137],{"class":1034},[1002,18434,1407],{"class":1030},[1002,18436,18437,18440,18442,18445,18447],{"class":1004,"line":1946},[1002,18438,18439],{"class":1030},"})(WeekDay ",[1002,18441,8392],{"class":1015},[1002,18443,18444],{"class":1030}," (WeekDay ",[1002,18446,2393],{"class":1015},[1002,18448,18449],{"class":1030}," {}));\n",[925,18451,18452],{},"Instead, if you chose an alternative to enums that offered by TypeScript: a union of literal types.",[993,18454,18456],{"className":2227,"code":18455,"language":2229,"meta":998,"style":998},"type WeekDay = 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday' | 'Sunday';\n",[941,18457,18458],{"__ignoreMap":998},[1002,18459,18460,18463,18465,18467,18469,18471,18473,18475,18477,18479,18481,18483,18485,18487,18489,18491,18493],{"class":1004,"line":1005},[1002,18461,18462],{"class":1015},"type",[1002,18464,17768],{"class":1026},[1002,18466,1023],{"class":1015},[1002,18468,18071],{"class":1034},[1002,18470,17264],{"class":1015},[1002,18472,18082],{"class":1034},[1002,18474,17264],{"class":1015},[1002,18476,18093],{"class":1034},[1002,18478,17264],{"class":1015},[1002,18480,18104],{"class":1034},[1002,18482,17264],{"class":1015},[1002,18484,18115],{"class":1034},[1002,18486,17264],{"class":1015},[1002,18488,18126],{"class":1034},[1002,18490,17264],{"class":1015},[1002,18492,18137],{"class":1034},[1002,18494,1407],{"class":1030},[925,18496,18497],{},"This offers has the advantage of translating more directly to JavaScript and as much safety as the enum. It also offers similarly strong autocomplete in your editor:",[993,18499,18501],{"className":2227,"code":18500,"language":2229,"meta":998,"style":998},"function assignDayOfWeek(weekday: WeekDay) {\n if (weekday === 'W) \u002F\u002F Autocomplete here suggests 'Wednesday'\n}\n",[941,18502,18503,18519,18537],{"__ignoreMap":998},[1002,18504,18505,18507,18509,18511,18513,18515,18517],{"class":1004,"line":1005},[1002,18506,6965],{"class":1015},[1002,18508,18197],{"class":1026},[1002,18510,1031],{"class":1030},[1002,18512,18202],{"class":2378},[1002,18514,1813],{"class":1015},[1002,18516,17768],{"class":1026},[1002,18518,2382],{"class":1030},[1002,18520,18521,18523,18526,18528,18531,18534],{"class":1004,"line":1012},[1002,18522,4368],{"class":1015},[1002,18524,18525],{"class":1030}," (weekday ",[1002,18527,2892],{"class":1015},[1002,18529,18530],{"class":1034}," 'W) \u002F\u002F Autocomplete here suggests '",[1002,18532,18533],{"class":1030},"Wednesday",[1002,18535,18536],{"class":1034},"'\n",[1002,18538,18539],{"class":1004,"line":1047},[1002,18540,1170],{"class":18541},"s7hpK",[925,18543,18544],{},"And once compiled the type will go away, reducing the bundle size.",[925,18546,18547,18548],{},"Read more about string literal types versus enums here: ",[933,18549,18550],{"href":18550,"rel":18551},"https:\u002F\u002Fszaranger.medium.com\u002Fwhats-an-enum-65db967d8bb6",[937],[953,18553,18555],{"id":18554},"parameter-properties",[1107,18556,18557],{},"Parameter Properties",[925,18559,18560],{},"Parameter properties let us create and initialise member variables in one place. It is a shorthand for creating member variables.",[925,18562,18563],{},"So far we have been doing this:",[993,18565,18567],{"className":2227,"code":18566,"language":2229,"meta":998,"style":998},"class Person{\n private name: string;\n private age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n}\n",[941,18568,18569,18577,18591,18605,18629,18639,18651,18655],{"__ignoreMap":998},[1002,18570,18571,18573,18575],{"class":1004,"line":1005},[1002,18572,2363],{"class":1015},[1002,18574,7681],{"class":1026},[1002,18576,1129],{"class":1030},[1002,18578,18579,18582,18585,18587,18589],{"class":1004,"line":1012},[1002,18580,18581],{"class":1015}," private",[1002,18583,18584],{"class":2378}," name",[1002,18586,1813],{"class":1015},[1002,18588,17261],{"class":1019},[1002,18590,1407],{"class":1030},[1002,18592,18593,18595,18598,18600,18603],{"class":1004,"line":1047},[1002,18594,18581],{"class":1015},[1002,18596,18597],{"class":2378}," age",[1002,18599,1813],{"class":1015},[1002,18601,18602],{"class":1019}," number",[1002,18604,1407],{"class":1030},[1002,18606,18607,18610,18612,18614,18616,18618,18620,18623,18625,18627],{"class":1004,"line":1054},[1002,18608,18609],{"class":1015}," constructor",[1002,18611,1031],{"class":1030},[1002,18613,5911],{"class":2378},[1002,18615,1813],{"class":1015},[1002,18617,17261],{"class":1019},[1002,18619,1251],{"class":1030},[1002,18621,18622],{"class":2378},"age",[1002,18624,1813],{"class":1015},[1002,18626,18602],{"class":1019},[1002,18628,2382],{"class":1030},[1002,18630,18631,18633,18635,18637],{"class":1004,"line":1060},[1002,18632,2622],{"class":1019},[1002,18634,5945],{"class":1030},[1002,18636,2393],{"class":1015},[1002,18638,5950],{"class":1030},[1002,18640,18641,18643,18646,18648],{"class":1004,"line":1272},[1002,18642,2622],{"class":1019},[1002,18644,18645],{"class":1030},".age ",[1002,18647,2393],{"class":1015},[1002,18649,18650],{"class":1030}," age;\n",[1002,18652,18653],{"class":1004,"line":1348},[1002,18654,2014],{"class":1030},[1002,18656,18657],{"class":1004,"line":1354},[1002,18658,1170],{"class":1030},[925,18660,18661],{},"This can be replaced with parameter properties like this:",[993,18663,18665],{"className":17047,"code":18664,"language":17049,"meta":998,"style":998},"class Person {\n constructor(\n private name: string,\n private age: number,\n ) {}\n}\n",[941,18666,18667,18675,18681,18693,18705,18710],{"__ignoreMap":998},[1002,18668,18669,18671,18673],{"class":1004,"line":1005},[1002,18670,2363],{"class":1015},[1002,18672,7681],{"class":1026},[1002,18674,1457],{"class":1030},[1002,18676,18677,18679],{"class":1004,"line":1012},[1002,18678,2373],{"class":1015},[1002,18680,10468],{"class":1030},[1002,18682,18683,18685,18687,18689,18691],{"class":1004,"line":1047},[1002,18684,18581],{"class":1015},[1002,18686,18584],{"class":2378},[1002,18688,1813],{"class":1015},[1002,18690,17261],{"class":1019},[1002,18692,1143],{"class":1030},[1002,18694,18695,18697,18699,18701,18703],{"class":1004,"line":1054},[1002,18696,18581],{"class":1015},[1002,18698,18597],{"class":2378},[1002,18700,1813],{"class":1015},[1002,18702,18602],{"class":1019},[1002,18704,1143],{"class":1030},[1002,18706,18707],{"class":1004,"line":1060},[1002,18708,18709],{"class":1030}," ) {}\n",[1002,18711,18712],{"class":1004,"line":1272},[1002,18713,1170],{"class":1030},[925,18715,18716],{},"Usually TypeScript compilation erases types at compilation. But parameter properties would generate code after compilation. Here is the generated code:",[993,18718,18720],{"className":2227,"code":18719,"language":2229,"meta":998,"style":998},"'use strict';\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n}\n",[941,18721,18722,18728,18736,18750,18760,18770,18774],{"__ignoreMap":998},[1002,18723,18724,18726],{"class":1004,"line":1005},[1002,18725,18304],{"class":1034},[1002,18727,1407],{"class":1030},[1002,18729,18730,18732,18734],{"class":1004,"line":1012},[1002,18731,2363],{"class":1015},[1002,18733,7681],{"class":1026},[1002,18735,1457],{"class":1030},[1002,18737,18738,18740,18742,18744,18746,18748],{"class":1004,"line":1047},[1002,18739,2373],{"class":1015},[1002,18741,1031],{"class":1030},[1002,18743,5911],{"class":2378},[1002,18745,1251],{"class":1030},[1002,18747,18622],{"class":2378},[1002,18749,2382],{"class":1030},[1002,18751,18752,18754,18756,18758],{"class":1004,"line":1054},[1002,18753,2387],{"class":1019},[1002,18755,5945],{"class":1030},[1002,18757,2393],{"class":1015},[1002,18759,5950],{"class":1030},[1002,18761,18762,18764,18766,18768],{"class":1004,"line":1060},[1002,18763,2387],{"class":1019},[1002,18765,18645],{"class":1030},[1002,18767,2393],{"class":1015},[1002,18769,18650],{"class":1030},[1002,18771,18772],{"class":1004,"line":1272},[1002,18773,1269],{"class":1030},[1002,18775,18776],{"class":1004,"line":1348},[1002,18777,1170],{"class":1030},[925,18779,18780],{},"This could be confusing to the reader of the code because the parameter is only used in generated code, but the source looks like it has unused parameters.",[993,18782,18784],{"className":17047,"code":18783,"language":17049,"meta":998,"style":998},"class Person {\n constructor(\n private name: string,\n private age: number,\n ) {\n \u002F\u002F what happens to the parameters here ?\n }\n}\n",[941,18785,18786,18794,18800,18812,18824,18828,18833,18837],{"__ignoreMap":998},[1002,18787,18788,18790,18792],{"class":1004,"line":1005},[1002,18789,2363],{"class":1015},[1002,18791,7681],{"class":1026},[1002,18793,1457],{"class":1030},[1002,18795,18796,18798],{"class":1004,"line":1012},[1002,18797,2373],{"class":1015},[1002,18799,10468],{"class":1030},[1002,18801,18802,18804,18806,18808,18810],{"class":1004,"line":1047},[1002,18803,18581],{"class":1015},[1002,18805,18584],{"class":2378},[1002,18807,1813],{"class":1015},[1002,18809,17261],{"class":1019},[1002,18811,1143],{"class":1030},[1002,18813,18814,18816,18818,18820,18822],{"class":1004,"line":1054},[1002,18815,18581],{"class":1015},[1002,18817,18597],{"class":2378},[1002,18819,1813],{"class":1015},[1002,18821,18602],{"class":1019},[1002,18823,1143],{"class":1030},[1002,18825,18826],{"class":1004,"line":1060},[1002,18827,17593],{"class":1030},[1002,18829,18830],{"class":1004,"line":1272},[1002,18831,18832],{"class":1008}," \u002F\u002F what happens to the parameters here ?\n",[1002,18834,18835],{"class":1004,"line":1348},[1002,18836,1269],{"class":1030},[1002,18838,18839],{"class":1004,"line":1354},[1002,18840,1170],{"class":1030},[925,18842,18843],{},"Mixing up parameter and non-parameter properties appear to be hiding the design of your classes.",[925,18845,18846],{},"For example:",[993,18848,18850],{"className":17047,"code":18849,"language":17049,"meta":998,"style":998},"class Person {\n number: string;\n street: string;\n constructor(address: string) {\n [this.number, this.street] = address.split(',');\n }\n}\n",[941,18851,18852,18860,18871,18882,18896,18926,18930],{"__ignoreMap":998},[1002,18853,18854,18856,18858],{"class":1004,"line":1005},[1002,18855,2363],{"class":1015},[1002,18857,7681],{"class":1026},[1002,18859,1457],{"class":1030},[1002,18861,18862,18865,18867,18869],{"class":1004,"line":1012},[1002,18863,18864],{"class":2378}," number",[1002,18866,1813],{"class":1015},[1002,18868,17261],{"class":1019},[1002,18870,1407],{"class":1030},[1002,18872,18873,18876,18878,18880],{"class":1004,"line":1047},[1002,18874,18875],{"class":2378}," street",[1002,18877,1813],{"class":1015},[1002,18879,17261],{"class":1019},[1002,18881,1407],{"class":1030},[1002,18883,18884,18886,18888,18890,18892,18894],{"class":1004,"line":1054},[1002,18885,2373],{"class":1015},[1002,18887,1031],{"class":1030},[1002,18889,14271],{"class":2378},[1002,18891,1813],{"class":1015},[1002,18893,17261],{"class":1019},[1002,18895,2382],{"class":1030},[1002,18897,18898,18901,18903,18906,18908,18911,18913,18916,18919,18921,18924],{"class":1004,"line":1060},[1002,18899,18900],{"class":1030}," [",[1002,18902,3455],{"class":1019},[1002,18904,18905],{"class":1030},".number, ",[1002,18907,3455],{"class":1019},[1002,18909,18910],{"class":1030},".street] ",[1002,18912,2393],{"class":1015},[1002,18914,18915],{"class":1030}," address.",[1002,18917,18918],{"class":1026},"split",[1002,18920,1031],{"class":1030},[1002,18922,18923],{"class":1034},"','",[1002,18925,1085],{"class":1030},[1002,18927,18928],{"class":1004,"line":1272},[1002,18929,1269],{"class":1030},[1002,18931,18932],{"class":1004,"line":1348},[1002,18933,1170],{"class":1030},[925,18935,18936],{},"There are three properties here: number, street and address, but it's hard to identify as there are only two properties listed before the constructor.",[925,18938,18939],{},"Because of this, it is recommended to avoid hiding the design of your class by using a mix of parameter and non-parameter properties.",[953,18941,18943],{"id":18942},"namespaces","Namespaces",[925,18945,18946],{},"If you are coming from languages like C# or C++ this seems like the most natural way to go. TypeScript used namespaces before ECMAScript 2015 because JavaScript didn't have a standard module system.",[993,18948,18950],{"className":17047,"code":18949,"language":17049,"meta":998,"style":998},"namespace Person {\n function run() {}\n}\n",[941,18951,18952,18961,18971],{"__ignoreMap":998},[1002,18953,18954,18957,18959],{"class":1004,"line":1005},[1002,18955,18956],{"class":1015},"namespace",[1002,18958,7681],{"class":1026},[1002,18960,1457],{"class":1030},[1002,18962,18963,18966,18969],{"class":1004,"line":1012},[1002,18964,18965],{"class":1015}," function",[1002,18967,18968],{"class":1026}," run",[1002,18970,2997],{"class":1030},[1002,18972,18973],{"class":1004,"line":1047},[1002,18974,1170],{"class":1030},[925,18976,18977],{},"But since ECMAScript 2015, namespaces have become a legacy feature. It is also not a part of the ECMAScript. And the TypeScript team will continue to follow the standard. There has been no improvement regarding TypeScript namespaces since the release of the ECMAScript modules standard in July 2014.",[1655,18979,18981],{"id":18980},"triple-slash-imports",[1107,18982,18983],{},"Triple-Slash Imports",[925,18985,18986,18987,18990],{},"To resolve module imports, before ES2015 TypeScript used a module keyword and ",[928,18988,18989],{},"triple-slash"," imports.",[993,18992,18994],{"className":17047,"code":18993,"language":17049,"meta":998,"style":998},"namespace Person {\n function getName() {}\n}\n\n\u002F\u002F\u002F \u003Creference path=\"Person.ts\"\u002F>\nPerson.getName();\n",[941,18995,18996,19004,19013,19017,19021,19040],{"__ignoreMap":998},[1002,18997,18998,19000,19002],{"class":1004,"line":1005},[1002,18999,18956],{"class":1015},[1002,19001,7681],{"class":1026},[1002,19003,1457],{"class":1030},[1002,19005,19006,19008,19011],{"class":1004,"line":1012},[1002,19007,18965],{"class":1015},[1002,19009,19010],{"class":1026}," getName",[1002,19012,2997],{"class":1030},[1002,19014,19015],{"class":1004,"line":1047},[1002,19016,1170],{"class":1030},[1002,19018,19019],{"class":1004,"line":1054},[1002,19020,1051],{"emptyLinePlaceholder":1050},[1002,19022,19023,19026,19029,19032,19034,19037],{"class":1004,"line":1060},[1002,19024,19025],{"class":1008},"\u002F\u002F\u002F \u003C",[1002,19027,19028],{"class":15711},"reference",[1002,19030,19031],{"class":1026}," path",[1002,19033,2393],{"class":1015},[1002,19035,19036],{"class":1034},"\"Person.ts\"",[1002,19038,19039],{"class":1008},"\u002F>\n",[1002,19041,19042,19045,19048],{"class":1004,"line":1272},[1002,19043,19044],{"class":1030},"Person.",[1002,19046,19047],{"class":1026},"getName",[1002,19049,1428],{"class":1030},[925,19051,19052],{},"This is no longer the standard of importing modules in TypeScript anymore. You should always use ES2015 style imports and exports.",[953,19054,1521],{"id":1520},[925,19056,19057],{},"Avoid following TypeScript features as much as you can:",[971,19059,19060,19062,19064,19067,19069],{},[974,19061,17017],{},[974,19063,17749],{},[974,19065,19066],{},"Parameter properties",[974,19068,18943],{},[974,19070,18983],{},[1579,19072,19073],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":19075},[19076,19080,19081,19088,19089,19092],{"id":17016,"depth":1012,"text":17017,"children":19077},[19078,19079],{"id":17040,"depth":1047,"text":17041},{"id":17163,"depth":1047,"text":17041},{"id":17423,"depth":1012,"text":17424},{"id":17748,"depth":1012,"text":17749,"children":19082},[19083,19084,19085,19086,19087],{"id":17883,"depth":1047,"text":17886},{"id":1016,"depth":1047,"text":1016},{"id":18024,"depth":1047,"text":18025},{"id":18034,"depth":1047,"text":18034},{"id":18043,"depth":1047,"text":18043},{"id":18554,"depth":1012,"text":18557},{"id":18942,"depth":1012,"text":18943,"children":19090},[19091],{"id":18980,"depth":1047,"text":18983},{"id":1520,"depth":1012,"text":1521},"2021-11-12","\u002Fimages\u002Fblog\u002Ffeatures\u002Ftypescript-features-you-should-no-longer-use.jpg",{},{"title":866,"description":868},"blog\u002Ftypescript-features-you-should-no-longer-use",[16,17,870],"Rx-VtKEdn8_ZtWepXBsf_fwOVwEirwBQSthZlMEsVq4",{"id":19101,"title":872,"author":920,"body":19102,"date":19687,"description":874,"extension":1591,"image":19688,"meta":19689,"navigation":1050,"path":873,"seo":19690,"stem":19691,"tags":19692,"__hash__":19693},"blog\u002Fblog\u002Funderstanding-cloneelement-isvalidelement-and-render-props.md",{"type":922,"value":19103,"toc":19681},[19104,19107,19111,19114,19124,19127,19257,19263,19279,19282,19327,19331,19342,19357,19360,19508,19512,19515,19518,19661,19663,19669,19678],[925,19105,19106],{},"In this story, we’ll have a look at using these to compose React components, how they work and when to use them. We then look at how the render props pattern can help transform elements the way we need them.",[953,19108,19110],{"id":19109},"add-new-props-to-an-existing-component-using-cloneelement","Add new props to an existing component using cloneElement",[925,19112,19113],{},"Let's say, for example, you want to add a new class and an on-click handler to the children of an existing component.",[925,19115,19116,19117,19120,19121,948],{},"One of the ways we can add new props to the ",[941,19118,19119],{},"children"," is by using ",[941,19122,19123],{},"React.cloneElement()",[925,19125,19126],{},"Here's how we can implement it:",[993,19128,19130],{"className":15855,"code":19129,"language":15857,"meta":998,"style":998},"function Buttons({ children }) {\n const newProps = {\n className: \"highlight\",\n onClick: () => console.log(\"Clicked!\")\n };\n\n return (\n \u003C>\n {children.map((child, index) =>\n React.cloneElement(child, { ...newProps, key: index })\n )}\n \u003C\u002F>\n );\n}\n",[941,19131,19132,19142,19153,19161,19180,19184,19188,19194,19199,19215,19236,19241,19249,19253],{"__ignoreMap":998},[1002,19133,19134,19136,19139],{"class":1004,"line":1005},[1002,19135,6965],{"class":1015},[1002,19137,19138],{"class":1026}," Buttons",[1002,19140,19141],{"class":1030},"({ children }) {\n",[1002,19143,19144,19146,19149,19151],{"class":1004,"line":1012},[1002,19145,10423],{"class":1026},[1002,19147,19148],{"class":1034}," newProps",[1002,19150,1023],{"class":1034},[1002,19152,1457],{"class":1034},[1002,19154,19155,19158],{"class":1004,"line":1047},[1002,19156,19157],{"class":1026}," className:",[1002,19159,19160],{"class":1034}," \"highlight\",\n",[1002,19162,19163,19166,19169,19172,19175,19178],{"class":1004,"line":1054},[1002,19164,19165],{"class":1026}," onClick:",[1002,19167,19168],{"class":1030}," () =",[1002,19170,19171],{"class":1015},">",[1002,19173,19174],{"class":1030}," console.log(",[1002,19176,19177],{"class":1026},"\"Clicked!\"",[1002,19179,3808],{"class":1030},[1002,19181,19182],{"class":1004,"line":1060},[1002,19183,15113],{"class":1030},[1002,19185,19186],{"class":1004,"line":1272},[1002,19187,1051],{"emptyLinePlaceholder":1050},[1002,19189,19190,19192],{"class":1004,"line":1348},[1002,19191,15066],{"class":1015},[1002,19193,15692],{"class":1030},[1002,19195,19196],{"class":1004,"line":1354},[1002,19197,19198],{"class":1015}," \u003C>\n",[1002,19200,19201,19204,19207,19210,19213],{"class":1004,"line":1360},[1002,19202,19203],{"class":1030}," {",[1002,19205,19206],{"class":1026},"children.map((child,",[1002,19208,19209],{"class":1034}," index",[1002,19211,19212],{"class":1030},") =",[1002,19214,15703],{"class":1015},[1002,19216,19217,19220,19223,19226,19229,19231,19234],{"class":1004,"line":1366},[1002,19218,19219],{"class":1026}," React.cloneElement(child,",[1002,19221,19222],{"class":1034}," {",[1002,19224,19225],{"class":1034}," ...newProps,",[1002,19227,19228],{"class":1034}," key:",[1002,19230,19209],{"class":1034},[1002,19232,19233],{"class":1034}," }",[1002,19235,3808],{"class":1030},[1002,19237,19238],{"class":1004,"line":1946},[1002,19239,19240],{"class":1030}," )}\n",[1002,19242,19243,19245,19247],{"class":1004,"line":1956},[1002,19244,15697],{"class":1015},[1002,19246,4685],{"class":1026},[1002,19248,15703],{"class":1030},[1002,19250,19251],{"class":1004,"line":1961},[1002,19252,10503],{"class":1030},[1002,19254,19255],{"class":1004,"line":1971},[1002,19256,1170],{"class":1030},[925,19258,19259,19260,19262],{},"Using ",[941,19261,19123],{}," does the following:",[971,19264,19265,19268,19271],{},[974,19266,19267],{},"Original element's props are shallow-merged with new props",[974,19269,19270],{},"New children replace existing children",[974,19272,19273,944,19275,19278],{},[941,19274,7857],{},[941,19276,19277],{},"ref"," from the original element are preserved",[925,19280,19281],{},"The syntax looks as follows:",[993,19283,19285],{"className":2227,"code":19284,"language":2229,"meta":998,"style":998},"React.cloneElement(\n element, \u002F\u002F A new React element using element as the starting point\n [config], \u002F\u002F all new props + key or ref\n [...children],\n);\n",[941,19286,19287,19297,19305,19313,19323],{"__ignoreMap":998},[1002,19288,19289,19292,19295],{"class":1004,"line":1005},[1002,19290,19291],{"class":1030},"React.",[1002,19293,19294],{"class":1026},"cloneElement",[1002,19296,10468],{"class":1030},[1002,19298,19299,19302],{"class":1004,"line":1012},[1002,19300,19301],{"class":1030}," element, ",[1002,19303,19304],{"class":1008},"\u002F\u002F A new React element using element as the starting point\n",[1002,19306,19307,19310],{"class":1004,"line":1047},[1002,19308,19309],{"class":1030}," [config], ",[1002,19311,19312],{"class":1008},"\u002F\u002F all new props + key or ref\n",[1002,19314,19315,19318,19320],{"class":1004,"line":1054},[1002,19316,19317],{"class":1030}," [",[1002,19319,17625],{"class":1015},[1002,19321,19322],{"class":1030},"children],\n",[1002,19324,19325],{"class":1004,"line":1060},[1002,19326,1085],{"class":1030},[953,19328,19330],{"id":19329},"check-for-valid-react-elements-using-isvalidelement","Check for valid React elements using isValidElement",[925,19332,19333,19334,19336,19337,14928,19339,948],{},"This function returns ",[941,19335,17397],{}," if an element is a valid React Element and React can render it. Returns ",[941,19338,17397],{},[941,19340,19341],{},"false",[993,19343,19345],{"className":2227,"code":19344,"language":2229,"meta":998,"style":998},"React.isValidElement(object);\n",[941,19346,19347],{"__ignoreMap":998},[1002,19348,19349,19351,19354],{"class":1004,"line":1005},[1002,19350,19291],{"class":1030},[1002,19352,19353],{"class":1026},"isValidElement",[1002,19355,19356],{"class":1030},"(object);\n",[925,19358,19359],{},"Here’s an example of modifying the elements from the previous example:",[993,19361,19363],{"className":2227,"code":19362,"language":2229,"meta":998,"style":998},"function Buttons({ children }) {\n const newProps = {\n className: 'highlight',\n onClick: () => console.log('Clicked!'),\n };\n\n return (\n \u003C>\n {children.map(\n (child, index) =>\n React.isValidElement(child) &&\n React.cloneElement(child, { ...newProps, key: index }),\n )}\n \u003C\u002F>\n );\n}\n",[941,19364,19365,19377,19387,19397,19419,19423,19427,19433,19437,19447,19464,19477,19491,19495,19500,19504],{"__ignoreMap":998},[1002,19366,19367,19369,19371,19373,19375],{"class":1004,"line":1005},[1002,19368,6965],{"class":1015},[1002,19370,19138],{"class":1026},[1002,19372,9219],{"class":1030},[1002,19374,19119],{"class":2378},[1002,19376,9225],{"class":1030},[1002,19378,19379,19381,19383,19385],{"class":1004,"line":1012},[1002,19380,10423],{"class":1015},[1002,19382,19148],{"class":1019},[1002,19384,1023],{"class":1015},[1002,19386,1457],{"class":1030},[1002,19388,19389,19392,19395],{"class":1004,"line":1047},[1002,19390,19391],{"class":1030}," className: ",[1002,19393,19394],{"class":1034},"'highlight'",[1002,19396,1143],{"class":1030},[1002,19398,19399,19402,19405,19407,19410,19412,19414,19417],{"class":1004,"line":1054},[1002,19400,19401],{"class":1026}," onClick",[1002,19403,19404],{"class":1030},": () ",[1002,19406,15497],{"class":1015},[1002,19408,19409],{"class":1030}," console.",[1002,19411,2886],{"class":1026},[1002,19413,1031],{"class":1030},[1002,19415,19416],{"class":1034},"'Clicked!'",[1002,19418,1257],{"class":1030},[1002,19420,19421],{"class":1004,"line":1060},[1002,19422,15113],{"class":1030},[1002,19424,19425],{"class":1004,"line":1272},[1002,19426,1051],{"emptyLinePlaceholder":1050},[1002,19428,19429,19431],{"class":1004,"line":1348},[1002,19430,15066],{"class":1015},[1002,19432,15692],{"class":1030},[1002,19434,19435],{"class":1004,"line":1354},[1002,19436,19198],{"class":1030},[1002,19438,19439,19442,19445],{"class":1004,"line":1360},[1002,19440,19441],{"class":1030}," {children.",[1002,19443,19444],{"class":1026},"map",[1002,19446,10468],{"class":1030},[1002,19448,19449,19452,19454,19456,19459,19461],{"class":1004,"line":1366},[1002,19450,19451],{"class":1030}," (",[1002,19453,11892],{"class":2378},[1002,19455,1251],{"class":1030},[1002,19457,19458],{"class":2378},"index",[1002,19460,5876],{"class":1030},[1002,19462,19463],{"class":1015},"=>\n",[1002,19465,19466,19469,19471,19474],{"class":1004,"line":1946},[1002,19467,19468],{"class":1030}," React.",[1002,19470,19353],{"class":1026},[1002,19472,19473],{"class":1030},"(child) ",[1002,19475,19476],{"class":1015},"&&\n",[1002,19478,19479,19481,19483,19486,19488],{"class":1004,"line":1956},[1002,19480,19468],{"class":1030},[1002,19482,19294],{"class":1026},[1002,19484,19485],{"class":1030},"(child, { ",[1002,19487,17625],{"class":1015},[1002,19489,19490],{"class":1030},"newProps, key: index }),\n",[1002,19492,19493],{"class":1004,"line":1961},[1002,19494,19240],{"class":1030},[1002,19496,19497],{"class":1004,"line":1971},[1002,19498,19499],{"class":1030}," \u003C\u002F>\n",[1002,19501,19502],{"class":1004,"line":1980},[1002,19503,10503],{"class":1030},[1002,19505,19506],{"class":1004,"line":1985},[1002,19507,1170],{"class":1030},[953,19509,19511],{"id":19510},"share-code-between-components-using-render-props","Share code between components using Render Props",[925,19513,19514],{},"With render props, we could render anything we wanted, just like the children prop method. But we will also be able to pass props to whatever is being rendered. The main purpose of Render Props is being able to communicate with any rendered component without having to couple implementation details.",[925,19516,19517],{},"Let's change the above example to use RenderProps:",[993,19519,19521],{"className":2227,"code":19520,"language":2229,"meta":998,"style":998},"function Buttons(props) {\n return props.render();\n}\n\nexport default function App() {\n return (\n \u003CButtons\n render={() => (\n \u003C>\n \u003Cbutton>Hello\u003C\u002Fbutton>\n \u003Cbutton>World\u003C\u002Fbutton>\n \u003C\u002F>\n )}\n \u002F>\n \u003C\u002Fdiv>\n );\n}\n",[941,19522,19523,19536,19548,19552,19556,19569,19575,19583,19597,19602,19615,19628,19633,19638,19643,19653,19657],{"__ignoreMap":998},[1002,19524,19525,19527,19529,19531,19534],{"class":1004,"line":1005},[1002,19526,6965],{"class":1015},[1002,19528,19138],{"class":1026},[1002,19530,1031],{"class":1030},[1002,19532,19533],{"class":2378},"props",[1002,19535,2382],{"class":1030},[1002,19537,19538,19540,19543,19546],{"class":1004,"line":1012},[1002,19539,15066],{"class":1015},[1002,19541,19542],{"class":1030}," props.",[1002,19544,19545],{"class":1026},"render",[1002,19547,1428],{"class":1030},[1002,19549,19550],{"class":1004,"line":1047},[1002,19551,1170],{"class":1030},[1002,19553,19554],{"class":1004,"line":1054},[1002,19555,1051],{"emptyLinePlaceholder":1050},[1002,19557,19558,19560,19562,19564,19567],{"class":1004,"line":1060},[1002,19559,947],{"class":1015},[1002,19561,15641],{"class":1015},[1002,19563,8457],{"class":1015},[1002,19565,19566],{"class":1026}," App",[1002,19568,3025],{"class":1030},[1002,19570,19571,19573],{"class":1004,"line":1272},[1002,19572,15066],{"class":1015},[1002,19574,15692],{"class":1030},[1002,19576,19577,19580],{"class":1004,"line":1348},[1002,19578,19579],{"class":1030}," \u003C",[1002,19581,19582],{"class":1019},"Buttons\n",[1002,19584,19585,19588,19590,19593,19595],{"class":1004,"line":1354},[1002,19586,19587],{"class":1026}," render",[1002,19589,2393],{"class":1015},[1002,19591,19592],{"class":1030},"{() ",[1002,19594,15497],{"class":1015},[1002,19596,15692],{"class":1030},[1002,19598,19599],{"class":1004,"line":1360},[1002,19600,19601],{"class":1030}," \u003C>\n",[1002,19603,19604,19606,19608,19611,19613],{"class":1004,"line":1366},[1002,19605,15729],{"class":1030},[1002,19607,16365],{"class":15711},[1002,19609,19610],{"class":1030},">Hello\u003C\u002F",[1002,19612,16365],{"class":15711},[1002,19614,15703],{"class":1030},[1002,19616,19617,19619,19621,19624,19626],{"class":1004,"line":1946},[1002,19618,15729],{"class":1030},[1002,19620,16365],{"class":15711},[1002,19622,19623],{"class":1030},">World\u003C\u002F",[1002,19625,16365],{"class":15711},[1002,19627,15703],{"class":1030},[1002,19629,19630],{"class":1004,"line":1956},[1002,19631,19632],{"class":1030}," \u003C\u002F>\n",[1002,19634,19635],{"class":1004,"line":1961},[1002,19636,19637],{"class":1030}," )}\n",[1002,19639,19640],{"class":1004,"line":1971},[1002,19641,19642],{"class":1030}," \u002F>\n",[1002,19644,19645,19648,19651],{"class":1004,"line":1980},[1002,19646,19647],{"class":1015}," \u003C\u002F",[1002,19649,19650],{"class":1030},"div",[1002,19652,15703],{"class":1015},[1002,19654,19655],{"class":1004,"line":1985},[1002,19656,10503],{"class":1030},[1002,19658,19659],{"class":1004,"line":1995},[1002,19660,1170],{"class":1030},[953,19662,1521],{"id":1520},[925,19664,19665,19666,19668],{},"You can use ",[941,19667,19294],{}," to inject values into your child components when the parent-child relationship implies a shared API.",[925,19670,19671,19672,19674,19675,19677],{},"If you desire freedom when it comes to deciding the way a part of your component is rendered Render props would be the ideal choice. You could achieve the same effect using ",[941,19673,19294],{},", but ",[941,19676,19294],{}," forces you to define and use a fully-fledged component.",[1579,19679,19680],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":19682},[19683,19684,19685,19686],{"id":19109,"depth":1012,"text":19110},{"id":19329,"depth":1012,"text":19330},{"id":19510,"depth":1012,"text":19511},{"id":1520,"depth":1012,"text":1521},"2021-11-06","\u002Fimages\u002Fblog\u002Ffeatures\u002Funderstanding-cloneelement-isvalidelement-and-render-props.jpg",{},{"title":872,"description":874},"blog\u002Funderstanding-cloneelement-isvalidelement-and-render-props",[16,17,40],"1rB5AQHqkIDUgfygxviZO0oki59ZmMAvpQ_wRSAmRUs",{"id":19695,"title":840,"author":920,"body":19696,"date":21595,"description":842,"extension":1591,"image":21596,"meta":21597,"navigation":1050,"path":841,"seo":21598,"stem":21599,"tags":21600,"__hash__":21601},"blog\u002Fblog\u002Fthings-to-avoid-when-using-react-hooks.md",{"type":922,"value":19697,"toc":21584},[19698,19702,19711,19714,19718,19721,19724,19731,19734,20079,20089,20093,20096,20217,20220,20368,20372,20375,20586,20592,20599,20604,20608,20611,20675,20678,20704,20707,20715,20719,20728,20731,20934,20940,20943,20946,21221,21225,21228,21348,21351,21453,21457,21460,21553,21555,21581],[953,19699,19701],{"id":19700},"not-using-the-eslint-plugin","Not using the ESLint plugin",[925,19703,19704,19705,19710],{},"Why not avoid the bugs related to hooks by following the rules suggested by installing the ",[933,19706,19709],{"href":19707,"rel":19708},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Feslint-plugin-react-hooks",[937],"eslint-plugin-react-hooks","? This can easily help you enforce the correct hooks execution order.",[925,19712,19713],{},"The default recommended configuration of these rules is to set \"rules of hooks\" to an error, and the \"exhaustive deps\" to a warning.",[953,19715,19717],{"id":19716},"changing-hooks-invocation-order","Changing hooks invocation order",[925,19719,19720],{},"The way React hooks internally work requires components to invoke hooks in the same order between renderings — always!",[925,19722,19723],{},"That’s exactly what suggests the first rule of hooks: Don’t call Hooks inside loops, conditions, or nested functions.",[925,19725,19726],{},[933,19727,19730],{"href":19728,"rel":19729},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fhooks-rules.html#only-call-hooks-at-the-top-level",[937],"Rules of Hooks — React",[925,19732,19733],{},"Solving the incorrect order of hooks means moving the return statement after invoking the hooks:",[993,19735,19737],{"className":2227,"code":19736,"language":2229,"meta":998,"style":998},"import React, { useEffect, useState } from 'react';\n\nfunction Character({ id }) {\n \u002F** Move this! *\u002F\n \u002F\u002F if (!id) {\n \u002F\u002F return \"Please select a game to fetch\";\n \u002F\u002F }\n const [character, setCharacter] = useState({\n name: '',\n description: '',\n });\n\n const fetchCharacter = async () => {\n const response = await fetch(`https:\u002F\u002Fswapi.dev\u002Fapi\u002Fpeople\u002F${id}`);\n const data = await response.json();\n console.log('here');\n setCharacter(data);\n };\n\n useEffect(() => {\n if (id) {\n fetchCharacter();\n }\n }, [id]);\n \u002F** to here *\u002F\n if (!id) {\n return 'Please select a game to fetch';\n }\n\n return (\n \u003Cmain>\n \u003Ch2>{character.name}\u003C\u002Fh2>\n \u003Cdiv>Name: {character.birth_year}\u003C\u002Fdiv>\n \u003Cdiv>Height: {character.height}\u003C\u002Fdiv>\n \u003C\u002Fmain>\n );\n}\n\nexport default Character;\n",[941,19738,19739,19752,19756,19770,19775,19780,19785,19790,19813,19823,19832,19837,19841,19858,19882,19899,19912,19920,19924,19928,19939,19946,19953,19957,19962,19967,19979,19988,19992,19996,20002,20011,20024,20037,20050,20058,20062,20066,20070],{"__ignoreMap":998},[1002,19740,19741,19743,19746,19748,19750],{"class":1004,"line":1005},[1002,19742,943],{"class":1015},[1002,19744,19745],{"class":1030}," React, { useEffect, useState } ",[1002,19747,1068],{"class":1015},[1002,19749,15543],{"class":1034},[1002,19751,1407],{"class":1030},[1002,19753,19754],{"class":1004,"line":1012},[1002,19755,1051],{"emptyLinePlaceholder":1050},[1002,19757,19758,19760,19763,19765,19768],{"class":1004,"line":1047},[1002,19759,6965],{"class":1015},[1002,19761,19762],{"class":1026}," Character",[1002,19764,9219],{"class":1030},[1002,19766,19767],{"class":2378},"id",[1002,19769,9225],{"class":1030},[1002,19771,19772],{"class":1004,"line":1054},[1002,19773,19774],{"class":1008}," \u002F** Move this! *\u002F\n",[1002,19776,19777],{"class":1004,"line":1060},[1002,19778,19779],{"class":1008}," \u002F\u002F if (!id) {\n",[1002,19781,19782],{"class":1004,"line":1272},[1002,19783,19784],{"class":1008}," \u002F\u002F return \"Please select a game to fetch\";\n",[1002,19786,19787],{"class":1004,"line":1348},[1002,19788,19789],{"class":1008}," \u002F\u002F }\n",[1002,19791,19792,19794,19796,19799,19801,19804,19806,19808,19811],{"class":1004,"line":1354},[1002,19793,10423],{"class":1015},[1002,19795,1897],{"class":1030},[1002,19797,19798],{"class":1019},"character",[1002,19800,1251],{"class":1030},[1002,19802,19803],{"class":1019},"setCharacter",[1002,19805,18338],{"class":1030},[1002,19807,2393],{"class":1015},[1002,19809,19810],{"class":1026}," useState",[1002,19812,2756],{"class":1030},[1002,19814,19815,19818,19821],{"class":1004,"line":1360},[1002,19816,19817],{"class":1030}," name: ",[1002,19819,19820],{"class":1034},"''",[1002,19822,1143],{"class":1030},[1002,19824,19825,19828,19830],{"class":1004,"line":1366},[1002,19826,19827],{"class":1030}," description: ",[1002,19829,19820],{"class":1034},[1002,19831,1143],{"class":1030},[1002,19833,19834],{"class":1004,"line":1946},[1002,19835,19836],{"class":1030}," });\n",[1002,19838,19839],{"class":1004,"line":1956},[1002,19840,1051],{"emptyLinePlaceholder":1050},[1002,19842,19843,19845,19848,19850,19852,19854,19856],{"class":1004,"line":1961},[1002,19844,10423],{"class":1015},[1002,19846,19847],{"class":1026}," fetchCharacter",[1002,19849,1023],{"class":1015},[1002,19851,14970],{"class":1015},[1002,19853,17297],{"class":1030},[1002,19855,15497],{"class":1015},[1002,19857,1457],{"class":1030},[1002,19859,19860,19862,19865,19867,19869,19871,19873,19876,19878,19880],{"class":1004,"line":1971},[1002,19861,4348],{"class":1015},[1002,19863,19864],{"class":1019}," response",[1002,19866,1023],{"class":1015},[1002,19868,15047],{"class":1015},[1002,19870,15050],{"class":1026},[1002,19872,1031],{"class":1030},[1002,19874,19875],{"class":1034},"`https:\u002F\u002Fswapi.dev\u002Fapi\u002Fpeople\u002F${",[1002,19877,19767],{"class":1030},[1002,19879,3507],{"class":1034},[1002,19881,1085],{"class":1030},[1002,19883,19884,19886,19888,19890,19892,19895,19897],{"class":1004,"line":1980},[1002,19885,4348],{"class":1015},[1002,19887,16556],{"class":1019},[1002,19889,1023],{"class":1015},[1002,19891,15047],{"class":1015},[1002,19893,19894],{"class":1030}," response.",[1002,19896,1122],{"class":1026},[1002,19898,1428],{"class":1030},[1002,19900,19901,19903,19905,19907,19910],{"class":1004,"line":1985},[1002,19902,3030],{"class":1030},[1002,19904,2886],{"class":1026},[1002,19906,1031],{"class":1030},[1002,19908,19909],{"class":1034},"'here'",[1002,19911,1085],{"class":1030},[1002,19913,19914,19917],{"class":1004,"line":1995},[1002,19915,19916],{"class":1026}," setCharacter",[1002,19918,19919],{"class":1030},"(data);\n",[1002,19921,19922],{"class":1004,"line":2006},[1002,19923,15113],{"class":1030},[1002,19925,19926],{"class":1004,"line":2011},[1002,19927,1051],{"emptyLinePlaceholder":1050},[1002,19929,19930,19933,19935,19937],{"class":1004,"line":2017},[1002,19931,19932],{"class":1026}," useEffect",[1002,19934,15494],{"class":1030},[1002,19936,15497],{"class":1015},[1002,19938,1457],{"class":1030},[1002,19940,19941,19943],{"class":1004,"line":2022},[1002,19942,4368],{"class":1015},[1002,19944,19945],{"class":1030}," (id) {\n",[1002,19947,19948,19951],{"class":1004,"line":2442},[1002,19949,19950],{"class":1026}," fetchCharacter",[1002,19952,1428],{"class":1030},[1002,19954,19955],{"class":1004,"line":2466},[1002,19956,2014],{"class":1030},[1002,19958,19959],{"class":1004,"line":2471},[1002,19960,19961],{"class":1030}," }, [id]);\n",[1002,19963,19964],{"class":1004,"line":2476},[1002,19965,19966],{"class":1008}," \u002F** to here *\u002F\n",[1002,19968,19969,19972,19974,19976],{"class":1004,"line":2481},[1002,19970,19971],{"class":1015}," if",[1002,19973,6513],{"class":1030},[1002,19975,13559],{"class":1015},[1002,19977,19978],{"class":1030},"id) {\n",[1002,19980,19981,19983,19986],{"class":1004,"line":2491},[1002,19982,2687],{"class":1015},[1002,19984,19985],{"class":1034}," 'Please select a game to fetch'",[1002,19987,1407],{"class":1030},[1002,19989,19990],{"class":1004,"line":2502},[1002,19991,1269],{"class":1030},[1002,19993,19994],{"class":1004,"line":2513},[1002,19995,1051],{"emptyLinePlaceholder":1050},[1002,19997,19998,20000],{"class":1004,"line":2535},[1002,19999,15066],{"class":1015},[1002,20001,15692],{"class":1030},[1002,20003,20004,20006,20009],{"class":1004,"line":2557},[1002,20005,15697],{"class":1030},[1002,20007,20008],{"class":15711},"main",[1002,20010,15703],{"class":1030},[1002,20012,20013,20015,20017,20020,20022],{"class":1004,"line":2562},[1002,20014,19579],{"class":1030},[1002,20016,953],{"class":15711},[1002,20018,20019],{"class":1030},">{character.name}\u003C\u002F",[1002,20021,953],{"class":15711},[1002,20023,15703],{"class":1030},[1002,20025,20026,20028,20030,20033,20035],{"class":1004,"line":2567},[1002,20027,19579],{"class":1030},[1002,20029,19650],{"class":15711},[1002,20031,20032],{"class":1030},">Name: {character.birth_year}\u003C\u002F",[1002,20034,19650],{"class":15711},[1002,20036,15703],{"class":1030},[1002,20038,20039,20041,20043,20046,20048],{"class":1004,"line":2572},[1002,20040,19579],{"class":1030},[1002,20042,19650],{"class":15711},[1002,20044,20045],{"class":1030},">Height: {character.height}\u003C\u002F",[1002,20047,19650],{"class":15711},[1002,20049,15703],{"class":1030},[1002,20051,20052,20054,20056],{"class":1004,"line":2582},[1002,20053,19647],{"class":1030},[1002,20055,20008],{"class":15711},[1002,20057,15703],{"class":1030},[1002,20059,20060],{"class":1004,"line":2594},[1002,20061,10503],{"class":1030},[1002,20063,20064],{"class":1004,"line":2603},[1002,20065,1170],{"class":1030},[1002,20067,20068],{"class":1004,"line":2619},[1002,20069,1051],{"emptyLinePlaceholder":1050},[1002,20071,20072,20074,20076],{"class":1004,"line":2633},[1002,20073,947],{"class":1015},[1002,20075,15641],{"class":1015},[1002,20077,20078],{"class":1030}," Character;\n",[925,20080,20081,20082,2034,20085,20088],{},"Now, no matter id is empty or not, the ",[928,20083,20084],{},"useState()",[928,20086,20087],{},"useEffect()"," hooks are always invoked in the same order. So make sure that you don't change the order of the hooks invocation.",[953,20090,20092],{"id":20091},"thinking-in-lifecycles","Thinking in Lifecycles",[925,20094,20095],{},"Before functional components becamae a thing, we had a nice and clear component API that made it easy for us to tell React when it should do certain things:",[993,20097,20099],{"className":17047,"code":20098,"language":17049,"meta":998,"style":998},"class MyComponent extends React.Component {\n constructor() {\n \u002F\u002F initialize component instance\n }\n componentDidMount() {\n \u002F\u002F The component is first added to the page\n }\n componentDidUpdate(prevProps, prevState) {\n \u002F\u002F The component is updated on the page\n }\n componentWillUnmount() {\n \u002F\u002F The component is removed from the page\n }\n\n render() {\n \u002F\u002F render React elements\n }\n}\n",[941,20100,20101,20120,20126,20131,20135,20142,20147,20151,20168,20173,20177,20184,20189,20193,20197,20204,20209,20213],{"__ignoreMap":998},[1002,20102,20103,20105,20108,20110,20113,20115,20118],{"class":1004,"line":1005},[1002,20104,2363],{"class":1015},[1002,20106,20107],{"class":1026}," MyComponent",[1002,20109,3014],{"class":1015},[1002,20111,20112],{"class":1026}," React",[1002,20114,948],{"class":1030},[1002,20116,20117],{"class":1026},"Component",[1002,20119,1457],{"class":1030},[1002,20121,20122,20124],{"class":1004,"line":1012},[1002,20123,2373],{"class":1015},[1002,20125,3025],{"class":1030},[1002,20127,20128],{"class":1004,"line":1047},[1002,20129,20130],{"class":1008}," \u002F\u002F initialize component instance\n",[1002,20132,20133],{"class":1004,"line":1054},[1002,20134,1269],{"class":1030},[1002,20136,20137,20140],{"class":1004,"line":1060},[1002,20138,20139],{"class":1026}," componentDidMount",[1002,20141,3025],{"class":1030},[1002,20143,20144],{"class":1004,"line":1272},[1002,20145,20146],{"class":1008}," \u002F\u002F The component is first added to the page\n",[1002,20148,20149],{"class":1004,"line":1348},[1002,20150,1269],{"class":1030},[1002,20152,20153,20156,20158,20161,20163,20166],{"class":1004,"line":1354},[1002,20154,20155],{"class":1026}," componentDidUpdate",[1002,20157,1031],{"class":1030},[1002,20159,20160],{"class":2378},"prevProps",[1002,20162,1251],{"class":1030},[1002,20164,20165],{"class":2378},"prevState",[1002,20167,2382],{"class":1030},[1002,20169,20170],{"class":1004,"line":1360},[1002,20171,20172],{"class":1008}," \u002F\u002F The component is updated on the page\n",[1002,20174,20175],{"class":1004,"line":1366},[1002,20176,1269],{"class":1030},[1002,20178,20179,20182],{"class":1004,"line":1946},[1002,20180,20181],{"class":1026}," componentWillUnmount",[1002,20183,3025],{"class":1030},[1002,20185,20186],{"class":1004,"line":1956},[1002,20187,20188],{"class":1008}," \u002F\u002F The component is removed from the page\n",[1002,20190,20191],{"class":1004,"line":1961},[1002,20192,1269],{"class":1030},[1002,20194,20195],{"class":1004,"line":1971},[1002,20196,1051],{"emptyLinePlaceholder":1050},[1002,20198,20199,20202],{"class":1004,"line":1980},[1002,20200,20201],{"class":1026}," render",[1002,20203,3025],{"class":1030},[1002,20205,20206],{"class":1004,"line":1985},[1002,20207,20208],{"class":1008}," \u002F\u002F render React elements\n",[1002,20210,20211],{"class":1004,"line":1995},[1002,20212,1269],{"class":1030},[1002,20214,20215],{"class":1004,"line":2006},[1002,20216,1170],{"class":1030},[925,20218,20219],{},"This declarative component made us think in lifecycles. But with React hooks, we should think about synchronizing the state of the side-effects with the state of the application.",[993,20221,20223],{"className":17047,"code":20222,"language":17049,"meta":998,"style":998},"import React, { useEffect } from 'react';\n\nfunction MyComponent() {\n useEffect(() => {\n \u002F\u002F Run once after DOMContentEvent loads\n }, []);\n\n useEffect(() => {\n \u002F\u002F Synchronize the state with the state of this component.\n return function cleanup() {\n \u002F\u002F Cleanup the previous side-effect before running a new one\n };\n \u002F\u002F Run the side-effect and it's cleanup to for the re-run\n }, [a, b, c, d]); \u002F\u002F When any of these change\n\n useEffect(() => {\n \u002F\u002F Run every single time this component is re-rendered\n });\n\n return {\n \u002F\u002F Render React elements\n };\n}\n",[941,20224,20225,20238,20242,20250,20260,20265,20270,20274,20284,20289,20300,20305,20309,20314,20322,20326,20336,20341,20345,20349,20355,20360,20364],{"__ignoreMap":998},[1002,20226,20227,20229,20232,20234,20236],{"class":1004,"line":1005},[1002,20228,943],{"class":1015},[1002,20230,20231],{"class":1030}," React, { useEffect } ",[1002,20233,1068],{"class":1015},[1002,20235,15543],{"class":1034},[1002,20237,1407],{"class":1030},[1002,20239,20240],{"class":1004,"line":1012},[1002,20241,1051],{"emptyLinePlaceholder":1050},[1002,20243,20244,20246,20248],{"class":1004,"line":1047},[1002,20245,6965],{"class":1015},[1002,20247,20107],{"class":1026},[1002,20249,3025],{"class":1030},[1002,20251,20252,20254,20256,20258],{"class":1004,"line":1054},[1002,20253,19932],{"class":1026},[1002,20255,15494],{"class":1030},[1002,20257,15497],{"class":1015},[1002,20259,1457],{"class":1030},[1002,20261,20262],{"class":1004,"line":1060},[1002,20263,20264],{"class":1008}," \u002F\u002F Run once after DOMContentEvent loads\n",[1002,20266,20267],{"class":1004,"line":1272},[1002,20268,20269],{"class":1030}," }, []);\n",[1002,20271,20272],{"class":1004,"line":1348},[1002,20273,1051],{"emptyLinePlaceholder":1050},[1002,20275,20276,20278,20280,20282],{"class":1004,"line":1354},[1002,20277,19932],{"class":1026},[1002,20279,15494],{"class":1030},[1002,20281,15497],{"class":1015},[1002,20283,1457],{"class":1030},[1002,20285,20286],{"class":1004,"line":1360},[1002,20287,20288],{"class":1008}," \u002F\u002F Synchronize the state with the state of this component.\n",[1002,20290,20291,20293,20295,20298],{"class":1004,"line":1366},[1002,20292,2687],{"class":1015},[1002,20294,8457],{"class":1015},[1002,20296,20297],{"class":1026}," cleanup",[1002,20299,3025],{"class":1030},[1002,20301,20302],{"class":1004,"line":1946},[1002,20303,20304],{"class":1008}," \u002F\u002F Cleanup the previous side-effect before running a new one\n",[1002,20306,20307],{"class":1004,"line":1956},[1002,20308,10900],{"class":1030},[1002,20310,20311],{"class":1004,"line":1961},[1002,20312,20313],{"class":1008}," \u002F\u002F Run the side-effect and it's cleanup to for the re-run\n",[1002,20315,20316,20319],{"class":1004,"line":1971},[1002,20317,20318],{"class":1030}," }, [a, b, c, d]); ",[1002,20320,20321],{"class":1008},"\u002F\u002F When any of these change\n",[1002,20323,20324],{"class":1004,"line":1980},[1002,20325,1051],{"emptyLinePlaceholder":1050},[1002,20327,20328,20330,20332,20334],{"class":1004,"line":1985},[1002,20329,19932],{"class":1026},[1002,20331,15494],{"class":1030},[1002,20333,15497],{"class":1015},[1002,20335,1457],{"class":1030},[1002,20337,20338],{"class":1004,"line":1995},[1002,20339,20340],{"class":1008}," \u002F\u002F Run every single time this component is re-rendered\n",[1002,20342,20343],{"class":1004,"line":2006},[1002,20344,19836],{"class":1030},[1002,20346,20347],{"class":1004,"line":2011},[1002,20348,1051],{"emptyLinePlaceholder":1050},[1002,20350,20351,20353],{"class":1004,"line":2017},[1002,20352,15066],{"class":1015},[1002,20354,1457],{"class":1030},[1002,20356,20357],{"class":1004,"line":2022},[1002,20358,20359],{"class":1008}," \u002F\u002F Render React elements\n",[1002,20361,20362],{"class":1004,"line":2442},[1002,20363,15113],{"class":1030},[1002,20365,20366],{"class":1004,"line":2466},[1002,20367,1170],{"class":1030},[953,20369,20371],{"id":20370},"using-stale-state","Using stale state",[925,20373,20374],{},"For example, trying to increase the state variable count when a button is clicked:",[993,20376,20378],{"className":17047,"code":20377,"language":17049,"meta":998,"style":998},"import React, { useCallback } from 'react';\n\nfunction Count() {\n const [count, setCount] = useState(0);\n\n const increase = useCallback(() => {\n \u002F** Avoid *\u002F\n \u002F\u002F setCount(count + 1);\n \u002F** Use a callback instead *\u002F\n setCount(count => count + 1);\n }, [count]);\n\n const handleClick = () {\n increase();\n increase();\n increase();\n };\n\n return (\n \u003C>\n \u003Cbutton onClick={handleClick}>+\u003C\u002Fbutton>\n \u003Cdiv>Counter: {count}\u003C\u002Fdiv>\n \u003C\u002F>\n );\n}\n",[941,20379,20380,20393,20397,20406,20431,20435,20453,20458,20463,20468,20488,20493,20497,20507,20514,20520,20526,20530,20534,20540,20544,20561,20574,20578,20582],{"__ignoreMap":998},[1002,20381,20382,20384,20387,20389,20391],{"class":1004,"line":1005},[1002,20383,943],{"class":1015},[1002,20385,20386],{"class":1030}," React, { useCallback } ",[1002,20388,1068],{"class":1015},[1002,20390,15543],{"class":1034},[1002,20392,1407],{"class":1030},[1002,20394,20395],{"class":1004,"line":1012},[1002,20396,1051],{"emptyLinePlaceholder":1050},[1002,20398,20399,20401,20404],{"class":1004,"line":1047},[1002,20400,6965],{"class":1015},[1002,20402,20403],{"class":1026}," Count",[1002,20405,3025],{"class":1030},[1002,20407,20408,20410,20412,20414,20416,20419,20421,20423,20425,20427,20429],{"class":1004,"line":1054},[1002,20409,10423],{"class":1015},[1002,20411,1897],{"class":1030},[1002,20413,4720],{"class":1019},[1002,20415,1251],{"class":1030},[1002,20417,20418],{"class":1019},"setCount",[1002,20420,18338],{"class":1030},[1002,20422,2393],{"class":1015},[1002,20424,19810],{"class":1026},[1002,20426,1031],{"class":1030},[1002,20428,5867],{"class":1019},[1002,20430,1085],{"class":1030},[1002,20432,20433],{"class":1004,"line":1060},[1002,20434,1051],{"emptyLinePlaceholder":1050},[1002,20436,20437,20439,20442,20444,20447,20449,20451],{"class":1004,"line":1272},[1002,20438,10423],{"class":1015},[1002,20440,20441],{"class":1019}," increase",[1002,20443,1023],{"class":1015},[1002,20445,20446],{"class":1026}," useCallback",[1002,20448,15494],{"class":1030},[1002,20450,15497],{"class":1015},[1002,20452,1457],{"class":1030},[1002,20454,20455],{"class":1004,"line":1348},[1002,20456,20457],{"class":1008}," \u002F** Avoid *\u002F\n",[1002,20459,20460],{"class":1004,"line":1354},[1002,20461,20462],{"class":1008}," \u002F\u002F setCount(count + 1);\n",[1002,20464,20465],{"class":1004,"line":1360},[1002,20466,20467],{"class":1008}," \u002F** Use a callback instead *\u002F\n",[1002,20469,20470,20473,20475,20477,20480,20482,20484,20486],{"class":1004,"line":1366},[1002,20471,20472],{"class":1026}," setCount",[1002,20474,1031],{"class":1030},[1002,20476,4720],{"class":2378},[1002,20478,20479],{"class":1015}," =>",[1002,20481,4700],{"class":1030},[1002,20483,5064],{"class":1015},[1002,20485,6246],{"class":1019},[1002,20487,1085],{"class":1030},[1002,20489,20490],{"class":1004,"line":1946},[1002,20491,20492],{"class":1030}," }, [count]);\n",[1002,20494,20495],{"class":1004,"line":1956},[1002,20496,1051],{"emptyLinePlaceholder":1050},[1002,20498,20499,20501,20503,20505],{"class":1004,"line":1961},[1002,20500,10423],{"class":1015},[1002,20502,8452],{"class":1019},[1002,20504,1023],{"class":1015},[1002,20506,9772],{"class":1030},[1002,20508,20509,20512],{"class":1004,"line":1971},[1002,20510,20511],{"class":1026}," increase",[1002,20513,1428],{"class":1030},[1002,20515,20516,20518],{"class":1004,"line":1980},[1002,20517,20511],{"class":1026},[1002,20519,1428],{"class":1030},[1002,20521,20522,20524],{"class":1004,"line":1985},[1002,20523,20511],{"class":1026},[1002,20525,1428],{"class":1030},[1002,20527,20528],{"class":1004,"line":1995},[1002,20529,15113],{"class":1030},[1002,20531,20532],{"class":1004,"line":2006},[1002,20533,1051],{"emptyLinePlaceholder":1050},[1002,20535,20536,20538],{"class":1004,"line":2011},[1002,20537,15066],{"class":1015},[1002,20539,15692],{"class":1030},[1002,20541,20542],{"class":1004,"line":2017},[1002,20543,19198],{"class":1030},[1002,20545,20546,20548,20550,20552,20554,20557,20559],{"class":1004,"line":2022},[1002,20547,19579],{"class":1030},[1002,20549,16365],{"class":15711},[1002,20551,16691],{"class":1026},[1002,20553,2393],{"class":1015},[1002,20555,20556],{"class":1030},"{handleClick}>+\u003C\u002F",[1002,20558,16365],{"class":15711},[1002,20560,15703],{"class":1030},[1002,20562,20563,20565,20567,20570,20572],{"class":1004,"line":2442},[1002,20564,19579],{"class":1030},[1002,20566,19650],{"class":15711},[1002,20568,20569],{"class":1030},">Counter: {count}\u003C\u002F",[1002,20571,19650],{"class":15711},[1002,20573,15703],{"class":1030},[1002,20575,20576],{"class":1004,"line":2466},[1002,20577,19499],{"class":1030},[1002,20579,20580],{"class":1004,"line":2471},[1002,20581,10503],{"class":1030},[1002,20583,20584],{"class":1004,"line":2476},[1002,20585,1170],{"class":1030},[925,20587,20588,20589,948],{},"Even though increase() is called 3 times inside the handleClick(), each call will result in a ",[928,20590,20591],{},"stale state",[925,20593,20594,20595,20598],{},"By using an updater ",[941,20596,20597],{},"function count => count + 1",", React gives you the latest actual state value.",[2136,20600,20601],{},[925,20602,20603],{},"If you use the current state to calculate the next state, always use a functional way to update the state: setValue(prevValue => prevValue + someResult)",[953,20605,20607],{"id":20606},"overthinking-performance","Overthinking performance",[925,20609,20610],{},"Let's say we define an event handler for a child component:",[993,20612,20614],{"className":17047,"code":20613,"language":17049,"meta":998,"style":998},"function ParentComponent() {\n function handleClick() {\n console.log('clicked inside child component');\n }\n\n return \u003CChildComponent onClick={handleClick} \u002F>;\n}\n",[941,20615,20616,20625,20633,20646,20650,20654,20671],{"__ignoreMap":998},[1002,20617,20618,20620,20623],{"class":1004,"line":1005},[1002,20619,6965],{"class":1015},[1002,20621,20622],{"class":1026}," ParentComponent",[1002,20624,3025],{"class":1030},[1002,20626,20627,20629,20631],{"class":1004,"line":1012},[1002,20628,18965],{"class":1015},[1002,20630,8452],{"class":1026},[1002,20632,3025],{"class":1030},[1002,20634,20635,20637,20639,20641,20644],{"class":1004,"line":1047},[1002,20636,3030],{"class":1030},[1002,20638,2886],{"class":1026},[1002,20640,1031],{"class":1030},[1002,20642,20643],{"class":1034},"'clicked inside child component'",[1002,20645,1085],{"class":1030},[1002,20647,20648],{"class":1004,"line":1054},[1002,20649,1269],{"class":1030},[1002,20651,20652],{"class":1004,"line":1060},[1002,20653,1051],{"emptyLinePlaceholder":1050},[1002,20655,20656,20658,20661,20664,20666,20668],{"class":1004,"line":1272},[1002,20657,15066],{"class":1015},[1002,20659,20660],{"class":1030}," \u003C",[1002,20662,20663],{"class":1019},"ChildComponent",[1002,20665,16691],{"class":1026},[1002,20667,2393],{"class":1015},[1002,20669,20670],{"class":1030},"{handleClick} \u002F>;\n",[1002,20672,20673],{"class":1004,"line":1348},[1002,20674,1170],{"class":1030},[925,20676,20677],{},"There are 2 reasons people worry about this:",[971,20679,20680,20689],{},[974,20681,20682,20683,20688],{},"We're defining the function inside the component, meaning it's getting re-defined every single time ",[1107,20684,20685],{},[941,20686,20687],{},"\u003CParentComponen\u002F>"," is rendered",[974,20690,20691,20692,20697,20698,20703],{},"We're passing handler function as a prop to ",[1107,20693,20694],{},[941,20695,20696],{},"\u003CChildComponent \u002F>"," which means it can't be optimized properly with ",[1107,20699,20700],{},[941,20701,20702],{},"React.memo"," and will suffer from \"unnecessary re-renders\"",[925,20705,20706],{},"But this is not quite true:",[971,20708,20709,20712],{},[974,20710,20711],{},"Redefining too many functions - JavaScript engiens are fast enough for defining or redefining native functions.",[974,20713,20714],{},"Just because a component re-renders, does not mean the DOM will get updated every time.",[953,20716,20718],{"id":20717},"creating-stale-closures","Creating Stale Closures",[925,20720,20721,20722,20727],{},"A ",[933,20723,20726],{"href":20724,"rel":20725},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FClosures",[937],"closure"," is the JavaScript lexical scope that a function uses to wrap its varibles within. React hooks rely on this closure for them to function properly.",[925,20729,20730],{},"Let's look at the example below:",[993,20732,20734],{"className":17047,"code":20733,"language":17049,"meta":998,"style":998},"import React, { useState } from 'react';\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n function handleClick() {\n return setTimeout(() => {\n alert('You clicked on: ' + count);\n }, 3000);\n }\n\n return (\n \u003Cdiv>\n \u003Cp>You clicked {count} times\u003C\u002Fp>\n \u003Cbutton onClick={() => setCount(count + 1)}>Click me\u003C\u002Fbutton>\n \u003Cbutton onClick={handleClick}>Show alert\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n",[941,20735,20736,20749,20753,20761,20785,20789,20797,20810,20825,20835,20839,20843,20849,20857,20870,20901,20918,20926,20930],{"__ignoreMap":998},[1002,20737,20738,20740,20743,20745,20747],{"class":1004,"line":1005},[1002,20739,943],{"class":1015},[1002,20741,20742],{"class":1030}," React, { useState } ",[1002,20744,1068],{"class":1015},[1002,20746,15543],{"class":1034},[1002,20748,1407],{"class":1030},[1002,20750,20751],{"class":1004,"line":1012},[1002,20752,1051],{"emptyLinePlaceholder":1050},[1002,20754,20755,20757,20759],{"class":1004,"line":1047},[1002,20756,6965],{"class":1015},[1002,20758,19566],{"class":1026},[1002,20760,3025],{"class":1030},[1002,20762,20763,20765,20767,20769,20771,20773,20775,20777,20779,20781,20783],{"class":1004,"line":1054},[1002,20764,10423],{"class":1015},[1002,20766,1897],{"class":1030},[1002,20768,4720],{"class":1019},[1002,20770,1251],{"class":1030},[1002,20772,20418],{"class":1019},[1002,20774,18338],{"class":1030},[1002,20776,2393],{"class":1015},[1002,20778,19810],{"class":1026},[1002,20780,1031],{"class":1030},[1002,20782,5867],{"class":1019},[1002,20784,1085],{"class":1030},[1002,20786,20787],{"class":1004,"line":1060},[1002,20788,1051],{"emptyLinePlaceholder":1050},[1002,20790,20791,20793,20795],{"class":1004,"line":1272},[1002,20792,18965],{"class":1015},[1002,20794,8452],{"class":1026},[1002,20796,3025],{"class":1030},[1002,20798,20799,20801,20804,20806,20808],{"class":1004,"line":1348},[1002,20800,2687],{"class":1015},[1002,20802,20803],{"class":1026}," setTimeout",[1002,20805,15494],{"class":1030},[1002,20807,15497],{"class":1015},[1002,20809,1457],{"class":1030},[1002,20811,20812,20815,20817,20820,20822],{"class":1004,"line":1354},[1002,20813,20814],{"class":1026}," alert",[1002,20816,1031],{"class":1030},[1002,20818,20819],{"class":1034},"'You clicked on: '",[1002,20821,6583],{"class":1015},[1002,20823,20824],{"class":1030}," count);\n",[1002,20826,20827,20830,20833],{"class":1004,"line":1360},[1002,20828,20829],{"class":1030}," }, ",[1002,20831,20832],{"class":1019},"3000",[1002,20834,1085],{"class":1030},[1002,20836,20837],{"class":1004,"line":1366},[1002,20838,1269],{"class":1030},[1002,20840,20841],{"class":1004,"line":1946},[1002,20842,1051],{"emptyLinePlaceholder":1050},[1002,20844,20845,20847],{"class":1004,"line":1956},[1002,20846,15066],{"class":1015},[1002,20848,15692],{"class":1030},[1002,20850,20851,20853,20855],{"class":1004,"line":1961},[1002,20852,15697],{"class":1030},[1002,20854,19650],{"class":15711},[1002,20856,15703],{"class":1030},[1002,20858,20859,20861,20863,20866,20868],{"class":1004,"line":1971},[1002,20860,19579],{"class":1030},[1002,20862,925],{"class":15711},[1002,20864,20865],{"class":1030},">You clicked {count} times\u003C\u002F",[1002,20867,925],{"class":15711},[1002,20869,15703],{"class":1030},[1002,20871,20872,20874,20876,20878,20880,20882,20884,20887,20890,20892,20894,20897,20899],{"class":1004,"line":1980},[1002,20873,19579],{"class":1030},[1002,20875,16365],{"class":15711},[1002,20877,16691],{"class":1026},[1002,20879,2393],{"class":1015},[1002,20881,19592],{"class":1030},[1002,20883,15497],{"class":1015},[1002,20885,20886],{"class":1026}," setCount",[1002,20888,20889],{"class":1030},"(count ",[1002,20891,5064],{"class":1015},[1002,20893,6246],{"class":1019},[1002,20895,20896],{"class":1030},")}>Click me\u003C\u002F",[1002,20898,16365],{"class":15711},[1002,20900,15703],{"class":1030},[1002,20902,20903,20905,20907,20909,20911,20914,20916],{"class":1004,"line":1985},[1002,20904,19579],{"class":1030},[1002,20906,16365],{"class":15711},[1002,20908,16691],{"class":1026},[1002,20910,2393],{"class":1015},[1002,20912,20913],{"class":1030},"{handleClick}>Show alert\u003C\u002F",[1002,20915,16365],{"class":15711},[1002,20917,15703],{"class":1030},[1002,20919,20920,20922,20924],{"class":1004,"line":1995},[1002,20921,19647],{"class":1030},[1002,20923,19650],{"class":15711},[1002,20925,15703],{"class":1030},[1002,20927,20928],{"class":1004,"line":2006},[1002,20929,10503],{"class":1030},[1002,20931,20932],{"class":1004,"line":2011},[1002,20933,1170],{"class":1030},[925,20935,20936,20937,20939],{},"Whenever the ",[941,20938,20418],{}," is called the state gets a new reference. This means the original state doesn't have the new value, but a new state with the new value. When we click on the second button, the event handler captures the reference of the original state.",[925,20941,20942],{},"Even if we click the first button as many times as we like when the alert is displayed it will only show the old value.",[925,20944,20945],{},"To fix this stale-closure issue, will use a ref:",[993,20947,20949],{"className":17047,"code":20948,"language":17049,"meta":998,"style":998},"function App() {\n const [count, setCount] = useState(0);\n\n const latestValue = useRef(count);\n\n const handleClick = () => {\n setTimeout(() => {\n alert(`count is: ${latestValue.current}`);\n }, 3000);\n };\n\n return (\n \u003Cdiv>\n \u003Cp>You clicked {count} times\u003C\u002Fp>\n \u003Cbutton\n onClick={() => {\n setCount((prev) => {\n latestValue.current = prev + 1;\n return prev + 1;\n });\n }}\n >\n Click me\n \u003C\u002Fbutton>\n \u003Cbutton onClick={handleClick}>Show alert\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n",[941,20950,20951,20959,20983,20987,21002,21006,21020,21031,21052,21060,21064,21068,21074,21082,21094,21101,21114,21131,21147,21160,21165,21170,21175,21180,21189,21205,21213,21217],{"__ignoreMap":998},[1002,20952,20953,20955,20957],{"class":1004,"line":1005},[1002,20954,6965],{"class":1015},[1002,20956,19566],{"class":1026},[1002,20958,3025],{"class":1030},[1002,20960,20961,20963,20965,20967,20969,20971,20973,20975,20977,20979,20981],{"class":1004,"line":1012},[1002,20962,10423],{"class":1015},[1002,20964,1897],{"class":1030},[1002,20966,4720],{"class":1019},[1002,20968,1251],{"class":1030},[1002,20970,20418],{"class":1019},[1002,20972,18338],{"class":1030},[1002,20974,2393],{"class":1015},[1002,20976,19810],{"class":1026},[1002,20978,1031],{"class":1030},[1002,20980,5867],{"class":1019},[1002,20982,1085],{"class":1030},[1002,20984,20985],{"class":1004,"line":1047},[1002,20986,1051],{"emptyLinePlaceholder":1050},[1002,20988,20989,20991,20994,20996,20999],{"class":1004,"line":1054},[1002,20990,10423],{"class":1015},[1002,20992,20993],{"class":1019}," latestValue",[1002,20995,1023],{"class":1015},[1002,20997,20998],{"class":1026}," useRef",[1002,21000,21001],{"class":1030},"(count);\n",[1002,21003,21004],{"class":1004,"line":1060},[1002,21005,1051],{"emptyLinePlaceholder":1050},[1002,21007,21008,21010,21012,21014,21016,21018],{"class":1004,"line":1272},[1002,21009,10423],{"class":1015},[1002,21011,8452],{"class":1026},[1002,21013,1023],{"class":1015},[1002,21015,17297],{"class":1030},[1002,21017,15497],{"class":1015},[1002,21019,1457],{"class":1030},[1002,21021,21022,21025,21027,21029],{"class":1004,"line":1348},[1002,21023,21024],{"class":1026}," setTimeout",[1002,21026,15494],{"class":1030},[1002,21028,15497],{"class":1015},[1002,21030,1457],{"class":1030},[1002,21032,21033,21035,21037,21040,21043,21045,21048,21050],{"class":1004,"line":1354},[1002,21034,20814],{"class":1026},[1002,21036,1031],{"class":1030},[1002,21038,21039],{"class":1034},"`count is: ${",[1002,21041,21042],{"class":1030},"latestValue",[1002,21044,948],{"class":1034},[1002,21046,21047],{"class":1030},"current",[1002,21049,3507],{"class":1034},[1002,21051,1085],{"class":1030},[1002,21053,21054,21056,21058],{"class":1004,"line":1360},[1002,21055,20829],{"class":1030},[1002,21057,20832],{"class":1019},[1002,21059,1085],{"class":1030},[1002,21061,21062],{"class":1004,"line":1366},[1002,21063,15113],{"class":1030},[1002,21065,21066],{"class":1004,"line":1946},[1002,21067,1051],{"emptyLinePlaceholder":1050},[1002,21069,21070,21072],{"class":1004,"line":1956},[1002,21071,15066],{"class":1015},[1002,21073,15692],{"class":1030},[1002,21075,21076,21078,21080],{"class":1004,"line":1961},[1002,21077,15697],{"class":1030},[1002,21079,19650],{"class":15711},[1002,21081,15703],{"class":1030},[1002,21083,21084,21086,21088,21090,21092],{"class":1004,"line":1971},[1002,21085,19579],{"class":1030},[1002,21087,925],{"class":15711},[1002,21089,20865],{"class":1030},[1002,21091,925],{"class":15711},[1002,21093,15703],{"class":1030},[1002,21095,21096,21098],{"class":1004,"line":1980},[1002,21097,19579],{"class":1030},[1002,21099,21100],{"class":15711},"button\n",[1002,21102,21103,21106,21108,21110,21112],{"class":1004,"line":1985},[1002,21104,21105],{"class":1026}," onClick",[1002,21107,2393],{"class":1015},[1002,21109,19592],{"class":1030},[1002,21111,15497],{"class":1015},[1002,21113,1457],{"class":1030},[1002,21115,21116,21119,21122,21125,21127,21129],{"class":1004,"line":1995},[1002,21117,21118],{"class":1026}," setCount",[1002,21120,21121],{"class":1030},"((",[1002,21123,21124],{"class":2378},"prev",[1002,21126,5876],{"class":1030},[1002,21128,15497],{"class":1015},[1002,21130,1457],{"class":1030},[1002,21132,21133,21136,21138,21141,21143,21145],{"class":1004,"line":2006},[1002,21134,21135],{"class":1030}," latestValue.current ",[1002,21137,2393],{"class":1015},[1002,21139,21140],{"class":1030}," prev ",[1002,21142,5064],{"class":1015},[1002,21144,6246],{"class":1019},[1002,21146,1407],{"class":1030},[1002,21148,21149,21152,21154,21156,21158],{"class":1004,"line":2011},[1002,21150,21151],{"class":1015}," return",[1002,21153,21140],{"class":1030},[1002,21155,5064],{"class":1015},[1002,21157,6246],{"class":1019},[1002,21159,1407],{"class":1030},[1002,21161,21162],{"class":1004,"line":2017},[1002,21163,21164],{"class":1030}," });\n",[1002,21166,21167],{"class":1004,"line":2022},[1002,21168,21169],{"class":1030}," }}\n",[1002,21171,21172],{"class":1004,"line":2442},[1002,21173,21174],{"class":1030}," >\n",[1002,21176,21177],{"class":1004,"line":2466},[1002,21178,21179],{"class":1030}," Click me\n",[1002,21181,21182,21185,21187],{"class":1004,"line":2471},[1002,21183,21184],{"class":1030}," \u003C\u002F",[1002,21186,16365],{"class":15711},[1002,21188,15703],{"class":1030},[1002,21190,21191,21193,21195,21197,21199,21201,21203],{"class":1004,"line":2476},[1002,21192,19579],{"class":1030},[1002,21194,16365],{"class":15711},[1002,21196,16691],{"class":1026},[1002,21198,2393],{"class":1015},[1002,21200,20913],{"class":1030},[1002,21202,16365],{"class":15711},[1002,21204,15703],{"class":1030},[1002,21206,21207,21209,21211],{"class":1004,"line":2481},[1002,21208,19647],{"class":1030},[1002,21210,19650],{"class":15711},[1002,21212,15703],{"class":1030},[1002,21214,21215],{"class":1004,"line":2491},[1002,21216,10503],{"class":1030},[1002,21218,21219],{"class":1004,"line":2502},[1002,21220,1170],{"class":1030},[953,21222,21224],{"id":21223},"overthinking-the-testing-of-hooks","Overthinking the testing of hooks",[925,21226,21227],{},"Writing test for hooks in a way that tests all of their components when they refactor to hooks is unnecessary.",[993,21229,21231],{"className":17047,"code":21230,"language":17049,"meta":998,"style":998},"test('Clicking on + increments the number', () => {\n \u002F\u002F using enzyme\n const wrapper = mount(\u003CCount \u002F>);\n\n expect(wrapper.state('count')).toBe(0);\n wrapper.instance().incrementCount();\n expect(wrapper.state('count')).toBe(1);\n});\n",[941,21232,21233,21250,21255,21276,21280,21307,21322,21344],{"__ignoreMap":998},[1002,21234,21235,21238,21240,21243,21246,21248],{"class":1004,"line":1005},[1002,21236,21237],{"class":1026},"test",[1002,21239,1031],{"class":1030},[1002,21241,21242],{"class":1034},"'Clicking on + increments the number'",[1002,21244,21245],{"class":1030},", () ",[1002,21247,15497],{"class":1015},[1002,21249,1457],{"class":1030},[1002,21251,21252],{"class":1004,"line":1012},[1002,21253,21254],{"class":1008}," \u002F\u002F using enzyme\n",[1002,21256,21257,21259,21262,21264,21267,21270,21273],{"class":1004,"line":1047},[1002,21258,10423],{"class":1015},[1002,21260,21261],{"class":1019}," wrapper",[1002,21263,1023],{"class":1015},[1002,21265,21266],{"class":1026}," mount",[1002,21268,21269],{"class":1030},"(\u003C",[1002,21271,21272],{"class":1019},"Count",[1002,21274,21275],{"class":1030}," \u002F>);\n",[1002,21277,21278],{"class":1004,"line":1054},[1002,21279,1051],{"emptyLinePlaceholder":1050},[1002,21281,21282,21285,21288,21290,21292,21295,21298,21301,21303,21305],{"class":1004,"line":1060},[1002,21283,21284],{"class":1026}," expect",[1002,21286,21287],{"class":1030},"(wrapper.",[1002,21289,8589],{"class":1026},[1002,21291,1031],{"class":1030},[1002,21293,21294],{"class":1034},"'count'",[1002,21296,21297],{"class":1030},")).",[1002,21299,21300],{"class":1026},"toBe",[1002,21302,1031],{"class":1030},[1002,21304,5867],{"class":1019},[1002,21306,1085],{"class":1030},[1002,21308,21309,21312,21315,21317,21320],{"class":1004,"line":1272},[1002,21310,21311],{"class":1030}," wrapper.",[1002,21313,21314],{"class":1026},"instance",[1002,21316,12951],{"class":1030},[1002,21318,21319],{"class":1026},"incrementCount",[1002,21321,1428],{"class":1030},[1002,21323,21324,21326,21328,21330,21332,21334,21336,21338,21340,21342],{"class":1004,"line":1348},[1002,21325,21284],{"class":1026},[1002,21327,21287],{"class":1030},[1002,21329,8589],{"class":1026},[1002,21331,1031],{"class":1030},[1002,21333,21294],{"class":1034},[1002,21335,21297],{"class":1030},[1002,21337,21300],{"class":1026},[1002,21339,1031],{"class":1030},[1002,21341,6211],{"class":1019},[1002,21343,1085],{"class":1030},[1002,21345,21346],{"class":1004,"line":1354},[1002,21347,2804],{"class":1030},[925,21349,21350],{},"Writing your tests to interact with what's being rendered, then it doesn't matter how that stuff gets rendered to the screen.",[993,21352,21354],{"className":17047,"code":21353,"language":17049,"meta":998,"style":998},"test('Clicking on + increments the number', () => {\n \u002F\u002F using React Testing Library\n render(\u003CCount \u002F>);\n\n expect(screen.getByText('Total')).toBeInTheDocument();\n userEvent.click(screen.getByText('Click'));\n expect(screen.queryByText('1')).toBeInTheDocument();\n});\n",[941,21355,21356,21370,21375,21385,21389,21411,21429,21449],{"__ignoreMap":998},[1002,21357,21358,21360,21362,21364,21366,21368],{"class":1004,"line":1005},[1002,21359,21237],{"class":1026},[1002,21361,1031],{"class":1030},[1002,21363,21242],{"class":1034},[1002,21365,21245],{"class":1030},[1002,21367,15497],{"class":1015},[1002,21369,1457],{"class":1030},[1002,21371,21372],{"class":1004,"line":1012},[1002,21373,21374],{"class":1008}," \u002F\u002F using React Testing Library\n",[1002,21376,21377,21379,21381,21383],{"class":1004,"line":1047},[1002,21378,20201],{"class":1026},[1002,21380,21269],{"class":1030},[1002,21382,21272],{"class":1019},[1002,21384,21275],{"class":1030},[1002,21386,21387],{"class":1004,"line":1054},[1002,21388,1051],{"emptyLinePlaceholder":1050},[1002,21390,21391,21393,21396,21399,21401,21404,21406,21409],{"class":1004,"line":1060},[1002,21392,21284],{"class":1026},[1002,21394,21395],{"class":1030},"(screen.",[1002,21397,21398],{"class":1026},"getByText",[1002,21400,1031],{"class":1030},[1002,21402,21403],{"class":1034},"'Total'",[1002,21405,21297],{"class":1030},[1002,21407,21408],{"class":1026},"toBeInTheDocument",[1002,21410,1428],{"class":1030},[1002,21412,21413,21416,21418,21420,21422,21424,21427],{"class":1004,"line":1272},[1002,21414,21415],{"class":1030}," userEvent.",[1002,21417,11181],{"class":1026},[1002,21419,21395],{"class":1030},[1002,21421,21398],{"class":1026},[1002,21423,1031],{"class":1030},[1002,21425,21426],{"class":1034},"'Click'",[1002,21428,5663],{"class":1030},[1002,21430,21431,21433,21435,21438,21440,21443,21445,21447],{"class":1004,"line":1348},[1002,21432,21284],{"class":1026},[1002,21434,21395],{"class":1030},[1002,21436,21437],{"class":1026},"queryByText",[1002,21439,1031],{"class":1030},[1002,21441,21442],{"class":1034},"'1'",[1002,21444,21297],{"class":1030},[1002,21446,21408],{"class":1026},[1002,21448,1428],{"class":1030},[1002,21450,21451],{"class":1004,"line":1354},[1002,21452,2804],{"class":1030},[953,21454,21456],{"id":21455},"not-cleaning-up-side-effects","Not cleaning up side effects",[925,21458,21459],{},"Side effects like API calls or browser API events like setTimeout or setInterval are asynchronous calls. If you don't clean up these, React will warn you every time on the console about a component is unmounted and you are trying to perform a state update on it.",[993,21461,21463],{"className":17047,"code":21462,"language":17049,"meta":998,"style":998},"useEffect(() => {\n if (increase) {\n const id = setInterval(() => {\n setCount((count) => count + 1);\n }, 1000);\n return () => clearInterval(id);\n }\n}, [increase]);\n",[941,21464,21465,21476,21483,21501,21522,21530,21544,21548],{"__ignoreMap":998},[1002,21466,21467,21470,21472,21474],{"class":1004,"line":1005},[1002,21468,21469],{"class":1026},"useEffect",[1002,21471,15494],{"class":1030},[1002,21473,15497],{"class":1015},[1002,21475,1457],{"class":1030},[1002,21477,21478,21480],{"class":1004,"line":1012},[1002,21479,19971],{"class":1015},[1002,21481,21482],{"class":1030}," (increase) {\n",[1002,21484,21485,21487,21490,21492,21495,21497,21499],{"class":1004,"line":1047},[1002,21486,4348],{"class":1015},[1002,21488,21489],{"class":1019}," id",[1002,21491,1023],{"class":1015},[1002,21493,21494],{"class":1026}," setInterval",[1002,21496,15494],{"class":1030},[1002,21498,15497],{"class":1015},[1002,21500,1457],{"class":1030},[1002,21502,21503,21506,21508,21510,21512,21514,21516,21518,21520],{"class":1004,"line":1054},[1002,21504,21505],{"class":1026}," setCount",[1002,21507,21121],{"class":1030},[1002,21509,4720],{"class":2378},[1002,21511,5876],{"class":1030},[1002,21513,15497],{"class":1015},[1002,21515,4700],{"class":1030},[1002,21517,5064],{"class":1015},[1002,21519,6246],{"class":1019},[1002,21521,1085],{"class":1030},[1002,21523,21524,21526,21528],{"class":1004,"line":1060},[1002,21525,20829],{"class":1030},[1002,21527,6370],{"class":1019},[1002,21529,1085],{"class":1030},[1002,21531,21532,21534,21536,21538,21541],{"class":1004,"line":1272},[1002,21533,2687],{"class":1015},[1002,21535,17297],{"class":1030},[1002,21537,15497],{"class":1015},[1002,21539,21540],{"class":1026}," clearInterval",[1002,21542,21543],{"class":1030},"(id);\n",[1002,21545,21546],{"class":1004,"line":1348},[1002,21547,1269],{"class":1030},[1002,21549,21550],{"class":1004,"line":1354},[1002,21551,21552],{"class":1030},"}, [increase]);\n",[953,21554,1521],{"id":1520},[971,21556,21557,21560,21563,21566,21569,21572,21575,21578],{},[974,21558,21559],{},"Make sure, you use the ESLint plugin for hooks",[974,21561,21562],{},"Avoid changing hooks invocation order",[974,21564,21565],{},"Stop thinking in Lifecycles",[974,21567,21568],{},"Avoid using stale state",[974,21570,21571],{},"Stop overthinking performance",[974,21573,21574],{},"Avoid creating Stale Closures",[974,21576,21577],{},"Don't overthink writing tests for testing hooks",[974,21579,21580],{},"Clean up side effects",[1579,21582,21583],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":21585},[21586,21587,21588,21589,21590,21591,21592,21593,21594],{"id":19700,"depth":1012,"text":19701},{"id":19716,"depth":1012,"text":19717},{"id":20091,"depth":1012,"text":20092},{"id":20370,"depth":1012,"text":20371},{"id":20606,"depth":1012,"text":20607},{"id":20717,"depth":1012,"text":20718},{"id":21223,"depth":1012,"text":21224},{"id":21455,"depth":1012,"text":21456},{"id":1520,"depth":1012,"text":1521},"2021-10-31","\u002Fimages\u002Fblog\u002Ffeatures\u002Fthings-to-avoid-when-using-react-hooks.jpg",{},{"title":840,"description":842},"blog\u002Fthings-to-avoid-when-using-react-hooks",[16,17,40],"Roq0IqoQczBIFt5KZzYZhkTa651fg6VGze5qhQqujak",{"id":21603,"title":787,"author":920,"body":21604,"date":22472,"description":789,"extension":1591,"image":22473,"meta":22474,"navigation":1050,"path":788,"seo":22475,"stem":22476,"tags":22477,"__hash__":22478},"blog\u002Fblog\u002Fserver-side-rendering-with-suspense-in-react-18.md",{"type":922,"value":21605,"toc":22460},[21606,21609,21612,21623,21626,21630,21633,21662,21665,21667,21670,21673,21683,21686,21689,21790,21793,21810,21813,21821,22289,22292,22295,22313,22331,22334,22340,22344,22347,22358,22361,22372,22375,22378,22384,22388,22398,22442,22445,22448,22454,22457],[925,21607,21608],{},"Server-side rendering is changing in React 18. React 18 will include architectural improvements to React server-side rendering (SSR) performance.\nThis is supposed to solve the following issues we are currently having today:",[925,21610,21611],{},"React 18 will include architectural improvements to React server-side rendering (SSR) performance. This suppose to solve follwing issues we are currently having today:",[971,21613,21614,21617,21620],{},[974,21615,21616],{},"Fetch all data before rendering",[974,21618,21619],{},"Load every JS for every component before hydrating HTML",[974,21621,21622],{},"Hydrate everything before interacting",[925,21624,21625],{},"Current implmentaions of server-side rendering, Next.js for example are having to wait for the API calls to be resolved before rendering HTML and sent to the client. This slows down the intial page load for the client-side.",[953,21627,21629],{"id":21628},"api-changes","API Changes",[925,21631,21632],{},"Previously, React did not support Suspense on the server at all. This is changing in React 18",[1530,21634,21635,21641,21647],{},[974,21636,21637,21640],{},[941,21638,21639],{},"renderToString",": Keeps working (with limited Suspense support).",[974,21642,21643,21646],{},[941,21644,21645],{},"renderToNodeStream",": Deprecated (with full Suspense support, but without streaming).",[974,21648,21649,21652,21653,21656,21657,1539],{},[941,21650,21651],{},"pipeToNodeWritable",": ",[1107,21654,21655],{},"New and recommended"," (with ",[933,21658,21661],{"href":21659,"rel":21660},"https:\u002F\u002Fgithub.com\u002Freactwg\u002Freact-18\u002Fdiscussions\u002F37",[937],"full Suspense support and streaming",[925,21663,21664],{},"Let's look at these APIs individually.",[925,21666,21664],{},[1655,21668,21639],{"id":21669},"rendertostring",[925,21671,21672],{},"Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. This is synchronous and can't wait any asynchronous processes.",[925,21674,21675,21678,21679,21682],{},[1107,21676,21677],{},"React 18",": Limited ",[941,21680,21681],{},"\u003CSuspense>"," support",[925,21684,21685],{},"The nearest Suspense boundary will be marked as \"client-rendered\" and immediately emit the fallback HTML in server-side.",[925,21687,21688],{},"On the client however, after the the JavaScript has loaded, React will retry rendering its content.",[993,21690,21692],{"className":17047,"code":21691,"language":17049,"meta":998,"style":998},"import React from 'react';\nimport { renderToString } from 'react-dom\u002Fserver';\n\nfunction App() {\n const html = renderToString(\u003C>Hey there!\u003C\u002F>);\n\n return \u003Cdiv dangerouslySetInnerHTML={{ __html: html }}>\u003C\u002Fdiv>;\n}\n\nexport default App;\n",[941,21693,21694,21707,21721,21725,21733,21748,21752,21773,21777,21781],{"__ignoreMap":998},[1002,21695,21696,21698,21701,21703,21705],{"class":1004,"line":1005},[1002,21697,943],{"class":1015},[1002,21699,21700],{"class":1030}," React ",[1002,21702,1068],{"class":1015},[1002,21704,15543],{"class":1034},[1002,21706,1407],{"class":1030},[1002,21708,21709,21711,21714,21716,21719],{"class":1004,"line":1012},[1002,21710,943],{"class":1015},[1002,21712,21713],{"class":1030}," { renderToString } ",[1002,21715,1068],{"class":1015},[1002,21717,21718],{"class":1034}," 'react-dom\u002Fserver'",[1002,21720,1407],{"class":1030},[1002,21722,21723],{"class":1004,"line":1047},[1002,21724,1051],{"emptyLinePlaceholder":1050},[1002,21726,21727,21729,21731],{"class":1004,"line":1054},[1002,21728,6965],{"class":1015},[1002,21730,19566],{"class":1026},[1002,21732,3025],{"class":1030},[1002,21734,21735,21737,21740,21742,21745],{"class":1004,"line":1060},[1002,21736,10423],{"class":1015},[1002,21738,21739],{"class":1019}," html",[1002,21741,1023],{"class":1015},[1002,21743,21744],{"class":1026}," renderToString",[1002,21746,21747],{"class":1030},"(\u003C>Hey there!\u003C\u002F>);\n",[1002,21749,21750],{"class":1004,"line":1272},[1002,21751,1051],{"emptyLinePlaceholder":1050},[1002,21753,21754,21756,21758,21760,21763,21765,21768,21770],{"class":1004,"line":1348},[1002,21755,15066],{"class":1015},[1002,21757,20660],{"class":1030},[1002,21759,19650],{"class":15711},[1002,21761,21762],{"class":1026}," dangerouslySetInnerHTML",[1002,21764,2393],{"class":1015},[1002,21766,21767],{"class":1030},"{{ __html: html }}>\u003C\u002F",[1002,21769,19650],{"class":15711},[1002,21771,21772],{"class":1030},">;\n",[1002,21774,21775],{"class":1004,"line":1354},[1002,21776,1170],{"class":1030},[1002,21778,21779],{"class":1004,"line":1360},[1002,21780,1051],{"emptyLinePlaceholder":1050},[1002,21782,21783,21785,21787],{"class":1004,"line":1366},[1002,21784,947],{"class":1015},[1002,21786,15641],{"class":1015},[1002,21788,21789],{"class":1030}," App;\n",[1655,21791,21645],{"id":21792},"rendertonodestream",[925,21794,21795,21796,21798,21799,21802,21803,21806,21807],{},"This function works as same as renderToString() above. The difference  is ",[928,21797,21645],{}," will have renderer extended from ",[928,21800,21801],{},"stream.Readable"," and it produces an HTML ",[928,21804,21805],{},"stream"," instead of a ",[928,21808,21809],{},"string.",[925,21811,21812],{},"This means that you can send the rendered HTML to the client byte-by-byte during rendering, contrary to the standard renderToString, when you have to wait for the whole HTML string to be rendered first, and only after can you send it to the client.",[925,21814,21815,21817,21818,21820],{},[1107,21816,21677],{},": This will be deprecated in React 18 and will warn you if you use it. The new API ",[941,21819,21651],{}," is recommended instead.",[993,21822,21824],{"className":2227,"code":21823,"language":2229,"meta":998,"style":998},"import React from 'react';\nimport ReactDOMServer from 'react-dom\u002Fserver';\nimport express from 'express';\n\nconst app = express();\n\napp.use('\u002Fstatic', express.static('public'));\n\nconst App = (props) => {\n return \u003Cdiv>Hello {props.name}\u003C\u002Fdiv>;\n};\n\nconst Html = (props) => {\n return (\n \u003Chtml>\n \u003Cbody>\n \u003Cdiv id=\"app\">{props.children}\u003C\u002Fdiv>\n \u003Cscript\n id=\"initial-data\"\n type=\"text\u002Fplain\"\n data-json={props.initialData}\n >\u003C\u002Fscript>\n \u003Cscript src=\"\u002Fstatic\u002Fbundle.js\">\u003C\u002Fscript>\n \u003C\u002Fbody>\n \u003C\u002Fhtml>\n );\n};\n\nconst initialData = {\n name: 'World',\n};\n\napp.get('\u002F', (req, res) => {\n ReactDOMServer.renderToNodeStream(\n \u003CHtml initialData={JSON.stringify(initialData)}>\n \u003CApp {...initialData} name=\"World!\" \u002F>\n \u003C\u002FHtml>,\n ).pipe(res);\n});\n\napp.listen(8080, () => {\n console.log('listening on port 8080...');\n});\n",[941,21825,21826,21838,21851,21865,21869,21883,21887,21913,21917,21935,21950,21954,21958,21977,21983,21991,21999,22019,22026,22036,22046,22056,22066,22086,22094,22102,22106,22110,22114,22125,22135,22139,22143,22170,22179,22203,22226,22235,22246,22250,22254,22272,22285],{"__ignoreMap":998},[1002,21827,21828,21830,21832,21834,21836],{"class":1004,"line":1005},[1002,21829,943],{"class":1015},[1002,21831,21700],{"class":1030},[1002,21833,1068],{"class":1015},[1002,21835,15543],{"class":1034},[1002,21837,1407],{"class":1030},[1002,21839,21840,21842,21845,21847,21849],{"class":1004,"line":1012},[1002,21841,943],{"class":1015},[1002,21843,21844],{"class":1030}," ReactDOMServer ",[1002,21846,1068],{"class":1015},[1002,21848,21718],{"class":1034},[1002,21850,1407],{"class":1030},[1002,21852,21853,21855,21858,21860,21863],{"class":1004,"line":1047},[1002,21854,943],{"class":1015},[1002,21856,21857],{"class":1030}," express ",[1002,21859,1068],{"class":1015},[1002,21861,21862],{"class":1034}," 'express'",[1002,21864,1407],{"class":1030},[1002,21866,21867],{"class":1004,"line":1054},[1002,21868,1051],{"emptyLinePlaceholder":1050},[1002,21870,21871,21873,21876,21878,21881],{"class":1004,"line":1060},[1002,21872,1016],{"class":1015},[1002,21874,21875],{"class":1019}," app",[1002,21877,1023],{"class":1015},[1002,21879,21880],{"class":1026}," express",[1002,21882,1428],{"class":1030},[1002,21884,21885],{"class":1004,"line":1272},[1002,21886,1051],{"emptyLinePlaceholder":1050},[1002,21888,21889,21892,21895,21897,21900,21903,21906,21908,21911],{"class":1004,"line":1348},[1002,21890,21891],{"class":1030},"app.",[1002,21893,21894],{"class":1026},"use",[1002,21896,1031],{"class":1030},[1002,21898,21899],{"class":1034},"'\u002Fstatic'",[1002,21901,21902],{"class":1030},", express.",[1002,21904,21905],{"class":1026},"static",[1002,21907,1031],{"class":1030},[1002,21909,21910],{"class":1034},"'public'",[1002,21912,5663],{"class":1030},[1002,21914,21915],{"class":1004,"line":1354},[1002,21916,1051],{"emptyLinePlaceholder":1050},[1002,21918,21919,21921,21923,21925,21927,21929,21931,21933],{"class":1004,"line":1360},[1002,21920,1016],{"class":1015},[1002,21922,19566],{"class":1026},[1002,21924,1023],{"class":1015},[1002,21926,6513],{"class":1030},[1002,21928,19533],{"class":2378},[1002,21930,5876],{"class":1030},[1002,21932,15497],{"class":1015},[1002,21934,1457],{"class":1030},[1002,21936,21937,21939,21941,21943,21946,21948],{"class":1004,"line":1366},[1002,21938,15066],{"class":1015},[1002,21940,20660],{"class":1030},[1002,21942,19650],{"class":15711},[1002,21944,21945],{"class":1030},">Hello {props.name}\u003C\u002F",[1002,21947,19650],{"class":15711},[1002,21949,21772],{"class":1030},[1002,21951,21952],{"class":1004,"line":1946},[1002,21953,1517],{"class":1030},[1002,21955,21956],{"class":1004,"line":1956},[1002,21957,1051],{"emptyLinePlaceholder":1050},[1002,21959,21960,21962,21965,21967,21969,21971,21973,21975],{"class":1004,"line":1961},[1002,21961,1016],{"class":1015},[1002,21963,21964],{"class":1026}," Html",[1002,21966,1023],{"class":1015},[1002,21968,6513],{"class":1030},[1002,21970,19533],{"class":2378},[1002,21972,5876],{"class":1030},[1002,21974,15497],{"class":1015},[1002,21976,1457],{"class":1030},[1002,21978,21979,21981],{"class":1004,"line":1971},[1002,21980,15066],{"class":1015},[1002,21982,15692],{"class":1030},[1002,21984,21985,21987,21989],{"class":1004,"line":1980},[1002,21986,15697],{"class":1030},[1002,21988,383],{"class":15711},[1002,21990,15703],{"class":1030},[1002,21992,21993,21995,21997],{"class":1004,"line":1985},[1002,21994,19579],{"class":1030},[1002,21996,15034],{"class":15711},[1002,21998,15703],{"class":1030},[1002,22000,22001,22003,22005,22007,22009,22012,22015,22017],{"class":1004,"line":1995},[1002,22002,15708],{"class":1030},[1002,22004,19650],{"class":15711},[1002,22006,21489],{"class":1026},[1002,22008,2393],{"class":1015},[1002,22010,22011],{"class":1034},"\"app\"",[1002,22013,22014],{"class":1030},">{props.children}\u003C\u002F",[1002,22016,19650],{"class":15711},[1002,22018,15703],{"class":1030},[1002,22020,22021,22023],{"class":1004,"line":2006},[1002,22022,15708],{"class":1030},[1002,22024,22025],{"class":15711},"script\n",[1002,22027,22028,22031,22033],{"class":1004,"line":2011},[1002,22029,22030],{"class":1026}," id",[1002,22032,2393],{"class":1015},[1002,22034,22035],{"class":1034},"\"initial-data\"\n",[1002,22037,22038,22041,22043],{"class":1004,"line":2017},[1002,22039,22040],{"class":1026}," type",[1002,22042,2393],{"class":1015},[1002,22044,22045],{"class":1034},"\"text\u002Fplain\"\n",[1002,22047,22048,22051,22053],{"class":1004,"line":2022},[1002,22049,22050],{"class":1026}," data-json",[1002,22052,2393],{"class":1015},[1002,22054,22055],{"class":1030},"{props.initialData}\n",[1002,22057,22058,22061,22064],{"class":1004,"line":2442},[1002,22059,22060],{"class":1030}," >\u003C\u002F",[1002,22062,22063],{"class":15711},"script",[1002,22065,15703],{"class":1030},[1002,22067,22068,22070,22072,22074,22076,22079,22082,22084],{"class":1004,"line":2466},[1002,22069,15708],{"class":1030},[1002,22071,22063],{"class":15711},[1002,22073,15242],{"class":1026},[1002,22075,2393],{"class":1015},[1002,22077,22078],{"class":1034},"\"\u002Fstatic\u002Fbundle.js\"",[1002,22080,22081],{"class":1030},">\u003C\u002F",[1002,22083,22063],{"class":15711},[1002,22085,15703],{"class":1030},[1002,22087,22088,22090,22092],{"class":1004,"line":2471},[1002,22089,21184],{"class":1030},[1002,22091,15034],{"class":15711},[1002,22093,15703],{"class":1030},[1002,22095,22096,22098,22100],{"class":1004,"line":2476},[1002,22097,19647],{"class":1030},[1002,22099,383],{"class":15711},[1002,22101,15703],{"class":1030},[1002,22103,22104],{"class":1004,"line":2481},[1002,22105,10503],{"class":1030},[1002,22107,22108],{"class":1004,"line":2491},[1002,22109,1517],{"class":1030},[1002,22111,22112],{"class":1004,"line":2502},[1002,22113,1051],{"emptyLinePlaceholder":1050},[1002,22115,22116,22118,22121,22123],{"class":1004,"line":2513},[1002,22117,1016],{"class":1015},[1002,22119,22120],{"class":1019}," initialData",[1002,22122,1023],{"class":1015},[1002,22124,1457],{"class":1030},[1002,22126,22127,22130,22133],{"class":1004,"line":2535},[1002,22128,22129],{"class":1030}," name: ",[1002,22131,22132],{"class":1034},"'World'",[1002,22134,1143],{"class":1030},[1002,22136,22137],{"class":1004,"line":2557},[1002,22138,1517],{"class":1030},[1002,22140,22141],{"class":1004,"line":2562},[1002,22142,1051],{"emptyLinePlaceholder":1050},[1002,22144,22145,22147,22149,22151,22154,22157,22160,22162,22164,22166,22168],{"class":1004,"line":2567},[1002,22146,21891],{"class":1030},[1002,22148,8070],{"class":1026},[1002,22150,1031],{"class":1030},[1002,22152,22153],{"class":1034},"'\u002F'",[1002,22155,22156],{"class":1030},", (",[1002,22158,22159],{"class":2378},"req",[1002,22161,1251],{"class":1030},[1002,22163,14985],{"class":2378},[1002,22165,5876],{"class":1030},[1002,22167,15497],{"class":1015},[1002,22169,1457],{"class":1030},[1002,22171,22172,22175,22177],{"class":1004,"line":2572},[1002,22173,22174],{"class":1030}," ReactDOMServer.",[1002,22176,21645],{"class":1026},[1002,22178,10468],{"class":1030},[1002,22180,22181,22183,22186,22188,22190,22193,22196,22198,22200],{"class":1004,"line":2582},[1002,22182,15697],{"class":1030},[1002,22184,22185],{"class":1019},"Html",[1002,22187,22120],{"class":1026},[1002,22189,2393],{"class":1015},[1002,22191,22192],{"class":1030},"{",[1002,22194,22195],{"class":1019},"JSON",[1002,22197,948],{"class":1030},[1002,22199,7735],{"class":1026},[1002,22201,22202],{"class":1030},"(initialData)}>\n",[1002,22204,22205,22207,22210,22212,22214,22217,22219,22221,22224],{"class":1004,"line":2594},[1002,22206,19579],{"class":1030},[1002,22208,22209],{"class":1019},"App",[1002,22211,19222],{"class":1030},[1002,22213,17625],{"class":1015},[1002,22215,22216],{"class":1030},"initialData} ",[1002,22218,5911],{"class":1026},[1002,22220,2393],{"class":1015},[1002,22222,22223],{"class":1034},"\"World!\"",[1002,22225,15258],{"class":1030},[1002,22227,22228,22230,22232],{"class":1004,"line":2603},[1002,22229,19647],{"class":1030},[1002,22231,22185],{"class":1019},[1002,22233,22234],{"class":1030},">,\n",[1002,22236,22237,22240,22243],{"class":1004,"line":2619},[1002,22238,22239],{"class":1030}," ).",[1002,22241,22242],{"class":1026},"pipe",[1002,22244,22245],{"class":1030},"(res);\n",[1002,22247,22248],{"class":1004,"line":2633},[1002,22249,2804],{"class":1030},[1002,22251,22252],{"class":1004,"line":2641},[1002,22253,1051],{"emptyLinePlaceholder":1050},[1002,22255,22256,22258,22261,22263,22266,22268,22270],{"class":1004,"line":2655},[1002,22257,21891],{"class":1030},[1002,22259,22260],{"class":1026},"listen",[1002,22262,1031],{"class":1030},[1002,22264,22265],{"class":1019},"8080",[1002,22267,21245],{"class":1030},[1002,22269,15497],{"class":1015},[1002,22271,1457],{"class":1030},[1002,22273,22274,22276,22278,22280,22283],{"class":1004,"line":2667},[1002,22275,6977],{"class":1030},[1002,22277,2886],{"class":1026},[1002,22279,1031],{"class":1030},[1002,22281,22282],{"class":1034},"'listening on port 8080...'",[1002,22284,1085],{"class":1030},[1002,22286,22287],{"class":1004,"line":2674},[1002,22288,2804],{"class":1030},[1655,22290,21651],{"id":22291},"pipetonodewritable",[925,22293,22294],{},"This will be the recommended API going forward. It has all the new features:",[1530,22296,22297,22303,22310],{},[974,22298,22299,22300,22302],{},"Full built-in support for ",[941,22301,21681],{}," (which integrates with data fetching)",[974,22304,22305,22306,22309],{},"Code splitting with ",[941,22307,22308],{},"lazy"," without flashes of \"disappearing\" content",[974,22311,22312],{},"Streaming of HTML with \"delayed\" content blocks \"popping in\" later",[993,22314,22316],{"className":17047,"code":22315,"language":17049,"meta":998,"style":998},"import { pipeToNodeWritable } from 'react-dom\u002Fserver';\n",[941,22317,22318],{"__ignoreMap":998},[1002,22319,22320,22322,22325,22327,22329],{"class":1004,"line":1005},[1002,22321,943],{"class":1015},[1002,22323,22324],{"class":1030}," { pipeToNodeWritable } ",[1002,22326,1068],{"class":1015},[1002,22328,21718],{"class":1034},[1002,22330,1407],{"class":1030},[925,22332,22333],{},"Here's a CodeSandBox example from the React team:",[925,22335,22336],{},[933,22337,21651],{"href":22338,"rel":22339},"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Ffestive-star-9hfqt?from-embed",[937],[953,22341,22343],{"id":22342},"advantages-using-ssr-with-suspense","Advantages using SSR with Suspense",[925,22345,22346],{},"First let's look at the advantages of SSR iteself:",[1530,22348,22349,22352,22355],{},[974,22350,22351],{},"Bundle size - Reduce bundle size by moving static, render-only components into the server-side and keep the interactive-stateful components on the client-side",[974,22353,22354],{},"Server components can access server-side resources. You can fetch data from the database or the filesystem directly, and you can also fetch from APIs just like on the client-side",[974,22356,22357],{},"Server components can read REST APIs as well as GraphQL queries asynchronously",[925,22359,22360],{},"By updating to React 18, we also get the following advantages:",[1530,22362,22363,22366,22369],{},[974,22364,22365],{},"Streaming HTML",[974,22367,22368],{},"SSR with Suspense",[974,22370,22371],{},"Selective hydration",[1655,22373,22365],{"id":22374},"streaming-html",[925,22376,22377],{},"Stream parts of an HTML page and increase the page load time without having to wait for the whole tree to be loaded before streaming the HTML.",[925,22379,22380,22381,22383],{},"To opt into it, you’ll need to switch from renderToString to the new ",[941,22382,21651],{}," method.",[1655,22385,22387],{"id":22386},"server-side-suspense","Server-side Suspense",[925,22389,22390,22391,22394,22395,22397],{},"By wrapping a component with Suspense, React will asynchonously render the component displaying the ",[941,22392,22393],{},"fallback"," component and later replace it with the component and hydrate it. This is done by sending the remaining code via a chunk rendered with a ",[941,22396,22063],{}," tag",[993,22399,22401],{"className":2227,"code":22400,"language":2229,"meta":998,"style":998},"\u003CSuspense fallback={\u003CLoading \u002F>}>\n \u003CMyComponent \u002F>\n\u003C\u002FSuspense>\n",[941,22402,22403,22423,22433],{"__ignoreMap":998},[1002,22404,22405,22407,22409,22412,22414,22417,22420],{"class":1004,"line":1005},[1002,22406,6539],{"class":1030},[1002,22408,15771],{"class":1019},[1002,22410,22411],{"class":1026}," fallback",[1002,22413,2393],{"class":1015},[1002,22415,22416],{"class":1030},"{\u003C",[1002,22418,22419],{"class":1019},"Loading",[1002,22421,22422],{"class":1030}," \u002F>}>\n",[1002,22424,22425,22428,22431],{"class":1004,"line":1012},[1002,22426,22427],{"class":1030}," \u003C",[1002,22429,22430],{"class":1019},"MyComponent",[1002,22432,15258],{"class":1030},[1002,22434,22435,22438,22440],{"class":1004,"line":1047},[1002,22436,22437],{"class":1030},"\u003C\u002F",[1002,22439,15771],{"class":1019},[1002,22441,15703],{"class":1030},[1655,22443,22371],{"id":22444},"selective-hydration",[925,22446,22447],{},"Before React 18, everything needed to be loaded before the hydrate step happens. Then only will React hydrate the HMTL before making it interactive (handling events etc).",[925,22449,22450,22451,22453],{},"By using ",[941,22452,15771],{}," to wrap your components, other parts of the page will be available for interaction.",[925,22455,22456],{},"By interacting with a hydrating component, for example clicking on a component that is still loading, React can prioritise the area. React does this by recording that interaction and replaying it once the component has finished hydrating.",[1579,22458,22459],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":22461},[22462,22467],{"id":21628,"depth":1012,"text":21629,"children":22463},[22464,22465,22466],{"id":21669,"depth":1047,"text":21639},{"id":21792,"depth":1047,"text":21645},{"id":22291,"depth":1047,"text":21651},{"id":22342,"depth":1012,"text":22343,"children":22468},[22469,22470,22471],{"id":22374,"depth":1047,"text":22365},{"id":22386,"depth":1047,"text":22387},{"id":22444,"depth":1047,"text":22371},"2021-10-22","\u002Fimages\u002Fblog\u002Ffeatures\u002Fserver-side-rendering-with-suspense-in-react-18.jpg",{},{"title":787,"description":789},"blog\u002Fserver-side-rendering-with-suspense-in-react-18",[16,17,40,578],"yKIqK1dMnviPeLe0xEj3DMs8icY1nBGOSWjJtkAwNYg",{"id":22480,"title":803,"author":920,"body":22481,"date":23363,"description":805,"extension":1591,"image":23364,"meta":23365,"navigation":1050,"path":804,"seo":23366,"stem":23367,"tags":23368,"__hash__":23369},"blog\u002Fblog\u002Fshould-we-declare-react-functional-components-with-a-const-or-a-function.md",{"type":922,"value":22482,"toc":23357},[22483,22486,22494,22497,22504,22507,22546,22549,22580,22583,22603,22606,22629,22633,22636,22668,22670,22697,22700,22725,22729,22732,22833,22836,22933,22936,22939,23058,23062,23065,23299,23302,23304,23309,23346,23354],[925,22484,22485],{},"There are two ways of declaring a component.",[971,22487,22488,22491],{},[974,22489,22490],{},"Using an arrow function",[974,22492,22493],{},"Using function declaration",[925,22495,22496],{},"If you look at the React documentation, you can see that the components declarations are done with the function syntax:",[925,22498,22499],{},[933,22500,22503],{"href":22501,"rel":22502},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fcomponents-and-props.html",[937],"React documentation: Components and Props",[925,22505,22506],{},"Using an arrow function:",[993,22508,22510],{"className":17047,"code":22509,"language":17049,"meta":998,"style":998},"const App = () => {\n return(\n ..\n );\n}\n",[941,22511,22512,22526,22532,22537,22542],{"__ignoreMap":998},[1002,22513,22514,22516,22518,22520,22522,22524],{"class":1004,"line":1005},[1002,22515,1016],{"class":1015},[1002,22517,19566],{"class":1026},[1002,22519,1023],{"class":1015},[1002,22521,17297],{"class":1030},[1002,22523,15497],{"class":1015},[1002,22525,1457],{"class":1030},[1002,22527,22528,22530],{"class":1004,"line":1012},[1002,22529,2687],{"class":1015},[1002,22531,10468],{"class":1030},[1002,22533,22534],{"class":1004,"line":1047},[1002,22535,22536],{"class":1030}," ..\n",[1002,22538,22539],{"class":1004,"line":1054},[1002,22540,22541],{"class":1030}," );\n",[1002,22543,22544],{"class":1004,"line":1060},[1002,22545,1170],{"class":1030},[925,22547,22548],{},"And using function declaration :",[993,22550,22552],{"className":17047,"code":22551,"language":17049,"meta":998,"style":998},"function App() {\n return(\n ..\n );\n}\n",[941,22553,22554,22562,22568,22572,22576],{"__ignoreMap":998},[1002,22555,22556,22558,22560],{"class":1004,"line":1005},[1002,22557,6965],{"class":1015},[1002,22559,19566],{"class":1026},[1002,22561,3025],{"class":1030},[1002,22563,22564,22566],{"class":1004,"line":1012},[1002,22565,2687],{"class":1015},[1002,22567,10468],{"class":1030},[1002,22569,22570],{"class":1004,"line":1047},[1002,22571,22536],{"class":1030},[1002,22573,22574],{"class":1004,"line":1054},[1002,22575,22541],{"class":1030},[1002,22577,22578],{"class":1004,"line":1060},[1002,22579,1170],{"class":1030},[925,22581,22582],{},"If your component only returns JSX, then the first option (arrow function) seems to be shorter.",[993,22584,22586],{"className":17047,"code":22585,"language":17049,"meta":998,"style":998},"const App = () => \u003C>Hello!\u003C\u002F>;\n",[941,22587,22588],{"__ignoreMap":998},[1002,22589,22590,22592,22594,22596,22598,22600],{"class":1004,"line":1005},[1002,22591,1016],{"class":1015},[1002,22593,19566],{"class":1026},[1002,22595,1023],{"class":1015},[1002,22597,17297],{"class":1030},[1002,22599,15497],{"class":1015},[1002,22601,22602],{"class":1030}," \u003C>Hello!\u003C\u002F>;\n",[925,22604,22605],{},"Versus:",[993,22607,22609],{"className":17047,"code":22608,"language":17049,"meta":998,"style":998},"function App() {\n return \u003C>Hello!\u003C\u002F>;\n}\n",[941,22610,22611,22619,22625],{"__ignoreMap":998},[1002,22612,22613,22615,22617],{"class":1004,"line":1005},[1002,22614,6965],{"class":1015},[1002,22616,19566],{"class":1026},[1002,22618,3025],{"class":1030},[1002,22620,22621,22623],{"class":1004,"line":1012},[1002,22622,15066],{"class":1015},[1002,22624,22602],{"class":1030},[1002,22626,22627],{"class":1004,"line":1047},[1002,22628,1170],{"class":1030},[953,22630,22632],{"id":22631},"exporting-the-default-component","Exporting the default component",[925,22634,22635],{},"But if when are exporting your component as default, this is no longer the case:",[993,22637,22639],{"className":17047,"code":22638,"language":17049,"meta":998,"style":998},"const App = () => {};\n\nexport default MyComponent;\n",[941,22640,22641,22655,22659],{"__ignoreMap":998},[1002,22642,22643,22645,22647,22649,22651,22653],{"class":1004,"line":1005},[1002,22644,1016],{"class":1015},[1002,22646,19566],{"class":1026},[1002,22648,1023],{"class":1015},[1002,22650,17297],{"class":1030},[1002,22652,15497],{"class":1015},[1002,22654,7217],{"class":1030},[1002,22656,22657],{"class":1004,"line":1012},[1002,22658,1051],{"emptyLinePlaceholder":1050},[1002,22660,22661,22663,22665],{"class":1004,"line":1047},[1002,22662,947],{"class":1015},[1002,22664,15641],{"class":1015},[1002,22666,22667],{"class":1030}," MyComponent;\n",[925,22669,22605],{},[993,22671,22673],{"className":17047,"code":22672,"language":17049,"meta":998,"style":998},"export default function App() {\n return \u003C>Hello!\u003C\u002F>;\n}\n",[941,22674,22675,22687,22693],{"__ignoreMap":998},[1002,22676,22677,22679,22681,22683,22685],{"class":1004,"line":1005},[1002,22678,947],{"class":1015},[1002,22680,15641],{"class":1015},[1002,22682,8457],{"class":1015},[1002,22684,19566],{"class":1026},[1002,22686,3025],{"class":1030},[1002,22688,22689,22691],{"class":1004,"line":1012},[1002,22690,15066],{"class":1015},[1002,22692,22602],{"class":1030},[1002,22694,22695],{"class":1004,"line":1047},[1002,22696,1170],{"class":1030},[925,22698,22699],{},"You could also omit the name and directly export the function expression:",[993,22701,22703],{"className":17047,"code":22702,"language":17049,"meta":998,"style":998},"export default function () {\n return \u003C>Hello!\u003C\u002F>;\n}\n",[941,22704,22705,22715,22721],{"__ignoreMap":998},[1002,22706,22707,22709,22711,22713],{"class":1004,"line":1005},[1002,22708,947],{"class":1015},[1002,22710,15641],{"class":1015},[1002,22712,8457],{"class":1015},[1002,22714,9772],{"class":1030},[1002,22716,22717,22719],{"class":1004,"line":1012},[1002,22718,15066],{"class":1015},[1002,22720,22602],{"class":1030},[1002,22722,22723],{"class":1004,"line":1047},[1002,22724,1170],{"class":1030},[953,22726,22728],{"id":22727},"hoisting","Hoisting",[925,22730,22731],{},"This is where function syntax shines! Let's look at an example starting with the arrow function syntax:",[993,22733,22735],{"className":17047,"code":22734,"language":17049,"meta":998,"style":998},"const FirstComponent = () => {};\n\nconst SecondComponent = () => {};\n\nconst App = () => (\n \u003C>\n \u003CFirstComponent \u002F>\n \u003CSecondComponent \u002F>\n \u003C\u002F>\n);\n\nexport default App;\n",[941,22736,22737,22752,22756,22771,22775,22789,22794,22803,22812,22817,22821,22825],{"__ignoreMap":998},[1002,22738,22739,22741,22744,22746,22748,22750],{"class":1004,"line":1005},[1002,22740,1016],{"class":1015},[1002,22742,22743],{"class":1026}," FirstComponent",[1002,22745,1023],{"class":1015},[1002,22747,17297],{"class":1030},[1002,22749,15497],{"class":1015},[1002,22751,7217],{"class":1030},[1002,22753,22754],{"class":1004,"line":1012},[1002,22755,1051],{"emptyLinePlaceholder":1050},[1002,22757,22758,22760,22763,22765,22767,22769],{"class":1004,"line":1047},[1002,22759,1016],{"class":1015},[1002,22761,22762],{"class":1026}," SecondComponent",[1002,22764,1023],{"class":1015},[1002,22766,17297],{"class":1030},[1002,22768,15497],{"class":1015},[1002,22770,7217],{"class":1030},[1002,22772,22773],{"class":1004,"line":1054},[1002,22774,1051],{"emptyLinePlaceholder":1050},[1002,22776,22777,22779,22781,22783,22785,22787],{"class":1004,"line":1060},[1002,22778,1016],{"class":1015},[1002,22780,19566],{"class":1026},[1002,22782,1023],{"class":1015},[1002,22784,17297],{"class":1030},[1002,22786,15497],{"class":1015},[1002,22788,15692],{"class":1030},[1002,22790,22791],{"class":1004,"line":1272},[1002,22792,22793],{"class":1030}," \u003C>\n",[1002,22795,22796,22798,22801],{"class":1004,"line":1348},[1002,22797,15697],{"class":1030},[1002,22799,22800],{"class":1019},"FirstComponent",[1002,22802,15258],{"class":1030},[1002,22804,22805,22807,22810],{"class":1004,"line":1354},[1002,22806,15697],{"class":1030},[1002,22808,22809],{"class":1019},"SecondComponent",[1002,22811,15258],{"class":1030},[1002,22813,22814],{"class":1004,"line":1360},[1002,22815,22816],{"class":1030}," \u003C\u002F>\n",[1002,22818,22819],{"class":1004,"line":1366},[1002,22820,1085],{"class":1030},[1002,22822,22823],{"class":1004,"line":1946},[1002,22824,1051],{"emptyLinePlaceholder":1050},[1002,22826,22827,22829,22831],{"class":1004,"line":1956},[1002,22828,947],{"class":1015},[1002,22830,15641],{"class":1015},[1002,22832,21789],{"class":1030},[925,22834,22835],{},"This syntax is valid. But things get hairy if you declare your other components after your main component.",[993,22837,22839],{"className":17047,"code":22838,"language":17049,"meta":998,"style":998},"const App = () => (\n \u003C>\n \u003CFirstComponent \u002F>\n \u003CSecondComponent \u002F>\n \u003C\u002F>\n);\n\nconst FirstComponent = () => \u003C>First\u003C\u002F>;\n\nconst SecondComponent = () => \u003C>Second\u003C\u002F>;\n\nexport default App;\n",[941,22840,22841,22855,22859,22867,22875,22879,22883,22887,22902,22906,22921,22925],{"__ignoreMap":998},[1002,22842,22843,22845,22847,22849,22851,22853],{"class":1004,"line":1005},[1002,22844,1016],{"class":1015},[1002,22846,19566],{"class":1026},[1002,22848,1023],{"class":1015},[1002,22850,17297],{"class":1030},[1002,22852,15497],{"class":1015},[1002,22854,15692],{"class":1030},[1002,22856,22857],{"class":1004,"line":1012},[1002,22858,22793],{"class":1030},[1002,22860,22861,22863,22865],{"class":1004,"line":1047},[1002,22862,15697],{"class":1030},[1002,22864,22800],{"class":1019},[1002,22866,15258],{"class":1030},[1002,22868,22869,22871,22873],{"class":1004,"line":1054},[1002,22870,15697],{"class":1030},[1002,22872,22809],{"class":1019},[1002,22874,15258],{"class":1030},[1002,22876,22877],{"class":1004,"line":1060},[1002,22878,22816],{"class":1030},[1002,22880,22881],{"class":1004,"line":1272},[1002,22882,1085],{"class":1030},[1002,22884,22885],{"class":1004,"line":1348},[1002,22886,1051],{"emptyLinePlaceholder":1050},[1002,22888,22889,22891,22893,22895,22897,22899],{"class":1004,"line":1354},[1002,22890,1016],{"class":1015},[1002,22892,22743],{"class":1026},[1002,22894,1023],{"class":1015},[1002,22896,17297],{"class":1030},[1002,22898,15497],{"class":1015},[1002,22900,22901],{"class":1030}," \u003C>First\u003C\u002F>;\n",[1002,22903,22904],{"class":1004,"line":1360},[1002,22905,1051],{"emptyLinePlaceholder":1050},[1002,22907,22908,22910,22912,22914,22916,22918],{"class":1004,"line":1366},[1002,22909,1016],{"class":1015},[1002,22911,22762],{"class":1026},[1002,22913,1023],{"class":1015},[1002,22915,17297],{"class":1030},[1002,22917,15497],{"class":1015},[1002,22919,22920],{"class":1030}," \u003C>Second\u003C\u002F>;\n",[1002,22922,22923],{"class":1004,"line":1946},[1002,22924,1051],{"emptyLinePlaceholder":1050},[1002,22926,22927,22929,22931],{"class":1004,"line":1956},[1002,22928,947],{"class":1015},[1002,22930,15641],{"class":1015},[1002,22932,21789],{"class":1030},[925,22934,22935],{},"Your linter will throw an error because the components are used before they have been declared.",[925,22937,22938],{},"But if we declared your components using function syntax:",[993,22940,22942],{"className":17047,"code":22941,"language":17049,"meta":998,"style":998},"function App() {\n return (\n \u003C>\n \u003CFirstComponent \u002F>\n \u003CSecondComponent \u002F>\n \u003C\u002F>\n );\n}\n\nconst FirstComponent = () => {\n return \u003C>First\u003C\u002F>;\n};\n\nconst SecondComponent = () => {\n return \u003C>Second\u003C\u002F>;\n};\n\nexport default App;\n",[941,22943,22944,22952,22958,22962,22970,22978,22982,22986,22990,22994,23008,23014,23018,23022,23036,23042,23046,23050],{"__ignoreMap":998},[1002,22945,22946,22948,22950],{"class":1004,"line":1005},[1002,22947,6965],{"class":1015},[1002,22949,19566],{"class":1026},[1002,22951,3025],{"class":1030},[1002,22953,22954,22956],{"class":1004,"line":1012},[1002,22955,15066],{"class":1015},[1002,22957,15692],{"class":1030},[1002,22959,22960],{"class":1004,"line":1047},[1002,22961,19198],{"class":1030},[1002,22963,22964,22966,22968],{"class":1004,"line":1054},[1002,22965,19579],{"class":1030},[1002,22967,22800],{"class":1019},[1002,22969,15258],{"class":1030},[1002,22971,22972,22974,22976],{"class":1004,"line":1060},[1002,22973,19579],{"class":1030},[1002,22975,22809],{"class":1019},[1002,22977,15258],{"class":1030},[1002,22979,22980],{"class":1004,"line":1272},[1002,22981,19499],{"class":1030},[1002,22983,22984],{"class":1004,"line":1348},[1002,22985,10503],{"class":1030},[1002,22987,22988],{"class":1004,"line":1354},[1002,22989,1170],{"class":1030},[1002,22991,22992],{"class":1004,"line":1360},[1002,22993,1051],{"emptyLinePlaceholder":1050},[1002,22995,22996,22998,23000,23002,23004,23006],{"class":1004,"line":1366},[1002,22997,1016],{"class":1015},[1002,22999,22743],{"class":1026},[1002,23001,1023],{"class":1015},[1002,23003,17297],{"class":1030},[1002,23005,15497],{"class":1015},[1002,23007,1457],{"class":1030},[1002,23009,23010,23012],{"class":1004,"line":1946},[1002,23011,15066],{"class":1015},[1002,23013,22901],{"class":1030},[1002,23015,23016],{"class":1004,"line":1956},[1002,23017,1517],{"class":1030},[1002,23019,23020],{"class":1004,"line":1961},[1002,23021,1051],{"emptyLinePlaceholder":1050},[1002,23023,23024,23026,23028,23030,23032,23034],{"class":1004,"line":1971},[1002,23025,1016],{"class":1015},[1002,23027,22762],{"class":1026},[1002,23029,1023],{"class":1015},[1002,23031,17297],{"class":1030},[1002,23033,15497],{"class":1015},[1002,23035,1457],{"class":1030},[1002,23037,23038,23040],{"class":1004,"line":1980},[1002,23039,15066],{"class":1015},[1002,23041,22920],{"class":1030},[1002,23043,23044],{"class":1004,"line":1985},[1002,23045,1517],{"class":1030},[1002,23047,23048],{"class":1004,"line":1995},[1002,23049,1051],{"emptyLinePlaceholder":1050},[1002,23051,23052,23054,23056],{"class":1004,"line":2006},[1002,23053,947],{"class":1015},[1002,23055,15641],{"class":1015},[1002,23057,21789],{"class":1030},[953,23059,23061],{"id":23060},"generics","Generics",[925,23063,23064],{},"If you are using TypeScript and using generic types in your component, you have to use the function syntax.",[993,23066,23068],{"className":17047,"code":23067,"language":17049,"meta":998,"style":998},"interface Item {\n name: string;\n}\n\ninterface ListProps\u003CT> {\n items: T[];\n onClick: (item: T) => void;\n}\n\nfunction List\u003CT = unknown>(props: ListProps\u003CT>) {\n return \u003C>TODO\u003C\u002F>;\n}\n\nfunction App() {\n const items: Item[] = [{ name: 'Sean' }];\n const onClick = (item: Item) => console.log(item);\n return \u003CList\u003CItem> items={items} onClick={onClick} \u002F>;\n}\n",[941,23069,23070,23080,23090,23094,23098,23113,23126,23150,23154,23158,23190,23197,23201,23205,23213,23237,23263,23295],{"__ignoreMap":998},[1002,23071,23072,23075,23078],{"class":1004,"line":1005},[1002,23073,23074],{"class":1015},"interface",[1002,23076,23077],{"class":1026}," Item",[1002,23079,1457],{"class":1030},[1002,23081,23082,23084,23086,23088],{"class":1004,"line":1012},[1002,23083,17207],{"class":2378},[1002,23085,1813],{"class":1015},[1002,23087,17261],{"class":1019},[1002,23089,1407],{"class":1030},[1002,23091,23092],{"class":1004,"line":1047},[1002,23093,1170],{"class":1030},[1002,23095,23096],{"class":1004,"line":1054},[1002,23097,1051],{"emptyLinePlaceholder":1050},[1002,23099,23100,23102,23105,23107,23110],{"class":1004,"line":1060},[1002,23101,23074],{"class":1015},[1002,23103,23104],{"class":1026}," ListProps",[1002,23106,6539],{"class":1030},[1002,23108,23109],{"class":1026},"T",[1002,23111,23112],{"class":1030},"> {\n",[1002,23114,23115,23118,23120,23123],{"class":1004,"line":1272},[1002,23116,23117],{"class":2378}," items",[1002,23119,1813],{"class":1015},[1002,23121,23122],{"class":1026}," T",[1002,23124,23125],{"class":1030},"[];\n",[1002,23127,23128,23131,23133,23135,23137,23139,23141,23143,23145,23148],{"class":1004,"line":1348},[1002,23129,23130],{"class":1026}," onClick",[1002,23132,1813],{"class":1015},[1002,23134,6513],{"class":1030},[1002,23136,6970],{"class":2378},[1002,23138,1813],{"class":1015},[1002,23140,23122],{"class":1026},[1002,23142,5876],{"class":1030},[1002,23144,15497],{"class":1015},[1002,23146,23147],{"class":1019}," void",[1002,23149,1407],{"class":1030},[1002,23151,23152],{"class":1004,"line":1354},[1002,23153,1170],{"class":1030},[1002,23155,23156],{"class":1004,"line":1360},[1002,23157,1051],{"emptyLinePlaceholder":1050},[1002,23159,23160,23162,23165,23167,23169,23171,23174,23177,23179,23181,23183,23185,23187],{"class":1004,"line":1366},[1002,23161,6965],{"class":1015},[1002,23163,23164],{"class":1026}," List",[1002,23166,6539],{"class":1030},[1002,23168,23109],{"class":1026},[1002,23170,1023],{"class":1015},[1002,23172,23173],{"class":1019}," unknown",[1002,23175,23176],{"class":1030},">(",[1002,23178,19533],{"class":2378},[1002,23180,1813],{"class":1015},[1002,23182,23104],{"class":1026},[1002,23184,6539],{"class":1030},[1002,23186,23109],{"class":1026},[1002,23188,23189],{"class":1030},">) {\n",[1002,23191,23192,23194],{"class":1004,"line":1946},[1002,23193,15066],{"class":1015},[1002,23195,23196],{"class":1030}," \u003C>TODO\u003C\u002F>;\n",[1002,23198,23199],{"class":1004,"line":1956},[1002,23200,1170],{"class":1030},[1002,23202,23203],{"class":1004,"line":1961},[1002,23204,1051],{"emptyLinePlaceholder":1050},[1002,23206,23207,23209,23211],{"class":1004,"line":1971},[1002,23208,6965],{"class":1015},[1002,23210,19566],{"class":1026},[1002,23212,3025],{"class":1030},[1002,23214,23215,23217,23219,23221,23223,23226,23228,23231,23234],{"class":1004,"line":1980},[1002,23216,10423],{"class":1015},[1002,23218,6909],{"class":1019},[1002,23220,1813],{"class":1015},[1002,23222,23077],{"class":1026},[1002,23224,23225],{"class":1030},"[] ",[1002,23227,2393],{"class":1015},[1002,23229,23230],{"class":1030}," [{ name: ",[1002,23232,23233],{"class":1034},"'Sean'",[1002,23235,23236],{"class":1030}," }];\n",[1002,23238,23239,23241,23243,23245,23247,23249,23251,23253,23255,23257,23259,23261],{"class":1004,"line":1985},[1002,23240,10423],{"class":1015},[1002,23242,16691],{"class":1026},[1002,23244,1023],{"class":1015},[1002,23246,6513],{"class":1030},[1002,23248,6970],{"class":2378},[1002,23250,1813],{"class":1015},[1002,23252,23077],{"class":1026},[1002,23254,5876],{"class":1030},[1002,23256,15497],{"class":1015},[1002,23258,19409],{"class":1030},[1002,23260,2886],{"class":1026},[1002,23262,6886],{"class":1030},[1002,23264,23265,23267,23269,23272,23274,23277,23280,23282,23284,23287,23290,23292],{"class":1004,"line":1995},[1002,23266,15066],{"class":1015},[1002,23268,20660],{"class":1030},[1002,23270,23271],{"class":1019},"List",[1002,23273,6539],{"class":1030},[1002,23275,23276],{"class":1026},"Item",[1002,23278,23279],{"class":1030},"> ",[1002,23281,6656],{"class":1026},[1002,23283,2393],{"class":1015},[1002,23285,23286],{"class":1030},"{items} ",[1002,23288,23289],{"class":1026},"onClick",[1002,23291,2393],{"class":1015},[1002,23293,23294],{"class":1030},"{onClick} \u002F>;\n",[1002,23296,23297],{"class":1004,"line":2006},[1002,23298,1170],{"class":1030},[925,23300,23301],{},"At the end of the day, you don't have to pick one or the other. But having these differences in mind will help you to decide which option to use when you write your component declarations.",[953,23303,1521],{"id":1520},[971,23305,23306],{},[974,23307,23308],{},"Function declarations are actually fewer characters than const arrow function statements:",[993,23310,23312],{"className":17047,"code":23311,"language":17049,"meta":998,"style":998},"\u002F\u002F 16 characters\nfunction App() {}\n\u002F\u002F 20 characters\nconst App = () => {};\n",[941,23313,23314,23319,23327,23332],{"__ignoreMap":998},[1002,23315,23316],{"class":1004,"line":1005},[1002,23317,23318],{"class":1008},"\u002F\u002F 16 characters\n",[1002,23320,23321,23323,23325],{"class":1004,"line":1012},[1002,23322,6965],{"class":1015},[1002,23324,19566],{"class":1026},[1002,23326,2997],{"class":1030},[1002,23328,23329],{"class":1004,"line":1047},[1002,23330,23331],{"class":1008},"\u002F\u002F 20 characters\n",[1002,23333,23334,23336,23338,23340,23342,23344],{"class":1004,"line":1054},[1002,23335,1016],{"class":1015},[1002,23337,19566],{"class":1026},[1002,23339,1023],{"class":1015},[1002,23341,17297],{"class":1030},[1002,23343,15497],{"class":1015},[1002,23345,7217],{"class":1030},[971,23347,23348,23351],{},[974,23349,23350],{},"If you are writing multiple components in one file, it's better to use function syntax as hoisting may come into effect",[974,23352,23353],{},"If you want to use generics, you will have to use function syntax",[1579,23355,23356],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":23358},[23359,23360,23361,23362],{"id":22631,"depth":1012,"text":22632},{"id":22727,"depth":1012,"text":22728},{"id":23060,"depth":1012,"text":23061},{"id":1520,"depth":1012,"text":1521},"2021-10-16","\u002Fimages\u002Fblog\u002Ffeatures\u002Fshould-we-declare-react-functional-components-with-a-const-or-a-function.jpg",{},{"title":803,"description":805},"blog\u002Fshould-we-declare-react-functional-components-with-a-const-or-a-function",[16,17,807,40],"vJ9NuPXXEvcWcmYnHOKXZoGe0I6GMARHfrkrsZfRwvI",{"id":23371,"title":861,"author":920,"body":23372,"date":24027,"description":863,"extension":1591,"image":24028,"meta":24029,"navigation":1050,"path":862,"seo":24030,"stem":24031,"tags":24032,"__hash__":24033},"blog\u002Fblog\u002Ftypescript-enums-vs-string-literals.md",{"type":922,"value":23373,"toc":24021},[23374,23377,23382,23388,23392,23395,23502,23505,23574,23577,23588,23591,23665,23669,23672,23675,23770,23774,23777,23994,23996,24018],[925,23375,23376],{},"Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.",[7100,23378,23380],{"type":23379},"warn",[925,23381,23376],{},[925,23383,23384,23385,948],{},"TypeScript 2.4 implemented one of the most requested features: string enums, or, to be more precise, ",[928,23386,23387],{},"enums with string-valued members",[953,23389,23391],{"id":23390},"prefer-union-types-over-string-enums","Prefer union types over string enums",[925,23393,23394],{},"String enums are named types, That means, even if values are valid and compatible, you can’t pass them to a function or object where you expect a string enum. See this example",[993,23396,23400],{"className":23397,"code":23398,"language":23399,"meta":998,"style":998},"language-ts shiki shiki-themes github-light github-dark","enum User {\n Admin = 'Admin',\n Client = 'Client',\n}\n\nfunction login(user: User) {\n API.login();\n}\n\nlogin('Admin'); \u002F\u002F This is not allowed!\nlogin(User.Admin); \u002F\u002F You have to be explicit!\n","ts",[941,23401,23402,23410,23422,23434,23438,23442,23459,23470,23474,23478,23492],{"__ignoreMap":998},[1002,23403,23404,23406,23408],{"class":1004,"line":1005},[1002,23405,17765],{"class":1015},[1002,23407,12502],{"class":1026},[1002,23409,1457],{"class":1030},[1002,23411,23412,23415,23417,23420],{"class":1004,"line":1012},[1002,23413,23414],{"class":1019}," Admin",[1002,23416,1023],{"class":1015},[1002,23418,23419],{"class":1034}," 'Admin'",[1002,23421,1143],{"class":1030},[1002,23423,23424,23427,23429,23432],{"class":1004,"line":1047},[1002,23425,23426],{"class":1019}," Client",[1002,23428,1023],{"class":1015},[1002,23430,23431],{"class":1034}," 'Client'",[1002,23433,1143],{"class":1030},[1002,23435,23436],{"class":1004,"line":1054},[1002,23437,1170],{"class":1030},[1002,23439,23440],{"class":1004,"line":1060},[1002,23441,1051],{"emptyLinePlaceholder":1050},[1002,23443,23444,23446,23449,23451,23453,23455,23457],{"class":1004,"line":1272},[1002,23445,6965],{"class":1015},[1002,23447,23448],{"class":1026}," login",[1002,23450,1031],{"class":1030},[1002,23452,12587],{"class":2378},[1002,23454,1813],{"class":1015},[1002,23456,12502],{"class":1026},[1002,23458,2382],{"class":1030},[1002,23460,23461,23464,23466,23468],{"class":1004,"line":1348},[1002,23462,23463],{"class":1019}," API",[1002,23465,948],{"class":1030},[1002,23467,10823],{"class":1026},[1002,23469,1428],{"class":1030},[1002,23471,23472],{"class":1004,"line":1354},[1002,23473,1170],{"class":1030},[1002,23475,23476],{"class":1004,"line":1360},[1002,23477,1051],{"emptyLinePlaceholder":1050},[1002,23479,23480,23482,23484,23487,23489],{"class":1004,"line":1366},[1002,23481,10823],{"class":1026},[1002,23483,1031],{"class":1030},[1002,23485,23486],{"class":1034},"'Admin'",[1002,23488,18256],{"class":1030},[1002,23490,23491],{"class":1008},"\u002F\u002F This is not allowed!\n",[1002,23493,23494,23496,23499],{"class":1004,"line":1946},[1002,23495,10823],{"class":1026},[1002,23497,23498],{"class":1030},"(User.Admin); ",[1002,23500,23501],{"class":1008},"\u002F\u002F You have to be explicit!\n",[925,23503,23504],{},"Using union type gives you something that works similarly and is much more aligned with TypeScript.",[993,23506,23508],{"className":23397,"code":23507,"language":23399,"meta":998,"style":998},"type User = 'Admin' | 'Client';\n\nfunction login(user: User) {\n API.login();\n}\n\nlogin('Admin');\n",[941,23509,23510,23526,23530,23546,23556,23560,23564],{"__ignoreMap":998},[1002,23511,23512,23514,23516,23518,23520,23522,23524],{"class":1004,"line":1005},[1002,23513,18462],{"class":1015},[1002,23515,12502],{"class":1026},[1002,23517,1023],{"class":1015},[1002,23519,23419],{"class":1034},[1002,23521,17264],{"class":1015},[1002,23523,23431],{"class":1034},[1002,23525,1407],{"class":1030},[1002,23527,23528],{"class":1004,"line":1012},[1002,23529,1051],{"emptyLinePlaceholder":1050},[1002,23531,23532,23534,23536,23538,23540,23542,23544],{"class":1004,"line":1047},[1002,23533,6965],{"class":1015},[1002,23535,23448],{"class":1026},[1002,23537,1031],{"class":1030},[1002,23539,12587],{"class":2378},[1002,23541,1813],{"class":1015},[1002,23543,12502],{"class":1026},[1002,23545,2382],{"class":1030},[1002,23547,23548,23550,23552,23554],{"class":1004,"line":1054},[1002,23549,23463],{"class":1019},[1002,23551,948],{"class":1030},[1002,23553,10823],{"class":1026},[1002,23555,1428],{"class":1030},[1002,23557,23558],{"class":1004,"line":1060},[1002,23559,1170],{"class":1030},[1002,23561,23562],{"class":1004,"line":1272},[1002,23563,1051],{"emptyLinePlaceholder":1050},[1002,23565,23566,23568,23570,23572],{"class":1004,"line":1348},[1002,23567,10823],{"class":1026},[1002,23569,1031],{"class":1030},[1002,23571,23486],{"class":1034},[1002,23573,1085],{"class":1030},[925,23575,23576],{},"The benefits of using a string literal are:",[1530,23578,23579,23582,23585],{},[974,23580,23581],{},"The transpiled code is much smaller compared to an enum (see below)",[974,23583,23584],{},"The same benefits you get from enums are valid for string literals: Type-safety, auto-complete, predictable behaviour",[974,23586,23587],{},"You don’t have to export the enum declaration if it is used in other files.",[925,23589,23590],{},"The code emitted by the TypeScript compiler for an enum:",[993,23592,23594],{"className":23397,"code":23593,"language":23399,"meta":998,"style":998},"'use strict';\nvar User;\n(function (User) {\n User['Admin'] = 'Admin';\n User['Client'] = 'Client';\n})(User || (User = {}));\n",[941,23595,23596,23602,23609,23621,23636,23651],{"__ignoreMap":998},[1002,23597,23598,23600],{"class":1004,"line":1005},[1002,23599,18304],{"class":1034},[1002,23601,1407],{"class":1030},[1002,23603,23604,23606],{"class":1004,"line":1012},[1002,23605,18311],{"class":1015},[1002,23607,23608],{"class":1030}," User;\n",[1002,23610,23611,23613,23615,23617,23619],{"class":1004,"line":1047},[1002,23612,1031],{"class":1030},[1002,23614,6965],{"class":1015},[1002,23616,6513],{"class":1030},[1002,23618,12790],{"class":2378},[1002,23620,2382],{"class":1030},[1002,23622,23623,23626,23628,23630,23632,23634],{"class":1004,"line":1054},[1002,23624,23625],{"class":1030}," User[",[1002,23627,23486],{"class":1034},[1002,23629,18338],{"class":1030},[1002,23631,2393],{"class":1015},[1002,23633,23419],{"class":1034},[1002,23635,1407],{"class":1030},[1002,23637,23638,23640,23643,23645,23647,23649],{"class":1004,"line":1060},[1002,23639,23625],{"class":1030},[1002,23641,23642],{"class":1034},"'Client'",[1002,23644,18338],{"class":1030},[1002,23646,2393],{"class":1015},[1002,23648,23431],{"class":1034},[1002,23650,1407],{"class":1030},[1002,23652,23653,23656,23658,23661,23663],{"class":1004,"line":1272},[1002,23654,23655],{"class":1030},"})(User ",[1002,23657,8392],{"class":1015},[1002,23659,23660],{"class":1030}," (User ",[1002,23662,2393],{"class":1015},[1002,23664,18449],{"class":1030},[953,23666,23668],{"id":23667},"object-const-for-better-naming","Object const for better naming",[925,23670,23671],{},"If you still want to write your code enum-style, with an object and a named identifier, a const object might just give you the desired behaviour and is much closer to JavaScript.",[925,23673,23674],{},"If the values are harder to read or makes no sense, you can use const objects to give meaningful references.",[993,23676,23678],{"className":23397,"code":23677,"language":23399,"meta":998,"style":998},"const User {\n ADMIN: \"Admin\",\n CLIENT: \"Client\",\n} as const;\n\nfunction login(user: User) {\n API.login()\n};\n\nlogin(User.Admin);\n",[941,23679,23680,23688,23700,23712,23725,23729,23745,23755,23759,23763],{"__ignoreMap":998},[1002,23681,23682,23684,23686],{"class":1004,"line":1005},[1002,23683,1016],{"class":1015},[1002,23685,12502],{"class":1019},[1002,23687,1457],{"class":1030},[1002,23689,23690,23693,23695,23698],{"class":1004,"line":1012},[1002,23691,23692],{"class":1026}," ADMIN",[1002,23694,1137],{"class":1030},[1002,23696,23697],{"class":1034},"\"Admin\"",[1002,23699,1143],{"class":1030},[1002,23701,23702,23705,23707,23710],{"class":1004,"line":1047},[1002,23703,23704],{"class":1026}," CLIENT",[1002,23706,1137],{"class":1030},[1002,23708,23709],{"class":1034},"\"Client\"",[1002,23711,1143],{"class":1030},[1002,23713,23714,23717,23720,23723],{"class":1004,"line":1054},[1002,23715,23716],{"class":1030},"} ",[1002,23718,23719],{"class":1015},"as",[1002,23721,23722],{"class":1015}," const",[1002,23724,1407],{"class":1030},[1002,23726,23727],{"class":1004,"line":1060},[1002,23728,1051],{"emptyLinePlaceholder":1050},[1002,23730,23731,23733,23735,23737,23739,23741,23743],{"class":1004,"line":1272},[1002,23732,6965],{"class":1015},[1002,23734,23448],{"class":1026},[1002,23736,1031],{"class":1030},[1002,23738,12587],{"class":2378},[1002,23740,1813],{"class":1015},[1002,23742,12502],{"class":1026},[1002,23744,2382],{"class":1030},[1002,23746,23747,23749,23751,23753],{"class":1004,"line":1348},[1002,23748,23463],{"class":1019},[1002,23750,948],{"class":1030},[1002,23752,10823],{"class":1026},[1002,23754,17202],{"class":1030},[1002,23756,23757],{"class":1004,"line":1354},[1002,23758,1517],{"class":1030},[1002,23760,23761],{"class":1004,"line":1360},[1002,23762,1051],{"emptyLinePlaceholder":1050},[1002,23764,23765,23767],{"class":1004,"line":1366},[1002,23766,10823],{"class":1026},[1002,23768,23769],{"class":1030},"(User.Admin);\n",[953,23771,23773],{"id":23772},"when-to-use-enums","When to use enums",[925,23775,23776],{},"For scenarios where a reference makes sense rather than a value, and it’s used for conditional logic, an enum can be used.",[993,23778,23780],{"className":23397,"code":23779,"language":23399,"meta":998,"style":998},"enum LogLevel {\n ERROR,\n WARN,\n INFO,\n DEBUG,\n}\n\n\u002F**\n * This is equivalent to:\n * type LogLevelStrings = 'ERROR' | 'WARN' | 'INFO' | 'DEBUG';\n *\u002F\ntype LogLevelStrings = keyof typeof LogLevel;\n\nfunction printImportant(key: LogLevelStrings, message: string) {\n const num = LogLevel[key];\n if (num \u003C= LogLevel.WARN) {\n console.log('Log level key is:', key);\n console.log('Log level value is:', num);\n console.log('Log level message is:', message);\n }\n}\n\nprintImportant('ERROR', 'This is a message');\n",[941,23781,23782,23791,23798,23805,23812,23819,23823,23827,23832,23837,23842,23847,23865,23869,23894,23906,23923,23937,23951,23965,23969,23973,23977],{"__ignoreMap":998},[1002,23783,23784,23786,23789],{"class":1004,"line":1005},[1002,23785,17765],{"class":1015},[1002,23787,23788],{"class":1026}," LogLevel",[1002,23790,1457],{"class":1030},[1002,23792,23793,23796],{"class":1004,"line":1012},[1002,23794,23795],{"class":1019}," ERROR",[1002,23797,1143],{"class":1030},[1002,23799,23800,23803],{"class":1004,"line":1047},[1002,23801,23802],{"class":1019}," WARN",[1002,23804,1143],{"class":1030},[1002,23806,23807,23810],{"class":1004,"line":1054},[1002,23808,23809],{"class":1019}," INFO",[1002,23811,1143],{"class":1030},[1002,23813,23814,23817],{"class":1004,"line":1060},[1002,23815,23816],{"class":1019}," DEBUG",[1002,23818,1143],{"class":1030},[1002,23820,23821],{"class":1004,"line":1272},[1002,23822,1170],{"class":1030},[1002,23824,23825],{"class":1004,"line":1348},[1002,23826,1051],{"emptyLinePlaceholder":1050},[1002,23828,23829],{"class":1004,"line":1354},[1002,23830,23831],{"class":1008},"\u002F**\n",[1002,23833,23834],{"class":1004,"line":1360},[1002,23835,23836],{"class":1008}," * This is equivalent to:\n",[1002,23838,23839],{"class":1004,"line":1366},[1002,23840,23841],{"class":1008}," * type LogLevelStrings = 'ERROR' | 'WARN' | 'INFO' | 'DEBUG';\n",[1002,23843,23844],{"class":1004,"line":1946},[1002,23845,23846],{"class":1008}," *\u002F\n",[1002,23848,23849,23851,23854,23856,23859,23862],{"class":1004,"line":1956},[1002,23850,18462],{"class":1015},[1002,23852,23853],{"class":1026}," LogLevelStrings",[1002,23855,1023],{"class":1015},[1002,23857,23858],{"class":1015}," keyof",[1002,23860,23861],{"class":1015}," typeof",[1002,23863,23864],{"class":1030}," LogLevel;\n",[1002,23866,23867],{"class":1004,"line":1961},[1002,23868,1051],{"emptyLinePlaceholder":1050},[1002,23870,23871,23873,23876,23878,23880,23882,23884,23886,23888,23890,23892],{"class":1004,"line":1971},[1002,23872,6965],{"class":1015},[1002,23874,23875],{"class":1026}," printImportant",[1002,23877,1031],{"class":1030},[1002,23879,7857],{"class":2378},[1002,23881,1813],{"class":1015},[1002,23883,23853],{"class":1026},[1002,23885,1251],{"class":1030},[1002,23887,7100],{"class":2378},[1002,23889,1813],{"class":1015},[1002,23891,17261],{"class":1019},[1002,23893,2382],{"class":1030},[1002,23895,23896,23898,23901,23903],{"class":1004,"line":1980},[1002,23897,10423],{"class":1015},[1002,23899,23900],{"class":1019}," num",[1002,23902,1023],{"class":1015},[1002,23904,23905],{"class":1030}," LogLevel[key];\n",[1002,23907,23908,23910,23913,23915,23918,23921],{"class":1004,"line":1985},[1002,23909,19971],{"class":1015},[1002,23911,23912],{"class":1030}," (num ",[1002,23914,6780],{"class":1015},[1002,23916,23917],{"class":1030}," LogLevel.",[1002,23919,23920],{"class":1019},"WARN",[1002,23922,2382],{"class":1030},[1002,23924,23925,23927,23929,23931,23934],{"class":1004,"line":1995},[1002,23926,3030],{"class":1030},[1002,23928,2886],{"class":1026},[1002,23930,1031],{"class":1030},[1002,23932,23933],{"class":1034},"'Log level key is:'",[1002,23935,23936],{"class":1030},", key);\n",[1002,23938,23939,23941,23943,23945,23948],{"class":1004,"line":2006},[1002,23940,3030],{"class":1030},[1002,23942,2886],{"class":1026},[1002,23944,1031],{"class":1030},[1002,23946,23947],{"class":1034},"'Log level value is:'",[1002,23949,23950],{"class":1030},", num);\n",[1002,23952,23953,23955,23957,23959,23962],{"class":1004,"line":2011},[1002,23954,3030],{"class":1030},[1002,23956,2886],{"class":1026},[1002,23958,1031],{"class":1030},[1002,23960,23961],{"class":1034},"'Log level message is:'",[1002,23963,23964],{"class":1030},", message);\n",[1002,23966,23967],{"class":1004,"line":2017},[1002,23968,1269],{"class":1030},[1002,23970,23971],{"class":1004,"line":2022},[1002,23972,1170],{"class":1030},[1002,23974,23975],{"class":1004,"line":2442},[1002,23976,1051],{"emptyLinePlaceholder":1050},[1002,23978,23979,23982,23984,23987,23989,23992],{"class":1004,"line":2466},[1002,23980,23981],{"class":1026},"printImportant",[1002,23983,1031],{"class":1030},[1002,23985,23986],{"class":1034},"'ERROR'",[1002,23988,1251],{"class":1030},[1002,23990,23991],{"class":1034},"'This is a message'",[1002,23993,1085],{"class":1030},[953,23995,1521],{"id":1520},[971,23997,23998,24009,24012],{},[974,23999,24000,24001,24004,24005,24008],{},"Use ",[928,24002,24003],{},"string literal"," over ",[928,24006,24007],{},"string enums"," all the times",[974,24010,24011],{},"If the values in string literals are harder to read or makes no sense, you can use const objects to give meaningful references.",[974,24013,24014,24015,24017],{},"For scenarios where a reference makes sense rather than a value, and it’s used for conditional logic, an ",[928,24016,17765],{}," can be used.",[1579,24019,24020],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":24022},[24023,24024,24025,24026],{"id":23390,"depth":1012,"text":23391},{"id":23667,"depth":1012,"text":23668},{"id":23772,"depth":1012,"text":23773},{"id":1520,"depth":1012,"text":1521},"2021-10-12","\u002Fimages\u002Fblog\u002Ffeatures\u002Ftypescript-enums-vs-string-literals.jpg",{},{"title":861,"description":863},"blog\u002Ftypescript-enums-vs-string-literals",[16,17,807],"h9dAJM-1I_7BoEOwB6deYuCq8zOAghsmz8CiWw7riW8",{"id":24035,"title":364,"author":920,"body":24036,"date":24309,"description":366,"extension":1591,"image":24310,"meta":24311,"navigation":1050,"path":365,"seo":24312,"stem":24313,"tags":24314,"__hash__":24315},"blog\u002Fblog\u002Fhow-to-lint-staged-git-files.md",{"type":922,"value":24037,"toc":24299},[24038,24042,24045,24052,24056,24067,24070,24073,24077,24084,24087,24094,24103,24106,24118,24121,24127,24130,24134,24137,24141,24152,24174,24177,24186,24192,24195,24215,24233,24236,24244,24247,24258,24260,24266,24269,24272,24279,24285,24288,24296],[953,24039,24041],{"id":24040},"why-should-we-use-linting","Why should we use Linting?",[925,24043,24044],{},"Time spent on quality assurance and control can be reduced with automated linting. It also makes sure developers of the code's conformity to your coding standards.",[7100,24046,24049],{"title":24047,"type":24048},"Montitoring for coding errors","info",[925,24050,24051],{},"A common approach is to have the linting tool running in watch mode within a terminal to monitor and report errors whenever you save a file",[953,24053,24055],{"id":24054},"the-problem-with-watch-mode","The Problem With Watch mode",[925,24057,24058,24059,24062,24063,24066],{},"Popular linting tools include ",[941,24060,24061],{},"ESLint"," for JavaScript\u002FTypeScript and ",[941,24064,24065],{},"stylelint"," for CSS\u002FSCSS\u002FSass\u002FLess\u002FSugarSS. Running Lint with watch mode tends to be distracting, with your attention switching back-and-forth between the terminal and code editor.",[925,24068,24069],{},"Ideally, you should run the linter after you finish coding, but you may forget to run the linter and immediately commit your changes.",[925,24071,24072],{},"So there should ideally be an automated solution that hooks into your Git commit lifecycle.",[953,24074,24076],{"id":24075},"lint-staged-for-linting","lint-staged For Linting",[925,24078,24079,24080,24083],{},"With lint-staged, ",[941,24081,24082],{},"git commit"," command automatically runs the linter against files staged for commit, letting you continue working on the application code without any interruptions.",[925,24085,24086],{},"Once you are done with the code, you stage the modified files and run the linter before committing the changes.",[925,24088,24089,24090,24093],{},"You configure lint-staged to run a specific linter command against files that match a glob pattern. For JavaScript files (",[928,24091,24092],{},".js), ESLint is the linter to run against those files. For CSS files (",".css), stylelint is the appropriate linter to run against those files.",[993,24095,24097],{"className":1724,"code":24096,"language":1726,"meta":998,"style":998},"git commit\n",[941,24098,24099],{"__ignoreMap":998},[1002,24100,24101],{"class":1004,"line":1005},[1002,24102,24096],{},[925,24104,24105],{},"If any files fail to pass, then they are not committed to the remote repository. Before the files can be committed, you must first resolve the errors raised by the linter. For projects with many contributors, linting enforces the project's coding conventions despite each contributor having their own set of opinions and conventions.",[953,24107,24109,24110,24113,24114,24117],{"id":24108},"why-lint-staged-is-different-from-pre-commit-and-husky","Why lint-staged is different from ",[1107,24111,24112],{},"pre-commit"," And ",[1107,24115,24116],{},"Husky","?",[925,24119,24120],{},"Unlike lint-staged, the closely-related tools pre-commit and Husky lint all files, not just staged files. As your project grows, linting files that have not been modified becomes inefficient. It increases development time from all the redundant linting.",[7100,24122,24124],{"title":24123,"type":24048},"Husky vs pre-commit vs lint-staged",[925,24125,24126],{},"Husky supports all Git hooks, whereas pre-commit and lint-staged support only the pre-commit Git hook. Nevertheless, each library allows you to run any number of custom scripts, defined in package.json, when a hook is invoked. Git hooks, such as pre-commit, are invoked by an event such as executing the git commit command.",[925,24128,24129],{},"lint-staged uses Husky under-the-hood.",[953,24131,24133],{"id":24132},"add-lint-staged-to-your-project","Add lint-staged to your project",[925,24135,24136],{},"Now let's see a practical example of how to integrate lint-staged into your project.",[1655,24138,24140],{"id":24139},"install-lint-staged","Install lint-staged",[925,24142,24143,24144,1251,24146,16529,24148,24151],{},"To get started, check that your project already has ",[928,24145,24061],{},[928,24147,24065],{},[928,24149,24150],{},"Prettier"," configured (either via a .xxxrc configuration file or a key inside package.json). Otherwise, the following error message is shown during the installation of lint-staged.",[993,24153,24157],{"className":24154,"code":24155,"language":24156,"meta":998,"style":998},"language-sh-pre shiki shiki-themes github-light github-dark","Cannot add lint-staged: only eslint, \\\nstylelint, prettier or custom rules \\\nare supported.\n","sh-pre",[941,24158,24159,24164,24169],{"__ignoreMap":998},[1002,24160,24161],{"class":1004,"line":1005},[1002,24162,24163],{},"Cannot add lint-staged: only eslint, \\\n",[1002,24165,24166],{"class":1004,"line":1012},[1002,24167,24168],{},"stylelint, prettier or custom rules \\\n",[1002,24170,24171],{"class":1004,"line":1047},[1002,24172,24173],{},"are supported.\n",[925,24175,24176],{},"To install lint-staged, run the following command within the root directory of your project:",[993,24178,24180],{"className":1724,"code":24179,"language":1726,"meta":998,"style":998},"npx mrm@2 lint-staged\n",[941,24181,24182],{"__ignoreMap":998},[1002,24183,24184],{"class":1004,"line":1005},[1002,24185,24179],{},[925,24187,24188,24191],{},[928,24189,24190],{},"mrm"," is a command line tool for automating and managing project configurations.",[925,24193,24194],{},"If you are prompted with the following message, then press y to proceed with the installation:",[993,24196,24198],{"className":24154,"code":24197,"language":24156,"meta":998,"style":998},"Need to install the following packages:\n mrm@2\nOk to proceed? (y)\n",[941,24199,24200,24205,24210],{"__ignoreMap":998},[1002,24201,24202],{"class":1004,"line":1005},[1002,24203,24204],{},"Need to install the following packages:\n",[1002,24206,24207],{"class":1004,"line":1012},[1002,24208,24209],{}," mrm@2\n",[1002,24211,24212],{"class":1004,"line":1047},[1002,24213,24214],{},"Ok to proceed? (y)\n",[925,24216,24217,24218,24221,24222,24224,24225,24228,24229,24232],{},"This command creates a ",[941,24219,24220],{},".\u002Fhusky"," directory.\nAdds the husky and lint-staged packages to ",[941,24223,1102],{}," as dev dependencies.\nAdds a lint-staged property to package.json.\nIf lint-staged finds a ",[941,24226,24227],{},".eslintrc.js"," configuration file, then a ",[941,24230,24231],{},"*.js"," property is added to the lint-staged object.",[925,24234,24235],{},"Here's what this looks like in the package.json file.",[993,24237,24242],{"className":24238,"code":24240,"language":24241},[24239],"language-text","{\n \"lint-staged\": {\n \"*.js\": \"eslint --cache --fix\"\n }\n}\n","text",[941,24243,24240],{"__ignoreMap":998},[925,24245,24246],{},"Anytime a JavaScript file is staged for commit, lint-staged runs the ESLint linter with the --cache and --fix flags:",[925,24248,24249,24250,24253,24254,24257],{},"the ",[928,24251,24252],{},"--cache"," flag tells ESLint to only check changed files\nthe ",[928,24255,24256],{},"--fix"," flag tells ESLint to automatically fix problems when possible.\nIf lint-staged finds a .prettierrc configuration file, then a *.{js,css,md} property is added to the lint-staged object.",[925,24259,24235],{},[993,24261,24264],{"className":24262,"code":24263,"language":24241},[24239],"{\n \"lint-staged\": {\n \"*.{js,css,md}\": \"prettier --write\"\n }\n}\n",[941,24265,24263],{"__ignoreMap":998},[925,24267,24268],{},"Anytime a JavaScript, CSS or Markdown file is staged for commit, lint-staged runs Prettier to properly format the contents of the file. This ensures the files are formatted even if a contributor does not have the Prettier plugin installed in their IDE to automatically format the files when saved.",[925,24270,24271],{},"Adding Testing And Other Scripts\nSuppose you want the staged JavaScript files to pass unit tests written with the Jest testing framework. Adding a new script is relatively straight-forward. Update the value of the *.js key to an array that contains a list of scripts to run against the staged JavaScript files.",[925,24273,24274,24275,24278],{},"As an example, suppose we want to run Jest tests with the jest ",[928,24276,24277],{},"--passWithNoTests"," command. The --passWithNoTests option allows the test suite to pass even if there are no test files present and you plan to add unit tests in the future.",[993,24280,24283],{"className":24281,"code":24282,"language":24241},[24239],"{\n \"lint-staged\": {\n \"*.js\": [\n \"eslint --cache --fix\",\n \"jest --passWithNoTests\"\n ]\n }\n}\n",[941,24284,24282],{"__ignoreMap":998},[925,24286,24287],{},"These scripts run in sequence from the first listed item to the last listed item. If a single command fails, then the entire commit is rejected.",[925,24289,24290,24291,948],{},"To dive more into linting, check out the ",[933,24292,24295],{"href":24293,"rel":24294},"https:\u002F\u002Fgithub.com\u002Fokonet\u002Flint-staged",[937],"lint-staged Documentation",[1579,24297,24298],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":24300},[24301,24302,24303,24304,24306],{"id":24040,"depth":1012,"text":24041},{"id":24054,"depth":1012,"text":24055},{"id":24075,"depth":1012,"text":24076},{"id":24108,"depth":1012,"text":24305},"Why lint-staged is different from pre-commit And Husky?",{"id":24132,"depth":1012,"text":24133,"children":24307},[24308],{"id":24139,"depth":1047,"text":24140},"2021-08-04","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhow-to-lint-staged-git-files.jpg",{},{"title":364,"description":366},"blog\u002Fhow-to-lint-staged-git-files",[16,17],"ZkjqQsQMBM-WnFvyp88rAI_kpS_xL0MWkAhruHwGzSM",{"id":24317,"title":574,"author":920,"body":24318,"date":25180,"description":576,"extension":1591,"image":25181,"meta":25182,"navigation":1050,"path":575,"seo":25183,"stem":25184,"tags":25185,"__hash__":25186},"blog\u002Fblog\u002Fnextjs-client-side-server-side-and-static-rendering.md",{"type":922,"value":24319,"toc":25168},[24320,24323,24327,24330,24333,24336,24338,24341,24349,24352,24355,24358,24368,24371,24380,24384,24387,24390,24398,24404,24411,24415,24421,24427,24430,24544,24547,24555,24558,24566,24569,24572,24575,24578,24639,24644,24657,24660,24663,24669,24675,24678,24946,24948,24953,24955,24960,24963,24966,24968,24973,24975,24980,24991,24996,25000,25006,25012,25015,25165],[925,24321,24322],{},"In this article, we are going to discuss building static & server-side rendering apps with NextJS, a server-side rendering React framework.",[953,24324,24326],{"id":24325},"what-is-static-rendering-server-side-rendering","What is Static Rendering & Server-Side Rendering",[1655,24328,14905],{"id":24329},"server-rendering-ssr",[925,24331,24332],{},"In response to each request, renders the app on the server, and then sends the rendered HTML and Javascript back to the client.",[1655,24334,14913],{"id":24335},"client-side-rendering-csr",[925,24337,14916],{},[1655,24339,14921],{"id":24340},"static-rendering-sr",[925,24342,24343,24344,16529,24346,24348],{},"Usually generating a static HTML page for every URL. Pre-built app, or renders the app at build time (e.g. when you run the ",[941,24345,14927],{},[941,24347,14931],{}," command).\nThis is the default approach of NextJS.",[953,24350,24351],{"id":425},"NextJS",[925,24353,24354],{},"In NextJS, there are three main functions that are used for SSR and SR, and a hook that for client-side data fetching.",[925,24356,24357],{},"Built time:",[925,24359,24360,24363,24364,24367],{},[1107,24361,24362],{},"getStaticProps"," — fetches data at build time\n",[1107,24365,24366],{},"getStaticPaths"," — pre-render dynamic routes at build time",[925,24369,24370],{},"Run time:",[925,24372,24373,24375,24376,24379],{},[1107,24374,15139],{}," — fetches data on each request\n",[1107,24377,24378],{},"SWR"," — fetches data on the client-side at run time",[1655,24381,24383],{"id":24382},"server-side-rendering-ssr","Server-Side Rendering (SSR)",[925,24385,24386],{},"The HTML is generated on the server on each request for the page — the HTML is 'dynamic' rather than 'static' as it will depend on the data required.",[925,24388,24389],{},"Each time a client requests the page, the server will fetch the data for that page, and generate the page's HTML using the data.",[925,24391,24392,24393,2034,24395],{},"Next.js offers two data fetching methods for SSR — ",[1107,24394,15139],{},[1107,24396,24397],{},"getInitialProp",[925,24399,24400],{},[963,24401],{"alt":24402,"src":24403},"Rendering web","\u002Fimages\u002Fblog\u002F2021-02-02-nextjs-client-side-server-side-and-static-rendering\u002Frendering-web.png",[925,24405,24406,24407,24004,24409,948],{},"In order to prevent the situation where data fetching can happen on both server and client-side, it is preferred to use ",[1107,24408,15139],{},[1107,24410,24397],{},[24412,24413,15139],"h4",{"id":24414},"getserversideprops",[925,24416,24417,24418,24420],{},"NextJS will render pages using the ",[1107,24419,15139],{}," function on each request and will use the data returned by the function to populate the components props.",[7100,24422,24424],{"title":24423,"type":24048},"Non build time API calls",[925,24425,24426],{},"You should only use getServerSideProps if you can’t access the data needed for the page at build time. i.e. the request has some piece of information that you need to fetch the required data or to render the page.",[925,24428,24429],{},"Note that getServerSideProps ONLY runs on the Server, and is never downloaded to or run in the Client.",[993,24431,24433],{"className":995,"code":24432,"language":997,"meta":998,"style":998},"const Page = ({ data }) => \u003Cdiv>{data}\u003C\u002Fdiv>;\n\nexport const getServerSideProps = async () => {\n const res = await fetch('https:\u002F\u002Fpath\u002Fto\u002Fyour\u002Fapi');\n const data = await res.json();\n return { props: { data } };\n};\nexport default Page;\n",[941,24434,24435,24465,24469,24487,24507,24524,24531,24535],{"__ignoreMap":998},[1002,24436,24437,24439,24442,24444,24447,24449,24452,24454,24456,24458,24461,24463],{"class":1004,"line":1005},[1002,24438,1016],{"class":1015},[1002,24440,24441],{"class":1026}," Page",[1002,24443,1023],{"class":1015},[1002,24445,24446],{"class":1030}," ({ ",[1002,24448,16648],{"class":2378},[1002,24450,24451],{"class":1030}," }) ",[1002,24453,15497],{"class":1015},[1002,24455,20660],{"class":1030},[1002,24457,19650],{"class":15711},[1002,24459,24460],{"class":1030},">{data}\u003C\u002F",[1002,24462,19650],{"class":15711},[1002,24464,21772],{"class":1030},[1002,24466,24467],{"class":1004,"line":1012},[1002,24468,1051],{"emptyLinePlaceholder":1050},[1002,24470,24471,24473,24475,24477,24479,24481,24483,24485],{"class":1004,"line":1047},[1002,24472,947],{"class":1015},[1002,24474,23722],{"class":1015},[1002,24476,14975],{"class":1026},[1002,24478,1023],{"class":1015},[1002,24480,14970],{"class":1015},[1002,24482,17297],{"class":1030},[1002,24484,15497],{"class":1015},[1002,24486,1457],{"class":1030},[1002,24488,24489,24491,24494,24496,24498,24500,24502,24505],{"class":1004,"line":1054},[1002,24490,10423],{"class":1015},[1002,24492,24493],{"class":1019}," res",[1002,24495,1023],{"class":1015},[1002,24497,15047],{"class":1015},[1002,24499,15050],{"class":1026},[1002,24501,1031],{"class":1030},[1002,24503,24504],{"class":1034},"'https:\u002F\u002Fpath\u002Fto\u002Fyour\u002Fapi'",[1002,24506,1085],{"class":1030},[1002,24508,24509,24511,24513,24515,24517,24520,24522],{"class":1004,"line":1060},[1002,24510,10423],{"class":1015},[1002,24512,16556],{"class":1019},[1002,24514,1023],{"class":1015},[1002,24516,15047],{"class":1015},[1002,24518,24519],{"class":1030}," res.",[1002,24521,1122],{"class":1026},[1002,24523,1428],{"class":1030},[1002,24525,24526,24528],{"class":1004,"line":1272},[1002,24527,15066],{"class":1015},[1002,24529,24530],{"class":1030}," { props: { data } };\n",[1002,24532,24533],{"class":1004,"line":1348},[1002,24534,1517],{"class":1030},[1002,24536,24537,24539,24541],{"class":1004,"line":1354},[1002,24538,947],{"class":1015},[1002,24540,15641],{"class":1015},[1002,24542,24543],{"class":1030}," Page;\n",[925,24545,24546],{},"Pros",[1530,24548,24549,24552],{},[974,24550,24551],{},"Rendered page will always be up-to-date",[974,24553,24554],{},"Can handle dynamic routes on the fly",[925,24556,24557],{},"Cons",[1530,24559,24560,24563],{},[974,24561,24562],{},"Not possible to be cached by a CDN",[974,24564,24565],{},"Can be slow if there is heavy processing to do since the client has to wait for each page after it makes a request",[1655,24567,14921],{"id":24568},"static-rendering-sr-1",[925,24570,24571],{},"Renders the app at build time (e.g. when you run the npm run build command). Generally involves generating a static HTML page for every URL. This is NextJS’s default approach.",[24412,24573,24362],{"id":24574},"getstaticprops",[925,24576,24577],{},"Next.JS pre-renders each page at build time and uses the props returned by getStaticProps to hydrate the page with data.",[993,24579,24581],{"className":995,"code":24580,"language":997,"meta":998,"style":998},"const App = ({ data }) => \u003Cp>{data}\u003C\u002Fp>;\n\nexport const getStaticProps = async () => ({ props: { data: 'Hello world' } });\n",[941,24582,24583,24609,24613],{"__ignoreMap":998},[1002,24584,24585,24587,24589,24591,24593,24595,24597,24599,24601,24603,24605,24607],{"class":1004,"line":1005},[1002,24586,1016],{"class":1015},[1002,24588,19566],{"class":1026},[1002,24590,1023],{"class":1015},[1002,24592,24446],{"class":1030},[1002,24594,16648],{"class":2378},[1002,24596,24451],{"class":1030},[1002,24598,15497],{"class":1015},[1002,24600,20660],{"class":1030},[1002,24602,925],{"class":15711},[1002,24604,24460],{"class":1030},[1002,24606,925],{"class":15711},[1002,24608,21772],{"class":1030},[1002,24610,24611],{"class":1004,"line":1012},[1002,24612,1051],{"emptyLinePlaceholder":1050},[1002,24614,24615,24617,24619,24622,24624,24626,24628,24630,24633,24636],{"class":1004,"line":1047},[1002,24616,947],{"class":1015},[1002,24618,23722],{"class":1015},[1002,24620,24621],{"class":1026}," getStaticProps",[1002,24623,1023],{"class":1015},[1002,24625,14970],{"class":1015},[1002,24627,17297],{"class":1030},[1002,24629,15497],{"class":1015},[1002,24631,24632],{"class":1030}," ({ props: { data: ",[1002,24634,24635],{"class":1034},"'Hello world'",[1002,24637,24638],{"class":1030}," } });\n",[925,24640,24641,24642,1813],{},"A few things about ",[1107,24643,24362],{},[1530,24645,24646,24649,24652],{},[974,24647,24648],{},"Since it executes at build time, it does not receive data from any request that gets made at run time. This includes things like HTTP headers, query params etc",[974,24650,24651],{},"It ONLY runs on the Server, meaning that you can write server code here and it won’t be downloaded to or run on the Client, e.g. API calls, database calls, requests, etc",[974,24653,24654,24655,948],{},"You don’t need to make local API calls, as it only runs on the Server, (e.g. \u002Fpages\u002Fapi). Just write the server code directly inside of ",[1107,24656,24362],{},[24412,24658,24366],{"id":24659},"getstaticpaths",[925,24661,24662],{},"This function allows you to make a list of dynamic routes that you expect to need later on, and then render them at build time (i.e. when you run npm run build in your terminal window).\nYou define them by returning an object with the key of paths (required).",[925,24664,24665,24666,24668],{},"The returned object also has a key called ",[1107,24667,22393],{}," (required) which dictates this behavior.",[925,24670,24671,24672,24674],{},"If you set the ",[1107,24673,22393],{}," key to false, then all non-defined routes 404 out.",[925,24676,24677],{},"If you set the fallback key to true, then when a User requests a non-defined page, NextJS throws up fallback HTML that you have defined in the same file\n(you just detect the fallback by using if (router.isFallback)) and in the background Next goes and fully generates the page being requested using the URL\nthat the User entered, and then swaps it out for the fallback HTML.",[993,24679,24681],{"className":995,"code":24680,"language":997,"meta":998,"style":998},"import { useRouter } from 'next\u002Frouter';\n\nconst Post = ({ post }) => {\n const router = useRouter();\n\n if (router.isFallback) {\n return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n }\n\n return \u003Cdiv>{...post}\u003C\u002Fdiv>;\n};\n\nexport async function getStaticPaths() {\n return {\n paths: [{ params: { id: '1' } }, { params: { id: '2' } }],\n fallback: true,\n };\n}\n\nexport async function getStaticProps({ params }) {\n \u002F\u002F if url was \u002Fposts\u002F2, params.id will be 2\n const res = await fetch(`https:\u002F\u002Fpath\u002Fto\u002Fyour\u002Fapi\u002F${params.id}`);\n const post = await res.json();\n\n return { props: { post } };\n}\n\nexport default Post;\n",[941,24682,24683,24697,24701,24720,24734,24738,24745,24760,24764,24768,24788,24792,24796,24809,24815,24831,24840,24844,24848,24852,24869,24874,24901,24918,24922,24929,24933,24937],{"__ignoreMap":998},[1002,24684,24685,24687,24690,24692,24695],{"class":1004,"line":1005},[1002,24686,943],{"class":1015},[1002,24688,24689],{"class":1030}," { useRouter } ",[1002,24691,1068],{"class":1015},[1002,24693,24694],{"class":1034}," 'next\u002Frouter'",[1002,24696,1407],{"class":1030},[1002,24698,24699],{"class":1004,"line":1012},[1002,24700,1051],{"emptyLinePlaceholder":1050},[1002,24702,24703,24705,24707,24709,24711,24714,24716,24718],{"class":1004,"line":1047},[1002,24704,1016],{"class":1015},[1002,24706,15646],{"class":1026},[1002,24708,1023],{"class":1015},[1002,24710,24446],{"class":1030},[1002,24712,24713],{"class":2378},"post",[1002,24715,24451],{"class":1030},[1002,24717,15497],{"class":1015},[1002,24719,1457],{"class":1030},[1002,24721,24722,24724,24727,24729,24732],{"class":1004,"line":1054},[1002,24723,10423],{"class":1015},[1002,24725,24726],{"class":1019}," router",[1002,24728,1023],{"class":1015},[1002,24730,24731],{"class":1026}," useRouter",[1002,24733,1428],{"class":1030},[1002,24735,24736],{"class":1004,"line":1060},[1002,24737,1051],{"emptyLinePlaceholder":1050},[1002,24739,24740,24742],{"class":1004,"line":1272},[1002,24741,19971],{"class":1015},[1002,24743,24744],{"class":1030}," (router.isFallback) {\n",[1002,24746,24747,24749,24751,24753,24756,24758],{"class":1004,"line":1348},[1002,24748,2687],{"class":1015},[1002,24750,20660],{"class":1030},[1002,24752,19650],{"class":15711},[1002,24754,24755],{"class":1030},">Loading...\u003C\u002F",[1002,24757,19650],{"class":15711},[1002,24759,21772],{"class":1030},[1002,24761,24762],{"class":1004,"line":1354},[1002,24763,1269],{"class":1030},[1002,24765,24766],{"class":1004,"line":1360},[1002,24767,1051],{"emptyLinePlaceholder":1050},[1002,24769,24770,24772,24774,24776,24779,24781,24784,24786],{"class":1004,"line":1366},[1002,24771,15066],{"class":1015},[1002,24773,20660],{"class":1030},[1002,24775,19650],{"class":15711},[1002,24777,24778],{"class":1030},">{",[1002,24780,17625],{"class":1015},[1002,24782,24783],{"class":1030},"post}\u003C\u002F",[1002,24785,19650],{"class":15711},[1002,24787,21772],{"class":1030},[1002,24789,24790],{"class":1004,"line":1946},[1002,24791,1517],{"class":1030},[1002,24793,24794],{"class":1004,"line":1956},[1002,24795,1051],{"emptyLinePlaceholder":1050},[1002,24797,24798,24800,24802,24804,24807],{"class":1004,"line":1961},[1002,24799,947],{"class":1015},[1002,24801,14970],{"class":1015},[1002,24803,8457],{"class":1015},[1002,24805,24806],{"class":1026}," getStaticPaths",[1002,24808,3025],{"class":1030},[1002,24810,24811,24813],{"class":1004,"line":1971},[1002,24812,15066],{"class":1015},[1002,24814,1457],{"class":1030},[1002,24816,24817,24820,24822,24825,24828],{"class":1004,"line":1980},[1002,24818,24819],{"class":1030}," paths: [{ params: { id: ",[1002,24821,21442],{"class":1034},[1002,24823,24824],{"class":1030}," } }, { params: { id: ",[1002,24826,24827],{"class":1034},"'2'",[1002,24829,24830],{"class":1030}," } }],\n",[1002,24832,24833,24836,24838],{"class":1004,"line":1985},[1002,24834,24835],{"class":1030}," fallback: ",[1002,24837,17397],{"class":1019},[1002,24839,1143],{"class":1030},[1002,24841,24842],{"class":1004,"line":1995},[1002,24843,15113],{"class":1030},[1002,24845,24846],{"class":1004,"line":2006},[1002,24847,1170],{"class":1030},[1002,24849,24850],{"class":1004,"line":2011},[1002,24851,1051],{"emptyLinePlaceholder":1050},[1002,24853,24854,24856,24858,24860,24862,24864,24867],{"class":1004,"line":2017},[1002,24855,947],{"class":1015},[1002,24857,14970],{"class":1015},[1002,24859,8457],{"class":1015},[1002,24861,24621],{"class":1026},[1002,24863,9219],{"class":1030},[1002,24865,24866],{"class":2378},"params",[1002,24868,9225],{"class":1030},[1002,24870,24871],{"class":1004,"line":2022},[1002,24872,24873],{"class":1008}," \u002F\u002F if url was \u002Fposts\u002F2, params.id will be 2\n",[1002,24875,24876,24878,24880,24882,24884,24886,24888,24891,24893,24895,24897,24899],{"class":1004,"line":2442},[1002,24877,10423],{"class":1015},[1002,24879,24493],{"class":1019},[1002,24881,1023],{"class":1015},[1002,24883,15047],{"class":1015},[1002,24885,15050],{"class":1026},[1002,24887,1031],{"class":1030},[1002,24889,24890],{"class":1034},"`https:\u002F\u002Fpath\u002Fto\u002Fyour\u002Fapi\u002F${",[1002,24892,24866],{"class":1030},[1002,24894,948],{"class":1034},[1002,24896,19767],{"class":1030},[1002,24898,3507],{"class":1034},[1002,24900,1085],{"class":1030},[1002,24902,24903,24905,24908,24910,24912,24914,24916],{"class":1004,"line":2466},[1002,24904,10423],{"class":1015},[1002,24906,24907],{"class":1019}," post",[1002,24909,1023],{"class":1015},[1002,24911,15047],{"class":1015},[1002,24913,24519],{"class":1030},[1002,24915,1122],{"class":1026},[1002,24917,1428],{"class":1030},[1002,24919,24920],{"class":1004,"line":2471},[1002,24921,1051],{"emptyLinePlaceholder":1050},[1002,24923,24924,24926],{"class":1004,"line":2476},[1002,24925,15066],{"class":1015},[1002,24927,24928],{"class":1030}," { props: { post } };\n",[1002,24930,24931],{"class":1004,"line":2481},[1002,24932,1170],{"class":1030},[1002,24934,24935],{"class":1004,"line":2491},[1002,24936,1051],{"emptyLinePlaceholder":1050},[1002,24938,24939,24941,24943],{"class":1004,"line":2502},[1002,24940,947],{"class":1015},[1002,24942,15641],{"class":1015},[1002,24944,24945],{"class":1030}," Post;\n",[925,24947,24546],{},[1530,24949,24950],{},[974,24951,24952],{},"Consistently very fast and performant",[925,24954,24557],{},[1530,24956,24957],{},[974,24958,24959],{},"Cannot handle dynamic routes if you don’t know all the URL’s ahead of (build) time",[1655,24961,14913],{"id":24962},"client-side-rendering-csr-1",[925,24964,24965],{},"Renders the app on the Client in the browser at run time.",[925,24967,24546],{},[1530,24969,24970],{},[974,24971,24972],{},"Nothing that stands out over the other options",[925,24974,24557],{},[1530,24976,24977],{},[974,24978,24979],{},"Slows down as the application grows, and should generally be avoided",[7100,24981,24983],{"title":24982,"type":24048},"SSR, SR, and CSR",[925,24984,24985,24986,24988,24989,948],{},"NextJS on server-side, will render as much HTML with data as it can at build time with ",[941,24987,24362],{},", and then if it needs data later on, it will run ",[941,24990,15139],{},[925,24992,24993,24994,948],{},"If you need to fetch data on the client-side, you can use ",[941,24995,24378],{},[24412,24997,24999],{"id":24998},"the-swr-hook","The SWR Hook",[925,25001,25002,25003,948],{},"Client-side rendering is something that should avoid when possible. But when it is required, you can call the SWR hook, to be called at runtime. It stand for ",[1107,25004,25005],{},"Stale While Revalidate",[7100,25007,25009],{"title":25008,"type":24048},"Stale While Revalidate (SWR)",[925,25010,25011],{},"This is the name of a HTTP cache invalidation strategy.",[925,25013,25014],{},"Here's an example on how to use SWR.",[993,25016,25018],{"className":2227,"code":25017,"language":2229,"meta":998,"style":998},"import useSWR from 'swr';\n\nconst Post = () => {\n const { data, error } = useSWR('\u002Fapi\u002Fpost\u002F123', fetch);\n\n if (error) {\n return \u003Cdiv>Error loading post!\u003C\u002Fdiv>;\n }\n\n if (!data) {\n return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n }\n\n return \u003Cdiv>{data}\u003C\u002Fdiv>;\n};\n",[941,25019,25020,25034,25038,25052,25080,25084,25091,25106,25110,25114,25125,25139,25143,25147,25161],{"__ignoreMap":998},[1002,25021,25022,25024,25027,25029,25032],{"class":1004,"line":1005},[1002,25023,943],{"class":1015},[1002,25025,25026],{"class":1030}," useSWR ",[1002,25028,1068],{"class":1015},[1002,25030,25031],{"class":1034}," 'swr'",[1002,25033,1407],{"class":1030},[1002,25035,25036],{"class":1004,"line":1012},[1002,25037,1051],{"emptyLinePlaceholder":1050},[1002,25039,25040,25042,25044,25046,25048,25050],{"class":1004,"line":1047},[1002,25041,1016],{"class":1015},[1002,25043,15646],{"class":1026},[1002,25045,1023],{"class":1015},[1002,25047,17297],{"class":1030},[1002,25049,15497],{"class":1015},[1002,25051,1457],{"class":1030},[1002,25053,25054,25056,25058,25060,25062,25065,25067,25069,25072,25074,25077],{"class":1004,"line":1054},[1002,25055,10423],{"class":1015},[1002,25057,15026],{"class":1030},[1002,25059,16648],{"class":1019},[1002,25061,1251],{"class":1030},[1002,25063,25064],{"class":1019},"error",[1002,25066,15042],{"class":1030},[1002,25068,2393],{"class":1015},[1002,25070,25071],{"class":1026}," useSWR",[1002,25073,1031],{"class":1030},[1002,25075,25076],{"class":1034},"'\u002Fapi\u002Fpost\u002F123'",[1002,25078,25079],{"class":1030},", fetch);\n",[1002,25081,25082],{"class":1004,"line":1060},[1002,25083,1051],{"emptyLinePlaceholder":1050},[1002,25085,25086,25088],{"class":1004,"line":1272},[1002,25087,19971],{"class":1015},[1002,25089,25090],{"class":1030}," (error) {\n",[1002,25092,25093,25095,25097,25099,25102,25104],{"class":1004,"line":1348},[1002,25094,2687],{"class":1015},[1002,25096,20660],{"class":1030},[1002,25098,19650],{"class":15711},[1002,25100,25101],{"class":1030},">Error loading post!\u003C\u002F",[1002,25103,19650],{"class":15711},[1002,25105,21772],{"class":1030},[1002,25107,25108],{"class":1004,"line":1354},[1002,25109,1269],{"class":1030},[1002,25111,25112],{"class":1004,"line":1360},[1002,25113,1051],{"emptyLinePlaceholder":1050},[1002,25115,25116,25118,25120,25122],{"class":1004,"line":1366},[1002,25117,19971],{"class":1015},[1002,25119,6513],{"class":1030},[1002,25121,13559],{"class":1015},[1002,25123,25124],{"class":1030},"data) {\n",[1002,25126,25127,25129,25131,25133,25135,25137],{"class":1004,"line":1946},[1002,25128,2687],{"class":1015},[1002,25130,20660],{"class":1030},[1002,25132,19650],{"class":15711},[1002,25134,24755],{"class":1030},[1002,25136,19650],{"class":15711},[1002,25138,21772],{"class":1030},[1002,25140,25141],{"class":1004,"line":1956},[1002,25142,1269],{"class":1030},[1002,25144,25145],{"class":1004,"line":1961},[1002,25146,1051],{"emptyLinePlaceholder":1050},[1002,25148,25149,25151,25153,25155,25157,25159],{"class":1004,"line":1971},[1002,25150,15066],{"class":1015},[1002,25152,20660],{"class":1030},[1002,25154,19650],{"class":15711},[1002,25156,24460],{"class":1030},[1002,25158,19650],{"class":15711},[1002,25160,21772],{"class":1030},[1002,25162,25163],{"class":1004,"line":1980},[1002,25164,1517],{"class":1030},[1579,25166,25167],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":25169},[25170,25175],{"id":24325,"depth":1012,"text":24326,"children":25171},[25172,25173,25174],{"id":24329,"depth":1047,"text":14905},{"id":24335,"depth":1047,"text":14913},{"id":24340,"depth":1047,"text":14921},{"id":425,"depth":1012,"text":24351,"children":25176},[25177,25178,25179],{"id":24382,"depth":1047,"text":24383},{"id":24568,"depth":1047,"text":14921},{"id":24962,"depth":1047,"text":14913},"2021-02-02","\u002Fimages\u002Fblog\u002Ffeatures\u002Fnextjs-client-side-server-side-and-static-rendering.jpg",{},{"title":574,"description":576},"blog\u002Fnextjs-client-side-server-side-and-static-rendering",[16,17,425,578],"hGsk532gAFVr1x6_NeT0IHZXyrl6giHADJ4AaRJBS68",{"id":25188,"title":186,"author":920,"body":25189,"date":26580,"description":188,"extension":1591,"image":26581,"meta":26582,"navigation":1050,"path":187,"seo":26583,"stem":26584,"tags":26585,"__hash__":26586},"blog\u002Fblog\u002Fes2020-new-features.md",{"type":922,"value":25190,"toc":26571},[25191,25194,25211,25214,25221,25224,25313,25316,25429,25432,25435,25505,25508,25514,25517,25520,25535,25538,25542,25545,25713,25716,25727,25730,25763,25766,25769,26050,26056,26059,26140,26143,26146,26152,26155,26158,26284,26287,26290,26384,26387,26390,26558,26562,26565,26568],[925,25192,25193],{},"In this article, I will discuss my favorite new features from ES2020 as listed below:",[1530,25195,25196,25199,25202,25205,25208],{},[974,25197,25198],{},"BigInt",[974,25200,25201],{},"Dynamic Imports",[974,25203,25204],{},"globalThis",[974,25206,25207],{},"Nullish Coalescing Operator",[974,25209,25210],{},"Optional Chaining",[953,25212,25198],{"id":25213},"bigint",[925,25215,25216,25217,25220],{},"BigInt is a new numeric primitive in JavaScript that allows us to safely ",[928,25218,25219],{},"store and operate on large integers",", even beyond the safe integer limit for Numbers.",[925,25222,25223],{},"This opens up countless new opportunities for mathematical operations. The variables can now represent numbers²⁵³ and not just max out at 9007199254740992.",[993,25225,25227],{"className":995,"code":25226,"language":997,"meta":998,"style":998},"let maxNumber = Number.MAX_SAFE_INTEGER;\nconsole.log(maxNumber); \u002F\u002F 9007199254740991\n\nmaxNumber = ++maxNumber;\nconsole.log(maxNumber); \u002F\u002F 9007199254740992\n\n\u002F\u002F Even though we are incrementing the number, variable value stays same\nmaxNumber = maxNumber++;\nconsole.log(maxNumber); \u002F\u002F 9007199254740992\n",[941,25228,25229,25241,25253,25257,25270,25281,25285,25290,25303],{"__ignoreMap":998},[1002,25230,25231,25233,25236,25238],{"class":1004,"line":1005},[1002,25232,6516],{"class":1015},[1002,25234,25235],{"class":1030}," maxNumber ",[1002,25237,2393],{"class":1015},[1002,25239,25240],{"class":1030}," Number.MAX_SAFE_INTEGER;\n",[1002,25242,25243,25245,25247,25250],{"class":1004,"line":1012},[1002,25244,2883],{"class":1030},[1002,25246,2886],{"class":1026},[1002,25248,25249],{"class":1030},"(maxNumber); ",[1002,25251,25252],{"class":1008},"\u002F\u002F 9007199254740991\n",[1002,25254,25255],{"class":1004,"line":1047},[1002,25256,1051],{"emptyLinePlaceholder":1050},[1002,25258,25259,25262,25264,25267],{"class":1004,"line":1054},[1002,25260,25261],{"class":1030},"maxNumber ",[1002,25263,2393],{"class":1015},[1002,25265,25266],{"class":1015}," ++",[1002,25268,25269],{"class":1030},"maxNumber;\n",[1002,25271,25272,25274,25276,25278],{"class":1004,"line":1060},[1002,25273,2883],{"class":1030},[1002,25275,2886],{"class":1026},[1002,25277,25249],{"class":1030},[1002,25279,25280],{"class":1008},"\u002F\u002F 9007199254740992\n",[1002,25282,25283],{"class":1004,"line":1272},[1002,25284,1051],{"emptyLinePlaceholder":1050},[1002,25286,25287],{"class":1004,"line":1348},[1002,25288,25289],{"class":1008},"\u002F\u002F Even though we are incrementing the number, variable value stays same\n",[1002,25291,25292,25294,25296,25299,25301],{"class":1004,"line":1354},[1002,25293,25261],{"class":1030},[1002,25295,2393],{"class":1015},[1002,25297,25298],{"class":1030}," maxNumber",[1002,25300,6545],{"class":1015},[1002,25302,1407],{"class":1030},[1002,25304,25305,25307,25309,25311],{"class":1004,"line":1360},[1002,25306,2883],{"class":1030},[1002,25308,2886],{"class":1026},[1002,25310,25249],{"class":1030},[1002,25312,25280],{"class":1008},[925,25314,25315],{},"To create a BigInt, add the ’n’ suffix to any integer literal. For example 10 becomes 10n. To convert any number to BigInt use the global function BigInt(number).",[993,25317,25319],{"className":995,"code":25318,"language":997,"meta":998,"style":998},"let maxNumber = Number.MAX_SAFE_INTEGER;\nconsole.log(maxNumber); \u002F\u002F 9007199254740991\nmaxNumber = maxNumber + 1;\n\nconsole.log(maxNumber); \u002F\u002F 9007199254740992\nmaxNumber = maxNumber + 1;\n\nconsole.log(maxNumber); \u002F\u002F 9007199254740992\nmaxNumber = BigInt(maxNumber) + 10n;\nconsole.log(maxNumber); \u002F\u002F 9007199254741002n\n",[941,25320,25321,25331,25341,25355,25359,25369,25383,25387,25397,25418],{"__ignoreMap":998},[1002,25322,25323,25325,25327,25329],{"class":1004,"line":1005},[1002,25324,6516],{"class":1015},[1002,25326,25235],{"class":1030},[1002,25328,2393],{"class":1015},[1002,25330,25240],{"class":1030},[1002,25332,25333,25335,25337,25339],{"class":1004,"line":1012},[1002,25334,2883],{"class":1030},[1002,25336,2886],{"class":1026},[1002,25338,25249],{"class":1030},[1002,25340,25252],{"class":1008},[1002,25342,25343,25345,25347,25349,25351,25353],{"class":1004,"line":1047},[1002,25344,25261],{"class":1030},[1002,25346,2393],{"class":1015},[1002,25348,25235],{"class":1030},[1002,25350,5064],{"class":1015},[1002,25352,6246],{"class":1019},[1002,25354,1407],{"class":1030},[1002,25356,25357],{"class":1004,"line":1054},[1002,25358,1051],{"emptyLinePlaceholder":1050},[1002,25360,25361,25363,25365,25367],{"class":1004,"line":1060},[1002,25362,2883],{"class":1030},[1002,25364,2886],{"class":1026},[1002,25366,25249],{"class":1030},[1002,25368,25280],{"class":1008},[1002,25370,25371,25373,25375,25377,25379,25381],{"class":1004,"line":1272},[1002,25372,25261],{"class":1030},[1002,25374,2393],{"class":1015},[1002,25376,25235],{"class":1030},[1002,25378,5064],{"class":1015},[1002,25380,6246],{"class":1019},[1002,25382,1407],{"class":1030},[1002,25384,25385],{"class":1004,"line":1348},[1002,25386,1051],{"emptyLinePlaceholder":1050},[1002,25388,25389,25391,25393,25395],{"class":1004,"line":1354},[1002,25390,2883],{"class":1030},[1002,25392,2886],{"class":1026},[1002,25394,25249],{"class":1030},[1002,25396,25280],{"class":1008},[1002,25398,25399,25401,25403,25406,25409,25411,25413,25416],{"class":1004,"line":1360},[1002,25400,25261],{"class":1030},[1002,25402,2393],{"class":1015},[1002,25404,25405],{"class":1026}," BigInt",[1002,25407,25408],{"class":1030},"(maxNumber) ",[1002,25410,5064],{"class":1015},[1002,25412,8970],{"class":1019},[1002,25414,25415],{"class":1015},"n",[1002,25417,1407],{"class":1030},[1002,25419,25420,25422,25424,25426],{"class":1004,"line":1366},[1002,25421,2883],{"class":1030},[1002,25423,2886],{"class":1026},[1002,25425,25249],{"class":1030},[1002,25427,25428],{"class":1008},"\u002F\u002F 9007199254741002n\n",[953,25430,25201],{"id":25431},"dynamic-imports",[925,25433,25434],{},"Dynamic Imports is one of my favorite feature of ES2020. As the name implies, you can import modules dynamically. Using dynamic imports, the code is delivered via smaller bundles as required (instead of downloading a single large bundle as has been previously required).\nWhen using dynamic imports, the import keywords can be called as a function, which returns a promise. Below is an example of how you can dynamically import a module when the user clicks on a button:",[993,25436,25438],{"className":995,"code":25437,"language":997,"meta":998,"style":998},"document.getElementById('button').addEventListener('click', async () => {\n const { func } = await import('.\u002Fmodule.js');\n func();\n});\n",[941,25439,25440,25470,25494,25501],{"__ignoreMap":998},[1002,25441,25442,25445,25447,25449,25451,25453,25455,25457,25459,25461,25464,25466,25468],{"class":1004,"line":1005},[1002,25443,25444],{"class":1030},"document.",[1002,25446,16591],{"class":1026},[1002,25448,1031],{"class":1030},[1002,25450,16678],{"class":1034},[1002,25452,1539],{"class":1030},[1002,25454,16726],{"class":1026},[1002,25456,1031],{"class":1030},[1002,25458,16731],{"class":1034},[1002,25460,1251],{"class":1030},[1002,25462,25463],{"class":1015},"async",[1002,25465,17297],{"class":1030},[1002,25467,15497],{"class":1015},[1002,25469,1457],{"class":1030},[1002,25471,25472,25474,25476,25479,25481,25483,25485,25487,25489,25492],{"class":1004,"line":1012},[1002,25473,10423],{"class":1015},[1002,25475,15026],{"class":1030},[1002,25477,25478],{"class":1019},"func",[1002,25480,15042],{"class":1030},[1002,25482,2393],{"class":1015},[1002,25484,15047],{"class":1015},[1002,25486,15500],{"class":1015},[1002,25488,1031],{"class":1030},[1002,25490,25491],{"class":1034},"'.\u002Fmodule.js'",[1002,25493,1085],{"class":1030},[1002,25495,25496,25499],{"class":1004,"line":1047},[1002,25497,25498],{"class":1026}," func",[1002,25500,1428],{"class":1030},[1002,25502,25503],{"class":1004,"line":1054},[1002,25504,2804],{"class":1030},[953,25506,25204],{"id":25507},"globalthis",[925,25509,25510,25511,25513],{},"JavaScript is used in a variety of environments such as web browsers, Node.js, Web Workers, and so on.\nEach of these environments has its own object model and a different syntax to access it.\nES2020 brings us the ",[941,25512,25204],{}," property which always refers to the global object, no matter where you are executing your code.",[925,25515,25516],{},"This property really shines when you aren't sure what environment the code is going to run in.",[925,25518,25519],{},"The following is the example of using setTimeout function in Node.js using globalThis:",[993,25521,25523],{"className":1724,"code":25522,"language":1726,"meta":998,"style":998},"globalThis.setTimeout(() => console.log(\"Hello world\"), 3000)\nHello\n",[941,25524,25525,25530],{"__ignoreMap":998},[1002,25526,25527],{"class":1004,"line":1005},[1002,25528,25529],{},"globalThis.setTimeout(() => console.log(\"Hello world\"), 3000)\n",[1002,25531,25532],{"class":1004,"line":1012},[1002,25533,25534],{},"Hello\n",[925,25536,25537],{},"As well as in web browser",[953,25539,25541],{"id":25540},"promiseallsettled","Promise.allSettled()",[925,25543,25544],{},"This method returns a promise that resolves after all of the given promises are either fulfilled or rejected. It is typically used where asynchronous tasks do not depend upon one another to complete successfully, as illustrated in the following example:",[993,25546,25548],{"className":995,"code":25547,"language":997,"meta":998,"style":998},"const promise1 = Promise.resolve(2);\n\nconst promise2 = new Promise((resolve, reject) =>\n setTimeout(reject, 1000, 'Something went wrong'),\n);\n\nconst promises = [promise1, promise2];\n\nPromise.allSettled(promises).then((results) =>\n results.map((res) => console.log(res)),\n);\n\n\u002F\u002F Object { status: \"fulfilled\", value: 2 }\n\u002F\u002F Object { status: \"rejected\", reason: \"Something went wrong\" )\n\u002F\u002F [ undefined, undefined ]\n",[941,25549,25550,25572,25576,25602,25619,25623,25627,25639,25643,25668,25690,25694,25698,25703,25708],{"__ignoreMap":998},[1002,25551,25552,25554,25557,25559,25562,25564,25566,25568,25570],{"class":1004,"line":1005},[1002,25553,1016],{"class":1015},[1002,25555,25556],{"class":1019}," promise1",[1002,25558,1023],{"class":1015},[1002,25560,25561],{"class":1019}," Promise",[1002,25563,948],{"class":1030},[1002,25565,1243],{"class":1026},[1002,25567,1031],{"class":1030},[1002,25569,5681],{"class":1019},[1002,25571,1085],{"class":1030},[1002,25573,25574],{"class":1004,"line":1012},[1002,25575,1051],{"emptyLinePlaceholder":1050},[1002,25577,25578,25580,25583,25585,25587,25589,25591,25593,25595,25598,25600],{"class":1004,"line":1047},[1002,25579,1016],{"class":1015},[1002,25581,25582],{"class":1019}," promise2",[1002,25584,1023],{"class":1015},[1002,25586,2690],{"class":1015},[1002,25588,25561],{"class":1019},[1002,25590,21121],{"class":1030},[1002,25592,1243],{"class":2378},[1002,25594,1251],{"class":1030},[1002,25596,25597],{"class":2378},"reject",[1002,25599,5876],{"class":1030},[1002,25601,19463],{"class":1015},[1002,25603,25604,25607,25610,25612,25614,25617],{"class":1004,"line":1054},[1002,25605,25606],{"class":1026}," setTimeout",[1002,25608,25609],{"class":1030},"(reject, ",[1002,25611,6370],{"class":1019},[1002,25613,1251],{"class":1030},[1002,25615,25616],{"class":1034},"'Something went wrong'",[1002,25618,1257],{"class":1030},[1002,25620,25621],{"class":1004,"line":1060},[1002,25622,1085],{"class":1030},[1002,25624,25625],{"class":1004,"line":1272},[1002,25626,1051],{"emptyLinePlaceholder":1050},[1002,25628,25629,25631,25634,25636],{"class":1004,"line":1348},[1002,25630,1016],{"class":1015},[1002,25632,25633],{"class":1019}," promises",[1002,25635,1023],{"class":1015},[1002,25637,25638],{"class":1030}," [promise1, promise2];\n",[1002,25640,25641],{"class":1004,"line":1354},[1002,25642,1051],{"emptyLinePlaceholder":1050},[1002,25644,25645,25648,25650,25653,25656,25659,25661,25664,25666],{"class":1004,"line":1360},[1002,25646,25647],{"class":1019},"Promise",[1002,25649,948],{"class":1030},[1002,25651,25652],{"class":1026},"allSettled",[1002,25654,25655],{"class":1030},"(promises).",[1002,25657,25658],{"class":1026},"then",[1002,25660,21121],{"class":1030},[1002,25662,25663],{"class":2378},"results",[1002,25665,5876],{"class":1030},[1002,25667,19463],{"class":1015},[1002,25669,25670,25673,25675,25677,25679,25681,25683,25685,25687],{"class":1004,"line":1366},[1002,25671,25672],{"class":1030}," results.",[1002,25674,19444],{"class":1026},[1002,25676,21121],{"class":1030},[1002,25678,14985],{"class":2378},[1002,25680,5876],{"class":1030},[1002,25682,15497],{"class":1015},[1002,25684,19409],{"class":1030},[1002,25686,2886],{"class":1026},[1002,25688,25689],{"class":1030},"(res)),\n",[1002,25691,25692],{"class":1004,"line":1946},[1002,25693,1085],{"class":1030},[1002,25695,25696],{"class":1004,"line":1956},[1002,25697,1051],{"emptyLinePlaceholder":1050},[1002,25699,25700],{"class":1004,"line":1961},[1002,25701,25702],{"class":1008},"\u002F\u002F Object { status: \"fulfilled\", value: 2 }\n",[1002,25704,25705],{"class":1004,"line":1971},[1002,25706,25707],{"class":1008},"\u002F\u002F Object { status: \"rejected\", reason: \"Something went wrong\" )\n",[1002,25709,25710],{"class":1004,"line":1980},[1002,25711,25712],{"class":1008},"\u002F\u002F [ undefined, undefined ]\n",[953,25714,25207],{"id":25715},"nullish-coalescing-operator",[925,25717,25718,25719,25722,25723,25726],{},"This operator will return a ",[928,25720,25721],{},"Right Hand Side"," operand when the ",[928,25724,25725],{},"Left Hand Side"," operand is either undefined or null.",[925,25728,25729],{},"The syntax for this operator is:",[993,25731,25733],{"className":995,"code":25732,"language":997,"meta":998,"style":998},"const employee = {};\nconst name = employee.name ?? 'Joe';\n",[941,25734,25735,25745],{"__ignoreMap":998},[1002,25736,25737,25739,25741,25743],{"class":1004,"line":1005},[1002,25738,1016],{"class":1015},[1002,25740,10426],{"class":1019},[1002,25742,1023],{"class":1015},[1002,25744,7217],{"class":1030},[1002,25746,25747,25749,25751,25753,25756,25758,25761],{"class":1004,"line":1012},[1002,25748,1016],{"class":1015},[1002,25750,18584],{"class":1019},[1002,25752,1023],{"class":1015},[1002,25754,25755],{"class":1030}," employee.name ",[1002,25757,2411],{"class":1015},[1002,25759,25760],{"class":1034}," 'Joe'",[1002,25762,1407],{"class":1030},[925,25764,25765],{},"In the example above, the operator will set the value of name as 'Joe' as employee.name is undefined.",[925,25767,25768],{},"At first glance this looks exactly the same as a logical OR operator ( || ), however, logical OR operator Right Hand Side operand when Left Hand Side Operand is false (undefined, null, “”, 0, false, NaN). Below is the comparison of both operators:",[993,25770,25772],{"className":995,"code":25771,"language":997,"meta":998,"style":998},"let name;\nconsole.log(name ?? 'Joe'); \u002F\u002F 'Joe'\nconsole.log(name || 'Joe'); \u002F\u002F 'Joe'\n\nname = null;\nconsole.log(name ?? 'Joe'); \u002F\u002F 'Joe'\nconsole.log(name || 'Joe'); \u002F\u002F 'Joe'\n\nname = NaN;\nconsole.log(name ?? 'Joe'); \u002F\u002F NaN\nconsole.log(name || 'Joe'); \u002F\u002F 'Joe'\n\nname = 0;\nconsole.log(name ?? 'Joe'); \u002F\u002F 0\nconsole.log(name || 'Joe'); \u002F\u002F 'Joe'\n\nname = false;\nconsole.log(name ?? 'Joe'); \u002F\u002F false\nconsole.log(name || 'Joe'); \u002F\u002F 'Joe'\n\nname = '';\nconsole.log(name ?? 'Joe'); \u002F\u002F ''\nconsole.log(name || 'Joe'); \u002F\u002F 'Joe'\n",[941,25773,25774,25780,25798,25814,25818,25829,25845,25861,25865,25876,25893,25909,25913,25923,25940,25956,25960,25970,25987,26003,26007,26017,26034],{"__ignoreMap":998},[1002,25775,25776,25778],{"class":1004,"line":1005},[1002,25777,6516],{"class":1015},[1002,25779,5950],{"class":1030},[1002,25781,25782,25784,25786,25789,25791,25793,25795],{"class":1004,"line":1012},[1002,25783,2883],{"class":1030},[1002,25785,2886],{"class":1026},[1002,25787,25788],{"class":1030},"(name ",[1002,25790,2411],{"class":1015},[1002,25792,25760],{"class":1034},[1002,25794,18256],{"class":1030},[1002,25796,25797],{"class":1008},"\u002F\u002F 'Joe'\n",[1002,25799,25800,25802,25804,25806,25808,25810,25812],{"class":1004,"line":1047},[1002,25801,2883],{"class":1030},[1002,25803,2886],{"class":1026},[1002,25805,25788],{"class":1030},[1002,25807,8392],{"class":1015},[1002,25809,25760],{"class":1034},[1002,25811,18256],{"class":1030},[1002,25813,25797],{"class":1008},[1002,25815,25816],{"class":1004,"line":1054},[1002,25817,1051],{"emptyLinePlaceholder":1050},[1002,25819,25820,25823,25825,25827],{"class":1004,"line":1060},[1002,25821,25822],{"class":1030},"name ",[1002,25824,2393],{"class":1015},[1002,25826,7080],{"class":1019},[1002,25828,1407],{"class":1030},[1002,25830,25831,25833,25835,25837,25839,25841,25843],{"class":1004,"line":1272},[1002,25832,2883],{"class":1030},[1002,25834,2886],{"class":1026},[1002,25836,25788],{"class":1030},[1002,25838,2411],{"class":1015},[1002,25840,25760],{"class":1034},[1002,25842,18256],{"class":1030},[1002,25844,25797],{"class":1008},[1002,25846,25847,25849,25851,25853,25855,25857,25859],{"class":1004,"line":1348},[1002,25848,2883],{"class":1030},[1002,25850,2886],{"class":1026},[1002,25852,25788],{"class":1030},[1002,25854,8392],{"class":1015},[1002,25856,25760],{"class":1034},[1002,25858,18256],{"class":1030},[1002,25860,25797],{"class":1008},[1002,25862,25863],{"class":1004,"line":1354},[1002,25864,1051],{"emptyLinePlaceholder":1050},[1002,25866,25867,25869,25871,25874],{"class":1004,"line":1360},[1002,25868,25822],{"class":1030},[1002,25870,2393],{"class":1015},[1002,25872,25873],{"class":1019}," NaN",[1002,25875,1407],{"class":1030},[1002,25877,25878,25880,25882,25884,25886,25888,25890],{"class":1004,"line":1366},[1002,25879,2883],{"class":1030},[1002,25881,2886],{"class":1026},[1002,25883,25788],{"class":1030},[1002,25885,2411],{"class":1015},[1002,25887,25760],{"class":1034},[1002,25889,18256],{"class":1030},[1002,25891,25892],{"class":1008},"\u002F\u002F NaN\n",[1002,25894,25895,25897,25899,25901,25903,25905,25907],{"class":1004,"line":1946},[1002,25896,2883],{"class":1030},[1002,25898,2886],{"class":1026},[1002,25900,25788],{"class":1030},[1002,25902,8392],{"class":1015},[1002,25904,25760],{"class":1034},[1002,25906,18256],{"class":1030},[1002,25908,25797],{"class":1008},[1002,25910,25911],{"class":1004,"line":1956},[1002,25912,1051],{"emptyLinePlaceholder":1050},[1002,25914,25915,25917,25919,25921],{"class":1004,"line":1961},[1002,25916,25822],{"class":1030},[1002,25918,2393],{"class":1015},[1002,25920,4910],{"class":1019},[1002,25922,1407],{"class":1030},[1002,25924,25925,25927,25929,25931,25933,25935,25937],{"class":1004,"line":1971},[1002,25926,2883],{"class":1030},[1002,25928,2886],{"class":1026},[1002,25930,25788],{"class":1030},[1002,25932,2411],{"class":1015},[1002,25934,25760],{"class":1034},[1002,25936,18256],{"class":1030},[1002,25938,25939],{"class":1008},"\u002F\u002F 0\n",[1002,25941,25942,25944,25946,25948,25950,25952,25954],{"class":1004,"line":1980},[1002,25943,2883],{"class":1030},[1002,25945,2886],{"class":1026},[1002,25947,25788],{"class":1030},[1002,25949,8392],{"class":1015},[1002,25951,25760],{"class":1034},[1002,25953,18256],{"class":1030},[1002,25955,25797],{"class":1008},[1002,25957,25958],{"class":1004,"line":1985},[1002,25959,1051],{"emptyLinePlaceholder":1050},[1002,25961,25962,25964,25966,25968],{"class":1004,"line":1995},[1002,25963,25822],{"class":1030},[1002,25965,2393],{"class":1015},[1002,25967,13166],{"class":1019},[1002,25969,1407],{"class":1030},[1002,25971,25972,25974,25976,25978,25980,25982,25984],{"class":1004,"line":2006},[1002,25973,2883],{"class":1030},[1002,25975,2886],{"class":1026},[1002,25977,25788],{"class":1030},[1002,25979,2411],{"class":1015},[1002,25981,25760],{"class":1034},[1002,25983,18256],{"class":1030},[1002,25985,25986],{"class":1008},"\u002F\u002F false\n",[1002,25988,25989,25991,25993,25995,25997,25999,26001],{"class":1004,"line":2011},[1002,25990,2883],{"class":1030},[1002,25992,2886],{"class":1026},[1002,25994,25788],{"class":1030},[1002,25996,8392],{"class":1015},[1002,25998,25760],{"class":1034},[1002,26000,18256],{"class":1030},[1002,26002,25797],{"class":1008},[1002,26004,26005],{"class":1004,"line":2017},[1002,26006,1051],{"emptyLinePlaceholder":1050},[1002,26008,26009,26011,26013,26015],{"class":1004,"line":2022},[1002,26010,25822],{"class":1030},[1002,26012,2393],{"class":1015},[1002,26014,9123],{"class":1034},[1002,26016,1407],{"class":1030},[1002,26018,26019,26021,26023,26025,26027,26029,26031],{"class":1004,"line":2442},[1002,26020,2883],{"class":1030},[1002,26022,2886],{"class":1026},[1002,26024,25788],{"class":1030},[1002,26026,2411],{"class":1015},[1002,26028,25760],{"class":1034},[1002,26030,18256],{"class":1030},[1002,26032,26033],{"class":1008},"\u002F\u002F ''\n",[1002,26035,26036,26038,26040,26042,26044,26046,26048],{"class":1004,"line":2466},[1002,26037,2883],{"class":1030},[1002,26039,2886],{"class":1026},[1002,26041,25788],{"class":1030},[1002,26043,8392],{"class":1015},[1002,26045,25760],{"class":1034},[1002,26047,18256],{"class":1030},[1002,26049,25797],{"class":1008},[7100,26051,26053],{"title":26052,"type":23379},"Chaining Nullish Coalescing Operator ( ?? ) with AND ( && ) or OR ( || ) operators",[925,26054,26055],{},"It’s not possible to chain AND ( && ) and OR ( || ) operators directly with ?? operator. If you need to combine them, then you must wrap && or || operator in the parenthesis",[925,26057,26058],{},"Let's look at an example:",[993,26060,26062],{"className":995,"code":26061,"language":997,"meta":998,"style":998},"const employee = { firstName: null, lastName: null };\n\nconst name = employee.firstName || employee.lastName ?? 'Anonymous'; \u002F\u002F error\nconst name = (employee.firstName || employee.lastName) ?? 'Anonymous'; \u002F\u002F 'Anonymous'\n",[941,26063,26064,26085,26089,26115],{"__ignoreMap":998},[1002,26065,26066,26068,26070,26072,26075,26078,26081,26083],{"class":1004,"line":1005},[1002,26067,1016],{"class":1015},[1002,26069,10426],{"class":1019},[1002,26071,1023],{"class":1015},[1002,26073,26074],{"class":1030}," { firstName: ",[1002,26076,26077],{"class":1019},"null",[1002,26079,26080],{"class":1030},", lastName: ",[1002,26082,26077],{"class":1019},[1002,26084,9444],{"class":1030},[1002,26086,26087],{"class":1004,"line":1012},[1002,26088,1051],{"emptyLinePlaceholder":1050},[1002,26090,26091,26093,26095,26097,26100,26102,26105,26107,26110,26112],{"class":1004,"line":1047},[1002,26092,1016],{"class":1015},[1002,26094,18584],{"class":1019},[1002,26096,1023],{"class":1015},[1002,26098,26099],{"class":1030}," employee.firstName ",[1002,26101,8392],{"class":1015},[1002,26103,26104],{"class":1030}," employee.lastName ",[1002,26106,2411],{"class":1015},[1002,26108,26109],{"class":1034}," 'Anonymous'",[1002,26111,17938],{"class":1030},[1002,26113,26114],{"class":1008},"\u002F\u002F error\n",[1002,26116,26117,26119,26121,26123,26126,26128,26131,26133,26135,26137],{"class":1004,"line":1054},[1002,26118,1016],{"class":1015},[1002,26120,18584],{"class":1019},[1002,26122,1023],{"class":1015},[1002,26124,26125],{"class":1030}," (employee.firstName ",[1002,26127,8392],{"class":1015},[1002,26129,26130],{"class":1030}," employee.lastName) ",[1002,26132,2411],{"class":1015},[1002,26134,26109],{"class":1034},[1002,26136,17938],{"class":1030},[1002,26138,26139],{"class":1008},"\u002F\u002F 'Anonymous'\n",[953,26141,25210],{"id":26142},"optional-chaining",[925,26144,26145],{},"Optional Chaining syntax allows you to access deeply nested objects without worrying about whether the property exists or not.\nWhile working with objects, you must be familiar with an error of this kind:",[993,26147,26150],{"className":26148,"code":26149,"language":24241},[24239],"TypeError: Cannot read property \u003Cxyz> of undefined\n",[941,26151,26149],{"__ignoreMap":998},[925,26153,26154],{},"The above error means that you are trying to access the property of an undefined variable.",[925,26156,26157],{},"To avoid such errors, your code will look like this:",[993,26159,26161],{"className":995,"code":26160,"language":997,"meta":998,"style":998},"const employee = {\n name: 'Joe',\n age: 25,\n address: {\n street: {\n number: 12,\n name: 'Main',\n },\n },\n};\n\nconst address =\n employee &&\n employee.address &&\n employee.address.street &&\n employee.address.street.number;\n\nconsole.log(address);\n",[941,26162,26163,26173,26181,26191,26196,26201,26210,26220,26224,26228,26232,26236,26246,26253,26260,26267,26272,26276],{"__ignoreMap":998},[1002,26164,26165,26167,26169,26171],{"class":1004,"line":1005},[1002,26166,1016],{"class":1015},[1002,26168,10426],{"class":1019},[1002,26170,1023],{"class":1015},[1002,26172,1457],{"class":1030},[1002,26174,26175,26177,26179],{"class":1004,"line":1012},[1002,26176,22129],{"class":1030},[1002,26178,10286],{"class":1034},[1002,26180,1143],{"class":1030},[1002,26182,26183,26186,26189],{"class":1004,"line":1047},[1002,26184,26185],{"class":1030}," age: ",[1002,26187,26188],{"class":1019},"25",[1002,26190,1143],{"class":1030},[1002,26192,26193],{"class":1004,"line":1054},[1002,26194,26195],{"class":1030}," address: {\n",[1002,26197,26198],{"class":1004,"line":1060},[1002,26199,26200],{"class":1030}," street: {\n",[1002,26202,26203,26206,26208],{"class":1004,"line":1272},[1002,26204,26205],{"class":1030}," number: ",[1002,26207,10296],{"class":1019},[1002,26209,1143],{"class":1030},[1002,26211,26212,26215,26218],{"class":1004,"line":1348},[1002,26213,26214],{"class":1030}," name: ",[1002,26216,26217],{"class":1034},"'Main'",[1002,26219,1143],{"class":1030},[1002,26221,26222],{"class":1004,"line":1354},[1002,26223,15108],{"class":1030},[1002,26225,26226],{"class":1004,"line":1360},[1002,26227,1502],{"class":1030},[1002,26229,26230],{"class":1004,"line":1366},[1002,26231,1517],{"class":1030},[1002,26233,26234],{"class":1004,"line":1946},[1002,26235,1051],{"emptyLinePlaceholder":1050},[1002,26237,26238,26240,26243],{"class":1004,"line":1956},[1002,26239,1016],{"class":1015},[1002,26241,26242],{"class":1019}," address",[1002,26244,26245],{"class":1015}," =\n",[1002,26247,26248,26251],{"class":1004,"line":1961},[1002,26249,26250],{"class":1030}," employee ",[1002,26252,19476],{"class":1015},[1002,26254,26255,26258],{"class":1004,"line":1971},[1002,26256,26257],{"class":1030}," employee.address ",[1002,26259,19476],{"class":1015},[1002,26261,26262,26265],{"class":1004,"line":1980},[1002,26263,26264],{"class":1030}," employee.address.street ",[1002,26266,19476],{"class":1015},[1002,26268,26269],{"class":1004,"line":1985},[1002,26270,26271],{"class":1030}," employee.address.street.number;\n",[1002,26273,26274],{"class":1004,"line":1995},[1002,26275,1051],{"emptyLinePlaceholder":1050},[1002,26277,26278,26280,26282],{"class":1004,"line":2006},[1002,26279,2883],{"class":1030},[1002,26281,2886],{"class":1026},[1002,26283,14499],{"class":1030},[925,26285,26286],{},"Instead of checking each node, optional chaining handles these cases with ease.",[925,26288,26289],{},"Below is the same example using optional chaining:",[993,26291,26293],{"className":995,"code":26292,"language":997,"meta":998,"style":998},"const employee = {\n name: 'Joe',\n age: 25,\n address: {\n street: {\n number: 12,\n name: 'Main',\n },\n },\n};\n\nconst address = employee?.address?.street?.number;\n\nconsole.log(address);\n",[941,26294,26295,26305,26313,26321,26325,26329,26337,26345,26349,26353,26357,26361,26372,26376],{"__ignoreMap":998},[1002,26296,26297,26299,26301,26303],{"class":1004,"line":1005},[1002,26298,1016],{"class":1015},[1002,26300,10426],{"class":1019},[1002,26302,1023],{"class":1015},[1002,26304,1457],{"class":1030},[1002,26306,26307,26309,26311],{"class":1004,"line":1012},[1002,26308,22129],{"class":1030},[1002,26310,10286],{"class":1034},[1002,26312,1143],{"class":1030},[1002,26314,26315,26317,26319],{"class":1004,"line":1047},[1002,26316,26185],{"class":1030},[1002,26318,26188],{"class":1019},[1002,26320,1143],{"class":1030},[1002,26322,26323],{"class":1004,"line":1054},[1002,26324,26195],{"class":1030},[1002,26326,26327],{"class":1004,"line":1060},[1002,26328,26200],{"class":1030},[1002,26330,26331,26333,26335],{"class":1004,"line":1272},[1002,26332,26205],{"class":1030},[1002,26334,10296],{"class":1019},[1002,26336,1143],{"class":1030},[1002,26338,26339,26341,26343],{"class":1004,"line":1348},[1002,26340,26214],{"class":1030},[1002,26342,26217],{"class":1034},[1002,26344,1143],{"class":1030},[1002,26346,26347],{"class":1004,"line":1354},[1002,26348,15108],{"class":1030},[1002,26350,26351],{"class":1004,"line":1360},[1002,26352,1502],{"class":1030},[1002,26354,26355],{"class":1004,"line":1366},[1002,26356,1517],{"class":1030},[1002,26358,26359],{"class":1004,"line":1946},[1002,26360,1051],{"emptyLinePlaceholder":1050},[1002,26362,26363,26365,26367,26369],{"class":1004,"line":1956},[1002,26364,1016],{"class":1015},[1002,26366,26242],{"class":1019},[1002,26368,1023],{"class":1015},[1002,26370,26371],{"class":1030}," employee?.address?.street?.number;\n",[1002,26373,26374],{"class":1004,"line":1961},[1002,26375,1051],{"emptyLinePlaceholder":1050},[1002,26377,26378,26380,26382],{"class":1004,"line":1971},[1002,26379,2883],{"class":1030},[1002,26381,2886],{"class":1026},[1002,26383,14499],{"class":1030},[925,26385,26386],{},"Pretty simple isn't it?",[925,26388,26389],{},"You can also check arrays and functions using optional chaining. An example is given below:",[993,26391,26393],{"className":995,"code":26392,"language":997,"meta":998,"style":998},"let colors = ['red', 'green', 'blue'];\n\nconsole.log(colors?.[1]); \u002F\u002F 'green'\n\ncolors = null; \u002F\u002F set array to null\n\nconsole.log(colors?.[1]); \u002F\u002F undefined\n\nlet func = () => 'Hey there!';\n\nconsole.log(func?.[1]); \u002F\u002F 'Hey there!'\n\nfunc = null; \u002F\u002F set function to null\n\nconsole.log(func?.()); \u002F\u002F undefined\n",[941,26394,26395,26421,26425,26442,26446,26460,26464,26479,26483,26501,26505,26521,26525,26539,26543],{"__ignoreMap":998},[1002,26396,26397,26399,26402,26404,26406,26409,26411,26414,26416,26419],{"class":1004,"line":1005},[1002,26398,6516],{"class":1015},[1002,26400,26401],{"class":1030}," colors ",[1002,26403,2393],{"class":1015},[1002,26405,1897],{"class":1030},[1002,26407,26408],{"class":1034},"'red'",[1002,26410,1251],{"class":1030},[1002,26412,26413],{"class":1034},"'green'",[1002,26415,1251],{"class":1030},[1002,26417,26418],{"class":1034},"'blue'",[1002,26420,6754],{"class":1030},[1002,26422,26423],{"class":1004,"line":1012},[1002,26424,1051],{"emptyLinePlaceholder":1050},[1002,26426,26427,26429,26431,26434,26436,26439],{"class":1004,"line":1047},[1002,26428,2883],{"class":1030},[1002,26430,2886],{"class":1026},[1002,26432,26433],{"class":1030},"(colors?.[",[1002,26435,6211],{"class":1019},[1002,26437,26438],{"class":1030},"]); ",[1002,26440,26441],{"class":1008},"\u002F\u002F 'green'\n",[1002,26443,26444],{"class":1004,"line":1054},[1002,26445,1051],{"emptyLinePlaceholder":1050},[1002,26447,26448,26451,26453,26455,26457],{"class":1004,"line":1060},[1002,26449,26450],{"class":1030},"colors ",[1002,26452,2393],{"class":1015},[1002,26454,7080],{"class":1019},[1002,26456,17938],{"class":1030},[1002,26458,26459],{"class":1008},"\u002F\u002F set array to null\n",[1002,26461,26462],{"class":1004,"line":1272},[1002,26463,1051],{"emptyLinePlaceholder":1050},[1002,26465,26466,26468,26470,26472,26474,26476],{"class":1004,"line":1348},[1002,26467,2883],{"class":1030},[1002,26469,2886],{"class":1026},[1002,26471,26433],{"class":1030},[1002,26473,6211],{"class":1019},[1002,26475,26438],{"class":1030},[1002,26477,26478],{"class":1008},"\u002F\u002F undefined\n",[1002,26480,26481],{"class":1004,"line":1354},[1002,26482,1051],{"emptyLinePlaceholder":1050},[1002,26484,26485,26487,26490,26492,26494,26496,26499],{"class":1004,"line":1360},[1002,26486,6516],{"class":1015},[1002,26488,26489],{"class":1026}," func",[1002,26491,1023],{"class":1015},[1002,26493,17297],{"class":1030},[1002,26495,15497],{"class":1015},[1002,26497,26498],{"class":1034}," 'Hey there!'",[1002,26500,1407],{"class":1030},[1002,26502,26503],{"class":1004,"line":1366},[1002,26504,1051],{"emptyLinePlaceholder":1050},[1002,26506,26507,26509,26511,26514,26516,26518],{"class":1004,"line":1946},[1002,26508,2883],{"class":1030},[1002,26510,2886],{"class":1026},[1002,26512,26513],{"class":1030},"(func?.[",[1002,26515,6211],{"class":1019},[1002,26517,26438],{"class":1030},[1002,26519,26520],{"class":1008},"\u002F\u002F 'Hey there!'\n",[1002,26522,26523],{"class":1004,"line":1956},[1002,26524,1051],{"emptyLinePlaceholder":1050},[1002,26526,26527,26530,26532,26534,26536],{"class":1004,"line":1961},[1002,26528,26529],{"class":1030},"func ",[1002,26531,2393],{"class":1015},[1002,26533,7080],{"class":1019},[1002,26535,17938],{"class":1030},[1002,26537,26538],{"class":1008},"\u002F\u002F set function to null\n",[1002,26540,26541],{"class":1004,"line":1971},[1002,26542,1051],{"emptyLinePlaceholder":1050},[1002,26544,26545,26547,26549,26551,26553,26556],{"class":1004,"line":1980},[1002,26546,2883],{"class":1030},[1002,26548,2886],{"class":1026},[1002,26550,1031],{"class":1030},[1002,26552,25478],{"class":1026},[1002,26554,26555],{"class":1030},"?.()); ",[1002,26557,26478],{"class":1008},[953,26559,26561],{"id":26560},"conclusion","Conclusion",[925,26563,26564],{},"The introduction of ES2020’s new features add even more flexibility and power to the constantly evolving JavaScript.",[925,26566,26567],{},"I hope you found this article useful and that you are as excited as I am about using these features!",[1579,26569,26570],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":26572},[26573,26574,26575,26576,26577,26578,26579],{"id":25213,"depth":1012,"text":25198},{"id":25431,"depth":1012,"text":25201},{"id":25507,"depth":1012,"text":25204},{"id":25540,"depth":1012,"text":25541},{"id":25715,"depth":1012,"text":25207},{"id":26142,"depth":1012,"text":25210},{"id":26560,"depth":1012,"text":26561},"2020-12-23","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes2020-new-features.jpg",{},{"title":186,"description":188},"blog\u002Fes2020-new-features",[16,17],"fO8LE2KsvjPED6qSYGrB7SdmuoXniYgXYxqv9S5YGsg",{"id":26588,"title":688,"author":920,"body":26589,"date":27312,"description":690,"extension":1591,"image":27313,"meta":27314,"navigation":1050,"path":689,"seo":27315,"stem":27316,"tags":27317,"__hash__":27318},"blog\u002Fblog\u002Freact-re-rendering-components.md",{"type":922,"value":26590,"toc":27297},[26591,26595,26598,26601,26604,26608,26611,26614,26626,26630,26633,26636,26643,26652,26655,26658,26664,26667,26670,26673,26766,26769,26772,26775,26778,26781,26789,26792,26795,26799,26802,26808,26811,26818,26821,26825,26828,26831,26835,26838,26841,26844,26847,26850,26969,26972,26978,26982,26985,26988,27009,27012,27016,27019,27075,27078,27081,27084,27145,27148,27152,27155,27158,27161,27164,27167,27170,27286,27289,27291,27294],[953,26592,26594],{"id":26593},"what-is-components-re-rendering","What is components re-rendering ?",[925,26596,26597],{},"When looking into React's render performance, there are a few terms and concepts that can be hard to understand.",[925,26599,26600],{},"Here, we will look at the most important concepts about rendering in React and how React decides to re-render a given component.",[925,26602,26603],{},"And then we will find out what we can do to optimise the render performance of your React application.",[1655,26605,26607],{"id":26606},"document-object-model-dom","Document Object Model (DOM)",[925,26609,26610],{},"In order to understand how React renders and re-renders work, we can peek into React codebase to see what happens behind the scenes of the library.",[925,26612,26613],{},"The tree-like DOM represents the structure of a website, represented by HTML.\nJavaScript also has a DOM, which is represented as an object where the root element is the document.",[925,26615,26616,26617,1251,26620,16529,26623,948],{},"You can modify the DOM with JavaScript through the DOM API that contains functions like ",[941,26618,26619],{},"document.write",[941,26621,26622],{},"Node.appendChild",[941,26624,26625],{},"Element.setAttribute",[1655,26627,26629],{"id":26628},"what-is-the-virtual-document-obejct-model-vdom","What is the Virtual document Obejct Model (VDOM)?",[925,26631,26632],{},"Then there's the Virtual DOM (or VDOM) of React, which is another abstraction layer on top of that. It consists of your React application's elements.",[925,26634,26635],{},"State changes in your application will be applied to the VDOM first. If the new state of the VDOM requires a UI change,\nthe ReactDOM library will efficiently do this by trying to update only what needs to be updated.",[925,26637,26638,26639,26642],{},"For example, if only the attribute of an element changes, React will only update the attribute of the HTML element by calling ",[941,26640,26641],{},"document.setAttribute"," (or something similar).",[7100,26644,26646],{"title":26645,"type":24048},"Diffing",[925,26647,26648,26649,948],{},"When the VDOM gets updated, React compares it to to a previous snapshot of the VDOM and then only updates what has changed in the real DOM.\nIf nothing changed, the real DOM won't be updated at all. This process of comparing the old VDOM with the new one is called ",[1107,26650,26651],{},"diffing",[925,26653,26654],{},"Real DOM updates are slow because they cause an actual re-draw of the UI. React makes this more efficient by updating the smallest amount possible in the real DOM.",[925,26656,26657],{},"Therefore we have to be aware of the difference between native and virtual DOM updates.",[925,26659,26660],{},[963,26661],{"alt":26662,"src":26663},"Virtual DOM","\u002Fimages\u002Fblog\u002F2020-04-30-react-re-rendering-components\u002Fvdom.jpg",[953,26665,26666],{"id":303},"Performance",[925,26668,26669],{},"When we talk about renders in React, we actually talk about the execution of the render function, which doesn't always imply an update of the UI.",[925,26671,26672],{},"Let's see this in an example:",[993,26674,26676],{"className":995,"code":26675,"language":997,"meta":998,"style":998},"const App = () => {\n const [message, setMessage] = React.useState('');\n return (\n \u003C>\n \u003CInfo message={message} \u002F>\n \u003CInfo \u002F>\n \u003C\u002F>\n );\n};\n",[941,26677,26678,26692,26721,26727,26731,26746,26754,26758,26762],{"__ignoreMap":998},[1002,26679,26680,26682,26684,26686,26688,26690],{"class":1004,"line":1005},[1002,26681,1016],{"class":1015},[1002,26683,19566],{"class":1026},[1002,26685,1023],{"class":1015},[1002,26687,17297],{"class":1030},[1002,26689,15497],{"class":1015},[1002,26691,1457],{"class":1030},[1002,26693,26694,26696,26698,26700,26702,26705,26707,26709,26712,26715,26717,26719],{"class":1004,"line":1012},[1002,26695,10423],{"class":1015},[1002,26697,1897],{"class":1030},[1002,26699,7100],{"class":1019},[1002,26701,1251],{"class":1030},[1002,26703,26704],{"class":1019},"setMessage",[1002,26706,18338],{"class":1030},[1002,26708,2393],{"class":1015},[1002,26710,26711],{"class":1030}," React.",[1002,26713,26714],{"class":1026},"useState",[1002,26716,1031],{"class":1030},[1002,26718,19820],{"class":1034},[1002,26720,1085],{"class":1030},[1002,26722,26723,26725],{"class":1004,"line":1047},[1002,26724,15066],{"class":1015},[1002,26726,15692],{"class":1030},[1002,26728,26729],{"class":1004,"line":1054},[1002,26730,19198],{"class":1030},[1002,26732,26733,26735,26738,26741,26743],{"class":1004,"line":1060},[1002,26734,19579],{"class":1030},[1002,26736,26737],{"class":1019},"Info",[1002,26739,26740],{"class":1026}," message",[1002,26742,2393],{"class":1015},[1002,26744,26745],{"class":1030},"{message} \u002F>\n",[1002,26747,26748,26750,26752],{"class":1004,"line":1272},[1002,26749,19579],{"class":1030},[1002,26751,26737],{"class":1019},[1002,26753,15258],{"class":1030},[1002,26755,26756],{"class":1004,"line":1348},[1002,26757,19499],{"class":1030},[1002,26759,26760],{"class":1004,"line":1354},[1002,26761,10503],{"class":1030},[1002,26763,26764],{"class":1004,"line":1360},[1002,26765,1517],{"class":1030},[925,26767,26768],{},"In functional components, the execution of the whole function is the equivalent of the render function in class components.",[925,26770,26771],{},"When the state changes in the higher-order component (HOC, in this case, App), the two Info components will re-render, even though the second one doesn't even receive any props.",[925,26773,26774],{},"This translates to having the render function being called 3 times, but actual DOM modifications only happen once in the Info component that displays the message.",[925,26776,26777],{},"React already optimises this for you, so you don't have to worry too much about performance bottlenecks of UI redraws.",[925,26779,26780],{},"The execution of these render functions has two drawbacks:",[1530,26782,26783,26786],{},[974,26784,26785],{},"React has to run its diffing algorithm on each of those components to check whether it should update the UI.",[974,26787,26788],{},"All your code in these render functions or function components will be executed again.",[925,26790,26791],{},"The first point is arguably not that important since React manages to calculate the difference quite efficiently.\nThe danger lies in the code that you wrote is being executed over and over on every React render.",[925,26793,26794],{},"In the example above we have a really small component tree. But imagine what happens if each node has more children and these again might have child-components.\nWe'll see how we can optimize this.",[953,26796,26798],{"id":26797},"when-does-react-re-render","When does React re-render?",[925,26800,26801],{},"Above we saw what causes a re-draw of our UI, but what is calling React's render function to begin with?",[7100,26803,26805],{"title":26804,"type":24048},"React re-render",[925,26806,26807],{},"React schedules a render every time the state of a component changes.",[925,26809,26810],{},"Scheduling a render means that this doesn't happen immediately. React will try to find the best moment for this.",[925,26812,26813,26814,26817],{},"Changing the state means that React triggers an update when we call the ",[928,26815,26816],{},"setState"," function.\nThis doesn't only mean that the render function of the component will be called, but also that all its subsequent child-components will re-render,\nregardless of whether their props have changed or not.",[925,26819,26820],{},"If your application is badly structured, you might be running a lot more JavaScript than you expected because updating the parent node implies running the render function of all children.",[953,26822,26824],{"id":26823},"how-to-optimize-re-renders-to-prevent-re-renders","How to optimize re-renders to prevent re-renders",[925,26826,26827],{},"A good example for inefficient re-renders is when an input field is being controlled in a higher-order component.",[925,26829,26830],{},"The numbers in yellow are counting the number of times the render function of each component has been executed:",[953,26832,26834],{"id":26833},"controlling-when-a-component-should-update","Controlling when a component should update",[925,26836,26837],{},"React provides us with a few functions to prevent these unnecessary updates.",[925,26839,26840],{},"Let's have a look at them, after this, I'll show you another, more effective way of improving render performance.",[953,26842,20702],{"id":26843},"reactmemo",[925,26845,26846],{},"The first one, which I already gave away before, is React.memo. I already wrote a more in-depth article on this, but in summary, it's a function that prevents your React Hook components\nfrom rendering when the props don't change.",[925,26848,26849],{},"An example of this in action looks something like this:",[993,26851,26853],{"className":995,"code":26852,"language":997,"meta":998,"style":998},"const InfoMemo = React.memo(({ children }) => {\n let updates = React.useRef(0);\n return (\n \u003Cdiv className=\"black-tile\">\n Memo\n \u003CUpdates updates={updates.current++} \u002F>\n {children}\n \u003C\u002Fdiv>\n );\n});\n",[941,26854,26855,26880,26901,26907,26923,26928,26948,26953,26961,26965],{"__ignoreMap":998},[1002,26856,26857,26859,26862,26864,26866,26869,26872,26874,26876,26878],{"class":1004,"line":1005},[1002,26858,1016],{"class":1015},[1002,26860,26861],{"class":1019}," InfoMemo",[1002,26863,1023],{"class":1015},[1002,26865,26711],{"class":1030},[1002,26867,26868],{"class":1026},"memo",[1002,26870,26871],{"class":1030},"(({ ",[1002,26873,19119],{"class":2378},[1002,26875,24451],{"class":1030},[1002,26877,15497],{"class":1015},[1002,26879,1457],{"class":1030},[1002,26881,26882,26885,26888,26890,26892,26895,26897,26899],{"class":1004,"line":1012},[1002,26883,26884],{"class":1015}," let",[1002,26886,26887],{"class":1030}," updates ",[1002,26889,2393],{"class":1015},[1002,26891,26711],{"class":1030},[1002,26893,26894],{"class":1026},"useRef",[1002,26896,1031],{"class":1030},[1002,26898,5867],{"class":1019},[1002,26900,1085],{"class":1030},[1002,26902,26903,26905],{"class":1004,"line":1047},[1002,26904,15066],{"class":1015},[1002,26906,15692],{"class":1030},[1002,26908,26909,26911,26913,26916,26918,26921],{"class":1004,"line":1054},[1002,26910,15697],{"class":1030},[1002,26912,19650],{"class":15711},[1002,26914,26915],{"class":1026}," className",[1002,26917,2393],{"class":1015},[1002,26919,26920],{"class":1034},"\"black-tile\"",[1002,26922,15703],{"class":1030},[1002,26924,26925],{"class":1004,"line":1060},[1002,26926,26927],{"class":1030}," Memo\n",[1002,26929,26930,26932,26935,26938,26940,26943,26945],{"class":1004,"line":1272},[1002,26931,19579],{"class":1030},[1002,26933,26934],{"class":1019},"Updates",[1002,26936,26937],{"class":1026}," updates",[1002,26939,2393],{"class":1015},[1002,26941,26942],{"class":1030},"{updates.current",[1002,26944,6545],{"class":1015},[1002,26946,26947],{"class":1030},"} \u002F>\n",[1002,26949,26950],{"class":1004,"line":1348},[1002,26951,26952],{"class":1030}," {children}\n",[1002,26954,26955,26957,26959],{"class":1004,"line":1354},[1002,26956,19647],{"class":1030},[1002,26958,19650],{"class":15711},[1002,26960,15703],{"class":1030},[1002,26962,26963],{"class":1004,"line":1360},[1002,26964,10503],{"class":1030},[1002,26966,26967],{"class":1004,"line":1366},[1002,26968,2804],{"class":1030},[925,26970,26971],{},"There are a few more things you need to know about this before using it in production.",[925,26973,26974,26975,948],{},"The equivalent for React classes is using ",[941,26976,26977],{},"React.PureComponent",[953,26979,26981],{"id":26980},"shouldcomponentupdate","shouldComponentUpdate",[925,26983,26984],{},"This function is one of React's lifecycle functions and allows us to optimize rendering performance by telling React when to update a class component.",[925,26986,26987],{},"Its arguments are the next props and the next state that the component is about to render:",[993,26989,26991],{"className":995,"code":26990,"language":997,"meta":998,"style":998},"shouldComponentUpdate(nextProps, nextState) {\n \u002F\u002F return true or false\n}\n",[941,26992,26993,27000,27005],{"__ignoreMap":998},[1002,26994,26995,26997],{"class":1004,"line":1005},[1002,26996,26981],{"class":1026},[1002,26998,26999],{"class":1030},"(nextProps, nextState) {\n",[1002,27001,27002],{"class":1004,"line":1012},[1002,27003,27004],{"class":1008}," \u002F\u002F return true or false\n",[1002,27006,27007],{"class":1004,"line":1047},[1002,27008,1170],{"class":1030},[925,27010,27011],{},"This function is pretty easy to use: Returning true causes React to call the render function, returning false prevents this.",[953,27013,27015],{"id":27014},"set-the-key-attribute","Set the key attribute",[925,27017,27018],{},"In React, it is very common to do the following. Find out what's wrong with it:",[993,27020,27022],{"className":995,"code":27021,"language":997,"meta":998,"style":998},"\u003Cdiv>\n {events.map((event) => (\n \u003CEvent event={event} \u002F>\n ))}\n\u003C\u002Fdiv>\n",[941,27023,27024,27032,27049,27062,27067],{"__ignoreMap":998},[1002,27025,27026,27028,27030],{"class":1004,"line":1005},[1002,27027,6539],{"class":1030},[1002,27029,19650],{"class":15711},[1002,27031,15703],{"class":1030},[1002,27033,27034,27037,27039,27041,27043,27045,27047],{"class":1004,"line":1012},[1002,27035,27036],{"class":1030}," {events.",[1002,27038,19444],{"class":1026},[1002,27040,21121],{"class":1030},[1002,27042,16696],{"class":2378},[1002,27044,5876],{"class":1030},[1002,27046,15497],{"class":1015},[1002,27048,15692],{"class":1030},[1002,27050,27051,27053,27055,27057,27059],{"class":1004,"line":1047},[1002,27052,15697],{"class":1030},[1002,27054,8167],{"class":1019},[1002,27056,8494],{"class":1026},[1002,27058,2393],{"class":1015},[1002,27060,27061],{"class":1030},"{event} \u002F>\n",[1002,27063,27064],{"class":1004,"line":1054},[1002,27065,27066],{"class":1030}," ))}\n",[1002,27068,27069,27071,27073],{"class":1004,"line":1060},[1002,27070,22437],{"class":1030},[1002,27072,19650],{"class":15711},[1002,27074,15703],{"class":1030},[925,27076,27077],{},"Here I forgot to set the key attribute. Most linters will warn you about this, but why is it so important?",[925,27079,27080],{},"In some cases, React relies on the key attribute for identifying components and optimizing performance.",[925,27082,27083],{},"In the example above, if an event is being added to the beginning of the array, React will think that the first and all the subsequent elements have changed and will trigger a re-render\nof those. We can prevent this by adding a key to the element:",[993,27085,27087],{"className":995,"code":27086,"language":997,"meta":998,"style":998},"\u003Cdiv>\n {events.map((event) => (\n \u003CEvent event={event} key={event.id} \u002F>\n ))}\n\u003C\u002Fdiv>\n",[941,27088,27089,27097,27113,27133,27137],{"__ignoreMap":998},[1002,27090,27091,27093,27095],{"class":1004,"line":1005},[1002,27092,6539],{"class":1030},[1002,27094,19650],{"class":15711},[1002,27096,15703],{"class":1030},[1002,27098,27099,27101,27103,27105,27107,27109,27111],{"class":1004,"line":1012},[1002,27100,27036],{"class":1030},[1002,27102,19444],{"class":1026},[1002,27104,21121],{"class":1030},[1002,27106,16696],{"class":2378},[1002,27108,5876],{"class":1030},[1002,27110,15497],{"class":1015},[1002,27112,15692],{"class":1030},[1002,27114,27115,27117,27119,27121,27123,27126,27128,27130],{"class":1004,"line":1047},[1002,27116,15697],{"class":1030},[1002,27118,8167],{"class":1019},[1002,27120,8494],{"class":1026},[1002,27122,2393],{"class":1015},[1002,27124,27125],{"class":1030},"{event} ",[1002,27127,7857],{"class":1026},[1002,27129,2393],{"class":1015},[1002,27131,27132],{"class":1030},"{event.id} \u002F>\n",[1002,27134,27135],{"class":1004,"line":1054},[1002,27136,27066],{"class":1030},[1002,27138,27139,27141,27143],{"class":1004,"line":1060},[1002,27140,22437],{"class":1030},[1002,27142,19650],{"class":15711},[1002,27144,15703],{"class":1030},[925,27146,27147],{},"Try to avoid using the index of the array as a key and use something that identifies the content.\nKeys only have to be unique among siblings.",[953,27149,27151],{"id":27150},"structure-of-your-components","Structure of your components",[925,27153,27154],{},"An even better way of improving re-renders is by restructuring your code a little bit.",[925,27156,27157],{},"Be careful where you place your logic. If you put everything in the root component of your application, all the React.memo functions in the world won't help you to fix your performance\nproblems.",[925,27159,27160],{},"If you place it closer to where the data is used, chances are you don't even need React.memo.",[925,27162,27163],{},"Check out the optimized version of the example and type in some text:",[925,27165,27166],{},"You see that even though the state updates, the other components don't re-render at all.",[925,27168,27169],{},"The only change I made was to move code that handles the state into separate component:",[993,27171,27173],{"className":995,"code":27172,"language":997,"meta":998,"style":998},"const InputSelfHandling = () => {\n const [text, setText] = React.useState('');\n return (\n \u003Cinput\n value={text}\n placeholder=\"Write something\"\n onChange={(e) => setText(e.target.value)}\n \u002F>\n );\n};\n",[941,27174,27175,27190,27217,27223,27230,27240,27250,27273,27278,27282],{"__ignoreMap":998},[1002,27176,27177,27179,27182,27184,27186,27188],{"class":1004,"line":1005},[1002,27178,1016],{"class":1015},[1002,27180,27181],{"class":1026}," InputSelfHandling",[1002,27183,1023],{"class":1015},[1002,27185,17297],{"class":1030},[1002,27187,15497],{"class":1015},[1002,27189,1457],{"class":1030},[1002,27191,27192,27194,27196,27198,27200,27203,27205,27207,27209,27211,27213,27215],{"class":1004,"line":1012},[1002,27193,10423],{"class":1015},[1002,27195,1897],{"class":1030},[1002,27197,24241],{"class":1019},[1002,27199,1251],{"class":1030},[1002,27201,27202],{"class":1019},"setText",[1002,27204,18338],{"class":1030},[1002,27206,2393],{"class":1015},[1002,27208,26711],{"class":1030},[1002,27210,26714],{"class":1026},[1002,27212,1031],{"class":1030},[1002,27214,19820],{"class":1034},[1002,27216,1085],{"class":1030},[1002,27218,27219,27221],{"class":1004,"line":1047},[1002,27220,15066],{"class":1015},[1002,27222,15692],{"class":1030},[1002,27224,27225,27227],{"class":1004,"line":1054},[1002,27226,15697],{"class":1030},[1002,27228,27229],{"class":15711},"input\n",[1002,27231,27232,27235,27237],{"class":1004,"line":1060},[1002,27233,27234],{"class":1026}," value",[1002,27236,2393],{"class":1015},[1002,27238,27239],{"class":1030},"{text}\n",[1002,27241,27242,27245,27247],{"class":1004,"line":1272},[1002,27243,27244],{"class":1026}," placeholder",[1002,27246,2393],{"class":1015},[1002,27248,27249],{"class":1034},"\"Write something\"\n",[1002,27251,27252,27255,27257,27260,27263,27265,27267,27270],{"class":1004,"line":1348},[1002,27253,27254],{"class":1026}," onChange",[1002,27256,2393],{"class":1015},[1002,27258,27259],{"class":1030},"{(",[1002,27261,27262],{"class":2378},"e",[1002,27264,5876],{"class":1030},[1002,27266,15497],{"class":1015},[1002,27268,27269],{"class":1026}," setText",[1002,27271,27272],{"class":1030},"(e.target.value)}\n",[1002,27274,27275],{"class":1004,"line":1354},[1002,27276,27277],{"class":1030}," \u002F>\n",[1002,27279,27280],{"class":1004,"line":1360},[1002,27281,10503],{"class":1030},[1002,27283,27284],{"class":1004,"line":1366},[1002,27285,1517],{"class":1030},[925,27287,27288],{},"If you need to use the state in other parts of your application, you can do so by using React Context or alternatives like MobX and Redux.",[953,27290,26561],{"id":26560},[925,27292,27293],{},"I hope I could give you a better understanding of how React's render mechanisms work and what you can do to get the most out of this.",[1579,27295,27296],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":27298},[27299,27303,27304,27305,27306,27307,27308,27309,27310,27311],{"id":26593,"depth":1012,"text":26594,"children":27300},[27301,27302],{"id":26606,"depth":1047,"text":26607},{"id":26628,"depth":1047,"text":26629},{"id":303,"depth":1012,"text":26666},{"id":26797,"depth":1012,"text":26798},{"id":26823,"depth":1012,"text":26824},{"id":26833,"depth":1012,"text":26834},{"id":26843,"depth":1012,"text":20702},{"id":26980,"depth":1012,"text":26981},{"id":27014,"depth":1012,"text":27015},{"id":27150,"depth":1012,"text":27151},{"id":26560,"depth":1012,"text":26561},"2020-04-30","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-re-rendering-components.jpg",{},{"title":688,"description":690},"blog\u002Freact-re-rendering-components",[16,17,40],"OaLkCdRieKn3cUWlrxV9gUzwukRmAirRroZNrMO5JrM",{"id":27320,"title":646,"author":920,"body":27321,"date":28138,"description":648,"extension":1591,"image":28139,"meta":28140,"navigation":1050,"path":647,"seo":28141,"stem":28142,"tags":28143,"__hash__":28144},"blog\u002Fblog\u002Freact-component-library-with-material-ui.md",{"type":922,"value":27322,"toc":28129},[27323,27327,27330,27334,27337,27353,27356,27371,27374,27454,27456,27465,27469,27475,27544,27547,27551,27554,27723,27730,27734,27737,27923,27927,27930,28121,28123,28126],[953,27324,27326],{"id":27325},"why-material-ui","Why Material UI?",[925,27328,27329],{},"Creating a custom component library from scratch can be tedious and time-consuming. Instead, it’s much faster to use one of an existing component libraries well-architected components than to spin up a custom one.\nInstead of using Sass or JS in CSS, I prefer using Styled Components for the ability to pass functions and props, write regular CSS, inject custom properties like any other React component and just the overall component-driven nature of it.\nWell, the good news is, Material UI pretty much supports it out of the box.",[953,27331,27333],{"id":27332},"setting-up-material-ui","Setting up Material UI",[925,27335,27336],{},"Install Material-UI's source files via npm:",[993,27338,27340],{"className":1797,"code":27339,"language":1799,"meta":998,"style":998},"npm install @material-ui\u002Fcore\n",[941,27341,27342],{"__ignoreMap":998},[1002,27343,27344,27347,27350],{"class":1004,"line":1005},[1002,27345,27346],{"class":1026},"npm",[1002,27348,27349],{"class":1034}," install",[1002,27351,27352],{"class":1034}," @material-ui\u002Fcore\n",[925,27354,27355],{},"Or using yarn:",[993,27357,27359],{"className":1797,"code":27358,"language":1799,"meta":998,"style":998},"yarn add @material-ui\u002Fcore\n",[941,27360,27361],{"__ignoreMap":998},[1002,27362,27363,27366,27369],{"class":1004,"line":1005},[1002,27364,27365],{"class":1026},"yarn",[1002,27367,27368],{"class":1034}," add",[1002,27370,27352],{"class":1034},[925,27372,27373],{},"Material-UI components work without any additional setup, and also don't pollute the global scope.",[993,27375,27377],{"className":995,"code":27376,"language":997,"meta":998,"style":998},"import styled from 'styled-components';\nimport Button from '@material-ui\u002Fcore\u002FButton';\n\nconst StyledButton = styled(Button)`\n color: white;\n && :hover {\n color: blue;\n }\n`;\n",[941,27378,27379,27393,27407,27411,27429,27434,27439,27444,27448],{"__ignoreMap":998},[1002,27380,27381,27383,27386,27388,27391],{"class":1004,"line":1005},[1002,27382,943],{"class":1015},[1002,27384,27385],{"class":1030}," styled ",[1002,27387,1068],{"class":1015},[1002,27389,27390],{"class":1034}," 'styled-components'",[1002,27392,1407],{"class":1030},[1002,27394,27395,27397,27400,27402,27405],{"class":1004,"line":1012},[1002,27396,943],{"class":1015},[1002,27398,27399],{"class":1030}," Button ",[1002,27401,1068],{"class":1015},[1002,27403,27404],{"class":1034}," '@material-ui\u002Fcore\u002FButton'",[1002,27406,1407],{"class":1030},[1002,27408,27409],{"class":1004,"line":1047},[1002,27410,1051],{"emptyLinePlaceholder":1050},[1002,27412,27413,27415,27418,27420,27423,27426],{"class":1004,"line":1054},[1002,27414,1016],{"class":1015},[1002,27416,27417],{"class":1019}," StyledButton",[1002,27419,1023],{"class":1015},[1002,27421,27422],{"class":1026}," styled",[1002,27424,27425],{"class":1030},"(Button)",[1002,27427,27428],{"class":1034},"`\n",[1002,27430,27431],{"class":1004,"line":1060},[1002,27432,27433],{"class":1034}," color: white;\n",[1002,27435,27436],{"class":1004,"line":1272},[1002,27437,27438],{"class":1034}," && :hover {\n",[1002,27440,27441],{"class":1004,"line":1348},[1002,27442,27443],{"class":1034}," color: blue;\n",[1002,27445,27446],{"class":1004,"line":1354},[1002,27447,1269],{"class":1034},[1002,27449,27450,27452],{"class":1004,"line":1360},[1002,27451,4639],{"class":1034},[1002,27453,1407],{"class":1030},[925,27455,26386],{},[7100,27457,27459],{"title":27458,"type":24048},"Specificity and using &&",[925,27460,27461,27462,27464],{},"We just have to use ",[1107,27463,13133],{}," to make our selector specific enough. Because both Styled Components and Material UI inject styles at the bottom of the head tag.",[953,27466,27468],{"id":27467},"using-themeprovider-for-avoiding-use-of-everywhere","Using ThemeProvider for avoiding use of && everywhere",[925,27470,27471,27472,27474],{},"If we want to be able to style our Material UI components without using ",[1107,27473,13133],{}," then we have to do the following:",[993,27476,27478],{"className":995,"code":27477,"language":997,"meta":998,"style":998},"import { StylesProvider } from '@material-ui\u002Fstyles';\nimport Button from '@material-ui\u002Fcore\u002FButton';\n\n\u003CStylesProvider injectFirst>\n \u003CButton>Hey there!\u003C\u002FButton>\n\u003C\u002FStylesProvider>;\n",[941,27479,27480,27494,27506,27510,27522,27536],{"__ignoreMap":998},[1002,27481,27482,27484,27487,27489,27492],{"class":1004,"line":1005},[1002,27483,943],{"class":1015},[1002,27485,27486],{"class":1030}," { StylesProvider } ",[1002,27488,1068],{"class":1015},[1002,27490,27491],{"class":1034}," '@material-ui\u002Fstyles'",[1002,27493,1407],{"class":1030},[1002,27495,27496,27498,27500,27502,27504],{"class":1004,"line":1012},[1002,27497,943],{"class":1015},[1002,27499,27399],{"class":1030},[1002,27501,1068],{"class":1015},[1002,27503,27404],{"class":1034},[1002,27505,1407],{"class":1030},[1002,27507,27508],{"class":1004,"line":1047},[1002,27509,1051],{"emptyLinePlaceholder":1050},[1002,27511,27512,27514,27517,27520],{"class":1004,"line":1054},[1002,27513,6539],{"class":1030},[1002,27515,27516],{"class":1019},"StylesProvider",[1002,27518,27519],{"class":1026}," injectFirst",[1002,27521,15703],{"class":1030},[1002,27523,27524,27526,27529,27532,27534],{"class":1004,"line":1060},[1002,27525,22427],{"class":1030},[1002,27527,27528],{"class":1019},"Button",[1002,27530,27531],{"class":1030},">Hey there!\u003C\u002F",[1002,27533,27528],{"class":1019},[1002,27535,15703],{"class":1030},[1002,27537,27538,27540,27542],{"class":1004,"line":1272},[1002,27539,22437],{"class":1030},[1002,27541,27516],{"class":1019},[1002,27543,21772],{"class":1030},[925,27545,27546],{},"All it does is ensure that Material UI’s styles get injected first so that Styled Components classes take priority.",[953,27548,27550],{"id":27549},"overriding-specific-material-ui-classes","Overriding Specific Material UI Classes",[925,27552,27553],{},"We still want to be able to override specific classes in our Material UI components.\nFor example, we may want to style our button label different from the default. Here is how you would do that:",[993,27555,27557],{"className":995,"code":27556,"language":997,"meta":998,"style":998},"import React from 'react';\nimport styled from 'styled-components';\nimport { StylesProvider } from '@material-ui\u002Fstyles';\nimport Button from \"@material-ui\u002Fcore\u002FButton\";\n\nconst CustomButton = styled(({...rest}) => (\n \u003CButton classes={{label: 'label'}} {...rest}\u002F>\n))`\n .label {\n color: blue;\n }\n`\n\n\u003CStylesProvider injectFirst>\n \u003CCustomButton>Blue Button\u003C\u002FCustomButton>\n\u003C\u002FStylesProvider>\n",[941,27558,27559,27571,27583,27595,27608,27612,27638,27663,27670,27675,27679,27683,27687,27691,27701,27715],{"__ignoreMap":998},[1002,27560,27561,27563,27565,27567,27569],{"class":1004,"line":1005},[1002,27562,943],{"class":1015},[1002,27564,21700],{"class":1030},[1002,27566,1068],{"class":1015},[1002,27568,15543],{"class":1034},[1002,27570,1407],{"class":1030},[1002,27572,27573,27575,27577,27579,27581],{"class":1004,"line":1012},[1002,27574,943],{"class":1015},[1002,27576,27385],{"class":1030},[1002,27578,1068],{"class":1015},[1002,27580,27390],{"class":1034},[1002,27582,1407],{"class":1030},[1002,27584,27585,27587,27589,27591,27593],{"class":1004,"line":1047},[1002,27586,943],{"class":1015},[1002,27588,27486],{"class":1030},[1002,27590,1068],{"class":1015},[1002,27592,27491],{"class":1034},[1002,27594,1407],{"class":1030},[1002,27596,27597,27599,27601,27603,27606],{"class":1004,"line":1054},[1002,27598,943],{"class":1015},[1002,27600,27399],{"class":1030},[1002,27602,1068],{"class":1015},[1002,27604,27605],{"class":1034}," \"@material-ui\u002Fcore\u002FButton\"",[1002,27607,1407],{"class":1030},[1002,27609,27610],{"class":1004,"line":1060},[1002,27611,1051],{"emptyLinePlaceholder":1050},[1002,27613,27614,27616,27619,27621,27623,27626,27628,27631,27634,27636],{"class":1004,"line":1272},[1002,27615,1016],{"class":1015},[1002,27617,27618],{"class":1019}," CustomButton",[1002,27620,1023],{"class":1015},[1002,27622,27422],{"class":1026},[1002,27624,27625],{"class":1030},"(({",[1002,27627,17625],{"class":1015},[1002,27629,27630],{"class":2378},"rest",[1002,27632,27633],{"class":1030},"}) ",[1002,27635,15497],{"class":1015},[1002,27637,15692],{"class":1030},[1002,27639,27640,27642,27644,27647,27649,27652,27655,27658,27660],{"class":1004,"line":1348},[1002,27641,22427],{"class":1030},[1002,27643,27528],{"class":1019},[1002,27645,27646],{"class":1026}," classes",[1002,27648,2393],{"class":1015},[1002,27650,27651],{"class":1030},"{{label: ",[1002,27653,27654],{"class":1034},"'label'",[1002,27656,27657],{"class":1030},"}} {",[1002,27659,17625],{"class":1015},[1002,27661,27662],{"class":1030},"rest}\u002F>\n",[1002,27664,27665,27668],{"class":1004,"line":1354},[1002,27666,27667],{"class":1030},"))",[1002,27669,27428],{"class":1034},[1002,27671,27672],{"class":1004,"line":1360},[1002,27673,27674],{"class":1034}," .label {\n",[1002,27676,27677],{"class":1004,"line":1366},[1002,27678,27443],{"class":1034},[1002,27680,27681],{"class":1004,"line":1946},[1002,27682,1269],{"class":1034},[1002,27684,27685],{"class":1004,"line":1956},[1002,27686,27428],{"class":1034},[1002,27688,27689],{"class":1004,"line":1961},[1002,27690,1051],{"emptyLinePlaceholder":1050},[1002,27692,27693,27695,27697,27699],{"class":1004,"line":1971},[1002,27694,6539],{"class":1030},[1002,27696,27516],{"class":1019},[1002,27698,27519],{"class":1026},[1002,27700,15703],{"class":1030},[1002,27702,27703,27705,27708,27711,27713],{"class":1004,"line":1980},[1002,27704,22427],{"class":1030},[1002,27706,27707],{"class":1019},"CustomButton",[1002,27709,27710],{"class":1030},">Blue Button\u003C\u002F",[1002,27712,27707],{"class":1019},[1002,27714,15703],{"class":1030},[1002,27716,27717,27719,27721],{"class":1004,"line":1985},[1002,27718,22437],{"class":1030},[1002,27720,27516],{"class":1019},[1002,27722,15703],{"class":1030},[925,27724,27725,27726,27729],{},"All we are doing is returning a button component with the label class renamed as ‘label’ instead of the Material UI class name ",[941,27727,27728],{},".MuiButton-label"," .\nWe spread the rest of the properties so that we can pass our MUI props as usual.",[953,27731,27733],{"id":27732},"passing-props-only-to-styled-components","Passing props only to Styled Components",[925,27735,27736],{},"If we want to pass props to Styled Components and we don’t want our MUI components to receive them, we can do that like so:",[993,27738,27740],{"className":995,"code":27739,"language":997,"meta":998,"style":998},"import React from 'react';\nimport styled from 'styled-components';\nimport { StylesProvider } from '@material-ui\u002Fstyles';\nimport Button from \"@material-ui\u002Fcore\u002FButton\";\n\nconst CustomButton = styled(({styledComponentProp, ...rest}) => (\n \u003CButton classes={{label: 'label'}} {...rest}\u002F>\n))`\n .label {\n color: blue;\n font-size: ${props => props.styledComponentProp};\n }\n`\n\n\u003CStylesProvider injectFirst>\n \u003CCustomButton styledComponentProp=\"20\">Blue Button\u003C\u002FCustomButton>\n\u003C\u002FStylesProvider>\n",[941,27741,27742,27754,27766,27778,27790,27794,27821,27841,27847,27851,27855,27873,27877,27881,27885,27895,27915],{"__ignoreMap":998},[1002,27743,27744,27746,27748,27750,27752],{"class":1004,"line":1005},[1002,27745,943],{"class":1015},[1002,27747,21700],{"class":1030},[1002,27749,1068],{"class":1015},[1002,27751,15543],{"class":1034},[1002,27753,1407],{"class":1030},[1002,27755,27756,27758,27760,27762,27764],{"class":1004,"line":1012},[1002,27757,943],{"class":1015},[1002,27759,27385],{"class":1030},[1002,27761,1068],{"class":1015},[1002,27763,27390],{"class":1034},[1002,27765,1407],{"class":1030},[1002,27767,27768,27770,27772,27774,27776],{"class":1004,"line":1047},[1002,27769,943],{"class":1015},[1002,27771,27486],{"class":1030},[1002,27773,1068],{"class":1015},[1002,27775,27491],{"class":1034},[1002,27777,1407],{"class":1030},[1002,27779,27780,27782,27784,27786,27788],{"class":1004,"line":1054},[1002,27781,943],{"class":1015},[1002,27783,27399],{"class":1030},[1002,27785,1068],{"class":1015},[1002,27787,27605],{"class":1034},[1002,27789,1407],{"class":1030},[1002,27791,27792],{"class":1004,"line":1060},[1002,27793,1051],{"emptyLinePlaceholder":1050},[1002,27795,27796,27798,27800,27802,27804,27806,27809,27811,27813,27815,27817,27819],{"class":1004,"line":1272},[1002,27797,1016],{"class":1015},[1002,27799,27618],{"class":1019},[1002,27801,1023],{"class":1015},[1002,27803,27422],{"class":1026},[1002,27805,27625],{"class":1030},[1002,27807,27808],{"class":2378},"styledComponentProp",[1002,27810,1251],{"class":1030},[1002,27812,17625],{"class":1015},[1002,27814,27630],{"class":2378},[1002,27816,27633],{"class":1030},[1002,27818,15497],{"class":1015},[1002,27820,15692],{"class":1030},[1002,27822,27823,27825,27827,27829,27831,27833,27835,27837,27839],{"class":1004,"line":1348},[1002,27824,22427],{"class":1030},[1002,27826,27528],{"class":1019},[1002,27828,27646],{"class":1026},[1002,27830,2393],{"class":1015},[1002,27832,27651],{"class":1030},[1002,27834,27654],{"class":1034},[1002,27836,27657],{"class":1030},[1002,27838,17625],{"class":1015},[1002,27840,27662],{"class":1030},[1002,27842,27843,27845],{"class":1004,"line":1354},[1002,27844,27667],{"class":1030},[1002,27846,27428],{"class":1034},[1002,27848,27849],{"class":1004,"line":1360},[1002,27850,27674],{"class":1034},[1002,27852,27853],{"class":1004,"line":1366},[1002,27854,27443],{"class":1034},[1002,27856,27857,27860,27862,27864,27867,27869,27871],{"class":1004,"line":1946},[1002,27858,27859],{"class":1034}," font-size: ${",[1002,27861,19533],{"class":1019},[1002,27863,20479],{"class":1015},[1002,27865,27866],{"class":1030}," props",[1002,27868,948],{"class":1034},[1002,27870,27808],{"class":1030},[1002,27872,1517],{"class":1034},[1002,27874,27875],{"class":1004,"line":1956},[1002,27876,1269],{"class":1034},[1002,27878,27879],{"class":1004,"line":1961},[1002,27880,27428],{"class":1034},[1002,27882,27883],{"class":1004,"line":1971},[1002,27884,1051],{"emptyLinePlaceholder":1050},[1002,27886,27887,27889,27891,27893],{"class":1004,"line":1980},[1002,27888,6539],{"class":1030},[1002,27890,27516],{"class":1019},[1002,27892,27519],{"class":1026},[1002,27894,15703],{"class":1030},[1002,27896,27897,27899,27901,27904,27906,27909,27911,27913],{"class":1004,"line":1985},[1002,27898,22427],{"class":1030},[1002,27900,27707],{"class":1019},[1002,27902,27903],{"class":1026}," styledComponentProp",[1002,27905,2393],{"class":1015},[1002,27907,27908],{"class":1034},"\"20\"",[1002,27910,27710],{"class":1030},[1002,27912,27707],{"class":1019},[1002,27914,15703],{"class":1030},[1002,27916,27917,27919,27921],{"class":1004,"line":1995},[1002,27918,22437],{"class":1030},[1002,27920,27516],{"class":1019},[1002,27922,15703],{"class":1030},[953,27924,27926],{"id":27925},"leverage-material-ui-theme","Leverage Material UI Theme",[925,27928,27929],{},"Material UI has a very thorough theme based on Material Design principles. If you’re using the component library, chances are you aren’t trying to build a theme from scratch either.\nWe can leverage the Material UI theme quite easily. We just pass in the theme to our Styled Components ThemeProvider:",[993,27931,27933],{"className":995,"code":27932,"language":997,"meta":998,"style":998},"import React from 'react';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { createMuiTheme } from '@material-ui\u002Fcore\u002Fstyles';\nimport Button from '@material-ui\u002Fcore\u002FButton';\n\nconst theme = createMuiTheme();\n\nconst StyledButton = styled(Button)`\n color: ${(props) => props.theme.palette.primary.main};\n`;\n\nexport default () => (\n \u003CThemeProvider theme={theme}>\n \u003CStyledButton>Styled Components\u003C\u002FStyledButton>\n \u003C\u002FThemeProvider>\n);\n",[941,27934,27935,27947,27960,27974,27986,27990,28004,28008,28022,28058,28064,28068,28080,28094,28108,28117],{"__ignoreMap":998},[1002,27936,27937,27939,27941,27943,27945],{"class":1004,"line":1005},[1002,27938,943],{"class":1015},[1002,27940,21700],{"class":1030},[1002,27942,1068],{"class":1015},[1002,27944,15543],{"class":1034},[1002,27946,1407],{"class":1030},[1002,27948,27949,27951,27954,27956,27958],{"class":1004,"line":1012},[1002,27950,943],{"class":1015},[1002,27952,27953],{"class":1030}," styled, { ThemeProvider } ",[1002,27955,1068],{"class":1015},[1002,27957,27390],{"class":1034},[1002,27959,1407],{"class":1030},[1002,27961,27962,27964,27967,27969,27972],{"class":1004,"line":1047},[1002,27963,943],{"class":1015},[1002,27965,27966],{"class":1030}," { createMuiTheme } ",[1002,27968,1068],{"class":1015},[1002,27970,27971],{"class":1034}," '@material-ui\u002Fcore\u002Fstyles'",[1002,27973,1407],{"class":1030},[1002,27975,27976,27978,27980,27982,27984],{"class":1004,"line":1054},[1002,27977,943],{"class":1015},[1002,27979,27399],{"class":1030},[1002,27981,1068],{"class":1015},[1002,27983,27404],{"class":1034},[1002,27985,1407],{"class":1030},[1002,27987,27988],{"class":1004,"line":1060},[1002,27989,1051],{"emptyLinePlaceholder":1050},[1002,27991,27992,27994,27997,27999,28002],{"class":1004,"line":1272},[1002,27993,1016],{"class":1015},[1002,27995,27996],{"class":1019}," theme",[1002,27998,1023],{"class":1015},[1002,28000,28001],{"class":1026}," createMuiTheme",[1002,28003,1428],{"class":1030},[1002,28005,28006],{"class":1004,"line":1348},[1002,28007,1051],{"emptyLinePlaceholder":1050},[1002,28009,28010,28012,28014,28016,28018,28020],{"class":1004,"line":1354},[1002,28011,1016],{"class":1015},[1002,28013,27417],{"class":1019},[1002,28015,1023],{"class":1015},[1002,28017,27422],{"class":1026},[1002,28019,27425],{"class":1030},[1002,28021,27428],{"class":1034},[1002,28023,28024,28027,28029,28031,28033,28035,28037,28039,28042,28044,28047,28049,28052,28054,28056],{"class":1004,"line":1360},[1002,28025,28026],{"class":1034}," color: ${",[1002,28028,1031],{"class":1034},[1002,28030,19533],{"class":1019},[1002,28032,5876],{"class":1034},[1002,28034,15497],{"class":1015},[1002,28036,27866],{"class":1030},[1002,28038,948],{"class":1034},[1002,28040,28041],{"class":1030},"theme",[1002,28043,948],{"class":1034},[1002,28045,28046],{"class":1030},"palette",[1002,28048,948],{"class":1034},[1002,28050,28051],{"class":1030},"primary",[1002,28053,948],{"class":1034},[1002,28055,20008],{"class":1030},[1002,28057,1517],{"class":1034},[1002,28059,28060,28062],{"class":1004,"line":1366},[1002,28061,4639],{"class":1034},[1002,28063,1407],{"class":1030},[1002,28065,28066],{"class":1004,"line":1946},[1002,28067,1051],{"emptyLinePlaceholder":1050},[1002,28069,28070,28072,28074,28076,28078],{"class":1004,"line":1956},[1002,28071,947],{"class":1015},[1002,28073,15641],{"class":1015},[1002,28075,17297],{"class":1030},[1002,28077,15497],{"class":1015},[1002,28079,15692],{"class":1030},[1002,28081,28082,28084,28087,28089,28091],{"class":1004,"line":1961},[1002,28083,22427],{"class":1030},[1002,28085,28086],{"class":1019},"ThemeProvider",[1002,28088,27996],{"class":1026},[1002,28090,2393],{"class":1015},[1002,28092,28093],{"class":1030},"{theme}>\n",[1002,28095,28096,28098,28101,28104,28106],{"class":1004,"line":1971},[1002,28097,15697],{"class":1030},[1002,28099,28100],{"class":1019},"StyledButton",[1002,28102,28103],{"class":1030},">Styled Components\u003C\u002F",[1002,28105,28100],{"class":1019},[1002,28107,15703],{"class":1030},[1002,28109,28110,28113,28115],{"class":1004,"line":1980},[1002,28111,28112],{"class":1030}," \u003C\u002F",[1002,28114,28086],{"class":1019},[1002,28116,15703],{"class":1030},[1002,28118,28119],{"class":1004,"line":1985},[1002,28120,1085],{"class":1030},[953,28122,26561],{"id":26560},[925,28124,28125],{},"The Material UI docs have more detailed information, but hopefully, this gave a much quicker overview on how you would use these techniques to leverage both libraries, and why.",[1579,28127,28128],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":28130},[28131,28132,28133,28134,28135,28136,28137],{"id":27325,"depth":1012,"text":27326},{"id":27332,"depth":1012,"text":27333},{"id":27467,"depth":1012,"text":27468},{"id":27549,"depth":1012,"text":27550},{"id":27732,"depth":1012,"text":27733},{"id":27925,"depth":1012,"text":27926},{"id":26560,"depth":1012,"text":26561},"2020-03-16","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-component-library-with-material-ui.jpg",{},{"title":646,"description":648},"blog\u002Freact-component-library-with-material-ui",[16,17,40,650],"uRmxPtRyKpXOrdVOUzifmo9IjvXnm3nIlHh_fGwa_E4",{"id":28146,"title":600,"author":920,"body":28147,"date":28499,"description":602,"extension":1591,"image":28500,"meta":28501,"navigation":1050,"path":601,"seo":28502,"stem":28503,"tags":28504,"__hash__":28505},"blog\u002Fblog\u002Fnodejs-memory-management.md",{"type":922,"value":28148,"toc":28491},[28149,28153,28162,28166,28169,28176,28182,28189,28192,28198,28202,28210,28216,28219,28225,28228,28232,28235,28457,28460,28466,28470,28473,28488],[953,28150,28152],{"id":28151},"heap","Heap",[925,28154,28155,28156,28158,28159,948],{},"The memory space managed by Node is called ",[1107,28157,28152],{},".\nHeap is divided into several different spaces called ",[1107,28160,28161],{},"Generations",[1655,28163,28165],{"id":28164},"new-space","New Space",[925,28167,28168],{},"New Space is where objects are first created. It is designed to be small and fast to garbage collect.",[925,28170,28171,28172,28175],{},"Memory in a new space is managed by a ",[1107,28173,28174],{},"pointer",". When a new space is created the pointer moves to the next free spot.",[925,28177,28178],{},[963,28179],{"alt":28180,"src":28181},"New space","\u002Fimages\u002Fblog\u002F2020-02-21-nodejs-memory-management\u002FBC6DED4D-075E-4885-8193-F136B162BE3D.png",[925,28183,28184,28185,28188],{},"When the pointer reaches the end of the space, it goes into a ",[928,28186,28187],{},"Scavenge"," operation to identify all of the objects in memory that no longer referenced.",[925,28190,28191],{},"Then it removes these, unpacks the memory and re-allocate the pointer to the next available free spot.",[925,28193,28194],{},[963,28195],{"alt":28196,"src":28197},"Next free spot","\u002Fimages\u002Fblog\u002F2020-02-21-nodejs-memory-management\u002FC08C9569-E8FC-4F5F-8331-2EE4F9F6EAA9.png",[1655,28199,28201],{"id":28200},"old-space","Old Space",[925,28203,28204,28205,28209],{},"Objects that survive ",[28206,28207,28208],"del",{},"two garbage collection operations"," are promoted into the old space.",[925,28211,28212,28213],{},"Old space is much larger than the new space, so it implements a different garbage collection algorithm - ",[928,28214,28215],{},"Mark-sweep",[925,28217,28218],{},"The GC marks the objects being referenced. Anything not marked is unreachable, and the sweep process will remove them.",[925,28220,28221],{},[963,28222],{"alt":28223,"src":28224},"Mark sweep","\u002Fimages\u002Fblog\u002F2020-02-21-nodejs-memory-management\u002F95A359CC-5C9E-49AF-89A8-D828AB1F9F45.png",[925,28226,28227],{},"The GC stops the process, hence not performant.",[953,28229,28231],{"id":28230},"load-test","Load Test",[925,28233,28234],{},"To perform a load test, let's create a Node.js server.",[993,28236,28238],{"className":995,"code":28237,"language":997,"meta":998,"style":998},"var http = require('http');\nvar heapdump = require('heapdump');\n\nfunction Bigata() {\n var mem = Array(1000000).join('a');\n}\n\nvar leak = [];\n\nvar server = http.createServer(function (request, response) {\n if ((request.uri = '\u002F')) {\n \u002F\u002F leak.push(new Biglata);\n response.writeHead(200, { 'Content—Type': 'text\u002Fhtml' });\n response.end('Hello World!');\n }\n});\n\nserver.listen(3000);\n",[941,28239,28240,28258,28276,28280,28289,28318,28322,28326,28337,28341,28371,28386,28391,28418,28432,28436,28440,28444],{"__ignoreMap":998},[1002,28241,28242,28244,28247,28249,28251,28253,28256],{"class":1004,"line":1005},[1002,28243,18311],{"class":1015},[1002,28245,28246],{"class":1030}," http ",[1002,28248,2393],{"class":1015},[1002,28250,1027],{"class":1026},[1002,28252,1031],{"class":1030},[1002,28254,28255],{"class":1034},"'http'",[1002,28257,1085],{"class":1030},[1002,28259,28260,28262,28265,28267,28269,28271,28274],{"class":1004,"line":1012},[1002,28261,18311],{"class":1015},[1002,28263,28264],{"class":1030}," heapdump ",[1002,28266,2393],{"class":1015},[1002,28268,1027],{"class":1026},[1002,28270,1031],{"class":1030},[1002,28272,28273],{"class":1034},"'heapdump'",[1002,28275,1085],{"class":1030},[1002,28277,28278],{"class":1004,"line":1047},[1002,28279,1051],{"emptyLinePlaceholder":1050},[1002,28281,28282,28284,28287],{"class":1004,"line":1054},[1002,28283,6965],{"class":1015},[1002,28285,28286],{"class":1026}," Bigata",[1002,28288,3025],{"class":1030},[1002,28290,28291,28294,28297,28299,28302,28304,28307,28309,28311,28313,28316],{"class":1004,"line":1060},[1002,28292,28293],{"class":1015}," var",[1002,28295,28296],{"class":1030}," mem ",[1002,28298,2393],{"class":1015},[1002,28300,28301],{"class":1026}," Array",[1002,28303,1031],{"class":1030},[1002,28305,28306],{"class":1019},"1000000",[1002,28308,1539],{"class":1030},[1002,28310,7504],{"class":1026},[1002,28312,1031],{"class":1030},[1002,28314,28315],{"class":1034},"'a'",[1002,28317,1085],{"class":1030},[1002,28319,28320],{"class":1004,"line":1272},[1002,28321,1170],{"class":1030},[1002,28323,28324],{"class":1004,"line":1348},[1002,28325,1051],{"emptyLinePlaceholder":1050},[1002,28327,28328,28330,28333,28335],{"class":1004,"line":1354},[1002,28329,18311],{"class":1015},[1002,28331,28332],{"class":1030}," leak ",[1002,28334,2393],{"class":1015},[1002,28336,4924],{"class":1030},[1002,28338,28339],{"class":1004,"line":1360},[1002,28340,1051],{"emptyLinePlaceholder":1050},[1002,28342,28343,28345,28348,28350,28353,28356,28358,28360,28362,28364,28366,28369],{"class":1004,"line":1366},[1002,28344,18311],{"class":1015},[1002,28346,28347],{"class":1030}," server ",[1002,28349,2393],{"class":1015},[1002,28351,28352],{"class":1030}," http.",[1002,28354,28355],{"class":1026},"createServer",[1002,28357,1031],{"class":1030},[1002,28359,6965],{"class":1015},[1002,28361,6513],{"class":1030},[1002,28363,4786],{"class":2378},[1002,28365,1251],{"class":1030},[1002,28367,28368],{"class":2378},"response",[1002,28370,2382],{"class":1030},[1002,28372,28373,28375,28378,28380,28383],{"class":1004,"line":1946},[1002,28374,19971],{"class":1015},[1002,28376,28377],{"class":1030}," ((request.uri ",[1002,28379,2393],{"class":1015},[1002,28381,28382],{"class":1034}," '\u002F'",[1002,28384,28385],{"class":1030},")) {\n",[1002,28387,28388],{"class":1004,"line":1956},[1002,28389,28390],{"class":1008}," \u002F\u002F leak.push(new Biglata);\n",[1002,28392,28393,28396,28399,28401,28404,28407,28410,28412,28415],{"class":1004,"line":1961},[1002,28394,28395],{"class":1030}," response.",[1002,28397,28398],{"class":1026},"writeHead",[1002,28400,1031],{"class":1030},[1002,28402,28403],{"class":1019},"200",[1002,28405,28406],{"class":1030},", { ",[1002,28408,28409],{"class":1034},"'Content—Type'",[1002,28411,1137],{"class":1030},[1002,28413,28414],{"class":1034},"'text\u002Fhtml'",[1002,28416,28417],{"class":1030}," });\n",[1002,28419,28420,28422,28425,28427,28430],{"class":1004,"line":1971},[1002,28421,28395],{"class":1030},[1002,28423,28424],{"class":1026},"end",[1002,28426,1031],{"class":1030},[1002,28428,28429],{"class":1034},"'Hello World!'",[1002,28431,1085],{"class":1030},[1002,28433,28434],{"class":1004,"line":1980},[1002,28435,1269],{"class":1030},[1002,28437,28438],{"class":1004,"line":1985},[1002,28439,2804],{"class":1030},[1002,28441,28442],{"class":1004,"line":1995},[1002,28443,1051],{"emptyLinePlaceholder":1050},[1002,28445,28446,28449,28451,28453,28455],{"class":1004,"line":2006},[1002,28447,28448],{"class":1030},"server.",[1002,28450,22260],{"class":1026},[1002,28452,1031],{"class":1030},[1002,28454,20832],{"class":1019},[1002,28456,1085],{"class":1030},[925,28458,28459],{},"We can then profile the resulting web page in Chrome DevTools.",[925,28461,28462],{},[963,28463],{"alt":28464,"src":28465},"Load test console","\u002Fimages\u002Fblog\u002F2020-02-21-nodejs-memory-management\u002F4F1F93BE-35AC-40EC-8910-6E39634DD9F1.png",[953,28467,28469],{"id":28468},"trace","Trace",[925,28471,28472],{},"To trace the server, run the following command:",[993,28474,28476],{"className":1797,"code":28475,"language":1799,"meta":998,"style":998},"node --trace_gc server.js\n",[941,28477,28478],{"__ignoreMap":998},[1002,28479,28480,28482,28485],{"class":1004,"line":1005},[1002,28481,12108],{"class":1026},[1002,28483,28484],{"class":1019}," --trace_gc",[1002,28486,28487],{"class":1034}," server.js\n",[1579,28489,28490],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":28492},[28493,28497,28498],{"id":28151,"depth":1012,"text":28152,"children":28494},[28495,28496],{"id":28164,"depth":1047,"text":28165},{"id":28200,"depth":1047,"text":28201},{"id":28230,"depth":1012,"text":28231},{"id":28468,"depth":1012,"text":28469},"2020-02-21","\u002Fimages\u002Fblog\u002Ffeatures\u002Fnodejs-memory-management.jpg",{},{"title":600,"description":602},"blog\u002Fnodejs-memory-management",[16,17,442],"rdsxLc6jjpQBTDQ8qjzh7CXt8MGX-qMkku-YeK5J5YE",{"id":28507,"title":652,"author":920,"body":28508,"date":29477,"description":654,"extension":1591,"image":29478,"meta":29479,"navigation":1050,"path":653,"seo":29480,"stem":29481,"tags":29482,"__hash__":29483},"blog\u002Fblog\u002Freact-concurrent-mode.md",{"type":922,"value":28509,"toc":29469},[28510,28522,28525,28529,28532,28535,28538,28542,28546,28553,28559,28563,28566,28583,28586,28589,28601,28604,28708,28712,28715,28723,28726,28732,28735,28945,28948,29040,29043,29450,29453,29466],[7100,28511,28513],{"title":28512,"type":24048},"Previous workarounds",[925,28514,28515,2034,28518,28521],{},[928,28516,28517],{},"Debounce",[928,28519,28520],{},"throttle"," are common workarounds to mitigate for example stutter in an input field while typing.",[925,28523,28524],{},"Debounce – Only update the list after the user stops typing\nThrottle – Update the list with a certain maximum frequency",[953,28526,28528],{"id":28527},"similar-to-git-branches","Similar to git branches",[925,28530,28531],{},"Concurrent Mode is like React working on git branches.",[925,28533,28534],{},"Eg:- Navigating between two screens in an app",[925,28536,28537],{},"In React Concurrent Mode, we can tell React to keep showing the old screen(like another git branch), fully interactive, with an inline loading indicator. And when the new screen is ready, React can take us to it.",[953,28539,28541],{"id":28540},"concurrency","Concurrency",[1655,28543,28545],{"id":28544},"cpu","CPU",[925,28547,28548,28549,28552],{},"For ",[941,28550,28551],{},"CPU-bound updates"," like creating DOM nodes and running component code, concurrency means that a more urgent update can “interrupt” rendering that has already started.",[925,28554,28548,28555,28558],{},[941,28556,28557],{},"IO-bound updates"," like fetching code or data from the network, concurrency means that React can start rendering in memory even before all the data arrives, and skip showing jarring empty loading states.",[1655,28560,28562],{"id":28561},"install","Install",[925,28564,28565],{},"Install the experimental version of react and react-dom.",[993,28567,28569],{"className":1797,"code":28568,"language":1799,"meta":998,"style":998},"yarn add react@experimental react-dom@experimental\n",[941,28570,28571],{"__ignoreMap":998},[1002,28572,28573,28575,28577,28580],{"class":1004,"line":1005},[1002,28574,27365],{"class":1026},[1002,28576,27368],{"class":1034},[1002,28578,28579],{"class":1034}," react@experimental",[1002,28581,28582],{"class":1034}," react-dom@experimental\n",[925,28584,28585],{},"Run your app, run your build, run your tests\u002Ftype checking and make sure there are no issues.",[925,28587,28588],{},"Likely issues:",[1530,28590,28591,28594],{},[974,28592,28593],{},"String Refs, Legacy Context, or findDOMNode",[974,28595,28596,28597,28600],{},"All the lifecycle methods that have the ",[941,28598,28599],{},"unsafe_"," prefix",[925,28602,28603],{},"Enable Concurrent Mode:",[993,28605,28607],{"className":995,"code":28606,"language":997,"meta":998,"style":998},"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\u002Fapp';\n\nconst rootElement = document.getElementById('root');\n\u002F\u002F ReactDOM.render(\u003CApp \u002F>, rootEl)\nconst root = ReactDOM.createRoot(rootElement);\nroot.render(\u003CApp \u002F>);\n",[941,28608,28609,28621,28635,28649,28653,28672,28677,28695],{"__ignoreMap":998},[1002,28610,28611,28613,28615,28617,28619],{"class":1004,"line":1005},[1002,28612,943],{"class":1015},[1002,28614,21700],{"class":1030},[1002,28616,1068],{"class":1015},[1002,28618,15543],{"class":1034},[1002,28620,1407],{"class":1030},[1002,28622,28623,28625,28628,28630,28633],{"class":1004,"line":1012},[1002,28624,943],{"class":1015},[1002,28626,28627],{"class":1030}," ReactDOM ",[1002,28629,1068],{"class":1015},[1002,28631,28632],{"class":1034}," 'react-dom'",[1002,28634,1407],{"class":1030},[1002,28636,28637,28639,28642,28644,28647],{"class":1004,"line":1047},[1002,28638,943],{"class":1015},[1002,28640,28641],{"class":1030}," App ",[1002,28643,1068],{"class":1015},[1002,28645,28646],{"class":1034}," '.\u002Fapp'",[1002,28648,1407],{"class":1030},[1002,28650,28651],{"class":1004,"line":1054},[1002,28652,1051],{"emptyLinePlaceholder":1050},[1002,28654,28655,28657,28660,28662,28664,28666,28668,28670],{"class":1004,"line":1060},[1002,28656,1016],{"class":1015},[1002,28658,28659],{"class":1019}," rootElement",[1002,28661,1023],{"class":1015},[1002,28663,16142],{"class":1030},[1002,28665,16591],{"class":1026},[1002,28667,1031],{"class":1030},[1002,28669,12223],{"class":1034},[1002,28671,1085],{"class":1030},[1002,28673,28674],{"class":1004,"line":1272},[1002,28675,28676],{"class":1008},"\u002F\u002F ReactDOM.render(\u003CApp \u002F>, rootEl)\n",[1002,28678,28679,28681,28684,28686,28689,28692],{"class":1004,"line":1348},[1002,28680,1016],{"class":1015},[1002,28682,28683],{"class":1019}," root",[1002,28685,1023],{"class":1015},[1002,28687,28688],{"class":1030}," ReactDOM.",[1002,28690,28691],{"class":1026},"createRoot",[1002,28693,28694],{"class":1030},"(rootElement);\n",[1002,28696,28697,28700,28702,28704,28706],{"class":1004,"line":1354},[1002,28698,28699],{"class":1030},"root.",[1002,28701,19545],{"class":1026},[1002,28703,21269],{"class":1030},[1002,28705,22209],{"class":1019},[1002,28707,21275],{"class":1030},[953,28709,28711],{"id":28710},"try-concurrent-mode","Try Concurrent Mode",[925,28713,28714],{},"Concurrent Mode enables two new features:",[1530,28716,28717,28720],{},[974,28718,28719],{},"Time slicing",[974,28721,28722],{},"Suspense for everything asynchronous",[925,28724,28725],{},"Let’s create an app for testing out these features with create-react-app.",[7100,28727,28729],{"title":28728,"type":23379},"Experimental",[925,28730,28731],{},"The API for suspense is likely to change before suspense is officially released, so this is still in experimental stage.",[925,28733,28734],{},"Write a function for creating an actor when an actor name is provided in the input field:",[993,28736,28738],{"className":995,"code":28737,"language":997,"meta":998,"style":998},"function createActor(name) {\n let status = 'pending';\n let result;\n let suspender = getActor(name).then(\n (name) => {\n status = 'success';\n result = name;\n },\n (error) => {\n status = 'error';\n result = error;\n },\n );\n return {\n read() {\n if (status === 'pending') throw suspender;\n if (status === 'error') throw result;\n if (status === 'success') return result;\n },\n };\n}\n",[941,28739,28740,28753,28767,28773,28792,28805,28817,28825,28829,28841,28852,28861,28865,28869,28875,28882,28901,28917,28933,28937,28941],{"__ignoreMap":998},[1002,28741,28742,28744,28747,28749,28751],{"class":1004,"line":1005},[1002,28743,6965],{"class":1015},[1002,28745,28746],{"class":1026}," createActor",[1002,28748,1031],{"class":1030},[1002,28750,5911],{"class":2378},[1002,28752,2382],{"class":1030},[1002,28754,28755,28757,28760,28762,28765],{"class":1004,"line":1012},[1002,28756,26884],{"class":1015},[1002,28758,28759],{"class":1030}," status ",[1002,28761,2393],{"class":1015},[1002,28763,28764],{"class":1034}," 'pending'",[1002,28766,1407],{"class":1030},[1002,28768,28769,28771],{"class":1004,"line":1047},[1002,28770,26884],{"class":1015},[1002,28772,17691],{"class":1030},[1002,28774,28775,28777,28780,28782,28785,28788,28790],{"class":1004,"line":1054},[1002,28776,26884],{"class":1015},[1002,28778,28779],{"class":1030}," suspender ",[1002,28781,2393],{"class":1015},[1002,28783,28784],{"class":1026}," getActor",[1002,28786,28787],{"class":1030},"(name).",[1002,28789,25658],{"class":1026},[1002,28791,10468],{"class":1030},[1002,28793,28794,28797,28799,28801,28803],{"class":1004,"line":1060},[1002,28795,28796],{"class":1030}," (",[1002,28798,5911],{"class":2378},[1002,28800,5876],{"class":1030},[1002,28802,15497],{"class":1015},[1002,28804,1457],{"class":1030},[1002,28806,28807,28810,28812,28815],{"class":1004,"line":1272},[1002,28808,28809],{"class":1030}," status ",[1002,28811,2393],{"class":1015},[1002,28813,28814],{"class":1034}," 'success'",[1002,28816,1407],{"class":1030},[1002,28818,28819,28821,28823],{"class":1004,"line":1348},[1002,28820,12966],{"class":1030},[1002,28822,2393],{"class":1015},[1002,28824,5950],{"class":1030},[1002,28826,28827],{"class":1004,"line":1354},[1002,28828,15108],{"class":1030},[1002,28830,28831,28833,28835,28837,28839],{"class":1004,"line":1360},[1002,28832,28796],{"class":1030},[1002,28834,25064],{"class":2378},[1002,28836,5876],{"class":1030},[1002,28838,15497],{"class":1015},[1002,28840,1457],{"class":1030},[1002,28842,28843,28845,28847,28850],{"class":1004,"line":1366},[1002,28844,28809],{"class":1030},[1002,28846,2393],{"class":1015},[1002,28848,28849],{"class":1034}," 'error'",[1002,28851,1407],{"class":1030},[1002,28853,28854,28856,28858],{"class":1004,"line":1946},[1002,28855,12966],{"class":1030},[1002,28857,2393],{"class":1015},[1002,28859,28860],{"class":1030}," error;\n",[1002,28862,28863],{"class":1004,"line":1956},[1002,28864,15108],{"class":1030},[1002,28866,28867],{"class":1004,"line":1961},[1002,28868,10503],{"class":1030},[1002,28870,28871,28873],{"class":1004,"line":1971},[1002,28872,15066],{"class":1015},[1002,28874,1457],{"class":1030},[1002,28876,28877,28880],{"class":1004,"line":1980},[1002,28878,28879],{"class":1026}," read",[1002,28881,3025],{"class":1030},[1002,28883,28884,28886,28889,28891,28893,28895,28898],{"class":1004,"line":1985},[1002,28885,8328],{"class":1015},[1002,28887,28888],{"class":1030}," (status ",[1002,28890,2892],{"class":1015},[1002,28892,28764],{"class":1034},[1002,28894,5876],{"class":1030},[1002,28896,28897],{"class":1015},"throw",[1002,28899,28900],{"class":1030}," suspender;\n",[1002,28902,28903,28905,28907,28909,28911,28913,28915],{"class":1004,"line":1995},[1002,28904,8328],{"class":1015},[1002,28906,28888],{"class":1030},[1002,28908,2892],{"class":1015},[1002,28910,28849],{"class":1034},[1002,28912,5876],{"class":1030},[1002,28914,28897],{"class":1015},[1002,28916,17691],{"class":1030},[1002,28918,28919,28921,28923,28925,28927,28929,28931],{"class":1004,"line":2006},[1002,28920,8328],{"class":1015},[1002,28922,28888],{"class":1030},[1002,28924,2892],{"class":1015},[1002,28926,28814],{"class":1034},[1002,28928,5876],{"class":1030},[1002,28930,8975],{"class":1015},[1002,28932,17691],{"class":1030},[1002,28934,28935],{"class":1004,"line":2011},[1002,28936,15108],{"class":1030},[1002,28938,28939],{"class":1004,"line":2017},[1002,28940,15113],{"class":1030},[1002,28942,28943],{"class":1004,"line":2022},[1002,28944,1170],{"class":1030},[925,28946,28947],{},"Let’s create a function to imitate an HTTP request:",[993,28949,28951],{"className":995,"code":28950,"language":997,"meta":998,"style":998},"function getActor(name) {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve(`Your favorite actor is ${name}!`);\n \u002F\u002F Uncomment below to test rejecting instead\n \u002F\u002F reject(new Error(`Oops! could not load message for ${name}`))\n }, 1000);\n });\n}\n",[941,28952,28953,28965,28987,28997,29014,29019,29024,29032,29036],{"__ignoreMap":998},[1002,28954,28955,28957,28959,28961,28963],{"class":1004,"line":1005},[1002,28956,6965],{"class":1015},[1002,28958,28784],{"class":1026},[1002,28960,1031],{"class":1030},[1002,28962,5911],{"class":2378},[1002,28964,2382],{"class":1030},[1002,28966,28967,28969,28971,28973,28975,28977,28979,28981,28983,28985],{"class":1004,"line":1012},[1002,28968,15066],{"class":1015},[1002,28970,2690],{"class":1015},[1002,28972,25561],{"class":1019},[1002,28974,21121],{"class":1030},[1002,28976,1243],{"class":2378},[1002,28978,1251],{"class":1030},[1002,28980,25597],{"class":2378},[1002,28982,5876],{"class":1030},[1002,28984,15497],{"class":1015},[1002,28986,1457],{"class":1030},[1002,28988,28989,28991,28993,28995],{"class":1004,"line":1047},[1002,28990,21024],{"class":1026},[1002,28992,15494],{"class":1030},[1002,28994,15497],{"class":1015},[1002,28996,1457],{"class":1030},[1002,28998,28999,29002,29004,29007,29009,29012],{"class":1004,"line":1054},[1002,29000,29001],{"class":1026}," resolve",[1002,29003,1031],{"class":1030},[1002,29005,29006],{"class":1034},"`Your favorite actor is ${",[1002,29008,5911],{"class":1030},[1002,29010,29011],{"class":1034},"}!`",[1002,29013,1085],{"class":1030},[1002,29015,29016],{"class":1004,"line":1060},[1002,29017,29018],{"class":1008}," \u002F\u002F Uncomment below to test rejecting instead\n",[1002,29020,29021],{"class":1004,"line":1272},[1002,29022,29023],{"class":1008}," \u002F\u002F reject(new Error(`Oops! could not load message for ${name}`))\n",[1002,29025,29026,29028,29030],{"class":1004,"line":1348},[1002,29027,20829],{"class":1030},[1002,29029,6370],{"class":1019},[1002,29031,1085],{"class":1030},[1002,29033,29034],{"class":1004,"line":1354},[1002,29035,19836],{"class":1030},[1002,29037,29038],{"class":1004,"line":1360},[1002,29039,1170],{"class":1030},[925,29041,29042],{},"Now we can create a form so we can use the above functions",[993,29044,29046],{"className":995,"code":29045,"language":997,"meta":998,"style":998},"function Form() {\n const [actor, setActor] = useState(null);\n const [startTransition, isPending] = useTransition({\n timeoutMs: 3000,\n });\n\n function handleSubmit(event) {\n event.preventDefault();\n const name = event.target.elements.nameInput.value;\n startTransition(() => {\n setActor(createActor(name));\n });\n }\n\n return (\n \u003Cdiv>\n \u003Cform onSubmit={handleSubmit}>\n \u003Clabel htmlFor=\"nameInput\">Name\u003C\u002Flabel> \n \u003Cinput id=\"nameInput\" \u002F>\n  \n \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n \u003C\u002Fform>\n \u003CSuspense fallback={\u003Cp>Loading...\u003C\u002Fp>}>\n ::message{(type = 'info')}\n ::\n \u003C\u002FSuspense>\n \u003C\u002Fdiv>\n );\n}\n\nfunction Message({ actor, isPending }) {\n return (\n \u003Cp style={{ opacity: isPending ? 0.4 : 1 }}>\n {actor ? actor.read() : 'Please provide an actor'}\n \u003C\u002Fp>\n );\n}\n",[941,29047,29048,29057,29083,29106,29115,29119,29123,29136,29146,29157,29168,29181,29185,29189,29193,29199,29207,29222,29247,29261,29266,29287,29295,29316,29329,29334,29342,29350,29354,29358,29362,29379,29385,29412,29434,29442,29446],{"__ignoreMap":998},[1002,29049,29050,29052,29055],{"class":1004,"line":1005},[1002,29051,6965],{"class":1015},[1002,29053,29054],{"class":1026}," Form",[1002,29056,3025],{"class":1030},[1002,29058,29059,29061,29063,29066,29068,29071,29073,29075,29077,29079,29081],{"class":1004,"line":1012},[1002,29060,10423],{"class":1015},[1002,29062,1897],{"class":1030},[1002,29064,29065],{"class":1019},"actor",[1002,29067,1251],{"class":1030},[1002,29069,29070],{"class":1019},"setActor",[1002,29072,18338],{"class":1030},[1002,29074,2393],{"class":1015},[1002,29076,19810],{"class":1026},[1002,29078,1031],{"class":1030},[1002,29080,26077],{"class":1019},[1002,29082,1085],{"class":1030},[1002,29084,29085,29087,29089,29092,29094,29097,29099,29101,29104],{"class":1004,"line":1047},[1002,29086,10423],{"class":1015},[1002,29088,1897],{"class":1030},[1002,29090,29091],{"class":1019},"startTransition",[1002,29093,1251],{"class":1030},[1002,29095,29096],{"class":1019},"isPending",[1002,29098,18338],{"class":1030},[1002,29100,2393],{"class":1015},[1002,29102,29103],{"class":1026}," useTransition",[1002,29105,2756],{"class":1030},[1002,29107,29108,29111,29113],{"class":1004,"line":1054},[1002,29109,29110],{"class":1030}," timeoutMs: ",[1002,29112,20832],{"class":1019},[1002,29114,1143],{"class":1030},[1002,29116,29117],{"class":1004,"line":1060},[1002,29118,19836],{"class":1030},[1002,29120,29121],{"class":1004,"line":1272},[1002,29122,1051],{"emptyLinePlaceholder":1050},[1002,29124,29125,29127,29130,29132,29134],{"class":1004,"line":1348},[1002,29126,18965],{"class":1015},[1002,29128,29129],{"class":1026}," handleSubmit",[1002,29131,1031],{"class":1030},[1002,29133,16696],{"class":2378},[1002,29135,2382],{"class":1030},[1002,29137,29138,29141,29144],{"class":1004,"line":1354},[1002,29139,29140],{"class":1030}," event.",[1002,29142,29143],{"class":1026},"preventDefault",[1002,29145,1428],{"class":1030},[1002,29147,29148,29150,29152,29154],{"class":1004,"line":1360},[1002,29149,4348],{"class":1015},[1002,29151,18584],{"class":1019},[1002,29153,1023],{"class":1015},[1002,29155,29156],{"class":1030}," event.target.elements.nameInput.value;\n",[1002,29158,29159,29162,29164,29166],{"class":1004,"line":1366},[1002,29160,29161],{"class":1026}," startTransition",[1002,29163,15494],{"class":1030},[1002,29165,15497],{"class":1015},[1002,29167,1457],{"class":1030},[1002,29169,29170,29173,29175,29178],{"class":1004,"line":1946},[1002,29171,29172],{"class":1026}," setActor",[1002,29174,1031],{"class":1030},[1002,29176,29177],{"class":1026},"createActor",[1002,29179,29180],{"class":1030},"(name));\n",[1002,29182,29183],{"class":1004,"line":1956},[1002,29184,8353],{"class":1030},[1002,29186,29187],{"class":1004,"line":1961},[1002,29188,1269],{"class":1030},[1002,29190,29191],{"class":1004,"line":1971},[1002,29192,1051],{"emptyLinePlaceholder":1050},[1002,29194,29195,29197],{"class":1004,"line":1980},[1002,29196,15066],{"class":1015},[1002,29198,15692],{"class":1030},[1002,29200,29201,29203,29205],{"class":1004,"line":1985},[1002,29202,15697],{"class":1030},[1002,29204,19650],{"class":15711},[1002,29206,15703],{"class":1030},[1002,29208,29209,29211,29214,29217,29219],{"class":1004,"line":1995},[1002,29210,19579],{"class":1030},[1002,29212,29213],{"class":15711},"form",[1002,29215,29216],{"class":1026}," onSubmit",[1002,29218,2393],{"class":1015},[1002,29220,29221],{"class":1030},"{handleSubmit}>\n",[1002,29223,29224,29226,29229,29232,29234,29237,29240,29242,29244],{"class":1004,"line":2006},[1002,29225,15708],{"class":1030},[1002,29227,29228],{"class":15711},"label",[1002,29230,29231],{"class":1026}," htmlFor",[1002,29233,2393],{"class":1015},[1002,29235,29236],{"class":1034},"\"nameInput\"",[1002,29238,29239],{"class":1030},">Name\u003C\u002F",[1002,29241,29228],{"class":15711},[1002,29243,19171],{"class":1030},[1002,29245,29246],{"class":1019}," \n",[1002,29248,29249,29251,29253,29255,29257,29259],{"class":1004,"line":2011},[1002,29250,15708],{"class":1030},[1002,29252,5803],{"class":15711},[1002,29254,21489],{"class":1026},[1002,29256,2393],{"class":1015},[1002,29258,29236],{"class":1034},[1002,29260,15258],{"class":1030},[1002,29262,29263],{"class":1004,"line":2017},[1002,29264,29265],{"class":1019},"  \n",[1002,29267,29268,29270,29272,29275,29277,29280,29283,29285],{"class":1004,"line":2022},[1002,29269,15708],{"class":1030},[1002,29271,16365],{"class":15711},[1002,29273,29274],{"class":1026}," type",[1002,29276,2393],{"class":1015},[1002,29278,29279],{"class":1034},"\"submit\"",[1002,29281,29282],{"class":1030},">Submit\u003C\u002F",[1002,29284,16365],{"class":15711},[1002,29286,15703],{"class":1030},[1002,29288,29289,29291,29293],{"class":1004,"line":2442},[1002,29290,21184],{"class":1030},[1002,29292,29213],{"class":15711},[1002,29294,15703],{"class":1030},[1002,29296,29297,29299,29301,29303,29305,29307,29309,29311,29313],{"class":1004,"line":2466},[1002,29298,19579],{"class":1030},[1002,29300,15771],{"class":1019},[1002,29302,22411],{"class":1026},[1002,29304,2393],{"class":1015},[1002,29306,22416],{"class":1030},[1002,29308,925],{"class":15711},[1002,29310,24755],{"class":1030},[1002,29312,925],{"class":15711},[1002,29314,29315],{"class":1030},">}>\n",[1002,29317,29318,29321,29323,29326],{"class":1004,"line":2471},[1002,29319,29320],{"class":1030}," ::message{(type ",[1002,29322,2393],{"class":1015},[1002,29324,29325],{"class":1034}," 'info'",[1002,29327,29328],{"class":1030},")}\n",[1002,29330,29331],{"class":1004,"line":2476},[1002,29332,29333],{"class":1030}," ::\n",[1002,29335,29336,29338,29340],{"class":1004,"line":2481},[1002,29337,21184],{"class":1030},[1002,29339,15771],{"class":1019},[1002,29341,15703],{"class":1030},[1002,29343,29344,29346,29348],{"class":1004,"line":2491},[1002,29345,19647],{"class":1030},[1002,29347,19650],{"class":15711},[1002,29349,15703],{"class":1030},[1002,29351,29352],{"class":1004,"line":2502},[1002,29353,10503],{"class":1030},[1002,29355,29356],{"class":1004,"line":2513},[1002,29357,1170],{"class":1030},[1002,29359,29360],{"class":1004,"line":2535},[1002,29361,1051],{"emptyLinePlaceholder":1050},[1002,29363,29364,29366,29369,29371,29373,29375,29377],{"class":1004,"line":2557},[1002,29365,6965],{"class":1015},[1002,29367,29368],{"class":1026}," Message",[1002,29370,9219],{"class":1030},[1002,29372,29065],{"class":2378},[1002,29374,1251],{"class":1030},[1002,29376,29096],{"class":2378},[1002,29378,9225],{"class":1030},[1002,29380,29381,29383],{"class":1004,"line":2562},[1002,29382,15066],{"class":1015},[1002,29384,15692],{"class":1030},[1002,29386,29387,29389,29391,29394,29396,29399,29401,29404,29407,29409],{"class":1004,"line":2567},[1002,29388,15697],{"class":1030},[1002,29390,925],{"class":15711},[1002,29392,29393],{"class":1026}," style",[1002,29395,2393],{"class":1015},[1002,29397,29398],{"class":1030},"{{ opacity: isPending ",[1002,29400,24117],{"class":1015},[1002,29402,29403],{"class":1019}," 0.4",[1002,29405,29406],{"class":1015}," :",[1002,29408,6246],{"class":1019},[1002,29410,29411],{"class":1030}," }}>\n",[1002,29413,29414,29417,29419,29422,29425,29427,29429,29432],{"class":1004,"line":2572},[1002,29415,29416],{"class":1030}," {actor ",[1002,29418,24117],{"class":1015},[1002,29420,29421],{"class":1030}," actor.",[1002,29423,29424],{"class":1026},"read",[1002,29426,10191],{"class":1030},[1002,29428,1813],{"class":1015},[1002,29430,29431],{"class":1034}," 'Please provide an actor'",[1002,29433,1170],{"class":1030},[1002,29435,29436,29438,29440],{"class":1004,"line":2582},[1002,29437,19647],{"class":1030},[1002,29439,925],{"class":15711},[1002,29441,15703],{"class":1030},[1002,29443,29444],{"class":1004,"line":2594},[1002,29445,10503],{"class":1030},[1002,29447,29448],{"class":1004,"line":2603},[1002,29449,1170],{"class":1030},[925,29451,29452],{},"Here is the full example of React concurrent mode in action:",[29454,29455],"iframe",{"src":29456,"style":29457,"title":29458,"allow":29459,"sandbox":29460},"https:\u002F\u002Fcodesandbox.io\u002Fembed\u002Fhungry-hodgkin-bb49s?fontsize=14","width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;","React Concurrent Mode","geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb",[29461,29462,29463,29464,29465],"allow-modals","allow-forms","allow-popups","allow-scripts","allow-same-origin",[1579,29467,29468],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":29470},[29471,29472,29476],{"id":28527,"depth":1012,"text":28528},{"id":28540,"depth":1012,"text":28541,"children":29473},[29474,29475],{"id":28544,"depth":1047,"text":28545},{"id":28561,"depth":1047,"text":28562},{"id":28710,"depth":1012,"text":28711},"2019-11-09","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-concurrent-mode.jpg",{},{"title":652,"description":654},"blog\u002Freact-concurrent-mode",[16,40],"skEGWGmlDyZ8FBkxjhw7jigXJNyT7As1qhSAdLEBj1Q",{"id":29485,"title":657,"author":920,"body":29486,"date":30496,"description":659,"extension":1591,"image":30497,"meta":30498,"navigation":1050,"path":658,"seo":30499,"stem":30500,"tags":30501,"__hash__":30502},"blog\u002Fblog\u002Freact-context-api.md",{"type":922,"value":29487,"toc":30488},[29488,29492,29495,29498,29501,29505,29508,29515,29519,29522,29525,29532,29644,29651,29655,29658,29839,29842,29846,29849,30074,30077,30172,30175,30471,30480,30482,30485],[953,29489,29491],{"id":29490},"whats-react-context-api","What’s React Context API?",[925,29493,29494],{},"In some cases, you want to pass data through the component tree without having to pass the props down manually at every level. You can do this directly in React with the powerful context API.",[7100,29496],{"title":29497,"type":24048},"But Facebook warns us not use the Context API!",[925,29499,29500],{},"Before diving deep into the nitty-gritty of this new reformed API, let’s find out why we need the Context API.",[953,29502,29504],{"id":29503},"why-use-context","Why use context?",[925,29506,29507],{},"You may have experienced having to pass down props from parent components to the child components even though they are not useful for the parent. This is called prop drilling and it can get super annoying. Also if you had to move around your components, this can get even more troublesome.",[925,29509,29510,29511,29514],{},"What if there’s a way of accessing your data without having to pass it down as props? Well if you are using Redux, you are implicitly using context. Because the ",[941,29512,29513],{},"\u003CProvider>"," component is using context itself to put the data into the context and the connect component pulls the data out of the context.",[953,29516,29518],{"id":29517},"born-again-context","Born again Context",[925,29520,29521],{},"Facebook has announced that they are going to release a stable yet revamped version of the context API.",[925,29523,29524],{},"Let’s look at how we can use this shiny new API in code.",[925,29526,29527,29528,29531],{},"Create a file called ",[941,29529,29530],{},"PostContext.js",". With the createContext from React package, create a context variable as below:",[993,29533,29535],{"className":995,"code":29534,"language":997,"meta":998,"style":998},"import { createContext } from 'react';\n\nconst PostContext = createContext([\n {\n title: 'Title',\n content: 'Content',\n author: 'Author',\n },\n]);\n\nexport const PostProvider = PostContext.Provider;\nexport const PostConsumer = PostContext.Consumer;\n",[941,29536,29537,29550,29554,29569,29573,29583,29593,29603,29607,29612,29616,29630],{"__ignoreMap":998},[1002,29538,29539,29541,29544,29546,29548],{"class":1004,"line":1005},[1002,29540,943],{"class":1015},[1002,29542,29543],{"class":1030}," { createContext } ",[1002,29545,1068],{"class":1015},[1002,29547,15543],{"class":1034},[1002,29549,1407],{"class":1030},[1002,29551,29552],{"class":1004,"line":1012},[1002,29553,1051],{"emptyLinePlaceholder":1050},[1002,29555,29556,29558,29561,29563,29566],{"class":1004,"line":1047},[1002,29557,1016],{"class":1015},[1002,29559,29560],{"class":1019}," PostContext",[1002,29562,1023],{"class":1015},[1002,29564,29565],{"class":1026}," createContext",[1002,29567,29568],{"class":1030},"([\n",[1002,29570,29571],{"class":1004,"line":1054},[1002,29572,1235],{"class":1030},[1002,29574,29575,29578,29581],{"class":1004,"line":1060},[1002,29576,29577],{"class":1030}," title: ",[1002,29579,29580],{"class":1034},"'Title'",[1002,29582,1143],{"class":1030},[1002,29584,29585,29588,29591],{"class":1004,"line":1272},[1002,29586,29587],{"class":1030}," content: ",[1002,29589,29590],{"class":1034},"'Content'",[1002,29592,1143],{"class":1030},[1002,29594,29595,29598,29601],{"class":1004,"line":1348},[1002,29596,29597],{"class":1030}," author: ",[1002,29599,29600],{"class":1034},"'Author'",[1002,29602,1143],{"class":1030},[1002,29604,29605],{"class":1004,"line":1354},[1002,29606,1502],{"class":1030},[1002,29608,29609],{"class":1004,"line":1360},[1002,29610,29611],{"class":1030},"]);\n",[1002,29613,29614],{"class":1004,"line":1366},[1002,29615,1051],{"emptyLinePlaceholder":1050},[1002,29617,29618,29620,29622,29625,29627],{"class":1004,"line":1946},[1002,29619,947],{"class":1015},[1002,29621,23722],{"class":1015},[1002,29623,29624],{"class":1019}," PostProvider",[1002,29626,1023],{"class":1015},[1002,29628,29629],{"class":1030}," PostContext.Provider;\n",[1002,29631,29632,29634,29636,29639,29641],{"class":1004,"line":1956},[1002,29633,947],{"class":1015},[1002,29635,23722],{"class":1015},[1002,29637,29638],{"class":1019}," PostConsumer",[1002,29640,1023],{"class":1015},[1002,29642,29643],{"class":1030}," PostContext.Consumer;\n",[925,29645,29646,29647,29650],{},"Here we are exporting both the provider and the consumer, that gets created. The constructor of ",[941,29648,29649],{},"createContext"," is taking an object for the purpose of the initialisation.",[953,29652,29654],{"id":29653},"bootstrap-records","Bootstrap records",[925,29656,29657],{},"We need to create a bootstrapper for our posts and a function that loads those posts. So let’s create that file next.",[993,29659,29661],{"className":995,"code":29660,"language":997,"meta":998,"style":998},"const posts = [\n {\n id: '0001',\n title: 'React Context API',\n content: 'New React API Context is finally ready',\n author: 'Sean Amarasinghe',\n },\n {\n id: '0002',\n title: 'Redux Sagas',\n content: 'How to implement Redux sagas',\n author: 'Harold Chang',\n },\n {\n id: '0003',\n title: 'Webpack 4',\n content: 'Changes in Webpack 4',\n author: 'John McMillan',\n },\n];\n\nexport const loadPosts = () => Promise.resolve(posts);\n",[941,29662,29663,29674,29678,29688,29697,29706,29715,29719,29723,29732,29741,29750,29759,29763,29767,29776,29785,29794,29803,29807,29811,29815],{"__ignoreMap":998},[1002,29664,29665,29667,29670,29672],{"class":1004,"line":1005},[1002,29666,1016],{"class":1015},[1002,29668,29669],{"class":1019}," posts",[1002,29671,1023],{"class":1015},[1002,29673,10274],{"class":1030},[1002,29675,29676],{"class":1004,"line":1012},[1002,29677,1235],{"class":1030},[1002,29679,29680,29683,29686],{"class":1004,"line":1047},[1002,29681,29682],{"class":1030}," id: ",[1002,29684,29685],{"class":1034},"'0001'",[1002,29687,1143],{"class":1030},[1002,29689,29690,29692,29695],{"class":1004,"line":1054},[1002,29691,29577],{"class":1030},[1002,29693,29694],{"class":1034},"'React Context API'",[1002,29696,1143],{"class":1030},[1002,29698,29699,29701,29704],{"class":1004,"line":1060},[1002,29700,29587],{"class":1030},[1002,29702,29703],{"class":1034},"'New React API Context is finally ready'",[1002,29705,1143],{"class":1030},[1002,29707,29708,29710,29713],{"class":1004,"line":1272},[1002,29709,29597],{"class":1030},[1002,29711,29712],{"class":1034},"'Sean Amarasinghe'",[1002,29714,1143],{"class":1030},[1002,29716,29717],{"class":1004,"line":1348},[1002,29718,1502],{"class":1030},[1002,29720,29721],{"class":1004,"line":1354},[1002,29722,1235],{"class":1030},[1002,29724,29725,29727,29730],{"class":1004,"line":1360},[1002,29726,29682],{"class":1030},[1002,29728,29729],{"class":1034},"'0002'",[1002,29731,1143],{"class":1030},[1002,29733,29734,29736,29739],{"class":1004,"line":1366},[1002,29735,29577],{"class":1030},[1002,29737,29738],{"class":1034},"'Redux Sagas'",[1002,29740,1143],{"class":1030},[1002,29742,29743,29745,29748],{"class":1004,"line":1946},[1002,29744,29587],{"class":1030},[1002,29746,29747],{"class":1034},"'How to implement Redux sagas'",[1002,29749,1143],{"class":1030},[1002,29751,29752,29754,29757],{"class":1004,"line":1956},[1002,29753,29597],{"class":1030},[1002,29755,29756],{"class":1034},"'Harold Chang'",[1002,29758,1143],{"class":1030},[1002,29760,29761],{"class":1004,"line":1961},[1002,29762,1502],{"class":1030},[1002,29764,29765],{"class":1004,"line":1971},[1002,29766,1235],{"class":1030},[1002,29768,29769,29771,29774],{"class":1004,"line":1980},[1002,29770,29682],{"class":1030},[1002,29772,29773],{"class":1034},"'0003'",[1002,29775,1143],{"class":1030},[1002,29777,29778,29780,29783],{"class":1004,"line":1985},[1002,29779,29577],{"class":1030},[1002,29781,29782],{"class":1034},"'Webpack 4'",[1002,29784,1143],{"class":1030},[1002,29786,29787,29789,29792],{"class":1004,"line":1995},[1002,29788,29587],{"class":1030},[1002,29790,29791],{"class":1034},"'Changes in Webpack 4'",[1002,29793,1143],{"class":1030},[1002,29795,29796,29798,29801],{"class":1004,"line":2006},[1002,29797,29597],{"class":1030},[1002,29799,29800],{"class":1034},"'John McMillan'",[1002,29802,1143],{"class":1030},[1002,29804,29805],{"class":1004,"line":2011},[1002,29806,1502],{"class":1030},[1002,29808,29809],{"class":1004,"line":2017},[1002,29810,6754],{"class":1030},[1002,29812,29813],{"class":1004,"line":2022},[1002,29814,1051],{"emptyLinePlaceholder":1050},[1002,29816,29817,29819,29821,29824,29826,29828,29830,29832,29834,29836],{"class":1004,"line":2442},[1002,29818,947],{"class":1015},[1002,29820,23722],{"class":1015},[1002,29822,29823],{"class":1026}," loadPosts",[1002,29825,1023],{"class":1015},[1002,29827,17297],{"class":1030},[1002,29829,15497],{"class":1015},[1002,29831,25561],{"class":1019},[1002,29833,948],{"class":1030},[1002,29835,1243],{"class":1026},[1002,29837,29838],{"class":1030},"(posts);\n",[925,29840,29841],{},"Now we have the data we need to render, let’s look at how we can create the components we need to display the posts.",[953,29843,29845],{"id":29844},"components","Components",[925,29847,29848],{},"Let’s start by creating a component for displaying posts.",[993,29850,29852],{"className":995,"code":29851,"language":997,"meta":998,"style":998},"import React from 'react';\nimport { PostConsumer } from '.\u002FPostContext';\n\nconst Content = () => (\n \u003Cdiv className=\"main\">\n \u003CPostConsumer>\n {(context) =>\n context.map(({ id, title, content, author }) => (\n \u003Cdiv key={id}>\n \u003Ch1>{title}\u003C\u002Fh1>\n \u003Cp>{content}\u003C\u002Fp>\n \u003Cp>{author}\u003C\u002Fp>\n \u003Chr \u002F>\n \u003C\u002Fdiv>\n ))\n }\n \u003C\u002FPostConsumer>\n \u003C\u002Fdiv>\n);\n\nexport default Content;\n",[941,29853,29854,29866,29880,29884,29899,29914,29923,29934,29964,29977,29989,30002,30015,30024,30032,30037,30041,30049,30057,30061,30065],{"__ignoreMap":998},[1002,29855,29856,29858,29860,29862,29864],{"class":1004,"line":1005},[1002,29857,943],{"class":1015},[1002,29859,21700],{"class":1030},[1002,29861,1068],{"class":1015},[1002,29863,15543],{"class":1034},[1002,29865,1407],{"class":1030},[1002,29867,29868,29870,29873,29875,29878],{"class":1004,"line":1012},[1002,29869,943],{"class":1015},[1002,29871,29872],{"class":1030}," { PostConsumer } ",[1002,29874,1068],{"class":1015},[1002,29876,29877],{"class":1034}," '.\u002FPostContext'",[1002,29879,1407],{"class":1030},[1002,29881,29882],{"class":1004,"line":1047},[1002,29883,1051],{"emptyLinePlaceholder":1050},[1002,29885,29886,29888,29891,29893,29895,29897],{"class":1004,"line":1054},[1002,29887,1016],{"class":1015},[1002,29889,29890],{"class":1026}," Content",[1002,29892,1023],{"class":1015},[1002,29894,17297],{"class":1030},[1002,29896,15497],{"class":1015},[1002,29898,15692],{"class":1030},[1002,29900,29901,29903,29905,29907,29909,29912],{"class":1004,"line":1060},[1002,29902,22427],{"class":1030},[1002,29904,19650],{"class":15711},[1002,29906,26915],{"class":1026},[1002,29908,2393],{"class":1015},[1002,29910,29911],{"class":1034},"\"main\"",[1002,29913,15703],{"class":1030},[1002,29915,29916,29918,29921],{"class":1004,"line":1272},[1002,29917,15697],{"class":1030},[1002,29919,29920],{"class":1019},"PostConsumer",[1002,29922,15703],{"class":1030},[1002,29924,29925,29928,29930,29932],{"class":1004,"line":1348},[1002,29926,29927],{"class":1030}," {(",[1002,29929,6028],{"class":2378},[1002,29931,5876],{"class":1030},[1002,29933,19463],{"class":1015},[1002,29935,29936,29939,29941,29943,29945,29947,29949,29951,29953,29955,29958,29960,29962],{"class":1004,"line":1354},[1002,29937,29938],{"class":1030}," context.",[1002,29940,19444],{"class":1026},[1002,29942,26871],{"class":1030},[1002,29944,19767],{"class":2378},[1002,29946,1251],{"class":1030},[1002,29948,15029],{"class":2378},[1002,29950,1251],{"class":1030},[1002,29952,15671],{"class":2378},[1002,29954,1251],{"class":1030},[1002,29956,29957],{"class":2378},"author",[1002,29959,24451],{"class":1030},[1002,29961,15497],{"class":1015},[1002,29963,15692],{"class":1030},[1002,29965,29966,29968,29970,29972,29974],{"class":1004,"line":1360},[1002,29967,15719],{"class":1030},[1002,29969,19650],{"class":15711},[1002,29971,7334],{"class":1026},[1002,29973,2393],{"class":1015},[1002,29975,29976],{"class":1030},"{id}>\n",[1002,29978,29979,29981,29983,29985,29987],{"class":1004,"line":1366},[1002,29980,15729],{"class":1030},[1002,29982,15201],{"class":15711},[1002,29984,15734],{"class":1030},[1002,29986,15201],{"class":15711},[1002,29988,15703],{"class":1030},[1002,29990,29991,29993,29995,29998,30000],{"class":1004,"line":1946},[1002,29992,15729],{"class":1030},[1002,29994,925],{"class":15711},[1002,29996,29997],{"class":1030},">{content}\u003C\u002F",[1002,29999,925],{"class":15711},[1002,30001,15703],{"class":1030},[1002,30003,30004,30006,30008,30011,30013],{"class":1004,"line":1956},[1002,30005,15729],{"class":1030},[1002,30007,925],{"class":15711},[1002,30009,30010],{"class":1030},">{author}\u003C\u002F",[1002,30012,925],{"class":15711},[1002,30014,15703],{"class":1030},[1002,30016,30017,30019,30022],{"class":1004,"line":1961},[1002,30018,15729],{"class":1030},[1002,30020,30021],{"class":15711},"hr",[1002,30023,15258],{"class":1030},[1002,30025,30026,30028,30030],{"class":1004,"line":1971},[1002,30027,15756],{"class":1030},[1002,30029,19650],{"class":15711},[1002,30031,15703],{"class":1030},[1002,30033,30034],{"class":1004,"line":1980},[1002,30035,30036],{"class":1030}," ))\n",[1002,30038,30039],{"class":1004,"line":1985},[1002,30040,1351],{"class":1030},[1002,30042,30043,30045,30047],{"class":1004,"line":1995},[1002,30044,19647],{"class":1030},[1002,30046,29920],{"class":1019},[1002,30048,15703],{"class":1030},[1002,30050,30051,30053,30055],{"class":1004,"line":2006},[1002,30052,28112],{"class":1030},[1002,30054,19650],{"class":15711},[1002,30056,15703],{"class":1030},[1002,30058,30059],{"class":1004,"line":2011},[1002,30060,1085],{"class":1030},[1002,30062,30063],{"class":1004,"line":2017},[1002,30064,1051],{"emptyLinePlaceholder":1050},[1002,30066,30067,30069,30071],{"class":1004,"line":2022},[1002,30068,947],{"class":1015},[1002,30070,15641],{"class":1015},[1002,30072,30073],{"class":1030}," Content;\n",[925,30075,30076],{},"Now we have the posts, let’s create a container for this component",[993,30078,30080],{"className":995,"code":30079,"language":997,"meta":998,"style":998},"import React from 'react';\nimport Content from '.\u002FContent';\n\nconst Page = () => (\n \u003Cdiv className=\"container\">\n \u003CContent \u002F>\n \u003C\u002Fdiv>\n);\n\nexport default Page;\n",[941,30081,30082,30094,30107,30111,30125,30140,30148,30156,30160,30164],{"__ignoreMap":998},[1002,30083,30084,30086,30088,30090,30092],{"class":1004,"line":1005},[1002,30085,943],{"class":1015},[1002,30087,21700],{"class":1030},[1002,30089,1068],{"class":1015},[1002,30091,15543],{"class":1034},[1002,30093,1407],{"class":1030},[1002,30095,30096,30098,30100,30102,30105],{"class":1004,"line":1012},[1002,30097,943],{"class":1015},[1002,30099,15582],{"class":1030},[1002,30101,1068],{"class":1015},[1002,30103,30104],{"class":1034}," '.\u002FContent'",[1002,30106,1407],{"class":1030},[1002,30108,30109],{"class":1004,"line":1047},[1002,30110,1051],{"emptyLinePlaceholder":1050},[1002,30112,30113,30115,30117,30119,30121,30123],{"class":1004,"line":1054},[1002,30114,1016],{"class":1015},[1002,30116,24441],{"class":1026},[1002,30118,1023],{"class":1015},[1002,30120,17297],{"class":1030},[1002,30122,15497],{"class":1015},[1002,30124,15692],{"class":1030},[1002,30126,30127,30129,30131,30133,30135,30138],{"class":1004,"line":1060},[1002,30128,22427],{"class":1030},[1002,30130,19650],{"class":15711},[1002,30132,26915],{"class":1026},[1002,30134,2393],{"class":1015},[1002,30136,30137],{"class":1034},"\"container\"",[1002,30139,15703],{"class":1030},[1002,30141,30142,30144,30146],{"class":1004,"line":1272},[1002,30143,15697],{"class":1030},[1002,30145,15801],{"class":1019},[1002,30147,15258],{"class":1030},[1002,30149,30150,30152,30154],{"class":1004,"line":1348},[1002,30151,28112],{"class":1030},[1002,30153,19650],{"class":15711},[1002,30155,15703],{"class":1030},[1002,30157,30158],{"class":1004,"line":1354},[1002,30159,1085],{"class":1030},[1002,30161,30162],{"class":1004,"line":1360},[1002,30163,1051],{"emptyLinePlaceholder":1050},[1002,30165,30166,30168,30170],{"class":1004,"line":1366},[1002,30167,947],{"class":1015},[1002,30169,15641],{"class":1015},[1002,30171,24543],{"class":1030},[925,30173,30174],{},"Now we have the container, we can easily render in our app.",[993,30176,30178],{"className":995,"code":30177,"language":997,"meta":998,"style":998},"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Page from '.\u002FPage';\nimport { loadPosts } from '.\u002Fbootstrapper';\nimport { PostProvider } from '.\u002FPostContext';\n\nconst styles = {\n fontFamily: 'sans-serif',\n textAlign: 'center',\n};\n\nclass App extends React.Component {\n state = { posts: [] };\n\n componentDidMount() {\n loadPosts().then((posts) => this.setState({ posts }));\n }\n\n render() {\n return (\n \u003Cdiv style={styles}>\n \u002F\u002F highlight-next-line\n \u003CPostProvider value={this.state.posts}>\n \u003CPage \u002F>\n \u003C\u002FPostProvider>\n \u003C\u002Fdiv>\n );\n }\n}\n\nReactDOM.render(\u003CApp \u002F>, document.getElementById('root'));\n",[941,30179,30180,30192,30204,30218,30232,30245,30249,30260,30270,30280,30284,30288,30304,30314,30318,30324,30351,30355,30359,30365,30371,30384,30389,30408,30417,30425,30433,30437,30441,30445,30449],{"__ignoreMap":998},[1002,30181,30182,30184,30186,30188,30190],{"class":1004,"line":1005},[1002,30183,943],{"class":1015},[1002,30185,21700],{"class":1030},[1002,30187,1068],{"class":1015},[1002,30189,15543],{"class":1034},[1002,30191,1407],{"class":1030},[1002,30193,30194,30196,30198,30200,30202],{"class":1004,"line":1012},[1002,30195,943],{"class":1015},[1002,30197,28627],{"class":1030},[1002,30199,1068],{"class":1015},[1002,30201,28632],{"class":1034},[1002,30203,1407],{"class":1030},[1002,30205,30206,30208,30211,30213,30216],{"class":1004,"line":1047},[1002,30207,943],{"class":1015},[1002,30209,30210],{"class":1030}," Page ",[1002,30212,1068],{"class":1015},[1002,30214,30215],{"class":1034}," '.\u002FPage'",[1002,30217,1407],{"class":1030},[1002,30219,30220,30222,30225,30227,30230],{"class":1004,"line":1054},[1002,30221,943],{"class":1015},[1002,30223,30224],{"class":1030}," { loadPosts } ",[1002,30226,1068],{"class":1015},[1002,30228,30229],{"class":1034}," '.\u002Fbootstrapper'",[1002,30231,1407],{"class":1030},[1002,30233,30234,30236,30239,30241,30243],{"class":1004,"line":1060},[1002,30235,943],{"class":1015},[1002,30237,30238],{"class":1030}," { PostProvider } ",[1002,30240,1068],{"class":1015},[1002,30242,29877],{"class":1034},[1002,30244,1407],{"class":1030},[1002,30246,30247],{"class":1004,"line":1272},[1002,30248,1051],{"emptyLinePlaceholder":1050},[1002,30250,30251,30253,30256,30258],{"class":1004,"line":1348},[1002,30252,1016],{"class":1015},[1002,30254,30255],{"class":1019}," styles",[1002,30257,1023],{"class":1015},[1002,30259,1457],{"class":1030},[1002,30261,30262,30265,30268],{"class":1004,"line":1354},[1002,30263,30264],{"class":1030}," fontFamily: ",[1002,30266,30267],{"class":1034},"'sans-serif'",[1002,30269,1143],{"class":1030},[1002,30271,30272,30275,30278],{"class":1004,"line":1360},[1002,30273,30274],{"class":1030}," textAlign: ",[1002,30276,30277],{"class":1034},"'center'",[1002,30279,1143],{"class":1030},[1002,30281,30282],{"class":1004,"line":1366},[1002,30283,1517],{"class":1030},[1002,30285,30286],{"class":1004,"line":1946},[1002,30287,1051],{"emptyLinePlaceholder":1050},[1002,30289,30290,30292,30294,30296,30298,30300,30302],{"class":1004,"line":1956},[1002,30291,2363],{"class":1015},[1002,30293,19566],{"class":1026},[1002,30295,3014],{"class":1015},[1002,30297,20112],{"class":1026},[1002,30299,948],{"class":1030},[1002,30301,20117],{"class":1026},[1002,30303,1457],{"class":1030},[1002,30305,30306,30309,30311],{"class":1004,"line":1961},[1002,30307,30308],{"class":2378}," state",[1002,30310,1023],{"class":1015},[1002,30312,30313],{"class":1030}," { posts: [] };\n",[1002,30315,30316],{"class":1004,"line":1971},[1002,30317,1051],{"emptyLinePlaceholder":1050},[1002,30319,30320,30322],{"class":1004,"line":1980},[1002,30321,20139],{"class":1026},[1002,30323,3025],{"class":1030},[1002,30325,30326,30329,30331,30333,30335,30338,30340,30342,30344,30346,30348],{"class":1004,"line":1985},[1002,30327,30328],{"class":1026}," loadPosts",[1002,30330,12951],{"class":1030},[1002,30332,25658],{"class":1026},[1002,30334,21121],{"class":1030},[1002,30336,30337],{"class":2378},"posts",[1002,30339,5876],{"class":1030},[1002,30341,15497],{"class":1015},[1002,30343,2693],{"class":1019},[1002,30345,948],{"class":1030},[1002,30347,26816],{"class":1026},[1002,30349,30350],{"class":1030},"({ posts }));\n",[1002,30352,30353],{"class":1004,"line":1995},[1002,30354,1269],{"class":1030},[1002,30356,30357],{"class":1004,"line":2006},[1002,30358,1051],{"emptyLinePlaceholder":1050},[1002,30360,30361,30363],{"class":1004,"line":2011},[1002,30362,20201],{"class":1026},[1002,30364,3025],{"class":1030},[1002,30366,30367,30369],{"class":1004,"line":2017},[1002,30368,2687],{"class":1015},[1002,30370,15692],{"class":1030},[1002,30372,30373,30375,30377,30379,30381],{"class":1004,"line":2022},[1002,30374,19579],{"class":1030},[1002,30376,19650],{"class":15711},[1002,30378,29393],{"class":1026},[1002,30380,2393],{"class":1015},[1002,30382,30383],{"class":1030},"{styles}>\n",[1002,30385,30386],{"class":1004,"line":2442},[1002,30387,30388],{"class":1030}," \u002F\u002F highlight-next-line\n",[1002,30390,30391,30393,30396,30399,30401,30403,30405],{"class":1004,"line":2466},[1002,30392,15708],{"class":1030},[1002,30394,30395],{"class":1019},"PostProvider",[1002,30397,30398],{"class":1026}," value",[1002,30400,2393],{"class":1015},[1002,30402,22192],{"class":1030},[1002,30404,3455],{"class":1019},[1002,30406,30407],{"class":1030},".state.posts}>\n",[1002,30409,30410,30412,30415],{"class":1004,"line":2471},[1002,30411,15719],{"class":1030},[1002,30413,30414],{"class":1019},"Page",[1002,30416,15258],{"class":1030},[1002,30418,30419,30421,30423],{"class":1004,"line":2476},[1002,30420,15814],{"class":1030},[1002,30422,30395],{"class":1019},[1002,30424,15703],{"class":1030},[1002,30426,30427,30429,30431],{"class":1004,"line":2481},[1002,30428,21184],{"class":1030},[1002,30430,19650],{"class":15711},[1002,30432,15703],{"class":1030},[1002,30434,30435],{"class":1004,"line":2491},[1002,30436,22541],{"class":1030},[1002,30438,30439],{"class":1004,"line":2502},[1002,30440,1269],{"class":1030},[1002,30442,30443],{"class":1004,"line":2513},[1002,30444,1170],{"class":1030},[1002,30446,30447],{"class":1004,"line":2535},[1002,30448,1051],{"emptyLinePlaceholder":1050},[1002,30450,30451,30454,30456,30458,30460,30463,30465,30467,30469],{"class":1004,"line":2557},[1002,30452,30453],{"class":1030},"ReactDOM.",[1002,30455,19545],{"class":1026},[1002,30457,21269],{"class":1030},[1002,30459,22209],{"class":1019},[1002,30461,30462],{"class":1030}," \u002F>, document.",[1002,30464,16591],{"class":1026},[1002,30466,1031],{"class":1030},[1002,30468,12223],{"class":1034},[1002,30470,5663],{"class":1030},[925,30472,30473,30474,30476,30477,30479],{},"We are passing in the data we need to the ",[941,30475,30395],{}," component. This data will be again retrieved by the ",[941,30478,29920],{}," component inside the Content.js component.",[953,30481,26561],{"id":26560},[925,30483,30484],{},"React will soon remove the warnings for using context API and this is great news for refactoring existing components to use the Context API instead of props drilling.",[1579,30486,30487],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":30489},[30490,30491,30492,30493,30494,30495],{"id":29490,"depth":1012,"text":29491},{"id":29503,"depth":1012,"text":29504},{"id":29517,"depth":1012,"text":29518},{"id":29653,"depth":1012,"text":29654},{"id":29844,"depth":1012,"text":29845},{"id":26560,"depth":1012,"text":26561},"2018-04-13","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-context-api.jpg",{},{"title":657,"description":659},"blog\u002Freact-context-api",[16,17,40],"A_nYj21UMdGYR0iK1v5TKkoXw9EItGevirpMV26NkIY",{"id":30504,"title":36,"author":920,"body":30505,"date":31267,"description":38,"extension":1591,"image":31268,"meta":31269,"navigation":1050,"path":37,"seo":31270,"stem":31271,"tags":31272,"__hash__":31273},"blog\u002Fblog\u002Fasynchronous-javascript-asyncawait.md",{"type":922,"value":30506,"toc":31259},[30507,30511,30514,30517,30520,30524,30527,30530,30541,30544,30588,30599,30664,30667,30710,30717,30720,30789,30792,30796,30802,30831,30835,30838,30872,30875,30878,30922,30931,30938,30947,30950,30954,30957,30960,31055,31058,31062,31069,31253,31256],[953,30508,30510],{"id":30509},"whats-asyncawait","What’s Async\u002FAwait?",[925,30512,30513],{},"The purpose of async\u002Fawait functions is to simplify the behaviour of using promises synchronously and to perform some behaviour on a group of Promises. Just like Promises are similar to structured callbacks, async\u002Fawait is similar to combining generators and promises.",[7100,30515],{"title":30516,"type":24048},"Promises",[925,30518,30519],{},"Before diving deep into async\u002Fawait, let’s identify what a Promise is.",[953,30521,30523],{"id":30522},"what-is-a-promise","What is a Promise?",[925,30525,30526],{},"The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. It is a special kind of javascript object which contains another object.",[925,30528,30529],{},"A Promise is in one of these states:",[1530,30531,30532,30535,30538],{},[974,30533,30534],{},"Pending – initial state, not fulfilled or rejected",[974,30536,30537],{},"Fulfilled – meaning that the operation completed successfully",[974,30539,30540],{},"Rejected – meaning that the operation failed",[925,30542,30543],{},"To access data in a Promise, you can use .then() as below:",[993,30545,30547],{"className":995,"code":30546,"language":997,"meta":998,"style":998},"function getFirstPost() {\n return getPosts().then((posts) => posts[0]);\n}\n",[941,30548,30549,30558,30584],{"__ignoreMap":998},[1002,30550,30551,30553,30556],{"class":1004,"line":1005},[1002,30552,6965],{"class":1015},[1002,30554,30555],{"class":1026}," getFirstPost",[1002,30557,3025],{"class":1030},[1002,30559,30560,30562,30565,30567,30569,30571,30573,30575,30577,30580,30582],{"class":1004,"line":1012},[1002,30561,15066],{"class":1015},[1002,30563,30564],{"class":1026}," getPosts",[1002,30566,12951],{"class":1030},[1002,30568,25658],{"class":1026},[1002,30570,21121],{"class":1030},[1002,30572,30337],{"class":2378},[1002,30574,5876],{"class":1030},[1002,30576,15497],{"class":1015},[1002,30578,30579],{"class":1030}," posts[",[1002,30581,5867],{"class":1019},[1002,30583,29611],{"class":1030},[1002,30585,30586],{"class":1004,"line":1047},[1002,30587,1170],{"class":1030},[925,30589,30590,30591,30594,30595,30598],{},"To capture any errors, you can add ",[941,30592,30593],{},"catch()"," after the ",[941,30596,30597],{},"then()"," call.",[993,30600,30602],{"className":995,"code":30601,"language":997,"meta":998,"style":998},"function getFirstPost() {\n return getPosts()\n .then((posts) => posts[0])\n .catch((error) => error);\n}\n",[941,30603,30604,30612,30620,30642,30660],{"__ignoreMap":998},[1002,30605,30606,30608,30610],{"class":1004,"line":1005},[1002,30607,6965],{"class":1015},[1002,30609,30555],{"class":1026},[1002,30611,3025],{"class":1030},[1002,30613,30614,30616,30618],{"class":1004,"line":1012},[1002,30615,15066],{"class":1015},[1002,30617,30564],{"class":1026},[1002,30619,17202],{"class":1030},[1002,30621,30622,30625,30627,30629,30631,30633,30635,30637,30639],{"class":1004,"line":1047},[1002,30623,30624],{"class":1030}," .",[1002,30626,25658],{"class":1026},[1002,30628,21121],{"class":1030},[1002,30630,30337],{"class":2378},[1002,30632,5876],{"class":1030},[1002,30634,15497],{"class":1015},[1002,30636,30579],{"class":1030},[1002,30638,5867],{"class":1019},[1002,30640,30641],{"class":1030},"])\n",[1002,30643,30644,30646,30649,30651,30653,30655,30657],{"class":1004,"line":1054},[1002,30645,30624],{"class":1030},[1002,30647,30648],{"class":1026},"catch",[1002,30650,21121],{"class":1030},[1002,30652,25064],{"class":2378},[1002,30654,5876],{"class":1030},[1002,30656,15497],{"class":1015},[1002,30658,30659],{"class":1030}," error);\n",[1002,30661,30662],{"class":1004,"line":1060},[1002,30663,1170],{"class":1030},[925,30665,30666],{},"By using async\u002Fawait we can ditch the callback function. Let’s write the first example in ES6 aync\u002Fawait.",[993,30668,30670],{"className":995,"code":30669,"language":997,"meta":998,"style":998},"async function getFirstPost() {\n const posts = await getPosts();\n return posts[0];\n}\n",[941,30671,30672,30682,30696,30706],{"__ignoreMap":998},[1002,30673,30674,30676,30678,30680],{"class":1004,"line":1005},[1002,30675,25463],{"class":1015},[1002,30677,8457],{"class":1015},[1002,30679,30555],{"class":1026},[1002,30681,3025],{"class":1030},[1002,30683,30684,30686,30688,30690,30692,30694],{"class":1004,"line":1012},[1002,30685,10423],{"class":1015},[1002,30687,29669],{"class":1019},[1002,30689,1023],{"class":1015},[1002,30691,15047],{"class":1015},[1002,30693,30564],{"class":1026},[1002,30695,1428],{"class":1030},[1002,30697,30698,30700,30702,30704],{"class":1004,"line":1047},[1002,30699,15066],{"class":1015},[1002,30701,30579],{"class":1030},[1002,30703,5867],{"class":1019},[1002,30705,6754],{"class":1030},[1002,30707,30708],{"class":1004,"line":1054},[1002,30709,1170],{"class":1030},[925,30711,30712,30713,30716],{},"Here ",[941,30714,30715],{},"await"," will simply pause the execution of the method until the value from the promise is available.",[925,30718,30719],{},"Now let’s look how we can catch errors as in the second example above.",[993,30721,30723],{"className":995,"code":30722,"language":997,"meta":998,"style":998},"async function getFirstPost() {\n try {\n const posts = await getPosts();\n return posts[0];\n } catch (error) {\n return error;\n }\n}\n",[941,30724,30725,30735,30742,30756,30766,30775,30781,30785],{"__ignoreMap":998},[1002,30726,30727,30729,30731,30733],{"class":1004,"line":1005},[1002,30728,25463],{"class":1015},[1002,30730,8457],{"class":1015},[1002,30732,30555],{"class":1026},[1002,30734,3025],{"class":1030},[1002,30736,30737,30740],{"class":1004,"line":1012},[1002,30738,30739],{"class":1015}," try",[1002,30741,1457],{"class":1030},[1002,30743,30744,30746,30748,30750,30752,30754],{"class":1004,"line":1047},[1002,30745,4348],{"class":1015},[1002,30747,29669],{"class":1019},[1002,30749,1023],{"class":1015},[1002,30751,15047],{"class":1015},[1002,30753,30564],{"class":1026},[1002,30755,1428],{"class":1030},[1002,30757,30758,30760,30762,30764],{"class":1004,"line":1054},[1002,30759,2687],{"class":1015},[1002,30761,30579],{"class":1030},[1002,30763,5867],{"class":1019},[1002,30765,6754],{"class":1030},[1002,30767,30768,30771,30773],{"class":1004,"line":1060},[1002,30769,30770],{"class":1030}," } ",[1002,30772,30648],{"class":1015},[1002,30774,25090],{"class":1030},[1002,30776,30777,30779],{"class":1004,"line":1272},[1002,30778,2687],{"class":1015},[1002,30780,28860],{"class":1030},[1002,30782,30783],{"class":1004,"line":1348},[1002,30784,1269],{"class":1030},[1002,30786,30787],{"class":1004,"line":1354},[1002,30788,1170],{"class":1030},[925,30790,30791],{},"Much simpler isn’t it? One thing you must remember to do is not forgetting the await keyword. Otherwise you will get a promise instead of a value.",[953,30793,30795],{"id":30794},"promise-chain","Promise chain",[925,30797,30798,30799,30801],{},"You can use ",[941,30800,30597],{}," for asynchronous functions to be seamlessly called within a promise chain.",[993,30803,30805],{"className":995,"code":30804,"language":997,"meta":998,"style":998},"getFirstPost().then((post) => console.log(post.title, post.content));\n",[941,30806,30807],{"__ignoreMap":998},[1002,30808,30809,30812,30814,30816,30818,30820,30822,30824,30826,30828],{"class":1004,"line":1005},[1002,30810,30811],{"class":1026},"getFirstPost",[1002,30813,12951],{"class":1030},[1002,30815,25658],{"class":1026},[1002,30817,21121],{"class":1030},[1002,30819,24713],{"class":2378},[1002,30821,5876],{"class":1030},[1002,30823,15497],{"class":1015},[1002,30825,19409],{"class":1030},[1002,30827,2886],{"class":1026},[1002,30829,30830],{"class":1030},"(post.title, post.content));\n",[953,30832,30834],{"id":30833},"awaiting-multiple-values","Awaiting multiple values",[925,30836,30837],{},"If you are calling multiple async functions, for example the following:",[993,30839,30841],{"className":995,"code":30840,"language":997,"meta":998,"style":998},"const post = await getFirstPost();\nconst user = await getFirstUser();\n",[941,30842,30843,30857],{"__ignoreMap":998},[1002,30844,30845,30847,30849,30851,30853,30855],{"class":1004,"line":1005},[1002,30846,1016],{"class":1015},[1002,30848,24907],{"class":1019},[1002,30850,1023],{"class":1015},[1002,30852,15047],{"class":1015},[1002,30854,30555],{"class":1026},[1002,30856,1428],{"class":1030},[1002,30858,30859,30861,30863,30865,30867,30870],{"class":1004,"line":1012},[1002,30860,1016],{"class":1015},[1002,30862,12721],{"class":1019},[1002,30864,1023],{"class":1015},[1002,30866,15047],{"class":1015},[1002,30868,30869],{"class":1026}," getFirstUser",[1002,30871,1428],{"class":1030},[925,30873,30874],{},"Here, you can only await on one at a time. So you will get the results sequentially, not at the same time.",[925,30876,30877],{},"To make it work we have to do something like this:",[993,30879,30881],{"className":995,"code":30880,"language":997,"meta":998,"style":998},"const [foo, bar] = await Promise.all([getFirstPost(), getFirstUser()]);\n",[941,30882,30883],{"__ignoreMap":998},[1002,30884,30885,30887,30889,30891,30893,30896,30898,30900,30902,30904,30906,30908,30911,30913,30916,30919],{"class":1004,"line":1005},[1002,30886,1016],{"class":1015},[1002,30888,1897],{"class":1030},[1002,30890,16521],{"class":1019},[1002,30892,1251],{"class":1030},[1002,30894,30895],{"class":1019},"bar",[1002,30897,18338],{"class":1030},[1002,30899,2393],{"class":1015},[1002,30901,15047],{"class":1015},[1002,30903,25561],{"class":1019},[1002,30905,948],{"class":1030},[1002,30907,17964],{"class":1026},[1002,30909,30910],{"class":1030},"([",[1002,30912,30811],{"class":1026},[1002,30914,30915],{"class":1030},"(), ",[1002,30917,30918],{"class":1026},"getFirstUser",[1002,30920,30921],{"class":1030},"()]);\n",[925,30923,30924,30925,30927,30928,948],{},"Is ",[941,30926,30715],{}," can be only used with promises? Not all, you can you await with any ",[941,30929,30930],{},"Thenable",[925,30932,30933,30934,30937],{},"So what does ",[941,30935,30936],{},"Promise.all"," mean? Let’s clarify that first.",[7100,30939,30940],{"title":30936,"type":24048},[925,30941,30942,30943,30946],{},"However, the entire foundation for ",[941,30944,30945],{},"async\u002Fawait"," is promises. In fact every async function you write will return a promise, and every single thing you await will ordinarily be a promise.",[925,30948,30949],{},"So can you convert a callback function to async? let’s discuss this bit further.",[953,30951,30953],{"id":30952},"converting-any-function-into-an-async","Converting any function into an Async",[925,30955,30956],{},"Any function can be made asynchronous, including function expressions, arrow functions, and methods.",[925,30958,30959],{},"if you understand how promises work, you can get around this by treating the result of an async function as a promise, which itself accepts callbacks.",[993,30961,30963],{"className":995,"code":30962,"language":997,"meta":998,"style":998},"function getFirstPost(callback) {\n return getPosts()\n .then(function (post) {\n return callback(undefined, post.name);\n })\n .catch(function (err) {\n return callback(err);\n });\n}\n",[941,30964,30965,30977,30985,31001,31016,31021,31038,31047,31051],{"__ignoreMap":998},[1002,30966,30967,30969,30971,30973,30975],{"class":1004,"line":1005},[1002,30968,6965],{"class":1015},[1002,30970,30555],{"class":1026},[1002,30972,1031],{"class":1030},[1002,30974,6834],{"class":2378},[1002,30976,2382],{"class":1030},[1002,30978,30979,30981,30983],{"class":1004,"line":1012},[1002,30980,15066],{"class":1015},[1002,30982,30564],{"class":1026},[1002,30984,17202],{"class":1030},[1002,30986,30987,30989,30991,30993,30995,30997,30999],{"class":1004,"line":1047},[1002,30988,30624],{"class":1030},[1002,30990,25658],{"class":1026},[1002,30992,1031],{"class":1030},[1002,30994,6965],{"class":1015},[1002,30996,6513],{"class":1030},[1002,30998,24713],{"class":2378},[1002,31000,2382],{"class":1030},[1002,31002,31003,31005,31008,31010,31013],{"class":1004,"line":1054},[1002,31004,4376],{"class":1015},[1002,31006,31007],{"class":1026}," callback",[1002,31009,1031],{"class":1030},[1002,31011,31012],{"class":1019},"undefined",[1002,31014,31015],{"class":1030},", post.name);\n",[1002,31017,31018],{"class":1004,"line":1060},[1002,31019,31020],{"class":1030}," })\n",[1002,31022,31023,31025,31027,31029,31031,31033,31036],{"class":1004,"line":1272},[1002,31024,30624],{"class":1030},[1002,31026,30648],{"class":1026},[1002,31028,1031],{"class":1030},[1002,31030,6965],{"class":1015},[1002,31032,6513],{"class":1030},[1002,31034,31035],{"class":2378},"err",[1002,31037,2382],{"class":1030},[1002,31039,31040,31042,31044],{"class":1004,"line":1348},[1002,31041,4376],{"class":1015},[1002,31043,31007],{"class":1026},[1002,31045,31046],{"class":1030},"(err);\n",[1002,31048,31049],{"class":1004,"line":1354},[1002,31050,8353],{"class":1030},[1002,31052,31053],{"class":1004,"line":1360},[1002,31054,1170],{"class":1030},[925,31056,31057],{},"It’s important to handle errors properly when it comes to promises. You need to catch errors properly handle them or the error can be lost on the way.",[953,31059,31061],{"id":31060},"async-iterators-with-for-await-of","Async iterators with for-await-of",[925,31063,31064,31065,31068],{},"There is an asynchronous iteration scheme, built on top of a new ",[941,31066,31067],{},"for-await-of"," loop and async generator functions.",[993,31070,31072],{"className":995,"code":31071,"language":997,"meta":998,"style":998},"Symbol.asyncIterator = Symbol.asyncIterator || Symbol('asyncIterator');\n\nconst delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\nasync function* generator() {\n await delay(1000);\n yield 1;\n await delay(1000);\n yield 2;\n await delay(1000);\n yield 3;\n}\n\nfor await (const value of generator()) {\n console.log(value);\n}\n",[941,31073,31074,31096,31100,31135,31139,31151,31164,31173,31185,31193,31205,31213,31217,31221,31240,31249],{"__ignoreMap":998},[1002,31075,31076,31079,31081,31084,31086,31089,31091,31094],{"class":1004,"line":1005},[1002,31077,31078],{"class":1030},"Symbol.asyncIterator ",[1002,31080,2393],{"class":1015},[1002,31082,31083],{"class":1030}," Symbol.asyncIterator ",[1002,31085,8392],{"class":1015},[1002,31087,31088],{"class":1026}," Symbol",[1002,31090,1031],{"class":1030},[1002,31092,31093],{"class":1034},"'asyncIterator'",[1002,31095,1085],{"class":1030},[1002,31097,31098],{"class":1004,"line":1012},[1002,31099,1051],{"emptyLinePlaceholder":1050},[1002,31101,31102,31104,31107,31109,31111,31114,31116,31118,31120,31122,31124,31126,31128,31130,31132],{"class":1004,"line":1047},[1002,31103,1016],{"class":1015},[1002,31105,31106],{"class":1026}," delay",[1002,31108,1023],{"class":1015},[1002,31110,6513],{"class":1030},[1002,31112,31113],{"class":2378},"ms",[1002,31115,5876],{"class":1030},[1002,31117,15497],{"class":1015},[1002,31119,2690],{"class":1015},[1002,31121,25561],{"class":1019},[1002,31123,21121],{"class":1030},[1002,31125,1243],{"class":2378},[1002,31127,5876],{"class":1030},[1002,31129,15497],{"class":1015},[1002,31131,20803],{"class":1026},[1002,31133,31134],{"class":1030},"(resolve, ms));\n",[1002,31136,31137],{"class":1004,"line":1054},[1002,31138,1051],{"emptyLinePlaceholder":1050},[1002,31140,31141,31143,31146,31149],{"class":1004,"line":1060},[1002,31142,25463],{"class":1015},[1002,31144,31145],{"class":1015}," function*",[1002,31147,31148],{"class":1026}," generator",[1002,31150,3025],{"class":1030},[1002,31152,31153,31156,31158,31160,31162],{"class":1004,"line":1272},[1002,31154,31155],{"class":1015}," await",[1002,31157,31106],{"class":1026},[1002,31159,1031],{"class":1030},[1002,31161,6370],{"class":1019},[1002,31163,1085],{"class":1030},[1002,31165,31166,31169,31171],{"class":1004,"line":1348},[1002,31167,31168],{"class":1015}," yield",[1002,31170,6246],{"class":1019},[1002,31172,1407],{"class":1030},[1002,31174,31175,31177,31179,31181,31183],{"class":1004,"line":1354},[1002,31176,31155],{"class":1015},[1002,31178,31106],{"class":1026},[1002,31180,1031],{"class":1030},[1002,31182,6370],{"class":1019},[1002,31184,1085],{"class":1030},[1002,31186,31187,31189,31191],{"class":1004,"line":1360},[1002,31188,31168],{"class":1015},[1002,31190,10248],{"class":1019},[1002,31192,1407],{"class":1030},[1002,31194,31195,31197,31199,31201,31203],{"class":1004,"line":1366},[1002,31196,31155],{"class":1015},[1002,31198,31106],{"class":1026},[1002,31200,1031],{"class":1030},[1002,31202,6370],{"class":1019},[1002,31204,1085],{"class":1030},[1002,31206,31207,31209,31211],{"class":1004,"line":1946},[1002,31208,31168],{"class":1015},[1002,31210,17813],{"class":1019},[1002,31212,1407],{"class":1030},[1002,31214,31215],{"class":1004,"line":1956},[1002,31216,1170],{"class":1030},[1002,31218,31219],{"class":1004,"line":1961},[1002,31220,1051],{"emptyLinePlaceholder":1050},[1002,31222,31223,31225,31227,31229,31231,31233,31236,31238],{"class":1004,"line":1971},[1002,31224,6510],{"class":1015},[1002,31226,15047],{"class":1015},[1002,31228,6513],{"class":1030},[1002,31230,1016],{"class":1015},[1002,31232,30398],{"class":1019},[1002,31234,31235],{"class":1015}," of",[1002,31237,31148],{"class":1026},[1002,31239,3547],{"class":1030},[1002,31241,31242,31244,31246],{"class":1004,"line":1980},[1002,31243,6977],{"class":1030},[1002,31245,2886],{"class":1026},[1002,31247,31248],{"class":1030},"(value);\n",[1002,31250,31251],{"class":1004,"line":1985},[1002,31252,1170],{"class":1030},[925,31254,31255],{},"Understanding promises is the key to asynchronous JavaScript programming. This article hopefully will help you in understanding how async\u002Fawait works.",[1579,31257,31258],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":31260},[31261,31262,31263,31264,31265,31266],{"id":30509,"depth":1012,"text":30510},{"id":30522,"depth":1012,"text":30523},{"id":30794,"depth":1012,"text":30795},{"id":30833,"depth":1012,"text":30834},{"id":30952,"depth":1012,"text":30953},{"id":31060,"depth":1012,"text":31061},"2017-06-13","\u002Fimages\u002Fblog\u002Ffeatures\u002Fasynchronous-javascript-asyncawait.jpg",{},{"title":36,"description":38},"blog\u002Fasynchronous-javascript-asyncawait",[16,17,40],"xZBeY9dhujONe90xf7FI83aArof6ncW1Co8Rm5XGJ0g",{"id":31275,"title":242,"author":920,"body":31276,"date":31681,"description":244,"extension":1591,"image":31682,"meta":31683,"navigation":1050,"path":243,"seo":31684,"stem":31685,"tags":31686,"__hash__":31687},"blog\u002Fblog\u002Fes6-parameter-handling.md",{"type":922,"value":31277,"toc":31675},[31278,31282,31285,31326,31333,31377,31380,31472,31475,31511,31515,31518,31582,31585,31591,31595,31598,31667,31669,31672],[953,31279,31281],{"id":31280},"spread-operator","Spread Operator",[925,31283,31284],{},"In ES5 we had to pass in the context to a function with apply method.",[993,31286,31288],{"className":995,"code":31287,"language":997,"meta":998,"style":998},"var array = [2, 3, 5];\nMath.min.apply(Math, array); \u002F\u002F 2\n",[941,31289,31290,31313],{"__ignoreMap":998},[1002,31291,31292,31294,31297,31299,31301,31303,31305,31307,31309,31311],{"class":1004,"line":1005},[1002,31293,18311],{"class":1015},[1002,31295,31296],{"class":1030}," array ",[1002,31298,2393],{"class":1015},[1002,31300,1897],{"class":1030},[1002,31302,5681],{"class":1019},[1002,31304,1251],{"class":1030},[1002,31306,2796],{"class":1019},[1002,31308,1251],{"class":1030},[1002,31310,2859],{"class":1019},[1002,31312,6754],{"class":1030},[1002,31314,31315,31318,31320,31323],{"class":1004,"line":1012},[1002,31316,31317],{"class":1030},"Math.min.",[1002,31319,17677],{"class":1026},[1002,31321,31322],{"class":1030},"(Math, array); ",[1002,31324,31325],{"class":1008},"\u002F\u002F 2\n",[925,31327,31328,31329,31332],{},"ES6 introduced in the ",[941,31330,31331],{},"spread"," operator, which expands the array to create individual values for the function.",[993,31334,31336],{"className":995,"code":31335,"language":997,"meta":998,"style":998},"var array = [2, 3, 5];\nMath.min(...array); \u002F\u002F 2\n",[941,31337,31338,31360],{"__ignoreMap":998},[1002,31339,31340,31342,31344,31346,31348,31350,31352,31354,31356,31358],{"class":1004,"line":1005},[1002,31341,18311],{"class":1015},[1002,31343,31296],{"class":1030},[1002,31345,2393],{"class":1015},[1002,31347,1897],{"class":1030},[1002,31349,5681],{"class":1019},[1002,31351,1251],{"class":1030},[1002,31353,2796],{"class":1019},[1002,31355,1251],{"class":1030},[1002,31357,2859],{"class":1019},[1002,31359,6754],{"class":1030},[1002,31361,31362,31365,31368,31370,31372,31375],{"class":1004,"line":1012},[1002,31363,31364],{"class":1030},"Math.",[1002,31366,31367],{"class":1026},"min",[1002,31369,1031],{"class":1030},[1002,31371,17625],{"class":1015},[1002,31373,31374],{"class":1030},"array); ",[1002,31376,31325],{"class":1008},[925,31378,31379],{},"Spread operator can also be used with other paramters, multiple times as well as mixed.",[993,31381,31383],{"className":995,"code":31382,"language":997,"meta":998,"style":998},"function func() {\n console.log(arguments);\n}\n\nconst parameters = [3, 4, 8];\nfunc(1, ...parameters, 11, ...[15, 20]);\n",[941,31384,31385,31393,31406,31410,31414,31438],{"__ignoreMap":998},[1002,31386,31387,31389,31391],{"class":1004,"line":1005},[1002,31388,6965],{"class":1015},[1002,31390,26489],{"class":1026},[1002,31392,3025],{"class":1030},[1002,31394,31395,31397,31399,31401,31404],{"class":1004,"line":1012},[1002,31396,6977],{"class":1030},[1002,31398,2886],{"class":1026},[1002,31400,1031],{"class":1030},[1002,31402,31403],{"class":1019},"arguments",[1002,31405,1085],{"class":1030},[1002,31407,31408],{"class":1004,"line":1047},[1002,31409,1170],{"class":1030},[1002,31411,31412],{"class":1004,"line":1054},[1002,31413,1051],{"emptyLinePlaceholder":1050},[1002,31415,31416,31418,31421,31423,31425,31427,31429,31431,31433,31436],{"class":1004,"line":1060},[1002,31417,1016],{"class":1015},[1002,31419,31420],{"class":1019}," parameters",[1002,31422,1023],{"class":1015},[1002,31424,1897],{"class":1030},[1002,31426,2796],{"class":1019},[1002,31428,1251],{"class":1030},[1002,31430,3837],{"class":1019},[1002,31432,1251],{"class":1030},[1002,31434,31435],{"class":1019},"8",[1002,31437,6754],{"class":1030},[1002,31439,31440,31442,31444,31446,31448,31450,31453,31456,31458,31460,31463,31466,31468,31470],{"class":1004,"line":1272},[1002,31441,25478],{"class":1026},[1002,31443,1031],{"class":1030},[1002,31445,6211],{"class":1019},[1002,31447,1251],{"class":1030},[1002,31449,17625],{"class":1015},[1002,31451,31452],{"class":1030},"parameters, ",[1002,31454,31455],{"class":1019},"11",[1002,31457,1251],{"class":1030},[1002,31459,17625],{"class":1015},[1002,31461,31462],{"class":1030},"[",[1002,31464,31465],{"class":1019},"15",[1002,31467,1251],{"class":1030},[1002,31469,4809],{"class":1019},[1002,31471,29611],{"class":1030},[925,31473,31474],{},"Spread operator is also works well with constructors.",[993,31476,31478],{"className":995,"code":31477,"language":997,"meta":998,"style":998},"new Date(...[1980, 2, 15]);\n\u002F\u002F Sat Mar 15 1980 00:00:00 GMT+1000 (AEST)\n",[941,31479,31480,31506],{"__ignoreMap":998},[1002,31481,31482,31484,31487,31489,31491,31493,31496,31498,31500,31502,31504],{"class":1004,"line":1005},[1002,31483,5654],{"class":1015},[1002,31485,31486],{"class":1026}," Date",[1002,31488,1031],{"class":1030},[1002,31490,17625],{"class":1015},[1002,31492,31462],{"class":1030},[1002,31494,31495],{"class":1019},"1980",[1002,31497,1251],{"class":1030},[1002,31499,5681],{"class":1019},[1002,31501,1251],{"class":1030},[1002,31503,31465],{"class":1019},[1002,31505,29611],{"class":1030},[1002,31507,31508],{"class":1004,"line":1012},[1002,31509,31510],{"class":1008},"\u002F\u002F Sat Mar 15 1980 00:00:00 GMT+1000 (AEST)\n",[953,31512,31514],{"id":31513},"rest-parameters","Rest Parameters",[925,31516,31517],{},"Rest parameters somewhat does the opposite of the spread operator. It collects parameters and turns them into an array just like the arguments half array.",[993,31519,31521],{"className":995,"code":31520,"language":997,"meta":998,"style":998},"function func(...rest) {\n console.log(rest);\n}\n\nfunc('a', 'b', 1, 2);\n\u002F\u002F [\"a\", \"b\", 1, 2]\n",[941,31522,31523,31537,31546,31550,31554,31577],{"__ignoreMap":998},[1002,31524,31525,31527,31529,31531,31533,31535],{"class":1004,"line":1005},[1002,31526,6965],{"class":1015},[1002,31528,26489],{"class":1026},[1002,31530,1031],{"class":1030},[1002,31532,17625],{"class":1015},[1002,31534,27630],{"class":2378},[1002,31536,2382],{"class":1030},[1002,31538,31539,31541,31543],{"class":1004,"line":1012},[1002,31540,6977],{"class":1030},[1002,31542,2886],{"class":1026},[1002,31544,31545],{"class":1030},"(rest);\n",[1002,31547,31548],{"class":1004,"line":1047},[1002,31549,1170],{"class":1030},[1002,31551,31552],{"class":1004,"line":1054},[1002,31553,1051],{"emptyLinePlaceholder":1050},[1002,31555,31556,31558,31560,31562,31564,31567,31569,31571,31573,31575],{"class":1004,"line":1060},[1002,31557,25478],{"class":1026},[1002,31559,1031],{"class":1030},[1002,31561,28315],{"class":1034},[1002,31563,1251],{"class":1030},[1002,31565,31566],{"class":1034},"'b'",[1002,31568,1251],{"class":1030},[1002,31570,6211],{"class":1019},[1002,31572,1251],{"class":1030},[1002,31574,5681],{"class":1019},[1002,31576,1085],{"class":1030},[1002,31578,31579],{"class":1004,"line":1272},[1002,31580,31581],{"class":1008},"\u002F\u002F [\"a\", \"b\", 1, 2]\n",[925,31583,31584],{},"Rest parameters improve the readability of the code immensely.",[7100,31586,31588],{"title":31587,"type":23379},"Rest Limitations",[925,31589,31590],{},"Rest paramater has to be the last one and you can’t have more than one.",[953,31592,31594],{"id":31593},"default-parameters","Default Parameters",[925,31596,31597],{},"ES6 now allows default parameters in the function signature.",[993,31599,31601],{"className":995,"code":31600,"language":997,"meta":998,"style":998},"function func(a = 1, b = 2) {\n console.log(a, b);\n}\n\nfunc(2); \u002F\u002F 2 2\nfunc(); \u002F\u002F 1 2\n",[941,31602,31603,31628,31637,31641,31645,31658],{"__ignoreMap":998},[1002,31604,31605,31607,31609,31611,31613,31615,31617,31619,31622,31624,31626],{"class":1004,"line":1005},[1002,31606,6965],{"class":1015},[1002,31608,26489],{"class":1026},[1002,31610,1031],{"class":1030},[1002,31612,933],{"class":2378},[1002,31614,1023],{"class":1015},[1002,31616,6246],{"class":1019},[1002,31618,1251],{"class":1030},[1002,31620,31621],{"class":2378},"b",[1002,31623,1023],{"class":1015},[1002,31625,10248],{"class":1019},[1002,31627,2382],{"class":1030},[1002,31629,31630,31632,31634],{"class":1004,"line":1012},[1002,31631,6977],{"class":1030},[1002,31633,2886],{"class":1026},[1002,31635,31636],{"class":1030},"(a, b);\n",[1002,31638,31639],{"class":1004,"line":1047},[1002,31640,1170],{"class":1030},[1002,31642,31643],{"class":1004,"line":1054},[1002,31644,1051],{"emptyLinePlaceholder":1050},[1002,31646,31647,31649,31651,31653,31655],{"class":1004,"line":1060},[1002,31648,25478],{"class":1026},[1002,31650,1031],{"class":1030},[1002,31652,5681],{"class":1019},[1002,31654,18256],{"class":1030},[1002,31656,31657],{"class":1008},"\u002F\u002F 2 2\n",[1002,31659,31660,31662,31664],{"class":1004,"line":1272},[1002,31661,25478],{"class":1026},[1002,31663,6859],{"class":1030},[1002,31665,31666],{"class":1008},"\u002F\u002F 1 2\n",[953,31668,26561],{"id":26560},[925,31670,31671],{},"ES6 parameter handling has come a long way since the last version. These improvements will make parameter handling in JavaScript a breeze.",[1579,31673,31674],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":31676},[31677,31678,31679,31680],{"id":31280,"depth":1012,"text":31281},{"id":31513,"depth":1012,"text":31514},{"id":31593,"depth":1012,"text":31594},{"id":26560,"depth":1012,"text":26561},"2017-05-30","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-parameter-handling.jpg",{},{"title":242,"description":244},"blog\u002Fes6-parameter-handling",[16,17,220],"O0-lsfq5c65y3Yn4uCP3bRUiZbl7spPxE9JsTk-xHTg",{"id":31689,"title":242,"author":920,"body":31690,"date":31681,"description":893,"extension":1591,"image":32073,"meta":32074,"navigation":1050,"path":892,"seo":32075,"stem":32076,"tags":32077,"__hash__":32078},"blog\u002Fblog\u002Fweb-application-security.md",{"type":922,"value":31691,"toc":32060},[31692,31696,31699,31702,31716,31719,31723,31732,31735,31746,31749,31756,31759,31762,31773,31777,31780,31791,31795,31798,31801,31810,31816,31819,31822,31843,31846,31875,31878,31885,31888,31895,31939,31946,31949,31953,31956,31962,31969,31972,31992,31995,31999,32002,32009,32018,32021,32024,32030,32036,32045,32048,32051,32057],[953,31693,31695],{"id":31694},"why-cyber-security","Why cyber-security?",[925,31697,31698],{},"Cyber security has become a necessity for any web developer building client-facing web applications.",[925,31700,31701],{},"We are looking into following options for securing our app:",[1530,31703,31704,31707,31710,31713],{},[974,31705,31706],{},"Disable Caching Confidential Resources",[974,31708,31709],{},"Enable XSS Filtering",[974,31711,31712],{},"Controlling Framing",[974,31714,31715],{},"Whitelisting Sources",[925,31717,31718],{},"HTTP headers are an area we can address for starters.",[953,31720,31722],{"id":31721},"what-are-http-headers","What are HTTP Headers?",[925,31724,31725,2034,31728,31731],{},[941,31726,31727],{},"HTTP request",[941,31729,31730],{},"HTTP response"," messages consist of clear text fields in the header. These are called HTTP Headers.",[925,31733,31734],{},"These headers are used by the HTTP client and server to:",[1530,31736,31737,31740,31743],{},[974,31738,31739],{},"Send & receive metadata about the connection to be established",[974,31741,31742],{},"The resources being requested",[974,31744,31745],{},"And the returned resource itself",[953,31747,31706],{"id":31748},"disable-caching-confidential-resources",[925,31750,31751,31752,31755],{},"Always caching HTTP ",[941,31753,31754],{},"GET","* requests, enables HTTP to enhance performance, and reduce network traffic.",[925,31757,31758],{},"But this can also expose end users to be vulnerable for personal information theft.",[925,31760,31761],{},"There are three headers you can send to teh client to make sure the cache will be disabled:",[1530,31763,31764,31767,31770],{},[974,31765,31766],{},"CacheControl",[974,31768,31769],{},"Expires",[974,31771,31772],{},"Pragma",[1655,31774,31776],{"id":31775},"cache-control","Cache Control",[925,31778,31779],{},"This header can be used to instruct clients and intermediate proxies on how to respond to caching.",[1530,31781,31782,31785,31788],{},[974,31783,31784],{},"no-cache – Do not to use a previously cached response",[974,31786,31787],{},"no-store – Do not store the response",[974,31789,31790],{},"must-revalidate – if the response is somehow cached, the cache must be revalidated on the origin server",[1655,31792,31794],{"id":31793},"pragma-no-cache","Pragma: no-cache",[925,31796,31797],{},"Some HTTP clients like intermediary proxies, still might not fully support HTTP 1.1 and may have trouble handling the Cache-Control header mentioned above.",[925,31799,31800],{},"For backwards-compatibility with HTTP 1.0, you will want to include this header as well.",[993,31802,31804],{"className":1120,"code":31803,"language":1122,"meta":998,"style":998},"Pragma: no-cache\n",[941,31805,31806],{"__ignoreMap":998},[1002,31807,31808],{"class":1004,"line":1005},[1002,31809,31803],{"class":1030},[7100,31811,31813],{"title":31812,"type":23379},"Perfomance",[925,31814,31815],{},"Disabling cache will slow down the performance so make sure to disable caching only for confidential resources.",[925,31817,31818],{},"You can write your header with above considerations as shown below:",[925,31820,31821],{},"Rails 4:",[993,31823,31826],{"className":31824,"code":31825,"language":124,"meta":998,"style":998},"language-ruby shiki shiki-themes github-light github-dark","response.headers['Cache-Control'] = 'no-cache, no-store, max-age=0, must-revalidate'\nresponse.headers['Expires'] = '-1';\nresponse.headers['Pragma'] = 'no-cache'\n",[941,31827,31828,31833,31838],{"__ignoreMap":998},[1002,31829,31830],{"class":1004,"line":1005},[1002,31831,31832],{},"response.headers['Cache-Control'] = 'no-cache, no-store, max-age=0, must-revalidate'\n",[1002,31834,31835],{"class":1004,"line":1012},[1002,31836,31837],{},"response.headers['Expires'] = '-1';\n",[1002,31839,31840],{"class":1004,"line":1047},[1002,31841,31842],{},"response.headers['Pragma'] = 'no-cache'\n",[925,31844,31845],{},"Node.js:",[993,31847,31849],{"className":31824,"code":31848,"language":124,"meta":998,"style":998},"function requestHandler(req, res) {\n res.setHeader('Cache-Control', 'no-cache, no-store, max-age=0, must-revalidate');\n res.setHeader('Expires', '-1');\n res.setHeader('Pragma', 'no-cache');\n}\n",[941,31850,31851,31856,31861,31866,31871],{"__ignoreMap":998},[1002,31852,31853],{"class":1004,"line":1005},[1002,31854,31855],{},"function requestHandler(req, res) {\n",[1002,31857,31858],{"class":1004,"line":1012},[1002,31859,31860],{}," res.setHeader('Cache-Control', 'no-cache, no-store, max-age=0, must-revalidate');\n",[1002,31862,31863],{"class":1004,"line":1047},[1002,31864,31865],{}," res.setHeader('Expires', '-1');\n",[1002,31867,31868],{"class":1004,"line":1054},[1002,31869,31870],{}," res.setHeader('Pragma', 'no-cache');\n",[1002,31872,31873],{"class":1004,"line":1060},[1002,31874,1170],{},[953,31876,31709],{"id":31877},"enable-xss-filtering",[925,31879,31880,31881,31884],{},"Cross-site scripting attack or ",[941,31882,31883],{},"reflected XSS",", is a malicious attack on a web application by injecting JavaScript code into an HTTP request and accessing confidential information like session cookies.",[925,31886,31887],{},"Most browsers today, employ a XSS filters to mitigate cross-site scripting attacks but may fail to detect a real XSS attack.",[925,31889,31890,31891,31894],{},"But fortunately a web application can override this configuration via an ",[941,31892,31893],{},"X-XSS-Protection"," header.",[993,31896,31898],{"className":995,"code":31897,"language":997,"meta":998,"style":998},"function requestHandler(req, res) {\n res.setHeader('X-XSS-Protection', '1;mode=block');\n}\n",[941,31899,31900,31917,31935],{"__ignoreMap":998},[1002,31901,31902,31904,31907,31909,31911,31913,31915],{"class":1004,"line":1005},[1002,31903,6965],{"class":1015},[1002,31905,31906],{"class":1026}," requestHandler",[1002,31908,1031],{"class":1030},[1002,31910,22159],{"class":2378},[1002,31912,1251],{"class":1030},[1002,31914,14985],{"class":2378},[1002,31916,2382],{"class":1030},[1002,31918,31919,31921,31923,31925,31928,31930,31933],{"class":1004,"line":1012},[1002,31920,14992],{"class":1030},[1002,31922,14995],{"class":1026},[1002,31924,1031],{"class":1030},[1002,31926,31927],{"class":1034},"'X-XSS-Protection'",[1002,31929,1251],{"class":1030},[1002,31931,31932],{"class":1034},"'1;mode=block'",[1002,31934,1085],{"class":1030},[1002,31936,31937],{"class":1004,"line":1047},[1002,31938,1170],{"class":1030},[925,31940,31941,16529,31943,31945],{},[941,31942,6211],{},[941,31944,5867],{}," enables or disables the filter.",[925,31947,31948],{},"mode=block will block the page from rendering when an attack is detected.",[953,31950,31952],{"id":31951},"https","HTTPS",[925,31954,31955],{},"An insecure connection exposes the user to multitude of attacks, which could easily lead to cookie theft or even worse. For an example, A malicious attacker can easily spoof network frames within a public Wi-Fi network and to obtain session cookies of users who are not using HTTPS.",[7100,31957,31959],{"title":31958,"type":24048},"Man-in-the-Middle (MitM) attacks",[925,31960,31961],{},"A downgrade attack, which an attempt to force the connection to be downgraded to an insecure connection, thus exposing the user to MitM attacks.",[925,31963,31964,31965,31968],{},"In order to enforce the usage of ",[941,31966,31967],{},"HTTPS, we can use the HTTP Strict Transport Security"," (HSTS) header. Put simply, HSTS makes sure all communications with the origin host are using HTTPS.",[925,31970,31971],{},"HSTS directives can be configured like the following:",[1530,31973,31974,31980,31986],{},[974,31975,31976,31979],{},[928,31977,31978],{},"includeSubDomains"," – HSTS will be applied to all sub domains",[974,31981,31982,31985],{},[928,31983,31984],{},"max-age="," – browser will cache this header for a given time",[974,31987,31988,31991],{},[928,31989,31990],{},"preload"," – forces browsers to always load your web app securely by hardcoding a list of HSTS preload-enabled domains into the browser’s code",[925,31993,31994],{},"If you are using preload directives, you will have to make sure that your website can only be using HTTPS.",[953,31996,31998],{"id":31997},"avoiding-content-type-sniffingmime-sniffing","Avoiding Content-Type Sniffing(MIME Sniffing)",[925,32000,32001],{},"This feature enables the browser to detect the type of a resource provided as part of an HTTP response by sniffing the actual resource bits, regardless of the resource type declared through the Content-Type response header. While this feature is indeed useful in some cases, it introduces a vulnerability and an attack vector known as a MIME confusion attack.",[925,32003,32004,32005,32008],{},"We can use ",[941,32006,32007],{},"X-Content-Type-Options"," header to address this issue.",[993,32010,32012],{"className":1120,"code":32011,"language":1122,"meta":998,"style":998},"X-Content-Type-Options: nosniff\n",[941,32013,32014],{"__ignoreMap":998},[1002,32015,32016],{"class":1004,"line":1005},[1002,32017,32011],{"class":1030},[953,32019,31712],{"id":32020},"controlling-framing",[925,32022,32023],{},"Using iframes in your website can makes clickjacking easier.",[7100,32025,32027],{"title":32026,"type":24048},"Clickjacking",[925,32028,32029],{},"An attack that tricks the user into clicking something different than what they think they’re clicking.",[925,32031,22450,32032,32035],{},[941,32033,32034],{},"X-Frame-Options"," you can block this attack by restricting your web app from being framed.",[993,32037,32039],{"className":1120,"code":32038,"language":1122,"meta":998,"style":998},"X-Frame-Options: SAMEORIGIN\n",[941,32040,32041],{"__ignoreMap":998},[1002,32042,32043],{"class":1004,"line":1005},[1002,32044,32038],{"class":1030},[953,32046,31715],{"id":32047},"whitelisting-sources",[925,32049,32050],{},"Content Security Policy (CSP) enables developers to whitelist trusted sources and operations.",[7100,32052,32054],{"title":32053,"type":24048},"Content Security Policy (CSP)",[925,32055,32056],{},"CSP is a W3C specification that defines a powerful browser-based security mechanism, enabling granular control over resource-loading and script execution in a web app.",[1579,32058,32059],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":32061},[32062,32063,32064,32068,32069,32070,32071,32072],{"id":31694,"depth":1012,"text":31695},{"id":31721,"depth":1012,"text":31722},{"id":31748,"depth":1012,"text":31706,"children":32065},[32066,32067],{"id":31775,"depth":1047,"text":31776},{"id":31793,"depth":1047,"text":31794},{"id":31877,"depth":1012,"text":31709},{"id":31951,"depth":1012,"text":31952},{"id":31997,"depth":1012,"text":31998},{"id":32020,"depth":1012,"text":31712},{"id":32047,"depth":1012,"text":31715},"\u002Fimages\u002Fblog\u002Ffeatures\u002Fweb-application-security.jpg",{},{"title":242,"description":893},"blog\u002Fweb-application-security",[16,895],"CkUC4uoatLVQ-K3vcSrxxaWh2c79eTJkEqMsde54jWY",{"id":32080,"title":247,"author":920,"body":32081,"date":32976,"description":249,"extension":1591,"image":32977,"meta":32978,"navigation":1050,"path":248,"seo":32979,"stem":32980,"tags":32981,"__hash__":32982},"blog\u002Fblog\u002Fes6-recursion-with-functional-programming.md",{"type":922,"value":32082,"toc":32967},[32083,32087,32097,32100,32151,32154,32157,32216,32222,32226,32232,32234,32237,32240,32243,32367,32374,32377,32444,32447,32450,32453,32539,32541,32612,32619,32622,32625,32790,32795,32798,32801,32904,32906,32959,32961,32964],[953,32084,32086],{"id":32085},"head-tail","Head & Tail",[925,32088,32089,32090,32093,32094,948],{},"When functions are run recursively over lists, we can model those lists as a ",[941,32091,32092],{},"head"," and a ",[941,32095,32096],{},"tail",[925,32098,32099],{},"The head is the first element of the list, and the tail is the rest.",[993,32101,32103],{"className":995,"code":32102,"language":997,"meta":998,"style":998},"const [head, ...tail] = [1, 2, 3, 4];\n\u002F\u002F head: 1\n\u002F\u002F tail: 2, 3, 4\n",[941,32104,32105,32141,32146],{"__ignoreMap":998},[1002,32106,32107,32109,32111,32113,32115,32117,32119,32121,32123,32125,32127,32129,32131,32133,32135,32137,32139],{"class":1004,"line":1005},[1002,32108,1016],{"class":1015},[1002,32110,1897],{"class":1030},[1002,32112,32092],{"class":1019},[1002,32114,1251],{"class":1030},[1002,32116,17625],{"class":1015},[1002,32118,32096],{"class":1019},[1002,32120,18338],{"class":1030},[1002,32122,2393],{"class":1015},[1002,32124,1897],{"class":1030},[1002,32126,6211],{"class":1019},[1002,32128,1251],{"class":1030},[1002,32130,5681],{"class":1019},[1002,32132,1251],{"class":1030},[1002,32134,2796],{"class":1019},[1002,32136,1251],{"class":1030},[1002,32138,3837],{"class":1019},[1002,32140,6754],{"class":1030},[1002,32142,32143],{"class":1004,"line":1012},[1002,32144,32145],{"class":1008},"\u002F\u002F head: 1\n",[1002,32147,32148],{"class":1004,"line":1047},[1002,32149,32150],{"class":1008},"\u002F\u002F tail: 2, 3, 4\n",[925,32152,32153],{},"In ES6, we can use destructuring for retrieving the tail as above.",[925,32155,32156],{},"Doing things functional, we can implement the head and tail functions.",[993,32158,32160],{"className":995,"code":32159,"language":997,"meta":998,"style":998},"const getHead = ([head, ...tail]) => head;\nconst getTail = ([head, ...tail]) => tail;\n",[941,32161,32162,32190],{"__ignoreMap":998},[1002,32163,32164,32166,32169,32171,32174,32176,32178,32180,32182,32185,32187],{"class":1004,"line":1005},[1002,32165,1016],{"class":1015},[1002,32167,32168],{"class":1026}," getHead",[1002,32170,1023],{"class":1015},[1002,32172,32173],{"class":1030}," ([",[1002,32175,32092],{"class":2378},[1002,32177,1251],{"class":1030},[1002,32179,17625],{"class":1015},[1002,32181,32096],{"class":2378},[1002,32183,32184],{"class":1030},"]) ",[1002,32186,15497],{"class":1015},[1002,32188,32189],{"class":1030}," head;\n",[1002,32191,32192,32194,32197,32199,32201,32203,32205,32207,32209,32211,32213],{"class":1004,"line":1012},[1002,32193,1016],{"class":1015},[1002,32195,32196],{"class":1026}," getTail",[1002,32198,1023],{"class":1015},[1002,32200,32173],{"class":1030},[1002,32202,32092],{"class":2378},[1002,32204,1251],{"class":1030},[1002,32206,17625],{"class":1015},[1002,32208,32096],{"class":2378},[1002,32210,32184],{"class":1030},[1002,32212,15497],{"class":1015},[1002,32214,32215],{"class":1030}," tail;\n",[925,32217,32218],{},[963,32219],{"alt":32220,"src":32221},"Winnie The Pooh Eating Recursion","\u002Fimages\u002Fblog\u002F2016-10-20-es6-recursion-with-functional-programming\u002Fpooh.jpg",[953,32223,32225],{"id":32224},"tail-recursion","(Tail) Recursion",[925,32227,32228,32229,32231],{},"We can implement functions that operate over arrays using ",[933,32230,17034],{"href":243}," destructuring and recursion, for example map function.",[7100,32233],{"title":23271,"type":24048},[925,32235,32236],{},"Let’s start by implementing the map function in ES6.",[953,32238,32239],{"id":19444},"Map",[925,32241,32242],{},"Map takes a list and a function, and returns a list containing the result of the function applied to each element of the list.",[993,32244,32246],{"className":995,"code":32245,"language":997,"meta":998,"style":998},"function map([head, ...tail], fn) {\n if (head === undefined && !tail.length) {\n return [];\n } else {\n return tail.length === 0 \u002F\u002F highlight\n ? [fn(head)]\n : [fn(head), ...map(tail, fn)];\n }\n}\n",[941,32247,32248,32272,32297,32303,32311,32328,32340,32359,32363],{"__ignoreMap":998},[1002,32249,32250,32252,32255,32257,32259,32261,32263,32265,32268,32270],{"class":1004,"line":1005},[1002,32251,6965],{"class":1015},[1002,32253,32254],{"class":1026}," map",[1002,32256,30910],{"class":1030},[1002,32258,32092],{"class":2378},[1002,32260,1251],{"class":1030},[1002,32262,17625],{"class":1015},[1002,32264,32096],{"class":2378},[1002,32266,32267],{"class":1030},"], ",[1002,32269,8265],{"class":2378},[1002,32271,2382],{"class":1030},[1002,32273,32274,32276,32279,32281,32284,32287,32290,32293,32295],{"class":1004,"line":1012},[1002,32275,19971],{"class":1015},[1002,32277,32278],{"class":1030}," (head ",[1002,32280,2892],{"class":1015},[1002,32282,32283],{"class":1019}," undefined",[1002,32285,32286],{"class":1015}," &&",[1002,32288,32289],{"class":1015}," !",[1002,32291,32292],{"class":1030},"tail.",[1002,32294,5873],{"class":1019},[1002,32296,2382],{"class":1030},[1002,32298,32299,32301],{"class":1004,"line":1047},[1002,32300,2687],{"class":1015},[1002,32302,4924],{"class":1030},[1002,32304,32305,32307,32309],{"class":1004,"line":1054},[1002,32306,30770],{"class":1030},[1002,32308,6060],{"class":1015},[1002,32310,1457],{"class":1030},[1002,32312,32313,32315,32318,32320,32323,32325],{"class":1004,"line":1060},[1002,32314,2687],{"class":1015},[1002,32316,32317],{"class":1030}," tail.",[1002,32319,5873],{"class":1019},[1002,32321,32322],{"class":1015}," ===",[1002,32324,4910],{"class":1019},[1002,32326,32327],{"class":1008}," \u002F\u002F highlight\n",[1002,32329,32330,32333,32335,32337],{"class":1004,"line":1272},[1002,32331,32332],{"class":1015}," ?",[1002,32334,1897],{"class":1030},[1002,32336,8265],{"class":1026},[1002,32338,32339],{"class":1030},"(head)]\n",[1002,32341,32342,32345,32347,32349,32352,32354,32356],{"class":1004,"line":1348},[1002,32343,32344],{"class":1015}," :",[1002,32346,1897],{"class":1030},[1002,32348,8265],{"class":1026},[1002,32350,32351],{"class":1030},"(head), ",[1002,32353,17625],{"class":1015},[1002,32355,19444],{"class":1026},[1002,32357,32358],{"class":1030},"(tail, fn)];\n",[1002,32360,32361],{"class":1004,"line":1354},[1002,32362,1269],{"class":1030},[1002,32364,32365],{"class":1004,"line":1360},[1002,32366,1170],{"class":1030},[925,32368,32369,32370,32373],{},"Line 5: the ",[941,32371,32372],{},"tail.length === 0"," checks if there is still a tail to recurse over. Otherwise, the recursion stops there.",[925,32375,32376],{},"This function can be used to test like follows:",[993,32378,32380],{"className":995,"code":32379,"language":997,"meta":998,"style":998},"const items = [1, 2, 3, 4];\n\nconsole.log(map(items, (item) => item + 1));\n\u002F\u002F 2, 3, 4, 5\n",[941,32381,32382,32408,32412,32439],{"__ignoreMap":998},[1002,32383,32384,32386,32388,32390,32392,32394,32396,32398,32400,32402,32404,32406],{"class":1004,"line":1005},[1002,32385,1016],{"class":1015},[1002,32387,6909],{"class":1019},[1002,32389,1023],{"class":1015},[1002,32391,1897],{"class":1030},[1002,32393,6211],{"class":1019},[1002,32395,1251],{"class":1030},[1002,32397,5681],{"class":1019},[1002,32399,1251],{"class":1030},[1002,32401,2796],{"class":1019},[1002,32403,1251],{"class":1030},[1002,32405,3837],{"class":1019},[1002,32407,6754],{"class":1030},[1002,32409,32410],{"class":1004,"line":1012},[1002,32411,1051],{"emptyLinePlaceholder":1050},[1002,32413,32414,32416,32418,32420,32422,32425,32427,32429,32431,32433,32435,32437],{"class":1004,"line":1047},[1002,32415,2883],{"class":1030},[1002,32417,2886],{"class":1026},[1002,32419,1031],{"class":1030},[1002,32421,19444],{"class":1026},[1002,32423,32424],{"class":1030},"(items, (",[1002,32426,6970],{"class":2378},[1002,32428,5876],{"class":1030},[1002,32430,15497],{"class":1015},[1002,32432,6848],{"class":1030},[1002,32434,5064],{"class":1015},[1002,32436,6246],{"class":1019},[1002,32438,5663],{"class":1030},[1002,32440,32441],{"class":1004,"line":1054},[1002,32442,32443],{"class":1008},"\u002F\u002F 2, 3, 4, 5\n",[925,32445,32446],{},"Next, look at how we can implement filter method.",[953,32448,32449],{"id":8313},"Filter",[925,32451,32452],{},"The filter() method creates a new array with all elements that pass the test implemented by the provided function.",[993,32454,32456],{"className":995,"code":32455,"language":997,"meta":998,"style":998},"function filter([head, ...tail], fn) {\n const newHead = fn(head) ? [head] : [];\n return tail.length ? [...newHead, ...filter(tail, fn)] : newHead;\n}\n",[941,32457,32458,32481,32505,32535],{"__ignoreMap":998},[1002,32459,32460,32462,32465,32467,32469,32471,32473,32475,32477,32479],{"class":1004,"line":1005},[1002,32461,6965],{"class":1015},[1002,32463,32464],{"class":1026}," filter",[1002,32466,30910],{"class":1030},[1002,32468,32092],{"class":2378},[1002,32470,1251],{"class":1030},[1002,32472,17625],{"class":1015},[1002,32474,32096],{"class":2378},[1002,32476,32267],{"class":1030},[1002,32478,8265],{"class":2378},[1002,32480,2382],{"class":1030},[1002,32482,32483,32485,32488,32490,32493,32496,32498,32501,32503],{"class":1004,"line":1012},[1002,32484,10423],{"class":1015},[1002,32486,32487],{"class":1019}," newHead",[1002,32489,1023],{"class":1015},[1002,32491,32492],{"class":1026}," fn",[1002,32494,32495],{"class":1030},"(head) ",[1002,32497,24117],{"class":1015},[1002,32499,32500],{"class":1030}," [head] ",[1002,32502,1813],{"class":1015},[1002,32504,4924],{"class":1030},[1002,32506,32507,32509,32511,32513,32516,32518,32520,32523,32525,32527,32530,32532],{"class":1004,"line":1047},[1002,32508,15066],{"class":1015},[1002,32510,32317],{"class":1030},[1002,32512,5873],{"class":1019},[1002,32514,32515],{"class":1015}," ?",[1002,32517,1897],{"class":1030},[1002,32519,17625],{"class":1015},[1002,32521,32522],{"class":1030},"newHead, ",[1002,32524,17625],{"class":1015},[1002,32526,8313],{"class":1026},[1002,32528,32529],{"class":1030},"(tail, fn)] ",[1002,32531,1813],{"class":1015},[1002,32533,32534],{"class":1030}," newHead;\n",[1002,32536,32537],{"class":1004,"line":1054},[1002,32538,1170],{"class":1030},[925,32540,32376],{},[993,32542,32544],{"className":995,"code":32543,"language":997,"meta":998,"style":998},"const items = [1, 2, 3, 4];\n\nconsole.log(filter(items, (item) => item % 2 === 0));\n\u002F\u002F 2, 4\n",[941,32545,32546,32572,32576,32607],{"__ignoreMap":998},[1002,32547,32548,32550,32552,32554,32556,32558,32560,32562,32564,32566,32568,32570],{"class":1004,"line":1005},[1002,32549,1016],{"class":1015},[1002,32551,6909],{"class":1019},[1002,32553,1023],{"class":1015},[1002,32555,1897],{"class":1030},[1002,32557,6211],{"class":1019},[1002,32559,1251],{"class":1030},[1002,32561,5681],{"class":1019},[1002,32563,1251],{"class":1030},[1002,32565,2796],{"class":1019},[1002,32567,1251],{"class":1030},[1002,32569,3837],{"class":1019},[1002,32571,6754],{"class":1030},[1002,32573,32574],{"class":1004,"line":1012},[1002,32575,1051],{"emptyLinePlaceholder":1050},[1002,32577,32578,32580,32582,32584,32586,32588,32590,32592,32594,32596,32599,32601,32603,32605],{"class":1004,"line":1047},[1002,32579,2883],{"class":1030},[1002,32581,2886],{"class":1026},[1002,32583,1031],{"class":1030},[1002,32585,8313],{"class":1026},[1002,32587,32424],{"class":1030},[1002,32589,6970],{"class":2378},[1002,32591,5876],{"class":1030},[1002,32593,15497],{"class":1015},[1002,32595,6848],{"class":1030},[1002,32597,32598],{"class":1015},"%",[1002,32600,10248],{"class":1019},[1002,32602,32322],{"class":1015},[1002,32604,4910],{"class":1019},[1002,32606,5663],{"class":1030},[1002,32608,32609],{"class":1004,"line":1054},[1002,32610,32611],{"class":1008},"\u002F\u002F 2, 4\n",[925,32613,32614,32615,32618],{},"Let’s look at the ",[941,32616,32617],{},"reduce"," method, next.",[953,32620,32621],{"id":32617},"Reduce",[925,32623,32624],{},"The reduce() method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value.",[993,32626,32628],{"className":995,"code":32627,"language":997,"meta":998,"style":998},"function reduce([head, ...tail], fn, initial) {\n if (head === undefined && tail.length === 0) {\n return initial;\n }\n\n if (!initial) {\n const [newHead, ...newTail] = tail;\n return reduce(newTail, fn, fn(head, newHead));\n }\n\n return tail.length\n ? reduce(tail, fn, fn(initial, head))\n : [fn(initial, head)];\n}\n",[941,32629,32630,32658,32680,32687,32691,32695,32706,32728,32742,32746,32750,32759,32774,32786],{"__ignoreMap":998},[1002,32631,32632,32634,32637,32639,32641,32643,32645,32647,32649,32651,32653,32656],{"class":1004,"line":1005},[1002,32633,6965],{"class":1015},[1002,32635,32636],{"class":1026}," reduce",[1002,32638,30910],{"class":1030},[1002,32640,32092],{"class":2378},[1002,32642,1251],{"class":1030},[1002,32644,17625],{"class":1015},[1002,32646,32096],{"class":2378},[1002,32648,32267],{"class":1030},[1002,32650,8265],{"class":2378},[1002,32652,1251],{"class":1030},[1002,32654,32655],{"class":2378},"initial",[1002,32657,2382],{"class":1030},[1002,32659,32660,32662,32664,32666,32668,32670,32672,32674,32676,32678],{"class":1004,"line":1012},[1002,32661,19971],{"class":1015},[1002,32663,32278],{"class":1030},[1002,32665,2892],{"class":1015},[1002,32667,32283],{"class":1019},[1002,32669,32286],{"class":1015},[1002,32671,32317],{"class":1030},[1002,32673,5873],{"class":1019},[1002,32675,32322],{"class":1015},[1002,32677,4910],{"class":1019},[1002,32679,2382],{"class":1030},[1002,32681,32682,32684],{"class":1004,"line":1047},[1002,32683,2687],{"class":1015},[1002,32685,32686],{"class":1030}," initial;\n",[1002,32688,32689],{"class":1004,"line":1054},[1002,32690,1269],{"class":1030},[1002,32692,32693],{"class":1004,"line":1060},[1002,32694,1051],{"emptyLinePlaceholder":1050},[1002,32696,32697,32699,32701,32703],{"class":1004,"line":1272},[1002,32698,19971],{"class":1015},[1002,32700,6513],{"class":1030},[1002,32702,13559],{"class":1015},[1002,32704,32705],{"class":1030},"initial) {\n",[1002,32707,32708,32710,32712,32715,32717,32719,32722,32724,32726],{"class":1004,"line":1348},[1002,32709,4348],{"class":1015},[1002,32711,1897],{"class":1030},[1002,32713,32714],{"class":1019},"newHead",[1002,32716,1251],{"class":1030},[1002,32718,17625],{"class":1015},[1002,32720,32721],{"class":1019},"newTail",[1002,32723,18338],{"class":1030},[1002,32725,2393],{"class":1015},[1002,32727,32215],{"class":1030},[1002,32729,32730,32732,32734,32737,32739],{"class":1004,"line":1354},[1002,32731,2687],{"class":1015},[1002,32733,32636],{"class":1026},[1002,32735,32736],{"class":1030},"(newTail, fn, ",[1002,32738,8265],{"class":1026},[1002,32740,32741],{"class":1030},"(head, newHead));\n",[1002,32743,32744],{"class":1004,"line":1360},[1002,32745,1269],{"class":1030},[1002,32747,32748],{"class":1004,"line":1366},[1002,32749,1051],{"emptyLinePlaceholder":1050},[1002,32751,32752,32754,32756],{"class":1004,"line":1946},[1002,32753,15066],{"class":1015},[1002,32755,32317],{"class":1030},[1002,32757,32758],{"class":1019},"length\n",[1002,32760,32761,32764,32766,32769,32771],{"class":1004,"line":1956},[1002,32762,32763],{"class":1015}," ?",[1002,32765,32636],{"class":1026},[1002,32767,32768],{"class":1030},"(tail, fn, ",[1002,32770,8265],{"class":1026},[1002,32772,32773],{"class":1030},"(initial, head))\n",[1002,32775,32776,32779,32781,32783],{"class":1004,"line":1961},[1002,32777,32778],{"class":1015}," :",[1002,32780,1897],{"class":1030},[1002,32782,8265],{"class":1026},[1002,32784,32785],{"class":1030},"(initial, head)];\n",[1002,32787,32788],{"class":1004,"line":1971},[1002,32789,1170],{"class":1030},[925,32791,32792,32793,22383],{},"Finally, let’s look at the ",[941,32794,7504],{},[953,32796,32797],{"id":7504},"Join",[925,32799,32800],{},"The join() method joins all elements of an array into a string.",[993,32802,32804],{"className":995,"code":32803,"language":997,"meta":998,"style":998},"function join([head, ...tail], separator = ',') {\n if (head === undefined && !tail.length) {\n return '';\n }\n\n return tail.length ? head + separator + join(tail, separator) : head;\n}\n",[941,32805,32806,32835,32855,32863,32867,32871,32900],{"__ignoreMap":998},[1002,32807,32808,32810,32813,32815,32817,32819,32821,32823,32825,32828,32830,32833],{"class":1004,"line":1005},[1002,32809,6965],{"class":1015},[1002,32811,32812],{"class":1026}," join",[1002,32814,30910],{"class":1030},[1002,32816,32092],{"class":2378},[1002,32818,1251],{"class":1030},[1002,32820,17625],{"class":1015},[1002,32822,32096],{"class":2378},[1002,32824,32267],{"class":1030},[1002,32826,32827],{"class":2378},"separator",[1002,32829,1023],{"class":1015},[1002,32831,32832],{"class":1034}," ','",[1002,32834,2382],{"class":1030},[1002,32836,32837,32839,32841,32843,32845,32847,32849,32851,32853],{"class":1004,"line":1012},[1002,32838,19971],{"class":1015},[1002,32840,32278],{"class":1030},[1002,32842,2892],{"class":1015},[1002,32844,32283],{"class":1019},[1002,32846,32286],{"class":1015},[1002,32848,32289],{"class":1015},[1002,32850,32292],{"class":1030},[1002,32852,5873],{"class":1019},[1002,32854,2382],{"class":1030},[1002,32856,32857,32859,32861],{"class":1004,"line":1047},[1002,32858,2687],{"class":1015},[1002,32860,9123],{"class":1034},[1002,32862,1407],{"class":1030},[1002,32864,32865],{"class":1004,"line":1054},[1002,32866,1269],{"class":1030},[1002,32868,32869],{"class":1004,"line":1060},[1002,32870,1051],{"emptyLinePlaceholder":1050},[1002,32872,32873,32875,32877,32879,32881,32884,32886,32889,32891,32893,32896,32898],{"class":1004,"line":1272},[1002,32874,15066],{"class":1015},[1002,32876,32317],{"class":1030},[1002,32878,5873],{"class":1019},[1002,32880,32515],{"class":1015},[1002,32882,32883],{"class":1030}," head ",[1002,32885,5064],{"class":1015},[1002,32887,32888],{"class":1030}," separator ",[1002,32890,5064],{"class":1015},[1002,32892,32812],{"class":1026},[1002,32894,32895],{"class":1030},"(tail, separator) ",[1002,32897,1813],{"class":1015},[1002,32899,32189],{"class":1030},[1002,32901,32902],{"class":1004,"line":1348},[1002,32903,1170],{"class":1030},[925,32905,32376],{},[993,32907,32909],{"className":995,"code":32908,"language":997,"meta":998,"style":998},"const items = [1, 2, 3, 4];\n\nconsole.log(join(items));\n\u002F\u002F 1, 2, 3, 4\n",[941,32910,32911,32937,32941,32954],{"__ignoreMap":998},[1002,32912,32913,32915,32917,32919,32921,32923,32925,32927,32929,32931,32933,32935],{"class":1004,"line":1005},[1002,32914,1016],{"class":1015},[1002,32916,6909],{"class":1019},[1002,32918,1023],{"class":1015},[1002,32920,1897],{"class":1030},[1002,32922,6211],{"class":1019},[1002,32924,1251],{"class":1030},[1002,32926,5681],{"class":1019},[1002,32928,1251],{"class":1030},[1002,32930,2796],{"class":1019},[1002,32932,1251],{"class":1030},[1002,32934,3837],{"class":1019},[1002,32936,6754],{"class":1030},[1002,32938,32939],{"class":1004,"line":1012},[1002,32940,1051],{"emptyLinePlaceholder":1050},[1002,32942,32943,32945,32947,32949,32951],{"class":1004,"line":1047},[1002,32944,2883],{"class":1030},[1002,32946,2886],{"class":1026},[1002,32948,1031],{"class":1030},[1002,32950,7504],{"class":1026},[1002,32952,32953],{"class":1030},"(items));\n",[1002,32955,32956],{"class":1004,"line":1054},[1002,32957,32958],{"class":1008},"\u002F\u002F 1, 2, 3, 4\n",[953,32960,26561],{"id":26560},[925,32962,32963],{},"The functions we implemented are already in ES5 and above, but doing so in recursive functions in ES6 gives you an in-depth understanding on how to use functional programming and ES6 effectively",[1579,32965,32966],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":32968},[32969,32970,32971,32972,32973,32974,32975],{"id":32085,"depth":1012,"text":32086},{"id":32224,"depth":1012,"text":32225},{"id":19444,"depth":1012,"text":32239},{"id":8313,"depth":1012,"text":32449},{"id":32617,"depth":1012,"text":32621},{"id":7504,"depth":1012,"text":32797},{"id":26560,"depth":1012,"text":26561},"2016-10-20","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-recursion-with-functional-programming.jpg",{},{"title":247,"description":249},"blog\u002Fes6-recursion-with-functional-programming",[16,17,220],"-cVYwJFUjc7Eca_N-6kDFcGfZdaOa8vvbBpBni7YieQ",{"id":32984,"title":830,"author":920,"body":32985,"date":34518,"description":832,"extension":1591,"image":34519,"meta":34520,"navigation":1050,"path":831,"seo":34521,"stem":34522,"tags":34523,"__hash__":34524},"blog\u002Fblog\u002Ftesting-react-components-enzyme.md",{"type":922,"value":32986,"toc":34499},[32987,32990,32994,33003,33006,33018,33022,33025,33056,33060,33063,33086,33089,33108,33112,33115,33143,33147,33154,33157,33191,33194,33213,33220,33578,33585,33589,33595,33804,33808,33814,33836,33840,33849,34028,34035,34149,34153,34162,34457,34464,34476,34479,34491,34493,34496],[925,32988,32989],{},"Enzyme by Airbnb has been one of the popular choices for testing React components. In this article, we will look at how write tests with Enzyme and Mocha.",[953,32991,32993],{"id":32992},"installation","Installation",[925,32995,32996,32997,33002],{},"We need Node.js installed to begin with. Follow the link, download ",[933,32998,33001],{"href":32999,"rel":33000},"https:\u002F\u002Fnodejs.org\u002Fen\u002Fdownload\u002F",[937],"Node.js"," for installation instructions.",[925,33004,33005],{},"Now create a folder for your project and then run the following command in command line.",[993,33007,33009],{"className":1797,"code":33008,"language":1799,"meta":998,"style":998},"npm init\n",[941,33010,33011],{"__ignoreMap":998},[1002,33012,33013,33015],{"class":1004,"line":1005},[1002,33014,27346],{"class":1026},[1002,33016,33017],{"class":1034}," init\n",[1655,33019,33021],{"id":33020},"babel","Babel",[925,33023,33024],{},"We need Babel to compile JSX code.",[993,33026,33028],{"className":1797,"code":33027,"language":1799,"meta":998,"style":998},"npm install babel-cli ––save\nnpm install babel-preset-react babel-preset-es2015 ––save\n",[941,33029,33030,33042],{"__ignoreMap":998},[1002,33031,33032,33034,33036,33039],{"class":1004,"line":1005},[1002,33033,27346],{"class":1026},[1002,33035,27349],{"class":1034},[1002,33037,33038],{"class":1034}," babel-cli",[1002,33040,33041],{"class":1034}," ––save\n",[1002,33043,33044,33046,33048,33051,33054],{"class":1004,"line":1012},[1002,33045,27346],{"class":1026},[1002,33047,27349],{"class":1034},[1002,33049,33050],{"class":1034}," babel-preset-react",[1002,33052,33053],{"class":1034}," babel-preset-es2015",[1002,33055,33041],{"class":1034},[1655,33057,33059],{"id":33058},"webpack","Webpack",[925,33061,33062],{},"We are going to use Webpack to build our project.",[993,33064,33066],{"className":1797,"code":33065,"language":1799,"meta":998,"style":998},"npm install webpack webpack-dev-server babel-loader ––save–dev\n",[941,33067,33068],{"__ignoreMap":998},[1002,33069,33070,33072,33074,33077,33080,33083],{"class":1004,"line":1005},[1002,33071,27346],{"class":1026},[1002,33073,27349],{"class":1034},[1002,33075,33076],{"class":1034}," webpack",[1002,33078,33079],{"class":1034}," webpack-dev-server",[1002,33081,33082],{"class":1034}," babel-loader",[1002,33084,33085],{"class":1034}," ––save–dev\n",[1655,33087,33088],{"id":40},"React",[993,33090,33092],{"className":1797,"code":33091,"language":1799,"meta":998,"style":998},"npm install react react-dom ––save\n",[941,33093,33094],{"__ignoreMap":998},[1002,33095,33096,33098,33100,33103,33106],{"class":1004,"line":1005},[1002,33097,27346],{"class":1026},[1002,33099,27349],{"class":1034},[1002,33101,33102],{"class":1034}," react",[1002,33104,33105],{"class":1034}," react-dom",[1002,33107,33041],{"class":1034},[1655,33109,33111],{"id":33110},"mocha","Mocha",[925,33113,33114],{},"We need to install testing tools:",[993,33116,33118],{"className":1797,"code":33117,"language":1799,"meta":998,"style":998},"npm install chai enzyme mocha jsdom react-addons-test-utils ––save–dev\n",[941,33119,33120],{"__ignoreMap":998},[1002,33121,33122,33124,33126,33129,33132,33135,33138,33141],{"class":1004,"line":1005},[1002,33123,27346],{"class":1026},[1002,33125,27349],{"class":1034},[1002,33127,33128],{"class":1034}," chai",[1002,33130,33131],{"class":1034}," enzyme",[1002,33133,33134],{"class":1034}," mocha",[1002,33136,33137],{"class":1034}," jsdom",[1002,33139,33140],{"class":1034}," react-addons-test-utils",[1002,33142,33085],{"class":1034},[953,33144,33146],{"id":33145},"setting-up","Setting Up",[1655,33148,33150,33151],{"id":33149},"create-babelrc","Create ",[941,33152,33153],{},".babelrc",[925,33155,33156],{},"In order to create a preset to use Babel, we have to create a .babelrc file.",[993,33158,33160],{"className":1120,"code":33159,"language":1122,"meta":998,"style":998},"{\n \"presets\": [\"airbnb\", \"es2015\", \"stage-0\"]\n}\n",[941,33161,33162,33166,33187],{"__ignoreMap":998},[1002,33163,33164],{"class":1004,"line":1005},[1002,33165,1129],{"class":1030},[1002,33167,33168,33170,33172,33175,33177,33180,33182,33185],{"class":1004,"line":1012},[1002,33169,1316],{"class":1019},[1002,33171,1201],{"class":1030},[1002,33173,33174],{"class":1034},"\"airbnb\"",[1002,33176,1251],{"class":1030},[1002,33178,33179],{"class":1034},"\"es2015\"",[1002,33181,1251],{"class":1030},[1002,33183,33184],{"class":1034},"\"stage-0\"",[1002,33186,1207],{"class":1030},[1002,33188,33189],{"class":1004,"line":1047},[1002,33190,1170],{"class":1030},[925,33192,33193],{},"We need to install the presets:",[993,33195,33197],{"className":1797,"code":33196,"language":1799,"meta":998,"style":998},"npm install babel-preset-stage-0 babel-preset-stage-airbnb ––save–dev\n",[941,33198,33199],{"__ignoreMap":998},[1002,33200,33201,33203,33205,33208,33211],{"class":1004,"line":1005},[1002,33202,27346],{"class":1026},[1002,33204,27349],{"class":1034},[1002,33206,33207],{"class":1034}," babel-preset-stage-0",[1002,33209,33210],{"class":1034}," babel-preset-stage-airbnb",[1002,33212,33085],{"class":1034},[1655,33214,33216,33217],{"id":33215},"create-a-webpackconfigjs","Create a ",[941,33218,33219],{},"webpack.config.js",[993,33221,33223],{"className":995,"code":33222,"language":997,"meta":998,"style":998},"var path = require('path');\nvar webpack = require('webpack');\n\n\u002F\u002F env\nvar buildDirectory = '.\u002Fdist\u002F';\n\nmodule.exports = {\n entry: '.\u002Flib\u002Fmain.jsx',\n devServer: {\n hot: true,\n inline: true,\n port: 7700,\n historyApiFallback: true,\n },\n resolve: {\n extensions: ['', '.js', '.jsx'],\n },\n output: {\n path: path.resolve(buildDirectory),\n filename: 'app.js',\n publicPath: 'http:\u002F\u002Flocalhost:7700\u002Fdist',\n },\n externals: {\n cheerio: 'window',\n 'react\u002Flib\u002FExecutionEnvironment': true,\n 'react\u002Flib\u002FReactContext': true,\n },\n module: {\n loaders: [\n {\n test: \u002F\\.jsx?$\u002F,\n exclude: \u002F(node_modules|bower_components)\u002F,\n loader: 'babel',\n query: {\n presets: ['react', 'es2015', 'stage-0'],\n },\n },\n ],\n },\n plugins: [],\n};\n",[941,33224,33225,33243,33261,33265,33270,33284,33288,33300,33309,33314,33323,33332,33342,33351,33355,33360,33379,33383,33387,33396,33405,33415,33419,33424,33434,33445,33456,33460,33465,33470,33474,33496,33516,33526,33531,33551,33556,33560,33565,33569,33574],{"__ignoreMap":998},[1002,33226,33227,33229,33232,33234,33236,33238,33241],{"class":1004,"line":1005},[1002,33228,18311],{"class":1015},[1002,33230,33231],{"class":1030}," path ",[1002,33233,2393],{"class":1015},[1002,33235,1027],{"class":1026},[1002,33237,1031],{"class":1030},[1002,33239,33240],{"class":1034},"'path'",[1002,33242,1085],{"class":1030},[1002,33244,33245,33247,33250,33252,33254,33256,33259],{"class":1004,"line":1012},[1002,33246,18311],{"class":1015},[1002,33248,33249],{"class":1030}," webpack ",[1002,33251,2393],{"class":1015},[1002,33253,1027],{"class":1026},[1002,33255,1031],{"class":1030},[1002,33257,33258],{"class":1034},"'webpack'",[1002,33260,1085],{"class":1030},[1002,33262,33263],{"class":1004,"line":1047},[1002,33264,1051],{"emptyLinePlaceholder":1050},[1002,33266,33267],{"class":1004,"line":1054},[1002,33268,33269],{"class":1008},"\u002F\u002F env\n",[1002,33271,33272,33274,33277,33279,33282],{"class":1004,"line":1060},[1002,33273,18311],{"class":1015},[1002,33275,33276],{"class":1030}," buildDirectory ",[1002,33278,2393],{"class":1015},[1002,33280,33281],{"class":1034}," '.\u002Fdist\u002F'",[1002,33283,1407],{"class":1030},[1002,33285,33286],{"class":1004,"line":1272},[1002,33287,1051],{"emptyLinePlaceholder":1050},[1002,33289,33290,33292,33294,33296,33298],{"class":1004,"line":1348},[1002,33291,1227],{"class":1019},[1002,33293,948],{"class":1030},[1002,33295,1452],{"class":1019},[1002,33297,1023],{"class":1015},[1002,33299,1457],{"class":1030},[1002,33301,33302,33304,33307],{"class":1004,"line":1354},[1002,33303,1462],{"class":1030},[1002,33305,33306],{"class":1034},"'.\u002Flib\u002Fmain.jsx'",[1002,33308,1143],{"class":1030},[1002,33310,33311],{"class":1004,"line":1360},[1002,33312,33313],{"class":1030}," devServer: {\n",[1002,33315,33316,33319,33321],{"class":1004,"line":1366},[1002,33317,33318],{"class":1030}," hot: ",[1002,33320,17397],{"class":1019},[1002,33322,1143],{"class":1030},[1002,33324,33325,33328,33330],{"class":1004,"line":1946},[1002,33326,33327],{"class":1030}," inline: ",[1002,33329,17397],{"class":1019},[1002,33331,1143],{"class":1030},[1002,33333,33334,33337,33340],{"class":1004,"line":1956},[1002,33335,33336],{"class":1030}," port: ",[1002,33338,33339],{"class":1019},"7700",[1002,33341,1143],{"class":1030},[1002,33343,33344,33347,33349],{"class":1004,"line":1961},[1002,33345,33346],{"class":1030}," historyApiFallback: ",[1002,33348,17397],{"class":1019},[1002,33350,1143],{"class":1030},[1002,33352,33353],{"class":1004,"line":1971},[1002,33354,1502],{"class":1030},[1002,33356,33357],{"class":1004,"line":1980},[1002,33358,33359],{"class":1030}," resolve: {\n",[1002,33361,33362,33365,33367,33369,33372,33374,33377],{"class":1004,"line":1985},[1002,33363,33364],{"class":1030}," extensions: [",[1002,33366,19820],{"class":1034},[1002,33368,1251],{"class":1030},[1002,33370,33371],{"class":1034},"'.js'",[1002,33373,1251],{"class":1030},[1002,33375,33376],{"class":1034},"'.jsx'",[1002,33378,1903],{"class":1030},[1002,33380,33381],{"class":1004,"line":1995},[1002,33382,1502],{"class":1030},[1002,33384,33385],{"class":1004,"line":2006},[1002,33386,1472],{"class":1030},[1002,33388,33389,33391,33393],{"class":1004,"line":2011},[1002,33390,1487],{"class":1030},[1002,33392,1243],{"class":1026},[1002,33394,33395],{"class":1030},"(buildDirectory),\n",[1002,33397,33398,33400,33403],{"class":1004,"line":2017},[1002,33399,1477],{"class":1030},[1002,33401,33402],{"class":1034},"'app.js'",[1002,33404,1143],{"class":1030},[1002,33406,33407,33410,33413],{"class":1004,"line":2022},[1002,33408,33409],{"class":1030}," publicPath: ",[1002,33411,33412],{"class":1034},"'http:\u002F\u002Flocalhost:7700\u002Fdist'",[1002,33414,1143],{"class":1030},[1002,33416,33417],{"class":1004,"line":2442},[1002,33418,1502],{"class":1030},[1002,33420,33421],{"class":1004,"line":2466},[1002,33422,33423],{"class":1030}," externals: {\n",[1002,33425,33426,33429,33432],{"class":1004,"line":2471},[1002,33427,33428],{"class":1030}," cheerio: ",[1002,33430,33431],{"class":1034},"'window'",[1002,33433,1143],{"class":1030},[1002,33435,33436,33439,33441,33443],{"class":1004,"line":2476},[1002,33437,33438],{"class":1034}," 'react\u002Flib\u002FExecutionEnvironment'",[1002,33440,1137],{"class":1030},[1002,33442,17397],{"class":1019},[1002,33444,1143],{"class":1030},[1002,33446,33447,33450,33452,33454],{"class":1004,"line":2481},[1002,33448,33449],{"class":1034}," 'react\u002Flib\u002FReactContext'",[1002,33451,1137],{"class":1030},[1002,33453,17397],{"class":1019},[1002,33455,1143],{"class":1030},[1002,33457,33458],{"class":1004,"line":2491},[1002,33459,1502],{"class":1030},[1002,33461,33462],{"class":1004,"line":2502},[1002,33463,33464],{"class":1030}," module: {\n",[1002,33466,33467],{"class":1004,"line":2513},[1002,33468,33469],{"class":1030}," loaders: [\n",[1002,33471,33472],{"class":1004,"line":2535},[1002,33473,1336],{"class":1030},[1002,33475,33476,33479,33482,33486,33489,33492,33494],{"class":1004,"line":2557},[1002,33477,33478],{"class":1030}," test:",[1002,33480,33481],{"class":1034}," \u002F",[1002,33483,33485],{"class":33484},"snhLl","\\.",[1002,33487,2229],{"class":33488},"sA_wV",[1002,33490,33491],{"class":1015},"?$",[1002,33493,4685],{"class":1034},[1002,33495,1143],{"class":1030},[1002,33497,33498,33501,33503,33506,33509,33512,33514],{"class":1004,"line":2562},[1002,33499,33500],{"class":1030}," exclude:",[1002,33502,33481],{"class":1034},[1002,33504,33505],{"class":33488},"(node_modules",[1002,33507,33508],{"class":1015},"|",[1002,33510,33511],{"class":33488},"bower_components)",[1002,33513,4685],{"class":1034},[1002,33515,1143],{"class":1030},[1002,33517,33518,33521,33524],{"class":1004,"line":2567},[1002,33519,33520],{"class":1030}," loader: ",[1002,33522,33523],{"class":1034},"'babel'",[1002,33525,1143],{"class":1030},[1002,33527,33528],{"class":1004,"line":2572},[1002,33529,33530],{"class":1030}," query: {\n",[1002,33532,33533,33536,33539,33541,33544,33546,33549],{"class":1004,"line":2582},[1002,33534,33535],{"class":1030}," presets: [",[1002,33537,33538],{"class":1034},"'react'",[1002,33540,1251],{"class":1030},[1002,33542,33543],{"class":1034},"'es2015'",[1002,33545,1251],{"class":1030},[1002,33547,33548],{"class":1034},"'stage-0'",[1002,33550,1903],{"class":1030},[1002,33552,33553],{"class":1004,"line":2594},[1002,33554,33555],{"class":1030}," },\n",[1002,33557,33558],{"class":1004,"line":2603},[1002,33559,1922],{"class":1030},[1002,33561,33562],{"class":1004,"line":2619},[1002,33563,33564],{"class":1030}," ],\n",[1002,33566,33567],{"class":1004,"line":2633},[1002,33568,1502],{"class":1030},[1002,33570,33571],{"class":1004,"line":2641},[1002,33572,33573],{"class":1030}," plugins: [],\n",[1002,33575,33576],{"class":1004,"line":2655},[1002,33577,1517],{"class":1030},[925,33579,33580,33581,33584],{},"The configuration for ",[941,33582,33583],{},"externals"," will help enable enzyme to work properly.",[1655,33586,33588],{"id":33587},"create-browserjs","Create browser.js",[925,33590,33591,33592,948],{},"We create a setup file in order to provide a realistic browser environement using ",[941,33593,33594],{},"jsdom",[993,33596,33598],{"className":995,"code":33597,"language":997,"meta":998,"style":998},"require('babel-register')();\n\nvar jsdom = require('jsdom').jsdom;\n\nvar exposedProperties = ['window', 'navigator', 'document'];\n\nglobal.document = jsdom('');\nglobal.window = document.defaultView;\nObject.keys(document.defaultView).forEach((property) => {\n if (typeof global[property] === 'undefined') {\n exposedProperties.push(property);\n global[property] = document.defaultView[property];\n }\n});\n\nglobal.navigator = {\n userAgent: 'node.js',\n};\n\ndocumentRef = document;\n",[941,33599,33600,33612,33616,33635,33639,33664,33668,33683,33693,33716,33735,33745,33755,33759,33763,33767,33776,33786,33790,33794],{"__ignoreMap":998},[1002,33601,33602,33604,33606,33609],{"class":1004,"line":1005},[1002,33603,1294],{"class":1026},[1002,33605,1031],{"class":1030},[1002,33607,33608],{"class":1034},"'babel-register'",[1002,33610,33611],{"class":1030},")();\n",[1002,33613,33614],{"class":1004,"line":1012},[1002,33615,1051],{"emptyLinePlaceholder":1050},[1002,33617,33618,33620,33623,33625,33627,33629,33632],{"class":1004,"line":1047},[1002,33619,18311],{"class":1015},[1002,33621,33622],{"class":1030}," jsdom ",[1002,33624,2393],{"class":1015},[1002,33626,1027],{"class":1026},[1002,33628,1031],{"class":1030},[1002,33630,33631],{"class":1034},"'jsdom'",[1002,33633,33634],{"class":1030},").jsdom;\n",[1002,33636,33637],{"class":1004,"line":1054},[1002,33638,1051],{"emptyLinePlaceholder":1050},[1002,33640,33641,33643,33646,33648,33650,33652,33654,33657,33659,33662],{"class":1004,"line":1060},[1002,33642,18311],{"class":1015},[1002,33644,33645],{"class":1030}," exposedProperties ",[1002,33647,2393],{"class":1015},[1002,33649,1897],{"class":1030},[1002,33651,33431],{"class":1034},[1002,33653,1251],{"class":1030},[1002,33655,33656],{"class":1034},"'navigator'",[1002,33658,1251],{"class":1030},[1002,33660,33661],{"class":1034},"'document'",[1002,33663,6754],{"class":1030},[1002,33665,33666],{"class":1004,"line":1272},[1002,33667,1051],{"emptyLinePlaceholder":1050},[1002,33669,33670,33673,33675,33677,33679,33681],{"class":1004,"line":1348},[1002,33671,33672],{"class":1030},"global.document ",[1002,33674,2393],{"class":1015},[1002,33676,33137],{"class":1026},[1002,33678,1031],{"class":1030},[1002,33680,19820],{"class":1034},[1002,33682,1085],{"class":1030},[1002,33684,33685,33688,33690],{"class":1004,"line":1354},[1002,33686,33687],{"class":1030},"global.window ",[1002,33689,2393],{"class":1015},[1002,33691,33692],{"class":1030}," document.defaultView;\n",[1002,33694,33695,33698,33701,33704,33706,33708,33710,33712,33714],{"class":1004,"line":1360},[1002,33696,33697],{"class":1030},"Object.",[1002,33699,33700],{"class":1026},"keys",[1002,33702,33703],{"class":1030},"(document.defaultView).",[1002,33705,8408],{"class":1026},[1002,33707,21121],{"class":1030},[1002,33709,17028],{"class":2378},[1002,33711,5876],{"class":1030},[1002,33713,15497],{"class":1015},[1002,33715,1457],{"class":1030},[1002,33717,33718,33720,33722,33725,33728,33730,33733],{"class":1004,"line":1366},[1002,33719,19971],{"class":1015},[1002,33721,6513],{"class":1030},[1002,33723,33724],{"class":1015},"typeof",[1002,33726,33727],{"class":1030}," global[property] ",[1002,33729,2892],{"class":1015},[1002,33731,33732],{"class":1034}," 'undefined'",[1002,33734,2382],{"class":1030},[1002,33736,33737,33740,33742],{"class":1004,"line":1946},[1002,33738,33739],{"class":1030}," exposedProperties.",[1002,33741,4974],{"class":1026},[1002,33743,33744],{"class":1030},"(property);\n",[1002,33746,33747,33750,33752],{"class":1004,"line":1956},[1002,33748,33749],{"class":1030}," global[property] ",[1002,33751,2393],{"class":1015},[1002,33753,33754],{"class":1030}," document.defaultView[property];\n",[1002,33756,33757],{"class":1004,"line":1961},[1002,33758,1269],{"class":1030},[1002,33760,33761],{"class":1004,"line":1971},[1002,33762,2804],{"class":1030},[1002,33764,33765],{"class":1004,"line":1980},[1002,33766,1051],{"emptyLinePlaceholder":1050},[1002,33768,33769,33772,33774],{"class":1004,"line":1985},[1002,33770,33771],{"class":1030},"global.navigator ",[1002,33773,2393],{"class":1015},[1002,33775,1457],{"class":1030},[1002,33777,33778,33781,33784],{"class":1004,"line":1995},[1002,33779,33780],{"class":1030}," userAgent: ",[1002,33782,33783],{"class":1034},"'node.js'",[1002,33785,1143],{"class":1030},[1002,33787,33788],{"class":1004,"line":2006},[1002,33789,1517],{"class":1030},[1002,33791,33792],{"class":1004,"line":2011},[1002,33793,1051],{"emptyLinePlaceholder":1050},[1002,33795,33796,33799,33801],{"class":1004,"line":2017},[1002,33797,33798],{"class":1030},"documentRef ",[1002,33800,2393],{"class":1015},[1002,33802,33803],{"class":1030}," document;\n",[1655,33805,33807],{"id":33806},"the-packagejson-scripts","The package.json Scripts",[925,33809,33810,33811,33813],{},"Add the following to the scripts sections of the ",[941,33812,1102],{}," file.",[993,33815,33819],{"className":33816,"code":33817,"language":33818,"meta":22192,"style":998},"language-json\"scripts\": shiki shiki-themes github-light github-dark"," \"test\": \"mocha -w test\u002Fhelpers\u002Fbrowser.js test\u002F*.spec.js\",\n \"dev:hot\": \"webpack-dev-server --hot --inline --progress --colors --watch --display-error-details --display-cached --content-base .\u002F\"\n },\n","json\"scripts\":",[941,33820,33821,33826,33831],{"__ignoreMap":998},[1002,33822,33823],{"class":1004,"line":1005},[1002,33824,33825],{}," \"test\": \"mocha -w test\u002Fhelpers\u002Fbrowser.js test\u002F*.spec.js\",\n",[1002,33827,33828],{"class":1004,"line":1012},[1002,33829,33830],{}," \"dev:hot\": \"webpack-dev-server --hot --inline --progress --colors --watch --display-error-details --display-cached --content-base .\u002F\"\n",[1002,33832,33833],{"class":1004,"line":1047},[1002,33834,33835],{}," },\n",[953,33837,33839],{"id":33838},"creating-components","Creating Components",[925,33841,33216,33842,33845,33846,33813],{},[941,33843,33844],{},"containers"," folder and a ",[941,33847,33848],{},"LoginForm.js",[993,33850,33852],{"className":995,"code":33851,"language":997,"meta":998,"style":998},"import React from 'react';\nimport FormField from '..\u002Fcomponents\u002FFormField';\n\nclass LoginForm extends React.Component {\n render() {\n return (\n \u003Cform>\n \u003CFormField model=\"user.username\" label=\"Username\" type=\"text\" \u002F>\n \u003CFormField model=\"user.password\" label=\"Password\" type=\"password\" \u002F>\n \u003Cbutton>Log in\u003C\u002Fbutton>\n \u003C\u002Fform>\n );\n }\n}\n\nexport default LoginForm;\n",[941,33853,33854,33866,33880,33884,33901,33907,33913,33921,33953,33982,33995,34003,34007,34011,34015,34019],{"__ignoreMap":998},[1002,33855,33856,33858,33860,33862,33864],{"class":1004,"line":1005},[1002,33857,943],{"class":1015},[1002,33859,21700],{"class":1030},[1002,33861,1068],{"class":1015},[1002,33863,15543],{"class":1034},[1002,33865,1407],{"class":1030},[1002,33867,33868,33870,33873,33875,33878],{"class":1004,"line":1012},[1002,33869,943],{"class":1015},[1002,33871,33872],{"class":1030}," FormField ",[1002,33874,1068],{"class":1015},[1002,33876,33877],{"class":1034}," '..\u002Fcomponents\u002FFormField'",[1002,33879,1407],{"class":1030},[1002,33881,33882],{"class":1004,"line":1047},[1002,33883,1051],{"emptyLinePlaceholder":1050},[1002,33885,33886,33888,33891,33893,33895,33897,33899],{"class":1004,"line":1054},[1002,33887,2363],{"class":1015},[1002,33889,33890],{"class":1026}," LoginForm",[1002,33892,3014],{"class":1015},[1002,33894,20112],{"class":1026},[1002,33896,948],{"class":1030},[1002,33898,20117],{"class":1026},[1002,33900,1457],{"class":1030},[1002,33902,33903,33905],{"class":1004,"line":1060},[1002,33904,20201],{"class":1026},[1002,33906,3025],{"class":1030},[1002,33908,33909,33911],{"class":1004,"line":1272},[1002,33910,2687],{"class":1015},[1002,33912,15692],{"class":1030},[1002,33914,33915,33917,33919],{"class":1004,"line":1348},[1002,33916,19579],{"class":1030},[1002,33918,29213],{"class":15711},[1002,33920,15703],{"class":1030},[1002,33922,33923,33925,33928,33931,33933,33936,33939,33941,33944,33946,33948,33951],{"class":1004,"line":1354},[1002,33924,15708],{"class":1030},[1002,33926,33927],{"class":1019},"FormField",[1002,33929,33930],{"class":1026}," model",[1002,33932,2393],{"class":1015},[1002,33934,33935],{"class":1034},"\"user.username\"",[1002,33937,33938],{"class":1026}," label",[1002,33940,2393],{"class":1015},[1002,33942,33943],{"class":1034},"\"Username\"",[1002,33945,29274],{"class":1026},[1002,33947,2393],{"class":1015},[1002,33949,33950],{"class":1034},"\"text\"",[1002,33952,15258],{"class":1030},[1002,33954,33955,33957,33959,33961,33963,33966,33968,33970,33973,33975,33977,33980],{"class":1004,"line":1360},[1002,33956,15708],{"class":1030},[1002,33958,33927],{"class":1019},[1002,33960,33930],{"class":1026},[1002,33962,2393],{"class":1015},[1002,33964,33965],{"class":1034},"\"user.password\"",[1002,33967,33938],{"class":1026},[1002,33969,2393],{"class":1015},[1002,33971,33972],{"class":1034},"\"Password\"",[1002,33974,29274],{"class":1026},[1002,33976,2393],{"class":1015},[1002,33978,33979],{"class":1034},"\"password\"",[1002,33981,15258],{"class":1030},[1002,33983,33984,33986,33988,33991,33993],{"class":1004,"line":1366},[1002,33985,15708],{"class":1030},[1002,33987,16365],{"class":15711},[1002,33989,33990],{"class":1030},">Log in\u003C\u002F",[1002,33992,16365],{"class":15711},[1002,33994,15703],{"class":1030},[1002,33996,33997,33999,34001],{"class":1004,"line":1946},[1002,33998,21184],{"class":1030},[1002,34000,29213],{"class":15711},[1002,34002,15703],{"class":1030},[1002,34004,34005],{"class":1004,"line":1956},[1002,34006,22541],{"class":1030},[1002,34008,34009],{"class":1004,"line":1961},[1002,34010,1269],{"class":1030},[1002,34012,34013],{"class":1004,"line":1971},[1002,34014,1170],{"class":1030},[1002,34016,34017],{"class":1004,"line":1980},[1002,34018,1051],{"emptyLinePlaceholder":1050},[1002,34020,34021,34023,34025],{"class":1004,"line":1985},[1002,34022,947],{"class":1015},[1002,34024,15641],{"class":1015},[1002,34026,34027],{"class":1030}," LoginForm;\n",[925,34029,33216,34030,33845,34032,33813],{},[941,34031,29844],{},[941,34033,34034],{},"FormField.js",[993,34036,34038],{"className":995,"code":34037,"language":997,"meta":998,"style":998},"import React from 'react';\n\nconst FormField = ({ label, type }) => {\n return (\n \u003Cfield>\n \u003Clabel>{label}\u003C\u002Flabel>\n \u003Cinput type={type} \u002F>\n \u003C\u002Ffield>\n );\n};\n\nexport default FormField;\n",[941,34039,34040,34052,34056,34079,34085,34094,34107,34120,34128,34132,34136,34140],{"__ignoreMap":998},[1002,34041,34042,34044,34046,34048,34050],{"class":1004,"line":1005},[1002,34043,943],{"class":1015},[1002,34045,21700],{"class":1030},[1002,34047,1068],{"class":1015},[1002,34049,15543],{"class":1034},[1002,34051,1407],{"class":1030},[1002,34053,34054],{"class":1004,"line":1012},[1002,34055,1051],{"emptyLinePlaceholder":1050},[1002,34057,34058,34060,34063,34065,34067,34069,34071,34073,34075,34077],{"class":1004,"line":1047},[1002,34059,1016],{"class":1015},[1002,34061,34062],{"class":1026}," FormField",[1002,34064,1023],{"class":1015},[1002,34066,24446],{"class":1030},[1002,34068,29228],{"class":2378},[1002,34070,1251],{"class":1030},[1002,34072,18462],{"class":2378},[1002,34074,24451],{"class":1030},[1002,34076,15497],{"class":1015},[1002,34078,1457],{"class":1030},[1002,34080,34081,34083],{"class":1004,"line":1054},[1002,34082,15066],{"class":1015},[1002,34084,15692],{"class":1030},[1002,34086,34087,34089,34092],{"class":1004,"line":1060},[1002,34088,15697],{"class":1030},[1002,34090,34091],{"class":15711},"field",[1002,34093,15703],{"class":1030},[1002,34095,34096,34098,34100,34103,34105],{"class":1004,"line":1272},[1002,34097,19579],{"class":1030},[1002,34099,29228],{"class":15711},[1002,34101,34102],{"class":1030},">{label}\u003C\u002F",[1002,34104,29228],{"class":15711},[1002,34106,15703],{"class":1030},[1002,34108,34109,34111,34113,34115,34117],{"class":1004,"line":1348},[1002,34110,19579],{"class":1030},[1002,34112,5803],{"class":15711},[1002,34114,29274],{"class":1026},[1002,34116,2393],{"class":1015},[1002,34118,34119],{"class":1030},"{type} \u002F>\n",[1002,34121,34122,34124,34126],{"class":1004,"line":1354},[1002,34123,19647],{"class":1030},[1002,34125,34091],{"class":15711},[1002,34127,15703],{"class":1030},[1002,34129,34130],{"class":1004,"line":1360},[1002,34131,10503],{"class":1030},[1002,34133,34134],{"class":1004,"line":1366},[1002,34135,1517],{"class":1030},[1002,34137,34138],{"class":1004,"line":1946},[1002,34139,1051],{"emptyLinePlaceholder":1050},[1002,34141,34142,34144,34146],{"class":1004,"line":1956},[1002,34143,947],{"class":1015},[1002,34145,15641],{"class":1015},[1002,34147,34148],{"class":1030}," FormField;\n",[953,34150,34152],{"id":34151},"testing-components","Testing Components.",[925,34154,33216,34155,34157,34158,34161],{},[941,34156,21237],{}," folder and create a ",[941,34159,34160],{},"LoginForm.spec.js"," file in it.",[993,34163,34165],{"className":995,"code":34164,"language":997,"meta":998,"style":998},"import React from 'react';\nimport { mount, shallow } from 'enzyme';\nimport { expect } from 'chai';\n\nimport LoginForm from '..\u002Fcontainers\u002FLoginForm';\nimport FormField from '..\u002Fcomponents\u002FFormField';\n\ndescribe('\u003CLoginForm\u002F>', function () {\n it('should have a button to submit the form', function () {\n const wrapper = shallow(\u003CLoginForm \u002F>); \u002F\u002F highlight\n expect(wrapper.find('button')).to.have.length(1);\n });\n\n it('should have props for model, label and type', function () {\n const wrapper = shallow(\u003CLoginForm \u002F>);\n expect(wrapper.props().model).to.be.defined;\n expect(wrapper.props().label).to.be.defined;\n expect(wrapper.props().type).to.be.defined;\n });\n\n it('contains an \u003CFormField\u002F> component', function () {\n const wrapper = mount(\u003CFormField \u002F>);\n expect(wrapper.find(FormField)).to.have.length(1);\n });\n});\n",[941,34166,34167,34179,34193,34207,34211,34225,34237,34241,34256,34272,34294,34319,34323,34327,34342,34358,34369,34380,34391,34395,34399,34414,34430,34449,34453],{"__ignoreMap":998},[1002,34168,34169,34171,34173,34175,34177],{"class":1004,"line":1005},[1002,34170,943],{"class":1015},[1002,34172,21700],{"class":1030},[1002,34174,1068],{"class":1015},[1002,34176,15543],{"class":1034},[1002,34178,1407],{"class":1030},[1002,34180,34181,34183,34186,34188,34191],{"class":1004,"line":1012},[1002,34182,943],{"class":1015},[1002,34184,34185],{"class":1030}," { mount, shallow } ",[1002,34187,1068],{"class":1015},[1002,34189,34190],{"class":1034}," 'enzyme'",[1002,34192,1407],{"class":1030},[1002,34194,34195,34197,34200,34202,34205],{"class":1004,"line":1047},[1002,34196,943],{"class":1015},[1002,34198,34199],{"class":1030}," { expect } ",[1002,34201,1068],{"class":1015},[1002,34203,34204],{"class":1034}," 'chai'",[1002,34206,1407],{"class":1030},[1002,34208,34209],{"class":1004,"line":1054},[1002,34210,1051],{"emptyLinePlaceholder":1050},[1002,34212,34213,34215,34218,34220,34223],{"class":1004,"line":1060},[1002,34214,943],{"class":1015},[1002,34216,34217],{"class":1030}," LoginForm ",[1002,34219,1068],{"class":1015},[1002,34221,34222],{"class":1034}," '..\u002Fcontainers\u002FLoginForm'",[1002,34224,1407],{"class":1030},[1002,34226,34227,34229,34231,34233,34235],{"class":1004,"line":1272},[1002,34228,943],{"class":1015},[1002,34230,33872],{"class":1030},[1002,34232,1068],{"class":1015},[1002,34234,33877],{"class":1034},[1002,34236,1407],{"class":1030},[1002,34238,34239],{"class":1004,"line":1348},[1002,34240,1051],{"emptyLinePlaceholder":1050},[1002,34242,34243,34245,34247,34250,34252,34254],{"class":1004,"line":1354},[1002,34244,12742],{"class":1026},[1002,34246,1031],{"class":1030},[1002,34248,34249],{"class":1034},"'\u003CLoginForm\u002F>'",[1002,34251,1251],{"class":1030},[1002,34253,6965],{"class":1015},[1002,34255,9772],{"class":1030},[1002,34257,34258,34261,34263,34266,34268,34270],{"class":1004,"line":1360},[1002,34259,34260],{"class":1026}," it",[1002,34262,1031],{"class":1030},[1002,34264,34265],{"class":1034},"'should have a button to submit the form'",[1002,34267,1251],{"class":1030},[1002,34269,6965],{"class":1015},[1002,34271,9772],{"class":1030},[1002,34273,34274,34276,34278,34280,34283,34285,34288,34291],{"class":1004,"line":1366},[1002,34275,4348],{"class":1015},[1002,34277,21261],{"class":1019},[1002,34279,1023],{"class":1015},[1002,34281,34282],{"class":1026}," shallow",[1002,34284,21269],{"class":1030},[1002,34286,34287],{"class":1019},"LoginForm",[1002,34289,34290],{"class":1030}," \u002F>); ",[1002,34292,34293],{"class":1008},"\u002F\u002F highlight\n",[1002,34295,34296,34299,34301,34304,34306,34308,34311,34313,34315,34317],{"class":1004,"line":1946},[1002,34297,34298],{"class":1026}," expect",[1002,34300,21287],{"class":1030},[1002,34302,34303],{"class":1026},"find",[1002,34305,1031],{"class":1030},[1002,34307,16678],{"class":1034},[1002,34309,34310],{"class":1030},")).to.have.",[1002,34312,5873],{"class":1026},[1002,34314,1031],{"class":1030},[1002,34316,6211],{"class":1019},[1002,34318,1085],{"class":1030},[1002,34320,34321],{"class":1004,"line":1956},[1002,34322,19836],{"class":1030},[1002,34324,34325],{"class":1004,"line":1961},[1002,34326,1051],{"emptyLinePlaceholder":1050},[1002,34328,34329,34331,34333,34336,34338,34340],{"class":1004,"line":1971},[1002,34330,34260],{"class":1026},[1002,34332,1031],{"class":1030},[1002,34334,34335],{"class":1034},"'should have props for model, label and type'",[1002,34337,1251],{"class":1030},[1002,34339,6965],{"class":1015},[1002,34341,9772],{"class":1030},[1002,34343,34344,34346,34348,34350,34352,34354,34356],{"class":1004,"line":1980},[1002,34345,4348],{"class":1015},[1002,34347,21261],{"class":1019},[1002,34349,1023],{"class":1015},[1002,34351,34282],{"class":1026},[1002,34353,21269],{"class":1030},[1002,34355,34287],{"class":1019},[1002,34357,21275],{"class":1030},[1002,34359,34360,34362,34364,34366],{"class":1004,"line":1985},[1002,34361,34298],{"class":1026},[1002,34363,21287],{"class":1030},[1002,34365,19533],{"class":1026},[1002,34367,34368],{"class":1030},"().model).to.be.defined;\n",[1002,34370,34371,34373,34375,34377],{"class":1004,"line":1995},[1002,34372,34298],{"class":1026},[1002,34374,21287],{"class":1030},[1002,34376,19533],{"class":1026},[1002,34378,34379],{"class":1030},"().label).to.be.defined;\n",[1002,34381,34382,34384,34386,34388],{"class":1004,"line":2006},[1002,34383,34298],{"class":1026},[1002,34385,21287],{"class":1030},[1002,34387,19533],{"class":1026},[1002,34389,34390],{"class":1030},"().type).to.be.defined;\n",[1002,34392,34393],{"class":1004,"line":2011},[1002,34394,19836],{"class":1030},[1002,34396,34397],{"class":1004,"line":2017},[1002,34398,1051],{"emptyLinePlaceholder":1050},[1002,34400,34401,34403,34405,34408,34410,34412],{"class":1004,"line":2022},[1002,34402,34260],{"class":1026},[1002,34404,1031],{"class":1030},[1002,34406,34407],{"class":1034},"'contains an \u003CFormField\u002F> component'",[1002,34409,1251],{"class":1030},[1002,34411,6965],{"class":1015},[1002,34413,9772],{"class":1030},[1002,34415,34416,34418,34420,34422,34424,34426,34428],{"class":1004,"line":2442},[1002,34417,4348],{"class":1015},[1002,34419,21261],{"class":1019},[1002,34421,1023],{"class":1015},[1002,34423,21266],{"class":1026},[1002,34425,21269],{"class":1030},[1002,34427,33927],{"class":1019},[1002,34429,21275],{"class":1030},[1002,34431,34432,34434,34436,34438,34441,34443,34445,34447],{"class":1004,"line":2466},[1002,34433,34298],{"class":1026},[1002,34435,21287],{"class":1030},[1002,34437,34303],{"class":1026},[1002,34439,34440],{"class":1030},"(FormField)).to.have.",[1002,34442,5873],{"class":1026},[1002,34444,1031],{"class":1030},[1002,34446,6211],{"class":1019},[1002,34448,1085],{"class":1030},[1002,34450,34451],{"class":1004,"line":2471},[1002,34452,19836],{"class":1030},[1002,34454,34455],{"class":1004,"line":2476},[1002,34456,2804],{"class":1030},[925,34458,34459,34460,34463],{},"Not the highlighted line: The ",[941,34461,34462],{},"shallow"," method from enzyme will allow us to “shallowly” render a component.\nThis type of rendering is used to isolate one component for testing and ensure child components do not affect assertions.",[7100,34465,34467],{"title":34466,"type":24048},"mount",[925,34468,3898,34469,34471,34472,34475],{},[941,34470,34466],{}," method helps ",[928,34473,34474],{},"real"," rendering that will actually render your component into a browser environment. If you are creating full React components (and not just stateless components), you will want to use mount to do testing on the lifecycle methods of your component.",[925,34477,34478],{},"Now run the tests in the command line:",[993,34480,34482],{"className":1797,"code":34481,"language":1799,"meta":998,"style":998},"npm test\n",[941,34483,34484],{"__ignoreMap":998},[1002,34485,34486,34488],{"class":1004,"line":1005},[1002,34487,27346],{"class":1026},[1002,34489,34490],{"class":1034}," test\n",[953,34492,26561],{"id":26560},[925,34494,34495],{},"We have worked through creating a simple React component, installing test tools and running actual tests. I hope this tutorial will help you to kick start testing with React.",[1579,34497,34498],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":34500},[34501,34507,34515,34516,34517],{"id":32992,"depth":1012,"text":32993,"children":34502},[34503,34504,34505,34506],{"id":33020,"depth":1047,"text":33021},{"id":33058,"depth":1047,"text":33059},{"id":40,"depth":1047,"text":33088},{"id":33110,"depth":1047,"text":33111},{"id":33145,"depth":1012,"text":33146,"children":34508},[34509,34511,34513,34514],{"id":33149,"depth":1047,"text":34510},"Create .babelrc",{"id":33215,"depth":1047,"text":34512},"Create a webpack.config.js",{"id":33587,"depth":1047,"text":33588},{"id":33806,"depth":1047,"text":33807},{"id":33838,"depth":1012,"text":33839},{"id":34151,"depth":1012,"text":34152},{"id":26560,"depth":1012,"text":26561},"2016-08-22","\u002Fimages\u002Fblog\u002Ffeatures\u002Ftesting-react-components-enzyme.jpg",{},{"title":830,"description":832},"blog\u002Ftesting-react-components-enzyme",[16,17,220],"ZNeeI-FkRD11oos3yJllmcvEOmPB4EzsXt5H-nYr7PY",{"id":34526,"title":216,"author":920,"body":34527,"date":34886,"description":218,"extension":1591,"image":34887,"meta":34888,"navigation":1050,"path":217,"seo":34889,"stem":34890,"tags":34891,"__hash__":34892},"blog\u002Fblog\u002Fes6-generators.md",{"type":922,"value":34528,"toc":34878},[34529,34532,34540,34544,34547,34550,34554,34557,34563,34566,34570,34573,34591,34597,34601,34604,34607,34610,34618,34621,34625,34628,34701,34707,34710,34716,34719,34815,34820,34825,34828,34831,34851,34861,34863,34866,34875],[925,34530,34531],{},"ES6 generators become useful in the scenarios listed below:",[1530,34533,34534,34537],{},[974,34535,34536],{},"Asynchronous function calls",[974,34538,34539],{},"Iterables",[953,34541,34543],{"id":34542},"cooperative","Cooperative",[925,34545,34546],{},"Generator function, itself chooses when it will allow an interruption – corporate with other code.",[925,34548,34549],{},"Between Pause and start of a generator, other code can be run.",[953,34551,34553],{"id":34552},"stop-start","Stop Start",[925,34555,34556],{},"Generators can add pause-resume kind of capability to your application to avoid blocking calls.",[7100,34558,34560],{"title":34559,"type":24048},"yield",[925,34561,34562],{},"Pauses the function – nothing can pause a generator from outside.",[925,34564,34565],{},"Once yield-paused, a generator can’t resume by itself. External control needed to resume.",[953,34567,34569],{"id":34568},"infinite-loops","Infinite Loops",[925,34571,34572],{},"Generators also use infinite loops to keep it listening for changes, which never finishes.",[993,34574,34577],{"className":34575,"code":34576,"language":17,"meta":998,"style":998},"language-javascript shiki shiki-themes github-light github-dark","while(true) { .. }\n",[941,34578,34579],{"__ignoreMap":998},[1002,34580,34581,34584,34586,34588],{"class":1004,"line":1005},[1002,34582,34583],{"class":1015},"while",[1002,34585,1031],{"class":1030},[1002,34587,17397],{"class":1019},[1002,34589,34590],{"class":1030},") { .. }\n",[925,34592,34593,34594,34596],{},"Even though it’s a bad practise in other scenarios, ",[941,34595,34583],{}," loop is ideal for generators.",[953,34598,34600],{"id":34599},"parameters","Parameters",[925,34602,34603],{},"With normal functions, you get parameters at the beginning and a return value at the end.",[925,34605,34606],{},"With generator functions, you send messages out with each yield, and you send messages back in with each restart.",[925,34608,34609],{},"Pause-resume helps 2-way message passing (in and out of the generator).",[1530,34611,34612,34615],{},[974,34613,34614],{},"Normal functions – get parameters at the beginning, return a value at the end",[974,34616,34617],{},"Generator functions – send messages out with yield, get messages with each restart",[925,34619,34620],{},"Yield expression – when we restart the generator we send a value back in, and that value will be the computed result of that yield.",[953,34622,34624],{"id":34623},"syntax","Syntax",[925,34626,34627],{},"Here is a simple example on how to use generators:",[993,34629,34631],{"className":995,"code":34630,"language":997,"meta":998,"style":998},"function* foo() {\n yield 'bar'; \u002F\u002F highlight\n}\n\nconst iter = foo();\nconst result = iter.next();\nconsole.log(result); \u002F\u002F {\"value\":\"bar\",\"done\":false}\n",[941,34632,34633,34643,34654,34658,34662,34674,34689],{"__ignoreMap":998},[1002,34634,34635,34638,34641],{"class":1004,"line":1005},[1002,34636,34637],{"class":1015},"function*",[1002,34639,34640],{"class":1026}," foo",[1002,34642,3025],{"class":1030},[1002,34644,34645,34647,34650,34652],{"class":1004,"line":1012},[1002,34646,31168],{"class":1015},[1002,34648,34649],{"class":1034}," 'bar'",[1002,34651,17938],{"class":1030},[1002,34653,34293],{"class":1008},[1002,34655,34656],{"class":1004,"line":1047},[1002,34657,1170],{"class":1030},[1002,34659,34660],{"class":1004,"line":1054},[1002,34661,1051],{"emptyLinePlaceholder":1050},[1002,34663,34664,34666,34668,34670,34672],{"class":1004,"line":1060},[1002,34665,1016],{"class":1015},[1002,34667,6940],{"class":1019},[1002,34669,1023],{"class":1015},[1002,34671,34640],{"class":1026},[1002,34673,1428],{"class":1030},[1002,34675,34676,34678,34680,34682,34685,34687],{"class":1004,"line":1272},[1002,34677,1016],{"class":1015},[1002,34679,13336],{"class":1019},[1002,34681,1023],{"class":1015},[1002,34683,34684],{"class":1030}," iter.",[1002,34686,6623],{"class":1026},[1002,34688,1428],{"class":1030},[1002,34690,34691,34693,34695,34698],{"class":1004,"line":1348},[1002,34692,2883],{"class":1030},[1002,34694,2886],{"class":1026},[1002,34696,34697],{"class":1030},"(result); ",[1002,34699,34700],{"class":1008},"\u002F\u002F {\"value\":\"bar\",\"done\":false}\n",[925,34702,34703,34704,34706],{},"Line 2: At pause, ",[941,34705,30895],{}," is sent out.",[925,34708,34709],{},"Line 6: The generator restarts and gives the value back",[925,34711,34712,34713],{},"Line 7: Print out the result ",[941,34714,34715],{},"{“value”: ”bar”, ”done”: false}",[925,34717,34718],{},"Let’s improve on it a bit:",[993,34720,34722],{"className":995,"code":34721,"language":997,"meta":998,"style":998},"function* foo() {\n const foobar = yield 'bar';\n console.log(footer); \u002F\u002F foo\n}\n\nconst iter = foo();\nconsole.log(iter.next());\n\u002F\u002F the generator restarts and gives a value back\nconsole.log(iter.next('foo'));\n",[941,34723,34724,34732,34748,34760,34764,34768,34780,34793,34798],{"__ignoreMap":998},[1002,34725,34726,34728,34730],{"class":1004,"line":1005},[1002,34727,34637],{"class":1015},[1002,34729,34640],{"class":1026},[1002,34731,3025],{"class":1030},[1002,34733,34734,34736,34739,34741,34744,34746],{"class":1004,"line":1012},[1002,34735,10423],{"class":1015},[1002,34737,34738],{"class":1019}," foobar",[1002,34740,1023],{"class":1015},[1002,34742,34743],{"class":1015}," yield",[1002,34745,34649],{"class":1034},[1002,34747,1407],{"class":1030},[1002,34749,34750,34752,34754,34757],{"class":1004,"line":1047},[1002,34751,6977],{"class":1030},[1002,34753,2886],{"class":1026},[1002,34755,34756],{"class":1030},"(footer); ",[1002,34758,34759],{"class":1008},"\u002F\u002F foo\n",[1002,34761,34762],{"class":1004,"line":1054},[1002,34763,1170],{"class":1030},[1002,34765,34766],{"class":1004,"line":1060},[1002,34767,1051],{"emptyLinePlaceholder":1050},[1002,34769,34770,34772,34774,34776,34778],{"class":1004,"line":1272},[1002,34771,1016],{"class":1015},[1002,34773,6940],{"class":1019},[1002,34775,1023],{"class":1015},[1002,34777,34640],{"class":1026},[1002,34779,1428],{"class":1030},[1002,34781,34782,34784,34786,34789,34791],{"class":1004,"line":1348},[1002,34783,2883],{"class":1030},[1002,34785,2886],{"class":1026},[1002,34787,34788],{"class":1030},"(iter.",[1002,34790,6623],{"class":1026},[1002,34792,3885],{"class":1030},[1002,34794,34795],{"class":1004,"line":1354},[1002,34796,34797],{"class":1008},"\u002F\u002F the generator restarts and gives a value back\n",[1002,34799,34800,34802,34804,34806,34808,34810,34813],{"class":1004,"line":1360},[1002,34801,2883],{"class":1030},[1002,34803,2886],{"class":1026},[1002,34805,34788],{"class":1030},[1002,34807,6623],{"class":1026},[1002,34809,1031],{"class":1030},[1002,34811,34812],{"class":1034},"'foo'",[1002,34814,5663],{"class":1030},[925,34816,34817,34818,948],{},"Line 3: Prints out ",[941,34819,16521],{},[925,34821,34822,34823],{},"Line 6: Prints out ",[941,34824,34715],{},[925,34826,34827],{},"Line 7: Print out the result {“done”:true}",[925,34829,34830],{},"When you run this code snippet, you will get the following results:",[993,34832,34834],{"className":1797,"code":34833,"language":1799,"meta":998,"style":998},"{“value”:”bar”,”done”:false}\nfoo\n{“done”:true}\n",[941,34835,34836,34841,34846],{"__ignoreMap":998},[1002,34837,34838],{"class":1004,"line":1005},[1002,34839,34840],{},"{“value”:”bar”,”done”:false}\n",[1002,34842,34843],{"class":1004,"line":1012},[1002,34844,34845],{},"foo\n",[1002,34847,34848],{"class":1004,"line":1047},[1002,34849,34850],{},"{“done”:true}\n",[7100,34852,34854],{"title":34853,"type":24048},"Babel REPL",[925,34855,34856,34857,948],{},"In order to run the examples, you need to use the ",[933,34858,34853],{"href":34859,"rel":34860},"https:\u002F\u002Fbabeljs.io\u002Frepl\u002F",[937],[953,34862,26561],{"id":26560},[925,34864,34865],{},"ES6 generators can be difficult to grasp first. But once you start using them, you will quickly realise the benefits surrounding it.",[925,34867,34868,34869,34874],{},"If you want to learn more about generators, ",[933,34870,34873],{"href":34871,"rel":34872},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FStatements\u002Ffunction*",[937],"MDN"," is a great place to start.",[1579,34876,34877],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":34879},[34880,34881,34882,34883,34884,34885],{"id":34542,"depth":1012,"text":34543},{"id":34552,"depth":1012,"text":34553},{"id":34568,"depth":1012,"text":34569},{"id":34599,"depth":1012,"text":34600},{"id":34623,"depth":1012,"text":34624},{"id":26560,"depth":1012,"text":26561},"2016-08-11","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-generators.jpg",{},{"title":216,"description":218},"blog\u002Fes6-generators",[16,17,220],"CrSjiOcKwMBAjvIwNZLHBZ0SdDGQd6NJW0fvJ41IJ8U",{"id":34894,"title":119,"author":920,"body":34895,"date":35424,"description":121,"extension":1591,"image":35425,"meta":35426,"navigation":1050,"path":120,"seo":35427,"stem":35428,"tags":35429,"__hash__":35430},"blog\u002Fblog\u002Fcreate-rails-5-api-application.md",{"type":922,"value":34896,"toc":35411},[34897,34900,34904,34908,34911,34920,34923,34941,34945,34952,34961,34965,34972,34984,34990,34993,35002,35008,35017,35021,35027,35036,35040,35043,35052,35055,35064,35070,35074,35077,35087,35096,35099,35107,35123,35197,35201,35204,35210,35213,35222,35227,35269,35279,35404,35406,35409],[925,34898,34899],{},"We start by settings up Rails 5.",[953,34901,34903],{"id":34902},"setting-up-rails-5","Setting up Rails 5",[1655,34905,34907],{"id":34906},"ruby-222","Ruby 2.2.2+",[925,34909,34910],{},"Make sure you have Ruby 2.2.2 or above:",[993,34912,34914],{"className":1797,"code":34913,"language":1799,"meta":998,"style":998},"ruby -v\n",[941,34915,34916],{"__ignoreMap":998},[1002,34917,34918],{"class":1004,"line":1005},[1002,34919,34913],{},[925,34921,34922],{},"If you don’t have the required minimum version, this link will help you to get up to date:",[1530,34924,34925,34933],{},[974,34926,34927,34928],{},"Mac - ",[933,34929,34932],{"href":34930,"rel":34931},"https:\u002F\u002Frailsapps.github.io\u002Finstallrubyonrails-mac.html",[937],"install Ruby on Rails for Mac",[974,34934,34935,34936],{},"Windows – ",[933,34937,34940],{"href":34938,"rel":34939},"http:\u002F\u002Frailsinstaller.org\u002Fen",[937],"Rails Installer",[953,34942,34944],{"id":34943},"create-an-app","Create an App",[925,34946,34947,34948,34951],{},"We need to pass the ",[941,34949,34950],{},"–api"," option at the time we create a new app.",[993,34953,34955],{"className":1797,"code":34954,"language":1799,"meta":998,"style":998},"rails new contacts_api –api\n",[941,34956,34957],{"__ignoreMap":998},[1002,34958,34959],{"class":1004,"line":1005},[1002,34960,34954],{},[953,34962,34964],{"id":34963},"tests","Tests",[925,34966,34967,34968,34971],{},"We are going to use ",[941,34969,34970],{},"RSpec"," for testing our API.",[925,34973,34974,34975,34978,34979,1251,34981,34983],{},"Add the following lines in your ",[941,34976,34977],{},"Gemfile",", in the ",[16,34980],{},[21237,34982],{}," area",[993,34985,34988],{"className":34986,"code":34987,"language":24241},[24239],"# Use RSpec for specs\ngem 'rspec-rails', '3.1.0'\n# Use Factory Girl for generating random test data\ngem 'factory_girl_rails'\n",[941,34989,34987],{"__ignoreMap":998},[925,34991,34992],{},"Now change into the directory, and run following command:",[993,34994,34996],{"className":1797,"code":34995,"language":1799,"meta":998,"style":998},"bundle\n",[941,34997,34998],{"__ignoreMap":998},[1002,34999,35000],{"class":1004,"line":1005},[1002,35001,34995],{},[925,35003,35004,35005,35007],{},"Run the ",[941,35006,34970],{}," installer",[993,35009,35011],{"className":1797,"code":35010,"language":1799,"meta":998,"style":998},"bin\u002Frails g rspec:install\n",[941,35012,35013],{"__ignoreMap":998},[1002,35014,35015],{"class":1004,"line":1005},[1002,35016,35010],{},[1655,35018,35020],{"id":35019},"specs-not-tests","Specs Not Tests",[925,35022,35023,35024,35026],{},"We will delete the ",[941,35025,21237],{}," directory in Rails as we are writing specs instead of tests.",[993,35028,35030],{"className":1797,"code":35029,"language":1799,"meta":998,"style":998},"rm -rf test\n",[941,35031,35032],{"__ignoreMap":998},[1002,35033,35034],{"class":1004,"line":1005},[1002,35035,35029],{},[953,35037,35039],{"id":35038},"scaffolding-api","Scaffolding API",[925,35041,35042],{},"We use the default scaffold geenerators to create API resources.",[993,35044,35046],{"className":1797,"code":35045,"language":1799,"meta":998,"style":998},"bin\u002Frails g scaffold user name email\n",[941,35047,35048],{"__ignoreMap":998},[1002,35049,35050],{"class":1004,"line":1005},[1002,35051,35045],{},[925,35053,35054],{},"We can create resources just like this. Once you have done that, you can migrate and run the app.",[993,35056,35058],{"className":1797,"code":35057,"language":1799,"meta":998,"style":998},"bin\u002Frake db:migrate\n",[941,35059,35060],{"__ignoreMap":998},[1002,35061,35062],{"class":1004,"line":1005},[1002,35063,35057],{},[925,35065,35066,35067],{},"Our new API will be up and running on ",[941,35068,35069],{},"http:\u002F\u002Flocalhost:3000",[953,35071,35073],{"id":35072},"cors","CORS",[925,35075,35076],{},"When we are building public APIs, we ned enable Cross-Origin Resource Sharing(CORS).",[925,35078,35079,35080,35082,35083,35086],{},"In the ",[941,35081,34977],{}," add ",[941,35084,35085],{},"rack-cors"," gem to enable this for us.",[993,35088,35090],{"className":1797,"code":35089,"language":1799,"meta":998,"style":998},"gem ‘rack-cors’\n",[941,35091,35092],{"__ignoreMap":998},[1002,35093,35094],{"class":1004,"line":1005},[1002,35095,35089],{},[925,35097,35098],{},"And now we can update the bundle:",[993,35100,35101],{"className":1797,"code":34995,"language":1799,"meta":998,"style":998},[941,35102,35103],{"__ignoreMap":998},[1002,35104,35105],{"class":1004,"line":1005},[1002,35106,34995],{},[925,35108,35109,35110,1251,35112,35115,35116,35119,35120],{},"To enable ",[941,35111,31754],{},[941,35113,35114],{},"POST",", or ",[941,35117,35118],{},"OPTIONS"," requests from any origin on any source, we will add the code snippet below to ",[941,35121,35122],{},"config\u002Fapplication.rb",[993,35124,35128],{"className":35125,"code":35126,"language":35127,"meta":998,"style":998},"language-rb shiki shiki-themes github-light github-dark","module ContactsApi\n class Application \u003C Rails::Application\n\n # ...\n\n config.middleware.insert_before 0, \"Rack::Cors\" do\n allow do\n origins '*'\n resource '*', :headers => :any, :methods => [:get, :post, :options]\n end\n end\n\n end\nend\n","rb",[941,35129,35130,35135,35140,35144,35149,35153,35158,35163,35168,35173,35178,35183,35187,35192],{"__ignoreMap":998},[1002,35131,35132],{"class":1004,"line":1005},[1002,35133,35134],{},"module ContactsApi\n",[1002,35136,35137],{"class":1004,"line":1012},[1002,35138,35139],{}," class Application \u003C Rails::Application\n",[1002,35141,35142],{"class":1004,"line":1047},[1002,35143,1051],{"emptyLinePlaceholder":1050},[1002,35145,35146],{"class":1004,"line":1054},[1002,35147,35148],{}," # ...\n",[1002,35150,35151],{"class":1004,"line":1060},[1002,35152,1051],{"emptyLinePlaceholder":1050},[1002,35154,35155],{"class":1004,"line":1272},[1002,35156,35157],{}," config.middleware.insert_before 0, \"Rack::Cors\" do\n",[1002,35159,35160],{"class":1004,"line":1348},[1002,35161,35162],{}," allow do\n",[1002,35164,35165],{"class":1004,"line":1354},[1002,35166,35167],{}," origins '*'\n",[1002,35169,35170],{"class":1004,"line":1360},[1002,35171,35172],{}," resource '*', :headers => :any, :methods => [:get, :post, :options]\n",[1002,35174,35175],{"class":1004,"line":1366},[1002,35176,35177],{}," end\n",[1002,35179,35180],{"class":1004,"line":1946},[1002,35181,35182],{}," end\n",[1002,35184,35185],{"class":1004,"line":1956},[1002,35186,1051],{"emptyLinePlaceholder":1050},[1002,35188,35189],{"class":1004,"line":1961},[1002,35190,35191],{}," end\n",[1002,35193,35194],{"class":1004,"line":1971},[1002,35195,35196],{},"end\n",[953,35198,35200],{"id":35199},"throttling","Throttling",[925,35202,35203],{},"To stop DDos and brute force attacks we are going to use a Rahe middleware called Rack::Attack.",[993,35205,35208],{"className":35206,"code":35207,"language":24241},[24239],"gem 'rack-attack'\n",[941,35209,35207],{"__ignoreMap":998},[925,35211,35212],{},"And update your bundle",[993,35214,35216],{"className":1797,"code":35215,"language":1799,"meta":998,"style":998},"gem ‘rack-attack’\n",[941,35217,35218],{"__ignoreMap":998},[1002,35219,35220],{"class":1004,"line":1005},[1002,35221,35215],{},[925,35223,35224,35225],{},"And now update your ",[941,35226,35122],{},[993,35228,35230],{"className":31824,"code":35229,"language":124,"meta":998,"style":998},"module ContactsApi\n class Application \u003C Rails::Application\n\n # ...\n\n config.middleware.use Rack::Attack\n\n end\nend\n",[941,35231,35232,35236,35240,35244,35248,35252,35257,35261,35265],{"__ignoreMap":998},[1002,35233,35234],{"class":1004,"line":1005},[1002,35235,35134],{},[1002,35237,35238],{"class":1004,"line":1012},[1002,35239,35139],{},[1002,35241,35242],{"class":1004,"line":1047},[1002,35243,1051],{"emptyLinePlaceholder":1050},[1002,35245,35246],{"class":1004,"line":1054},[1002,35247,35148],{},[1002,35249,35250],{"class":1004,"line":1060},[1002,35251,1051],{"emptyLinePlaceholder":1050},[1002,35253,35254],{"class":1004,"line":1272},[1002,35255,35256],{}," config.middleware.use Rack::Attack\n",[1002,35258,35259],{"class":1004,"line":1348},[1002,35260,1051],{"emptyLinePlaceholder":1050},[1002,35262,35263],{"class":1004,"line":1354},[1002,35264,35191],{},[1002,35266,35267],{"class":1004,"line":1360},[1002,35268,35196],{},[925,35270,35271,35272,35275,35276],{},"To configure ",[941,35273,35274],{},"Rack::Attack"," rules, create a file in c",[941,35277,35278],{},"onfig\u002Finitializers\u002Frack_attack.rb",[993,35280,35282],{"className":31824,"code":35281,"language":124,"meta":998,"style":998},"class Rack::Attack\n\n # `Rack::Attack` is configured to use the `Rails.cache` value by default,\n # but you can override that by setting the `Rack::Attack.cache.store` value\n Rack::Attack.cache.store = ActiveSupport::Cache::MemoryStore.new\n\n # Allow all local traffic\n whitelist('allow-localhost') do |req|\n '127.0.0.1' == req.ip || '::1' == req.ip\n end\n\n # Allow an IP address to make 5 requests every 5 seconds\n throttle('req\u002Fip', limit: 5, period: 5) do |req|\n req.ip\n end\n\n # Send the following response to throttled clients\n self.throttled_response = ->(env) {\n retry_after = (env['rack.attack.match_data'] || {})[:period]\n [\n 429,\n {'Content-Type' => 'application\u002Fjson', 'Retry-After' => retry_after.to_s},\n [{error: \"Throttle limit reached. Retry later.\"}.to_json]\n ]\n }\nend\n",[941,35283,35284,35289,35293,35298,35303,35308,35312,35317,35322,35327,35331,35335,35340,35345,35350,35354,35358,35363,35368,35373,35377,35382,35387,35392,35396,35400],{"__ignoreMap":998},[1002,35285,35286],{"class":1004,"line":1005},[1002,35287,35288],{},"class Rack::Attack\n",[1002,35290,35291],{"class":1004,"line":1012},[1002,35292,1051],{"emptyLinePlaceholder":1050},[1002,35294,35295],{"class":1004,"line":1047},[1002,35296,35297],{}," # `Rack::Attack` is configured to use the `Rails.cache` value by default,\n",[1002,35299,35300],{"class":1004,"line":1054},[1002,35301,35302],{}," # but you can override that by setting the `Rack::Attack.cache.store` value\n",[1002,35304,35305],{"class":1004,"line":1060},[1002,35306,35307],{}," Rack::Attack.cache.store = ActiveSupport::Cache::MemoryStore.new\n",[1002,35309,35310],{"class":1004,"line":1272},[1002,35311,1051],{"emptyLinePlaceholder":1050},[1002,35313,35314],{"class":1004,"line":1348},[1002,35315,35316],{}," # Allow all local traffic\n",[1002,35318,35319],{"class":1004,"line":1354},[1002,35320,35321],{}," whitelist('allow-localhost') do |req|\n",[1002,35323,35324],{"class":1004,"line":1360},[1002,35325,35326],{}," '127.0.0.1' == req.ip || '::1' == req.ip\n",[1002,35328,35329],{"class":1004,"line":1366},[1002,35330,35191],{},[1002,35332,35333],{"class":1004,"line":1946},[1002,35334,1051],{"emptyLinePlaceholder":1050},[1002,35336,35337],{"class":1004,"line":1956},[1002,35338,35339],{}," # Allow an IP address to make 5 requests every 5 seconds\n",[1002,35341,35342],{"class":1004,"line":1961},[1002,35343,35344],{}," throttle('req\u002Fip', limit: 5, period: 5) do |req|\n",[1002,35346,35347],{"class":1004,"line":1971},[1002,35348,35349],{}," req.ip\n",[1002,35351,35352],{"class":1004,"line":1980},[1002,35353,35191],{},[1002,35355,35356],{"class":1004,"line":1985},[1002,35357,1051],{"emptyLinePlaceholder":1050},[1002,35359,35360],{"class":1004,"line":1995},[1002,35361,35362],{}," # Send the following response to throttled clients\n",[1002,35364,35365],{"class":1004,"line":2006},[1002,35366,35367],{}," self.throttled_response = ->(env) {\n",[1002,35369,35370],{"class":1004,"line":2011},[1002,35371,35372],{}," retry_after = (env['rack.attack.match_data'] || {})[:period]\n",[1002,35374,35375],{"class":1004,"line":2017},[1002,35376,1324],{},[1002,35378,35379],{"class":1004,"line":2022},[1002,35380,35381],{}," 429,\n",[1002,35383,35384],{"class":1004,"line":2442},[1002,35385,35386],{}," {'Content-Type' => 'application\u002Fjson', 'Retry-After' => retry_after.to_s},\n",[1002,35388,35389],{"class":1004,"line":2466},[1002,35390,35391],{}," [{error: \"Throttle limit reached. Retry later.\"}.to_json]\n",[1002,35393,35394],{"class":1004,"line":2471},[1002,35395,1357],{},[1002,35397,35398],{"class":1004,"line":2476},[1002,35399,1269],{},[1002,35401,35402],{"class":1004,"line":2481},[1002,35403,35196],{},[953,35405,26561],{"id":26560},[925,35407,35408],{},"This guide will help you kick start your first Rails 5 API application.",[1579,35410,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":35412},[35413,35416,35417,35420,35421,35422,35423],{"id":34902,"depth":1012,"text":34903,"children":35414},[35415],{"id":34906,"depth":1047,"text":34907},{"id":34943,"depth":1012,"text":34944},{"id":34963,"depth":1012,"text":34964,"children":35418},[35419],{"id":35019,"depth":1047,"text":35020},{"id":35038,"depth":1012,"text":35039},{"id":35072,"depth":1012,"text":35073},{"id":35199,"depth":1012,"text":35200},{"id":26560,"depth":1012,"text":26561},"2016-08-08","\u002Fimages\u002Fblog\u002Ffeatures\u002Fcreate-rails-5-api-application.jpg",{},{"title":119,"description":121},"blog\u002Fcreate-rails-5-api-application",[16,123,124],"c-YWb2wN6oPjfNMbNjWq-99sNIJ6OM115AUNmpwN_sc",{"id":35432,"title":897,"author":920,"body":35433,"date":35779,"description":899,"extension":1591,"image":35780,"meta":35781,"navigation":1050,"path":898,"seo":35782,"stem":35783,"tags":35784,"__hash__":35785},"blog\u002Fblog\u002Fweb-page-rendering.md",{"type":922,"value":35434,"toc":35765},[35435,35439,35442,35445,35476,35479,35485,35488,35494,35497,35503,35512,35514,35517,35530,35533,35537,35546,35549,35594,35598,35602,35605,35608,35612,35615,35675,35678,35682,35685,35689,35698,35702,35705,35745,35749,35752,35756,35759,35762],[953,35436,35438],{"id":35437},"how-do-browsers-handle-web-page-rendering","How do browsers handle web page rendering?",[925,35440,35441],{},"Let’s start with an overview of how browser actions for rendering a web page.",[925,35443,35444],{},"When the server sends an HTML page to the browser, responding to your request, the following happens on the browser:",[1530,35446,35447,35453,35459,35465,35470],{},[974,35448,35449,35452],{},[941,35450,35451],{},"DOM"," – The browser creates DOM from the HTML page",[974,35454,35455,35458],{},[941,35456,35457],{},"CSSDOM"," – Styles are loaded and then passed, to create CSSDOM",[974,35460,35461,35464],{},[941,35462,35463],{},"Renderer\u002Frender object\u002Fframe"," – A render tree is created on top of DOM and CSSOM.",[974,35466,35467,35469],{},[941,35468,15700],{}," – For each render tree element, its coordinates are calculated (which is called layout)",[974,35471,35472,35475],{},[941,35473,35474],{},"Painting"," – Finally all above gets displayed in the browser window (which is called painting)",[925,35477,35478],{},"When underlying page structure changes as a result of user interacting with the page, one or many of the above steps will be repeated.",[925,35480,35481],{},[963,35482],{"alt":35483,"src":35484},"Gecko","\u002Fimages\u002Fblog\u002F2016-08-04-web-page-rendering\u002Fgecko-flow.jpg",[925,35486,35487],{},"Fig. 1 – Gecko",[925,35489,35490],{},[963,35491],{"alt":35492,"src":35493},"Webkit","\u002Fimages\u002Fblog\u002F2016-08-04-web-page-rendering\u002Fwebkit-flow.png",[925,35495,35496],{},"Fig. 2 – Webkit",[7100,35498,35500],{"title":35499,"type":24048},"DOM & CSSOM",[925,35501,35502],{},"DOM stands for Document Object Model and CSSOM stands for CSS Object Model.",[925,35504,35505,35506,35508,35509],{},"Render tree reflects the DOM structure except for invisible elements like ",[941,35507,16028],{}," tag or ",[941,35510,35511],{},"display: none",[953,35513,16321],{"id":16060},[925,35515,35516],{},"Element styles that don’t affect the position on the page, when changed, the browser will repaint the element when new styles are applied.",[925,35518,35519,35520,2034,35523,35525,35526,35529],{},"Some of the styles which don’t affect the position of the page are ",[941,35521,35522],{},"background-color",[941,35524,16070],{}," but not ",[941,35527,35528],{},"display"," for example.",[925,35531,35532],{},"When a repaint happens, new styles will be applied on top of it.",[953,35534,35536],{"id":35535},"reflowrelayout","Reflow\u002FRelayout",[925,35538,35539,35540,2034,35543,35545],{},"When changes result in ",[941,35541,35542],{},"document structure",[941,35544,15671],{}," to change, a page reflow happens.",[925,35547,35548],{},"Reflow happens as a result of:",[1530,35550,35551,35556,35561,35567,35573,35579,35585],{},[974,35552,35553,35555],{},[941,35554,35451],{}," – Add, delete or altering elments (DOM manipulation)",[974,35557,35558,35560],{},[941,35559,15801],{}," – Content changes eg:- text changes in form fields",[974,35562,35563,35566],{},[941,35564,35565],{},"CSS"," – Alter or calculate CSS properties",[974,35568,35569,35572],{},[941,35570,35571],{},"Styelsheets"," – Add\u002Fremove stylesheets",[974,35574,35575,35578],{},[941,35576,35577],{},"Classes"," – Changing of the class attribute",[974,35580,35581,35584],{},[941,35582,35583],{},"Browser"," – Changing browser window size including scrolling.",[974,35586,35587,35590,35591],{},[941,35588,35589],{},"Pseudo-classes"," – Pseudo class activation including ",[35592,35593],"hover",{},[953,35595,35597],{"id":35596},"render-optimization-by-the-browsers","Render Optimization by the Browsers",[953,35599,35601],{"id":35600},"selective-reflow","Selective Reflow",[925,35603,35604],{},"Browsers only replaint the area where covers changed elements.",[925,35606,35607],{},"On the contrary, a statically placed element will make the browser repaint the whole page.",[953,35609,35611],{"id":35610},"caching-changes","Caching Changes",[925,35613,35614],{},"While running JavaScript code, browsers cache changes, and apply them in a single pass after the code was run.",[993,35616,35618],{"className":995,"code":35617,"language":997,"meta":998,"style":998},"var body = document.querySelector('body');\n\nbody.style.backgroundColor = '#FFF'; \u002F\u002F repaint\nbody.style.margin = '20px'; \u002F\u002F reflow, repaint\n",[941,35619,35620,35641,35645,35660],{"__ignoreMap":998},[1002,35621,35622,35624,35627,35629,35631,35634,35636,35639],{"class":1004,"line":1005},[1002,35623,18311],{"class":1015},[1002,35625,35626],{"class":1030}," body ",[1002,35628,2393],{"class":1015},[1002,35630,16142],{"class":1030},[1002,35632,35633],{"class":1026},"querySelector",[1002,35635,1031],{"class":1030},[1002,35637,35638],{"class":1034},"'body'",[1002,35640,1085],{"class":1030},[1002,35642,35643],{"class":1004,"line":1012},[1002,35644,1051],{"emptyLinePlaceholder":1050},[1002,35646,35647,35650,35652,35655,35657],{"class":1004,"line":1047},[1002,35648,35649],{"class":1030},"body.style.backgroundColor ",[1002,35651,2393],{"class":1015},[1002,35653,35654],{"class":1034}," '#FFF'",[1002,35656,17938],{"class":1030},[1002,35658,35659],{"class":1008},"\u002F\u002F repaint\n",[1002,35661,35662,35665,35667,35670,35672],{"class":1004,"line":1054},[1002,35663,35664],{"class":1030},"body.style.margin ",[1002,35666,2393],{"class":1015},[1002,35668,35669],{"class":1034}," '20px'",[1002,35671,17938],{"class":1030},[1002,35673,35674],{"class":1008},"\u002F\u002F reflow, repaint\n",[925,35676,35677],{},"Accessing an element property, triggers a forced reflow. Only 1 reflow and repaint will be hapenning above.",[953,35679,35681],{"id":35680},"optimization","Optimization",[925,35683,35684],{},"The summary of recommendations for optimizing is following:",[1655,35686,35688],{"id":35687},"valid-html-css","Valid HTML & CSS",[925,35690,35691,35692,35694,35695],{},"Styles should be included in ",[941,35693,16028],{}," and scripts to the end of the ",[941,35696,35697],{},"\u003Cbody>",[1655,35699,35701],{"id":35700},"avoid-global-or-long-css-selctors","Avoid global or long CSS Selctors",[925,35703,35704],{},"Try and simplify your CSS selctors, and keep nesting levels at minimum.",[993,35706,35709],{"className":35707,"code":35708,"language":29,"meta":998,"style":998},"language-css shiki shiki-themes github-light github-dark","div * {...} \u002F* bad *\u002F\n.list li {...} \u002F* bad *\u002F\n.list-item {...} \u002F* good *\u002F\n",[941,35710,35711,35723,35735],{"__ignoreMap":998},[1002,35712,35713,35715,35717,35720],{"class":1004,"line":1005},[1002,35714,19650],{"class":15711},[1002,35716,6090],{"class":15711},[1002,35718,35719],{"class":1030}," {...} ",[1002,35721,35722],{"class":1008},"\u002F* bad *\u002F\n",[1002,35724,35725,35728,35731,35733],{"class":1004,"line":1012},[1002,35726,35727],{"class":1026},".list",[1002,35729,35730],{"class":15711}," li",[1002,35732,35719],{"class":1030},[1002,35734,35722],{"class":1008},[1002,35736,35737,35740,35742],{"class":1004,"line":1047},[1002,35738,35739],{"class":1026},".list-item",[1002,35741,35719],{"class":1030},[1002,35743,35744],{"class":1008},"\u002F* good *\u002F\n",[953,35746,35748],{"id":35747},"minimize-dom-manipulation","Minimize DOM manipulation",[925,35750,35751],{},"Properties and objects can be cached if they were reused. Complicated manipulations should be done in an offline elment(an element stored in memory) and then append it to DOM afterwards.",[953,35753,35755],{"id":35754},"animate-only-absolutefixed-elements","Animate only absolute\u002Ffixed elements",[925,35757,35758],{},"Relatively positioned elements will result in reflow.",[925,35760,35761],{},"Disable complicated pseudo class elements while scrolling and page resize.",[1579,35763,35764],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":35766},[35767,35768,35769,35770,35771,35772,35773,35777,35778],{"id":35437,"depth":1012,"text":35438},{"id":16060,"depth":1012,"text":16321},{"id":35535,"depth":1012,"text":35536},{"id":35596,"depth":1012,"text":35597},{"id":35600,"depth":1012,"text":35601},{"id":35610,"depth":1012,"text":35611},{"id":35680,"depth":1012,"text":35681,"children":35774},[35775,35776],{"id":35687,"depth":1047,"text":35688},{"id":35700,"depth":1047,"text":35701},{"id":35747,"depth":1012,"text":35748},{"id":35754,"depth":1012,"text":35755},"2016-08-04","\u002Fimages\u002Fblog\u002Ffeatures\u002Fweb-page-rendering.jpg",{},{"title":897,"description":899},"blog\u002Fweb-page-rendering",[16,17,29,383],"33il45Ap5Z1GNTbr8DDuJtn5JZ-1_ihgQytI8aCTqKw",{"id":35787,"title":746,"author":920,"body":35788,"date":36847,"description":748,"extension":1591,"image":36848,"meta":36849,"navigation":1050,"path":747,"seo":36850,"stem":36851,"tags":36852,"__hash__":36853},"blog\u002Fblog\u002Fsafari-css-hacks.md",{"type":922,"value":35789,"toc":36828},[35790,35796,35803,35807,35810,35816,35906,35911,35915,35921,35974,35978,35981,36054,36058,36061,36156,36160,36168,36217,36221,36232,36318,36322,36325,36378,36382,36385,36471,36474,36478,36481,36485,36560,36563,36568,36672,36675,36681,36684,36687,36741,36757,36761,36764,36825],[7100,35791,35793],{"type":23379,"title":35792},"Chrome on iOS",[925,35794,35795],{},"if you are using Chrome on iOS (at least in versions 6.1 and newer) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones.",[925,35797,35798,35799,35802],{},"We start with ",[941,35800,35801],{},"Safari 6.1+"," and then versions above it.",[953,35804,35806],{"id":35805},"safari-hacks","Safari Hacks",[1655,35808,35801],{"id":35809},"safari-61",[925,35811,35812,35813,1813],{},"By combining multiple other hacks for ",[941,35814,35815],{},"6.1+",[993,35817,35819],{"className":35707,"code":35818,"language":29,"meta":998,"style":998},"@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {\n @media {\n .safari_only {\n color: #0000ff;\n background-color: #cccccc;\n }\n }\n}\n",[941,35820,35821,35856,35863,35870,35882,35894,35898,35902],{"__ignoreMap":998},[1002,35822,35823,35826,35828,35831,35833,35836,35838,35840,35842,35845,35847,35850,35852,35854],{"class":1004,"line":1005},[1002,35824,35825],{"class":1015},"@media",[1002,35827,11670],{"class":1019},[1002,35829,35830],{"class":1015}," and",[1002,35832,6513],{"class":1030},[1002,35834,35835],{"class":1019},"min-color-index",[1002,35837,1137],{"class":1030},[1002,35839,5867],{"class":1019},[1002,35841,5876],{"class":1030},[1002,35843,35844],{"class":1015},"and",[1002,35846,6513],{"class":1030},[1002,35848,35849],{"class":1019},"-webkit-min-device-pixel-ratio",[1002,35851,1137],{"class":1030},[1002,35853,5867],{"class":1019},[1002,35855,2382],{"class":1030},[1002,35857,35858,35861],{"class":1004,"line":1012},[1002,35859,35860],{"class":1015}," @media",[1002,35862,1457],{"class":1030},[1002,35864,35865,35868],{"class":1004,"line":1047},[1002,35866,35867],{"class":1026}," .safari_only",[1002,35869,1457],{"class":1030},[1002,35871,35872,35875,35877,35880],{"class":1004,"line":1054},[1002,35873,35874],{"class":1019}," color",[1002,35876,1137],{"class":1030},[1002,35878,35879],{"class":1019},"#0000ff",[1002,35881,1407],{"class":1030},[1002,35883,35884,35887,35889,35892],{"class":1004,"line":1060},[1002,35885,35886],{"class":1019}," background-color",[1002,35888,1137],{"class":1030},[1002,35890,35891],{"class":1019},"#cccccc",[1002,35893,1407],{"class":1030},[1002,35895,35896],{"class":1004,"line":1272},[1002,35897,2014],{"class":1030},[1002,35899,35900],{"class":1004,"line":1348},[1002,35901,1269],{"class":1030},[1002,35903,35904],{"class":1004,"line":1354},[1002,35905,1170],{"class":1030},[7100,35907,35908],{"type":24048},[925,35909,35910],{},"Safari 6.1+ (9.0 is the latest version of Safari at this time)",[1655,35912,35914],{"id":35913},"safari-90","Safari 9.0+",[925,35916,35917,35918,1813],{},"One for Safari ",[941,35919,35920],{},"9+",[993,35922,35924],{"className":35707,"code":35923,"language":29,"meta":998,"style":998},"_::-webkit-:not(:root:root),\n.safari_only {\n color: #0000ff;\n background-color: #cccccc;\n}\n",[941,35925,35926,35941,35948,35959,35970],{"__ignoreMap":998},[1002,35927,35928,35931,35934,35936,35939],{"class":1004,"line":1005},[1002,35929,35930],{"class":1030},"_::-webkit-",[1002,35932,35933],{"class":1026},":not",[1002,35935,1031],{"class":1030},[1002,35937,35938],{"class":1026},":root:root",[1002,35940,1257],{"class":1030},[1002,35942,35943,35946],{"class":1004,"line":1012},[1002,35944,35945],{"class":1026},".safari_only",[1002,35947,1457],{"class":1030},[1002,35949,35950,35953,35955,35957],{"class":1004,"line":1047},[1002,35951,35952],{"class":1019}," color",[1002,35954,1137],{"class":1030},[1002,35956,35879],{"class":1019},[1002,35958,1407],{"class":1030},[1002,35960,35961,35964,35966,35968],{"class":1004,"line":1054},[1002,35962,35963],{"class":1019}," background-color",[1002,35965,1137],{"class":1030},[1002,35967,35891],{"class":1019},[1002,35969,1407],{"class":1030},[1002,35971,35972],{"class":1004,"line":1060},[1002,35973,1170],{"class":1030},[1655,35975,35977],{"id":35976},"safari-9","Safari 9",[925,35979,35980],{},"Safari 9 now includes feature detection so we can use that as well.",[993,35982,35984],{"className":35707,"code":35983,"language":29,"meta":998,"style":998},"@supports (overflow: -webkit-marquee) and (justify-content: inherit) {\n .safari_only {\n color: #0000ff;\n background-color: #cccccc;\n }\n}\n",[941,35985,35986,36017,36024,36035,36046,36050],{"__ignoreMap":998},[1002,35987,35988,35991,35993,35996,35998,36001,36003,36005,36007,36010,36012,36015],{"class":1004,"line":1005},[1002,35989,35990],{"class":1015},"@supports",[1002,35992,6513],{"class":1030},[1002,35994,35995],{"class":1019},"overflow",[1002,35997,1137],{"class":1030},[1002,35999,36000],{"class":1019},"-webkit-marquee",[1002,36002,5876],{"class":1030},[1002,36004,35844],{"class":1015},[1002,36006,6513],{"class":1030},[1002,36008,36009],{"class":1019},"justify-content",[1002,36011,1137],{"class":1030},[1002,36013,36014],{"class":1019},"inherit",[1002,36016,2382],{"class":1030},[1002,36018,36019,36022],{"class":1004,"line":1012},[1002,36020,36021],{"class":1026}," .safari_only",[1002,36023,1457],{"class":1030},[1002,36025,36026,36029,36031,36033],{"class":1004,"line":1047},[1002,36027,36028],{"class":1019}," color",[1002,36030,1137],{"class":1030},[1002,36032,35879],{"class":1019},[1002,36034,1407],{"class":1030},[1002,36036,36037,36040,36042,36044],{"class":1004,"line":1054},[1002,36038,36039],{"class":1019}," background-color",[1002,36041,1137],{"class":1030},[1002,36043,35891],{"class":1019},[1002,36045,1407],{"class":1030},[1002,36047,36048],{"class":1004,"line":1060},[1002,36049,1269],{"class":1030},[1002,36051,36052],{"class":1004,"line":1272},[1002,36053,1170],{"class":1030},[953,36055,36057],{"id":36056},"safari-90-ios-only","Safari 9.0+ (iOS Only)",[925,36059,36060],{},"Now we can target iOS devices only. As mentioned above, since Chrome on iOS is rooted in Safari, it of course hits that one as well.",[993,36062,36064],{"className":35707,"code":36063,"language":29,"meta":998,"style":998},"@supports (-webkit-text-size-adjust: none) and (not (-ms-ime-align: auto)) and\n (not (-moz-appearance: none)) {\n .safari_only {\n color: #0000ff;\n background-color: #cccccc;\n }\n}\n",[941,36065,36066,36104,36122,36128,36138,36148,36152],{"__ignoreMap":998},[1002,36067,36068,36070,36072,36075,36077,36080,36082,36084,36086,36088,36090,36093,36095,36098,36101],{"class":1004,"line":1005},[1002,36069,35990],{"class":1015},[1002,36071,6513],{"class":1030},[1002,36073,36074],{"class":1019},"-webkit-text-size-adjust",[1002,36076,1137],{"class":1030},[1002,36078,36079],{"class":1019},"none",[1002,36081,5876],{"class":1030},[1002,36083,35844],{"class":1015},[1002,36085,6513],{"class":1030},[1002,36087,17947],{"class":1015},[1002,36089,6513],{"class":1030},[1002,36091,36092],{"class":1019},"-ms-ime-align",[1002,36094,1137],{"class":1030},[1002,36096,36097],{"class":1019},"auto",[1002,36099,36100],{"class":1030},")) ",[1002,36102,36103],{"class":1015},"and\n",[1002,36105,36106,36109,36111,36113,36116,36118,36120],{"class":1004,"line":1012},[1002,36107,36108],{"class":1030}," (",[1002,36110,17947],{"class":1015},[1002,36112,6513],{"class":1030},[1002,36114,36115],{"class":1019},"-moz-appearance",[1002,36117,1137],{"class":1030},[1002,36119,36079],{"class":1019},[1002,36121,28385],{"class":1030},[1002,36123,36124,36126],{"class":1004,"line":1047},[1002,36125,36021],{"class":1026},[1002,36127,1457],{"class":1030},[1002,36129,36130,36132,36134,36136],{"class":1004,"line":1054},[1002,36131,36028],{"class":1019},[1002,36133,1137],{"class":1030},[1002,36135,35879],{"class":1019},[1002,36137,1407],{"class":1030},[1002,36139,36140,36142,36144,36146],{"class":1004,"line":1060},[1002,36141,36039],{"class":1019},[1002,36143,1137],{"class":1030},[1002,36145,35891],{"class":1019},[1002,36147,1407],{"class":1030},[1002,36149,36150],{"class":1004,"line":1272},[1002,36151,1269],{"class":1030},[1002,36153,36154],{"class":1004,"line":1348},[1002,36155,1170],{"class":1030},[1655,36157,36159],{"id":36158},"safari-90-non-ios","Safari 9.0+ (non-iOS)",[925,36161,35917,36162,35525,36164,36167],{},[941,36163,35920],{},[941,36165,36166],{},"iOS"," devices:",[993,36169,36171],{"className":35707,"code":36170,"language":29,"meta":998,"style":998},"_:-webkit-full-screen:not(:root:root),\n.safari_only {\n color: #0000ff;\n background-color: #cccccc;\n}\n",[941,36172,36173,36187,36193,36203,36213],{"__ignoreMap":998},[1002,36174,36175,36178,36181,36183,36185],{"class":1004,"line":1005},[1002,36176,36177],{"class":1030},"_",[1002,36179,36180],{"class":1026},":-webkit-full-screen:not",[1002,36182,1031],{"class":1030},[1002,36184,35938],{"class":1026},[1002,36186,1257],{"class":1030},[1002,36188,36189,36191],{"class":1004,"line":1012},[1002,36190,35945],{"class":1026},[1002,36192,1457],{"class":1030},[1002,36194,36195,36197,36199,36201],{"class":1004,"line":1047},[1002,36196,35952],{"class":1019},[1002,36198,1137],{"class":1030},[1002,36200,35879],{"class":1019},[1002,36202,1407],{"class":1030},[1002,36204,36205,36207,36209,36211],{"class":1004,"line":1054},[1002,36206,35963],{"class":1019},[1002,36208,1137],{"class":1030},[1002,36210,35891],{"class":1019},[1002,36212,1407],{"class":1030},[1002,36214,36215],{"class":1004,"line":1060},[1002,36216,1170],{"class":1030},[1655,36218,36220],{"id":36219},"safari-61-70","Safari 6.1-7.0",[925,36222,36223,36224,36227,36228,36231],{},"Below are hacks that separate ",[941,36225,36226],{},"6.1-7.0",", and ",[941,36229,36230],{},"7.1+",". These also required a combination of multiple hacks in order to get the right result:",[993,36233,36235],{"className":35707,"code":36234,"language":29,"meta":998,"style":998},"@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)\n{\n .safari_only {(;\n\n color: #0000FF;\n background-color: #CCCCCC;\n\n );}\n}\n",[941,36236,36237,36267,36271,36279,36283,36294,36305,36309,36314],{"__ignoreMap":998},[1002,36238,36239,36241,36243,36245,36247,36249,36251,36253,36255,36257,36259,36261,36263,36265],{"class":1004,"line":1005},[1002,36240,35825],{"class":1015},[1002,36242,11670],{"class":1019},[1002,36244,35830],{"class":1015},[1002,36246,6513],{"class":1030},[1002,36248,35849],{"class":1019},[1002,36250,1813],{"class":1030},[1002,36252,5867],{"class":1019},[1002,36254,5876],{"class":1030},[1002,36256,35844],{"class":1015},[1002,36258,6513],{"class":1030},[1002,36260,35835],{"class":1019},[1002,36262,1813],{"class":1030},[1002,36264,5867],{"class":1019},[1002,36266,3808],{"class":1030},[1002,36268,36269],{"class":1004,"line":1012},[1002,36270,1129],{"class":1030},[1002,36272,36273,36276],{"class":1004,"line":1047},[1002,36274,36275],{"class":1026}," .safari_only",[1002,36277,36278],{"class":1030}," {(;\n",[1002,36280,36281],{"class":1004,"line":1054},[1002,36282,1051],{"emptyLinePlaceholder":1050},[1002,36284,36285,36287,36289,36292],{"class":1004,"line":1060},[1002,36286,35874],{"class":1019},[1002,36288,1137],{"class":1030},[1002,36290,36291],{"class":1019},"#0000FF",[1002,36293,1407],{"class":1030},[1002,36295,36296,36298,36300,36303],{"class":1004,"line":1272},[1002,36297,35886],{"class":1019},[1002,36299,1137],{"class":1030},[1002,36301,36302],{"class":1019},"#CCCCCC",[1002,36304,1407],{"class":1030},[1002,36306,36307],{"class":1004,"line":1348},[1002,36308,1051],{"emptyLinePlaceholder":1050},[1002,36310,36311],{"class":1004,"line":1354},[1002,36312,36313],{"class":1030}," );}\n",[1002,36315,36316],{"class":1004,"line":1360},[1002,36317,1170],{"class":1030},[1655,36319,36321],{"id":36320},"safari-71","Safari 7.1+",[925,36323,36324],{},"This one works properly with Safari 9.0 as well.",[993,36326,36328],{"className":35707,"code":36327,"language":29,"meta":998,"style":998},"_::-webkit-full-page-media,\n_:future,\n:root .safari_only {\n color: #0000ff;\n background-color: #cccccc;\n}\n",[941,36329,36330,36339,36344,36354,36364,36374],{"__ignoreMap":998},[1002,36331,36332,36334,36337],{"class":1004,"line":1005},[1002,36333,36177],{"class":1030},[1002,36335,36336],{"class":1026},"::-webkit-full-page-media",[1002,36338,1143],{"class":1030},[1002,36340,36341],{"class":1004,"line":1012},[1002,36342,36343],{"class":1030},"_:future,\n",[1002,36345,36346,36349,36352],{"class":1004,"line":1047},[1002,36347,36348],{"class":1026},":root",[1002,36350,36351],{"class":1026}," .safari_only",[1002,36353,1457],{"class":1030},[1002,36355,36356,36358,36360,36362],{"class":1004,"line":1054},[1002,36357,35952],{"class":1019},[1002,36359,1137],{"class":1030},[1002,36361,35879],{"class":1019},[1002,36363,1407],{"class":1030},[1002,36365,36366,36368,36370,36372],{"class":1004,"line":1060},[1002,36367,35963],{"class":1019},[1002,36369,1137],{"class":1030},[1002,36371,35891],{"class":1019},[1002,36373,1407],{"class":1030},[1002,36375,36376],{"class":1004,"line":1272},[1002,36377,1170],{"class":1030},[1655,36379,36381],{"id":36380},"safari-61-non-ios","Safari 6.1+ (non-iOS)",[925,36383,36384],{},"Since I have pointed out the way to block iOS devices, here is the modified version of Safari 6.1+ hack that targets non-iOS devices:",[993,36386,36388],{"className":35707,"code":36387,"language":29,"meta":998,"style":998},"@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio:0) {\n @media {\n _:-webkit-full-screen,\n .safari_only {\n color: #0000ff;\n background-color: #cccccc;\n }\n }\n}\n",[941,36389,36390,36417,36423,36433,36439,36449,36459,36463,36467],{"__ignoreMap":998},[1002,36391,36392,36394,36396,36398,36400,36402,36404,36406,36409,36411,36413,36415],{"class":1004,"line":1005},[1002,36393,35825],{"class":1015},[1002,36395,11670],{"class":1019},[1002,36397,35830],{"class":1015},[1002,36399,6513],{"class":1030},[1002,36401,35835],{"class":1019},[1002,36403,1137],{"class":1030},[1002,36405,5867],{"class":1019},[1002,36407,36408],{"class":1030},") and(",[1002,36410,35849],{"class":1019},[1002,36412,1813],{"class":1030},[1002,36414,5867],{"class":1019},[1002,36416,2382],{"class":1030},[1002,36418,36419,36421],{"class":1004,"line":1012},[1002,36420,35860],{"class":1015},[1002,36422,1457],{"class":1030},[1002,36424,36425,36428,36431],{"class":1004,"line":1047},[1002,36426,36427],{"class":1030}," _",[1002,36429,36430],{"class":1026},":-webkit-full-screen",[1002,36432,1143],{"class":1030},[1002,36434,36435,36437],{"class":1004,"line":1054},[1002,36436,35867],{"class":1026},[1002,36438,1457],{"class":1030},[1002,36440,36441,36443,36445,36447],{"class":1004,"line":1060},[1002,36442,35874],{"class":1019},[1002,36444,1137],{"class":1030},[1002,36446,35879],{"class":1019},[1002,36448,1407],{"class":1030},[1002,36450,36451,36453,36455,36457],{"class":1004,"line":1272},[1002,36452,35886],{"class":1019},[1002,36454,1137],{"class":1030},[1002,36456,35891],{"class":1019},[1002,36458,1407],{"class":1030},[1002,36460,36461],{"class":1004,"line":1348},[1002,36462,2014],{"class":1030},[1002,36464,36465],{"class":1004,"line":1354},[1002,36466,1269],{"class":1030},[1002,36468,36469],{"class":1004,"line":1360},[1002,36470,1170],{"class":1030},[925,36472,36473],{},"Here are the basics, again check my test page for lots of specific versions of Chrome, but these cover Chrome in general. Chrome is version 45, Dev and Canary versions are up to version 47 at this time.",[953,36475,36477],{"id":36476},"chrome-only-hacks","Chrome Only Hacks",[925,36479,36480],{},"You might want to add styles to Chrome only and not Safari.",[1655,36482,36484],{"id":36483},"chrome-29","Chrome 29+",[993,36486,36488],{"className":35707,"code":36487,"language":29,"meta":998,"style":998},"@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {\n .chrome_only {\n color: #0000ff;\n background-color: #cccccc;\n }\n}\n",[941,36489,36490,36525,36532,36542,36552,36556],{"__ignoreMap":998},[1002,36491,36492,36494,36496,36498,36500,36502,36504,36506,36508,36510,36512,36515,36517,36520,36523],{"class":1004,"line":1005},[1002,36493,35825],{"class":1015},[1002,36495,11670],{"class":1019},[1002,36497,35830],{"class":1015},[1002,36499,6513],{"class":1030},[1002,36501,35849],{"class":1019},[1002,36503,1137],{"class":1030},[1002,36505,5867],{"class":1019},[1002,36507,5876],{"class":1030},[1002,36509,35844],{"class":1015},[1002,36511,6513],{"class":1030},[1002,36513,36514],{"class":1019},"min-resolution",[1002,36516,1137],{"class":1030},[1002,36518,36519],{"class":1019},"0.001",[1002,36521,36522],{"class":1015},"dpcm",[1002,36524,2382],{"class":1030},[1002,36526,36527,36530],{"class":1004,"line":1012},[1002,36528,36529],{"class":1026}," .chrome_only",[1002,36531,1457],{"class":1030},[1002,36533,36534,36536,36538,36540],{"class":1004,"line":1047},[1002,36535,36028],{"class":1019},[1002,36537,1137],{"class":1030},[1002,36539,35879],{"class":1019},[1002,36541,1407],{"class":1030},[1002,36543,36544,36546,36548,36550],{"class":1004,"line":1054},[1002,36545,36039],{"class":1019},[1002,36547,1137],{"class":1030},[1002,36549,35891],{"class":1019},[1002,36551,1407],{"class":1030},[1002,36553,36554],{"class":1004,"line":1060},[1002,36555,1269],{"class":1030},[1002,36557,36558],{"class":1004,"line":1272},[1002,36559,1170],{"class":1030},[1655,36561,36484],{"id":36562},"chrome-29-1",[925,36564,3898,36565,36567],{},[941,36566,35990],{}," feature query works well for Chrome 29+ as well.",[993,36569,36571],{"className":35707,"code":36570,"language":29,"meta":998,"style":998},"@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) and\n (not (-ms-ime-align: auto)) and (not (-moz-appearance: none)) {\n .chrome_only {\n color: #0000ff;\n background-color: #cccccc;\n }\n}\n",[941,36572,36573,36606,36638,36644,36654,36664,36668],{"__ignoreMap":998},[1002,36574,36575,36577,36579,36582,36584,36586,36588,36590,36592,36594,36596,36598,36600,36602,36604],{"class":1004,"line":1005},[1002,36576,35990],{"class":1015},[1002,36578,6513],{"class":1030},[1002,36580,36581],{"class":1019},"-webkit-appearance",[1002,36583,1137],{"class":1030},[1002,36585,36079],{"class":1019},[1002,36587,5876],{"class":1030},[1002,36589,35844],{"class":1015},[1002,36591,6513],{"class":1030},[1002,36593,17947],{"class":1015},[1002,36595,6513],{"class":1030},[1002,36597,35995],{"class":1019},[1002,36599,1137],{"class":1030},[1002,36601,36000],{"class":1019},[1002,36603,36100],{"class":1030},[1002,36605,36103],{"class":1015},[1002,36607,36608,36610,36612,36614,36616,36618,36620,36622,36624,36626,36628,36630,36632,36634,36636],{"class":1004,"line":1012},[1002,36609,36108],{"class":1030},[1002,36611,17947],{"class":1015},[1002,36613,6513],{"class":1030},[1002,36615,36092],{"class":1019},[1002,36617,1137],{"class":1030},[1002,36619,36097],{"class":1019},[1002,36621,36100],{"class":1030},[1002,36623,35844],{"class":1015},[1002,36625,6513],{"class":1030},[1002,36627,17947],{"class":1015},[1002,36629,6513],{"class":1030},[1002,36631,36115],{"class":1019},[1002,36633,1137],{"class":1030},[1002,36635,36079],{"class":1019},[1002,36637,28385],{"class":1030},[1002,36639,36640,36642],{"class":1004,"line":1047},[1002,36641,36529],{"class":1026},[1002,36643,1457],{"class":1030},[1002,36645,36646,36648,36650,36652],{"class":1004,"line":1054},[1002,36647,36028],{"class":1019},[1002,36649,1137],{"class":1030},[1002,36651,35879],{"class":1019},[1002,36653,1407],{"class":1030},[1002,36655,36656,36658,36660,36662],{"class":1004,"line":1060},[1002,36657,36039],{"class":1019},[1002,36659,1137],{"class":1030},[1002,36661,35891],{"class":1019},[1002,36663,1407],{"class":1030},[1002,36665,36666],{"class":1004,"line":1272},[1002,36667,1269],{"class":1030},[1002,36669,36670],{"class":1004,"line":1348},[1002,36671,1170],{"class":1030},[925,36673,36674],{},"A modified version of the one we were using for Chrome 28+ is shown next. Safari 9, the coming Firefox browsers, and the Microsoft Edge browser are not picked up with this one.",[925,36676,36677,36678,948],{},"Next, we look at ",[941,36679,36680],{},"Chrome 28+",[1655,36682,36680],{"id":36683},"chrome-28",[925,36685,36686],{},"This older method below now picks up Safari 9 and the Microsoft Edge browser without the above update.",[993,36688,36690],{"className":35707,"code":36689,"language":29,"meta":998,"style":998},"@supports (-webkit-appearance: none) {\n .chrome_and_safari {\n color: #0000ff;\n background-color: #cccccc;\n }\n}\n",[941,36691,36692,36706,36713,36723,36733,36737],{"__ignoreMap":998},[1002,36693,36694,36696,36698,36700,36702,36704],{"class":1004,"line":1005},[1002,36695,35990],{"class":1015},[1002,36697,6513],{"class":1030},[1002,36699,36581],{"class":1019},[1002,36701,1137],{"class":1030},[1002,36703,36079],{"class":1019},[1002,36705,2382],{"class":1030},[1002,36707,36708,36711],{"class":1004,"line":1012},[1002,36709,36710],{"class":1026}," .chrome_and_safari",[1002,36712,1457],{"class":1030},[1002,36714,36715,36717,36719,36721],{"class":1004,"line":1047},[1002,36716,36028],{"class":1019},[1002,36718,1137],{"class":1030},[1002,36720,35879],{"class":1019},[1002,36722,1407],{"class":1030},[1002,36724,36725,36727,36729,36731],{"class":1004,"line":1054},[1002,36726,36039],{"class":1019},[1002,36728,1137],{"class":1030},[1002,36730,35891],{"class":1019},[1002,36732,1407],{"class":1030},[1002,36734,36735],{"class":1004,"line":1060},[1002,36736,1269],{"class":1030},[1002,36738,36739],{"class":1004,"line":1272},[1002,36740,1170],{"class":1030},[7100,36742,36743],{"type":24048},[925,36744,36745,36746,2034,36749,36752,36753,36756],{},"The coming versions of ",[941,36747,36748],{},"Firefox",[941,36750,36751],{},"Microsoft Edge"," have added support for multiple ",[941,36754,36755],{},"-webkit-"," CSS codes in their programming, and both Edge and Safari 9 have added support for @supports feature detection. Chrome and Firefox included @supports previously.",[953,36758,36760],{"id":36759},"chrome-22-28","Chrome 22-28",[925,36762,36763],{},"The block of Chrome versions 22-28 (If needed to support older versions) are also possible to target with a twist on my Safari combo hacks I posted above:",[993,36765,36767],{"className":35707,"code":36766,"language":29,"meta":998,"style":998},"@media screen and(-webkit-min-device-pixel-ratio:0) {\n .chrome_only {\n -chrome-: only(; color: #0000FF; background-color: #CCCCCC;);\n }\n}\n",[941,36768,36769,36786,36792,36817,36821],{"__ignoreMap":998},[1002,36770,36771,36773,36775,36778,36780,36782,36784],{"class":1004,"line":1005},[1002,36772,35825],{"class":1015},[1002,36774,11670],{"class":1019},[1002,36776,36777],{"class":1030}," and(",[1002,36779,35849],{"class":1019},[1002,36781,1813],{"class":1030},[1002,36783,5867],{"class":1019},[1002,36785,2382],{"class":1030},[1002,36787,36788,36790],{"class":1004,"line":1012},[1002,36789,36529],{"class":1026},[1002,36791,1457],{"class":1030},[1002,36793,36794,36797,36800,36802,36804,36806,36808,36810,36812,36814],{"class":1004,"line":1047},[1002,36795,36796],{"class":1019}," -chrome-",[1002,36798,36799],{"class":1030},": only(; ",[1002,36801,3475],{"class":1019},[1002,36803,1137],{"class":1030},[1002,36805,36291],{"class":1019},[1002,36807,17938],{"class":1030},[1002,36809,35522],{"class":1019},[1002,36811,1137],{"class":1030},[1002,36813,36302],{"class":1019},[1002,36815,36816],{"class":1030},";);\n",[1002,36818,36819],{"class":1004,"line":1054},[1002,36820,1269],{"class":1030},[1002,36822,36823],{"class":1004,"line":1060},[1002,36824,1170],{"class":1030},[1579,36826,36827],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":36829},[36830,36835,36841,36846],{"id":35805,"depth":1012,"text":35806,"children":36831},[36832,36833,36834],{"id":35809,"depth":1047,"text":35801},{"id":35913,"depth":1047,"text":35914},{"id":35976,"depth":1047,"text":35977},{"id":36056,"depth":1012,"text":36057,"children":36836},[36837,36838,36839,36840],{"id":36158,"depth":1047,"text":36159},{"id":36219,"depth":1047,"text":36220},{"id":36320,"depth":1047,"text":36321},{"id":36380,"depth":1047,"text":36381},{"id":36476,"depth":1012,"text":36477,"children":36842},[36843,36844,36845],{"id":36483,"depth":1047,"text":36484},{"id":36562,"depth":1047,"text":36484},{"id":36683,"depth":1047,"text":36680},{"id":36759,"depth":1012,"text":36760},"2016-07-22","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsafari-css-hacks.jpg",{},{"title":746,"description":748},"blog\u002Fsafari-css-hacks",[16,29,383],"8kmmSCheOSSJqZzNyGnQZQGe92Cv3bSdWkLGAKtNIwQ",{"id":36855,"title":913,"author":920,"body":36856,"date":38085,"description":915,"extension":1591,"image":38086,"meta":38087,"navigation":1050,"path":914,"seo":38088,"stem":38089,"tags":38090,"__hash__":38091},"blog\u002Fblog\u002Fwriting-forms-react.md",{"type":922,"value":36857,"toc":38065},[36858,36861,36863,36868,36870,36880,36883,36887,36907,36911,36916,36932,36936,36941,36957,36959,36962,36988,36990,36995,37013,37015,37019,37024,37047,37051,37059,37211,37215,37225,37400,37404,37407,37414,37630,37634,37637,37643,37647,37653,37862,37866,37869,37878,38019,38023,38026,38038,38045,38051,38053,38062],[925,36859,36860],{},"Let’s start off by downloading necessary packages.",[953,36862,32993],{"id":32992},[925,36864,32996,36865,33002],{},[933,36866,33001],{"href":32999,"rel":36867},[937],[925,36869,33005],{},[993,36871,36872],{"className":1797,"code":33008,"language":1799,"meta":998,"style":998},[941,36873,36874],{"__ignoreMap":998},[1002,36875,36876,36878],{"class":1004,"line":1005},[1002,36877,27346],{"class":1026},[1002,36879,33017],{"class":1034},[925,36881,36882],{},"Open up the console and install following packages:",[1655,36884,36886],{"id":36885},"react-redux","React & Redux",[993,36888,36890],{"className":1797,"code":36889,"language":1799,"meta":998,"style":998},"npm install react react-dom redux ––save\n",[941,36891,36892],{"__ignoreMap":998},[1002,36893,36894,36896,36898,36900,36902,36905],{"class":1004,"line":1005},[1002,36895,27346],{"class":1026},[1002,36897,27349],{"class":1034},[1002,36899,33102],{"class":1034},[1002,36901,33105],{"class":1034},[1002,36903,36904],{"class":1034}," redux",[1002,36906,33041],{"class":1034},[1655,36908,36910],{"id":36909},"react-redux-form","React Redux Form",[925,36912,36913,36914,1813],{},"Also we need to install ",[941,36915,36909],{},[993,36917,36919],{"className":1797,"code":36918,"language":1799,"meta":998,"style":998},"npm install react-redux-redux ––save\n",[941,36920,36921],{"__ignoreMap":998},[1002,36922,36923,36925,36927,36930],{"class":1004,"line":1005},[1002,36924,27346],{"class":1026},[1002,36926,27349],{"class":1034},[1002,36928,36929],{"class":1034}," react-redux-redux",[1002,36931,33041],{"class":1034},[1655,36933,36935],{"id":36934},"redux-thunk","Redux Thunk",[925,36937,3898,36938,36940],{},[941,36939,36934],{}," middleware is useful for determining the proper action to dispatch based on the state, as well as dispatching actions or sequences of actions asynchronously.",[993,36942,36944],{"className":1797,"code":36943,"language":1799,"meta":998,"style":998},"npm install redux-thunk ––save\n",[941,36945,36946],{"__ignoreMap":998},[1002,36947,36948,36950,36952,36955],{"class":1004,"line":1005},[1002,36949,27346],{"class":1026},[1002,36951,27349],{"class":1034},[1002,36953,36954],{"class":1034}," redux-thunk",[1002,36956,33041],{"class":1034},[1655,36958,33021],{"id":33020},[925,36960,36961],{},"We need Babel to write our shiny ES6 code.",[993,36963,36964],{"className":1797,"code":33027,"language":1799,"meta":998,"style":998},[941,36965,36966,36976],{"__ignoreMap":998},[1002,36967,36968,36970,36972,36974],{"class":1004,"line":1005},[1002,36969,27346],{"class":1026},[1002,36971,27349],{"class":1034},[1002,36973,33038],{"class":1034},[1002,36975,33041],{"class":1034},[1002,36977,36978,36980,36982,36984,36986],{"class":1004,"line":1012},[1002,36979,27346],{"class":1026},[1002,36981,27349],{"class":1034},[1002,36983,33050],{"class":1034},[1002,36985,33053],{"class":1034},[1002,36987,33041],{"class":1034},[1655,36989,33059],{"id":33058},[925,36991,34967,36992,36994],{},[941,36993,33059],{}," to build our project.",[993,36996,36997],{"className":1797,"code":33065,"language":1799,"meta":998,"style":998},[941,36998,36999],{"__ignoreMap":998},[1002,37000,37001,37003,37005,37007,37009,37011],{"class":1004,"line":1005},[1002,37002,27346],{"class":1026},[1002,37004,27349],{"class":1034},[1002,37006,33076],{"class":1034},[1002,37008,33079],{"class":1034},[1002,37010,33082],{"class":1034},[1002,37012,33085],{"class":1034},[953,37014,33146],{"id":33145},[1655,37016,33150,37017],{"id":33149},[941,37018,33153],{},[925,37020,37021,37022,33813],{},"In order to create a preset to use Babel, we have to create a ",[941,37023,33153],{},[993,37025,37027],{"className":1120,"code":37026,"language":1122,"meta":998,"style":998},"{\n \"presets\": [\"es2015\"]\n}\n",[941,37028,37029,37033,37043],{"__ignoreMap":998},[1002,37030,37031],{"class":1004,"line":1005},[1002,37032,1129],{"class":1030},[1002,37034,37035,37037,37039,37041],{"class":1004,"line":1012},[1002,37036,1316],{"class":1019},[1002,37038,1201],{"class":1030},[1002,37040,33179],{"class":1034},[1002,37042,1207],{"class":1030},[1002,37044,37045],{"class":1004,"line":1047},[1002,37046,1170],{"class":1030},[1655,37048,37050],{"id":37049},"create-react-components","Create React Components",[925,37052,37053,37054,37056,37057,948],{},"Create a folder called ",[941,37055,29844],{}," and create a file called ",[941,37058,34034],{},[993,37060,37062],{"className":995,"code":37061,"language":997,"meta":998,"style":998},"import React from 'react';\nimport { Field } from 'react-redux-form';\nimport '..\u002Fstyles\u002Fform.css';\n\nconst FormField = ({ model, label, type }) => {\n return (\n \u003CField model={model} className=\"field\">\n \u003Clabel>{label}\u003C\u002Flabel>\n \u003Cinput type={type} \u002F>\n \u003C\u002FField>\n );\n};\n\nexport default FormField;\n",[941,37063,37064,37076,37090,37099,37103,37129,37135,37159,37171,37183,37191,37195,37199,37203],{"__ignoreMap":998},[1002,37065,37066,37068,37070,37072,37074],{"class":1004,"line":1005},[1002,37067,943],{"class":1015},[1002,37069,21700],{"class":1030},[1002,37071,1068],{"class":1015},[1002,37073,15543],{"class":1034},[1002,37075,1407],{"class":1030},[1002,37077,37078,37080,37083,37085,37088],{"class":1004,"line":1012},[1002,37079,943],{"class":1015},[1002,37081,37082],{"class":1030}," { Field } ",[1002,37084,1068],{"class":1015},[1002,37086,37087],{"class":1034}," 'react-redux-form'",[1002,37089,1407],{"class":1030},[1002,37091,37092,37094,37097],{"class":1004,"line":1047},[1002,37093,943],{"class":1015},[1002,37095,37096],{"class":1034}," '..\u002Fstyles\u002Fform.css'",[1002,37098,1407],{"class":1030},[1002,37100,37101],{"class":1004,"line":1054},[1002,37102,1051],{"emptyLinePlaceholder":1050},[1002,37104,37105,37107,37109,37111,37113,37115,37117,37119,37121,37123,37125,37127],{"class":1004,"line":1060},[1002,37106,1016],{"class":1015},[1002,37108,34062],{"class":1026},[1002,37110,1023],{"class":1015},[1002,37112,24446],{"class":1030},[1002,37114,3978],{"class":2378},[1002,37116,1251],{"class":1030},[1002,37118,29228],{"class":2378},[1002,37120,1251],{"class":1030},[1002,37122,18462],{"class":2378},[1002,37124,24451],{"class":1030},[1002,37126,15497],{"class":1015},[1002,37128,1457],{"class":1030},[1002,37130,37131,37133],{"class":1004,"line":1272},[1002,37132,15066],{"class":1015},[1002,37134,15692],{"class":1030},[1002,37136,37137,37139,37142,37144,37146,37149,37152,37154,37157],{"class":1004,"line":1348},[1002,37138,15697],{"class":1030},[1002,37140,37141],{"class":1019},"Field",[1002,37143,33930],{"class":1026},[1002,37145,2393],{"class":1015},[1002,37147,37148],{"class":1030},"{model} ",[1002,37150,37151],{"class":1026},"className",[1002,37153,2393],{"class":1015},[1002,37155,37156],{"class":1034},"\"field\"",[1002,37158,15703],{"class":1030},[1002,37160,37161,37163,37165,37167,37169],{"class":1004,"line":1354},[1002,37162,19579],{"class":1030},[1002,37164,29228],{"class":15711},[1002,37166,34102],{"class":1030},[1002,37168,29228],{"class":15711},[1002,37170,15703],{"class":1030},[1002,37172,37173,37175,37177,37179,37181],{"class":1004,"line":1360},[1002,37174,19579],{"class":1030},[1002,37176,5803],{"class":15711},[1002,37178,29274],{"class":1026},[1002,37180,2393],{"class":1015},[1002,37182,34119],{"class":1030},[1002,37184,37185,37187,37189],{"class":1004,"line":1366},[1002,37186,19647],{"class":1030},[1002,37188,37141],{"class":1019},[1002,37190,15703],{"class":1030},[1002,37192,37193],{"class":1004,"line":1946},[1002,37194,10503],{"class":1030},[1002,37196,37197],{"class":1004,"line":1956},[1002,37198,1517],{"class":1030},[1002,37200,37201],{"class":1004,"line":1961},[1002,37202,1051],{"emptyLinePlaceholder":1050},[1002,37204,37205,37207,37209],{"class":1004,"line":1971},[1002,37206,947],{"class":1015},[1002,37208,15641],{"class":1015},[1002,37210,34148],{"class":1030},[1655,37212,37214],{"id":37213},"create-styles","Create Styles",[925,37216,37053,37217,37220,37221,37224],{},[941,37218,37219],{},"styles"," under the ",[941,37222,37223],{},"src"," directory to hold our styles.",[993,37226,37228],{"className":35707,"code":37227,"language":29,"meta":998,"style":998},"label {\n width: 5rem;\n display: inline-block;\n}\n\nbutton {\n padding: 0.5rem 1rem;\n width: 13.2rem;\n margin-top: 0.5rem;\n}\n\nform {\n font-family: Helvetica, Arial;\n font-size: 0.85rem;\n}\n\n.field {\n margin: 0.4rem 0;\n}\n",[941,37229,37230,37236,37250,37262,37266,37270,37276,37294,37307,37320,37324,37328,37334,37351,37365,37369,37373,37380,37396],{"__ignoreMap":998},[1002,37231,37232,37234],{"class":1004,"line":1005},[1002,37233,29228],{"class":15711},[1002,37235,1457],{"class":1030},[1002,37237,37238,37241,37243,37245,37248],{"class":1004,"line":1012},[1002,37239,37240],{"class":1019}," width",[1002,37242,1137],{"class":1030},[1002,37244,2859],{"class":1019},[1002,37246,37247],{"class":1015},"rem",[1002,37249,1407],{"class":1030},[1002,37251,37252,37255,37257,37260],{"class":1004,"line":1047},[1002,37253,37254],{"class":1019}," display",[1002,37256,1137],{"class":1030},[1002,37258,37259],{"class":1019},"inline-block",[1002,37261,1407],{"class":1030},[1002,37263,37264],{"class":1004,"line":1054},[1002,37265,1170],{"class":1030},[1002,37267,37268],{"class":1004,"line":1060},[1002,37269,1051],{"emptyLinePlaceholder":1050},[1002,37271,37272,37274],{"class":1004,"line":1272},[1002,37273,16365],{"class":15711},[1002,37275,1457],{"class":1030},[1002,37277,37278,37281,37283,37286,37288,37290,37292],{"class":1004,"line":1348},[1002,37279,37280],{"class":1019}," padding",[1002,37282,1137],{"class":1030},[1002,37284,37285],{"class":1019},"0.5",[1002,37287,37247],{"class":1015},[1002,37289,6246],{"class":1019},[1002,37291,37247],{"class":1015},[1002,37293,1407],{"class":1030},[1002,37295,37296,37298,37300,37303,37305],{"class":1004,"line":1354},[1002,37297,37240],{"class":1019},[1002,37299,1137],{"class":1030},[1002,37301,37302],{"class":1019},"13.2",[1002,37304,37247],{"class":1015},[1002,37306,1407],{"class":1030},[1002,37308,37309,37312,37314,37316,37318],{"class":1004,"line":1360},[1002,37310,37311],{"class":1019}," margin-top",[1002,37313,1137],{"class":1030},[1002,37315,37285],{"class":1019},[1002,37317,37247],{"class":1015},[1002,37319,1407],{"class":1030},[1002,37321,37322],{"class":1004,"line":1366},[1002,37323,1170],{"class":1030},[1002,37325,37326],{"class":1004,"line":1946},[1002,37327,1051],{"emptyLinePlaceholder":1050},[1002,37329,37330,37332],{"class":1004,"line":1956},[1002,37331,29213],{"class":15711},[1002,37333,1457],{"class":1030},[1002,37335,37336,37339,37341,37344,37346,37349],{"class":1004,"line":1961},[1002,37337,37338],{"class":1019}," font-family",[1002,37340,1137],{"class":1030},[1002,37342,37343],{"class":1019},"Helvetica",[1002,37345,1251],{"class":1030},[1002,37347,37348],{"class":1019},"Arial",[1002,37350,1407],{"class":1030},[1002,37352,37353,37356,37358,37361,37363],{"class":1004,"line":1971},[1002,37354,37355],{"class":1019}," font-size",[1002,37357,1137],{"class":1030},[1002,37359,37360],{"class":1019},"0.85",[1002,37362,37247],{"class":1015},[1002,37364,1407],{"class":1030},[1002,37366,37367],{"class":1004,"line":1980},[1002,37368,1170],{"class":1030},[1002,37370,37371],{"class":1004,"line":1985},[1002,37372,1051],{"emptyLinePlaceholder":1050},[1002,37374,37375,37378],{"class":1004,"line":1995},[1002,37376,37377],{"class":1026},".field",[1002,37379,1457],{"class":1030},[1002,37381,37382,37385,37387,37390,37392,37394],{"class":1004,"line":2006},[1002,37383,37384],{"class":1019}," margin",[1002,37386,1137],{"class":1030},[1002,37388,37389],{"class":1019},"0.4",[1002,37391,37247],{"class":1015},[1002,37393,4910],{"class":1019},[1002,37395,1407],{"class":1030},[1002,37397,37398],{"class":1004,"line":2011},[1002,37399,1170],{"class":1030},[1655,37401,37403],{"id":37402},"create-containers","Create containers",[925,37405,37406],{},"Containers are higher order components that Redux will be connecting to. They hold the components which usually don’t need to know about the store.",[925,37408,29527,37409,37220,37411,37413],{},[941,37410,33848],{},[941,37412,33844],{}," folder.",[993,37415,37417],{"className":995,"code":37416,"language":997,"meta":998,"style":998},"import React from 'react';\nimport { connect } from 'react-redux';\nimport { Field, Form, actions } from 'react-redux-form';\nimport FormField from '..\u002Fcomponents\u002FFormField';\n\nconst LoginForm = ({ user }) => {\n return (\n \u003Cform>\n \u003CFormField model=\"user.username\" label=\"Username\" type=\"text\" \u002F>\n \u003CFormField model=\"user.password\" label=\"Password\" type=\"password\" \u002F>\n\n \u003Cbutton>Log in\u003C\u002Fbutton>\n \u003C\u002Fform>\n );\n};\n\nconst selector = (state) => ({ user: state.user });\n\nexport default connect(selector)(LoginForm);\n",[941,37418,37419,37431,37445,37458,37470,37474,37492,37498,37506,37532,37558,37562,37574,37582,37586,37590,37594,37614,37618],{"__ignoreMap":998},[1002,37420,37421,37423,37425,37427,37429],{"class":1004,"line":1005},[1002,37422,943],{"class":1015},[1002,37424,21700],{"class":1030},[1002,37426,1068],{"class":1015},[1002,37428,15543],{"class":1034},[1002,37430,1407],{"class":1030},[1002,37432,37433,37435,37438,37440,37443],{"class":1004,"line":1012},[1002,37434,943],{"class":1015},[1002,37436,37437],{"class":1030}," { connect } ",[1002,37439,1068],{"class":1015},[1002,37441,37442],{"class":1034}," 'react-redux'",[1002,37444,1407],{"class":1030},[1002,37446,37447,37449,37452,37454,37456],{"class":1004,"line":1047},[1002,37448,943],{"class":1015},[1002,37450,37451],{"class":1030}," { Field, Form, actions } ",[1002,37453,1068],{"class":1015},[1002,37455,37087],{"class":1034},[1002,37457,1407],{"class":1030},[1002,37459,37460,37462,37464,37466,37468],{"class":1004,"line":1054},[1002,37461,943],{"class":1015},[1002,37463,33872],{"class":1030},[1002,37465,1068],{"class":1015},[1002,37467,33877],{"class":1034},[1002,37469,1407],{"class":1030},[1002,37471,37472],{"class":1004,"line":1060},[1002,37473,1051],{"emptyLinePlaceholder":1050},[1002,37475,37476,37478,37480,37482,37484,37486,37488,37490],{"class":1004,"line":1272},[1002,37477,1016],{"class":1015},[1002,37479,33890],{"class":1026},[1002,37481,1023],{"class":1015},[1002,37483,24446],{"class":1030},[1002,37485,12587],{"class":2378},[1002,37487,24451],{"class":1030},[1002,37489,15497],{"class":1015},[1002,37491,1457],{"class":1030},[1002,37493,37494,37496],{"class":1004,"line":1348},[1002,37495,15066],{"class":1015},[1002,37497,15692],{"class":1030},[1002,37499,37500,37502,37504],{"class":1004,"line":1354},[1002,37501,15697],{"class":1030},[1002,37503,29213],{"class":15711},[1002,37505,15703],{"class":1030},[1002,37507,37508,37510,37512,37514,37516,37518,37520,37522,37524,37526,37528,37530],{"class":1004,"line":1360},[1002,37509,19579],{"class":1030},[1002,37511,33927],{"class":1019},[1002,37513,33930],{"class":1026},[1002,37515,2393],{"class":1015},[1002,37517,33935],{"class":1034},[1002,37519,33938],{"class":1026},[1002,37521,2393],{"class":1015},[1002,37523,33943],{"class":1034},[1002,37525,29274],{"class":1026},[1002,37527,2393],{"class":1015},[1002,37529,33950],{"class":1034},[1002,37531,15258],{"class":1030},[1002,37533,37534,37536,37538,37540,37542,37544,37546,37548,37550,37552,37554,37556],{"class":1004,"line":1366},[1002,37535,19579],{"class":1030},[1002,37537,33927],{"class":1019},[1002,37539,33930],{"class":1026},[1002,37541,2393],{"class":1015},[1002,37543,33965],{"class":1034},[1002,37545,33938],{"class":1026},[1002,37547,2393],{"class":1015},[1002,37549,33972],{"class":1034},[1002,37551,29274],{"class":1026},[1002,37553,2393],{"class":1015},[1002,37555,33979],{"class":1034},[1002,37557,15258],{"class":1030},[1002,37559,37560],{"class":1004,"line":1946},[1002,37561,1051],{"emptyLinePlaceholder":1050},[1002,37563,37564,37566,37568,37570,37572],{"class":1004,"line":1956},[1002,37565,19579],{"class":1030},[1002,37567,16365],{"class":15711},[1002,37569,33990],{"class":1030},[1002,37571,16365],{"class":15711},[1002,37573,15703],{"class":1030},[1002,37575,37576,37578,37580],{"class":1004,"line":1961},[1002,37577,19647],{"class":1030},[1002,37579,29213],{"class":15711},[1002,37581,15703],{"class":1030},[1002,37583,37584],{"class":1004,"line":1971},[1002,37585,10503],{"class":1030},[1002,37587,37588],{"class":1004,"line":1980},[1002,37589,1517],{"class":1030},[1002,37591,37592],{"class":1004,"line":1985},[1002,37593,1051],{"emptyLinePlaceholder":1050},[1002,37595,37596,37598,37601,37603,37605,37607,37609,37611],{"class":1004,"line":1995},[1002,37597,1016],{"class":1015},[1002,37599,37600],{"class":1026}," selector",[1002,37602,1023],{"class":1015},[1002,37604,6513],{"class":1030},[1002,37606,8589],{"class":2378},[1002,37608,5876],{"class":1030},[1002,37610,15497],{"class":1015},[1002,37612,37613],{"class":1030}," ({ user: state.user });\n",[1002,37615,37616],{"class":1004,"line":2006},[1002,37617,1051],{"emptyLinePlaceholder":1050},[1002,37619,37620,37622,37624,37627],{"class":1004,"line":2011},[1002,37621,947],{"class":1015},[1002,37623,15641],{"class":1015},[1002,37625,37626],{"class":1026}," connect",[1002,37628,37629],{"class":1030},"(selector)(LoginForm);\n",[1655,37631,37633],{"id":37632},"create-store","Create Store",[925,37635,37636],{},"The store will contain the reducers handling logic and connecting to the external end points etc.",[925,37638,37639,37640,37642],{},"We import ",[941,37641,36909],{}," redux-thunk for handling side-effects (asynchronous calls to external APIs etc.)",[1655,37644,37646],{"id":37645},"create-root","Create Root",[925,37648,37649,37650,948],{},"The top level component that renders to the DOM will be our root file. Let’s call it ",[941,37651,37652],{},"index.js",[993,37654,37656],{"className":995,"code":37655,"language":997,"meta":998,"style":998},"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport UserForm from '.\u002Fcontainers\u002FUserForm';\nimport { createStore, combineReducers } from 'redux';\nimport { Provider } from 'react-redux';\nimport { modelReducer, formReducer } from 'react-redux-form';\nimport store from '.\u002Fstore.js';\n\nconst reducer = combineReducers({\n user: modelReducer('user'),\n userForm: formReducer('user'),\n});\n\nReactDOM.render(\n \u003CProvider store={store}>\n \u003CUserForm \u002F>\n \u003C\u002FProvider>,\n document.getElementById('root'),\n);\n",[941,37657,37658,37670,37682,37696,37710,37723,37736,37750,37754,37768,37783,37797,37801,37805,37813,37828,37837,37845,37858],{"__ignoreMap":998},[1002,37659,37660,37662,37664,37666,37668],{"class":1004,"line":1005},[1002,37661,943],{"class":1015},[1002,37663,21700],{"class":1030},[1002,37665,1068],{"class":1015},[1002,37667,15543],{"class":1034},[1002,37669,1407],{"class":1030},[1002,37671,37672,37674,37676,37678,37680],{"class":1004,"line":1012},[1002,37673,943],{"class":1015},[1002,37675,28627],{"class":1030},[1002,37677,1068],{"class":1015},[1002,37679,28632],{"class":1034},[1002,37681,1407],{"class":1030},[1002,37683,37684,37686,37689,37691,37694],{"class":1004,"line":1047},[1002,37685,943],{"class":1015},[1002,37687,37688],{"class":1030}," UserForm ",[1002,37690,1068],{"class":1015},[1002,37692,37693],{"class":1034}," '.\u002Fcontainers\u002FUserForm'",[1002,37695,1407],{"class":1030},[1002,37697,37698,37700,37703,37705,37708],{"class":1004,"line":1054},[1002,37699,943],{"class":1015},[1002,37701,37702],{"class":1030}," { createStore, combineReducers } ",[1002,37704,1068],{"class":1015},[1002,37706,37707],{"class":1034}," 'redux'",[1002,37709,1407],{"class":1030},[1002,37711,37712,37714,37717,37719,37721],{"class":1004,"line":1060},[1002,37713,943],{"class":1015},[1002,37715,37716],{"class":1030}," { Provider } ",[1002,37718,1068],{"class":1015},[1002,37720,37442],{"class":1034},[1002,37722,1407],{"class":1030},[1002,37724,37725,37727,37730,37732,37734],{"class":1004,"line":1272},[1002,37726,943],{"class":1015},[1002,37728,37729],{"class":1030}," { modelReducer, formReducer } ",[1002,37731,1068],{"class":1015},[1002,37733,37087],{"class":1034},[1002,37735,1407],{"class":1030},[1002,37737,37738,37740,37743,37745,37748],{"class":1004,"line":1348},[1002,37739,943],{"class":1015},[1002,37741,37742],{"class":1030}," store ",[1002,37744,1068],{"class":1015},[1002,37746,37747],{"class":1034}," '.\u002Fstore.js'",[1002,37749,1407],{"class":1030},[1002,37751,37752],{"class":1004,"line":1354},[1002,37753,1051],{"emptyLinePlaceholder":1050},[1002,37755,37756,37758,37761,37763,37766],{"class":1004,"line":1360},[1002,37757,1016],{"class":1015},[1002,37759,37760],{"class":1019}," reducer",[1002,37762,1023],{"class":1015},[1002,37764,37765],{"class":1026}," combineReducers",[1002,37767,2756],{"class":1030},[1002,37769,37770,37773,37776,37778,37781],{"class":1004,"line":1366},[1002,37771,37772],{"class":1030}," user: ",[1002,37774,37775],{"class":1026},"modelReducer",[1002,37777,1031],{"class":1030},[1002,37779,37780],{"class":1034},"'user'",[1002,37782,1257],{"class":1030},[1002,37784,37785,37788,37791,37793,37795],{"class":1004,"line":1946},[1002,37786,37787],{"class":1030}," userForm: ",[1002,37789,37790],{"class":1026},"formReducer",[1002,37792,1031],{"class":1030},[1002,37794,37780],{"class":1034},[1002,37796,1257],{"class":1030},[1002,37798,37799],{"class":1004,"line":1956},[1002,37800,2804],{"class":1030},[1002,37802,37803],{"class":1004,"line":1961},[1002,37804,1051],{"emptyLinePlaceholder":1050},[1002,37806,37807,37809,37811],{"class":1004,"line":1971},[1002,37808,30453],{"class":1030},[1002,37810,19545],{"class":1026},[1002,37812,10468],{"class":1030},[1002,37814,37815,37817,37820,37823,37825],{"class":1004,"line":1980},[1002,37816,22427],{"class":1030},[1002,37818,37819],{"class":1019},"Provider",[1002,37821,37822],{"class":1026}," store",[1002,37824,2393],{"class":1015},[1002,37826,37827],{"class":1030},"{store}>\n",[1002,37829,37830,37832,37835],{"class":1004,"line":1985},[1002,37831,15697],{"class":1030},[1002,37833,37834],{"class":1019},"UserForm",[1002,37836,15258],{"class":1030},[1002,37838,37839,37841,37843],{"class":1004,"line":1995},[1002,37840,28112],{"class":1030},[1002,37842,37819],{"class":1019},[1002,37844,22234],{"class":1030},[1002,37846,37847,37850,37852,37854,37856],{"class":1004,"line":2006},[1002,37848,37849],{"class":1030}," document.",[1002,37851,16591],{"class":1026},[1002,37853,1031],{"class":1030},[1002,37855,12223],{"class":1034},[1002,37857,1257],{"class":1030},[1002,37859,37860],{"class":1004,"line":2011},[1002,37861,1085],{"class":1030},[1655,37863,37865],{"id":37864},"create-web-page","Create Web Page",[925,37867,37868],{},"We need a web page in order to render our root React component into.",[925,37870,37053,37871,37874,37875,948],{},[941,37872,37873],{},"public"," and a folder underneath it called ",[941,37876,37877],{},"index.html",[993,37879,37882],{"className":37880,"code":37881,"language":383,"meta":998,"style":998},"language-html shiki shiki-themes github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Ctitle>React Redux Form\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Cdiv id=\"root\">\u003C\u002Fdiv>\n \u003Cscript src=\"\u002Fstatic\u002Fbundle.js\">\u003C\u002Fscript>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,37883,37884,37896,37912,37920,37937,37950,37958,37966,37985,38003,38011],{"__ignoreMap":998},[1002,37885,37886,37889,37892,37894],{"class":1004,"line":1005},[1002,37887,37888],{"class":1030},"\u003C!",[1002,37890,37891],{"class":15711},"DOCTYPE",[1002,37893,21739],{"class":1026},[1002,37895,15703],{"class":1030},[1002,37897,37898,37900,37902,37905,37907,37910],{"class":1004,"line":1012},[1002,37899,6539],{"class":1030},[1002,37901,383],{"class":15711},[1002,37903,37904],{"class":1026}," lang",[1002,37906,2393],{"class":1030},[1002,37908,37909],{"class":1034},"\"en\"",[1002,37911,15703],{"class":1030},[1002,37913,37914,37916,37918],{"class":1004,"line":1047},[1002,37915,22427],{"class":1030},[1002,37917,32092],{"class":15711},[1002,37919,15703],{"class":1030},[1002,37921,37922,37924,37927,37930,37932,37935],{"class":1004,"line":1054},[1002,37923,15697],{"class":1030},[1002,37925,37926],{"class":15711},"meta",[1002,37928,37929],{"class":1026}," charset",[1002,37931,2393],{"class":1030},[1002,37933,37934],{"class":1034},"\"UTF-8\"",[1002,37936,15258],{"class":1030},[1002,37938,37939,37941,37943,37946,37948],{"class":1004,"line":1060},[1002,37940,15697],{"class":1030},[1002,37942,15029],{"class":15711},[1002,37944,37945],{"class":1030},">React Redux Form\u003C\u002F",[1002,37947,15029],{"class":15711},[1002,37949,15703],{"class":1030},[1002,37951,37952,37954,37956],{"class":1004,"line":1272},[1002,37953,28112],{"class":1030},[1002,37955,32092],{"class":15711},[1002,37957,15703],{"class":1030},[1002,37959,37960,37962,37964],{"class":1004,"line":1348},[1002,37961,22427],{"class":1030},[1002,37963,15034],{"class":15711},[1002,37965,15703],{"class":1030},[1002,37967,37968,37970,37972,37974,37976,37979,37981,37983],{"class":1004,"line":1354},[1002,37969,15697],{"class":1030},[1002,37971,19650],{"class":15711},[1002,37973,21489],{"class":1026},[1002,37975,2393],{"class":1030},[1002,37977,37978],{"class":1034},"\"root\"",[1002,37980,22081],{"class":1030},[1002,37982,19650],{"class":15711},[1002,37984,15703],{"class":1030},[1002,37986,37987,37989,37991,37993,37995,37997,37999,38001],{"class":1004,"line":1360},[1002,37988,15697],{"class":1030},[1002,37990,22063],{"class":15711},[1002,37992,15242],{"class":1026},[1002,37994,2393],{"class":1030},[1002,37996,22078],{"class":1034},[1002,37998,22081],{"class":1030},[1002,38000,22063],{"class":15711},[1002,38002,15703],{"class":1030},[1002,38004,38005,38007,38009],{"class":1004,"line":1366},[1002,38006,28112],{"class":1030},[1002,38008,15034],{"class":15711},[1002,38010,15703],{"class":1030},[1002,38012,38013,38015,38017],{"class":1004,"line":1946},[1002,38014,22437],{"class":1030},[1002,38016,383],{"class":15711},[1002,38018,15703],{"class":1030},[1655,38020,38022],{"id":38021},"running-the-app","Running the App",[925,38024,38025],{},"Fire up a command line console and run the following command.",[993,38027,38029],{"className":1797,"code":38028,"language":1799,"meta":998,"style":998},"npm start\n",[941,38030,38031],{"__ignoreMap":998},[1002,38032,38033,38035],{"class":1004,"line":1005},[1002,38034,27346],{"class":1026},[1002,38036,38037],{"class":1034}," start\n",[925,38039,38040,38041,38044],{},"Now you can open up a browser instance and go to ",[933,38042,35069],{"href":35069,"rel":38043},[937]," see your app working.",[925,38046,38047],{},[963,38048],{"alt":38049,"src":38050},"Redux Form","\u002Fimages\u002Fblog\u002F2016-07-17-writing-forms-react\u002Freact-redux-form.png",[1655,38052,26561],{"id":26560},[925,38054,38055,38056,38061],{},"You can find the source code in ",[933,38057,38060],{"href":38058,"rel":38059},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Freact-redux-form-demo",[937],"Github"," here.",[1579,38063,38064],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":38066},[38067,38074],{"id":32992,"depth":1012,"text":32993,"children":38068},[38069,38070,38071,38072,38073],{"id":36885,"depth":1047,"text":36886},{"id":36909,"depth":1047,"text":36910},{"id":36934,"depth":1047,"text":36935},{"id":33020,"depth":1047,"text":33021},{"id":33058,"depth":1047,"text":33059},{"id":33145,"depth":1012,"text":33146,"children":38075},[38076,38077,38078,38079,38080,38081,38082,38083,38084],{"id":33149,"depth":1047,"text":34510},{"id":37049,"depth":1047,"text":37050},{"id":37213,"depth":1047,"text":37214},{"id":37402,"depth":1047,"text":37403},{"id":37632,"depth":1047,"text":37633},{"id":37645,"depth":1047,"text":37646},{"id":37864,"depth":1047,"text":37865},{"id":38021,"depth":1047,"text":38022},{"id":26560,"depth":1047,"text":26561},"2016-07-17","\u002Fimages\u002Fblog\u002Ffeatures\u002Fwriting-forms-react.jpg",{},{"title":913,"description":915},"blog\u002Fwriting-forms-react",[16,29,383],"xWUYzmaGUqZl6TyIqTu_OqHXZo7bURZC7FlUg7I4i1Y",{"id":38093,"title":882,"author":920,"body":38094,"date":38611,"description":884,"extension":1591,"image":38612,"meta":38613,"navigation":1050,"path":883,"seo":38614,"stem":38615,"tags":38616,"__hash__":38617},"blog\u002Fblog\u002Fusing-es6-babel.md",{"type":922,"value":38095,"toc":38603},[38096,38099,38103,38106,38121,38127,38142,38146,38150,38172,38178,38188,38191,38195,38198,38206,38239,38243,38248,38280,38283,38291,38298,38391,38394,38397,38405,38422,38430,38465,38475,38584,38587,38589,38592,38600],[925,38097,38098],{},"Let’s look at the steps we need to follow to get this going.",[953,38100,38102],{"id":38101},"install-babel","Install Babel",[925,38104,38105],{},"Installing Babel CLI is the first thing we’ll do.",[993,38107,38109],{"className":1797,"code":38108,"language":1799,"meta":998,"style":998},"npm install babel-cli ––save–dev\n",[941,38110,38111],{"__ignoreMap":998},[1002,38112,38113,38115,38117,38119],{"class":1004,"line":1005},[1002,38114,27346],{"class":1026},[1002,38116,27349],{"class":1034},[1002,38118,33038],{"class":1034},[1002,38120,33085],{"class":1034},[925,38122,38123,38124,948],{},"We have to install addons to use new syntax additions, so let’s install ",[941,38125,38126],{},"babel-preset-es2015",[993,38128,38130],{"className":1797,"code":38129,"language":1799,"meta":998,"style":998},"npm install babel-preset-es2015 ––save–dev\n",[941,38131,38132],{"__ignoreMap":998},[1002,38133,38134,38136,38138,38140],{"class":1004,"line":1005},[1002,38135,27346],{"class":1026},[1002,38137,27349],{"class":1034},[1002,38139,33053],{"class":1034},[1002,38141,33085],{"class":1034},[953,38143,33150,38144],{"id":33149},[941,38145,33153],{},[925,38147,37021,38148,33813],{},[941,38149,33153],{},[993,38151,38152],{"className":1120,"code":37026,"language":1122,"meta":998,"style":998},[941,38153,38154,38158,38168],{"__ignoreMap":998},[1002,38155,38156],{"class":1004,"line":1005},[1002,38157,1129],{"class":1030},[1002,38159,38160,38162,38164,38166],{"class":1004,"line":1012},[1002,38161,1316],{"class":1019},[1002,38163,1201],{"class":1030},[1002,38165,33179],{"class":1034},[1002,38167,1207],{"class":1030},[1002,38169,38170],{"class":1004,"line":1047},[1002,38171,1170],{"class":1030},[925,38173,38174,38175,38177],{},"Same time let’s create a ",[941,38176,1102],{}," file. Run the following command and follow the prompts.",[993,38179,38180],{"className":1797,"code":33008,"language":1799,"meta":998,"style":998},[941,38181,38182],{"__ignoreMap":998},[1002,38183,38184,38186],{"class":1004,"line":1005},[1002,38185,27346],{"class":1026},[1002,38187,33017],{"class":1034},[925,38189,38190],{},"Now we are ready to write some ES6 code!",[953,38192,38194],{"id":38193},"write-es6-code","Write ES6 Code",[925,38196,38197],{},"To test out the configuration is correct, let’s write our code in ES6 syntax.",[925,38199,37053,38200,38202,38203,38205],{},[941,38201,37223],{}," and then a file inside it called ",[941,38204,37652],{}," and add the following code.",[993,38207,38209],{"className":995,"code":38208,"language":997,"meta":998,"style":998},"export const bar = (foo) => `${foo} world!`;\n",[941,38210,38211],{"__ignoreMap":998},[1002,38212,38213,38215,38217,38220,38222,38224,38226,38228,38230,38232,38234,38237],{"class":1004,"line":1005},[1002,38214,947],{"class":1015},[1002,38216,23722],{"class":1015},[1002,38218,38219],{"class":1026}," bar",[1002,38221,1023],{"class":1015},[1002,38223,6513],{"class":1030},[1002,38225,16521],{"class":2378},[1002,38227,5876],{"class":1030},[1002,38229,15497],{"class":1015},[1002,38231,13056],{"class":1034},[1002,38233,16521],{"class":1030},[1002,38235,38236],{"class":1034},"} world!`",[1002,38238,1407],{"class":1030},[953,38240,38242],{"id":38241},"transpile-to-es5","Transpile to ES5",[925,38244,38245,38246,33813],{},"To transpile our ES6 code, we will add a command to the script section of the ",[941,38247,1102],{},[993,38249,38251],{"className":1120,"code":38250,"language":1122,"meta":998,"style":998},"\"scripts\": {\n \"start\": \".\u002Fnode_modules\u002F.bin\u002Fbabel src -d dist\",\n ...\n},\n",[941,38252,38253,38260,38272,38276],{"__ignoreMap":998},[1002,38254,38255,38258],{"class":1004,"line":1005},[1002,38256,38257],{"class":1034},"\"scripts\"",[1002,38259,15354],{"class":1030},[1002,38261,38262,38265,38267,38270],{"class":1004,"line":1012},[1002,38263,38264],{"class":1019}," \"start\"",[1002,38266,1137],{"class":1030},[1002,38268,38269],{"class":1034},"\".\u002Fnode_modules\u002F.bin\u002Fbabel src -d dist\"",[1002,38271,1143],{"class":1030},[1002,38273,38274],{"class":1004,"line":1047},[1002,38275,18213],{"class":18541},[1002,38277,38278],{"class":1004,"line":1054},[1002,38279,3492],{"class":1030},[925,38281,38282],{},"Now run the following command to let the transpilation kick in.",[993,38284,38285],{"className":1120,"code":38028,"language":1122,"meta":998,"style":998},[941,38286,38287],{"__ignoreMap":998},[1002,38288,38289],{"class":1004,"line":1005},[1002,38290,38028],{"class":1030},[925,38292,38293,38294,38297],{},"You will find a ",[941,38295,38296],{},"dist"," folder in your root directory with the transpiled code, which may look as follows.",[993,38299,38301],{"className":995,"code":38300,"language":997,"meta":998,"style":998},"'use strict';\n\nObject.defineProperty(exports, '__esModule', {\n value: true,\n});\nvar bar = (exports.bar = function bar(foo) {\n return foo + ' world!';\n});\n",[941,38302,38303,38309,38313,38331,38340,38344,38373,38387],{"__ignoreMap":998},[1002,38304,38305,38307],{"class":1004,"line":1005},[1002,38306,18304],{"class":1034},[1002,38308,1407],{"class":1030},[1002,38310,38311],{"class":1004,"line":1012},[1002,38312,1051],{"emptyLinePlaceholder":1050},[1002,38314,38315,38317,38319,38321,38323,38325,38328],{"class":1004,"line":1047},[1002,38316,33697],{"class":1030},[1002,38318,17376],{"class":1026},[1002,38320,1031],{"class":1030},[1002,38322,1452],{"class":1019},[1002,38324,1251],{"class":1030},[1002,38326,38327],{"class":1034},"'__esModule'",[1002,38329,38330],{"class":1030},", {\n",[1002,38332,38333,38336,38338],{"class":1004,"line":1054},[1002,38334,38335],{"class":1030}," value: ",[1002,38337,17397],{"class":1019},[1002,38339,1143],{"class":1030},[1002,38341,38342],{"class":1004,"line":1060},[1002,38343,2804],{"class":1030},[1002,38345,38346,38348,38351,38353,38355,38357,38359,38361,38363,38365,38367,38369,38371],{"class":1004,"line":1272},[1002,38347,18311],{"class":1015},[1002,38349,38350],{"class":1030}," bar ",[1002,38352,2393],{"class":1015},[1002,38354,6513],{"class":1030},[1002,38356,1452],{"class":1019},[1002,38358,948],{"class":1030},[1002,38360,30895],{"class":1026},[1002,38362,1023],{"class":1015},[1002,38364,8457],{"class":1015},[1002,38366,38219],{"class":1026},[1002,38368,1031],{"class":1030},[1002,38370,16521],{"class":2378},[1002,38372,2382],{"class":1030},[1002,38374,38375,38377,38380,38382,38385],{"class":1004,"line":1348},[1002,38376,15066],{"class":1015},[1002,38378,38379],{"class":1030}," foo ",[1002,38381,5064],{"class":1015},[1002,38383,38384],{"class":1034}," ' world!'",[1002,38386,1407],{"class":1030},[1002,38388,38389],{"class":1004,"line":1354},[1002,38390,2804],{"class":1030},[953,38392,38393],{"id":21237},"Test",[925,38395,38396],{},"To guarantee our transpiled code is working, let’s write some tests.",[925,38398,38399,38400,2034,38402,948],{},"First, let’s install ",[941,38401,33111],{},[941,38403,38404],{},"Chai",[993,38406,38408],{"className":1797,"code":38407,"language":1799,"meta":998,"style":998},"npm install mocha chai ––save–dev\n",[941,38409,38410],{"__ignoreMap":998},[1002,38411,38412,38414,38416,38418,38420],{"class":1004,"line":1005},[1002,38413,27346],{"class":1026},[1002,38415,27349],{"class":1034},[1002,38417,33134],{"class":1034},[1002,38419,33128],{"class":1034},[1002,38421,33085],{"class":1034},[925,38423,38424,38425,38427,38428,948],{},"Also create a directory called ",[941,38426,21237],{}," and add the test script to ",[941,38429,1102],{},[993,38431,38433],{"className":1120,"code":38432,"language":1122,"meta":998,"style":998},"\"scripts\": {\n \"start\": \".\u002Fnode_modules\u002F.bin\u002Fbabel src -d dist\",\n \"test\": \"mocha\"\n},\n",[941,38434,38435,38441,38451,38461],{"__ignoreMap":998},[1002,38436,38437,38439],{"class":1004,"line":1005},[1002,38438,38257],{"class":1034},[1002,38440,15354],{"class":1030},[1002,38442,38443,38445,38447,38449],{"class":1004,"line":1012},[1002,38444,38264],{"class":1019},[1002,38446,1137],{"class":1030},[1002,38448,38269],{"class":1034},[1002,38450,1143],{"class":1030},[1002,38452,38453,38456,38458],{"class":1004,"line":1047},[1002,38454,38455],{"class":1019}," \"test\"",[1002,38457,1137],{"class":1030},[1002,38459,38460],{"class":1034},"\"mocha\"\n",[1002,38462,38463],{"class":1004,"line":1054},[1002,38464,3492],{"class":1030},[925,38466,38467,38468,38471,38472,38474],{},"Now let’s write a test. Create a ",[941,38469,38470],{},"test.js"," file in the ",[941,38473,21237],{}," directory and add the following test.",[993,38476,38478],{"className":995,"code":38477,"language":997,"meta":998,"style":998},"var assert = require('chai').assert;\nvar bar = require('..\u002Fdist\u002F').bar;\n\ndescribe('Bar', function () {\n it('Should return Hello world!', function () {\n assert.equal(bar('Hello'), 'Hello world!');\n });\n});\n",[941,38479,38480,38499,38517,38521,38536,38551,38576,38580],{"__ignoreMap":998},[1002,38481,38482,38484,38487,38489,38491,38493,38496],{"class":1004,"line":1005},[1002,38483,18311],{"class":1015},[1002,38485,38486],{"class":1030}," assert ",[1002,38488,2393],{"class":1015},[1002,38490,1027],{"class":1026},[1002,38492,1031],{"class":1030},[1002,38494,38495],{"class":1034},"'chai'",[1002,38497,38498],{"class":1030},").assert;\n",[1002,38500,38501,38503,38505,38507,38509,38511,38514],{"class":1004,"line":1012},[1002,38502,18311],{"class":1015},[1002,38504,38350],{"class":1030},[1002,38506,2393],{"class":1015},[1002,38508,1027],{"class":1026},[1002,38510,1031],{"class":1030},[1002,38512,38513],{"class":1034},"'..\u002Fdist\u002F'",[1002,38515,38516],{"class":1030},").bar;\n",[1002,38518,38519],{"class":1004,"line":1047},[1002,38520,1051],{"emptyLinePlaceholder":1050},[1002,38522,38523,38525,38527,38530,38532,38534],{"class":1004,"line":1054},[1002,38524,12742],{"class":1026},[1002,38526,1031],{"class":1030},[1002,38528,38529],{"class":1034},"'Bar'",[1002,38531,1251],{"class":1030},[1002,38533,6965],{"class":1015},[1002,38535,9772],{"class":1030},[1002,38537,38538,38540,38542,38545,38547,38549],{"class":1004,"line":1060},[1002,38539,34260],{"class":1026},[1002,38541,1031],{"class":1030},[1002,38543,38544],{"class":1034},"'Should return Hello world!'",[1002,38546,1251],{"class":1030},[1002,38548,6965],{"class":1015},[1002,38550,9772],{"class":1030},[1002,38552,38553,38556,38559,38561,38563,38565,38568,38571,38574],{"class":1004,"line":1272},[1002,38554,38555],{"class":1030}," assert.",[1002,38557,38558],{"class":1026},"equal",[1002,38560,1031],{"class":1030},[1002,38562,30895],{"class":1026},[1002,38564,1031],{"class":1030},[1002,38566,38567],{"class":1034},"'Hello'",[1002,38569,38570],{"class":1030},"), ",[1002,38572,38573],{"class":1034},"'Hello world!'",[1002,38575,1085],{"class":1030},[1002,38577,38578],{"class":1004,"line":1348},[1002,38579,19836],{"class":1030},[1002,38581,38582],{"class":1004,"line":1354},[1002,38583,2804],{"class":1030},[925,38585,38586],{},"The test should pass and our ES6 transpilation is working!",[953,38588,26561],{"id":26560},[925,38590,38591],{},"ES6 and beyond is the future. Babel enables us to write futuristic code now.",[925,38593,38594,38595,948],{},"The source code for this article can be found here on ",[933,38596,38599],{"href":38597,"rel":38598},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fes6-babel-boilerplate",[937],"GitHub",[1579,38601,38602],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":998,"searchDepth":1012,"depth":1012,"links":38604},[38605,38606,38607,38608,38609,38610],{"id":38101,"depth":1012,"text":38102},{"id":33149,"depth":1012,"text":34510},{"id":38193,"depth":1012,"text":38194},{"id":38241,"depth":1012,"text":38242},{"id":21237,"depth":1012,"text":38393},{"id":26560,"depth":1012,"text":26561},"2016-07-11","\u002Fimages\u002Fblog\u002Ffeatures\u002Fusing-es6-babel.jpg",{},{"title":882,"description":884},"blog\u002Fusing-es6-babel",[16,17,220],"NCEfs7lVV9i_wy-R3x67hqmnY-gPPgW1JciAseaPme8",{"id":38619,"title":310,"author":920,"body":38620,"date":39819,"description":312,"extension":1591,"image":39820,"meta":39821,"navigation":1050,"path":311,"seo":39822,"stem":39823,"tags":39824,"__hash__":39825},"blog\u002Fblog\u002Ffunctional-programming.md",{"type":922,"value":38621,"toc":39800},[38622,38626,38629,38637,38641,38644,38652,38658,38662,38669,38673,38676,38679,38682,38693,38746,38748,38751,38759,38820,38822,38825,38833,38887,38889,38892,38895,38958,38962,38965,38968,38971,38974,39038,39042,39045,39252,39256,39259,39262,39265,39269,39272,39479,39482,39659,39663,39666,39669,39724,39731,39734,39738,39741,39794,39797],[953,38623,38625],{"id":38624},"why-functional-programming","Why Functional Programming?",[925,38627,38628],{},"Abstract control flow and operations on data with functions in order to:",[1530,38630,38631,38634],{},[974,38632,38633],{},"Avoid side effects",[974,38635,38636],{},"Reduce mutation of state",[953,38638,38640],{"id":38639},"pure-functions","Pure Functions",[925,38642,38643],{},"Pure functions are different from impure functions because:",[1530,38645,38646,38649],{},[974,38647,38648],{},"It depends only on the input provided—and not on any hidden or external state that may change as a function’s evaluation proceeds or between function calls.",[974,38650,38651],{},"It does not inflict changes beyond its scope (like modifying a global object or a parameter reference).",[925,38653,38654],{},[963,38655],{"alt":38656,"src":38657},"Pure Function Equation","\u002Fimages\u002Fblog\u002F2016-06-30-functional-programming\u002Fpure-functions.png",[1655,38659,38661],{"id":38660},"referential-transparency","Referential Transparency",[925,38663,38664,38665,38668],{},"If a function consistently yields the same result on the same input, it is said to be ",[941,38666,38667],{},"Referentially Transparent"," (RT).",[1655,38670,38672],{"id":38671},"avoiding-loops","Avoiding Loops",[925,38674,38675],{},"Pure functional programs don’t mutate variables (like a loop counter) after they’ve been initialized. So avoid while, and do-while. Instead, we will take advantage of high-order functions—like: forEach, map, reduce, and filter—to abstract iteration schemes, which also help us remove a few if-else conditionals while we’re at it.",[1655,38677,8408],{"id":38678},"foreach",[925,38680,38681],{},"The forEach loop has the following advantages:",[1530,38683,38684,38687,38690],{},[974,38685,38686],{},"Declarative and easier to understand",[974,38688,38689],{},"Body being inside a function, it properly binds each value into the callback’s parameter.",[974,38691,38692],{},"Because of No. 2, it avoids scoping bugs.",[993,38694,38696],{"className":995,"code":38695,"language":997,"meta":998,"style":998},"[80, 90, 100].forEach(function (value) {\n console.log(value);\n});\n\u002F\u002F 80, 90, 100\n",[941,38697,38698,38729,38737,38741],{"__ignoreMap":998},[1002,38699,38700,38702,38705,38707,38710,38712,38714,38717,38719,38721,38723,38725,38727],{"class":1004,"line":1005},[1002,38701,31462],{"class":1030},[1002,38703,38704],{"class":1019},"80",[1002,38706,1251],{"class":1030},[1002,38708,38709],{"class":1019},"90",[1002,38711,1251],{"class":1030},[1002,38713,4791],{"class":1019},[1002,38715,38716],{"class":1030},"].",[1002,38718,8408],{"class":1026},[1002,38720,1031],{"class":1030},[1002,38722,6965],{"class":1015},[1002,38724,6513],{"class":1030},[1002,38726,5047],{"class":2378},[1002,38728,2382],{"class":1030},[1002,38730,38731,38733,38735],{"class":1004,"line":1012},[1002,38732,6977],{"class":1030},[1002,38734,2886],{"class":1026},[1002,38736,31248],{"class":1030},[1002,38738,38739],{"class":1004,"line":1047},[1002,38740,2804],{"class":1030},[1002,38742,38743],{"class":1004,"line":1054},[1002,38744,38745],{"class":1008},"\u002F\u002F 80, 90, 100\n",[1655,38747,19444],{"id":19444},[925,38749,38750],{},"The map function has the following advantages:",[1530,38752,38753,38756],{},[974,38754,38755],{},"Transforms an array contents into an array of similar length as the original.",[974,38757,38758],{},"Keeps the original array intact.",[993,38760,38762],{"className":995,"code":38761,"language":997,"meta":998,"style":998},"['a', 'b', 'c', 'd'].map(function (letter) {\n return letter.toUpperCase();\n});\n\u002F\u002F [\"A\", \"B\", \"C\", \"D\"]\n",[941,38763,38764,38799,38811,38815],{"__ignoreMap":998},[1002,38765,38766,38768,38770,38772,38774,38776,38779,38781,38784,38786,38788,38790,38792,38794,38797],{"class":1004,"line":1005},[1002,38767,31462],{"class":1030},[1002,38769,28315],{"class":1034},[1002,38771,1251],{"class":1030},[1002,38773,31566],{"class":1034},[1002,38775,1251],{"class":1030},[1002,38777,38778],{"class":1034},"'c'",[1002,38780,1251],{"class":1030},[1002,38782,38783],{"class":1034},"'d'",[1002,38785,38716],{"class":1030},[1002,38787,19444],{"class":1026},[1002,38789,1031],{"class":1030},[1002,38791,6965],{"class":1015},[1002,38793,6513],{"class":1030},[1002,38795,38796],{"class":2378},"letter",[1002,38798,2382],{"class":1030},[1002,38800,38801,38803,38806,38809],{"class":1004,"line":1012},[1002,38802,15066],{"class":1015},[1002,38804,38805],{"class":1030}," letter.",[1002,38807,38808],{"class":1026},"toUpperCase",[1002,38810,1428],{"class":1030},[1002,38812,38813],{"class":1004,"line":1047},[1002,38814,2804],{"class":1030},[1002,38816,38817],{"class":1004,"line":1054},[1002,38818,38819],{"class":1008},"\u002F\u002F [\"A\", \"B\", \"C\", \"D\"]\n",[1655,38821,8313],{"id":8313},[925,38823,38824],{},"The filter function has the following advantages:",[1530,38826,38827,38830],{},[974,38828,38829],{},"Transforms an array by mapping a predicate function(a function with a boolean return value) on to each element.",[974,38831,38832],{},"The returned array may contain a subset of the original values returned by the predicate.",[993,38834,38835],{"className":995,"code":38761,"language":997,"meta":998,"style":998},[941,38836,38837,38869,38879,38883],{"__ignoreMap":998},[1002,38838,38839,38841,38843,38845,38847,38849,38851,38853,38855,38857,38859,38861,38863,38865,38867],{"class":1004,"line":1005},[1002,38840,31462],{"class":1030},[1002,38842,28315],{"class":1034},[1002,38844,1251],{"class":1030},[1002,38846,31566],{"class":1034},[1002,38848,1251],{"class":1030},[1002,38850,38778],{"class":1034},[1002,38852,1251],{"class":1030},[1002,38854,38783],{"class":1034},[1002,38856,38716],{"class":1030},[1002,38858,19444],{"class":1026},[1002,38860,1031],{"class":1030},[1002,38862,6965],{"class":1015},[1002,38864,6513],{"class":1030},[1002,38866,38796],{"class":2378},[1002,38868,2382],{"class":1030},[1002,38870,38871,38873,38875,38877],{"class":1004,"line":1012},[1002,38872,15066],{"class":1015},[1002,38874,38805],{"class":1030},[1002,38876,38808],{"class":1026},[1002,38878,1428],{"class":1030},[1002,38880,38881],{"class":1004,"line":1047},[1002,38882,2804],{"class":1030},[1002,38884,38885],{"class":1004,"line":1054},[1002,38886,38819],{"class":1008},[1655,38888,32617],{"id":32617},[925,38890,38891],{},"The reduce function has the following advantages:",[925,38893,38894],{},"Can be used to fold or gather the contents of an array by compressing it into a single value.\nEach successive invocation is supplied the return value of the previous.\nSeems a combination of map and filter.",[993,38896,38898],{"className":995,"code":38897,"language":997,"meta":998,"style":998},"[1, 2, 3, 4].reduce(function (total, num) {\n return total + num;\n});\n\u002F\u002F 10\n",[941,38899,38900,38938,38950,38954],{"__ignoreMap":998},[1002,38901,38902,38904,38906,38908,38910,38912,38914,38916,38918,38920,38922,38924,38926,38928,38931,38933,38936],{"class":1004,"line":1005},[1002,38903,31462],{"class":1030},[1002,38905,6211],{"class":1019},[1002,38907,1251],{"class":1030},[1002,38909,5681],{"class":1019},[1002,38911,1251],{"class":1030},[1002,38913,2796],{"class":1019},[1002,38915,1251],{"class":1030},[1002,38917,3837],{"class":1019},[1002,38919,38716],{"class":1030},[1002,38921,32617],{"class":1026},[1002,38923,1031],{"class":1030},[1002,38925,6965],{"class":1015},[1002,38927,6513],{"class":1030},[1002,38929,38930],{"class":2378},"total",[1002,38932,1251],{"class":1030},[1002,38934,38935],{"class":2378},"num",[1002,38937,2382],{"class":1030},[1002,38939,38940,38942,38945,38947],{"class":1004,"line":1012},[1002,38941,15066],{"class":1015},[1002,38943,38944],{"class":1030}," total ",[1002,38946,5064],{"class":1015},[1002,38948,38949],{"class":1030}," num;\n",[1002,38951,38952],{"class":1004,"line":1047},[1002,38953,2804],{"class":1030},[1002,38955,38956],{"class":1004,"line":1054},[1002,38957,5755],{"class":1008},[953,38959,38961],{"id":38960},"function-abstractions","Function Abstractions",[925,38963,38964],{},"Functional programming provides very powerful abstractions that allow you to create functions from the definition of other functions or to augment the evaluation of existing functions.",[1655,38966,38967],{"id":38967},"currying",[925,38969,38970],{},"Currying is a technique that converts a multivariable function into a step-wise sequence of unary functions.",[925,38972,38973],{},"In other words, a function with parameters: f(a,b,c) is internally augmented to one that works on parameters one at a time: f(a) -> f(b) -> f(c)",[993,38975,38977],{"className":995,"code":38976,"language":997,"meta":998,"style":998},"var name = function(first) {\n return function(last) {\n console.log(first, last);\n }\n};\nname(‘John’)(’Smith’); \u002F\u002F John Smith\n",[941,38978,38979,38995,39009,39019,39024,39028],{"__ignoreMap":998},[1002,38980,38981,38983,38985,38987,38989,38991,38993],{"class":1004,"line":1005},[1002,38982,18311],{"class":1015},[1002,38984,18584],{"class":1026},[1002,38986,1023],{"class":1015},[1002,38988,8457],{"class":1015},[1002,38990,1031],{"class":1030},[1002,38992,6619],{"class":2378},[1002,38994,2382],{"class":1030},[1002,38996,38997,39000,39002,39004,39007],{"class":1004,"line":1012},[1002,38998,38999],{"class":1015}," return",[1002,39001,8457],{"class":1015},[1002,39003,1031],{"class":1030},[1002,39005,39006],{"class":2378},"last",[1002,39008,2382],{"class":1030},[1002,39010,39011,39014,39016],{"class":1004,"line":1047},[1002,39012,39013],{"class":1030}," console.",[1002,39015,2886],{"class":1026},[1002,39017,39018],{"class":1030},"(first, last);\n",[1002,39020,39021],{"class":1004,"line":1054},[1002,39022,39023],{"class":1030}," }\n",[1002,39025,39026],{"class":1004,"line":1060},[1002,39027,1517],{"class":1030},[1002,39029,39030,39032,39035],{"class":1004,"line":1272},[1002,39031,5911],{"class":1026},[1002,39033,39034],{"class":1030},"(‘John’)(’Smith’); ",[1002,39036,39037],{"class":1008},"\u002F\u002F John Smith\n",[1655,39039,39041],{"id":39040},"composition","Composition",[925,39043,39044],{},"Composition is the process used to group together the execution of simpler functions.",[993,39046,39048],{"className":995,"code":39047,"language":997,"meta":998,"style":998},"var compose = function () {\n var fns = arguments;\n\n return function (result) {\n for (var i = fns.length - 1; i > -1; i--) {\n result = fns[i].call(this, result);\n }\n\n return result;\n };\n};\nvar add = function (n) {\n return n + n;\n};\nvar multiply = function (n) {\n return n * n;\n};\n\ncompose(add, multiply)(4); \u002F\u002F 32\n",[941,39049,39050,39063,39077,39081,39093,39130,39148,39152,39156,39162,39166,39170,39186,39198,39202,39219,39229,39233,39237],{"__ignoreMap":998},[1002,39051,39052,39054,39057,39059,39061],{"class":1004,"line":1005},[1002,39053,18311],{"class":1015},[1002,39055,39056],{"class":1026}," compose",[1002,39058,1023],{"class":1015},[1002,39060,8457],{"class":1015},[1002,39062,9772],{"class":1030},[1002,39064,39065,39067,39070,39072,39075],{"class":1004,"line":1012},[1002,39066,28293],{"class":1015},[1002,39068,39069],{"class":1030}," fns ",[1002,39071,2393],{"class":1015},[1002,39073,39074],{"class":1019}," arguments",[1002,39076,1407],{"class":1030},[1002,39078,39079],{"class":1004,"line":1047},[1002,39080,1051],{"emptyLinePlaceholder":1050},[1002,39082,39083,39085,39087,39089,39091],{"class":1004,"line":1054},[1002,39084,15066],{"class":1015},[1002,39086,8457],{"class":1015},[1002,39088,6513],{"class":1030},[1002,39090,13068],{"class":2378},[1002,39092,2382],{"class":1030},[1002,39094,39095,39097,39099,39101,39103,39105,39108,39110,39113,39115,39117,39119,39121,39123,39125,39128],{"class":1004,"line":1060},[1002,39096,6841],{"class":1015},[1002,39098,6513],{"class":1030},[1002,39100,18311],{"class":1015},[1002,39102,6519],{"class":1030},[1002,39104,2393],{"class":1015},[1002,39106,39107],{"class":1030}," fns.",[1002,39109,5873],{"class":1019},[1002,39111,39112],{"class":1015}," -",[1002,39114,6246],{"class":1019},[1002,39116,6536],{"class":1030},[1002,39118,19171],{"class":1015},[1002,39120,39112],{"class":1015},[1002,39122,6211],{"class":1019},[1002,39124,16128],{"class":1030},[1002,39126,39127],{"class":1015},"--",[1002,39129,2382],{"class":1030},[1002,39131,39132,39134,39136,39139,39141,39143,39145],{"class":1004,"line":1272},[1002,39133,12966],{"class":1030},[1002,39135,2393],{"class":1015},[1002,39137,39138],{"class":1030}," fns[i].",[1002,39140,8426],{"class":1026},[1002,39142,1031],{"class":1030},[1002,39144,3455],{"class":1019},[1002,39146,39147],{"class":1030},", result);\n",[1002,39149,39150],{"class":1004,"line":1348},[1002,39151,2014],{"class":1030},[1002,39153,39154],{"class":1004,"line":1354},[1002,39155,1051],{"emptyLinePlaceholder":1050},[1002,39157,39158,39160],{"class":1004,"line":1360},[1002,39159,2687],{"class":1015},[1002,39161,17691],{"class":1030},[1002,39163,39164],{"class":1004,"line":1366},[1002,39165,15113],{"class":1030},[1002,39167,39168],{"class":1004,"line":1946},[1002,39169,1517],{"class":1030},[1002,39171,39172,39174,39176,39178,39180,39182,39184],{"class":1004,"line":1956},[1002,39173,18311],{"class":1015},[1002,39175,27368],{"class":1026},[1002,39177,1023],{"class":1015},[1002,39179,8457],{"class":1015},[1002,39181,6513],{"class":1030},[1002,39183,25415],{"class":2378},[1002,39185,2382],{"class":1030},[1002,39187,39188,39190,39193,39195],{"class":1004,"line":1961},[1002,39189,15066],{"class":1015},[1002,39191,39192],{"class":1030}," n ",[1002,39194,5064],{"class":1015},[1002,39196,39197],{"class":1030}," n;\n",[1002,39199,39200],{"class":1004,"line":1971},[1002,39201,1517],{"class":1030},[1002,39203,39204,39206,39209,39211,39213,39215,39217],{"class":1004,"line":1980},[1002,39205,18311],{"class":1015},[1002,39207,39208],{"class":1026}," multiply",[1002,39210,1023],{"class":1015},[1002,39212,8457],{"class":1015},[1002,39214,6513],{"class":1030},[1002,39216,25415],{"class":2378},[1002,39218,2382],{"class":1030},[1002,39220,39221,39223,39225,39227],{"class":1004,"line":1985},[1002,39222,15066],{"class":1015},[1002,39224,39192],{"class":1030},[1002,39226,4703],{"class":1015},[1002,39228,39197],{"class":1030},[1002,39230,39231],{"class":1004,"line":1995},[1002,39232,1517],{"class":1030},[1002,39234,39235],{"class":1004,"line":2006},[1002,39236,1051],{"emptyLinePlaceholder":1050},[1002,39238,39239,39242,39245,39247,39249],{"class":1004,"line":2011},[1002,39240,39241],{"class":1026},"compose",[1002,39243,39244],{"class":1030},"(add, multiply)(",[1002,39246,3837],{"class":1019},[1002,39248,18256],{"class":1030},[1002,39250,39251],{"class":1008},"\u002F\u002F 32\n",[953,39253,39255],{"id":39254},"functional-data-types","Functional Data Types",[925,39257,39258],{},"Currying and composition provide abstractions over functions—the drivers for behavior in your application.",[925,39260,39261],{},"Functional data types like functors and monads provide abstractions over the data.",[925,39263,39264],{},"Functional data types part from the notion of mapping functions onto containers.",[953,39266,39268],{"id":39267},"containerizing","Containerizing",[925,39270,39271],{},"The idea behind containerizing is very simple but has far-reaching applications. The goal is to place values in a container. By doing this, we hope to create a logical barrier that promotes transforming values immutably and side-effect free.",[993,39273,39275],{"className":995,"code":39274,"language":997,"meta":998,"style":998},"function getWords(val) {\n return val.split(' ');\n}\n\nfunction getSize(array) {\n return array.length;\n}\n\nfunction Wrapper(val) {\n this.val = val;\n}\n\nWrapper.prototype.map = function (f) {\n return f(this.val);\n};\n\nvar wrap = (val) => new Wrapper(val);\n\nwrap('hello world').map(getWords).map(getSize); \u002F\u002F [5, 5]\n",[941,39276,39277,39291,39306,39310,39314,39328,39339,39343,39347,39360,39372,39376,39380,39404,39418,39422,39426,39450,39454],{"__ignoreMap":998},[1002,39278,39279,39281,39284,39286,39289],{"class":1004,"line":1005},[1002,39280,6965],{"class":1015},[1002,39282,39283],{"class":1026}," getWords",[1002,39285,1031],{"class":1030},[1002,39287,39288],{"class":2378},"val",[1002,39290,2382],{"class":1030},[1002,39292,39293,39295,39298,39300,39302,39304],{"class":1004,"line":1012},[1002,39294,15066],{"class":1015},[1002,39296,39297],{"class":1030}," val.",[1002,39299,18918],{"class":1026},[1002,39301,1031],{"class":1030},[1002,39303,6357],{"class":1034},[1002,39305,1085],{"class":1030},[1002,39307,39308],{"class":1004,"line":1047},[1002,39309,1170],{"class":1030},[1002,39311,39312],{"class":1004,"line":1054},[1002,39313,1051],{"emptyLinePlaceholder":1050},[1002,39315,39316,39318,39321,39323,39326],{"class":1004,"line":1060},[1002,39317,6965],{"class":1015},[1002,39319,39320],{"class":1026}," getSize",[1002,39322,1031],{"class":1030},[1002,39324,39325],{"class":2378},"array",[1002,39327,2382],{"class":1030},[1002,39329,39330,39332,39335,39337],{"class":1004,"line":1272},[1002,39331,15066],{"class":1015},[1002,39333,39334],{"class":1030}," array.",[1002,39336,5873],{"class":1019},[1002,39338,1407],{"class":1030},[1002,39340,39341],{"class":1004,"line":1348},[1002,39342,1170],{"class":1030},[1002,39344,39345],{"class":1004,"line":1354},[1002,39346,1051],{"emptyLinePlaceholder":1050},[1002,39348,39349,39351,39354,39356,39358],{"class":1004,"line":1360},[1002,39350,6965],{"class":1015},[1002,39352,39353],{"class":1026}," Wrapper",[1002,39355,1031],{"class":1030},[1002,39357,39288],{"class":2378},[1002,39359,2382],{"class":1030},[1002,39361,39362,39365,39368,39370],{"class":1004,"line":1366},[1002,39363,39364],{"class":1019}," this",[1002,39366,39367],{"class":1030},".val ",[1002,39369,2393],{"class":1015},[1002,39371,17308],{"class":1030},[1002,39373,39374],{"class":1004,"line":1946},[1002,39375,1170],{"class":1030},[1002,39377,39378],{"class":1004,"line":1956},[1002,39379,1051],{"emptyLinePlaceholder":1050},[1002,39381,39382,39385,39387,39389,39391,39393,39395,39397,39399,39402],{"class":1004,"line":1961},[1002,39383,39384],{"class":1019},"Wrapper",[1002,39386,948],{"class":1030},[1002,39388,3894],{"class":1019},[1002,39390,948],{"class":1030},[1002,39392,19444],{"class":1026},[1002,39394,1023],{"class":1015},[1002,39396,8457],{"class":1015},[1002,39398,6513],{"class":1030},[1002,39400,39401],{"class":2378},"f",[1002,39403,2382],{"class":1030},[1002,39405,39406,39408,39411,39413,39415],{"class":1004,"line":1971},[1002,39407,15066],{"class":1015},[1002,39409,39410],{"class":1026}," f",[1002,39412,1031],{"class":1030},[1002,39414,3455],{"class":1019},[1002,39416,39417],{"class":1030},".val);\n",[1002,39419,39420],{"class":1004,"line":1980},[1002,39421,1517],{"class":1030},[1002,39423,39424],{"class":1004,"line":1985},[1002,39425,1051],{"emptyLinePlaceholder":1050},[1002,39427,39428,39430,39433,39435,39437,39439,39441,39443,39445,39447],{"class":1004,"line":1995},[1002,39429,18311],{"class":1015},[1002,39431,39432],{"class":1026}," wrap",[1002,39434,1023],{"class":1015},[1002,39436,6513],{"class":1030},[1002,39438,39288],{"class":2378},[1002,39440,5876],{"class":1030},[1002,39442,15497],{"class":1015},[1002,39444,2690],{"class":1015},[1002,39446,39353],{"class":1026},[1002,39448,39449],{"class":1030},"(val);\n",[1002,39451,39452],{"class":1004,"line":2006},[1002,39453,1051],{"emptyLinePlaceholder":1050},[1002,39455,39456,39459,39461,39464,39466,39468,39471,39473,39476],{"class":1004,"line":2011},[1002,39457,39458],{"class":1026},"wrap",[1002,39460,1031],{"class":1030},[1002,39462,39463],{"class":1034},"'hello world'",[1002,39465,1539],{"class":1030},[1002,39467,19444],{"class":1026},[1002,39469,39470],{"class":1030},"(getWords).",[1002,39472,19444],{"class":1026},[1002,39474,39475],{"class":1030},"(getSize); ",[1002,39477,39478],{"class":1008},"\u002F\u002F [5, 5]\n",[925,39480,39481],{},"In ES6, we can do the same like this:",[993,39483,39485],{"className":995,"code":39484,"language":997,"meta":998,"style":998},"const getWords = (val) => val.split(' ');\n\nconst getSize = (array) => array.length;\n\nclass Wrapper {\n constructor(val) {\n this.val = val;\n }\n\n map(f) {\n return f(this.val);\n }\n}\n\nvar wrap = (val) => new Wrapper(val);\n\nwrap('hello world').map(getWords).map(getSize);\n",[941,39486,39487,39513,39517,39539,39543,39551,39561,39571,39575,39579,39590,39602,39606,39610,39614,39636,39640],{"__ignoreMap":998},[1002,39488,39489,39491,39493,39495,39497,39499,39501,39503,39505,39507,39509,39511],{"class":1004,"line":1005},[1002,39490,1016],{"class":1015},[1002,39492,39283],{"class":1026},[1002,39494,1023],{"class":1015},[1002,39496,6513],{"class":1030},[1002,39498,39288],{"class":2378},[1002,39500,5876],{"class":1030},[1002,39502,15497],{"class":1015},[1002,39504,39297],{"class":1030},[1002,39506,18918],{"class":1026},[1002,39508,1031],{"class":1030},[1002,39510,6357],{"class":1034},[1002,39512,1085],{"class":1030},[1002,39514,39515],{"class":1004,"line":1012},[1002,39516,1051],{"emptyLinePlaceholder":1050},[1002,39518,39519,39521,39523,39525,39527,39529,39531,39533,39535,39537],{"class":1004,"line":1047},[1002,39520,1016],{"class":1015},[1002,39522,39320],{"class":1026},[1002,39524,1023],{"class":1015},[1002,39526,6513],{"class":1030},[1002,39528,39325],{"class":2378},[1002,39530,5876],{"class":1030},[1002,39532,15497],{"class":1015},[1002,39534,39334],{"class":1030},[1002,39536,5873],{"class":1019},[1002,39538,1407],{"class":1030},[1002,39540,39541],{"class":1004,"line":1054},[1002,39542,1051],{"emptyLinePlaceholder":1050},[1002,39544,39545,39547,39549],{"class":1004,"line":1060},[1002,39546,2363],{"class":1015},[1002,39548,39353],{"class":1026},[1002,39550,1457],{"class":1030},[1002,39552,39553,39555,39557,39559],{"class":1004,"line":1272},[1002,39554,2373],{"class":1015},[1002,39556,1031],{"class":1030},[1002,39558,39288],{"class":2378},[1002,39560,2382],{"class":1030},[1002,39562,39563,39565,39567,39569],{"class":1004,"line":1348},[1002,39564,2387],{"class":1019},[1002,39566,39367],{"class":1030},[1002,39568,2393],{"class":1015},[1002,39570,17308],{"class":1030},[1002,39572,39573],{"class":1004,"line":1354},[1002,39574,1269],{"class":1030},[1002,39576,39577],{"class":1004,"line":1360},[1002,39578,1051],{"emptyLinePlaceholder":1050},[1002,39580,39581,39584,39586,39588],{"class":1004,"line":1366},[1002,39582,39583],{"class":1026}," map",[1002,39585,1031],{"class":1030},[1002,39587,39401],{"class":2378},[1002,39589,2382],{"class":1030},[1002,39591,39592,39594,39596,39598,39600],{"class":1004,"line":1946},[1002,39593,2687],{"class":1015},[1002,39595,39410],{"class":1026},[1002,39597,1031],{"class":1030},[1002,39599,3455],{"class":1019},[1002,39601,39417],{"class":1030},[1002,39603,39604],{"class":1004,"line":1956},[1002,39605,1269],{"class":1030},[1002,39607,39608],{"class":1004,"line":1961},[1002,39609,1170],{"class":1030},[1002,39611,39612],{"class":1004,"line":1971},[1002,39613,1051],{"emptyLinePlaceholder":1050},[1002,39615,39616,39618,39620,39622,39624,39626,39628,39630,39632,39634],{"class":1004,"line":1980},[1002,39617,18311],{"class":1015},[1002,39619,39432],{"class":1026},[1002,39621,1023],{"class":1015},[1002,39623,6513],{"class":1030},[1002,39625,39288],{"class":2378},[1002,39627,5876],{"class":1030},[1002,39629,15497],{"class":1015},[1002,39631,2690],{"class":1015},[1002,39633,39353],{"class":1026},[1002,39635,39449],{"class":1030},[1002,39637,39638],{"class":1004,"line":1985},[1002,39639,1051],{"emptyLinePlaceholder":1050},[1002,39641,39642,39644,39646,39648,39650,39652,39654,39656],{"class":1004,"line":1995},[1002,39643,39458],{"class":1026},[1002,39645,1031],{"class":1030},[1002,39647,39463],{"class":1034},[1002,39649,1539],{"class":1030},[1002,39651,19444],{"class":1026},[1002,39653,39470],{"class":1030},[1002,39655,19444],{"class":1026},[1002,39657,39658],{"class":1030},"(getSize);\n",[953,39660,39662],{"id":39661},"functors","Functors",[925,39664,39665],{},"The array map above is a functor since you can map a function onto its elements and the result is again an array.",[925,39667,39668],{},"A functor is nothing more than a type that implements a mapping function with the purpose of lifting values into a container.",[993,39670,39672],{"className":995,"code":39671,"language":997,"meta":998,"style":998},"F.prototype.map = function (f) {\n return F.of(f(this.val));\n};\n",[941,39673,39674,39697,39720],{"__ignoreMap":998},[1002,39675,39676,39679,39681,39683,39685,39687,39689,39691,39693,39695],{"class":1004,"line":1005},[1002,39677,39678],{"class":1019},"F",[1002,39680,948],{"class":1030},[1002,39682,3894],{"class":1019},[1002,39684,948],{"class":1030},[1002,39686,19444],{"class":1026},[1002,39688,1023],{"class":1015},[1002,39690,8457],{"class":1015},[1002,39692,6513],{"class":1030},[1002,39694,39401],{"class":2378},[1002,39696,2382],{"class":1030},[1002,39698,39699,39701,39704,39706,39709,39711,39713,39715,39717],{"class":1004,"line":1012},[1002,39700,15066],{"class":1015},[1002,39702,39703],{"class":1019}," F",[1002,39705,948],{"class":1030},[1002,39707,39708],{"class":1026},"of",[1002,39710,1031],{"class":1030},[1002,39712,39401],{"class":1026},[1002,39714,1031],{"class":1030},[1002,39716,3455],{"class":1019},[1002,39718,39719],{"class":1030},".val));\n",[1002,39721,39722],{"class":1004,"line":1047},[1002,39723,1517],{"class":1030},[925,39725,39726,39727,39730],{},"The function ",[941,39728,39729],{},"F.of"," is a way to instantiate the data type without having to call new.",[925,39732,39733],{},"Functors are important because they introduce the idea of a function “reaching” into the container, modifying it, and placing the value “back into” it.",[953,39735,39737],{"id":39736},"monads","Monads",[925,39739,39740],{},"Monads are data types similar to functors, but they also define the rules by which values are contained within them. The monad type, as such, is an abstract data type with the following interface:",[39742,39743,39744,39758],"table",{},[39745,39746,39747],"thead",{},[39748,39749,39750,39755],"tr",{},[39751,39752,39754],"th",{"align":39753},"left","Interface",[39751,39756,39757],{"align":39753},"Description",[39759,39760,39761,39770,39778,39786],"tbody",{},[39748,39762,39763,39767],{},[39764,39765,39766],"td",{"align":39753},"Bind function",[39764,39768,39769],{"align":39753},"Used for chaining operations on monadic values, called map",[39748,39771,39772,39775],{},[39764,39773,39774],{"align":39753},"Join operation",[39764,39776,39777],{"align":39753},"Used to flatten layers of monadic structures into one. Important when used in the composition of functions that return monadic types",[39748,39779,39780,39783],{},[39764,39781,39782],{"align":39753},"Type constructor",[39764,39784,39785],{"align":39753},"Used for inserting a value into a monadic structure. Typically called of or fromNullable",[39748,39787,39788,39791],{},[39764,39789,39790],{"align":39753},"Unit function",[39764,39792,39793],{"align":39753},"Used for creating monadic types",[925,39795,39796],{},"Monadic types are concrete implementations of this interface. In practical programming problems, monadic types are frequently seen to abstract and consolidate null checks and error handling. The two most frequently used are the Maybe and Either types.",[1579,39798,39799],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":39801},[39802,39803,39811,39815,39816,39817,39818],{"id":38624,"depth":1012,"text":38625},{"id":38639,"depth":1012,"text":38640,"children":39804},[39805,39806,39807,39808,39809,39810],{"id":38660,"depth":1047,"text":38661},{"id":38671,"depth":1047,"text":38672},{"id":38678,"depth":1047,"text":8408},{"id":19444,"depth":1047,"text":19444},{"id":8313,"depth":1047,"text":8313},{"id":32617,"depth":1047,"text":32617},{"id":38960,"depth":1012,"text":38961,"children":39812},[39813,39814],{"id":38967,"depth":1047,"text":38967},{"id":39040,"depth":1047,"text":39041},{"id":39254,"depth":1012,"text":39255},{"id":39267,"depth":1012,"text":39268},{"id":39661,"depth":1012,"text":39662},{"id":39736,"depth":1012,"text":39737},"2016-06-30","\u002Fimages\u002Fblog\u002Ffeatures\u002Ffunctional-programming.jpg",{},{"title":310,"description":312},"blog\u002Ffunctional-programming",[16,17],"XO5rsTLFWuf3JPQhxPfsZcO1ol9YlkaZRROIhjHs9Ow",{"id":39827,"title":683,"author":920,"body":39828,"date":40983,"description":685,"extension":1591,"image":40984,"meta":40985,"navigation":1050,"path":684,"seo":40986,"stem":40987,"tags":40988,"__hash__":40989},"blog\u002Fblog\u002Freact-nightwatch.md",{"type":922,"value":39829,"toc":40973},[39830,39833,39850,39853,39855,39860,39862,39872,39878,39894,39900,39916,39922,39932,39947,39951,39957,39971,39977,40046,40049,40074,40077,40091,40094,40098,40105,40395,40398,40429,40441,40448,40452,40459,40498,40501,40504,40507,40536,40548,40643,40646,40664,40671,40674,40684,40891,40895,40898,40918,40924,40951,40954,40958,40961,40970],[925,39831,39832],{},"The reasons nightwatch is your best choice can be decided upon the reasons given below:",[1530,39834,39835,39838,39844,39847],{},[974,39836,39837],{},"Written in Node.js and integrates well with front-end stack.",[974,39839,39840,39841,948],{},"Has a built-in test runner, where you can run your tests in ",[928,39842,39843],{},"parallel",[974,39845,39846],{},"Easier to integrate with CI environments like Jenkins or TeamCity",[974,39848,39849],{},"Test reports & screenshots",[925,39851,39852],{},"In this article, I’ll guide you through the setup process.",[953,39854,32993],{"id":32992},[925,39856,32996,39857,33002],{},[933,39858,33001],{"href":32999,"rel":39859},[937],[925,39861,33005],{},[993,39863,39864],{"className":1797,"code":33008,"language":1799,"meta":998,"style":998},[941,39865,39866],{"__ignoreMap":998},[1002,39867,39868,39870],{"class":1004,"line":1005},[1002,39869,27346],{"class":1026},[1002,39871,33017],{"class":1034},[925,39873,39874,39875,948],{},"Next, we need to install ",[941,39876,39877],{},"nightwatch",[993,39879,39881],{"className":1797,"code":39880,"language":1799,"meta":998,"style":998},"npm install nightwatch ––save–dev\n",[941,39882,39883],{"__ignoreMap":998},[1002,39884,39885,39887,39889,39892],{"class":1004,"line":1005},[1002,39886,27346],{"class":1026},[1002,39888,27349],{"class":1034},[1002,39890,39891],{"class":1034}," nightwatch",[1002,39893,33085],{"class":1034},[925,39895,39896,39897,948],{},"Now, in order to run tests, we need to download the ",[941,39898,39899],{},"Selenium standalone server",[993,39901,39903],{"className":1797,"code":39902,"language":1799,"meta":998,"style":998},"npm install selenium-download ––save–dev\n",[941,39904,39905],{"__ignoreMap":998},[1002,39906,39907,39909,39911,39914],{"class":1004,"line":1005},[1002,39908,27346],{"class":1026},[1002,39910,27349],{"class":1034},[1002,39912,39913],{"class":1034}," selenium-download",[1002,39915,33085],{"class":1034},[925,39917,39918,39919,33813],{},"We also need to paste the line below into the ",[941,39920,39921],{},"selenium-download.js",[925,39923,39924,39925,39927,39928,39931],{},"Add the following entry to your ",[941,39926,1102],{}," file’s ",[941,39929,39930],{},"scripts"," section.",[993,39933,39935],{"className":1120,"code":39934,"language":1122,"meta":998,"style":998},"\"test\": \".\u002Fnode_modules\u002F.bin\u002Fnightwatch\"\n",[941,39936,39937],{"__ignoreMap":998},[1002,39938,39939,39942,39944],{"class":1004,"line":1005},[1002,39940,39941],{"class":1034},"\"test\"",[1002,39943,1137],{"class":1030},[1002,39945,39946],{"class":1034},"\".\u002Fnode_modules\u002F.bin\u002Fnightwatch\"\n",[1655,39948,39950],{"id":39949},"selenium","Selenium",[925,39952,39953,39954,39956],{},"To download the ",[941,39955,39899],{},", run the following command in the command line:",[993,39958,39959],{"className":1797,"code":39902,"language":1799,"meta":998,"style":998},[941,39960,39961],{"__ignoreMap":998},[1002,39962,39963,39965,39967,39969],{"class":1004,"line":1005},[1002,39964,27346],{"class":1026},[1002,39966,27349],{"class":1034},[1002,39968,39913],{"class":1034},[1002,39970,33085],{"class":1034},[925,39972,39973,39974,39976],{},"Now create a file called ",[941,39975,39921],{}," and paste the line of code below:",[993,39978,39980],{"className":995,"code":39979,"language":997,"meta":998,"style":998},"var selenium = require('selenium-download');\nselenium.ensure('.\u002Fbin', function (error) {\n if (error) {\n return callback(error);\n }\n});\n",[941,39981,39982,40000,40023,40029,40038,40042],{"__ignoreMap":998},[1002,39983,39984,39986,39989,39991,39993,39995,39998],{"class":1004,"line":1005},[1002,39985,18311],{"class":1015},[1002,39987,39988],{"class":1030}," selenium ",[1002,39990,2393],{"class":1015},[1002,39992,1027],{"class":1026},[1002,39994,1031],{"class":1030},[1002,39996,39997],{"class":1034},"'selenium-download'",[1002,39999,1085],{"class":1030},[1002,40001,40002,40005,40008,40010,40013,40015,40017,40019,40021],{"class":1004,"line":1012},[1002,40003,40004],{"class":1030},"selenium.",[1002,40006,40007],{"class":1026},"ensure",[1002,40009,1031],{"class":1030},[1002,40011,40012],{"class":1034},"'.\u002Fbin'",[1002,40014,1251],{"class":1030},[1002,40016,6965],{"class":1015},[1002,40018,6513],{"class":1030},[1002,40020,25064],{"class":2378},[1002,40022,2382],{"class":1030},[1002,40024,40025,40027],{"class":1004,"line":1047},[1002,40026,19971],{"class":1015},[1002,40028,25090],{"class":1030},[1002,40030,40031,40033,40035],{"class":1004,"line":1054},[1002,40032,2687],{"class":1015},[1002,40034,31007],{"class":1026},[1002,40036,40037],{"class":1030},"(error);\n",[1002,40039,40040],{"class":1004,"line":1060},[1002,40041,1269],{"class":1030},[1002,40043,40044],{"class":1004,"line":1272},[1002,40045,2804],{"class":1030},[925,40047,40048],{},"We will also add a scripts command to run the scripts.",[993,40050,40052],{"className":1120,"code":40051,"language":1122,"meta":998,"style":998},"\"scripts\": {\n \"setup\": \"node selenium-download.js\"\n}\n",[941,40053,40054,40060,40070],{"__ignoreMap":998},[1002,40055,40056,40058],{"class":1004,"line":1005},[1002,40057,38257],{"class":1034},[1002,40059,15354],{"class":1030},[1002,40061,40062,40065,40067],{"class":1004,"line":1012},[1002,40063,40064],{"class":1019}," \"setup\"",[1002,40066,1137],{"class":1030},[1002,40068,40069],{"class":1034},"\"node selenium-download.js\"\n",[1002,40071,40072],{"class":1004,"line":1047},[1002,40073,1170],{"class":1030},[925,40075,40076],{},"Now you run the following command in the command line:",[993,40078,40080],{"className":1797,"code":40079,"language":1799,"meta":998,"style":998},"npm run setup\n",[941,40081,40082],{"__ignoreMap":998},[1002,40083,40084,40086,40088],{"class":1004,"line":1005},[1002,40085,27346],{"class":1026},[1002,40087,18968],{"class":1034},[1002,40089,40090],{"class":1034}," setup\n",[925,40092,40093],{},"This will download the latest version of selenium.",[953,40095,40097],{"id":40096},"configuration","Configuration",[925,40099,40100,40101,40104],{},"In order to configure Nightwatch, we need to create a ",[941,40102,40103],{},"nightwatch.json"," as the file for the test runs.",[993,40106,40108],{"className":995,"code":40107,"language":997,"meta":998,"style":998},"{\n \"src_folders\": [\"tests\"],\n \"output_folder\": \"reports\",\n \"custom_commands_path\": \"\",\n \"custom_assertions_path\": \"\",\n \"page_objects_path\": \"pages\",\n \"globals_path\": \"globals.js\",\n\n \"selenium\": {\n \"start_process\": true,\n \"server_path\": \".\u002Fbin\u002Fselenium.jar\",\n \"log_path\": \".\u002Freports\",\n \"host\": \"127.0.0.1\",\n \"port\": 4444,\n \"cli_args\": {\n \"webdriver.chrome.driver\": \".\u002Fbin\u002Fchromedriver\"\n }\n },\n \"test_settings\": {\n \"default\": {\n \"launch_url\": \"\",\n \"selenium_port\": 4444,\n \"selenium_host\": \"localhost\",\n \"silent\": true,\n \"desiredCapabilities\": {\n \"browserName\": \"chrome\",\n \"javascriptEnabled\": true,\n \"acceptSslCerts\": true\n }\n }\n }\n}\n",[941,40109,40110,40114,40126,40138,40150,40161,40173,40185,40189,40196,40207,40219,40231,40243,40255,40262,40272,40276,40280,40287,40294,40305,40316,40328,40339,40346,40358,40369,40379,40383,40387,40391],{"__ignoreMap":998},[1002,40111,40112],{"class":1004,"line":1005},[1002,40113,1129],{"class":1030},[1002,40115,40116,40119,40121,40124],{"class":1004,"line":1012},[1002,40117,40118],{"class":1034}," \"src_folders\"",[1002,40120,1201],{"class":1030},[1002,40122,40123],{"class":1034},"\"tests\"",[1002,40125,1903],{"class":1030},[1002,40127,40128,40131,40133,40136],{"class":1004,"line":1047},[1002,40129,40130],{"class":1034}," \"output_folder\"",[1002,40132,1137],{"class":1030},[1002,40134,40135],{"class":1034},"\"reports\"",[1002,40137,1143],{"class":1030},[1002,40139,40140,40143,40145,40148],{"class":1004,"line":1054},[1002,40141,40142],{"class":1034}," \"custom_commands_path\"",[1002,40144,1137],{"class":1030},[1002,40146,40147],{"class":1034},"\"\"",[1002,40149,1143],{"class":1030},[1002,40151,40152,40155,40157,40159],{"class":1004,"line":1060},[1002,40153,40154],{"class":1034}," \"custom_assertions_path\"",[1002,40156,1137],{"class":1030},[1002,40158,40147],{"class":1034},[1002,40160,1143],{"class":1030},[1002,40162,40163,40166,40168,40171],{"class":1004,"line":1272},[1002,40164,40165],{"class":1034}," \"page_objects_path\"",[1002,40167,1137],{"class":1030},[1002,40169,40170],{"class":1034},"\"pages\"",[1002,40172,1143],{"class":1030},[1002,40174,40175,40178,40180,40183],{"class":1004,"line":1348},[1002,40176,40177],{"class":1034}," \"globals_path\"",[1002,40179,1137],{"class":1030},[1002,40181,40182],{"class":1034},"\"globals.js\"",[1002,40184,1143],{"class":1030},[1002,40186,40187],{"class":1004,"line":1354},[1002,40188,1051],{"emptyLinePlaceholder":1050},[1002,40190,40191,40194],{"class":1004,"line":1360},[1002,40192,40193],{"class":1034}," \"selenium\"",[1002,40195,15354],{"class":1030},[1002,40197,40198,40201,40203,40205],{"class":1004,"line":1366},[1002,40199,40200],{"class":1034}," \"start_process\"",[1002,40202,1137],{"class":1030},[1002,40204,17397],{"class":1019},[1002,40206,1143],{"class":1030},[1002,40208,40209,40212,40214,40217],{"class":1004,"line":1946},[1002,40210,40211],{"class":1034}," \"server_path\"",[1002,40213,1137],{"class":1030},[1002,40215,40216],{"class":1034},"\".\u002Fbin\u002Fselenium.jar\"",[1002,40218,1143],{"class":1030},[1002,40220,40221,40224,40226,40229],{"class":1004,"line":1956},[1002,40222,40223],{"class":1034}," \"log_path\"",[1002,40225,1137],{"class":1030},[1002,40227,40228],{"class":1034},"\".\u002Freports\"",[1002,40230,1143],{"class":1030},[1002,40232,40233,40236,40238,40241],{"class":1004,"line":1961},[1002,40234,40235],{"class":1034}," \"host\"",[1002,40237,1137],{"class":1030},[1002,40239,40240],{"class":1034},"\"127.0.0.1\"",[1002,40242,1143],{"class":1030},[1002,40244,40245,40248,40250,40253],{"class":1004,"line":1971},[1002,40246,40247],{"class":1034}," \"port\"",[1002,40249,1137],{"class":1030},[1002,40251,40252],{"class":1019},"4444",[1002,40254,1143],{"class":1030},[1002,40256,40257,40260],{"class":1004,"line":1980},[1002,40258,40259],{"class":1034}," \"cli_args\"",[1002,40261,15354],{"class":1030},[1002,40263,40264,40267,40269],{"class":1004,"line":1985},[1002,40265,40266],{"class":1034}," \"webdriver.chrome.driver\"",[1002,40268,1137],{"class":1030},[1002,40270,40271],{"class":1034},"\".\u002Fbin\u002Fchromedriver\"\n",[1002,40273,40274],{"class":1004,"line":1995},[1002,40275,2014],{"class":1030},[1002,40277,40278],{"class":1004,"line":2006},[1002,40279,1502],{"class":1030},[1002,40281,40282,40285],{"class":1004,"line":2011},[1002,40283,40284],{"class":1034}," \"test_settings\"",[1002,40286,15354],{"class":1030},[1002,40288,40289,40292],{"class":1004,"line":2017},[1002,40290,40291],{"class":1034}," \"default\"",[1002,40293,15354],{"class":1030},[1002,40295,40296,40299,40301,40303],{"class":1004,"line":2022},[1002,40297,40298],{"class":1034}," \"launch_url\"",[1002,40300,1137],{"class":1030},[1002,40302,40147],{"class":1034},[1002,40304,1143],{"class":1030},[1002,40306,40307,40310,40312,40314],{"class":1004,"line":2442},[1002,40308,40309],{"class":1034}," \"selenium_port\"",[1002,40311,1137],{"class":1030},[1002,40313,40252],{"class":1019},[1002,40315,1143],{"class":1030},[1002,40317,40318,40321,40323,40326],{"class":1004,"line":2466},[1002,40319,40320],{"class":1034}," \"selenium_host\"",[1002,40322,1137],{"class":1030},[1002,40324,40325],{"class":1034},"\"localhost\"",[1002,40327,1143],{"class":1030},[1002,40329,40330,40333,40335,40337],{"class":1004,"line":2471},[1002,40331,40332],{"class":1034}," \"silent\"",[1002,40334,1137],{"class":1030},[1002,40336,17397],{"class":1019},[1002,40338,1143],{"class":1030},[1002,40340,40341,40344],{"class":1004,"line":2476},[1002,40342,40343],{"class":1034}," \"desiredCapabilities\"",[1002,40345,15354],{"class":1030},[1002,40347,40348,40351,40353,40356],{"class":1004,"line":2481},[1002,40349,40350],{"class":1034}," \"browserName\"",[1002,40352,1137],{"class":1030},[1002,40354,40355],{"class":1034},"\"chrome\"",[1002,40357,1143],{"class":1030},[1002,40359,40360,40363,40365,40367],{"class":1004,"line":2491},[1002,40361,40362],{"class":1034}," \"javascriptEnabled\"",[1002,40364,1137],{"class":1030},[1002,40366,17397],{"class":1019},[1002,40368,1143],{"class":1030},[1002,40370,40371,40374,40376],{"class":1004,"line":2502},[1002,40372,40373],{"class":1034}," \"acceptSslCerts\"",[1002,40375,1137],{"class":1030},[1002,40377,40378],{"class":1019},"true\n",[1002,40380,40381],{"class":1004,"line":2513},[1002,40382,1351],{"class":1030},[1002,40384,40385],{"class":1004,"line":2535},[1002,40386,2014],{"class":1030},[1002,40388,40389],{"class":1004,"line":2557},[1002,40390,1269],{"class":1030},[1002,40392,40393],{"class":1004,"line":2562},[1002,40394,1170],{"class":1030},[925,40396,40397],{},"Let’s have a close look at this configuaration file.",[1530,40399,40400,40406,40412,40418,40424],{},[974,40401,40402,40405],{},[941,40403,40404],{},"src_folders"," – The tests will be in this array of folders",[974,40407,40408,40411],{},[941,40409,40410],{},"out_folder"," – Test artifacts folder. (Reports, logs and screenshots)",[974,40413,40414,40417],{},[941,40415,40416],{},"page_objects_path"," – The Page Objects will be defined here.",[974,40419,40420,40423],{},[941,40421,40422],{},"globals_path"," – Global variables path will be stored here",[974,40425,40426,40428],{},[941,40427,39949],{}," – Settings for Selenium.",[7100,40430,40431],{"type":24048},[925,40432,40433,40434,40437,40438,40440],{},"It is important to have the ",[941,40435,40436],{},"starter_process"," set to ",[941,40439,17397],{}," so that selenium server will start straight away.",[925,40442,40443,40444,40447],{},"The setting ",[941,40445,40446],{},"desiredCapabilities"," will make sure Chrome as will be the browser running our tests.",[953,40449,40451],{"id":40450},"es6-support","ES6 Support",[925,40453,40454,40455,40458],{},"We will create a ",[941,40456,40457],{},"nightwatch.conf.js"," file in the root, in order add few lines.",[993,40460,40462],{"className":995,"code":40461,"language":997,"meta":998,"style":998},"require('babel-core\u002Fregister');\n\nmodule.exports = require('.\u002Fnightwatch.json');\n",[941,40463,40464,40475,40479],{"__ignoreMap":998},[1002,40465,40466,40468,40470,40473],{"class":1004,"line":1005},[1002,40467,1294],{"class":1026},[1002,40469,1031],{"class":1030},[1002,40471,40472],{"class":1034},"'babel-core\u002Fregister'",[1002,40474,1085],{"class":1030},[1002,40476,40477],{"class":1004,"line":1012},[1002,40478,1051],{"emptyLinePlaceholder":1050},[1002,40480,40481,40483,40485,40487,40489,40491,40493,40496],{"class":1004,"line":1047},[1002,40482,1227],{"class":1019},[1002,40484,948],{"class":1030},[1002,40486,1452],{"class":1019},[1002,40488,1023],{"class":1015},[1002,40490,1027],{"class":1026},[1002,40492,1031],{"class":1030},[1002,40494,40495],{"class":1034},"'.\u002Fnightwatch.json'",[1002,40497,1085],{"class":1030},[925,40499,40500],{},"Now we can run our tests in ES6.",[925,40502,40503],{},"Tests\nCreate a tests directory in the root folder and add the test script called login.js.",[925,40505,40506],{},"Now we need to save the login credentials of your preferred site to test. Open up a new terminal session and enter the commands below.",[993,40508,40510],{"className":1797,"code":40509,"language":1799,"meta":998,"style":998},"export USERNAME=”your username”\nexport PASSWORD=”your password”\n",[941,40511,40512,40524],{"__ignoreMap":998},[1002,40513,40514,40516,40519,40521],{"class":1004,"line":1005},[1002,40515,947],{"class":1015},[1002,40517,40518],{"class":1030}," USERNAME",[1002,40520,2393],{"class":1015},[1002,40522,40523],{"class":1030},"”your username”\n",[1002,40525,40526,40528,40531,40533],{"class":1004,"line":1012},[1002,40527,947],{"class":1015},[1002,40529,40530],{"class":1030}," PASSWORD",[1002,40532,2393],{"class":1015},[1002,40534,40535],{"class":1030},"”your password”\n",[7100,40537,40539],{"type":23379,"title":40538},"Windows",[925,40540,40541,40542,40545,40546,948],{},"If you are in windows, use ",[941,40543,40544],{},"set"," instead of ",[941,40547,947],{},[993,40549,40551],{"className":1120,"code":40550,"language":1122,"meta":998,"style":998},"export default {\n 'Log in': (user) => {\n const loginPage = client.page.login();\n const instancesPage = client.page.instancesPage();\n\n loginPage\n .navigate()\n .login(process.env.USERNAME, process.ENV.PASSWORD);\n\n instancesPage.expect.element('');\n user.end();\n }\n};\n",[941,40552,40553,40558,40575,40587,40599,40603,40608,40613,40621,40625,40630,40635,40639],{"__ignoreMap":998},[1002,40554,40555],{"class":1004,"line":1005},[1002,40556,40557],{"class":1030},"export default {\n",[1002,40559,40560,40563,40566,40568,40571,40573],{"class":1004,"line":1012},[1002,40561,40562],{"class":18541}," 'Log",[1002,40564,40565],{"class":18541}," in'",[1002,40567,1137],{"class":1030},[1002,40569,40570],{"class":18541},"(user)",[1002,40572,20479],{"class":18541},[1002,40574,1457],{"class":1030},[1002,40576,40577,40579,40582,40584],{"class":1004,"line":1047},[1002,40578,4348],{"class":18541},[1002,40580,40581],{"class":18541}," loginPage",[1002,40583,1023],{"class":18541},[1002,40585,40586],{"class":18541}," client.page.login();\n",[1002,40588,40589,40591,40594,40596],{"class":1004,"line":1054},[1002,40590,4348],{"class":18541},[1002,40592,40593],{"class":18541}," instancesPage",[1002,40595,1023],{"class":18541},[1002,40597,40598],{"class":18541}," client.page.instancesPage();\n",[1002,40600,40601],{"class":1004,"line":1060},[1002,40602,1051],{"emptyLinePlaceholder":1050},[1002,40604,40605],{"class":1004,"line":1272},[1002,40606,40607],{"class":18541}," loginPage\n",[1002,40609,40610],{"class":1004,"line":1348},[1002,40611,40612],{"class":18541}," .navigate()\n",[1002,40614,40615,40618],{"class":1004,"line":1354},[1002,40616,40617],{"class":18541}," .login(process.env.USERNAME,",[1002,40619,40620],{"class":18541}," process.ENV.PASSWORD);\n",[1002,40622,40623],{"class":1004,"line":1360},[1002,40624,1051],{"emptyLinePlaceholder":1050},[1002,40626,40627],{"class":1004,"line":1366},[1002,40628,40629],{"class":18541}," instancesPage.expect.element('');\n",[1002,40631,40632],{"class":1004,"line":1946},[1002,40633,40634],{"class":18541}," user.end();\n",[1002,40636,40637],{"class":1004,"line":1956},[1002,40638,1269],{"class":1030},[1002,40640,40641],{"class":1004,"line":1961},[1002,40642,1517],{"class":1030},[925,40644,40645],{},"Let’s look at what’s going on in the code.",[1530,40647,40648,40651,40654,40657],{},[974,40649,40650],{},"User navigates to the login page.",[974,40652,40653],{},"User logs in using the credentials, saved in the environemnt before.",[974,40655,40656],{},"The test asserts an element to exist upon login.",[974,40658,40659,40660,40663],{},"The line, ",[941,40661,40662],{},"client.end()"," method will end the browser session.",[925,40665,40666,40667,40670],{},"For non-technical people to understand the steps, we need use the ",[941,40668,40669],{},"Page Object"," pattern.",[953,40672,40669],{"id":40673},"page-object",[925,40675,40676,40677,40680,40681,33813],{},"Let’s create a folder called ",[941,40678,40679],{},"pages"," for page objects and add a ",[941,40682,40683],{},"login.js",[993,40685,40687],{"className":995,"code":40686,"language":997,"meta":998,"style":998},"const loginCommands = {\n login(email, pass) {\n return this.waitForElementVisible('@emailInput')\n .setValue('@emailInput', email)\n .setValue('@passInput', pass)\n .waitForElementVisible('@loginButton')\n .click('@loginButton');\n },\n};\n\nexport default {\n url: 'https:\u002F\u002Ftutsplus.com\u002Fsign_in',\n commands: [loginCommands],\n elements: {\n emailInput: {\n selector: 'input[type=text]',\n },\n passInput: {\n selector: 'input[name=password]',\n },\n loginButton: {\n selector: 'button[type=submit]',\n },\n },\n};\n",[941,40688,40689,40700,40716,40734,40749,40763,40776,40788,40792,40796,40800,40808,40818,40823,40828,40833,40843,40847,40852,40861,40865,40870,40879,40883,40887],{"__ignoreMap":998},[1002,40690,40691,40693,40696,40698],{"class":1004,"line":1005},[1002,40692,1016],{"class":1015},[1002,40694,40695],{"class":1019}," loginCommands",[1002,40697,1023],{"class":1015},[1002,40699,1457],{"class":1030},[1002,40701,40702,40704,40706,40709,40711,40714],{"class":1004,"line":1012},[1002,40703,10628],{"class":1026},[1002,40705,1031],{"class":1030},[1002,40707,40708],{"class":2378},"email",[1002,40710,1251],{"class":1030},[1002,40712,40713],{"class":2378},"pass",[1002,40715,2382],{"class":1030},[1002,40717,40718,40720,40722,40724,40727,40729,40732],{"class":1004,"line":1047},[1002,40719,2687],{"class":1015},[1002,40721,2693],{"class":1019},[1002,40723,948],{"class":1030},[1002,40725,40726],{"class":1026},"waitForElementVisible",[1002,40728,1031],{"class":1030},[1002,40730,40731],{"class":1034},"'@emailInput'",[1002,40733,3808],{"class":1030},[1002,40735,40736,40739,40742,40744,40746],{"class":1004,"line":1054},[1002,40737,40738],{"class":1030}," .",[1002,40740,40741],{"class":1026},"setValue",[1002,40743,1031],{"class":1030},[1002,40745,40731],{"class":1034},[1002,40747,40748],{"class":1030},", email)\n",[1002,40750,40751,40753,40755,40757,40760],{"class":1004,"line":1060},[1002,40752,40738],{"class":1030},[1002,40754,40741],{"class":1026},[1002,40756,1031],{"class":1030},[1002,40758,40759],{"class":1034},"'@passInput'",[1002,40761,40762],{"class":1030},", pass)\n",[1002,40764,40765,40767,40769,40771,40774],{"class":1004,"line":1272},[1002,40766,40738],{"class":1030},[1002,40768,40726],{"class":1026},[1002,40770,1031],{"class":1030},[1002,40772,40773],{"class":1034},"'@loginButton'",[1002,40775,3808],{"class":1030},[1002,40777,40778,40780,40782,40784,40786],{"class":1004,"line":1348},[1002,40779,40738],{"class":1030},[1002,40781,11181],{"class":1026},[1002,40783,1031],{"class":1030},[1002,40785,40773],{"class":1034},[1002,40787,1085],{"class":1030},[1002,40789,40790],{"class":1004,"line":1354},[1002,40791,1502],{"class":1030},[1002,40793,40794],{"class":1004,"line":1360},[1002,40795,1517],{"class":1030},[1002,40797,40798],{"class":1004,"line":1366},[1002,40799,1051],{"emptyLinePlaceholder":1050},[1002,40801,40802,40804,40806],{"class":1004,"line":1946},[1002,40803,947],{"class":1015},[1002,40805,15641],{"class":1015},[1002,40807,1457],{"class":1030},[1002,40809,40810,40813,40816],{"class":1004,"line":1956},[1002,40811,40812],{"class":1030}," url: ",[1002,40814,40815],{"class":1034},"'https:\u002F\u002Ftutsplus.com\u002Fsign_in'",[1002,40817,1143],{"class":1030},[1002,40819,40820],{"class":1004,"line":1961},[1002,40821,40822],{"class":1030}," commands: [loginCommands],\n",[1002,40824,40825],{"class":1004,"line":1971},[1002,40826,40827],{"class":1030}," elements: {\n",[1002,40829,40830],{"class":1004,"line":1980},[1002,40831,40832],{"class":1030}," emailInput: {\n",[1002,40834,40835,40838,40841],{"class":1004,"line":1985},[1002,40836,40837],{"class":1030}," selector: ",[1002,40839,40840],{"class":1034},"'input[type=text]'",[1002,40842,1143],{"class":1030},[1002,40844,40845],{"class":1004,"line":1995},[1002,40846,15108],{"class":1030},[1002,40848,40849],{"class":1004,"line":2006},[1002,40850,40851],{"class":1030}," passInput: {\n",[1002,40853,40854,40856,40859],{"class":1004,"line":2011},[1002,40855,40837],{"class":1030},[1002,40857,40858],{"class":1034},"'input[name=password]'",[1002,40860,1143],{"class":1030},[1002,40862,40863],{"class":1004,"line":2017},[1002,40864,15108],{"class":1030},[1002,40866,40867],{"class":1004,"line":2022},[1002,40868,40869],{"class":1030}," loginButton: {\n",[1002,40871,40872,40874,40877],{"class":1004,"line":2442},[1002,40873,40837],{"class":1030},[1002,40875,40876],{"class":1034},"'button[type=submit]'",[1002,40878,1143],{"class":1030},[1002,40880,40881],{"class":1004,"line":2466},[1002,40882,15108],{"class":1030},[1002,40884,40885],{"class":1004,"line":2471},[1002,40886,1502],{"class":1030},[1002,40888,40889],{"class":1004,"line":2476},[1002,40890,1517],{"class":1030},[953,40892,40894],{"id":40893},"global-config","Global Config",[925,40896,40897],{},"Nightwatch requires a timeout parameter to be passed in, so the test throws an error when the timeout limit is hit.",[993,40899,40901],{"className":995,"code":40900,"language":997,"meta":998,"style":998},"waitForElementVisible('@anElement', 3000);\n",[941,40902,40903],{"__ignoreMap":998},[1002,40904,40905,40907,40909,40912,40914,40916],{"class":1004,"line":1005},[1002,40906,40726],{"class":1026},[1002,40908,1031],{"class":1030},[1002,40910,40911],{"class":1034},"'@anElement'",[1002,40913,1251],{"class":1030},[1002,40915,20832],{"class":1019},[1002,40917,1085],{"class":1030},[925,40919,40454,40920,40923],{},[941,40921,40922],{},"global.js"," file in the root of your project.",[993,40925,40927],{"className":995,"code":40926,"language":997,"meta":998,"style":998},"export default {\n waitForConditionTimeout: 10000,\n};\n",[941,40928,40929,40937,40947],{"__ignoreMap":998},[1002,40930,40931,40933,40935],{"class":1004,"line":1005},[1002,40932,947],{"class":1015},[1002,40934,15641],{"class":1015},[1002,40936,1457],{"class":1030},[1002,40938,40939,40942,40945],{"class":1004,"line":1012},[1002,40940,40941],{"class":1030}," waitForConditionTimeout: ",[1002,40943,40944],{"class":1019},"10000",[1002,40946,1143],{"class":1030},[1002,40948,40949],{"class":1004,"line":1047},[1002,40950,1517],{"class":1030},[925,40952,40953],{},"Now the Nightwatch methods will have a 10 second timeout.",[953,40955,40957],{"id":40956},"run-tests","Run Tests",[925,40959,40960],{},"Now you can run tests by typing the following command in the command line:",[993,40962,40964],{"className":1797,"code":40963,"language":1799,"meta":998,"style":998},"nightwatch\n",[941,40965,40966],{"__ignoreMap":998},[1002,40967,40968],{"class":1004,"line":1005},[1002,40969,40963],{"class":1026},[1579,40971,40972],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":998,"searchDepth":1012,"depth":1012,"links":40974},[40975,40978,40979,40980,40981,40982],{"id":32992,"depth":1012,"text":32993,"children":40976},[40977],{"id":39949,"depth":1047,"text":39950},{"id":40096,"depth":1012,"text":40097},{"id":40450,"depth":1012,"text":40451},{"id":40673,"depth":1012,"text":40669},{"id":40893,"depth":1012,"text":40894},{"id":40956,"depth":1012,"text":40957},"2016-06-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-nightwatch.jpg",{},{"title":683,"description":685},"blog\u002Freact-nightwatch",[16,17],"Zhlm7Pcp2YwY7o1g_bQ6hkdbm3E_lAGY8A52IODBFSs",{"id":40991,"title":902,"author":920,"body":40992,"date":41608,"description":904,"extension":1591,"image":41609,"meta":41610,"navigation":1050,"path":903,"seo":41611,"stem":41612,"tags":41613,"__hash__":41614},"blog\u002Fblog\u002Fwebpack-export-modules.md",{"type":922,"value":40993,"toc":41603},[40994,41002,41008,41012,41015,41034,41038,41046,41143,41148,41308,41320,41568,41588,41591,41593,41600],[925,40995,40996,40997,16529,40999,41001],{},"Maybe you have developed a library and want to distribute it in bundled versions. You want to allow the user to use it in a ",[941,40998,1294],{},[941,41000,943],{}," statement. Or you depend on various precompilations and want to remove the pain for the user and distribute it as simple compiled CommonJS module.",[925,41003,41004,41005,41007],{},"Either scenario, this article will help you to configure your ",[941,41006,33059],{}," configurattion.",[953,41009,41011],{"id":41010},"configuration-options","Configuration Options",[925,41013,41014],{},"Webpack has three configuration options to help you out for these use cases:",[1530,41016,41017,41023,41029],{},[974,41018,41019,41022],{},[941,41020,41021],{},"output.library"," – Specify a name for your library",[974,41024,41025,41028],{},[941,41026,41027],{},"output.libraryTarget"," – Type of output ie. CommonJS, AMD, UMD",[974,41030,41031,41033],{},[941,41032,33583],{}," – Dependencies for your libraries, to be imported from the environment at runtime",[953,41035,41037],{"id":41036},"webpack-example-module","Webpack Example Module",[925,41039,41040,41041,41043,41044,948],{},"Let’s start off by creating a React component at the ",[941,41042,37223],{}," directory and name it ",[941,41045,37652],{},[993,41047,41049],{"className":995,"code":41048,"language":997,"meta":998,"style":998},"import React from 'react';\n\nexport default const MyApp = () => {\n return (\n \u003Cdiv>\n \u003Ch1>My App\u003C\u002Fh1>\n \u003Cp>Hello world!\u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n};\n",[941,41050,41051,41063,41067,41087,41093,41101,41114,41127,41135,41139],{"__ignoreMap":998},[1002,41052,41053,41055,41057,41059,41061],{"class":1004,"line":1005},[1002,41054,943],{"class":1015},[1002,41056,21700],{"class":1030},[1002,41058,1068],{"class":1015},[1002,41060,15543],{"class":1034},[1002,41062,1407],{"class":1030},[1002,41064,41065],{"class":1004,"line":1012},[1002,41066,1051],{"emptyLinePlaceholder":1050},[1002,41068,41069,41071,41073,41076,41079,41081,41083,41085],{"class":1004,"line":1047},[1002,41070,947],{"class":1015},[1002,41072,15641],{"class":1015},[1002,41074,41075],{"class":1030}," const ",[1002,41077,41078],{"class":1026},"MyApp",[1002,41080,1023],{"class":1015},[1002,41082,17297],{"class":1030},[1002,41084,15497],{"class":1015},[1002,41086,1457],{"class":1030},[1002,41088,41089,41091],{"class":1004,"line":1054},[1002,41090,15066],{"class":1015},[1002,41092,15692],{"class":1030},[1002,41094,41095,41097,41099],{"class":1004,"line":1060},[1002,41096,15697],{"class":1030},[1002,41098,19650],{"class":15711},[1002,41100,15703],{"class":1030},[1002,41102,41103,41105,41107,41110,41112],{"class":1004,"line":1272},[1002,41104,19579],{"class":1030},[1002,41106,15201],{"class":15711},[1002,41108,41109],{"class":1030},">My App\u003C\u002F",[1002,41111,15201],{"class":15711},[1002,41113,15703],{"class":1030},[1002,41115,41116,41118,41120,41123,41125],{"class":1004,"line":1348},[1002,41117,19579],{"class":1030},[1002,41119,925],{"class":15711},[1002,41121,41122],{"class":1030},">Hello world!\u003C\u002F",[1002,41124,925],{"class":15711},[1002,41126,15703],{"class":1030},[1002,41128,41129,41131,41133],{"class":1004,"line":1354},[1002,41130,19647],{"class":1030},[1002,41132,19650],{"class":15711},[1002,41134,15703],{"class":1030},[1002,41136,41137],{"class":1004,"line":1360},[1002,41138,10503],{"class":1030},[1002,41140,41141],{"class":1004,"line":1366},[1002,41142,1517],{"class":1030},[925,41144,3898,41145,41147],{},[941,41146,1102],{}," file will look like the following:",[993,41149,41151],{"className":1120,"code":41150,"language":1122,"meta":998,"style":998},"{\n \"name\": \"webpack-export-module-demo\",\n \"version\": \"1.0.0\",\n \"description\": \"Webpack demo for exporting a module\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"build:webpack\": \"webpack --config webpack.config.js\",\n \"build\": \"npm run build:webpack\",\n \"prepublish\": \"npm run build\"\n },\n \"keywords\": [\"Webpack\"],\n \"author\": \"Sean Amarasinghe\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"react\": \"^15.1.0\"\n }\n}\n",[941,41152,41153,41157,41168,41178,41190,41202,41209,41221,41233,41243,41247,41259,41271,41283,41290,41300,41304],{"__ignoreMap":998},[1002,41154,41155],{"class":1004,"line":1005},[1002,41156,1129],{"class":1030},[1002,41158,41159,41161,41163,41166],{"class":1004,"line":1012},[1002,41160,1134],{"class":1019},[1002,41162,1137],{"class":1030},[1002,41164,41165],{"class":1034},"\"webpack-export-module-demo\"",[1002,41167,1143],{"class":1030},[1002,41169,41170,41172,41174,41176],{"class":1004,"line":1047},[1002,41171,1148],{"class":1019},[1002,41173,1137],{"class":1030},[1002,41175,1153],{"class":1034},[1002,41177,1143],{"class":1030},[1002,41179,41180,41183,41185,41188],{"class":1004,"line":1054},[1002,41181,41182],{"class":1019}," \"description\"",[1002,41184,1137],{"class":1030},[1002,41186,41187],{"class":1034},"\"Webpack demo for exporting a module\"",[1002,41189,1143],{"class":1030},[1002,41191,41192,41195,41197,41200],{"class":1004,"line":1060},[1002,41193,41194],{"class":1019}," \"main\"",[1002,41196,1137],{"class":1030},[1002,41198,41199],{"class":1034},"\"index.js\"",[1002,41201,1143],{"class":1030},[1002,41203,41204,41207],{"class":1004,"line":1272},[1002,41205,41206],{"class":1019}," \"scripts\"",[1002,41208,15354],{"class":1030},[1002,41210,41211,41214,41216,41219],{"class":1004,"line":1348},[1002,41212,41213],{"class":1019}," \"build:webpack\"",[1002,41215,1137],{"class":1030},[1002,41217,41218],{"class":1034},"\"webpack --config webpack.config.js\"",[1002,41220,1143],{"class":1030},[1002,41222,41223,41226,41228,41231],{"class":1004,"line":1354},[1002,41224,41225],{"class":1019}," \"build\"",[1002,41227,1137],{"class":1030},[1002,41229,41230],{"class":1034},"\"npm run build:webpack\"",[1002,41232,1143],{"class":1030},[1002,41234,41235,41238,41240],{"class":1004,"line":1360},[1002,41236,41237],{"class":1019}," \"prepublish\"",[1002,41239,1137],{"class":1030},[1002,41241,41242],{"class":1034},"\"npm run build\"\n",[1002,41244,41245],{"class":1004,"line":1366},[1002,41246,1502],{"class":1030},[1002,41248,41249,41252,41254,41257],{"class":1004,"line":1946},[1002,41250,41251],{"class":1019}," \"keywords\"",[1002,41253,1201],{"class":1030},[1002,41255,41256],{"class":1034},"\"Webpack\"",[1002,41258,1903],{"class":1030},[1002,41260,41261,41264,41266,41269],{"class":1004,"line":1956},[1002,41262,41263],{"class":1019}," \"author\"",[1002,41265,1137],{"class":1030},[1002,41267,41268],{"class":1034},"\"Sean Amarasinghe\"",[1002,41270,1143],{"class":1030},[1002,41272,41273,41276,41278,41281],{"class":1004,"line":1961},[1002,41274,41275],{"class":1019}," \"license\"",[1002,41277,1137],{"class":1030},[1002,41279,41280],{"class":1034},"\"ISC\"",[1002,41282,1143],{"class":1030},[1002,41284,41285,41288],{"class":1004,"line":1971},[1002,41286,41287],{"class":1019}," \"dependencies\"",[1002,41289,15354],{"class":1030},[1002,41291,41292,41295,41297],{"class":1004,"line":1980},[1002,41293,41294],{"class":1019}," \"react\"",[1002,41296,1137],{"class":1030},[1002,41298,41299],{"class":1034},"\"^15.1.0\"\n",[1002,41301,41302],{"class":1004,"line":1985},[1002,41303,1269],{"class":1030},[1002,41305,41306],{"class":1004,"line":1995},[1002,41307,1170],{"class":1030},[925,41309,3898,41310,41312,41313,2034,41316,41319],{},[941,41311,33219],{}," file will have ",[941,41314,41315],{},"library",[941,41317,41318],{},"libraryTarget"," properties.",[993,41321,41323],{"className":995,"code":41322,"language":997,"meta":998,"style":998},"var webpack = require('webpack');\nvar UglifyJsPlugin = require('webpack\u002Flib\u002Foptimize\u002FUglifyJsPlugin');\n\nmodule.exports = {\n context: __dirname + '\u002Fsrc\u002F',\n entry: '.\u002Findex.js',\n output: {\n path: __dirname + '\u002Fdist\u002F',\n filename: 'bundle.js',\n library: 'my-app',\n libraryTarget: 'commonjs2',\n },\n module: {\n loaders: [\n {\n test: \u002F\\.js$\u002F,\n loader: 'babel-loader',\n },\n ],\n },\n externals: {\n react: {\n root: 'React',\n commonjs: 'react',\n commonjs2: 'react',\n amd: 'react',\n },\n },\n\n plugins: [new UglifyJsPlugin()],\n};\n",[941,41324,41325,41341,41359,41363,41375,41387,41396,41400,41412,41420,41430,41440,41444,41448,41452,41456,41472,41481,41485,41489,41493,41497,41502,41512,41521,41530,41539,41543,41547,41551,41564],{"__ignoreMap":998},[1002,41326,41327,41329,41331,41333,41335,41337,41339],{"class":1004,"line":1005},[1002,41328,18311],{"class":1015},[1002,41330,33249],{"class":1030},[1002,41332,2393],{"class":1015},[1002,41334,1027],{"class":1026},[1002,41336,1031],{"class":1030},[1002,41338,33258],{"class":1034},[1002,41340,1085],{"class":1030},[1002,41342,41343,41345,41348,41350,41352,41354,41357],{"class":1004,"line":1012},[1002,41344,18311],{"class":1015},[1002,41346,41347],{"class":1030}," UglifyJsPlugin ",[1002,41349,2393],{"class":1015},[1002,41351,1027],{"class":1026},[1002,41353,1031],{"class":1030},[1002,41355,41356],{"class":1034},"'webpack\u002Flib\u002Foptimize\u002FUglifyJsPlugin'",[1002,41358,1085],{"class":1030},[1002,41360,41361],{"class":1004,"line":1047},[1002,41362,1051],{"emptyLinePlaceholder":1050},[1002,41364,41365,41367,41369,41371,41373],{"class":1004,"line":1054},[1002,41366,1227],{"class":1019},[1002,41368,948],{"class":1030},[1002,41370,1452],{"class":1019},[1002,41372,1023],{"class":1015},[1002,41374,1457],{"class":1030},[1002,41376,41377,41380,41382,41385],{"class":1004,"line":1060},[1002,41378,41379],{"class":1030}," context: __dirname ",[1002,41381,5064],{"class":1015},[1002,41383,41384],{"class":1034}," '\u002Fsrc\u002F'",[1002,41386,1143],{"class":1030},[1002,41388,41389,41391,41394],{"class":1004,"line":1272},[1002,41390,1462],{"class":1030},[1002,41392,41393],{"class":1034},"'.\u002Findex.js'",[1002,41395,1143],{"class":1030},[1002,41397,41398],{"class":1004,"line":1348},[1002,41399,1472],{"class":1030},[1002,41401,41402,41405,41407,41410],{"class":1004,"line":1354},[1002,41403,41404],{"class":1030}," path: __dirname ",[1002,41406,5064],{"class":1015},[1002,41408,41409],{"class":1034}," '\u002Fdist\u002F'",[1002,41411,1143],{"class":1030},[1002,41413,41414,41416,41418],{"class":1004,"line":1360},[1002,41415,1477],{"class":1030},[1002,41417,1480],{"class":1034},[1002,41419,1143],{"class":1030},[1002,41421,41422,41425,41428],{"class":1004,"line":1366},[1002,41423,41424],{"class":1030}," library: ",[1002,41426,41427],{"class":1034},"'my-app'",[1002,41429,1143],{"class":1030},[1002,41431,41432,41435,41438],{"class":1004,"line":1946},[1002,41433,41434],{"class":1030}," libraryTarget: ",[1002,41436,41437],{"class":1034},"'commonjs2'",[1002,41439,1143],{"class":1030},[1002,41441,41442],{"class":1004,"line":1956},[1002,41443,1502],{"class":1030},[1002,41445,41446],{"class":1004,"line":1961},[1002,41447,33464],{"class":1030},[1002,41449,41450],{"class":1004,"line":1971},[1002,41451,33469],{"class":1030},[1002,41453,41454],{"class":1004,"line":1980},[1002,41455,1336],{"class":1030},[1002,41457,41458,41460,41462,41464,41466,41468,41470],{"class":1004,"line":1985},[1002,41459,33478],{"class":1030},[1002,41461,33481],{"class":1034},[1002,41463,33485],{"class":33484},[1002,41465,997],{"class":33488},[1002,41467,15864],{"class":1015},[1002,41469,4685],{"class":1034},[1002,41471,1143],{"class":1030},[1002,41473,41474,41476,41479],{"class":1004,"line":1995},[1002,41475,33520],{"class":1030},[1002,41477,41478],{"class":1034},"'babel-loader'",[1002,41480,1143],{"class":1030},[1002,41482,41483],{"class":1004,"line":2006},[1002,41484,1922],{"class":1030},[1002,41486,41487],{"class":1004,"line":2011},[1002,41488,33564],{"class":1030},[1002,41490,41491],{"class":1004,"line":2017},[1002,41492,1502],{"class":1030},[1002,41494,41495],{"class":1004,"line":2022},[1002,41496,33423],{"class":1030},[1002,41498,41499],{"class":1004,"line":2442},[1002,41500,41501],{"class":1030}," react: {\n",[1002,41503,41504,41507,41510],{"class":1004,"line":2466},[1002,41505,41506],{"class":1030}," root: ",[1002,41508,41509],{"class":1034},"'React'",[1002,41511,1143],{"class":1030},[1002,41513,41514,41517,41519],{"class":1004,"line":2471},[1002,41515,41516],{"class":1030}," commonjs: ",[1002,41518,33538],{"class":1034},[1002,41520,1143],{"class":1030},[1002,41522,41523,41526,41528],{"class":1004,"line":2476},[1002,41524,41525],{"class":1030}," commonjs2: ",[1002,41527,33538],{"class":1034},[1002,41529,1143],{"class":1030},[1002,41531,41532,41535,41537],{"class":1004,"line":2481},[1002,41533,41534],{"class":1030}," amd: ",[1002,41536,33538],{"class":1034},[1002,41538,1143],{"class":1030},[1002,41540,41541],{"class":1004,"line":2491},[1002,41542,15108],{"class":1030},[1002,41544,41545],{"class":1004,"line":2502},[1002,41546,1502],{"class":1030},[1002,41548,41549],{"class":1004,"line":2513},[1002,41550,1051],{"emptyLinePlaceholder":1050},[1002,41552,41553,41556,41558,41561],{"class":1004,"line":2535},[1002,41554,41555],{"class":1030}," plugins: [",[1002,41557,5654],{"class":1015},[1002,41559,41560],{"class":1026}," UglifyJsPlugin",[1002,41562,41563],{"class":1030},"()],\n",[1002,41565,41566],{"class":1004,"line":2557},[1002,41567,1517],{"class":1030},[925,41569,41570,41571,41574,41575,41578,41579,40545,41582,41584,41585,41587],{},"We provided a name for the library, ",[941,41572,41573],{},"my-app"," and the libraryTarget ",[941,41576,41577],{},"commonjs2",". If you selected ",[941,41580,41581],{},"commonjs",[941,41583,41577],{},", you will have ",[941,41586,15278],{}," as the container object, which you might not want.",[925,41589,41590],{},"Now you can import this library into another project.",[953,41592,26561],{"id":26560},[925,41594,41595,41596,948],{},"You can find the source code for this article in ",[933,41597,38060],{"href":41598,"rel":41599},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fwebpack-export-module-demo",[937],[1579,41601,41602],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":41604},[41605,41606,41607],{"id":41010,"depth":1012,"text":41011},{"id":41036,"depth":1012,"text":41037},{"id":26560,"depth":1012,"text":26561},"2016-06-22","\u002Fimages\u002Fblog\u002Ffeatures\u002Fwebpack-export-modules.jpg",{},{"title":902,"description":904},"blog\u002Fwebpack-export-modules",[16,17],"bVBN6ql5aU3_dM_wefuZeqFxNeCaXS1KHDG435Oo5zI",{"id":41616,"title":610,"author":920,"body":41617,"date":42183,"description":612,"extension":1591,"image":42184,"meta":42185,"navigation":1050,"path":611,"seo":42186,"stem":42187,"tags":42188,"__hash__":42189},"blog\u002Fblog\u002Fnpm-scripts.md",{"type":922,"value":41618,"toc":42172},[41619,41622,41626,41629,41640,41643,41646,41649,41653,41656,41659,41663,41666,41669,41683,41686,41690,41707,41796,41807,41813,41825,41828,41834,41841,41866,41870,41873,41893,41898,41902,41912,41925,41931,41934,41947,41950,42164,42166,42169],[925,41620,41621],{},"But as your project gets large, your tasks runners get bloated as well, and sooner you will run into various issues.",[953,41623,41625],{"id":41624},"issues-with-gulp-and-grunt","Issues with Gulp and Grunt",[925,41627,41628],{},"Task runners like Gulp and Grunt have few common problems.",[1530,41630,41631,41634,41637],{},[974,41632,41633],{},"Requires plugins for different tasks",[974,41635,41636],{},"Too much or lack of documentation",[974,41638,41639],{},"Difficult to debug",[1655,41641,41633],{"id":41642},"requires-plugins-for-different-tasks",[925,41644,41645],{},"With Gulp and Grunt, tasks are run using plugins. Managing plugins becomes a nightmare when they are outdated. Some plugins may have bugs and you will have to wait for the plugin author to fix them before using it.",[925,41647,41648],{},"When using NPM though, you are using the tools directly.",[1655,41650,41652],{"id":41651},"too-much-or-lack-of-documentation","Too much or lack of Documentation",[925,41654,41655],{},"Plugins mean extra documentation. If you are using a plugin to use a tool, you would have to use both documentation for both the plugin and the tool.",[925,41657,41658],{},"Usually the documentation for the tools are comprehensive than the plugins.",[1655,41660,41662],{"id":41661},"difficult-to-debug","Difficult to Debug",[925,41664,41665],{},"Debugging in Gulp or Grunt can be a frustrating task as you are working with an extra level of abstraction.",[925,41667,41668],{},"The cause for a bug could be one of the many from the below:",[1530,41670,41671,41674,41677,41680],{},[974,41672,41673],{},"Broken plugin",[974,41675,41676],{},"Broken tool",[974,41678,41679],{},"Bad configuration",[974,41681,41682],{},"Incompatible version",[925,41684,41685],{},"If you were using NPM instead, you completely eliminate the first issue on the list.",[953,41687,41689],{"id":41688},"npm-scripts","NPM Scripts",[925,41691,41692,41693,41696,41697,41700,41701,41703,41704,41706],{},"In the core of NPM, it has a the ",[941,41694,41695],{},"npm run-script"," command, or the shorter version ",[941,41698,41699],{},"npm run",". This will access the ",[941,41702,22063],{}," property in the ",[941,41705,1102],{},". It will pass a property inside the scripts object as its first parameter and execute the property’s value as command in the operating system’s default shell.",[993,41708,41710],{"className":1120,"code":41709,"language":1122,"meta":998,"style":998},"{\n \"name\": \"project-name\",\n \"devDependencies\": {\n \"jshint\": \"latest\",\n \"mocha\": \"latest\"\n },\n \"scripts\": {\n \"lint\": \"jshint test\u002F*.js\",\n \"test\": \"mocha test\u002F\"\n }\n}\n",[941,41711,41712,41716,41727,41734,41746,41756,41760,41766,41778,41788,41792],{"__ignoreMap":998},[1002,41713,41714],{"class":1004,"line":1005},[1002,41715,1129],{"class":1030},[1002,41717,41718,41720,41722,41725],{"class":1004,"line":1012},[1002,41719,1134],{"class":1019},[1002,41721,1137],{"class":1030},[1002,41723,41724],{"class":1034},"\"project-name\"",[1002,41726,1143],{"class":1030},[1002,41728,41729,41732],{"class":1004,"line":1047},[1002,41730,41731],{"class":1019}," \"devDependencies\"",[1002,41733,15354],{"class":1030},[1002,41735,41736,41739,41741,41744],{"class":1004,"line":1054},[1002,41737,41738],{"class":1019}," \"jshint\"",[1002,41740,1137],{"class":1030},[1002,41742,41743],{"class":1034},"\"latest\"",[1002,41745,1143],{"class":1030},[1002,41747,41748,41751,41753],{"class":1004,"line":1060},[1002,41749,41750],{"class":1019}," \"mocha\"",[1002,41752,1137],{"class":1030},[1002,41754,41755],{"class":1034},"\"latest\"\n",[1002,41757,41758],{"class":1004,"line":1272},[1002,41759,1502],{"class":1030},[1002,41761,41762,41764],{"class":1004,"line":1348},[1002,41763,41206],{"class":1019},[1002,41765,15354],{"class":1030},[1002,41767,41768,41771,41773,41776],{"class":1004,"line":1354},[1002,41769,41770],{"class":1019}," \"lint\"",[1002,41772,1137],{"class":1030},[1002,41774,41775],{"class":1034},"\"jshint test\u002F*.js\"",[1002,41777,1143],{"class":1030},[1002,41779,41780,41783,41785],{"class":1004,"line":1360},[1002,41781,41782],{"class":1019}," \"test\"",[1002,41784,1137],{"class":1030},[1002,41786,41787],{"class":1034},"\"mocha test\u002F\"\n",[1002,41789,41790],{"class":1004,"line":1366},[1002,41791,1269],{"class":1030},[1002,41793,41794],{"class":1004,"line":1946},[1002,41795,1170],{"class":1030},[925,41797,41798,41799,41802,41803,41806],{},"The shell environment sets your ",[941,41800,41801],{},"node_modules\u002F.bin"," folder added to the ",[941,41804,41805],{},"PATH"," so that the binaries installed can be run directly. This means you don’t have to rely on installing runnables globally.",[925,41808,41809,41810,41812],{},"Running ",[941,41811,41699],{}," should give you the available options to run.",[993,41814,41816],{"className":1797,"code":41815,"language":1799,"meta":998,"style":998},"npm run\n",[941,41817,41818],{"__ignoreMap":998},[1002,41819,41820,41822],{"class":1004,"line":1005},[1002,41821,27346],{"class":1026},[1002,41823,41824],{"class":1034}," run\n",[925,41826,41827],{},"Result:",[993,41829,41832],{"className":41830,"code":41831,"language":24241},[24239],"available via `npm run-script`:\nlint\njshint **\u002F*.js\n",[941,41833,41831],{"__ignoreMap":998},[925,41835,41836,41837,41840],{},"You also can retrieve extra metadata about your current environment by adding ",[941,41838,41839],{},"env"," as a property to the scripts.",[993,41842,41844],{"className":1120,"code":41843,"language":1122,"meta":998,"style":998},"\"scripts\": {\n \"env\": \"env\"\n}\n",[941,41845,41846,41852,41862],{"__ignoreMap":998},[1002,41847,41848,41850],{"class":1004,"line":1005},[1002,41849,38257],{"class":1034},[1002,41851,15354],{"class":1030},[1002,41853,41854,41857,41859],{"class":1004,"line":1012},[1002,41855,41856],{"class":1019}," \"env\"",[1002,41858,1137],{"class":1030},[1002,41860,41861],{"class":1034},"\"env\"\n",[1002,41863,41864],{"class":1004,"line":1047},[1002,41865,1170],{"class":1030},[953,41867,41869],{"id":41868},"shortcuts","Shortcuts",[925,41871,41872],{},"NPM provides few very useful shortcuts for us.",[1530,41874,41875,41881,41887],{},[974,41876,41877,41880],{},[941,41878,41879],{},"npm start"," – runs the project on the given port for development",[974,41882,41883,41886],{},[941,41884,41885],{},"npm stop"," – stops a running project in development",[974,41888,41889,41892],{},[941,41890,41891],{},"npm test"," – standard interface within NPM for test.",[925,41894,41895,41896,948],{},"These are shortcuts for the command ",[941,41897,41699],{},[953,41899,41901],{"id":41900},"pre-and-post-hooks","Pre and Post Hooks",[925,41903,41904,41905,2034,41908,41911],{},"NPM gives you a set of pre and post task in the means of ",[941,41906,41907],{},"pre-",[941,41909,41910],{},"post-"," hooks.",[925,41913,41914,41915,41917,41918,41921,41922,948],{},"For example for ",[941,41916,41891],{}," which is the shortcut for ",[941,41919,41920],{},"npm run test",", has pre and post scripts in ``npm run pretest and ",[941,41923,41924],{},"npm run posttest",[7100,41926,41928],{"title":41927,"type":24048},"Exit Code Sensitivity",[925,41929,41930],{},"Pre and post scripts will stop immediately if the exit code is non-zero.",[925,41932,41933],{},"NPM runs pre and post hooks for few internal commands:",[1530,41935,41936,41938,41941,41944],{},[974,41937,28561],{},[974,41939,41940],{},"uninstall",[974,41942,41943],{},"publish",[974,41945,41946],{},"update",[925,41948,41949],{},"Let’s look at an example.",[993,41951,41953],{"className":1120,"code":41952,"language":1122,"meta":998,"style":998},"{\n \"name\": \"npm-scripts\",\n \"version\": \"1.0.0\",\n \"description\": \"NPM as a build tool demo\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"env\": \"env\",\n \"lint\": \"jshint **\u002F*.js\",\n \"test\": \"mocha test\",\n \"build\": \"babel src -d lib\",\n \"prepublish\": \"\",\n \"prebuild\": \"npm run lint\",\n \"pretest\": \"\"\n },\n \"keywords\": [\"NPM\"],\n \"author\": \"Sean Amarasinghe\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"babel-cli\": \"^6.0.0\",\n \"jshint\": \"^2.9.2\",\n \"mocha\": \"^2.5.3\"\n }\n}\n",[941,41954,41955,41959,41970,41980,41991,42001,42007,42018,42029,42040,42051,42061,42073,42083,42087,42098,42108,42118,42124,42136,42147,42156,42160],{"__ignoreMap":998},[1002,41956,41957],{"class":1004,"line":1005},[1002,41958,1129],{"class":1030},[1002,41960,41961,41963,41965,41968],{"class":1004,"line":1012},[1002,41962,1134],{"class":1019},[1002,41964,1137],{"class":1030},[1002,41966,41967],{"class":1034},"\"npm-scripts\"",[1002,41969,1143],{"class":1030},[1002,41971,41972,41974,41976,41978],{"class":1004,"line":1047},[1002,41973,1148],{"class":1019},[1002,41975,1137],{"class":1030},[1002,41977,1153],{"class":1034},[1002,41979,1143],{"class":1030},[1002,41981,41982,41984,41986,41989],{"class":1004,"line":1054},[1002,41983,41182],{"class":1019},[1002,41985,1137],{"class":1030},[1002,41987,41988],{"class":1034},"\"NPM as a build tool demo\"",[1002,41990,1143],{"class":1030},[1002,41992,41993,41995,41997,41999],{"class":1004,"line":1060},[1002,41994,41194],{"class":1019},[1002,41996,1137],{"class":1030},[1002,41998,41199],{"class":1034},[1002,42000,1143],{"class":1030},[1002,42002,42003,42005],{"class":1004,"line":1272},[1002,42004,41206],{"class":1019},[1002,42006,15354],{"class":1030},[1002,42008,42009,42011,42013,42016],{"class":1004,"line":1348},[1002,42010,41856],{"class":1019},[1002,42012,1137],{"class":1030},[1002,42014,42015],{"class":1034},"\"env\"",[1002,42017,1143],{"class":1030},[1002,42019,42020,42022,42024,42027],{"class":1004,"line":1354},[1002,42021,41770],{"class":1019},[1002,42023,1137],{"class":1030},[1002,42025,42026],{"class":1034},"\"jshint **\u002F*.js\"",[1002,42028,1143],{"class":1030},[1002,42030,42031,42033,42035,42038],{"class":1004,"line":1360},[1002,42032,41782],{"class":1019},[1002,42034,1137],{"class":1030},[1002,42036,42037],{"class":1034},"\"mocha test\"",[1002,42039,1143],{"class":1030},[1002,42041,42042,42044,42046,42049],{"class":1004,"line":1366},[1002,42043,41225],{"class":1019},[1002,42045,1137],{"class":1030},[1002,42047,42048],{"class":1034},"\"babel src -d lib\"",[1002,42050,1143],{"class":1030},[1002,42052,42053,42055,42057,42059],{"class":1004,"line":1946},[1002,42054,41237],{"class":1019},[1002,42056,1137],{"class":1030},[1002,42058,40147],{"class":1034},[1002,42060,1143],{"class":1030},[1002,42062,42063,42066,42068,42071],{"class":1004,"line":1956},[1002,42064,42065],{"class":1019}," \"prebuild\"",[1002,42067,1137],{"class":1030},[1002,42069,42070],{"class":1034},"\"npm run lint\"",[1002,42072,1143],{"class":1030},[1002,42074,42075,42078,42080],{"class":1004,"line":1961},[1002,42076,42077],{"class":1019}," \"pretest\"",[1002,42079,1137],{"class":1030},[1002,42081,42082],{"class":1034},"\"\"\n",[1002,42084,42085],{"class":1004,"line":1971},[1002,42086,1502],{"class":1030},[1002,42088,42089,42091,42093,42096],{"class":1004,"line":1980},[1002,42090,41251],{"class":1019},[1002,42092,1201],{"class":1030},[1002,42094,42095],{"class":1034},"\"NPM\"",[1002,42097,1903],{"class":1030},[1002,42099,42100,42102,42104,42106],{"class":1004,"line":1985},[1002,42101,41263],{"class":1019},[1002,42103,1137],{"class":1030},[1002,42105,41268],{"class":1034},[1002,42107,1143],{"class":1030},[1002,42109,42110,42112,42114,42116],{"class":1004,"line":1995},[1002,42111,41275],{"class":1019},[1002,42113,1137],{"class":1030},[1002,42115,41280],{"class":1034},[1002,42117,1143],{"class":1030},[1002,42119,42120,42122],{"class":1004,"line":2006},[1002,42121,41731],{"class":1019},[1002,42123,15354],{"class":1030},[1002,42125,42126,42129,42131,42134],{"class":1004,"line":2011},[1002,42127,42128],{"class":1019}," \"babel-cli\"",[1002,42130,1137],{"class":1030},[1002,42132,42133],{"class":1034},"\"^6.0.0\"",[1002,42135,1143],{"class":1030},[1002,42137,42138,42140,42142,42145],{"class":1004,"line":2017},[1002,42139,41738],{"class":1019},[1002,42141,1137],{"class":1030},[1002,42143,42144],{"class":1034},"\"^2.9.2\"",[1002,42146,1143],{"class":1030},[1002,42148,42149,42151,42153],{"class":1004,"line":2022},[1002,42150,41750],{"class":1019},[1002,42152,1137],{"class":1030},[1002,42154,42155],{"class":1034},"\"^2.5.3\"\n",[1002,42157,42158],{"class":1004,"line":2442},[1002,42159,1269],{"class":1030},[1002,42161,42162],{"class":1004,"line":2466},[1002,42163,1170],{"class":1030},[953,42165,26561],{"id":26560},[925,42167,42168],{},"Hopefully yhis article would motivate you to select NPM as the build tool for your next project. Or replace exisiting Gulp or Grunt tasks with NPM.",[1579,42170,42171],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":998,"searchDepth":1012,"depth":1012,"links":42173},[42174,42179,42180,42181,42182],{"id":41624,"depth":1012,"text":41625,"children":42175},[42176,42177,42178],{"id":41642,"depth":1047,"text":41633},{"id":41651,"depth":1047,"text":41652},{"id":41661,"depth":1047,"text":41662},{"id":41688,"depth":1012,"text":41689},{"id":41868,"depth":1012,"text":41869},{"id":41900,"depth":1012,"text":41901},{"id":26560,"depth":1012,"text":26561},"2016-06-20","\u002Fimages\u002Fblog\u002Ffeatures\u002Fnpm-scripts.jpg",{},{"title":610,"description":612},"blog\u002Fnpm-scripts",[16,17,442],"LvCXW-Zgr_B0_6YWAHESJUsQBQTAQYajnA4V2PQ8SgM",{"id":42191,"title":703,"author":920,"body":42192,"date":42548,"description":705,"extension":1591,"image":42549,"meta":42550,"navigation":1050,"path":704,"seo":42551,"stem":42552,"tags":42553,"__hash__":42554},"blog\u002Fblog\u002Freact-stateless-functional-components.md",{"type":922,"value":42193,"toc":42535},[42194,42198,42208,42212,42215,42219,42222,42277,42283,42287,42295,42299,42302,42306,42309,42430,42433,42506,42510,42513,42517,42520,42524,42527,42529,42532],[953,42195,42197],{"id":42196},"what-are-react-stateless-functional-components","What are React Stateless Functional Components?",[925,42199,42200,42201,42204,42205,948],{},"React stateless functional components are pure JavaScript functions that only have a ",[941,42202,42203],{},"render()"," function and no lifecycle methods like ",[941,42206,42207],{},"componentDidMount",[953,42209,42211],{"id":42210},"advantages-of-stateless-functional-components","Advantages of Stateless Functional Components",[925,42213,42214],{},"Let’s look at why Stateless Functional Components are beneficial.",[1655,42216,42218],{"id":42217},"no-this-keyword","No this keyword",[925,42220,42221],{},"No need of classes means, you don’t have to bind the callbacks to the class.",[993,42223,42225],{"className":995,"code":42224,"language":997,"meta":998,"style":998},"\u002F\u002F With classes\nonClick={this.sayHello.bind(this)}>Say Hello\u003C\u002Fa>\n\u002F\u002F Without classes\nonClick={sayHello}>Say Hi\u003C\u002Fa>\n",[941,42226,42227,42232,42252,42257],{"__ignoreMap":998},[1002,42228,42229],{"class":1004,"line":1005},[1002,42230,42231],{"class":1008},"\u002F\u002F With classes\n",[1002,42233,42234,42236,42238,42241,42243,42246,42248,42250],{"class":1004,"line":1012},[1002,42235,23289],{"class":1030},[1002,42237,2393],{"class":1015},[1002,42239,42240],{"class":1030},"{this.sayHello.bind(this)}",[1002,42242,19171],{"class":1015},[1002,42244,42245],{"class":1030},"Say Hello",[1002,42247,22437],{"class":1015},[1002,42249,933],{"class":1030},[1002,42251,15703],{"class":1015},[1002,42253,42254],{"class":1004,"line":1047},[1002,42255,42256],{"class":1008},"\u002F\u002F Without classes\n",[1002,42258,42259,42261,42263,42266,42268,42271,42273,42275],{"class":1004,"line":1054},[1002,42260,23289],{"class":1030},[1002,42262,2393],{"class":1015},[1002,42264,42265],{"class":1030},"{sayHello}",[1002,42267,19171],{"class":1015},[1002,42269,42270],{"class":1030},"Say Hi",[1002,42272,22437],{"class":1015},[1002,42274,933],{"class":1030},[1002,42276,15703],{"class":1015},[925,42278,42279,42280,42282],{},"This will be helpful for the developers who are struggling with understanding ",[941,42281,3455],{}," keyword.",[1655,42284,42286],{"id":42285},"no-classes-required","No Classes Required",[925,42288,42289,42290,2034,42293,948],{},"Not using classes means we can avoid using classes! That also means we can do without ",[941,42291,42292],{},"extends",[941,42294,4360],{},[1655,42296,42298],{"id":42297},"leave-state-to-the-container","Leave state to the container",[925,42300,42301],{},"Stateless functional components are best for the presentational components, which focus on the UI. This will leave container components to manage the state and pass down data as props to the presentational components.",[1655,42303,42305],{"id":42304},"less-noise","Less Noise",[925,42307,42308],{},"Stateless functional components require less lines of code compared to classes.",[993,42310,42312],{"className":995,"code":42311,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass Car extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return \u003Cdiv>{`Brand: ${this.props.brand}`}\u003C\u002Fdiv>;\n }\n}\n\nexport default Car;\n",[941,42313,42314,42326,42330,42346,42356,42363,42367,42371,42377,42410,42414,42418,42422],{"__ignoreMap":998},[1002,42315,42316,42318,42320,42322,42324],{"class":1004,"line":1005},[1002,42317,943],{"class":1015},[1002,42319,21700],{"class":1030},[1002,42321,1068],{"class":1015},[1002,42323,15543],{"class":1034},[1002,42325,1407],{"class":1030},[1002,42327,42328],{"class":1004,"line":1012},[1002,42329,1051],{"emptyLinePlaceholder":1050},[1002,42331,42332,42334,42336,42338,42340,42342,42344],{"class":1004,"line":1047},[1002,42333,2363],{"class":1015},[1002,42335,2366],{"class":1026},[1002,42337,3014],{"class":1015},[1002,42339,20112],{"class":1026},[1002,42341,948],{"class":1030},[1002,42343,20117],{"class":1026},[1002,42345,1457],{"class":1030},[1002,42347,42348,42350,42352,42354],{"class":1004,"line":1054},[1002,42349,2373],{"class":1015},[1002,42351,1031],{"class":1030},[1002,42353,19533],{"class":2378},[1002,42355,2382],{"class":1030},[1002,42357,42358,42360],{"class":1004,"line":1060},[1002,42359,9725],{"class":1019},[1002,42361,42362],{"class":1030},"(props);\n",[1002,42364,42365],{"class":1004,"line":1272},[1002,42366,1269],{"class":1030},[1002,42368,42369],{"class":1004,"line":1348},[1002,42370,1051],{"emptyLinePlaceholder":1050},[1002,42372,42373,42375],{"class":1004,"line":1354},[1002,42374,20201],{"class":1026},[1002,42376,3025],{"class":1030},[1002,42378,42379,42381,42383,42385,42387,42390,42392,42394,42396,42398,42401,42403,42406,42408],{"class":1004,"line":1360},[1002,42380,2687],{"class":1015},[1002,42382,20660],{"class":1030},[1002,42384,19650],{"class":15711},[1002,42386,24778],{"class":1030},[1002,42388,42389],{"class":1034},"`Brand: ${",[1002,42391,3455],{"class":1019},[1002,42393,948],{"class":1034},[1002,42395,19533],{"class":1030},[1002,42397,948],{"class":1034},[1002,42399,42400],{"class":1030},"brand",[1002,42402,3507],{"class":1034},[1002,42404,42405],{"class":1030},"}\u003C\u002F",[1002,42407,19650],{"class":15711},[1002,42409,21772],{"class":1030},[1002,42411,42412],{"class":1004,"line":1366},[1002,42413,1269],{"class":1030},[1002,42415,42416],{"class":1004,"line":1946},[1002,42417,1170],{"class":1030},[1002,42419,42420],{"class":1004,"line":1956},[1002,42421,1051],{"emptyLinePlaceholder":1050},[1002,42423,42424,42426,42428],{"class":1004,"line":1961},[1002,42425,947],{"class":1015},[1002,42427,15641],{"class":1015},[1002,42429,2630],{"class":1030},[925,42431,42432],{},"By using stateless functional components, this can be written in lesser number of lines.",[993,42434,42436],{"className":995,"code":42435,"language":997,"meta":998,"style":998},"import React from 'react';\n\nconst Car = ({ brand }) => {\n return \u003Cdiv>{`Brand: ${brand}`}\u003C\u002Fdiv>;\n};\nexport default Car;\n",[941,42437,42438,42450,42454,42472,42494,42498],{"__ignoreMap":998},[1002,42439,42440,42442,42444,42446,42448],{"class":1004,"line":1005},[1002,42441,943],{"class":1015},[1002,42443,21700],{"class":1030},[1002,42445,1068],{"class":1015},[1002,42447,15543],{"class":1034},[1002,42449,1407],{"class":1030},[1002,42451,42452],{"class":1004,"line":1012},[1002,42453,1051],{"emptyLinePlaceholder":1050},[1002,42455,42456,42458,42460,42462,42464,42466,42468,42470],{"class":1004,"line":1047},[1002,42457,1016],{"class":1015},[1002,42459,2366],{"class":1026},[1002,42461,1023],{"class":1015},[1002,42463,24446],{"class":1030},[1002,42465,42400],{"class":2378},[1002,42467,24451],{"class":1030},[1002,42469,15497],{"class":1015},[1002,42471,1457],{"class":1030},[1002,42473,42474,42476,42478,42480,42482,42484,42486,42488,42490,42492],{"class":1004,"line":1054},[1002,42475,15066],{"class":1015},[1002,42477,20660],{"class":1030},[1002,42479,19650],{"class":15711},[1002,42481,24778],{"class":1030},[1002,42483,42389],{"class":1034},[1002,42485,42400],{"class":1030},[1002,42487,3507],{"class":1034},[1002,42489,42405],{"class":1030},[1002,42491,19650],{"class":15711},[1002,42493,21772],{"class":1030},[1002,42495,42496],{"class":1004,"line":1060},[1002,42497,1517],{"class":1030},[1002,42499,42500,42502,42504],{"class":1004,"line":1272},[1002,42501,947],{"class":1015},[1002,42503,15641],{"class":1015},[1002,42505,2630],{"class":1030},[1655,42507,42509],{"id":42508},"best-practice","Best Practice",[925,42511,42512],{},"Presentational components focus solely on the UI, so state should be avoided in them. Only container components should handle lifecycle hooks. This makes functional components an ideal candidate for this role.",[1655,42514,42516],{"id":42515},"high-testability","High Testability",[925,42518,42519],{},"Stateless functional components can be easily tested in pure isolation. Not having to deal with state, makes this an easy task.",[1655,42521,42523],{"id":42522},"performant","Performant",[925,42525,42526],{},"No state management and lifecycle methods means there’s no need to allocated memory for those components. This results in improved performance.",[1655,42528,26561],{"id":26560},[925,42530,42531],{},"React’s stateless functional components bring us highly performant, testable, and readable way of writing components.",[1579,42533,42534],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":42536},[42537,42538],{"id":42196,"depth":1012,"text":42197},{"id":42210,"depth":1012,"text":42211,"children":42539},[42540,42541,42542,42543,42544,42545,42546,42547],{"id":42217,"depth":1047,"text":42218},{"id":42285,"depth":1047,"text":42286},{"id":42297,"depth":1047,"text":42298},{"id":42304,"depth":1047,"text":42305},{"id":42508,"depth":1047,"text":42509},{"id":42515,"depth":1047,"text":42516},{"id":42522,"depth":1047,"text":42523},{"id":26560,"depth":1047,"text":26561},"2016-06-16","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-stateless-functional-components.jpg",{},{"title":703,"description":705},"blog\u002Freact-stateless-functional-components",[16,17,140],"_waT4F2lAMBuo5YxHZ6Ac21chQqz6hvDNEd2mAiDw1s",{"id":42556,"title":605,"author":920,"body":42557,"date":43488,"description":607,"extension":1591,"image":43489,"meta":43490,"navigation":1050,"path":606,"seo":43491,"stem":43492,"tags":43493,"__hash__":43494},"blog\u002Fblog\u002Fnodejs-patterns.md",{"type":922,"value":42558,"toc":43479},[42559,42562,42581,42584,42587,42590,42736,42739,42742,42832,42837,42840,42843,42849,42852,42947,42950,42957,43044,43047,43096,43099,43192,43195,43198,43278,43281,43326,43332,43335,43338,43408,43411,43462,43465,43471,43473,43476],[925,42560,42561],{},"Design patterns we are going to investigate are:",[1530,42563,42564,42567,42570,42573,42575,42578],{},[974,42565,42566],{},"Dependency Injection",[974,42568,42569],{},"Factories",[974,42571,42572],{},"Middlewares",[974,42574,8173],{},[974,42576,42577],{},"Singlestons",[974,42579,42580],{},"Streams",[953,42582,42566],{"id":42583},"dependency-injection",[925,42585,42586],{},"Dependency injection is a software\ndesign pattern in which one or more dependencies (or services) are injected, or passed by reference, into a dependent object.",[925,42588,42589],{},"Let’s look at an example where we pass a database as a dependancy.",[993,42591,42593],{"className":995,"code":42592,"language":997,"meta":998,"style":998},"function employeeModel(opt) {\n var db;\n\n if (!opt.db) {\n throw new Error('opt.db is not defined');\n }\n\n db = opt.db;\n\n return {\n create: function (done) {\n db.query('SELECT ...', done);\n },\n };\n}\n\nmodule.exports = employeeModel;\n",[941,42594,42595,42609,42616,42620,42631,42648,42652,42656,42666,42670,42676,42692,42707,42711,42715,42719,42723],{"__ignoreMap":998},[1002,42596,42597,42599,42602,42604,42607],{"class":1004,"line":1005},[1002,42598,6965],{"class":1015},[1002,42600,42601],{"class":1026}," employeeModel",[1002,42603,1031],{"class":1030},[1002,42605,42606],{"class":2378},"opt",[1002,42608,2382],{"class":1030},[1002,42610,42611,42613],{"class":1004,"line":1012},[1002,42612,28293],{"class":1015},[1002,42614,42615],{"class":1030}," db;\n",[1002,42617,42618],{"class":1004,"line":1047},[1002,42619,1051],{"emptyLinePlaceholder":1050},[1002,42621,42622,42624,42626,42628],{"class":1004,"line":1054},[1002,42623,19971],{"class":1015},[1002,42625,6513],{"class":1030},[1002,42627,13559],{"class":1015},[1002,42629,42630],{"class":1030},"opt.db) {\n",[1002,42632,42633,42636,42638,42641,42643,42646],{"class":1004,"line":1060},[1002,42634,42635],{"class":1015}," throw",[1002,42637,2690],{"class":1015},[1002,42639,42640],{"class":1026}," Error",[1002,42642,1031],{"class":1030},[1002,42644,42645],{"class":1034},"'opt.db is not defined'",[1002,42647,1085],{"class":1030},[1002,42649,42650],{"class":1004,"line":1272},[1002,42651,1269],{"class":1030},[1002,42653,42654],{"class":1004,"line":1348},[1002,42655,1051],{"emptyLinePlaceholder":1050},[1002,42657,42658,42661,42663],{"class":1004,"line":1354},[1002,42659,42660],{"class":1030}," db ",[1002,42662,2393],{"class":1015},[1002,42664,42665],{"class":1030}," opt.db;\n",[1002,42667,42668],{"class":1004,"line":1360},[1002,42669,1051],{"emptyLinePlaceholder":1050},[1002,42671,42672,42674],{"class":1004,"line":1366},[1002,42673,15066],{"class":1015},[1002,42675,1457],{"class":1030},[1002,42677,42678,42681,42683,42685,42687,42690],{"class":1004,"line":1946},[1002,42679,42680],{"class":1026}," create",[1002,42682,1137],{"class":1030},[1002,42684,6965],{"class":1015},[1002,42686,6513],{"class":1030},[1002,42688,42689],{"class":2378},"done",[1002,42691,2382],{"class":1030},[1002,42693,42694,42697,42699,42701,42704],{"class":1004,"line":1956},[1002,42695,42696],{"class":1030}," db.",[1002,42698,14980],{"class":1026},[1002,42700,1031],{"class":1030},[1002,42702,42703],{"class":1034},"'SELECT ...'",[1002,42705,42706],{"class":1030},", done);\n",[1002,42708,42709],{"class":1004,"line":1961},[1002,42710,15108],{"class":1030},[1002,42712,42713],{"class":1004,"line":1971},[1002,42714,15113],{"class":1030},[1002,42716,42717],{"class":1004,"line":1980},[1002,42718,1170],{"class":1030},[1002,42720,42721],{"class":1004,"line":1985},[1002,42722,1051],{"emptyLinePlaceholder":1050},[1002,42724,42725,42727,42729,42731,42733],{"class":1004,"line":1995},[1002,42726,1227],{"class":1019},[1002,42728,948],{"class":1030},[1002,42730,1452],{"class":1019},[1002,42732,1023],{"class":1015},[1002,42734,42735],{"class":1030}," employeeModel;\n",[953,42737,42569],{"id":42738},"factories",[925,42740,42741],{},"This pattern provides us with a generic interface for creating object, so we don’t have to worry about the nitty-gritty of the complex constructors.",[993,42743,42745],{"className":995,"code":42744,"language":997,"meta":998,"style":998},"function Employee(opt) {\n this.opt = opt;\n}\n\nfunction create(opt) {\n \u002F\u002F modify the options here\n return new Employee(opt);\n}\n\nmodule.exports.create = create;\n",[941,42746,42747,42759,42771,42775,42779,42792,42797,42808,42812,42816],{"__ignoreMap":998},[1002,42748,42749,42751,42753,42755,42757],{"class":1004,"line":1005},[1002,42750,6965],{"class":1015},[1002,42752,9920],{"class":1026},[1002,42754,1031],{"class":1030},[1002,42756,42606],{"class":2378},[1002,42758,2382],{"class":1030},[1002,42760,42761,42763,42766,42768],{"class":1004,"line":1012},[1002,42762,39364],{"class":1019},[1002,42764,42765],{"class":1030},".opt ",[1002,42767,2393],{"class":1015},[1002,42769,42770],{"class":1030}," opt;\n",[1002,42772,42773],{"class":1004,"line":1047},[1002,42774,1170],{"class":1030},[1002,42776,42777],{"class":1004,"line":1054},[1002,42778,1051],{"emptyLinePlaceholder":1050},[1002,42780,42781,42783,42786,42788,42790],{"class":1004,"line":1060},[1002,42782,6965],{"class":1015},[1002,42784,42785],{"class":1026}," create",[1002,42787,1031],{"class":1030},[1002,42789,42606],{"class":2378},[1002,42791,2382],{"class":1030},[1002,42793,42794],{"class":1004,"line":1272},[1002,42795,42796],{"class":1008}," \u002F\u002F modify the options here\n",[1002,42798,42799,42801,42803,42805],{"class":1004,"line":1348},[1002,42800,15066],{"class":1015},[1002,42802,2690],{"class":1015},[1002,42804,9920],{"class":1026},[1002,42806,42807],{"class":1030},"(opt);\n",[1002,42809,42810],{"class":1004,"line":1354},[1002,42811,1170],{"class":1030},[1002,42813,42814],{"class":1004,"line":1360},[1002,42815,1051],{"emptyLinePlaceholder":1050},[1002,42817,42818,42820,42822,42824,42827,42829],{"class":1004,"line":1366},[1002,42819,1227],{"class":1019},[1002,42821,948],{"class":1030},[1002,42823,1452],{"class":1019},[1002,42825,42826],{"class":1030},".create ",[1002,42828,2393],{"class":1015},[1002,42830,42831],{"class":1030}," create;\n",[7100,42833,42834],{"title":42569,"type":24048},[925,42835,42836],{},"Factories make testing much easier as you can inject module dependencies using this pattern.",[953,42838,42572],{"id":42839},"middlewares",[925,42841,42842],{},"Middlewares (or pipelines) are an essential part of Express, where the output of one unit is the input of the next.",[925,42844,42845],{},[963,42846],{"alt":42847,"src":42848},"Express Middlesware","\u002Fimages\u002Fblog\u002F2016-06-02-nodejs-patterns\u002Fexpress-middleware.jpg",[925,42850,42851],{},"Let’s look at an example",[993,42853,42855],{"className":995,"code":42854,"language":997,"meta":998,"style":998},"var express = require('express');\nvar app = express();\n\napp.get('\u002F', function (req, res) {\n res.send('Hello World!');\n});\n\napp.listen(3000);\n",[941,42856,42857,42874,42887,42891,42915,42927,42931,42935],{"__ignoreMap":998},[1002,42858,42859,42861,42863,42865,42867,42869,42872],{"class":1004,"line":1005},[1002,42860,18311],{"class":1015},[1002,42862,21857],{"class":1030},[1002,42864,2393],{"class":1015},[1002,42866,1027],{"class":1026},[1002,42868,1031],{"class":1030},[1002,42870,42871],{"class":1034},"'express'",[1002,42873,1085],{"class":1030},[1002,42875,42876,42878,42881,42883,42885],{"class":1004,"line":1012},[1002,42877,18311],{"class":1015},[1002,42879,42880],{"class":1030}," app ",[1002,42882,2393],{"class":1015},[1002,42884,21880],{"class":1026},[1002,42886,1428],{"class":1030},[1002,42888,42889],{"class":1004,"line":1047},[1002,42890,1051],{"emptyLinePlaceholder":1050},[1002,42892,42893,42895,42897,42899,42901,42903,42905,42907,42909,42911,42913],{"class":1004,"line":1054},[1002,42894,21891],{"class":1030},[1002,42896,8070],{"class":1026},[1002,42898,1031],{"class":1030},[1002,42900,22153],{"class":1034},[1002,42902,1251],{"class":1030},[1002,42904,6965],{"class":1015},[1002,42906,6513],{"class":1030},[1002,42908,22159],{"class":2378},[1002,42910,1251],{"class":1030},[1002,42912,14985],{"class":2378},[1002,42914,2382],{"class":1030},[1002,42916,42917,42919,42921,42923,42925],{"class":1004,"line":1060},[1002,42918,14992],{"class":1030},[1002,42920,7117],{"class":1026},[1002,42922,1031],{"class":1030},[1002,42924,28429],{"class":1034},[1002,42926,1085],{"class":1030},[1002,42928,42929],{"class":1004,"line":1272},[1002,42930,2804],{"class":1030},[1002,42932,42933],{"class":1004,"line":1348},[1002,42934,1051],{"emptyLinePlaceholder":1050},[1002,42936,42937,42939,42941,42943,42945],{"class":1004,"line":1354},[1002,42938,21891],{"class":1030},[1002,42940,22260],{"class":1026},[1002,42942,1031],{"class":1030},[1002,42944,20832],{"class":1019},[1002,42946,1085],{"class":1030},[953,42948,8173],{"id":42949},"observers",[925,42951,42952,42953,42956],{},"The observers notify the owner object on state changes automatically. In Node.js we can use ",[941,42954,42955],{},"EventEmitter"," to implement this pattern.",[993,42958,42960],{"className":995,"code":42959,"language":997,"meta":998,"style":998},"var util = require('util');\nvar EventEmitter = require('events').EventEmitter;\n\nfunction EmployeeObservable() {\n EventEmitter.call(this);\n}\n\nutil.inherits(EmployeeObservable, EventEmitter);\n",[941,42961,42962,42980,42999,43003,43012,43025,43029,43033],{"__ignoreMap":998},[1002,42963,42964,42966,42969,42971,42973,42975,42978],{"class":1004,"line":1005},[1002,42965,18311],{"class":1015},[1002,42967,42968],{"class":1030}," util ",[1002,42970,2393],{"class":1015},[1002,42972,1027],{"class":1026},[1002,42974,1031],{"class":1030},[1002,42976,42977],{"class":1034},"'util'",[1002,42979,1085],{"class":1030},[1002,42981,42982,42984,42987,42989,42991,42993,42996],{"class":1004,"line":1012},[1002,42983,18311],{"class":1015},[1002,42985,42986],{"class":1030}," EventEmitter ",[1002,42988,2393],{"class":1015},[1002,42990,1027],{"class":1026},[1002,42992,1031],{"class":1030},[1002,42994,42995],{"class":1034},"'events'",[1002,42997,42998],{"class":1030},").EventEmitter;\n",[1002,43000,43001],{"class":1004,"line":1047},[1002,43002,1051],{"emptyLinePlaceholder":1050},[1002,43004,43005,43007,43010],{"class":1004,"line":1054},[1002,43006,6965],{"class":1015},[1002,43008,43009],{"class":1026}," EmployeeObservable",[1002,43011,3025],{"class":1030},[1002,43013,43014,43017,43019,43021,43023],{"class":1004,"line":1060},[1002,43015,43016],{"class":1030}," EventEmitter.",[1002,43018,8426],{"class":1026},[1002,43020,1031],{"class":1030},[1002,43022,3455],{"class":1019},[1002,43024,1085],{"class":1030},[1002,43026,43027],{"class":1004,"line":1272},[1002,43028,1170],{"class":1030},[1002,43030,43031],{"class":1004,"line":1348},[1002,43032,1051],{"emptyLinePlaceholder":1050},[1002,43034,43035,43038,43041],{"class":1004,"line":1354},[1002,43036,43037],{"class":1030},"util.",[1002,43039,43040],{"class":1026},"inherits",[1002,43042,43043],{"class":1030},"(EmployeeObservable, EventEmitter);\n",[925,43045,43046],{},"Now we can use this observable by adding some functionality to it.",[993,43048,43050],{"className":995,"code":43049,"language":997,"meta":998,"style":998},"EmployeeObservable.prototype.login = function (name) {\n this.emit('Logged in as ', name);\n};\n",[941,43051,43052,43075,43092],{"__ignoreMap":998},[1002,43053,43054,43057,43059,43061,43063,43065,43067,43069,43071,43073],{"class":1004,"line":1005},[1002,43055,43056],{"class":1019},"EmployeeObservable",[1002,43058,948],{"class":1030},[1002,43060,3894],{"class":1019},[1002,43062,948],{"class":1030},[1002,43064,10823],{"class":1026},[1002,43066,1023],{"class":1015},[1002,43068,8457],{"class":1015},[1002,43070,6513],{"class":1030},[1002,43072,5911],{"class":2378},[1002,43074,2382],{"class":1030},[1002,43076,43077,43079,43081,43084,43086,43089],{"class":1004,"line":1012},[1002,43078,39364],{"class":1019},[1002,43080,948],{"class":1030},[1002,43082,43083],{"class":1026},"emit",[1002,43085,1031],{"class":1030},[1002,43087,43088],{"class":1034},"'Logged in as '",[1002,43090,43091],{"class":1030},", name);\n",[1002,43093,43094],{"class":1004,"line":1047},[1002,43095,1517],{"class":1030},[925,43097,43098],{},"Now our observable can emit event.",[993,43100,43102],{"className":995,"code":43101,"language":997,"meta":998,"style":998},"var EmployeeObservable = require('EmployeeObservable');\nvar observable = new EmployeeObservable();\n\nobservable.on('Logged in as ', function (name) {\n console.log(name);\n});\n\nobservable.login('Sam');\n",[941,43103,43104,43122,43137,43141,43163,43171,43175,43179],{"__ignoreMap":998},[1002,43105,43106,43108,43111,43113,43115,43117,43120],{"class":1004,"line":1005},[1002,43107,18311],{"class":1015},[1002,43109,43110],{"class":1030}," EmployeeObservable ",[1002,43112,2393],{"class":1015},[1002,43114,1027],{"class":1026},[1002,43116,1031],{"class":1030},[1002,43118,43119],{"class":1034},"'EmployeeObservable'",[1002,43121,1085],{"class":1030},[1002,43123,43124,43126,43129,43131,43133,43135],{"class":1004,"line":1012},[1002,43125,18311],{"class":1015},[1002,43127,43128],{"class":1030}," observable ",[1002,43130,2393],{"class":1015},[1002,43132,2690],{"class":1015},[1002,43134,43009],{"class":1026},[1002,43136,1428],{"class":1030},[1002,43138,43139],{"class":1004,"line":1047},[1002,43140,1051],{"emptyLinePlaceholder":1050},[1002,43142,43143,43146,43149,43151,43153,43155,43157,43159,43161],{"class":1004,"line":1054},[1002,43144,43145],{"class":1030},"observable.",[1002,43147,43148],{"class":1026},"on",[1002,43150,1031],{"class":1030},[1002,43152,43088],{"class":1034},[1002,43154,1251],{"class":1030},[1002,43156,6965],{"class":1015},[1002,43158,6513],{"class":1030},[1002,43160,5911],{"class":2378},[1002,43162,2382],{"class":1030},[1002,43164,43165,43167,43169],{"class":1004,"line":1060},[1002,43166,6977],{"class":1030},[1002,43168,2886],{"class":1026},[1002,43170,17508],{"class":1030},[1002,43172,43173],{"class":1004,"line":1272},[1002,43174,2804],{"class":1030},[1002,43176,43177],{"class":1004,"line":1348},[1002,43178,1051],{"emptyLinePlaceholder":1050},[1002,43180,43181,43183,43185,43187,43190],{"class":1004,"line":1354},[1002,43182,43145],{"class":1030},[1002,43184,10823],{"class":1026},[1002,43186,1031],{"class":1030},[1002,43188,43189],{"class":1034},"'Sam'",[1002,43191,1085],{"class":1030},[953,43193,42577],{"id":43194},"singlestons",[925,43196,43197],{},"By using singleton pattern we are making sure that the number of instances of a class is restricted to one.",[993,43199,43201],{"className":995,"code":43200,"language":997,"meta":998,"style":998},"var PI = Math.PI;\n\nfunction circle(radius) {\n return radius * radius * PI;\n}\n\nmodule.exports.circle = circle;\n",[941,43202,43203,43219,43223,43237,43254,43258,43262],{"__ignoreMap":998},[1002,43204,43205,43207,43210,43212,43214,43217],{"class":1004,"line":1005},[1002,43206,18311],{"class":1015},[1002,43208,43209],{"class":1019}," PI",[1002,43211,1023],{"class":1015},[1002,43213,4673],{"class":1030},[1002,43215,43216],{"class":1019},"PI",[1002,43218,1407],{"class":1030},[1002,43220,43221],{"class":1004,"line":1012},[1002,43222,1051],{"emptyLinePlaceholder":1050},[1002,43224,43225,43227,43230,43232,43235],{"class":1004,"line":1047},[1002,43226,6965],{"class":1015},[1002,43228,43229],{"class":1026}," circle",[1002,43231,1031],{"class":1030},[1002,43233,43234],{"class":2378},"radius",[1002,43236,2382],{"class":1030},[1002,43238,43239,43241,43244,43246,43248,43250,43252],{"class":1004,"line":1054},[1002,43240,15066],{"class":1015},[1002,43242,43243],{"class":1030}," radius ",[1002,43245,4703],{"class":1015},[1002,43247,43243],{"class":1030},[1002,43249,4703],{"class":1015},[1002,43251,43209],{"class":1019},[1002,43253,1407],{"class":1030},[1002,43255,43256],{"class":1004,"line":1060},[1002,43257,1170],{"class":1030},[1002,43259,43260],{"class":1004,"line":1272},[1002,43261,1051],{"emptyLinePlaceholder":1050},[1002,43263,43264,43266,43268,43270,43273,43275],{"class":1004,"line":1348},[1002,43265,1227],{"class":1019},[1002,43267,948],{"class":1030},[1002,43269,1452],{"class":1019},[1002,43271,43272],{"class":1030},".circle ",[1002,43274,2393],{"class":1015},[1002,43276,43277],{"class":1030}," circle;\n",[925,43279,43280],{},"Now let’s use this module to instantiate an object.",[993,43282,43284],{"className":995,"code":43283,"language":997,"meta":998,"style":998},"var area = require('.\u002Farea');\n\nconsole.log(area.circle(5));\n",[941,43285,43286,43304,43308],{"__ignoreMap":998},[1002,43287,43288,43290,43293,43295,43297,43299,43302],{"class":1004,"line":1005},[1002,43289,18311],{"class":1015},[1002,43291,43292],{"class":1030}," area ",[1002,43294,2393],{"class":1015},[1002,43296,1027],{"class":1026},[1002,43298,1031],{"class":1030},[1002,43300,43301],{"class":1034},"'.\u002Farea'",[1002,43303,1085],{"class":1030},[1002,43305,43306],{"class":1004,"line":1012},[1002,43307,1051],{"emptyLinePlaceholder":1050},[1002,43309,43310,43312,43314,43317,43320,43322,43324],{"class":1004,"line":1047},[1002,43311,2883],{"class":1030},[1002,43313,2886],{"class":1026},[1002,43315,43316],{"class":1030},"(area.",[1002,43318,43319],{"class":1026},"circle",[1002,43321,1031],{"class":1030},[1002,43323,2859],{"class":1019},[1002,43325,5663],{"class":1030},[7100,43327,43329],{"title":43328,"type":24048},"Most Common Node.js Pattern",[925,43330,43331],{},"Because require is common in Node.js, that makes the most common pattern.",[953,43333,42580],{"id":43334},"streams",[925,43336,43337],{},"Stream are like special pipelines, designed for complex operations like processing large amounts of flowing data.",[993,43339,43341],{"className":995,"code":43340,"language":997,"meta":998,"style":998},"process.stdin.on('readable', function () {\n var buffer = process.stdin.read(5);\n console.dir(buffer);\n process.stdin.read(0);\n});\n",[941,43342,43343,43361,43381,43391,43404],{"__ignoreMap":998},[1002,43344,43345,43348,43350,43352,43355,43357,43359],{"class":1004,"line":1005},[1002,43346,43347],{"class":1030},"process.stdin.",[1002,43349,43148],{"class":1026},[1002,43351,1031],{"class":1030},[1002,43353,43354],{"class":1034},"'readable'",[1002,43356,1251],{"class":1030},[1002,43358,6965],{"class":1015},[1002,43360,9772],{"class":1030},[1002,43362,43363,43365,43368,43370,43373,43375,43377,43379],{"class":1004,"line":1012},[1002,43364,28293],{"class":1015},[1002,43366,43367],{"class":1030}," buffer ",[1002,43369,2393],{"class":1015},[1002,43371,43372],{"class":1030}," process.stdin.",[1002,43374,29424],{"class":1026},[1002,43376,1031],{"class":1030},[1002,43378,2859],{"class":1019},[1002,43380,1085],{"class":1030},[1002,43382,43383,43385,43388],{"class":1004,"line":1047},[1002,43384,6977],{"class":1030},[1002,43386,43387],{"class":1026},"dir",[1002,43389,43390],{"class":1030},"(buffer);\n",[1002,43392,43393,43396,43398,43400,43402],{"class":1004,"line":1054},[1002,43394,43395],{"class":1030}," process.stdin.",[1002,43397,29424],{"class":1026},[1002,43399,1031],{"class":1030},[1002,43401,5867],{"class":1019},[1002,43403,1085],{"class":1030},[1002,43405,43406],{"class":1004,"line":1060},[1002,43407,2804],{"class":1030},[925,43409,43410],{},"The console output will be like:",[993,43412,43414],{"className":1797,"code":43413,"language":1799,"meta":998,"style":998},"(echo abc; sleep 1; echo def; sleep 1; echo ghi) | node consume2.js\n",[941,43415,43416],{"__ignoreMap":998},[1002,43417,43418,43420,43423,43426,43428,43431,43433,43435,43437,43440,43442,43444,43446,43448,43450,43453,43455,43457,43459],{"class":1004,"line":1005},[1002,43419,1031],{"class":1030},[1002,43421,43422],{"class":1019},"echo",[1002,43424,43425],{"class":1034}," abc",[1002,43427,17938],{"class":1030},[1002,43429,43430],{"class":1026},"sleep",[1002,43432,6246],{"class":1019},[1002,43434,17938],{"class":1030},[1002,43436,43422],{"class":1019},[1002,43438,43439],{"class":1034}," def",[1002,43441,17938],{"class":1030},[1002,43443,43430],{"class":1026},[1002,43445,6246],{"class":1019},[1002,43447,17938],{"class":1030},[1002,43449,43422],{"class":1019},[1002,43451,43452],{"class":1034}," ghi",[1002,43454,5876],{"class":1030},[1002,43456,33508],{"class":1015},[1002,43458,16584],{"class":1026},[1002,43460,43461],{"class":1034}," consume2.js\n",[925,43463,43464],{},"Output:",[993,43466,43469],{"className":43467,"code":43468,"language":24241},[24239],"\u003CBuffer 61 62 63>\n\u003CBuffer 0a 64 65>\n\u003CBuffer 66 0a 67>\n\u003CBuffer 68 69 0a>\n",[941,43470,43468],{"__ignoreMap":998},[953,43472,26561],{"id":26560},[925,43474,43475],{},"It is totally up to you when to use patterns in Node.js, but having this knowledge in your toolbox will come handy.",[1579,43477,43478],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":43480},[43481,43482,43483,43484,43485,43486,43487],{"id":42583,"depth":1012,"text":42566},{"id":42738,"depth":1012,"text":42569},{"id":42839,"depth":1012,"text":42572},{"id":42949,"depth":1012,"text":8173},{"id":43194,"depth":1012,"text":42577},{"id":43334,"depth":1012,"text":42580},{"id":26560,"depth":1012,"text":26561},"2016-06-02","\u002Fimages\u002Fblog\u002Ffeatures\u002Fnodejs-patterns.jpg",{},{"title":605,"description":607},"blog\u002Fnodejs-patterns",[16,442],"gNumbtrPrBOcWsFSHtuOL6jymeQL1ht3vPwEC_wcZ5c",{"id":43496,"title":491,"author":920,"body":43497,"date":43932,"description":493,"extension":1591,"image":43933,"meta":43934,"navigation":1050,"path":492,"seo":43935,"stem":43936,"tags":43937,"__hash__":43938},"blog\u002Fblog\u002Fitcss.md",{"type":922,"value":43498,"toc":43922},[43499,43502,43516,43519,43523,43526,43529,43537,43540,43546,43550,43553,43576,43582,43585,43589,43591,43602,43629,43632,43634,43645,43694,43698,43700,43720,43785,43787,43789,43800,43872,43876,43878,43881,43912,43916,43919],[925,43500,43501],{},"Problems with CSS at scale can be varied:",[1530,43503,43504,43507,43510,43513],{},[974,43505,43506],{},"Specificity",[974,43508,43509],{},"Global namespace",[974,43511,43512],{},"The cascade & inheritance",[974,43514,43515],{},"The source order",[925,43517,43518],{},"The result of all above problems will lead to redundancy in CSS code.",[953,43520,43522],{"id":43521},"specificity-wars","Specificity Wars",[925,43524,43525],{},"No matter how well organized your source code is with well considered source and cascading or even using naming conventions, specificity can break all of it.",[925,43527,43528],{},"What are we trying to resolve?",[1530,43530,43531,43534],{},[974,43532,43533],{},"Reduce redundancy",[974,43535,43536],{},"Eliminate specificity issues",[925,43538,43539],{},"Most CSS related methodologies would try and avoid the features of CSS but ITCSS makes them work to our advantage.",[7100,43541,43543],{"title":43542,"type":24048},"Compatibility",[925,43544,43545],{},"ITCSS is compatible with the likes of SMACSS, BEM, or OOCSS.",[953,43547,43549],{"id":43548},"default-layers","Default Layers",[925,43551,43552],{},"The default layers of ITCSS are as follows;",[1530,43554,43555,43558,43561,43564,43567,43570,43573],{},[974,43556,43557],{},"Settings Global variables, config switches",[974,43559,43560],{},"Tools Default mixins and functions",[974,43562,43563],{},"Generic Ground-zero styles (Normalize.css, resets, box-sizing)",[974,43565,43566],{},"Base Unclassed HTML elements (type selectors)",[974,43568,43569],{},"Objects Cosmetic-free design patterns",[974,43571,43572],{},"Components Designed components, chunks of UI",[974,43574,43575],{},"Trumps Helpers and overrides",[925,43577,43578],{},[963,43579],{"alt":43580,"src":43581},"ITCSS Triangle","\u002Fimages\u002Fblog\u002F2016-05-31-itcss\u002Ftriangle.png",[925,43583,43584],{},"Let’s look at each of the layers.",[1655,43586,43588],{"id":43587},"settings","Settings",[925,43590,16017],{},[1530,43592,43593,43596,43599],{},[974,43594,43595],{},"Globally-available settings.",[974,43597,43598],{},"Config switches.",[974,43600,43601],{},"Brand colours, etc.",[993,43603,43605],{"className":35707,"code":43604,"language":29,"meta":998,"style":998},"$color-ui: #bada55;\n$spacing-unit: 10px;\n",[941,43606,43607,43619],{"__ignoreMap":998},[1002,43608,43609,43611,43614,43616],{"class":1004,"line":1005},[1002,43610,15864],{"class":1030},[1002,43612,43613],{"class":15711},"color-ui",[1002,43615,1137],{"class":1030},[1002,43617,43618],{"class":18541},"#bada55;\n",[1002,43620,43621,43623,43626],{"class":1004,"line":1012},[1002,43622,15864],{"class":1030},[1002,43624,43625],{"class":15711},"spacing-unit",[1002,43627,43628],{"class":1030},": 10px;\n",[925,43630,43631],{},"Generic",[925,43633,16017],{},[1530,43635,43636,43639,43642],{},[974,43637,43638],{},"Ground zero styles",[974,43640,43641],{},"Low-specificity, far-reaching",[974,43643,43644],{},"Resets, Normalize.css, etc",[993,43646,43648],{"className":35707,"code":43647,"language":29,"meta":998,"style":998},"* {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n",[941,43649,43650,43656,43668,43679,43690],{"__ignoreMap":998},[1002,43651,43652,43654],{"class":1004,"line":1005},[1002,43653,4703],{"class":15711},[1002,43655,1457],{"class":1030},[1002,43657,43658,43661,43663,43666],{"class":1004,"line":1012},[1002,43659,43660],{"class":1019}," -webkit-box-sizing",[1002,43662,1137],{"class":1030},[1002,43664,43665],{"class":1019},"border-box",[1002,43667,1407],{"class":1030},[1002,43669,43670,43673,43675,43677],{"class":1004,"line":1047},[1002,43671,43672],{"class":1019}," -moz-box-sizing",[1002,43674,1137],{"class":1030},[1002,43676,43665],{"class":1019},[1002,43678,1407],{"class":1030},[1002,43680,43681,43684,43686,43688],{"class":1004,"line":1054},[1002,43682,43683],{"class":1019}," box-sizing",[1002,43685,1137],{"class":1030},[1002,43687,43665],{"class":1019},[1002,43689,1407],{"class":1030},[1002,43691,43692],{"class":1004,"line":1060},[1002,43693,1170],{"class":1030},[1655,43695,43697],{"id":43696},"objects","Objects",[925,43699,16017],{},[1530,43701,43702,43705,43708,43711,43714],{},[974,43703,43704],{},"OOCSS",[974,43706,43707],{},"Design patterns",[974,43709,43710],{},"No cosmetics",[974,43712,43713],{},"Begin using classes exclusively",[974,43715,43716,43717,1539],{},"Agnostically named (e.g. ",[941,43718,43719],{},".uilist{}",[993,43721,43723],{"className":35707,"code":43722,"language":29,"meta":998,"style":998},".ui-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ui-list__item {\n padding: $spacing-unit;\n}\n",[941,43724,43725,43732,43742,43752,43763,43767,43774,43781],{"__ignoreMap":998},[1002,43726,43727,43730],{"class":1004,"line":1005},[1002,43728,43729],{"class":1026},".ui-list",[1002,43731,1457],{"class":1030},[1002,43733,43734,43736,43738,43740],{"class":1004,"line":1012},[1002,43735,37384],{"class":1019},[1002,43737,1137],{"class":1030},[1002,43739,5867],{"class":1019},[1002,43741,1407],{"class":1030},[1002,43743,43744,43746,43748,43750],{"class":1004,"line":1047},[1002,43745,37280],{"class":1019},[1002,43747,1137],{"class":1030},[1002,43749,5867],{"class":1019},[1002,43751,1407],{"class":1030},[1002,43753,43754,43757,43759,43761],{"class":1004,"line":1054},[1002,43755,43756],{"class":1019}," list-style",[1002,43758,1137],{"class":1030},[1002,43760,36079],{"class":1019},[1002,43762,1407],{"class":1030},[1002,43764,43765],{"class":1004,"line":1060},[1002,43766,1170],{"class":1030},[1002,43768,43769,43772],{"class":1004,"line":1272},[1002,43770,43771],{"class":1026},".ui-list__item",[1002,43773,1457],{"class":1030},[1002,43775,43776,43778],{"class":1004,"line":1348},[1002,43777,37280],{"class":1019},[1002,43779,43780],{"class":1030},": $spacing-unit;\n",[1002,43782,43783],{"class":1004,"line":1354},[1002,43784,1170],{"class":1030},[1655,43786,29845],{"id":29844},[925,43788,16017],{},[1530,43790,43791,43794,43797],{},[974,43792,43793],{},"Designed pieces of UI.",[974,43795,43796],{},"Still only using classes",[974,43798,43799],{},"More explicitly named(e.g. .products-list {}).",[993,43801,43803],{"className":35707,"code":43802,"language":29,"meta":998,"style":998},".products-list {\n @include font-brand();\n border-top: 1px solid $color-ui;\n}\n.products-list__item {\n border-bottom: 1px solid $color-ui;\n}\n",[941,43804,43805,43812,43824,43842,43846,43853,43868],{"__ignoreMap":998},[1002,43806,43807,43810],{"class":1004,"line":1005},[1002,43808,43809],{"class":1026},".products-list",[1002,43811,1457],{"class":1030},[1002,43813,43814,43816,43819,43822],{"class":1004,"line":1012},[1002,43815,17196],{"class":1030},[1002,43817,43818],{"class":1019},"include",[1002,43820,43821],{"class":1019}," font-brand",[1002,43823,1428],{"class":1030},[1002,43825,43826,43829,43831,43833,43836,43839],{"class":1004,"line":1047},[1002,43827,43828],{"class":1019}," border-top",[1002,43830,1137],{"class":1030},[1002,43832,6211],{"class":1019},[1002,43834,43835],{"class":1015},"px",[1002,43837,43838],{"class":1019}," solid",[1002,43840,43841],{"class":1030}," $color-ui;\n",[1002,43843,43844],{"class":1004,"line":1054},[1002,43845,1170],{"class":1030},[1002,43847,43848,43851],{"class":1004,"line":1060},[1002,43849,43850],{"class":1026},".products-list__item",[1002,43852,1457],{"class":1030},[1002,43854,43855,43858,43860,43862,43864,43866],{"class":1004,"line":1272},[1002,43856,43857],{"class":1019}," border-bottom",[1002,43859,1137],{"class":1030},[1002,43861,6211],{"class":1019},[1002,43863,43835],{"class":1015},[1002,43865,43838],{"class":1019},[1002,43867,43841],{"class":1030},[1002,43869,43870],{"class":1004,"line":1348},[1002,43871,1170],{"class":1030},[1655,43873,43875],{"id":43874},"trumps","Trumps",[925,43877,16017],{},[925,43879,43880],{},"Overrides, helpers, utilities\nOnly affect one piece of the DOM at a time\nUsually carry !important.",[993,43882,43884],{"className":35707,"code":43883,"language":29,"meta":998,"style":998},".one-half {\n width: 50% !important;\n}\n",[941,43885,43886,43893,43908],{"__ignoreMap":998},[1002,43887,43888,43891],{"class":1004,"line":1005},[1002,43889,43890],{"class":1026},".one-half",[1002,43892,1457],{"class":1030},[1002,43894,43895,43897,43899,43901,43903,43906],{"class":1004,"line":1012},[1002,43896,37240],{"class":1019},[1002,43898,1137],{"class":1030},[1002,43900,4800],{"class":1019},[1002,43902,32598],{"class":1015},[1002,43904,43905],{"class":1015}," !important",[1002,43907,1407],{"class":1030},[1002,43909,43910],{"class":1004,"line":1047},[1002,43911,1170],{"class":1030},[1655,43913,43915],{"id":43914},"scaling-itcss","Scaling ITCSS",[925,43917,43918],{},"Add or remove layers if, as, and when you need to.\nNot using a preprocessor? Remove the Settings and Tools layers.\nDon’t use OOCSS? Remove the Objects layer.\nNeed theming? Add a Theme layer.",[1579,43920,43921],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":998,"searchDepth":1012,"depth":1012,"links":43923},[43924,43925],{"id":43521,"depth":1012,"text":43522},{"id":43548,"depth":1012,"text":43549,"children":43926},[43927,43928,43929,43930,43931],{"id":43587,"depth":1047,"text":43588},{"id":43696,"depth":1047,"text":43697},{"id":29844,"depth":1047,"text":29845},{"id":43874,"depth":1047,"text":43875},{"id":43914,"depth":1047,"text":43915},"2016-05-31","\u002Fimages\u002Fblog\u002Ffeatures\u002Fitcss.jpg",{},{"title":491,"description":493},"blog\u002Fitcss",[16,29],"KB2UA976jzBhcLrpQdRQWMq68r4FeG57DJPezH9wbjA",{"id":43940,"title":824,"author":920,"body":43941,"date":44384,"description":826,"extension":1591,"image":44385,"meta":44386,"navigation":1050,"path":825,"seo":44387,"stem":44388,"tags":44389,"__hash__":44390},"blog\u002Fblog\u002Ftape-tap.md",{"type":922,"value":43942,"toc":44374},[43943,43947,43950,43954,43963,43967,43970,43974,43977,43980,43983,43989,43992,43996,43999,44016,44029,44047,44050,44131,44134,44156,44164,44242,44245,44248,44254,44257,44332,44338,44356,44362,44364,44371],[953,43944,43946],{"id":43945},"why-not-mocha-jasmine-etc","Why not Mocha, Jasmine etc?",[925,43948,43949],{},"Even though hugely popular, Mocha and Jasmine have their own gotchas.",[1655,43951,43953],{"id":43952},"globals","Globals",[925,43955,43956,43957,2034,43959,43962],{},"Global functions like ",[941,43958,12742],{},[941,43960,43961],{},"it"," pollute the global environment.",[1655,43964,43966],{"id":43965},"too-much-configuration","Too much Configuration",[925,43968,43969],{},"Mocha needs an assertion library and also a reporting library, and then extra parameters to be passed on to Mocha for transpiling if the tests were written in ES6.",[1655,43971,43973],{"id":43972},"shared-state","Shared State",[925,43975,43976],{},"Functions called before and after like beforeEach and afterEach would encourage sharing state between tests. But Tape would use setup and teardown functions for individual tests, the state will be retained in the local variables.",[953,43978,43979],{"id":11741},"TAP",[925,43981,43982],{},"Tap formats test results in an easy to read format:",[993,43984,43987],{"className":43985,"code":43986,"language":24241},[24239],"TAP version 13\n# equivalence\nok 1 these two numbers are equal\n\n1..1\n# tests 1\n# pass 1\n\n# ok\n",[941,43988,43986],{"__ignoreMap":998},[925,43990,43991],{},"TAP also allows us to pipe results generated from other tools following TAP protocol.",[953,43993,43995],{"id":43994},"example","Example",[925,43997,43998],{},"Before we start, we need to install tape, so we can run tests in Node.",[993,44000,44002],{"className":1797,"code":44001,"language":1799,"meta":998,"style":998},"npm install tape -g\n",[941,44003,44004],{"__ignoreMap":998},[1002,44005,44006,44008,44010,44013],{"class":1004,"line":1005},[1002,44007,27346],{"class":1026},[1002,44009,27349],{"class":1034},[1002,44011,44012],{"class":1034}," tape",[1002,44014,44015],{"class":1019}," -g\n",[925,44017,44018,44019,2034,44022,44025,44026,948],{},"You don’t need to install tape globally, if you are not running tests in command line. Ideally you should have ",[941,44020,44021],{},"tape",[941,44023,44024],{},"tap-sepc"," installed as ",[941,44027,44028],{},"devDependencies",[993,44030,44032],{"className":1797,"code":44031,"language":1799,"meta":998,"style":998},"npm install tape tap-spec ––save–dev\n",[941,44033,44034],{"__ignoreMap":998},[1002,44035,44036,44038,44040,44042,44045],{"class":1004,"line":1005},[1002,44037,27346],{"class":1026},[1002,44039,27349],{"class":1034},[1002,44041,44012],{"class":1034},[1002,44043,44044],{"class":1034}," tap-spec",[1002,44046,33085],{"class":1034},[925,44048,44049],{},"Now let’s look at a simple example on how to use Tape.",[993,44051,44053],{"className":995,"code":44052,"language":997,"meta":998,"style":998},"var test = require('tape');\n\ntest('Equation test', function (t) {\n t.equal(1, 1, '1 should be equal to 1');\n t.end();\n});\n",[941,44054,44055,44073,44077,44097,44119,44127],{"__ignoreMap":998},[1002,44056,44057,44059,44062,44064,44066,44068,44071],{"class":1004,"line":1005},[1002,44058,18311],{"class":1015},[1002,44060,44061],{"class":1030}," test ",[1002,44063,2393],{"class":1015},[1002,44065,1027],{"class":1026},[1002,44067,1031],{"class":1030},[1002,44069,44070],{"class":1034},"'tape'",[1002,44072,1085],{"class":1030},[1002,44074,44075],{"class":1004,"line":1012},[1002,44076,1051],{"emptyLinePlaceholder":1050},[1002,44078,44079,44081,44083,44086,44088,44090,44092,44095],{"class":1004,"line":1047},[1002,44080,21237],{"class":1026},[1002,44082,1031],{"class":1030},[1002,44084,44085],{"class":1034},"'Equation test'",[1002,44087,1251],{"class":1030},[1002,44089,6965],{"class":1015},[1002,44091,6513],{"class":1030},[1002,44093,44094],{"class":2378},"t",[1002,44096,2382],{"class":1030},[1002,44098,44099,44102,44104,44106,44108,44110,44112,44114,44117],{"class":1004,"line":1054},[1002,44100,44101],{"class":1030}," t.",[1002,44103,38558],{"class":1026},[1002,44105,1031],{"class":1030},[1002,44107,6211],{"class":1019},[1002,44109,1251],{"class":1030},[1002,44111,6211],{"class":1019},[1002,44113,1251],{"class":1030},[1002,44115,44116],{"class":1034},"'1 should be equal to 1'",[1002,44118,1085],{"class":1030},[1002,44120,44121,44123,44125],{"class":1004,"line":1060},[1002,44122,44101],{"class":1030},[1002,44124,28424],{"class":1026},[1002,44126,1428],{"class":1030},[1002,44128,44129],{"class":1004,"line":1272},[1002,44130,2804],{"class":1030},[925,44132,44133],{},"We bring in the Tape module using require. Assuming you have Node environment setup, we can run the tests in command line.",[993,44135,44137],{"className":1797,"code":44136,"language":1799,"meta":998,"style":998},"tape tests\u002F**\u002F*.js\n",[941,44138,44139],{"__ignoreMap":998},[1002,44140,44141,44143,44146,44149,44151,44153],{"class":1004,"line":1005},[1002,44142,44021],{"class":1026},[1002,44144,44145],{"class":1034}," tests\u002F",[1002,44147,44148],{"class":1019},"**",[1002,44150,4685],{"class":1034},[1002,44152,4703],{"class":1019},[1002,44154,44155],{"class":1034},".js\n",[925,44157,44158,44159,2034,44161,44163],{},"If you compared the same test with mocha you will realise that you will need to write more code with ",[941,44160,12742],{},[941,44162,43961],{}," methods.",[993,44165,44167],{"className":995,"code":44166,"language":997,"meta":998,"style":998},"var assert = require('assert');\n\ndescribe('Equation test', function () {\n it('1 should be equal to 1', function () {\n assert.equal(1, 1);\n });\n});\n",[941,44168,44169,44186,44190,44204,44218,44234,44238],{"__ignoreMap":998},[1002,44170,44171,44173,44175,44177,44179,44181,44184],{"class":1004,"line":1005},[1002,44172,18311],{"class":1015},[1002,44174,38486],{"class":1030},[1002,44176,2393],{"class":1015},[1002,44178,1027],{"class":1026},[1002,44180,1031],{"class":1030},[1002,44182,44183],{"class":1034},"'assert'",[1002,44185,1085],{"class":1030},[1002,44187,44188],{"class":1004,"line":1012},[1002,44189,1051],{"emptyLinePlaceholder":1050},[1002,44191,44192,44194,44196,44198,44200,44202],{"class":1004,"line":1047},[1002,44193,12742],{"class":1026},[1002,44195,1031],{"class":1030},[1002,44197,44085],{"class":1034},[1002,44199,1251],{"class":1030},[1002,44201,6965],{"class":1015},[1002,44203,9772],{"class":1030},[1002,44205,44206,44208,44210,44212,44214,44216],{"class":1004,"line":1054},[1002,44207,34260],{"class":1026},[1002,44209,1031],{"class":1030},[1002,44211,44116],{"class":1034},[1002,44213,1251],{"class":1030},[1002,44215,6965],{"class":1015},[1002,44217,9772],{"class":1030},[1002,44219,44220,44222,44224,44226,44228,44230,44232],{"class":1004,"line":1060},[1002,44221,38555],{"class":1030},[1002,44223,38558],{"class":1026},[1002,44225,1031],{"class":1030},[1002,44227,6211],{"class":1019},[1002,44229,1251],{"class":1030},[1002,44231,6211],{"class":1019},[1002,44233,1085],{"class":1030},[1002,44235,44236],{"class":1004,"line":1272},[1002,44237,19836],{"class":1030},[1002,44239,44240],{"class":1004,"line":1348},[1002,44241,2804],{"class":1030},[925,44243,44244],{},"Unlike Mocha, Tape doesn’t need a test runner. You can run tests as modules with Node.",[925,44246,44247],{},"Less abstraction means Tape code is easier to read and understand.",[925,44249,44250,44251,948],{},"ES6\nIf you are like me and love write your JavaScript code in the latest and the greatest features ES6 has to offer, you can do so with the help of Babel via a require hook called ",[941,44252,44253],{},"babel-register",[925,44255,44256],{},"Now we can use ES6 features to write tests.",[993,44258,44260],{"className":995,"code":44259,"language":997,"meta":998,"style":998},"var test = require('tape');\n\ntest('Equation test', (t) => {\n t.equal(1, 1, '1 should be equal to 1');\n t.end();\n});\n",[941,44261,44262,44278,44282,44300,44320,44328],{"__ignoreMap":998},[1002,44263,44264,44266,44268,44270,44272,44274,44276],{"class":1004,"line":1005},[1002,44265,18311],{"class":1015},[1002,44267,44061],{"class":1030},[1002,44269,2393],{"class":1015},[1002,44271,1027],{"class":1026},[1002,44273,1031],{"class":1030},[1002,44275,44070],{"class":1034},[1002,44277,1085],{"class":1030},[1002,44279,44280],{"class":1004,"line":1012},[1002,44281,1051],{"emptyLinePlaceholder":1050},[1002,44283,44284,44286,44288,44290,44292,44294,44296,44298],{"class":1004,"line":1047},[1002,44285,21237],{"class":1026},[1002,44287,1031],{"class":1030},[1002,44289,44085],{"class":1034},[1002,44291,22156],{"class":1030},[1002,44293,44094],{"class":2378},[1002,44295,5876],{"class":1030},[1002,44297,15497],{"class":1015},[1002,44299,1457],{"class":1030},[1002,44301,44302,44304,44306,44308,44310,44312,44314,44316,44318],{"class":1004,"line":1054},[1002,44303,44101],{"class":1030},[1002,44305,38558],{"class":1026},[1002,44307,1031],{"class":1030},[1002,44309,6211],{"class":1019},[1002,44311,1251],{"class":1030},[1002,44313,6211],{"class":1019},[1002,44315,1251],{"class":1030},[1002,44317,44116],{"class":1034},[1002,44319,1085],{"class":1030},[1002,44321,44322,44324,44326],{"class":1004,"line":1060},[1002,44323,44101],{"class":1030},[1002,44325,28424],{"class":1026},[1002,44327,1428],{"class":1030},[1002,44329,44330],{"class":1004,"line":1272},[1002,44331,2804],{"class":1030},[925,44333,44334,44335,44337],{},"To run tests, now we need the ",[941,44336,44253],{}," flag.",[993,44339,44341],{"className":1797,"code":44340,"language":1799,"meta":998,"style":998},"tape -r babel-register tests\u002Ftest02.js\n",[941,44342,44343],{"__ignoreMap":998},[1002,44344,44345,44347,44350,44353],{"class":1004,"line":1005},[1002,44346,44021],{"class":1026},[1002,44348,44349],{"class":1019}," -r",[1002,44351,44352],{"class":1034}," babel-register",[1002,44354,44355],{"class":1034}," tests\u002Ftest02.js\n",[925,44357,3898,44358,44361],{},[941,44359,44360],{},"-r"," flags makes sure babel-register loads before running any tests, to allow for JIT compilation.",[953,44363,26561],{"id":26560},[925,44365,44366,44367,948],{},"The code snippets for this post can be found on ",[933,44368,38060],{"href":44369,"rel":44370},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Ftape-tap-intro",[937],[1579,44372,44373],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":44375},[44376,44381,44382,44383],{"id":43945,"depth":1012,"text":43946,"children":44377},[44378,44379,44380],{"id":43952,"depth":1047,"text":43953},{"id":43965,"depth":1047,"text":43966},{"id":43972,"depth":1047,"text":43973},{"id":11741,"depth":1012,"text":43979},{"id":43994,"depth":1012,"text":43995},{"id":26560,"depth":1012,"text":26561},"2016-05-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Ftape-tap.jpg",{},{"title":824,"description":826},"blog\u002Ftape-tap",[16,17,828],"sRou2UwSEII2Bl2TNMSi7lfmd_J8ijyBeOcVQV8cTOg",{"id":44392,"title":506,"author":920,"body":44393,"date":45133,"description":508,"extension":1591,"image":45134,"meta":45135,"navigation":1050,"path":507,"seo":45136,"stem":45137,"tags":45138,"__hash__":45139},"blog\u002Fblog\u002Fjavascript-console.md",{"type":922,"value":44394,"toc":45122},[44395,44399,44402,44473,44476,44482,44496,44499,44503,44506,44538,44541,44547,44551,44554,44587,44590,44595,44599,44606,44637,44639,44644,44648,44654,44760,44762,44768,44772,44778,44809,44811,44816,44820,44826,44912,44914,44919,44923,44933,45015,45017,45023,45027,45034,45106,45108,45114,45116,45119],[953,44396,44398],{"id":44397},"basic-logging","Basic Logging",[925,44400,44401],{},"Let’s start by looking at the basic logging methods.",[993,44403,44405],{"className":995,"code":44404,"language":997,"meta":998,"style":998},"console.log('This is log');\nconsole.warn('This is a warning');\nconsole.error('This is an error');\nconsole.info('This is info');\nconsole.debug('This is debug');\n",[941,44406,44407,44420,44433,44446,44459],{"__ignoreMap":998},[1002,44408,44409,44411,44413,44415,44418],{"class":1004,"line":1005},[1002,44410,2883],{"class":1030},[1002,44412,2886],{"class":1026},[1002,44414,1031],{"class":1030},[1002,44416,44417],{"class":1034},"'This is log'",[1002,44419,1085],{"class":1030},[1002,44421,44422,44424,44426,44428,44431],{"class":1004,"line":1012},[1002,44423,2883],{"class":1030},[1002,44425,23379],{"class":1026},[1002,44427,1031],{"class":1030},[1002,44429,44430],{"class":1034},"'This is a warning'",[1002,44432,1085],{"class":1030},[1002,44434,44435,44437,44439,44441,44444],{"class":1004,"line":1047},[1002,44436,2883],{"class":1030},[1002,44438,25064],{"class":1026},[1002,44440,1031],{"class":1030},[1002,44442,44443],{"class":1034},"'This is an error'",[1002,44445,1085],{"class":1030},[1002,44447,44448,44450,44452,44454,44457],{"class":1004,"line":1054},[1002,44449,2883],{"class":1030},[1002,44451,24048],{"class":1026},[1002,44453,1031],{"class":1030},[1002,44455,44456],{"class":1034},"'This is info'",[1002,44458,1085],{"class":1030},[1002,44460,44461,44463,44466,44468,44471],{"class":1004,"line":1060},[1002,44462,2883],{"class":1030},[1002,44464,44465],{"class":1026},"debug",[1002,44467,1031],{"class":1030},[1002,44469,44470],{"class":1034},"'This is debug'",[1002,44472,1085],{"class":1030},[925,44474,44475],{},"This will log the following messages in the console:",[925,44477,44478],{},[963,44479],{"alt":44480,"src":44481},"Logs","\u002Fimages\u002Fblog\u002F2016-05-16-javascript-console\u002Flogs.jpg",[7100,44483,44485],{"title":44484,"type":24048},"console.log vs console.debug",[925,44486,44487,44488,44491,44492,44495],{},"In Chrome, ",[941,44489,44490],{},"console.debug"," will show in blue but ",[941,44493,44494],{},"console.log"," will be shown in black. The color is the only difference as far as these two methods concerned.",[925,44497,44498],{},"You can filter the log messages by selecting the dropdown above the console window:",[925,44500,44501],{},[963,44502],{"alt":8313,"src":44481},[925,44504,44505],{},"You can pass in values as a comma delimited array as well. These values will be logged out separated by a space.",[993,44507,44509],{"className":995,"code":44508,"language":997,"meta":998,"style":998},"console.log('This', 'is', 1, 'log');\n",[941,44510,44511],{"__ignoreMap":998},[1002,44512,44513,44515,44517,44519,44522,44524,44527,44529,44531,44533,44536],{"class":1004,"line":1005},[1002,44514,2883],{"class":1030},[1002,44516,2886],{"class":1026},[1002,44518,1031],{"class":1030},[1002,44520,44521],{"class":1034},"'This'",[1002,44523,1251],{"class":1030},[1002,44525,44526],{"class":1034},"'is'",[1002,44528,1251],{"class":1030},[1002,44530,6211],{"class":1019},[1002,44532,1251],{"class":1030},[1002,44534,44535],{"class":1034},"'log'",[1002,44537,1085],{"class":1030},[925,44539,44540],{},"This will be logged out like a usual message:",[925,44542,44543],{},[963,44544],{"alt":44545,"src":44546},"Arguments","\u002Fimages\u002Fblog\u002F2016-05-16-javascript-console\u002Fargs.jpg",[953,44548,44550],{"id":44549},"string-substitution","String Substitution",[925,44552,44553],{},"If the first argument starts with a string, we can use string substitution like in C language.",[993,44555,44557],{"className":995,"code":44556,"language":997,"meta":998,"style":998},"console.log('The %s has %d moon(s)', 'Earth', 1, { name: 'Moon' });\n",[941,44558,44559],{"__ignoreMap":998},[1002,44560,44561,44563,44565,44567,44570,44572,44575,44577,44579,44582,44585],{"class":1004,"line":1005},[1002,44562,2883],{"class":1030},[1002,44564,2886],{"class":1026},[1002,44566,1031],{"class":1030},[1002,44568,44569],{"class":1034},"'The %s has %d moon(s)'",[1002,44571,1251],{"class":1030},[1002,44573,44574],{"class":1034},"'Earth'",[1002,44576,1251],{"class":1030},[1002,44578,6211],{"class":1019},[1002,44580,44581],{"class":1030},", { name: ",[1002,44583,44584],{"class":1034},"'Moon'",[1002,44586,28417],{"class":1030},[925,44588,44589],{},"The result in console:",[925,44591,44592],{},[963,44593],{"alt":17886,"src":44594},"\u002Fimages\u002Fblog\u002F2016-05-16-javascript-console\u002Fsubs.jpg",[953,44596,44598],{"id":44597},"css-output","CSS Output",[925,44600,44601,44602,44605],{},"By prefixing ",[941,44603,44604],{},"%c"," to a string, we can print CSS into the console!",[993,44607,44609],{"className":995,"code":44608,"language":997,"meta":998,"style":998},"console.log(\n 'This looks %cfansy!',\n 'color: hotpink; font-size: 30px; border:1px solid black; padding: 2px',\n);\n",[941,44610,44611,44619,44626,44633],{"__ignoreMap":998},[1002,44612,44613,44615,44617],{"class":1004,"line":1005},[1002,44614,2883],{"class":1030},[1002,44616,2886],{"class":1026},[1002,44618,10468],{"class":1030},[1002,44620,44621,44624],{"class":1004,"line":1012},[1002,44622,44623],{"class":1034}," 'This looks %cfansy!'",[1002,44625,1143],{"class":1030},[1002,44627,44628,44631],{"class":1004,"line":1047},[1002,44629,44630],{"class":1034}," 'color: hotpink; font-size: 30px; border:1px solid black; padding: 2px'",[1002,44632,1143],{"class":1030},[1002,44634,44635],{"class":1004,"line":1054},[1002,44636,1085],{"class":1030},[925,44638,44589],{},[925,44640,44641],{},[963,44642],{"alt":35565,"src":44643},"\u002Fimages\u002Fblog\u002F2016-05-16-javascript-console\u002Fcss.jpg",[953,44645,44647],{"id":44646},"grouping-and-nesting","Grouping and Nesting",[925,44649,44650,44651,948],{},"We can group log output into collapsable hierarchies using ",[941,44652,44653],{},"console.group()",[993,44655,44657],{"className":995,"code":44656,"language":997,"meta":998,"style":998},"console.groupCollapsed('Fruits');\nconsole.groupCollapsed('Green');\nconsole.log('Apples');\nconsole.log('Pears');\nconsole.groupCollapsed('Yellow');\nconsole.log('Bananas');\nconsole.log('Pineapple');\nconsole.groupEnd();\n",[941,44658,44659,44673,44686,44699,44712,44725,44738,44751],{"__ignoreMap":998},[1002,44660,44661,44663,44666,44668,44671],{"class":1004,"line":1005},[1002,44662,2883],{"class":1030},[1002,44664,44665],{"class":1026},"groupCollapsed",[1002,44667,1031],{"class":1030},[1002,44669,44670],{"class":1034},"'Fruits'",[1002,44672,1085],{"class":1030},[1002,44674,44675,44677,44679,44681,44684],{"class":1004,"line":1012},[1002,44676,2883],{"class":1030},[1002,44678,44665],{"class":1026},[1002,44680,1031],{"class":1030},[1002,44682,44683],{"class":1034},"'Green'",[1002,44685,1085],{"class":1030},[1002,44687,44688,44690,44692,44694,44697],{"class":1004,"line":1047},[1002,44689,2883],{"class":1030},[1002,44691,2886],{"class":1026},[1002,44693,1031],{"class":1030},[1002,44695,44696],{"class":1034},"'Apples'",[1002,44698,1085],{"class":1030},[1002,44700,44701,44703,44705,44707,44710],{"class":1004,"line":1054},[1002,44702,2883],{"class":1030},[1002,44704,2886],{"class":1026},[1002,44706,1031],{"class":1030},[1002,44708,44709],{"class":1034},"'Pears'",[1002,44711,1085],{"class":1030},[1002,44713,44714,44716,44718,44720,44723],{"class":1004,"line":1060},[1002,44715,2883],{"class":1030},[1002,44717,44665],{"class":1026},[1002,44719,1031],{"class":1030},[1002,44721,44722],{"class":1034},"'Yellow'",[1002,44724,1085],{"class":1030},[1002,44726,44727,44729,44731,44733,44736],{"class":1004,"line":1272},[1002,44728,2883],{"class":1030},[1002,44730,2886],{"class":1026},[1002,44732,1031],{"class":1030},[1002,44734,44735],{"class":1034},"'Bananas'",[1002,44737,1085],{"class":1030},[1002,44739,44740,44742,44744,44746,44749],{"class":1004,"line":1348},[1002,44741,2883],{"class":1030},[1002,44743,2886],{"class":1026},[1002,44745,1031],{"class":1030},[1002,44747,44748],{"class":1034},"'Pineapple'",[1002,44750,1085],{"class":1030},[1002,44752,44753,44755,44758],{"class":1004,"line":1354},[1002,44754,2883],{"class":1030},[1002,44756,44757],{"class":1026},"groupEnd",[1002,44759,1428],{"class":1030},[925,44761,44589],{},[925,44763,44764],{},[963,44765],{"alt":44766,"src":44767},"Nesting","\u002Fimages\u002Fblog\u002F2016-05-16-javascript-console\u002Fnesting.jpg",[953,44769,44771],{"id":44770},"assertion","Assertion",[925,44773,32004,44774,44777],{},[941,44775,44776],{},"console.assert",", which is syntactic sugar for logging an error to the console when a given condition is not met.",[993,44779,44781],{"className":995,"code":44780,"language":997,"meta":998,"style":998},"var something;\n\nconsole.assert(something, 'something is not defined!');\n",[941,44782,44783,44790,44794],{"__ignoreMap":998},[1002,44784,44785,44787],{"class":1004,"line":1005},[1002,44786,18311],{"class":1015},[1002,44788,44789],{"class":1030}," something;\n",[1002,44791,44792],{"class":1004,"line":1012},[1002,44793,1051],{"emptyLinePlaceholder":1050},[1002,44795,44796,44798,44801,44804,44807],{"class":1004,"line":1047},[1002,44797,2883],{"class":1030},[1002,44799,44800],{"class":1026},"assert",[1002,44802,44803],{"class":1030},"(something, ",[1002,44805,44806],{"class":1034},"'something is not defined!'",[1002,44808,1085],{"class":1030},[925,44810,44589],{},[925,44812,44813],{},[963,44814],{"alt":44771,"src":44815},"\u002Fimages\u002Fblog\u002F2016-05-16-javascript-console\u002Fassert.jpg",[953,44817,44819],{"id":44818},"counting-events","Counting Events",[925,44821,22450,44822,44825],{},[941,44823,44824],{},"console.count"," we can count the number of times something was logged.",[993,44827,44829],{"className":995,"code":44828,"language":997,"meta":998,"style":998},"for (var i = 0; i \u003C 10; i++) {\n if (i \u003C 6) {\n console.count('less than 6');\n } else {\n console.count('greater than 6');\n }\n}\n",[941,44830,44831,44857,44870,44883,44891,44904,44908],{"__ignoreMap":998},[1002,44832,44833,44835,44837,44839,44841,44843,44845,44847,44849,44851,44853,44855],{"class":1004,"line":1005},[1002,44834,6510],{"class":1015},[1002,44836,6513],{"class":1030},[1002,44838,18311],{"class":1015},[1002,44840,6519],{"class":1030},[1002,44842,2393],{"class":1015},[1002,44844,4910],{"class":1019},[1002,44846,6536],{"class":1030},[1002,44848,6539],{"class":1015},[1002,44850,8970],{"class":1019},[1002,44852,16128],{"class":1030},[1002,44854,6545],{"class":1015},[1002,44856,2382],{"class":1030},[1002,44858,44859,44861,44864,44866,44868],{"class":1004,"line":1012},[1002,44860,19971],{"class":1015},[1002,44862,44863],{"class":1030}," (i ",[1002,44865,6539],{"class":1015},[1002,44867,17847],{"class":1019},[1002,44869,2382],{"class":1030},[1002,44871,44872,44874,44876,44878,44881],{"class":1004,"line":1047},[1002,44873,3030],{"class":1030},[1002,44875,4720],{"class":1026},[1002,44877,1031],{"class":1030},[1002,44879,44880],{"class":1034},"'less than 6'",[1002,44882,1085],{"class":1030},[1002,44884,44885,44887,44889],{"class":1004,"line":1054},[1002,44886,30770],{"class":1030},[1002,44888,6060],{"class":1015},[1002,44890,1457],{"class":1030},[1002,44892,44893,44895,44897,44899,44902],{"class":1004,"line":1060},[1002,44894,3030],{"class":1030},[1002,44896,4720],{"class":1026},[1002,44898,1031],{"class":1030},[1002,44900,44901],{"class":1034},"'greater than 6'",[1002,44903,1085],{"class":1030},[1002,44905,44906],{"class":1004,"line":1272},[1002,44907,1269],{"class":1030},[1002,44909,44910],{"class":1004,"line":1348},[1002,44911,1170],{"class":1030},[925,44913,44589],{},[925,44915,44916],{},[963,44917],{"alt":21272,"src":44918},"\u002Fimages\u002Fblog\u002F2016-05-16-javascript-console\u002Fcount.jpg",[953,44920,44922],{"id":44921},"timing-data","Timing Data",[925,44924,22450,44925,44928,44929,44932],{},[941,44926,44927],{},"console.time"," with ",[941,44930,44931],{},"console.timeEnd"," to get accurate timings of operations in javascript.",[993,44934,44936],{"className":995,"code":44935,"language":997,"meta":998,"style":998},"var i = 0;\n\nconsole.time('looping');\n\nwhile (i > 1000000) {\n i++;\n}\n\nconsole.timeEnd('looping');\n",[941,44937,44938,44950,44954,44968,44972,44985,44994,44998,45002],{"__ignoreMap":998},[1002,44939,44940,44942,44944,44946,44948],{"class":1004,"line":1005},[1002,44941,18311],{"class":1015},[1002,44943,6519],{"class":1030},[1002,44945,2393],{"class":1015},[1002,44947,4910],{"class":1019},[1002,44949,1407],{"class":1030},[1002,44951,44952],{"class":1004,"line":1012},[1002,44953,1051],{"emptyLinePlaceholder":1050},[1002,44955,44956,44958,44961,44963,44966],{"class":1004,"line":1047},[1002,44957,2883],{"class":1030},[1002,44959,44960],{"class":1026},"time",[1002,44962,1031],{"class":1030},[1002,44964,44965],{"class":1034},"'looping'",[1002,44967,1085],{"class":1030},[1002,44969,44970],{"class":1004,"line":1054},[1002,44971,1051],{"emptyLinePlaceholder":1050},[1002,44973,44974,44976,44978,44980,44983],{"class":1004,"line":1060},[1002,44975,34583],{"class":1015},[1002,44977,44863],{"class":1030},[1002,44979,19171],{"class":1015},[1002,44981,44982],{"class":1019}," 1000000",[1002,44984,2382],{"class":1030},[1002,44986,44987,44990,44992],{"class":1004,"line":1272},[1002,44988,44989],{"class":1030}," i",[1002,44991,6545],{"class":1015},[1002,44993,1407],{"class":1030},[1002,44995,44996],{"class":1004,"line":1348},[1002,44997,1170],{"class":1030},[1002,44999,45000],{"class":1004,"line":1354},[1002,45001,1051],{"emptyLinePlaceholder":1050},[1002,45003,45004,45006,45009,45011,45013],{"class":1004,"line":1360},[1002,45005,2883],{"class":1030},[1002,45007,45008],{"class":1026},"timeEnd",[1002,45010,1031],{"class":1030},[1002,45012,44965],{"class":1034},[1002,45014,1085],{"class":1030},[925,45016,44589],{},[925,45018,45019],{},[963,45020],{"alt":45021,"src":45022},"Louping","\u002Fimages\u002Fblog\u002F2016-05-16-javascript-console\u002Floop.jpg",[953,45024,45026],{"id":45025},"tabular-data","Tabular Data",[925,45028,45029,45030,45033],{},"Using ",[941,45031,45032],{},"console.table"," to render arrays and objects in a tabular format.",[993,45035,45037],{"className":995,"code":45036,"language":997,"meta":998,"style":998},"var fruits = [\n { name: 'Apple', color: 'Red' },\n { name: 'Pear', color: 'Green' },\n { name: 'Banana', color: 'Yellow' },\n];\n\nconsole.table(fruits);\n",[941,45038,45039,45050,45065,45077,45089,45093,45097],{"__ignoreMap":998},[1002,45040,45041,45043,45046,45048],{"class":1004,"line":1005},[1002,45042,18311],{"class":1015},[1002,45044,45045],{"class":1030}," fruits ",[1002,45047,2393],{"class":1015},[1002,45049,10274],{"class":1030},[1002,45051,45052,45055,45057,45060,45063],{"class":1004,"line":1012},[1002,45053,45054],{"class":1030}," { name: ",[1002,45056,6916],{"class":1034},[1002,45058,45059],{"class":1030},", color: ",[1002,45061,45062],{"class":1034},"'Red'",[1002,45064,33835],{"class":1030},[1002,45066,45067,45069,45071,45073,45075],{"class":1004,"line":1047},[1002,45068,45054],{"class":1030},[1002,45070,6926],{"class":1034},[1002,45072,45059],{"class":1030},[1002,45074,44683],{"class":1034},[1002,45076,33835],{"class":1030},[1002,45078,45079,45081,45083,45085,45087],{"class":1004,"line":1054},[1002,45080,45054],{"class":1030},[1002,45082,6921],{"class":1034},[1002,45084,45059],{"class":1030},[1002,45086,44722],{"class":1034},[1002,45088,33835],{"class":1030},[1002,45090,45091],{"class":1004,"line":1060},[1002,45092,6754],{"class":1030},[1002,45094,45095],{"class":1004,"line":1272},[1002,45096,1051],{"emptyLinePlaceholder":1050},[1002,45098,45099,45101,45103],{"class":1004,"line":1348},[1002,45100,2883],{"class":1030},[1002,45102,39742],{"class":1026},[1002,45104,45105],{"class":1030},"(fruits);\n",[925,45107,44589],{},[925,45109,45110],{},[963,45111],{"alt":45112,"src":45113},"Tabular","\u002Fimages\u002Fblog\u002F2016-05-16-javascript-console\u002Ftabular.jpg",[953,45115,26561],{"id":26560},[925,45117,45118],{},"These console techniques will definitely help you to make your console logs look more interesting.",[1579,45120,45121],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":998,"searchDepth":1012,"depth":1012,"links":45123},[45124,45125,45126,45127,45128,45129,45130,45131,45132],{"id":44397,"depth":1012,"text":44398},{"id":44549,"depth":1012,"text":44550},{"id":44597,"depth":1012,"text":44598},{"id":44646,"depth":1012,"text":44647},{"id":44770,"depth":1012,"text":44771},{"id":44818,"depth":1012,"text":44819},{"id":44921,"depth":1012,"text":44922},{"id":45025,"depth":1012,"text":45026},{"id":26560,"depth":1012,"text":26561},"2016-05-16","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjavascript-console.jpg",{},{"title":506,"description":508},"blog\u002Fjavascript-console",[16,17],"i7aIs-1jNcZBa1XSAfZXmojtmPqJPGLDnRXB4h9UbAQ",{"id":45141,"title":262,"author":920,"body":45142,"date":45535,"description":264,"extension":1591,"image":45536,"meta":45537,"navigation":1050,"path":263,"seo":45538,"stem":45539,"tags":45540,"__hash__":45541},"blog\u002Fblog\u002Feslint.md",{"type":922,"value":45143,"toc":45529},[45144,45153,45156,45179,45184,45187,45191,45194,45208,45390,45393,45407,45410,45413,45427,45430,45433,45444,45447,45451,45454,45457,45468,45471,45474,45519,45526],[925,45145,45146,45147,2034,45150,1813],{},"Differences between ",[941,45148,45149],{},"JSLint",[941,45151,45152],{},"JSHint",[925,45154,45155],{},"ESLint uses:",[1530,45157,45158,45172],{},[974,45159,45160,45161,45167,45168,45171],{},"A (parser)",[1002,45162,45163],{},[933,45164,45165],{"href":45165,"rel":45166},"https:\u002F\u002Fgithub.com\u002Feslint\u002Fespree",[937]," called ",[941,45169,45170],{},"Espree"," for parsing JavaScript.",[974,45173,45174,45175,45178],{},"An ",[941,45176,45177],{},"AST"," to evaluate patterns in code.",[7100,45180,45181],{"title":45177,"type":24048},[925,45182,45183],{},"AST stands for Abstract Syntax Tree. Mozilla’s SpiderMonkey,Babel-ESLint and ECMAScript Esprima are two parsers for viewing abstract syntatic structure of the source code.",[925,45185,45186],{},"ESLint does not sound as strict as it sounds. It is designed to be fully configurable, by turning off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules.",[953,45188,45190],{"id":45189},"eslint-to-define-your-own-rules","ESLint to define your own rules",[925,45192,45193],{},"The biggest feature of ESLint, is that you can develop the rules on your own. Or it is common to find an existing set of rules that come close to what you want, then customise from there.",[925,45195,45196,45197,45202,45203,948],{},"An example of this is ",[933,45198,45201],{"href":45199,"rel":45200},"https:\u002F\u002Fgithub.com\u002Fairbnb\u002Fjavascript\u002Ftree\u002Fmaster\u002Fpackages\u002Feslint-config-airbnb",[937],"eslint-config-airbnb"," based on the ",[933,45204,45207],{"href":45205,"rel":45206},"https:\u002F\u002Fgithub.com\u002Fairbnb\u002Fjavascript",[937],"AirBnB JavaScript Style Guide",[993,45209,45211],{"className":1120,"code":45210,"language":1122,"meta":998,"style":998},"{\n \"extends\": \"airbnb\",\n \"rules\": {\n \"default-case\": 0,\n \"max-len\": [1, 120, 2, { \"ignoreComments\": true }],\n \"quotes\": 0,\n \"quote-props\": [1, \"consistent-as-needed\"],\n \"no-cond-assign\": [2, \"except-parens\"],\n \"no-else-return\": 0,\n \"no-param-reassign\": 0,\n \"no-unused-vars\": [1, { \"vars\": \"local\", \"args\": \"none\" }],\n \"space-infix-ops\": 0\n }\n}\n",[941,45212,45213,45217,45228,45235,45246,45276,45287,45303,45319,45330,45341,45372,45382,45386],{"__ignoreMap":998},[1002,45214,45215],{"class":1004,"line":1005},[1002,45216,1129],{"class":1030},[1002,45218,45219,45222,45224,45226],{"class":1004,"line":1012},[1002,45220,45221],{"class":1019}," \"extends\"",[1002,45223,1137],{"class":1030},[1002,45225,33174],{"class":1034},[1002,45227,1143],{"class":1030},[1002,45229,45230,45233],{"class":1004,"line":1047},[1002,45231,45232],{"class":1019}," \"rules\"",[1002,45234,15354],{"class":1030},[1002,45236,45237,45240,45242,45244],{"class":1004,"line":1054},[1002,45238,45239],{"class":1019}," \"default-case\"",[1002,45241,1137],{"class":1030},[1002,45243,5867],{"class":1019},[1002,45245,1143],{"class":1030},[1002,45247,45248,45251,45253,45255,45257,45260,45262,45264,45266,45269,45271,45273],{"class":1004,"line":1060},[1002,45249,45250],{"class":1019}," \"max-len\"",[1002,45252,1201],{"class":1030},[1002,45254,6211],{"class":1019},[1002,45256,1251],{"class":1030},[1002,45258,45259],{"class":1019},"120",[1002,45261,1251],{"class":1030},[1002,45263,5681],{"class":1019},[1002,45265,28406],{"class":1030},[1002,45267,45268],{"class":1019},"\"ignoreComments\"",[1002,45270,1137],{"class":1030},[1002,45272,17397],{"class":1019},[1002,45274,45275],{"class":1030}," }],\n",[1002,45277,45278,45281,45283,45285],{"class":1004,"line":1272},[1002,45279,45280],{"class":1019}," \"quotes\"",[1002,45282,1137],{"class":1030},[1002,45284,5867],{"class":1019},[1002,45286,1143],{"class":1030},[1002,45288,45289,45292,45294,45296,45298,45301],{"class":1004,"line":1348},[1002,45290,45291],{"class":1019}," \"quote-props\"",[1002,45293,1201],{"class":1030},[1002,45295,6211],{"class":1019},[1002,45297,1251],{"class":1030},[1002,45299,45300],{"class":1034},"\"consistent-as-needed\"",[1002,45302,1903],{"class":1030},[1002,45304,45305,45308,45310,45312,45314,45317],{"class":1004,"line":1354},[1002,45306,45307],{"class":1019}," \"no-cond-assign\"",[1002,45309,1201],{"class":1030},[1002,45311,5681],{"class":1019},[1002,45313,1251],{"class":1030},[1002,45315,45316],{"class":1034},"\"except-parens\"",[1002,45318,1903],{"class":1030},[1002,45320,45321,45324,45326,45328],{"class":1004,"line":1360},[1002,45322,45323],{"class":1019}," \"no-else-return\"",[1002,45325,1137],{"class":1030},[1002,45327,5867],{"class":1019},[1002,45329,1143],{"class":1030},[1002,45331,45332,45335,45337,45339],{"class":1004,"line":1366},[1002,45333,45334],{"class":1019}," \"no-param-reassign\"",[1002,45336,1137],{"class":1030},[1002,45338,5867],{"class":1019},[1002,45340,1143],{"class":1030},[1002,45342,45343,45346,45348,45350,45352,45355,45357,45360,45362,45365,45367,45370],{"class":1004,"line":1946},[1002,45344,45345],{"class":1019}," \"no-unused-vars\"",[1002,45347,1201],{"class":1030},[1002,45349,6211],{"class":1019},[1002,45351,28406],{"class":1030},[1002,45353,45354],{"class":1019},"\"vars\"",[1002,45356,1137],{"class":1030},[1002,45358,45359],{"class":1034},"\"local\"",[1002,45361,1251],{"class":1030},[1002,45363,45364],{"class":1019},"\"args\"",[1002,45366,1137],{"class":1030},[1002,45368,45369],{"class":1034},"\"none\"",[1002,45371,45275],{"class":1030},[1002,45373,45374,45377,45379],{"class":1004,"line":1956},[1002,45375,45376],{"class":1019}," \"space-infix-ops\"",[1002,45378,1137],{"class":1030},[1002,45380,45381],{"class":1019},"0\n",[1002,45383,45384],{"class":1004,"line":1961},[1002,45385,1269],{"class":1030},[1002,45387,45388],{"class":1004,"line":1971},[1002,45389,1170],{"class":1030},[925,45391,45392],{},"There are two primary ways to configure ESLint:",[1530,45394,45395,45401],{},[974,45396,45397,45400],{},[928,45398,45399],{},"Configuration Comments"," – JavaScript comments to embed configuration information directly into a file.",[974,45402,45403,45406],{},[928,45404,45405],{},"Configuration Files"," – A JSON or YAML file to specify configuration information for an entire directory and all of its subdirectories.",[1655,45408,45405],{"id":45409},"configuration-files",[925,45411,45412],{},"This can be in the form of:",[1530,45414,45415,45421,45424],{},[974,45416,45174,45417,45420],{},[941,45418,45419],{},".eslintrc"," file",[974,45422,45423],{},"An `eslintConfig field in a package.json file",[974,45425,45426],{},"Specify a configuration file on the command line.",[925,45428,45429],{},"First two options of above will be read by ESLint automatically",[925,45431,45432],{},"There are several pieces of information that can be configured:",[1530,45434,45435,45438,45441],{},[974,45436,45437],{},"Environments – which environments your script is designed to run in.",[974,45439,45440],{},"Globals – the additional global variables your script accesses during execution.",[974,45442,45443],{},"Rules – which rules are enabled and at what error level.",[925,45445,45446],{},"All of these options give you fine-grained control over how ESLint treats your code.",[953,45448,45450],{"id":45449},"specifying-parser","Specifying Parser",[925,45452,45453],{},"By default, ESLint uses Espree as its parser. You can optionally specify that a different parser\nshould be used in your configuration file so long as the parser meets the following requirements:",[925,45455,45456],{},"It must:",[1530,45458,45459,45462,45465],{},[974,45460,45461],{},"Produce Esprima-compatible AST and token objects.",[974,45463,45464],{},"Have an Esprima-compatible interface (it must export a parse() method).",[974,45466,45467],{},"Be an npm module installed locally.",[925,45469,45470],{},"Note that even with these compatibilities, there are no guarantees that an external parser will work correctly with ESLint and ESLint will not fix bugs related to incompatibilities with other parsers.",[925,45472,45473],{},"To indicate the npm module to use as your parser, specify it using the parser option in your .eslintrc file. For example, the following specifies to use Esprima instead of Espree:",[993,45475,45477],{"className":1120,"code":45476,"language":1122,"meta":998,"style":998},"{\n \"parser\": \"esprima\",\n \"rules\": {\n \"semi\": \"error\"\n }\n}\n",[941,45478,45479,45483,45495,45501,45511,45515],{"__ignoreMap":998},[1002,45480,45481],{"class":1004,"line":1005},[1002,45482,1129],{"class":1030},[1002,45484,45485,45488,45490,45493],{"class":1004,"line":1012},[1002,45486,45487],{"class":1019}," \"parser\"",[1002,45489,1137],{"class":1030},[1002,45491,45492],{"class":1034},"\"esprima\"",[1002,45494,1143],{"class":1030},[1002,45496,45497,45499],{"class":1004,"line":1047},[1002,45498,45232],{"class":1019},[1002,45500,15354],{"class":1030},[1002,45502,45503,45506,45508],{"class":1004,"line":1054},[1002,45504,45505],{"class":1019}," \"semi\"",[1002,45507,1137],{"class":1030},[1002,45509,45510],{"class":1034},"\"error\"\n",[1002,45512,45513],{"class":1004,"line":1060},[1002,45514,1269],{"class":1030},[1002,45516,45517],{"class":1004,"line":1272},[1002,45518,1170],{"class":1030},[925,45520,45521,45522,45525],{},"when using a custom parser, the ",[941,45523,45524],{},"parserOptions"," configuration property is still required for ESLint to work properly with features not in ECMAScript 5 by default. Parsers are all passed parserOptions and may or may not use them to determine which features to enable.",[1579,45527,45528],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":45530},[45531,45534],{"id":45189,"depth":1012,"text":45190,"children":45532},[45533],{"id":45409,"depth":1047,"text":45405},{"id":45449,"depth":1012,"text":45450},"2016-04-30","\u002Fimages\u002Fblog\u002Ffeatures\u002Feslint.jpg",{},{"title":262,"description":264},"blog\u002Feslint",[16,17],"lnz3EMWGpmbgFm0c2d-3beuP12yopGfP5QmDwnk97d8",{"id":45543,"title":708,"author":920,"body":45544,"date":45877,"description":710,"extension":1591,"image":45878,"meta":45879,"navigation":1050,"path":709,"seo":45880,"stem":45881,"tags":45882,"__hash__":45883},"blog\u002Fblog\u002Freact-v15.md",{"type":922,"value":45545,"toc":45863},[45546,45549,45563,45566,45573,45581,45588,45591,45594,45608,45611,45615,45683,45687,45705,45708,45711,45714,45722,45725,45728,45731,45735,45762,45768,45795,45798,45801,45825,45830,45860],[925,45547,45548],{},"Major changes include:",[1530,45550,45551,45554,45557,45560],{},[974,45552,45553],{},"Version Number",[974,45555,45556],{},"Simplified DOM element rendering",[974,45558,45559],{},"Improved SVG support",[974,45561,45562],{},"New helpful warnings",[953,45564,45553],{"id":45565},"version-number",[925,45567,45568,45569,45572],{},"Before v15.0.0, the previous React version dubbed ",[941,45570,45571],{},"React 14"," or 0.14.x had the leading 0 has caused some confusion in the community, leading some to believe that it wasn’t yet ready to use in production.",[7100,45574,45575],{"type":24048},[925,45576,45577,45578],{},"Version naming change helps indicate our commitment to stability and gives us the flexibility to add new backwards-compatible features in minor releases – ",[1107,45579,45580],{},"Sebastine Markbåge",[925,45582,45583,45584,45587],{},"The project will continue to follow the ",[941,45585,45586],{},"semver"," guidelines, in the future versions. That means the major version will change for the breaking changes, backward compatible versions will have a minor version change and the bug fixes will increase the patch version.",[953,45589,45556],{"id":45590},"simplified-dom-element-rendering",[925,45592,45593],{},"The way React renders the elements has changed in two areas:",[1530,45595,45596,45603],{},[974,45597,45598,45599,45602],{},"No more ",[941,45600,45601],{},"data-reactid"," attributes",[974,45604,45598,45605,45607],{},[941,45606,1002],{}," elements (for plain text)",[925,45609,45610],{},"Let’s compare the render output in different versions:",[1655,45612,45614],{"id":45613},"v0140","v0.14.0",[993,45616,45618],{"className":37880,"code":45617,"language":383,"meta":998,"style":998},"\u003Cdiv data-reactid=\".0.0.5\">\n \u003Cspan data-reactid=\".0.0.5.0\">Hello\u003C\u002Fspan>\n \u003Cspan data-reactid=\".0.0.5.1\">world\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[941,45619,45620,45636,45655,45675],{"__ignoreMap":998},[1002,45621,45622,45624,45626,45629,45631,45634],{"class":1004,"line":1005},[1002,45623,6539],{"class":1030},[1002,45625,19650],{"class":15711},[1002,45627,45628],{"class":1026}," data-reactid",[1002,45630,2393],{"class":1030},[1002,45632,45633],{"class":1034},"\".0.0.5\"",[1002,45635,15703],{"class":1030},[1002,45637,45638,45640,45642,45644,45646,45649,45651,45653],{"class":1004,"line":1012},[1002,45639,22427],{"class":1030},[1002,45641,1002],{"class":15711},[1002,45643,45628],{"class":1026},[1002,45645,2393],{"class":1030},[1002,45647,45648],{"class":1034},"\".0.0.5.0\"",[1002,45650,19610],{"class":1030},[1002,45652,1002],{"class":15711},[1002,45654,15703],{"class":1030},[1002,45656,45657,45659,45661,45663,45665,45668,45671,45673],{"class":1004,"line":1047},[1002,45658,22427],{"class":1030},[1002,45660,1002],{"class":15711},[1002,45662,45628],{"class":1026},[1002,45664,2393],{"class":1030},[1002,45666,45667],{"class":1034},"\".0.0.5.1\"",[1002,45669,45670],{"class":1030},">world\u003C\u002F",[1002,45672,1002],{"class":15711},[1002,45674,15703],{"class":1030},[1002,45676,45677,45679,45681],{"class":1004,"line":1054},[1002,45678,22437],{"class":1030},[1002,45680,19650],{"class":15711},[1002,45682,15703],{"class":1030},[1655,45684,45686],{"id":45685},"v1500","v15.0.0",[993,45688,45690],{"className":37880,"code":45689,"language":383,"meta":998,"style":998},"\u003Cdiv>Hello world\u003C\u002Fdiv>\n",[941,45691,45692],{"__ignoreMap":998},[1002,45693,45694,45696,45698,45701,45703],{"class":1004,"line":1005},[1002,45695,6539],{"class":1030},[1002,45697,19650],{"class":15711},[1002,45699,45700],{"class":1030},">Hello world\u003C\u002F",[1002,45702,19650],{"class":15711},[1002,45704,15703],{"class":1030},[925,45706,45707],{},"Removal of spans helps to clear DOM clutter as well as reduces the file size of components.",[953,45709,45559],{"id":45710},"improved-svg-support",[925,45712,45713],{},"In React v15 claims to support all the SVG attributes that are recognized by today’s browsers.",[7100,45715,45716],{"type":24048},[925,45717,45718,45719],{},"The RC version left us in an inconsistent state for our HTML and SVG behaviors. That’s not awesome as there are already a number of things that must be learned for React and throwing in another inconsistency doesn’t help. So we’ll backpedal for now but still continue to provide full SVG support by going back to our previous whitelist and expanding it. – ",[1107,45720,45721],{},"Paul O’Shannessy",[953,45723,45562],{"id":45724},"new-helpful-warnings",[925,45726,45727],{},"There are number of useful warnings added to React v15.",[925,45729,45730],{},"If your styles contain width for example, you can pass in a numeric value as a number without the unit(eg: px). But if you pass in the value as a string, React will warn you.",[1655,45732,45734],{"id":45733},"correct","Correct",[993,45736,45738],{"className":37880,"code":45737,"language":383,"meta":998,"style":998},"\u003Cdiv style=\"{{width:\" 20}}>\u003C\u002Fdiv>\n",[941,45739,45740],{"__ignoreMap":998},[1002,45741,45742,45744,45746,45748,45750,45753,45756,45758,45760],{"class":1004,"line":1005},[1002,45743,6539],{"class":1030},[1002,45745,19650],{"class":15711},[1002,45747,29393],{"class":1026},[1002,45749,2393],{"class":1030},[1002,45751,45752],{"class":1034},"\"{{width:\"",[1002,45754,45755],{"class":1026}," 20}}",[1002,45757,22081],{"class":1030},[1002,45759,19650],{"class":15711},[1002,45761,15703],{"class":1030},[1655,45763,45765],{"id":45764},"warning",[941,45766,45767],{},"Warning",[993,45769,45771],{"className":37880,"code":45770,"language":383,"meta":998,"style":998},"\u003Cdiv style={{width: \"20\"}}>\u003C\u002Fdiv>\n",[941,45772,45773],{"__ignoreMap":998},[1002,45774,45775,45777,45779,45781,45783,45786,45789,45791,45793],{"class":1004,"line":1005},[1002,45776,6539],{"class":1030},[1002,45778,19650],{"class":15711},[1002,45780,29393],{"class":1026},[1002,45782,2393],{"class":1030},[1002,45784,45785],{"class":1034},"{{width:",[1002,45787,45788],{"class":18541}," \"20\"}}",[1002,45790,22081],{"class":1030},[1002,45792,19650],{"class":15711},[1002,45794,15703],{"class":1030},[925,45796,45797],{},"As for event handlers, the event handler names are case sensitive. Incorrect case would prompt React to throw a warning.",[1655,45799,45734],{"id":45800},"correct-1",[993,45802,45804],{"className":37880,"code":45803,"language":383,"meta":998,"style":998},"\u003Cbutton onClick=\"{{onClick}}\">\u003C\u002Fbutton>\n",[941,45805,45806],{"__ignoreMap":998},[1002,45807,45808,45810,45812,45814,45816,45819,45821,45823],{"class":1004,"line":1005},[1002,45809,6539],{"class":1030},[1002,45811,16365],{"class":15711},[1002,45813,16691],{"class":1026},[1002,45815,2393],{"class":1030},[1002,45817,45818],{"class":1034},"\"{{onClick}}\"",[1002,45820,22081],{"class":1030},[1002,45822,16365],{"class":15711},[1002,45824,15703],{"class":1030},[1655,45826,45828],{"id":45827},"warning-1",[941,45829,45767],{},[993,45831,45833],{"className":37880,"code":45832,"language":383,"meta":998,"style":998},"\u003Cbutton onclick=\"{{onclick}}\">\u003C\u002Fbutton>\n",[941,45834,45835],{"__ignoreMap":998},[1002,45836,45837,45839,45841,45843,45845,45848,45851,45854,45856,45858],{"class":1004,"line":1005},[1002,45838,6539],{"class":1030},[1002,45840,16365],{"class":15711},[1002,45842,16368],{"class":1026},[1002,45844,2393],{"class":1030},[1002,45846,45847],{"class":1034},"\"{{",[1002,45849,45850],{"class":1030},"onclick",[1002,45852,45853],{"class":1034},"}}\"",[1002,45855,22081],{"class":1030},[1002,45857,16365],{"class":15711},[1002,45859,15703],{"class":1030},[1579,45861,45862],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":998,"searchDepth":1012,"depth":1012,"links":45864},[45865,45866,45870,45871],{"id":45565,"depth":1012,"text":45553},{"id":45590,"depth":1012,"text":45556,"children":45867},[45868,45869],{"id":45613,"depth":1047,"text":45614},{"id":45685,"depth":1047,"text":45686},{"id":45710,"depth":1012,"text":45559},{"id":45724,"depth":1012,"text":45562,"children":45872},[45873,45874,45875,45876],{"id":45733,"depth":1047,"text":45734},{"id":45764,"depth":1047,"text":45767},{"id":45800,"depth":1047,"text":45734},{"id":45827,"depth":1047,"text":45767},"2016-04-28","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-v15.jpg",{},{"title":708,"description":710},"blog\u002Freact-v15",[16,17,140],"e6ULXV0VghZyMzD2Goj_o8ZhiyMbtyhvWtDGX92meXc",{"id":45885,"title":427,"author":920,"body":45886,"date":47046,"description":429,"extension":1591,"image":47047,"meta":47048,"navigation":1050,"path":428,"seo":47049,"stem":47050,"tags":47051,"__hash__":47052},"blog\u002Fblog\u002Findexeddb.md",{"type":922,"value":45887,"toc":47036},[45888,45892,45899,45902,45922,45926,45929,45933,45936,45940,45943,46100,46107,46111,46114,46117,46160,46165,46168,46181,46184,46355,46358,46362,46365,46435,46438,46611,46617,46772,46778,46784,46788,46794,47006,47013,47016,47022,47024,47027,47033],[953,45889,45891],{"id":45890},"why-indexeddb","Why IndexedDb?",[925,45893,45894,45895,45898],{},"Before IndexedDb, there was another storage specification called ",[941,45896,45897],{},"Web SQL",". The W3C announced it is going to be deprecated and IndexedDb should be used as the alternative.",[925,45900,45901],{},"IndexedDb comes with the following features:",[1530,45903,45904,45907,45910,45913,45916,45919],{},[974,45905,45906],{},"Asynchronous API",[974,45908,45909],{},"Stores key-value pairs",[974,45911,45912],{},"Not SQL",[974,45914,45915],{},"Non-relational",[974,45917,45918],{},"Index based search API",[974,45920,45921],{},"Same domain data access",[953,45923,45925],{"id":45924},"why-not-cookies","Why not cookies?",[925,45927,45928],{},"Cookies can support only a limited space and not ideal for storing fairly large values. Every time a request is sent, the cookies need to be sent back and forth as well.",[953,45930,45932],{"id":45931},"how-about-local-storage","How about Local Storage?",[925,45934,45935],{},"It provides more storage than cookies, but still limited. It also doesn’t have a proper search API as data is stored as key value pairs.",[953,45937,45939],{"id":45938},"getting-ready","Getting Ready",[925,45941,45942],{},"Before we start using IndexedDb feature, we need to check if the browser supports IndexedDb. We can simply do this with the following code:",[993,45944,45946],{"className":995,"code":45945,"language":997,"meta":998,"style":998},"var idbSupported = false;\n\ndocument.addEventListener(\n 'DOMContentLoaded',\n function () {\n window.indexedDB =\n window.indexedDB ||\n window.mozIndexedDB ||\n window.webkitIndexedDB ||\n window.msIndexedDB;\n\n if (!window.indexedDB) {\n idbSupported = true;\n console.info('Your browser does not support IndexedDB.');\n } else {\n console.info('IndexedDB is supported');\n }\n },\n false,\n);\n",[941,45947,45948,45961,45965,45973,45980,45986,45994,46002,46009,46016,46021,46025,46036,46047,46060,46068,46081,46085,46089,46096],{"__ignoreMap":998},[1002,45949,45950,45952,45955,45957,45959],{"class":1004,"line":1005},[1002,45951,18311],{"class":1015},[1002,45953,45954],{"class":1030}," idbSupported ",[1002,45956,2393],{"class":1015},[1002,45958,13166],{"class":1019},[1002,45960,1407],{"class":1030},[1002,45962,45963],{"class":1004,"line":1012},[1002,45964,1051],{"emptyLinePlaceholder":1050},[1002,45966,45967,45969,45971],{"class":1004,"line":1047},[1002,45968,25444],{"class":1030},[1002,45970,16726],{"class":1026},[1002,45972,10468],{"class":1030},[1002,45974,45975,45978],{"class":1004,"line":1054},[1002,45976,45977],{"class":1034}," 'DOMContentLoaded'",[1002,45979,1143],{"class":1030},[1002,45981,45982,45984],{"class":1004,"line":1060},[1002,45983,18965],{"class":1015},[1002,45985,9772],{"class":1030},[1002,45987,45988,45991],{"class":1004,"line":1272},[1002,45989,45990],{"class":1030}," window.indexedDB ",[1002,45992,45993],{"class":1015},"=\n",[1002,45995,45996,45999],{"class":1004,"line":1348},[1002,45997,45998],{"class":1030}," window.indexedDB ",[1002,46000,46001],{"class":1015},"||\n",[1002,46003,46004,46007],{"class":1004,"line":1354},[1002,46005,46006],{"class":1030}," window.mozIndexedDB ",[1002,46008,46001],{"class":1015},[1002,46010,46011,46014],{"class":1004,"line":1360},[1002,46012,46013],{"class":1030}," window.webkitIndexedDB ",[1002,46015,46001],{"class":1015},[1002,46017,46018],{"class":1004,"line":1366},[1002,46019,46020],{"class":1030}," window.msIndexedDB;\n",[1002,46022,46023],{"class":1004,"line":1946},[1002,46024,1051],{"emptyLinePlaceholder":1050},[1002,46026,46027,46029,46031,46033],{"class":1004,"line":1956},[1002,46028,4368],{"class":1015},[1002,46030,6513],{"class":1030},[1002,46032,13559],{"class":1015},[1002,46034,46035],{"class":1030},"window.indexedDB) {\n",[1002,46037,46038,46041,46043,46045],{"class":1004,"line":1961},[1002,46039,46040],{"class":1030}," idbSupported ",[1002,46042,2393],{"class":1015},[1002,46044,9687],{"class":1019},[1002,46046,1407],{"class":1030},[1002,46048,46049,46051,46053,46055,46058],{"class":1004,"line":1971},[1002,46050,17336],{"class":1030},[1002,46052,24048],{"class":1026},[1002,46054,1031],{"class":1030},[1002,46056,46057],{"class":1034},"'Your browser does not support IndexedDB.'",[1002,46059,1085],{"class":1030},[1002,46061,46062,46064,46066],{"class":1004,"line":1980},[1002,46063,6057],{"class":1030},[1002,46065,6060],{"class":1015},[1002,46067,1457],{"class":1030},[1002,46069,46070,46072,46074,46076,46079],{"class":1004,"line":1985},[1002,46071,17336],{"class":1030},[1002,46073,24048],{"class":1026},[1002,46075,1031],{"class":1030},[1002,46077,46078],{"class":1034},"'IndexedDB is supported'",[1002,46080,1085],{"class":1030},[1002,46082,46083],{"class":1004,"line":1995},[1002,46084,2014],{"class":1030},[1002,46086,46087],{"class":1004,"line":2006},[1002,46088,1502],{"class":1030},[1002,46090,46091,46094],{"class":1004,"line":2011},[1002,46092,46093],{"class":1019}," false",[1002,46095,1143],{"class":1030},[1002,46097,46098],{"class":1004,"line":2017},[1002,46099,1085],{"class":1030},[925,46101,46102,46103,46106],{},"The code snippet above checks if the browser you are using supports IndexedDb, and we do this check on the ",[941,46104,46105],{},"DOMContentLoaded"," event which gets fired when the document has finished loading.",[953,46108,46110],{"id":46109},"opening-an-indexeddb-database","Opening an IndexedDB Database",[925,46112,46113],{},"IndexedDB databases are local to the browser which is only available to the user. and the database is unique for the domain it was loaded from.",[925,46115,46116],{},"The basic usage for opening a database is you provide the name and importantly the version.",[993,46118,46120],{"className":995,"code":46119,"language":997,"meta":998,"style":998},"if (idbSupported) {\n var db = indexedDB.open('vehicles', 1);\n}\n",[941,46121,46122,46130,46156],{"__ignoreMap":998},[1002,46123,46124,46127],{"class":1004,"line":1005},[1002,46125,46126],{"class":1015},"if",[1002,46128,46129],{"class":1030}," (idbSupported) {\n",[1002,46131,46132,46134,46137,46139,46142,46145,46147,46150,46152,46154],{"class":1004,"line":1012},[1002,46133,28293],{"class":1015},[1002,46135,46136],{"class":1030}," db ",[1002,46138,2393],{"class":1015},[1002,46140,46141],{"class":1030}," indexedDB.",[1002,46143,46144],{"class":1026},"open",[1002,46146,1031],{"class":1030},[1002,46148,46149],{"class":1034},"'vehicles'",[1002,46151,1251],{"class":1030},[1002,46153,6211],{"class":1019},[1002,46155,1085],{"class":1030},[1002,46157,46158],{"class":1004,"line":1047},[1002,46159,1170],{"class":1030},[925,46161,46162,46163,948],{},"We make sure IndexedDB is supported, if so we open the database named ",[941,46164,2698],{},[925,46166,46167],{},"In IndexedDB, opening a database operation is asynchronous. To handle the result of this kind of operations we need to write event handlers. There are four types of events that can be fired.",[1530,46169,46170,46173,46175,46178],{},[974,46171,46172],{},"success",[974,46174,25064],{},[974,46176,46177],{},"upgradeneeded",[974,46179,46180],{},"blocked",[925,46182,46183],{},"Let’s incorporate some of these event handlers to our code.",[993,46185,46187],{"className":995,"code":46186,"language":997,"meta":998,"style":998},"if (idbSupported) {\n var db = indexedDB.open('vehicles', 1);\n\n openRequest.onupgradeneeded = function (event) {\n console.log('Upgrading IndexedDB');\n };\n\n openRequest.onsuccess = function (e) {\n console.log('Success!');\n db = e.target.result;\n };\n\n openRequest.onerror = function (e) {\n console.log('Error');\n console.dir(e);\n };\n}\n",[941,46188,46189,46195,46217,46221,46239,46252,46256,46260,46277,46290,46300,46304,46308,46325,46338,46347,46351],{"__ignoreMap":998},[1002,46190,46191,46193],{"class":1004,"line":1005},[1002,46192,46126],{"class":1015},[1002,46194,46129],{"class":1030},[1002,46196,46197,46199,46201,46203,46205,46207,46209,46211,46213,46215],{"class":1004,"line":1012},[1002,46198,28293],{"class":1015},[1002,46200,46136],{"class":1030},[1002,46202,2393],{"class":1015},[1002,46204,46141],{"class":1030},[1002,46206,46144],{"class":1026},[1002,46208,1031],{"class":1030},[1002,46210,46149],{"class":1034},[1002,46212,1251],{"class":1030},[1002,46214,6211],{"class":1019},[1002,46216,1085],{"class":1030},[1002,46218,46219],{"class":1004,"line":1047},[1002,46220,1051],{"emptyLinePlaceholder":1050},[1002,46222,46223,46226,46229,46231,46233,46235,46237],{"class":1004,"line":1054},[1002,46224,46225],{"class":1030}," openRequest.",[1002,46227,46228],{"class":1026},"onupgradeneeded",[1002,46230,1023],{"class":1015},[1002,46232,8457],{"class":1015},[1002,46234,6513],{"class":1030},[1002,46236,16696],{"class":2378},[1002,46238,2382],{"class":1030},[1002,46240,46241,46243,46245,46247,46250],{"class":1004,"line":1060},[1002,46242,3030],{"class":1030},[1002,46244,2886],{"class":1026},[1002,46246,1031],{"class":1030},[1002,46248,46249],{"class":1034},"'Upgrading IndexedDB'",[1002,46251,1085],{"class":1030},[1002,46253,46254],{"class":1004,"line":1272},[1002,46255,15113],{"class":1030},[1002,46257,46258],{"class":1004,"line":1348},[1002,46259,1051],{"emptyLinePlaceholder":1050},[1002,46261,46262,46264,46267,46269,46271,46273,46275],{"class":1004,"line":1354},[1002,46263,46225],{"class":1030},[1002,46265,46266],{"class":1026},"onsuccess",[1002,46268,1023],{"class":1015},[1002,46270,8457],{"class":1015},[1002,46272,6513],{"class":1030},[1002,46274,27262],{"class":2378},[1002,46276,2382],{"class":1030},[1002,46278,46279,46281,46283,46285,46288],{"class":1004,"line":1360},[1002,46280,3030],{"class":1030},[1002,46282,2886],{"class":1026},[1002,46284,1031],{"class":1030},[1002,46286,46287],{"class":1034},"'Success!'",[1002,46289,1085],{"class":1030},[1002,46291,46292,46295,46297],{"class":1004,"line":1366},[1002,46293,46294],{"class":1030}," db ",[1002,46296,2393],{"class":1015},[1002,46298,46299],{"class":1030}," e.target.result;\n",[1002,46301,46302],{"class":1004,"line":1946},[1002,46303,15113],{"class":1030},[1002,46305,46306],{"class":1004,"line":1956},[1002,46307,1051],{"emptyLinePlaceholder":1050},[1002,46309,46310,46312,46315,46317,46319,46321,46323],{"class":1004,"line":1961},[1002,46311,46225],{"class":1030},[1002,46313,46314],{"class":1026},"onerror",[1002,46316,1023],{"class":1015},[1002,46318,8457],{"class":1015},[1002,46320,6513],{"class":1030},[1002,46322,27262],{"class":2378},[1002,46324,2382],{"class":1030},[1002,46326,46327,46329,46331,46333,46336],{"class":1004,"line":1971},[1002,46328,3030],{"class":1030},[1002,46330,2886],{"class":1026},[1002,46332,1031],{"class":1030},[1002,46334,46335],{"class":1034},"'Error'",[1002,46337,1085],{"class":1030},[1002,46339,46340,46342,46344],{"class":1004,"line":1980},[1002,46341,3030],{"class":1030},[1002,46343,43387],{"class":1026},[1002,46345,46346],{"class":1030},"(e);\n",[1002,46348,46349],{"class":1004,"line":1985},[1002,46350,15113],{"class":1030},[1002,46352,46353],{"class":1004,"line":1995},[1002,46354,1170],{"class":1030},[925,46356,46357],{},"This will not do anything yet, because we don’t have the vehicles database yet. Let’s create one,",[953,46359,46361],{"id":46360},"adding-data","Adding Data",[925,46363,46364],{},"Before we start, let’s create some dummy data.",[993,46366,46368],{"className":995,"code":46367,"language":997,"meta":998,"style":998},"var vehicles = [\n { id: '01', make: 'BMW', brand: 'X5', doors: 5 },\n { id: '02', make: 'Audi', brand: 'A5', doors: 5 },\n];\n",[941,46369,46370,46381,46408,46431],{"__ignoreMap":998},[1002,46371,46372,46374,46377,46379],{"class":1004,"line":1005},[1002,46373,18311],{"class":1015},[1002,46375,46376],{"class":1030}," vehicles ",[1002,46378,2393],{"class":1015},[1002,46380,10274],{"class":1030},[1002,46382,46383,46386,46389,46392,46395,46398,46401,46404,46406],{"class":1004,"line":1012},[1002,46384,46385],{"class":1030}," { id: ",[1002,46387,46388],{"class":1034},"'01'",[1002,46390,46391],{"class":1030},", make: ",[1002,46393,46394],{"class":1034},"'BMW'",[1002,46396,46397],{"class":1030},", brand: ",[1002,46399,46400],{"class":1034},"'X5'",[1002,46402,46403],{"class":1030},", doors: ",[1002,46405,2859],{"class":1019},[1002,46407,33835],{"class":1030},[1002,46409,46410,46412,46415,46417,46420,46422,46425,46427,46429],{"class":1004,"line":1047},[1002,46411,46385],{"class":1030},[1002,46413,46414],{"class":1034},"'02'",[1002,46416,46391],{"class":1030},[1002,46418,46419],{"class":1034},"'Audi'",[1002,46421,46397],{"class":1030},[1002,46423,46424],{"class":1034},"'A5'",[1002,46426,46403],{"class":1030},[1002,46428,2859],{"class":1019},[1002,46430,33835],{"class":1030},[1002,46432,46433],{"class":1004,"line":1054},[1002,46434,6754],{"class":1030},[925,46436,46437],{},"Next let’s create a function for adding data to the database.",[993,46439,46441],{"className":995,"code":46440,"language":997,"meta":998,"style":998},"function add(store, name, entry, index) {\n var transaction = store.transaction([name], 'readwrite');\n var objectStore = transaction.objectStore(name);\n var request = objectStore.add(entry, index);\n\n request.onsuccess = function (event) {\n console.log('%s has been added to IndexedDB', name);\n };\n\n request.onerror = function (event) {\n console.log('Unable to add %s\\r\\nIt already exists in IndexedDB!');\n };\n}\n",[941,46442,46443,46469,46492,46509,46526,46530,46547,46560,46564,46568,46584,46603,46607],{"__ignoreMap":998},[1002,46444,46445,46447,46449,46451,46454,46456,46458,46460,46463,46465,46467],{"class":1004,"line":1005},[1002,46446,6965],{"class":1015},[1002,46448,27368],{"class":1026},[1002,46450,1031],{"class":1030},[1002,46452,46453],{"class":2378},"store",[1002,46455,1251],{"class":1030},[1002,46457,5911],{"class":2378},[1002,46459,1251],{"class":1030},[1002,46461,46462],{"class":2378},"entry",[1002,46464,1251],{"class":1030},[1002,46466,19458],{"class":2378},[1002,46468,2382],{"class":1030},[1002,46470,46471,46473,46476,46478,46481,46484,46487,46490],{"class":1004,"line":1012},[1002,46472,28293],{"class":1015},[1002,46474,46475],{"class":1030}," transaction ",[1002,46477,2393],{"class":1015},[1002,46479,46480],{"class":1030}," store.",[1002,46482,46483],{"class":1026},"transaction",[1002,46485,46486],{"class":1030},"([name], ",[1002,46488,46489],{"class":1034},"'readwrite'",[1002,46491,1085],{"class":1030},[1002,46493,46494,46496,46499,46501,46504,46507],{"class":1004,"line":1047},[1002,46495,28293],{"class":1015},[1002,46497,46498],{"class":1030}," objectStore ",[1002,46500,2393],{"class":1015},[1002,46502,46503],{"class":1030}," transaction.",[1002,46505,46506],{"class":1026},"objectStore",[1002,46508,17508],{"class":1030},[1002,46510,46511,46513,46516,46518,46521,46523],{"class":1004,"line":1054},[1002,46512,28293],{"class":1015},[1002,46514,46515],{"class":1030}," request ",[1002,46517,2393],{"class":1015},[1002,46519,46520],{"class":1030}," objectStore.",[1002,46522,7985],{"class":1026},[1002,46524,46525],{"class":1030},"(entry, index);\n",[1002,46527,46528],{"class":1004,"line":1060},[1002,46529,1051],{"emptyLinePlaceholder":1050},[1002,46531,46532,46535,46537,46539,46541,46543,46545],{"class":1004,"line":1272},[1002,46533,46534],{"class":1030}," request.",[1002,46536,46266],{"class":1026},[1002,46538,1023],{"class":1015},[1002,46540,8457],{"class":1015},[1002,46542,6513],{"class":1030},[1002,46544,16696],{"class":2378},[1002,46546,2382],{"class":1030},[1002,46548,46549,46551,46553,46555,46558],{"class":1004,"line":1348},[1002,46550,3030],{"class":1030},[1002,46552,2886],{"class":1026},[1002,46554,1031],{"class":1030},[1002,46556,46557],{"class":1034},"'%s has been added to IndexedDB'",[1002,46559,43091],{"class":1030},[1002,46561,46562],{"class":1004,"line":1354},[1002,46563,15113],{"class":1030},[1002,46565,46566],{"class":1004,"line":1360},[1002,46567,1051],{"emptyLinePlaceholder":1050},[1002,46569,46570,46572,46574,46576,46578,46580,46582],{"class":1004,"line":1366},[1002,46571,46534],{"class":1030},[1002,46573,46314],{"class":1026},[1002,46575,1023],{"class":1015},[1002,46577,8457],{"class":1015},[1002,46579,6513],{"class":1030},[1002,46581,16696],{"class":2378},[1002,46583,2382],{"class":1030},[1002,46585,46586,46588,46590,46592,46595,46598,46601],{"class":1004,"line":1946},[1002,46587,3030],{"class":1030},[1002,46589,2886],{"class":1026},[1002,46591,1031],{"class":1030},[1002,46593,46594],{"class":1034},"'Unable to add %s",[1002,46596,46597],{"class":1019},"\\r\\n",[1002,46599,46600],{"class":1034},"It already exists in IndexedDB!'",[1002,46602,1085],{"class":1030},[1002,46604,46605],{"class":1004,"line":1956},[1002,46606,15113],{"class":1030},[1002,46608,46609],{"class":1004,"line":1961},[1002,46610,1170],{"class":1030},[925,46612,46613,46614,46616],{},"Now we will update the ",[941,46615,46266],{}," method to insert data to the database.",[993,46618,46620],{"className":995,"code":46619,"language":997,"meta":998,"style":998},"openRequest.onsuccess = function (event) {\n console.log('Success!');\n\n var store = event.target.result;\n\n var vehicles = [\n { id: '01', make: 'BMW', brand: 'X5', doors: 5 },\n { id: '02', make: 'Audi', brand: 'A5', doors: 5 },\n ];\n\n vehicles.forEach(function (vehicle, index) {\n add(store, 'vehicles', vehicle, index);\n });\n};\n",[941,46621,46622,46639,46651,46655,46666,46670,46680,46701,46721,46726,46730,46751,46764,46768],{"__ignoreMap":998},[1002,46623,46624,46627,46629,46631,46633,46635,46637],{"class":1004,"line":1005},[1002,46625,46626],{"class":1030},"openRequest.",[1002,46628,46266],{"class":1026},[1002,46630,1023],{"class":1015},[1002,46632,8457],{"class":1015},[1002,46634,6513],{"class":1030},[1002,46636,16696],{"class":2378},[1002,46638,2382],{"class":1030},[1002,46640,46641,46643,46645,46647,46649],{"class":1004,"line":1012},[1002,46642,6977],{"class":1030},[1002,46644,2886],{"class":1026},[1002,46646,1031],{"class":1030},[1002,46648,46287],{"class":1034},[1002,46650,1085],{"class":1030},[1002,46652,46653],{"class":1004,"line":1047},[1002,46654,1051],{"emptyLinePlaceholder":1050},[1002,46656,46657,46659,46661,46663],{"class":1004,"line":1054},[1002,46658,28293],{"class":1015},[1002,46660,37742],{"class":1030},[1002,46662,2393],{"class":1015},[1002,46664,46665],{"class":1030}," event.target.result;\n",[1002,46667,46668],{"class":1004,"line":1060},[1002,46669,1051],{"emptyLinePlaceholder":1050},[1002,46671,46672,46674,46676,46678],{"class":1004,"line":1272},[1002,46673,28293],{"class":1015},[1002,46675,46376],{"class":1030},[1002,46677,2393],{"class":1015},[1002,46679,10274],{"class":1030},[1002,46681,46682,46685,46687,46689,46691,46693,46695,46697,46699],{"class":1004,"line":1348},[1002,46683,46684],{"class":1030}," { id: ",[1002,46686,46388],{"class":1034},[1002,46688,46391],{"class":1030},[1002,46690,46394],{"class":1034},[1002,46692,46397],{"class":1030},[1002,46694,46400],{"class":1034},[1002,46696,46403],{"class":1030},[1002,46698,2859],{"class":1019},[1002,46700,33835],{"class":1030},[1002,46702,46703,46705,46707,46709,46711,46713,46715,46717,46719],{"class":1004,"line":1354},[1002,46704,46684],{"class":1030},[1002,46706,46414],{"class":1034},[1002,46708,46391],{"class":1030},[1002,46710,46419],{"class":1034},[1002,46712,46397],{"class":1030},[1002,46714,46424],{"class":1034},[1002,46716,46403],{"class":1030},[1002,46718,2859],{"class":1019},[1002,46720,33835],{"class":1030},[1002,46722,46723],{"class":1004,"line":1360},[1002,46724,46725],{"class":1030}," ];\n",[1002,46727,46728],{"class":1004,"line":1366},[1002,46729,1051],{"emptyLinePlaceholder":1050},[1002,46731,46732,46735,46737,46739,46741,46743,46745,46747,46749],{"class":1004,"line":1946},[1002,46733,46734],{"class":1030}," vehicles.",[1002,46736,8408],{"class":1026},[1002,46738,1031],{"class":1030},[1002,46740,6965],{"class":1015},[1002,46742,6513],{"class":1030},[1002,46744,2698],{"class":2378},[1002,46746,1251],{"class":1030},[1002,46748,19458],{"class":2378},[1002,46750,2382],{"class":1030},[1002,46752,46753,46756,46759,46761],{"class":1004,"line":1956},[1002,46754,46755],{"class":1026}," add",[1002,46757,46758],{"class":1030},"(store, ",[1002,46760,46149],{"class":1034},[1002,46762,46763],{"class":1030},", vehicle, index);\n",[1002,46765,46766],{"class":1004,"line":1961},[1002,46767,19836],{"class":1030},[1002,46769,46770],{"class":1004,"line":1971},[1002,46771,1517],{"class":1030},[925,46773,46774,46775,46777],{},"Open the ",[941,46776,37877],{}," file on your browser and then the developer tools (F9 or Cmd+Alt+I). You will see the following messages in the console as well as the entries in the IndexedDB database.",[993,46779,46782],{"className":46780,"code":46781,"language":24241},[24239],"IndexedDB is supported\n\nSuccess!\n\nvehicles has been added to IndexedDB\n",[941,46783,46781],{"__ignoreMap":998},[953,46785,46787],{"id":46786},"retrieve-data","Retrieve Data",[925,46789,46790,46791,22383],{},"Just like adding data to IndexedDB, we can retrieve data using ",[941,46792,46793],{},"get()",[993,46795,46797],{"className":995,"code":46796,"language":997,"meta":998,"style":998},"function read(store, name, entry) {\n var transaction = store.transaction([name]);\n var objectStore = transaction.objectStore(name);\n var request = objectStore.get(entry);\n\n request.onsuccess = function (event) {\n if (request.result) {\n console.log(\n 'Make: %s Brand: %s',\n request.result.make,\n request.result.brand,\n );\n } else {\n console.log('Unable to find the key %s', entry);\n }\n };\n\n request.onerror = function (event) {\n console.log(\n 'Unable to retrive %s\\r\\nIt already exists in IndexedDB!',\n entry,\n );\n };\n}\n",[941,46798,46799,46820,46835,46849,46864,46868,46884,46891,46899,46906,46911,46916,46920,46928,46942,46946,46950,46954,46970,46978,46989,46994,46998,47002],{"__ignoreMap":998},[1002,46800,46801,46803,46806,46808,46810,46812,46814,46816,46818],{"class":1004,"line":1005},[1002,46802,6965],{"class":1015},[1002,46804,46805],{"class":1026}," read",[1002,46807,1031],{"class":1030},[1002,46809,46453],{"class":2378},[1002,46811,1251],{"class":1030},[1002,46813,5911],{"class":2378},[1002,46815,1251],{"class":1030},[1002,46817,46462],{"class":2378},[1002,46819,2382],{"class":1030},[1002,46821,46822,46824,46826,46828,46830,46832],{"class":1004,"line":1012},[1002,46823,28293],{"class":1015},[1002,46825,46475],{"class":1030},[1002,46827,2393],{"class":1015},[1002,46829,46480],{"class":1030},[1002,46831,46483],{"class":1026},[1002,46833,46834],{"class":1030},"([name]);\n",[1002,46836,46837,46839,46841,46843,46845,46847],{"class":1004,"line":1047},[1002,46838,28293],{"class":1015},[1002,46840,46498],{"class":1030},[1002,46842,2393],{"class":1015},[1002,46844,46503],{"class":1030},[1002,46846,46506],{"class":1026},[1002,46848,17508],{"class":1030},[1002,46850,46851,46853,46855,46857,46859,46861],{"class":1004,"line":1054},[1002,46852,28293],{"class":1015},[1002,46854,46515],{"class":1030},[1002,46856,2393],{"class":1015},[1002,46858,46520],{"class":1030},[1002,46860,8070],{"class":1026},[1002,46862,46863],{"class":1030},"(entry);\n",[1002,46865,46866],{"class":1004,"line":1060},[1002,46867,1051],{"emptyLinePlaceholder":1050},[1002,46869,46870,46872,46874,46876,46878,46880,46882],{"class":1004,"line":1272},[1002,46871,46534],{"class":1030},[1002,46873,46266],{"class":1026},[1002,46875,1023],{"class":1015},[1002,46877,8457],{"class":1015},[1002,46879,6513],{"class":1030},[1002,46881,16696],{"class":2378},[1002,46883,2382],{"class":1030},[1002,46885,46886,46888],{"class":1004,"line":1348},[1002,46887,4368],{"class":1015},[1002,46889,46890],{"class":1030}," (request.result) {\n",[1002,46892,46893,46895,46897],{"class":1004,"line":1354},[1002,46894,17336],{"class":1030},[1002,46896,2886],{"class":1026},[1002,46898,10468],{"class":1030},[1002,46900,46901,46904],{"class":1004,"line":1360},[1002,46902,46903],{"class":1034}," 'Make: %s Brand: %s'",[1002,46905,1143],{"class":1030},[1002,46907,46908],{"class":1004,"line":1366},[1002,46909,46910],{"class":1030}," request.result.make,\n",[1002,46912,46913],{"class":1004,"line":1946},[1002,46914,46915],{"class":1030}," request.result.brand,\n",[1002,46917,46918],{"class":1004,"line":1956},[1002,46919,13605],{"class":1030},[1002,46921,46922,46924,46926],{"class":1004,"line":1961},[1002,46923,6057],{"class":1030},[1002,46925,6060],{"class":1015},[1002,46927,1457],{"class":1030},[1002,46929,46930,46932,46934,46936,46939],{"class":1004,"line":1971},[1002,46931,17336],{"class":1030},[1002,46933,2886],{"class":1026},[1002,46935,1031],{"class":1030},[1002,46937,46938],{"class":1034},"'Unable to find the key %s'",[1002,46940,46941],{"class":1030},", entry);\n",[1002,46943,46944],{"class":1004,"line":1980},[1002,46945,2014],{"class":1030},[1002,46947,46948],{"class":1004,"line":1985},[1002,46949,15113],{"class":1030},[1002,46951,46952],{"class":1004,"line":1995},[1002,46953,1051],{"emptyLinePlaceholder":1050},[1002,46955,46956,46958,46960,46962,46964,46966,46968],{"class":1004,"line":2006},[1002,46957,46534],{"class":1030},[1002,46959,46314],{"class":1026},[1002,46961,1023],{"class":1015},[1002,46963,8457],{"class":1015},[1002,46965,6513],{"class":1030},[1002,46967,16696],{"class":2378},[1002,46969,2382],{"class":1030},[1002,46971,46972,46974,46976],{"class":1004,"line":2011},[1002,46973,3030],{"class":1030},[1002,46975,2886],{"class":1026},[1002,46977,10468],{"class":1030},[1002,46979,46980,46983,46985,46987],{"class":1004,"line":2017},[1002,46981,46982],{"class":1034}," 'Unable to retrive %s",[1002,46984,46597],{"class":1019},[1002,46986,46600],{"class":1034},[1002,46988,1143],{"class":1030},[1002,46990,46991],{"class":1004,"line":2022},[1002,46992,46993],{"class":1030}," entry,\n",[1002,46995,46996],{"class":1004,"line":2442},[1002,46997,22541],{"class":1030},[1002,46999,47000],{"class":1004,"line":2466},[1002,47001,15113],{"class":1030},[1002,47003,47004],{"class":1004,"line":2471},[1002,47005,1170],{"class":1030},[925,47007,47008,47009,47012],{},"Before testing this code, if you have run the code before, make sure you clear the ",[941,47010,47011],{},"vehicles"," table in the DevTools resource tab.",[925,47014,47015],{},"Now the console output will look like the following:",[993,47017,47020],{"className":47018,"code":47019,"language":24241},[24239],"IndexedDB is supported\n\nSuccess!\n\nvehicles has been added to IndexedDB\n\nMake: BMW Brand: X5\n",[941,47021,47019],{"__ignoreMap":998},[953,47023,26561],{"id":26560},[925,47025,47026],{},"IndexedDB brings basic database capability to the browser, making it possible to build web applications that work online and off. It does, however, require shifting your mind a bit, and becoming familiar with database concepts.",[925,47028,41595,47029,948],{},[933,47030,38060],{"href":47031,"rel":47032},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Findexeddb-intro",[937],[1579,47034,47035],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":47037},[47038,47039,47040,47041,47042,47043,47044,47045],{"id":45890,"depth":1012,"text":45891},{"id":45924,"depth":1012,"text":45925},{"id":45931,"depth":1012,"text":45932},{"id":45938,"depth":1012,"text":45939},{"id":46109,"depth":1012,"text":46110},{"id":46360,"depth":1012,"text":46361},{"id":46786,"depth":1012,"text":46787},{"id":26560,"depth":1012,"text":26561},"2016-04-18","\u002Fimages\u002Fblog\u002Ffeatures\u002Findexeddb.jpg",{},{"title":427,"description":429},"blog\u002Findexeddb",[16,17,431],"rhVREU17rSe0u4Ul-oae__LpLPi-NIEujRaH-Nc8FpE",{"id":47054,"title":20,"author":920,"body":47055,"date":47785,"description":22,"extension":1591,"image":47786,"meta":47787,"navigation":1050,"path":21,"seo":47788,"stem":47789,"tags":47790,"__hash__":47791},"blog\u002Fblog\u002Fangular-translate.md",{"type":922,"value":47056,"toc":47778},[47057,47061,47088,47092,47095,47100,47398,47408,47424,47430,47700,47703,47707,47713,47752,47755,47763,47765,47768,47775],[953,47058,47060],{"id":47059},"why-angular-translate","Why Angular Translate?",[925,47062,47063,47064,47067,47068,47071,47072,2034,47075,47078,47079,1251,47082,2034,47085,948],{},"This library includes ",[941,47065,47066],{},"pluralization"," as well as ",[941,47069,47070],{},"lazy loading",". The library also contains ",[941,47073,47074],{},"filters",[941,47076,47077],{},"directives",". it is also very flexible in terms of building your own ",[941,47080,47081],{},"storages",[941,47083,47084],{},"loaders",[941,47086,47087],{},"error handlers",[953,47089,47091],{"id":47090},"sample-app","Sample App",[925,47093,47094],{},"Let’s build a sample app to try out angular-translate.",[925,47096,33150,47097,47099],{},[941,47098,37877],{}," file and insert the code below.",[993,47101,47103],{"className":37880,"code":47102,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html>\n\u003Chtml ng-app=\"app\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Ctitle>Angular Translate Intro\u003C\u002Ftitle>\n \u003Clink rel=\"stylesheet\" href=\".\u002Fcss\u002Fstyle.css\" \u002F>\n \u003C\u002Fhead>\n \u003Cbody ng-controller=\"ctrl\">\n \u003Cdiv class=\"dictionary\">\n \u003Ch1>{{'title' | translate}}\u003C\u002Fh1>\n \u003Cp>{{'description' | translate}}\u003C\u002Fp>\n \u003Cinput type=\"button\" ng-click=\"changeLang('en')\" value=\"English\" \u002F>\n \u003Cinput type=\"button\" ng-click=\"changeLang('zh-cn')\" value=\"Chinese\" \u002F>\n \u003C\u002Fdiv>\n\n \u003Cscript src=\".\u002Fjs\u002Fangular.min.js\">\u003C\u002Fscript>\n \u003Cscript src=\".\u002Fjs\u002Fangular-translate.min.js\">\u003C\u002Fscript>\n \u003Cscript src=\".\u002Fjs\u002Fapp.js\">\u003C\u002Fscript>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,47104,47105,47115,47130,47138,47152,47165,47190,47198,47214,47229,47242,47255,47285,47313,47321,47325,47344,47363,47382,47390],{"__ignoreMap":998},[1002,47106,47107,47109,47111,47113],{"class":1004,"line":1005},[1002,47108,37888],{"class":1030},[1002,47110,37891],{"class":15711},[1002,47112,21739],{"class":1026},[1002,47114,15703],{"class":1030},[1002,47116,47117,47119,47121,47124,47126,47128],{"class":1004,"line":1012},[1002,47118,6539],{"class":1030},[1002,47120,383],{"class":15711},[1002,47122,47123],{"class":1026}," ng-app",[1002,47125,2393],{"class":1030},[1002,47127,22011],{"class":1034},[1002,47129,15703],{"class":1030},[1002,47131,47132,47134,47136],{"class":1004,"line":1047},[1002,47133,22427],{"class":1030},[1002,47135,32092],{"class":15711},[1002,47137,15703],{"class":1030},[1002,47139,47140,47142,47144,47146,47148,47150],{"class":1004,"line":1054},[1002,47141,15697],{"class":1030},[1002,47143,37926],{"class":15711},[1002,47145,37929],{"class":1026},[1002,47147,2393],{"class":1030},[1002,47149,37934],{"class":1034},[1002,47151,15258],{"class":1030},[1002,47153,47154,47156,47158,47161,47163],{"class":1004,"line":1060},[1002,47155,15697],{"class":1030},[1002,47157,15029],{"class":15711},[1002,47159,47160],{"class":1030},">Angular Translate Intro\u003C\u002F",[1002,47162,15029],{"class":15711},[1002,47164,15703],{"class":1030},[1002,47166,47167,47169,47172,47175,47177,47180,47183,47185,47188],{"class":1004,"line":1272},[1002,47168,15697],{"class":1030},[1002,47170,47171],{"class":15711},"link",[1002,47173,47174],{"class":1026}," rel",[1002,47176,2393],{"class":1030},[1002,47178,47179],{"class":1034},"\"stylesheet\"",[1002,47181,47182],{"class":1026}," href",[1002,47184,2393],{"class":1030},[1002,47186,47187],{"class":1034},"\".\u002Fcss\u002Fstyle.css\"",[1002,47189,15258],{"class":1030},[1002,47191,47192,47194,47196],{"class":1004,"line":1348},[1002,47193,28112],{"class":1030},[1002,47195,32092],{"class":15711},[1002,47197,15703],{"class":1030},[1002,47199,47200,47202,47204,47207,47209,47212],{"class":1004,"line":1354},[1002,47201,22427],{"class":1030},[1002,47203,15034],{"class":15711},[1002,47205,47206],{"class":1026}," ng-controller",[1002,47208,2393],{"class":1030},[1002,47210,47211],{"class":1034},"\"ctrl\"",[1002,47213,15703],{"class":1030},[1002,47215,47216,47218,47220,47222,47224,47227],{"class":1004,"line":1360},[1002,47217,15697],{"class":1030},[1002,47219,19650],{"class":15711},[1002,47221,17187],{"class":1026},[1002,47223,2393],{"class":1030},[1002,47225,47226],{"class":1034},"\"dictionary\"",[1002,47228,15703],{"class":1030},[1002,47230,47231,47233,47235,47238,47240],{"class":1004,"line":1366},[1002,47232,19579],{"class":1030},[1002,47234,15201],{"class":15711},[1002,47236,47237],{"class":1030},">{{'title' | translate}}\u003C\u002F",[1002,47239,15201],{"class":15711},[1002,47241,15703],{"class":1030},[1002,47243,47244,47246,47248,47251,47253],{"class":1004,"line":1946},[1002,47245,19579],{"class":1030},[1002,47247,925],{"class":15711},[1002,47249,47250],{"class":1030},">{{'description' | translate}}\u003C\u002F",[1002,47252,925],{"class":15711},[1002,47254,15703],{"class":1030},[1002,47256,47257,47259,47261,47263,47265,47268,47271,47273,47276,47278,47280,47283],{"class":1004,"line":1956},[1002,47258,19579],{"class":1030},[1002,47260,5803],{"class":15711},[1002,47262,29274],{"class":1026},[1002,47264,2393],{"class":1030},[1002,47266,47267],{"class":1034},"\"button\"",[1002,47269,47270],{"class":1026}," ng-click",[1002,47272,2393],{"class":1030},[1002,47274,47275],{"class":1034},"\"changeLang('en')\"",[1002,47277,30398],{"class":1026},[1002,47279,2393],{"class":1030},[1002,47281,47282],{"class":1034},"\"English\"",[1002,47284,15258],{"class":1030},[1002,47286,47287,47289,47291,47293,47295,47297,47299,47301,47304,47306,47308,47311],{"class":1004,"line":1961},[1002,47288,19579],{"class":1030},[1002,47290,5803],{"class":15711},[1002,47292,29274],{"class":1026},[1002,47294,2393],{"class":1030},[1002,47296,47267],{"class":1034},[1002,47298,47270],{"class":1026},[1002,47300,2393],{"class":1030},[1002,47302,47303],{"class":1034},"\"changeLang('zh-cn')\"",[1002,47305,30398],{"class":1026},[1002,47307,2393],{"class":1030},[1002,47309,47310],{"class":1034},"\"Chinese\"",[1002,47312,15258],{"class":1030},[1002,47314,47315,47317,47319],{"class":1004,"line":1971},[1002,47316,19647],{"class":1030},[1002,47318,19650],{"class":15711},[1002,47320,15703],{"class":1030},[1002,47322,47323],{"class":1004,"line":1980},[1002,47324,1051],{"emptyLinePlaceholder":1050},[1002,47326,47327,47329,47331,47333,47335,47338,47340,47342],{"class":1004,"line":1985},[1002,47328,15697],{"class":1030},[1002,47330,22063],{"class":15711},[1002,47332,15242],{"class":1026},[1002,47334,2393],{"class":1030},[1002,47336,47337],{"class":1034},"\".\u002Fjs\u002Fangular.min.js\"",[1002,47339,22081],{"class":1030},[1002,47341,22063],{"class":15711},[1002,47343,15703],{"class":1030},[1002,47345,47346,47348,47350,47352,47354,47357,47359,47361],{"class":1004,"line":1995},[1002,47347,15697],{"class":1030},[1002,47349,22063],{"class":15711},[1002,47351,15242],{"class":1026},[1002,47353,2393],{"class":1030},[1002,47355,47356],{"class":1034},"\".\u002Fjs\u002Fangular-translate.min.js\"",[1002,47358,22081],{"class":1030},[1002,47360,22063],{"class":15711},[1002,47362,15703],{"class":1030},[1002,47364,47365,47367,47369,47371,47373,47376,47378,47380],{"class":1004,"line":2006},[1002,47366,15697],{"class":1030},[1002,47368,22063],{"class":15711},[1002,47370,15242],{"class":1026},[1002,47372,2393],{"class":1030},[1002,47374,47375],{"class":1034},"\".\u002Fjs\u002Fapp.js\"",[1002,47377,22081],{"class":1030},[1002,47379,22063],{"class":15711},[1002,47381,15703],{"class":1030},[1002,47383,47384,47386,47388],{"class":1004,"line":2011},[1002,47385,28112],{"class":1030},[1002,47387,15034],{"class":15711},[1002,47389,15703],{"class":1030},[1002,47391,47392,47394,47396],{"class":1004,"line":2017},[1002,47393,22437],{"class":1030},[1002,47395,383],{"class":15711},[1002,47397,15703],{"class":1030},[925,47399,47400,47401,47067,47404,47407],{},"We are referencing ",[941,47402,47403],{},"angular.min.js",[941,47405,47406],{},"angular-translate.min.js"," libraries here. You can alternatively reference these libraries from teh CDN.",[1530,47409,47410,47417],{},[974,47411,47412,47413],{},"AngularJS – ",[933,47414,47415],{"href":47415,"rel":47416},"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fangular.js\u002F1.5.3\u002Fangular.min.js",[937],[974,47418,47419,47420],{},"Angular Translate – ",[933,47421,47422],{"href":47422,"rel":47423},"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fangular-translate\u002F2.10.0\u002Fangular-translate.min.js",[937],[925,47425,47426,47427,47099],{},"Now we need to create an ",[941,47428,47429],{},"app.js",[993,47431,47433],{"className":995,"code":47432,"language":997,"meta":998,"style":998},"var app = angular.module('app', ['pascalprecht.translate']);\n\napp.config(function($translateProvider) {\n\n $translateProvider\n .translations('en', {\n \"title\": \"Car\",\n \"description\": \"A motor vehicle with four wheels;\n usually propelled by an internal combustion engine.\"\n })\n .translations('zh-cn', {\n \"title\": \"汽车\",\n \"description\": \"机动车与四个车轮;通常由内燃机驱动。\"\n });\n\n $translateProvider.preferredLanguage('en');\n\n});\n\napp.controller('ctrl', [\n '$scope', '$translate',\n function($scope, $translate) {\n $scope.changeLang = function changeLangFn(langKey) {\n $translate.use(langKey);\n };\n }\n]);\n",[941,47434,47435,47461,47465,47483,47487,47492,47506,47518,47530,47538,47545,47558,47569,47578,47583,47587,47601,47605,47609,47613,47628,47640,47656,47678,47688,47692,47696],{"__ignoreMap":998},[1002,47436,47437,47439,47441,47443,47446,47448,47450,47453,47456,47459],{"class":1004,"line":1005},[1002,47438,18311],{"class":1015},[1002,47440,42880],{"class":1030},[1002,47442,2393],{"class":1015},[1002,47444,47445],{"class":1030}," angular.",[1002,47447,1227],{"class":1026},[1002,47449,1031],{"class":1030},[1002,47451,47452],{"class":1034},"'app'",[1002,47454,47455],{"class":1030},", [",[1002,47457,47458],{"class":1034},"'pascalprecht.translate'",[1002,47460,29611],{"class":1030},[1002,47462,47463],{"class":1004,"line":1012},[1002,47464,1051],{"emptyLinePlaceholder":1050},[1002,47466,47467,47469,47472,47474,47476,47478,47481],{"class":1004,"line":1047},[1002,47468,21891],{"class":1030},[1002,47470,47471],{"class":1026},"config",[1002,47473,1031],{"class":1030},[1002,47475,6965],{"class":1015},[1002,47477,1031],{"class":1030},[1002,47479,47480],{"class":2378},"$translateProvider",[1002,47482,2382],{"class":1030},[1002,47484,47485],{"class":1004,"line":1054},[1002,47486,1051],{"emptyLinePlaceholder":1050},[1002,47488,47489],{"class":1004,"line":1060},[1002,47490,47491],{"class":1030}," $translateProvider\n",[1002,47493,47494,47496,47499,47501,47504],{"class":1004,"line":1272},[1002,47495,40738],{"class":1030},[1002,47497,47498],{"class":1026},"translations",[1002,47500,1031],{"class":1030},[1002,47502,47503],{"class":1034},"'en'",[1002,47505,38330],{"class":1030},[1002,47507,47508,47511,47513,47516],{"class":1004,"line":1348},[1002,47509,47510],{"class":1034}," \"title\"",[1002,47512,1137],{"class":1030},[1002,47514,47515],{"class":1034},"\"Car\"",[1002,47517,1143],{"class":1030},[1002,47519,47520,47523,47525,47528],{"class":1004,"line":1354},[1002,47521,47522],{"class":1034}," \"description\"",[1002,47524,1137],{"class":1030},[1002,47526,47527],{"class":1034},"\"A motor vehicle with four wheels",[1002,47529,1407],{"class":18541},[1002,47531,47532,47535],{"class":1004,"line":1360},[1002,47533,47534],{"class":1030}," usually propelled by an internal combustion engine.",[1002,47536,47537],{"class":1034},"\"\n",[1002,47539,47540,47543],{"class":1004,"line":1366},[1002,47541,47542],{"class":1034}," }",[1002,47544,3808],{"class":18541},[1002,47546,47547,47549,47551,47553,47556],{"class":1004,"line":1946},[1002,47548,40738],{"class":1030},[1002,47550,47498],{"class":1026},[1002,47552,1031],{"class":1030},[1002,47554,47555],{"class":1034},"'zh-cn'",[1002,47557,38330],{"class":1030},[1002,47559,47560,47562,47564,47567],{"class":1004,"line":1956},[1002,47561,47510],{"class":1034},[1002,47563,1137],{"class":1030},[1002,47565,47566],{"class":1034},"\"汽车\"",[1002,47568,1143],{"class":1030},[1002,47570,47571,47573,47575],{"class":1004,"line":1961},[1002,47572,47522],{"class":1034},[1002,47574,1137],{"class":1030},[1002,47576,47577],{"class":1034},"\"机动车与四个车轮;通常由内燃机驱动。\"\n",[1002,47579,47580],{"class":1004,"line":1971},[1002,47581,47582],{"class":1030}," });\n",[1002,47584,47585],{"class":1004,"line":1980},[1002,47586,1051],{"emptyLinePlaceholder":1050},[1002,47588,47589,47592,47595,47597,47599],{"class":1004,"line":1985},[1002,47590,47591],{"class":1030}," $translateProvider.",[1002,47593,47594],{"class":1026},"preferredLanguage",[1002,47596,1031],{"class":1030},[1002,47598,47503],{"class":1034},[1002,47600,1085],{"class":1030},[1002,47602,47603],{"class":1004,"line":1995},[1002,47604,1051],{"emptyLinePlaceholder":1050},[1002,47606,47607],{"class":1004,"line":2006},[1002,47608,2804],{"class":1030},[1002,47610,47611],{"class":1004,"line":2011},[1002,47612,1051],{"emptyLinePlaceholder":1050},[1002,47614,47615,47617,47620,47622,47625],{"class":1004,"line":2017},[1002,47616,21891],{"class":1030},[1002,47618,47619],{"class":1026},"controller",[1002,47621,1031],{"class":1030},[1002,47623,47624],{"class":1034},"'ctrl'",[1002,47626,47627],{"class":1030},", [\n",[1002,47629,47630,47633,47635,47638],{"class":1004,"line":2022},[1002,47631,47632],{"class":1034}," '$scope'",[1002,47634,1251],{"class":1030},[1002,47636,47637],{"class":1034},"'$translate'",[1002,47639,1143],{"class":1030},[1002,47641,47642,47644,47646,47649,47651,47654],{"class":1004,"line":2442},[1002,47643,18965],{"class":1015},[1002,47645,1031],{"class":1030},[1002,47647,47648],{"class":2378},"$scope",[1002,47650,1251],{"class":1030},[1002,47652,47653],{"class":2378},"$translate",[1002,47655,2382],{"class":1030},[1002,47657,47658,47661,47664,47666,47668,47671,47673,47676],{"class":1004,"line":2466},[1002,47659,47660],{"class":1030}," $scope.",[1002,47662,47663],{"class":1026},"changeLang",[1002,47665,1023],{"class":1015},[1002,47667,8457],{"class":1015},[1002,47669,47670],{"class":1026}," changeLangFn",[1002,47672,1031],{"class":1030},[1002,47674,47675],{"class":2378},"langKey",[1002,47677,2382],{"class":1030},[1002,47679,47680,47683,47685],{"class":1004,"line":2471},[1002,47681,47682],{"class":1030}," $translate.",[1002,47684,21894],{"class":1026},[1002,47686,47687],{"class":1030},"(langKey);\n",[1002,47689,47690],{"class":1004,"line":2476},[1002,47691,10900],{"class":1030},[1002,47693,47694],{"class":1004,"line":2481},[1002,47695,1269],{"class":1030},[1002,47697,47698],{"class":1004,"line":2491},[1002,47699,29611],{"class":1030},[925,47701,47702],{},"In the above code we inject the angular-translate module into our code. This way angular-translate gets to control our web pages.",[1655,47704,47706],{"id":47705},"language-resource-files","Language Resource Files",[925,47708,47709,47710,47712],{},"Instead of definining translations inside our ",[941,47711,47429],{},", we can define the files statically outside a different location.",[993,47714,47716],{"className":995,"code":47715,"language":997,"meta":998,"style":998},"$translateProvider.useStaticFilesLoader({\n prefix: '\u002Fjs\u002F',\n suffix: '\u002Fen.json',\n});\n",[941,47717,47718,47728,47738,47748],{"__ignoreMap":998},[1002,47719,47720,47723,47726],{"class":1004,"line":1005},[1002,47721,47722],{"class":1030},"$translateProvider.",[1002,47724,47725],{"class":1026},"useStaticFilesLoader",[1002,47727,2756],{"class":1030},[1002,47729,47730,47733,47736],{"class":1004,"line":1012},[1002,47731,47732],{"class":1030}," prefix: ",[1002,47734,47735],{"class":1034},"'\u002Fjs\u002F'",[1002,47737,1143],{"class":1030},[1002,47739,47740,47743,47746],{"class":1004,"line":1047},[1002,47741,47742],{"class":1030}," suffix: ",[1002,47744,47745],{"class":1034},"'\u002Fen.json'",[1002,47747,1143],{"class":1030},[1002,47749,47750],{"class":1004,"line":1054},[1002,47751,2804],{"class":1030},[925,47753,47754],{},"The result will appear as the following. You can switch between languages by clicking the buttons.",[29454,47756,47762],{"height":47757,"style":47758,"scrolling":47759,"title":47760,"src":47761,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},265,"width: 100%;","no","Angular Translate","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FQNQvYd?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FQNQvYd'>Angular Translate\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[953,47764,26561],{"id":26560},[925,47766,47767],{},"Angular Translate is a great library for solving localization as well as internationalization and it’s very easy to add to your own Angular web sites.",[925,47769,47770,47771,948],{},"The Github source for this article can be found in ",[933,47772,14815],{"href":47773,"rel":47774},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fangular-translate-intro",[937],[1579,47776,47777],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":47779},[47780,47781,47784],{"id":47059,"depth":1012,"text":47060},{"id":47090,"depth":1012,"text":47091,"children":47782},[47783],{"id":47705,"depth":1047,"text":47706},{"id":26560,"depth":1012,"text":26561},"2016-04-11","\u002Fimages\u002Fblog\u002Ffeatures\u002Fangular-translate.jpg",{},{"title":20,"description":22},"blog\u002Fangular-translate",[16,17,18],"cmQLgr5PswORC_5FgH7eXDt42YjIJ6VdilHjfSFqnmE",{"id":47793,"title":887,"author":920,"body":47794,"date":48039,"description":889,"extension":1591,"image":48040,"meta":48041,"navigation":1050,"path":888,"seo":48042,"stem":48043,"tags":48044,"__hash__":48045},"blog\u002Fblog\u002Fvirtual-dom.md",{"type":922,"value":47795,"toc":48032},[47796,47799,47803,47806,47810,47813,47816,47819,47823,47826,47834,47838,47841,47852,47855,47960,47971,47976,47979,47982,47985,47988,48002,48005,48016,48021,48024,48026,48029],[925,47797,47798],{},"This approach is faster than working with the actual DOM, because changing elements of the DOM tree affects the performance.",[22063,47800],{"type":47801,"src":47802},"text\u002Fjavascript","\u002F\u002Fwww.google.com\u002Ftrends\u002Fembed.js?hl=en-US&q=%22virtual+dom%22,+%22shadow+dom%22,+%22document+object+model%22&date=1\u002F2010+57m&cmpt=q&tz=Etc\u002FGMT-11&content=1&cid=TIMESERIES_GRAPH_AVERAGES_CHART&export=5&w=500&h=330",[925,47804,47805],{},"Before getting deep into Virtual DOM, let's investigate the problems with touching DOM directly.",[953,47807,47809],{"id":47808},"problems-with-dom","Problems with DOM",[925,47811,47812],{},"One of the biggest issues with the DOM is it isn't designed for complex and dynamic web pages. The web has evolved to a degree, where having over thousands of nodes on one page has become quite the norm. Take Facebook and Twitter for example. The unlimited amounts of posts on a single page can bring in thousands of nodes easily. Manipulating these nodes, can takes seconds.",[925,47814,47815],{},"Browsing on mobile also amplifies this problem. Mobiles phones have slower processors and the slowness of DOM manipulation can be well pronounced.",[925,47817,47818],{},"On top of virtual DOM, you might have heard of shadow DOM as well. This can get confusing, so let's clear things up.",[953,47820,47822],{"id":47821},"standard-dom","Standard DOM",[925,47824,47825],{},"The browser DOM or the W3C standard Document Object Model. When a web page is loaded, the web browser creates a DOM of the page which is constructed as a tree of Objects.",[7100,47827,47828],{"type":24048},[925,47829,47830,47831,47833],{},"The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. - ",[1107,47832,34873],{},"\"\ntitle=\"",[953,47835,47837],{"id":47836},"shadow-dom","Shadow DOM",[925,47839,47840],{},"W3C is working on a draft standard called shadow DOM. It provides much-needed encapsulation for web components, of its CSS, JavaScript and templating.",[7100,47842,47843],{"type":24048},[925,47844,47845,47846,47849,47850],{},"A document tree is a node tree ",[1002,47847,47848],{}," DOM"," whose root node is a document. Any element can host zero or one associated node trees, called a shadow tree . A shadow host is an element that hosts one shadow tree. A shadow tree has an associated flag, called an encapsulation mode , which is either open or closed. - ",[1107,47851,34873],{},[925,47853,47854],{},"One of the issues shadow DOM is trying resolve is separating itself from the main content it resides, by stopping CSS leaking into main content.",[993,47856,47858],{"className":995,"code":47857,"language":997,"meta":998,"style":998},"\u003Chtml>\n \u003Chead>\u003C\u002Fhead>\n \u003Cbody>\n \u003Cp id=\"host\">\n \u003Cscript>\n var shadow = document.querySelector('#host').createShadowRoot();\n shadow.innerHTML = 'Hello Shadow DOM!';\n shadow.innerHTML += '\u003Cstyle>p { color: green; }\u003C\u002Fstyle>';\n \u003C\u002Fscript>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,47859,47860,47868,47880,47888,47903,47911,47916,47921,47936,47944,47952],{"__ignoreMap":998},[1002,47861,47862,47864,47866],{"class":1004,"line":1005},[1002,47863,6539],{"class":1030},[1002,47865,383],{"class":15711},[1002,47867,15703],{"class":1030},[1002,47869,47870,47872,47874,47876,47878],{"class":1004,"line":1012},[1002,47871,22427],{"class":1030},[1002,47873,32092],{"class":15711},[1002,47875,22081],{"class":1030},[1002,47877,32092],{"class":15711},[1002,47879,15703],{"class":1030},[1002,47881,47882,47884,47886],{"class":1004,"line":1047},[1002,47883,22427],{"class":1030},[1002,47885,15034],{"class":15711},[1002,47887,15703],{"class":1030},[1002,47889,47890,47892,47894,47896,47898,47901],{"class":1004,"line":1054},[1002,47891,15697],{"class":1030},[1002,47893,925],{"class":15711},[1002,47895,21489],{"class":1026},[1002,47897,2393],{"class":1015},[1002,47899,47900],{"class":1034},"\"host\"",[1002,47902,15703],{"class":1030},[1002,47904,47905,47907,47909],{"class":1004,"line":1060},[1002,47906,15697],{"class":1030},[1002,47908,22063],{"class":15711},[1002,47910,15703],{"class":1030},[1002,47912,47913],{"class":1004,"line":1272},[1002,47914,47915],{"class":1030}," var shadow = document.querySelector('#host').createShadowRoot();\n",[1002,47917,47918],{"class":1004,"line":1348},[1002,47919,47920],{"class":1030}," shadow.innerHTML = 'Hello Shadow DOM!';\n",[1002,47922,47923,47926,47928,47931,47933],{"class":1004,"line":1354},[1002,47924,47925],{"class":1030}," shadow.innerHTML += '\u003C",[1002,47927,1579],{"class":15711},[1002,47929,47930],{"class":1030},">p { color: green; }\u003C\u002F",[1002,47932,1579],{"class":15711},[1002,47934,47935],{"class":1030},">';\n",[1002,47937,47938,47940,47942],{"class":1004,"line":1360},[1002,47939,19647],{"class":1030},[1002,47941,22063],{"class":15711},[1002,47943,15703],{"class":1030},[1002,47945,47946,47948,47950],{"class":1004,"line":1366},[1002,47947,28112],{"class":1030},[1002,47949,15034],{"class":15711},[1002,47951,15703],{"class":1030},[1002,47953,47954,47956,47958],{"class":1004,"line":1946},[1002,47955,22437],{"class":1030},[1002,47957,383],{"class":15711},[1002,47959,15703],{"class":1030},[925,47961,47962,47963,47966,47967,47970],{},"In this example we are attaching the shadow DOM using ",[31621,47964,47965],{},"createShadowRoot()"," to the ",[31621,47968,47969],{},"paragraph"," element. And then we assign some styles to it.",[7100,47972,47973],{"type":23379},[925,47974,47975],{},"The shadow DOM should always be attached to an existing element.",[925,47977,47978],{},"The shadow DOM will only start to be displayed when we assign the paragraph element with content.",[953,47980,26662],{"id":47981},"virtual-dom",[925,47983,47984],{},"There is no standard for virtual DOM. But it does the rendering more efficiently by monitoring the changes, making the calculations on the memory and then the final result will be applied to the DOM.",[925,47986,47987],{},"The monitoring of data changes related to DOM is monitored in one of two ways:",[1530,47989,47990,47996],{},[974,47991,47992,47995],{},[941,47993,47994],{},"Dirty checking"," - Detect changes to the data by continuously polling at regular intervals",[974,47997,47998,48001],{},[941,47999,48000],{},"Observable"," - A state change will trigger an update for only affected nodes as described below.",[925,48003,48004],{},"The mechanism for updating DOM uses the following methods:",[1530,48006,48007,48010,48013],{},[974,48008,48009],{},"Batch DOM read\u002Fwrites",[974,48011,48012],{},"Fast diff algorithms",[974,48014,48015],{},"Sub-tree only updates",[925,48017,48018,48019,948],{},"The methods described above are complex to implement but one of the most popular libraries doing this is ",[941,48020,33088],{},[925,48022,48023],{},"By batching DOM updates using functional programming, by diffing before and after chunks of framework based custom components, and only updating changes when necessary, virtual DOM increases the maintainability as well as performance.",[953,48025,26561],{"id":26560},[925,48027,48028],{},"Virtual DOM enables us to improve the performance of the front-end libraries by significantly reducing the DOM manipulation overhead, by using algorithms with JavaScript objects to mimick the DOM and then rendering the end result to the DOM.",[1579,48030,48031],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":48033},[48034,48035,48036,48037,48038],{"id":47808,"depth":1012,"text":47809},{"id":47821,"depth":1012,"text":47822},{"id":47836,"depth":1012,"text":47837},{"id":47981,"depth":1012,"text":26662},{"id":26560,"depth":1012,"text":26561},"2016-03-31","\u002Fimages\u002Fblog\u002Ffeatures\u002Fvirtual-dom.jpg",{},{"title":887,"description":889},"blog\u002Fvirtual-dom",[16,17],"XWnG7c3qGcjjbqMs9fSnvDnRroosyOduNxjHz2j3Sj8",{"id":48047,"title":79,"author":920,"body":48048,"date":48813,"description":81,"extension":1591,"image":48814,"meta":48815,"navigation":1050,"path":80,"seo":48816,"stem":48817,"tags":48818,"__hash__":48819},"blog\u002Fblog\u002Fbrowsersync-gulp.md",{"type":922,"value":48049,"toc":48804},[48050,48054,48057,48060,48064,48067,48071,48074,48083,48087,48090,48099,48108,48120,48124,48129,48154,48164,48172,48176,48185,48198,48244,48251,48258,48267,48270,48370,48383,48392,48398,48513,48522,48527,48790,48792,48795,48801],[953,48051,48053],{"id":48052},"what-is-gulp","What is Gulp?",[925,48055,48056],{},"Gulp is a tool for automating common tasks or what we call a build system. It’s similar to Grunt as it runs on Node.js and written in JavaScript but Grunt is a configuration driven where as Gulp is stream driven, which comes natural for developers.",[925,48058,48059],{},"With Gulp we can write tasks to minify or lint our JavaScript and CSS, parse templates, and compile your SASS when the files change.",[953,48061,48063],{"id":48062},"what-is-browsersync","What is BrowserSync",[925,48065,48066],{},"BrowserSync is a plugin that seamlessly integrates with tools like Gulp and Grunt. It can run simultaneously on different browsers and devices, and most importantly it can perform live reloading. This makes it a perfect tool to have in our developer toolkit.",[953,48068,48070],{"id":48069},"installing-gulp","Installing Gulp",[925,48072,48073],{},"Gulp comes as an npm package, so installing Gulp is quite effortless. First, install the Gulp package globally:",[993,48075,48077],{"className":1797,"code":48076,"language":1799,"meta":998,"style":998},"npm install gulp –g\n",[941,48078,48079],{"__ignoreMap":998},[1002,48080,48081],{"class":1004,"line":1005},[1002,48082,48076],{},[953,48084,48086],{"id":48085},"installing-browsersync","Installing BrowserSync",[925,48088,48089],{},"The preferred way of installing BrowserSync is installing it locally for each project rather than global install. This way a dependency can be added to your package.json when you are publishing your project.",[993,48091,48093],{"className":1797,"code":48092,"language":1799,"meta":998,"style":998},"npm install browser-sync ––save–dev\n",[941,48094,48095],{"__ignoreMap":998},[1002,48096,48097],{"class":1004,"line":1005},[1002,48098,48092],{},[925,48100,48101,48102,48104,48105,39931],{},"This will add an entry to your ",[941,48103,1102],{}," file under ",[941,48106,48107],{},"devDependecies",[7100,48109,48111],{"title":48110,"type":23379},"Avoid sudo",[925,48112,48113,48114,48119],{},"If you are running Mac OSX and having trouble installing BrowserSync, that means you are having issues with NPM permissions. Read the ",[933,48115,48118],{"href":48116,"rel":48117},"https:\u002F\u002Fdocs.npmjs.com\u002Fgetting-started\u002Ffixing-npm-permissions",[937],"docs"," to fix it.",[953,48121,48123],{"id":48122},"setting-up-a-sample-project","Setting Up a Sample Project",[925,48125,48126,48127,33813],{},"Let’s create a sample project in order to test BrowserSync & Gulp. Create a folder for our sample project. And then inside the project folder, create a folder for sass as well as create an ",[941,48128,37877],{},[993,48130,48132],{"className":1797,"code":48131,"language":1799,"meta":998,"style":998},"mkdir browsersync-gulp\ncd browsersync-gulp\nmkdir sass\ntouch index.html\n",[941,48133,48134,48139,48144,48149],{"__ignoreMap":998},[1002,48135,48136],{"class":1004,"line":1005},[1002,48137,48138],{},"mkdir browsersync-gulp\n",[1002,48140,48141],{"class":1004,"line":1012},[1002,48142,48143],{},"cd browsersync-gulp\n",[1002,48145,48146],{"class":1004,"line":1047},[1002,48147,48148],{},"mkdir sass\n",[1002,48150,48151],{"class":1004,"line":1054},[1002,48152,48153],{},"touch index.html\n",[925,48155,48156,48157,48160,48161,48163],{},"Run ",[941,48158,48159],{},"npm init"," to create a ",[941,48162,1102],{}," file. Follow the prompts to add meta data to your project.",[993,48165,48166],{"className":1797,"code":33008,"language":1799,"meta":998,"style":998},[941,48167,48168],{"__ignoreMap":998},[1002,48169,48170],{"class":1004,"line":1005},[1002,48171,33008],{},[953,48173,48175],{"id":48174},"using-browsersync-gulp","Using BrowserSync & Gulp",[925,48177,48178,48179,48182,48183,4954],{},"To start working with Gulp, we have to create a file named ",[941,48180,48181],{},"gulpfile.js",". Here we are going to define the tasks to run with the ",[941,48184,83],{},[925,48186,48187,48188,48190,48191,48193,48194,48197],{},"Inside the ",[941,48189,48181],{},", let’s bring in the ",[941,48192,83],{}," and the ",[941,48195,48196],{},"browser-sync"," modules.",[993,48199,48201],{"className":995,"code":48200,"language":997,"meta":998,"style":998},"var gulp = require('gulp');\nvar browserSync = require('browser-sync').create();\n",[941,48202,48203,48221],{"__ignoreMap":998},[1002,48204,48205,48207,48210,48212,48214,48216,48219],{"class":1004,"line":1005},[1002,48206,18311],{"class":1015},[1002,48208,48209],{"class":1030}," gulp ",[1002,48211,2393],{"class":1015},[1002,48213,1027],{"class":1026},[1002,48215,1031],{"class":1030},[1002,48217,48218],{"class":1034},"'gulp'",[1002,48220,1085],{"class":1030},[1002,48222,48223,48225,48228,48230,48232,48234,48237,48239,48242],{"class":1004,"line":1012},[1002,48224,18311],{"class":1015},[1002,48226,48227],{"class":1030}," browserSync ",[1002,48229,2393],{"class":1015},[1002,48231,1027],{"class":1026},[1002,48233,1031],{"class":1030},[1002,48235,48236],{"class":1034},"'browser-sync'",[1002,48238,1539],{"class":1030},[1002,48240,48241],{"class":1026},"create",[1002,48243,1428],{"class":1030},[925,48245,48246,48247,48250],{},"As you can see, we are immediately invoking the ",[941,48248,48249],{},"create()"," function of the browser-sync module.",[925,48252,48253,48254,48257],{},"Having finished setting up BrowserSync & Gulp, we are going to bring in ",[941,48255,48256],{},"gulp-sass"," for compiling SASS into CSS.",[993,48259,48261],{"className":1797,"code":48260,"language":1799,"meta":998,"style":998},"npm install gulp-sass ––save–dev\n",[941,48262,48263],{"__ignoreMap":998},[1002,48264,48265],{"class":1004,"line":1005},[1002,48266,48260],{},[925,48268,48269],{},"Now it’s the time to add tasks to the gulpfile.js. Let’s start with creating a task for compiling SASS into CSS.",[993,48271,48273],{"className":995,"code":48272,"language":997,"meta":998,"style":998},"...\ngulp.task('sass', function() {\n return gulp.src(\"sass\u002F*.scss\")\n .pipe(sass())\n .pipe(gulp.dest(\"css\"))\n .pipe(browserSync.stream());\n});\n...\n",[941,48274,48275,48280,48299,48315,48329,48349,48362,48366],{"__ignoreMap":998},[1002,48276,48277],{"class":1004,"line":1005},[1002,48278,48279],{"class":1015},"...\n",[1002,48281,48282,48285,48288,48290,48293,48295,48297],{"class":1004,"line":1012},[1002,48283,48284],{"class":1030},"gulp.",[1002,48286,48287],{"class":1026},"task",[1002,48289,1031],{"class":1030},[1002,48291,48292],{"class":1034},"'sass'",[1002,48294,1251],{"class":1030},[1002,48296,6965],{"class":1015},[1002,48298,3025],{"class":1030},[1002,48300,48301,48303,48306,48308,48310,48313],{"class":1004,"line":1047},[1002,48302,2687],{"class":1015},[1002,48304,48305],{"class":1030}," gulp.",[1002,48307,37223],{"class":1026},[1002,48309,1031],{"class":1030},[1002,48311,48312],{"class":1034},"\"sass\u002F*.scss\"",[1002,48314,3808],{"class":1030},[1002,48316,48317,48320,48322,48324,48326],{"class":1004,"line":1054},[1002,48318,48319],{"class":1030}," .",[1002,48321,22242],{"class":1026},[1002,48323,1031],{"class":1030},[1002,48325,292],{"class":1026},[1002,48327,48328],{"class":1030},"())\n",[1002,48330,48331,48333,48335,48338,48341,48343,48346],{"class":1004,"line":1060},[1002,48332,48319],{"class":1030},[1002,48334,22242],{"class":1026},[1002,48336,48337],{"class":1030},"(gulp.",[1002,48339,48340],{"class":1026},"dest",[1002,48342,1031],{"class":1030},[1002,48344,48345],{"class":1034},"\"css\"",[1002,48347,48348],{"class":1030},"))\n",[1002,48350,48351,48353,48355,48358,48360],{"class":1004,"line":1272},[1002,48352,48319],{"class":1030},[1002,48354,22242],{"class":1026},[1002,48356,48357],{"class":1030},"(browserSync.",[1002,48359,21805],{"class":1026},[1002,48361,3885],{"class":1030},[1002,48363,48364],{"class":1004,"line":1348},[1002,48365,2804],{"class":1030},[1002,48367,48368],{"class":1004,"line":1354},[1002,48369,48279],{"class":1015},[925,48371,48372,48373,48375,48376,48379,48380,48382],{},"The sass task looks into the ",[941,48374,292],{}," directory and detects any changes to the files with ",[941,48377,48378],{},".scss"," extension. If there were any changes, it will invoke sass compiler and the result will be saved in the ",[941,48381,29],{}," folder. This output will be piped into the browserSync process, which in turn refreshes the web page by auto-injecting into the browser.",[7100,48384,48386],{"title":48385,"type":24048},".stream(opts)",[925,48387,48388,48389],{},"The stream method returns a transform stream and can act once or on many files. – ",[1107,48390,48391],{},"browsersync",[925,48393,3898,48394,48397],{},[941,48395,48396],{},"serve"," task initializes browserSync and also watches for file changes in the SASS, CSS and HTML files. If a change has been detected, it will reload the web page.",[993,48399,48401],{"className":995,"code":48400,"language":997,"meta":998,"style":998},"...\ngulp.task('serve', ['sass'], function() {\n\n browserSync.init({\n server: \".\"\n });\n\n gulp.watch(\"sass\u002F*.scss\", ['sass']);\n gulp.watch([\"css\u002F*.css\", \"*.html\"]).on('change', browserSync.reload);\n});\n...\n",[941,48402,48403,48407,48428,48432,48442,48450,48454,48458,48476,48505,48509],{"__ignoreMap":998},[1002,48404,48405],{"class":1004,"line":1005},[1002,48406,48279],{"class":1015},[1002,48408,48409,48411,48413,48415,48418,48420,48422,48424,48426],{"class":1004,"line":1012},[1002,48410,48284],{"class":1030},[1002,48412,48287],{"class":1026},[1002,48414,1031],{"class":1030},[1002,48416,48417],{"class":1034},"'serve'",[1002,48419,47455],{"class":1030},[1002,48421,48292],{"class":1034},[1002,48423,32267],{"class":1030},[1002,48425,6965],{"class":1015},[1002,48427,3025],{"class":1030},[1002,48429,48430],{"class":1004,"line":1047},[1002,48431,1051],{"emptyLinePlaceholder":1050},[1002,48433,48434,48437,48440],{"class":1004,"line":1054},[1002,48435,48436],{"class":1030}," browserSync.",[1002,48438,48439],{"class":1026},"init",[1002,48441,2756],{"class":1030},[1002,48443,48444,48447],{"class":1004,"line":1060},[1002,48445,48446],{"class":1030}," server: ",[1002,48448,48449],{"class":1034},"\".\"\n",[1002,48451,48452],{"class":1004,"line":1272},[1002,48453,8353],{"class":1030},[1002,48455,48456],{"class":1004,"line":1348},[1002,48457,1051],{"emptyLinePlaceholder":1050},[1002,48459,48460,48463,48466,48468,48470,48472,48474],{"class":1004,"line":1354},[1002,48461,48462],{"class":1030}," gulp.",[1002,48464,48465],{"class":1026},"watch",[1002,48467,1031],{"class":1030},[1002,48469,48312],{"class":1034},[1002,48471,47455],{"class":1030},[1002,48473,48292],{"class":1034},[1002,48475,29611],{"class":1030},[1002,48477,48478,48480,48482,48484,48487,48489,48492,48495,48497,48499,48502],{"class":1004,"line":1360},[1002,48479,48462],{"class":1030},[1002,48481,48465],{"class":1026},[1002,48483,30910],{"class":1030},[1002,48485,48486],{"class":1034},"\"css\u002F*.css\"",[1002,48488,1251],{"class":1030},[1002,48490,48491],{"class":1034},"\"*.html\"",[1002,48493,48494],{"class":1030},"]).",[1002,48496,43148],{"class":1026},[1002,48498,1031],{"class":1030},[1002,48500,48501],{"class":1034},"'change'",[1002,48503,48504],{"class":1030},", browserSync.reload);\n",[1002,48506,48507],{"class":1004,"line":1366},[1002,48508,2804],{"class":1030},[1002,48510,48511],{"class":1004,"line":1946},[1002,48512,48279],{"class":1015},[925,48514,48515,48516,48518,48519,48521],{},"Finally, we will add the ",[941,48517,15278],{}," task, which in turn runs the ",[941,48520,48396],{}," task. And that’s all you need to run a basic web app with live reload and SASS.",[925,48523,48524,48525,948],{},"Let’s look at the final ",[941,48526,48181],{},[993,48528,48530],{"className":995,"code":48529,"language":997,"meta":998,"style":998},"var gulp = require('gulp');\nvar browserSync = require('browser-sync').create();\nvar sass = require('gulp-sass');\n\ngulp.task('sass', function () {\n return gulp\n .src('sass\u002F*.scss')\n .pipe(sass())\n .pipe(gulp.dest('css'))\n .pipe(browserSync.stream());\n});\n\ngulp.task('serve', ['sass'], function () {\n browserSync.init({\n server: '.',\n });\n\n gulp.watch('sass\u002F*.scss', ['sass']);\n gulp.watch(['css\u002F*.css', '*.html']).on('change', browserSync.reload);\n});\n\ngulp.task('default', ['serve']);\n",[941,48531,48532,48548,48568,48586,48590,48606,48613,48626,48638,48655,48667,48671,48675,48695,48704,48714,48718,48722,48739,48765,48769,48773],{"__ignoreMap":998},[1002,48533,48534,48536,48538,48540,48542,48544,48546],{"class":1004,"line":1005},[1002,48535,18311],{"class":1015},[1002,48537,48209],{"class":1030},[1002,48539,2393],{"class":1015},[1002,48541,1027],{"class":1026},[1002,48543,1031],{"class":1030},[1002,48545,48218],{"class":1034},[1002,48547,1085],{"class":1030},[1002,48549,48550,48552,48554,48556,48558,48560,48562,48564,48566],{"class":1004,"line":1012},[1002,48551,18311],{"class":1015},[1002,48553,48227],{"class":1030},[1002,48555,2393],{"class":1015},[1002,48557,1027],{"class":1026},[1002,48559,1031],{"class":1030},[1002,48561,48236],{"class":1034},[1002,48563,1539],{"class":1030},[1002,48565,48241],{"class":1026},[1002,48567,1428],{"class":1030},[1002,48569,48570,48572,48575,48577,48579,48581,48584],{"class":1004,"line":1047},[1002,48571,18311],{"class":1015},[1002,48573,48574],{"class":1030}," sass ",[1002,48576,2393],{"class":1015},[1002,48578,1027],{"class":1026},[1002,48580,1031],{"class":1030},[1002,48582,48583],{"class":1034},"'gulp-sass'",[1002,48585,1085],{"class":1030},[1002,48587,48588],{"class":1004,"line":1054},[1002,48589,1051],{"emptyLinePlaceholder":1050},[1002,48591,48592,48594,48596,48598,48600,48602,48604],{"class":1004,"line":1060},[1002,48593,48284],{"class":1030},[1002,48595,48287],{"class":1026},[1002,48597,1031],{"class":1030},[1002,48599,48292],{"class":1034},[1002,48601,1251],{"class":1030},[1002,48603,6965],{"class":1015},[1002,48605,9772],{"class":1030},[1002,48607,48608,48610],{"class":1004,"line":1272},[1002,48609,15066],{"class":1015},[1002,48611,48612],{"class":1030}," gulp\n",[1002,48614,48615,48617,48619,48621,48624],{"class":1004,"line":1348},[1002,48616,30624],{"class":1030},[1002,48618,37223],{"class":1026},[1002,48620,1031],{"class":1030},[1002,48622,48623],{"class":1034},"'sass\u002F*.scss'",[1002,48625,3808],{"class":1030},[1002,48627,48628,48630,48632,48634,48636],{"class":1004,"line":1354},[1002,48629,30624],{"class":1030},[1002,48631,22242],{"class":1026},[1002,48633,1031],{"class":1030},[1002,48635,292],{"class":1026},[1002,48637,48328],{"class":1030},[1002,48639,48640,48642,48644,48646,48648,48650,48653],{"class":1004,"line":1360},[1002,48641,30624],{"class":1030},[1002,48643,22242],{"class":1026},[1002,48645,48337],{"class":1030},[1002,48647,48340],{"class":1026},[1002,48649,1031],{"class":1030},[1002,48651,48652],{"class":1034},"'css'",[1002,48654,48348],{"class":1030},[1002,48656,48657,48659,48661,48663,48665],{"class":1004,"line":1366},[1002,48658,30624],{"class":1030},[1002,48660,22242],{"class":1026},[1002,48662,48357],{"class":1030},[1002,48664,21805],{"class":1026},[1002,48666,3885],{"class":1030},[1002,48668,48669],{"class":1004,"line":1946},[1002,48670,2804],{"class":1030},[1002,48672,48673],{"class":1004,"line":1956},[1002,48674,1051],{"emptyLinePlaceholder":1050},[1002,48676,48677,48679,48681,48683,48685,48687,48689,48691,48693],{"class":1004,"line":1961},[1002,48678,48284],{"class":1030},[1002,48680,48287],{"class":1026},[1002,48682,1031],{"class":1030},[1002,48684,48417],{"class":1034},[1002,48686,47455],{"class":1030},[1002,48688,48292],{"class":1034},[1002,48690,32267],{"class":1030},[1002,48692,6965],{"class":1015},[1002,48694,9772],{"class":1030},[1002,48696,48697,48700,48702],{"class":1004,"line":1971},[1002,48698,48699],{"class":1030}," browserSync.",[1002,48701,48439],{"class":1026},[1002,48703,2756],{"class":1030},[1002,48705,48706,48709,48712],{"class":1004,"line":1980},[1002,48707,48708],{"class":1030}," server: ",[1002,48710,48711],{"class":1034},"'.'",[1002,48713,1143],{"class":1030},[1002,48715,48716],{"class":1004,"line":1985},[1002,48717,19836],{"class":1030},[1002,48719,48720],{"class":1004,"line":1995},[1002,48721,1051],{"emptyLinePlaceholder":1050},[1002,48723,48724,48727,48729,48731,48733,48735,48737],{"class":1004,"line":2006},[1002,48725,48726],{"class":1030}," gulp.",[1002,48728,48465],{"class":1026},[1002,48730,1031],{"class":1030},[1002,48732,48623],{"class":1034},[1002,48734,47455],{"class":1030},[1002,48736,48292],{"class":1034},[1002,48738,29611],{"class":1030},[1002,48740,48741,48743,48745,48747,48750,48752,48755,48757,48759,48761,48763],{"class":1004,"line":2011},[1002,48742,48726],{"class":1030},[1002,48744,48465],{"class":1026},[1002,48746,30910],{"class":1030},[1002,48748,48749],{"class":1034},"'css\u002F*.css'",[1002,48751,1251],{"class":1030},[1002,48753,48754],{"class":1034},"'*.html'",[1002,48756,48494],{"class":1030},[1002,48758,43148],{"class":1026},[1002,48760,1031],{"class":1030},[1002,48762,48501],{"class":1034},[1002,48764,48504],{"class":1030},[1002,48766,48767],{"class":1004,"line":2017},[1002,48768,2804],{"class":1030},[1002,48770,48771],{"class":1004,"line":2022},[1002,48772,1051],{"emptyLinePlaceholder":1050},[1002,48774,48775,48777,48779,48781,48784,48786,48788],{"class":1004,"line":2442},[1002,48776,48284],{"class":1030},[1002,48778,48287],{"class":1026},[1002,48780,1031],{"class":1030},[1002,48782,48783],{"class":1034},"'default'",[1002,48785,47455],{"class":1030},[1002,48787,48417],{"class":1034},[1002,48789,29611],{"class":1030},[953,48791,26561],{"id":26560},[925,48793,48794],{},"As you can see, BrowserSync & Gulp is a great combination for up and running with your new projects for building web apps.",[925,48796,47770,48797,948],{},[933,48798,14815],{"href":48799,"rel":48800},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fbrowsersync-gulp-boilerplate",[937],[1579,48802,48803],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":48805},[48806,48807,48808,48809,48810,48811,48812],{"id":48052,"depth":1012,"text":48053},{"id":48062,"depth":1012,"text":48063},{"id":48069,"depth":1012,"text":48070},{"id":48085,"depth":1012,"text":48086},{"id":48122,"depth":1012,"text":48123},{"id":48174,"depth":1012,"text":48175},{"id":26560,"depth":1012,"text":26561},"2016-03-30","\u002Fimages\u002Fblog\u002Ffeatures\u002Fbrowsersync-gulp.jpg",{},{"title":79,"description":81},"blog\u002Fbrowsersync-gulp",[16,17,83],"k-DFuzdUzRJ4vwYQVLJMSJHDvxwS5TG-_VSe41d4uYY",{"id":48821,"title":713,"author":920,"body":48822,"date":49727,"description":715,"extension":1591,"image":49728,"meta":49729,"navigation":1050,"path":714,"seo":49730,"stem":49731,"tags":49732,"__hash__":49733},"blog\u002Fblog\u002Fredux-sagas.md",{"type":922,"value":48823,"toc":49720},[48824,48827,48844,48847,48851,48854,48867,48871,48874,48899,48902,48909,48912,48975,48978,48991,48994,49118,49124,49127,49247,49250,49270,49273,49277,49280,49435,49439,49442,49523,49527,49534,49537,49700,49703,49717],[925,48825,48826],{},"Let’s look at the potential issues we might face in a real world application. Every time you make a request to the server, the following happens.",[1530,48828,48829,48832,48835,48838,48841],{},[974,48830,48831],{},"Handle usage tracking metrics.",[974,48833,48834],{},"Display a loading screen until a response is delivered.",[974,48836,48837],{},"Update caches",[974,48839,48840],{},"Handle server errors",[974,48842,48843],{},"Handle server timeouts",[925,48845,48846],{},"This looks complicated than we thought it would be.",[953,48848,48850],{"id":48849},"what-are-sagas","What are Sagas?",[925,48852,48853],{},"Sagas manage the flow control by removing the complexity and the mess, by organizing the actions.",[925,48855,48856,48857,48860,48861,2034,48864,948],{},"Sagas will convert your stories into ",[1107,48858,48859],{},"testable instructions"," including ",[1107,48862,48863],{},"promises",[1107,48865,48866],{},"callbacks",[953,48868,48870],{"id":48869},"generator-functions","Generator Functions",[925,48872,48873],{},"Sagas are written using generator functions – A function keyword followed by an asterix.",[993,48875,48877],{"className":995,"code":48876,"language":997,"meta":998,"style":998},"function *loadData() {\n ...\n}\n",[941,48878,48879,48890,48895],{"__ignoreMap":998},[1002,48880,48881,48883,48885,48888],{"class":1004,"line":1005},[1002,48882,6965],{"class":1015},[1002,48884,6090],{"class":1015},[1002,48886,48887],{"class":1026},"loadData",[1002,48889,3025],{"class":1030},[1002,48891,48892],{"class":1004,"line":1012},[1002,48893,48894],{"class":1015}," ...\n",[1002,48896,48897],{"class":1004,"line":1047},[1002,48898,1170],{"class":1030},[925,48900,48901],{},"Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.",[7100,48903,48904],{"type":24048},[925,48905,48906,48907],{},"Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances. – ",[1107,48908,34873],{},[925,48910,48911],{},"The sagas are made up with a list of steps. We also have to connect the Saga middleware to the Redux store.",[993,48913,48915],{"className":995,"code":48914,"language":997,"meta":998,"style":998},"function* loadData() {\n yield 'step 1 - send request';\n yield 'step 2 - show waiting modal';\n yield 'step 3 - send analytics data';\n yield 'step 4 - update model';\n yield 'step 5 - hide waiting modal';\n}\n",[941,48916,48917,48926,48935,48944,48953,48962,48971],{"__ignoreMap":998},[1002,48918,48919,48921,48924],{"class":1004,"line":1005},[1002,48920,34637],{"class":1015},[1002,48922,48923],{"class":1026}," loadData",[1002,48925,3025],{"class":1030},[1002,48927,48928,48930,48933],{"class":1004,"line":1012},[1002,48929,31168],{"class":1015},[1002,48931,48932],{"class":1034}," 'step 1 - send request'",[1002,48934,1407],{"class":1030},[1002,48936,48937,48939,48942],{"class":1004,"line":1047},[1002,48938,31168],{"class":1015},[1002,48940,48941],{"class":1034}," 'step 2 - show waiting modal'",[1002,48943,1407],{"class":1030},[1002,48945,48946,48948,48951],{"class":1004,"line":1054},[1002,48947,31168],{"class":1015},[1002,48949,48950],{"class":1034}," 'step 3 - send analytics data'",[1002,48952,1407],{"class":1030},[1002,48954,48955,48957,48960],{"class":1004,"line":1060},[1002,48956,31168],{"class":1015},[1002,48958,48959],{"class":1034}," 'step 4 - update model'",[1002,48961,1407],{"class":1030},[1002,48963,48964,48966,48969],{"class":1004,"line":1272},[1002,48965,31168],{"class":1015},[1002,48967,48968],{"class":1034}," 'step 5 - hide waiting modal'",[1002,48970,1407],{"class":1030},[1002,48972,48973],{"class":1004,"line":1348},[1002,48974,1170],{"class":1030},[925,48976,48977],{},"In the redux-saga library, we get few helper functions which we can yield.",[1530,48979,48980,48985],{},[974,48981,48982,48984],{},[1107,48983,8426],{}," – an effect that will execute an async function eg:- Promise",[974,48986,48987,48990],{},[1107,48988,48989],{},"put"," – an effect that will dispatch an action to the Redux Store",[925,48992,48993],{},"Let’s rewrite this function using Redux.",[993,48995,48997],{"className":995,"code":48996,"language":997,"meta":998,"style":998},"loadData() => {\n return dispatch => {\n dispatch({ type: 'FETCHING_DATA' });\n dispatch({ type: 'SHOW_WAITING_MODAL' });\n dispatch({ type: 'SEND_ANALYTICS_DATA' });\n\n fetch('\u002Fdata').then(data => {\n dispatch({ type: 'FETCHED_DATA', payload: data });\n dispatch({ type: 'HIDE_WAITING_MODAL' });\n });\n }\n}\n",[941,48998,48999,49009,49020,49033,49044,49055,49059,49081,49094,49105,49110,49114],{"__ignoreMap":998},[1002,49000,49001,49003,49005,49007],{"class":1004,"line":1005},[1002,49002,48887],{"class":1026},[1002,49004,10191],{"class":1030},[1002,49006,15497],{"class":1015},[1002,49008,1457],{"class":1030},[1002,49010,49011,49013,49016,49018],{"class":1004,"line":1012},[1002,49012,2687],{"class":1015},[1002,49014,49015],{"class":2378}," dispatch",[1002,49017,20479],{"class":1015},[1002,49019,1457],{"class":1030},[1002,49021,49022,49025,49028,49031],{"class":1004,"line":1047},[1002,49023,49024],{"class":1026}," dispatch",[1002,49026,49027],{"class":1030},"({ type: ",[1002,49029,49030],{"class":1034},"'FETCHING_DATA'",[1002,49032,28417],{"class":1030},[1002,49034,49035,49037,49039,49042],{"class":1004,"line":1054},[1002,49036,49024],{"class":1026},[1002,49038,49027],{"class":1030},[1002,49040,49041],{"class":1034},"'SHOW_WAITING_MODAL'",[1002,49043,28417],{"class":1030},[1002,49045,49046,49048,49050,49053],{"class":1004,"line":1060},[1002,49047,49024],{"class":1026},[1002,49049,49027],{"class":1030},[1002,49051,49052],{"class":1034},"'SEND_ANALYTICS_DATA'",[1002,49054,28417],{"class":1030},[1002,49056,49057],{"class":1004,"line":1272},[1002,49058,1051],{"emptyLinePlaceholder":1050},[1002,49060,49061,49064,49066,49069,49071,49073,49075,49077,49079],{"class":1004,"line":1348},[1002,49062,49063],{"class":1026}," fetch",[1002,49065,1031],{"class":1030},[1002,49067,49068],{"class":1034},"'\u002Fdata'",[1002,49070,1539],{"class":1030},[1002,49072,25658],{"class":1026},[1002,49074,1031],{"class":1030},[1002,49076,16648],{"class":2378},[1002,49078,20479],{"class":1015},[1002,49080,1457],{"class":1030},[1002,49082,49083,49086,49088,49091],{"class":1004,"line":1354},[1002,49084,49085],{"class":1026}," dispatch",[1002,49087,49027],{"class":1030},[1002,49089,49090],{"class":1034},"'FETCHED_DATA'",[1002,49092,49093],{"class":1030},", payload: data });\n",[1002,49095,49096,49098,49100,49103],{"class":1004,"line":1360},[1002,49097,49085],{"class":1026},[1002,49099,49027],{"class":1030},[1002,49101,49102],{"class":1034},"'HIDE_WAITING_MODAL'",[1002,49104,28417],{"class":1030},[1002,49106,49107],{"class":1004,"line":1366},[1002,49108,49109],{"class":1030}," });\n",[1002,49111,49112],{"class":1004,"line":1946},[1002,49113,2014],{"class":1030},[1002,49115,49116],{"class":1004,"line":1956},[1002,49117,1170],{"class":1030},[925,49119,49120,49121,948],{},"This would be a simple thunk action creator for implemented with redux. Problem with this is, in order to test, we need to create a mock to test the ",[941,49122,49123],{},"fetch",[925,49125,49126],{},"Now let’s implement this using Sagas.",[993,49128,49130],{"className":995,"code":49129,"language":997,"meta":998,"style":998},"import { call, put } from 'redux-saga';\n\nfunction* loadData() {\n yield put({ type: 'FETCHING_DATA' });\n yield put({ type: 'SHOW_WAITING_MODAL' });\n yield put({ type: 'SEND_ANALYTICS_DATA' });\n\n const data = yield call(fetch, '\u002Fdata');\n yield put({ type: 'FETCHED_DATA', payload: data });\n yield put({ type: 'HIDE_WAITING_MODAL' });\n}\n",[941,49131,49132,49146,49150,49158,49171,49183,49195,49199,49219,49231,49243],{"__ignoreMap":998},[1002,49133,49134,49136,49139,49141,49144],{"class":1004,"line":1005},[1002,49135,943],{"class":1015},[1002,49137,49138],{"class":1030}," { call, put } ",[1002,49140,1068],{"class":1015},[1002,49142,49143],{"class":1034}," 'redux-saga'",[1002,49145,1407],{"class":1030},[1002,49147,49148],{"class":1004,"line":1012},[1002,49149,1051],{"emptyLinePlaceholder":1050},[1002,49151,49152,49154,49156],{"class":1004,"line":1047},[1002,49153,34637],{"class":1015},[1002,49155,48923],{"class":1026},[1002,49157,3025],{"class":1030},[1002,49159,49160,49162,49165,49167,49169],{"class":1004,"line":1054},[1002,49161,31168],{"class":1015},[1002,49163,49164],{"class":1026}," put",[1002,49166,49027],{"class":1030},[1002,49168,49030],{"class":1034},[1002,49170,28417],{"class":1030},[1002,49172,49173,49175,49177,49179,49181],{"class":1004,"line":1060},[1002,49174,31168],{"class":1015},[1002,49176,49164],{"class":1026},[1002,49178,49027],{"class":1030},[1002,49180,49041],{"class":1034},[1002,49182,28417],{"class":1030},[1002,49184,49185,49187,49189,49191,49193],{"class":1004,"line":1272},[1002,49186,31168],{"class":1015},[1002,49188,49164],{"class":1026},[1002,49190,49027],{"class":1030},[1002,49192,49052],{"class":1034},[1002,49194,28417],{"class":1030},[1002,49196,49197],{"class":1004,"line":1348},[1002,49198,1051],{"emptyLinePlaceholder":1050},[1002,49200,49201,49203,49205,49207,49209,49212,49215,49217],{"class":1004,"line":1354},[1002,49202,10423],{"class":1015},[1002,49204,16556],{"class":1019},[1002,49206,1023],{"class":1015},[1002,49208,34743],{"class":1015},[1002,49210,49211],{"class":1026}," call",[1002,49213,49214],{"class":1030},"(fetch, ",[1002,49216,49068],{"class":1034},[1002,49218,1085],{"class":1030},[1002,49220,49221,49223,49225,49227,49229],{"class":1004,"line":1360},[1002,49222,31168],{"class":1015},[1002,49224,49164],{"class":1026},[1002,49226,49027],{"class":1030},[1002,49228,49090],{"class":1034},[1002,49230,49093],{"class":1030},[1002,49232,49233,49235,49237,49239,49241],{"class":1004,"line":1366},[1002,49234,31168],{"class":1015},[1002,49236,49164],{"class":1026},[1002,49238,49027],{"class":1030},[1002,49240,49102],{"class":1034},[1002,49242,28417],{"class":1030},[1002,49244,49245],{"class":1004,"line":1946},[1002,49246,1170],{"class":1030},[925,49248,49249],{},"Let’s break this down with plain English:",[1530,49251,49252,49255,49258,49261,49264,49267],{},[974,49253,49254],{},"Dispatch a FETCHING_DATA action through Redux.",[974,49256,49257],{},"Dispatch a SHOW_WAITING_MODAL action through Redux to the view for showing the modal.",[974,49259,49260],{},"Dispatch a SEND_ANALYTICS_DATA action through Redux.",[974,49262,49263],{},"Call the API for data and get back a response.",[974,49265,49266],{},"Dispatch a FETCHED_DATA action through Redux to indicate the data has been received.",[974,49268,49269],{},"Dispatch a HIDE_WAITING_MODAL action through Redux to indicate the view to hide the modal.",[925,49271,49272],{},"This is nice and concise and describes a flow that’s easy to understand.",[953,49274,49276],{"id":49275},"testing-sagas","Testing Sagas",[925,49278,49279],{},"Now let’s see how we can test this saga. It is actually quite easy.",[993,49281,49283],{"className":995,"code":49282,"language":997,"meta":998,"style":998},"import { call, put } from 'redux-saga';\n\nconst saga = loadData();\nconst data = [{ message: 'text', done: false }];\nsaga.next();\n\nexpect(saga.next().value).toEqual(put({ type: 'FETCHING_DATA' }));\n\nexpect(saga.next().value).toEqual(call(fetch, '\u002Fdata'));\n\nexpect(saga.next(data).value).toEqual(\n put({ type: 'FETCHED_DATA', payload: data }),\n);\n",[941,49284,49285,49297,49301,49314,49334,49343,49347,49374,49378,49400,49404,49419,49431],{"__ignoreMap":998},[1002,49286,49287,49289,49291,49293,49295],{"class":1004,"line":1005},[1002,49288,943],{"class":1015},[1002,49290,49138],{"class":1030},[1002,49292,1068],{"class":1015},[1002,49294,49143],{"class":1034},[1002,49296,1407],{"class":1030},[1002,49298,49299],{"class":1004,"line":1012},[1002,49300,1051],{"emptyLinePlaceholder":1050},[1002,49302,49303,49305,49308,49310,49312],{"class":1004,"line":1047},[1002,49304,1016],{"class":1015},[1002,49306,49307],{"class":1019}," saga",[1002,49309,1023],{"class":1015},[1002,49311,48923],{"class":1026},[1002,49313,1428],{"class":1030},[1002,49315,49316,49318,49320,49322,49325,49327,49330,49332],{"class":1004,"line":1054},[1002,49317,1016],{"class":1015},[1002,49319,16556],{"class":1019},[1002,49321,1023],{"class":1015},[1002,49323,49324],{"class":1030}," [{ message: ",[1002,49326,16838],{"class":1034},[1002,49328,49329],{"class":1030},", done: ",[1002,49331,19341],{"class":1019},[1002,49333,23236],{"class":1030},[1002,49335,49336,49339,49341],{"class":1004,"line":1060},[1002,49337,49338],{"class":1030},"saga.",[1002,49340,6623],{"class":1026},[1002,49342,1428],{"class":1030},[1002,49344,49345],{"class":1004,"line":1272},[1002,49346,1051],{"emptyLinePlaceholder":1050},[1002,49348,49349,49352,49355,49357,49360,49363,49365,49367,49369,49371],{"class":1004,"line":1348},[1002,49350,49351],{"class":1026},"expect",[1002,49353,49354],{"class":1030},"(saga.",[1002,49356,6623],{"class":1026},[1002,49358,49359],{"class":1030},"().value).",[1002,49361,49362],{"class":1026},"toEqual",[1002,49364,1031],{"class":1030},[1002,49366,48989],{"class":1026},[1002,49368,49027],{"class":1030},[1002,49370,49030],{"class":1034},[1002,49372,49373],{"class":1030}," }));\n",[1002,49375,49376],{"class":1004,"line":1354},[1002,49377,1051],{"emptyLinePlaceholder":1050},[1002,49379,49380,49382,49384,49386,49388,49390,49392,49394,49396,49398],{"class":1004,"line":1360},[1002,49381,49351],{"class":1026},[1002,49383,49354],{"class":1030},[1002,49385,6623],{"class":1026},[1002,49387,49359],{"class":1030},[1002,49389,49362],{"class":1026},[1002,49391,1031],{"class":1030},[1002,49393,8426],{"class":1026},[1002,49395,49214],{"class":1030},[1002,49397,49068],{"class":1034},[1002,49399,5663],{"class":1030},[1002,49401,49402],{"class":1004,"line":1366},[1002,49403,1051],{"emptyLinePlaceholder":1050},[1002,49405,49406,49408,49410,49412,49415,49417],{"class":1004,"line":1946},[1002,49407,49351],{"class":1026},[1002,49409,49354],{"class":1030},[1002,49411,6623],{"class":1026},[1002,49413,49414],{"class":1030},"(data).value).",[1002,49416,49362],{"class":1026},[1002,49418,10468],{"class":1030},[1002,49420,49421,49424,49426,49428],{"class":1004,"line":1956},[1002,49422,49423],{"class":1026}," put",[1002,49425,49027],{"class":1030},[1002,49427,49090],{"class":1034},[1002,49429,49430],{"class":1030},", payload: data }),\n",[1002,49432,49433],{"class":1004,"line":1961},[1002,49434,1085],{"class":1030},[953,49436,49438],{"id":49437},"trigger-a-saga","Trigger a Saga",[925,49440,49441],{},"Let’s look at how we can bind our saga to the Redux application.",[993,49443,49445],{"className":995,"code":49444,"language":997,"meta":998,"style":998},"import { createStore, applyMiddleware } from 'redux';\nimport sagaMiddleware from 'redux-saga';\n\nconst createStoreWithSaga = applyMiddleware(sagaMiddleware([loadData]))(\n createStore,\n);\n\nconst store = createStoreWithSaga(reducer, initialState);\n",[941,49446,49447,49460,49473,49477,49497,49502,49506,49510],{"__ignoreMap":998},[1002,49448,49449,49451,49454,49456,49458],{"class":1004,"line":1005},[1002,49450,943],{"class":1015},[1002,49452,49453],{"class":1030}," { createStore, applyMiddleware } ",[1002,49455,1068],{"class":1015},[1002,49457,37707],{"class":1034},[1002,49459,1407],{"class":1030},[1002,49461,49462,49464,49467,49469,49471],{"class":1004,"line":1012},[1002,49463,943],{"class":1015},[1002,49465,49466],{"class":1030}," sagaMiddleware ",[1002,49468,1068],{"class":1015},[1002,49470,49143],{"class":1034},[1002,49472,1407],{"class":1030},[1002,49474,49475],{"class":1004,"line":1047},[1002,49476,1051],{"emptyLinePlaceholder":1050},[1002,49478,49479,49481,49484,49486,49489,49491,49494],{"class":1004,"line":1054},[1002,49480,1016],{"class":1015},[1002,49482,49483],{"class":1019}," createStoreWithSaga",[1002,49485,1023],{"class":1015},[1002,49487,49488],{"class":1026}," applyMiddleware",[1002,49490,1031],{"class":1030},[1002,49492,49493],{"class":1026},"sagaMiddleware",[1002,49495,49496],{"class":1030},"([loadData]))(\n",[1002,49498,49499],{"class":1004,"line":1060},[1002,49500,49501],{"class":1030}," createStore,\n",[1002,49503,49504],{"class":1004,"line":1272},[1002,49505,1085],{"class":1030},[1002,49507,49508],{"class":1004,"line":1348},[1002,49509,1051],{"emptyLinePlaceholder":1050},[1002,49511,49512,49514,49516,49518,49520],{"class":1004,"line":1354},[1002,49513,1016],{"class":1015},[1002,49515,37822],{"class":1019},[1002,49517,1023],{"class":1015},[1002,49519,49483],{"class":1026},[1002,49521,49522],{"class":1030},"(reducer, initialState);\n",[953,49524,49526],{"id":49525},"combining-sagas","Combining Sagas",[925,49528,49529,49530,49533],{},"Composing sagas is easy because saga is an ",[941,49531,49532],{},"effect","(take, fork etc.).",[925,49535,49536],{},"If we were to trigger our saga each time a special action is dispatched to the store, rather than at startup, we can change our code like below:",[993,49538,49540],{"className":995,"code":49539,"language":997,"meta":998,"style":998},"import { fork, take } from 'redux-saga';\n\nfunction* loadData() {\n yield put({ type: 'FETCHING_DATA' });\n const todos = yield call(fetch, '\u002Fdata');\n yield put({ type: 'FETCHED_DATA', payload: todos });\n}\n\nfunction* watchData() {\n while (yield take('FETCH_DATA')) {\n yield fork(loadTodos);\n }\n}\n\n\u002F\u002F update our root saga\nconst createStoreWithSaga = applyMiddleware(sagaMiddleware([watchData]))(\n createStore,\n);\n",[941,49541,49542,49555,49559,49567,49579,49598,49611,49615,49619,49628,49647,49658,49662,49666,49670,49675,49692,49696],{"__ignoreMap":998},[1002,49543,49544,49546,49549,49551,49553],{"class":1004,"line":1005},[1002,49545,943],{"class":1015},[1002,49547,49548],{"class":1030}," { fork, take } ",[1002,49550,1068],{"class":1015},[1002,49552,49143],{"class":1034},[1002,49554,1407],{"class":1030},[1002,49556,49557],{"class":1004,"line":1012},[1002,49558,1051],{"emptyLinePlaceholder":1050},[1002,49560,49561,49563,49565],{"class":1004,"line":1047},[1002,49562,34637],{"class":1015},[1002,49564,48923],{"class":1026},[1002,49566,3025],{"class":1030},[1002,49568,49569,49571,49573,49575,49577],{"class":1004,"line":1054},[1002,49570,31168],{"class":1015},[1002,49572,49164],{"class":1026},[1002,49574,49027],{"class":1030},[1002,49576,49030],{"class":1034},[1002,49578,28417],{"class":1030},[1002,49580,49581,49583,49586,49588,49590,49592,49594,49596],{"class":1004,"line":1060},[1002,49582,10423],{"class":1015},[1002,49584,49585],{"class":1019}," todos",[1002,49587,1023],{"class":1015},[1002,49589,34743],{"class":1015},[1002,49591,49211],{"class":1026},[1002,49593,49214],{"class":1030},[1002,49595,49068],{"class":1034},[1002,49597,1085],{"class":1030},[1002,49599,49600,49602,49604,49606,49608],{"class":1004,"line":1272},[1002,49601,31168],{"class":1015},[1002,49603,49164],{"class":1026},[1002,49605,49027],{"class":1030},[1002,49607,49090],{"class":1034},[1002,49609,49610],{"class":1030},", payload: todos });\n",[1002,49612,49613],{"class":1004,"line":1348},[1002,49614,1170],{"class":1030},[1002,49616,49617],{"class":1004,"line":1354},[1002,49618,1051],{"emptyLinePlaceholder":1050},[1002,49620,49621,49623,49626],{"class":1004,"line":1360},[1002,49622,34637],{"class":1015},[1002,49624,49625],{"class":1026}," watchData",[1002,49627,3025],{"class":1030},[1002,49629,49630,49633,49635,49637,49640,49642,49645],{"class":1004,"line":1366},[1002,49631,49632],{"class":1015}," while",[1002,49634,6513],{"class":1030},[1002,49636,34559],{"class":1015},[1002,49638,49639],{"class":1026}," take",[1002,49641,1031],{"class":1030},[1002,49643,49644],{"class":1034},"'FETCH_DATA'",[1002,49646,28385],{"class":1030},[1002,49648,49649,49652,49655],{"class":1004,"line":1946},[1002,49650,49651],{"class":1015}," yield",[1002,49653,49654],{"class":1026}," fork",[1002,49656,49657],{"class":1030},"(loadTodos);\n",[1002,49659,49660],{"class":1004,"line":1956},[1002,49661,1269],{"class":1030},[1002,49663,49664],{"class":1004,"line":1961},[1002,49665,1170],{"class":1030},[1002,49667,49668],{"class":1004,"line":1971},[1002,49669,1051],{"emptyLinePlaceholder":1050},[1002,49671,49672],{"class":1004,"line":1980},[1002,49673,49674],{"class":1008},"\u002F\u002F update our root saga\n",[1002,49676,49677,49679,49681,49683,49685,49687,49689],{"class":1004,"line":1985},[1002,49678,1016],{"class":1015},[1002,49680,49483],{"class":1019},[1002,49682,1023],{"class":1015},[1002,49684,49488],{"class":1026},[1002,49686,1031],{"class":1030},[1002,49688,49493],{"class":1026},[1002,49690,49691],{"class":1030},"([watchData]))(\n",[1002,49693,49694],{"class":1004,"line":1995},[1002,49695,49501],{"class":1030},[1002,49697,49698],{"class":1004,"line":2006},[1002,49699,1085],{"class":1030},[925,49701,49702],{},"We are using two effects provided by redux-saga:",[1530,49704,49705,49711],{},[974,49706,49707,49710],{},[1107,49708,49709],{},"take"," – an effect that waits for a redux action to be dispatched",[974,49712,49713,49716],{},[1107,49714,49715],{},"fork"," – an effect that will trigger another effect but does not wait for the end of sub effect to continue",[1579,49718,49719],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":49721},[49722,49723,49724,49725,49726],{"id":48849,"depth":1012,"text":48850},{"id":48869,"depth":1012,"text":48870},{"id":49275,"depth":1012,"text":49276},{"id":49437,"depth":1012,"text":49438},{"id":49525,"depth":1012,"text":49526},"2016-03-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Fredux-sagas.jpg",{},{"title":713,"description":715},"blog\u002Fredux-sagas",[16,17,140,717,718],"srJqcwyne2Y4RWdc3sYsAdpsK98ZhPGYIfCYxag0NQE",{"id":49735,"title":299,"author":920,"body":49736,"date":50092,"description":301,"extension":1591,"image":50093,"meta":50094,"navigation":1050,"path":300,"seo":50095,"stem":50096,"tags":50097,"__hash__":50098},"blog\u002Fblog\u002Ffront-end-performance.md",{"type":922,"value":49737,"toc":50083},[49738,49741,49754,49758,49761,49802,49805,49808,49812,49815,49835,49841,49844,49847,49851,49854,49857,50080],[925,49739,49740],{},"In reality most web pages spend 10-20% of the end user response time spent on getting the content from the web server top the browser. The rest, 80-90% will be spent on rendering the web page, loading components etc.",[7100,49742,49744],{"type":24048,"title":49743},"Parallel Requests",[925,49745,49746,49747,16529,49750,49753],{},"HTTP requests can happen in parallel. This could be due to multiple hostnames being used or as a result of using ",[941,49748,49749],{},"HTTP\u002F1.0",[941,49751,49752],{},"HTTP\u002F1.1",".\nParallel requests don't happen with script downloads, because browser blocks HTTP requests when downloading scripts.",[953,49755,49757],{"id":49756},"optimizing-web-performance","Optimizing Web Performance",[925,49759,49760],{},"Let's examine the rules for web performance optimization.",[1530,49762,49763,49766,49769,49772,49775,49778,49781,49784,49787,49790,49793,49796,49799],{},[974,49764,49765],{},"Make fewer HTTP Requests",[974,49767,49768],{},"Use a Content Delivery Network (CDN)",[974,49770,49771],{},"Add an Expires Header",[974,49773,49774],{},"Gzip Components",[974,49776,49777],{},"Put Stylesheets at the Top",[974,49779,49780],{},"Put Scripts at the Bottom",[974,49782,49783],{},"Avoid CSS Expressions",[974,49785,49786],{},"Make JavaScript & CSS External",[974,49788,49789],{},"Reduce DNS Lookups",[974,49791,49792],{},"Minify JavaScipt",[974,49794,49795],{},"Avoid Redirects",[974,49797,49798],{},"Remove Duplicate Scripts",[974,49800,49801],{},"Configure Etags",[953,49803,49765],{"id":49804},"make-fewer-http-requests",[925,49806,49807],{},"When your web page loads in a browser, the browser sends an HTTP request to the web server for the page in the URL. Then, as the HTML is delivered, the browser parses it and looks for additional requests for images, scripts, CSS, and so on. Every time it sees a request for a new element, it sends another HTTP request to the server.",[1655,49809,49811],{"id":49810},"how-to-reduce-http-requests-without-effecting-your-design","How to Reduce HTTP Requests Without Effecting Your Design?",[925,49813,49814],{},"Luckily, there are several ways you can reduce the number of HTTP requests, while maintaining high-quality, rich web designs.",[1530,49816,49817,49823,49829],{},[974,49818,49819,49822],{},[941,49820,49821],{},"Combined files"," - Using external style sheets and scripts is important to keep them from bogging down your page load times, but don’t have more than one CSS and one script file.",[974,49824,49825,49828],{},[941,49826,49827],{},"CSS Sprites"," - When you combine most or all of your images into a sprite, you turn multiple images requests into just one. Then you just use the background-image CSS property to display the section of the image you need.",[974,49830,49831,49834],{},[941,49832,49833],{},"Image Maps"," - Image maps are not as popular as they once were, but when you have contiguous images they can reduce multiple HTTP image requests down to just one.",[7100,49836,49838],{"type":24048,"title":49837},"Advantage of Caching",[925,49839,49840],{},"By utilizing CSS sprites and combined CSS and scripts, you can likewise enhance load times for internal pages. For instance, in the event that you have a sprite picture that contains components of inside pages and in addition your presentation page, then when your readers go to those inward pages, the image is now downloaded and exists in the cache.",[953,49842,49768],{"id":49843},"use-a-content-delivery-network-cdn",[925,49845,49846],{},"A content delivery network (CDN) is a gathering of web servers circulated over different areas to convey content all the more effectively to clients.",[19650,49848,49850],{"className":49849},[24048],"\n The user's proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective. \n- **Yahoo!**\n",[953,49852,49771],{"id":49853},"add-an-expires-header",[925,49855,49856],{},"Express headers as stated, instructs the browser to requests a file from either the cache or the server. This will dramatically decrease the amount of repeated HTTP requests and hence increase the load time.",[7100,49858,49859,49862,49870,49873,49876,49879],{"type":24048},[925,49860,49861],{},"Adding an Expires header to your components with a date in the future makes them cacheable, reducing the load time of your pages. Certainly this should be done with images, but that's fairly typical. Go a step further and add it to scripts and stylesheets, too. This won't affect performance the first time users hit your page, but on subsequent page views it could reduce response times by 50% or more.",[1530,49863,49864],{},[974,49865,49866,49869],{},[1107,49867,49868],{},"Steve Souders","\n::",[953,49871,49774],{"id":49872},"gzip-components",[925,49874,49875],{},"Compressed components allow your server to provide smaller file sizes that load faster for your clients.",[925,49877,49878],{},"It said to be 50%-70% of file size saving for HTML and CSS when it is compressed and your pages will load much faster, and saves bandwidth.",[7100,49880,49881,49884,49891,49894,49897],{"type":24048},[925,49882,49883],{},"Next to eliminating unnecessary resource downloads, the best thing we can do to improve page load speed is to minimize our overall download size by optimizing and compressing the remaining resources.",[1530,49885,49886],{},[974,49887,49888,49869],{},[1107,49889,49890],{},"Google",[953,49892,49777],{"id":49893},"put-stylesheets-at-the-top",[925,49895,49896],{},"Placing your CSS at the top in the \u003Chead> section avoid users seeing a blank page at the load time and content will be styled before the blocking JavaScript files are being downloaded.",[7100,49898,49899,49910,49915,49918,49921],{"type":24048},[925,49900,49901,49902,49909],{},"The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: ",[28206,49903,49904,49905,49908],{},"Unlike A, ",[1002,49906,49907],{},"LINK"," may only appear in the HEAD section of a document, although it may appear any number of times."," Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.",[1530,49911,49912],{},[974,49913,49914],{},"**Steve Souders **\n::",[953,49916,49780],{"id":49917},"put-scripts-at-the-bottom",[925,49919,49920],{},"In order to prevent resources being blocked by the scripts at the download stage, it is the best practice to put the scripts at the bottom.",[7100,49922,49923,49926,49933,49936,49939,49989,49992],{"type":24048},[925,49924,49925],{},"JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads.\nIf you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.",[1530,49927,49928],{},[974,49929,49930,49869],{},[1107,49931,49932],{},"Yahoo!",[953,49934,49783],{"id":49935},"avoid-css-expressions",[925,49937,49938],{},"CSS expressions are a feature of IE5-IE7. They are a dangerous way of setting CSS properties dynamically.",[993,49940,49942],{"className":995,"code":49941,"language":997,"meta":998,"style":998},"background-color: expression( (new Date()).getHours()%2 ? \"#FF0000\" : \"#00FF00\" );\n",[941,49943,49944],{"__ignoreMap":998},[1002,49945,49946,49948,49950,49952,49954,49957,49960,49962,49964,49967,49970,49972,49974,49976,49978,49981,49983,49986],{"class":1004,"line":1005},[1002,49947,16073],{"class":1030},[1002,49949,5101],{"class":1015},[1002,49951,3475],{"class":1026},[1002,49953,1137],{"class":1030},[1002,49955,49956],{"class":1026},"expression",[1002,49958,49959],{"class":1030},"( (",[1002,49961,5654],{"class":1015},[1002,49963,31486],{"class":1026},[1002,49965,49966],{"class":1030},"()).",[1002,49968,49969],{"class":1026},"getHours",[1002,49971,10482],{"class":1030},[1002,49973,32598],{"class":1015},[1002,49975,5681],{"class":1019},[1002,49977,32515],{"class":1015},[1002,49979,49980],{"class":1034}," \"#FF0000\"",[1002,49982,29406],{"class":1015},[1002,49984,49985],{"class":1034}," \"#00FF00\"",[1002,49987,49988],{"class":1030}," );\n",[925,49990,49991],{},"These expressions would affect the browser performance, as they are evaluated more frequently.",[7100,49993,49994,49997,50003,50006,50009,50012,50015],{"type":24048},[925,49995,49996],{},"One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression. If the style property must be set dynamically throughout the life of the page, using event handlers instead of CSS expressions is an alternative approach. If you must use CSS expressions, remember that they may be evaluated thousands of times and could affect the performance of your page.",[1530,49998,49999],{},[974,50000,50001,49869],{},[1107,50002,49932],{},[953,50004,49786],{"id":50005},"make-javascript-css-external",[925,50007,50008],{},"Because the browser will cache the external files, making CSS and JavaScript external will increase the page speed.",[953,50010,49789],{"id":50011},"reduce-dns-lookups",[925,50013,50014],{},"A browser must resolve the DNS name of the web server to an IP address, before a browser can establish a network connection to a web server. Since DNS resolutions can be cached by the client's browser and operating system, if a valid record is still available in the client's cache, there is no latency introduced.",[7100,50016,50017,50026,50031,50035,50038,50041,50044],{"type":24048},[925,50018,50019,50020,50025],{},"High Performance Web Sites: Rule 9 – Reduce DNS Lookups. The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people's names to their phone numbers. When you type ",[933,50021,50024],{"href":50022,"rel":50023},"http:\u002F\u002Fwww.yahoo.com",[937],"www.yahoo.com"," into your browser, a DNS resolver contacted by the browser returns that server's IP address.",[1530,50027,50028],{},[974,50029,50030],{},"**Yahoo! **\n::",[953,50032,50034],{"id":50033},"minify-javascript","Minify JavaScript",[925,50036,50037],{},"Minifying JavaScript will obviously reduce the time it takes to load a web page.",[953,50039,49795],{"id":50040},"avoid-redirects",[925,50042,50043],{},"A redirect between the final HTML file and the user, will delay the page from loading as no component can be downloaded until HTML document has arrived.",[7100,50045,50046,50049,50054,50057,50060,50063,50066],{"type":24048},[925,50047,50048],{},"Redirects trigger an additional HTTP request-response cycle and delay page rendering. In the best case, each redirect will add a single roundtrip (HTTP request-response), and in the worst it may result in multiple additional roundtrips to perform the DNS lookup, TCP handshake, and TLS negotiation in addition to the additional HTTP request-response cycle. As a result, you should minimize use of redirects to improve site performance.",[1530,50050,50051],{},[974,50052,50053],{},"**Google **\n::",[953,50055,49798],{"id":50056},"remove-duplicate-scripts",[925,50058,50059],{},"Including the same JavaScript file twice obviously slow down the performance.",[953,50061,49801],{"id":50062},"configure-etags",[925,50064,50065],{},"To prevent 304 responses, we should not run multiple servers with the default Etag settings.",[7100,50067,50068,50071,50075,50077],{"type":24048},[925,50069,50070],{},"Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.",[1530,50072,50073],{},[974,50074,50030],{},[953,50076,26561],{"id":26560},[925,50078,50079],{},"These rules we discussed by Yahoo, will significantly increase the speed and the performance of your websites.",[1579,50081,50082],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":50084},[50085,50086,50089,50090,50091],{"id":49756,"depth":1012,"text":49757},{"id":49804,"depth":1012,"text":49765,"children":50087},[50088],{"id":49810,"depth":1047,"text":49811},{"id":49843,"depth":1012,"text":49768},{"id":49853,"depth":1012,"text":49771},{"id":49872,"depth":1012,"text":49774},"2016-03-12","\u002Fimages\u002Fblog\u002Ffeatures\u002Ffront-end-performance.jpg",{},{"title":299,"description":301},"blog\u002Ffront-end-performance",[16,303],"AFHE_1l9TsSwy9p1TL16xRO23L4mMb3ilfineP_3n88",{"id":50100,"title":590,"author":920,"body":50101,"date":50304,"description":592,"extension":1591,"image":50305,"meta":50306,"navigation":1050,"path":591,"seo":50307,"stem":50308,"tags":50309,"__hash__":50310},"blog\u002Fblog\u002Fnodejs-install-with-nvm.md",{"type":922,"value":50102,"toc":50297},[50103,50107,50110,50114,50117,50123,50144,50150,50169,50177,50182,50186,50189,50202,50205,50219,50222,50236,50240,50243,50255,50260,50276,50283,50285,50294],[953,50104,50106],{"id":50105},"why-nvm","Why NVM?",[925,50108,50109],{},"At any given time, you could be working with different projects, some using the older version of NodeJS and other recent. NVM enables us to install different versions for different projects.",[953,50111,50113],{"id":50112},"installing-nvm","Installing NVM",[925,50115,50116],{},"You do have to have at least one version of node and npm to get started, but after that you can install nvm with npm.",[925,50118,50119,50120,1813],{},"You can install NVM as a script using ",[941,50121,50122],{},"cURL",[993,50124,50126],{"className":1797,"code":50125,"language":1799,"meta":998,"style":998},"curl -o- https:\u002F\u002Fraw.githubusercontent.com\u002Fcreationix\u002Fnvm\u002Fv0.31.0\u002Finstall.sh | bash\n",[941,50127,50128],{"__ignoreMap":998},[1002,50129,50130,50133,50136,50139,50141],{"class":1004,"line":1005},[1002,50131,50132],{"class":1026},"curl",[1002,50134,50135],{"class":1019}," -o-",[1002,50137,50138],{"class":1034}," https:\u002F\u002Fraw.githubusercontent.com\u002Fcreationix\u002Fnvm\u002Fv0.31.0\u002Finstall.sh",[1002,50140,17264],{"class":1015},[1002,50142,50143],{"class":1026}," bash\n",[925,50145,50146,50147,1813],{},"Or you can also use ",[941,50148,50149],{},"Wget",[993,50151,50153],{"className":1797,"code":50152,"language":1799,"meta":998,"style":998},"wget -qO- https:\u002F\u002Fraw.githubusercontent.com\u002Fcreationix\u002Fnvm\u002Fv0.31.0\u002Finstall.sh | bash\n",[941,50154,50155],{"__ignoreMap":998},[1002,50156,50157,50160,50163,50165,50167],{"class":1004,"line":1005},[1002,50158,50159],{"class":1026},"wget",[1002,50161,50162],{"class":1019}," -qO-",[1002,50164,50138],{"class":1034},[1002,50166,17264],{"class":1015},[1002,50168,50143],{"class":1026},[925,50170,50171,50172,50176],{},"You might have to change the version, check ",[933,50173,38060],{"href":50174,"rel":50175},"https:\u002F\u002Fgithub.com\u002Fcreationix\u002Fnvm",[937]," for the latest version.",[7100,50178,50179],{"type":24048},[925,50180,50181],{},"You might have to close and reopen your terminal to start using NVM.",[953,50183,50185],{"id":50184},"install-node-using-nvm","Install Node using NVM",[925,50187,50188],{},"Let's look at how we can use NVM to install Node now. Before downloading a specific version of Node, you can find which versions are available for you to download.",[993,50190,50192],{"className":1797,"code":50191,"language":1799,"meta":998,"style":998},"nvm ls-remote\n",[941,50193,50194],{"__ignoreMap":998},[1002,50195,50196,50199],{"class":1004,"line":1005},[1002,50197,50198],{"class":1026},"nvm",[1002,50200,50201],{"class":1034}," ls-remote\n",[925,50203,50204],{},"You can install the version you desire with the following command:",[993,50206,50208],{"className":1797,"code":50207,"language":1799,"meta":998,"style":998},"nvm install 5.0\n",[941,50209,50210],{"__ignoreMap":998},[1002,50211,50212,50214,50216],{"class":1004,"line":1005},[1002,50213,50198],{"class":1026},[1002,50215,27349],{"class":1034},[1002,50217,50218],{"class":1019}," 5.0\n",[925,50220,50221],{},"And then in any new shell just use the installed version:",[993,50223,50225],{"className":1797,"code":50224,"language":1799,"meta":998,"style":998},"nvm use 5.0\n",[941,50226,50227],{"__ignoreMap":998},[1002,50228,50229,50231,50234],{"class":1004,"line":1005},[1002,50230,50198],{"class":1026},[1002,50232,50233],{"class":1034}," use",[1002,50235,50218],{"class":1019},[953,50237,50239],{"id":50238},"using-nvm","Using NVM",[925,50241,50242],{},"You can check which version of NVM is installed with the following command:",[993,50244,50246],{"className":1797,"code":50245,"language":1799,"meta":998,"style":998},"nvm ls\n",[941,50247,50248],{"__ignoreMap":998},[1002,50249,50250,50252],{"class":1004,"line":1005},[1002,50251,50198],{"class":1026},[1002,50253,50254],{"class":1034}," ls\n",[925,50256,50257,50258,948],{},"If you are only using one version of Node, you can set it as ",[941,50259,15278],{},[993,50261,50263],{"className":1797,"code":50262,"language":1799,"meta":998,"style":998},"nvm alias default 5.0\n",[941,50264,50265],{"__ignoreMap":998},[1002,50266,50267,50269,50272,50274],{"class":1004,"line":1005},[1002,50268,50198],{"class":1026},[1002,50270,50271],{"class":1034}," alias",[1002,50273,15641],{"class":1034},[1002,50275,50218],{"class":1019},[925,50277,50278,50279,50282],{},"When you are using multiple projects, you can tell which version to be used by creating ",[31621,50280,50281],{},".nvmrc"," file inside the directory.",[953,50284,26561],{"id":26560},[925,50286,50287,50288,2034,50291,948],{},"Managing versions is crucial but tedious. The task should be automated. NVM helps us manage multiple Node Js versions without a sweat. It becomes much easy to work in a working version, and try something new in the latest version. All you have to do is ",[31621,50289,50290],{},"nvm use default",[31621,50292,50293],{},"nvm use stable",[1579,50295,50296],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":50298},[50299,50300,50301,50302,50303],{"id":50105,"depth":1012,"text":50106},{"id":50112,"depth":1012,"text":50113},{"id":50184,"depth":1012,"text":50185},{"id":50238,"depth":1012,"text":50239},{"id":26560,"depth":1012,"text":26561},"2016-02-29","\u002Fimages\u002Fblog\u002Ffeatures\u002Fnodejs-install-with-nvm.jpg",{},{"title":590,"description":592},"blog\u002Fnodejs-install-with-nvm",[16,17,442],"3z8f6caVcx6kydetnzCwFdShG07h3ZK2cN0IxX880tU",{"id":50312,"title":449,"author":920,"body":50313,"date":51195,"description":451,"extension":1591,"image":51196,"meta":51197,"navigation":1050,"path":450,"seo":51198,"stem":51199,"tags":51200,"__hash__":51201},"blog\u002Fblog\u002Fintroduction-to-d3.md",{"type":922,"value":50314,"toc":51179},[50315,50319,50322,50326,50329,50334,50337,50433,50436,50440,50443,50457,50460,50465,50468,50477,50533,50536,50549,50628,50631,50634,50637,50654,50660,50666,50669,50759,50762,50767,50770,50811,50814,50817,50827,50832,50835,50882,50889,50927,50929,50936,50939,50959,50968,50972,50978,51057,51060,51065,51072,51076,51081,51086,51089,51093,51096,51101,51119,51129,51133,51136,51141,51145,51148,51153,51157,51160,51165,51167,51170,51176],[953,50316,50318],{"id":50317},"what-d3-is-not","What D3 is not?",[925,50320,50321],{},"D3 does not have prebuilt visualizations - data visualization components like charts.\nOnly works with modern browsers - not compatible with the older versions.\nCompatible with web standards so no plugins required like Flash, Silverlight or Java.",[953,50323,50325],{"id":50324},"why-d3","Why D3?",[925,50327,50328],{},"Building visualizations with vanilla JavaScript or SVG can quickly become a tedious, difficult task. Let's look at an SVG example.",[29454,50330,50333],{"height":47757,"style":47758,"scrolling":47759,"title":50331,"src":50332,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"SVG Graph","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FzrbRGX?height=265&theme-id=default&default-tab=html,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FzrbRGX'>SVG Graph\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[925,50335,50336],{},"D3 has declarative syntax, which encapsulates the implementation and provides us with an intuitive interface.",[993,50338,50340],{"className":995,"code":50339,"language":997,"meta":998,"style":998},"d3.select('body')\n .selectAll('div')\n .attr('class', 'bar')\n .style('height', function (d) {\n return d * 20 + 'px';\n });\n",[941,50341,50342,50355,50369,50388,50410,50429],{"__ignoreMap":998},[1002,50343,50344,50347,50349,50351,50353],{"class":1004,"line":1005},[1002,50345,50346],{"class":1030},"d3.",[1002,50348,9667],{"class":1026},[1002,50350,1031],{"class":1030},[1002,50352,35638],{"class":1034},[1002,50354,3808],{"class":1030},[1002,50356,50357,50359,50362,50364,50367],{"class":1004,"line":1012},[1002,50358,3794],{"class":1030},[1002,50360,50361],{"class":1026},"selectAll",[1002,50363,1031],{"class":1030},[1002,50365,50366],{"class":1034},"'div'",[1002,50368,3808],{"class":1030},[1002,50370,50371,50373,50376,50378,50381,50383,50386],{"class":1004,"line":1047},[1002,50372,3794],{"class":1030},[1002,50374,50375],{"class":1026},"attr",[1002,50377,1031],{"class":1030},[1002,50379,50380],{"class":1034},"'class'",[1002,50382,1251],{"class":1030},[1002,50384,50385],{"class":1034},"'bar'",[1002,50387,3808],{"class":1030},[1002,50389,50390,50392,50394,50396,50399,50401,50403,50405,50408],{"class":1004,"line":1054},[1002,50391,3794],{"class":1030},[1002,50393,1579],{"class":1026},[1002,50395,1031],{"class":1030},[1002,50397,50398],{"class":1034},"'height'",[1002,50400,1251],{"class":1030},[1002,50402,6965],{"class":1015},[1002,50404,6513],{"class":1030},[1002,50406,50407],{"class":2378},"d",[1002,50409,2382],{"class":1030},[1002,50411,50412,50414,50417,50419,50422,50424,50427],{"class":1004,"line":1060},[1002,50413,2687],{"class":1015},[1002,50415,50416],{"class":1030}," d ",[1002,50418,4703],{"class":1015},[1002,50420,50421],{"class":1019}," 20",[1002,50423,6583],{"class":1015},[1002,50425,50426],{"class":1034}," 'px'",[1002,50428,1407],{"class":1030},[1002,50430,50431],{"class":1004,"line":1272},[1002,50432,19836],{"class":1030},[925,50434,50435],{},"This might not make sense just yet, you can see we are using a function which knows about our data, to set the height.",[953,50437,50439],{"id":50438},"using-d3","Using D3",[925,50441,50442],{},"D3 does the hard work for us by automating the repetitive hard bits. D3 comes packed with useful helpers we can use. Let's look at what D3 gives us.",[1530,50444,50445,50448,50451,50454],{},[974,50446,50447],{},"Helpers",[974,50449,50450],{},"Scales",[974,50452,50453],{},"Axes",[974,50455,50456],{},"Data",[925,50458,50459],{},"To understand above features, let's start by creating a basic graph.",[29454,50461,50464],{"height":47757,"style":47758,"scrolling":47759,"title":50462,"src":50463,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"D3 Basic Chart","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FqbvOYo?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FqbvOYo'>D3 Basic Chart\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[953,50466,50447],{"id":50467},"helpers",[925,50469,50470,50471,2034,50473,50476],{},"D3 has helper functions like ",[941,50472,31367],{},[941,50474,50475],{},"max"," values of a data set.",[993,50478,50480],{"className":995,"code":50479,"language":997,"meta":998,"style":998},"var dataset = [1, 2, 3, 4, 5, 8];\n\nd3.min(dataset); \u002F\u002F 1\n",[941,50481,50482,50517,50521],{"__ignoreMap":998},[1002,50483,50484,50486,50489,50491,50493,50495,50497,50499,50501,50503,50505,50507,50509,50511,50513,50515],{"class":1004,"line":1005},[1002,50485,18311],{"class":1015},[1002,50487,50488],{"class":1030}," dataset ",[1002,50490,2393],{"class":1015},[1002,50492,1897],{"class":1030},[1002,50494,6211],{"class":1019},[1002,50496,1251],{"class":1030},[1002,50498,5681],{"class":1019},[1002,50500,1251],{"class":1030},[1002,50502,2796],{"class":1019},[1002,50504,1251],{"class":1030},[1002,50506,3837],{"class":1019},[1002,50508,1251],{"class":1030},[1002,50510,2859],{"class":1019},[1002,50512,1251],{"class":1030},[1002,50514,31435],{"class":1019},[1002,50516,6754],{"class":1030},[1002,50518,50519],{"class":1004,"line":1012},[1002,50520,1051],{"emptyLinePlaceholder":1050},[1002,50522,50523,50525,50527,50530],{"class":1004,"line":1047},[1002,50524,50346],{"class":1030},[1002,50526,31367],{"class":1026},[1002,50528,50529],{"class":1030},"(dataset); ",[1002,50531,50532],{"class":1008},"\u002F\u002F 1\n",[925,50534,50535],{},"The source data to D3 is built of Plain Old JavaScript objects, or POJOS.",[925,50537,50538,50539,2034,50542,50544,50545,2034,50547,948],{},"D3 functions commonly take callbacks which in turn takes two arguments ",[941,50540,50541],{},"element",[941,50543,19458],{},". These parameters are usually called passed in as ",[941,50546,50407],{},[941,50548,12031],{},[993,50550,50552],{"className":995,"code":50551,"language":997,"meta":998,"style":998},"var dataset = [1, 2, 3, 4, 5, 8];\n\nd3.max(dataset, function (d, i) {\n return d.amount;\n}); \u002F\u002F 8\n",[941,50553,50554,50588,50592,50613,50620],{"__ignoreMap":998},[1002,50555,50556,50558,50560,50562,50564,50566,50568,50570,50572,50574,50576,50578,50580,50582,50584,50586],{"class":1004,"line":1005},[1002,50557,18311],{"class":1015},[1002,50559,50488],{"class":1030},[1002,50561,2393],{"class":1015},[1002,50563,1897],{"class":1030},[1002,50565,6211],{"class":1019},[1002,50567,1251],{"class":1030},[1002,50569,5681],{"class":1019},[1002,50571,1251],{"class":1030},[1002,50573,2796],{"class":1019},[1002,50575,1251],{"class":1030},[1002,50577,3837],{"class":1019},[1002,50579,1251],{"class":1030},[1002,50581,2859],{"class":1019},[1002,50583,1251],{"class":1030},[1002,50585,31435],{"class":1019},[1002,50587,6754],{"class":1030},[1002,50589,50590],{"class":1004,"line":1012},[1002,50591,1051],{"emptyLinePlaceholder":1050},[1002,50593,50594,50596,50598,50601,50603,50605,50607,50609,50611],{"class":1004,"line":1047},[1002,50595,50346],{"class":1030},[1002,50597,50475],{"class":1026},[1002,50599,50600],{"class":1030},"(dataset, ",[1002,50602,6965],{"class":1015},[1002,50604,6513],{"class":1030},[1002,50606,50407],{"class":2378},[1002,50608,1251],{"class":1030},[1002,50610,12031],{"class":2378},[1002,50612,2382],{"class":1030},[1002,50614,50615,50617],{"class":1004,"line":1054},[1002,50616,15066],{"class":1015},[1002,50618,50619],{"class":1030}," d.amount;\n",[1002,50621,50622,50625],{"class":1004,"line":1060},[1002,50623,50624],{"class":1030},"}); ",[1002,50626,50627],{"class":1008},"\u002F\u002F 8\n",[953,50629,50450],{"id":50630},"scales",[925,50632,50633],{},"Scales are objects in D3 that help map values across coordinate systems.",[925,50635,50636],{},"Scales have the following attributes:",[1530,50638,50639,50648,50651],{},[974,50640,50641,50642,32093,50645],{},"Configured with a ",[941,50643,50644],{},"domain",[941,50646,50647],{},"range",[974,50649,50650],{},"Map from the data to teh screen space",[974,50652,50653],{},"There are different types of scales - linear and logarithmic",[925,50655,50656,50659],{},[941,50657,50658],{},"Domain"," - The data space which its units are our source units.",[925,50661,50662,50665],{},[941,50663,50664],{},"Range"," - The screen pixels",[925,50667,50668],{},"Let's look at how we can implement a y-scale example.",[993,50670,50672],{"className":995,"code":50671,"language":997,"meta":998,"style":998},"var y = d3.scale.linear().domain([0, 100]).range([100, 0]);\n\ny(0); \u002F\u002F 100\ny(50); \u002F\u002F 50\ny(100); \u002F\u002F0\n",[941,50673,50674,50715,50719,50733,50746],{"__ignoreMap":998},[1002,50675,50676,50678,50681,50683,50686,50689,50691,50693,50695,50697,50699,50701,50703,50705,50707,50709,50711,50713],{"class":1004,"line":1005},[1002,50677,18311],{"class":1015},[1002,50679,50680],{"class":1030}," y ",[1002,50682,2393],{"class":1015},[1002,50684,50685],{"class":1030}," d3.scale.",[1002,50687,50688],{"class":1026},"linear",[1002,50690,12951],{"class":1030},[1002,50692,50644],{"class":1026},[1002,50694,30910],{"class":1030},[1002,50696,5867],{"class":1019},[1002,50698,1251],{"class":1030},[1002,50700,4791],{"class":1019},[1002,50702,48494],{"class":1030},[1002,50704,50647],{"class":1026},[1002,50706,30910],{"class":1030},[1002,50708,4791],{"class":1019},[1002,50710,1251],{"class":1030},[1002,50712,5867],{"class":1019},[1002,50714,29611],{"class":1030},[1002,50716,50717],{"class":1004,"line":1012},[1002,50718,1051],{"emptyLinePlaceholder":1050},[1002,50720,50721,50724,50726,50728,50730],{"class":1004,"line":1047},[1002,50722,50723],{"class":1026},"y",[1002,50725,1031],{"class":1030},[1002,50727,5867],{"class":1019},[1002,50729,18256],{"class":1030},[1002,50731,50732],{"class":1008},"\u002F\u002F 100\n",[1002,50734,50735,50737,50739,50741,50743],{"class":1004,"line":1054},[1002,50736,50723],{"class":1026},[1002,50738,1031],{"class":1030},[1002,50740,4800],{"class":1019},[1002,50742,18256],{"class":1030},[1002,50744,50745],{"class":1008},"\u002F\u002F 50\n",[1002,50747,50748,50750,50752,50754,50756],{"class":1004,"line":1060},[1002,50749,50723],{"class":1026},[1002,50751,1031],{"class":1030},[1002,50753,4791],{"class":1019},[1002,50755,18256],{"class":1030},[1002,50757,50758],{"class":1008},"\u002F\u002F0\n",[925,50760,50761],{},"Now let's apply scaling to our graph.",[29454,50763,50766],{"height":47757,"style":47758,"scrolling":47759,"title":50764,"src":50765,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"D3 Scaling","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FMKRBde?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FMKRBde'>D3 Scaling\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[925,50768,50769],{},"We are overriding the default domain and range by specifying the domain and range using chained syntax.",[993,50771,50773],{"className":995,"code":50772,"language":997,"meta":998,"style":998},"var yScale = d3.scale.linear().domain([0, 50]).range([0, height]);\n",[941,50774,50775],{"__ignoreMap":998},[1002,50776,50777,50779,50782,50784,50786,50788,50790,50792,50794,50796,50798,50800,50802,50804,50806,50808],{"class":1004,"line":1005},[1002,50778,18311],{"class":1015},[1002,50780,50781],{"class":1030}," yScale ",[1002,50783,2393],{"class":1015},[1002,50785,50685],{"class":1030},[1002,50787,50688],{"class":1026},[1002,50789,12951],{"class":1030},[1002,50791,50644],{"class":1026},[1002,50793,30910],{"class":1030},[1002,50795,5867],{"class":1019},[1002,50797,1251],{"class":1030},[1002,50799,4800],{"class":1019},[1002,50801,48494],{"class":1030},[1002,50803,50647],{"class":1026},[1002,50805,30910],{"class":1030},[1002,50807,5867],{"class":1019},[1002,50809,50810],{"class":1030},", height]);\n",[925,50812,50813],{},"We were able to bypass the step of figuring out how to map our initial interval (domain) onto our new interval (range).",[953,50815,50453],{"id":50816},"axes",[925,50818,50819,50820,2034,50823,50826],{},"D3 has helpers we can use to draw an axis for our graph. D3.js Axis component allows for easy addition of a ",[941,50821,50822],{},"horizontal-axis",[941,50824,50825],{},"vertical-axis"," to any graph.",[29454,50828,50831],{"height":47757,"style":47758,"scrolling":47759,"title":50829,"src":50830,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"D3 Scaling Basic","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FJGVRoL?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FJGVRoL'>D3 Scaling Basic\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[925,50833,50834],{},"To add the axis to the SVG graph, we will have to call the axis function on a selection.",[993,50836,50838],{"className":995,"code":50837,"language":997,"meta":998,"style":998},"var xAxis = d3.svg.axis().scale(axisScale).orient('below').ticks(4);\n",[941,50839,50840],{"__ignoreMap":998},[1002,50841,50842,50844,50847,50849,50852,50855,50857,50860,50863,50866,50868,50871,50873,50876,50878,50880],{"class":1004,"line":1005},[1002,50843,18311],{"class":1015},[1002,50845,50846],{"class":1030}," xAxis ",[1002,50848,2393],{"class":1015},[1002,50850,50851],{"class":1030}," d3.svg.",[1002,50853,50854],{"class":1026},"axis",[1002,50856,12951],{"class":1030},[1002,50858,50859],{"class":1026},"scale",[1002,50861,50862],{"class":1030},"(axisScale).",[1002,50864,50865],{"class":1026},"orient",[1002,50867,1031],{"class":1030},[1002,50869,50870],{"class":1034},"'below'",[1002,50872,1539],{"class":1030},[1002,50874,50875],{"class":1026},"ticks",[1002,50877,1031],{"class":1030},[1002,50879,3837],{"class":1019},[1002,50881,1085],{"class":1030},[925,50883,50884,50885,50888],{},"We use the ",[31621,50886,50887],{},"call()"," operator to call the axis function.",[993,50890,50891],{"className":995,"code":50837,"language":997,"meta":998,"style":998},[941,50892,50893],{"__ignoreMap":998},[1002,50894,50895,50897,50899,50901,50903,50905,50907,50909,50911,50913,50915,50917,50919,50921,50923,50925],{"class":1004,"line":1005},[1002,50896,18311],{"class":1015},[1002,50898,50846],{"class":1030},[1002,50900,2393],{"class":1015},[1002,50902,50851],{"class":1030},[1002,50904,50854],{"class":1026},[1002,50906,12951],{"class":1030},[1002,50908,50859],{"class":1026},[1002,50910,50862],{"class":1030},[1002,50912,50865],{"class":1026},[1002,50914,1031],{"class":1030},[1002,50916,50870],{"class":1034},[1002,50918,1539],{"class":1030},[1002,50920,50875],{"class":1026},[1002,50922,1031],{"class":1030},[1002,50924,3837],{"class":1019},[1002,50926,1085],{"class":1030},[953,50928,50456],{"id":16648},[925,50930,50931,50932,50935],{},"Data binding is done differently with D3 ",[941,50933,50934],{},"selections",". They’re powerful because the same selection can be updated for different data later on. Updating is the most powerful part of selections.",[925,50937,50938],{},"D3.js figures out for you how to draw the vertical axis line, the vertical axis ticks, the correct spacing of axis ticks to make the axis visually appealing and many other things.",[993,50940,50942],{"className":995,"code":50941,"language":997,"meta":998,"style":998},"d3.select(String selector) -> (d3.selection)\n",[941,50943,50944],{"__ignoreMap":998},[1002,50945,50946,50948,50950,50953,50956],{"class":1004,"line":1005},[1002,50947,50346],{"class":1030},[1002,50949,9667],{"class":1026},[1002,50951,50952],{"class":1030},"(String selector) ",[1002,50954,50955],{"class":1015},"->",[1002,50957,50958],{"class":1030}," (d3.selection)\n",[19650,50960,50962,50963,50967],{"className":50961},[24048],"\n ",[50964,50965,50966],"h5",{"id":50934},"Selections","\n D3 selections are a group of elements that match a query.\n",[953,50969,50971],{"id":50970},"d3max","D3.max",[925,50973,50974,50975,50977],{},"Let's look at how to use D3's ",[941,50976,50475],{}," method to normalize your dataset visually within the specific bounds of a variable domain.",[993,50979,50981],{"className":995,"code":50980,"language":997,"meta":998,"style":998},"var initialScaleData = [0, 10, 30, 20, 50, 40, 70, 60, 90, 80, 100];\n\nd3.max(initialScaleData); \u002F\u002F 100\n",[941,50982,50983,51042,51046],{"__ignoreMap":998},[1002,50984,50985,50987,50990,50992,50994,50996,50998,51000,51002,51005,51007,51009,51011,51013,51015,51018,51020,51023,51025,51028,51030,51032,51034,51036,51038,51040],{"class":1004,"line":1005},[1002,50986,18311],{"class":1015},[1002,50988,50989],{"class":1030}," initialScaleData ",[1002,50991,2393],{"class":1015},[1002,50993,1897],{"class":1030},[1002,50995,5867],{"class":1019},[1002,50997,1251],{"class":1030},[1002,50999,4818],{"class":1019},[1002,51001,1251],{"class":1030},[1002,51003,51004],{"class":1019},"30",[1002,51006,1251],{"class":1030},[1002,51008,4809],{"class":1019},[1002,51010,1251],{"class":1030},[1002,51012,4800],{"class":1019},[1002,51014,1251],{"class":1030},[1002,51016,51017],{"class":1019},"40",[1002,51019,1251],{"class":1030},[1002,51021,51022],{"class":1019},"70",[1002,51024,1251],{"class":1030},[1002,51026,51027],{"class":1019},"60",[1002,51029,1251],{"class":1030},[1002,51031,38709],{"class":1019},[1002,51033,1251],{"class":1030},[1002,51035,38704],{"class":1019},[1002,51037,1251],{"class":1030},[1002,51039,4791],{"class":1019},[1002,51041,6754],{"class":1030},[1002,51043,51044],{"class":1004,"line":1012},[1002,51045,1051],{"emptyLinePlaceholder":1050},[1002,51047,51048,51050,51052,51055],{"class":1004,"line":1047},[1002,51049,50346],{"class":1030},[1002,51051,50475],{"class":1026},[1002,51053,51054],{"class":1030},"(initialScaleData); ",[1002,51056,50732],{"class":1008},[925,51058,51059],{},"As you can see, D3.max calculates the maximum value of an array. By using this method we can create a complicated chart as the following.",[29454,51061,51064],{"height":47757,"style":47758,"scrolling":47759,"title":51062,"src":51063,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"D3: Max","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FRrzxbQ?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FRrzxbQ'>D3: Max\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[925,51066,51067,51068,51071],{},"Same as above we can use ",[941,51069,51070],{},"d3.min"," to calculate the minimum value of an array.",[953,51073,51075],{"id":51074},"rangebands","rangeBands",[925,51077,32004,51078,51080],{},[941,51079,51075],{}," to horizontally scale our D3 charts. When building a chart such as a bar chart in d3, you’ll want an evenly divided space on your x axis. You could divide the space up with your own manual calculations, accounting for space available, bar width, and inner and outer padding. Or, you could have d3 do the calculation for you via a rangeBand.",[29454,51082,51085],{"height":47757,"style":47758,"scrolling":47759,"title":51083,"src":51084,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"D3: rangeBands","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FMKMNVy?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FMKMNVy'>D3: rangeBands\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[925,51087,51088],{},"So for building a chart such as a bar chart in d3, you’ll want an evenly divided space on your x axis. You could divide the space up with your own manual calculations, accounting for space available, bar width, and inner and outer padding. Or, you could have d3 do the calculation for you via a rangeBand.",[953,51090,51092],{"id":51091},"color-scales","Color Scales",[925,51094,51095],{},"Let's explore the use of color scales in our D3 charts.",[29454,51097,51100],{"height":47757,"style":47758,"scrolling":47759,"title":51098,"src":51099,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"D3: Color Scales","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FobKqZg?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FobKqZg'>D3: Color Scales\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[925,51102,51103,51104,51107,51108,51111,51112,51115,51116,948],{},"We can handle the background color of a filled object with ",[941,51105,51106],{},"fill",", its transparency with ",[941,51109,51110],{},"opacity",", the color of the outline with ",[941,51113,51114],{},"stroke"," and the transparency of that color with ",[941,51117,51118],{},"stroke-opacity",[925,51120,51121,51122,2034,51125,51128],{},"D3 has two color objects: ",[941,51123,51124],{},"d3_Rgb",[941,51126,51127],{},"d3_Hsl",", which describe colors in the two of the most popular color spaces: red\u002Fgreen\u002Fblue, and hue\u002Fsaturation\u002Flight.",[953,51130,51132],{"id":51131},"quantitative-scales","Quantitative Scales",[925,51134,51135],{},"In D3 quantitative scales allow you do easily divide aspects of your chart evenly based on the dataset. Let's find out the variety of scaling options available in D3.",[29454,51137,51140],{"height":47757,"style":47758,"scrolling":47759,"title":51138,"src":51139,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"D3: Quantitative Scales","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FqbeoXB?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FqbeoXB'>D3: Quantitative Scales\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[953,51142,51144],{"id":51143},"margins","Margins",[925,51146,51147],{},"Let's look at how to add margins to your D3 charts to give them the room they deserve.",[29454,51149,51152],{"height":47757,"style":47758,"scrolling":47759,"title":51150,"src":51151,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"D3: Margins","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FQNLjOQ?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FQNLjOQ'>D3: Margins\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[953,51154,51156],{"id":51155},"scatter-plot","Scatter Plot",[925,51158,51159],{},"D3 offers a variety of charts you can work with. Let's convert the bar chart into a basic scatter (or bubble) chart.",[29454,51161,51164],{"height":47757,"style":47758,"scrolling":47759,"title":51162,"src":51163,"frameBorder":47759,"allowTransparency":17397,"allowFullScreen":17397},"D3: Scatter Plot","https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fembed\u002FdMbGvW?height=265&theme-id=default&default-tab=js,result","\n See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger\u002Fpen\u002FdMbGvW'>D3: Scatter Plot\u003C\u002Fa> by Sean Amarasinghe\n (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fszaranger'>@szaranger\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[953,51166,26561],{"id":26560},[925,51168,51169],{},"D3 gives the front-end developer enormous potential in delivering complicated yet sophisticated data visualizations.",[925,51171,47770,51172,948],{},[933,51173,14815],{"href":51174,"rel":51175},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fd3-intro",[937],[1579,51177,51178],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":51180},[51181,51182,51183,51184,51185,51186,51187,51188,51189,51190,51191,51192,51193,51194],{"id":50317,"depth":1012,"text":50318},{"id":50324,"depth":1012,"text":50325},{"id":50438,"depth":1012,"text":50439},{"id":50467,"depth":1012,"text":50447},{"id":50630,"depth":1012,"text":50450},{"id":50816,"depth":1012,"text":50453},{"id":16648,"depth":1012,"text":50456},{"id":50970,"depth":1012,"text":50971},{"id":51074,"depth":1012,"text":51075},{"id":51091,"depth":1012,"text":51092},{"id":51131,"depth":1012,"text":51132},{"id":51143,"depth":1012,"text":51144},{"id":51155,"depth":1012,"text":51156},{"id":26560,"depth":1012,"text":26561},"2016-02-25","\u002Fimages\u002Fblog\u002Ffeatures\u002Fintroduction-to-d3.jpg",{},{"title":449,"description":451},"blog\u002Fintroduction-to-d3",[16,17,453],"XrEmGSRyosqvSiz6kRQSWF4UayruC_Xq9J2_IgMfLY4",{"id":51203,"title":406,"author":920,"body":51204,"date":60737,"description":408,"extension":1591,"image":60738,"meta":60739,"navigation":1050,"path":407,"seo":60740,"stem":60741,"tags":60742,"__hash__":60743},"blog\u002Fblog\u002Fimmutable-js.md",{"type":922,"value":51205,"toc":60719},[51206,51220,51223,51227,51230,51239,51245,51248,51251,51260,51263,51368,51375,51378,51390,51463,51467,51470,51473,51741,51744,52102,52115,52119,52122,52137,52140,53224,53227,53231,53251,54216,54219,54223,54226,55247,55250,55254,55257,56904,56907,56915,56918,57427,57430,57437,57446,57946,57956,57962,58669,58673,58676,60030,60034,60037,60705,60707,60710,60716],[925,51207,51208,51209,1251,51211,1251,51214,36227,51216,51219],{},"Immutable.js provides a series of immutable data structures like ",[941,51210,23271],{},[941,51212,51213],{},"Stack",[941,51215,32239],{},[941,51217,51218],{},"Set",". THey are iterable and look a lot like arrays and feel like hashes, but Instead of them being mutable, they're always immutable, meaning they don't change from underneath you.",[925,51221,51222],{},"The reference to them can change, but the data inside them cannot, which means you can build predictable and reliable state models on top of them. It becomes a lot easier to manage your application's state.",[953,51224,51226],{"id":51225},"why-immutablejs","Why Immutable.js?",[925,51228,51229],{},"Much of what makes application development difficult is tracking mutation and maintaining state. Developing with immutable data encourages you to think differently about how data flows through your application.",[925,51231,51232,51233,51235,51236,948],{},"This model of data flow aligns well with the architecture of ",[941,51234,33088],{}," and especially well with an application designed using the ideas of ",[941,51237,51238],{},"Flux",[7100,51240,51242],{"title":51241,"type":24048},"Values Not Objects",[925,51243,51244],{},"Immutable collections should be treated as values rather than objects. While objects represents some thing which could change over time, a value represents the state of that thing at a particular instance of time.",[953,51246,51247],{"id":27346},"NPM",[925,51249,51250],{},"We can install Immutable.js using npm.",[993,51252,51254],{"className":1797,"code":51253,"language":1799,"meta":998,"style":998},"npm install immutable\n",[941,51255,51256],{"__ignoreMap":998},[1002,51257,51258],{"class":1004,"line":1005},[1002,51259,51253],{},[925,51261,51262],{},"Then we can require it into our module.",[993,51264,51266],{"className":995,"code":51265,"language":997,"meta":998,"style":998},"var Immutable = require('immutable');\n\nvar car = Immutable.Map({ wheels: 4 });\nvar truck = cars.set('wheels', 6);\ncar.get('wheels'); \u002F\u002F 4\ntruck.get('wheels'); \u002F\u002F 6\n",[941,51267,51268,51286,51290,51311,51337,51352],{"__ignoreMap":998},[1002,51269,51270,51272,51275,51277,51279,51281,51284],{"class":1004,"line":1005},[1002,51271,18311],{"class":1015},[1002,51273,51274],{"class":1030}," Immutable ",[1002,51276,2393],{"class":1015},[1002,51278,1027],{"class":1026},[1002,51280,1031],{"class":1030},[1002,51282,51283],{"class":1034},"'immutable'",[1002,51285,1085],{"class":1030},[1002,51287,51288],{"class":1004,"line":1012},[1002,51289,1051],{"emptyLinePlaceholder":1050},[1002,51291,51292,51294,51297,51299,51302,51304,51307,51309],{"class":1004,"line":1047},[1002,51293,18311],{"class":1015},[1002,51295,51296],{"class":1030}," car ",[1002,51298,2393],{"class":1015},[1002,51300,51301],{"class":1030}," Immutable.",[1002,51303,32239],{"class":1026},[1002,51305,51306],{"class":1030},"({ wheels: ",[1002,51308,3837],{"class":1019},[1002,51310,28417],{"class":1030},[1002,51312,51313,51315,51318,51320,51323,51325,51327,51330,51332,51335],{"class":1004,"line":1054},[1002,51314,18311],{"class":1015},[1002,51316,51317],{"class":1030}," truck ",[1002,51319,2393],{"class":1015},[1002,51321,51322],{"class":1030}," cars.",[1002,51324,40544],{"class":1026},[1002,51326,1031],{"class":1030},[1002,51328,51329],{"class":1034},"'wheels'",[1002,51331,1251],{"class":1030},[1002,51333,51334],{"class":1019},"6",[1002,51336,1085],{"class":1030},[1002,51338,51339,51341,51343,51345,51347,51349],{"class":1004,"line":1060},[1002,51340,3261],{"class":1030},[1002,51342,8070],{"class":1026},[1002,51344,1031],{"class":1030},[1002,51346,51329],{"class":1034},[1002,51348,18256],{"class":1030},[1002,51350,51351],{"class":1008},"\u002F\u002F 4\n",[1002,51353,51354,51357,51359,51361,51363,51365],{"class":1004,"line":1272},[1002,51355,51356],{"class":1030},"truck.",[1002,51358,8070],{"class":1026},[1002,51360,1031],{"class":1030},[1002,51362,51329],{"class":1034},[1002,51364,18256],{"class":1030},[1002,51366,51367],{"class":1008},"\u002F\u002F 6\n",[925,51369,51370,51371,51374],{},"As you can see ",[1107,51372,51373],{},"map1","'s value remains intact.",[953,51376,35583],{"id":51377},"browser",[925,51379,51380,51381,51385,51386,948],{},"You can download ",[933,51382,51384],{"href":51383},"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fimmutable-js\u002Fblob\u002Fmaster\u002Fdist\u002Fimmutable.min.js","immutable.min.js"," file and reference it or you can use a ",[933,51387,51389],{"href":51388},"https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Fimmutable","CDN",[993,51391,51393],{"className":995,"code":51392,"language":997,"meta":998,"style":998},"\u003Cscript src=\"immutable.min.js\">\u003C\u002Fscript>\n\u003Cscript>\n var Immutable = require('immutable');\n\n var car = Immutable.Map({wheels:4});\n var truck = cars.set('wheels', 6);\n car.get('wheels'); \u002F\u002F 4\n truck.get('wheels'); \u002F\u002F 6\n\u003C\u002Fscript>\n",[941,51394,51395,51414,51422,51427,51431,51440,51445,51450,51455],{"__ignoreMap":998},[1002,51396,51397,51399,51401,51403,51405,51408,51410,51412],{"class":1004,"line":1005},[1002,51398,6539],{"class":1030},[1002,51400,22063],{"class":15711},[1002,51402,15242],{"class":1026},[1002,51404,2393],{"class":1015},[1002,51406,51407],{"class":1034},"\"immutable.min.js\"",[1002,51409,22081],{"class":1030},[1002,51411,22063],{"class":15711},[1002,51413,15703],{"class":1030},[1002,51415,51416,51418,51420],{"class":1004,"line":1012},[1002,51417,6539],{"class":1030},[1002,51419,22063],{"class":15711},[1002,51421,15703],{"class":1030},[1002,51423,51424],{"class":1004,"line":1047},[1002,51425,51426],{"class":1030}," var Immutable = require('immutable');\n",[1002,51428,51429],{"class":1004,"line":1054},[1002,51430,1051],{"emptyLinePlaceholder":1050},[1002,51432,51433,51436,51438],{"class":1004,"line":1060},[1002,51434,51435],{"class":1030}," var car = Immutable.Map({wheels:",[1002,51437,3837],{"class":1019},[1002,51439,2804],{"class":1030},[1002,51441,51442],{"class":1004,"line":1272},[1002,51443,51444],{"class":1030}," var truck = cars.set('wheels', 6);\n",[1002,51446,51447],{"class":1004,"line":1348},[1002,51448,51449],{"class":1030}," car.get('wheels'); \u002F\u002F 4\n",[1002,51451,51452],{"class":1004,"line":1354},[1002,51453,51454],{"class":1030}," truck.get('wheels'); \u002F\u002F 6\n",[1002,51456,51457,51459,51461],{"class":1004,"line":1360},[1002,51458,22437],{"class":1030},[1002,51460,22063],{"class":15711},[1002,51462,15703],{"class":1030},[953,51464,51466],{"id":51465},"manage-application-state-with-immutablejs","Manage Application State with Immutable.js",[925,51468,51469],{},"Let's look at how Immutable.js data structures are different from native iterable JavaScript data types and why they provide an excellent foundation on which to build your application's state.",[925,51471,51472],{},"Here we have a couple of tests. In the first test, we should see a side effect when mutating this original array. We have our application state. We've added two todos to it. We passed a reference of this state to this variable right here.",[993,51474,51476],{"className":37880,"code":51475,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n \u003Cmeta charset=\"utf-8\">\n \u003Ctitle>Learning Immutable.js\u003C\u002Ftitle>\n\n \u003Cmeta name=\"description\" content=\"Navigating and Querying an Immutable.js Map()\">\n\n \u003Clink rel=\"stylesheet\" href=\"http:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmocha\u002F2.3.3\u002Fmocha.min.css\">\u003C\u002Flink>\n \u003Cscript src=\"http:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmocha\u002F2.3.3\u002Fmocha.min.js\">\u003C\u002Fscript>\n \u003Cscript src=\"http:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fchai\u002F3.3.0\u002Fchai.js\">\u003C\u002Fscript>\n \u003Cscript src=\"http:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fimmutable\u002F3.7.5\u002Fimmutable.min.js\">\u003C\u002Fscript>\n \u003Cscript src=\"http:\u002F\u002Fcdn.rawgit.com\u002Flodash\u002Flodash\u002F3.0.1\u002Flodash.min.js\">\u003C\u002Fscript>\n\n\u003C\u002Fhead>\n\u003Cbody>\n\n \u003Cdiv id=\"mocha\">\u003C\u002Fdiv>\n \u003Cscript src=\"index.js\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,51477,51478,51488,51496,51504,51519,51532,51536,51559,51563,51588,51607,51626,51645,51664,51668,51676,51684,51688,51707,51725,51733],{"__ignoreMap":998},[1002,51479,51480,51482,51484,51486],{"class":1004,"line":1005},[1002,51481,37888],{"class":1030},[1002,51483,37891],{"class":15711},[1002,51485,21739],{"class":1026},[1002,51487,15703],{"class":1030},[1002,51489,51490,51492,51494],{"class":1004,"line":1012},[1002,51491,6539],{"class":1030},[1002,51493,383],{"class":15711},[1002,51495,15703],{"class":1030},[1002,51497,51498,51500,51502],{"class":1004,"line":1047},[1002,51499,6539],{"class":1030},[1002,51501,32092],{"class":15711},[1002,51503,15703],{"class":1030},[1002,51505,51506,51508,51510,51512,51514,51517],{"class":1004,"line":1054},[1002,51507,22427],{"class":1030},[1002,51509,37926],{"class":15711},[1002,51511,37929],{"class":1026},[1002,51513,2393],{"class":1030},[1002,51515,51516],{"class":1034},"\"utf-8\"",[1002,51518,15703],{"class":1030},[1002,51520,51521,51523,51525,51528,51530],{"class":1004,"line":1060},[1002,51522,22427],{"class":1030},[1002,51524,15029],{"class":15711},[1002,51526,51527],{"class":1030},">Learning Immutable.js\u003C\u002F",[1002,51529,15029],{"class":15711},[1002,51531,15703],{"class":1030},[1002,51533,51534],{"class":1004,"line":1272},[1002,51535,1051],{"emptyLinePlaceholder":1050},[1002,51537,51538,51540,51542,51544,51546,51549,51552,51554,51557],{"class":1004,"line":1348},[1002,51539,22427],{"class":1030},[1002,51541,37926],{"class":15711},[1002,51543,18584],{"class":1026},[1002,51545,2393],{"class":1030},[1002,51547,51548],{"class":1034},"\"description\"",[1002,51550,51551],{"class":1026}," content",[1002,51553,2393],{"class":1030},[1002,51555,51556],{"class":1034},"\"Navigating and Querying an Immutable.js Map()\"",[1002,51558,15703],{"class":1030},[1002,51560,51561],{"class":1004,"line":1354},[1002,51562,1051],{"emptyLinePlaceholder":1050},[1002,51564,51565,51567,51569,51571,51573,51575,51577,51579,51582,51584,51586],{"class":1004,"line":1360},[1002,51566,22427],{"class":1030},[1002,51568,47171],{"class":15711},[1002,51570,47174],{"class":1026},[1002,51572,2393],{"class":1030},[1002,51574,47179],{"class":1034},[1002,51576,47182],{"class":1026},[1002,51578,2393],{"class":1030},[1002,51580,51581],{"class":1034},"\"http:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmocha\u002F2.3.3\u002Fmocha.min.css\"",[1002,51583,22081],{"class":1030},[1002,51585,47171],{"class":18541},[1002,51587,15703],{"class":1030},[1002,51589,51590,51592,51594,51596,51598,51601,51603,51605],{"class":1004,"line":1366},[1002,51591,22427],{"class":1030},[1002,51593,22063],{"class":15711},[1002,51595,15242],{"class":1026},[1002,51597,2393],{"class":1030},[1002,51599,51600],{"class":1034},"\"http:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmocha\u002F2.3.3\u002Fmocha.min.js\"",[1002,51602,22081],{"class":1030},[1002,51604,22063],{"class":15711},[1002,51606,15703],{"class":1030},[1002,51608,51609,51611,51613,51615,51617,51620,51622,51624],{"class":1004,"line":1946},[1002,51610,22427],{"class":1030},[1002,51612,22063],{"class":15711},[1002,51614,15242],{"class":1026},[1002,51616,2393],{"class":1030},[1002,51618,51619],{"class":1034},"\"http:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fchai\u002F3.3.0\u002Fchai.js\"",[1002,51621,22081],{"class":1030},[1002,51623,22063],{"class":15711},[1002,51625,15703],{"class":1030},[1002,51627,51628,51630,51632,51634,51636,51639,51641,51643],{"class":1004,"line":1956},[1002,51629,22427],{"class":1030},[1002,51631,22063],{"class":15711},[1002,51633,15242],{"class":1026},[1002,51635,2393],{"class":1030},[1002,51637,51638],{"class":1034},"\"http:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fimmutable\u002F3.7.5\u002Fimmutable.min.js\"",[1002,51640,22081],{"class":1030},[1002,51642,22063],{"class":15711},[1002,51644,15703],{"class":1030},[1002,51646,51647,51649,51651,51653,51655,51658,51660,51662],{"class":1004,"line":1961},[1002,51648,22427],{"class":1030},[1002,51650,22063],{"class":15711},[1002,51652,15242],{"class":1026},[1002,51654,2393],{"class":1030},[1002,51656,51657],{"class":1034},"\"http:\u002F\u002Fcdn.rawgit.com\u002Flodash\u002Flodash\u002F3.0.1\u002Flodash.min.js\"",[1002,51659,22081],{"class":1030},[1002,51661,22063],{"class":15711},[1002,51663,15703],{"class":1030},[1002,51665,51666],{"class":1004,"line":1971},[1002,51667,1051],{"emptyLinePlaceholder":1050},[1002,51669,51670,51672,51674],{"class":1004,"line":1980},[1002,51671,22437],{"class":1030},[1002,51673,32092],{"class":15711},[1002,51675,15703],{"class":1030},[1002,51677,51678,51680,51682],{"class":1004,"line":1985},[1002,51679,6539],{"class":1030},[1002,51681,15034],{"class":15711},[1002,51683,15703],{"class":1030},[1002,51685,51686],{"class":1004,"line":1995},[1002,51687,1051],{"emptyLinePlaceholder":1050},[1002,51689,51690,51692,51694,51696,51698,51701,51703,51705],{"class":1004,"line":2006},[1002,51691,22427],{"class":1030},[1002,51693,19650],{"class":15711},[1002,51695,21489],{"class":1026},[1002,51697,2393],{"class":1030},[1002,51699,51700],{"class":1034},"\"mocha\"",[1002,51702,22081],{"class":1030},[1002,51704,19650],{"class":15711},[1002,51706,15703],{"class":1030},[1002,51708,51709,51711,51713,51715,51717,51719,51721,51723],{"class":1004,"line":2011},[1002,51710,22427],{"class":1030},[1002,51712,22063],{"class":15711},[1002,51714,15242],{"class":1026},[1002,51716,2393],{"class":1030},[1002,51718,41199],{"class":1034},[1002,51720,22081],{"class":1030},[1002,51722,22063],{"class":15711},[1002,51724,15703],{"class":1030},[1002,51726,51727,51729,51731],{"class":1004,"line":2017},[1002,51728,22437],{"class":1030},[1002,51730,15034],{"class":15711},[1002,51732,15703],{"class":1030},[1002,51734,51735,51737,51739],{"class":1004,"line":2022},[1002,51736,22437],{"class":1030},[1002,51738,383],{"class":15711},[1002,51740,15703],{"class":1030},[925,51742,51743],{},"The JavaScript file should look like the following:",[993,51745,51747],{"className":995,"code":51746,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\n\u002F\u002F this will take a position and update it at that place\nfunction mutateValue(iterable, pos, value) {\n iterable[pos] = value;\n}\n\n\u002F\u002F attempt to update state\nfunction updateState(immutable, pos, value) {\n return immutable.set(pos, value);\n}\n\ndescribe('Manage Application State with Immutable.js', function () {\n it('should see side effects when mutating original array', function () {\n var state = ['todo1', 'todo2'];\n var mutatedState = state; \u002F\u002F pass in a reference\n\n mutateValue(mutatedState, 0, 'newTodo');\n expect(state[0]).to.not.equal('todo1');\n });\n\n it('should avoid side effects when mutating original array', function () {\n var immutableState = Immutable.List(['todo1', 'todo2']);\n var immutableState2 = immutableState;\n\n updateState(immutableState2, 0, 'newTodo');\n expect(immutableState.get(0)).to.equal('todo1');\n });\n});\n\nmocha.run();\n",[941,51748,51749,51764,51776,51780,51785,51808,51817,51821,51825,51830,51852,51864,51868,51872,51887,51902,51924,51939,51943,51960,51980,51984,51988,52003,52026,52038,52042,52058,52082,52086,52090,52094],{"__ignoreMap":998},[1002,51750,51751,51754,51757,51759,51762],{"class":1004,"line":1005},[1002,51752,51753],{"class":1030},"mocha.",[1002,51755,51756],{"class":1026},"setup",[1002,51758,1031],{"class":1030},[1002,51760,51761],{"class":1034},"'bdd'",[1002,51763,1085],{"class":1030},[1002,51765,51766,51768,51771,51773],{"class":1004,"line":1012},[1002,51767,18311],{"class":1015},[1002,51769,51770],{"class":1030}," expect ",[1002,51772,2393],{"class":1015},[1002,51774,51775],{"class":1030}," chai.expect;\n",[1002,51777,51778],{"class":1004,"line":1047},[1002,51779,1051],{"emptyLinePlaceholder":1050},[1002,51781,51782],{"class":1004,"line":1054},[1002,51783,51784],{"class":1008},"\u002F\u002F this will take a position and update it at that place\n",[1002,51786,51787,51789,51792,51794,51797,51799,51802,51804,51806],{"class":1004,"line":1060},[1002,51788,6965],{"class":1015},[1002,51790,51791],{"class":1026}," mutateValue",[1002,51793,1031],{"class":1030},[1002,51795,51796],{"class":2378},"iterable",[1002,51798,1251],{"class":1030},[1002,51800,51801],{"class":2378},"pos",[1002,51803,1251],{"class":1030},[1002,51805,5047],{"class":2378},[1002,51807,2382],{"class":1030},[1002,51809,51810,51813,51815],{"class":1004,"line":1272},[1002,51811,51812],{"class":1030}," iterable[pos] ",[1002,51814,2393],{"class":1015},[1002,51816,5067],{"class":1030},[1002,51818,51819],{"class":1004,"line":1348},[1002,51820,1170],{"class":1030},[1002,51822,51823],{"class":1004,"line":1354},[1002,51824,1051],{"emptyLinePlaceholder":1050},[1002,51826,51827],{"class":1004,"line":1360},[1002,51828,51829],{"class":1008},"\u002F\u002F attempt to update state\n",[1002,51831,51832,51834,51837,51839,51842,51844,51846,51848,51850],{"class":1004,"line":1366},[1002,51833,6965],{"class":1015},[1002,51835,51836],{"class":1026}," updateState",[1002,51838,1031],{"class":1030},[1002,51840,51841],{"class":2378},"immutable",[1002,51843,1251],{"class":1030},[1002,51845,51801],{"class":2378},[1002,51847,1251],{"class":1030},[1002,51849,5047],{"class":2378},[1002,51851,2382],{"class":1030},[1002,51853,51854,51856,51859,51861],{"class":1004,"line":1946},[1002,51855,15066],{"class":1015},[1002,51857,51858],{"class":1030}," immutable.",[1002,51860,40544],{"class":1026},[1002,51862,51863],{"class":1030},"(pos, value);\n",[1002,51865,51866],{"class":1004,"line":1956},[1002,51867,1170],{"class":1030},[1002,51869,51870],{"class":1004,"line":1961},[1002,51871,1051],{"emptyLinePlaceholder":1050},[1002,51873,51874,51876,51878,51881,51883,51885],{"class":1004,"line":1971},[1002,51875,12742],{"class":1026},[1002,51877,1031],{"class":1030},[1002,51879,51880],{"class":1034},"'Manage Application State with Immutable.js'",[1002,51882,1251],{"class":1030},[1002,51884,6965],{"class":1015},[1002,51886,9772],{"class":1030},[1002,51888,51889,51891,51893,51896,51898,51900],{"class":1004,"line":1980},[1002,51890,34260],{"class":1026},[1002,51892,1031],{"class":1030},[1002,51894,51895],{"class":1034},"'should see side effects when mutating original array'",[1002,51897,1251],{"class":1030},[1002,51899,6965],{"class":1015},[1002,51901,9772],{"class":1030},[1002,51903,51904,51907,51910,51912,51914,51917,51919,51922],{"class":1004,"line":1985},[1002,51905,51906],{"class":1015}," var",[1002,51908,51909],{"class":1030}," state ",[1002,51911,2393],{"class":1015},[1002,51913,1897],{"class":1030},[1002,51915,51916],{"class":1034},"'todo1'",[1002,51918,1251],{"class":1030},[1002,51920,51921],{"class":1034},"'todo2'",[1002,51923,6754],{"class":1030},[1002,51925,51926,51928,51931,51933,51936],{"class":1004,"line":1995},[1002,51927,51906],{"class":1015},[1002,51929,51930],{"class":1030}," mutatedState ",[1002,51932,2393],{"class":1015},[1002,51934,51935],{"class":1030}," state; ",[1002,51937,51938],{"class":1008},"\u002F\u002F pass in a reference\n",[1002,51940,51941],{"class":1004,"line":2006},[1002,51942,1051],{"emptyLinePlaceholder":1050},[1002,51944,51945,51948,51951,51953,51955,51958],{"class":1004,"line":2011},[1002,51946,51947],{"class":1026}," mutateValue",[1002,51949,51950],{"class":1030},"(mutatedState, ",[1002,51952,5867],{"class":1019},[1002,51954,1251],{"class":1030},[1002,51956,51957],{"class":1034},"'newTodo'",[1002,51959,1085],{"class":1030},[1002,51961,51962,51964,51967,51969,51972,51974,51976,51978],{"class":1004,"line":2017},[1002,51963,34298],{"class":1026},[1002,51965,51966],{"class":1030},"(state[",[1002,51968,5867],{"class":1019},[1002,51970,51971],{"class":1030},"]).to.not.",[1002,51973,38558],{"class":1026},[1002,51975,1031],{"class":1030},[1002,51977,51916],{"class":1034},[1002,51979,1085],{"class":1030},[1002,51981,51982],{"class":1004,"line":2022},[1002,51983,19836],{"class":1030},[1002,51985,51986],{"class":1004,"line":2442},[1002,51987,1051],{"emptyLinePlaceholder":1050},[1002,51989,51990,51992,51994,51997,51999,52001],{"class":1004,"line":2466},[1002,51991,34260],{"class":1026},[1002,51993,1031],{"class":1030},[1002,51995,51996],{"class":1034},"'should avoid side effects when mutating original array'",[1002,51998,1251],{"class":1030},[1002,52000,6965],{"class":1015},[1002,52002,9772],{"class":1030},[1002,52004,52005,52007,52010,52012,52014,52016,52018,52020,52022,52024],{"class":1004,"line":2471},[1002,52006,51906],{"class":1015},[1002,52008,52009],{"class":1030}," immutableState ",[1002,52011,2393],{"class":1015},[1002,52013,51301],{"class":1030},[1002,52015,23271],{"class":1026},[1002,52017,30910],{"class":1030},[1002,52019,51916],{"class":1034},[1002,52021,1251],{"class":1030},[1002,52023,51921],{"class":1034},[1002,52025,29611],{"class":1030},[1002,52027,52028,52030,52033,52035],{"class":1004,"line":2476},[1002,52029,51906],{"class":1015},[1002,52031,52032],{"class":1030}," immutableState2 ",[1002,52034,2393],{"class":1015},[1002,52036,52037],{"class":1030}," immutableState;\n",[1002,52039,52040],{"class":1004,"line":2481},[1002,52041,1051],{"emptyLinePlaceholder":1050},[1002,52043,52044,52047,52050,52052,52054,52056],{"class":1004,"line":2491},[1002,52045,52046],{"class":1026}," updateState",[1002,52048,52049],{"class":1030},"(immutableState2, ",[1002,52051,5867],{"class":1019},[1002,52053,1251],{"class":1030},[1002,52055,51957],{"class":1034},[1002,52057,1085],{"class":1030},[1002,52059,52060,52062,52065,52067,52069,52071,52074,52076,52078,52080],{"class":1004,"line":2502},[1002,52061,34298],{"class":1026},[1002,52063,52064],{"class":1030},"(immutableState.",[1002,52066,8070],{"class":1026},[1002,52068,1031],{"class":1030},[1002,52070,5867],{"class":1019},[1002,52072,52073],{"class":1030},")).to.",[1002,52075,38558],{"class":1026},[1002,52077,1031],{"class":1030},[1002,52079,51916],{"class":1034},[1002,52081,1085],{"class":1030},[1002,52083,52084],{"class":1004,"line":2513},[1002,52085,19836],{"class":1030},[1002,52087,52088],{"class":1004,"line":2535},[1002,52089,2804],{"class":1030},[1002,52091,52092],{"class":1004,"line":2557},[1002,52093,1051],{"emptyLinePlaceholder":1050},[1002,52095,52096,52098,52100],{"class":1004,"line":2562},[1002,52097,51753],{"class":1030},[1002,52099,2061],{"class":1026},[1002,52101,1428],{"class":1030},[925,52103,52104,52105,52108,52109,52112,52113,948],{},"In the second test we will go ahead and update the state and see what happens. We'll do the same thing, ",[1107,52106,52107],{},"newTodo",", and see what happens. We should expect, just like the first test, that ",[1107,52110,52111],{},"immutableState",", the first one, .get(0), should equal ",[1107,52114,52107],{},[953,52116,52118],{"id":52117},"modifying-an-immutablejs-map","Modifying an Immutable.js Map",[925,52120,52121],{},"Let's look at the methods that modify an Immutable Map.",[1530,52123,52124,52126,52129,52132,52134],{},[974,52125,40544],{},[974,52127,52128],{},"delete",[974,52130,52131],{},"clear",[974,52133,41946],{},[974,52135,52136],{},"merge",[925,52138,52139],{},"To demonstrate the use of these functions, let's look at an example.",[993,52141,52143],{"className":995,"code":52142,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\nvar Todo = function (title, text, completed) {\n this.id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);\n this.title = title;\n this.text = text;\n this.completed = completed;\n};\n\nfunction addTodo(todos, todo) {\n return todos.set(todo.id, todo);\n}\n\nfunction removeTodo(todos, todo) {\n return todos.delete(todo.id, todo);\n}\n\nfunction updateTodo(todos, todo) {\n return todos.update(todo.id, function (todo) {\n return todo;\n });\n}\n\nfunction mergeTodos(todos, todos2) {\n return todos.merge(todos2);\n}\n\nfunction clearAll(todos) {\n return todos.clear();\n}\n\ndescribe('Modifying an Immutable.js Map()', function () {\n it('should add todo to state', function () {\n var todo = new Todo('Todo 1', \"I'm a todo!\", false);\n\n var todos = Immutable.Map();\n todos = addTodo(todos, todo);\n\n expect(todos.get(todo.id)).to.equal(todo);\n });\n\n it('should remove todo from state', function () {\n var todo = new Todo('Todo 1', \"I'm a todo!\", false);\n\n var todos = Immutable.Map();\n todos = addTodo(todos, todo);\n\n expect(todos.get(todo.id)).to.equal(todo);\n\n todos = removeTodo(todos, todo);\n expect(todos.get(todo.id)).to.be.undefined;\n });\n\n it('should update todo', function () {\n var todo = new Todo('Todo 1', \"I'm a todo!\", false);\n\n var todos = Immutable.Map();\n todos = addTodo(todos, todo);\n\n todo.title = 'New Title';\n\n todos = updateTodo(todos, todo);\n expect(todos.get(todo.id).title).to.equal('New Title');\n });\n\n it('should remove all todos', function () {\n var todos = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(todos, new Todo('Todo ' + index, \"I'm a todo!\", false));\n });\n\n expect(todos.size).to.equal(10);\n\n todos = clearAll(todos);\n expect(todos.size).to.equal(0);\n });\n\n it('should merge todos', function () {\n var todos = Immutable.Map();\n var todos2 = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(todos, new Todo('Todo ' + index, \"I'm a todo!\", false));\n });\n\n _.each(_.range(10), function (index) {\n todos2 = addTodo(todos2, new Todo('Todo ' + index, \"I'm a todo!\", false));\n });\n\n todos = mergeTodos(todos, todos2);\n expect(todos.size).to.equal(20);\n });\n});\n\nmocha.run();\n",[941,52144,52145,52157,52167,52171,52197,52245,52257,52269,52281,52285,52289,52308,52320,52324,52328,52345,52355,52359,52363,52380,52399,52406,52410,52414,52418,52436,52447,52451,52455,52468,52478,52482,52486,52501,52516,52545,52549,52564,52576,52580,52597,52601,52605,52620,52646,52650,52664,52674,52678,52692,52696,52706,52717,52721,52725,52740,52766,52770,52784,52794,52798,52810,52814,52824,52844,52848,52852,52867,52881,52885,52911,52945,52949,52953,52968,52972,52983,52997,53001,53005,53020,53034,53049,53053,53077,53107,53111,53115,53139,53171,53175,53179,53190,53204,53208,53212,53216],{"__ignoreMap":998},[1002,52146,52147,52149,52151,52153,52155],{"class":1004,"line":1005},[1002,52148,51753],{"class":1030},[1002,52150,51756],{"class":1026},[1002,52152,1031],{"class":1030},[1002,52154,51761],{"class":1034},[1002,52156,1085],{"class":1030},[1002,52158,52159,52161,52163,52165],{"class":1004,"line":1012},[1002,52160,18311],{"class":1015},[1002,52162,51770],{"class":1030},[1002,52164,2393],{"class":1015},[1002,52166,51775],{"class":1030},[1002,52168,52169],{"class":1004,"line":1047},[1002,52170,1051],{"emptyLinePlaceholder":1050},[1002,52172,52173,52175,52178,52180,52182,52184,52186,52188,52190,52192,52195],{"class":1004,"line":1054},[1002,52174,18311],{"class":1015},[1002,52176,52177],{"class":1026}," Todo",[1002,52179,1023],{"class":1015},[1002,52181,8457],{"class":1015},[1002,52183,6513],{"class":1030},[1002,52185,15029],{"class":2378},[1002,52187,1251],{"class":1030},[1002,52189,24241],{"class":2378},[1002,52191,1251],{"class":1030},[1002,52193,52194],{"class":2378},"completed",[1002,52196,2382],{"class":1030},[1002,52198,52199,52201,52204,52206,52208,52211,52213,52215,52217,52219,52221,52224,52227,52229,52231,52234,52236,52238,52240,52243],{"class":1004,"line":1060},[1002,52200,39364],{"class":1019},[1002,52202,52203],{"class":1030},".id ",[1002,52205,2393],{"class":1015},[1002,52207,6513],{"class":1030},[1002,52209,52210],{"class":1015},"+new",[1002,52212,31486],{"class":1026},[1002,52214,10191],{"class":1030},[1002,52216,5064],{"class":1015},[1002,52218,4673],{"class":1030},[1002,52220,4676],{"class":1026},[1002,52222,52223],{"class":1030},"(Math.",[1002,52225,52226],{"class":1026},"random",[1002,52228,10191],{"class":1030},[1002,52230,4703],{"class":1015},[1002,52232,52233],{"class":1019}," 999999",[1002,52235,21297],{"class":1030},[1002,52237,15085],{"class":1026},[1002,52239,1031],{"class":1030},[1002,52241,52242],{"class":1019},"36",[1002,52244,1085],{"class":1030},[1002,52246,52247,52249,52252,52254],{"class":1004,"line":1272},[1002,52248,39364],{"class":1019},[1002,52250,52251],{"class":1030},".title ",[1002,52253,2393],{"class":1015},[1002,52255,52256],{"class":1030}," title;\n",[1002,52258,52259,52261,52264,52266],{"class":1004,"line":1348},[1002,52260,39364],{"class":1019},[1002,52262,52263],{"class":1030},".text ",[1002,52265,2393],{"class":1015},[1002,52267,52268],{"class":1030}," text;\n",[1002,52270,52271,52273,52276,52278],{"class":1004,"line":1354},[1002,52272,39364],{"class":1019},[1002,52274,52275],{"class":1030},".completed ",[1002,52277,2393],{"class":1015},[1002,52279,52280],{"class":1030}," completed;\n",[1002,52282,52283],{"class":1004,"line":1360},[1002,52284,1517],{"class":1030},[1002,52286,52287],{"class":1004,"line":1366},[1002,52288,1051],{"emptyLinePlaceholder":1050},[1002,52290,52291,52293,52296,52298,52301,52303,52306],{"class":1004,"line":1946},[1002,52292,6965],{"class":1015},[1002,52294,52295],{"class":1026}," addTodo",[1002,52297,1031],{"class":1030},[1002,52299,52300],{"class":2378},"todos",[1002,52302,1251],{"class":1030},[1002,52304,52305],{"class":2378},"todo",[1002,52307,2382],{"class":1030},[1002,52309,52310,52312,52315,52317],{"class":1004,"line":1956},[1002,52311,15066],{"class":1015},[1002,52313,52314],{"class":1030}," todos.",[1002,52316,40544],{"class":1026},[1002,52318,52319],{"class":1030},"(todo.id, todo);\n",[1002,52321,52322],{"class":1004,"line":1961},[1002,52323,1170],{"class":1030},[1002,52325,52326],{"class":1004,"line":1971},[1002,52327,1051],{"emptyLinePlaceholder":1050},[1002,52329,52330,52332,52335,52337,52339,52341,52343],{"class":1004,"line":1980},[1002,52331,6965],{"class":1015},[1002,52333,52334],{"class":1026}," removeTodo",[1002,52336,1031],{"class":1030},[1002,52338,52300],{"class":2378},[1002,52340,1251],{"class":1030},[1002,52342,52305],{"class":2378},[1002,52344,2382],{"class":1030},[1002,52346,52347,52349,52351,52353],{"class":1004,"line":1985},[1002,52348,15066],{"class":1015},[1002,52350,52314],{"class":1030},[1002,52352,52128],{"class":1026},[1002,52354,52319],{"class":1030},[1002,52356,52357],{"class":1004,"line":1995},[1002,52358,1170],{"class":1030},[1002,52360,52361],{"class":1004,"line":2006},[1002,52362,1051],{"emptyLinePlaceholder":1050},[1002,52364,52365,52367,52370,52372,52374,52376,52378],{"class":1004,"line":2011},[1002,52366,6965],{"class":1015},[1002,52368,52369],{"class":1026}," updateTodo",[1002,52371,1031],{"class":1030},[1002,52373,52300],{"class":2378},[1002,52375,1251],{"class":1030},[1002,52377,52305],{"class":2378},[1002,52379,2382],{"class":1030},[1002,52381,52382,52384,52386,52388,52391,52393,52395,52397],{"class":1004,"line":2017},[1002,52383,15066],{"class":1015},[1002,52385,52314],{"class":1030},[1002,52387,41946],{"class":1026},[1002,52389,52390],{"class":1030},"(todo.id, ",[1002,52392,6965],{"class":1015},[1002,52394,6513],{"class":1030},[1002,52396,52305],{"class":2378},[1002,52398,2382],{"class":1030},[1002,52400,52401,52403],{"class":1004,"line":2022},[1002,52402,2687],{"class":1015},[1002,52404,52405],{"class":1030}," todo;\n",[1002,52407,52408],{"class":1004,"line":2442},[1002,52409,19836],{"class":1030},[1002,52411,52412],{"class":1004,"line":2466},[1002,52413,1170],{"class":1030},[1002,52415,52416],{"class":1004,"line":2471},[1002,52417,1051],{"emptyLinePlaceholder":1050},[1002,52419,52420,52422,52425,52427,52429,52431,52434],{"class":1004,"line":2476},[1002,52421,6965],{"class":1015},[1002,52423,52424],{"class":1026}," mergeTodos",[1002,52426,1031],{"class":1030},[1002,52428,52300],{"class":2378},[1002,52430,1251],{"class":1030},[1002,52432,52433],{"class":2378},"todos2",[1002,52435,2382],{"class":1030},[1002,52437,52438,52440,52442,52444],{"class":1004,"line":2481},[1002,52439,15066],{"class":1015},[1002,52441,52314],{"class":1030},[1002,52443,52136],{"class":1026},[1002,52445,52446],{"class":1030},"(todos2);\n",[1002,52448,52449],{"class":1004,"line":2491},[1002,52450,1170],{"class":1030},[1002,52452,52453],{"class":1004,"line":2502},[1002,52454,1051],{"emptyLinePlaceholder":1050},[1002,52456,52457,52459,52462,52464,52466],{"class":1004,"line":2513},[1002,52458,6965],{"class":1015},[1002,52460,52461],{"class":1026}," clearAll",[1002,52463,1031],{"class":1030},[1002,52465,52300],{"class":2378},[1002,52467,2382],{"class":1030},[1002,52469,52470,52472,52474,52476],{"class":1004,"line":2535},[1002,52471,15066],{"class":1015},[1002,52473,52314],{"class":1030},[1002,52475,52131],{"class":1026},[1002,52477,1428],{"class":1030},[1002,52479,52480],{"class":1004,"line":2557},[1002,52481,1170],{"class":1030},[1002,52483,52484],{"class":1004,"line":2562},[1002,52485,1051],{"emptyLinePlaceholder":1050},[1002,52487,52488,52490,52492,52495,52497,52499],{"class":1004,"line":2567},[1002,52489,12742],{"class":1026},[1002,52491,1031],{"class":1030},[1002,52493,52494],{"class":1034},"'Modifying an Immutable.js Map()'",[1002,52496,1251],{"class":1030},[1002,52498,6965],{"class":1015},[1002,52500,9772],{"class":1030},[1002,52502,52503,52505,52507,52510,52512,52514],{"class":1004,"line":2572},[1002,52504,34260],{"class":1026},[1002,52506,1031],{"class":1030},[1002,52508,52509],{"class":1034},"'should add todo to state'",[1002,52511,1251],{"class":1030},[1002,52513,6965],{"class":1015},[1002,52515,9772],{"class":1030},[1002,52517,52518,52520,52523,52525,52527,52529,52531,52534,52536,52539,52541,52543],{"class":1004,"line":2582},[1002,52519,51906],{"class":1015},[1002,52521,52522],{"class":1030}," todo ",[1002,52524,2393],{"class":1015},[1002,52526,2690],{"class":1015},[1002,52528,52177],{"class":1026},[1002,52530,1031],{"class":1030},[1002,52532,52533],{"class":1034},"'Todo 1'",[1002,52535,1251],{"class":1030},[1002,52537,52538],{"class":1034},"\"I'm a todo!\"",[1002,52540,1251],{"class":1030},[1002,52542,19341],{"class":1019},[1002,52544,1085],{"class":1030},[1002,52546,52547],{"class":1004,"line":2594},[1002,52548,1051],{"emptyLinePlaceholder":1050},[1002,52550,52551,52553,52556,52558,52560,52562],{"class":1004,"line":2603},[1002,52552,51906],{"class":1015},[1002,52554,52555],{"class":1030}," todos ",[1002,52557,2393],{"class":1015},[1002,52559,51301],{"class":1030},[1002,52561,32239],{"class":1026},[1002,52563,1428],{"class":1030},[1002,52565,52566,52569,52571,52573],{"class":1004,"line":2619},[1002,52567,52568],{"class":1030}," todos ",[1002,52570,2393],{"class":1015},[1002,52572,52295],{"class":1026},[1002,52574,52575],{"class":1030},"(todos, todo);\n",[1002,52577,52578],{"class":1004,"line":2633},[1002,52579,1051],{"emptyLinePlaceholder":1050},[1002,52581,52582,52584,52587,52589,52592,52594],{"class":1004,"line":2641},[1002,52583,34298],{"class":1026},[1002,52585,52586],{"class":1030},"(todos.",[1002,52588,8070],{"class":1026},[1002,52590,52591],{"class":1030},"(todo.id)).to.",[1002,52593,38558],{"class":1026},[1002,52595,52596],{"class":1030},"(todo);\n",[1002,52598,52599],{"class":1004,"line":2655},[1002,52600,19836],{"class":1030},[1002,52602,52603],{"class":1004,"line":2667},[1002,52604,1051],{"emptyLinePlaceholder":1050},[1002,52606,52607,52609,52611,52614,52616,52618],{"class":1004,"line":2674},[1002,52608,34260],{"class":1026},[1002,52610,1031],{"class":1030},[1002,52612,52613],{"class":1034},"'should remove todo from state'",[1002,52615,1251],{"class":1030},[1002,52617,6965],{"class":1015},[1002,52619,9772],{"class":1030},[1002,52621,52622,52624,52626,52628,52630,52632,52634,52636,52638,52640,52642,52644],{"class":1004,"line":2679},[1002,52623,51906],{"class":1015},[1002,52625,52522],{"class":1030},[1002,52627,2393],{"class":1015},[1002,52629,2690],{"class":1015},[1002,52631,52177],{"class":1026},[1002,52633,1031],{"class":1030},[1002,52635,52533],{"class":1034},[1002,52637,1251],{"class":1030},[1002,52639,52538],{"class":1034},[1002,52641,1251],{"class":1030},[1002,52643,19341],{"class":1019},[1002,52645,1085],{"class":1030},[1002,52647,52648],{"class":1004,"line":2684},[1002,52649,1051],{"emptyLinePlaceholder":1050},[1002,52651,52652,52654,52656,52658,52660,52662],{"class":1004,"line":2704},[1002,52653,51906],{"class":1015},[1002,52655,52555],{"class":1030},[1002,52657,2393],{"class":1015},[1002,52659,51301],{"class":1030},[1002,52661,32239],{"class":1026},[1002,52663,1428],{"class":1030},[1002,52665,52666,52668,52670,52672],{"class":1004,"line":2709},[1002,52667,52568],{"class":1030},[1002,52669,2393],{"class":1015},[1002,52671,52295],{"class":1026},[1002,52673,52575],{"class":1030},[1002,52675,52676],{"class":1004,"line":2714},[1002,52677,1051],{"emptyLinePlaceholder":1050},[1002,52679,52680,52682,52684,52686,52688,52690],{"class":1004,"line":2719},[1002,52681,34298],{"class":1026},[1002,52683,52586],{"class":1030},[1002,52685,8070],{"class":1026},[1002,52687,52591],{"class":1030},[1002,52689,38558],{"class":1026},[1002,52691,52596],{"class":1030},[1002,52693,52694],{"class":1004,"line":2735},[1002,52695,1051],{"emptyLinePlaceholder":1050},[1002,52697,52698,52700,52702,52704],{"class":1004,"line":2740},[1002,52699,52568],{"class":1030},[1002,52701,2393],{"class":1015},[1002,52703,52334],{"class":1026},[1002,52705,52575],{"class":1030},[1002,52707,52708,52710,52712,52714],{"class":1004,"line":2759},[1002,52709,34298],{"class":1026},[1002,52711,52586],{"class":1030},[1002,52713,8070],{"class":1026},[1002,52715,52716],{"class":1030},"(todo.id)).to.be.undefined;\n",[1002,52718,52719],{"class":1004,"line":2774},[1002,52720,19836],{"class":1030},[1002,52722,52723],{"class":1004,"line":2790},[1002,52724,1051],{"emptyLinePlaceholder":1050},[1002,52726,52727,52729,52731,52734,52736,52738],{"class":1004,"line":2801},[1002,52728,34260],{"class":1026},[1002,52730,1031],{"class":1030},[1002,52732,52733],{"class":1034},"'should update todo'",[1002,52735,1251],{"class":1030},[1002,52737,6965],{"class":1015},[1002,52739,9772],{"class":1030},[1002,52741,52742,52744,52746,52748,52750,52752,52754,52756,52758,52760,52762,52764],{"class":1004,"line":2807},[1002,52743,51906],{"class":1015},[1002,52745,52522],{"class":1030},[1002,52747,2393],{"class":1015},[1002,52749,2690],{"class":1015},[1002,52751,52177],{"class":1026},[1002,52753,1031],{"class":1030},[1002,52755,52533],{"class":1034},[1002,52757,1251],{"class":1030},[1002,52759,52538],{"class":1034},[1002,52761,1251],{"class":1030},[1002,52763,19341],{"class":1019},[1002,52765,1085],{"class":1030},[1002,52767,52768],{"class":1004,"line":2812},[1002,52769,1051],{"emptyLinePlaceholder":1050},[1002,52771,52772,52774,52776,52778,52780,52782],{"class":1004,"line":2828},[1002,52773,51906],{"class":1015},[1002,52775,52555],{"class":1030},[1002,52777,2393],{"class":1015},[1002,52779,51301],{"class":1030},[1002,52781,32239],{"class":1026},[1002,52783,1428],{"class":1030},[1002,52785,52786,52788,52790,52792],{"class":1004,"line":2841},[1002,52787,52568],{"class":1030},[1002,52789,2393],{"class":1015},[1002,52791,52295],{"class":1026},[1002,52793,52575],{"class":1030},[1002,52795,52796],{"class":1004,"line":2854},[1002,52797,1051],{"emptyLinePlaceholder":1050},[1002,52799,52800,52803,52805,52808],{"class":1004,"line":2864},[1002,52801,52802],{"class":1030}," todo.title ",[1002,52804,2393],{"class":1015},[1002,52806,52807],{"class":1034}," 'New Title'",[1002,52809,1407],{"class":1030},[1002,52811,52812],{"class":1004,"line":2869},[1002,52813,1051],{"emptyLinePlaceholder":1050},[1002,52815,52816,52818,52820,52822],{"class":1004,"line":2874},[1002,52817,52568],{"class":1030},[1002,52819,2393],{"class":1015},[1002,52821,52369],{"class":1026},[1002,52823,52575],{"class":1030},[1002,52825,52826,52828,52830,52832,52835,52837,52839,52842],{"class":1004,"line":2880},[1002,52827,34298],{"class":1026},[1002,52829,52586],{"class":1030},[1002,52831,8070],{"class":1026},[1002,52833,52834],{"class":1030},"(todo.id).title).to.",[1002,52836,38558],{"class":1026},[1002,52838,1031],{"class":1030},[1002,52840,52841],{"class":1034},"'New Title'",[1002,52843,1085],{"class":1030},[1002,52845,52846],{"class":1004,"line":2903},[1002,52847,19836],{"class":1030},[1002,52849,52850],{"class":1004,"line":2909},[1002,52851,1051],{"emptyLinePlaceholder":1050},[1002,52853,52854,52856,52858,52861,52863,52865],{"class":1004,"line":2919},[1002,52855,34260],{"class":1026},[1002,52857,1031],{"class":1030},[1002,52859,52860],{"class":1034},"'should remove all todos'",[1002,52862,1251],{"class":1030},[1002,52864,6965],{"class":1015},[1002,52866,9772],{"class":1030},[1002,52868,52869,52871,52873,52875,52877,52879],{"class":1004,"line":2924},[1002,52870,51906],{"class":1015},[1002,52872,52555],{"class":1030},[1002,52874,2393],{"class":1015},[1002,52876,51301],{"class":1030},[1002,52878,32239],{"class":1026},[1002,52880,1428],{"class":1030},[1002,52882,52883],{"class":1004,"line":2944},[1002,52884,1051],{"emptyLinePlaceholder":1050},[1002,52886,52887,52890,52892,52895,52897,52899,52901,52903,52905,52907,52909],{"class":1004,"line":2950},[1002,52888,52889],{"class":1030}," _.",[1002,52891,6633],{"class":1026},[1002,52893,52894],{"class":1030},"(_.",[1002,52896,50647],{"class":1026},[1002,52898,1031],{"class":1030},[1002,52900,4818],{"class":1019},[1002,52902,38570],{"class":1030},[1002,52904,6965],{"class":1015},[1002,52906,6513],{"class":1030},[1002,52908,19458],{"class":2378},[1002,52910,2382],{"class":1030},[1002,52912,52913,52916,52918,52920,52923,52925,52927,52929,52932,52934,52937,52939,52941,52943],{"class":1004,"line":5466},[1002,52914,52915],{"class":1030}," todos ",[1002,52917,2393],{"class":1015},[1002,52919,52295],{"class":1026},[1002,52921,52922],{"class":1030},"(todos, ",[1002,52924,5654],{"class":1015},[1002,52926,52177],{"class":1026},[1002,52928,1031],{"class":1030},[1002,52930,52931],{"class":1034},"'Todo '",[1002,52933,6583],{"class":1015},[1002,52935,52936],{"class":1030}," index, ",[1002,52938,52538],{"class":1034},[1002,52940,1251],{"class":1030},[1002,52942,19341],{"class":1019},[1002,52944,5663],{"class":1030},[1002,52946,52947],{"class":1004,"line":5477},[1002,52948,8353],{"class":1030},[1002,52950,52951],{"class":1004,"line":5490},[1002,52952,1051],{"emptyLinePlaceholder":1050},[1002,52954,52955,52957,52960,52962,52964,52966],{"class":1004,"line":5495},[1002,52956,34298],{"class":1026},[1002,52958,52959],{"class":1030},"(todos.size).to.",[1002,52961,38558],{"class":1026},[1002,52963,1031],{"class":1030},[1002,52965,4818],{"class":1019},[1002,52967,1085],{"class":1030},[1002,52969,52970],{"class":1004,"line":5500},[1002,52971,1051],{"emptyLinePlaceholder":1050},[1002,52973,52974,52976,52978,52980],{"class":1004,"line":5505},[1002,52975,52568],{"class":1030},[1002,52977,2393],{"class":1015},[1002,52979,52461],{"class":1026},[1002,52981,52982],{"class":1030},"(todos);\n",[1002,52984,52985,52987,52989,52991,52993,52995],{"class":1004,"line":5515},[1002,52986,34298],{"class":1026},[1002,52988,52959],{"class":1030},[1002,52990,38558],{"class":1026},[1002,52992,1031],{"class":1030},[1002,52994,5867],{"class":1019},[1002,52996,1085],{"class":1030},[1002,52998,52999],{"class":1004,"line":5526},[1002,53000,19836],{"class":1030},[1002,53002,53003],{"class":1004,"line":5538},[1002,53004,1051],{"emptyLinePlaceholder":1050},[1002,53006,53007,53009,53011,53014,53016,53018],{"class":1004,"line":5543},[1002,53008,34260],{"class":1026},[1002,53010,1031],{"class":1030},[1002,53012,53013],{"class":1034},"'should merge todos'",[1002,53015,1251],{"class":1030},[1002,53017,6965],{"class":1015},[1002,53019,9772],{"class":1030},[1002,53021,53022,53024,53026,53028,53030,53032],{"class":1004,"line":5548},[1002,53023,51906],{"class":1015},[1002,53025,52555],{"class":1030},[1002,53027,2393],{"class":1015},[1002,53029,51301],{"class":1030},[1002,53031,32239],{"class":1026},[1002,53033,1428],{"class":1030},[1002,53035,53036,53038,53041,53043,53045,53047],{"class":1004,"line":5559},[1002,53037,51906],{"class":1015},[1002,53039,53040],{"class":1030}," todos2 ",[1002,53042,2393],{"class":1015},[1002,53044,51301],{"class":1030},[1002,53046,32239],{"class":1026},[1002,53048,1428],{"class":1030},[1002,53050,53051],{"class":1004,"line":5573},[1002,53052,1051],{"emptyLinePlaceholder":1050},[1002,53054,53055,53057,53059,53061,53063,53065,53067,53069,53071,53073,53075],{"class":1004,"line":5578},[1002,53056,52889],{"class":1030},[1002,53058,6633],{"class":1026},[1002,53060,52894],{"class":1030},[1002,53062,50647],{"class":1026},[1002,53064,1031],{"class":1030},[1002,53066,4818],{"class":1019},[1002,53068,38570],{"class":1030},[1002,53070,6965],{"class":1015},[1002,53072,6513],{"class":1030},[1002,53074,19458],{"class":2378},[1002,53076,2382],{"class":1030},[1002,53078,53079,53081,53083,53085,53087,53089,53091,53093,53095,53097,53099,53101,53103,53105],{"class":1004,"line":5583},[1002,53080,52915],{"class":1030},[1002,53082,2393],{"class":1015},[1002,53084,52295],{"class":1026},[1002,53086,52922],{"class":1030},[1002,53088,5654],{"class":1015},[1002,53090,52177],{"class":1026},[1002,53092,1031],{"class":1030},[1002,53094,52931],{"class":1034},[1002,53096,6583],{"class":1015},[1002,53098,52936],{"class":1030},[1002,53100,52538],{"class":1034},[1002,53102,1251],{"class":1030},[1002,53104,19341],{"class":1019},[1002,53106,5663],{"class":1030},[1002,53108,53109],{"class":1004,"line":5594},[1002,53110,8353],{"class":1030},[1002,53112,53113],{"class":1004,"line":5607},[1002,53114,1051],{"emptyLinePlaceholder":1050},[1002,53116,53117,53119,53121,53123,53125,53127,53129,53131,53133,53135,53137],{"class":1004,"line":5612},[1002,53118,52889],{"class":1030},[1002,53120,6633],{"class":1026},[1002,53122,52894],{"class":1030},[1002,53124,50647],{"class":1026},[1002,53126,1031],{"class":1030},[1002,53128,4818],{"class":1019},[1002,53130,38570],{"class":1030},[1002,53132,6965],{"class":1015},[1002,53134,6513],{"class":1030},[1002,53136,19458],{"class":2378},[1002,53138,2382],{"class":1030},[1002,53140,53141,53144,53146,53148,53151,53153,53155,53157,53159,53161,53163,53165,53167,53169],{"class":1004,"line":5617},[1002,53142,53143],{"class":1030}," todos2 ",[1002,53145,2393],{"class":1015},[1002,53147,52295],{"class":1026},[1002,53149,53150],{"class":1030},"(todos2, ",[1002,53152,5654],{"class":1015},[1002,53154,52177],{"class":1026},[1002,53156,1031],{"class":1030},[1002,53158,52931],{"class":1034},[1002,53160,6583],{"class":1015},[1002,53162,52936],{"class":1030},[1002,53164,52538],{"class":1034},[1002,53166,1251],{"class":1030},[1002,53168,19341],{"class":1019},[1002,53170,5663],{"class":1030},[1002,53172,53173],{"class":1004,"line":5622},[1002,53174,8353],{"class":1030},[1002,53176,53177],{"class":1004,"line":5638},[1002,53178,1051],{"emptyLinePlaceholder":1050},[1002,53180,53181,53183,53185,53187],{"class":1004,"line":5643},[1002,53182,52568],{"class":1030},[1002,53184,2393],{"class":1015},[1002,53186,52424],{"class":1026},[1002,53188,53189],{"class":1030},"(todos, todos2);\n",[1002,53191,53192,53194,53196,53198,53200,53202],{"class":1004,"line":5666},[1002,53193,34298],{"class":1026},[1002,53195,52959],{"class":1030},[1002,53197,38558],{"class":1026},[1002,53199,1031],{"class":1030},[1002,53201,4809],{"class":1019},[1002,53203,1085],{"class":1030},[1002,53205,53206],{"class":1004,"line":5686},[1002,53207,19836],{"class":1030},[1002,53209,53210],{"class":1004,"line":5705},[1002,53211,2804],{"class":1030},[1002,53213,53214],{"class":1004,"line":5724},[1002,53215,1051],{"emptyLinePlaceholder":1050},[1002,53217,53218,53220,53222],{"class":1004,"line":5737},[1002,53219,51753],{"class":1030},[1002,53221,2061],{"class":1026},[1002,53223,1428],{"class":1030},[925,53225,53226],{},"Those are four pure functions that apply the Set, Delete, Update, Merge and Clear methods to an immutable map, and return the new reference.\nThis is key, since immutable data cannot be mutated, it must return a new reference to which the application will then refer.",[953,53228,53230],{"id":53229},"querying-immutablejs-map","Querying Immutable.js Map",[925,53232,53233,53234,1251,53236,1251,53239,1251,53242,1251,53244,1251,53246,2034,53248,53250],{},"Let's find out how to query an Immutable.Map() using ",[941,53235,8070],{},[941,53237,53238],{},"getIn",[941,53240,53241],{},"has",[941,53243,13127],{},[941,53245,34303],{},[941,53247,6619],{},[941,53249,39006],{},".\nThese are powerful operators that make finding data in an object graph pain free.",[993,53252,53254],{"className":995,"code":53253,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\nfunction Todo(title, text, completed) {\n this.id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);\n this.title = title;\n this.text = text;\n this.completed = completed;\n}\n\nfunction findTodo(todos, todo) {\n return todos.find(\n function (t) {\n return t.id === todo.id;\n },\n null,\n null,\n );\n}\n\nfunction addTodo(todos, todo) {\n return todos.set(todo.id, todo);\n}\n\ndescribe('Querying an Immutable.js Map()', function () {\n it('should properly report keys', function () {\n var todo = new Todo('Todo 1', \"I'm a todo!\", false);\n\n var todos = Immutable.Map();\n todos = addTodo(todos, todo);\n\n expect(todos.get(todo.id)).to.equal(todo);\n expect(todos.has(todo.id)).to.equal(true);\n expect(todos.has('unknown key')).to.equal(false);\n });\n\n it('should properly report included values', function () {\n var todo1 = new Todo('Todo 1', \"I'm a todo!\", false);\n var todo2 = new Todo('Todo 1', \"I'm a todo!\", false);\n\n var todos = Immutable.Map();\n todos = addTodo(todos, todo1);\n\n expect(todos.includes(todo1)).to.equal(true);\n expect(todos.includes(todo2)).to.equal(false);\n });\n\n it('should find nested keys', function () {\n var todos1 = Immutable.Map();\n var todos2 = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(todos1, new Todo('Todo' + index, \"I'm a todo!\", false));\n });\n\n _.each(_.range(10), function (index) {\n todos1 = addTodo(todos2, new Todo('Todo' + index, \"I'm a todo!\", false));\n });\n\n var multipleTodoStates = Immutable.Map({\n todo1: todos1,\n todo2: todos2,\n });\n\n var todoID = todos1.first().id;\n\n expect(multipleTodoStates.getIn(['todo1', todoID], null)).to.equal(\n todos1.first(),\n );\n });\n\n it('should find todo', function () {\n var todo1 = new Todo('Todo 1', \"I'm a todo!\", false);\n var todo2 = new Todo('Todo 2', \"I'm a todo!\", false);\n\n var todos = Immutable.Map();\n todos = addTodo(todos, todo1);\n todos = addTodo(todos, todo2);\n\n expect(findTodo(todos, todo1)).to.equal(todo1);\n });\n});\n\nmocha.run();\n",[941,53255,53256,53268,53278,53282,53302,53344,53354,53364,53374,53378,53382,53399,53409,53420,53432,53436,53443,53449,53453,53457,53461,53477,53487,53491,53495,53510,53525,53551,53555,53569,53579,53583,53597,53615,53638,53642,53646,53661,53688,53715,53719,53733,53744,53748,53767,53786,53790,53794,53809,53824,53838,53842,53866,53898,53902,53906,53930,53961,53965,53969,53984,53989,53994,53998,54002,54019,54023,54047,54056,54060,54064,54068,54083,54109,54136,54140,54154,54164,54175,54179,54196,54200,54204,54208],{"__ignoreMap":998},[1002,53257,53258,53260,53262,53264,53266],{"class":1004,"line":1005},[1002,53259,51753],{"class":1030},[1002,53261,51756],{"class":1026},[1002,53263,1031],{"class":1030},[1002,53265,51761],{"class":1034},[1002,53267,1085],{"class":1030},[1002,53269,53270,53272,53274,53276],{"class":1004,"line":1012},[1002,53271,18311],{"class":1015},[1002,53273,51770],{"class":1030},[1002,53275,2393],{"class":1015},[1002,53277,51775],{"class":1030},[1002,53279,53280],{"class":1004,"line":1047},[1002,53281,1051],{"emptyLinePlaceholder":1050},[1002,53283,53284,53286,53288,53290,53292,53294,53296,53298,53300],{"class":1004,"line":1054},[1002,53285,6965],{"class":1015},[1002,53287,52177],{"class":1026},[1002,53289,1031],{"class":1030},[1002,53291,15029],{"class":2378},[1002,53293,1251],{"class":1030},[1002,53295,24241],{"class":2378},[1002,53297,1251],{"class":1030},[1002,53299,52194],{"class":2378},[1002,53301,2382],{"class":1030},[1002,53303,53304,53306,53308,53310,53312,53314,53316,53318,53320,53322,53324,53326,53328,53330,53332,53334,53336,53338,53340,53342],{"class":1004,"line":1060},[1002,53305,39364],{"class":1019},[1002,53307,52203],{"class":1030},[1002,53309,2393],{"class":1015},[1002,53311,6513],{"class":1030},[1002,53313,52210],{"class":1015},[1002,53315,31486],{"class":1026},[1002,53317,10191],{"class":1030},[1002,53319,5064],{"class":1015},[1002,53321,4673],{"class":1030},[1002,53323,4676],{"class":1026},[1002,53325,52223],{"class":1030},[1002,53327,52226],{"class":1026},[1002,53329,10191],{"class":1030},[1002,53331,4703],{"class":1015},[1002,53333,52233],{"class":1019},[1002,53335,21297],{"class":1030},[1002,53337,15085],{"class":1026},[1002,53339,1031],{"class":1030},[1002,53341,52242],{"class":1019},[1002,53343,1085],{"class":1030},[1002,53345,53346,53348,53350,53352],{"class":1004,"line":1272},[1002,53347,39364],{"class":1019},[1002,53349,52251],{"class":1030},[1002,53351,2393],{"class":1015},[1002,53353,52256],{"class":1030},[1002,53355,53356,53358,53360,53362],{"class":1004,"line":1348},[1002,53357,39364],{"class":1019},[1002,53359,52263],{"class":1030},[1002,53361,2393],{"class":1015},[1002,53363,52268],{"class":1030},[1002,53365,53366,53368,53370,53372],{"class":1004,"line":1354},[1002,53367,39364],{"class":1019},[1002,53369,52275],{"class":1030},[1002,53371,2393],{"class":1015},[1002,53373,52280],{"class":1030},[1002,53375,53376],{"class":1004,"line":1360},[1002,53377,1170],{"class":1030},[1002,53379,53380],{"class":1004,"line":1366},[1002,53381,1051],{"emptyLinePlaceholder":1050},[1002,53383,53384,53386,53389,53391,53393,53395,53397],{"class":1004,"line":1946},[1002,53385,6965],{"class":1015},[1002,53387,53388],{"class":1026}," findTodo",[1002,53390,1031],{"class":1030},[1002,53392,52300],{"class":2378},[1002,53394,1251],{"class":1030},[1002,53396,52305],{"class":2378},[1002,53398,2382],{"class":1030},[1002,53400,53401,53403,53405,53407],{"class":1004,"line":1956},[1002,53402,15066],{"class":1015},[1002,53404,52314],{"class":1030},[1002,53406,34303],{"class":1026},[1002,53408,10468],{"class":1030},[1002,53410,53411,53414,53416,53418],{"class":1004,"line":1961},[1002,53412,53413],{"class":1015}," function",[1002,53415,6513],{"class":1030},[1002,53417,44094],{"class":2378},[1002,53419,2382],{"class":1030},[1002,53421,53422,53424,53427,53429],{"class":1004,"line":1971},[1002,53423,4376],{"class":1015},[1002,53425,53426],{"class":1030}," t.id ",[1002,53428,2892],{"class":1015},[1002,53430,53431],{"class":1030}," todo.id;\n",[1002,53433,53434],{"class":1004,"line":1980},[1002,53435,15108],{"class":1030},[1002,53437,53438,53441],{"class":1004,"line":1985},[1002,53439,53440],{"class":1019}," null",[1002,53442,1143],{"class":1030},[1002,53444,53445,53447],{"class":1004,"line":1995},[1002,53446,53440],{"class":1019},[1002,53448,1143],{"class":1030},[1002,53450,53451],{"class":1004,"line":2006},[1002,53452,10503],{"class":1030},[1002,53454,53455],{"class":1004,"line":2011},[1002,53456,1170],{"class":1030},[1002,53458,53459],{"class":1004,"line":2017},[1002,53460,1051],{"emptyLinePlaceholder":1050},[1002,53462,53463,53465,53467,53469,53471,53473,53475],{"class":1004,"line":2022},[1002,53464,6965],{"class":1015},[1002,53466,52295],{"class":1026},[1002,53468,1031],{"class":1030},[1002,53470,52300],{"class":2378},[1002,53472,1251],{"class":1030},[1002,53474,52305],{"class":2378},[1002,53476,2382],{"class":1030},[1002,53478,53479,53481,53483,53485],{"class":1004,"line":2442},[1002,53480,15066],{"class":1015},[1002,53482,52314],{"class":1030},[1002,53484,40544],{"class":1026},[1002,53486,52319],{"class":1030},[1002,53488,53489],{"class":1004,"line":2466},[1002,53490,1170],{"class":1030},[1002,53492,53493],{"class":1004,"line":2471},[1002,53494,1051],{"emptyLinePlaceholder":1050},[1002,53496,53497,53499,53501,53504,53506,53508],{"class":1004,"line":2476},[1002,53498,12742],{"class":1026},[1002,53500,1031],{"class":1030},[1002,53502,53503],{"class":1034},"'Querying an Immutable.js Map()'",[1002,53505,1251],{"class":1030},[1002,53507,6965],{"class":1015},[1002,53509,9772],{"class":1030},[1002,53511,53512,53514,53516,53519,53521,53523],{"class":1004,"line":2481},[1002,53513,34260],{"class":1026},[1002,53515,1031],{"class":1030},[1002,53517,53518],{"class":1034},"'should properly report keys'",[1002,53520,1251],{"class":1030},[1002,53522,6965],{"class":1015},[1002,53524,9772],{"class":1030},[1002,53526,53527,53529,53531,53533,53535,53537,53539,53541,53543,53545,53547,53549],{"class":1004,"line":2491},[1002,53528,51906],{"class":1015},[1002,53530,52522],{"class":1030},[1002,53532,2393],{"class":1015},[1002,53534,2690],{"class":1015},[1002,53536,52177],{"class":1026},[1002,53538,1031],{"class":1030},[1002,53540,52533],{"class":1034},[1002,53542,1251],{"class":1030},[1002,53544,52538],{"class":1034},[1002,53546,1251],{"class":1030},[1002,53548,19341],{"class":1019},[1002,53550,1085],{"class":1030},[1002,53552,53553],{"class":1004,"line":2502},[1002,53554,1051],{"emptyLinePlaceholder":1050},[1002,53556,53557,53559,53561,53563,53565,53567],{"class":1004,"line":2513},[1002,53558,51906],{"class":1015},[1002,53560,52555],{"class":1030},[1002,53562,2393],{"class":1015},[1002,53564,51301],{"class":1030},[1002,53566,32239],{"class":1026},[1002,53568,1428],{"class":1030},[1002,53570,53571,53573,53575,53577],{"class":1004,"line":2535},[1002,53572,52568],{"class":1030},[1002,53574,2393],{"class":1015},[1002,53576,52295],{"class":1026},[1002,53578,52575],{"class":1030},[1002,53580,53581],{"class":1004,"line":2557},[1002,53582,1051],{"emptyLinePlaceholder":1050},[1002,53584,53585,53587,53589,53591,53593,53595],{"class":1004,"line":2562},[1002,53586,34298],{"class":1026},[1002,53588,52586],{"class":1030},[1002,53590,8070],{"class":1026},[1002,53592,52591],{"class":1030},[1002,53594,38558],{"class":1026},[1002,53596,52596],{"class":1030},[1002,53598,53599,53601,53603,53605,53607,53609,53611,53613],{"class":1004,"line":2567},[1002,53600,34298],{"class":1026},[1002,53602,52586],{"class":1030},[1002,53604,53241],{"class":1026},[1002,53606,52591],{"class":1030},[1002,53608,38558],{"class":1026},[1002,53610,1031],{"class":1030},[1002,53612,17397],{"class":1019},[1002,53614,1085],{"class":1030},[1002,53616,53617,53619,53621,53623,53625,53628,53630,53632,53634,53636],{"class":1004,"line":2572},[1002,53618,34298],{"class":1026},[1002,53620,52586],{"class":1030},[1002,53622,53241],{"class":1026},[1002,53624,1031],{"class":1030},[1002,53626,53627],{"class":1034},"'unknown key'",[1002,53629,52073],{"class":1030},[1002,53631,38558],{"class":1026},[1002,53633,1031],{"class":1030},[1002,53635,19341],{"class":1019},[1002,53637,1085],{"class":1030},[1002,53639,53640],{"class":1004,"line":2582},[1002,53641,19836],{"class":1030},[1002,53643,53644],{"class":1004,"line":2594},[1002,53645,1051],{"emptyLinePlaceholder":1050},[1002,53647,53648,53650,53652,53655,53657,53659],{"class":1004,"line":2603},[1002,53649,34260],{"class":1026},[1002,53651,1031],{"class":1030},[1002,53653,53654],{"class":1034},"'should properly report included values'",[1002,53656,1251],{"class":1030},[1002,53658,6965],{"class":1015},[1002,53660,9772],{"class":1030},[1002,53662,53663,53665,53668,53670,53672,53674,53676,53678,53680,53682,53684,53686],{"class":1004,"line":2619},[1002,53664,51906],{"class":1015},[1002,53666,53667],{"class":1030}," todo1 ",[1002,53669,2393],{"class":1015},[1002,53671,2690],{"class":1015},[1002,53673,52177],{"class":1026},[1002,53675,1031],{"class":1030},[1002,53677,52533],{"class":1034},[1002,53679,1251],{"class":1030},[1002,53681,52538],{"class":1034},[1002,53683,1251],{"class":1030},[1002,53685,19341],{"class":1019},[1002,53687,1085],{"class":1030},[1002,53689,53690,53692,53695,53697,53699,53701,53703,53705,53707,53709,53711,53713],{"class":1004,"line":2633},[1002,53691,51906],{"class":1015},[1002,53693,53694],{"class":1030}," todo2 ",[1002,53696,2393],{"class":1015},[1002,53698,2690],{"class":1015},[1002,53700,52177],{"class":1026},[1002,53702,1031],{"class":1030},[1002,53704,52533],{"class":1034},[1002,53706,1251],{"class":1030},[1002,53708,52538],{"class":1034},[1002,53710,1251],{"class":1030},[1002,53712,19341],{"class":1019},[1002,53714,1085],{"class":1030},[1002,53716,53717],{"class":1004,"line":2641},[1002,53718,1051],{"emptyLinePlaceholder":1050},[1002,53720,53721,53723,53725,53727,53729,53731],{"class":1004,"line":2655},[1002,53722,51906],{"class":1015},[1002,53724,52555],{"class":1030},[1002,53726,2393],{"class":1015},[1002,53728,51301],{"class":1030},[1002,53730,32239],{"class":1026},[1002,53732,1428],{"class":1030},[1002,53734,53735,53737,53739,53741],{"class":1004,"line":2667},[1002,53736,52568],{"class":1030},[1002,53738,2393],{"class":1015},[1002,53740,52295],{"class":1026},[1002,53742,53743],{"class":1030},"(todos, todo1);\n",[1002,53745,53746],{"class":1004,"line":2674},[1002,53747,1051],{"emptyLinePlaceholder":1050},[1002,53749,53750,53752,53754,53756,53759,53761,53763,53765],{"class":1004,"line":2679},[1002,53751,34298],{"class":1026},[1002,53753,52586],{"class":1030},[1002,53755,13127],{"class":1026},[1002,53757,53758],{"class":1030},"(todo1)).to.",[1002,53760,38558],{"class":1026},[1002,53762,1031],{"class":1030},[1002,53764,17397],{"class":1019},[1002,53766,1085],{"class":1030},[1002,53768,53769,53771,53773,53775,53778,53780,53782,53784],{"class":1004,"line":2684},[1002,53770,34298],{"class":1026},[1002,53772,52586],{"class":1030},[1002,53774,13127],{"class":1026},[1002,53776,53777],{"class":1030},"(todo2)).to.",[1002,53779,38558],{"class":1026},[1002,53781,1031],{"class":1030},[1002,53783,19341],{"class":1019},[1002,53785,1085],{"class":1030},[1002,53787,53788],{"class":1004,"line":2704},[1002,53789,19836],{"class":1030},[1002,53791,53792],{"class":1004,"line":2709},[1002,53793,1051],{"emptyLinePlaceholder":1050},[1002,53795,53796,53798,53800,53803,53805,53807],{"class":1004,"line":2714},[1002,53797,34260],{"class":1026},[1002,53799,1031],{"class":1030},[1002,53801,53802],{"class":1034},"'should find nested keys'",[1002,53804,1251],{"class":1030},[1002,53806,6965],{"class":1015},[1002,53808,9772],{"class":1030},[1002,53810,53811,53813,53816,53818,53820,53822],{"class":1004,"line":2719},[1002,53812,51906],{"class":1015},[1002,53814,53815],{"class":1030}," todos1 ",[1002,53817,2393],{"class":1015},[1002,53819,51301],{"class":1030},[1002,53821,32239],{"class":1026},[1002,53823,1428],{"class":1030},[1002,53825,53826,53828,53830,53832,53834,53836],{"class":1004,"line":2735},[1002,53827,51906],{"class":1015},[1002,53829,53040],{"class":1030},[1002,53831,2393],{"class":1015},[1002,53833,51301],{"class":1030},[1002,53835,32239],{"class":1026},[1002,53837,1428],{"class":1030},[1002,53839,53840],{"class":1004,"line":2740},[1002,53841,1051],{"emptyLinePlaceholder":1050},[1002,53843,53844,53846,53848,53850,53852,53854,53856,53858,53860,53862,53864],{"class":1004,"line":2759},[1002,53845,52889],{"class":1030},[1002,53847,6633],{"class":1026},[1002,53849,52894],{"class":1030},[1002,53851,50647],{"class":1026},[1002,53853,1031],{"class":1030},[1002,53855,4818],{"class":1019},[1002,53857,38570],{"class":1030},[1002,53859,6965],{"class":1015},[1002,53861,6513],{"class":1030},[1002,53863,19458],{"class":2378},[1002,53865,2382],{"class":1030},[1002,53867,53868,53870,53872,53874,53877,53879,53881,53883,53886,53888,53890,53892,53894,53896],{"class":1004,"line":2774},[1002,53869,52915],{"class":1030},[1002,53871,2393],{"class":1015},[1002,53873,52295],{"class":1026},[1002,53875,53876],{"class":1030},"(todos1, ",[1002,53878,5654],{"class":1015},[1002,53880,52177],{"class":1026},[1002,53882,1031],{"class":1030},[1002,53884,53885],{"class":1034},"'Todo'",[1002,53887,6583],{"class":1015},[1002,53889,52936],{"class":1030},[1002,53891,52538],{"class":1034},[1002,53893,1251],{"class":1030},[1002,53895,19341],{"class":1019},[1002,53897,5663],{"class":1030},[1002,53899,53900],{"class":1004,"line":2790},[1002,53901,8353],{"class":1030},[1002,53903,53904],{"class":1004,"line":2801},[1002,53905,1051],{"emptyLinePlaceholder":1050},[1002,53907,53908,53910,53912,53914,53916,53918,53920,53922,53924,53926,53928],{"class":1004,"line":2807},[1002,53909,52889],{"class":1030},[1002,53911,6633],{"class":1026},[1002,53913,52894],{"class":1030},[1002,53915,50647],{"class":1026},[1002,53917,1031],{"class":1030},[1002,53919,4818],{"class":1019},[1002,53921,38570],{"class":1030},[1002,53923,6965],{"class":1015},[1002,53925,6513],{"class":1030},[1002,53927,19458],{"class":2378},[1002,53929,2382],{"class":1030},[1002,53931,53932,53935,53937,53939,53941,53943,53945,53947,53949,53951,53953,53955,53957,53959],{"class":1004,"line":2812},[1002,53933,53934],{"class":1030}," todos1 ",[1002,53936,2393],{"class":1015},[1002,53938,52295],{"class":1026},[1002,53940,53150],{"class":1030},[1002,53942,5654],{"class":1015},[1002,53944,52177],{"class":1026},[1002,53946,1031],{"class":1030},[1002,53948,53885],{"class":1034},[1002,53950,6583],{"class":1015},[1002,53952,52936],{"class":1030},[1002,53954,52538],{"class":1034},[1002,53956,1251],{"class":1030},[1002,53958,19341],{"class":1019},[1002,53960,5663],{"class":1030},[1002,53962,53963],{"class":1004,"line":2828},[1002,53964,8353],{"class":1030},[1002,53966,53967],{"class":1004,"line":2841},[1002,53968,1051],{"emptyLinePlaceholder":1050},[1002,53970,53971,53973,53976,53978,53980,53982],{"class":1004,"line":2854},[1002,53972,51906],{"class":1015},[1002,53974,53975],{"class":1030}," multipleTodoStates ",[1002,53977,2393],{"class":1015},[1002,53979,51301],{"class":1030},[1002,53981,32239],{"class":1026},[1002,53983,2756],{"class":1030},[1002,53985,53986],{"class":1004,"line":2864},[1002,53987,53988],{"class":1030}," todo1: todos1,\n",[1002,53990,53991],{"class":1004,"line":2869},[1002,53992,53993],{"class":1030}," todo2: todos2,\n",[1002,53995,53996],{"class":1004,"line":2874},[1002,53997,8353],{"class":1030},[1002,53999,54000],{"class":1004,"line":2880},[1002,54001,1051],{"emptyLinePlaceholder":1050},[1002,54003,54004,54006,54009,54011,54014,54016],{"class":1004,"line":2903},[1002,54005,51906],{"class":1015},[1002,54007,54008],{"class":1030}," todoID ",[1002,54010,2393],{"class":1015},[1002,54012,54013],{"class":1030}," todos1.",[1002,54015,6619],{"class":1026},[1002,54017,54018],{"class":1030},"().id;\n",[1002,54020,54021],{"class":1004,"line":2909},[1002,54022,1051],{"emptyLinePlaceholder":1050},[1002,54024,54025,54027,54030,54032,54034,54036,54039,54041,54043,54045],{"class":1004,"line":2919},[1002,54026,34298],{"class":1026},[1002,54028,54029],{"class":1030},"(multipleTodoStates.",[1002,54031,53238],{"class":1026},[1002,54033,30910],{"class":1030},[1002,54035,51916],{"class":1034},[1002,54037,54038],{"class":1030},", todoID], ",[1002,54040,26077],{"class":1019},[1002,54042,52073],{"class":1030},[1002,54044,38558],{"class":1026},[1002,54046,10468],{"class":1030},[1002,54048,54049,54052,54054],{"class":1004,"line":2924},[1002,54050,54051],{"class":1030}," todos1.",[1002,54053,6619],{"class":1026},[1002,54055,15088],{"class":1030},[1002,54057,54058],{"class":1004,"line":2944},[1002,54059,22541],{"class":1030},[1002,54061,54062],{"class":1004,"line":2950},[1002,54063,19836],{"class":1030},[1002,54065,54066],{"class":1004,"line":5466},[1002,54067,1051],{"emptyLinePlaceholder":1050},[1002,54069,54070,54072,54074,54077,54079,54081],{"class":1004,"line":5477},[1002,54071,34260],{"class":1026},[1002,54073,1031],{"class":1030},[1002,54075,54076],{"class":1034},"'should find todo'",[1002,54078,1251],{"class":1030},[1002,54080,6965],{"class":1015},[1002,54082,9772],{"class":1030},[1002,54084,54085,54087,54089,54091,54093,54095,54097,54099,54101,54103,54105,54107],{"class":1004,"line":5490},[1002,54086,51906],{"class":1015},[1002,54088,53667],{"class":1030},[1002,54090,2393],{"class":1015},[1002,54092,2690],{"class":1015},[1002,54094,52177],{"class":1026},[1002,54096,1031],{"class":1030},[1002,54098,52533],{"class":1034},[1002,54100,1251],{"class":1030},[1002,54102,52538],{"class":1034},[1002,54104,1251],{"class":1030},[1002,54106,19341],{"class":1019},[1002,54108,1085],{"class":1030},[1002,54110,54111,54113,54115,54117,54119,54121,54123,54126,54128,54130,54132,54134],{"class":1004,"line":5495},[1002,54112,51906],{"class":1015},[1002,54114,53694],{"class":1030},[1002,54116,2393],{"class":1015},[1002,54118,2690],{"class":1015},[1002,54120,52177],{"class":1026},[1002,54122,1031],{"class":1030},[1002,54124,54125],{"class":1034},"'Todo 2'",[1002,54127,1251],{"class":1030},[1002,54129,52538],{"class":1034},[1002,54131,1251],{"class":1030},[1002,54133,19341],{"class":1019},[1002,54135,1085],{"class":1030},[1002,54137,54138],{"class":1004,"line":5500},[1002,54139,1051],{"emptyLinePlaceholder":1050},[1002,54141,54142,54144,54146,54148,54150,54152],{"class":1004,"line":5505},[1002,54143,51906],{"class":1015},[1002,54145,52555],{"class":1030},[1002,54147,2393],{"class":1015},[1002,54149,51301],{"class":1030},[1002,54151,32239],{"class":1026},[1002,54153,1428],{"class":1030},[1002,54155,54156,54158,54160,54162],{"class":1004,"line":5515},[1002,54157,52568],{"class":1030},[1002,54159,2393],{"class":1015},[1002,54161,52295],{"class":1026},[1002,54163,53743],{"class":1030},[1002,54165,54166,54168,54170,54172],{"class":1004,"line":5526},[1002,54167,52568],{"class":1030},[1002,54169,2393],{"class":1015},[1002,54171,52295],{"class":1026},[1002,54173,54174],{"class":1030},"(todos, todo2);\n",[1002,54176,54177],{"class":1004,"line":5538},[1002,54178,1051],{"emptyLinePlaceholder":1050},[1002,54180,54181,54183,54185,54188,54191,54193],{"class":1004,"line":5543},[1002,54182,34298],{"class":1026},[1002,54184,1031],{"class":1030},[1002,54186,54187],{"class":1026},"findTodo",[1002,54189,54190],{"class":1030},"(todos, todo1)).to.",[1002,54192,38558],{"class":1026},[1002,54194,54195],{"class":1030},"(todo1);\n",[1002,54197,54198],{"class":1004,"line":5548},[1002,54199,19836],{"class":1030},[1002,54201,54202],{"class":1004,"line":5559},[1002,54203,2804],{"class":1030},[1002,54205,54206],{"class":1004,"line":5573},[1002,54207,1051],{"emptyLinePlaceholder":1050},[1002,54209,54210,54212,54214],{"class":1004,"line":5578},[1002,54211,51753],{"class":1030},[1002,54213,2061],{"class":1026},[1002,54215,1428],{"class":1030},[925,54217,54218],{},"Now you've learned how you can query an unordered Immutable Map with a few useful methods, let's move on to the next part, iterarting an immutable map.",[953,54220,54222],{"id":54221},"iterating-over-an-immutablejs-map","Iterating Over an Immutable.js Map",[925,54224,54225],{},"Immutable.js provides several methods to iterate over an Immutable.Map(). These also apply to the other immutable structures found within the Immutable.js family, such as Set and List. The primary methods are map and forEach, but we will also cover filter and groupBy.",[993,54227,54229],{"className":995,"code":54228,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\nfunction Todo(title, text, completed) {\n this.id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);\n this.title = title;\n this.text = text;\n this.completed = completed;\n}\n\nfunction getTodoTexts(todos) {\n return todos.map(function (todo) {\n return todo.text;\n });\n}\n\nfunction markAllTodosAsComplete(todos) {\n return todos.forEach(function (todo) {\n todo.completed = true;\n });\n}\n\nfunction getCompletedTodos(todos) {\n return todos.filter(function (todo) {\n return todo.completed;\n });\n}\n\nfunction groupTodosByCompleted(todos) {\n return todos.groupBy(function (todo) {\n return todo.completed;\n });\n}\n\nfunction addTodo(todos, todo) {\n return todos.set(todo.id, todo);\n}\n\ndescribe('Iterating over an Immutable.js Map()', function () {\n it('should convert all todos into a map() of titles', function () {\n var todos = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(todos, new Todo('Todo' + index, \"I'm a todo!\", false));\n });\n\n var todoTexts = getTodoTexts(todos);\n\n expect(todoTexts.first()).to.equal(\"I'm a todo!\");\n });\n\n it('should filter todos', function () {\n var todos = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(\n todos,\n new Todo('Todo' + index, \"I'm a todo!\", index % 2 === 0),\n );\n });\n\n filteredTodos = getCompletedTodos(todos);\n\n expect(filteredTodos.size).to.equal(5);\n });\n\n it('should mark all todos completed', function () {\n var todos = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(todos, new Todo('Todo' + index, \"I'm a todo!\", false));\n });\n\n \u002F\u002F This has the chance for side effects\n markAllTodosAsComplete(todos);\n\n _.each(todos.toArray(), function (todo) {\n expect(todo.completed).to.be.true;\n });\n });\n\n it('should group todos by completed boolean', function () {\n var todos = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(\n todos,\n new Todo('Todo' + index, \"I'm a todo!\", index % 2 === 0),\n );\n });\n\n groupedTodos = groupTodosByCompleted(todos);\n\n expect(groupedTodos.get(true).size).to.equal(5);\n expect(groupedTodos.get(false).size).to.equal(5);\n });\n});\n\nmocha.run();\n",[941,54230,54231,54243,54253,54257,54277,54319,54329,54339,54349,54353,54357,54370,54388,54395,54399,54403,54407,54420,54438,54449,54453,54457,54461,54474,54492,54499,54503,54507,54511,54524,54543,54549,54553,54557,54561,54577,54587,54591,54595,54610,54625,54639,54643,54667,54697,54701,54705,54718,54722,54742,54746,54750,54765,54779,54783,54807,54817,54822,54852,54856,54860,54864,54875,54879,54894,54898,54902,54917,54931,54935,54959,54989,54993,54997,55002,55009,55013,55034,55042,55046,55050,55054,55069,55083,55087,55111,55121,55125,55153,55157,55161,55165,55176,55180,55204,55226,55230,55234,55238],{"__ignoreMap":998},[1002,54232,54233,54235,54237,54239,54241],{"class":1004,"line":1005},[1002,54234,51753],{"class":1030},[1002,54236,51756],{"class":1026},[1002,54238,1031],{"class":1030},[1002,54240,51761],{"class":1034},[1002,54242,1085],{"class":1030},[1002,54244,54245,54247,54249,54251],{"class":1004,"line":1012},[1002,54246,18311],{"class":1015},[1002,54248,51770],{"class":1030},[1002,54250,2393],{"class":1015},[1002,54252,51775],{"class":1030},[1002,54254,54255],{"class":1004,"line":1047},[1002,54256,1051],{"emptyLinePlaceholder":1050},[1002,54258,54259,54261,54263,54265,54267,54269,54271,54273,54275],{"class":1004,"line":1054},[1002,54260,6965],{"class":1015},[1002,54262,52177],{"class":1026},[1002,54264,1031],{"class":1030},[1002,54266,15029],{"class":2378},[1002,54268,1251],{"class":1030},[1002,54270,24241],{"class":2378},[1002,54272,1251],{"class":1030},[1002,54274,52194],{"class":2378},[1002,54276,2382],{"class":1030},[1002,54278,54279,54281,54283,54285,54287,54289,54291,54293,54295,54297,54299,54301,54303,54305,54307,54309,54311,54313,54315,54317],{"class":1004,"line":1060},[1002,54280,39364],{"class":1019},[1002,54282,52203],{"class":1030},[1002,54284,2393],{"class":1015},[1002,54286,6513],{"class":1030},[1002,54288,52210],{"class":1015},[1002,54290,31486],{"class":1026},[1002,54292,10191],{"class":1030},[1002,54294,5064],{"class":1015},[1002,54296,4673],{"class":1030},[1002,54298,4676],{"class":1026},[1002,54300,52223],{"class":1030},[1002,54302,52226],{"class":1026},[1002,54304,10191],{"class":1030},[1002,54306,4703],{"class":1015},[1002,54308,52233],{"class":1019},[1002,54310,21297],{"class":1030},[1002,54312,15085],{"class":1026},[1002,54314,1031],{"class":1030},[1002,54316,52242],{"class":1019},[1002,54318,1085],{"class":1030},[1002,54320,54321,54323,54325,54327],{"class":1004,"line":1272},[1002,54322,39364],{"class":1019},[1002,54324,52251],{"class":1030},[1002,54326,2393],{"class":1015},[1002,54328,52256],{"class":1030},[1002,54330,54331,54333,54335,54337],{"class":1004,"line":1348},[1002,54332,39364],{"class":1019},[1002,54334,52263],{"class":1030},[1002,54336,2393],{"class":1015},[1002,54338,52268],{"class":1030},[1002,54340,54341,54343,54345,54347],{"class":1004,"line":1354},[1002,54342,39364],{"class":1019},[1002,54344,52275],{"class":1030},[1002,54346,2393],{"class":1015},[1002,54348,52280],{"class":1030},[1002,54350,54351],{"class":1004,"line":1360},[1002,54352,1170],{"class":1030},[1002,54354,54355],{"class":1004,"line":1366},[1002,54356,1051],{"emptyLinePlaceholder":1050},[1002,54358,54359,54361,54364,54366,54368],{"class":1004,"line":1946},[1002,54360,6965],{"class":1015},[1002,54362,54363],{"class":1026}," getTodoTexts",[1002,54365,1031],{"class":1030},[1002,54367,52300],{"class":2378},[1002,54369,2382],{"class":1030},[1002,54371,54372,54374,54376,54378,54380,54382,54384,54386],{"class":1004,"line":1956},[1002,54373,15066],{"class":1015},[1002,54375,52314],{"class":1030},[1002,54377,19444],{"class":1026},[1002,54379,1031],{"class":1030},[1002,54381,6965],{"class":1015},[1002,54383,6513],{"class":1030},[1002,54385,52305],{"class":2378},[1002,54387,2382],{"class":1030},[1002,54389,54390,54392],{"class":1004,"line":1961},[1002,54391,2687],{"class":1015},[1002,54393,54394],{"class":1030}," todo.text;\n",[1002,54396,54397],{"class":1004,"line":1971},[1002,54398,19836],{"class":1030},[1002,54400,54401],{"class":1004,"line":1980},[1002,54402,1170],{"class":1030},[1002,54404,54405],{"class":1004,"line":1985},[1002,54406,1051],{"emptyLinePlaceholder":1050},[1002,54408,54409,54411,54414,54416,54418],{"class":1004,"line":1995},[1002,54410,6965],{"class":1015},[1002,54412,54413],{"class":1026}," markAllTodosAsComplete",[1002,54415,1031],{"class":1030},[1002,54417,52300],{"class":2378},[1002,54419,2382],{"class":1030},[1002,54421,54422,54424,54426,54428,54430,54432,54434,54436],{"class":1004,"line":2006},[1002,54423,15066],{"class":1015},[1002,54425,52314],{"class":1030},[1002,54427,8408],{"class":1026},[1002,54429,1031],{"class":1030},[1002,54431,6965],{"class":1015},[1002,54433,6513],{"class":1030},[1002,54435,52305],{"class":2378},[1002,54437,2382],{"class":1030},[1002,54439,54440,54443,54445,54447],{"class":1004,"line":2011},[1002,54441,54442],{"class":1030}," todo.completed ",[1002,54444,2393],{"class":1015},[1002,54446,9687],{"class":1019},[1002,54448,1407],{"class":1030},[1002,54450,54451],{"class":1004,"line":2017},[1002,54452,19836],{"class":1030},[1002,54454,54455],{"class":1004,"line":2022},[1002,54456,1170],{"class":1030},[1002,54458,54459],{"class":1004,"line":2442},[1002,54460,1051],{"emptyLinePlaceholder":1050},[1002,54462,54463,54465,54468,54470,54472],{"class":1004,"line":2466},[1002,54464,6965],{"class":1015},[1002,54466,54467],{"class":1026}," getCompletedTodos",[1002,54469,1031],{"class":1030},[1002,54471,52300],{"class":2378},[1002,54473,2382],{"class":1030},[1002,54475,54476,54478,54480,54482,54484,54486,54488,54490],{"class":1004,"line":2471},[1002,54477,15066],{"class":1015},[1002,54479,52314],{"class":1030},[1002,54481,8313],{"class":1026},[1002,54483,1031],{"class":1030},[1002,54485,6965],{"class":1015},[1002,54487,6513],{"class":1030},[1002,54489,52305],{"class":2378},[1002,54491,2382],{"class":1030},[1002,54493,54494,54496],{"class":1004,"line":2476},[1002,54495,2687],{"class":1015},[1002,54497,54498],{"class":1030}," todo.completed;\n",[1002,54500,54501],{"class":1004,"line":2481},[1002,54502,19836],{"class":1030},[1002,54504,54505],{"class":1004,"line":2491},[1002,54506,1170],{"class":1030},[1002,54508,54509],{"class":1004,"line":2502},[1002,54510,1051],{"emptyLinePlaceholder":1050},[1002,54512,54513,54515,54518,54520,54522],{"class":1004,"line":2513},[1002,54514,6965],{"class":1015},[1002,54516,54517],{"class":1026}," groupTodosByCompleted",[1002,54519,1031],{"class":1030},[1002,54521,52300],{"class":2378},[1002,54523,2382],{"class":1030},[1002,54525,54526,54528,54530,54533,54535,54537,54539,54541],{"class":1004,"line":2535},[1002,54527,15066],{"class":1015},[1002,54529,52314],{"class":1030},[1002,54531,54532],{"class":1026},"groupBy",[1002,54534,1031],{"class":1030},[1002,54536,6965],{"class":1015},[1002,54538,6513],{"class":1030},[1002,54540,52305],{"class":2378},[1002,54542,2382],{"class":1030},[1002,54544,54545,54547],{"class":1004,"line":2557},[1002,54546,2687],{"class":1015},[1002,54548,54498],{"class":1030},[1002,54550,54551],{"class":1004,"line":2562},[1002,54552,19836],{"class":1030},[1002,54554,54555],{"class":1004,"line":2567},[1002,54556,1170],{"class":1030},[1002,54558,54559],{"class":1004,"line":2572},[1002,54560,1051],{"emptyLinePlaceholder":1050},[1002,54562,54563,54565,54567,54569,54571,54573,54575],{"class":1004,"line":2582},[1002,54564,6965],{"class":1015},[1002,54566,52295],{"class":1026},[1002,54568,1031],{"class":1030},[1002,54570,52300],{"class":2378},[1002,54572,1251],{"class":1030},[1002,54574,52305],{"class":2378},[1002,54576,2382],{"class":1030},[1002,54578,54579,54581,54583,54585],{"class":1004,"line":2594},[1002,54580,15066],{"class":1015},[1002,54582,52314],{"class":1030},[1002,54584,40544],{"class":1026},[1002,54586,52319],{"class":1030},[1002,54588,54589],{"class":1004,"line":2603},[1002,54590,1170],{"class":1030},[1002,54592,54593],{"class":1004,"line":2619},[1002,54594,1051],{"emptyLinePlaceholder":1050},[1002,54596,54597,54599,54601,54604,54606,54608],{"class":1004,"line":2633},[1002,54598,12742],{"class":1026},[1002,54600,1031],{"class":1030},[1002,54602,54603],{"class":1034},"'Iterating over an Immutable.js Map()'",[1002,54605,1251],{"class":1030},[1002,54607,6965],{"class":1015},[1002,54609,9772],{"class":1030},[1002,54611,54612,54614,54616,54619,54621,54623],{"class":1004,"line":2641},[1002,54613,34260],{"class":1026},[1002,54615,1031],{"class":1030},[1002,54617,54618],{"class":1034},"'should convert all todos into a map() of titles'",[1002,54620,1251],{"class":1030},[1002,54622,6965],{"class":1015},[1002,54624,9772],{"class":1030},[1002,54626,54627,54629,54631,54633,54635,54637],{"class":1004,"line":2655},[1002,54628,51906],{"class":1015},[1002,54630,52555],{"class":1030},[1002,54632,2393],{"class":1015},[1002,54634,51301],{"class":1030},[1002,54636,32239],{"class":1026},[1002,54638,1428],{"class":1030},[1002,54640,54641],{"class":1004,"line":2667},[1002,54642,1051],{"emptyLinePlaceholder":1050},[1002,54644,54645,54647,54649,54651,54653,54655,54657,54659,54661,54663,54665],{"class":1004,"line":2674},[1002,54646,52889],{"class":1030},[1002,54648,6633],{"class":1026},[1002,54650,52894],{"class":1030},[1002,54652,50647],{"class":1026},[1002,54654,1031],{"class":1030},[1002,54656,4818],{"class":1019},[1002,54658,38570],{"class":1030},[1002,54660,6965],{"class":1015},[1002,54662,6513],{"class":1030},[1002,54664,19458],{"class":2378},[1002,54666,2382],{"class":1030},[1002,54668,54669,54671,54673,54675,54677,54679,54681,54683,54685,54687,54689,54691,54693,54695],{"class":1004,"line":2679},[1002,54670,52915],{"class":1030},[1002,54672,2393],{"class":1015},[1002,54674,52295],{"class":1026},[1002,54676,52922],{"class":1030},[1002,54678,5654],{"class":1015},[1002,54680,52177],{"class":1026},[1002,54682,1031],{"class":1030},[1002,54684,53885],{"class":1034},[1002,54686,6583],{"class":1015},[1002,54688,52936],{"class":1030},[1002,54690,52538],{"class":1034},[1002,54692,1251],{"class":1030},[1002,54694,19341],{"class":1019},[1002,54696,5663],{"class":1030},[1002,54698,54699],{"class":1004,"line":2684},[1002,54700,8353],{"class":1030},[1002,54702,54703],{"class":1004,"line":2704},[1002,54704,1051],{"emptyLinePlaceholder":1050},[1002,54706,54707,54709,54712,54714,54716],{"class":1004,"line":2709},[1002,54708,51906],{"class":1015},[1002,54710,54711],{"class":1030}," todoTexts ",[1002,54713,2393],{"class":1015},[1002,54715,54363],{"class":1026},[1002,54717,52982],{"class":1030},[1002,54719,54720],{"class":1004,"line":2714},[1002,54721,1051],{"emptyLinePlaceholder":1050},[1002,54723,54724,54726,54729,54731,54734,54736,54738,54740],{"class":1004,"line":2719},[1002,54725,34298],{"class":1026},[1002,54727,54728],{"class":1030},"(todoTexts.",[1002,54730,6619],{"class":1026},[1002,54732,54733],{"class":1030},"()).to.",[1002,54735,38558],{"class":1026},[1002,54737,1031],{"class":1030},[1002,54739,52538],{"class":1034},[1002,54741,1085],{"class":1030},[1002,54743,54744],{"class":1004,"line":2735},[1002,54745,19836],{"class":1030},[1002,54747,54748],{"class":1004,"line":2740},[1002,54749,1051],{"emptyLinePlaceholder":1050},[1002,54751,54752,54754,54756,54759,54761,54763],{"class":1004,"line":2759},[1002,54753,34260],{"class":1026},[1002,54755,1031],{"class":1030},[1002,54757,54758],{"class":1034},"'should filter todos'",[1002,54760,1251],{"class":1030},[1002,54762,6965],{"class":1015},[1002,54764,9772],{"class":1030},[1002,54766,54767,54769,54771,54773,54775,54777],{"class":1004,"line":2774},[1002,54768,51906],{"class":1015},[1002,54770,52555],{"class":1030},[1002,54772,2393],{"class":1015},[1002,54774,51301],{"class":1030},[1002,54776,32239],{"class":1026},[1002,54778,1428],{"class":1030},[1002,54780,54781],{"class":1004,"line":2790},[1002,54782,1051],{"emptyLinePlaceholder":1050},[1002,54784,54785,54787,54789,54791,54793,54795,54797,54799,54801,54803,54805],{"class":1004,"line":2801},[1002,54786,52889],{"class":1030},[1002,54788,6633],{"class":1026},[1002,54790,52894],{"class":1030},[1002,54792,50647],{"class":1026},[1002,54794,1031],{"class":1030},[1002,54796,4818],{"class":1019},[1002,54798,38570],{"class":1030},[1002,54800,6965],{"class":1015},[1002,54802,6513],{"class":1030},[1002,54804,19458],{"class":2378},[1002,54806,2382],{"class":1030},[1002,54808,54809,54811,54813,54815],{"class":1004,"line":2807},[1002,54810,52915],{"class":1030},[1002,54812,2393],{"class":1015},[1002,54814,52295],{"class":1026},[1002,54816,10468],{"class":1030},[1002,54818,54819],{"class":1004,"line":2812},[1002,54820,54821],{"class":1030}," todos,\n",[1002,54823,54824,54827,54829,54831,54833,54835,54837,54839,54842,54844,54846,54848,54850],{"class":1004,"line":2828},[1002,54825,54826],{"class":1015}," new",[1002,54828,52177],{"class":1026},[1002,54830,1031],{"class":1030},[1002,54832,53885],{"class":1034},[1002,54834,6583],{"class":1015},[1002,54836,52936],{"class":1030},[1002,54838,52538],{"class":1034},[1002,54840,54841],{"class":1030},", index ",[1002,54843,32598],{"class":1015},[1002,54845,10248],{"class":1019},[1002,54847,32322],{"class":1015},[1002,54849,4910],{"class":1019},[1002,54851,1257],{"class":1030},[1002,54853,54854],{"class":1004,"line":2841},[1002,54855,13605],{"class":1030},[1002,54857,54858],{"class":1004,"line":2854},[1002,54859,8353],{"class":1030},[1002,54861,54862],{"class":1004,"line":2864},[1002,54863,1051],{"emptyLinePlaceholder":1050},[1002,54865,54866,54869,54871,54873],{"class":1004,"line":2869},[1002,54867,54868],{"class":1030}," filteredTodos ",[1002,54870,2393],{"class":1015},[1002,54872,54467],{"class":1026},[1002,54874,52982],{"class":1030},[1002,54876,54877],{"class":1004,"line":2874},[1002,54878,1051],{"emptyLinePlaceholder":1050},[1002,54880,54881,54883,54886,54888,54890,54892],{"class":1004,"line":2880},[1002,54882,34298],{"class":1026},[1002,54884,54885],{"class":1030},"(filteredTodos.size).to.",[1002,54887,38558],{"class":1026},[1002,54889,1031],{"class":1030},[1002,54891,2859],{"class":1019},[1002,54893,1085],{"class":1030},[1002,54895,54896],{"class":1004,"line":2903},[1002,54897,19836],{"class":1030},[1002,54899,54900],{"class":1004,"line":2909},[1002,54901,1051],{"emptyLinePlaceholder":1050},[1002,54903,54904,54906,54908,54911,54913,54915],{"class":1004,"line":2919},[1002,54905,34260],{"class":1026},[1002,54907,1031],{"class":1030},[1002,54909,54910],{"class":1034},"'should mark all todos completed'",[1002,54912,1251],{"class":1030},[1002,54914,6965],{"class":1015},[1002,54916,9772],{"class":1030},[1002,54918,54919,54921,54923,54925,54927,54929],{"class":1004,"line":2924},[1002,54920,51906],{"class":1015},[1002,54922,52555],{"class":1030},[1002,54924,2393],{"class":1015},[1002,54926,51301],{"class":1030},[1002,54928,32239],{"class":1026},[1002,54930,1428],{"class":1030},[1002,54932,54933],{"class":1004,"line":2944},[1002,54934,1051],{"emptyLinePlaceholder":1050},[1002,54936,54937,54939,54941,54943,54945,54947,54949,54951,54953,54955,54957],{"class":1004,"line":2950},[1002,54938,52889],{"class":1030},[1002,54940,6633],{"class":1026},[1002,54942,52894],{"class":1030},[1002,54944,50647],{"class":1026},[1002,54946,1031],{"class":1030},[1002,54948,4818],{"class":1019},[1002,54950,38570],{"class":1030},[1002,54952,6965],{"class":1015},[1002,54954,6513],{"class":1030},[1002,54956,19458],{"class":2378},[1002,54958,2382],{"class":1030},[1002,54960,54961,54963,54965,54967,54969,54971,54973,54975,54977,54979,54981,54983,54985,54987],{"class":1004,"line":5466},[1002,54962,52915],{"class":1030},[1002,54964,2393],{"class":1015},[1002,54966,52295],{"class":1026},[1002,54968,52922],{"class":1030},[1002,54970,5654],{"class":1015},[1002,54972,52177],{"class":1026},[1002,54974,1031],{"class":1030},[1002,54976,53885],{"class":1034},[1002,54978,6583],{"class":1015},[1002,54980,52936],{"class":1030},[1002,54982,52538],{"class":1034},[1002,54984,1251],{"class":1030},[1002,54986,19341],{"class":1019},[1002,54988,5663],{"class":1030},[1002,54990,54991],{"class":1004,"line":5477},[1002,54992,8353],{"class":1030},[1002,54994,54995],{"class":1004,"line":5490},[1002,54996,1051],{"emptyLinePlaceholder":1050},[1002,54998,54999],{"class":1004,"line":5495},[1002,55000,55001],{"class":1008}," \u002F\u002F This has the chance for side effects\n",[1002,55003,55004,55007],{"class":1004,"line":5500},[1002,55005,55006],{"class":1026}," markAllTodosAsComplete",[1002,55008,52982],{"class":1030},[1002,55010,55011],{"class":1004,"line":5505},[1002,55012,1051],{"emptyLinePlaceholder":1050},[1002,55014,55015,55017,55019,55021,55024,55026,55028,55030,55032],{"class":1004,"line":5515},[1002,55016,52889],{"class":1030},[1002,55018,6633],{"class":1026},[1002,55020,52586],{"class":1030},[1002,55022,55023],{"class":1026},"toArray",[1002,55025,30915],{"class":1030},[1002,55027,6965],{"class":1015},[1002,55029,6513],{"class":1030},[1002,55031,52305],{"class":2378},[1002,55033,2382],{"class":1030},[1002,55035,55036,55039],{"class":1004,"line":5526},[1002,55037,55038],{"class":1026}," expect",[1002,55040,55041],{"class":1030},"(todo.completed).to.be.true;\n",[1002,55043,55044],{"class":1004,"line":5538},[1002,55045,8353],{"class":1030},[1002,55047,55048],{"class":1004,"line":5543},[1002,55049,19836],{"class":1030},[1002,55051,55052],{"class":1004,"line":5548},[1002,55053,1051],{"emptyLinePlaceholder":1050},[1002,55055,55056,55058,55060,55063,55065,55067],{"class":1004,"line":5559},[1002,55057,34260],{"class":1026},[1002,55059,1031],{"class":1030},[1002,55061,55062],{"class":1034},"'should group todos by completed boolean'",[1002,55064,1251],{"class":1030},[1002,55066,6965],{"class":1015},[1002,55068,9772],{"class":1030},[1002,55070,55071,55073,55075,55077,55079,55081],{"class":1004,"line":5573},[1002,55072,51906],{"class":1015},[1002,55074,52555],{"class":1030},[1002,55076,2393],{"class":1015},[1002,55078,51301],{"class":1030},[1002,55080,32239],{"class":1026},[1002,55082,1428],{"class":1030},[1002,55084,55085],{"class":1004,"line":5578},[1002,55086,1051],{"emptyLinePlaceholder":1050},[1002,55088,55089,55091,55093,55095,55097,55099,55101,55103,55105,55107,55109],{"class":1004,"line":5583},[1002,55090,52889],{"class":1030},[1002,55092,6633],{"class":1026},[1002,55094,52894],{"class":1030},[1002,55096,50647],{"class":1026},[1002,55098,1031],{"class":1030},[1002,55100,4818],{"class":1019},[1002,55102,38570],{"class":1030},[1002,55104,6965],{"class":1015},[1002,55106,6513],{"class":1030},[1002,55108,19458],{"class":2378},[1002,55110,2382],{"class":1030},[1002,55112,55113,55115,55117,55119],{"class":1004,"line":5594},[1002,55114,52915],{"class":1030},[1002,55116,2393],{"class":1015},[1002,55118,52295],{"class":1026},[1002,55120,10468],{"class":1030},[1002,55122,55123],{"class":1004,"line":5607},[1002,55124,54821],{"class":1030},[1002,55126,55127,55129,55131,55133,55135,55137,55139,55141,55143,55145,55147,55149,55151],{"class":1004,"line":5612},[1002,55128,54826],{"class":1015},[1002,55130,52177],{"class":1026},[1002,55132,1031],{"class":1030},[1002,55134,53885],{"class":1034},[1002,55136,6583],{"class":1015},[1002,55138,52936],{"class":1030},[1002,55140,52538],{"class":1034},[1002,55142,54841],{"class":1030},[1002,55144,32598],{"class":1015},[1002,55146,10248],{"class":1019},[1002,55148,32322],{"class":1015},[1002,55150,4910],{"class":1019},[1002,55152,1257],{"class":1030},[1002,55154,55155],{"class":1004,"line":5617},[1002,55156,13605],{"class":1030},[1002,55158,55159],{"class":1004,"line":5622},[1002,55160,8353],{"class":1030},[1002,55162,55163],{"class":1004,"line":5638},[1002,55164,1051],{"emptyLinePlaceholder":1050},[1002,55166,55167,55170,55172,55174],{"class":1004,"line":5643},[1002,55168,55169],{"class":1030}," groupedTodos ",[1002,55171,2393],{"class":1015},[1002,55173,54517],{"class":1026},[1002,55175,52982],{"class":1030},[1002,55177,55178],{"class":1004,"line":5666},[1002,55179,1051],{"emptyLinePlaceholder":1050},[1002,55181,55182,55184,55187,55189,55191,55193,55196,55198,55200,55202],{"class":1004,"line":5686},[1002,55183,34298],{"class":1026},[1002,55185,55186],{"class":1030},"(groupedTodos.",[1002,55188,8070],{"class":1026},[1002,55190,1031],{"class":1030},[1002,55192,17397],{"class":1019},[1002,55194,55195],{"class":1030},").size).to.",[1002,55197,38558],{"class":1026},[1002,55199,1031],{"class":1030},[1002,55201,2859],{"class":1019},[1002,55203,1085],{"class":1030},[1002,55205,55206,55208,55210,55212,55214,55216,55218,55220,55222,55224],{"class":1004,"line":5705},[1002,55207,34298],{"class":1026},[1002,55209,55186],{"class":1030},[1002,55211,8070],{"class":1026},[1002,55213,1031],{"class":1030},[1002,55215,19341],{"class":1019},[1002,55217,55195],{"class":1030},[1002,55219,38558],{"class":1026},[1002,55221,1031],{"class":1030},[1002,55223,2859],{"class":1019},[1002,55225,1085],{"class":1030},[1002,55227,55228],{"class":1004,"line":5724},[1002,55229,19836],{"class":1030},[1002,55231,55232],{"class":1004,"line":5737},[1002,55233,2804],{"class":1030},[1002,55235,55236],{"class":1004,"line":5746},[1002,55237,1051],{"emptyLinePlaceholder":1050},[1002,55239,55241,55243,55245],{"class":1004,"line":55240},99,[1002,55242,51753],{"class":1030},[1002,55244,2061],{"class":1026},[1002,55246,1428],{"class":1030},[925,55248,55249],{},"Well, as we can see, we have one test that says, give me the group todos that have a key of true, and give me their size. We have a size of five, because there are only five completed todos, and the same for thing for the false. We have five incomplete todos, and now you see all the tests pass.",[50964,55251,55253],{"id":55252},"working-with-subsets-of-an-immutablejs-map","Working with Subsets of an Immutable.js Map",[925,55255,55256],{},"Immutable.js offers methods to break immutable structures into subsets much like Array for instance it has the all powerful slice() and unlike Array it offers functional methods like take() and skip(). You get the best of both the imperative and functional worlds.",[993,55258,55260],{"className":995,"code":55259,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\nfunction Todo(title, text, completed) {\n this.id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);\n this.title = title;\n this.text = text;\n this.completed = completed;\n}\n\nfunction addTodo(todos, todo) {\n return todos.set(todo.id, todo);\n}\n\nfunction retrieveFinalPair(todos) {\n return todos.slice(todos.size - 2, todos.size);\n \u002F\u002F Alernatively, you can use this terser syntax\n \u002F\u002Freturn todos.slice(-2);\n}\n\nfunction removeLastEntry(todos) {\n return todos.slice(0, -1);\n}\n\nfunction removeFirstEntry(todos) {\n return todos.slice(1, todos.size);\n}\n\nfunction removeFirstFive(todos) {\n return todos.skip(5);\n}\n\nfunction findMeMonkey(todos) {\n return todos.skipUntil(function (todo) {\n return todo.text === 'monkey';\n });\n}\n\nfunction stopAtMonkey(todos) {\n return todos.skipWhile(function (todo) {\n return todo.text === 'monkey';\n });\n}\n\ndescribe('Working with Subsets of an Immutable.js Map()', function () {\n it('should retrieve last two entries using slice()', function () {\n var todos = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(todos, new Todo('Todo' + index, \"I'm a todo!\", false));\n });\n\n var lastTwoTodos = retrieveFinalPair(todos);\n\n expect(lastTwoTodos.size).to.equal(2);\n\n todos.takeLast(2).forEach(function (todo) {\n expect(lastTwoTodos.get(todo.id)).to.equal(todo);\n });\n });\n\n it('should remove last entry using negative slice()', function () {\n var todos = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(todos, new Todo('Todo' + index, \"I'm a todo!\", false));\n });\n\n var todosWithoutLast = removeLastEntry(todos);\n\n todos.butLast().forEach(function (todo) {\n expect(todosWithoutLast.get(todo.id)).to.equal(todo);\n });\n });\n\n it('should remove first entry using slice()', function () {\n var todos = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(todos, new Todo('Todo' + index, \"I'm a todo!\", false));\n });\n\n var todosWithoutFirst = removeFirstEntry(todos);\n\n todos.rest().forEach(function (todo) {\n expect(todosWithoutFirst.get(todo.id)).to.equal(todo);\n });\n });\n\n it('should return last 5 todos using skip()', function () {\n var todos = Immutable.Map();\n\n _.each(_.range(10), function (index) {\n todos = addTodo(todos, new Todo('Todo' + index, \"I'm a todo!\", false));\n });\n\n var lastFive = removeFirstFive(todos);\n\n todos.takeLast(5).forEach(function (todo) {\n expect(lastFive.get(todo.id)).to.equal(todo);\n });\n });\n\n it('should return todos after reaching \\\"monkey\\\" using skipUntil()', function () {\n var texts = [\n 'dog',\n 'cat',\n 'frog',\n 'monkey',\n 'octopus',\n 'horse',\n 'orangutan',\n ];\n var todos = Immutable.Map();\n\n _.each(_.range(texts.length), function (index) {\n todos = addTodo(todos, new Todo('Todo' + index, texts[index], false));\n });\n\n var monkeyAndAfter = findMeMonkey(todos);\n\n todos.takeLast(4).forEach(function (todo) {\n expect(monkeyAndAfter.get(todo.id)).to.equal(todo);\n });\n });\n\n it('should return todos up to reaching \\\"monkey\\\" using skipWhile()', function () {\n var texts = [\n 'dog',\n 'cat',\n 'frog',\n 'monkey',\n 'octopus',\n 'horse',\n 'orangutan',\n ];\n var todos = Immutable.Map();\n\n _.each(_.range(texts.length), function (index) {\n todos = addTodo(todos, new Todo('Todo' + index, texts[index], false));\n });\n\n var upToMonkey = stopAtMonkey(todos);\n\n todos.takeLast(4).forEach(function (todo) {\n expect(upToMonkey.get(todo.id)).to.equal(todo);\n });\n });\n});\n\nmocha.run();\n",[941,55261,55262,55274,55284,55288,55308,55350,55360,55370,55380,55384,55388,55404,55414,55418,55422,55435,55454,55459,55464,55468,55472,55485,55505,55509,55513,55526,55540,55544,55548,55561,55576,55580,55584,55597,55616,55630,55634,55638,55642,55655,55674,55686,55690,55694,55698,55713,55728,55742,55746,55770,55800,55804,55808,55821,55825,55840,55844,55870,55885,55889,55893,55897,55912,55926,55930,55954,55984,55988,55992,56005,56009,56030,56045,56049,56053,56057,56072,56086,56090,56114,56144,56148,56152,56165,56169,56189,56204,56208,56212,56216,56231,56245,56249,56273,56303,56307,56311,56324,56328,56352,56368,56373,56378,56383,56410,56422,56430,56438,56446,56454,56462,56470,56478,56484,56499,56504,56530,56558,56563,56568,56582,56587,56612,56628,56633,56638,56643,56668,56679,56686,56693,56700,56707,56714,56721,56728,56733,56748,56753,56778,56805,56810,56815,56829,56834,56859,56875,56880,56885,56890,56895],{"__ignoreMap":998},[1002,55263,55264,55266,55268,55270,55272],{"class":1004,"line":1005},[1002,55265,51753],{"class":1030},[1002,55267,51756],{"class":1026},[1002,55269,1031],{"class":1030},[1002,55271,51761],{"class":1034},[1002,55273,1085],{"class":1030},[1002,55275,55276,55278,55280,55282],{"class":1004,"line":1012},[1002,55277,18311],{"class":1015},[1002,55279,51770],{"class":1030},[1002,55281,2393],{"class":1015},[1002,55283,51775],{"class":1030},[1002,55285,55286],{"class":1004,"line":1047},[1002,55287,1051],{"emptyLinePlaceholder":1050},[1002,55289,55290,55292,55294,55296,55298,55300,55302,55304,55306],{"class":1004,"line":1054},[1002,55291,6965],{"class":1015},[1002,55293,52177],{"class":1026},[1002,55295,1031],{"class":1030},[1002,55297,15029],{"class":2378},[1002,55299,1251],{"class":1030},[1002,55301,24241],{"class":2378},[1002,55303,1251],{"class":1030},[1002,55305,52194],{"class":2378},[1002,55307,2382],{"class":1030},[1002,55309,55310,55312,55314,55316,55318,55320,55322,55324,55326,55328,55330,55332,55334,55336,55338,55340,55342,55344,55346,55348],{"class":1004,"line":1060},[1002,55311,39364],{"class":1019},[1002,55313,52203],{"class":1030},[1002,55315,2393],{"class":1015},[1002,55317,6513],{"class":1030},[1002,55319,52210],{"class":1015},[1002,55321,31486],{"class":1026},[1002,55323,10191],{"class":1030},[1002,55325,5064],{"class":1015},[1002,55327,4673],{"class":1030},[1002,55329,4676],{"class":1026},[1002,55331,52223],{"class":1030},[1002,55333,52226],{"class":1026},[1002,55335,10191],{"class":1030},[1002,55337,4703],{"class":1015},[1002,55339,52233],{"class":1019},[1002,55341,21297],{"class":1030},[1002,55343,15085],{"class":1026},[1002,55345,1031],{"class":1030},[1002,55347,52242],{"class":1019},[1002,55349,1085],{"class":1030},[1002,55351,55352,55354,55356,55358],{"class":1004,"line":1272},[1002,55353,39364],{"class":1019},[1002,55355,52251],{"class":1030},[1002,55357,2393],{"class":1015},[1002,55359,52256],{"class":1030},[1002,55361,55362,55364,55366,55368],{"class":1004,"line":1348},[1002,55363,39364],{"class":1019},[1002,55365,52263],{"class":1030},[1002,55367,2393],{"class":1015},[1002,55369,52268],{"class":1030},[1002,55371,55372,55374,55376,55378],{"class":1004,"line":1354},[1002,55373,39364],{"class":1019},[1002,55375,52275],{"class":1030},[1002,55377,2393],{"class":1015},[1002,55379,52280],{"class":1030},[1002,55381,55382],{"class":1004,"line":1360},[1002,55383,1170],{"class":1030},[1002,55385,55386],{"class":1004,"line":1366},[1002,55387,1051],{"emptyLinePlaceholder":1050},[1002,55389,55390,55392,55394,55396,55398,55400,55402],{"class":1004,"line":1946},[1002,55391,6965],{"class":1015},[1002,55393,52295],{"class":1026},[1002,55395,1031],{"class":1030},[1002,55397,52300],{"class":2378},[1002,55399,1251],{"class":1030},[1002,55401,52305],{"class":2378},[1002,55403,2382],{"class":1030},[1002,55405,55406,55408,55410,55412],{"class":1004,"line":1956},[1002,55407,15066],{"class":1015},[1002,55409,52314],{"class":1030},[1002,55411,40544],{"class":1026},[1002,55413,52319],{"class":1030},[1002,55415,55416],{"class":1004,"line":1961},[1002,55417,1170],{"class":1030},[1002,55419,55420],{"class":1004,"line":1971},[1002,55421,1051],{"emptyLinePlaceholder":1050},[1002,55423,55424,55426,55429,55431,55433],{"class":1004,"line":1980},[1002,55425,6965],{"class":1015},[1002,55427,55428],{"class":1026}," retrieveFinalPair",[1002,55430,1031],{"class":1030},[1002,55432,52300],{"class":2378},[1002,55434,2382],{"class":1030},[1002,55436,55437,55439,55441,55444,55447,55449,55451],{"class":1004,"line":1985},[1002,55438,15066],{"class":1015},[1002,55440,52314],{"class":1030},[1002,55442,55443],{"class":1026},"slice",[1002,55445,55446],{"class":1030},"(todos.size ",[1002,55448,5101],{"class":1015},[1002,55450,10248],{"class":1019},[1002,55452,55453],{"class":1030},", todos.size);\n",[1002,55455,55456],{"class":1004,"line":1995},[1002,55457,55458],{"class":1008}," \u002F\u002F Alernatively, you can use this terser syntax\n",[1002,55460,55461],{"class":1004,"line":2006},[1002,55462,55463],{"class":1008}," \u002F\u002Freturn todos.slice(-2);\n",[1002,55465,55466],{"class":1004,"line":2011},[1002,55467,1170],{"class":1030},[1002,55469,55470],{"class":1004,"line":2017},[1002,55471,1051],{"emptyLinePlaceholder":1050},[1002,55473,55474,55476,55479,55481,55483],{"class":1004,"line":2022},[1002,55475,6965],{"class":1015},[1002,55477,55478],{"class":1026}," removeLastEntry",[1002,55480,1031],{"class":1030},[1002,55482,52300],{"class":2378},[1002,55484,2382],{"class":1030},[1002,55486,55487,55489,55491,55493,55495,55497,55499,55501,55503],{"class":1004,"line":2442},[1002,55488,15066],{"class":1015},[1002,55490,52314],{"class":1030},[1002,55492,55443],{"class":1026},[1002,55494,1031],{"class":1030},[1002,55496,5867],{"class":1019},[1002,55498,1251],{"class":1030},[1002,55500,5101],{"class":1015},[1002,55502,6211],{"class":1019},[1002,55504,1085],{"class":1030},[1002,55506,55507],{"class":1004,"line":2466},[1002,55508,1170],{"class":1030},[1002,55510,55511],{"class":1004,"line":2471},[1002,55512,1051],{"emptyLinePlaceholder":1050},[1002,55514,55515,55517,55520,55522,55524],{"class":1004,"line":2476},[1002,55516,6965],{"class":1015},[1002,55518,55519],{"class":1026}," removeFirstEntry",[1002,55521,1031],{"class":1030},[1002,55523,52300],{"class":2378},[1002,55525,2382],{"class":1030},[1002,55527,55528,55530,55532,55534,55536,55538],{"class":1004,"line":2481},[1002,55529,15066],{"class":1015},[1002,55531,52314],{"class":1030},[1002,55533,55443],{"class":1026},[1002,55535,1031],{"class":1030},[1002,55537,6211],{"class":1019},[1002,55539,55453],{"class":1030},[1002,55541,55542],{"class":1004,"line":2491},[1002,55543,1170],{"class":1030},[1002,55545,55546],{"class":1004,"line":2502},[1002,55547,1051],{"emptyLinePlaceholder":1050},[1002,55549,55550,55552,55555,55557,55559],{"class":1004,"line":2513},[1002,55551,6965],{"class":1015},[1002,55553,55554],{"class":1026}," removeFirstFive",[1002,55556,1031],{"class":1030},[1002,55558,52300],{"class":2378},[1002,55560,2382],{"class":1030},[1002,55562,55563,55565,55567,55570,55572,55574],{"class":1004,"line":2535},[1002,55564,15066],{"class":1015},[1002,55566,52314],{"class":1030},[1002,55568,55569],{"class":1026},"skip",[1002,55571,1031],{"class":1030},[1002,55573,2859],{"class":1019},[1002,55575,1085],{"class":1030},[1002,55577,55578],{"class":1004,"line":2557},[1002,55579,1170],{"class":1030},[1002,55581,55582],{"class":1004,"line":2562},[1002,55583,1051],{"emptyLinePlaceholder":1050},[1002,55585,55586,55588,55591,55593,55595],{"class":1004,"line":2567},[1002,55587,6965],{"class":1015},[1002,55589,55590],{"class":1026}," findMeMonkey",[1002,55592,1031],{"class":1030},[1002,55594,52300],{"class":2378},[1002,55596,2382],{"class":1030},[1002,55598,55599,55601,55603,55606,55608,55610,55612,55614],{"class":1004,"line":2572},[1002,55600,15066],{"class":1015},[1002,55602,52314],{"class":1030},[1002,55604,55605],{"class":1026},"skipUntil",[1002,55607,1031],{"class":1030},[1002,55609,6965],{"class":1015},[1002,55611,6513],{"class":1030},[1002,55613,52305],{"class":2378},[1002,55615,2382],{"class":1030},[1002,55617,55618,55620,55623,55625,55628],{"class":1004,"line":2582},[1002,55619,2687],{"class":1015},[1002,55621,55622],{"class":1030}," todo.text ",[1002,55624,2892],{"class":1015},[1002,55626,55627],{"class":1034}," 'monkey'",[1002,55629,1407],{"class":1030},[1002,55631,55632],{"class":1004,"line":2594},[1002,55633,19836],{"class":1030},[1002,55635,55636],{"class":1004,"line":2603},[1002,55637,1170],{"class":1030},[1002,55639,55640],{"class":1004,"line":2619},[1002,55641,1051],{"emptyLinePlaceholder":1050},[1002,55643,55644,55646,55649,55651,55653],{"class":1004,"line":2633},[1002,55645,6965],{"class":1015},[1002,55647,55648],{"class":1026}," stopAtMonkey",[1002,55650,1031],{"class":1030},[1002,55652,52300],{"class":2378},[1002,55654,2382],{"class":1030},[1002,55656,55657,55659,55661,55664,55666,55668,55670,55672],{"class":1004,"line":2641},[1002,55658,15066],{"class":1015},[1002,55660,52314],{"class":1030},[1002,55662,55663],{"class":1026},"skipWhile",[1002,55665,1031],{"class":1030},[1002,55667,6965],{"class":1015},[1002,55669,6513],{"class":1030},[1002,55671,52305],{"class":2378},[1002,55673,2382],{"class":1030},[1002,55675,55676,55678,55680,55682,55684],{"class":1004,"line":2655},[1002,55677,2687],{"class":1015},[1002,55679,55622],{"class":1030},[1002,55681,2892],{"class":1015},[1002,55683,55627],{"class":1034},[1002,55685,1407],{"class":1030},[1002,55687,55688],{"class":1004,"line":2667},[1002,55689,19836],{"class":1030},[1002,55691,55692],{"class":1004,"line":2674},[1002,55693,1170],{"class":1030},[1002,55695,55696],{"class":1004,"line":2679},[1002,55697,1051],{"emptyLinePlaceholder":1050},[1002,55699,55700,55702,55704,55707,55709,55711],{"class":1004,"line":2684},[1002,55701,12742],{"class":1026},[1002,55703,1031],{"class":1030},[1002,55705,55706],{"class":1034},"'Working with Subsets of an Immutable.js Map()'",[1002,55708,1251],{"class":1030},[1002,55710,6965],{"class":1015},[1002,55712,9772],{"class":1030},[1002,55714,55715,55717,55719,55722,55724,55726],{"class":1004,"line":2704},[1002,55716,34260],{"class":1026},[1002,55718,1031],{"class":1030},[1002,55720,55721],{"class":1034},"'should retrieve last two entries using slice()'",[1002,55723,1251],{"class":1030},[1002,55725,6965],{"class":1015},[1002,55727,9772],{"class":1030},[1002,55729,55730,55732,55734,55736,55738,55740],{"class":1004,"line":2709},[1002,55731,51906],{"class":1015},[1002,55733,52555],{"class":1030},[1002,55735,2393],{"class":1015},[1002,55737,51301],{"class":1030},[1002,55739,32239],{"class":1026},[1002,55741,1428],{"class":1030},[1002,55743,55744],{"class":1004,"line":2714},[1002,55745,1051],{"emptyLinePlaceholder":1050},[1002,55747,55748,55750,55752,55754,55756,55758,55760,55762,55764,55766,55768],{"class":1004,"line":2719},[1002,55749,52889],{"class":1030},[1002,55751,6633],{"class":1026},[1002,55753,52894],{"class":1030},[1002,55755,50647],{"class":1026},[1002,55757,1031],{"class":1030},[1002,55759,4818],{"class":1019},[1002,55761,38570],{"class":1030},[1002,55763,6965],{"class":1015},[1002,55765,6513],{"class":1030},[1002,55767,19458],{"class":2378},[1002,55769,2382],{"class":1030},[1002,55771,55772,55774,55776,55778,55780,55782,55784,55786,55788,55790,55792,55794,55796,55798],{"class":1004,"line":2735},[1002,55773,52915],{"class":1030},[1002,55775,2393],{"class":1015},[1002,55777,52295],{"class":1026},[1002,55779,52922],{"class":1030},[1002,55781,5654],{"class":1015},[1002,55783,52177],{"class":1026},[1002,55785,1031],{"class":1030},[1002,55787,53885],{"class":1034},[1002,55789,6583],{"class":1015},[1002,55791,52936],{"class":1030},[1002,55793,52538],{"class":1034},[1002,55795,1251],{"class":1030},[1002,55797,19341],{"class":1019},[1002,55799,5663],{"class":1030},[1002,55801,55802],{"class":1004,"line":2740},[1002,55803,8353],{"class":1030},[1002,55805,55806],{"class":1004,"line":2759},[1002,55807,1051],{"emptyLinePlaceholder":1050},[1002,55809,55810,55812,55815,55817,55819],{"class":1004,"line":2774},[1002,55811,51906],{"class":1015},[1002,55813,55814],{"class":1030}," lastTwoTodos ",[1002,55816,2393],{"class":1015},[1002,55818,55428],{"class":1026},[1002,55820,52982],{"class":1030},[1002,55822,55823],{"class":1004,"line":2790},[1002,55824,1051],{"emptyLinePlaceholder":1050},[1002,55826,55827,55829,55832,55834,55836,55838],{"class":1004,"line":2801},[1002,55828,34298],{"class":1026},[1002,55830,55831],{"class":1030},"(lastTwoTodos.size).to.",[1002,55833,38558],{"class":1026},[1002,55835,1031],{"class":1030},[1002,55837,5681],{"class":1019},[1002,55839,1085],{"class":1030},[1002,55841,55842],{"class":1004,"line":2807},[1002,55843,1051],{"emptyLinePlaceholder":1050},[1002,55845,55846,55849,55852,55854,55856,55858,55860,55862,55864,55866,55868],{"class":1004,"line":2812},[1002,55847,55848],{"class":1030}," todos.",[1002,55850,55851],{"class":1026},"takeLast",[1002,55853,1031],{"class":1030},[1002,55855,5681],{"class":1019},[1002,55857,1539],{"class":1030},[1002,55859,8408],{"class":1026},[1002,55861,1031],{"class":1030},[1002,55863,6965],{"class":1015},[1002,55865,6513],{"class":1030},[1002,55867,52305],{"class":2378},[1002,55869,2382],{"class":1030},[1002,55871,55872,55874,55877,55879,55881,55883],{"class":1004,"line":2828},[1002,55873,55038],{"class":1026},[1002,55875,55876],{"class":1030},"(lastTwoTodos.",[1002,55878,8070],{"class":1026},[1002,55880,52591],{"class":1030},[1002,55882,38558],{"class":1026},[1002,55884,52596],{"class":1030},[1002,55886,55887],{"class":1004,"line":2841},[1002,55888,8353],{"class":1030},[1002,55890,55891],{"class":1004,"line":2854},[1002,55892,19836],{"class":1030},[1002,55894,55895],{"class":1004,"line":2864},[1002,55896,1051],{"emptyLinePlaceholder":1050},[1002,55898,55899,55901,55903,55906,55908,55910],{"class":1004,"line":2869},[1002,55900,34260],{"class":1026},[1002,55902,1031],{"class":1030},[1002,55904,55905],{"class":1034},"'should remove last entry using negative slice()'",[1002,55907,1251],{"class":1030},[1002,55909,6965],{"class":1015},[1002,55911,9772],{"class":1030},[1002,55913,55914,55916,55918,55920,55922,55924],{"class":1004,"line":2874},[1002,55915,51906],{"class":1015},[1002,55917,52555],{"class":1030},[1002,55919,2393],{"class":1015},[1002,55921,51301],{"class":1030},[1002,55923,32239],{"class":1026},[1002,55925,1428],{"class":1030},[1002,55927,55928],{"class":1004,"line":2880},[1002,55929,1051],{"emptyLinePlaceholder":1050},[1002,55931,55932,55934,55936,55938,55940,55942,55944,55946,55948,55950,55952],{"class":1004,"line":2903},[1002,55933,52889],{"class":1030},[1002,55935,6633],{"class":1026},[1002,55937,52894],{"class":1030},[1002,55939,50647],{"class":1026},[1002,55941,1031],{"class":1030},[1002,55943,4818],{"class":1019},[1002,55945,38570],{"class":1030},[1002,55947,6965],{"class":1015},[1002,55949,6513],{"class":1030},[1002,55951,19458],{"class":2378},[1002,55953,2382],{"class":1030},[1002,55955,55956,55958,55960,55962,55964,55966,55968,55970,55972,55974,55976,55978,55980,55982],{"class":1004,"line":2909},[1002,55957,52915],{"class":1030},[1002,55959,2393],{"class":1015},[1002,55961,52295],{"class":1026},[1002,55963,52922],{"class":1030},[1002,55965,5654],{"class":1015},[1002,55967,52177],{"class":1026},[1002,55969,1031],{"class":1030},[1002,55971,53885],{"class":1034},[1002,55973,6583],{"class":1015},[1002,55975,52936],{"class":1030},[1002,55977,52538],{"class":1034},[1002,55979,1251],{"class":1030},[1002,55981,19341],{"class":1019},[1002,55983,5663],{"class":1030},[1002,55985,55986],{"class":1004,"line":2919},[1002,55987,8353],{"class":1030},[1002,55989,55990],{"class":1004,"line":2924},[1002,55991,1051],{"emptyLinePlaceholder":1050},[1002,55993,55994,55996,55999,56001,56003],{"class":1004,"line":2944},[1002,55995,51906],{"class":1015},[1002,55997,55998],{"class":1030}," todosWithoutLast ",[1002,56000,2393],{"class":1015},[1002,56002,55478],{"class":1026},[1002,56004,52982],{"class":1030},[1002,56006,56007],{"class":1004,"line":2950},[1002,56008,1051],{"emptyLinePlaceholder":1050},[1002,56010,56011,56013,56016,56018,56020,56022,56024,56026,56028],{"class":1004,"line":5466},[1002,56012,55848],{"class":1030},[1002,56014,56015],{"class":1026},"butLast",[1002,56017,12951],{"class":1030},[1002,56019,8408],{"class":1026},[1002,56021,1031],{"class":1030},[1002,56023,6965],{"class":1015},[1002,56025,6513],{"class":1030},[1002,56027,52305],{"class":2378},[1002,56029,2382],{"class":1030},[1002,56031,56032,56034,56037,56039,56041,56043],{"class":1004,"line":5477},[1002,56033,55038],{"class":1026},[1002,56035,56036],{"class":1030},"(todosWithoutLast.",[1002,56038,8070],{"class":1026},[1002,56040,52591],{"class":1030},[1002,56042,38558],{"class":1026},[1002,56044,52596],{"class":1030},[1002,56046,56047],{"class":1004,"line":5490},[1002,56048,8353],{"class":1030},[1002,56050,56051],{"class":1004,"line":5495},[1002,56052,19836],{"class":1030},[1002,56054,56055],{"class":1004,"line":5500},[1002,56056,1051],{"emptyLinePlaceholder":1050},[1002,56058,56059,56061,56063,56066,56068,56070],{"class":1004,"line":5505},[1002,56060,34260],{"class":1026},[1002,56062,1031],{"class":1030},[1002,56064,56065],{"class":1034},"'should remove first entry using slice()'",[1002,56067,1251],{"class":1030},[1002,56069,6965],{"class":1015},[1002,56071,9772],{"class":1030},[1002,56073,56074,56076,56078,56080,56082,56084],{"class":1004,"line":5515},[1002,56075,51906],{"class":1015},[1002,56077,52555],{"class":1030},[1002,56079,2393],{"class":1015},[1002,56081,51301],{"class":1030},[1002,56083,32239],{"class":1026},[1002,56085,1428],{"class":1030},[1002,56087,56088],{"class":1004,"line":5526},[1002,56089,1051],{"emptyLinePlaceholder":1050},[1002,56091,56092,56094,56096,56098,56100,56102,56104,56106,56108,56110,56112],{"class":1004,"line":5538},[1002,56093,52889],{"class":1030},[1002,56095,6633],{"class":1026},[1002,56097,52894],{"class":1030},[1002,56099,50647],{"class":1026},[1002,56101,1031],{"class":1030},[1002,56103,4818],{"class":1019},[1002,56105,38570],{"class":1030},[1002,56107,6965],{"class":1015},[1002,56109,6513],{"class":1030},[1002,56111,19458],{"class":2378},[1002,56113,2382],{"class":1030},[1002,56115,56116,56118,56120,56122,56124,56126,56128,56130,56132,56134,56136,56138,56140,56142],{"class":1004,"line":5543},[1002,56117,52915],{"class":1030},[1002,56119,2393],{"class":1015},[1002,56121,52295],{"class":1026},[1002,56123,52922],{"class":1030},[1002,56125,5654],{"class":1015},[1002,56127,52177],{"class":1026},[1002,56129,1031],{"class":1030},[1002,56131,53885],{"class":1034},[1002,56133,6583],{"class":1015},[1002,56135,52936],{"class":1030},[1002,56137,52538],{"class":1034},[1002,56139,1251],{"class":1030},[1002,56141,19341],{"class":1019},[1002,56143,5663],{"class":1030},[1002,56145,56146],{"class":1004,"line":5548},[1002,56147,8353],{"class":1030},[1002,56149,56150],{"class":1004,"line":5559},[1002,56151,1051],{"emptyLinePlaceholder":1050},[1002,56153,56154,56156,56159,56161,56163],{"class":1004,"line":5573},[1002,56155,51906],{"class":1015},[1002,56157,56158],{"class":1030}," todosWithoutFirst ",[1002,56160,2393],{"class":1015},[1002,56162,55519],{"class":1026},[1002,56164,52982],{"class":1030},[1002,56166,56167],{"class":1004,"line":5578},[1002,56168,1051],{"emptyLinePlaceholder":1050},[1002,56170,56171,56173,56175,56177,56179,56181,56183,56185,56187],{"class":1004,"line":5583},[1002,56172,55848],{"class":1030},[1002,56174,27630],{"class":1026},[1002,56176,12951],{"class":1030},[1002,56178,8408],{"class":1026},[1002,56180,1031],{"class":1030},[1002,56182,6965],{"class":1015},[1002,56184,6513],{"class":1030},[1002,56186,52305],{"class":2378},[1002,56188,2382],{"class":1030},[1002,56190,56191,56193,56196,56198,56200,56202],{"class":1004,"line":5594},[1002,56192,55038],{"class":1026},[1002,56194,56195],{"class":1030},"(todosWithoutFirst.",[1002,56197,8070],{"class":1026},[1002,56199,52591],{"class":1030},[1002,56201,38558],{"class":1026},[1002,56203,52596],{"class":1030},[1002,56205,56206],{"class":1004,"line":5607},[1002,56207,8353],{"class":1030},[1002,56209,56210],{"class":1004,"line":5612},[1002,56211,19836],{"class":1030},[1002,56213,56214],{"class":1004,"line":5617},[1002,56215,1051],{"emptyLinePlaceholder":1050},[1002,56217,56218,56220,56222,56225,56227,56229],{"class":1004,"line":5622},[1002,56219,34260],{"class":1026},[1002,56221,1031],{"class":1030},[1002,56223,56224],{"class":1034},"'should return last 5 todos using skip()'",[1002,56226,1251],{"class":1030},[1002,56228,6965],{"class":1015},[1002,56230,9772],{"class":1030},[1002,56232,56233,56235,56237,56239,56241,56243],{"class":1004,"line":5638},[1002,56234,51906],{"class":1015},[1002,56236,52555],{"class":1030},[1002,56238,2393],{"class":1015},[1002,56240,51301],{"class":1030},[1002,56242,32239],{"class":1026},[1002,56244,1428],{"class":1030},[1002,56246,56247],{"class":1004,"line":5643},[1002,56248,1051],{"emptyLinePlaceholder":1050},[1002,56250,56251,56253,56255,56257,56259,56261,56263,56265,56267,56269,56271],{"class":1004,"line":5666},[1002,56252,52889],{"class":1030},[1002,56254,6633],{"class":1026},[1002,56256,52894],{"class":1030},[1002,56258,50647],{"class":1026},[1002,56260,1031],{"class":1030},[1002,56262,4818],{"class":1019},[1002,56264,38570],{"class":1030},[1002,56266,6965],{"class":1015},[1002,56268,6513],{"class":1030},[1002,56270,19458],{"class":2378},[1002,56272,2382],{"class":1030},[1002,56274,56275,56277,56279,56281,56283,56285,56287,56289,56291,56293,56295,56297,56299,56301],{"class":1004,"line":5686},[1002,56276,52915],{"class":1030},[1002,56278,2393],{"class":1015},[1002,56280,52295],{"class":1026},[1002,56282,52922],{"class":1030},[1002,56284,5654],{"class":1015},[1002,56286,52177],{"class":1026},[1002,56288,1031],{"class":1030},[1002,56290,53885],{"class":1034},[1002,56292,6583],{"class":1015},[1002,56294,52936],{"class":1030},[1002,56296,52538],{"class":1034},[1002,56298,1251],{"class":1030},[1002,56300,19341],{"class":1019},[1002,56302,5663],{"class":1030},[1002,56304,56305],{"class":1004,"line":5705},[1002,56306,8353],{"class":1030},[1002,56308,56309],{"class":1004,"line":5724},[1002,56310,1051],{"emptyLinePlaceholder":1050},[1002,56312,56313,56315,56318,56320,56322],{"class":1004,"line":5737},[1002,56314,51906],{"class":1015},[1002,56316,56317],{"class":1030}," lastFive ",[1002,56319,2393],{"class":1015},[1002,56321,55554],{"class":1026},[1002,56323,52982],{"class":1030},[1002,56325,56326],{"class":1004,"line":5746},[1002,56327,1051],{"emptyLinePlaceholder":1050},[1002,56329,56330,56332,56334,56336,56338,56340,56342,56344,56346,56348,56350],{"class":1004,"line":55240},[1002,56331,55848],{"class":1030},[1002,56333,55851],{"class":1026},[1002,56335,1031],{"class":1030},[1002,56337,2859],{"class":1019},[1002,56339,1539],{"class":1030},[1002,56341,8408],{"class":1026},[1002,56343,1031],{"class":1030},[1002,56345,6965],{"class":1015},[1002,56347,6513],{"class":1030},[1002,56349,52305],{"class":2378},[1002,56351,2382],{"class":1030},[1002,56353,56355,56357,56360,56362,56364,56366],{"class":1004,"line":56354},100,[1002,56356,55038],{"class":1026},[1002,56358,56359],{"class":1030},"(lastFive.",[1002,56361,8070],{"class":1026},[1002,56363,52591],{"class":1030},[1002,56365,38558],{"class":1026},[1002,56367,52596],{"class":1030},[1002,56369,56371],{"class":1004,"line":56370},101,[1002,56372,8353],{"class":1030},[1002,56374,56376],{"class":1004,"line":56375},102,[1002,56377,19836],{"class":1030},[1002,56379,56381],{"class":1004,"line":56380},103,[1002,56382,1051],{"emptyLinePlaceholder":1050},[1002,56384,56386,56388,56390,56393,56396,56399,56401,56404,56406,56408],{"class":1004,"line":56385},104,[1002,56387,34260],{"class":1026},[1002,56389,1031],{"class":1030},[1002,56391,56392],{"class":1034},"'should return todos after reaching ",[1002,56394,56395],{"class":1019},"\\\"",[1002,56397,56398],{"class":1034},"monkey",[1002,56400,56395],{"class":1019},[1002,56402,56403],{"class":1034}," using skipUntil()'",[1002,56405,1251],{"class":1030},[1002,56407,6965],{"class":1015},[1002,56409,9772],{"class":1030},[1002,56411,56413,56415,56418,56420],{"class":1004,"line":56412},105,[1002,56414,51906],{"class":1015},[1002,56416,56417],{"class":1030}," texts ",[1002,56419,2393],{"class":1015},[1002,56421,10274],{"class":1030},[1002,56423,56425,56428],{"class":1004,"line":56424},106,[1002,56426,56427],{"class":1034}," 'dog'",[1002,56429,1143],{"class":1030},[1002,56431,56433,56436],{"class":1004,"line":56432},107,[1002,56434,56435],{"class":1034}," 'cat'",[1002,56437,1143],{"class":1030},[1002,56439,56441,56444],{"class":1004,"line":56440},108,[1002,56442,56443],{"class":1034}," 'frog'",[1002,56445,1143],{"class":1030},[1002,56447,56449,56452],{"class":1004,"line":56448},109,[1002,56450,56451],{"class":1034}," 'monkey'",[1002,56453,1143],{"class":1030},[1002,56455,56457,56460],{"class":1004,"line":56456},110,[1002,56458,56459],{"class":1034}," 'octopus'",[1002,56461,1143],{"class":1030},[1002,56463,56465,56468],{"class":1004,"line":56464},111,[1002,56466,56467],{"class":1034}," 'horse'",[1002,56469,1143],{"class":1030},[1002,56471,56473,56476],{"class":1004,"line":56472},112,[1002,56474,56475],{"class":1034}," 'orangutan'",[1002,56477,1143],{"class":1030},[1002,56479,56481],{"class":1004,"line":56480},113,[1002,56482,56483],{"class":1030}," ];\n",[1002,56485,56487,56489,56491,56493,56495,56497],{"class":1004,"line":56486},114,[1002,56488,51906],{"class":1015},[1002,56490,52555],{"class":1030},[1002,56492,2393],{"class":1015},[1002,56494,51301],{"class":1030},[1002,56496,32239],{"class":1026},[1002,56498,1428],{"class":1030},[1002,56500,56502],{"class":1004,"line":56501},115,[1002,56503,1051],{"emptyLinePlaceholder":1050},[1002,56505,56507,56509,56511,56513,56515,56518,56520,56522,56524,56526,56528],{"class":1004,"line":56506},116,[1002,56508,52889],{"class":1030},[1002,56510,6633],{"class":1026},[1002,56512,52894],{"class":1030},[1002,56514,50647],{"class":1026},[1002,56516,56517],{"class":1030},"(texts.",[1002,56519,5873],{"class":1019},[1002,56521,38570],{"class":1030},[1002,56523,6965],{"class":1015},[1002,56525,6513],{"class":1030},[1002,56527,19458],{"class":2378},[1002,56529,2382],{"class":1030},[1002,56531,56533,56535,56537,56539,56541,56543,56545,56547,56549,56551,56554,56556],{"class":1004,"line":56532},117,[1002,56534,52915],{"class":1030},[1002,56536,2393],{"class":1015},[1002,56538,52295],{"class":1026},[1002,56540,52922],{"class":1030},[1002,56542,5654],{"class":1015},[1002,56544,52177],{"class":1026},[1002,56546,1031],{"class":1030},[1002,56548,53885],{"class":1034},[1002,56550,6583],{"class":1015},[1002,56552,56553],{"class":1030}," index, texts[index], ",[1002,56555,19341],{"class":1019},[1002,56557,5663],{"class":1030},[1002,56559,56561],{"class":1004,"line":56560},118,[1002,56562,8353],{"class":1030},[1002,56564,56566],{"class":1004,"line":56565},119,[1002,56567,1051],{"emptyLinePlaceholder":1050},[1002,56569,56571,56573,56576,56578,56580],{"class":1004,"line":56570},120,[1002,56572,51906],{"class":1015},[1002,56574,56575],{"class":1030}," monkeyAndAfter ",[1002,56577,2393],{"class":1015},[1002,56579,55590],{"class":1026},[1002,56581,52982],{"class":1030},[1002,56583,56585],{"class":1004,"line":56584},121,[1002,56586,1051],{"emptyLinePlaceholder":1050},[1002,56588,56590,56592,56594,56596,56598,56600,56602,56604,56606,56608,56610],{"class":1004,"line":56589},122,[1002,56591,55848],{"class":1030},[1002,56593,55851],{"class":1026},[1002,56595,1031],{"class":1030},[1002,56597,3837],{"class":1019},[1002,56599,1539],{"class":1030},[1002,56601,8408],{"class":1026},[1002,56603,1031],{"class":1030},[1002,56605,6965],{"class":1015},[1002,56607,6513],{"class":1030},[1002,56609,52305],{"class":2378},[1002,56611,2382],{"class":1030},[1002,56613,56615,56617,56620,56622,56624,56626],{"class":1004,"line":56614},123,[1002,56616,55038],{"class":1026},[1002,56618,56619],{"class":1030},"(monkeyAndAfter.",[1002,56621,8070],{"class":1026},[1002,56623,52591],{"class":1030},[1002,56625,38558],{"class":1026},[1002,56627,52596],{"class":1030},[1002,56629,56631],{"class":1004,"line":56630},124,[1002,56632,8353],{"class":1030},[1002,56634,56636],{"class":1004,"line":56635},125,[1002,56637,19836],{"class":1030},[1002,56639,56641],{"class":1004,"line":56640},126,[1002,56642,1051],{"emptyLinePlaceholder":1050},[1002,56644,56646,56648,56650,56653,56655,56657,56659,56662,56664,56666],{"class":1004,"line":56645},127,[1002,56647,34260],{"class":1026},[1002,56649,1031],{"class":1030},[1002,56651,56652],{"class":1034},"'should return todos up to reaching ",[1002,56654,56395],{"class":1019},[1002,56656,56398],{"class":1034},[1002,56658,56395],{"class":1019},[1002,56660,56661],{"class":1034}," using skipWhile()'",[1002,56663,1251],{"class":1030},[1002,56665,6965],{"class":1015},[1002,56667,9772],{"class":1030},[1002,56669,56671,56673,56675,56677],{"class":1004,"line":56670},128,[1002,56672,51906],{"class":1015},[1002,56674,56417],{"class":1030},[1002,56676,2393],{"class":1015},[1002,56678,10274],{"class":1030},[1002,56680,56682,56684],{"class":1004,"line":56681},129,[1002,56683,56427],{"class":1034},[1002,56685,1143],{"class":1030},[1002,56687,56689,56691],{"class":1004,"line":56688},130,[1002,56690,56435],{"class":1034},[1002,56692,1143],{"class":1030},[1002,56694,56696,56698],{"class":1004,"line":56695},131,[1002,56697,56443],{"class":1034},[1002,56699,1143],{"class":1030},[1002,56701,56703,56705],{"class":1004,"line":56702},132,[1002,56704,56451],{"class":1034},[1002,56706,1143],{"class":1030},[1002,56708,56710,56712],{"class":1004,"line":56709},133,[1002,56711,56459],{"class":1034},[1002,56713,1143],{"class":1030},[1002,56715,56717,56719],{"class":1004,"line":56716},134,[1002,56718,56467],{"class":1034},[1002,56720,1143],{"class":1030},[1002,56722,56724,56726],{"class":1004,"line":56723},135,[1002,56725,56475],{"class":1034},[1002,56727,1143],{"class":1030},[1002,56729,56731],{"class":1004,"line":56730},136,[1002,56732,56483],{"class":1030},[1002,56734,56736,56738,56740,56742,56744,56746],{"class":1004,"line":56735},137,[1002,56737,51906],{"class":1015},[1002,56739,52555],{"class":1030},[1002,56741,2393],{"class":1015},[1002,56743,51301],{"class":1030},[1002,56745,32239],{"class":1026},[1002,56747,1428],{"class":1030},[1002,56749,56751],{"class":1004,"line":56750},138,[1002,56752,1051],{"emptyLinePlaceholder":1050},[1002,56754,56756,56758,56760,56762,56764,56766,56768,56770,56772,56774,56776],{"class":1004,"line":56755},139,[1002,56757,52889],{"class":1030},[1002,56759,6633],{"class":1026},[1002,56761,52894],{"class":1030},[1002,56763,50647],{"class":1026},[1002,56765,56517],{"class":1030},[1002,56767,5873],{"class":1019},[1002,56769,38570],{"class":1030},[1002,56771,6965],{"class":1015},[1002,56773,6513],{"class":1030},[1002,56775,19458],{"class":2378},[1002,56777,2382],{"class":1030},[1002,56779,56781,56783,56785,56787,56789,56791,56793,56795,56797,56799,56801,56803],{"class":1004,"line":56780},140,[1002,56782,52915],{"class":1030},[1002,56784,2393],{"class":1015},[1002,56786,52295],{"class":1026},[1002,56788,52922],{"class":1030},[1002,56790,5654],{"class":1015},[1002,56792,52177],{"class":1026},[1002,56794,1031],{"class":1030},[1002,56796,53885],{"class":1034},[1002,56798,6583],{"class":1015},[1002,56800,56553],{"class":1030},[1002,56802,19341],{"class":1019},[1002,56804,5663],{"class":1030},[1002,56806,56808],{"class":1004,"line":56807},141,[1002,56809,8353],{"class":1030},[1002,56811,56813],{"class":1004,"line":56812},142,[1002,56814,1051],{"emptyLinePlaceholder":1050},[1002,56816,56818,56820,56823,56825,56827],{"class":1004,"line":56817},143,[1002,56819,51906],{"class":1015},[1002,56821,56822],{"class":1030}," upToMonkey ",[1002,56824,2393],{"class":1015},[1002,56826,55648],{"class":1026},[1002,56828,52982],{"class":1030},[1002,56830,56832],{"class":1004,"line":56831},144,[1002,56833,1051],{"emptyLinePlaceholder":1050},[1002,56835,56837,56839,56841,56843,56845,56847,56849,56851,56853,56855,56857],{"class":1004,"line":56836},145,[1002,56838,55848],{"class":1030},[1002,56840,55851],{"class":1026},[1002,56842,1031],{"class":1030},[1002,56844,3837],{"class":1019},[1002,56846,1539],{"class":1030},[1002,56848,8408],{"class":1026},[1002,56850,1031],{"class":1030},[1002,56852,6965],{"class":1015},[1002,56854,6513],{"class":1030},[1002,56856,52305],{"class":2378},[1002,56858,2382],{"class":1030},[1002,56860,56862,56864,56867,56869,56871,56873],{"class":1004,"line":56861},146,[1002,56863,55038],{"class":1026},[1002,56865,56866],{"class":1030},"(upToMonkey.",[1002,56868,8070],{"class":1026},[1002,56870,52591],{"class":1030},[1002,56872,38558],{"class":1026},[1002,56874,52596],{"class":1030},[1002,56876,56878],{"class":1004,"line":56877},147,[1002,56879,8353],{"class":1030},[1002,56881,56883],{"class":1004,"line":56882},148,[1002,56884,19836],{"class":1030},[1002,56886,56888],{"class":1004,"line":56887},149,[1002,56889,2804],{"class":1030},[1002,56891,56893],{"class":1004,"line":56892},150,[1002,56894,1051],{"emptyLinePlaceholder":1050},[1002,56896,56898,56900,56902],{"class":1004,"line":56897},151,[1002,56899,51753],{"class":1030},[1002,56901,2061],{"class":1026},[1002,56903,1428],{"class":1030},[925,56905,56906],{},"Immutable JS offers methods to break immutable structures into subsets much like array. For instance, it has the all-powerful slice, and unlike array, it offers functional methods like take and skip. You get the best of both the imperative and functional worlds.",[953,56908,56910,56911,56914],{"id":56909},"equality-checking-with-is-and-more","Equality Checking with ",[941,56912,56913],{},".is()"," and More",[925,56916,56917],{},"Equality checking deeply nested objects is painful. Fortunately Immutable.js makes this task easy with its .is() and .isSubset() methods. Let's see how we can take two different Immutable Maps() and check for equality.",[993,56919,56921],{"className":995,"code":56920,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\nfunction Todo(title, text, completed) {\n this.id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);\n this.title = title;\n this.text = text;\n this.completed = completed;\n}\n\nfunction addTodo(todos, todo) {\n return todos.set(todo.id, todo);\n}\n\ndescribe('Equality Checking with .is() and More', function () {\n it('should find different maps equal if keys and values are the same', function () {\n var map1 = Immutable.Map({ a: 1, b: 1, c: Immutable.List.of(1) });\n var map2 = Immutable.Map({ a: 1, b: 1, c: Immutable.List.of(1) });\n\n expect(map1).to.not.equal(map2);\n expect(Immutable.is(map1, map2)).to.be.true;\n });\n\n it('should be equal if subset is equal', function () {\n var map1 = Immutable.Map({ a: 1, b: 1 });\n var map2 = Immutable.Map({ a: 1, b: 1, c: 3 });\n\n expect(map1.isSubset(map2)).to.be.true;\n expect(map2.isSubset(map1)).to.not.be.true;\n });\n\n it('should be equal if superset is equal', function () {\n var map1 = Immutable.Map({ a: 1, b: 1 });\n var map2 = Immutable.Map({ a: 1, b: 1, c: 3 });\n\n expect(map2.isSuperset(map1)).to.be.true;\n expect(map1.isSuperset(map2)).to.not.be.true;\n });\n});\n\nmocha.run();\n",[941,56922,56923,56935,56945,56949,56969,57011,57021,57031,57041,57045,57049,57065,57075,57079,57083,57098,57113,57148,57179,57183,57195,57208,57212,57216,57231,57253,57280,57284,57297,57309,57313,57317,57332,57354,57380,57384,57396,57407,57411,57415,57419],{"__ignoreMap":998},[1002,56924,56925,56927,56929,56931,56933],{"class":1004,"line":1005},[1002,56926,51753],{"class":1030},[1002,56928,51756],{"class":1026},[1002,56930,1031],{"class":1030},[1002,56932,51761],{"class":1034},[1002,56934,1085],{"class":1030},[1002,56936,56937,56939,56941,56943],{"class":1004,"line":1012},[1002,56938,18311],{"class":1015},[1002,56940,51770],{"class":1030},[1002,56942,2393],{"class":1015},[1002,56944,51775],{"class":1030},[1002,56946,56947],{"class":1004,"line":1047},[1002,56948,1051],{"emptyLinePlaceholder":1050},[1002,56950,56951,56953,56955,56957,56959,56961,56963,56965,56967],{"class":1004,"line":1054},[1002,56952,6965],{"class":1015},[1002,56954,52177],{"class":1026},[1002,56956,1031],{"class":1030},[1002,56958,15029],{"class":2378},[1002,56960,1251],{"class":1030},[1002,56962,24241],{"class":2378},[1002,56964,1251],{"class":1030},[1002,56966,52194],{"class":2378},[1002,56968,2382],{"class":1030},[1002,56970,56971,56973,56975,56977,56979,56981,56983,56985,56987,56989,56991,56993,56995,56997,56999,57001,57003,57005,57007,57009],{"class":1004,"line":1060},[1002,56972,39364],{"class":1019},[1002,56974,52203],{"class":1030},[1002,56976,2393],{"class":1015},[1002,56978,6513],{"class":1030},[1002,56980,52210],{"class":1015},[1002,56982,31486],{"class":1026},[1002,56984,10191],{"class":1030},[1002,56986,5064],{"class":1015},[1002,56988,4673],{"class":1030},[1002,56990,4676],{"class":1026},[1002,56992,52223],{"class":1030},[1002,56994,52226],{"class":1026},[1002,56996,10191],{"class":1030},[1002,56998,4703],{"class":1015},[1002,57000,52233],{"class":1019},[1002,57002,21297],{"class":1030},[1002,57004,15085],{"class":1026},[1002,57006,1031],{"class":1030},[1002,57008,52242],{"class":1019},[1002,57010,1085],{"class":1030},[1002,57012,57013,57015,57017,57019],{"class":1004,"line":1272},[1002,57014,39364],{"class":1019},[1002,57016,52251],{"class":1030},[1002,57018,2393],{"class":1015},[1002,57020,52256],{"class":1030},[1002,57022,57023,57025,57027,57029],{"class":1004,"line":1348},[1002,57024,39364],{"class":1019},[1002,57026,52263],{"class":1030},[1002,57028,2393],{"class":1015},[1002,57030,52268],{"class":1030},[1002,57032,57033,57035,57037,57039],{"class":1004,"line":1354},[1002,57034,39364],{"class":1019},[1002,57036,52275],{"class":1030},[1002,57038,2393],{"class":1015},[1002,57040,52280],{"class":1030},[1002,57042,57043],{"class":1004,"line":1360},[1002,57044,1170],{"class":1030},[1002,57046,57047],{"class":1004,"line":1366},[1002,57048,1051],{"emptyLinePlaceholder":1050},[1002,57050,57051,57053,57055,57057,57059,57061,57063],{"class":1004,"line":1946},[1002,57052,6965],{"class":1015},[1002,57054,52295],{"class":1026},[1002,57056,1031],{"class":1030},[1002,57058,52300],{"class":2378},[1002,57060,1251],{"class":1030},[1002,57062,52305],{"class":2378},[1002,57064,2382],{"class":1030},[1002,57066,57067,57069,57071,57073],{"class":1004,"line":1956},[1002,57068,15066],{"class":1015},[1002,57070,52314],{"class":1030},[1002,57072,40544],{"class":1026},[1002,57074,52319],{"class":1030},[1002,57076,57077],{"class":1004,"line":1961},[1002,57078,1170],{"class":1030},[1002,57080,57081],{"class":1004,"line":1971},[1002,57082,1051],{"emptyLinePlaceholder":1050},[1002,57084,57085,57087,57089,57092,57094,57096],{"class":1004,"line":1980},[1002,57086,12742],{"class":1026},[1002,57088,1031],{"class":1030},[1002,57090,57091],{"class":1034},"'Equality Checking with .is() and More'",[1002,57093,1251],{"class":1030},[1002,57095,6965],{"class":1015},[1002,57097,9772],{"class":1030},[1002,57099,57100,57102,57104,57107,57109,57111],{"class":1004,"line":1985},[1002,57101,34260],{"class":1026},[1002,57103,1031],{"class":1030},[1002,57105,57106],{"class":1034},"'should find different maps equal if keys and values are the same'",[1002,57108,1251],{"class":1030},[1002,57110,6965],{"class":1015},[1002,57112,9772],{"class":1030},[1002,57114,57115,57117,57120,57122,57124,57126,57129,57131,57134,57136,57139,57141,57143,57145],{"class":1004,"line":1995},[1002,57116,51906],{"class":1015},[1002,57118,57119],{"class":1030}," map1 ",[1002,57121,2393],{"class":1015},[1002,57123,51301],{"class":1030},[1002,57125,32239],{"class":1026},[1002,57127,57128],{"class":1030},"({ a: ",[1002,57130,6211],{"class":1019},[1002,57132,57133],{"class":1030},", b: ",[1002,57135,6211],{"class":1019},[1002,57137,57138],{"class":1030},", c: Immutable.List.",[1002,57140,39708],{"class":1026},[1002,57142,1031],{"class":1030},[1002,57144,6211],{"class":1019},[1002,57146,57147],{"class":1030},") });\n",[1002,57149,57150,57152,57155,57157,57159,57161,57163,57165,57167,57169,57171,57173,57175,57177],{"class":1004,"line":2006},[1002,57151,51906],{"class":1015},[1002,57153,57154],{"class":1030}," map2 ",[1002,57156,2393],{"class":1015},[1002,57158,51301],{"class":1030},[1002,57160,32239],{"class":1026},[1002,57162,57128],{"class":1030},[1002,57164,6211],{"class":1019},[1002,57166,57133],{"class":1030},[1002,57168,6211],{"class":1019},[1002,57170,57138],{"class":1030},[1002,57172,39708],{"class":1026},[1002,57174,1031],{"class":1030},[1002,57176,6211],{"class":1019},[1002,57178,57147],{"class":1030},[1002,57180,57181],{"class":1004,"line":2011},[1002,57182,1051],{"emptyLinePlaceholder":1050},[1002,57184,57185,57187,57190,57192],{"class":1004,"line":2017},[1002,57186,34298],{"class":1026},[1002,57188,57189],{"class":1030},"(map1).to.not.",[1002,57191,38558],{"class":1026},[1002,57193,57194],{"class":1030},"(map2);\n",[1002,57196,57197,57199,57202,57205],{"class":1004,"line":2022},[1002,57198,34298],{"class":1026},[1002,57200,57201],{"class":1030},"(Immutable.",[1002,57203,57204],{"class":1026},"is",[1002,57206,57207],{"class":1030},"(map1, map2)).to.be.true;\n",[1002,57209,57210],{"class":1004,"line":2442},[1002,57211,19836],{"class":1030},[1002,57213,57214],{"class":1004,"line":2466},[1002,57215,1051],{"emptyLinePlaceholder":1050},[1002,57217,57218,57220,57222,57225,57227,57229],{"class":1004,"line":2471},[1002,57219,34260],{"class":1026},[1002,57221,1031],{"class":1030},[1002,57223,57224],{"class":1034},"'should be equal if subset is equal'",[1002,57226,1251],{"class":1030},[1002,57228,6965],{"class":1015},[1002,57230,9772],{"class":1030},[1002,57232,57233,57235,57237,57239,57241,57243,57245,57247,57249,57251],{"class":1004,"line":2476},[1002,57234,51906],{"class":1015},[1002,57236,57119],{"class":1030},[1002,57238,2393],{"class":1015},[1002,57240,51301],{"class":1030},[1002,57242,32239],{"class":1026},[1002,57244,57128],{"class":1030},[1002,57246,6211],{"class":1019},[1002,57248,57133],{"class":1030},[1002,57250,6211],{"class":1019},[1002,57252,28417],{"class":1030},[1002,57254,57255,57257,57259,57261,57263,57265,57267,57269,57271,57273,57276,57278],{"class":1004,"line":2481},[1002,57256,51906],{"class":1015},[1002,57258,57154],{"class":1030},[1002,57260,2393],{"class":1015},[1002,57262,51301],{"class":1030},[1002,57264,32239],{"class":1026},[1002,57266,57128],{"class":1030},[1002,57268,6211],{"class":1019},[1002,57270,57133],{"class":1030},[1002,57272,6211],{"class":1019},[1002,57274,57275],{"class":1030},", c: ",[1002,57277,2796],{"class":1019},[1002,57279,28417],{"class":1030},[1002,57281,57282],{"class":1004,"line":2491},[1002,57283,1051],{"emptyLinePlaceholder":1050},[1002,57285,57286,57288,57291,57294],{"class":1004,"line":2502},[1002,57287,34298],{"class":1026},[1002,57289,57290],{"class":1030},"(map1.",[1002,57292,57293],{"class":1026},"isSubset",[1002,57295,57296],{"class":1030},"(map2)).to.be.true;\n",[1002,57298,57299,57301,57304,57306],{"class":1004,"line":2513},[1002,57300,34298],{"class":1026},[1002,57302,57303],{"class":1030},"(map2.",[1002,57305,57293],{"class":1026},[1002,57307,57308],{"class":1030},"(map1)).to.not.be.true;\n",[1002,57310,57311],{"class":1004,"line":2535},[1002,57312,19836],{"class":1030},[1002,57314,57315],{"class":1004,"line":2557},[1002,57316,1051],{"emptyLinePlaceholder":1050},[1002,57318,57319,57321,57323,57326,57328,57330],{"class":1004,"line":2562},[1002,57320,34260],{"class":1026},[1002,57322,1031],{"class":1030},[1002,57324,57325],{"class":1034},"'should be equal if superset is equal'",[1002,57327,1251],{"class":1030},[1002,57329,6965],{"class":1015},[1002,57331,9772],{"class":1030},[1002,57333,57334,57336,57338,57340,57342,57344,57346,57348,57350,57352],{"class":1004,"line":2567},[1002,57335,51906],{"class":1015},[1002,57337,57119],{"class":1030},[1002,57339,2393],{"class":1015},[1002,57341,51301],{"class":1030},[1002,57343,32239],{"class":1026},[1002,57345,57128],{"class":1030},[1002,57347,6211],{"class":1019},[1002,57349,57133],{"class":1030},[1002,57351,6211],{"class":1019},[1002,57353,28417],{"class":1030},[1002,57355,57356,57358,57360,57362,57364,57366,57368,57370,57372,57374,57376,57378],{"class":1004,"line":2572},[1002,57357,51906],{"class":1015},[1002,57359,57154],{"class":1030},[1002,57361,2393],{"class":1015},[1002,57363,51301],{"class":1030},[1002,57365,32239],{"class":1026},[1002,57367,57128],{"class":1030},[1002,57369,6211],{"class":1019},[1002,57371,57133],{"class":1030},[1002,57373,6211],{"class":1019},[1002,57375,57275],{"class":1030},[1002,57377,2796],{"class":1019},[1002,57379,28417],{"class":1030},[1002,57381,57382],{"class":1004,"line":2582},[1002,57383,1051],{"emptyLinePlaceholder":1050},[1002,57385,57386,57388,57390,57393],{"class":1004,"line":2594},[1002,57387,34298],{"class":1026},[1002,57389,57303],{"class":1030},[1002,57391,57392],{"class":1026},"isSuperset",[1002,57394,57395],{"class":1030},"(map1)).to.be.true;\n",[1002,57397,57398,57400,57402,57404],{"class":1004,"line":2603},[1002,57399,34298],{"class":1026},[1002,57401,57290],{"class":1030},[1002,57403,57392],{"class":1026},[1002,57405,57406],{"class":1030},"(map2)).to.not.be.true;\n",[1002,57408,57409],{"class":1004,"line":2619},[1002,57410,19836],{"class":1030},[1002,57412,57413],{"class":1004,"line":2633},[1002,57414,2804],{"class":1030},[1002,57416,57417],{"class":1004,"line":2641},[1002,57418,1051],{"emptyLinePlaceholder":1050},[1002,57420,57421,57423,57425],{"class":1004,"line":2655},[1002,57422,51753],{"class":1030},[1002,57424,2061],{"class":1026},[1002,57426,1428],{"class":1030},[925,57428,57429],{},"Equality checking deeply nested objects is painful. Fortunately, immutable.js makes this task easy with its is and is subset methods. Let's see how we can take two different immutable maps and check for their equality. Create a constant of map 1 and make it an immutable map with a few keys.",[953,57431,45029,57433,57436],{"id":57432},"using-fromjs-to-convert-plain-javascript-objects-into-immutable-data",[941,57434,57435],{},"fromJS()"," to Convert Plain JavaScript Objects into Immutable Data",[925,57438,57439,57440,57442,57443,57445],{},"Immutable.js offers the ",[941,57441,57435],{}," method to build immutable structures from objects and array. Objects are converted into maps. Arrays are converted into lists. The ",[941,57444,57435],{}," method can also take a reviver function for custom conversions.",[993,57447,57449],{"className":995,"code":57448,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\ndescribe('Using fromJS() to Convert Plain JavaScript Objects into Immutable Data', function () {\n it('should create deeply nested Map() from a plain javascript object', function () {\n var plainJSObject = {\n title: 'Go to grocery',\n text: 'I need milk and eggs',\n completed: false,\n category: { title: 'House Duties', priority: 10 },\n };\n\n var immutableTodo = Immutable.fromJS(plainJSObject);\n\n expect(Immutable.Map.isMap(immutableTodo)).to.be.true;\n expect(immutableTodo.getIn(['category', 'title'])).to.equal('House Duties');\n });\n\n it('should create deeply nested List() from a plain javascript array', function () {\n var plainJSArray = [\n 'Go to grocery',\n 'Buy milk and eggs',\n 'Help kids with homework',\n ['Buy Lemons', 'Make Lemonade'],\n ];\n\n var immutableTodoList = Immutable.fromJS(plainJSArray);\n\n expect(Immutable.List.isList(immutableTodoList)).to.be.true;\n expect(immutableTodoList.getIn([3, 1])).to.equal('Make Lemonade');\n });\n\n it('should use reviver to generate Map() instead of List() from a plain javascript array', function () {\n var plainJSArray = [\n 'Go to grocery',\n 'Buy milk and eggs',\n 'Help kids with homework',\n ['Buy Lemons', 'Make Lemonade'],\n ];\n\n var immutableTodo = Immutable.fromJS(plainJSArray, function (key, value) {\n return value.toMap();\n });\n\n expect(Immutable.Map.isMap(immutableTodo)).to.be.true;\n expect(immutableTodo.getIn([3, 1])).to.equal('Make Lemonade');\n });\n});\n\nmocha.run();\n",[941,57450,57451,57463,57473,57477,57492,57507,57518,57528,57538,57547,57562,57566,57570,57587,57591,57604,57634,57638,57642,57657,57668,57675,57682,57689,57704,57708,57712,57728,57732,57745,57772,57776,57780,57795,57805,57811,57817,57823,57835,57839,57843,57870,57882,57886,57890,57900,57926,57930,57934,57938],{"__ignoreMap":998},[1002,57452,57453,57455,57457,57459,57461],{"class":1004,"line":1005},[1002,57454,51753],{"class":1030},[1002,57456,51756],{"class":1026},[1002,57458,1031],{"class":1030},[1002,57460,51761],{"class":1034},[1002,57462,1085],{"class":1030},[1002,57464,57465,57467,57469,57471],{"class":1004,"line":1012},[1002,57466,18311],{"class":1015},[1002,57468,51770],{"class":1030},[1002,57470,2393],{"class":1015},[1002,57472,51775],{"class":1030},[1002,57474,57475],{"class":1004,"line":1047},[1002,57476,1051],{"emptyLinePlaceholder":1050},[1002,57478,57479,57481,57483,57486,57488,57490],{"class":1004,"line":1054},[1002,57480,12742],{"class":1026},[1002,57482,1031],{"class":1030},[1002,57484,57485],{"class":1034},"'Using fromJS() to Convert Plain JavaScript Objects into Immutable Data'",[1002,57487,1251],{"class":1030},[1002,57489,6965],{"class":1015},[1002,57491,9772],{"class":1030},[1002,57493,57494,57496,57498,57501,57503,57505],{"class":1004,"line":1060},[1002,57495,34260],{"class":1026},[1002,57497,1031],{"class":1030},[1002,57499,57500],{"class":1034},"'should create deeply nested Map() from a plain javascript object'",[1002,57502,1251],{"class":1030},[1002,57504,6965],{"class":1015},[1002,57506,9772],{"class":1030},[1002,57508,57509,57511,57514,57516],{"class":1004,"line":1272},[1002,57510,51906],{"class":1015},[1002,57512,57513],{"class":1030}," plainJSObject ",[1002,57515,2393],{"class":1015},[1002,57517,1457],{"class":1030},[1002,57519,57520,57523,57526],{"class":1004,"line":1348},[1002,57521,57522],{"class":1030}," title: ",[1002,57524,57525],{"class":1034},"'Go to grocery'",[1002,57527,1143],{"class":1030},[1002,57529,57530,57533,57536],{"class":1004,"line":1354},[1002,57531,57532],{"class":1030}," text: ",[1002,57534,57535],{"class":1034},"'I need milk and eggs'",[1002,57537,1143],{"class":1030},[1002,57539,57540,57543,57545],{"class":1004,"line":1360},[1002,57541,57542],{"class":1030}," completed: ",[1002,57544,19341],{"class":1019},[1002,57546,1143],{"class":1030},[1002,57548,57549,57552,57555,57558,57560],{"class":1004,"line":1366},[1002,57550,57551],{"class":1030}," category: { title: ",[1002,57553,57554],{"class":1034},"'House Duties'",[1002,57556,57557],{"class":1030},", priority: ",[1002,57559,4818],{"class":1019},[1002,57561,33835],{"class":1030},[1002,57563,57564],{"class":1004,"line":1946},[1002,57565,10900],{"class":1030},[1002,57567,57568],{"class":1004,"line":1956},[1002,57569,1051],{"emptyLinePlaceholder":1050},[1002,57571,57572,57574,57577,57579,57581,57584],{"class":1004,"line":1961},[1002,57573,51906],{"class":1015},[1002,57575,57576],{"class":1030}," immutableTodo ",[1002,57578,2393],{"class":1015},[1002,57580,51301],{"class":1030},[1002,57582,57583],{"class":1026},"fromJS",[1002,57585,57586],{"class":1030},"(plainJSObject);\n",[1002,57588,57589],{"class":1004,"line":1971},[1002,57590,1051],{"emptyLinePlaceholder":1050},[1002,57592,57593,57595,57598,57601],{"class":1004,"line":1980},[1002,57594,34298],{"class":1026},[1002,57596,57597],{"class":1030},"(Immutable.Map.",[1002,57599,57600],{"class":1026},"isMap",[1002,57602,57603],{"class":1030},"(immutableTodo)).to.be.true;\n",[1002,57605,57606,57608,57611,57613,57615,57618,57620,57623,57626,57628,57630,57632],{"class":1004,"line":1985},[1002,57607,34298],{"class":1026},[1002,57609,57610],{"class":1030},"(immutableTodo.",[1002,57612,53238],{"class":1026},[1002,57614,30910],{"class":1030},[1002,57616,57617],{"class":1034},"'category'",[1002,57619,1251],{"class":1030},[1002,57621,57622],{"class":1034},"'title'",[1002,57624,57625],{"class":1030},"])).to.",[1002,57627,38558],{"class":1026},[1002,57629,1031],{"class":1030},[1002,57631,57554],{"class":1034},[1002,57633,1085],{"class":1030},[1002,57635,57636],{"class":1004,"line":1995},[1002,57637,19836],{"class":1030},[1002,57639,57640],{"class":1004,"line":2006},[1002,57641,1051],{"emptyLinePlaceholder":1050},[1002,57643,57644,57646,57648,57651,57653,57655],{"class":1004,"line":2011},[1002,57645,34260],{"class":1026},[1002,57647,1031],{"class":1030},[1002,57649,57650],{"class":1034},"'should create deeply nested List() from a plain javascript array'",[1002,57652,1251],{"class":1030},[1002,57654,6965],{"class":1015},[1002,57656,9772],{"class":1030},[1002,57658,57659,57661,57664,57666],{"class":1004,"line":2017},[1002,57660,51906],{"class":1015},[1002,57662,57663],{"class":1030}," plainJSArray ",[1002,57665,2393],{"class":1015},[1002,57667,10274],{"class":1030},[1002,57669,57670,57673],{"class":1004,"line":2022},[1002,57671,57672],{"class":1034}," 'Go to grocery'",[1002,57674,1143],{"class":1030},[1002,57676,57677,57680],{"class":1004,"line":2442},[1002,57678,57679],{"class":1034}," 'Buy milk and eggs'",[1002,57681,1143],{"class":1030},[1002,57683,57684,57687],{"class":1004,"line":2466},[1002,57685,57686],{"class":1034}," 'Help kids with homework'",[1002,57688,1143],{"class":1030},[1002,57690,57691,57694,57697,57699,57702],{"class":1004,"line":2471},[1002,57692,57693],{"class":1030}," [",[1002,57695,57696],{"class":1034},"'Buy Lemons'",[1002,57698,1251],{"class":1030},[1002,57700,57701],{"class":1034},"'Make Lemonade'",[1002,57703,1903],{"class":1030},[1002,57705,57706],{"class":1004,"line":2476},[1002,57707,56483],{"class":1030},[1002,57709,57710],{"class":1004,"line":2481},[1002,57711,1051],{"emptyLinePlaceholder":1050},[1002,57713,57714,57716,57719,57721,57723,57725],{"class":1004,"line":2491},[1002,57715,51906],{"class":1015},[1002,57717,57718],{"class":1030}," immutableTodoList ",[1002,57720,2393],{"class":1015},[1002,57722,51301],{"class":1030},[1002,57724,57583],{"class":1026},[1002,57726,57727],{"class":1030},"(plainJSArray);\n",[1002,57729,57730],{"class":1004,"line":2502},[1002,57731,1051],{"emptyLinePlaceholder":1050},[1002,57733,57734,57736,57739,57742],{"class":1004,"line":2513},[1002,57735,34298],{"class":1026},[1002,57737,57738],{"class":1030},"(Immutable.List.",[1002,57740,57741],{"class":1026},"isList",[1002,57743,57744],{"class":1030},"(immutableTodoList)).to.be.true;\n",[1002,57746,57747,57749,57752,57754,57756,57758,57760,57762,57764,57766,57768,57770],{"class":1004,"line":2535},[1002,57748,34298],{"class":1026},[1002,57750,57751],{"class":1030},"(immutableTodoList.",[1002,57753,53238],{"class":1026},[1002,57755,30910],{"class":1030},[1002,57757,2796],{"class":1019},[1002,57759,1251],{"class":1030},[1002,57761,6211],{"class":1019},[1002,57763,57625],{"class":1030},[1002,57765,38558],{"class":1026},[1002,57767,1031],{"class":1030},[1002,57769,57701],{"class":1034},[1002,57771,1085],{"class":1030},[1002,57773,57774],{"class":1004,"line":2557},[1002,57775,19836],{"class":1030},[1002,57777,57778],{"class":1004,"line":2562},[1002,57779,1051],{"emptyLinePlaceholder":1050},[1002,57781,57782,57784,57786,57789,57791,57793],{"class":1004,"line":2567},[1002,57783,34260],{"class":1026},[1002,57785,1031],{"class":1030},[1002,57787,57788],{"class":1034},"'should use reviver to generate Map() instead of List() from a plain javascript array'",[1002,57790,1251],{"class":1030},[1002,57792,6965],{"class":1015},[1002,57794,9772],{"class":1030},[1002,57796,57797,57799,57801,57803],{"class":1004,"line":2572},[1002,57798,51906],{"class":1015},[1002,57800,57663],{"class":1030},[1002,57802,2393],{"class":1015},[1002,57804,10274],{"class":1030},[1002,57806,57807,57809],{"class":1004,"line":2582},[1002,57808,57672],{"class":1034},[1002,57810,1143],{"class":1030},[1002,57812,57813,57815],{"class":1004,"line":2594},[1002,57814,57679],{"class":1034},[1002,57816,1143],{"class":1030},[1002,57818,57819,57821],{"class":1004,"line":2603},[1002,57820,57686],{"class":1034},[1002,57822,1143],{"class":1030},[1002,57824,57825,57827,57829,57831,57833],{"class":1004,"line":2619},[1002,57826,57693],{"class":1030},[1002,57828,57696],{"class":1034},[1002,57830,1251],{"class":1030},[1002,57832,57701],{"class":1034},[1002,57834,1903],{"class":1030},[1002,57836,57837],{"class":1004,"line":2633},[1002,57838,56483],{"class":1030},[1002,57840,57841],{"class":1004,"line":2641},[1002,57842,1051],{"emptyLinePlaceholder":1050},[1002,57844,57845,57847,57849,57851,57853,57855,57858,57860,57862,57864,57866,57868],{"class":1004,"line":2655},[1002,57846,51906],{"class":1015},[1002,57848,57576],{"class":1030},[1002,57850,2393],{"class":1015},[1002,57852,51301],{"class":1030},[1002,57854,57583],{"class":1026},[1002,57856,57857],{"class":1030},"(plainJSArray, ",[1002,57859,6965],{"class":1015},[1002,57861,6513],{"class":1030},[1002,57863,7857],{"class":2378},[1002,57865,1251],{"class":1030},[1002,57867,5047],{"class":2378},[1002,57869,2382],{"class":1030},[1002,57871,57872,57874,57877,57880],{"class":1004,"line":2667},[1002,57873,4376],{"class":1015},[1002,57875,57876],{"class":1030}," value.",[1002,57878,57879],{"class":1026},"toMap",[1002,57881,1428],{"class":1030},[1002,57883,57884],{"class":1004,"line":2674},[1002,57885,8353],{"class":1030},[1002,57887,57888],{"class":1004,"line":2679},[1002,57889,1051],{"emptyLinePlaceholder":1050},[1002,57891,57892,57894,57896,57898],{"class":1004,"line":2684},[1002,57893,34298],{"class":1026},[1002,57895,57597],{"class":1030},[1002,57897,57600],{"class":1026},[1002,57899,57603],{"class":1030},[1002,57901,57902,57904,57906,57908,57910,57912,57914,57916,57918,57920,57922,57924],{"class":1004,"line":2704},[1002,57903,34298],{"class":1026},[1002,57905,57610],{"class":1030},[1002,57907,53238],{"class":1026},[1002,57909,30910],{"class":1030},[1002,57911,2796],{"class":1019},[1002,57913,1251],{"class":1030},[1002,57915,6211],{"class":1019},[1002,57917,57625],{"class":1030},[1002,57919,38558],{"class":1026},[1002,57921,1031],{"class":1030},[1002,57923,57701],{"class":1034},[1002,57925,1085],{"class":1030},[1002,57927,57928],{"class":1004,"line":2709},[1002,57929,19836],{"class":1030},[1002,57931,57932],{"class":1004,"line":2714},[1002,57933,2804],{"class":1030},[1002,57935,57936],{"class":1004,"line":2719},[1002,57937,1051],{"emptyLinePlaceholder":1050},[1002,57939,57940,57942,57944],{"class":1004,"line":2735},[1002,57941,51753],{"class":1030},[1002,57943,2061],{"class":1026},[1002,57945,1428],{"class":1030},[953,57947,57949,57950,2034,57953],{"id":57948},"differences-between-the-immutablejs-map-and-list","Differences between the Immutable.js ",[941,57951,57952],{},"Map()",[941,57954,57955],{},"List()",[925,57957,57958,57959,57961],{},"The Immutable.js ",[941,57960,57952],{}," is analogous to a Javascript Object or Hash since it is comprised of key-value pairs. The Immutable.js List() is analogous to a Javascript Array and contains many of the same native methods. Let's compare the two and dive into the basics of List().",[993,57963,57965],{"className":995,"code":57964,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\nfunction Todo(title, items, completed) {\n this.id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);\n this.title = title;\n this.items = items;\n this.completed = completed;\n}\n\nfunction addTodoToMap(todos, todo) {\n return todos.set(todo.id, todo);\n}\n\nfunction addTodoToList(todos, todo) {\n return todos.push(todo);\n}\n\ndescribe('Differences between the Immutable.js Map() and List()', function () {\n it('should find same todo in List() and Map()', function () {\n var todo = new Todo('Todo 1');\n\n var todosMap = Immutable.Map();\n todosMap = addTodoToMap(todosMap, todo);\n\n var todosList = Immutable.List();\n todosList = addTodoToList(todosList, todo);\n\n expect(todosMap.get(todo.id)).to.equal(todo);\n expect(todosList.get(0)).to.equal(todo);\n });\n\n it('should create List() from series of values', function () {\n var todoItems = ['Milk', 'Eggs', 'Detergent', 'Bread', 'Steak'];\n var list = Immutable.List.of('Milk', 'Eggs', 'Detergent', 'Bread', 'Steak');\n\n var count = 0;\n _.each(todoItems, function (item) {\n expect(list.get(count)).to.equal(item);\n count++;\n });\n });\n\n it('should remove last element from List()', function () {\n var todoItems = ['Milk', 'Eggs', 'Detergent', 'Bread', 'Steak'];\n var list = Immutable.List(todoItems);\n\n list = list.pop(); \u002F\u002F Just like Array\n\n var count = 0;\n _.each(todoItems, function (item) {\n if (count \u003C 4) expect(list.get(count)).to.equal(item);\n else expect(list.get(count)).to.not.equal(item);\n\n count++;\n });\n });\n});\n\nmocha.run();\n",[941,57966,57967,57979,57989,57993,58013,58055,58065,58075,58085,58089,58093,58110,58120,58124,58128,58145,58155,58159,58163,58178,58193,58211,58215,58230,58242,58246,58261,58273,58277,58292,58311,58315,58319,58334,58370,58406,58410,58422,58439,58455,58464,58468,58472,58476,58491,58521,58536,58540,58557,58561,58573,58589,58614,58633,58637,58645,58649,58653,58657,58661],{"__ignoreMap":998},[1002,57968,57969,57971,57973,57975,57977],{"class":1004,"line":1005},[1002,57970,51753],{"class":1030},[1002,57972,51756],{"class":1026},[1002,57974,1031],{"class":1030},[1002,57976,51761],{"class":1034},[1002,57978,1085],{"class":1030},[1002,57980,57981,57983,57985,57987],{"class":1004,"line":1012},[1002,57982,18311],{"class":1015},[1002,57984,51770],{"class":1030},[1002,57986,2393],{"class":1015},[1002,57988,51775],{"class":1030},[1002,57990,57991],{"class":1004,"line":1047},[1002,57992,1051],{"emptyLinePlaceholder":1050},[1002,57994,57995,57997,57999,58001,58003,58005,58007,58009,58011],{"class":1004,"line":1054},[1002,57996,6965],{"class":1015},[1002,57998,52177],{"class":1026},[1002,58000,1031],{"class":1030},[1002,58002,15029],{"class":2378},[1002,58004,1251],{"class":1030},[1002,58006,6656],{"class":2378},[1002,58008,1251],{"class":1030},[1002,58010,52194],{"class":2378},[1002,58012,2382],{"class":1030},[1002,58014,58015,58017,58019,58021,58023,58025,58027,58029,58031,58033,58035,58037,58039,58041,58043,58045,58047,58049,58051,58053],{"class":1004,"line":1060},[1002,58016,39364],{"class":1019},[1002,58018,52203],{"class":1030},[1002,58020,2393],{"class":1015},[1002,58022,6513],{"class":1030},[1002,58024,52210],{"class":1015},[1002,58026,31486],{"class":1026},[1002,58028,10191],{"class":1030},[1002,58030,5064],{"class":1015},[1002,58032,4673],{"class":1030},[1002,58034,4676],{"class":1026},[1002,58036,52223],{"class":1030},[1002,58038,52226],{"class":1026},[1002,58040,10191],{"class":1030},[1002,58042,4703],{"class":1015},[1002,58044,52233],{"class":1019},[1002,58046,21297],{"class":1030},[1002,58048,15085],{"class":1026},[1002,58050,1031],{"class":1030},[1002,58052,52242],{"class":1019},[1002,58054,1085],{"class":1030},[1002,58056,58057,58059,58061,58063],{"class":1004,"line":1272},[1002,58058,39364],{"class":1019},[1002,58060,52251],{"class":1030},[1002,58062,2393],{"class":1015},[1002,58064,52256],{"class":1030},[1002,58066,58067,58069,58071,58073],{"class":1004,"line":1348},[1002,58068,39364],{"class":1019},[1002,58070,6678],{"class":1030},[1002,58072,2393],{"class":1015},[1002,58074,6683],{"class":1030},[1002,58076,58077,58079,58081,58083],{"class":1004,"line":1354},[1002,58078,39364],{"class":1019},[1002,58080,52275],{"class":1030},[1002,58082,2393],{"class":1015},[1002,58084,52280],{"class":1030},[1002,58086,58087],{"class":1004,"line":1360},[1002,58088,1170],{"class":1030},[1002,58090,58091],{"class":1004,"line":1366},[1002,58092,1051],{"emptyLinePlaceholder":1050},[1002,58094,58095,58097,58100,58102,58104,58106,58108],{"class":1004,"line":1946},[1002,58096,6965],{"class":1015},[1002,58098,58099],{"class":1026}," addTodoToMap",[1002,58101,1031],{"class":1030},[1002,58103,52300],{"class":2378},[1002,58105,1251],{"class":1030},[1002,58107,52305],{"class":2378},[1002,58109,2382],{"class":1030},[1002,58111,58112,58114,58116,58118],{"class":1004,"line":1956},[1002,58113,15066],{"class":1015},[1002,58115,52314],{"class":1030},[1002,58117,40544],{"class":1026},[1002,58119,52319],{"class":1030},[1002,58121,58122],{"class":1004,"line":1961},[1002,58123,1170],{"class":1030},[1002,58125,58126],{"class":1004,"line":1971},[1002,58127,1051],{"emptyLinePlaceholder":1050},[1002,58129,58130,58132,58135,58137,58139,58141,58143],{"class":1004,"line":1980},[1002,58131,6965],{"class":1015},[1002,58133,58134],{"class":1026}," addTodoToList",[1002,58136,1031],{"class":1030},[1002,58138,52300],{"class":2378},[1002,58140,1251],{"class":1030},[1002,58142,52305],{"class":2378},[1002,58144,2382],{"class":1030},[1002,58146,58147,58149,58151,58153],{"class":1004,"line":1985},[1002,58148,15066],{"class":1015},[1002,58150,52314],{"class":1030},[1002,58152,4974],{"class":1026},[1002,58154,52596],{"class":1030},[1002,58156,58157],{"class":1004,"line":1995},[1002,58158,1170],{"class":1030},[1002,58160,58161],{"class":1004,"line":2006},[1002,58162,1051],{"emptyLinePlaceholder":1050},[1002,58164,58165,58167,58169,58172,58174,58176],{"class":1004,"line":2011},[1002,58166,12742],{"class":1026},[1002,58168,1031],{"class":1030},[1002,58170,58171],{"class":1034},"'Differences between the Immutable.js Map() and List()'",[1002,58173,1251],{"class":1030},[1002,58175,6965],{"class":1015},[1002,58177,9772],{"class":1030},[1002,58179,58180,58182,58184,58187,58189,58191],{"class":1004,"line":2017},[1002,58181,34260],{"class":1026},[1002,58183,1031],{"class":1030},[1002,58185,58186],{"class":1034},"'should find same todo in List() and Map()'",[1002,58188,1251],{"class":1030},[1002,58190,6965],{"class":1015},[1002,58192,9772],{"class":1030},[1002,58194,58195,58197,58199,58201,58203,58205,58207,58209],{"class":1004,"line":2022},[1002,58196,51906],{"class":1015},[1002,58198,52522],{"class":1030},[1002,58200,2393],{"class":1015},[1002,58202,2690],{"class":1015},[1002,58204,52177],{"class":1026},[1002,58206,1031],{"class":1030},[1002,58208,52533],{"class":1034},[1002,58210,1085],{"class":1030},[1002,58212,58213],{"class":1004,"line":2442},[1002,58214,1051],{"emptyLinePlaceholder":1050},[1002,58216,58217,58219,58222,58224,58226,58228],{"class":1004,"line":2466},[1002,58218,51906],{"class":1015},[1002,58220,58221],{"class":1030}," todosMap ",[1002,58223,2393],{"class":1015},[1002,58225,51301],{"class":1030},[1002,58227,32239],{"class":1026},[1002,58229,1428],{"class":1030},[1002,58231,58232,58235,58237,58239],{"class":1004,"line":2471},[1002,58233,58234],{"class":1030}," todosMap ",[1002,58236,2393],{"class":1015},[1002,58238,58099],{"class":1026},[1002,58240,58241],{"class":1030},"(todosMap, todo);\n",[1002,58243,58244],{"class":1004,"line":2476},[1002,58245,1051],{"emptyLinePlaceholder":1050},[1002,58247,58248,58250,58253,58255,58257,58259],{"class":1004,"line":2481},[1002,58249,51906],{"class":1015},[1002,58251,58252],{"class":1030}," todosList ",[1002,58254,2393],{"class":1015},[1002,58256,51301],{"class":1030},[1002,58258,23271],{"class":1026},[1002,58260,1428],{"class":1030},[1002,58262,58263,58266,58268,58270],{"class":1004,"line":2491},[1002,58264,58265],{"class":1030}," todosList ",[1002,58267,2393],{"class":1015},[1002,58269,58134],{"class":1026},[1002,58271,58272],{"class":1030},"(todosList, todo);\n",[1002,58274,58275],{"class":1004,"line":2502},[1002,58276,1051],{"emptyLinePlaceholder":1050},[1002,58278,58279,58281,58284,58286,58288,58290],{"class":1004,"line":2513},[1002,58280,34298],{"class":1026},[1002,58282,58283],{"class":1030},"(todosMap.",[1002,58285,8070],{"class":1026},[1002,58287,52591],{"class":1030},[1002,58289,38558],{"class":1026},[1002,58291,52596],{"class":1030},[1002,58293,58294,58296,58299,58301,58303,58305,58307,58309],{"class":1004,"line":2535},[1002,58295,34298],{"class":1026},[1002,58297,58298],{"class":1030},"(todosList.",[1002,58300,8070],{"class":1026},[1002,58302,1031],{"class":1030},[1002,58304,5867],{"class":1019},[1002,58306,52073],{"class":1030},[1002,58308,38558],{"class":1026},[1002,58310,52596],{"class":1030},[1002,58312,58313],{"class":1004,"line":2557},[1002,58314,19836],{"class":1030},[1002,58316,58317],{"class":1004,"line":2562},[1002,58318,1051],{"emptyLinePlaceholder":1050},[1002,58320,58321,58323,58325,58328,58330,58332],{"class":1004,"line":2567},[1002,58322,34260],{"class":1026},[1002,58324,1031],{"class":1030},[1002,58326,58327],{"class":1034},"'should create List() from series of values'",[1002,58329,1251],{"class":1030},[1002,58331,6965],{"class":1015},[1002,58333,9772],{"class":1030},[1002,58335,58336,58338,58341,58343,58345,58348,58350,58353,58355,58358,58360,58363,58365,58368],{"class":1004,"line":2572},[1002,58337,51906],{"class":1015},[1002,58339,58340],{"class":1030}," todoItems ",[1002,58342,2393],{"class":1015},[1002,58344,1897],{"class":1030},[1002,58346,58347],{"class":1034},"'Milk'",[1002,58349,1251],{"class":1030},[1002,58351,58352],{"class":1034},"'Eggs'",[1002,58354,1251],{"class":1030},[1002,58356,58357],{"class":1034},"'Detergent'",[1002,58359,1251],{"class":1030},[1002,58361,58362],{"class":1034},"'Bread'",[1002,58364,1251],{"class":1030},[1002,58366,58367],{"class":1034},"'Steak'",[1002,58369,6754],{"class":1030},[1002,58371,58372,58374,58377,58379,58382,58384,58386,58388,58390,58392,58394,58396,58398,58400,58402,58404],{"class":1004,"line":2582},[1002,58373,51906],{"class":1015},[1002,58375,58376],{"class":1030}," list ",[1002,58378,2393],{"class":1015},[1002,58380,58381],{"class":1030}," Immutable.List.",[1002,58383,39708],{"class":1026},[1002,58385,1031],{"class":1030},[1002,58387,58347],{"class":1034},[1002,58389,1251],{"class":1030},[1002,58391,58352],{"class":1034},[1002,58393,1251],{"class":1030},[1002,58395,58357],{"class":1034},[1002,58397,1251],{"class":1030},[1002,58399,58362],{"class":1034},[1002,58401,1251],{"class":1030},[1002,58403,58367],{"class":1034},[1002,58405,1085],{"class":1030},[1002,58407,58408],{"class":1004,"line":2594},[1002,58409,1051],{"emptyLinePlaceholder":1050},[1002,58411,58412,58414,58416,58418,58420],{"class":1004,"line":2603},[1002,58413,51906],{"class":1015},[1002,58415,4700],{"class":1030},[1002,58417,2393],{"class":1015},[1002,58419,4910],{"class":1019},[1002,58421,1407],{"class":1030},[1002,58423,58424,58426,58428,58431,58433,58435,58437],{"class":1004,"line":2619},[1002,58425,52889],{"class":1030},[1002,58427,6633],{"class":1026},[1002,58429,58430],{"class":1030},"(todoItems, ",[1002,58432,6965],{"class":1015},[1002,58434,6513],{"class":1030},[1002,58436,6970],{"class":2378},[1002,58438,2382],{"class":1030},[1002,58440,58441,58443,58446,58448,58451,58453],{"class":1004,"line":2633},[1002,58442,55038],{"class":1026},[1002,58444,58445],{"class":1030},"(list.",[1002,58447,8070],{"class":1026},[1002,58449,58450],{"class":1030},"(count)).to.",[1002,58452,38558],{"class":1026},[1002,58454,6886],{"class":1030},[1002,58456,58457,58460,58462],{"class":1004,"line":2641},[1002,58458,58459],{"class":1030}," count",[1002,58461,6545],{"class":1015},[1002,58463,1407],{"class":1030},[1002,58465,58466],{"class":1004,"line":2655},[1002,58467,8353],{"class":1030},[1002,58469,58470],{"class":1004,"line":2667},[1002,58471,19836],{"class":1030},[1002,58473,58474],{"class":1004,"line":2674},[1002,58475,1051],{"emptyLinePlaceholder":1050},[1002,58477,58478,58480,58482,58485,58487,58489],{"class":1004,"line":2679},[1002,58479,34260],{"class":1026},[1002,58481,1031],{"class":1030},[1002,58483,58484],{"class":1034},"'should remove last element from List()'",[1002,58486,1251],{"class":1030},[1002,58488,6965],{"class":1015},[1002,58490,9772],{"class":1030},[1002,58492,58493,58495,58497,58499,58501,58503,58505,58507,58509,58511,58513,58515,58517,58519],{"class":1004,"line":2684},[1002,58494,51906],{"class":1015},[1002,58496,58340],{"class":1030},[1002,58498,2393],{"class":1015},[1002,58500,1897],{"class":1030},[1002,58502,58347],{"class":1034},[1002,58504,1251],{"class":1030},[1002,58506,58352],{"class":1034},[1002,58508,1251],{"class":1030},[1002,58510,58357],{"class":1034},[1002,58512,1251],{"class":1030},[1002,58514,58362],{"class":1034},[1002,58516,1251],{"class":1030},[1002,58518,58367],{"class":1034},[1002,58520,6754],{"class":1030},[1002,58522,58523,58525,58527,58529,58531,58533],{"class":1004,"line":2704},[1002,58524,51906],{"class":1015},[1002,58526,58376],{"class":1030},[1002,58528,2393],{"class":1015},[1002,58530,51301],{"class":1030},[1002,58532,23271],{"class":1026},[1002,58534,58535],{"class":1030},"(todoItems);\n",[1002,58537,58538],{"class":1004,"line":2709},[1002,58539,1051],{"emptyLinePlaceholder":1050},[1002,58541,58542,58545,58547,58550,58552,58554],{"class":1004,"line":2714},[1002,58543,58544],{"class":1030}," list ",[1002,58546,2393],{"class":1015},[1002,58548,58549],{"class":1030}," list.",[1002,58551,5008],{"class":1026},[1002,58553,6859],{"class":1030},[1002,58555,58556],{"class":1008},"\u002F\u002F Just like Array\n",[1002,58558,58559],{"class":1004,"line":2719},[1002,58560,1051],{"emptyLinePlaceholder":1050},[1002,58562,58563,58565,58567,58569,58571],{"class":1004,"line":2735},[1002,58564,51906],{"class":1015},[1002,58566,4700],{"class":1030},[1002,58568,2393],{"class":1015},[1002,58570,4910],{"class":1019},[1002,58572,1407],{"class":1030},[1002,58574,58575,58577,58579,58581,58583,58585,58587],{"class":1004,"line":2740},[1002,58576,52889],{"class":1030},[1002,58578,6633],{"class":1026},[1002,58580,58430],{"class":1030},[1002,58582,6965],{"class":1015},[1002,58584,6513],{"class":1030},[1002,58586,6970],{"class":2378},[1002,58588,2382],{"class":1030},[1002,58590,58591,58593,58596,58598,58600,58602,58604,58606,58608,58610,58612],{"class":1004,"line":2759},[1002,58592,8328],{"class":1015},[1002,58594,58595],{"class":1030}," (count ",[1002,58597,6539],{"class":1015},[1002,58599,2414],{"class":1019},[1002,58601,5876],{"class":1030},[1002,58603,49351],{"class":1026},[1002,58605,58445],{"class":1030},[1002,58607,8070],{"class":1026},[1002,58609,58450],{"class":1030},[1002,58611,38558],{"class":1026},[1002,58613,6886],{"class":1030},[1002,58615,58616,58619,58622,58624,58626,58629,58631],{"class":1004,"line":2774},[1002,58617,58618],{"class":1015}," else",[1002,58620,58621],{"class":1026}," expect",[1002,58623,58445],{"class":1030},[1002,58625,8070],{"class":1026},[1002,58627,58628],{"class":1030},"(count)).to.not.",[1002,58630,38558],{"class":1026},[1002,58632,6886],{"class":1030},[1002,58634,58635],{"class":1004,"line":2790},[1002,58636,1051],{"emptyLinePlaceholder":1050},[1002,58638,58639,58641,58643],{"class":1004,"line":2801},[1002,58640,58459],{"class":1030},[1002,58642,6545],{"class":1015},[1002,58644,1407],{"class":1030},[1002,58646,58647],{"class":1004,"line":2807},[1002,58648,8353],{"class":1030},[1002,58650,58651],{"class":1004,"line":2812},[1002,58652,19836],{"class":1030},[1002,58654,58655],{"class":1004,"line":2828},[1002,58656,2804],{"class":1030},[1002,58658,58659],{"class":1004,"line":2841},[1002,58660,1051],{"emptyLinePlaceholder":1050},[1002,58662,58663,58665,58667],{"class":1004,"line":2854},[1002,58664,51753],{"class":1030},[1002,58666,2061],{"class":1026},[1002,58668,1428],{"class":1030},[953,58670,58672],{"id":58671},"sequences-and-range-in-immutablejs","Sequences and Range() in Immutable.js",[925,58674,58675],{},"Understanding Immutable.js's Map() and List() structures will likely take you as far as you want to go with immutable programming. They have only small semantic differences between each other and the remaining structures in the Immutable.js family. Sequence, however, has one major difference: it's lazy--which opens a new realm of functional possibilities.",[993,58677,58679],{"className":995,"code":58678,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\nfunction generateFibonacci(num) {\n console.log(this.generateFibonacci);\n return num \u003C= 1\n ? 1\n : this.generateFibonacci(num - 2) + this.generateFibonacci(num - 1);\n}\n\ndescribe('Exploring Sequences and Range() in Immutable.js', function () {\n it('should see Seq() act like an Iterable', function () {\n var range = _.range(1000);\n var numberOfOperations = 0;\n\n var sequence = Immutable.Seq(range);\n\n expect(sequence.get(0)).to.equal(0);\n });\n\n it('should see that Seq() is lazy', function () {\n var range = _.range(1000);\n var numberOfOperations = 0;\n\n var powerOfTwo = Immutable.Seq(range).map(function (num) {\n numberOfOperations++;\n return num * 2;\n });\n\n expect(numberOfOperations).to.equal(0);\n\n powerOfTwo.take(10).toArray(); \u002F\u002F compute total lazily\n\n expect(numberOfOperations).to.equal(10);\n });\n\n it('should not produce an overflow with infinite Range()', function () {\n var powerOfTwoRange = Immutable.Range(1, Infinity);\n\n expect(powerOfTwoRange.size).to.equal(Infinity); \u002F\u002F whoa\n\n first1000Powers = powerOfTwoRange.take(1000).map(function (n) {\n return n * 2;\n });\n\n expect(first1000Powers.size).to.equal(1000);\n });\n\n it('should demonstrate chaining with Seq()', function () {\n var oddPowerOfTwos = Immutable.Range(0, Infinity)\n .filter(function (n) {\n return n % 2 !== 0;\n })\n .map(function (n) {\n return n * 2;\n });\n\n first1000OddPowers = oddPowerOfTwos.take(1000);\n expect(first1000Powers.size).to.equal(1000);\n });\n\n it('should cache results of Seq()', function () {\n var objects = Immutable.Range(0, 1000).map(function () {\n return {};\n });\n var take100 = objects.take(100).toArray();\n var take100Again = objects.take(100).toArray();\n\n take100.forEach(function (obj, index) {\n expect(obj === take100Again[index]).to.be.false;\n });\n\n var cachedObjects = Immutable.Range(0, 1000)\n .map(function () {\n return {};\n })\n .cacheResult();\n\n expect(cachedObjects.size).to.equal(1000);\n\n var take100Cached = cachedObjects.take(100).toArray();\n var take100CachedAgain = cachedObjects.take(100).toArray();\n\n take100Cached.forEach(function (obj, index) {\n expect(obj === take100CachedAgain[index]).to.be.true;\n });\n });\n\n it('should memoize results of Seq()', function () {\n var objects = Immutable.Range(0, 1000).map(function () {\n return {};\n });\n\n var take100 = objects.take(100).toArray();\n var take100Again = objects.take(100).toArray();\n\n take100.forEach(function (obj, index) {\n expect(obj === take100Again[index]).to.be.false;\n });\n\n var memoizedObjects = Immutable.Range(0, Infinity).map(\n _.memoize(function () {\n return {};\n }),\n );\n\n expect(memoizedObjects.size).to.equal(Infinity); \u002F\u002F this should be impossible!\n\n var take100Memoized = memoizedObjects.take(100).toArray();\n var take100MemoizedAgain = memoizedObjects.take(100).toArray();\n\n take100Memoized.forEach(function (obj, index) {\n expect(obj === take100MemoizedAgain[index]).to.be.true;\n });\n });\n});\n\nmocha.run();\n",[941,58680,58681,58693,58703,58707,58720,58733,58745,58751,58787,58791,58795,58810,58825,58845,58858,58862,58879,58883,58906,58910,58914,58929,58947,58959,58963,58991,59000,59012,59016,59020,59035,59039,59059,59063,59077,59081,59085,59100,59124,59128,59146,59150,59180,59192,59196,59200,59215,59219,59223,59238,59261,59277,59294,59299,59315,59327,59331,59335,59353,59367,59371,59375,59390,59421,59427,59431,59455,59478,59482,59504,59516,59520,59524,59547,59559,59565,59569,59578,59582,59597,59601,59625,59648,59652,59673,59684,59688,59692,59696,59711,59741,59747,59751,59755,59777,59799,59803,59823,59833,59837,59841,59868,59882,59888,59893,59897,59901,59919,59923,59947,59970,59974,59995,60006,60010,60014,60018,60022],{"__ignoreMap":998},[1002,58682,58683,58685,58687,58689,58691],{"class":1004,"line":1005},[1002,58684,51753],{"class":1030},[1002,58686,51756],{"class":1026},[1002,58688,1031],{"class":1030},[1002,58690,51761],{"class":1034},[1002,58692,1085],{"class":1030},[1002,58694,58695,58697,58699,58701],{"class":1004,"line":1012},[1002,58696,18311],{"class":1015},[1002,58698,51770],{"class":1030},[1002,58700,2393],{"class":1015},[1002,58702,51775],{"class":1030},[1002,58704,58705],{"class":1004,"line":1047},[1002,58706,1051],{"emptyLinePlaceholder":1050},[1002,58708,58709,58711,58714,58716,58718],{"class":1004,"line":1054},[1002,58710,6965],{"class":1015},[1002,58712,58713],{"class":1026}," generateFibonacci",[1002,58715,1031],{"class":1030},[1002,58717,38935],{"class":2378},[1002,58719,2382],{"class":1030},[1002,58721,58722,58724,58726,58728,58730],{"class":1004,"line":1060},[1002,58723,6977],{"class":1030},[1002,58725,2886],{"class":1026},[1002,58727,1031],{"class":1030},[1002,58729,3455],{"class":1019},[1002,58731,58732],{"class":1030},".generateFibonacci);\n",[1002,58734,58735,58737,58740,58742],{"class":1004,"line":1272},[1002,58736,15066],{"class":1015},[1002,58738,58739],{"class":1030}," num ",[1002,58741,6780],{"class":1015},[1002,58743,58744],{"class":1019}," 1\n",[1002,58746,58747,58749],{"class":1004,"line":1348},[1002,58748,32763],{"class":1015},[1002,58750,58744],{"class":1019},[1002,58752,58753,58755,58757,58759,58762,58765,58767,58769,58771,58773,58775,58777,58779,58781,58783,58785],{"class":1004,"line":1354},[1002,58754,32778],{"class":1015},[1002,58756,2693],{"class":1019},[1002,58758,948],{"class":1030},[1002,58760,58761],{"class":1026},"generateFibonacci",[1002,58763,58764],{"class":1030},"(num ",[1002,58766,5101],{"class":1015},[1002,58768,10248],{"class":1019},[1002,58770,5876],{"class":1030},[1002,58772,5064],{"class":1015},[1002,58774,2693],{"class":1019},[1002,58776,948],{"class":1030},[1002,58778,58761],{"class":1026},[1002,58780,58764],{"class":1030},[1002,58782,5101],{"class":1015},[1002,58784,6246],{"class":1019},[1002,58786,1085],{"class":1030},[1002,58788,58789],{"class":1004,"line":1360},[1002,58790,1170],{"class":1030},[1002,58792,58793],{"class":1004,"line":1366},[1002,58794,1051],{"emptyLinePlaceholder":1050},[1002,58796,58797,58799,58801,58804,58806,58808],{"class":1004,"line":1946},[1002,58798,12742],{"class":1026},[1002,58800,1031],{"class":1030},[1002,58802,58803],{"class":1034},"'Exploring Sequences and Range() in Immutable.js'",[1002,58805,1251],{"class":1030},[1002,58807,6965],{"class":1015},[1002,58809,9772],{"class":1030},[1002,58811,58812,58814,58816,58819,58821,58823],{"class":1004,"line":1956},[1002,58813,34260],{"class":1026},[1002,58815,1031],{"class":1030},[1002,58817,58818],{"class":1034},"'should see Seq() act like an Iterable'",[1002,58820,1251],{"class":1030},[1002,58822,6965],{"class":1015},[1002,58824,9772],{"class":1030},[1002,58826,58827,58829,58832,58834,58837,58839,58841,58843],{"class":1004,"line":1961},[1002,58828,51906],{"class":1015},[1002,58830,58831],{"class":1030}," range ",[1002,58833,2393],{"class":1015},[1002,58835,58836],{"class":1030}," _.",[1002,58838,50647],{"class":1026},[1002,58840,1031],{"class":1030},[1002,58842,6370],{"class":1019},[1002,58844,1085],{"class":1030},[1002,58846,58847,58849,58852,58854,58856],{"class":1004,"line":1971},[1002,58848,51906],{"class":1015},[1002,58850,58851],{"class":1030}," numberOfOperations ",[1002,58853,2393],{"class":1015},[1002,58855,4910],{"class":1019},[1002,58857,1407],{"class":1030},[1002,58859,58860],{"class":1004,"line":1980},[1002,58861,1051],{"emptyLinePlaceholder":1050},[1002,58863,58864,58866,58869,58871,58873,58876],{"class":1004,"line":1985},[1002,58865,51906],{"class":1015},[1002,58867,58868],{"class":1030}," sequence ",[1002,58870,2393],{"class":1015},[1002,58872,51301],{"class":1030},[1002,58874,58875],{"class":1026},"Seq",[1002,58877,58878],{"class":1030},"(range);\n",[1002,58880,58881],{"class":1004,"line":1995},[1002,58882,1051],{"emptyLinePlaceholder":1050},[1002,58884,58885,58887,58890,58892,58894,58896,58898,58900,58902,58904],{"class":1004,"line":2006},[1002,58886,34298],{"class":1026},[1002,58888,58889],{"class":1030},"(sequence.",[1002,58891,8070],{"class":1026},[1002,58893,1031],{"class":1030},[1002,58895,5867],{"class":1019},[1002,58897,52073],{"class":1030},[1002,58899,38558],{"class":1026},[1002,58901,1031],{"class":1030},[1002,58903,5867],{"class":1019},[1002,58905,1085],{"class":1030},[1002,58907,58908],{"class":1004,"line":2011},[1002,58909,19836],{"class":1030},[1002,58911,58912],{"class":1004,"line":2017},[1002,58913,1051],{"emptyLinePlaceholder":1050},[1002,58915,58916,58918,58920,58923,58925,58927],{"class":1004,"line":2022},[1002,58917,34260],{"class":1026},[1002,58919,1031],{"class":1030},[1002,58921,58922],{"class":1034},"'should see that Seq() is lazy'",[1002,58924,1251],{"class":1030},[1002,58926,6965],{"class":1015},[1002,58928,9772],{"class":1030},[1002,58930,58931,58933,58935,58937,58939,58941,58943,58945],{"class":1004,"line":2442},[1002,58932,51906],{"class":1015},[1002,58934,58831],{"class":1030},[1002,58936,2393],{"class":1015},[1002,58938,58836],{"class":1030},[1002,58940,50647],{"class":1026},[1002,58942,1031],{"class":1030},[1002,58944,6370],{"class":1019},[1002,58946,1085],{"class":1030},[1002,58948,58949,58951,58953,58955,58957],{"class":1004,"line":2466},[1002,58950,51906],{"class":1015},[1002,58952,58851],{"class":1030},[1002,58954,2393],{"class":1015},[1002,58956,4910],{"class":1019},[1002,58958,1407],{"class":1030},[1002,58960,58961],{"class":1004,"line":2471},[1002,58962,1051],{"emptyLinePlaceholder":1050},[1002,58964,58965,58967,58970,58972,58974,58976,58979,58981,58983,58985,58987,58989],{"class":1004,"line":2476},[1002,58966,51906],{"class":1015},[1002,58968,58969],{"class":1030}," powerOfTwo ",[1002,58971,2393],{"class":1015},[1002,58973,51301],{"class":1030},[1002,58975,58875],{"class":1026},[1002,58977,58978],{"class":1030},"(range).",[1002,58980,19444],{"class":1026},[1002,58982,1031],{"class":1030},[1002,58984,6965],{"class":1015},[1002,58986,6513],{"class":1030},[1002,58988,38935],{"class":2378},[1002,58990,2382],{"class":1030},[1002,58992,58993,58996,58998],{"class":1004,"line":2481},[1002,58994,58995],{"class":1030}," numberOfOperations",[1002,58997,6545],{"class":1015},[1002,58999,1407],{"class":1030},[1002,59001,59002,59004,59006,59008,59010],{"class":1004,"line":2491},[1002,59003,4376],{"class":1015},[1002,59005,58739],{"class":1030},[1002,59007,4703],{"class":1015},[1002,59009,10248],{"class":1019},[1002,59011,1407],{"class":1030},[1002,59013,59014],{"class":1004,"line":2502},[1002,59015,8353],{"class":1030},[1002,59017,59018],{"class":1004,"line":2513},[1002,59019,1051],{"emptyLinePlaceholder":1050},[1002,59021,59022,59024,59027,59029,59031,59033],{"class":1004,"line":2535},[1002,59023,34298],{"class":1026},[1002,59025,59026],{"class":1030},"(numberOfOperations).to.",[1002,59028,38558],{"class":1026},[1002,59030,1031],{"class":1030},[1002,59032,5867],{"class":1019},[1002,59034,1085],{"class":1030},[1002,59036,59037],{"class":1004,"line":2557},[1002,59038,1051],{"emptyLinePlaceholder":1050},[1002,59040,59041,59044,59046,59048,59050,59052,59054,59056],{"class":1004,"line":2562},[1002,59042,59043],{"class":1030}," powerOfTwo.",[1002,59045,49709],{"class":1026},[1002,59047,1031],{"class":1030},[1002,59049,4818],{"class":1019},[1002,59051,1539],{"class":1030},[1002,59053,55023],{"class":1026},[1002,59055,6859],{"class":1030},[1002,59057,59058],{"class":1008},"\u002F\u002F compute total lazily\n",[1002,59060,59061],{"class":1004,"line":2567},[1002,59062,1051],{"emptyLinePlaceholder":1050},[1002,59064,59065,59067,59069,59071,59073,59075],{"class":1004,"line":2572},[1002,59066,34298],{"class":1026},[1002,59068,59026],{"class":1030},[1002,59070,38558],{"class":1026},[1002,59072,1031],{"class":1030},[1002,59074,4818],{"class":1019},[1002,59076,1085],{"class":1030},[1002,59078,59079],{"class":1004,"line":2582},[1002,59080,19836],{"class":1030},[1002,59082,59083],{"class":1004,"line":2594},[1002,59084,1051],{"emptyLinePlaceholder":1050},[1002,59086,59087,59089,59091,59094,59096,59098],{"class":1004,"line":2603},[1002,59088,34260],{"class":1026},[1002,59090,1031],{"class":1030},[1002,59092,59093],{"class":1034},"'should not produce an overflow with infinite Range()'",[1002,59095,1251],{"class":1030},[1002,59097,6965],{"class":1015},[1002,59099,9772],{"class":1030},[1002,59101,59102,59104,59107,59109,59111,59113,59115,59117,59119,59122],{"class":1004,"line":2619},[1002,59103,51906],{"class":1015},[1002,59105,59106],{"class":1030}," powerOfTwoRange ",[1002,59108,2393],{"class":1015},[1002,59110,51301],{"class":1030},[1002,59112,50664],{"class":1026},[1002,59114,1031],{"class":1030},[1002,59116,6211],{"class":1019},[1002,59118,1251],{"class":1030},[1002,59120,59121],{"class":1019},"Infinity",[1002,59123,1085],{"class":1030},[1002,59125,59126],{"class":1004,"line":2633},[1002,59127,1051],{"emptyLinePlaceholder":1050},[1002,59129,59130,59132,59135,59137,59139,59141,59143],{"class":1004,"line":2641},[1002,59131,34298],{"class":1026},[1002,59133,59134],{"class":1030},"(powerOfTwoRange.size).to.",[1002,59136,38558],{"class":1026},[1002,59138,1031],{"class":1030},[1002,59140,59121],{"class":1019},[1002,59142,18256],{"class":1030},[1002,59144,59145],{"class":1008},"\u002F\u002F whoa\n",[1002,59147,59148],{"class":1004,"line":2655},[1002,59149,1051],{"emptyLinePlaceholder":1050},[1002,59151,59152,59155,59157,59160,59162,59164,59166,59168,59170,59172,59174,59176,59178],{"class":1004,"line":2667},[1002,59153,59154],{"class":1030}," first1000Powers ",[1002,59156,2393],{"class":1015},[1002,59158,59159],{"class":1030}," powerOfTwoRange.",[1002,59161,49709],{"class":1026},[1002,59163,1031],{"class":1030},[1002,59165,6370],{"class":1019},[1002,59167,1539],{"class":1030},[1002,59169,19444],{"class":1026},[1002,59171,1031],{"class":1030},[1002,59173,6965],{"class":1015},[1002,59175,6513],{"class":1030},[1002,59177,25415],{"class":2378},[1002,59179,2382],{"class":1030},[1002,59181,59182,59184,59186,59188,59190],{"class":1004,"line":2674},[1002,59183,4376],{"class":1015},[1002,59185,39192],{"class":1030},[1002,59187,4703],{"class":1015},[1002,59189,10248],{"class":1019},[1002,59191,1407],{"class":1030},[1002,59193,59194],{"class":1004,"line":2679},[1002,59195,8353],{"class":1030},[1002,59197,59198],{"class":1004,"line":2684},[1002,59199,1051],{"emptyLinePlaceholder":1050},[1002,59201,59202,59204,59207,59209,59211,59213],{"class":1004,"line":2704},[1002,59203,34298],{"class":1026},[1002,59205,59206],{"class":1030},"(first1000Powers.size).to.",[1002,59208,38558],{"class":1026},[1002,59210,1031],{"class":1030},[1002,59212,6370],{"class":1019},[1002,59214,1085],{"class":1030},[1002,59216,59217],{"class":1004,"line":2709},[1002,59218,19836],{"class":1030},[1002,59220,59221],{"class":1004,"line":2714},[1002,59222,1051],{"emptyLinePlaceholder":1050},[1002,59224,59225,59227,59229,59232,59234,59236],{"class":1004,"line":2719},[1002,59226,34260],{"class":1026},[1002,59228,1031],{"class":1030},[1002,59230,59231],{"class":1034},"'should demonstrate chaining with Seq()'",[1002,59233,1251],{"class":1030},[1002,59235,6965],{"class":1015},[1002,59237,9772],{"class":1030},[1002,59239,59240,59242,59245,59247,59249,59251,59253,59255,59257,59259],{"class":1004,"line":2735},[1002,59241,51906],{"class":1015},[1002,59243,59244],{"class":1030}," oddPowerOfTwos ",[1002,59246,2393],{"class":1015},[1002,59248,51301],{"class":1030},[1002,59250,50664],{"class":1026},[1002,59252,1031],{"class":1030},[1002,59254,5867],{"class":1019},[1002,59256,1251],{"class":1030},[1002,59258,59121],{"class":1019},[1002,59260,3808],{"class":1030},[1002,59262,59263,59265,59267,59269,59271,59273,59275],{"class":1004,"line":2740},[1002,59264,40738],{"class":1030},[1002,59266,8313],{"class":1026},[1002,59268,1031],{"class":1030},[1002,59270,6965],{"class":1015},[1002,59272,6513],{"class":1030},[1002,59274,25415],{"class":2378},[1002,59276,2382],{"class":1030},[1002,59278,59279,59281,59283,59285,59287,59290,59292],{"class":1004,"line":2759},[1002,59280,8341],{"class":1015},[1002,59282,39192],{"class":1030},[1002,59284,32598],{"class":1015},[1002,59286,10248],{"class":1019},[1002,59288,59289],{"class":1015}," !==",[1002,59291,4910],{"class":1019},[1002,59293,1407],{"class":1030},[1002,59295,59296],{"class":1004,"line":2774},[1002,59297,59298],{"class":1030}," })\n",[1002,59300,59301,59303,59305,59307,59309,59311,59313],{"class":1004,"line":2790},[1002,59302,40738],{"class":1030},[1002,59304,19444],{"class":1026},[1002,59306,1031],{"class":1030},[1002,59308,6965],{"class":1015},[1002,59310,6513],{"class":1030},[1002,59312,25415],{"class":2378},[1002,59314,2382],{"class":1030},[1002,59316,59317,59319,59321,59323,59325],{"class":1004,"line":2801},[1002,59318,8341],{"class":1015},[1002,59320,39192],{"class":1030},[1002,59322,4703],{"class":1015},[1002,59324,10248],{"class":1019},[1002,59326,1407],{"class":1030},[1002,59328,59329],{"class":1004,"line":2807},[1002,59330,47582],{"class":1030},[1002,59332,59333],{"class":1004,"line":2812},[1002,59334,1051],{"emptyLinePlaceholder":1050},[1002,59336,59337,59340,59342,59345,59347,59349,59351],{"class":1004,"line":2828},[1002,59338,59339],{"class":1030}," first1000OddPowers ",[1002,59341,2393],{"class":1015},[1002,59343,59344],{"class":1030}," oddPowerOfTwos.",[1002,59346,49709],{"class":1026},[1002,59348,1031],{"class":1030},[1002,59350,6370],{"class":1019},[1002,59352,1085],{"class":1030},[1002,59354,59355,59357,59359,59361,59363,59365],{"class":1004,"line":2841},[1002,59356,34298],{"class":1026},[1002,59358,59206],{"class":1030},[1002,59360,38558],{"class":1026},[1002,59362,1031],{"class":1030},[1002,59364,6370],{"class":1019},[1002,59366,1085],{"class":1030},[1002,59368,59369],{"class":1004,"line":2854},[1002,59370,19836],{"class":1030},[1002,59372,59373],{"class":1004,"line":2864},[1002,59374,1051],{"emptyLinePlaceholder":1050},[1002,59376,59377,59379,59381,59384,59386,59388],{"class":1004,"line":2869},[1002,59378,34260],{"class":1026},[1002,59380,1031],{"class":1030},[1002,59382,59383],{"class":1034},"'should cache results of Seq()'",[1002,59385,1251],{"class":1030},[1002,59387,6965],{"class":1015},[1002,59389,9772],{"class":1030},[1002,59391,59392,59394,59397,59399,59401,59403,59405,59407,59409,59411,59413,59415,59417,59419],{"class":1004,"line":2874},[1002,59393,51906],{"class":1015},[1002,59395,59396],{"class":1030}," objects ",[1002,59398,2393],{"class":1015},[1002,59400,51301],{"class":1030},[1002,59402,50664],{"class":1026},[1002,59404,1031],{"class":1030},[1002,59406,5867],{"class":1019},[1002,59408,1251],{"class":1030},[1002,59410,6370],{"class":1019},[1002,59412,1539],{"class":1030},[1002,59414,19444],{"class":1026},[1002,59416,1031],{"class":1030},[1002,59418,6965],{"class":1015},[1002,59420,9772],{"class":1030},[1002,59422,59423,59425],{"class":1004,"line":2880},[1002,59424,4376],{"class":1015},[1002,59426,7217],{"class":1030},[1002,59428,59429],{"class":1004,"line":2903},[1002,59430,8353],{"class":1030},[1002,59432,59433,59435,59438,59440,59443,59445,59447,59449,59451,59453],{"class":1004,"line":2909},[1002,59434,51906],{"class":1015},[1002,59436,59437],{"class":1030}," take100 ",[1002,59439,2393],{"class":1015},[1002,59441,59442],{"class":1030}," objects.",[1002,59444,49709],{"class":1026},[1002,59446,1031],{"class":1030},[1002,59448,4791],{"class":1019},[1002,59450,1539],{"class":1030},[1002,59452,55023],{"class":1026},[1002,59454,1428],{"class":1030},[1002,59456,59457,59459,59462,59464,59466,59468,59470,59472,59474,59476],{"class":1004,"line":2919},[1002,59458,51906],{"class":1015},[1002,59460,59461],{"class":1030}," take100Again ",[1002,59463,2393],{"class":1015},[1002,59465,59442],{"class":1030},[1002,59467,49709],{"class":1026},[1002,59469,1031],{"class":1030},[1002,59471,4791],{"class":1019},[1002,59473,1539],{"class":1030},[1002,59475,55023],{"class":1026},[1002,59477,1428],{"class":1030},[1002,59479,59480],{"class":1004,"line":2924},[1002,59481,1051],{"emptyLinePlaceholder":1050},[1002,59483,59484,59487,59489,59491,59493,59495,59498,59500,59502],{"class":1004,"line":2944},[1002,59485,59486],{"class":1030}," take100.",[1002,59488,8408],{"class":1026},[1002,59490,1031],{"class":1030},[1002,59492,6965],{"class":1015},[1002,59494,6513],{"class":1030},[1002,59496,59497],{"class":2378},"obj",[1002,59499,1251],{"class":1030},[1002,59501,19458],{"class":2378},[1002,59503,2382],{"class":1030},[1002,59505,59506,59508,59511,59513],{"class":1004,"line":2950},[1002,59507,55038],{"class":1026},[1002,59509,59510],{"class":1030},"(obj ",[1002,59512,2892],{"class":1015},[1002,59514,59515],{"class":1030}," take100Again[index]).to.be.false;\n",[1002,59517,59518],{"class":1004,"line":5466},[1002,59519,8353],{"class":1030},[1002,59521,59522],{"class":1004,"line":5477},[1002,59523,1051],{"emptyLinePlaceholder":1050},[1002,59525,59526,59528,59531,59533,59535,59537,59539,59541,59543,59545],{"class":1004,"line":5490},[1002,59527,51906],{"class":1015},[1002,59529,59530],{"class":1030}," cachedObjects ",[1002,59532,2393],{"class":1015},[1002,59534,51301],{"class":1030},[1002,59536,50664],{"class":1026},[1002,59538,1031],{"class":1030},[1002,59540,5867],{"class":1019},[1002,59542,1251],{"class":1030},[1002,59544,6370],{"class":1019},[1002,59546,3808],{"class":1030},[1002,59548,59549,59551,59553,59555,59557],{"class":1004,"line":5495},[1002,59550,40738],{"class":1030},[1002,59552,19444],{"class":1026},[1002,59554,1031],{"class":1030},[1002,59556,6965],{"class":1015},[1002,59558,9772],{"class":1030},[1002,59560,59561,59563],{"class":1004,"line":5500},[1002,59562,8341],{"class":1015},[1002,59564,7217],{"class":1030},[1002,59566,59567],{"class":1004,"line":5505},[1002,59568,59298],{"class":1030},[1002,59570,59571,59573,59576],{"class":1004,"line":5515},[1002,59572,40738],{"class":1030},[1002,59574,59575],{"class":1026},"cacheResult",[1002,59577,1428],{"class":1030},[1002,59579,59580],{"class":1004,"line":5526},[1002,59581,1051],{"emptyLinePlaceholder":1050},[1002,59583,59584,59586,59589,59591,59593,59595],{"class":1004,"line":5538},[1002,59585,34298],{"class":1026},[1002,59587,59588],{"class":1030},"(cachedObjects.size).to.",[1002,59590,38558],{"class":1026},[1002,59592,1031],{"class":1030},[1002,59594,6370],{"class":1019},[1002,59596,1085],{"class":1030},[1002,59598,59599],{"class":1004,"line":5543},[1002,59600,1051],{"emptyLinePlaceholder":1050},[1002,59602,59603,59605,59608,59610,59613,59615,59617,59619,59621,59623],{"class":1004,"line":5548},[1002,59604,51906],{"class":1015},[1002,59606,59607],{"class":1030}," take100Cached ",[1002,59609,2393],{"class":1015},[1002,59611,59612],{"class":1030}," cachedObjects.",[1002,59614,49709],{"class":1026},[1002,59616,1031],{"class":1030},[1002,59618,4791],{"class":1019},[1002,59620,1539],{"class":1030},[1002,59622,55023],{"class":1026},[1002,59624,1428],{"class":1030},[1002,59626,59627,59629,59632,59634,59636,59638,59640,59642,59644,59646],{"class":1004,"line":5559},[1002,59628,51906],{"class":1015},[1002,59630,59631],{"class":1030}," take100CachedAgain ",[1002,59633,2393],{"class":1015},[1002,59635,59612],{"class":1030},[1002,59637,49709],{"class":1026},[1002,59639,1031],{"class":1030},[1002,59641,4791],{"class":1019},[1002,59643,1539],{"class":1030},[1002,59645,55023],{"class":1026},[1002,59647,1428],{"class":1030},[1002,59649,59650],{"class":1004,"line":5573},[1002,59651,1051],{"emptyLinePlaceholder":1050},[1002,59653,59654,59657,59659,59661,59663,59665,59667,59669,59671],{"class":1004,"line":5578},[1002,59655,59656],{"class":1030}," take100Cached.",[1002,59658,8408],{"class":1026},[1002,59660,1031],{"class":1030},[1002,59662,6965],{"class":1015},[1002,59664,6513],{"class":1030},[1002,59666,59497],{"class":2378},[1002,59668,1251],{"class":1030},[1002,59670,19458],{"class":2378},[1002,59672,2382],{"class":1030},[1002,59674,59675,59677,59679,59681],{"class":1004,"line":5583},[1002,59676,55038],{"class":1026},[1002,59678,59510],{"class":1030},[1002,59680,2892],{"class":1015},[1002,59682,59683],{"class":1030}," take100CachedAgain[index]).to.be.true;\n",[1002,59685,59686],{"class":1004,"line":5594},[1002,59687,8353],{"class":1030},[1002,59689,59690],{"class":1004,"line":5607},[1002,59691,19836],{"class":1030},[1002,59693,59694],{"class":1004,"line":5612},[1002,59695,1051],{"emptyLinePlaceholder":1050},[1002,59697,59698,59700,59702,59705,59707,59709],{"class":1004,"line":5617},[1002,59699,34260],{"class":1026},[1002,59701,1031],{"class":1030},[1002,59703,59704],{"class":1034},"'should memoize results of Seq()'",[1002,59706,1251],{"class":1030},[1002,59708,6965],{"class":1015},[1002,59710,9772],{"class":1030},[1002,59712,59713,59715,59717,59719,59721,59723,59725,59727,59729,59731,59733,59735,59737,59739],{"class":1004,"line":5622},[1002,59714,51906],{"class":1015},[1002,59716,59396],{"class":1030},[1002,59718,2393],{"class":1015},[1002,59720,51301],{"class":1030},[1002,59722,50664],{"class":1026},[1002,59724,1031],{"class":1030},[1002,59726,5867],{"class":1019},[1002,59728,1251],{"class":1030},[1002,59730,6370],{"class":1019},[1002,59732,1539],{"class":1030},[1002,59734,19444],{"class":1026},[1002,59736,1031],{"class":1030},[1002,59738,6965],{"class":1015},[1002,59740,9772],{"class":1030},[1002,59742,59743,59745],{"class":1004,"line":5638},[1002,59744,4376],{"class":1015},[1002,59746,7217],{"class":1030},[1002,59748,59749],{"class":1004,"line":5643},[1002,59750,8353],{"class":1030},[1002,59752,59753],{"class":1004,"line":5666},[1002,59754,1051],{"emptyLinePlaceholder":1050},[1002,59756,59757,59759,59761,59763,59765,59767,59769,59771,59773,59775],{"class":1004,"line":5686},[1002,59758,51906],{"class":1015},[1002,59760,59437],{"class":1030},[1002,59762,2393],{"class":1015},[1002,59764,59442],{"class":1030},[1002,59766,49709],{"class":1026},[1002,59768,1031],{"class":1030},[1002,59770,4791],{"class":1019},[1002,59772,1539],{"class":1030},[1002,59774,55023],{"class":1026},[1002,59776,1428],{"class":1030},[1002,59778,59779,59781,59783,59785,59787,59789,59791,59793,59795,59797],{"class":1004,"line":5705},[1002,59780,51906],{"class":1015},[1002,59782,59461],{"class":1030},[1002,59784,2393],{"class":1015},[1002,59786,59442],{"class":1030},[1002,59788,49709],{"class":1026},[1002,59790,1031],{"class":1030},[1002,59792,4791],{"class":1019},[1002,59794,1539],{"class":1030},[1002,59796,55023],{"class":1026},[1002,59798,1428],{"class":1030},[1002,59800,59801],{"class":1004,"line":5724},[1002,59802,1051],{"emptyLinePlaceholder":1050},[1002,59804,59805,59807,59809,59811,59813,59815,59817,59819,59821],{"class":1004,"line":5737},[1002,59806,59486],{"class":1030},[1002,59808,8408],{"class":1026},[1002,59810,1031],{"class":1030},[1002,59812,6965],{"class":1015},[1002,59814,6513],{"class":1030},[1002,59816,59497],{"class":2378},[1002,59818,1251],{"class":1030},[1002,59820,19458],{"class":2378},[1002,59822,2382],{"class":1030},[1002,59824,59825,59827,59829,59831],{"class":1004,"line":5746},[1002,59826,55038],{"class":1026},[1002,59828,59510],{"class":1030},[1002,59830,2892],{"class":1015},[1002,59832,59515],{"class":1030},[1002,59834,59835],{"class":1004,"line":55240},[1002,59836,8353],{"class":1030},[1002,59838,59839],{"class":1004,"line":56354},[1002,59840,1051],{"emptyLinePlaceholder":1050},[1002,59842,59843,59845,59848,59850,59852,59854,59856,59858,59860,59862,59864,59866],{"class":1004,"line":56370},[1002,59844,51906],{"class":1015},[1002,59846,59847],{"class":1030}," memoizedObjects ",[1002,59849,2393],{"class":1015},[1002,59851,51301],{"class":1030},[1002,59853,50664],{"class":1026},[1002,59855,1031],{"class":1030},[1002,59857,5867],{"class":1019},[1002,59859,1251],{"class":1030},[1002,59861,59121],{"class":1019},[1002,59863,1539],{"class":1030},[1002,59865,19444],{"class":1026},[1002,59867,10468],{"class":1030},[1002,59869,59870,59873,59876,59878,59880],{"class":1004,"line":56375},[1002,59871,59872],{"class":1030}," _.",[1002,59874,59875],{"class":1026},"memoize",[1002,59877,1031],{"class":1030},[1002,59879,6965],{"class":1015},[1002,59881,9772],{"class":1030},[1002,59883,59884,59886],{"class":1004,"line":56380},[1002,59885,8341],{"class":1015},[1002,59887,7217],{"class":1030},[1002,59889,59890],{"class":1004,"line":56385},[1002,59891,59892],{"class":1030}," }),\n",[1002,59894,59895],{"class":1004,"line":56412},[1002,59896,22541],{"class":1030},[1002,59898,59899],{"class":1004,"line":56424},[1002,59900,1051],{"emptyLinePlaceholder":1050},[1002,59902,59903,59905,59908,59910,59912,59914,59916],{"class":1004,"line":56432},[1002,59904,34298],{"class":1026},[1002,59906,59907],{"class":1030},"(memoizedObjects.size).to.",[1002,59909,38558],{"class":1026},[1002,59911,1031],{"class":1030},[1002,59913,59121],{"class":1019},[1002,59915,18256],{"class":1030},[1002,59917,59918],{"class":1008},"\u002F\u002F this should be impossible!\n",[1002,59920,59921],{"class":1004,"line":56440},[1002,59922,1051],{"emptyLinePlaceholder":1050},[1002,59924,59925,59927,59930,59932,59935,59937,59939,59941,59943,59945],{"class":1004,"line":56448},[1002,59926,51906],{"class":1015},[1002,59928,59929],{"class":1030}," take100Memoized ",[1002,59931,2393],{"class":1015},[1002,59933,59934],{"class":1030}," memoizedObjects.",[1002,59936,49709],{"class":1026},[1002,59938,1031],{"class":1030},[1002,59940,4791],{"class":1019},[1002,59942,1539],{"class":1030},[1002,59944,55023],{"class":1026},[1002,59946,1428],{"class":1030},[1002,59948,59949,59951,59954,59956,59958,59960,59962,59964,59966,59968],{"class":1004,"line":56456},[1002,59950,51906],{"class":1015},[1002,59952,59953],{"class":1030}," take100MemoizedAgain ",[1002,59955,2393],{"class":1015},[1002,59957,59934],{"class":1030},[1002,59959,49709],{"class":1026},[1002,59961,1031],{"class":1030},[1002,59963,4791],{"class":1019},[1002,59965,1539],{"class":1030},[1002,59967,55023],{"class":1026},[1002,59969,1428],{"class":1030},[1002,59971,59972],{"class":1004,"line":56464},[1002,59973,1051],{"emptyLinePlaceholder":1050},[1002,59975,59976,59979,59981,59983,59985,59987,59989,59991,59993],{"class":1004,"line":56472},[1002,59977,59978],{"class":1030}," take100Memoized.",[1002,59980,8408],{"class":1026},[1002,59982,1031],{"class":1030},[1002,59984,6965],{"class":1015},[1002,59986,6513],{"class":1030},[1002,59988,59497],{"class":2378},[1002,59990,1251],{"class":1030},[1002,59992,19458],{"class":2378},[1002,59994,2382],{"class":1030},[1002,59996,59997,59999,60001,60003],{"class":1004,"line":56480},[1002,59998,55038],{"class":1026},[1002,60000,59510],{"class":1030},[1002,60002,2892],{"class":1015},[1002,60004,60005],{"class":1030}," take100MemoizedAgain[index]).to.be.true;\n",[1002,60007,60008],{"class":1004,"line":56486},[1002,60009,8353],{"class":1030},[1002,60011,60012],{"class":1004,"line":56501},[1002,60013,19836],{"class":1030},[1002,60015,60016],{"class":1004,"line":56506},[1002,60017,2804],{"class":1030},[1002,60019,60020],{"class":1004,"line":56532},[1002,60021,1051],{"emptyLinePlaceholder":1050},[1002,60023,60024,60026,60028],{"class":1004,"line":56560},[1002,60025,51753],{"class":1030},[1002,60027,2061],{"class":1026},[1002,60029,1428],{"class":1030},[953,60031,60033],{"id":60032},"converting-immutablejs-structures-to-javascript-and-other-immutable-types","Converting Immutable.js Structures to Javascript and other Immutable Types",[925,60035,60036],{},"Immutable.js provides several conversion methods to migrate one structure to another. Each Immutable.js class contains a prefixed \"to\" method like Map.toList(), Map.toSet(), etc. Converting these types sometimes results in a loss of data, as we will see when converting from Map to List.",[993,60038,60040],{"className":995,"code":60039,"language":997,"meta":998,"style":998},"mocha.setup('bdd');\nvar expect = chai.expect;\n\ndescribe('Converting Immutable.js Structures to Javascript and other Immutable Types', function () {\n it('should convert Map() to List()', function () {\n var map = Immutable.Map({\n key1: 'First Item',\n key2: 'Second Item',\n });\n\n var convertedList = map.toList();\n\n expect(Immutable.List.isList(convertedList)).to.be.true;\n\n \u002F\u002F Keys are discarded\n expect(convertedList.first()).to.equal('First Item');\n expect(convertedList.last()).to.equal('Second Item');\n });\n\n it('should convert List() to Map()', function () {\n var list = Immutable.List.of('First Item', 'Second Item');\n\n var convertedMap = list.toMap();\n\n \u002F\u002F Converted keys ascend numerically\n keys = convertedMap.keys();\n expect(keys.next().value).to.equal(0);\n expect(keys.next().value).to.equal(1);\n\n expect(Immutable.Map.isMap(convertedMap)).to.be.true;\n\n expect(convertedMap.first()).to.equal('First Item');\n expect(convertedMap.last()).to.equal('Second Item');\n });\n\n it('should convert Map() to Javascript Array', function () {\n var map = Immutable.Map({\n key1: 'First Item',\n key2: 'Second Item',\n key3: { key4: 'Nested Item' },\n });\n\n var arr = map.toArray();\n\n \u002F\u002F Keys are discarded\n expect(arr[0]).to.equal('First Item');\n expect(arr[1]).to.equal('Second Item');\n expect(arr[2].key4).to.equal('Nested Item');\n });\n\n it('should convert Map() to JSON', function () {\n var map = Immutable.Map({\n key1: 'First Item',\n key2: 'Second Item',\n key3: { key4: 'Nested Item' },\n });\n\n var json = map.toJSON();\n\n expect(json.key1).to.equal('First Item');\n expect(json.key2).to.equal('Second Item');\n expect(json.key3.key4).to.equal('Nested Item');\n });\n});\n\nmocha.run();\n",[941,60041,60042,60054,60064,60068,60083,60098,60113,60123,60133,60137,60141,60158,60162,60173,60177,60182,60201,60219,60223,60227,60242,60264,60268,60283,60287,60292,60306,60326,60344,60348,60359,60363,60382,60400,60404,60408,60423,60437,60445,60453,60463,60467,60471,60486,60490,60494,60514,60532,60551,60555,60559,60574,60588,60596,60604,60612,60616,60620,60636,60640,60655,60670,60685,60689,60693,60697],{"__ignoreMap":998},[1002,60043,60044,60046,60048,60050,60052],{"class":1004,"line":1005},[1002,60045,51753],{"class":1030},[1002,60047,51756],{"class":1026},[1002,60049,1031],{"class":1030},[1002,60051,51761],{"class":1034},[1002,60053,1085],{"class":1030},[1002,60055,60056,60058,60060,60062],{"class":1004,"line":1012},[1002,60057,18311],{"class":1015},[1002,60059,51770],{"class":1030},[1002,60061,2393],{"class":1015},[1002,60063,51775],{"class":1030},[1002,60065,60066],{"class":1004,"line":1047},[1002,60067,1051],{"emptyLinePlaceholder":1050},[1002,60069,60070,60072,60074,60077,60079,60081],{"class":1004,"line":1054},[1002,60071,12742],{"class":1026},[1002,60073,1031],{"class":1030},[1002,60075,60076],{"class":1034},"'Converting Immutable.js Structures to Javascript and other Immutable Types'",[1002,60078,1251],{"class":1030},[1002,60080,6965],{"class":1015},[1002,60082,9772],{"class":1030},[1002,60084,60085,60087,60089,60092,60094,60096],{"class":1004,"line":1060},[1002,60086,34260],{"class":1026},[1002,60088,1031],{"class":1030},[1002,60090,60091],{"class":1034},"'should convert Map() to List()'",[1002,60093,1251],{"class":1030},[1002,60095,6965],{"class":1015},[1002,60097,9772],{"class":1030},[1002,60099,60100,60102,60105,60107,60109,60111],{"class":1004,"line":1272},[1002,60101,51906],{"class":1015},[1002,60103,60104],{"class":1030}," map ",[1002,60106,2393],{"class":1015},[1002,60108,51301],{"class":1030},[1002,60110,32239],{"class":1026},[1002,60112,2756],{"class":1030},[1002,60114,60115,60118,60121],{"class":1004,"line":1348},[1002,60116,60117],{"class":1030}," key1: ",[1002,60119,60120],{"class":1034},"'First Item'",[1002,60122,1143],{"class":1030},[1002,60124,60125,60128,60131],{"class":1004,"line":1354},[1002,60126,60127],{"class":1030}," key2: ",[1002,60129,60130],{"class":1034},"'Second Item'",[1002,60132,1143],{"class":1030},[1002,60134,60135],{"class":1004,"line":1360},[1002,60136,8353],{"class":1030},[1002,60138,60139],{"class":1004,"line":1366},[1002,60140,1051],{"emptyLinePlaceholder":1050},[1002,60142,60143,60145,60148,60150,60153,60156],{"class":1004,"line":1946},[1002,60144,51906],{"class":1015},[1002,60146,60147],{"class":1030}," convertedList ",[1002,60149,2393],{"class":1015},[1002,60151,60152],{"class":1030}," map.",[1002,60154,60155],{"class":1026},"toList",[1002,60157,1428],{"class":1030},[1002,60159,60160],{"class":1004,"line":1956},[1002,60161,1051],{"emptyLinePlaceholder":1050},[1002,60163,60164,60166,60168,60170],{"class":1004,"line":1961},[1002,60165,34298],{"class":1026},[1002,60167,57738],{"class":1030},[1002,60169,57741],{"class":1026},[1002,60171,60172],{"class":1030},"(convertedList)).to.be.true;\n",[1002,60174,60175],{"class":1004,"line":1971},[1002,60176,1051],{"emptyLinePlaceholder":1050},[1002,60178,60179],{"class":1004,"line":1980},[1002,60180,60181],{"class":1008}," \u002F\u002F Keys are discarded\n",[1002,60183,60184,60186,60189,60191,60193,60195,60197,60199],{"class":1004,"line":1985},[1002,60185,34298],{"class":1026},[1002,60187,60188],{"class":1030},"(convertedList.",[1002,60190,6619],{"class":1026},[1002,60192,54733],{"class":1030},[1002,60194,38558],{"class":1026},[1002,60196,1031],{"class":1030},[1002,60198,60120],{"class":1034},[1002,60200,1085],{"class":1030},[1002,60202,60203,60205,60207,60209,60211,60213,60215,60217],{"class":1004,"line":1995},[1002,60204,34298],{"class":1026},[1002,60206,60188],{"class":1030},[1002,60208,39006],{"class":1026},[1002,60210,54733],{"class":1030},[1002,60212,38558],{"class":1026},[1002,60214,1031],{"class":1030},[1002,60216,60130],{"class":1034},[1002,60218,1085],{"class":1030},[1002,60220,60221],{"class":1004,"line":2006},[1002,60222,19836],{"class":1030},[1002,60224,60225],{"class":1004,"line":2011},[1002,60226,1051],{"emptyLinePlaceholder":1050},[1002,60228,60229,60231,60233,60236,60238,60240],{"class":1004,"line":2017},[1002,60230,34260],{"class":1026},[1002,60232,1031],{"class":1030},[1002,60234,60235],{"class":1034},"'should convert List() to Map()'",[1002,60237,1251],{"class":1030},[1002,60239,6965],{"class":1015},[1002,60241,9772],{"class":1030},[1002,60243,60244,60246,60248,60250,60252,60254,60256,60258,60260,60262],{"class":1004,"line":2022},[1002,60245,51906],{"class":1015},[1002,60247,58376],{"class":1030},[1002,60249,2393],{"class":1015},[1002,60251,58381],{"class":1030},[1002,60253,39708],{"class":1026},[1002,60255,1031],{"class":1030},[1002,60257,60120],{"class":1034},[1002,60259,1251],{"class":1030},[1002,60261,60130],{"class":1034},[1002,60263,1085],{"class":1030},[1002,60265,60266],{"class":1004,"line":2442},[1002,60267,1051],{"emptyLinePlaceholder":1050},[1002,60269,60270,60272,60275,60277,60279,60281],{"class":1004,"line":2466},[1002,60271,51906],{"class":1015},[1002,60273,60274],{"class":1030}," convertedMap ",[1002,60276,2393],{"class":1015},[1002,60278,58549],{"class":1030},[1002,60280,57879],{"class":1026},[1002,60282,1428],{"class":1030},[1002,60284,60285],{"class":1004,"line":2471},[1002,60286,1051],{"emptyLinePlaceholder":1050},[1002,60288,60289],{"class":1004,"line":2476},[1002,60290,60291],{"class":1008}," \u002F\u002F Converted keys ascend numerically\n",[1002,60293,60294,60297,60299,60302,60304],{"class":1004,"line":2481},[1002,60295,60296],{"class":1030}," keys ",[1002,60298,2393],{"class":1015},[1002,60300,60301],{"class":1030}," convertedMap.",[1002,60303,33700],{"class":1026},[1002,60305,1428],{"class":1030},[1002,60307,60308,60310,60313,60315,60318,60320,60322,60324],{"class":1004,"line":2491},[1002,60309,34298],{"class":1026},[1002,60311,60312],{"class":1030},"(keys.",[1002,60314,6623],{"class":1026},[1002,60316,60317],{"class":1030},"().value).to.",[1002,60319,38558],{"class":1026},[1002,60321,1031],{"class":1030},[1002,60323,5867],{"class":1019},[1002,60325,1085],{"class":1030},[1002,60327,60328,60330,60332,60334,60336,60338,60340,60342],{"class":1004,"line":2502},[1002,60329,34298],{"class":1026},[1002,60331,60312],{"class":1030},[1002,60333,6623],{"class":1026},[1002,60335,60317],{"class":1030},[1002,60337,38558],{"class":1026},[1002,60339,1031],{"class":1030},[1002,60341,6211],{"class":1019},[1002,60343,1085],{"class":1030},[1002,60345,60346],{"class":1004,"line":2513},[1002,60347,1051],{"emptyLinePlaceholder":1050},[1002,60349,60350,60352,60354,60356],{"class":1004,"line":2535},[1002,60351,34298],{"class":1026},[1002,60353,57597],{"class":1030},[1002,60355,57600],{"class":1026},[1002,60357,60358],{"class":1030},"(convertedMap)).to.be.true;\n",[1002,60360,60361],{"class":1004,"line":2557},[1002,60362,1051],{"emptyLinePlaceholder":1050},[1002,60364,60365,60367,60370,60372,60374,60376,60378,60380],{"class":1004,"line":2562},[1002,60366,34298],{"class":1026},[1002,60368,60369],{"class":1030},"(convertedMap.",[1002,60371,6619],{"class":1026},[1002,60373,54733],{"class":1030},[1002,60375,38558],{"class":1026},[1002,60377,1031],{"class":1030},[1002,60379,60120],{"class":1034},[1002,60381,1085],{"class":1030},[1002,60383,60384,60386,60388,60390,60392,60394,60396,60398],{"class":1004,"line":2567},[1002,60385,34298],{"class":1026},[1002,60387,60369],{"class":1030},[1002,60389,39006],{"class":1026},[1002,60391,54733],{"class":1030},[1002,60393,38558],{"class":1026},[1002,60395,1031],{"class":1030},[1002,60397,60130],{"class":1034},[1002,60399,1085],{"class":1030},[1002,60401,60402],{"class":1004,"line":2572},[1002,60403,19836],{"class":1030},[1002,60405,60406],{"class":1004,"line":2582},[1002,60407,1051],{"emptyLinePlaceholder":1050},[1002,60409,60410,60412,60414,60417,60419,60421],{"class":1004,"line":2594},[1002,60411,34260],{"class":1026},[1002,60413,1031],{"class":1030},[1002,60415,60416],{"class":1034},"'should convert Map() to Javascript Array'",[1002,60418,1251],{"class":1030},[1002,60420,6965],{"class":1015},[1002,60422,9772],{"class":1030},[1002,60424,60425,60427,60429,60431,60433,60435],{"class":1004,"line":2603},[1002,60426,51906],{"class":1015},[1002,60428,60104],{"class":1030},[1002,60430,2393],{"class":1015},[1002,60432,51301],{"class":1030},[1002,60434,32239],{"class":1026},[1002,60436,2756],{"class":1030},[1002,60438,60439,60441,60443],{"class":1004,"line":2619},[1002,60440,60117],{"class":1030},[1002,60442,60120],{"class":1034},[1002,60444,1143],{"class":1030},[1002,60446,60447,60449,60451],{"class":1004,"line":2633},[1002,60448,60127],{"class":1030},[1002,60450,60130],{"class":1034},[1002,60452,1143],{"class":1030},[1002,60454,60455,60458,60461],{"class":1004,"line":2641},[1002,60456,60457],{"class":1030}," key3: { key4: ",[1002,60459,60460],{"class":1034},"'Nested Item'",[1002,60462,33835],{"class":1030},[1002,60464,60465],{"class":1004,"line":2655},[1002,60466,8353],{"class":1030},[1002,60468,60469],{"class":1004,"line":2667},[1002,60470,1051],{"emptyLinePlaceholder":1050},[1002,60472,60473,60475,60478,60480,60482,60484],{"class":1004,"line":2674},[1002,60474,51906],{"class":1015},[1002,60476,60477],{"class":1030}," arr ",[1002,60479,2393],{"class":1015},[1002,60481,60152],{"class":1030},[1002,60483,55023],{"class":1026},[1002,60485,1428],{"class":1030},[1002,60487,60488],{"class":1004,"line":2679},[1002,60489,1051],{"emptyLinePlaceholder":1050},[1002,60491,60492],{"class":1004,"line":2684},[1002,60493,60181],{"class":1008},[1002,60495,60496,60498,60501,60503,60506,60508,60510,60512],{"class":1004,"line":2704},[1002,60497,34298],{"class":1026},[1002,60499,60500],{"class":1030},"(arr[",[1002,60502,5867],{"class":1019},[1002,60504,60505],{"class":1030},"]).to.",[1002,60507,38558],{"class":1026},[1002,60509,1031],{"class":1030},[1002,60511,60120],{"class":1034},[1002,60513,1085],{"class":1030},[1002,60515,60516,60518,60520,60522,60524,60526,60528,60530],{"class":1004,"line":2709},[1002,60517,34298],{"class":1026},[1002,60519,60500],{"class":1030},[1002,60521,6211],{"class":1019},[1002,60523,60505],{"class":1030},[1002,60525,38558],{"class":1026},[1002,60527,1031],{"class":1030},[1002,60529,60130],{"class":1034},[1002,60531,1085],{"class":1030},[1002,60533,60534,60536,60538,60540,60543,60545,60547,60549],{"class":1004,"line":2714},[1002,60535,34298],{"class":1026},[1002,60537,60500],{"class":1030},[1002,60539,5681],{"class":1019},[1002,60541,60542],{"class":1030},"].key4).to.",[1002,60544,38558],{"class":1026},[1002,60546,1031],{"class":1030},[1002,60548,60460],{"class":1034},[1002,60550,1085],{"class":1030},[1002,60552,60553],{"class":1004,"line":2719},[1002,60554,19836],{"class":1030},[1002,60556,60557],{"class":1004,"line":2735},[1002,60558,1051],{"emptyLinePlaceholder":1050},[1002,60560,60561,60563,60565,60568,60570,60572],{"class":1004,"line":2740},[1002,60562,34260],{"class":1026},[1002,60564,1031],{"class":1030},[1002,60566,60567],{"class":1034},"'should convert Map() to JSON'",[1002,60569,1251],{"class":1030},[1002,60571,6965],{"class":1015},[1002,60573,9772],{"class":1030},[1002,60575,60576,60578,60580,60582,60584,60586],{"class":1004,"line":2759},[1002,60577,51906],{"class":1015},[1002,60579,60104],{"class":1030},[1002,60581,2393],{"class":1015},[1002,60583,51301],{"class":1030},[1002,60585,32239],{"class":1026},[1002,60587,2756],{"class":1030},[1002,60589,60590,60592,60594],{"class":1004,"line":2774},[1002,60591,60117],{"class":1030},[1002,60593,60120],{"class":1034},[1002,60595,1143],{"class":1030},[1002,60597,60598,60600,60602],{"class":1004,"line":2790},[1002,60599,60127],{"class":1030},[1002,60601,60130],{"class":1034},[1002,60603,1143],{"class":1030},[1002,60605,60606,60608,60610],{"class":1004,"line":2801},[1002,60607,60457],{"class":1030},[1002,60609,60460],{"class":1034},[1002,60611,33835],{"class":1030},[1002,60613,60614],{"class":1004,"line":2807},[1002,60615,8353],{"class":1030},[1002,60617,60618],{"class":1004,"line":2812},[1002,60619,1051],{"emptyLinePlaceholder":1050},[1002,60621,60622,60624,60627,60629,60631,60634],{"class":1004,"line":2828},[1002,60623,51906],{"class":1015},[1002,60625,60626],{"class":1030}," json ",[1002,60628,2393],{"class":1015},[1002,60630,60152],{"class":1030},[1002,60632,60633],{"class":1026},"toJSON",[1002,60635,1428],{"class":1030},[1002,60637,60638],{"class":1004,"line":2841},[1002,60639,1051],{"emptyLinePlaceholder":1050},[1002,60641,60642,60644,60647,60649,60651,60653],{"class":1004,"line":2854},[1002,60643,34298],{"class":1026},[1002,60645,60646],{"class":1030},"(json.key1).to.",[1002,60648,38558],{"class":1026},[1002,60650,1031],{"class":1030},[1002,60652,60120],{"class":1034},[1002,60654,1085],{"class":1030},[1002,60656,60657,60659,60662,60664,60666,60668],{"class":1004,"line":2864},[1002,60658,34298],{"class":1026},[1002,60660,60661],{"class":1030},"(json.key2).to.",[1002,60663,38558],{"class":1026},[1002,60665,1031],{"class":1030},[1002,60667,60130],{"class":1034},[1002,60669,1085],{"class":1030},[1002,60671,60672,60674,60677,60679,60681,60683],{"class":1004,"line":2869},[1002,60673,34298],{"class":1026},[1002,60675,60676],{"class":1030},"(json.key3.key4).to.",[1002,60678,38558],{"class":1026},[1002,60680,1031],{"class":1030},[1002,60682,60460],{"class":1034},[1002,60684,1085],{"class":1030},[1002,60686,60687],{"class":1004,"line":2874},[1002,60688,19836],{"class":1030},[1002,60690,60691],{"class":1004,"line":2880},[1002,60692,2804],{"class":1030},[1002,60694,60695],{"class":1004,"line":2903},[1002,60696,1051],{"emptyLinePlaceholder":1050},[1002,60698,60699,60701,60703],{"class":1004,"line":2909},[1002,60700,51753],{"class":1030},[1002,60702,2061],{"class":1026},[1002,60704,1428],{"class":1030},[953,60706,26561],{"id":26560},[925,60708,60709],{},"In this article we learnt Learn how Immutable.js data structures are different from native iterable Javascript data types and why they provide an excellent foundation on which to build our application's state.",[925,60711,41595,60712,948],{},[933,60713,38060],{"href":60714,"rel":60715},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fimmutable-js",[937],[1579,60717,60718],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":60720},[60721,60722,60723,60724,60725,60726,60727,60728,60730,60732,60734,60735,60736],{"id":51225,"depth":1012,"text":51226},{"id":27346,"depth":1012,"text":51247},{"id":51377,"depth":1012,"text":35583},{"id":51465,"depth":1012,"text":51466},{"id":52117,"depth":1012,"text":52118},{"id":53229,"depth":1012,"text":53230},{"id":54221,"depth":1012,"text":54222},{"id":56909,"depth":1012,"text":60729},"Equality Checking with .is() and More",{"id":57432,"depth":1012,"text":60731},"Using fromJS() to Convert Plain JavaScript Objects into Immutable Data",{"id":57948,"depth":1012,"text":60733},"Differences between the Immutable.js Map() and List()",{"id":58671,"depth":1012,"text":58672},{"id":60032,"depth":1012,"text":60033},{"id":26560,"depth":1012,"text":26561},"2016-02-23","\u002Fimages\u002Fblog\u002Ffeatures\u002Fimmutable-js.jpg",{},{"title":406,"description":408},"blog\u002Fimmutable-js",[16,17],"UX-1nQhGAY3KNlZCP0ciyzPlU7R1ThwNUWtF0Mj3H-c",{"id":60745,"title":278,"author":920,"body":60746,"date":61955,"description":280,"extension":1591,"image":61956,"meta":61957,"navigation":1050,"path":279,"seo":61958,"stem":61959,"tags":61960,"__hash__":61961},"blog\u002Fblog\u002Ffetch-api.md",{"type":922,"value":60747,"toc":61944},[60748,60752,60758,60762,60765,60771,60945,60948,61173,61176,61180,61189,61378,61381,61385,61391,61442,61451,61461,61464,61471,61555,61558,61724,61727,61730,61754,61756,61762,61835,61838,61844,61936,61938,61941],[953,60749,60751],{"id":60750},"why-fetch-api","Why Fetch API?",[925,60753,3898,60754,60757],{},[941,60755,60756],{},"XHR"," or the XMLHttpRequest has been around for over 10 years, and it has a nice API built around it, but many things has changed since XHR was introduced. We have HTML5, CSS3, also close to start using ES6. From jQuery Deferred, $q and Native JavaScript Promises people became familiar and like promises in JS, its's time for a new API to do AJAX-requests and interact with them.",[953,60759,60761],{"id":60760},"a-quick-look-at-xmlhttprequest","A Quick Look at XMLHttpRequest",[925,60763,60764],{},"Let's look at how we can use XMLHttpRequest to retrieve JSON.",[925,60766,60767,60768,60770],{},"We start by creating a ",[941,60769,37877],{}," file and adding the following code:",[993,60772,60774],{"className":995,"code":60773,"language":997,"meta":998,"style":998},"\u003C!DOCTYPE html>\n\u003Chtml>\n \u003Chead>\n \u003Cmeta charset=\"utf-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width\">\n \u003Ctitle>GitHub Info\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Cdiv>\n \u003Cimg alt=\"Avatar\" id=\"avatar\" style=\"height:100px\"\u002F>\n \u003Cp id=\"name\">\n \u003C\u002Fdiv>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,60775,60776,60786,60794,60802,60816,60838,60851,60859,60867,60875,60906,60921,60929,60937],{"__ignoreMap":998},[1002,60777,60778,60780,60782,60784],{"class":1004,"line":1005},[1002,60779,37888],{"class":1015},[1002,60781,37891],{"class":1019},[1002,60783,21739],{"class":1030},[1002,60785,15703],{"class":1015},[1002,60787,60788,60790,60792],{"class":1004,"line":1012},[1002,60789,6539],{"class":1030},[1002,60791,383],{"class":15711},[1002,60793,15703],{"class":1030},[1002,60795,60796,60798,60800],{"class":1004,"line":1047},[1002,60797,22427],{"class":1030},[1002,60799,32092],{"class":15711},[1002,60801,15703],{"class":1030},[1002,60803,60804,60806,60808,60810,60812,60814],{"class":1004,"line":1054},[1002,60805,15697],{"class":1030},[1002,60807,37926],{"class":15711},[1002,60809,37929],{"class":1026},[1002,60811,2393],{"class":1015},[1002,60813,51516],{"class":1034},[1002,60815,15703],{"class":1030},[1002,60817,60818,60820,60822,60824,60826,60829,60831,60833,60836],{"class":1004,"line":1060},[1002,60819,15697],{"class":1030},[1002,60821,37926],{"class":15711},[1002,60823,18584],{"class":1026},[1002,60825,2393],{"class":1015},[1002,60827,60828],{"class":1034},"\"viewport\"",[1002,60830,51551],{"class":1026},[1002,60832,2393],{"class":1015},[1002,60834,60835],{"class":1034},"\"width=device-width\"",[1002,60837,15703],{"class":1030},[1002,60839,60840,60842,60844,60847,60849],{"class":1004,"line":1272},[1002,60841,15697],{"class":1030},[1002,60843,15029],{"class":15711},[1002,60845,60846],{"class":1030},">GitHub Info\u003C\u002F",[1002,60848,15029],{"class":15711},[1002,60850,15703],{"class":1030},[1002,60852,60853,60855,60857],{"class":1004,"line":1348},[1002,60854,28112],{"class":1030},[1002,60856,32092],{"class":15711},[1002,60858,15703],{"class":1030},[1002,60860,60861,60863,60865],{"class":1004,"line":1354},[1002,60862,22427],{"class":1030},[1002,60864,15034],{"class":15711},[1002,60866,15703],{"class":1030},[1002,60868,60869,60871,60873],{"class":1004,"line":1360},[1002,60870,15697],{"class":1030},[1002,60872,19650],{"class":15711},[1002,60874,15703],{"class":1030},[1002,60876,60877,60880,60882,60885,60887,60890,60892,60894,60897,60899,60901,60904],{"class":1004,"line":1366},[1002,60878,60879],{"class":1030}," \u003C",[1002,60881,963],{"class":15711},[1002,60883,60884],{"class":1026}," alt",[1002,60886,2393],{"class":1015},[1002,60888,60889],{"class":1034},"\"Avatar\"",[1002,60891,21489],{"class":1026},[1002,60893,2393],{"class":1015},[1002,60895,60896],{"class":1034},"\"avatar\"",[1002,60898,29393],{"class":1026},[1002,60900,2393],{"class":1015},[1002,60902,60903],{"class":1034},"\"height:100px\"",[1002,60905,19039],{"class":1030},[1002,60907,60908,60910,60912,60914,60916,60919],{"class":1004,"line":1946},[1002,60909,60879],{"class":1030},[1002,60911,925],{"class":15711},[1002,60913,21489],{"class":1026},[1002,60915,2393],{"class":1015},[1002,60917,60918],{"class":1034},"\"name\"",[1002,60920,15703],{"class":1030},[1002,60922,60923,60925,60927],{"class":1004,"line":1956},[1002,60924,19647],{"class":1030},[1002,60926,19650],{"class":15711},[1002,60928,15703],{"class":1030},[1002,60930,60931,60933,60935],{"class":1004,"line":1961},[1002,60932,28112],{"class":1030},[1002,60934,15034],{"class":15711},[1002,60936,15703],{"class":1030},[1002,60938,60939,60941,60943],{"class":1004,"line":1971},[1002,60940,22437],{"class":1030},[1002,60942,383],{"class":15711},[1002,60944,15703],{"class":1030},[925,60946,60947],{},"The JavaScript code for our XMLHttpRequest will look as follows:",[993,60949,60951],{"className":995,"code":60950,"language":997,"meta":998,"style":998},"function request(params) {\n var xhr = new XMLHttpRequest();\n\n xhr.open('GET', params.url, true);\n xhr.onreadystatechange = function () {\n var result = JSON.parse(xhr.responseText);\n\n if (xhr.status === 200) {\n document.querySelector('#avatar').src = result.avatar_url;\n document.querySelector('#name').innerText = result.name.split(' ')[0];\n } else {\n console.log(JSON.parse(xhr.responseText));\n }\n };\n xhr.send();\n}\n\nrequest({\n url: 'https:\u002F\u002Fapi.github.com\u002Fusers\u002Fszaranger',\n});\n",[941,60952,60953,60966,60982,60986,61005,61018,61035,61039,61053,61073,61105,61113,61130,61134,61138,61146,61150,61154,61160,61169],{"__ignoreMap":998},[1002,60954,60955,60957,60960,60962,60964],{"class":1004,"line":1005},[1002,60956,6965],{"class":1015},[1002,60958,60959],{"class":1026}," request",[1002,60961,1031],{"class":1030},[1002,60963,24866],{"class":2378},[1002,60965,2382],{"class":1030},[1002,60967,60968,60970,60973,60975,60977,60980],{"class":1004,"line":1012},[1002,60969,28293],{"class":1015},[1002,60971,60972],{"class":1030}," xhr ",[1002,60974,2393],{"class":1015},[1002,60976,2690],{"class":1015},[1002,60978,60979],{"class":1026}," XMLHttpRequest",[1002,60981,1428],{"class":1030},[1002,60983,60984],{"class":1004,"line":1047},[1002,60985,1051],{"emptyLinePlaceholder":1050},[1002,60987,60988,60991,60993,60995,60998,61001,61003],{"class":1004,"line":1054},[1002,60989,60990],{"class":1030}," xhr.",[1002,60992,46144],{"class":1026},[1002,60994,1031],{"class":1030},[1002,60996,60997],{"class":1034},"'GET'",[1002,60999,61000],{"class":1030},", params.url, ",[1002,61002,17397],{"class":1019},[1002,61004,1085],{"class":1030},[1002,61006,61007,61009,61012,61014,61016],{"class":1004,"line":1060},[1002,61008,60990],{"class":1030},[1002,61010,61011],{"class":1026},"onreadystatechange",[1002,61013,1023],{"class":1015},[1002,61015,8457],{"class":1015},[1002,61017,9772],{"class":1030},[1002,61019,61020,61022,61024,61026,61028,61030,61032],{"class":1004,"line":1272},[1002,61021,51906],{"class":1015},[1002,61023,12925],{"class":1030},[1002,61025,2393],{"class":1015},[1002,61027,7730],{"class":1019},[1002,61029,948],{"class":1030},[1002,61031,7783],{"class":1026},[1002,61033,61034],{"class":1030},"(xhr.responseText);\n",[1002,61036,61037],{"class":1004,"line":1348},[1002,61038,1051],{"emptyLinePlaceholder":1050},[1002,61040,61041,61043,61046,61048,61051],{"class":1004,"line":1354},[1002,61042,4368],{"class":1015},[1002,61044,61045],{"class":1030}," (xhr.status ",[1002,61047,2892],{"class":1015},[1002,61049,61050],{"class":1019}," 200",[1002,61052,2382],{"class":1030},[1002,61054,61055,61058,61060,61062,61065,61068,61070],{"class":1004,"line":1360},[1002,61056,61057],{"class":1030}," document.",[1002,61059,35633],{"class":1026},[1002,61061,1031],{"class":1030},[1002,61063,61064],{"class":1034},"'#avatar'",[1002,61066,61067],{"class":1030},").src ",[1002,61069,2393],{"class":1015},[1002,61071,61072],{"class":1030}," result.avatar_url;\n",[1002,61074,61075,61077,61079,61081,61084,61087,61089,61092,61094,61096,61098,61101,61103],{"class":1004,"line":1366},[1002,61076,61057],{"class":1030},[1002,61078,35633],{"class":1026},[1002,61080,1031],{"class":1030},[1002,61082,61083],{"class":1034},"'#name'",[1002,61085,61086],{"class":1030},").innerText ",[1002,61088,2393],{"class":1015},[1002,61090,61091],{"class":1030}," result.name.",[1002,61093,18918],{"class":1026},[1002,61095,1031],{"class":1030},[1002,61097,6357],{"class":1034},[1002,61099,61100],{"class":1030},")[",[1002,61102,5867],{"class":1019},[1002,61104,6754],{"class":1030},[1002,61106,61107,61109,61111],{"class":1004,"line":1946},[1002,61108,6057],{"class":1030},[1002,61110,6060],{"class":1015},[1002,61112,1457],{"class":1030},[1002,61114,61115,61117,61119,61121,61123,61125,61127],{"class":1004,"line":1956},[1002,61116,17336],{"class":1030},[1002,61118,2886],{"class":1026},[1002,61120,1031],{"class":1030},[1002,61122,22195],{"class":1019},[1002,61124,948],{"class":1030},[1002,61126,7783],{"class":1026},[1002,61128,61129],{"class":1030},"(xhr.responseText));\n",[1002,61131,61132],{"class":1004,"line":1961},[1002,61133,2014],{"class":1030},[1002,61135,61136],{"class":1004,"line":1971},[1002,61137,15113],{"class":1030},[1002,61139,61140,61142,61144],{"class":1004,"line":1980},[1002,61141,60990],{"class":1030},[1002,61143,7117],{"class":1026},[1002,61145,1428],{"class":1030},[1002,61147,61148],{"class":1004,"line":1985},[1002,61149,1170],{"class":1030},[1002,61151,61152],{"class":1004,"line":1995},[1002,61153,1051],{"emptyLinePlaceholder":1050},[1002,61155,61156,61158],{"class":1004,"line":2006},[1002,61157,4786],{"class":1026},[1002,61159,2756],{"class":1030},[1002,61161,61162,61164,61167],{"class":1004,"line":2011},[1002,61163,40812],{"class":1030},[1002,61165,61166],{"class":1034},"'https:\u002F\u002Fapi.github.com\u002Fusers\u002Fszaranger'",[1002,61168,1143],{"class":1030},[1002,61170,61171],{"class":1004,"line":2017},[1002,61172,2804],{"class":1030},[925,61174,61175],{},"Here we are using event handlers instead of Promise. These event handlers already leads into spaghetti code and mess.",[953,61177,61179],{"id":61178},"using-fetch","Using Fetch",[925,61181,61182,61183,61185,61186,61188],{},"Let's look at how we can do the same thing with Fetch. The Ftech function is available from the global ",[941,61184,16479],{}," object and the first parameter is the URL. We are using the same ",[1107,61187,37877],{}," file for the next example, but for our JavaScript code, we are using fetch instead of XHR.",[993,61190,61192],{"className":995,"code":61191,"language":997,"meta":998,"style":998},"fetch('https:\u002F\u002Fapi.github.com\u002Fusers\u002Fszaranger', {\n method: 'GET',\n})\n .then(function (response) {\n if (response.status === 200) {\n response.json().then(function (result) {\n document.querySelector('#avatar').src = result.avatar_url;\n document.querySelector('#name').innerText = result.name.split(' ')[0];\n });\n } else {\n console.log('Request returned ' + response.status);\n }\n })\n .catch(function (error) {\n console.log(error);\n });\n",[941,61193,61194,61204,61213,61218,61234,61247,61268,61285,61313,61317,61325,61341,61345,61350,61366,61374],{"__ignoreMap":998},[1002,61195,61196,61198,61200,61202],{"class":1004,"line":1005},[1002,61197,49123],{"class":1026},[1002,61199,1031],{"class":1030},[1002,61201,61166],{"class":1034},[1002,61203,38330],{"class":1030},[1002,61205,61206,61209,61211],{"class":1004,"line":1012},[1002,61207,61208],{"class":1030}," method: ",[1002,61210,60997],{"class":1034},[1002,61212,1143],{"class":1030},[1002,61214,61215],{"class":1004,"line":1047},[1002,61216,61217],{"class":1030},"})\n",[1002,61219,61220,61222,61224,61226,61228,61230,61232],{"class":1004,"line":1054},[1002,61221,3794],{"class":1030},[1002,61223,25658],{"class":1026},[1002,61225,1031],{"class":1030},[1002,61227,6965],{"class":1015},[1002,61229,6513],{"class":1030},[1002,61231,28368],{"class":2378},[1002,61233,2382],{"class":1030},[1002,61235,61236,61238,61241,61243,61245],{"class":1004,"line":1060},[1002,61237,4368],{"class":1015},[1002,61239,61240],{"class":1030}," (response.status ",[1002,61242,2892],{"class":1015},[1002,61244,61050],{"class":1019},[1002,61246,2382],{"class":1030},[1002,61248,61249,61252,61254,61256,61258,61260,61262,61264,61266],{"class":1004,"line":1272},[1002,61250,61251],{"class":1030}," response.",[1002,61253,1122],{"class":1026},[1002,61255,12951],{"class":1030},[1002,61257,25658],{"class":1026},[1002,61259,1031],{"class":1030},[1002,61261,6965],{"class":1015},[1002,61263,6513],{"class":1030},[1002,61265,13068],{"class":2378},[1002,61267,2382],{"class":1030},[1002,61269,61270,61273,61275,61277,61279,61281,61283],{"class":1004,"line":1348},[1002,61271,61272],{"class":1030}," document.",[1002,61274,35633],{"class":1026},[1002,61276,1031],{"class":1030},[1002,61278,61064],{"class":1034},[1002,61280,61067],{"class":1030},[1002,61282,2393],{"class":1015},[1002,61284,61072],{"class":1030},[1002,61286,61287,61289,61291,61293,61295,61297,61299,61301,61303,61305,61307,61309,61311],{"class":1004,"line":1354},[1002,61288,61272],{"class":1030},[1002,61290,35633],{"class":1026},[1002,61292,1031],{"class":1030},[1002,61294,61083],{"class":1034},[1002,61296,61086],{"class":1030},[1002,61298,2393],{"class":1015},[1002,61300,61091],{"class":1030},[1002,61302,18918],{"class":1026},[1002,61304,1031],{"class":1030},[1002,61306,6357],{"class":1034},[1002,61308,61100],{"class":1030},[1002,61310,5867],{"class":1019},[1002,61312,6754],{"class":1030},[1002,61314,61315],{"class":1004,"line":1360},[1002,61316,47582],{"class":1030},[1002,61318,61319,61321,61323],{"class":1004,"line":1366},[1002,61320,6057],{"class":1030},[1002,61322,6060],{"class":1015},[1002,61324,1457],{"class":1030},[1002,61326,61327,61329,61331,61333,61336,61338],{"class":1004,"line":1946},[1002,61328,17336],{"class":1030},[1002,61330,2886],{"class":1026},[1002,61332,1031],{"class":1030},[1002,61334,61335],{"class":1034},"'Request returned '",[1002,61337,6583],{"class":1015},[1002,61339,61340],{"class":1030}," response.status);\n",[1002,61342,61343],{"class":1004,"line":1956},[1002,61344,2014],{"class":1030},[1002,61346,61347],{"class":1004,"line":1961},[1002,61348,61349],{"class":1030}," })\n",[1002,61351,61352,61354,61356,61358,61360,61362,61364],{"class":1004,"line":1971},[1002,61353,3794],{"class":1030},[1002,61355,30648],{"class":1026},[1002,61357,1031],{"class":1030},[1002,61359,6965],{"class":1015},[1002,61361,6513],{"class":1030},[1002,61363,25064],{"class":2378},[1002,61365,2382],{"class":1030},[1002,61367,61368,61370,61372],{"class":1004,"line":1980},[1002,61369,3030],{"class":1030},[1002,61371,2886],{"class":1026},[1002,61373,40037],{"class":1030},[1002,61375,61376],{"class":1004,"line":1985},[1002,61377,19836],{"class":1030},[925,61379,61380],{},"As you can see, fetch API uses Promises heavily to handle results. This is going to be the future of communicating with remote APIs.",[953,61382,61384],{"id":61383},"handling-the-json-response","Handling the JSON Response",[925,61386,61387,61388,61390],{},"In our second example, using fetch, the result has a ",[941,61389,1122],{}," method, which we call int turn to convert the response into a JSON object.",[993,61392,61394],{"className":995,"code":61393,"language":997,"meta":998,"style":998},"if(response.status === 200) {\n response.json().then(function(result) {\n ...\n });\n}\n",[941,61395,61396,61409,61430,61434,61438],{"__ignoreMap":998},[1002,61397,61398,61400,61403,61405,61407],{"class":1004,"line":1005},[1002,61399,46126],{"class":1015},[1002,61401,61402],{"class":1030},"(response.status ",[1002,61404,2892],{"class":1015},[1002,61406,61050],{"class":1019},[1002,61408,2382],{"class":1030},[1002,61410,61411,61414,61416,61418,61420,61422,61424,61426,61428],{"class":1004,"line":1012},[1002,61412,61413],{"class":1030}," response.",[1002,61415,1122],{"class":1026},[1002,61417,12951],{"class":1030},[1002,61419,25658],{"class":1026},[1002,61421,1031],{"class":1030},[1002,61423,6965],{"class":1015},[1002,61425,1031],{"class":1030},[1002,61427,13068],{"class":2378},[1002,61429,2382],{"class":1030},[1002,61431,61432],{"class":1004,"line":1047},[1002,61433,48894],{"class":1015},[1002,61435,61436],{"class":1004,"line":1054},[1002,61437,19836],{"class":1030},[1002,61439,61440],{"class":1004,"line":1060},[1002,61441,1170],{"class":1030},[925,61443,61444,61445,61447,61448,22383],{},"This ",[941,61446,1122],{}," method is a shortcut for ",[941,61449,61450],{},"JSON.parse(string)",[7100,61452,61454],{"title":61453,"type":24048},"Polyfill",[925,61455,61456,61457,948],{},"There's a Polyfill available for fetch as well - ",[933,61458,61459],{"href":61459,"rel":61460},"https:\u002F\u002Fgithub.com\u002Fgithub\u002Ffetch",[937],[953,61462,61463],{"id":28368},"Response",[925,61465,61466,61467,61470],{},"To customize our fetch call, we can create a ",[941,61468,61469],{},"Request"," object with advanced options:",[993,61472,61474],{"className":995,"code":61473,"language":997,"meta":998,"style":998},"var request = new Request('https:\u002F\u002Fapi.github.com\u002Fusers\u002Fszaranger', {\n method: 'GET',\n mode: 'cors',\n redirect: 'follow',\n headers: new Headers({\n 'Content-Type': 'text\u002Fjson',\n }),\n});\n",[941,61475,61476,61495,61503,61512,61522,61534,61546,61551],{"__ignoreMap":998},[1002,61477,61478,61480,61482,61484,61486,61489,61491,61493],{"class":1004,"line":1005},[1002,61479,18311],{"class":1015},[1002,61481,46515],{"class":1030},[1002,61483,2393],{"class":1015},[1002,61485,2690],{"class":1015},[1002,61487,61488],{"class":1026}," Request",[1002,61490,1031],{"class":1030},[1002,61492,61166],{"class":1034},[1002,61494,38330],{"class":1030},[1002,61496,61497,61499,61501],{"class":1004,"line":1012},[1002,61498,61208],{"class":1030},[1002,61500,60997],{"class":1034},[1002,61502,1143],{"class":1030},[1002,61504,61505,61507,61510],{"class":1004,"line":1047},[1002,61506,1507],{"class":1030},[1002,61508,61509],{"class":1034},"'cors'",[1002,61511,1143],{"class":1030},[1002,61513,61514,61517,61520],{"class":1004,"line":1054},[1002,61515,61516],{"class":1030}," redirect: ",[1002,61518,61519],{"class":1034},"'follow'",[1002,61521,1143],{"class":1030},[1002,61523,61524,61527,61529,61532],{"class":1004,"line":1060},[1002,61525,61526],{"class":1030}," headers: ",[1002,61528,5654],{"class":1015},[1002,61530,61531],{"class":1026}," Headers",[1002,61533,2756],{"class":1030},[1002,61535,61536,61539,61541,61544],{"class":1004,"line":1272},[1002,61537,61538],{"class":1034}," 'Content-Type'",[1002,61540,1137],{"class":1030},[1002,61542,61543],{"class":1034},"'text\u002Fjson'",[1002,61545,1143],{"class":1030},[1002,61547,61548],{"class":1004,"line":1348},[1002,61549,61550],{"class":1030}," }),\n",[1002,61552,61553],{"class":1004,"line":1354},[1002,61554,2804],{"class":1030},[925,61556,61557],{},"Now we can use this in place of the fetch call as follows:",[993,61559,61561],{"className":995,"code":61560,"language":997,"meta":998,"style":998},"fetch(request)\n .then(function (response) {\n if (response.status === 200) {\n response.json().then(function (result) {\n document.querySelector('#avatar').src = result.avatar_url;\n document.querySelector('#name').innerText = result.name.split(' ')[0];\n });\n } else {\n console.log('Request returned ' + response.status);\n }\n })\n .catch(function (error) {\n console.log(error);\n });\n",[941,61562,61563,61570,61586,61598,61618,61634,61662,61666,61674,61688,61692,61696,61712,61720],{"__ignoreMap":998},[1002,61564,61565,61567],{"class":1004,"line":1005},[1002,61566,49123],{"class":1026},[1002,61568,61569],{"class":1030},"(request)\n",[1002,61571,61572,61574,61576,61578,61580,61582,61584],{"class":1004,"line":1012},[1002,61573,3794],{"class":1030},[1002,61575,25658],{"class":1026},[1002,61577,1031],{"class":1030},[1002,61579,6965],{"class":1015},[1002,61581,6513],{"class":1030},[1002,61583,28368],{"class":2378},[1002,61585,2382],{"class":1030},[1002,61587,61588,61590,61592,61594,61596],{"class":1004,"line":1047},[1002,61589,4368],{"class":1015},[1002,61591,61240],{"class":1030},[1002,61593,2892],{"class":1015},[1002,61595,61050],{"class":1019},[1002,61597,2382],{"class":1030},[1002,61599,61600,61602,61604,61606,61608,61610,61612,61614,61616],{"class":1004,"line":1054},[1002,61601,61251],{"class":1030},[1002,61603,1122],{"class":1026},[1002,61605,12951],{"class":1030},[1002,61607,25658],{"class":1026},[1002,61609,1031],{"class":1030},[1002,61611,6965],{"class":1015},[1002,61613,6513],{"class":1030},[1002,61615,13068],{"class":2378},[1002,61617,2382],{"class":1030},[1002,61619,61620,61622,61624,61626,61628,61630,61632],{"class":1004,"line":1060},[1002,61621,61272],{"class":1030},[1002,61623,35633],{"class":1026},[1002,61625,1031],{"class":1030},[1002,61627,61064],{"class":1034},[1002,61629,61067],{"class":1030},[1002,61631,2393],{"class":1015},[1002,61633,61072],{"class":1030},[1002,61635,61636,61638,61640,61642,61644,61646,61648,61650,61652,61654,61656,61658,61660],{"class":1004,"line":1272},[1002,61637,61272],{"class":1030},[1002,61639,35633],{"class":1026},[1002,61641,1031],{"class":1030},[1002,61643,61083],{"class":1034},[1002,61645,61086],{"class":1030},[1002,61647,2393],{"class":1015},[1002,61649,61091],{"class":1030},[1002,61651,18918],{"class":1026},[1002,61653,1031],{"class":1030},[1002,61655,6357],{"class":1034},[1002,61657,61100],{"class":1030},[1002,61659,5867],{"class":1019},[1002,61661,6754],{"class":1030},[1002,61663,61664],{"class":1004,"line":1348},[1002,61665,47582],{"class":1030},[1002,61667,61668,61670,61672],{"class":1004,"line":1354},[1002,61669,6057],{"class":1030},[1002,61671,6060],{"class":1015},[1002,61673,1457],{"class":1030},[1002,61675,61676,61678,61680,61682,61684,61686],{"class":1004,"line":1360},[1002,61677,17336],{"class":1030},[1002,61679,2886],{"class":1026},[1002,61681,1031],{"class":1030},[1002,61683,61335],{"class":1034},[1002,61685,6583],{"class":1015},[1002,61687,61340],{"class":1030},[1002,61689,61690],{"class":1004,"line":1366},[1002,61691,2014],{"class":1030},[1002,61693,61694],{"class":1004,"line":1946},[1002,61695,61349],{"class":1030},[1002,61697,61698,61700,61702,61704,61706,61708,61710],{"class":1004,"line":1956},[1002,61699,3794],{"class":1030},[1002,61701,30648],{"class":1026},[1002,61703,1031],{"class":1030},[1002,61705,6965],{"class":1015},[1002,61707,6513],{"class":1030},[1002,61709,25064],{"class":2378},[1002,61711,2382],{"class":1030},[1002,61713,61714,61716,61718],{"class":1004,"line":1961},[1002,61715,3030],{"class":1030},[1002,61717,2886],{"class":1026},[1002,61719,40037],{"class":1030},[1002,61721,61722],{"class":1004,"line":1971},[1002,61723,19836],{"class":1030},[925,61725,61726],{},"The only mandatory property is the first parameter, which is the URL for the Request instance.",[925,61728,61729],{},"The response object also provides the following methods:",[1530,61731,61732,61738,61744,61749],{},[974,61733,61734,61737],{},[941,61735,61736],{},"arrayBuffer"," - An ArrayBuffer will resolve the returned promise",[974,61739,61740,61743],{},[941,61741,61742],{},"blob"," - A Blob will resolve the returned promise",[974,61745,61746,61748],{},[941,61747,1122],{}," - A JSON object will resolve the returned promise",[974,61750,61751,61753],{},[941,61752,24241],{}," - A text string will resolve the returned promise",[1655,61755,22195],{"id":1122},[925,61757,61758,61759,61761],{},"If you want your results formatted in JSON - you do so with the ",[941,61760,1122],{}," method, which converts the raw data to a JavaScript object.",[993,61763,61765],{"className":995,"code":61764,"language":997,"meta":998,"style":998},"fetch(request).then(function(response) {\n if(response.status === 200) {\n response.json().then(function(result) {\n ...\n });\n }\n});\n",[941,61766,61767,61786,61798,61818,61823,61827,61831],{"__ignoreMap":998},[1002,61768,61769,61771,61774,61776,61778,61780,61782,61784],{"class":1004,"line":1005},[1002,61770,49123],{"class":1026},[1002,61772,61773],{"class":1030},"(request).",[1002,61775,25658],{"class":1026},[1002,61777,1031],{"class":1030},[1002,61779,6965],{"class":1015},[1002,61781,1031],{"class":1030},[1002,61783,28368],{"class":2378},[1002,61785,2382],{"class":1030},[1002,61787,61788,61790,61792,61794,61796],{"class":1004,"line":1012},[1002,61789,19971],{"class":1015},[1002,61791,61402],{"class":1030},[1002,61793,2892],{"class":1015},[1002,61795,61050],{"class":1019},[1002,61797,2382],{"class":1030},[1002,61799,61800,61802,61804,61806,61808,61810,61812,61814,61816],{"class":1004,"line":1047},[1002,61801,28395],{"class":1030},[1002,61803,1122],{"class":1026},[1002,61805,12951],{"class":1030},[1002,61807,25658],{"class":1026},[1002,61809,1031],{"class":1030},[1002,61811,6965],{"class":1015},[1002,61813,1031],{"class":1030},[1002,61815,13068],{"class":2378},[1002,61817,2382],{"class":1030},[1002,61819,61820],{"class":1004,"line":1054},[1002,61821,61822],{"class":1015}," ...\n",[1002,61824,61825],{"class":1004,"line":1060},[1002,61826,8353],{"class":1030},[1002,61828,61829],{"class":1004,"line":1272},[1002,61830,1269],{"class":1030},[1002,61832,61833],{"class":1004,"line":1348},[1002,61834,2804],{"class":1030},[1655,61836,61837],{"id":61742},"Blob",[925,61839,61840,61841,61843],{},"Ideal for handling results like loading an image. The ",[941,61842,61742],{}," method does so by taking a Response stream and reading it.",[993,61845,61847],{"className":995,"code":61846,"language":997,"meta":998,"style":998},"fetch('https:\u002F\u002Favatars3.githubusercontent.com\u002Fu\u002F658820')\n .then(function (response) {\n return response.blob();\n })\n .then(function (blob) {\n document.querySelector('#avatar').src = URL.createObjectURL(blob);\n });\n",[941,61848,61849,61860,61876,61886,61890,61906,61932],{"__ignoreMap":998},[1002,61850,61851,61853,61855,61858],{"class":1004,"line":1005},[1002,61852,49123],{"class":1026},[1002,61854,1031],{"class":1030},[1002,61856,61857],{"class":1034},"'https:\u002F\u002Favatars3.githubusercontent.com\u002Fu\u002F658820'",[1002,61859,3808],{"class":1030},[1002,61861,61862,61864,61866,61868,61870,61872,61874],{"class":1004,"line":1012},[1002,61863,3794],{"class":1030},[1002,61865,25658],{"class":1026},[1002,61867,1031],{"class":1030},[1002,61869,6965],{"class":1015},[1002,61871,6513],{"class":1030},[1002,61873,28368],{"class":2378},[1002,61875,2382],{"class":1030},[1002,61877,61878,61880,61882,61884],{"class":1004,"line":1047},[1002,61879,2687],{"class":1015},[1002,61881,19894],{"class":1030},[1002,61883,61742],{"class":1026},[1002,61885,1428],{"class":1030},[1002,61887,61888],{"class":1004,"line":1054},[1002,61889,61349],{"class":1030},[1002,61891,61892,61894,61896,61898,61900,61902,61904],{"class":1004,"line":1060},[1002,61893,3794],{"class":1030},[1002,61895,25658],{"class":1026},[1002,61897,1031],{"class":1030},[1002,61899,6965],{"class":1015},[1002,61901,6513],{"class":1030},[1002,61903,61742],{"class":2378},[1002,61905,2382],{"class":1030},[1002,61907,61908,61911,61913,61915,61917,61919,61921,61924,61926,61929],{"class":1004,"line":1272},[1002,61909,61910],{"class":1030}," document.",[1002,61912,35633],{"class":1026},[1002,61914,1031],{"class":1030},[1002,61916,61064],{"class":1034},[1002,61918,61067],{"class":1030},[1002,61920,2393],{"class":1015},[1002,61922,61923],{"class":1019}," URL",[1002,61925,948],{"class":1030},[1002,61927,61928],{"class":1026},"createObjectURL",[1002,61930,61931],{"class":1030},"(blob);\n",[1002,61933,61934],{"class":1004,"line":1348},[1002,61935,19836],{"class":1030},[953,61937,26561],{"id":26560},[925,61939,61940],{},"The fetch API's support for Promises makes it the ideal choice making AJAX requests the right way.",[1579,61942,61943],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":61945},[61946,61947,61948,61949,61950,61954],{"id":60750,"depth":1012,"text":60751},{"id":60760,"depth":1012,"text":60761},{"id":61178,"depth":1012,"text":61179},{"id":61383,"depth":1012,"text":61384},{"id":28368,"depth":1012,"text":61463,"children":61951},[61952,61953],{"id":1122,"depth":1047,"text":22195},{"id":61742,"depth":1047,"text":61837},{"id":26560,"depth":1012,"text":26561},"2016-02-13","\u002Fimages\u002Fblog\u002Ffeatures\u002Ffetch-api.jpg",{},{"title":278,"description":280},"blog\u002Ffetch-api",[16,17],"nCECMyRKSmOA-JT-sTNjqqx6dZC1kYEjGO7cRNUVbvA",{"id":61963,"title":42,"author":920,"body":61964,"date":62771,"description":44,"extension":1591,"image":62772,"meta":62773,"navigation":1050,"path":43,"seo":62774,"stem":62775,"tags":62776,"__hash__":62777},"blog\u002Fblog\u002Fbabel-webpack.md",{"type":922,"value":61965,"toc":62758},[61966,61969,61973,61976,62008,62015,62021,62025,62032,62036,62039,62048,62064,62068,62088,62353,62365,62376,62385,62399,62403,62416,62421,62425,62428,62441,62444,62448,62453,62456,62465,62470,62498,62501,62512,62516,62519,62615,62624,62640,62643,62646,62686,62689,62750,62752,62755],[925,61967,61968],{},"Babel provides support for certain experimental features from ES7 beyond standard ES6. Some of these might make it to the core language while some might be dropped altogether.",[953,61970,61972],{"id":61971},"the-language-proposals","The language proposals",[925,61974,61975],{},"The core language proposals for JavaScript have been categorized within stages:",[1530,61977,61978,61984,61990,61996,62002],{},[974,61979,61980,61983],{},[1107,61981,61982],{},"Stage 0"," - Strawman",[974,61985,61986,61989],{},[1107,61987,61988],{},"Stage 1"," - Proposal",[974,61991,61992,61995],{},[1107,61993,61994],{},"Stage 2"," - Draft",[974,61997,61998,62001],{},[1107,61999,62000],{},"Stage 3"," - Candidate",[974,62003,62004,62007],{},[1107,62005,62006],{},"Stage 4"," - Finished",[925,62009,62010,62011,62014],{},"You have to be very careful with ",[1107,62012,62013],{},"stage 0"," features - if a feature changes\u002Fremoved your code will end up broken. But it's alright for smaller experimental projects.",[7100,62016,62018],{"title":62017,"type":24048},"Stage 2 - Draft",[925,62019,62020],{},"Features starting from stage 2 have been enabled by default",[953,62022,62024],{"id":62023},"configuring-babel-loader","Configuring babel-loader",[925,62026,62027,62028,62031],{},"The easiest way of using Babel with Webpack is via ",[1107,62029,62030],{},"babel-loader",". It takes our ES6 module definition based code and turn it into ES5 bundles.",[1655,62033,62035],{"id":62034},"installing-babel-loader","Installing babel-loader",[925,62037,62038],{},"As usual with any node package, use NPM to install babel-loader, and babel-core, which contains core logic of Babel.",[993,62040,62042],{"className":1797,"code":62041,"language":1799,"meta":998,"style":998},"npm install babel-loader babel-core --save-dev\n",[941,62043,62044],{"__ignoreMap":998},[1002,62045,62046],{"class":1004,"line":1005},[1002,62047,62041],{},[925,62049,62050,62051,62053,62054,2034,62057,62060,62061,948],{},"Now we need to add a loader declaration for babel-loader to the ",[1107,62052,47084],{}," section of the config. It matches both ",[941,62055,62056],{},".js",[941,62058,62059],{},".jsx"," using regular expression ",[941,62062,62063],{},"\u002F\\.jsx?$\u002F",[953,62065,62067],{"id":62066},"configuring-webpack","Configuring Webpack",[925,62069,62070,62071,62074,62075,62077,62078,62081,62082,62085,62086,948],{},"Let's restrict the loader to operate only within ",[941,62072,62073],{},".\u002Fapp"," directory by adding ",[1107,62076,43818],{}," rule. This way, it won't traverse through directories like ",[1107,62079,62080],{},"node_modules",". Another way of doing this is by adding an ",[1107,62083,62084],{},"exclude"," rule against ",[1107,62087,62080],{},[993,62089,62091],{"className":995,"code":62090,"language":997,"meta":998,"style":998},"var webpack = require('webpack');\nvar path = require('path');\n\nconst config = {\n context: __dirname + '\u002Fsrc',\n entry: '.\u002Fapp.js',\n\n resolve: {\n extensions: ['', '.js', '.jsx'],\n },\n\n output: {\n path: __dirname + 'build',\n filename: 'bundle.js',\n },\n module: {\n loaders: [\n {\n test: \u002F\\.css$\u002F,\n loaders: ['style', 'css'],\n include: path.join(__dirname, 'src'),\n },\n {\n test: \u002F\\.jsx?$\u002F,\n loaders: ['babel?cacheDirectory'],\n include: path.join(__dirname, 'src'),\n },\n ],\n },\n};\n\nmodule.exports = config;\n",[941,62092,62093,62109,62125,62129,62140,62151,62160,62164,62168,62184,62188,62192,62196,62207,62215,62219,62223,62227,62231,62247,62261,62275,62279,62283,62299,62308,62320,62324,62328,62332,62336,62340],{"__ignoreMap":998},[1002,62094,62095,62097,62099,62101,62103,62105,62107],{"class":1004,"line":1005},[1002,62096,18311],{"class":1015},[1002,62098,33249],{"class":1030},[1002,62100,2393],{"class":1015},[1002,62102,1027],{"class":1026},[1002,62104,1031],{"class":1030},[1002,62106,33258],{"class":1034},[1002,62108,1085],{"class":1030},[1002,62110,62111,62113,62115,62117,62119,62121,62123],{"class":1004,"line":1012},[1002,62112,18311],{"class":1015},[1002,62114,33231],{"class":1030},[1002,62116,2393],{"class":1015},[1002,62118,1027],{"class":1026},[1002,62120,1031],{"class":1030},[1002,62122,33240],{"class":1034},[1002,62124,1085],{"class":1030},[1002,62126,62127],{"class":1004,"line":1047},[1002,62128,1051],{"emptyLinePlaceholder":1050},[1002,62130,62131,62133,62136,62138],{"class":1004,"line":1054},[1002,62132,1016],{"class":1015},[1002,62134,62135],{"class":1019}," config",[1002,62137,1023],{"class":1015},[1002,62139,1457],{"class":1030},[1002,62141,62142,62144,62146,62149],{"class":1004,"line":1060},[1002,62143,41379],{"class":1030},[1002,62145,5064],{"class":1015},[1002,62147,62148],{"class":1034}," '\u002Fsrc'",[1002,62150,1143],{"class":1030},[1002,62152,62153,62155,62158],{"class":1004,"line":1272},[1002,62154,1462],{"class":1030},[1002,62156,62157],{"class":1034},"'.\u002Fapp.js'",[1002,62159,1143],{"class":1030},[1002,62161,62162],{"class":1004,"line":1348},[1002,62163,1051],{"emptyLinePlaceholder":1050},[1002,62165,62166],{"class":1004,"line":1354},[1002,62167,33359],{"class":1030},[1002,62169,62170,62172,62174,62176,62178,62180,62182],{"class":1004,"line":1360},[1002,62171,33364],{"class":1030},[1002,62173,19820],{"class":1034},[1002,62175,1251],{"class":1030},[1002,62177,33371],{"class":1034},[1002,62179,1251],{"class":1030},[1002,62181,33376],{"class":1034},[1002,62183,1903],{"class":1030},[1002,62185,62186],{"class":1004,"line":1366},[1002,62187,1502],{"class":1030},[1002,62189,62190],{"class":1004,"line":1946},[1002,62191,1051],{"emptyLinePlaceholder":1050},[1002,62193,62194],{"class":1004,"line":1956},[1002,62195,1472],{"class":1030},[1002,62197,62198,62200,62202,62205],{"class":1004,"line":1961},[1002,62199,41404],{"class":1030},[1002,62201,5064],{"class":1015},[1002,62203,62204],{"class":1034}," 'build'",[1002,62206,1143],{"class":1030},[1002,62208,62209,62211,62213],{"class":1004,"line":1971},[1002,62210,1477],{"class":1030},[1002,62212,1480],{"class":1034},[1002,62214,1143],{"class":1030},[1002,62216,62217],{"class":1004,"line":1980},[1002,62218,1502],{"class":1030},[1002,62220,62221],{"class":1004,"line":1985},[1002,62222,33464],{"class":1030},[1002,62224,62225],{"class":1004,"line":1995},[1002,62226,33469],{"class":1030},[1002,62228,62229],{"class":1004,"line":2006},[1002,62230,1336],{"class":1030},[1002,62232,62233,62235,62237,62239,62241,62243,62245],{"class":1004,"line":2011},[1002,62234,33478],{"class":1030},[1002,62236,33481],{"class":1034},[1002,62238,33485],{"class":33484},[1002,62240,29],{"class":33488},[1002,62242,15864],{"class":1015},[1002,62244,4685],{"class":1034},[1002,62246,1143],{"class":1030},[1002,62248,62249,62252,62255,62257,62259],{"class":1004,"line":2017},[1002,62250,62251],{"class":1030}," loaders: [",[1002,62253,62254],{"class":1034},"'style'",[1002,62256,1251],{"class":1030},[1002,62258,48652],{"class":1034},[1002,62260,1903],{"class":1030},[1002,62262,62263,62266,62268,62270,62273],{"class":1004,"line":2022},[1002,62264,62265],{"class":1030}," include: path.",[1002,62267,7504],{"class":1026},[1002,62269,1492],{"class":1030},[1002,62271,62272],{"class":1034},"'src'",[1002,62274,1257],{"class":1030},[1002,62276,62277],{"class":1004,"line":2442},[1002,62278,1922],{"class":1030},[1002,62280,62281],{"class":1004,"line":2466},[1002,62282,1336],{"class":1030},[1002,62284,62285,62287,62289,62291,62293,62295,62297],{"class":1004,"line":2471},[1002,62286,33478],{"class":1030},[1002,62288,33481],{"class":1034},[1002,62290,33485],{"class":33484},[1002,62292,2229],{"class":33488},[1002,62294,33491],{"class":1015},[1002,62296,4685],{"class":1034},[1002,62298,1143],{"class":1030},[1002,62300,62301,62303,62306],{"class":1004,"line":2476},[1002,62302,62251],{"class":1030},[1002,62304,62305],{"class":1034},"'babel?cacheDirectory'",[1002,62307,1903],{"class":1030},[1002,62309,62310,62312,62314,62316,62318],{"class":1004,"line":2481},[1002,62311,62265],{"class":1030},[1002,62313,7504],{"class":1026},[1002,62315,1492],{"class":1030},[1002,62317,62272],{"class":1034},[1002,62319,1257],{"class":1030},[1002,62321,62322],{"class":1004,"line":2491},[1002,62323,1922],{"class":1030},[1002,62325,62326],{"class":1004,"line":2502},[1002,62327,33564],{"class":1030},[1002,62329,62330],{"class":1004,"line":2513},[1002,62331,1502],{"class":1030},[1002,62333,62334],{"class":1004,"line":2535},[1002,62335,1517],{"class":1030},[1002,62337,62338],{"class":1004,"line":2557},[1002,62339,1051],{"emptyLinePlaceholder":1050},[1002,62341,62342,62344,62346,62348,62350],{"class":1004,"line":2562},[1002,62343,1227],{"class":1019},[1002,62345,948],{"class":1030},[1002,62347,1452],{"class":1019},[1002,62349,1023],{"class":1015},[1002,62351,62352],{"class":1030}," config;\n",[925,62354,62355,62358,62359,62361,62362,62364],{},[1107,62356,62357],{},"Line 8"," - Add resolve.extensions. ",[1107,62360,19820],{}," is needed to allow imports without an extension. Note the ",[1107,62363,948],{},"'s before extensions, the matching will fail without those.",[925,62366,62367,62370,62371,2034,62373,62375],{},[1107,62368,62369],{},"Line 24"," - This accepts ",[941,62372,2229],{},[941,62374,997],{}," thanks to Regular Expressions.",[925,62377,62378,62381,62382,948],{},[1107,62379,62380],{},"Line 25"," - Enable caching for improved performance during development. It uses default OS directory by default. If you need something more custom, pass a path to it. i.e., ",[941,62383,62384],{},"babel?cacheDirectory=\u003Cpath>",[7100,62386,62388],{"title":62387,"type":24048},"resolve.extensions",[925,62389,62390,62391,62394,62395,62398],{},"As resolve.extensions gets evaluated from left to right, we can use it to control which code gets loaded for given configuration. For instance, you could have .web.js to define web specific parts and then have something like ",[1107,62392,62393],{},"'', '.web.js', '.js', '.jsx'",". If a ",[1107,62396,62397],{},"web"," version of the file is found, Webpack would use that instead of the default.",[953,62400,62402],{"id":62401},"setting-up-babelrc","Setting up .babelrc",[925,62404,62405,62406,62415],{},"We can pass Babel settings through Webpack, for instance ",[1107,62407,62408,62409,62411,62412,62414],{},"babel?presets",[1002,62410],{},"=react,presets",[1002,62413],{},"=es2015",", but doing so it will only work for Wepback.",[925,62417,62418,62419,948],{},"For Babel settings to be accessed by anything, not just Webpack, we are going to create ",[941,62420,33153],{},[1655,62422,62424],{"id":62423},"plugins","Plugins",[925,62426,62427],{},"Babel 6 relies on plugins. There are two types of them: syntax and transform.",[1530,62429,62430,62435],{},[974,62431,62432,62434],{},[1107,62433,34624],{}," - Allows Babel to parse additional syntax",[974,62436,62437,62440],{},[1107,62438,62439],{},"Transform"," - Applies transformation",[925,62442,62443],{},"This helps code that is using future syntax can get transformed back to JavaScript older environments can understand.",[1655,62445,62447],{"id":62446},"presets","Presets",[925,62449,62450,62451,948],{},"To make it easier to consume plugins, Babel supports the concept of ",[1107,62452,62446],{},[925,62454,62455],{},"Each preset comes with a set of plugins so, you don't have to wire them up separately. In this case, we'll be relying on ES2015 and JSX presets:",[993,62457,62459],{"className":1797,"code":62458,"language":1799,"meta":998,"style":998},"npm i babel-preset-es2015 babel-preset-react --save-dev\n",[941,62460,62461],{"__ignoreMap":998},[1002,62462,62463],{"class":1004,"line":1005},[1002,62464,62458],{},[925,62466,62467,62468,33813],{},"Now let's set up a ",[941,62469,33153],{},[993,62471,62473],{"className":1120,"code":62472,"language":1122,"meta":998,"style":998},"{\n \"presets\": [\"es2015\", \"react\"]\n}\n",[941,62474,62475,62479,62494],{"__ignoreMap":998},[1002,62476,62477],{"class":1004,"line":1005},[1002,62478,1129],{"class":1030},[1002,62480,62481,62483,62485,62487,62489,62492],{"class":1004,"line":1012},[1002,62482,1316],{"class":1019},[1002,62484,1201],{"class":1030},[1002,62486,33179],{"class":1034},[1002,62488,1251],{"class":1030},[1002,62490,62491],{"class":1034},"\"react\"",[1002,62493,1207],{"class":1030},[1002,62495,62496],{"class":1004,"line":1047},[1002,62497,1170],{"class":1030},[925,62499,62500],{},"Babel provides stage-specific presets. This documents your project well and keeps it maintainable.",[7100,62502,62503],{"title":62387,"type":24048},[925,62504,62505,62506,62508,62509,62511],{},"If you don't like to maintain a ",[941,62507,33153],{}," file, another alternative is to write the configuration below babel field at ",[941,62510,1102],{},". Babel will pick it up from there.",[953,62513,62515],{"id":62514},"alternative-loader-declarations","Alternative Loader Declarations",[925,62517,62518],{},"Webpack's loader declaration allows passing parameters to a loader through a query string.",[993,62520,62522],{"className":995,"code":62521,"language":997,"meta":998,"style":998},"{\n test: \u002F\\.jsx?$\u002F,\n loader: 'babel',\n query: {\n cacheDirectory: true,\n presets: ['react', 'es2015']\n },\n include: path.join(__dirname, 'src')\n}\n",[941,62523,62524,62528,62547,62558,62565,62576,62591,62595,62611],{"__ignoreMap":998},[1002,62525,62526],{"class":1004,"line":1005},[1002,62527,1129],{"class":1030},[1002,62529,62530,62533,62535,62537,62539,62541,62543,62545],{"class":1004,"line":1012},[1002,62531,62532],{"class":1026}," test",[1002,62534,1813],{"class":1030},[1002,62536,33481],{"class":1034},[1002,62538,33485],{"class":33484},[1002,62540,2229],{"class":33488},[1002,62542,33491],{"class":1015},[1002,62544,4685],{"class":1034},[1002,62546,1143],{"class":1030},[1002,62548,62549,62552,62554,62556],{"class":1004,"line":1047},[1002,62550,62551],{"class":1026}," loader",[1002,62553,1137],{"class":1030},[1002,62555,33523],{"class":1034},[1002,62557,1143],{"class":1030},[1002,62559,62560,62563],{"class":1004,"line":1054},[1002,62561,62562],{"class":1026}," query",[1002,62564,15354],{"class":1030},[1002,62566,62567,62570,62572,62574],{"class":1004,"line":1060},[1002,62568,62569],{"class":1026}," cacheDirectory",[1002,62571,1137],{"class":1030},[1002,62573,17397],{"class":1019},[1002,62575,1143],{"class":1030},[1002,62577,62578,62581,62583,62585,62587,62589],{"class":1004,"line":1272},[1002,62579,62580],{"class":1026}," presets",[1002,62582,1201],{"class":1030},[1002,62584,33538],{"class":1034},[1002,62586,1251],{"class":1030},[1002,62588,33543],{"class":1034},[1002,62590,1207],{"class":1030},[1002,62592,62593],{"class":1004,"line":1348},[1002,62594,1502],{"class":1030},[1002,62596,62597,62600,62603,62605,62607,62609],{"class":1004,"line":1354},[1002,62598,62599],{"class":1026}," include",[1002,62601,62602],{"class":1030},": path.",[1002,62604,7504],{"class":1026},[1002,62606,1492],{"class":1030},[1002,62608,62272],{"class":1034},[1002,62610,3808],{"class":1030},[1002,62612,62613],{"class":1004,"line":1360},[1002,62614,1170],{"class":1030},[925,62616,62617,62618,2034,62621,62623],{},"Note the ",[1107,62619,62620],{},"loader",[1107,62622,14980],{}," fields. It can be alternatively declared as:",[993,62625,62627],{"className":995,"code":62626,"language":997,"meta":998,"style":998},"loader: 'babel?cacheDirectory,pesets[]=react,presets[]=es2015';\n",[941,62628,62629],{"__ignoreMap":998},[1002,62630,62631,62633,62635,62638],{"class":1004,"line":1005},[1002,62632,62620],{"class":1026},[1002,62634,1137],{"class":1030},[1002,62636,62637],{"class":1034},"'babel?cacheDirectory,pesets[]=react,presets[]=es2015'",[1002,62639,1407],{"class":1030},[925,62641,62642],{},"This is a bit hard to read, so the former is better for readability.",[925,62644,62645],{},"It's a good idea to keep in mind that Webpack loaders are always evaluated from right to left and from bottom to top (separate definitions). The following two declarations are equivalent based on this rule:",[993,62647,62649],{"className":1120,"code":62648,"language":1122,"meta":998,"style":998},"{\n test: \u002F\\.css$\u002F,\n loaders: ['style', 'css'],\n},\n",[941,62650,62651,62655,62667,62682],{"__ignoreMap":998},[1002,62652,62653],{"class":1004,"line":1005},[1002,62654,1129],{"class":1030},[1002,62656,62657,62660,62662,62665],{"class":1004,"line":1012},[1002,62658,62659],{"class":18541}," test",[1002,62661,1137],{"class":1030},[1002,62663,62664],{"class":18541},"\u002F\\.css$\u002F",[1002,62666,1143],{"class":1030},[1002,62668,62669,62672,62674,62676,62678,62680],{"class":1004,"line":1047},[1002,62670,62671],{"class":18541}," loaders",[1002,62673,1201],{"class":1030},[1002,62675,62254],{"class":18541},[1002,62677,1251],{"class":1030},[1002,62679,48652],{"class":18541},[1002,62681,1903],{"class":1030},[1002,62683,62684],{"class":1004,"line":1054},[1002,62685,3492],{"class":1030},[925,62687,62688],{},"And",[993,62690,62692],{"className":1120,"code":62691,"language":1122,"meta":998,"style":998},"{\n test: \u002F\\.css$\u002F,\n loaders: ['style'],\n},\n{\n test: \u002F\\.css$\u002F,\n loaders: ['css'],\n},\n",[941,62693,62694,62698,62708,62718,62722,62726,62736,62746],{"__ignoreMap":998},[1002,62695,62696],{"class":1004,"line":1005},[1002,62697,1129],{"class":1030},[1002,62699,62700,62702,62704,62706],{"class":1004,"line":1012},[1002,62701,62659],{"class":18541},[1002,62703,1137],{"class":1030},[1002,62705,62664],{"class":18541},[1002,62707,1143],{"class":1030},[1002,62709,62710,62712,62714,62716],{"class":1004,"line":1047},[1002,62711,62671],{"class":18541},[1002,62713,1201],{"class":1030},[1002,62715,62254],{"class":18541},[1002,62717,1903],{"class":1030},[1002,62719,62720],{"class":1004,"line":1054},[1002,62721,3492],{"class":1030},[1002,62723,62724],{"class":1004,"line":1060},[1002,62725,1129],{"class":1030},[1002,62727,62728,62730,62732,62734],{"class":1004,"line":1272},[1002,62729,62659],{"class":18541},[1002,62731,1137],{"class":1030},[1002,62733,62664],{"class":18541},[1002,62735,1143],{"class":1030},[1002,62737,62738,62740,62742,62744],{"class":1004,"line":1348},[1002,62739,62671],{"class":18541},[1002,62741,1201],{"class":1030},[1002,62743,48652],{"class":18541},[1002,62745,1903],{"class":1030},[1002,62747,62748],{"class":1004,"line":1354},[1002,62749,3492],{"class":1030},[953,62751,26561],{"id":26560},[925,62753,62754],{},"This tutorial will provide you with a good understanding of how Webpack and Babel play together, when it comes to building an application from the ground up and you will find it will be great for React apps.",[1579,62756,62757],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":998,"searchDepth":1012,"depth":1012,"links":62759},[62760,62761,62764,62765,62769,62770],{"id":61971,"depth":1012,"text":61972},{"id":62023,"depth":1012,"text":62024,"children":62762},[62763],{"id":62034,"depth":1047,"text":62035},{"id":62066,"depth":1012,"text":62067},{"id":62401,"depth":1012,"text":62402,"children":62766},[62767,62768],{"id":62423,"depth":1047,"text":62424},{"id":62446,"depth":1047,"text":62447},{"id":62514,"depth":1012,"text":62515},{"id":26560,"depth":1012,"text":26561},"2016-02-05","\u002Fimages\u002Fblog\u002Ffeatures\u002Fbabel-webpack.jpg",{},{"title":42,"description":44},"blog\u002Fbabel-webpack",[16,17],"MKTjtqJuTuok5x9XXHPGzkDfwsCSFtljTJzPSvuHyyQ",{"id":62779,"title":496,"author":920,"body":62780,"date":64254,"description":498,"extension":1591,"image":64255,"meta":64256,"navigation":1050,"path":497,"seo":64257,"stem":64258,"tags":64259,"__hash__":64260},"blog\u002Fblog\u002Fjavascript-arrays.md",{"type":922,"value":62781,"toc":64245},[62782,62789,62792,62796,62799,62976,62979,62985,62988,62990,62996,62999,63073,63076,63214,63216,63222,63224,63227,63437,63440,63446,63449,63452,63456,63462,63611,63614,63618,63624,63707,63709,63715,63722,63907,63909,63915,63918,63921,64006,64009,64015,64019,64022,64025,64230,64233,64239,64242],[7100,62783,62784],{"title":12121,"type":24048},[925,62785,62786,62787],{},"The JavaScript Array object is a global object that is used in the construction of arrays; which are high-level, list-like objects. – ",[1107,62788,34873],{},[925,62790,62791],{},"Let's look at some useful helper functions JavaScript Array provides to us.",[953,62793,62795],{"id":62794},"concat","Concat",[925,62797,62798],{},"Concat creates a shallow copy of an existing array that includes any arguments you pass to it.\nLet's look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as forEach.",[993,62800,62802],{"className":995,"code":62801,"language":997,"meta":998,"style":998},"var cars = [\n {\n brand: 'Ford',\n },\n {\n brand: 'Cadillac',\n },\n];\n\nvar trucks = [\n {\n brand: 'Pontiac',\n },\n {\n brand: 'Chevrolet',\n },\n {\n brand: 'Buick',\n },\n];\n\nvehicles = cars.concat(trucks);\n\nvehicles.forEach(function (vehicle) {\n console.log(vehicle.brand);\n});\n",[941,62803,62804,62815,62819,62829,62833,62837,62846,62850,62854,62858,62869,62873,62882,62886,62890,62899,62903,62907,62916,62920,62924,62928,62942,62946,62963,62972],{"__ignoreMap":998},[1002,62805,62806,62808,62811,62813],{"class":1004,"line":1005},[1002,62807,18311],{"class":1015},[1002,62809,62810],{"class":1030}," cars ",[1002,62812,2393],{"class":1015},[1002,62814,10274],{"class":1030},[1002,62816,62817],{"class":1004,"line":1012},[1002,62818,1235],{"class":1030},[1002,62820,62821,62824,62827],{"class":1004,"line":1047},[1002,62822,62823],{"class":1030}," brand: ",[1002,62825,62826],{"class":1034},"'Ford'",[1002,62828,1143],{"class":1030},[1002,62830,62831],{"class":1004,"line":1054},[1002,62832,1502],{"class":1030},[1002,62834,62835],{"class":1004,"line":1060},[1002,62836,1235],{"class":1030},[1002,62838,62839,62841,62844],{"class":1004,"line":1272},[1002,62840,62823],{"class":1030},[1002,62842,62843],{"class":1034},"'Cadillac'",[1002,62845,1143],{"class":1030},[1002,62847,62848],{"class":1004,"line":1348},[1002,62849,1502],{"class":1030},[1002,62851,62852],{"class":1004,"line":1354},[1002,62853,6754],{"class":1030},[1002,62855,62856],{"class":1004,"line":1360},[1002,62857,1051],{"emptyLinePlaceholder":1050},[1002,62859,62860,62862,62865,62867],{"class":1004,"line":1366},[1002,62861,18311],{"class":1015},[1002,62863,62864],{"class":1030}," trucks ",[1002,62866,2393],{"class":1015},[1002,62868,10274],{"class":1030},[1002,62870,62871],{"class":1004,"line":1946},[1002,62872,1235],{"class":1030},[1002,62874,62875,62877,62880],{"class":1004,"line":1956},[1002,62876,62823],{"class":1030},[1002,62878,62879],{"class":1034},"'Pontiac'",[1002,62881,1143],{"class":1030},[1002,62883,62884],{"class":1004,"line":1961},[1002,62885,1502],{"class":1030},[1002,62887,62888],{"class":1004,"line":1971},[1002,62889,1235],{"class":1030},[1002,62891,62892,62894,62897],{"class":1004,"line":1980},[1002,62893,62823],{"class":1030},[1002,62895,62896],{"class":1034},"'Chevrolet'",[1002,62898,1143],{"class":1030},[1002,62900,62901],{"class":1004,"line":1985},[1002,62902,1502],{"class":1030},[1002,62904,62905],{"class":1004,"line":1995},[1002,62906,1235],{"class":1030},[1002,62908,62909,62911,62914],{"class":1004,"line":2006},[1002,62910,62823],{"class":1030},[1002,62912,62913],{"class":1034},"'Buick'",[1002,62915,1143],{"class":1030},[1002,62917,62918],{"class":1004,"line":2011},[1002,62919,1502],{"class":1030},[1002,62921,62922],{"class":1004,"line":2017},[1002,62923,6754],{"class":1030},[1002,62925,62926],{"class":1004,"line":2022},[1002,62927,1051],{"emptyLinePlaceholder":1050},[1002,62929,62930,62933,62935,62937,62939],{"class":1004,"line":2442},[1002,62931,62932],{"class":1030},"vehicles ",[1002,62934,2393],{"class":1015},[1002,62936,51322],{"class":1030},[1002,62938,62794],{"class":1026},[1002,62940,62941],{"class":1030},"(trucks);\n",[1002,62943,62944],{"class":1004,"line":2466},[1002,62945,1051],{"emptyLinePlaceholder":1050},[1002,62947,62948,62951,62953,62955,62957,62959,62961],{"class":1004,"line":2471},[1002,62949,62950],{"class":1030},"vehicles.",[1002,62952,8408],{"class":1026},[1002,62954,1031],{"class":1030},[1002,62956,6965],{"class":1015},[1002,62958,6513],{"class":1030},[1002,62960,2698],{"class":2378},[1002,62962,2382],{"class":1030},[1002,62964,62965,62967,62969],{"class":1004,"line":2476},[1002,62966,6977],{"class":1030},[1002,62968,2886],{"class":1026},[1002,62970,62971],{"class":1030},"(vehicle.brand);\n",[1002,62973,62974],{"class":1004,"line":2481},[1002,62975,2804],{"class":1030},[925,62977,62978],{},"Above code will print out the following on the web console:",[993,62980,62983],{"className":62981,"code":62982,"language":24241},[24239],"\"Ford\"\n\"Cadillac\"\n\"Pontiac\"\n\"Chevrolet\"\n\"Buick\"\n",[941,62984,62982],{"__ignoreMap":998},[925,62986,62987],{},"Concat is a method that you call on an existing array and it returns back to you a new array that has the original, plus any parameters you pass in here.",[953,62989,32797],{"id":7504},[925,62991,3898,62992,62995],{},[941,62993,62994],{},"join()"," method joins all elements of an array into a string. First, let's look at why join is often a better option than regular string concatenation.",[925,62997,62998],{},"If we wanted to concatenate, first name and last name, we have to output this full name with a space in-between without using join, you would have to do something like access the first item in the array, add an empty space, access the second item, and that would work. This is extremely fragile, however. Just adding a middle name can break it.",[993,63000,63002],{"className":995,"code":63001,"language":997,"meta":998,"style":998},"var name = 'John Doe';\n\nvar names = name.split(' ');\n\nconsole.log(names[0] + ' ' + names[1]);\n",[941,63003,63004,63018,63022,63042,63046],{"__ignoreMap":998},[1002,63005,63006,63008,63011,63013,63016],{"class":1004,"line":1005},[1002,63007,18311],{"class":1015},[1002,63009,63010],{"class":1030}," name ",[1002,63012,2393],{"class":1015},[1002,63014,63015],{"class":1034}," 'John Doe'",[1002,63017,1407],{"class":1030},[1002,63019,63020],{"class":1004,"line":1012},[1002,63021,1051],{"emptyLinePlaceholder":1050},[1002,63023,63024,63026,63029,63031,63034,63036,63038,63040],{"class":1004,"line":1047},[1002,63025,18311],{"class":1015},[1002,63027,63028],{"class":1030}," names ",[1002,63030,2393],{"class":1015},[1002,63032,63033],{"class":1030}," name.",[1002,63035,18918],{"class":1026},[1002,63037,1031],{"class":1030},[1002,63039,6357],{"class":1034},[1002,63041,1085],{"class":1030},[1002,63043,63044],{"class":1004,"line":1054},[1002,63045,1051],{"emptyLinePlaceholder":1050},[1002,63047,63048,63050,63052,63055,63057,63059,63061,63064,63066,63069,63071],{"class":1004,"line":1060},[1002,63049,2883],{"class":1030},[1002,63051,2886],{"class":1026},[1002,63053,63054],{"class":1030},"(names[",[1002,63056,5867],{"class":1019},[1002,63058,18338],{"class":1030},[1002,63060,5064],{"class":1015},[1002,63062,63063],{"class":1034}," ' '",[1002,63065,6583],{"class":1015},[1002,63067,63068],{"class":1030}," names[",[1002,63070,6211],{"class":1019},[1002,63072,29611],{"class":1030},[925,63074,63075],{},"What you really want here is to say however many items there are, return all of them back as a string, and I want to provide the separator or the glue in-between. That's how join works.",[993,63077,63079],{"className":995,"code":63078,"language":997,"meta":998,"style":998},"var name = 'john doe';\n\nvar namesArray = name.split(' ');\n\nvar names = namesArray.map(function (name) {\n return name.charAt(0).toUpperCase() + name.slice(1);\n});\n\nnames = names.join(' ');\n\nconsole.log(names);\n",[941,63080,63081,63094,63098,63117,63121,63144,63175,63179,63183,63201,63205],{"__ignoreMap":998},[1002,63082,63083,63085,63087,63089,63092],{"class":1004,"line":1005},[1002,63084,18311],{"class":1015},[1002,63086,63010],{"class":1030},[1002,63088,2393],{"class":1015},[1002,63090,63091],{"class":1034}," 'john doe'",[1002,63093,1407],{"class":1030},[1002,63095,63096],{"class":1004,"line":1012},[1002,63097,1051],{"emptyLinePlaceholder":1050},[1002,63099,63100,63102,63105,63107,63109,63111,63113,63115],{"class":1004,"line":1047},[1002,63101,18311],{"class":1015},[1002,63103,63104],{"class":1030}," namesArray ",[1002,63106,2393],{"class":1015},[1002,63108,63033],{"class":1030},[1002,63110,18918],{"class":1026},[1002,63112,1031],{"class":1030},[1002,63114,6357],{"class":1034},[1002,63116,1085],{"class":1030},[1002,63118,63119],{"class":1004,"line":1054},[1002,63120,1051],{"emptyLinePlaceholder":1050},[1002,63122,63123,63125,63127,63129,63132,63134,63136,63138,63140,63142],{"class":1004,"line":1060},[1002,63124,18311],{"class":1015},[1002,63126,63028],{"class":1030},[1002,63128,2393],{"class":1015},[1002,63130,63131],{"class":1030}," namesArray.",[1002,63133,19444],{"class":1026},[1002,63135,1031],{"class":1030},[1002,63137,6965],{"class":1015},[1002,63139,6513],{"class":1030},[1002,63141,5911],{"class":2378},[1002,63143,2382],{"class":1030},[1002,63145,63146,63148,63150,63153,63155,63157,63159,63161,63163,63165,63167,63169,63171,63173],{"class":1004,"line":1272},[1002,63147,15066],{"class":1015},[1002,63149,63033],{"class":1030},[1002,63151,63152],{"class":1026},"charAt",[1002,63154,1031],{"class":1030},[1002,63156,5867],{"class":1019},[1002,63158,1539],{"class":1030},[1002,63160,38808],{"class":1026},[1002,63162,10191],{"class":1030},[1002,63164,5064],{"class":1015},[1002,63166,63033],{"class":1030},[1002,63168,55443],{"class":1026},[1002,63170,1031],{"class":1030},[1002,63172,6211],{"class":1019},[1002,63174,1085],{"class":1030},[1002,63176,63177],{"class":1004,"line":1348},[1002,63178,2804],{"class":1030},[1002,63180,63181],{"class":1004,"line":1354},[1002,63182,1051],{"emptyLinePlaceholder":1050},[1002,63184,63185,63188,63190,63193,63195,63197,63199],{"class":1004,"line":1360},[1002,63186,63187],{"class":1030},"names ",[1002,63189,2393],{"class":1015},[1002,63191,63192],{"class":1030}," names.",[1002,63194,7504],{"class":1026},[1002,63196,1031],{"class":1030},[1002,63198,6357],{"class":1034},[1002,63200,1085],{"class":1030},[1002,63202,63203],{"class":1004,"line":1366},[1002,63204,1051],{"emptyLinePlaceholder":1050},[1002,63206,63207,63209,63211],{"class":1004,"line":1946},[1002,63208,2883],{"class":1030},[1002,63210,2886],{"class":1026},[1002,63212,63213],{"class":1030},"(names);\n",[925,63215,62978],{},[993,63217,63220],{"className":63218,"code":63219,"language":24241},[24239],"\"John Doe\"\n",[941,63221,63219],{"__ignoreMap":998},[953,63223,32449],{"id":8313},[925,63225,63226],{},"Array filter creates a new array with all elements that pass the test implemented by the provided function.",[993,63228,63230],{"className":995,"code":63229,"language":997,"meta":998,"style":998},"var vehicles = [\n {\n brand: 'Peugeot',\n country: 'France',\n },\n {\n brand: 'BMW',\n country: 'Germany',\n },\n {\n brand: 'Audi',\n country: 'Germany',\n },\n];\n\nvar list = vehicles\n .filter(function (vehicle) {\n return vehicle.country === 'Germany';\n })\n .map(function (vehicle) {\n return vehicle.brand + ' - ' + vehicle.country;\n })\n .join('\\n');\n\nconsole.log(list);\n",[941,63231,63232,63242,63246,63255,63265,63269,63273,63281,63290,63294,63298,63306,63314,63318,63322,63326,63337,63353,63367,63371,63387,63404,63408,63424,63428],{"__ignoreMap":998},[1002,63233,63234,63236,63238,63240],{"class":1004,"line":1005},[1002,63235,18311],{"class":1015},[1002,63237,46376],{"class":1030},[1002,63239,2393],{"class":1015},[1002,63241,10274],{"class":1030},[1002,63243,63244],{"class":1004,"line":1012},[1002,63245,1235],{"class":1030},[1002,63247,63248,63250,63253],{"class":1004,"line":1047},[1002,63249,62823],{"class":1030},[1002,63251,63252],{"class":1034},"'Peugeot'",[1002,63254,1143],{"class":1030},[1002,63256,63257,63260,63263],{"class":1004,"line":1054},[1002,63258,63259],{"class":1030}," country: ",[1002,63261,63262],{"class":1034},"'France'",[1002,63264,1143],{"class":1030},[1002,63266,63267],{"class":1004,"line":1060},[1002,63268,1502],{"class":1030},[1002,63270,63271],{"class":1004,"line":1272},[1002,63272,1235],{"class":1030},[1002,63274,63275,63277,63279],{"class":1004,"line":1348},[1002,63276,62823],{"class":1030},[1002,63278,46394],{"class":1034},[1002,63280,1143],{"class":1030},[1002,63282,63283,63285,63288],{"class":1004,"line":1354},[1002,63284,63259],{"class":1030},[1002,63286,63287],{"class":1034},"'Germany'",[1002,63289,1143],{"class":1030},[1002,63291,63292],{"class":1004,"line":1360},[1002,63293,1502],{"class":1030},[1002,63295,63296],{"class":1004,"line":1366},[1002,63297,1235],{"class":1030},[1002,63299,63300,63302,63304],{"class":1004,"line":1946},[1002,63301,62823],{"class":1030},[1002,63303,46419],{"class":1034},[1002,63305,1143],{"class":1030},[1002,63307,63308,63310,63312],{"class":1004,"line":1956},[1002,63309,63259],{"class":1030},[1002,63311,63287],{"class":1034},[1002,63313,1143],{"class":1030},[1002,63315,63316],{"class":1004,"line":1961},[1002,63317,1502],{"class":1030},[1002,63319,63320],{"class":1004,"line":1971},[1002,63321,6754],{"class":1030},[1002,63323,63324],{"class":1004,"line":1980},[1002,63325,1051],{"emptyLinePlaceholder":1050},[1002,63327,63328,63330,63332,63334],{"class":1004,"line":1985},[1002,63329,18311],{"class":1015},[1002,63331,58376],{"class":1030},[1002,63333,2393],{"class":1015},[1002,63335,63336],{"class":1030}," vehicles\n",[1002,63338,63339,63341,63343,63345,63347,63349,63351],{"class":1004,"line":1995},[1002,63340,3794],{"class":1030},[1002,63342,8313],{"class":1026},[1002,63344,1031],{"class":1030},[1002,63346,6965],{"class":1015},[1002,63348,6513],{"class":1030},[1002,63350,2698],{"class":2378},[1002,63352,2382],{"class":1030},[1002,63354,63355,63357,63360,63362,63365],{"class":1004,"line":2006},[1002,63356,2687],{"class":1015},[1002,63358,63359],{"class":1030}," vehicle.country ",[1002,63361,2892],{"class":1015},[1002,63363,63364],{"class":1034}," 'Germany'",[1002,63366,1407],{"class":1030},[1002,63368,63369],{"class":1004,"line":2011},[1002,63370,61349],{"class":1030},[1002,63372,63373,63375,63377,63379,63381,63383,63385],{"class":1004,"line":2017},[1002,63374,3794],{"class":1030},[1002,63376,19444],{"class":1026},[1002,63378,1031],{"class":1030},[1002,63380,6965],{"class":1015},[1002,63382,6513],{"class":1030},[1002,63384,2698],{"class":2378},[1002,63386,2382],{"class":1030},[1002,63388,63389,63391,63394,63396,63399,63401],{"class":1004,"line":2022},[1002,63390,2687],{"class":1015},[1002,63392,63393],{"class":1030}," vehicle.brand ",[1002,63395,5064],{"class":1015},[1002,63397,63398],{"class":1034}," ' - '",[1002,63400,6583],{"class":1015},[1002,63402,63403],{"class":1030}," vehicle.country;\n",[1002,63405,63406],{"class":1004,"line":2442},[1002,63407,61349],{"class":1030},[1002,63409,63410,63412,63414,63416,63418,63420,63422],{"class":1004,"line":2466},[1002,63411,3794],{"class":1030},[1002,63413,7504],{"class":1026},[1002,63415,1031],{"class":1030},[1002,63417,14788],{"class":1034},[1002,63419,4636],{"class":1019},[1002,63421,14788],{"class":1034},[1002,63423,1085],{"class":1030},[1002,63425,63426],{"class":1004,"line":2471},[1002,63427,1051],{"emptyLinePlaceholder":1050},[1002,63429,63430,63432,63434],{"class":1004,"line":2476},[1002,63431,2883],{"class":1030},[1002,63433,2886],{"class":1026},[1002,63435,63436],{"class":1030},"(list);\n",[925,63438,63439],{},"The result on web console will be:",[993,63441,63444],{"className":63442,"code":63443,"language":24241},[24239],"\"BMW - Germany\nAudi - Germany\"\n",[941,63445,63443],{"__ignoreMap":998},[925,63447,63448],{},"Array filter creates a new array. It does this by calling a function that you provide, as the first argument with each item in the source array. Then it looks at the return value from that function call.",[925,63450,63451],{},"If it's a truthy value, such as a number, a string, or true, then the current item we're looking at will make it into the filtered array. However, if the function call returns a falsy value, then the item is discarded.",[953,63453,63455],{"id":63454},"some","Some",[925,63457,63458,63459,63461],{},"The method ",[941,63460,63454],{}," returns a boolean value after passing each item in the source array through the test function that you pass in as the first parameter. This makes it well suited to the types of queries that require a simple yes or no answer.",[993,63463,63465],{"className":995,"code":63464,"language":997,"meta":998,"style":998},"var vehicles = [\n {\n brand: 'Peugeot',\n country: 'France',\n },\n {\n brand: 'BMW',\n country: 'Germany',\n },\n {\n brand: 'Audi',\n country: 'Germany',\n },\n];\n\nvar isMadeInFrance = vehicles.some(function (vehicle) {\n return vehicle.country === 'France';\n});\n\nconsole.log(isMadeInFrance);\n",[941,63466,63467,63477,63481,63489,63497,63501,63505,63513,63521,63525,63529,63537,63545,63549,63553,63557,63581,63594,63598,63602],{"__ignoreMap":998},[1002,63468,63469,63471,63473,63475],{"class":1004,"line":1005},[1002,63470,18311],{"class":1015},[1002,63472,46376],{"class":1030},[1002,63474,2393],{"class":1015},[1002,63476,10274],{"class":1030},[1002,63478,63479],{"class":1004,"line":1012},[1002,63480,1235],{"class":1030},[1002,63482,63483,63485,63487],{"class":1004,"line":1047},[1002,63484,62823],{"class":1030},[1002,63486,63252],{"class":1034},[1002,63488,1143],{"class":1030},[1002,63490,63491,63493,63495],{"class":1004,"line":1054},[1002,63492,63259],{"class":1030},[1002,63494,63262],{"class":1034},[1002,63496,1143],{"class":1030},[1002,63498,63499],{"class":1004,"line":1060},[1002,63500,1502],{"class":1030},[1002,63502,63503],{"class":1004,"line":1272},[1002,63504,1235],{"class":1030},[1002,63506,63507,63509,63511],{"class":1004,"line":1348},[1002,63508,62823],{"class":1030},[1002,63510,46394],{"class":1034},[1002,63512,1143],{"class":1030},[1002,63514,63515,63517,63519],{"class":1004,"line":1354},[1002,63516,63259],{"class":1030},[1002,63518,63287],{"class":1034},[1002,63520,1143],{"class":1030},[1002,63522,63523],{"class":1004,"line":1360},[1002,63524,1502],{"class":1030},[1002,63526,63527],{"class":1004,"line":1366},[1002,63528,1235],{"class":1030},[1002,63530,63531,63533,63535],{"class":1004,"line":1946},[1002,63532,62823],{"class":1030},[1002,63534,46419],{"class":1034},[1002,63536,1143],{"class":1030},[1002,63538,63539,63541,63543],{"class":1004,"line":1956},[1002,63540,63259],{"class":1030},[1002,63542,63287],{"class":1034},[1002,63544,1143],{"class":1030},[1002,63546,63547],{"class":1004,"line":1961},[1002,63548,1502],{"class":1030},[1002,63550,63551],{"class":1004,"line":1971},[1002,63552,6754],{"class":1030},[1002,63554,63555],{"class":1004,"line":1980},[1002,63556,1051],{"emptyLinePlaceholder":1050},[1002,63558,63559,63561,63564,63566,63569,63571,63573,63575,63577,63579],{"class":1004,"line":1985},[1002,63560,18311],{"class":1015},[1002,63562,63563],{"class":1030}," isMadeInFrance ",[1002,63565,2393],{"class":1015},[1002,63567,63568],{"class":1030}," vehicles.",[1002,63570,63454],{"class":1026},[1002,63572,1031],{"class":1030},[1002,63574,6965],{"class":1015},[1002,63576,6513],{"class":1030},[1002,63578,2698],{"class":2378},[1002,63580,2382],{"class":1030},[1002,63582,63583,63585,63587,63589,63592],{"class":1004,"line":1995},[1002,63584,15066],{"class":1015},[1002,63586,63359],{"class":1030},[1002,63588,2892],{"class":1015},[1002,63590,63591],{"class":1034}," 'France'",[1002,63593,1407],{"class":1030},[1002,63595,63596],{"class":1004,"line":2006},[1002,63597,2804],{"class":1030},[1002,63599,63600],{"class":1004,"line":2011},[1002,63601,1051],{"emptyLinePlaceholder":1050},[1002,63603,63604,63606,63608],{"class":1004,"line":2017},[1002,63605,2883],{"class":1030},[1002,63607,2886],{"class":1026},[1002,63609,63610],{"class":1030},"(isMadeInFrance);\n",[925,63612,63613],{},"Array Some accepts a function as its first parameter. It will begin to call this function once for every item in this source array. Should any of those function calls to yield a truthy value, then Some will return true.",[953,63615,63617],{"id":63616},"indexof","IndexOf",[925,63619,3898,63620,63623],{},[941,63621,63622],{},"indexOf"," function is used to search for a value or reference inside of an array. If the value was not found, -1 will be returned as the result. If the value was found, an integer larger than -1 will be returned. (eg:- 0, 1, 2 etc)",[993,63625,63627],{"className":995,"code":63626,"language":997,"meta":998,"style":998},"var filename = 'style.css';\n\nvar hasExtension = filename.indexOf('.c');\nconsole.log(hasExtension);\n\nhasExtension = filename.indexOf('z');\nconsole.log(hasExtension);\n",[941,63628,63629,63643,63647,63668,63677,63681,63699],{"__ignoreMap":998},[1002,63630,63631,63633,63636,63638,63641],{"class":1004,"line":1005},[1002,63632,18311],{"class":1015},[1002,63634,63635],{"class":1030}," filename ",[1002,63637,2393],{"class":1015},[1002,63639,63640],{"class":1034}," 'style.css'",[1002,63642,1407],{"class":1030},[1002,63644,63645],{"class":1004,"line":1012},[1002,63646,1051],{"emptyLinePlaceholder":1050},[1002,63648,63649,63651,63654,63656,63659,63661,63663,63666],{"class":1004,"line":1047},[1002,63650,18311],{"class":1015},[1002,63652,63653],{"class":1030}," hasExtension ",[1002,63655,2393],{"class":1015},[1002,63657,63658],{"class":1030}," filename.",[1002,63660,63622],{"class":1026},[1002,63662,1031],{"class":1030},[1002,63664,63665],{"class":1034},"'.c'",[1002,63667,1085],{"class":1030},[1002,63669,63670,63672,63674],{"class":1004,"line":1054},[1002,63671,2883],{"class":1030},[1002,63673,2886],{"class":1026},[1002,63675,63676],{"class":1030},"(hasExtension);\n",[1002,63678,63679],{"class":1004,"line":1060},[1002,63680,1051],{"emptyLinePlaceholder":1050},[1002,63682,63683,63686,63688,63690,63692,63694,63697],{"class":1004,"line":1272},[1002,63684,63685],{"class":1030},"hasExtension ",[1002,63687,2393],{"class":1015},[1002,63689,63658],{"class":1030},[1002,63691,63622],{"class":1026},[1002,63693,1031],{"class":1030},[1002,63695,63696],{"class":1034},"'z'",[1002,63698,1085],{"class":1030},[1002,63700,63701,63703,63705],{"class":1004,"line":1348},[1002,63702,2883],{"class":1030},[1002,63704,2886],{"class":1026},[1002,63706,63676],{"class":1030},[925,63708,62978],{},[993,63710,63713],{"className":63711,"code":63712,"language":24241},[24239]," 5\n-1\n",[941,63714,63712],{"__ignoreMap":998},[925,63716,63717,63718,2034,63720,948],{},"The following example will show how to filter an object by looking into it's extension using ",[941,63719,8313],{},[941,63721,63622],{},[993,63723,63725],{"className":995,"code":63724,"language":997,"meta":998,"style":998},"var list = ['.css', '.js'];\n\nvar events = [\n {\n file: 'css\u002Fcore.css',\n },\n {\n file: 'js\u002Fapp.js',\n },\n {\n file: 'index.html',\n },\n];\n\nvar filtered = events.filter(function (event) {\n var ext = event.file.substr(event.file.lastIndexOf('.'));\n return list.indexOf(ext) > -1;\n});\n\nconsole.log(filtered);\n",[941,63726,63727,63746,63750,63761,63765,63775,63779,63783,63792,63796,63800,63809,63813,63817,63821,63845,63871,63890,63894,63898],{"__ignoreMap":998},[1002,63728,63729,63731,63733,63735,63737,63740,63742,63744],{"class":1004,"line":1005},[1002,63730,18311],{"class":1015},[1002,63732,58376],{"class":1030},[1002,63734,2393],{"class":1015},[1002,63736,1897],{"class":1030},[1002,63738,63739],{"class":1034},"'.css'",[1002,63741,1251],{"class":1030},[1002,63743,33371],{"class":1034},[1002,63745,6754],{"class":1030},[1002,63747,63748],{"class":1004,"line":1012},[1002,63749,1051],{"emptyLinePlaceholder":1050},[1002,63751,63752,63754,63757,63759],{"class":1004,"line":1047},[1002,63753,18311],{"class":1015},[1002,63755,63756],{"class":1030}," events ",[1002,63758,2393],{"class":1015},[1002,63760,10274],{"class":1030},[1002,63762,63763],{"class":1004,"line":1054},[1002,63764,1235],{"class":1030},[1002,63766,63767,63770,63773],{"class":1004,"line":1060},[1002,63768,63769],{"class":1030}," file: ",[1002,63771,63772],{"class":1034},"'css\u002Fcore.css'",[1002,63774,1143],{"class":1030},[1002,63776,63777],{"class":1004,"line":1272},[1002,63778,1502],{"class":1030},[1002,63780,63781],{"class":1004,"line":1348},[1002,63782,1235],{"class":1030},[1002,63784,63785,63787,63790],{"class":1004,"line":1354},[1002,63786,63769],{"class":1030},[1002,63788,63789],{"class":1034},"'js\u002Fapp.js'",[1002,63791,1143],{"class":1030},[1002,63793,63794],{"class":1004,"line":1360},[1002,63795,1502],{"class":1030},[1002,63797,63798],{"class":1004,"line":1366},[1002,63799,1235],{"class":1030},[1002,63801,63802,63804,63807],{"class":1004,"line":1946},[1002,63803,63769],{"class":1030},[1002,63805,63806],{"class":1034},"'index.html'",[1002,63808,1143],{"class":1030},[1002,63810,63811],{"class":1004,"line":1956},[1002,63812,1502],{"class":1030},[1002,63814,63815],{"class":1004,"line":1961},[1002,63816,6754],{"class":1030},[1002,63818,63819],{"class":1004,"line":1971},[1002,63820,1051],{"emptyLinePlaceholder":1050},[1002,63822,63823,63825,63828,63830,63833,63835,63837,63839,63841,63843],{"class":1004,"line":1980},[1002,63824,18311],{"class":1015},[1002,63826,63827],{"class":1030}," filtered ",[1002,63829,2393],{"class":1015},[1002,63831,63832],{"class":1030}," events.",[1002,63834,8313],{"class":1026},[1002,63836,1031],{"class":1030},[1002,63838,6965],{"class":1015},[1002,63840,6513],{"class":1030},[1002,63842,16696],{"class":2378},[1002,63844,2382],{"class":1030},[1002,63846,63847,63849,63852,63854,63857,63859,63862,63865,63867,63869],{"class":1004,"line":1985},[1002,63848,28293],{"class":1015},[1002,63850,63851],{"class":1030}," ext ",[1002,63853,2393],{"class":1015},[1002,63855,63856],{"class":1030}," event.file.",[1002,63858,5862],{"class":1026},[1002,63860,63861],{"class":1030},"(event.file.",[1002,63863,63864],{"class":1026},"lastIndexOf",[1002,63866,1031],{"class":1030},[1002,63868,48711],{"class":1034},[1002,63870,5663],{"class":1030},[1002,63872,63873,63875,63877,63879,63882,63884,63886,63888],{"class":1004,"line":1995},[1002,63874,15066],{"class":1015},[1002,63876,58549],{"class":1030},[1002,63878,63622],{"class":1026},[1002,63880,63881],{"class":1030},"(ext) ",[1002,63883,19171],{"class":1015},[1002,63885,39112],{"class":1015},[1002,63887,6211],{"class":1019},[1002,63889,1407],{"class":1030},[1002,63891,63892],{"class":1004,"line":2006},[1002,63893,2804],{"class":1030},[1002,63895,63896],{"class":1004,"line":2011},[1002,63897,1051],{"emptyLinePlaceholder":1050},[1002,63899,63900,63902,63904],{"class":1004,"line":2017},[1002,63901,2883],{"class":1030},[1002,63903,2886],{"class":1026},[1002,63905,63906],{"class":1030},"(filtered);\n",[925,63908,62978],{},[993,63910,63913],{"className":63911,"code":63912,"language":24241},[24239]," [[object Object] {\n file: \"css\u002Fcore.css\"\n}, [object Object] {\n file: \"js\u002Fapp.js\"\n}]\n",[941,63914,63912],{"__ignoreMap":998},[953,63916,63917],{"id":55443},"Slice",[925,63919,63920],{},"Array slice creates a shallow copy of an array. This method extracts items from an array starting from zero-based index.",[993,63922,63924],{"className":995,"code":63923,"language":997,"meta":998,"style":998},"var cars = ['Buick', 'Renault', 'Toyota'];\n\nconsole.log(\n cars.slice(1), \u002F\u002F \u002F slice(start)\n cars.slice(1, cars.length - 1), \u002F\u002F slice(start, end)\n);\n",[941,63925,63926,63950,63954,63962,63978,64002],{"__ignoreMap":998},[1002,63927,63928,63930,63932,63934,63936,63938,63940,63943,63945,63948],{"class":1004,"line":1005},[1002,63929,18311],{"class":1015},[1002,63931,62810],{"class":1030},[1002,63933,2393],{"class":1015},[1002,63935,1897],{"class":1030},[1002,63937,62913],{"class":1034},[1002,63939,1251],{"class":1030},[1002,63941,63942],{"class":1034},"'Renault'",[1002,63944,1251],{"class":1030},[1002,63946,63947],{"class":1034},"'Toyota'",[1002,63949,6754],{"class":1030},[1002,63951,63952],{"class":1004,"line":1012},[1002,63953,1051],{"emptyLinePlaceholder":1050},[1002,63955,63956,63958,63960],{"class":1004,"line":1047},[1002,63957,2883],{"class":1030},[1002,63959,2886],{"class":1026},[1002,63961,10468],{"class":1030},[1002,63963,63964,63967,63969,63971,63973,63975],{"class":1004,"line":1054},[1002,63965,63966],{"class":1030}," cars.",[1002,63968,55443],{"class":1026},[1002,63970,1031],{"class":1030},[1002,63972,6211],{"class":1019},[1002,63974,38570],{"class":1030},[1002,63976,63977],{"class":1008},"\u002F\u002F \u002F slice(start)\n",[1002,63979,63980,63982,63984,63986,63988,63991,63993,63995,63997,63999],{"class":1004,"line":1060},[1002,63981,63966],{"class":1030},[1002,63983,55443],{"class":1026},[1002,63985,1031],{"class":1030},[1002,63987,6211],{"class":1019},[1002,63989,63990],{"class":1030},", cars.",[1002,63992,5873],{"class":1019},[1002,63994,39112],{"class":1015},[1002,63996,6246],{"class":1019},[1002,63998,38570],{"class":1030},[1002,64000,64001],{"class":1008},"\u002F\u002F slice(start, end)\n",[1002,64003,64004],{"class":1004,"line":1272},[1002,64005,1085],{"class":1030},[925,64007,64008],{},"Now let's look at the web console:",[993,64010,64013],{"className":64011,"code":64012,"language":24241},[24239]," [\"Renault\", \"Toyota\"]\n [\"Renault\"]\n",[941,64014,64012],{"__ignoreMap":998},[953,64016,64018],{"id":64017},"sort","Sort",[925,64020,64021],{},"Sort can automatically arrange items in an array. It sorts the elements in an array in place and returns the same array.",[925,64023,64024],{},"Let's look at how to sort an array of strings alphabetically and the correct way to perform a numerical sort on an array of numbers.",[993,64026,64028],{"className":995,"code":64027,"language":997,"meta":998,"style":998},"var vehicles = [\n {\n brand: 'Peugeot',\n country: 'France',\n },\n {\n brand: 'BMW',\n country: 'Germany',\n },\n {\n brand: 'Volvo',\n country: 'Sweden',\n },\n];\n\nvar list = vehicles\n .sort(function (a, b) {\n return b.country - a.country;\n })\n .map(function (vehicle) {\n return vehicle.brand + ' - ' + vehicle.country;\n })\n .join('\\n');\n\nconsole.log(list);\n",[941,64029,64030,64040,64044,64052,64060,64064,64068,64076,64084,64088,64092,64101,64110,64114,64118,64122,64132,64152,64164,64168,64184,64198,64202,64218,64222],{"__ignoreMap":998},[1002,64031,64032,64034,64036,64038],{"class":1004,"line":1005},[1002,64033,18311],{"class":1015},[1002,64035,46376],{"class":1030},[1002,64037,2393],{"class":1015},[1002,64039,10274],{"class":1030},[1002,64041,64042],{"class":1004,"line":1012},[1002,64043,1235],{"class":1030},[1002,64045,64046,64048,64050],{"class":1004,"line":1047},[1002,64047,62823],{"class":1030},[1002,64049,63252],{"class":1034},[1002,64051,1143],{"class":1030},[1002,64053,64054,64056,64058],{"class":1004,"line":1054},[1002,64055,63259],{"class":1030},[1002,64057,63262],{"class":1034},[1002,64059,1143],{"class":1030},[1002,64061,64062],{"class":1004,"line":1060},[1002,64063,1502],{"class":1030},[1002,64065,64066],{"class":1004,"line":1272},[1002,64067,1235],{"class":1030},[1002,64069,64070,64072,64074],{"class":1004,"line":1348},[1002,64071,62823],{"class":1030},[1002,64073,46394],{"class":1034},[1002,64075,1143],{"class":1030},[1002,64077,64078,64080,64082],{"class":1004,"line":1354},[1002,64079,63259],{"class":1030},[1002,64081,63287],{"class":1034},[1002,64083,1143],{"class":1030},[1002,64085,64086],{"class":1004,"line":1360},[1002,64087,1502],{"class":1030},[1002,64089,64090],{"class":1004,"line":1366},[1002,64091,1235],{"class":1030},[1002,64093,64094,64096,64099],{"class":1004,"line":1946},[1002,64095,62823],{"class":1030},[1002,64097,64098],{"class":1034},"'Volvo'",[1002,64100,1143],{"class":1030},[1002,64102,64103,64105,64108],{"class":1004,"line":1956},[1002,64104,63259],{"class":1030},[1002,64106,64107],{"class":1034},"'Sweden'",[1002,64109,1143],{"class":1030},[1002,64111,64112],{"class":1004,"line":1961},[1002,64113,1502],{"class":1030},[1002,64115,64116],{"class":1004,"line":1971},[1002,64117,6754],{"class":1030},[1002,64119,64120],{"class":1004,"line":1980},[1002,64121,1051],{"emptyLinePlaceholder":1050},[1002,64123,64124,64126,64128,64130],{"class":1004,"line":1985},[1002,64125,18311],{"class":1015},[1002,64127,58376],{"class":1030},[1002,64129,2393],{"class":1015},[1002,64131,63336],{"class":1030},[1002,64133,64134,64136,64138,64140,64142,64144,64146,64148,64150],{"class":1004,"line":1995},[1002,64135,3794],{"class":1030},[1002,64137,64017],{"class":1026},[1002,64139,1031],{"class":1030},[1002,64141,6965],{"class":1015},[1002,64143,6513],{"class":1030},[1002,64145,933],{"class":2378},[1002,64147,1251],{"class":1030},[1002,64149,31621],{"class":2378},[1002,64151,2382],{"class":1030},[1002,64153,64154,64156,64159,64161],{"class":1004,"line":2006},[1002,64155,2687],{"class":1015},[1002,64157,64158],{"class":1030}," b.country ",[1002,64160,5101],{"class":1015},[1002,64162,64163],{"class":1030}," a.country;\n",[1002,64165,64166],{"class":1004,"line":2011},[1002,64167,61349],{"class":1030},[1002,64169,64170,64172,64174,64176,64178,64180,64182],{"class":1004,"line":2017},[1002,64171,3794],{"class":1030},[1002,64173,19444],{"class":1026},[1002,64175,1031],{"class":1030},[1002,64177,6965],{"class":1015},[1002,64179,6513],{"class":1030},[1002,64181,2698],{"class":2378},[1002,64183,2382],{"class":1030},[1002,64185,64186,64188,64190,64192,64194,64196],{"class":1004,"line":2022},[1002,64187,2687],{"class":1015},[1002,64189,63393],{"class":1030},[1002,64191,5064],{"class":1015},[1002,64193,63398],{"class":1034},[1002,64195,6583],{"class":1015},[1002,64197,63403],{"class":1030},[1002,64199,64200],{"class":1004,"line":2442},[1002,64201,61349],{"class":1030},[1002,64203,64204,64206,64208,64210,64212,64214,64216],{"class":1004,"line":2466},[1002,64205,3794],{"class":1030},[1002,64207,7504],{"class":1026},[1002,64209,1031],{"class":1030},[1002,64211,14788],{"class":1034},[1002,64213,4636],{"class":1019},[1002,64215,14788],{"class":1034},[1002,64217,1085],{"class":1030},[1002,64219,64220],{"class":1004,"line":2471},[1002,64221,1051],{"emptyLinePlaceholder":1050},[1002,64223,64224,64226,64228],{"class":1004,"line":2476},[1002,64225,2883],{"class":1030},[1002,64227,2886],{"class":1026},[1002,64229,63436],{"class":1030},[925,64231,64232],{},"The output on the web console will look like the following:",[993,64234,64237],{"className":64235,"code":64236,"language":24241},[24239],"Peugeot - France\nBMW - Germany\nVolvo - Sweden\n",[941,64238,64236],{"__ignoreMap":998},[925,64240,64241],{},"The reason why something so simple as this works for a numeric sort, is that this comparative function only cares that you return either 0, or a value less than 0, or a value above 0. For example, the longhand version of this might look something like, If A - B = 0, return 0. If A - B \u003C 0, return -1. If it's more than 0, return 1.",[1579,64243,64244],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":64246},[64247,64248,64249,64250,64251,64252,64253],{"id":62794,"depth":1012,"text":62795},{"id":7504,"depth":1012,"text":32797},{"id":8313,"depth":1012,"text":32449},{"id":63454,"depth":1012,"text":63455},{"id":63616,"depth":1012,"text":63617},{"id":55443,"depth":1012,"text":63917},{"id":64017,"depth":1012,"text":64018},"2016-01-29","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjavascript-arrays.jpg",{},{"title":496,"description":498},"blog\u002Fjavascript-arrays",[16,17],"Iw-XJVNuOnDxFJOC-rNncjLd0Qd2DnevbrPyNBAQYRA",{"id":64262,"title":698,"author":920,"body":64263,"date":69773,"description":700,"extension":1591,"image":69774,"meta":69775,"navigation":1050,"path":699,"seo":69776,"stem":69777,"tags":69778,"__hash__":69779},"blog\u002Fblog\u002Freact-router.md",{"type":922,"value":64264,"toc":69711},[64265,64269,64272,64274,64277,64295,64303,64307,64310,64401,64410,64414,64417,64505,64511,64515,64521,64622,64625,64629,64634,64728,64733,64736,64739,64857,64863,64867,64873,64989,64992,64995,65040,65046,65050,65056,65161,65171,65174,65294,65297,65301,65304,65438,65442,65445,65456,65459,65463,65469,65540,65549,65552,65561,65625,65638,65641,65644,65735,65739,65746,65857,65863,65867,65870,65874,65877,65965,65971,65974,65977,66064,66069,66073,66076,66165,66169,66173,66177,66183,66289,66294,66298,66304,66409,66415,66419,66425,66518,66521,66525,66528,66617,66623,66712,66715,66823,66827,66834,66912,66916,66923,67007,67013,67017,67026,67160,67164,67170,67312,67315,67319,67326,67437,67443,67448,67452,67459,67551,67555,67561,67648,67652,67658,67745,67749,67755,67848,67854,67858,67862,67865,67978,67982,67986,67990,68000,68151,68155,68164,68297,68301,68304,68415,68419,68422,68466,68470,68473,68635,68639,68643,68773,68777,68780,68976,68980,68983,69066,69070,69073,69116,69120,69123,69208,69212,69215,69280,69283,69289,69358,69362,69372,69513,69517,69526,69638,69640,69643,69703,69705,69708],[953,64266,64268],{"id":64267},"why-react-router","Why React Router?",[925,64270,64271],{},"Without a router library, we'd have to make our URL parsing a lot smarter, and we would end up with a lot of code to figure out which branch of nested components to be rendered at any given URL.",[953,64273,32993],{"id":32992},[925,64275,64276],{},"Install react-router usingnpm:",[993,64278,64280],{"className":1797,"code":64279,"language":1799,"meta":998,"style":998}," npm install react-router --save\n",[941,64281,64282],{"__ignoreMap":998},[1002,64283,64284,64287,64289,64292],{"class":1004,"line":1005},[1002,64285,64286],{"class":1026}," npm",[1002,64288,27349],{"class":1034},[1002,64290,64291],{"class":1034}," react-router",[1002,64293,64294],{"class":1019}," --save\n",[925,64296,24000,64297,64300,64301,33813],{},[1107,64298,64299],{},"--save"," flag to save the dependency to the ",[941,64302,1102],{},[953,64304,64306],{"id":64305},"using-react-router","Using React Router",[925,64308,64309],{},"Let's write a React component with ES6 syntax:",[993,64311,64313],{"className":995,"code":64312,"language":997,"meta":998,"style":998},"import { Route } from 'react-router';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRoute name=\"about\" handler={About} \u002F>\n \u003C\u002FRoute>\n);\n",[941,64314,64315,64329,64333,64344,64369,64389,64397],{"__ignoreMap":998},[1002,64316,64317,64319,64322,64324,64327],{"class":1004,"line":1005},[1002,64318,943],{"class":1015},[1002,64320,64321],{"class":1030}," { Route } ",[1002,64323,1068],{"class":1015},[1002,64325,64326],{"class":1034}," 'react-router'",[1002,64328,1407],{"class":1030},[1002,64330,64331],{"class":1004,"line":1012},[1002,64332,1051],{"emptyLinePlaceholder":1050},[1002,64334,64335,64337,64340,64342],{"class":1004,"line":1047},[1002,64336,1016],{"class":1015},[1002,64338,64339],{"class":1026}," routes",[1002,64341,1023],{"class":1015},[1002,64343,15692],{"class":1030},[1002,64345,64346,64348,64351,64354,64356,64359,64362,64364,64367],{"class":1004,"line":1054},[1002,64347,22427],{"class":1030},[1002,64349,64350],{"class":1019},"Route",[1002,64352,64353],{"class":1026}," handler",[1002,64355,2393],{"class":1015},[1002,64357,64358],{"class":1030},"{App} ",[1002,64360,64361],{"class":1026},"path",[1002,64363,2393],{"class":1015},[1002,64365,64366],{"class":1034},"\"\u002F\"",[1002,64368,15703],{"class":1030},[1002,64370,64371,64373,64375,64377,64379,64382,64384,64386],{"class":1004,"line":1060},[1002,64372,15697],{"class":1030},[1002,64374,64350],{"class":1019},[1002,64376,18584],{"class":1026},[1002,64378,2393],{"class":1015},[1002,64380,64381],{"class":1034},"\"about\"",[1002,64383,64353],{"class":1026},[1002,64385,2393],{"class":1015},[1002,64387,64388],{"class":1030},"{About} \u002F>\n",[1002,64390,64391,64393,64395],{"class":1004,"line":1272},[1002,64392,28112],{"class":1030},[1002,64394,64350],{"class":1019},[1002,64396,15703],{"class":1030},[1002,64398,64399],{"class":1004,"line":1348},[1002,64400,1085],{"class":1030},[925,64402,37639,64403,64405,64406,64409],{},[1107,64404,64350],{}," component from ",[1107,64407,64408],{},"react-router"," library.",[1655,64411,64413],{"id":64412},"custom-path","Custom Path",[925,64415,64416],{},"We can specify a custom path like this:",[993,64418,64420],{"className":995,"code":64419,"language":997,"meta":998,"style":998},"import { Route } from 'react-router';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRoute name=\"about\" path=\"my-about\" handler={About} \u002F>\n \u003C\u002FRoute>\n);\n",[941,64421,64422,64434,64438,64448,64468,64493,64501],{"__ignoreMap":998},[1002,64423,64424,64426,64428,64430,64432],{"class":1004,"line":1005},[1002,64425,943],{"class":1015},[1002,64427,64321],{"class":1030},[1002,64429,1068],{"class":1015},[1002,64431,64326],{"class":1034},[1002,64433,1407],{"class":1030},[1002,64435,64436],{"class":1004,"line":1012},[1002,64437,1051],{"emptyLinePlaceholder":1050},[1002,64439,64440,64442,64444,64446],{"class":1004,"line":1047},[1002,64441,1016],{"class":1015},[1002,64443,64339],{"class":1026},[1002,64445,1023],{"class":1015},[1002,64447,15692],{"class":1030},[1002,64449,64450,64452,64454,64456,64458,64460,64462,64464,64466],{"class":1004,"line":1054},[1002,64451,22427],{"class":1030},[1002,64453,64350],{"class":1019},[1002,64455,64353],{"class":1026},[1002,64457,2393],{"class":1015},[1002,64459,64358],{"class":1030},[1002,64461,64361],{"class":1026},[1002,64463,2393],{"class":1015},[1002,64465,64366],{"class":1034},[1002,64467,15703],{"class":1030},[1002,64469,64470,64472,64474,64476,64478,64480,64482,64484,64487,64489,64491],{"class":1004,"line":1060},[1002,64471,15697],{"class":1030},[1002,64473,64350],{"class":1019},[1002,64475,18584],{"class":1026},[1002,64477,2393],{"class":1015},[1002,64479,64381],{"class":1034},[1002,64481,19031],{"class":1026},[1002,64483,2393],{"class":1015},[1002,64485,64486],{"class":1034},"\"my-about\"",[1002,64488,64353],{"class":1026},[1002,64490,2393],{"class":1015},[1002,64492,64388],{"class":1030},[1002,64494,64495,64497,64499],{"class":1004,"line":1272},[1002,64496,28112],{"class":1030},[1002,64498,64350],{"class":1019},[1002,64500,15703],{"class":1030},[1002,64502,64503],{"class":1004,"line":1348},[1002,64504,1085],{"class":1030},[925,64506,64507,64508,948],{},"About page is now available at ",[1107,64509,64510],{},"\u002Fmy-about",[1655,64512,64514],{"id":64513},"default-route","Default Route",[925,64516,64517,64520],{},[941,64518,64519],{},"DefaultRoute"," can be used to point to home page.",[993,64522,64524],{"className":995,"code":64523,"language":997,"meta":998,"style":998},"import { Route, DefaultRoute } from 'react-router';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CDefaultRoute handler={Home} \u002F>\n \u003CRoute name=\"about\" path=\"my-about\" handler={About} \u002F>\n \u003C\u002FRoute>\n);\n",[941,64525,64526,64539,64543,64553,64573,64586,64610,64618],{"__ignoreMap":998},[1002,64527,64528,64530,64533,64535,64537],{"class":1004,"line":1005},[1002,64529,943],{"class":1015},[1002,64531,64532],{"class":1030}," { Route, DefaultRoute } ",[1002,64534,1068],{"class":1015},[1002,64536,64326],{"class":1034},[1002,64538,1407],{"class":1030},[1002,64540,64541],{"class":1004,"line":1012},[1002,64542,1051],{"emptyLinePlaceholder":1050},[1002,64544,64545,64547,64549,64551],{"class":1004,"line":1047},[1002,64546,1016],{"class":1015},[1002,64548,64339],{"class":1026},[1002,64550,1023],{"class":1015},[1002,64552,15692],{"class":1030},[1002,64554,64555,64557,64559,64561,64563,64565,64567,64569,64571],{"class":1004,"line":1054},[1002,64556,22427],{"class":1030},[1002,64558,64350],{"class":1019},[1002,64560,64353],{"class":1026},[1002,64562,2393],{"class":1015},[1002,64564,64358],{"class":1030},[1002,64566,64361],{"class":1026},[1002,64568,2393],{"class":1015},[1002,64570,64366],{"class":1034},[1002,64572,15703],{"class":1030},[1002,64574,64575,64577,64579,64581,64583],{"class":1004,"line":1060},[1002,64576,15697],{"class":1030},[1002,64578,64519],{"class":1019},[1002,64580,64353],{"class":1026},[1002,64582,2393],{"class":1015},[1002,64584,64585],{"class":1030},"{Home} \u002F>\n",[1002,64587,64588,64590,64592,64594,64596,64598,64600,64602,64604,64606,64608],{"class":1004,"line":1272},[1002,64589,15697],{"class":1030},[1002,64591,64350],{"class":1019},[1002,64593,18584],{"class":1026},[1002,64595,2393],{"class":1015},[1002,64597,64381],{"class":1034},[1002,64599,19031],{"class":1026},[1002,64601,2393],{"class":1015},[1002,64603,64486],{"class":1034},[1002,64605,64353],{"class":1026},[1002,64607,2393],{"class":1015},[1002,64609,64388],{"class":1030},[1002,64611,64612,64614,64616],{"class":1004,"line":1348},[1002,64613,28112],{"class":1030},[1002,64615,64350],{"class":1019},[1002,64617,15703],{"class":1030},[1002,64619,64620],{"class":1004,"line":1354},[1002,64621,1085],{"class":1030},[925,64623,64624],{},"Home page is now available at \u002F.",[1655,64626,64628],{"id":64627},"notfound-route","NotFound Route",[925,64630,64631,64520],{},[941,64632,64633],{},"NotFoundRoute",[993,64635,64637],{"className":995,"code":64636,"language":997,"meta":998,"style":998},"import { Route } from 'react-router';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRoute name=\"about\" handler={About} \u002F>\n \u003CNotFoundRoute handler={NotFound} \u002F>\n \u003C\u002FRoute>\n);\n",[941,64638,64639,64651,64655,64665,64685,64703,64716,64724],{"__ignoreMap":998},[1002,64640,64641,64643,64645,64647,64649],{"class":1004,"line":1005},[1002,64642,943],{"class":1015},[1002,64644,64321],{"class":1030},[1002,64646,1068],{"class":1015},[1002,64648,64326],{"class":1034},[1002,64650,1407],{"class":1030},[1002,64652,64653],{"class":1004,"line":1012},[1002,64654,1051],{"emptyLinePlaceholder":1050},[1002,64656,64657,64659,64661,64663],{"class":1004,"line":1047},[1002,64658,1016],{"class":1015},[1002,64660,64339],{"class":1026},[1002,64662,1023],{"class":1015},[1002,64664,15692],{"class":1030},[1002,64666,64667,64669,64671,64673,64675,64677,64679,64681,64683],{"class":1004,"line":1054},[1002,64668,22427],{"class":1030},[1002,64670,64350],{"class":1019},[1002,64672,64353],{"class":1026},[1002,64674,2393],{"class":1015},[1002,64676,64358],{"class":1030},[1002,64678,64361],{"class":1026},[1002,64680,2393],{"class":1015},[1002,64682,64366],{"class":1034},[1002,64684,15703],{"class":1030},[1002,64686,64687,64689,64691,64693,64695,64697,64699,64701],{"class":1004,"line":1060},[1002,64688,15697],{"class":1030},[1002,64690,64350],{"class":1019},[1002,64692,18584],{"class":1026},[1002,64694,2393],{"class":1015},[1002,64696,64381],{"class":1034},[1002,64698,64353],{"class":1026},[1002,64700,2393],{"class":1015},[1002,64702,64388],{"class":1030},[1002,64704,64705,64707,64709,64711,64713],{"class":1004,"line":1272},[1002,64706,15697],{"class":1030},[1002,64708,64633],{"class":1019},[1002,64710,64353],{"class":1026},[1002,64712,2393],{"class":1015},[1002,64714,64715],{"class":1030},"{NotFound} \u002F>\n",[1002,64717,64718,64720,64722],{"class":1004,"line":1348},[1002,64719,28112],{"class":1030},[1002,64721,64350],{"class":1019},[1002,64723,15703],{"class":1030},[1002,64725,64726],{"class":1004,"line":1354},[1002,64727,1085],{"class":1030},[925,64729,64730,64731,948],{},"Home page is now available at ",[1107,64732,4685],{},[1655,64734,44766],{"id":64735},"nesting",[925,64737,64738],{},"You can nest routes inside another.",[993,64740,64742],{"className":995,"code":64741,"language":997,"meta":998,"style":998},"import { Route } from 'react-router';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRoute name=\"users\" handler={Users}>\n \u003CRoute name=\"recent-users\" path=\"recent\" handler={RecentUsers} \u002F>\n \u003C\u002FRoute>\n \u003C\u002FRoute>\n);\n",[941,64743,64744,64756,64760,64770,64790,64810,64837,64845,64853],{"__ignoreMap":998},[1002,64745,64746,64748,64750,64752,64754],{"class":1004,"line":1005},[1002,64747,943],{"class":1015},[1002,64749,64321],{"class":1030},[1002,64751,1068],{"class":1015},[1002,64753,64326],{"class":1034},[1002,64755,1407],{"class":1030},[1002,64757,64758],{"class":1004,"line":1012},[1002,64759,1051],{"emptyLinePlaceholder":1050},[1002,64761,64762,64764,64766,64768],{"class":1004,"line":1047},[1002,64763,1016],{"class":1015},[1002,64765,64339],{"class":1026},[1002,64767,1023],{"class":1015},[1002,64769,15692],{"class":1030},[1002,64771,64772,64774,64776,64778,64780,64782,64784,64786,64788],{"class":1004,"line":1054},[1002,64773,22427],{"class":1030},[1002,64775,64350],{"class":1019},[1002,64777,64353],{"class":1026},[1002,64779,2393],{"class":1015},[1002,64781,64358],{"class":1030},[1002,64783,64361],{"class":1026},[1002,64785,2393],{"class":1015},[1002,64787,64366],{"class":1034},[1002,64789,15703],{"class":1030},[1002,64791,64792,64794,64796,64798,64800,64803,64805,64807],{"class":1004,"line":1060},[1002,64793,15697],{"class":1030},[1002,64795,64350],{"class":1019},[1002,64797,18584],{"class":1026},[1002,64799,2393],{"class":1015},[1002,64801,64802],{"class":1034},"\"users\"",[1002,64804,64353],{"class":1026},[1002,64806,2393],{"class":1015},[1002,64808,64809],{"class":1030},"{Users}>\n",[1002,64811,64812,64814,64816,64818,64820,64823,64825,64827,64830,64832,64834],{"class":1004,"line":1272},[1002,64813,19579],{"class":1030},[1002,64815,64350],{"class":1019},[1002,64817,18584],{"class":1026},[1002,64819,2393],{"class":1015},[1002,64821,64822],{"class":1034},"\"recent-users\"",[1002,64824,19031],{"class":1026},[1002,64826,2393],{"class":1015},[1002,64828,64829],{"class":1034},"\"recent\"",[1002,64831,64353],{"class":1026},[1002,64833,2393],{"class":1015},[1002,64835,64836],{"class":1030},"{RecentUsers} \u002F>\n",[1002,64838,64839,64841,64843],{"class":1004,"line":1348},[1002,64840,19647],{"class":1030},[1002,64842,64350],{"class":1019},[1002,64844,15703],{"class":1030},[1002,64846,64847,64849,64851],{"class":1004,"line":1354},[1002,64848,28112],{"class":1030},[1002,64850,64350],{"class":1019},[1002,64852,15703],{"class":1030},[1002,64854,64855],{"class":1004,"line":1360},[1002,64856,1085],{"class":1030},[925,64858,64859,64860,948],{},"Recent users available at ",[1107,64861,64862],{},"\u002Fusers\u002Frecent",[1655,64864,64866],{"id":64865},"request-parameters","Request Parameters",[925,64868,64869,64870,948],{},"Request Parameters are added to the router with a colon, for example ",[1107,64871,64872],{},"\u002Fuser\u002F:userId",[993,64874,64876],{"className":995,"code":64875,"language":997,"meta":998,"style":998},"import { Route } from 'react-router';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRoute name=\"users\" handler={Users}>\n \u003CRoute name=\"user\" path=\"\u002Fuser\u002F:userId\" handler={User} \u002F>\n \u003C\u002FRoute>\n \u003C\u002FRoute>\n);\n",[941,64877,64878,64890,64894,64904,64924,64942,64969,64977,64985],{"__ignoreMap":998},[1002,64879,64880,64882,64884,64886,64888],{"class":1004,"line":1005},[1002,64881,943],{"class":1015},[1002,64883,64321],{"class":1030},[1002,64885,1068],{"class":1015},[1002,64887,64326],{"class":1034},[1002,64889,1407],{"class":1030},[1002,64891,64892],{"class":1004,"line":1012},[1002,64893,1051],{"emptyLinePlaceholder":1050},[1002,64895,64896,64898,64900,64902],{"class":1004,"line":1047},[1002,64897,1016],{"class":1015},[1002,64899,64339],{"class":1026},[1002,64901,1023],{"class":1015},[1002,64903,15692],{"class":1030},[1002,64905,64906,64908,64910,64912,64914,64916,64918,64920,64922],{"class":1004,"line":1054},[1002,64907,22427],{"class":1030},[1002,64909,64350],{"class":1019},[1002,64911,64353],{"class":1026},[1002,64913,2393],{"class":1015},[1002,64915,64358],{"class":1030},[1002,64917,64361],{"class":1026},[1002,64919,2393],{"class":1015},[1002,64921,64366],{"class":1034},[1002,64923,15703],{"class":1030},[1002,64925,64926,64928,64930,64932,64934,64936,64938,64940],{"class":1004,"line":1060},[1002,64927,15697],{"class":1030},[1002,64929,64350],{"class":1019},[1002,64931,18584],{"class":1026},[1002,64933,2393],{"class":1015},[1002,64935,64802],{"class":1034},[1002,64937,64353],{"class":1026},[1002,64939,2393],{"class":1015},[1002,64941,64809],{"class":1030},[1002,64943,64944,64946,64948,64950,64952,64955,64957,64959,64962,64964,64966],{"class":1004,"line":1272},[1002,64945,19579],{"class":1030},[1002,64947,64350],{"class":1019},[1002,64949,18584],{"class":1026},[1002,64951,2393],{"class":1015},[1002,64953,64954],{"class":1034},"\"user\"",[1002,64956,19031],{"class":1026},[1002,64958,2393],{"class":1015},[1002,64960,64961],{"class":1034},"\"\u002Fuser\u002F:userId\"",[1002,64963,64353],{"class":1026},[1002,64965,2393],{"class":1015},[1002,64967,64968],{"class":1030},"{User} \u002F>\n",[1002,64970,64971,64973,64975],{"class":1004,"line":1348},[1002,64972,19647],{"class":1030},[1002,64974,64350],{"class":1019},[1002,64976,15703],{"class":1030},[1002,64978,64979,64981,64983],{"class":1004,"line":1354},[1002,64980,28112],{"class":1030},[1002,64982,64350],{"class":1019},[1002,64984,15703],{"class":1030},[1002,64986,64987],{"class":1004,"line":1360},[1002,64988,1085],{"class":1030},[925,64990,64991],{},"User 1234 is now available at ** \u002Fuser\u002F1234**.",[925,64993,64994],{},"Multiple request parameters can added like follows:",[993,64996,64998],{"className":995,"code":64997,"language":997,"meta":998,"style":998},"\u003CRoute\n name=\"user-message\"\n path=\"\u002Fuser\u002F:userId\u002Fmessage\u002F:messageId\"\n handler={User}\n\u002F>\n",[941,64999,65000,65007,65016,65026,65036],{"__ignoreMap":998},[1002,65001,65002,65004],{"class":1004,"line":1005},[1002,65003,6539],{"class":1030},[1002,65005,65006],{"class":1019},"Route\n",[1002,65008,65009,65011,65013],{"class":1004,"line":1012},[1002,65010,17207],{"class":1026},[1002,65012,2393],{"class":1015},[1002,65014,65015],{"class":1034},"\"user-message\"\n",[1002,65017,65018,65021,65023],{"class":1004,"line":1047},[1002,65019,65020],{"class":1026}," path",[1002,65022,2393],{"class":1015},[1002,65024,65025],{"class":1034},"\"\u002Fuser\u002F:userId\u002Fmessage\u002F:messageId\"\n",[1002,65027,65028,65031,65033],{"class":1004,"line":1054},[1002,65029,65030],{"class":1026}," handler",[1002,65032,2393],{"class":1015},[1002,65034,65035],{"class":1030},"{User}\n",[1002,65037,65038],{"class":1004,"line":1060},[1002,65039,19039],{"class":1030},[925,65041,65042,65043,948],{},"This will resolve into ",[1107,65044,65045],{},"\u002Fusers\u002F123\u002Fmessage\u002F456",[1655,65047,65049],{"id":65048},"redirect-routes","Redirect Routes",[925,65051,65052,65055],{},[941,65053,65054],{},"Redirect"," can be used for redirect routes.",[993,65057,65059],{"className":995,"code":65058,"language":997,"meta":998,"style":998},"import { Route, Redirect } from 'react-router';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRoute name=\"about\" handler={About} \u002F>\n \u003CRedirect from=\"company\" to=\"about\" \u002F>\n \u003C\u002FRoute>\n);\n",[941,65060,65061,65074,65078,65088,65108,65126,65149,65157],{"__ignoreMap":998},[1002,65062,65063,65065,65068,65070,65072],{"class":1004,"line":1005},[1002,65064,943],{"class":1015},[1002,65066,65067],{"class":1030}," { Route, Redirect } ",[1002,65069,1068],{"class":1015},[1002,65071,64326],{"class":1034},[1002,65073,1407],{"class":1030},[1002,65075,65076],{"class":1004,"line":1012},[1002,65077,1051],{"emptyLinePlaceholder":1050},[1002,65079,65080,65082,65084,65086],{"class":1004,"line":1047},[1002,65081,1016],{"class":1015},[1002,65083,64339],{"class":1026},[1002,65085,1023],{"class":1015},[1002,65087,15692],{"class":1030},[1002,65089,65090,65092,65094,65096,65098,65100,65102,65104,65106],{"class":1004,"line":1054},[1002,65091,22427],{"class":1030},[1002,65093,64350],{"class":1019},[1002,65095,64353],{"class":1026},[1002,65097,2393],{"class":1015},[1002,65099,64358],{"class":1030},[1002,65101,64361],{"class":1026},[1002,65103,2393],{"class":1015},[1002,65105,64366],{"class":1034},[1002,65107,15703],{"class":1030},[1002,65109,65110,65112,65114,65116,65118,65120,65122,65124],{"class":1004,"line":1060},[1002,65111,15697],{"class":1030},[1002,65113,64350],{"class":1019},[1002,65115,18584],{"class":1026},[1002,65117,2393],{"class":1015},[1002,65119,64381],{"class":1034},[1002,65121,64353],{"class":1026},[1002,65123,2393],{"class":1015},[1002,65125,64388],{"class":1030},[1002,65127,65128,65130,65132,65135,65137,65140,65143,65145,65147],{"class":1004,"line":1272},[1002,65129,15697],{"class":1030},[1002,65131,65054],{"class":1019},[1002,65133,65134],{"class":1026}," from",[1002,65136,2393],{"class":1015},[1002,65138,65139],{"class":1034},"\"company\"",[1002,65141,65142],{"class":1026}," to",[1002,65144,2393],{"class":1015},[1002,65146,64381],{"class":1034},[1002,65148,15258],{"class":1030},[1002,65150,65151,65153,65155],{"class":1004,"line":1348},[1002,65152,28112],{"class":1030},[1002,65154,64350],{"class":1019},[1002,65156,15703],{"class":1030},[1002,65158,65159],{"class":1004,"line":1354},[1002,65160,1085],{"class":1030},[925,65162,65163,65164,65167,65168,948],{},"Now ",[1107,65165,65166],{},"\u002Fcompany"," will be redirected to ",[1107,65169,65170],{},"\u002Fabout",[925,65172,65173],{},"To redirect routes with parameters:",[993,65175,65177],{"className":995,"code":65176,"language":997,"meta":998,"style":998},"import { Route, Redirect } from 'react-router';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRedirect from=\"\u002Fuser\u002Fme\" to=\"user\" params={{ userId: MY_ID }} \u002F>\n \u003CRoute name=\"user\" path=\"\u002Fuser\u002F:userId\" handler={User} \u002F>\n \u003C\u002FRoute>\n);\n",[941,65178,65179,65191,65195,65205,65225,65258,65282,65290],{"__ignoreMap":998},[1002,65180,65181,65183,65185,65187,65189],{"class":1004,"line":1005},[1002,65182,943],{"class":1015},[1002,65184,65067],{"class":1030},[1002,65186,1068],{"class":1015},[1002,65188,64326],{"class":1034},[1002,65190,1407],{"class":1030},[1002,65192,65193],{"class":1004,"line":1012},[1002,65194,1051],{"emptyLinePlaceholder":1050},[1002,65196,65197,65199,65201,65203],{"class":1004,"line":1047},[1002,65198,1016],{"class":1015},[1002,65200,64339],{"class":1026},[1002,65202,1023],{"class":1015},[1002,65204,15692],{"class":1030},[1002,65206,65207,65209,65211,65213,65215,65217,65219,65221,65223],{"class":1004,"line":1054},[1002,65208,22427],{"class":1030},[1002,65210,64350],{"class":1019},[1002,65212,64353],{"class":1026},[1002,65214,2393],{"class":1015},[1002,65216,64358],{"class":1030},[1002,65218,64361],{"class":1026},[1002,65220,2393],{"class":1015},[1002,65222,64366],{"class":1034},[1002,65224,15703],{"class":1030},[1002,65226,65227,65229,65231,65233,65235,65238,65240,65242,65244,65247,65249,65252,65255],{"class":1004,"line":1060},[1002,65228,15697],{"class":1030},[1002,65230,65054],{"class":1019},[1002,65232,65134],{"class":1026},[1002,65234,2393],{"class":1015},[1002,65236,65237],{"class":1034},"\"\u002Fuser\u002Fme\"",[1002,65239,65142],{"class":1026},[1002,65241,2393],{"class":1015},[1002,65243,64954],{"class":1034},[1002,65245,65246],{"class":1026}," params",[1002,65248,2393],{"class":1015},[1002,65250,65251],{"class":1030},"{{ userId: ",[1002,65253,65254],{"class":1019},"MY_ID",[1002,65256,65257],{"class":1030}," }} \u002F>\n",[1002,65259,65260,65262,65264,65266,65268,65270,65272,65274,65276,65278,65280],{"class":1004,"line":1272},[1002,65261,15697],{"class":1030},[1002,65263,64350],{"class":1019},[1002,65265,18584],{"class":1026},[1002,65267,2393],{"class":1015},[1002,65269,64954],{"class":1034},[1002,65271,19031],{"class":1026},[1002,65273,2393],{"class":1015},[1002,65275,64961],{"class":1034},[1002,65277,64353],{"class":1026},[1002,65279,2393],{"class":1015},[1002,65281,64968],{"class":1030},[1002,65283,65284,65286,65288],{"class":1004,"line":1348},[1002,65285,28112],{"class":1030},[1002,65287,64350],{"class":1019},[1002,65289,15703],{"class":1030},[1002,65291,65292],{"class":1004,"line":1354},[1002,65293,1085],{"class":1030},[925,65295,65296],{},"Notice the order of the routes above, it is swapped.",[1655,65298,65300],{"id":65299},"including-external-routes","Including External Routes",[925,65302,65303],{},"We can import external routes like following:",[993,65305,65307],{"className":995,"code":65306,"language":997,"meta":998,"style":998},"import { Route, Redirect } from 'react-router';\nimport aboutRoutes from 'about\u002Froutes';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRedirect from=\"\u002Fuser\u002Fme\" to=\"user\" params={{ userId: MY_ID }} \u002F>\n \u003CRoute name=\"user\" path=\"\u002Fuser\u002F:userId\" handler={User} \u002F>\n {aboutRoutes}\n \u003C\u002FRoute>\n);\n",[941,65308,65309,65321,65335,65339,65349,65369,65397,65421,65426,65434],{"__ignoreMap":998},[1002,65310,65311,65313,65315,65317,65319],{"class":1004,"line":1005},[1002,65312,943],{"class":1015},[1002,65314,65067],{"class":1030},[1002,65316,1068],{"class":1015},[1002,65318,64326],{"class":1034},[1002,65320,1407],{"class":1030},[1002,65322,65323,65325,65328,65330,65333],{"class":1004,"line":1012},[1002,65324,943],{"class":1015},[1002,65326,65327],{"class":1030}," aboutRoutes ",[1002,65329,1068],{"class":1015},[1002,65331,65332],{"class":1034}," 'about\u002Froutes'",[1002,65334,1407],{"class":1030},[1002,65336,65337],{"class":1004,"line":1047},[1002,65338,1051],{"emptyLinePlaceholder":1050},[1002,65340,65341,65343,65345,65347],{"class":1004,"line":1054},[1002,65342,1016],{"class":1015},[1002,65344,64339],{"class":1026},[1002,65346,1023],{"class":1015},[1002,65348,15692],{"class":1030},[1002,65350,65351,65353,65355,65357,65359,65361,65363,65365,65367],{"class":1004,"line":1060},[1002,65352,22427],{"class":1030},[1002,65354,64350],{"class":1019},[1002,65356,64353],{"class":1026},[1002,65358,2393],{"class":1015},[1002,65360,64358],{"class":1030},[1002,65362,64361],{"class":1026},[1002,65364,2393],{"class":1015},[1002,65366,64366],{"class":1034},[1002,65368,15703],{"class":1030},[1002,65370,65371,65373,65375,65377,65379,65381,65383,65385,65387,65389,65391,65393,65395],{"class":1004,"line":1272},[1002,65372,15697],{"class":1030},[1002,65374,65054],{"class":1019},[1002,65376,65134],{"class":1026},[1002,65378,2393],{"class":1015},[1002,65380,65237],{"class":1034},[1002,65382,65142],{"class":1026},[1002,65384,2393],{"class":1015},[1002,65386,64954],{"class":1034},[1002,65388,65246],{"class":1026},[1002,65390,2393],{"class":1015},[1002,65392,65251],{"class":1030},[1002,65394,65254],{"class":1019},[1002,65396,65257],{"class":1030},[1002,65398,65399,65401,65403,65405,65407,65409,65411,65413,65415,65417,65419],{"class":1004,"line":1348},[1002,65400,15697],{"class":1030},[1002,65402,64350],{"class":1019},[1002,65404,18584],{"class":1026},[1002,65406,2393],{"class":1015},[1002,65408,64954],{"class":1034},[1002,65410,19031],{"class":1026},[1002,65412,2393],{"class":1015},[1002,65414,64961],{"class":1034},[1002,65416,64353],{"class":1026},[1002,65418,2393],{"class":1015},[1002,65420,64968],{"class":1030},[1002,65422,65423],{"class":1004,"line":1354},[1002,65424,65425],{"class":1030}," {aboutRoutes}\n",[1002,65427,65428,65430,65432],{"class":1004,"line":1360},[1002,65429,28112],{"class":1030},[1002,65431,64350],{"class":1019},[1002,65433,15703],{"class":1030},[1002,65435,65436],{"class":1004,"line":1366},[1002,65437,1085],{"class":1030},[953,65439,65441],{"id":65440},"running-the-router","Running The Router",[925,65443,65444],{},"We can run the router in three different ways:",[971,65446,50962,65447,50962,65450,50962,65453],{},[974,65448,65449],{},"Using Hashes",[974,65451,65452],{},"Using HTML5 History",[974,65454,65455],{},"Using Universal Rendering",[925,65457,65458],{},"Let's look at each of these options.",[1655,65460,65462],{"id":65461},"using-hashes","Using hashes",[925,65464,65465,65466,65468],{},"We can pass in the routes and a callback to the ",[1107,65467,2061],{}," method of the Router.",[993,65470,65472],{"className":995,"code":65471,"language":997,"meta":998,"style":998},"import React from 'react';\nimport Router from 'react-router';\n\nRouter.run(routes, (Handler) => {\n React.render(\u003CHandler \u002F>, document.body);\n});\n",[941,65473,65474,65486,65499,65503,65522,65536],{"__ignoreMap":998},[1002,65475,65476,65478,65480,65482,65484],{"class":1004,"line":1005},[1002,65477,943],{"class":1015},[1002,65479,21700],{"class":1030},[1002,65481,1068],{"class":1015},[1002,65483,15543],{"class":1034},[1002,65485,1407],{"class":1030},[1002,65487,65488,65490,65493,65495,65497],{"class":1004,"line":1012},[1002,65489,943],{"class":1015},[1002,65491,65492],{"class":1030}," Router ",[1002,65494,1068],{"class":1015},[1002,65496,64326],{"class":1034},[1002,65498,1407],{"class":1030},[1002,65500,65501],{"class":1004,"line":1047},[1002,65502,1051],{"emptyLinePlaceholder":1050},[1002,65504,65505,65508,65510,65513,65516,65518,65520],{"class":1004,"line":1054},[1002,65506,65507],{"class":1030},"Router.",[1002,65509,2061],{"class":1026},[1002,65511,65512],{"class":1030},"(routes, (",[1002,65514,65515],{"class":2378},"Handler",[1002,65517,5876],{"class":1030},[1002,65519,15497],{"class":1015},[1002,65521,1457],{"class":1030},[1002,65523,65524,65527,65529,65531,65533],{"class":1004,"line":1060},[1002,65525,65526],{"class":1030}," React.",[1002,65528,19545],{"class":1026},[1002,65530,21269],{"class":1030},[1002,65532,65515],{"class":1019},[1002,65534,65535],{"class":1030}," \u002F>, document.body);\n",[1002,65537,65538],{"class":1004,"line":1272},[1002,65539,2804],{"class":1030},[925,65541,65542,65543,948],{},"The location will now be for instance ",[1107,65544,65545],{},[933,65546,65547],{"href":65547,"rel":65548},"http:\u002F\u002Flocalhost\u002F#\u002Fabout",[937],[1655,65550,65452],{"id":65551},"using-html5-history",[925,65553,65554,65555,65558,65559,65468],{},"Here we can pass in the routes, ",[1107,65556,65557],{},"Router.HistoryLocation"," and a callback to the ",[1107,65560,2061],{},[993,65562,65563],{"className":995,"code":65471,"language":997,"meta":998,"style":998},[941,65564,65565,65577,65589,65593,65609,65621],{"__ignoreMap":998},[1002,65566,65567,65569,65571,65573,65575],{"class":1004,"line":1005},[1002,65568,943],{"class":1015},[1002,65570,21700],{"class":1030},[1002,65572,1068],{"class":1015},[1002,65574,15543],{"class":1034},[1002,65576,1407],{"class":1030},[1002,65578,65579,65581,65583,65585,65587],{"class":1004,"line":1012},[1002,65580,943],{"class":1015},[1002,65582,65492],{"class":1030},[1002,65584,1068],{"class":1015},[1002,65586,64326],{"class":1034},[1002,65588,1407],{"class":1030},[1002,65590,65591],{"class":1004,"line":1047},[1002,65592,1051],{"emptyLinePlaceholder":1050},[1002,65594,65595,65597,65599,65601,65603,65605,65607],{"class":1004,"line":1054},[1002,65596,65507],{"class":1030},[1002,65598,2061],{"class":1026},[1002,65600,65512],{"class":1030},[1002,65602,65515],{"class":2378},[1002,65604,5876],{"class":1030},[1002,65606,15497],{"class":1015},[1002,65608,1457],{"class":1030},[1002,65610,65611,65613,65615,65617,65619],{"class":1004,"line":1060},[1002,65612,65526],{"class":1030},[1002,65614,19545],{"class":1026},[1002,65616,21269],{"class":1030},[1002,65618,65515],{"class":1019},[1002,65620,65535],{"class":1030},[1002,65622,65623],{"class":1004,"line":1272},[1002,65624,2804],{"class":1030},[925,65626,65542,65627,65633,65634,65637],{},[1107,65628,65629],{},[933,65630,65631],{"href":65631,"rel":65632},"http:\u002F\u002Flocalhost\u002Fabout",[937],". Notice there is no ",[1107,65635,65636],{},"#"," in the URL anymore.",[1655,65639,65455],{"id":65640},"using-universal-rendering",[925,65642,65643],{},"With universal rendering, we render the HTML to the client from the server.",[993,65645,65647],{"className":995,"code":65646,"language":997,"meta":998,"style":998},"import React from 'react';\nimport Router from 'react-router';\n\napp.serve((req, res) => {\n Router.run(routes, (Handler) => {\n React.render(\u003CHandler \u002F>, document.body);\n });\n});\n",[941,65648,65649,65661,65673,65677,65697,65714,65727,65731],{"__ignoreMap":998},[1002,65650,65651,65653,65655,65657,65659],{"class":1004,"line":1005},[1002,65652,943],{"class":1015},[1002,65654,21700],{"class":1030},[1002,65656,1068],{"class":1015},[1002,65658,15543],{"class":1034},[1002,65660,1407],{"class":1030},[1002,65662,65663,65665,65667,65669,65671],{"class":1004,"line":1012},[1002,65664,943],{"class":1015},[1002,65666,65492],{"class":1030},[1002,65668,1068],{"class":1015},[1002,65670,64326],{"class":1034},[1002,65672,1407],{"class":1030},[1002,65674,65675],{"class":1004,"line":1047},[1002,65676,1051],{"emptyLinePlaceholder":1050},[1002,65678,65679,65681,65683,65685,65687,65689,65691,65693,65695],{"class":1004,"line":1054},[1002,65680,21891],{"class":1030},[1002,65682,48396],{"class":1026},[1002,65684,21121],{"class":1030},[1002,65686,22159],{"class":2378},[1002,65688,1251],{"class":1030},[1002,65690,14985],{"class":2378},[1002,65692,5876],{"class":1030},[1002,65694,15497],{"class":1015},[1002,65696,1457],{"class":1030},[1002,65698,65699,65702,65704,65706,65708,65710,65712],{"class":1004,"line":1060},[1002,65700,65701],{"class":1030}," Router.",[1002,65703,2061],{"class":1026},[1002,65705,65512],{"class":1030},[1002,65707,65515],{"class":2378},[1002,65709,5876],{"class":1030},[1002,65711,15497],{"class":1015},[1002,65713,1457],{"class":1030},[1002,65715,65716,65719,65721,65723,65725],{"class":1004,"line":1272},[1002,65717,65718],{"class":1030}," React.",[1002,65720,19545],{"class":1026},[1002,65722,21269],{"class":1030},[1002,65724,65515],{"class":1019},[1002,65726,65535],{"class":1030},[1002,65728,65729],{"class":1004,"line":1348},[1002,65730,19836],{"class":1030},[1002,65732,65733],{"class":1004,"line":1354},[1002,65734,2804],{"class":1030},[953,65736,65738],{"id":65737},"rendering-the-routes","Rendering the Routes",[925,65740,65741,65742,65745],{},"For rendering the routes, we can use ",[941,65743,65744],{},"RouterHandler"," object of the React Router library.",[993,65747,65749],{"className":995,"code":65748,"language":997,"meta":998,"style":998},"import React from 'react';\nimport { RouterHandler } from 'react-router';\n\nclass App extends React.Component {\n render() {\n return (\n \u003Cdiv>\n \u003Ch1>Hello World!\u003C\u002Fh1>\n \u003CRouterHandler \u002F>\n \u003C\u002Fdiv>\n );\n }\n}\n",[941,65750,65751,65763,65776,65780,65796,65802,65808,65816,65829,65837,65845,65849,65853],{"__ignoreMap":998},[1002,65752,65753,65755,65757,65759,65761],{"class":1004,"line":1005},[1002,65754,943],{"class":1015},[1002,65756,21700],{"class":1030},[1002,65758,1068],{"class":1015},[1002,65760,15543],{"class":1034},[1002,65762,1407],{"class":1030},[1002,65764,65765,65767,65770,65772,65774],{"class":1004,"line":1012},[1002,65766,943],{"class":1015},[1002,65768,65769],{"class":1030}," { RouterHandler } ",[1002,65771,1068],{"class":1015},[1002,65773,64326],{"class":1034},[1002,65775,1407],{"class":1030},[1002,65777,65778],{"class":1004,"line":1047},[1002,65779,1051],{"emptyLinePlaceholder":1050},[1002,65781,65782,65784,65786,65788,65790,65792,65794],{"class":1004,"line":1054},[1002,65783,2363],{"class":1015},[1002,65785,19566],{"class":1026},[1002,65787,3014],{"class":1015},[1002,65789,20112],{"class":1026},[1002,65791,948],{"class":1030},[1002,65793,20117],{"class":1026},[1002,65795,1457],{"class":1030},[1002,65797,65798,65800],{"class":1004,"line":1060},[1002,65799,20201],{"class":1026},[1002,65801,3025],{"class":1030},[1002,65803,65804,65806],{"class":1004,"line":1272},[1002,65805,2687],{"class":1015},[1002,65807,15692],{"class":1030},[1002,65809,65810,65812,65814],{"class":1004,"line":1348},[1002,65811,19579],{"class":1030},[1002,65813,19650],{"class":15711},[1002,65815,15703],{"class":1030},[1002,65817,65818,65820,65822,65825,65827],{"class":1004,"line":1354},[1002,65819,15708],{"class":1030},[1002,65821,15201],{"class":15711},[1002,65823,65824],{"class":1030},">Hello World!\u003C\u002F",[1002,65826,15201],{"class":15711},[1002,65828,15703],{"class":1030},[1002,65830,65831,65833,65835],{"class":1004,"line":1360},[1002,65832,15708],{"class":1030},[1002,65834,65744],{"class":1019},[1002,65836,15258],{"class":1030},[1002,65838,65839,65841,65843],{"class":1004,"line":1366},[1002,65840,21184],{"class":1030},[1002,65842,19650],{"class":15711},[1002,65844,15703],{"class":1030},[1002,65846,65847],{"class":1004,"line":1946},[1002,65848,22541],{"class":1030},[1002,65850,65851],{"class":1004,"line":1956},[1002,65852,1269],{"class":1030},[1002,65854,65855],{"class":1004,"line":1961},[1002,65856,1170],{"class":1030},[925,65858,65859,65860,65862],{},"Now the ",[1107,65861,22209],{}," component will render the matched router.",[953,65864,65866],{"id":65865},"accessing-router-methods","Accessing Router Methods",[925,65868,65869],{},"Let's quickly have a look at how we can access the router methods in ES5, ES6 and ES7.",[1655,65871,65873],{"id":65872},"es5","ES5",[925,65875,65876],{},"With ES5 syntax:",[993,65878,65880],{"className":995,"code":65879,"language":997,"meta":998,"style":998},"var React = require('react');\n\nvar User = React.createClass({\n contextTypes: {\n router: React.PropTypes.func\n },\n render: function () {\n return \u003Ch1>Hello World\u003C\u002Fh1>;\n }\n};\n",[941,65881,65882,65898,65902,65918,65923,65928,65932,65942,65957,65961],{"__ignoreMap":998},[1002,65883,65884,65886,65888,65890,65892,65894,65896],{"class":1004,"line":1005},[1002,65885,18311],{"class":1015},[1002,65887,21700],{"class":1030},[1002,65889,2393],{"class":1015},[1002,65891,1027],{"class":1026},[1002,65893,1031],{"class":1030},[1002,65895,33538],{"class":1034},[1002,65897,1085],{"class":1030},[1002,65899,65900],{"class":1004,"line":1012},[1002,65901,1051],{"emptyLinePlaceholder":1050},[1002,65903,65904,65906,65909,65911,65913,65916],{"class":1004,"line":1047},[1002,65905,18311],{"class":1015},[1002,65907,65908],{"class":1030}," User ",[1002,65910,2393],{"class":1015},[1002,65912,26711],{"class":1030},[1002,65914,65915],{"class":1026},"createClass",[1002,65917,2756],{"class":1030},[1002,65919,65920],{"class":1004,"line":1054},[1002,65921,65922],{"class":1030}," contextTypes: {\n",[1002,65924,65925],{"class":1004,"line":1060},[1002,65926,65927],{"class":1030}," router: React.PropTypes.func\n",[1002,65929,65930],{"class":1004,"line":1272},[1002,65931,1502],{"class":1030},[1002,65933,65934,65936,65938,65940],{"class":1004,"line":1348},[1002,65935,20201],{"class":1026},[1002,65937,1137],{"class":1030},[1002,65939,6965],{"class":1015},[1002,65941,9772],{"class":1030},[1002,65943,65944,65946,65948,65950,65953,65955],{"class":1004,"line":1354},[1002,65945,2687],{"class":1015},[1002,65947,20660],{"class":1030},[1002,65949,15201],{"class":15711},[1002,65951,65952],{"class":1030},">Hello World\u003C\u002F",[1002,65954,15201],{"class":15711},[1002,65956,21772],{"class":1030},[1002,65958,65959],{"class":1004,"line":1360},[1002,65960,1269],{"class":1030},[1002,65962,65963],{"class":1004,"line":1366},[1002,65964,1517],{"class":1030},[925,65966,65967,65968,948],{},"Router methods will be available in render ",[941,65969,65970],{},"self.context.router",[1655,65972,65973],{"id":220},"ES6",[925,65975,65976],{},"With ES6 syntax:",[993,65978,65980],{"className":995,"code":65979,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n render() {\n return \u003Ch1>Hello World\u003C\u002Fh1>;\n }\n}\n\nUser.contextTypes = {\n router: React.PropTypes.func,\n};\n",[941,65981,65982,65994,65998,66014,66020,66034,66038,66042,66046,66055,66060],{"__ignoreMap":998},[1002,65983,65984,65986,65988,65990,65992],{"class":1004,"line":1005},[1002,65985,943],{"class":1015},[1002,65987,21700],{"class":1030},[1002,65989,1068],{"class":1015},[1002,65991,15543],{"class":1034},[1002,65993,1407],{"class":1030},[1002,65995,65996],{"class":1004,"line":1012},[1002,65997,1051],{"emptyLinePlaceholder":1050},[1002,65999,66000,66002,66004,66006,66008,66010,66012],{"class":1004,"line":1047},[1002,66001,2363],{"class":1015},[1002,66003,12502],{"class":1026},[1002,66005,3014],{"class":1015},[1002,66007,20112],{"class":1026},[1002,66009,948],{"class":1030},[1002,66011,20117],{"class":1026},[1002,66013,1457],{"class":1030},[1002,66015,66016,66018],{"class":1004,"line":1054},[1002,66017,20201],{"class":1026},[1002,66019,3025],{"class":1030},[1002,66021,66022,66024,66026,66028,66030,66032],{"class":1004,"line":1060},[1002,66023,2687],{"class":1015},[1002,66025,20660],{"class":1030},[1002,66027,15201],{"class":15711},[1002,66029,65952],{"class":1030},[1002,66031,15201],{"class":15711},[1002,66033,21772],{"class":1030},[1002,66035,66036],{"class":1004,"line":1272},[1002,66037,1269],{"class":1030},[1002,66039,66040],{"class":1004,"line":1348},[1002,66041,1170],{"class":1030},[1002,66043,66044],{"class":1004,"line":1354},[1002,66045,1051],{"emptyLinePlaceholder":1050},[1002,66047,66048,66051,66053],{"class":1004,"line":1360},[1002,66049,66050],{"class":1030},"User.contextTypes ",[1002,66052,2393],{"class":1015},[1002,66054,1457],{"class":1030},[1002,66056,66057],{"class":1004,"line":1366},[1002,66058,66059],{"class":1030}," router: React.PropTypes.func,\n",[1002,66061,66062],{"class":1004,"line":1946},[1002,66063,1517],{"class":1030},[925,66065,66066,66067,948],{},"Router methods will be also available in render ",[941,66068,65970],{},[1655,66070,66072],{"id":66071},"es7","ES7",[925,66074,66075],{},"With ES7 syntax:",[993,66077,66079],{"className":995,"code":66078,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func,\n };\n\n render() {\n return \u003Ch1>Hello World\u003C\u002Fh1>;\n }\n}\n",[941,66080,66081,66093,66097,66113,66124,66129,66133,66137,66143,66157,66161],{"__ignoreMap":998},[1002,66082,66083,66085,66087,66089,66091],{"class":1004,"line":1005},[1002,66084,943],{"class":1015},[1002,66086,21700],{"class":1030},[1002,66088,1068],{"class":1015},[1002,66090,15543],{"class":1034},[1002,66092,1407],{"class":1030},[1002,66094,66095],{"class":1004,"line":1012},[1002,66096,1051],{"emptyLinePlaceholder":1050},[1002,66098,66099,66101,66103,66105,66107,66109,66111],{"class":1004,"line":1047},[1002,66100,2363],{"class":1015},[1002,66102,12502],{"class":1026},[1002,66104,3014],{"class":1015},[1002,66106,20112],{"class":1026},[1002,66108,948],{"class":1030},[1002,66110,20117],{"class":1026},[1002,66112,1457],{"class":1030},[1002,66114,66115,66117,66120,66122],{"class":1004,"line":1054},[1002,66116,13506],{"class":1015},[1002,66118,66119],{"class":2378}," contextTypes",[1002,66121,1023],{"class":1015},[1002,66123,1457],{"class":1030},[1002,66125,66126],{"class":1004,"line":1060},[1002,66127,66128],{"class":1030}," router: React.PropTypes.func,\n",[1002,66130,66131],{"class":1004,"line":1272},[1002,66132,15113],{"class":1030},[1002,66134,66135],{"class":1004,"line":1348},[1002,66136,1051],{"emptyLinePlaceholder":1050},[1002,66138,66139,66141],{"class":1004,"line":1354},[1002,66140,20201],{"class":1026},[1002,66142,3025],{"class":1030},[1002,66144,66145,66147,66149,66151,66153,66155],{"class":1004,"line":1360},[1002,66146,2687],{"class":1015},[1002,66148,20660],{"class":1030},[1002,66150,15201],{"class":15711},[1002,66152,65952],{"class":1030},[1002,66154,15201],{"class":15711},[1002,66156,21772],{"class":1030},[1002,66158,66159],{"class":1004,"line":1366},[1002,66160,1269],{"class":1030},[1002,66162,66163],{"class":1004,"line":1946},[1002,66164,1170],{"class":1030},[925,66166,66066,66167,948],{},[941,66168,65970],{},[953,66170,66172],{"id":66171},"available-router-methods","Available Router Methods",[1655,66174,66176],{"id":66175},"retrieving-parameters","Retrieving Parameters",[925,66178,66179,66180,22383],{},"We can access the parameters with the ",[941,66181,66182],{},"getCurrentParams",[993,66184,66186],{"className":995,"code":66185,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func,\n };\n\n render() {\n const user = this.context.router.getCurrentParams().userId;\n return \u003Ch1>Hello user {user}\u003C\u002Fh1>;\n }\n}\n",[941,66187,66188,66200,66204,66220,66230,66234,66238,66242,66248,66266,66281,66285],{"__ignoreMap":998},[1002,66189,66190,66192,66194,66196,66198],{"class":1004,"line":1005},[1002,66191,943],{"class":1015},[1002,66193,21700],{"class":1030},[1002,66195,1068],{"class":1015},[1002,66197,15543],{"class":1034},[1002,66199,1407],{"class":1030},[1002,66201,66202],{"class":1004,"line":1012},[1002,66203,1051],{"emptyLinePlaceholder":1050},[1002,66205,66206,66208,66210,66212,66214,66216,66218],{"class":1004,"line":1047},[1002,66207,2363],{"class":1015},[1002,66209,12502],{"class":1026},[1002,66211,3014],{"class":1015},[1002,66213,20112],{"class":1026},[1002,66215,948],{"class":1030},[1002,66217,20117],{"class":1026},[1002,66219,1457],{"class":1030},[1002,66221,66222,66224,66226,66228],{"class":1004,"line":1054},[1002,66223,13506],{"class":1015},[1002,66225,66119],{"class":2378},[1002,66227,1023],{"class":1015},[1002,66229,1457],{"class":1030},[1002,66231,66232],{"class":1004,"line":1060},[1002,66233,66128],{"class":1030},[1002,66235,66236],{"class":1004,"line":1272},[1002,66237,15113],{"class":1030},[1002,66239,66240],{"class":1004,"line":1348},[1002,66241,1051],{"emptyLinePlaceholder":1050},[1002,66243,66244,66246],{"class":1004,"line":1354},[1002,66245,20201],{"class":1026},[1002,66247,3025],{"class":1030},[1002,66249,66250,66252,66254,66256,66258,66261,66263],{"class":1004,"line":1360},[1002,66251,4348],{"class":1015},[1002,66253,12721],{"class":1019},[1002,66255,1023],{"class":1015},[1002,66257,2693],{"class":1019},[1002,66259,66260],{"class":1030},".context.router.",[1002,66262,66182],{"class":1026},[1002,66264,66265],{"class":1030},"().userId;\n",[1002,66267,66268,66270,66272,66274,66277,66279],{"class":1004,"line":1366},[1002,66269,2687],{"class":1015},[1002,66271,20660],{"class":1030},[1002,66273,15201],{"class":15711},[1002,66275,66276],{"class":1030},">Hello user {user}\u003C\u002F",[1002,66278,15201],{"class":15711},[1002,66280,21772],{"class":1030},[1002,66282,66283],{"class":1004,"line":1946},[1002,66284,1269],{"class":1030},[1002,66286,66287],{"class":1004,"line":1956},[1002,66288,1170],{"class":1030},[925,66290,66291,66292,948],{},"The parameter will be retrieved from route ",[1107,66293,64872],{},[1655,66295,66297],{"id":66296},"retrieving-query-parameters","Retrieving Query Parameters",[925,66299,66300,66301,22383],{},"We can access the query parameters with the ",[941,66302,66303],{},"getCurrentQuery",[993,66305,66307],{"className":995,"code":66306,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func,\n };\n\n render() {\n const message = this.context.router.getCurrentQuery().message;\n return \u003Ch1>{message}\u003C\u002Fh1>;\n }\n}\n",[941,66308,66309,66321,66325,66341,66351,66355,66359,66363,66369,66386,66401,66405],{"__ignoreMap":998},[1002,66310,66311,66313,66315,66317,66319],{"class":1004,"line":1005},[1002,66312,943],{"class":1015},[1002,66314,21700],{"class":1030},[1002,66316,1068],{"class":1015},[1002,66318,15543],{"class":1034},[1002,66320,1407],{"class":1030},[1002,66322,66323],{"class":1004,"line":1012},[1002,66324,1051],{"emptyLinePlaceholder":1050},[1002,66326,66327,66329,66331,66333,66335,66337,66339],{"class":1004,"line":1047},[1002,66328,2363],{"class":1015},[1002,66330,12502],{"class":1026},[1002,66332,3014],{"class":1015},[1002,66334,20112],{"class":1026},[1002,66336,948],{"class":1030},[1002,66338,20117],{"class":1026},[1002,66340,1457],{"class":1030},[1002,66342,66343,66345,66347,66349],{"class":1004,"line":1054},[1002,66344,13506],{"class":1015},[1002,66346,66119],{"class":2378},[1002,66348,1023],{"class":1015},[1002,66350,1457],{"class":1030},[1002,66352,66353],{"class":1004,"line":1060},[1002,66354,66128],{"class":1030},[1002,66356,66357],{"class":1004,"line":1272},[1002,66358,15113],{"class":1030},[1002,66360,66361],{"class":1004,"line":1348},[1002,66362,1051],{"emptyLinePlaceholder":1050},[1002,66364,66365,66367],{"class":1004,"line":1354},[1002,66366,20201],{"class":1026},[1002,66368,3025],{"class":1030},[1002,66370,66371,66373,66375,66377,66379,66381,66383],{"class":1004,"line":1360},[1002,66372,4348],{"class":1015},[1002,66374,26740],{"class":1019},[1002,66376,1023],{"class":1015},[1002,66378,2693],{"class":1019},[1002,66380,66260],{"class":1030},[1002,66382,66303],{"class":1026},[1002,66384,66385],{"class":1030},"().message;\n",[1002,66387,66388,66390,66392,66394,66397,66399],{"class":1004,"line":1366},[1002,66389,2687],{"class":1015},[1002,66391,20660],{"class":1030},[1002,66393,15201],{"class":15711},[1002,66395,66396],{"class":1030},">{message}\u003C\u002F",[1002,66398,15201],{"class":15711},[1002,66400,21772],{"class":1030},[1002,66402,66403],{"class":1004,"line":1946},[1002,66404,1269],{"class":1030},[1002,66406,66407],{"class":1004,"line":1956},[1002,66408,1170],{"class":1030},[925,66410,66411,66412,948],{},"The query parameter will be retrieved from route ",[1107,66413,66414],{},"\u002Fuser\u002F1234?message=Hello%20World",[1655,66416,66418],{"id":66417},"retrieving-current-routes","Retrieving Current Routes",[925,66420,66421,66422,22383],{},"We can access the current routes with the ",[941,66423,66424],{},"getCurrentRoutes",[993,66426,66428],{"className":995,"code":66427,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func\n }\n\n render() {\n const routes = this.context.router.getCurrentRoutes();\n ...\n }\n}\n",[941,66429,66430,66442,66446,66462,66472,66476,66480,66484,66490,66506,66510,66514],{"__ignoreMap":998},[1002,66431,66432,66434,66436,66438,66440],{"class":1004,"line":1005},[1002,66433,943],{"class":1015},[1002,66435,21700],{"class":1030},[1002,66437,1068],{"class":1015},[1002,66439,15543],{"class":1034},[1002,66441,1407],{"class":1030},[1002,66443,66444],{"class":1004,"line":1012},[1002,66445,1051],{"emptyLinePlaceholder":1050},[1002,66447,66448,66450,66452,66454,66456,66458,66460],{"class":1004,"line":1047},[1002,66449,2363],{"class":1015},[1002,66451,12502],{"class":1026},[1002,66453,3014],{"class":1015},[1002,66455,20112],{"class":1026},[1002,66457,948],{"class":1030},[1002,66459,20117],{"class":1026},[1002,66461,1457],{"class":1030},[1002,66463,66464,66466,66468,66470],{"class":1004,"line":1054},[1002,66465,13506],{"class":1015},[1002,66467,66119],{"class":2378},[1002,66469,1023],{"class":1015},[1002,66471,1457],{"class":1030},[1002,66473,66474],{"class":1004,"line":1060},[1002,66475,65927],{"class":1030},[1002,66477,66478],{"class":1004,"line":1272},[1002,66479,1269],{"class":1030},[1002,66481,66482],{"class":1004,"line":1348},[1002,66483,1051],{"emptyLinePlaceholder":1050},[1002,66485,66486,66488],{"class":1004,"line":1354},[1002,66487,20201],{"class":1026},[1002,66489,3025],{"class":1030},[1002,66491,66492,66494,66496,66498,66500,66502,66504],{"class":1004,"line":1360},[1002,66493,4348],{"class":1015},[1002,66495,64339],{"class":1019},[1002,66497,1023],{"class":1015},[1002,66499,2693],{"class":1019},[1002,66501,66260],{"class":1030},[1002,66503,66424],{"class":1026},[1002,66505,1428],{"class":1030},[1002,66507,66508],{"class":1004,"line":1366},[1002,66509,48894],{"class":1015},[1002,66511,66512],{"class":1004,"line":1946},[1002,66513,1269],{"class":1030},[1002,66515,66516],{"class":1004,"line":1956},[1002,66517,1170],{"class":1030},[925,66519,66520],{},"This will return an array of routes in nesting order.",[953,66522,66524],{"id":66523},"fetching-data","Fetching Data",[925,66526,66527],{},"To fetch data with fetch API, let's write our own function helper.",[993,66529,66531],{"className":995,"code":66530,"language":997,"meta":998,"style":998},"function fetchData(state) {\n return Promise.all(state.routes.filter((route) => {\n return route.handler.fetchData;\n }).map((route) => {\n return route.handler.fetchData(state.params, state.query);\n });\n}\n",[941,66532,66533,66546,66572,66579,66596,66609,66613],{"__ignoreMap":998},[1002,66534,66535,66537,66540,66542,66544],{"class":1004,"line":1005},[1002,66536,6965],{"class":1015},[1002,66538,66539],{"class":1026}," fetchData",[1002,66541,1031],{"class":1030},[1002,66543,8589],{"class":2378},[1002,66545,2382],{"class":1030},[1002,66547,66548,66550,66552,66554,66556,66559,66561,66563,66566,66568,66570],{"class":1004,"line":1012},[1002,66549,15066],{"class":1015},[1002,66551,25561],{"class":1019},[1002,66553,948],{"class":1030},[1002,66555,17964],{"class":1026},[1002,66557,66558],{"class":1030},"(state.routes.",[1002,66560,8313],{"class":1026},[1002,66562,21121],{"class":1030},[1002,66564,66565],{"class":2378},"route",[1002,66567,5876],{"class":1030},[1002,66569,15497],{"class":1015},[1002,66571,1457],{"class":1030},[1002,66573,66574,66576],{"class":1004,"line":1047},[1002,66575,2687],{"class":1015},[1002,66577,66578],{"class":1030}," route.handler.fetchData;\n",[1002,66580,66581,66584,66586,66588,66590,66592,66594],{"class":1004,"line":1054},[1002,66582,66583],{"class":1030}," }).",[1002,66585,19444],{"class":1026},[1002,66587,21121],{"class":1030},[1002,66589,66565],{"class":2378},[1002,66591,5876],{"class":1030},[1002,66593,15497],{"class":1015},[1002,66595,1457],{"class":1030},[1002,66597,66598,66600,66603,66606],{"class":1004,"line":1060},[1002,66599,2687],{"class":1015},[1002,66601,66602],{"class":1030}," route.handler.",[1002,66604,66605],{"class":1026},"fetchData",[1002,66607,66608],{"class":1030},"(state.params, state.query);\n",[1002,66610,66611],{"class":1004,"line":1272},[1002,66612,19836],{"class":1030},[1002,66614,66615],{"class":1004,"line":1348},[1002,66616,1170],{"class":1030},[925,66618,66619,66620,948],{},"Now we can call this function inside ",[1107,66621,66622],{},"Router.run()",[993,66624,66626],{"className":995,"code":66625,"language":997,"meta":998,"style":998},"import React from 'react';\nimport Router from 'react-router';\n\nRouter.run(routes, (Handler, state) => {\n fetchData(state).then(() => {\n React.render(\u003CHandler \u002F>, document.body);\n });\n});\n",[941,66627,66628,66640,66652,66656,66676,66692,66704,66708],{"__ignoreMap":998},[1002,66629,66630,66632,66634,66636,66638],{"class":1004,"line":1005},[1002,66631,943],{"class":1015},[1002,66633,21700],{"class":1030},[1002,66635,1068],{"class":1015},[1002,66637,15543],{"class":1034},[1002,66639,1407],{"class":1030},[1002,66641,66642,66644,66646,66648,66650],{"class":1004,"line":1012},[1002,66643,943],{"class":1015},[1002,66645,65492],{"class":1030},[1002,66647,1068],{"class":1015},[1002,66649,64326],{"class":1034},[1002,66651,1407],{"class":1030},[1002,66653,66654],{"class":1004,"line":1047},[1002,66655,1051],{"emptyLinePlaceholder":1050},[1002,66657,66658,66660,66662,66664,66666,66668,66670,66672,66674],{"class":1004,"line":1054},[1002,66659,65507],{"class":1030},[1002,66661,2061],{"class":1026},[1002,66663,65512],{"class":1030},[1002,66665,65515],{"class":2378},[1002,66667,1251],{"class":1030},[1002,66669,8589],{"class":2378},[1002,66671,5876],{"class":1030},[1002,66673,15497],{"class":1015},[1002,66675,1457],{"class":1030},[1002,66677,66678,66681,66684,66686,66688,66690],{"class":1004,"line":1060},[1002,66679,66680],{"class":1026}," fetchData",[1002,66682,66683],{"class":1030},"(state).",[1002,66685,25658],{"class":1026},[1002,66687,15494],{"class":1030},[1002,66689,15497],{"class":1015},[1002,66691,1457],{"class":1030},[1002,66693,66694,66696,66698,66700,66702],{"class":1004,"line":1272},[1002,66695,65718],{"class":1030},[1002,66697,19545],{"class":1026},[1002,66699,21269],{"class":1030},[1002,66701,65515],{"class":1019},[1002,66703,65535],{"class":1030},[1002,66705,66706],{"class":1004,"line":1348},[1002,66707,19836],{"class":1030},[1002,66709,66710],{"class":1004,"line":1354},[1002,66711,2804],{"class":1030},[925,66713,66714],{},"We can improve on this by adding fetch functionality to our own model.",[993,66716,66718],{"className":995,"code":66717,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static fetchData(params) {\n return new Promise((resolve) => {\n MyApi.loadSomething(() => {\n resolve();\n });\n });\n }\n ...\n}\n",[941,66719,66720,66732,66736,66752,66764,66782,66796,66803,66807,66811,66815,66819],{"__ignoreMap":998},[1002,66721,66722,66724,66726,66728,66730],{"class":1004,"line":1005},[1002,66723,943],{"class":1015},[1002,66725,21700],{"class":1030},[1002,66727,1068],{"class":1015},[1002,66729,15543],{"class":1034},[1002,66731,1407],{"class":1030},[1002,66733,66734],{"class":1004,"line":1012},[1002,66735,1051],{"emptyLinePlaceholder":1050},[1002,66737,66738,66740,66742,66744,66746,66748,66750],{"class":1004,"line":1047},[1002,66739,2363],{"class":1015},[1002,66741,12502],{"class":1026},[1002,66743,3014],{"class":1015},[1002,66745,20112],{"class":1026},[1002,66747,948],{"class":1030},[1002,66749,20117],{"class":1026},[1002,66751,1457],{"class":1030},[1002,66753,66754,66756,66758,66760,66762],{"class":1004,"line":1054},[1002,66755,13506],{"class":1015},[1002,66757,66539],{"class":1026},[1002,66759,1031],{"class":1030},[1002,66761,24866],{"class":2378},[1002,66763,2382],{"class":1030},[1002,66765,66766,66768,66770,66772,66774,66776,66778,66780],{"class":1004,"line":1060},[1002,66767,2687],{"class":1015},[1002,66769,2690],{"class":1015},[1002,66771,25561],{"class":1019},[1002,66773,21121],{"class":1030},[1002,66775,1243],{"class":2378},[1002,66777,5876],{"class":1030},[1002,66779,15497],{"class":1015},[1002,66781,1457],{"class":1030},[1002,66783,66784,66787,66790,66792,66794],{"class":1004,"line":1272},[1002,66785,66786],{"class":1030}," MyApi.",[1002,66788,66789],{"class":1026},"loadSomething",[1002,66791,15494],{"class":1030},[1002,66793,15497],{"class":1015},[1002,66795,1457],{"class":1030},[1002,66797,66798,66801],{"class":1004,"line":1348},[1002,66799,66800],{"class":1026}," resolve",[1002,66802,1428],{"class":1030},[1002,66804,66805],{"class":1004,"line":1354},[1002,66806,47582],{"class":1030},[1002,66808,66809],{"class":1004,"line":1360},[1002,66810,8353],{"class":1030},[1002,66812,66813],{"class":1004,"line":1366},[1002,66814,1269],{"class":1030},[1002,66816,66817],{"class":1004,"line":1946},[1002,66818,18213],{"class":1015},[1002,66820,66821],{"class":1004,"line":1956},[1002,66822,1170],{"class":1030},[953,66824,66826],{"id":66825},"navigating-between-routes","Navigating Between Routes",[925,66828,66829,66830,66833],{},"When using React Router, avoid using ",[941,66831,66832],{},"href"," for navigation.",[993,66835,66837],{"className":995,"code":66836,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n render() {\n \u002F\u002F Don't do this!\n return \u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>;\n }\n}\n",[941,66838,66839,66851,66855,66871,66877,66882,66904,66908],{"__ignoreMap":998},[1002,66840,66841,66843,66845,66847,66849],{"class":1004,"line":1005},[1002,66842,943],{"class":1015},[1002,66844,21700],{"class":1030},[1002,66846,1068],{"class":1015},[1002,66848,15543],{"class":1034},[1002,66850,1407],{"class":1030},[1002,66852,66853],{"class":1004,"line":1012},[1002,66854,1051],{"emptyLinePlaceholder":1050},[1002,66856,66857,66859,66861,66863,66865,66867,66869],{"class":1004,"line":1047},[1002,66858,2363],{"class":1015},[1002,66860,12502],{"class":1026},[1002,66862,3014],{"class":1015},[1002,66864,20112],{"class":1026},[1002,66866,948],{"class":1030},[1002,66868,20117],{"class":1026},[1002,66870,1457],{"class":1030},[1002,66872,66873,66875],{"class":1004,"line":1054},[1002,66874,20201],{"class":1026},[1002,66876,3025],{"class":1030},[1002,66878,66879],{"class":1004,"line":1060},[1002,66880,66881],{"class":1008}," \u002F\u002F Don't do this!\n",[1002,66883,66884,66886,66888,66890,66892,66894,66897,66900,66902],{"class":1004,"line":1272},[1002,66885,2687],{"class":1015},[1002,66887,20660],{"class":1030},[1002,66889,933],{"class":15711},[1002,66891,47182],{"class":1026},[1002,66893,2393],{"class":1015},[1002,66895,66896],{"class":1034},"\"\u002Fabout\"",[1002,66898,66899],{"class":1030},">About\u003C\u002F",[1002,66901,933],{"class":15711},[1002,66903,21772],{"class":1030},[1002,66905,66906],{"class":1004,"line":1348},[1002,66907,1269],{"class":1030},[1002,66909,66910],{"class":1004,"line":1354},[1002,66911,1170],{"class":1030},[1655,66913,66915],{"id":66914},"using-link-component","Using Link Component",[925,66917,66918,66919,66922],{},"React Router provides a component called ",[941,66920,66921],{},"Link"," which you can use instead.",[993,66924,66926],{"className":995,"code":66925,"language":997,"meta":998,"style":998},"import React from 'react';\nimport { Link } from 'react-router';\n\nclass User extends React.Component {\n render() {\n return \u003CLink to=\"about\">About\u003C\u002FLink>;\n }\n}\n",[941,66927,66928,66940,66953,66957,66973,66979,66999,67003],{"__ignoreMap":998},[1002,66929,66930,66932,66934,66936,66938],{"class":1004,"line":1005},[1002,66931,943],{"class":1015},[1002,66933,21700],{"class":1030},[1002,66935,1068],{"class":1015},[1002,66937,15543],{"class":1034},[1002,66939,1407],{"class":1030},[1002,66941,66942,66944,66947,66949,66951],{"class":1004,"line":1012},[1002,66943,943],{"class":1015},[1002,66945,66946],{"class":1030}," { Link } ",[1002,66948,1068],{"class":1015},[1002,66950,64326],{"class":1034},[1002,66952,1407],{"class":1030},[1002,66954,66955],{"class":1004,"line":1047},[1002,66956,1051],{"emptyLinePlaceholder":1050},[1002,66958,66959,66961,66963,66965,66967,66969,66971],{"class":1004,"line":1054},[1002,66960,2363],{"class":1015},[1002,66962,12502],{"class":1026},[1002,66964,3014],{"class":1015},[1002,66966,20112],{"class":1026},[1002,66968,948],{"class":1030},[1002,66970,20117],{"class":1026},[1002,66972,1457],{"class":1030},[1002,66974,66975,66977],{"class":1004,"line":1060},[1002,66976,20201],{"class":1026},[1002,66978,3025],{"class":1030},[1002,66980,66981,66983,66985,66987,66989,66991,66993,66995,66997],{"class":1004,"line":1272},[1002,66982,2687],{"class":1015},[1002,66984,20660],{"class":1030},[1002,66986,66921],{"class":1019},[1002,66988,65142],{"class":1026},[1002,66990,2393],{"class":1015},[1002,66992,64381],{"class":1034},[1002,66994,66899],{"class":1030},[1002,66996,66921],{"class":1019},[1002,66998,21772],{"class":1030},[1002,67000,67001],{"class":1004,"line":1348},[1002,67002,1269],{"class":1030},[1002,67004,67005],{"class":1004,"line":1354},[1002,67006,1170],{"class":1030},[925,67008,67009,67010,948],{},"This will generate a link - ",[1107,67011,67012],{},"\u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>",[1655,67014,67016],{"id":67015},"adding-parameters","Adding Parameters",[925,67018,67019,67020,67022,67023,67025],{},"To add parameters, you can provide ",[941,67021,24866],{}," attribute to the Link component. And for query parameters, you can add ",[941,67024,14980],{}," attribute.",[993,67027,67029],{"className":995,"code":67028,"language":997,"meta":998,"style":998},"import React from 'react';\nimport { Link } from 'react-router';\n\nclass About extends React.Component {\n render() {\n return (\n \u003CLink to=\"user\" params={{userId: 1234}}>User 1234\u003C\u002FLink>\n \u003CLink to=\"contact\" query={{message: 'Hi'}}>Say hi\u003C\u002FLink>\n );\n }\n}\n",[941,67030,67031,67043,67055,67059,67076,67082,67088,67117,67148,67152,67156],{"__ignoreMap":998},[1002,67032,67033,67035,67037,67039,67041],{"class":1004,"line":1005},[1002,67034,943],{"class":1015},[1002,67036,21700],{"class":1030},[1002,67038,1068],{"class":1015},[1002,67040,15543],{"class":1034},[1002,67042,1407],{"class":1030},[1002,67044,67045,67047,67049,67051,67053],{"class":1004,"line":1012},[1002,67046,943],{"class":1015},[1002,67048,66946],{"class":1030},[1002,67050,1068],{"class":1015},[1002,67052,64326],{"class":1034},[1002,67054,1407],{"class":1030},[1002,67056,67057],{"class":1004,"line":1047},[1002,67058,1051],{"emptyLinePlaceholder":1050},[1002,67060,67061,67063,67066,67068,67070,67072,67074],{"class":1004,"line":1054},[1002,67062,2363],{"class":1015},[1002,67064,67065],{"class":1026}," About",[1002,67067,3014],{"class":1015},[1002,67069,20112],{"class":1026},[1002,67071,948],{"class":1030},[1002,67073,20117],{"class":1026},[1002,67075,1457],{"class":1030},[1002,67077,67078,67080],{"class":1004,"line":1060},[1002,67079,20201],{"class":1026},[1002,67081,3025],{"class":1030},[1002,67083,67084,67086],{"class":1004,"line":1272},[1002,67085,2687],{"class":1015},[1002,67087,15692],{"class":1030},[1002,67089,67090,67092,67094,67096,67098,67100,67102,67104,67107,67110,67113,67115],{"class":1004,"line":1348},[1002,67091,19579],{"class":1030},[1002,67093,66921],{"class":1019},[1002,67095,65142],{"class":1026},[1002,67097,2393],{"class":1015},[1002,67099,64954],{"class":1034},[1002,67101,65246],{"class":1026},[1002,67103,2393],{"class":1015},[1002,67105,67106],{"class":1030},"{{userId: ",[1002,67108,67109],{"class":1019},"1234",[1002,67111,67112],{"class":1030},"}}>User 1234\u003C\u002F",[1002,67114,66921],{"class":1019},[1002,67116,15703],{"class":1030},[1002,67118,67119,67121,67123,67125,67127,67130,67133,67135,67138,67141,67144,67146],{"class":1004,"line":1354},[1002,67120,19579],{"class":1030},[1002,67122,66921],{"class":1019},[1002,67124,65142],{"class":1026},[1002,67126,2393],{"class":1015},[1002,67128,67129],{"class":1034},"\"contact\"",[1002,67131,67132],{"class":1026}," query",[1002,67134,2393],{"class":1015},[1002,67136,67137],{"class":1030},"{{message: ",[1002,67139,67140],{"class":1034},"'Hi'",[1002,67142,67143],{"class":1030},"}}>Say hi\u003C\u002F",[1002,67145,66921],{"class":1019},[1002,67147,15703],{"class":1030},[1002,67149,67150],{"class":1004,"line":1360},[1002,67151,22541],{"class":1030},[1002,67153,67154],{"class":1004,"line":1366},[1002,67155,1269],{"class":1030},[1002,67157,67158],{"class":1004,"line":1946},[1002,67159,1170],{"class":1030},[1655,67161,67163],{"id":67162},"using-makehref","Using makeHref",[925,67165,3898,67166,67169],{},[941,67167,67168],{},"makeHref"," function will generate a link for you.",[993,67171,67173],{"className":995,"code":67172,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass About extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func,\n };\n\n render() {\n const link = this.context.router.makeHref(\n 'user',\n { userId: 1234 },\n { message: 'Hi' },\n );\n\n return \u003Ca href={link}>About\u003C\u002Fa>;\n }\n}\n",[941,67174,67175,67187,67191,67207,67217,67221,67225,67229,67235,67252,67259,67268,67277,67281,67285,67304,67308],{"__ignoreMap":998},[1002,67176,67177,67179,67181,67183,67185],{"class":1004,"line":1005},[1002,67178,943],{"class":1015},[1002,67180,21700],{"class":1030},[1002,67182,1068],{"class":1015},[1002,67184,15543],{"class":1034},[1002,67186,1407],{"class":1030},[1002,67188,67189],{"class":1004,"line":1012},[1002,67190,1051],{"emptyLinePlaceholder":1050},[1002,67192,67193,67195,67197,67199,67201,67203,67205],{"class":1004,"line":1047},[1002,67194,2363],{"class":1015},[1002,67196,67065],{"class":1026},[1002,67198,3014],{"class":1015},[1002,67200,20112],{"class":1026},[1002,67202,948],{"class":1030},[1002,67204,20117],{"class":1026},[1002,67206,1457],{"class":1030},[1002,67208,67209,67211,67213,67215],{"class":1004,"line":1054},[1002,67210,13506],{"class":1015},[1002,67212,66119],{"class":2378},[1002,67214,1023],{"class":1015},[1002,67216,1457],{"class":1030},[1002,67218,67219],{"class":1004,"line":1060},[1002,67220,66128],{"class":1030},[1002,67222,67223],{"class":1004,"line":1272},[1002,67224,15113],{"class":1030},[1002,67226,67227],{"class":1004,"line":1348},[1002,67228,1051],{"emptyLinePlaceholder":1050},[1002,67230,67231,67233],{"class":1004,"line":1354},[1002,67232,20201],{"class":1026},[1002,67234,3025],{"class":1030},[1002,67236,67237,67239,67242,67244,67246,67248,67250],{"class":1004,"line":1360},[1002,67238,4348],{"class":1015},[1002,67240,67241],{"class":1019}," link",[1002,67243,1023],{"class":1015},[1002,67245,2693],{"class":1019},[1002,67247,66260],{"class":1030},[1002,67249,67168],{"class":1026},[1002,67251,10468],{"class":1030},[1002,67253,67254,67257],{"class":1004,"line":1366},[1002,67255,67256],{"class":1034}," 'user'",[1002,67258,1143],{"class":1030},[1002,67260,67261,67264,67266],{"class":1004,"line":1946},[1002,67262,67263],{"class":1030}," { userId: ",[1002,67265,67109],{"class":1019},[1002,67267,33835],{"class":1030},[1002,67269,67270,67273,67275],{"class":1004,"line":1956},[1002,67271,67272],{"class":1030}," { message: ",[1002,67274,67140],{"class":1034},[1002,67276,33835],{"class":1030},[1002,67278,67279],{"class":1004,"line":1961},[1002,67280,22541],{"class":1030},[1002,67282,67283],{"class":1004,"line":1971},[1002,67284,1051],{"emptyLinePlaceholder":1050},[1002,67286,67287,67289,67291,67293,67295,67297,67300,67302],{"class":1004,"line":1980},[1002,67288,2687],{"class":1015},[1002,67290,20660],{"class":1030},[1002,67292,933],{"class":15711},[1002,67294,47182],{"class":1026},[1002,67296,2393],{"class":1015},[1002,67298,67299],{"class":1030},"{link}>About\u003C\u002F",[1002,67301,933],{"class":15711},[1002,67303,21772],{"class":1030},[1002,67305,67306],{"class":1004,"line":1985},[1002,67307,1269],{"class":1030},[1002,67309,67310],{"class":1004,"line":1995},[1002,67311,1170],{"class":1030},[925,67313,67314],{},"The generated link will have a parameter as well as query params.",[1655,67316,67318],{"id":67317},"using-transitionto","Using transitionTo",[925,67320,67321,67322,67325],{},"To fire a transition to anotehr URL, you can use ",[941,67323,67324],{},"transitioTo"," before React Router version 1.",[993,67327,67329],{"className":995,"code":67328,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass About extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func\n }\n\n onSubmit() {\n this.context.router.transitionTo('user',\n {userId: 1234},\n {message: 'Hi'});\n }\n ...\n}\n",[941,67330,67331,67343,67347,67363,67373,67377,67381,67385,67392,67407,67416,67425,67429,67433],{"__ignoreMap":998},[1002,67332,67333,67335,67337,67339,67341],{"class":1004,"line":1005},[1002,67334,943],{"class":1015},[1002,67336,21700],{"class":1030},[1002,67338,1068],{"class":1015},[1002,67340,15543],{"class":1034},[1002,67342,1407],{"class":1030},[1002,67344,67345],{"class":1004,"line":1012},[1002,67346,1051],{"emptyLinePlaceholder":1050},[1002,67348,67349,67351,67353,67355,67357,67359,67361],{"class":1004,"line":1047},[1002,67350,2363],{"class":1015},[1002,67352,67065],{"class":1026},[1002,67354,3014],{"class":1015},[1002,67356,20112],{"class":1026},[1002,67358,948],{"class":1030},[1002,67360,20117],{"class":1026},[1002,67362,1457],{"class":1030},[1002,67364,67365,67367,67369,67371],{"class":1004,"line":1054},[1002,67366,13506],{"class":1015},[1002,67368,66119],{"class":2378},[1002,67370,1023],{"class":1015},[1002,67372,1457],{"class":1030},[1002,67374,67375],{"class":1004,"line":1060},[1002,67376,65927],{"class":1030},[1002,67378,67379],{"class":1004,"line":1272},[1002,67380,1269],{"class":1030},[1002,67382,67383],{"class":1004,"line":1348},[1002,67384,1051],{"emptyLinePlaceholder":1050},[1002,67386,67387,67390],{"class":1004,"line":1354},[1002,67388,67389],{"class":1026}," onSubmit",[1002,67391,3025],{"class":1030},[1002,67393,67394,67396,67398,67401,67403,67405],{"class":1004,"line":1360},[1002,67395,2387],{"class":1019},[1002,67397,66260],{"class":1030},[1002,67399,67400],{"class":1026},"transitionTo",[1002,67402,1031],{"class":1030},[1002,67404,37780],{"class":1034},[1002,67406,1143],{"class":1030},[1002,67408,67409,67412,67414],{"class":1004,"line":1366},[1002,67410,67411],{"class":1030}," {userId: ",[1002,67413,67109],{"class":1019},[1002,67415,3492],{"class":1030},[1002,67417,67418,67421,67423],{"class":1004,"line":1946},[1002,67419,67420],{"class":1030}," {message: ",[1002,67422,67140],{"class":1034},[1002,67424,2804],{"class":1030},[1002,67426,67427],{"class":1004,"line":1956},[1002,67428,1269],{"class":1030},[1002,67430,67431],{"class":1004,"line":1961},[1002,67432,18213],{"class":1015},[1002,67434,67435],{"class":1004,"line":1971},[1002,67436,1170],{"class":1030},[925,67438,67439,67440],{},"This will transition to ",[1107,67441,67442],{},"\u002Fuser\u002F1234?message=Hi",[7100,67444,67445],{"type":23379},[925,67446,67447],{},"This will only cover ReactRouter versions before 1.0",[1655,67449,67451],{"id":67450},"using-replacewith","Using replaceWith",[925,67453,67454,67455,67458],{},"Without creating a new history entry, ",[941,67456,67457],{},"replaceWith"," navigates user to the given location.",[993,67460,67462],{"className":995,"code":67461,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func\n }\n\n onSubmit() {\n this.context.router.replaceWith('about');\n }\n ...\n}\n",[941,67463,67464,67476,67480,67496,67506,67510,67514,67518,67524,67539,67543,67547],{"__ignoreMap":998},[1002,67465,67466,67468,67470,67472,67474],{"class":1004,"line":1005},[1002,67467,943],{"class":1015},[1002,67469,21700],{"class":1030},[1002,67471,1068],{"class":1015},[1002,67473,15543],{"class":1034},[1002,67475,1407],{"class":1030},[1002,67477,67478],{"class":1004,"line":1012},[1002,67479,1051],{"emptyLinePlaceholder":1050},[1002,67481,67482,67484,67486,67488,67490,67492,67494],{"class":1004,"line":1047},[1002,67483,2363],{"class":1015},[1002,67485,12502],{"class":1026},[1002,67487,3014],{"class":1015},[1002,67489,20112],{"class":1026},[1002,67491,948],{"class":1030},[1002,67493,20117],{"class":1026},[1002,67495,1457],{"class":1030},[1002,67497,67498,67500,67502,67504],{"class":1004,"line":1054},[1002,67499,13506],{"class":1015},[1002,67501,66119],{"class":2378},[1002,67503,1023],{"class":1015},[1002,67505,1457],{"class":1030},[1002,67507,67508],{"class":1004,"line":1060},[1002,67509,65927],{"class":1030},[1002,67511,67512],{"class":1004,"line":1272},[1002,67513,1269],{"class":1030},[1002,67515,67516],{"class":1004,"line":1348},[1002,67517,1051],{"emptyLinePlaceholder":1050},[1002,67519,67520,67522],{"class":1004,"line":1354},[1002,67521,67389],{"class":1026},[1002,67523,3025],{"class":1030},[1002,67525,67526,67528,67530,67532,67534,67537],{"class":1004,"line":1360},[1002,67527,2387],{"class":1019},[1002,67529,66260],{"class":1030},[1002,67531,67457],{"class":1026},[1002,67533,1031],{"class":1030},[1002,67535,67536],{"class":1034},"'about'",[1002,67538,1085],{"class":1030},[1002,67540,67541],{"class":1004,"line":1366},[1002,67542,1269],{"class":1030},[1002,67544,67545],{"class":1004,"line":1946},[1002,67546,18213],{"class":1015},[1002,67548,67549],{"class":1004,"line":1956},[1002,67550,1170],{"class":1030},[1655,67552,67554],{"id":67553},"using-goback","Using goBack",[925,67556,67557,67558,948],{},"To go back one step in history, we can use ",[941,67559,67560],{},"goBack",[993,67562,67564],{"className":995,"code":67563,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func\n }\n\n onSubmit() {\n this.context.router.goBack();\n }\n ...\n}\n",[941,67565,67566,67578,67582,67598,67608,67612,67616,67620,67626,67636,67640,67644],{"__ignoreMap":998},[1002,67567,67568,67570,67572,67574,67576],{"class":1004,"line":1005},[1002,67569,943],{"class":1015},[1002,67571,21700],{"class":1030},[1002,67573,1068],{"class":1015},[1002,67575,15543],{"class":1034},[1002,67577,1407],{"class":1030},[1002,67579,67580],{"class":1004,"line":1012},[1002,67581,1051],{"emptyLinePlaceholder":1050},[1002,67583,67584,67586,67588,67590,67592,67594,67596],{"class":1004,"line":1047},[1002,67585,2363],{"class":1015},[1002,67587,12502],{"class":1026},[1002,67589,3014],{"class":1015},[1002,67591,20112],{"class":1026},[1002,67593,948],{"class":1030},[1002,67595,20117],{"class":1026},[1002,67597,1457],{"class":1030},[1002,67599,67600,67602,67604,67606],{"class":1004,"line":1054},[1002,67601,13506],{"class":1015},[1002,67603,66119],{"class":2378},[1002,67605,1023],{"class":1015},[1002,67607,1457],{"class":1030},[1002,67609,67610],{"class":1004,"line":1060},[1002,67611,65927],{"class":1030},[1002,67613,67614],{"class":1004,"line":1272},[1002,67615,1269],{"class":1030},[1002,67617,67618],{"class":1004,"line":1348},[1002,67619,1051],{"emptyLinePlaceholder":1050},[1002,67621,67622,67624],{"class":1004,"line":1354},[1002,67623,67389],{"class":1026},[1002,67625,3025],{"class":1030},[1002,67627,67628,67630,67632,67634],{"class":1004,"line":1360},[1002,67629,2387],{"class":1019},[1002,67631,66260],{"class":1030},[1002,67633,67560],{"class":1026},[1002,67635,1428],{"class":1030},[1002,67637,67638],{"class":1004,"line":1366},[1002,67639,1269],{"class":1030},[1002,67641,67642],{"class":1004,"line":1946},[1002,67643,18213],{"class":1015},[1002,67645,67646],{"class":1004,"line":1956},[1002,67647,1170],{"class":1030},[1655,67649,67651],{"id":67650},"using-goforward","Using goForward",[925,67653,67654,67655,948],{},"To go forward one step in history, we can use ",[941,67656,67657],{},"goForward",[993,67659,67661],{"className":995,"code":67660,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func\n }\n\n onSubmit() {\n this.context.router.goForward();\n }\n ...\n}\n",[941,67662,67663,67675,67679,67695,67705,67709,67713,67717,67723,67733,67737,67741],{"__ignoreMap":998},[1002,67664,67665,67667,67669,67671,67673],{"class":1004,"line":1005},[1002,67666,943],{"class":1015},[1002,67668,21700],{"class":1030},[1002,67670,1068],{"class":1015},[1002,67672,15543],{"class":1034},[1002,67674,1407],{"class":1030},[1002,67676,67677],{"class":1004,"line":1012},[1002,67678,1051],{"emptyLinePlaceholder":1050},[1002,67680,67681,67683,67685,67687,67689,67691,67693],{"class":1004,"line":1047},[1002,67682,2363],{"class":1015},[1002,67684,12502],{"class":1026},[1002,67686,3014],{"class":1015},[1002,67688,20112],{"class":1026},[1002,67690,948],{"class":1030},[1002,67692,20117],{"class":1026},[1002,67694,1457],{"class":1030},[1002,67696,67697,67699,67701,67703],{"class":1004,"line":1054},[1002,67698,13506],{"class":1015},[1002,67700,66119],{"class":2378},[1002,67702,1023],{"class":1015},[1002,67704,1457],{"class":1030},[1002,67706,67707],{"class":1004,"line":1060},[1002,67708,65927],{"class":1030},[1002,67710,67711],{"class":1004,"line":1272},[1002,67712,1269],{"class":1030},[1002,67714,67715],{"class":1004,"line":1348},[1002,67716,1051],{"emptyLinePlaceholder":1050},[1002,67718,67719,67721],{"class":1004,"line":1354},[1002,67720,67389],{"class":1026},[1002,67722,3025],{"class":1030},[1002,67724,67725,67727,67729,67731],{"class":1004,"line":1360},[1002,67726,2387],{"class":1019},[1002,67728,66260],{"class":1030},[1002,67730,67657],{"class":1026},[1002,67732,1428],{"class":1030},[1002,67734,67735],{"class":1004,"line":1366},[1002,67736,1269],{"class":1030},[1002,67738,67739],{"class":1004,"line":1946},[1002,67740,18213],{"class":1015},[1002,67742,67743],{"class":1004,"line":1956},[1002,67744,1170],{"class":1030},[1655,67746,67748],{"id":67747},"using-go","Using go",[925,67750,67751,67752,67754],{},"To go backward ",[941,67753,25415],{}," steps in history.",[993,67756,67758],{"className":995,"code":67757,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static contextTypes = {\n router: React.PropTypes.func\n }\n\n onSubmit() {\n this.context.router.go(-2);\n }\n ...\n}\n",[941,67759,67760,67772,67776,67792,67802,67806,67810,67814,67820,67836,67840,67844],{"__ignoreMap":998},[1002,67761,67762,67764,67766,67768,67770],{"class":1004,"line":1005},[1002,67763,943],{"class":1015},[1002,67765,21700],{"class":1030},[1002,67767,1068],{"class":1015},[1002,67769,15543],{"class":1034},[1002,67771,1407],{"class":1030},[1002,67773,67774],{"class":1004,"line":1012},[1002,67775,1051],{"emptyLinePlaceholder":1050},[1002,67777,67778,67780,67782,67784,67786,67788,67790],{"class":1004,"line":1047},[1002,67779,2363],{"class":1015},[1002,67781,12502],{"class":1026},[1002,67783,3014],{"class":1015},[1002,67785,20112],{"class":1026},[1002,67787,948],{"class":1030},[1002,67789,20117],{"class":1026},[1002,67791,1457],{"class":1030},[1002,67793,67794,67796,67798,67800],{"class":1004,"line":1054},[1002,67795,13506],{"class":1015},[1002,67797,66119],{"class":2378},[1002,67799,1023],{"class":1015},[1002,67801,1457],{"class":1030},[1002,67803,67804],{"class":1004,"line":1060},[1002,67805,65927],{"class":1030},[1002,67807,67808],{"class":1004,"line":1272},[1002,67809,1269],{"class":1030},[1002,67811,67812],{"class":1004,"line":1348},[1002,67813,1051],{"emptyLinePlaceholder":1050},[1002,67815,67816,67818],{"class":1004,"line":1354},[1002,67817,67389],{"class":1026},[1002,67819,3025],{"class":1030},[1002,67821,67822,67824,67826,67828,67830,67832,67834],{"class":1004,"line":1360},[1002,67823,2387],{"class":1019},[1002,67825,66260],{"class":1030},[1002,67827,8998],{"class":1026},[1002,67829,1031],{"class":1030},[1002,67831,5101],{"class":1015},[1002,67833,5681],{"class":1019},[1002,67835,1085],{"class":1030},[1002,67837,67838],{"class":1004,"line":1366},[1002,67839,1269],{"class":1030},[1002,67841,67842],{"class":1004,"line":1946},[1002,67843,18213],{"class":1015},[1002,67845,67846],{"class":1004,"line":1956},[1002,67847,1170],{"class":1030},[925,67849,67850,67851],{},"This go 2 steps back. If you want to go forward, you will have to use positive arguments. eg:- ",[1107,67852,67853],{},"this.context.router.go(2)",[953,67855,67857],{"id":67856},"lifecycle-methods","Lifecycle Methods",[1655,67859,67861],{"id":67860},"using-willtransitionto-and-willtransitionfrom","Using willTransitionTo and willTransitionFrom",[925,67863,67864],{},"To redirect to a given location.",[993,67866,67868],{"className":995,"code":67867,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass User extends React.Component {\n static willTransitionTo(transition) {\n if (!auth.loggedIn()) {\n transition.redirect('\u002Flogin',\n {},\n {'redirect' : transition.path});\n }\n }\n ...\n}\n",[941,67869,67870,67882,67886,67902,67916,67932,67947,67952,67962,67966,67970,67974],{"__ignoreMap":998},[1002,67871,67872,67874,67876,67878,67880],{"class":1004,"line":1005},[1002,67873,943],{"class":1015},[1002,67875,21700],{"class":1030},[1002,67877,1068],{"class":1015},[1002,67879,15543],{"class":1034},[1002,67881,1407],{"class":1030},[1002,67883,67884],{"class":1004,"line":1012},[1002,67885,1051],{"emptyLinePlaceholder":1050},[1002,67887,67888,67890,67892,67894,67896,67898,67900],{"class":1004,"line":1047},[1002,67889,2363],{"class":1015},[1002,67891,12502],{"class":1026},[1002,67893,3014],{"class":1015},[1002,67895,20112],{"class":1026},[1002,67897,948],{"class":1030},[1002,67899,20117],{"class":1026},[1002,67901,1457],{"class":1030},[1002,67903,67904,67906,67909,67911,67914],{"class":1004,"line":1054},[1002,67905,13506],{"class":1015},[1002,67907,67908],{"class":1026}," willTransitionTo",[1002,67910,1031],{"class":1030},[1002,67912,67913],{"class":2378},"transition",[1002,67915,2382],{"class":1030},[1002,67917,67918,67920,67922,67924,67927,67930],{"class":1004,"line":1060},[1002,67919,4368],{"class":1015},[1002,67921,6513],{"class":1030},[1002,67923,13559],{"class":1015},[1002,67925,67926],{"class":1030},"auth.",[1002,67928,67929],{"class":1026},"loggedIn",[1002,67931,3547],{"class":1030},[1002,67933,67934,67937,67940,67942,67945],{"class":1004,"line":1272},[1002,67935,67936],{"class":1030}," transition.",[1002,67938,67939],{"class":1026},"redirect",[1002,67941,1031],{"class":1030},[1002,67943,67944],{"class":1034},"'\u002Flogin'",[1002,67946,1143],{"class":1030},[1002,67948,67949],{"class":1004,"line":1348},[1002,67950,67951],{"class":1030}," {},\n",[1002,67953,67954,67956,67959],{"class":1004,"line":1354},[1002,67955,19203],{"class":1030},[1002,67957,67958],{"class":1034},"'redirect'",[1002,67960,67961],{"class":1030}," : transition.path});\n",[1002,67963,67964],{"class":1004,"line":1360},[1002,67965,2014],{"class":1030},[1002,67967,67968],{"class":1004,"line":1366},[1002,67969,1269],{"class":1030},[1002,67971,67972],{"class":1004,"line":1946},[1002,67973,18213],{"class":1015},[1002,67975,67976],{"class":1004,"line":1956},[1002,67977,1170],{"class":1030},[7100,67979,67980],{"type":23379},[925,67981,67447],{},[953,67983,67985],{"id":67984},"changes-in-version-10","Changes in Version 1.0",[1655,67987,67989],{"id":67988},"componet-not-handler","Componet not handler",[925,67991,67992,67993,67996,67997,948],{},"In version 1.0 ",[941,67994,67995],{},"handler"," has been replaced with ",[941,67998,67999],{},"component",[993,68001,68003],{"className":995,"code":68002,"language":997,"meta":998,"style":998},"import { Route } from 'react-router';\n\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRoute name=\"about\" handler={About} \u002F>\n \u003C\u002FRoute>\n);\n\n\u002F\u002F version 1.0\nconst routes = (\n \u003CRoute handler={App} path=\"\u002F\">\n \u003CRoute name=\"about\" component={About} \u002F>\n \u003C\u002FRoute>\n);\n",[941,68004,68005,68017,68021,68031,68051,68069,68077,68081,68085,68090,68100,68120,68139,68147],{"__ignoreMap":998},[1002,68006,68007,68009,68011,68013,68015],{"class":1004,"line":1005},[1002,68008,943],{"class":1015},[1002,68010,64321],{"class":1030},[1002,68012,1068],{"class":1015},[1002,68014,64326],{"class":1034},[1002,68016,1407],{"class":1030},[1002,68018,68019],{"class":1004,"line":1012},[1002,68020,1051],{"emptyLinePlaceholder":1050},[1002,68022,68023,68025,68027,68029],{"class":1004,"line":1047},[1002,68024,1016],{"class":1015},[1002,68026,64339],{"class":1026},[1002,68028,1023],{"class":1015},[1002,68030,15692],{"class":1030},[1002,68032,68033,68035,68037,68039,68041,68043,68045,68047,68049],{"class":1004,"line":1054},[1002,68034,22427],{"class":1030},[1002,68036,64350],{"class":1019},[1002,68038,64353],{"class":1026},[1002,68040,2393],{"class":1015},[1002,68042,64358],{"class":1030},[1002,68044,64361],{"class":1026},[1002,68046,2393],{"class":1015},[1002,68048,64366],{"class":1034},[1002,68050,15703],{"class":1030},[1002,68052,68053,68055,68057,68059,68061,68063,68065,68067],{"class":1004,"line":1060},[1002,68054,15697],{"class":1030},[1002,68056,64350],{"class":1019},[1002,68058,18584],{"class":1026},[1002,68060,2393],{"class":1015},[1002,68062,64381],{"class":1034},[1002,68064,64353],{"class":1026},[1002,68066,2393],{"class":1015},[1002,68068,64388],{"class":1030},[1002,68070,68071,68073,68075],{"class":1004,"line":1272},[1002,68072,28112],{"class":1030},[1002,68074,64350],{"class":1019},[1002,68076,15703],{"class":1030},[1002,68078,68079],{"class":1004,"line":1348},[1002,68080,1085],{"class":1030},[1002,68082,68083],{"class":1004,"line":1354},[1002,68084,1051],{"emptyLinePlaceholder":1050},[1002,68086,68087],{"class":1004,"line":1360},[1002,68088,68089],{"class":1008},"\u002F\u002F version 1.0\n",[1002,68091,68092,68094,68096,68098],{"class":1004,"line":1366},[1002,68093,1016],{"class":1015},[1002,68095,64339],{"class":1026},[1002,68097,1023],{"class":1015},[1002,68099,15692],{"class":1030},[1002,68101,68102,68104,68106,68108,68110,68112,68114,68116,68118],{"class":1004,"line":1946},[1002,68103,22427],{"class":1030},[1002,68105,64350],{"class":1019},[1002,68107,64353],{"class":1026},[1002,68109,2393],{"class":1015},[1002,68111,64358],{"class":1030},[1002,68113,64361],{"class":1026},[1002,68115,2393],{"class":1015},[1002,68117,64366],{"class":1034},[1002,68119,15703],{"class":1030},[1002,68121,68122,68124,68126,68128,68130,68132,68135,68137],{"class":1004,"line":1956},[1002,68123,15697],{"class":1030},[1002,68125,64350],{"class":1019},[1002,68127,18584],{"class":1026},[1002,68129,2393],{"class":1015},[1002,68131,64381],{"class":1034},[1002,68133,68134],{"class":1026}," component",[1002,68136,2393],{"class":1015},[1002,68138,64388],{"class":1030},[1002,68140,68141,68143,68145],{"class":1004,"line":1961},[1002,68142,28112],{"class":1030},[1002,68144,64350],{"class":1019},[1002,68146,15703],{"class":1030},[1002,68148,68149],{"class":1004,"line":1971},[1002,68150,1085],{"class":1030},[1655,68152,68154],{"id":68153},"props-not-routehandler","Props not RouteHandler",[925,68156,68157,68158,68161,68162],{},"Also ",[941,68159,68160],{},"RouteHandler"," was changed to ",[941,68163,19533],{},[993,68165,68167],{"className":995,"code":68166,"language":997,"meta":998,"style":998},"import React from 'react';\n\nclass App extends React.Component {\n render() {\n return (\n \u003CRouterHandler \u002F>\n );\n }\n}\n\n\u002F\u002F version 1.0\nclass App extends React.Component {\n render() {\n return (\n {this.props.children}\n );\n }\n}\n",[941,68168,68169,68181,68185,68201,68207,68213,68221,68225,68229,68233,68237,68241,68257,68263,68269,68285,68289,68293],{"__ignoreMap":998},[1002,68170,68171,68173,68175,68177,68179],{"class":1004,"line":1005},[1002,68172,943],{"class":1015},[1002,68174,21700],{"class":1030},[1002,68176,1068],{"class":1015},[1002,68178,15543],{"class":1034},[1002,68180,1407],{"class":1030},[1002,68182,68183],{"class":1004,"line":1012},[1002,68184,1051],{"emptyLinePlaceholder":1050},[1002,68186,68187,68189,68191,68193,68195,68197,68199],{"class":1004,"line":1047},[1002,68188,2363],{"class":1015},[1002,68190,19566],{"class":1026},[1002,68192,3014],{"class":1015},[1002,68194,20112],{"class":1026},[1002,68196,948],{"class":1030},[1002,68198,20117],{"class":1026},[1002,68200,1457],{"class":1030},[1002,68202,68203,68205],{"class":1004,"line":1054},[1002,68204,20201],{"class":1026},[1002,68206,3025],{"class":1030},[1002,68208,68209,68211],{"class":1004,"line":1060},[1002,68210,2687],{"class":1015},[1002,68212,15692],{"class":1030},[1002,68214,68215,68217,68219],{"class":1004,"line":1272},[1002,68216,19579],{"class":1030},[1002,68218,65744],{"class":1019},[1002,68220,15258],{"class":1030},[1002,68222,68223],{"class":1004,"line":1348},[1002,68224,22541],{"class":1030},[1002,68226,68227],{"class":1004,"line":1354},[1002,68228,1269],{"class":1030},[1002,68230,68231],{"class":1004,"line":1360},[1002,68232,1170],{"class":1030},[1002,68234,68235],{"class":1004,"line":1366},[1002,68236,1051],{"emptyLinePlaceholder":1050},[1002,68238,68239],{"class":1004,"line":1946},[1002,68240,68089],{"class":1008},[1002,68242,68243,68245,68247,68249,68251,68253,68255],{"class":1004,"line":1956},[1002,68244,2363],{"class":1015},[1002,68246,19566],{"class":1026},[1002,68248,3014],{"class":1015},[1002,68250,20112],{"class":1026},[1002,68252,948],{"class":1030},[1002,68254,20117],{"class":1026},[1002,68256,1457],{"class":1030},[1002,68258,68259,68261],{"class":1004,"line":1961},[1002,68260,20201],{"class":1026},[1002,68262,3025],{"class":1030},[1002,68264,68265,68267],{"class":1004,"line":1971},[1002,68266,2687],{"class":1015},[1002,68268,15692],{"class":1030},[1002,68270,68271,68273,68275,68277,68279,68281,68283],{"class":1004,"line":1980},[1002,68272,19203],{"class":1030},[1002,68274,3455],{"class":2378},[1002,68276,948],{"class":1030},[1002,68278,19533],{"class":2378},[1002,68280,948],{"class":1030},[1002,68282,19119],{"class":2378},[1002,68284,1170],{"class":1030},[1002,68286,68287],{"class":1004,"line":1985},[1002,68288,22541],{"class":1030},[1002,68290,68291],{"class":1004,"line":1995},[1002,68292,1269],{"class":1030},[1002,68294,68295],{"class":1004,"line":2006},[1002,68296,1170],{"class":1030},[1655,68298,68300],{"id":68299},"no-more-named-routes","No more named routes",[925,68302,68303],{},"Named routes were also taken out",[993,68305,68307],{"className":995,"code":68306,"language":997,"meta":998,"style":998},"\u003CRoute handler={App} path=\"\u002F\">\n \u003CRoute name=\"user\" path=\"\u002Fuser\u002F:userId\" handler={User} \u002F>\n\u003C\u002FRoute>\n\n\u002F\u002F version 1.0\n\u003CRoute component={App} path=\"\u002F\">\n \u003CRoute path=\"\u002Fuser\u002F:userId\" component={User} \u002F>\n\u003C\u002FRoute>\n",[941,68308,68309,68329,68353,68361,68365,68369,68389,68407],{"__ignoreMap":998},[1002,68310,68311,68313,68315,68317,68319,68321,68323,68325,68327],{"class":1004,"line":1005},[1002,68312,6539],{"class":1030},[1002,68314,64350],{"class":1019},[1002,68316,64353],{"class":1026},[1002,68318,2393],{"class":1015},[1002,68320,64358],{"class":1030},[1002,68322,64361],{"class":1026},[1002,68324,2393],{"class":1015},[1002,68326,64366],{"class":1034},[1002,68328,15703],{"class":1030},[1002,68330,68331,68333,68335,68337,68339,68341,68343,68345,68347,68349,68351],{"class":1004,"line":1012},[1002,68332,22427],{"class":1030},[1002,68334,64350],{"class":1019},[1002,68336,18584],{"class":1026},[1002,68338,2393],{"class":1015},[1002,68340,64954],{"class":1034},[1002,68342,19031],{"class":1026},[1002,68344,2393],{"class":1015},[1002,68346,64961],{"class":1034},[1002,68348,64353],{"class":1026},[1002,68350,2393],{"class":1015},[1002,68352,64968],{"class":1030},[1002,68354,68355,68357,68359],{"class":1004,"line":1047},[1002,68356,22437],{"class":1030},[1002,68358,64350],{"class":1019},[1002,68360,15703],{"class":1030},[1002,68362,68363],{"class":1004,"line":1054},[1002,68364,1051],{"emptyLinePlaceholder":1050},[1002,68366,68367],{"class":1004,"line":1060},[1002,68368,68089],{"class":1008},[1002,68370,68371,68373,68375,68377,68379,68381,68383,68385,68387],{"class":1004,"line":1272},[1002,68372,6539],{"class":1030},[1002,68374,64350],{"class":1019},[1002,68376,68134],{"class":1026},[1002,68378,2393],{"class":1015},[1002,68380,64358],{"class":1030},[1002,68382,64361],{"class":1026},[1002,68384,2393],{"class":1015},[1002,68386,64366],{"class":1034},[1002,68388,15703],{"class":1030},[1002,68390,68391,68393,68395,68397,68399,68401,68403,68405],{"class":1004,"line":1348},[1002,68392,22427],{"class":1030},[1002,68394,64350],{"class":1019},[1002,68396,19031],{"class":1026},[1002,68398,2393],{"class":1015},[1002,68400,64961],{"class":1034},[1002,68402,68134],{"class":1026},[1002,68404,2393],{"class":1015},[1002,68406,64968],{"class":1030},[1002,68408,68409,68411,68413],{"class":1004,"line":1354},[1002,68410,22437],{"class":1030},[1002,68412,64350],{"class":1019},[1002,68414,15703],{"class":1030},[1655,68416,68418],{"id":68417},"catch-all-route","Catch all route",[925,68420,68421],{},"The Not found route becomes catch all.",[993,68423,68425],{"className":995,"code":68424,"language":997,"meta":998,"style":998},"\u003CNotFoundRoute handler={NotFound} \u002F>\n\n\u002F\u002F version 1.0\n\u003CRoute path=\"*\" component={NotFound} \u002F>\n",[941,68426,68427,68439,68443,68447],{"__ignoreMap":998},[1002,68428,68429,68431,68433,68435,68437],{"class":1004,"line":1005},[1002,68430,6539],{"class":1030},[1002,68432,64633],{"class":1019},[1002,68434,64353],{"class":1026},[1002,68436,2393],{"class":1015},[1002,68438,64715],{"class":1030},[1002,68440,68441],{"class":1004,"line":1012},[1002,68442,1051],{"emptyLinePlaceholder":1050},[1002,68444,68445],{"class":1004,"line":1047},[1002,68446,68089],{"class":1008},[1002,68448,68449,68451,68453,68455,68457,68460,68462,68464],{"class":1004,"line":1054},[1002,68450,6539],{"class":1030},[1002,68452,64350],{"class":1019},[1002,68454,19031],{"class":1026},[1002,68456,2393],{"class":1015},[1002,68458,68459],{"class":1034},"\"*\"",[1002,68461,68134],{"class":1026},[1002,68463,2393],{"class":1015},[1002,68465,64715],{"class":1030},[1655,68467,68469],{"id":68468},"redirect-routes-1","Redirect routes",[925,68471,68472],{},"Redirect routes now have params in the URL.",[993,68474,68476],{"className":995,"code":68475,"language":997,"meta":998,"style":998},"\u003CRoute handler={App} path=\"\u002F\">\n \u003CRedirect from=\"\u002Fuser\u002Fme\" to=\"user\" params={userId: '1234'} \u002F>\n \u003CRoute name=\"user\" path=\"\u002Fuser\u002F:userId\" handler={User} \u002F>\n\u003C\u002FRoute>\n\n\u002F\u002F version 1.0\n\u003CRoute component={App} path=\"\u002F\">\n \u003CRedirect from=\"\u002Fuser\u002Fme\" to=\"\u002Fuser\u002F1234\" \u002F>\n \u003CRoute path=\"\u002Fuser\u002F:userId\" component={User} \u002F>\n\u003C\u002FRoute>\n",[941,68477,68478,68498,68528,68552,68560,68564,68568,68588,68609,68627],{"__ignoreMap":998},[1002,68479,68480,68482,68484,68486,68488,68490,68492,68494,68496],{"class":1004,"line":1005},[1002,68481,6539],{"class":1030},[1002,68483,64350],{"class":1019},[1002,68485,64353],{"class":1026},[1002,68487,2393],{"class":1015},[1002,68489,64358],{"class":1030},[1002,68491,64361],{"class":1026},[1002,68493,2393],{"class":1015},[1002,68495,64366],{"class":1034},[1002,68497,15703],{"class":1030},[1002,68499,68500,68502,68504,68506,68508,68510,68512,68514,68516,68518,68520,68523,68526],{"class":1004,"line":1012},[1002,68501,22427],{"class":1030},[1002,68503,65054],{"class":1019},[1002,68505,65134],{"class":1026},[1002,68507,2393],{"class":1015},[1002,68509,65237],{"class":1034},[1002,68511,65142],{"class":1026},[1002,68513,2393],{"class":1015},[1002,68515,64954],{"class":1034},[1002,68517,65246],{"class":1026},[1002,68519,2393],{"class":1015},[1002,68521,68522],{"class":1030},"{userId: ",[1002,68524,68525],{"class":1034},"'1234'",[1002,68527,26947],{"class":1030},[1002,68529,68530,68532,68534,68536,68538,68540,68542,68544,68546,68548,68550],{"class":1004,"line":1047},[1002,68531,22427],{"class":1030},[1002,68533,64350],{"class":1019},[1002,68535,18584],{"class":1026},[1002,68537,2393],{"class":1015},[1002,68539,64954],{"class":1034},[1002,68541,19031],{"class":1026},[1002,68543,2393],{"class":1015},[1002,68545,64961],{"class":1034},[1002,68547,64353],{"class":1026},[1002,68549,2393],{"class":1015},[1002,68551,64968],{"class":1030},[1002,68553,68554,68556,68558],{"class":1004,"line":1054},[1002,68555,22437],{"class":1030},[1002,68557,64350],{"class":1019},[1002,68559,15703],{"class":1030},[1002,68561,68562],{"class":1004,"line":1060},[1002,68563,1051],{"emptyLinePlaceholder":1050},[1002,68565,68566],{"class":1004,"line":1272},[1002,68567,68089],{"class":1008},[1002,68569,68570,68572,68574,68576,68578,68580,68582,68584,68586],{"class":1004,"line":1348},[1002,68571,6539],{"class":1030},[1002,68573,64350],{"class":1019},[1002,68575,68134],{"class":1026},[1002,68577,2393],{"class":1015},[1002,68579,64358],{"class":1030},[1002,68581,64361],{"class":1026},[1002,68583,2393],{"class":1015},[1002,68585,64366],{"class":1034},[1002,68587,15703],{"class":1030},[1002,68589,68590,68592,68594,68596,68598,68600,68602,68604,68607],{"class":1004,"line":1354},[1002,68591,22427],{"class":1030},[1002,68593,65054],{"class":1019},[1002,68595,65134],{"class":1026},[1002,68597,2393],{"class":1015},[1002,68599,65237],{"class":1034},[1002,68601,65142],{"class":1026},[1002,68603,2393],{"class":1015},[1002,68605,68606],{"class":1034},"\"\u002Fuser\u002F1234\"",[1002,68608,15258],{"class":1030},[1002,68610,68611,68613,68615,68617,68619,68621,68623,68625],{"class":1004,"line":1360},[1002,68612,22427],{"class":1030},[1002,68614,64350],{"class":1019},[1002,68616,19031],{"class":1026},[1002,68618,2393],{"class":1015},[1002,68620,64961],{"class":1034},[1002,68622,68134],{"class":1026},[1002,68624,2393],{"class":1015},[1002,68626,64968],{"class":1030},[1002,68628,68629,68631,68633],{"class":1004,"line":1366},[1002,68630,22437],{"class":1030},[1002,68632,64350],{"class":1019},[1002,68634,15703],{"class":1030},[1655,68636,68638],{"id":68637},"defaultroute-not-indexroute","DefaultRoute not IndexRoute",[1655,68640,68642],{"id":68641},"indexroute-has-been-replaced-with-defaultroute","IndexRoute has been replaced with DefaultRoute",[993,68644,68646],{"className":995,"code":68645,"language":997,"meta":998,"style":998},"\u003CRoute handler={App} path=\"\u002F\">\n \u003CDefaultRoute handler={Home} \u002F>\n \u003CRoute name=\"about\" handler={About} \u002F>\n\u003C\u002FRoute>\n\n\u002F\u002F version 1.0\n\u003CRoute component={App} path=\"\u002F\">\n \u003CIndexRoute component={Home} \u002F>\n \u003CRoute path=\"about\" component={About} \u002F>\n\u003C\u002FRoute>\n",[941,68647,68648,68668,68680,68698,68706,68710,68714,68734,68747,68765],{"__ignoreMap":998},[1002,68649,68650,68652,68654,68656,68658,68660,68662,68664,68666],{"class":1004,"line":1005},[1002,68651,6539],{"class":1030},[1002,68653,64350],{"class":1019},[1002,68655,64353],{"class":1026},[1002,68657,2393],{"class":1015},[1002,68659,64358],{"class":1030},[1002,68661,64361],{"class":1026},[1002,68663,2393],{"class":1015},[1002,68665,64366],{"class":1034},[1002,68667,15703],{"class":1030},[1002,68669,68670,68672,68674,68676,68678],{"class":1004,"line":1012},[1002,68671,22427],{"class":1030},[1002,68673,64519],{"class":1019},[1002,68675,64353],{"class":1026},[1002,68677,2393],{"class":1015},[1002,68679,64585],{"class":1030},[1002,68681,68682,68684,68686,68688,68690,68692,68694,68696],{"class":1004,"line":1047},[1002,68683,22427],{"class":1030},[1002,68685,64350],{"class":1019},[1002,68687,18584],{"class":1026},[1002,68689,2393],{"class":1015},[1002,68691,64381],{"class":1034},[1002,68693,64353],{"class":1026},[1002,68695,2393],{"class":1015},[1002,68697,64388],{"class":1030},[1002,68699,68700,68702,68704],{"class":1004,"line":1054},[1002,68701,22437],{"class":1030},[1002,68703,64350],{"class":1019},[1002,68705,15703],{"class":1030},[1002,68707,68708],{"class":1004,"line":1060},[1002,68709,1051],{"emptyLinePlaceholder":1050},[1002,68711,68712],{"class":1004,"line":1272},[1002,68713,68089],{"class":1008},[1002,68715,68716,68718,68720,68722,68724,68726,68728,68730,68732],{"class":1004,"line":1348},[1002,68717,6539],{"class":1030},[1002,68719,64350],{"class":1019},[1002,68721,68134],{"class":1026},[1002,68723,2393],{"class":1015},[1002,68725,64358],{"class":1030},[1002,68727,64361],{"class":1026},[1002,68729,2393],{"class":1015},[1002,68731,64366],{"class":1034},[1002,68733,15703],{"class":1030},[1002,68735,68736,68738,68741,68743,68745],{"class":1004,"line":1354},[1002,68737,22427],{"class":1030},[1002,68739,68740],{"class":1019},"IndexRoute",[1002,68742,68134],{"class":1026},[1002,68744,2393],{"class":1015},[1002,68746,64585],{"class":1030},[1002,68748,68749,68751,68753,68755,68757,68759,68761,68763],{"class":1004,"line":1360},[1002,68750,22427],{"class":1030},[1002,68752,64350],{"class":1019},[1002,68754,19031],{"class":1026},[1002,68756,2393],{"class":1015},[1002,68758,64381],{"class":1034},[1002,68760,68134],{"class":1026},[1002,68762,2393],{"class":1015},[1002,68764,64388],{"class":1030},[1002,68766,68767,68769,68771],{"class":1004,"line":1366},[1002,68768,22437],{"class":1030},[1002,68770,64350],{"class":1019},[1002,68772,15703],{"class":1030},[1655,68774,68776],{"id":68775},"mutliple-components","Mutliple components",[925,68778,68779],{},"Instead of passing an object of multiple components, in 1.0, we use multiple components.",[993,68781,68783],{"className":995,"code":68782,"language":997,"meta":998,"style":998},"import { Route } from 'react-router';\nconst routes = (\n \u003CRoute component={App}>\n \u003CRoute path=\"users\" components={{ main: Users, sidebar: UsersSidebar }} \u002F>\n \u003C\u002FRoute>\n);\n\n\u002F\u002F version 1.0\nimport React from 'react';\nclass App extends React.Component {\n render() {\n return (\n \u003Cdiv>\n \u003Cdiv className=\"Main\">{this.props.main}\u003C\u002Fdiv>\n \u003Cdiv className=\"Sidebar\">{this.props.sidebar}\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n );\n }\n}\n",[941,68784,68785,68797,68807,68820,68840,68848,68852,68856,68860,68872,68888,68894,68900,68908,68932,68956,68964,68968,68972],{"__ignoreMap":998},[1002,68786,68787,68789,68791,68793,68795],{"class":1004,"line":1005},[1002,68788,943],{"class":1015},[1002,68790,64321],{"class":1030},[1002,68792,1068],{"class":1015},[1002,68794,64326],{"class":1034},[1002,68796,1407],{"class":1030},[1002,68798,68799,68801,68803,68805],{"class":1004,"line":1012},[1002,68800,1016],{"class":1015},[1002,68802,64339],{"class":1026},[1002,68804,1023],{"class":1015},[1002,68806,15692],{"class":1030},[1002,68808,68809,68811,68813,68815,68817],{"class":1004,"line":1047},[1002,68810,22427],{"class":1030},[1002,68812,64350],{"class":1019},[1002,68814,68134],{"class":1026},[1002,68816,2393],{"class":1015},[1002,68818,68819],{"class":1030},"{App}>\n",[1002,68821,68822,68824,68826,68828,68830,68832,68835,68837],{"class":1004,"line":1054},[1002,68823,15697],{"class":1030},[1002,68825,64350],{"class":1019},[1002,68827,19031],{"class":1026},[1002,68829,2393],{"class":1015},[1002,68831,64802],{"class":1034},[1002,68833,68834],{"class":1026}," components",[1002,68836,2393],{"class":1015},[1002,68838,68839],{"class":1030},"{{ main: Users, sidebar: UsersSidebar }} \u002F>\n",[1002,68841,68842,68844,68846],{"class":1004,"line":1060},[1002,68843,28112],{"class":1030},[1002,68845,64350],{"class":1019},[1002,68847,15703],{"class":1030},[1002,68849,68850],{"class":1004,"line":1272},[1002,68851,1085],{"class":1030},[1002,68853,68854],{"class":1004,"line":1348},[1002,68855,1051],{"emptyLinePlaceholder":1050},[1002,68857,68858],{"class":1004,"line":1354},[1002,68859,68089],{"class":1008},[1002,68861,68862,68864,68866,68868,68870],{"class":1004,"line":1360},[1002,68863,943],{"class":1015},[1002,68865,21700],{"class":1030},[1002,68867,1068],{"class":1015},[1002,68869,15543],{"class":1034},[1002,68871,1407],{"class":1030},[1002,68873,68874,68876,68878,68880,68882,68884,68886],{"class":1004,"line":1366},[1002,68875,2363],{"class":1015},[1002,68877,19566],{"class":1026},[1002,68879,3014],{"class":1015},[1002,68881,20112],{"class":1026},[1002,68883,948],{"class":1030},[1002,68885,20117],{"class":1026},[1002,68887,1457],{"class":1030},[1002,68889,68890,68892],{"class":1004,"line":1946},[1002,68891,20201],{"class":1026},[1002,68893,3025],{"class":1030},[1002,68895,68896,68898],{"class":1004,"line":1956},[1002,68897,2687],{"class":1015},[1002,68899,15692],{"class":1030},[1002,68901,68902,68904,68906],{"class":1004,"line":1961},[1002,68903,19579],{"class":1030},[1002,68905,19650],{"class":15711},[1002,68907,15703],{"class":1030},[1002,68909,68910,68912,68914,68916,68918,68921,68923,68925,68928,68930],{"class":1004,"line":1971},[1002,68911,15708],{"class":1030},[1002,68913,19650],{"class":15711},[1002,68915,26915],{"class":1026},[1002,68917,2393],{"class":1015},[1002,68919,68920],{"class":1034},"\"Main\"",[1002,68922,24778],{"class":1030},[1002,68924,3455],{"class":1019},[1002,68926,68927],{"class":1030},".props.main}\u003C\u002F",[1002,68929,19650],{"class":15711},[1002,68931,15703],{"class":1030},[1002,68933,68934,68936,68938,68940,68942,68945,68947,68949,68952,68954],{"class":1004,"line":1980},[1002,68935,15708],{"class":1030},[1002,68937,19650],{"class":15711},[1002,68939,26915],{"class":1026},[1002,68941,2393],{"class":1015},[1002,68943,68944],{"class":1034},"\"Sidebar\"",[1002,68946,24778],{"class":1030},[1002,68948,3455],{"class":1019},[1002,68950,68951],{"class":1030},".props.sidebar}\u003C\u002F",[1002,68953,19650],{"class":15711},[1002,68955,15703],{"class":1030},[1002,68957,68958,68960,68962],{"class":1004,"line":1985},[1002,68959,21184],{"class":1030},[1002,68961,19650],{"class":15711},[1002,68963,15703],{"class":1030},[1002,68965,68966],{"class":1004,"line":1995},[1002,68967,22541],{"class":1030},[1002,68969,68970],{"class":1004,"line":2006},[1002,68971,1269],{"class":1030},[1002,68973,68974],{"class":1004,"line":2011},[1002,68975,1170],{"class":1030},[1655,68977,68979],{"id":68978},"running-the-router-1","Running the router",[925,68981,68982],{},"The we run the router has changed as well.",[993,68984,68986],{"className":995,"code":68985,"language":997,"meta":998,"style":998},"Router.run(routes, (Handler) => {\n React.render(\u003CHandler \u002F>, document.body);\n});\n\n\u002F\u002F version 1.0\nimport { history } from 'react-router\u002Flib\u002FHashHistory';\nReact.render(\u003CRouter history={history}>{routes}\u003C\u002FRouter>, document.body);\n",[941,68987,68988,69004,69016,69020,69024,69028,69042],{"__ignoreMap":998},[1002,68989,68990,68992,68994,68996,68998,69000,69002],{"class":1004,"line":1005},[1002,68991,65507],{"class":1030},[1002,68993,2061],{"class":1026},[1002,68995,65512],{"class":1030},[1002,68997,65515],{"class":2378},[1002,68999,5876],{"class":1030},[1002,69001,15497],{"class":1015},[1002,69003,1457],{"class":1030},[1002,69005,69006,69008,69010,69012,69014],{"class":1004,"line":1012},[1002,69007,65526],{"class":1030},[1002,69009,19545],{"class":1026},[1002,69011,21269],{"class":1030},[1002,69013,65515],{"class":1019},[1002,69015,65535],{"class":1030},[1002,69017,69018],{"class":1004,"line":1047},[1002,69019,2804],{"class":1030},[1002,69021,69022],{"class":1004,"line":1054},[1002,69023,1051],{"emptyLinePlaceholder":1050},[1002,69025,69026],{"class":1004,"line":1060},[1002,69027,68089],{"class":1008},[1002,69029,69030,69032,69035,69037,69040],{"class":1004,"line":1272},[1002,69031,943],{"class":1015},[1002,69033,69034],{"class":1030}," { history } ",[1002,69036,1068],{"class":1015},[1002,69038,69039],{"class":1034}," 'react-router\u002Flib\u002FHashHistory'",[1002,69041,1407],{"class":1030},[1002,69043,69044,69046,69048,69050,69053,69056,69058,69061,69063],{"class":1004,"line":1348},[1002,69045,19291],{"class":1030},[1002,69047,19545],{"class":1026},[1002,69049,21269],{"class":1030},[1002,69051,69052],{"class":1019},"Router",[1002,69054,69055],{"class":1026}," history",[1002,69057,2393],{"class":1015},[1002,69059,69060],{"class":1030},"{history}>{routes}\u003C\u002F",[1002,69062,69052],{"class":1019},[1002,69064,69065],{"class":1030},">, document.body);\n",[1655,69067,69069],{"id":69068},"history-options","History options",[925,69071,69072],{},"The history options have chnages as well.",[993,69074,69076],{"className":995,"code":69075,"language":997,"meta":998,"style":998},"import { history } from 'react-router\u002Flib\u002FHashHistory';\nimport { history } from 'react-router\u002Flib\u002FBrowserHistory';\nimport { history } from 'react-router\u002Flib\u002FMemoryHistory';\n",[941,69077,69078,69090,69103],{"__ignoreMap":998},[1002,69079,69080,69082,69084,69086,69088],{"class":1004,"line":1005},[1002,69081,943],{"class":1015},[1002,69083,69034],{"class":1030},[1002,69085,1068],{"class":1015},[1002,69087,69039],{"class":1034},[1002,69089,1407],{"class":1030},[1002,69091,69092,69094,69096,69098,69101],{"class":1004,"line":1012},[1002,69093,943],{"class":1015},[1002,69095,69034],{"class":1030},[1002,69097,1068],{"class":1015},[1002,69099,69100],{"class":1034}," 'react-router\u002Flib\u002FBrowserHistory'",[1002,69102,1407],{"class":1030},[1002,69104,69105,69107,69109,69111,69114],{"class":1004,"line":1047},[1002,69106,943],{"class":1015},[1002,69108,69034],{"class":1030},[1002,69110,1068],{"class":1015},[1002,69112,69113],{"class":1034}," 'react-router\u002Flib\u002FMemoryHistory'",[1002,69115,1407],{"class":1030},[1655,69117,69119],{"id":69118},"createhref-not-makehref","createHref not makeHref",[925,69121,69122],{},"Instead of using makeHref, now we have params in the link.",[993,69124,69126],{"className":995,"code":69125,"language":997,"meta":998,"style":998},"const link = this.context.router.makeHref(\n 'user',\n { userId: 1234 },\n { message: 'Hi' },\n);\n\n\u002F\u002F version 1.0\nconst link = this.context.router.createHref('\u002Fuser\u002F1234', { message: 'Hi' });\n",[941,69127,69128,69144,69151,69160,69169,69173,69177,69181],{"__ignoreMap":998},[1002,69129,69130,69132,69134,69136,69138,69140,69142],{"class":1004,"line":1005},[1002,69131,1016],{"class":1015},[1002,69133,67241],{"class":1019},[1002,69135,1023],{"class":1015},[1002,69137,2693],{"class":1019},[1002,69139,66260],{"class":1030},[1002,69141,67168],{"class":1026},[1002,69143,10468],{"class":1030},[1002,69145,69146,69149],{"class":1004,"line":1012},[1002,69147,69148],{"class":1034}," 'user'",[1002,69150,1143],{"class":1030},[1002,69152,69153,69156,69158],{"class":1004,"line":1047},[1002,69154,69155],{"class":1030}," { userId: ",[1002,69157,67109],{"class":1019},[1002,69159,33835],{"class":1030},[1002,69161,69162,69165,69167],{"class":1004,"line":1054},[1002,69163,69164],{"class":1030}," { message: ",[1002,69166,67140],{"class":1034},[1002,69168,33835],{"class":1030},[1002,69170,69171],{"class":1004,"line":1060},[1002,69172,1085],{"class":1030},[1002,69174,69175],{"class":1004,"line":1272},[1002,69176,1051],{"emptyLinePlaceholder":1050},[1002,69178,69179],{"class":1004,"line":1348},[1002,69180,68089],{"class":1008},[1002,69182,69183,69185,69187,69189,69191,69193,69196,69198,69201,69204,69206],{"class":1004,"line":1354},[1002,69184,1016],{"class":1015},[1002,69186,67241],{"class":1019},[1002,69188,1023],{"class":1015},[1002,69190,2693],{"class":1019},[1002,69192,66260],{"class":1030},[1002,69194,69195],{"class":1026},"createHref",[1002,69197,1031],{"class":1030},[1002,69199,69200],{"class":1034},"'\u002Fuser\u002F1234'",[1002,69202,69203],{"class":1030},", { message: ",[1002,69205,67140],{"class":1034},[1002,69207,28417],{"class":1030},[1655,69209,69211],{"id":69210},"link-component","Link component",[925,69213,69214],{},"Link components also incorporate params in the link.",[993,69216,69218],{"className":995,"code":69217,"language":997,"meta":998,"style":998},"\u003CLink to=\"user\" params={{userId: MY_ID}}>John Doe\u003C\u002FLink>\n\n\u002F\u002F version 1.0\n\u003CLink to={'\u002Fusers\u002F'} + MY_ID}>John Doe\u003C\u002FLink>\n",[941,69219,69220,69247,69251,69255],{"__ignoreMap":998},[1002,69221,69222,69224,69226,69228,69230,69232,69234,69236,69238,69240,69243,69245],{"class":1004,"line":1005},[1002,69223,6539],{"class":1030},[1002,69225,66921],{"class":1019},[1002,69227,65142],{"class":1026},[1002,69229,2393],{"class":1015},[1002,69231,64954],{"class":1034},[1002,69233,65246],{"class":1026},[1002,69235,2393],{"class":1015},[1002,69237,67106],{"class":1030},[1002,69239,65254],{"class":1019},[1002,69241,69242],{"class":1030},"}}>John Doe\u003C\u002F",[1002,69244,66921],{"class":1019},[1002,69246,15703],{"class":1030},[1002,69248,69249],{"class":1004,"line":1012},[1002,69250,1051],{"emptyLinePlaceholder":1050},[1002,69252,69253],{"class":1004,"line":1047},[1002,69254,68089],{"class":1008},[1002,69256,69257,69259,69261,69263,69265,69267,69270,69272,69274,69277],{"class":1004,"line":1054},[1002,69258,6539],{"class":1030},[1002,69260,66921],{"class":1019},[1002,69262,65142],{"class":1026},[1002,69264,2393],{"class":1015},[1002,69266,22192],{"class":1030},[1002,69268,69269],{"class":1034},"'\u002Fusers\u002F'",[1002,69271,23716],{"class":1030},[1002,69273,5064],{"class":18541},[1002,69275,69276],{"class":18541}," MY_ID}>John",[1002,69278,69279],{"class":18541}," Doe\u003C\u002FLink>\n",[1655,69281,67400],{"id":69282},"transitionto",[925,69284,69285,69286,69288],{},"The parameters have changed for ",[941,69287,67400],{}," in version 1.0.",[993,69290,69292],{"className":995,"code":69291,"language":997,"meta":998,"style":998},"\u002F\u002F transitionTo(pathname, params, query)\nthis.context.router.transitionTo('user', { userId: 1234 }, { message: 'Hi' });\n\n\u002F\u002F version 1.0\n\n\u002F\u002F transitionTo(pathname, query, state)\nthis.context.router.transitionTo('\u002Fuser\u002F1234', { message: 'Hi' });\n",[941,69293,69294,69299,69323,69327,69331,69335,69340],{"__ignoreMap":998},[1002,69295,69296],{"class":1004,"line":1005},[1002,69297,69298],{"class":1008},"\u002F\u002F transitionTo(pathname, params, query)\n",[1002,69300,69301,69303,69305,69307,69309,69311,69314,69316,69319,69321],{"class":1004,"line":1012},[1002,69302,3455],{"class":1019},[1002,69304,66260],{"class":1030},[1002,69306,67400],{"class":1026},[1002,69308,1031],{"class":1030},[1002,69310,37780],{"class":1034},[1002,69312,69313],{"class":1030},", { userId: ",[1002,69315,67109],{"class":1019},[1002,69317,69318],{"class":1030}," }, { message: ",[1002,69320,67140],{"class":1034},[1002,69322,28417],{"class":1030},[1002,69324,69325],{"class":1004,"line":1047},[1002,69326,1051],{"emptyLinePlaceholder":1050},[1002,69328,69329],{"class":1004,"line":1054},[1002,69330,68089],{"class":1008},[1002,69332,69333],{"class":1004,"line":1060},[1002,69334,1051],{"emptyLinePlaceholder":1050},[1002,69336,69337],{"class":1004,"line":1272},[1002,69338,69339],{"class":1008},"\u002F\u002F transitionTo(pathname, query, state)\n",[1002,69341,69342,69344,69346,69348,69350,69352,69354,69356],{"class":1004,"line":1348},[1002,69343,3455],{"class":1019},[1002,69345,66260],{"class":1030},[1002,69347,67400],{"class":1026},[1002,69349,1031],{"class":1030},[1002,69351,69200],{"class":1034},[1002,69353,69203],{"class":1030},[1002,69355,67140],{"class":1034},[1002,69357,28417],{"class":1030},[1655,69359,69361],{"id":69360},"willtransitionto-and-willtransitionform","willTransitionTo and willTransitionForm",[925,69363,69364,69365,2034,69368,69371],{},"Instead of above functions, version 1.0 uses ",[941,69366,69367],{},"onEnter",[941,69369,69370],{},"onLeave"," respectively.",[993,69373,69375],{"className":995,"code":69374,"language":997,"meta":998,"style":998},"function requireAuth(nextState, transition) {\n ...\n}\n\nfunction handler(nextState, transition) {\n ...\n}\n\nconst routes = (\n \u003CRoute component={App} path=\"\u002F\">\n \u003CRoute path=\"about\" component={About} onEnter={requireAuth}\n onLeave={handler}\u002F>\n \u003C\u002FRoute>\n);\n",[941,69376,69377,69395,69399,69403,69407,69423,69427,69431,69435,69445,69465,69491,69501,69509],{"__ignoreMap":998},[1002,69378,69379,69381,69384,69386,69389,69391,69393],{"class":1004,"line":1005},[1002,69380,6965],{"class":1015},[1002,69382,69383],{"class":1026}," requireAuth",[1002,69385,1031],{"class":1030},[1002,69387,69388],{"class":2378},"nextState",[1002,69390,1251],{"class":1030},[1002,69392,67913],{"class":2378},[1002,69394,2382],{"class":1030},[1002,69396,69397],{"class":1004,"line":1012},[1002,69398,18213],{"class":1015},[1002,69400,69401],{"class":1004,"line":1047},[1002,69402,1170],{"class":1030},[1002,69404,69405],{"class":1004,"line":1054},[1002,69406,1051],{"emptyLinePlaceholder":1050},[1002,69408,69409,69411,69413,69415,69417,69419,69421],{"class":1004,"line":1060},[1002,69410,6965],{"class":1015},[1002,69412,64353],{"class":1026},[1002,69414,1031],{"class":1030},[1002,69416,69388],{"class":2378},[1002,69418,1251],{"class":1030},[1002,69420,67913],{"class":2378},[1002,69422,2382],{"class":1030},[1002,69424,69425],{"class":1004,"line":1272},[1002,69426,18213],{"class":1015},[1002,69428,69429],{"class":1004,"line":1348},[1002,69430,1170],{"class":1030},[1002,69432,69433],{"class":1004,"line":1354},[1002,69434,1051],{"emptyLinePlaceholder":1050},[1002,69436,69437,69439,69441,69443],{"class":1004,"line":1360},[1002,69438,1016],{"class":1015},[1002,69440,64339],{"class":1026},[1002,69442,1023],{"class":1015},[1002,69444,15692],{"class":1030},[1002,69446,69447,69449,69451,69453,69455,69457,69459,69461,69463],{"class":1004,"line":1366},[1002,69448,22427],{"class":1030},[1002,69450,64350],{"class":1019},[1002,69452,68134],{"class":1026},[1002,69454,2393],{"class":1015},[1002,69456,64358],{"class":1030},[1002,69458,64361],{"class":1026},[1002,69460,2393],{"class":1015},[1002,69462,64366],{"class":1034},[1002,69464,15703],{"class":1030},[1002,69466,69467,69469,69471,69473,69475,69477,69479,69481,69484,69486,69488],{"class":1004,"line":1946},[1002,69468,15697],{"class":1030},[1002,69470,64350],{"class":1019},[1002,69472,19031],{"class":1026},[1002,69474,2393],{"class":1015},[1002,69476,64381],{"class":1034},[1002,69478,68134],{"class":1026},[1002,69480,2393],{"class":1015},[1002,69482,69483],{"class":1030},"{About} ",[1002,69485,69367],{"class":1026},[1002,69487,2393],{"class":1015},[1002,69489,69490],{"class":1030},"{requireAuth}\n",[1002,69492,69493,69496,69498],{"class":1004,"line":1956},[1002,69494,69495],{"class":1026}," onLeave",[1002,69497,2393],{"class":1015},[1002,69499,69500],{"class":1030},"{handler}\u002F>\n",[1002,69502,69503,69505,69507],{"class":1004,"line":1961},[1002,69504,28112],{"class":1030},[1002,69506,64350],{"class":1019},[1002,69508,15703],{"class":1030},[1002,69510,69511],{"class":1004,"line":1971},[1002,69512,1085],{"class":1030},[1655,69514,69516],{"id":69515},"routerwillleave","routerWillLeave",[925,69518,69519,69520,69523,69524,948],{},"Instead of ",[941,69521,69522],{},"willTransitionFrom",", you can use ",[941,69525,69516],{},[993,69527,69529],{"className":995,"code":69528,"language":997,"meta":998,"style":998},"class User extends React.Component {\n static willTransitionFrom(transition) {\n ...\n }\n ...\n}\n\n\u002F\u002F version 1.0\n\nclass User extends React.Component {\n static routerWillLeave(nextState, router) {\n ...\n }\n ...\n}\n",[941,69530,69531,69547,69560,69564,69568,69572,69576,69580,69584,69588,69604,69622,69626,69630,69634],{"__ignoreMap":998},[1002,69532,69533,69535,69537,69539,69541,69543,69545],{"class":1004,"line":1005},[1002,69534,2363],{"class":1015},[1002,69536,12502],{"class":1026},[1002,69538,3014],{"class":1015},[1002,69540,20112],{"class":1026},[1002,69542,948],{"class":1030},[1002,69544,20117],{"class":1026},[1002,69546,1457],{"class":1030},[1002,69548,69549,69551,69554,69556,69558],{"class":1004,"line":1012},[1002,69550,13506],{"class":1015},[1002,69552,69553],{"class":1026}," willTransitionFrom",[1002,69555,1031],{"class":1030},[1002,69557,67913],{"class":2378},[1002,69559,2382],{"class":1030},[1002,69561,69562],{"class":1004,"line":1047},[1002,69563,48894],{"class":1015},[1002,69565,69566],{"class":1004,"line":1054},[1002,69567,1269],{"class":1030},[1002,69569,69570],{"class":1004,"line":1060},[1002,69571,18213],{"class":1015},[1002,69573,69574],{"class":1004,"line":1272},[1002,69575,1170],{"class":1030},[1002,69577,69578],{"class":1004,"line":1348},[1002,69579,1051],{"emptyLinePlaceholder":1050},[1002,69581,69582],{"class":1004,"line":1354},[1002,69583,68089],{"class":1008},[1002,69585,69586],{"class":1004,"line":1360},[1002,69587,1051],{"emptyLinePlaceholder":1050},[1002,69589,69590,69592,69594,69596,69598,69600,69602],{"class":1004,"line":1366},[1002,69591,2363],{"class":1015},[1002,69593,12502],{"class":1026},[1002,69595,3014],{"class":1015},[1002,69597,20112],{"class":1026},[1002,69599,948],{"class":1030},[1002,69601,20117],{"class":1026},[1002,69603,1457],{"class":1030},[1002,69605,69606,69608,69611,69613,69615,69617,69620],{"class":1004,"line":1946},[1002,69607,13506],{"class":1015},[1002,69609,69610],{"class":1026}," routerWillLeave",[1002,69612,1031],{"class":1030},[1002,69614,69388],{"class":2378},[1002,69616,1251],{"class":1030},[1002,69618,69619],{"class":2378},"router",[1002,69621,2382],{"class":1030},[1002,69623,69624],{"class":1004,"line":1956},[1002,69625,48894],{"class":1015},[1002,69627,69628],{"class":1004,"line":1961},[1002,69629,1269],{"class":1030},[1002,69631,69632],{"class":1004,"line":1971},[1002,69633,18213],{"class":1015},[1002,69635,69636],{"class":1004,"line":1980},[1002,69637,1170],{"class":1030},[953,69639,8590],{"id":8589},[925,69641,69642],{},"Lastly, let's look at what has changed with the state in version 1.",[39742,69644,50962,69645],{},[39759,69646,69647,50962,69656,50962,69664,50962,69672,50962,69679,50962,69687,50962,69695],{},[39748,69648,69649,69650,69649,69653,50962],{},"\n ",[39751,69651,69652],{},"0.x",[39751,69654,69655],{},"1.x",[39748,69657,69649,69658,69649,69661,50962],{},[39764,69659,69660],{},"getPath()",[39764,69662,69663],{},"location.pathname + location.query",[39748,69665,69649,69666,69649,69669,50962],{},[39764,69667,69668],{},"getPathname()",[39764,69670,69671],{},"location.pathname",[39748,69673,69649,69674,69649,69677,50962],{},[39764,69675,69676],{},"getParams()",[39764,69678,24866],{},[39748,69680,69649,69681,69649,69684,50962],{},[39764,69682,69683],{},"getQuery()",[39764,69685,69686],{},"location.query",[39748,69688,69649,69689,69649,69692,50962],{},[39764,69690,69691],{},"getRoutes()",[39764,69693,69694],{},"routes",[39748,69696,69649,69697,69649,69700,50962],{},[39764,69698,69699],{},"isActive(to, params, query)",[39764,69701,69702],{},"history.isActive(pathname, query)",[953,69704,26561],{"id":26560},[925,69706,69707],{},"This article covered most of the routing scenarios you may come across and hopefully, you will find routing with React a breeze.",[1579,69709,69710],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":998,"searchDepth":1012,"depth":1012,"links":69712},[69713,69714,69715,69724,69729,69730,69735,69740,69741,69751,69754,69771,69772],{"id":64267,"depth":1012,"text":64268},{"id":32992,"depth":1012,"text":32993},{"id":64305,"depth":1012,"text":64306,"children":69716},[69717,69718,69719,69720,69721,69722,69723],{"id":64412,"depth":1047,"text":64413},{"id":64513,"depth":1047,"text":64514},{"id":64627,"depth":1047,"text":64628},{"id":64735,"depth":1047,"text":44766},{"id":64865,"depth":1047,"text":64866},{"id":65048,"depth":1047,"text":65049},{"id":65299,"depth":1047,"text":65300},{"id":65440,"depth":1012,"text":65441,"children":69725},[69726,69727,69728],{"id":65461,"depth":1047,"text":65462},{"id":65551,"depth":1047,"text":65452},{"id":65640,"depth":1047,"text":65455},{"id":65737,"depth":1012,"text":65738},{"id":65865,"depth":1012,"text":65866,"children":69731},[69732,69733,69734],{"id":65872,"depth":1047,"text":65873},{"id":220,"depth":1047,"text":65973},{"id":66071,"depth":1047,"text":66072},{"id":66171,"depth":1012,"text":66172,"children":69736},[69737,69738,69739],{"id":66175,"depth":1047,"text":66176},{"id":66296,"depth":1047,"text":66297},{"id":66417,"depth":1047,"text":66418},{"id":66523,"depth":1012,"text":66524},{"id":66825,"depth":1012,"text":66826,"children":69742},[69743,69744,69745,69746,69747,69748,69749,69750],{"id":66914,"depth":1047,"text":66915},{"id":67015,"depth":1047,"text":67016},{"id":67162,"depth":1047,"text":67163},{"id":67317,"depth":1047,"text":67318},{"id":67450,"depth":1047,"text":67451},{"id":67553,"depth":1047,"text":67554},{"id":67650,"depth":1047,"text":67651},{"id":67747,"depth":1047,"text":67748},{"id":67856,"depth":1012,"text":67857,"children":69752},[69753],{"id":67860,"depth":1047,"text":67861},{"id":67984,"depth":1012,"text":67985,"children":69755},[69756,69757,69758,69759,69760,69761,69762,69763,69764,69765,69766,69767,69768,69769,69770],{"id":67988,"depth":1047,"text":67989},{"id":68153,"depth":1047,"text":68154},{"id":68299,"depth":1047,"text":68300},{"id":68417,"depth":1047,"text":68418},{"id":68468,"depth":1047,"text":68469},{"id":68637,"depth":1047,"text":68638},{"id":68641,"depth":1047,"text":68642},{"id":68775,"depth":1047,"text":68776},{"id":68978,"depth":1047,"text":68979},{"id":69068,"depth":1047,"text":69069},{"id":69118,"depth":1047,"text":69119},{"id":69210,"depth":1047,"text":69211},{"id":69282,"depth":1047,"text":67400},{"id":69360,"depth":1047,"text":69361},{"id":69515,"depth":1047,"text":69516},{"id":8589,"depth":1012,"text":8590},{"id":26560,"depth":1012,"text":26561},"2016-01-17","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-router.jpg",{},{"title":698,"description":700},"blog\u002Freact-router",[16,17,140],"_WeznFOBlQOUtXX8nW-RD8aijXxrjxFP8-C1kAXw6p0",{"id":69781,"title":693,"author":920,"body":69782,"date":70212,"description":695,"extension":1591,"image":70213,"meta":70214,"navigation":1050,"path":694,"seo":70215,"stem":70216,"tags":70217,"__hash__":70218},"blog\u002Fblog\u002Freact-redux.md",{"type":922,"value":69783,"toc":70199},[69784,69787,69793,69797,69800,69803,69820,69824,69827,69841,69845,69851,69854,69931,69934,69940,69944,69949,69953,69956,69959,69962,69968,69981,70087,70093,70095,70108,70154,70158,70168,70171,70183,70185,70188,70196],[925,69785,69786],{},"Redux allows you to manage the state with a minimal API but completely predictable behaviour - a predictable state container for JavaScript apps.",[925,69788,69789,69790,948],{},"Redux is a Flux implementation but that does not use Flux. It is inspired by functional programming and immutability (Elm, Clojure) and written by ",[941,69791,69792],{},"Dan Abramov",[953,69794,69796],{"id":69795},"why-redux","Why Redux?",[925,69798,69799],{},"Redux makes you think of your application as an initial state being modified by a sequential list of actions. Redux enables tools like logging, hot reloading, time travel, record and replay with no extra work.",[925,69801,69802],{},"Redux is:",[1530,69804,69805,69808,69811,69814,69817],{},[974,69806,69807],{},"Simple, conceptually and in file size (2kb)",[974,69809,69810],{},"Has predictable state transitions",[974,69812,69813],{},"Single source of truth for UI state",[974,69815,69816],{},"Highly performant",[974,69818,69819],{},"Easily testable",[953,69821,69823],{"id":69822},"the-core-concepts-of-redux","The Core Concepts of Redux",[925,69825,69826],{},"To understand Redux, we will look into the following concepts:",[1530,69828,69829,69832,69835,69838],{},[974,69830,69831],{},"Actions and action creators",[974,69833,69834],{},"Reducers",[974,69836,69837],{},"Store",[974,69839,69840],{},"Middleware",[953,69842,69844],{"id":69843},"actions","Actions",[925,69846,69847,69848,948],{},"Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using ",[1107,69849,69850],{},"store.dispatch()",[925,69852,69853],{},"Actions at its core is a simple JavaScript object.",[993,69855,69857],{"className":995,"code":69856,"language":997,"meta":998,"style":998},"export addTodo = (todo) => {\n return {\n type: 'addTodo',\n todo\n }\n}\n\nexport deleteTodo = (index) => {\n return {\n type: 'deleteTodo',\n index\n }\n}\n",[941,69858,69859,69866,69871,69881,69886,69890,69894,69898,69905,69909,69918,69923,69927],{"__ignoreMap":998},[1002,69860,69861,69863],{"class":1004,"line":1005},[1002,69862,947],{"class":1015},[1002,69864,69865],{"class":1030}," addTodo = (todo) => {\n",[1002,69867,69868],{"class":1004,"line":1012},[1002,69869,69870],{"class":1030}," return {\n",[1002,69872,69873,69876,69879],{"class":1004,"line":1047},[1002,69874,69875],{"class":1030}," type: ",[1002,69877,69878],{"class":1034},"'addTodo'",[1002,69880,1143],{"class":1030},[1002,69882,69883],{"class":1004,"line":1054},[1002,69884,69885],{"class":1030}," todo\n",[1002,69887,69888],{"class":1004,"line":1060},[1002,69889,1269],{"class":1030},[1002,69891,69892],{"class":1004,"line":1272},[1002,69893,1170],{"class":1030},[1002,69895,69896],{"class":1004,"line":1348},[1002,69897,1051],{"emptyLinePlaceholder":1050},[1002,69899,69900,69902],{"class":1004,"line":1354},[1002,69901,947],{"class":1015},[1002,69903,69904],{"class":1030}," deleteTodo = (index) => {\n",[1002,69906,69907],{"class":1004,"line":1360},[1002,69908,69870],{"class":1030},[1002,69910,69911,69913,69916],{"class":1004,"line":1366},[1002,69912,69875],{"class":1030},[1002,69914,69915],{"class":1034},"'deleteTodo'",[1002,69917,1143],{"class":1030},[1002,69919,69920],{"class":1004,"line":1946},[1002,69921,69922],{"class":1030}," index\n",[1002,69924,69925],{"class":1004,"line":1956},[1002,69926,1269],{"class":1030},[1002,69928,69929],{"class":1004,"line":1961},[1002,69930,1170],{"class":1030},[1655,69932,69933],{"id":18462},"Type",[925,69935,69936,69937,69939],{},"The only the required field is ",[1107,69938,18462],{},". Only use constants for declaring types.",[1655,69941,69943],{"id":69942},"payload","Payload",[925,69945,3898,69946,69948],{},[1107,69947,69942],{}," generally carries your data.",[1655,69950,69952],{"id":69951},"action-creators","Action Creators",[925,69954,69955],{},"Action creators are the functions that return the body of an action.",[953,69957,69834],{"id":69958},"reducers",[925,69960,69961],{},"Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of a reducer. It updates the state according to those actions.",[925,69963,69964,69965,948],{},"Reducers are pure functions with the signature ",[1107,69966,69967],{},"(previousState, action) => newState",[7100,69969,69971],{"title":69970,"type":23379},"Time Travel",[925,69972,69973,69974,69977,69978,69980],{},"Make sure that you should never mutate the ",[941,69975,69976],{},"previousState"," in your reducer. Instead you can create a new object based on the ",[941,69979,69976],{}," properties. Otherwise bad things will happen (for starters you will break time travel).",[993,69982,69984],{"className":995,"code":69983,"language":997,"meta":998,"style":998},"import Immutable from 'immutable';\n\nexport default (state = Immutable.List(['Code More!']), action) => {\n switch (action.type) {\n case 'addTodo':\n return state.push(action.todo);\n default:\n return state;\n }\n};\n",[941,69985,69986,69999,70003,70036,70044,70054,70066,70073,70079,70083],{"__ignoreMap":998},[1002,69987,69988,69990,69992,69994,69997],{"class":1004,"line":1005},[1002,69989,943],{"class":1015},[1002,69991,51274],{"class":1030},[1002,69993,1068],{"class":1015},[1002,69995,69996],{"class":1034}," 'immutable'",[1002,69998,1407],{"class":1030},[1002,70000,70001],{"class":1004,"line":1012},[1002,70002,1051],{"emptyLinePlaceholder":1050},[1002,70004,70005,70007,70009,70011,70013,70015,70017,70019,70021,70024,70027,70030,70032,70034],{"class":1004,"line":1047},[1002,70006,947],{"class":1015},[1002,70008,15641],{"class":1015},[1002,70010,6513],{"class":1030},[1002,70012,8589],{"class":2378},[1002,70014,1023],{"class":1015},[1002,70016,51301],{"class":1030},[1002,70018,23271],{"class":1026},[1002,70020,30910],{"class":1030},[1002,70022,70023],{"class":1034},"'Code More!'",[1002,70025,70026],{"class":1030},"]), ",[1002,70028,70029],{"class":2378},"action",[1002,70031,5876],{"class":1030},[1002,70033,15497],{"class":1015},[1002,70035,1457],{"class":1030},[1002,70037,70038,70041],{"class":1004,"line":1054},[1002,70039,70040],{"class":1015}," switch",[1002,70042,70043],{"class":1030}," (action.type) {\n",[1002,70045,70046,70049,70052],{"class":1004,"line":1060},[1002,70047,70048],{"class":1015}," case",[1002,70050,70051],{"class":1034}," 'addTodo'",[1002,70053,2616],{"class":1030},[1002,70055,70056,70058,70061,70063],{"class":1004,"line":1272},[1002,70057,4376],{"class":1015},[1002,70059,70060],{"class":1030}," state.",[1002,70062,4974],{"class":1026},[1002,70064,70065],{"class":1030},"(action.todo);\n",[1002,70067,70068,70071],{"class":1004,"line":1348},[1002,70069,70070],{"class":1015}," default",[1002,70072,2616],{"class":1030},[1002,70074,70075,70077],{"class":1004,"line":1354},[1002,70076,4376],{"class":1015},[1002,70078,8988],{"class":1030},[1002,70080,70081],{"class":1004,"line":1360},[1002,70082,1269],{"class":1030},[1002,70084,70085],{"class":1004,"line":1366},[1002,70086,1517],{"class":1030},[925,70088,70089,70090,70092],{},"We are using the ",[1107,70091,51841],{}," package here to make sure that the state must be immutable.",[953,70094,69837],{"id":46453},[925,70096,70097,70098,36227,70101,70104,70105,70107],{},"Store is a wrapper around a JavaScript object (state).\nA store has two key methods: ",[1107,70099,70100],{},"getState",[1107,70102,70103],{},"dispatch",".\nIf you are using something like ",[941,70106,36885],{},", you don’t have to deal with these functions directly.",[993,70109,70111],{"className":995,"code":70110,"language":997,"meta":998,"style":998},"import { createStore } from 'redux';\nimport todos from '.\u002Freducers\u002Ftodos';\n\nexport default createStore(todos);\n",[941,70112,70113,70126,70139,70143],{"__ignoreMap":998},[1002,70114,70115,70117,70120,70122,70124],{"class":1004,"line":1005},[1002,70116,943],{"class":1015},[1002,70118,70119],{"class":1030}," { createStore } ",[1002,70121,1068],{"class":1015},[1002,70123,37707],{"class":1034},[1002,70125,1407],{"class":1030},[1002,70127,70128,70130,70132,70134,70137],{"class":1004,"line":1012},[1002,70129,943],{"class":1015},[1002,70131,52555],{"class":1030},[1002,70133,1068],{"class":1015},[1002,70135,70136],{"class":1034}," '.\u002Freducers\u002Ftodos'",[1002,70138,1407],{"class":1030},[1002,70140,70141],{"class":1004,"line":1047},[1002,70142,1051],{"emptyLinePlaceholder":1050},[1002,70144,70145,70147,70149,70152],{"class":1004,"line":1054},[1002,70146,947],{"class":1015},[1002,70148,15641],{"class":1015},[1002,70150,70151],{"class":1026}," createStore",[1002,70153,52982],{"class":1030},[953,70155,70157],{"id":70156},"middelware","Middelware",[925,70159,70160,70161,16529,70164,70167],{},"If you are familiar with Node.js middleware like ",[941,70162,70163],{},"Express",[941,70165,70166],{},"Koa",", Redux middleware works similar to them except, it solves different problems.",[925,70169,70170],{},"It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.",[925,70172,70173,70174,1251,70177,2034,70180,948],{},"Recommended middleware: ",[941,70175,70176],{},"thunk",[941,70178,70179],{},"redux-promise",[941,70181,70182],{},"batched-updates",[953,70184,26561],{"id":26560},[925,70186,70187],{},"Redux is powerful for building predictable, testable, maintainable interfaces. Redux makes you a better UI engineer by forcing you to handle state changes explicitly.",[925,70189,70190,70191],{},"You can find the source code in Github: ",[933,70192,70195],{"href":70193,"rel":70194},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Freact-redux",[937],"React Redux",[1579,70197,70198],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":998,"searchDepth":1012,"depth":1012,"links":70200},[70201,70202,70203,70208,70209,70210,70211],{"id":69795,"depth":1012,"text":69796},{"id":69822,"depth":1012,"text":69823},{"id":69843,"depth":1012,"text":69844,"children":70204},[70205,70206,70207],{"id":18462,"depth":1047,"text":69933},{"id":69942,"depth":1047,"text":69943},{"id":69951,"depth":1047,"text":69952},{"id":69958,"depth":1012,"text":69834},{"id":46453,"depth":1012,"text":69837},{"id":70156,"depth":1012,"text":70157},{"id":26560,"depth":1012,"text":26561},"2016-01-07","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-redux.jpg",{},{"title":693,"description":695},"blog\u002Freact-redux",[16,17,140],"MhD9MdyZuKMpwfBvv22d9pxkIoDOcBS7Okq1vb60H6c",{"id":70220,"title":845,"author":920,"body":70221,"date":70422,"description":847,"extension":1591,"image":70423,"meta":70424,"navigation":1050,"path":846,"seo":70425,"stem":70426,"tags":70427,"__hash__":70428},"blog\u002Fblog\u002Fthink-react.md",{"type":922,"value":70222,"toc":70409},[70223,70227,70239,70243,70246,70259,70262,70265,70268,70271,70274,70281,70284,70294,70307,70311,70314,70317,70328,70331,70334,70337,70339,70342,70345,70348,70359,70361,70367,70370,70373,70387,70393,70397,70400,70402],[953,70224,70226],{"id":70225},"why-react","Why React?",[925,70228,70229,70230,70232,70233,2034,70235,70238],{},"React combines DOM generation and display logic. It is designed to re-render the whole app on every update via ",[941,70231,8589],{},", and its implementation consists of ",[941,70234,26662],{},[941,70236,70237],{},"synthetic events",". These best practices make React a powerful tool for developing your web applications.",[953,70240,70242],{"id":70241},"build-components-not-templates","Build Components, Not Templates",[925,70244,70245],{},"Templates encourage a poor separation of concerns, as templates separate technologies, not concerns.",[7100,70247,70249],{"title":70248,"type":24048},"Separation of Concerns",[925,70250,70251,70252,70255,70256,948],{},"Reduce ",[941,70253,70254],{},"coupling",", increase ",[941,70257,70258],{},"cohesion",[925,70260,70261],{},"What is coupling and what is cohesion?",[1655,70263,70264],{"id":70254},"Coupling",[925,70266,70267],{},"The degree to which each program module relies on each of the other modules.",[1655,70269,70270],{"id":70258},"Cohesion",[925,70272,70273],{},"The degree to which elements of a module belong together.",[925,70275,70276,70277,70280],{},"Templates encourage a poor separation of concerns. Angular style directives are a good example of this. The ",[941,70278,70279],{},"View Model"," tightly couples template to display logic. This is mentioned in Angular docs:",[925,70282,70283],{},"However isolated scope creates a new problem: if a transcluded DOM is a child of the widget isolated scope then it will not be able to bind to anything. For this reason the transcluded scope is a child of the original scope, before the widget created an isolated scope for its local variables. This makes the transcluded and widget isolated scope siblings.",[925,70285,70286,70287,70290,70291,948],{},"The framework cannot know how to separate your concerns for you. It should only provide powerful ",[941,70288,70289],{},"expressive tools"," for the user to do it correctly. Enter ",[941,70292,70293],{},"React component",[7100,70295,70297],{"title":70296,"type":24048},"React Component",[925,70298,20721,70299,70302,70303,70306],{},[941,70300,70301],{},"highly cohesive"," building block for UIs ",[941,70304,70305],{},"loosely coupled"," with other components.",[953,70308,70310],{"id":70309},"why-components","Why Components?",[925,70312,70313],{},"Instead of templates, we can use components to separate your concerns. In React these components are written in JavaScript, which is highly powerful.",[925,70315,70316],{},"Components are:",[1530,70318,70319,70322,70325],{},[974,70320,70321],{},"Reusable",[974,70323,70324],{},"Composable",[974,70326,70327],{},"Unit testable",[925,70329,70330],{},"Make components small and only put display logic in your components.",[953,70332,70333],{"id":2229},"JSX",[925,70335,70336],{},"JSX is an optional preprocessor to let you use HTML-like syntax. With JSX, it's easy for designers to contribute code.",[953,70338,8590],{"id":8589},[925,70340,70341],{},"Re-rendering the whole app on every update makes React stand out from other front-end libraries\u002Fframeworks.",[925,70343,70344],{},"Data changing over time can make it really difficult for the front-end developer. When data changes, React re-renders the entire component.So the React components describe your UI at any point in time, just like a server-rendered app. This means every place data is displayed is guaranteed to be up-to date.",[925,70346,70347],{},"State means:",[1530,70349,70350,70353,70356],{},[974,70351,70352],{},"No magical data binding.",[974,70354,70355],{},"No more explicit DOM operations - everything is declarative.",[974,70357,70358],{},"No model dirty checking.",[953,70360,26662],{"id":47981},[925,70362,70363,70364,70366],{},"You can’t just throw out the DOM and rebuild it on each update. It’s too slow and you’ll lose form state and scroll position. So Facebook built a ",[941,70365,26662],{}," and events system.",[925,70368,70369],{},"It is optimized for performance and memory footprint. Let's look how React use virtual DOM.",[925,70371,70372],{},"On every update to the component, React:",[1530,70374,70375,70378,70381,70384],{},[974,70376,70377],{},"Builds a new virtual DOM subtree",[974,70379,70380],{},"Diffs it with the old one",[974,70382,70383],{},"Computes the minimal set of DOM mutations and puts them in a queue",[974,70385,70386],{},"And batch executes all updates",[7100,70388,70390],{"title":70389,"type":24048},"Virtual DOM is fast",[925,70391,70392],{},"Because it computes minimal DOM operations and batches reads and writes for optimal DOM performance it is usually faster than manual DOM operations at 60fps. It also implements automatic top-level event delegation (with cross-browser HTML5 events).",[953,70394,70396],{"id":70395},"react-nodejs","React & Node.js",[925,70398,70399],{},"React can run in Node.js (new in 0.4) with optimizations based on app structure",[953,70401,26561],{"id":26560},[925,70403,70404,70405,70408],{},"React also has SVG, VML and ",[941,70406,70407],{},"\u003Ccanvas>"," support, and can run the whole app in a Web Worker(experimental). So think React, think components not templates, re-render, don't mutate.",{"title":998,"searchDepth":1012,"depth":1012,"links":70410},[70411,70412,70416,70417,70418,70419,70420,70421],{"id":70225,"depth":1012,"text":70226},{"id":70241,"depth":1012,"text":70242,"children":70413},[70414,70415],{"id":70254,"depth":1047,"text":70264},{"id":70258,"depth":1047,"text":70270},{"id":70309,"depth":1012,"text":70310},{"id":2229,"depth":1012,"text":70333},{"id":8589,"depth":1012,"text":8590},{"id":47981,"depth":1012,"text":26662},{"id":70395,"depth":1012,"text":70396},{"id":26560,"depth":1012,"text":26561},"2016-01-03","\u002Fimages\u002Fblog\u002Ffeatures\u002Fthink-react.jpg",{},{"title":845,"description":847},"blog\u002Fthink-react",[16,17,140],"rvwyow8YnBJExN-7B6KpNiPPMSaCJJ-QKTkAowUBpic",{"id":70430,"title":626,"author":920,"body":70431,"date":70765,"description":628,"extension":1591,"image":70766,"meta":70767,"navigation":1050,"path":627,"seo":70768,"stem":70769,"tags":70770,"__hash__":70771},"blog\u002Fblog\u002Fpostcss.md",{"type":922,"value":70432,"toc":70742},[70433,70444,70450,70454,70457,70480,70486,70490,70493,70497,70502,70512,70518,70523,70527,70533,70539,70545,70550,70554,70560,70565,70571,70576,70580,70586,70591,70595,70598,70601,70607,70611,70614,70617,70621,70624,70734,70736,70739],[925,70434,70435,70436,70439,70440,70443],{},"PostCSS is can be a tool that refers itself as ",[941,70437,70438],{},"PostCSS"," and also can be the ecosystem powerted by that tool. PostCSS the tool is a Node.js module that parses CSS into an abstract syntax tree (AST), passes that AST through any number of ",[941,70441,70442],{},"plugin"," functions and then converts that AST back into a string, which you can output to a file.",[925,70445,70446,70449],{},[941,70447,70448],{},"Autoprefixer"," is one of the most popular PostCSS plugins. PostCSS has over 200 plugins.",[953,70451,70453],{"id":70452},"why-postcss","Why PostCSS?",[925,70455,70456],{},"Let's look at why PostCSS can become very useful to your day today workflow.",[1530,70458,50962,70459,50962,70462,50962,70465,50962,70468,50962,70471,50962,70474,50962,70477],{},[974,70460,70461],{},"PostCSS provides diverse functionality available via its plugin ecosystem.",[974,70463,70464],{},"The option to use it with regular CSS",[974,70466,70467],{},"Its modular",[974,70469,70470],{},"Its rapid compilation time",[974,70472,70473],{},"The ability to create libraries that don’t depend on one pre-processor",[974,70475,70476],{},"The accessibility of creating your own plugins",[974,70478,70479],{},"Its seamless deployment with many popular build tools",[7100,70481,70483],{"title":70482,"type":23379},"PostCSS is Neither a pre-processor nor a post-processor",[925,70484,70485],{},"Post processing or taking a finished stylesheet comprising valid CSS syntax and processing it, to do things like adding vendor prefixes. However PostCSS is not restricted to operating solely in this way. It can behave like a pre-processor too which makes it a processor.",[953,70487,70489],{"id":70488},"plugin-ecosystem","Plugin Ecosystem",[925,70491,70492],{},"PostCSS plugins can vary from media queries to future syntax. Let's look at some of these categories.",[953,70494,70496],{"id":70495},"future-css","Future CSS",[1655,70498,70500],{"id":70499},"autoprefixer",[941,70501,70448],{},[925,70503,3898,70504,70506,70507],{},[1107,70505,70499],{}," plugin adds vendor prefixes, using data from ",[933,70508,70511],{"href":70509,"rel":70510},"http:\u002F\u002Fcaniuse.com",[937],"Can I Use",[1655,70513,70515],{"id":70514},"cssnext",[941,70516,70517],{},"CSSNext",[925,70519,3898,70520,70522],{},[1107,70521,70514],{}," plugin allows you to use future CSS features today.",[953,70524,70526],{"id":70525},"syntax-sugar","Syntax Sugar",[1655,70528,70530],{"id":70529},"prescss",[941,70531,70532],{},"PresCSS",[925,70534,3898,70535,70538],{},[1107,70536,70537],{},"precss"," tool contains plugins for Sass-like features like nesting or mixins.",[1655,70540,70542],{"id":70541},"short",[941,70543,70544],{},"Short",[925,70546,3898,70547,70549],{},[1107,70548,70541],{}," plugin adds and extends numerous shorthand properties.",[953,70551,70553],{"id":70552},"images-and-fonts","Images and Fonts",[1655,70555,70557],{"id":70556},"postcss-assets",[941,70558,70559],{},"PostCSS Assets",[925,70561,3898,70562,70564],{},[1107,70563,70556],{}," plugin inserts image dimensions and inlines files.",[1655,70566,70568],{"id":70567},"postcss-sprites",[941,70569,70570],{},"PostCSS Sprites",[925,70572,3898,70573,70575],{},[1107,70574,70567],{}," plugin generates image sprites.",[953,70577,70579],{"id":70578},"linters","Linters",[1655,70581,70583],{"id":70582},"style-lint",[941,70584,70585],{},"Style Lint",[925,70587,3898,70588,70590],{},[1107,70589,24065],{}," plugin is a modular linter for CSS.",[953,70592,70594],{"id":70593},"speed","Speed",[925,70596,70597],{},"PostCSS is topping the test rankings when it comes to speed of loading. It runs on JavaScript and you only have to load the plugins you need.",[925,70599,70600],{},"According to PostCSS, the results of such a test produced following results:",[993,70602,70605],{"className":70603,"code":70604,"language":24241},[24239],"PostCSS: 40 ms\nRework: 75 ms (1.9 times slower)\nlibsass: 76 ms (1.9 times slower)\nLess: 147 ms (3.7 times slower)\nStylus: 166 ms (4.1 times slower)\nStylecow: 258 ms (6.4 times slower)\nRuby Sass: 1042 ms (26.0 times slower)\n",[941,70606,70604],{"__ignoreMap":998},[953,70608,70610],{"id":70609},"create-your-own-plugins","Create Your Own Plugins",[925,70612,70613],{},"Plugins for PostCSS are written in JavaScript, and as such anyone who can write JavaScript can create a plugin for any purpose they want.",[925,70615,70616],{},"Preprocessor projects like Stylus, Sass and LESS are great but they can’t be everything to everyone. With PostCSS on the other hand, if you want a new feature, you can go ahead and make it.",[953,70618,70620],{"id":70619},"using-postcss-plugins-in-webpack","Using PostCSS Plugins in Webpack",[925,70622,70623],{},"In your config file for Webpack, you can add a property for PostCSS as below:",[993,70625,70627],{"className":995,"code":70626,"language":997,"meta":998,"style":998},"module.exports = {\n module: {\n loaders: [\n {\n test: \u002F\\.css$\u002F,\n loader: 'style-loader!css-loader!postcss-loader',\n },\n ],\n },\n postcss: function () {\n return [require('autoprefixer'), require('precss')];\n },\n};\n",[941,70628,70629,70641,70645,70649,70653,70669,70678,70682,70686,70690,70701,70726,70730],{"__ignoreMap":998},[1002,70630,70631,70633,70635,70637,70639],{"class":1004,"line":1005},[1002,70632,1227],{"class":1019},[1002,70634,948],{"class":1030},[1002,70636,1452],{"class":1019},[1002,70638,1023],{"class":1015},[1002,70640,1457],{"class":1030},[1002,70642,70643],{"class":1004,"line":1012},[1002,70644,33464],{"class":1030},[1002,70646,70647],{"class":1004,"line":1047},[1002,70648,33469],{"class":1030},[1002,70650,70651],{"class":1004,"line":1054},[1002,70652,1336],{"class":1030},[1002,70654,70655,70657,70659,70661,70663,70665,70667],{"class":1004,"line":1060},[1002,70656,33478],{"class":1030},[1002,70658,33481],{"class":1034},[1002,70660,33485],{"class":33484},[1002,70662,29],{"class":33488},[1002,70664,15864],{"class":1015},[1002,70666,4685],{"class":1034},[1002,70668,1143],{"class":1030},[1002,70670,70671,70673,70676],{"class":1004,"line":1272},[1002,70672,33520],{"class":1030},[1002,70674,70675],{"class":1034},"'style-loader!css-loader!postcss-loader'",[1002,70677,1143],{"class":1030},[1002,70679,70680],{"class":1004,"line":1348},[1002,70681,1922],{"class":1030},[1002,70683,70684],{"class":1004,"line":1354},[1002,70685,33564],{"class":1030},[1002,70687,70688],{"class":1004,"line":1360},[1002,70689,1502],{"class":1030},[1002,70691,70692,70695,70697,70699],{"class":1004,"line":1366},[1002,70693,70694],{"class":1026}," postcss",[1002,70696,1137],{"class":1030},[1002,70698,6965],{"class":1015},[1002,70700,9772],{"class":1030},[1002,70702,70703,70705,70707,70709,70711,70714,70716,70718,70720,70723],{"class":1004,"line":1946},[1002,70704,2687],{"class":1015},[1002,70706,1897],{"class":1030},[1002,70708,1294],{"class":1026},[1002,70710,1031],{"class":1030},[1002,70712,70713],{"class":1034},"'autoprefixer'",[1002,70715,38570],{"class":1030},[1002,70717,1294],{"class":1026},[1002,70719,1031],{"class":1030},[1002,70721,70722],{"class":1034},"'precss'",[1002,70724,70725],{"class":1030},")];\n",[1002,70727,70728],{"class":1004,"line":1956},[1002,70729,1502],{"class":1030},[1002,70731,70732],{"class":1004,"line":1961},[1002,70733,1517],{"class":1030},[953,70735,26561],{"id":26560},[925,70737,70738],{},"Working with PostCSS may convince you that CSS processing exists to solve problems; that pretty much all problems have multiple solutions; and that you might be qualified to pick between alternative solutions, or even construct your own.",[1579,70740,70741],{},"html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":70743},[70744,70745,70746,70750,70754,70758,70761,70762,70763,70764],{"id":70452,"depth":1012,"text":70453},{"id":70488,"depth":1012,"text":70489},{"id":70495,"depth":1012,"text":70496,"children":70747},[70748,70749],{"id":70499,"depth":1047,"text":70448},{"id":70514,"depth":1047,"text":70517},{"id":70525,"depth":1012,"text":70526,"children":70751},[70752,70753],{"id":70529,"depth":1047,"text":70532},{"id":70541,"depth":1047,"text":70544},{"id":70552,"depth":1012,"text":70553,"children":70755},[70756,70757],{"id":70556,"depth":1047,"text":70559},{"id":70567,"depth":1047,"text":70570},{"id":70578,"depth":1012,"text":70579,"children":70759},[70760],{"id":70582,"depth":1047,"text":70585},{"id":70593,"depth":1012,"text":70594},{"id":70609,"depth":1012,"text":70610},{"id":70619,"depth":1012,"text":70620},{"id":26560,"depth":1012,"text":26561},"2015-12-31","\u002Fimages\u002Fblog\u002Ffeatures\u002Fpostcss.jpg",{},{"title":626,"description":628},"blog\u002Fpostcss",[16,29],"hSBJs4lXN1EN0vskUBF2zek2EpbXzakFg6Hxh2H9ZjY",{"id":70773,"title":809,"author":920,"body":70774,"date":71240,"description":811,"extension":1591,"image":71241,"meta":71242,"navigation":1050,"path":810,"seo":71243,"stem":71244,"tags":71245,"__hash__":71246},"blog\u002Fblog\u002Fsmacss.md",{"type":922,"value":70775,"toc":71230},[70776,70780,70785,70796,70802,70806,70809,70839,70842,70846,70849,70889,70892,70895,70904,70957,70967,70970,70973,70990,70997,71000,71055,71057,71060,71138,71140,71143,71199,71202,71222,71224,71227],[953,70777,70779],{"id":70778},"why-smacss","Why SMACSS?",[925,70781,70782,70784],{},[941,70783,809],{}," is a design guideline, and not a rigid framework. SMACSS is an attempt to document a consistent approach to site development when using CSS. It strives to achieve two main goals:",[1530,70786,70787,70790],{},[974,70788,70789],{},"Increase the semantic value of a section of html and content",[974,70791,70792,70793],{},"Decrease the expectation of a ",[941,70794,70795],{},"specific html structure",[7100,70797,70799],{"title":70798,"type":24048},"Categorization",[925,70800,70801],{},"At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns.",[953,70803,70805],{"id":70804},"more-on-categorization","More on Categorization",[925,70807,70808],{},"The purpose of this categorization is less code repetition, a more consistent experience, and easier maintenance. Under SMACSS there are 5 general categories of css rules.",[1530,70810,70811,70817,70822,70828,70833],{},[974,70812,70813,70816],{},[1107,70814,70815],{},"Base"," - Your defaults (html, body, h1, ul, etc)",[974,70818,70819,70821],{},[1107,70820,15700],{}," - Divides the page into major sections",[974,70823,70824,70827],{},[1107,70825,70826],{},"Module"," - Reusable modular components of a design",[974,70829,70830,70832],{},[1107,70831,8590],{}," - Describe how things look when in a particular state (hidden or expanded, active\u002Finactive)",[974,70834,70835,70838],{},[1107,70836,70837],{},"Theme"," - Defines things like a color scheme or typographic treatment across a site",[925,70840,70841],{},"Instead of mixing CSS across all these categories, we can apply some guidelines across these categories and simplify our CSS.",[953,70843,70845],{"id":70844},"naming-convention","Naming Convention",[925,70847,70848],{},"Jonathan suggests adding prefixes for the selectors by following a convention:",[1530,70850,70851,70856,70868,70877,70885],{},[974,70852,70853,70855],{},[1107,70854,70815],{}," - Nothing needed",[974,70857,70858,70860,70861,16529,70864,70867],{},[1107,70859,15700],{}," - ",[941,70862,70863],{},"l-",[941,70865,70866],{},"layout-"," prefixes",[974,70869,70870,70872,70873,70876],{},[1107,70871,70826],{}," - Modules just use module name (eg: ",[941,70874,70875],{},".tooltip",") instead of trying to prefix each, however related modules receive a consistent prefix to help organize them",[974,70878,70879,70860,70881,70884],{},[1107,70880,8590],{},[941,70882,70883],{},"is-"," prefix as in is-active or is-hidden",[974,70886,70887,70838],{},[1107,70888,70837],{},[925,70890,70891],{},"Let's expand on this a little bit more.",[953,70893,70815],{"id":70894},"base",[925,70896,70897,70898,70900,70901,70903],{},"Base rules are applied for elements. Not ",[941,70899,19767],{},"s or ",[941,70902,2363],{},"es.",[993,70905,70907],{"className":35707,"code":70906,"language":29,"meta":998,"style":998},"h1 {\n color: red;\n}\n\nbody {\n margin: 0 auto;\n}\n",[941,70908,70909,70915,70926,70930,70934,70940,70953],{"__ignoreMap":998},[1002,70910,70911,70913],{"class":1004,"line":1005},[1002,70912,15201],{"class":15711},[1002,70914,1457],{"class":1030},[1002,70916,70917,70919,70921,70924],{"class":1004,"line":1012},[1002,70918,35952],{"class":1019},[1002,70920,1137],{"class":1030},[1002,70922,70923],{"class":1019},"red",[1002,70925,1407],{"class":1030},[1002,70927,70928],{"class":1004,"line":1047},[1002,70929,1170],{"class":1030},[1002,70931,70932],{"class":1004,"line":1054},[1002,70933,1051],{"emptyLinePlaceholder":1050},[1002,70935,70936,70938],{"class":1004,"line":1060},[1002,70937,15034],{"class":15711},[1002,70939,1457],{"class":1030},[1002,70941,70942,70944,70946,70948,70951],{"class":1004,"line":1272},[1002,70943,37384],{"class":1019},[1002,70945,1137],{"class":1030},[1002,70947,5867],{"class":1019},[1002,70949,70950],{"class":1019}," auto",[1002,70952,1407],{"class":1030},[1002,70954,70955],{"class":1004,"line":1348},[1002,70956,1170],{"class":1030},[925,70958,70959,70960,2034,70963,70966],{},"CSS resets are an example of base styles. ",[941,70961,70962],{},"CSS Reset",[941,70964,70965],{},"Normalize.css"," are example libararies using base element styling to override user agent (browser) in-built style.",[953,70968,15700],{"id":70969},"layout",[925,70971,70972],{},"There are two types of layout components:",[1530,70974,70975,70984],{},[974,70976,70977,70980,70981,70983],{},[1107,70978,70979],{},"Major"," - Like a ",[941,70982,15722],{}," block containing a logo and a title",[974,70985,70986,70989],{},[1107,70987,70988],{},"Minor"," - Like a logo that is inside a header tag.",[925,70991,70992,70993,70996],{},"SMACSS layout rules will only apply for ",[941,70994,70995],{},"major components",". Minor components fall under module rules.",[925,70998,70999],{},"Generally a layout style will have a single selector (either an ID or class). Additionally there could be a style set to allow the layout style to respond to different factors.",[993,71001,71003],{"className":35707,"code":71002,"language":29,"meta":998,"style":998},"#Banner {\n width: 100%;\n}\n.l-top #Banner {\n width: 800px;\n}\n",[941,71004,71005,71012,71024,71028,71038,71051],{"__ignoreMap":998},[1002,71006,71007,71010],{"class":1004,"line":1005},[1002,71008,71009],{"class":1026},"#Banner",[1002,71011,1457],{"class":1030},[1002,71013,71014,71016,71018,71020,71022],{"class":1004,"line":1012},[1002,71015,37240],{"class":1019},[1002,71017,1137],{"class":1030},[1002,71019,4791],{"class":1019},[1002,71021,32598],{"class":1015},[1002,71023,1407],{"class":1030},[1002,71025,71026],{"class":1004,"line":1047},[1002,71027,1170],{"class":1030},[1002,71029,71030,71033,71036],{"class":1004,"line":1054},[1002,71031,71032],{"class":1026},".l-top",[1002,71034,71035],{"class":1026}," #Banner",[1002,71037,1457],{"class":1030},[1002,71039,71040,71042,71044,71047,71049],{"class":1004,"line":1060},[1002,71041,37240],{"class":1019},[1002,71043,1137],{"class":1030},[1002,71045,71046],{"class":1019},"800",[1002,71048,43835],{"class":1015},[1002,71050,1407],{"class":1030},[1002,71052,71053],{"class":1004,"line":1272},[1002,71054,1170],{"class":1030},[953,71056,70826],{"id":1227},[925,71058,71059],{},"Modules should be designed so they can exist on their own, which gives them greater flexibility in being combined and moved around to different parts of the design without breaking the layout. With modules we do want to avoid IDs and element selectors. More reuse means classes.",[993,71061,71063],{"className":35707,"code":71062,"language":29,"meta":998,"style":998},".box {\n width: 250px;\n}\n.box p {\n padding: 20px;\n}\n#Banner .box {\n width: 100px;\n}\n",[941,71064,71065,71072,71085,71089,71097,71109,71113,71122,71134],{"__ignoreMap":998},[1002,71066,71067,71070],{"class":1004,"line":1005},[1002,71068,71069],{"class":1026},".box",[1002,71071,1457],{"class":1030},[1002,71073,71074,71076,71078,71081,71083],{"class":1004,"line":1012},[1002,71075,37240],{"class":1019},[1002,71077,1137],{"class":1030},[1002,71079,71080],{"class":1019},"250",[1002,71082,43835],{"class":1015},[1002,71084,1407],{"class":1030},[1002,71086,71087],{"class":1004,"line":1047},[1002,71088,1170],{"class":1030},[1002,71090,71091,71093,71095],{"class":1004,"line":1054},[1002,71092,71069],{"class":1026},[1002,71094,16244],{"class":15711},[1002,71096,1457],{"class":1030},[1002,71098,71099,71101,71103,71105,71107],{"class":1004,"line":1060},[1002,71100,37280],{"class":1019},[1002,71102,1137],{"class":1030},[1002,71104,4809],{"class":1019},[1002,71106,43835],{"class":1015},[1002,71108,1407],{"class":1030},[1002,71110,71111],{"class":1004,"line":1272},[1002,71112,1170],{"class":1030},[1002,71114,71115,71117,71120],{"class":1004,"line":1348},[1002,71116,71009],{"class":1026},[1002,71118,71119],{"class":1026}," .box",[1002,71121,1457],{"class":1030},[1002,71123,71124,71126,71128,71130,71132],{"class":1004,"line":1354},[1002,71125,37240],{"class":1019},[1002,71127,1137],{"class":1030},[1002,71129,4791],{"class":1019},[1002,71131,43835],{"class":1015},[1002,71133,1407],{"class":1030},[1002,71135,71136],{"class":1004,"line":1360},[1002,71137,1170],{"class":1030},[953,71139,8590],{"id":8589},[925,71141,71142],{},"A state style is one that augments or overrides other styles under given conditions. For example an accordion with collapsed and expanded states. These are typically applied to the same element, should be built to stand alone, and are usually developed on a single class selector.",[993,71144,71146],{"className":35707,"code":71145,"language":29,"meta":998,"style":998},".box {\n width: 250px;\n}\n.box.is-selected {\n border: 1px solid red;\n}\n",[941,71147,71148,71154,71166,71170,71177,71195],{"__ignoreMap":998},[1002,71149,71150,71152],{"class":1004,"line":1005},[1002,71151,71069],{"class":1026},[1002,71153,1457],{"class":1030},[1002,71155,71156,71158,71160,71162,71164],{"class":1004,"line":1012},[1002,71157,37240],{"class":1019},[1002,71159,1137],{"class":1030},[1002,71161,71080],{"class":1019},[1002,71163,43835],{"class":1015},[1002,71165,1407],{"class":1030},[1002,71167,71168],{"class":1004,"line":1047},[1002,71169,1170],{"class":1030},[1002,71171,71172,71175],{"class":1004,"line":1054},[1002,71173,71174],{"class":1026},".box.is-selected",[1002,71176,1457],{"class":1030},[1002,71178,71179,71182,71184,71186,71188,71190,71193],{"class":1004,"line":1060},[1002,71180,71181],{"class":1019}," border",[1002,71183,1137],{"class":1030},[1002,71185,6211],{"class":1019},[1002,71187,43835],{"class":1015},[1002,71189,43838],{"class":1019},[1002,71191,71192],{"class":1019}," red",[1002,71194,1407],{"class":1030},[1002,71196,71197],{"class":1004,"line":1272},[1002,71198,1170],{"class":1030},[925,71200,71201],{},"State changes are represented in one of three ways:",[1530,71203,71204,71210,71216],{},[974,71205,71206,71209],{},[1107,71207,71208],{},"Class name"," — The change happens by adding or removing a class, usually with JavaScript",[974,71211,71212,71215],{},[1107,71213,71214],{},"Pseudo-class"," — The change happens to elements that are descendants or siblings of the element with the pseudo-class",[974,71217,71218,71221],{},[1107,71219,71220],{},"Media query"," — The change happens under defined criteria, such as different viewport sizes.",[953,71223,26561],{"id":26560},[925,71225,71226],{},"SMACSS helps us write more flexible and maintainable CSS.",[1579,71228,71229],{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":998,"searchDepth":1012,"depth":1012,"links":71231},[71232,71233,71234,71235,71236,71237,71238,71239],{"id":70778,"depth":1012,"text":70779},{"id":70804,"depth":1012,"text":70805},{"id":70844,"depth":1012,"text":70845},{"id":70894,"depth":1012,"text":70815},{"id":70969,"depth":1012,"text":15700},{"id":1227,"depth":1012,"text":70826},{"id":8589,"depth":1012,"text":8590},{"id":26560,"depth":1012,"text":26561},"2015-12-30","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsmacss.jpg",{},{"title":809,"description":811},"blog\u002Fsmacss",[16,29,292],"MrizsPGV26DLzFLbFQaI8VX03B-E0t2etJMkTXy7cPk",{"id":71248,"title":68,"author":920,"body":71249,"date":71483,"description":70,"extension":1591,"image":71484,"meta":71485,"navigation":1050,"path":69,"seo":71486,"stem":71487,"tags":71488,"__hash__":71489},"blog\u002Fblog\u002Fbem.md",{"type":922,"value":71250,"toc":71473},[71251,71255,71258,71261,71275,71280,71284,71287,71298,71302,71305,71308,71311,71316,71320,71323,71326,71329,71332,71336,71339,71377,71380,71383,71386,71446,71465,71467,71470],[953,71252,71254],{"id":71253},"block","Block",[925,71256,71257],{},"A logically and functionally independent page component, the equivalent of a component in Web Components. A block encapsulates behaviour (JavaScript), templates, styles (CSS), and other implementation technologies described below.",[925,71259,71260],{},"Blocks can be implemented in one or more technologies, for example:",[1530,71262,71263,71266,71269,71272],{},[974,71264,71265],{},"Behavior — JavaScript, CoffeeScript, TypeScript",[974,71267,71268],{},"Appearance - CSS, Stylus, Sass, Less",[974,71270,71271],{},"Templates — BEMHTML, BH, Jade, Handlebars, XSL",[974,71273,71274],{},"Documentation - Markdown, Wiki, XML",[7100,71276,71277],{"type":24048},[925,71278,71279],{},"Blocks being independent allows for their re-use, as well as facilitating the project development and support process.",[1655,71281,71283],{"id":71282},"block-features","Block Features",[925,71285,71286],{},"Blocks consists of the following features:",[1530,71288,71289,71292,71295],{},[974,71290,71291],{},"Nested - Blocks can be nested inside any other blocks",[974,71293,71294],{},"Arbitrary placement - Blocks can be moved around on a page, moved between pages or projects",[974,71296,71297],{},"Re-use - An interface can contain multiple instances of the same block",[1655,71299,71301],{"id":71300},"nested-structure","Nested structure",[925,71303,71304],{},"Block can be nested inside any other blocks.",[953,71306,71307],{"id":50541},"Element",[925,71309,71310],{},"A constituent part of a block that can't be used outside of it. For example, a menu item is not used outside of the context of a menu block, therefore it is an element.",[7100,71312,71313],{"type":23379},[925,71314,71315],{},"Using elements within elements is not recommended by the BEM methodology.",[953,71317,71319],{"id":71318},"modifier","Modifier",[925,71321,71322],{},"A BEM entity that defines the appearance and behaviour of a block or an element.",[925,71324,71325],{},"The use of modifiers is optional.",[925,71327,71328],{},"Modifiers are similar in essence to HTML attributes. The same block looks different due to the use of a modifier.",[925,71330,71331],{},"For instance, the appearance of the menu block (menu) may change depending on a modifier that is used on it.",[953,71333,71335],{"id":71334},"naming-convension","Naming Convension",[925,71337,71338],{},"The naming convention follows this pattern:",[993,71340,71342],{"className":35707,"code":71341,"language":29,"meta":998,"style":998},".block {\n}\n.block__element {\n}\n.block--modifier {\n}\n",[941,71343,71344,71351,71355,71362,71366,71373],{"__ignoreMap":998},[1002,71345,71346,71349],{"class":1004,"line":1005},[1002,71347,71348],{"class":1026},".block",[1002,71350,1457],{"class":1030},[1002,71352,71353],{"class":1004,"line":1012},[1002,71354,1170],{"class":1030},[1002,71356,71357,71360],{"class":1004,"line":1047},[1002,71358,71359],{"class":1026},".block__element",[1002,71361,1457],{"class":1030},[1002,71363,71364],{"class":1004,"line":1054},[1002,71365,1170],{"class":1030},[1002,71367,71368,71371],{"class":1004,"line":1060},[1002,71369,71370],{"class":1026},".block--modifier",[1002,71372,1457],{"class":1030},[1002,71374,71375],{"class":1004,"line":1272},[1002,71376,1170],{"class":1030},[925,71378,71379],{},"As you can notice, the element (__) differs from modifier (--), where element uses underscores and modifier use hyphens.",[925,71381,71382],{},"These self-describing styles help developers and designers to identify and understand the structure they are building.",[925,71384,71385],{},"Let's look at an example to understand this concept further.",[993,71387,71389],{"className":35707,"code":71388,"language":29,"meta":998,"style":998},".vehicle {\n}\n.vehicle__door {\n}\n.vehicle--car {\n}\n.vehicle--car__door {\n}\n.vehicle__door--left {\n}\n",[941,71390,71391,71398,71402,71409,71413,71420,71424,71431,71435,71442],{"__ignoreMap":998},[1002,71392,71393,71396],{"class":1004,"line":1005},[1002,71394,71395],{"class":1026},".vehicle",[1002,71397,1457],{"class":1030},[1002,71399,71400],{"class":1004,"line":1012},[1002,71401,1170],{"class":1030},[1002,71403,71404,71407],{"class":1004,"line":1047},[1002,71405,71406],{"class":1026},".vehicle__door",[1002,71408,1457],{"class":1030},[1002,71410,71411],{"class":1004,"line":1054},[1002,71412,1170],{"class":1030},[1002,71414,71415,71418],{"class":1004,"line":1060},[1002,71416,71417],{"class":1026},".vehicle--car",[1002,71419,1457],{"class":1030},[1002,71421,71422],{"class":1004,"line":1272},[1002,71423,1170],{"class":1030},[1002,71425,71426,71429],{"class":1004,"line":1348},[1002,71427,71428],{"class":1026},".vehicle--car__door",[1002,71430,1457],{"class":1030},[1002,71432,71433],{"class":1004,"line":1354},[1002,71434,1170],{"class":1030},[1002,71436,71437,71440],{"class":1004,"line":1360},[1002,71438,71439],{"class":1026},".vehicle__door--left",[1002,71441,1457],{"class":1030},[1002,71443,71444],{"class":1004,"line":1366},[1002,71445,1170],{"class":1030},[925,71447,71448,71449,71451,71452,71455,71456,71458,71459,71462,71463,948],{},"The top-level block is ",[941,71450,2698],{}," which has elements for example ",[941,71453,71454],{},"door",". A ",[941,71457,2698],{}," also has variation, like ",[941,71460,71461],{},"car",". And that variation in turn has elements such as ",[941,71464,71454],{},[953,71466,26561],{"id":26560},[925,71468,71469],{},"BEM may seem ugly, and weird. But it's a powerful naming convention for the front-end developer.",[1579,71471,71472],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":71474},[71475,71479,71480,71481,71482],{"id":71253,"depth":1012,"text":71254,"children":71476},[71477,71478],{"id":71282,"depth":1047,"text":71283},{"id":71300,"depth":1047,"text":71301},{"id":50541,"depth":1012,"text":71307},{"id":71318,"depth":1012,"text":71319},{"id":71334,"depth":1012,"text":71335},{"id":26560,"depth":1012,"text":26561},"2015-12-29","\u002Fimages\u002Fblog\u002Ffeatures\u002Fbem.jpg",{},{"title":68,"description":70},"blog\u002Fbem",[16,29],"0OK-14wnJZKphiMGN540o34dOUZglFIHtVHDBdvZ1Rc",{"id":71491,"title":444,"author":920,"body":71492,"date":71998,"description":446,"extension":1591,"image":71999,"meta":72000,"navigation":1050,"path":445,"seo":72001,"stem":72002,"tags":72003,"__hash__":72004},"blog\u002Fblog\u002Finteroperable-css.md",{"type":922,"value":71493,"toc":71992},[71494,71498,71501,71507,71520,71524,71531,71617,71620,71673,71679,71684,71690,71758,71761,71774,71811,71820,71826,71924,71933,71970,71973,71975,71989],[953,71495,71497],{"id":71496},"why-interoperable-css","Why Interoperable CSS?",[925,71499,71500],{},"Even though JavaScript has evolved into building workflows to produce reusable components with scoped modules, CSS has remained conventional.",[7100,71502,71504],{"title":71503,"type":24048},"ICSS is for compilers, not for human authoring",[925,71505,71506],{},"ICSS is compiled fom CSS Modules. Each file is compiled separately then linked in the loader.",[925,71508,71509,71510,71513,71514,2034,71516,71519],{},"JavaScipt used to be global before the introduction of ",[1107,71511,71512],{},"CommonJS",". With ",[941,71515,1294],{},[941,71517,71518],{},"module.exports",", a proper system of dependenices and proper local scoping was introduced. ICSS is designed to achive the same goal.",[953,71521,71522],{"id":998},[947,71523],{},[925,71525,71526,71527,71530],{},"Exporting symbols from a file to another CSS or JS file is done by using the ",[941,71528,71529],{},":export"," pseudoselector block.",[993,71532,71534],{"className":35707,"code":71533,"language":29,"meta":998,"style":998},":export {\n Page: _page_page_afd97dfs867;\n Header: _page_header_85fd867fsfg;\n Footer: _page_footer_97fd867fsfg;\n}\n._page_page_afd85dfs867 {\n \u002F* page styles *\u002F\n}\n._page_header_85fd867fsfg {\n \u002F* header styles *\u002F\n}\n._page_footer_97fd867fsfg {\n \u002F* footer styles *\u002F\n}\n",[941,71535,71536,71541,71549,71557,71565,71569,71576,71581,71585,71592,71597,71601,71608,71613],{"__ignoreMap":998},[1002,71537,71538],{"class":1004,"line":1005},[1002,71539,71540],{"class":1030},":export {\n",[1002,71542,71543,71546],{"class":1004,"line":1012},[1002,71544,71545],{"class":1019}," Page",[1002,71547,71548],{"class":1030},": _page_page_afd97dfs867;\n",[1002,71550,71551,71554],{"class":1004,"line":1047},[1002,71552,71553],{"class":1019}," Header",[1002,71555,71556],{"class":1030},": _page_header_85fd867fsfg;\n",[1002,71558,71559,71562],{"class":1004,"line":1054},[1002,71560,71561],{"class":1019}," Footer",[1002,71563,71564],{"class":1030},": _page_footer_97fd867fsfg;\n",[1002,71566,71567],{"class":1004,"line":1060},[1002,71568,1170],{"class":1030},[1002,71570,71571,71574],{"class":1004,"line":1272},[1002,71572,71573],{"class":1026},"._page_page_afd85dfs867",[1002,71575,1457],{"class":1030},[1002,71577,71578],{"class":1004,"line":1348},[1002,71579,71580],{"class":1008}," \u002F* page styles *\u002F\n",[1002,71582,71583],{"class":1004,"line":1354},[1002,71584,1170],{"class":1030},[1002,71586,71587,71590],{"class":1004,"line":1360},[1002,71588,71589],{"class":1026},"._page_header_85fd867fsfg",[1002,71591,1457],{"class":1030},[1002,71593,71594],{"class":1004,"line":1366},[1002,71595,71596],{"class":1008}," \u002F* header styles *\u002F\n",[1002,71598,71599],{"class":1004,"line":1946},[1002,71600,1170],{"class":1030},[1002,71602,71603,71606],{"class":1004,"line":1956},[1002,71604,71605],{"class":1026},"._page_footer_97fd867fsfg",[1002,71607,1457],{"class":1030},[1002,71609,71610],{"class":1004,"line":1961},[1002,71611,71612],{"class":1008}," \u002F* footer styles *\u002F\n",[1002,71614,71615],{"class":1004,"line":1971},[1002,71616,1170],{"class":1030},[925,71618,71619],{},"The symbols are imported as a simple JS object",[993,71621,71623],{"className":995,"code":71622,"language":997,"meta":998,"style":998},"import styles from '.\u002Fpage.css';\n\u002F*\n styles: {\n Page: \"_page_page_afd85dfs867\",\n Header: \"_page_header_85fd867fsfg\",\n Footer: \"_page_footer_97fd867fsfg\"\n }\n *\u002F\n",[941,71624,71625,71639,71644,71649,71654,71659,71664,71669],{"__ignoreMap":998},[1002,71626,71627,71629,71632,71634,71637],{"class":1004,"line":1005},[1002,71628,943],{"class":1015},[1002,71630,71631],{"class":1030}," styles ",[1002,71633,1068],{"class":1015},[1002,71635,71636],{"class":1034}," '.\u002Fpage.css'",[1002,71638,1407],{"class":1030},[1002,71640,71641],{"class":1004,"line":1012},[1002,71642,71643],{"class":1008},"\u002F*\n",[1002,71645,71646],{"class":1004,"line":1047},[1002,71647,71648],{"class":1008}," styles: {\n",[1002,71650,71651],{"class":1004,"line":1054},[1002,71652,71653],{"class":1008}," Page: \"_page_page_afd85dfs867\",\n",[1002,71655,71656],{"class":1004,"line":1060},[1002,71657,71658],{"class":1008}," Header: \"_page_header_85fd867fsfg\",\n",[1002,71660,71661],{"class":1004,"line":1272},[1002,71662,71663],{"class":1008}," Footer: \"_page_footer_97fd867fsfg\"\n",[1002,71665,71666],{"class":1004,"line":1348},[1002,71667,71668],{"class":1008}," }\n",[1002,71670,71671],{"class":1004,"line":1354},[1002,71672,23846],{"class":1008},[925,71674,71675,71676,71678],{},"CSS Modules generate globally unique class names using ",[941,71677,71529],{}," and provide them to JS.",[953,71680,71682],{"id":71681},"_1",[943,71683],{},[925,71685,3898,71686,71689],{},[941,71687,71688],{},":import"," pseudoselector just like CommonJS import, defines which symbols it needs to import.",[993,71691,71693],{"className":35707,"code":71692,"language":29,"meta":998,"style":998},":import('.\u002Fpage.css') {\n i__page_class_1: Header;\n i__page_class_2: Footer;\n I__page_var_1: SharedPageVar;\n}\n",[941,71694,71695,71706,71723,71738,71754],{"__ignoreMap":998},[1002,71696,71697,71700,71703],{"class":1004,"line":1005},[1002,71698,71699],{"class":1030},":import('",[1002,71701,71702],{"class":18541},".\u002Fpage",[1002,71704,71705],{"class":1030},".css') {\n",[1002,71707,71708,71710,71713,71716,71718,71720],{"class":1004,"line":1012},[1002,71709,44989],{"class":1019},[1002,71711,71712],{"class":1030},"__",[1002,71714,71715],{"class":1019},"page",[1002,71717,36177],{"class":1030},[1002,71719,2363],{"class":1019},[1002,71721,71722],{"class":1030},"_1: Header;\n",[1002,71724,71725,71727,71729,71731,71733,71735],{"class":1004,"line":1047},[1002,71726,44989],{"class":1019},[1002,71728,71712],{"class":1030},[1002,71730,71715],{"class":1019},[1002,71732,36177],{"class":1030},[1002,71734,2363],{"class":1019},[1002,71736,71737],{"class":1030},"_2: Footer;\n",[1002,71739,71740,71743,71745,71747,71749,71751],{"class":1004,"line":1054},[1002,71741,71742],{"class":1019}," I",[1002,71744,71712],{"class":1030},[1002,71746,71715],{"class":1019},[1002,71748,36177],{"class":1030},[1002,71750,18311],{"class":1019},[1002,71752,71753],{"class":1030},"_1: SharedPageVar;\n",[1002,71755,71756],{"class":1004,"line":1060},[1002,71757,1170],{"class":1030},[925,71759,71760],{},"The loader will determine the path looking at the argument given to it, fetches the file and links it to the current.",[925,71762,71763,71764,71767,71768,71770,71771,948],{},"In the body of the import statement, is the ",[1107,71765,71766],{},"local temporary aliases"," and the exported symbols from the dependency, which matches up to the ",[941,71769,71529],{}," block of ",[941,71772,71773],{},"page.css",[993,71775,71777],{"className":35707,"code":71776,"language":29,"meta":998,"style":998},":export {\n Header: _page_header_85fd867fsfg;\n Footer: _page_footer_97fd867fsfg;\n SharedPageVar: #ffffff;\n}\n",[941,71778,71779,71783,71789,71795,71807],{"__ignoreMap":998},[1002,71780,71781],{"class":1004,"line":1005},[1002,71782,71540],{"class":1030},[1002,71784,71785,71787],{"class":1004,"line":1012},[1002,71786,71553],{"class":1019},[1002,71788,71556],{"class":1030},[1002,71790,71791,71793],{"class":1004,"line":1047},[1002,71792,71561],{"class":1019},[1002,71794,71564],{"class":1030},[1002,71796,71797,71800,71802,71805],{"class":1004,"line":1054},[1002,71798,71799],{"class":1019}," SharedPageVar",[1002,71801,1137],{"class":1030},[1002,71803,71804],{"class":1019},"#ffffff",[1002,71806,1407],{"class":1030},[1002,71808,71809],{"class":1004,"line":1060},[1002,71810,1170],{"class":1030},[925,71812,71813,71814,36227,71817,948],{},"In the above example, we are exporting class name as ",[941,71815,71816],{},"Header",[941,71818,71819],{},"Footer",[925,71821,71822,71823,71825],{},"When an ICSS file is loaded and linked, the symbols gets passed with the ",[941,71824,71688],{}," block is deleted.",[993,71827,71829],{"className":35707,"code":71828,"language":29,"meta":998,"style":998},":import('.\u002Fpage.css') {\n i__page_class_1: Header;\n i__page_class_2: Footer;\n i__page_var_1: SharedPageVar;\n}\n\n:export {\n Page: _page_page_afd85dfs867;\n}\n\n_page_page_afd85dfs867 {\n color: i__page_var_1;\n}\n",[941,71830,71831,71839,71853,71867,71881,71885,71889,71893,71900,71904,71908,71913,71920],{"__ignoreMap":998},[1002,71832,71833,71835,71837],{"class":1004,"line":1005},[1002,71834,71699],{"class":1030},[1002,71836,71702],{"class":18541},[1002,71838,71705],{"class":1030},[1002,71840,71841,71843,71845,71847,71849,71851],{"class":1004,"line":1012},[1002,71842,44989],{"class":1019},[1002,71844,71712],{"class":1030},[1002,71846,71715],{"class":1019},[1002,71848,36177],{"class":1030},[1002,71850,2363],{"class":1019},[1002,71852,71722],{"class":1030},[1002,71854,71855,71857,71859,71861,71863,71865],{"class":1004,"line":1047},[1002,71856,44989],{"class":1019},[1002,71858,71712],{"class":1030},[1002,71860,71715],{"class":1019},[1002,71862,36177],{"class":1030},[1002,71864,2363],{"class":1019},[1002,71866,71737],{"class":1030},[1002,71868,71869,71871,71873,71875,71877,71879],{"class":1004,"line":1054},[1002,71870,44989],{"class":1019},[1002,71872,71712],{"class":1030},[1002,71874,71715],{"class":1019},[1002,71876,36177],{"class":1030},[1002,71878,18311],{"class":1019},[1002,71880,71753],{"class":1030},[1002,71882,71883],{"class":1004,"line":1060},[1002,71884,1170],{"class":1030},[1002,71886,71887],{"class":1004,"line":1272},[1002,71888,1051],{"emptyLinePlaceholder":1050},[1002,71890,71891],{"class":1004,"line":1348},[1002,71892,71540],{"class":1030},[1002,71894,71895,71897],{"class":1004,"line":1354},[1002,71896,71545],{"class":1019},[1002,71898,71899],{"class":1030},": _page_page_afd85dfs867;\n",[1002,71901,71902],{"class":1004,"line":1360},[1002,71903,1170],{"class":1030},[1002,71905,71906],{"class":1004,"line":1366},[1002,71907,1051],{"emptyLinePlaceholder":1050},[1002,71909,71910],{"class":1004,"line":1946},[1002,71911,71912],{"class":1030},"_page_page_afd85dfs867 {\n",[1002,71914,71915,71917],{"class":1004,"line":1956},[1002,71916,35952],{"class":1019},[1002,71918,71919],{"class":1030},": i__page_var_1;\n",[1002,71921,71922],{"class":1004,"line":1961},[1002,71923,1170],{"class":1030},[925,71925,71926,71927,71929,71930,71932],{},"After the ",[941,71928,71688],{}," is processed against the ",[941,71931,71529],{}," block:",[993,71934,71936],{"className":35707,"code":71935,"language":29,"meta":998,"style":998},":export {\n Page: _page_page_afd85dfs867;\n}\n\n_page_page_afd85dfs867 {\n color: i__page_var_1;\n}\n",[941,71937,71938,71942,71948,71952,71956,71960,71966],{"__ignoreMap":998},[1002,71939,71940],{"class":1004,"line":1005},[1002,71941,71540],{"class":1030},[1002,71943,71944,71946],{"class":1004,"line":1012},[1002,71945,71545],{"class":1019},[1002,71947,71899],{"class":1030},[1002,71949,71950],{"class":1004,"line":1047},[1002,71951,1170],{"class":1030},[1002,71953,71954],{"class":1004,"line":1054},[1002,71955,1051],{"emptyLinePlaceholder":1050},[1002,71957,71958],{"class":1004,"line":1060},[1002,71959,71912],{"class":1030},[1002,71961,71962,71964],{"class":1004,"line":1272},[1002,71963,35952],{"class":1019},[1002,71965,71919],{"class":1030},[1002,71967,71968],{"class":1004,"line":1348},[1002,71969,1170],{"class":1030},[925,71971,71972],{},"When this processed file is imported, it becomes a JavaScript object, and the loader will inject it inot the DOM.",[953,71974,26561],{"id":26560},[925,71976,71977,71978,2034,71981,71984,71985,71988],{},"The difference between ",[1107,71979,71980],{},"CSS Modules",[1107,71982,71983],{},"ICSS"," is that the latter is not opiniated. There is an ",[1107,71986,71987],{},"Interoperable CSS Standard"," which is designed towards making CSS a multi-file language, just like what CommonJS did with JavaScript.",[1579,71990,71991],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":998,"searchDepth":1012,"depth":1012,"links":71993},[71994,71995,71996,71997],{"id":71496,"depth":1012,"text":71497},{"id":998,"depth":1012,"text":998},{"id":71681,"depth":1012,"text":998},{"id":26560,"depth":1012,"text":26561},"2015-12-24","\u002Fimages\u002Fblog\u002Ffeatures\u002Finteroperable-css.jpg",{},{"title":444,"description":446},"blog\u002Finteroperable-css",[16,29],"rkVx40IhMJBxtsmhTALLq-cVurlajeGRX6uVau2vCZE",{"id":72006,"title":136,"author":920,"body":72007,"date":73329,"description":138,"extension":1591,"image":73330,"meta":73331,"navigation":1050,"path":137,"seo":73332,"stem":73333,"tags":73334,"__hash__":73335},"blog\u002Fblog\u002Fcss-modules.md",{"type":922,"value":72008,"toc":73319},[72009,72015,72021,72025,72028,72043,72046,72053,72056,72127,72130,72184,72187,72273,72276,72302,72305,72309,72312,72315,72324,72450,72453,72621,72624,72686,72690,72693,72817,72819,72949,72951,73014,73018,73021,73048,73053,73060,73063,73067,73152,73156,73223,73294,73300,73304,73316],[925,72010,72011,72012,72014],{},"You can use a module bundler such as ",[1107,72013,33058],{}," to load CSS scoped to a particular document.",[7100,72016,72018],{"type":24048,"title":72017},"CSS Module Loaders",[925,72019,72020],{},"CSS module loader will generate a unique name for a each CSS class at the time of loading the CSS document (Interoperable CSS to be precise).",[953,72022,72024],{"id":72023},"why-css-modules","Why CSS Modules?",[925,72026,72027],{},"CSS by default has global scope. This can lead into numerous issues:",[1530,72029,72030,72033,72036],{},[974,72031,72032],{},"Global namespace - Selectors can clash with other selectors targeting same elements.",[974,72034,72035],{},"The specificity wars can break your selctors.",[974,72037,72038,72039,72042],{},"Forced to use ",[1107,72040,72041],{},"!important"," to override element level styles.",[925,72044,72045],{},"With css-modules, we have a way to emulate local scope and control dependencies in front-end components.",[925,72047,72048,72049,72052],{},"CSS Modules compile to a low-level interchange format called ICSS or ",[941,72050,72051],{},"nteroperable CSS",", but are written like normal CSS files:",[925,72054,72055],{},"Before CSS Modules:",[993,72057,72059],{"className":995,"code":72058,"language":997,"meta":998,"style":998},"\u002F* button.css *\u002F\n.button-normal {\n color: blue;\n}\n.button-error {\n color: red;\n}\n.button-disabled {\n color: grey;\n}\n",[941,72060,72061,72066,72076,72083,72087,72096,72103,72107,72116,72123],{"__ignoreMap":998},[1002,72062,72063],{"class":1004,"line":1005},[1002,72064,72065],{"class":1008},"\u002F* button.css *\u002F\n",[1002,72067,72068,72071,72073],{"class":1004,"line":1012},[1002,72069,72070],{"class":1030},".button",[1002,72072,5101],{"class":1015},[1002,72074,72075],{"class":1030},"normal {\n",[1002,72077,72078,72080],{"class":1004,"line":1047},[1002,72079,35952],{"class":1026},[1002,72081,72082],{"class":1030},": blue;\n",[1002,72084,72085],{"class":1004,"line":1054},[1002,72086,1170],{"class":1030},[1002,72088,72089,72091,72093],{"class":1004,"line":1060},[1002,72090,72070],{"class":1030},[1002,72092,5101],{"class":1015},[1002,72094,72095],{"class":1030},"error {\n",[1002,72097,72098,72100],{"class":1004,"line":1272},[1002,72099,35952],{"class":1026},[1002,72101,72102],{"class":1030},": red;\n",[1002,72104,72105],{"class":1004,"line":1348},[1002,72106,1170],{"class":1030},[1002,72108,72109,72111,72113],{"class":1004,"line":1354},[1002,72110,72070],{"class":1030},[1002,72112,5101],{"class":1015},[1002,72114,72115],{"class":1030},"disabled {\n",[1002,72117,72118,72120],{"class":1004,"line":1360},[1002,72119,35952],{"class":1026},[1002,72121,72122],{"class":1030},": grey;\n",[1002,72124,72125],{"class":1004,"line":1366},[1002,72126,1170],{"class":1030},[925,72128,72129],{},"With CSS Modules:",[993,72131,72133],{"className":995,"code":72132,"language":997,"meta":998,"style":998},"\u002F* button.css *\u002F\n.normal {\n color: blue;\n}\n.error {\n color: red;\n}\n.disabled {\n color: grey;\n}\n",[941,72134,72135,72139,72144,72150,72154,72159,72165,72169,72174,72180],{"__ignoreMap":998},[1002,72136,72137],{"class":1004,"line":1005},[1002,72138,72065],{"class":1008},[1002,72140,72141],{"class":1004,"line":1012},[1002,72142,72143],{"class":1030},".normal {\n",[1002,72145,72146,72148],{"class":1004,"line":1047},[1002,72147,35952],{"class":1026},[1002,72149,72082],{"class":1030},[1002,72151,72152],{"class":1004,"line":1054},[1002,72153,1170],{"class":1030},[1002,72155,72156],{"class":1004,"line":1060},[1002,72157,72158],{"class":1030},".error {\n",[1002,72160,72161,72163],{"class":1004,"line":1272},[1002,72162,35952],{"class":1026},[1002,72164,72102],{"class":1030},[1002,72166,72167],{"class":1004,"line":1348},[1002,72168,1170],{"class":1030},[1002,72170,72171],{"class":1004,"line":1354},[1002,72172,72173],{"class":1030},".disabled {\n",[1002,72175,72176,72178],{"class":1004,"line":1360},[1002,72177,35952],{"class":1026},[1002,72179,72122],{"class":1030},[1002,72181,72182],{"class":1004,"line":1366},[1002,72183,1170],{"class":1030},[925,72185,72186],{},"That’s made possible by the way CSS Modules are compiled — by using require or import to load the file from JavaScript:",[993,72188,72190],{"className":995,"code":72189,"language":997,"meta":998,"style":998},"import React from 'react';\nimport styles from '.\u002Fbutton.css';\n\nclass Button extends React.Component {\n render() {\n return \u003Cinput type=\"button\" className={styles.normal}>;\n }\n}\n",[941,72191,72192,72204,72217,72221,72238,72244,72265,72269],{"__ignoreMap":998},[1002,72193,72194,72196,72198,72200,72202],{"class":1004,"line":1005},[1002,72195,943],{"class":1015},[1002,72197,21700],{"class":1030},[1002,72199,1068],{"class":1015},[1002,72201,15543],{"class":1034},[1002,72203,1407],{"class":1030},[1002,72205,72206,72208,72210,72212,72215],{"class":1004,"line":1012},[1002,72207,943],{"class":1015},[1002,72209,71631],{"class":1030},[1002,72211,1068],{"class":1015},[1002,72213,72214],{"class":1034}," '.\u002Fbutton.css'",[1002,72216,1407],{"class":1030},[1002,72218,72219],{"class":1004,"line":1047},[1002,72220,1051],{"emptyLinePlaceholder":1050},[1002,72222,72223,72225,72228,72230,72232,72234,72236],{"class":1004,"line":1054},[1002,72224,2363],{"class":1015},[1002,72226,72227],{"class":1026}," Button",[1002,72229,3014],{"class":1015},[1002,72231,20112],{"class":1026},[1002,72233,948],{"class":1030},[1002,72235,20117],{"class":1026},[1002,72237,1457],{"class":1030},[1002,72239,72240,72242],{"class":1004,"line":1060},[1002,72241,20201],{"class":1026},[1002,72243,3025],{"class":1030},[1002,72245,72246,72248,72250,72252,72254,72256,72258,72260,72262],{"class":1004,"line":1272},[1002,72247,2687],{"class":1015},[1002,72249,20660],{"class":1030},[1002,72251,5803],{"class":15711},[1002,72253,29274],{"class":1026},[1002,72255,2393],{"class":1015},[1002,72257,47267],{"class":1034},[1002,72259,26915],{"class":1026},[1002,72261,2393],{"class":1015},[1002,72263,72264],{"class":1030},"{styles.normal}>;\n",[1002,72266,72267],{"class":1004,"line":1348},[1002,72268,1269],{"class":1030},[1002,72270,72271],{"class":1004,"line":1354},[1002,72272,1170],{"class":1030},[925,72274,72275],{},"The actual class names are generated automatically and are guaranteed to be unique. Your souce code may look like the following:",[993,72277,72279],{"className":37880,"code":72278,"language":383,"meta":998,"style":998},"\u003Cinput type=\"button\" class=\"components_button_normal_acf7488\" \u002F>\n",[941,72280,72281],{"__ignoreMap":998},[1002,72282,72283,72285,72287,72289,72291,72293,72295,72297,72300],{"class":1004,"line":1005},[1002,72284,6539],{"class":1030},[1002,72286,5803],{"class":15711},[1002,72288,29274],{"class":1026},[1002,72290,2393],{"class":1030},[1002,72292,47267],{"class":1034},[1002,72294,17187],{"class":1026},[1002,72296,2393],{"class":1030},[1002,72298,72299],{"class":1034},"\"components_button_normal_acf7488\"",[1002,72301,15258],{"class":1030},[925,72303,72304],{},"When importing the CSS Module from a JS Module, it exports an object with all mappings from local names to global names.",[953,72306,72308],{"id":72307},"scoped-selectors","Scoped Selectors",[925,72310,72311],{},"In CSS Modules, selectors are scoped by default.",[925,72313,72314],{},"CSS Module semantics ensure that classes are locally scoped to the component and don't collide with other classes in the global scope.",[925,72316,72317,72318,2034,72321,948],{},"In the following example, the component uses two classes, ",[941,72319,72320],{},".root",[941,72322,72323],{},".text",[993,72325,72327],{"className":995,"code":72326,"language":997,"meta":998,"style":998},"import React from 'react';\nimport styles from '.\u002Fscoped-selectors.css';\n\nclass ScopedSelectors extends React.Component {\n\n render() {\n return (\n \u003Cdiv className={styles.root}>\n \u003Cp className={styles.text}>Scoped Selectors\n \u003C\u002Fdiv>\n );\n }\n\n};\n\nexport default class ScopedSelectors;\n",[941,72328,72329,72341,72354,72358,72375,72379,72385,72391,72404,72417,72425,72429,72433,72437,72441,72445],{"__ignoreMap":998},[1002,72330,72331,72333,72335,72337,72339],{"class":1004,"line":1005},[1002,72332,943],{"class":1015},[1002,72334,21700],{"class":1030},[1002,72336,1068],{"class":1015},[1002,72338,15543],{"class":1034},[1002,72340,1407],{"class":1030},[1002,72342,72343,72345,72347,72349,72352],{"class":1004,"line":1012},[1002,72344,943],{"class":1015},[1002,72346,71631],{"class":1030},[1002,72348,1068],{"class":1015},[1002,72350,72351],{"class":1034}," '.\u002Fscoped-selectors.css'",[1002,72353,1407],{"class":1030},[1002,72355,72356],{"class":1004,"line":1047},[1002,72357,1051],{"emptyLinePlaceholder":1050},[1002,72359,72360,72362,72365,72367,72369,72371,72373],{"class":1004,"line":1054},[1002,72361,2363],{"class":1015},[1002,72363,72364],{"class":1026}," ScopedSelectors",[1002,72366,3014],{"class":1015},[1002,72368,20112],{"class":1026},[1002,72370,948],{"class":1030},[1002,72372,20117],{"class":1026},[1002,72374,1457],{"class":1030},[1002,72376,72377],{"class":1004,"line":1060},[1002,72378,1051],{"emptyLinePlaceholder":1050},[1002,72380,72381,72383],{"class":1004,"line":1272},[1002,72382,20201],{"class":1026},[1002,72384,3025],{"class":1030},[1002,72386,72387,72389],{"class":1004,"line":1348},[1002,72388,2687],{"class":1015},[1002,72390,15692],{"class":1030},[1002,72392,72393,72395,72397,72399,72401],{"class":1004,"line":1354},[1002,72394,19579],{"class":1030},[1002,72396,19650],{"class":15711},[1002,72398,26915],{"class":1026},[1002,72400,2393],{"class":1015},[1002,72402,72403],{"class":1030},"{styles.root}>\n",[1002,72405,72406,72408,72410,72412,72414],{"class":1004,"line":1360},[1002,72407,15708],{"class":1030},[1002,72409,925],{"class":15711},[1002,72411,26915],{"class":1026},[1002,72413,2393],{"class":1015},[1002,72415,72416],{"class":1030},"{styles.text}>Scoped Selectors\n",[1002,72418,72419,72421,72423],{"class":1004,"line":1366},[1002,72420,21184],{"class":1030},[1002,72422,19650],{"class":15711},[1002,72424,15703],{"class":1030},[1002,72426,72427],{"class":1004,"line":1946},[1002,72428,22541],{"class":1030},[1002,72430,72431],{"class":1004,"line":1956},[1002,72432,1269],{"class":1030},[1002,72434,72435],{"class":1004,"line":1961},[1002,72436,1051],{"emptyLinePlaceholder":1050},[1002,72438,72439],{"class":1004,"line":1971},[1002,72440,1517],{"class":1030},[1002,72442,72443],{"class":1004,"line":1980},[1002,72444,1051],{"emptyLinePlaceholder":1050},[1002,72446,72447],{"class":1004,"line":1985},[1002,72448,72449],{"class":1030},"export default class ScopedSelectors;\n",[925,72451,72452],{},"Let's look at the CSS file.",[993,72454,72456],{"className":35707,"code":72455,"language":29,"meta":998,"style":998},".container {\n border: 2px solid #c7254e;\n padding: 0 20px;\n margin: 0 6px;\n max-width: 246px;\n border-radius: 10px;\n}\n.text {\n color: #c7254e;\n font-size: 24px;\n font-family: helvetica, arial, sans-serif;\n font-weight: 600;\n padding-top: 15px;\n}\n",[941,72457,72458,72465,72482,72496,72510,72524,72537,72541,72547,72558,72571,72592,72604,72617],{"__ignoreMap":998},[1002,72459,72460,72463],{"class":1004,"line":1005},[1002,72461,72462],{"class":1026},".container",[1002,72464,1457],{"class":1030},[1002,72466,72467,72469,72471,72473,72475,72477,72480],{"class":1004,"line":1012},[1002,72468,71181],{"class":1019},[1002,72470,1137],{"class":1030},[1002,72472,5681],{"class":1019},[1002,72474,43835],{"class":1015},[1002,72476,43838],{"class":1019},[1002,72478,72479],{"class":1019}," #c7254e",[1002,72481,1407],{"class":1030},[1002,72483,72484,72486,72488,72490,72492,72494],{"class":1004,"line":1047},[1002,72485,37280],{"class":1019},[1002,72487,1137],{"class":1030},[1002,72489,5867],{"class":1019},[1002,72491,50421],{"class":1019},[1002,72493,43835],{"class":1015},[1002,72495,1407],{"class":1030},[1002,72497,72498,72500,72502,72504,72506,72508],{"class":1004,"line":1054},[1002,72499,37384],{"class":1019},[1002,72501,1137],{"class":1030},[1002,72503,5867],{"class":1019},[1002,72505,17847],{"class":1019},[1002,72507,43835],{"class":1015},[1002,72509,1407],{"class":1030},[1002,72511,72512,72515,72517,72520,72522],{"class":1004,"line":1060},[1002,72513,72514],{"class":1019}," max-width",[1002,72516,1137],{"class":1030},[1002,72518,72519],{"class":1019},"246",[1002,72521,43835],{"class":1015},[1002,72523,1407],{"class":1030},[1002,72525,72526,72529,72531,72533,72535],{"class":1004,"line":1272},[1002,72527,72528],{"class":1019}," border-radius",[1002,72530,1137],{"class":1030},[1002,72532,4818],{"class":1019},[1002,72534,43835],{"class":1015},[1002,72536,1407],{"class":1030},[1002,72538,72539],{"class":1004,"line":1348},[1002,72540,1170],{"class":1030},[1002,72542,72543,72545],{"class":1004,"line":1354},[1002,72544,72323],{"class":1026},[1002,72546,1457],{"class":1030},[1002,72548,72549,72551,72553,72556],{"class":1004,"line":1360},[1002,72550,35952],{"class":1019},[1002,72552,1137],{"class":1030},[1002,72554,72555],{"class":1019},"#c7254e",[1002,72557,1407],{"class":1030},[1002,72559,72560,72562,72564,72567,72569],{"class":1004,"line":1366},[1002,72561,37355],{"class":1019},[1002,72563,1137],{"class":1030},[1002,72565,72566],{"class":1019},"24",[1002,72568,43835],{"class":1015},[1002,72570,1407],{"class":1030},[1002,72572,72573,72575,72577,72580,72582,72585,72587,72590],{"class":1004,"line":1946},[1002,72574,37338],{"class":1019},[1002,72576,1137],{"class":1030},[1002,72578,72579],{"class":1019},"helvetica",[1002,72581,1251],{"class":1030},[1002,72583,72584],{"class":1019},"arial",[1002,72586,1251],{"class":1030},[1002,72588,72589],{"class":1019},"sans-serif",[1002,72591,1407],{"class":1030},[1002,72593,72594,72597,72599,72602],{"class":1004,"line":1956},[1002,72595,72596],{"class":1019}," font-weight",[1002,72598,1137],{"class":1030},[1002,72600,72601],{"class":1019},"600",[1002,72603,1407],{"class":1030},[1002,72605,72606,72609,72611,72613,72615],{"class":1004,"line":1961},[1002,72607,72608],{"class":1019}," padding-top",[1002,72610,1137],{"class":1030},[1002,72612,31465],{"class":1019},[1002,72614,43835],{"class":1015},[1002,72616,1407],{"class":1030},[1002,72618,72619],{"class":1004,"line":1971},[1002,72620,1170],{"class":1030},[925,72622,72623],{},"The output will look like this:",[993,72625,72627],{"className":37880,"code":72626,"language":383,"meta":998,"style":998},"\u003Cdiv>\n \u003Cdiv class=\"container\">\n \u003Cdiv class=\"text\">Scoped Selectors\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[941,72628,72629,72637,72651,72670,72678],{"__ignoreMap":998},[1002,72630,72631,72633,72635],{"class":1004,"line":1005},[1002,72632,6539],{"class":1030},[1002,72634,19650],{"class":15711},[1002,72636,15703],{"class":1030},[1002,72638,72639,72641,72643,72645,72647,72649],{"class":1004,"line":1012},[1002,72640,22427],{"class":1030},[1002,72642,19650],{"class":15711},[1002,72644,17187],{"class":1026},[1002,72646,2393],{"class":1030},[1002,72648,30137],{"class":1034},[1002,72650,15703],{"class":1030},[1002,72652,72653,72655,72657,72659,72661,72663,72666,72668],{"class":1004,"line":1047},[1002,72654,15697],{"class":1030},[1002,72656,19650],{"class":15711},[1002,72658,17187],{"class":1026},[1002,72660,2393],{"class":1030},[1002,72662,33950],{"class":1034},[1002,72664,72665],{"class":1030},">Scoped Selectors\u003C\u002F",[1002,72667,19650],{"class":15711},[1002,72669,15703],{"class":1030},[1002,72671,72672,72674,72676],{"class":1004,"line":1054},[1002,72673,28112],{"class":1030},[1002,72675,19650],{"class":15711},[1002,72677,15703],{"class":1030},[1002,72679,72680,72682,72684],{"class":1004,"line":1060},[1002,72681,22437],{"class":1030},[1002,72683,19650],{"class":15711},[1002,72685,15703],{"class":1030},[953,72687,72689],{"id":72688},"global-selectors","Global Selectors",[925,72691,72692],{},"Global selectors are still available but should be used sparingly.",[993,72694,72696],{"className":995,"code":72695,"language":997,"meta":998,"style":998},"import React from 'react';\nimport styles from '.\u002Fglobal-selectors.css';\n\nclass GlobalSelectors extends React.Component {\n\n render() {\n return (\n \u003Cdiv className={ styles.root }>\n \u003Cp className=\"text\">Global Selectors\n \u003C\u002Fdiv>\n );\n }\n};\n\nexport default GlobalSelectors;\n",[941,72697,72698,72710,72723,72727,72744,72748,72754,72760,72773,72788,72796,72800,72804,72808,72812],{"__ignoreMap":998},[1002,72699,72700,72702,72704,72706,72708],{"class":1004,"line":1005},[1002,72701,943],{"class":1015},[1002,72703,21700],{"class":1030},[1002,72705,1068],{"class":1015},[1002,72707,15543],{"class":1034},[1002,72709,1407],{"class":1030},[1002,72711,72712,72714,72716,72718,72721],{"class":1004,"line":1012},[1002,72713,943],{"class":1015},[1002,72715,71631],{"class":1030},[1002,72717,1068],{"class":1015},[1002,72719,72720],{"class":1034}," '.\u002Fglobal-selectors.css'",[1002,72722,1407],{"class":1030},[1002,72724,72725],{"class":1004,"line":1047},[1002,72726,1051],{"emptyLinePlaceholder":1050},[1002,72728,72729,72731,72734,72736,72738,72740,72742],{"class":1004,"line":1054},[1002,72730,2363],{"class":1015},[1002,72732,72733],{"class":1026}," GlobalSelectors",[1002,72735,3014],{"class":1015},[1002,72737,20112],{"class":1026},[1002,72739,948],{"class":1030},[1002,72741,20117],{"class":1026},[1002,72743,1457],{"class":1030},[1002,72745,72746],{"class":1004,"line":1060},[1002,72747,1051],{"emptyLinePlaceholder":1050},[1002,72749,72750,72752],{"class":1004,"line":1272},[1002,72751,20201],{"class":1026},[1002,72753,3025],{"class":1030},[1002,72755,72756,72758],{"class":1004,"line":1348},[1002,72757,2687],{"class":1015},[1002,72759,15692],{"class":1030},[1002,72761,72762,72764,72766,72768,72770],{"class":1004,"line":1354},[1002,72763,19579],{"class":1030},[1002,72765,19650],{"class":15711},[1002,72767,26915],{"class":1026},[1002,72769,2393],{"class":1015},[1002,72771,72772],{"class":1030},"{ styles.root }>\n",[1002,72774,72775,72777,72779,72781,72783,72785],{"class":1004,"line":1360},[1002,72776,15708],{"class":1030},[1002,72778,925],{"class":15711},[1002,72780,26915],{"class":1026},[1002,72782,2393],{"class":1015},[1002,72784,33950],{"class":1034},[1002,72786,72787],{"class":1030},">Global Selectors\n",[1002,72789,72790,72792,72794],{"class":1004,"line":1366},[1002,72791,21184],{"class":1030},[1002,72793,19650],{"class":15711},[1002,72795,15703],{"class":1030},[1002,72797,72798],{"class":1004,"line":1946},[1002,72799,22541],{"class":1030},[1002,72801,72802],{"class":1004,"line":1956},[1002,72803,1269],{"class":1030},[1002,72805,72806],{"class":1004,"line":1961},[1002,72807,1517],{"class":1030},[1002,72809,72810],{"class":1004,"line":1971},[1002,72811,1051],{"emptyLinePlaceholder":1050},[1002,72813,72814],{"class":1004,"line":1980},[1002,72815,72816],{"class":1030},"export default GlobalSelectors;\n",[925,72818,72452],{},[993,72820,72822],{"className":995,"code":72821,"language":997,"meta":998,"style":998},".root {\n border: 2px solid brown;\n padding: 0 20px;\n margin: 0 6px;\n max-width: 234px;\n border-radius: 10px;\n}\n.root :global .content {\n color: #00ACEE;\n font-size: 24px;\n font-family: helvetica, arial, sans-serif;\n font-weight: 600;\n}\n",[941,72823,72824,72829,72836,72847,72858,72870,72880,72884,72889,72901,72914,72931,72945],{"__ignoreMap":998},[1002,72825,72826],{"class":1004,"line":1005},[1002,72827,72828],{"class":1030},".root {\n",[1002,72830,72831,72833],{"class":1004,"line":1012},[1002,72832,71181],{"class":1026},[1002,72834,72835],{"class":1030},": 2px solid brown;\n",[1002,72837,72838,72840,72842,72844],{"class":1004,"line":1047},[1002,72839,37280],{"class":1026},[1002,72841,1137],{"class":1030},[1002,72843,5867],{"class":1019},[1002,72845,72846],{"class":1030}," 20px;\n",[1002,72848,72849,72851,72853,72855],{"class":1004,"line":1054},[1002,72850,37384],{"class":1026},[1002,72852,1137],{"class":1030},[1002,72854,5867],{"class":1019},[1002,72856,72857],{"class":1030}," 6px;\n",[1002,72859,72860,72863,72865,72867],{"class":1004,"line":1060},[1002,72861,72862],{"class":1030}," max",[1002,72864,5101],{"class":1015},[1002,72866,16089],{"class":1026},[1002,72868,72869],{"class":1030},": 234px;\n",[1002,72871,72872,72874,72876,72878],{"class":1004,"line":1272},[1002,72873,71181],{"class":1030},[1002,72875,5101],{"class":1015},[1002,72877,43234],{"class":1026},[1002,72879,43628],{"class":1030},[1002,72881,72882],{"class":1004,"line":1348},[1002,72883,1170],{"class":1030},[1002,72885,72886],{"class":1004,"line":1354},[1002,72887,72888],{"class":1030},".root :global .content {\n",[1002,72890,72891,72893,72896,72899],{"class":1004,"line":1360},[1002,72892,35952],{"class":1026},[1002,72894,72895],{"class":1030},": #00",[1002,72897,72898],{"class":1019},"ACEE",[1002,72900,1407],{"class":1030},[1002,72902,72903,72906,72908,72911],{"class":1004,"line":1366},[1002,72904,72905],{"class":1030}," font",[1002,72907,5101],{"class":1015},[1002,72909,72910],{"class":1026},"size",[1002,72912,72913],{"class":1030},": 24px;\n",[1002,72915,72916,72918,72920,72923,72926,72928],{"class":1004,"line":1946},[1002,72917,72905],{"class":1030},[1002,72919,5101],{"class":1015},[1002,72921,72922],{"class":1026},"family",[1002,72924,72925],{"class":1030},": helvetica, arial, sans",[1002,72927,5101],{"class":1015},[1002,72929,72930],{"class":1030},"serif;\n",[1002,72932,72933,72935,72937,72939,72941,72943],{"class":1004,"line":1956},[1002,72934,72905],{"class":1030},[1002,72936,5101],{"class":1015},[1002,72938,9222],{"class":1026},[1002,72940,1137],{"class":1030},[1002,72942,72601],{"class":1019},[1002,72944,1407],{"class":1030},[1002,72946,72947],{"class":1004,"line":1961},[1002,72948,1170],{"class":1030},[925,72950,72623],{},[993,72952,72954],{"className":37880,"code":72953,"language":383,"meta":998,"style":998},"\u003Cdiv>\n \u003Cdiv class=\"root\">\n \u003Cdiv class=\"content\">Global Selectors\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[941,72955,72956,72964,72978,72998,73006],{"__ignoreMap":998},[1002,72957,72958,72960,72962],{"class":1004,"line":1005},[1002,72959,6539],{"class":1030},[1002,72961,19650],{"class":15711},[1002,72963,15703],{"class":1030},[1002,72965,72966,72968,72970,72972,72974,72976],{"class":1004,"line":1012},[1002,72967,22427],{"class":1030},[1002,72969,19650],{"class":15711},[1002,72971,17187],{"class":1026},[1002,72973,2393],{"class":1030},[1002,72975,37978],{"class":1034},[1002,72977,15703],{"class":1030},[1002,72979,72980,72982,72984,72986,72988,72991,72994,72996],{"class":1004,"line":1047},[1002,72981,15697],{"class":1030},[1002,72983,19650],{"class":15711},[1002,72985,17187],{"class":1026},[1002,72987,2393],{"class":1030},[1002,72989,72990],{"class":1034},"\"content\"",[1002,72992,72993],{"class":1030},">Global Selectors\u003C\u002F",[1002,72995,19650],{"class":15711},[1002,72997,15703],{"class":1030},[1002,72999,73000,73002,73004],{"class":1004,"line":1054},[1002,73001,28112],{"class":1030},[1002,73003,19650],{"class":15711},[1002,73005,15703],{"class":1030},[1002,73007,73008,73010,73012],{"class":1004,"line":1060},[1002,73009,22437],{"class":1030},[1002,73011,19650],{"class":15711},[1002,73013,15703],{"class":1030},[953,73015,73017],{"id":73016},"class-composition","Class Composition",[925,73019,73020],{},"Composition promotes better separation of markup and style using semantics that would be hard to achieve without CSS Modules.",[993,73022,73024],{"className":995,"code":73023,"language":997,"meta":998,"style":998},".classB {\n composes: classA from \".\u002Fstyle.css\";\n}\n",[941,73025,73026,73031,73044],{"__ignoreMap":998},[1002,73027,73028],{"class":1004,"line":1005},[1002,73029,73030],{"class":1030},".classB {\n",[1002,73032,73033,73036,73039,73042],{"class":1004,"line":1012},[1002,73034,73035],{"class":1026}," composes",[1002,73037,73038],{"class":1030},": classA from ",[1002,73040,73041],{"class":1034},"\".\u002Fstyle.css\"",[1002,73043,1407],{"class":1030},[1002,73045,73046],{"class":1004,"line":1047},[1002,73047,1170],{"class":1030},[7100,73049,73050],{"type":23379},[925,73051,73052],{},"Make sure not to define different values for the same property in multiple class names when they are composed to a single class.",[925,73054,73055,73056,73059],{},"Both of the components below have ",[1107,73057,73058],{},"locally scoped CSS"," that is composed from a common set of CSS Modules.",[925,73061,73062],{},"Since CSS Modules can be composed, the resulting markup is optimised by reusing classes between components.",[1655,73064,73066],{"id":73065},"styleslayoutcss","styles\u002Flayout.css",[993,73068,73070],{"className":35707,"code":73069,"language":29,"meta":998,"style":998},".box {\n border: 2px solid brown;\n padding: 0 20px;\n margin: 0 6px;\n max-width: 234px;\n border-radius: 10px;\n}\n",[941,73071,73072,73078,73095,73109,73123,73136,73148],{"__ignoreMap":998},[1002,73073,73074,73076],{"class":1004,"line":1005},[1002,73075,71069],{"class":1026},[1002,73077,1457],{"class":1030},[1002,73079,73080,73082,73084,73086,73088,73090,73093],{"class":1004,"line":1012},[1002,73081,71181],{"class":1019},[1002,73083,1137],{"class":1030},[1002,73085,5681],{"class":1019},[1002,73087,43835],{"class":1015},[1002,73089,43838],{"class":1019},[1002,73091,73092],{"class":1019}," brown",[1002,73094,1407],{"class":1030},[1002,73096,73097,73099,73101,73103,73105,73107],{"class":1004,"line":1047},[1002,73098,37280],{"class":1019},[1002,73100,1137],{"class":1030},[1002,73102,5867],{"class":1019},[1002,73104,50421],{"class":1019},[1002,73106,43835],{"class":1015},[1002,73108,1407],{"class":1030},[1002,73110,73111,73113,73115,73117,73119,73121],{"class":1004,"line":1054},[1002,73112,37384],{"class":1019},[1002,73114,1137],{"class":1030},[1002,73116,5867],{"class":1019},[1002,73118,17847],{"class":1019},[1002,73120,43835],{"class":1015},[1002,73122,1407],{"class":1030},[1002,73124,73125,73127,73129,73132,73134],{"class":1004,"line":1060},[1002,73126,72514],{"class":1019},[1002,73128,1137],{"class":1030},[1002,73130,73131],{"class":1019},"234",[1002,73133,43835],{"class":1015},[1002,73135,1407],{"class":1030},[1002,73137,73138,73140,73142,73144,73146],{"class":1004,"line":1272},[1002,73139,72528],{"class":1019},[1002,73141,1137],{"class":1030},[1002,73143,4818],{"class":1019},[1002,73145,43835],{"class":1015},[1002,73147,1407],{"class":1030},[1002,73149,73150],{"class":1004,"line":1348},[1002,73151,1170],{"class":1030},[1655,73153,73155],{"id":73154},"styleswordingcss","styles\u002Fwording.css",[993,73157,73159],{"className":35707,"code":73158,"language":29,"meta":998,"style":998},".content {\n color: #00acee;\n font-size: 24px;\n font-family: helvetica, arial, sans-serif;\n font-weight: 600;\n}\n",[941,73160,73161,73168,73179,73191,73209,73219],{"__ignoreMap":998},[1002,73162,73163,73166],{"class":1004,"line":1005},[1002,73164,73165],{"class":1026},".content",[1002,73167,1457],{"class":1030},[1002,73169,73170,73172,73174,73177],{"class":1004,"line":1012},[1002,73171,35952],{"class":1019},[1002,73173,1137],{"class":1030},[1002,73175,73176],{"class":1019},"#00acee",[1002,73178,1407],{"class":1030},[1002,73180,73181,73183,73185,73187,73189],{"class":1004,"line":1047},[1002,73182,37355],{"class":1019},[1002,73184,1137],{"class":1030},[1002,73186,72566],{"class":1019},[1002,73188,43835],{"class":1015},[1002,73190,1407],{"class":1030},[1002,73192,73193,73195,73197,73199,73201,73203,73205,73207],{"class":1004,"line":1054},[1002,73194,37338],{"class":1019},[1002,73196,1137],{"class":1030},[1002,73198,72579],{"class":1019},[1002,73200,1251],{"class":1030},[1002,73202,72584],{"class":1019},[1002,73204,1251],{"class":1030},[1002,73206,72589],{"class":1019},[1002,73208,1407],{"class":1030},[1002,73210,73211,73213,73215,73217],{"class":1004,"line":1060},[1002,73212,72596],{"class":1019},[1002,73214,1137],{"class":1030},[1002,73216,72601],{"class":1019},[1002,73218,1407],{"class":1030},[1002,73220,73221],{"class":1004,"line":1272},[1002,73222,1170],{"class":1030},[993,73224,73226],{"className":35707,"code":73225,"language":29,"meta":998,"style":998},".root {\n composes: box from \"styles\u002Flayout.css\";\n border-color: red;\n}\n\n.root .content {\n composes: content from \"styles\u002Fwording.css\":\n}\n",[941,73227,73228,73234,73246,73257,73261,73265,73274,73290],{"__ignoreMap":998},[1002,73229,73230,73232],{"class":1004,"line":1005},[1002,73231,72320],{"class":1026},[1002,73233,1457],{"class":1030},[1002,73235,73236,73238,73241,73244],{"class":1004,"line":1012},[1002,73237,73035],{"class":1019},[1002,73239,73240],{"class":1030},": box from ",[1002,73242,73243],{"class":1034},"\"styles\u002Flayout.css\"",[1002,73245,1407],{"class":1030},[1002,73247,73248,73251,73253,73255],{"class":1004,"line":1047},[1002,73249,73250],{"class":1019}," border-color",[1002,73252,1137],{"class":1030},[1002,73254,70923],{"class":1019},[1002,73256,1407],{"class":1030},[1002,73258,73259],{"class":1004,"line":1054},[1002,73260,1170],{"class":1030},[1002,73262,73263],{"class":1004,"line":1060},[1002,73264,1051],{"emptyLinePlaceholder":1050},[1002,73266,73267,73269,73272],{"class":1004,"line":1272},[1002,73268,72320],{"class":1026},[1002,73270,73271],{"class":1026}," .content",[1002,73273,1457],{"class":1030},[1002,73275,73276,73278,73280,73282,73285,73288],{"class":1004,"line":1348},[1002,73277,73035],{"class":1019},[1002,73279,1137],{"class":1030},[1002,73281,15671],{"class":1019},[1002,73283,73284],{"class":1030}," from ",[1002,73286,73287],{"class":1034},"\"styles\u002Fwording.css\"",[1002,73289,2616],{"class":1030},[1002,73291,73292],{"class":1004,"line":1354},[1002,73293,1170],{"class":1030},[925,73295,73296,73297,948],{},"You compose multiple classes with ",[941,73298,73299],{},"composes: classNameA classNameB;",[953,73301,73303],{"id":73302},"current-implementations","Current Implementations",[925,73305,73306,73307,2034,73310,73315],{},"Webpack's ",[941,73308,73309],{},"css-loader",[933,73311,73314],{"href":73312,"rel":73313},"https:\u002F\u002Fgithub.com\u002Fgajus\u002Freact-css-modules",[937],"react-css-modules"," are few of the implementations for CSS Modules.",[1579,73317,73318],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":73320},[73321,73322,73323,73324,73328],{"id":72023,"depth":1012,"text":72024},{"id":72307,"depth":1012,"text":72308},{"id":72688,"depth":1012,"text":72689},{"id":73016,"depth":1012,"text":73017,"children":73325},[73326,73327],{"id":73065,"depth":1047,"text":73066},{"id":73154,"depth":1047,"text":73155},{"id":73302,"depth":1012,"text":73303},"2015-12-08","\u002Fimages\u002Fblog\u002Ffeatures\u002Fcss-modules.jpg",{},{"title":136,"description":138},"blog\u002Fcss-modules",[16,17,29,140],"pW6Ph8IdKK30TBf0fKEqmxVLr_dvFkk6FD1CfuoX1ys",{"id":73337,"title":850,"author":920,"body":73338,"date":73839,"description":852,"extension":1591,"image":73840,"meta":73841,"navigation":1050,"path":851,"seo":73842,"stem":73843,"tags":73844,"__hash__":73845},"blog\u002Fblog\u002Fthrottle-function-calls-in-javascript.md",{"type":922,"value":73339,"toc":73835},[73340,73343,73346,73352,73356,73365,73518,73527,73683,73686,73758,73765,73782,73785,73798,73804,73816,73825,73832],[925,73341,73342],{},"A good practice is to throttle your requests to fire on a given amount time. Most users these days can type there name in 1\u002F10 of a second, so 100-250ms is a good amount of delay before sending a request.",[953,73344,28517],{"id":73345},"debounce",[925,73347,73348,73349,73351],{},"A JavaScript function written to throttle execution is called a ",[1107,73350,73345],{}," function. Or in another words, it limits the rate at which a function can fire.",[953,73353,73355],{"id":73354},"coding-a-debounce-function","Coding a debounce function",[925,73357,73358,73359,73361,73362,73364],{},"Let's start by creating an ",[941,73360,37877],{}," and adding an ",[941,73363,5803],{}," field to it for search input.",[993,73366,73368],{"className":37880,"code":73367,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Ctitle>Throttle function calls\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Cform>\n \u003Clabel>Search\u003C\u002Flabel>\n \u003Cinput type=\"text\" id=\"search\" placeholder=\"search\" \u002F>\n \u003C\u002Fform>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,73369,73370,73380,73394,73402,73416,73429,73437,73445,73453,73466,73494,73502,73510],{"__ignoreMap":998},[1002,73371,73372,73374,73376,73378],{"class":1004,"line":1005},[1002,73373,37888],{"class":1030},[1002,73375,37891],{"class":15711},[1002,73377,21739],{"class":1026},[1002,73379,15703],{"class":1030},[1002,73381,73382,73384,73386,73388,73390,73392],{"class":1004,"line":1012},[1002,73383,6539],{"class":1030},[1002,73385,383],{"class":15711},[1002,73387,37904],{"class":1026},[1002,73389,2393],{"class":1030},[1002,73391,37909],{"class":1034},[1002,73393,15703],{"class":1030},[1002,73395,73396,73398,73400],{"class":1004,"line":1047},[1002,73397,22427],{"class":1030},[1002,73399,32092],{"class":15711},[1002,73401,15703],{"class":1030},[1002,73403,73404,73406,73408,73410,73412,73414],{"class":1004,"line":1054},[1002,73405,15697],{"class":1030},[1002,73407,37926],{"class":15711},[1002,73409,37929],{"class":1026},[1002,73411,2393],{"class":1030},[1002,73413,37934],{"class":1034},[1002,73415,15258],{"class":1030},[1002,73417,73418,73420,73422,73425,73427],{"class":1004,"line":1060},[1002,73419,15697],{"class":1030},[1002,73421,15029],{"class":15711},[1002,73423,73424],{"class":1030},">Throttle function calls\u003C\u002F",[1002,73426,15029],{"class":15711},[1002,73428,15703],{"class":1030},[1002,73430,73431,73433,73435],{"class":1004,"line":1272},[1002,73432,28112],{"class":1030},[1002,73434,32092],{"class":15711},[1002,73436,15703],{"class":1030},[1002,73438,73439,73441,73443],{"class":1004,"line":1348},[1002,73440,22427],{"class":1030},[1002,73442,15034],{"class":15711},[1002,73444,15703],{"class":1030},[1002,73446,73447,73449,73451],{"class":1004,"line":1354},[1002,73448,15697],{"class":1030},[1002,73450,29213],{"class":15711},[1002,73452,15703],{"class":1030},[1002,73454,73455,73457,73459,73462,73464],{"class":1004,"line":1360},[1002,73456,19579],{"class":1030},[1002,73458,29228],{"class":15711},[1002,73460,73461],{"class":1030},">Search\u003C\u002F",[1002,73463,29228],{"class":15711},[1002,73465,15703],{"class":1030},[1002,73467,73468,73470,73472,73474,73476,73478,73480,73482,73485,73488,73490,73492],{"class":1004,"line":1366},[1002,73469,19579],{"class":1030},[1002,73471,5803],{"class":15711},[1002,73473,29274],{"class":1026},[1002,73475,2393],{"class":1030},[1002,73477,33950],{"class":1034},[1002,73479,21489],{"class":1026},[1002,73481,2393],{"class":1030},[1002,73483,73484],{"class":1034},"\"search\"",[1002,73486,73487],{"class":1026}," placeholder",[1002,73489,2393],{"class":1030},[1002,73491,73484],{"class":1034},[1002,73493,15258],{"class":1030},[1002,73495,73496,73498,73500],{"class":1004,"line":1946},[1002,73497,19647],{"class":1030},[1002,73499,29213],{"class":15711},[1002,73501,15703],{"class":1030},[1002,73503,73504,73506,73508],{"class":1004,"line":1956},[1002,73505,28112],{"class":1030},[1002,73507,15034],{"class":15711},[1002,73509,15703],{"class":1030},[1002,73511,73512,73514,73516],{"class":1004,"line":1961},[1002,73513,22437],{"class":1030},[1002,73515,383],{"class":15711},[1002,73517,15703],{"class":1030},[925,73519,73520,73521,73523,73524,948],{},"Create a JavaScript file for our ",[1107,73522,73345],{}," function, let's name it ",[941,73525,73526],{},"throttle.js",[993,73528,73530],{"className":995,"code":73529,"language":997,"meta":998,"style":998},"function debounce(fn, delay) {\n var timer = null,\n delay = delay || 250;\n\n return function () {\n var args = arguments;\n\n clearTimeout(timer);\n\n timer = setTimeout(\n function () {\n fn.apply(this, args);\n }.bind(this),\n delay,\n );\n };\n}\n",[941,73531,73532,73550,73563,73580,73584,73592,73605,73609,73617,73621,73632,73639,73652,73666,73671,73675,73679],{"__ignoreMap":998},[1002,73533,73534,73536,73539,73541,73543,73545,73548],{"class":1004,"line":1005},[1002,73535,6965],{"class":1015},[1002,73537,73538],{"class":1026}," debounce",[1002,73540,1031],{"class":1030},[1002,73542,8265],{"class":2378},[1002,73544,1251],{"class":1030},[1002,73546,73547],{"class":2378},"delay",[1002,73549,2382],{"class":1030},[1002,73551,73552,73554,73557,73559,73561],{"class":1004,"line":1012},[1002,73553,28293],{"class":1015},[1002,73555,73556],{"class":1030}," timer ",[1002,73558,2393],{"class":1015},[1002,73560,7080],{"class":1019},[1002,73562,1143],{"class":1030},[1002,73564,73565,73568,73570,73573,73575,73578],{"class":1004,"line":1047},[1002,73566,73567],{"class":1030}," delay ",[1002,73569,2393],{"class":1015},[1002,73571,73572],{"class":1030}," delay ",[1002,73574,8392],{"class":1015},[1002,73576,73577],{"class":1019}," 250",[1002,73579,1407],{"class":1030},[1002,73581,73582],{"class":1004,"line":1054},[1002,73583,1051],{"emptyLinePlaceholder":1050},[1002,73585,73586,73588,73590],{"class":1004,"line":1060},[1002,73587,15066],{"class":1015},[1002,73589,8457],{"class":1015},[1002,73591,9772],{"class":1030},[1002,73593,73594,73596,73599,73601,73603],{"class":1004,"line":1272},[1002,73595,51906],{"class":1015},[1002,73597,73598],{"class":1030}," args ",[1002,73600,2393],{"class":1015},[1002,73602,39074],{"class":1019},[1002,73604,1407],{"class":1030},[1002,73606,73607],{"class":1004,"line":1348},[1002,73608,1051],{"emptyLinePlaceholder":1050},[1002,73610,73611,73614],{"class":1004,"line":1354},[1002,73612,73613],{"class":1026}," clearTimeout",[1002,73615,73616],{"class":1030},"(timer);\n",[1002,73618,73619],{"class":1004,"line":1360},[1002,73620,1051],{"emptyLinePlaceholder":1050},[1002,73622,73623,73626,73628,73630],{"class":1004,"line":1366},[1002,73624,73625],{"class":1030}," timer ",[1002,73627,2393],{"class":1015},[1002,73629,20803],{"class":1026},[1002,73631,10468],{"class":1030},[1002,73633,73634,73637],{"class":1004,"line":1946},[1002,73635,73636],{"class":1015}," function",[1002,73638,9772],{"class":1030},[1002,73640,73641,73644,73646,73648,73650],{"class":1004,"line":1956},[1002,73642,73643],{"class":1030}," fn.",[1002,73645,17677],{"class":1026},[1002,73647,1031],{"class":1030},[1002,73649,3455],{"class":1019},[1002,73651,17684],{"class":1030},[1002,73653,73654,73657,73660,73662,73664],{"class":1004,"line":1961},[1002,73655,73656],{"class":1030}," }.",[1002,73658,73659],{"class":1026},"bind",[1002,73661,1031],{"class":1030},[1002,73663,3455],{"class":1019},[1002,73665,1257],{"class":1030},[1002,73667,73668],{"class":1004,"line":1971},[1002,73669,73670],{"class":1030}," delay,\n",[1002,73672,73673],{"class":1004,"line":1980},[1002,73674,22541],{"class":1030},[1002,73676,73677],{"class":1004,"line":1985},[1002,73678,15113],{"class":1030},[1002,73680,73681],{"class":1004,"line":1995},[1002,73682,1170],{"class":1030},[925,73684,73685],{},"We can call this function inside an event handler.",[993,73687,73689],{"className":995,"code":73688,"language":997,"meta":998,"style":998},"var searchBox = document.getElementById('search');\n\nsearchBox.onkeyup = debounce(function (event) {\n console.log('searching .. ' + searchBox.value);\n}, 1000);\n",[941,73690,73691,73711,73715,73734,73750],{"__ignoreMap":998},[1002,73692,73693,73695,73698,73700,73702,73704,73706,73709],{"class":1004,"line":1005},[1002,73694,18311],{"class":1015},[1002,73696,73697],{"class":1030}," searchBox ",[1002,73699,2393],{"class":1015},[1002,73701,16142],{"class":1030},[1002,73703,16591],{"class":1026},[1002,73705,1031],{"class":1030},[1002,73707,73708],{"class":1034},"'search'",[1002,73710,1085],{"class":1030},[1002,73712,73713],{"class":1004,"line":1012},[1002,73714,1051],{"emptyLinePlaceholder":1050},[1002,73716,73717,73720,73722,73724,73726,73728,73730,73732],{"class":1004,"line":1047},[1002,73718,73719],{"class":1030},"searchBox.onkeyup ",[1002,73721,2393],{"class":1015},[1002,73723,73538],{"class":1026},[1002,73725,1031],{"class":1030},[1002,73727,6965],{"class":1015},[1002,73729,6513],{"class":1030},[1002,73731,16696],{"class":2378},[1002,73733,2382],{"class":1030},[1002,73735,73736,73738,73740,73742,73745,73747],{"class":1004,"line":1054},[1002,73737,6977],{"class":1030},[1002,73739,2886],{"class":1026},[1002,73741,1031],{"class":1030},[1002,73743,73744],{"class":1034},"'searching .. '",[1002,73746,6583],{"class":1015},[1002,73748,73749],{"class":1030}," searchBox.value);\n",[1002,73751,73752,73754,73756],{"class":1004,"line":1060},[1002,73753,16635],{"class":1030},[1002,73755,6370],{"class":1019},[1002,73757,1085],{"class":1030},[925,73759,73760,73761,73764],{},"The returned function will be able to reference ",[941,73762,73763],{},"timer"," due to closure. Each call to the returned function will share this common timer.",[993,73766,73768],{"className":995,"code":73767,"language":997,"meta":998,"style":998},"var timer = null,\n",[941,73769,73770],{"__ignoreMap":998},[1002,73771,73772,73774,73776,73778,73780],{"class":1004,"line":1005},[1002,73773,18311],{"class":1015},[1002,73775,73556],{"class":1030},[1002,73777,2393],{"class":1015},[1002,73779,7080],{"class":1019},[1002,73781,1143],{"class":1030},[925,73783,73784],{},"Calling debounce returns a new anonymous function.",[993,73786,73788],{"className":995,"code":73787,"language":997,"meta":998,"style":998},"return function () {\n",[941,73789,73790],{"__ignoreMap":998},[1002,73791,73792,73794,73796],{"class":1004,"line":1005},[1002,73793,8975],{"class":1015},[1002,73795,8457],{"class":1015},[1002,73797,9772],{"class":1030},[925,73799,73800,73803],{},[941,73801,73802],{},"clearTimeout"," is the basic debounce behaviour where you can call this function several times, but it will only execute once before or after imposing a delay.\nEach time the returned function is called, the timer starts over.",[993,73805,73807],{"className":995,"code":73806,"language":997,"meta":998,"style":998},"clearTimeout(timeout);\n",[941,73808,73809],{"__ignoreMap":998},[1002,73810,73811,73813],{"class":1004,"line":1005},[1002,73812,73802],{"class":1026},[1002,73814,73815],{"class":1030},"(timeout);\n",[925,73817,73818,73819,73821,73822,73824],{},"Now you can call the original function with ",[941,73820,17677],{},". Apply lets you define the ",[941,73823,3455],{}," object as well as the arguments (both captured before setTimeout).",[925,73826,73827,73828,948],{},"The source code for this post can be found on ",[933,73829,38060],{"href":73830,"rel":73831},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fthrottle-function-calls",[937],[1579,73833,73834],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":73836},[73837,73838],{"id":73345,"depth":1012,"text":28517},{"id":73354,"depth":1012,"text":73355},"2015-11-25","\u002Fimages\u002Fblog\u002Ffeatures\u002Fthrottle-function-calls-in-javascript.jpg",{},{"title":850,"description":852},"blog\u002Fthrottle-function-calls-in-javascript",[16,17],"FWNRJXOXdYT7GyfSpKIi0IowC8wVInH44fiDnPj4vEU",{"id":73847,"title":792,"author":920,"body":73848,"date":75028,"description":794,"extension":1591,"image":75029,"meta":75030,"navigation":1050,"path":793,"seo":75031,"stem":75032,"tags":75033,"__hash__":75034},"blog\u002Fblog\u002Fservice-workers.md",{"type":922,"value":73849,"toc":75015},[73850,73860,73863,73869,73873,73879,73883,73886,73897,73900,73914,73918,73921,73925,73932,73936,73939,73943,73949,73972,73975,73982,74092,74113,74120,74139,74143,74148,74166,74170,74173,74192,74199,74363,74373,74377,74382,74881,74884,74898,74901,74921,74924,74963,74966,75003,75006,75012],[7100,73851,73853],{"type":24048,"title":73852},"Going Offline",[925,73854,73855,73856,73859],{},"Service Workers have ",[941,73857,73858],{},"scriptable caches",". Along with the ability to respond to network requests from certain web pages via a script, this provides a way for applications to “go offline”.",[925,73861,73862],{},"Service Worker is an API that lives inside the browser and sits between your web pages and your application servers. Once installed and activated, a ServiceWorker can programmatically determine how to respond to requests for resources from your origin, even when the browser is offline.",[7100,73864,73866],{"type":23379,"title":73865},"HTML5 Application Cache",[925,73867,73868],{},"Service Workers are meant to replace the HTML5 Application Cache (AppCache). Unlike AppCache, Service Workers are comprised of scriptable primitives that make it possible for application developers to build URL-friendly, always-available applications in a sane and layered way.",[953,73870,73872],{"id":73871},"browser-support","Browser Support",[925,73874,73875,73876,948],{},"Browser support for service wworkers is still behind. Google Chrome, Opera, and Firefox support service workers behind a ",[1107,73877,73878],{},"configuration flag",[1655,73880,73882],{"id":73881},"service-workers-versus-shared-workers","Service workers versus Shared Workers",[925,73884,73885],{},"Similarities:",[1530,73887,73888,73891,73894],{},[974,73889,73890],{},"No DOM access",[974,73892,73893],{},"Not tied to a page",[974,73895,73896],{},"Runs in its own global script context (own thread)",[925,73898,73899],{},"Differences",[1530,73901,73902,73905,73908,73911],{},[974,73903,73904],{},"HTTPS only",[974,73906,73907],{},"Defined upgrade model",[974,73909,73910],{},"Runs without any page at all",[974,73912,73913],{},"Even-driven, so can terminate when not in use, and run again when used",[953,73915,73917],{"id":73916},"over-httpssecure-connections-only","Over HTTPS\u002FSecure Connections only",[925,73919,73920],{},"Using service worker you can hijack connections, respond differently & filter responses. While you would use these powers for good, a man-in-the-middle might not. To avoid this, you can only register for service workers on pages served over HTTPS, so we know the service worker the browser receives hasn't been tampered with during its journey through the network.",[953,73922,73924],{"id":73923},"a-promise-based-api","A Promise Based API",[925,73926,73927,73928,73931],{},"The future of web browser API implementations is Promise-heavy. The ",[1107,73929,73930],{},"fetch API",", for example, sprinkles sweet Promise-based sugar on top of XMLHttpRequest. ServiceWorker makes occasional use of fetch, but there’s also worker registration, caching, and message passing, all of which are Promise-based.",[953,73933,73935],{"id":73934},"implement-a-service-worker","Implement a Service Worker",[925,73937,73938],{},"Let's start by creating a basic app, and add offline support to it.",[1655,73940,73942],{"id":73941},"registering-a-service-worker","Registering a Service Worker",[925,73944,73945,73946,73948],{},"The first step is registering the service worker. In a ",[941,73947,37652],{}," file, add following code:",[993,73950,73952],{"className":995,"code":73951,"language":997,"meta":998,"style":998},"if ('serviceWorker' in navigator) {\n}\n",[941,73953,73954,73968],{"__ignoreMap":998},[1002,73955,73956,73958,73960,73963,73965],{"class":1004,"line":1005},[1002,73957,46126],{"class":1015},[1002,73959,6513],{"class":1030},[1002,73961,73962],{"class":1034},"'serviceWorker'",[1002,73964,7337],{"class":1015},[1002,73966,73967],{"class":1030}," navigator) {\n",[1002,73969,73970],{"class":1004,"line":1012},[1002,73971,1170],{"class":1030},[925,73973,73974],{},"Here we are detecting if the feature is available.",[925,73976,73977,73978,73981],{},"Next, we will call ",[941,73979,73980],{},".register"," and pass in a JavaScript resource to be executed in the context of a service worker.",[993,73983,73985],{"className":995,"code":73984,"language":997,"meta":998,"style":998},"if ('serviceWorker' in navigator) {\n console.log('CLIENT: registration in progress.');\n navigator.serviceWorker.register('service-worker.js').then(\n function () {\n console.log('CLIENT: registration complete.');\n },\n function (err) {\n console.log('CLIENT: registration failure - ' + err);\n },\n );\n}\n",[941,73986,73987,73999,74012,74031,74037,74050,74054,74064,74080,74084,74088],{"__ignoreMap":998},[1002,73988,73989,73991,73993,73995,73997],{"class":1004,"line":1005},[1002,73990,46126],{"class":1015},[1002,73992,6513],{"class":1030},[1002,73994,73962],{"class":1034},[1002,73996,7337],{"class":1015},[1002,73998,73967],{"class":1030},[1002,74000,74001,74003,74005,74007,74010],{"class":1004,"line":1012},[1002,74002,6977],{"class":1030},[1002,74004,2886],{"class":1026},[1002,74006,1031],{"class":1030},[1002,74008,74009],{"class":1034},"'CLIENT: registration in progress.'",[1002,74011,1085],{"class":1030},[1002,74013,74014,74017,74020,74022,74025,74027,74029],{"class":1004,"line":1047},[1002,74015,74016],{"class":1030}," navigator.serviceWorker.",[1002,74018,74019],{"class":1026},"register",[1002,74021,1031],{"class":1030},[1002,74023,74024],{"class":1034},"'service-worker.js'",[1002,74026,1539],{"class":1030},[1002,74028,25658],{"class":1026},[1002,74030,10468],{"class":1030},[1002,74032,74033,74035],{"class":1004,"line":1054},[1002,74034,53413],{"class":1015},[1002,74036,9772],{"class":1030},[1002,74038,74039,74041,74043,74045,74048],{"class":1004,"line":1060},[1002,74040,17336],{"class":1030},[1002,74042,2886],{"class":1026},[1002,74044,1031],{"class":1030},[1002,74046,74047],{"class":1034},"'CLIENT: registration complete.'",[1002,74049,1085],{"class":1030},[1002,74051,74052],{"class":1004,"line":1272},[1002,74053,15108],{"class":1030},[1002,74055,74056,74058,74060,74062],{"class":1004,"line":1348},[1002,74057,53413],{"class":1015},[1002,74059,6513],{"class":1030},[1002,74061,31035],{"class":2378},[1002,74063,2382],{"class":1030},[1002,74065,74066,74068,74070,74072,74075,74077],{"class":1004,"line":1354},[1002,74067,17336],{"class":1030},[1002,74069,2886],{"class":1026},[1002,74071,1031],{"class":1030},[1002,74073,74074],{"class":1034},"'CLIENT: registration failure - '",[1002,74076,6583],{"class":1015},[1002,74078,74079],{"class":1030}," err);\n",[1002,74081,74082],{"class":1004,"line":1360},[1002,74083,15108],{"class":1030},[1002,74085,74086],{"class":1004,"line":1366},[1002,74087,10503],{"class":1030},[1002,74089,74090],{"class":1004,"line":1946},[1002,74091,1170],{"class":1030},[7100,74093,74094],{"type":23379},[925,74095,74096,74097,74100,74101,74104,74105,16529,74107,74109,74110,74112],{},"Make sure your ",[941,74098,74099],{},"service-worker.js"," file is served from the ",[941,74102,74103],{},"root"," directory, not from ",[941,74106,37223],{},[941,74108,997],{}," or similar directory, because the ",[1107,74111,6028],{}," of your service worker will be limited to the given folder your JS file is in.",[925,74114,74115,74116,74119],{},"To test this, you can fire up a server using ",[1107,74117,74118],{},"SimpleHTTPServer"," as follows:",[993,74121,74123],{"className":1797,"code":74122,"language":1799,"meta":998,"style":998}," python -m SimpleHTTPServer 8901\n",[941,74124,74125],{"__ignoreMap":998},[1002,74126,74127,74130,74133,74136],{"class":1004,"line":1005},[1002,74128,74129],{"class":1026}," python",[1002,74131,74132],{"class":1019}," -m",[1002,74134,74135],{"class":1034}," SimpleHTTPServer",[1002,74137,74138],{"class":1019}," 8901\n",[953,74140,74142],{"id":74141},"lifecycle","Lifecycle",[925,74144,74145,74146,948],{},"Service worker script goes through three stages when you call ",[941,74147,74019],{},[1530,74149,74150,74155,74160],{},[974,74151,74152,74154],{},[941,74153,49123],{}," - this event fires whenever a request originates from your service worker scope",[974,74156,74157,74159],{},[941,74158,28561],{}," - this event fires when a service worker is first fetched",[974,74161,74162,74165],{},[941,74163,74164],{},"activate"," - this event fires after a successful installation",[953,74167,74169],{"id":74168},"installing-the-service-worker","Installing the service worker",[925,74171,74172],{},"A version number is useful when updating the worker logic, allowing you to remove outdated cache entries during the activation step.",[993,74174,74176],{"className":995,"code":74175,"language":997,"meta":998,"style":998},"var version = 'v1::';\n",[941,74177,74178],{"__ignoreMap":998},[1002,74179,74180,74182,74185,74187,74190],{"class":1004,"line":1005},[1002,74181,18311],{"class":1015},[1002,74183,74184],{"class":1030}," version ",[1002,74186,2393],{"class":1015},[1002,74188,74189],{"class":1034}," 'v1::'",[1002,74191,1407],{"class":1030},[925,74193,74194,74195,2034,74197,1813],{},"You can use events to interact with ",[941,74196,28561],{},[941,74198,74164],{},[993,74200,74202],{"className":995,"code":74201,"language":997,"meta":998,"style":998},"var version = 'v1::';\n\nself.addEventListener('install', function (event) {\n console.log('WORKER: install event in progress');\n event.waitUntil(\n caches\n .open(version)\n .then(function (cache) {\n return cache.addAll(['\u002F', '\u002Fcss\u002Fstyle.css', '\u002Fsrc\u002Findex.js']);\n })\n .then(function () {\n console.log('WORKER: install completed');\n }),\n );\n});\n",[941,74203,74204,74216,74220,74242,74255,74265,74270,74279,74296,74322,74326,74338,74351,74355,74359],{"__ignoreMap":998},[1002,74205,74206,74208,74210,74212,74214],{"class":1004,"line":1005},[1002,74207,18311],{"class":1015},[1002,74209,74184],{"class":1030},[1002,74211,2393],{"class":1015},[1002,74213,74189],{"class":1034},[1002,74215,1407],{"class":1030},[1002,74217,74218],{"class":1004,"line":1012},[1002,74219,1051],{"emptyLinePlaceholder":1050},[1002,74221,74222,74225,74227,74229,74232,74234,74236,74238,74240],{"class":1004,"line":1047},[1002,74223,74224],{"class":1030},"self.",[1002,74226,16726],{"class":1026},[1002,74228,1031],{"class":1030},[1002,74230,74231],{"class":1034},"'install'",[1002,74233,1251],{"class":1030},[1002,74235,6965],{"class":1015},[1002,74237,6513],{"class":1030},[1002,74239,16696],{"class":2378},[1002,74241,2382],{"class":1030},[1002,74243,74244,74246,74248,74250,74253],{"class":1004,"line":1054},[1002,74245,6977],{"class":1030},[1002,74247,2886],{"class":1026},[1002,74249,1031],{"class":1030},[1002,74251,74252],{"class":1034},"'WORKER: install event in progress'",[1002,74254,1085],{"class":1030},[1002,74256,74257,74260,74263],{"class":1004,"line":1060},[1002,74258,74259],{"class":1030}," event.",[1002,74261,74262],{"class":1026},"waitUntil",[1002,74264,10468],{"class":1030},[1002,74266,74267],{"class":1004,"line":1272},[1002,74268,74269],{"class":1030}," caches\n",[1002,74271,74272,74274,74276],{"class":1004,"line":1348},[1002,74273,40738],{"class":1030},[1002,74275,46144],{"class":1026},[1002,74277,74278],{"class":1030},"(version)\n",[1002,74280,74281,74283,74285,74287,74289,74291,74294],{"class":1004,"line":1354},[1002,74282,40738],{"class":1030},[1002,74284,25658],{"class":1026},[1002,74286,1031],{"class":1030},[1002,74288,6965],{"class":1015},[1002,74290,6513],{"class":1030},[1002,74292,74293],{"class":2378},"cache",[1002,74295,2382],{"class":1030},[1002,74297,74298,74300,74303,74306,74308,74310,74312,74315,74317,74320],{"class":1004,"line":1360},[1002,74299,8341],{"class":1015},[1002,74301,74302],{"class":1030}," cache.",[1002,74304,74305],{"class":1026},"addAll",[1002,74307,30910],{"class":1030},[1002,74309,22153],{"class":1034},[1002,74311,1251],{"class":1030},[1002,74313,74314],{"class":1034},"'\u002Fcss\u002Fstyle.css'",[1002,74316,1251],{"class":1030},[1002,74318,74319],{"class":1034},"'\u002Fsrc\u002Findex.js'",[1002,74321,29611],{"class":1030},[1002,74323,74324],{"class":1004,"line":1366},[1002,74325,59298],{"class":1030},[1002,74327,74328,74330,74332,74334,74336],{"class":1004,"line":1946},[1002,74329,40738],{"class":1030},[1002,74331,25658],{"class":1026},[1002,74333,1031],{"class":1030},[1002,74335,6965],{"class":1015},[1002,74337,9772],{"class":1030},[1002,74339,74340,74342,74344,74346,74349],{"class":1004,"line":1956},[1002,74341,14508],{"class":1030},[1002,74343,2886],{"class":1026},[1002,74345,1031],{"class":1030},[1002,74347,74348],{"class":1034},"'WORKER: install completed'",[1002,74350,1085],{"class":1030},[1002,74352,74353],{"class":1004,"line":1961},[1002,74354,59892],{"class":1030},[1002,74356,74357],{"class":1004,"line":1971},[1002,74358,10503],{"class":1030},[1002,74360,74361],{"class":1004,"line":1980},[1002,74362,2804],{"class":1030},[925,74364,74365,74366,74369,74370,74372],{},"You can pass a promise to ",[941,74367,74368],{},"event.waitUntil"," to extend the installation process. Once ",[941,74371,74164],{}," event fires, your service worker can control pages.",[953,74374,74376],{"id":74375},"intercept-fetch-requests","Intercept Fetch Requests",[925,74378,3898,74379,74381],{},[941,74380,49123],{}," event fires whenever a page controlled by this service worker requests a resource.",[993,74383,74385],{"className":995,"code":74384,"language":997,"meta":998,"style":998},"self.addEventListener(\"fetch\", function(event) {\n console.log('WORKER: fetch event in progress.');\n\n if (event.request.method !== 'GET') {\n console.log(\n 'WORKER: fetch event ignored.',\n event.request.method, event.request.url\n );\n return;\n }\n\n event.respondWith(\n caches.match(event.request).then(function(cached) {\n var networked = fetch(event.request)\n .then(fetchedFromNetwork, unableToResolve)\n .catch(unableToResolve);\n\n console.log(\n 'WORKER: fetch event', cached ? '(cached)' :\n '(network)', event.request.url\n );\n\n return cached || networked;\n\n function fetchedFromNetwork(response) {\n var cacheCopy = response.clone();\n\n console.log(\n 'WORKER: fetch response from network.',\n event.request.url\n );\n caches\n .open(version + 'pages')\n .then(function add(cache) {\n cache.put(event.request, cacheCopy);\n })\n .then(function() {\n console.log(\n 'WORKER: fetch response stored in cache.',\n event.request.url\n );\n });\n\n return response;\n }\n\n function unableToResolve () {\n console.log(\n 'WORKER: fetch request failed in both cache and network.'\n );\n\n return new Response('\u003Ch1>Service Unavailable\u003C\u002Fh1>', {\n status: 503,\n statusText: 'Service Unavailable',\n headers: new Headers({\n 'Content-Type': 'text\u002Fhtml'\n })\n });\n });\n});\n",[941,74386,74387,74408,74421,74425,74439,74447,74454,74459,74463,74469,74473,74477,74486,74510,74525,74534,74543,74547,74555,74571,74579,74583,74587,74599,74603,74616,74632,74636,74644,74651,74656,74661,74666,74683,74701,74711,74716,74728,74737,74744,74749,74754,74758,74762,74770,74774,74778,74787,74795,74800,74804,74808,74824,74834,74844,74855,74865,74869,74873,74877],{"__ignoreMap":998},[1002,74388,74389,74391,74393,74395,74398,74400,74402,74404,74406],{"class":1004,"line":1005},[1002,74390,74224],{"class":1030},[1002,74392,16726],{"class":1026},[1002,74394,1031],{"class":1030},[1002,74396,74397],{"class":1034},"\"fetch\"",[1002,74399,1251],{"class":1030},[1002,74401,6965],{"class":1015},[1002,74403,1031],{"class":1030},[1002,74405,16696],{"class":2378},[1002,74407,2382],{"class":1030},[1002,74409,74410,74412,74414,74416,74419],{"class":1004,"line":1012},[1002,74411,6977],{"class":1030},[1002,74413,2886],{"class":1026},[1002,74415,1031],{"class":1030},[1002,74417,74418],{"class":1034},"'WORKER: fetch event in progress.'",[1002,74420,1085],{"class":1030},[1002,74422,74423],{"class":1004,"line":1047},[1002,74424,1051],{"emptyLinePlaceholder":1050},[1002,74426,74427,74429,74432,74434,74437],{"class":1004,"line":1054},[1002,74428,19971],{"class":1015},[1002,74430,74431],{"class":1030}," (event.request.method ",[1002,74433,7357],{"class":1015},[1002,74435,74436],{"class":1034}," 'GET'",[1002,74438,2382],{"class":1030},[1002,74440,74441,74443,74445],{"class":1004,"line":1060},[1002,74442,3030],{"class":1030},[1002,74444,2886],{"class":1026},[1002,74446,10468],{"class":1030},[1002,74448,74449,74452],{"class":1004,"line":1272},[1002,74450,74451],{"class":1034}," 'WORKER: fetch event ignored.'",[1002,74453,1143],{"class":1030},[1002,74455,74456],{"class":1004,"line":1348},[1002,74457,74458],{"class":1030}," event.request.method, event.request.url\n",[1002,74460,74461],{"class":1004,"line":1354},[1002,74462,22541],{"class":1030},[1002,74464,74465,74467],{"class":1004,"line":1360},[1002,74466,2687],{"class":1015},[1002,74468,1407],{"class":1030},[1002,74470,74471],{"class":1004,"line":1366},[1002,74472,1269],{"class":1030},[1002,74474,74475],{"class":1004,"line":1946},[1002,74476,1051],{"emptyLinePlaceholder":1050},[1002,74478,74479,74481,74484],{"class":1004,"line":1956},[1002,74480,74259],{"class":1030},[1002,74482,74483],{"class":1026},"respondWith",[1002,74485,10468],{"class":1030},[1002,74487,74488,74491,74494,74497,74499,74501,74503,74505,74508],{"class":1004,"line":1961},[1002,74489,74490],{"class":1030}," caches.",[1002,74492,74493],{"class":1026},"match",[1002,74495,74496],{"class":1030},"(event.request).",[1002,74498,25658],{"class":1026},[1002,74500,1031],{"class":1030},[1002,74502,6965],{"class":1015},[1002,74504,1031],{"class":1030},[1002,74506,74507],{"class":2378},"cached",[1002,74509,2382],{"class":1030},[1002,74511,74512,74515,74518,74520,74522],{"class":1004,"line":1971},[1002,74513,74514],{"class":1015}," var",[1002,74516,74517],{"class":1030}," networked ",[1002,74519,2393],{"class":1015},[1002,74521,15050],{"class":1026},[1002,74523,74524],{"class":1030},"(event.request)\n",[1002,74526,74527,74529,74531],{"class":1004,"line":1980},[1002,74528,48319],{"class":1030},[1002,74530,25658],{"class":1026},[1002,74532,74533],{"class":1030},"(fetchedFromNetwork, unableToResolve)\n",[1002,74535,74536,74538,74540],{"class":1004,"line":1985},[1002,74537,48319],{"class":1030},[1002,74539,30648],{"class":1026},[1002,74541,74542],{"class":1030},"(unableToResolve);\n",[1002,74544,74545],{"class":1004,"line":1995},[1002,74546,1051],{"emptyLinePlaceholder":1050},[1002,74548,74549,74551,74553],{"class":1004,"line":2006},[1002,74550,17336],{"class":1030},[1002,74552,2886],{"class":1026},[1002,74554,10468],{"class":1030},[1002,74556,74557,74560,74563,74565,74568],{"class":1004,"line":2011},[1002,74558,74559],{"class":1034}," 'WORKER: fetch event'",[1002,74561,74562],{"class":1030},", cached ",[1002,74564,24117],{"class":1015},[1002,74566,74567],{"class":1034}," '(cached)'",[1002,74569,74570],{"class":1015}," :\n",[1002,74572,74573,74576],{"class":1004,"line":2017},[1002,74574,74575],{"class":1034}," '(network)'",[1002,74577,74578],{"class":1030},", event.request.url\n",[1002,74580,74581],{"class":1004,"line":2022},[1002,74582,13605],{"class":1030},[1002,74584,74585],{"class":1004,"line":2442},[1002,74586,1051],{"emptyLinePlaceholder":1050},[1002,74588,74589,74591,74594,74596],{"class":1004,"line":2466},[1002,74590,4376],{"class":1015},[1002,74592,74593],{"class":1030}," cached ",[1002,74595,8392],{"class":1015},[1002,74597,74598],{"class":1030}," networked;\n",[1002,74600,74601],{"class":1004,"line":2471},[1002,74602,1051],{"emptyLinePlaceholder":1050},[1002,74604,74605,74607,74610,74612,74614],{"class":1004,"line":2476},[1002,74606,73636],{"class":1015},[1002,74608,74609],{"class":1026}," fetchedFromNetwork",[1002,74611,1031],{"class":1030},[1002,74613,28368],{"class":2378},[1002,74615,2382],{"class":1030},[1002,74617,74618,74621,74624,74626,74628,74630],{"class":1004,"line":2481},[1002,74619,74620],{"class":1015}," var",[1002,74622,74623],{"class":1030}," cacheCopy ",[1002,74625,2393],{"class":1015},[1002,74627,19894],{"class":1030},[1002,74629,4204],{"class":1026},[1002,74631,1428],{"class":1030},[1002,74633,74634],{"class":1004,"line":2491},[1002,74635,1051],{"emptyLinePlaceholder":1050},[1002,74637,74638,74640,74642],{"class":1004,"line":2502},[1002,74639,14508],{"class":1030},[1002,74641,2886],{"class":1026},[1002,74643,10468],{"class":1030},[1002,74645,74646,74649],{"class":1004,"line":2513},[1002,74647,74648],{"class":1034}," 'WORKER: fetch response from network.'",[1002,74650,1143],{"class":1030},[1002,74652,74653],{"class":1004,"line":2535},[1002,74654,74655],{"class":1030}," event.request.url\n",[1002,74657,74658],{"class":1004,"line":2557},[1002,74659,74660],{"class":1030}," );\n",[1002,74662,74663],{"class":1004,"line":2562},[1002,74664,74665],{"class":1030}," caches\n",[1002,74667,74668,74671,74673,74676,74678,74681],{"class":1004,"line":2567},[1002,74669,74670],{"class":1030}," .",[1002,74672,46144],{"class":1026},[1002,74674,74675],{"class":1030},"(version ",[1002,74677,5064],{"class":1015},[1002,74679,74680],{"class":1034}," 'pages'",[1002,74682,3808],{"class":1030},[1002,74684,74685,74687,74689,74691,74693,74695,74697,74699],{"class":1004,"line":2572},[1002,74686,74670],{"class":1030},[1002,74688,25658],{"class":1026},[1002,74690,1031],{"class":1030},[1002,74692,6965],{"class":1015},[1002,74694,27368],{"class":1026},[1002,74696,1031],{"class":1030},[1002,74698,74293],{"class":2378},[1002,74700,2382],{"class":1030},[1002,74702,74703,74706,74708],{"class":1004,"line":2582},[1002,74704,74705],{"class":1030}," cache.",[1002,74707,48989],{"class":1026},[1002,74709,74710],{"class":1030},"(event.request, cacheCopy);\n",[1002,74712,74713],{"class":1004,"line":2594},[1002,74714,74715],{"class":1030}," })\n",[1002,74717,74718,74720,74722,74724,74726],{"class":1004,"line":2603},[1002,74719,74670],{"class":1030},[1002,74721,25658],{"class":1026},[1002,74723,1031],{"class":1030},[1002,74725,6965],{"class":1015},[1002,74727,3025],{"class":1030},[1002,74729,74730,74733,74735],{"class":1004,"line":2619},[1002,74731,74732],{"class":1030}," console.",[1002,74734,2886],{"class":1026},[1002,74736,10468],{"class":1030},[1002,74738,74739,74742],{"class":1004,"line":2633},[1002,74740,74741],{"class":1034}," 'WORKER: fetch response stored in cache.'",[1002,74743,1143],{"class":1030},[1002,74745,74746],{"class":1004,"line":2641},[1002,74747,74748],{"class":1030}," event.request.url\n",[1002,74750,74751],{"class":1004,"line":2655},[1002,74752,74753],{"class":1030}," );\n",[1002,74755,74756],{"class":1004,"line":2667},[1002,74757,21164],{"class":1030},[1002,74759,74760],{"class":1004,"line":2674},[1002,74761,1051],{"emptyLinePlaceholder":1050},[1002,74763,74764,74767],{"class":1004,"line":2679},[1002,74765,74766],{"class":1015}," return",[1002,74768,74769],{"class":1030}," response;\n",[1002,74771,74772],{"class":1004,"line":2684},[1002,74773,1351],{"class":1030},[1002,74775,74776],{"class":1004,"line":2704},[1002,74777,1051],{"emptyLinePlaceholder":1050},[1002,74779,74780,74782,74785],{"class":1004,"line":2709},[1002,74781,73636],{"class":1015},[1002,74783,74784],{"class":1026}," unableToResolve",[1002,74786,9772],{"class":1030},[1002,74788,74789,74791,74793],{"class":1004,"line":2714},[1002,74790,14508],{"class":1030},[1002,74792,2886],{"class":1026},[1002,74794,10468],{"class":1030},[1002,74796,74797],{"class":1004,"line":2719},[1002,74798,74799],{"class":1034}," 'WORKER: fetch request failed in both cache and network.'\n",[1002,74801,74802],{"class":1004,"line":2735},[1002,74803,74660],{"class":1030},[1002,74805,74806],{"class":1004,"line":2740},[1002,74807,1051],{"emptyLinePlaceholder":1050},[1002,74809,74810,74812,74814,74817,74819,74822],{"class":1004,"line":2759},[1002,74811,8341],{"class":1015},[1002,74813,2690],{"class":1015},[1002,74815,74816],{"class":1026}," Response",[1002,74818,1031],{"class":1030},[1002,74820,74821],{"class":1034},"'\u003Ch1>Service Unavailable\u003C\u002Fh1>'",[1002,74823,38330],{"class":1030},[1002,74825,74826,74829,74832],{"class":1004,"line":2774},[1002,74827,74828],{"class":1030}," status: ",[1002,74830,74831],{"class":1019},"503",[1002,74833,1143],{"class":1030},[1002,74835,74836,74839,74842],{"class":1004,"line":2790},[1002,74837,74838],{"class":1030}," statusText: ",[1002,74840,74841],{"class":1034},"'Service Unavailable'",[1002,74843,1143],{"class":1030},[1002,74845,74846,74849,74851,74853],{"class":1004,"line":2801},[1002,74847,74848],{"class":1030}," headers: ",[1002,74850,5654],{"class":1015},[1002,74852,61531],{"class":1026},[1002,74854,2756],{"class":1030},[1002,74856,74857,74860,74862],{"class":1004,"line":2807},[1002,74858,74859],{"class":1034}," 'Content-Type'",[1002,74861,1137],{"class":1030},[1002,74863,74864],{"class":1034},"'text\u002Fhtml'\n",[1002,74866,74867],{"class":1004,"line":2812},[1002,74868,74715],{"class":1030},[1002,74870,74871],{"class":1004,"line":2828},[1002,74872,49109],{"class":1030},[1002,74874,74875],{"class":1004,"line":2841},[1002,74876,8353],{"class":1030},[1002,74878,74879],{"class":1004,"line":2854},[1002,74880,2804],{"class":1030},[925,74882,74883],{},"Let's have a look at what's going on here:",[993,74885,74887],{"className":995,"code":74886,"language":997,"meta":998,"style":998},"caches.keys();\n",[941,74888,74889],{"__ignoreMap":998},[1002,74890,74891,74894,74896],{"class":1004,"line":1005},[1002,74892,74893],{"class":1030},"caches.",[1002,74895,33700],{"class":1026},[1002,74897,1428],{"class":1030},[925,74899,74900],{},"This method returns a promise which will resolve to an array of available cache keys.",[993,74902,74904],{"className":995,"code":74903,"language":997,"meta":998,"style":998},"return Promise.all( ...\n",[941,74905,74906],{"__ignoreMap":998},[1002,74907,74908,74910,74912,74914,74916,74919],{"class":1004,"line":1005},[1002,74909,8975],{"class":1015},[1002,74911,25561],{"class":1019},[1002,74913,948],{"class":1030},[1002,74915,17964],{"class":1026},[1002,74917,74918],{"class":1030},"( ",[1002,74920,48279],{"class":1015},[925,74922,74923],{},"We return a promise that settles when all outdated caches are deleted.",[993,74925,74927],{"className":995,"code":74926,"language":997,"meta":998,"style":998},".filter(function (key) {\n return !key.startsWith(version);\n})\n",[941,74928,74929,74945,74959],{"__ignoreMap":998},[1002,74930,74931,74933,74935,74937,74939,74941,74943],{"class":1004,"line":1005},[1002,74932,948],{"class":1030},[1002,74934,8313],{"class":1026},[1002,74936,1031],{"class":1030},[1002,74938,6965],{"class":1015},[1002,74940,6513],{"class":1030},[1002,74942,7857],{"class":2378},[1002,74944,2382],{"class":1030},[1002,74946,74947,74949,74951,74954,74956],{"class":1004,"line":1012},[1002,74948,15066],{"class":1015},[1002,74950,32289],{"class":1015},[1002,74952,74953],{"class":1030},"key.",[1002,74955,6069],{"class":1026},[1002,74957,74958],{"class":1030},"(version);\n",[1002,74960,74961],{"class":1004,"line":1047},[1002,74962,61217],{"class":1030},[925,74964,74965],{},"Filter by keys that don't start with the latest version prefix.",[993,74967,74969],{"className":995,"code":74968,"language":997,"meta":998,"style":998},".map(function (key) {\n return caches.delete(key);\n})\n",[941,74970,74971,74987,74999],{"__ignoreMap":998},[1002,74972,74973,74975,74977,74979,74981,74983,74985],{"class":1004,"line":1005},[1002,74974,948],{"class":1030},[1002,74976,19444],{"class":1026},[1002,74978,1031],{"class":1030},[1002,74980,6965],{"class":1015},[1002,74982,6513],{"class":1030},[1002,74984,7857],{"class":2378},[1002,74986,2382],{"class":1030},[1002,74988,74989,74991,74994,74996],{"class":1004,"line":1012},[1002,74990,15066],{"class":1015},[1002,74992,74993],{"class":1030}," caches.",[1002,74995,52128],{"class":1026},[1002,74997,74998],{"class":1030},"(key);\n",[1002,75000,75001],{"class":1004,"line":1047},[1002,75002,61217],{"class":1030},[925,75004,75005],{},"Return a promise that's fulfilled when each outdated cache is deleted.",[925,75007,44366,75008,948],{},[933,75009,38060],{"href":75010,"rel":75011},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fservice-workers",[937],[1579,75013,75014],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":75016},[75017,75020,75021,75022,75025,75026,75027],{"id":73871,"depth":1012,"text":73872,"children":75018},[75019],{"id":73881,"depth":1047,"text":73882},{"id":73916,"depth":1012,"text":73917},{"id":73923,"depth":1012,"text":73924},{"id":73934,"depth":1012,"text":73935,"children":75023},[75024],{"id":73941,"depth":1047,"text":73942},{"id":74141,"depth":1012,"text":74142},{"id":74168,"depth":1012,"text":74169},{"id":74375,"depth":1012,"text":74376},"2015-11-23","\u002Fimages\u002Fblog\u002Ffeatures\u002Fservice-workers.jpg",{},{"title":792,"description":794},"blog\u002Fservice-workers",[16,17,796],"2F-PdjmNbDCa-GmhF_-LL-5WmPdP8vhbFiovknhJlHc",{"id":75036,"title":580,"author":920,"body":75037,"date":76849,"description":582,"extension":1591,"image":76850,"meta":76851,"navigation":1050,"path":581,"seo":76852,"stem":76853,"tags":76854,"__hash__":76855},"blog\u002Fblog\u002Fnode-js-security.md",{"type":922,"value":75038,"toc":76823},[75039,75042,75045,75077,75080,75084,75087,75422,75433,75555,75558,75561,75590,75603,75605,75614,75682,75686,75689,75786,75795,75799,75802,75805,75808,75811,75818,76097,76100,76210,76213,76217,76224,76226,76237,76250,76259,76268,76299,76303,76306,76310,76313,76319,76323,76326,76329,76355,76359,76362,76368,76388,76396,76430,76433,76436,76439,76442,76445,76474,76476,76479,76488,76512,76515,76518,76521,76529,76535,76559,76565,76581,76584,76588,76591,76605,76612,76814,76820],[925,75040,75041],{},"In this article we will go through some of the key facts to keep in mind when you are implementing a Node.js application.",[925,75043,75044],{},"The areas of security we will cover are:",[1530,75046,75047,75050,75053,75056,75059,75062,75065,75068,75071,75074],{},[974,75048,75049],{},"Authentication",[974,75051,75052],{},"Configuration Management",[974,75054,75055],{},"CSRF",[974,75057,75058],{},"Data Validation",[974,75060,75061],{},"Denial of Service",[974,75063,75064],{},"Error Handling",[974,75066,75067],{},"HTTP Strict Transport Security (HSTS)",[974,75069,75070],{},"Node Package Manager (NPM)",[974,75072,75073],{},"Secure Transmission",[974,75075,75076],{},"Session Management",[953,75078,75049],{"id":75079},"authentication",[1655,75081,75083],{"id":75082},"brute-force-protection","Brute Force Protection",[925,75085,75086],{},"To throttle invalid login attempts as well as to prevent online cracking and to reduce unnecessary database calls, we could implement a solution similar to the following:",[993,75088,75090],{"className":995,"code":75089,"language":997,"meta":998,"style":998},"var failedIPs = {},\n TEN_MINS = 600000,\n THIRTY_MINS = 3 * TEN_MINS;\n\nfunction tryToLogin() {\n var failed = failedIPs[remoteIp];\n if (failed && Date.now() \u003C failed.nextAttemptTime) {\n return res.error(); \u002F\u002F Throttled. Can't try yet.\n } else {\n \u002F\u002F Otherwise do login\n }\n}\n\nfunction onLoginFail() {\n var failed = (failedIPs[remoteIp] = failedIPs[remoteIp] || {\n count: 0,\n nextAttemptTime: new Date(),\n });\n\n ++failed.count;\n \u002F\u002F Wait another two seconds for every failed attempt\n failed.nextAttemptTime.setTime(Date.now() + 2000 * failed.count);\n}\n\nfunction onLoginSuccess() {\n delete failedIPs[remoteIp];\n}\n\n\u002F\u002F Clean up people that have given up\nsetInterval(function () {\n for (var ip in failedIPs) {\n if (Date.now() - failedIPs[ip].nextAttemptTime > TEN_MINS) {\n delete failedIPs[ip];\n }\n }\n}, THIRTY_MINS);\n",[941,75091,75092,75104,75116,75132,75136,75145,75157,75179,75192,75200,75205,75209,75213,75217,75226,75246,75255,75266,75270,75274,75282,75287,75312,75316,75320,75329,75336,75340,75344,75349,75359,75375,75397,75405,75409,75413],{"__ignoreMap":998},[1002,75093,75094,75096,75099,75101],{"class":1004,"line":1005},[1002,75095,18311],{"class":1015},[1002,75097,75098],{"class":1030}," failedIPs ",[1002,75100,2393],{"class":1015},[1002,75102,75103],{"class":1030}," {},\n",[1002,75105,75106,75109,75111,75114],{"class":1004,"line":1012},[1002,75107,75108],{"class":1019}," TEN_MINS",[1002,75110,1023],{"class":1015},[1002,75112,75113],{"class":1019}," 600000",[1002,75115,1143],{"class":1030},[1002,75117,75118,75121,75123,75125,75127,75130],{"class":1004,"line":1047},[1002,75119,75120],{"class":1019}," THIRTY_MINS",[1002,75122,1023],{"class":1015},[1002,75124,17813],{"class":1019},[1002,75126,6090],{"class":1015},[1002,75128,75129],{"class":1019}," TEN_MINS",[1002,75131,1407],{"class":1030},[1002,75133,75134],{"class":1004,"line":1054},[1002,75135,1051],{"emptyLinePlaceholder":1050},[1002,75137,75138,75140,75143],{"class":1004,"line":1060},[1002,75139,6965],{"class":1015},[1002,75141,75142],{"class":1026}," tryToLogin",[1002,75144,3025],{"class":1030},[1002,75146,75147,75149,75152,75154],{"class":1004,"line":1272},[1002,75148,28293],{"class":1015},[1002,75150,75151],{"class":1030}," failed ",[1002,75153,2393],{"class":1015},[1002,75155,75156],{"class":1030}," failedIPs[remoteIp];\n",[1002,75158,75159,75161,75164,75166,75169,75172,75174,75176],{"class":1004,"line":1348},[1002,75160,19971],{"class":1015},[1002,75162,75163],{"class":1030}," (failed ",[1002,75165,13133],{"class":1015},[1002,75167,75168],{"class":1030}," Date.",[1002,75170,75171],{"class":1026},"now",[1002,75173,10191],{"class":1030},[1002,75175,6539],{"class":1015},[1002,75177,75178],{"class":1030}," failed.nextAttemptTime) {\n",[1002,75180,75181,75183,75185,75187,75189],{"class":1004,"line":1354},[1002,75182,2687],{"class":1015},[1002,75184,24519],{"class":1030},[1002,75186,25064],{"class":1026},[1002,75188,6859],{"class":1030},[1002,75190,75191],{"class":1008},"\u002F\u002F Throttled. Can't try yet.\n",[1002,75193,75194,75196,75198],{"class":1004,"line":1360},[1002,75195,30770],{"class":1030},[1002,75197,6060],{"class":1015},[1002,75199,1457],{"class":1030},[1002,75201,75202],{"class":1004,"line":1366},[1002,75203,75204],{"class":1008}," \u002F\u002F Otherwise do login\n",[1002,75206,75207],{"class":1004,"line":1946},[1002,75208,1269],{"class":1030},[1002,75210,75211],{"class":1004,"line":1956},[1002,75212,1170],{"class":1030},[1002,75214,75215],{"class":1004,"line":1961},[1002,75216,1051],{"emptyLinePlaceholder":1050},[1002,75218,75219,75221,75224],{"class":1004,"line":1971},[1002,75220,6965],{"class":1015},[1002,75222,75223],{"class":1026}," onLoginFail",[1002,75225,3025],{"class":1030},[1002,75227,75228,75230,75232,75234,75237,75239,75242,75244],{"class":1004,"line":1980},[1002,75229,28293],{"class":1015},[1002,75231,75151],{"class":1030},[1002,75233,2393],{"class":1015},[1002,75235,75236],{"class":1030}," (failedIPs[remoteIp] ",[1002,75238,2393],{"class":1015},[1002,75240,75241],{"class":1030}," failedIPs[remoteIp] ",[1002,75243,8392],{"class":1015},[1002,75245,1457],{"class":1030},[1002,75247,75248,75251,75253],{"class":1004,"line":1985},[1002,75249,75250],{"class":1030}," count: ",[1002,75252,5867],{"class":1019},[1002,75254,1143],{"class":1030},[1002,75256,75257,75260,75262,75264],{"class":1004,"line":1995},[1002,75258,75259],{"class":1030}," nextAttemptTime: ",[1002,75261,5654],{"class":1015},[1002,75263,31486],{"class":1026},[1002,75265,15088],{"class":1030},[1002,75267,75268],{"class":1004,"line":2006},[1002,75269,19836],{"class":1030},[1002,75271,75272],{"class":1004,"line":2011},[1002,75273,1051],{"emptyLinePlaceholder":1050},[1002,75275,75276,75279],{"class":1004,"line":2017},[1002,75277,75278],{"class":1015}," ++",[1002,75280,75281],{"class":1030},"failed.count;\n",[1002,75283,75284],{"class":1004,"line":2022},[1002,75285,75286],{"class":1008}," \u002F\u002F Wait another two seconds for every failed attempt\n",[1002,75288,75289,75292,75295,75298,75300,75302,75304,75307,75309],{"class":1004,"line":2442},[1002,75290,75291],{"class":1030}," failed.nextAttemptTime.",[1002,75293,75294],{"class":1026},"setTime",[1002,75296,75297],{"class":1030},"(Date.",[1002,75299,75171],{"class":1026},[1002,75301,10191],{"class":1030},[1002,75303,5064],{"class":1015},[1002,75305,75306],{"class":1019}," 2000",[1002,75308,6090],{"class":1015},[1002,75310,75311],{"class":1030}," failed.count);\n",[1002,75313,75314],{"class":1004,"line":2466},[1002,75315,1170],{"class":1030},[1002,75317,75318],{"class":1004,"line":2471},[1002,75319,1051],{"emptyLinePlaceholder":1050},[1002,75321,75322,75324,75327],{"class":1004,"line":2476},[1002,75323,6965],{"class":1015},[1002,75325,75326],{"class":1026}," onLoginSuccess",[1002,75328,3025],{"class":1030},[1002,75330,75331,75334],{"class":1004,"line":2481},[1002,75332,75333],{"class":1015}," delete",[1002,75335,75156],{"class":1030},[1002,75337,75338],{"class":1004,"line":2491},[1002,75339,1170],{"class":1030},[1002,75341,75342],{"class":1004,"line":2502},[1002,75343,1051],{"emptyLinePlaceholder":1050},[1002,75345,75346],{"class":1004,"line":2513},[1002,75347,75348],{"class":1008},"\u002F\u002F Clean up people that have given up\n",[1002,75350,75351,75353,75355,75357],{"class":1004,"line":2535},[1002,75352,16543],{"class":1026},[1002,75354,1031],{"class":1030},[1002,75356,6965],{"class":1015},[1002,75358,9772],{"class":1030},[1002,75360,75361,75363,75365,75367,75370,75372],{"class":1004,"line":2557},[1002,75362,12151],{"class":1015},[1002,75364,6513],{"class":1030},[1002,75366,18311],{"class":1015},[1002,75368,75369],{"class":1030}," ip ",[1002,75371,13656],{"class":1015},[1002,75373,75374],{"class":1030}," failedIPs) {\n",[1002,75376,75377,75379,75382,75384,75386,75388,75391,75393,75395],{"class":1004,"line":2562},[1002,75378,4368],{"class":1015},[1002,75380,75381],{"class":1030}," (Date.",[1002,75383,75171],{"class":1026},[1002,75385,10191],{"class":1030},[1002,75387,5101],{"class":1015},[1002,75389,75390],{"class":1030}," failedIPs[ip].nextAttemptTime ",[1002,75392,19171],{"class":1015},[1002,75394,75129],{"class":1019},[1002,75396,2382],{"class":1030},[1002,75398,75399,75402],{"class":1004,"line":2567},[1002,75400,75401],{"class":1015}," delete",[1002,75403,75404],{"class":1030}," failedIPs[ip];\n",[1002,75406,75407],{"class":1004,"line":2572},[1002,75408,2014],{"class":1030},[1002,75410,75411],{"class":1004,"line":2582},[1002,75412,1269],{"class":1030},[1002,75414,75415,75417,75420],{"class":1004,"line":2594},[1002,75416,16635],{"class":1030},[1002,75418,75419],{"class":1019},"THIRTY_MINS",[1002,75421,1085],{"class":1030},[925,75423,75424,75425,75432],{},"Alternativley, you can use ",[1107,75426,75427],{},[933,75428,75431],{"href":75429,"rel":75430},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fexpress-brute",[937],"express-brute",", a brute-force protection middleware for express routes that rate-limits incoming requests, increasing the delay with each request in a fibonacci-like sequence.",[993,75434,75436],{"className":995,"code":75435,"language":997,"meta":998,"style":998},"var ExpressBrute = require('express-brute'),\n\nvar store = new ExpressBrute.MemoryStore();\nvar bruteforce = new ExpressBrute(store);\n\napp.post('\u002Fauth',\n bruteforce.prevent,\n function (req, res, next) {\n res.send('Success!');\n }\n);\n",[941,75437,75438,75456,75460,75477,75494,75498,75511,75516,75534,75547,75551],{"__ignoreMap":998},[1002,75439,75440,75442,75445,75447,75449,75451,75454],{"class":1004,"line":1005},[1002,75441,18311],{"class":1015},[1002,75443,75444],{"class":1030}," ExpressBrute ",[1002,75446,2393],{"class":1015},[1002,75448,1027],{"class":1026},[1002,75450,1031],{"class":1030},[1002,75452,75453],{"class":1034},"'express-brute'",[1002,75455,1257],{"class":1030},[1002,75457,75458],{"class":1004,"line":1012},[1002,75459,1051],{"emptyLinePlaceholder":1050},[1002,75461,75462,75465,75467,75469,75472,75475],{"class":1004,"line":1047},[1002,75463,75464],{"class":1030},"var store ",[1002,75466,2393],{"class":1015},[1002,75468,2690],{"class":1015},[1002,75470,75471],{"class":1030}," ExpressBrute.",[1002,75473,75474],{"class":1026},"MemoryStore",[1002,75476,1428],{"class":1030},[1002,75478,75479,75481,75484,75486,75488,75491],{"class":1004,"line":1054},[1002,75480,18311],{"class":1015},[1002,75482,75483],{"class":1030}," bruteforce ",[1002,75485,2393],{"class":1015},[1002,75487,2690],{"class":1015},[1002,75489,75490],{"class":1026}," ExpressBrute",[1002,75492,75493],{"class":1030},"(store);\n",[1002,75495,75496],{"class":1004,"line":1060},[1002,75497,1051],{"emptyLinePlaceholder":1050},[1002,75499,75500,75502,75504,75506,75509],{"class":1004,"line":1272},[1002,75501,21891],{"class":1030},[1002,75503,24713],{"class":1026},[1002,75505,1031],{"class":1030},[1002,75507,75508],{"class":1034},"'\u002Fauth'",[1002,75510,1143],{"class":1030},[1002,75512,75513],{"class":1004,"line":1348},[1002,75514,75515],{"class":1030}," bruteforce.prevent,\n",[1002,75517,75518,75520,75522,75524,75526,75528,75530,75532],{"class":1004,"line":1354},[1002,75519,53413],{"class":1015},[1002,75521,6513],{"class":1030},[1002,75523,22159],{"class":2378},[1002,75525,1251],{"class":1030},[1002,75527,14985],{"class":2378},[1002,75529,1251],{"class":1030},[1002,75531,6623],{"class":2378},[1002,75533,2382],{"class":1030},[1002,75535,75536,75539,75541,75543,75545],{"class":1004,"line":1360},[1002,75537,75538],{"class":1030}," res.",[1002,75540,7117],{"class":1026},[1002,75542,1031],{"class":1030},[1002,75544,46287],{"class":1034},[1002,75546,1085],{"class":1030},[1002,75548,75549],{"class":1004,"line":1366},[1002,75550,2014],{"class":1030},[1002,75552,75553],{"class":1004,"line":1946},[1002,75554,1085],{"class":1030},[953,75556,75052],{"id":75557},"configuration-management",[925,75559,75560],{},"Your site should set the following HTTP headers:",[1530,75562,75563,75569,75575,75580,75585],{},[974,75564,75565,75568],{},[1107,75566,75567],{},"Content-Security-Policy"," prevents a wide range of attacks, including Cross-site scripting and other cross-site injections",[974,75570,75571,75574],{},[1107,75572,75573],{},"Strict-Transport-Security"," enforces secure (HTTP over SSL\u002FTLS) connections to the server",[974,75576,75577,75579],{},[1107,75578,32007],{}," prevents browsers from MIME-sniffing a response away from the declared content-type",[974,75581,75582,75584],{},[1107,75583,32034],{}," provides clickjacking protection",[974,75586,75587,75589],{},[1107,75588,31893],{}," enables the Cross-site scripting (XSS) filter built into most recent web browsers",[7100,75591,75592],{"title":32026,"type":24048},[925,75593,75594,75595,75598,75599,75602],{},"Clickjacking, also known as a ",[1107,75596,75597],{},"UI redress attack",", is when an attacker uses multiple transparent or opaque layers to trick a user into clicking on a button or link on another page when they were intending to click on the top level page. Thus, the attacker is ",[1107,75600,75601],{},"hijacking"," clicks meant for their page and routing them to another page, most likely owned by another application, domain, or both.",[1655,75604,33001],{"id":859},[925,75606,75607,75608,75613],{},"You can easily set these using ",[933,75609,75612],{"href":75610,"rel":75611},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fhelmet",[937],"Helmet"," module.",[993,75615,75617],{"className":995,"code":75616,"language":997,"meta":998,"style":998},"var express = require('express');\nvar helmet = require('helmet');\nvar app = express();\n\napp.use(helmet());\n",[941,75618,75619,75635,75653,75665,75669],{"__ignoreMap":998},[1002,75620,75621,75623,75625,75627,75629,75631,75633],{"class":1004,"line":1005},[1002,75622,18311],{"class":1015},[1002,75624,21857],{"class":1030},[1002,75626,2393],{"class":1015},[1002,75628,1027],{"class":1026},[1002,75630,1031],{"class":1030},[1002,75632,42871],{"class":1034},[1002,75634,1085],{"class":1030},[1002,75636,75637,75639,75642,75644,75646,75648,75651],{"class":1004,"line":1012},[1002,75638,18311],{"class":1015},[1002,75640,75641],{"class":1030}," helmet ",[1002,75643,2393],{"class":1015},[1002,75645,1027],{"class":1026},[1002,75647,1031],{"class":1030},[1002,75649,75650],{"class":1034},"'helmet'",[1002,75652,1085],{"class":1030},[1002,75654,75655,75657,75659,75661,75663],{"class":1004,"line":1047},[1002,75656,18311],{"class":1015},[1002,75658,42880],{"class":1030},[1002,75660,2393],{"class":1015},[1002,75662,21880],{"class":1026},[1002,75664,1428],{"class":1030},[1002,75666,75667],{"class":1004,"line":1054},[1002,75668,1051],{"emptyLinePlaceholder":1050},[1002,75670,75671,75673,75675,75677,75680],{"class":1004,"line":1060},[1002,75672,21891],{"class":1030},[1002,75674,21894],{"class":1026},[1002,75676,1031],{"class":1030},[1002,75678,75679],{"class":1026},"helmet",[1002,75681,3885],{"class":1030},[1655,75683,75685],{"id":75684},"nginx","Nginx",[925,75687,75688],{},"In most architectures these headers can be set in web server configuration (Apache, nginx), without changing actual application's code. In nginx it would look something like this:",[993,75690,75692],{"className":995,"code":75691,"language":997,"meta":998,"style":998},"# nginx.conf\n\nadd_header X-Frame-Options SAMEORIGIN;\nadd_header X-Content-Type-Options nosniff;\nadd_header X-XSS-Protection \"1; mode=block\";\nadd_header Content-Security-Policy \"default-src 'self'\";\n",[941,75693,75694,75699,75703,75726,75745,75766],{"__ignoreMap":998},[1002,75695,75696],{"class":1004,"line":1005},[1002,75697,75698],{"class":1030},"# nginx.conf\n",[1002,75700,75701],{"class":1004,"line":1012},[1002,75702,1051],{"emptyLinePlaceholder":1050},[1002,75704,75705,75708,75711,75713,75716,75718,75721,75724],{"class":1004,"line":1047},[1002,75706,75707],{"class":1030},"add_header ",[1002,75709,75710],{"class":1019},"X",[1002,75712,5101],{"class":1015},[1002,75714,75715],{"class":1030},"Frame",[1002,75717,5101],{"class":1015},[1002,75719,75720],{"class":1030},"Options ",[1002,75722,75723],{"class":1019},"SAMEORIGIN",[1002,75725,1407],{"class":1030},[1002,75727,75728,75730,75732,75734,75736,75738,75740,75742],{"class":1004,"line":1054},[1002,75729,75707],{"class":1030},[1002,75731,75710],{"class":1019},[1002,75733,5101],{"class":1015},[1002,75735,15801],{"class":1030},[1002,75737,5101],{"class":1015},[1002,75739,69933],{"class":1030},[1002,75741,5101],{"class":1015},[1002,75743,75744],{"class":1030},"Options nosniff;\n",[1002,75746,75747,75749,75751,75753,75756,75758,75761,75764],{"class":1004,"line":1060},[1002,75748,75707],{"class":1030},[1002,75750,75710],{"class":1019},[1002,75752,5101],{"class":1015},[1002,75754,75755],{"class":1019},"XSS",[1002,75757,5101],{"class":1015},[1002,75759,75760],{"class":1030},"Protection ",[1002,75762,75763],{"class":1034},"\"1; mode=block\"",[1002,75765,1407],{"class":1030},[1002,75767,75768,75771,75773,75776,75778,75781,75784],{"class":1004,"line":1272},[1002,75769,75770],{"class":1030},"add_header Content",[1002,75772,5101],{"class":1015},[1002,75774,75775],{"class":1030},"Security",[1002,75777,5101],{"class":1015},[1002,75779,75780],{"class":1030},"Policy ",[1002,75782,75783],{"class":1034},"\"default-src 'self'\"",[1002,75785,1407],{"class":1030},[7100,75787,75789],{"title":75788,"type":24048},"Check your site for necessary header",[925,75790,75791],{},[933,75792,75793],{"href":75793,"rel":75794},"http:\u002F\u002Fcyh.herokuapp.com\u002Fcyh",[937],[953,75796,75798],{"id":75797},"sensitive-data-on-the-client-side","Sensitive Data on the Client Side",[925,75800,75801],{},"Make sure when you are deploying applications, you never expose API secrets and credentials in your source code.",[925,75803,75804],{},"You can avoid this by regular code reviews, and use of pull requests.",[953,75806,75055],{"id":75807},"csrf",[925,75809,75810],{},"Cross-Site Request Forgery (CSRF) is a type of attack that occurs when a malicious Web site, email, blog, instant message, or program causes a user's Web browser to perform an unwanted action on a trusted site for which the user is currently authenticated.",[925,75812,32004,75813,75817],{},[933,75814,75807],{"href":75815,"rel":75816},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcsrf",[937]," npm module to create custom CSRF middleware to deal with this kind of attacks.",[993,75819,75821],{"className":995,"code":75820,"language":997,"meta":998,"style":998},"'use strict';\n\nvar cookieParser = require('cookie-parser');\nvar csrf = require('csurf');\nvar bodyParser = require('body-parser');\nvar express = require('express');\n\n\u002F\u002F setup route middlewares\nvar csrfProtection = csrf({ cookie: true });\nvar parseForm = bodyParser.urlencoded({ extended: false });\n\nvar app = express();\n\n\u002F\u002F we need this because \"cookie\" is true in csrfProtection\napp.use(cookieParser());\n\napp.get('\u002Fform', csrfProtection, function (req, res) {\n \u002F\u002F pass the csrfToken to the view\n res.render('send', { csrfToken: req.csrfToken() });\n});\n\napp.post('\u002Fprocess', parseForm, csrfProtection, function (req, res) {\n res.send('data is being processed');\n});\n",[941,75822,75823,75829,75833,75851,75869,75887,75903,75907,75912,75931,75953,75957,75969,75973,75978,75991,75995,76021,76026,76046,76050,76054,76080,76093],{"__ignoreMap":998},[1002,75824,75825,75827],{"class":1004,"line":1005},[1002,75826,18304],{"class":1034},[1002,75828,1407],{"class":1030},[1002,75830,75831],{"class":1004,"line":1012},[1002,75832,1051],{"emptyLinePlaceholder":1050},[1002,75834,75835,75837,75840,75842,75844,75846,75849],{"class":1004,"line":1047},[1002,75836,18311],{"class":1015},[1002,75838,75839],{"class":1030}," cookieParser ",[1002,75841,2393],{"class":1015},[1002,75843,1027],{"class":1026},[1002,75845,1031],{"class":1030},[1002,75847,75848],{"class":1034},"'cookie-parser'",[1002,75850,1085],{"class":1030},[1002,75852,75853,75855,75858,75860,75862,75864,75867],{"class":1004,"line":1054},[1002,75854,18311],{"class":1015},[1002,75856,75857],{"class":1030}," csrf ",[1002,75859,2393],{"class":1015},[1002,75861,1027],{"class":1026},[1002,75863,1031],{"class":1030},[1002,75865,75866],{"class":1034},"'csurf'",[1002,75868,1085],{"class":1030},[1002,75870,75871,75873,75876,75878,75880,75882,75885],{"class":1004,"line":1060},[1002,75872,18311],{"class":1015},[1002,75874,75875],{"class":1030}," bodyParser ",[1002,75877,2393],{"class":1015},[1002,75879,1027],{"class":1026},[1002,75881,1031],{"class":1030},[1002,75883,75884],{"class":1034},"'body-parser'",[1002,75886,1085],{"class":1030},[1002,75888,75889,75891,75893,75895,75897,75899,75901],{"class":1004,"line":1272},[1002,75890,18311],{"class":1015},[1002,75892,21857],{"class":1030},[1002,75894,2393],{"class":1015},[1002,75896,1027],{"class":1026},[1002,75898,1031],{"class":1030},[1002,75900,42871],{"class":1034},[1002,75902,1085],{"class":1030},[1002,75904,75905],{"class":1004,"line":1348},[1002,75906,1051],{"emptyLinePlaceholder":1050},[1002,75908,75909],{"class":1004,"line":1354},[1002,75910,75911],{"class":1008},"\u002F\u002F setup route middlewares\n",[1002,75913,75914,75916,75919,75921,75924,75927,75929],{"class":1004,"line":1360},[1002,75915,18311],{"class":1015},[1002,75917,75918],{"class":1030}," csrfProtection ",[1002,75920,2393],{"class":1015},[1002,75922,75923],{"class":1026}," csrf",[1002,75925,75926],{"class":1030},"({ cookie: ",[1002,75928,17397],{"class":1019},[1002,75930,28417],{"class":1030},[1002,75932,75933,75935,75938,75940,75943,75946,75949,75951],{"class":1004,"line":1366},[1002,75934,18311],{"class":1015},[1002,75936,75937],{"class":1030}," parseForm ",[1002,75939,2393],{"class":1015},[1002,75941,75942],{"class":1030}," bodyParser.",[1002,75944,75945],{"class":1026},"urlencoded",[1002,75947,75948],{"class":1030},"({ extended: ",[1002,75950,19341],{"class":1019},[1002,75952,28417],{"class":1030},[1002,75954,75955],{"class":1004,"line":1946},[1002,75956,1051],{"emptyLinePlaceholder":1050},[1002,75958,75959,75961,75963,75965,75967],{"class":1004,"line":1956},[1002,75960,18311],{"class":1015},[1002,75962,42880],{"class":1030},[1002,75964,2393],{"class":1015},[1002,75966,21880],{"class":1026},[1002,75968,1428],{"class":1030},[1002,75970,75971],{"class":1004,"line":1961},[1002,75972,1051],{"emptyLinePlaceholder":1050},[1002,75974,75975],{"class":1004,"line":1971},[1002,75976,75977],{"class":1008},"\u002F\u002F we need this because \"cookie\" is true in csrfProtection\n",[1002,75979,75980,75982,75984,75986,75989],{"class":1004,"line":1980},[1002,75981,21891],{"class":1030},[1002,75983,21894],{"class":1026},[1002,75985,1031],{"class":1030},[1002,75987,75988],{"class":1026},"cookieParser",[1002,75990,3885],{"class":1030},[1002,75992,75993],{"class":1004,"line":1985},[1002,75994,1051],{"emptyLinePlaceholder":1050},[1002,75996,75997,75999,76001,76003,76006,76009,76011,76013,76015,76017,76019],{"class":1004,"line":1995},[1002,75998,21891],{"class":1030},[1002,76000,8070],{"class":1026},[1002,76002,1031],{"class":1030},[1002,76004,76005],{"class":1034},"'\u002Fform'",[1002,76007,76008],{"class":1030},", csrfProtection, ",[1002,76010,6965],{"class":1015},[1002,76012,6513],{"class":1030},[1002,76014,22159],{"class":2378},[1002,76016,1251],{"class":1030},[1002,76018,14985],{"class":2378},[1002,76020,2382],{"class":1030},[1002,76022,76023],{"class":1004,"line":2006},[1002,76024,76025],{"class":1008}," \u002F\u002F pass the csrfToken to the view\n",[1002,76027,76028,76030,76032,76034,76037,76040,76043],{"class":1004,"line":2011},[1002,76029,14992],{"class":1030},[1002,76031,19545],{"class":1026},[1002,76033,1031],{"class":1030},[1002,76035,76036],{"class":1034},"'send'",[1002,76038,76039],{"class":1030},", { csrfToken: req.",[1002,76041,76042],{"class":1026},"csrfToken",[1002,76044,76045],{"class":1030},"() });\n",[1002,76047,76048],{"class":1004,"line":2017},[1002,76049,2804],{"class":1030},[1002,76051,76052],{"class":1004,"line":2022},[1002,76053,1051],{"emptyLinePlaceholder":1050},[1002,76055,76056,76058,76060,76062,76065,76068,76070,76072,76074,76076,76078],{"class":1004,"line":2442},[1002,76057,21891],{"class":1030},[1002,76059,24713],{"class":1026},[1002,76061,1031],{"class":1030},[1002,76063,76064],{"class":1034},"'\u002Fprocess'",[1002,76066,76067],{"class":1030},", parseForm, csrfProtection, ",[1002,76069,6965],{"class":1015},[1002,76071,6513],{"class":1030},[1002,76073,22159],{"class":2378},[1002,76075,1251],{"class":1030},[1002,76077,14985],{"class":2378},[1002,76079,2382],{"class":1030},[1002,76081,76082,76084,76086,76088,76091],{"class":1004,"line":2466},[1002,76083,14992],{"class":1030},[1002,76085,7117],{"class":1026},[1002,76087,1031],{"class":1030},[1002,76089,76090],{"class":1034},"'data is being processed'",[1002,76092,1085],{"class":1030},[1002,76094,76095],{"class":1004,"line":2471},[1002,76096,2804],{"class":1030},[925,76098,76099],{},"While on the view layer you have to use the CSRF token like this:",[993,76101,76103],{"className":995,"code":76102,"language":997,"meta":998,"style":998},"\u003Cform action=\"\u002Fprocess\" method=\"POST\">\n \u003Cinput type=\"hidden\" name=\"_csrf\" value=\"{{csrfToken}}\">\n\n Favorite color: \u003Cinput type=\"text\" name=\"favoriteColor\">\n \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[941,76104,76105,76129,76158,76162,76184,76202],{"__ignoreMap":998},[1002,76106,76107,76109,76111,76114,76116,76119,76122,76124,76127],{"class":1004,"line":1005},[1002,76108,6539],{"class":1030},[1002,76110,29213],{"class":15711},[1002,76112,76113],{"class":1026}," action",[1002,76115,2393],{"class":1015},[1002,76117,76118],{"class":1034},"\"\u002Fprocess\"",[1002,76120,76121],{"class":1026}," method",[1002,76123,2393],{"class":1015},[1002,76125,76126],{"class":1034},"\"POST\"",[1002,76128,15703],{"class":1030},[1002,76130,76131,76133,76135,76137,76139,76142,76144,76146,76149,76151,76153,76156],{"class":1004,"line":1012},[1002,76132,22427],{"class":1030},[1002,76134,5803],{"class":15711},[1002,76136,29274],{"class":1026},[1002,76138,2393],{"class":1015},[1002,76140,76141],{"class":1034},"\"hidden\"",[1002,76143,18584],{"class":1026},[1002,76145,2393],{"class":1015},[1002,76147,76148],{"class":1034},"\"_csrf\"",[1002,76150,30398],{"class":1026},[1002,76152,2393],{"class":1015},[1002,76154,76155],{"class":1034},"\"{{csrfToken}}\"",[1002,76157,15703],{"class":1030},[1002,76159,76160],{"class":1004,"line":1047},[1002,76161,1051],{"emptyLinePlaceholder":1050},[1002,76163,76164,76167,76169,76171,76173,76175,76177,76179,76182],{"class":1004,"line":1054},[1002,76165,76166],{"class":1030}," Favorite color: \u003C",[1002,76168,5803],{"class":15711},[1002,76170,29274],{"class":1026},[1002,76172,2393],{"class":1015},[1002,76174,33950],{"class":1034},[1002,76176,18584],{"class":1026},[1002,76178,2393],{"class":1015},[1002,76180,76181],{"class":1034},"\"favoriteColor\"",[1002,76183,15703],{"class":1030},[1002,76185,76186,76188,76190,76192,76194,76196,76198,76200],{"class":1004,"line":1060},[1002,76187,22427],{"class":1030},[1002,76189,16365],{"class":15711},[1002,76191,29274],{"class":1026},[1002,76193,2393],{"class":1015},[1002,76195,29279],{"class":1034},[1002,76197,29282],{"class":1030},[1002,76199,16365],{"class":15711},[1002,76201,15703],{"class":1030},[1002,76203,76204,76206,76208],{"class":1004,"line":1272},[1002,76205,22437],{"class":1030},[1002,76207,29213],{"class":15711},[1002,76209,15703],{"class":1030},[953,76211,75058],{"id":76212},"data-validation",[1655,76214,76216],{"id":76215},"sql-injection","SQL Injection",[925,76218,76219,76220,76223],{},"SQL injection is a ",[1107,76221,76222],{},"code injection"," technique, used to attack data-driven applications, in which malicious SQL statements are inserted into an entry field for execution (e.g. to dump the database contents to the attacker).",[925,76225,26058],{},[993,76227,76231],{"className":76228,"code":76229,"language":76230,"meta":998,"style":998},"language-sql shiki shiki-themes github-light github-dark","select title, author from books where id=$id\n","sql",[941,76232,76233],{"__ignoreMap":998},[1002,76234,76235],{"class":1004,"line":1005},[1002,76236,76229],{},[925,76238,76239,76240,76243,76244,16529,76246,76249],{},"In this example ",[941,76241,76242],{},"$id"," is coming from the user - what if the user enters ",[941,76245,5681],{},[941,76247,76248],{},"1=1","? The query becomes the following:",[993,76251,76253],{"className":76228,"code":76252,"language":76230,"meta":998,"style":998},"select title, author from books where id=2 or 1=1\n",[941,76254,76255],{"__ignoreMap":998},[1002,76256,76257],{"class":1004,"line":1005},[1002,76258,76252],{},[925,76260,76261,76262,16529,76265,948],{},"The easiest way to defend against these kind of attacks is to use ",[1107,76263,76264],{},"parameterized queries",[1107,76266,76267],{},"prepared statements",[993,76269,76273],{"className":76270,"code":76271,"language":76272,"meta":998,"style":998},"language-php shiki shiki-themes github-light github-dark","$stmt = $db->prepare(\"select title, author from books where id=?\");\n$stmt->bindParam(1, $id);\n\n$id = 1;\n$stmt->execute();\n","php",[941,76274,76275,76280,76285,76289,76294],{"__ignoreMap":998},[1002,76276,76277],{"class":1004,"line":1005},[1002,76278,76279],{},"$stmt = $db->prepare(\"select title, author from books where id=?\");\n",[1002,76281,76282],{"class":1004,"line":1012},[1002,76283,76284],{},"$stmt->bindParam(1, $id);\n",[1002,76286,76287],{"class":1004,"line":1047},[1002,76288,1051],{"emptyLinePlaceholder":1050},[1002,76290,76291],{"class":1004,"line":1054},[1002,76292,76293],{},"$id = 1;\n",[1002,76295,76296],{"class":1004,"line":1060},[1002,76297,76298],{},"$stmt->execute();\n",[953,76300,76302],{"id":76301},"denial-of-service-dof","Denial of Service (DoF)",[925,76304,76305],{},"A denial-of-service (DoS) attack is an attempt to make a machine or network resource unavailable to its intended users, such as to temporarily or indefinitely interrupt or suspend services of a host connected to the Internet. This could result in one of the few issues below:",[1655,76307,76309],{"id":76308},"account-lockout","Account Lockout",[925,76311,76312],{},"In an account lockout attack, an attacker attempts to lockout user accounts by purposely failing the authentication process as many times as needed to trigger the account lockout functionality. This, in turn, prevents even the valid user from obtaining access to their account.",[925,76314,76315,76316,40670],{},"This can be prevented with the usage of the ",[1107,76317,76318],{},"rate-limiter",[1655,76320,76322],{"id":76321},"rate-limiters","Rate Limiters",[925,76324,76325],{},"For an ideal amount of performance, you can run a light-weight web framework with functions for managing logs on an in-memory database for monitoring and logging the traffic data, be it based on IP or User or Service called by user. The more important choice is the data storage you want to employ.",[925,76327,76328],{},"Best and most used free options are:",[1530,76330,76331,76337,76343,76349],{},[974,76332,76333,76336],{},[1107,76334,76335],{},"redis.io"," advanced key-value store",[974,76338,76339,76342],{},[1107,76340,76341],{},"ehcache"," standards-based cache, actively developed, maintained and supported as a professional open source project by Terracotta",[974,76344,76345,76348],{},[1107,76346,76347],{},"hazelcast"," an open source In-Memory Data Grid for faster execution and seamless elastic scalability",[974,76350,76351,76354],{},[1107,76352,76353],{},"VoltDB"," an in-memory operational database",[1655,76356,76358],{"id":76357},"regular-expression-denial-of-service-redos","Regular Expression Denial of Service (ReDoS)",[925,76360,76361],{},"The Regular expression Denial of Service (ReDoS) is a Denial of Service attack, that exploits the fact that most Regular Expression implementations may reach extreme situations that cause them to work very slowly (exponentially related to input size). An attacker can then cause a program using a Regular Expression to enter these extreme situations and then hang for a very long time.",[925,76363,76364,76365,1813],{},"Examples of ",[1107,76366,76367],{},"Evil Patterns",[1530,76369,76370,76373,76379,76382,76385],{},[974,76371,76372],{},"(a+)+",[974,76374,1031,76375,76378],{},[1002,76376,76377],{},"a-zA-Z","+)*",[974,76380,76381],{},"(a|aa)+",[974,76383,76384],{},"(a|a?)+",[974,76386,76387],{},"(.*a){x} | for x > 10",[925,76389,76390,76391,1813],{},"To check your own regular expressions agianst such an attack, you can use ",[933,76392,76395],{"href":76393,"rel":76394},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fsafe-regex",[937],"safe-regex",[993,76397,76399],{"className":1797,"code":76398,"language":1799,"meta":998,"style":998},"node safe.js '(beep|boop)*' \u002F\u002F true\nnode safe.js '(a+){10}' \u002F\u002F false\n",[941,76400,76401,76417],{"__ignoreMap":998},[1002,76402,76403,76405,76408,76411,76414],{"class":1004,"line":1005},[1002,76404,12108],{"class":1026},[1002,76406,76407],{"class":1034}," safe.js",[1002,76409,76410],{"class":1034}," '(beep|boop)*'",[1002,76412,76413],{"class":1034}," \u002F\u002F",[1002,76415,76416],{"class":1019}," true\n",[1002,76418,76419,76421,76423,76426,76428],{"class":1004,"line":1012},[1002,76420,12108],{"class":1026},[1002,76422,76407],{"class":1034},[1002,76424,76425],{"class":1034}," '(a+){10}'",[1002,76427,76413],{"class":1034},[1002,76429,2003],{"class":1019},[953,76431,75064],{"id":76432},"error-handling",[925,76434,76435],{},"Stack traces are not treated as vulnerabilities by themselves, but they often reveal information that can be interesting to an attacker. Providing debugging information as a result of operations that generate errors is considered a bad practice. You should always log them, but do not show them to the users.",[953,76437,75067],{"id":76438},"http-strict-transport-security-hsts",[925,76440,76441],{},"HSTS is an opt-in security enhancement that is specified by a web application through the use of a special response header. Once a supported browser receives this header that browser will prevent any communications from being sent over HTTP to the specified domain and will instead send all communications over HTTPS. It also prevents HTTPS click through prompts on browsers.",[925,76443,76444],{},"To test for HSTS:",[993,76446,76448],{"className":1797,"code":76447,"language":1799,"meta":998,"style":998},"curl -s -D- https:\u002F\u002Ffacebook.com\u002F | grep -i Strict\n",[941,76449,76450],{"__ignoreMap":998},[1002,76451,76452,76454,76457,76460,76463,76465,76468,76471],{"class":1004,"line":1005},[1002,76453,50132],{"class":1026},[1002,76455,76456],{"class":1019}," -s",[1002,76458,76459],{"class":1019}," -D-",[1002,76461,76462],{"class":1034}," https:\u002F\u002Ffacebook.com\u002F",[1002,76464,17264],{"class":1015},[1002,76466,76467],{"class":1026}," grep",[1002,76469,76470],{"class":1019}," -i",[1002,76472,76473],{"class":1034}," Strict\n",[953,76475,51247],{"id":27346},[925,76477,76478],{},"NPM packages may contain security vulnerabilities that are critical.",[925,76480,30798,76481,16529,76484,76487],{},[1107,76482,76483],{},"nsp",[1107,76485,76486],{},"requireSafe"," to check modules.",[993,76489,76491],{"className":1797,"code":76490,"language":1799,"meta":998,"style":998},"npm i nsp -g\nnsp audit-package\n",[941,76492,76493,76505],{"__ignoreMap":998},[1002,76494,76495,76497,76500,76503],{"class":1004,"line":1005},[1002,76496,27346],{"class":1026},[1002,76498,76499],{"class":1034}," i",[1002,76501,76502],{"class":1034}," nsp",[1002,76504,44015],{"class":1019},[1002,76506,76507,76509],{"class":1004,"line":1012},[1002,76508,76483],{"class":1026},[1002,76510,76511],{"class":1034}," audit-package\n",[953,76513,75073],{"id":76514},"secure-transmission",[925,76516,76517],{},"As HTTP is a clear-text protocol it must be secured via SSL\u002FTLS tunnel, known as HTTPS. Nowadays high-grade ciphers are normally used, misconfiguration in the server can be used to force the use of a weak cipher - or at worst no encryption.",[925,76519,76520],{},"You have to test:",[1530,76522,76523,76526],{},[974,76524,76525],{},"certificate validity",[974,76527,76528],{},"ciphers, keys and renegotiation is properly configured",[925,76530,76531,76532],{},"Checking for Certificate information - using ",[1107,76533,76534],{},"nmap",[993,76536,76538],{"className":1797,"code":76537,"language":1799,"meta":998,"style":998},"nmap --script ssl-cert,ssl-enum-ciphers -p 443,465,993,995 www.example.com\n",[941,76539,76540],{"__ignoreMap":998},[1002,76541,76542,76544,76547,76550,76553,76556],{"class":1004,"line":1005},[1002,76543,76534],{"class":1026},[1002,76545,76546],{"class":1019}," --script",[1002,76548,76549],{"class":1034}," ssl-cert,ssl-enum-ciphers",[1002,76551,76552],{"class":1019}," -p",[1002,76554,76555],{"class":1034}," 443,465,993,995",[1002,76557,76558],{"class":1034}," www.example.com\n",[925,76560,76561,76562],{},"Testing SSL\u002FTLS vulnerabilities with ",[1107,76563,76564],{},"sslyze",[993,76566,76568],{"className":1797,"code":76567,"language":1799,"meta":998,"style":998},".\u002Fsslyze.py --regular example.com:3000\n",[941,76569,76570],{"__ignoreMap":998},[1002,76571,76572,76575,76578],{"class":1004,"line":1005},[1002,76573,76574],{"class":1026},".\u002Fsslyze.py",[1002,76576,76577],{"class":1019}," --regular",[1002,76579,76580],{"class":1034}," example.com:3000\n",[953,76582,75076],{"id":76583},"session-management",[1655,76585,76587],{"id":76586},"cookie-flags","Cookie Flags",[925,76589,76590],{},"The following is a list of the attributes that can be set for each cookie and what they mean:",[1530,76592,76593,76599],{},[974,76594,76595,76598],{},[1107,76596,76597],{},"HttpOnly"," this attribute is used to help prevent attacks such as cross-site scripting, since it does not allow the cookie to be accessed via JavaScript.",[974,76600,76601,76604],{},[1107,76602,76603],{},"secure"," this attribute tells the browser to only send the cookie if the request is being sent over HTTPS.",[925,76606,76607,76608,76611],{},"Creating a cookie using ",[1107,76609,76610],{},"cookies"," package:",[993,76613,76615],{"className":995,"code":76614,"language":997,"meta":998,"style":998},"var cookieSession = require('cookie-session');\nvar express = require('express');\n\nvar app = express();\n\napp.use(\n cookieSession({\n name: 'session',\n keys: [process.env.COOKIE_KEY1, process.env.COOKIE_KEY2],\n }),\n);\n\napp.use(function (req, res, next) {\n var n = req.session.views || 0;\n req.session.views = n++;\n res.end(n + ' views');\n});\n\napp.listen(3000);\n",[941,76616,76617,76635,76651,76655,76667,76671,76679,76686,76695,76711,76715,76719,76723,76747,76764,76778,76794,76798,76802],{"__ignoreMap":998},[1002,76618,76619,76621,76624,76626,76628,76630,76633],{"class":1004,"line":1005},[1002,76620,18311],{"class":1015},[1002,76622,76623],{"class":1030}," cookieSession ",[1002,76625,2393],{"class":1015},[1002,76627,1027],{"class":1026},[1002,76629,1031],{"class":1030},[1002,76631,76632],{"class":1034},"'cookie-session'",[1002,76634,1085],{"class":1030},[1002,76636,76637,76639,76641,76643,76645,76647,76649],{"class":1004,"line":1012},[1002,76638,18311],{"class":1015},[1002,76640,21857],{"class":1030},[1002,76642,2393],{"class":1015},[1002,76644,1027],{"class":1026},[1002,76646,1031],{"class":1030},[1002,76648,42871],{"class":1034},[1002,76650,1085],{"class":1030},[1002,76652,76653],{"class":1004,"line":1047},[1002,76654,1051],{"emptyLinePlaceholder":1050},[1002,76656,76657,76659,76661,76663,76665],{"class":1004,"line":1054},[1002,76658,18311],{"class":1015},[1002,76660,42880],{"class":1030},[1002,76662,2393],{"class":1015},[1002,76664,21880],{"class":1026},[1002,76666,1428],{"class":1030},[1002,76668,76669],{"class":1004,"line":1060},[1002,76670,1051],{"emptyLinePlaceholder":1050},[1002,76672,76673,76675,76677],{"class":1004,"line":1272},[1002,76674,21891],{"class":1030},[1002,76676,21894],{"class":1026},[1002,76678,10468],{"class":1030},[1002,76680,76681,76684],{"class":1004,"line":1348},[1002,76682,76683],{"class":1026}," cookieSession",[1002,76685,2756],{"class":1030},[1002,76687,76688,76690,76693],{"class":1004,"line":1354},[1002,76689,19817],{"class":1030},[1002,76691,76692],{"class":1034},"'session'",[1002,76694,1143],{"class":1030},[1002,76696,76697,76700,76703,76706,76709],{"class":1004,"line":1360},[1002,76698,76699],{"class":1030}," keys: [process.env.",[1002,76701,76702],{"class":1019},"COOKIE_KEY1",[1002,76704,76705],{"class":1030},", process.env.",[1002,76707,76708],{"class":1019},"COOKIE_KEY2",[1002,76710,1903],{"class":1030},[1002,76712,76713],{"class":1004,"line":1366},[1002,76714,61550],{"class":1030},[1002,76716,76717],{"class":1004,"line":1946},[1002,76718,1085],{"class":1030},[1002,76720,76721],{"class":1004,"line":1956},[1002,76722,1051],{"emptyLinePlaceholder":1050},[1002,76724,76725,76727,76729,76731,76733,76735,76737,76739,76741,76743,76745],{"class":1004,"line":1961},[1002,76726,21891],{"class":1030},[1002,76728,21894],{"class":1026},[1002,76730,1031],{"class":1030},[1002,76732,6965],{"class":1015},[1002,76734,6513],{"class":1030},[1002,76736,22159],{"class":2378},[1002,76738,1251],{"class":1030},[1002,76740,14985],{"class":2378},[1002,76742,1251],{"class":1030},[1002,76744,6623],{"class":2378},[1002,76746,2382],{"class":1030},[1002,76748,76749,76751,76753,76755,76758,76760,76762],{"class":1004,"line":1971},[1002,76750,28293],{"class":1015},[1002,76752,39192],{"class":1030},[1002,76754,2393],{"class":1015},[1002,76756,76757],{"class":1030}," req.session.views ",[1002,76759,8392],{"class":1015},[1002,76761,4910],{"class":1019},[1002,76763,1407],{"class":1030},[1002,76765,76766,76769,76771,76774,76776],{"class":1004,"line":1980},[1002,76767,76768],{"class":1030}," req.session.views ",[1002,76770,2393],{"class":1015},[1002,76772,76773],{"class":1030}," n",[1002,76775,6545],{"class":1015},[1002,76777,1407],{"class":1030},[1002,76779,76780,76782,76784,76787,76789,76792],{"class":1004,"line":1985},[1002,76781,14992],{"class":1030},[1002,76783,28424],{"class":1026},[1002,76785,76786],{"class":1030},"(n ",[1002,76788,5064],{"class":1015},[1002,76790,76791],{"class":1034}," ' views'",[1002,76793,1085],{"class":1030},[1002,76795,76796],{"class":1004,"line":1995},[1002,76797,2804],{"class":1030},[1002,76799,76800],{"class":1004,"line":2006},[1002,76801,1051],{"emptyLinePlaceholder":1050},[1002,76803,76804,76806,76808,76810,76812],{"class":1004,"line":2011},[1002,76805,21891],{"class":1030},[1002,76807,22260],{"class":1026},[1002,76809,1031],{"class":1030},[1002,76811,20832],{"class":1019},[1002,76813,1085],{"class":1030},[925,76815,44366,76816,948],{},[933,76817,38060],{"href":76818,"rel":76819},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fnodejs-security",[937],[1579,76821,76822],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":76824},[76825,76828,76832,76833,76834,76837,76842,76843,76844,76845,76846],{"id":75079,"depth":1012,"text":75049,"children":76826},[76827],{"id":75082,"depth":1047,"text":75083},{"id":75557,"depth":1012,"text":75052,"children":76829},[76830,76831],{"id":859,"depth":1047,"text":33001},{"id":75684,"depth":1047,"text":75685},{"id":75797,"depth":1012,"text":75798},{"id":75807,"depth":1012,"text":75055},{"id":76212,"depth":1012,"text":75058,"children":76835},[76836],{"id":76215,"depth":1047,"text":76216},{"id":76301,"depth":1012,"text":76302,"children":76838},[76839,76840,76841],{"id":76308,"depth":1047,"text":76309},{"id":76321,"depth":1047,"text":76322},{"id":76357,"depth":1047,"text":76358},{"id":76432,"depth":1012,"text":75064},{"id":76438,"depth":1012,"text":75067},{"id":27346,"depth":1012,"text":51247},{"id":76514,"depth":1012,"text":75073},{"id":76583,"depth":1012,"text":75076,"children":76847},[76848],{"id":76586,"depth":1047,"text":76587},"2015-11-10","\u002Fimages\u002Fblog\u002Ffeatures\u002Fnode-js-security.jpg",{},{"title":580,"description":582},"blog\u002Fnode-js-security",[16,17],"kTRFhqDeb_-L-qM3jkU9O4vtp6-a2AX6JYw6AaI4QDE",{"id":76857,"title":305,"author":920,"body":76858,"date":77849,"description":307,"extension":1591,"image":77850,"meta":77851,"navigation":1050,"path":306,"seo":77852,"stem":77853,"tags":77854,"__hash__":77855},"blog\u002Fblog\u002Ffunctional-javascript.md",{"type":922,"value":76859,"toc":77839},[76860,76869,76872,76875,76878,76897,76900,76903,76911,76915,76918,76921,76925,76928,76934,76937,77079,77107,77124,77194,77197,77234,77238,77244,77314,77317,77351,77353,77356,77462,77465,77490,77493,77496,77576,77579,77642,77652,77654,77660,77765,77768,77819,77829,77836],[925,76861,76862,76863,2034,76866,948],{},"When Brendan Eich created JavaScipt, he borrowed features heavily from ",[941,76864,76865],{},"Self",[941,76867,76868],{},"Scheme",[1655,76870,76865],{"id":76871},"self",[925,76873,76874],{},"Self is a powerful somewhat unusual Object Oriented system.",[925,76876,76877],{},"JavaScript borrowed following features from Self:",[1530,76879,76880,76883,76886,76889,76892],{},[974,76881,76882],{},"Dynamic dispatch",[974,76884,76885],{},"Encapsulation",[974,76887,76888],{},"Polymorphism — lots of it (weak typing!)",[974,76890,76891],{},"Inheritance through the prototype chain",[974,76893,76894,76895],{},"Open recursion — through ",[1107,76896,3455],{},[1655,76898,76868],{"id":76899},"scheme",[925,76901,76902],{},"But it was Scheme, that JavaScript borrowed most important features of functional languages.",[1530,76904,76905,76908],{},[974,76906,76907],{},"First class functions",[974,76909,76910],{},"Closures",[953,76912,76914],{"id":76913},"whats-the-difference-between-oop-and-fp","What's the difference between OOP and FP",[925,76916,76917],{},"There are some significant differences in these two paradigms. OO focuses on the differences in the data, while FP concentrates on consistent data structures.",[925,76919,76920],{},"So here we are going to concentrate on the first-class functions.",[953,76922,76924],{"id":76923},"composing","Composing",[925,76926,76927],{},"Composing multiple functions to create more complex ones is a common utility in any programming language. And the ability to construct functions in a way that is easily composable is a true talent, but it really helps with code maintenance and reuse. It's not uncommon to find huge applications composed of many, much smaller functions.",[7100,76929,76931],{"title":76930,"type":24048},"Functional Composition",[925,76932,76933],{},"Functional Composition chains together functions to create a new function.",[925,76935,76936],{},"First things first, let's setup some basic test functions:",[993,76938,76940],{"className":995,"code":76939,"language":997,"meta":998,"style":998},"var add, multiply, square, sum;\n\nadd = function (n) {\n return n + 1;\n};\nmultiply = function (n) {\n return n * 2;\n};\nsquare = function (n) {\n return n * n;\n};\nsum = function (x, y) {\n return x + y;\n};\n",[941,76941,76942,76949,76953,76967,76979,76983,76998,77010,77014,77029,77039,77043,77063,77075],{"__ignoreMap":998},[1002,76943,76944,76946],{"class":1004,"line":1005},[1002,76945,18311],{"class":1015},[1002,76947,76948],{"class":1030}," add, multiply, square, sum;\n",[1002,76950,76951],{"class":1004,"line":1012},[1002,76952,1051],{"emptyLinePlaceholder":1050},[1002,76954,76955,76957,76959,76961,76963,76965],{"class":1004,"line":1047},[1002,76956,7985],{"class":1026},[1002,76958,1023],{"class":1015},[1002,76960,8457],{"class":1015},[1002,76962,6513],{"class":1030},[1002,76964,25415],{"class":2378},[1002,76966,2382],{"class":1030},[1002,76968,76969,76971,76973,76975,76977],{"class":1004,"line":1054},[1002,76970,15066],{"class":1015},[1002,76972,39192],{"class":1030},[1002,76974,5064],{"class":1015},[1002,76976,6246],{"class":1019},[1002,76978,1407],{"class":1030},[1002,76980,76981],{"class":1004,"line":1060},[1002,76982,1517],{"class":1030},[1002,76984,76985,76988,76990,76992,76994,76996],{"class":1004,"line":1272},[1002,76986,76987],{"class":1026},"multiply",[1002,76989,1023],{"class":1015},[1002,76991,8457],{"class":1015},[1002,76993,6513],{"class":1030},[1002,76995,25415],{"class":2378},[1002,76997,2382],{"class":1030},[1002,76999,77000,77002,77004,77006,77008],{"class":1004,"line":1348},[1002,77001,15066],{"class":1015},[1002,77003,39192],{"class":1030},[1002,77005,4703],{"class":1015},[1002,77007,10248],{"class":1019},[1002,77009,1407],{"class":1030},[1002,77011,77012],{"class":1004,"line":1354},[1002,77013,1517],{"class":1030},[1002,77015,77016,77019,77021,77023,77025,77027],{"class":1004,"line":1360},[1002,77017,77018],{"class":1026},"square",[1002,77020,1023],{"class":1015},[1002,77022,8457],{"class":1015},[1002,77024,6513],{"class":1030},[1002,77026,25415],{"class":2378},[1002,77028,2382],{"class":1030},[1002,77030,77031,77033,77035,77037],{"class":1004,"line":1366},[1002,77032,15066],{"class":1015},[1002,77034,39192],{"class":1030},[1002,77036,4703],{"class":1015},[1002,77038,39197],{"class":1030},[1002,77040,77041],{"class":1004,"line":1946},[1002,77042,1517],{"class":1030},[1002,77044,77045,77048,77050,77052,77054,77057,77059,77061],{"class":1004,"line":1956},[1002,77046,77047],{"class":1026},"sum",[1002,77049,1023],{"class":1015},[1002,77051,8457],{"class":1015},[1002,77053,6513],{"class":1030},[1002,77055,77056],{"class":2378},"x",[1002,77058,1251],{"class":1030},[1002,77060,50723],{"class":2378},[1002,77062,2382],{"class":1030},[1002,77064,77065,77067,77070,77072],{"class":1004,"line":1961},[1002,77066,15066],{"class":1015},[1002,77068,77069],{"class":1030}," x ",[1002,77071,5064],{"class":1015},[1002,77073,77074],{"class":1030}," y;\n",[1002,77076,77077],{"class":1004,"line":1971},[1002,77078,1517],{"class":1030},[7100,77080,77082],{"title":77081,"type":24048},"Mathematical Composition",[925,77083,77084,77085,77088,77089,77092,77093,77095,77096,77099,77100,77103,77104,948],{},"In mathematics ",[941,77086,77087],{},"f ∘ g"," (pronounced ",[1107,77090,77091],{},"f composed with g",") is the function that given ",[1107,77094,77056],{},", returns ",[1107,77097,77098],{},"f(g(x))",".\nSo if we follow the mathematical model ",[1107,77101,77102],{},"compose(add1, square)(x)"," should equal ",[1107,77105,77106],{},"add1(square(x))",[925,77108,77109,77110,1251,77112,36227,77114,77117,77118,6513,77121,77123],{},"To compose functions together, we will need to accept a list of functions for it to be made up from (eg: ",[1107,77111,933],{},[1107,77113,31621],{},[1107,77115,77116],{},"c","). Now need to call each of them with the result of the next function. In JavaScript, we would do this with ",[1107,77119,77120],{},"a(b(c(x)))",[1107,77122,77056],{}," being the starting value). However, it would be much more useful to have something a little more reusable than this.",[993,77125,77127],{"className":995,"code":77126,"language":997,"meta":998,"style":998},"var compose = function (f, g) {\n return function () {\n return f.call(this, g.apply(this, arguments));\n };\n};\n",[941,77128,77129,77150,77158,77186,77190],{"__ignoreMap":998},[1002,77130,77131,77133,77135,77137,77139,77141,77143,77145,77148],{"class":1004,"line":1005},[1002,77132,18311],{"class":1015},[1002,77134,39056],{"class":1026},[1002,77136,1023],{"class":1015},[1002,77138,8457],{"class":1015},[1002,77140,6513],{"class":1030},[1002,77142,39401],{"class":2378},[1002,77144,1251],{"class":1030},[1002,77146,77147],{"class":2378},"g",[1002,77149,2382],{"class":1030},[1002,77151,77152,77154,77156],{"class":1004,"line":1012},[1002,77153,15066],{"class":1015},[1002,77155,8457],{"class":1015},[1002,77157,9772],{"class":1030},[1002,77159,77160,77162,77165,77167,77169,77171,77174,77176,77178,77180,77182,77184],{"class":1004,"line":1047},[1002,77161,2687],{"class":1015},[1002,77163,77164],{"class":1030}," f.",[1002,77166,8426],{"class":1026},[1002,77168,1031],{"class":1030},[1002,77170,3455],{"class":1019},[1002,77172,77173],{"class":1030},", g.",[1002,77175,17677],{"class":1026},[1002,77177,1031],{"class":1030},[1002,77179,3455],{"class":1019},[1002,77181,1251],{"class":1030},[1002,77183,31403],{"class":1019},[1002,77185,5663],{"class":1030},[1002,77187,77188],{"class":1004,"line":1054},[1002,77189,15113],{"class":1030},[1002,77191,77192],{"class":1004,"line":1060},[1002,77193,1517],{"class":1030},[925,77195,77196],{},"The above function iterates over the function list (our arguments) in reverse - the last function to pass in is executed first. Given a single value as the initial input, it'll chain that value between every function call and return the final result. This allows us to do some really cool things.",[993,77198,77200],{"className":995,"code":77199,"language":997,"meta":998,"style":998},"var run = compose(add, multiply);\n\nrun(22); \u002F\u002F 45\n",[941,77201,77202,77216,77220],{"__ignoreMap":998},[1002,77203,77204,77206,77209,77211,77213],{"class":1004,"line":1005},[1002,77205,18311],{"class":1015},[1002,77207,77208],{"class":1030}," run ",[1002,77210,2393],{"class":1015},[1002,77212,39056],{"class":1026},[1002,77214,77215],{"class":1030},"(add, multiply);\n",[1002,77217,77218],{"class":1004,"line":1012},[1002,77219,1051],{"emptyLinePlaceholder":1050},[1002,77221,77222,77224,77226,77229,77231],{"class":1004,"line":1047},[1002,77223,2061],{"class":1026},[1002,77225,1031],{"class":1030},[1002,77227,77228],{"class":1019},"22",[1002,77230,18256],{"class":1030},[1002,77232,77233],{"class":1008},"\u002F\u002F 45\n",[953,77235,77237],{"id":77236},"sequence","Sequence",[925,77239,77240,77241,77243],{},"Sequence is similar to ",[941,77242,39241],{}," but the arguments are executed in reverse.",[993,77245,77247],{"className":995,"code":77246,"language":997,"meta":998,"style":998},"var sequence = function (f, g) {\n return function () {\n return g.call(this, f.apply(this, arguments));\n };\n};\n",[941,77248,77249,77270,77278,77306,77310],{"__ignoreMap":998},[1002,77250,77251,77253,77256,77258,77260,77262,77264,77266,77268],{"class":1004,"line":1005},[1002,77252,18311],{"class":1015},[1002,77254,77255],{"class":1026}," sequence",[1002,77257,1023],{"class":1015},[1002,77259,8457],{"class":1015},[1002,77261,6513],{"class":1030},[1002,77263,39401],{"class":2378},[1002,77265,1251],{"class":1030},[1002,77267,77147],{"class":2378},[1002,77269,2382],{"class":1030},[1002,77271,77272,77274,77276],{"class":1004,"line":1012},[1002,77273,15066],{"class":1015},[1002,77275,8457],{"class":1015},[1002,77277,9772],{"class":1030},[1002,77279,77280,77282,77285,77287,77289,77291,77294,77296,77298,77300,77302,77304],{"class":1004,"line":1047},[1002,77281,2687],{"class":1015},[1002,77283,77284],{"class":1030}," g.",[1002,77286,8426],{"class":1026},[1002,77288,1031],{"class":1030},[1002,77290,3455],{"class":1019},[1002,77292,77293],{"class":1030},", f.",[1002,77295,17677],{"class":1026},[1002,77297,1031],{"class":1030},[1002,77299,3455],{"class":1019},[1002,77301,1251],{"class":1030},[1002,77303,31403],{"class":1019},[1002,77305,5663],{"class":1030},[1002,77307,77308],{"class":1004,"line":1054},[1002,77309,15113],{"class":1030},[1002,77311,77312],{"class":1004,"line":1060},[1002,77313,1517],{"class":1030},[925,77315,77316],{},"we can reuse the compose function to write the sequence implementation.",[993,77318,77320],{"className":995,"code":77319,"language":997,"meta":998,"style":998},"var run = sequence(add, multiply);\n\nrun(22); \u002F\u002F 46\n",[941,77321,77322,77334,77338],{"__ignoreMap":998},[1002,77323,77324,77326,77328,77330,77332],{"class":1004,"line":1005},[1002,77325,18311],{"class":1015},[1002,77327,77208],{"class":1030},[1002,77329,2393],{"class":1015},[1002,77331,77255],{"class":1026},[1002,77333,77215],{"class":1030},[1002,77335,77336],{"class":1004,"line":1012},[1002,77337,1051],{"emptyLinePlaceholder":1050},[1002,77339,77340,77342,77344,77346,77348],{"class":1004,"line":1047},[1002,77341,2061],{"class":1026},[1002,77343,1031],{"class":1030},[1002,77345,77228],{"class":1019},[1002,77347,18256],{"class":1030},[1002,77349,77350],{"class":1008},"\u002F\u002F 46\n",[953,77352,32621],{"id":32617},[925,77354,77355],{},"Reduce combines an array into a single value by repeatedly using a function that combines an element of the array with a base value.",[993,77357,77359],{"className":995,"code":77358,"language":997,"meta":998,"style":998},"var reduce = function (combine, base, array) {\n var i,\n len = array.length;\n\n for (i = 0; i \u003C len; i++) {\n base = combine(base, array[i]);\n }\n\n return base;\n};\n",[941,77360,77361,77386,77393,77406,77410,77430,77443,77447,77451,77458],{"__ignoreMap":998},[1002,77362,77363,77365,77367,77369,77371,77373,77376,77378,77380,77382,77384],{"class":1004,"line":1005},[1002,77364,18311],{"class":1015},[1002,77366,32636],{"class":1026},[1002,77368,1023],{"class":1015},[1002,77370,8457],{"class":1015},[1002,77372,6513],{"class":1030},[1002,77374,77375],{"class":2378},"combine",[1002,77377,1251],{"class":1030},[1002,77379,70894],{"class":2378},[1002,77381,1251],{"class":1030},[1002,77383,39325],{"class":2378},[1002,77385,2382],{"class":1030},[1002,77387,77388,77390],{"class":1004,"line":1012},[1002,77389,28293],{"class":1015},[1002,77391,77392],{"class":1030}," i,\n",[1002,77394,77395,77398,77400,77402,77404],{"class":1004,"line":1047},[1002,77396,77397],{"class":1030}," len ",[1002,77399,2393],{"class":1015},[1002,77401,39334],{"class":1030},[1002,77403,5873],{"class":1019},[1002,77405,1407],{"class":1030},[1002,77407,77408],{"class":1004,"line":1054},[1002,77409,1051],{"emptyLinePlaceholder":1050},[1002,77411,77412,77414,77416,77418,77420,77422,77424,77426,77428],{"class":1004,"line":1060},[1002,77413,12151],{"class":1015},[1002,77415,44863],{"class":1030},[1002,77417,2393],{"class":1015},[1002,77419,4910],{"class":1019},[1002,77421,6536],{"class":1030},[1002,77423,6539],{"class":1015},[1002,77425,6542],{"class":1030},[1002,77427,6545],{"class":1015},[1002,77429,2382],{"class":1030},[1002,77431,77432,77435,77437,77440],{"class":1004,"line":1272},[1002,77433,77434],{"class":1030}," base ",[1002,77436,2393],{"class":1015},[1002,77438,77439],{"class":1026}," combine",[1002,77441,77442],{"class":1030},"(base, array[i]);\n",[1002,77444,77445],{"class":1004,"line":1348},[1002,77446,1269],{"class":1030},[1002,77448,77449],{"class":1004,"line":1354},[1002,77450,1051],{"emptyLinePlaceholder":1050},[1002,77452,77453,77455],{"class":1004,"line":1360},[1002,77454,15066],{"class":1015},[1002,77456,77457],{"class":1030}," base;\n",[1002,77459,77460],{"class":1004,"line":1366},[1002,77461,1517],{"class":1030},[925,77463,77464],{},"Now we can write a function for sum.",[993,77466,77468],{"className":995,"code":77467,"language":997,"meta":998,"style":998},"sum([1, 2, 3]); \u002F\u002F 6\n",[941,77469,77470],{"__ignoreMap":998},[1002,77471,77472,77474,77476,77478,77480,77482,77484,77486,77488],{"class":1004,"line":1005},[1002,77473,77047],{"class":1026},[1002,77475,30910],{"class":1030},[1002,77477,6211],{"class":1019},[1002,77479,1251],{"class":1030},[1002,77481,5681],{"class":1019},[1002,77483,1251],{"class":1030},[1002,77485,2796],{"class":1019},[1002,77487,26438],{"class":1030},[1002,77489,51367],{"class":1008},[953,77491,77492],{"id":38678},"ForEach",[925,77494,77495],{},"ForEach goes over an array, applying a function to every element",[993,77497,77499],{"className":995,"code":77498,"language":997,"meta":998,"style":998},"function forEach(array, fn) {\n var i,\n len = array.length;\n\n for (i = 0; i \u003C len; i++) {\n fn(array[i]);\n }\n}\n",[941,77500,77501,77518,77524,77536,77540,77560,77568,77572],{"__ignoreMap":998},[1002,77502,77503,77505,77508,77510,77512,77514,77516],{"class":1004,"line":1005},[1002,77504,6965],{"class":1015},[1002,77506,77507],{"class":1026}," forEach",[1002,77509,1031],{"class":1030},[1002,77511,39325],{"class":2378},[1002,77513,1251],{"class":1030},[1002,77515,8265],{"class":2378},[1002,77517,2382],{"class":1030},[1002,77519,77520,77522],{"class":1004,"line":1012},[1002,77521,28293],{"class":1015},[1002,77523,77392],{"class":1030},[1002,77525,77526,77528,77530,77532,77534],{"class":1004,"line":1047},[1002,77527,77397],{"class":1030},[1002,77529,2393],{"class":1015},[1002,77531,39334],{"class":1030},[1002,77533,5873],{"class":1019},[1002,77535,1407],{"class":1030},[1002,77537,77538],{"class":1004,"line":1054},[1002,77539,1051],{"emptyLinePlaceholder":1050},[1002,77541,77542,77544,77546,77548,77550,77552,77554,77556,77558],{"class":1004,"line":1060},[1002,77543,12151],{"class":1015},[1002,77545,44863],{"class":1030},[1002,77547,2393],{"class":1015},[1002,77549,4910],{"class":1019},[1002,77551,6536],{"class":1030},[1002,77553,6539],{"class":1015},[1002,77555,6542],{"class":1030},[1002,77557,6545],{"class":1015},[1002,77559,2382],{"class":1030},[1002,77561,77562,77565],{"class":1004,"line":1272},[1002,77563,77564],{"class":1026}," fn",[1002,77566,77567],{"class":1030},"(array[i]);\n",[1002,77569,77570],{"class":1004,"line":1348},[1002,77571,1269],{"class":1030},[1002,77573,77574],{"class":1004,"line":1354},[1002,77575,1170],{"class":1030},[925,77577,77578],{},"Now we can write an implementation for forEach function.",[993,77580,77582],{"className":995,"code":77581,"language":997,"meta":998,"style":998},"var result = 0;\nforEach([1, 2, 3], function (element) {\n result = result + element;\n}); \u002F\u002F 6\n",[941,77583,77584,77596,77622,77636],{"__ignoreMap":998},[1002,77585,77586,77588,77590,77592,77594],{"class":1004,"line":1005},[1002,77587,18311],{"class":1015},[1002,77589,12925],{"class":1030},[1002,77591,2393],{"class":1015},[1002,77593,4910],{"class":1019},[1002,77595,1407],{"class":1030},[1002,77597,77598,77600,77602,77604,77606,77608,77610,77612,77614,77616,77618,77620],{"class":1004,"line":1012},[1002,77599,8408],{"class":1026},[1002,77601,30910],{"class":1030},[1002,77603,6211],{"class":1019},[1002,77605,1251],{"class":1030},[1002,77607,5681],{"class":1019},[1002,77609,1251],{"class":1030},[1002,77611,2796],{"class":1019},[1002,77613,32267],{"class":1030},[1002,77615,6965],{"class":1015},[1002,77617,6513],{"class":1030},[1002,77619,50541],{"class":2378},[1002,77621,2382],{"class":1030},[1002,77623,77624,77627,77629,77631,77633],{"class":1004,"line":1047},[1002,77625,77626],{"class":1030}," result ",[1002,77628,2393],{"class":1015},[1002,77630,12925],{"class":1030},[1002,77632,5064],{"class":1015},[1002,77634,77635],{"class":1030}," element;\n",[1002,77637,77638,77640],{"class":1004,"line":1054},[1002,77639,50624],{"class":1030},[1002,77641,51367],{"class":1008},[7100,77643,77645],{"title":77644,"type":24048},"Array.prototype.forEach()",[925,77646,77647,77648,77651],{},"ES5 ",[941,77649,77650],{},"forEach()"," method executes a provided function once per array element.",[953,77653,32239],{"id":19444},[925,77655,77656,77657,77659],{},"Map goes over an array, applying a function to every element, just like ",[1107,77658,8408],{},". But instead of discarding the values returned by function, it builds up a new array from these values.",[993,77661,77663],{"className":995,"code":77662,"language":997,"meta":998,"style":998},"function map(array, fn) {\n var result = [],\n i,\n len = array.length;\n\n for (i = 0; i \u003C len; i++) {\n result.push(fn(array[i]));\n }\n\n return result;\n}\n",[941,77664,77665,77681,77692,77697,77709,77713,77733,77747,77751,77755,77761],{"__ignoreMap":998},[1002,77666,77667,77669,77671,77673,77675,77677,77679],{"class":1004,"line":1005},[1002,77668,6965],{"class":1015},[1002,77670,32254],{"class":1026},[1002,77672,1031],{"class":1030},[1002,77674,39325],{"class":2378},[1002,77676,1251],{"class":1030},[1002,77678,8265],{"class":2378},[1002,77680,2382],{"class":1030},[1002,77682,77683,77685,77687,77689],{"class":1004,"line":1012},[1002,77684,28293],{"class":1015},[1002,77686,12925],{"class":1030},[1002,77688,2393],{"class":1015},[1002,77690,77691],{"class":1030}," [],\n",[1002,77693,77694],{"class":1004,"line":1047},[1002,77695,77696],{"class":1030}," i,\n",[1002,77698,77699,77701,77703,77705,77707],{"class":1004,"line":1054},[1002,77700,77397],{"class":1030},[1002,77702,2393],{"class":1015},[1002,77704,39334],{"class":1030},[1002,77706,5873],{"class":1019},[1002,77708,1407],{"class":1030},[1002,77710,77711],{"class":1004,"line":1060},[1002,77712,1051],{"emptyLinePlaceholder":1050},[1002,77714,77715,77717,77719,77721,77723,77725,77727,77729,77731],{"class":1004,"line":1272},[1002,77716,12151],{"class":1015},[1002,77718,44863],{"class":1030},[1002,77720,2393],{"class":1015},[1002,77722,4910],{"class":1019},[1002,77724,6536],{"class":1030},[1002,77726,6539],{"class":1015},[1002,77728,6542],{"class":1030},[1002,77730,6545],{"class":1015},[1002,77732,2382],{"class":1030},[1002,77734,77735,77738,77740,77742,77744],{"class":1004,"line":1348},[1002,77736,77737],{"class":1030}," result.",[1002,77739,4974],{"class":1026},[1002,77741,1031],{"class":1030},[1002,77743,8265],{"class":1026},[1002,77745,77746],{"class":1030},"(array[i]));\n",[1002,77748,77749],{"class":1004,"line":1354},[1002,77750,1269],{"class":1030},[1002,77752,77753],{"class":1004,"line":1360},[1002,77754,1051],{"emptyLinePlaceholder":1050},[1002,77756,77757,77759],{"class":1004,"line":1366},[1002,77758,15066],{"class":1015},[1002,77760,17691],{"class":1030},[1002,77762,77763],{"class":1004,"line":1946},[1002,77764,1170],{"class":1030},[925,77766,77767],{},"Now we can write an implementation for map function.",[993,77769,77771],{"className":995,"code":77770,"language":997,"meta":998,"style":998},"map([1, 2, 3], function (element) {\n return element + 1;\n}); \u002F\u002F [2, 4, 6]\n",[941,77772,77773,77799,77812],{"__ignoreMap":998},[1002,77774,77775,77777,77779,77781,77783,77785,77787,77789,77791,77793,77795,77797],{"class":1004,"line":1005},[1002,77776,19444],{"class":1026},[1002,77778,30910],{"class":1030},[1002,77780,6211],{"class":1019},[1002,77782,1251],{"class":1030},[1002,77784,5681],{"class":1019},[1002,77786,1251],{"class":1030},[1002,77788,2796],{"class":1019},[1002,77790,32267],{"class":1030},[1002,77792,6965],{"class":1015},[1002,77794,6513],{"class":1030},[1002,77796,50541],{"class":2378},[1002,77798,2382],{"class":1030},[1002,77800,77801,77803,77806,77808,77810],{"class":1004,"line":1012},[1002,77802,15066],{"class":1015},[1002,77804,77805],{"class":1030}," element ",[1002,77807,5064],{"class":1015},[1002,77809,6246],{"class":1019},[1002,77811,1407],{"class":1030},[1002,77813,77814,77816],{"class":1004,"line":1047},[1002,77815,50624],{"class":1030},[1002,77817,77818],{"class":1008},"\u002F\u002F [2, 4, 6]\n",[7100,77820,77822],{"title":77821,"type":24048},"Array.prototype.map()",[925,77823,77824,77825,77828],{},"EES5 ",[941,77826,77827],{},"map()"," method creates a new array with the results of calling a provided function on every element in this array.",[925,77830,77831,77832,948],{},"You can find the source code for this tutorial in ",[933,77833,38599],{"href":77834,"rel":77835},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Ffunctional-javascript",[937],[1579,77837,77838],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":77840},[77841,77842,77843,77844,77845,77846,77847,77848],{"id":76871,"depth":1047,"text":76865},{"id":76899,"depth":1047,"text":76868},{"id":76913,"depth":1012,"text":76914},{"id":76923,"depth":1012,"text":76924},{"id":77236,"depth":1012,"text":77237},{"id":32617,"depth":1012,"text":32621},{"id":38678,"depth":1012,"text":77492},{"id":19444,"depth":1012,"text":32239},"2015-10-31","\u002Fimages\u002Fblog\u002Ffeatures\u002Ffunctional-javascript.jpg",{},{"title":305,"description":307},"blog\u002Ffunctional-javascript",[16,17],"J3seBXjpC5rCy596hws9joFjjBX6ze-xroLcJDei9Xk",{"id":77857,"title":641,"author":920,"body":77858,"date":81372,"description":643,"extension":1591,"image":81373,"meta":81374,"navigation":1050,"path":642,"seo":81375,"stem":81376,"tags":81377,"__hash__":81378},"blog\u002Fblog\u002Freact-best-practices-patterns.md",{"type":922,"value":77859,"toc":81296},[77860,77864,77867,77871,77874,77880,77884,77887,77890,77920,77922,78239,78243,78249,78252,78371,78375,78451,78455,78458,78462,78484,78487,78505,78508,78542,78545,78575,78579,78582,78585,78634,78637,78686,78690,78696,78699,78731,78734,78765,78768,78772,78775,78778,78867,78870,78958,78962,78970,78973,79058,79061,79182,79186,79189,79192,79406,79409,79670,79674,79679,79682,79742,79745,79791,79794,79864,79868,79873,79876,79930,79933,80006,80013,80020,80028,80031,80096,80099,80187,80194,80198,80201,80204,80240,80243,80277,80287,80291,80294,80297,80347,80350,80398,80401,80418,80422,80428,80582,80586,80592,80615,80624,80648,80651,80669,80673,80680,80683,80701,80704,80744,80748,80757,80760,80814,80817,80886,80888,80891,80895,80898,80901,80950,80953,80999,81005,81009,81012,81080,81084,81087,81171,81175,81178,81181,81225,81228,81288,81290,81293],[953,77861,77863],{"id":77862},"naming-conventions","Naming Conventions",[925,77865,77866],{},"Let's look at the file and folder naming convention for React.js components.",[1655,77868,77870],{"id":77869},"directory-structure","Directory Structure",[925,77872,77873],{},"React component directory structure can be organized as follows.",[993,77875,77878],{"className":77876,"code":77877,"language":24241},[24239],"\u002Factions\u002FActionTypes.js\n\u002Fcomponents\u002Fcommon\u002FLink.js\n\u002Fcomponents\u002Fcommon\u002F...\n\u002Fcomponents\u002Fforms\u002FTextBox.js\n\u002Fcomponents\u002Fforms\u002F...\n\u002Fcomponents\u002Flayout\u002FApp.js\n\u002Fcomponents\u002Flayout\u002FNavigation.js\n\u002Fcomponents\u002Flayout\u002F...\n\u002Fcomponents\u002Fpages\u002FHome.js\n\u002Fcomponents\u002Fpages\u002FAccount\u002Findex.js\n\u002Fcomponents\u002Fpages\u002F...\n\u002Fcore\u002F...\n\u002Fconstants\u002F...\n\u002Fstores\u002F...\n",[941,77879,77877],{"__ignoreMap":998},[953,77881,77883],{"id":77882},"code-organization","Code Organization",[1655,77885,35577],{"id":77886},"classes",[925,77888,77889],{},"The class definition for can be organized as follows:",[1530,77891,77892,77914,77917],{},[974,77893,77894,77895],{},"class definition\n",[1530,77896,77897,77905,77908,77911],{},[974,77898,77899,77900],{},"constructor\n",[1530,77901,77902],{},[974,77903,77904],{},"event-handlers",[974,77906,77907],{},"component life-cycle events",[974,77909,77910],{},"getters",[974,77912,77913],{},"setters",[974,77915,77916],{},"defaultProps",[974,77918,77919],{},"propTypes",[925,77921,26058],{},[993,77923,77925],{"className":995,"code":77924,"language":997,"meta":998,"style":998},"class Car extends React.Component {\n constructor (props) {\n super(props);\n\n this.state = { running: false };\n\n this.handleClick = () => {\n this.setState({running: !this.state.running});\n };\n }\n\n componentWillMount () {\n \u002F\u002F add event listeners (Flux Store, WebSocket, document, etc.)\n },\n\n componentDidMount () {\n \u002F\u002F React.getDOMNode()\n },\n\n componentWillUnmount () {\n \u002F\u002F remove event listeners (Flux Store, WebSocket, document, etc.)\n },\n\n get engineStatus () {\n return (this.state.running) ? \"is running\" : \"is off\";\n }\n\n render () {\n return (\n \u003Cdiv onClick={this.handleClick}>\n {this.props.make} {this.engineStatus}\n \u003C\u002Fdiv>\n );\n },\n}\n\nCar.defaultProps = {\n make: 'Toyota'\n};\n\nCar.propTypes = {\n make: React.PropTypes.string\n};\n",[941,77926,77927,77943,77953,77959,77963,77979,77983,77999,78018,78022,78026,78030,78037,78042,78046,78050,78056,78061,78065,78069,78075,78080,78084,78088,78097,78120,78124,78128,78134,78140,78157,78172,78180,78184,78188,78192,78196,78205,78213,78217,78221,78230,78235],{"__ignoreMap":998},[1002,77928,77929,77931,77933,77935,77937,77939,77941],{"class":1004,"line":1005},[1002,77930,2363],{"class":1015},[1002,77932,2366],{"class":1026},[1002,77934,3014],{"class":1015},[1002,77936,20112],{"class":1026},[1002,77938,948],{"class":1030},[1002,77940,20117],{"class":1026},[1002,77942,1457],{"class":1030},[1002,77944,77945,77947,77949,77951],{"class":1004,"line":1012},[1002,77946,2373],{"class":1015},[1002,77948,6513],{"class":1030},[1002,77950,19533],{"class":2378},[1002,77952,2382],{"class":1030},[1002,77954,77955,77957],{"class":1004,"line":1047},[1002,77956,9725],{"class":1019},[1002,77958,42362],{"class":1030},[1002,77960,77961],{"class":1004,"line":1054},[1002,77962,1051],{"emptyLinePlaceholder":1050},[1002,77964,77965,77967,77970,77972,77975,77977],{"class":1004,"line":1060},[1002,77966,2387],{"class":1019},[1002,77968,77969],{"class":1030},".state ",[1002,77971,2393],{"class":1015},[1002,77973,77974],{"class":1030}," { running: ",[1002,77976,19341],{"class":1019},[1002,77978,9444],{"class":1030},[1002,77980,77981],{"class":1004,"line":1272},[1002,77982,1051],{"emptyLinePlaceholder":1050},[1002,77984,77985,77987,77989,77991,77993,77995,77997],{"class":1004,"line":1348},[1002,77986,2387],{"class":1019},[1002,77988,948],{"class":1030},[1002,77990,8183],{"class":1026},[1002,77992,1023],{"class":1015},[1002,77994,17297],{"class":1030},[1002,77996,15497],{"class":1015},[1002,77998,1457],{"class":1030},[1002,78000,78001,78004,78006,78008,78011,78013,78015],{"class":1004,"line":1354},[1002,78002,78003],{"class":1019}," this",[1002,78005,948],{"class":1030},[1002,78007,26816],{"class":1026},[1002,78009,78010],{"class":1030},"({running: ",[1002,78012,13559],{"class":1015},[1002,78014,3455],{"class":1019},[1002,78016,78017],{"class":1030},".state.running});\n",[1002,78019,78020],{"class":1004,"line":1360},[1002,78021,10900],{"class":1030},[1002,78023,78024],{"class":1004,"line":1366},[1002,78025,1269],{"class":1030},[1002,78027,78028],{"class":1004,"line":1946},[1002,78029,1051],{"emptyLinePlaceholder":1050},[1002,78031,78032,78035],{"class":1004,"line":1956},[1002,78033,78034],{"class":1026}," componentWillMount",[1002,78036,9772],{"class":1030},[1002,78038,78039],{"class":1004,"line":1961},[1002,78040,78041],{"class":1008}," \u002F\u002F add event listeners (Flux Store, WebSocket, document, etc.)\n",[1002,78043,78044],{"class":1004,"line":1971},[1002,78045,1502],{"class":1030},[1002,78047,78048],{"class":1004,"line":1980},[1002,78049,1051],{"emptyLinePlaceholder":1050},[1002,78051,78052,78054],{"class":1004,"line":1985},[1002,78053,20139],{"class":1026},[1002,78055,9772],{"class":1030},[1002,78057,78058],{"class":1004,"line":1995},[1002,78059,78060],{"class":1008}," \u002F\u002F React.getDOMNode()\n",[1002,78062,78063],{"class":1004,"line":2006},[1002,78064,1502],{"class":1030},[1002,78066,78067],{"class":1004,"line":2011},[1002,78068,1051],{"emptyLinePlaceholder":1050},[1002,78070,78071,78073],{"class":1004,"line":2017},[1002,78072,20181],{"class":1026},[1002,78074,9772],{"class":1030},[1002,78076,78077],{"class":1004,"line":2022},[1002,78078,78079],{"class":1008}," \u002F\u002F remove event listeners (Flux Store, WebSocket, document, etc.)\n",[1002,78081,78082],{"class":1004,"line":2442},[1002,78083,1502],{"class":1030},[1002,78085,78086],{"class":1004,"line":2466},[1002,78087,1051],{"emptyLinePlaceholder":1050},[1002,78089,78090,78092,78095],{"class":1004,"line":2471},[1002,78091,7887],{"class":1015},[1002,78093,78094],{"class":1026}," engineStatus",[1002,78096,9772],{"class":1030},[1002,78098,78099,78101,78103,78105,78108,78110,78113,78115,78118],{"class":1004,"line":2476},[1002,78100,2687],{"class":1015},[1002,78102,6513],{"class":1030},[1002,78104,3455],{"class":1019},[1002,78106,78107],{"class":1030},".state.running) ",[1002,78109,24117],{"class":1015},[1002,78111,78112],{"class":1034}," \"is running\"",[1002,78114,29406],{"class":1015},[1002,78116,78117],{"class":1034}," \"is off\"",[1002,78119,1407],{"class":1030},[1002,78121,78122],{"class":1004,"line":2481},[1002,78123,1269],{"class":1030},[1002,78125,78126],{"class":1004,"line":2491},[1002,78127,1051],{"emptyLinePlaceholder":1050},[1002,78129,78130,78132],{"class":1004,"line":2502},[1002,78131,20201],{"class":1026},[1002,78133,9772],{"class":1030},[1002,78135,78136,78138],{"class":1004,"line":2513},[1002,78137,2687],{"class":1015},[1002,78139,15692],{"class":1030},[1002,78141,78142,78144,78146,78148,78150,78152,78154],{"class":1004,"line":2535},[1002,78143,19579],{"class":1030},[1002,78145,19650],{"class":15711},[1002,78147,16691],{"class":1026},[1002,78149,2393],{"class":1015},[1002,78151,22192],{"class":1030},[1002,78153,3455],{"class":1019},[1002,78155,78156],{"class":1030},".handleClick}>\n",[1002,78158,78159,78162,78164,78167,78169],{"class":1004,"line":2557},[1002,78160,78161],{"class":1030}," {",[1002,78163,3455],{"class":1019},[1002,78165,78166],{"class":1030},".props.make} {",[1002,78168,3455],{"class":1019},[1002,78170,78171],{"class":1030},".engineStatus}\n",[1002,78173,78174,78176,78178],{"class":1004,"line":2562},[1002,78175,21184],{"class":1030},[1002,78177,19650],{"class":15711},[1002,78179,15703],{"class":1030},[1002,78181,78182],{"class":1004,"line":2567},[1002,78183,22541],{"class":1030},[1002,78185,78186],{"class":1004,"line":2572},[1002,78187,1502],{"class":1030},[1002,78189,78190],{"class":1004,"line":2582},[1002,78191,1170],{"class":1030},[1002,78193,78194],{"class":1004,"line":2594},[1002,78195,1051],{"emptyLinePlaceholder":1050},[1002,78197,78198,78201,78203],{"class":1004,"line":2603},[1002,78199,78200],{"class":1030},"Car.defaultProps ",[1002,78202,2393],{"class":1015},[1002,78204,1457],{"class":1030},[1002,78206,78207,78210],{"class":1004,"line":2619},[1002,78208,78209],{"class":1030}," make: ",[1002,78211,78212],{"class":1034},"'Toyota'\n",[1002,78214,78215],{"class":1004,"line":2633},[1002,78216,1517],{"class":1030},[1002,78218,78219],{"class":1004,"line":2641},[1002,78220,1051],{"emptyLinePlaceholder":1050},[1002,78222,78223,78226,78228],{"class":1004,"line":2655},[1002,78224,78225],{"class":1030},"Car.propTypes ",[1002,78227,2393],{"class":1015},[1002,78229,1457],{"class":1030},[1002,78231,78232],{"class":1004,"line":2667},[1002,78233,78234],{"class":1030}," make: React.PropTypes.string\n",[1002,78236,78237],{"class":1004,"line":2674},[1002,78238,1517],{"class":1030},[1655,78240,78242],{"id":78241},"class-names","Class Names",[925,78244,24000,78245,78248],{},[1107,78246,78247],{},"classNames"," to manage conditional classes.",[1655,78250,78251],{"id":78251},"bad",[993,78253,78255],{"className":995,"code":78254,"language":997,"meta":998,"style":998},"get classes () {\n let classes = ['my-component'];\n\n if (this.state.active) {\n classes.push('my-omponent-active');\n }\n\n return classes.join(' ');\n}\n\nrender () {\n return \u003Cdiv className={this.classes} \u002F>;\n}\n",[941,78256,78257,78266,78282,78286,78297,78311,78315,78319,78334,78338,78342,78348,78367],{"__ignoreMap":998},[1002,78258,78259,78262,78264],{"class":1004,"line":1005},[1002,78260,78261],{"class":1030},"get ",[1002,78263,77886],{"class":1026},[1002,78265,9772],{"class":1030},[1002,78267,78268,78270,78273,78275,78277,78280],{"class":1004,"line":1012},[1002,78269,26884],{"class":1015},[1002,78271,78272],{"class":1030}," classes ",[1002,78274,2393],{"class":1015},[1002,78276,1897],{"class":1030},[1002,78278,78279],{"class":1034},"'my-component'",[1002,78281,6754],{"class":1030},[1002,78283,78284],{"class":1004,"line":1047},[1002,78285,1051],{"emptyLinePlaceholder":1050},[1002,78287,78288,78290,78292,78294],{"class":1004,"line":1054},[1002,78289,19971],{"class":1015},[1002,78291,6513],{"class":1030},[1002,78293,3455],{"class":1019},[1002,78295,78296],{"class":1030},".state.active) {\n",[1002,78298,78299,78302,78304,78306,78309],{"class":1004,"line":1060},[1002,78300,78301],{"class":1030}," classes.",[1002,78303,4974],{"class":1026},[1002,78305,1031],{"class":1030},[1002,78307,78308],{"class":1034},"'my-omponent-active'",[1002,78310,1085],{"class":1030},[1002,78312,78313],{"class":1004,"line":1272},[1002,78314,1269],{"class":1030},[1002,78316,78317],{"class":1004,"line":1348},[1002,78318,1051],{"emptyLinePlaceholder":1050},[1002,78320,78321,78323,78326,78328,78330,78332],{"class":1004,"line":1354},[1002,78322,15066],{"class":1015},[1002,78324,78325],{"class":1030}," classes.",[1002,78327,7504],{"class":1026},[1002,78329,1031],{"class":1030},[1002,78331,6357],{"class":1034},[1002,78333,1085],{"class":1030},[1002,78335,78336],{"class":1004,"line":1360},[1002,78337,1170],{"class":1030},[1002,78339,78340],{"class":1004,"line":1366},[1002,78341,1051],{"emptyLinePlaceholder":1050},[1002,78343,78344,78346],{"class":1004,"line":1946},[1002,78345,19545],{"class":1026},[1002,78347,9772],{"class":1030},[1002,78349,78350,78352,78354,78356,78358,78360,78362,78364],{"class":1004,"line":1956},[1002,78351,15066],{"class":1015},[1002,78353,20660],{"class":1030},[1002,78355,19650],{"class":15711},[1002,78357,26915],{"class":1026},[1002,78359,2393],{"class":1015},[1002,78361,22192],{"class":1030},[1002,78363,3455],{"class":1019},[1002,78365,78366],{"class":1030},".classes} \u002F>;\n",[1002,78368,78369],{"class":1004,"line":1961},[1002,78370,1170],{"class":1030},[1655,78372,78374],{"id":78373},"good","Good",[993,78376,78378],{"className":995,"code":78377,"language":997,"meta":998,"style":998},"render () {\n let classes = {\n 'MyComponent': true,\n 'MyComponent--active': this.state.active\n };\n\n return \u003Cdiv className={classnames(classes)} \u002F>;\n}\n",[941,78379,78380,78386,78396,78407,78419,78423,78427,78447],{"__ignoreMap":998},[1002,78381,78382,78384],{"class":1004,"line":1005},[1002,78383,19545],{"class":1026},[1002,78385,9772],{"class":1030},[1002,78387,78388,78390,78392,78394],{"class":1004,"line":1012},[1002,78389,26884],{"class":1015},[1002,78391,78272],{"class":1030},[1002,78393,2393],{"class":1015},[1002,78395,1457],{"class":1030},[1002,78397,78398,78401,78403,78405],{"class":1004,"line":1047},[1002,78399,78400],{"class":1034}," 'MyComponent'",[1002,78402,1137],{"class":1030},[1002,78404,17397],{"class":1019},[1002,78406,1143],{"class":1030},[1002,78408,78409,78412,78414,78416],{"class":1004,"line":1054},[1002,78410,78411],{"class":1034}," 'MyComponent--active'",[1002,78413,1137],{"class":1030},[1002,78415,3455],{"class":1019},[1002,78417,78418],{"class":1030},".state.active\n",[1002,78420,78421],{"class":1004,"line":1060},[1002,78422,15113],{"class":1030},[1002,78424,78425],{"class":1004,"line":1272},[1002,78426,1051],{"emptyLinePlaceholder":1050},[1002,78428,78429,78431,78433,78435,78437,78439,78441,78444],{"class":1004,"line":1348},[1002,78430,15066],{"class":1015},[1002,78432,20660],{"class":1030},[1002,78434,19650],{"class":15711},[1002,78436,26915],{"class":1026},[1002,78438,2393],{"class":1015},[1002,78440,22192],{"class":1030},[1002,78442,78443],{"class":1026},"classnames",[1002,78445,78446],{"class":1030},"(classes)} \u002F>;\n",[1002,78448,78449],{"class":1004,"line":1354},[1002,78450,1170],{"class":1030},[953,78452,78454],{"id":78453},"formatting-props","Formatting Props",[925,78456,78457],{},"Wrap props on newlines for exactly 2 or more.",[1655,78459,78461],{"id":78460},"bad-1","Bad",[993,78463,78465],{"className":995,"code":78464,"language":997,"meta":998,"style":998},"\u003CCar make=\"Oldsmobile\" \u002F>\n",[941,78466,78467],{"__ignoreMap":998},[1002,78468,78469,78471,78474,78477,78479,78482],{"class":1004,"line":1005},[1002,78470,6539],{"class":1030},[1002,78472,78473],{"class":1019},"Car",[1002,78475,78476],{"class":1026}," make",[1002,78478,2393],{"class":1015},[1002,78480,78481],{"class":1034},"\"Oldsmobile\"",[1002,78483,15258],{"class":1030},[1655,78485,78374],{"id":78486},"good-1",[993,78488,78489],{"className":995,"code":78464,"language":997,"meta":998,"style":998},[941,78490,78491],{"__ignoreMap":998},[1002,78492,78493,78495,78497,78499,78501,78503],{"class":1004,"line":1005},[1002,78494,6539],{"class":1030},[1002,78496,78473],{"class":1019},[1002,78498,78476],{"class":1026},[1002,78500,2393],{"class":1015},[1002,78502,78481],{"class":1034},[1002,78504,15258],{"class":1030},[1655,78506,78461],{"id":78507},"bad-2",[993,78509,78511],{"className":995,"code":78510,"language":997,"meta":998,"style":998},"\u003CCar make=\"Oldsmobile\" year=\"1950\" name=\"88\" \u002F>\n",[941,78512,78513],{"__ignoreMap":998},[1002,78514,78515,78517,78519,78521,78523,78525,78528,78530,78533,78535,78537,78540],{"class":1004,"line":1005},[1002,78516,6539],{"class":1030},[1002,78518,78473],{"class":1019},[1002,78520,78476],{"class":1026},[1002,78522,2393],{"class":1015},[1002,78524,78481],{"class":1034},[1002,78526,78527],{"class":1026}," year",[1002,78529,2393],{"class":1015},[1002,78531,78532],{"class":1034},"\"1950\"",[1002,78534,18584],{"class":1026},[1002,78536,2393],{"class":1015},[1002,78538,78539],{"class":1034},"\"88\"",[1002,78541,15258],{"class":1030},[1655,78543,78374],{"id":78544},"good-2",[993,78546,78547],{"className":995,"code":78510,"language":997,"meta":998,"style":998},[941,78548,78549],{"__ignoreMap":998},[1002,78550,78551,78553,78555,78557,78559,78561,78563,78565,78567,78569,78571,78573],{"class":1004,"line":1005},[1002,78552,6539],{"class":1030},[1002,78554,78473],{"class":1019},[1002,78556,78476],{"class":1026},[1002,78558,2393],{"class":1015},[1002,78560,78481],{"class":1034},[1002,78562,78527],{"class":1026},[1002,78564,2393],{"class":1015},[1002,78566,78532],{"class":1034},[1002,78568,18584],{"class":1026},[1002,78570,2393],{"class":1015},[1002,78572,78539],{"class":1034},[1002,78574,15258],{"class":1030},[953,78576,78578],{"id":78577},"computed-props","Computed Props",[925,78580,78581],{},"Use getters to name computed properties.",[1655,78583,78461],{"id":78584},"bad-3",[993,78586,78588],{"className":995,"code":78587,"language":997,"meta":998,"style":998},"makeAndName () {\n return `${this.props.make} ${this.props.name}`;\n}\n",[941,78589,78590,78597,78630],{"__ignoreMap":998},[1002,78591,78592,78595],{"class":1004,"line":1005},[1002,78593,78594],{"class":1026},"makeAndName",[1002,78596,9772],{"class":1030},[1002,78598,78599,78601,78603,78605,78607,78609,78611,78613,78616,78618,78620,78622,78624,78626,78628],{"class":1004,"line":1012},[1002,78600,15066],{"class":1015},[1002,78602,13056],{"class":1034},[1002,78604,3455],{"class":1019},[1002,78606,948],{"class":1034},[1002,78608,19533],{"class":1030},[1002,78610,948],{"class":1034},[1002,78612,13435],{"class":1030},[1002,78614,78615],{"class":1034},"} ${",[1002,78617,3455],{"class":1019},[1002,78619,948],{"class":1034},[1002,78621,19533],{"class":1030},[1002,78623,948],{"class":1034},[1002,78625,5911],{"class":1030},[1002,78627,3507],{"class":1034},[1002,78629,1407],{"class":1030},[1002,78631,78632],{"class":1004,"line":1047},[1002,78633,1170],{"class":1030},[1655,78635,78374],{"id":78636},"good-3",[993,78638,78640],{"className":995,"code":78639,"language":997,"meta":998,"style":998},"get brand () {\n return `${this.props.make} ${this.props.name}`;\n}\n",[941,78641,78642,78650,78682],{"__ignoreMap":998},[1002,78643,78644,78646,78648],{"class":1004,"line":1005},[1002,78645,78261],{"class":1030},[1002,78647,42400],{"class":1026},[1002,78649,9772],{"class":1030},[1002,78651,78652,78654,78656,78658,78660,78662,78664,78666,78668,78670,78672,78674,78676,78678,78680],{"class":1004,"line":1012},[1002,78653,15066],{"class":1015},[1002,78655,13056],{"class":1034},[1002,78657,3455],{"class":1019},[1002,78659,948],{"class":1034},[1002,78661,19533],{"class":1030},[1002,78663,948],{"class":1034},[1002,78665,13435],{"class":1030},[1002,78667,78615],{"class":1034},[1002,78669,3455],{"class":1019},[1002,78671,948],{"class":1034},[1002,78673,19533],{"class":1030},[1002,78675,948],{"class":1034},[1002,78677,5911],{"class":1030},[1002,78679,3507],{"class":1034},[1002,78681,1407],{"class":1030},[1002,78683,78684],{"class":1004,"line":1047},[1002,78685,1170],{"class":1030},[953,78687,78689],{"id":78688},"computed-state","Computed State",[925,78691,78692,78693,78695],{},"Prefix compound state ",[941,78694,77910],{}," with a verb for readability.",[1655,78697,78461],{"id":78698},"bad-4",[993,78700,78702],{"className":995,"code":78701,"language":997,"meta":998,"style":998},"isAccelerating () {\n return this.state.isRunning && this.state.pushingPedal;\n}\n",[941,78703,78704,78711,78727],{"__ignoreMap":998},[1002,78705,78706,78709],{"class":1004,"line":1005},[1002,78707,78708],{"class":1026},"isAccelerating",[1002,78710,9772],{"class":1030},[1002,78712,78713,78715,78717,78720,78722,78724],{"class":1004,"line":1012},[1002,78714,15066],{"class":1015},[1002,78716,2693],{"class":1019},[1002,78718,78719],{"class":1030},".state.isRunning ",[1002,78721,13133],{"class":1015},[1002,78723,2693],{"class":1019},[1002,78725,78726],{"class":1030},".state.pushingPedal;\n",[1002,78728,78729],{"class":1004,"line":1047},[1002,78730,1170],{"class":1030},[1655,78732,78374],{"id":78733},"good-4",[993,78735,78737],{"className":995,"code":78736,"language":997,"meta":998,"style":998},"get isAccelerating () {\n return this.state.isRunning && this.state.pushingPedal;\n}\n",[941,78738,78739,78747,78761],{"__ignoreMap":998},[1002,78740,78741,78743,78745],{"class":1004,"line":1005},[1002,78742,78261],{"class":1030},[1002,78744,78708],{"class":1026},[1002,78746,9772],{"class":1030},[1002,78748,78749,78751,78753,78755,78757,78759],{"class":1004,"line":1012},[1002,78750,15066],{"class":1015},[1002,78752,2693],{"class":1019},[1002,78754,78719],{"class":1030},[1002,78756,13133],{"class":1015},[1002,78758,2693],{"class":1019},[1002,78760,78726],{"class":1030},[1002,78762,78763],{"class":1004,"line":1047},[1002,78764,1170],{"class":1030},[925,78766,78767],{},"These methods MUST return a boolean value.",[953,78769,78771],{"id":78770},"ternary-render-statements","Ternary render statements",[925,78773,78774],{},"Instead of sub-render statements, use ternary.",[1655,78776,78461],{"id":78777},"bad-5",[993,78779,78781],{"className":995,"code":78780,"language":997,"meta":998,"style":998},"renderRunning () {\n return \u003Cstrong>{(this.state.isRunning) ? ' is running.' : ''}\u003C\u002Fstrong>;\n},\n\nrender () {\n return \u003Cdiv>{this.props.name}{this.renderRunning()}\u003C\u002Fdiv>;\n}\n\n",[941,78782,78783,78790,78821,78825,78829,78835,78863],{"__ignoreMap":998},[1002,78784,78785,78788],{"class":1004,"line":1005},[1002,78786,78787],{"class":1026},"renderRunning",[1002,78789,9772],{"class":1030},[1002,78791,78792,78794,78796,78798,78801,78803,78806,78808,78811,78813,78815,78817,78819],{"class":1004,"line":1012},[1002,78793,15066],{"class":1015},[1002,78795,20660],{"class":1030},[1002,78797,1107],{"class":15711},[1002,78799,78800],{"class":1030},">{(",[1002,78802,3455],{"class":1019},[1002,78804,78805],{"class":1030},".state.isRunning) ",[1002,78807,24117],{"class":1015},[1002,78809,78810],{"class":1034}," ' is running.'",[1002,78812,29406],{"class":1015},[1002,78814,9123],{"class":1034},[1002,78816,42405],{"class":1030},[1002,78818,1107],{"class":15711},[1002,78820,21772],{"class":1030},[1002,78822,78823],{"class":1004,"line":1047},[1002,78824,3492],{"class":1030},[1002,78826,78827],{"class":1004,"line":1054},[1002,78828,1051],{"emptyLinePlaceholder":1050},[1002,78830,78831,78833],{"class":1004,"line":1060},[1002,78832,19545],{"class":1026},[1002,78834,9772],{"class":1030},[1002,78836,78837,78839,78841,78843,78845,78847,78850,78852,78854,78856,78859,78861],{"class":1004,"line":1272},[1002,78838,15066],{"class":1015},[1002,78840,20660],{"class":1030},[1002,78842,19650],{"class":15711},[1002,78844,24778],{"class":1030},[1002,78846,3455],{"class":1019},[1002,78848,78849],{"class":1030},".props.name}{",[1002,78851,3455],{"class":1019},[1002,78853,948],{"class":1030},[1002,78855,78787],{"class":1026},[1002,78857,78858],{"class":1030},"()}\u003C\u002F",[1002,78860,19650],{"class":15711},[1002,78862,21772],{"class":1030},[1002,78864,78865],{"class":1004,"line":1348},[1002,78866,1170],{"class":1030},[1655,78868,78374],{"id":78869},"good-5",[993,78871,78873],{"className":995,"code":78872,"language":997,"meta":998,"style":998},"render () {\n return (\n \u003Cdiv>\n {this.props.name}\n {(this.state.running)\n ? \u003Cspan>is running\u003C\u002Fspan>\n : null\n }\n \u003C\u002Fdiv>\n );\n}\n",[941,78874,78875,78881,78887,78895,78904,78913,78929,78937,78941,78950,78954],{"__ignoreMap":998},[1002,78876,78877,78879],{"class":1004,"line":1005},[1002,78878,19545],{"class":1026},[1002,78880,9772],{"class":1030},[1002,78882,78883,78885],{"class":1004,"line":1012},[1002,78884,15066],{"class":1015},[1002,78886,15692],{"class":1030},[1002,78888,78889,78891,78893],{"class":1004,"line":1047},[1002,78890,15697],{"class":1030},[1002,78892,19650],{"class":15711},[1002,78894,15703],{"class":1030},[1002,78896,78897,78899,78901],{"class":1004,"line":1054},[1002,78898,19203],{"class":1030},[1002,78900,3455],{"class":1019},[1002,78902,78903],{"class":1030},".props.name}\n",[1002,78905,78906,78908,78910],{"class":1004,"line":1060},[1002,78907,29927],{"class":1030},[1002,78909,3455],{"class":1019},[1002,78911,78912],{"class":1030},".state.running)\n",[1002,78914,78915,78918,78920,78922,78925,78927],{"class":1004,"line":1272},[1002,78916,78917],{"class":1015}," ?",[1002,78919,20660],{"class":1030},[1002,78921,1002],{"class":15711},[1002,78923,78924],{"class":1030},">is running\u003C\u002F",[1002,78926,1002],{"class":15711},[1002,78928,15703],{"class":1030},[1002,78930,78931,78934],{"class":1004,"line":1348},[1002,78932,78933],{"class":1015}," :",[1002,78935,78936],{"class":1019}," null\n",[1002,78938,78939],{"class":1004,"line":1354},[1002,78940,1351],{"class":1030},[1002,78942,78943,78946,78948],{"class":1004,"line":1360},[1002,78944,78945],{"class":1030}," \u003C\u002F",[1002,78947,19650],{"class":15711},[1002,78949,15703],{"class":1030},[1002,78951,78952],{"class":1004,"line":1366},[1002,78953,10503],{"class":1030},[1002,78955,78956],{"class":1004,"line":1946},[1002,78957,1170],{"class":1030},[953,78959,78961],{"id":78960},"view-components","View Components",[925,78963,78964,78965,2034,78967,948],{},"Compose components into views. Don't create one-off components that merge ",[941,78966,70969],{},[941,78968,78969],{},"domain components",[1655,78971,78461],{"id":78972},"bad-6",[993,78974,78976],{"className":995,"code":78975,"language":997,"meta":998,"style":998},"class EngineRow extends React.Component {\n render () {\n return (\n \u003Cdiv className=\"row\">\n \u003CEngine engine={this.state.running} \u002F>\n ```\n );\n }\n}\n",[941,78977,78978,78995,79001,79007,79022,79041,79046,79050,79054],{"__ignoreMap":998},[1002,78979,78980,78982,78985,78987,78989,78991,78993],{"class":1004,"line":1005},[1002,78981,2363],{"class":1015},[1002,78983,78984],{"class":1026}," EngineRow",[1002,78986,3014],{"class":1015},[1002,78988,20112],{"class":1026},[1002,78990,948],{"class":1030},[1002,78992,20117],{"class":1026},[1002,78994,1457],{"class":1030},[1002,78996,78997,78999],{"class":1004,"line":1012},[1002,78998,20201],{"class":1026},[1002,79000,9772],{"class":1030},[1002,79002,79003,79005],{"class":1004,"line":1047},[1002,79004,2687],{"class":1015},[1002,79006,15692],{"class":1030},[1002,79008,79009,79011,79013,79015,79017,79020],{"class":1004,"line":1054},[1002,79010,19579],{"class":1030},[1002,79012,19650],{"class":15711},[1002,79014,26915],{"class":1026},[1002,79016,2393],{"class":1015},[1002,79018,79019],{"class":1034},"\"row\"",[1002,79021,15703],{"class":1030},[1002,79023,79024,79026,79029,79032,79034,79036,79038],{"class":1004,"line":1060},[1002,79025,15708],{"class":1030},[1002,79027,79028],{"class":1019},"Engine",[1002,79030,79031],{"class":1026}," engine",[1002,79033,2393],{"class":1015},[1002,79035,22192],{"class":1030},[1002,79037,3455],{"class":1019},[1002,79039,79040],{"class":1030},".state.running} \u002F>\n",[1002,79042,79043],{"class":1004,"line":1272},[1002,79044,79045],{"class":1030}," ```\n",[1002,79047,79048],{"class":1004,"line":1348},[1002,79049,22541],{"class":1030},[1002,79051,79052],{"class":1004,"line":1354},[1002,79053,1269],{"class":1030},[1002,79055,79056],{"class":1004,"line":1360},[1002,79057,1170],{"class":1030},[1655,79059,78374],{"id":79060},"good-6",[993,79062,79064],{"className":995,"code":79063,"language":997,"meta":998,"style":998},"class EngineRow extends React.Component {\n render () {\n return \u003Cdiv className=\"row\">{this.props.running} ```;\n }\n}\n\nclass EngineStateView extends React.createClass {\n render () {\n return (\n \u003CEngineRow>\n \u003CEngine engine={this.state.running} \u002F>\n \u003C\u002FEngineRow>\n );\n }\n}\n",[941,79065,79066,79082,79088,79109,79113,79117,79121,79126,79132,79138,79147,79162,79170,79174,79178],{"__ignoreMap":998},[1002,79067,79068,79070,79072,79074,79076,79078,79080],{"class":1004,"line":1005},[1002,79069,2363],{"class":1015},[1002,79071,78984],{"class":1026},[1002,79073,3014],{"class":1015},[1002,79075,20112],{"class":1026},[1002,79077,948],{"class":1030},[1002,79079,20117],{"class":1026},[1002,79081,1457],{"class":1030},[1002,79083,79084,79086],{"class":1004,"line":1012},[1002,79085,20201],{"class":1026},[1002,79087,9772],{"class":1030},[1002,79089,79090,79092,79094,79096,79098,79100,79102,79104,79106],{"class":1004,"line":1047},[1002,79091,2687],{"class":1015},[1002,79093,20660],{"class":1030},[1002,79095,19650],{"class":15711},[1002,79097,26915],{"class":1026},[1002,79099,2393],{"class":1015},[1002,79101,79019],{"class":1034},[1002,79103,24778],{"class":1030},[1002,79105,3455],{"class":1019},[1002,79107,79108],{"class":1030},".props.running} ```;\n",[1002,79110,79111],{"class":1004,"line":1054},[1002,79112,1269],{"class":1030},[1002,79114,79115],{"class":1004,"line":1060},[1002,79116,1170],{"class":1030},[1002,79118,79119],{"class":1004,"line":1272},[1002,79120,1051],{"emptyLinePlaceholder":1050},[1002,79122,79123],{"class":1004,"line":1348},[1002,79124,79125],{"class":1030},"class EngineStateView extends React.createClass {\n",[1002,79127,79128,79130],{"class":1004,"line":1354},[1002,79129,20201],{"class":1026},[1002,79131,9772],{"class":1030},[1002,79133,79134,79136],{"class":1004,"line":1360},[1002,79135,2687],{"class":1026},[1002,79137,15692],{"class":1030},[1002,79139,79140,79142,79145],{"class":1004,"line":1366},[1002,79141,19579],{"class":1030},[1002,79143,79144],{"class":2378},"EngineRow",[1002,79146,15703],{"class":1030},[1002,79148,79149,79151,79153,79155,79157,79160],{"class":1004,"line":1946},[1002,79150,15708],{"class":1030},[1002,79152,79028],{"class":2378},[1002,79154,79031],{"class":2378},[1002,79156,2393],{"class":1015},[1002,79158,79159],{"class":1030},"{this.state.running} ",[1002,79161,19039],{"class":1015},[1002,79163,79164,79166,79168],{"class":1004,"line":1956},[1002,79165,21184],{"class":1030},[1002,79167,79144],{"class":2378},[1002,79169,15703],{"class":1030},[1002,79171,79172],{"class":1004,"line":1961},[1002,79173,22541],{"class":1030},[1002,79175,79176],{"class":1004,"line":1971},[1002,79177,1269],{"class":1030},[1002,79179,79180],{"class":1004,"line":1980},[1002,79181,1170],{"class":1030},[953,79183,79185],{"id":79184},"container-components","Container Components",[925,79187,79188],{},"A container does data fetching and then renders its corresponding sub-component.",[1655,79190,78461],{"id":79191},"bad-7",[993,79193,79195],{"className":995,"code":79194,"language":997,"meta":998,"style":998},"\u002F\u002F CommentList.js\n\nclass CommentList extends React.Component {\n getInitialState () {\n return { comments: [] };\n }\n\n componentDidMount () {\n $.ajax({\n url: \"\u002Fmy-comments.json\",\n dataType: 'json',\n success: function(comments) {\n this.setState({comments: comments});\n }.bind(this)\n });\n }\n\n render () {\n return (\n\n {this.state.comments.map(({body, author}) => {\n return * {body}—{author};\n })}\n\n );\n }\n}\n",[941,79196,79197,79202,79206,79223,79230,79237,79241,79245,79251,79261,79271,79281,79297,79308,79320,79324,79328,79332,79338,79344,79348,79380,79385,79390,79394,79398,79402],{"__ignoreMap":998},[1002,79198,79199],{"class":1004,"line":1005},[1002,79200,79201],{"class":1008},"\u002F\u002F CommentList.js\n",[1002,79203,79204],{"class":1004,"line":1012},[1002,79205,1051],{"emptyLinePlaceholder":1050},[1002,79207,79208,79210,79213,79215,79217,79219,79221],{"class":1004,"line":1047},[1002,79209,2363],{"class":1015},[1002,79211,79212],{"class":1026}," CommentList",[1002,79214,3014],{"class":1015},[1002,79216,20112],{"class":1026},[1002,79218,948],{"class":1030},[1002,79220,20117],{"class":1026},[1002,79222,1457],{"class":1030},[1002,79224,79225,79228],{"class":1004,"line":1054},[1002,79226,79227],{"class":1026}," getInitialState",[1002,79229,9772],{"class":1030},[1002,79231,79232,79234],{"class":1004,"line":1060},[1002,79233,2687],{"class":1015},[1002,79235,79236],{"class":1030}," { comments: [] };\n",[1002,79238,79239],{"class":1004,"line":1272},[1002,79240,1269],{"class":1030},[1002,79242,79243],{"class":1004,"line":1348},[1002,79244,1051],{"emptyLinePlaceholder":1050},[1002,79246,79247,79249],{"class":1004,"line":1354},[1002,79248,20139],{"class":1026},[1002,79250,9772],{"class":1030},[1002,79252,79253,79256,79259],{"class":1004,"line":1360},[1002,79254,79255],{"class":1030}," $.",[1002,79257,79258],{"class":1026},"ajax",[1002,79260,2756],{"class":1030},[1002,79262,79263,79266,79269],{"class":1004,"line":1366},[1002,79264,79265],{"class":1030}," url: ",[1002,79267,79268],{"class":1034},"\"\u002Fmy-comments.json\"",[1002,79270,1143],{"class":1030},[1002,79272,79273,79276,79279],{"class":1004,"line":1946},[1002,79274,79275],{"class":1030}," dataType: ",[1002,79277,79278],{"class":1034},"'json'",[1002,79280,1143],{"class":1030},[1002,79282,79283,79286,79288,79290,79292,79295],{"class":1004,"line":1956},[1002,79284,79285],{"class":1026}," success",[1002,79287,1137],{"class":1030},[1002,79289,6965],{"class":1015},[1002,79291,1031],{"class":1030},[1002,79293,79294],{"class":2378},"comments",[1002,79296,2382],{"class":1030},[1002,79298,79299,79301,79303,79305],{"class":1004,"line":1961},[1002,79300,2622],{"class":1019},[1002,79302,948],{"class":1030},[1002,79304,26816],{"class":1026},[1002,79306,79307],{"class":1030},"({comments: comments});\n",[1002,79309,79310,79312,79314,79316,79318],{"class":1004,"line":1971},[1002,79311,73656],{"class":1030},[1002,79313,73659],{"class":1026},[1002,79315,1031],{"class":1030},[1002,79317,3455],{"class":1019},[1002,79319,3808],{"class":1030},[1002,79321,79322],{"class":1004,"line":1980},[1002,79323,8353],{"class":1030},[1002,79325,79326],{"class":1004,"line":1985},[1002,79327,1269],{"class":1030},[1002,79329,79330],{"class":1004,"line":1995},[1002,79331,1051],{"emptyLinePlaceholder":1050},[1002,79333,79334,79336],{"class":1004,"line":2006},[1002,79335,20201],{"class":1026},[1002,79337,9772],{"class":1030},[1002,79339,79340,79342],{"class":1004,"line":2011},[1002,79341,2687],{"class":1015},[1002,79343,15692],{"class":1030},[1002,79345,79346],{"class":1004,"line":2017},[1002,79347,1051],{"emptyLinePlaceholder":1050},[1002,79349,79350,79352,79354,79356,79358,79360,79362,79364,79366,79368,79370,79372,79374,79376,79378],{"class":1004,"line":2022},[1002,79351,78161],{"class":1030},[1002,79353,3455],{"class":2378},[1002,79355,948],{"class":1030},[1002,79357,8589],{"class":2378},[1002,79359,948],{"class":1030},[1002,79361,79294],{"class":2378},[1002,79363,948],{"class":1030},[1002,79365,19444],{"class":2378},[1002,79367,27625],{"class":1030},[1002,79369,15034],{"class":2378},[1002,79371,1251],{"class":1030},[1002,79373,29957],{"class":2378},[1002,79375,27633],{"class":1030},[1002,79377,15497],{"class":1015},[1002,79379,1457],{"class":1030},[1002,79381,79382],{"class":1004,"line":2442},[1002,79383,79384],{"class":1030}," return * {body}—{author};\n",[1002,79386,79387],{"class":1004,"line":2466},[1002,79388,79389],{"class":1030}," })}\n",[1002,79391,79392],{"class":1004,"line":2471},[1002,79393,1051],{"emptyLinePlaceholder":1050},[1002,79395,79396],{"class":1004,"line":2476},[1002,79397,22541],{"class":1030},[1002,79399,79400],{"class":1004,"line":2481},[1002,79401,1269],{"class":1030},[1002,79403,79404],{"class":1004,"line":2491},[1002,79405,1170],{"class":1030},[1655,79407,78374],{"id":79408},"good-7",[993,79410,79412],{"className":995,"code":79411,"language":997,"meta":998,"style":998},"\u002F\u002F CommentList.js\n\nclass CommentList extends React.Component {\n render() {\n return (\n\n {this.props.comments.map(({body, author}) => {\n return * {body}—{author};\n })}\n\n );\n }\n}\n\u002F\u002F CommentListContainer.js\n\nclass CommentListContainer extends React.Component {\n getInitialState () {\n return { comments: [] }\n }\n\n componentDidMount () {\n $.ajax({\n url: \"\u002Fmy-comments.json\",\n dataType: 'json',\n success: function(comments) {\n this.setState({comments: comments});\n }.bind(this)\n });\n }\n\n render () {\n return \u003CCommentList comments={this.state.comments} \u002F>;\n }\n}\n",[941,79413,79414,79418,79422,79438,79444,79450,79454,79486,79490,79494,79498,79502,79506,79510,79515,79519,79536,79542,79549,79553,79557,79563,79571,79579,79587,79601,79611,79623,79627,79631,79635,79641,79662,79666],{"__ignoreMap":998},[1002,79415,79416],{"class":1004,"line":1005},[1002,79417,79201],{"class":1008},[1002,79419,79420],{"class":1004,"line":1012},[1002,79421,1051],{"emptyLinePlaceholder":1050},[1002,79423,79424,79426,79428,79430,79432,79434,79436],{"class":1004,"line":1047},[1002,79425,2363],{"class":1015},[1002,79427,79212],{"class":1026},[1002,79429,3014],{"class":1015},[1002,79431,20112],{"class":1026},[1002,79433,948],{"class":1030},[1002,79435,20117],{"class":1026},[1002,79437,1457],{"class":1030},[1002,79439,79440,79442],{"class":1004,"line":1054},[1002,79441,20201],{"class":1026},[1002,79443,3025],{"class":1030},[1002,79445,79446,79448],{"class":1004,"line":1060},[1002,79447,2687],{"class":1015},[1002,79449,15692],{"class":1030},[1002,79451,79452],{"class":1004,"line":1272},[1002,79453,1051],{"emptyLinePlaceholder":1050},[1002,79455,79456,79458,79460,79462,79464,79466,79468,79470,79472,79474,79476,79478,79480,79482,79484],{"class":1004,"line":1348},[1002,79457,78161],{"class":1030},[1002,79459,3455],{"class":2378},[1002,79461,948],{"class":1030},[1002,79463,19533],{"class":2378},[1002,79465,948],{"class":1030},[1002,79467,79294],{"class":2378},[1002,79469,948],{"class":1030},[1002,79471,19444],{"class":2378},[1002,79473,27625],{"class":1030},[1002,79475,15034],{"class":2378},[1002,79477,1251],{"class":1030},[1002,79479,29957],{"class":2378},[1002,79481,27633],{"class":1030},[1002,79483,15497],{"class":1015},[1002,79485,1457],{"class":1030},[1002,79487,79488],{"class":1004,"line":1354},[1002,79489,79384],{"class":1030},[1002,79491,79492],{"class":1004,"line":1360},[1002,79493,79389],{"class":1030},[1002,79495,79496],{"class":1004,"line":1366},[1002,79497,1051],{"emptyLinePlaceholder":1050},[1002,79499,79500],{"class":1004,"line":1946},[1002,79501,22541],{"class":1030},[1002,79503,79504],{"class":1004,"line":1956},[1002,79505,1269],{"class":1030},[1002,79507,79508],{"class":1004,"line":1961},[1002,79509,1170],{"class":1030},[1002,79511,79512],{"class":1004,"line":1971},[1002,79513,79514],{"class":1008},"\u002F\u002F CommentListContainer.js\n",[1002,79516,79517],{"class":1004,"line":1980},[1002,79518,1051],{"emptyLinePlaceholder":1050},[1002,79520,79521,79523,79526,79528,79530,79532,79534],{"class":1004,"line":1985},[1002,79522,2363],{"class":1015},[1002,79524,79525],{"class":1026}," CommentListContainer",[1002,79527,3014],{"class":1015},[1002,79529,20112],{"class":1026},[1002,79531,948],{"class":1030},[1002,79533,20117],{"class":1026},[1002,79535,1457],{"class":1030},[1002,79537,79538,79540],{"class":1004,"line":1995},[1002,79539,79227],{"class":1026},[1002,79541,9772],{"class":1030},[1002,79543,79544,79546],{"class":1004,"line":2006},[1002,79545,2687],{"class":1015},[1002,79547,79548],{"class":1030}," { comments: [] }\n",[1002,79550,79551],{"class":1004,"line":2011},[1002,79552,1269],{"class":1030},[1002,79554,79555],{"class":1004,"line":2017},[1002,79556,1051],{"emptyLinePlaceholder":1050},[1002,79558,79559,79561],{"class":1004,"line":2022},[1002,79560,20139],{"class":1026},[1002,79562,9772],{"class":1030},[1002,79564,79565,79567,79569],{"class":1004,"line":2442},[1002,79566,79255],{"class":1030},[1002,79568,79258],{"class":1026},[1002,79570,2756],{"class":1030},[1002,79572,79573,79575,79577],{"class":1004,"line":2466},[1002,79574,79265],{"class":1030},[1002,79576,79268],{"class":1034},[1002,79578,1143],{"class":1030},[1002,79580,79581,79583,79585],{"class":1004,"line":2471},[1002,79582,79275],{"class":1030},[1002,79584,79278],{"class":1034},[1002,79586,1143],{"class":1030},[1002,79588,79589,79591,79593,79595,79597,79599],{"class":1004,"line":2476},[1002,79590,79285],{"class":1026},[1002,79592,1137],{"class":1030},[1002,79594,6965],{"class":1015},[1002,79596,1031],{"class":1030},[1002,79598,79294],{"class":2378},[1002,79600,2382],{"class":1030},[1002,79602,79603,79605,79607,79609],{"class":1004,"line":2481},[1002,79604,2622],{"class":1019},[1002,79606,948],{"class":1030},[1002,79608,26816],{"class":1026},[1002,79610,79307],{"class":1030},[1002,79612,79613,79615,79617,79619,79621],{"class":1004,"line":2491},[1002,79614,73656],{"class":1030},[1002,79616,73659],{"class":1026},[1002,79618,1031],{"class":1030},[1002,79620,3455],{"class":1019},[1002,79622,3808],{"class":1030},[1002,79624,79625],{"class":1004,"line":2502},[1002,79626,8353],{"class":1030},[1002,79628,79629],{"class":1004,"line":2513},[1002,79630,1269],{"class":1030},[1002,79632,79633],{"class":1004,"line":2535},[1002,79634,1051],{"emptyLinePlaceholder":1050},[1002,79636,79637,79639],{"class":1004,"line":2557},[1002,79638,20201],{"class":1026},[1002,79640,9772],{"class":1030},[1002,79642,79643,79645,79647,79650,79653,79655,79657,79659],{"class":1004,"line":2562},[1002,79644,2687],{"class":1015},[1002,79646,20660],{"class":1030},[1002,79648,79649],{"class":1019},"CommentList",[1002,79651,79652],{"class":1026}," comments",[1002,79654,2393],{"class":1015},[1002,79656,22192],{"class":1030},[1002,79658,3455],{"class":1019},[1002,79660,79661],{"class":1030},".state.comments} \u002F>;\n",[1002,79663,79664],{"class":1004,"line":2567},[1002,79665,1269],{"class":1030},[1002,79667,79668],{"class":1004,"line":2572},[1002,79669,1170],{"class":1030},[1655,79671,79673],{"id":79672},"cached-state-in-render","Cached State in render###",[925,79675,79676,79677],{},"Do not keep state in ",[1107,79678,19545],{},[1655,79680,78461],{"id":79681},"bad-8",[993,79683,79685],{"className":995,"code":79684,"language":997,"meta":998,"style":998},"render () {\n let make = `Make: ${this.props.make}`;\n\n return \u003Cdiv>{name}\u003C\u002Fdiv>;\n}\n",[941,79686,79687,79693,79719,79723,79738],{"__ignoreMap":998},[1002,79688,79689,79691],{"class":1004,"line":1005},[1002,79690,19545],{"class":1026},[1002,79692,9772],{"class":1030},[1002,79694,79695,79697,79700,79702,79705,79707,79709,79711,79713,79715,79717],{"class":1004,"line":1012},[1002,79696,26884],{"class":1015},[1002,79698,79699],{"class":1030}," make ",[1002,79701,2393],{"class":1015},[1002,79703,79704],{"class":1034}," `Make: ${",[1002,79706,3455],{"class":1019},[1002,79708,948],{"class":1034},[1002,79710,19533],{"class":1030},[1002,79712,948],{"class":1034},[1002,79714,13435],{"class":1030},[1002,79716,3507],{"class":1034},[1002,79718,1407],{"class":1030},[1002,79720,79721],{"class":1004,"line":1047},[1002,79722,1051],{"emptyLinePlaceholder":1050},[1002,79724,79725,79727,79729,79731,79734,79736],{"class":1004,"line":1054},[1002,79726,15066],{"class":1015},[1002,79728,20660],{"class":1030},[1002,79730,19650],{"class":15711},[1002,79732,79733],{"class":1030},">{name}\u003C\u002F",[1002,79735,19650],{"class":15711},[1002,79737,21772],{"class":1030},[1002,79739,79740],{"class":1004,"line":1060},[1002,79741,1170],{"class":1030},[1655,79743,78374],{"id":79744},"good-8",[993,79746,79748],{"className":995,"code":79747,"language":997,"meta":998,"style":998},"render () {\n return \u003Cdiv>{`Make: ${this.props.make}`}\u003C\u002Fdiv>;\n}\n",[941,79749,79750,79756,79787],{"__ignoreMap":998},[1002,79751,79752,79754],{"class":1004,"line":1005},[1002,79753,19545],{"class":1026},[1002,79755,9772],{"class":1030},[1002,79757,79758,79760,79762,79764,79766,79769,79771,79773,79775,79777,79779,79781,79783,79785],{"class":1004,"line":1012},[1002,79759,15066],{"class":1015},[1002,79761,20660],{"class":1030},[1002,79763,19650],{"class":15711},[1002,79765,24778],{"class":1030},[1002,79767,79768],{"class":1034},"`Make: ${",[1002,79770,3455],{"class":1019},[1002,79772,948],{"class":1034},[1002,79774,19533],{"class":1030},[1002,79776,948],{"class":1034},[1002,79778,13435],{"class":1030},[1002,79780,3507],{"class":1034},[1002,79782,42405],{"class":1030},[1002,79784,19650],{"class":15711},[1002,79786,21772],{"class":1030},[1002,79788,79789],{"class":1004,"line":1047},[1002,79790,1170],{"class":1030},[1655,79792,78374],{"id":79793},"good-9",[993,79795,79797],{"className":995,"code":79796,"language":997,"meta":998,"style":998},"get make () {\n return `Make: ${this.props.make}`;\n}\n\nrender () {\n return \u003Cdiv>{this.make}\u003C\u002Fdiv>;\n}\n",[941,79798,79799,79807,79827,79831,79835,79841,79860],{"__ignoreMap":998},[1002,79800,79801,79803,79805],{"class":1004,"line":1005},[1002,79802,78261],{"class":1030},[1002,79804,13435],{"class":1026},[1002,79806,9772],{"class":1030},[1002,79808,79809,79811,79813,79815,79817,79819,79821,79823,79825],{"class":1004,"line":1012},[1002,79810,15066],{"class":1015},[1002,79812,79704],{"class":1034},[1002,79814,3455],{"class":1019},[1002,79816,948],{"class":1034},[1002,79818,19533],{"class":1030},[1002,79820,948],{"class":1034},[1002,79822,13435],{"class":1030},[1002,79824,3507],{"class":1034},[1002,79826,1407],{"class":1030},[1002,79828,79829],{"class":1004,"line":1047},[1002,79830,1170],{"class":1030},[1002,79832,79833],{"class":1004,"line":1054},[1002,79834,1051],{"emptyLinePlaceholder":1050},[1002,79836,79837,79839],{"class":1004,"line":1060},[1002,79838,19545],{"class":1026},[1002,79840,9772],{"class":1030},[1002,79842,79843,79845,79847,79849,79851,79853,79856,79858],{"class":1004,"line":1272},[1002,79844,15066],{"class":1015},[1002,79846,20660],{"class":1030},[1002,79848,19650],{"class":15711},[1002,79850,24778],{"class":1030},[1002,79852,3455],{"class":1019},[1002,79854,79855],{"class":1030},".make}\u003C\u002F",[1002,79857,19650],{"class":15711},[1002,79859,21772],{"class":1030},[1002,79861,79862],{"class":1004,"line":1348},[1002,79863,1170],{"class":1030},[1655,79865,79867],{"id":79866},"compound-conditions","Compound Conditions",[925,79869,79870,79871],{},"Don't put compound conditions in ",[941,79872,19545],{},[1655,79874,78461],{"id":79875},"bad-9",[993,79877,79879],{"className":995,"code":79878,"language":997,"meta":998,"style":998},"render () {\n return \u003Cdiv>{if (this.state.started && this.state.running) { return 'Running..' }\u003C\u002Fdiv>;\n}\n",[941,79880,79881,79887,79926],{"__ignoreMap":998},[1002,79882,79883,79885],{"class":1004,"line":1005},[1002,79884,19545],{"class":1026},[1002,79886,9772],{"class":1030},[1002,79888,79889,79891,79893,79895,79897,79899,79901,79903,79906,79908,79910,79913,79916,79918,79920,79922,79924],{"class":1004,"line":1012},[1002,79890,15066],{"class":1015},[1002,79892,20660],{"class":1030},[1002,79894,19650],{"class":15711},[1002,79896,24778],{"class":1030},[1002,79898,46126],{"class":1026},[1002,79900,6513],{"class":1030},[1002,79902,3455],{"class":1019},[1002,79904,79905],{"class":1030},".state.started ",[1002,79907,13133],{"class":1015},[1002,79909,2693],{"class":1019},[1002,79911,79912],{"class":1030},".state.running) { return ",[1002,79914,79915],{"class":1034},"'Running..'",[1002,79917,19233],{"class":1030},[1002,79919,22437],{"class":1015},[1002,79921,19650],{"class":1030},[1002,79923,19171],{"class":1015},[1002,79925,1407],{"class":1030},[1002,79927,79928],{"class":1004,"line":1047},[1002,79929,1170],{"class":1030},[1655,79931,78374],{"id":79932},"good-10",[993,79934,79936],{"className":995,"code":79935,"language":997,"meta":998,"style":998},"get isEngineOn() {\n return this.state.started && this.state.running;\n},\n\nrender() {\n return \u003Cdiv>{this.isEngineOn && 'Running..'}\u003C\u002Fdiv>;\n}\n",[941,79937,79938,79947,79962,79966,79970,79976,80002],{"__ignoreMap":998},[1002,79939,79940,79942,79945],{"class":1004,"line":1005},[1002,79941,78261],{"class":1030},[1002,79943,79944],{"class":1026},"isEngineOn",[1002,79946,3025],{"class":1030},[1002,79948,79949,79951,79953,79955,79957,79959],{"class":1004,"line":1012},[1002,79950,15066],{"class":1015},[1002,79952,2693],{"class":1019},[1002,79954,79905],{"class":1030},[1002,79956,13133],{"class":1015},[1002,79958,2693],{"class":1019},[1002,79960,79961],{"class":1030},".state.running;\n",[1002,79963,79964],{"class":1004,"line":1047},[1002,79965,3492],{"class":1030},[1002,79967,79968],{"class":1004,"line":1054},[1002,79969,1051],{"emptyLinePlaceholder":1050},[1002,79971,79972,79974],{"class":1004,"line":1060},[1002,79973,19545],{"class":1026},[1002,79975,3025],{"class":1030},[1002,79977,79978,79980,79982,79984,79986,79988,79991,79993,79996,79998,80000],{"class":1004,"line":1272},[1002,79979,15066],{"class":1015},[1002,79981,20660],{"class":1030},[1002,79983,19650],{"class":15711},[1002,79985,24778],{"class":1030},[1002,79987,3455],{"class":1019},[1002,79989,79990],{"class":1030},".isEngineOn ",[1002,79992,13133],{"class":1015},[1002,79994,79995],{"class":1034}," 'Running..'",[1002,79997,42405],{"class":1030},[1002,79999,19650],{"class":15711},[1002,80001,21772],{"class":1030},[1002,80003,80004],{"class":1004,"line":1348},[1002,80005,1170],{"class":1030},[925,80007,80008,80009,80012],{},"The best solution for this would use a ",[941,80010,80011],{},"container component"," to manage state and pass new state down as props.",[953,80014,80016,80017],{"id":80015},"existence-of-prop","Existence of ",[941,80018,80019],{},"prop",[925,80021,80022,80023,80025,80026,948],{},"Do not check existence of ",[1107,80024,80019],{}," objects. Use ",[1107,80027,77916],{},[1655,80029,78461],{"id":80030},"bad-10",[993,80032,80034],{"className":995,"code":80033,"language":997,"meta":998,"style":998},"render () {\n if (this.props.person) {\n return \u003Cdiv>{this.props.car.make}\u003C\u002Fdiv>;\n } else {\n return null;\n }\n}\n",[941,80035,80036,80042,80053,80072,80080,80088,80092],{"__ignoreMap":998},[1002,80037,80038,80040],{"class":1004,"line":1005},[1002,80039,19545],{"class":1026},[1002,80041,9772],{"class":1030},[1002,80043,80044,80046,80048,80050],{"class":1004,"line":1012},[1002,80045,19971],{"class":1015},[1002,80047,6513],{"class":1030},[1002,80049,3455],{"class":1019},[1002,80051,80052],{"class":1030},".props.person) {\n",[1002,80054,80055,80057,80059,80061,80063,80065,80068,80070],{"class":1004,"line":1047},[1002,80056,2687],{"class":1015},[1002,80058,20660],{"class":1030},[1002,80060,19650],{"class":15711},[1002,80062,24778],{"class":1030},[1002,80064,3455],{"class":1019},[1002,80066,80067],{"class":1030},".props.car.make}\u003C\u002F",[1002,80069,19650],{"class":15711},[1002,80071,21772],{"class":1030},[1002,80073,80074,80076,80078],{"class":1004,"line":1054},[1002,80075,30770],{"class":1030},[1002,80077,6060],{"class":1015},[1002,80079,1457],{"class":1030},[1002,80081,80082,80084,80086],{"class":1004,"line":1060},[1002,80083,2687],{"class":1015},[1002,80085,7080],{"class":1019},[1002,80087,1407],{"class":1030},[1002,80089,80090],{"class":1004,"line":1272},[1002,80091,1269],{"class":1030},[1002,80093,80094],{"class":1004,"line":1348},[1002,80095,1170],{"class":1030},[1655,80097,78374],{"id":80098},"good-11",[993,80100,80102],{"className":995,"code":80101,"language":997,"meta":998,"style":998},"class MyComponent extends React.Component {\n render() {\n return \u003Cdiv>{this.props.car.make}\u003C\u002Fdiv>;\n }\n}\n\nMyComponent.defaultProps = {\n car: {\n make: 'Toyota',\n },\n};\n",[941,80103,80104,80120,80126,80144,80148,80152,80156,80165,80170,80179,80183],{"__ignoreMap":998},[1002,80105,80106,80108,80110,80112,80114,80116,80118],{"class":1004,"line":1005},[1002,80107,2363],{"class":1015},[1002,80109,20107],{"class":1026},[1002,80111,3014],{"class":1015},[1002,80113,20112],{"class":1026},[1002,80115,948],{"class":1030},[1002,80117,20117],{"class":1026},[1002,80119,1457],{"class":1030},[1002,80121,80122,80124],{"class":1004,"line":1012},[1002,80123,20201],{"class":1026},[1002,80125,3025],{"class":1030},[1002,80127,80128,80130,80132,80134,80136,80138,80140,80142],{"class":1004,"line":1047},[1002,80129,2687],{"class":1015},[1002,80131,20660],{"class":1030},[1002,80133,19650],{"class":15711},[1002,80135,24778],{"class":1030},[1002,80137,3455],{"class":1019},[1002,80139,80067],{"class":1030},[1002,80141,19650],{"class":15711},[1002,80143,21772],{"class":1030},[1002,80145,80146],{"class":1004,"line":1054},[1002,80147,1269],{"class":1030},[1002,80149,80150],{"class":1004,"line":1060},[1002,80151,1170],{"class":1030},[1002,80153,80154],{"class":1004,"line":1272},[1002,80155,1051],{"emptyLinePlaceholder":1050},[1002,80157,80158,80161,80163],{"class":1004,"line":1348},[1002,80159,80160],{"class":1030},"MyComponent.defaultProps ",[1002,80162,2393],{"class":1015},[1002,80164,1457],{"class":1030},[1002,80166,80167],{"class":1004,"line":1354},[1002,80168,80169],{"class":1030}," car: {\n",[1002,80171,80172,80175,80177],{"class":1004,"line":1360},[1002,80173,80174],{"class":1030}," make: ",[1002,80176,63947],{"class":1034},[1002,80178,1143],{"class":1030},[1002,80180,80181],{"class":1004,"line":1366},[1002,80182,1502],{"class":1030},[1002,80184,80185],{"class":1004,"line":1946},[1002,80186,1517],{"class":1030},[925,80188,80189,80190,80193],{},"This is only where objects or arrays are used. Use ",[1107,80191,80192],{},"PropTypes.shape"," to clarify the types of nested data expected by the component.",[953,80195,80197],{"id":80196},"setting-state-from-props","Setting State from Props",[925,80199,80200],{},"Do not set state from props without obvious intent.",[1655,80202,78461],{"id":80203},"bad-11",[993,80205,80207],{"className":995,"code":80206,"language":997,"meta":998,"style":998},"getInitialState () {\n return {\n items: this.props.items\n };\n}\n",[941,80208,80209,80216,80222,80232,80236],{"__ignoreMap":998},[1002,80210,80211,80214],{"class":1004,"line":1005},[1002,80212,80213],{"class":1026},"getInitialState",[1002,80215,9772],{"class":1030},[1002,80217,80218,80220],{"class":1004,"line":1012},[1002,80219,15066],{"class":1015},[1002,80221,1457],{"class":1030},[1002,80223,80224,80227,80229],{"class":1004,"line":1047},[1002,80225,80226],{"class":1030}," items: ",[1002,80228,3455],{"class":1019},[1002,80230,80231],{"class":1030},".props.items\n",[1002,80233,80234],{"class":1004,"line":1054},[1002,80235,15113],{"class":1030},[1002,80237,80238],{"class":1004,"line":1060},[1002,80239,1170],{"class":1030},[1655,80241,78374],{"id":80242},"good-12",[993,80244,80246],{"className":995,"code":80245,"language":997,"meta":998,"style":998},"getInitialState () {\n return {\n items: this.props.initialItems\n };\n}\n",[941,80247,80248,80254,80260,80269,80273],{"__ignoreMap":998},[1002,80249,80250,80252],{"class":1004,"line":1005},[1002,80251,80213],{"class":1026},[1002,80253,9772],{"class":1030},[1002,80255,80256,80258],{"class":1004,"line":1012},[1002,80257,15066],{"class":1015},[1002,80259,1457],{"class":1030},[1002,80261,80262,80264,80266],{"class":1004,"line":1047},[1002,80263,80226],{"class":1030},[1002,80265,3455],{"class":1019},[1002,80267,80268],{"class":1030},".props.initialItems\n",[1002,80270,80271],{"class":1004,"line":1054},[1002,80272,15113],{"class":1030},[1002,80274,80275],{"class":1004,"line":1060},[1002,80276,1170],{"class":1030},[7100,80278,80280],{"title":80279,"type":23379},"Props in getInitialStet is an Anti-Pattern",[925,80281,80282,80283,80286],{},"According to React documentation, using props, passed down from parent, to generate state in getInitialState often leads to duplication of ",[1107,80284,80285],{},"source of truth",", i.e where the real data is.",[1655,80288,80290],{"id":80289},"naming-handler-methods","Naming Handler Methods",[925,80292,80293],{},"Name the handler methods after their triggering event.",[1655,80295,78461],{"id":80296},"bad-12",[993,80298,80300],{"className":995,"code":80299,"language":997,"meta":998,"style":998},"click () { \u002F*...*\u002F },\n\nrender () {\n return \u003Cdiv onClick={this.click} \u002F>;\n}\n",[941,80301,80302,80314,80318,80324,80343],{"__ignoreMap":998},[1002,80303,80304,80306,80309,80312],{"class":1004,"line":1005},[1002,80305,11181],{"class":1026},[1002,80307,80308],{"class":1030}," () { ",[1002,80310,80311],{"class":1008},"\u002F*...*\u002F",[1002,80313,33835],{"class":1030},[1002,80315,80316],{"class":1004,"line":1012},[1002,80317,1051],{"emptyLinePlaceholder":1050},[1002,80319,80320,80322],{"class":1004,"line":1047},[1002,80321,19545],{"class":1026},[1002,80323,9772],{"class":1030},[1002,80325,80326,80328,80330,80332,80334,80336,80338,80340],{"class":1004,"line":1054},[1002,80327,15066],{"class":1015},[1002,80329,20660],{"class":1030},[1002,80331,19650],{"class":15711},[1002,80333,16691],{"class":1026},[1002,80335,2393],{"class":1015},[1002,80337,22192],{"class":1030},[1002,80339,3455],{"class":1019},[1002,80341,80342],{"class":1030},".click} \u002F>;\n",[1002,80344,80345],{"class":1004,"line":1060},[1002,80346,1170],{"class":1030},[1655,80348,78374],{"id":80349},"good-13",[993,80351,80353],{"className":995,"code":80352,"language":997,"meta":998,"style":998},"handleClick () { \u002F*...*\u002F },\n\nrender () {\n return \u003Cdiv onClick={this.handleClick} \u002F>;\n}\n",[941,80354,80355,80365,80369,80375,80394],{"__ignoreMap":998},[1002,80356,80357,80359,80361,80363],{"class":1004,"line":1005},[1002,80358,8183],{"class":1026},[1002,80360,80308],{"class":1030},[1002,80362,80311],{"class":1008},[1002,80364,33835],{"class":1030},[1002,80366,80367],{"class":1004,"line":1012},[1002,80368,1051],{"emptyLinePlaceholder":1050},[1002,80370,80371,80373],{"class":1004,"line":1047},[1002,80372,19545],{"class":1026},[1002,80374,9772],{"class":1030},[1002,80376,80377,80379,80381,80383,80385,80387,80389,80391],{"class":1004,"line":1054},[1002,80378,15066],{"class":1015},[1002,80380,20660],{"class":1030},[1002,80382,19650],{"class":15711},[1002,80384,16691],{"class":1026},[1002,80386,2393],{"class":1015},[1002,80388,22192],{"class":1030},[1002,80390,3455],{"class":1019},[1002,80392,80393],{"class":1030},".handleClick} \u002F>;\n",[1002,80395,80396],{"class":1004,"line":1060},[1002,80397,1170],{"class":1030},[925,80399,80400],{},"Handler names should:",[1530,80402,80403,80406,80412],{},[974,80404,80405],{},"Be present-tense",[974,80407,80408,80409],{},"Begin with ",[1107,80410,80411],{},"handle",[974,80413,80414,80415,80417],{},"Follow with the name of the event. (eg:- ",[1107,80416,8183],{},")",[1655,80419,80421],{"id":80420},"naming-events","Naming Events",[925,80423,80424,80425,63832],{},"Use custom event names for ",[1107,80426,80427],{},"ownee",[993,80429,80431],{"className":995,"code":80430,"language":997,"meta":998,"style":998},"class Owner extends React.Component {\n handleUpdate() {\n \u002F\u002F handle Ownee's onUpdate event\n }\n\n render() {\n return \u003COwnee onDelete={this.handleUpdate} \u002F>;\n }\n}\n\nclass Ownee extends React.Component {\n render() {\n return \u003Cdiv onChange={this.props.onUpdate} \u002F>;\n }\n}\n\nOwnee.propTypes = {\n onUpdate: React.PropTypes.func.isRequired,\n};\n",[941,80432,80433,80450,80457,80462,80466,80470,80476,80497,80501,80505,80509,80526,80532,80552,80556,80560,80564,80573,80578],{"__ignoreMap":998},[1002,80434,80435,80437,80440,80442,80444,80446,80448],{"class":1004,"line":1005},[1002,80436,2363],{"class":1015},[1002,80438,80439],{"class":1026}," Owner",[1002,80441,3014],{"class":1015},[1002,80443,20112],{"class":1026},[1002,80445,948],{"class":1030},[1002,80447,20117],{"class":1026},[1002,80449,1457],{"class":1030},[1002,80451,80452,80455],{"class":1004,"line":1012},[1002,80453,80454],{"class":1026}," handleUpdate",[1002,80456,3025],{"class":1030},[1002,80458,80459],{"class":1004,"line":1047},[1002,80460,80461],{"class":1008}," \u002F\u002F handle Ownee's onUpdate event\n",[1002,80463,80464],{"class":1004,"line":1054},[1002,80465,1269],{"class":1030},[1002,80467,80468],{"class":1004,"line":1060},[1002,80469,1051],{"emptyLinePlaceholder":1050},[1002,80471,80472,80474],{"class":1004,"line":1272},[1002,80473,20201],{"class":1026},[1002,80475,3025],{"class":1030},[1002,80477,80478,80480,80482,80485,80488,80490,80492,80494],{"class":1004,"line":1348},[1002,80479,2687],{"class":1015},[1002,80481,20660],{"class":1030},[1002,80483,80484],{"class":1019},"Ownee",[1002,80486,80487],{"class":1026}," onDelete",[1002,80489,2393],{"class":1015},[1002,80491,22192],{"class":1030},[1002,80493,3455],{"class":1019},[1002,80495,80496],{"class":1030},".handleUpdate} \u002F>;\n",[1002,80498,80499],{"class":1004,"line":1354},[1002,80500,1269],{"class":1030},[1002,80502,80503],{"class":1004,"line":1360},[1002,80504,1170],{"class":1030},[1002,80506,80507],{"class":1004,"line":1366},[1002,80508,1051],{"emptyLinePlaceholder":1050},[1002,80510,80511,80513,80516,80518,80520,80522,80524],{"class":1004,"line":1946},[1002,80512,2363],{"class":1015},[1002,80514,80515],{"class":1026}," Ownee",[1002,80517,3014],{"class":1015},[1002,80519,20112],{"class":1026},[1002,80521,948],{"class":1030},[1002,80523,20117],{"class":1026},[1002,80525,1457],{"class":1030},[1002,80527,80528,80530],{"class":1004,"line":1956},[1002,80529,20201],{"class":1026},[1002,80531,3025],{"class":1030},[1002,80533,80534,80536,80538,80540,80543,80545,80547,80549],{"class":1004,"line":1961},[1002,80535,2687],{"class":1015},[1002,80537,20660],{"class":1030},[1002,80539,19650],{"class":15711},[1002,80541,80542],{"class":1026}," onChange",[1002,80544,2393],{"class":1015},[1002,80546,22192],{"class":1030},[1002,80548,3455],{"class":1019},[1002,80550,80551],{"class":1030},".props.onUpdate} \u002F>;\n",[1002,80553,80554],{"class":1004,"line":1971},[1002,80555,1269],{"class":1030},[1002,80557,80558],{"class":1004,"line":1980},[1002,80559,1170],{"class":1030},[1002,80561,80562],{"class":1004,"line":1985},[1002,80563,1051],{"emptyLinePlaceholder":1050},[1002,80565,80566,80569,80571],{"class":1004,"line":1995},[1002,80567,80568],{"class":1030},"Ownee.propTypes ",[1002,80570,2393],{"class":1015},[1002,80572,1457],{"class":1030},[1002,80574,80575],{"class":1004,"line":2006},[1002,80576,80577],{"class":1030}," onUpdate: React.PropTypes.func.isRequired,\n",[1002,80579,80580],{"class":1004,"line":2011},[1002,80581,1517],{"class":1030},[1655,80583,80585],{"id":80584},"using-proptypes","Using PropTypes",[925,80587,24000,80588,80591],{},[941,80589,80590],{},"PropTypes"," to communicate expectations and log meaningful warnings.",[993,80593,80595],{"className":995,"code":80594,"language":997,"meta":998,"style":998},"MyValidatedComponent.propTypes = {\n name: React.PropTypes.string,\n};\n",[941,80596,80597,80606,80611],{"__ignoreMap":998},[1002,80598,80599,80602,80604],{"class":1004,"line":1005},[1002,80600,80601],{"class":1030},"MyValidatedComponent.propTypes ",[1002,80603,2393],{"class":1015},[1002,80605,1457],{"class":1030},[1002,80607,80608],{"class":1004,"line":1012},[1002,80609,80610],{"class":1030}," name: React.PropTypes.string,\n",[1002,80612,80613],{"class":1004,"line":1047},[1002,80614,1517],{"class":1030},[925,80616,80617,80620,80621,80623],{},[1107,80618,80619],{},"MyValidatedComponent"," will log a warning if it receives ",[1107,80622,5911],{}," of a type other than string.",[993,80625,80627],{"className":995,"code":80626,"language":997,"meta":998,"style":998},"\u003CCar brand=536 \u002F>\n\u002F\u002F Warning: Invalid prop `brand` of type `number` supplied to `MyValidatedComponent`, expected `string`.\n",[941,80628,80629,80643],{"__ignoreMap":998},[1002,80630,80631,80633,80635,80638,80641],{"class":1004,"line":1005},[1002,80632,6539],{"class":1030},[1002,80634,78473],{"class":1019},[1002,80636,80637],{"class":1026}," brand",[1002,80639,80640],{"class":18541},"=536",[1002,80642,15258],{"class":1030},[1002,80644,80645],{"class":1004,"line":1012},[1002,80646,80647],{"class":1008},"\u002F\u002F Warning: Invalid prop `brand` of type `number` supplied to `MyValidatedComponent`, expected `string`.\n",[925,80649,80650],{},"This component will now validate the presence of name.",[993,80652,80654],{"className":995,"code":80653,"language":997,"meta":998,"style":998},"\u003CCar \u002F>\n\u002F\u002F Warning: Required prop `brand` was not specified in `Car`\n",[941,80655,80656,80664],{"__ignoreMap":998},[1002,80657,80658,80660,80662],{"class":1004,"line":1005},[1002,80659,6539],{"class":1030},[1002,80661,78473],{"class":1019},[1002,80663,15258],{"class":1030},[1002,80665,80666],{"class":1004,"line":1012},[1002,80667,80668],{"class":1008},"\u002F\u002F Warning: Required prop `brand` was not specified in `Car`\n",[953,80670,80672],{"id":80671},"using-entities","Using Entities",[925,80674,80675,80676,80679],{},"Use React's ",[1107,80677,80678],{},"String.fromCharCode()"," for special characters.",[1655,80681,78461],{"id":80682},"bad-13",[993,80684,80686],{"className":995,"code":80685,"language":997,"meta":998,"style":998},"\u003Cdiv>PiCO · Mascot\u003C\u002Fdiv>\n",[941,80687,80688],{"__ignoreMap":998},[1002,80689,80690,80692,80694,80697,80699],{"class":1004,"line":1005},[1002,80691,6539],{"class":1030},[1002,80693,19650],{"class":15711},[1002,80695,80696],{"class":1030},">PiCO · Mascot\u003C\u002F",[1002,80698,19650],{"class":15711},[1002,80700,15703],{"class":1030},[1655,80702,78374],{"id":80703},"good-14",[993,80705,80707],{"className":995,"code":80706,"language":997,"meta":998,"style":998},"\u003Cdiv>{`PiCO ${String.fromCharCode(183)} Mascot`}\u003C\u002Fdiv>\n",[941,80708,80709],{"__ignoreMap":998},[1002,80710,80711,80713,80715,80717,80720,80723,80725,80728,80730,80733,80735,80738,80740,80742],{"class":1004,"line":1005},[1002,80712,6539],{"class":1030},[1002,80714,19650],{"class":15711},[1002,80716,24778],{"class":1030},[1002,80718,80719],{"class":1034},"`PiCO ${",[1002,80721,80722],{"class":1030},"String",[1002,80724,948],{"class":1034},[1002,80726,80727],{"class":1026},"fromCharCode",[1002,80729,1031],{"class":1034},[1002,80731,80732],{"class":1019},"183",[1002,80734,80417],{"class":1034},[1002,80736,80737],{"class":1034},"} Mascot`",[1002,80739,42405],{"class":1030},[1002,80741,19650],{"class":15711},[1002,80743,15703],{"class":1030},[1655,80745,80747],{"id":80746},"tables","Tables",[925,80749,80750,80751,80753,80754,80756],{},"The browser thinks you're dumb. But React doesn't. Always use ",[1107,80752,39759],{}," in ",[1107,80755,39742],{}," components.",[1655,80758,78461],{"id":80759},"bad-14",[993,80761,80763],{"className":995,"code":80762,"language":997,"meta":998,"style":998},"render () {\n return (\n \u003Ctable>\n \u003Ctr>...\u003C\u002Ftr>\n \u003C\u002Ftable>\n );\n}\n",[941,80764,80765,80771,80777,80785,80798,80806,80810],{"__ignoreMap":998},[1002,80766,80767,80769],{"class":1004,"line":1005},[1002,80768,19545],{"class":1026},[1002,80770,9772],{"class":1030},[1002,80772,80773,80775],{"class":1004,"line":1012},[1002,80774,15066],{"class":1015},[1002,80776,15692],{"class":1030},[1002,80778,80779,80781,80783],{"class":1004,"line":1047},[1002,80780,15697],{"class":1030},[1002,80782,39742],{"class":15711},[1002,80784,15703],{"class":1030},[1002,80786,80787,80789,80791,80794,80796],{"class":1004,"line":1054},[1002,80788,19579],{"class":1030},[1002,80790,39748],{"class":15711},[1002,80792,80793],{"class":1030},">...\u003C\u002F",[1002,80795,39748],{"class":15711},[1002,80797,15703],{"class":1030},[1002,80799,80800,80802,80804],{"class":1004,"line":1060},[1002,80801,19647],{"class":1030},[1002,80803,39742],{"class":15711},[1002,80805,15703],{"class":1030},[1002,80807,80808],{"class":1004,"line":1272},[1002,80809,10503],{"class":1030},[1002,80811,80812],{"class":1004,"line":1348},[1002,80813,1170],{"class":1030},[1655,80815,78374],{"id":80816},"good-15",[993,80818,80820],{"className":995,"code":80819,"language":997,"meta":998,"style":998},"render () {\n return (\n \u003Ctable>\n \u003Ctbody>\n \u003Ctr>...\u003C\u002Ftr>\n \u003C\u002Ftbody>\n \u003C\u002Ftable>\n );\n}\n",[941,80821,80822,80828,80834,80842,80850,80862,80870,80878,80882],{"__ignoreMap":998},[1002,80823,80824,80826],{"class":1004,"line":1005},[1002,80825,19545],{"class":1026},[1002,80827,9772],{"class":1030},[1002,80829,80830,80832],{"class":1004,"line":1012},[1002,80831,15066],{"class":1015},[1002,80833,15692],{"class":1030},[1002,80835,80836,80838,80840],{"class":1004,"line":1047},[1002,80837,15697],{"class":1030},[1002,80839,39742],{"class":15711},[1002,80841,15703],{"class":1030},[1002,80843,80844,80846,80848],{"class":1004,"line":1054},[1002,80845,19579],{"class":1030},[1002,80847,39759],{"class":15711},[1002,80849,15703],{"class":1030},[1002,80851,80852,80854,80856,80858,80860],{"class":1004,"line":1060},[1002,80853,15708],{"class":1030},[1002,80855,39748],{"class":15711},[1002,80857,80793],{"class":1030},[1002,80859,39748],{"class":15711},[1002,80861,15703],{"class":1030},[1002,80863,80864,80866,80868],{"class":1004,"line":1272},[1002,80865,21184],{"class":1030},[1002,80867,39759],{"class":15711},[1002,80869,15703],{"class":1030},[1002,80871,80872,80874,80876],{"class":1004,"line":1348},[1002,80873,19647],{"class":1030},[1002,80875,39742],{"class":15711},[1002,80877,15703],{"class":1030},[1002,80879,80880],{"class":1004,"line":1354},[1002,80881,10503],{"class":1030},[1002,80883,80884],{"class":1004,"line":1360},[1002,80885,1170],{"class":1030},[953,80887,70333],{"id":2229},[925,80889,80890],{},"By following a few general guidelines for handling JSX in components, it becomes far more readable.",[1655,80892,80894],{"id":80893},"multi-line-jsx","Multi-line JSX",[925,80896,80897],{},"Write any JSX which contains nested elements across multiple lines with indentation to enhance readability.",[1655,80899,78461],{"id":80900},"bad-15",[993,80902,80904],{"className":995,"code":80903,"language":997,"meta":998,"style":998},"return (\n \u003Cdiv>\n \u003CComponentOne \u002F>\n \u003CComponentTwo \u002F>\n \u003C\u002Fdiv>\n);\n",[941,80905,80906,80912,80920,80929,80938,80946],{"__ignoreMap":998},[1002,80907,80908,80910],{"class":1004,"line":1005},[1002,80909,8975],{"class":1015},[1002,80911,15692],{"class":1030},[1002,80913,80914,80916,80918],{"class":1004,"line":1012},[1002,80915,22427],{"class":1030},[1002,80917,19650],{"class":15711},[1002,80919,15703],{"class":1030},[1002,80921,80922,80924,80927],{"class":1004,"line":1047},[1002,80923,15697],{"class":1030},[1002,80925,80926],{"class":1019},"ComponentOne",[1002,80928,15258],{"class":1030},[1002,80930,80931,80933,80936],{"class":1004,"line":1054},[1002,80932,15697],{"class":1030},[1002,80934,80935],{"class":1019},"ComponentTwo",[1002,80937,15258],{"class":1030},[1002,80939,80940,80942,80944],{"class":1004,"line":1060},[1002,80941,28112],{"class":1030},[1002,80943,19650],{"class":15711},[1002,80945,15703],{"class":1030},[1002,80947,80948],{"class":1004,"line":1272},[1002,80949,1085],{"class":1030},[1655,80951,78374],{"id":80952},"good-16",[993,80954,80955],{"className":995,"code":80903,"language":997,"meta":998,"style":998},[941,80956,80957,80963,80971,80979,80987,80995],{"__ignoreMap":998},[1002,80958,80959,80961],{"class":1004,"line":1005},[1002,80960,8975],{"class":1015},[1002,80962,15692],{"class":1030},[1002,80964,80965,80967,80969],{"class":1004,"line":1012},[1002,80966,22427],{"class":1030},[1002,80968,19650],{"class":15711},[1002,80970,15703],{"class":1030},[1002,80972,80973,80975,80977],{"class":1004,"line":1047},[1002,80974,15697],{"class":1030},[1002,80976,80926],{"class":1019},[1002,80978,15258],{"class":1030},[1002,80980,80981,80983,80985],{"class":1004,"line":1054},[1002,80982,15697],{"class":1030},[1002,80984,80935],{"class":1019},[1002,80986,15258],{"class":1030},[1002,80988,80989,80991,80993],{"class":1004,"line":1060},[1002,80990,28112],{"class":1030},[1002,80992,19650],{"class":15711},[1002,80994,15703],{"class":1030},[1002,80996,80997],{"class":1004,"line":1272},[1002,80998,1085],{"class":1030},[7100,81000,81002],{"title":81001,"type":24048},"Parenthesis",[925,81003,81004],{},"Parenthesis are not technically required with a single line JSX statement, but use them for the sake of consistency.",[1655,81006,81008],{"id":81007},"conditional-jsx","Conditional JSX",[925,81010,81011],{},"When you have conditional elements that needs to be returned depending on state, props, or another condition, you can declare an empty variable at the top of the render function and only populate it with JSX if the condition is met. When the variable is returned in the render method return statement, it’ll either render the conditional elements, or nothing at all.",[993,81013,81015],{"className":995,"code":81014,"language":997,"meta":998,"style":998},"var optionalElement;\n\nif (this.props.condition) {\n optionalElement = \u003Cdiv> … \u003C\u002Fdiv>;\n}\n\nreturn \u003Cdiv>…{optionalElement}…\u003C\u002Fdiv>;\n",[941,81016,81017,81024,81028,81039,81057,81061,81065],{"__ignoreMap":998},[1002,81018,81019,81021],{"class":1004,"line":1005},[1002,81020,18311],{"class":1015},[1002,81022,81023],{"class":1030}," optionalElement;\n",[1002,81025,81026],{"class":1004,"line":1012},[1002,81027,1051],{"emptyLinePlaceholder":1050},[1002,81029,81030,81032,81034,81036],{"class":1004,"line":1047},[1002,81031,46126],{"class":1015},[1002,81033,6513],{"class":1030},[1002,81035,3455],{"class":1019},[1002,81037,81038],{"class":1030},".props.condition) {\n",[1002,81040,81041,81044,81046,81048,81050,81053,81055],{"class":1004,"line":1054},[1002,81042,81043],{"class":1030}," optionalElement ",[1002,81045,2393],{"class":1015},[1002,81047,20660],{"class":1030},[1002,81049,19650],{"class":15711},[1002,81051,81052],{"class":1030},"> … \u003C\u002F",[1002,81054,19650],{"class":15711},[1002,81056,21772],{"class":1030},[1002,81058,81059],{"class":1004,"line":1060},[1002,81060,1170],{"class":1030},[1002,81062,81063],{"class":1004,"line":1272},[1002,81064,1051],{"emptyLinePlaceholder":1050},[1002,81066,81067,81069,81071,81073,81076,81078],{"class":1004,"line":1348},[1002,81068,8975],{"class":1015},[1002,81070,20660],{"class":1030},[1002,81072,19650],{"class":15711},[1002,81074,81075],{"class":1030},">…{optionalElement}…\u003C\u002F",[1002,81077,19650],{"class":15711},[1002,81079,21772],{"class":1030},[1655,81081,81083],{"id":81082},"in-line-list-iteration","In-line list iteration",[925,81085,81086],{},"Where possible, iterate over lists of data in-line in the returned JSX unless its internal logic is sufficiently complex enough to warrant moving outside of the return statement and populating an array for rendering.",[993,81088,81090],{"className":995,"code":81089,"language":997,"meta":998,"style":998},"return (\n \u003Cdiv>\n {this.props.list.map(function (data, i) {\n return \u003CComponent data={data} key={i} \u002F>;\n })}\n \u003C\u002Fdiv>\n);\n",[941,81091,81092,81098,81106,81132,81154,81159,81167],{"__ignoreMap":998},[1002,81093,81094,81096],{"class":1004,"line":1005},[1002,81095,8975],{"class":1015},[1002,81097,15692],{"class":1030},[1002,81099,81100,81102,81104],{"class":1004,"line":1012},[1002,81101,22427],{"class":1030},[1002,81103,19650],{"class":15711},[1002,81105,15703],{"class":1030},[1002,81107,81108,81111,81113,81116,81118,81120,81122,81124,81126,81128,81130],{"class":1004,"line":1047},[1002,81109,81110],{"class":1030}," {",[1002,81112,3455],{"class":1019},[1002,81114,81115],{"class":1030},".props.list.",[1002,81117,19444],{"class":1026},[1002,81119,1031],{"class":1030},[1002,81121,6965],{"class":1015},[1002,81123,6513],{"class":1030},[1002,81125,16648],{"class":2378},[1002,81127,1251],{"class":1030},[1002,81129,12031],{"class":2378},[1002,81131,2382],{"class":1030},[1002,81133,81134,81136,81138,81140,81142,81144,81147,81149,81151],{"class":1004,"line":1054},[1002,81135,4376],{"class":1015},[1002,81137,20660],{"class":1030},[1002,81139,20117],{"class":1019},[1002,81141,16556],{"class":1026},[1002,81143,2393],{"class":1015},[1002,81145,81146],{"class":1030},"{data} ",[1002,81148,7857],{"class":1026},[1002,81150,2393],{"class":1015},[1002,81152,81153],{"class":1030},"{i} \u002F>;\n",[1002,81155,81156],{"class":1004,"line":1060},[1002,81157,81158],{"class":1030}," })}\n",[1002,81160,81161,81163,81165],{"class":1004,"line":1272},[1002,81162,28112],{"class":1030},[1002,81164,19650],{"class":15711},[1002,81166,15703],{"class":1030},[1002,81168,81169],{"class":1004,"line":1348},[1002,81170,1085],{"class":1030},[1655,81172,81174],{"id":81173},"indentation-and-new-line-for-component-attributes","Indentation and new line for component attributes",[925,81176,81177],{},"When there are enough attributes on a component that displaying them inline becomes untidy (usually 3 or more), I always display them on multiple lines and indent each one.",[1655,81179,78461],{"id":81180},"bad-16",[993,81182,81184],{"className":995,"code":81183,"language":997,"meta":998,"style":998},"\u003CComponent attribute={...} anotherAttribute={...} attributeThree={...} \u002F>\n",[941,81185,81186],{"__ignoreMap":998},[1002,81187,81188,81190,81192,81195,81197,81199,81201,81203,81206,81208,81210,81212,81214,81217,81219,81221,81223],{"class":1004,"line":1005},[1002,81189,6539],{"class":1030},[1002,81191,20117],{"class":1019},[1002,81193,81194],{"class":1026}," attribute",[1002,81196,2393],{"class":1015},[1002,81198,22192],{"class":1030},[1002,81200,17625],{"class":1015},[1002,81202,23716],{"class":1030},[1002,81204,81205],{"class":1026},"anotherAttribute",[1002,81207,2393],{"class":1015},[1002,81209,22192],{"class":1030},[1002,81211,17625],{"class":1015},[1002,81213,23716],{"class":1030},[1002,81215,81216],{"class":1026},"attributeThree",[1002,81218,2393],{"class":1015},[1002,81220,22192],{"class":1030},[1002,81222,17625],{"class":1015},[1002,81224,26947],{"class":1030},[1655,81226,78374],{"id":81227},"good-17",[993,81229,81231],{"className":995,"code":81230,"language":997,"meta":998,"style":998},"\u003CComponent\n attribute={...}\n anotherAttribute={...}\n attributeThree={...}\n …\n \u002F>\n",[941,81232,81233,81240,81253,81266,81279,81284],{"__ignoreMap":998},[1002,81234,81235,81237],{"class":1004,"line":1005},[1002,81236,6539],{"class":1030},[1002,81238,81239],{"class":1019},"Component\n",[1002,81241,81242,81245,81247,81249,81251],{"class":1004,"line":1012},[1002,81243,81244],{"class":1026}," attribute",[1002,81246,2393],{"class":1015},[1002,81248,22192],{"class":1030},[1002,81250,17625],{"class":1015},[1002,81252,1170],{"class":1030},[1002,81254,81255,81258,81260,81262,81264],{"class":1004,"line":1047},[1002,81256,81257],{"class":1026}," anotherAttribute",[1002,81259,2393],{"class":1015},[1002,81261,22192],{"class":1030},[1002,81263,17625],{"class":1015},[1002,81265,1170],{"class":1030},[1002,81267,81268,81271,81273,81275,81277],{"class":1004,"line":1054},[1002,81269,81270],{"class":1026}," attributeThree",[1002,81272,2393],{"class":1015},[1002,81274,22192],{"class":1030},[1002,81276,17625],{"class":1015},[1002,81278,1170],{"class":1030},[1002,81280,81281],{"class":1004,"line":1060},[1002,81282,81283],{"class":18541}," …\n",[1002,81285,81286],{"class":1004,"line":1272},[1002,81287,27277],{"class":1030},[953,81289,26561],{"id":26560},[925,81291,81292],{},"These guidelines are by no means authoritative or exhaustive, but I feel they are a good starting point for organising and standardising React components and some of the more common use cases I encounter.",[1579,81294,81295],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":998,"searchDepth":1012,"depth":1012,"links":81297},[81298,81301,81307,81313,81317,81321,81325,81329,81340,81345,81354,81361,81371],{"id":77862,"depth":1012,"text":77863,"children":81299},[81300],{"id":77869,"depth":1047,"text":77870},{"id":77882,"depth":1012,"text":77883,"children":81302},[81303,81304,81305,81306],{"id":77886,"depth":1047,"text":35577},{"id":78241,"depth":1047,"text":78242},{"id":78251,"depth":1047,"text":78251},{"id":78373,"depth":1047,"text":78374},{"id":78453,"depth":1012,"text":78454,"children":81308},[81309,81310,81311,81312],{"id":78460,"depth":1047,"text":78461},{"id":78486,"depth":1047,"text":78374},{"id":78507,"depth":1047,"text":78461},{"id":78544,"depth":1047,"text":78374},{"id":78577,"depth":1012,"text":78578,"children":81314},[81315,81316],{"id":78584,"depth":1047,"text":78461},{"id":78636,"depth":1047,"text":78374},{"id":78688,"depth":1012,"text":78689,"children":81318},[81319,81320],{"id":78698,"depth":1047,"text":78461},{"id":78733,"depth":1047,"text":78374},{"id":78770,"depth":1012,"text":78771,"children":81322},[81323,81324],{"id":78777,"depth":1047,"text":78461},{"id":78869,"depth":1047,"text":78374},{"id":78960,"depth":1012,"text":78961,"children":81326},[81327,81328],{"id":78972,"depth":1047,"text":78461},{"id":79060,"depth":1047,"text":78374},{"id":79184,"depth":1012,"text":79185,"children":81330},[81331,81332,81333,81334,81335,81336,81337,81338,81339],{"id":79191,"depth":1047,"text":78461},{"id":79408,"depth":1047,"text":78374},{"id":79672,"depth":1047,"text":79673},{"id":79681,"depth":1047,"text":78461},{"id":79744,"depth":1047,"text":78374},{"id":79793,"depth":1047,"text":78374},{"id":79866,"depth":1047,"text":79867},{"id":79875,"depth":1047,"text":78461},{"id":79932,"depth":1047,"text":78374},{"id":80015,"depth":1012,"text":81341,"children":81342},"Existence of prop",[81343,81344],{"id":80030,"depth":1047,"text":78461},{"id":80098,"depth":1047,"text":78374},{"id":80196,"depth":1012,"text":80197,"children":81346},[81347,81348,81349,81350,81351,81352,81353],{"id":80203,"depth":1047,"text":78461},{"id":80242,"depth":1047,"text":78374},{"id":80289,"depth":1047,"text":80290},{"id":80296,"depth":1047,"text":78461},{"id":80349,"depth":1047,"text":78374},{"id":80420,"depth":1047,"text":80421},{"id":80584,"depth":1047,"text":80585},{"id":80671,"depth":1012,"text":80672,"children":81355},[81356,81357,81358,81359,81360],{"id":80682,"depth":1047,"text":78461},{"id":80703,"depth":1047,"text":78374},{"id":80746,"depth":1047,"text":80747},{"id":80759,"depth":1047,"text":78461},{"id":80816,"depth":1047,"text":78374},{"id":2229,"depth":1012,"text":70333,"children":81362},[81363,81364,81365,81366,81367,81368,81369,81370],{"id":80893,"depth":1047,"text":80894},{"id":80900,"depth":1047,"text":78461},{"id":80952,"depth":1047,"text":78374},{"id":81007,"depth":1047,"text":81008},{"id":81082,"depth":1047,"text":81083},{"id":81173,"depth":1047,"text":81174},{"id":81180,"depth":1047,"text":78461},{"id":81227,"depth":1047,"text":78374},{"id":26560,"depth":1012,"text":26561},"2015-10-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-best-practices-patterns.jpg",{},{"title":641,"description":643},"blog\u002Freact-best-practices-patterns",[16,17,140],"dDBBWYM4glYncAq2QT5g3w0MdxqxuHZfvJT4xhRAdLk",{"id":81380,"title":400,"author":920,"body":81381,"date":81638,"description":402,"extension":1591,"image":81639,"meta":81640,"navigation":1050,"path":401,"seo":81641,"stem":81642,"tags":81643,"__hash__":81644},"blog\u002Fblog\u002Fhttp2-new-features.md",{"type":922,"value":81382,"toc":81621},[81383,81387,81391,81394,81398,81401,81405,81411,81415,81431,81435,81438,81456,81460,81463,81467,81478,81485,81495,81502,81506,81509,81514,81518,81525,81528,81537,81543,81547,81550,81557,81561,81564,81571,81577,81581,81584,81587,81612,81618],[953,81384,81386],{"id":81385},"why-http2","Why HTTP\u002F2?",[1655,81388,81390],{"id":81389},"_1-resource-intensive-page-loading","1. Resource Intensive Page Loading",[925,81392,81393],{},"Loading a Web page is more resource-intensive than ever, and loading all of those assets efficiently is difficult because HTTP practically only allows one outstanding request per TCP connection.",[1655,81395,81397],{"id":81396},"_2-multiple-tcp-connections","2. Multiple TCP Connections",[925,81399,81400],{},"In the past, browsers have used multiple TCP connections to issue parallel requests. However, there are limits to this; if too many connections are used, it’s both counter-productive (TCP congestion control is effectively negated, leading to congestion events that hurt performance and the network), and it’s fundamentally unfair (because browsers are taking more than their share of network resources).",[1655,81402,81404],{"id":81403},"_3-duplicate-data","3. Duplicate Data",[925,81406,81407,81408,948],{},"A large number of requests back and forth from the browser to a server, means a lot of duplicated data ",[1107,81409,81410],{},"on the wire",[1655,81412,81414],{"id":81413},"_4-hacks","4. Hacks",[925,81416,81417,81418,1251,81421,1251,81424,2034,81427,81430],{},"It’s considered Best Practice to do things like ",[1107,81419,81420],{},"spriting",[1107,81422,81423],{},"data: inlining",[1107,81425,81426],{},"domain sharding",[1107,81428,81429],{},"concatenation",". These hacks are indications of underlying problems in the protocol itself, and cause a number of problems on their own when used.",[953,81432,81434],{"id":81433},"differences-between-http11","Differences Between HTTP1.1",[925,81436,81437],{},"The proposed changes do not require any changes to how existing web applications work, but new applications can take advantage of new features for increased speed.",[925,81439,81440,81441,1251,81444,81447,81448,81451,81452,81455],{},"HTTP\u002F2 leaves most of HTTP 1.1's high level syntax, such as ",[1107,81442,81443],{},"methods",[1107,81445,81446],{},"status code","s, ",[1107,81449,81450],{},"header field","s, and ",[1107,81453,81454],{},"URI","s, the same. The element that is modified is how the data is framed and transported between the client and the server.",[1655,81457,81459],{"id":81458},"_1-backward-compatible","1. Backward Compatible",[925,81461,81462],{},"HTTP\u002F2 will still work with the existing Web. So HTTP\u002F2 will not introduce new methods, change headers or status codes.",[1655,81464,81466],{"id":81465},"_2-reduced-requests","2. Reduced Requests",[925,81468,81469,81470,1251,81473,2034,81475,81477],{},"HTTP\u002F1 use techniques like ",[1107,81471,81472],{},"inlining",[1107,81474,81429],{},[1107,81476,81420],{}," to reduce the number of requests on a page.",[925,81479,81480,81481,81484],{},"HTTP\u002F2 overcomes the above issue by using ",[1107,81482,81483],{},"multiplexing"," to allow many messages to be interleaved together on a connection at the same time so that one large response (or one that takes a long time for the server to process) doesn’t block others.",[7100,81486,81488],{"title":81487,"type":24048},"Why is HTTP\u002F2 multiplexed?",[925,81489,81490,81491,81494],{},"HTTP\u002F1.x has a problem called ",[1107,81492,81493],{},"head-of-line blocking",", where effectively only one request can be outstanding on a connection at a time.\nMultiplexing addresses these problems by allowing multiple request and response messages to be in flight at the same time; it’s even possible to intermingle parts of one message with another on the wire. This, in turn, allows a client to use just one connection per origin to load a page.",[925,81496,81497,81498,81501],{},"HTTP\u002F2 adds ",[1107,81499,81500],{},"header compression"," so that the normal request and response headers don’t dominate your bandwidth — even if what you’re requesting is very small. This is a huge win on mobile, where getting big request headers can easily blow out the load time of a page with a lot of resources by several round trips.",[1655,81503,81505],{"id":81504},"_3-less-load-on-network-servers","3. Less Load on Network & Servers",[925,81507,81508],{},"With fewer connections of HTTP\u002F2 will ease the load on both the network and the servers. With the increasing use of mobiles, as an example say a phone opens up 4-6 TCP connections to each server to download page resources, it could end up overloading mobile network buffers causing issues like dropping packets.",[7100,81510,81511],{"title":81487,"type":24048},[925,81512,81513],{},"HTTP\u002F2 allows the use of a single connection per host and encourages sites to consolidate their content on one host where possible.",[1655,81515,81517],{"id":81516},"_4-server-push","4. Server Push",[925,81519,81520,81521,81524],{},"HTTP\u002F2 employs ",[1107,81522,81523],{},"server push"," which allows a server to proactively send resources: HTML, CSS and images to the client’s cache for future use.",[925,81526,81527],{},"This helps eliminating round trips to the server for fetching linked style sheets and image etc.",[7100,81529,81531],{"title":81530,"type":24048},"Cache",[925,81532,81533,81536],{},[1107,81534,81535],{},"Server push"," can be useful for proactively updating or invalidating clientside cache.",[925,81538,81539,81540,948],{},"If a client decides that it already has a copy, it can say \"no\" by with ",[941,81541,81542],{},"RST_STREAM",[1655,81544,81546],{"id":81545},"_5-rst_stream","5. RST_STREAM",[925,81548,81549],{},"In HTTP\u002F1, if client sends a request and then finds out it doesn’t need the response, it needs to close the connection to save bandwidth; there’s no safe way to recover it.",[925,81551,81552,81553,81556],{},"HTTP\u002F2 introduces ",[1107,81554,81555],{},"RST_STREAM frame"," to allow a client to change its mind in scenarios like browser navigating away from the page, or user cancelling a download.",[1655,81558,81560],{"id":81559},"_6-encryption","6. Encryption",[925,81562,81563],{},"Even though using TLS(Transport Layer Security) is not mandatory for HTTP\u002F2, Many believe the only safe way to deploy the new protocol is to use encryption.",[925,81565,81566,81567,81570],{},"Chrome and Firefox are only going to support HTTP\u002F2 using TLS, as it is difficult to deploy the new protocol across internet, given many of the ",[1107,81568,81569],{},"middleboxes"," like proxies and firewalls assume that HTTP\u002F1 will not change.",[7100,81572,81574],{"title":81573,"type":24048},"TLS(Transport Layer Security)",[925,81575,81576],{},"Transport Layer Security (TLS) is a protocol that ensures privacy between communicating applications and their users on the Internet. When a server and client communicate, TLS ensures that no third party may eavesdrop or tamper with any message. TLS is the successor to the Secure Sockets Layer (SSL).",[1655,81578,81580],{"id":81579},"_7-no-more-text","7. No More Text",[925,81582,81583],{},"With HTTP\u002F1, you can open up a telnet session and type in a request and then look at the response. But this will not be feasible with HTTP\u002F2, because it's a binary protocol.",[925,81585,81586],{},"Textual protocols have many issues:",[1530,81588,81589,81595,81601,81606],{},[974,81590,81591,81594],{},[1107,81592,81593],{},"Higher overhead to parse"," - In contrast, binary protocols are simpler, and have less overhead to parse.",[974,81596,81597,81600],{},[1107,81598,81599],{},"Delimiters"," - Newlines, whitespace handling, extra characters etc.",[974,81602,81603,81605],{},[1107,81604,75775],{}," - Different implmentations pay the way to malicious parties to make their way in.",[974,81607,81608,81611],{},[1107,81609,81610],{},"Processing text"," - Anything remotely look like HTTP\u002F1 will be processed as HTTP\u002F1.",[7100,81613,81615],{"title":81614,"type":24048},"Tools",[925,81616,81617],{},"Wireshark has a plugin for dissecting HTTP\u002F2.",[925,81619,81620],{},"It’s more accurate to view the new protocol as removing some key impediments to performance; once browsers and servers learn how and when to take advantage of that, performance should start incrementally improving.",{"title":998,"searchDepth":1012,"depth":1012,"links":81622},[81623,81629],{"id":81385,"depth":1012,"text":81386,"children":81624},[81625,81626,81627,81628],{"id":81389,"depth":1047,"text":81390},{"id":81396,"depth":1047,"text":81397},{"id":81403,"depth":1047,"text":81404},{"id":81413,"depth":1047,"text":81414},{"id":81433,"depth":1012,"text":81434,"children":81630},[81631,81632,81633,81634,81635,81636,81637],{"id":81458,"depth":1047,"text":81459},{"id":81465,"depth":1047,"text":81466},{"id":81504,"depth":1047,"text":81505},{"id":81516,"depth":1047,"text":81517},{"id":81545,"depth":1047,"text":81546},{"id":81559,"depth":1047,"text":81560},{"id":81579,"depth":1047,"text":81580},"2015-10-17","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhttp2-new-features.jpg",{},{"title":400,"description":402},"blog\u002Fhttp2-new-features",[16,404],"T9AbO6EjuMsXn0UAaQDYWo5gjO2Q9Mg895iWygBEAUk",{"id":81646,"title":465,"author":920,"body":81647,"date":82181,"description":467,"extension":1591,"image":82182,"meta":82183,"navigation":1050,"path":466,"seo":82184,"stem":82185,"tags":82186,"__hash__":82187},"blog\u002Fblog\u002Fintroduction-to-hapi.md",{"type":922,"value":81648,"toc":82166},[81649,81653,81657,81673,81677,81680,81684,81687,81691,81697,81707,81710,81726,81730,81733,81738,81853,81863,81947,81951,81955,81962,81966,81969,81973,81976,81985,81988,81999,82001,82004,82007,82010,82017,82157,82163],[953,81650,81652],{"id":81651},"why-hapijs","Why hapi.js?",[1655,81654,81656],{"id":81655},"_1-tested-at-scale","1. Tested at Scale",[925,81658,81659,81660,1251,81663,1251,81666,36227,81669,81672],{},"Hapi.js is robust, stable and reliable. It was battle-tested during Walmart Black Friday without any problems. Major companies like ",[941,81661,81662],{},"Yahoo",[941,81664,81665],{},"Disney",[941,81667,81668],{},"Paypal",[941,81670,81671],{},"Zappos"," use hapi.js for their APIs and web applications.",[1655,81674,81676],{"id":81675},"_2-security","2. Security",[925,81678,81679],{},"Security is a key consideration behind hapi.js for building secure web applications.",[1655,81681,81683],{"id":81682},"_3-modularization","3. Modularization",[925,81685,81686],{},"Hapi.js allows logical modularization of your application. It also has a rich plugin interface. Large applications can be easily distributed over multiple smaller modules.",[953,81688,81690],{"id":81689},"installing-hapijs","Installing hapi.js",[925,81692,81693,81694,81696],{},"In order to use hapi.js, you have to make sure you have ",[941,81695,33001],{}," installed on your machine.",[7100,81698,81700],{"type":24048,"title":81699},"Installing Node.js",[925,81701,81702,81703,948],{},"Download and install Node.js ",[933,81704,14815],{"href":81705,"rel":81706},"https:\u002F\u002Fnodejs.org\u002Fen\u002F",[937],[925,81708,81709],{},"In command line, run the npm install command for installing hapi:",[993,81711,81713],{"className":1797,"code":81712,"language":1799,"meta":998,"style":998},"npm install hapi --save\n",[941,81714,81715],{"__ignoreMap":998},[1002,81716,81717,81719,81721,81724],{"class":1004,"line":1005},[1002,81718,27346],{"class":1026},[1002,81720,27349],{"class":1034},[1002,81722,81723],{"class":1034}," hapi",[1002,81725,64294],{"class":1019},[953,81727,81729],{"id":81728},"creating-a-server","Creating a Server",[925,81731,81732],{},"Now we have installed Node.js, as a starting point, we are going to set up the server.",[925,81734,29527,81735],{},[1107,81736,81737],{},"server.js",[993,81739,81741],{"className":995,"code":81740,"language":997,"meta":998,"style":998},"var Hapi = require('hapi');\n\nvar server = new Hapi.Server();\n\nserver.connection({\n host: 'localhost',\n port: 3000,\n});\n\nserver.start(function () {\n console.log('Server running at:', server.info.uri);\n});\n",[941,81742,81743,81761,81765,81783,81787,81796,81806,81815,81819,81823,81835,81849],{"__ignoreMap":998},[1002,81744,81745,81747,81750,81752,81754,81756,81759],{"class":1004,"line":1005},[1002,81746,18311],{"class":1015},[1002,81748,81749],{"class":1030}," Hapi ",[1002,81751,2393],{"class":1015},[1002,81753,1027],{"class":1026},[1002,81755,1031],{"class":1030},[1002,81757,81758],{"class":1034},"'hapi'",[1002,81760,1085],{"class":1030},[1002,81762,81763],{"class":1004,"line":1012},[1002,81764,1051],{"emptyLinePlaceholder":1050},[1002,81766,81767,81769,81771,81773,81775,81778,81781],{"class":1004,"line":1047},[1002,81768,18311],{"class":1015},[1002,81770,28347],{"class":1030},[1002,81772,2393],{"class":1015},[1002,81774,2690],{"class":1015},[1002,81776,81777],{"class":1030}," Hapi.",[1002,81779,81780],{"class":1026},"Server",[1002,81782,1428],{"class":1030},[1002,81784,81785],{"class":1004,"line":1054},[1002,81786,1051],{"emptyLinePlaceholder":1050},[1002,81788,81789,81791,81794],{"class":1004,"line":1060},[1002,81790,28448],{"class":1030},[1002,81792,81793],{"class":1026},"connection",[1002,81795,2756],{"class":1030},[1002,81797,81798,81801,81804],{"class":1004,"line":1272},[1002,81799,81800],{"class":1030}," host: ",[1002,81802,81803],{"class":1034},"'localhost'",[1002,81805,1143],{"class":1030},[1002,81807,81808,81811,81813],{"class":1004,"line":1348},[1002,81809,81810],{"class":1030}," port: ",[1002,81812,20832],{"class":1019},[1002,81814,1143],{"class":1030},[1002,81816,81817],{"class":1004,"line":1354},[1002,81818,2804],{"class":1030},[1002,81820,81821],{"class":1004,"line":1360},[1002,81822,1051],{"emptyLinePlaceholder":1050},[1002,81824,81825,81827,81829,81831,81833],{"class":1004,"line":1366},[1002,81826,28448],{"class":1030},[1002,81828,9060],{"class":1026},[1002,81830,1031],{"class":1030},[1002,81832,6965],{"class":1015},[1002,81834,9772],{"class":1030},[1002,81836,81837,81839,81841,81843,81846],{"class":1004,"line":1946},[1002,81838,6977],{"class":1030},[1002,81840,2886],{"class":1026},[1002,81842,1031],{"class":1030},[1002,81844,81845],{"class":1034},"'Server running at:'",[1002,81847,81848],{"class":1030},", server.info.uri);\n",[1002,81850,81851],{"class":1004,"line":1956},[1002,81852,2804],{"class":1030},[925,81854,81855,81856,32093,81859,81862],{},"Line 03 - Here a server instance is created.\nLine 05-08 - A connection is established by providing our server with a ",[941,81857,81858],{},"host",[941,81860,81861],{},"port"," number.\nLine 10 - We are starting the server.",[993,81864,81866],{"className":995,"code":81865,"language":997,"meta":998,"style":998},"...\n\nserver.route({\n path: '\u002F',\n method: 'GET',\n handler: function (request, reply) {\n reply('Hello world!');\n }\n});\n\n...\n",[941,81867,81868,81872,81876,81884,81893,81901,81920,81931,81935,81939,81943],{"__ignoreMap":998},[1002,81869,81870],{"class":1004,"line":1005},[1002,81871,48279],{"class":1015},[1002,81873,81874],{"class":1004,"line":1012},[1002,81875,1051],{"emptyLinePlaceholder":1050},[1002,81877,81878,81880,81882],{"class":1004,"line":1047},[1002,81879,28448],{"class":1030},[1002,81881,66565],{"class":1026},[1002,81883,2756],{"class":1030},[1002,81885,81886,81889,81891],{"class":1004,"line":1054},[1002,81887,81888],{"class":1030}," path: ",[1002,81890,22153],{"class":1034},[1002,81892,1143],{"class":1030},[1002,81894,81895,81897,81899],{"class":1004,"line":1060},[1002,81896,61208],{"class":1030},[1002,81898,60997],{"class":1034},[1002,81900,1143],{"class":1030},[1002,81902,81903,81905,81907,81909,81911,81913,81915,81918],{"class":1004,"line":1272},[1002,81904,65030],{"class":1026},[1002,81906,1137],{"class":1030},[1002,81908,6965],{"class":1015},[1002,81910,6513],{"class":1030},[1002,81912,4786],{"class":2378},[1002,81914,1251],{"class":1030},[1002,81916,81917],{"class":2378},"reply",[1002,81919,2382],{"class":1030},[1002,81921,81922,81925,81927,81929],{"class":1004,"line":1348},[1002,81923,81924],{"class":1026}," reply",[1002,81926,1031],{"class":1030},[1002,81928,38573],{"class":1034},[1002,81930,1085],{"class":1030},[1002,81932,81933],{"class":1004,"line":1354},[1002,81934,1269],{"class":1030},[1002,81936,81937],{"class":1004,"line":1360},[1002,81938,2804],{"class":1030},[1002,81940,81941],{"class":1004,"line":1366},[1002,81942,1051],{"emptyLinePlaceholder":1050},[1002,81944,81945],{"class":1004,"line":1946},[1002,81946,48279],{"class":1015},[953,81948,81950],{"id":81949},"routing","Routing",[1655,81952,81954],{"id":81953},"_1path","1.Path",[925,81956,81957,81958,81961],{},"The absolute path (Line 04) is used to match incoming requests (must begin with '\u002F'). Incoming requests are compared to the configured paths based on the server router configuration option. The path can include ",[941,81959,81960],{},"named parameters"," enclosed in {} which will be matched against literal values in the request as described in Path parameters.",[1655,81963,81965],{"id":81964},"_2method","2.Method",[925,81967,81968],{},"The HTTP method (Line 05). Typically one of 'GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'. Any HTTP method is allowed, except for 'HEAD'.",[1655,81970,81972],{"id":81971},"_3handler","3.Handler",[925,81974,81975],{},"The handler for the route (Line 06). Can only include one handler per route.",[7100,81977,81978],{"type":23379},[925,81979,81980,81981,81984],{},"HTTP method ",[941,81982,81983],{},"HEAD"," is not supported in the server route.",[925,81986,81987],{},"Now you can start the server by running following command:",[993,81989,81991],{"className":1797,"code":81990,"language":1799,"meta":998,"style":998},"node server.js\n",[941,81992,81993],{"__ignoreMap":998},[1002,81994,81995,81997],{"class":1004,"line":1005},[1002,81996,12108],{"class":1026},[1002,81998,28487],{"class":1034},[953,82000,62424],{"id":62423},[925,82002,82003],{},"Plugins allow you to build out your application components as self-contained modules.",[925,82005,82006],{},"They also manipulate requests and other events, hook into server events, etc.",[925,82008,82009],{},"Plugins are like middleware.",[925,82011,82012,82013,82016],{},"We can modify each request at the extension points, using ",[1107,82014,82015],{},"server.ext()",". Let's expand on our example code where we want to set a new request path values on all the incoming requests:",[993,82018,82020],{"className":995,"code":82019,"language":997,"meta":998,"style":998},"...\n\nserver.route({\n path: '\u002Ftest',\n method: 'GET',\n handler: function (request, reply) {\n reply('This is a test!');\n }\n});\n\nserver.ext('onRequest', function (request, reply) {\n \u002F\u002F Change all requests to '\u002Ftest'\n request.setUrl('\u002Ftest');\n return reply.continue();\n});\n",[941,82021,82022,82026,82030,82038,82047,82055,82073,82084,82088,82092,82096,82122,82127,82141,82153],{"__ignoreMap":998},[1002,82023,82024],{"class":1004,"line":1005},[1002,82025,48279],{"class":1015},[1002,82027,82028],{"class":1004,"line":1012},[1002,82029,1051],{"emptyLinePlaceholder":1050},[1002,82031,82032,82034,82036],{"class":1004,"line":1047},[1002,82033,28448],{"class":1030},[1002,82035,66565],{"class":1026},[1002,82037,2756],{"class":1030},[1002,82039,82040,82042,82045],{"class":1004,"line":1054},[1002,82041,81888],{"class":1030},[1002,82043,82044],{"class":1034},"'\u002Ftest'",[1002,82046,1143],{"class":1030},[1002,82048,82049,82051,82053],{"class":1004,"line":1060},[1002,82050,61208],{"class":1030},[1002,82052,60997],{"class":1034},[1002,82054,1143],{"class":1030},[1002,82056,82057,82059,82061,82063,82065,82067,82069,82071],{"class":1004,"line":1272},[1002,82058,65030],{"class":1026},[1002,82060,1137],{"class":1030},[1002,82062,6965],{"class":1015},[1002,82064,6513],{"class":1030},[1002,82066,4786],{"class":2378},[1002,82068,1251],{"class":1030},[1002,82070,81917],{"class":2378},[1002,82072,2382],{"class":1030},[1002,82074,82075,82077,82079,82082],{"class":1004,"line":1348},[1002,82076,81924],{"class":1026},[1002,82078,1031],{"class":1030},[1002,82080,82081],{"class":1034},"'This is a test!'",[1002,82083,1085],{"class":1030},[1002,82085,82086],{"class":1004,"line":1354},[1002,82087,1269],{"class":1030},[1002,82089,82090],{"class":1004,"line":1360},[1002,82091,2804],{"class":1030},[1002,82093,82094],{"class":1004,"line":1366},[1002,82095,1051],{"emptyLinePlaceholder":1050},[1002,82097,82098,82100,82103,82105,82108,82110,82112,82114,82116,82118,82120],{"class":1004,"line":1946},[1002,82099,28448],{"class":1030},[1002,82101,82102],{"class":1026},"ext",[1002,82104,1031],{"class":1030},[1002,82106,82107],{"class":1034},"'onRequest'",[1002,82109,1251],{"class":1030},[1002,82111,6965],{"class":1015},[1002,82113,6513],{"class":1030},[1002,82115,4786],{"class":2378},[1002,82117,1251],{"class":1030},[1002,82119,81917],{"class":2378},[1002,82121,2382],{"class":1030},[1002,82123,82124],{"class":1004,"line":1956},[1002,82125,82126],{"class":1008}," \u002F\u002F Change all requests to '\u002Ftest'\n",[1002,82128,82129,82132,82135,82137,82139],{"class":1004,"line":1961},[1002,82130,82131],{"class":1030}," request.",[1002,82133,82134],{"class":1026},"setUrl",[1002,82136,1031],{"class":1030},[1002,82138,82044],{"class":1034},[1002,82140,1085],{"class":1030},[1002,82142,82143,82145,82148,82151],{"class":1004,"line":1971},[1002,82144,2687],{"class":1015},[1002,82146,82147],{"class":1030}," reply.",[1002,82149,82150],{"class":1026},"continue",[1002,82152,1428],{"class":1030},[1002,82154,82155],{"class":1004,"line":1980},[1002,82156,2804],{"class":1030},[925,82158,47770,82159,948],{},[933,82160,14815],{"href":82161,"rel":82162},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fhapi-intro",[937],[1579,82164,82165],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":82167},[82168,82173,82174,82175,82180],{"id":81651,"depth":1012,"text":81652,"children":82169},[82170,82171,82172],{"id":81655,"depth":1047,"text":81656},{"id":81675,"depth":1047,"text":81676},{"id":81682,"depth":1047,"text":81683},{"id":81689,"depth":1012,"text":81690},{"id":81728,"depth":1012,"text":81729},{"id":81949,"depth":1012,"text":81950,"children":82176},[82177,82178,82179],{"id":81953,"depth":1047,"text":81954},{"id":81964,"depth":1047,"text":81965},{"id":81971,"depth":1047,"text":81972},{"id":62423,"depth":1012,"text":62424},"2015-10-07","\u002Fimages\u002Fblog\u002Ffeatures\u002Fintroduction-to-hapi.jpg",{},{"title":465,"description":467},"blog\u002Fintroduction-to-hapi",[16,17,442],"kSVd5DrVyDBKM-AXYjiAGDKakIzXSLy6W0OShjxOvsA",{"id":82189,"title":252,"author":920,"body":82190,"date":82647,"description":254,"extension":1591,"image":82648,"meta":82649,"navigation":1050,"path":253,"seo":82650,"stem":82651,"tags":82652,"__hash__":82653},"blog\u002Fblog\u002Fes6-symbols.md",{"type":922,"value":82191,"toc":82640},[82192,82196,82199,82207,82217,82221,82224,82242,82251,82254,82260,82266,82313,82317,82320,82376,82379,82400,82404,82409,82485,82488,82491,82498,82590,82596,82637],[953,82193,82195],{"id":82194},"why-symbols","Why Symbols?",[925,82197,82198],{},"There are two key points to understand about symbols:",[1530,82200,82201,82204],{},[974,82202,82203],{},"A symbol is unique and immutable.",[974,82205,82206],{},"You can use symbols as identifiers when adding properties to an object.",[7100,82208,82210],{"title":82209,"type":23379},"Symbols are not private",[925,82211,82212,82213,82216],{},"Symbols are not private after all, because you can find them via reflection. Specifically, via the ",[941,82214,82215],{},"Object.getOwnPropertySymbols"," method and through proxies.",[953,82218,82220],{"id":82219},"the-symbol-function","The Symbol Function",[925,82222,82223],{},"Let’s start by creating a new symbol. Creating a new symbol is as easy as invoking Symbol as a function.",[993,82225,82227],{"className":995,"code":82226,"language":997,"meta":998,"style":998},"var secret = Symbol();\n",[941,82228,82229],{"__ignoreMap":998},[1002,82230,82231,82233,82236,82238,82240],{"class":1004,"line":1005},[1002,82232,18311],{"class":1015},[1002,82234,82235],{"class":1030}," secret ",[1002,82237,2393],{"class":1015},[1002,82239,31088],{"class":1026},[1002,82241,1428],{"class":1030},[925,82243,82244,82245,82247,82248,82250],{},"Note that there's no ",[941,82246,5654],{},". The ",[941,82249,5654],{}," operator will throw an error if you tried to use it.",[925,82252,82253],{},"For debugging purposes, you can give a description to the symbol:",[993,82255,82258],{"className":82256,"code":82257,"language":24241},[24239],"var secret = Symbol('this is a description for the secret');\n",[941,82259,82257],{"__ignoreMap":998},[925,82261,82262,82263,82265],{},"Symbols are ",[941,82264,51841],{}," like numbers or strings. But they are unique, unlike numbers and strings.",[993,82267,82269],{"className":995,"code":82268,"language":997,"meta":998,"style":998},"var s1 = Symbol();\nvar s2 = Symbol();\n\ns1 === s2; \u002F\u002F false\n",[941,82270,82271,82284,82297,82301],{"__ignoreMap":998},[1002,82272,82273,82275,82278,82280,82282],{"class":1004,"line":1005},[1002,82274,18311],{"class":1015},[1002,82276,82277],{"class":1030}," s1 ",[1002,82279,2393],{"class":1015},[1002,82281,31088],{"class":1026},[1002,82283,1428],{"class":1030},[1002,82285,82286,82288,82291,82293,82295],{"class":1004,"line":1012},[1002,82287,18311],{"class":1015},[1002,82289,82290],{"class":1030}," s2 ",[1002,82292,2393],{"class":1015},[1002,82294,31088],{"class":1026},[1002,82296,1428],{"class":1030},[1002,82298,82299],{"class":1004,"line":1047},[1002,82300,1051],{"emptyLinePlaceholder":1050},[1002,82302,82303,82306,82308,82311],{"class":1004,"line":1054},[1002,82304,82305],{"class":1030},"s1 ",[1002,82307,2892],{"class":1015},[1002,82309,82310],{"class":1030}," s2; ",[1002,82312,25986],{"class":1008},[953,82314,82316],{"id":82315},"symbols-as-keys","Symbols as keys",[925,82318,82319],{},"You can use symbols as keys into an object. In the following code we create one property using a string (\"lastName\"), and one with a symbol (the firstName symbol).",[993,82321,82323],{"className":995,"code":82322,"language":997,"meta":998,"style":998},"var firstName = Symbol();\n\nvar person = {\n lastName: 'A',\n [firstName]: 'Sean',\n};\n",[941,82324,82325,82338,82342,82353,82363,82372],{"__ignoreMap":998},[1002,82326,82327,82329,82332,82334,82336],{"class":1004,"line":1005},[1002,82328,18311],{"class":1015},[1002,82330,82331],{"class":1030}," firstName ",[1002,82333,2393],{"class":1015},[1002,82335,31088],{"class":1026},[1002,82337,1428],{"class":1030},[1002,82339,82340],{"class":1004,"line":1012},[1002,82341,1051],{"emptyLinePlaceholder":1050},[1002,82343,82344,82346,82349,82351],{"class":1004,"line":1047},[1002,82345,18311],{"class":1015},[1002,82347,82348],{"class":1030}," person ",[1002,82350,2393],{"class":1015},[1002,82352,1457],{"class":1030},[1002,82354,82355,82358,82361],{"class":1004,"line":1054},[1002,82356,82357],{"class":1030}," lastName: ",[1002,82359,82360],{"class":1034},"'A'",[1002,82362,1143],{"class":1030},[1002,82364,82365,82368,82370],{"class":1004,"line":1060},[1002,82366,82367],{"class":1030}," [firstName]: ",[1002,82369,23233],{"class":1034},[1002,82371,1143],{"class":1030},[1002,82373,82374],{"class":1004,"line":1272},[1002,82375,1517],{"class":1030},[925,82377,82378],{},"This will help us to create unique keys, where in an object, keys cannot be duplicated.",[7100,82380,82382],{"title":82381,"type":23379},"etrieving Symbols",[925,82383,82384,82385,1251,82388,82391,82392,82395,82396,82399],{},"Keys created using symbols, are not going to appear when using ",[941,82386,82387],{},"Object.getOwnPropertyNames",[941,82389,82390],{},"for..in"," loops, or ",[941,82393,82394],{},"JSON.stringify",".\nYou will have to use ",[941,82397,82398],{},"getOwnPropertySymbols"," instead.",[953,82401,82403],{"id":82402},"retrieving-symbols","Retrieving Symbols",[925,82405,82406,82407,1813],{},"Let's look at an example where symbols are being retrieved using ",[941,82408,82387],{},[993,82410,82412],{"className":995,"code":82411,"language":997,"meta":998,"style":998},"var firstName = Symbol();\n\nvar person = {\n lastName: 'A',\n [firstName]: 'Sean',\n};\n\nvar symbol0 = Object.getOwnPropertySymbols(person)[0];\n",[941,82413,82414,82426,82430,82440,82448,82456,82460,82464],{"__ignoreMap":998},[1002,82415,82416,82418,82420,82422,82424],{"class":1004,"line":1005},[1002,82417,18311],{"class":1015},[1002,82419,82331],{"class":1030},[1002,82421,2393],{"class":1015},[1002,82423,31088],{"class":1026},[1002,82425,1428],{"class":1030},[1002,82427,82428],{"class":1004,"line":1012},[1002,82429,1051],{"emptyLinePlaceholder":1050},[1002,82431,82432,82434,82436,82438],{"class":1004,"line":1047},[1002,82433,18311],{"class":1015},[1002,82435,82348],{"class":1030},[1002,82437,2393],{"class":1015},[1002,82439,1457],{"class":1030},[1002,82441,82442,82444,82446],{"class":1004,"line":1054},[1002,82443,82357],{"class":1030},[1002,82445,82360],{"class":1034},[1002,82447,1143],{"class":1030},[1002,82449,82450,82452,82454],{"class":1004,"line":1060},[1002,82451,82367],{"class":1030},[1002,82453,23233],{"class":1034},[1002,82455,1143],{"class":1030},[1002,82457,82458],{"class":1004,"line":1272},[1002,82459,1517],{"class":1030},[1002,82461,82462],{"class":1004,"line":1348},[1002,82463,1051],{"emptyLinePlaceholder":1050},[1002,82465,82466,82468,82471,82473,82476,82478,82481,82483],{"class":1004,"line":1354},[1002,82467,18311],{"class":1015},[1002,82469,82470],{"class":1030}," symbol0 ",[1002,82472,2393],{"class":1015},[1002,82474,82475],{"class":1030}," Object.",[1002,82477,82398],{"class":1026},[1002,82479,82480],{"class":1030},"(person)[",[1002,82482,5867],{"class":1019},[1002,82484,6754],{"class":1030},[953,82486,82487],{"id":6595},"@@iterator",[925,82489,82490],{},"You can use symbols to make new iterable objects.",[925,82492,82493,82494,82497],{},"The iterator property attached to the Symbol function is what’s called a ",[941,82495,82496],{},"well-known"," symbol. The following code will check to see if strings, arrays, and numbers are iterable by looking for this well-known iterator method.",[993,82499,82501],{"className":995,"code":82500,"language":997,"meta":998,"style":998},"var sum = 0;\nvr numbers = [1,2,3,4];\n\nfor(let n of numbers) {\n sum += n;\n}\n\nsum === 10; \u002F\u002F true\n",[941,82502,82503,82516,82541,82545,82560,82569,82573,82577],{"__ignoreMap":998},[1002,82504,82505,82507,82510,82512,82514],{"class":1004,"line":1005},[1002,82506,18311],{"class":1015},[1002,82508,82509],{"class":1030}," sum ",[1002,82511,2393],{"class":1015},[1002,82513,4910],{"class":1019},[1002,82515,1407],{"class":1030},[1002,82517,82518,82521,82523,82525,82527,82529,82531,82533,82535,82537,82539],{"class":1004,"line":1012},[1002,82519,82520],{"class":1030},"vr numbers ",[1002,82522,2393],{"class":1015},[1002,82524,1897],{"class":1030},[1002,82526,6211],{"class":1019},[1002,82528,15314],{"class":1030},[1002,82530,5681],{"class":1019},[1002,82532,15314],{"class":1030},[1002,82534,2796],{"class":1019},[1002,82536,15314],{"class":1030},[1002,82538,3837],{"class":1019},[1002,82540,6754],{"class":1030},[1002,82542,82543],{"class":1004,"line":1047},[1002,82544,1051],{"emptyLinePlaceholder":1050},[1002,82546,82547,82549,82551,82553,82555,82557],{"class":1004,"line":1054},[1002,82548,6510],{"class":1015},[1002,82550,1031],{"class":1030},[1002,82552,6516],{"class":1015},[1002,82554,39192],{"class":1030},[1002,82556,39708],{"class":1015},[1002,82558,82559],{"class":1030}," numbers) {\n",[1002,82561,82562,82565,82567],{"class":1004,"line":1060},[1002,82563,82564],{"class":1030}," sum ",[1002,82566,6084],{"class":1015},[1002,82568,39197],{"class":1030},[1002,82570,82571],{"class":1004,"line":1272},[1002,82572,1170],{"class":1030},[1002,82574,82575],{"class":1004,"line":1348},[1002,82576,1051],{"emptyLinePlaceholder":1050},[1002,82578,82579,82582,82584,82586,82588],{"class":1004,"line":1354},[1002,82580,82581],{"class":1030},"sum ",[1002,82583,2892],{"class":1015},[1002,82585,8970],{"class":1019},[1002,82587,17938],{"class":1030},[1002,82589,2877],{"class":1008},[925,82591,3898,82592,82595],{},[941,82593,82594],{},"for..of"," is an iterator method. Let's have a look what really happens behind the scenes:",[993,82597,82599],{"className":995,"code":82598,"language":997,"meta":998,"style":998},"...\nlet iterator = numbers[Symbol.iterator]();\nlet next = iterator.next();\n...\n",[941,82600,82601,82605,82617,82633],{"__ignoreMap":998},[1002,82602,82603],{"class":1004,"line":1005},[1002,82604,48279],{"class":1015},[1002,82606,82607,82609,82612,82614],{"class":1004,"line":1012},[1002,82608,6516],{"class":1015},[1002,82610,82611],{"class":1030}," iterator ",[1002,82613,2393],{"class":1015},[1002,82615,82616],{"class":1030}," numbers[Symbol.iterator]();\n",[1002,82618,82619,82621,82624,82626,82629,82631],{"class":1004,"line":1047},[1002,82620,6516],{"class":1015},[1002,82622,82623],{"class":1030}," next ",[1002,82625,2393],{"class":1015},[1002,82627,82628],{"class":1030}," iterator.",[1002,82630,6623],{"class":1026},[1002,82632,1428],{"class":1030},[1002,82634,82635],{"class":1004,"line":1054},[1002,82636,48279],{"class":1015},[1579,82638,82639],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":82641},[82642,82643,82644,82645,82646],{"id":82194,"depth":1012,"text":82195},{"id":82219,"depth":1012,"text":82220},{"id":82315,"depth":1012,"text":82316},{"id":82402,"depth":1012,"text":82403},{"id":6595,"depth":1012,"text":82487},"2015-09-14","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-symbols.jpg",{},{"title":252,"description":254},"blog\u002Fes6-symbols",[16,17],"Ve9JcPUpW8bXR_s4d7puif68wiwZB-OpBIJxYGllxok",{"id":82655,"title":672,"author":920,"body":82656,"date":83708,"description":674,"extension":1591,"image":83709,"meta":83710,"navigation":1050,"path":673,"seo":83711,"stem":83712,"tags":83713,"__hash__":83714},"blog\u002Fblog\u002Freact-es6.md",{"type":922,"value":82657,"toc":83699},[82658,82661,82695,82699,82705,82708,82718,82720,82723,82729,82731,82734,82744,82748,82799,82803,82847,82850,82853,82856,82860,82990,82994,83105,83108,83116,83120,83188,83198,83202,83262,83266,83269,83273,83360,83363,83367,83439,83443,83454,83458,83595,83604,83646,83657,83696],[925,82659,82660],{},"Let's look at some of these new features:",[1530,82662,82663,82665,82668,82671,82674,82677,82680,82683,82686,82689,82692],{},[974,82664,35577],{},[974,82666,82667],{},"Enhanced Object Literals",[974,82669,82670],{},"Block-scoped binding constructs (let + const)",[974,82672,82673],{},"Property Initializers",[974,82675,82676],{},"Arrow Functions",[974,82678,82679],{},"Template Strings",[974,82681,82682],{},"Spread Attributes",[974,82684,82685],{},"Desconstructing Attributes",[974,82687,82688],{},"Generators",[974,82690,82691],{},"Data Structures (Map, Set, WeakMap, WeakSet)",[974,82693,82694],{},"...and many more",[953,82696,82698],{"id":82697},"transpilers","Transpilers",[925,82700,82701,82702,82704],{},"We can use ES6 with ",[941,82703,82697],{}," to convert the source code into ES5, so that most of the browsers can still execute JavaScript source code.",[925,82706,82707],{},"Here are few popular transpilers:",[1530,82709,82710,82713,82716],{},[974,82711,82712],{},"Traceur",[974,82714,82715],{},"JSTransform (depreciated)",[974,82717,33021],{},[953,82719,33021],{"id":33020},[925,82721,82722],{},"Babel was created by Sebastian McKenzie at the fall of 2014.",[925,82724,82725,82726,948],{},"Babel supports JSX, ES6 and ES7. It is widely used including ",[1107,82727,82728],{},"Facebook",[953,82730,35577],{"id":77886},[925,82732,82733],{},"ES6 classes provide you with a concise way of writing React components:",[925,82735,82736,82737,82740,82741],{},"Instead of using the ",[1107,82738,82739],{},"React.createClass"," method to define a component, we can define a bonafide ES6 class that extends ",[1107,82742,82743],{},"React.Component",[925,82745,82746,1813],{},[1107,82747,65873],{},[993,82749,82751],{"className":995,"code":82750,"language":997,"meta":998,"style":998},"var Photo = React.createClass({\n handleDoubleTap: function(e) { … },\n render: function() { … },\n});\n",[941,82752,82753,82768,82784,82795],{"__ignoreMap":998},[1002,82754,82755,82757,82760,82762,82764,82766],{"class":1004,"line":1005},[1002,82756,18311],{"class":1015},[1002,82758,82759],{"class":1030}," Photo ",[1002,82761,2393],{"class":1015},[1002,82763,26711],{"class":1030},[1002,82765,65915],{"class":1026},[1002,82767,2756],{"class":1030},[1002,82769,82770,82773,82775,82777,82779,82781],{"class":1004,"line":1012},[1002,82771,82772],{"class":1026}," handleDoubleTap",[1002,82774,1137],{"class":1030},[1002,82776,6965],{"class":1015},[1002,82778,1031],{"class":1030},[1002,82780,27262],{"class":2378},[1002,82782,82783],{"class":1030},") { … },\n",[1002,82785,82786,82788,82790,82792],{"class":1004,"line":1047},[1002,82787,20201],{"class":1026},[1002,82789,1137],{"class":1030},[1002,82791,6965],{"class":1015},[1002,82793,82794],{"class":1030},"() { … },\n",[1002,82796,82797],{"class":1004,"line":1054},[1002,82798,2804],{"class":1030},[925,82800,82801,1813],{},[1107,82802,65973],{},[993,82804,82806],{"className":995,"code":82805,"language":997,"meta":998,"style":998},"class Photo extends React.Component {\n handleDoubleTap(e) { … }\n render() { … }\n}\n",[941,82807,82808,82825,82836,82843],{"__ignoreMap":998},[1002,82809,82810,82812,82815,82817,82819,82821,82823],{"class":1004,"line":1005},[1002,82811,2363],{"class":1015},[1002,82813,82814],{"class":1026}," Photo",[1002,82816,3014],{"class":1015},[1002,82818,20112],{"class":1026},[1002,82820,948],{"class":1030},[1002,82822,20117],{"class":1026},[1002,82824,1457],{"class":1030},[1002,82826,82827,82829,82831,82833],{"class":1004,"line":1012},[1002,82828,82772],{"class":1026},[1002,82830,1031],{"class":1030},[1002,82832,27262],{"class":2378},[1002,82834,82835],{"class":1030},") { … }\n",[1002,82837,82838,82840],{"class":1004,"line":1047},[1002,82839,20201],{"class":1026},[1002,82841,82842],{"class":1030},"() { … }\n",[1002,82844,82845],{"class":1004,"line":1054},[1002,82846,1170],{"class":1030},[953,82848,82673],{"id":82849},"property-initializers",[925,82851,82852],{},"In ES6 property types and defaults are static properties of its class.",[925,82854,82855],{},"Component's initial state can be defined using ES6.",[925,82857,82858,1813],{},[1107,82859,65873],{},[993,82861,82863],{"className":995,"code":82862,"language":997,"meta":998,"style":998},"var Video = React.createClass({\n getDefaultProps: function () {\n return {\n autoPlay: false,\n maxLoops: 10,\n };\n },\n getInitialState: function () {\n return {\n loopsRemaining: this.props.maxLoops,\n };\n },\n propTypes: {\n autoPlay: React.PropTypes.bool.isRequired,\n maxLoops: React.PropTypes.number.isRequired,\n posterFrameSrc: React.PropTypes.string.isRequired,\n videoSrc: React.PropTypes.string.isRequired,\n },\n});\n",[941,82864,82865,82880,82891,82897,82906,82915,82919,82923,82933,82939,82949,82953,82957,82962,82967,82972,82977,82982,82986],{"__ignoreMap":998},[1002,82866,82867,82869,82872,82874,82876,82878],{"class":1004,"line":1005},[1002,82868,18311],{"class":1015},[1002,82870,82871],{"class":1030}," Video ",[1002,82873,2393],{"class":1015},[1002,82875,26711],{"class":1030},[1002,82877,65915],{"class":1026},[1002,82879,2756],{"class":1030},[1002,82881,82882,82885,82887,82889],{"class":1004,"line":1012},[1002,82883,82884],{"class":1026}," getDefaultProps",[1002,82886,1137],{"class":1030},[1002,82888,6965],{"class":1015},[1002,82890,9772],{"class":1030},[1002,82892,82893,82895],{"class":1004,"line":1047},[1002,82894,2687],{"class":1015},[1002,82896,1457],{"class":1030},[1002,82898,82899,82902,82904],{"class":1004,"line":1054},[1002,82900,82901],{"class":1030}," autoPlay: ",[1002,82903,19341],{"class":1019},[1002,82905,1143],{"class":1030},[1002,82907,82908,82911,82913],{"class":1004,"line":1060},[1002,82909,82910],{"class":1030}," maxLoops: ",[1002,82912,4818],{"class":1019},[1002,82914,1143],{"class":1030},[1002,82916,82917],{"class":1004,"line":1272},[1002,82918,10900],{"class":1030},[1002,82920,82921],{"class":1004,"line":1348},[1002,82922,1502],{"class":1030},[1002,82924,82925,82927,82929,82931],{"class":1004,"line":1354},[1002,82926,79227],{"class":1026},[1002,82928,1137],{"class":1030},[1002,82930,6965],{"class":1015},[1002,82932,9772],{"class":1030},[1002,82934,82935,82937],{"class":1004,"line":1360},[1002,82936,2687],{"class":1015},[1002,82938,1457],{"class":1030},[1002,82940,82941,82944,82946],{"class":1004,"line":1366},[1002,82942,82943],{"class":1030}," loopsRemaining: ",[1002,82945,3455],{"class":1019},[1002,82947,82948],{"class":1030},".props.maxLoops,\n",[1002,82950,82951],{"class":1004,"line":1946},[1002,82952,10900],{"class":1030},[1002,82954,82955],{"class":1004,"line":1956},[1002,82956,1502],{"class":1030},[1002,82958,82959],{"class":1004,"line":1961},[1002,82960,82961],{"class":1030}," propTypes: {\n",[1002,82963,82964],{"class":1004,"line":1971},[1002,82965,82966],{"class":1030}," autoPlay: React.PropTypes.bool.isRequired,\n",[1002,82968,82969],{"class":1004,"line":1980},[1002,82970,82971],{"class":1030}," maxLoops: React.PropTypes.number.isRequired,\n",[1002,82973,82974],{"class":1004,"line":1985},[1002,82975,82976],{"class":1030}," posterFrameSrc: React.PropTypes.string.isRequired,\n",[1002,82978,82979],{"class":1004,"line":1995},[1002,82980,82981],{"class":1030}," videoSrc: React.PropTypes.string.isRequired,\n",[1002,82983,82984],{"class":1004,"line":2006},[1002,82985,1502],{"class":1030},[1002,82987,82988],{"class":1004,"line":2011},[1002,82989,2804],{"class":1030},[925,82991,82992,1813],{},[1107,82993,65973],{},[993,82995,82997],{"className":995,"code":82996,"language":997,"meta":998,"style":998},"class Video extends React.Component {\n static defaultProps = {\n autoPlay: false,\n maxLoops: 10,\n };\n static propTypes = {\n autoPlay: React.PropTypes.bool.isRequired,\n maxLoops: React.PropTypes.number.isRequired,\n posterFrameSrc: React.PropTypes.string.isRequired,\n videoSrc: React.PropTypes.string.isRequired,\n };\n state = {\n loopsRemaining: this.props.maxLoops,\n };\n}\n",[941,82998,82999,83016,83027,83036,83045,83049,83060,83064,83068,83072,83076,83080,83088,83097,83101],{"__ignoreMap":998},[1002,83000,83001,83003,83006,83008,83010,83012,83014],{"class":1004,"line":1005},[1002,83002,2363],{"class":1015},[1002,83004,83005],{"class":1026}," Video",[1002,83007,3014],{"class":1015},[1002,83009,20112],{"class":1026},[1002,83011,948],{"class":1030},[1002,83013,20117],{"class":1026},[1002,83015,1457],{"class":1030},[1002,83017,83018,83020,83023,83025],{"class":1004,"line":1012},[1002,83019,13506],{"class":1015},[1002,83021,83022],{"class":2378}," defaultProps",[1002,83024,1023],{"class":1015},[1002,83026,1457],{"class":1030},[1002,83028,83029,83032,83034],{"class":1004,"line":1047},[1002,83030,83031],{"class":1030}," autoPlay: ",[1002,83033,19341],{"class":1019},[1002,83035,1143],{"class":1030},[1002,83037,83038,83041,83043],{"class":1004,"line":1054},[1002,83039,83040],{"class":1030}," maxLoops: ",[1002,83042,4818],{"class":1019},[1002,83044,1143],{"class":1030},[1002,83046,83047],{"class":1004,"line":1060},[1002,83048,15113],{"class":1030},[1002,83050,83051,83053,83056,83058],{"class":1004,"line":1272},[1002,83052,13506],{"class":1015},[1002,83054,83055],{"class":2378}," propTypes",[1002,83057,1023],{"class":1015},[1002,83059,1457],{"class":1030},[1002,83061,83062],{"class":1004,"line":1348},[1002,83063,82966],{"class":1030},[1002,83065,83066],{"class":1004,"line":1354},[1002,83067,82971],{"class":1030},[1002,83069,83070],{"class":1004,"line":1360},[1002,83071,82976],{"class":1030},[1002,83073,83074],{"class":1004,"line":1366},[1002,83075,82981],{"class":1030},[1002,83077,83078],{"class":1004,"line":1946},[1002,83079,15113],{"class":1030},[1002,83081,83082,83084,83086],{"class":1004,"line":1956},[1002,83083,30308],{"class":2378},[1002,83085,1023],{"class":1015},[1002,83087,1457],{"class":1030},[1002,83089,83090,83093,83095],{"class":1004,"line":1961},[1002,83091,83092],{"class":1030}," loopsRemaining: ",[1002,83094,3455],{"class":1019},[1002,83096,82948],{"class":1030},[1002,83098,83099],{"class":1004,"line":1971},[1002,83100,15113],{"class":1030},[1002,83102,83103],{"class":1004,"line":1980},[1002,83104,1170],{"class":1030},[953,83106,82676],{"id":83107},"arrow-functions",[925,83109,3898,83110,83112,83113,83115],{},[1107,83111,82739],{}," method used to perform some extra binding work on your component's instance methods to make sure that, inside them, the ",[1107,83114,3455],{}," keyword would refer to the instance of the component in question.",[925,83117,83118,1813],{},[1107,83119,65873],{},[993,83121,83123],{"className":995,"code":83122,"language":997,"meta":998,"style":998},"\u002F\u002F Autobinding, brought to you by React.createClass\nvar PostInfo = React.createClass({\n handleOptionsButtonClick: function (e) {\n \u002F\u002F Here, 'this' refers to the component instance.\n this.setState({ showOptionsModal: true });\n },\n});\n",[941,83124,83125,83130,83145,83160,83165,83180,83184],{"__ignoreMap":998},[1002,83126,83127],{"class":1004,"line":1005},[1002,83128,83129],{"class":1008},"\u002F\u002F Autobinding, brought to you by React.createClass\n",[1002,83131,83132,83134,83137,83139,83141,83143],{"class":1004,"line":1012},[1002,83133,18311],{"class":1015},[1002,83135,83136],{"class":1030}," PostInfo ",[1002,83138,2393],{"class":1015},[1002,83140,26711],{"class":1030},[1002,83142,65915],{"class":1026},[1002,83144,2756],{"class":1030},[1002,83146,83147,83150,83152,83154,83156,83158],{"class":1004,"line":1047},[1002,83148,83149],{"class":1026}," handleOptionsButtonClick",[1002,83151,1137],{"class":1030},[1002,83153,6965],{"class":1015},[1002,83155,6513],{"class":1030},[1002,83157,27262],{"class":2378},[1002,83159,2382],{"class":1030},[1002,83161,83162],{"class":1004,"line":1054},[1002,83163,83164],{"class":1008}," \u002F\u002F Here, 'this' refers to the component instance.\n",[1002,83166,83167,83169,83171,83173,83176,83178],{"class":1004,"line":1060},[1002,83168,2387],{"class":1019},[1002,83170,948],{"class":1030},[1002,83172,26816],{"class":1026},[1002,83174,83175],{"class":1030},"({ showOptionsModal: ",[1002,83177,17397],{"class":1019},[1002,83179,28417],{"class":1030},[1002,83181,83182],{"class":1004,"line":1272},[1002,83183,1502],{"class":1030},[1002,83185,83186],{"class":1004,"line":1348},[1002,83187,2804],{"class":1030},[925,83189,83190,83191,2034,83194,83197],{},"By combining two ES6 features – ",[941,83192,83193],{},"arrow functions",[941,83195,83196],{},"property initializers"," – opt-in binding to the component instance becomes a easier:",[925,83199,83200,1813],{},[1107,83201,65973],{},[993,83203,83205],{"className":995,"code":83204,"language":997,"meta":998,"style":998},"class PostInfo extends React.Component {\n handleOptionsButtonClick = (e) => {\n this.setState({ showOptionsModal: true });\n };\n}\n",[941,83206,83207,83224,83240,83254,83258],{"__ignoreMap":998},[1002,83208,83209,83211,83214,83216,83218,83220,83222],{"class":1004,"line":1005},[1002,83210,2363],{"class":1015},[1002,83212,83213],{"class":1026}," PostInfo",[1002,83215,3014],{"class":1015},[1002,83217,20112],{"class":1026},[1002,83219,948],{"class":1030},[1002,83221,20117],{"class":1026},[1002,83223,1457],{"class":1030},[1002,83225,83226,83228,83230,83232,83234,83236,83238],{"class":1004,"line":1012},[1002,83227,83149],{"class":1026},[1002,83229,1023],{"class":1015},[1002,83231,6513],{"class":1030},[1002,83233,27262],{"class":2378},[1002,83235,5876],{"class":1030},[1002,83237,15497],{"class":1015},[1002,83239,1457],{"class":1030},[1002,83241,83242,83244,83246,83248,83250,83252],{"class":1004,"line":1047},[1002,83243,2387],{"class":1019},[1002,83245,948],{"class":1030},[1002,83247,26816],{"class":1026},[1002,83249,83175],{"class":1030},[1002,83251,17397],{"class":1019},[1002,83253,28417],{"class":1030},[1002,83255,83256],{"class":1004,"line":1054},[1002,83257,15113],{"class":1030},[1002,83259,83260],{"class":1004,"line":1060},[1002,83261,1170],{"class":1030},[953,83263,83265],{"id":83264},"dynamic-property-names-template-strings","Dynamic property names & template strings",[925,83267,83268],{},"One of the enhancements to object literals include the ability to assign to a derived property name. We might have originally done something like this to set a piece of state:",[925,83270,83271,1813],{},[1107,83272,65873],{},[993,83274,83276],{"className":995,"code":83275,"language":997,"meta":998,"style":998},"var Form = React.createClass({\n onChange: function (inputName, e) {\n var stateToSet = {};\n stateToSet[inputName + 'Value'] = e.target.value;\n this.setState(stateToSet);\n },\n});\n",[941,83277,83278,83293,83313,83324,83341,83352,83356],{"__ignoreMap":998},[1002,83279,83280,83282,83285,83287,83289,83291],{"class":1004,"line":1005},[1002,83281,18311],{"class":1015},[1002,83283,83284],{"class":1030}," Form ",[1002,83286,2393],{"class":1015},[1002,83288,26711],{"class":1030},[1002,83290,65915],{"class":1026},[1002,83292,2756],{"class":1030},[1002,83294,83295,83298,83300,83302,83304,83307,83309,83311],{"class":1004,"line":1012},[1002,83296,83297],{"class":1026}," onChange",[1002,83299,1137],{"class":1030},[1002,83301,6965],{"class":1015},[1002,83303,6513],{"class":1030},[1002,83305,83306],{"class":2378},"inputName",[1002,83308,1251],{"class":1030},[1002,83310,27262],{"class":2378},[1002,83312,2382],{"class":1030},[1002,83314,83315,83317,83320,83322],{"class":1004,"line":1047},[1002,83316,51906],{"class":1015},[1002,83318,83319],{"class":1030}," stateToSet ",[1002,83321,2393],{"class":1015},[1002,83323,7217],{"class":1030},[1002,83325,83326,83329,83331,83334,83336,83338],{"class":1004,"line":1054},[1002,83327,83328],{"class":1030}," stateToSet[inputName ",[1002,83330,5064],{"class":1015},[1002,83332,83333],{"class":1034}," 'Value'",[1002,83335,18338],{"class":1030},[1002,83337,2393],{"class":1015},[1002,83339,83340],{"class":1030}," e.target.value;\n",[1002,83342,83343,83345,83347,83349],{"class":1004,"line":1060},[1002,83344,2387],{"class":1019},[1002,83346,948],{"class":1030},[1002,83348,26816],{"class":1026},[1002,83350,83351],{"class":1030},"(stateToSet);\n",[1002,83353,83354],{"class":1004,"line":1272},[1002,83355,1502],{"class":1030},[1002,83357,83358],{"class":1004,"line":1348},[1002,83359,2804],{"class":1030},[925,83361,83362],{},"Now, we have the ability to construct objects whose property names are determined by a JavaScript expression at runtime. Here, we use a template string to determine which property to set on state:",[925,83364,83365,1813],{},[1107,83366,65973],{},[993,83368,83370],{"className":995,"code":83369,"language":997,"meta":998,"style":998},"class Form extends React.Component {\n onChange(inputName, e) {\n this.setState({\n [`${inputName}Value`]: e.target.value,\n });\n }\n}\n",[941,83371,83372,83388,83402,83412,83427,83431,83435],{"__ignoreMap":998},[1002,83373,83374,83376,83378,83380,83382,83384,83386],{"class":1004,"line":1005},[1002,83375,2363],{"class":1015},[1002,83377,29054],{"class":1026},[1002,83379,3014],{"class":1015},[1002,83381,20112],{"class":1026},[1002,83383,948],{"class":1030},[1002,83385,20117],{"class":1026},[1002,83387,1457],{"class":1030},[1002,83389,83390,83392,83394,83396,83398,83400],{"class":1004,"line":1012},[1002,83391,83297],{"class":1026},[1002,83393,1031],{"class":1030},[1002,83395,83306],{"class":2378},[1002,83397,1251],{"class":1030},[1002,83399,27262],{"class":2378},[1002,83401,2382],{"class":1030},[1002,83403,83404,83406,83408,83410],{"class":1004,"line":1047},[1002,83405,2387],{"class":1019},[1002,83407,948],{"class":1030},[1002,83409,26816],{"class":1026},[1002,83411,2756],{"class":1030},[1002,83413,83414,83416,83419,83421,83424],{"class":1004,"line":1054},[1002,83415,57693],{"class":1030},[1002,83417,83418],{"class":1034},"`${",[1002,83420,83306],{"class":1030},[1002,83422,83423],{"class":1034},"}Value`",[1002,83425,83426],{"class":1030},"]: e.target.value,\n",[1002,83428,83429],{"class":1004,"line":1060},[1002,83430,8353],{"class":1030},[1002,83432,83433],{"class":1004,"line":1272},[1002,83434,1269],{"class":1030},[1002,83436,83437],{"class":1004,"line":1348},[1002,83438,1170],{"class":1030},[953,83440,83442],{"id":83441},"destructuring-spread-attributes","Destructuring & spread attributes",[925,83444,83445,83446,83449,83450,83453],{},"Often when composing components, we might want to pass down most of a parent component's props to a child component, but not all of them. In combining ES6+ ",[941,83447,83448],{},"destructuring"," with JSX ",[941,83451,83452],{},"spread attributes",", this becomes easier:",[925,83455,83456,1813],{},[1107,83457,65973],{},[993,83459,83461],{"className":995,"code":83460,"language":997,"meta":998,"style":998},"class AutoloadingPostsGrid extends React.Component {\n render() {\n var {\n className,\n \u002F\u002F contains all properties of this.props except for className\n ...others\n } = this.props;\n return (\n \u003Cdiv className={className}>\n \u003CPostsGrid {...others} \u002F>\n \u003Cbutton onClick={this.handleLoadMoreClick}>Load more\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n }\n}\n",[941,83462,83463,83480,83486,83492,83497,83502,83510,83521,83527,83540,83554,83575,83583,83587,83591],{"__ignoreMap":998},[1002,83464,83465,83467,83470,83472,83474,83476,83478],{"class":1004,"line":1005},[1002,83466,2363],{"class":1015},[1002,83468,83469],{"class":1026}," AutoloadingPostsGrid",[1002,83471,3014],{"class":1015},[1002,83473,20112],{"class":1026},[1002,83475,948],{"class":1030},[1002,83477,20117],{"class":1026},[1002,83479,1457],{"class":1030},[1002,83481,83482,83484],{"class":1004,"line":1012},[1002,83483,20201],{"class":1026},[1002,83485,3025],{"class":1030},[1002,83487,83488,83490],{"class":1004,"line":1047},[1002,83489,51906],{"class":1015},[1002,83491,1457],{"class":1030},[1002,83493,83494],{"class":1004,"line":1054},[1002,83495,83496],{"class":1030}," className,\n",[1002,83498,83499],{"class":1004,"line":1060},[1002,83500,83501],{"class":1008}," \u002F\u002F contains all properties of this.props except for className\n",[1002,83503,83504,83507],{"class":1004,"line":1272},[1002,83505,83506],{"class":1015}," ...",[1002,83508,83509],{"class":1030},"others\n",[1002,83511,83512,83514,83516,83518],{"class":1004,"line":1348},[1002,83513,6057],{"class":1030},[1002,83515,2393],{"class":1015},[1002,83517,2693],{"class":1019},[1002,83519,83520],{"class":1030},".props;\n",[1002,83522,83523,83525],{"class":1004,"line":1354},[1002,83524,2687],{"class":1015},[1002,83526,15692],{"class":1030},[1002,83528,83529,83531,83533,83535,83537],{"class":1004,"line":1360},[1002,83530,19579],{"class":1030},[1002,83532,19650],{"class":15711},[1002,83534,26915],{"class":1026},[1002,83536,2393],{"class":1015},[1002,83538,83539],{"class":1030},"{className}>\n",[1002,83541,83542,83544,83547,83549,83551],{"class":1004,"line":1366},[1002,83543,15708],{"class":1030},[1002,83545,83546],{"class":1019},"PostsGrid",[1002,83548,19222],{"class":1030},[1002,83550,17625],{"class":1015},[1002,83552,83553],{"class":1030},"others} \u002F>\n",[1002,83555,83556,83558,83560,83562,83564,83566,83568,83571,83573],{"class":1004,"line":1946},[1002,83557,15708],{"class":1030},[1002,83559,16365],{"class":15711},[1002,83561,16691],{"class":1026},[1002,83563,2393],{"class":1015},[1002,83565,22192],{"class":1030},[1002,83567,3455],{"class":1019},[1002,83569,83570],{"class":1030},".handleLoadMoreClick}>Load more\u003C\u002F",[1002,83572,16365],{"class":15711},[1002,83574,15703],{"class":1030},[1002,83576,83577,83579,83581],{"class":1004,"line":1956},[1002,83578,21184],{"class":1030},[1002,83580,19650],{"class":15711},[1002,83582,15703],{"class":1030},[1002,83584,83585],{"class":1004,"line":1961},[1002,83586,22541],{"class":1030},[1002,83588,83589],{"class":1004,"line":1971},[1002,83590,1269],{"class":1030},[1002,83592,83593],{"class":1004,"line":1980},[1002,83594,1170],{"class":1030},[925,83596,83597,83598,83600,83601,1813],{},"We can combine JSX spread attributes with regular attributes too, taking advantage of a simple precedence rule to implement overrides and defaults. This element will acquire the className “override” even if there exists a ",[1107,83599,37151],{}," property in ",[1107,83602,83603],{},"this.props",[993,83605,83607],{"className":995,"code":83606,"language":997,"meta":998,"style":998},"\u003Cdiv {...this.props} className=\"override\">\n …\n\u003C\u002Fdiv>\n",[941,83608,83609,83633,83638],{"__ignoreMap":998},[1002,83610,83611,83613,83615,83617,83619,83621,83624,83626,83628,83631],{"class":1004,"line":1005},[1002,83612,6539],{"class":1030},[1002,83614,19650],{"class":15711},[1002,83616,19222],{"class":1030},[1002,83618,17625],{"class":1015},[1002,83620,3455],{"class":1019},[1002,83622,83623],{"class":1030},".props} ",[1002,83625,37151],{"class":1026},[1002,83627,2393],{"class":1015},[1002,83629,83630],{"class":1034},"\"override\"",[1002,83632,15703],{"class":1030},[1002,83634,83635],{"class":1004,"line":1012},[1002,83636,83637],{"class":1030}," …\n",[1002,83639,83640,83642,83644],{"class":1004,"line":1047},[1002,83641,22437],{"class":1030},[1002,83643,19650],{"class":15711},[1002,83645,15703],{"class":1030},[925,83647,83648,83649,83651,83652,83600,83654,83656],{},"This element will regularly have the ",[941,83650,37151],{}," “base” unless there exists a ",[941,83653,37151],{},[1107,83655,83603],{}," to override it:",[993,83658,83660],{"className":995,"code":83659,"language":997,"meta":998,"style":998},"\u003Cdiv className=\"base\" {...this.props}>\n …\n\u003C\u002Fdiv>\n",[941,83661,83662,83684,83688],{"__ignoreMap":998},[1002,83663,83664,83666,83668,83670,83672,83675,83677,83679,83681],{"class":1004,"line":1005},[1002,83665,6539],{"class":1030},[1002,83667,19650],{"class":15711},[1002,83669,26915],{"class":1026},[1002,83671,2393],{"class":1015},[1002,83673,83674],{"class":1034},"\"base\"",[1002,83676,19222],{"class":1030},[1002,83678,17625],{"class":1015},[1002,83680,3455],{"class":1019},[1002,83682,83683],{"class":1030},".props}>\n",[1002,83685,83686],{"class":1004,"line":1012},[1002,83687,83637],{"class":1030},[1002,83689,83690,83692,83694],{"class":1004,"line":1047},[1002,83691,22437],{"class":1030},[1002,83693,19650],{"class":15711},[1002,83695,15703],{"class":1030},[1579,83697,83698],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":83700},[83701,83702,83703,83704,83705,83706,83707],{"id":82697,"depth":1012,"text":82698},{"id":33020,"depth":1012,"text":33021},{"id":77886,"depth":1012,"text":35577},{"id":82849,"depth":1012,"text":82673},{"id":83107,"depth":1012,"text":82676},{"id":83264,"depth":1012,"text":83265},{"id":83441,"depth":1012,"text":83442},"2015-09-13","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-es6.jpg",{},{"title":672,"description":674},"blog\u002Freact-es6",[16,17],"HOHfvDRvOkhYVlHa6LZjjkfEl1S_xw3epIjPtY_0vs8",{"id":83716,"title":257,"author":920,"body":83717,"date":84151,"description":259,"extension":1591,"image":84152,"meta":84153,"navigation":1050,"path":258,"seo":84154,"stem":84155,"tags":84156,"__hash__":84157},"blog\u002Fblog\u002Fes6-template-strings.md",{"type":922,"value":83718,"toc":84143},[83719,83723,83733,83750,83753,83755,83762,83781,83795,83797,83804,83854,83857,83914,83918,83921,83949,83952,83975,83980,83984,83987,84043,84046,84101,84105,84108,84137,84140],[953,83720,83722],{"id":83721},"why-template-strings","Why template strings?",[925,83724,83725,83726,2034,83729,83732],{},"Before we delve into template strings, let's identify the capabilities of some languages like ",[941,83727,83728],{},"Ruby",[941,83730,83731],{},"Python"," that are lacking in JavaScript.",[1530,83734,83735,83738,83741,83744,83747],{},[974,83736,83737],{},"String formatting",[974,83739,83740],{},"String tagging for safe HTML escaping & localization",[974,83742,83743],{},"Multiple strings without hacks",[974,83745,83746],{},"Embedded expressions",[974,83748,83749],{},"String interpolation",[925,83751,83752],{},"Template strings work more like a function call than a mechanism for defining templates.",[953,83754,34624],{"id":34623},[925,83756,83757,83758,83761],{},"Template strings use back-ticks (",[1107,83759,83760],{},"``",") rather than the single or double quotes we use for regular strings. A template string could thus be written as follows:",[993,83763,83765],{"className":995,"code":83764,"language":997,"meta":998,"style":998},"var message = `Hello!`;\n",[941,83766,83767],{"__ignoreMap":998},[1002,83768,83769,83771,83774,83776,83779],{"class":1004,"line":1005},[1002,83770,18311],{"class":1015},[1002,83772,83773],{"class":1030}," message ",[1002,83775,2393],{"class":1015},[1002,83777,83778],{"class":1034}," `Hello!`",[1002,83780,1407],{"class":1030},[7100,83782,83783],{"type":24048},[925,83784,83785,83786,83789,83790,2034,83792,83794],{},"Backtick characters ",[1107,83787,83788],{},"(`)"," enclose the entire template literal, while ",[1107,83791,15864],{},[1107,83793],{}," denote the substitutions. Inside a substitution, you can use identifiers and expressions.",[953,83796,44550],{"id":44549},[925,83798,83799,83800,83803],{},"String substitution allows us to take any valid JavaScript expression and inside a ",[941,83801,83802],{},"Template Literal",", the result will be output as part of the same string.",[993,83805,83807],{"className":995,"code":83806,"language":997,"meta":998,"style":998},"var name = 'Sean';\nvar message = `Hello ${name}!`;\n\nconsole.log(message); \u002F\u002F Hello Sean!\n",[941,83808,83809,83821,83838,83842],{"__ignoreMap":998},[1002,83810,83811,83813,83815,83817,83819],{"class":1004,"line":1005},[1002,83812,18311],{"class":1015},[1002,83814,63010],{"class":1030},[1002,83816,2393],{"class":1015},[1002,83818,17212],{"class":1034},[1002,83820,1407],{"class":1030},[1002,83822,83823,83825,83827,83829,83832,83834,83836],{"class":1004,"line":1012},[1002,83824,18311],{"class":1015},[1002,83826,83773],{"class":1030},[1002,83828,2393],{"class":1015},[1002,83830,83831],{"class":1034}," `Hello ${",[1002,83833,5911],{"class":1030},[1002,83835,29011],{"class":1034},[1002,83837,1407],{"class":1030},[1002,83839,83840],{"class":1004,"line":1047},[1002,83841,1051],{"emptyLinePlaceholder":1050},[1002,83843,83844,83846,83848,83851],{"class":1004,"line":1054},[1002,83845,2883],{"class":1030},[1002,83847,2886],{"class":1026},[1002,83849,83850],{"class":1030},"(message); ",[1002,83852,83853],{"class":1008},"\u002F\u002F Hello Sean!\n",[925,83855,83856],{},"You are not limited to variables, you can use functions inside an expression:",[993,83858,83860],{"className":995,"code":83859,"language":997,"meta":998,"style":998},"var dateOfBirth = 1985;\nvar message = `My age is ${2015 - dateOfBirth}`;\n\nconsole.log(message); \u002F\u002F My age is 30\n",[941,83861,83862,83876,83899,83903],{"__ignoreMap":998},[1002,83863,83864,83866,83869,83871,83874],{"class":1004,"line":1005},[1002,83865,18311],{"class":1015},[1002,83867,83868],{"class":1030}," dateOfBirth ",[1002,83870,2393],{"class":1015},[1002,83872,83873],{"class":1019}," 1985",[1002,83875,1407],{"class":1030},[1002,83877,83878,83880,83882,83884,83887,83890,83892,83895,83897],{"class":1004,"line":1012},[1002,83879,18311],{"class":1015},[1002,83881,83773],{"class":1030},[1002,83883,2393],{"class":1015},[1002,83885,83886],{"class":1034}," `My age is ${",[1002,83888,83889],{"class":1019},"2015",[1002,83891,39112],{"class":1015},[1002,83893,83894],{"class":1030}," dateOfBirth",[1002,83896,3507],{"class":1034},[1002,83898,1407],{"class":1030},[1002,83900,83901],{"class":1004,"line":1047},[1002,83902,1051],{"emptyLinePlaceholder":1050},[1002,83904,83905,83907,83909,83911],{"class":1004,"line":1054},[1002,83906,2883],{"class":1030},[1002,83908,2886],{"class":1026},[1002,83910,83850],{"class":1030},[1002,83912,83913],{"class":1008},"\u002F\u002F My age is 30\n",[953,83915,83917],{"id":83916},"multiline-strings","Multiline Strings",[925,83919,83920],{},"Multiline strings in JavaScript has been achieved so far by adding a backslash (****) character before each newline.",[993,83922,83924],{"className":995,"code":83923,"language":997,"meta":998,"style":998},"var message =\n 'This is a \\\n multi-line message';\n",[941,83925,83926,83934,83942],{"__ignoreMap":998},[1002,83927,83928,83930,83932],{"class":1004,"line":1005},[1002,83929,18311],{"class":1015},[1002,83931,83773],{"class":1030},[1002,83933,45993],{"class":1015},[1002,83935,83936,83939],{"class":1004,"line":1012},[1002,83937,83938],{"class":1034}," 'This is a ",[1002,83940,83941],{"class":1019},"\\\n",[1002,83943,83944,83947],{"class":1004,"line":1047},[1002,83945,83946],{"class":1034}," multi-line message'",[1002,83948,1407],{"class":1030},[925,83950,83951],{},"Template strings can span multiple lines:",[993,83953,83955],{"className":995,"code":83954,"language":997,"meta":998,"style":998},"var message = `This is a\n multi-line message`;\n",[941,83956,83957,83968],{"__ignoreMap":998},[1002,83958,83959,83961,83963,83965],{"class":1004,"line":1005},[1002,83960,18311],{"class":1015},[1002,83962,83773],{"class":1030},[1002,83964,2393],{"class":1015},[1002,83966,83967],{"class":1034}," `This is a\n",[1002,83969,83970,83973],{"class":1004,"line":1012},[1002,83971,83972],{"class":1034}," multi-line message`",[1002,83974,1407],{"class":1030},[7100,83976,83977],{"type":24048},[925,83978,83979],{},"Multiline literals will contain a newline character in template strings.",[953,83981,83983],{"id":83982},"tagged-templates","Tagged Templates",[925,83985,83986],{},"Tagged Templates transform a Template String by placing a function name before the template string.",[993,83988,83990],{"className":995,"code":83989,"language":997,"meta":998,"style":998},"var name = 'Sean';\nvar dateOfBirth = 1985;\n\nfn`Hello ${name}! You are ${2015 - dateOfBirth} today`;\n",[941,83991,83992,84004,84016,84020],{"__ignoreMap":998},[1002,83993,83994,83996,83998,84000,84002],{"class":1004,"line":1005},[1002,83995,18311],{"class":1015},[1002,83997,63010],{"class":1030},[1002,83999,2393],{"class":1015},[1002,84001,17212],{"class":1034},[1002,84003,1407],{"class":1030},[1002,84005,84006,84008,84010,84012,84014],{"class":1004,"line":1012},[1002,84007,18311],{"class":1015},[1002,84009,83868],{"class":1030},[1002,84011,2393],{"class":1015},[1002,84013,83873],{"class":1019},[1002,84015,1407],{"class":1030},[1002,84017,84018],{"class":1004,"line":1047},[1002,84019,1051],{"emptyLinePlaceholder":1050},[1002,84021,84022,84024,84027,84029,84032,84034,84036,84038,84041],{"class":1004,"line":1054},[1002,84023,8265],{"class":1026},[1002,84025,84026],{"class":1034},"`Hello ${",[1002,84028,5911],{"class":1030},[1002,84030,84031],{"class":1034},"}! You are ${",[1002,84033,83889],{"class":1019},[1002,84035,39112],{"class":1015},[1002,84037,83894],{"class":1030},[1002,84039,84040],{"class":1034},"} today`",[1002,84042,1407],{"class":1030},[925,84044,84045],{},"Tagged template strings are a special type of a function call. The above string will be converted into:",[993,84047,84049],{"className":995,"code":84048,"language":997,"meta":998,"style":998},"var name = 'Sean';\nvar dateOfBirth = 1985;\n\nfn(['Hello ', '! You are ', ' today'], name, dateOfBirth);\n",[941,84050,84051,84063,84075,84079],{"__ignoreMap":998},[1002,84052,84053,84055,84057,84059,84061],{"class":1004,"line":1005},[1002,84054,18311],{"class":1015},[1002,84056,63010],{"class":1030},[1002,84058,2393],{"class":1015},[1002,84060,17212],{"class":1034},[1002,84062,1407],{"class":1030},[1002,84064,84065,84067,84069,84071,84073],{"class":1004,"line":1012},[1002,84066,18311],{"class":1015},[1002,84068,83868],{"class":1030},[1002,84070,2393],{"class":1015},[1002,84072,83873],{"class":1019},[1002,84074,1407],{"class":1030},[1002,84076,84077],{"class":1004,"line":1047},[1002,84078,1051],{"emptyLinePlaceholder":1050},[1002,84080,84081,84083,84085,84088,84090,84093,84095,84098],{"class":1004,"line":1054},[1002,84082,8265],{"class":1026},[1002,84084,30910],{"class":1030},[1002,84086,84087],{"class":1034},"'Hello '",[1002,84089,1251],{"class":1030},[1002,84091,84092],{"class":1034},"'! You are '",[1002,84094,1251],{"class":1030},[1002,84096,84097],{"class":1034},"' today'",[1002,84099,84100],{"class":1030},"], name, dateOfBirth);\n",[953,84102,84104],{"id":84103},"safe-html-escaping","Safe HTML escaping",[925,84106,84107],{},"You could write a HTML-escaping function as follows:",[993,84109,84111],{"className":995,"code":84110,"language":997,"meta":998,"style":998},"html`\u003Cp title=\"${title}\">Hello ${name}\u003C\u002Fp>\n !`;\n",[941,84112,84113,84130],{"__ignoreMap":998},[1002,84114,84115,84117,84120,84122,84125,84127],{"class":1004,"line":1005},[1002,84116,383],{"class":1026},[1002,84118,84119],{"class":1034},"`\u003Cp title=\"${",[1002,84121,15029],{"class":1030},[1002,84123,84124],{"class":1034},"}\">Hello ${",[1002,84126,5911],{"class":1030},[1002,84128,84129],{"class":1034},"}\u003C\u002Fp>\n",[1002,84131,84132,84135],{"class":1004,"line":1012},[1002,84133,84134],{"class":1034}," !`",[1002,84136,1407],{"class":1030},[925,84138,84139],{},"This returns a string with the appropriate variables substituted in, but with all HTML-unsafe characters replaced.",[1579,84141,84142],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":84144},[84145,84146,84147,84148,84149,84150],{"id":83721,"depth":1012,"text":83722},{"id":34623,"depth":1012,"text":34624},{"id":44549,"depth":1012,"text":44550},{"id":83916,"depth":1012,"text":83917},{"id":83982,"depth":1012,"text":83983},{"id":84103,"depth":1012,"text":84104},"2015-09-12","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-template-strings.jpg",{},{"title":257,"description":259},"blog\u002Fes6-template-strings",[16,17],"JW6_5XNzvaHfRoopx5n5UKR-E5lONv3M7Di8oSFsyPc",{"id":84159,"title":486,"author":920,"body":84160,"date":85394,"description":488,"extension":1591,"image":85395,"meta":85396,"navigation":1050,"path":487,"seo":85397,"stem":85398,"tags":85399,"__hash__":85400},"blog\u002Fblog\u002Fisomorphic-javascript.md",{"type":922,"value":84161,"toc":85383},[84162,84166,84176,84179,84184,84187,84198,84202,84219,84221,84224,84230,84240,84243,84281,84284,84308,84328,84332,84337,84523,84525,84534,84661,84667,84904,84906,84914,85155,85158,85166,85256,85259,85268,85345,85349,85352,85363,85366,85373,85380],[953,84163,84165],{"id":84164},"why-isomorphism","Why Isomorphism?",[925,84167,84168,84169,84171,84172,84175],{},"The reasoning behind an isomrophic app is that instead of bundling all your ",[941,84170,33088],{}," code into a single bundle (and then using something like ",[1107,84173,84174],{},"\u003Cscript src=\"bundle.js\">"," in a bare bones HTML page), you run a Node.js server that serves the files for you.",[925,84177,84178],{},"Rendered in server the app can simply display that rendered string to the user when they first visit the page. When the user visits the page, that rendered string gets overwritten after the bundle is downloaded and then the React app runs like normal.",[7100,84180,84181],{"type":23379},[925,84182,84183],{},"JavaScript driven MVCs (angular, ember, backbone, etc.) render on DOM load, this can be really slow and can make for a bad user experience. And they are not indexable by search engines.",[925,84185,84186],{},"So the Isomorphic JavaScript will:",[1530,84188,84189,84192,84195],{},[974,84190,84191],{},"Render HTML from JavaScript app on the server",[974,84193,84194],{},"Browser loads with full HTML and JavaScript",[974,84196,84197],{},"Bootstraps the app.",[953,84199,84201],{"id":84200},"benefits-of-isomorphic-javascript","Benefits of Isomorphic JavaScript",[1530,84203,84204,84207,84210,84213,84216],{},[974,84205,84206],{},"Faster Perceived Load Times",[974,84208,84209],{},"Better overall user experience",[974,84211,84212],{},"Search Engine Indexability",[974,84214,84215],{},"Progressive Enhancements",[974,84217,84218],{},"Easier Code Maintenance",[953,84220,32993],{"id":32992},[925,84222,84223],{},"Install Node.js (atleast 0.12).",[925,84225,84226,84227,84229],{},"Create a directory for your project and initialise a ",[1107,84228,1102],{}," file by running:",[993,84231,84232],{"className":1797,"code":33008,"language":1799,"meta":998,"style":998},[941,84233,84234],{"__ignoreMap":998},[1002,84235,84236,84238],{"class":1004,"line":1005},[1002,84237,27346],{"class":1026},[1002,84239,33017],{"class":1034},[925,84241,84242],{},"Now let's install the necessary packages by running the following command:",[993,84244,84246],{"className":1797,"code":84245,"language":1799,"meta":998,"style":998},"npm install --save-dev babel babel-loader express jade react react-hot-loader react-router webpack webpack-dev-server nodemon\n",[941,84247,84248],{"__ignoreMap":998},[1002,84249,84250,84252,84254,84257,84260,84262,84264,84267,84269,84272,84274,84276,84278],{"class":1004,"line":1005},[1002,84251,27346],{"class":1026},[1002,84253,27349],{"class":1034},[1002,84255,84256],{"class":1019}," --save-dev",[1002,84258,84259],{"class":1034}," babel",[1002,84261,33082],{"class":1034},[1002,84263,21880],{"class":1034},[1002,84265,84266],{"class":1034}," jade",[1002,84268,33102],{"class":1034},[1002,84270,84271],{"class":1034}," react-hot-loader",[1002,84273,64291],{"class":1034},[1002,84275,33076],{"class":1034},[1002,84277,33079],{"class":1034},[1002,84279,84280],{"class":1034}," nodemon\n",[925,84282,84283],{},"After the installation, create your directory structure as follows:",[993,84285,84287],{"className":1797,"code":84286,"language":1799,"meta":998,"style":998},"mkdir src src\u002Fserver src\u002Fshared src\u002Fclient views\n",[941,84288,84289],{"__ignoreMap":998},[1002,84290,84291,84294,84296,84299,84302,84305],{"class":1004,"line":1005},[1002,84292,84293],{"class":1026},"mkdir",[1002,84295,15242],{"class":1034},[1002,84297,84298],{"class":1034}," src\u002Fserver",[1002,84300,84301],{"class":1034}," src\u002Fshared",[1002,84303,84304],{"class":1034}," src\u002Fclient",[1002,84306,84307],{"class":1034}," views\n",[1530,84309,84310,84316,84322],{},[974,84311,84312,84315],{},[941,84313,84314],{},"server"," - Holds the backend Node server and Webpack dev server",[974,84317,84318,84321],{},[941,84319,84320],{},"client"," - Holds the React bundle",[974,84323,84324,84327],{},[941,84325,84326],{},"shared"," - Hold your components, flux, and routes",[953,84329,84331],{"id":84330},"html-view","HTML view",[925,84333,29527,84334,84336],{},[1107,84335,37877],{}," in the views folder, and paste the following:",[993,84338,84340],{"className":37880,"code":84339,"language":383,"meta":998,"style":998},"\u003Chtml>\n \u003Chead>\n \u003Ctitle>Isomorphic JavaScript\u003C\u002Ftitle>\n \u003Cmeta charset=\"utf-8\"\u002F>\n \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u002F>\n \u003Cmeta name=\"description\" content=\"\"\u002F>\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u002F>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Cdiv id=\"app\">```\n \u003C\u002Fbody>\n \u003Cscript src=\"http:\u002F\u002Flocalhost:8080\u002Fjs\u002Fapp.js\" defer=\"defer\">\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[941,84341,84342,84350,84358,84371,84385,84408,84428,84449,84457,84465,84480,84488,84515],{"__ignoreMap":998},[1002,84343,84344,84346,84348],{"class":1004,"line":1005},[1002,84345,6539],{"class":1030},[1002,84347,383],{"class":15711},[1002,84349,15703],{"class":1030},[1002,84351,84352,84354,84356],{"class":1004,"line":1012},[1002,84353,22427],{"class":1030},[1002,84355,32092],{"class":15711},[1002,84357,15703],{"class":1030},[1002,84359,84360,84362,84364,84367,84369],{"class":1004,"line":1047},[1002,84361,15697],{"class":1030},[1002,84363,15029],{"class":15711},[1002,84365,84366],{"class":1030},">Isomorphic JavaScript\u003C\u002F",[1002,84368,15029],{"class":15711},[1002,84370,15703],{"class":1030},[1002,84372,84373,84375,84377,84379,84381,84383],{"class":1004,"line":1054},[1002,84374,15697],{"class":1030},[1002,84376,37926],{"class":15711},[1002,84378,37929],{"class":1026},[1002,84380,2393],{"class":1030},[1002,84382,51516],{"class":1034},[1002,84384,19039],{"class":1030},[1002,84386,84387,84389,84391,84394,84396,84399,84401,84403,84406],{"class":1004,"line":1060},[1002,84388,15697],{"class":1030},[1002,84390,37926],{"class":15711},[1002,84392,84393],{"class":1026}," http-equiv",[1002,84395,2393],{"class":1030},[1002,84397,84398],{"class":1034},"\"X-UA-Compatible\"",[1002,84400,51551],{"class":1026},[1002,84402,2393],{"class":1030},[1002,84404,84405],{"class":1034},"\"IE=edge\"",[1002,84407,19039],{"class":1030},[1002,84409,84410,84412,84414,84416,84418,84420,84422,84424,84426],{"class":1004,"line":1272},[1002,84411,15697],{"class":1030},[1002,84413,37926],{"class":15711},[1002,84415,18584],{"class":1026},[1002,84417,2393],{"class":1030},[1002,84419,51548],{"class":1034},[1002,84421,51551],{"class":1026},[1002,84423,2393],{"class":1030},[1002,84425,40147],{"class":1034},[1002,84427,19039],{"class":1030},[1002,84429,84430,84432,84434,84436,84438,84440,84442,84444,84447],{"class":1004,"line":1348},[1002,84431,15697],{"class":1030},[1002,84433,37926],{"class":15711},[1002,84435,18584],{"class":1026},[1002,84437,2393],{"class":1030},[1002,84439,60828],{"class":1034},[1002,84441,51551],{"class":1026},[1002,84443,2393],{"class":1030},[1002,84445,84446],{"class":1034},"\"width=device-width, initial-scale=1\"",[1002,84448,19039],{"class":1030},[1002,84450,84451,84453,84455],{"class":1004,"line":1354},[1002,84452,28112],{"class":1030},[1002,84454,32092],{"class":15711},[1002,84456,15703],{"class":1030},[1002,84458,84459,84461,84463],{"class":1004,"line":1360},[1002,84460,22427],{"class":1030},[1002,84462,15034],{"class":15711},[1002,84464,15703],{"class":1030},[1002,84466,84467,84469,84471,84473,84475,84477],{"class":1004,"line":1366},[1002,84468,15697],{"class":1030},[1002,84470,19650],{"class":15711},[1002,84472,21489],{"class":1026},[1002,84474,2393],{"class":1030},[1002,84476,22011],{"class":1034},[1002,84478,84479],{"class":1030},">```\n",[1002,84481,84482,84484,84486],{"class":1004,"line":1946},[1002,84483,28112],{"class":1030},[1002,84485,15034],{"class":15711},[1002,84487,15703],{"class":1030},[1002,84489,84490,84492,84494,84496,84498,84501,84504,84506,84509,84511,84513],{"class":1004,"line":1956},[1002,84491,22427],{"class":1030},[1002,84493,22063],{"class":15711},[1002,84495,15242],{"class":1026},[1002,84497,2393],{"class":1030},[1002,84499,84500],{"class":1034},"\"http:\u002F\u002Flocalhost:8080\u002Fjs\u002Fapp.js\"",[1002,84502,84503],{"class":1026}," defer",[1002,84505,2393],{"class":1030},[1002,84507,84508],{"class":1034},"\"defer\"",[1002,84510,22081],{"class":1030},[1002,84512,22063],{"class":15711},[1002,84514,15703],{"class":1030},[1002,84516,84517,84519,84521],{"class":1004,"line":1961},[1002,84518,22437],{"class":1030},[1002,84520,383],{"class":15711},[1002,84522,15703],{"class":1030},[953,84524,33059],{"id":33058},[925,84526,84527,84528,80753,84531,1813],{},"Create a new file called ",[1107,84529,84530],{},"webpack.js",[1107,84532,84533],{},"src\u002Fserver\u002F",[993,84535,84537],{"className":995,"code":84536,"language":997,"meta":998,"style":998},"import WebpackDevServer from 'webpack-dev-server';\nimport webpack from 'webpack';\nimport config from '..\u002F..\u002Fwebpack.config.dev';\n\nvar server = new WebpackDevServer(webpack(config), {\n \u002F\u002F webpack-dev-server options\n publicPath: config.output.publicPath,\n hot: true,\n stats: { colors: true },\n});\n\nserver.listen(8080, 'localhost', function () {});\n",[941,84538,84539,84553,84566,84580,84584,84604,84609,84614,84623,84632,84636,84640],{"__ignoreMap":998},[1002,84540,84541,84543,84546,84548,84551],{"class":1004,"line":1005},[1002,84542,943],{"class":1015},[1002,84544,84545],{"class":1030}," WebpackDevServer ",[1002,84547,1068],{"class":1015},[1002,84549,84550],{"class":1034}," 'webpack-dev-server'",[1002,84552,1407],{"class":1030},[1002,84554,84555,84557,84559,84561,84564],{"class":1004,"line":1012},[1002,84556,943],{"class":1015},[1002,84558,33249],{"class":1030},[1002,84560,1068],{"class":1015},[1002,84562,84563],{"class":1034}," 'webpack'",[1002,84565,1407],{"class":1030},[1002,84567,84568,84570,84573,84575,84578],{"class":1004,"line":1047},[1002,84569,943],{"class":1015},[1002,84571,84572],{"class":1030}," config ",[1002,84574,1068],{"class":1015},[1002,84576,84577],{"class":1034}," '..\u002F..\u002Fwebpack.config.dev'",[1002,84579,1407],{"class":1030},[1002,84581,84582],{"class":1004,"line":1054},[1002,84583,1051],{"emptyLinePlaceholder":1050},[1002,84585,84586,84588,84590,84592,84594,84597,84599,84601],{"class":1004,"line":1060},[1002,84587,18311],{"class":1015},[1002,84589,28347],{"class":1030},[1002,84591,2393],{"class":1015},[1002,84593,2690],{"class":1015},[1002,84595,84596],{"class":1026}," WebpackDevServer",[1002,84598,1031],{"class":1030},[1002,84600,33058],{"class":1026},[1002,84602,84603],{"class":1030},"(config), {\n",[1002,84605,84606],{"class":1004,"line":1272},[1002,84607,84608],{"class":1008}," \u002F\u002F webpack-dev-server options\n",[1002,84610,84611],{"class":1004,"line":1348},[1002,84612,84613],{"class":1030}," publicPath: config.output.publicPath,\n",[1002,84615,84616,84619,84621],{"class":1004,"line":1354},[1002,84617,84618],{"class":1030}," hot: ",[1002,84620,17397],{"class":1019},[1002,84622,1143],{"class":1030},[1002,84624,84625,84628,84630],{"class":1004,"line":1360},[1002,84626,84627],{"class":1030}," stats: { colors: ",[1002,84629,17397],{"class":1019},[1002,84631,33835],{"class":1030},[1002,84633,84634],{"class":1004,"line":1366},[1002,84635,2804],{"class":1030},[1002,84637,84638],{"class":1004,"line":1946},[1002,84639,1051],{"emptyLinePlaceholder":1050},[1002,84641,84642,84644,84646,84648,84650,84652,84654,84656,84658],{"class":1004,"line":1956},[1002,84643,28448],{"class":1030},[1002,84645,22260],{"class":1026},[1002,84647,1031],{"class":1030},[1002,84649,22265],{"class":1019},[1002,84651,1251],{"class":1030},[1002,84653,81803],{"class":1034},[1002,84655,1251],{"class":1030},[1002,84657,6965],{"class":1015},[1002,84659,84660],{"class":1030}," () {});\n",[925,84662,33150,84663,84666],{},[1107,84664,84665],{},"webpack.config.dev.js"," in the root of your folder:",[993,84668,84670],{"className":995,"code":84669,"language":997,"meta":998,"style":998},"var webpack = require('webpack');\n\nmodule.exports = {\n devtool: 'inline-source-map',\n entry: [\n 'webpack-dev-server\u002Fclient?http:\u002F\u002Flocalhost:8080',\n 'webpack\u002Fhot\u002Fonly-dev-server',\n '.\u002Fsrc\u002Fclient\u002Fentry',\n ],\n output: {\n path: __dirname + '\u002Fpublic\u002Fjs\u002F',\n filename: 'app.js',\n publicPath: 'http:\u002F\u002Flocalhost:8080\u002Fjs\u002F',\n },\n plugins: [\n new webpack.HotModuleReplacementPlugin(),\n new webpack.NoErrorsPlugin(),\n ],\n resolve: {\n extensions: ['', '.js'],\n },\n module: {\n loaders: [\n {\n test: \u002F\\.jsx?$\u002F,\n loaders: ['react-hot', 'babel-loader?experimental'],\n exclude: \u002Fnode_modules\u002F,\n },\n ],\n },\n};\n",[941,84671,84672,84688,84692,84704,84714,84719,84726,84733,84740,84745,84749,84760,84768,84777,84781,84786,84799,84810,84814,84818,84830,84834,84838,84842,84846,84862,84876,84888,84892,84896,84900],{"__ignoreMap":998},[1002,84673,84674,84676,84678,84680,84682,84684,84686],{"class":1004,"line":1005},[1002,84675,18311],{"class":1015},[1002,84677,33249],{"class":1030},[1002,84679,2393],{"class":1015},[1002,84681,1027],{"class":1026},[1002,84683,1031],{"class":1030},[1002,84685,33258],{"class":1034},[1002,84687,1085],{"class":1030},[1002,84689,84690],{"class":1004,"line":1012},[1002,84691,1051],{"emptyLinePlaceholder":1050},[1002,84693,84694,84696,84698,84700,84702],{"class":1004,"line":1047},[1002,84695,1227],{"class":1019},[1002,84697,948],{"class":1030},[1002,84699,1452],{"class":1019},[1002,84701,1023],{"class":1015},[1002,84703,1457],{"class":1030},[1002,84705,84706,84709,84712],{"class":1004,"line":1054},[1002,84707,84708],{"class":1030}," devtool: ",[1002,84710,84711],{"class":1034},"'inline-source-map'",[1002,84713,1143],{"class":1030},[1002,84715,84716],{"class":1004,"line":1060},[1002,84717,84718],{"class":1030}," entry: [\n",[1002,84720,84721,84724],{"class":1004,"line":1272},[1002,84722,84723],{"class":1034}," 'webpack-dev-server\u002Fclient?http:\u002F\u002Flocalhost:8080'",[1002,84725,1143],{"class":1030},[1002,84727,84728,84731],{"class":1004,"line":1348},[1002,84729,84730],{"class":1034}," 'webpack\u002Fhot\u002Fonly-dev-server'",[1002,84732,1143],{"class":1030},[1002,84734,84735,84738],{"class":1004,"line":1354},[1002,84736,84737],{"class":1034}," '.\u002Fsrc\u002Fclient\u002Fentry'",[1002,84739,1143],{"class":1030},[1002,84741,84742],{"class":1004,"line":1360},[1002,84743,84744],{"class":1030}," ],\n",[1002,84746,84747],{"class":1004,"line":1366},[1002,84748,1472],{"class":1030},[1002,84750,84751,84753,84755,84758],{"class":1004,"line":1946},[1002,84752,41404],{"class":1030},[1002,84754,5064],{"class":1015},[1002,84756,84757],{"class":1034}," '\u002Fpublic\u002Fjs\u002F'",[1002,84759,1143],{"class":1030},[1002,84761,84762,84764,84766],{"class":1004,"line":1956},[1002,84763,1477],{"class":1030},[1002,84765,33402],{"class":1034},[1002,84767,1143],{"class":1030},[1002,84769,84770,84772,84775],{"class":1004,"line":1961},[1002,84771,33409],{"class":1030},[1002,84773,84774],{"class":1034},"'http:\u002F\u002Flocalhost:8080\u002Fjs\u002F'",[1002,84776,1143],{"class":1030},[1002,84778,84779],{"class":1004,"line":1971},[1002,84780,1502],{"class":1030},[1002,84782,84783],{"class":1004,"line":1980},[1002,84784,84785],{"class":1030}," plugins: [\n",[1002,84787,84788,84791,84794,84797],{"class":1004,"line":1985},[1002,84789,84790],{"class":1015}," new",[1002,84792,84793],{"class":1030}," webpack.",[1002,84795,84796],{"class":1026},"HotModuleReplacementPlugin",[1002,84798,15088],{"class":1030},[1002,84800,84801,84803,84805,84808],{"class":1004,"line":1995},[1002,84802,84790],{"class":1015},[1002,84804,84793],{"class":1030},[1002,84806,84807],{"class":1026},"NoErrorsPlugin",[1002,84809,15088],{"class":1030},[1002,84811,84812],{"class":1004,"line":2006},[1002,84813,84744],{"class":1030},[1002,84815,84816],{"class":1004,"line":2011},[1002,84817,33359],{"class":1030},[1002,84819,84820,84822,84824,84826,84828],{"class":1004,"line":2017},[1002,84821,33364],{"class":1030},[1002,84823,19820],{"class":1034},[1002,84825,1251],{"class":1030},[1002,84827,33371],{"class":1034},[1002,84829,1903],{"class":1030},[1002,84831,84832],{"class":1004,"line":2022},[1002,84833,1502],{"class":1030},[1002,84835,84836],{"class":1004,"line":2442},[1002,84837,33464],{"class":1030},[1002,84839,84840],{"class":1004,"line":2466},[1002,84841,33469],{"class":1030},[1002,84843,84844],{"class":1004,"line":2471},[1002,84845,1336],{"class":1030},[1002,84847,84848,84850,84852,84854,84856,84858,84860],{"class":1004,"line":2476},[1002,84849,33478],{"class":1030},[1002,84851,33481],{"class":1034},[1002,84853,33485],{"class":33484},[1002,84855,2229],{"class":33488},[1002,84857,33491],{"class":1015},[1002,84859,4685],{"class":1034},[1002,84861,1143],{"class":1030},[1002,84863,84864,84866,84869,84871,84874],{"class":1004,"line":2481},[1002,84865,62251],{"class":1030},[1002,84867,84868],{"class":1034},"'react-hot'",[1002,84870,1251],{"class":1030},[1002,84872,84873],{"class":1034},"'babel-loader?experimental'",[1002,84875,1903],{"class":1030},[1002,84877,84878,84880,84882,84884,84886],{"class":1004,"line":2491},[1002,84879,33500],{"class":1030},[1002,84881,33481],{"class":1034},[1002,84883,62080],{"class":33488},[1002,84885,4685],{"class":1034},[1002,84887,1143],{"class":1030},[1002,84889,84890],{"class":1004,"line":2502},[1002,84891,1922],{"class":1030},[1002,84893,84894],{"class":1004,"line":2513},[1002,84895,33564],{"class":1030},[1002,84897,84898],{"class":1004,"line":2535},[1002,84899,1502],{"class":1030},[1002,84901,84902],{"class":1004,"line":2557},[1002,84903,1517],{"class":1030},[953,84905,33001],{"id":859},[925,84907,84908,84909,45167,84912,1813],{},"Create a new file in ",[1107,84910,84911],{},"src\u002Fserver",[1107,84913,81737],{},[993,84915,84917],{"className":995,"code":84916,"language":997,"meta":998,"style":998},"import express from 'express';\nimport React from 'react';\nimport Router from 'react-router';\nconst app = express();\n\nimport routes from '..\u002Fshared\u002Froutes';\n\napp.get('\u002F*', function (req, res) {\n Router.run(routes, req.url, (Handler) => {\n let content = React.renderToString(\u003CHandler \u002F>);\n res.render('index', { content: content });\n });\n});\n\nvar server = app.listen(3000, function () {\n var host = server.address().address;\n var port = server.address().port;\n\n console.log('Example app listening at http:\u002F\u002F%s:%s', host, port);\n});\n",[941,84918,84919,84931,84943,84955,84967,84971,84985,84989,85014,85031,85050,85065,85069,85073,85077,85100,85117,85133,85137,85151],{"__ignoreMap":998},[1002,84920,84921,84923,84925,84927,84929],{"class":1004,"line":1005},[1002,84922,943],{"class":1015},[1002,84924,21857],{"class":1030},[1002,84926,1068],{"class":1015},[1002,84928,21862],{"class":1034},[1002,84930,1407],{"class":1030},[1002,84932,84933,84935,84937,84939,84941],{"class":1004,"line":1012},[1002,84934,943],{"class":1015},[1002,84936,21700],{"class":1030},[1002,84938,1068],{"class":1015},[1002,84940,15543],{"class":1034},[1002,84942,1407],{"class":1030},[1002,84944,84945,84947,84949,84951,84953],{"class":1004,"line":1047},[1002,84946,943],{"class":1015},[1002,84948,65492],{"class":1030},[1002,84950,1068],{"class":1015},[1002,84952,64326],{"class":1034},[1002,84954,1407],{"class":1030},[1002,84956,84957,84959,84961,84963,84965],{"class":1004,"line":1054},[1002,84958,1016],{"class":1015},[1002,84960,21875],{"class":1019},[1002,84962,1023],{"class":1015},[1002,84964,21880],{"class":1026},[1002,84966,1428],{"class":1030},[1002,84968,84969],{"class":1004,"line":1060},[1002,84970,1051],{"emptyLinePlaceholder":1050},[1002,84972,84973,84975,84978,84980,84983],{"class":1004,"line":1272},[1002,84974,943],{"class":1015},[1002,84976,84977],{"class":1030}," routes ",[1002,84979,1068],{"class":1015},[1002,84981,84982],{"class":1034}," '..\u002Fshared\u002Froutes'",[1002,84984,1407],{"class":1030},[1002,84986,84987],{"class":1004,"line":1348},[1002,84988,1051],{"emptyLinePlaceholder":1050},[1002,84990,84991,84993,84995,84997,85000,85002,85004,85006,85008,85010,85012],{"class":1004,"line":1354},[1002,84992,21891],{"class":1030},[1002,84994,8070],{"class":1026},[1002,84996,1031],{"class":1030},[1002,84998,84999],{"class":1034},"'\u002F*'",[1002,85001,1251],{"class":1030},[1002,85003,6965],{"class":1015},[1002,85005,6513],{"class":1030},[1002,85007,22159],{"class":2378},[1002,85009,1251],{"class":1030},[1002,85011,14985],{"class":2378},[1002,85013,2382],{"class":1030},[1002,85015,85016,85018,85020,85023,85025,85027,85029],{"class":1004,"line":1360},[1002,85017,65701],{"class":1030},[1002,85019,2061],{"class":1026},[1002,85021,85022],{"class":1030},"(routes, req.url, (",[1002,85024,65515],{"class":2378},[1002,85026,5876],{"class":1030},[1002,85028,15497],{"class":1015},[1002,85030,1457],{"class":1030},[1002,85032,85033,85035,85038,85040,85042,85044,85046,85048],{"class":1004,"line":1366},[1002,85034,12922],{"class":1015},[1002,85036,85037],{"class":1030}," content ",[1002,85039,2393],{"class":1015},[1002,85041,26711],{"class":1030},[1002,85043,21639],{"class":1026},[1002,85045,21269],{"class":1030},[1002,85047,65515],{"class":1019},[1002,85049,21275],{"class":1030},[1002,85051,85052,85055,85057,85059,85062],{"class":1004,"line":1946},[1002,85053,85054],{"class":1030}," res.",[1002,85056,19545],{"class":1026},[1002,85058,1031],{"class":1030},[1002,85060,85061],{"class":1034},"'index'",[1002,85063,85064],{"class":1030},", { content: content });\n",[1002,85066,85067],{"class":1004,"line":1956},[1002,85068,19836],{"class":1030},[1002,85070,85071],{"class":1004,"line":1961},[1002,85072,2804],{"class":1030},[1002,85074,85075],{"class":1004,"line":1971},[1002,85076,1051],{"emptyLinePlaceholder":1050},[1002,85078,85079,85081,85083,85085,85088,85090,85092,85094,85096,85098],{"class":1004,"line":1980},[1002,85080,18311],{"class":1015},[1002,85082,28347],{"class":1030},[1002,85084,2393],{"class":1015},[1002,85086,85087],{"class":1030}," app.",[1002,85089,22260],{"class":1026},[1002,85091,1031],{"class":1030},[1002,85093,20832],{"class":1019},[1002,85095,1251],{"class":1030},[1002,85097,6965],{"class":1015},[1002,85099,9772],{"class":1030},[1002,85101,85102,85104,85107,85109,85112,85114],{"class":1004,"line":1985},[1002,85103,28293],{"class":1015},[1002,85105,85106],{"class":1030}," host ",[1002,85108,2393],{"class":1015},[1002,85110,85111],{"class":1030}," server.",[1002,85113,14271],{"class":1026},[1002,85115,85116],{"class":1030},"().address;\n",[1002,85118,85119,85121,85124,85126,85128,85130],{"class":1004,"line":1995},[1002,85120,28293],{"class":1015},[1002,85122,85123],{"class":1030}," port ",[1002,85125,2393],{"class":1015},[1002,85127,85111],{"class":1030},[1002,85129,14271],{"class":1026},[1002,85131,85132],{"class":1030},"().port;\n",[1002,85134,85135],{"class":1004,"line":2006},[1002,85136,1051],{"emptyLinePlaceholder":1050},[1002,85138,85139,85141,85143,85145,85148],{"class":1004,"line":2011},[1002,85140,6977],{"class":1030},[1002,85142,2886],{"class":1026},[1002,85144,1031],{"class":1030},[1002,85146,85147],{"class":1034},"'Example app listening at http:\u002F\u002F%s:%s'",[1002,85149,85150],{"class":1030},", host, port);\n",[1002,85152,85153],{"class":1004,"line":2017},[1002,85154,2804],{"class":1030},[953,85156,85157],{"id":84320},"Client",[925,85159,33150,85160,85163,85164,1813],{},[1107,85161,85162],{},"src\u002Fclient\u002Fentry.js"," and import ",[1107,85165,64408],{},[993,85167,85169],{"className":995,"code":85168,"language":997,"meta":998,"style":998},"import React from 'react';\nimport Router from 'react-router';\nimport routes from '..\u002Fshared\u002Froutes';\n\nRouter.run(routes, Router.HistoryLocation, (Handler, state) => {\n React.render(\u003CHandler \u002F>, document.getElementById('app'));\n});\n",[941,85170,85171,85183,85195,85207,85211,85232,85252],{"__ignoreMap":998},[1002,85172,85173,85175,85177,85179,85181],{"class":1004,"line":1005},[1002,85174,943],{"class":1015},[1002,85176,21700],{"class":1030},[1002,85178,1068],{"class":1015},[1002,85180,15543],{"class":1034},[1002,85182,1407],{"class":1030},[1002,85184,85185,85187,85189,85191,85193],{"class":1004,"line":1012},[1002,85186,943],{"class":1015},[1002,85188,65492],{"class":1030},[1002,85190,1068],{"class":1015},[1002,85192,64326],{"class":1034},[1002,85194,1407],{"class":1030},[1002,85196,85197,85199,85201,85203,85205],{"class":1004,"line":1047},[1002,85198,943],{"class":1015},[1002,85200,84977],{"class":1030},[1002,85202,1068],{"class":1015},[1002,85204,84982],{"class":1034},[1002,85206,1407],{"class":1030},[1002,85208,85209],{"class":1004,"line":1054},[1002,85210,1051],{"emptyLinePlaceholder":1050},[1002,85212,85213,85215,85217,85220,85222,85224,85226,85228,85230],{"class":1004,"line":1060},[1002,85214,65507],{"class":1030},[1002,85216,2061],{"class":1026},[1002,85218,85219],{"class":1030},"(routes, Router.HistoryLocation, (",[1002,85221,65515],{"class":2378},[1002,85223,1251],{"class":1030},[1002,85225,8589],{"class":2378},[1002,85227,5876],{"class":1030},[1002,85229,15497],{"class":1015},[1002,85231,1457],{"class":1030},[1002,85233,85234,85236,85238,85240,85242,85244,85246,85248,85250],{"class":1004,"line":1272},[1002,85235,65526],{"class":1030},[1002,85237,19545],{"class":1026},[1002,85239,21269],{"class":1030},[1002,85241,65515],{"class":1019},[1002,85243,30462],{"class":1030},[1002,85245,16591],{"class":1026},[1002,85247,1031],{"class":1030},[1002,85249,47452],{"class":1034},[1002,85251,5663],{"class":1030},[1002,85253,85254],{"class":1004,"line":1348},[1002,85255,2804],{"class":1030},[953,85257,85258],{"id":69694},"Routes",[925,85260,33150,85261,80753,85264,85267],{},[1107,85262,85263],{},"routes.js",[1107,85265,85266],{},"\u002Fsrc\u002Fshared"," which is the link that is combining our server and client:",[993,85269,85271],{"className":995,"code":85270,"language":997,"meta":998,"style":998},"import { Route } from 'react-router';\nimport React from 'react';\n\nimport AppHandler from '.\u002Fcomponents\u002FAppHandler';\n\nexport default \u003CRoute handler={AppHandler} path=\"\u002F\" \u002F>;\n",[941,85272,85273,85285,85297,85301,85315,85319],{"__ignoreMap":998},[1002,85274,85275,85277,85279,85281,85283],{"class":1004,"line":1005},[1002,85276,943],{"class":1015},[1002,85278,64321],{"class":1030},[1002,85280,1068],{"class":1015},[1002,85282,64326],{"class":1034},[1002,85284,1407],{"class":1030},[1002,85286,85287,85289,85291,85293,85295],{"class":1004,"line":1012},[1002,85288,943],{"class":1015},[1002,85290,21700],{"class":1030},[1002,85292,1068],{"class":1015},[1002,85294,15543],{"class":1034},[1002,85296,1407],{"class":1030},[1002,85298,85299],{"class":1004,"line":1047},[1002,85300,1051],{"emptyLinePlaceholder":1050},[1002,85302,85303,85305,85308,85310,85313],{"class":1004,"line":1054},[1002,85304,943],{"class":1015},[1002,85306,85307],{"class":1030}," AppHandler ",[1002,85309,1068],{"class":1015},[1002,85311,85312],{"class":1034}," '.\u002Fcomponents\u002FAppHandler'",[1002,85314,1407],{"class":1030},[1002,85316,85317],{"class":1004,"line":1060},[1002,85318,1051],{"emptyLinePlaceholder":1050},[1002,85320,85321,85323,85325,85327,85329,85331,85333,85336,85338,85340,85342],{"class":1004,"line":1272},[1002,85322,947],{"class":1015},[1002,85324,15641],{"class":1015},[1002,85326,20660],{"class":1030},[1002,85328,64350],{"class":1019},[1002,85330,64353],{"class":1026},[1002,85332,2393],{"class":1015},[1002,85334,85335],{"class":1030},"{AppHandler} ",[1002,85337,64361],{"class":1026},[1002,85339,2393],{"class":1015},[1002,85341,64366],{"class":1034},[1002,85343,85344],{"class":1030}," \u002F>;\n",[953,85346,85348],{"id":85347},"running-the-server","Running the server",[925,85350,85351],{},"Run following command from root directory:",[993,85353,85355],{"className":1797,"code":85354,"language":1799,"meta":998,"style":998}," npm start\n",[941,85356,85357],{"__ignoreMap":998},[1002,85358,85359,85361],{"class":1004,"line":1005},[1002,85360,64286],{"class":1026},[1002,85362,38037],{"class":1034},[925,85364,85365],{},"This will run a watch task for Babel to handle the es6, webpack-dev-server to hot reloading, and the Node server.",[925,85367,85368,85369,85372],{},"Visit ",[933,85370,35069],{"href":35069,"rel":85371},[937],", and you should see \"Hello App Handler\". That's our Isomorphic App!",[925,85374,70190,85375],{},[933,85376,85379],{"href":85377,"rel":85378},"https:\u002F\u002Fgithub.com\u002Fszaranger\u002Fisomorphic-javascript",[937],"Isomorphic JavaScript",[1579,85381,85382],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":85384},[85385,85386,85387,85388,85389,85390,85391,85392,85393],{"id":84164,"depth":1012,"text":84165},{"id":84200,"depth":1012,"text":84201},{"id":32992,"depth":1012,"text":32993},{"id":84330,"depth":1012,"text":84331},{"id":33058,"depth":1012,"text":33059},{"id":859,"depth":1012,"text":33001},{"id":84320,"depth":1012,"text":85157},{"id":69694,"depth":1012,"text":85258},{"id":85347,"depth":1012,"text":85348},"2015-09-11","\u002Fimages\u002Fblog\u002Ffeatures\u002Fisomorphic-javascript.jpg",{},{"title":486,"description":488},"blog\u002Fisomorphic-javascript",[16,17],"FRzYEySMf_pbmoEpndCMlxwPqiOQEYSAxnivbKV4lbk",{"id":85402,"title":206,"author":920,"body":85403,"date":86399,"description":208,"extension":1591,"image":86400,"meta":86401,"navigation":1050,"path":207,"seo":86402,"stem":86403,"tags":86404,"__hash__":86405},"blog\u002Fblog\u002Fes6-default-rest-spread.md",{"type":922,"value":85404,"toc":86394},[85405,85407,85410,85521,85531,85534,85620,85627,85735,85741,85852,85854,85860,86003,86006,86020,86026,86038,86041,86167,86172,86175,86200,86202,86207,86210,86294,86304,86307,86391],[953,85406,15278],{"id":15278},[925,85408,85409],{},"Functions in JavaScript allow any number of parameters to be passed regardless of the number of declared parameters in the function definition. JavaScript programmers employ various different run-time tricks to achieve the effect of an argument with a default value. The common pattern for parameter handling is as follows:",[993,85411,85413],{"className":995,"code":85412,"language":997,"meta":998,"style":998},"function sum(number1, number2) {\n \u002F\u002F set default to 0 if number2 not passed\n \u002F\u002F (or passed as undefined)\n number2 = number2 || 0;\n return number1 + increment;\n}\n\nconsole.log(sum(2, 3)); \u002F\u002F 5\nconsole.log(sum(2)); \u002F\u002F 2\n",[941,85414,85415,85434,85439,85444,85460,85472,85476,85480,85503],{"__ignoreMap":998},[1002,85416,85417,85419,85422,85424,85427,85429,85432],{"class":1004,"line":1005},[1002,85418,6965],{"class":1015},[1002,85420,85421],{"class":1026}," sum",[1002,85423,1031],{"class":1030},[1002,85425,85426],{"class":2378},"number1",[1002,85428,1251],{"class":1030},[1002,85430,85431],{"class":2378},"number2",[1002,85433,2382],{"class":1030},[1002,85435,85436],{"class":1004,"line":1012},[1002,85437,85438],{"class":1008}," \u002F\u002F set default to 0 if number2 not passed\n",[1002,85440,85441],{"class":1004,"line":1047},[1002,85442,85443],{"class":1008}," \u002F\u002F (or passed as undefined)\n",[1002,85445,85446,85449,85451,85454,85456,85458],{"class":1004,"line":1054},[1002,85447,85448],{"class":1030}," number2 ",[1002,85450,2393],{"class":1015},[1002,85452,85453],{"class":1030}," number2 ",[1002,85455,8392],{"class":1015},[1002,85457,4910],{"class":1019},[1002,85459,1407],{"class":1030},[1002,85461,85462,85464,85467,85469],{"class":1004,"line":1060},[1002,85463,15066],{"class":1015},[1002,85465,85466],{"class":1030}," number1 ",[1002,85468,5064],{"class":1015},[1002,85470,85471],{"class":1030}," increment;\n",[1002,85473,85474],{"class":1004,"line":1272},[1002,85475,1170],{"class":1030},[1002,85477,85478],{"class":1004,"line":1348},[1002,85479,1051],{"emptyLinePlaceholder":1050},[1002,85481,85482,85484,85486,85488,85490,85492,85494,85496,85498,85501],{"class":1004,"line":1354},[1002,85483,2883],{"class":1030},[1002,85485,2886],{"class":1026},[1002,85487,1031],{"class":1030},[1002,85489,77047],{"class":1026},[1002,85491,1031],{"class":1030},[1002,85493,5681],{"class":1019},[1002,85495,1251],{"class":1030},[1002,85497,2796],{"class":1019},[1002,85499,85500],{"class":1030},")); ",[1002,85502,5734],{"class":1008},[1002,85504,85505,85507,85509,85511,85513,85515,85517,85519],{"class":1004,"line":1360},[1002,85506,2883],{"class":1030},[1002,85508,2886],{"class":1026},[1002,85510,1031],{"class":1030},[1002,85512,77047],{"class":1026},[1002,85514,1031],{"class":1030},[1002,85516,5681],{"class":1019},[1002,85518,85500],{"class":1030},[1002,85520,31325],{"class":1008},[925,85522,85523,85524,85527,85528,948],{},"The logical ",[941,85525,85526],{},"OR"," operator (||) always returns the second operand when the first is ",[941,85529,85530],{},"falsy",[925,85532,85533],{},"ES6 gives us a way to set default function parameters. Any parameters with a default value are considered to be optional.",[993,85535,85537],{"className":995,"code":85536,"language":997,"meta":998,"style":998},"function inc(number1, number2 = 0) {\n return number1 + number2;\n}\n\nconsole.log(inc(2, 3)); \u002F\u002F 5\nconsole.log(inc(2)); \u002F\u002F 2\n",[941,85538,85539,85560,85571,85575,85579,85602],{"__ignoreMap":998},[1002,85540,85541,85543,85546,85548,85550,85552,85554,85556,85558],{"class":1004,"line":1005},[1002,85542,6965],{"class":1015},[1002,85544,85545],{"class":1026}," inc",[1002,85547,1031],{"class":1030},[1002,85549,85426],{"class":2378},[1002,85551,1251],{"class":1030},[1002,85553,85431],{"class":2378},[1002,85555,1023],{"class":1015},[1002,85557,4910],{"class":1019},[1002,85559,2382],{"class":1030},[1002,85561,85562,85564,85566,85568],{"class":1004,"line":1012},[1002,85563,15066],{"class":1015},[1002,85565,85466],{"class":1030},[1002,85567,5064],{"class":1015},[1002,85569,85570],{"class":1030}," number2;\n",[1002,85572,85573],{"class":1004,"line":1047},[1002,85574,1170],{"class":1030},[1002,85576,85577],{"class":1004,"line":1054},[1002,85578,1051],{"emptyLinePlaceholder":1050},[1002,85580,85581,85583,85585,85587,85590,85592,85594,85596,85598,85600],{"class":1004,"line":1060},[1002,85582,2883],{"class":1030},[1002,85584,2886],{"class":1026},[1002,85586,1031],{"class":1030},[1002,85588,85589],{"class":1026},"inc",[1002,85591,1031],{"class":1030},[1002,85593,5681],{"class":1019},[1002,85595,1251],{"class":1030},[1002,85597,2796],{"class":1019},[1002,85599,85500],{"class":1030},[1002,85601,5734],{"class":1008},[1002,85603,85604,85606,85608,85610,85612,85614,85616,85618],{"class":1004,"line":1272},[1002,85605,2883],{"class":1030},[1002,85607,2886],{"class":1026},[1002,85609,1031],{"class":1030},[1002,85611,85589],{"class":1026},[1002,85613,1031],{"class":1030},[1002,85615,5681],{"class":1019},[1002,85617,85500],{"class":1030},[1002,85619,31325],{"class":1008},[925,85621,85622,85623,85626],{},"You can also set default values to parameters that appear ",[941,85624,85625],{},"before arguments"," without default values:",[993,85628,85630],{"className":995,"code":85629,"language":997,"meta":998,"style":998},"function sum(a, b = 2, c) {\n return a + b + c;\n}\n\nconsole.log(sum(1, 5, 10)); \u002F\u002F 16 -> b === 5\nconsole.log(sum(1, undefined, 10)); \u002F\u002F 13 -> b as default\n",[941,85631,85632,85656,85673,85677,85681,85708],{"__ignoreMap":998},[1002,85633,85634,85636,85638,85640,85642,85644,85646,85648,85650,85652,85654],{"class":1004,"line":1005},[1002,85635,6965],{"class":1015},[1002,85637,85421],{"class":1026},[1002,85639,1031],{"class":1030},[1002,85641,933],{"class":2378},[1002,85643,1251],{"class":1030},[1002,85645,31621],{"class":2378},[1002,85647,1023],{"class":1015},[1002,85649,10248],{"class":1019},[1002,85651,1251],{"class":1030},[1002,85653,77116],{"class":2378},[1002,85655,2382],{"class":1030},[1002,85657,85658,85660,85663,85665,85668,85670],{"class":1004,"line":1012},[1002,85659,15066],{"class":1015},[1002,85661,85662],{"class":1030}," a ",[1002,85664,5064],{"class":1015},[1002,85666,85667],{"class":1030}," b ",[1002,85669,5064],{"class":1015},[1002,85671,85672],{"class":1030}," c;\n",[1002,85674,85675],{"class":1004,"line":1047},[1002,85676,1170],{"class":1030},[1002,85678,85679],{"class":1004,"line":1054},[1002,85680,1051],{"emptyLinePlaceholder":1050},[1002,85682,85683,85685,85687,85689,85691,85693,85695,85697,85699,85701,85703,85705],{"class":1004,"line":1060},[1002,85684,2883],{"class":1030},[1002,85686,2886],{"class":1026},[1002,85688,1031],{"class":1030},[1002,85690,77047],{"class":1026},[1002,85692,1031],{"class":1030},[1002,85694,6211],{"class":1019},[1002,85696,1251],{"class":1030},[1002,85698,2859],{"class":1019},[1002,85700,1251],{"class":1030},[1002,85702,4818],{"class":1019},[1002,85704,85500],{"class":1030},[1002,85706,85707],{"class":1008},"\u002F\u002F 16 -> b === 5\n",[1002,85709,85710,85712,85714,85716,85718,85720,85722,85724,85726,85728,85730,85732],{"class":1004,"line":1272},[1002,85711,2883],{"class":1030},[1002,85713,2886],{"class":1026},[1002,85715,1031],{"class":1030},[1002,85717,77047],{"class":1026},[1002,85719,1031],{"class":1030},[1002,85721,6211],{"class":1019},[1002,85723,1251],{"class":1030},[1002,85725,31012],{"class":1019},[1002,85727,1251],{"class":1030},[1002,85729,4818],{"class":1019},[1002,85731,85500],{"class":1030},[1002,85733,85734],{"class":1008},"\u002F\u002F 13 -> b as default\n",[925,85736,85737,85738,948],{},"You can even execute a function to set default parameter. So it’s not restricted to ",[941,85739,85740],{},"primitive values",[993,85742,85744],{"className":995,"code":85743,"language":997,"meta":998,"style":998},"function getDefaultIncrement() {\n return 1;\n}\n\nfunction inc(number, increment = getDefaultIncrement()) {\n return number + increment;\n}\n\nconsole.log(inc(2, 2)); \u002F\u002F 4\nconsole.log(inc(2)); \u002F\u002F 3\n",[941,85745,85746,85755,85763,85767,85771,85792,85803,85807,85811,85833],{"__ignoreMap":998},[1002,85747,85748,85750,85753],{"class":1004,"line":1005},[1002,85749,6965],{"class":1015},[1002,85751,85752],{"class":1026}," getDefaultIncrement",[1002,85754,3025],{"class":1030},[1002,85756,85757,85759,85761],{"class":1004,"line":1012},[1002,85758,15066],{"class":1015},[1002,85760,6246],{"class":1019},[1002,85762,1407],{"class":1030},[1002,85764,85765],{"class":1004,"line":1047},[1002,85766,1170],{"class":1030},[1002,85768,85769],{"class":1004,"line":1054},[1002,85770,1051],{"emptyLinePlaceholder":1050},[1002,85772,85773,85775,85777,85779,85781,85783,85786,85788,85790],{"class":1004,"line":1060},[1002,85774,6965],{"class":1015},[1002,85776,85545],{"class":1026},[1002,85778,1031],{"class":1030},[1002,85780,18034],{"class":2378},[1002,85782,1251],{"class":1030},[1002,85784,85785],{"class":2378},"increment",[1002,85787,1023],{"class":1015},[1002,85789,85752],{"class":1026},[1002,85791,3547],{"class":1030},[1002,85793,85794,85796,85799,85801],{"class":1004,"line":1272},[1002,85795,15066],{"class":1015},[1002,85797,85798],{"class":1030}," number ",[1002,85800,5064],{"class":1015},[1002,85802,85471],{"class":1030},[1002,85804,85805],{"class":1004,"line":1348},[1002,85806,1170],{"class":1030},[1002,85808,85809],{"class":1004,"line":1354},[1002,85810,1051],{"emptyLinePlaceholder":1050},[1002,85812,85813,85815,85817,85819,85821,85823,85825,85827,85829,85831],{"class":1004,"line":1360},[1002,85814,2883],{"class":1030},[1002,85816,2886],{"class":1026},[1002,85818,1031],{"class":1030},[1002,85820,85589],{"class":1026},[1002,85822,1031],{"class":1030},[1002,85824,5681],{"class":1019},[1002,85826,1251],{"class":1030},[1002,85828,5681],{"class":1019},[1002,85830,85500],{"class":1030},[1002,85832,51351],{"class":1008},[1002,85834,85835,85837,85839,85841,85843,85845,85847,85849],{"class":1004,"line":1366},[1002,85836,2883],{"class":1030},[1002,85838,2886],{"class":1026},[1002,85840,1031],{"class":1030},[1002,85842,85589],{"class":1026},[1002,85844,1031],{"class":1030},[1002,85846,5681],{"class":1019},[1002,85848,85500],{"class":1030},[1002,85850,85851],{"class":1008},"\u002F\u002F 3\n",[953,85853,27630],{"id":27630},[925,85855,85856,85857,85859],{},"In ES5, when you want to handle all the arguments passed into it, we would have to use the ",[1107,85858,31403],{}," object.",[993,85861,85863],{"className":995,"code":85862,"language":997,"meta":998,"style":998},"function sum() {\n var numbers = Array.prototype.slice.call(arguments),\n result = 0;\n numbers.forEach(function (number) {\n result += number;\n });\n return result;\n}\nconsole.log(sum(1)); \u002F\u002F 1\nconsole.log(sum(1, 2, 3, 4, 5)); \u002F\u002F 15\n",[941,85864,85865,85873,85899,85910,85927,85936,85940,85946,85950,85968],{"__ignoreMap":998},[1002,85866,85867,85869,85871],{"class":1004,"line":1005},[1002,85868,6965],{"class":1015},[1002,85870,85421],{"class":1026},[1002,85872,3025],{"class":1030},[1002,85874,85875,85877,85880,85882,85884,85886,85888,85891,85893,85895,85897],{"class":1004,"line":1012},[1002,85876,28293],{"class":1015},[1002,85878,85879],{"class":1030}," numbers ",[1002,85881,2393],{"class":1015},[1002,85883,28301],{"class":1019},[1002,85885,948],{"class":1030},[1002,85887,3894],{"class":1019},[1002,85889,85890],{"class":1030},".slice.",[1002,85892,8426],{"class":1026},[1002,85894,1031],{"class":1030},[1002,85896,31403],{"class":1019},[1002,85898,1257],{"class":1030},[1002,85900,85901,85904,85906,85908],{"class":1004,"line":1047},[1002,85902,85903],{"class":1030}," result ",[1002,85905,2393],{"class":1015},[1002,85907,4910],{"class":1019},[1002,85909,1407],{"class":1030},[1002,85911,85912,85915,85917,85919,85921,85923,85925],{"class":1004,"line":1054},[1002,85913,85914],{"class":1030}," numbers.",[1002,85916,8408],{"class":1026},[1002,85918,1031],{"class":1030},[1002,85920,6965],{"class":1015},[1002,85922,6513],{"class":1030},[1002,85924,18034],{"class":2378},[1002,85926,2382],{"class":1030},[1002,85928,85929,85931,85933],{"class":1004,"line":1060},[1002,85930,85903],{"class":1030},[1002,85932,6084],{"class":1015},[1002,85934,85935],{"class":1030}," number;\n",[1002,85937,85938],{"class":1004,"line":1272},[1002,85939,19836],{"class":1030},[1002,85941,85942,85944],{"class":1004,"line":1348},[1002,85943,15066],{"class":1015},[1002,85945,17691],{"class":1030},[1002,85947,85948],{"class":1004,"line":1354},[1002,85949,1170],{"class":1030},[1002,85951,85952,85954,85956,85958,85960,85962,85964,85966],{"class":1004,"line":1360},[1002,85953,2883],{"class":1030},[1002,85955,2886],{"class":1026},[1002,85957,1031],{"class":1030},[1002,85959,77047],{"class":1026},[1002,85961,1031],{"class":1030},[1002,85963,6211],{"class":1019},[1002,85965,85500],{"class":1030},[1002,85967,50532],{"class":1008},[1002,85969,85970,85972,85974,85976,85978,85980,85982,85984,85986,85988,85990,85992,85994,85996,85998,86000],{"class":1004,"line":1366},[1002,85971,2883],{"class":1030},[1002,85973,2886],{"class":1026},[1002,85975,1031],{"class":1030},[1002,85977,77047],{"class":1026},[1002,85979,1031],{"class":1030},[1002,85981,6211],{"class":1019},[1002,85983,1251],{"class":1030},[1002,85985,5681],{"class":1019},[1002,85987,1251],{"class":1030},[1002,85989,2796],{"class":1019},[1002,85991,1251],{"class":1030},[1002,85993,3837],{"class":1019},[1002,85995,1251],{"class":1030},[1002,85997,2859],{"class":1019},[1002,85999,85500],{"class":1030},[1002,86001,86002],{"class":1008},"\u002F\u002F 15\n",[925,86004,86005],{},"Here we have to iterate the arguments array and sum up the numbers.",[7100,86007,86009],{"type":23379,"title":86008},"arguments object",[925,86010,3898,86011,86013,86014,86016,86017,86019],{},[1107,86012,31403],{}," object is not quite an array - it's an array like object. We have to convert it to an ",[941,86015,12121],{}," using the ",[1107,86018,55443],{}," function.",[925,86021,86022,86023,86025],{},"ES6 introduces ",[1107,86024,27630],{}," parameters to overcomes these difficulties.",[925,86027,86028,86029,86031,86032,86035,86036,948],{},"Indicated by three dots ",[1107,86030,17625],{}," similar to the ",[941,86033,86034],{},"splat"," operator in ",[941,86037,83728],{},[925,86039,86040],{},"Named parameters become an array containing the rest of the parameters.",[993,86042,86044],{"className":995,"code":86043,"language":997,"meta":998,"style":998},"function sum(…numbers) {\n var result = 0;\n numbers.forEach(function (number) {\n result += number;\n });\n return result;\n}\n\nconsole.log(sum(1)); \u002F\u002F 1\nconsole.log(sum(1, 2, 3, 4, 5)); \u002F\u002F 15\n",[941,86045,86046,86060,86072,86088,86096,86100,86107,86111,86115,86133],{"__ignoreMap":998},[1002,86047,86048,86050,86052,86055,86058],{"class":1004,"line":1005},[1002,86049,6965],{"class":1015},[1002,86051,85421],{"class":1026},[1002,86053,86054],{"class":1030},"(…",[1002,86056,86057],{"class":2378},"numbers",[1002,86059,2382],{"class":1030},[1002,86061,86062,86064,86066,86068,86070],{"class":1004,"line":1012},[1002,86063,28293],{"class":1015},[1002,86065,12925],{"class":1030},[1002,86067,2393],{"class":1015},[1002,86069,4910],{"class":1019},[1002,86071,1407],{"class":1030},[1002,86073,86074,86076,86078,86080,86082,86084,86086],{"class":1004,"line":1047},[1002,86075,85914],{"class":1030},[1002,86077,8408],{"class":1026},[1002,86079,1031],{"class":1030},[1002,86081,6965],{"class":1015},[1002,86083,6513],{"class":1030},[1002,86085,18034],{"class":2378},[1002,86087,2382],{"class":1030},[1002,86089,86090,86092,86094],{"class":1004,"line":1054},[1002,86091,85903],{"class":1030},[1002,86093,6084],{"class":1015},[1002,86095,85935],{"class":1030},[1002,86097,86098],{"class":1004,"line":1060},[1002,86099,19836],{"class":1030},[1002,86101,86102,86105],{"class":1004,"line":1272},[1002,86103,86104],{"class":1015}," return",[1002,86106,17691],{"class":1030},[1002,86108,86109],{"class":1004,"line":1348},[1002,86110,1170],{"class":1030},[1002,86112,86113],{"class":1004,"line":1354},[1002,86114,1051],{"emptyLinePlaceholder":1050},[1002,86116,86117,86119,86121,86123,86125,86127,86129,86131],{"class":1004,"line":1360},[1002,86118,2883],{"class":1030},[1002,86120,2886],{"class":1026},[1002,86122,1031],{"class":1030},[1002,86124,77047],{"class":1026},[1002,86126,1031],{"class":1030},[1002,86128,6211],{"class":1019},[1002,86130,85500],{"class":1030},[1002,86132,50532],{"class":1008},[1002,86134,86135,86137,86139,86141,86143,86145,86147,86149,86151,86153,86155,86157,86159,86161,86163,86165],{"class":1004,"line":1366},[1002,86136,2883],{"class":1030},[1002,86138,2886],{"class":1026},[1002,86140,1031],{"class":1030},[1002,86142,77047],{"class":1026},[1002,86144,1031],{"class":1030},[1002,86146,6211],{"class":1019},[1002,86148,1251],{"class":1030},[1002,86150,5681],{"class":1019},[1002,86152,1251],{"class":1030},[1002,86154,2796],{"class":1019},[1002,86156,1251],{"class":1030},[1002,86158,3837],{"class":1019},[1002,86160,1251],{"class":1030},[1002,86162,2859],{"class":1019},[1002,86164,85500],{"class":1030},[1002,86166,86002],{"class":1008},[7100,86168,86169],{"type":23379},[925,86170,86171],{},"No other named arguments can follow in the function declaration.",[925,86173,86174],{},"The folowing will throw an error:",[993,86176,86178],{"className":995,"code":86177,"language":997,"meta":998,"style":998},"function sum(…numbers, last) { \u002F\u002F causes a syntax error\n",[941,86179,86180],{"__ignoreMap":998},[1002,86181,86182,86184,86186,86188,86190,86192,86194,86197],{"class":1004,"line":1005},[1002,86183,6965],{"class":1015},[1002,86185,85421],{"class":1026},[1002,86187,86054],{"class":1030},[1002,86189,86057],{"class":2378},[1002,86191,1251],{"class":1030},[1002,86193,39006],{"class":2378},[1002,86195,86196],{"class":1030},") { ",[1002,86198,86199],{"class":1008},"\u002F\u002F causes a syntax error\n",[953,86201,31331],{"id":31331},[925,86203,3898,86204,86206],{},[941,86205,31331],{}," is closely related to rest parameters, because of … (three dots) notation. It allows to split an array to single arguments which are passed to the function as separate arguments.",[925,86208,86209],{},"Let’s define our sum function and pass spread to it:",[993,86211,86213],{"className":995,"code":86212,"language":997,"meta":998,"style":998},"function sum(a, b, c) {\n return a + b + c;\n}\n\nvar args = [1, 2, 3];\nconsole.log(sum(…args)); \u002F\u002F 6\n",[941,86214,86215,86235,86249,86253,86257,86279],{"__ignoreMap":998},[1002,86216,86217,86219,86221,86223,86225,86227,86229,86231,86233],{"class":1004,"line":1005},[1002,86218,6965],{"class":1015},[1002,86220,85421],{"class":1026},[1002,86222,1031],{"class":1030},[1002,86224,933],{"class":2378},[1002,86226,1251],{"class":1030},[1002,86228,31621],{"class":2378},[1002,86230,1251],{"class":1030},[1002,86232,77116],{"class":2378},[1002,86234,2382],{"class":1030},[1002,86236,86237,86239,86241,86243,86245,86247],{"class":1004,"line":1012},[1002,86238,15066],{"class":1015},[1002,86240,85662],{"class":1030},[1002,86242,5064],{"class":1015},[1002,86244,85667],{"class":1030},[1002,86246,5064],{"class":1015},[1002,86248,85672],{"class":1030},[1002,86250,86251],{"class":1004,"line":1047},[1002,86252,1170],{"class":1030},[1002,86254,86255],{"class":1004,"line":1054},[1002,86256,1051],{"emptyLinePlaceholder":1050},[1002,86258,86259,86261,86263,86265,86267,86269,86271,86273,86275,86277],{"class":1004,"line":1060},[1002,86260,18311],{"class":1015},[1002,86262,73598],{"class":1030},[1002,86264,2393],{"class":1015},[1002,86266,1897],{"class":1030},[1002,86268,6211],{"class":1019},[1002,86270,1251],{"class":1030},[1002,86272,5681],{"class":1019},[1002,86274,1251],{"class":1030},[1002,86276,2796],{"class":1019},[1002,86278,6754],{"class":1030},[1002,86280,86281,86283,86285,86287,86289,86292],{"class":1004,"line":1272},[1002,86282,2883],{"class":1030},[1002,86284,2886],{"class":1026},[1002,86286,1031],{"class":1030},[1002,86288,77047],{"class":1026},[1002,86290,86291],{"class":1030},"(…args)); ",[1002,86293,51367],{"class":1008},[925,86295,86296,86297,86299,86300,86303],{},"So instead using an ",[941,86298,17677],{}," function, we can just type ",[1107,86301,86302],{},"…args"," and pass all array argument separately.",[925,86305,86306],{},"We can also mix standard arguments with spread operator:",[993,86308,86310],{"className":995,"code":86309,"language":997,"meta":998,"style":998},"function sum(a, b, c) {\n return a + b + c;\n}\n\nvar args = [1, 2];\nconsole.log(sum(…args, 3)); \u002F\u002F 6\n",[941,86311,86312,86332,86346,86350,86354,86372],{"__ignoreMap":998},[1002,86313,86314,86316,86318,86320,86322,86324,86326,86328,86330],{"class":1004,"line":1005},[1002,86315,6965],{"class":1015},[1002,86317,85421],{"class":1026},[1002,86319,1031],{"class":1030},[1002,86321,933],{"class":2378},[1002,86323,1251],{"class":1030},[1002,86325,31621],{"class":2378},[1002,86327,1251],{"class":1030},[1002,86329,77116],{"class":2378},[1002,86331,2382],{"class":1030},[1002,86333,86334,86336,86338,86340,86342,86344],{"class":1004,"line":1012},[1002,86335,15066],{"class":1015},[1002,86337,85662],{"class":1030},[1002,86339,5064],{"class":1015},[1002,86341,85667],{"class":1030},[1002,86343,5064],{"class":1015},[1002,86345,85672],{"class":1030},[1002,86347,86348],{"class":1004,"line":1047},[1002,86349,1170],{"class":1030},[1002,86351,86352],{"class":1004,"line":1054},[1002,86353,1051],{"emptyLinePlaceholder":1050},[1002,86355,86356,86358,86360,86362,86364,86366,86368,86370],{"class":1004,"line":1060},[1002,86357,18311],{"class":1015},[1002,86359,73598],{"class":1030},[1002,86361,2393],{"class":1015},[1002,86363,1897],{"class":1030},[1002,86365,6211],{"class":1019},[1002,86367,1251],{"class":1030},[1002,86369,5681],{"class":1019},[1002,86371,6754],{"class":1030},[1002,86373,86374,86376,86378,86380,86382,86385,86387,86389],{"class":1004,"line":1272},[1002,86375,2883],{"class":1030},[1002,86377,2886],{"class":1026},[1002,86379,1031],{"class":1030},[1002,86381,77047],{"class":1026},[1002,86383,86384],{"class":1030},"(…args, ",[1002,86386,2796],{"class":1019},[1002,86388,85500],{"class":1030},[1002,86390,51367],{"class":1008},[1579,86392,86393],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":86395},[86396,86397,86398],{"id":15278,"depth":1012,"text":15278},{"id":27630,"depth":1012,"text":27630},{"id":31331,"depth":1012,"text":31331},"2015-09-10","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-default-rest-spread.jpg",{},{"title":206,"description":208},"blog\u002Fes6-default-rest-spread",[16,17],"PRaA9tbDwXwzd9FI0KNMyf68wXE1_mD64UIPzKB4xFI",{"id":86407,"title":677,"author":920,"body":86408,"date":86582,"description":679,"extension":1591,"image":86583,"meta":86584,"navigation":1050,"path":678,"seo":86585,"stem":86586,"tags":86587,"__hash__":86588},"blog\u002Fblog\u002Freact-flux.md",{"type":922,"value":86409,"toc":86570},[86410,86414,86417,86421,86424,86430,86433,86439,86441,86444,86450,86454,86461,86464,86477,86480,86485,86490,86493,86500,86503,86506,86509,86512,86519,86522,86528,86530,86538,86541,86544,86550,86556,86559],[953,86411,86413],{"id":86412},"react-components","React components",[925,86415,86416],{},"With ReactJS, you pass properties, and it returns with the rendered DOM. If you pass different data, you will get different responses. This makes them extremely reusable and handy to combine them into an application.",[953,86418,86420],{"id":86419},"top-down-rendering","Top-down rendering",[925,86422,86423],{},"But an application doesn't make much sense without data. When we build a ReactJS app, we start with a root node that takes data as a parameter and pass down its component hierarchy (ie. child components of the root).",[925,86425,86426,86427,948],{},"This feature is called ",[941,86428,86429],{},"top-down rendering",[1655,86431,86432],{"id":19533},"Props",[925,86434,86435,86436,86438],{},"ReactJS properties or ",[1107,86437,19533],{}," object is what gets passed down the component hierarchy.",[1655,86440,8590],{"id":8589},[925,86442,86443],{},"But what if we want to notify the components at a higher level in the hierarchy if something has changed? For instance a button click.",[925,86445,86446,86447,86449],{},"We need something that stores the actual state of our application, something that we can notify if the state should change. The new state should be passed to the root node, and the top-down rendering should be kicked in again to generate (re-render) the new output (DOM) of our application. This is where ",[941,86448,51238],{}," comes into the picture.",[953,86451,86453],{"id":86452},"why-flux","Why Flux?",[925,86455,86456,86457,86460],{},"Flux tries to avoid the complex cross dependencies between your modules (MVC for example) and realize a simple ",[941,86458,86459],{},"one-way data flow",". This helps you to write scalable applications and avoid side effects in your application.",[925,86462,86463],{},"Flux has four main components:",[1530,86465,86466,86469,86472,86474],{},[974,86467,86468],{},"Dispatcher",[974,86470,86471],{},"Stores",[974,86473,69844],{},[974,86475,86476],{},"Views",[925,86478,86479],{},"Below is a diagram showing the components of Flux:",[925,86481,86482],{},[963,86483],{"alt":51238,"src":86484},"https:\u002F\u002Ffacebook.github.io\u002Fflux\u002Fimg\u002Foverview\u002Fflux-simple-f8-diagram-explained-1300w.png",[925,86486,86487],{},[928,86488,86489],{},"Fig. 1 - A view of Flux components and description.",[953,86491,86468],{"id":86492},"dispatcher",[925,86494,86495,86496,86499],{},"According to Facebook, the dispatcher is the ",[941,86497,86498],{},"central hub"," that manages all data flow in a Flux application.",[925,86501,86502],{},"It acts as a registry of callbacks into the stores.",[925,86504,86505],{},"Each store registers itself with the dispatcher and provides a callback routine.",[953,86507,86471],{"id":86508},"stores",[925,86510,86511],{},"Stores contain the application state and logic.",[925,86513,86514,86515,86518],{},"Every Store receives every action from the Dispatcher but a single store handles only the specified events. For example, the User store handles only user specific actions like ",[1107,86516,86517],{},"createUser"," and avoid the other actions.",[925,86520,86521],{},"After the store handled the Action and it's updated, the Store broadcasts a change event. This event will be received by the Views.",[925,86523,86524,86525,948],{},"Store shouldn't be updated externally, the update of the Store should be triggered internally as a response to an Action: ",[941,86526,86527],{},"Inversion of Control",[953,86529,69844],{"id":69843},[925,86531,86532,86533,32093,86535,86537],{},"Actions can have a ",[941,86534,18462],{},[941,86536,69942],{},". They can be triggered by the Views or by the Server (external source). Actions trigger Store updates.",[925,86539,86540],{},"Actions should be descriptive, and should not perform an other action - no cascading actions.",[953,86542,86476],{"id":86543},"views",[925,86545,86546,86547,86549],{},"Views are subscribed for one or multiple Stores and handle the store ",[1107,86548,8695],{}," event.",[925,86551,86552,86553,86555],{},"When a store ",[1107,86554,8695],{}," event is received, the view will get the data from the Store via the Store's getter functions. Then the View will render with the new data.",[925,86557,86558],{},"Here are the steps:",[1530,86560,86561,86564,86567],{},[974,86562,86563],{},"Store change event received",[974,86565,86566],{},"Get data from the Store via getters",[974,86568,86569],{},"Render view",{"title":998,"searchDepth":1012,"depth":1012,"links":86571},[86572,86573,86577,86578,86579,86580,86581],{"id":86412,"depth":1012,"text":86413},{"id":86419,"depth":1012,"text":86420,"children":86574},[86575,86576],{"id":19533,"depth":1047,"text":86432},{"id":8589,"depth":1047,"text":8590},{"id":86452,"depth":1012,"text":86453},{"id":86492,"depth":1012,"text":86468},{"id":86508,"depth":1012,"text":86471},{"id":69843,"depth":1012,"text":69844},{"id":86543,"depth":1012,"text":86476},"2015-09-09","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-flux.jpg",{},{"title":677,"description":679},"blog\u002Freact-flux",[16,17,681],"95SUgJeRig5JaFlRhluP5HOKueRAjoIlD_MH9ctgWEE",{"id":86590,"title":222,"author":920,"body":86591,"date":87228,"description":224,"extension":1591,"image":87229,"meta":87230,"navigation":1050,"path":223,"seo":87231,"stem":87232,"tags":87233,"__hash__":87234},"blog\u002Fblog\u002Fes6-iterators-for-of.md",{"type":922,"value":86592,"toc":87219},[86593,86599,86603,86680,86684,86693,86753,86763,86769,86773,86778,86836,86839,86858,86871,86875,86880,86884,86898,86953,86962,87010,87023,87027,87030,87038,87050,87052,87216],[925,86594,86595,86596,86598],{},"Let's look at the traditional ",[1107,86597,6510],{}," loop:",[953,86600,86602],{"id":86601},"for-loop","for loop",[993,86604,86606],{"className":995,"code":86605,"language":997,"meta":998,"style":998},"var items = ['item1', 'item2', 'item3'];\n\nfor (var i = 0; i \u003C items.length; i++) {\n console.log(items[i]);\n}\n",[941,86607,86608,86634,86638,86667,86676],{"__ignoreMap":998},[1002,86609,86610,86612,86615,86617,86619,86622,86624,86627,86629,86632],{"class":1004,"line":1005},[1002,86611,18311],{"class":1015},[1002,86613,86614],{"class":1030}," items ",[1002,86616,2393],{"class":1015},[1002,86618,1897],{"class":1030},[1002,86620,86621],{"class":1034},"'item1'",[1002,86623,1251],{"class":1030},[1002,86625,86626],{"class":1034},"'item2'",[1002,86628,1251],{"class":1030},[1002,86630,86631],{"class":1034},"'item3'",[1002,86633,6754],{"class":1030},[1002,86635,86636],{"class":1004,"line":1012},[1002,86637,1051],{"emptyLinePlaceholder":1050},[1002,86639,86640,86642,86644,86646,86648,86650,86652,86654,86656,86659,86661,86663,86665],{"class":1004,"line":1047},[1002,86641,6510],{"class":1015},[1002,86643,6513],{"class":1030},[1002,86645,18311],{"class":1015},[1002,86647,6519],{"class":1030},[1002,86649,2393],{"class":1015},[1002,86651,4910],{"class":1019},[1002,86653,6536],{"class":1030},[1002,86655,6539],{"class":1015},[1002,86657,86658],{"class":1030}," items.",[1002,86660,5873],{"class":1019},[1002,86662,16128],{"class":1030},[1002,86664,6545],{"class":1015},[1002,86666,2382],{"class":1030},[1002,86668,86669,86671,86673],{"class":1004,"line":1054},[1002,86670,6977],{"class":1030},[1002,86672,2886],{"class":1026},[1002,86674,86675],{"class":1030},"(items[i]);\n",[1002,86677,86678],{"class":1004,"line":1060},[1002,86679,1170],{"class":1030},[953,86681,86683],{"id":86682},"foreach-loop","forEach loop",[925,86685,86686,86687,86689,86690,86692],{},"With ",[941,86688,65873],{},", you can use the built-in ",[1107,86691,8408],{}," method:",[993,86694,86696],{"className":995,"code":86695,"language":997,"meta":998,"style":998},"var items = ['item1', 'item2', 'item3'];\n\nmyArray.forEach(function (item) {\n console.log(item);\n});\n",[941,86697,86698,86720,86724,86741,86749],{"__ignoreMap":998},[1002,86699,86700,86702,86704,86706,86708,86710,86712,86714,86716,86718],{"class":1004,"line":1005},[1002,86701,18311],{"class":1015},[1002,86703,86614],{"class":1030},[1002,86705,2393],{"class":1015},[1002,86707,1897],{"class":1030},[1002,86709,86621],{"class":1034},[1002,86711,1251],{"class":1030},[1002,86713,86626],{"class":1034},[1002,86715,1251],{"class":1030},[1002,86717,86631],{"class":1034},[1002,86719,6754],{"class":1030},[1002,86721,86722],{"class":1004,"line":1012},[1002,86723,1051],{"emptyLinePlaceholder":1050},[1002,86725,86726,86729,86731,86733,86735,86737,86739],{"class":1004,"line":1047},[1002,86727,86728],{"class":1030},"myArray.",[1002,86730,8408],{"class":1026},[1002,86732,1031],{"class":1030},[1002,86734,6965],{"class":1015},[1002,86736,6513],{"class":1030},[1002,86738,6970],{"class":2378},[1002,86740,2382],{"class":1030},[1002,86742,86743,86745,86747],{"class":1004,"line":1054},[1002,86744,6977],{"class":1030},[1002,86746,2886],{"class":1026},[1002,86748,6886],{"class":1030},[1002,86750,86751],{"class":1004,"line":1060},[1002,86752,2804],{"class":1030},[925,86754,86755,86756,86758,86759,86762],{},"This is shorter than the ",[1107,86757,6510],{}," loop but still you can't break out of the loop using the ",[1107,86760,86761],{},"break"," statement.",[7100,86764,86766],{"title":86765,"type":24048},"For..in",[925,86767,86768],{},"For..in loop iterates through the properties of an object so this is not the ideal solution.",[953,86770,86772],{"id":86771},"forof-loop","for..of loop",[925,86774,86022,86775,86777],{},[941,86776,82594],{}," loop.",[993,86779,86781],{"className":995,"code":86780,"language":997,"meta":998,"style":998},"var items = ['item1', 'item2', 'item3'];\n\nfor (var item of items) {\n console.log(item);\n}\n",[941,86782,86783,86805,86809,86824,86832],{"__ignoreMap":998},[1002,86784,86785,86787,86789,86791,86793,86795,86797,86799,86801,86803],{"class":1004,"line":1005},[1002,86786,18311],{"class":1015},[1002,86788,86614],{"class":1030},[1002,86790,2393],{"class":1015},[1002,86792,1897],{"class":1030},[1002,86794,86621],{"class":1034},[1002,86796,1251],{"class":1030},[1002,86798,86626],{"class":1034},[1002,86800,1251],{"class":1030},[1002,86802,86631],{"class":1034},[1002,86804,6754],{"class":1030},[1002,86806,86807],{"class":1004,"line":1012},[1002,86808,1051],{"emptyLinePlaceholder":1050},[1002,86810,86811,86813,86815,86817,86819,86821],{"class":1004,"line":1047},[1002,86812,6510],{"class":1015},[1002,86814,6513],{"class":1030},[1002,86816,18311],{"class":1015},[1002,86818,6848],{"class":1030},[1002,86820,39708],{"class":1015},[1002,86822,86823],{"class":1030}," items) {\n",[1002,86825,86826,86828,86830],{"class":1004,"line":1054},[1002,86827,6977],{"class":1030},[1002,86829,2886],{"class":1026},[1002,86831,6886],{"class":1030},[1002,86833,86834],{"class":1004,"line":1060},[1002,86835,1170],{"class":1030},[925,86837,86838],{},"Let's look at why it is better than its predecessors:",[1530,86840,86841,86846],{},[974,86842,86843,86844],{},"It avoids the pitfalls of ",[1107,86845,82390],{},[974,86847,86848,86849,86851,86852,1251,86854,36227,86856],{},"Unlike ",[1107,86850,77650],{},", it works with ",[941,86853,86761],{},[941,86855,82150],{},[941,86857,8975],{},[7100,86859,86861],{"title":86860,"type":24048},"for..in vs for..of",[925,86862,86863,86864,86867,86868,86870],{},"The for–in loop is for looping over ",[941,86865,86866],{},"object properties",".\nThe for–of loop is for looping over ",[941,86869,16648],{}," and array-like objects.",[953,86872,86874],{"id":86873},"collections-support-for-forin-loop","Collections support for for..in loop",[925,86876,86877,86879],{},[941,86878,82390],{}," works for other collections apart from the arrays as well.",[1655,86881,86883],{"id":86882},"map-and-set","Map and Set",[925,86885,86886,86888,86889,86891,86892,86894,86895,86897],{},[941,86887,82390],{}," works for ",[1107,86890,32239],{}," & ",[941,86893,51218],{}," objects of ES6. A ",[941,86896,51218],{}," object can be used to eliminate duplicates:",[993,86899,86901],{"className":995,"code":86900,"language":997,"meta":998,"style":998},"var uniqueWords = new Set(words);\n\nfor (var word of uniqueWords) {\n console.log(word);\n}\n",[941,86902,86903,86920,86924,86940,86949],{"__ignoreMap":998},[1002,86904,86905,86907,86910,86912,86914,86917],{"class":1004,"line":1005},[1002,86906,18311],{"class":1015},[1002,86908,86909],{"class":1030}," uniqueWords ",[1002,86911,2393],{"class":1015},[1002,86913,2690],{"class":1015},[1002,86915,86916],{"class":1026}," Set",[1002,86918,86919],{"class":1030},"(words);\n",[1002,86921,86922],{"class":1004,"line":1012},[1002,86923,1051],{"emptyLinePlaceholder":1050},[1002,86925,86926,86928,86930,86932,86935,86937],{"class":1004,"line":1047},[1002,86927,6510],{"class":1015},[1002,86929,6513],{"class":1030},[1002,86931,18311],{"class":1015},[1002,86933,86934],{"class":1030}," word ",[1002,86936,39708],{"class":1015},[1002,86938,86939],{"class":1030}," uniqueWords) {\n",[1002,86941,86942,86944,86946],{"class":1004,"line":1054},[1002,86943,6977],{"class":1030},[1002,86945,2886],{"class":1026},[1002,86947,86948],{"class":1030},"(word);\n",[1002,86950,86951],{"class":1004,"line":1060},[1002,86952,1170],{"class":1030},[925,86954,86955,86956,86958,86959,86961],{},"The data inside ",[941,86957,32239],{}," is made of key-value pairs. You can use ",[941,86960,83448],{}," to unpack these pairs into seprate variables:",[993,86963,86964],{"className":995,"code":86900,"language":997,"meta":998,"style":998},[941,86965,86966,86980,86984,86998,87006],{"__ignoreMap":998},[1002,86967,86968,86970,86972,86974,86976,86978],{"class":1004,"line":1005},[1002,86969,18311],{"class":1015},[1002,86971,86909],{"class":1030},[1002,86973,2393],{"class":1015},[1002,86975,2690],{"class":1015},[1002,86977,86916],{"class":1026},[1002,86979,86919],{"class":1030},[1002,86981,86982],{"class":1004,"line":1012},[1002,86983,1051],{"emptyLinePlaceholder":1050},[1002,86985,86986,86988,86990,86992,86994,86996],{"class":1004,"line":1047},[1002,86987,6510],{"class":1015},[1002,86989,6513],{"class":1030},[1002,86991,18311],{"class":1015},[1002,86993,86934],{"class":1030},[1002,86995,39708],{"class":1015},[1002,86997,86939],{"class":1030},[1002,86999,87000,87002,87004],{"class":1004,"line":1054},[1002,87001,6977],{"class":1030},[1002,87003,2886],{"class":1026},[1002,87005,86948],{"class":1030},[1002,87007,87008],{"class":1004,"line":1060},[1002,87009,1170],{"class":1030},[7100,87011,87012],{"title":43697,"type":23379},[925,87013,87014,87016,87017,87019,87020,948],{},[941,87015,82594],{}," does not work with plain old Objects, but if you want to iterate over an object’s properties you can either use ",[941,87018,82390],{}," or the built-in ",[941,87021,87022],{},"Object.keys()",[953,87024,87026],{"id":87025},"iterators","Iterators",[925,87028,87029],{},"Iterator enables JavaScript objects to define custom iteration like CLR IEnumerable or Java Iterable.",[925,87031,87032,87033,87035,87036,948],{},"This will generalize ",[941,87034,82390],{}," to custom iterator-based iteration with ",[941,87037,82594],{},[7100,87039,87041],{"title":87040,"type":24048},"@@iterator ",[925,87042,87043,87044,87046,87047,948],{},"In order to be iterable, an object must implement the ",[941,87045,82487],{}," method, meaning that the object (or one of the objects up its prototype chain) must have a property with a ",[1107,87048,87049],{},"Symbol.iterator",[925,87051,26058],{},[993,87053,87055],{"className":995,"code":87054,"language":997,"meta":998,"style":998},"var foo = 'foo',\n iter1,\n iter2,\n iter3,\n iter4,\n iterator;\n\niterator = foo[Symbol.iterator]();\n\niter1 = iterator.next();\niter2 = iterator.next();\niter3 = iterator.next();\niter4 = iterator.next();\n\nconsole.log(iter1); \u002F\u002F done: false, value: \"f\"\nconsole.log(iter2); \u002F\u002F done: false, value: \"o\"\nconsole.log(iter3); \u002F\u002F done: false, value: \"o\"\nconsole.log(iter4); \u002F\u002F done: true,value: undefined\n",[941,87056,87057,87070,87075,87080,87085,87090,87095,87099,87109,87113,87126,87139,87152,87165,87169,87181,87193,87204],{"__ignoreMap":998},[1002,87058,87059,87061,87063,87065,87068],{"class":1004,"line":1005},[1002,87060,18311],{"class":1015},[1002,87062,38379],{"class":1030},[1002,87064,2393],{"class":1015},[1002,87066,87067],{"class":1034}," 'foo'",[1002,87069,1143],{"class":1030},[1002,87071,87072],{"class":1004,"line":1012},[1002,87073,87074],{"class":1030}," iter1,\n",[1002,87076,87077],{"class":1004,"line":1047},[1002,87078,87079],{"class":1030}," iter2,\n",[1002,87081,87082],{"class":1004,"line":1054},[1002,87083,87084],{"class":1030}," iter3,\n",[1002,87086,87087],{"class":1004,"line":1060},[1002,87088,87089],{"class":1030}," iter4,\n",[1002,87091,87092],{"class":1004,"line":1272},[1002,87093,87094],{"class":1030}," iterator;\n",[1002,87096,87097],{"class":1004,"line":1348},[1002,87098,1051],{"emptyLinePlaceholder":1050},[1002,87100,87101,87104,87106],{"class":1004,"line":1354},[1002,87102,87103],{"class":1030},"iterator ",[1002,87105,2393],{"class":1015},[1002,87107,87108],{"class":1030}," foo[Symbol.iterator]();\n",[1002,87110,87111],{"class":1004,"line":1360},[1002,87112,1051],{"emptyLinePlaceholder":1050},[1002,87114,87115,87118,87120,87122,87124],{"class":1004,"line":1366},[1002,87116,87117],{"class":1030},"iter1 ",[1002,87119,2393],{"class":1015},[1002,87121,82628],{"class":1030},[1002,87123,6623],{"class":1026},[1002,87125,1428],{"class":1030},[1002,87127,87128,87131,87133,87135,87137],{"class":1004,"line":1946},[1002,87129,87130],{"class":1030},"iter2 ",[1002,87132,2393],{"class":1015},[1002,87134,82628],{"class":1030},[1002,87136,6623],{"class":1026},[1002,87138,1428],{"class":1030},[1002,87140,87141,87144,87146,87148,87150],{"class":1004,"line":1956},[1002,87142,87143],{"class":1030},"iter3 ",[1002,87145,2393],{"class":1015},[1002,87147,82628],{"class":1030},[1002,87149,6623],{"class":1026},[1002,87151,1428],{"class":1030},[1002,87153,87154,87157,87159,87161,87163],{"class":1004,"line":1961},[1002,87155,87156],{"class":1030},"iter4 ",[1002,87158,2393],{"class":1015},[1002,87160,82628],{"class":1030},[1002,87162,6623],{"class":1026},[1002,87164,1428],{"class":1030},[1002,87166,87167],{"class":1004,"line":1971},[1002,87168,1051],{"emptyLinePlaceholder":1050},[1002,87170,87171,87173,87175,87178],{"class":1004,"line":1980},[1002,87172,2883],{"class":1030},[1002,87174,2886],{"class":1026},[1002,87176,87177],{"class":1030},"(iter1); ",[1002,87179,87180],{"class":1008},"\u002F\u002F done: false, value: \"f\"\n",[1002,87182,87183,87185,87187,87190],{"class":1004,"line":1985},[1002,87184,2883],{"class":1030},[1002,87186,2886],{"class":1026},[1002,87188,87189],{"class":1030},"(iter2); ",[1002,87191,87192],{"class":1008},"\u002F\u002F done: false, value: \"o\"\n",[1002,87194,87195,87197,87199,87202],{"class":1004,"line":1995},[1002,87196,2883],{"class":1030},[1002,87198,2886],{"class":1026},[1002,87200,87201],{"class":1030},"(iter3); ",[1002,87203,87192],{"class":1008},[1002,87205,87206,87208,87210,87213],{"class":1004,"line":2006},[1002,87207,2883],{"class":1030},[1002,87209,2886],{"class":1026},[1002,87211,87212],{"class":1030},"(iter4); ",[1002,87214,87215],{"class":1008},"\u002F\u002F done: true,value: undefined\n",[1579,87217,87218],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":87220},[87221,87222,87223,87224,87227],{"id":86601,"depth":1012,"text":86602},{"id":86682,"depth":1012,"text":86683},{"id":86771,"depth":1012,"text":86772},{"id":86873,"depth":1012,"text":86874,"children":87225},[87226],{"id":86882,"depth":1047,"text":86883},{"id":87025,"depth":1012,"text":87026},"2015-09-08","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-iterators-for-of.jpg",{},{"title":222,"description":224},"blog\u002Fes6-iterators-for-of",[16,17],"4rzcMZlflKV6ift9MoE9dft-Iyt4UfnVbZanQj436Rk",{"id":87236,"title":232,"author":920,"body":87237,"date":87851,"description":234,"extension":1591,"image":87852,"meta":87853,"navigation":1050,"path":233,"seo":87854,"stem":87855,"tags":87856,"__hash__":87857},"blog\u002Fblog\u002Fes6-modules.md",{"type":922,"value":87238,"toc":87842},[87239,87242,87250,87261,87270,87281,87293,87299,87302,87316,87320,87324,87335,87337,87380,87383,87425,87430,87434,87437,87486,87490,87493,87496,87529,87532,87565,87569,87575,87672,87676,87682,87832,87839],[925,87240,87241],{},"There are two popular standards for JavaScript module loaders.",[925,87243,87244,87247,87248],{},[1107,87245,87246],{},"CommonJS:"," Used heavily in ",[941,87249,33001],{},[1530,87251,87252,87255,87258],{},[974,87253,87254],{},"Syntactically compact",[974,87256,87257],{},"Loads synchronously",[974,87259,87260],{},"Used by the server",[925,87262,87263,87266,87267],{},[1107,87264,87265],{},"AMD:"," Used by ",[941,87268,87269],{},"RequireJS",[1530,87271,87272,87275,87278],{},[974,87273,87274],{},"Syntactically complex. Enables AMD to work without compilation.",[974,87276,87277],{},"Loads asynchronously",[974,87279,87280],{},"Used by the browser",[7100,87282,87284],{"type":24048,"title":87283},"Import & Export",[925,87285,87286,87287,87289,87290,87292],{},"You have to use the ",[941,87288,947],{}," keyword to explicitly make it available. And use ",[941,87291,943],{}," keyword to use the module.",[925,87294,20721,87295,87298],{},[941,87296,87297],{},"module loader"," provides the ability to dynamically load modules, and also keeps track of all loaded modules in a module registry.",[925,87300,87301],{},"Typically, in production, the module registry would be populated by an initial compiled bundle of modules. Later in the page state, it may become necessary to dynamically load a new module. This module can then share dependencies with the initial page bundle without having to reload any dependencies.",[7100,87303,87305],{"type":24048,"title":87304},"Custom Module Names",[925,87306,87307,87308,87311,87312,87315],{},"Custom module names can be written ",[941,87309,87310],{},".\u002Flocal-module"," to load relative to their parent module name. ",[1107,87313,87314],{},".."," syntax is also supported allowing easily portable modules.",[953,87317,87319],{"id":87318},"es6-modules","ES6 Modules",[1655,87321,87323],{"id":87322},"exporting","Exporting",[925,87325,87326,87327,87330,87331,87334],{},"Syntax of ES6 modules was suppose to be a format that both users of CommonJS and of AMD are happy with. But its most similar to the ",[941,87328,87329],{},"exports.method = function() {}"," pattern in ",[941,87332,87333],{},"NodeJS"," of creating multiple named exports.",[925,87336,87246],{},[993,87338,87340],{"className":995,"code":87339,"language":997,"meta":998,"style":998},"exports.someMethod = function() {\n ...\n};\n\nexports.another = {};\n",[941,87341,87342,87357,87361,87365,87369],{"__ignoreMap":998},[1002,87343,87344,87346,87348,87351,87353,87355],{"class":1004,"line":1005},[1002,87345,1452],{"class":1019},[1002,87347,948],{"class":1030},[1002,87349,87350],{"class":1026},"someMethod",[1002,87352,1023],{"class":1015},[1002,87354,8457],{"class":1015},[1002,87356,3025],{"class":1030},[1002,87358,87359],{"class":1004,"line":1012},[1002,87360,48894],{"class":1015},[1002,87362,87363],{"class":1004,"line":1047},[1002,87364,1517],{"class":1030},[1002,87366,87367],{"class":1004,"line":1054},[1002,87368,1051],{"emptyLinePlaceholder":1050},[1002,87370,87371,87373,87376,87378],{"class":1004,"line":1060},[1002,87372,1452],{"class":1019},[1002,87374,87375],{"class":1030},".another ",[1002,87377,2393],{"class":1015},[1002,87379,7217],{"class":1030},[925,87381,87382],{},"In ES6, this will be written as:",[993,87384,87386],{"className":995,"code":87385,"language":997,"meta":998,"style":998},"export function someMethod() {\n ...\n}\n\nexport var another = {};\n",[941,87387,87388,87399,87403,87407,87411],{"__ignoreMap":998},[1002,87389,87390,87392,87394,87397],{"class":1004,"line":1005},[1002,87391,947],{"class":1015},[1002,87393,8457],{"class":1015},[1002,87395,87396],{"class":1026}," someMethod",[1002,87398,3025],{"class":1030},[1002,87400,87401],{"class":1004,"line":1012},[1002,87402,48894],{"class":1015},[1002,87404,87405],{"class":1004,"line":1047},[1002,87406,1170],{"class":1030},[1002,87408,87409],{"class":1004,"line":1054},[1002,87410,1051],{"emptyLinePlaceholder":1050},[1002,87412,87413,87415,87418,87421,87423],{"class":1004,"line":1060},[1002,87414,947],{"class":1015},[1002,87416,87417],{"class":1015}," var",[1002,87419,87420],{"class":1030}," another ",[1002,87422,2393],{"class":1015},[1002,87424,7217],{"class":1030},[7100,87426,87427],{"type":24048},[925,87428,87429],{},"Notice that the name of the function, class or variable gets used as the export name.",[1655,87431,87433],{"id":87432},"importing","Importing",[925,87435,87436],{},"When importing, we import any exports we need by name, and can also choose to rename them:",[993,87438,87440],{"className":995,"code":87439,"language":997,"meta":998,"style":998},"import { someMethod, another as newName } from '.\u002Fexporter';\n\nsomeMethod();\ntypeof newName == 'object';\n",[941,87441,87442,87461,87465,87471],{"__ignoreMap":998},[1002,87443,87444,87446,87449,87451,87454,87456,87459],{"class":1004,"line":1005},[1002,87445,943],{"class":1015},[1002,87447,87448],{"class":1030}," { someMethod, another ",[1002,87450,23719],{"class":1015},[1002,87452,87453],{"class":1030}," newName } ",[1002,87455,1068],{"class":1015},[1002,87457,87458],{"class":1034}," '.\u002Fexporter'",[1002,87460,1407],{"class":1030},[1002,87462,87463],{"class":1004,"line":1012},[1002,87464,1051],{"emptyLinePlaceholder":1050},[1002,87466,87467,87469],{"class":1004,"line":1047},[1002,87468,87350],{"class":1026},[1002,87470,1428],{"class":1030},[1002,87472,87473,87475,87478,87481,87484],{"class":1004,"line":1054},[1002,87474,33724],{"class":1015},[1002,87476,87477],{"class":1030}," newName ",[1002,87479,87480],{"class":1015},"==",[1002,87482,87483],{"class":1034}," 'object'",[1002,87485,1407],{"class":1030},[1655,87487,87489],{"id":87488},"default-import-and-export","Default Import and Export",[925,87491,87492],{},"Sometimes one doesn't want to write an import name at all. For this we can use the default export:",[925,87494,87495],{},"To export:",[993,87497,87499],{"className":995,"code":87498,"language":997,"meta":998,"style":998},"export default function foo() {\n console.log('foo');\n}\n",[941,87500,87501,87513,87525],{"__ignoreMap":998},[1002,87502,87503,87505,87507,87509,87511],{"class":1004,"line":1005},[1002,87504,947],{"class":1015},[1002,87506,15641],{"class":1015},[1002,87508,8457],{"class":1015},[1002,87510,34640],{"class":1026},[1002,87512,3025],{"class":1030},[1002,87514,87515,87517,87519,87521,87523],{"class":1004,"line":1012},[1002,87516,6977],{"class":1030},[1002,87518,2886],{"class":1026},[1002,87520,1031],{"class":1030},[1002,87522,34812],{"class":1034},[1002,87524,1085],{"class":1030},[1002,87526,87527],{"class":1004,"line":1047},[1002,87528,1170],{"class":1030},[925,87530,87531],{},"To import:",[993,87533,87535],{"className":995,"code":87534,"language":997,"meta":998,"style":998},"import customName from '.\u002Fexport-default';\n\ncustomName(); \u002F\u002F -> 'foo'\n",[941,87536,87537,87551,87555],{"__ignoreMap":998},[1002,87538,87539,87541,87544,87546,87549],{"class":1004,"line":1005},[1002,87540,943],{"class":1015},[1002,87542,87543],{"class":1030}," customName ",[1002,87545,1068],{"class":1015},[1002,87547,87548],{"class":1034}," '.\u002Fexport-default'",[1002,87550,1407],{"class":1030},[1002,87552,87553],{"class":1004,"line":1012},[1002,87554,1051],{"emptyLinePlaceholder":1050},[1002,87556,87557,87560,87562],{"class":1004,"line":1047},[1002,87558,87559],{"class":1026},"customName",[1002,87561,6859],{"class":1030},[1002,87563,87564],{"class":1008},"\u002F\u002F -> 'foo'\n",[1655,87566,87568],{"id":87567},"supported-import-syntax","Supported Import Syntax",[925,87570,87571,87572,87574],{},"There are a few other variations of module syntax, the full list of supported ",[941,87573,943],{}," statements is listed below:",[993,87576,87578],{"className":995,"code":87577,"language":997,"meta":998,"style":998},"\u002F* import a module without any import bindings *\u002F\nimport 'jquery';\n\u002F* import the default export of a module *\u002F\nimport $ from 'jquery';\n\u002F* import a named export of a module *\u002F\nimport { $ } from 'jquery';\n\u002F* import a named export to a different name *\u002F\nimport { $ as jQuery } from 'jquery';\n\u002F* import an entire module instance object *\u002F\nimport * as crypto from 'crypto';\n",[941,87579,87580,87585,87594,87599,87612,87617,87630,87635,87648,87653],{"__ignoreMap":998},[1002,87581,87582],{"class":1004,"line":1005},[1002,87583,87584],{"class":1008},"\u002F* import a module without any import bindings *\u002F\n",[1002,87586,87587,87589,87592],{"class":1004,"line":1012},[1002,87588,943],{"class":1015},[1002,87590,87591],{"class":1034}," 'jquery'",[1002,87593,1407],{"class":1030},[1002,87595,87596],{"class":1004,"line":1047},[1002,87597,87598],{"class":1008},"\u002F* import the default export of a module *\u002F\n",[1002,87600,87601,87603,87606,87608,87610],{"class":1004,"line":1054},[1002,87602,943],{"class":1015},[1002,87604,87605],{"class":1030}," $ ",[1002,87607,1068],{"class":1015},[1002,87609,87591],{"class":1034},[1002,87611,1407],{"class":1030},[1002,87613,87614],{"class":1004,"line":1060},[1002,87615,87616],{"class":1008},"\u002F* import a named export of a module *\u002F\n",[1002,87618,87619,87621,87624,87626,87628],{"class":1004,"line":1272},[1002,87620,943],{"class":1015},[1002,87622,87623],{"class":1030}," { $ } ",[1002,87625,1068],{"class":1015},[1002,87627,87591],{"class":1034},[1002,87629,1407],{"class":1030},[1002,87631,87632],{"class":1004,"line":1348},[1002,87633,87634],{"class":1008},"\u002F* import a named export to a different name *\u002F\n",[1002,87636,87637,87639,87642,87644,87646],{"class":1004,"line":1354},[1002,87638,943],{"class":1015},[1002,87640,87641],{"class":1030}," { $ as jQuery } ",[1002,87643,1068],{"class":1015},[1002,87645,87591],{"class":1034},[1002,87647,1407],{"class":1030},[1002,87649,87650],{"class":1004,"line":1360},[1002,87651,87652],{"class":1008},"\u002F* import an entire module instance object *\u002F\n",[1002,87654,87655,87657,87659,87662,87665,87667,87670],{"class":1004,"line":1366},[1002,87656,943],{"class":1015},[1002,87658,6090],{"class":1019},[1002,87660,87661],{"class":1015}," as",[1002,87663,87664],{"class":1030}," crypto ",[1002,87666,1068],{"class":1015},[1002,87668,87669],{"class":1034}," 'crypto'",[1002,87671,1407],{"class":1030},[1655,87673,87675],{"id":87674},"supported-export-syntax","Supported Export Syntax",[925,87677,87678,87679,87681],{},"A full list of supported ",[941,87680,947],{}," statements list:",[993,87683,87685],{"className":995,"code":87684,"language":997,"meta":998,"style":998},"\u002F* export a named variable *\u002F\nexport var x = 42;\n\u002F* export a named function *\u002F\nexport function foo() {};\n\n\u002F* export the default export *\u002F\nexport default 42;\n\u002F* export the default export as a function *\u002F\nexport default function foo() {};\n\n\u002F* export an existing variable *\u002F\nexport { encrypt };\n\u002F* export a variable as a new name *\u002F\nexport { decrypt as dec };\n\u002F* export an export from another module *\u002F\nexport { encrypt as en } from 'crypto';\n\u002F* export all exports from another module *\u002F\nexport * from 'crypto';\n",[941,87686,87687,87692,87707,87712,87723,87727,87732,87742,87747,87759,87763,87768,87775,87780,87792,87797,87815,87820],{"__ignoreMap":998},[1002,87688,87689],{"class":1004,"line":1005},[1002,87690,87691],{"class":1008},"\u002F* export a named variable *\u002F\n",[1002,87693,87694,87696,87698,87700,87702,87705],{"class":1004,"line":1012},[1002,87695,947],{"class":1015},[1002,87697,87417],{"class":1015},[1002,87699,77069],{"class":1030},[1002,87701,2393],{"class":1015},[1002,87703,87704],{"class":1019}," 42",[1002,87706,1407],{"class":1030},[1002,87708,87709],{"class":1004,"line":1047},[1002,87710,87711],{"class":1008},"\u002F* export a named function *\u002F\n",[1002,87713,87714,87716,87718,87720],{"class":1004,"line":1054},[1002,87715,947],{"class":1015},[1002,87717,8457],{"class":1015},[1002,87719,34640],{"class":1026},[1002,87721,87722],{"class":1030},"() {};\n",[1002,87724,87725],{"class":1004,"line":1060},[1002,87726,1051],{"emptyLinePlaceholder":1050},[1002,87728,87729],{"class":1004,"line":1272},[1002,87730,87731],{"class":1008},"\u002F* export the default export *\u002F\n",[1002,87733,87734,87736,87738,87740],{"class":1004,"line":1348},[1002,87735,947],{"class":1015},[1002,87737,15641],{"class":1015},[1002,87739,87704],{"class":1019},[1002,87741,1407],{"class":1030},[1002,87743,87744],{"class":1004,"line":1354},[1002,87745,87746],{"class":1008},"\u002F* export the default export as a function *\u002F\n",[1002,87748,87749,87751,87753,87755,87757],{"class":1004,"line":1360},[1002,87750,947],{"class":1015},[1002,87752,15641],{"class":1015},[1002,87754,8457],{"class":1015},[1002,87756,34640],{"class":1026},[1002,87758,87722],{"class":1030},[1002,87760,87761],{"class":1004,"line":1366},[1002,87762,1051],{"emptyLinePlaceholder":1050},[1002,87764,87765],{"class":1004,"line":1946},[1002,87766,87767],{"class":1008},"\u002F* export an existing variable *\u002F\n",[1002,87769,87770,87772],{"class":1004,"line":1956},[1002,87771,947],{"class":1015},[1002,87773,87774],{"class":1030}," { encrypt };\n",[1002,87776,87777],{"class":1004,"line":1961},[1002,87778,87779],{"class":1008},"\u002F* export a variable as a new name *\u002F\n",[1002,87781,87782,87784,87787,87789],{"class":1004,"line":1971},[1002,87783,947],{"class":1015},[1002,87785,87786],{"class":1030}," { decrypt ",[1002,87788,23719],{"class":1015},[1002,87790,87791],{"class":1030}," dec };\n",[1002,87793,87794],{"class":1004,"line":1980},[1002,87795,87796],{"class":1008},"\u002F* export an export from another module *\u002F\n",[1002,87798,87799,87801,87804,87806,87809,87811,87813],{"class":1004,"line":1985},[1002,87800,947],{"class":1015},[1002,87802,87803],{"class":1030}," { encrypt ",[1002,87805,23719],{"class":1015},[1002,87807,87808],{"class":1030}," en } ",[1002,87810,1068],{"class":1015},[1002,87812,87669],{"class":1034},[1002,87814,1407],{"class":1030},[1002,87816,87817],{"class":1004,"line":1995},[1002,87818,87819],{"class":1008},"\u002F* export all exports from another module *\u002F\n",[1002,87821,87822,87824,87826,87828,87830],{"class":1004,"line":2006},[1002,87823,947],{"class":1015},[1002,87825,6090],{"class":1019},[1002,87827,65134],{"class":1015},[1002,87829,87669],{"class":1034},[1002,87831,1407],{"class":1030},[925,87833,87834,87835,36227,87837,948],{},"Note that any valid declaration can be exported. In ES6, this includes class (as in the example above), ",[941,87836,1016],{},[941,87838,6516],{},[1579,87840,87841],{},"html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":87843},[87844],{"id":87318,"depth":1012,"text":87319,"children":87845},[87846,87847,87848,87849,87850],{"id":87322,"depth":1047,"text":87323},{"id":87432,"depth":1047,"text":87433},{"id":87488,"depth":1047,"text":87489},{"id":87567,"depth":1047,"text":87568},{"id":87674,"depth":1047,"text":87675},"2015-09-06","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-modules.jpg",{},{"title":232,"description":234},"blog\u002Fes6-modules",[16,17],"om32ZaB8nCRI_iieBz_OmuNf8SaAa40Oe62nTka3E9g",{"id":87859,"title":751,"author":920,"body":87860,"date":88434,"description":753,"extension":1591,"image":88435,"meta":88436,"navigation":1050,"path":752,"seo":88437,"stem":88438,"tags":88439,"__hash__":88440},"blog\u002Fblog\u002Fsass-control-directives.md",{"type":922,"value":87861,"toc":88427},[87862,87865,87868,87873,87879,87931,87934,87966,87969,87994,87997,88002,88005,88058,88067,88070,88075,88081,88084,88143,88146,88224,88227,88240,88319,88322,88419,88421,88424],[925,87863,87864],{},"These control directives will keep you from writing repetitive style declaration and condition logic, that might be the case with CSS.",[953,87866,87867],{"id":46126},"@if",[925,87869,3898,87870,87872],{},[1107,87871,87867],{}," control directive is useful conditional styling.",[925,87874,87875,87876,87878],{},"If the expression returns anything other than ",[941,87877,19341],{},", it will process its block of styles.",[993,87880,87882],{"className":35707,"code":87881,"language":29,"meta":998,"style":998},"@mixin setBorderColor($state) {\n @if $state == 'important' {\n border-color: red;\n } @else {\n border-color: black;\n }\n}\n",[941,87883,87884,87892,87900,87907,87916,87923,87927],{"__ignoreMap":998},[1002,87885,87886,87889],{"class":1004,"line":1005},[1002,87887,87888],{"class":1015},"@mixin",[1002,87890,87891],{"class":1030}," setBorderColor($state) {\n",[1002,87893,87894,87897],{"class":1004,"line":1012},[1002,87895,87896],{"class":1015}," @if",[1002,87898,87899],{"class":1030}," $state == 'important' {\n",[1002,87901,87902,87905],{"class":1004,"line":1047},[1002,87903,87904],{"class":15711}," border-color",[1002,87906,72102],{"class":1030},[1002,87908,87909,87911,87914],{"class":1004,"line":1054},[1002,87910,30770],{"class":1030},[1002,87912,87913],{"class":1015},"@else",[1002,87915,1235],{"class":1030},[1002,87917,87918,87920],{"class":1004,"line":1060},[1002,87919,87904],{"class":15711},[1002,87921,87922],{"class":1030},": black;\n",[1002,87924,87925],{"class":1004,"line":1272},[1002,87926,1269],{"class":1030},[1002,87928,87929],{"class":1004,"line":1348},[1002,87930,1170],{"class":1030},[925,87932,87933],{},"You can use this mixin as below:",[993,87935,87937],{"className":35707,"code":87936,"language":29,"meta":998,"style":998},".class-name {\n @include setBorderColor(important);\n}\n",[941,87938,87939,87946,87962],{"__ignoreMap":998},[1002,87940,87941,87944],{"class":1004,"line":1005},[1002,87942,87943],{"class":1026},".class-name",[1002,87945,1457],{"class":1030},[1002,87947,87948,87950,87952,87955,87957,87960],{"class":1004,"line":1012},[1002,87949,17196],{"class":1030},[1002,87951,43818],{"class":1019},[1002,87953,87954],{"class":1019}," setBorderColor",[1002,87956,1031],{"class":1030},[1002,87958,87959],{"class":1019},"important",[1002,87961,1085],{"class":1030},[1002,87963,87964],{"class":1004,"line":1047},[1002,87965,1170],{"class":1030},[925,87967,87968],{},"This will give us:",[993,87970,87972],{"className":35707,"code":87971,"language":29,"meta":998,"style":998},".class-name {\n border-color: red;\n}\n",[941,87973,87974,87980,87990],{"__ignoreMap":998},[1002,87975,87976,87978],{"class":1004,"line":1005},[1002,87977,87943],{"class":1026},[1002,87979,1457],{"class":1030},[1002,87981,87982,87984,87986,87988],{"class":1004,"line":1012},[1002,87983,73250],{"class":1019},[1002,87985,1137],{"class":1030},[1002,87987,70923],{"class":1019},[1002,87989,1407],{"class":1030},[1002,87991,87992],{"class":1004,"line":1047},[1002,87993,1170],{"class":1030},[953,87995,87996],{"id":6510},"@for",[925,87998,3898,87999,88001],{},[1107,88000,87996],{}," directive is a loop that has a start point and loops through to an endpoint. You can set @for to either cycle through the loop, or run from a starting point to an ending point.",[925,88003,88004],{},"The loop syntax is as follows:",[993,88006,88008],{"className":35707,"code":88007,"language":29,"meta":998,"style":998},"@for $i from 1 through 12 {\n .column-#{$i} {\n width: 100% \u002F 13 - $i;\n }\n}\n",[941,88009,88010,88017,88030,88050,88054],{"__ignoreMap":998},[1002,88011,88012,88014],{"class":1004,"line":1005},[1002,88013,87996],{"class":1015},[1002,88015,88016],{"class":1030}," $i from 1 through 12 {\n",[1002,88018,88019,88022,88025,88027],{"class":1004,"line":1012},[1002,88020,88021],{"class":1026}," .column-",[1002,88023,88024],{"class":1030},"#{$",[1002,88026,12031],{"class":1019},[1002,88028,88029],{"class":1030},"} {\n",[1002,88031,88032,88035,88037,88039,88041,88044,88047],{"class":1004,"line":1047},[1002,88033,88034],{"class":1019}," width",[1002,88036,1137],{"class":1030},[1002,88038,4791],{"class":1019},[1002,88040,32598],{"class":1015},[1002,88042,88043],{"class":1030}," \u002F ",[1002,88045,88046],{"class":1019},"13",[1002,88048,88049],{"class":1030}," - $i;\n",[1002,88051,88052],{"class":1004,"line":1054},[1002,88053,2014],{"class":1030},[1002,88055,88056],{"class":1004,"line":1060},[1002,88057,1170],{"class":1030},[925,88059,45029,88060,88063,88064,88066],{},[1107,88061,88062],{},"through"," will run the loop from the first iteration through the end. Using ",[1107,88065,7105],{}," will run each iteration in the loop until, but not including, the end iteration.",[953,88068,88069],{"id":6633},"@each",[925,88071,88072,88074],{},[941,88073,88069],{}," loops through Sass variable lists to generate CSS.",[925,88076,88077,88078,948],{},"The syntax looks like ",[941,88079,88080],{},"@each $var in",[925,88082,88083],{},"Lets look at an example:",[993,88085,88087],{"className":35707,"code":88086,"language":29,"meta":998,"style":998},"$align-list: center, left, right;\n\n@each $align in $align-list {\n .txt-#{$align} {\n text-align: $align;\n }\n}\n",[941,88088,88089,88104,88108,88115,88127,88135,88139],{"__ignoreMap":998},[1002,88090,88091,88093,88096,88098,88101],{"class":1004,"line":1005},[1002,88092,15864],{"class":1030},[1002,88094,88095],{"class":15711},"align-list",[1002,88097,1137],{"class":1030},[1002,88099,88100],{"class":15711},"center",[1002,88102,88103],{"class":1030},", left, right;\n",[1002,88105,88106],{"class":1004,"line":1012},[1002,88107,1051],{"emptyLinePlaceholder":1050},[1002,88109,88110,88112],{"class":1004,"line":1047},[1002,88111,88069],{"class":1015},[1002,88113,88114],{"class":1030}," $align in $align-list {\n",[1002,88116,88117,88120,88122,88125],{"class":1004,"line":1054},[1002,88118,88119],{"class":1026}," .txt-",[1002,88121,88024],{"class":1030},[1002,88123,88124],{"class":1019},"align",[1002,88126,88029],{"class":1030},[1002,88128,88129,88132],{"class":1004,"line":1060},[1002,88130,88131],{"class":1019}," text-align",[1002,88133,88134],{"class":1030},": $align;\n",[1002,88136,88137],{"class":1004,"line":1272},[1002,88138,2014],{"class":1030},[1002,88140,88141],{"class":1004,"line":1348},[1002,88142,1170],{"class":1030},[925,88144,88145],{},"The cimpiled CSS will look like:",[993,88147,88149],{"className":35707,"code":88148,"language":29,"meta":998,"style":998},".txt-center {\n text-align: center;\n}\n\n.txt-left {\n text-align: left;\n}\n\n.txt-right {\n text-align: right;\n}\n",[941,88150,88151,88158,88169,88173,88177,88184,88194,88198,88202,88209,88220],{"__ignoreMap":998},[1002,88152,88153,88156],{"class":1004,"line":1005},[1002,88154,88155],{"class":1026},".txt-center",[1002,88157,1457],{"class":1030},[1002,88159,88160,88163,88165,88167],{"class":1004,"line":1012},[1002,88161,88162],{"class":1019}," text-align",[1002,88164,1137],{"class":1030},[1002,88166,88100],{"class":1019},[1002,88168,1407],{"class":1030},[1002,88170,88171],{"class":1004,"line":1047},[1002,88172,1170],{"class":1030},[1002,88174,88175],{"class":1004,"line":1054},[1002,88176,1051],{"emptyLinePlaceholder":1050},[1002,88178,88179,88182],{"class":1004,"line":1060},[1002,88180,88181],{"class":1026},".txt-left",[1002,88183,1457],{"class":1030},[1002,88185,88186,88188,88190,88192],{"class":1004,"line":1272},[1002,88187,88162],{"class":1019},[1002,88189,1137],{"class":1030},[1002,88191,39753],{"class":1019},[1002,88193,1407],{"class":1030},[1002,88195,88196],{"class":1004,"line":1348},[1002,88197,1170],{"class":1030},[1002,88199,88200],{"class":1004,"line":1354},[1002,88201,1051],{"emptyLinePlaceholder":1050},[1002,88203,88204,88207],{"class":1004,"line":1360},[1002,88205,88206],{"class":1026},".txt-right",[1002,88208,1457],{"class":1030},[1002,88210,88211,88213,88215,88218],{"class":1004,"line":1366},[1002,88212,88162],{"class":1019},[1002,88214,1137],{"class":1030},[1002,88216,88217],{"class":1019},"right",[1002,88219,1407],{"class":1030},[1002,88221,88222],{"class":1004,"line":1946},[1002,88223,1170],{"class":1030},[953,88225,88226],{"id":34583},"@while",[925,88228,3898,88229,88231,88232,88234,88235,88237,88238,948],{},[941,88230,88226],{}," directive works similiarly to the ",[941,88233,87996],{}," directive, but instead of going through a list of values, the ",[941,88236,88226],{}," directive will run until the value returns ",[1107,88239,19341],{},[993,88241,88243],{"className":35707,"code":88242,"language":29,"meta":998,"style":998},"$btn-sizes: 6;\n$btn-padding: 4px;\n\n@while $btn-sizes > 0 {\n .btn-pad-#{$btn-sizes \u002F 2} {\n padding: $btn-padding + $btn-sizes $btn-padding * $btn-sizes;\n }\n $btn-sizes: $btn-sizes - 2;\n}\n",[941,88244,88245,88255,88265,88269,88276,88288,88296,88300,88315],{"__ignoreMap":998},[1002,88246,88247,88249,88252],{"class":1004,"line":1005},[1002,88248,15864],{"class":1030},[1002,88250,88251],{"class":15711},"btn-sizes",[1002,88253,88254],{"class":1030},": 6;\n",[1002,88256,88257,88259,88262],{"class":1004,"line":1012},[1002,88258,15864],{"class":1030},[1002,88260,88261],{"class":15711},"btn-padding",[1002,88263,88264],{"class":1030},": 4px;\n",[1002,88266,88267],{"class":1004,"line":1047},[1002,88268,1051],{"emptyLinePlaceholder":1050},[1002,88270,88271,88273],{"class":1004,"line":1054},[1002,88272,88226],{"class":1015},[1002,88274,88275],{"class":1030}," $btn-sizes > 0 {\n",[1002,88277,88278,88281,88283,88285],{"class":1004,"line":1060},[1002,88279,88280],{"class":1026}," .btn-pad-",[1002,88282,88024],{"class":1030},[1002,88284,88251],{"class":1019},[1002,88286,88287],{"class":1030}," \u002F 2} {\n",[1002,88289,88290,88293],{"class":1004,"line":1272},[1002,88291,88292],{"class":1019}," padding",[1002,88294,88295],{"class":1030},": $btn-padding + $btn-sizes $btn-padding * $btn-sizes;\n",[1002,88297,88298],{"class":1004,"line":1348},[1002,88299,1269],{"class":1030},[1002,88301,88302,88305,88307,88310,88312],{"class":1004,"line":1354},[1002,88303,88304],{"class":1030}," $",[1002,88306,88251],{"class":15711},[1002,88308,88309],{"class":1030},": $",[1002,88311,88251],{"class":15711},[1002,88313,88314],{"class":1030}," - 2;\n",[1002,88316,88317],{"class":1004,"line":1360},[1002,88318,1170],{"class":1030},[925,88320,88321],{},"This code will be compiled into:",[993,88323,88325],{"className":35707,"code":88324,"language":29,"meta":998,"style":998},".btn-pad-3 {\n padding: 10px 24px;\n}\n\n.btn-pad-2 {\n padding: 8px 16px;\n}\n\n.btn-pad-1 {\n padding: 6px 8px;\n}\n",[941,88326,88327,88334,88351,88355,88359,88366,88383,88387,88391,88398,88415],{"__ignoreMap":998},[1002,88328,88329,88332],{"class":1004,"line":1005},[1002,88330,88331],{"class":1026},".btn-pad-3",[1002,88333,1457],{"class":1030},[1002,88335,88336,88338,88340,88342,88344,88347,88349],{"class":1004,"line":1012},[1002,88337,37280],{"class":1019},[1002,88339,1137],{"class":1030},[1002,88341,4818],{"class":1019},[1002,88343,43835],{"class":1015},[1002,88345,88346],{"class":1019}," 24",[1002,88348,43835],{"class":1015},[1002,88350,1407],{"class":1030},[1002,88352,88353],{"class":1004,"line":1047},[1002,88354,1170],{"class":1030},[1002,88356,88357],{"class":1004,"line":1054},[1002,88358,1051],{"emptyLinePlaceholder":1050},[1002,88360,88361,88364],{"class":1004,"line":1060},[1002,88362,88363],{"class":1026},".btn-pad-2",[1002,88365,1457],{"class":1030},[1002,88367,88368,88370,88372,88374,88376,88379,88381],{"class":1004,"line":1272},[1002,88369,37280],{"class":1019},[1002,88371,1137],{"class":1030},[1002,88373,31435],{"class":1019},[1002,88375,43835],{"class":1015},[1002,88377,88378],{"class":1019}," 16",[1002,88380,43835],{"class":1015},[1002,88382,1407],{"class":1030},[1002,88384,88385],{"class":1004,"line":1348},[1002,88386,1170],{"class":1030},[1002,88388,88389],{"class":1004,"line":1354},[1002,88390,1051],{"emptyLinePlaceholder":1050},[1002,88392,88393,88396],{"class":1004,"line":1360},[1002,88394,88395],{"class":1026},".btn-pad-1",[1002,88397,1457],{"class":1030},[1002,88399,88400,88402,88404,88406,88408,88411,88413],{"class":1004,"line":1366},[1002,88401,37280],{"class":1019},[1002,88403,1137],{"class":1030},[1002,88405,51334],{"class":1019},[1002,88407,43835],{"class":1015},[1002,88409,88410],{"class":1019}," 8",[1002,88412,43835],{"class":1015},[1002,88414,1407],{"class":1030},[1002,88416,88417],{"class":1004,"line":1946},[1002,88418,1170],{"class":1030},[953,88420,26561],{"id":26560},[925,88422,88423],{},"All of these directives can end up saving you quite a bit of repetitive CSS. But use them sparingly, only when necessary.",[1579,88425,88426],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":88428},[88429,88430,88431,88432,88433],{"id":46126,"depth":1012,"text":87867},{"id":6510,"depth":1012,"text":87996},{"id":6633,"depth":1012,"text":88069},{"id":34583,"depth":1012,"text":88226},{"id":26560,"depth":1012,"text":26561},"2015-09-05","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsass-control-directives.jpg",{},{"title":751,"description":753},"blog\u002Fsass-control-directives",[16,17],"juE5vGUK9VNSVa8BnBceP5trPvBh9v495_sHhuuSXXI",{"id":88442,"title":227,"author":920,"body":88443,"date":88932,"description":229,"extension":1591,"image":88933,"meta":88934,"navigation":1050,"path":228,"seo":88935,"stem":88936,"tags":88937,"__hash__":88938},"blog\u002Fblog\u002Fes6-let-const.md",{"type":922,"value":88444,"toc":88928},[88445,88447,88461,88464,88613,88618,88766,88781,88791,88793,88801,88861,88866,88869,88925],[953,88446,6516],{"id":6516},[925,88448,88449,88450,88452,88453,88455,88456,44928,88458,88460],{},"We can imagine that ",[941,88451,6516],{}," is a new ",[941,88454,18311],{}," statement. But there is no need to replace every ",[941,88457,18311],{},[941,88459,6516],{},", but only when you require a block scoped variables.",[925,88462,88463],{},"Firstly, imagine and old way (and still valid) to declare a new variable in your JS code using ES5:",[993,88465,88467],{"className":995,"code":88466,"language":997,"meta":998,"style":998},"var foo = 1;\n\nconsole.log(foo); \u002F\u002F 1\n\n{\n var bar = 2;\n console.log(bar); \u002F\u002F 2\n}\n\nfunction fn() {\n console.log(foo); \u002F\u002F undefined\n var foo = 3;\n console.log(foo); \u002F\u002F 3\n}\n\nfn();\n\nconsole.log(foo); \u002F\u002F 1\nconsole.log(bar); \u002F\u002F 2\n",[941,88468,88469,88481,88485,88496,88500,88504,88516,88527,88531,88535,88543,88553,88565,88575,88579,88583,88589,88593,88603],{"__ignoreMap":998},[1002,88470,88471,88473,88475,88477,88479],{"class":1004,"line":1005},[1002,88472,18311],{"class":1015},[1002,88474,38379],{"class":1030},[1002,88476,2393],{"class":1015},[1002,88478,6246],{"class":1019},[1002,88480,1407],{"class":1030},[1002,88482,88483],{"class":1004,"line":1012},[1002,88484,1051],{"emptyLinePlaceholder":1050},[1002,88486,88487,88489,88491,88494],{"class":1004,"line":1047},[1002,88488,2883],{"class":1030},[1002,88490,2886],{"class":1026},[1002,88492,88493],{"class":1030},"(foo); ",[1002,88495,50532],{"class":1008},[1002,88497,88498],{"class":1004,"line":1054},[1002,88499,1051],{"emptyLinePlaceholder":1050},[1002,88501,88502],{"class":1004,"line":1060},[1002,88503,1129],{"class":1030},[1002,88505,88506,88508,88510,88512,88514],{"class":1004,"line":1272},[1002,88507,28293],{"class":1015},[1002,88509,38350],{"class":1030},[1002,88511,2393],{"class":1015},[1002,88513,10248],{"class":1019},[1002,88515,1407],{"class":1030},[1002,88517,88518,88520,88522,88525],{"class":1004,"line":1348},[1002,88519,6977],{"class":1030},[1002,88521,2886],{"class":1026},[1002,88523,88524],{"class":1030},"(bar); ",[1002,88526,31325],{"class":1008},[1002,88528,88529],{"class":1004,"line":1354},[1002,88530,1170],{"class":1030},[1002,88532,88533],{"class":1004,"line":1360},[1002,88534,1051],{"emptyLinePlaceholder":1050},[1002,88536,88537,88539,88541],{"class":1004,"line":1366},[1002,88538,6965],{"class":1015},[1002,88540,32492],{"class":1026},[1002,88542,3025],{"class":1030},[1002,88544,88545,88547,88549,88551],{"class":1004,"line":1946},[1002,88546,6977],{"class":1030},[1002,88548,2886],{"class":1026},[1002,88550,88493],{"class":1030},[1002,88552,26478],{"class":1008},[1002,88554,88555,88557,88559,88561,88563],{"class":1004,"line":1956},[1002,88556,28293],{"class":1015},[1002,88558,38379],{"class":1030},[1002,88560,2393],{"class":1015},[1002,88562,17813],{"class":1019},[1002,88564,1407],{"class":1030},[1002,88566,88567,88569,88571,88573],{"class":1004,"line":1961},[1002,88568,6977],{"class":1030},[1002,88570,2886],{"class":1026},[1002,88572,88493],{"class":1030},[1002,88574,85851],{"class":1008},[1002,88576,88577],{"class":1004,"line":1971},[1002,88578,1170],{"class":1030},[1002,88580,88581],{"class":1004,"line":1980},[1002,88582,1051],{"emptyLinePlaceholder":1050},[1002,88584,88585,88587],{"class":1004,"line":1985},[1002,88586,8265],{"class":1026},[1002,88588,1428],{"class":1030},[1002,88590,88591],{"class":1004,"line":1995},[1002,88592,1051],{"emptyLinePlaceholder":1050},[1002,88594,88595,88597,88599,88601],{"class":1004,"line":2006},[1002,88596,2883],{"class":1030},[1002,88598,2886],{"class":1026},[1002,88600,88493],{"class":1030},[1002,88602,50532],{"class":1008},[1002,88604,88605,88607,88609,88611],{"class":1004,"line":2011},[1002,88606,2883],{"class":1030},[1002,88608,2886],{"class":1026},[1002,88610,88524],{"class":1030},[1002,88612,31325],{"class":1008},[925,88614,88615,88616,1813],{},"Now lets write the same code using ",[941,88617,6516],{},[993,88619,88621],{"className":995,"code":88620,"language":997,"meta":998,"style":998},"let foo = 1;\n\nconsole.log(foo); \u002F\u002F 1\n\n{\n let bar = 2;\n console.log(bar); \u002F\u002F 2\n}\n\nfunction fn() {\n console.log(foo); \u002F\u002F undefined\n var foo = 3;\n console.log(foo); \u002F\u002F 3\n}\n\nfn();\n\nconsole.log(foo); \u002F\u002F 1\nconsole.log(bar); \u002F\u002F ReferenceError: bar is not defined\n",[941,88622,88623,88635,88639,88649,88653,88657,88669,88679,88683,88687,88695,88705,88717,88727,88731,88735,88741,88745,88755],{"__ignoreMap":998},[1002,88624,88625,88627,88629,88631,88633],{"class":1004,"line":1005},[1002,88626,6516],{"class":1015},[1002,88628,38379],{"class":1030},[1002,88630,2393],{"class":1015},[1002,88632,6246],{"class":1019},[1002,88634,1407],{"class":1030},[1002,88636,88637],{"class":1004,"line":1012},[1002,88638,1051],{"emptyLinePlaceholder":1050},[1002,88640,88641,88643,88645,88647],{"class":1004,"line":1047},[1002,88642,2883],{"class":1030},[1002,88644,2886],{"class":1026},[1002,88646,88493],{"class":1030},[1002,88648,50532],{"class":1008},[1002,88650,88651],{"class":1004,"line":1054},[1002,88652,1051],{"emptyLinePlaceholder":1050},[1002,88654,88655],{"class":1004,"line":1060},[1002,88656,1129],{"class":1030},[1002,88658,88659,88661,88663,88665,88667],{"class":1004,"line":1272},[1002,88660,26884],{"class":1015},[1002,88662,38350],{"class":1030},[1002,88664,2393],{"class":1015},[1002,88666,10248],{"class":1019},[1002,88668,1407],{"class":1030},[1002,88670,88671,88673,88675,88677],{"class":1004,"line":1348},[1002,88672,6977],{"class":1030},[1002,88674,2886],{"class":1026},[1002,88676,88524],{"class":1030},[1002,88678,31325],{"class":1008},[1002,88680,88681],{"class":1004,"line":1354},[1002,88682,1170],{"class":1030},[1002,88684,88685],{"class":1004,"line":1360},[1002,88686,1051],{"emptyLinePlaceholder":1050},[1002,88688,88689,88691,88693],{"class":1004,"line":1366},[1002,88690,6965],{"class":1015},[1002,88692,32492],{"class":1026},[1002,88694,3025],{"class":1030},[1002,88696,88697,88699,88701,88703],{"class":1004,"line":1946},[1002,88698,6977],{"class":1030},[1002,88700,2886],{"class":1026},[1002,88702,88493],{"class":1030},[1002,88704,26478],{"class":1008},[1002,88706,88707,88709,88711,88713,88715],{"class":1004,"line":1956},[1002,88708,28293],{"class":1015},[1002,88710,38379],{"class":1030},[1002,88712,2393],{"class":1015},[1002,88714,17813],{"class":1019},[1002,88716,1407],{"class":1030},[1002,88718,88719,88721,88723,88725],{"class":1004,"line":1961},[1002,88720,6977],{"class":1030},[1002,88722,2886],{"class":1026},[1002,88724,88493],{"class":1030},[1002,88726,85851],{"class":1008},[1002,88728,88729],{"class":1004,"line":1971},[1002,88730,1170],{"class":1030},[1002,88732,88733],{"class":1004,"line":1980},[1002,88734,1051],{"emptyLinePlaceholder":1050},[1002,88736,88737,88739],{"class":1004,"line":1985},[1002,88738,8265],{"class":1026},[1002,88740,1428],{"class":1030},[1002,88742,88743],{"class":1004,"line":1995},[1002,88744,1051],{"emptyLinePlaceholder":1050},[1002,88746,88747,88749,88751,88753],{"class":1004,"line":2006},[1002,88748,2883],{"class":1030},[1002,88750,2886],{"class":1026},[1002,88752,88493],{"class":1030},[1002,88754,50532],{"class":1008},[1002,88756,88757,88759,88761,88763],{"class":1004,"line":2011},[1002,88758,2883],{"class":1030},[1002,88760,2886],{"class":1026},[1002,88762,88524],{"class":1030},[1002,88764,88765],{"class":1008},"\u002F\u002F ReferenceError: bar is not defined\n",[925,88767,88768,88769,88771,88772,88774,88775,88777,88778,88780],{},"As we can see, this time only variable ",[1107,88770,16521],{}," is declared as a ",[941,88773,16475],{},". ",[941,88776,6516],{}," gives us a way to declare block scoped variables, which is ",[941,88779,31012],{}," outside it.",[7100,88782,88784],{"title":88783,"type":24048},"REPL",[925,88785,30798,88786,16529,88788,88790],{},[941,88787,33021],{},[941,88789,82712],{}," to transpile ES6 code.",[953,88792,1016],{"id":1016},[925,88794,88795,88797,88798,88800],{},[941,88796,1016],{}," is single-assignment and like a ",[941,88799,6516],{},", block-scoped declaration.",[993,88802,88804],{"className":995,"code":88803,"language":997,"meta":998,"style":998},"{\n const PI = 3.141593;\n PI = 3.14; \u002F\u002F throws \"PI\" is read-only\n}\n\nconsole.log(PI); \u002F\u002F throws ReferenceError: PI is not defined\n",[941,88805,88806,88810,88823,88838,88842,88846],{"__ignoreMap":998},[1002,88807,88808],{"class":1004,"line":1005},[1002,88809,1129],{"class":1030},[1002,88811,88812,88814,88816,88818,88821],{"class":1004,"line":1012},[1002,88813,10423],{"class":1015},[1002,88815,43209],{"class":1019},[1002,88817,1023],{"class":1015},[1002,88819,88820],{"class":1019}," 3.141593",[1002,88822,1407],{"class":1030},[1002,88824,88825,88828,88830,88833,88835],{"class":1004,"line":1047},[1002,88826,88827],{"class":1019}," PI",[1002,88829,1023],{"class":1015},[1002,88831,88832],{"class":1019}," 3.14",[1002,88834,17938],{"class":1030},[1002,88836,88837],{"class":1008},"\u002F\u002F throws \"PI\" is read-only\n",[1002,88839,88840],{"class":1004,"line":1054},[1002,88841,1170],{"class":1030},[1002,88843,88844],{"class":1004,"line":1060},[1002,88845,1051],{"emptyLinePlaceholder":1050},[1002,88847,88848,88850,88852,88854,88856,88858],{"class":1004,"line":1272},[1002,88849,2883],{"class":1030},[1002,88851,2886],{"class":1026},[1002,88853,1031],{"class":1030},[1002,88855,43216],{"class":1019},[1002,88857,18256],{"class":1030},[1002,88859,88860],{"class":1008},"\u002F\u002F throws ReferenceError: PI is not defined\n",[925,88862,88863,88865],{},[941,88864,1016],{}," cannot be reinitialized. It will throw an Error when we try to assign another value.",[925,88867,88868],{},"Let’s look for the equivalent in ES5:",[993,88870,88872],{"className":995,"code":88871,"language":997,"meta":998,"style":998},"var PI = (function () {\n var PI = 3.141593;\n return function () {\n return PI;\n };\n})();\n",[941,88873,88874,88888,88900,88908,88916,88920],{"__ignoreMap":998},[1002,88875,88876,88878,88880,88882,88884,88886],{"class":1004,"line":1005},[1002,88877,18311],{"class":1015},[1002,88879,43209],{"class":1019},[1002,88881,1023],{"class":1015},[1002,88883,6513],{"class":1030},[1002,88885,6965],{"class":1015},[1002,88887,9772],{"class":1030},[1002,88889,88890,88892,88894,88896,88898],{"class":1004,"line":1012},[1002,88891,28293],{"class":1015},[1002,88893,43209],{"class":1019},[1002,88895,1023],{"class":1015},[1002,88897,88820],{"class":1019},[1002,88899,1407],{"class":1030},[1002,88901,88902,88904,88906],{"class":1004,"line":1047},[1002,88903,15066],{"class":1015},[1002,88905,8457],{"class":1015},[1002,88907,9772],{"class":1030},[1002,88909,88910,88912,88914],{"class":1004,"line":1054},[1002,88911,2687],{"class":1015},[1002,88913,43209],{"class":1019},[1002,88915,1407],{"class":1030},[1002,88917,88918],{"class":1004,"line":1060},[1002,88919,15113],{"class":1030},[1002,88921,88922],{"class":1004,"line":1272},[1002,88923,88924],{"class":1030},"})();\n",[1579,88926,88927],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":88929},[88930,88931],{"id":6516,"depth":1012,"text":6516},{"id":1016,"depth":1012,"text":1016},"2015-09-04","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-let-const.jpg",{},{"title":227,"description":229},"blog\u002Fes6-let-const",[16,17],"svQsPQG8j6Oaej1pCzi_-bGpywSWGq4Fbor389pWCqA",{"id":88940,"title":460,"author":920,"body":88941,"date":89605,"description":462,"extension":1591,"image":89606,"meta":89607,"navigation":1050,"path":461,"seo":89608,"stem":89609,"tags":89610,"__hash__":89611},"blog\u002Fblog\u002Fintroduction-to-gulp.md",{"type":922,"value":88942,"toc":89599},[88943,88947,88954,88956,88965,88981,88984,88988,88994,89004,89007,89011,89015,89022,89025,89045,89048,89067,89074,89144,89147,89151,89154,89157,89161,89165,89170,89220,89223,89232,89235,89238,89288,89294,89354,89357,89426,89429,89433,89437,89444,89535,89545,89583,89596],[953,88944,88946],{"id":88945},"why-gulp","Why Gulp?",[925,88948,88949,88950,88953],{},"Compared to ",[941,88951,88952],{},"Grunt",", Gulp runs much faster. Tasks get crunched quicker, and the time you spend between writing code and seeing the changes in the browser is significantly less. Why is this? According to Gulp, it uses the power of node streams, giving you fast builds that don't write intermediary files to disk.",[953,88955,48070],{"id":48069},[925,88957,88958,88959,88961,88962,88964],{},"Gulp.js comes packaged as a ",[941,88960,12452],{}," module making it incredibly easily to install using ",[941,88963,51247],{},"(Node Package Manager). To install Gulp, open up your terminal and type in the following:",[993,88966,88968],{"className":1797,"code":88967,"language":1799,"meta":998,"style":998},"npm install -g gulp\n",[941,88969,88970],{"__ignoreMap":998},[1002,88971,88972,88974,88976,88979],{"class":1004,"line":1005},[1002,88973,27346],{"class":1026},[1002,88975,27349],{"class":1034},[1002,88977,88978],{"class":1019}," -g",[1002,88980,48612],{"class":1034},[925,88982,88983],{},"This pulls Gulp from the npm registry and configures it globally on your system so you can access via command-line.",[953,88985,88987],{"id":88986},"setting-up-a-gulp-project","Setting Up A Gulp Project",[925,88989,88990,88991,88993],{},"If you don't have ",[941,88992,12108],{}," set up on your machine, go ahead and do so. The npm command line tool comes bundled with node, so you'll be ready to roll after this. Next, create a new project directory, and cd into it. Let's initialise our directory by running the following command:",[993,88995,88996],{"className":1797,"code":33008,"language":1799,"meta":998,"style":998},[941,88997,88998],{"__ignoreMap":998},[1002,88999,89000,89002],{"class":1004,"line":1005},[1002,89001,27346],{"class":1026},[1002,89003,33017],{"class":1034},[925,89005,89006],{},"Before installing Gulp, there are few things that need to be done inside your project's directory.",[15201,89008,89010],{"id":89009},"install-two-dependencies-packages","Install two dependencies packages",[15201,89012,89014],{"id":89013},"install-any-plugins-youd-like-to-use","Install any plugins you'd like to use",[15201,89016,33216,89018,89021],{"id":89017},"create-a-gulpjs-file-to-define-the-tasks-youd-like-to-run",[1107,89019,89020],{},"Gulp.js"," file to define the tasks you'd like to run",[925,89023,89024],{},"First, let's install the dependencies:",[993,89026,89028],{"className":1797,"code":89027,"language":1799,"meta":998,"style":998},"npm install gulp gulp-util --save-dev\n",[941,89029,89030],{"__ignoreMap":998},[1002,89031,89032,89034,89036,89039,89042],{"class":1004,"line":1005},[1002,89033,27346],{"class":1026},[1002,89035,27349],{"class":1034},[1002,89037,89038],{"class":1034}," gulp",[1002,89040,89041],{"class":1034}," gulp-util",[1002,89043,89044],{"class":1019}," --save-dev\n",[925,89046,89047],{},"Now, we'll need to install the Gulp plugins that will perform the tasks that we define in our configuration file. These plugins are also Node package modules so we'll use npm again to install them.",[993,89049,89051],{"className":1797,"code":89050,"language":1799,"meta":998,"style":998},"npm install gulp-uglify gulp-concat --save-dev\n",[941,89052,89053],{"__ignoreMap":998},[1002,89054,89055,89057,89059,89062,89065],{"class":1004,"line":1005},[1002,89056,27346],{"class":1026},[1002,89058,27349],{"class":1034},[1002,89060,89061],{"class":1034}," gulp-uglify",[1002,89063,89064],{"class":1034}," gulp-concat",[1002,89066,89044],{"class":1019},[925,89068,89069,89070,89073],{},"In this case, we are installing two plugins which will minify\u002Fcompress JavaScript code using the ",[941,89071,89072],{},"Uglify.js"," compressor and concatenate all JavaScipt files into a single source file.",[993,89075,89077],{"className":995,"code":89076,"language":997,"meta":998,"style":998},"{\n \"devDependencies\": {\n \"gulp-util\": \"~2.2.13\",\n \"gulp\": \"~3.5.0\",\n \"gulp-uglify\": \"~0.2.0\",\n \"gulp-concat\": \"~2.1.7\"\n }\n}\n",[941,89078,89079,89083,89090,89102,89114,89126,89136,89140],{"__ignoreMap":998},[1002,89080,89081],{"class":1004,"line":1005},[1002,89082,1129],{"class":1030},[1002,89084,89085,89088],{"class":1004,"line":1012},[1002,89086,89087],{"class":1034}," \"devDependencies\"",[1002,89089,15354],{"class":1030},[1002,89091,89092,89095,89097,89100],{"class":1004,"line":1047},[1002,89093,89094],{"class":1034}," \"gulp-util\"",[1002,89096,1137],{"class":1030},[1002,89098,89099],{"class":1034},"\"~2.2.13\"",[1002,89101,1143],{"class":1030},[1002,89103,89104,89107,89109,89112],{"class":1004,"line":1054},[1002,89105,89106],{"class":1034}," \"gulp\"",[1002,89108,1137],{"class":1030},[1002,89110,89111],{"class":1034},"\"~3.5.0\"",[1002,89113,1143],{"class":1030},[1002,89115,89116,89119,89121,89124],{"class":1004,"line":1060},[1002,89117,89118],{"class":1034}," \"gulp-uglify\"",[1002,89120,1137],{"class":1030},[1002,89122,89123],{"class":1034},"\"~0.2.0\"",[1002,89125,1143],{"class":1030},[1002,89127,89128,89131,89133],{"class":1004,"line":1272},[1002,89129,89130],{"class":1034}," \"gulp-concat\"",[1002,89132,1137],{"class":1030},[1002,89134,89135],{"class":1034},"\"~2.1.7\"\n",[1002,89137,89138],{"class":1004,"line":1348},[1002,89139,2014],{"class":1030},[1002,89141,89142],{"class":1004,"line":1354},[1002,89143,1170],{"class":1030},[925,89145,89146],{},"Gulp offers over 200 plugins for all types of functionality including:",[15201,89148,89150],{"id":89149},"livereload","LiveReload",[15201,89152,45152],{"id":89153},"jshint",[15201,89155,89156],{"id":292},"Sass",[15201,89158,89160],{"id":89159},"coffeescript-file-compilation","CoffeeScript file compilation",[953,89162,89164],{"id":89163},"configure-gulpjs-file","Configure Gulp.js File",[925,89166,33216,89167,89169],{},[1107,89168,48181],{}," at the root of your project:",[993,89171,89173],{"className":995,"code":89172,"language":997,"meta":998,"style":998},"var gulp = require('gulp');\n\ngulp.task('default', function () {\n \u002F\u002F code for default task\n});\n",[941,89174,89175,89191,89195,89211,89216],{"__ignoreMap":998},[1002,89176,89177,89179,89181,89183,89185,89187,89189],{"class":1004,"line":1005},[1002,89178,18311],{"class":1015},[1002,89180,48209],{"class":1030},[1002,89182,2393],{"class":1015},[1002,89184,1027],{"class":1026},[1002,89186,1031],{"class":1030},[1002,89188,48218],{"class":1034},[1002,89190,1085],{"class":1030},[1002,89192,89193],{"class":1004,"line":1012},[1002,89194,1051],{"emptyLinePlaceholder":1050},[1002,89196,89197,89199,89201,89203,89205,89207,89209],{"class":1004,"line":1047},[1002,89198,48284],{"class":1030},[1002,89200,48287],{"class":1026},[1002,89202,1031],{"class":1030},[1002,89204,48783],{"class":1034},[1002,89206,1251],{"class":1030},[1002,89208,6965],{"class":1015},[1002,89210,9772],{"class":1030},[1002,89212,89213],{"class":1004,"line":1054},[1002,89214,89215],{"class":1008}," \u002F\u002F code for default task\n",[1002,89217,89218],{"class":1004,"line":1060},[1002,89219,2804],{"class":1030},[925,89221,89222],{},"Run Gulp:",[993,89224,89226],{"className":1797,"code":89225,"language":1799,"meta":998,"style":998},"gulp\n",[941,89227,89228],{"__ignoreMap":998},[1002,89229,89230],{"class":1004,"line":1005},[1002,89231,89225],{"class":1026},[925,89233,89234],{},"There you go, we're ready to begin using gulp. At this point, we can successfully run gulp from the command line, and all will be well. It's a bit useless at this point though, so let's set up some dummy files and implement some tasks.",[925,89236,89237],{},"First, let's configure our directory structure like this:",[993,89239,89241],{"className":995,"code":89240,"language":997,"meta":998,"style":998}," gulpfile.js\n package.json\n src\u002F\n js\u002F\n dist\u002F\n js\u002F\n css\u002F\n",[941,89242,89243,89248,89253,89261,89268,89275,89281],{"__ignoreMap":998},[1002,89244,89245],{"class":1004,"line":1005},[1002,89246,89247],{"class":1030}," gulpfile.js\n",[1002,89249,89250],{"class":1004,"line":1012},[1002,89251,89252],{"class":1030}," package.json\n",[1002,89254,89255,89258],{"class":1004,"line":1047},[1002,89256,89257],{"class":1030}," src",[1002,89259,89260],{"class":1015},"\u002F\n",[1002,89262,89263,89266],{"class":1004,"line":1054},[1002,89264,89265],{"class":1030}," js",[1002,89267,89260],{"class":1015},[1002,89269,89270,89273],{"class":1004,"line":1060},[1002,89271,89272],{"class":1030}," dist",[1002,89274,89260],{"class":1015},[1002,89276,89277,89279],{"class":1004,"line":1272},[1002,89278,89265],{"class":1030},[1002,89280,89260],{"class":1015},[1002,89282,89283,89286],{"class":1004,"line":1348},[1002,89284,89285],{"class":1030}," css",[1002,89287,89260],{"class":1015},[925,89289,35079,89290,89293],{},[1107,89291,89292],{},"src\u002Fjs"," directory, create two JavaScript files and populate them like this:",[993,89295,89297],{"className":995,"code":89296,"language":997,"meta":998,"style":998},"function helloWorld() {\n console.log('Hello World!');\n}\n\nfunction goodbyeWorld() {\n console.log('Goodbye World!');\n}\n",[941,89298,89299,89308,89320,89324,89328,89337,89350],{"__ignoreMap":998},[1002,89300,89301,89303,89306],{"class":1004,"line":1005},[1002,89302,6965],{"class":1015},[1002,89304,89305],{"class":1026}," helloWorld",[1002,89307,3025],{"class":1030},[1002,89309,89310,89312,89314,89316,89318],{"class":1004,"line":1012},[1002,89311,6977],{"class":1030},[1002,89313,2886],{"class":1026},[1002,89315,1031],{"class":1030},[1002,89317,28429],{"class":1034},[1002,89319,1085],{"class":1030},[1002,89321,89322],{"class":1004,"line":1047},[1002,89323,1170],{"class":1030},[1002,89325,89326],{"class":1004,"line":1054},[1002,89327,1051],{"emptyLinePlaceholder":1050},[1002,89329,89330,89332,89335],{"class":1004,"line":1060},[1002,89331,6965],{"class":1015},[1002,89333,89334],{"class":1026}," goodbyeWorld",[1002,89336,3025],{"class":1030},[1002,89338,89339,89341,89343,89345,89348],{"class":1004,"line":1272},[1002,89340,6977],{"class":1030},[1002,89342,2886],{"class":1026},[1002,89344,1031],{"class":1030},[1002,89346,89347],{"class":1034},"'Goodbye World!'",[1002,89349,1085],{"class":1030},[1002,89351,89352],{"class":1004,"line":1348},[1002,89353,1170],{"class":1030},[925,89355,89356],{},"Now lets tell Gulp which plugins are required to complete the defined tasks.",[993,89358,89360],{"className":995,"code":89359,"language":997,"meta":998,"style":998},"var gulp = require('gulp'),\n gutil = require('gulp-util'),\n uglify = require('gulp-uglify'),\n concat = require('gulp-concat');\n",[941,89361,89362,89378,89394,89410],{"__ignoreMap":998},[1002,89363,89364,89366,89368,89370,89372,89374,89376],{"class":1004,"line":1005},[1002,89365,18311],{"class":1015},[1002,89367,48209],{"class":1030},[1002,89369,2393],{"class":1015},[1002,89371,1027],{"class":1026},[1002,89373,1031],{"class":1030},[1002,89375,48218],{"class":1034},[1002,89377,1257],{"class":1030},[1002,89379,89380,89383,89385,89387,89389,89392],{"class":1004,"line":1012},[1002,89381,89382],{"class":1030}," gutil ",[1002,89384,2393],{"class":1015},[1002,89386,1027],{"class":1026},[1002,89388,1031],{"class":1030},[1002,89390,89391],{"class":1034},"'gulp-util'",[1002,89393,1257],{"class":1030},[1002,89395,89396,89399,89401,89403,89405,89408],{"class":1004,"line":1047},[1002,89397,89398],{"class":1030}," uglify ",[1002,89400,2393],{"class":1015},[1002,89402,1027],{"class":1026},[1002,89404,1031],{"class":1030},[1002,89406,89407],{"class":1034},"'gulp-uglify'",[1002,89409,1257],{"class":1030},[1002,89411,89412,89415,89417,89419,89421,89424],{"class":1004,"line":1054},[1002,89413,89414],{"class":1030}," concat ",[1002,89416,2393],{"class":1015},[1002,89418,1027],{"class":1026},[1002,89420,1031],{"class":1030},[1002,89422,89423],{"class":1034},"'gulp-concat'",[1002,89425,1085],{"class":1030},[925,89427,89428],{},"Next up, we need to define the tasks that will be run by Gulp. In my case, I'm looking to do two things:",[15201,89430,89432],{"id":89431},"compress-images","Compress images",[15201,89434,89436],{"id":89435},"minify-my-javascript-files","Minify my JavaScript files",[925,89438,89439,89440,89443],{},"Defining a task is for all intents a JavaScript call. We use the Gulp method ",[1107,89441,89442],{},"task()"," to define the task we want to run:",[993,89445,89447],{"className":995,"code":89446,"language":997,"meta":998,"style":998},"gulp.task('js', function () {\n gulp\n .src('.\u002Fjs\u002F*.js')\n .pipe(uglify())\n .pipe(concat('all.js'))\n .pipe(gulp.dest('.\u002Fjs'));\n});\n",[941,89448,89449,89466,89471,89484,89497,89514,89531],{"__ignoreMap":998},[1002,89450,89451,89453,89455,89457,89460,89462,89464],{"class":1004,"line":1005},[1002,89452,48284],{"class":1030},[1002,89454,48287],{"class":1026},[1002,89456,1031],{"class":1030},[1002,89458,89459],{"class":1034},"'js'",[1002,89461,1251],{"class":1030},[1002,89463,6965],{"class":1015},[1002,89465,9772],{"class":1030},[1002,89467,89468],{"class":1004,"line":1012},[1002,89469,89470],{"class":1030}," gulp\n",[1002,89472,89473,89475,89477,89479,89482],{"class":1004,"line":1047},[1002,89474,30624],{"class":1030},[1002,89476,37223],{"class":1026},[1002,89478,1031],{"class":1030},[1002,89480,89481],{"class":1034},"'.\u002Fjs\u002F*.js'",[1002,89483,3808],{"class":1030},[1002,89485,89486,89488,89490,89492,89495],{"class":1004,"line":1054},[1002,89487,30624],{"class":1030},[1002,89489,22242],{"class":1026},[1002,89491,1031],{"class":1030},[1002,89493,89494],{"class":1026},"uglify",[1002,89496,48328],{"class":1030},[1002,89498,89499,89501,89503,89505,89507,89509,89512],{"class":1004,"line":1060},[1002,89500,30624],{"class":1030},[1002,89502,22242],{"class":1026},[1002,89504,1031],{"class":1030},[1002,89506,62794],{"class":1026},[1002,89508,1031],{"class":1030},[1002,89510,89511],{"class":1034},"'all.js'",[1002,89513,48348],{"class":1030},[1002,89515,89516,89518,89520,89522,89524,89526,89529],{"class":1004,"line":1272},[1002,89517,30624],{"class":1030},[1002,89519,22242],{"class":1026},[1002,89521,48337],{"class":1030},[1002,89523,48340],{"class":1026},[1002,89525,1031],{"class":1030},[1002,89527,89528],{"class":1034},"'.\u002Fjs'",[1002,89530,5663],{"class":1030},[1002,89532,89533],{"class":1004,"line":1348},[1002,89534,2804],{"class":1030},[925,89536,89537,89538,89541,89542,89544],{},"Taking this a step further, Gulp also provides another method called ",[1107,89539,89540],{},"watch()"," which provides a means for automatically checking a specific resource for changes. This allows for great automation of tasks versus constantly having to manually type in ",[1107,89543,83],{}," at the command line.",[993,89546,89548],{"className":995,"code":89547,"language":997,"meta":998,"style":998},"gulp.watch('.\u002Fjs\u002F*', function () {\n gulp.run('js');\n});\n",[941,89549,89550,89567,89579],{"__ignoreMap":998},[1002,89551,89552,89554,89556,89558,89561,89563,89565],{"class":1004,"line":1005},[1002,89553,48284],{"class":1030},[1002,89555,48465],{"class":1026},[1002,89557,1031],{"class":1030},[1002,89559,89560],{"class":1034},"'.\u002Fjs\u002F*'",[1002,89562,1251],{"class":1030},[1002,89564,6965],{"class":1015},[1002,89566,9772],{"class":1030},[1002,89568,89569,89571,89573,89575,89577],{"class":1004,"line":1012},[1002,89570,48726],{"class":1030},[1002,89572,2061],{"class":1026},[1002,89574,1031],{"class":1030},[1002,89576,89459],{"class":1034},[1002,89578,1085],{"class":1030},[1002,89580,89581],{"class":1004,"line":1047},[1002,89582,2804],{"class":1030},[925,89584,89585,89586,89588,89589,2034,89592,89595],{},"When this runs, Gulp will continue to monitor the specified directly for changes to files and if a change occurs, will re-run the ",[1107,89587,997],{}," task to ",[941,89590,89591],{},"minify",[941,89593,89594],{},"concatenate"," the JavaScript files. Awesome!",[1579,89597,89598],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":89600},[89601,89602,89603,89604],{"id":88945,"depth":1012,"text":88946},{"id":48069,"depth":1012,"text":48070},{"id":88986,"depth":1012,"text":88987},{"id":89163,"depth":1012,"text":89164},"2015-09-03","\u002Fimages\u002Fblog\u002Ffeatures\u002Fintroduction-to-gulp.jpg",{},{"title":460,"description":462},"blog\u002Fintroduction-to-gulp",[16,17,83],"ZDr9N5R6TyDaQz50h5-9DbLbVNXFw28SIxanw4GOOhg",{"id":89613,"title":211,"author":920,"body":89614,"date":90685,"description":213,"extension":1591,"image":90686,"meta":90687,"navigation":1050,"path":212,"seo":90688,"stem":90689,"tags":90690,"__hash__":90691},"blog\u002Fblog\u002Fes6-destructuring.md",{"type":922,"value":89615,"toc":90678},[89616,89619,89623,89630,89712,89727,89730,89776,89782,89817,89820,89861,89864,89879,89882,89929,89936,89985,89988,90034,90037,90086,90089,90120,90143,90145,90160,90211,90218,90283,90287,90290,90326,90332,90370,90373,90419,90422,90473,90476,90509,90518,90566,90570,90573,90618,90621,90672,90675],[925,89617,89618],{},"Destructuring assignment allows us to have an expression like variable declaration on the left-hand side describing which values to extract from the right-hand side. Sounds a bit confusing? Let's look at the specific examples.",[953,89620,89622],{"id":89621},"array-destructuring","Array Destructuring",[925,89624,89625,89626,89629],{},"Let's say we have a value variable which is ",[1002,89627,89628],{},"1, 2, 3, 4, 5"," and we want to declare variables that contain first three elements. Traditionally each variable would be declared and assigned separately like so:",[993,89631,89633],{"className":995,"code":89632,"language":997,"meta":998,"style":998},"var value = [1, 2, 3, 4, 5];\nvar el1 = value[0];\nvar el2 = value[1];\nvar el3 = value[0];\n",[941,89634,89635,89666,89682,89697],{"__ignoreMap":998},[1002,89636,89637,89639,89642,89644,89646,89648,89650,89652,89654,89656,89658,89660,89662,89664],{"class":1004,"line":1005},[1002,89638,18311],{"class":1015},[1002,89640,89641],{"class":1030}," value ",[1002,89643,2393],{"class":1015},[1002,89645,1897],{"class":1030},[1002,89647,6211],{"class":1019},[1002,89649,1251],{"class":1030},[1002,89651,5681],{"class":1019},[1002,89653,1251],{"class":1030},[1002,89655,2796],{"class":1019},[1002,89657,1251],{"class":1030},[1002,89659,3837],{"class":1019},[1002,89661,1251],{"class":1030},[1002,89663,2859],{"class":1019},[1002,89665,6754],{"class":1030},[1002,89667,89668,89670,89673,89675,89678,89680],{"class":1004,"line":1012},[1002,89669,18311],{"class":1015},[1002,89671,89672],{"class":1030}," el1 ",[1002,89674,2393],{"class":1015},[1002,89676,89677],{"class":1030}," value[",[1002,89679,5867],{"class":1019},[1002,89681,6754],{"class":1030},[1002,89683,89684,89686,89689,89691,89693,89695],{"class":1004,"line":1047},[1002,89685,18311],{"class":1015},[1002,89687,89688],{"class":1030}," el2 ",[1002,89690,2393],{"class":1015},[1002,89692,89677],{"class":1030},[1002,89694,6211],{"class":1019},[1002,89696,6754],{"class":1030},[1002,89698,89699,89701,89704,89706,89708,89710],{"class":1004,"line":1054},[1002,89700,18311],{"class":1015},[1002,89702,89703],{"class":1030}," el3 ",[1002,89705,2393],{"class":1015},[1002,89707,89677],{"class":1030},[1002,89709,5867],{"class":1019},[1002,89711,6754],{"class":1030},[925,89713,89714,89715,89717,89718,89721,89722,948],{},"Having these variables, our original ",[1107,89716,5047],{}," might now be represented as ** ",[1002,89719,89720],{},"el1, el2, el3, 4, 5","** and, since we don’t care at the moment about last two values, as something like ",[1107,89723,89724],{},[1002,89725,89726],{},"el1, el2, el3",[925,89728,89729],{},"ES6 allows us to use this expression now on the left-hand side to achieve the same declaration as above:",[993,89731,89733],{"className":995,"code":89732,"language":997,"meta":998,"style":998},"var value = [1, 2, 3, 4, 5];\nvar [el1, el2, el3] = value;\n",[941,89734,89735,89765],{"__ignoreMap":998},[1002,89736,89737,89739,89741,89743,89745,89747,89749,89751,89753,89755,89757,89759,89761,89763],{"class":1004,"line":1005},[1002,89738,18311],{"class":1015},[1002,89740,89641],{"class":1030},[1002,89742,2393],{"class":1015},[1002,89744,1897],{"class":1030},[1002,89746,6211],{"class":1019},[1002,89748,1251],{"class":1030},[1002,89750,5681],{"class":1019},[1002,89752,1251],{"class":1030},[1002,89754,2796],{"class":1019},[1002,89756,1251],{"class":1030},[1002,89758,3837],{"class":1019},[1002,89760,1251],{"class":1030},[1002,89762,2859],{"class":1019},[1002,89764,6754],{"class":1030},[1002,89766,89767,89769,89772,89774],{"class":1004,"line":1012},[1002,89768,18311],{"class":1015},[1002,89770,89771],{"class":1030}," [el1, el2, el3] ",[1002,89773,2393],{"class":1015},[1002,89775,5067],{"class":1030},[925,89777,89778,89779,89781],{},"The right hand side doesn’t have to be a variable, we can omit ",[941,89780,5047],{}," declaration all together:",[993,89783,89785],{"className":995,"code":89784,"language":997,"meta":998,"style":998},"var [el1, el2, el3] = [1, 2, 3, 4, 5];\n",[941,89786,89787],{"__ignoreMap":998},[1002,89788,89789,89791,89793,89795,89797,89799,89801,89803,89805,89807,89809,89811,89813,89815],{"class":1004,"line":1005},[1002,89790,18311],{"class":1015},[1002,89792,89771],{"class":1030},[1002,89794,2393],{"class":1015},[1002,89796,1897],{"class":1030},[1002,89798,6211],{"class":1019},[1002,89800,1251],{"class":1030},[1002,89802,5681],{"class":1019},[1002,89804,1251],{"class":1030},[1002,89806,2796],{"class":1019},[1002,89808,1251],{"class":1030},[1002,89810,3837],{"class":1019},[1002,89812,1251],{"class":1030},[1002,89814,2859],{"class":1019},[1002,89816,6754],{"class":1030},[925,89818,89819],{},"The left-hand side doesn’t have to a declaration either, you can use already declared variables:",[993,89821,89823],{"className":995,"code":89822,"language":997,"meta":998,"style":998},"var el1, el2, el3;\n[el1, el2, el3] = [1, 2, 3, 4, 5];\n",[941,89824,89825,89832],{"__ignoreMap":998},[1002,89826,89827,89829],{"class":1004,"line":1005},[1002,89828,18311],{"class":1015},[1002,89830,89831],{"class":1030}," el1, el2, el3;\n",[1002,89833,89834,89837,89839,89841,89843,89845,89847,89849,89851,89853,89855,89857,89859],{"class":1004,"line":1012},[1002,89835,89836],{"class":1030},"[el1, el2, el3] ",[1002,89838,2393],{"class":1015},[1002,89840,1897],{"class":1030},[1002,89842,6211],{"class":1019},[1002,89844,1251],{"class":1030},[1002,89846,5681],{"class":1019},[1002,89848,1251],{"class":1030},[1002,89850,2796],{"class":1019},[1002,89852,1251],{"class":1030},[1002,89854,3837],{"class":1019},[1002,89856,1251],{"class":1030},[1002,89858,2859],{"class":1019},[1002,89860,6754],{"class":1030},[925,89862,89863],{},"This brings us to a neat little trick that was previously impossible in JavaScript with just two variables – swapping values.",[993,89865,89867],{"className":995,"code":89866,"language":997,"meta":998,"style":998},"[el1, el2] = [el2, el1];\n",[941,89868,89869],{"__ignoreMap":998},[1002,89870,89871,89874,89876],{"class":1004,"line":1005},[1002,89872,89873],{"class":1030},"[el1, el2] ",[1002,89875,2393],{"class":1015},[1002,89877,89878],{"class":1030}," [el2, el1];\n",[925,89880,89881],{},"Destructuring assignment can also be nested:",[993,89883,89885],{"className":995,"code":89884,"language":997,"meta":998,"style":998},"var value = [1, 2, [3, 4, 5]];\nvar [el1, el2, [el3, el4]] = value;\n",[941,89886,89887,89918],{"__ignoreMap":998},[1002,89888,89889,89891,89893,89895,89897,89899,89901,89903,89905,89907,89909,89911,89913,89915],{"class":1004,"line":1005},[1002,89890,18311],{"class":1015},[1002,89892,89641],{"class":1030},[1002,89894,2393],{"class":1015},[1002,89896,1897],{"class":1030},[1002,89898,6211],{"class":1019},[1002,89900,1251],{"class":1030},[1002,89902,5681],{"class":1019},[1002,89904,47455],{"class":1030},[1002,89906,2796],{"class":1019},[1002,89908,1251],{"class":1030},[1002,89910,3837],{"class":1019},[1002,89912,1251],{"class":1030},[1002,89914,2859],{"class":1019},[1002,89916,89917],{"class":1030},"]];\n",[1002,89919,89920,89922,89925,89927],{"class":1004,"line":1012},[1002,89921,18311],{"class":1015},[1002,89923,89924],{"class":1030}," [el1, el2, [el3, el4]] ",[1002,89926,2393],{"class":1015},[1002,89928,5067],{"class":1030},[925,89930,89931,89932,89935],{},"Returning ",[941,89933,89934],{},"tuples"," from functions in ES6 becomes more of a first class citizen and feels pretty natural:",[993,89937,89939],{"className":995,"code":89938,"language":997,"meta":998,"style":998},"function tuple() {\n return [1, 2];\n}\n\nvar [first, second] = tuple();\n",[941,89940,89941,89950,89964,89968,89972],{"__ignoreMap":998},[1002,89942,89943,89945,89948],{"class":1004,"line":1005},[1002,89944,6965],{"class":1015},[1002,89946,89947],{"class":1026}," tuple",[1002,89949,3025],{"class":1030},[1002,89951,89952,89954,89956,89958,89960,89962],{"class":1004,"line":1012},[1002,89953,15066],{"class":1015},[1002,89955,1897],{"class":1030},[1002,89957,6211],{"class":1019},[1002,89959,1251],{"class":1030},[1002,89961,5681],{"class":1019},[1002,89963,6754],{"class":1030},[1002,89965,89966],{"class":1004,"line":1047},[1002,89967,1170],{"class":1030},[1002,89969,89970],{"class":1004,"line":1054},[1002,89971,1051],{"emptyLinePlaceholder":1050},[1002,89973,89974,89976,89979,89981,89983],{"class":1004,"line":1060},[1002,89975,18311],{"class":1015},[1002,89977,89978],{"class":1030}," [first, second] ",[1002,89980,2393],{"class":1015},[1002,89982,89947],{"class":1026},[1002,89984,1428],{"class":1030},[925,89986,89987],{},"You can also ignore certain elements in the array by simply omitting variables where appropriate:",[993,89989,89991],{"className":995,"code":89990,"language":997,"meta":998,"style":998},"var value = [1, 2, 3, 4, 5];\nvar [el1, , el3, , el5] = value;\n",[941,89992,89993,90023],{"__ignoreMap":998},[1002,89994,89995,89997,89999,90001,90003,90005,90007,90009,90011,90013,90015,90017,90019,90021],{"class":1004,"line":1005},[1002,89996,18311],{"class":1015},[1002,89998,89641],{"class":1030},[1002,90000,2393],{"class":1015},[1002,90002,1897],{"class":1030},[1002,90004,6211],{"class":1019},[1002,90006,1251],{"class":1030},[1002,90008,5681],{"class":1019},[1002,90010,1251],{"class":1030},[1002,90012,2796],{"class":1019},[1002,90014,1251],{"class":1030},[1002,90016,3837],{"class":1019},[1002,90018,1251],{"class":1030},[1002,90020,2859],{"class":1019},[1002,90022,6754],{"class":1030},[1002,90024,90025,90027,90030,90032],{"class":1004,"line":1012},[1002,90026,18311],{"class":1015},[1002,90028,90029],{"class":1030}," [el1, , el3, , el5] ",[1002,90031,2393],{"class":1015},[1002,90033,5067],{"class":1030},[925,90035,90036],{},"This makes it really neat for example to pull values out of regular expression matches:",[993,90038,90040],{"className":995,"code":90039,"language":997,"meta":998,"style":998},"var [, firstName, lastName] = 'John Doe'.match(\u002F^(\\w+) (\\w+)$\u002F);\n",[941,90041,90042],{"__ignoreMap":998},[1002,90043,90044,90046,90049,90051,90053,90055,90057,90059,90061,90064,90066,90069,90071,90074,90076,90078,90080,90082,90084],{"class":1004,"line":1005},[1002,90045,18311],{"class":1015},[1002,90047,90048],{"class":1030}," [, firstName, lastName] ",[1002,90050,2393],{"class":1015},[1002,90052,63015],{"class":1034},[1002,90054,948],{"class":1030},[1002,90056,74493],{"class":1026},[1002,90058,1031],{"class":1030},[1002,90060,4685],{"class":1034},[1002,90062,90063],{"class":1015},"^",[1002,90065,1031],{"class":33488},[1002,90067,90068],{"class":1019},"\\w",[1002,90070,5064],{"class":1015},[1002,90072,90073],{"class":33488},") (",[1002,90075,90068],{"class":1019},[1002,90077,5064],{"class":1015},[1002,90079,80417],{"class":33488},[1002,90081,15864],{"class":1015},[1002,90083,4685],{"class":1034},[1002,90085,1085],{"class":1030},[925,90087,90088],{},"Taking it one step further, you can also specify default values:",[993,90090,90092],{"className":995,"code":90091,"language":997,"meta":998,"style":998},"var [firstName = 'John', lastName = 'Doe'] = [];\n",[941,90093,90094],{"__ignoreMap":998},[1002,90095,90096,90098,90101,90103,90106,90109,90111,90114,90116,90118],{"class":1004,"line":1005},[1002,90097,18311],{"class":1015},[1002,90099,90100],{"class":1030}," [firstName ",[1002,90102,2393],{"class":1015},[1002,90104,90105],{"class":1034}," 'John'",[1002,90107,90108],{"class":1030},", lastName ",[1002,90110,2393],{"class":1015},[1002,90112,90113],{"class":1034}," 'Doe'",[1002,90115,18338],{"class":1030},[1002,90117,2393],{"class":1015},[1002,90119,4924],{"class":1030},[7100,90121,90122,90137],{"type":23379},[925,90123,90124,90125,90127,90128,2034,90131,90134,90135,948],{},"Note that this only works for ",[941,90126,31012],{}," values. In the following example ",[1107,90129,90130],{},"firstName",[1107,90132,90133],{},"lastName"," will be ",[1107,90136,26077],{},[993,90138,90141],{"className":90139,"code":90140,"language":24241},[24239],"var [firstName = 'John', lastName = 'Doe'] = [null, null];\n",[941,90142,90140],{"__ignoreMap":998},[1655,90144,31281],{"id":31280},[925,90146,90147,90148,90150,90151,90154,90155,948],{},"Spread operator is where things get really interesting. Spreads, otherwise knows as the ",[1107,90149,27630],{}," pattern allow you to grab ",[941,90152,90153],{},"remaining values"," from the array. In the example below tail receives all remaining array elements which is ",[1107,90156,90157],{},[1002,90158,90159],{},"4, 5",[993,90161,90163],{"className":995,"code":90162,"language":997,"meta":998,"style":998},"var value = [1, 2, 3, 4, 5];\nvar [el1, el2, el3, ...tail] = value;\n",[941,90164,90165,90195],{"__ignoreMap":998},[1002,90166,90167,90169,90171,90173,90175,90177,90179,90181,90183,90185,90187,90189,90191,90193],{"class":1004,"line":1005},[1002,90168,18311],{"class":1015},[1002,90170,89641],{"class":1030},[1002,90172,2393],{"class":1015},[1002,90174,1897],{"class":1030},[1002,90176,6211],{"class":1019},[1002,90178,1251],{"class":1030},[1002,90180,5681],{"class":1019},[1002,90182,1251],{"class":1030},[1002,90184,2796],{"class":1019},[1002,90186,1251],{"class":1030},[1002,90188,3837],{"class":1019},[1002,90190,1251],{"class":1030},[1002,90192,2859],{"class":1019},[1002,90194,6754],{"class":1030},[1002,90196,90197,90199,90202,90204,90207,90209],{"class":1004,"line":1012},[1002,90198,18311],{"class":1015},[1002,90200,90201],{"class":1030}," [el1, el2, el3, ",[1002,90203,17625],{"class":1015},[1002,90205,90206],{"class":1030},"tail] ",[1002,90208,2393],{"class":1015},[1002,90210,5067],{"class":1030},[925,90212,90213,90214,90217],{},"Unfortunately implementation of ",[941,90215,90216],{},"splats"," in ES6 is somewhat primitive and only allows you to get the remaining elements. The following patterns, while being very useful, are not possible in ES6:",[993,90219,90221],{"className":995,"code":90220,"language":997,"meta":998,"style":998},"var value = [1, 2, 3, 4, 5];\nvar [...rest, lastElement] = value;\nvar [firstElement, ...rest, lastElement] = value;\n",[941,90222,90223,90253,90268],{"__ignoreMap":998},[1002,90224,90225,90227,90229,90231,90233,90235,90237,90239,90241,90243,90245,90247,90249,90251],{"class":1004,"line":1005},[1002,90226,18311],{"class":1015},[1002,90228,89641],{"class":1030},[1002,90230,2393],{"class":1015},[1002,90232,1897],{"class":1030},[1002,90234,6211],{"class":1019},[1002,90236,1251],{"class":1030},[1002,90238,5681],{"class":1019},[1002,90240,1251],{"class":1030},[1002,90242,2796],{"class":1019},[1002,90244,1251],{"class":1030},[1002,90246,3837],{"class":1019},[1002,90248,1251],{"class":1030},[1002,90250,2859],{"class":1019},[1002,90252,6754],{"class":1030},[1002,90254,90255,90257,90259,90261,90264,90266],{"class":1004,"line":1012},[1002,90256,18311],{"class":1015},[1002,90258,1897],{"class":1030},[1002,90260,17625],{"class":1015},[1002,90262,90263],{"class":1030},"rest, lastElement] ",[1002,90265,2393],{"class":1015},[1002,90267,5067],{"class":1030},[1002,90269,90270,90272,90275,90277,90279,90281],{"class":1004,"line":1047},[1002,90271,18311],{"class":1015},[1002,90273,90274],{"class":1030}," [firstElement, ",[1002,90276,17625],{"class":1015},[1002,90278,90263],{"class":1030},[1002,90280,2393],{"class":1015},[1002,90282,5067],{"class":1030},[953,90284,90286],{"id":90285},"object-destructuring","Object Destructuring",[925,90288,90289],{},"Now that you have a pretty clear understanding of how array destructuring works, let's look at object destructuring. It works pretty much the same way, just for objects:",[993,90291,90293],{"className":995,"code":90292,"language":997,"meta":998,"style":998},"var person = { firstName: 'John', lastName: 'Doe' };\nvar { firstName, lastName } = person;\n",[941,90294,90295,90314],{"__ignoreMap":998},[1002,90296,90297,90299,90301,90303,90305,90307,90309,90312],{"class":1004,"line":1005},[1002,90298,18311],{"class":1015},[1002,90300,82348],{"class":1030},[1002,90302,2393],{"class":1015},[1002,90304,26074],{"class":1030},[1002,90306,12853],{"class":1034},[1002,90308,26080],{"class":1030},[1002,90310,90311],{"class":1034},"'Doe'",[1002,90313,9444],{"class":1030},[1002,90315,90316,90318,90321,90323],{"class":1004,"line":1012},[1002,90317,18311],{"class":1015},[1002,90319,90320],{"class":1030}," { firstName, lastName } ",[1002,90322,2393],{"class":1015},[1002,90324,90325],{"class":1030}," person;\n",[925,90327,90328,90329,57876],{},"ES6 allows you to pull object properties using variable identifiers that differ from the property name they refer to. In the example below, variable name will be declared with ",[1107,90330,90331],{},"person.firstName",[993,90333,90335],{"className":995,"code":90334,"language":997,"meta":998,"style":998},"var person = { firstName: 'John', lastName: 'Doe' };\nvar { firstName: name, lastName } = person;\n",[941,90336,90337,90355],{"__ignoreMap":998},[1002,90338,90339,90341,90343,90345,90347,90349,90351,90353],{"class":1004,"line":1005},[1002,90340,18311],{"class":1015},[1002,90342,82348],{"class":1030},[1002,90344,2393],{"class":1015},[1002,90346,26074],{"class":1030},[1002,90348,12853],{"class":1034},[1002,90350,26080],{"class":1030},[1002,90352,90311],{"class":1034},[1002,90354,9444],{"class":1030},[1002,90356,90357,90359,90361,90363,90366,90368],{"class":1004,"line":1012},[1002,90358,18311],{"class":1015},[1002,90360,15026],{"class":1030},[1002,90362,90130],{"class":2378},[1002,90364,90365],{"class":1030},": name, lastName } ",[1002,90367,2393],{"class":1015},[1002,90369,90325],{"class":1030},[925,90371,90372],{},"What if you have a more complex, deeply nested, object? Not a problem!",[993,90374,90376],{"className":995,"code":90375,"language":997,"meta":998,"style":998},"var person = { name: { firstName: 'John', lastName: 'Doe' } };\nvar {\n name: { firstName, lastName },\n} = person;\n",[941,90377,90378,90398,90404,90411],{"__ignoreMap":998},[1002,90379,90380,90382,90384,90386,90389,90391,90393,90395],{"class":1004,"line":1005},[1002,90381,18311],{"class":1015},[1002,90383,82348],{"class":1030},[1002,90385,2393],{"class":1015},[1002,90387,90388],{"class":1030}," { name: { firstName: ",[1002,90390,12853],{"class":1034},[1002,90392,26080],{"class":1030},[1002,90394,90311],{"class":1034},[1002,90396,90397],{"class":1030}," } };\n",[1002,90399,90400,90402],{"class":1004,"line":1012},[1002,90401,18311],{"class":1015},[1002,90403,1457],{"class":1030},[1002,90405,90406,90408],{"class":1004,"line":1047},[1002,90407,17207],{"class":2378},[1002,90409,90410],{"class":1030},": { firstName, lastName },\n",[1002,90412,90413,90415,90417],{"class":1004,"line":1054},[1002,90414,23716],{"class":1030},[1002,90416,2393],{"class":1015},[1002,90418,90325],{"class":1030},[925,90420,90421],{},"You can throw in some array destructuring here as well:",[993,90423,90425],{"className":995,"code":90424,"language":997,"meta":998,"style":998},"var person = { dateOfBirth: [1, 1, 1980] };\nvar {\n dateOfBirth: [day, month, year],\n} = person;\n",[941,90426,90427,90451,90457,90465],{"__ignoreMap":998},[1002,90428,90429,90431,90433,90435,90438,90440,90442,90444,90446,90448],{"class":1004,"line":1005},[1002,90430,18311],{"class":1015},[1002,90432,82348],{"class":1030},[1002,90434,2393],{"class":1015},[1002,90436,90437],{"class":1030}," { dateOfBirth: [",[1002,90439,6211],{"class":1019},[1002,90441,1251],{"class":1030},[1002,90443,6211],{"class":1019},[1002,90445,1251],{"class":1030},[1002,90447,31495],{"class":1019},[1002,90449,90450],{"class":1030},"] };\n",[1002,90452,90453,90455],{"class":1004,"line":1012},[1002,90454,18311],{"class":1015},[1002,90456,1457],{"class":1030},[1002,90458,90459,90462],{"class":1004,"line":1047},[1002,90460,90461],{"class":2378}," dateOfBirth",[1002,90463,90464],{"class":1030},": [day, month, year],\n",[1002,90466,90467,90469,90471],{"class":1004,"line":1054},[1002,90468,23716],{"class":1030},[1002,90470,2393],{"class":1015},[1002,90472,90325],{"class":1030},[925,90474,90475],{},"Just like when dealing with arrays you can also specify default values.",[993,90477,90479],{"className":995,"code":90478,"language":997,"meta":998,"style":998},"var { firstName = 'John', lastName: userLastName = 'Doe' } = {};\n",[941,90480,90481],{"__ignoreMap":998},[1002,90482,90483,90485,90488,90490,90492,90494,90496,90499,90501,90503,90505,90507],{"class":1004,"line":1005},[1002,90484,18311],{"class":1015},[1002,90486,90487],{"class":1030}," { firstName ",[1002,90489,2393],{"class":1015},[1002,90491,90105],{"class":1034},[1002,90493,1251],{"class":1030},[1002,90495,90133],{"class":2378},[1002,90497,90498],{"class":1030},": userLastName ",[1002,90500,2393],{"class":1015},[1002,90502,90113],{"class":1034},[1002,90504,15042],{"class":1030},[1002,90506,2393],{"class":1015},[1002,90508,7217],{"class":1030},[925,90510,90511,90512,2034,90514,90134,90516,948],{},"This also only works for undefined values. In the following example ",[941,90513,90130],{},[941,90515,90133],{},[941,90517,26077],{},[993,90519,90521],{"className":995,"code":90520,"language":997,"meta":998,"style":998},"var { firstName = 'John', lastName = 'Doe' } = {\n firstName: null,\n lastName: null,\n};\n",[941,90522,90523,90545,90554,90562],{"__ignoreMap":998},[1002,90524,90525,90527,90529,90531,90533,90535,90537,90539,90541,90543],{"class":1004,"line":1005},[1002,90526,18311],{"class":1015},[1002,90528,90487],{"class":1030},[1002,90530,2393],{"class":1015},[1002,90532,90105],{"class":1034},[1002,90534,90108],{"class":1030},[1002,90536,2393],{"class":1015},[1002,90538,90113],{"class":1034},[1002,90540,15042],{"class":1030},[1002,90542,2393],{"class":1015},[1002,90544,1457],{"class":1030},[1002,90546,90547,90550,90552],{"class":1004,"line":1012},[1002,90548,90549],{"class":1030}," firstName: ",[1002,90551,26077],{"class":1019},[1002,90553,1143],{"class":1030},[1002,90555,90556,90558,90560],{"class":1004,"line":1047},[1002,90557,82357],{"class":1030},[1002,90559,26077],{"class":1019},[1002,90561,1143],{"class":1030},[1002,90563,90564],{"class":1004,"line":1054},[1002,90565,1517],{"class":1030},[953,90567,90569],{"id":90568},"destructuring-function-arguments","Destructuring Function Arguments",[925,90571,90572],{},"Function arguments in ES6 could also be declared in a destructuring way. This comes in super useful for the ever-prolific options argument. You can use array and object destructuring together.",[993,90574,90576],{"className":995,"code":90575,"language":997,"meta":998,"style":998},"function findUser(userId, options) {\n if (options.includeProfile) ...\n if (options.includeHistory) ...\n}\n",[941,90577,90578,90596,90605,90614],{"__ignoreMap":998},[1002,90579,90580,90582,90585,90587,90590,90592,90594],{"class":1004,"line":1005},[1002,90581,6965],{"class":1015},[1002,90583,90584],{"class":1026}," findUser",[1002,90586,1031],{"class":1030},[1002,90588,90589],{"class":2378},"userId",[1002,90591,1251],{"class":1030},[1002,90593,2379],{"class":2378},[1002,90595,2382],{"class":1030},[1002,90597,90598,90600,90603],{"class":1004,"line":1012},[1002,90599,19971],{"class":1015},[1002,90601,90602],{"class":1030}," (options.includeProfile) ",[1002,90604,48279],{"class":1015},[1002,90606,90607,90609,90612],{"class":1004,"line":1047},[1002,90608,19971],{"class":1015},[1002,90610,90611],{"class":1030}," (options.includeHistory) ",[1002,90613,48279],{"class":1015},[1002,90615,90616],{"class":1004,"line":1054},[1002,90617,1170],{"class":1030},[925,90619,90620],{},"Same looks and feels much better in ES6:",[993,90622,90624],{"className":995,"code":90623,"language":997,"meta":998,"style":998},"function findUser(userId, {includeProfile, includeHistory}) {\n if (includeProfile) ...\n if (includeHistory) ...\n}\n",[941,90625,90626,90650,90659,90668],{"__ignoreMap":998},[1002,90627,90628,90630,90632,90634,90636,90639,90642,90644,90647],{"class":1004,"line":1005},[1002,90629,6965],{"class":1015},[1002,90631,90584],{"class":1026},[1002,90633,1031],{"class":1030},[1002,90635,90589],{"class":2378},[1002,90637,90638],{"class":1030},", {",[1002,90640,90641],{"class":2378},"includeProfile",[1002,90643,1251],{"class":1030},[1002,90645,90646],{"class":2378},"includeHistory",[1002,90648,90649],{"class":1030},"}) {\n",[1002,90651,90652,90654,90657],{"class":1004,"line":1012},[1002,90653,19971],{"class":1015},[1002,90655,90656],{"class":1030}," (includeProfile) ",[1002,90658,48279],{"class":1015},[1002,90660,90661,90663,90666],{"class":1004,"line":1047},[1002,90662,19971],{"class":1015},[1002,90664,90665],{"class":1030}," (includeHistory) ",[1002,90667,48279],{"class":1015},[1002,90669,90670],{"class":1004,"line":1054},[1002,90671,1170],{"class":1030},[925,90673,90674],{},"ES6 destructuring brings in much-needed syntax modernizations to JavaScript. It improves readability and reduces the amount of code necessary for expressive declarations.",[1579,90676,90677],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":90679},[90680,90683,90684],{"id":89621,"depth":1012,"text":89622,"children":90681},[90682],{"id":31280,"depth":1047,"text":31281},{"id":90285,"depth":1012,"text":90286},{"id":90568,"depth":1012,"text":90569},"2015-09-02","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-destructuring.jpg",{},{"title":211,"description":213},"blog\u002Fes6-destructuring",[16,17],"n0ZzgllW3D92pr4R4TrXIFqpX3lGxamb8CkVqw7ivDY",{"id":90693,"title":470,"author":920,"body":90694,"date":91560,"description":472,"extension":1591,"image":91561,"meta":91562,"navigation":1050,"path":471,"seo":91563,"stem":91564,"tags":91565,"__hash__":91566},"blog\u002Fblog\u002Fintroduction-to-webpack.md",{"type":922,"value":90695,"toc":91551},[90696,90700,90703,90706,90715,90718,90724,90728,90733,90748,90757,90845,90848,90863,90872,90878,90882,90935,90939,90945,90991,90998,91017,91026,91032,91124,91128,91131,91136,91162,91168,91184,91193,91206,91210,91216,91231,91239,91244,91323,91326,91363,91376,91381,91385,91390,91409,91413,91448,91453,91501,91507,91533,91542,91548],[953,90697,90699],{"id":90698},"why-webpack","Why Webpack?",[925,90701,90702],{},"With webpack you can easily split your application into multiple files\u002Fchunks.",[925,90704,90705],{},"This way, your codebase can be split into multiple chunks and those chunks can be loaded on demand reducing the initial loading time of your application.",[7100,90707,90709],{"type":24048,"title":90708},"Caching",[925,90710,90711,90712,948],{},"Webpack can also make your chunks cache friendly by using ",[941,90713,90714],{},"hashes",[925,90716,90717],{},"It can build and bundle CSS, preprocessed CSS, compile-to-JS languages (like CoffeeScript), images and more by utilising webpack loaders.",[925,90719,90720,90721,90723],{},"Another great feature is webpack ",[941,90722,62423],{},". Webpack plugins have the ability to inject themselves into the build process to do all sorts of things.",[953,90725,90727],{"id":90726},"using-webpack","Using Webpack",[925,90729,90730,90731,1813],{},"You can install Webpack through ",[941,90732,27346],{},[993,90734,90736],{"className":1797,"code":90735,"language":1799,"meta":998,"style":998},"npm install webpack -g\n",[941,90737,90738],{"__ignoreMap":998},[1002,90739,90740,90742,90744,90746],{"class":1004,"line":1005},[1002,90741,27346],{"class":1026},[1002,90743,27349],{"class":1034},[1002,90745,33076],{"class":1034},[1002,90747,44015],{"class":1019},[925,90749,90750,90751,90753,90754,90756],{},"Add a ",[941,90752,1102],{}," file to the root of your projects directory with the following ",[1107,90755,48159],{}," command or copy and save the snippet below as your package.json.",[993,90758,90760],{"className":995,"code":90759,"language":997,"meta":998,"style":998},"{\n \"name\": \"WebpackDemo\",\n \"author\": \"Your name\",\n \"version\": \"0.0.1\",\n \"description\": \"Trying out web pack\",\n \"private\": true,\n \"scripts\": {},\n \"dependencies\": {},\n \"devDependencies\": {}\n}\n",[941,90761,90762,90766,90777,90788,90799,90810,90821,90828,90834,90841],{"__ignoreMap":998},[1002,90763,90764],{"class":1004,"line":1005},[1002,90765,1129],{"class":1030},[1002,90767,90768,90770,90772,90775],{"class":1004,"line":1012},[1002,90769,1134],{"class":1034},[1002,90771,1137],{"class":1030},[1002,90773,90774],{"class":1034},"\"WebpackDemo\"",[1002,90776,1143],{"class":1030},[1002,90778,90779,90781,90783,90786],{"class":1004,"line":1047},[1002,90780,41263],{"class":1034},[1002,90782,1137],{"class":1030},[1002,90784,90785],{"class":1034},"\"Your name\"",[1002,90787,1143],{"class":1030},[1002,90789,90790,90792,90794,90797],{"class":1004,"line":1054},[1002,90791,1148],{"class":1034},[1002,90793,1137],{"class":1030},[1002,90795,90796],{"class":1034},"\"0.0.1\"",[1002,90798,1143],{"class":1030},[1002,90800,90801,90803,90805,90808],{"class":1004,"line":1060},[1002,90802,41182],{"class":1034},[1002,90804,1137],{"class":1030},[1002,90806,90807],{"class":1034},"\"Trying out web pack\"",[1002,90809,1143],{"class":1030},[1002,90811,90812,90815,90817,90819],{"class":1004,"line":1272},[1002,90813,90814],{"class":1034}," \"private\"",[1002,90816,1137],{"class":1030},[1002,90818,17397],{"class":1019},[1002,90820,1143],{"class":1030},[1002,90822,90823,90825],{"class":1004,"line":1348},[1002,90824,41206],{"class":1034},[1002,90826,90827],{"class":1030},": {},\n",[1002,90829,90830,90832],{"class":1004,"line":1354},[1002,90831,41287],{"class":1034},[1002,90833,90827],{"class":1030},[1002,90835,90836,90838],{"class":1004,"line":1360},[1002,90837,41731],{"class":1034},[1002,90839,90840],{"class":1030},": {}\n",[1002,90842,90843],{"class":1004,"line":1366},[1002,90844,1170],{"class":1030},[925,90846,90847],{},"Now we want to add webpack to the newly created package.json file.",[993,90849,90851],{"className":1797,"code":90850,"language":1799,"meta":998,"style":998},"npm install webpack --save-dev\n",[941,90852,90853],{"__ignoreMap":998},[1002,90854,90855,90857,90859,90861],{"class":1004,"line":1005},[1002,90856,27346],{"class":1026},[1002,90858,27349],{"class":1034},[1002,90860,33076],{"class":1034},[1002,90862,89044],{"class":1019},[7100,90864,90865],{"type":23379},[925,90866,90867,90868,90871],{},"to prevent your configuration accidently ending up in Github, you have to make sure the ",[941,90869,90870],{},"private : true"," flag is set in your package.json file.",[925,90873,90874,90875,948],{},"Now the webpack command is available via the CLI. You can find a detailed list of options on the official site or via ",[1107,90876,90877],{},"webpack -h",[953,90879,90881],{"id":90880},"configuaration-options","Configuaration Options",[39742,90883,90884,90885],{},"\n\t",[39759,90886,90887,90894,90884,90903,90884,90911,90884,90919,90884,90927],{},[39748,90888,90889,90884,90892,90884],{},[39751,90890,90891],{},"Option",[39751,90893,39757],{},[39748,90895,90896,90897,90900,90884],{},"\n\t\t",[39764,90898,90899],{},"`webpack`",[39764,90901,90902],{}," Building once for development",[39748,90904,90896,90905,90908,90884],{},[39764,90906,90907],{},"`webpack -p`",[39764,90909,90910],{}," Building once for production (minification)",[39748,90912,90896,90913,90916,90884],{},[39764,90914,90915],{},"`webpack --watch`",[39764,90917,90918],{}," Continuous incremental build",[39748,90920,90896,90921,90924,90884],{},[39764,90922,90923],{},"`webpack -d`",[39764,90925,90926],{}," Include source maps",[39748,90928,90896,90929,90932,90884],{},[39764,90930,90931],{},"`webpack --colors`",[39764,90933,90934],{}," Making things pretty",[953,90936,90938],{"id":90937},"creating-the-config-file","Creating the Config File",[925,90940,90941,90942,90944],{},"To start we need to create the ",[1107,90943,33219],{}," in the root of our projects directory.",[993,90946,90948],{"className":995,"code":90947,"language":997,"meta":998,"style":998},"module.exports = {\n entry: '.\u002Fmain.js',\n output: {\n filename: 'bundle.js',\n },\n};\n",[941,90949,90950,90962,90971,90975,90983,90987],{"__ignoreMap":998},[1002,90951,90952,90954,90956,90958,90960],{"class":1004,"line":1005},[1002,90953,1227],{"class":1019},[1002,90955,948],{"class":1030},[1002,90957,1452],{"class":1019},[1002,90959,1023],{"class":1015},[1002,90961,1457],{"class":1030},[1002,90963,90964,90966,90969],{"class":1004,"line":1012},[1002,90965,1462],{"class":1030},[1002,90967,90968],{"class":1034},"'.\u002Fmain.js'",[1002,90970,1143],{"class":1030},[1002,90972,90973],{"class":1004,"line":1047},[1002,90974,1472],{"class":1030},[1002,90976,90977,90979,90981],{"class":1004,"line":1054},[1002,90978,1477],{"class":1030},[1002,90980,1480],{"class":1034},[1002,90982,1143],{"class":1030},[1002,90984,90985],{"class":1004,"line":1060},[1002,90986,1502],{"class":1030},[1002,90988,90989],{"class":1004,"line":1272},[1002,90990,1517],{"class":1030},[925,90992,90993,90994,90997],{},"Create a simple JavaScript file called ",[1107,90995,90996],{},"main.js"," with the following contents:",[993,90999,91001],{"className":995,"code":91000,"language":997,"meta":998,"style":998},"document.write('Hello Webpack!');\n",[941,91002,91003],{"__ignoreMap":998},[1002,91004,91005,91007,91010,91012,91015],{"class":1004,"line":1005},[1002,91006,25444],{"class":1030},[1002,91008,91009],{"class":1026},"write",[1002,91011,1031],{"class":1030},[1002,91013,91014],{"class":1034},"'Hello Webpack!'",[1002,91016,1085],{"class":1030},[925,91018,91019,91020,91022,91023,91025],{},"Now by running the ",[1107,91021,33058],{}," command via the CLI you should have a bundle.js file available. What happened is the webpack command found your ",[1107,91024,33219],{}," file and worked its magic.",[925,91027,91028,91029,91031],{},"To make sure everything is working as expected, we can create a simple ",[1107,91030,37877],{}," file with the following content:",[993,91033,91035],{"className":37880,"code":91034,"language":383,"meta":998,"style":998},"\u003Chtml>\n \u003Chead>\n \u003Cscript type=\"text\u002Fjavascript\" src=\"bundle.js\">\u003C\u002Fscript>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Ch1>Webpack Intro\u003C\u002Fh1>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,91036,91037,91045,91053,91079,91087,91095,91108,91116],{"__ignoreMap":998},[1002,91038,91039,91041,91043],{"class":1004,"line":1005},[1002,91040,6539],{"class":1030},[1002,91042,383],{"class":15711},[1002,91044,15703],{"class":1030},[1002,91046,91047,91049,91051],{"class":1004,"line":1012},[1002,91048,22427],{"class":1030},[1002,91050,32092],{"class":15711},[1002,91052,15703],{"class":1030},[1002,91054,91055,91057,91059,91061,91063,91066,91068,91070,91073,91075,91077],{"class":1004,"line":1047},[1002,91056,15697],{"class":1030},[1002,91058,22063],{"class":15711},[1002,91060,29274],{"class":1026},[1002,91062,2393],{"class":1030},[1002,91064,91065],{"class":1034},"\"text\u002Fjavascript\"",[1002,91067,15242],{"class":1026},[1002,91069,2393],{"class":1030},[1002,91071,91072],{"class":1034},"\"bundle.js\"",[1002,91074,22081],{"class":1030},[1002,91076,22063],{"class":15711},[1002,91078,15703],{"class":1030},[1002,91080,91081,91083,91085],{"class":1004,"line":1054},[1002,91082,28112],{"class":1030},[1002,91084,32092],{"class":15711},[1002,91086,15703],{"class":1030},[1002,91088,91089,91091,91093],{"class":1004,"line":1060},[1002,91090,22427],{"class":1030},[1002,91092,15034],{"class":15711},[1002,91094,15703],{"class":1030},[1002,91096,91097,91099,91101,91104,91106],{"class":1004,"line":1272},[1002,91098,15697],{"class":1030},[1002,91100,15201],{"class":15711},[1002,91102,91103],{"class":1030},">Webpack Intro\u003C\u002F",[1002,91105,15201],{"class":15711},[1002,91107,15703],{"class":1030},[1002,91109,91110,91112,91114],{"class":1004,"line":1348},[1002,91111,28112],{"class":1030},[1002,91113,15034],{"class":15711},[1002,91115,15703],{"class":1030},[1002,91117,91118,91120,91122],{"class":1004,"line":1354},[1002,91119,22437],{"class":1030},[1002,91121,383],{"class":15711},[1002,91123,15703],{"class":1030},[953,91125,91127],{"id":91126},"adding-multiple-modules","Adding Multiple Modules",[925,91129,91130],{},"Webpack supports adding multiple modules to your project.",[925,91132,84527,91133,90997],{},[1107,91134,91135],{},"extra.js",[993,91137,91139],{"className":995,"code":91138,"language":997,"meta":998,"style":998},"module.exports = document.write('Another file');\n",[941,91140,91141],{"__ignoreMap":998},[1002,91142,91143,91145,91147,91149,91151,91153,91155,91157,91160],{"class":1004,"line":1005},[1002,91144,1227],{"class":1019},[1002,91146,948],{"class":1030},[1002,91148,1452],{"class":1019},[1002,91150,1023],{"class":1015},[1002,91152,16142],{"class":1030},[1002,91154,91009],{"class":1026},[1002,91156,1031],{"class":1030},[1002,91158,91159],{"class":1034},"'Another file'",[1002,91161,1085],{"class":1030},[925,91163,91164,91165,91167],{},"Now make a reference to that file in your ",[1107,91166,90996],{}," file:",[993,91169,91171],{"className":995,"code":91170,"language":997,"meta":998,"style":998},"require('.\u002Fextra.js');\n",[941,91172,91173],{"__ignoreMap":998},[1002,91174,91175,91177,91179,91182],{"class":1004,"line":1005},[1002,91176,1294],{"class":1026},[1002,91178,1031],{"class":1030},[1002,91180,91181],{"class":1034},"'.\u002Fextra.js'",[1002,91183,1085],{"class":1030},[925,91185,35004,91186,91188,91189,91192],{},[1107,91187,33058],{}," command from the CLI and open up your ",[1107,91190,91191],{},"bundle.js"," file. You should now see that both files are happily living together.",[7100,91194,91196],{"type":24048,"title":91195},"Minification",[925,91197,91198,91199,91202,91203,91205],{},"If you want to minify the file, run ",[1107,91200,91201],{},"webpack -p",". Now your ",[1107,91204,91191],{}," is minified.",[953,91207,91209],{"id":91208},"adding-loaders","Adding loaders",[925,91211,91212,91213,91215],{},"If you want to use ES6 modules in your project, you can use ",[941,91214,33021],{},". Babel is a compiler for writing next generation JavaScript.",[993,91217,91219],{"className":1797,"code":91218,"language":1799,"meta":998,"style":998}," npm install babel-loader --save-dev\n",[941,91220,91221],{"__ignoreMap":998},[1002,91222,91223,91225,91227,91229],{"class":1004,"line":1005},[1002,91224,64286],{"class":1026},[1002,91226,27349],{"class":1034},[1002,91228,33082],{"class":1034},[1002,91230,89044],{"class":1019},[925,91232,91233,91234,91236,91237,33813],{},"This will add ",[941,91235,62030],{}," to your ",[1107,91238,1102],{},[925,91240,91241,91242],{},"Add this new section to your ",[1107,91243,33219],{},[993,91245,91247],{"className":995,"code":91246,"language":997,"meta":998,"style":998},"module: {\n loaders: [\n {\n test: \u002F\\.jsx?$\u002F,\n exclude: \u002F(node_modules|bower_components)\u002F,\n loader: 'babel?optional[]=runtime&stage=0',\n },\n ];\n}\n",[941,91248,91249,91255,91262,91267,91284,91301,91311,91315,91319],{"__ignoreMap":998},[1002,91250,91251,91253],{"class":1004,"line":1005},[1002,91252,1227],{"class":1026},[1002,91254,15354],{"class":1030},[1002,91256,91257,91260],{"class":1004,"line":1012},[1002,91258,91259],{"class":1026}," loaders",[1002,91261,1319],{"class":1030},[1002,91263,91264],{"class":1004,"line":1047},[1002,91265,91266],{"class":1030}," {\n",[1002,91268,91269,91272,91274,91276,91278,91280,91282],{"class":1004,"line":1054},[1002,91270,91271],{"class":1030}," test:",[1002,91273,33481],{"class":1034},[1002,91275,33485],{"class":33484},[1002,91277,2229],{"class":33488},[1002,91279,33491],{"class":1015},[1002,91281,4685],{"class":1034},[1002,91283,1143],{"class":1030},[1002,91285,91286,91289,91291,91293,91295,91297,91299],{"class":1004,"line":1060},[1002,91287,91288],{"class":1030}," exclude:",[1002,91290,33481],{"class":1034},[1002,91292,33505],{"class":33488},[1002,91294,33508],{"class":1015},[1002,91296,33511],{"class":33488},[1002,91298,4685],{"class":1034},[1002,91300,1143],{"class":1030},[1002,91302,91303,91306,91309],{"class":1004,"line":1272},[1002,91304,91305],{"class":1030}," loader: ",[1002,91307,91308],{"class":1034},"'babel?optional[]=runtime&stage=0'",[1002,91310,1143],{"class":1030},[1002,91312,91313],{"class":1004,"line":1348},[1002,91314,15108],{"class":1030},[1002,91316,91317],{"class":1004,"line":1354},[1002,91318,46725],{"class":1030},[1002,91320,91321],{"class":1004,"line":1360},[1002,91322,1170],{"class":1030},[925,91324,91325],{},"To test the loader we will need to add a simple JavaScript with ES6 file. Lets call it another.js and add the following contents:",[993,91327,91329],{"className":995,"code":91328,"language":997,"meta":998,"style":998},"let me = 'be';\nconsole.log(`${me} myself!`);\n",[941,91330,91331,91345],{"__ignoreMap":998},[1002,91332,91333,91335,91338,91340,91343],{"class":1004,"line":1005},[1002,91334,6516],{"class":1015},[1002,91336,91337],{"class":1030}," me ",[1002,91339,2393],{"class":1015},[1002,91341,91342],{"class":1034}," 'be'",[1002,91344,1407],{"class":1030},[1002,91346,91347,91349,91351,91353,91355,91358,91361],{"class":1004,"line":1012},[1002,91348,2883],{"class":1030},[1002,91350,2886],{"class":1026},[1002,91352,1031],{"class":1030},[1002,91354,83418],{"class":1034},[1002,91356,91357],{"class":1030},"me",[1002,91359,91360],{"class":1034},"} myself!`",[1002,91362,1085],{"class":1030},[7100,91364,91366],{"type":23379,"title":91365},"Babel loader is slow!",[925,91367,91368,91369,91372,91373,91375],{},"Make sure you are transforming as few files as possible. Because you are probably matching ",[1107,91370,91371],{},"\u002F.js$\u002F",", you might be transforming the ",[1107,91374,62080],{}," folder or other unwanted source.",[925,91377,35004,91378,91380],{},[941,91379,33058],{}," command on the CLI and you should now be seeing it in console.",[953,91382,91384],{"id":91383},"adding-css-and-images","Adding CSS and images",[925,91386,91387,91388,948],{},"First we will need to add a couple more loaders to our ",[1107,91389,1102],{},[993,91391,91393],{"className":1797,"code":91392,"language":1799,"meta":998,"style":998},"npm install style-loader css-loader --save-dev\n",[941,91394,91395],{"__ignoreMap":998},[1002,91396,91397,91399,91401,91404,91407],{"class":1004,"line":1005},[1002,91398,27346],{"class":1026},[1002,91400,27349],{"class":1034},[1002,91402,91403],{"class":1034}," style-loader",[1002,91405,91406],{"class":1034}," css-loader",[1002,91408,89044],{"class":1019},[925,91410,91241,91411],{},[1107,91412,33219],{},[993,91414,91416],{"className":995,"code":91415,"language":997,"meta":998,"style":998},"{ test: \u002F\\.css$\u002F, loader: 'style-loader!css-loader' }\n",[941,91417,91418],{"__ignoreMap":998},[1002,91419,91420,91423,91425,91427,91429,91431,91433,91435,91437,91439,91441,91443,91446],{"class":1004,"line":1005},[1002,91421,91422],{"class":1030},"{ ",[1002,91424,21237],{"class":1026},[1002,91426,1813],{"class":1030},[1002,91428,33481],{"class":1034},[1002,91430,33485],{"class":33484},[1002,91432,29],{"class":33488},[1002,91434,15864],{"class":1015},[1002,91436,4685],{"class":1034},[1002,91438,1251],{"class":1030},[1002,91440,62620],{"class":1026},[1002,91442,1137],{"class":1030},[1002,91444,91445],{"class":1034},"'style-loader!css-loader'",[1002,91447,71668],{"class":1030},[925,91449,48187,91450,91452],{},[1107,91451,33219],{}," adjust the output parameter to look something like this:",[993,91454,91456],{"className":995,"code":91455,"language":997,"meta":998,"style":998},"output: {\n path: '.\u002Fbuild',\n publicPath: 'http:\u002F\u002Fyoururl.com\u002F',\n filename: 'bundle.js'\n}\n",[941,91457,91458,91464,91475,91487,91497],{"__ignoreMap":998},[1002,91459,91460,91462],{"class":1004,"line":1005},[1002,91461,11143],{"class":1026},[1002,91463,15354],{"class":1030},[1002,91465,91466,91468,91470,91473],{"class":1004,"line":1012},[1002,91467,65020],{"class":1026},[1002,91469,1137],{"class":1030},[1002,91471,91472],{"class":1034},"'.\u002Fbuild'",[1002,91474,1143],{"class":1030},[1002,91476,91477,91480,91482,91485],{"class":1004,"line":1047},[1002,91478,91479],{"class":1026}," publicPath",[1002,91481,1137],{"class":1030},[1002,91483,91484],{"class":1034},"'http:\u002F\u002Fyoururl.com\u002F'",[1002,91486,1143],{"class":1030},[1002,91488,91489,91492,91494],{"class":1004,"line":1054},[1002,91490,91491],{"class":1026}," filename",[1002,91493,1137],{"class":1030},[1002,91495,91496],{"class":1034},"'bundle.js'\n",[1002,91498,91499],{"class":1004,"line":1060},[1002,91500,1170],{"class":1030},[925,91502,91503,91504,90997],{},"Also let's create a new CSS file called ",[1107,91505,91506],{},"styles.css",[993,91508,91510],{"className":35707,"code":91509,"language":29,"meta":998,"style":998},"body {\n background-color: beige;\n}\n",[941,91511,91512,91518,91529],{"__ignoreMap":998},[1002,91513,91514,91516],{"class":1004,"line":1005},[1002,91515,15034],{"class":15711},[1002,91517,1457],{"class":1030},[1002,91519,91520,91522,91524,91527],{"class":1004,"line":1012},[1002,91521,35963],{"class":1019},[1002,91523,1137],{"class":1030},[1002,91525,91526],{"class":1019},"beige",[1002,91528,1407],{"class":1030},[1002,91530,91531],{"class":1004,"line":1047},[1002,91532,1170],{"class":1030},[925,91534,91535,91536,91539,91540,948],{},"Require that (",[1107,91537,91538],{},"require(\".\u002Fstyles.css\");",") in the ",[1107,91541,90996],{},[925,91543,91544,91545,91547],{},"Re-run ",[1107,91546,33058],{}," from the command line and voilà !",[1579,91549,91550],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":91552},[91553,91554,91555,91556,91557,91558,91559],{"id":90698,"depth":1012,"text":90699},{"id":90726,"depth":1012,"text":90727},{"id":90880,"depth":1012,"text":90881},{"id":90937,"depth":1012,"text":90938},{"id":91126,"depth":1012,"text":91127},{"id":91208,"depth":1012,"text":91209},{"id":91383,"depth":1012,"text":91384},"2015-09-01","\u002Fimages\u002Fblog\u002Ffeatures\u002Fintroduction-to-webpack.jpg",{},{"title":470,"description":472},"blog\u002Fintroduction-to-webpack",[16,17,140],"drvDb9EW1TyHQLdZh4-XkC0qwa97dbqcwO0zTYj44a4",{"id":91568,"title":196,"author":920,"body":91569,"date":92215,"description":198,"extension":1591,"image":92216,"meta":92217,"navigation":1050,"path":197,"seo":92218,"stem":92219,"tags":92220,"__hash__":92221},"blog\u002Fblog\u002Fes6-arrow-functions.md",{"type":922,"value":91570,"toc":92209},[91571,91577,91582,91650,91656,91709,91712,91728,91731,91749,91752,91756,91759,91823,91826,91867,91871,91874,91895,91898,91925,91928,91934,92019,92025,92083,92085,92088,92143,92146,92206],[7100,91572,91574],{"title":91573,"type":24048},"Scope",[925,91575,91576],{},"The lexical scope (this) in arrow is same as surrounding scope, unlike functions which create new scope.",[925,91578,91579,91580,1813],{},"Let's look at a function that takes an argument written in ",[941,91581,65873],{},[993,91583,91585],{"className":995,"code":91584,"language":997,"meta":998,"style":998},"var sayHello = function (name) {\n return 'Hello, ' + name + '!';\n};\n\nconsole.log(sayHello('Sean')); \u002F\u002F Hello, Sean!\n",[941,91586,91587,91604,91622,91626,91630],{"__ignoreMap":998},[1002,91588,91589,91591,91594,91596,91598,91600,91602],{"class":1004,"line":1005},[1002,91590,18311],{"class":1015},[1002,91592,91593],{"class":1026}," sayHello",[1002,91595,1023],{"class":1015},[1002,91597,8457],{"class":1015},[1002,91599,6513],{"class":1030},[1002,91601,5911],{"class":2378},[1002,91603,2382],{"class":1030},[1002,91605,91606,91608,91611,91613,91615,91617,91620],{"class":1004,"line":1012},[1002,91607,15066],{"class":1015},[1002,91609,91610],{"class":1034}," 'Hello, '",[1002,91612,6583],{"class":1015},[1002,91614,63010],{"class":1030},[1002,91616,5064],{"class":1015},[1002,91618,91619],{"class":1034}," '!'",[1002,91621,1407],{"class":1030},[1002,91623,91624],{"class":1004,"line":1047},[1002,91625,1517],{"class":1030},[1002,91627,91628],{"class":1004,"line":1054},[1002,91629,1051],{"emptyLinePlaceholder":1050},[1002,91631,91632,91634,91636,91638,91641,91643,91645,91647],{"class":1004,"line":1060},[1002,91633,2883],{"class":1030},[1002,91635,2886],{"class":1026},[1002,91637,1031],{"class":1030},[1002,91639,91640],{"class":1026},"sayHello",[1002,91642,1031],{"class":1030},[1002,91644,23233],{"class":1034},[1002,91646,85500],{"class":1030},[1002,91648,91649],{"class":1008},"\u002F\u002F Hello, Sean!\n",[925,91651,91652,91653,91655],{},"Nopw let's look at how this can be written in ",[941,91654,65973],{}," using an array function:",[993,91657,91659],{"className":995,"code":91658,"language":997,"meta":998,"style":998},"let sayHello = (name) => 'Hello, ' + name + '!';\n\nconsole.log(sayHello('Sean'));\n",[941,91660,91661,91689,91693],{"__ignoreMap":998},[1002,91662,91663,91665,91667,91669,91671,91673,91675,91677,91679,91681,91683,91685,91687],{"class":1004,"line":1005},[1002,91664,6516],{"class":1015},[1002,91666,91593],{"class":1026},[1002,91668,1023],{"class":1015},[1002,91670,6513],{"class":1030},[1002,91672,5911],{"class":2378},[1002,91674,5876],{"class":1030},[1002,91676,15497],{"class":1015},[1002,91678,91610],{"class":1034},[1002,91680,6583],{"class":1015},[1002,91682,63010],{"class":1030},[1002,91684,5064],{"class":1015},[1002,91686,91619],{"class":1034},[1002,91688,1407],{"class":1030},[1002,91690,91691],{"class":1004,"line":1012},[1002,91692,1051],{"emptyLinePlaceholder":1050},[1002,91694,91695,91697,91699,91701,91703,91705,91707],{"class":1004,"line":1047},[1002,91696,2883],{"class":1030},[1002,91698,2886],{"class":1026},[1002,91700,1031],{"class":1030},[1002,91702,91640],{"class":1026},[1002,91704,1031],{"class":1030},[1002,91706,23233],{"class":1034},[1002,91708,5663],{"class":1030},[925,91710,91711],{},"This may look bit confusing at the first glance, so let me explain it more clearly to you.",[993,91713,91715],{"className":995,"code":91714,"language":997,"meta":998,"style":998},"function(arguments) { espression }\n",[941,91716,91717],{"__ignoreMap":998},[1002,91718,91719,91721,91723,91725],{"class":1004,"line":1005},[1002,91720,6965],{"class":1015},[1002,91722,1031],{"class":1030},[1002,91724,31403],{"class":2378},[1002,91726,91727],{"class":1030},") { espression }\n",[925,91729,91730],{},"Is analogous to:",[993,91732,91734],{"className":995,"code":91733,"language":997,"meta":998,"style":998},"(arguments) => expression;\n",[941,91735,91736],{"__ignoreMap":998},[1002,91737,91738,91740,91742,91744,91746],{"class":1004,"line":1005},[1002,91739,1031],{"class":1030},[1002,91741,31403],{"class":2378},[1002,91743,5876],{"class":1030},[1002,91745,15497],{"class":1015},[1002,91747,91748],{"class":1030}," expression;\n",[925,91750,91751],{},"So all we are really doing is removing some superfluous syntax.",[953,91753,91755],{"id":91754},"arguements","Arguements",[925,91757,91758],{},"Our greeting function only accepts one argument, and when you only have one argument, parentheses are optional. Parentheses are required if you are handling more than one argument, though:",[993,91760,91762],{"className":995,"code":91761,"language":997,"meta":998,"style":998},"let sayHello = (firstName, lastName) => 'Hello, ' + firstname + lastName;\n\nconsole.log(sayHello('Sean', 'A')); \u002F\u002F Hello Sean A\n",[941,91763,91764,91796,91800],{"__ignoreMap":998},[1002,91765,91766,91768,91770,91772,91774,91776,91778,91780,91782,91784,91786,91788,91791,91793],{"class":1004,"line":1005},[1002,91767,6516],{"class":1015},[1002,91769,91593],{"class":1026},[1002,91771,1023],{"class":1015},[1002,91773,6513],{"class":1030},[1002,91775,90130],{"class":2378},[1002,91777,1251],{"class":1030},[1002,91779,90133],{"class":2378},[1002,91781,5876],{"class":1030},[1002,91783,15497],{"class":1015},[1002,91785,91610],{"class":1034},[1002,91787,6583],{"class":1015},[1002,91789,91790],{"class":1030}," firstname ",[1002,91792,5064],{"class":1015},[1002,91794,91795],{"class":1030}," lastName;\n",[1002,91797,91798],{"class":1004,"line":1012},[1002,91799,1051],{"emptyLinePlaceholder":1050},[1002,91801,91802,91804,91806,91808,91810,91812,91814,91816,91818,91820],{"class":1004,"line":1047},[1002,91803,2883],{"class":1030},[1002,91805,2886],{"class":1026},[1002,91807,1031],{"class":1030},[1002,91809,91640],{"class":1026},[1002,91811,1031],{"class":1030},[1002,91813,23233],{"class":1034},[1002,91815,1251],{"class":1030},[1002,91817,82360],{"class":1034},[1002,91819,85500],{"class":1030},[1002,91821,91822],{"class":1008},"\u002F\u002F Hello Sean A\n",[925,91824,91825],{},"Here is what an arrow function looks like with no arguments:",[993,91827,91829],{"className":995,"code":91828,"language":997,"meta":998,"style":998},"let sayHello = () => 'Hello, world!';\n\nconsole.log(sayHello()); \u002F\u002F Hello world!\n",[941,91830,91831,91848,91852],{"__ignoreMap":998},[1002,91832,91833,91835,91837,91839,91841,91843,91846],{"class":1004,"line":1005},[1002,91834,6516],{"class":1015},[1002,91836,91593],{"class":1026},[1002,91838,1023],{"class":1015},[1002,91840,17297],{"class":1030},[1002,91842,15497],{"class":1015},[1002,91844,91845],{"class":1034}," 'Hello, world!'",[1002,91847,1407],{"class":1030},[1002,91849,91850],{"class":1004,"line":1012},[1002,91851,1051],{"emptyLinePlaceholder":1050},[1002,91853,91854,91856,91858,91860,91862,91864],{"class":1004,"line":1047},[1002,91855,2883],{"class":1030},[1002,91857,2886],{"class":1026},[1002,91859,1031],{"class":1030},[1002,91861,91640],{"class":1026},[1002,91863,4530],{"class":1030},[1002,91865,91866],{"class":1008},"\u002F\u002F Hello world!\n",[953,91868,91870],{"id":91869},"anonymous","Anonymous",[925,91872,91873],{},"Arrow functions are always anonymous, which means we can't do this with ES6:",[993,91875,91877],{"className":995,"code":91876,"language":997,"meta":998,"style":998},"function doSomething() {\n ...\n}\n",[941,91878,91879,91887,91891],{"__ignoreMap":998},[1002,91880,91881,91883,91885],{"class":1004,"line":1005},[1002,91882,6965],{"class":1015},[1002,91884,16492],{"class":1026},[1002,91886,3025],{"class":1030},[1002,91888,91889],{"class":1004,"line":1012},[1002,91890,18213],{"class":1015},[1002,91892,91893],{"class":1004,"line":1047},[1002,91894,1170],{"class":1030},[925,91896,91897],{},"Instead of this, we could assign our anonymous arrow function to a variable:",[993,91899,91901],{"className":995,"code":91900,"language":997,"meta":998,"style":998},"var doSomething = () => {\n ...\n}\n",[941,91902,91903,91917,91921],{"__ignoreMap":998},[1002,91904,91905,91907,91909,91911,91913,91915],{"class":1004,"line":1005},[1002,91906,18311],{"class":1015},[1002,91908,16492],{"class":1026},[1002,91910,1023],{"class":1015},[1002,91912,17297],{"class":1030},[1002,91914,15497],{"class":1015},[1002,91916,1457],{"class":1030},[1002,91918,91919],{"class":1004,"line":1012},[1002,91920,18213],{"class":1015},[1002,91922,91923],{"class":1004,"line":1047},[1002,91924,1170],{"class":1030},[953,91926,91573],{"id":91927},"scope",[925,91929,91930,91931,91933],{},"Arrow functions are not just syntactic sugar. They also change how ",[941,91932,91927],{}," is handled in JavaScript. That means when every time you create a new function, it gets it's own scope.",[993,91935,91937],{"className":995,"code":91936,"language":997,"meta":998,"style":998},"var timer = function () {\n var self = this;\n\n this.seconds = 0;\n\n setInterval(function () {\n self.seconds++;\n }, 1000);\n};\n",[941,91938,91939,91952,91965,91969,91982,91986,91997,92006,92015],{"__ignoreMap":998},[1002,91940,91941,91943,91946,91948,91950],{"class":1004,"line":1005},[1002,91942,18311],{"class":1015},[1002,91944,91945],{"class":1026}," timer",[1002,91947,1023],{"class":1015},[1002,91949,8457],{"class":1015},[1002,91951,9772],{"class":1030},[1002,91953,91954,91956,91959,91961,91963],{"class":1004,"line":1012},[1002,91955,28293],{"class":1015},[1002,91957,91958],{"class":1030}," self ",[1002,91960,2393],{"class":1015},[1002,91962,2693],{"class":1019},[1002,91964,1407],{"class":1030},[1002,91966,91967],{"class":1004,"line":1047},[1002,91968,1051],{"emptyLinePlaceholder":1050},[1002,91970,91971,91973,91976,91978,91980],{"class":1004,"line":1054},[1002,91972,39364],{"class":1019},[1002,91974,91975],{"class":1030},".seconds ",[1002,91977,2393],{"class":1015},[1002,91979,4910],{"class":1019},[1002,91981,1407],{"class":1030},[1002,91983,91984],{"class":1004,"line":1060},[1002,91985,1051],{"emptyLinePlaceholder":1050},[1002,91987,91988,91991,91993,91995],{"class":1004,"line":1272},[1002,91989,91990],{"class":1026}," setInterval",[1002,91992,1031],{"class":1030},[1002,91994,6965],{"class":1015},[1002,91996,9772],{"class":1030},[1002,91998,91999,92002,92004],{"class":1004,"line":1348},[1002,92000,92001],{"class":1030}," self.seconds",[1002,92003,6545],{"class":1015},[1002,92005,1407],{"class":1030},[1002,92007,92008,92011,92013],{"class":1004,"line":1354},[1002,92009,92010],{"class":1030}," }, ",[1002,92012,6370],{"class":1019},[1002,92014,1085],{"class":1030},[1002,92016,92017],{"class":1004,"line":1360},[1002,92018,1517],{"class":1030},[925,92020,92021,92022,92024],{},"We need to store the parent's ",[941,92023,3455],{}," so we need to store the parent's this in a local variable that we can then reference in the callback. Arrow functions inherit the current this value, so you no longer need to create a copy of your own:",[993,92026,92028],{"className":995,"code":92027,"language":997,"meta":998,"style":998},"var timer = function () {\n this.seconds = 0;\n\n setInterval(() => this.seconds++, 1000);\n};\n",[941,92029,92030,92042,92054,92058,92079],{"__ignoreMap":998},[1002,92031,92032,92034,92036,92038,92040],{"class":1004,"line":1005},[1002,92033,18311],{"class":1015},[1002,92035,91945],{"class":1026},[1002,92037,1023],{"class":1015},[1002,92039,8457],{"class":1015},[1002,92041,9772],{"class":1030},[1002,92043,92044,92046,92048,92050,92052],{"class":1004,"line":1012},[1002,92045,39364],{"class":1019},[1002,92047,91975],{"class":1030},[1002,92049,2393],{"class":1015},[1002,92051,4910],{"class":1019},[1002,92053,1407],{"class":1030},[1002,92055,92056],{"class":1004,"line":1047},[1002,92057,1051],{"emptyLinePlaceholder":1050},[1002,92059,92060,92062,92064,92066,92068,92071,92073,92075,92077],{"class":1004,"line":1054},[1002,92061,91990],{"class":1026},[1002,92063,15494],{"class":1030},[1002,92065,15497],{"class":1015},[1002,92067,2693],{"class":1019},[1002,92069,92070],{"class":1030},".seconds",[1002,92072,6545],{"class":1015},[1002,92074,1251],{"class":1030},[1002,92076,6370],{"class":1019},[1002,92078,1085],{"class":1030},[1002,92080,92081],{"class":1004,"line":1060},[1002,92082,1517],{"class":1030},[953,92084,34624],{"id":34623},[925,92086,92087],{},"So the syntax for arrow funcion's construct looks as follows:",[993,92089,92091],{"className":995,"code":92090,"language":997,"meta":998,"style":998},"\u002F\u002F example 1\n([param] [, param]) => {\n statements\n}\n\n\u002F\u002F example 2\nparam => expression\n",[941,92092,92093,92098,92116,92121,92125,92129,92134],{"__ignoreMap":998},[1002,92094,92095],{"class":1004,"line":1005},[1002,92096,92097],{"class":1008},"\u002F\u002F example 1\n",[1002,92099,92100,92102,92105,92108,92110,92112,92114],{"class":1004,"line":1012},[1002,92101,30910],{"class":1030},[1002,92103,92104],{"class":2378},"param",[1002,92106,92107],{"class":1030},"] [, ",[1002,92109,92104],{"class":2378},[1002,92111,32184],{"class":1030},[1002,92113,15497],{"class":1015},[1002,92115,1457],{"class":1030},[1002,92117,92118],{"class":1004,"line":1047},[1002,92119,92120],{"class":1030}," statements\n",[1002,92122,92123],{"class":1004,"line":1054},[1002,92124,1170],{"class":1030},[1002,92126,92127],{"class":1004,"line":1060},[1002,92128,1051],{"emptyLinePlaceholder":1050},[1002,92130,92131],{"class":1004,"line":1272},[1002,92132,92133],{"class":1008},"\u002F\u002F example 2\n",[1002,92135,92136,92138,92140],{"class":1004,"line":1348},[1002,92137,92104],{"class":2378},[1002,92139,20479],{"class":1015},[1002,92141,92142],{"class":1030}," expression\n",[925,92144,92145],{},"Which is the equivalent ES5 of:",[993,92147,92149],{"className":995,"code":92148,"language":997,"meta":998,"style":998},"\u002F\u002F example 1\nfunction ([param] [, param]) {\n statements\n}\n\n\u002F\u002F example 2\nfunction (param) {\n return expression\n}\n",[941,92150,92151,92155,92170,92174,92178,92182,92186,92196,92202],{"__ignoreMap":998},[1002,92152,92153],{"class":1004,"line":1005},[1002,92154,92097],{"class":1008},[1002,92156,92157,92159,92161,92163,92165,92167],{"class":1004,"line":1012},[1002,92158,6965],{"class":1015},[1002,92160,32173],{"class":1030},[1002,92162,92104],{"class":2378},[1002,92164,92107],{"class":1030},[1002,92166,92104],{"class":2378},[1002,92168,92169],{"class":1030},"]) {\n",[1002,92171,92172],{"class":1004,"line":1047},[1002,92173,92120],{"class":1030},[1002,92175,92176],{"class":1004,"line":1054},[1002,92177,1170],{"class":1030},[1002,92179,92180],{"class":1004,"line":1060},[1002,92181,1051],{"emptyLinePlaceholder":1050},[1002,92183,92184],{"class":1004,"line":1272},[1002,92185,92133],{"class":1008},[1002,92187,92188,92190,92192,92194],{"class":1004,"line":1348},[1002,92189,6965],{"class":1015},[1002,92191,6513],{"class":1030},[1002,92193,92104],{"class":2378},[1002,92195,2382],{"class":1030},[1002,92197,92198,92200],{"class":1004,"line":1354},[1002,92199,15066],{"class":1015},[1002,92201,92142],{"class":1030},[1002,92203,92204],{"class":1004,"line":1360},[1002,92205,1170],{"class":1030},[1579,92207,92208],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":92210},[92211,92212,92213,92214],{"id":91754,"depth":1012,"text":91755},{"id":91869,"depth":1012,"text":91870},{"id":91927,"depth":1012,"text":91573},{"id":34623,"depth":1012,"text":34624},"2015-08-31","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-arrow-functions.jpg",{},{"title":196,"description":198},"blog\u002Fes6-arrow-functions",[16,17],"ojmzp9lmXcfmekzhf0W48-hdGh2JgscwyuCKtYSpA1Y",{"id":92223,"title":346,"author":920,"body":92224,"date":92949,"description":348,"extension":1591,"image":92950,"meta":92951,"navigation":1050,"path":347,"seo":92952,"stem":92953,"tags":92954,"__hash__":92955},"blog\u002Fblog\u002Fgrunt-watch-livereload-with-javascript-sass.md",{"type":922,"value":92225,"toc":92941},[92226,92229,92232,92312,92330,92340,92345,92350,92354,92357,92361,92364,92384,92391,92395,92405,92503,92507,92513,92522,92526,92529,92900,92903,92907,92910,92919,92926,92933,92938],[925,92227,92228],{},"Given that Grunt has these features, once it’s integrated into a project, it makes sense to leverage it for the real-time compiling and reloading of JS\u002FLESS\u002FSASS files. You’ll be able to reuse many of the same build tasks and it’ll allow other developers (who may not have CodeKit installed) to easily follow the same workflow when they open your project. Here’s how to do it.",[925,92230,92231],{},"Suppose we have a project using JavaScript and SASS. The file structure can look as follows:",[993,92233,92235],{"className":1724,"code":92234,"language":1726,"meta":998,"style":998},"tree\n\u002Fsrc\n \u002Fjquery.js\n \u002Ffunctions.js\n \u002Fapp.js\n\u002Fsass\n \u002F_header.sass\n \u002F_footer.sass\n \u002F_body.sass\n \u002Fmain.sass\n\u002Fpublic\n \u002Fcss\n \u002Fstyle.css\n \u002Fjs\n \u002Fmain.min.js\n",[941,92236,92237,92242,92247,92252,92257,92262,92267,92272,92277,92282,92287,92292,92297,92302,92307],{"__ignoreMap":998},[1002,92238,92239],{"class":1004,"line":1005},[1002,92240,92241],{},"tree\n",[1002,92243,92244],{"class":1004,"line":1012},[1002,92245,92246],{},"\u002Fsrc\n",[1002,92248,92249],{"class":1004,"line":1047},[1002,92250,92251],{}," \u002Fjquery.js\n",[1002,92253,92254],{"class":1004,"line":1054},[1002,92255,92256],{}," \u002Ffunctions.js\n",[1002,92258,92259],{"class":1004,"line":1060},[1002,92260,92261],{}," \u002Fapp.js\n",[1002,92263,92264],{"class":1004,"line":1272},[1002,92265,92266],{},"\u002Fsass\n",[1002,92268,92269],{"class":1004,"line":1348},[1002,92270,92271],{}," \u002F_header.sass\n",[1002,92273,92274],{"class":1004,"line":1354},[1002,92275,92276],{}," \u002F_footer.sass\n",[1002,92278,92279],{"class":1004,"line":1360},[1002,92280,92281],{}," \u002F_body.sass\n",[1002,92283,92284],{"class":1004,"line":1366},[1002,92285,92286],{}," \u002Fmain.sass\n",[1002,92288,92289],{"class":1004,"line":1946},[1002,92290,92291],{},"\u002Fpublic\n",[1002,92293,92294],{"class":1004,"line":1956},[1002,92295,92296],{}," \u002Fcss\n",[1002,92298,92299],{"class":1004,"line":1961},[1002,92300,92301],{}," \u002Fstyle.css\n",[1002,92303,92304],{"class":1004,"line":1971},[1002,92305,92306],{}," \u002Fjs\n",[1002,92308,92309],{"class":1004,"line":1980},[1002,92310,92311],{}," \u002Fmain.min.js\n",[925,92313,92314,92315,92318,92319,92322,92323,92326,92327,948],{},"We have 3 JavaScript files in the ",[1107,92316,92317],{},"\u002Fsrc"," directory that need to be combined and minified into ",[1107,92320,92321],{},"\u002Fpublic\u002Fjs\u002Fmain.min.js",". We also have a ",[1107,92324,92325],{},"main.sass"," file (that imports the other underscored .sass files) and compiles down into ",[1107,92328,92329],{},"\u002Fpublic\u002Fcss\u002Fstyle.css",[925,92331,92332,92333,92336,92337,92339],{},"In ",[941,92334,92335],{},"CodeKit",", you’d drag this whole folder into your window. You would configure some options and set the output paths, then you’d be good to go. ",[941,92338,92335],{}," would start watching the files and automatically recompile.",[925,92341,92332,92342,92344],{},[941,92343,88952],{},", however, we need to explain these procedures via a configuration file. Don’t worry. It’s easy! Here’s what you need to do.",[7100,92346,92347],{"type":24048},[925,92348,92349],{},"This seems like tedious, and a lot of steps, but often times many of them are done already — especially if you’re working on a Node.js project.",[953,92351,92353],{"id":92352},"_1-install-nodejs-with-npm","1. Install Node.js (with NPM)",[925,92355,92356],{},"Even if your project isn’t written in Node.js, you’ll need it to access these tool. Just go to nodejs.org and grab the latest copy. This will also install NPM (the Node.js Package Manager).",[953,92358,92360],{"id":92359},"_2-install-grunt","2. Install Grunt",[925,92362,92363],{},"Because you’ll be using Grunt a lot, it’s easiest to just install it globally. You can do that by running this command:",[993,92365,92367],{"className":995,"code":92366,"language":997,"meta":998,"style":998},"sudo npm install -g grunt-cli\n",[941,92368,92369],{"__ignoreMap":998},[1002,92370,92371,92374,92376,92379,92381],{"class":1004,"line":1005},[1002,92372,92373],{"class":1030},"sudo npm install ",[1002,92375,5101],{"class":1015},[1002,92377,92378],{"class":1030},"g grunt",[1002,92380,5101],{"class":1015},[1002,92382,92383],{"class":1030},"cli\n",[7100,92385,92386],{"type":23379},[925,92387,92388,92389,4954],{},"After the installation is complete, you may need to exit your terminal window and reopen it again to gain access to the ",[1107,92390,350],{},[953,92392,92394],{"id":92393},"_3-configure-npms-packagejson-with-grunt-plugins","3. Configure NPM’s package.json with Grunt Plugins",[925,92396,92397,92398,92401,92402,92404],{},"Ok, NPM is installed. Now we need to configure the necessary packages so that all the ",[941,92399,92400],{},"Grunt plugins"," we need will be downloaded. You’ll need to create a ",[941,92403,1102],{}," file with the contents below. If this file already exists, just add the entries in the dependencies section.",[993,92406,92408],{"className":995,"code":92407,"language":997,"meta":998,"style":998},"{\n \"name\": \"my-project\",\n \"version\": \"0.1.0\",\n \"dependencies\": {\n \"grunt-cli\": \"latest\",\n \"grunt-contrib-concat\": \"latest\",\n \"grunt-contrib-sass\": \"latest\",\n \"grunt-contrib-uglify\": \"latest\",\n \"grunt-contrib-watch\": \"latest\"\n }\n}\n",[941,92409,92410,92414,92425,92436,92442,92453,92464,92475,92486,92495,92499],{"__ignoreMap":998},[1002,92411,92412],{"class":1004,"line":1005},[1002,92413,1129],{"class":1030},[1002,92415,92416,92418,92420,92423],{"class":1004,"line":1012},[1002,92417,1134],{"class":1034},[1002,92419,1137],{"class":1030},[1002,92421,92422],{"class":1034},"\"my-project\"",[1002,92424,1143],{"class":1030},[1002,92426,92427,92429,92431,92434],{"class":1004,"line":1047},[1002,92428,1148],{"class":1034},[1002,92430,1137],{"class":1030},[1002,92432,92433],{"class":1034},"\"0.1.0\"",[1002,92435,1143],{"class":1030},[1002,92437,92438,92440],{"class":1004,"line":1054},[1002,92439,41287],{"class":1034},[1002,92441,15354],{"class":1030},[1002,92443,92444,92447,92449,92451],{"class":1004,"line":1060},[1002,92445,92446],{"class":1034}," \"grunt-cli\"",[1002,92448,1137],{"class":1030},[1002,92450,41743],{"class":1034},[1002,92452,1143],{"class":1030},[1002,92454,92455,92458,92460,92462],{"class":1004,"line":1272},[1002,92456,92457],{"class":1034}," \"grunt-contrib-concat\"",[1002,92459,1137],{"class":1030},[1002,92461,41743],{"class":1034},[1002,92463,1143],{"class":1030},[1002,92465,92466,92469,92471,92473],{"class":1004,"line":1348},[1002,92467,92468],{"class":1034}," \"grunt-contrib-sass\"",[1002,92470,1137],{"class":1030},[1002,92472,41743],{"class":1034},[1002,92474,1143],{"class":1030},[1002,92476,92477,92480,92482,92484],{"class":1004,"line":1354},[1002,92478,92479],{"class":1034}," \"grunt-contrib-uglify\"",[1002,92481,1137],{"class":1030},[1002,92483,41743],{"class":1034},[1002,92485,1143],{"class":1030},[1002,92487,92488,92491,92493],{"class":1004,"line":1360},[1002,92489,92490],{"class":1034}," \"grunt-contrib-watch\"",[1002,92492,1137],{"class":1030},[1002,92494,41755],{"class":1034},[1002,92496,92497],{"class":1004,"line":1366},[1002,92498,1269],{"class":1030},[1002,92500,92501],{"class":1004,"line":1946},[1002,92502,1170],{"class":1030},[953,92504,92506],{"id":92505},"_4-install-grunt-plugins-via-npm","4. Install Grunt Plugins via NPM",[925,92508,92509,92510,92512],{},"Now that we’ve configured our ",[1107,92511,1102],{}," file with the packages we need, let’s install them.",[993,92514,92516],{"className":1797,"code":92515,"language":1799,"meta":998,"style":998},"npm install\n",[941,92517,92518],{"__ignoreMap":998},[1002,92519,92520],{"class":1004,"line":1005},[1002,92521,92515],{},[953,92523,92525],{"id":92524},"_5-configure-gruntfilejs","5. Configure Gruntfile.js",[925,92527,92528],{},"Ok, everything is installed. The last thing we need to do is setup Grunt’s configuration file.",[993,92530,92532],{"className":995,"code":92531,"language":997,"meta":998,"style":998},"module.exports = function (grunt) {\n grunt.registerTask('watch', ['watch']);\n\n grunt.initConfig({\n concat: {\n js: {\n options: {\n separator: ';',\n },\n src: ['src\u002F*.js'],\n dest: 'public\u002Fjs\u002Fmain.min.js',\n },\n },\n uglify: {\n options: {\n mangle: false,\n },\n js: {\n files: {\n 'public\u002Fjs\u002Fmain.min.js': ['public\u002Fjs\u002Fmain.min.js'],\n },\n },\n },\n sass: {\n style: {\n files: {\n 'public\u002Fcss\u002Fstyle.css': 'sass\u002Fmain.sass',\n },\n },\n },\n watch: {\n js: {\n files: ['src\u002F*.js'],\n tasks: ['concat:js', 'uglify:js'],\n options: {\n livereload: true,\n },\n },\n css: {\n files: ['sass\u002F*.sass'],\n tasks: ['sass:style'],\n options: {\n livereload: true,\n },\n },\n },\n });\n\n grunt.loadNpmTasks('grunt-contrib-concat');\n grunt.loadNpmTasks('grunt-contrib-uglify');\n grunt.loadNpmTasks('grunt-contrib-sass');\n grunt.loadNpmTasks('grunt-contrib-watch');\n};\n",[941,92533,92534,92552,92571,92575,92584,92589,92594,92599,92609,92613,92623,92633,92637,92641,92646,92651,92660,92664,92668,92673,92684,92688,92692,92696,92701,92706,92710,92722,92726,92730,92734,92739,92743,92752,92767,92771,92780,92784,92788,92793,92802,92811,92815,92823,92827,92831,92835,92839,92843,92857,92870,92883,92896],{"__ignoreMap":998},[1002,92535,92536,92538,92540,92542,92544,92546,92548,92550],{"class":1004,"line":1005},[1002,92537,1227],{"class":1019},[1002,92539,948],{"class":1030},[1002,92541,1452],{"class":1019},[1002,92543,1023],{"class":1015},[1002,92545,8457],{"class":1015},[1002,92547,6513],{"class":1030},[1002,92549,350],{"class":2378},[1002,92551,2382],{"class":1030},[1002,92553,92554,92557,92560,92562,92565,92567,92569],{"class":1004,"line":1012},[1002,92555,92556],{"class":1030}," grunt.",[1002,92558,92559],{"class":1026},"registerTask",[1002,92561,1031],{"class":1030},[1002,92563,92564],{"class":1034},"'watch'",[1002,92566,47455],{"class":1030},[1002,92568,92564],{"class":1034},[1002,92570,29611],{"class":1030},[1002,92572,92573],{"class":1004,"line":1047},[1002,92574,1051],{"emptyLinePlaceholder":1050},[1002,92576,92577,92579,92582],{"class":1004,"line":1054},[1002,92578,92556],{"class":1030},[1002,92580,92581],{"class":1026},"initConfig",[1002,92583,2756],{"class":1030},[1002,92585,92586],{"class":1004,"line":1060},[1002,92587,92588],{"class":1030}," concat: {\n",[1002,92590,92591],{"class":1004,"line":1272},[1002,92592,92593],{"class":1030}," js: {\n",[1002,92595,92596],{"class":1004,"line":1348},[1002,92597,92598],{"class":1030}," options: {\n",[1002,92600,92601,92604,92607],{"class":1004,"line":1354},[1002,92602,92603],{"class":1030}," separator: ",[1002,92605,92606],{"class":1034},"';'",[1002,92608,1143],{"class":1030},[1002,92610,92611],{"class":1004,"line":1360},[1002,92612,33555],{"class":1030},[1002,92614,92615,92618,92621],{"class":1004,"line":1366},[1002,92616,92617],{"class":1030}," src: [",[1002,92619,92620],{"class":1034},"'src\u002F*.js'",[1002,92622,1903],{"class":1030},[1002,92624,92625,92628,92631],{"class":1004,"line":1946},[1002,92626,92627],{"class":1030}," dest: ",[1002,92629,92630],{"class":1034},"'public\u002Fjs\u002Fmain.min.js'",[1002,92632,1143],{"class":1030},[1002,92634,92635],{"class":1004,"line":1956},[1002,92636,1922],{"class":1030},[1002,92638,92639],{"class":1004,"line":1961},[1002,92640,15108],{"class":1030},[1002,92642,92643],{"class":1004,"line":1971},[1002,92644,92645],{"class":1030}," uglify: {\n",[1002,92647,92648],{"class":1004,"line":1980},[1002,92649,92650],{"class":1030}," options: {\n",[1002,92652,92653,92656,92658],{"class":1004,"line":1985},[1002,92654,92655],{"class":1030}," mangle: ",[1002,92657,19341],{"class":1019},[1002,92659,1143],{"class":1030},[1002,92661,92662],{"class":1004,"line":1995},[1002,92663,1922],{"class":1030},[1002,92665,92666],{"class":1004,"line":2006},[1002,92667,92593],{"class":1030},[1002,92669,92670],{"class":1004,"line":2011},[1002,92671,92672],{"class":1030}," files: {\n",[1002,92674,92675,92678,92680,92682],{"class":1004,"line":2017},[1002,92676,92677],{"class":1034}," 'public\u002Fjs\u002Fmain.min.js'",[1002,92679,1201],{"class":1030},[1002,92681,92630],{"class":1034},[1002,92683,1903],{"class":1030},[1002,92685,92686],{"class":1004,"line":2022},[1002,92687,33555],{"class":1030},[1002,92689,92690],{"class":1004,"line":2442},[1002,92691,1922],{"class":1030},[1002,92693,92694],{"class":1004,"line":2466},[1002,92695,15108],{"class":1030},[1002,92697,92698],{"class":1004,"line":2471},[1002,92699,92700],{"class":1030}," sass: {\n",[1002,92702,92703],{"class":1004,"line":2476},[1002,92704,92705],{"class":1030}," style: {\n",[1002,92707,92708],{"class":1004,"line":2481},[1002,92709,92672],{"class":1030},[1002,92711,92712,92715,92717,92720],{"class":1004,"line":2491},[1002,92713,92714],{"class":1034}," 'public\u002Fcss\u002Fstyle.css'",[1002,92716,1137],{"class":1030},[1002,92718,92719],{"class":1034},"'sass\u002Fmain.sass'",[1002,92721,1143],{"class":1030},[1002,92723,92724],{"class":1004,"line":2502},[1002,92725,33555],{"class":1030},[1002,92727,92728],{"class":1004,"line":2513},[1002,92729,1922],{"class":1030},[1002,92731,92732],{"class":1004,"line":2535},[1002,92733,15108],{"class":1030},[1002,92735,92736],{"class":1004,"line":2557},[1002,92737,92738],{"class":1030}," watch: {\n",[1002,92740,92741],{"class":1004,"line":2562},[1002,92742,92593],{"class":1030},[1002,92744,92745,92748,92750],{"class":1004,"line":2567},[1002,92746,92747],{"class":1030}," files: [",[1002,92749,92620],{"class":1034},[1002,92751,1903],{"class":1030},[1002,92753,92754,92757,92760,92762,92765],{"class":1004,"line":2572},[1002,92755,92756],{"class":1030}," tasks: [",[1002,92758,92759],{"class":1034},"'concat:js'",[1002,92761,1251],{"class":1030},[1002,92763,92764],{"class":1034},"'uglify:js'",[1002,92766,1903],{"class":1030},[1002,92768,92769],{"class":1004,"line":2582},[1002,92770,92598],{"class":1030},[1002,92772,92773,92776,92778],{"class":1004,"line":2594},[1002,92774,92775],{"class":1030}," livereload: ",[1002,92777,17397],{"class":1019},[1002,92779,1143],{"class":1030},[1002,92781,92782],{"class":1004,"line":2603},[1002,92783,33555],{"class":1030},[1002,92785,92786],{"class":1004,"line":2619},[1002,92787,1922],{"class":1030},[1002,92789,92790],{"class":1004,"line":2633},[1002,92791,92792],{"class":1030}," css: {\n",[1002,92794,92795,92797,92800],{"class":1004,"line":2641},[1002,92796,92747],{"class":1030},[1002,92798,92799],{"class":1034},"'sass\u002F*.sass'",[1002,92801,1903],{"class":1030},[1002,92803,92804,92806,92809],{"class":1004,"line":2655},[1002,92805,92756],{"class":1030},[1002,92807,92808],{"class":1034},"'sass:style'",[1002,92810,1903],{"class":1030},[1002,92812,92813],{"class":1004,"line":2667},[1002,92814,92598],{"class":1030},[1002,92816,92817,92819,92821],{"class":1004,"line":2674},[1002,92818,92775],{"class":1030},[1002,92820,17397],{"class":1019},[1002,92822,1143],{"class":1030},[1002,92824,92825],{"class":1004,"line":2679},[1002,92826,33555],{"class":1030},[1002,92828,92829],{"class":1004,"line":2684},[1002,92830,1922],{"class":1030},[1002,92832,92833],{"class":1004,"line":2704},[1002,92834,15108],{"class":1030},[1002,92836,92837],{"class":1004,"line":2709},[1002,92838,19836],{"class":1030},[1002,92840,92841],{"class":1004,"line":2714},[1002,92842,1051],{"emptyLinePlaceholder":1050},[1002,92844,92845,92847,92850,92852,92855],{"class":1004,"line":2719},[1002,92846,92556],{"class":1030},[1002,92848,92849],{"class":1026},"loadNpmTasks",[1002,92851,1031],{"class":1030},[1002,92853,92854],{"class":1034},"'grunt-contrib-concat'",[1002,92856,1085],{"class":1030},[1002,92858,92859,92861,92863,92865,92868],{"class":1004,"line":2735},[1002,92860,92556],{"class":1030},[1002,92862,92849],{"class":1026},[1002,92864,1031],{"class":1030},[1002,92866,92867],{"class":1034},"'grunt-contrib-uglify'",[1002,92869,1085],{"class":1030},[1002,92871,92872,92874,92876,92878,92881],{"class":1004,"line":2740},[1002,92873,92556],{"class":1030},[1002,92875,92849],{"class":1026},[1002,92877,1031],{"class":1030},[1002,92879,92880],{"class":1034},"'grunt-contrib-sass'",[1002,92882,1085],{"class":1030},[1002,92884,92885,92887,92889,92891,92894],{"class":1004,"line":2759},[1002,92886,92556],{"class":1030},[1002,92888,92849],{"class":1026},[1002,92890,1031],{"class":1030},[1002,92892,92893],{"class":1034},"'grunt-contrib-watch'",[1002,92895,1085],{"class":1030},[1002,92897,92898],{"class":1004,"line":2774},[1002,92899,1517],{"class":1030},[925,92901,92902],{},"This configuration file setups up a number of tasks for concatenating, compiling and minimizing the JS and SASS. It also tells Grunt to execute the tasks anytime the files are modified.",[953,92904,92906],{"id":92905},"_6-run-grunt-command-to-watch-your-files","6. Run Grunt Command to Watch Your Files",[925,92908,92909],{},"Now that everything is downloaded and configured, we simply need to run a single command to make Grunt start watching our files.",[993,92911,92913],{"className":995,"code":92912,"language":997,"meta":998,"style":998},"grunt watch\n",[941,92914,92915],{"__ignoreMap":998},[1002,92916,92917],{"class":1004,"line":1005},[1002,92918,92912],{"class":1030},[925,92920,92921,92922,92925],{},"Run this command (in your project’s root directory) anytime you want Grunt to start watching your files. To stop the process, simply use ",[1107,92923,92924],{},"control + c"," on your keyboard.",[925,92927,92928,92929,92932],{},"You’ll notice that there are a few live reload flags in the Grunt configuration file above. This tells Grunt to alert LiveReload that files have changed so that it can automatically refresh your browser window. For this functionality to work, you can purchase LiveReload or just install the free ",[1107,92930,92931],{},"LiveReload Chrome Extension",". (Make sure it’s enabled by clicking the icon in your browser’s toolbar.)",[7100,92934,92935],{"type":24048},[925,92936,92937],{},"Please note that if your files are structured or named differently, you may need to adjust the configuration above.",[1579,92939,92940],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":998,"searchDepth":1012,"depth":1012,"links":92942},[92943,92944,92945,92946,92947,92948],{"id":92352,"depth":1012,"text":92353},{"id":92359,"depth":1012,"text":92360},{"id":92393,"depth":1012,"text":92394},{"id":92505,"depth":1012,"text":92506},{"id":92524,"depth":1012,"text":92525},{"id":92905,"depth":1012,"text":92906},"2015-08-29","\u002Fimages\u002Fblog\u002Ffeatures\u002Fgrunt-watch-livereload-with-javascript-sass.jpg",{},{"title":346,"description":348},"blog\u002Fgrunt-watch-livereload-with-javascript-sass",[16,17,350],"okIUYnU0TSup6e_PrZzwwLrbbjhmns6LWKeSkYRlLKg",{"id":92957,"title":501,"author":920,"body":92958,"date":93832,"description":503,"extension":1591,"image":93833,"meta":93834,"navigation":1050,"path":502,"seo":93835,"stem":93836,"tags":93837,"__hash__":93838},"blog\u002Fblog\u002Fjavascript-closures.md",{"type":922,"value":92959,"toc":93826},[92960,92963,92985,92989,92992,93033,93036,93039,93050,93057,93065,93068,93094,93101,93104,93135,93139,93145,93240,93243,93323,93333,93336,93419,93429,93439,93442,93446,93449,93452,93602,93611,93618,93622,93625,93628,93631,93823],[925,92961,92962],{},"The closure has three scope chains:",[1530,92964,92965,92972,92979],{},[974,92966,92967,92968,92971],{},"It has access to its ",[941,92969,92970],{},"own scope"," (variables defined between its curly brackets)",[974,92973,92974,92975,92978],{},"It has access to the ",[941,92976,92977],{},"outer function","'s variables",[974,92980,92981,92982,92984],{},"and it has access to the ",[941,92983,16475],{}," variables",[953,92986,92988],{"id":92987},"access-to-outer-variables","Access to outer variables",[925,92990,92991],{},"What if a variable is accessed, but it isn’t local? Like here:",[993,92993,92995],{"className":995,"code":92994,"language":997,"meta":998,"style":998},"var bar = 5;\n\nfunction foo() {\n alert(bars);\n}\n",[941,92996,92997,93009,93013,93021,93029],{"__ignoreMap":998},[1002,92998,92999,93001,93003,93005,93007],{"class":1004,"line":1005},[1002,93000,18311],{"class":1015},[1002,93002,38350],{"class":1030},[1002,93004,2393],{"class":1015},[1002,93006,6190],{"class":1019},[1002,93008,1407],{"class":1030},[1002,93010,93011],{"class":1004,"line":1012},[1002,93012,1051],{"emptyLinePlaceholder":1050},[1002,93014,93015,93017,93019],{"class":1004,"line":1047},[1002,93016,6965],{"class":1015},[1002,93018,34640],{"class":1026},[1002,93020,3025],{"class":1030},[1002,93022,93023,93026],{"class":1004,"line":1054},[1002,93024,93025],{"class":1026}," alert",[1002,93027,93028],{"class":1030},"(bars);\n",[1002,93030,93031],{"class":1004,"line":1060},[1002,93032,1170],{"class":1030},[925,93034,93035],{},"In this case, the interpreter finds the variable in the outer lexical scope.",[925,93037,93038],{},"The process consists of two steps:",[1530,93040,93041],{},[974,93042,93043,93044,93046,93047,93049],{},"When a function ",[1107,93045,16521],{}," is created, it is not created in an empty space.\nThere is a current lexical scope. In the case above, it’s ",[941,93048,16479],{}," (bar is undefined at the time of function creation).",[925,93051,93052,93053,93056],{},"When a function is created, it gets a hidden property, named ",[941,93054,93055],{},"[[Scope]]",", which references current lexicl scope.",[1530,93058,93059],{},[974,93060,93061,93062,93064],{},"Later, when the function runs, it creates it’s own lexical scope and links it with ",[941,93063,93055],{},".\nSo when a variable is not found in the local lexical scope, it is searched outside:",[925,93066,93067],{},"If a variable is read, but can not be found anywhere, the error is generated.",[993,93069,93071],{"className":995,"code":93070,"language":997,"meta":998,"style":998},"function foo() {\n alert(bar); \u002F\u002F reading bar gives error, no bar\n}\n",[941,93072,93073,93081,93090],{"__ignoreMap":998},[1002,93074,93075,93077,93079],{"class":1004,"line":1005},[1002,93076,6965],{"class":1015},[1002,93078,34640],{"class":1026},[1002,93080,3025],{"class":1030},[1002,93082,93083,93085,93087],{"class":1004,"line":1012},[1002,93084,93025],{"class":1026},[1002,93086,88524],{"class":1030},[1002,93088,93089],{"class":1008},"\u002F\u002F reading bar gives error, no bar\n",[1002,93091,93092],{"class":1004,"line":1047},[1002,93093,1170],{"class":1030},[925,93095,93096,93097,93100],{},"Certain language constructs block the error, for example ",[1107,93098,93099],{},"typeof bar"," works if there is no bar (and returns undefined), but that’s an exception.",[925,93102,93103],{},"If a variable is set, but not found anywhere, then it is created in the outmost lexical scope, which is window.",[993,93105,93107],{"className":995,"code":93106,"language":997,"meta":998,"style":998},"function foo() {\n bar = 5; \u002F\u002F writing bar puts it into window\n}\n",[941,93108,93109,93117,93131],{"__ignoreMap":998},[1002,93110,93111,93113,93115],{"class":1004,"line":1005},[1002,93112,6965],{"class":1015},[1002,93114,34640],{"class":1026},[1002,93116,3025],{"class":1030},[1002,93118,93119,93122,93124,93126,93128],{"class":1004,"line":1012},[1002,93120,93121],{"class":1030}," bar ",[1002,93123,2393],{"class":1015},[1002,93125,6190],{"class":1019},[1002,93127,17938],{"class":1030},[1002,93129,93130],{"class":1008},"\u002F\u002F writing bar puts it into window\n",[1002,93132,93133],{"class":1004,"line":1047},[1002,93134,1170],{"class":1030},[953,93136,93138],{"id":93137},"nested-functions","Nested functions",[925,93140,93141,93142,948],{},"Functions can be nested one inside another, forming a chain of lexical scopes which can also be called a ",[941,93143,93144],{},"scope chain",[993,93146,93148],{"className":995,"code":93147,"language":997,"meta":998,"style":998},"var bar = 1;\n\nfunction foo() {\n\n function baz() {\n alert(bar);\n }\n\n return baz;\n}\n\nvar func = foo()l\nfunc(); \u002F\u002F 1\n",[941,93149,93150,93162,93166,93174,93178,93187,93195,93199,93203,93210,93214,93218,93232],{"__ignoreMap":998},[1002,93151,93152,93154,93156,93158,93160],{"class":1004,"line":1005},[1002,93153,18311],{"class":1015},[1002,93155,38350],{"class":1030},[1002,93157,2393],{"class":1015},[1002,93159,6246],{"class":1019},[1002,93161,1407],{"class":1030},[1002,93163,93164],{"class":1004,"line":1012},[1002,93165,1051],{"emptyLinePlaceholder":1050},[1002,93167,93168,93170,93172],{"class":1004,"line":1047},[1002,93169,6965],{"class":1015},[1002,93171,34640],{"class":1026},[1002,93173,3025],{"class":1030},[1002,93175,93176],{"class":1004,"line":1054},[1002,93177,1051],{"emptyLinePlaceholder":1050},[1002,93179,93180,93182,93185],{"class":1004,"line":1060},[1002,93181,18965],{"class":1015},[1002,93183,93184],{"class":1026}," baz",[1002,93186,3025],{"class":1030},[1002,93188,93189,93192],{"class":1004,"line":1272},[1002,93190,93191],{"class":1026}," alert",[1002,93193,93194],{"class":1030},"(bar);\n",[1002,93196,93197],{"class":1004,"line":1348},[1002,93198,1269],{"class":1030},[1002,93200,93201],{"class":1004,"line":1354},[1002,93202,1051],{"emptyLinePlaceholder":1050},[1002,93204,93205,93207],{"class":1004,"line":1360},[1002,93206,15066],{"class":1015},[1002,93208,93209],{"class":1030}," baz;\n",[1002,93211,93212],{"class":1004,"line":1366},[1002,93213,1170],{"class":1030},[1002,93215,93216],{"class":1004,"line":1946},[1002,93217,1051],{"emptyLinePlaceholder":1050},[1002,93219,93220,93222,93225,93227,93229],{"class":1004,"line":1956},[1002,93221,18311],{"class":1015},[1002,93223,93224],{"class":1030}," func ",[1002,93226,2393],{"class":1015},[1002,93228,34640],{"class":1026},[1002,93230,93231],{"class":1030},"()l\n",[1002,93233,93234,93236,93238],{"class":1004,"line":1961},[1002,93235,25478],{"class":1026},[1002,93237,6859],{"class":1030},[1002,93239,50532],{"class":1008},[925,93241,93242],{},"Lexical scope form a chain (from inside out):",[993,93244,93246],{"className":995,"code":93245,"language":997,"meta":998,"style":998},"\u002F\u002F LexicalScope = window = {bar:1, foo: function}\nvar bar = 1;\n\nfunction foo() {\n \u002F\u002F LexicalScope = {baz:function}\n\n function baz() {\n \u002F\u002F LexicalScope = {}\n alert(bar);\n }\n\n return baz;\n}\n",[941,93247,93248,93253,93265,93269,93277,93282,93286,93294,93299,93305,93309,93313,93319],{"__ignoreMap":998},[1002,93249,93250],{"class":1004,"line":1005},[1002,93251,93252],{"class":1008},"\u002F\u002F LexicalScope = window = {bar:1, foo: function}\n",[1002,93254,93255,93257,93259,93261,93263],{"class":1004,"line":1012},[1002,93256,18311],{"class":1015},[1002,93258,38350],{"class":1030},[1002,93260,2393],{"class":1015},[1002,93262,6246],{"class":1019},[1002,93264,1407],{"class":1030},[1002,93266,93267],{"class":1004,"line":1047},[1002,93268,1051],{"emptyLinePlaceholder":1050},[1002,93270,93271,93273,93275],{"class":1004,"line":1054},[1002,93272,6965],{"class":1015},[1002,93274,34640],{"class":1026},[1002,93276,3025],{"class":1030},[1002,93278,93279],{"class":1004,"line":1060},[1002,93280,93281],{"class":1008}," \u002F\u002F LexicalScope = {baz:function}\n",[1002,93283,93284],{"class":1004,"line":1272},[1002,93285,1051],{"emptyLinePlaceholder":1050},[1002,93287,93288,93290,93292],{"class":1004,"line":1348},[1002,93289,18965],{"class":1015},[1002,93291,93184],{"class":1026},[1002,93293,3025],{"class":1030},[1002,93295,93296],{"class":1004,"line":1354},[1002,93297,93298],{"class":1008}," \u002F\u002F LexicalScope = {}\n",[1002,93300,93301,93303],{"class":1004,"line":1360},[1002,93302,93191],{"class":1026},[1002,93304,93194],{"class":1030},[1002,93306,93307],{"class":1004,"line":1366},[1002,93308,1269],{"class":1030},[1002,93310,93311],{"class":1004,"line":1946},[1002,93312,1051],{"emptyLinePlaceholder":1050},[1002,93314,93315,93317],{"class":1004,"line":1956},[1002,93316,15066],{"class":1015},[1002,93318,93209],{"class":1030},[1002,93320,93321],{"class":1004,"line":1961},[1002,93322,1170],{"class":1030},[925,93324,93325,93326,93329,93330,948],{},"So, function ",[1107,93327,93328],{},"baz"," has access to ",[1107,93331,93332],{},"baz, foo, and bar",[925,93334,93335],{},"Nested functions may continue to live after the outer function has finished:",[993,93337,93339],{"className":995,"code":93338,"language":997,"meta":998,"style":998},"function User(name) {\n this.say = function (phrase) {\n alert(name + ' says: ' + phrase);\n };\n}\n\nvar user = new User('John');\n",[941,93340,93341,93353,93372,93388,93392,93396,93400],{"__ignoreMap":998},[1002,93342,93343,93345,93347,93349,93351],{"class":1004,"line":1005},[1002,93344,6965],{"class":1015},[1002,93346,12502],{"class":1026},[1002,93348,1031],{"class":1030},[1002,93350,5911],{"class":2378},[1002,93352,2382],{"class":1030},[1002,93354,93355,93357,93359,93361,93363,93365,93367,93370],{"class":1004,"line":1012},[1002,93356,39364],{"class":1019},[1002,93358,948],{"class":1030},[1002,93360,12782],{"class":1026},[1002,93362,1023],{"class":1015},[1002,93364,8457],{"class":1015},[1002,93366,6513],{"class":1030},[1002,93368,93369],{"class":2378},"phrase",[1002,93371,2382],{"class":1030},[1002,93373,93374,93376,93378,93380,93383,93385],{"class":1004,"line":1047},[1002,93375,93191],{"class":1026},[1002,93377,25788],{"class":1030},[1002,93379,5064],{"class":1015},[1002,93381,93382],{"class":1034}," ' says: '",[1002,93384,6583],{"class":1015},[1002,93386,93387],{"class":1030}," phrase);\n",[1002,93389,93390],{"class":1004,"line":1054},[1002,93391,15113],{"class":1030},[1002,93393,93394],{"class":1004,"line":1060},[1002,93395,1170],{"class":1030},[1002,93397,93398],{"class":1004,"line":1272},[1002,93399,1051],{"emptyLinePlaceholder":1050},[1002,93401,93402,93404,93407,93409,93411,93413,93415,93417],{"class":1004,"line":1348},[1002,93403,18311],{"class":1015},[1002,93405,93406],{"class":1030}," user ",[1002,93408,2393],{"class":1015},[1002,93410,2690],{"class":1015},[1002,93412,12502],{"class":1026},[1002,93414,1031],{"class":1030},[1002,93416,12853],{"class":1034},[1002,93418,1085],{"class":1030},[925,93420,93421,93422,93424,93425,93428],{},"Note, the ",[1107,93423,3455],{}," context is not related to scopes and variables. It does not participate here.As we see, ",[1107,93426,93427],{},"this.say"," is a property in the user object, so it continues to live after User completed.",[925,93430,93431,93432,93434,93435,93438],{},"And if you remember, when ",[1107,93433,93427],{}," is created, it (as every function) gets an internal reference to ",[1107,93436,93437],{},"this.say.[[Scope]]"," to current lexical scope. So, the lexical scope of the current User execution stays in memory. All variables of User also are its properties, so they are also carefully kept, not junked as usually.",[925,93440,93441],{},"The whole point is to ensure that if the inner function wants to access an outer variable in the future, it can do so.",[953,93443,93445],{"id":93444},"mutability-of-lexical-scope","Mutability of Lexical Scope",[925,93447,93448],{},"Several functions may share same outer LexicalEnvironment. In this case, they can modify it’s properties.",[925,93450,93451],{},"In the example below, this.fixName changes name, which is used by this.say:",[993,93453,93455],{"className":995,"code":93454,"language":997,"meta":998,"style":998},"function User(name) {\n this.fixName = function () {\n name = 'Mr.' + name.toUpperCase();\n };\n\n this.say = function (phrase) {\n alert(name + ' says: ' + phrase);\n };\n}\n\nvar user = new User('John'); \u002F\u002F (1)\nuser.fixName(); \u002F\u002F (2)\nuser.say(\"I'm alive!\"); \u002F\u002F Mr.JOHN says: I'm alive!\n",[941,93456,93457,93469,93484,93502,93506,93510,93528,93542,93546,93550,93554,93575,93586],{"__ignoreMap":998},[1002,93458,93459,93461,93463,93465,93467],{"class":1004,"line":1005},[1002,93460,6965],{"class":1015},[1002,93462,12502],{"class":1026},[1002,93464,1031],{"class":1030},[1002,93466,5911],{"class":2378},[1002,93468,2382],{"class":1030},[1002,93470,93471,93473,93475,93478,93480,93482],{"class":1004,"line":1012},[1002,93472,39364],{"class":1019},[1002,93474,948],{"class":1030},[1002,93476,93477],{"class":1026},"fixName",[1002,93479,1023],{"class":1015},[1002,93481,8457],{"class":1015},[1002,93483,9772],{"class":1030},[1002,93485,93486,93489,93491,93494,93496,93498,93500],{"class":1004,"line":1047},[1002,93487,93488],{"class":1030}," name ",[1002,93490,2393],{"class":1015},[1002,93492,93493],{"class":1034}," 'Mr.'",[1002,93495,6583],{"class":1015},[1002,93497,63033],{"class":1030},[1002,93499,38808],{"class":1026},[1002,93501,1428],{"class":1030},[1002,93503,93504],{"class":1004,"line":1054},[1002,93505,15113],{"class":1030},[1002,93507,93508],{"class":1004,"line":1060},[1002,93509,1051],{"emptyLinePlaceholder":1050},[1002,93511,93512,93514,93516,93518,93520,93522,93524,93526],{"class":1004,"line":1272},[1002,93513,39364],{"class":1019},[1002,93515,948],{"class":1030},[1002,93517,12782],{"class":1026},[1002,93519,1023],{"class":1015},[1002,93521,8457],{"class":1015},[1002,93523,6513],{"class":1030},[1002,93525,93369],{"class":2378},[1002,93527,2382],{"class":1030},[1002,93529,93530,93532,93534,93536,93538,93540],{"class":1004,"line":1348},[1002,93531,93191],{"class":1026},[1002,93533,25788],{"class":1030},[1002,93535,5064],{"class":1015},[1002,93537,93382],{"class":1034},[1002,93539,6583],{"class":1015},[1002,93541,93387],{"class":1030},[1002,93543,93544],{"class":1004,"line":1354},[1002,93545,15113],{"class":1030},[1002,93547,93548],{"class":1004,"line":1360},[1002,93549,1170],{"class":1030},[1002,93551,93552],{"class":1004,"line":1366},[1002,93553,1051],{"emptyLinePlaceholder":1050},[1002,93555,93556,93558,93560,93562,93564,93566,93568,93570,93572],{"class":1004,"line":1946},[1002,93557,18311],{"class":1015},[1002,93559,93406],{"class":1030},[1002,93561,2393],{"class":1015},[1002,93563,2690],{"class":1015},[1002,93565,12502],{"class":1026},[1002,93567,1031],{"class":1030},[1002,93569,12853],{"class":1034},[1002,93571,18256],{"class":1030},[1002,93573,93574],{"class":1008},"\u002F\u002F (1)\n",[1002,93576,93577,93579,93581,93583],{"class":1004,"line":1956},[1002,93578,12739],{"class":1030},[1002,93580,93477],{"class":1026},[1002,93582,6859],{"class":1030},[1002,93584,93585],{"class":1008},"\u002F\u002F (2)\n",[1002,93587,93588,93590,93592,93594,93597,93599],{"class":1004,"line":1961},[1002,93589,12739],{"class":1030},[1002,93591,12782],{"class":1026},[1002,93593,1031],{"class":1030},[1002,93595,93596],{"class":1034},"\"I'm alive!\"",[1002,93598,18256],{"class":1030},[1002,93600,93601],{"class":1008},"\u002F\u002F Mr.JOHN says: I'm alive!\n",[925,93603,30712,93604,2034,93607,93610],{},[1107,93605,93606],{},"user.fixName.[[Scope]]",[1107,93608,93609],{},"user.say.[[Scope]]"," reference same lexical scope, which corresponds to new User run.",[925,93612,93613,93614,93617],{},"From (1) to (2), the ",[1107,93615,93616],{},"LexicalScope.name"," is updated, so both functions see the variable change.",[953,93619,93621],{"id":93620},"scope-for-new-function","[[Scope]] for new Function",[925,93623,93624],{},"There is an exception to general scope binding rule. When you create a function using new Function, it’s [[Scope]] points to window, not to current lexical scope.",[925,93626,93627],{},"The following example demonstrates how a function, created with new Function ignores local variable a and outputs the global variable.",[925,93629,93630],{},"The regular behavior:",[993,93632,93634],{"className":995,"code":93633,"language":997,"meta":998,"style":998},"window.a = 1;\nfunction getFunc() {\n var a = 2;\n\n var func = function() { alert(a) }\n\n return func;\n}\n\ngetFunc()() \u002F\u002F 2, from LexicalEnvironemnt of getFunc\nAnd now the function, created by :\n\nwindow.a = 1\nfunction getFunc() {\n var a = 2\n\n var func = new Function('', 'alert(a)')\n return func\n}\n\ngetFunc()() \u002F\u002F 1, from window\n",[941,93635,93636,93647,93656,93668,93672,93691,93695,93702,93706,93710,93721,93738,93742,93753,93761,93772,93776,93799,93806,93810,93814],{"__ignoreMap":998},[1002,93637,93638,93641,93643,93645],{"class":1004,"line":1005},[1002,93639,93640],{"class":1030},"window.a ",[1002,93642,2393],{"class":1015},[1002,93644,6246],{"class":1019},[1002,93646,1407],{"class":1030},[1002,93648,93649,93651,93654],{"class":1004,"line":1012},[1002,93650,6965],{"class":1015},[1002,93652,93653],{"class":1026}," getFunc",[1002,93655,3025],{"class":1030},[1002,93657,93658,93660,93662,93664,93666],{"class":1004,"line":1047},[1002,93659,28293],{"class":1015},[1002,93661,85662],{"class":1030},[1002,93663,2393],{"class":1015},[1002,93665,10248],{"class":1019},[1002,93667,1407],{"class":1030},[1002,93669,93670],{"class":1004,"line":1054},[1002,93671,1051],{"emptyLinePlaceholder":1050},[1002,93673,93674,93676,93678,93680,93682,93685,93688],{"class":1004,"line":1060},[1002,93675,28293],{"class":1015},[1002,93677,26489],{"class":1026},[1002,93679,1023],{"class":1015},[1002,93681,8457],{"class":1015},[1002,93683,93684],{"class":1030},"() { ",[1002,93686,93687],{"class":1026},"alert",[1002,93689,93690],{"class":1030},"(a) }\n",[1002,93692,93693],{"class":1004,"line":1272},[1002,93694,1051],{"emptyLinePlaceholder":1050},[1002,93696,93697,93699],{"class":1004,"line":1348},[1002,93698,15066],{"class":1015},[1002,93700,93701],{"class":1030}," func;\n",[1002,93703,93704],{"class":1004,"line":1354},[1002,93705,1170],{"class":1030},[1002,93707,93708],{"class":1004,"line":1360},[1002,93709,1051],{"emptyLinePlaceholder":1050},[1002,93711,93712,93715,93718],{"class":1004,"line":1366},[1002,93713,93714],{"class":1026},"getFunc",[1002,93716,93717],{"class":1030},"()() ",[1002,93719,93720],{"class":1008},"\u002F\u002F 2, from LexicalEnvironemnt of getFunc\n",[1002,93722,93723,93726,93728,93730,93733,93736],{"class":1004,"line":1946},[1002,93724,93725],{"class":1030},"And now the ",[1002,93727,6965],{"class":1015},[1002,93729,1251],{"class":1030},[1002,93731,93732],{"class":1026},"created",[1002,93734,93735],{"class":1026}," by",[1002,93737,74570],{"class":1030},[1002,93739,93740],{"class":1004,"line":1956},[1002,93741,1051],{"emptyLinePlaceholder":1050},[1002,93743,93744,93746,93748,93750],{"class":1004,"line":1961},[1002,93745,16479],{"class":1026},[1002,93747,948],{"class":1030},[1002,93749,933],{"class":1026},[1002,93751,93752],{"class":1030}," = 1\n",[1002,93754,93755,93757,93759],{"class":1004,"line":1971},[1002,93756,6965],{"class":1015},[1002,93758,93653],{"class":1026},[1002,93760,3025],{"class":1030},[1002,93762,93763,93765,93767,93769],{"class":1004,"line":1980},[1002,93764,28293],{"class":1015},[1002,93766,85662],{"class":1030},[1002,93768,2393],{"class":1015},[1002,93770,93771],{"class":1019}," 2\n",[1002,93773,93774],{"class":1004,"line":1985},[1002,93775,1051],{"emptyLinePlaceholder":1050},[1002,93777,93778,93780,93782,93784,93786,93788,93790,93792,93794,93797],{"class":1004,"line":1995},[1002,93779,28293],{"class":1015},[1002,93781,93224],{"class":1030},[1002,93783,2393],{"class":1015},[1002,93785,2690],{"class":1015},[1002,93787,17085],{"class":1026},[1002,93789,1031],{"class":1030},[1002,93791,19820],{"class":1034},[1002,93793,1251],{"class":1030},[1002,93795,93796],{"class":1034},"'alert(a)'",[1002,93798,3808],{"class":1030},[1002,93800,93801,93803],{"class":1004,"line":2006},[1002,93802,15066],{"class":1015},[1002,93804,93805],{"class":1030}," func\n",[1002,93807,93808],{"class":1004,"line":2011},[1002,93809,1170],{"class":1030},[1002,93811,93812],{"class":1004,"line":2017},[1002,93813,1051],{"emptyLinePlaceholder":1050},[1002,93815,93816,93818,93820],{"class":1004,"line":2022},[1002,93817,93714],{"class":1026},[1002,93819,93717],{"class":1030},[1002,93821,93822],{"class":1008},"\u002F\u002F 1, from window\n",[1579,93824,93825],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":93827},[93828,93829,93830,93831],{"id":92987,"depth":1012,"text":92988},{"id":93137,"depth":1012,"text":93138},{"id":93444,"depth":1012,"text":93445},{"id":93620,"depth":1012,"text":93621},"2015-08-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjavascript-closures.jpg",{},{"title":501,"description":503},"blog\u002Fjavascript-closures",[16,17],"Mz_hLnqc3PrGcfGh88WkTb8VKQaf-pME9JpzD7hqTh0",{"id":93840,"title":667,"author":920,"body":93841,"date":95365,"description":669,"extension":1591,"image":95366,"meta":95367,"navigation":1050,"path":668,"seo":95368,"stem":95369,"tags":95370,"__hash__":95371},"blog\u002Fblog\u002Freact-deployment.md",{"type":922,"value":93842,"toc":95356},[93843,93846,93858,93862,93875,94021,94027,94031,94034,94219,94222,94227,94231,94234,94245,94384,94388,94391,94405,94408,94647,94658,94664,94668,94671,94682,94685,94907,94911,94914,94922,95139,95142,95145,95344,95347,95353],[925,93844,93845],{},"Before you think about deploying your React JS project using Webpack, there are two things you want to do preparing for a production build:",[1530,93847,93848,93853],{},[974,93849,93850,93851,45420],{},"Configure a script to run in your ",[941,93852,1102],{},[974,93854,33216,93855],{},[941,93856,93857],{},"production config",[953,93859,93861],{"id":93860},"creating-the-script","Creating the Script",[925,93863,93864,93865,93867,93868,93871,93872,948],{},"Assume you have a script for deploying to your development environment in ",[941,93866,1102],{}," you could run it with ",[1107,93869,93870],{},"npm run dev"," as shown below. Now let us set up ",[1107,93873,93874],{},"npm run deploy",[993,93876,93878],{"className":995,"code":93877,"language":997,"meta":998,"style":998},"{\n \"name\": \"react-deployment-test\",\n \"version\": \"0.1.0\",\n \"description\": \"React Deployment Test Project\",\n \"main\": \"app\u002Fmain.js\",\n \"scripts\": {\n \"dev\": \"webpack-dev-server --devtool eval --progress --colors --hot --content-base build\",\n \"deploy\": \"NODE_ENV=production webpack -p --config webpack.production.config.js\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"webpack\": \"^1.4.13\",\n \"webpack-dev-server\": \"^1.6.6\"\n },\n \"dependencies\": {}\n}\n",[941,93879,93880,93884,93895,93905,93916,93927,93933,93945,93955,93959,93969,93979,93985,93997,94007,94011,94017],{"__ignoreMap":998},[1002,93881,93882],{"class":1004,"line":1005},[1002,93883,1129],{"class":1030},[1002,93885,93886,93888,93890,93893],{"class":1004,"line":1012},[1002,93887,1134],{"class":1034},[1002,93889,1137],{"class":1030},[1002,93891,93892],{"class":1034},"\"react-deployment-test\"",[1002,93894,1143],{"class":1030},[1002,93896,93897,93899,93901,93903],{"class":1004,"line":1047},[1002,93898,1148],{"class":1034},[1002,93900,1137],{"class":1030},[1002,93902,92433],{"class":1034},[1002,93904,1143],{"class":1030},[1002,93906,93907,93909,93911,93914],{"class":1004,"line":1054},[1002,93908,41182],{"class":1034},[1002,93910,1137],{"class":1030},[1002,93912,93913],{"class":1034},"\"React Deployment Test Project\"",[1002,93915,1143],{"class":1030},[1002,93917,93918,93920,93922,93925],{"class":1004,"line":1060},[1002,93919,41194],{"class":1034},[1002,93921,1137],{"class":1030},[1002,93923,93924],{"class":1034},"\"app\u002Fmain.js\"",[1002,93926,1143],{"class":1030},[1002,93928,93929,93931],{"class":1004,"line":1272},[1002,93930,41206],{"class":1034},[1002,93932,15354],{"class":1030},[1002,93934,93935,93938,93940,93943],{"class":1004,"line":1348},[1002,93936,93937],{"class":1034}," \"dev\"",[1002,93939,1137],{"class":1030},[1002,93941,93942],{"class":1034},"\"webpack-dev-server --devtool eval --progress --colors --hot --content-base build\"",[1002,93944,1143],{"class":1030},[1002,93946,93947,93950,93952],{"class":1004,"line":1354},[1002,93948,93949],{"class":1034}," \"deploy\"",[1002,93951,1137],{"class":1030},[1002,93953,93954],{"class":1034},"\"NODE_ENV=production webpack -p --config webpack.production.config.js\"\n",[1002,93956,93957],{"class":1004,"line":1360},[1002,93958,1502],{"class":1030},[1002,93960,93961,93963,93965,93967],{"class":1004,"line":1366},[1002,93962,41263],{"class":1034},[1002,93964,1137],{"class":1030},[1002,93966,40147],{"class":1034},[1002,93968,1143],{"class":1030},[1002,93970,93971,93973,93975,93977],{"class":1004,"line":1946},[1002,93972,41275],{"class":1034},[1002,93974,1137],{"class":1030},[1002,93976,41280],{"class":1034},[1002,93978,1143],{"class":1030},[1002,93980,93981,93983],{"class":1004,"line":1956},[1002,93982,41731],{"class":1034},[1002,93984,15354],{"class":1030},[1002,93986,93987,93990,93992,93995],{"class":1004,"line":1961},[1002,93988,93989],{"class":1034}," \"webpack\"",[1002,93991,1137],{"class":1030},[1002,93993,93994],{"class":1034},"\"^1.4.13\"",[1002,93996,1143],{"class":1030},[1002,93998,93999,94002,94004],{"class":1004,"line":1971},[1002,94000,94001],{"class":1034}," \"webpack-dev-server\"",[1002,94003,1137],{"class":1030},[1002,94005,94006],{"class":1034},"\"^1.6.6\"\n",[1002,94008,94009],{"class":1004,"line":1980},[1002,94010,1502],{"class":1030},[1002,94012,94013,94015],{"class":1004,"line":1985},[1002,94014,41287],{"class":1034},[1002,94016,90840],{"class":1030},[1002,94018,94019],{"class":1004,"line":1995},[1002,94020,1170],{"class":1030},[925,94022,94023,94024,94026],{},"As you can see we are just running Webpack with the production argument and pointing to a different configuration file. We also use the environment variable ",[1107,94025,1566],{}," to allow our required modules to do their optimizations. Let's create the config file now.",[953,94028,94030],{"id":94029},"creating-the-production-config","Creating the Production Config",[925,94032,94033],{},"So there really is not much difference in creating the dev and production versions of your Webpack config. You basically point to a different output path and there are no workflow configurations or optimizations. What you also want to bring into this configuration is cache handling.",[993,94035,94037],{"className":995,"code":94036,"language":997,"meta":998,"style":998},"var path = require('path');\nvar node_modules_dir = path.resolve(__dirname, 'node_modules');\n\nvar config = {\n entry: path.resolve(__dirname, 'app\u002Fmain.js'),\n output: {\n path: path.resolve(__dirname, 'dist'),\n filename: 'bundle.js',\n },\n module: {\n loaders: [\n {\n test: \u002F\\.js$\u002F,\n\n \u002F\u002F There is not need to run the loader through\n \u002F\u002F vendors\n exclude: [node_modules_dir],\n loader: 'babel',\n },\n ],\n },\n};\n\nmodule.exports = config;\n",[941,94038,94039,94055,94076,94080,94090,94104,94108,94120,94128,94132,94136,94140,94144,94160,94164,94169,94174,94179,94187,94191,94195,94199,94203,94207],{"__ignoreMap":998},[1002,94040,94041,94043,94045,94047,94049,94051,94053],{"class":1004,"line":1005},[1002,94042,18311],{"class":1015},[1002,94044,33231],{"class":1030},[1002,94046,2393],{"class":1015},[1002,94048,1027],{"class":1026},[1002,94050,1031],{"class":1030},[1002,94052,33240],{"class":1034},[1002,94054,1085],{"class":1030},[1002,94056,94057,94059,94062,94064,94067,94069,94071,94074],{"class":1004,"line":1012},[1002,94058,18311],{"class":1015},[1002,94060,94061],{"class":1030}," node_modules_dir ",[1002,94063,2393],{"class":1015},[1002,94065,94066],{"class":1030}," path.",[1002,94068,1243],{"class":1026},[1002,94070,1492],{"class":1030},[1002,94072,94073],{"class":1034},"'node_modules'",[1002,94075,1085],{"class":1030},[1002,94077,94078],{"class":1004,"line":1047},[1002,94079,1051],{"emptyLinePlaceholder":1050},[1002,94081,94082,94084,94086,94088],{"class":1004,"line":1054},[1002,94083,18311],{"class":1015},[1002,94085,84572],{"class":1030},[1002,94087,2393],{"class":1015},[1002,94089,1457],{"class":1030},[1002,94091,94092,94095,94097,94099,94102],{"class":1004,"line":1060},[1002,94093,94094],{"class":1030}," entry: path.",[1002,94096,1243],{"class":1026},[1002,94098,1492],{"class":1030},[1002,94100,94101],{"class":1034},"'app\u002Fmain.js'",[1002,94103,1257],{"class":1030},[1002,94105,94106],{"class":1004,"line":1272},[1002,94107,1472],{"class":1030},[1002,94109,94110,94112,94114,94116,94118],{"class":1004,"line":1348},[1002,94111,1487],{"class":1030},[1002,94113,1243],{"class":1026},[1002,94115,1492],{"class":1030},[1002,94117,1495],{"class":1034},[1002,94119,1257],{"class":1030},[1002,94121,94122,94124,94126],{"class":1004,"line":1354},[1002,94123,1477],{"class":1030},[1002,94125,1480],{"class":1034},[1002,94127,1143],{"class":1030},[1002,94129,94130],{"class":1004,"line":1360},[1002,94131,1502],{"class":1030},[1002,94133,94134],{"class":1004,"line":1366},[1002,94135,33464],{"class":1030},[1002,94137,94138],{"class":1004,"line":1946},[1002,94139,33469],{"class":1030},[1002,94141,94142],{"class":1004,"line":1956},[1002,94143,1336],{"class":1030},[1002,94145,94146,94148,94150,94152,94154,94156,94158],{"class":1004,"line":1961},[1002,94147,33478],{"class":1030},[1002,94149,33481],{"class":1034},[1002,94151,33485],{"class":33484},[1002,94153,997],{"class":33488},[1002,94155,15864],{"class":1015},[1002,94157,4685],{"class":1034},[1002,94159,1143],{"class":1030},[1002,94161,94162],{"class":1004,"line":1971},[1002,94163,1051],{"emptyLinePlaceholder":1050},[1002,94165,94166],{"class":1004,"line":1980},[1002,94167,94168],{"class":1008}," \u002F\u002F There is not need to run the loader through\n",[1002,94170,94171],{"class":1004,"line":1985},[1002,94172,94173],{"class":1008}," \u002F\u002F vendors\n",[1002,94175,94176],{"class":1004,"line":1995},[1002,94177,94178],{"class":1030}," exclude: [node_modules_dir],\n",[1002,94180,94181,94183,94185],{"class":1004,"line":2006},[1002,94182,33520],{"class":1030},[1002,94184,33523],{"class":1034},[1002,94186,1143],{"class":1030},[1002,94188,94189],{"class":1004,"line":2011},[1002,94190,1922],{"class":1030},[1002,94192,94193],{"class":1004,"line":2017},[1002,94194,33564],{"class":1030},[1002,94196,94197],{"class":1004,"line":2022},[1002,94198,1502],{"class":1030},[1002,94200,94201],{"class":1004,"line":2442},[1002,94202,1517],{"class":1030},[1002,94204,94205],{"class":1004,"line":2466},[1002,94206,1051],{"emptyLinePlaceholder":1050},[1002,94208,94209,94211,94213,94215,94217],{"class":1004,"line":2471},[1002,94210,1227],{"class":1019},[1002,94212,948],{"class":1030},[1002,94214,1452],{"class":1019},[1002,94216,1023],{"class":1015},[1002,94218,62352],{"class":1030},[953,94220,94221],{"id":77},"Deployment",[925,94223,48156,94224,94226],{},[1107,94225,93874],{}," in the root of the project. Webpack will now run in production mode. It does some optimizations on its own, but also React JS will do its optimizations. Look into caching for even more production configuration.",[953,94228,94230],{"id":94229},"single-bundle","Single Bundle",[925,94232,94233],{},"Let's have a look at the simplest setup you can create for your application. Use a single bundle when:",[1530,94235,94236,94239,94242],{},[974,94237,94238],{},"You have a small application",[974,94240,94241],{},"You will rarely update the application",[974,94243,94244],{},"You are not too concerned about perceived initial loading time",[993,94246,94248],{"className":995,"code":94247,"language":997,"meta":998,"style":998},"var path = require('path');\nvar config = {\n entry: path.resolve(__dirname, 'app\u002Fmain.js'),\n output: {\n path: path.resolve(__dirname, 'dist'),\n filename: 'bundle.js',\n },\n module: {\n loaders: [\n {\n test: \u002F\\.js$\u002F,\n loader: 'babel',\n },\n ],\n },\n};\n\nmodule.exports = config;\n",[941,94249,94250,94266,94276,94288,94292,94304,94312,94316,94320,94324,94328,94344,94352,94356,94360,94364,94368,94372],{"__ignoreMap":998},[1002,94251,94252,94254,94256,94258,94260,94262,94264],{"class":1004,"line":1005},[1002,94253,18311],{"class":1015},[1002,94255,33231],{"class":1030},[1002,94257,2393],{"class":1015},[1002,94259,1027],{"class":1026},[1002,94261,1031],{"class":1030},[1002,94263,33240],{"class":1034},[1002,94265,1085],{"class":1030},[1002,94267,94268,94270,94272,94274],{"class":1004,"line":1012},[1002,94269,18311],{"class":1015},[1002,94271,84572],{"class":1030},[1002,94273,2393],{"class":1015},[1002,94275,1457],{"class":1030},[1002,94277,94278,94280,94282,94284,94286],{"class":1004,"line":1047},[1002,94279,94094],{"class":1030},[1002,94281,1243],{"class":1026},[1002,94283,1492],{"class":1030},[1002,94285,94101],{"class":1034},[1002,94287,1257],{"class":1030},[1002,94289,94290],{"class":1004,"line":1054},[1002,94291,1472],{"class":1030},[1002,94293,94294,94296,94298,94300,94302],{"class":1004,"line":1060},[1002,94295,1487],{"class":1030},[1002,94297,1243],{"class":1026},[1002,94299,1492],{"class":1030},[1002,94301,1495],{"class":1034},[1002,94303,1257],{"class":1030},[1002,94305,94306,94308,94310],{"class":1004,"line":1272},[1002,94307,1477],{"class":1030},[1002,94309,1480],{"class":1034},[1002,94311,1143],{"class":1030},[1002,94313,94314],{"class":1004,"line":1348},[1002,94315,1502],{"class":1030},[1002,94317,94318],{"class":1004,"line":1354},[1002,94319,33464],{"class":1030},[1002,94321,94322],{"class":1004,"line":1360},[1002,94323,33469],{"class":1030},[1002,94325,94326],{"class":1004,"line":1366},[1002,94327,1336],{"class":1030},[1002,94329,94330,94332,94334,94336,94338,94340,94342],{"class":1004,"line":1946},[1002,94331,33478],{"class":1030},[1002,94333,33481],{"class":1034},[1002,94335,33485],{"class":33484},[1002,94337,997],{"class":33488},[1002,94339,15864],{"class":1015},[1002,94341,4685],{"class":1034},[1002,94343,1143],{"class":1030},[1002,94345,94346,94348,94350],{"class":1004,"line":1956},[1002,94347,33520],{"class":1030},[1002,94349,33523],{"class":1034},[1002,94351,1143],{"class":1030},[1002,94353,94354],{"class":1004,"line":1961},[1002,94355,1922],{"class":1030},[1002,94357,94358],{"class":1004,"line":1971},[1002,94359,33564],{"class":1030},[1002,94361,94362],{"class":1004,"line":1980},[1002,94363,1502],{"class":1030},[1002,94365,94366],{"class":1004,"line":1985},[1002,94367,1517],{"class":1030},[1002,94369,94370],{"class":1004,"line":1995},[1002,94371,1051],{"emptyLinePlaceholder":1050},[1002,94373,94374,94376,94378,94380,94382],{"class":1004,"line":2006},[1002,94375,1227],{"class":1019},[1002,94377,948],{"class":1030},[1002,94379,1452],{"class":1019},[1002,94381,1023],{"class":1015},[1002,94383,62352],{"class":1030},[953,94385,94387],{"id":94386},"split-up-the-vendors","Split up the vendors",[925,94389,94390],{},"When your application is depending on other libraries, especially large ones like React JS, you should consider splitting those dependencies into its own vendor bundle. This will allow you to do updates to your application, without requiring the users to download the vendor bundle again. Use this strategy when:",[1530,94392,94393,94396,94399,94402],{},[974,94394,94395],{},"When your vendors reaches a certain percentage of your total app bundle. Like 20% and up",[974,94397,94398],{},"You will do quite a few updates to your application",[974,94400,94401],{},"You are not too concerned about perceived initial loading time, but you do have returning users and care about optimizing the experience when you do updates to the application",[974,94403,94404],{},"Users are on mobile",[925,94406,94407],{},"webpack.production.config.js",[993,94409,94411],{"className":995,"code":94410,"language":997,"meta":998,"style":998},"var path = require('path');\nvar webpack = require('webpack');\nvar node_modules_dir = path.resolve(__dirname, 'node_modules');\n\nvar config = {\n entry: {\n app: path.resolve(__dirname, 'app\u002Fmain.js'),\n\n \u002F\u002F Since react is installed as a node module, node_modules\u002Freact,\n \u002F\u002F we can point to it directly, just like require('react');\n vendors: ['react'],\n },\n output: {\n path: path.resolve(__dirname, 'dist'),\n filename: 'app.js',\n },\n module: {\n loaders: [\n {\n test: \u002F\\.js$\u002F,\n exclude: [node_modules_dir],\n loader: 'babel',\n },\n ],\n },\n plugins: [new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')],\n};\n\nmodule.exports = config;\n",[941,94412,94413,94429,94445,94463,94467,94477,94482,94495,94499,94504,94509,94518,94522,94526,94538,94546,94550,94554,94558,94562,94578,94582,94590,94594,94598,94602,94627,94631,94635],{"__ignoreMap":998},[1002,94414,94415,94417,94419,94421,94423,94425,94427],{"class":1004,"line":1005},[1002,94416,18311],{"class":1015},[1002,94418,33231],{"class":1030},[1002,94420,2393],{"class":1015},[1002,94422,1027],{"class":1026},[1002,94424,1031],{"class":1030},[1002,94426,33240],{"class":1034},[1002,94428,1085],{"class":1030},[1002,94430,94431,94433,94435,94437,94439,94441,94443],{"class":1004,"line":1012},[1002,94432,18311],{"class":1015},[1002,94434,33249],{"class":1030},[1002,94436,2393],{"class":1015},[1002,94438,1027],{"class":1026},[1002,94440,1031],{"class":1030},[1002,94442,33258],{"class":1034},[1002,94444,1085],{"class":1030},[1002,94446,94447,94449,94451,94453,94455,94457,94459,94461],{"class":1004,"line":1047},[1002,94448,18311],{"class":1015},[1002,94450,94061],{"class":1030},[1002,94452,2393],{"class":1015},[1002,94454,94066],{"class":1030},[1002,94456,1243],{"class":1026},[1002,94458,1492],{"class":1030},[1002,94460,94073],{"class":1034},[1002,94462,1085],{"class":1030},[1002,94464,94465],{"class":1004,"line":1054},[1002,94466,1051],{"emptyLinePlaceholder":1050},[1002,94468,94469,94471,94473,94475],{"class":1004,"line":1060},[1002,94470,18311],{"class":1015},[1002,94472,84572],{"class":1030},[1002,94474,2393],{"class":1015},[1002,94476,1457],{"class":1030},[1002,94478,94479],{"class":1004,"line":1272},[1002,94480,94481],{"class":1030}," entry: {\n",[1002,94483,94484,94487,94489,94491,94493],{"class":1004,"line":1348},[1002,94485,94486],{"class":1030}," app: path.",[1002,94488,1243],{"class":1026},[1002,94490,1492],{"class":1030},[1002,94492,94101],{"class":1034},[1002,94494,1257],{"class":1030},[1002,94496,94497],{"class":1004,"line":1354},[1002,94498,1051],{"emptyLinePlaceholder":1050},[1002,94500,94501],{"class":1004,"line":1360},[1002,94502,94503],{"class":1008}," \u002F\u002F Since react is installed as a node module, node_modules\u002Freact,\n",[1002,94505,94506],{"class":1004,"line":1366},[1002,94507,94508],{"class":1008}," \u002F\u002F we can point to it directly, just like require('react');\n",[1002,94510,94511,94514,94516],{"class":1004,"line":1946},[1002,94512,94513],{"class":1030}," vendors: [",[1002,94515,33538],{"class":1034},[1002,94517,1903],{"class":1030},[1002,94519,94520],{"class":1004,"line":1956},[1002,94521,1502],{"class":1030},[1002,94523,94524],{"class":1004,"line":1961},[1002,94525,1472],{"class":1030},[1002,94527,94528,94530,94532,94534,94536],{"class":1004,"line":1971},[1002,94529,1487],{"class":1030},[1002,94531,1243],{"class":1026},[1002,94533,1492],{"class":1030},[1002,94535,1495],{"class":1034},[1002,94537,1257],{"class":1030},[1002,94539,94540,94542,94544],{"class":1004,"line":1980},[1002,94541,1477],{"class":1030},[1002,94543,33402],{"class":1034},[1002,94545,1143],{"class":1030},[1002,94547,94548],{"class":1004,"line":1985},[1002,94549,1502],{"class":1030},[1002,94551,94552],{"class":1004,"line":1995},[1002,94553,33464],{"class":1030},[1002,94555,94556],{"class":1004,"line":2006},[1002,94557,33469],{"class":1030},[1002,94559,94560],{"class":1004,"line":2011},[1002,94561,1336],{"class":1030},[1002,94563,94564,94566,94568,94570,94572,94574,94576],{"class":1004,"line":2017},[1002,94565,33478],{"class":1030},[1002,94567,33481],{"class":1034},[1002,94569,33485],{"class":33484},[1002,94571,997],{"class":33488},[1002,94573,15864],{"class":1015},[1002,94575,4685],{"class":1034},[1002,94577,1143],{"class":1030},[1002,94579,94580],{"class":1004,"line":2022},[1002,94581,94178],{"class":1030},[1002,94583,94584,94586,94588],{"class":1004,"line":2442},[1002,94585,33520],{"class":1030},[1002,94587,33523],{"class":1034},[1002,94589,1143],{"class":1030},[1002,94591,94592],{"class":1004,"line":2466},[1002,94593,1922],{"class":1030},[1002,94595,94596],{"class":1004,"line":2471},[1002,94597,33564],{"class":1030},[1002,94599,94600],{"class":1004,"line":2476},[1002,94601,1502],{"class":1030},[1002,94603,94604,94606,94608,94611,94614,94616,94619,94621,94624],{"class":1004,"line":2481},[1002,94605,41555],{"class":1030},[1002,94607,5654],{"class":1015},[1002,94609,94610],{"class":1030}," webpack.optimize.",[1002,94612,94613],{"class":1026},"CommonsChunkPlugin",[1002,94615,1031],{"class":1030},[1002,94617,94618],{"class":1034},"'vendors'",[1002,94620,1251],{"class":1030},[1002,94622,94623],{"class":1034},"'vendors.js'",[1002,94625,94626],{"class":1030},")],\n",[1002,94628,94629],{"class":1004,"line":2491},[1002,94630,1517],{"class":1030},[1002,94632,94633],{"class":1004,"line":2502},[1002,94634,1051],{"emptyLinePlaceholder":1050},[1002,94636,94637,94639,94641,94643,94645],{"class":1004,"line":2513},[1002,94638,1227],{"class":1019},[1002,94640,948],{"class":1030},[1002,94642,1452],{"class":1019},[1002,94644,1023],{"class":1015},[1002,94646,62352],{"class":1030},[925,94648,94649,94650,94652,94653,2034,94655,948],{},"This configuration will create two files in the ",[1107,94651,2033],{}," folder. ",[941,94654,47429],{},[941,94656,94657],{},"vendors.js",[7100,94659,94661],{"title":94660,"type":23379},"Important!",[925,94662,94663],{},"Remember to add both files to your HTML file, or you will get the error: Uncaught ReferenceError: webpackJsonp is not defined.",[953,94665,94667],{"id":94666},"multiple-entry-points","Multiple Entry Points",[925,94669,94670],{},"Maybe you are building an application that has multiple URLs. An example of this would be a solution where you have two, or more, different URLs responding with different pages. Maybe you have one user page and one admin page. They both share a lot of code, but you do not want to load all the admin stuff for normal users. That is a good scenario for using multiple entry points. A list of use cases could be:",[1530,94672,94673,94676,94679],{},[974,94674,94675],{},"You have an application with multiple isolated user experiences, but they share a lot of code",[974,94677,94678],{},"You have a mobile version using less components",[974,94680,94681],{},"You have a typical user\u002Fadmin application where you do not want to load all the admin code for a normal user",[925,94683,94684],{},"Let us create an example with a mobile experience using less components: webpack.production.config.js",[993,94686,94688],{"className":995,"code":94687,"language":997,"meta":998,"style":998},"var path = require('path');\nvar webpack = require('webpack');\nvar node_modules_dir = path.resolve(__dirname, 'node_modules');\n\nvar config = {\n entry: {\n app: path.resolve(__dirname, 'app\u002Fmain.js'),\n mobile: path.resolve(__dirname, 'app\u002Fmobile.js'),\n vendors: ['react'], \u002F\u002F And other vendors\n },\n output: {\n path: path.resolve(__dirname, 'dist'),\n filename: '[name].js', \u002F\u002F Notice we use a variable\n },\n module: {\n loaders: [\n {\n test: \u002F\\.js$\u002F,\n exclude: [node_modules_dir],\n loader: 'babel',\n },\n ],\n },\n plugins: [new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')],\n};\n",[941,94689,94690,94706,94722,94740,94744,94754,94758,94770,94784,94795,94799,94803,94815,94827,94831,94835,94839,94843,94859,94863,94871,94875,94879,94883,94903],{"__ignoreMap":998},[1002,94691,94692,94694,94696,94698,94700,94702,94704],{"class":1004,"line":1005},[1002,94693,18311],{"class":1015},[1002,94695,33231],{"class":1030},[1002,94697,2393],{"class":1015},[1002,94699,1027],{"class":1026},[1002,94701,1031],{"class":1030},[1002,94703,33240],{"class":1034},[1002,94705,1085],{"class":1030},[1002,94707,94708,94710,94712,94714,94716,94718,94720],{"class":1004,"line":1012},[1002,94709,18311],{"class":1015},[1002,94711,33249],{"class":1030},[1002,94713,2393],{"class":1015},[1002,94715,1027],{"class":1026},[1002,94717,1031],{"class":1030},[1002,94719,33258],{"class":1034},[1002,94721,1085],{"class":1030},[1002,94723,94724,94726,94728,94730,94732,94734,94736,94738],{"class":1004,"line":1047},[1002,94725,18311],{"class":1015},[1002,94727,94061],{"class":1030},[1002,94729,2393],{"class":1015},[1002,94731,94066],{"class":1030},[1002,94733,1243],{"class":1026},[1002,94735,1492],{"class":1030},[1002,94737,94073],{"class":1034},[1002,94739,1085],{"class":1030},[1002,94741,94742],{"class":1004,"line":1054},[1002,94743,1051],{"emptyLinePlaceholder":1050},[1002,94745,94746,94748,94750,94752],{"class":1004,"line":1060},[1002,94747,18311],{"class":1015},[1002,94749,84572],{"class":1030},[1002,94751,2393],{"class":1015},[1002,94753,1457],{"class":1030},[1002,94755,94756],{"class":1004,"line":1272},[1002,94757,94481],{"class":1030},[1002,94759,94760,94762,94764,94766,94768],{"class":1004,"line":1348},[1002,94761,94486],{"class":1030},[1002,94763,1243],{"class":1026},[1002,94765,1492],{"class":1030},[1002,94767,94101],{"class":1034},[1002,94769,1257],{"class":1030},[1002,94771,94772,94775,94777,94779,94782],{"class":1004,"line":1354},[1002,94773,94774],{"class":1030}," mobile: path.",[1002,94776,1243],{"class":1026},[1002,94778,1492],{"class":1030},[1002,94780,94781],{"class":1034},"'app\u002Fmobile.js'",[1002,94783,1257],{"class":1030},[1002,94785,94786,94788,94790,94792],{"class":1004,"line":1360},[1002,94787,94513],{"class":1030},[1002,94789,33538],{"class":1034},[1002,94791,32267],{"class":1030},[1002,94793,94794],{"class":1008},"\u002F\u002F And other vendors\n",[1002,94796,94797],{"class":1004,"line":1366},[1002,94798,1502],{"class":1030},[1002,94800,94801],{"class":1004,"line":1946},[1002,94802,1472],{"class":1030},[1002,94804,94805,94807,94809,94811,94813],{"class":1004,"line":1956},[1002,94806,1487],{"class":1030},[1002,94808,1243],{"class":1026},[1002,94810,1492],{"class":1030},[1002,94812,1495],{"class":1034},[1002,94814,1257],{"class":1030},[1002,94816,94817,94819,94822,94824],{"class":1004,"line":1961},[1002,94818,1477],{"class":1030},[1002,94820,94821],{"class":1034},"'[name].js'",[1002,94823,1251],{"class":1030},[1002,94825,94826],{"class":1008},"\u002F\u002F Notice we use a variable\n",[1002,94828,94829],{"class":1004,"line":1971},[1002,94830,1502],{"class":1030},[1002,94832,94833],{"class":1004,"line":1980},[1002,94834,33464],{"class":1030},[1002,94836,94837],{"class":1004,"line":1985},[1002,94838,33469],{"class":1030},[1002,94840,94841],{"class":1004,"line":1995},[1002,94842,1336],{"class":1030},[1002,94844,94845,94847,94849,94851,94853,94855,94857],{"class":1004,"line":2006},[1002,94846,33478],{"class":1030},[1002,94848,33481],{"class":1034},[1002,94850,33485],{"class":33484},[1002,94852,997],{"class":33488},[1002,94854,15864],{"class":1015},[1002,94856,4685],{"class":1034},[1002,94858,1143],{"class":1030},[1002,94860,94861],{"class":1004,"line":2011},[1002,94862,94178],{"class":1030},[1002,94864,94865,94867,94869],{"class":1004,"line":2017},[1002,94866,33520],{"class":1030},[1002,94868,33523],{"class":1034},[1002,94870,1143],{"class":1030},[1002,94872,94873],{"class":1004,"line":2022},[1002,94874,1922],{"class":1030},[1002,94876,94877],{"class":1004,"line":2442},[1002,94878,33564],{"class":1030},[1002,94880,94881],{"class":1004,"line":2466},[1002,94882,1502],{"class":1030},[1002,94884,94885,94887,94889,94891,94893,94895,94897,94899,94901],{"class":1004,"line":2471},[1002,94886,41555],{"class":1030},[1002,94888,5654],{"class":1015},[1002,94890,94610],{"class":1030},[1002,94892,94613],{"class":1026},[1002,94894,1031],{"class":1030},[1002,94896,94618],{"class":1034},[1002,94898,1251],{"class":1030},[1002,94900,94623],{"class":1034},[1002,94902,94626],{"class":1030},[1002,94904,94905],{"class":1004,"line":2476},[1002,94906,1517],{"class":1030},[953,94908,94910],{"id":94909},"lazy-loading-entry-points","Lazy Loading Entry Points",[925,94912,94913],{},"It is also possible to lazy load entry points. This means that you load parts of your application as they are requested. A typical scenario for this would be that your users only visit specific parts of the application. And an example of that would be twitter.com. You do not always visit your profile page, so why load the code for that? Here is a summary of requirements:",[1530,94915,94916,94919],{},[974,94917,94918],{},"You have a relatively big application where users can visit different parts of it",[974,94920,94921],{},"You do care a lot about initial render time",[993,94923,94925],{"className":995,"code":94924,"language":997,"meta":998,"style":998},"var path = require('path');\nvar webpack = require('webpack');\nvar node_modules_dir = path.resolve(__dirname, 'node_modules');\n\nvar config = {\n entry: {\n app: path.resolve(__dirname, 'app\u002Fmain.js'),\n vendors: ['react'],\n },\n output: {\n path: path.resolve(__dirname, 'dist'),\n filename: 'app.js',\n },\n module: {\n loaders: [\n {\n test: \u002F\\.js$\u002F,\n exclude: [node_modules_dir],\n loader: 'babel',\n },\n ],\n },\n plugins: [new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')],\n};\n\nmodule.exports = config;\n",[941,94926,94927,94943,94959,94977,94981,94991,94995,95007,95015,95019,95023,95035,95043,95047,95051,95055,95059,95075,95079,95087,95091,95095,95099,95119,95123,95127],{"__ignoreMap":998},[1002,94928,94929,94931,94933,94935,94937,94939,94941],{"class":1004,"line":1005},[1002,94930,18311],{"class":1015},[1002,94932,33231],{"class":1030},[1002,94934,2393],{"class":1015},[1002,94936,1027],{"class":1026},[1002,94938,1031],{"class":1030},[1002,94940,33240],{"class":1034},[1002,94942,1085],{"class":1030},[1002,94944,94945,94947,94949,94951,94953,94955,94957],{"class":1004,"line":1012},[1002,94946,18311],{"class":1015},[1002,94948,33249],{"class":1030},[1002,94950,2393],{"class":1015},[1002,94952,1027],{"class":1026},[1002,94954,1031],{"class":1030},[1002,94956,33258],{"class":1034},[1002,94958,1085],{"class":1030},[1002,94960,94961,94963,94965,94967,94969,94971,94973,94975],{"class":1004,"line":1047},[1002,94962,18311],{"class":1015},[1002,94964,94061],{"class":1030},[1002,94966,2393],{"class":1015},[1002,94968,94066],{"class":1030},[1002,94970,1243],{"class":1026},[1002,94972,1492],{"class":1030},[1002,94974,94073],{"class":1034},[1002,94976,1085],{"class":1030},[1002,94978,94979],{"class":1004,"line":1054},[1002,94980,1051],{"emptyLinePlaceholder":1050},[1002,94982,94983,94985,94987,94989],{"class":1004,"line":1060},[1002,94984,18311],{"class":1015},[1002,94986,84572],{"class":1030},[1002,94988,2393],{"class":1015},[1002,94990,1457],{"class":1030},[1002,94992,94993],{"class":1004,"line":1272},[1002,94994,94481],{"class":1030},[1002,94996,94997,94999,95001,95003,95005],{"class":1004,"line":1348},[1002,94998,94486],{"class":1030},[1002,95000,1243],{"class":1026},[1002,95002,1492],{"class":1030},[1002,95004,94101],{"class":1034},[1002,95006,1257],{"class":1030},[1002,95008,95009,95011,95013],{"class":1004,"line":1354},[1002,95010,94513],{"class":1030},[1002,95012,33538],{"class":1034},[1002,95014,1903],{"class":1030},[1002,95016,95017],{"class":1004,"line":1360},[1002,95018,1502],{"class":1030},[1002,95020,95021],{"class":1004,"line":1366},[1002,95022,1472],{"class":1030},[1002,95024,95025,95027,95029,95031,95033],{"class":1004,"line":1946},[1002,95026,1487],{"class":1030},[1002,95028,1243],{"class":1026},[1002,95030,1492],{"class":1030},[1002,95032,1495],{"class":1034},[1002,95034,1257],{"class":1030},[1002,95036,95037,95039,95041],{"class":1004,"line":1956},[1002,95038,1477],{"class":1030},[1002,95040,33402],{"class":1034},[1002,95042,1143],{"class":1030},[1002,95044,95045],{"class":1004,"line":1961},[1002,95046,1502],{"class":1030},[1002,95048,95049],{"class":1004,"line":1971},[1002,95050,33464],{"class":1030},[1002,95052,95053],{"class":1004,"line":1980},[1002,95054,33469],{"class":1030},[1002,95056,95057],{"class":1004,"line":1985},[1002,95058,1336],{"class":1030},[1002,95060,95061,95063,95065,95067,95069,95071,95073],{"class":1004,"line":1995},[1002,95062,33478],{"class":1030},[1002,95064,33481],{"class":1034},[1002,95066,33485],{"class":33484},[1002,95068,997],{"class":33488},[1002,95070,15864],{"class":1015},[1002,95072,4685],{"class":1034},[1002,95074,1143],{"class":1030},[1002,95076,95077],{"class":1004,"line":2006},[1002,95078,94178],{"class":1030},[1002,95080,95081,95083,95085],{"class":1004,"line":2011},[1002,95082,33520],{"class":1030},[1002,95084,33523],{"class":1034},[1002,95086,1143],{"class":1030},[1002,95088,95089],{"class":1004,"line":2017},[1002,95090,1922],{"class":1030},[1002,95092,95093],{"class":1004,"line":2022},[1002,95094,33564],{"class":1030},[1002,95096,95097],{"class":1004,"line":2442},[1002,95098,1502],{"class":1030},[1002,95100,95101,95103,95105,95107,95109,95111,95113,95115,95117],{"class":1004,"line":2466},[1002,95102,41555],{"class":1030},[1002,95104,5654],{"class":1015},[1002,95106,94610],{"class":1030},[1002,95108,94613],{"class":1026},[1002,95110,1031],{"class":1030},[1002,95112,94618],{"class":1034},[1002,95114,1251],{"class":1030},[1002,95116,94623],{"class":1034},[1002,95118,94626],{"class":1030},[1002,95120,95121],{"class":1004,"line":2471},[1002,95122,1517],{"class":1030},[1002,95124,95125],{"class":1004,"line":2476},[1002,95126,1051],{"emptyLinePlaceholder":1050},[1002,95128,95129,95131,95133,95135,95137],{"class":1004,"line":2481},[1002,95130,1227],{"class":1019},[1002,95132,948],{"class":1030},[1002,95134,1452],{"class":1019},[1002,95136,1023],{"class":1015},[1002,95138,62352],{"class":1030},[925,95140,95141],{},"So we are pretty much back where we started with a split application and vendors bundle. You do not really define your lazy dependencies in a configuration, Webpack automatically understands them when analyzing your code. So let us see how we would lazy load a profile page:",[925,95143,95144],{},"main.js (Using ES6 syntax)",[993,95146,95148],{"className":995,"code":95147,"language":997,"meta":998,"style":998},"import React from 'react';\nimport Feed from '.\u002FFeed.js';\n\nclass App extends React.Component {\n constructor() {\n this.state = { currentComponent: Feed };\n }\n openProfile() {\n require.ensure([], () => {\n var Profile = require('.\u002FProfile.js');\n this.setState({\n currentComponent: Profile\n });\n });\n }\n render() {\n return (\n return \u003Cdiv>{this.state.currentComponent()}\u003C\u002Fdiv>\n );\n }\n}\nReact.render(\u003CApp\u002F>, document.body);\n",[941,95149,95150,95162,95176,95180,95196,95202,95213,95217,95224,95238,95256,95266,95271,95275,95279,95283,95289,95296,95319,95323,95327,95331],{"__ignoreMap":998},[1002,95151,95152,95154,95156,95158,95160],{"class":1004,"line":1005},[1002,95153,943],{"class":1015},[1002,95155,21700],{"class":1030},[1002,95157,1068],{"class":1015},[1002,95159,15543],{"class":1034},[1002,95161,1407],{"class":1030},[1002,95163,95164,95166,95169,95171,95174],{"class":1004,"line":1012},[1002,95165,943],{"class":1015},[1002,95167,95168],{"class":1030}," Feed ",[1002,95170,1068],{"class":1015},[1002,95172,95173],{"class":1034}," '.\u002FFeed.js'",[1002,95175,1407],{"class":1030},[1002,95177,95178],{"class":1004,"line":1047},[1002,95179,1051],{"emptyLinePlaceholder":1050},[1002,95181,95182,95184,95186,95188,95190,95192,95194],{"class":1004,"line":1054},[1002,95183,2363],{"class":1015},[1002,95185,19566],{"class":1026},[1002,95187,3014],{"class":1015},[1002,95189,20112],{"class":1026},[1002,95191,948],{"class":1030},[1002,95193,20117],{"class":1026},[1002,95195,1457],{"class":1030},[1002,95197,95198,95200],{"class":1004,"line":1060},[1002,95199,2373],{"class":1015},[1002,95201,3025],{"class":1030},[1002,95203,95204,95206,95208,95210],{"class":1004,"line":1272},[1002,95205,2387],{"class":1019},[1002,95207,77969],{"class":1030},[1002,95209,2393],{"class":1015},[1002,95211,95212],{"class":1030}," { currentComponent: Feed };\n",[1002,95214,95215],{"class":1004,"line":1348},[1002,95216,1269],{"class":1030},[1002,95218,95219,95222],{"class":1004,"line":1354},[1002,95220,95221],{"class":1026}," openProfile",[1002,95223,3025],{"class":1030},[1002,95225,95226,95229,95231,95234,95236],{"class":1004,"line":1360},[1002,95227,95228],{"class":1030}," require.",[1002,95230,40007],{"class":1026},[1002,95232,95233],{"class":1030},"([], () ",[1002,95235,15497],{"class":1015},[1002,95237,1457],{"class":1030},[1002,95239,95240,95242,95245,95247,95249,95251,95254],{"class":1004,"line":1366},[1002,95241,74514],{"class":1015},[1002,95243,95244],{"class":1030}," Profile ",[1002,95246,2393],{"class":1015},[1002,95248,1027],{"class":1026},[1002,95250,1031],{"class":1030},[1002,95252,95253],{"class":1034},"'.\u002FProfile.js'",[1002,95255,1085],{"class":1030},[1002,95257,95258,95260,95262,95264],{"class":1004,"line":1946},[1002,95259,78003],{"class":1019},[1002,95261,948],{"class":1030},[1002,95263,26816],{"class":1026},[1002,95265,2756],{"class":1030},[1002,95267,95268],{"class":1004,"line":1956},[1002,95269,95270],{"class":1030}," currentComponent: Profile\n",[1002,95272,95273],{"class":1004,"line":1961},[1002,95274,47582],{"class":1030},[1002,95276,95277],{"class":1004,"line":1971},[1002,95278,8353],{"class":1030},[1002,95280,95281],{"class":1004,"line":1980},[1002,95282,1269],{"class":1030},[1002,95284,95285,95287],{"class":1004,"line":1985},[1002,95286,20201],{"class":1026},[1002,95288,3025],{"class":1030},[1002,95290,95291,95294],{"class":1004,"line":1995},[1002,95292,95293],{"class":1015}," return",[1002,95295,15692],{"class":1030},[1002,95297,95298,95301,95303,95305,95307,95310,95313,95315,95317],{"class":1004,"line":2006},[1002,95299,95300],{"class":1030}," return \u003C",[1002,95302,19650],{"class":15711},[1002,95304,24778],{"class":1030},[1002,95306,3455],{"class":1019},[1002,95308,95309],{"class":1030},".state.",[1002,95311,95312],{"class":1026},"currentComponent",[1002,95314,78858],{"class":1030},[1002,95316,19650],{"class":15711},[1002,95318,15703],{"class":1030},[1002,95320,95321],{"class":1004,"line":2011},[1002,95322,22541],{"class":1030},[1002,95324,95325],{"class":1004,"line":2017},[1002,95326,1269],{"class":1030},[1002,95328,95329],{"class":1004,"line":2022},[1002,95330,1170],{"class":1030},[1002,95332,95333,95335,95337,95339,95341],{"class":1004,"line":2442},[1002,95334,19291],{"class":1030},[1002,95336,19545],{"class":1026},[1002,95338,21269],{"class":1030},[1002,95340,22209],{"class":1019},[1002,95342,95343],{"class":1030},"\u002F>, document.body);\n",[925,95345,95346],{},"So this is just an example. You would probably hook this up to a router, but the important part is using require.ensure.",[925,95348,95349,95350],{},"What is the array on the first argument?: If you try to lazy load a chunk that depends on another lazy-loaded chunk you can set it as a dependency in the array. Just type in the path to the chunk. E.g. ",[1002,95351,95352],{},"'.\u002FFunnyButton.js'",[1579,95354,95355],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":95357},[95358,95359,95360,95361,95362,95363,95364],{"id":93860,"depth":1012,"text":93861},{"id":94029,"depth":1012,"text":94030},{"id":77,"depth":1012,"text":94221},{"id":94229,"depth":1012,"text":94230},{"id":94386,"depth":1012,"text":94387},{"id":94666,"depth":1012,"text":94667},{"id":94909,"depth":1012,"text":94910},"2015-08-25","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-deployment.jpg",{},{"title":667,"description":669},"blog\u002Freact-deployment",[16,17,140],"nmLKtZHZ7f1PK2pIxKLkLtMEelSi8P_4GUIgxG6AZDs",{"id":95373,"title":201,"author":920,"body":95374,"date":96614,"description":203,"extension":1591,"image":96615,"meta":96616,"navigation":1050,"path":202,"seo":96617,"stem":96618,"tags":96619,"__hash__":96620},"blog\u002Fblog\u002Fes6-classes.md",{"type":922,"value":95375,"toc":96603},[95376,95379,95653,95656,95889,95892,95895,95918,95922,95925,95930,95934,95937,95941,95944,96027,96033,96057,96061,96070,96152,96155,96161,96197,96207,96211,96214,96241,96245,96248,96282,96286,96289,96367,96371,96376,96600],[925,95377,95378],{},"Let's have a look at how ES5 way of doing the same thing:",[993,95380,95382],{"className":995,"code":95381,"language":997,"meta":998,"style":998},"function Vehicle(doors, wheels) {\n this.doors = doors;\n this.wheels = wheels;\n}\n\nVehicle.prototype.startEngine = function() {\n this.engineState = 'started';\n console.log('Engine started ..');\n};\n\nVehicle.prototype.stopEngine = function() {\n this.engineState = 'stopped';\n console.log('Engine stopped ..');\n};\n\nVehicle.prototype.drive = function() {\n if(this.engineState == 'started') {\n console.log('driving ..');\n } else {\n console.log('start the engine first!');\n }\n }\n}\n\nvar car = new Vehicle(2, 4);\ncar.startEngine();\n",[941,95383,95384,95401,95411,95423,95427,95431,95450,95464,95477,95481,95485,95504,95517,95530,95534,95538,95557,95573,95586,95594,95607,95611,95615,95619,95623,95645],{"__ignoreMap":998},[1002,95385,95386,95388,95390,95392,95394,95396,95399],{"class":1004,"line":1005},[1002,95387,6965],{"class":1015},[1002,95389,2987],{"class":1026},[1002,95391,1031],{"class":1030},[1002,95393,3489],{"class":2378},[1002,95395,1251],{"class":1030},[1002,95397,95398],{"class":2378},"wheels",[1002,95400,2382],{"class":1030},[1002,95402,95403,95405,95407,95409],{"class":1004,"line":1012},[1002,95404,2387],{"class":1019},[1002,95406,2403],{"class":1030},[1002,95408,2393],{"class":1015},[1002,95410,3675],{"class":1030},[1002,95412,95413,95415,95418,95420],{"class":1004,"line":1047},[1002,95414,2387],{"class":1019},[1002,95416,95417],{"class":1030},".wheels ",[1002,95419,2393],{"class":1015},[1002,95421,95422],{"class":1030}," wheels;\n",[1002,95424,95425],{"class":1004,"line":1054},[1002,95426,1170],{"class":1030},[1002,95428,95429],{"class":1004,"line":1060},[1002,95430,1051],{"emptyLinePlaceholder":1050},[1002,95432,95433,95436,95438,95440,95442,95444,95446,95448],{"class":1004,"line":1272},[1002,95434,95435],{"class":1019},"Vehicle",[1002,95437,948],{"class":1030},[1002,95439,3894],{"class":1019},[1002,95441,948],{"class":1030},[1002,95443,3264],{"class":1026},[1002,95445,1023],{"class":1015},[1002,95447,8457],{"class":1015},[1002,95449,3025],{"class":1030},[1002,95451,95452,95454,95457,95459,95462],{"class":1004,"line":1348},[1002,95453,39364],{"class":1019},[1002,95455,95456],{"class":1030},".engineState ",[1002,95458,2393],{"class":1015},[1002,95460,95461],{"class":1034}," 'started'",[1002,95463,1407],{"class":1030},[1002,95465,95466,95468,95470,95472,95475],{"class":1004,"line":1354},[1002,95467,6977],{"class":1030},[1002,95469,2886],{"class":1026},[1002,95471,1031],{"class":1030},[1002,95473,95474],{"class":1034},"'Engine started ..'",[1002,95476,1085],{"class":1030},[1002,95478,95479],{"class":1004,"line":1360},[1002,95480,1517],{"class":1030},[1002,95482,95483],{"class":1004,"line":1366},[1002,95484,1051],{"emptyLinePlaceholder":1050},[1002,95486,95487,95489,95491,95493,95495,95498,95500,95502],{"class":1004,"line":1946},[1002,95488,95435],{"class":1019},[1002,95490,948],{"class":1030},[1002,95492,3894],{"class":1019},[1002,95494,948],{"class":1030},[1002,95496,95497],{"class":1026},"stopEngine",[1002,95499,1023],{"class":1015},[1002,95501,8457],{"class":1015},[1002,95503,3025],{"class":1030},[1002,95505,95506,95508,95510,95512,95515],{"class":1004,"line":1956},[1002,95507,39364],{"class":1019},[1002,95509,95456],{"class":1030},[1002,95511,2393],{"class":1015},[1002,95513,95514],{"class":1034}," 'stopped'",[1002,95516,1407],{"class":1030},[1002,95518,95519,95521,95523,95525,95528],{"class":1004,"line":1961},[1002,95520,6977],{"class":1030},[1002,95522,2886],{"class":1026},[1002,95524,1031],{"class":1030},[1002,95526,95527],{"class":1034},"'Engine stopped ..'",[1002,95529,1085],{"class":1030},[1002,95531,95532],{"class":1004,"line":1971},[1002,95533,1517],{"class":1030},[1002,95535,95536],{"class":1004,"line":1980},[1002,95537,1051],{"emptyLinePlaceholder":1050},[1002,95539,95540,95542,95544,95546,95548,95551,95553,95555],{"class":1004,"line":1985},[1002,95541,95435],{"class":1019},[1002,95543,948],{"class":1030},[1002,95545,3894],{"class":1019},[1002,95547,948],{"class":1030},[1002,95549,95550],{"class":1026},"drive",[1002,95552,1023],{"class":1015},[1002,95554,8457],{"class":1015},[1002,95556,3025],{"class":1030},[1002,95558,95559,95561,95563,95565,95567,95569,95571],{"class":1004,"line":1995},[1002,95560,8328],{"class":1015},[1002,95562,1031],{"class":1030},[1002,95564,3455],{"class":1019},[1002,95566,95456],{"class":1030},[1002,95568,87480],{"class":1015},[1002,95570,95461],{"class":1034},[1002,95572,2382],{"class":1030},[1002,95574,95575,95577,95579,95581,95584],{"class":1004,"line":2006},[1002,95576,14508],{"class":1030},[1002,95578,2886],{"class":1026},[1002,95580,1031],{"class":1030},[1002,95582,95583],{"class":1034},"'driving ..'",[1002,95585,1085],{"class":1030},[1002,95587,95588,95590,95592],{"class":1004,"line":2011},[1002,95589,17696],{"class":1030},[1002,95591,6060],{"class":1015},[1002,95593,1457],{"class":1030},[1002,95595,95596,95598,95600,95602,95605],{"class":1004,"line":2017},[1002,95597,14508],{"class":1030},[1002,95599,2886],{"class":1026},[1002,95601,1031],{"class":1030},[1002,95603,95604],{"class":1034},"'start the engine first!'",[1002,95606,1085],{"class":1030},[1002,95608,95609],{"class":1004,"line":2022},[1002,95610,1351],{"class":1030},[1002,95612,95613],{"class":1004,"line":2442},[1002,95614,2014],{"class":1030},[1002,95616,95617],{"class":1004,"line":2466},[1002,95618,1170],{"class":1030},[1002,95620,95621],{"class":1004,"line":2471},[1002,95622,1051],{"emptyLinePlaceholder":1050},[1002,95624,95625,95627,95629,95631,95633,95635,95637,95639,95641,95643],{"class":1004,"line":2476},[1002,95626,18311],{"class":1015},[1002,95628,51296],{"class":1030},[1002,95630,2393],{"class":1015},[1002,95632,2690],{"class":1015},[1002,95634,2987],{"class":1026},[1002,95636,1031],{"class":1030},[1002,95638,5681],{"class":1019},[1002,95640,1251],{"class":1030},[1002,95642,3837],{"class":1019},[1002,95644,1085],{"class":1030},[1002,95646,95647,95649,95651],{"class":1004,"line":2481},[1002,95648,3261],{"class":1030},[1002,95650,3264],{"class":1026},[1002,95652,1428],{"class":1030},[925,95654,95655],{},"Now let's look at the ES6 implementation:",[993,95657,95659],{"className":995,"code":95658,"language":997,"meta":998,"style":998},"class Vehicle {\n constructor(doors, wheels) {\n this.doors = doors;\n this.wheels = wheels;\n }\n\n startEngine() {\n this.engineState = 'started';\n console.log('Engine started ..');\n }\n\n stopEngine() {\n this.engineState = 'stopped';\n console.log('Engine stopped ..');\n }\n\n drive() {\n if (this.engineState == 'started') {\n console.log('driving ..');\n } else {\n console.log('start the engine first!');\n }\n }\n}\n\nvar car = new Vehicle(2, 4);\ncar.startEngine();\n",[941,95660,95661,95669,95683,95693,95703,95707,95711,95717,95729,95741,95745,95749,95756,95768,95780,95784,95788,95795,95811,95823,95831,95843,95847,95851,95855,95859,95881],{"__ignoreMap":998},[1002,95662,95663,95665,95667],{"class":1004,"line":1005},[1002,95664,2363],{"class":1015},[1002,95666,2987],{"class":1026},[1002,95668,1457],{"class":1030},[1002,95670,95671,95673,95675,95677,95679,95681],{"class":1004,"line":1012},[1002,95672,2373],{"class":1015},[1002,95674,1031],{"class":1030},[1002,95676,3489],{"class":2378},[1002,95678,1251],{"class":1030},[1002,95680,95398],{"class":2378},[1002,95682,2382],{"class":1030},[1002,95684,95685,95687,95689,95691],{"class":1004,"line":1047},[1002,95686,2387],{"class":1019},[1002,95688,2403],{"class":1030},[1002,95690,2393],{"class":1015},[1002,95692,3675],{"class":1030},[1002,95694,95695,95697,95699,95701],{"class":1004,"line":1054},[1002,95696,2387],{"class":1019},[1002,95698,95417],{"class":1030},[1002,95700,2393],{"class":1015},[1002,95702,95422],{"class":1030},[1002,95704,95705],{"class":1004,"line":1060},[1002,95706,1269],{"class":1030},[1002,95708,95709],{"class":1004,"line":1272},[1002,95710,1051],{"emptyLinePlaceholder":1050},[1002,95712,95713,95715],{"class":1004,"line":1348},[1002,95714,2994],{"class":1026},[1002,95716,3025],{"class":1030},[1002,95718,95719,95721,95723,95725,95727],{"class":1004,"line":1354},[1002,95720,2387],{"class":1019},[1002,95722,95456],{"class":1030},[1002,95724,2393],{"class":1015},[1002,95726,95461],{"class":1034},[1002,95728,1407],{"class":1030},[1002,95730,95731,95733,95735,95737,95739],{"class":1004,"line":1360},[1002,95732,3030],{"class":1030},[1002,95734,2886],{"class":1026},[1002,95736,1031],{"class":1030},[1002,95738,95474],{"class":1034},[1002,95740,1085],{"class":1030},[1002,95742,95743],{"class":1004,"line":1366},[1002,95744,1269],{"class":1030},[1002,95746,95747],{"class":1004,"line":1946},[1002,95748,1051],{"emptyLinePlaceholder":1050},[1002,95750,95751,95754],{"class":1004,"line":1956},[1002,95752,95753],{"class":1026}," stopEngine",[1002,95755,3025],{"class":1030},[1002,95757,95758,95760,95762,95764,95766],{"class":1004,"line":1961},[1002,95759,2387],{"class":1019},[1002,95761,95456],{"class":1030},[1002,95763,2393],{"class":1015},[1002,95765,95514],{"class":1034},[1002,95767,1407],{"class":1030},[1002,95769,95770,95772,95774,95776,95778],{"class":1004,"line":1971},[1002,95771,3030],{"class":1030},[1002,95773,2886],{"class":1026},[1002,95775,1031],{"class":1030},[1002,95777,95527],{"class":1034},[1002,95779,1085],{"class":1030},[1002,95781,95782],{"class":1004,"line":1980},[1002,95783,1269],{"class":1030},[1002,95785,95786],{"class":1004,"line":1985},[1002,95787,1051],{"emptyLinePlaceholder":1050},[1002,95789,95790,95793],{"class":1004,"line":1995},[1002,95791,95792],{"class":1026}," drive",[1002,95794,3025],{"class":1030},[1002,95796,95797,95799,95801,95803,95805,95807,95809],{"class":1004,"line":2006},[1002,95798,4368],{"class":1015},[1002,95800,6513],{"class":1030},[1002,95802,3455],{"class":1019},[1002,95804,95456],{"class":1030},[1002,95806,87480],{"class":1015},[1002,95808,95461],{"class":1034},[1002,95810,2382],{"class":1030},[1002,95812,95813,95815,95817,95819,95821],{"class":1004,"line":2011},[1002,95814,17336],{"class":1030},[1002,95816,2886],{"class":1026},[1002,95818,1031],{"class":1030},[1002,95820,95583],{"class":1034},[1002,95822,1085],{"class":1030},[1002,95824,95825,95827,95829],{"class":1004,"line":2017},[1002,95826,6057],{"class":1030},[1002,95828,6060],{"class":1015},[1002,95830,1457],{"class":1030},[1002,95832,95833,95835,95837,95839,95841],{"class":1004,"line":2022},[1002,95834,17336],{"class":1030},[1002,95836,2886],{"class":1026},[1002,95838,1031],{"class":1030},[1002,95840,95604],{"class":1034},[1002,95842,1085],{"class":1030},[1002,95844,95845],{"class":1004,"line":2442},[1002,95846,2014],{"class":1030},[1002,95848,95849],{"class":1004,"line":2466},[1002,95850,1269],{"class":1030},[1002,95852,95853],{"class":1004,"line":2471},[1002,95854,1170],{"class":1030},[1002,95856,95857],{"class":1004,"line":2476},[1002,95858,1051],{"emptyLinePlaceholder":1050},[1002,95860,95861,95863,95865,95867,95869,95871,95873,95875,95877,95879],{"class":1004,"line":2481},[1002,95862,18311],{"class":1015},[1002,95864,51296],{"class":1030},[1002,95866,2393],{"class":1015},[1002,95868,2690],{"class":1015},[1002,95870,2987],{"class":1026},[1002,95872,1031],{"class":1030},[1002,95874,5681],{"class":1019},[1002,95876,1251],{"class":1030},[1002,95878,3837],{"class":1019},[1002,95880,1085],{"class":1030},[1002,95882,95883,95885,95887],{"class":1004,"line":2491},[1002,95884,3261],{"class":1030},[1002,95886,3264],{"class":1026},[1002,95888,1428],{"class":1030},[925,95890,95891],{},"You can probably notice the differences between the two. We instantiate our classes the same way we would if we were building our code from an ES5 perspective, but there are a few subtle differences.",[925,95893,95894],{},"ES6 classes provide these benefits:",[1530,95896,95897,95900,95903,95906,95909,95912,95915],{},[974,95898,95899],{},"They are backwards compatible with much of the current code.",[974,95901,95902],{},"Classes make it easier for beginners to get started.",[974,95904,95905],{},"Subclassing is supported within the language.",[974,95907,95908],{},"Built-in constructors are subclassable.",[974,95910,95911],{},"No library for inheritance is needed, anymore; code will become more portable between frameworks.",[974,95913,95914],{},"They provide a foundation for advanced features in the future (mixins and more).",[974,95916,95917],{},"They help tools that statically analyze code (IDEs, type checkers, style checkers, etc.).",[953,95919,95921],{"id":95920},"readability","Readability",[925,95923,95924],{},"You don’t realise how messy Javascript is until you work on a large-scale project comprised of more than two developers, ES6 classes come with all of the benefits of pre-existing prototypical inheritance, but require less typing and they make your code easier to understand and resemble closely an object-oriented programming language like Java and its approach to classes.",[7100,95926,95927],{"type":24048},[925,95928,95929],{},"There are plans to introduce object-oriented syntax like; static, public, private in ES7, but we’ll wait and see if they make the cut.",[953,95931,95933],{"id":95932},"better-ide-support","Better IDE Support",[925,95935,95936],{},"When coupled with a strong IDE and tooling, ES6 classes can be powerful in that they can be analysed by the IDE and we are given more options for tracing methods (especially when extending parent classes). Webstorm supports classes quite well when used with ES6.",[953,95938,95940],{"id":95939},"base-classes","Base Classes",[925,95942,95943],{},"The class definition of ES6 looks like this:",[993,95945,95947],{"className":995,"code":95946,"language":997,"meta":998,"style":998},"class Base {\n constructor(x, y) {\n this.x = a;\n thisy = y;\n }\n sum() {\n return this.x + this.y;\n }\n}\n",[941,95948,95949,95958,95972,95984,95993,95997,96004,96019,96023],{"__ignoreMap":998},[1002,95950,95951,95953,95956],{"class":1004,"line":1005},[1002,95952,2363],{"class":1015},[1002,95954,95955],{"class":1026}," Base",[1002,95957,1457],{"class":1030},[1002,95959,95960,95962,95964,95966,95968,95970],{"class":1004,"line":1012},[1002,95961,2373],{"class":1015},[1002,95963,1031],{"class":1030},[1002,95965,77056],{"class":2378},[1002,95967,1251],{"class":1030},[1002,95969,50723],{"class":2378},[1002,95971,2382],{"class":1030},[1002,95973,95974,95976,95979,95981],{"class":1004,"line":1047},[1002,95975,2387],{"class":1019},[1002,95977,95978],{"class":1030},".x ",[1002,95980,2393],{"class":1015},[1002,95982,95983],{"class":1030}," a;\n",[1002,95985,95986,95989,95991],{"class":1004,"line":1054},[1002,95987,95988],{"class":1030}," thisy ",[1002,95990,2393],{"class":1015},[1002,95992,77074],{"class":1030},[1002,95994,95995],{"class":1004,"line":1060},[1002,95996,1269],{"class":1030},[1002,95998,95999,96002],{"class":1004,"line":1272},[1002,96000,96001],{"class":1026}," sum",[1002,96003,3025],{"class":1030},[1002,96005,96006,96008,96010,96012,96014,96016],{"class":1004,"line":1348},[1002,96007,2687],{"class":1015},[1002,96009,2693],{"class":1019},[1002,96011,95978],{"class":1030},[1002,96013,5064],{"class":1015},[1002,96015,2693],{"class":1019},[1002,96017,96018],{"class":1030},".y;\n",[1002,96020,96021],{"class":1004,"line":1354},[1002,96022,1269],{"class":1030},[1002,96024,96025],{"class":1004,"line":1360},[1002,96026,1170],{"class":1030},[925,96028,96029,96030,96032],{},"You can only invoke a class via ",[941,96031,5654],{},", not via a function call.",[993,96034,96036],{"className":995,"code":96035,"language":997,"meta":998,"style":998},"typeof Base; \u002F\u002F 'function'\nBase(); \u002F\u002F TypeError: Classes can’t be function-called\n",[941,96037,96038,96048],{"__ignoreMap":998},[1002,96039,96040,96042,96045],{"class":1004,"line":1005},[1002,96041,33724],{"class":1015},[1002,96043,96044],{"class":1030}," Base; ",[1002,96046,96047],{"class":1008},"\u002F\u002F 'function'\n",[1002,96049,96050,96052,96054],{"class":1004,"line":1012},[1002,96051,70815],{"class":1026},[1002,96053,6859],{"class":1030},[1002,96055,96056],{"class":1008},"\u002F\u002F TypeError: Classes can’t be function-called\n",[953,96058,96060],{"id":96059},"class-expressions","Class Expressions",[925,96062,96063,96064,2034,96067,948],{},"Just like functions, there are two ways to define a class: ",[941,96065,96066],{},"declarations",[941,96068,96069],{},"class expression",[993,96071,96073],{"className":995,"code":96072,"language":997,"meta":998,"style":998},"const Base = class Self {\n getClassName() {\n return Self.name;\n }\n};\n\nlet instance = new Base();\ninstance.getClassName(); \u002F\u002F Self\nSelf.name; \u002F\u002F ReferenceError: Self is not defined\n",[941,96074,96075,96090,96097,96104,96108,96112,96116,96131,96144],{"__ignoreMap":998},[1002,96076,96077,96079,96081,96083,96085,96088],{"class":1004,"line":1005},[1002,96078,1016],{"class":1015},[1002,96080,95955],{"class":1019},[1002,96082,1023],{"class":1015},[1002,96084,17187],{"class":1015},[1002,96086,96087],{"class":1026}," Self",[1002,96089,1457],{"class":1030},[1002,96091,96092,96095],{"class":1004,"line":1012},[1002,96093,96094],{"class":1026}," getClassName",[1002,96096,3025],{"class":1030},[1002,96098,96099,96101],{"class":1004,"line":1047},[1002,96100,2687],{"class":1015},[1002,96102,96103],{"class":1030}," Self.name;\n",[1002,96105,96106],{"class":1004,"line":1054},[1002,96107,1269],{"class":1030},[1002,96109,96110],{"class":1004,"line":1060},[1002,96111,1517],{"class":1030},[1002,96113,96114],{"class":1004,"line":1272},[1002,96115,1051],{"emptyLinePlaceholder":1050},[1002,96117,96118,96120,96123,96125,96127,96129],{"class":1004,"line":1348},[1002,96119,6516],{"class":1015},[1002,96121,96122],{"class":1030}," instance ",[1002,96124,2393],{"class":1015},[1002,96126,2690],{"class":1015},[1002,96128,95955],{"class":1026},[1002,96130,1428],{"class":1030},[1002,96132,96133,96136,96139,96141],{"class":1004,"line":1354},[1002,96134,96135],{"class":1030},"instance.",[1002,96137,96138],{"class":1026},"getClassName",[1002,96140,6859],{"class":1030},[1002,96142,96143],{"class":1008},"\u002F\u002F Self\n",[1002,96145,96146,96149],{"class":1004,"line":1360},[1002,96147,96148],{"class":1030},"Self.name; ",[1002,96150,96151],{"class":1008},"\u002F\u002F ReferenceError: Self is not defined\n",[953,96153,96154],{"id":4360},"Constructor",[925,96156,96157,96158,96160],{},"The pseudo-method ",[941,96159,4360],{}," is special, as it defines the function that represents the class:",[993,96162,96164],{"className":995,"code":96163,"language":997,"meta":998,"style":998},"Foo === Foo.prototype.constructor; \u002F\u002F true\ntypeof Foo; \u002F\u002F 'function'\n",[941,96165,96166,96188],{"__ignoreMap":998},[1002,96167,96168,96171,96173,96176,96178,96180,96182,96184,96186],{"class":1004,"line":1005},[1002,96169,96170],{"class":1030},"Foo ",[1002,96172,2892],{"class":1015},[1002,96174,96175],{"class":1019}," Foo",[1002,96177,948],{"class":1030},[1002,96179,3894],{"class":1019},[1002,96181,948],{"class":1030},[1002,96183,4360],{"class":1019},[1002,96185,17938],{"class":1030},[1002,96187,2877],{"class":1008},[1002,96189,96190,96192,96195],{"class":1004,"line":1012},[1002,96191,33724],{"class":1015},[1002,96193,96194],{"class":1030}," Foo; ",[1002,96196,96047],{"class":1008},[925,96198,96199,96200,96203,96204,948],{},"This is sometimes called ",[941,96201,96202],{},"class constructor",". It has features that normal constructor functions don’t have, mainly the ability to constructor call its superconstructor via ",[941,96205,96206],{},"super()",[953,96208,96210],{"id":96209},"static-methods","Static Methods",[925,96212,96213],{},"Static properties (or class properties) are properties of the class itself. If you prefix a method definition with static, you create a class method:",[993,96215,96217],{"className":995,"code":96216,"language":997,"meta":998,"style":998},"typeof Foo.staticMethod; \u002F\u002F 'function'\nFoo.staticMethod(); \u002F\u002F'classy'\n",[941,96218,96219,96228],{"__ignoreMap":998},[1002,96220,96221,96223,96226],{"class":1004,"line":1005},[1002,96222,33724],{"class":1015},[1002,96224,96225],{"class":1030}," Foo.staticMethod; ",[1002,96227,96047],{"class":1008},[1002,96229,96230,96233,96236,96238],{"class":1004,"line":1012},[1002,96231,96232],{"class":1030},"Foo.",[1002,96234,96235],{"class":1026},"staticMethod",[1002,96237,6859],{"class":1030},[1002,96239,96240],{"class":1008},"\u002F\u002F'classy'\n",[953,96242,96244],{"id":96243},"prototype-methods","Prototype Methods",[925,96246,96247],{},"The prototype properties of Foo are the properties of Foo.prototype. They are usually methods and inherited by instances of Foo.",[993,96249,96251],{"className":995,"code":96250,"language":997,"meta":998,"style":998},"typeof Foo.prototype.prototypeMethod; \u002F\u002F'function'\nfoo.prototypeMethod(); \u002F\u002F 'prototypical'\n",[941,96252,96253,96269],{"__ignoreMap":998},[1002,96254,96255,96257,96259,96261,96263,96266],{"class":1004,"line":1005},[1002,96256,33724],{"class":1015},[1002,96258,96175],{"class":1019},[1002,96260,948],{"class":1030},[1002,96262,3894],{"class":1019},[1002,96264,96265],{"class":1030},".prototypeMethod; ",[1002,96267,96268],{"class":1008},"\u002F\u002F'function'\n",[1002,96270,96271,96274,96277,96279],{"class":1004,"line":1012},[1002,96272,96273],{"class":1030},"foo.",[1002,96275,96276],{"class":1026},"prototypeMethod",[1002,96278,6859],{"class":1030},[1002,96280,96281],{"class":1008},"\u002F\u002F 'prototypical'\n",[953,96283,96285],{"id":96284},"getters-and-setters","Getters and Setters",[925,96287,96288],{},"The syntax for getters and setters is just like in ES5 object literals:",[993,96290,96292],{"className":995,"code":96291,"language":997,"meta":998,"style":998},"class Bar {\n get foo() {\n return 'foo';\n }\n set foo(value) {\n value;\n }\n}\n\nvar bar = new Bar();\n",[941,96293,96294,96303,96311,96319,96323,96336,96341,96345,96349,96353],{"__ignoreMap":998},[1002,96295,96296,96298,96301],{"class":1004,"line":1005},[1002,96297,2363],{"class":1015},[1002,96299,96300],{"class":1026}," Bar",[1002,96302,1457],{"class":1030},[1002,96304,96305,96307,96309],{"class":1004,"line":1012},[1002,96306,7887],{"class":1015},[1002,96308,34640],{"class":1026},[1002,96310,3025],{"class":1030},[1002,96312,96313,96315,96317],{"class":1004,"line":1047},[1002,96314,2687],{"class":1015},[1002,96316,87067],{"class":1034},[1002,96318,1407],{"class":1030},[1002,96320,96321],{"class":1004,"line":1054},[1002,96322,1269],{"class":1030},[1002,96324,96325,96328,96330,96332,96334],{"class":1004,"line":1060},[1002,96326,96327],{"class":1015}," set",[1002,96329,34640],{"class":1026},[1002,96331,1031],{"class":1030},[1002,96333,5047],{"class":2378},[1002,96335,2382],{"class":1030},[1002,96337,96338],{"class":1004,"line":1272},[1002,96339,96340],{"class":1030}," value;\n",[1002,96342,96343],{"class":1004,"line":1348},[1002,96344,1269],{"class":1030},[1002,96346,96347],{"class":1004,"line":1354},[1002,96348,1170],{"class":1030},[1002,96350,96351],{"class":1004,"line":1360},[1002,96352,1051],{"emptyLinePlaceholder":1050},[1002,96354,96355,96357,96359,96361,96363,96365],{"class":1004,"line":1366},[1002,96356,18311],{"class":1015},[1002,96358,38350],{"class":1030},[1002,96360,2393],{"class":1015},[1002,96362,2690],{"class":1015},[1002,96364,96300],{"class":1026},[1002,96366,1428],{"class":1030},[953,96368,96370],{"id":96369},"subclassing","Subclassing",[925,96372,3898,96373,96375],{},[941,96374,42292],{}," clause lets you create a subclass of an existing constructor (which may or may not have been defined via a class):",[993,96377,96379],{"className":995,"code":96378,"language":997,"meta":998,"style":998},"class Base {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n\n sum() {\n return this.x + this.y;\n }\n}\n\nclass Child extends Base {\n constructor(x, y, z) {\n super(x, y);\n this.z = z;\n }\n\n sum() {\n return super.x + super.y + this.z;\n }\n}\n\nvar child = new Child(15, 8, 3);\nchild.sum();\n",[941,96380,96381,96389,96403,96414,96425,96429,96433,96439,96453,96457,96461,96465,96478,96497,96504,96516,96520,96524,96530,96552,96556,96560,96564,96591],{"__ignoreMap":998},[1002,96382,96383,96385,96387],{"class":1004,"line":1005},[1002,96384,2363],{"class":1015},[1002,96386,95955],{"class":1026},[1002,96388,1457],{"class":1030},[1002,96390,96391,96393,96395,96397,96399,96401],{"class":1004,"line":1012},[1002,96392,2373],{"class":1015},[1002,96394,1031],{"class":1030},[1002,96396,77056],{"class":2378},[1002,96398,1251],{"class":1030},[1002,96400,50723],{"class":2378},[1002,96402,2382],{"class":1030},[1002,96404,96405,96407,96409,96411],{"class":1004,"line":1047},[1002,96406,2387],{"class":1019},[1002,96408,95978],{"class":1030},[1002,96410,2393],{"class":1015},[1002,96412,96413],{"class":1030}," x;\n",[1002,96415,96416,96418,96421,96423],{"class":1004,"line":1054},[1002,96417,2387],{"class":1019},[1002,96419,96420],{"class":1030},".y ",[1002,96422,2393],{"class":1015},[1002,96424,77074],{"class":1030},[1002,96426,96427],{"class":1004,"line":1060},[1002,96428,1269],{"class":1030},[1002,96430,96431],{"class":1004,"line":1272},[1002,96432,1051],{"emptyLinePlaceholder":1050},[1002,96434,96435,96437],{"class":1004,"line":1348},[1002,96436,96001],{"class":1026},[1002,96438,3025],{"class":1030},[1002,96440,96441,96443,96445,96447,96449,96451],{"class":1004,"line":1354},[1002,96442,2687],{"class":1015},[1002,96444,2693],{"class":1019},[1002,96446,95978],{"class":1030},[1002,96448,5064],{"class":1015},[1002,96450,2693],{"class":1019},[1002,96452,96018],{"class":1030},[1002,96454,96455],{"class":1004,"line":1360},[1002,96456,1269],{"class":1030},[1002,96458,96459],{"class":1004,"line":1366},[1002,96460,1170],{"class":1030},[1002,96462,96463],{"class":1004,"line":1946},[1002,96464,1051],{"emptyLinePlaceholder":1050},[1002,96466,96467,96469,96472,96474,96476],{"class":1004,"line":1956},[1002,96468,2363],{"class":1015},[1002,96470,96471],{"class":1026}," Child",[1002,96473,3014],{"class":1015},[1002,96475,95955],{"class":1026},[1002,96477,1457],{"class":1030},[1002,96479,96480,96482,96484,96486,96488,96490,96492,96495],{"class":1004,"line":1961},[1002,96481,2373],{"class":1015},[1002,96483,1031],{"class":1030},[1002,96485,77056],{"class":2378},[1002,96487,1251],{"class":1030},[1002,96489,50723],{"class":2378},[1002,96491,1251],{"class":1030},[1002,96493,96494],{"class":2378},"z",[1002,96496,2382],{"class":1030},[1002,96498,96499,96501],{"class":1004,"line":1971},[1002,96500,9725],{"class":1019},[1002,96502,96503],{"class":1030},"(x, y);\n",[1002,96505,96506,96508,96511,96513],{"class":1004,"line":1980},[1002,96507,2387],{"class":1019},[1002,96509,96510],{"class":1030},".z ",[1002,96512,2393],{"class":1015},[1002,96514,96515],{"class":1030}," z;\n",[1002,96517,96518],{"class":1004,"line":1985},[1002,96519,1269],{"class":1030},[1002,96521,96522],{"class":1004,"line":1995},[1002,96523,1051],{"emptyLinePlaceholder":1050},[1002,96525,96526,96528],{"class":1004,"line":2006},[1002,96527,96001],{"class":1026},[1002,96529,3025],{"class":1030},[1002,96531,96532,96534,96537,96539,96541,96543,96545,96547,96549],{"class":1004,"line":2011},[1002,96533,2687],{"class":1015},[1002,96535,96536],{"class":1019}," super",[1002,96538,95978],{"class":1030},[1002,96540,5064],{"class":1015},[1002,96542,96536],{"class":1019},[1002,96544,96420],{"class":1030},[1002,96546,5064],{"class":1015},[1002,96548,2693],{"class":1019},[1002,96550,96551],{"class":1030},".z;\n",[1002,96553,96554],{"class":1004,"line":2017},[1002,96555,1269],{"class":1030},[1002,96557,96558],{"class":1004,"line":2022},[1002,96559,1170],{"class":1030},[1002,96561,96562],{"class":1004,"line":2442},[1002,96563,1051],{"emptyLinePlaceholder":1050},[1002,96565,96566,96568,96571,96573,96575,96577,96579,96581,96583,96585,96587,96589],{"class":1004,"line":2466},[1002,96567,18311],{"class":1015},[1002,96569,96570],{"class":1030}," child ",[1002,96572,2393],{"class":1015},[1002,96574,2690],{"class":1015},[1002,96576,96471],{"class":1026},[1002,96578,1031],{"class":1030},[1002,96580,31465],{"class":1019},[1002,96582,1251],{"class":1030},[1002,96584,31435],{"class":1019},[1002,96586,1251],{"class":1030},[1002,96588,2796],{"class":1019},[1002,96590,1085],{"class":1030},[1002,96592,96593,96596,96598],{"class":1004,"line":2471},[1002,96594,96595],{"class":1030},"child.",[1002,96597,77047],{"class":1026},[1002,96599,1428],{"class":1030},[1579,96601,96602],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":96604},[96605,96606,96607,96608,96609,96610,96611,96612,96613],{"id":95920,"depth":1012,"text":95921},{"id":95932,"depth":1012,"text":95933},{"id":95939,"depth":1012,"text":95940},{"id":96059,"depth":1012,"text":96060},{"id":4360,"depth":1012,"text":96154},{"id":96209,"depth":1012,"text":96210},{"id":96243,"depth":1012,"text":96244},{"id":96284,"depth":1012,"text":96285},{"id":96369,"depth":1012,"text":96370},"2015-08-24","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-classes.jpg",{},{"title":201,"description":203},"blog\u002Fes6-classes",[16,17],"uztXeAkgjmw01z_N-83CnZpEGGVfIdUtGQAxaDUkqZc",{"id":96622,"title":662,"author":920,"body":96623,"date":97388,"description":664,"extension":1591,"image":97389,"meta":97390,"navigation":1050,"path":663,"seo":97391,"stem":97392,"tags":97393,"__hash__":97394},"blog\u002Fblog\u002Freact-css.md",{"type":922,"value":96624,"toc":97375},[96625,96628,96648,96650,96653,96745,96754,96761,96765,96771,96830,96839,96848,96869,96876,96879,96882,96890,96938,96942,96955,96958,96961,96977,97004,97007,97010,97041,97063,97067,97077,97107,97134,97137,97172,97175,97182,97185,97228,97269,97310,97313,97316,97340,97369,97372],[925,96626,96627],{},"We are discussing the following topics:",[1530,96629,96630,96632,96634,96637,96639,96642,96645],{},[974,96631,43953],{},[974,96633,91195],{},[974,96635,96636],{},"Dependencies",[974,96638,91195],{},[974,96640,96641],{},"Sharing Constants",[974,96643,96644],{},"Isolation",[974,96646,96647],{},"Non-deterministic Resolution",[953,96649,43953],{"id":43952},[925,96651,96652],{},"Let's start by building a button. In our CSS file, let's create two classes for our buttons.",[993,96654,96656],{"className":35707,"code":96655,"language":29,"meta":998,"style":998},".btn {\n background: #0000ff;\n border: 1px solid #000;\n border-radius: 2px;\n}\n\n.btn-depressed {\n background: #00ffff;\n color: #0000ff;\n}\n",[941,96657,96658,96665,96676,96693,96705,96709,96713,96720,96731,96741],{"__ignoreMap":998},[1002,96659,96660,96663],{"class":1004,"line":1005},[1002,96661,96662],{"class":1026},".btn",[1002,96664,1457],{"class":1030},[1002,96666,96667,96670,96672,96674],{"class":1004,"line":1012},[1002,96668,96669],{"class":1019}," background",[1002,96671,1137],{"class":1030},[1002,96673,35879],{"class":1019},[1002,96675,1407],{"class":1030},[1002,96677,96678,96680,96682,96684,96686,96688,96691],{"class":1004,"line":1047},[1002,96679,71181],{"class":1019},[1002,96681,1137],{"class":1030},[1002,96683,6211],{"class":1019},[1002,96685,43835],{"class":1015},[1002,96687,43838],{"class":1019},[1002,96689,96690],{"class":1019}," #000",[1002,96692,1407],{"class":1030},[1002,96694,96695,96697,96699,96701,96703],{"class":1004,"line":1054},[1002,96696,72528],{"class":1019},[1002,96698,1137],{"class":1030},[1002,96700,5681],{"class":1019},[1002,96702,43835],{"class":1015},[1002,96704,1407],{"class":1030},[1002,96706,96707],{"class":1004,"line":1060},[1002,96708,1170],{"class":1030},[1002,96710,96711],{"class":1004,"line":1272},[1002,96712,1051],{"emptyLinePlaceholder":1050},[1002,96714,96715,96718],{"class":1004,"line":1348},[1002,96716,96717],{"class":1026},".btn-depressed",[1002,96719,1457],{"class":1030},[1002,96721,96722,96724,96726,96729],{"class":1004,"line":1354},[1002,96723,96669],{"class":1019},[1002,96725,1137],{"class":1030},[1002,96727,96728],{"class":1019},"#00ffff",[1002,96730,1407],{"class":1030},[1002,96732,96733,96735,96737,96739],{"class":1004,"line":1360},[1002,96734,35952],{"class":1019},[1002,96736,1137],{"class":1030},[1002,96738,35879],{"class":1019},[1002,96740,1407],{"class":1030},[1002,96742,96743],{"class":1004,"line":1366},[1002,96744,1170],{"class":1030},[925,96746,96747,96748,2034,96750,96753],{},"By adding ",[941,96749,96662],{},[941,96751,96752],{},"btn-depressed"," to our CSS file, we have introduced glbal vaiables!",[925,96755,96756,96757,96760],{},"CSS is lacking in this regard, that the best practice is to use ",[941,96758,96759],{},"global variables",", when in languages like JavaScript, the best practice is to strictly avoid globals.",[1655,96762,96764],{"id":96763},"css-extension","CSS Extension",[925,96766,96767,96768,96770],{},"At ",[941,96769,82728],{},", they extended CSS by introducing a new syntax:",[993,96772,96774],{"className":35707,"code":96773,"language":29,"meta":998,"style":998},"\u002F* btn.css *\u002F\n.btn\u002Fcontainer {\n background: #0000ff;\n border: 1px solid #000;\n border-radius: 2px;\n}\n",[941,96775,96776,96781,96788,96798,96814,96826],{"__ignoreMap":998},[1002,96777,96778],{"class":1004,"line":1005},[1002,96779,96780],{"class":1008},"\u002F* btn.css *\u002F\n",[1002,96782,96783,96786],{"class":1004,"line":1012},[1002,96784,96785],{"class":18541},".btn\u002Fcontainer",[1002,96787,1457],{"class":1030},[1002,96789,96790,96792,96794,96796],{"class":1004,"line":1047},[1002,96791,96669],{"class":1019},[1002,96793,1137],{"class":1030},[1002,96795,35879],{"class":1019},[1002,96797,1407],{"class":1030},[1002,96799,96800,96802,96804,96806,96808,96810,96812],{"class":1004,"line":1054},[1002,96801,71181],{"class":1019},[1002,96803,1137],{"class":1030},[1002,96805,6211],{"class":1019},[1002,96807,43835],{"class":1015},[1002,96809,43838],{"class":1019},[1002,96811,96690],{"class":1019},[1002,96813,1407],{"class":1030},[1002,96815,96816,96818,96820,96822,96824],{"class":1004,"line":1060},[1002,96817,72528],{"class":1019},[1002,96819,1137],{"class":1030},[1002,96821,5681],{"class":1019},[1002,96823,43835],{"class":1015},[1002,96825,1407],{"class":1030},[1002,96827,96828],{"class":1004,"line":1272},[1002,96829,1170],{"class":1030},[925,96831,96747,96832,96834,96835,96838],{},[941,96833,4685],{},", it is now going to be a ",[941,96836,96837],{},"local"," variable",[925,96840,96841,96842,96844,96845,948],{},"That means the ",[941,96843,96785],{}," can only be used in the file called ",[941,96846,96847],{},"btn.css",[7100,96849,96851,96863],{"title":96850,"type":24048},"Global Variables",[925,96852,96853,96854,96857,96858,96861],{},"If you want a global variable, you can append ",[941,96855,96856],{},"\u002Fpublic"," in front of the class name.",[96859,96860],"br",{},[96859,96862],{},[993,96864,96867],{"className":96865,"code":96866,"language":24241},[24239],".btn\u002Fcontainer\u002Fpublic {\n background: #0000FF;\n border: 1px solid #000;\n border-radius: 2px;\n}\n",[941,96868,96866],{"__ignoreMap":998},[925,96870,96871,96872,96875],{},"The call-site will be changed by a new function called ",[941,96873,96874],{},"cx"," (class extension).",[953,96877,96636],{"id":96878},"dependencies",[925,96880,96881],{},"At this point having split our CSS into many files, we will have to manage the dependencies between those files.",[925,96883,32004,96884,96886,96887,30598],{},[941,96885,96874],{}," to automatically inject ",[941,96888,96889],{},"requireCSS",[993,96891,96893],{"className":995,"code":96892,"language":997,"meta":998,"style":998},"\u002F* btn.js *\u002F\nreqireCSS('btn');\n\n\u003Cdiv className={cx('btn\u002Fcontainer')}>\n",[941,96894,96895,96900,96912,96916],{"__ignoreMap":998},[1002,96896,96897],{"class":1004,"line":1005},[1002,96898,96899],{"class":1008},"\u002F* btn.js *\u002F\n",[1002,96901,96902,96905,96907,96910],{"class":1004,"line":1012},[1002,96903,96904],{"class":1026},"reqireCSS",[1002,96906,1031],{"class":1030},[1002,96908,96909],{"class":1034},"'btn'",[1002,96911,1085],{"class":1030},[1002,96913,96914],{"class":1004,"line":1047},[1002,96915,1051],{"emptyLinePlaceholder":1050},[1002,96917,96918,96920,96922,96924,96926,96928,96930,96932,96935],{"class":1004,"line":1054},[1002,96919,6539],{"class":1030},[1002,96921,19650],{"class":15711},[1002,96923,26915],{"class":1026},[1002,96925,2393],{"class":1015},[1002,96927,22192],{"class":1030},[1002,96929,96874],{"class":1026},[1002,96931,1031],{"class":1030},[1002,96933,96934],{"class":1034},"'btn\u002Fcontainer'",[1002,96936,96937],{"class":1030},")}>\n",[953,96939,96941],{"id":96940},"dead-code-elimination","Dead Code Elimination",[925,96943,96944,96945,96947,96948,96950,96951,96954],{},"Since ",[941,96946,96874],{}," is the only way to generate the name, we can also solve the dead code issue.\nIn your CSS, if you have a rule ",[941,96949,96785],{},", then search for ",[941,96952,96953],{},"btn\u002Fcontainer"," in your codebase and you'll find the call-sites. If there is none left, you can kill it!",[953,96956,91195],{"id":96957},"minification",[925,96959,96960],{},"We can minify all the class names and send both JS and CSS a bit faster to users.",[993,96962,96964],{"className":35707,"code":96963,"language":29,"meta":998,"style":998},"\u002F* btn.css *\u002F\n._f8z {\n",[941,96965,96966,96970],{"__ignoreMap":998},[1002,96967,96968],{"class":1004,"line":1005},[1002,96969,96780],{"class":1008},[1002,96971,96972,96975],{"class":1004,"line":1012},[1002,96973,96974],{"class":1026},"._f8z",[1002,96976,1457],{"class":1030},[993,96978,96980],{"className":995,"code":96979,"language":997,"meta":998,"style":998},"\u002F* btn.js *\u002F\n\u003Cdiv className={'_f8z'}>\n",[941,96981,96982,96986],{"__ignoreMap":998},[1002,96983,96984],{"class":1004,"line":1005},[1002,96985,96899],{"class":1008},[1002,96987,96988,96990,96992,96994,96996,96998,97001],{"class":1004,"line":1012},[1002,96989,6539],{"class":1030},[1002,96991,19650],{"class":15711},[1002,96993,26915],{"class":1026},[1002,96995,2393],{"class":1015},[1002,96997,22192],{"class":1030},[1002,96999,97000],{"class":1034},"'_f8z'",[1002,97002,97003],{"class":1030},"}>\n",[953,97005,96641],{"id":97006},"sharing-constants",[925,97008,97009],{},"Sharing constants between CSS and JavaScript is not ideal. But unfortunately, there are many use cases where you have to do this. You could use comments in both CSS and JS files to keep things in sync. But this approach doesn't scale very well.",[993,97011,97013],{"className":35707,"code":97012,"language":29,"meta":998,"style":998},"\u002F* btn.css *\u002F\n.btn\u002Fcontainer {\n margin: 5px;\n}\n",[941,97014,97015,97019,97025,97037],{"__ignoreMap":998},[1002,97016,97017],{"class":1004,"line":1005},[1002,97018,96780],{"class":1008},[1002,97020,97021,97023],{"class":1004,"line":1012},[1002,97022,96785],{"class":18541},[1002,97024,1457],{"class":1030},[1002,97026,97027,97029,97031,97033,97035],{"class":1004,"line":1047},[1002,97028,37384],{"class":1019},[1002,97030,1137],{"class":1030},[1002,97032,2859],{"class":1019},[1002,97034,43835],{"class":1015},[1002,97036,1407],{"class":1030},[1002,97038,97039],{"class":1004,"line":1054},[1002,97040,1170],{"class":1030},[993,97042,97044],{"className":995,"code":97043,"language":997,"meta":998,"style":998},"\u002F* btn.js *\u002F\nvar buttonMargin = 5;\n",[941,97045,97046,97050],{"__ignoreMap":998},[1002,97047,97048],{"class":1004,"line":1005},[1002,97049,96899],{"class":1008},[1002,97051,97052,97054,97057,97059,97061],{"class":1004,"line":1012},[1002,97053,18311],{"class":1015},[1002,97055,97056],{"class":1030}," buttonMargin ",[1002,97058,2393],{"class":1015},[1002,97060,6190],{"class":1019},[1002,97062,1407],{"class":1030},[1655,97064,97066],{"id":97065},"css-variables","CSS Variables",[925,97068,97069,97070,97072,97073,97076],{},"To fix this, Facebook borrowed the ",[941,97071,18311],{}," syntax specification of CSS, and exposed a ",[941,97074,97075],{},"cssVar"," function to JS.",[993,97078,97080],{"className":35707,"code":97079,"language":29,"meta":998,"style":998},"\u002F* btn.css *\u002F\n.btn\u002Fcontainer {\n margin: var(button-margin);\n}\n",[941,97081,97082,97086,97092,97103],{"__ignoreMap":998},[1002,97083,97084],{"class":1004,"line":1005},[1002,97085,96780],{"class":1008},[1002,97087,97088,97090],{"class":1004,"line":1012},[1002,97089,96785],{"class":18541},[1002,97091,1457],{"class":1030},[1002,97093,97094,97096,97098,97100],{"class":1004,"line":1047},[1002,97095,37384],{"class":1019},[1002,97097,1137],{"class":1030},[1002,97099,18311],{"class":1019},[1002,97101,97102],{"class":1030},"(button-margin);\n",[1002,97104,97105],{"class":1004,"line":1054},[1002,97106,1170],{"class":1030},[993,97108,97110],{"className":995,"code":97109,"language":997,"meta":998,"style":998},"\u002F* btn.js *\u002F\nvar buttonMargin = cssVar('button-margin');\n",[941,97111,97112,97116],{"__ignoreMap":998},[1002,97113,97114],{"class":1004,"line":1005},[1002,97115,96899],{"class":1008},[1002,97117,97118,97120,97122,97124,97127,97129,97132],{"class":1004,"line":1012},[1002,97119,18311],{"class":1015},[1002,97121,97056],{"class":1030},[1002,97123,2393],{"class":1015},[1002,97125,97126],{"class":1026}," cssVar",[1002,97128,1031],{"class":1030},[1002,97130,97131],{"class":1034},"'button-margin'",[1002,97133,1085],{"class":1030},[925,97135,97136],{},"To generate those, you have to use your backend.",[993,97138,97140],{"className":35707,"code":97139,"language":29,"meta":998,"style":998},"\u002F* CSSVar.php *\u002F\n$CSSVar = array(\n 'button-margin' => 5\n);\n",[941,97141,97142,97147,97152,97168],{"__ignoreMap":998},[1002,97143,97144],{"class":1004,"line":1005},[1002,97145,97146],{"class":1008},"\u002F* CSSVar.php *\u002F\n",[1002,97148,97149],{"class":1004,"line":1012},[1002,97150,97151],{"class":1030},"$CSSVar = array(\n",[1002,97153,97154,97157,97160,97163,97165],{"class":1004,"line":1047},[1002,97155,97156],{"class":1030}," '",[1002,97158,97159],{"class":15711},"button-margin",[1002,97161,97162],{"class":1030},"' =",[1002,97164,19171],{"class":1015},[1002,97166,97167],{"class":1030}," 5\n",[1002,97169,97170],{"class":1004,"line":1054},[1002,97171,1085],{"class":1030},[953,97173,96647],{"id":97174},"non-deterministic-resolution",[925,97176,97177,97178,97181],{},"What if we need to overrule a style? in CSS ",[941,97179,97180],{},"specificity"," plays a big role in this. But if we have our CSS in different files, this becomes a nightmare when the files are bundled and they are loading asynchronously.",[925,97183,97184],{},"The most popular way to work around this issue is to increase the specificity of the rule that conflicts but this is super brittle.",[993,97186,97188],{"className":35707,"code":97187,"language":29,"meta":998,"style":998},"\u002F* overlay-btn.css *\u002F\n.overlay-btn\u002Fcontainer {\n background-color: #000;\n color: '#FFF';\n}\n",[941,97189,97190,97195,97202,97213,97224],{"__ignoreMap":998},[1002,97191,97192],{"class":1004,"line":1005},[1002,97193,97194],{"class":1008},"\u002F* overlay-btn.css *\u002F\n",[1002,97196,97197,97200],{"class":1004,"line":1012},[1002,97198,97199],{"class":18541},".overlay-btn\u002Fcontainer",[1002,97201,1457],{"class":1030},[1002,97203,97204,97206,97208,97211],{"class":1004,"line":1047},[1002,97205,35963],{"class":1019},[1002,97207,1137],{"class":1030},[1002,97209,97210],{"class":1019},"#000",[1002,97212,1407],{"class":1030},[1002,97214,97215,97217,97219,97222],{"class":1004,"line":1054},[1002,97216,35952],{"class":1019},[1002,97218,1137],{"class":1030},[1002,97220,97221],{"class":1034},"'#FFF'",[1002,97223,1407],{"class":1030},[1002,97225,97226],{"class":1004,"line":1060},[1002,97227,1170],{"class":1030},[993,97229,97231],{"className":35707,"code":97230,"language":29,"meta":998,"style":998},"\u002F* btn.css *\u002F\n.btn\u002Fcontainer {\n background-color: #fff;\n color: '#000';\n}\n",[941,97232,97233,97237,97243,97254,97265],{"__ignoreMap":998},[1002,97234,97235],{"class":1004,"line":1005},[1002,97236,96780],{"class":1008},[1002,97238,97239,97241],{"class":1004,"line":1012},[1002,97240,96785],{"class":18541},[1002,97242,1457],{"class":1030},[1002,97244,97245,97247,97249,97252],{"class":1004,"line":1047},[1002,97246,35963],{"class":1019},[1002,97248,1137],{"class":1030},[1002,97250,97251],{"class":1019},"#fff",[1002,97253,1407],{"class":1030},[1002,97255,97256,97258,97260,97263],{"class":1004,"line":1054},[1002,97257,35952],{"class":1019},[1002,97259,1137],{"class":1030},[1002,97261,97262],{"class":1034},"'#000'",[1002,97264,1407],{"class":1030},[1002,97266,97267],{"class":1004,"line":1060},[1002,97268,1170],{"class":1030},[993,97270,97272],{"className":995,"code":97271,"language":997,"meta":998,"style":998},"\u002F* btn.js *\u002F\n\u003Cdiv className={cx(\n 'btn\u002Fcontainer\u002Fpublic',\n 'overlay-btn\u002Fcontainer'\n)}\n",[941,97273,97274,97278,97294,97301,97306],{"__ignoreMap":998},[1002,97275,97276],{"class":1004,"line":1005},[1002,97277,96899],{"class":1008},[1002,97279,97280,97282,97284,97286,97288,97290,97292],{"class":1004,"line":1012},[1002,97281,6539],{"class":1030},[1002,97283,19650],{"class":15711},[1002,97285,26915],{"class":1026},[1002,97287,2393],{"class":1015},[1002,97289,22192],{"class":1030},[1002,97291,96874],{"class":1026},[1002,97293,10468],{"class":1030},[1002,97295,97296,97299],{"class":1004,"line":1047},[1002,97297,97298],{"class":1034}," 'btn\u002Fcontainer\u002Fpublic'",[1002,97300,1143],{"class":1030},[1002,97302,97303],{"class":1004,"line":1054},[1002,97304,97305],{"class":1034}," 'overlay-btn\u002Fcontainer'\n",[1002,97307,97308],{"class":1004,"line":1060},[1002,97309,29328],{"class":1030},[953,97311,96644],{"id":97312},"isolation",[925,97314,97315],{},"Designers have the ability to modify the style of the internals via selectors. The override looks like regular CSS, so it’s often not being caught by code review. It’s also nearly impossible to write lint rules against it.",[993,97317,97319],{"className":35707,"code":97318,"language":29,"meta":998,"style":998},"\u002F* btn.css *\u002F\n.btn\u002Fcontainer {\n \u002F* override everything! *\u002F\n}\n",[941,97320,97321,97325,97331,97336],{"__ignoreMap":998},[1002,97322,97323],{"class":1004,"line":1005},[1002,97324,96780],{"class":1008},[1002,97326,97327,97329],{"class":1004,"line":1012},[1002,97328,96785],{"class":18541},[1002,97330,1457],{"class":1030},[1002,97332,97333],{"class":1004,"line":1047},[1002,97334,97335],{"class":1008}," \u002F* override everything! *\u002F\n",[1002,97337,97338],{"class":1004,"line":1054},[1002,97339,1170],{"class":1030},[993,97341,97343],{"className":995,"code":97342,"language":997,"meta":998,"style":998},"\u002F* btn.js *\u002F\n\u003Cdiv className={cx('btn\u002Fcontainer')}\n",[941,97344,97345,97349],{"__ignoreMap":998},[1002,97346,97347],{"class":1004,"line":1005},[1002,97348,96899],{"class":1008},[1002,97350,97351,97353,97355,97357,97359,97361,97363,97365,97367],{"class":1004,"line":1012},[1002,97352,6539],{"class":1030},[1002,97354,19650],{"class":15711},[1002,97356,26915],{"class":1026},[1002,97358,2393],{"class":1015},[1002,97360,22192],{"class":1030},[1002,97362,96874],{"class":1026},[1002,97364,1031],{"class":1030},[1002,97366,96934],{"class":1034},[1002,97368,29328],{"class":1030},[925,97370,97371],{},"Non-deterministic Resolution and isolation is still not resolved yet.",[1579,97373,97374],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":97376},[97377,97380,97381,97382,97383,97386,97387],{"id":43952,"depth":1012,"text":43953,"children":97378},[97379],{"id":96763,"depth":1047,"text":96764},{"id":96878,"depth":1012,"text":96636},{"id":96940,"depth":1012,"text":96941},{"id":96957,"depth":1012,"text":91195},{"id":97006,"depth":1012,"text":96641,"children":97384},[97385],{"id":97065,"depth":1047,"text":97066},{"id":97174,"depth":1012,"text":96647},{"id":97312,"depth":1012,"text":96644},"2015-08-17","\u002Fimages\u002Fblog\u002Ffeatures\u002Freact-css.jpg",{},{"title":662,"description":664},"blog\u002Freact-css",[16,17],"MhhnuwlB2ppcjA1i3BZbmU3yZKrkTKtYJ-mF_DzT_Ww",{"id":97396,"title":511,"author":920,"body":97397,"date":97873,"description":513,"extension":1591,"image":97874,"meta":97875,"navigation":1050,"path":512,"seo":97876,"stem":97877,"tags":97878,"__hash__":97879},"blog\u002Fblog\u002Fjavascript-constructor.md",{"type":922,"value":97398,"toc":97868},[97399,97404,97451,97455,97461,97480,97486,97489,97504,97603,97607,97610,97719,97746,97750,97753,97865],[925,97400,3898,97401,97403],{},[1107,97402,4360],{}," will reference the function which made the object.",[993,97405,97407],{"className":995,"code":97406,"language":997,"meta":998,"style":998},"function Foo();\n\nvar foo = new Foo();\n\nfoo.constructor === Foo; \u002F\u002F true\n",[941,97408,97409,97417,97421,97435,97439],{"__ignoreMap":998},[1002,97410,97411,97413,97415],{"class":1004,"line":1005},[1002,97412,6965],{"class":1015},[1002,97414,96175],{"class":1026},[1002,97416,1428],{"class":1030},[1002,97418,97419],{"class":1004,"line":1012},[1002,97420,1051],{"emptyLinePlaceholder":1050},[1002,97422,97423,97425,97427,97429,97431,97433],{"class":1004,"line":1047},[1002,97424,18311],{"class":1015},[1002,97426,38379],{"class":1030},[1002,97428,2393],{"class":1015},[1002,97430,2690],{"class":1015},[1002,97432,96175],{"class":1026},[1002,97434,1428],{"class":1030},[1002,97436,97437],{"class":1004,"line":1054},[1002,97438,1051],{"emptyLinePlaceholder":1050},[1002,97440,97441,97443,97445,97447,97449],{"class":1004,"line":1060},[1002,97442,96273],{"class":1030},[1002,97444,4360],{"class":1019},[1002,97446,32322],{"class":1015},[1002,97448,96194],{"class":1030},[1002,97450,2877],{"class":1008},[953,97452,97454],{"id":97453},"how-is-constructor-created","How is constructor created?",[925,97456,97457,97458,97460],{},"When you created the ",[941,97459,16521],{}," object:",[993,97462,97464],{"className":995,"code":97463,"language":997,"meta":998,"style":998},"var foo = new Foo();\n",[941,97465,97466],{"__ignoreMap":998},[1002,97467,97468,97470,97472,97474,97476,97478],{"class":1004,"line":1005},[1002,97469,18311],{"class":1015},[1002,97471,38379],{"class":1030},[1002,97473,2393],{"class":1015},[1002,97475,2690],{"class":1015},[1002,97477,96175],{"class":1026},[1002,97479,1428],{"class":1030},[925,97481,97482,97483,97485],{},"JavaScript engine creates a new functon object from your declaration. Togther with this, your ",[1107,97484,3894],{}," is created as well.",[925,97487,97488],{},"This default value the prototype is an object with property constructor, which is set to the function itself.",[925,97490,97491,97492,97495,97496,97499,97500,97503],{},"So, when new ",[1107,97493,97494],{},"Foo"," is called, the ",[941,97497,97498],{},"Foo.prototype"," becomes ",[941,97501,97502],{},"__proto__"," and the constructor becomes accessible from the object:",[993,97505,97507],{"className":995,"code":97506,"language":997,"meta":998,"style":998},"function Foo() {}\n\nvar foo = new Foo();\n\nconsole.log(\n foo.hasOwnProperty('constructor'), \u002F\u002F false\n Foo.constructor === Function, \u002F\u002F true\n Foo.prototype.hasOwnProperty('constructor'), \u002F\u002F true\n);\n",[941,97508,97509,97517,97521,97535,97539,97547,97564,97578,97599],{"__ignoreMap":998},[1002,97510,97511,97513,97515],{"class":1004,"line":1005},[1002,97512,6965],{"class":1015},[1002,97514,96175],{"class":1026},[1002,97516,2997],{"class":1030},[1002,97518,97519],{"class":1004,"line":1012},[1002,97520,1051],{"emptyLinePlaceholder":1050},[1002,97522,97523,97525,97527,97529,97531,97533],{"class":1004,"line":1047},[1002,97524,18311],{"class":1015},[1002,97526,38379],{"class":1030},[1002,97528,2393],{"class":1015},[1002,97530,2690],{"class":1015},[1002,97532,96175],{"class":1026},[1002,97534,1428],{"class":1030},[1002,97536,97537],{"class":1004,"line":1054},[1002,97538,1051],{"emptyLinePlaceholder":1050},[1002,97540,97541,97543,97545],{"class":1004,"line":1060},[1002,97542,2883],{"class":1030},[1002,97544,2886],{"class":1026},[1002,97546,10468],{"class":1030},[1002,97548,97549,97552,97555,97557,97560,97562],{"class":1004,"line":1272},[1002,97550,97551],{"class":1030}," foo.",[1002,97553,97554],{"class":1026},"hasOwnProperty",[1002,97556,1031],{"class":1030},[1002,97558,97559],{"class":1034},"'constructor'",[1002,97561,38570],{"class":1030},[1002,97563,25986],{"class":1008},[1002,97565,97566,97569,97571,97573,97576],{"class":1004,"line":1348},[1002,97567,97568],{"class":1030}," Foo.",[1002,97570,4360],{"class":1019},[1002,97572,32322],{"class":1015},[1002,97574,97575],{"class":1030}," Function, ",[1002,97577,2877],{"class":1008},[1002,97579,97580,97583,97585,97587,97589,97591,97593,97595,97597],{"class":1004,"line":1354},[1002,97581,97582],{"class":1019}," Foo",[1002,97584,948],{"class":1030},[1002,97586,3894],{"class":1019},[1002,97588,948],{"class":1030},[1002,97590,97554],{"class":1026},[1002,97592,1031],{"class":1030},[1002,97594,97559],{"class":1034},[1002,97596,38570],{"class":1030},[1002,97598,2877],{"class":1008},[1002,97600,97601],{"class":1004,"line":1360},[1002,97602,1085],{"class":1030},[953,97604,97606],{"id":97605},"prototype-the-constructor","Prototype & the constructor",[925,97608,97609],{},"If we replace the prototype, we will end up losing the constructor:",[993,97611,97613],{"className":995,"code":97612,"language":997,"meta":998,"style":998},"function Foo() {}\n\nvar foo = new Foo();\n\nfoo.constructor === Object; \u002F\u002F false\nfoo.constructor === Foo; \u002F\u002F true\n\nFoo.prototype = {};\n\nfoo = new Foo();\n\nfoo.constructor === Object; \u002F\u002F true\n",[941,97614,97615,97623,97627,97641,97645,97658,97670,97674,97686,97690,97703,97707],{"__ignoreMap":998},[1002,97616,97617,97619,97621],{"class":1004,"line":1005},[1002,97618,6965],{"class":1015},[1002,97620,96175],{"class":1026},[1002,97622,2997],{"class":1030},[1002,97624,97625],{"class":1004,"line":1012},[1002,97626,1051],{"emptyLinePlaceholder":1050},[1002,97628,97629,97631,97633,97635,97637,97639],{"class":1004,"line":1047},[1002,97630,18311],{"class":1015},[1002,97632,38379],{"class":1030},[1002,97634,2393],{"class":1015},[1002,97636,2690],{"class":1015},[1002,97638,96175],{"class":1026},[1002,97640,1428],{"class":1030},[1002,97642,97643],{"class":1004,"line":1054},[1002,97644,1051],{"emptyLinePlaceholder":1050},[1002,97646,97647,97649,97651,97653,97656],{"class":1004,"line":1060},[1002,97648,96273],{"class":1030},[1002,97650,4360],{"class":1019},[1002,97652,32322],{"class":1015},[1002,97654,97655],{"class":1030}," Object; ",[1002,97657,25986],{"class":1008},[1002,97659,97660,97662,97664,97666,97668],{"class":1004,"line":1272},[1002,97661,96273],{"class":1030},[1002,97663,4360],{"class":1019},[1002,97665,32322],{"class":1015},[1002,97667,96194],{"class":1030},[1002,97669,2877],{"class":1008},[1002,97671,97672],{"class":1004,"line":1348},[1002,97673,1051],{"emptyLinePlaceholder":1050},[1002,97675,97676,97678,97680,97682,97684],{"class":1004,"line":1354},[1002,97677,97494],{"class":1019},[1002,97679,948],{"class":1030},[1002,97681,3894],{"class":1019},[1002,97683,1023],{"class":1015},[1002,97685,7217],{"class":1030},[1002,97687,97688],{"class":1004,"line":1360},[1002,97689,1051],{"emptyLinePlaceholder":1050},[1002,97691,97692,97695,97697,97699,97701],{"class":1004,"line":1366},[1002,97693,97694],{"class":1030},"foo ",[1002,97696,2393],{"class":1015},[1002,97698,2690],{"class":1015},[1002,97700,96175],{"class":1026},[1002,97702,1428],{"class":1030},[1002,97704,97705],{"class":1004,"line":1946},[1002,97706,1051],{"emptyLinePlaceholder":1050},[1002,97708,97709,97711,97713,97715,97717],{"class":1004,"line":1956},[1002,97710,96273],{"class":1030},[1002,97712,4360],{"class":1019},[1002,97714,32322],{"class":1015},[1002,97716,97655],{"class":1030},[1002,97718,2877],{"class":1008},[925,97720,97721,97722,97724,97725,97727,97728,44928,97730,97733,97734,97736,97737,97739,97740,97742,97743,948],{},"What happens here is: when we created the ",[1107,97723,16521],{}," object, the JavaScript engine creates an object and sets its constructor to ",[941,97726,97494],{},".\nBut we overrode the prototype of the ",[941,97729,97494],{},[941,97731,97732],{},"{}",". This object (",[941,97735,97732],{},"), does not have a ",[941,97738,4360],{},", so the compiler falls back to its ",[941,97741,97502],{},", using the native ",[941,97744,97745],{},"Object.prototype.constructor",[953,97747,97749],{"id":97748},"preserving-constructor","Preserving constructor",[925,97751,97752],{},"Additional code is usually required to prevent it from being overwritten. If you intend to keep it correct, then put it into the new prototype, like this:",[993,97754,97756],{"className":995,"code":97755,"language":997,"meta":998,"style":998},"function Foo() {}\n\nFoo.prototype = {};\n\nvar foo = new Foo();\n\nfoo.constructor === Foo; \u002F\u002F false\n\nFoo.prototype = { constructor: Foo };\n\nfoo = new Foo();\n\nfoo.constructor === Foo; \u002F\u002F true\n",[941,97757,97758,97766,97770,97782,97786,97800,97804,97816,97820,97833,97837,97849,97853],{"__ignoreMap":998},[1002,97759,97760,97762,97764],{"class":1004,"line":1005},[1002,97761,6965],{"class":1015},[1002,97763,96175],{"class":1026},[1002,97765,2997],{"class":1030},[1002,97767,97768],{"class":1004,"line":1012},[1002,97769,1051],{"emptyLinePlaceholder":1050},[1002,97771,97772,97774,97776,97778,97780],{"class":1004,"line":1047},[1002,97773,97494],{"class":1019},[1002,97775,948],{"class":1030},[1002,97777,3894],{"class":1019},[1002,97779,1023],{"class":1015},[1002,97781,7217],{"class":1030},[1002,97783,97784],{"class":1004,"line":1054},[1002,97785,1051],{"emptyLinePlaceholder":1050},[1002,97787,97788,97790,97792,97794,97796,97798],{"class":1004,"line":1060},[1002,97789,18311],{"class":1015},[1002,97791,38379],{"class":1030},[1002,97793,2393],{"class":1015},[1002,97795,2690],{"class":1015},[1002,97797,96175],{"class":1026},[1002,97799,1428],{"class":1030},[1002,97801,97802],{"class":1004,"line":1272},[1002,97803,1051],{"emptyLinePlaceholder":1050},[1002,97805,97806,97808,97810,97812,97814],{"class":1004,"line":1348},[1002,97807,96273],{"class":1030},[1002,97809,4360],{"class":1019},[1002,97811,32322],{"class":1015},[1002,97813,96194],{"class":1030},[1002,97815,25986],{"class":1008},[1002,97817,97818],{"class":1004,"line":1354},[1002,97819,1051],{"emptyLinePlaceholder":1050},[1002,97821,97822,97824,97826,97828,97830],{"class":1004,"line":1360},[1002,97823,97494],{"class":1019},[1002,97825,948],{"class":1030},[1002,97827,3894],{"class":1019},[1002,97829,1023],{"class":1015},[1002,97831,97832],{"class":1030}," { constructor: Foo };\n",[1002,97834,97835],{"class":1004,"line":1366},[1002,97836,1051],{"emptyLinePlaceholder":1050},[1002,97838,97839,97841,97843,97845,97847],{"class":1004,"line":1946},[1002,97840,97694],{"class":1030},[1002,97842,2393],{"class":1015},[1002,97844,2690],{"class":1015},[1002,97846,96175],{"class":1026},[1002,97848,1428],{"class":1030},[1002,97850,97851],{"class":1004,"line":1956},[1002,97852,1051],{"emptyLinePlaceholder":1050},[1002,97854,97855,97857,97859,97861,97863],{"class":1004,"line":1961},[1002,97856,96273],{"class":1030},[1002,97858,4360],{"class":1019},[1002,97860,32322],{"class":1015},[1002,97862,96194],{"class":1030},[1002,97864,2877],{"class":1008},[1579,97866,97867],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":97869},[97870,97871,97872],{"id":97453,"depth":1012,"text":97454},{"id":97605,"depth":1012,"text":97606},{"id":97748,"depth":1012,"text":97749},"2015-08-07","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjavascript-constructor.jpg",{},{"title":511,"description":513},"blog\u002Fjavascript-constructor",[16,17],"yubGvC87EPdQJ5j-di2BNKy-sgtSloD3JtnzKjxKpkA",{"id":97881,"title":527,"author":920,"body":97882,"date":98747,"description":529,"extension":1591,"image":98748,"meta":98749,"navigation":1050,"path":528,"seo":98750,"stem":98751,"tags":98752,"__hash__":98753},"blog\u002Fblog\u002Fjavascript-prototype.md",{"type":922,"value":97883,"toc":98742},[97884,97897,97902,97916,97998,98007,98021,98030,98046,98056,98196,98211,98444,98451,98454,98457,98463,98477,98487,98739],[7100,97885,97887],{"title":97886,"type":24048},"Object",[925,97888,97889,97890,97892,97893,97896],{},"ECMAScript deals with ",[1107,97891,43696],{},", which are an abstract form of object-orientated language. They are ",[1107,97894,97895],{},"primitives"," but can be converted to objects when needed.",[953,97898,97900],{"id":97899},"proto",[1107,97901,97899],{},[925,97903,97904,97905,97907,97908,97910,97911,97913,97914,1813],{},"Property ",[941,97906,97502],{}," is the actual object that is used in the lookup chain to resolve methods, etc. ",[941,97909,3894],{}," is the object that is used to build ",[941,97912,97502],{}," when you create an object with ",[941,97915,5654],{},[993,97917,97919],{"className":995,"code":97918,"language":997,"meta":998,"style":998},"function Foo() {}\n\nvar foo = new Foo();\n\nconsole.log(\n foo.__proto__ === Foo.prototype, \u002F\u002F true\n foo.prototype === undefined, \u002F\u002F true\n);\n",[941,97920,97921,97929,97933,97947,97951,97959,97977,97994],{"__ignoreMap":998},[1002,97922,97923,97925,97927],{"class":1004,"line":1005},[1002,97924,6965],{"class":1015},[1002,97926,96175],{"class":1026},[1002,97928,2997],{"class":1030},[1002,97930,97931],{"class":1004,"line":1012},[1002,97932,1051],{"emptyLinePlaceholder":1050},[1002,97934,97935,97937,97939,97941,97943,97945],{"class":1004,"line":1047},[1002,97936,18311],{"class":1015},[1002,97938,38379],{"class":1030},[1002,97940,2393],{"class":1015},[1002,97942,2690],{"class":1015},[1002,97944,96175],{"class":1026},[1002,97946,1428],{"class":1030},[1002,97948,97949],{"class":1004,"line":1054},[1002,97950,1051],{"emptyLinePlaceholder":1050},[1002,97952,97953,97955,97957],{"class":1004,"line":1060},[1002,97954,2883],{"class":1030},[1002,97956,2886],{"class":1026},[1002,97958,10468],{"class":1030},[1002,97960,97961,97963,97965,97967,97969,97971,97973,97975],{"class":1004,"line":1272},[1002,97962,97551],{"class":1030},[1002,97964,97502],{"class":1019},[1002,97966,32322],{"class":1015},[1002,97968,96175],{"class":1019},[1002,97970,948],{"class":1030},[1002,97972,3894],{"class":1019},[1002,97974,1251],{"class":1030},[1002,97976,2877],{"class":1008},[1002,97978,97979,97982,97984,97986,97988,97990,97992],{"class":1004,"line":1348},[1002,97980,97981],{"class":1019}," foo",[1002,97983,948],{"class":1030},[1002,97985,3894],{"class":1019},[1002,97987,32322],{"class":1015},[1002,97989,32283],{"class":1019},[1002,97991,1251],{"class":1030},[1002,97993,2877],{"class":1008},[1002,97995,97996],{"class":1004,"line":1354},[1002,97997,1085],{"class":1030},[925,97999,98000,98001,98003,98004,98006],{},"So ",[941,98002,3894],{}," is not available on the instances themselves (or other objects), but only on the ",[941,98005,4360],{}," functions.",[925,98008,98009,98011,98012,36227,98015,98017,98018,98020],{},[941,98010,3894],{}," is only available on functions since they are derived from ",[941,98013,98014],{},"Function",[941,98016,97886],{}," but in anything else it is not. However, ",[941,98019,97502],{}," is available on every object.",[925,98022,98023,98024,98026,98027,98029],{},"Also, ",[941,98025,3894],{}," prototype is a property of a ",[941,98028,98014],{}," object. It is the prototype of objects constructed by that function.",[7100,98031,98033],{"title":98032,"type":24048},"getPropertyOf()",[925,98034,98035,98037,98038,98041,98042,98045],{},[941,98036,97502],{}," is internal property of an object, pointing to its prototype.\nCurrent standards provide an equivalent ",[941,98039,98040],{},"Object.getPrototypeOf(O)"," method, though de facto standard ",[941,98043,98044],{},"__proto__ ","is quicker.",[925,98047,98048,98049,98052,98053,98055],{},"You can find ",[941,98050,98051],{},"instanceof"," relationships by comparing a function's prototype to an object's ",[941,98054,97502],{}," chain, and you can break these relationships by changing prototype.",[993,98057,98059],{"className":995,"code":98058,"language":997,"meta":998,"style":998},"function Foo(x, y) {\n this.x = x;\n this.y = y;\n}\n\nvar foo = new Foo();\n\n\u002F\u002F the following are all true\nconsole.log(\n foo.__proto__ === Foo.prototype,\n foo.__proto__.__proto__ === Object.prototype,\n foo instanceof Foo,\n foo instanceof Object,\n);\n",[941,98060,98061,98077,98087,98097,98101,98105,98119,98123,98128,98136,98152,98172,98182,98192],{"__ignoreMap":998},[1002,98062,98063,98065,98067,98069,98071,98073,98075],{"class":1004,"line":1005},[1002,98064,6965],{"class":1015},[1002,98066,96175],{"class":1026},[1002,98068,1031],{"class":1030},[1002,98070,77056],{"class":2378},[1002,98072,1251],{"class":1030},[1002,98074,50723],{"class":2378},[1002,98076,2382],{"class":1030},[1002,98078,98079,98081,98083,98085],{"class":1004,"line":1012},[1002,98080,39364],{"class":1019},[1002,98082,95978],{"class":1030},[1002,98084,2393],{"class":1015},[1002,98086,96413],{"class":1030},[1002,98088,98089,98091,98093,98095],{"class":1004,"line":1047},[1002,98090,39364],{"class":1019},[1002,98092,96420],{"class":1030},[1002,98094,2393],{"class":1015},[1002,98096,77074],{"class":1030},[1002,98098,98099],{"class":1004,"line":1054},[1002,98100,1170],{"class":1030},[1002,98102,98103],{"class":1004,"line":1060},[1002,98104,1051],{"emptyLinePlaceholder":1050},[1002,98106,98107,98109,98111,98113,98115,98117],{"class":1004,"line":1272},[1002,98108,18311],{"class":1015},[1002,98110,38379],{"class":1030},[1002,98112,2393],{"class":1015},[1002,98114,2690],{"class":1015},[1002,98116,96175],{"class":1026},[1002,98118,1428],{"class":1030},[1002,98120,98121],{"class":1004,"line":1348},[1002,98122,1051],{"emptyLinePlaceholder":1050},[1002,98124,98125],{"class":1004,"line":1354},[1002,98126,98127],{"class":1008},"\u002F\u002F the following are all true\n",[1002,98129,98130,98132,98134],{"class":1004,"line":1360},[1002,98131,2883],{"class":1030},[1002,98133,2886],{"class":1026},[1002,98135,10468],{"class":1030},[1002,98137,98138,98140,98142,98144,98146,98148,98150],{"class":1004,"line":1366},[1002,98139,97551],{"class":1030},[1002,98141,97502],{"class":1019},[1002,98143,32322],{"class":1015},[1002,98145,96175],{"class":1019},[1002,98147,948],{"class":1030},[1002,98149,3894],{"class":1019},[1002,98151,1143],{"class":1030},[1002,98153,98154,98156,98158,98160,98162,98164,98166,98168,98170],{"class":1004,"line":1946},[1002,98155,97551],{"class":1030},[1002,98157,97502],{"class":1019},[1002,98159,948],{"class":1030},[1002,98161,97502],{"class":1019},[1002,98163,32322],{"class":1015},[1002,98165,17252],{"class":1019},[1002,98167,948],{"class":1030},[1002,98169,3894],{"class":1019},[1002,98171,1143],{"class":1030},[1002,98173,98174,98176,98178,98180],{"class":1004,"line":1956},[1002,98175,16499],{"class":1030},[1002,98177,98051],{"class":1015},[1002,98179,96175],{"class":1026},[1002,98181,1143],{"class":1030},[1002,98183,98184,98186,98188,98190],{"class":1004,"line":1961},[1002,98185,16499],{"class":1030},[1002,98187,98051],{"class":1015},[1002,98189,17252],{"class":1026},[1002,98191,1143],{"class":1030},[1002,98193,98194],{"class":1004,"line":1971},[1002,98195,1085],{"class":1030},[925,98197,30712,98198,98200,98201,98203,98204,98206,98207,98210],{},[941,98199,97494],{}," is a constructor function. It builds an object (data structure) procedurally. ",[941,98202,16521],{}," is an object constructed by Foo() so ",[941,98205,97498],{}," gets saved to ",[941,98208,98209],{},"foo.__proto__"," at that time.",[993,98212,98214],{"className":995,"code":98213,"language":997,"meta":998,"style":998},"function A() {\n this.x = 10;\n this.calc = function (z) {\n return this.x + this.y + z;\n };\n}\n\nfunction B() {}\nB.prototype = new A();\nB.prototype.y = 20;\n\nfunction C() {}\nC.prototype = new A();\nC.prototype.y = 30;\n\nvar b = new B();\nvar c = new C();\n\nb.calc(30); \u002F\u002F 60\nc.calc(30); \u002F\u002F 70\n",[941,98215,98216,98225,98237,98256,98274,98278,98282,98286,98295,98312,98328,98332,98341,98358,98375,98379,98393,98408,98412,98428],{"__ignoreMap":998},[1002,98217,98218,98220,98223],{"class":1004,"line":1005},[1002,98219,6965],{"class":1015},[1002,98221,98222],{"class":1026}," A",[1002,98224,3025],{"class":1030},[1002,98226,98227,98229,98231,98233,98235],{"class":1004,"line":1012},[1002,98228,39364],{"class":1019},[1002,98230,95978],{"class":1030},[1002,98232,2393],{"class":1015},[1002,98234,8970],{"class":1019},[1002,98236,1407],{"class":1030},[1002,98238,98239,98241,98243,98246,98248,98250,98252,98254],{"class":1004,"line":1047},[1002,98240,39364],{"class":1019},[1002,98242,948],{"class":1030},[1002,98244,98245],{"class":1026},"calc",[1002,98247,1023],{"class":1015},[1002,98249,8457],{"class":1015},[1002,98251,6513],{"class":1030},[1002,98253,96494],{"class":2378},[1002,98255,2382],{"class":1030},[1002,98257,98258,98260,98262,98264,98266,98268,98270,98272],{"class":1004,"line":1054},[1002,98259,2687],{"class":1015},[1002,98261,2693],{"class":1019},[1002,98263,95978],{"class":1030},[1002,98265,5064],{"class":1015},[1002,98267,2693],{"class":1019},[1002,98269,96420],{"class":1030},[1002,98271,5064],{"class":1015},[1002,98273,96515],{"class":1030},[1002,98275,98276],{"class":1004,"line":1060},[1002,98277,15113],{"class":1030},[1002,98279,98280],{"class":1004,"line":1272},[1002,98281,1170],{"class":1030},[1002,98283,98284],{"class":1004,"line":1348},[1002,98285,1051],{"emptyLinePlaceholder":1050},[1002,98287,98288,98290,98293],{"class":1004,"line":1354},[1002,98289,6965],{"class":1015},[1002,98291,98292],{"class":1026}," B",[1002,98294,2997],{"class":1030},[1002,98296,98297,98300,98302,98304,98306,98308,98310],{"class":1004,"line":1360},[1002,98298,98299],{"class":1019},"B",[1002,98301,948],{"class":1030},[1002,98303,3894],{"class":1019},[1002,98305,1023],{"class":1015},[1002,98307,2690],{"class":1015},[1002,98309,98222],{"class":1026},[1002,98311,1428],{"class":1030},[1002,98313,98314,98316,98318,98320,98322,98324,98326],{"class":1004,"line":1366},[1002,98315,98299],{"class":1019},[1002,98317,948],{"class":1030},[1002,98319,3894],{"class":1019},[1002,98321,96420],{"class":1030},[1002,98323,2393],{"class":1015},[1002,98325,50421],{"class":1019},[1002,98327,1407],{"class":1030},[1002,98329,98330],{"class":1004,"line":1946},[1002,98331,1051],{"emptyLinePlaceholder":1050},[1002,98333,98334,98336,98339],{"class":1004,"line":1956},[1002,98335,6965],{"class":1015},[1002,98337,98338],{"class":1026}," C",[1002,98340,2997],{"class":1030},[1002,98342,98343,98346,98348,98350,98352,98354,98356],{"class":1004,"line":1961},[1002,98344,98345],{"class":1019},"C",[1002,98347,948],{"class":1030},[1002,98349,3894],{"class":1019},[1002,98351,1023],{"class":1015},[1002,98353,2690],{"class":1015},[1002,98355,98222],{"class":1026},[1002,98357,1428],{"class":1030},[1002,98359,98360,98362,98364,98366,98368,98370,98373],{"class":1004,"line":1971},[1002,98361,98345],{"class":1019},[1002,98363,948],{"class":1030},[1002,98365,3894],{"class":1019},[1002,98367,96420],{"class":1030},[1002,98369,2393],{"class":1015},[1002,98371,98372],{"class":1019}," 30",[1002,98374,1407],{"class":1030},[1002,98376,98377],{"class":1004,"line":1980},[1002,98378,1051],{"emptyLinePlaceholder":1050},[1002,98380,98381,98383,98385,98387,98389,98391],{"class":1004,"line":1985},[1002,98382,18311],{"class":1015},[1002,98384,85667],{"class":1030},[1002,98386,2393],{"class":1015},[1002,98388,2690],{"class":1015},[1002,98390,98292],{"class":1026},[1002,98392,1428],{"class":1030},[1002,98394,98395,98397,98400,98402,98404,98406],{"class":1004,"line":1995},[1002,98396,18311],{"class":1015},[1002,98398,98399],{"class":1030}," c ",[1002,98401,2393],{"class":1015},[1002,98403,2690],{"class":1015},[1002,98405,98338],{"class":1026},[1002,98407,1428],{"class":1030},[1002,98409,98410],{"class":1004,"line":2006},[1002,98411,1051],{"emptyLinePlaceholder":1050},[1002,98413,98414,98417,98419,98421,98423,98425],{"class":1004,"line":2011},[1002,98415,98416],{"class":1030},"b.",[1002,98418,98245],{"class":1026},[1002,98420,1031],{"class":1030},[1002,98422,51004],{"class":1019},[1002,98424,18256],{"class":1030},[1002,98426,98427],{"class":1008},"\u002F\u002F 60\n",[1002,98429,98430,98433,98435,98437,98439,98441],{"class":1004,"line":2017},[1002,98431,98432],{"class":1030},"c.",[1002,98434,98245],{"class":1026},[1002,98436,1031],{"class":1030},[1002,98438,51004],{"class":1019},[1002,98440,18256],{"class":1030},[1002,98442,98443],{"class":1008},"\u002F\u002F 70\n",[953,98445,98447,98448,98450],{"id":98446},"what-is-the-difference-between-proto-and-prototype-properties","What is the difference between ",[1107,98449,97899],{}," and prototype properties?",[925,98452,98453],{},"The rule is simple: if a property or a method is not found in the object itself (i.e. the object has no such an own property), then there is an attempt to find this property\u002Fmethod in the prototype chain.",[925,98455,98456],{},"If the property is not found in the prototype, then a prototype of the prototype is considered, and so on, i.e. the whole prototype chain (absolutely the same is made in class-based inheritance when resolving an inherited method — there we go through the class chain). The first found property\u002Fmethod with the same name is used. Thus, a found property is called inherited property. If the property is not found after the whole prototype chain lookup, then the undefined value is returned.",[925,98458,98459,98460,98462],{},"If a prototype is not specified for an object explicitly, then the default value for ",[941,98461,97502],{}," is taken - Object.prototype.",[7100,98464,98465],{"title":98032,"type":24048},[925,98466,98467,98468,98471,98472,98474,98475,948],{},"Object ",[941,98469,98470],{},"Object.prototype"," itself also has a ",[941,98473,97502],{},", which is the final link of a chain and is set to ",[941,98476,26077],{},[925,98478,98479,98480,98482,98483,98486],{},"In JavaScript, every function is actually a ",[941,98481,98014],{}," object. And Function is one of the ",[941,98484,98485],{},"Fundamental objects",", along with Object.",[993,98488,98490],{"className":995,"code":98489,"language":997,"meta":998,"style":998},"function A() {}\nA.prototype.foo = 1;\n\nfunction B() {}\nB.prototype = Object.create(A.prototype);\n\u002F* or, B.prototype = new A();*\u002F\nB.prototype.foo = 2;\n\nvar b = new B();\nconsole.log(\n \u002F* b's contructor is A *\u002F\n b.constructor === A, \u002F\u002F true\n b.constructor === B, \u002F\u002F false\n \u002F* B's contructor is Function *\u002F\n b.constructor === Function, \u002F\u002F false\n B.constructor === Function, \u002F\u002F true\n b instanceof B, \u002F\u002F true\n);\n\nvar a = new A();\n\nconsole.log(\n a.__proto__ === b.__proto__.__proto__, \u002F\u002F true\n);\n",[941,98491,98492,98500,98517,98521,98529,98553,98558,98574,98578,98592,98600,98605,98620,98634,98639,98651,98666,98679,98683,98687,98701,98705,98713,98735],{"__ignoreMap":998},[1002,98493,98494,98496,98498],{"class":1004,"line":1005},[1002,98495,6965],{"class":1015},[1002,98497,98222],{"class":1026},[1002,98499,2997],{"class":1030},[1002,98501,98502,98504,98506,98508,98511,98513,98515],{"class":1004,"line":1012},[1002,98503,15318],{"class":1019},[1002,98505,948],{"class":1030},[1002,98507,3894],{"class":1019},[1002,98509,98510],{"class":1030},".foo ",[1002,98512,2393],{"class":1015},[1002,98514,6246],{"class":1019},[1002,98516,1407],{"class":1030},[1002,98518,98519],{"class":1004,"line":1047},[1002,98520,1051],{"emptyLinePlaceholder":1050},[1002,98522,98523,98525,98527],{"class":1004,"line":1054},[1002,98524,6965],{"class":1015},[1002,98526,98292],{"class":1026},[1002,98528,2997],{"class":1030},[1002,98530,98531,98533,98535,98537,98539,98541,98543,98545,98547,98549,98551],{"class":1004,"line":1060},[1002,98532,98299],{"class":1019},[1002,98534,948],{"class":1030},[1002,98536,3894],{"class":1019},[1002,98538,1023],{"class":1015},[1002,98540,82475],{"class":1030},[1002,98542,48241],{"class":1026},[1002,98544,1031],{"class":1030},[1002,98546,15318],{"class":1019},[1002,98548,948],{"class":1030},[1002,98550,3894],{"class":1019},[1002,98552,1085],{"class":1030},[1002,98554,98555],{"class":1004,"line":1272},[1002,98556,98557],{"class":1008},"\u002F* or, B.prototype = new A();*\u002F\n",[1002,98559,98560,98562,98564,98566,98568,98570,98572],{"class":1004,"line":1348},[1002,98561,98299],{"class":1019},[1002,98563,948],{"class":1030},[1002,98565,3894],{"class":1019},[1002,98567,98510],{"class":1030},[1002,98569,2393],{"class":1015},[1002,98571,10248],{"class":1019},[1002,98573,1407],{"class":1030},[1002,98575,98576],{"class":1004,"line":1354},[1002,98577,1051],{"emptyLinePlaceholder":1050},[1002,98579,98580,98582,98584,98586,98588,98590],{"class":1004,"line":1360},[1002,98581,18311],{"class":1015},[1002,98583,85667],{"class":1030},[1002,98585,2393],{"class":1015},[1002,98587,2690],{"class":1015},[1002,98589,98292],{"class":1026},[1002,98591,1428],{"class":1030},[1002,98593,98594,98596,98598],{"class":1004,"line":1366},[1002,98595,2883],{"class":1030},[1002,98597,2886],{"class":1026},[1002,98599,10468],{"class":1030},[1002,98601,98602],{"class":1004,"line":1946},[1002,98603,98604],{"class":1008}," \u002F* b's contructor is A *\u002F\n",[1002,98606,98607,98610,98612,98614,98616,98618],{"class":1004,"line":1956},[1002,98608,98609],{"class":1030}," b.",[1002,98611,4360],{"class":1019},[1002,98613,32322],{"class":1015},[1002,98615,98222],{"class":1019},[1002,98617,1251],{"class":1030},[1002,98619,2877],{"class":1008},[1002,98621,98622,98624,98626,98628,98630,98632],{"class":1004,"line":1961},[1002,98623,98609],{"class":1030},[1002,98625,4360],{"class":1019},[1002,98627,32322],{"class":1015},[1002,98629,98292],{"class":1019},[1002,98631,1251],{"class":1030},[1002,98633,25986],{"class":1008},[1002,98635,98636],{"class":1004,"line":1971},[1002,98637,98638],{"class":1008}," \u002F* B's contructor is Function *\u002F\n",[1002,98640,98641,98643,98645,98647,98649],{"class":1004,"line":1980},[1002,98642,98609],{"class":1030},[1002,98644,4360],{"class":1019},[1002,98646,32322],{"class":1015},[1002,98648,97575],{"class":1030},[1002,98650,25986],{"class":1008},[1002,98652,98653,98656,98658,98660,98662,98664],{"class":1004,"line":1985},[1002,98654,98655],{"class":1019}," B",[1002,98657,948],{"class":1030},[1002,98659,4360],{"class":1019},[1002,98661,32322],{"class":1015},[1002,98663,97575],{"class":1030},[1002,98665,2877],{"class":1008},[1002,98667,98668,98671,98673,98675,98677],{"class":1004,"line":1995},[1002,98669,98670],{"class":1030}," b ",[1002,98672,98051],{"class":1015},[1002,98674,98292],{"class":1026},[1002,98676,1251],{"class":1030},[1002,98678,2877],{"class":1008},[1002,98680,98681],{"class":1004,"line":2006},[1002,98682,1085],{"class":1030},[1002,98684,98685],{"class":1004,"line":2011},[1002,98686,1051],{"emptyLinePlaceholder":1050},[1002,98688,98689,98691,98693,98695,98697,98699],{"class":1004,"line":2017},[1002,98690,18311],{"class":1015},[1002,98692,85662],{"class":1030},[1002,98694,2393],{"class":1015},[1002,98696,2690],{"class":1015},[1002,98698,98222],{"class":1026},[1002,98700,1428],{"class":1030},[1002,98702,98703],{"class":1004,"line":2022},[1002,98704,1051],{"emptyLinePlaceholder":1050},[1002,98706,98707,98709,98711],{"class":1004,"line":2442},[1002,98708,2883],{"class":1030},[1002,98710,2886],{"class":1026},[1002,98712,10468],{"class":1030},[1002,98714,98715,98718,98720,98722,98725,98727,98729,98731,98733],{"class":1004,"line":2466},[1002,98716,98717],{"class":1030}," a.",[1002,98719,97502],{"class":1019},[1002,98721,32322],{"class":1015},[1002,98723,98724],{"class":1030}," b.",[1002,98726,97502],{"class":1019},[1002,98728,948],{"class":1030},[1002,98730,97502],{"class":1019},[1002,98732,1251],{"class":1030},[1002,98734,2877],{"class":1008},[1002,98736,98737],{"class":1004,"line":2471},[1002,98738,1085],{"class":1030},[1579,98740,98741],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":98743},[98744,98745],{"id":97899,"depth":1012,"text":97899},{"id":98446,"depth":1012,"text":98746},"What is the difference between proto and prototype properties?","2015-08-03","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjavascript-prototype.jpg",{},{"title":527,"description":529},"blog\u002Fjavascript-prototype",[16,17],"_DAlGGk0kUTXFCDSUMt12wNZD8bwtR30unVQfdtSZ0s",{"id":98755,"title":385,"author":920,"body":98756,"date":99272,"description":387,"extension":1591,"image":99273,"meta":99274,"navigation":1050,"path":386,"seo":99275,"stem":99276,"tags":99277,"__hash__":99278},"blog\u002Fblog\u002Fhtml5-api-local-storage-geolocation-offline-cache-manifest.md",{"type":922,"value":98757,"toc":99260},[98758,98764,98767,98771,98774,98783,98807,98810,98839,98842,98881,98884,98888,98891,98894,98898,98905,99032,99036,99039,99166,99169,99173,99177,99180,99183,99186,99197,99201,99204,99248,99251,99257],[7100,98759,98761],{"title":98760,"type":24048},"Web is stateless",[925,98762,98763],{},"The main problem with HTTP as the main transport layer of the Web is that it is stateless.\nThis means that when you use an application and then close it, its state will be reset the next time you open it.",[925,98765,98766],{},"Normally, this is done server-side, and you would check the username to know which state to revert to. But what if you don’t want to force people to sign up?\nThis is where local storage comes in. You would keep a key on the user’s computer and read it out when the user returns.",[1655,98768,98770],{"id":98769},"using-local-storage-in-html5-capable-browsers","USING LOCAL STORAGE IN HTML5-CAPABLE BROWSERS",[925,98772,98773],{},"To use localStorage, all you have to do is modify the localStorage object in JavaScript.",[925,98775,98776,98777,2034,98780,86692],{},"You can do that directly or (and this is probably cleaner) use the ",[941,98778,98779],{},"setItem()",[941,98781,98782],{},"getItem()",[993,98784,98786],{"className":995,"code":98785,"language":997,"meta":998,"style":998},"localStorage.setItem('favoriteColor', 'vlue');\n",[941,98787,98788],{"__ignoreMap":998},[1002,98789,98790,98792,98795,98797,98800,98802,98805],{"class":1004,"line":1005},[1002,98791,7982],{"class":1030},[1002,98793,98794],{"class":1026},"setItem",[1002,98796,1031],{"class":1030},[1002,98798,98799],{"class":1034},"'favoriteColor'",[1002,98801,1251],{"class":1030},[1002,98803,98804],{"class":1034},"'vlue'",[1002,98806,1085],{"class":1030},[925,98808,98809],{},"If you read out the 'favoriteColor' key, you will get back “blue”:",[993,98811,98813],{"className":995,"code":98812,"language":997,"meta":998,"style":998},"var color = localStorage.getItem('favoriteColor'); \u002F\u002F -> “blue\"\n",[941,98814,98815],{"__ignoreMap":998},[1002,98816,98817,98819,98822,98824,98827,98830,98832,98834,98836],{"class":1004,"line":1005},[1002,98818,18311],{"class":1015},[1002,98820,98821],{"class":1030}," color ",[1002,98823,2393],{"class":1015},[1002,98825,98826],{"class":1030}," localStorage.",[1002,98828,98829],{"class":1026},"getItem",[1002,98831,1031],{"class":1030},[1002,98833,98799],{"class":1034},[1002,98835,18256],{"class":1030},[1002,98837,98838],{"class":1008},"\u002F\u002F -> “blue\"\n",[925,98840,98841],{},"To remove the item, you can use — can you guess? — the removeItem() method:",[993,98843,98845],{"className":995,"code":98844,"language":997,"meta":998,"style":998},"localStorage.removeItem('favoriteColor');\nvar color = localStorage.getItem('favoriteColor'); \u002F\u002F -> null\n",[941,98846,98847,98860],{"__ignoreMap":998},[1002,98848,98849,98851,98854,98856,98858],{"class":1004,"line":1005},[1002,98850,7982],{"class":1030},[1002,98852,98853],{"class":1026},"removeItem",[1002,98855,1031],{"class":1030},[1002,98857,98799],{"class":1034},[1002,98859,1085],{"class":1030},[1002,98861,98862,98864,98866,98868,98870,98872,98874,98876,98878],{"class":1004,"line":1012},[1002,98863,18311],{"class":1015},[1002,98865,98821],{"class":1030},[1002,98867,2393],{"class":1015},[1002,98869,98826],{"class":1030},[1002,98871,98829],{"class":1026},[1002,98873,1031],{"class":1030},[1002,98875,98799],{"class":1034},[1002,98877,18256],{"class":1030},[1002,98879,98880],{"class":1008},"\u002F\u002F -> null\n",[925,98882,98883],{},"That’s it! You can also use sessionStorage instead of localStorage if you want the data to be maintained only until the browser window closes.",[953,98885,98887],{"id":98886},"geolocation","GEOLOCATION",[925,98889,98890],{},"Geolocation is the process or technique of identifying the geographical location of a person or device by means of digital information processed via the Internet.",[925,98892,98893],{},"The HTML Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.",[1655,98895,98897],{"id":98896},"using-html-geolocation","USING HTML GEOLOCATION",[925,98899,98900,98901,98904],{},"Use the ",[941,98902,98903],{},"getCurrentPosition()"," method to get the user's position. The example below is a simple Geolocation example returning the latitude and longitude of the user's position:",[993,98906,98908],{"className":995,"code":98907,"language":997,"meta":998,"style":998},"var x = document.getElementById(“demo\");\nfunction getLocation() {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(showPosition);\n } else {\n x.innerHTML = \"Geolocation is not supported by this browser.\";\n }\n}\nfunction showPosition(position) {\n x.innerHTML = \"Latitude: \" + position.coords.latitude +\n \"\u003Cbr>Longitude: \" + position.coords.longitude;\n}\n",[941,98909,98910,98930,98939,98946,98957,98965,98977,98981,98985,98999,99017,99027],{"__ignoreMap":998},[1002,98911,98912,98914,98916,98918,98920,98922,98925,98928],{"class":1004,"line":1005},[1002,98913,18311],{"class":1015},[1002,98915,77069],{"class":1030},[1002,98917,2393],{"class":1015},[1002,98919,16142],{"class":1030},[1002,98921,16591],{"class":1026},[1002,98923,98924],{"class":1030},"(“demo",[1002,98926,98927],{"class":1034},"\")",[1002,98929,1407],{"class":18541},[1002,98931,98932,98934,98937],{"class":1004,"line":1012},[1002,98933,6965],{"class":1015},[1002,98935,98936],{"class":1026}," getLocation",[1002,98938,3025],{"class":1030},[1002,98940,98941,98943],{"class":1004,"line":1047},[1002,98942,19971],{"class":1015},[1002,98944,98945],{"class":1030}," (navigator.geolocation) {\n",[1002,98947,98948,98951,98954],{"class":1004,"line":1054},[1002,98949,98950],{"class":1030}," navigator.geolocation.",[1002,98952,98953],{"class":1026},"getCurrentPosition",[1002,98955,98956],{"class":1030},"(showPosition);\n",[1002,98958,98959,98961,98963],{"class":1004,"line":1060},[1002,98960,30770],{"class":1030},[1002,98962,6060],{"class":1015},[1002,98964,1457],{"class":1030},[1002,98966,98967,98970,98972,98975],{"class":1004,"line":1272},[1002,98968,98969],{"class":1030}," x.innerHTML ",[1002,98971,2393],{"class":1015},[1002,98973,98974],{"class":1034}," \"Geolocation is not supported by this browser.\"",[1002,98976,1407],{"class":1030},[1002,98978,98979],{"class":1004,"line":1348},[1002,98980,1269],{"class":1030},[1002,98982,98983],{"class":1004,"line":1354},[1002,98984,1170],{"class":1030},[1002,98986,98987,98989,98992,98994,98997],{"class":1004,"line":1360},[1002,98988,6965],{"class":1015},[1002,98990,98991],{"class":1026}," showPosition",[1002,98993,1031],{"class":1030},[1002,98995,98996],{"class":2378},"position",[1002,98998,2382],{"class":1030},[1002,99000,99001,99004,99006,99009,99011,99014],{"class":1004,"line":1366},[1002,99002,99003],{"class":1030}," x.innerHTML ",[1002,99005,2393],{"class":1015},[1002,99007,99008],{"class":1034}," \"Latitude: \"",[1002,99010,6583],{"class":1015},[1002,99012,99013],{"class":1030}," position.coords.latitude ",[1002,99015,99016],{"class":1015},"+\n",[1002,99018,99019,99022,99024],{"class":1004,"line":1946},[1002,99020,99021],{"class":1034}," \"\u003Cbr>Longitude: \"",[1002,99023,6583],{"class":1015},[1002,99025,99026],{"class":1030}," position.coords.longitude;\n",[1002,99028,99029],{"class":1004,"line":1956},[1002,99030,99031],{"class":1030},"}\n",[1655,99033,99035],{"id":99034},"displaying-the-result-in-a-map","DISPLAYING THE RESULT IN A MAP",[925,99037,99038],{},"To display the result in a map, you need access to a map service that can use latitude and longitude, like Google Maps:",[993,99040,99042],{"className":995,"code":99041,"language":997,"meta":998,"style":998},"function showPosition(position) {\n var latlon = position.coords.latitude + \",\" + position.coords.longitude;\n var img_url = \"http:\u002F\u002Fmaps.googleapis.com\u002Fmaps\u002Fapi\u002Fstaticmap?center=\n \"+latlon+\"&zoom=14&size=400x300&sensor=false\";\n document.getElementById(\"mapholder\").innerHTML =\n \"\u003Cimg src='\"+img_url+\"'>\";\n}\n",[941,99043,99044,99056,99076,99090,99128,99145,99162],{"__ignoreMap":998},[1002,99045,99046,99048,99050,99052,99054],{"class":1004,"line":1005},[1002,99047,6965],{"class":1015},[1002,99049,98991],{"class":1026},[1002,99051,1031],{"class":1030},[1002,99053,98996],{"class":2378},[1002,99055,2382],{"class":1030},[1002,99057,99058,99060,99063,99065,99067,99069,99072,99074],{"class":1004,"line":1012},[1002,99059,87417],{"class":1015},[1002,99061,99062],{"class":1030}," latlon ",[1002,99064,2393],{"class":1015},[1002,99066,99013],{"class":1030},[1002,99068,5064],{"class":1015},[1002,99070,99071],{"class":1034}," \",\"",[1002,99073,6583],{"class":1015},[1002,99075,99026],{"class":1030},[1002,99077,99078,99080,99083,99085,99088],{"class":1004,"line":1047},[1002,99079,87417],{"class":1015},[1002,99081,99082],{"class":1030}," img_url ",[1002,99084,2393],{"class":1015},[1002,99086,99087],{"class":1034}," \"http:\u002F\u002Fmaps.googleapis.com\u002Fmaps\u002Fapi\u002Fstaticmap?center",[1002,99089,45993],{"class":18541},[1002,99091,99092,99095,99098,99100,99102,99105,99107,99109,99111,99114,99116,99119,99121,99123,99126],{"class":1004,"line":1054},[1002,99093,99094],{"class":1034}," \"+latlon+\"",[1002,99096,99097],{"class":1015},"&",[1002,99099,11259],{"class":1030},[1002,99101,2393],{"class":1015},[1002,99103,99104],{"class":1019},"14",[1002,99106,99097],{"class":1015},[1002,99108,72910],{"class":1030},[1002,99110,2393],{"class":1015},[1002,99112,99113],{"class":1030},"400x300",[1002,99115,99097],{"class":1015},[1002,99117,99118],{"class":1030},"sensor",[1002,99120,2393],{"class":1015},[1002,99122,19341],{"class":1019},[1002,99124,99125],{"class":1034},"\"",[1002,99127,1407],{"class":18541},[1002,99129,99130,99133,99135,99137,99140,99143],{"class":1004,"line":1060},[1002,99131,99132],{"class":1030}," document.",[1002,99134,16591],{"class":1026},[1002,99136,1031],{"class":1030},[1002,99138,99139],{"class":1034},"\"mapholder\"",[1002,99141,99142],{"class":1030},").innerHTML ",[1002,99144,45993],{"class":1015},[1002,99146,99147,99150,99152,99155,99157,99160],{"class":1004,"line":1272},[1002,99148,99149],{"class":1034}," \"\u003Cimg src='\"",[1002,99151,5064],{"class":1015},[1002,99153,99154],{"class":1030},"img_url",[1002,99156,5064],{"class":1015},[1002,99158,99159],{"class":1034},"\"'>\"",[1002,99161,1407],{"class":1030},[1002,99163,99164],{"class":1004,"line":1348},[1002,99165,1170],{"class":1030},[925,99167,99168],{},"In the example above we use the returned latitude and longitude data to show the location in a Google map.",[953,99170,99172],{"id":99171},"offline-cache-manifest","OFFLINE CACHE MANIFEST",[1655,99174,99176],{"id":99175},"what-is-application-cache","What is Application Cache?",[925,99178,99179],{},"HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.",[1655,99181,99172],{"id":99182},"offline-cache-manifest-1",[925,99184,99185],{},"Application cache gives an application three advantages:",[1530,99187,99188,99191,99194],{},[974,99189,99190],{},"Offline browsing - users can use the application when they're offline",[974,99192,99193],{},"Speed - cached resources load faster",[974,99195,99196],{},"Reduced server load - the browser will only download updated\u002Fchanged resources\nfrom the server",[1655,99198,99200],{"id":99199},"cache-manifest-basics","CACHE MANIFEST BASICS",[925,99202,99203],{},"To enable application cache, include the manifest attribute in the document's \u003Chtml> tag:",[993,99205,99207],{"className":995,"code":99206,"language":997,"meta":998,"style":998},"\u003C!DOCTYPE HTML>\n\u003Chtml manifest=\"demo.appcache\">\n...\n\u003C\u002Fhtml>\n",[941,99208,99209,99220,99236,99240],{"__ignoreMap":998},[1002,99210,99211,99213,99215,99218],{"class":1004,"line":1005},[1002,99212,37888],{"class":1015},[1002,99214,37891],{"class":1019},[1002,99216,99217],{"class":1019}," HTML",[1002,99219,15703],{"class":1015},[1002,99221,99222,99224,99226,99229,99231,99234],{"class":1004,"line":1012},[1002,99223,6539],{"class":1030},[1002,99225,383],{"class":15711},[1002,99227,99228],{"class":1026}," manifest",[1002,99230,2393],{"class":1015},[1002,99232,99233],{"class":1034},"\"demo.appcache\"",[1002,99235,15703],{"class":1030},[1002,99237,99238],{"class":1004,"line":1047},[1002,99239,48279],{"class":1030},[1002,99241,99242,99244,99246],{"class":1004,"line":1054},[1002,99243,22437],{"class":1030},[1002,99245,383],{"class":15711},[1002,99247,15703],{"class":1030},[925,99249,99250],{},"Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file).",[925,99252,99253,99254],{},"The recommended file extension for manifest files is: ",[941,99255,99256],{},".appcache",[1579,99258,99259],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":99261},[99262,99263,99267],{"id":98769,"depth":1047,"text":98770},{"id":98886,"depth":1012,"text":98887,"children":99264},[99265,99266],{"id":98896,"depth":1047,"text":98897},{"id":99034,"depth":1047,"text":99035},{"id":99171,"depth":1012,"text":99172,"children":99268},[99269,99270,99271],{"id":99175,"depth":1047,"text":99176},{"id":99182,"depth":1047,"text":99172},{"id":99199,"depth":1047,"text":99200},"2015-07-31","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhtml5-api-local-storage-geolocation-offline-cache-manifest.jpg",{},{"title":385,"description":387},"blog\u002Fhtml5-api-local-storage-geolocation-offline-cache-manifest",[16,17],"tbM6y2sc8efWGxDwrSXd94SZx5UthCqrwwnQXbTGp9s",{"id":99280,"title":636,"author":920,"body":99281,"date":99766,"description":638,"extension":1591,"image":99767,"meta":99768,"navigation":1050,"path":637,"seo":99769,"stem":99770,"tags":99771,"__hash__":99772},"blog\u002Fblog\u002Fproxies.md",{"type":922,"value":99282,"toc":99763},[99283,99293,99311,99314,99321,99336,99550,99554,99557,99563,99566,99608,99611,99743,99757,99760],[925,99284,99285,99286,99289,99290,99292],{},"They introduce ",[941,99287,99288],{},"intercession"," to JavaScript, which is a type of ",[941,99291,37926],{}," programming.",[7100,99294,99296],{"title":99295,"type":24048},"Meta Programming",[925,99297,99298,99299,99302,99303,99306,99307,99310],{},"In programming there different levels, ",[941,99300,99301],{},"base level"," which perform user input and ",[941,99304,99305],{},"meta level"," which processes base level code. An example is ",[941,99308,99309],{},"eval()"," which compiles JavaScript code, which itself is JavaScript. But you can use two different languages for base level and meta level. Or just JavaScript.",[925,99312,99313],{},"Creating a proxy on a particular object allows a predefined handler to get notified when something changes on that object.",[925,99315,99316,99317,2034,99319,948],{},"Proxies are created with two parameters ",[941,99318,67995],{},[941,99320,17247],{},[1530,99322,99323,99328],{},[974,99324,99325,99327],{},[1107,99326,67995],{}," - Intercepts the operation on the way to target.",[974,99329,99330,99332,99333,99335],{},[1107,99331,17247],{}," - If the ",[941,99334,67995],{}," doesn't intercept an operation then it's performed on the target.",[993,99337,99339],{"className":995,"code":99338,"language":997,"meta":998,"style":998},"\u002F\u002F Proxying a normal object\nvar target = {};\nvar handler = {\n get: function (receiver, name) {\n return 'Hello, ' + name;\n },\n};\n\nvar p = new Proxy(target, handler);\np.world === 'Hello, world!';\n\n\u002F\u002F Proxying a function object\nvar target = function () {\n return 'I am the target';\n};\nvar handler = {\n apply: function (receiver, ...args) {\n return 'I am the proxy';\n },\n};\n\nvar p = new Proxy(target, handler);\np() === 'I am the proxy';\n",[941,99340,99341,99346,99357,99368,99387,99397,99401,99405,99409,99426,99437,99441,99446,99459,99468,99472,99482,99503,99512,99516,99520,99524,99538],{"__ignoreMap":998},[1002,99342,99343],{"class":1004,"line":1005},[1002,99344,99345],{"class":1008},"\u002F\u002F Proxying a normal object\n",[1002,99347,99348,99350,99353,99355],{"class":1004,"line":1012},[1002,99349,18311],{"class":1015},[1002,99351,99352],{"class":1030}," target ",[1002,99354,2393],{"class":1015},[1002,99356,7217],{"class":1030},[1002,99358,99359,99361,99364,99366],{"class":1004,"line":1047},[1002,99360,18311],{"class":1015},[1002,99362,99363],{"class":1030}," handler ",[1002,99365,2393],{"class":1015},[1002,99367,1457],{"class":1030},[1002,99369,99370,99372,99374,99376,99378,99381,99383,99385],{"class":1004,"line":1054},[1002,99371,7887],{"class":1026},[1002,99373,1137],{"class":1030},[1002,99375,6965],{"class":1015},[1002,99377,6513],{"class":1030},[1002,99379,99380],{"class":2378},"receiver",[1002,99382,1251],{"class":1030},[1002,99384,5911],{"class":2378},[1002,99386,2382],{"class":1030},[1002,99388,99389,99391,99393,99395],{"class":1004,"line":1060},[1002,99390,2687],{"class":1015},[1002,99392,91610],{"class":1034},[1002,99394,6583],{"class":1015},[1002,99396,5950],{"class":1030},[1002,99398,99399],{"class":1004,"line":1272},[1002,99400,1502],{"class":1030},[1002,99402,99403],{"class":1004,"line":1348},[1002,99404,1517],{"class":1030},[1002,99406,99407],{"class":1004,"line":1354},[1002,99408,1051],{"emptyLinePlaceholder":1050},[1002,99410,99411,99413,99416,99418,99420,99423],{"class":1004,"line":1360},[1002,99412,18311],{"class":1015},[1002,99414,99415],{"class":1030}," p ",[1002,99417,2393],{"class":1015},[1002,99419,2690],{"class":1015},[1002,99421,99422],{"class":1026}," Proxy",[1002,99424,99425],{"class":1030},"(target, handler);\n",[1002,99427,99428,99431,99433,99435],{"class":1004,"line":1366},[1002,99429,99430],{"class":1030},"p.world ",[1002,99432,2892],{"class":1015},[1002,99434,91845],{"class":1034},[1002,99436,1407],{"class":1030},[1002,99438,99439],{"class":1004,"line":1946},[1002,99440,1051],{"emptyLinePlaceholder":1050},[1002,99442,99443],{"class":1004,"line":1956},[1002,99444,99445],{"class":1008},"\u002F\u002F Proxying a function object\n",[1002,99447,99448,99450,99453,99455,99457],{"class":1004,"line":1961},[1002,99449,18311],{"class":1015},[1002,99451,99452],{"class":1026}," target",[1002,99454,1023],{"class":1015},[1002,99456,8457],{"class":1015},[1002,99458,9772],{"class":1030},[1002,99460,99461,99463,99466],{"class":1004,"line":1971},[1002,99462,15066],{"class":1015},[1002,99464,99465],{"class":1034}," 'I am the target'",[1002,99467,1407],{"class":1030},[1002,99469,99470],{"class":1004,"line":1980},[1002,99471,1517],{"class":1030},[1002,99473,99474,99476,99478,99480],{"class":1004,"line":1985},[1002,99475,18311],{"class":1015},[1002,99477,99363],{"class":1030},[1002,99479,2393],{"class":1015},[1002,99481,1457],{"class":1030},[1002,99483,99484,99487,99489,99491,99493,99495,99497,99499,99501],{"class":1004,"line":1995},[1002,99485,99486],{"class":1026}," apply",[1002,99488,1137],{"class":1030},[1002,99490,6965],{"class":1015},[1002,99492,6513],{"class":1030},[1002,99494,99380],{"class":2378},[1002,99496,1251],{"class":1030},[1002,99498,17625],{"class":1015},[1002,99500,17628],{"class":2378},[1002,99502,2382],{"class":1030},[1002,99504,99505,99507,99510],{"class":1004,"line":2006},[1002,99506,2687],{"class":1015},[1002,99508,99509],{"class":1034}," 'I am the proxy'",[1002,99511,1407],{"class":1030},[1002,99513,99514],{"class":1004,"line":2011},[1002,99515,1502],{"class":1030},[1002,99517,99518],{"class":1004,"line":2017},[1002,99519,1517],{"class":1030},[1002,99521,99522],{"class":1004,"line":2022},[1002,99523,1051],{"emptyLinePlaceholder":1050},[1002,99525,99526,99528,99530,99532,99534,99536],{"class":1004,"line":2442},[1002,99527,18311],{"class":1015},[1002,99529,99415],{"class":1030},[1002,99531,2393],{"class":1015},[1002,99533,2690],{"class":1015},[1002,99535,99422],{"class":1026},[1002,99537,99425],{"class":1030},[1002,99539,99540,99542,99544,99546,99548],{"class":1004,"line":2466},[1002,99541,925],{"class":1026},[1002,99543,10191],{"class":1030},[1002,99545,2892],{"class":1015},[1002,99547,99509],{"class":1034},[1002,99549,1407],{"class":1030},[953,99551,99553],{"id":99552},"methods-of-handler-object","Methods of handler object",[925,99555,99556],{},"The handler object is a placeholder object which contains traps for Proxy.",[7100,99558,99560],{"title":99559,"type":24048},"Traps",[925,99561,99562],{},"All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.",[925,99564,99565],{},"Here are the methods of handler object:",[1530,99567,99568,99571,99574,99577,99580,99583,99586,99589,99591,99594,99597,99600,99603,99606],{},[974,99569,99570],{},"getPrototypeOf()",[974,99572,99573],{},"setPrototypeOf()",[974,99575,99576],{},"isExtensible()",[974,99578,99579],{},"preventExtensions()",[974,99581,99582],{},"getOwnPropertyDescriptor()",[974,99584,99585],{},"defineProperty()",[974,99587,99588],{},"has()",[974,99590,46793],{},[974,99592,99593],{},"set()",[974,99595,99596],{},"deleteProperty()",[974,99598,99599],{},"enumerate()",[974,99601,99602],{},"ownKeys()",[974,99604,99605],{},"apply()",[974,99607,99605],{},[925,99609,99610],{},"Here's another example that sets a property using proxy.",[993,99612,99614],{"className":995,"code":99613,"language":997,"meta":998,"style":998},"var student = { name: 'John Smith', age: 16 };\n\nvar interceptor = {\n set: function (receiver, property, value) {\n console.log(property, 'is changed to', value);\n receiver[property] = value;\n },\n};\n\nstudent = Proxy(student, interceptor);\n\nstudent.age = 17; \u002F\u002F age is changed to 17\n",[941,99615,99616,99639,99643,99654,99676,99691,99700,99704,99708,99712,99724,99728],{"__ignoreMap":998},[1002,99617,99618,99620,99623,99625,99628,99631,99634,99637],{"class":1004,"line":1005},[1002,99619,18311],{"class":1015},[1002,99621,99622],{"class":1030}," student ",[1002,99624,2393],{"class":1015},[1002,99626,99627],{"class":1030}," { name: ",[1002,99629,99630],{"class":1034},"'John Smith'",[1002,99632,99633],{"class":1030},", age: ",[1002,99635,99636],{"class":1019},"16",[1002,99638,9444],{"class":1030},[1002,99640,99641],{"class":1004,"line":1012},[1002,99642,1051],{"emptyLinePlaceholder":1050},[1002,99644,99645,99647,99650,99652],{"class":1004,"line":1047},[1002,99646,18311],{"class":1015},[1002,99648,99649],{"class":1030}," interceptor ",[1002,99651,2393],{"class":1015},[1002,99653,1457],{"class":1030},[1002,99655,99656,99658,99660,99662,99664,99666,99668,99670,99672,99674],{"class":1004,"line":1054},[1002,99657,96327],{"class":1026},[1002,99659,1137],{"class":1030},[1002,99661,6965],{"class":1015},[1002,99663,6513],{"class":1030},[1002,99665,99380],{"class":2378},[1002,99667,1251],{"class":1030},[1002,99669,17028],{"class":2378},[1002,99671,1251],{"class":1030},[1002,99673,5047],{"class":2378},[1002,99675,2382],{"class":1030},[1002,99677,99678,99680,99682,99685,99688],{"class":1004,"line":1060},[1002,99679,3030],{"class":1030},[1002,99681,2886],{"class":1026},[1002,99683,99684],{"class":1030},"(property, ",[1002,99686,99687],{"class":1034},"'is changed to'",[1002,99689,99690],{"class":1030},", value);\n",[1002,99692,99693,99696,99698],{"class":1004,"line":1272},[1002,99694,99695],{"class":1030}," receiver[property] ",[1002,99697,2393],{"class":1015},[1002,99699,5067],{"class":1030},[1002,99701,99702],{"class":1004,"line":1348},[1002,99703,1502],{"class":1030},[1002,99705,99706],{"class":1004,"line":1354},[1002,99707,1517],{"class":1030},[1002,99709,99710],{"class":1004,"line":1360},[1002,99711,1051],{"emptyLinePlaceholder":1050},[1002,99713,99714,99717,99719,99721],{"class":1004,"line":1366},[1002,99715,99716],{"class":1030},"student ",[1002,99718,2393],{"class":1015},[1002,99720,99422],{"class":1026},[1002,99722,99723],{"class":1030},"(student, interceptor);\n",[1002,99725,99726],{"class":1004,"line":1946},[1002,99727,1051],{"emptyLinePlaceholder":1050},[1002,99729,99730,99733,99735,99738,99740],{"class":1004,"line":1956},[1002,99731,99732],{"class":1030},"student.age ",[1002,99734,2393],{"class":1015},[1002,99736,99737],{"class":1019}," 17",[1002,99739,17938],{"class":1030},[1002,99741,99742],{"class":1008},"\u002F\u002F age is changed to 17\n",[925,99744,99745,99746,99749,99750,99753,99754],{},"Here the ",[941,99747,99748],{},"intercepter"," is the handler, which is the second parameter. The ",[941,99751,99752],{},"student"," object has been replaced by the another one as the result of installing proxy via ",[941,99755,99756],{},"Proxy()",[925,99758,99759],{},"Beside for debugging purposes, proxy can be helpful for libraries which implement data binding. Because a handler can be hooked to the data model, there is no need to use an alternative syntax (e.g. explicit set to change a value) or to continuously track the change (e.g. dirty state) to modify the model.",[1579,99761,99762],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":99764},[99765],{"id":99552,"depth":1012,"text":99553},"2015-07-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Fproxies.jpg",{},{"title":636,"description":638},"blog\u002Fproxies",[16,17],"IKOf03-rIf7zkLKIFb0-wP7h81ccxEoAES3SBoZKMxA",{"id":99774,"title":31,"author":920,"body":99775,"date":100300,"description":33,"extension":1591,"image":100301,"meta":100302,"navigation":1050,"path":32,"seo":100303,"stem":100304,"tags":100305,"__hash__":100306},"blog\u002Fblog\u002Farray-comprehensions.md",{"type":922,"value":99776,"toc":100295},[99777,99780,99787,99793,99797,99800,99890,99897,99973,99977,99985,100051,100060,100064,100072,100158,100164,100167,100283,100292],[925,99778,99779],{},"Comprehension prevents us from using manual iteration which is error-prone and tedious.",[925,99781,99782,99783,2034,99785,98006],{},"JavaScript(ES5) already has similar built-in ",[941,99784,19444],{},[941,99786,8313],{},[7100,99788,99790],{"title":99789,"type":24048},"Map & Filter",[925,99791,99792],{},"Best way to understand Array comprehensions is by comparing it with map and filter functions.",[953,99794,99796],{"id":99795},"arrayprototypemap","Array.prototype.map",[925,99798,99799],{},"This built-in function returns a new array which is the result of applying a callback function.",[993,99801,99803],{"className":995,"code":99802,"language":997,"meta":998,"style":998},"[1, 2, 3].map(function (i) {\n return i * i;\n}); \u002F\u002F [1, 4, 9]\n\n[100, 012, 8000].map(String).join('-'); \u002F\u002F \"100-012-8000\"\n",[941,99804,99805,99833,99844,99851,99855],{"__ignoreMap":998},[1002,99806,99807,99809,99811,99813,99815,99817,99819,99821,99823,99825,99827,99829,99831],{"class":1004,"line":1005},[1002,99808,31462],{"class":1030},[1002,99810,6211],{"class":1019},[1002,99812,1251],{"class":1030},[1002,99814,5681],{"class":1019},[1002,99816,1251],{"class":1030},[1002,99818,2796],{"class":1019},[1002,99820,38716],{"class":1030},[1002,99822,19444],{"class":1026},[1002,99824,1031],{"class":1030},[1002,99826,6965],{"class":1015},[1002,99828,6513],{"class":1030},[1002,99830,12031],{"class":2378},[1002,99832,2382],{"class":1030},[1002,99834,99835,99837,99839,99841],{"class":1004,"line":1012},[1002,99836,15066],{"class":1015},[1002,99838,6519],{"class":1030},[1002,99840,4703],{"class":1015},[1002,99842,99843],{"class":1030}," i;\n",[1002,99845,99846,99848],{"class":1004,"line":1047},[1002,99847,50624],{"class":1030},[1002,99849,99850],{"class":1008},"\u002F\u002F [1, 4, 9]\n",[1002,99852,99853],{"class":1004,"line":1054},[1002,99854,1051],{"emptyLinePlaceholder":1050},[1002,99856,99857,99859,99861,99863,99866,99868,99871,99873,99875,99878,99880,99882,99885,99887],{"class":1004,"line":1060},[1002,99858,31462],{"class":1030},[1002,99860,4791],{"class":1019},[1002,99862,1251],{"class":1030},[1002,99864,99865],{"class":1019},"012",[1002,99867,1251],{"class":1030},[1002,99869,99870],{"class":1019},"8000",[1002,99872,38716],{"class":1030},[1002,99874,19444],{"class":1026},[1002,99876,99877],{"class":1030},"(String).",[1002,99879,7504],{"class":1026},[1002,99881,1031],{"class":1030},[1002,99883,99884],{"class":1034},"'-'",[1002,99886,18256],{"class":1030},[1002,99888,99889],{"class":1008},"\u002F\u002F \"100-012-8000\"\n",[925,99891,99892,99893,99896],{},"We could create an array with ",[941,99894,99895],{},"Number"," in-built function.",[993,99898,99900],{"className":995,"code":99899,"language":997,"meta":998,"style":998},"Array.apply(null, Array(5)).map(Function.prototype.call.bind(Number)); \u002F\u002F [0, 1, 2, 3, 4]\n\nArray.apply(null, { length: 5 }).map(Number.call, Number); \u002F\u002F [0, 1, 2, 3, 4]\n",[941,99901,99902,99944,99948],{"__ignoreMap":998},[1002,99903,99904,99907,99909,99911,99913,99915,99917,99919,99921,99923,99925,99927,99929,99931,99933,99936,99938,99941],{"class":1004,"line":1005},[1002,99905,99906],{"class":1030},"Array.",[1002,99908,17677],{"class":1026},[1002,99910,1031],{"class":1030},[1002,99912,26077],{"class":1019},[1002,99914,1251],{"class":1030},[1002,99916,12121],{"class":1026},[1002,99918,1031],{"class":1030},[1002,99920,2859],{"class":1019},[1002,99922,21297],{"class":1030},[1002,99924,19444],{"class":1026},[1002,99926,1031],{"class":1030},[1002,99928,98014],{"class":1019},[1002,99930,948],{"class":1030},[1002,99932,3894],{"class":1019},[1002,99934,99935],{"class":1030},".call.",[1002,99937,73659],{"class":1026},[1002,99939,99940],{"class":1030},"(Number)); ",[1002,99942,99943],{"class":1008},"\u002F\u002F [0, 1, 2, 3, 4]\n",[1002,99945,99946],{"class":1004,"line":1012},[1002,99947,1051],{"emptyLinePlaceholder":1050},[1002,99949,99950,99952,99954,99956,99958,99961,99963,99966,99968,99971],{"class":1004,"line":1047},[1002,99951,99906],{"class":1030},[1002,99953,17677],{"class":1026},[1002,99955,1031],{"class":1030},[1002,99957,26077],{"class":1019},[1002,99959,99960],{"class":1030},", { length: ",[1002,99962,2859],{"class":1019},[1002,99964,99965],{"class":1030}," }).",[1002,99967,19444],{"class":1026},[1002,99969,99970],{"class":1030},"(Number.call, Number); ",[1002,99972,99943],{"class":1008},[953,99974,99976],{"id":99975},"arrayprototypefilter","Array.prototype.filter",[925,99978,99979,99980,16529,99982,99984],{},"This function lets you ",[941,99981,43818],{},[941,99983,62084],{}," some entries of the array based on some certain criteria.",[993,99986,99988],{"className":995,"code":99987,"language":997,"meta":998,"style":998},"[1, 0, 2, 4, -8, 6].filter(function (i) {\n return i \u003C 3;\n}); \u002F\u002F [1, 0, 2, -8]\n",[941,99989,99990,100032,100044],{"__ignoreMap":998},[1002,99991,99992,99994,99996,99998,100000,100002,100004,100006,100008,100010,100012,100014,100016,100018,100020,100022,100024,100026,100028,100030],{"class":1004,"line":1005},[1002,99993,31462],{"class":1030},[1002,99995,6211],{"class":1019},[1002,99997,1251],{"class":1030},[1002,99999,5867],{"class":1019},[1002,100001,1251],{"class":1030},[1002,100003,5681],{"class":1019},[1002,100005,1251],{"class":1030},[1002,100007,3837],{"class":1019},[1002,100009,1251],{"class":1030},[1002,100011,5101],{"class":1015},[1002,100013,31435],{"class":1019},[1002,100015,1251],{"class":1030},[1002,100017,51334],{"class":1019},[1002,100019,38716],{"class":1030},[1002,100021,8313],{"class":1026},[1002,100023,1031],{"class":1030},[1002,100025,6965],{"class":1015},[1002,100027,6513],{"class":1030},[1002,100029,12031],{"class":2378},[1002,100031,2382],{"class":1030},[1002,100033,100034,100036,100038,100040,100042],{"class":1004,"line":1012},[1002,100035,15066],{"class":1015},[1002,100037,6519],{"class":1030},[1002,100039,6539],{"class":1015},[1002,100041,17813],{"class":1019},[1002,100043,1407],{"class":1030},[1002,100045,100046,100048],{"class":1004,"line":1047},[1002,100047,50624],{"class":1030},[1002,100049,100050],{"class":1008},"\u002F\u002F [1, 0, 2, -8]\n",[7100,100052,100054],{"title":100053,"type":24048},"Filters in practice",[925,100055,100056,100057,100059],{},"Practical\u002Freal world implementations of ",[941,100058,47074],{}," can be - find the students who have passed a course.",[953,100061,100063],{"id":100062},"array-comprehension-in-es6","Array Comprehension in ES6",[925,100065,100066,100067,2034,100069,100071],{},"Part of Firefox but not available in ES5, array comprehensation is now officially a part of ES6.\nEasiest way to understand Array Comprehension is by comparing it with ",[941,100068,19444],{},[941,100070,8313],{},".\nLet's take the previous map example.",[993,100073,100075],{"className":995,"code":100074,"language":997,"meta":998,"style":998},"[1, 2, 3].map(function (i) {\n return i * i;\n}); \u002F\u002F [1, 4, 9]\n\n[for(i of [1, 2, 3]) i * i]; \u002F\u002F [1, 4, 9]\n",[941,100076,100077,100105,100115,100121,100125],{"__ignoreMap":998},[1002,100078,100079,100081,100083,100085,100087,100089,100091,100093,100095,100097,100099,100101,100103],{"class":1004,"line":1005},[1002,100080,31462],{"class":1030},[1002,100082,6211],{"class":1019},[1002,100084,1251],{"class":1030},[1002,100086,5681],{"class":1019},[1002,100088,1251],{"class":1030},[1002,100090,2796],{"class":1019},[1002,100092,38716],{"class":1030},[1002,100094,19444],{"class":1026},[1002,100096,1031],{"class":1030},[1002,100098,6965],{"class":1015},[1002,100100,6513],{"class":1030},[1002,100102,12031],{"class":2378},[1002,100104,2382],{"class":1030},[1002,100106,100107,100109,100111,100113],{"class":1004,"line":1012},[1002,100108,15066],{"class":1015},[1002,100110,6519],{"class":1030},[1002,100112,4703],{"class":1015},[1002,100114,99843],{"class":1030},[1002,100116,100117,100119],{"class":1004,"line":1047},[1002,100118,50624],{"class":1030},[1002,100120,99850],{"class":1008},[1002,100122,100123],{"class":1004,"line":1054},[1002,100124,1051],{"emptyLinePlaceholder":1050},[1002,100126,100127,100129,100131,100134,100136,100138,100140,100142,100144,100146,100148,100151,100153,100156],{"class":1004,"line":1060},[1002,100128,31462],{"class":1030},[1002,100130,6510],{"class":1026},[1002,100132,100133],{"class":1030},"(i ",[1002,100135,39708],{"class":1015},[1002,100137,1897],{"class":1030},[1002,100139,6211],{"class":1019},[1002,100141,1251],{"class":1030},[1002,100143,5681],{"class":1019},[1002,100145,1251],{"class":1030},[1002,100147,2796],{"class":1019},[1002,100149,100150],{"class":1030},"]) i ",[1002,100152,4703],{"class":1015},[1002,100154,100155],{"class":1030}," i]; ",[1002,100157,99850],{"class":1008},[925,100159,100160,100161,100163],{},"Here array comprehension uses ",[941,100162,39708],{}," clause to iterate the sequence of the array.",[925,100165,100166],{},"Filtering using array comprehension is straightforward.",[993,100168,100170],{"className":995,"code":100169,"language":997,"meta":998,"style":998},"[1,0,2,4,-8,6].filter(function(i) {\n return i \u003C 3\n}); \u002F\u002F [1, 0, 2, -8]\n\n[for (i of [1,0,2,4,-8,6]) if(i \u003C 3)];\n",[941,100171,100172,100214,100225,100231,100235],{"__ignoreMap":998},[1002,100173,100174,100176,100178,100180,100182,100184,100186,100188,100190,100192,100194,100196,100198,100200,100202,100204,100206,100208,100210,100212],{"class":1004,"line":1005},[1002,100175,31462],{"class":1030},[1002,100177,6211],{"class":1019},[1002,100179,15314],{"class":1030},[1002,100181,5867],{"class":1019},[1002,100183,15314],{"class":1030},[1002,100185,5681],{"class":1019},[1002,100187,15314],{"class":1030},[1002,100189,3837],{"class":1019},[1002,100191,15314],{"class":1030},[1002,100193,5101],{"class":1015},[1002,100195,31435],{"class":1019},[1002,100197,15314],{"class":1030},[1002,100199,51334],{"class":1019},[1002,100201,38716],{"class":1030},[1002,100203,8313],{"class":1026},[1002,100205,1031],{"class":1030},[1002,100207,6965],{"class":1015},[1002,100209,1031],{"class":1030},[1002,100211,12031],{"class":2378},[1002,100213,2382],{"class":1030},[1002,100215,100216,100218,100220,100222],{"class":1004,"line":1012},[1002,100217,15066],{"class":1015},[1002,100219,6519],{"class":1030},[1002,100221,6539],{"class":1015},[1002,100223,100224],{"class":1019}," 3\n",[1002,100226,100227,100229],{"class":1004,"line":1047},[1002,100228,50624],{"class":1030},[1002,100230,100050],{"class":1008},[1002,100232,100233],{"class":1004,"line":1054},[1002,100234,1051],{"emptyLinePlaceholder":1050},[1002,100236,100237,100239,100241,100243,100245,100247,100249,100251,100253,100255,100257,100259,100261,100263,100265,100267,100269,100271,100273,100275,100277,100279,100281],{"class":1004,"line":1060},[1002,100238,31462],{"class":1030},[1002,100240,6510],{"class":1026},[1002,100242,44863],{"class":1030},[1002,100244,39708],{"class":1015},[1002,100246,1897],{"class":1030},[1002,100248,6211],{"class":1019},[1002,100250,15314],{"class":1030},[1002,100252,5867],{"class":1019},[1002,100254,15314],{"class":1030},[1002,100256,5681],{"class":1019},[1002,100258,15314],{"class":1030},[1002,100260,3837],{"class":1019},[1002,100262,15314],{"class":1030},[1002,100264,5101],{"class":1015},[1002,100266,31435],{"class":1019},[1002,100268,15314],{"class":1030},[1002,100270,51334],{"class":1019},[1002,100272,32184],{"class":1030},[1002,100274,46126],{"class":1026},[1002,100276,100133],{"class":1030},[1002,100278,6539],{"class":1015},[1002,100280,17813],{"class":1019},[1002,100282,70725],{"class":1030},[925,100284,100285,100286,100288,100289,100291],{},"As you can see, ",[941,100287,46126],{}," operates as the ",[1107,100290,8313],{},"\" to produce the sequence we need.",[1579,100293,100294],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":100296},[100297,100298,100299],{"id":99795,"depth":1012,"text":99796},{"id":99975,"depth":1012,"text":99976},{"id":100062,"depth":1012,"text":100063},"2015-07-22","\u002Fimages\u002Fblog\u002Ffeatures\u002Farray-comprehensions.jpg",{},{"title":31,"description":33},"blog\u002Farray-comprehensions",[16,17],"GH4OR2t3TKz2fj5wWBlHf2lgatLSJoW4Xw-PNrSrWr4",{"id":100308,"title":631,"author":920,"body":100309,"date":100788,"description":633,"extension":1591,"image":100789,"meta":100790,"navigation":1050,"path":632,"seo":100791,"stem":100792,"tags":100793,"__hash__":100794},"blog\u002Fblog\u002Fproper-tail-calls.md",{"type":922,"value":100310,"toc":100785},[100311,100318,100442,100452,100782],[925,100312,100313,100314,100317],{},"The process of one function calling another may end up creating a new ",[941,100315,100316],{},"stack frame",", if the first function returns a result to the second.",[993,100319,100321],{"className":995,"code":100320,"language":997,"meta":998,"style":998},"function factorial(n) {\n function recur(n, acc) {\n if (n === 0) {\n return acc;\n } else {\n return recur(n - 1, n * acc);\n }\n }\n return recur(n, 1);\n}\n\nfactorial(100000);\n",[941,100322,100323,100336,100354,100367,100374,100382,100402,100406,100410,100423,100427,100431],{"__ignoreMap":998},[1002,100324,100325,100327,100330,100332,100334],{"class":1004,"line":1005},[1002,100326,6965],{"class":1015},[1002,100328,100329],{"class":1026}," factorial",[1002,100331,1031],{"class":1030},[1002,100333,25415],{"class":2378},[1002,100335,2382],{"class":1030},[1002,100337,100338,100340,100343,100345,100347,100349,100352],{"class":1004,"line":1012},[1002,100339,18965],{"class":1015},[1002,100341,100342],{"class":1026}," recur",[1002,100344,1031],{"class":1030},[1002,100346,25415],{"class":2378},[1002,100348,1251],{"class":1030},[1002,100350,100351],{"class":2378},"acc",[1002,100353,2382],{"class":1030},[1002,100355,100356,100358,100361,100363,100365],{"class":1004,"line":1047},[1002,100357,4368],{"class":1015},[1002,100359,100360],{"class":1030}," (n ",[1002,100362,2892],{"class":1015},[1002,100364,4910],{"class":1019},[1002,100366,2382],{"class":1030},[1002,100368,100369,100371],{"class":1004,"line":1054},[1002,100370,4376],{"class":1015},[1002,100372,100373],{"class":1030}," acc;\n",[1002,100375,100376,100378,100380],{"class":1004,"line":1060},[1002,100377,6057],{"class":1030},[1002,100379,6060],{"class":1015},[1002,100381,1457],{"class":1030},[1002,100383,100384,100386,100388,100390,100392,100394,100397,100399],{"class":1004,"line":1272},[1002,100385,4376],{"class":1015},[1002,100387,100342],{"class":1026},[1002,100389,76786],{"class":1030},[1002,100391,5101],{"class":1015},[1002,100393,6246],{"class":1019},[1002,100395,100396],{"class":1030},", n ",[1002,100398,4703],{"class":1015},[1002,100400,100401],{"class":1030}," acc);\n",[1002,100403,100404],{"class":1004,"line":1348},[1002,100405,2014],{"class":1030},[1002,100407,100408],{"class":1004,"line":1354},[1002,100409,1269],{"class":1030},[1002,100411,100412,100414,100416,100419,100421],{"class":1004,"line":1360},[1002,100413,15066],{"class":1015},[1002,100415,100342],{"class":1026},[1002,100417,100418],{"class":1030},"(n, ",[1002,100420,6211],{"class":1019},[1002,100422,1085],{"class":1030},[1002,100424,100425],{"class":1004,"line":1366},[1002,100426,1170],{"class":1030},[1002,100428,100429],{"class":1004,"line":1946},[1002,100430,1051],{"emptyLinePlaceholder":1050},[1002,100432,100433,100436,100438,100440],{"class":1004,"line":1956},[1002,100434,100435],{"class":1026},"factorial",[1002,100437,1031],{"class":1030},[1002,100439,10291],{"class":1019},[1002,100441,1085],{"class":1030},[925,100443,100444,100445,100447,100448,100451],{},"After ",[1107,100446,100435],{}," calls ",[1107,100449,100450],{},"recur",", it has nothing else to do. In such situations, the program does not need to return to the calling function when the called function ends. Therefore, after the tail call, the program does not need to keep any information about the calling function in the stack.\nES6 takes advantage of this fact and actually do not use any extra stack space when doing a tail call. We say that those implementations support proper tail calls (PTC).",[7100,100453,100455,100458,100463,100466,100517,100521,100527,100562,100573,100626,100629,100676,100686,100693,100771,100779],{"title":100454,"type":24048},"Tail call & tail-recursive",[925,100456,100457],{},"In computer science, a tail call is a subroutine call performed as the final action of a procedure. If a tail call might lead to the same subroutine being called again later in the call chain, the subroutine is said to be tail-recursive, which is a special case of recursion.",[1530,100459,100460],{},[974,100461,100462],{},"Wikipedia\n::",[925,100464,100465],{},"Because a proper tail call uses no stack space, there is no limit on the number of \"nested\" tail calls that a program can make. For instance, we can call the following function with any number as argument; it will never overflow the stack:",[993,100467,100469],{"className":995,"code":100468,"language":997,"meta":998,"style":998},"function foo(n) {\n if (n > 0) {\n return foo(n - 1);\n }\n}\n",[941,100470,100471,100483,100495,100509,100513],{"__ignoreMap":998},[1002,100472,100473,100475,100477,100479,100481],{"class":1004,"line":1005},[1002,100474,6965],{"class":1015},[1002,100476,34640],{"class":1026},[1002,100478,1031],{"class":1030},[1002,100480,25415],{"class":2378},[1002,100482,2382],{"class":1030},[1002,100484,100485,100487,100489,100491,100493],{"class":1004,"line":1012},[1002,100486,19971],{"class":1015},[1002,100488,100360],{"class":1030},[1002,100490,19171],{"class":1015},[1002,100492,4910],{"class":1019},[1002,100494,2382],{"class":1030},[1002,100496,100497,100499,100501,100503,100505,100507],{"class":1004,"line":1047},[1002,100498,2687],{"class":1015},[1002,100500,34640],{"class":1026},[1002,100502,76786],{"class":1030},[1002,100504,5101],{"class":1015},[1002,100506,6246],{"class":1019},[1002,100508,1085],{"class":1030},[1002,100510,100511],{"class":1004,"line":1054},[1002,100512,1269],{"class":1030},[1002,100514,100515],{"class":1004,"line":1060},[1002,100516,1170],{"class":1030},[953,100518,100520],{"id":100519},"what-qualifies-to-be-a-tail-call","What qualifies to be a tail call?",[925,100522,100523,100524,100526],{},"A subtle point when we use proper tail calls is what is a tail call. Some obvious candidates fail the criteria that the calling function has nothing to do after the call. For instance, in the following code, the call to ",[1107,100525,30895],{}," is not a tail call:",[993,100528,100530],{"className":995,"code":100529,"language":997,"meta":998,"style":998},"function foo(n) {\n bar(n);\n return;\n}\n",[941,100531,100532,100544,100552,100558],{"__ignoreMap":998},[1002,100533,100534,100536,100538,100540,100542],{"class":1004,"line":1005},[1002,100535,6965],{"class":1015},[1002,100537,34640],{"class":1026},[1002,100539,1031],{"class":1030},[1002,100541,25415],{"class":2378},[1002,100543,2382],{"class":1030},[1002,100545,100546,100549],{"class":1004,"line":1012},[1002,100547,100548],{"class":1026}," bar",[1002,100550,100551],{"class":1030},"(n);\n",[1002,100553,100554,100556],{"class":1004,"line":1047},[1002,100555,15066],{"class":1015},[1002,100557,1407],{"class":1030},[1002,100559,100560],{"class":1004,"line":1054},[1002,100561,1170],{"class":1030},[925,100563,100564,100565,1251,100567,100569,100570,100572],{},"The problem in that example is that, after calling ",[1107,100566,30895],{},[1107,100568,16521],{}," still has to discard occasional results from ",[1107,100571,30895],{}," before returning. Similarly, all the following calls fail the criteria:",[993,100574,100576],{"className":995,"code":100575,"language":997,"meta":998,"style":998},"return bar(n) + 1; \u002F\u002F must do the addition\nreturn n || bar(n); \u002F\u002F must adjust to 1 result\nreturn n && bar(n); \u002F\u002F must adjust to 1 result\n",[941,100577,100578,100596,100612],{"__ignoreMap":998},[1002,100579,100580,100582,100584,100587,100589,100591,100593],{"class":1004,"line":1005},[1002,100581,8975],{"class":1015},[1002,100583,38219],{"class":1026},[1002,100585,100586],{"class":1030},"(n) ",[1002,100588,5064],{"class":1015},[1002,100590,6246],{"class":1019},[1002,100592,17938],{"class":1030},[1002,100594,100595],{"class":1008},"\u002F\u002F must do the addition\n",[1002,100597,100598,100600,100602,100604,100606,100609],{"class":1004,"line":1012},[1002,100599,8975],{"class":1015},[1002,100601,39192],{"class":1030},[1002,100603,8392],{"class":1015},[1002,100605,38219],{"class":1026},[1002,100607,100608],{"class":1030},"(n); ",[1002,100610,100611],{"class":1008},"\u002F\u002F must adjust to 1 result\n",[1002,100613,100614,100616,100618,100620,100622,100624],{"class":1004,"line":1047},[1002,100615,8975],{"class":1015},[1002,100617,39192],{"class":1030},[1002,100619,13133],{"class":1015},[1002,100621,38219],{"class":1026},[1002,100623,100608],{"class":1030},[1002,100625,100611],{"class":1008},[925,100627,100628],{},"Here is another scenario:",[993,100630,100632],{"className":995,"code":100631,"language":997,"meta":998,"style":998},"function sum(...values) {\n return values.shift() + sum(...values);\n}\n",[941,100633,100634,100649,100672],{"__ignoreMap":998},[1002,100635,100636,100638,100640,100642,100644,100647],{"class":1004,"line":1005},[1002,100637,6965],{"class":1015},[1002,100639,85421],{"class":1026},[1002,100641,1031],{"class":1030},[1002,100643,17625],{"class":1015},[1002,100645,100646],{"class":2378},"values",[1002,100648,2382],{"class":1030},[1002,100650,100651,100653,100656,100659,100661,100663,100665,100667,100669],{"class":1004,"line":1012},[1002,100652,15066],{"class":1015},[1002,100654,100655],{"class":1030}," values.",[1002,100657,100658],{"class":1026},"shift",[1002,100660,10191],{"class":1030},[1002,100662,5064],{"class":1015},[1002,100664,85421],{"class":1026},[1002,100666,1031],{"class":1030},[1002,100668,17625],{"class":1015},[1002,100670,100671],{"class":1030},"values);\n",[1002,100673,100674],{"class":1004,"line":1047},[1002,100675,1170],{"class":1030},[925,100677,100678,100679,100681,100682,100685],{},"In the above scenario ",[941,100680,5064],{}," operation is executed ",[941,100683,100684],{},"after"," the recursive call, which disqualifies it to be a proper tail call (PTC).",[925,100687,100688,100689,100692],{},"To change the above function to make a proper tail call, introduce a helper function with an ",[941,100690,100691],{},"accumulator"," parameter.",[993,100694,100696],{"className":995,"code":100695,"language":997,"meta":998,"style":998},"function sum(...values) {\n function sumTo(acc, values) {\n return sumTo(acc + values.shift(), values); \u002F\u002F tail-recursive call\n }\n return sumTo(0, values);\n}\n",[941,100697,100698,100712,100729,100750,100754,100767],{"__ignoreMap":998},[1002,100699,100700,100702,100704,100706,100708,100710],{"class":1004,"line":1005},[1002,100701,6965],{"class":1015},[1002,100703,85421],{"class":1026},[1002,100705,1031],{"class":1030},[1002,100707,17625],{"class":1015},[1002,100709,100646],{"class":2378},[1002,100711,2382],{"class":1030},[1002,100713,100714,100716,100719,100721,100723,100725,100727],{"class":1004,"line":1012},[1002,100715,18965],{"class":1015},[1002,100717,100718],{"class":1026}," sumTo",[1002,100720,1031],{"class":1030},[1002,100722,100351],{"class":2378},[1002,100724,1251],{"class":1030},[1002,100726,100646],{"class":2378},[1002,100728,2382],{"class":1030},[1002,100730,100731,100733,100735,100738,100740,100742,100744,100747],{"class":1004,"line":1047},[1002,100732,2687],{"class":1015},[1002,100734,100718],{"class":1026},[1002,100736,100737],{"class":1030},"(acc ",[1002,100739,5064],{"class":1015},[1002,100741,100655],{"class":1030},[1002,100743,100658],{"class":1026},[1002,100745,100746],{"class":1030},"(), values); ",[1002,100748,100749],{"class":1008},"\u002F\u002F tail-recursive call\n",[1002,100751,100752],{"class":1004,"line":1054},[1002,100753,1269],{"class":1030},[1002,100755,100756,100758,100760,100762,100764],{"class":1004,"line":1060},[1002,100757,15066],{"class":1015},[1002,100759,100718],{"class":1026},[1002,100761,1031],{"class":1030},[1002,100763,5867],{"class":1019},[1002,100765,100766],{"class":1030},", values);\n",[1002,100768,100769],{"class":1004,"line":1272},[1002,100770,1170],{"class":1030},[7100,100772,100774],{"title":100773,"type":24048},"Currying",[925,100775,100776,100777,948],{},"Calling a function within a function with different parameters is called ",[941,100778,38967],{},[925,100780,100781],{},"Without proper tail calls, each user move would create a new stack level. After some number of moves, there would be a stack overflow. With proper tail calls, there is no limit to the number of moves that a user can make, because each move actually performs a goto to another function, not a conventional call.",[1579,100783,100784],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":100786},[100787],{"id":100519,"depth":1012,"text":100520},"2015-07-21","\u002Fimages\u002Fblog\u002Ffeatures\u002Fproper-tail-calls.jpg",{},{"title":631,"description":633},"blog\u002Fproper-tail-calls",[16,17],"7RGgymw-RyhqY25138yaRO1Uu4GptWxeNUUud77IUWU",{"id":100796,"title":191,"author":920,"body":100797,"date":102457,"description":193,"extension":1591,"image":102458,"meta":102459,"navigation":1050,"path":192,"seo":102460,"stem":102461,"tags":102462,"__hash__":102463},"blog\u002Fblog\u002Fes6-advanced-features.md",{"type":922,"value":100798,"toc":102445},[100799,100802,100805,100903,100906,100909,100915,100918,100935,100940,101058,101062,101069,101073,101250,101254,101257,101270,101280,101393,101397,101400,101417,101427,101587,101591,101604,101609,101708,101713,101805,101814,101891,101896,101907,101911,101923,101931,102066,102070,102078,102115,102119,102122,102125,102147,102313,102317,102328,102442],[953,100800,82667],{"id":100801},"enhanced-object-literals",[925,100803,100804],{},"ES6 introduces new features for setting the prototype at contruction.",[993,100806,100808],{"className":995,"code":100807,"language":997,"meta":998,"style":998},"var foo = {\n \u002F\u002F dunder proto\n __proto__: proto,\n \u002F\u002F Shorthand for 'bar: bar'\n bar,\n \u002F\u002F methods\n foobar() {\n \u002F\u002F Super calls\n return 'foo' + super.bar();\n },\n \u002F\u002F Computed (dynamic) property names\n ['prop_' + (() => bar)()]: bar,\n};\n",[941,100809,100810,100820,100825,100830,100835,100840,100845,100852,100857,100873,100877,100882,100899],{"__ignoreMap":998},[1002,100811,100812,100814,100816,100818],{"class":1004,"line":1005},[1002,100813,18311],{"class":1015},[1002,100815,38379],{"class":1030},[1002,100817,2393],{"class":1015},[1002,100819,1457],{"class":1030},[1002,100821,100822],{"class":1004,"line":1012},[1002,100823,100824],{"class":1008}," \u002F\u002F dunder proto\n",[1002,100826,100827],{"class":1004,"line":1047},[1002,100828,100829],{"class":1030}," __proto__: proto,\n",[1002,100831,100832],{"class":1004,"line":1054},[1002,100833,100834],{"class":1008}," \u002F\u002F Shorthand for 'bar: bar'\n",[1002,100836,100837],{"class":1004,"line":1060},[1002,100838,100839],{"class":1030}," bar,\n",[1002,100841,100842],{"class":1004,"line":1272},[1002,100843,100844],{"class":1008}," \u002F\u002F methods\n",[1002,100846,100847,100850],{"class":1004,"line":1348},[1002,100848,100849],{"class":1026}," foobar",[1002,100851,3025],{"class":1030},[1002,100853,100854],{"class":1004,"line":1354},[1002,100855,100856],{"class":1008}," \u002F\u002F Super calls\n",[1002,100858,100859,100861,100863,100865,100867,100869,100871],{"class":1004,"line":1360},[1002,100860,2687],{"class":1015},[1002,100862,87067],{"class":1034},[1002,100864,6583],{"class":1015},[1002,100866,96536],{"class":1019},[1002,100868,948],{"class":1030},[1002,100870,30895],{"class":1026},[1002,100872,1428],{"class":1030},[1002,100874,100875],{"class":1004,"line":1366},[1002,100876,1502],{"class":1030},[1002,100878,100879],{"class":1004,"line":1946},[1002,100880,100881],{"class":1008}," \u002F\u002F Computed (dynamic) property names\n",[1002,100883,100884,100886,100889,100891,100894,100896],{"class":1004,"line":1956},[1002,100885,19317],{"class":1030},[1002,100887,100888],{"class":1034},"'prop_'",[1002,100890,6583],{"class":1015},[1002,100892,100893],{"class":1030}," (() ",[1002,100895,15497],{"class":1015},[1002,100897,100898],{"class":1030}," bar)()]: bar,\n",[1002,100900,100901],{"class":1004,"line":1961},[1002,100902,1517],{"class":1030},[953,100904,82679],{"id":100905},"template-strings",[925,100907,100908],{},"ES6 introduces template strings to improve the capabilities of JavaScript strings.",[7100,100910,100912],{"title":100911,"type":24048},"DSLs",[925,100913,100914],{},"This features will enable developers to define strings with domain-specific languages (DSLs).",[925,100916,100917],{},"Template strings will enable:",[1530,100919,100920,100923,100926,100929,100931,100933],{},[974,100921,100922],{},"Multiline strings without hacking",[974,100924,100925],{},"String tagging for safe HTML escaping",[974,100927,100928],{},"Localization",[974,100930,83737],{},[974,100932,83746],{},[974,100934,83749],{},[7100,100936,100937],{"title":34624,"type":24048},[925,100938,100939],{},"Template Strings use back-ticks.",[993,100941,100943],{"className":995,"code":100942,"language":997,"meta":998,"style":998},"\u002F\u002F basic single line string\n`Hello \"\\n\" how are you?`\n\u002F\u002F multiline strings\n`Hello\n how are you?.`;\n\n\u002F\u002F string interpolation\nvar name = 'Sally',\n time = 'today';\n\n`Hello ${name}, how are you ${time}?`;\n\n\u002F\u002F tagged templates\nfn`Hello ${name}! how are you ${today}!`;\n",[941,100944,100945,100950,100960,100965,100970,100977,100981,100986,100999,101011,101015,101031,101035,101040],{"__ignoreMap":998},[1002,100946,100947],{"class":1004,"line":1005},[1002,100948,100949],{"class":1008},"\u002F\u002F basic single line string\n",[1002,100951,100952,100955,100957],{"class":1004,"line":1012},[1002,100953,100954],{"class":1034},"`Hello \"",[1002,100956,4636],{"class":1019},[1002,100958,100959],{"class":1034},"\" how are you?`\n",[1002,100961,100962],{"class":1004,"line":1047},[1002,100963,100964],{"class":1008},"\u002F\u002F multiline strings\n",[1002,100966,100967],{"class":1004,"line":1054},[1002,100968,100969],{"class":1034},"`Hello\n",[1002,100971,100972,100975],{"class":1004,"line":1060},[1002,100973,100974],{"class":1034}," how are you?.`",[1002,100976,1407],{"class":1030},[1002,100978,100979],{"class":1004,"line":1272},[1002,100980,1051],{"emptyLinePlaceholder":1050},[1002,100982,100983],{"class":1004,"line":1348},[1002,100984,100985],{"class":1008},"\u002F\u002F string interpolation\n",[1002,100987,100988,100990,100992,100994,100997],{"class":1004,"line":1354},[1002,100989,18311],{"class":1015},[1002,100991,63010],{"class":1030},[1002,100993,2393],{"class":1015},[1002,100995,100996],{"class":1034}," 'Sally'",[1002,100998,1143],{"class":1030},[1002,101000,101001,101004,101006,101009],{"class":1004,"line":1360},[1002,101002,101003],{"class":1030}," time ",[1002,101005,2393],{"class":1015},[1002,101007,101008],{"class":1034}," 'today'",[1002,101010,1407],{"class":1030},[1002,101012,101013],{"class":1004,"line":1366},[1002,101014,1051],{"emptyLinePlaceholder":1050},[1002,101016,101017,101019,101021,101024,101026,101029],{"class":1004,"line":1946},[1002,101018,84026],{"class":1034},[1002,101020,5911],{"class":1030},[1002,101022,101023],{"class":1034},"}, how are you ${",[1002,101025,44960],{"class":1030},[1002,101027,101028],{"class":1034},"}?`",[1002,101030,1407],{"class":1030},[1002,101032,101033],{"class":1004,"line":1956},[1002,101034,1051],{"emptyLinePlaceholder":1050},[1002,101036,101037],{"class":1004,"line":1961},[1002,101038,101039],{"class":1008},"\u002F\u002F tagged templates\n",[1002,101041,101042,101044,101046,101048,101051,101054,101056],{"class":1004,"line":1971},[1002,101043,8265],{"class":1026},[1002,101045,84026],{"class":1034},[1002,101047,5911],{"class":1030},[1002,101049,101050],{"class":1034},"}! how are you ${",[1002,101052,101053],{"class":1030},"today",[1002,101055,29011],{"class":1034},[1002,101057,1407],{"class":1030},[953,101059,101061],{"id":101060},"comprehensions","Comprehensions",[925,101063,101064,101065,2034,101067,948],{},"Array comprehensions are similar to ",[941,101066,19444],{},[941,101068,8313],{},[7100,101070,101071],{"title":99789,"type":24048},[925,101072,99792],{},[993,101074,101076],{"className":995,"code":101075,"language":997,"meta":998,"style":998},"[for (i of [1, 2, 3]) i * i]; \u002F\u002F [1, 4, 9]\n[1, 2, 3].map(function (i) { return i * i }); \u002F\u002F [1, 4, 9]\n\n[for (i of [1,4,2,3,-8]) if (i \u003C 3) i]; \u002F\u002F [1, 2, -8]\n[1,4,2,3,-8].filter(function(i) { return i \u003C 3 }); \u002F\u002F [1, 2, -8]\n",[941,101077,101078,101108,101147,101151,101199],{"__ignoreMap":998},[1002,101079,101080,101082,101084,101086,101088,101090,101092,101094,101096,101098,101100,101102,101104,101106],{"class":1004,"line":1005},[1002,101081,31462],{"class":1030},[1002,101083,6510],{"class":1026},[1002,101085,44863],{"class":1030},[1002,101087,39708],{"class":1015},[1002,101089,1897],{"class":1030},[1002,101091,6211],{"class":1019},[1002,101093,1251],{"class":1030},[1002,101095,5681],{"class":1019},[1002,101097,1251],{"class":1030},[1002,101099,2796],{"class":1019},[1002,101101,100150],{"class":1030},[1002,101103,4703],{"class":1015},[1002,101105,100155],{"class":1030},[1002,101107,99850],{"class":1008},[1002,101109,101110,101112,101114,101116,101118,101120,101122,101124,101126,101128,101130,101132,101134,101136,101138,101140,101142,101145],{"class":1004,"line":1012},[1002,101111,31462],{"class":1030},[1002,101113,6211],{"class":1019},[1002,101115,1251],{"class":1030},[1002,101117,5681],{"class":1019},[1002,101119,1251],{"class":1030},[1002,101121,2796],{"class":1019},[1002,101123,38716],{"class":1030},[1002,101125,19444],{"class":1026},[1002,101127,1031],{"class":1030},[1002,101129,6965],{"class":1015},[1002,101131,6513],{"class":1030},[1002,101133,12031],{"class":2378},[1002,101135,86196],{"class":1030},[1002,101137,8975],{"class":1015},[1002,101139,6519],{"class":1030},[1002,101141,4703],{"class":1015},[1002,101143,101144],{"class":1030}," i }); ",[1002,101146,99850],{"class":1008},[1002,101148,101149],{"class":1004,"line":1047},[1002,101150,1051],{"emptyLinePlaceholder":1050},[1002,101152,101153,101155,101157,101159,101161,101163,101165,101167,101169,101171,101173,101175,101177,101179,101181,101183,101185,101187,101189,101191,101193,101196],{"class":1004,"line":1054},[1002,101154,31462],{"class":1030},[1002,101156,6510],{"class":1026},[1002,101158,44863],{"class":1030},[1002,101160,39708],{"class":1015},[1002,101162,1897],{"class":1030},[1002,101164,6211],{"class":1019},[1002,101166,15314],{"class":1030},[1002,101168,3837],{"class":1019},[1002,101170,15314],{"class":1030},[1002,101172,5681],{"class":1019},[1002,101174,15314],{"class":1030},[1002,101176,2796],{"class":1019},[1002,101178,15314],{"class":1030},[1002,101180,5101],{"class":1015},[1002,101182,31435],{"class":1019},[1002,101184,32184],{"class":1030},[1002,101186,46126],{"class":1026},[1002,101188,44863],{"class":1030},[1002,101190,6539],{"class":1015},[1002,101192,17813],{"class":1019},[1002,101194,101195],{"class":1030},") i]; ",[1002,101197,101198],{"class":1008},"\u002F\u002F [1, 2, -8]\n",[1002,101200,101201,101203,101205,101207,101209,101211,101213,101215,101217,101219,101221,101223,101225,101227,101229,101231,101233,101235,101237,101239,101241,101243,101245,101248],{"class":1004,"line":1060},[1002,101202,31462],{"class":1030},[1002,101204,6211],{"class":1019},[1002,101206,15314],{"class":1030},[1002,101208,3837],{"class":1019},[1002,101210,15314],{"class":1030},[1002,101212,5681],{"class":1019},[1002,101214,15314],{"class":1030},[1002,101216,2796],{"class":1019},[1002,101218,15314],{"class":1030},[1002,101220,5101],{"class":1015},[1002,101222,31435],{"class":1019},[1002,101224,38716],{"class":1030},[1002,101226,8313],{"class":1026},[1002,101228,1031],{"class":1030},[1002,101230,6965],{"class":1015},[1002,101232,1031],{"class":1030},[1002,101234,12031],{"class":2378},[1002,101236,86196],{"class":1030},[1002,101238,8975],{"class":1015},[1002,101240,6519],{"class":1030},[1002,101242,6539],{"class":1015},[1002,101244,17813],{"class":1019},[1002,101246,101247],{"class":1030}," }); ",[1002,101249,101198],{"class":1008},[953,101251,101253],{"id":101252},"unicode","Unicode",[925,101255,101256],{},"ECMAScript 6 introduces two new flags for regular expressions:",[1530,101258,101259,101264],{},[974,101260,101261,101263],{},[941,101262,50723],{}," enables 'sticky' matching",[974,101265,101266,101269],{},[941,101267,101268],{},"u"," enables Unicode-related fetaures",[925,101271,101272,101273,101275,101276,101279],{},"Setting ",[941,101274,101268],{}," on a regular expression enables the use of ",[941,101277,101278],{},"Unicode code point escapes"," (\\u{..}) in the pattern.",[993,101281,101283],{"className":995,"code":101282,"language":997,"meta":998,"style":998},"\u002F\u002F `a` is U+0061 LATIN SMALL LETTER A, a BMP symbol.\n\u002F\\u{61}\u002Fu.test('a'); \u002F\u002F true\n\n\u002F\u002F `` is U+1D306 TETRAGRAM FOR CENTRE, an astral symbol.\n\u002F\\u{1D306}\u002Fu.test(''); \u002F\u002F true\n\n\u002F\u002F new RegExp behaviour, opt-in ‘u’\n''.match(\u002F.\u002Fu)[0].length == 2; \u002F\u002F true\n",[941,101284,101285,101290,101316,101320,101325,101350,101354,101359],{"__ignoreMap":998},[1002,101286,101287],{"class":1004,"line":1005},[1002,101288,101289],{"class":1008},"\u002F\u002F `a` is U+0061 LATIN SMALL LETTER A, a BMP symbol.\n",[1002,101291,101292,101294,101297,101300,101302,101304,101306,101308,101310,101312,101314],{"class":1004,"line":1012},[1002,101293,4685],{"class":1034},[1002,101295,101296],{"class":33484},"\\u",[1002,101298,101299],{"class":1015},"{61}",[1002,101301,4685],{"class":1034},[1002,101303,101268],{"class":1015},[1002,101305,948],{"class":1030},[1002,101307,21237],{"class":1026},[1002,101309,1031],{"class":1030},[1002,101311,28315],{"class":1034},[1002,101313,18256],{"class":1030},[1002,101315,2877],{"class":1008},[1002,101317,101318],{"class":1004,"line":1047},[1002,101319,1051],{"emptyLinePlaceholder":1050},[1002,101321,101322],{"class":1004,"line":1054},[1002,101323,101324],{"class":1008},"\u002F\u002F `` is U+1D306 TETRAGRAM FOR CENTRE, an astral symbol.\n",[1002,101326,101327,101329,101331,101334,101336,101338,101340,101342,101344,101346,101348],{"class":1004,"line":1060},[1002,101328,4685],{"class":1034},[1002,101330,101296],{"class":33484},[1002,101332,101333],{"class":33488},"{1D306}",[1002,101335,4685],{"class":1034},[1002,101337,101268],{"class":1015},[1002,101339,948],{"class":1030},[1002,101341,21237],{"class":1026},[1002,101343,1031],{"class":1030},[1002,101345,19820],{"class":1034},[1002,101347,18256],{"class":1030},[1002,101349,2877],{"class":1008},[1002,101351,101352],{"class":1004,"line":1272},[1002,101353,1051],{"emptyLinePlaceholder":1050},[1002,101355,101356],{"class":1004,"line":1348},[1002,101357,101358],{"class":1008},"\u002F\u002F new RegExp behaviour, opt-in ‘u’\n",[1002,101360,101361,101363,101365,101367,101369,101371,101373,101375,101377,101379,101381,101383,101385,101387,101389,101391],{"class":1004,"line":1354},[1002,101362,19820],{"class":1034},[1002,101364,948],{"class":1030},[1002,101366,74493],{"class":1026},[1002,101368,1031],{"class":1030},[1002,101370,4685],{"class":1034},[1002,101372,948],{"class":1019},[1002,101374,4685],{"class":1034},[1002,101376,101268],{"class":1015},[1002,101378,61100],{"class":1030},[1002,101380,5867],{"class":1019},[1002,101382,38716],{"class":1030},[1002,101384,5873],{"class":1019},[1002,101386,6042],{"class":1015},[1002,101388,10248],{"class":1019},[1002,101390,17938],{"class":1030},[1002,101392,2877],{"class":1008},[953,101394,101396],{"id":101395},"module-loaders","Module Loaders",[925,101398,101399],{},"ES6 provides you with module loades support:",[1530,101401,101402,101405,101408,101411,101414],{},[974,101403,101404],{},"Dynamic loading",[974,101406,101407],{},"State isolation",[974,101409,101410],{},"Global namespace isolation",[974,101412,101413],{},"Compilation hooks",[974,101415,101416],{},"Nested virtualization",[925,101418,101419,101420,16529,101423,101426],{},"With configurable default module loaders, new loaders can be constructed to evaluate and load code in ",[941,101421,101422],{},"isolated",[941,101424,101425],{},"constrained"," contexts.",[993,101428,101430],{"className":995,"code":101429,"language":997,"meta":998,"style":998},"\u002F\u002F Dynamic loading – ‘System’ is default loader\nSystem.import('lib\u002Fmath').then(function (m) {\n alert('2π = ' + m.sum(m.pi, m.pi));\n});\n\n\u002F\u002F Create execution sandboxes – new Loaders\nvar loader = new Loader({\n global: fixup(window), \u002F\u002F replace ‘console.log’\n});\nloader.eval('console.log(\"hello world!\");');\n\n\u002F\u002F Directly manipulate module cache\nSystem.get('jquery');\nSystem.set('jquery', Module({ $: $ })); \u002F\u002F WARNING: not yet finalized\n",[941,101431,101432,101437,101464,101483,101487,101491,101496,101512,101526,101530,101545,101549,101554,101567],{"__ignoreMap":998},[1002,101433,101434],{"class":1004,"line":1005},[1002,101435,101436],{"class":1008},"\u002F\u002F Dynamic loading – ‘System’ is default loader\n",[1002,101438,101439,101442,101444,101446,101449,101451,101453,101455,101457,101459,101462],{"class":1004,"line":1012},[1002,101440,101441],{"class":1030},"System.",[1002,101443,943],{"class":1026},[1002,101445,1031],{"class":1030},[1002,101447,101448],{"class":1034},"'lib\u002Fmath'",[1002,101450,1539],{"class":1030},[1002,101452,25658],{"class":1026},[1002,101454,1031],{"class":1030},[1002,101456,6965],{"class":1015},[1002,101458,6513],{"class":1030},[1002,101460,101461],{"class":2378},"m",[1002,101463,2382],{"class":1030},[1002,101465,101466,101468,101470,101473,101475,101478,101480],{"class":1004,"line":1047},[1002,101467,93025],{"class":1026},[1002,101469,1031],{"class":1030},[1002,101471,101472],{"class":1034},"'2π = '",[1002,101474,6583],{"class":1015},[1002,101476,101477],{"class":1030}," m.",[1002,101479,77047],{"class":1026},[1002,101481,101482],{"class":1030},"(m.pi, m.pi));\n",[1002,101484,101485],{"class":1004,"line":1054},[1002,101486,2804],{"class":1030},[1002,101488,101489],{"class":1004,"line":1060},[1002,101490,1051],{"emptyLinePlaceholder":1050},[1002,101492,101493],{"class":1004,"line":1272},[1002,101494,101495],{"class":1008},"\u002F\u002F Create execution sandboxes – new Loaders\n",[1002,101497,101498,101500,101503,101505,101507,101510],{"class":1004,"line":1348},[1002,101499,18311],{"class":1015},[1002,101501,101502],{"class":1030}," loader ",[1002,101504,2393],{"class":1015},[1002,101506,2690],{"class":1015},[1002,101508,101509],{"class":1026}," Loader",[1002,101511,2756],{"class":1030},[1002,101513,101514,101517,101520,101523],{"class":1004,"line":1354},[1002,101515,101516],{"class":1030}," global: ",[1002,101518,101519],{"class":1026},"fixup",[1002,101521,101522],{"class":1030},"(window), ",[1002,101524,101525],{"class":1008},"\u002F\u002F replace ‘console.log’\n",[1002,101527,101528],{"class":1004,"line":1360},[1002,101529,2804],{"class":1030},[1002,101531,101532,101535,101538,101540,101543],{"class":1004,"line":1366},[1002,101533,101534],{"class":1030},"loader.",[1002,101536,101537],{"class":1026},"eval",[1002,101539,1031],{"class":1030},[1002,101541,101542],{"class":1034},"'console.log(\"hello world!\");'",[1002,101544,1085],{"class":1030},[1002,101546,101547],{"class":1004,"line":1946},[1002,101548,1051],{"emptyLinePlaceholder":1050},[1002,101550,101551],{"class":1004,"line":1956},[1002,101552,101553],{"class":1008},"\u002F\u002F Directly manipulate module cache\n",[1002,101555,101556,101558,101560,101562,101565],{"class":1004,"line":1961},[1002,101557,101441],{"class":1030},[1002,101559,8070],{"class":1026},[1002,101561,1031],{"class":1030},[1002,101563,101564],{"class":1034},"'jquery'",[1002,101566,1085],{"class":1030},[1002,101568,101569,101571,101573,101575,101577,101579,101581,101584],{"class":1004,"line":1971},[1002,101570,101441],{"class":1030},[1002,101572,40544],{"class":1026},[1002,101574,1031],{"class":1030},[1002,101576,101564],{"class":1034},[1002,101578,1251],{"class":1030},[1002,101580,70826],{"class":1026},[1002,101582,101583],{"class":1030},"({ $: $ })); ",[1002,101585,101586],{"class":1008},"\u002F\u002F WARNING: not yet finalized\n",[953,101588,101590],{"id":101589},"map-set-weakmap-weakset","Map + Set + WeakMap + WeakSet",[925,101592,101593,101594,1251,101596,1251,101599,1251,101601,948],{},"ES6 brings new data structures: ",[941,101595,32239],{},[941,101597,101598],{},"WeakMap",[941,101600,51218],{},[941,101602,101603],{},"WeakSet",[925,101605,101606,101608],{},[1107,101607,32239],{}," - The Map data structure in ES6 lets you use arbitrary values as keys and is highly welcome.",[993,101610,101612],{"className":995,"code":101611,"language":997,"meta":998,"style":998},"let map = new Map();\n\nmap.set('foo', 100);\nmap.get('foo'); \u002F\u002F 100\n\nmap.has('foo'); \u002F\u002F true\nmap.delete('foo');\nmap.has('foo'); \u002F\u002F false\n",[941,101613,101614,101629,101633,101650,101664,101668,101682,101694],{"__ignoreMap":998},[1002,101615,101616,101618,101620,101622,101624,101627],{"class":1004,"line":1005},[1002,101617,6516],{"class":1015},[1002,101619,60104],{"class":1030},[1002,101621,2393],{"class":1015},[1002,101623,2690],{"class":1015},[1002,101625,101626],{"class":1026}," Map",[1002,101628,1428],{"class":1030},[1002,101630,101631],{"class":1004,"line":1012},[1002,101632,1051],{"emptyLinePlaceholder":1050},[1002,101634,101635,101638,101640,101642,101644,101646,101648],{"class":1004,"line":1047},[1002,101636,101637],{"class":1030},"map.",[1002,101639,40544],{"class":1026},[1002,101641,1031],{"class":1030},[1002,101643,34812],{"class":1034},[1002,101645,1251],{"class":1030},[1002,101647,4791],{"class":1019},[1002,101649,1085],{"class":1030},[1002,101651,101652,101654,101656,101658,101660,101662],{"class":1004,"line":1054},[1002,101653,101637],{"class":1030},[1002,101655,8070],{"class":1026},[1002,101657,1031],{"class":1030},[1002,101659,34812],{"class":1034},[1002,101661,18256],{"class":1030},[1002,101663,50732],{"class":1008},[1002,101665,101666],{"class":1004,"line":1060},[1002,101667,1051],{"emptyLinePlaceholder":1050},[1002,101669,101670,101672,101674,101676,101678,101680],{"class":1004,"line":1272},[1002,101671,101637],{"class":1030},[1002,101673,53241],{"class":1026},[1002,101675,1031],{"class":1030},[1002,101677,34812],{"class":1034},[1002,101679,18256],{"class":1030},[1002,101681,2877],{"class":1008},[1002,101683,101684,101686,101688,101690,101692],{"class":1004,"line":1348},[1002,101685,101637],{"class":1030},[1002,101687,52128],{"class":1026},[1002,101689,1031],{"class":1030},[1002,101691,34812],{"class":1034},[1002,101693,1085],{"class":1030},[1002,101695,101696,101698,101700,101702,101704,101706],{"class":1004,"line":1354},[1002,101697,101637],{"class":1030},[1002,101699,53241],{"class":1026},[1002,101701,1031],{"class":1030},[1002,101703,34812],{"class":1034},[1002,101705,18256],{"class":1030},[1002,101707,25986],{"class":1008},[925,101709,101710,101712],{},[1107,101711,101598],{}," - A WeakMap is a map that doesn’t prevent its keys from being garbage-collected.",[993,101714,101716],{"className":995,"code":101715,"language":997,"meta":998,"style":998},"let wm = new WeakMap();\nlet foo = {};\n\nwm.set(foo, 100);\nwm.get(foo); \u002F\u002F 100\n\nwm.has(foo); \u002F\u002F true\nwm.delete(foo);\nwm.has(foo); \u002F\u002F false\n",[941,101717,101718,101734,101744,101748,101762,101772,101776,101786,101795],{"__ignoreMap":998},[1002,101719,101720,101722,101725,101727,101729,101732],{"class":1004,"line":1005},[1002,101721,6516],{"class":1015},[1002,101723,101724],{"class":1030}," wm ",[1002,101726,2393],{"class":1015},[1002,101728,2690],{"class":1015},[1002,101730,101731],{"class":1026}," WeakMap",[1002,101733,1428],{"class":1030},[1002,101735,101736,101738,101740,101742],{"class":1004,"line":1012},[1002,101737,6516],{"class":1015},[1002,101739,38379],{"class":1030},[1002,101741,2393],{"class":1015},[1002,101743,7217],{"class":1030},[1002,101745,101746],{"class":1004,"line":1047},[1002,101747,1051],{"emptyLinePlaceholder":1050},[1002,101749,101750,101753,101755,101758,101760],{"class":1004,"line":1054},[1002,101751,101752],{"class":1030},"wm.",[1002,101754,40544],{"class":1026},[1002,101756,101757],{"class":1030},"(foo, ",[1002,101759,4791],{"class":1019},[1002,101761,1085],{"class":1030},[1002,101763,101764,101766,101768,101770],{"class":1004,"line":1060},[1002,101765,101752],{"class":1030},[1002,101767,8070],{"class":1026},[1002,101769,88493],{"class":1030},[1002,101771,50732],{"class":1008},[1002,101773,101774],{"class":1004,"line":1272},[1002,101775,1051],{"emptyLinePlaceholder":1050},[1002,101777,101778,101780,101782,101784],{"class":1004,"line":1348},[1002,101779,101752],{"class":1030},[1002,101781,53241],{"class":1026},[1002,101783,88493],{"class":1030},[1002,101785,2877],{"class":1008},[1002,101787,101788,101790,101792],{"class":1004,"line":1354},[1002,101789,101752],{"class":1030},[1002,101791,52128],{"class":1026},[1002,101793,101794],{"class":1030},"(foo);\n",[1002,101796,101797,101799,101801,101803],{"class":1004,"line":1360},[1002,101798,101752],{"class":1030},[1002,101800,53241],{"class":1026},[1002,101802,88493],{"class":1030},[1002,101804,25986],{"class":1008},[925,101806,101807,101809,101810,101813],{},[1107,101808,51218],{}," - A Set works for arbitrary values, is fast and handles ",[941,101811,101812],{},"NaN"," correctly.",[993,101815,101817],{"className":995,"code":101816,"language":997,"meta":998,"style":998},"let set = new Set();\nset.add('foo');\n\nset.has('foo'); \u002F\u002F true\nset.delete('foo');\nset.has('foo'); \u002F\u002F false\n",[941,101818,101819,101834,101847,101851,101865,101877],{"__ignoreMap":998},[1002,101820,101821,101823,101826,101828,101830,101832],{"class":1004,"line":1005},[1002,101822,6516],{"class":1015},[1002,101824,101825],{"class":1030}," set ",[1002,101827,2393],{"class":1015},[1002,101829,2690],{"class":1015},[1002,101831,86916],{"class":1026},[1002,101833,1428],{"class":1030},[1002,101835,101836,101839,101841,101843,101845],{"class":1004,"line":1012},[1002,101837,101838],{"class":1030},"set.",[1002,101840,7985],{"class":1026},[1002,101842,1031],{"class":1030},[1002,101844,34812],{"class":1034},[1002,101846,1085],{"class":1030},[1002,101848,101849],{"class":1004,"line":1047},[1002,101850,1051],{"emptyLinePlaceholder":1050},[1002,101852,101853,101855,101857,101859,101861,101863],{"class":1004,"line":1054},[1002,101854,101838],{"class":1030},[1002,101856,53241],{"class":1026},[1002,101858,1031],{"class":1030},[1002,101860,34812],{"class":1034},[1002,101862,18256],{"class":1030},[1002,101864,2877],{"class":1008},[1002,101866,101867,101869,101871,101873,101875],{"class":1004,"line":1060},[1002,101868,101838],{"class":1030},[1002,101870,52128],{"class":1026},[1002,101872,1031],{"class":1030},[1002,101874,34812],{"class":1034},[1002,101876,1085],{"class":1030},[1002,101878,101879,101881,101883,101885,101887,101889],{"class":1004,"line":1272},[1002,101880,101838],{"class":1030},[1002,101882,53241],{"class":1026},[1002,101884,1031],{"class":1030},[1002,101886,34812],{"class":1034},[1002,101888,18256],{"class":1030},[1002,101890,25986],{"class":1008},[925,101892,101893,101895],{},[1107,101894,101603],{}," - A WeakSet is a set that doesn’t prevent its elements from being garbage-collected.",[7100,101897,101899],{"title":101898,"type":24048},"Garbage Collection",[925,101900,101901,101902,16529,101904,101906],{},"When using a ",[941,101903,101598],{},[941,101905,101603],{}," allows us to associate data with objects without having to worry about memory leaks.",[953,101908,101910],{"id":101909},"subclassable-built-ins","Subclassable Built-ins",[925,101912,101913,101914,1251,101916,2034,101919,101922],{},"Creatng sub-constructors from built-ins is impossible. In ES6, built-ins like ",[941,101915,12121],{},[941,101917,101918],{},"Date",[941,101920,101921],{},"DOM Elements"," can be subclassed.",[7100,101924,101926],{"title":101925,"type":24048},"**proto**",[925,101927,101928,101929,948],{},"Only works in current browsers with JavaScript engines that support ",[941,101930,97502],{},[993,101932,101934],{"className":995,"code":101933,"language":997,"meta":998,"style":998},"function Foo(len) {\n var array = new Array(len);\n array.__proto__ = Foo.prototype;\n return array;\n}\n\nvar foo = new Foo(5);\nfoo.length; \u002F\u002F 5\n\nFoo.prototype = Object.create(Array.prototype);\n\nFoo.length; \u002F\u002F 1\n",[941,101935,101936,101949,101964,101981,101988,101992,101996,102014,102024,102028,102052,102056],{"__ignoreMap":998},[1002,101937,101938,101940,101942,101944,101947],{"class":1004,"line":1005},[1002,101939,6965],{"class":1015},[1002,101941,96175],{"class":1026},[1002,101943,1031],{"class":1030},[1002,101945,101946],{"class":2378},"len",[1002,101948,2382],{"class":1030},[1002,101950,101951,101953,101955,101957,101959,101961],{"class":1004,"line":1012},[1002,101952,28293],{"class":1015},[1002,101954,31296],{"class":1030},[1002,101956,2393],{"class":1015},[1002,101958,2690],{"class":1015},[1002,101960,28301],{"class":1026},[1002,101962,101963],{"class":1030},"(len);\n",[1002,101965,101966,101969,101971,101973,101975,101977,101979],{"class":1004,"line":1047},[1002,101967,101968],{"class":1030}," array.",[1002,101970,97502],{"class":1019},[1002,101972,1023],{"class":1015},[1002,101974,96175],{"class":1019},[1002,101976,948],{"class":1030},[1002,101978,3894],{"class":1019},[1002,101980,1407],{"class":1030},[1002,101982,101983,101985],{"class":1004,"line":1054},[1002,101984,15066],{"class":1015},[1002,101986,101987],{"class":1030}," array;\n",[1002,101989,101990],{"class":1004,"line":1060},[1002,101991,1170],{"class":1030},[1002,101993,101994],{"class":1004,"line":1272},[1002,101995,1051],{"emptyLinePlaceholder":1050},[1002,101997,101998,102000,102002,102004,102006,102008,102010,102012],{"class":1004,"line":1348},[1002,101999,18311],{"class":1015},[1002,102001,38379],{"class":1030},[1002,102003,2393],{"class":1015},[1002,102005,2690],{"class":1015},[1002,102007,96175],{"class":1026},[1002,102009,1031],{"class":1030},[1002,102011,2859],{"class":1019},[1002,102013,1085],{"class":1030},[1002,102015,102016,102018,102020,102022],{"class":1004,"line":1354},[1002,102017,96273],{"class":1030},[1002,102019,5873],{"class":1019},[1002,102021,17938],{"class":1030},[1002,102023,5734],{"class":1008},[1002,102025,102026],{"class":1004,"line":1360},[1002,102027,1051],{"emptyLinePlaceholder":1050},[1002,102029,102030,102032,102034,102036,102038,102040,102042,102044,102046,102048,102050],{"class":1004,"line":1366},[1002,102031,97494],{"class":1019},[1002,102033,948],{"class":1030},[1002,102035,3894],{"class":1019},[1002,102037,1023],{"class":1015},[1002,102039,82475],{"class":1030},[1002,102041,48241],{"class":1026},[1002,102043,1031],{"class":1030},[1002,102045,12121],{"class":1019},[1002,102047,948],{"class":1030},[1002,102049,3894],{"class":1019},[1002,102051,1085],{"class":1030},[1002,102053,102054],{"class":1004,"line":1946},[1002,102055,1051],{"emptyLinePlaceholder":1050},[1002,102057,102058,102060,102062,102064],{"class":1004,"line":1956},[1002,102059,96232],{"class":1030},[1002,102061,5873],{"class":1019},[1002,102063,17938],{"class":1030},[1002,102065,50532],{"class":1008},[953,102067,102069],{"id":102068},"binary-and-octal-literals","Binary and Octal Literals",[925,102071,102072,102073,102075,102076,948],{},"In ES6, you can specifiy two new numeric literals for integers in binary ",[941,102074,31621],{}," and octal ",[941,102077,5867],{},[993,102079,102081],{"className":995,"code":102080,"language":997,"meta":998,"style":998},"\u002F\u002F binary\n0b101; \u002F\u002F 5\n\n\u002F\u002F octal\n0o10; \u002F\u002F 8\n",[941,102082,102083,102088,102097,102101,102106],{"__ignoreMap":998},[1002,102084,102085],{"class":1004,"line":1005},[1002,102086,102087],{"class":1008},"\u002F\u002F binary\n",[1002,102089,102090,102093,102095],{"class":1004,"line":1012},[1002,102091,102092],{"class":1019},"0b101",[1002,102094,17938],{"class":1030},[1002,102096,5734],{"class":1008},[1002,102098,102099],{"class":1004,"line":1047},[1002,102100,1051],{"emptyLinePlaceholder":1050},[1002,102102,102103],{"class":1004,"line":1054},[1002,102104,102105],{"class":1008},"\u002F\u002F octal\n",[1002,102107,102108,102111,102113],{"class":1004,"line":1060},[1002,102109,102110],{"class":1019},"0o10",[1002,102112,17938],{"class":1030},[1002,102114,50627],{"class":1008},[953,102116,102118],{"id":102117},"reflect-api","Reflect API",[925,102120,102121],{},"Reflection API exposese the runtime-level meta-operations on objects.",[925,102123,102124],{},"Reflect API:",[1530,102126,102127,102130,102140],{},[974,102128,102129],{},"Not a functional object.",[974,102131,102132,102133,102136,102137,102139],{},"No ",[941,102134,102135],{},"construtor"," available, so ",[941,102138,5654],{}," cannot be used with it.",[974,102141,102132,102142,16529,102144,102146],{},[941,102143,8426],{},[941,102145,17677],{}," internal methods available.",[993,102148,102150],{"className":995,"code":102149,"language":997,"meta":998,"style":998},"var Foo = { a: 1 };\nObject.defineProperty(O, 'b', { value: 2 });\nFoo[Symbol('c')] = 3;\n\nReflect.ownKeys(Foo); \u002F\u002F ['a', 'b', Symbol(c)]\n\nfunction C(a, b) {\n this.c = a + b;\n}\n\nvar instance = Reflect.construct(C, [10, 12]);\nconsole.log(instance.c); \u002F\u002F 22\n",[941,102151,102152,102168,102190,102211,102215,102229,102233,102249,102265,102269,102273,102301],{"__ignoreMap":998},[1002,102153,102154,102156,102159,102161,102164,102166],{"class":1004,"line":1005},[1002,102155,18311],{"class":1015},[1002,102157,102158],{"class":1030}," Foo ",[1002,102160,2393],{"class":1015},[1002,102162,102163],{"class":1030}," { a: ",[1002,102165,6211],{"class":1019},[1002,102167,9444],{"class":1030},[1002,102169,102170,102172,102174,102176,102179,102181,102183,102186,102188],{"class":1004,"line":1012},[1002,102171,33697],{"class":1030},[1002,102173,17376],{"class":1026},[1002,102175,1031],{"class":1030},[1002,102177,102178],{"class":1019},"O",[1002,102180,1251],{"class":1030},[1002,102182,31566],{"class":1034},[1002,102184,102185],{"class":1030},", { value: ",[1002,102187,5681],{"class":1019},[1002,102189,28417],{"class":1030},[1002,102191,102192,102195,102198,102200,102202,102205,102207,102209],{"class":1004,"line":1047},[1002,102193,102194],{"class":1030},"Foo[",[1002,102196,102197],{"class":1026},"Symbol",[1002,102199,1031],{"class":1030},[1002,102201,38778],{"class":1034},[1002,102203,102204],{"class":1030},")] ",[1002,102206,2393],{"class":1015},[1002,102208,17813],{"class":1019},[1002,102210,1407],{"class":1030},[1002,102212,102213],{"class":1004,"line":1054},[1002,102214,1051],{"emptyLinePlaceholder":1050},[1002,102216,102217,102220,102223,102226],{"class":1004,"line":1060},[1002,102218,102219],{"class":1030},"Reflect.",[1002,102221,102222],{"class":1026},"ownKeys",[1002,102224,102225],{"class":1030},"(Foo); ",[1002,102227,102228],{"class":1008},"\u002F\u002F ['a', 'b', Symbol(c)]\n",[1002,102230,102231],{"class":1004,"line":1272},[1002,102232,1051],{"emptyLinePlaceholder":1050},[1002,102234,102235,102237,102239,102241,102243,102245,102247],{"class":1004,"line":1348},[1002,102236,6965],{"class":1015},[1002,102238,98338],{"class":1026},[1002,102240,1031],{"class":1030},[1002,102242,933],{"class":2378},[1002,102244,1251],{"class":1030},[1002,102246,31621],{"class":2378},[1002,102248,2382],{"class":1030},[1002,102250,102251,102253,102256,102258,102260,102262],{"class":1004,"line":1354},[1002,102252,39364],{"class":1019},[1002,102254,102255],{"class":1030},".c ",[1002,102257,2393],{"class":1015},[1002,102259,85662],{"class":1030},[1002,102261,5064],{"class":1015},[1002,102263,102264],{"class":1030}," b;\n",[1002,102266,102267],{"class":1004,"line":1360},[1002,102268,1170],{"class":1030},[1002,102270,102271],{"class":1004,"line":1366},[1002,102272,1051],{"emptyLinePlaceholder":1050},[1002,102274,102275,102277,102279,102281,102284,102287,102289,102291,102293,102295,102297,102299],{"class":1004,"line":1946},[1002,102276,18311],{"class":1015},[1002,102278,96122],{"class":1030},[1002,102280,2393],{"class":1015},[1002,102282,102283],{"class":1030}," Reflect.",[1002,102285,102286],{"class":1026},"construct",[1002,102288,1031],{"class":1030},[1002,102290,98345],{"class":1019},[1002,102292,47455],{"class":1030},[1002,102294,4818],{"class":1019},[1002,102296,1251],{"class":1030},[1002,102298,10296],{"class":1019},[1002,102300,29611],{"class":1030},[1002,102302,102303,102305,102307,102310],{"class":1004,"line":1956},[1002,102304,2883],{"class":1030},[1002,102306,2886],{"class":1026},[1002,102308,102309],{"class":1030},"(instance.c); ",[1002,102311,102312],{"class":1008},"\u002F\u002F 22\n",[953,102314,102316],{"id":102315},"tail-calls","Tail Calls",[925,102318,102319,102320,102323,102324,102327],{},"A tail call happens when a function makes a function call as its ",[1107,102321,102322],{},"final action",". At that point the function will do absolutely no more work: it passes the execution to whatever function is being called and disappears.This is guaranteed to not grow the stack unboundedly. Makes recursive algorithms like ",[941,102325,102326],{},"Fibonacci","safe in the face of unbounded inputs.",[993,102329,102330],{"className":995,"code":100320,"language":997,"meta":998,"style":998},[941,102331,102332,102344,102360,102372,102378,102386,102404,102408,102412,102424,102428,102432],{"__ignoreMap":998},[1002,102333,102334,102336,102338,102340,102342],{"class":1004,"line":1005},[1002,102335,6965],{"class":1015},[1002,102337,100329],{"class":1026},[1002,102339,1031],{"class":1030},[1002,102341,25415],{"class":2378},[1002,102343,2382],{"class":1030},[1002,102345,102346,102348,102350,102352,102354,102356,102358],{"class":1004,"line":1012},[1002,102347,18965],{"class":1015},[1002,102349,100342],{"class":1026},[1002,102351,1031],{"class":1030},[1002,102353,25415],{"class":2378},[1002,102355,1251],{"class":1030},[1002,102357,100351],{"class":2378},[1002,102359,2382],{"class":1030},[1002,102361,102362,102364,102366,102368,102370],{"class":1004,"line":1047},[1002,102363,4368],{"class":1015},[1002,102365,100360],{"class":1030},[1002,102367,2892],{"class":1015},[1002,102369,4910],{"class":1019},[1002,102371,2382],{"class":1030},[1002,102373,102374,102376],{"class":1004,"line":1054},[1002,102375,4376],{"class":1015},[1002,102377,100373],{"class":1030},[1002,102379,102380,102382,102384],{"class":1004,"line":1060},[1002,102381,6057],{"class":1030},[1002,102383,6060],{"class":1015},[1002,102385,1457],{"class":1030},[1002,102387,102388,102390,102392,102394,102396,102398,102400,102402],{"class":1004,"line":1272},[1002,102389,4376],{"class":1015},[1002,102391,100342],{"class":1026},[1002,102393,76786],{"class":1030},[1002,102395,5101],{"class":1015},[1002,102397,6246],{"class":1019},[1002,102399,100396],{"class":1030},[1002,102401,4703],{"class":1015},[1002,102403,100401],{"class":1030},[1002,102405,102406],{"class":1004,"line":1348},[1002,102407,2014],{"class":1030},[1002,102409,102410],{"class":1004,"line":1354},[1002,102411,1269],{"class":1030},[1002,102413,102414,102416,102418,102420,102422],{"class":1004,"line":1360},[1002,102415,15066],{"class":1015},[1002,102417,100342],{"class":1026},[1002,102419,100418],{"class":1030},[1002,102421,6211],{"class":1019},[1002,102423,1085],{"class":1030},[1002,102425,102426],{"class":1004,"line":1366},[1002,102427,1170],{"class":1030},[1002,102429,102430],{"class":1004,"line":1946},[1002,102431,1051],{"emptyLinePlaceholder":1050},[1002,102433,102434,102436,102438,102440],{"class":1004,"line":1956},[1002,102435,100435],{"class":1026},[1002,102437,1031],{"class":1030},[1002,102439,10291],{"class":1019},[1002,102441,1085],{"class":1030},[1579,102443,102444],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":102446},[102447,102448,102449,102450,102451,102452,102453,102454,102455,102456],{"id":100801,"depth":1012,"text":82667},{"id":100905,"depth":1012,"text":82679},{"id":101060,"depth":1012,"text":101061},{"id":101252,"depth":1012,"text":101253},{"id":101395,"depth":1012,"text":101396},{"id":101589,"depth":1012,"text":101590},{"id":101909,"depth":1012,"text":101910},{"id":102068,"depth":1012,"text":102069},{"id":102117,"depth":1012,"text":102118},{"id":102315,"depth":1012,"text":102316},"2015-07-19","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-advanced-features.jpg",{},{"title":191,"description":193},"blog\u002Fes6-advanced-features",[16,17],"q0E9C6-bw_pknm6x1giKOB4-4oRoKENa-YRd-dhiTIc",{"id":102465,"title":237,"author":920,"body":102466,"date":105290,"description":239,"extension":1591,"image":105291,"meta":105292,"navigation":1050,"path":238,"seo":105293,"stem":105294,"tags":105295,"__hash__":105296},"blog\u002Fblog\u002Fes6-new-features.md",{"type":922,"value":102467,"toc":105272},[102468,102472,102567,102569,102572,103038,103042,103051,103144,103153,103224,103228,103236,103472,103475,103478,103491,103713,103717,103724,103732,103878,103884,104081,104083,104086,104096,104099,104305,104308,104311,105269],[7100,102469,102470],{"title":91573,"type":24048},[925,102471,91576],{},[993,102473,102475],{"className":995,"code":102474,"language":997,"meta":998,"style":998},"\u002F* Lexical scope (this) in arrow is same as surrounding scope,\n but function scope is a new scope *\u002F\n\nvar pets = ['cat', 'dog', 'bird', 'fish'];\n\nvar a = pets.map((p) => p.length);\n\nconsole.log(a);\n",[941,102476,102477,102482,102487,102491,102522,102526,102554,102558],{"__ignoreMap":998},[1002,102478,102479],{"class":1004,"line":1005},[1002,102480,102481],{"class":1008},"\u002F* Lexical scope (this) in arrow is same as surrounding scope,\n",[1002,102483,102484],{"class":1004,"line":1012},[1002,102485,102486],{"class":1008}," but function scope is a new scope *\u002F\n",[1002,102488,102489],{"class":1004,"line":1047},[1002,102490,1051],{"emptyLinePlaceholder":1050},[1002,102492,102493,102495,102498,102500,102502,102505,102507,102510,102512,102515,102517,102520],{"class":1004,"line":1054},[1002,102494,18311],{"class":1015},[1002,102496,102497],{"class":1030}," pets ",[1002,102499,2393],{"class":1015},[1002,102501,1897],{"class":1030},[1002,102503,102504],{"class":1034},"'cat'",[1002,102506,1251],{"class":1030},[1002,102508,102509],{"class":1034},"'dog'",[1002,102511,1251],{"class":1030},[1002,102513,102514],{"class":1034},"'bird'",[1002,102516,1251],{"class":1030},[1002,102518,102519],{"class":1034},"'fish'",[1002,102521,6754],{"class":1030},[1002,102523,102524],{"class":1004,"line":1060},[1002,102525,1051],{"emptyLinePlaceholder":1050},[1002,102527,102528,102530,102532,102534,102537,102539,102541,102543,102545,102547,102550,102552],{"class":1004,"line":1272},[1002,102529,18311],{"class":1015},[1002,102531,85662],{"class":1030},[1002,102533,2393],{"class":1015},[1002,102535,102536],{"class":1030}," pets.",[1002,102538,19444],{"class":1026},[1002,102540,21121],{"class":1030},[1002,102542,925],{"class":2378},[1002,102544,5876],{"class":1030},[1002,102546,15497],{"class":1015},[1002,102548,102549],{"class":1030}," p.",[1002,102551,5873],{"class":1019},[1002,102553,1085],{"class":1030},[1002,102555,102556],{"class":1004,"line":1348},[1002,102557,1051],{"emptyLinePlaceholder":1050},[1002,102559,102560,102562,102564],{"class":1004,"line":1354},[1002,102561,2883],{"class":1030},[1002,102563,2886],{"class":1026},[1002,102565,102566],{"class":1030},"(a);\n",[953,102568,35577],{"id":77886},[925,102570,102571],{},"ES6 classes are simply syntactical sugar over the prototype-based Object Orientation pattern. Having a single convenient declarative form makes class patterns easier to use. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.",[993,102573,102575],{"className":995,"code":102574,"language":997,"meta":998,"style":998},"class Vehicle {\n name = 'Vehicle';\n\n constructor(doors, wheels) {\n this.doors = doors;\n this.wheels = wheels;\n this.engineState = 'stopped';\n console.log(\n 'Contructed a vehicle with ' +\n this.doors +\n ' doors and ' +\n this.wheels +\n ' wheels.',\n );\n }\n startEngine() {\n this.engineState = 'started';\n console.log('Engine started ..');\n }\n stopEngine() {\n this.engineState = 'stopped';\n console.log('Engine stopped ..');\n }\n drive() {\n if (this.engineState == 'started') {\n console.log('driving ..');\n } else {\n console.log('start the engine first!');\n }\n }\n static showName() {\n console.log(this.name);\n }\n static get instance() {\n if (!Vehicle) {\n return new Vehicle();\n }\n return this;\n }\n}\n\nclass Car extends Vehicle {\n name = 'car';\n\n constructor(doors, wheels) {\n super(doors, wheels);\n }\n static showName() {\n console.log(this.name);\n }\n}\n\nVehicle.instance.showName();\n\nvar car = new Car(2, 4);\ncar.startEngine();\n",[941,102576,102577,102585,102596,102600,102614,102624,102634,102646,102654,102662,102670,102677,102685,102692,102696,102700,102706,102718,102730,102734,102740,102752,102764,102768,102774,102790,102802,102810,102822,102826,102830,102839,102851,102855,102865,102876,102886,102890,102898,102902,102906,102910,102922,102933,102937,102951,102958,102962,102970,102982,102986,102990,102994,103004,103008,103030],{"__ignoreMap":998},[1002,102578,102579,102581,102583],{"class":1004,"line":1005},[1002,102580,2363],{"class":1015},[1002,102582,2987],{"class":1026},[1002,102584,1457],{"class":1030},[1002,102586,102587,102589,102591,102594],{"class":1004,"line":1012},[1002,102588,17207],{"class":2378},[1002,102590,1023],{"class":1015},[1002,102592,102593],{"class":1034}," 'Vehicle'",[1002,102595,1407],{"class":1030},[1002,102597,102598],{"class":1004,"line":1047},[1002,102599,1051],{"emptyLinePlaceholder":1050},[1002,102601,102602,102604,102606,102608,102610,102612],{"class":1004,"line":1054},[1002,102603,2373],{"class":1015},[1002,102605,1031],{"class":1030},[1002,102607,3489],{"class":2378},[1002,102609,1251],{"class":1030},[1002,102611,95398],{"class":2378},[1002,102613,2382],{"class":1030},[1002,102615,102616,102618,102620,102622],{"class":1004,"line":1060},[1002,102617,2387],{"class":1019},[1002,102619,2403],{"class":1030},[1002,102621,2393],{"class":1015},[1002,102623,3675],{"class":1030},[1002,102625,102626,102628,102630,102632],{"class":1004,"line":1272},[1002,102627,2387],{"class":1019},[1002,102629,95417],{"class":1030},[1002,102631,2393],{"class":1015},[1002,102633,95422],{"class":1030},[1002,102635,102636,102638,102640,102642,102644],{"class":1004,"line":1348},[1002,102637,2387],{"class":1019},[1002,102639,95456],{"class":1030},[1002,102641,2393],{"class":1015},[1002,102643,95514],{"class":1034},[1002,102645,1407],{"class":1030},[1002,102647,102648,102650,102652],{"class":1004,"line":1354},[1002,102649,3030],{"class":1030},[1002,102651,2886],{"class":1026},[1002,102653,10468],{"class":1030},[1002,102655,102656,102659],{"class":1004,"line":1360},[1002,102657,102658],{"class":1034}," 'Contructed a vehicle with '",[1002,102660,102661],{"class":1015}," +\n",[1002,102663,102664,102666,102668],{"class":1004,"line":1366},[1002,102665,2622],{"class":1019},[1002,102667,2403],{"class":1030},[1002,102669,99016],{"class":1015},[1002,102671,102672,102675],{"class":1004,"line":1946},[1002,102673,102674],{"class":1034}," ' doors and '",[1002,102676,102661],{"class":1015},[1002,102678,102679,102681,102683],{"class":1004,"line":1956},[1002,102680,2622],{"class":1019},[1002,102682,95417],{"class":1030},[1002,102684,99016],{"class":1015},[1002,102686,102687,102690],{"class":1004,"line":1961},[1002,102688,102689],{"class":1034}," ' wheels.'",[1002,102691,1143],{"class":1030},[1002,102693,102694],{"class":1004,"line":1971},[1002,102695,22541],{"class":1030},[1002,102697,102698],{"class":1004,"line":1980},[1002,102699,1269],{"class":1030},[1002,102701,102702,102704],{"class":1004,"line":1985},[1002,102703,2994],{"class":1026},[1002,102705,3025],{"class":1030},[1002,102707,102708,102710,102712,102714,102716],{"class":1004,"line":1995},[1002,102709,2387],{"class":1019},[1002,102711,95456],{"class":1030},[1002,102713,2393],{"class":1015},[1002,102715,95461],{"class":1034},[1002,102717,1407],{"class":1030},[1002,102719,102720,102722,102724,102726,102728],{"class":1004,"line":2006},[1002,102721,3030],{"class":1030},[1002,102723,2886],{"class":1026},[1002,102725,1031],{"class":1030},[1002,102727,95474],{"class":1034},[1002,102729,1085],{"class":1030},[1002,102731,102732],{"class":1004,"line":2011},[1002,102733,1269],{"class":1030},[1002,102735,102736,102738],{"class":1004,"line":2017},[1002,102737,95753],{"class":1026},[1002,102739,3025],{"class":1030},[1002,102741,102742,102744,102746,102748,102750],{"class":1004,"line":2022},[1002,102743,2387],{"class":1019},[1002,102745,95456],{"class":1030},[1002,102747,2393],{"class":1015},[1002,102749,95514],{"class":1034},[1002,102751,1407],{"class":1030},[1002,102753,102754,102756,102758,102760,102762],{"class":1004,"line":2442},[1002,102755,3030],{"class":1030},[1002,102757,2886],{"class":1026},[1002,102759,1031],{"class":1030},[1002,102761,95527],{"class":1034},[1002,102763,1085],{"class":1030},[1002,102765,102766],{"class":1004,"line":2466},[1002,102767,1269],{"class":1030},[1002,102769,102770,102772],{"class":1004,"line":2471},[1002,102771,95792],{"class":1026},[1002,102773,3025],{"class":1030},[1002,102775,102776,102778,102780,102782,102784,102786,102788],{"class":1004,"line":2476},[1002,102777,4368],{"class":1015},[1002,102779,6513],{"class":1030},[1002,102781,3455],{"class":1019},[1002,102783,95456],{"class":1030},[1002,102785,87480],{"class":1015},[1002,102787,95461],{"class":1034},[1002,102789,2382],{"class":1030},[1002,102791,102792,102794,102796,102798,102800],{"class":1004,"line":2481},[1002,102793,17336],{"class":1030},[1002,102795,2886],{"class":1026},[1002,102797,1031],{"class":1030},[1002,102799,95583],{"class":1034},[1002,102801,1085],{"class":1030},[1002,102803,102804,102806,102808],{"class":1004,"line":2491},[1002,102805,6057],{"class":1030},[1002,102807,6060],{"class":1015},[1002,102809,1457],{"class":1030},[1002,102811,102812,102814,102816,102818,102820],{"class":1004,"line":2502},[1002,102813,17336],{"class":1030},[1002,102815,2886],{"class":1026},[1002,102817,1031],{"class":1030},[1002,102819,95604],{"class":1034},[1002,102821,1085],{"class":1030},[1002,102823,102824],{"class":1004,"line":2513},[1002,102825,2014],{"class":1030},[1002,102827,102828],{"class":1004,"line":2535},[1002,102829,1269],{"class":1030},[1002,102831,102832,102834,102837],{"class":1004,"line":2557},[1002,102833,13506],{"class":1015},[1002,102835,102836],{"class":1026}," showName",[1002,102838,3025],{"class":1030},[1002,102840,102841,102843,102845,102847,102849],{"class":1004,"line":2562},[1002,102842,3030],{"class":1030},[1002,102844,2886],{"class":1026},[1002,102846,1031],{"class":1030},[1002,102848,3455],{"class":1019},[1002,102850,12557],{"class":1030},[1002,102852,102853],{"class":1004,"line":2567},[1002,102854,1269],{"class":1030},[1002,102856,102857,102859,102861,102863],{"class":1004,"line":2572},[1002,102858,13506],{"class":1015},[1002,102860,13536],{"class":1015},[1002,102862,4351],{"class":1026},[1002,102864,3025],{"class":1030},[1002,102866,102867,102869,102871,102873],{"class":1004,"line":2582},[1002,102868,4368],{"class":1015},[1002,102870,6513],{"class":1030},[1002,102872,13559],{"class":1015},[1002,102874,102875],{"class":1030},"Vehicle) {\n",[1002,102877,102878,102880,102882,102884],{"class":1004,"line":2594},[1002,102879,4376],{"class":1015},[1002,102881,2690],{"class":1015},[1002,102883,2987],{"class":1026},[1002,102885,1428],{"class":1030},[1002,102887,102888],{"class":1004,"line":2603},[1002,102889,2014],{"class":1030},[1002,102891,102892,102894,102896],{"class":1004,"line":2619},[1002,102893,2687],{"class":1015},[1002,102895,2693],{"class":1019},[1002,102897,1407],{"class":1030},[1002,102899,102900],{"class":1004,"line":2633},[1002,102901,1269],{"class":1030},[1002,102903,102904],{"class":1004,"line":2641},[1002,102905,1170],{"class":1030},[1002,102907,102908],{"class":1004,"line":2655},[1002,102909,1051],{"emptyLinePlaceholder":1050},[1002,102911,102912,102914,102916,102918,102920],{"class":1004,"line":2667},[1002,102913,2363],{"class":1015},[1002,102915,2366],{"class":1026},[1002,102917,3014],{"class":1015},[1002,102919,2987],{"class":1026},[1002,102921,1457],{"class":1030},[1002,102923,102924,102926,102928,102931],{"class":1004,"line":2674},[1002,102925,17207],{"class":2378},[1002,102927,1023],{"class":1015},[1002,102929,102930],{"class":1034}," 'car'",[1002,102932,1407],{"class":1030},[1002,102934,102935],{"class":1004,"line":2679},[1002,102936,1051],{"emptyLinePlaceholder":1050},[1002,102938,102939,102941,102943,102945,102947,102949],{"class":1004,"line":2684},[1002,102940,2373],{"class":1015},[1002,102942,1031],{"class":1030},[1002,102944,3489],{"class":2378},[1002,102946,1251],{"class":1030},[1002,102948,95398],{"class":2378},[1002,102950,2382],{"class":1030},[1002,102952,102953,102955],{"class":1004,"line":2704},[1002,102954,9725],{"class":1019},[1002,102956,102957],{"class":1030},"(doors, wheels);\n",[1002,102959,102960],{"class":1004,"line":2709},[1002,102961,1269],{"class":1030},[1002,102963,102964,102966,102968],{"class":1004,"line":2714},[1002,102965,13506],{"class":1015},[1002,102967,102836],{"class":1026},[1002,102969,3025],{"class":1030},[1002,102971,102972,102974,102976,102978,102980],{"class":1004,"line":2719},[1002,102973,3030],{"class":1030},[1002,102975,2886],{"class":1026},[1002,102977,1031],{"class":1030},[1002,102979,3455],{"class":1019},[1002,102981,12557],{"class":1030},[1002,102983,102984],{"class":1004,"line":2735},[1002,102985,1269],{"class":1030},[1002,102987,102988],{"class":1004,"line":2740},[1002,102989,1170],{"class":1030},[1002,102991,102992],{"class":1004,"line":2759},[1002,102993,1051],{"emptyLinePlaceholder":1050},[1002,102995,102996,102999,103002],{"class":1004,"line":2774},[1002,102997,102998],{"class":1030},"Vehicle.instance.",[1002,103000,103001],{"class":1026},"showName",[1002,103003,1428],{"class":1030},[1002,103005,103006],{"class":1004,"line":2790},[1002,103007,1051],{"emptyLinePlaceholder":1050},[1002,103009,103010,103012,103014,103016,103018,103020,103022,103024,103026,103028],{"class":1004,"line":2801},[1002,103011,18311],{"class":1015},[1002,103013,51296],{"class":1030},[1002,103015,2393],{"class":1015},[1002,103017,2690],{"class":1015},[1002,103019,2366],{"class":1026},[1002,103021,1031],{"class":1030},[1002,103023,5681],{"class":1019},[1002,103025,1251],{"class":1030},[1002,103027,3837],{"class":1019},[1002,103029,1085],{"class":1030},[1002,103031,103032,103034,103036],{"class":1004,"line":2807},[1002,103033,3261],{"class":1030},[1002,103035,3264],{"class":1026},[1002,103037,1428],{"class":1030},[953,103039,103041],{"id":103040},"let-const","Let & Const",[925,103043,103044,103045,103047,103048,103050],{},"They are Block-scoped binding constructs. ",[941,103046,6516],{}," has block scope unlike ",[941,103049,18311],{}," which has lexical scope.",[993,103052,103054],{"className":995,"code":103053,"language":997,"meta":998,"style":998},"function run() {\n let it = 'be';\n\n \u002F\u002F block scope\n {\n let it = 'go';\n console.log(it); \u002F\u002F go\n }\n console.log(it); \u002F\u002F be\n}\n\nrun();\n",[941,103055,103056,103064,103077,103081,103086,103090,103103,103115,103119,103130,103134,103138],{"__ignoreMap":998},[1002,103057,103058,103060,103062],{"class":1004,"line":1005},[1002,103059,6965],{"class":1015},[1002,103061,18968],{"class":1026},[1002,103063,3025],{"class":1030},[1002,103065,103066,103068,103071,103073,103075],{"class":1004,"line":1012},[1002,103067,26884],{"class":1015},[1002,103069,103070],{"class":1030}," it ",[1002,103072,2393],{"class":1015},[1002,103074,91342],{"class":1034},[1002,103076,1407],{"class":1030},[1002,103078,103079],{"class":1004,"line":1047},[1002,103080,1051],{"emptyLinePlaceholder":1050},[1002,103082,103083],{"class":1004,"line":1054},[1002,103084,103085],{"class":1008}," \u002F\u002F block scope\n",[1002,103087,103088],{"class":1004,"line":1060},[1002,103089,1235],{"class":1030},[1002,103091,103092,103094,103096,103098,103101],{"class":1004,"line":1272},[1002,103093,12922],{"class":1015},[1002,103095,103070],{"class":1030},[1002,103097,2393],{"class":1015},[1002,103099,103100],{"class":1034}," 'go'",[1002,103102,1407],{"class":1030},[1002,103104,103105,103107,103109,103112],{"class":1004,"line":1348},[1002,103106,3030],{"class":1030},[1002,103108,2886],{"class":1026},[1002,103110,103111],{"class":1030},"(it); ",[1002,103113,103114],{"class":1008},"\u002F\u002F go\n",[1002,103116,103117],{"class":1004,"line":1354},[1002,103118,1269],{"class":1030},[1002,103120,103121,103123,103125,103127],{"class":1004,"line":1360},[1002,103122,6977],{"class":1030},[1002,103124,2886],{"class":1026},[1002,103126,103111],{"class":1030},[1002,103128,103129],{"class":1008},"\u002F\u002F be\n",[1002,103131,103132],{"class":1004,"line":1366},[1002,103133,1170],{"class":1030},[1002,103135,103136],{"class":1004,"line":1946},[1002,103137,1051],{"emptyLinePlaceholder":1050},[1002,103139,103140,103142],{"class":1004,"line":1956},[1002,103141,2061],{"class":1026},[1002,103143,1428],{"class":1030},[7100,103145,103147],{"title":103146,"type":24048},"Single Assignment",[925,103148,103149,103150,103152],{},"The constant ",[941,103151,1016],{}," can only be assigned once and immutable. It prevents use before assignment.",[993,103154,103156],{"className":995,"code":103155,"language":997,"meta":998,"style":998},"function run() {\n const it = 'be';\n\n it = 'go'; \u002F\u002F error: trying to override 'it' constant\n\n console.log(it);\n}\n\nrun();\n",[941,103157,103158,103166,103179,103183,103197,103201,103210,103214,103218],{"__ignoreMap":998},[1002,103159,103160,103162,103164],{"class":1004,"line":1005},[1002,103161,6965],{"class":1015},[1002,103163,18968],{"class":1026},[1002,103165,3025],{"class":1030},[1002,103167,103168,103170,103173,103175,103177],{"class":1004,"line":1012},[1002,103169,10423],{"class":1015},[1002,103171,103172],{"class":1019}," it",[1002,103174,1023],{"class":1015},[1002,103176,91342],{"class":1034},[1002,103178,1407],{"class":1030},[1002,103180,103181],{"class":1004,"line":1047},[1002,103182,1051],{"emptyLinePlaceholder":1050},[1002,103184,103185,103188,103190,103192,103194],{"class":1004,"line":1054},[1002,103186,103187],{"class":1030}," it ",[1002,103189,2393],{"class":1015},[1002,103191,103100],{"class":1034},[1002,103193,17938],{"class":1030},[1002,103195,103196],{"class":1008},"\u002F\u002F error: trying to override 'it' constant\n",[1002,103198,103199],{"class":1004,"line":1060},[1002,103200,1051],{"emptyLinePlaceholder":1050},[1002,103202,103203,103205,103207],{"class":1004,"line":1272},[1002,103204,6977],{"class":1030},[1002,103206,2886],{"class":1026},[1002,103208,103209],{"class":1030},"(it);\n",[1002,103211,103212],{"class":1004,"line":1348},[1002,103213,1170],{"class":1030},[1002,103215,103216],{"class":1004,"line":1354},[1002,103217,1051],{"emptyLinePlaceholder":1050},[1002,103219,103220,103222],{"class":1004,"line":1360},[1002,103221,2061],{"class":1026},[1002,103223,1428],{"class":1030},[953,103225,103227],{"id":103226},"symbols","Symbols",[925,103229,103230,103231,103233,103234,948],{},"Symbols enable access control for object state. A symbol is a unique and immutable data type and may be used as an identifier for object properties.\nSymbols are a new primitive type. Optional ",[941,103232,5911],{}," parameter used in debugging - but is not part of identity. Symbols are unique, but not private since they are exposed via reflection features like ",[941,103235,82215],{},[993,103237,103239],{"className":995,"code":103238,"language":997,"meta":998,"style":998},"var count = Symbol('count');\n\nclass People {\n constructor() {\n this[count] = 0;\n }\n\n add(item) {\n this[this[count]] = item;\n this[count]++;\n }\n\n static sizeOf(instance) {\n return instance[count];\n }\n}\n\nvar people = new People();\n\nconsole.log(Symbol('count') === Symbol('count')); \u002F\u002F false\nconsole.log(People.sizeOf(people)); \u002F\u002F 0\n\npeople.add('John Smith');\n\nconsole.log(People.sizeOf(people)); \u002F\u002F 1\n",[941,103240,103241,103257,103261,103270,103276,103289,103293,103297,103307,103322,103333,103337,103341,103354,103361,103365,103369,103373,103388,103392,103420,103437,103441,103454,103458],{"__ignoreMap":998},[1002,103242,103243,103245,103247,103249,103251,103253,103255],{"class":1004,"line":1005},[1002,103244,18311],{"class":1015},[1002,103246,4700],{"class":1030},[1002,103248,2393],{"class":1015},[1002,103250,31088],{"class":1026},[1002,103252,1031],{"class":1030},[1002,103254,21294],{"class":1034},[1002,103256,1085],{"class":1030},[1002,103258,103259],{"class":1004,"line":1012},[1002,103260,1051],{"emptyLinePlaceholder":1050},[1002,103262,103263,103265,103268],{"class":1004,"line":1047},[1002,103264,2363],{"class":1015},[1002,103266,103267],{"class":1026}," People",[1002,103269,1457],{"class":1030},[1002,103271,103272,103274],{"class":1004,"line":1054},[1002,103273,2373],{"class":1015},[1002,103275,3025],{"class":1030},[1002,103277,103278,103280,103283,103285,103287],{"class":1004,"line":1060},[1002,103279,2387],{"class":1019},[1002,103281,103282],{"class":1030},"[count] ",[1002,103284,2393],{"class":1015},[1002,103286,4910],{"class":1019},[1002,103288,1407],{"class":1030},[1002,103290,103291],{"class":1004,"line":1272},[1002,103292,1269],{"class":1030},[1002,103294,103295],{"class":1004,"line":1348},[1002,103296,1051],{"emptyLinePlaceholder":1050},[1002,103298,103299,103301,103303,103305],{"class":1004,"line":1354},[1002,103300,5042],{"class":1026},[1002,103302,1031],{"class":1030},[1002,103304,6970],{"class":2378},[1002,103306,2382],{"class":1030},[1002,103308,103309,103311,103313,103315,103318,103320],{"class":1004,"line":1360},[1002,103310,2387],{"class":1019},[1002,103312,31462],{"class":1030},[1002,103314,3455],{"class":1019},[1002,103316,103317],{"class":1030},"[count]] ",[1002,103319,2393],{"class":1015},[1002,103321,8344],{"class":1030},[1002,103323,103324,103326,103329,103331],{"class":1004,"line":1366},[1002,103325,2387],{"class":1019},[1002,103327,103328],{"class":1030},"[count]",[1002,103330,6545],{"class":1015},[1002,103332,1407],{"class":1030},[1002,103334,103335],{"class":1004,"line":1946},[1002,103336,1269],{"class":1030},[1002,103338,103339],{"class":1004,"line":1956},[1002,103340,1051],{"emptyLinePlaceholder":1050},[1002,103342,103343,103345,103348,103350,103352],{"class":1004,"line":1961},[1002,103344,13506],{"class":1015},[1002,103346,103347],{"class":1026}," sizeOf",[1002,103349,1031],{"class":1030},[1002,103351,21314],{"class":2378},[1002,103353,2382],{"class":1030},[1002,103355,103356,103358],{"class":1004,"line":1971},[1002,103357,2687],{"class":1015},[1002,103359,103360],{"class":1030}," instance[count];\n",[1002,103362,103363],{"class":1004,"line":1980},[1002,103364,1269],{"class":1030},[1002,103366,103367],{"class":1004,"line":1985},[1002,103368,1170],{"class":1030},[1002,103370,103371],{"class":1004,"line":1995},[1002,103372,1051],{"emptyLinePlaceholder":1050},[1002,103374,103375,103377,103380,103382,103384,103386],{"class":1004,"line":2006},[1002,103376,18311],{"class":1015},[1002,103378,103379],{"class":1030}," people ",[1002,103381,2393],{"class":1015},[1002,103383,2690],{"class":1015},[1002,103385,103267],{"class":1026},[1002,103387,1428],{"class":1030},[1002,103389,103390],{"class":1004,"line":2011},[1002,103391,1051],{"emptyLinePlaceholder":1050},[1002,103393,103394,103396,103398,103400,103402,103404,103406,103408,103410,103412,103414,103416,103418],{"class":1004,"line":2017},[1002,103395,2883],{"class":1030},[1002,103397,2886],{"class":1026},[1002,103399,1031],{"class":1030},[1002,103401,102197],{"class":1026},[1002,103403,1031],{"class":1030},[1002,103405,21294],{"class":1034},[1002,103407,5876],{"class":1030},[1002,103409,2892],{"class":1015},[1002,103411,31088],{"class":1026},[1002,103413,1031],{"class":1030},[1002,103415,21294],{"class":1034},[1002,103417,85500],{"class":1030},[1002,103419,25986],{"class":1008},[1002,103421,103422,103424,103426,103429,103432,103435],{"class":1004,"line":2022},[1002,103423,2883],{"class":1030},[1002,103425,2886],{"class":1026},[1002,103427,103428],{"class":1030},"(People.",[1002,103430,103431],{"class":1026},"sizeOf",[1002,103433,103434],{"class":1030},"(people)); ",[1002,103436,25939],{"class":1008},[1002,103438,103439],{"class":1004,"line":2442},[1002,103440,1051],{"emptyLinePlaceholder":1050},[1002,103442,103443,103446,103448,103450,103452],{"class":1004,"line":2466},[1002,103444,103445],{"class":1030},"people.",[1002,103447,7985],{"class":1026},[1002,103449,1031],{"class":1030},[1002,103451,99630],{"class":1034},[1002,103453,1085],{"class":1030},[1002,103455,103456],{"class":1004,"line":2471},[1002,103457,1051],{"emptyLinePlaceholder":1050},[1002,103459,103460,103462,103464,103466,103468,103470],{"class":1004,"line":2476},[1002,103461,2883],{"class":1030},[1002,103463,2886],{"class":1026},[1002,103465,103428],{"class":1030},[1002,103467,103431],{"class":1026},[1002,103469,103434],{"class":1030},[1002,103471,50532],{"class":1008},[953,103473,82688],{"id":103474},"generators",[925,103476,103477],{},"Generators are functions that can be paused(exit) and resumed(re-enter).\nTheir context (variable bindings) will be saved across re-entrances.\nThese can be helpful for iterators, asynchronous programming, etc.",[7100,103479,103481],{"title":103480,"type":24048},"Execution",[925,103482,103483,103484,103487,103488,103490],{},"Calling a generator function does not execute its body immediately; an iterator object for the function is returned instead.\nWhen the iterator's ",[941,103485,103486],{},"next()"," method is called, the generator function's body is executed until the first ",[941,103489,34559],{}," expression.",[993,103492,103494],{"className":995,"code":103493,"language":997,"meta":998,"style":998},"var fib = fibonacci();\n\nfunction* fibonacci() {\n let val1 = 0,\n val2 = 1,\n swap;\n\n yield val1;\n yield val2;\n\n while (true) {\n swap = val1 + val2;\n val1 = val2;\n val2 = swap;\n\n yield swap;\n }\n}\n\nfunction run() {\n let i = 0;\n\n while (i \u003C 10) {\n console.log(fib.next().value);\n i++;\n }\n}\n\nrun();\n",[941,103495,103496,103510,103514,103522,103535,103546,103551,103555,103562,103569,103573,103583,103596,103605,103614,103618,103624,103628,103632,103636,103644,103656,103660,103672,103686,103695,103699,103703,103707],{"__ignoreMap":998},[1002,103497,103498,103500,103503,103505,103508],{"class":1004,"line":1005},[1002,103499,18311],{"class":1015},[1002,103501,103502],{"class":1030}," fib ",[1002,103504,2393],{"class":1015},[1002,103506,103507],{"class":1026}," fibonacci",[1002,103509,1428],{"class":1030},[1002,103511,103512],{"class":1004,"line":1012},[1002,103513,1051],{"emptyLinePlaceholder":1050},[1002,103515,103516,103518,103520],{"class":1004,"line":1047},[1002,103517,34637],{"class":1015},[1002,103519,103507],{"class":1026},[1002,103521,3025],{"class":1030},[1002,103523,103524,103526,103529,103531,103533],{"class":1004,"line":1054},[1002,103525,26884],{"class":1015},[1002,103527,103528],{"class":1030}," val1 ",[1002,103530,2393],{"class":1015},[1002,103532,4910],{"class":1019},[1002,103534,1143],{"class":1030},[1002,103536,103537,103540,103542,103544],{"class":1004,"line":1060},[1002,103538,103539],{"class":1030}," val2 ",[1002,103541,2393],{"class":1015},[1002,103543,6246],{"class":1019},[1002,103545,1143],{"class":1030},[1002,103547,103548],{"class":1004,"line":1272},[1002,103549,103550],{"class":1030}," swap;\n",[1002,103552,103553],{"class":1004,"line":1348},[1002,103554,1051],{"emptyLinePlaceholder":1050},[1002,103556,103557,103559],{"class":1004,"line":1354},[1002,103558,31168],{"class":1015},[1002,103560,103561],{"class":1030}," val1;\n",[1002,103563,103564,103566],{"class":1004,"line":1360},[1002,103565,31168],{"class":1015},[1002,103567,103568],{"class":1030}," val2;\n",[1002,103570,103571],{"class":1004,"line":1366},[1002,103572,1051],{"emptyLinePlaceholder":1050},[1002,103574,103575,103577,103579,103581],{"class":1004,"line":1946},[1002,103576,49632],{"class":1015},[1002,103578,6513],{"class":1030},[1002,103580,17397],{"class":1019},[1002,103582,2382],{"class":1030},[1002,103584,103585,103588,103590,103592,103594],{"class":1004,"line":1956},[1002,103586,103587],{"class":1030}," swap ",[1002,103589,2393],{"class":1015},[1002,103591,103528],{"class":1030},[1002,103593,5064],{"class":1015},[1002,103595,103568],{"class":1030},[1002,103597,103598,103601,103603],{"class":1004,"line":1961},[1002,103599,103600],{"class":1030}," val1 ",[1002,103602,2393],{"class":1015},[1002,103604,103568],{"class":1030},[1002,103606,103607,103609,103611],{"class":1004,"line":1971},[1002,103608,103539],{"class":1030},[1002,103610,2393],{"class":1015},[1002,103612,103613],{"class":1030}," swap;\n",[1002,103615,103616],{"class":1004,"line":1980},[1002,103617,1051],{"emptyLinePlaceholder":1050},[1002,103619,103620,103622],{"class":1004,"line":1985},[1002,103621,49651],{"class":1015},[1002,103623,103613],{"class":1030},[1002,103625,103626],{"class":1004,"line":1995},[1002,103627,1269],{"class":1030},[1002,103629,103630],{"class":1004,"line":2006},[1002,103631,1170],{"class":1030},[1002,103633,103634],{"class":1004,"line":2011},[1002,103635,1051],{"emptyLinePlaceholder":1050},[1002,103637,103638,103640,103642],{"class":1004,"line":2017},[1002,103639,6965],{"class":1015},[1002,103641,18968],{"class":1026},[1002,103643,3025],{"class":1030},[1002,103645,103646,103648,103650,103652,103654],{"class":1004,"line":2022},[1002,103647,26884],{"class":1015},[1002,103649,6519],{"class":1030},[1002,103651,2393],{"class":1015},[1002,103653,4910],{"class":1019},[1002,103655,1407],{"class":1030},[1002,103657,103658],{"class":1004,"line":2442},[1002,103659,1051],{"emptyLinePlaceholder":1050},[1002,103661,103662,103664,103666,103668,103670],{"class":1004,"line":2466},[1002,103663,49632],{"class":1015},[1002,103665,44863],{"class":1030},[1002,103667,6539],{"class":1015},[1002,103669,8970],{"class":1019},[1002,103671,2382],{"class":1030},[1002,103673,103674,103676,103678,103681,103683],{"class":1004,"line":2471},[1002,103675,3030],{"class":1030},[1002,103677,2886],{"class":1026},[1002,103679,103680],{"class":1030},"(fib.",[1002,103682,6623],{"class":1026},[1002,103684,103685],{"class":1030},"().value);\n",[1002,103687,103688,103691,103693],{"class":1004,"line":2476},[1002,103689,103690],{"class":1030}," i",[1002,103692,6545],{"class":1015},[1002,103694,1407],{"class":1030},[1002,103696,103697],{"class":1004,"line":2481},[1002,103698,1269],{"class":1030},[1002,103700,103701],{"class":1004,"line":2491},[1002,103702,1170],{"class":1030},[1002,103704,103705],{"class":1004,"line":2502},[1002,103706,1051],{"emptyLinePlaceholder":1050},[1002,103708,103709,103711],{"class":1004,"line":2513},[1002,103710,2061],{"class":1026},[1002,103712,1428],{"class":1030},[953,103714,103716],{"id":103715},"iterators-forof","Iterators & For..of",[925,103718,103719,103720,87035,103722,948],{},"Iterator enables JavaScript objects to define custom iteration like CLR IEnumerable or Java Iterable.\nThis will generalize ",[941,103721,82390],{},[941,103723,82594],{},[7100,103725,103726],{"title":82487,"type":24048},[925,103727,87043,103728,87046,103730,948],{},[941,103729,82487],{},[941,103731,87049],{},[993,103733,103735],{"className":995,"code":103734,"language":997,"meta":998,"style":998},"var foo = 'foo',\n iter1,\n iter2,\n iter3,\n iter4,\n iterator;\n\niterator = foo[Symbol.iterator]();\n\niter1 = iterator.next();\niter2 = iterator.next();\niter3 = iterator.next();\niter4 = iterator.next();\n\nconsole.log(iter1); \u002F\u002F done: false, value: \"f\"\nconsole.log(iter2); \u002F\u002F done: false, value: \"o\"\nconsole.log(iter3); \u002F\u002F done: false, value: \"o\"\nconsole.log(iter4); \u002F\u002F done: true, value: undefined\n",[941,103736,103737,103749,103753,103757,103761,103765,103769,103773,103781,103785,103797,103809,103821,103833,103837,103847,103857,103867],{"__ignoreMap":998},[1002,103738,103739,103741,103743,103745,103747],{"class":1004,"line":1005},[1002,103740,18311],{"class":1015},[1002,103742,38379],{"class":1030},[1002,103744,2393],{"class":1015},[1002,103746,87067],{"class":1034},[1002,103748,1143],{"class":1030},[1002,103750,103751],{"class":1004,"line":1012},[1002,103752,87074],{"class":1030},[1002,103754,103755],{"class":1004,"line":1047},[1002,103756,87079],{"class":1030},[1002,103758,103759],{"class":1004,"line":1054},[1002,103760,87084],{"class":1030},[1002,103762,103763],{"class":1004,"line":1060},[1002,103764,87089],{"class":1030},[1002,103766,103767],{"class":1004,"line":1272},[1002,103768,87094],{"class":1030},[1002,103770,103771],{"class":1004,"line":1348},[1002,103772,1051],{"emptyLinePlaceholder":1050},[1002,103774,103775,103777,103779],{"class":1004,"line":1354},[1002,103776,87103],{"class":1030},[1002,103778,2393],{"class":1015},[1002,103780,87108],{"class":1030},[1002,103782,103783],{"class":1004,"line":1360},[1002,103784,1051],{"emptyLinePlaceholder":1050},[1002,103786,103787,103789,103791,103793,103795],{"class":1004,"line":1366},[1002,103788,87117],{"class":1030},[1002,103790,2393],{"class":1015},[1002,103792,82628],{"class":1030},[1002,103794,6623],{"class":1026},[1002,103796,1428],{"class":1030},[1002,103798,103799,103801,103803,103805,103807],{"class":1004,"line":1946},[1002,103800,87130],{"class":1030},[1002,103802,2393],{"class":1015},[1002,103804,82628],{"class":1030},[1002,103806,6623],{"class":1026},[1002,103808,1428],{"class":1030},[1002,103810,103811,103813,103815,103817,103819],{"class":1004,"line":1956},[1002,103812,87143],{"class":1030},[1002,103814,2393],{"class":1015},[1002,103816,82628],{"class":1030},[1002,103818,6623],{"class":1026},[1002,103820,1428],{"class":1030},[1002,103822,103823,103825,103827,103829,103831],{"class":1004,"line":1961},[1002,103824,87156],{"class":1030},[1002,103826,2393],{"class":1015},[1002,103828,82628],{"class":1030},[1002,103830,6623],{"class":1026},[1002,103832,1428],{"class":1030},[1002,103834,103835],{"class":1004,"line":1971},[1002,103836,1051],{"emptyLinePlaceholder":1050},[1002,103838,103839,103841,103843,103845],{"class":1004,"line":1980},[1002,103840,2883],{"class":1030},[1002,103842,2886],{"class":1026},[1002,103844,87177],{"class":1030},[1002,103846,87180],{"class":1008},[1002,103848,103849,103851,103853,103855],{"class":1004,"line":1985},[1002,103850,2883],{"class":1030},[1002,103852,2886],{"class":1026},[1002,103854,87189],{"class":1030},[1002,103856,87192],{"class":1008},[1002,103858,103859,103861,103863,103865],{"class":1004,"line":1995},[1002,103860,2883],{"class":1030},[1002,103862,2886],{"class":1026},[1002,103864,87201],{"class":1030},[1002,103866,87192],{"class":1008},[1002,103868,103869,103871,103873,103875],{"class":1004,"line":2006},[1002,103870,2883],{"class":1030},[1002,103872,2886],{"class":1026},[1002,103874,87212],{"class":1030},[1002,103876,103877],{"class":1008},"\u002F\u002F done: true, value: undefined\n",[925,103879,3898,103880,103883],{},[941,103881,103882],{},"for...of"," statement creates a loop Iterating over iterable objects (including Array, Map, Set, arguments object and so on),\ninvoking a custom iteration hook with statements to be executed for the value of each distinct property.",[993,103885,103887],{"className":995,"code":103886,"language":997,"meta":998,"style":998},"var fib = fibonacci();\n\nfunction* fibonacci() {\n let val1 = 0,\n val2 = 1,\n swap;\n\n yield val1;\n yield val2;\n\n while (true) {\n swap = val1 + val2;\n val1 = val2;\n val2 = swap;\n\n yield swap;\n }\n}\n\nfor (var n of fib) {\n \u002F\u002F truncate the sequence at 1000\n if (n > 1000) break;\n console.log(n);\n}\n\nrun(); \u002F\u002F 1 1 2 3 5 8 13 21 34 55 89 144 233\n",[941,103888,103889,103901,103905,103913,103925,103935,103939,103943,103949,103955,103959,103969,103981,103989,103997,104001,104007,104011,104015,104019,104034,104039,104056,104064,104068,104072],{"__ignoreMap":998},[1002,103890,103891,103893,103895,103897,103899],{"class":1004,"line":1005},[1002,103892,18311],{"class":1015},[1002,103894,103502],{"class":1030},[1002,103896,2393],{"class":1015},[1002,103898,103507],{"class":1026},[1002,103900,1428],{"class":1030},[1002,103902,103903],{"class":1004,"line":1012},[1002,103904,1051],{"emptyLinePlaceholder":1050},[1002,103906,103907,103909,103911],{"class":1004,"line":1047},[1002,103908,34637],{"class":1015},[1002,103910,103507],{"class":1026},[1002,103912,3025],{"class":1030},[1002,103914,103915,103917,103919,103921,103923],{"class":1004,"line":1054},[1002,103916,26884],{"class":1015},[1002,103918,103528],{"class":1030},[1002,103920,2393],{"class":1015},[1002,103922,4910],{"class":1019},[1002,103924,1143],{"class":1030},[1002,103926,103927,103929,103931,103933],{"class":1004,"line":1060},[1002,103928,103539],{"class":1030},[1002,103930,2393],{"class":1015},[1002,103932,6246],{"class":1019},[1002,103934,1143],{"class":1030},[1002,103936,103937],{"class":1004,"line":1272},[1002,103938,103550],{"class":1030},[1002,103940,103941],{"class":1004,"line":1348},[1002,103942,1051],{"emptyLinePlaceholder":1050},[1002,103944,103945,103947],{"class":1004,"line":1354},[1002,103946,31168],{"class":1015},[1002,103948,103561],{"class":1030},[1002,103950,103951,103953],{"class":1004,"line":1360},[1002,103952,31168],{"class":1015},[1002,103954,103568],{"class":1030},[1002,103956,103957],{"class":1004,"line":1366},[1002,103958,1051],{"emptyLinePlaceholder":1050},[1002,103960,103961,103963,103965,103967],{"class":1004,"line":1946},[1002,103962,49632],{"class":1015},[1002,103964,6513],{"class":1030},[1002,103966,17397],{"class":1019},[1002,103968,2382],{"class":1030},[1002,103970,103971,103973,103975,103977,103979],{"class":1004,"line":1956},[1002,103972,103587],{"class":1030},[1002,103974,2393],{"class":1015},[1002,103976,103528],{"class":1030},[1002,103978,5064],{"class":1015},[1002,103980,103568],{"class":1030},[1002,103982,103983,103985,103987],{"class":1004,"line":1961},[1002,103984,103600],{"class":1030},[1002,103986,2393],{"class":1015},[1002,103988,103568],{"class":1030},[1002,103990,103991,103993,103995],{"class":1004,"line":1971},[1002,103992,103539],{"class":1030},[1002,103994,2393],{"class":1015},[1002,103996,103613],{"class":1030},[1002,103998,103999],{"class":1004,"line":1980},[1002,104000,1051],{"emptyLinePlaceholder":1050},[1002,104002,104003,104005],{"class":1004,"line":1985},[1002,104004,49651],{"class":1015},[1002,104006,103613],{"class":1030},[1002,104008,104009],{"class":1004,"line":1995},[1002,104010,1269],{"class":1030},[1002,104012,104013],{"class":1004,"line":2006},[1002,104014,1170],{"class":1030},[1002,104016,104017],{"class":1004,"line":2011},[1002,104018,1051],{"emptyLinePlaceholder":1050},[1002,104020,104021,104023,104025,104027,104029,104031],{"class":1004,"line":2017},[1002,104022,6510],{"class":1015},[1002,104024,6513],{"class":1030},[1002,104026,18311],{"class":1015},[1002,104028,39192],{"class":1030},[1002,104030,39708],{"class":1015},[1002,104032,104033],{"class":1030}," fib) {\n",[1002,104035,104036],{"class":1004,"line":2022},[1002,104037,104038],{"class":1008}," \u002F\u002F truncate the sequence at 1000\n",[1002,104040,104041,104043,104045,104047,104050,104052,104054],{"class":1004,"line":2442},[1002,104042,19971],{"class":1015},[1002,104044,100360],{"class":1030},[1002,104046,19171],{"class":1015},[1002,104048,104049],{"class":1019}," 1000",[1002,104051,5876],{"class":1030},[1002,104053,86761],{"class":1015},[1002,104055,1407],{"class":1030},[1002,104057,104058,104060,104062],{"class":1004,"line":2466},[1002,104059,6977],{"class":1030},[1002,104061,2886],{"class":1026},[1002,104063,100551],{"class":1030},[1002,104065,104066],{"class":1004,"line":2471},[1002,104067,1170],{"class":1030},[1002,104069,104070],{"class":1004,"line":2476},[1002,104071,1051],{"emptyLinePlaceholder":1050},[1002,104073,104074,104076,104078],{"class":1004,"line":2481},[1002,104075,2061],{"class":1026},[1002,104077,6859],{"class":1030},[1002,104079,104080],{"class":1008},"\u002F\u002F 1 1 2 3 5 8 13 21 34 55 89 144 233\n",[953,104082,30516],{"id":48863},[925,104084,104085],{},"Promises are a library for asynchronous programming. Promises are a first-class representation of a value that may be made available in the future.\nPromises are used in many existing JavaScript libraries.",[7100,104087,104089],{"title":104088,"type":24048},"ES6 Promise API",[925,104090,104091,104092,104095],{},"The de-facto standard for JavaScript promises is called ",[941,104093,104094],{},"Promises\u002FA+",". ES6 Promise API follows this standard.",[925,104097,104098],{},"Promises are a pattern that helps with asynchronous programming, functions that return their results asynchronously.",[993,104100,104102],{"className":995,"code":104101,"language":997,"meta":998,"style":998},"function timeout(duration = 0) {\n return new Promise((resolve, reject) => {\n setTimeout(resolve, duration);\n console.log('Timed out.. ' + duration);\n });\n}\n\nvar p = timeout(1000)\n .then(() => {\n return timeout(2000);\n })\n .then(() => {\n throw new Error('uh oh!');\n })\n .catch((err) => {\n return Promise.all([timeout(100), timeout(200)]);\n });\n",[941,104103,104104,104122,104144,104151,104167,104171,104175,104179,104195,104207,104220,104224,104236,104251,104255,104271,104301],{"__ignoreMap":998},[1002,104105,104106,104108,104111,104113,104116,104118,104120],{"class":1004,"line":1005},[1002,104107,6965],{"class":1015},[1002,104109,104110],{"class":1026}," timeout",[1002,104112,1031],{"class":1030},[1002,104114,104115],{"class":2378},"duration",[1002,104117,1023],{"class":1015},[1002,104119,4910],{"class":1019},[1002,104121,2382],{"class":1030},[1002,104123,104124,104126,104128,104130,104132,104134,104136,104138,104140,104142],{"class":1004,"line":1012},[1002,104125,15066],{"class":1015},[1002,104127,2690],{"class":1015},[1002,104129,25561],{"class":1019},[1002,104131,21121],{"class":1030},[1002,104133,1243],{"class":2378},[1002,104135,1251],{"class":1030},[1002,104137,25597],{"class":2378},[1002,104139,5876],{"class":1030},[1002,104141,15497],{"class":1015},[1002,104143,1457],{"class":1030},[1002,104145,104146,104148],{"class":1004,"line":1047},[1002,104147,21024],{"class":1026},[1002,104149,104150],{"class":1030},"(resolve, duration);\n",[1002,104152,104153,104155,104157,104159,104162,104164],{"class":1004,"line":1054},[1002,104154,3030],{"class":1030},[1002,104156,2886],{"class":1026},[1002,104158,1031],{"class":1030},[1002,104160,104161],{"class":1034},"'Timed out.. '",[1002,104163,6583],{"class":1015},[1002,104165,104166],{"class":1030}," duration);\n",[1002,104168,104169],{"class":1004,"line":1060},[1002,104170,19836],{"class":1030},[1002,104172,104173],{"class":1004,"line":1272},[1002,104174,1170],{"class":1030},[1002,104176,104177],{"class":1004,"line":1348},[1002,104178,1051],{"emptyLinePlaceholder":1050},[1002,104180,104181,104183,104185,104187,104189,104191,104193],{"class":1004,"line":1354},[1002,104182,18311],{"class":1015},[1002,104184,99415],{"class":1030},[1002,104186,2393],{"class":1015},[1002,104188,104110],{"class":1026},[1002,104190,1031],{"class":1030},[1002,104192,6370],{"class":1019},[1002,104194,3808],{"class":1030},[1002,104196,104197,104199,104201,104203,104205],{"class":1004,"line":1360},[1002,104198,3794],{"class":1030},[1002,104200,25658],{"class":1026},[1002,104202,15494],{"class":1030},[1002,104204,15497],{"class":1015},[1002,104206,1457],{"class":1030},[1002,104208,104209,104211,104213,104215,104218],{"class":1004,"line":1366},[1002,104210,2687],{"class":1015},[1002,104212,104110],{"class":1026},[1002,104214,1031],{"class":1030},[1002,104216,104217],{"class":1019},"2000",[1002,104219,1085],{"class":1030},[1002,104221,104222],{"class":1004,"line":1946},[1002,104223,61349],{"class":1030},[1002,104225,104226,104228,104230,104232,104234],{"class":1004,"line":1956},[1002,104227,3794],{"class":1030},[1002,104229,25658],{"class":1026},[1002,104231,15494],{"class":1030},[1002,104233,15497],{"class":1015},[1002,104235,1457],{"class":1030},[1002,104237,104238,104240,104242,104244,104246,104249],{"class":1004,"line":1961},[1002,104239,42635],{"class":1015},[1002,104241,2690],{"class":1015},[1002,104243,42640],{"class":1026},[1002,104245,1031],{"class":1030},[1002,104247,104248],{"class":1034},"'uh oh!'",[1002,104250,1085],{"class":1030},[1002,104252,104253],{"class":1004,"line":1971},[1002,104254,61349],{"class":1030},[1002,104256,104257,104259,104261,104263,104265,104267,104269],{"class":1004,"line":1980},[1002,104258,3794],{"class":1030},[1002,104260,30648],{"class":1026},[1002,104262,21121],{"class":1030},[1002,104264,31035],{"class":2378},[1002,104266,5876],{"class":1030},[1002,104268,15497],{"class":1015},[1002,104270,1457],{"class":1030},[1002,104272,104273,104275,104277,104279,104281,104283,104286,104288,104290,104292,104294,104296,104298],{"class":1004,"line":1985},[1002,104274,2687],{"class":1015},[1002,104276,25561],{"class":1019},[1002,104278,948],{"class":1030},[1002,104280,17964],{"class":1026},[1002,104282,30910],{"class":1030},[1002,104284,104285],{"class":1026},"timeout",[1002,104287,1031],{"class":1030},[1002,104289,4791],{"class":1019},[1002,104291,38570],{"class":1030},[1002,104293,104285],{"class":1026},[1002,104295,1031],{"class":1030},[1002,104297,28403],{"class":1019},[1002,104299,104300],{"class":1030},")]);\n",[1002,104302,104303],{"class":1004,"line":1995},[1002,104304,19836],{"class":1030},[953,104306,104307],{"id":83448},"Destructuring",[925,104309,104310],{},"The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.",[7100,104312,104313,104321,104325,104328,104360,104368,104372,104391,104394,104417,104421,104436,104689,104705,104716,104727,104731,104737,104808,104818,104927,104931,105013,105017,105021,105024,105224,105226,105228,105232,105262],{"title":34624,"type":24048},[993,104314,104319],{"className":104315,"code":104316,"filename":104317,"language":24241,"meta":104318},[24239]," [a, b, ...rest] = [1, 2, 3, 4, 5]\u003Cbr>\n {a, b} = {a:1, b:2}```\n::\n\nThis capability is similar to features present in languages such as Perl and Python.\n\n```js\nvar fruits = [\"apple\", \"orange\", \"banana\"];\n\n\u002F* without destructuring\nvar apple = fruits[0];\nvar orange = fruits[1];\nvar banana = fruits[2];\n*\u002F\n\n\u002F\u002F with destructuring\nvar [apple, orange, banana] = fruits;\n\nconsole.log(apple); \u002F\u002F \"apple\"\nconsole.log([orange, banana]);\u002F\u002F [\"orange\", \"banana\"]\n","a, b] = [1, 2","\u003Cbr>",[941,104320,104316],{"__ignoreMap":998},[953,104322,104324],{"id":104323},"modules","Modules",[925,104326,104327],{},"A module is a self-contained unit of code, which is usually stored in a file. In ES6, modules get language-level support for component definition.\nThere are two popular for JavaScript module loaders.",[1530,104329,104330,104345],{},[974,104331,104332,104334,104335,104337],{},[1107,104333,87246],{},"\" Used heavily in ",[941,104336,33001],{},[1530,104338,104339,104341,104343],{},[974,104340,87254],{},[974,104342,87257],{},[974,104344,87260],{},[974,104346,104347,104349,104350,104352],{},[1107,104348,87265],{},"\" Used by ",[941,104351,87269],{},[1530,104353,104354,104356,104358],{},[974,104355,87274],{},[974,104357,87277],{},[974,104359,87280],{},[7100,104361,104362],{"title":87283,"type":24048},[925,104363,87286,104364,87289,104366,87292],{},[941,104365,947],{},[941,104367,943],{},[1655,104369,104371],{"id":104370},"libsmathjs","libs\u002Fmath.js",[993,104373,104375],{"className":995,"code":104374,"language":997,"meta":998,"style":998}," return x + y;\n}\n",[941,104376,104377,104387],{"__ignoreMap":998},[1002,104378,104379,104381,104383,104385],{"class":1004,"line":1005},[1002,104380,15066],{"class":1015},[1002,104382,77069],{"class":1030},[1002,104384,5064],{"class":1015},[1002,104386,77074],{"class":1030},[1002,104388,104389],{"class":1004,"line":1012},[1002,104390,1170],{"class":1030},[1655,104392,47429],{"id":104393},"appjs",[993,104395,104397],{"className":995,"code":104396,"language":997,"meta":998,"style":998},"alert('2π = ' + math.sum(math.pi, math.pi));\n",[941,104398,104399],{"__ignoreMap":998},[1002,104400,104401,104403,104405,104407,104409,104412,104414],{"class":1004,"line":1005},[1002,104402,93687],{"class":1026},[1002,104404,1031],{"class":1030},[1002,104406,101472],{"class":1034},[1002,104408,6583],{"class":1015},[1002,104410,104411],{"class":1030}," math.",[1002,104413,77047],{"class":1026},[1002,104415,104416],{"class":1030},"(math.pi, math.pi));\n",[953,104418,104420],{"id":104419},"math-number-string-object-apis","Math + Number + String + Object APIs",[925,104422,104423,104424,104427,104428,104431,104432,104435],{},"ES6 has many new library additions, including core ",[941,104425,104426],{},"Math"," libraries, ",[941,104429,104430],{},"Array conversion"," helpers, and ",[941,104433,104434],{},"Object.assign"," for copying.",[993,104437,104439],{"className":995,"code":104438,"language":997,"meta":998,"style":998},"Number.EPSILON; \u002F\u002F fixes decimal fractions, rounding errors\nNumber.isInteger(Infinity); \u002F\u002F false\nNumber.isFinite(Infinity); \u002F\u002F false\nNumber.isNaN('NaN'); \u002F\u002F false\nNumber.isSafeInteger(Infinity); \u002F\u002F false\n\nMath.acosh(3); \u002F\u002F 1.762747174039086\nMath.hypot(3, 4); \u002F\u002F 5\nMath.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2); \u002F\u002F 2\n\n'abcde'.includes('cd'); \u002F\u002F true\n'abc'.repeat(3); \u002F\u002F \"abcabcabc\"\n\nvar obj = { a: 1 };\nvar copy = Object.assign({}, obj);\nconsole.log(copy); \u002F\u002F { a: 1 }\n",[941,104440,104441,104449,104465,104480,104496,104511,104515,104531,104550,104600,104604,104622,104641,104645,104660,104677],{"__ignoreMap":998},[1002,104442,104443,104446],{"class":1004,"line":1005},[1002,104444,104445],{"class":1030},"Number.EPSILON; ",[1002,104447,104448],{"class":1008},"\u002F\u002F fixes decimal fractions, rounding errors\n",[1002,104450,104451,104454,104457,104459,104461,104463],{"class":1004,"line":1012},[1002,104452,104453],{"class":1030},"Number.",[1002,104455,104456],{"class":1026},"isInteger",[1002,104458,1031],{"class":1030},[1002,104460,59121],{"class":1019},[1002,104462,18256],{"class":1030},[1002,104464,25986],{"class":1008},[1002,104466,104467,104469,104472,104474,104476,104478],{"class":1004,"line":1047},[1002,104468,104453],{"class":1030},[1002,104470,104471],{"class":1026},"isFinite",[1002,104473,1031],{"class":1030},[1002,104475,59121],{"class":1019},[1002,104477,18256],{"class":1030},[1002,104479,25986],{"class":1008},[1002,104481,104482,104484,104487,104489,104492,104494],{"class":1004,"line":1054},[1002,104483,104453],{"class":1030},[1002,104485,104486],{"class":1026},"isNaN",[1002,104488,1031],{"class":1030},[1002,104490,104491],{"class":1034},"'NaN'",[1002,104493,18256],{"class":1030},[1002,104495,25986],{"class":1008},[1002,104497,104498,104500,104503,104505,104507,104509],{"class":1004,"line":1060},[1002,104499,104453],{"class":1030},[1002,104501,104502],{"class":1026},"isSafeInteger",[1002,104504,1031],{"class":1030},[1002,104506,59121],{"class":1019},[1002,104508,18256],{"class":1030},[1002,104510,25986],{"class":1008},[1002,104512,104513],{"class":1004,"line":1272},[1002,104514,1051],{"emptyLinePlaceholder":1050},[1002,104516,104517,104519,104522,104524,104526,104528],{"class":1004,"line":1348},[1002,104518,31364],{"class":1030},[1002,104520,104521],{"class":1026},"acosh",[1002,104523,1031],{"class":1030},[1002,104525,2796],{"class":1019},[1002,104527,18256],{"class":1030},[1002,104529,104530],{"class":1008},"\u002F\u002F 1.762747174039086\n",[1002,104532,104533,104535,104538,104540,104542,104544,104546,104548],{"class":1004,"line":1354},[1002,104534,31364],{"class":1030},[1002,104536,104537],{"class":1026},"hypot",[1002,104539,1031],{"class":1030},[1002,104541,2796],{"class":1019},[1002,104543,1251],{"class":1030},[1002,104545,3837],{"class":1019},[1002,104547,18256],{"class":1030},[1002,104549,5734],{"class":1008},[1002,104551,104552,104554,104557,104559,104562,104564,104566,104568,104571,104573,104575,104577,104580,104582,104584,104586,104588,104590,104592,104594,104596,104598],{"class":1004,"line":1360},[1002,104553,31364],{"class":1030},[1002,104555,104556],{"class":1026},"imul",[1002,104558,52223],{"class":1030},[1002,104560,104561],{"class":1026},"pow",[1002,104563,1031],{"class":1030},[1002,104565,5681],{"class":1019},[1002,104567,1251],{"class":1030},[1002,104569,104570],{"class":1019},"32",[1002,104572,5876],{"class":1030},[1002,104574,5101],{"class":1015},[1002,104576,6246],{"class":1019},[1002,104578,104579],{"class":1030},", Math.",[1002,104581,104561],{"class":1026},[1002,104583,1031],{"class":1030},[1002,104585,5681],{"class":1019},[1002,104587,1251],{"class":1030},[1002,104589,104570],{"class":1019},[1002,104591,5876],{"class":1030},[1002,104593,5101],{"class":1015},[1002,104595,10248],{"class":1019},[1002,104597,18256],{"class":1030},[1002,104599,31325],{"class":1008},[1002,104601,104602],{"class":1004,"line":1366},[1002,104603,1051],{"emptyLinePlaceholder":1050},[1002,104605,104606,104609,104611,104613,104615,104618,104620],{"class":1004,"line":1946},[1002,104607,104608],{"class":1034},"'abcde'",[1002,104610,948],{"class":1030},[1002,104612,13127],{"class":1026},[1002,104614,1031],{"class":1030},[1002,104616,104617],{"class":1034},"'cd'",[1002,104619,18256],{"class":1030},[1002,104621,2877],{"class":1008},[1002,104623,104624,104627,104629,104632,104634,104636,104638],{"class":1004,"line":1956},[1002,104625,104626],{"class":1034},"'abc'",[1002,104628,948],{"class":1030},[1002,104630,104631],{"class":1026},"repeat",[1002,104633,1031],{"class":1030},[1002,104635,2796],{"class":1019},[1002,104637,18256],{"class":1030},[1002,104639,104640],{"class":1008},"\u002F\u002F \"abcabcabc\"\n",[1002,104642,104643],{"class":1004,"line":1961},[1002,104644,1051],{"emptyLinePlaceholder":1050},[1002,104646,104647,104649,104652,104654,104656,104658],{"class":1004,"line":1971},[1002,104648,18311],{"class":1015},[1002,104650,104651],{"class":1030}," obj ",[1002,104653,2393],{"class":1015},[1002,104655,102163],{"class":1030},[1002,104657,6211],{"class":1019},[1002,104659,9444],{"class":1030},[1002,104661,104662,104664,104667,104669,104671,104674],{"class":1004,"line":1980},[1002,104663,18311],{"class":1015},[1002,104665,104666],{"class":1030}," copy ",[1002,104668,2393],{"class":1015},[1002,104670,82475],{"class":1030},[1002,104672,104673],{"class":1026},"assign",[1002,104675,104676],{"class":1030},"({}, obj);\n",[1002,104678,104679,104681,104683,104686],{"class":1004,"line":1985},[1002,104680,2883],{"class":1030},[1002,104682,2886],{"class":1026},[1002,104684,104685],{"class":1030},"(copy); ",[1002,104687,104688],{"class":1008},"\u002F\u002F { a: 1 }\n",[7100,104690,104692],{"title":104691,"type":24048},"Global functions",[925,104693,104694,104695,1251,104697,1251,104699,2034,104702,948],{},"Four number-related functions are already available as global functions and have been added to Number, as methods: ",[941,104696,104471],{},[941,104698,104486],{},[941,104700,104701],{},"parseFloat",[941,104703,104704],{},"parseInt",[925,104706,3898,104707,104710,104711,2034,104713,104715],{},[941,104708,104709],{},"Object.assign()"," method only copies enumerable and own properties from a source object to a target object.\nIt uses [[Get]] on the source and [[Put]] on the target, so it will invoke ",[941,104712,77910],{},[941,104714,77913],{},".\nTherefore it assigns properties versus just copying or defining new properties.",[7100,104717,104719],{"title":104718,"type":23379},"Exceptions on Object",[925,104720,104721,104722,16529,104724,104726],{},"Note that Object.assign() does not throw on ",[941,104723,26077],{},[941,104725,31012],{}," source values.",[953,104728,104730],{"id":104729},"default-rest-spread","Default + Rest + Spread",[925,104732,104733,104734,104736],{},"ES6 gives us a way to set ",[941,104735,15278],{}," function parameters. Any parameters with a default value are considered to be optional.",[993,104738,104740],{"className":995,"code":104739,"language":997,"meta":998,"style":998},"function sum(number, increment = 1) {\n return number + increment;\n}\n\nsum(2, 2); \u002F\u002F 4\nsum(2); \u002F\u002F 3\n",[941,104741,104742,104762,104772,104776,104780,104796],{"__ignoreMap":998},[1002,104743,104744,104746,104748,104750,104752,104754,104756,104758,104760],{"class":1004,"line":1005},[1002,104745,6965],{"class":1015},[1002,104747,85421],{"class":1026},[1002,104749,1031],{"class":1030},[1002,104751,18034],{"class":2378},[1002,104753,1251],{"class":1030},[1002,104755,85785],{"class":2378},[1002,104757,1023],{"class":1015},[1002,104759,6246],{"class":1019},[1002,104761,2382],{"class":1030},[1002,104763,104764,104766,104768,104770],{"class":1004,"line":1012},[1002,104765,15066],{"class":1015},[1002,104767,85798],{"class":1030},[1002,104769,5064],{"class":1015},[1002,104771,85471],{"class":1030},[1002,104773,104774],{"class":1004,"line":1047},[1002,104775,1170],{"class":1030},[1002,104777,104778],{"class":1004,"line":1054},[1002,104779,1051],{"emptyLinePlaceholder":1050},[1002,104781,104782,104784,104786,104788,104790,104792,104794],{"class":1004,"line":1060},[1002,104783,77047],{"class":1026},[1002,104785,1031],{"class":1030},[1002,104787,5681],{"class":1019},[1002,104789,1251],{"class":1030},[1002,104791,5681],{"class":1019},[1002,104793,18256],{"class":1030},[1002,104795,51351],{"class":1008},[1002,104797,104798,104800,104802,104804,104806],{"class":1004,"line":1272},[1002,104799,77047],{"class":1026},[1002,104801,1031],{"class":1030},[1002,104803,5681],{"class":1019},[1002,104805,18256],{"class":1030},[1002,104807,85851],{"class":1008},[925,104809,104810,104813,104814,104817],{},[941,104811,104812],{},"Rest"," parameters are indicated by three dots ",[941,104815,104816],{},"…"," preceding a parameter. This named parameter becomes an array which contains the rest of the parameters.",[993,104819,104821],{"className":995,"code":104820,"language":997,"meta":998,"style":998},"function sum(...numbers) {\n var result = 0;\n numbers.forEach(function (number) {\n result += number;\n });\n return result;\n}\nsum(1); \u002F\u002F 1\nsum(1, 2, 3, 4, 5); \u002F\u002F 15\n",[941,104822,104823,104837,104849,104865,104873,104877,104883,104887,104899],{"__ignoreMap":998},[1002,104824,104825,104827,104829,104831,104833,104835],{"class":1004,"line":1005},[1002,104826,6965],{"class":1015},[1002,104828,85421],{"class":1026},[1002,104830,1031],{"class":1030},[1002,104832,17625],{"class":1015},[1002,104834,86057],{"class":2378},[1002,104836,2382],{"class":1030},[1002,104838,104839,104841,104843,104845,104847],{"class":1004,"line":1012},[1002,104840,28293],{"class":1015},[1002,104842,12925],{"class":1030},[1002,104844,2393],{"class":1015},[1002,104846,4910],{"class":1019},[1002,104848,1407],{"class":1030},[1002,104850,104851,104853,104855,104857,104859,104861,104863],{"class":1004,"line":1047},[1002,104852,85914],{"class":1030},[1002,104854,8408],{"class":1026},[1002,104856,1031],{"class":1030},[1002,104858,6965],{"class":1015},[1002,104860,6513],{"class":1030},[1002,104862,18034],{"class":2378},[1002,104864,2382],{"class":1030},[1002,104866,104867,104869,104871],{"class":1004,"line":1054},[1002,104868,85903],{"class":1030},[1002,104870,6084],{"class":1015},[1002,104872,85935],{"class":1030},[1002,104874,104875],{"class":1004,"line":1060},[1002,104876,19836],{"class":1030},[1002,104878,104879,104881],{"class":1004,"line":1272},[1002,104880,15066],{"class":1015},[1002,104882,17691],{"class":1030},[1002,104884,104885],{"class":1004,"line":1348},[1002,104886,1170],{"class":1030},[1002,104888,104889,104891,104893,104895,104897],{"class":1004,"line":1354},[1002,104890,77047],{"class":1026},[1002,104892,1031],{"class":1030},[1002,104894,6211],{"class":1019},[1002,104896,18256],{"class":1030},[1002,104898,50532],{"class":1008},[1002,104900,104901,104903,104905,104907,104909,104911,104913,104915,104917,104919,104921,104923,104925],{"class":1004,"line":1360},[1002,104902,77047],{"class":1026},[1002,104904,1031],{"class":1030},[1002,104906,6211],{"class":1019},[1002,104908,1251],{"class":1030},[1002,104910,5681],{"class":1019},[1002,104912,1251],{"class":1030},[1002,104914,2796],{"class":1019},[1002,104916,1251],{"class":1030},[1002,104918,3837],{"class":1019},[1002,104920,1251],{"class":1030},[1002,104922,2859],{"class":1019},[1002,104924,18256],{"class":1030},[1002,104926,86002],{"class":1008},[925,104928,3898,104929,86206],{},[941,104930,31331],{},[993,104932,104934],{"className":995,"code":104933,"language":997,"meta":998,"style":998},"function sum(a, b, c) {\n return a + b + c;\n}\n\nvar args = [1, 2, 3];\nsum(...args); \u002F\u002F 6\n",[941,104935,104936,104956,104970,104974,104978,105000],{"__ignoreMap":998},[1002,104937,104938,104940,104942,104944,104946,104948,104950,104952,104954],{"class":1004,"line":1005},[1002,104939,6965],{"class":1015},[1002,104941,85421],{"class":1026},[1002,104943,1031],{"class":1030},[1002,104945,933],{"class":2378},[1002,104947,1251],{"class":1030},[1002,104949,31621],{"class":2378},[1002,104951,1251],{"class":1030},[1002,104953,77116],{"class":2378},[1002,104955,2382],{"class":1030},[1002,104957,104958,104960,104962,104964,104966,104968],{"class":1004,"line":1012},[1002,104959,15066],{"class":1015},[1002,104961,85662],{"class":1030},[1002,104963,5064],{"class":1015},[1002,104965,85667],{"class":1030},[1002,104967,5064],{"class":1015},[1002,104969,85672],{"class":1030},[1002,104971,104972],{"class":1004,"line":1047},[1002,104973,1170],{"class":1030},[1002,104975,104976],{"class":1004,"line":1054},[1002,104977,1051],{"emptyLinePlaceholder":1050},[1002,104979,104980,104982,104984,104986,104988,104990,104992,104994,104996,104998],{"class":1004,"line":1060},[1002,104981,18311],{"class":1015},[1002,104983,73598],{"class":1030},[1002,104985,2393],{"class":1015},[1002,104987,1897],{"class":1030},[1002,104989,6211],{"class":1019},[1002,104991,1251],{"class":1030},[1002,104993,5681],{"class":1019},[1002,104995,1251],{"class":1030},[1002,104997,2796],{"class":1019},[1002,104999,6754],{"class":1030},[1002,105001,105002,105004,105006,105008,105011],{"class":1004,"line":1272},[1002,105003,77047],{"class":1026},[1002,105005,1031],{"class":1030},[1002,105007,17625],{"class":1015},[1002,105009,105010],{"class":1030},"args); ",[1002,105012,51367],{"class":1008},[19650,105014,105016],{"className":105015},[24048],"\n ## ...\n Instead using an apply function, we can just type `...args` and pass all array argument separately.\n",[953,105018,105020],{"id":105019},"proxies","Proxies",[925,105022,105023],{},"In ES6 proxies enable you to intercept and customize operations performed on objects including accessing properties. Can be used for interception, object virtualization, logging\u002Fprofiling, etc.",[993,105025,105026],{"className":995,"code":99338,"language":997,"meta":998,"style":998},[941,105027,105028,105032,105042,105052,105070,105080,105084,105088,105092,105106,105116,105120,105124,105136,105144,105148,105158,105178,105186,105190,105194,105198,105212],{"__ignoreMap":998},[1002,105029,105030],{"class":1004,"line":1005},[1002,105031,99345],{"class":1008},[1002,105033,105034,105036,105038,105040],{"class":1004,"line":1012},[1002,105035,18311],{"class":1015},[1002,105037,99352],{"class":1030},[1002,105039,2393],{"class":1015},[1002,105041,7217],{"class":1030},[1002,105043,105044,105046,105048,105050],{"class":1004,"line":1047},[1002,105045,18311],{"class":1015},[1002,105047,99363],{"class":1030},[1002,105049,2393],{"class":1015},[1002,105051,1457],{"class":1030},[1002,105053,105054,105056,105058,105060,105062,105064,105066,105068],{"class":1004,"line":1054},[1002,105055,7887],{"class":1026},[1002,105057,1137],{"class":1030},[1002,105059,6965],{"class":1015},[1002,105061,6513],{"class":1030},[1002,105063,99380],{"class":2378},[1002,105065,1251],{"class":1030},[1002,105067,5911],{"class":2378},[1002,105069,2382],{"class":1030},[1002,105071,105072,105074,105076,105078],{"class":1004,"line":1060},[1002,105073,2687],{"class":1015},[1002,105075,91610],{"class":1034},[1002,105077,6583],{"class":1015},[1002,105079,5950],{"class":1030},[1002,105081,105082],{"class":1004,"line":1272},[1002,105083,1502],{"class":1030},[1002,105085,105086],{"class":1004,"line":1348},[1002,105087,1517],{"class":1030},[1002,105089,105090],{"class":1004,"line":1354},[1002,105091,1051],{"emptyLinePlaceholder":1050},[1002,105093,105094,105096,105098,105100,105102,105104],{"class":1004,"line":1360},[1002,105095,18311],{"class":1015},[1002,105097,99415],{"class":1030},[1002,105099,2393],{"class":1015},[1002,105101,2690],{"class":1015},[1002,105103,99422],{"class":1026},[1002,105105,99425],{"class":1030},[1002,105107,105108,105110,105112,105114],{"class":1004,"line":1366},[1002,105109,99430],{"class":1030},[1002,105111,2892],{"class":1015},[1002,105113,91845],{"class":1034},[1002,105115,1407],{"class":1030},[1002,105117,105118],{"class":1004,"line":1946},[1002,105119,1051],{"emptyLinePlaceholder":1050},[1002,105121,105122],{"class":1004,"line":1956},[1002,105123,99445],{"class":1008},[1002,105125,105126,105128,105130,105132,105134],{"class":1004,"line":1961},[1002,105127,18311],{"class":1015},[1002,105129,99452],{"class":1026},[1002,105131,1023],{"class":1015},[1002,105133,8457],{"class":1015},[1002,105135,9772],{"class":1030},[1002,105137,105138,105140,105142],{"class":1004,"line":1971},[1002,105139,15066],{"class":1015},[1002,105141,99465],{"class":1034},[1002,105143,1407],{"class":1030},[1002,105145,105146],{"class":1004,"line":1980},[1002,105147,1517],{"class":1030},[1002,105149,105150,105152,105154,105156],{"class":1004,"line":1985},[1002,105151,18311],{"class":1015},[1002,105153,99363],{"class":1030},[1002,105155,2393],{"class":1015},[1002,105157,1457],{"class":1030},[1002,105159,105160,105162,105164,105166,105168,105170,105172,105174,105176],{"class":1004,"line":1995},[1002,105161,99486],{"class":1026},[1002,105163,1137],{"class":1030},[1002,105165,6965],{"class":1015},[1002,105167,6513],{"class":1030},[1002,105169,99380],{"class":2378},[1002,105171,1251],{"class":1030},[1002,105173,17625],{"class":1015},[1002,105175,17628],{"class":2378},[1002,105177,2382],{"class":1030},[1002,105179,105180,105182,105184],{"class":1004,"line":2006},[1002,105181,2687],{"class":1015},[1002,105183,99509],{"class":1034},[1002,105185,1407],{"class":1030},[1002,105187,105188],{"class":1004,"line":2011},[1002,105189,1502],{"class":1030},[1002,105191,105192],{"class":1004,"line":2017},[1002,105193,1517],{"class":1030},[1002,105195,105196],{"class":1004,"line":2022},[1002,105197,1051],{"emptyLinePlaceholder":1050},[1002,105199,105200,105202,105204,105206,105208,105210],{"class":1004,"line":2442},[1002,105201,18311],{"class":1015},[1002,105203,99415],{"class":1030},[1002,105205,2393],{"class":1015},[1002,105207,2690],{"class":1015},[1002,105209,99422],{"class":1026},[1002,105211,99425],{"class":1030},[1002,105213,105214,105216,105218,105220,105222],{"class":1004,"line":2466},[1002,105215,925],{"class":1026},[1002,105217,10191],{"class":1030},[1002,105219,2892],{"class":1015},[1002,105221,99509],{"class":1034},[1002,105223,1407],{"class":1030},[1655,105225,99553],{"id":99552},[925,105227,99556],{},[7100,105229,105230],{"title":99559,"type":24048},[925,105231,99562],{},[1530,105233,105234,105236,105238,105240,105242,105244,105246,105248,105250,105252,105254,105256,105258,105260],{},[974,105235,99570],{},[974,105237,99573],{},[974,105239,99576],{},[974,105241,99579],{},[974,105243,99582],{},[974,105245,99585],{},[974,105247,99588],{},[974,105249,46793],{},[974,105251,99593],{},[974,105253,99596],{},[974,105255,99599],{},[974,105257,99602],{},[974,105259,99605],{},[974,105261,99605],{},[925,105263,105264,105265,105268],{},"More new features will be discussed in ",[933,105266,105267],{"href":192},"ES6 Advanced Features"," post.",[1579,105270,105271],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":105273},[105274,105275,105276,105277,105278,105279,105280,105281,105285,105286,105287],{"id":77886,"depth":1012,"text":35577},{"id":103040,"depth":1012,"text":103041},{"id":103226,"depth":1012,"text":103227},{"id":103474,"depth":1012,"text":82688},{"id":103715,"depth":1012,"text":103716},{"id":48863,"depth":1012,"text":30516},{"id":83448,"depth":1012,"text":104307},{"id":104323,"depth":1012,"text":104324,"children":105282},[105283,105284],{"id":104370,"depth":1047,"text":104371},{"id":104393,"depth":1047,"text":47429},{"id":104419,"depth":1012,"text":104420},{"id":104729,"depth":1012,"text":104730},{"id":105019,"depth":1012,"text":105020,"children":105288},[105289],{"id":99552,"depth":1047,"text":99553},"2015-07-06","\u002Fimages\u002Fblog\u002Ffeatures\u002Fes6-new-features.jpg",{},{"title":237,"description":239},"blog\u002Fes6-new-features",[16,17],"N7fz6iDUN2CidpmVnsgggXPBctpTp-CBXnnILoSvCSg",{"id":105298,"title":25,"author":920,"body":105299,"date":105844,"description":27,"extension":1591,"image":105845,"meta":105846,"navigation":1050,"path":26,"seo":105847,"stem":105848,"tags":105849,"__hash__":105850},"blog\u002Fblog\u002Fanimation-speed-in-javascript-and-css.md",{"type":922,"value":105300,"toc":105834},[105301,105304,105307,105340,105350,105354,105357,105360,105512,105515,105635,105638,105642,105645,105656,105671,105674,105677,105701,105704,105712,105716,105719,105723,105726,105740,105743,105746,105749,105752,105755,105772,105775,105778,105785,105788,105810,105815,105818,105820,105828,105831],[953,105302,105303],{"id":106},"jQuery",[925,105305,105306],{},"Let's start with the basics: JavaScript and jQuery are falsely conflated. JavaScript animation is fast. jQuery slows it down. Why? obvious, despite jQuery being tremendously powerful, it was never the goal of its designers for jQuery to be an efficient animation engine:",[1530,105308,105309,105318,105326],{},[974,105310,105311,105312,105317],{},"jQuery cannot avoid ",[933,105313,105316],{"href":105314,"rel":105315},"http:\u002F\u002Fwilsonpage.co.uk\u002Fpreventing-layout-thrashing\u002F",[937],"layout thrashing"," due to its codebase that serves many purposes beyond animation.",[974,105319,105320,105321,948],{},"jQuery's memory consumption frequently triggers garbage collections that ",[933,105322,105325],{"href":105323,"rel":105324},"http:\u002F\u002Fblog.artillery.com\u002F2012\u002F10\u002Fbrowser-garbage-collection-and-framerate.html",[937],"momentarily freeze animations",[974,105327,105328,105329,40545,105331,105334,105335,948],{},"jQuery uses ",[1107,105330,16543],{},[1107,105332,105333],{},"requestAnimationFrame (RAF)"," in order ",[933,105336,105339],{"href":105337,"rel":105338},"http:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F7999680\u002Fwhy-doesnt-jquery-use-requestanimationframe%22%20%5Cl%20%22comment21484794_8995666",[937],"to protect novices from themselves",[925,105341,105342,105343,105345,105346,105349],{},"Note that layout thrashing is what causes stuttering at the ",[1107,105344,9060],{}," of animations, garbage collection is what causes stuttering ",[1107,105347,105348],{},"during"," animations, and the absence of RAF is what generally produces low frame rates.",[953,105351,105353],{"id":105352},"dom-queries-and-dom-updates","DOM queries and DOM updates",[925,105355,105356],{},"Queries that take place after an update force the browser to recalculate the page’s computed style data (while considering the new update’s effects). This produces significant overhead for animations that are running over tiny intervals of just 16ms.",[925,105358,105359],{},"Avoiding layout thrashing consists of simply batching together DOM queries and DOM updates:",[993,105361,105363],{"className":995,"code":105362,"language":997,"meta":998,"style":998},"var currentTop, currentLeft;\n\n\u002F* With layout thrashing. *\u002F\ncurrentTop = element.style.top; \u002F* QUERY *\u002F\nelement.style.top = currentTop + 1; \u002F* UPDATE *\u002F\n\ncurrentLeft = element.style.left; \u002F* QUERY *\u002F\nelement.style.left = currentLeft + 1; \u002F* UPDATE *\u002F\n\n\u002F* Without layout thrashing. *\u002F\ncurrentTop = element.style.top; \u002F* QUERY *\u002F\ncurrentLeft = element.style.left; \u002F* QUERY *\u002F\n\nelement.style.top = currentTop + 1; \u002F* UPDATE *\u002F\nelement.style.left = currentLeft + 1; \u002F* UPDATE *\u002F\n",[941,105364,105365,105372,105376,105381,105394,105413,105417,105429,105447,105451,105456,105466,105476,105480,105496],{"__ignoreMap":998},[1002,105366,105367,105369],{"class":1004,"line":1005},[1002,105368,18311],{"class":1015},[1002,105370,105371],{"class":1030}," currentTop, currentLeft;\n",[1002,105373,105374],{"class":1004,"line":1012},[1002,105375,1051],{"emptyLinePlaceholder":1050},[1002,105377,105378],{"class":1004,"line":1047},[1002,105379,105380],{"class":1008},"\u002F* With layout thrashing. *\u002F\n",[1002,105382,105383,105386,105388,105391],{"class":1004,"line":1054},[1002,105384,105385],{"class":1030},"currentTop ",[1002,105387,2393],{"class":1015},[1002,105389,105390],{"class":1030}," element.style.top; ",[1002,105392,105393],{"class":1008},"\u002F* QUERY *\u002F\n",[1002,105395,105396,105399,105401,105404,105406,105408,105410],{"class":1004,"line":1060},[1002,105397,105398],{"class":1030},"element.style.top ",[1002,105400,2393],{"class":1015},[1002,105402,105403],{"class":1030}," currentTop ",[1002,105405,5064],{"class":1015},[1002,105407,6246],{"class":1019},[1002,105409,17938],{"class":1030},[1002,105411,105412],{"class":1008},"\u002F* UPDATE *\u002F\n",[1002,105414,105415],{"class":1004,"line":1272},[1002,105416,1051],{"emptyLinePlaceholder":1050},[1002,105418,105419,105422,105424,105427],{"class":1004,"line":1348},[1002,105420,105421],{"class":1030},"currentLeft ",[1002,105423,2393],{"class":1015},[1002,105425,105426],{"class":1030}," element.style.left; ",[1002,105428,105393],{"class":1008},[1002,105430,105431,105434,105436,105439,105441,105443,105445],{"class":1004,"line":1354},[1002,105432,105433],{"class":1030},"element.style.left ",[1002,105435,2393],{"class":1015},[1002,105437,105438],{"class":1030}," currentLeft ",[1002,105440,5064],{"class":1015},[1002,105442,6246],{"class":1019},[1002,105444,17938],{"class":1030},[1002,105446,105412],{"class":1008},[1002,105448,105449],{"class":1004,"line":1360},[1002,105450,1051],{"emptyLinePlaceholder":1050},[1002,105452,105453],{"class":1004,"line":1366},[1002,105454,105455],{"class":1008},"\u002F* Without layout thrashing. *\u002F\n",[1002,105457,105458,105460,105462,105464],{"class":1004,"line":1946},[1002,105459,105385],{"class":1030},[1002,105461,2393],{"class":1015},[1002,105463,105390],{"class":1030},[1002,105465,105393],{"class":1008},[1002,105467,105468,105470,105472,105474],{"class":1004,"line":1956},[1002,105469,105421],{"class":1030},[1002,105471,2393],{"class":1015},[1002,105473,105426],{"class":1030},[1002,105475,105393],{"class":1008},[1002,105477,105478],{"class":1004,"line":1961},[1002,105479,1051],{"emptyLinePlaceholder":1050},[1002,105481,105482,105484,105486,105488,105490,105492,105494],{"class":1004,"line":1971},[1002,105483,105398],{"class":1030},[1002,105485,2393],{"class":1015},[1002,105487,105403],{"class":1030},[1002,105489,5064],{"class":1015},[1002,105491,6246],{"class":1019},[1002,105493,17938],{"class":1030},[1002,105495,105412],{"class":1008},[1002,105497,105498,105500,105502,105504,105506,105508,105510],{"class":1004,"line":1980},[1002,105499,105433],{"class":1030},[1002,105501,2393],{"class":1015},[1002,105503,105438],{"class":1030},[1002,105505,5064],{"class":1015},[1002,105507,6246],{"class":1019},[1002,105509,17938],{"class":1030},[1002,105511,105412],{"class":1008},[925,105513,105514],{},"Implementing RAF doesn’t require a massive refactoring to your existing codebase. Let’s compare the basic implementation of RAF against that of setInterval:",[993,105516,105518],{"className":995,"code":105517,"language":997,"meta":998,"style":998},"var startingTop = 0;\n\n\u002F* setInterval: Runs every 16ms to achieve 60fps (1000ms\u002F60 ~= 16ms). *\u002F\nsetInterval(function () {\n \u002F* Since this ticks 60 times a second, we divide the top property's \n increment of 1 unit per 1 second by 60. *\u002F\n element.style.top = startingTop += 1 \u002F 60;\n}, 16);\n\n\u002F* requestAnimationFrame: Attempts to run at 60fps based on whether the \n browser is in an optimal state. *\u002F\nfunction tick() {\n element.style.top = startingTop += 1 \u002F 60;\n}\n",[941,105519,105520,105533,105537,105542,105552,105557,105562,105582,105590,105594,105599,105604,105613,105631],{"__ignoreMap":998},[1002,105521,105522,105524,105527,105529,105531],{"class":1004,"line":1005},[1002,105523,18311],{"class":1015},[1002,105525,105526],{"class":1030}," startingTop ",[1002,105528,2393],{"class":1015},[1002,105530,4910],{"class":1019},[1002,105532,1407],{"class":1030},[1002,105534,105535],{"class":1004,"line":1012},[1002,105536,1051],{"emptyLinePlaceholder":1050},[1002,105538,105539],{"class":1004,"line":1047},[1002,105540,105541],{"class":1008},"\u002F* setInterval: Runs every 16ms to achieve 60fps (1000ms\u002F60 ~= 16ms). *\u002F\n",[1002,105543,105544,105546,105548,105550],{"class":1004,"line":1054},[1002,105545,16543],{"class":1026},[1002,105547,1031],{"class":1030},[1002,105549,6965],{"class":1015},[1002,105551,9772],{"class":1030},[1002,105553,105554],{"class":1004,"line":1060},[1002,105555,105556],{"class":1008}," \u002F* Since this ticks 60 times a second, we divide the top property's \n",[1002,105558,105559],{"class":1004,"line":1272},[1002,105560,105561],{"class":1008}," increment of 1 unit per 1 second by 60. *\u002F\n",[1002,105563,105564,105567,105569,105571,105573,105575,105577,105580],{"class":1004,"line":1348},[1002,105565,105566],{"class":1030}," element.style.top ",[1002,105568,2393],{"class":1015},[1002,105570,105526],{"class":1030},[1002,105572,6084],{"class":1015},[1002,105574,6246],{"class":1019},[1002,105576,33481],{"class":1015},[1002,105578,105579],{"class":1019}," 60",[1002,105581,1407],{"class":1030},[1002,105583,105584,105586,105588],{"class":1004,"line":1354},[1002,105585,16635],{"class":1030},[1002,105587,99636],{"class":1019},[1002,105589,1085],{"class":1030},[1002,105591,105592],{"class":1004,"line":1360},[1002,105593,1051],{"emptyLinePlaceholder":1050},[1002,105595,105596],{"class":1004,"line":1366},[1002,105597,105598],{"class":1008},"\u002F* requestAnimationFrame: Attempts to run at 60fps based on whether the \n",[1002,105600,105601],{"class":1004,"line":1946},[1002,105602,105603],{"class":1008}," browser is in an optimal state. *\u002F\n",[1002,105605,105606,105608,105611],{"class":1004,"line":1956},[1002,105607,6965],{"class":1015},[1002,105609,105610],{"class":1026}," tick",[1002,105612,3025],{"class":1030},[1002,105614,105615,105617,105619,105621,105623,105625,105627,105629],{"class":1004,"line":1961},[1002,105616,105566],{"class":1030},[1002,105618,2393],{"class":1015},[1002,105620,105526],{"class":1030},[1002,105622,6084],{"class":1015},[1002,105624,6246],{"class":1019},[1002,105626,33481],{"class":1015},[1002,105628,105579],{"class":1019},[1002,105630,1407],{"class":1030},[1002,105632,105633],{"class":1004,"line":1971},[1002,105634,1170],{"class":1030},[925,105636,105637],{},"RAF makes a huge boost to animation performance that you could make with a single change to your code.",[953,105639,105641],{"id":105640},"css-transitions","CSS Transitions",[925,105643,105644],{},"CSS transitions unlike jQuery, offloads animation logic to the browser itself, which makes it efficient by",[1530,105646,105647,105650,105653],{},[974,105648,105649],{},"optimizing DOM interaction and memory consumption to avoid stuttering,",[974,105651,105652],{},"leveraging the principles of RAF under the hood and",[974,105654,105655],{},"forcing hardware acceleration (leveraging the power of the GPU to improve animation performance).",[925,105657,105658,105659,105664,105665,105670],{},"The reality, however, is that these optimizations can also be performed directly within JavaScript. ",[933,105660,105663],{"href":105661,"rel":105662},"http:\u002F\u002Fwww.greensock.com\u002Fgsap-js\u002F",[937],"GSAP"," has been doing it for years.\n",[933,105666,105669],{"href":105667,"rel":105668},"http:\u002F\u002Fvelocityjs.org\u002F",[937],"Velocity.js",", a new animation engine, not only leverages these same techniques but also goes several steps beyond -- as we'll explore shortly.",[925,105672,105673],{},"The JavaScript animation can be faster than CSS animation libraries:",[925,105675,105676],{},"Let's find out the weaknesses of the CSS animation libraries.",[1530,105678,105679,105686,105694],{},[974,105680,105681,105682,948],{},"Transitions' forced hardware acceleration intensifies GPU's, resulting in stuttering and banding in high-stress situations. These effects are exacerbated on mobile devices. (Specifically, the stuttering is a result of the overhead that occurs when data is transferred between the browser's main thread and its compositor thread. Some CSS properties, like transforms and opacity, are immune to this overhead.) Adobe elaborates on this issue ",[933,105683,14815],{"href":105684,"rel":105685},"http:\u002F\u002Fblogs.adobe.com\u002Fwebplatform\u002F2014\u002F03\u002F18\u002Fcss-animations-and-transitions-performance\u002F",[937],[974,105687,105688,105689,948],{},"Transitions do not work below Internet Explorer 10, causing accessibility problems for desktop sites since IE8 and IE9 remain ",[933,105690,105693],{"href":105691,"rel":105692},"http:\u002F\u002Fthenextweb.com\u002Finsider\u002F2014\u002F02\u002F01\u002Fie11-passes-ie10-market-share-firefox-slips-bit-chrome-gains-back-share",[937],"very popular",[974,105695,105696,105697,105700],{},"Because transitions aren't natively controlled by JavaScript (they are merely ",[1107,105698,105699],{},"triggered"," by JavaScript), the browser does not know how to optimize transitions in sync with the JavaScript code that manipulates them.",[925,105702,105703],{},"JavaScript-based animation libraries can decide for themselves when to enable hardware acceleration, they inherently work across all versions of IE, and they’re perfectly suited for batched animation optimizations.",[925,105705,105706,105707,948],{},"If you are exclusively developing for mobile and your animations consist solely of simple state changes, you will be better off using raw CSS transitions. In such circumstances, transitions are efficient and native that allow you to retain all animation logic inside your stylesheets and avoid bloating your page with JavaScript libraries. If you're designing intricate UI flourishes or are developing an app with a stateful UI, always use an animation library so that your animations remain efficient and your workflow remains manageable. One such library that does a great job at managing CSS transitions is ",[933,105708,105711],{"href":105709,"rel":105710},"https:\u002F\u002Fgithub.com\u002Frstacruz\u002Fjquery.transit",[937],"Transit",[953,105713,105715],{"id":105714},"javascript-animation","JavaScript Animation",[925,105717,105718],{},"So as you see, JavaScript can have the upper hand when it comes to performance. But exactly how much faster can JavaScript be?",[953,105720,105722],{"id":105721},"velocity","Velocity",[925,105724,105725],{},"How exactly does JavaScript reach its high levels of performance? Below is a shortlist of optimizations that JavaScript-based animation is capable of performing:",[1530,105727,105728,105731,105734,105737],{},[974,105729,105730],{},"Synchronizing the DOM → tween stack across the entirety of the animation chain in order to minimize layout thrashing.",[974,105732,105733],{},"Caching property values across chained calls in order to minimize the occurrence of DOM querying (which is the Achilles' heel of performant DOM animation).",[974,105735,105736],{},"Caching unit conversion ratios (e.g. px to %, em, etc.) across sibling elements in the same call.",[974,105738,105739],{},"Skipping style updating when updates would be visually imperceptible.",[925,105741,105742],{},"Revisiting what we learned earlier about layout thrashing, Velocity.js leverages these best practices to cache the end values of an animation to be reused as the start values of the ensuing animation — thus avoiding querying the DOM for the element’s start values:",[925,105744,105745],{},"In the above example, the second Velocity call knows that it should automatically start with an opacity value of 1 and a top value of 50%.",[925,105747,105748],{},"The browser can perform most of these same optimizations itself, but it can limit the ability of the developer to do so. Hence why jQuery doesn't use RAF, browsers would never impose optimizations that have even a tiny chance of breaking spec or deviating from expected behaviour.",[953,105750,105663],{"id":105751},"gsap",[925,105753,105754],{},"Finally, let’s compare the two JavaScript animation libraries (Velocity.js and GSAP) against one another.",[1530,105756,105757,105760,105769],{},[974,105758,105759],{},"GSAP is a fast, richly-featured animation platform. Velocity is a lightweight tool for drastically improving UI animation performance and workflow.",[974,105761,105762,105763,105768],{},"GSAP requires a ",[933,105764,105767],{"href":105765,"rel":105766},"http:\u002F\u002Fwww.greensock.com\u002Flicensing\u002F",[937],"licensing fee"," for various types of businesses. Velocity is freely open-sourced via MIT license.",[974,105770,105771],{},"Performance-wise, GSAP and Velocity are similar in real-world projects.",[925,105773,105774],{},"Ideally, you should use GSAP when you require precise control over timing (e.g. remapping, pause\u002Fresume\u002Fseek), motion (e.g. bezier curve paths), or complex grouping\u002Fsequencing. These features are crucial for game development and certain niche applications, but are less common in web app UI’s.",[953,105776,105669],{"id":105777},"velocityjs",[925,105779,105780,105781,105784],{},"Referencing GSAP’s rich feature set is not to imply that Velocity itself is light on features. To the contrary. In just 7Kb when zipped, Velocity not only replicates all the functionality of jQuery’s ",[941,105782,105783],{},"$.animate()",", but it also packs in colour animation, transforms, loops, easings, class animation, and scrolling.",[925,105786,105787],{},"In short, Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.",[925,105789,105790,105791,105794,105795,1251,105797,36227,105800,105803,105804,105806,105807,948],{},"Further, from a convenience viewpoint, Velocity uses jQuery's ",[941,105792,105793],{},"$.queue()"," method under the hood, and thus interoperates seamlessly with jQuery's ",[941,105796,105783],{},[941,105798,105799],{},"$.fade()",[941,105801,105802],{},"$.delay()"," functions. And, since Velocity's syntax is identical to ",[941,105805,105783],{},"'s, ",[1107,105808,105809],{},"none of your page’s code needs to change",[925,105811,105812,105813,1813],{},"If you take a quick look at Velocity.js. At a basic level, Velocity behaves identically to ",[941,105814,105783],{},[925,105816,105817],{},"At its most advanced level, complex scrolling scenes with 3D animations can be created — with merely two simple lines of code:",[953,105819,1521],{"id":1520},[925,105821,105822,105823,105827],{},"Head on over to ",[933,105824,105826],{"href":105667,"rel":105825},[937],"VelocityJS.org"," to learn more.",[925,105829,105830],{},"So remember that there is about more than just choosing the right animation library.",[1579,105832,105833],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":998,"searchDepth":1012,"depth":1012,"links":105835},[105836,105837,105838,105839,105840,105841,105842,105843],{"id":106,"depth":1012,"text":105303},{"id":105352,"depth":1012,"text":105353},{"id":105640,"depth":1012,"text":105641},{"id":105714,"depth":1012,"text":105715},{"id":105721,"depth":1012,"text":105722},{"id":105751,"depth":1012,"text":105663},{"id":105777,"depth":1012,"text":105669},{"id":1520,"depth":1012,"text":1521},"2015-06-13","\u002Fimages\u002Fblog\u002Ffeatures\u002Fanimation-speed-in-javascript-and-css.jpg",{},{"title":25,"description":27},"blog\u002Fanimation-speed-in-javascript-and-css",[16,17,29],"qRurqQxGK1mbolM0Z9wOGz_Yin5g19cH62QudOSf5CA",{"id":105852,"title":326,"author":920,"body":105853,"date":106540,"description":328,"extension":1591,"image":106541,"meta":106542,"navigation":1050,"path":327,"seo":106543,"stem":106544,"tags":106545,"__hash__":106546},"blog\u002Fblog\u002Fgit-staging-remotes.md",{"type":922,"value":105854,"toc":106529},[105855,105900,105903,105909,105912,105926,105933,105971,105978,105982,105985,106024,106090,106093,106097,106100,106109,106112,106116,106119,106128,106160,106166,106169,106178,106181,106190,106194,106201,106210,106235,106238,106242,106245,106249,106252,106255,106264,106270,106273,106293,106296,106355,106358,106364,106368,106371,106431,106435,106438,106441,106450,106453,106462,106465,106474,106478,106481,106501,106515,106518,106527],[993,105856,105858],{"className":1724,"code":105857,"language":1726,"meta":998,"style":998},"git diff\ndiff --git a\u002FLICENSE b\u002FLICENSE\nindex 7e4922d..442669e 100644\n--- a\u002FLICENSE\n+++ b\u002FLICENSE\n@@ -1,4 +1,4 @@\n-Copyright (c) 2014\n+Copyright (c) 2015\n",[941,105859,105860,105865,105870,105875,105880,105885,105890,105895],{"__ignoreMap":998},[1002,105861,105862],{"class":1004,"line":1005},[1002,105863,105864],{},"git diff\n",[1002,105866,105867],{"class":1004,"line":1012},[1002,105868,105869],{},"diff --git a\u002FLICENSE b\u002FLICENSE\n",[1002,105871,105872],{"class":1004,"line":1047},[1002,105873,105874],{},"index 7e4922d..442669e 100644\n",[1002,105876,105877],{"class":1004,"line":1054},[1002,105878,105879],{},"--- a\u002FLICENSE\n",[1002,105881,105882],{"class":1004,"line":1060},[1002,105883,105884],{},"+++ b\u002FLICENSE\n",[1002,105886,105887],{"class":1004,"line":1272},[1002,105888,105889],{},"@@ -1,4 +1,4 @@\n",[1002,105891,105892],{"class":1004,"line":1348},[1002,105893,105894],{},"-Copyright (c) 2014\n",[1002,105896,105897],{"class":1004,"line":1354},[1002,105898,105899],{},"+Copyright (c) 2015\n",[925,105901,105902],{},"git diff shows unstaged differences since your last commit. The last two lines show the line removed and then the new line added in this example.",[993,105904,105907],{"className":105905,"code":105906,"language":24241},[24239],"-Copyright (c) 2014\n+Copyright (c) 2015\n",[941,105908,105906],{"__ignoreMap":998},[925,105910,105911],{},"Now let's add this file to the stage and run git diff.",[993,105913,105915],{"className":1797,"code":105914,"language":1799,"meta":998,"style":998},"git add LICENSE\ngit diff\n",[941,105916,105917,105922],{"__ignoreMap":998},[1002,105918,105919],{"class":1004,"line":1005},[1002,105920,105921],{},"git add LICENSE\n",[1002,105923,105924],{"class":1004,"line":1012},[1002,105925,105864],{},[925,105927,105928,105929,105932],{},"git diff doesn't output anything because there are no more differences since the last file added. But if you add ",[1107,105930,105931],{},"--staged"," flag to your command:",[993,105934,105936],{"className":1724,"code":105935,"language":1726,"meta":998,"style":998},"git diff --staged\ndiff --git a\u002FLICENSE b\u002FLICENSE\nindex 7e4922d..442669e 100644\n--- a\u002FLICENSE\n+++ b\u002FLICENSE\n@@ -1,4 +1,4 @@\n-Copyright (c) 2014\n+Copyright (c) 2015\n",[941,105937,105938,105943,105947,105951,105955,105959,105963,105967],{"__ignoreMap":998},[1002,105939,105940],{"class":1004,"line":1005},[1002,105941,105942],{},"git diff --staged\n",[1002,105944,105945],{"class":1004,"line":1012},[1002,105946,105869],{},[1002,105948,105949],{"class":1004,"line":1047},[1002,105950,105874],{},[1002,105952,105953],{"class":1004,"line":1054},[1002,105954,105879],{},[1002,105956,105957],{"class":1004,"line":1060},[1002,105958,105884],{},[1002,105960,105961],{"class":1004,"line":1272},[1002,105962,105889],{},[1002,105964,105965],{"class":1004,"line":1348},[1002,105966,105894],{},[1002,105968,105969],{"class":1004,"line":1354},[1002,105970,105899],{},[925,105972,105973,105974,105977],{},"It will show show the staged differences. Run ",[1107,105975,105976],{},"git status"," to show the changes need to be commited.",[953,105979,105981],{"id":105980},"unsatging-files","UNSATGING FILES",[925,105983,105984],{},"What if we want to unstage some files we have staged?",[993,105986,105988],{"className":1724,"code":105987,"language":1726,"meta":998,"style":998},"git status\n# On branch master\n# Changes to be committed:\n# (use \"git reset HEAD \u003Cfile>...\" to unstage)\n#\n# modified: LICENSE\n#\n",[941,105989,105990,105995,106000,106005,106010,106015,106020],{"__ignoreMap":998},[1002,105991,105992],{"class":1004,"line":1005},[1002,105993,105994],{},"git status\n",[1002,105996,105997],{"class":1004,"line":1012},[1002,105998,105999],{},"# On branch master\n",[1002,106001,106002],{"class":1004,"line":1047},[1002,106003,106004],{},"# Changes to be committed:\n",[1002,106006,106007],{"class":1004,"line":1054},[1002,106008,106009],{},"# (use \"git reset HEAD \u003Cfile>...\" to unstage)\n",[1002,106011,106012],{"class":1004,"line":1060},[1002,106013,106014],{},"#\n",[1002,106016,106017],{"class":1004,"line":1272},[1002,106018,106019],{},"# modified: LICENSE\n",[1002,106021,106022],{"class":1004,"line":1348},[1002,106023,106014],{},[993,106025,106027],{"className":1724,"code":106026,"language":1726,"meta":998,"style":998},"git reset HEAD LICENSE\nUnstaged changes after reset:\nM LICENSE\n``\n\n**git reset HEAD LICENSE** unstages the LICENSE file.\n\n## DISCARDING CHANGES\n\nIf we want to discard the changes we staged:\n\n```sh\ngit checkout -- LICENSE\n",[941,106028,106029,106034,106039,106044,106049,106053,106058,106062,106067,106071,106076,106080,106085],{"__ignoreMap":998},[1002,106030,106031],{"class":1004,"line":1005},[1002,106032,106033],{},"git reset HEAD LICENSE\n",[1002,106035,106036],{"class":1004,"line":1012},[1002,106037,106038],{},"Unstaged changes after reset:\n",[1002,106040,106041],{"class":1004,"line":1047},[1002,106042,106043],{},"M LICENSE\n",[1002,106045,106046],{"class":1004,"line":1054},[1002,106047,106048],{},"``\n",[1002,106050,106051],{"class":1004,"line":1060},[1002,106052,1051],{"emptyLinePlaceholder":1050},[1002,106054,106055],{"class":1004,"line":1272},[1002,106056,106057],{},"**git reset HEAD LICENSE** unstages the LICENSE file.\n",[1002,106059,106060],{"class":1004,"line":1348},[1002,106061,1051],{"emptyLinePlaceholder":1050},[1002,106063,106064],{"class":1004,"line":1354},[1002,106065,106066],{},"## DISCARDING CHANGES\n",[1002,106068,106069],{"class":1004,"line":1360},[1002,106070,1051],{"emptyLinePlaceholder":1050},[1002,106072,106073],{"class":1004,"line":1366},[1002,106074,106075],{},"If we want to discard the changes we staged:\n",[1002,106077,106078],{"class":1004,"line":1946},[1002,106079,1051],{"emptyLinePlaceholder":1050},[1002,106081,106082],{"class":1004,"line":1956},[1002,106083,106084],{},"```sh\n",[1002,106086,106087],{"class":1004,"line":1961},[1002,106088,106089],{},"git checkout -- LICENSE\n",[925,106091,106092],{},"This will blow away all changes since last commit.",[953,106094,106096],{"id":106095},"skip-staging-and-commit","SKIP STAGING AND COMMIT",[925,106098,106099],{},"If wanted to skip staging and only want to commit, we can run following command.",[993,106101,106103],{"className":1797,"code":106102,"language":1799,"meta":998,"style":998},"git commit -a -m \"Modify readme\"\n",[941,106104,106105],{"__ignoreMap":998},[1002,106106,106107],{"class":1004,"line":1005},[1002,106108,106102],{},[925,106110,106111],{},"But there is a caveat, this will add changes from all tracked files, but doesn't add new(untracked) files.",[953,106113,106115],{"id":106114},"undoing-a-commit","UNDOING A COMMIT",[925,106117,106118],{},"There may be a time that you made a commit, and immediately realised that you didn't want to commit some files. How do we undo it?",[993,106120,106122],{"className":1797,"code":106121,"language":1799,"meta":998,"style":998},"git reset --soft HEAD^\n",[941,106123,106124],{"__ignoreMap":998},[1002,106125,106126],{"class":1004,"line":1005},[1002,106127,106121],{},[993,106129,106131],{"className":1724,"code":106130,"language":1726,"meta":998,"style":998},"git status\nMove to commit before ‘HEAD’\n# On branch master\n# Changes to be committed:\n# (use \"git reset HEAD \u003Cfile>...\" to unstage) #\n# modified: README.txt\n",[941,106132,106133,106137,106142,106146,106150,106155],{"__ignoreMap":998},[1002,106134,106135],{"class":1004,"line":1005},[1002,106136,105994],{},[1002,106138,106139],{"class":1004,"line":1012},[1002,106140,106141],{},"Move to commit before ‘HEAD’\n",[1002,106143,106144],{"class":1004,"line":1047},[1002,106145,105999],{},[1002,106147,106148],{"class":1004,"line":1054},[1002,106149,106004],{},[1002,106151,106152],{"class":1004,"line":1060},[1002,106153,106154],{},"# (use \"git reset HEAD \u003Cfile>...\" to unstage) #\n",[1002,106156,106157],{"class":1004,"line":1272},[1002,106158,106159],{},"# modified: README.txt\n",[925,106161,106162,106165],{},[1107,106163,106164],{},"git reset --soft HEAD^",", --soft will reset the committed files into staging. And HEAD^ will move the commit before 'HEAD'. Now we can make changes and commit.",[925,106167,106168],{},"If your commit went wrong, you can blow away your commit and all changes by running following command:",[993,106170,106172],{"className":1797,"code":106171,"language":1799,"meta":998,"style":998},"git reset --hard HEAD^\n",[941,106173,106174],{"__ignoreMap":998},[1002,106175,106176],{"class":1004,"line":1005},[1002,106177,106171],{},[925,106179,106180],{},"You can undo last 2 commmits and all changes:",[993,106182,106184],{"className":1797,"code":106183,"language":1799,"meta":998,"style":998},"git reset --hard HEAD^^\n",[941,106185,106186],{"__ignoreMap":998},[1002,106187,106188],{"class":1004,"line":1005},[1002,106189,106183],{},[953,106191,106193],{"id":106192},"adding-to-a-commit","ADDING TO A COMMIT",[925,106195,106196,106197,106200],{},"If you forgot to add a file to a commit, we can add a file later by using ",[1107,106198,106199],{},"--amend"," option.",[993,106202,106204],{"className":1797,"code":106203,"language":1799,"meta":998,"style":998},"git add todo.txt\n",[941,106205,106206],{"__ignoreMap":998},[1002,106207,106208],{"class":1004,"line":1005},[1002,106209,106203],{},[993,106211,106213],{"className":24154,"code":106212,"language":24156,"meta":998,"style":998},"git commit --amend -m \"Modify readme & add todo.txt.\"\n[master fe98ef9] Modify readme and add todo.txt.\n 2 files changed, 2 insertions(+), 1 deletions(-)\n create mode 100644 todo.txt\n",[941,106214,106215,106220,106225,106230],{"__ignoreMap":998},[1002,106216,106217],{"class":1004,"line":1005},[1002,106218,106219],{},"git commit --amend -m \"Modify readme & add todo.txt.\"\n",[1002,106221,106222],{"class":1004,"line":1012},[1002,106223,106224],{},"[master fe98ef9] Modify readme and add todo.txt.\n",[1002,106226,106227],{"class":1004,"line":1047},[1002,106228,106229],{}," 2 files changed, 2 insertions(+), 1 deletions(-)\n",[1002,106231,106232],{"class":1004,"line":1054},[1002,106233,106234],{}," create mode 100644 todo.txt\n",[925,106236,106237],{},"We can modify the commit message with the new message. This command makes whatever has been staged to the last commit.",[953,106239,106241],{"id":106240},"how-do-we-share-our-changes","HOW DO WE SHARE OUR CHANGES?",[925,106243,106244],{},"To share our commits with others we need to use push and pull commands.",[953,106246,106248],{"id":106247},"remote-repository-hosting","REMOTE REPOSITORY HOSTING",[925,106250,106251],{},"There are few hosted solutions out there for access control etc. Eg:-Github, Bitbucket.",[925,106253,106254],{},"To add a remote our repository we have to specify an origin.",[993,106256,106258],{"className":1797,"code":106257,"language":1799,"meta":998,"style":998},"git remote add origin https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git\n",[941,106259,106260],{"__ignoreMap":998},[1002,106261,106262],{"class":1004,"line":1005},[1002,106263,106257],{},[925,106265,30712,106266,106269],{},[1107,106267,106268],{},"origin"," is our name for this remote.",[925,106271,106272],{},"To get a list of all the remote repositories we have access to:",[993,106274,106276],{"className":1724,"code":106275,"language":1726,"meta":998,"style":998},"git remote -v\norigin https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git (fetch)\norigin https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git (push)\n",[941,106277,106278,106283,106288],{"__ignoreMap":998},[1002,106279,106280],{"class":1004,"line":1005},[1002,106281,106282],{},"git remote -v\n",[1002,106284,106285],{"class":1004,"line":1012},[1002,106286,106287],{},"origin https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git (fetch)\n",[1002,106289,106290],{"class":1004,"line":1047},[1002,106291,106292],{},"origin https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git (push)\n",[925,106294,106295],{},"To push to remote:",[993,106297,106299],{"className":1724,"code":106298,"language":1726,"meta":998,"style":998},"push -u origin master\nUsername for 'https:\u002F\u002Fgithub.com': Sean\nPassword for 'https:\u002F\u002FSean@github.com':\n\nCounting objects: 11, done.\nDelta compression using up to 4 threads.\nCompressing objects: 100% (6\u002F6), done.\nWriting objects: 100% (11\u002F11), 1.50 KiB, done.\nTotal 11 (delta 0), reused 0 (delta 0)\nTo https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git\n * [new branch] master -> master\n",[941,106300,106301,106306,106311,106316,106320,106325,106330,106335,106340,106345,106350],{"__ignoreMap":998},[1002,106302,106303],{"class":1004,"line":1005},[1002,106304,106305],{},"push -u origin master\n",[1002,106307,106308],{"class":1004,"line":1012},[1002,106309,106310],{},"Username for 'https:\u002F\u002Fgithub.com': Sean\n",[1002,106312,106313],{"class":1004,"line":1047},[1002,106314,106315],{},"Password for 'https:\u002F\u002FSean@github.com':\n",[1002,106317,106318],{"class":1004,"line":1054},[1002,106319,1051],{"emptyLinePlaceholder":1050},[1002,106321,106322],{"class":1004,"line":1060},[1002,106323,106324],{},"Counting objects: 11, done.\n",[1002,106326,106327],{"class":1004,"line":1272},[1002,106328,106329],{},"Delta compression using up to 4 threads.\n",[1002,106331,106332],{"class":1004,"line":1348},[1002,106333,106334],{},"Compressing objects: 100% (6\u002F6), done.\n",[1002,106336,106337],{"class":1004,"line":1354},[1002,106338,106339],{},"Writing objects: 100% (11\u002F11), 1.50 KiB, done.\n",[1002,106341,106342],{"class":1004,"line":1360},[1002,106343,106344],{},"Total 11 (delta 0), reused 0 (delta 0)\n",[1002,106346,106347],{"class":1004,"line":1366},[1002,106348,106349],{},"To https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git\n",[1002,106351,106352],{"class":1004,"line":1946},[1002,106353,106354],{}," * [new branch] master -> master\n",[925,106356,106357],{},"If you don't want to type the password every time you push to follow the link below:",[925,106359,106360],{},[933,106361,106362],{"href":106362,"rel":106363},"https:\u002F\u002Fhelp.github.com\u002Farticles\u002Fset-up-git",[937],[953,106365,106367],{"id":106366},"pulling-from-remote","PULLING FROM REMOTE",[925,106369,106370],{},"To pull changes down from the remote:",[993,106372,106374],{"className":1724,"code":106373,"language":1726,"meta":998,"style":998},"git pull\n remote: Counting objects: 5, done.\n remote: Compressing objects: 100% (1\u002F1), done.\n remote: Total 3 (delta 1), reused 3 (delta 1)\n Unpacking objects: 100% (3\u002F3), done.\n From https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example\n fe98ef9..4e67ded master -> origin\u002Fmaster\n Updating fe98ef9..4e67ded\n Fast-forward\n todo.txt | 1 +\n 1 file changed, 1 insertion(+)\n",[941,106375,106376,106381,106386,106391,106396,106401,106406,106411,106416,106421,106426],{"__ignoreMap":998},[1002,106377,106378],{"class":1004,"line":1005},[1002,106379,106380],{},"git pull\n",[1002,106382,106383],{"class":1004,"line":1012},[1002,106384,106385],{}," remote: Counting objects: 5, done.\n",[1002,106387,106388],{"class":1004,"line":1047},[1002,106389,106390],{}," remote: Compressing objects: 100% (1\u002F1), done.\n",[1002,106392,106393],{"class":1004,"line":1054},[1002,106394,106395],{}," remote: Total 3 (delta 1), reused 3 (delta 1)\n",[1002,106397,106398],{"class":1004,"line":1060},[1002,106399,106400],{}," Unpacking objects: 100% (3\u002F3), done.\n",[1002,106402,106403],{"class":1004,"line":1272},[1002,106404,106405],{}," From https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example\n",[1002,106407,106408],{"class":1004,"line":1348},[1002,106409,106410],{}," fe98ef9..4e67ded master -> origin\u002Fmaster\n",[1002,106412,106413],{"class":1004,"line":1354},[1002,106414,106415],{}," Updating fe98ef9..4e67ded\n",[1002,106417,106418],{"class":1004,"line":1360},[1002,106419,106420],{}," Fast-forward\n",[1002,106422,106423],{"class":1004,"line":1366},[1002,106424,106425],{}," todo.txt | 1 +\n",[1002,106427,106428],{"class":1004,"line":1946},[1002,106429,106430],{}," 1 file changed, 1 insertion(+)\n",[953,106432,106434],{"id":106433},"having-multiple-remotes","HAVING MULTIPLE REMOTES",[925,106436,106437],{},"It's common to have multiple remotes contributing to your project.",[925,106439,106440],{},"To add new remotes:",[993,106442,106444],{"className":1797,"code":106443,"language":1799,"meta":998,"style":998},"$git remote add \u003Cname> \u003Caddress>\n",[941,106445,106446],{"__ignoreMap":998},[1002,106447,106448],{"class":1004,"line":1005},[1002,106449,106443],{},[925,106451,106452],{},"To remove remotes:",[993,106454,106456],{"className":1797,"code":106455,"language":1799,"meta":998,"style":998},"$git remote rm \u003Cname>\n",[941,106457,106458],{"__ignoreMap":998},[1002,106459,106460],{"class":1004,"line":1005},[1002,106461,106455],{},[925,106463,106464],{},"To push to remotes:",[993,106466,106468],{"className":1797,"code":106467,"language":1799,"meta":998,"style":998},"$git push -u \u003Cname> \u003Cbranch>\n",[941,106469,106470],{"__ignoreMap":998},[1002,106471,106472],{"class":1004,"line":1005},[1002,106473,106467],{},[953,106475,106477],{"id":106476},"heroku-remote","HEROKU REMOTE",[925,106479,106480],{},"Some of you might have a Heroku account up and running. It's useful to understand how Heroku handles git.",[993,106482,106484],{"className":1724,"code":106483,"language":1726,"meta":998,"style":998},"Creating dev-server-1426... done, stack is cedar\nhttp:\u002F\u002Fdev-server-1426.herokuapp.com\u002F | git@heroku.com: dev-server-1426.git\nGit remote heroku added\n",[941,106485,106486,106491,106496],{"__ignoreMap":998},[1002,106487,106488],{"class":1004,"line":1005},[1002,106489,106490],{},"Creating dev-server-1426... done, stack is cedar\n",[1002,106492,106493],{"class":1004,"line":1012},[1002,106494,106495],{},"http:\u002F\u002Fdev-server-1426.herokuapp.com\u002F | git@heroku.com: dev-server-1426.git\n",[1002,106497,106498],{"class":1004,"line":1047},[1002,106499,106500],{},"Git remote heroku added\n",[993,106502,106504],{"className":1724,"code":106503,"language":1726,"meta":998,"style":998},"git remote -v\nheroku git@heroku.com: dev-server-1426.git (fetch) heroku git@heroku.com: dev-server-1426.git (push) origin https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git (fetch) origin https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git (push)\n",[941,106505,106506,106510],{"__ignoreMap":998},[1002,106507,106508],{"class":1004,"line":1005},[1002,106509,106282],{},[1002,106511,106512],{"class":1004,"line":1012},[1002,106513,106514],{},"heroku git@heroku.com: dev-server-1426.git (fetch) heroku git@heroku.com: dev-server-1426.git (push) origin https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git (fetch) origin https:\u002F\u002Fgithub.com\u002FSean\u002Fgit-example.git (push)\n",[925,106516,106517],{},"To push to heroku",[993,106519,106521],{"className":1797,"code":106520,"language":1799,"meta":998,"style":998},"git push heroku master\n",[941,106522,106523],{"__ignoreMap":998},[1002,106524,106525],{"class":1004,"line":1005},[1002,106526,106520],{},[1579,106528,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":106530},[106531,106532,106533,106534,106535,106536,106537,106538,106539],{"id":105980,"depth":1012,"text":105981},{"id":106095,"depth":1012,"text":106096},{"id":106114,"depth":1012,"text":106115},{"id":106192,"depth":1012,"text":106193},{"id":106240,"depth":1012,"text":106241},{"id":106247,"depth":1012,"text":106248},{"id":106366,"depth":1012,"text":106367},{"id":106433,"depth":1012,"text":106434},{"id":106476,"depth":1012,"text":106477},"2015-04-12","\u002Fimages\u002Fblog\u002Ffeatures\u002Fgit-staging-remotes.jpg",{},{"title":326,"description":328},"blog\u002Fgit-staging-remotes",[16,324],"2aqmbjDzKgAhEEiNZjJCWCVL_q4lMS-ZPXhXER5ICz8",{"id":106548,"title":563,"author":920,"body":106549,"date":107515,"description":565,"extension":1591,"image":107516,"meta":107517,"navigation":1050,"path":564,"seo":107518,"stem":107519,"tags":107520,"__hash__":107521},"blog\u002Fblog\u002Fmodels-ember-data.md",{"type":922,"value":106550,"toc":107506},[106551,106681,106685,106688,106691,106695,106698,106702,106725,106728,106732,106735,106805,106809,106921,106925,106928,106932,106935,106956,106959,106979,106983,106986,107109,107112,107221,107225,107228,107240,107290,107293,107339,107342,107387,107390,107443,107446,107503],[993,106552,106554],{"className":995,"code":106553,"language":997,"meta":998,"style":998},"\nApp.PRODUCTS = [...];\n\nApp.ProductsRoute = Ember.Route.extend({\n model: function() {\n return App.PRODUCTS;\n} });\n\nApp.ProductRouter = Ember.Route.extend({\n model: function(params) {\n return App.PRODUCTS.findBy('title', params.title);\n }\n });\n",[941,106555,106556,106560,106576,106580,106595,106606,106617,106622,106626,106639,106653,106673,106677],{"__ignoreMap":998},[1002,106557,106558],{"class":1004,"line":1005},[1002,106559,1051],{"emptyLinePlaceholder":1050},[1002,106561,106562,106565,106568,106570,106572,106574],{"class":1004,"line":1012},[1002,106563,106564],{"class":1030},"App.",[1002,106566,106567],{"class":1019},"PRODUCTS",[1002,106569,1023],{"class":1015},[1002,106571,1897],{"class":1030},[1002,106573,17625],{"class":1015},[1002,106575,6754],{"class":1030},[1002,106577,106578],{"class":1004,"line":1047},[1002,106579,1051],{"emptyLinePlaceholder":1050},[1002,106581,106582,106585,106587,106590,106593],{"class":1004,"line":1054},[1002,106583,106584],{"class":1030},"App.ProductsRoute ",[1002,106586,2393],{"class":1015},[1002,106588,106589],{"class":1030}," Ember.Route.",[1002,106591,106592],{"class":1026},"extend",[1002,106594,2756],{"class":1030},[1002,106596,106597,106600,106602,106604],{"class":1004,"line":1060},[1002,106598,106599],{"class":1026}," model",[1002,106601,1137],{"class":1030},[1002,106603,6965],{"class":1015},[1002,106605,3025],{"class":1030},[1002,106607,106608,106610,106613,106615],{"class":1004,"line":1272},[1002,106609,2687],{"class":1015},[1002,106611,106612],{"class":1030}," App.",[1002,106614,106567],{"class":1019},[1002,106616,1407],{"class":1030},[1002,106618,106619],{"class":1004,"line":1348},[1002,106620,106621],{"class":1030},"} });\n",[1002,106623,106624],{"class":1004,"line":1354},[1002,106625,1051],{"emptyLinePlaceholder":1050},[1002,106627,106628,106631,106633,106635,106637],{"class":1004,"line":1360},[1002,106629,106630],{"class":1030},"App.ProductRouter ",[1002,106632,2393],{"class":1015},[1002,106634,106589],{"class":1030},[1002,106636,106592],{"class":1026},[1002,106638,2756],{"class":1030},[1002,106640,106641,106643,106645,106647,106649,106651],{"class":1004,"line":1366},[1002,106642,106599],{"class":1026},[1002,106644,1137],{"class":1030},[1002,106646,6965],{"class":1015},[1002,106648,1031],{"class":1030},[1002,106650,24866],{"class":2378},[1002,106652,2382],{"class":1030},[1002,106654,106655,106657,106659,106661,106663,106666,106668,106670],{"class":1004,"line":1946},[1002,106656,2687],{"class":1015},[1002,106658,106612],{"class":1030},[1002,106660,106567],{"class":1019},[1002,106662,948],{"class":1030},[1002,106664,106665],{"class":1026},"findBy",[1002,106667,1031],{"class":1030},[1002,106669,57622],{"class":1034},[1002,106671,106672],{"class":1030},", params.title);\n",[1002,106674,106675],{"class":1004,"line":1956},[1002,106676,1269],{"class":1030},[1002,106678,106679],{"class":1004,"line":1961},[1002,106680,28417],{"class":1030},[953,106682,106684],{"id":106683},"ember-models","Ember Models",[925,106686,106687],{},"Ember model is a class that defines the properties and behavior of the data that you present to the user. Every Route can have a Model.",[925,106689,106690],{},"A Model appears under a Route because, it's the Route that tells the Controller, what Model to use.",[953,106692,106694],{"id":106693},"creating-an-ember-model","Creating an Ember Model",[925,106696,106697],{},"We're working with products, so let's define a product class. And Modles are typically nouns.",[925,106699,106700],{},[1107,106701,47429],{},[993,106703,106705],{"className":995,"code":106704,"language":997,"meta":998,"style":998},"App.Product = DS.Model.extend({});\n",[941,106706,106707],{"__ignoreMap":998},[1002,106708,106709,106712,106714,106717,106720,106722],{"class":1004,"line":1005},[1002,106710,106711],{"class":1030},"App.Product ",[1002,106713,2393],{"class":1015},[1002,106715,106716],{"class":1019}," DS",[1002,106718,106719],{"class":1030},".Model.",[1002,106721,106592],{"class":1026},[1002,106723,106724],{"class":1030},"({});\n",[925,106726,106727],{},"Next, our Ember Model needs to know what attributes it contains.",[953,106729,106731],{"id":106730},"ember-model-attributes","Ember Model Attributes",[925,106733,106734],{},"We need to know what data types our Model should expect. It could be any of string, number, boolean, or a date.\nWe'll define all the different properties in our model class.",[993,106736,106738],{"className":995,"code":106737,"language":997,"meta":998,"style":998},"{\n title: 'Flint',\n price: 99,\n description: 'Flint is...',\n isOnSale: true,\n image: 'flint.png'\n}\n",[941,106739,106740,106744,106756,106768,106780,106791,106801],{"__ignoreMap":998},[1002,106741,106742],{"class":1004,"line":1005},[1002,106743,1129],{"class":1030},[1002,106745,106746,106749,106751,106754],{"class":1004,"line":1012},[1002,106747,106748],{"class":1026}," title",[1002,106750,1137],{"class":1030},[1002,106752,106753],{"class":1034},"'Flint'",[1002,106755,1143],{"class":1030},[1002,106757,106758,106761,106763,106766],{"class":1004,"line":1047},[1002,106759,106760],{"class":1026}," price",[1002,106762,1137],{"class":1030},[1002,106764,106765],{"class":1019},"99",[1002,106767,1143],{"class":1030},[1002,106769,106770,106773,106775,106778],{"class":1004,"line":1054},[1002,106771,106772],{"class":1026}," description",[1002,106774,1137],{"class":1030},[1002,106776,106777],{"class":1034},"'Flint is...'",[1002,106779,1143],{"class":1030},[1002,106781,106782,106785,106787,106789],{"class":1004,"line":1060},[1002,106783,106784],{"class":1026}," isOnSale",[1002,106786,1137],{"class":1030},[1002,106788,17397],{"class":1019},[1002,106790,1143],{"class":1030},[1002,106792,106793,106796,106798],{"class":1004,"line":1272},[1002,106794,106795],{"class":1026}," image",[1002,106797,1137],{"class":1030},[1002,106799,106800],{"class":1034},"'flint.png'\n",[1002,106802,106803],{"class":1004,"line":1348},[1002,106804,1170],{"class":1030},[925,106806,106807],{},[1107,106808,47429],{},[993,106810,106812],{"className":995,"code":106811,"language":997,"meta":998,"style":998},"App.Product = DS.Model.extend({\n title: DS.attr('string'),\n price: DS.attr('number'),\n description: DS.attr('string'),\n isOnSale: DS.attr('boolean'),\n image: DS.attr('string'),\n});\n",[941,106813,106814,106828,106847,106865,106882,106900,106917],{"__ignoreMap":998},[1002,106815,106816,106818,106820,106822,106824,106826],{"class":1004,"line":1005},[1002,106817,106711],{"class":1030},[1002,106819,2393],{"class":1015},[1002,106821,106716],{"class":1019},[1002,106823,106719],{"class":1030},[1002,106825,106592],{"class":1026},[1002,106827,2756],{"class":1030},[1002,106829,106830,106833,106836,106838,106840,106842,106845],{"class":1004,"line":1012},[1002,106831,106832],{"class":1030}," title: ",[1002,106834,106835],{"class":1019},"DS",[1002,106837,948],{"class":1030},[1002,106839,50375],{"class":1026},[1002,106841,1031],{"class":1030},[1002,106843,106844],{"class":1034},"'string'",[1002,106846,1257],{"class":1030},[1002,106848,106849,106852,106854,106856,106858,106860,106863],{"class":1004,"line":1047},[1002,106850,106851],{"class":1030}," price: ",[1002,106853,106835],{"class":1019},[1002,106855,948],{"class":1030},[1002,106857,50375],{"class":1026},[1002,106859,1031],{"class":1030},[1002,106861,106862],{"class":1034},"'number'",[1002,106864,1257],{"class":1030},[1002,106866,106867,106870,106872,106874,106876,106878,106880],{"class":1004,"line":1054},[1002,106868,106869],{"class":1030}," description: ",[1002,106871,106835],{"class":1019},[1002,106873,948],{"class":1030},[1002,106875,50375],{"class":1026},[1002,106877,1031],{"class":1030},[1002,106879,106844],{"class":1034},[1002,106881,1257],{"class":1030},[1002,106883,106884,106887,106889,106891,106893,106895,106898],{"class":1004,"line":1060},[1002,106885,106886],{"class":1030}," isOnSale: ",[1002,106888,106835],{"class":1019},[1002,106890,948],{"class":1030},[1002,106892,50375],{"class":1026},[1002,106894,1031],{"class":1030},[1002,106896,106897],{"class":1034},"'boolean'",[1002,106899,1257],{"class":1030},[1002,106901,106902,106905,106907,106909,106911,106913,106915],{"class":1004,"line":1272},[1002,106903,106904],{"class":1030}," image: ",[1002,106906,106835],{"class":1019},[1002,106908,948],{"class":1030},[1002,106910,50375],{"class":1026},[1002,106912,1031],{"class":1030},[1002,106914,106844],{"class":1034},[1002,106916,1257],{"class":1030},[1002,106918,106919],{"class":1004,"line":1348},[1002,106920,2804],{"class":1030},[953,106922,106924],{"id":106923},"ember-data","Ember Data",[925,106926,106927],{},"Ember Data makes it easy to use a Model to retrieve records from a server, cache them for performance, save updates back to the server, and create new records on the client.",[953,106929,106931],{"id":106930},"ember-data-adapters","Ember Data Adapters",[925,106933,106934],{},"To communicate with an HTTP server using JSON, you have to use the RESTAdapter which is the default adapter.",[993,106936,106938],{"className":995,"code":106937,"language":997,"meta":998,"style":998},"App.ApplicationAdapter = DS.RESTAdapter.extend();\n",[941,106939,106940],{"__ignoreMap":998},[1002,106941,106942,106945,106947,106949,106952,106954],{"class":1004,"line":1005},[1002,106943,106944],{"class":1030},"App.ApplicationAdapter ",[1002,106946,2393],{"class":1015},[1002,106948,106716],{"class":1019},[1002,106950,106951],{"class":1030},".RESTAdapter.",[1002,106953,106592],{"class":1026},[1002,106955,1428],{"class":1030},[925,106957,106958],{},"To load records from memory, you have to use the FixtureAdapter, which allows you to hardcode that in fixtures for getting started.",[993,106960,106962],{"className":995,"code":106961,"language":997,"meta":998,"style":998},"App.ApplicationAdapter = DS.FixtureAdapter.extend();\n",[941,106963,106964],{"__ignoreMap":998},[1002,106965,106966,106968,106970,106972,106975,106977],{"class":1004,"line":1005},[1002,106967,106944],{"class":1030},[1002,106969,2393],{"class":1015},[1002,106971,106716],{"class":1019},[1002,106973,106974],{"class":1030},".FixtureAdapter.",[1002,106976,106592],{"class":1026},[1002,106978,1428],{"class":1030},[953,106980,106982],{"id":106981},"migrating-fixtures","Migrating Fixtures",[925,106984,106985],{},"To convert following data to use Ember Data FixtueAdapter ..",[993,106987,106989],{"className":995,"code":106988,"language":997,"meta":998,"style":998},"App.PRODUCTS = [\n {\n title: 'Flint',\n price: 99,\n description: 'Flint is...',\n isOnSale: true,\n image: 'flint.png',\n },\n {\n title: 'Kindling',\n price: 249,\n description: 'Easily...',\n isOnSale: false,\n image: 'kindling.png',\n },\n];\n",[941,106990,106991,107001,107005,107013,107022,107030,107039,107049,107053,107057,107066,107075,107084,107092,107101,107105],{"__ignoreMap":998},[1002,106992,106993,106995,106997,106999],{"class":1004,"line":1005},[1002,106994,106564],{"class":1030},[1002,106996,106567],{"class":1019},[1002,106998,1023],{"class":1015},[1002,107000,10274],{"class":1030},[1002,107002,107003],{"class":1004,"line":1012},[1002,107004,1235],{"class":1030},[1002,107006,107007,107009,107011],{"class":1004,"line":1047},[1002,107008,29577],{"class":1030},[1002,107010,106753],{"class":1034},[1002,107012,1143],{"class":1030},[1002,107014,107015,107018,107020],{"class":1004,"line":1054},[1002,107016,107017],{"class":1030}," price: ",[1002,107019,106765],{"class":1019},[1002,107021,1143],{"class":1030},[1002,107023,107024,107026,107028],{"class":1004,"line":1060},[1002,107025,19827],{"class":1030},[1002,107027,106777],{"class":1034},[1002,107029,1143],{"class":1030},[1002,107031,107032,107035,107037],{"class":1004,"line":1272},[1002,107033,107034],{"class":1030}," isOnSale: ",[1002,107036,17397],{"class":1019},[1002,107038,1143],{"class":1030},[1002,107040,107041,107044,107047],{"class":1004,"line":1348},[1002,107042,107043],{"class":1030}," image: ",[1002,107045,107046],{"class":1034},"'flint.png'",[1002,107048,1143],{"class":1030},[1002,107050,107051],{"class":1004,"line":1354},[1002,107052,1502],{"class":1030},[1002,107054,107055],{"class":1004,"line":1360},[1002,107056,1235],{"class":1030},[1002,107058,107059,107061,107064],{"class":1004,"line":1366},[1002,107060,29577],{"class":1030},[1002,107062,107063],{"class":1034},"'Kindling'",[1002,107065,1143],{"class":1030},[1002,107067,107068,107070,107073],{"class":1004,"line":1946},[1002,107069,107017],{"class":1030},[1002,107071,107072],{"class":1019},"249",[1002,107074,1143],{"class":1030},[1002,107076,107077,107079,107082],{"class":1004,"line":1956},[1002,107078,19827],{"class":1030},[1002,107080,107081],{"class":1034},"'Easily...'",[1002,107083,1143],{"class":1030},[1002,107085,107086,107088,107090],{"class":1004,"line":1961},[1002,107087,107034],{"class":1030},[1002,107089,19341],{"class":1019},[1002,107091,1143],{"class":1030},[1002,107093,107094,107096,107099],{"class":1004,"line":1971},[1002,107095,107043],{"class":1030},[1002,107097,107098],{"class":1034},"'kindling.png'",[1002,107100,1143],{"class":1030},[1002,107102,107103],{"class":1004,"line":1980},[1002,107104,1502],{"class":1030},[1002,107106,107107],{"class":1004,"line":1985},[1002,107108,6754],{"class":1030},[925,107110,107111],{},"We need to use the FIXTURE constant within the model. Also we have to give each product a unique ID.",[993,107113,107115],{"className":995,"code":107114,"language":997,"meta":998,"style":998}," pp. =[ {\n title: 'Flint',\n price: 99,\n description: 'Flint is...',\n isOnSale: true,\n image: 'flint.png'\n },\n { id: 2,\n title: 'Kindling',\n price: 249,\n description: 'Easily...',\n isOnSale: false,\n image: 'kindling.png'\n} ];\n",[941,107116,107117,107127,107135,107143,107151,107159,107165,107169,107177,107185,107193,107201,107209,107216],{"__ignoreMap":998},[1002,107118,107119,107122,107124],{"class":1004,"line":1005},[1002,107120,107121],{"class":1030}," pp. ",[1002,107123,2393],{"class":1015},[1002,107125,107126],{"class":1030},"[ {\n",[1002,107128,107129,107131,107133],{"class":1004,"line":1012},[1002,107130,29577],{"class":1030},[1002,107132,106753],{"class":1034},[1002,107134,1143],{"class":1030},[1002,107136,107137,107139,107141],{"class":1004,"line":1047},[1002,107138,107017],{"class":1030},[1002,107140,106765],{"class":1019},[1002,107142,1143],{"class":1030},[1002,107144,107145,107147,107149],{"class":1004,"line":1054},[1002,107146,19827],{"class":1030},[1002,107148,106777],{"class":1034},[1002,107150,1143],{"class":1030},[1002,107152,107153,107155,107157],{"class":1004,"line":1060},[1002,107154,107034],{"class":1030},[1002,107156,17397],{"class":1019},[1002,107158,1143],{"class":1030},[1002,107160,107161,107163],{"class":1004,"line":1272},[1002,107162,107043],{"class":1030},[1002,107164,106800],{"class":1034},[1002,107166,107167],{"class":1004,"line":1348},[1002,107168,1502],{"class":1030},[1002,107170,107171,107173,107175],{"class":1004,"line":1354},[1002,107172,46385],{"class":1030},[1002,107174,5681],{"class":1019},[1002,107176,1143],{"class":1030},[1002,107178,107179,107181,107183],{"class":1004,"line":1360},[1002,107180,29577],{"class":1030},[1002,107182,107063],{"class":1034},[1002,107184,1143],{"class":1030},[1002,107186,107187,107189,107191],{"class":1004,"line":1366},[1002,107188,107017],{"class":1030},[1002,107190,107072],{"class":1019},[1002,107192,1143],{"class":1030},[1002,107194,107195,107197,107199],{"class":1004,"line":1946},[1002,107196,19827],{"class":1030},[1002,107198,107081],{"class":1034},[1002,107200,1143],{"class":1030},[1002,107202,107203,107205,107207],{"class":1004,"line":1956},[1002,107204,107034],{"class":1030},[1002,107206,19341],{"class":1019},[1002,107208,1143],{"class":1030},[1002,107210,107211,107213],{"class":1004,"line":1961},[1002,107212,107043],{"class":1030},[1002,107214,107215],{"class":1034},"'kindling.png'\n",[1002,107217,107218],{"class":1004,"line":1971},[1002,107219,107220],{"class":1030},"} ];\n",[953,107222,107224],{"id":107223},"ember-data-store","Ember Data Store",[925,107226,107227],{},"Like many other JavaScript frameworks, Ember Dat ahs this concept of a Store. It's a central repository for records in your application, available in routes and controllers. Think of it as a cache storage of all your records. We will use the store to retrieve records and create new ones.",[925,107229,107230,107231,107234,107235,107237,107238],{},"Ember Data (by default) must use a unique identifier. We’ll use ",[107232,107233],"product-id",{},". So let's change ",[15029,107236],{}," to ",[107232,107239],{},[993,107241,107243],{"className":995,"code":107242,"language":997,"meta":998,"style":998},"this.resource('products', function () {\n this.resource('product', { path: '\u002F:title' });\n});\n",[941,107244,107245,107265,107286],{"__ignoreMap":998},[1002,107246,107247,107249,107251,107254,107256,107259,107261,107263],{"class":1004,"line":1005},[1002,107248,3455],{"class":1019},[1002,107250,948],{"class":1030},[1002,107252,107253],{"class":1026},"resource",[1002,107255,1031],{"class":1030},[1002,107257,107258],{"class":1034},"'products'",[1002,107260,1251],{"class":1030},[1002,107262,6965],{"class":1015},[1002,107264,9772],{"class":1030},[1002,107266,107267,107269,107271,107273,107275,107278,107281,107284],{"class":1004,"line":1012},[1002,107268,39364],{"class":1019},[1002,107270,948],{"class":1030},[1002,107272,107253],{"class":1026},[1002,107274,1031],{"class":1030},[1002,107276,107277],{"class":1034},"'product'",[1002,107279,107280],{"class":1030},", { path: ",[1002,107282,107283],{"class":1034},"'\u002F:title'",[1002,107285,28417],{"class":1030},[1002,107287,107288],{"class":1004,"line":1047},[1002,107289,2804],{"class":1030},[925,107291,107292],{},"Switch to using product_id as the dynamic segment",[993,107294,107296],{"className":995,"code":107295,"language":997,"meta":998,"style":998},"this.resource('products', function () {\n this.resource('product', { path: '\u002F:product_id' });\n});\n",[941,107297,107298,107316,107335],{"__ignoreMap":998},[1002,107299,107300,107302,107304,107306,107308,107310,107312,107314],{"class":1004,"line":1005},[1002,107301,3455],{"class":1019},[1002,107303,948],{"class":1030},[1002,107305,107253],{"class":1026},[1002,107307,1031],{"class":1030},[1002,107309,107258],{"class":1034},[1002,107311,1251],{"class":1030},[1002,107313,6965],{"class":1015},[1002,107315,9772],{"class":1030},[1002,107317,107318,107320,107322,107324,107326,107328,107330,107333],{"class":1004,"line":1012},[1002,107319,39364],{"class":1019},[1002,107321,948],{"class":1030},[1002,107323,107253],{"class":1026},[1002,107325,1031],{"class":1030},[1002,107327,107277],{"class":1034},[1002,107329,107280],{"class":1030},[1002,107331,107332],{"class":1034},"'\u002F:product_id'",[1002,107334,28417],{"class":1030},[1002,107336,107337],{"class":1004,"line":1047},[1002,107338,2804],{"class":1030},[925,107340,107341],{},"Next, we need update our Routes, in order to get our fixture data out of the store.",[993,107343,107345],{"className":995,"code":107344,"language":997,"meta":998,"style":998},"App.ProductsRoute = Ember.Route.extend({\n model: function () {\n return App.PRODUCTS;\n },\n});\n",[941,107346,107347,107359,107369,107379,107383],{"__ignoreMap":998},[1002,107348,107349,107351,107353,107355,107357],{"class":1004,"line":1005},[1002,107350,106584],{"class":1030},[1002,107352,2393],{"class":1015},[1002,107354,106589],{"class":1030},[1002,107356,106592],{"class":1026},[1002,107358,2756],{"class":1030},[1002,107360,107361,107363,107365,107367],{"class":1004,"line":1012},[1002,107362,106599],{"class":1026},[1002,107364,1137],{"class":1030},[1002,107366,6965],{"class":1015},[1002,107368,9772],{"class":1030},[1002,107370,107371,107373,107375,107377],{"class":1004,"line":1047},[1002,107372,2687],{"class":1015},[1002,107374,106612],{"class":1030},[1002,107376,106567],{"class":1019},[1002,107378,1407],{"class":1030},[1002,107380,107381],{"class":1004,"line":1054},[1002,107382,1502],{"class":1030},[1002,107384,107385],{"class":1004,"line":1060},[1002,107386,2804],{"class":1030},[925,107388,107389],{},"The following will find all products from the fixture adapter.",[993,107391,107393],{"className":995,"code":107392,"language":997,"meta":998,"style":998},"App.ProductsRoute = Ember.Route.extend({\n model: function () {\n return this.store.findAll('product');\n },\n});\n",[941,107394,107395,107407,107417,107435,107439],{"__ignoreMap":998},[1002,107396,107397,107399,107401,107403,107405],{"class":1004,"line":1005},[1002,107398,106584],{"class":1030},[1002,107400,2393],{"class":1015},[1002,107402,106589],{"class":1030},[1002,107404,106592],{"class":1026},[1002,107406,2756],{"class":1030},[1002,107408,107409,107411,107413,107415],{"class":1004,"line":1012},[1002,107410,106599],{"class":1026},[1002,107412,1137],{"class":1030},[1002,107414,6965],{"class":1015},[1002,107416,9772],{"class":1030},[1002,107418,107419,107421,107423,107426,107429,107431,107433],{"class":1004,"line":1047},[1002,107420,2687],{"class":1015},[1002,107422,2693],{"class":1019},[1002,107424,107425],{"class":1030},".store.",[1002,107427,107428],{"class":1026},"findAll",[1002,107430,1031],{"class":1030},[1002,107432,107277],{"class":1034},[1002,107434,1085],{"class":1030},[1002,107436,107437],{"class":1004,"line":1054},[1002,107438,1502],{"class":1030},[1002,107440,107441],{"class":1004,"line":1060},[1002,107442,2804],{"class":1030},[925,107444,107445],{},"To find the product with the matching ID:",[993,107447,107449],{"className":995,"code":107448,"language":997,"meta":998,"style":998},"App.ProductRoute = Ember.Route.extend({\n model: function (params) {\n return this.store.find('product', params.product_id);\n },\n});\n",[941,107450,107451,107464,107478,107495,107499],{"__ignoreMap":998},[1002,107452,107453,107456,107458,107460,107462],{"class":1004,"line":1005},[1002,107454,107455],{"class":1030},"App.ProductRoute ",[1002,107457,2393],{"class":1015},[1002,107459,106589],{"class":1030},[1002,107461,106592],{"class":1026},[1002,107463,2756],{"class":1030},[1002,107465,107466,107468,107470,107472,107474,107476],{"class":1004,"line":1012},[1002,107467,106599],{"class":1026},[1002,107469,1137],{"class":1030},[1002,107471,6965],{"class":1015},[1002,107473,6513],{"class":1030},[1002,107475,24866],{"class":2378},[1002,107477,2382],{"class":1030},[1002,107479,107480,107482,107484,107486,107488,107490,107492],{"class":1004,"line":1047},[1002,107481,2687],{"class":1015},[1002,107483,2693],{"class":1019},[1002,107485,107425],{"class":1030},[1002,107487,34303],{"class":1026},[1002,107489,1031],{"class":1030},[1002,107491,107277],{"class":1034},[1002,107493,107494],{"class":1030},", params.product_id);\n",[1002,107496,107497],{"class":1004,"line":1054},[1002,107498,1502],{"class":1030},[1002,107500,107501],{"class":1004,"line":1060},[1002,107502,2804],{"class":1030},[1579,107504,107505],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":107507},[107508,107509,107510,107511,107512,107513,107514],{"id":106683,"depth":1012,"text":106684},{"id":106693,"depth":1012,"text":106694},{"id":106730,"depth":1012,"text":106731},{"id":106923,"depth":1012,"text":106924},{"id":106930,"depth":1012,"text":106931},{"id":106981,"depth":1012,"text":106982},{"id":107223,"depth":1012,"text":107224},"2015-03-26","\u002Fimages\u002Fblog\u002Ffeatures\u002Fmodels-ember-data.jpg",{},{"title":563,"description":565},"blog\u002Fmodels-ember-data",[16,17,173],"SoEfLbk0pwUuBd2SjU0IpzC9-s_AOVjGw9I37WY-i9s",{"id":107523,"title":730,"author":920,"body":107524,"date":108215,"description":732,"extension":1591,"image":108216,"meta":108217,"navigation":1050,"path":731,"seo":108218,"stem":108219,"tags":108220,"__hash__":108221},"blog\u002Fblog\u002Fruby-api-rest-routes-constraints-namespaces.md",{"type":922,"value":107525,"toc":108200},[107526,107529,107533,107543,107547,107550,107553,107556,107559,107562,107577,107580,107583,107587,107592,107597,107606,107609,107622,107629,107634,107638,107641,107645,107654,107663,107667,107676,107679,107683,107696,107700,107715,107722,107727,107730,107749,107752,107756,107767,107771,107791,107798,107802,107835,107839,107842,107845,107850,107865,107868,107874,107877,107893,107897,107900,107904,107930,107939,107974,107977,107982,108006,108009,108014,108028,108031,108035,108038,108044,108048,108074,108080,108084,108110,108116,108119,108137,108141,108144,108149,108168,108171,108175,108197],[925,107527,107528],{},"Let's look at an example application that uses a Web API as a service.",[953,107530,107532],{"id":107531},"how-does-a-video-streaming-service-work","How does a video streaming service work?",[925,107534,107535,107536,107539,107540,107542],{},"You can create a channel say ",[1107,107537,107538],{},"Channel A"," from your web application. Then you can access ",[1107,107541,107538],{}," from your mobile app. So as you can see your Web API can provide data for all sort of different applications.",[953,107544,107546],{"id":107545},"how-the-client-server-communicate","How the client & server communicate?",[925,107548,107549],{},"The communication from the client to server and back to the client of the above application can be described as follows:",[925,107551,107552],{},"Client ---> CREATE \u002Fchannels video1, video2, video3 ---> Server\nClient \u003C--- OK channel12 was created.------------------ Server",[925,107554,107555],{},"Client --- READ \u002Fchannels\u002F12 --------> Server\nClient \u003C-- OK video1,video2,video3 --- Server",[925,107557,107558],{},"Client --- READ \u002Fchannels ----------------------> Server\nClient \u003C-- OK chennel10, channel11, channel12 --- Server",[925,107560,107561],{},"Client --- READ \u002Fchannels\u002Ffake10 --> Server\nClient \u003C-- ERROR invalid channel --- Server",[925,107563,107564,107565,107568,107569,107572,107573,107576],{},"Notice the pattern here: A set of ",[1107,107566,107567],{},"commands"," performed on ",[1107,107570,107571],{},"things"," generating ",[1107,107574,107575],{},"responses",": the very foundation of a REST API.",[953,107578,107579],{"id":27630},"REST",[925,107581,107582],{},"REST stands for REpresentational State Transfer. By following a strict set of operations, REST allows us to build an infrastructure that can be supported widely with different types of applications.",[953,107584,107586],{"id":107585},"where-does-our-api-start","Where does our API start?",[925,107588,107589,107590,33813],{},"A common practice for implementing our API is starting with ",[1107,107591,85258],{},[925,107593,107594],{},[1107,107595,107596],{},"config\u002Froutes.rb",[993,107598,107600],{"className":31824,"code":107599,"language":124,"meta":998,"style":998},"resources :students\n",[941,107601,107602],{"__ignoreMap":998},[1002,107603,107604],{"class":1004,"line":1005},[1002,107605,107599],{},[925,107607,107608],{},"In Rails, command line let's create routes:",[993,107610,107612],{"className":1797,"code":107611,"language":1799,"meta":998,"style":998},"rake routes\n",[941,107613,107614],{"__ignoreMap":998},[1002,107615,107616,107619],{"class":1004,"line":1005},[1002,107617,107618],{"class":1026},"rake",[1002,107620,107621],{"class":1034}," routes\n",[925,107623,107624,107625,107628],{},"This lists all the routes, URIs, ",[941,107626,107627],{},"Controller#actions",", and URL helpers available on our app.",[925,107630,107631],{},[963,107632],{"alt":107627,"src":107633},"http:\u002F\u002Fi.stack.imgur.com\u002FEA98I.png",[953,107635,107637],{"id":107636},"restricting-routes-with-options","Restricting Routes with options",[925,107639,107640],{},"We might not need all these routes, the resources method gives us options to restrict routes to optimize memory as well as speeds up the routing process.",[925,107642,107643],{},[1107,107644,107596],{},[993,107646,107648],{"className":31824,"code":107647,"language":124,"meta":998,"style":998},"resources :students, except: :destroy\n",[941,107649,107650],{"__ignoreMap":998},[1002,107651,107652],{"class":1004,"line":1005},[1002,107653,107647],{},[925,107655,107656,107657,107660,107661,106200],{},"Here we are excluding the destroy route above which has a DELETE method.\nTo ",[1107,107658,107659],{},"only"," create one route we can use ",[1107,107662,107659],{},[925,107664,107665],{},[1107,107666,107596],{},[993,107668,107670],{"className":31824,"code":107669,"language":124,"meta":998,"style":998},"resources :students, only: :index\n",[941,107671,107672],{"__ignoreMap":998},[1002,107673,107674],{"class":1004,"line":1005},[1002,107675,107669],{},[925,107677,107678],{},"This will make index as the only reachable action.",[953,107680,107682],{"id":107681},"restricting-routes-with-multiple-actions","Restricting routes with multiple actions",[925,107684,107685,107686,2034,107690,107695],{},"Both ",[1107,107687,107688],{},[107659,107689],{},[1107,107691,107692],{},[107693,107694],"except",{}," can also take an array of actions.",[925,107697,107698],{},[1107,107699,107596],{},[993,107701,107703],{"className":31824,"code":107702,"language":124,"meta":998,"style":998},"resources :students, only: [:index, :show]\nresources :teachers, only: [:destroy, :edit, :update]\n",[941,107704,107705,107710],{"__ignoreMap":998},[1002,107706,107707],{"class":1004,"line":1005},[1002,107708,107709],{},"resources :students, only: [:index, :show]\n",[1002,107711,107712],{"class":1004,"line":1012},[1002,107713,107714],{},"resources :teachers, only: [:destroy, :edit, :update]\n",[953,107716,45029,107718,107721],{"id":107717},"using-with_options-on-routes",[941,107719,107720],{},"with_options"," on routes",[925,107723,3898,107724,107726],{},[1107,107725,107720],{}," method is an elegant way to factor duplication out of options passed to a series of method calls.",[925,107728,107729],{},"Take a look at the routes file below:",[993,107731,107733],{"className":31824,"code":107732,"language":124,"meta":998,"style":998},"resources :students, only: :index\nresources :teachers, only: :index\nresoucres :principles, only: :index\n",[941,107734,107735,107739,107744],{"__ignoreMap":998},[1002,107736,107737],{"class":1004,"line":1005},[1002,107738,107669],{},[1002,107740,107741],{"class":1004,"line":1012},[1002,107742,107743],{},"resources :teachers, only: :index\n",[1002,107745,107746],{"class":1004,"line":1047},[1002,107747,107748],{},"resoucres :principles, only: :index\n",[925,107750,107751],{},"Let's use with_options so the options passed as arguments are automatically added to the resources.",[953,107753,107755],{"id":107754},"using-constraints-to-enforce-subdomain","Using constraints to enforce subdomain",[925,107757,107758,107759,107762,107763,107766],{},"Keeping out API under its own ",[1107,107760,107761],{},"subdomain"," allows ",[1107,107764,107765],{},"load balancing"," traffic at the DNS level, way faster than doing it at the application level.",[925,107768,107769],{},[1107,107770,107596],{},[993,107772,107774],{"className":31824,"code":107773,"language":124,"meta":998,"style":998},"resources :courses # http:\u002F\u002Fschool.com\u002Fcourses\nresources :students, constraints: { subdomain: 'api' } # http:\u002F\u002Fapi.school.com\u002Fstudents\nresources :teachers, constraints: { subdomain: 'api' } # http:\u002F\u002Fapi.school.com\u002Fteachers\n",[941,107775,107776,107781,107786],{"__ignoreMap":998},[1002,107777,107778],{"class":1004,"line":1005},[1002,107779,107780],{},"resources :courses # http:\u002F\u002Fschool.com\u002Fcourses\n",[1002,107782,107783],{"class":1004,"line":1012},[1002,107784,107785],{},"resources :students, constraints: { subdomain: 'api' } # http:\u002F\u002Fapi.school.com\u002Fstudents\n",[1002,107787,107788],{"class":1004,"line":1047},[1002,107789,107790],{},"resources :teachers, constraints: { subdomain: 'api' } # http:\u002F\u002Fapi.school.com\u002Fteachers\n",[925,107792,107793,107794,107797],{},"Let's use ",[1107,107795,107796],{},"contraints"," to rewrite above code:",[925,107799,107800],{},[1107,107801,107596],{},[993,107803,107805],{"className":31824,"code":107804,"language":124,"meta":998,"style":998},"resources :courses\n\nconstraints subdomain: 'api' do\n resources :students\n resources :teachers\nend\n",[941,107806,107807,107812,107816,107821,107826,107831],{"__ignoreMap":998},[1002,107808,107809],{"class":1004,"line":1005},[1002,107810,107811],{},"resources :courses\n",[1002,107813,107814],{"class":1004,"line":1012},[1002,107815,1051],{"emptyLinePlaceholder":1050},[1002,107817,107818],{"class":1004,"line":1047},[1002,107819,107820],{},"constraints subdomain: 'api' do\n",[1002,107822,107823],{"class":1004,"line":1054},[1002,107824,107825],{}," resources :students\n",[1002,107827,107828],{"class":1004,"line":1060},[1002,107829,107830],{}," resources :teachers\n",[1002,107832,107833],{"class":1004,"line":1272},[1002,107834,35196],{},[953,107836,107838],{"id":107837},"network-subdomain-in-development","Network subdomain in development",[925,107840,107841],{},"Network configuration for supporting subdomains in development.",[925,107843,107844],{},"In order to develop this locally, we have done a few things in our host file. Add the following entries into your host file.",[925,107846,107847],{},[1107,107848,107849],{},"etc\u002Fhosts.rb",[993,107851,107853],{"className":31824,"code":107852,"language":124,"meta":998,"style":998},"127.0.0.1 school-dev.com\n127.0.0.1 api.school-dev.com\n",[941,107854,107855,107860],{"__ignoreMap":998},[1002,107856,107857],{"class":1004,"line":1005},[1002,107858,107859],{},"127.0.0.1 school-dev.com\n",[1002,107861,107862],{"class":1004,"line":1012},[1002,107863,107864],{},"127.0.0.1 api.school-dev.com\n",[925,107866,107867],{},"Now your URLs will look as follows:",[993,107869,107872],{"className":107870,"code":107871,"language":24241},[24239],"http:\u002F\u002Fschool-dev.com:3000\nhttp:\u002F\u002Fapi.school-dev.com:3000\n",[941,107873,107871],{"__ignoreMap":998},[925,107875,107876],{},"Don't forget the port number is still required. There are other alternatives you can use:",[1530,107878,107879,107886],{},[974,107880,107881,107882],{},"POW - ",[933,107883,107884],{"href":107884,"rel":107885},"http:\u002F\u002Fpow.cx",[937],[974,107887,107888,107889],{},"LVH.me - ",[933,107890,107891],{"href":107891,"rel":107892},"http:\u002F\u002Flvh.me",[937],[953,107894,107896],{"id":107895},"keeping-web-and-api-controllers-organized","Keeping Web and API controllers organized",[925,107898,107899],{},"It's not uncommon to use the same Rails code base for both web site and Web API.",[925,107901,107902],{},[1107,107903,107596],{},[993,107905,107907],{"className":31824,"code":107906,"language":124,"meta":998,"style":998},"resources :pages # serves web site, not a web API\n\nconstraints subdomain: 'api' do\n resources :students\nend\n",[941,107908,107909,107914,107918,107922,107926],{"__ignoreMap":998},[1002,107910,107911],{"class":1004,"line":1005},[1002,107912,107913],{},"resources :pages # serves web site, not a web API\n",[1002,107915,107916],{"class":1004,"line":1012},[1002,107917,1051],{"emptyLinePlaceholder":1050},[1002,107919,107920],{"class":1004,"line":1047},[1002,107921,107820],{},[1002,107923,107924],{"class":1004,"line":1054},[1002,107925,107825],{},[1002,107927,107928],{"class":1004,"line":1060},[1002,107929,35196],{},[925,107931,107932,107933,107936,107937],{},"This will render web API and the web site controllers under the same folder. It's a good practice to keep web controllers ",[1107,107934,107935],{},"separate"," from API controllers.\n",[1107,107938,107596],{},[993,107940,107942],{"className":31824,"code":107941,"language":124,"meta":998,"style":998},"resources :pages # serves web site, not a web API\n\nconstraints subdomain: 'api' do\n names :api do\n resources :students\n end\nend\n",[941,107943,107944,107948,107952,107956,107961,107966,107970],{"__ignoreMap":998},[1002,107945,107946],{"class":1004,"line":1005},[1002,107947,107913],{},[1002,107949,107950],{"class":1004,"line":1012},[1002,107951,1051],{"emptyLinePlaceholder":1050},[1002,107953,107954],{"class":1004,"line":1047},[1002,107955,107820],{},[1002,107957,107958],{"class":1004,"line":1054},[1002,107959,107960],{}," names :api do\n",[1002,107962,107963],{"class":1004,"line":1060},[1002,107964,107965],{}," resources :students\n",[1002,107967,107968],{"class":1004,"line":1272},[1002,107969,35182],{},[1002,107971,107972],{"class":1004,"line":1348},[1002,107973,35196],{},[925,107975,107976],{},"This will result in web API controllers having their own namespace.",[925,107978,107979],{},[1107,107980,107981],{},"app\u002Fcontrollers\u002Fapi\u002Fstudents_controller.rb",[993,107983,107985],{"className":31824,"code":107984,"language":124,"meta":998,"style":998},"module Api\n class ZombiesController \u003C ApplicationController\n end\nend\n",[941,107986,107987,107992,107997,108002],{"__ignoreMap":998},[1002,107988,107989],{"class":1004,"line":1005},[1002,107990,107991],{},"module Api\n",[1002,107993,107994],{"class":1004,"line":1012},[1002,107995,107996],{}," class ZombiesController \u003C ApplicationController\n",[1002,107998,107999],{"class":1004,"line":1047},[1002,108000,108001],{}," end\n",[1002,108003,108004],{"class":1004,"line":1054},[1002,108005,35196],{},[925,108007,108008],{},"Web API controllers are part of the API module.",[925,108010,108011],{},[1107,108012,108013],{},"app\u002Fcontrollers\u002Fpages_controller.rb",[993,108015,108017],{"className":31824,"code":108016,"language":124,"meta":998,"style":998},"class PagesController \u003C ApplicationController\nend\n",[941,108018,108019,108024],{"__ignoreMap":998},[1002,108020,108021],{"class":1004,"line":1005},[1002,108022,108023],{},"class PagesController \u003C ApplicationController\n",[1002,108025,108026],{"class":1004,"line":1012},[1002,108027,35196],{},[925,108029,108030],{},"Web site controllers remain on top-level namespace",[953,108032,108034],{"id":108033},"removing-duplication-from-the-url","Removing duplication from the URL",[925,108036,108037],{},"Enforcing both subdomain namespace as well as API namespace, creates duplication:",[925,108039,108040],{},[933,108041,108042],{"href":108042,"rel":108043},"http:\u002F\u002Fapi.school.com\u002Fapi",[937],[925,108045,108046],{},[1107,108047,107596],{},[993,108049,108051],{"className":31824,"code":108050,"language":124,"meta":998,"style":998},"constraints subdomain: 'api' do\n namespace :api do\n resources :students\n end\nend\n",[941,108052,108053,108057,108062,108066,108070],{"__ignoreMap":998},[1002,108054,108055],{"class":1004,"line":1005},[1002,108056,107820],{},[1002,108058,108059],{"class":1004,"line":1012},[1002,108060,108061],{}," namespace :api do\n",[1002,108063,108064],{"class":1004,"line":1047},[1002,108065,107965],{},[1002,108067,108068],{"class":1004,"line":1054},[1002,108069,35182],{},[1002,108071,108072],{"class":1004,"line":1060},[1002,108073,35196],{},[925,108075,108076,108077,108079],{},"We can eliminate the duplication by passing a ",[1107,108078,64361],{}," URI",[925,108081,108082],{},[1107,108083,107596],{},[993,108085,108087],{"className":31824,"code":108086,"language":124,"meta":998,"style":998},"constraints subdomain: 'api' do\n namespace :api, path: '\u002F' do\n resources :students\n end\nend\n",[941,108088,108089,108093,108098,108102,108106],{"__ignoreMap":998},[1002,108090,108091],{"class":1004,"line":1005},[1002,108092,107820],{},[1002,108094,108095],{"class":1004,"line":1012},[1002,108096,108097],{}," namespace :api, path: '\u002F' do\n",[1002,108099,108100],{"class":1004,"line":1047},[1002,108101,107965],{},[1002,108103,108104],{"class":1004,"line":1054},[1002,108105,35182],{},[1002,108107,108108],{"class":1004,"line":1060},[1002,108109,35196],{},[925,108111,108112],{},[933,108113,108114],{"href":108114,"rel":108115},"http:\u002F\u002Fapi.school.com\u002F",[937],[925,108117,108118],{},"We can use a short syntax by passing in the path and the constraints as options to the namespace method.",[993,108120,108122],{"className":31824,"code":108121,"language":124,"meta":998,"style":998},"namespace :api, path: '\u002F', constraints: { subdomain: 'api'} do\n resources :students\nend\n",[941,108123,108124,108129,108133],{"__ignoreMap":998},[1002,108125,108126],{"class":1004,"line":1005},[1002,108127,108128],{},"namespace :api, path: '\u002F', constraints: { subdomain: 'api'} do\n",[1002,108130,108131],{"class":1004,"line":1012},[1002,108132,107825],{},[1002,108134,108135],{"class":1004,"line":1047},[1002,108136,35196],{},[953,108138,108140],{"id":108139},"api-case-consistency","API case consistency",[925,108142,108143],{},"To make api all-caps, we need to add an acronym:",[925,108145,108146],{},[1107,108147,108148],{},"config\u002Finitializers\u002Finflections.rb",[993,108150,108152],{"className":31824,"code":108151,"language":124,"meta":998,"style":998},"ActiveSupport::Inflector.inflections(:en) do |inflect|\n inflect.acronym 'API'\nend\n",[941,108153,108154,108159,108164],{"__ignoreMap":998},[1002,108155,108156],{"class":1004,"line":1005},[1002,108157,108158],{},"ActiveSupport::Inflector.inflections(:en) do |inflect|\n",[1002,108160,108161],{"class":1004,"line":1012},[1002,108162,108163],{}," inflect.acronym 'API'\n",[1002,108165,108166],{"class":1004,"line":1047},[1002,108167,35196],{},[925,108169,108170],{},"Now we can write our API module in all-caps:",[925,108172,108173],{},[1107,108174,107981],{},[993,108176,108178],{"className":31824,"code":108177,"language":124,"meta":998,"style":998},"module API\n class ZombiesController \u003C ApplicationController\n end\nend\n",[941,108179,108180,108185,108189,108193],{"__ignoreMap":998},[1002,108181,108182],{"class":1004,"line":1005},[1002,108183,108184],{},"module API\n",[1002,108186,108187],{"class":1004,"line":1012},[1002,108188,107996],{},[1002,108190,108191],{"class":1004,"line":1047},[1002,108192,108001],{},[1002,108194,108195],{"class":1004,"line":1054},[1002,108196,35196],{},[1579,108198,108199],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":108201},[108202,108203,108204,108205,108206,108207,108208,108210,108211,108212,108213,108214],{"id":107531,"depth":1012,"text":107532},{"id":107545,"depth":1012,"text":107546},{"id":27630,"depth":1012,"text":107579},{"id":107585,"depth":1012,"text":107586},{"id":107636,"depth":1012,"text":107637},{"id":107681,"depth":1012,"text":107682},{"id":107717,"depth":1012,"text":108209},"Using with_options on routes",{"id":107754,"depth":1012,"text":107755},{"id":107837,"depth":1012,"text":107838},{"id":107895,"depth":1012,"text":107896},{"id":108033,"depth":1012,"text":108034},{"id":108139,"depth":1012,"text":108140},"2015-03-15","\u002Fimages\u002Fblog\u002Ffeatures\u002Fruby-api-rest-routes-constraints-namespaces.jpg",{},{"title":730,"description":732},"blog\u002Fruby-api-rest-routes-constraints-namespaces",[16,124],"3sifGWw8K4sDPrCKidK37hfwO0q20OmtL2h4RMLJer8",{"id":108223,"title":126,"author":920,"body":108224,"date":108667,"description":128,"extension":1591,"image":108668,"meta":108669,"navigation":1050,"path":127,"seo":108670,"stem":108671,"tags":108672,"__hash__":108673},"blog\u002Fblog\u002Fcss-clearing-floats.md",{"type":922,"value":108225,"toc":108659},[108226,108230,108233,108238,108241,108244,108255,108258,108261,108266,108334,108338,108387,108390,108393,108398,108401,108404,108408,108472,108476,108502,108505,108508,108512,108564,108568,108656],[953,108227,108229],{"id":108228},"clearing-floats","Clearing Floats",[925,108231,108232],{},"Floated items can be taller than non-floated content",[925,108234,108235],{},[963,108236],{"alt":108229,"src":108237},"https:\u002F\u002Ffarm8.staticflickr.com\u002F7307\u002F16414108831_3d202f370a_o.png",[925,108239,108240],{},"Clearing is necessary if all children are floating",[925,108242,108243],{},"Common float-clearing methods:",[1530,108245,108246,108249,108252],{},[974,108247,108248],{},"Clear with a subsequent element",[974,108250,108251],{},"Manual clearing",[974,108253,108254],{},"The clearfix",[925,108256,108257],{},"clear: left \u002F right \u002F both",[1655,108259,108248],{"id":108260},"clear-with-a-subsequent-element",[925,108262,108263],{},[1107,108264,108265],{},"HTML",[993,108267,108269],{"className":37880,"code":108268,"language":383,"meta":998,"style":998},"\u003Cdiv>\n \u003Cimg src=\"ski.jpg\" alt=\"Skiing!\" \u002F>\n To successfully ski, simply do not fall.\n\u003C\u002Fdiv>\n\u003Cdiv class=\"intro\">Whee!\u003C\u002Fdiv>\n",[941,108270,108271,108279,108301,108306,108314],{"__ignoreMap":998},[1002,108272,108273,108275,108277],{"class":1004,"line":1005},[1002,108274,6539],{"class":1030},[1002,108276,19650],{"class":15711},[1002,108278,15703],{"class":1030},[1002,108280,108281,108283,108285,108287,108289,108292,108294,108296,108299],{"class":1004,"line":1012},[1002,108282,22427],{"class":1030},[1002,108284,963],{"class":15711},[1002,108286,15242],{"class":1026},[1002,108288,2393],{"class":1030},[1002,108290,108291],{"class":1034},"\"ski.jpg\"",[1002,108293,60884],{"class":1026},[1002,108295,2393],{"class":1030},[1002,108297,108298],{"class":1034},"\"Skiing!\"",[1002,108300,15258],{"class":1030},[1002,108302,108303],{"class":1004,"line":1047},[1002,108304,108305],{"class":1030}," To successfully ski, simply do not fall.\n",[1002,108307,108308,108310,108312],{"class":1004,"line":1054},[1002,108309,22437],{"class":1030},[1002,108311,19650],{"class":15711},[1002,108313,15703],{"class":1030},[1002,108315,108316,108318,108320,108322,108324,108327,108330,108332],{"class":1004,"line":1060},[1002,108317,6539],{"class":1030},[1002,108319,19650],{"class":15711},[1002,108321,17187],{"class":1026},[1002,108323,2393],{"class":1030},[1002,108325,108326],{"class":1034},"\"intro\"",[1002,108328,108329],{"class":1030},">Whee!\u003C\u002F",[1002,108331,19650],{"class":15711},[1002,108333,15703],{"class":1030},[925,108335,108336],{},[1107,108337,35565],{},[993,108339,108341],{"className":35707,"code":108340,"language":29,"meta":998,"style":998},"img {\n float: left;\n}\n.intro {\n clear: both;\n}\n",[941,108342,108343,108349,108360,108364,108371,108383],{"__ignoreMap":998},[1002,108344,108345,108347],{"class":1004,"line":1005},[1002,108346,963],{"class":15711},[1002,108348,1457],{"class":1030},[1002,108350,108351,108354,108356,108358],{"class":1004,"line":1012},[1002,108352,108353],{"class":1019}," float",[1002,108355,1137],{"class":1030},[1002,108357,39753],{"class":1019},[1002,108359,1407],{"class":1030},[1002,108361,108362],{"class":1004,"line":1047},[1002,108363,1170],{"class":1030},[1002,108365,108366,108369],{"class":1004,"line":1054},[1002,108367,108368],{"class":1026},".intro",[1002,108370,1457],{"class":1030},[1002,108372,108373,108376,108378,108381],{"class":1004,"line":1060},[1002,108374,108375],{"class":1019}," clear",[1002,108377,1137],{"class":1030},[1002,108379,108380],{"class":1019},"both",[1002,108382,1407],{"class":1030},[1002,108384,108385],{"class":1004,"line":1272},[1002,108386,1170],{"class":1030},[1655,108388,108248],{"id":108389},"clear-with-a-subsequent-element-1",[925,108391,108392],{},"This requires sequence to stay intact - breaks if things move.\nBackground \u002F border do not extend.",[925,108394,108395],{},[963,108396],{"alt":108248,"src":108397},"https:\u002F\u002Ffarm9.staticflickr.com\u002F8645\u002F15793452054_d6d82a0298_o.png",[1655,108399,108251],{"id":108400},"manual-clearing",[925,108402,108403],{},"This requires an empty element",[925,108405,108406],{},[1107,108407,108265],{},[993,108409,108411],{"className":37880,"code":108410,"language":383,"meta":998,"style":998},"\u003Cdiv>\n \u003Cimg src=\"ski.jpg\" alt=\"Skiing!\" \u002F>\n To successfully ski, simply do not fall.\n \u003Cdiv class=\"clear\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[941,108412,108413,108421,108441,108445,108464],{"__ignoreMap":998},[1002,108414,108415,108417,108419],{"class":1004,"line":1005},[1002,108416,6539],{"class":1030},[1002,108418,19650],{"class":15711},[1002,108420,15703],{"class":1030},[1002,108422,108423,108425,108427,108429,108431,108433,108435,108437,108439],{"class":1004,"line":1012},[1002,108424,22427],{"class":1030},[1002,108426,963],{"class":15711},[1002,108428,15242],{"class":1026},[1002,108430,2393],{"class":1030},[1002,108432,108291],{"class":1034},[1002,108434,60884],{"class":1026},[1002,108436,2393],{"class":1030},[1002,108438,108298],{"class":1034},[1002,108440,15258],{"class":1030},[1002,108442,108443],{"class":1004,"line":1047},[1002,108444,108305],{"class":1030},[1002,108446,108447,108449,108451,108453,108455,108458,108460,108462],{"class":1004,"line":1054},[1002,108448,22427],{"class":1030},[1002,108450,19650],{"class":15711},[1002,108452,17187],{"class":1026},[1002,108454,2393],{"class":1030},[1002,108456,108457],{"class":1034},"\"clear\"",[1002,108459,22081],{"class":1030},[1002,108461,19650],{"class":15711},[1002,108463,15703],{"class":1030},[1002,108465,108466,108468,108470],{"class":1004,"line":1060},[1002,108467,22437],{"class":1030},[1002,108469,19650],{"class":15711},[1002,108471,15703],{"class":1030},[925,108473,108474],{},[1107,108475,35565],{},[993,108477,108479],{"className":35707,"code":108478,"language":29,"meta":998,"style":998},".clear {\n clear: both;\n}\n",[941,108480,108481,108488,108498],{"__ignoreMap":998},[1002,108482,108483,108486],{"class":1004,"line":1005},[1002,108484,108485],{"class":1026},".clear",[1002,108487,1457],{"class":1030},[1002,108489,108490,108492,108494,108496],{"class":1004,"line":1012},[1002,108491,108375],{"class":1019},[1002,108493,1137],{"class":1030},[1002,108495,108380],{"class":1019},[1002,108497,1407],{"class":1030},[1002,108499,108500],{"class":1004,"line":1047},[1002,108501,1170],{"class":1030},[1655,108503,108254],{"id":108504},"the-clearfix",[925,108506,108507],{},"The clearfix was originally developed by Tony Aslett, and then refined by Nicholas Gallagher.\nWhen used on the parent, the children will be self-cleared.",[925,108509,108510],{},[1107,108511,108265],{},[993,108513,108515],{"className":37880,"code":108514,"language":383,"meta":998,"style":998},"\u003Cdiv class=\"group\">\n \u003Cimg src=\"ski.jpg\" alt=\"Skiing!\" \u002F>\n To successfully ski, simply do not fall.\n\u003C\u002Fdiv>\n",[941,108516,108517,108532,108552,108556],{"__ignoreMap":998},[1002,108518,108519,108521,108523,108525,108527,108530],{"class":1004,"line":1005},[1002,108520,6539],{"class":1030},[1002,108522,19650],{"class":15711},[1002,108524,17187],{"class":1026},[1002,108526,2393],{"class":1030},[1002,108528,108529],{"class":1034},"\"group\"",[1002,108531,15703],{"class":1030},[1002,108533,108534,108536,108538,108540,108542,108544,108546,108548,108550],{"class":1004,"line":1012},[1002,108535,22427],{"class":1030},[1002,108537,963],{"class":15711},[1002,108539,15242],{"class":1026},[1002,108541,2393],{"class":1030},[1002,108543,108291],{"class":1034},[1002,108545,60884],{"class":1026},[1002,108547,2393],{"class":1030},[1002,108549,108298],{"class":1034},[1002,108551,15258],{"class":1030},[1002,108553,108554],{"class":1004,"line":1047},[1002,108555,108305],{"class":1030},[1002,108557,108558,108560,108562],{"class":1004,"line":1054},[1002,108559,22437],{"class":1030},[1002,108561,19650],{"class":15711},[1002,108563,15703],{"class":1030},[925,108565,108566],{},[1107,108567,35565],{},[993,108569,108571],{"className":35707,"code":108570,"language":29,"meta":998,"style":998},".group:before,\n.group:after {\n content: '';\n display: table;\n}\n.group:after {\n clear: both;\n}\n.group {\n zoom: 1; \u002F* IE6&7 *\u002F\n}\n",[941,108572,108573,108580,108587,108598,108608,108612,108618,108628,108632,108639,108652],{"__ignoreMap":998},[1002,108574,108575,108578],{"class":1004,"line":1005},[1002,108576,108577],{"class":1026},".group:before",[1002,108579,1143],{"class":1030},[1002,108581,108582,108585],{"class":1004,"line":1012},[1002,108583,108584],{"class":1026},".group:after",[1002,108586,1457],{"class":1030},[1002,108588,108589,108592,108594,108596],{"class":1004,"line":1047},[1002,108590,108591],{"class":1019}," content",[1002,108593,1137],{"class":1030},[1002,108595,19820],{"class":1034},[1002,108597,1407],{"class":1030},[1002,108599,108600,108602,108604,108606],{"class":1004,"line":1054},[1002,108601,37254],{"class":1019},[1002,108603,1137],{"class":1030},[1002,108605,39742],{"class":1019},[1002,108607,1407],{"class":1030},[1002,108609,108610],{"class":1004,"line":1060},[1002,108611,1170],{"class":1030},[1002,108613,108614,108616],{"class":1004,"line":1272},[1002,108615,108584],{"class":1026},[1002,108617,1457],{"class":1030},[1002,108619,108620,108622,108624,108626],{"class":1004,"line":1348},[1002,108621,108375],{"class":1019},[1002,108623,1137],{"class":1030},[1002,108625,108380],{"class":1019},[1002,108627,1407],{"class":1030},[1002,108629,108630],{"class":1004,"line":1354},[1002,108631,1170],{"class":1030},[1002,108633,108634,108637],{"class":1004,"line":1360},[1002,108635,108636],{"class":1026},".group",[1002,108638,1457],{"class":1030},[1002,108640,108641,108643,108645,108647,108649],{"class":1004,"line":1366},[1002,108642,11515],{"class":1019},[1002,108644,1137],{"class":1030},[1002,108646,6211],{"class":1019},[1002,108648,17938],{"class":1030},[1002,108650,108651],{"class":1008},"\u002F* IE6&7 *\u002F\n",[1002,108653,108654],{"class":1004,"line":1946},[1002,108655,1170],{"class":1030},[1579,108657,108658],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":108660},[108661],{"id":108228,"depth":1012,"text":108229,"children":108662},[108663,108664,108665,108666],{"id":108260,"depth":1047,"text":108248},{"id":108389,"depth":1047,"text":108248},{"id":108400,"depth":1047,"text":108251},{"id":108504,"depth":1047,"text":108254},"2015-02-01","\u002Fimages\u002Fblog\u002Ffeatures\u002Fcss-clearing-floats.jpg",{},{"title":126,"description":128},"blog\u002Fcss-clearing-floats",[16,17],"dkG7FxL3DWJ9TrSAqWt8ihs0VnylJYw9kWjVZNv-dF0",{"id":108675,"title":390,"author":920,"body":108676,"date":109842,"description":392,"extension":1591,"image":109843,"meta":109844,"navigation":1050,"path":391,"seo":109845,"stem":109846,"tags":109847,"__hash__":109848},"blog\u002Fblog\u002Fhtml5-elements.md",{"type":922,"value":108677,"toc":109829},[108678,108681,108713,108719,108723,108726,108731,108734,108738,108746,108749,108787,108790,108819,108823,108826,108829,108843,108846,108877,108880,108886,108891,108894,108900,108903,108906,108938,108941,108966,108969,109029,109033,109038,109041,109073,109076,109101,109104,109174,109178,109183,109186,109194,109197,109200,109237,109239,109264,109267,109349,109353,109355,109360,109366,109368,109404,109407,109432,109435,109437,109442,109445,109448,109462,109465,109501,109504,109529,109532,109534,109539,109542,109550,109553,109588,109591,109616,109620,109622,109627,109630,109673,109676,109731,109734,109736,109741,109743,109745,109755,109758,109776,109779,109797,109800,109826],[925,108679,108680],{},"Here are few examples:",[1530,108682,108683,108688,108693,108698,108703,108708],{},[974,108684,108685],{},[941,108686,108687],{},"\u003Csection>",[974,108689,108690],{},[941,108691,108692],{},"\u003Carticle>",[974,108694,108695],{},[941,108696,108697],{},"\u003Caside>",[974,108699,108700],{},[941,108701,108702],{},"\u003Cdetails>",[974,108704,108705],{},[941,108706,108707],{},"\u003Cdescription>",[974,108709,108710],{},[941,108711,108712],{},"\u003Cnav>",[925,108714,108715],{},[963,108716],{"alt":108717,"src":108718},"HTML5 elements","http:\u002F\u002Fwww.w3schools.com\u002Fhtml\u002Fimg_sem_elements.gif",[953,108720,108722],{"id":108721},"section","SECTION",[925,108724,108725],{},"W3C Specification:",[925,108727,108728],{},[928,108729,108730],{},"The section element represents a generic document or application section.",[925,108732,108733],{},"This sounds a lot like the definition for a div but div has no semantic meaning.",[953,108735,108737],{"id":108736},"section-vs-div","SECTION VS. DIV",[925,108739,20721,108740,108742,108743,108745],{},[1107,108741,19650],{}," has no semantic meaning, but the ",[1107,108744,108721],{}," element does. It’s used for grouping together thematically related content.",[925,108747,108748],{},"Example usage of the section tag:",[993,108750,108752],{"className":37880,"code":108751,"language":383,"meta":998,"style":998},"\u003Cdiv class=\"section\">\n ## The Gallery\n \u003C!-- ... -->\n\u003C\u002Fdiv>\n",[941,108753,108754,108769,108774,108779],{"__ignoreMap":998},[1002,108755,108756,108758,108760,108762,108764,108767],{"class":1004,"line":1005},[1002,108757,6539],{"class":1030},[1002,108759,19650],{"class":15711},[1002,108761,17187],{"class":1026},[1002,108763,2393],{"class":1030},[1002,108765,108766],{"class":1034},"\"section\"",[1002,108768,15703],{"class":1030},[1002,108770,108771],{"class":1004,"line":1012},[1002,108772,108773],{"class":1030}," ## The Gallery\n",[1002,108775,108776],{"class":1004,"line":1047},[1002,108777,108778],{"class":1008}," \u003C!-- ... -->\n",[1002,108780,108781,108783,108785],{"class":1004,"line":1054},[1002,108782,22437],{"class":1030},[1002,108784,19650],{"class":15711},[1002,108786,15703],{"class":1030},[925,108788,108789],{},"This can be replaced with a section tag.",[993,108791,108793],{"className":37880,"code":108792,"language":383,"meta":998,"style":998},"\u003Csection>\n ## The Gallery\n \u003C!-- ... -->\n\u003C\u002Fsection>\n",[941,108794,108795,108803,108807,108811],{"__ignoreMap":998},[1002,108796,108797,108799,108801],{"class":1004,"line":1005},[1002,108798,6539],{"class":1030},[1002,108800,108721],{"class":15711},[1002,108802,15703],{"class":1030},[1002,108804,108805],{"class":1004,"line":1012},[1002,108806,108773],{"class":1030},[1002,108808,108809],{"class":1004,"line":1047},[1002,108810,108778],{"class":1008},[1002,108812,108813,108815,108817],{"class":1004,"line":1054},[1002,108814,22437],{"class":1030},[1002,108816,108721],{"class":15711},[1002,108818,15703],{"class":1030},[953,108820,108822],{"id":108821},"the-document-outline","THE DOCUMENT OUTLINE",[925,108824,108825],{},"The document outline produces an outline summary of an HTML document based on how it is marked up.",[925,108827,108828],{},"The following elements have their self-contained outline:",[1530,108830,108831,108834,108837,108840],{},[974,108832,108833],{},"Article",[974,108835,108836],{},"Aside",[974,108838,108839],{},"Nav",[974,108841,108842],{},"Section",[925,108844,108845],{},"Take the following example:",[993,108847,108849],{"className":37880,"code":108848,"language":383,"meta":998,"style":998},"\u003Ch1>This is the title of the page.\u003C\u002Fh1>\n\u003Csection>## This is the title of a sub-section.\u003C\u002Fsection>\n",[941,108850,108851,108864],{"__ignoreMap":998},[1002,108852,108853,108855,108857,108860,108862],{"class":1004,"line":1005},[1002,108854,6539],{"class":1030},[1002,108856,15201],{"class":15711},[1002,108858,108859],{"class":1030},">This is the title of the page.\u003C\u002F",[1002,108861,15201],{"class":15711},[1002,108863,15703],{"class":1030},[1002,108865,108866,108868,108870,108873,108875],{"class":1004,"line":1012},[1002,108867,6539],{"class":1030},[1002,108869,108721],{"class":15711},[1002,108871,108872],{"class":1030},">## This is the title of a sub-section.\u003C\u002F",[1002,108874,108721],{"class":15711},[1002,108876,15703],{"class":1030},[925,108878,108879],{},"The output of the above, will look like follows:",[993,108881,108884],{"className":108882,"code":108883,"language":24241},[24239],"1. This is the title of the page.\n 1.1 This is the title of a sub-section.\n",[941,108885,108883],{"__ignoreMap":998},[925,108887,32004,108888,108890],{},[1107,108889,15201],{}," inside of the section tag, and the document outline is unchanged.",[953,108892,108893],{"id":15722},"HEADER",[925,108895,108896,108897],{},"W3C Specification:\n",[928,108898,108899],{},"A group of introductory or navigational aids.",[925,108901,108902],{},"There can be many different headers on a page. They usually appear at the top of a document or section, but is defined by its content rather than its position.",[925,108904,108905],{},"Example usage of the header tag:",[993,108907,108909],{"className":37880,"code":108908,"language":383,"meta":998,"style":998},"\u003Cdiv class=\"header\">\n \u003C!-- ... -->\n\u003C\u002Fdiv>\n",[941,108910,108911,108926,108930],{"__ignoreMap":998},[1002,108912,108913,108915,108917,108919,108921,108924],{"class":1004,"line":1005},[1002,108914,6539],{"class":1030},[1002,108916,19650],{"class":15711},[1002,108918,17187],{"class":1026},[1002,108920,2393],{"class":1030},[1002,108922,108923],{"class":1034},"\"header\"",[1002,108925,15703],{"class":1030},[1002,108927,108928],{"class":1004,"line":1012},[1002,108929,108778],{"class":1008},[1002,108931,108932,108934,108936],{"class":1004,"line":1047},[1002,108933,22437],{"class":1030},[1002,108935,19650],{"class":15711},[1002,108937,15703],{"class":1030},[925,108939,108940],{},"This can be done in HTML5 using the header tag:",[993,108942,108944],{"className":37880,"code":108943,"language":383,"meta":998,"style":998},"\u003Cheader>\n \u003C!-- ... -->\n\u003C\u002Fheader>\n",[941,108945,108946,108954,108958],{"__ignoreMap":998},[1002,108947,108948,108950,108952],{"class":1004,"line":1005},[1002,108949,6539],{"class":1030},[1002,108951,15722],{"class":15711},[1002,108953,15703],{"class":1030},[1002,108955,108956],{"class":1004,"line":1012},[1002,108957,108778],{"class":1008},[1002,108959,108960,108962,108964],{"class":1004,"line":1047},[1002,108961,22437],{"class":1030},[1002,108963,15722],{"class":15711},[1002,108965,15703],{"class":1030},[925,108967,108968],{},"Example usage of the header tag within a section:",[993,108970,108972],{"className":37880,"code":108971,"language":383,"meta":998,"style":998},"\u003Csection>\n \u003Cheader>\n \u003Ch1>The heading of the section\u003C\u002Fh1>\n This is content in the header.\n \u003C\u002Fheader>\n This is some information within the section.\n\u003C\u002Fsection>\n",[941,108973,108974,108982,108990,109003,109008,109016,109021],{"__ignoreMap":998},[1002,108975,108976,108978,108980],{"class":1004,"line":1005},[1002,108977,6539],{"class":1030},[1002,108979,108721],{"class":15711},[1002,108981,15703],{"class":1030},[1002,108983,108984,108986,108988],{"class":1004,"line":1012},[1002,108985,22427],{"class":1030},[1002,108987,15722],{"class":15711},[1002,108989,15703],{"class":1030},[1002,108991,108992,108994,108996,108999,109001],{"class":1004,"line":1047},[1002,108993,15697],{"class":1030},[1002,108995,15201],{"class":15711},[1002,108997,108998],{"class":1030},">The heading of the section\u003C\u002F",[1002,109000,15201],{"class":15711},[1002,109002,15703],{"class":1030},[1002,109004,109005],{"class":1004,"line":1054},[1002,109006,109007],{"class":1030}," This is content in the header.\n",[1002,109009,109010,109012,109014],{"class":1004,"line":1060},[1002,109011,28112],{"class":1030},[1002,109013,15722],{"class":15711},[1002,109015,15703],{"class":1030},[1002,109017,109018],{"class":1004,"line":1272},[1002,109019,109020],{"class":1030}," This is some information within the section.\n",[1002,109022,109023,109025,109027],{"class":1004,"line":1348},[1002,109024,22437],{"class":1030},[1002,109026,108721],{"class":15711},[1002,109028,15703],{"class":1030},[953,109030,109032],{"id":109031},"footer","FOOTER",[925,109034,108896,109035],{},[928,109036,109037],{},"Like the header, the footer element is not position-dependent. It should describe the content it is contained within.",[925,109039,109040],{},"Example usage of the footer tag:",[993,109042,109044],{"className":37880,"code":109043,"language":383,"meta":998,"style":998},"\u003Cdiv class=\"footer\">\n \u003C!-- ... -->\n\u003C\u002Fdiv>\n",[941,109045,109046,109061,109065],{"__ignoreMap":998},[1002,109047,109048,109050,109052,109054,109056,109059],{"class":1004,"line":1005},[1002,109049,6539],{"class":1030},[1002,109051,19650],{"class":15711},[1002,109053,17187],{"class":1026},[1002,109055,2393],{"class":1030},[1002,109057,109058],{"class":1034},"\"footer\"",[1002,109060,15703],{"class":1030},[1002,109062,109063],{"class":1004,"line":1012},[1002,109064,108778],{"class":1008},[1002,109066,109067,109069,109071],{"class":1004,"line":1047},[1002,109068,22437],{"class":1030},[1002,109070,19650],{"class":15711},[1002,109072,15703],{"class":1030},[925,109074,109075],{},"This can be done in HTML5 using the footer tag:",[993,109077,109079],{"className":37880,"code":109078,"language":383,"meta":998,"style":998},"\u003Cfooter>\n \u003C!-- ... -->\n\u003C\u002Ffooter>\n",[941,109080,109081,109089,109093],{"__ignoreMap":998},[1002,109082,109083,109085,109087],{"class":1004,"line":1005},[1002,109084,6539],{"class":1030},[1002,109086,109031],{"class":15711},[1002,109088,15703],{"class":1030},[1002,109090,109091],{"class":1004,"line":1012},[1002,109092,108778],{"class":1008},[1002,109094,109095,109097,109099],{"class":1004,"line":1047},[1002,109096,22437],{"class":1030},[1002,109098,109031],{"class":15711},[1002,109100,15703],{"class":1030},[925,109102,109103],{},"Example usage of the footer tag within a section tag:",[993,109105,109107],{"className":37880,"code":109106,"language":383,"meta":998,"style":998},"\u003Csection>\n \u003Cheader>\n \u003Ch1>The heading of the section\u003C\u002Fh1>\n This is content in the header.\n \u003C\u002Fheader>\n This is some information within the section.\n \u003Cfooter>By \"Author Name\"\u003C\u002Ffooter>\n\u003C\u002Fsection>\n",[941,109108,109109,109117,109125,109137,109141,109149,109153,109166],{"__ignoreMap":998},[1002,109110,109111,109113,109115],{"class":1004,"line":1005},[1002,109112,6539],{"class":1030},[1002,109114,108721],{"class":15711},[1002,109116,15703],{"class":1030},[1002,109118,109119,109121,109123],{"class":1004,"line":1012},[1002,109120,22427],{"class":1030},[1002,109122,15722],{"class":15711},[1002,109124,15703],{"class":1030},[1002,109126,109127,109129,109131,109133,109135],{"class":1004,"line":1047},[1002,109128,15697],{"class":1030},[1002,109130,15201],{"class":15711},[1002,109132,108998],{"class":1030},[1002,109134,15201],{"class":15711},[1002,109136,15703],{"class":1030},[1002,109138,109139],{"class":1004,"line":1054},[1002,109140,109007],{"class":1030},[1002,109142,109143,109145,109147],{"class":1004,"line":1060},[1002,109144,28112],{"class":1030},[1002,109146,15722],{"class":15711},[1002,109148,15703],{"class":1030},[1002,109150,109151],{"class":1004,"line":1272},[1002,109152,109020],{"class":1030},[1002,109154,109155,109157,109159,109162,109164],{"class":1004,"line":1348},[1002,109156,22427],{"class":1030},[1002,109158,109031],{"class":15711},[1002,109160,109161],{"class":1030},">By \"Author Name\"\u003C\u002F",[1002,109163,109031],{"class":15711},[1002,109165,15703],{"class":1030},[1002,109167,109168,109170,109172],{"class":1004,"line":1354},[1002,109169,22437],{"class":1030},[1002,109171,108721],{"class":15711},[1002,109173,15703],{"class":1030},[953,109175,109177],{"id":109176},"aside","ASIDE",[925,109179,108896,109180],{},[928,109181,109182],{},"Initially, the HTML5 spec defined the aside element as being “tangentially related to the content surrounding it.”",[925,109184,109185],{},"The aside now covers various contexts:",[1530,109187,109188,109191],{},[974,109189,109190],{},"When used within an article element, the aside contents should be related to that particular article it is contained within.",[974,109192,109193],{},"When used outside an article element, the aside contents should be specifically related to the site.",[925,109195,109196],{},"An aside element is appropriate when it is used to represent content that is not the primary focus of an article or page, but it is still related to the article or page.",[925,109198,109199],{},"Example usage of the aside tag:",[993,109201,109203],{"className":37880,"code":109202,"language":383,"meta":998,"style":998},"\u003Cdiv class=\"sidebar\">\n \">\n \u003C!-- ... -->\n\u003C\u002Fdiv>\n",[941,109204,109205,109220,109225,109229],{"__ignoreMap":998},[1002,109206,109207,109209,109211,109213,109215,109218],{"class":1004,"line":1005},[1002,109208,6539],{"class":1030},[1002,109210,19650],{"class":15711},[1002,109212,17187],{"class":1026},[1002,109214,2393],{"class":1030},[1002,109216,109217],{"class":1034},"\"sidebar\"",[1002,109219,15703],{"class":1030},[1002,109221,109222],{"class":1004,"line":1012},[1002,109223,109224],{"class":1030}," \">\n",[1002,109226,109227],{"class":1004,"line":1047},[1002,109228,108778],{"class":1008},[1002,109230,109231,109233,109235],{"class":1004,"line":1054},[1002,109232,22437],{"class":1030},[1002,109234,19650],{"class":15711},[1002,109236,15703],{"class":1030},[925,109238,109075],{},[993,109240,109242],{"className":37880,"code":109241,"language":383,"meta":998,"style":998},"\u003Caside>\n \u003C!-- ... -->\n\u003C\u002Faside>\n",[941,109243,109244,109252,109256],{"__ignoreMap":998},[1002,109245,109246,109248,109250],{"class":1004,"line":1005},[1002,109247,6539],{"class":1030},[1002,109249,109176],{"class":15711},[1002,109251,15703],{"class":1030},[1002,109253,109254],{"class":1004,"line":1012},[1002,109255,108778],{"class":1008},[1002,109257,109258,109260,109262],{"class":1004,"line":1047},[1002,109259,22437],{"class":1030},[1002,109261,109176],{"class":15711},[1002,109263,15703],{"class":1030},[925,109265,109266],{},"Example usage of the aside tag within a section tag:",[993,109268,109270],{"className":37880,"code":109269,"language":383,"meta":998,"style":998},"\u003Csection>\n \u003Cheader>\n \u003Ch1>The heading of the section\u003C\u002Fh1>\n This is content in the header.\n \u003C\u002Fheader>\n This is some information within the section.\n \u003Caside>Some secondary information.\u003C\u002Faside>\n \u003Cfooter>By \"Author Name\"\u003C\u002Ffooter>\n\u003C\u002Fsection>\n",[941,109271,109272,109280,109288,109300,109304,109312,109316,109329,109341],{"__ignoreMap":998},[1002,109273,109274,109276,109278],{"class":1004,"line":1005},[1002,109275,6539],{"class":1030},[1002,109277,108721],{"class":15711},[1002,109279,15703],{"class":1030},[1002,109281,109282,109284,109286],{"class":1004,"line":1012},[1002,109283,22427],{"class":1030},[1002,109285,15722],{"class":15711},[1002,109287,15703],{"class":1030},[1002,109289,109290,109292,109294,109296,109298],{"class":1004,"line":1047},[1002,109291,15697],{"class":1030},[1002,109293,15201],{"class":15711},[1002,109295,108998],{"class":1030},[1002,109297,15201],{"class":15711},[1002,109299,15703],{"class":1030},[1002,109301,109302],{"class":1004,"line":1054},[1002,109303,109007],{"class":1030},[1002,109305,109306,109308,109310],{"class":1004,"line":1060},[1002,109307,28112],{"class":1030},[1002,109309,15722],{"class":15711},[1002,109311,15703],{"class":1030},[1002,109313,109314],{"class":1004,"line":1272},[1002,109315,109020],{"class":1030},[1002,109317,109318,109320,109322,109325,109327],{"class":1004,"line":1348},[1002,109319,22427],{"class":1030},[1002,109321,109176],{"class":15711},[1002,109323,109324],{"class":1030},">Some secondary information.\u003C\u002F",[1002,109326,109176],{"class":15711},[1002,109328,15703],{"class":1030},[1002,109330,109331,109333,109335,109337,109339],{"class":1004,"line":1354},[1002,109332,22427],{"class":1030},[1002,109334,109031],{"class":15711},[1002,109336,109161],{"class":1030},[1002,109338,109031],{"class":15711},[1002,109340,15703],{"class":1030},[1002,109342,109343,109345,109347],{"class":1004,"line":1360},[1002,109344,22437],{"class":1030},[1002,109346,108721],{"class":15711},[1002,109348,15703],{"class":1030},[953,109350,109352],{"id":109351},"nav","NAV",[925,109354,108725],{},[925,109356,109357],{},[928,109358,109359],{},"The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.",[925,109361,109362,109363],{},"The nav element is intended for ",[1107,109364,109365],{},"major navigation.",[925,109367,109199],{},[993,109369,109371],{"className":37880,"code":109370,"language":383,"meta":998,"style":998},"\u003Cdiv class=\"nav\">\n \">\n \u003C!-- ... -->\n\u003C\u002Fdiv>\n",[941,109372,109373,109388,109392,109396],{"__ignoreMap":998},[1002,109374,109375,109377,109379,109381,109383,109386],{"class":1004,"line":1005},[1002,109376,6539],{"class":1030},[1002,109378,19650],{"class":15711},[1002,109380,17187],{"class":1026},[1002,109382,2393],{"class":1030},[1002,109384,109385],{"class":1034},"\"nav\"",[1002,109387,15703],{"class":1030},[1002,109389,109390],{"class":1004,"line":1012},[1002,109391,109224],{"class":1030},[1002,109393,109394],{"class":1004,"line":1047},[1002,109395,108778],{"class":1008},[1002,109397,109398,109400,109402],{"class":1004,"line":1054},[1002,109399,22437],{"class":1030},[1002,109401,19650],{"class":15711},[1002,109403,15703],{"class":1030},[925,109405,109406],{},"This can be done in HTML5 using the nav tag:",[993,109408,109410],{"className":37880,"code":109409,"language":383,"meta":998,"style":998},"\u003Cnav>\n \u003C!-- ... -->\n\u003C\u002Fnav>\n",[941,109411,109412,109420,109424],{"__ignoreMap":998},[1002,109413,109414,109416,109418],{"class":1004,"line":1005},[1002,109415,6539],{"class":1030},[1002,109417,109351],{"class":15711},[1002,109419,15703],{"class":1030},[1002,109421,109422],{"class":1004,"line":1012},[1002,109423,108778],{"class":1008},[1002,109425,109426,109428,109430],{"class":1004,"line":1047},[1002,109427,22437],{"class":1030},[1002,109429,109351],{"class":15711},[1002,109431,15703],{"class":1030},[953,109433,109434],{"id":15712},"ARTICLE",[925,109436,108725],{},[925,109438,109439],{},[928,109440,109441],{},"The article element represents a complete, or self contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.",[925,109443,109444],{},"The article element is another type of section. It is used for self-contained related content.",[925,109446,109447],{},"Some uses for the article tag:",[1530,109449,109450,109453,109456,109459],{},[974,109451,109452],{},"A blog post",[974,109454,109455],{},"A news story",[974,109457,109458],{},"A comment on a post",[974,109460,109461],{},"A review",[925,109463,109464],{},"Example usage of the article tag:",[993,109466,109468],{"className":37880,"code":109467,"language":383,"meta":998,"style":998},"\u003Cdiv class=\"article\">\n \">\n \u003C!-- ... -->\n\u003C\u002Fdiv>\n",[941,109469,109470,109485,109489,109493],{"__ignoreMap":998},[1002,109471,109472,109474,109476,109478,109480,109483],{"class":1004,"line":1005},[1002,109473,6539],{"class":1030},[1002,109475,19650],{"class":15711},[1002,109477,17187],{"class":1026},[1002,109479,2393],{"class":1030},[1002,109481,109482],{"class":1034},"\"article\"",[1002,109484,15703],{"class":1030},[1002,109486,109487],{"class":1004,"line":1012},[1002,109488,109224],{"class":1030},[1002,109490,109491],{"class":1004,"line":1047},[1002,109492,108778],{"class":1008},[1002,109494,109495,109497,109499],{"class":1004,"line":1054},[1002,109496,22437],{"class":1030},[1002,109498,19650],{"class":15711},[1002,109500,15703],{"class":1030},[925,109502,109503],{},"This can be done in HTML5 using the article tag:",[993,109505,109507],{"className":37880,"code":109506,"language":383,"meta":998,"style":998},"\u003Carticle>\n \u003C!-- ... -->\n\u003C\u002Farticle>\n",[941,109508,109509,109517,109521],{"__ignoreMap":998},[1002,109510,109511,109513,109515],{"class":1004,"line":1005},[1002,109512,6539],{"class":1030},[1002,109514,15712],{"class":15711},[1002,109516,15703],{"class":1030},[1002,109518,109519],{"class":1004,"line":1012},[1002,109520,108778],{"class":1008},[1002,109522,109523,109525,109527],{"class":1004,"line":1047},[1002,109524,22437],{"class":1030},[1002,109526,15712],{"class":15711},[1002,109528,15703],{"class":1030},[953,109530,109531],{"id":20008},"MAIN",[925,109533,108725],{},[925,109535,109536],{},[928,109537,109538],{},"The main element represents the main content of the body of a document or application.",[925,109540,109541],{},"Main should not be allowed in following places:",[1530,109543,109544,109547],{},[974,109545,109546],{},"Do not include more than one main element in a document.",[974,109548,109549],{},"Do not include the main element inside of an article, aside, footer, header, or nav element",[925,109551,109552],{},"Example usage of the main tag:",[993,109554,109556],{"className":37880,"code":109555,"language":383,"meta":998,"style":998},"\u003Cdiv class=\"main\">\n \">\n \u003C!-- ... -->\n\u003C\u002Fdiv>\n",[941,109557,109558,109572,109576,109580],{"__ignoreMap":998},[1002,109559,109560,109562,109564,109566,109568,109570],{"class":1004,"line":1005},[1002,109561,6539],{"class":1030},[1002,109563,19650],{"class":15711},[1002,109565,17187],{"class":1026},[1002,109567,2393],{"class":1030},[1002,109569,29911],{"class":1034},[1002,109571,15703],{"class":1030},[1002,109573,109574],{"class":1004,"line":1012},[1002,109575,109224],{"class":1030},[1002,109577,109578],{"class":1004,"line":1047},[1002,109579,108778],{"class":1008},[1002,109581,109582,109584,109586],{"class":1004,"line":1054},[1002,109583,22437],{"class":1030},[1002,109585,19650],{"class":15711},[1002,109587,15703],{"class":1030},[925,109589,109590],{},"This can be done in HTML5 using the main tag:",[993,109592,109594],{"className":37880,"code":109593,"language":383,"meta":998,"style":998},"\u003Cmain>\n \u003C!-- ... -->\n\u003C\u002Fmain>\n",[941,109595,109596,109604,109608],{"__ignoreMap":998},[1002,109597,109598,109600,109602],{"class":1004,"line":1005},[1002,109599,6539],{"class":1030},[1002,109601,20008],{"class":15711},[1002,109603,15703],{"class":1030},[1002,109605,109606],{"class":1004,"line":1012},[1002,109607,108778],{"class":1008},[1002,109609,109610,109612,109614],{"class":1004,"line":1047},[1002,109611,22437],{"class":1030},[1002,109613,20008],{"class":15711},[1002,109615,15703],{"class":1030},[953,109617,109619],{"id":109618},"figure","FIGURE",[925,109621,108725],{},[925,109623,109624],{},[928,109625,109626],{},"\"The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.”",[925,109628,109629],{},"A common use of the figure tag is for an image within an article:",[993,109631,109633],{"className":37880,"code":109632,"language":383,"meta":998,"style":998},"\u003Cfigure>\n \u003Cimg src=\"image.jpg\" alt=\"My Picture\" \u002F>\n\u003C\u002Ffigure>\n",[941,109634,109635,109643,109665],{"__ignoreMap":998},[1002,109636,109637,109639,109641],{"class":1004,"line":1005},[1002,109638,6539],{"class":1030},[1002,109640,109618],{"class":15711},[1002,109642,15703],{"class":1030},[1002,109644,109645,109647,109649,109651,109653,109656,109658,109660,109663],{"class":1004,"line":1012},[1002,109646,22427],{"class":1030},[1002,109648,963],{"class":15711},[1002,109650,15242],{"class":1026},[1002,109652,2393],{"class":1030},[1002,109654,109655],{"class":1034},"\"image.jpg\"",[1002,109657,60884],{"class":1026},[1002,109659,2393],{"class":1030},[1002,109661,109662],{"class":1034},"\"My Picture\"",[1002,109664,15258],{"class":1030},[1002,109666,109667,109669,109671],{"class":1004,"line":1047},[1002,109668,22437],{"class":1030},[1002,109670,109618],{"class":15711},[1002,109672,15703],{"class":1030},[925,109674,109675],{},"Example usage of the figcaption tag:",[993,109677,109679],{"className":37880,"code":109678,"language":383,"meta":998,"style":998},"\u003Cfigure>\n \u003Cimg src=\"image.jpg\" alt=\"My Picture\" \u002F>\n \u003Cfigcaption>This is a caption for the picture.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n",[941,109680,109681,109689,109709,109723],{"__ignoreMap":998},[1002,109682,109683,109685,109687],{"class":1004,"line":1005},[1002,109684,6539],{"class":1030},[1002,109686,109618],{"class":15711},[1002,109688,15703],{"class":1030},[1002,109690,109691,109693,109695,109697,109699,109701,109703,109705,109707],{"class":1004,"line":1012},[1002,109692,22427],{"class":1030},[1002,109694,963],{"class":15711},[1002,109696,15242],{"class":1026},[1002,109698,2393],{"class":1030},[1002,109700,109655],{"class":1034},[1002,109702,60884],{"class":1026},[1002,109704,2393],{"class":1030},[1002,109706,109662],{"class":1034},[1002,109708,15258],{"class":1030},[1002,109710,109711,109713,109716,109719,109721],{"class":1004,"line":1047},[1002,109712,22427],{"class":1030},[1002,109714,109715],{"class":15711},"figcaption",[1002,109717,109718],{"class":1030},">This is a caption for the picture.\u003C\u002F",[1002,109720,109715],{"class":15711},[1002,109722,15703],{"class":1030},[1002,109724,109725,109727,109729],{"class":1004,"line":1054},[1002,109726,22437],{"class":1030},[1002,109728,109618],{"class":15711},[1002,109730,15703],{"class":1030},[953,109732,109733],{"id":44960},"TIME",[925,109735,108725],{},[925,109737,109738],{},[928,109739,109740],{},"The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.",[925,109742,109444],{},[925,109744,109447],{},[1530,109746,109747,109749,109751,109753],{},[974,109748,109452],{},[974,109750,109455],{},[974,109752,109458],{},[974,109754,109461],{},[925,109756,109757],{},"Example usage of the time tag: (US time)",[993,109759,109761],{"className":37880,"code":109760,"language":383,"meta":998,"style":998},"\u003Ctime>2015-01-31\u003C\u002Ftime>\n",[941,109762,109763],{"__ignoreMap":998},[1002,109764,109765,109767,109769,109772,109774],{"class":1004,"line":1005},[1002,109766,6539],{"class":1030},[1002,109768,44960],{"class":15711},[1002,109770,109771],{"class":1030},">2015-01-31\u003C\u002F",[1002,109773,44960],{"class":15711},[1002,109775,15703],{"class":1030},[925,109777,109778],{},"We can format the time to “mm\u002Fdd\u002Fyyyy”:",[993,109780,109782],{"className":37880,"code":109781,"language":383,"meta":998,"style":998},"\u003Ctime>09\u002F16\u002F2013\u003C\u002Ftime>\n",[941,109783,109784],{"__ignoreMap":998},[1002,109785,109786,109788,109790,109793,109795],{"class":1004,"line":1005},[1002,109787,6539],{"class":1030},[1002,109789,44960],{"class":15711},[1002,109791,109792],{"class":1030},">09\u002F16\u002F2013\u003C\u002F",[1002,109794,44960],{"class":15711},[1002,109796,15703],{"class":1030},[925,109798,109799],{},"We use the DateTime attribute to get our desired format:",[993,109801,109803],{"className":37880,"code":109802,"language":383,"meta":998,"style":998},"\u003Ctime datetime=\"2015-01-31\">01\u002F31\u002F2015\u003C\u002Ftime>\n",[941,109804,109805],{"__ignoreMap":998},[1002,109806,109807,109809,109811,109814,109816,109819,109822,109824],{"class":1004,"line":1005},[1002,109808,6539],{"class":1030},[1002,109810,44960],{"class":15711},[1002,109812,109813],{"class":1026}," datetime",[1002,109815,2393],{"class":1030},[1002,109817,109818],{"class":1034},"\"2015-01-31\"",[1002,109820,109821],{"class":1030},">01\u002F31\u002F2015\u003C\u002F",[1002,109823,44960],{"class":15711},[1002,109825,15703],{"class":1030},[1579,109827,109828],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":109830},[109831,109832,109833,109834,109835,109836,109837,109838,109839,109840,109841],{"id":108721,"depth":1012,"text":108722},{"id":108736,"depth":1012,"text":108737},{"id":108821,"depth":1012,"text":108822},{"id":15722,"depth":1012,"text":108893},{"id":109031,"depth":1012,"text":109032},{"id":109176,"depth":1012,"text":109177},{"id":109351,"depth":1012,"text":109352},{"id":15712,"depth":1012,"text":109434},{"id":20008,"depth":1012,"text":109531},{"id":109618,"depth":1012,"text":109619},{"id":44960,"depth":1012,"text":109733},"2015-01-31","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhtml5-elements.jpg",{},{"title":390,"description":392},"blog\u002Fhtml5-elements",[16,383],"itH2Xg7tdK66Bgqb-vsQ4nn5PyHBHPsucoiNB8glCIo",{"id":109850,"title":102,"author":920,"body":109851,"date":110224,"description":104,"extension":1591,"image":110225,"meta":110226,"navigation":1050,"path":103,"seo":110227,"stem":110228,"tags":110229,"__hash__":110230},"blog\u002Fblog\u002Fcoffeescript-jquery.md",{"type":922,"value":109852,"toc":110222},[109853,109856,109861,109963,109973,109978,110058,110061,110065,110159,110163,110219],[925,109854,109855],{},"Take the following example for an instance:",[925,109857,109858],{},[1107,109859,109860],{},"JavaScript",[993,109862,109864],{"className":995,"code":109863,"language":997,"meta":998,"style":998},"jQuery(function($) {\n function changeTab(e) {\n e.preventDefault();\n $(\"#tabs li a.active\").removeClass(\"active\");\n $(this).addClass(\"active\");\n $(\"#tabs ul li a\").click(changeTab);\n});\n",[941,109865,109866,109880,109893,109902,109924,109943,109959],{"__ignoreMap":998},[1002,109867,109868,109870,109872,109874,109876,109878],{"class":1004,"line":1005},[1002,109869,105303],{"class":1026},[1002,109871,1031],{"class":1030},[1002,109873,6965],{"class":1015},[1002,109875,1031],{"class":1030},[1002,109877,15864],{"class":2378},[1002,109879,2382],{"class":1030},[1002,109881,109882,109884,109887,109889,109891],{"class":1004,"line":1012},[1002,109883,53413],{"class":1015},[1002,109885,109886],{"class":1026}," changeTab",[1002,109888,1031],{"class":1030},[1002,109890,27262],{"class":2378},[1002,109892,2382],{"class":1030},[1002,109894,109895,109898,109900],{"class":1004,"line":1047},[1002,109896,109897],{"class":1030}," e.",[1002,109899,29143],{"class":1026},[1002,109901,1428],{"class":1030},[1002,109903,109904,109907,109909,109912,109914,109917,109919,109922],{"class":1004,"line":1054},[1002,109905,109906],{"class":1026}," $",[1002,109908,1031],{"class":1030},[1002,109910,109911],{"class":1034},"\"#tabs li a.active\"",[1002,109913,1539],{"class":1030},[1002,109915,109916],{"class":1026},"removeClass",[1002,109918,1031],{"class":1030},[1002,109920,109921],{"class":1034},"\"active\"",[1002,109923,1085],{"class":1030},[1002,109925,109926,109928,109930,109932,109934,109937,109939,109941],{"class":1004,"line":1060},[1002,109927,109906],{"class":1026},[1002,109929,1031],{"class":1030},[1002,109931,3455],{"class":1019},[1002,109933,1539],{"class":1030},[1002,109935,109936],{"class":1026},"addClass",[1002,109938,1031],{"class":1030},[1002,109940,109921],{"class":1034},[1002,109942,1085],{"class":1030},[1002,109944,109945,109947,109949,109952,109954,109956],{"class":1004,"line":1272},[1002,109946,109906],{"class":1026},[1002,109948,1031],{"class":1030},[1002,109950,109951],{"class":1034},"\"#tabs ul li a\"",[1002,109953,1539],{"class":1030},[1002,109955,11181],{"class":1026},[1002,109957,109958],{"class":1030},"(changeTab);\n",[1002,109960,109961],{"class":1004,"line":1348},[1002,109962,2804],{"class":1030},[925,109964,109965,109966,97499,109969,109972],{},"Here, the ",[1107,109967,109968],{},"function changeTab(e)",[1107,109970,109971],{},"changeTab = (e) ->",". And you can remove all semicolons and curly brackets.\nYou can also optionally remove parenthesis as well.",[925,109974,109975],{},[1107,109976,109977],{},"CoffeeScript",[993,109979,109981],{"className":995,"code":109980,"language":997,"meta":998,"style":998},"$ ->\n changeTab = (e) ->\n e.preventDefault()\n $(\"#tabs li a.active\").removeClass \"active\"\n $(this).addClass \"active\" \u002F\u002F or, $(@).addClass \"active\"\n\n $(\"#tabs ul li a\").click changeTab\n",[941,109982,109983,109991,110003,110012,110027,110043,110047],{"__ignoreMap":998},[1002,109984,109985,109988],{"class":1004,"line":1005},[1002,109986,109987],{"class":1030},"$ ",[1002,109989,109990],{"class":1015},"->\n",[1002,109992,109993,109996,109998,110001],{"class":1004,"line":1012},[1002,109994,109995],{"class":1030}," changeTab ",[1002,109997,2393],{"class":1015},[1002,109999,110000],{"class":1030}," (e) ",[1002,110002,109990],{"class":1015},[1002,110004,110005,110008,110010],{"class":1004,"line":1047},[1002,110006,110007],{"class":1030}," e.",[1002,110009,29143],{"class":1026},[1002,110011,17202],{"class":1030},[1002,110013,110014,110017,110019,110021,110024],{"class":1004,"line":1054},[1002,110015,110016],{"class":1026}," $",[1002,110018,1031],{"class":1030},[1002,110020,109911],{"class":1034},[1002,110022,110023],{"class":1030},").removeClass ",[1002,110025,110026],{"class":1034},"\"active\"\n",[1002,110028,110029,110031,110033,110035,110038,110040],{"class":1004,"line":1060},[1002,110030,110016],{"class":1026},[1002,110032,1031],{"class":1030},[1002,110034,3455],{"class":1019},[1002,110036,110037],{"class":1030},").addClass ",[1002,110039,109921],{"class":1034},[1002,110041,110042],{"class":1008}," \u002F\u002F or, $(@).addClass \"active\"\n",[1002,110044,110045],{"class":1004,"line":1272},[1002,110046,1051],{"emptyLinePlaceholder":1050},[1002,110048,110049,110051,110053,110055],{"class":1004,"line":1348},[1002,110050,109906],{"class":1026},[1002,110052,1031],{"class":1030},[1002,110054,109951],{"class":1034},[1002,110056,110057],{"class":1030},").click changeTab\n",[925,110059,110060],{},"Now let's try to convert following jQuery code into CoffeeScript:",[925,110062,110063],{},[1107,110064,109860],{},[993,110066,110068],{"className":995,"code":110067,"language":997,"meta":998,"style":998},"function showNumberOfFlights(e) {\n var num_flights = $(this).data('flights');\n $(this).append('\u003Cspan>' + num_flights + '`');\n $('#tabs span.tooltip').show();\n}\n",[941,110069,110070,110083,110110,110139,110155],{"__ignoreMap":998},[1002,110071,110072,110074,110077,110079,110081],{"class":1004,"line":1005},[1002,110073,6965],{"class":1015},[1002,110075,110076],{"class":1026}," showNumberOfFlights",[1002,110078,1031],{"class":1030},[1002,110080,27262],{"class":2378},[1002,110082,2382],{"class":1030},[1002,110084,110085,110087,110090,110092,110095,110097,110099,110101,110103,110105,110108],{"class":1004,"line":1012},[1002,110086,28293],{"class":1015},[1002,110088,110089],{"class":1030}," num_flights ",[1002,110091,2393],{"class":1015},[1002,110093,110094],{"class":1026}," $",[1002,110096,1031],{"class":1030},[1002,110098,3455],{"class":1019},[1002,110100,1539],{"class":1030},[1002,110102,16648],{"class":1026},[1002,110104,1031],{"class":1030},[1002,110106,110107],{"class":1034},"'flights'",[1002,110109,1085],{"class":1030},[1002,110111,110112,110114,110116,110118,110120,110123,110125,110128,110130,110132,110134,110137],{"class":1004,"line":1047},[1002,110113,88304],{"class":1026},[1002,110115,1031],{"class":1030},[1002,110117,3455],{"class":1019},[1002,110119,1539],{"class":1030},[1002,110121,110122],{"class":1026},"append",[1002,110124,1031],{"class":1030},[1002,110126,110127],{"class":1034},"'\u003Cspan>'",[1002,110129,6583],{"class":1015},[1002,110131,110089],{"class":1030},[1002,110133,5064],{"class":1015},[1002,110135,110136],{"class":1034}," '`'",[1002,110138,1085],{"class":1030},[1002,110140,110141,110143,110145,110148,110150,110153],{"class":1004,"line":1054},[1002,110142,88304],{"class":1026},[1002,110144,1031],{"class":1030},[1002,110146,110147],{"class":1034},"'#tabs span.tooltip'",[1002,110149,1539],{"class":1030},[1002,110151,110152],{"class":1026},"show",[1002,110154,1428],{"class":1030},[1002,110156,110157],{"class":1004,"line":1060},[1002,110158,1170],{"class":1030},[925,110160,110161],{},[1107,110162,109977],{},[993,110164,110166],{"className":995,"code":110165,"language":997,"meta":998,"style":998},"showNumberOfFlights = (e) ->\n num_flights = $(@).data 'flights'\n $(@).append \"\u003Cspan>#{flights}`\"\n $(\"#tabs span.tooltip\").show()\n",[941,110167,110168,110179,110194,110204],{"__ignoreMap":998},[1002,110169,110170,110173,110175,110177],{"class":1004,"line":1005},[1002,110171,110172],{"class":1030},"showNumberOfFlights ",[1002,110174,2393],{"class":1015},[1002,110176,110000],{"class":1030},[1002,110178,109990],{"class":1015},[1002,110180,110181,110184,110186,110188,110191],{"class":1004,"line":1012},[1002,110182,110183],{"class":1030}," num_flights ",[1002,110185,2393],{"class":1015},[1002,110187,110094],{"class":1026},[1002,110189,110190],{"class":1030},"(@).data ",[1002,110192,110193],{"class":1034},"'flights'\n",[1002,110195,110196,110198,110201],{"class":1004,"line":1047},[1002,110197,109906],{"class":1026},[1002,110199,110200],{"class":1030},"(@).append ",[1002,110202,110203],{"class":1034},"\"\u003Cspan>#{flights}`\"\n",[1002,110205,110206,110208,110210,110213,110215,110217],{"class":1004,"line":1054},[1002,110207,109906],{"class":1026},[1002,110209,1031],{"class":1030},[1002,110211,110212],{"class":1034},"\"#tabs span.tooltip\"",[1002,110214,1539],{"class":1030},[1002,110216,110152],{"class":1026},[1002,110218,17202],{"class":1030},[1579,110220,110221],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":110223},[],"2015-01-29","\u002Fimages\u002Fblog\u002Ffeatures\u002Fcoffeescript-jquery.jpg",{},{"title":102,"description":104},"blog\u002Fcoffeescript-jquery",[16,17,106,100],"OKrDK4l0Q40s_1qm1ZsZJhDhj8flBOX23XgXFpP5F9g",{"id":110232,"title":766,"author":920,"body":110233,"date":111303,"description":768,"extension":1591,"image":111304,"meta":111305,"navigation":1050,"path":767,"seo":111306,"stem":111307,"tags":111308,"__hash__":111309},"blog\u002Fblog\u002Fsass-variables.md",{"type":922,"value":110234,"toc":111290},[110235,110238,110243,110309,110314,110368,110372,110375,110379,110435,110439,110467,110470,110474,110518,110522,110550,110553,110558,110629,110633,110653,110656,110660,110733,110737,110741,110761,110764,110767,110796,110800,110804,110841,110845,110848,110875,110879,110894,110897,110911,110913,110917,110992,110996,111011,111014,111018,111021,111025,111089,111093,111138,111141,111144,111148,111222,111226,111287],[925,110236,110237],{},"In Sass, Variable names begin with $, like $base.",[925,110239,110240],{},[1107,110241,110242],{},"style.scss",[993,110244,110246],{"className":35707,"code":110245,"language":29,"meta":998,"style":998},"$base: #777777;\n\n.sidebar {\n border: 1px solid $base;\n p {\n color: $base;\n }\n}\n",[941,110247,110248,110261,110265,110272,110287,110294,110301,110305],{"__ignoreMap":998},[1002,110249,110250,110252,110254,110256,110259],{"class":1004,"line":1005},[1002,110251,15864],{"class":1030},[1002,110253,70894],{"class":15711},[1002,110255,1137],{"class":1030},[1002,110257,110258],{"class":18541},"#777777",[1002,110260,1407],{"class":1030},[1002,110262,110263],{"class":1004,"line":1012},[1002,110264,1051],{"emptyLinePlaceholder":1050},[1002,110266,110267,110270],{"class":1004,"line":1047},[1002,110268,110269],{"class":1026},".sidebar",[1002,110271,1457],{"class":1030},[1002,110273,110274,110276,110278,110280,110282,110284],{"class":1004,"line":1054},[1002,110275,71181],{"class":1019},[1002,110277,1137],{"class":1030},[1002,110279,6211],{"class":1019},[1002,110281,43835],{"class":1015},[1002,110283,43838],{"class":1019},[1002,110285,110286],{"class":1030}," $base;\n",[1002,110288,110289,110292],{"class":1004,"line":1060},[1002,110290,110291],{"class":1019}," p",[1002,110293,1457],{"class":1030},[1002,110295,110296,110298],{"class":1004,"line":1272},[1002,110297,36028],{"class":1019},[1002,110299,110300],{"class":1030},": $base;\n",[1002,110302,110303],{"class":1004,"line":1348},[1002,110304,1269],{"class":1030},[1002,110306,110307],{"class":1004,"line":1354},[1002,110308,1170],{"class":1030},[925,110310,110311],{},[1107,110312,110313],{},"style.css",[993,110315,110317],{"className":35707,"code":110316,"language":29,"meta":998,"style":998},".sidebar {\n border: 1px solid #777777;\n}\n.sidebar p {\n color: #777777;\n}\n",[941,110318,110319,110325,110342,110346,110354,110364],{"__ignoreMap":998},[1002,110320,110321,110323],{"class":1004,"line":1005},[1002,110322,110269],{"class":1026},[1002,110324,1457],{"class":1030},[1002,110326,110327,110329,110331,110333,110335,110337,110340],{"class":1004,"line":1012},[1002,110328,71181],{"class":1019},[1002,110330,1137],{"class":1030},[1002,110332,6211],{"class":1019},[1002,110334,43835],{"class":1015},[1002,110336,43838],{"class":1019},[1002,110338,110339],{"class":1019}," #777777",[1002,110341,1407],{"class":1030},[1002,110343,110344],{"class":1004,"line":1047},[1002,110345,1170],{"class":1030},[1002,110347,110348,110350,110352],{"class":1004,"line":1054},[1002,110349,110269],{"class":1026},[1002,110351,16244],{"class":15711},[1002,110353,1457],{"class":1030},[1002,110355,110356,110358,110360,110362],{"class":1004,"line":1060},[1002,110357,35952],{"class":1019},[1002,110359,1137],{"class":1030},[1002,110361,110258],{"class":1019},[1002,110363,1407],{"class":1030},[1002,110365,110366],{"class":1004,"line":1272},[1002,110367,1170],{"class":1030},[953,110369,110371],{"id":110370},"the-default-flag","The Default Flag",[925,110373,110374],{},"Variable definitions can optionally take the !default flag:",[925,110376,110377],{},[1107,110378,110242],{},[993,110380,110382],{"className":35707,"code":110381,"language":29,"meta":998,"style":998},"$title: 'My Blog';\n$title: 'About Me';\n\n\u002F\u002F overrides the first value\n\nh2:before {\n content: $title;\n}\n",[941,110383,110384,110393,110402,110406,110411,110415,110424,110431],{"__ignoreMap":998},[1002,110385,110386,110388,110390],{"class":1004,"line":1005},[1002,110387,15864],{"class":1030},[1002,110389,15029],{"class":15711},[1002,110391,110392],{"class":1030},": 'My Blog';\n",[1002,110394,110395,110397,110399],{"class":1004,"line":1012},[1002,110396,15864],{"class":1030},[1002,110398,15029],{"class":15711},[1002,110400,110401],{"class":1030},": 'About Me';\n",[1002,110403,110404],{"class":1004,"line":1047},[1002,110405,1051],{"emptyLinePlaceholder":1050},[1002,110407,110408],{"class":1004,"line":1054},[1002,110409,110410],{"class":1030},"\u002F\u002F overrides the first value\n",[1002,110412,110413],{"class":1004,"line":1060},[1002,110414,1051],{"emptyLinePlaceholder":1050},[1002,110416,110417,110419,110422],{"class":1004,"line":1272},[1002,110418,953],{"class":15711},[1002,110420,110421],{"class":1026},":before",[1002,110423,1457],{"class":1030},[1002,110425,110426,110428],{"class":1004,"line":1348},[1002,110427,108591],{"class":1019},[1002,110429,110430],{"class":1030},": $title;\n",[1002,110432,110433],{"class":1004,"line":1354},[1002,110434,1170],{"class":1030},[925,110436,110437],{},[1107,110438,110313],{},[993,110440,110442],{"className":35707,"code":110441,"language":29,"meta":998,"style":998},"h2:before {\n content: 'About Me';\n}\n",[941,110443,110444,110452,110463],{"__ignoreMap":998},[1002,110445,110446,110448,110450],{"class":1004,"line":1005},[1002,110447,953],{"class":15711},[1002,110449,110421],{"class":1026},[1002,110451,1457],{"class":1030},[1002,110453,110454,110456,110458,110461],{"class":1004,"line":1012},[1002,110455,108591],{"class":1019},[1002,110457,1137],{"class":1030},[1002,110459,110460],{"class":1034},"'About Me'",[1002,110462,1407],{"class":1030},[1002,110464,110465],{"class":1004,"line":1047},[1002,110466,1170],{"class":1030},[925,110468,110469],{},"Let's resolve the above issue with the !default flag:",[925,110471,110472],{},[1107,110473,110242],{},[993,110475,110477],{"className":35707,"code":110476,"language":29,"meta":998,"style":998},"$title: 'My Blog';\n$title: 'About Me' !default;\n\nh2:before {\n content: $title;\n}\n",[941,110478,110479,110487,110496,110500,110508,110514],{"__ignoreMap":998},[1002,110480,110481,110483,110485],{"class":1004,"line":1005},[1002,110482,15864],{"class":1030},[1002,110484,15029],{"class":15711},[1002,110486,110392],{"class":1030},[1002,110488,110489,110491,110493],{"class":1004,"line":1012},[1002,110490,15864],{"class":1030},[1002,110492,15029],{"class":15711},[1002,110494,110495],{"class":1030},": 'About Me' !default;\n",[1002,110497,110498],{"class":1004,"line":1047},[1002,110499,1051],{"emptyLinePlaceholder":1050},[1002,110501,110502,110504,110506],{"class":1004,"line":1054},[1002,110503,953],{"class":15711},[1002,110505,110421],{"class":1026},[1002,110507,1457],{"class":1030},[1002,110509,110510,110512],{"class":1004,"line":1060},[1002,110511,108591],{"class":1019},[1002,110513,110430],{"class":1030},[1002,110515,110516],{"class":1004,"line":1272},[1002,110517,1170],{"class":1030},[925,110519,110520],{},[1107,110521,110313],{},[993,110523,110525],{"className":35707,"code":110524,"language":29,"meta":998,"style":998},"h2:before {\n content: 'My Blog';\n}\n",[941,110526,110527,110535,110546],{"__ignoreMap":998},[1002,110528,110529,110531,110533],{"class":1004,"line":1005},[1002,110530,953],{"class":15711},[1002,110532,110421],{"class":1026},[1002,110534,1457],{"class":1030},[1002,110536,110537,110539,110541,110544],{"class":1004,"line":1012},[1002,110538,108591],{"class":1019},[1002,110540,1137],{"class":1030},[1002,110542,110543],{"class":1034},"'My Blog'",[1002,110545,1407],{"class":1030},[1002,110547,110548],{"class":1004,"line":1047},[1002,110549,1170],{"class":1030},[925,110551,110552],{},"Here at line 2, since a value exists, it isn't overwritten.",[925,110554,110555],{},[1107,110556,110557],{},"_buttons.scss",[993,110559,110561],{"className":35707,"code":110560,"language":29,"meta":998,"style":998},"$rounded: 3px !default;\n\n.btn-a {\n border-radius: $rounded;\n color: #777;\n}\n.btn-b {\n border-radius: $rounded;\n color: #222;\n}\n",[941,110562,110563,110568,110572,110579,110586,110597,110601,110608,110614,110625],{"__ignoreMap":998},[1002,110564,110565],{"class":1004,"line":1005},[1002,110566,110567],{"class":1030},"$rounded: 3px !default;\n",[1002,110569,110570],{"class":1004,"line":1012},[1002,110571,1051],{"emptyLinePlaceholder":1050},[1002,110573,110574,110577],{"class":1004,"line":1047},[1002,110575,110576],{"class":1026},".btn-a",[1002,110578,1457],{"class":1030},[1002,110580,110581,110583],{"class":1004,"line":1054},[1002,110582,72528],{"class":1019},[1002,110584,110585],{"class":1030},": $rounded;\n",[1002,110587,110588,110590,110592,110595],{"class":1004,"line":1060},[1002,110589,35952],{"class":1019},[1002,110591,1137],{"class":1030},[1002,110593,110594],{"class":1019},"#777",[1002,110596,1407],{"class":1030},[1002,110598,110599],{"class":1004,"line":1272},[1002,110600,1170],{"class":1030},[1002,110602,110603,110606],{"class":1004,"line":1348},[1002,110604,110605],{"class":1026},".btn-b",[1002,110607,1457],{"class":1030},[1002,110609,110610,110612],{"class":1004,"line":1354},[1002,110611,72528],{"class":1019},[1002,110613,110585],{"class":1030},[1002,110615,110616,110618,110620,110623],{"class":1004,"line":1360},[1002,110617,35952],{"class":1019},[1002,110619,1137],{"class":1030},[1002,110621,110622],{"class":1019},"#222",[1002,110624,1407],{"class":1030},[1002,110626,110627],{"class":1004,"line":1366},[1002,110628,1170],{"class":1030},[925,110630,110631],{},[1107,110632,110242],{},[993,110634,110636],{"className":35707,"code":110635,"language":29,"meta":998,"style":998},"$rounded: 5px;\n@import 'buttons';\n",[941,110637,110638,110643],{"__ignoreMap":998},[1002,110639,110640],{"class":1004,"line":1005},[1002,110641,110642],{"class":1030},"$rounded: 5px;\n",[1002,110644,110645,110648,110651],{"class":1004,"line":1012},[1002,110646,110647],{"class":1015},"@import",[1002,110649,110650],{"class":1034}," 'buttons'",[1002,110652,1407],{"class":1030},[925,110654,110655],{},"Here, if a value hasn't defined elsewhere, it is used by default.",[925,110657,110658],{},[1107,110659,110313],{},[993,110661,110663],{"className":35707,"code":110662,"language":29,"meta":998,"style":998},".btn-a {\n border-radius: 5px;\n color: #777;\n}\n\n.btn-b {\n border-radius: 5px;\n color: #222;\n}\n",[941,110664,110665,110671,110683,110693,110697,110701,110707,110719,110729],{"__ignoreMap":998},[1002,110666,110667,110669],{"class":1004,"line":1005},[1002,110668,110576],{"class":1026},[1002,110670,1457],{"class":1030},[1002,110672,110673,110675,110677,110679,110681],{"class":1004,"line":1012},[1002,110674,72528],{"class":1019},[1002,110676,1137],{"class":1030},[1002,110678,2859],{"class":1019},[1002,110680,43835],{"class":1015},[1002,110682,1407],{"class":1030},[1002,110684,110685,110687,110689,110691],{"class":1004,"line":1047},[1002,110686,35952],{"class":1019},[1002,110688,1137],{"class":1030},[1002,110690,110594],{"class":1019},[1002,110692,1407],{"class":1030},[1002,110694,110695],{"class":1004,"line":1054},[1002,110696,1170],{"class":1030},[1002,110698,110699],{"class":1004,"line":1060},[1002,110700,1051],{"emptyLinePlaceholder":1050},[1002,110702,110703,110705],{"class":1004,"line":1272},[1002,110704,110605],{"class":1026},[1002,110706,1457],{"class":1030},[1002,110708,110709,110711,110713,110715,110717],{"class":1004,"line":1348},[1002,110710,72528],{"class":1019},[1002,110712,1137],{"class":1030},[1002,110714,2859],{"class":1019},[1002,110716,43835],{"class":1015},[1002,110718,1407],{"class":1030},[1002,110720,110721,110723,110725,110727],{"class":1004,"line":1354},[1002,110722,35952],{"class":1019},[1002,110724,1137],{"class":1030},[1002,110726,110622],{"class":1019},[1002,110728,1407],{"class":1030},[1002,110730,110731],{"class":1004,"line":1360},[1002,110732,1170],{"class":1030},[953,110734,110736],{"id":110735},"variable-declaration-use","Variable Declaration + Use",[953,110738,110740],{"id":110739},"booleans","Booleans",[993,110742,110744],{"className":35707,"code":110743,"language":29,"meta":998,"style":998},"$rounded: false;\n$shadow: true;\n",[941,110745,110746,110751],{"__ignoreMap":998},[1002,110747,110748],{"class":1004,"line":1005},[1002,110749,110750],{"class":1030},"$rounded: false;\n",[1002,110752,110753,110755,110758],{"class":1004,"line":1012},[1002,110754,15864],{"class":1030},[1002,110756,110757],{"class":15711},"shadow",[1002,110759,110760],{"class":1030},": true;\n",[953,110762,110763],{"id":86057},"Numbers",[925,110765,110766],{},"Can be set with or without units:",[993,110768,110770],{"className":35707,"code":110769,"language":29,"meta":998,"style":998},"$rounded: 4px;\n$line-height: 1.5;\n$font-size: 3rem;\n",[941,110771,110772,110777,110787],{"__ignoreMap":998},[1002,110773,110774],{"class":1004,"line":1005},[1002,110775,110776],{"class":1030},"$rounded: 4px;\n",[1002,110778,110779,110781,110784],{"class":1004,"line":1012},[1002,110780,15864],{"class":1030},[1002,110782,110783],{"class":15711},"line-height",[1002,110785,110786],{"class":1030},": 1.5;\n",[1002,110788,110789,110791,110793],{"class":1004,"line":1047},[1002,110790,15864],{"class":1030},[1002,110792,16098],{"class":15711},[1002,110794,110795],{"class":1030},": 3rem;\n",[953,110797,110799],{"id":110798},"types","Types",[953,110801,110803],{"id":110802},"colors","Colors",[993,110805,110807],{"className":35707,"code":110806,"language":29,"meta":998,"style":998},"$base: purple;\n$border: rgba(0, 255, 0, 0.5);\n$shadow: #333;\n",[941,110808,110809,110818,110828],{"__ignoreMap":998},[1002,110810,110811,110813,110815],{"class":1004,"line":1005},[1002,110812,15864],{"class":1030},[1002,110814,70894],{"class":15711},[1002,110816,110817],{"class":1030},": purple;\n",[1002,110819,110820,110823,110826],{"class":1004,"line":1012},[1002,110821,110822],{"class":1030},"$border: rgba(0, 255, 0, 0",[1002,110824,110825],{"class":1026},".5",[1002,110827,1085],{"class":1030},[1002,110829,110830,110832,110834,110836,110839],{"class":1004,"line":1047},[1002,110831,15864],{"class":1030},[1002,110833,110757],{"class":15711},[1002,110835,1137],{"class":1030},[1002,110837,110838],{"class":18541},"#333",[1002,110840,1407],{"class":1030},[953,110842,110844],{"id":110843},"strings","Strings",[925,110846,110847],{},"Can be set with or without quotes:",[993,110849,110851],{"className":35707,"code":110850,"language":29,"meta":998,"style":998},"$header: 'Helvetica Neue';\n$callout: Arial;\n$message: 'Loading...';\n",[941,110852,110853,110862,110867],{"__ignoreMap":998},[1002,110854,110855,110857,110859],{"class":1004,"line":1005},[1002,110856,15864],{"class":1030},[1002,110858,15722],{"class":15711},[1002,110860,110861],{"class":1030},": 'Helvetica Neue';\n",[1002,110863,110864],{"class":1004,"line":1012},[1002,110865,110866],{"class":1030},"$callout: Arial;\n",[1002,110868,110869,110872],{"class":1004,"line":1047},[1002,110870,110871],{"class":1030},"$message: 'Loading..",[1002,110873,110874],{"class":18541},".';\n",[953,110876,110878],{"id":110877},"lists","Lists",[993,110880,110882],{"className":35707,"code":110881,"language":29,"meta":998,"style":998},"$authors: nick, dan, aimee, drew;\n$margin: 40px 0 20px 100px;\n",[941,110883,110884,110889],{"__ignoreMap":998},[1002,110885,110886],{"class":1004,"line":1005},[1002,110887,110888],{"class":1030},"$authors: nick, dan, aimee, drew;\n",[1002,110890,110891],{"class":1004,"line":1012},[1002,110892,110893],{"class":1030},"$margin: 40px 0 20px 100px;\n",[953,110895,110896],{"id":26077},"Null",[993,110898,110900],{"className":35707,"code":110899,"language":29,"meta":998,"style":998},"$shadow: null;\n",[941,110901,110902],{"__ignoreMap":998},[1002,110903,110904,110906,110908],{"class":1004,"line":1005},[1002,110905,15864],{"class":1030},[1002,110907,110757],{"class":15711},[1002,110909,110910],{"class":1030},": null;\n",[953,110912,91573],{"id":91927},[925,110914,110915],{},[1107,110916,110242],{},[993,110918,110920],{"className":35707,"code":110919,"language":29,"meta":998,"style":998},"p {\n $border: #ccc;\n border-top: 1px solid $border;\n}\nh1 {\n border-top: 1px solid $border;\n}\n",[941,110921,110922,110928,110942,110960,110964,110970,110988],{"__ignoreMap":998},[1002,110923,110924,110926],{"class":1004,"line":1005},[1002,110925,925],{"class":15711},[1002,110927,1457],{"class":1030},[1002,110929,110930,110932,110935,110937,110940],{"class":1004,"line":1012},[1002,110931,88304],{"class":1030},[1002,110933,110934],{"class":1019},"border",[1002,110936,1137],{"class":1030},[1002,110938,110939],{"class":1019},"#ccc",[1002,110941,1407],{"class":1030},[1002,110943,110944,110946,110948,110950,110952,110954,110956,110958],{"class":1004,"line":1047},[1002,110945,43828],{"class":1019},[1002,110947,1137],{"class":1030},[1002,110949,6211],{"class":1019},[1002,110951,43835],{"class":1015},[1002,110953,43838],{"class":1019},[1002,110955,110094],{"class":1030},[1002,110957,110934],{"class":1019},[1002,110959,1407],{"class":1030},[1002,110961,110962],{"class":1004,"line":1054},[1002,110963,1170],{"class":1030},[1002,110965,110966,110968],{"class":1004,"line":1060},[1002,110967,15201],{"class":15711},[1002,110969,1457],{"class":1030},[1002,110971,110972,110974,110976,110978,110980,110982,110984,110986],{"class":1004,"line":1272},[1002,110973,43828],{"class":1019},[1002,110975,1137],{"class":1030},[1002,110977,6211],{"class":1019},[1002,110979,43835],{"class":1015},[1002,110981,43838],{"class":1019},[1002,110983,110094],{"class":1030},[1002,110985,110934],{"class":1019},[1002,110987,1407],{"class":1030},[1002,110989,110990],{"class":1004,"line":1348},[1002,110991,1170],{"class":1030},[925,110993,110994],{},[1107,110995,110313],{},[993,110997,110999],{"className":35707,"code":110998,"language":29,"meta":998,"style":998},"Syntax error: Undefined\nvariable: \"$border\"\n",[941,111000,111001,111006],{"__ignoreMap":998},[1002,111002,111003],{"class":1004,"line":1005},[1002,111004,111005],{"class":1030},"Syntax error: Undefined\n",[1002,111007,111008],{"class":1004,"line":1012},[1002,111009,111010],{"class":1030},"variable: \"$border\"\n",[925,111012,111013],{},"Here border isn't available outside of its own block.",[953,111015,111017],{"id":111016},"reassignment-in-a-declaration","Reassignment in a Declaration",[925,111019,111020],{},"Variables set inside a declaration (within { }) aren't usable outside that block.\nSetting new values to variables set outside a declaration changes future instances.",[925,111022,111023],{},[1107,111024,110242],{},[993,111026,111028],{"className":35707,"code":111027,"language":29,"meta":998,"style":998},"$color-base: #777777;\n.sidebar {\n $color-base: #222222;\n background: $color-base;\n}\np {\n color: $color-base;\n}\n",[941,111029,111030,111043,111049,111062,111069,111073,111079,111085],{"__ignoreMap":998},[1002,111031,111032,111034,111037,111039,111041],{"class":1004,"line":1005},[1002,111033,15864],{"class":1030},[1002,111035,111036],{"class":15711},"color-base",[1002,111038,1137],{"class":1030},[1002,111040,110258],{"class":18541},[1002,111042,1407],{"class":1030},[1002,111044,111045,111047],{"class":1004,"line":1012},[1002,111046,110269],{"class":1026},[1002,111048,1457],{"class":1030},[1002,111050,111051,111053,111055,111057,111060],{"class":1004,"line":1047},[1002,111052,88304],{"class":1030},[1002,111054,111036],{"class":1019},[1002,111056,1137],{"class":1030},[1002,111058,111059],{"class":1019},"#222222",[1002,111061,1407],{"class":1030},[1002,111063,111064,111066],{"class":1004,"line":1054},[1002,111065,96669],{"class":1019},[1002,111067,111068],{"class":1030},": $color-base;\n",[1002,111070,111071],{"class":1004,"line":1060},[1002,111072,1170],{"class":1030},[1002,111074,111075,111077],{"class":1004,"line":1272},[1002,111076,925],{"class":15711},[1002,111078,1457],{"class":1030},[1002,111080,111081,111083],{"class":1004,"line":1348},[1002,111082,35952],{"class":1019},[1002,111084,111068],{"class":1030},[1002,111086,111087],{"class":1004,"line":1354},[1002,111088,1170],{"class":1030},[925,111090,111091],{},[1107,111092,110313],{},[993,111094,111096],{"className":35707,"code":111095,"language":29,"meta":998,"style":998},".sidebar {\n background: #222222;\n}\np {\n color: #222222;\n}\n",[941,111097,111098,111104,111114,111118,111124,111134],{"__ignoreMap":998},[1002,111099,111100,111102],{"class":1004,"line":1005},[1002,111101,110269],{"class":1026},[1002,111103,1457],{"class":1030},[1002,111105,111106,111108,111110,111112],{"class":1004,"line":1012},[1002,111107,96669],{"class":1019},[1002,111109,1137],{"class":1030},[1002,111111,111059],{"class":1019},[1002,111113,1407],{"class":1030},[1002,111115,111116],{"class":1004,"line":1047},[1002,111117,1170],{"class":1030},[1002,111119,111120,111122],{"class":1004,"line":1054},[1002,111121,925],{"class":15711},[1002,111123,1457],{"class":1030},[1002,111125,111126,111128,111130,111132],{"class":1004,"line":1060},[1002,111127,35952],{"class":1019},[1002,111129,1137],{"class":1030},[1002,111131,111059],{"class":1019},[1002,111133,1407],{"class":1030},[1002,111135,111136],{"class":1004,"line":1272},[1002,111137,1170],{"class":1030},[925,111139,111140],{},"As the highlighted line above, overwriting a variable in a declaration is global.",[925,111142,111143],{},"Use the Ruby-esque #{$variable} to shim variables into selectors, property names, and strings:",[925,111145,111146],{},[1107,111147,110242],{},[993,111149,111151],{"className":35707,"code":111150,"language":29,"meta":998,"style":998},"$side: top;\n\nsup {\n position: relative;\n #{$side}: -0.5em;\n}\n.callout-#{$side} {\n background: #777;\n}\n",[941,111152,111153,111158,111162,111169,111181,111192,111196,111207,111218],{"__ignoreMap":998},[1002,111154,111155],{"class":1004,"line":1005},[1002,111156,111157],{"class":1030},"$side: top;\n",[1002,111159,111160],{"class":1004,"line":1012},[1002,111161,1051],{"emptyLinePlaceholder":1050},[1002,111163,111164,111167],{"class":1004,"line":1047},[1002,111165,111166],{"class":15711},"sup",[1002,111168,1457],{"class":1030},[1002,111170,111171,111174,111176,111179],{"class":1004,"line":1054},[1002,111172,111173],{"class":1019}," position",[1002,111175,1137],{"class":1030},[1002,111177,111178],{"class":1019},"relative",[1002,111180,1407],{"class":1030},[1002,111182,111183,111186,111189],{"class":1004,"line":1060},[1002,111184,111185],{"class":1030}," #{$",[1002,111187,111188],{"class":1019},"side",[1002,111190,111191],{"class":1030},"}: -0.5em;\n",[1002,111193,111194],{"class":1004,"line":1272},[1002,111195,1170],{"class":1030},[1002,111197,111198,111201,111203,111205],{"class":1004,"line":1348},[1002,111199,111200],{"class":1026},".callout-",[1002,111202,88024],{"class":1030},[1002,111204,111188],{"class":1019},[1002,111206,88029],{"class":1030},[1002,111208,111209,111212,111214,111216],{"class":1004,"line":1354},[1002,111210,111211],{"class":1019}," background",[1002,111213,1137],{"class":1030},[1002,111215,110594],{"class":1019},[1002,111217,1407],{"class":1030},[1002,111219,111220],{"class":1004,"line":1360},[1002,111221,1170],{"class":1030},[925,111223,111224],{},[1107,111225,110313],{},[993,111227,111229],{"className":35707,"code":111228,"language":29,"meta":998,"style":998},"sup {\n position: relative;\n top: -0.5em;\n}\n.callout-top {\n background: #777;\n}\n",[941,111230,111231,111237,111248,111262,111266,111273,111283],{"__ignoreMap":998},[1002,111232,111233,111235],{"class":1004,"line":1005},[1002,111234,111166],{"class":15711},[1002,111236,1457],{"class":1030},[1002,111238,111239,111242,111244,111246],{"class":1004,"line":1012},[1002,111240,111241],{"class":1019}," position",[1002,111243,1137],{"class":1030},[1002,111245,111178],{"class":1019},[1002,111247,1407],{"class":1030},[1002,111249,111250,111253,111255,111258,111260],{"class":1004,"line":1047},[1002,111251,111252],{"class":1019}," top",[1002,111254,1137],{"class":1030},[1002,111256,111257],{"class":1019},"-0.5",[1002,111259,928],{"class":1015},[1002,111261,1407],{"class":1030},[1002,111263,111264],{"class":1004,"line":1054},[1002,111265,1170],{"class":1030},[1002,111267,111268,111271],{"class":1004,"line":1060},[1002,111269,111270],{"class":1026},".callout-top",[1002,111272,1457],{"class":1030},[1002,111274,111275,111277,111279,111281],{"class":1004,"line":1272},[1002,111276,96669],{"class":1019},[1002,111278,1137],{"class":1030},[1002,111280,110594],{"class":1019},[1002,111282,1407],{"class":1030},[1002,111284,111285],{"class":1004,"line":1348},[1002,111286,1170],{"class":1030},[1579,111288,111289],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":111291},[111292,111293,111294,111295,111296,111297,111298,111299,111300,111301,111302],{"id":110370,"depth":1012,"text":110371},{"id":110735,"depth":1012,"text":110736},{"id":110739,"depth":1012,"text":110740},{"id":86057,"depth":1012,"text":110763},{"id":110798,"depth":1012,"text":110799},{"id":110802,"depth":1012,"text":110803},{"id":110843,"depth":1012,"text":110844},{"id":110877,"depth":1012,"text":110878},{"id":26077,"depth":1012,"text":110896},{"id":91927,"depth":1012,"text":91573},{"id":111016,"depth":1012,"text":111017},"2015-01-28","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsass-variables.jpg",{},{"title":766,"description":768},"blog\u002Fsass-variables",[16,29,292],"iloLtuy4BzUpkypz_0ps-Zm4HF6uWIaOAi4QWe8Jxcw",{"id":111311,"title":585,"author":920,"body":111312,"date":111644,"description":587,"extension":1591,"image":111645,"meta":111646,"navigation":1050,"path":586,"seo":111647,"stem":111648,"tags":111649,"__hash__":111650},"blog\u002Fblog\u002Fnodejs-events.md",{"type":922,"value":111313,"toc":111638},[111314,111317,111332,111336,111339,111345,111348,111354,111358,111361,111487,111490,111498,111504,111508,111539,111542,111547,111551,111554,111628,111635],[925,111315,111316],{},"You can access this module by doing:",[993,111318,111320],{"className":995,"code":111319,"language":997,"meta":998,"style":998},"require('events');\n",[941,111321,111322],{"__ignoreMap":998},[1002,111323,111324,111326,111328,111330],{"class":1004,"line":1005},[1002,111325,1294],{"class":1026},[1002,111327,1031],{"class":1030},[1002,111329,42995],{"class":1034},[1002,111331,1085],{"class":1030},[953,111333,111335],{"id":111334},"events-in-the-dom","EVENTS IN THE DOM",[925,111337,111338],{},"The DOM triggers Events, so you can listen for those events.",[925,111340,111341],{},[963,111342],{"alt":111343,"src":111344},"DOM triggers Events","https:\u002F\u002Ffarm9.staticflickr.com\u002F8623\u002F16191913078_18cb6241c7_o.png",[925,111346,111347],{},"Many object in Node emit events",[925,111349,111350],{},[963,111351],{"alt":111352,"src":111353},"Node emit events","https:\u002F\u002Ffarm8.staticflickr.com\u002F7405\u002F15759562203_4c1562a5b6_o.png",[953,111355,111357],{"id":111356},"custom-event-emitters","CUSTOM EVENT EMITTERS",[925,111359,111360],{},"You can write your custom event emitters.",[993,111362,111364],{"className":995,"code":111363,"language":997,"meta":998,"style":998},"var EventEmitter = require('events').EventEmitter;\nvar logger = new EventEmitter();\n\nlogger.on('error', function (message) {\n console.log('ERR: ' + message);\n});\n\nlogger.emit('error', 'Spilled Milk'); \u002F\u002F ERR: Spilled Milk\nlogger.emit('error', 'Eggs Cracked'); \u002F\u002F ERR: Eggs Cracked\n",[941,111365,111366,111382,111398,111402,111424,111439,111443,111447,111467],{"__ignoreMap":998},[1002,111367,111368,111370,111372,111374,111376,111378,111380],{"class":1004,"line":1005},[1002,111369,18311],{"class":1015},[1002,111371,42986],{"class":1030},[1002,111373,2393],{"class":1015},[1002,111375,1027],{"class":1026},[1002,111377,1031],{"class":1030},[1002,111379,42995],{"class":1034},[1002,111381,42998],{"class":1030},[1002,111383,111384,111386,111389,111391,111393,111396],{"class":1004,"line":1012},[1002,111385,18311],{"class":1015},[1002,111387,111388],{"class":1030}," logger ",[1002,111390,2393],{"class":1015},[1002,111392,2690],{"class":1015},[1002,111394,111395],{"class":1026}," EventEmitter",[1002,111397,1428],{"class":1030},[1002,111399,111400],{"class":1004,"line":1047},[1002,111401,1051],{"emptyLinePlaceholder":1050},[1002,111403,111404,111407,111409,111411,111414,111416,111418,111420,111422],{"class":1004,"line":1054},[1002,111405,111406],{"class":1030},"logger.",[1002,111408,43148],{"class":1026},[1002,111410,1031],{"class":1030},[1002,111412,111413],{"class":1034},"'error'",[1002,111415,1251],{"class":1030},[1002,111417,6965],{"class":1015},[1002,111419,6513],{"class":1030},[1002,111421,7100],{"class":2378},[1002,111423,2382],{"class":1030},[1002,111425,111426,111428,111430,111432,111435,111437],{"class":1004,"line":1060},[1002,111427,6977],{"class":1030},[1002,111429,2886],{"class":1026},[1002,111431,1031],{"class":1030},[1002,111433,111434],{"class":1034},"'ERR: '",[1002,111436,6583],{"class":1015},[1002,111438,7178],{"class":1030},[1002,111440,111441],{"class":1004,"line":1272},[1002,111442,2804],{"class":1030},[1002,111444,111445],{"class":1004,"line":1348},[1002,111446,1051],{"emptyLinePlaceholder":1050},[1002,111448,111449,111451,111453,111455,111457,111459,111462,111464],{"class":1004,"line":1354},[1002,111450,111406],{"class":1030},[1002,111452,43083],{"class":1026},[1002,111454,1031],{"class":1030},[1002,111456,111413],{"class":1034},[1002,111458,1251],{"class":1030},[1002,111460,111461],{"class":1034},"'Spilled Milk'",[1002,111463,18256],{"class":1030},[1002,111465,111466],{"class":1008},"\u002F\u002F ERR: Spilled Milk\n",[1002,111468,111469,111471,111473,111475,111477,111479,111482,111484],{"class":1004,"line":1360},[1002,111470,111406],{"class":1030},[1002,111472,43083],{"class":1026},[1002,111474,1031],{"class":1030},[1002,111476,111413],{"class":1034},[1002,111478,1251],{"class":1030},[1002,111480,111481],{"class":1034},"'Eggs Cracked'",[1002,111483,18256],{"class":1030},[1002,111485,111486],{"class":1008},"\u002F\u002F ERR: Eggs Cracked\n",[925,111488,111489],{},"Error events could be:",[1530,111491,111492,111494,111496],{},[974,111493,25064],{},[974,111495,23379],{},[974,111497,24048],{},[925,111499,111500],{},[963,111501],{"alt":111502,"src":111503},"Error events","https:\u002F\u002Ffarm8.staticflickr.com\u002F7340\u002F15759585913_1c832d054b_o.png",[953,111505,111507],{"id":111506},"http-echo-server","HTTP ECHO SERVER",[993,111509,111511],{"className":995,"code":111510,"language":997,"meta":998,"style":998},"http.createServer(function(request, response){ ... });\n",[941,111512,111513],{"__ignoreMap":998},[1002,111514,111515,111518,111520,111522,111524,111526,111528,111530,111532,111535,111537],{"class":1004,"line":1005},[1002,111516,111517],{"class":1030},"http.",[1002,111519,28355],{"class":1026},[1002,111521,1031],{"class":1030},[1002,111523,6965],{"class":1015},[1002,111525,1031],{"class":1030},[1002,111527,4786],{"class":2378},[1002,111529,1251],{"class":1030},[1002,111531,28368],{"class":2378},[1002,111533,111534],{"class":1030},"){ ",[1002,111536,17625],{"class":1015},[1002,111538,28417],{"class":1030},[925,111540,111541],{},"This is further explained below:",[925,111543,111544],{},[963,111545],{"alt":111507,"src":111546},"https:\u002F\u002Ffarm8.staticflickr.com\u002F7397\u002F16379598345_b06c436698_o.png",[953,111548,111550],{"id":111549},"alternate-syntax","ALTERNATE SYNTAX",[925,111552,111553],{},"Above syntax can be written as follows:",[993,111555,111557],{"className":995,"code":111556,"language":997,"meta":998,"style":998},"var server = http.createServer();\n\nserver.on('request', function(request, response){ ... });\nserver.on('close', function(){ ... });\n",[941,111558,111559,111573,111577,111606],{"__ignoreMap":998},[1002,111560,111561,111563,111565,111567,111569,111571],{"class":1004,"line":1005},[1002,111562,18311],{"class":1015},[1002,111564,28347],{"class":1030},[1002,111566,2393],{"class":1015},[1002,111568,28352],{"class":1030},[1002,111570,28355],{"class":1026},[1002,111572,1428],{"class":1030},[1002,111574,111575],{"class":1004,"line":1012},[1002,111576,1051],{"emptyLinePlaceholder":1050},[1002,111578,111579,111581,111583,111585,111588,111590,111592,111594,111596,111598,111600,111602,111604],{"class":1004,"line":1047},[1002,111580,28448],{"class":1030},[1002,111582,43148],{"class":1026},[1002,111584,1031],{"class":1030},[1002,111586,111587],{"class":1034},"'request'",[1002,111589,1251],{"class":1030},[1002,111591,6965],{"class":1015},[1002,111593,1031],{"class":1030},[1002,111595,4786],{"class":2378},[1002,111597,1251],{"class":1030},[1002,111599,28368],{"class":2378},[1002,111601,111534],{"class":1030},[1002,111603,17625],{"class":1015},[1002,111605,28417],{"class":1030},[1002,111607,111608,111610,111612,111614,111617,111619,111621,111624,111626],{"class":1004,"line":1054},[1002,111609,28448],{"class":1030},[1002,111611,43148],{"class":1026},[1002,111613,1031],{"class":1030},[1002,111615,111616],{"class":1034},"'close'",[1002,111618,1251],{"class":1030},[1002,111620,6965],{"class":1015},[1002,111622,111623],{"class":1030},"(){ ",[1002,111625,17625],{"class":1015},[1002,111627,28417],{"class":1030},[925,111629,111630,111631,111634],{},"Event ",[1107,111632,111633],{},"close"," is emitted when the server closes.",[1579,111636,111637],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":111639},[111640,111641,111642,111643],{"id":111334,"depth":1012,"text":111335},{"id":111356,"depth":1012,"text":111357},{"id":111506,"depth":1012,"text":111507},{"id":111549,"depth":1012,"text":111550},"2015-01-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Fnodejs-events.jpg",{},{"title":585,"description":587},"blog\u002Fnodejs-events",[16,17,442],"JeNgrDKKvjoC7RMcXqEs5YrEVK3xG9ULoMfupHpBtpQ",{"id":111652,"title":735,"author":920,"body":111653,"date":112199,"description":737,"extension":1591,"image":112200,"meta":112201,"navigation":1050,"path":736,"seo":112202,"stem":112203,"tags":112204,"__hash__":112205},"blog\u002Fblog\u002Fruby-introduction.md",{"type":922,"value":111654,"toc":112178},[111655,111659,111662,111666,111675,111678,111693,111695,111698,111702,111711,111714,111723,111726,111730,111739,111741,111744,111753,111756,111758,111761,111765,111774,111777,111781,111784,111789,111798,111801,111804,111813,111816,111825,111828,111837,111840,111844,111847,111856,111859,111868,111871,111874,111883,111887,111890,111899,111902,111906,111909,111913,111918,111921,111925,111928,111932,111941,111944,111947,111951,111954,111958,111967,111970,111973,111976,111980,111983,111987,111996,111999,112003,112006,112010,112019,112022,112031,112034,112038,112041,112050,112059,112062,112071,112075,112078,112087,112096,112099,112102,112111,112115,112118,112122,112131,112134,112138,112141,112166,112170,112173,112176],[953,111656,111658],{"id":111657},"variables","Variables",[925,111660,111661],{},"Any plain, lowercase word is a variable in ruby. Variables may consist of letters, digits and underscores.",[925,111663,111664],{},[1107,111665,43995],{},[993,111667,111669],{"className":31824,"code":111668,"language":124,"meta":998,"style":998},"x , y , banana2\n",[941,111670,111671],{"__ignoreMap":998},[1002,111672,111673],{"class":1004,"line":1005},[1002,111674,111668],{},[925,111676,111677],{},"Variables are like nicknames, you give a nickname to something you use frequently.",[993,111679,111681],{"className":31824,"code":111680,"language":124,"meta":998,"style":998},"phone_price = 455.00\ntotal = phone_price + case_price + delivery\n",[941,111682,111683,111688],{"__ignoreMap":998},[1002,111684,111685],{"class":1004,"line":1005},[1002,111686,111687],{},"phone_price = 455.00\n",[1002,111689,111690],{"class":1004,"line":1012},[1002,111691,111692],{},"total = phone_price + case_price + delivery\n",[953,111694,110763],{"id":86057},[925,111696,111697],{},"The most basic type of number is an integer, a series of digits which can start with a plus or minus sign.",[925,111699,111700],{},[1107,111701,43995],{},[993,111703,111705],{"className":31824,"code":111704,"language":124,"meta":998,"style":998},"1, 23 , and -10000\n",[941,111706,111707],{"__ignoreMap":998},[1002,111708,111709],{"class":1004,"line":1005},[1002,111710,111704],{},[925,111712,111713],{},"Commas are not allowed in numbers, but underscores are. So if you feel the need to mark your thousands so the numbers are more readable, use an underscore.",[993,111715,111717],{"className":31824,"code":111716,"language":124,"meta":998,"style":998},"population = 12_000_000_000\n",[941,111718,111719],{"__ignoreMap":998},[1002,111720,111721],{"class":1004,"line":1005},[1002,111722,111716],{},[925,111724,111725],{},"Decimal numbers are called floats in Ruby. Floats consist of numbers with a decimal place or scientific notation.",[925,111727,111728],{},[1107,111729,43995],{},[993,111731,111733],{"className":31824,"code":111732,"language":124,"meta":998,"style":998},"3.14 , -808.08 and 12.043e-04\n",[941,111734,111735],{"__ignoreMap":998},[1002,111736,111737],{"class":1004,"line":1005},[1002,111738,111732],{},[953,111740,110844],{"id":110843},[925,111742,111743],{},"Strings are any sort of characters (letters, digits, punctuation) surrounded by quotes. Both single and double quotes are used to create strings.",[993,111745,111747],{"className":31824,"code":111746,"language":124,"meta":998,"style":998},"\"sealab\" , '2021' , or \"These comments are hilarious!\"\n",[941,111748,111749],{"__ignoreMap":998},[1002,111750,111751],{"class":1004,"line":1005},[1002,111752,111746],{},[925,111754,111755],{},"When you enclose characters in quotes, they are stored together as a single string.",[953,111757,103227],{"id":103226},[925,111759,111760],{},"Symbols are words that look just like variables. Again, they may contain letters, digits, or underscores. But they start with a colon.",[925,111762,111763],{},[1107,111764,43995],{},[993,111766,111768],{"className":31824,"code":111767,"language":124,"meta":998,"style":998},":a , :b , or :ponce_de_leon\n",[941,111769,111770],{"__ignoreMap":998},[1002,111771,111772],{"class":1004,"line":1005},[1002,111773,111767],{},[925,111775,111776],{},"Symbols are lightweight strings. Usually, symbols are used in situations where you need a string but you won’t be printing it to the screen.",[953,111778,111780],{"id":111779},"constants","Constants",[925,111782,111783],{},"Constants are words like variables, but constants are capitalized. If variables are the nouns of Ruby, then think of constants as the proper nouns, and most importantly cannot be changed.",[925,111785,111786],{},[1107,111787,111788],{},"Examples",[993,111790,111792],{"className":31824,"code":111791,"language":124,"meta":998,"style":998},"Time , Array or Bunny_Lake_is_Missing\n",[941,111793,111794],{"__ignoreMap":998},[1002,111795,111796],{"class":1004,"line":1005},[1002,111797,111791],{},[953,111799,111800],{"id":81443},"Methods",[925,111802,111803],{},"If variables and constants are the nouns, then methods are the verbs. Methods are usually attached to the end of variables and constants by a dot. You’ve already seen methods at work.",[993,111805,111807],{"className":31824,"code":111806,"language":124,"meta":998,"style":998},"front_door.open\n",[941,111808,111809],{"__ignoreMap":998},[1002,111810,111811],{"class":1004,"line":1005},[1002,111812,111806],{},[925,111814,111815],{},"In the above, open is the method. It is the action, the verb. In some cases, you’ll see actions chained together.",[993,111817,111819],{"className":31824,"code":111818,"language":124,"meta":998,"style":998},"front_door.open.close\n",[941,111820,111821],{"__ignoreMap":998},[1002,111822,111823],{"class":1004,"line":1005},[1002,111824,111818],{},[925,111826,111827],{},"We’ve instructed the computer to open the front door and then immediately close it.",[993,111829,111831],{"className":31824,"code":111830,"language":124,"meta":998,"style":998},"front_door.is_open?\n",[941,111832,111833],{"__ignoreMap":998},[1002,111834,111835],{"class":1004,"line":1005},[1002,111836,111830],{},[925,111838,111839],{},"The above is an action as well. We’re instructing the computer to test the door to see if it’s open. The method could be called Door.test_to_see_if_its_open, but the is_open? name is succinct and just as correct. Both exclamation marks and question marks may be used in method names.",[953,111841,111843],{"id":111842},"method-arguments","Method arguments",[925,111845,111846],{},"A method may require more information to perform its action. If we want the computer to paint the door, we shouldprovide a colour as well. Method arguments are attached to the end of a method. The arguments are usually surrounded by parentheses and separated by commas.",[993,111848,111850],{"className":31824,"code":111849,"language":124,"meta":998,"style":998},"front_door.paint( 3, :red )\n",[941,111851,111852],{"__ignoreMap":998},[1002,111853,111854],{"class":1004,"line":1005},[1002,111855,111849],{},[925,111857,111858],{},"The above paints the front door 3 coats of red.",[993,111860,111862],{"className":31824,"code":111861,"language":124,"meta":998,"style":998},"front_door.paint( 3, :red ).dry( 30 ).close()\n",[941,111863,111864],{"__ignoreMap":998},[1002,111865,111866],{"class":1004,"line":1005},[1002,111867,111861],{},[925,111869,111870],{},"The above paints the front door 3 coats of red, dries for 30 minutes and closes the door. Even though the last method has no arguments, you can still put parentheses if you like. There is no use dragging an empty inner tube, so the parentheses are normally dropped.",[925,111872,111873],{},"Some methods (such as print) are kernel methods. These methods are used throughout Ruby. Since they are so common, you won’t use the dot.",[993,111875,111877],{"className":31824,"code":111876,"language":124,"meta":998,"style":998},"print \"See, no dot.\"\n",[941,111878,111879],{"__ignoreMap":998},[1002,111880,111881],{"class":1004,"line":1005},[1002,111882,111876],{},[953,111884,111886],{"id":111885},"class-methods","Class methods",[925,111888,111889],{},"Like the methods described above (also called instance methods), class methods are usually attached after variables and constants. Rather than a dot, a double colon is used.",[993,111891,111893],{"className":31824,"code":111892,"language":124,"meta":998,"style":998},"Door::new( :oak )\n",[941,111894,111895],{"__ignoreMap":998},[1002,111896,111897],{"class":1004,"line":1005},[1002,111898,111892],{},[925,111900,111901],{},"As seen above, the new class method is most often used to create things.",[953,111903,111905],{"id":111904},"global-variables","Global variables",[925,111907,111908],{},"Variables which begin with a dollar sign are global.",[925,111910,111911],{},[1107,111912,111788],{},[925,111914,111915],{},[941,111916,111917],{},"ruby$x , $1 , $chunky and $CHunKY_bACOn",[925,111919,111920],{},"Global variables can be used anywhere in your program. They never go out of sight.",[953,111922,111924],{"id":111923},"instance-variables","Instance variables",[925,111926,111927],{},"Variables which begin with an at symbol are instance variables",[925,111929,111930],{},[1107,111931,111788],{},[993,111933,111935],{"className":31824,"code":111934,"language":124,"meta":998,"style":998},"@x , @y , and @only_the_chunkiest_cut_of_bacon_I_have_ever_seen\n",[941,111936,111937],{"__ignoreMap":998},[1002,111938,111939],{"class":1004,"line":1005},[1002,111940,111934],{},[925,111942,111943],{},"These variables are often used to define the attributes of something. For example, you might provide Ruby with the width of\nthe front_door by setting the @width variable inside that front_door. Instance variables are used to\ndefine characteristics of a single object in Ruby.",[925,111945,111946],{},"Think of the at symbol as meaning attribute.",[953,111948,111950],{"id":111949},"class-variables","Class variables",[925,111952,111953],{},"Variables which begin with double at symbols are class variables.",[925,111955,111956],{},[1107,111957,43995],{},[993,111959,111961],{"className":31824,"code":111960,"language":124,"meta":998,"style":998},"@@x , @@y , and @@i_will_take_your_chunky_bacon_and_raise_you_two\n",[941,111962,111963],{"__ignoreMap":998},[1002,111964,111965],{"class":1004,"line":1005},[1002,111966,111960],{},[925,111968,111969],{},"Class variables, too, are used to define attributes. But rather than defining an attribute for a single object in Ruby, class variables give an attribute to many related objects in Ruby. If instance variables set attributes for a single front_door, then class variables set attributes for everything that is a Door.",[925,111971,111972],{},"Think of the double at prefix as meaning attribute all.",[925,111974,111975],{},"You change a class variable and not just one changes, they all change.",[953,111977,111979],{"id":111978},"blocks","Blocks",[925,111981,111982],{},"Any code surrounded by curly braces is a block.",[925,111984,111985],{},[1107,111986,43995],{},[993,111988,111990],{"className":31824,"code":111989,"language":124,"meta":998,"style":998},"2.times { print \"Yes, I've used chunky bacon in my examples, but never again!\" }\n",[941,111991,111992],{"__ignoreMap":998},[1002,111993,111994],{"class":1004,"line":1005},[1002,111995,111989],{},[925,111997,111998],{},"With blocks, you can group a set of instructions so that they can be passed around your program.",[953,112000,112002],{"id":112001},"block-arguments","Block arguments",[925,112004,112005],{},"Block arguments are a set of variables surrounded by pipe characters and separated by commas.",[925,112007,112008],{},[1107,112009,43995],{},[993,112011,112013],{"className":31824,"code":112012,"language":124,"meta":998,"style":998},"|x| , |x,y| , and |up, down, all_around|\n",[941,112014,112015],{"__ignoreMap":998},[1002,112016,112017],{"class":1004,"line":1005},[1002,112018,112012],{},[925,112020,112021],{},"Block arguments are used at the beginning of a block.",[993,112023,112025],{"className":31824,"code":112024,"language":124,"meta":998,"style":998},"{ |x,y| x + y }\n",[941,112026,112027],{"__ignoreMap":998},[1002,112028,112029],{"class":1004,"line":1005},[1002,112030,112024],{},[925,112032,112033],{},"In the above example, |x,y| are the arguments. After the arguments, we have a bit of code. The expression x + y adds the two arguments together.",[953,112035,112037],{"id":112036},"ranges","Ranges",[925,112039,112040],{},"A range is two values surrounded by parentheses and separated by an ellipsis (in the form of two or three dots).",[993,112042,112044],{"className":31824,"code":112043,"language":124,"meta":998,"style":998},"(1..3) is a range, representing the numbers 1 through 3.\n",[941,112045,112046],{"__ignoreMap":998},[1002,112047,112048],{"class":1004,"line":1005},[1002,112049,112043],{},[993,112051,112053],{"className":31824,"code":112052,"language":124,"meta":998,"style":998},"('a'..'z') is a range, representing a lowercase alphabet.\n",[941,112054,112055],{"__ignoreMap":998},[1002,112056,112057],{"class":1004,"line":1005},[1002,112058,112052],{},[925,112060,112061],{},"Normally, only two dots are used. If a third dot is used, the last value in the range is excluded.",[993,112063,112065],{"className":31824,"code":112064,"language":124,"meta":998,"style":998},"(0...5) represents the numbers 0 through 4.\n",[941,112066,112067],{"__ignoreMap":998},[1002,112068,112069],{"class":1004,"line":1005},[1002,112070,112064],{},[953,112072,112074],{"id":112073},"arrays","Arrays",[925,112076,112077],{},"An array is a list surrounded by square brackets and separated by commas.",[993,112079,112081],{"className":31824,"code":112080,"language":124,"meta":998,"style":998},"[1, 2, 3] is an array of numbers.\n",[941,112082,112083],{"__ignoreMap":998},[1002,112084,112085],{"class":1004,"line":1005},[1002,112086,112080],{},[993,112088,112090],{"className":31824,"code":112089,"language":124,"meta":998,"style":998},"['coat', 'mittens', 'snowboard'] is an array of strings.\n",[941,112091,112092],{"__ignoreMap":998},[1002,112093,112094],{"class":1004,"line":1005},[1002,112095,112089],{},[953,112097,112098],{"id":90714},"Hashes",[925,112100,112101],{},"A hash is a dictionary surrounded by curly braces. Dictionaries match words with their definitions. Ruby does so with arrows made from an equals sign, followed by a greater-than sign.",[993,112103,112105],{"className":31824,"code":112104,"language":124,"meta":998,"style":998},"{'a' => 'aardvark', 'b' => 'badger'}\n",[941,112106,112107],{"__ignoreMap":998},[1002,112108,112109],{"class":1004,"line":1005},[1002,112110,112104],{},[953,112112,112114],{"id":112113},"regular-expressions","Regular Expressions",[925,112116,112117],{},"A regular expression (or regexp) is a set of characters surrounded by slashes.",[925,112119,112120],{},[1107,112121,111788],{},[993,112123,112125],{"className":31824,"code":112124,"language":124,"meta":998,"style":998},"\u002Fruby\u002F , \u002F[0-9]+\u002F and \u002F^\\d{3}-\\d{3}-\\d{4}\u002F\n",[941,112126,112127],{"__ignoreMap":998},[1002,112128,112129],{"class":1004,"line":1005},[1002,112130,112124],{},[925,112132,112133],{},"Regular expressions are used to find words or patterns in text. The slashes on each side of the expression are pins.",[953,112135,112137],{"id":112136},"operators","Operators",[925,112139,112140],{},"You’ll use the following list of operators to do math in Ruby or to compare things. Scan over the list, recognize a few. You know, addition + and subtraction - and so on.",[993,112142,112144],{"className":31824,"code":112143,"language":124,"meta":998,"style":998},"** ! ~ * \u002F % + - &\n \u003C\u003C >> | ^ > >= \u003C \u003C= \u003C=>\n || != =~ !~ && += -= == ===\n .. ... not and or\n",[941,112145,112146,112151,112156,112161],{"__ignoreMap":998},[1002,112147,112148],{"class":1004,"line":1005},[1002,112149,112150],{},"** ! ~ * \u002F % + - &\n",[1002,112152,112153],{"class":1004,"line":1012},[1002,112154,112155],{}," \u003C\u003C >> | ^ > >= \u003C \u003C= \u003C=>\n",[1002,112157,112158],{"class":1004,"line":1047},[1002,112159,112160],{}," || != =~ !~ && += -= == ===\n",[1002,112162,112163],{"class":1004,"line":1054},[1002,112164,112165],{}," .. ... not and or\n",[953,112167,112169],{"id":112168},"keywords","Keywords",[925,112171,112172],{},"Ruby has several built-in words, imbued with meaning. These words cannot be used as variables or changed to suit your purposes. Some of these we’ve already discussed. They are in the safe house, my friend. You touch these and you’ll be served an official syntax error.",[925,112174,112175],{},"**\nalias and BEGIN begin break case class def defined\ndo else elsif END end ensure false for if\nin module next nil not or redo rescue retry\nreturn self super then true undef unless until when\nwhile yield\n**",[1579,112177,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":112179},[112180,112181,112182,112183,112184,112185,112186,112187,112188,112189,112190,112191,112192,112193,112194,112195,112196,112197,112198],{"id":111657,"depth":1012,"text":111658},{"id":86057,"depth":1012,"text":110763},{"id":110843,"depth":1012,"text":110844},{"id":103226,"depth":1012,"text":103227},{"id":111779,"depth":1012,"text":111780},{"id":81443,"depth":1012,"text":111800},{"id":111842,"depth":1012,"text":111843},{"id":111885,"depth":1012,"text":111886},{"id":111904,"depth":1012,"text":111905},{"id":111923,"depth":1012,"text":111924},{"id":111949,"depth":1012,"text":111950},{"id":111978,"depth":1012,"text":111979},{"id":112001,"depth":1012,"text":112002},{"id":112036,"depth":1012,"text":112037},{"id":112073,"depth":1012,"text":112074},{"id":90714,"depth":1012,"text":112098},{"id":112113,"depth":1012,"text":112114},{"id":112136,"depth":1012,"text":112137},{"id":112168,"depth":1012,"text":112169},"2015-01-16","\u002Fimages\u002Fblog\u002Ffeatures\u002Fruby-introduction.jpg",{},{"title":735,"description":737},"blog\u002Fruby-introduction",[16,124],"g7zeGLDhKSapn0pR-g-y6ht45DUAl3JVd-_adaPjUCA",{"id":112207,"title":543,"author":920,"body":112208,"date":112632,"description":545,"extension":1591,"image":112633,"meta":112634,"navigation":1050,"path":544,"seo":112635,"stem":112636,"tags":112637,"__hash__":112638},"blog\u002Fblog\u002Fjquery-use.md",{"type":922,"value":112209,"toc":112625},[112210,112234,112238,112245,112358,112361,112367,112373,112398,112404,112408,112424,112427,112438,112441,112547,112551,112561,112574,112580,112589,112593,112602,112618,112623],[993,112211,112213],{"className":995,"code":112212,"language":997,"meta":998,"style":998},"\u003Cscript src=\"jquery.min.js\">\u003C\u002Fscript>\n",[941,112214,112215],{"__ignoreMap":998},[1002,112216,112217,112219,112221,112223,112225,112228,112230,112232],{"class":1004,"line":1005},[1002,112218,6539],{"class":1030},[1002,112220,22063],{"class":15711},[1002,112222,15242],{"class":1026},[1002,112224,2393],{"class":1015},[1002,112226,112227],{"class":1034},"\"jquery.min.js\"",[1002,112229,22081],{"class":1030},[1002,112231,22063],{"class":15711},[1002,112233,15703],{"class":1030},[953,112235,112237],{"id":112236},"changing-multiple-elements-at-once","Changing multiple elements at once",[925,112239,112240,112241,112244],{},"How do we change the text of every ",[941,112242,112243],{},"\u003Cli>"," in this page?",[993,112246,112248],{"className":37880,"code":112247,"language":383,"meta":998,"style":998},"\u003Ch1>Where do you want to go?\u003C\u002Fh1>\n\u003Ch2>Travel Destinations\u003C\u002Fh2>\n\u003Cp>Plan your next adventure.\u003C\u002Fp>\n\u003Cul id=\"destinations\">\n \u003Cli>Rome\u003C\u002Fli>\n \u003Cli>Paris\u003C\u002Fli>\n \u003Cli class=\"promo\">Rio\u003C\u002Fli>\n\u003C\u002Ful>\n",[941,112249,112250,112263,112276,112289,112304,112317,112330,112350],{"__ignoreMap":998},[1002,112251,112252,112254,112256,112259,112261],{"class":1004,"line":1005},[1002,112253,6539],{"class":1030},[1002,112255,15201],{"class":15711},[1002,112257,112258],{"class":1030},">Where do you want to go?\u003C\u002F",[1002,112260,15201],{"class":15711},[1002,112262,15703],{"class":1030},[1002,112264,112265,112267,112269,112272,112274],{"class":1004,"line":1012},[1002,112266,6539],{"class":1030},[1002,112268,953],{"class":15711},[1002,112270,112271],{"class":1030},">Travel Destinations\u003C\u002F",[1002,112273,953],{"class":15711},[1002,112275,15703],{"class":1030},[1002,112277,112278,112280,112282,112285,112287],{"class":1004,"line":1047},[1002,112279,6539],{"class":1030},[1002,112281,925],{"class":15711},[1002,112283,112284],{"class":1030},">Plan your next adventure.\u003C\u002F",[1002,112286,925],{"class":15711},[1002,112288,15703],{"class":1030},[1002,112290,112291,112293,112295,112297,112299,112302],{"class":1004,"line":1054},[1002,112292,6539],{"class":1030},[1002,112294,1530],{"class":15711},[1002,112296,21489],{"class":1026},[1002,112298,2393],{"class":1030},[1002,112300,112301],{"class":1034},"\"destinations\"",[1002,112303,15703],{"class":1030},[1002,112305,112306,112308,112310,112313,112315],{"class":1004,"line":1060},[1002,112307,22427],{"class":1030},[1002,112309,974],{"class":15711},[1002,112311,112312],{"class":1030},">Rome\u003C\u002F",[1002,112314,974],{"class":15711},[1002,112316,15703],{"class":1030},[1002,112318,112319,112321,112323,112326,112328],{"class":1004,"line":1272},[1002,112320,22427],{"class":1030},[1002,112322,974],{"class":15711},[1002,112324,112325],{"class":1030},">Paris\u003C\u002F",[1002,112327,974],{"class":15711},[1002,112329,15703],{"class":1030},[1002,112331,112332,112334,112336,112338,112340,112343,112346,112348],{"class":1004,"line":1348},[1002,112333,22427],{"class":1030},[1002,112335,974],{"class":15711},[1002,112337,17187],{"class":1026},[1002,112339,2393],{"class":1030},[1002,112341,112342],{"class":1034},"\"promo\"",[1002,112344,112345],{"class":1030},">Rio\u003C\u002F",[1002,112347,974],{"class":15711},[1002,112349,15703],{"class":1030},[1002,112351,112352,112354,112356],{"class":1004,"line":1354},[1002,112353,22437],{"class":1030},[1002,112355,1530],{"class":15711},[1002,112357,15703],{"class":1030},[925,112359,112360],{},"First, find them and then modify their text.",[925,112362,112363],{},[963,112364],{"alt":112365,"src":112366},"modify their text","https:\u002F\u002Ffarm8.staticflickr.com\u002F7560\u002F15957306630_ea20d131c5_o.png",[925,112368,112369,112370,1813],{},"Let's select list items with the word ",[1107,112371,112372],{},"Orlando",[993,112374,112376],{"className":995,"code":112375,"language":997,"meta":998,"style":998},"$('li').text('Orlando');\n",[941,112377,112378],{"__ignoreMap":998},[1002,112379,112380,112382,112384,112387,112389,112391,112393,112396],{"class":1004,"line":1005},[1002,112381,15864],{"class":1026},[1002,112383,1031],{"class":1030},[1002,112385,112386],{"class":1034},"'li'",[1002,112388,1539],{"class":1030},[1002,112390,24241],{"class":1026},[1002,112392,1031],{"class":1030},[1002,112394,112395],{"class":1034},"'Orlando'",[1002,112397,1085],{"class":1030},[925,112399,112400],{},[963,112401],{"alt":112402,"src":112403},"select list items","https:\u002F\u002Ffarm8.staticflickr.com\u002F7537\u002F15522310494_c395d6593c_o.png",[953,112405,112407],{"id":112406},"finding-elements-by-id-and-class","Finding elements by ID and class",[993,112409,112411],{"className":995,"code":112410,"language":997,"meta":998,"style":998},"$('#destinations');\n",[941,112412,112413],{"__ignoreMap":998},[1002,112414,112415,112417,112419,112422],{"class":1004,"line":1005},[1002,112416,15864],{"class":1026},[1002,112418,1031],{"class":1030},[1002,112420,112421],{"class":1034},"'#destinations'",[1002,112423,1085],{"class":1030},[953,112425,112237],{"id":112426},"changing-multiple-elements-at-once-1",[925,112428,112429,112430,112433,112434,112437],{},"How do we specifically select the ",[941,112431,112432],{},"\u003Cul>"," that has a ",[1107,112435,112436],{},"destinations"," ID?",[925,112439,112440],{},"HTML document",[993,112442,112444],{"className":995,"code":112443,"language":997,"meta":998,"style":998},"\u003Ch1>Where do you want to go?\u003C\u002Fh1>\n\u003Ch2>Travel Destinations\u003C\u002Fh2>\n\u003Cp>Plan your next adventure.\u003C\u002Fp>\n\u003Cul id=\"destinations\">\n \u003Cli>Rome\u003C\u002Fli>\n \u003Cli>Paris\u003C\u002Fli>\n \u003Cli class='promo'>Rio\u003C\u002Fli>\n\u003C\u002Ful>\n",[941,112445,112446,112458,112470,112482,112496,112508,112520,112539],{"__ignoreMap":998},[1002,112447,112448,112450,112452,112454,112456],{"class":1004,"line":1005},[1002,112449,6539],{"class":1030},[1002,112451,15201],{"class":15711},[1002,112453,112258],{"class":1030},[1002,112455,15201],{"class":15711},[1002,112457,15703],{"class":1030},[1002,112459,112460,112462,112464,112466,112468],{"class":1004,"line":1012},[1002,112461,6539],{"class":1030},[1002,112463,953],{"class":15711},[1002,112465,112271],{"class":1030},[1002,112467,953],{"class":15711},[1002,112469,15703],{"class":1030},[1002,112471,112472,112474,112476,112478,112480],{"class":1004,"line":1047},[1002,112473,6539],{"class":1030},[1002,112475,925],{"class":15711},[1002,112477,112284],{"class":1030},[1002,112479,925],{"class":15711},[1002,112481,15703],{"class":1030},[1002,112483,112484,112486,112488,112490,112492,112494],{"class":1004,"line":1054},[1002,112485,6539],{"class":1030},[1002,112487,1530],{"class":15711},[1002,112489,21489],{"class":1026},[1002,112491,2393],{"class":1015},[1002,112493,112301],{"class":1034},[1002,112495,15703],{"class":1030},[1002,112497,112498,112500,112502,112504,112506],{"class":1004,"line":1060},[1002,112499,15697],{"class":1030},[1002,112501,974],{"class":15711},[1002,112503,112312],{"class":1030},[1002,112505,974],{"class":15711},[1002,112507,15703],{"class":1030},[1002,112509,112510,112512,112514,112516,112518],{"class":1004,"line":1272},[1002,112511,15697],{"class":1030},[1002,112513,974],{"class":15711},[1002,112515,112325],{"class":1030},[1002,112517,974],{"class":15711},[1002,112519,15703],{"class":1030},[1002,112521,112522,112524,112526,112528,112530,112533,112535,112537],{"class":1004,"line":1348},[1002,112523,15697],{"class":1030},[1002,112525,974],{"class":15711},[1002,112527,17187],{"class":1026},[1002,112529,2393],{"class":1015},[1002,112531,112532],{"class":1034},"'promo'",[1002,112534,112345],{"class":1030},[1002,112536,974],{"class":15711},[1002,112538,15703],{"class":1030},[1002,112540,112541,112543,112545],{"class":1004,"line":1354},[1002,112542,22437],{"class":1030},[1002,112544,1530],{"class":15711},[1002,112546,15703],{"class":1030},[953,112548,112550],{"id":112549},"selecting-by-unique-id","Selecting by unique ID",[925,112552,112553,112554,112557,112558,112560],{},"You can find an element by id using the ",[941,112555,112556],{},"$('#id')"," format. Notice the ",[1107,112559,65636],{}," sign, that's what we use to find the id similar to CSS.",[993,112562,112564],{"className":995,"code":112563,"language":997,"meta":998,"style":998},"('#destinations');\n",[941,112565,112566],{"__ignoreMap":998},[1002,112567,112568,112570,112572],{"class":1004,"line":1005},[1002,112569,1031],{"class":1030},[1002,112571,112421],{"class":1034},[1002,112573,1085],{"class":1030},[925,112575,112576],{},[963,112577],{"alt":112578,"src":112579},"find an element by id","https:\u002F\u002Ffarm9.staticflickr.com\u002F8598\u002F15522355974_48678e9c72_o.png",[925,112581,112582,112583,112433,112585,112588],{},"How can we select just the ",[941,112584,112432],{},[1107,112586,112587],{},"promo"," class attribute? We have to find it using the class.",[953,112590,112592],{"id":112591},"selecting-by-class-name","Selecting by Class Name",[925,112594,112595,112596,112557,112599,112601],{},"You can find elements by class name using the ",[941,112597,112598],{},"$('.class')",[1107,112600,948],{}," sign, that's what we use to find the classes similar to CSS.",[993,112603,112605],{"className":995,"code":112604,"language":997,"meta":998,"style":998},"$('.promo');\n",[941,112606,112607],{"__ignoreMap":998},[1002,112608,112609,112611,112613,112616],{"class":1004,"line":1005},[1002,112610,15864],{"class":1026},[1002,112612,1031],{"class":1030},[1002,112614,112615],{"class":1034},"'.promo'",[1002,112617,1085],{"class":1030},[925,112619,112620],{},[963,112621],{"alt":112592,"src":112622},"https:\u002F\u002Ffarm8.staticflickr.com\u002F7475\u002F16118949636_ff2f3c1cf6_o.png",[1579,112624,48031],{},{"title":998,"searchDepth":1012,"depth":1012,"links":112626},[112627,112628,112629,112630,112631],{"id":112236,"depth":1012,"text":112237},{"id":112406,"depth":1012,"text":112407},{"id":112426,"depth":1012,"text":112237},{"id":112549,"depth":1012,"text":112550},{"id":112591,"depth":1012,"text":112592},"2014-12-30","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjquery-use.jpg",{},{"title":543,"description":545},"blog\u002Fjquery-use",[16,17,106],"quooeY5FvboeWTNM25ma7VFkyukgYZe-Lb33fUuwfxA",{"id":112640,"title":273,"author":920,"body":112641,"date":112867,"description":275,"extension":1591,"image":112868,"meta":112869,"navigation":1050,"path":274,"seo":112870,"stem":112871,"tags":112872,"__hash__":112873},"blog\u002Fblog\u002Fext-js-introduction.md",{"type":922,"value":112642,"toc":112849},[112643,112647,112650,112654,112657,112661,112664,112668,112671,112679,112683,112686,112703,112707,112710,112714,112717,112721,112724,112728,112731,112734,112737,112742,112746,112749,112754,112757,112767,112771,112781,112787,112790,112794,112797,112803,112807,112814,112820,112823,112827,112830,112836,112839,112843,112846],[953,112644,112646],{"id":112645},"history","HISTORY",[925,112648,112649],{},"Ext JS is a client-side, JavaScript framework for building web applications. In early 2006, Jack Slocum (jackslocum.com) started working on a set of extension utilities for the Yahoo User Interface (YUI) library under the name \"yui-ext.\" Eventually, Jack created an adapter layer through which any foundation library could be plugged in to provide utilities such as event handling, DOM manipulation and animated effects. This unanchored the library from YUI, and allowed the use of YUI, jQuery, prototype, or a new ext-base foundation written by Jack. This was version 1 of Ext JS.",[953,112651,112653],{"id":112652},"setup-extjs-devlopment-environment","SETUP EXTJS DEVLOPMENT ENVIRONMENT",[925,112655,112656],{},"Before starting with Sencha ExtJS 4, you need to set up a development environment for it. There are two things required for Ext JS application development, Sencha SDK and IDE to write a code.",[953,112658,112660],{"id":112659},"sencha-sdk","SENCHA SDK",[925,112662,112663],{},"Please download GPL version of Sencha ExtJS library from sencha.com to learn ExtJS 4 or for open source project.",[953,112665,112667],{"id":112666},"web-server","WEB SERVER",[925,112669,112670],{},"You also need to install a web server on your local machine. You may use any web server of your choice.",[1530,112672,112673,112676],{},[974,112674,112675],{},"Apache HTTP Server",[974,112677,112678],{},"IIS",[953,112680,112682],{"id":112681},"ide","IDE",[925,112684,112685],{},"You can use any IDE for Sencha development as per your convenient. Here are some popular IDEs:",[1530,112687,112688,112691,112694,112697,112700],{},[974,112689,112690],{},"JetBrains Webstorm",[974,112692,112693],{},"Visual Studio",[974,112695,112696],{},"Sublime Text",[974,112698,112699],{},"Aptana Sutdio",[974,112701,112702],{},"Eclipse",[953,112704,112706],{"id":112705},"extjs-framework","EXTJS FRAMEWORK",[925,112708,112709],{},"Now let's look at what makes ExtJS so powerful, the ExtJS Framework. It comprises of many basic features such as Ajax communication, DOM manipulation, and event management. Everything else is dependent on the core of the framework, but the core isn’t dependent on anything else.",[953,112711,112713],{"id":112712},"the-component-model","THE COMPONENT MODEL",[925,112715,112716],{},"The Component model dictates how UI widgets are instantiated, rendered, and destroyed in what’s known as the component life cycle.",[953,112718,112720],{"id":112719},"the-container-model","The Container model",[925,112722,112723],{},"The Container model controls how widgets can manage (or contain ) other child widgets.",[953,112725,112727],{"id":112726},"ext-js-core","Ext JS core",[925,112729,112730],{},"Comprises many basic features such as Ajax communication, DOM manipulation, and event management. Everything else is dependent on the core of the framework, but the core isn’t dependent on anything else.",[953,112732,112733],{"id":33844},"Containers",[925,112735,112736],{},"Containers are widgets that can manage one or more child items. eg:- Tab panel",[925,112738,112739],{},[963,112740],{"alt":112733,"src":112741},"https:\u002F\u002Ffarm8.staticflickr.com\u002F7500\u002F15447003454_423c11cf67_n.jpg",[953,112743,112745],{"id":112744},"layouts","Layouts",[925,112747,112748],{},"Layouts are implemented by a container to visually organize the child items in the container’s content body.",[925,112750,112751],{},[963,112752],{"alt":112745,"src":112753},"https:\u002F\u002Ffarm8.staticflickr.com\u002F7558\u002F15447011874_38687c48b3_n.jpg",[925,112755,112756],{},"Layouts are broken up into two main areas of functionality: component and container layouts.",[925,112758,112759,112762,112763,112766],{},[1107,112760,112761],{},"Component Layouts"," are responsible for arranging the HTML for components. ",[1107,112764,112765],{},"Container layouts"," are responsible for managing the location and size of child components.",[953,112768,112770],{"id":112769},"data-package","DATA PACKAGE",[925,112772,112773,112774,2034,112777,112780],{},"The Ext JS 4.0 data package incorporates an explosion of classes, and it includes new members such as the ",[1107,112775,112776],{},"LocalStorage proxy",[1107,112778,112779],{},"tree store",".\nThe LocalStorage proxy allows data to be stored and retrieved using the browser’s local storage feature, whereas the tree store replaces the Ext JS 3.0 tree loader, allowing you to do a lot more with trees than ever before.",[925,112782,112783],{},[963,112784],{"alt":112785,"src":112786},"Data package","https:\u002F\u002Ffarm8.staticflickr.com\u002F7573\u002F15883231109_60ac865f7e_n.jpg",[925,112788,112789],{},"In Ext JS 4.0, models can directly use proxies.",[953,112791,112793],{"id":112792},"new-docking-system","NEW DOCKING SYSTEM",[925,112795,112796],{},"Panels in Ext JS can have widgets such as toolbars arranged on the outside of the area known as the content body with the component layout known as Dock.",[925,112798,112799],{},[963,112800],{"alt":112801,"src":112802},"Docking system","https:\u002F\u002Ffarm9.staticflickr.com\u002F8675\u002F15447035404_de42585cd0_n.jpg",[953,112804,112806],{"id":112805},"grid-panel-improvements","Grid panel improvements",[925,112808,112809,112810,112813],{},"New feature ",[1107,112811,112812],{},"infinite grid",", allows you to paginate through large datasets without having to include a paging toolbar. Following figure shows the Grid panel's areas of functionality.",[925,112815,112816],{},[963,112817],{"alt":112818,"src":112819},"Grid panel","https:\u002F\u002Ffarm8.staticflickr.com\u002F7517\u002F15882068510_18ddc76fbf_n.jpg",[925,112821,112822],{},"This means that you have more flexibility in configuring grid panels, allowing Ext JS to implement only code that’s required. For instance, if you want to allow cell editing, you include the CellEditing plug-in in your grid panel configuration. Likewise, if you want to include drag-and-drop functionality, include the DragDrop plug-in.",[953,112824,112826],{"id":112825},"tree-panel-now-closer-to-grids","Tree panel now closer to grids",[925,112828,112829],{},"The grid and tree panels are siblings because they share the same superclass.\nHaving the grid and tree panels share the same base code means that you can have things like columns in your tree views.",[925,112831,112832],{},[963,112833],{"alt":112834,"src":112835},"Tree panel","https:\u002F\u002Ffarm8.staticflickr.com\u002F7513\u002F15447060734_97b617cd9b_s.jpg",[925,112837,112838],{},"That said, the tree panel doesn’t contain a lot of the functionality that the grid panel sports, such as the summary row plug-in or column locking. Besides, the tree panel must use the TreeStore class from the data package to manage and display hierarchical data.",[953,112840,112842],{"id":112841},"bundled-packaging-tool","Bundled packaging tool",[925,112844,112845],{},"Ext JS 4.0 comes with a dynamic class-loading system. The class loader is a great solution for internet-based Ext JS applications.",[925,112847,112848],{},"Sencha now includes its popular JSBuilder tool.",{"title":998,"searchDepth":1012,"depth":1012,"links":112850},[112851,112852,112853,112854,112855,112856,112857,112858,112859,112860,112861,112862,112863,112864,112865,112866],{"id":112645,"depth":1012,"text":112646},{"id":112652,"depth":1012,"text":112653},{"id":112659,"depth":1012,"text":112660},{"id":112666,"depth":1012,"text":112667},{"id":112681,"depth":1012,"text":112682},{"id":112705,"depth":1012,"text":112706},{"id":112712,"depth":1012,"text":112713},{"id":112719,"depth":1012,"text":112720},{"id":112726,"depth":1012,"text":112727},{"id":33844,"depth":1012,"text":112733},{"id":112744,"depth":1012,"text":112745},{"id":112769,"depth":1012,"text":112770},{"id":112792,"depth":1012,"text":112793},{"id":112805,"depth":1012,"text":112806},{"id":112825,"depth":1012,"text":112826},{"id":112841,"depth":1012,"text":112842},"2014-12-21","\u002Fimages\u002Fblog\u002Ffeatures\u002Fext-js-introduction.jpg",{},{"title":273,"description":275},"blog\u002Fext-js-introduction",[16,17,271],"_CUG9a3YgKQjc51OMNUEFVoc0Mt_mGHZhB_gtabfXdw",{"id":112875,"title":336,"author":920,"body":112876,"date":113535,"description":338,"extension":1591,"image":113536,"meta":113537,"navigation":1050,"path":337,"seo":113538,"stem":113539,"tags":113540,"__hash__":113541},"blog\u002Fblog\u002Fgoogle-drive-authentication.md",{"type":922,"value":112877,"toc":113513},[112878,112882,112885,112888,112905,112911,112913,112916,112919,112933,112936,112950,112954,112957,112961,112967,112973,112977,112990,112996,113000,113010,113016,113020,113023,113029,113033,113039,113043,113046,113052,113056,113059,113091,113094,113107,113111,113114,113138,113141,113145,113148,113203,113206,113210,113213,113227,113230,113265,113268,113272,113275,113330,113334,113337,113368,113372,113375,113384,113389,113393,113396,113428,113432,113435,113460,113463,113467,113470,113474,113477,113507,113510],[953,112879,112881],{"id":112880},"storing-pictures","Storing Pictures",[925,112883,112884],{},"We’re building an application where users can upload, share, and save pictures. We want to store all our user’s pictures on their personal Drive account.",[925,112886,112887],{},"Using the Drive API, we can:",[1530,112889,112890,112893,112896,112899,112902],{},[974,112891,112892],{},"Programmatically upload and download files",[974,112894,112895],{},"Store application data",[974,112897,112898],{},"Manage permissions",[974,112900,112901],{},"Receive push notifications",[974,112903,112904],{},"And much more ..",[925,112906,112907],{},[963,112908],{"alt":112909,"src":112910},"Google Drive upload","https:\u002F\u002Ffarm9.staticflickr.com\u002F8678\u002F16008089462_898a0cd206_o.png",[953,112912,1714],{"id":1713},[925,112914,112915],{},"Here are the steps we need to get our app up and running. The steps below will be explained further, but the overview goes as below.",[925,112917,112918],{},"On Google’s website...",[1530,112920,112921,112924,112927,112930],{},[974,112922,112923],{},"Create a New API Project",[974,112925,112926],{},"Enable the Drive API",[974,112928,112929],{},"Register a New Application",[974,112931,112932],{},"Customize the Consent Screen",[925,112934,112935],{},"In our application...",[1530,112937,112938,112941,112944,112947],{},[974,112939,112940],{},"Install the Google Client Library",[974,112942,112943],{},"Create a Client Object",[974,112945,112946],{},"Get Authorization from the User",[974,112948,112949],{},"Make API calls to the User’s Drive",[953,112951,112953],{"id":112952},"we-need-to-tell-google-about-our-app","We Need to Tell Google About Our App",[925,112955,112956],{},"We need a client ID so communication can happen between our app and each user’s Drive account.",[953,112958,112960],{"id":112959},"creating-a-new-api-project","Creating a New API Project",[925,112962,35079,112963,112966],{},[1107,112964,112965],{},"Google Developers Console","\"Google Developers Console, create a new API Project.",[925,112968,112969],{},[963,112970],{"alt":112971,"src":112972},"New project","https:\u002F\u002Ffarm8.staticflickr.com\u002F7532\u002F16008892235_5d52bd2f01_n.jpg",[953,112974,112976],{"id":112975},"enabling-the-drive-api-sdk","Enabling the Drive API & SDK",[925,112978,112979,112980,112983,112984,2034,112987,948],{},"In the sidebar, goto ",[1107,112981,112982],{},"APIs & auth > APIs"," then enable the ",[1107,112985,112986],{},"Drive API",[1107,112988,112989],{},"Drive SDK",[925,112991,112992],{},[963,112993],{"alt":112994,"src":112995},"APIs & auth","https:\u002F\u002Ffarm9.staticflickr.com\u002F8659\u002F15822898489_5ab098131a_n.jpg",[953,112997,112999],{"id":112998},"creating-a-new-oauth-client-id","Creating a New OAuth Client ID",[925,113001,113002,113003,113006,113007,948],{},"Goto ",[1107,113004,113005],{},"APIs & auth > Credentials"," then click ",[1107,113008,113009],{},"CREATE NEW CLIENT ID",[925,113011,113012],{},[963,113013],{"alt":113014,"src":113015},"Credentials","https:\u002F\u002Ffarm9.staticflickr.com\u002F8652\u002F16008917465_a1ff04ae18_n.jpg",[953,113017,113019],{"id":113018},"specifying-a-redirect-uri","Specifying a Redirect URI",[925,113021,113022],{},"Below the OAuth 2.0 credentials, we can specify a Redirect URI. This is the page in our\napplication that Google will redirect users to after they authenticate.",[925,113024,113025],{},[963,113026],{"alt":113027,"src":113028},"Redirect URI","https:\u002F\u002Ffarm8.staticflickr.com\u002F7516\u002F15389297733_094e56a23f_n.jpg",[953,113030,113032],{"id":113031},"the-page-will-now-show-our-newly-created-client-id","The page will now show our newly created Client ID!",[925,113034,113035],{},[963,113036],{"alt":113037,"src":113038},"Client ID","https:\u002F\u002Ffarm8.staticflickr.com\u002F7514\u002F15822924949_1bd82653c8_n.jpg",[953,113040,113042],{"id":113041},"customizing-the-consent-screen","Customizing the Consent Screen",[925,113044,113045],{},"On APIs & auth > Consent screen, we can customize the information and logo on the\nconsent screen the user sees when prompted to authorize our application.",[925,113047,113048],{},[963,113049],{"alt":113050,"src":113051},"Consent","https:\u002F\u002Ffarm8.staticflickr.com\u002F7558\u002F15821545848_fe7ee7ac23_n.jpg",[953,113053,113055],{"id":113054},"installing-the-ruby-client-library","Installing the Ruby Client Library",[925,113057,113058],{},"Manually install in the gem:",[993,113060,113062],{"className":1797,"code":113061,"language":1799,"meta":998,"style":998},"gem install google-api-client```\n\nOr, if using Bundler, add to your Gemfile:\n\n```sh\ngem 'google-api-client'\n",[941,113063,113064,113069,113073,113078,113082,113086],{"__ignoreMap":998},[1002,113065,113066],{"class":1004,"line":1005},[1002,113067,113068],{},"gem install google-api-client```\n",[1002,113070,113071],{"class":1004,"line":1012},[1002,113072,1051],{"emptyLinePlaceholder":1050},[1002,113074,113075],{"class":1004,"line":1047},[1002,113076,113077],{},"Or, if using Bundler, add to your Gemfile:\n",[1002,113079,113080],{"class":1004,"line":1054},[1002,113081,1051],{"emptyLinePlaceholder":1050},[1002,113083,113084],{"class":1004,"line":1060},[1002,113085,106084],{},[1002,113087,113088],{"class":1004,"line":1272},[1002,113089,113090],{},"gem 'google-api-client'\n",[925,113092,113093],{},"Then, require it in your application:",[993,113095,113097],{"className":995,"code":113096,"language":997,"meta":998,"style":998},"require 'google\u002Fapi_client'\n",[941,113098,113099],{"__ignoreMap":998},[1002,113100,113101,113104],{"class":1004,"line":1005},[1002,113102,113103],{"class":1030},"require ",[1002,113105,113106],{"class":1034},"'google\u002Fapi_client'\n",[953,113108,113110],{"id":113109},"creating-a-client-object","Creating a Client Object",[925,113112,113113],{},"With the initial setup done, we can create a client object:",[993,113115,113117],{"className":995,"code":113116,"language":997,"meta":998,"style":998},"require 'google\u002Fapi_client'\nclient = Google::APIClient.new\n",[941,113118,113119,113125],{"__ignoreMap":998},[1002,113120,113121,113123],{"class":1004,"line":1005},[1002,113122,113103],{"class":1030},[1002,113124,113106],{"class":1034},[1002,113126,113127,113130,113132,113135],{"class":1004,"line":1012},[1002,113128,113129],{"class":1030},"client ",[1002,113131,2393],{"class":1015},[1002,113133,113134],{"class":1026}," Google",[1002,113136,113137],{"class":1030},"::APIClient.new\n",[925,113139,113140],{},"this is what we’ll be making our API calls on.",[953,113142,113144],{"id":113143},"setting-client-credentials","Setting Client Credentials",[925,113146,113147],{},"In your application, set the Client ID, Client Secret, and Redirect URI on the client\nwe created earlier.",[993,113149,113151],{"className":995,"code":113150,"language":997,"meta":998,"style":998},"require 'google\u002Fapi_client'\n\nclient = Google::APIClient.new\nclient.authorization.client_id = CLIENT_ID\nclient.authorization.client_secret = CLIENT_SECRET\nclient.authorization.redirect_uri = REDIRECT_URI\n",[941,113152,113153,113159,113163,113173,113183,113193],{"__ignoreMap":998},[1002,113154,113155,113157],{"class":1004,"line":1005},[1002,113156,113103],{"class":1030},[1002,113158,113106],{"class":1034},[1002,113160,113161],{"class":1004,"line":1012},[1002,113162,1051],{"emptyLinePlaceholder":1050},[1002,113164,113165,113167,113169,113171],{"class":1004,"line":1047},[1002,113166,113129],{"class":1030},[1002,113168,2393],{"class":1015},[1002,113170,113134],{"class":1026},[1002,113172,113137],{"class":1030},[1002,113174,113175,113178,113180],{"class":1004,"line":1054},[1002,113176,113177],{"class":1030},"client.authorization.client_id ",[1002,113179,2393],{"class":1015},[1002,113181,113182],{"class":1019}," CLIENT_ID\n",[1002,113184,113185,113188,113190],{"class":1004,"line":1060},[1002,113186,113187],{"class":1030},"client.authorization.client_secret ",[1002,113189,2393],{"class":1015},[1002,113191,113192],{"class":1019}," CLIENT_SECRET\n",[1002,113194,113195,113198,113200],{"class":1004,"line":1272},[1002,113196,113197],{"class":1030},"client.authorization.redirect_uri ",[1002,113199,2393],{"class":1015},[1002,113201,113202],{"class":1019}," REDIRECT_URI\n",[925,113204,113205],{},"set these to the values\nshown in the Console",[953,113207,113209],{"id":113208},"what-do-we-want-access-to","What do we want access to?",[925,113211,113212],{},"We are about to request access to a user’s Drive account, but we need to specify\nwhat we want access to do?",[1530,113214,113215,113218,113221,113224],{},[974,113216,113217],{},"Create, edit, and delete files that your application has created",[974,113219,113220],{},"Read only access",[974,113222,113223],{},"Full access to all files",[974,113225,113226],{},"A few others",[925,113228,113229],{},"Authorization scopes are used to request different levels of access to a user’s Drive.",[39742,113231,90884,113232],{},[39759,113233,113234,90884,113242,90884,113250,90884,113257],{},[39748,113235,113236,113239],{},[39764,113237,113238],{},"**Scope**",[39764,113240,113241],{},"**Meaning**",[39748,113243,113244,113247],{},[39764,113245,113246],{},"https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive.file",[39764,113248,113249],{},"Per-file access to files uploaded through the API",[39748,113251,113252,113255],{},[39764,113253,113254],{},"https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive",[39764,113256,113249],{},[39748,113258,113259,113262],{},[39764,113260,113261],{},"https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive.readonly",[39764,113263,113264],{},"Read-only access to file metadata and file content",[925,113266,113267],{},"Use only if necessary — request the minimum level of access your app needs",[953,113269,113271],{"id":113270},"specifying-a-scope","Specifying a Scope",[925,113273,113274],{},"We want to be able to read and modify files uploaded by our application, so we’ll use the drive.file scope.",[993,113276,113278],{"className":995,"code":113277,"language":997,"meta":998,"style":998},"require 'google\u002Fapi_client'\nclient = Google::APIClient.new\nclient.authorization.client_id = CLIENT_ID\nclient.authorization.client_secret = CLIENT_SECRET\nclient.authorization.redirect_uri = REDIRECT_URI\nclient.authorization.scope = 'https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive.file'\n",[941,113279,113280,113286,113296,113304,113312,113320],{"__ignoreMap":998},[1002,113281,113282,113284],{"class":1004,"line":1005},[1002,113283,113103],{"class":1030},[1002,113285,113106],{"class":1034},[1002,113287,113288,113290,113292,113294],{"class":1004,"line":1012},[1002,113289,113129],{"class":1030},[1002,113291,2393],{"class":1015},[1002,113293,113134],{"class":1026},[1002,113295,113137],{"class":1030},[1002,113297,113298,113300,113302],{"class":1004,"line":1047},[1002,113299,113177],{"class":1030},[1002,113301,2393],{"class":1015},[1002,113303,113182],{"class":1019},[1002,113305,113306,113308,113310],{"class":1004,"line":1054},[1002,113307,113187],{"class":1030},[1002,113309,2393],{"class":1015},[1002,113311,113192],{"class":1019},[1002,113313,113314,113316,113318],{"class":1004,"line":1060},[1002,113315,113197],{"class":1030},[1002,113317,2393],{"class":1015},[1002,113319,113202],{"class":1019},[1002,113321,113322,113325,113327],{"class":1004,"line":1272},[1002,113323,113324],{"class":1030},"client.authorization.scope ",[1002,113326,2393],{"class":1015},[1002,113328,113329],{"class":1034}," 'https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive.file'\n",[953,113331,113333],{"id":113332},"multiple-scopes","Multiple Scopes",[925,113335,113336],{},"You can also set multiple scopes. Just make sure you request them all upfront, or else we’ll have to authenticate again.",[993,113338,113340],{"className":995,"code":113339,"language":997,"meta":998,"style":998},"client.authorization.scope = [\n 'https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive.file',\n 'https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive.appdata',\n];\n",[941,113341,113342,113350,113357,113364],{"__ignoreMap":998},[1002,113343,113344,113346,113348],{"class":1004,"line":1005},[1002,113345,113324],{"class":1030},[1002,113347,2393],{"class":1015},[1002,113349,10274],{"class":1030},[1002,113351,113352,113355],{"class":1004,"line":1012},[1002,113353,113354],{"class":1034}," 'https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive.file'",[1002,113356,1143],{"class":1030},[1002,113358,113359,113362],{"class":1004,"line":1047},[1002,113360,113361],{"class":1034}," 'https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive.appdata'",[1002,113363,1143],{"class":1030},[1002,113365,113366],{"class":1004,"line":1054},[1002,113367,6754],{"class":1030},[953,113369,113371],{"id":113370},"prompting-the-user","Prompting the User",[925,113373,113374],{},"Send the user to client.authorization.authorization_uri in their browser.",[993,113376,113378],{"className":995,"code":113377,"language":997,"meta":998,"style":998},"redirect_to client.authorization.authorization_uri\n",[941,113379,113380],{"__ignoreMap":998},[1002,113381,113382],{"class":1004,"line":1005},[1002,113383,113377],{"class":1030},[925,113385,113386],{},[963,113387],{"alt":113371,"src":113388},"https:\u002F\u002Ffarm9.staticflickr.com\u002F8578\u002F15841099047_1920a18121_n.jpg",[953,113390,113392],{"id":113391},"obtaining-an-authorization-code","Obtaining an Authorization Code",[925,113394,113395],{},"If the user accepts the authorization prompt, they’ll be sent back to our site at the Redirect URI we set earlier with an authorization code. Set that code on our client object.",[993,113397,113399],{"className":995,"code":113398,"language":997,"meta":998,"style":998},"# https:\u002F\u002Fexample.com\u002Fcode?state=\u002Fprofile&code=4\u002FP5qf21TgYWE15-15fWE62\nclient.code = params[:code] if params[:code]\n",[941,113400,113401,113413],{"__ignoreMap":998},[1002,113402,113403,113406,113408,113410],{"class":1004,"line":1005},[1002,113404,113405],{"class":1030},"# ",[1002,113407,31951],{"class":1026},[1002,113409,1813],{"class":1030},[1002,113411,113412],{"class":1008},"\u002F\u002Fexample.com\u002Fcode?state=\u002Fprofile&code=4\u002FP5qf21TgYWE15-15fWE62\n",[1002,113414,113415,113418,113420,113423,113425],{"class":1004,"line":1012},[1002,113416,113417],{"class":1030},"client.code ",[1002,113419,2393],{"class":1015},[1002,113421,113422],{"class":1030}," params[:code] ",[1002,113424,46126],{"class":1015},[1002,113426,113427],{"class":1030}," params[:code]\n",[953,113429,113431],{"id":113430},"fetching-an-access-token","Fetching an Access Token",[925,113433,113434],{},"The fetch_access_token! method populates our client object with the access_token, which is what grants us access to the user’s Drive.",[993,113436,113438],{"className":995,"code":113437,"language":997,"meta":998,"style":998},"client.code = params[:code] if params[:code]\nclient.fetch_access_token!\n",[941,113439,113440,113452],{"__ignoreMap":998},[1002,113441,113442,113444,113446,113448,113450],{"class":1004,"line":1005},[1002,113443,113417],{"class":1030},[1002,113445,2393],{"class":1015},[1002,113447,113422],{"class":1030},[1002,113449,46126],{"class":1015},[1002,113451,113427],{"class":1030},[1002,113453,113454,113457],{"class":1004,"line":1012},[1002,113455,113456],{"class":1030},"client.fetch_access_token",[1002,113458,113459],{"class":1015},"!\n",[925,113461,113462],{},"We are now authorized! It also sets the refresh_token (plus expires_in and issued_at), which we can use later to request a new access_token when it expires.",[953,113464,113466],{"id":113465},"an-easier-way","An Easier Way",[925,113468,113469],{},"Libraries are available that simplify authorization, such as the omniauth-google-oauth2 gem by Josh Ellithorpe.",[953,113471,113473],{"id":113472},"loading-api-definitions","Loading API Definitions",[925,113475,113476],{},"We need to load the Drive API definitions to call Drive API methods.",[993,113478,113480],{"className":995,"code":113479,"language":997,"meta":998,"style":998},"drive = client.discovered_api('drive', 'v2');\n",[941,113481,113482],{"__ignoreMap":998},[1002,113483,113484,113487,113489,113492,113495,113497,113500,113502,113505],{"class":1004,"line":1005},[1002,113485,113486],{"class":1030},"drive ",[1002,113488,2393],{"class":1015},[1002,113490,113491],{"class":1030}," client.",[1002,113493,113494],{"class":1026},"discovered_api",[1002,113496,1031],{"class":1030},[1002,113498,113499],{"class":1034},"'drive'",[1002,113501,1251],{"class":1030},[1002,113503,113504],{"class":1034},"'v2'",[1002,113506,1085],{"class":1030},[925,113508,113509],{},"This drive object we’ve created contains all the methods we can use with the Drive API (e.g. drive.files.insert).",[1579,113511,113512],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":113514},[113515,113516,113517,113518,113519,113520,113521,113522,113523,113524,113525,113526,113527,113528,113529,113530,113531,113532,113533,113534],{"id":112880,"depth":1012,"text":112881},{"id":1713,"depth":1012,"text":1714},{"id":112952,"depth":1012,"text":112953},{"id":112959,"depth":1012,"text":112960},{"id":112975,"depth":1012,"text":112976},{"id":112998,"depth":1012,"text":112999},{"id":113018,"depth":1012,"text":113019},{"id":113031,"depth":1012,"text":113032},{"id":113041,"depth":1012,"text":113042},{"id":113054,"depth":1012,"text":113055},{"id":113109,"depth":1012,"text":113110},{"id":113143,"depth":1012,"text":113144},{"id":113208,"depth":1012,"text":113209},{"id":113270,"depth":1012,"text":113271},{"id":113332,"depth":1012,"text":113333},{"id":113370,"depth":1012,"text":113371},{"id":113391,"depth":1012,"text":113392},{"id":113430,"depth":1012,"text":113431},{"id":113465,"depth":1012,"text":113466},{"id":113472,"depth":1012,"text":113473},"2014-12-14","\u002Fimages\u002Fblog\u002Ffeatures\u002Fgoogle-drive-authentication.jpg",{},{"title":336,"description":338},"blog\u002Fgoogle-drive-authentication",[16,17],"-tsU3ublwx0OiDDomHeQ6gcLLXrobzSITIsFXlOSGG4",{"id":113543,"title":63,"author":920,"body":113544,"date":114790,"description":65,"extension":1591,"image":114791,"meta":114792,"navigation":1050,"path":64,"seo":114793,"stem":114794,"tags":114795,"__hash__":114796},"blog\u002Fblog\u002Fbackbone-routers.md",{"type":922,"value":113545,"toc":114782},[113546,113549,113553,113556,113672,113675,113700,113706,113728,113733,113736,113832,113835,113931,113937,113941,113944,113949,113952,113957,114064,114067,114072,114076,114079,114159,114164,114170,114175,114181,114184,114281,114284,114326,114329,114437,114440,114444,114447,114452,114457,114460,114484,114487,114513,114517,114520,114615,114618,114623,114627,114630,114743,114745,114754,114757,114779],[925,113547,113548],{},"Defined routers should always contain at least one route and a function to map the particular route to. In the example below, we are going to define a route that is always called.",[953,113550,113552],{"id":113551},"optional-routes","Optional Routes",[925,113554,113555],{},"Search route with query and optional page parameter is an optional route.",[993,113557,113559],{"className":995,"code":113558,"language":997,"meta":998,"style":998},"var TodoRouter = new (Backbone.Router.extend({\n routes: {\n 'search\u002F:query': 'search',\n 'search\u002F:query\u002Fp:page': 'search',\n },\n search: function (query, page) {\n page = page || 0;\n console.log(query);\n console.log(page);\n },\n}))();\n",[941,113560,113561,113579,113584,113595,113606,113610,113629,113645,113654,113663,113667],{"__ignoreMap":998},[1002,113562,113563,113565,113568,113570,113572,113575,113577],{"class":1004,"line":1005},[1002,113564,18311],{"class":1015},[1002,113566,113567],{"class":1030}," TodoRouter ",[1002,113569,2393],{"class":1015},[1002,113571,2690],{"class":1015},[1002,113573,113574],{"class":1030}," (Backbone.Router.",[1002,113576,106592],{"class":1026},[1002,113578,2756],{"class":1030},[1002,113580,113581],{"class":1004,"line":1012},[1002,113582,113583],{"class":1030}," routes: {\n",[1002,113585,113586,113589,113591,113593],{"class":1004,"line":1047},[1002,113587,113588],{"class":1034}," 'search\u002F:query'",[1002,113590,1137],{"class":1030},[1002,113592,73708],{"class":1034},[1002,113594,1143],{"class":1030},[1002,113596,113597,113600,113602,113604],{"class":1004,"line":1054},[1002,113598,113599],{"class":1034}," 'search\u002F:query\u002Fp:page'",[1002,113601,1137],{"class":1030},[1002,113603,73708],{"class":1034},[1002,113605,1143],{"class":1030},[1002,113607,113608],{"class":1004,"line":1060},[1002,113609,1502],{"class":1030},[1002,113611,113612,113615,113617,113619,113621,113623,113625,113627],{"class":1004,"line":1272},[1002,113613,113614],{"class":1026}," search",[1002,113616,1137],{"class":1030},[1002,113618,6965],{"class":1015},[1002,113620,6513],{"class":1030},[1002,113622,14980],{"class":2378},[1002,113624,1251],{"class":1030},[1002,113626,71715],{"class":2378},[1002,113628,2382],{"class":1030},[1002,113630,113631,113634,113636,113639,113641,113643],{"class":1004,"line":1348},[1002,113632,113633],{"class":1030}," page ",[1002,113635,2393],{"class":1015},[1002,113637,113638],{"class":1030}," page ",[1002,113640,8392],{"class":1015},[1002,113642,4910],{"class":1019},[1002,113644,1407],{"class":1030},[1002,113646,113647,113649,113651],{"class":1004,"line":1354},[1002,113648,3030],{"class":1030},[1002,113650,2886],{"class":1026},[1002,113652,113653],{"class":1030},"(query);\n",[1002,113655,113656,113658,113660],{"class":1004,"line":1360},[1002,113657,3030],{"class":1030},[1002,113659,2886],{"class":1026},[1002,113661,113662],{"class":1030},"(page);\n",[1002,113664,113665],{"class":1004,"line":1366},[1002,113666,1502],{"class":1030},[1002,113668,113669],{"class":1004,"line":1946},[1002,113670,113671],{"class":1030},"}))();\n",[925,113673,113674],{},"Results:",[993,113676,113678],{"className":995,"code":113677,"language":997,"meta":998,"style":998},"TodoRouter.navigate('search\u002Fmilk', { trigger: true });\n",[941,113679,113680],{"__ignoreMap":998},[1002,113681,113682,113685,113688,113690,113693,113696,113698],{"class":1004,"line":1005},[1002,113683,113684],{"class":1030},"TodoRouter.",[1002,113686,113687],{"class":1026},"navigate",[1002,113689,1031],{"class":1030},[1002,113691,113692],{"class":1034},"'search\u002Fmilk'",[1002,113694,113695],{"class":1030},", { trigger: ",[1002,113697,17397],{"class":1019},[1002,113699,28417],{"class":1030},[925,113701,113702,113703],{},"This will print ",[941,113704,113705],{},"\"milk\", 0",[993,113707,113709],{"className":995,"code":113708,"language":997,"meta":998,"style":998},"TodoRouter.navigate('search\u002Fmilk\u002Fp2', { trigger: true });\n",[941,113710,113711],{"__ignoreMap":998},[1002,113712,113713,113715,113717,113719,113722,113724,113726],{"class":1004,"line":1005},[1002,113714,113684],{"class":1030},[1002,113716,113687],{"class":1026},[1002,113718,1031],{"class":1030},[1002,113720,113721],{"class":1034},"'search\u002Fmilk\u002Fp2'",[1002,113723,113695],{"class":1030},[1002,113725,17397],{"class":1019},[1002,113727,28417],{"class":1030},[925,113729,113702,113730],{},[941,113731,113732],{},"\"milk\", 2",[925,113734,113735],{},"Note the duplicate routes are highlighted. We can resolve this issue with an optional route:",[993,113737,113739],{"className":995,"code":113738,"language":997,"meta":998,"style":998},"var TodoRouter = new (Backbone.Router.extend({\n routes: {\n 'search\u002F:query \u002Fp:page ': 'search',\n },\n search: function (query, page) {\n page = page || 0;\n console.log(query);\n console.log(page);\n },\n}))();\n",[941,113740,113741,113757,113761,113772,113776,113794,113808,113816,113824,113828],{"__ignoreMap":998},[1002,113742,113743,113745,113747,113749,113751,113753,113755],{"class":1004,"line":1005},[1002,113744,18311],{"class":1015},[1002,113746,113567],{"class":1030},[1002,113748,2393],{"class":1015},[1002,113750,2690],{"class":1015},[1002,113752,113574],{"class":1030},[1002,113754,106592],{"class":1026},[1002,113756,2756],{"class":1030},[1002,113758,113759],{"class":1004,"line":1012},[1002,113760,113583],{"class":1030},[1002,113762,113763,113766,113768,113770],{"class":1004,"line":1047},[1002,113764,113765],{"class":1034}," 'search\u002F:query \u002Fp:page '",[1002,113767,1137],{"class":1030},[1002,113769,73708],{"class":1034},[1002,113771,1143],{"class":1030},[1002,113773,113774],{"class":1004,"line":1054},[1002,113775,1502],{"class":1030},[1002,113777,113778,113780,113782,113784,113786,113788,113790,113792],{"class":1004,"line":1060},[1002,113779,113614],{"class":1026},[1002,113781,1137],{"class":1030},[1002,113783,6965],{"class":1015},[1002,113785,6513],{"class":1030},[1002,113787,14980],{"class":2378},[1002,113789,1251],{"class":1030},[1002,113791,71715],{"class":2378},[1002,113793,2382],{"class":1030},[1002,113795,113796,113798,113800,113802,113804,113806],{"class":1004,"line":1272},[1002,113797,113633],{"class":1030},[1002,113799,2393],{"class":1015},[1002,113801,113638],{"class":1030},[1002,113803,8392],{"class":1015},[1002,113805,4910],{"class":1019},[1002,113807,1407],{"class":1030},[1002,113809,113810,113812,113814],{"class":1004,"line":1348},[1002,113811,3030],{"class":1030},[1002,113813,2886],{"class":1026},[1002,113815,113653],{"class":1030},[1002,113817,113818,113820,113822],{"class":1004,"line":1354},[1002,113819,3030],{"class":1030},[1002,113821,2886],{"class":1026},[1002,113823,113662],{"class":1030},[1002,113825,113826],{"class":1004,"line":1360},[1002,113827,1502],{"class":1030},[1002,113829,113830],{"class":1004,"line":1366},[1002,113831,113671],{"class":1030},[925,113833,113834],{},"What if we want to match ‘search\u002Fmilk\u002Fp2\u002F’?",[993,113836,113838],{"className":995,"code":113837,"language":997,"meta":998,"style":998},"var TodoRouter = new (Backbone.Router.extend({\n routes: {\n 'search\u002F:query (\u002Fp:page)(\u002F) ': 'search',\n },\n search: function (query, page) {\n page = page || 0;\n console.log(query);\n console.log(page);\n },\n}))();\n",[941,113839,113840,113856,113860,113871,113875,113893,113907,113915,113923,113927],{"__ignoreMap":998},[1002,113841,113842,113844,113846,113848,113850,113852,113854],{"class":1004,"line":1005},[1002,113843,18311],{"class":1015},[1002,113845,113567],{"class":1030},[1002,113847,2393],{"class":1015},[1002,113849,2690],{"class":1015},[1002,113851,113574],{"class":1030},[1002,113853,106592],{"class":1026},[1002,113855,2756],{"class":1030},[1002,113857,113858],{"class":1004,"line":1012},[1002,113859,113583],{"class":1030},[1002,113861,113862,113865,113867,113869],{"class":1004,"line":1047},[1002,113863,113864],{"class":1034}," 'search\u002F:query (\u002Fp:page)(\u002F) '",[1002,113866,1137],{"class":1030},[1002,113868,73708],{"class":1034},[1002,113870,1143],{"class":1030},[1002,113872,113873],{"class":1004,"line":1054},[1002,113874,1502],{"class":1030},[1002,113876,113877,113879,113881,113883,113885,113887,113889,113891],{"class":1004,"line":1060},[1002,113878,113614],{"class":1026},[1002,113880,1137],{"class":1030},[1002,113882,6965],{"class":1015},[1002,113884,6513],{"class":1030},[1002,113886,14980],{"class":2378},[1002,113888,1251],{"class":1030},[1002,113890,71715],{"class":2378},[1002,113892,2382],{"class":1030},[1002,113894,113895,113897,113899,113901,113903,113905],{"class":1004,"line":1272},[1002,113896,113633],{"class":1030},[1002,113898,2393],{"class":1015},[1002,113900,113638],{"class":1030},[1002,113902,8392],{"class":1015},[1002,113904,4910],{"class":1019},[1002,113906,1407],{"class":1030},[1002,113908,113909,113911,113913],{"class":1004,"line":1348},[1002,113910,3030],{"class":1030},[1002,113912,2886],{"class":1026},[1002,113914,113653],{"class":1030},[1002,113916,113917,113919,113921],{"class":1004,"line":1354},[1002,113918,3030],{"class":1030},[1002,113920,2886],{"class":1026},[1002,113922,113662],{"class":1030},[1002,113924,113925],{"class":1004,"line":1360},[1002,113926,1502],{"class":1030},[1002,113928,113929],{"class":1004,"line":1366},[1002,113930,113671],{"class":1030},[925,113932,113933,113934],{},"We can use an optional trailing slash ",[941,113935,113936],{},"(\u002F)",[953,113938,113940],{"id":113939},"uri-with-spaces","URI with Spaces",[925,113942,113943],{},"What if the URI you provide has encoded spaces?",[925,113945,113946],{},[941,113947,113948],{},"To doRouter.navigate('search\u002FHello%20World\u002Fp2', {trigger: true})",[925,113950,113951],{},"You will get the following result, which is not decoded:",[925,113953,113954],{},[941,113955,113956],{},"\"Hello%20World\", 2",[993,113958,113960],{"className":995,"code":113959,"language":997,"meta":998,"style":998},"var TodoRouter = new (Backbone.Router.extend({\n routes: {\n 'search\u002F:query (\u002Fp:page)(\u002F) ': 'search',\n },\n search: function (query, page) {\n page = page || 0;\n query = decodeURIComponent(query);\n console.log(query);\n console.log(page);\n },\n}))();\n",[941,113961,113962,113978,113982,113992,113996,114014,114028,114040,114048,114056,114060],{"__ignoreMap":998},[1002,113963,113964,113966,113968,113970,113972,113974,113976],{"class":1004,"line":1005},[1002,113965,18311],{"class":1015},[1002,113967,113567],{"class":1030},[1002,113969,2393],{"class":1015},[1002,113971,2690],{"class":1015},[1002,113973,113574],{"class":1030},[1002,113975,106592],{"class":1026},[1002,113977,2756],{"class":1030},[1002,113979,113980],{"class":1004,"line":1012},[1002,113981,113583],{"class":1030},[1002,113983,113984,113986,113988,113990],{"class":1004,"line":1047},[1002,113985,113864],{"class":1034},[1002,113987,1137],{"class":1030},[1002,113989,73708],{"class":1034},[1002,113991,1143],{"class":1030},[1002,113993,113994],{"class":1004,"line":1054},[1002,113995,1502],{"class":1030},[1002,113997,113998,114000,114002,114004,114006,114008,114010,114012],{"class":1004,"line":1060},[1002,113999,113614],{"class":1026},[1002,114001,1137],{"class":1030},[1002,114003,6965],{"class":1015},[1002,114005,6513],{"class":1030},[1002,114007,14980],{"class":2378},[1002,114009,1251],{"class":1030},[1002,114011,71715],{"class":2378},[1002,114013,2382],{"class":1030},[1002,114015,114016,114018,114020,114022,114024,114026],{"class":1004,"line":1272},[1002,114017,113633],{"class":1030},[1002,114019,2393],{"class":1015},[1002,114021,113638],{"class":1030},[1002,114023,8392],{"class":1015},[1002,114025,4910],{"class":1019},[1002,114027,1407],{"class":1030},[1002,114029,114030,114033,114035,114038],{"class":1004,"line":1348},[1002,114031,114032],{"class":1030}," query ",[1002,114034,2393],{"class":1015},[1002,114036,114037],{"class":1026}," decodeURIComponent",[1002,114039,113653],{"class":1030},[1002,114041,114042,114044,114046],{"class":1004,"line":1354},[1002,114043,3030],{"class":1030},[1002,114045,2886],{"class":1026},[1002,114047,113653],{"class":1030},[1002,114049,114050,114052,114054],{"class":1004,"line":1360},[1002,114051,3030],{"class":1030},[1002,114053,2886],{"class":1026},[1002,114055,113662],{"class":1030},[1002,114057,114058],{"class":1004,"line":1366},[1002,114059,1502],{"class":1030},[1002,114061,114062],{"class":1004,"line":1946},[1002,114063,113671],{"class":1030},[925,114065,114066],{},"The result will be decoded:",[925,114068,114069],{},[941,114070,114071],{},"\"Hello World\", 2",[953,114073,114075],{"id":114074},"regex-in-routes","Regex in Routes",[925,114077,114078],{},"Say we want to restrict parameter to numeric input, let's see how can achieve this:",[993,114080,114082],{"className":995,"code":114081,"language":997,"meta":998,"style":998},"var TodoRouter = new (Backbone.Router.extend({\n routes: {\n 'todos\u002F:id': 'show',\n },\n show: function (id) {\n console.log('id = ' + id);\n },\n}))();\n",[941,114083,114084,114100,114104,114116,114120,114135,114151,114155],{"__ignoreMap":998},[1002,114085,114086,114088,114090,114092,114094,114096,114098],{"class":1004,"line":1005},[1002,114087,18311],{"class":1015},[1002,114089,113567],{"class":1030},[1002,114091,2393],{"class":1015},[1002,114093,2690],{"class":1015},[1002,114095,113574],{"class":1030},[1002,114097,106592],{"class":1026},[1002,114099,2756],{"class":1030},[1002,114101,114102],{"class":1004,"line":1012},[1002,114103,113583],{"class":1030},[1002,114105,114106,114109,114111,114114],{"class":1004,"line":1047},[1002,114107,114108],{"class":1034}," 'todos\u002F:id'",[1002,114110,1137],{"class":1030},[1002,114112,114113],{"class":1034},"'show'",[1002,114115,1143],{"class":1030},[1002,114117,114118],{"class":1004,"line":1054},[1002,114119,1502],{"class":1030},[1002,114121,114122,114125,114127,114129,114131,114133],{"class":1004,"line":1060},[1002,114123,114124],{"class":1026}," show",[1002,114126,1137],{"class":1030},[1002,114128,6965],{"class":1015},[1002,114130,6513],{"class":1030},[1002,114132,19767],{"class":2378},[1002,114134,2382],{"class":1030},[1002,114136,114137,114139,114141,114143,114146,114148],{"class":1004,"line":1272},[1002,114138,3030],{"class":1030},[1002,114140,2886],{"class":1026},[1002,114142,1031],{"class":1030},[1002,114144,114145],{"class":1034},"'id = '",[1002,114147,6583],{"class":1015},[1002,114149,114150],{"class":1030}," id);\n",[1002,114152,114153],{"class":1004,"line":1348},[1002,114154,1502],{"class":1030},[1002,114156,114157],{"class":1004,"line":1354},[1002,114158,113671],{"class":1030},[925,114160,114161],{},[941,114162,114163],{},"TodoRouter.navigate('todos\u002F2', {trigger: true})",[925,114165,114166,114167],{},"Result: ",[941,114168,114169],{},"id = 2",[925,114171,114172],{},[941,114173,114174],{},"TodoRouter.navigate('todos\u002Fnotanid', {trigger: true})",[925,114176,114177,114178],{},"Result ",[941,114179,114180],{},"id = notanid",[925,114182,114183],{},"So this shouldn’t trigger show.",[993,114185,114187],{"className":995,"code":114186,"language":997,"meta":998,"style":998},"var TodoRouter = new (Backbone.Router.extend({\n show: function (id) {\n console.log('id = ' + id);\n },\n}))();\n\nTodoRouter.route(\u002F^todos\\\u002F(\\d+)$\u002F, 'show');\n",[941,114188,114189,114205,114219,114233,114237,114241,114245],{"__ignoreMap":998},[1002,114190,114191,114193,114195,114197,114199,114201,114203],{"class":1004,"line":1005},[1002,114192,18311],{"class":1015},[1002,114194,113567],{"class":1030},[1002,114196,2393],{"class":1015},[1002,114198,2690],{"class":1015},[1002,114200,113574],{"class":1030},[1002,114202,106592],{"class":1026},[1002,114204,2756],{"class":1030},[1002,114206,114207,114209,114211,114213,114215,114217],{"class":1004,"line":1012},[1002,114208,114124],{"class":1026},[1002,114210,1137],{"class":1030},[1002,114212,6965],{"class":1015},[1002,114214,6513],{"class":1030},[1002,114216,19767],{"class":2378},[1002,114218,2382],{"class":1030},[1002,114220,114221,114223,114225,114227,114229,114231],{"class":1004,"line":1047},[1002,114222,3030],{"class":1030},[1002,114224,2886],{"class":1026},[1002,114226,1031],{"class":1030},[1002,114228,114145],{"class":1034},[1002,114230,6583],{"class":1015},[1002,114232,114150],{"class":1030},[1002,114234,114235],{"class":1004,"line":1054},[1002,114236,1502],{"class":1030},[1002,114238,114239],{"class":1004,"line":1060},[1002,114240,113671],{"class":1030},[1002,114242,114243],{"class":1004,"line":1272},[1002,114244,1051],{"emptyLinePlaceholder":1050},[1002,114246,114247,114249,114251,114253,114255,114257,114259,114262,114264,114267,114269,114271,114273,114275,114277,114279],{"class":1004,"line":1348},[1002,114248,113684],{"class":1030},[1002,114250,66565],{"class":1026},[1002,114252,1031],{"class":1030},[1002,114254,4685],{"class":1034},[1002,114256,90063],{"class":1015},[1002,114258,52300],{"class":33488},[1002,114260,114261],{"class":33484},"\\\u002F",[1002,114263,1031],{"class":33488},[1002,114265,114266],{"class":1019},"\\d",[1002,114268,5064],{"class":1015},[1002,114270,80417],{"class":33488},[1002,114272,15864],{"class":1015},[1002,114274,4685],{"class":1034},[1002,114276,1251],{"class":1030},[1002,114278,114113],{"class":1034},[1002,114280,1085],{"class":1030},[925,114282,114283],{},"Here each Regex Capture Group becomes a param.",[993,114285,114287],{"className":995,"code":114286,"language":997,"meta":998,"style":998},"TodoRouter.navigate('todos\u002F2', { trigger: true }); \u002F\u002F id = 2`\nTodoRouter.navigate('todos\u002Fnotanid', { trigger: true });\n",[941,114288,114289,114309],{"__ignoreMap":998},[1002,114290,114291,114293,114295,114297,114300,114302,114304,114306],{"class":1004,"line":1005},[1002,114292,113684],{"class":1030},[1002,114294,113687],{"class":1026},[1002,114296,1031],{"class":1030},[1002,114298,114299],{"class":1034},"'todos\u002F2'",[1002,114301,113695],{"class":1030},[1002,114303,17397],{"class":1019},[1002,114305,101247],{"class":1030},[1002,114307,114308],{"class":1008},"\u002F\u002F id = 2`\n",[1002,114310,114311,114313,114315,114317,114320,114322,114324],{"class":1004,"line":1012},[1002,114312,113684],{"class":1030},[1002,114314,113687],{"class":1026},[1002,114316,1031],{"class":1030},[1002,114318,114319],{"class":1034},"'todos\u002Fnotanid'",[1002,114321,113695],{"class":1030},[1002,114323,17397],{"class":1019},[1002,114325,28417],{"class":1030},[925,114327,114328],{},"This doesn't trigger show.",[993,114330,114332],{"className":995,"code":114331,"language":997,"meta":998,"style":998},"var TodoRouter = new (Backbone.Router.extend({\n initialize: function () {\n this.route(\u002F^todos\\\u002F(\\d+)$\u002F, 'show');\n },\n show: function (id) {\n console.log('id = ' + id);\n },\n}))();\n",[941,114333,114334,114350,114361,114397,114401,114415,114429,114433],{"__ignoreMap":998},[1002,114335,114336,114338,114340,114342,114344,114346,114348],{"class":1004,"line":1005},[1002,114337,18311],{"class":1015},[1002,114339,113567],{"class":1030},[1002,114341,2393],{"class":1015},[1002,114343,2690],{"class":1015},[1002,114345,113574],{"class":1030},[1002,114347,106592],{"class":1026},[1002,114349,2756],{"class":1030},[1002,114351,114352,114355,114357,114359],{"class":1004,"line":1012},[1002,114353,114354],{"class":1026}," initialize",[1002,114356,1137],{"class":1030},[1002,114358,6965],{"class":1015},[1002,114360,9772],{"class":1030},[1002,114362,114363,114365,114367,114369,114371,114373,114375,114377,114379,114381,114383,114385,114387,114389,114391,114393,114395],{"class":1004,"line":1047},[1002,114364,2387],{"class":1019},[1002,114366,948],{"class":1030},[1002,114368,66565],{"class":1026},[1002,114370,1031],{"class":1030},[1002,114372,4685],{"class":1034},[1002,114374,90063],{"class":1015},[1002,114376,52300],{"class":33488},[1002,114378,114261],{"class":33484},[1002,114380,1031],{"class":33488},[1002,114382,114266],{"class":1019},[1002,114384,5064],{"class":1015},[1002,114386,80417],{"class":33488},[1002,114388,15864],{"class":1015},[1002,114390,4685],{"class":1034},[1002,114392,1251],{"class":1030},[1002,114394,114113],{"class":1034},[1002,114396,1085],{"class":1030},[1002,114398,114399],{"class":1004,"line":1054},[1002,114400,1502],{"class":1030},[1002,114402,114403,114405,114407,114409,114411,114413],{"class":1004,"line":1060},[1002,114404,114124],{"class":1026},[1002,114406,1137],{"class":1030},[1002,114408,6965],{"class":1015},[1002,114410,6513],{"class":1030},[1002,114412,19767],{"class":2378},[1002,114414,2382],{"class":1030},[1002,114416,114417,114419,114421,114423,114425,114427],{"class":1004,"line":1272},[1002,114418,3030],{"class":1030},[1002,114420,2886],{"class":1026},[1002,114422,1031],{"class":1030},[1002,114424,114145],{"class":1034},[1002,114426,6583],{"class":1015},[1002,114428,114150],{"class":1030},[1002,114430,114431],{"class":1004,"line":1348},[1002,114432,1502],{"class":1030},[1002,114434,114435],{"class":1004,"line":1354},[1002,114436,113671],{"class":1030},[925,114438,114439],{},"This keeps routes inside the router.",[953,114441,114443],{"id":114442},"advanced-regex-routes","Advanced Regex Routes",[925,114445,114446],{},"Let's examine this advanced route formation:",[925,114448,114449],{},[941,114450,114451],{},"\u002F^search\\\u002F(\\w+)(?:\\\u002Fp(\\d+))?\\\u002F?$\u002F --> 'search\u002F:query(\u002Fp:page)'",[925,114453,114454],{},[963,114455],{"alt":114443,"src":114456},"https:\u002F\u002Ffarm8.staticflickr.com\u002F7575\u002F15354908123_a0f3f95a10_o.png",[925,114458,114459],{},"This router matches:",[993,114461,114463],{"className":995,"code":114462,"language":997,"meta":998,"style":998},"'search\u002Fmilk';\n'search\u002Fmilk\u002Fp2';\n'search\u002Fmilk\u002Fp2\u002F';\n",[941,114464,114465,114471,114477],{"__ignoreMap":998},[1002,114466,114467,114469],{"class":1004,"line":1005},[1002,114468,113692],{"class":1034},[1002,114470,1407],{"class":1030},[1002,114472,114473,114475],{"class":1004,"line":1012},[1002,114474,113721],{"class":1034},[1002,114476,1407],{"class":1030},[1002,114478,114479,114482],{"class":1004,"line":1047},[1002,114480,114481],{"class":1034},"'search\u002Fmilk\u002Fp2\u002F'",[1002,114483,1407],{"class":1030},[925,114485,114486],{},"But it doesn't match the following:",[993,114488,114490],{"className":995,"code":114489,"language":997,"meta":998,"style":998},"'searches\u002Fmilk';\n'search\u002Fmilk\u002Fp2\u002Fp1';\n'search\u002Fmilk\u002F2';\n",[941,114491,114492,114499,114506],{"__ignoreMap":998},[1002,114493,114494,114497],{"class":1004,"line":1005},[1002,114495,114496],{"class":1034},"'searches\u002Fmilk'",[1002,114498,1407],{"class":1030},[1002,114500,114501,114504],{"class":1004,"line":1012},[1002,114502,114503],{"class":1034},"'search\u002Fmilk\u002Fp2\u002Fp1'",[1002,114505,1407],{"class":1030},[1002,114507,114508,114511],{"class":1004,"line":1047},[1002,114509,114510],{"class":1034},"'search\u002Fmilk\u002F2'",[1002,114512,1407],{"class":1030},[953,114514,114516],{"id":114515},"catch-all-routes","Catch-all Routes",[925,114518,114519],{},"Alert user when no route matches:",[993,114521,114523],{"className":995,"code":114522,"language":997,"meta":998,"style":998},"var TodoRouter = Backbone.Router.extend({\n routes: {\n '*path': 'notFound',\n },\n notFound: function (path) {\n alert('Sorry! There is no content here.');\n },\n});\n\nTodoRouter.navigate('nothinghere', { trigger: true });\n",[941,114524,114525,114540,114544,114556,114560,114575,114586,114590,114594,114598],{"__ignoreMap":998},[1002,114526,114527,114529,114531,114533,114536,114538],{"class":1004,"line":1005},[1002,114528,18311],{"class":1015},[1002,114530,113567],{"class":1030},[1002,114532,2393],{"class":1015},[1002,114534,114535],{"class":1030}," Backbone.Router.",[1002,114537,106592],{"class":1026},[1002,114539,2756],{"class":1030},[1002,114541,114542],{"class":1004,"line":1012},[1002,114543,113583],{"class":1030},[1002,114545,114546,114549,114551,114554],{"class":1004,"line":1047},[1002,114547,114548],{"class":1034}," '*path'",[1002,114550,1137],{"class":1030},[1002,114552,114553],{"class":1034},"'notFound'",[1002,114555,1143],{"class":1030},[1002,114557,114558],{"class":1004,"line":1054},[1002,114559,1502],{"class":1030},[1002,114561,114562,114565,114567,114569,114571,114573],{"class":1004,"line":1060},[1002,114563,114564],{"class":1026}," notFound",[1002,114566,1137],{"class":1030},[1002,114568,6965],{"class":1015},[1002,114570,6513],{"class":1030},[1002,114572,64361],{"class":2378},[1002,114574,2382],{"class":1030},[1002,114576,114577,114579,114581,114584],{"class":1004,"line":1272},[1002,114578,93191],{"class":1026},[1002,114580,1031],{"class":1030},[1002,114582,114583],{"class":1034},"'Sorry! There is no content here.'",[1002,114585,1085],{"class":1030},[1002,114587,114588],{"class":1004,"line":1348},[1002,114589,1502],{"class":1030},[1002,114591,114592],{"class":1004,"line":1354},[1002,114593,2804],{"class":1030},[1002,114595,114596],{"class":1004,"line":1360},[1002,114597,1051],{"emptyLinePlaceholder":1050},[1002,114599,114600,114602,114604,114606,114609,114611,114613],{"class":1004,"line":1366},[1002,114601,113684],{"class":1030},[1002,114603,113687],{"class":1026},[1002,114605,1031],{"class":1030},[1002,114607,114608],{"class":1034},"'nothinghere'",[1002,114610,113695],{"class":1030},[1002,114612,17397],{"class":1019},[1002,114614,28417],{"class":1030},[925,114616,114617],{},"This will result in:",[925,114619,114620],{},[963,114621],{"alt":114516,"src":114622},"https:\u002F\u002Ffarm9.staticflickr.com\u002F8648\u002F15352305684_b397fc7704_o.png",[953,114624,114626],{"id":114625},"file-path-route","File Path Route",[925,114628,114629],{},"Accept a file path and get its parts",[993,114631,114633],{"className":995,"code":114632,"language":997,"meta":998,"style":998},"var TodoRouter = new (Backbone.Router.extend({\n routes: {\n 'file\u002F*path': 'file',\n },\n file: function (path) {\n var parts = path.split('\u002F');\n console.log(parts);\n },\n}))();\n\nTodoRouter.navigate('file\u002Fthis\u002Fis\u002Fa\u002Ffile.txt', { trigger: true });\n",[941,114634,114635,114651,114655,114667,114671,114686,114705,114714,114718,114722,114726],{"__ignoreMap":998},[1002,114636,114637,114639,114641,114643,114645,114647,114649],{"class":1004,"line":1005},[1002,114638,18311],{"class":1015},[1002,114640,113567],{"class":1030},[1002,114642,2393],{"class":1015},[1002,114644,2690],{"class":1015},[1002,114646,113574],{"class":1030},[1002,114648,106592],{"class":1026},[1002,114650,2756],{"class":1030},[1002,114652,114653],{"class":1004,"line":1012},[1002,114654,113583],{"class":1030},[1002,114656,114657,114660,114662,114665],{"class":1004,"line":1047},[1002,114658,114659],{"class":1034}," 'file\u002F*path'",[1002,114661,1137],{"class":1030},[1002,114663,114664],{"class":1034},"'file'",[1002,114666,1143],{"class":1030},[1002,114668,114669],{"class":1004,"line":1054},[1002,114670,1502],{"class":1030},[1002,114672,114673,114676,114678,114680,114682,114684],{"class":1004,"line":1060},[1002,114674,114675],{"class":1026}," file",[1002,114677,1137],{"class":1030},[1002,114679,6965],{"class":1015},[1002,114681,6513],{"class":1030},[1002,114683,64361],{"class":2378},[1002,114685,2382],{"class":1030},[1002,114687,114688,114690,114693,114695,114697,114699,114701,114703],{"class":1004,"line":1272},[1002,114689,51906],{"class":1015},[1002,114691,114692],{"class":1030}," parts ",[1002,114694,2393],{"class":1015},[1002,114696,94066],{"class":1030},[1002,114698,18918],{"class":1026},[1002,114700,1031],{"class":1030},[1002,114702,22153],{"class":1034},[1002,114704,1085],{"class":1030},[1002,114706,114707,114709,114711],{"class":1004,"line":1348},[1002,114708,3030],{"class":1030},[1002,114710,2886],{"class":1026},[1002,114712,114713],{"class":1030},"(parts);\n",[1002,114715,114716],{"class":1004,"line":1354},[1002,114717,1502],{"class":1030},[1002,114719,114720],{"class":1004,"line":1360},[1002,114721,113671],{"class":1030},[1002,114723,114724],{"class":1004,"line":1366},[1002,114725,1051],{"emptyLinePlaceholder":1050},[1002,114727,114728,114730,114732,114734,114737,114739,114741],{"class":1004,"line":1946},[1002,114729,113684],{"class":1030},[1002,114731,113687],{"class":1026},[1002,114733,1031],{"class":1030},[1002,114735,114736],{"class":1034},"'file\u002Fthis\u002Fis\u002Fa\u002Ffile.txt'",[1002,114738,113695],{"class":1030},[1002,114740,17397],{"class":1019},[1002,114742,28417],{"class":1030},[925,114744,41827],{},[993,114746,114748],{"className":1797,"code":114747,"language":1799,"meta":998,"style":998},"[\" this\", \"is\", \"a\", \"file.txt\"]\n",[941,114749,114750],{"__ignoreMap":998},[1002,114751,114752],{"class":1004,"line":1005},[1002,114753,114747],{},[925,114755,114756],{},"If you want to learn about more follow my other articles on Backbone here:",[1530,114758,114759,114764,114769,114774],{},[974,114760,114761],{},[933,114762,114763],{"href":54},"Backbone Models",[974,114765,114766],{},[933,114767,114768],{"href":48},"Backbone Customizing Collections",[974,114770,114771],{},[933,114772,114773],{"href":59},"Backbone Patterns",[974,114775,114776],{},[933,114777,114778],{"href":721},"RequireJS & Handlebars",[1579,114780,114781],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":114783},[114784,114785,114786,114787,114788,114789],{"id":113551,"depth":1012,"text":113552},{"id":113939,"depth":1012,"text":113940},{"id":114074,"depth":1012,"text":114075},{"id":114442,"depth":1012,"text":114443},{"id":114515,"depth":1012,"text":114516},{"id":114625,"depth":1012,"text":114626},"2014-12-08","\u002Fimages\u002Fblog\u002Ffeatures\u002Fbackbone-routers.jpg",{},{"title":63,"description":65},"blog\u002Fbackbone-routers",[16,17,51],"xtntCOmqnQPZ9uqe3qcJObfXnUZRP1638wm63-BHm1c",{"id":114798,"title":315,"author":920,"body":114799,"date":115581,"description":317,"extension":1591,"image":115582,"meta":115583,"navigation":1050,"path":316,"seo":115584,"stem":115585,"tags":115586,"__hash__":115587},"blog\u002Fblog\u002Fgit-cloning-branching.md",{"type":922,"value":114800,"toc":115564},[114801,114805,114808,114817,114820,114829,114842,114846,114854,114873,114878,114882,114885,114894,114914,114921,114925,114928,114937,114940,114944,114959,114984,114990,115005,115009,115012,115027,115030,115044,115047,115051,115054,115071,115074,115078,115081,115095,115107,115110,115143,115146,115150,115153,115156,115160,115163,115178,115182,115185,115200,115215,115230,115234,115237,115251,115269,115282,115297,115312,115321,115325,115344,115347,115360,115369,115373,115376,115421,115424,115427,115472,115476,115479,115504,115507,115547,115550,115562],[953,114802,114804],{"id":114803},"cloning-a-repository","CLONING A REPOSITORY",[925,114806,114807],{},"Cloning into 'git-remote':",[993,114809,114811],{"className":1724,"code":114810,"language":1726,"meta":998,"style":998},"git clone https:\u002F\u002Fgithub.com\u002Fmyurl\u002Fgit-remote.git\n",[941,114812,114813],{"__ignoreMap":998},[1002,114814,114815],{"class":1004,"line":1005},[1002,114816,114810],{},[925,114818,114819],{},"Cloning into 'git-local'",[993,114821,114823],{"className":1724,"code":114822,"language":1726,"meta":998,"style":998},"git clone https:\u002F\u002Fgithub.com\u002Fmyurl\u002Fgit-remote.git git-local\n",[941,114824,114825],{"__ignoreMap":998},[1002,114826,114827],{"class":1004,"line":1005},[1002,114828,114822],{},[925,114830,30712,114831,114834,114835,114841],{},[1107,114832,114833],{},"git-local"," is the local folder name. And ",[1107,114836,114837],{},[933,114838,114839],{"href":114839,"rel":114840},"https:\u002F\u002Fgithub.com\u002Fmyurl\u002Fgit-remote.git",[937]," is the URL of the remote repository.",[953,114843,114845],{"id":114844},"git-clone","GIT CLONE",[1530,114847,114848,114851],{},[974,114849,114850],{},"Downloads the entire repository into a new git-remote directory.",[974,114852,114853],{},"Adds the ‘origin’ remote, pointing it to the clone URL.",[993,114855,114857],{"className":1724,"code":114856,"language":1726,"meta":998,"style":998},"git remote -v\norigin https:\u002F\u002Fgithub.com\u002Fmyurl\u002Fgit-remote.git (fetch)\norigin https:\u002F\u002Fgithub.com\u002Fmyurl\u002Fgit-remote.git (push)\n",[941,114858,114859,114863,114868],{"__ignoreMap":998},[1002,114860,114861],{"class":1004,"line":1005},[1002,114862,106282],{},[1002,114864,114865],{"class":1004,"line":1012},[1002,114866,114867],{},"origin https:\u002F\u002Fgithub.com\u002Fmyurl\u002Fgit-remote.git (fetch)\n",[1002,114869,114870],{"class":1004,"line":1047},[1002,114871,114872],{},"origin https:\u002F\u002Fgithub.com\u002Fmyurl\u002Fgit-remote.git (push)\n",[1530,114874,114875],{},[974,114876,114877],{},"Checks out initial branch (likely master) - This sets HEAD.",[953,114879,114881],{"id":114880},"branching-out","BRANCHING OUT",[925,114883,114884],{},"Need to work on a feature that will take some time?",[993,114886,114888],{"className":1797,"code":114887,"language":1799,"meta":998,"style":998},"git branch cat\n",[941,114889,114890],{"__ignoreMap":998},[1002,114891,114892],{"class":1004,"line":1005},[1002,114893,114887],{},[993,114895,114897],{"className":1724,"code":114896,"language":1726,"meta":998,"style":998},"git branch\ncat\n* master\n",[941,114898,114899,114904,114909],{"__ignoreMap":998},[1002,114900,114901],{"class":1004,"line":1005},[1002,114902,114903],{},"git branch\n",[1002,114905,114906],{"class":1004,"line":1012},[1002,114907,114908],{},"cat\n",[1002,114910,114911],{"class":1004,"line":1047},[1002,114912,114913],{},"* master\n",[925,114915,114916,114917,114920],{},"This will create a branch called ",[1107,114918,114919],{},"cat",", which is created from master. But HEAD still is on master.",[953,114922,114924],{"id":114923},"switching-to-a-branch","SWITCHING TO A BRANCH",[925,114926,114927],{},"Time to jump on that new 'cat' branch.",[993,114929,114931],{"className":1724,"code":114930,"language":1726,"meta":998,"style":998},"git checkout cat\n",[941,114932,114933],{"__ignoreMap":998},[1002,114934,114935],{"class":1004,"line":1005},[1002,114936,114930],{},[925,114938,114939],{},"Switched to branch 'cat'. Now the HEAD is on 'cat'",[953,114941,114943],{"id":114942},"working-on-a-branch","WORKING ON A BRANCH",[993,114945,114947],{"className":1797,"code":114946,"language":1799,"meta":998,"style":998},"echo \"Schrödinger\" > cat.txt\ngit add cat.txt\n",[941,114948,114949,114954],{"__ignoreMap":998},[1002,114950,114951],{"class":1004,"line":1005},[1002,114952,114953],{},"echo \"Schrödinger\" > cat.txt\n",[1002,114955,114956],{"class":1004,"line":1012},[1002,114957,114958],{},"git add cat.txt\n",[993,114960,114962],{"className":1724,"code":114961,"language":1726,"meta":998,"style":998},"git commit -m \"Create quantum cat.\"\n[cat ab48a3f] Create quantum cat.\n1 file changed, 1 insertion(+)\ncreate mode 100644 cat.txt\n",[941,114963,114964,114969,114974,114979],{"__ignoreMap":998},[1002,114965,114966],{"class":1004,"line":1005},[1002,114967,114968],{},"git commit -m \"Create quantum cat.\"\n",[1002,114970,114971],{"class":1004,"line":1012},[1002,114972,114973],{},"[cat ab48a3f] Create quantum cat.\n",[1002,114975,114976],{"class":1004,"line":1047},[1002,114977,114978],{},"1 file changed, 1 insertion(+)\n",[1002,114980,114981],{"class":1004,"line":1054},[1002,114982,114983],{},"create mode 100644 cat.txt\n",[925,114985,114986,114987,114989],{},"got commit will commit to the ",[1107,114988,114919],{}," branch.",[993,114991,114993],{"className":1724,"code":114992,"language":1726,"meta":998,"style":998},"ls\nREADME.txt cat.txt\n",[941,114994,114995,115000],{"__ignoreMap":998},[1002,114996,114997],{"class":1004,"line":1005},[1002,114998,114999],{},"ls\n",[1002,115001,115002],{"class":1004,"line":1012},[1002,115003,115004],{},"README.txt cat.txt\n",[953,115006,115008],{"id":115007},"back-to-master","BACK TO MASTER",[925,115010,115011],{},"Let's switch to branch 'master'",[993,115013,115015],{"className":1724,"code":115014,"language":1726,"meta":998,"style":998},"git checkout master\nHEAD\n",[941,115016,115017,115022],{"__ignoreMap":998},[1002,115018,115019],{"class":1004,"line":1005},[1002,115020,115021],{},"git checkout master\n",[1002,115023,115024],{"class":1004,"line":1012},[1002,115025,115026],{},"HEAD\n",[925,115028,115029],{},"And we're back on master. (The HEAD is on 'master' now)",[993,115031,115033],{"className":1724,"code":115032,"language":1726,"meta":998,"style":998},"ls\nREADME.txt\n",[941,115034,115035,115039],{"__ignoreMap":998},[1002,115036,115037],{"class":1004,"line":1005},[1002,115038,114999],{},[1002,115040,115041],{"class":1004,"line":1012},[1002,115042,115043],{},"README.txt\n",[925,115045,115046],{},"As you can see 'cat.txt' is no gone.",[953,115048,115050],{"id":115049},"back-to-cat","BACK TO CAT",[925,115052,115053],{},"Now let's switch to branch 'cat'",[993,115055,115057],{"className":1724,"code":115056,"language":1726,"meta":998,"style":998},"git checkout cat\nls\nREADME.txt cat.txt\n",[941,115058,115059,115063,115067],{"__ignoreMap":998},[1002,115060,115061],{"class":1004,"line":1005},[1002,115062,114930],{},[1002,115064,115065],{"class":1004,"line":1012},[1002,115066,114999],{},[1002,115068,115069],{"class":1004,"line":1047},[1002,115070,115004],{},[925,115072,115073],{},"'cat' is still there.",[953,115075,115077],{"id":115076},"time-to-merge","TIME TO MERGE",[925,115079,115080],{},"Done with that feature branch? Time to merge it into 'master '.",[993,115082,115084],{"className":1724,"code":115083,"language":1726,"meta":998,"style":998},"git checkout master\nSwitched to branch 'master'\n",[941,115085,115086,115090],{"__ignoreMap":998},[1002,115087,115088],{"class":1004,"line":1005},[1002,115089,115021],{},[1002,115091,115092],{"class":1004,"line":1012},[1002,115093,115094],{},"Switched to branch 'master'\n",[993,115096,115097],{"className":1724,"code":115032,"language":1726,"meta":998,"style":998},[941,115098,115099,115103],{"__ignoreMap":998},[1002,115100,115101],{"class":1004,"line":1005},[1002,115102,114999],{},[1002,115104,115105],{"class":1004,"line":1012},[1002,115106,115043],{},[925,115108,115109],{},"Here we can't see 'cat' as expected.",[993,115111,115113],{"className":1724,"code":115112,"language":1726,"meta":998,"style":998},"git merge cat\nUpdating 1191ceb..ab48a3f\nFast-forward\ncat.txt | 1 +\n1 file changed, 1 insertion(+)\ncreate mode 100644 cat.txt\n",[941,115114,115115,115120,115125,115130,115135,115139],{"__ignoreMap":998},[1002,115116,115117],{"class":1004,"line":1005},[1002,115118,115119],{},"git merge cat\n",[1002,115121,115122],{"class":1004,"line":1012},[1002,115123,115124],{},"Updating 1191ceb..ab48a3f\n",[1002,115126,115127],{"class":1004,"line":1047},[1002,115128,115129],{},"Fast-forward\n",[1002,115131,115132],{"class":1004,"line":1054},[1002,115133,115134],{},"cat.txt | 1 +\n",[1002,115136,115137],{"class":1004,"line":1060},[1002,115138,114978],{},[1002,115140,115141],{"class":1004,"line":1272},[1002,115142,114983],{},[925,115144,115145],{},"Merge brings one branch’s changes into another.",[953,115147,115149],{"id":115148},"fast-forward-to-the-future","FAST-FORWARD TO THE FUTURE",[925,115151,115152],{},"Conditions for a fast-forward merge:",[925,115154,115155],{},"The branch created should have something new on it and the master should NOT have any changes since the branch has been made to do a fast-forward merge.",[953,115157,115159],{"id":115158},"branch-clean-up","BRANCH CLEAN UP",[925,115161,115162],{},"When you're done with a branch, you can safely remove it.",[993,115164,115166],{"className":1724,"code":115165,"language":1726,"meta":998,"style":998},"git branch -d cat\nDeleted branch cat (was 957dbff).\n",[941,115167,115168,115173],{"__ignoreMap":998},[1002,115169,115170],{"class":1004,"line":1005},[1002,115171,115172],{},"git branch -d cat\n",[1002,115174,115175],{"class":1004,"line":1012},[1002,115176,115177],{},"Deleted branch cat (was 957dbff).\n",[953,115179,115181],{"id":115180},"non-fast-forward","NON-FAST-FORWARD",[925,115183,115184],{},"In this case, the history looks slightly different, there is an additional commit emphasizing the merge. This commit even has the right message informing us about the merged branch. Let’s work on a new admin feature.",[993,115186,115188],{"className":1724,"code":115187,"language":1726,"meta":998,"style":998},"git checkout -b admin\nSwitched to a new branch 'admin'\n",[941,115189,115190,115195],{"__ignoreMap":998},[1002,115191,115192],{"class":1004,"line":1005},[1002,115193,115194],{},"git checkout -b admin\n",[1002,115196,115197],{"class":1004,"line":1012},[1002,115198,115199],{},"Switched to a new branch 'admin'\n",[993,115201,115203],{"className":1797,"code":115202,"language":1799,"meta":998,"style":998},"git add admin\u002Fdashboard.html\ngit commit -m 'Add dashboard'\n",[941,115204,115205,115210],{"__ignoreMap":998},[1002,115206,115207],{"class":1004,"line":1005},[1002,115208,115209],{},"git add admin\u002Fdashboard.html\n",[1002,115211,115212],{"class":1004,"line":1012},[1002,115213,115214],{},"git commit -m 'Add dashboard'\n",[993,115216,115218],{"className":1797,"code":115217,"language":1799,"meta":998,"style":998},"git add admin\u002Fusers.html\ngit commit -m 'Add user admin'\n",[941,115219,115220,115225],{"__ignoreMap":998},[1002,115221,115222],{"class":1004,"line":1005},[1002,115223,115224],{},"git add admin\u002Fusers.html\n",[1002,115226,115227],{"class":1004,"line":1012},[1002,115228,115229],{},"git commit -m 'Add user admin'\n",[953,115231,115233],{"id":115232},"bug-fixing-on-master","BUG FIXING ON MASTER",[925,115235,115236],{},"Time to put out the fire. We’ll get back to that admin branch later.",[993,115238,115240],{"className":1724,"code":115239,"language":1726,"meta":998,"style":998},"git checkout master master\nSwitched to branch 'master'\n",[941,115241,115242,115247],{"__ignoreMap":998},[1002,115243,115244],{"class":1004,"line":1005},[1002,115245,115246],{},"git checkout master master\n",[1002,115248,115249],{"class":1004,"line":1012},[1002,115250,115094],{},[993,115252,115254],{"className":1724,"code":115253,"language":1726,"meta":998,"style":998},"git branch\nadmin\n* master\n",[941,115255,115256,115260,115265],{"__ignoreMap":998},[1002,115257,115258],{"class":1004,"line":1005},[1002,115259,114903],{},[1002,115261,115262],{"class":1004,"line":1012},[1002,115263,115264],{},"admin\n",[1002,115266,115267],{"class":1004,"line":1047},[1002,115268,114913],{},[993,115270,115272],{"className":1724,"code":115271,"language":1726,"meta":998,"style":998},"git pull\n...\n",[941,115273,115274,115278],{"__ignoreMap":998},[1002,115275,115276],{"class":1004,"line":1005},[1002,115277,106380],{},[1002,115279,115280],{"class":1004,"line":1012},[1002,115281,48279],{},[993,115283,115285],{"className":1797,"code":115284,"language":1799,"meta":998,"style":998},"git add store.rb\ngit commit -m 'Fix store bug'\n",[941,115286,115287,115292],{"__ignoreMap":998},[1002,115288,115289],{"class":1004,"line":1005},[1002,115290,115291],{},"git add store.rb\n",[1002,115293,115294],{"class":1004,"line":1012},[1002,115295,115296],{},"git commit -m 'Fix store bug'\n",[993,115298,115300],{"className":1797,"code":115299,"language":1799,"meta":998,"style":998},"git add product.rb\ngit commit -m 'Fix product'\n",[941,115301,115302,115307],{"__ignoreMap":998},[1002,115303,115304],{"class":1004,"line":1005},[1002,115305,115306],{},"git add product.rb\n",[1002,115308,115309],{"class":1004,"line":1012},[1002,115310,115311],{},"git commit -m 'Fix product'\n",[993,115313,115315],{"className":1724,"code":115314,"language":1726,"meta":998,"style":998},"git push\n",[941,115316,115317],{"__ignoreMap":998},[1002,115318,115319],{"class":1004,"line":1005},[1002,115320,115314],{},[953,115322,115324],{"id":115323},"back-to-our-branch","BACK TO OUR BRANCH",[993,115326,115328],{"className":1724,"code":115327,"language":1726,"meta":998,"style":998},"git checkout admin\nSwitched to branch 'admin'\n...\n",[941,115329,115330,115335,115340],{"__ignoreMap":998},[1002,115331,115332],{"class":1004,"line":1005},[1002,115333,115334],{},"git checkout admin\n",[1002,115336,115337],{"class":1004,"line":1012},[1002,115338,115339],{},"Switched to branch 'admin'\n",[1002,115341,115342],{"class":1004,"line":1047},[1002,115343,48279],{},[925,115345,115346],{},"When ready to bring in changes:",[993,115348,115350],{"className":1724,"code":115349,"language":1726,"meta":998,"style":998},"git checkout master\nSwitched to branch 'admin'\n",[941,115351,115352,115356],{"__ignoreMap":998},[1002,115353,115354],{"class":1004,"line":1005},[1002,115355,115021],{},[1002,115357,115358],{"class":1004,"line":1012},[1002,115359,115339],{},[993,115361,115363],{"className":1724,"code":115362,"language":1726,"meta":998,"style":998},"git merge admin\n",[941,115364,115365],{"__ignoreMap":998},[1002,115366,115367],{"class":1004,"line":1005},[1002,115368,115362],{},[953,115370,115372],{"id":115371},"and-suddenly","AND SUDDENLY...",[925,115374,115375],{},"Git uses Vi if no default editor is set to edit commit messages.",[993,115377,115379],{"className":1724,"code":115378,"language":1726,"meta":998,"style":998},"1 Merge branch 'admin'\n2\n3 # Please enter a commit message to explain why this merge is necessary,\n4 # especially if it merges an updated upstream into a topic branch.\n5 #\n6 # Lines starting with '#' will be ignored, and an empty message aborts\n7 # the commit.\n:wq+\n",[941,115380,115381,115386,115391,115396,115401,115406,115411,115416],{"__ignoreMap":998},[1002,115382,115383],{"class":1004,"line":1005},[1002,115384,115385],{},"1 Merge branch 'admin'\n",[1002,115387,115388],{"class":1004,"line":1012},[1002,115389,115390],{},"2\n",[1002,115392,115393],{"class":1004,"line":1047},[1002,115394,115395],{},"3 # Please enter a commit message to explain why this merge is necessary,\n",[1002,115397,115398],{"class":1004,"line":1054},[1002,115399,115400],{},"4 # especially if it merges an updated upstream into a topic branch.\n",[1002,115402,115403],{"class":1004,"line":1060},[1002,115404,115405],{},"5 #\n",[1002,115407,115408],{"class":1004,"line":1272},[1002,115409,115410],{},"6 # Lines starting with '#' will be ignored, and an empty message aborts\n",[1002,115412,115413],{"class":1004,"line":1348},[1002,115414,115415],{},"7 # the commit.\n",[1002,115417,115418],{"class":1004,"line":1354},[1002,115419,115420],{},":wq+\n",[925,115422,115423],{},"Hit Enter to write (save) & quit",[925,115425,115426],{},"Vi Commands",[993,115428,115430],{"className":1724,"code":115429,"language":1726,"meta":998,"style":998},"h left\nl right\nj down\nk up\nESC leave mode\ni insert mode\n:wq save & quit\n:q! cancel & quit\n",[941,115431,115432,115437,115442,115447,115452,115457,115462,115467],{"__ignoreMap":998},[1002,115433,115434],{"class":1004,"line":1005},[1002,115435,115436],{},"h left\n",[1002,115438,115439],{"class":1004,"line":1012},[1002,115440,115441],{},"l right\n",[1002,115443,115444],{"class":1004,"line":1047},[1002,115445,115446],{},"j down\n",[1002,115448,115449],{"class":1004,"line":1054},[1002,115450,115451],{},"k up\n",[1002,115453,115454],{"class":1004,"line":1060},[1002,115455,115456],{},"ESC leave mode\n",[1002,115458,115459],{"class":1004,"line":1272},[1002,115460,115461],{},"i insert mode\n",[1002,115463,115464],{"class":1004,"line":1348},[1002,115465,115466],{},":wq save & quit\n",[1002,115468,115469],{"class":1004,"line":1354},[1002,115470,115471],{},":q! cancel & quit\n",[953,115473,115475],{"id":115474},"recursive-merging","RECURSIVE MERGING",[925,115477,115478],{},"Git can’t fast-forward since changes were made in both branches.",[993,115480,115482],{"className":1724,"code":115481,"language":1726,"meta":998,"style":998},"Merge made by the 'recursive' strategy.\n0 files changed\ncreate mode 100644 admin\u002Fdashboard.html\ncreate mode 100644 admin\u002Fusers.html\n",[941,115483,115484,115489,115494,115499],{"__ignoreMap":998},[1002,115485,115486],{"class":1004,"line":1005},[1002,115487,115488],{},"Merge made by the 'recursive' strategy.\n",[1002,115490,115491],{"class":1004,"line":1012},[1002,115492,115493],{},"0 files changed\n",[1002,115495,115496],{"class":1004,"line":1047},[1002,115497,115498],{},"create mode 100644 admin\u002Fdashboard.html\n",[1002,115500,115501],{"class":1004,"line":1054},[1002,115502,115503],{},"create mode 100644 admin\u002Fusers.html\n",[925,115505,115506],{},"A commit was created to merge the two branches.",[993,115508,115510],{"className":1724,"code":115509,"language":1726,"meta":998,"style":998},"git log\nA commit was created to merge the two branches.\ncommit 19f735c3556129279bb10a0d1447dc5aba1e1fa9\nMerge: 5c9ed90 7980856\nAuthor: Sean \u003Csean@seanamarasinghe.com>\nDate: Thu Dec 07 17:51:53 2014 -0400\nMerge branch 'admin'\n",[941,115511,115512,115517,115522,115527,115532,115537,115542],{"__ignoreMap":998},[1002,115513,115514],{"class":1004,"line":1005},[1002,115515,115516],{},"git log\n",[1002,115518,115519],{"class":1004,"line":1012},[1002,115520,115521],{},"A commit was created to merge the two branches.\n",[1002,115523,115524],{"class":1004,"line":1047},[1002,115525,115526],{},"commit 19f735c3556129279bb10a0d1447dc5aba1e1fa9\n",[1002,115528,115529],{"class":1004,"line":1054},[1002,115530,115531],{},"Merge: 5c9ed90 7980856\n",[1002,115533,115534],{"class":1004,"line":1060},[1002,115535,115536],{},"Author: Sean \u003Csean@seanamarasinghe.com>\n",[1002,115538,115539],{"class":1004,"line":1272},[1002,115540,115541],{},"Date: Thu Dec 07 17:51:53 2014 -0400\n",[1002,115543,115544],{"class":1004,"line":1348},[1002,115545,115546],{},"Merge branch 'admin'\n",[925,115548,115549],{},"If you want to learn about more follow my other articles on Git here:",[1530,115551,115552,115557],{},[974,115553,115554],{},[933,115555,115556],{"href":321},"Git Introduction",[974,115558,115559],{},[933,115560,115561],{"href":332},"Git Stash",[1579,115563,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":115565},[115566,115567,115568,115569,115570,115571,115572,115573,115574,115575,115576,115577,115578,115579,115580],{"id":114803,"depth":1012,"text":114804},{"id":114844,"depth":1012,"text":114845},{"id":114880,"depth":1012,"text":114881},{"id":114923,"depth":1012,"text":114924},{"id":114942,"depth":1012,"text":114943},{"id":115007,"depth":1012,"text":115008},{"id":115049,"depth":1012,"text":115050},{"id":115076,"depth":1012,"text":115077},{"id":115148,"depth":1012,"text":115149},{"id":115158,"depth":1012,"text":115159},{"id":115180,"depth":1012,"text":115181},{"id":115232,"depth":1012,"text":115233},{"id":115323,"depth":1012,"text":115324},{"id":115371,"depth":1012,"text":115372},{"id":115474,"depth":1012,"text":115475},"2014-12-07","\u002Fimages\u002Fblog\u002Ffeatures\u002Fgit-cloning-branching.jpg",{},{"title":315,"description":317},"blog\u002Fgit-cloning-branching",[16,17],"7AsJZTuVbhROlA17vog_3VBK536VvNeHxz54dffKlSw",{"id":115589,"title":53,"author":920,"body":115590,"date":116364,"description":55,"extension":1591,"image":116365,"meta":116366,"navigation":1050,"path":54,"seo":116367,"stem":116368,"tags":116369,"__hash__":116370},"blog\u002Fblog\u002Fbackbone-models.md",{"type":922,"value":115591,"toc":116356},[115592,115595,115616,115619,115663,115666,115685,115688,115707,115711,115714,115733,115736,115753,115756,115769,115771,115808,115824,115826,115832,115835,115860,115863,115895,115903,115905,115937,115940,115968,115971,115975,116054,116058,116061,116074,116076,116110,116114,116117,116123,116127,116130,116167,116170,116188,116192,116195,116198,116247,116250,116272,116275,116311,116314,116353],[925,115593,115594],{},"Generating a model class:",[993,115596,115598],{"className":995,"code":115597,"language":997,"meta":998,"style":998},"var TodoItem = Backbone.Model.extend({});\n",[941,115599,115600],{"__ignoreMap":998},[1002,115601,115602,115604,115607,115609,115612,115614],{"class":1004,"line":1005},[1002,115603,18311],{"class":1015},[1002,115605,115606],{"class":1030}," TodoItem ",[1002,115608,2393],{"class":1015},[1002,115610,115611],{"class":1030}," Backbone.Model.",[1002,115613,106592],{"class":1026},[1002,115615,106724],{"class":1030},[925,115617,115618],{},"Generating a model instance:",[993,115620,115622],{"className":995,"code":115621,"language":997,"meta":998,"style":998},"var todoItem = new TodoItem({\n description: 'Pick up milk',\n status: 'incomplete',\n});\n",[941,115623,115624,115640,115649,115659],{"__ignoreMap":998},[1002,115625,115626,115628,115631,115633,115635,115638],{"class":1004,"line":1005},[1002,115627,18311],{"class":1015},[1002,115629,115630],{"class":1030}," todoItem ",[1002,115632,2393],{"class":1015},[1002,115634,2690],{"class":1015},[1002,115636,115637],{"class":1026}," TodoItem",[1002,115639,2756],{"class":1030},[1002,115641,115642,115644,115647],{"class":1004,"line":1012},[1002,115643,106869],{"class":1030},[1002,115645,115646],{"class":1034},"'Pick up milk'",[1002,115648,1143],{"class":1030},[1002,115650,115651,115654,115657],{"class":1004,"line":1047},[1002,115652,115653],{"class":1030}," status: ",[1002,115655,115656],{"class":1034},"'incomplete'",[1002,115658,1143],{"class":1030},[1002,115660,115661],{"class":1004,"line":1054},[1002,115662,2804],{"class":1030},[925,115664,115665],{},"To get an attribute:",[993,115667,115669],{"className":995,"code":115668,"language":997,"meta":998,"style":998},"todoItem.get('description');\n",[941,115670,115671],{"__ignoreMap":998},[1002,115672,115673,115676,115678,115680,115683],{"class":1004,"line":1005},[1002,115674,115675],{"class":1030},"todoItem.",[1002,115677,8070],{"class":1026},[1002,115679,1031],{"class":1030},[1002,115681,115682],{"class":1034},"'description'",[1002,115684,1085],{"class":1030},[925,115686,115687],{},"To set an attribute:",[993,115689,115691],{"className":995,"code":115690,"language":997,"meta":998,"style":998},"todoItem.set({ status: 'complete' });\n",[941,115692,115693],{"__ignoreMap":998},[1002,115694,115695,115697,115699,115702,115705],{"class":1004,"line":1005},[1002,115696,115675],{"class":1030},[1002,115698,40544],{"class":1026},[1002,115700,115701],{"class":1030},"({ status: ",[1002,115703,115704],{"class":1034},"'complete'",[1002,115706,28417],{"class":1030},[953,115708,115710],{"id":115709},"fetching-data-from-the-server","Fetching Data from the Server",[925,115712,115713],{},"Let's create a Backbone model to fetch data from the server:",[993,115715,115717],{"className":995,"code":115716,"language":997,"meta":998,"style":998},"var todoItem = new TodoItem();\n",[941,115718,115719],{"__ignoreMap":998},[1002,115720,115721,115723,115725,115727,115729,115731],{"class":1004,"line":1005},[1002,115722,18311],{"class":1015},[1002,115724,115630],{"class":1030},[1002,115726,2393],{"class":1015},[1002,115728,2690],{"class":1015},[1002,115730,115637],{"class":1026},[1002,115732,1428],{"class":1030},[925,115734,115735],{},"URL to get JSON data for model:",[993,115737,115739],{"className":995,"code":115738,"language":997,"meta":998,"style":998},"todoItem.url = '\u002Ftodo';\n",[941,115740,115741],{"__ignoreMap":998},[1002,115742,115743,115746,115748,115751],{"class":1004,"line":1005},[1002,115744,115745],{"class":1030},"todoItem.url ",[1002,115747,2393],{"class":1015},[1002,115749,115750],{"class":1034}," '\u002Ftodo'",[1002,115752,1407],{"class":1030},[925,115754,115755],{},"To populate model from server:",[993,115757,115759],{"className":995,"code":115758,"language":997,"meta":998,"style":998},"todoItem.fetch();\n",[941,115760,115761],{"__ignoreMap":998},[1002,115762,115763,115765,115767],{"class":1004,"line":1005},[1002,115764,115675],{"class":1030},[1002,115766,49123],{"class":1026},[1002,115768,1428],{"class":1030},[925,115770,41827],{},[993,115772,115774],{"className":1120,"code":115773,"language":1122,"meta":998,"style":998},"{ \"id\": 1, \"description\": \"Pick up milk\", \"status\": \"incomplete\" }\n",[941,115775,115776],{"__ignoreMap":998},[1002,115777,115778,115780,115783,115785,115787,115789,115791,115793,115796,115798,115801,115803,115806],{"class":1004,"line":1005},[1002,115779,91422],{"class":1030},[1002,115781,115782],{"class":1019},"\"id\"",[1002,115784,1137],{"class":1030},[1002,115786,6211],{"class":1019},[1002,115788,1251],{"class":1030},[1002,115790,51548],{"class":1019},[1002,115792,1137],{"class":1030},[1002,115794,115795],{"class":1034},"\"Pick up milk\"",[1002,115797,1251],{"class":1030},[1002,115799,115800],{"class":1019},"\"status\"",[1002,115802,1137],{"class":1030},[1002,115804,115805],{"class":1034},"\"incomplete\"",[1002,115807,71668],{"class":1030},[993,115809,115810],{"className":995,"code":115668,"language":997,"meta":998,"style":998},[941,115811,115812],{"__ignoreMap":998},[1002,115813,115814,115816,115818,115820,115822],{"class":1004,"line":1005},[1002,115815,115675],{"class":1030},[1002,115817,8070],{"class":1026},[1002,115819,1031],{"class":1030},[1002,115821,115682],{"class":1034},[1002,115823,1085],{"class":1030},[925,115825,41827],{},[993,115827,115830],{"className":115828,"code":115829,"language":24241},[24239],"'Pick up milk'\n",[941,115831,115829],{"__ignoreMap":998},[925,115833,115834],{},"Now let's call the RESTful web service:",[993,115836,115838],{"className":995,"code":115837,"language":997,"meta":998,"style":998},"var TodoItem = Backbone.Model.extend({ urlRoot: '\u002Ftodos' });\n",[941,115839,115840],{"__ignoreMap":998},[1002,115841,115842,115844,115846,115848,115850,115852,115855,115858],{"class":1004,"line":1005},[1002,115843,18311],{"class":1015},[1002,115845,115606],{"class":1030},[1002,115847,2393],{"class":1015},[1002,115849,115611],{"class":1030},[1002,115851,106592],{"class":1026},[1002,115853,115854],{"class":1030},"({ urlRoot: ",[1002,115856,115857],{"class":1034},"'\u002Ftodos'",[1002,115859,28417],{"class":1030},[925,115861,115862],{},"Fetch todo with id = 1",[993,115864,115866],{"className":995,"code":115865,"language":997,"meta":998,"style":998},"var todoItem = new TodoItem({ id: 1 });\ntodoItem.fetch();\n",[941,115867,115868,115887],{"__ignoreMap":998},[1002,115869,115870,115872,115874,115876,115878,115880,115883,115885],{"class":1004,"line":1005},[1002,115871,18311],{"class":1015},[1002,115873,115630],{"class":1030},[1002,115875,2393],{"class":1015},[1002,115877,2690],{"class":1015},[1002,115879,115637],{"class":1026},[1002,115881,115882],{"class":1030},"({ id: ",[1002,115884,6211],{"class":1019},[1002,115886,28417],{"class":1030},[1002,115888,115889,115891,115893],{"class":1004,"line":1012},[1002,115890,115675],{"class":1030},[1002,115892,49123],{"class":1026},[1002,115894,1428],{"class":1030},[925,115896,115897,115899,115900],{},[1107,115898,49123],{}," will call ",[941,115901,115902],{},"GET \u002Ftodos\u002F1",[925,115904,41827],{},[993,115906,115907],{"className":1120,"code":115773,"language":1122,"meta":998,"style":998},[941,115908,115909],{"__ignoreMap":998},[1002,115910,115911,115913,115915,115917,115919,115921,115923,115925,115927,115929,115931,115933,115935],{"class":1004,"line":1005},[1002,115912,91422],{"class":1030},[1002,115914,115782],{"class":1019},[1002,115916,1137],{"class":1030},[1002,115918,6211],{"class":1019},[1002,115920,1251],{"class":1030},[1002,115922,51548],{"class":1019},[1002,115924,1137],{"class":1030},[1002,115926,115795],{"class":1034},[1002,115928,1251],{"class":1030},[1002,115930,115800],{"class":1019},[1002,115932,1137],{"class":1030},[1002,115934,115805],{"class":1034},[1002,115936,71668],{"class":1030},[925,115938,115939],{},"To update the todo:",[993,115941,115943],{"className":995,"code":115942,"language":997,"meta":998,"style":998},"todoItem.set({ description: 'Pick up cookies.' });\ntodoItem.save();\n",[941,115944,115945,115959],{"__ignoreMap":998},[1002,115946,115947,115949,115951,115954,115957],{"class":1004,"line":1005},[1002,115948,115675],{"class":1030},[1002,115950,40544],{"class":1026},[1002,115952,115953],{"class":1030},"({ description: ",[1002,115955,115956],{"class":1034},"'Pick up cookies.'",[1002,115958,28417],{"class":1030},[1002,115960,115961,115963,115966],{"class":1004,"line":1012},[1002,115962,115675],{"class":1030},[1002,115964,115965],{"class":1026},"save",[1002,115967,1428],{"class":1030},[925,115969,115970],{},"This is calling PUT \u002Ftodos\u002F1 with JSON params.",[953,115972,115974],{"id":115973},"creating-destroying-a-new-todo","Creating & Destroying a New Todo",[993,115976,115978],{"className":995,"code":115977,"language":997,"meta":998,"style":998},"var todoItem = new TodoItem();\ntodoItem.set({ description: 'Fill prescription.' });\n\ntodoItem.save(); \u002F\u002F POST \u002Ftodos with JSON params\n\ntodoItem.get('id'); \u002F\u002F 2\n\ntodoItem.destroy();\n",[941,115979,115980,115994,116007,116011,116022,116026,116041,116045],{"__ignoreMap":998},[1002,115981,115982,115984,115986,115988,115990,115992],{"class":1004,"line":1005},[1002,115983,18311],{"class":1015},[1002,115985,115630],{"class":1030},[1002,115987,2393],{"class":1015},[1002,115989,2690],{"class":1015},[1002,115991,115637],{"class":1026},[1002,115993,1428],{"class":1030},[1002,115995,115996,115998,116000,116002,116005],{"class":1004,"line":1012},[1002,115997,115675],{"class":1030},[1002,115999,40544],{"class":1026},[1002,116001,115953],{"class":1030},[1002,116003,116004],{"class":1034},"'Fill prescription.'",[1002,116006,28417],{"class":1030},[1002,116008,116009],{"class":1004,"line":1047},[1002,116010,1051],{"emptyLinePlaceholder":1050},[1002,116012,116013,116015,116017,116019],{"class":1004,"line":1054},[1002,116014,115675],{"class":1030},[1002,116016,115965],{"class":1026},[1002,116018,6859],{"class":1030},[1002,116020,116021],{"class":1008},"\u002F\u002F POST \u002Ftodos with JSON params\n",[1002,116023,116024],{"class":1004,"line":1060},[1002,116025,1051],{"emptyLinePlaceholder":1050},[1002,116027,116028,116030,116032,116034,116037,116039],{"class":1004,"line":1272},[1002,116029,115675],{"class":1030},[1002,116031,8070],{"class":1026},[1002,116033,1031],{"class":1030},[1002,116035,116036],{"class":1034},"'id'",[1002,116038,18256],{"class":1030},[1002,116040,31325],{"class":1008},[1002,116042,116043],{"class":1004,"line":1348},[1002,116044,1051],{"emptyLinePlaceholder":1050},[1002,116046,116047,116049,116052],{"class":1004,"line":1354},[1002,116048,115675],{"class":1030},[1002,116050,116051],{"class":1026},"destroy",[1002,116053,1428],{"class":1030},[953,116055,116057],{"id":116056},"get-json-from-model","Get JSON from model",[925,116059,116060],{},"To get JSOn from the model:",[993,116062,116064],{"className":995,"code":116063,"language":997,"meta":998,"style":998},"todoItem.toJSON();\n",[941,116065,116066],{"__ignoreMap":998},[1002,116067,116068,116070,116072],{"class":1004,"line":1005},[1002,116069,115675],{"class":1030},[1002,116071,60633],{"class":1026},[1002,116073,1428],{"class":1030},[925,116075,41827],{},[993,116077,116079],{"className":1120,"code":116078,"language":1122,"meta":998,"style":998},"{ \"id\": 2, \"description\": \"Fill prescription\", \"status\": \"incomplete\" }\n",[941,116080,116081],{"__ignoreMap":998},[1002,116082,116083,116085,116087,116089,116091,116093,116095,116097,116100,116102,116104,116106,116108],{"class":1004,"line":1005},[1002,116084,91422],{"class":1030},[1002,116086,115782],{"class":1019},[1002,116088,1137],{"class":1030},[1002,116090,5681],{"class":1019},[1002,116092,1251],{"class":1030},[1002,116094,51548],{"class":1019},[1002,116096,1137],{"class":1030},[1002,116098,116099],{"class":1034},"\"Fill prescription\"",[1002,116101,1251],{"class":1030},[1002,116103,115800],{"class":1019},[1002,116105,1137],{"class":1030},[1002,116107,115805],{"class":1034},[1002,116109,71668],{"class":1030},[953,116111,116113],{"id":116112},"default-values","Default Values",[925,116115,116116],{},"Let's see how we can set default values in Backbone.",[993,116118,116121],{"className":116119,"code":116120,"language":24241},[24239],"js\n var TodoItem = Backbone.Model.extend({\n defaults: {\n description: 'Empty todo...',\n status: 'incomplete'\n }\n });\n\n var todoItem = new TodoItem();\n todoItem.get('description'); \u002F\u002F 'Empty todo...'\n todoItem.get('status'); \u002F\u002F'incomplete'\n",[941,116122,116120],{"__ignoreMap":998},[953,116124,116126],{"id":116125},"models-can-have-events","Models Can Have Events",[925,116128,116129],{},"To listen for an event on a model:",[993,116131,116133],{"className":995,"code":116132,"language":997,"meta":998,"style":998},"todoItem.on('event-name', function () {\n alert('event-name happened!');\n});\n",[941,116134,116135,116152,116163],{"__ignoreMap":998},[1002,116136,116137,116139,116141,116143,116146,116148,116150],{"class":1004,"line":1005},[1002,116138,115675],{"class":1030},[1002,116140,43148],{"class":1026},[1002,116142,1031],{"class":1030},[1002,116144,116145],{"class":1034},"'event-name'",[1002,116147,1251],{"class":1030},[1002,116149,6965],{"class":1015},[1002,116151,9772],{"class":1030},[1002,116153,116154,116156,116158,116161],{"class":1004,"line":1012},[1002,116155,93025],{"class":1026},[1002,116157,1031],{"class":1030},[1002,116159,116160],{"class":1034},"'event-name happened!'",[1002,116162,1085],{"class":1030},[1002,116164,116165],{"class":1004,"line":1047},[1002,116166,2804],{"class":1030},[925,116168,116169],{},"Run the event:",[993,116171,116173],{"className":995,"code":116172,"language":997,"meta":998,"style":998},"todoItem.trigger('event-name');\n",[941,116174,116175],{"__ignoreMap":998},[1002,116176,116177,116179,116182,116184,116186],{"class":1004,"line":1005},[1002,116178,115675],{"class":1030},[1002,116180,116181],{"class":1026},"trigger",[1002,116183,1031],{"class":1030},[1002,116185,116145],{"class":1034},[1002,116187,1085],{"class":1030},[953,116189,116191],{"id":116190},"special-events","Special Events",[925,116193,116194],{},"Here are some special events of Backbone:",[925,116196,116197],{},"To listen for changes:",[993,116199,116201],{"className":995,"code":116200,"language":997,"meta":998,"style":998},"todoItem.on('change', doThing);\n\nEvent triggered on change:\n```js\nvar doThing = function() {\n ...\n}\n",[941,116202,116203,116216,116220,116229,116234,116239,116243],{"__ignoreMap":998},[1002,116204,116205,116207,116209,116211,116213],{"class":1004,"line":1005},[1002,116206,115675],{"class":1030},[1002,116208,43148],{"class":1026},[1002,116210,1031],{"class":1030},[1002,116212,48501],{"class":1034},[1002,116214,116215],{"class":1030},", doThing);\n",[1002,116217,116218],{"class":1004,"line":1012},[1002,116219,1051],{"emptyLinePlaceholder":1050},[1002,116221,116222,116225,116227],{"class":1004,"line":1047},[1002,116223,116224],{"class":1030},"Event triggered on ",[1002,116226,8695],{"class":1026},[1002,116228,2616],{"class":1030},[1002,116230,116231],{"class":1004,"line":1054},[1002,116232,116233],{"class":1034},"```js\n",[1002,116235,116236],{"class":1004,"line":1060},[1002,116237,116238],{"class":1034},"var doThing = function() {\n",[1002,116240,116241],{"class":1004,"line":1272},[1002,116242,48894],{"class":1034},[1002,116244,116245],{"class":1004,"line":1348},[1002,116246,1170],{"class":1034},[925,116248,116249],{},"Set without triggering event:",[993,116251,116253],{"className":995,"code":116252,"language":997,"meta":998,"style":998},"todoItem.set({ description: 'Fill prescription.' }, { silent: true });\n",[941,116254,116255],{"__ignoreMap":998},[1002,116256,116257,116259,116261,116263,116265,116268,116270],{"class":1004,"line":1005},[1002,116258,115675],{"class":1030},[1002,116260,40544],{"class":1026},[1002,116262,115953],{"class":1030},[1002,116264,116004],{"class":1034},[1002,116266,116267],{"class":1030}," }, { silent: ",[1002,116269,17397],{"class":1019},[1002,116271,28417],{"class":1030},[925,116273,116274],{},"Remove event listener",[993,116276,116278],{"className":995,"code":116277,"language":997,"meta":998,"style":998},"todoItem.off('change', doThing);\ntodoItem.on(\u003Cevent>, \u003Cmethod>);\n",[941,116279,116280,116293],{"__ignoreMap":998},[1002,116281,116282,116284,116287,116289,116291],{"class":1004,"line":1005},[1002,116283,115675],{"class":1030},[1002,116285,116286],{"class":1026},"off",[1002,116288,1031],{"class":1030},[1002,116290,48501],{"class":1034},[1002,116292,116215],{"class":1030},[1002,116294,116295,116297,116299,116301,116303,116306,116308],{"class":1004,"line":1012},[1002,116296,115675],{"class":1030},[1002,116298,43148],{"class":1026},[1002,116300,21269],{"class":1030},[1002,116302,16696],{"class":15711},[1002,116304,116305],{"class":1030},">, \u003C",[1002,116307,17031],{"class":15711},[1002,116309,116310],{"class":1030},">);\n",[925,116312,116313],{},"Built-in events:",[1530,116315,116316,116321,116333,116337,116343,116348],{},[974,116317,116318,116320],{},[1107,116319,8695],{}," When an attribute is modified",[974,116322,116323,116326,116329,116330,116332],{},[1107,116324,116325],{},"change:",[941,116327,116328],{},"\u003Cattr>"," When ",[941,116331,116328],{}," is modified",[974,116334,116335,116320],{},[1107,116336,116051],{},[974,116338,116339,116342],{},[1107,116340,116341],{},"sync"," When a model is destroyed",[974,116344,116345,116347],{},[1107,116346,25064],{}," When model save or validation fails",[974,116349,116350,116352],{},[1107,116351,17964],{}," Any triggered event",[1579,116354,116355],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":116357},[116358,116359,116360,116361,116362,116363],{"id":115709,"depth":1012,"text":115710},{"id":115973,"depth":1012,"text":115974},{"id":116056,"depth":1012,"text":116057},{"id":116112,"depth":1012,"text":116113},{"id":116125,"depth":1012,"text":116126},{"id":116190,"depth":1012,"text":116191},"2014-12-03","\u002Fimages\u002Fblog\u002Ffeatures\u002Fbackbone-models.jpg",{},{"title":53,"description":55},"blog\u002Fbackbone-models",[16,17,51],"fp4Kv-ycYyfuMd0Rzu7UalgvtssF6NmvjGLqdH_daYU",{"id":116372,"title":175,"author":920,"body":116373,"date":117839,"description":177,"extension":1591,"image":117840,"meta":117841,"navigation":1050,"path":176,"seo":117842,"stem":117843,"tags":117844,"__hash__":117845},"blog\u002Fblog\u002Fember-resource-routes.md",{"type":922,"value":116374,"toc":117823},[116375,116378,116381,116385,116462,116466,116538,116541,116545,116549,116585,116590,116655,116660,116725,116732,116736,116777,116782,116847,116850,116854,116858,116912,116916,116920,116962,116966,117014,117017,117021,117024,117028,117086,117090,117093,117096,117099,117102,117106,117178,117182,117186,117347,117350,117354,117359,117364,117369,117373,117416,117420,117460,117462,117477,117480,117484,117488,117540,117542,117564,117572,117577,117581,117632,117635,117639,117817,117820],[925,116376,116377],{},"The practical difference between these two is that resource may contain other routes, whereas route cannot. Additionally, this.resource automatically creates an index route when it sees you have sub-routes.",[925,116379,116380],{},"Here, the name of the controller matches the route and template names.",[925,116382,116383],{},[1107,116384,47429],{},[993,116386,116388],{"className":995,"code":116387,"language":997,"meta":998,"style":998},"App.IndexController = Ember.Controller.extend({\n productsCount: 6,\n logo: '\u002Fimages\u002Fblog\u002Ftest.png',\n time: function () {\n return new Date().toDateString();\n }.property(),\n});\n",[941,116389,116390,116404,116413,116423,116434,116449,116458],{"__ignoreMap":998},[1002,116391,116392,116395,116397,116400,116402],{"class":1004,"line":1005},[1002,116393,116394],{"class":1030},"App.IndexController ",[1002,116396,2393],{"class":1015},[1002,116398,116399],{"class":1030}," Ember.Controller.",[1002,116401,106592],{"class":1026},[1002,116403,2756],{"class":1030},[1002,116405,116406,116409,116411],{"class":1004,"line":1012},[1002,116407,116408],{"class":1030}," productsCount: ",[1002,116410,51334],{"class":1019},[1002,116412,1143],{"class":1030},[1002,116414,116415,116418,116421],{"class":1004,"line":1047},[1002,116416,116417],{"class":1030}," logo: ",[1002,116419,116420],{"class":1034},"'\u002Fimages\u002Fblog\u002Ftest.png'",[1002,116422,1143],{"class":1030},[1002,116424,116425,116428,116430,116432],{"class":1004,"line":1054},[1002,116426,116427],{"class":1026}," time",[1002,116429,1137],{"class":1030},[1002,116431,6965],{"class":1015},[1002,116433,9772],{"class":1030},[1002,116435,116436,116438,116440,116442,116444,116447],{"class":1004,"line":1060},[1002,116437,2687],{"class":1015},[1002,116439,2690],{"class":1015},[1002,116441,31486],{"class":1026},[1002,116443,12951],{"class":1030},[1002,116445,116446],{"class":1026},"toDateString",[1002,116448,1428],{"class":1030},[1002,116450,116451,116454,116456],{"class":1004,"line":1272},[1002,116452,116453],{"class":1030}," }.",[1002,116455,17028],{"class":1026},[1002,116457,15088],{"class":1030},[1002,116459,116460],{"class":1004,"line":1348},[1002,116461,2804],{"class":1030},[925,116463,116464],{},[1107,116465,37877],{},[993,116467,116469],{"className":995,"code":116468,"language":997,"meta":998,"style":998},"\u003Cscript type='text\u002Fhandlebars' data-template-name='index'>\n There are {{productsCount}} products\n \u003Cimg {{bind-attr src='logo'}} alt='Logo' \u002F>\n Current Time: {{time}}\n\u003C\u002Fscript>\n",[941,116470,116471,116493,116498,116525,116530],{"__ignoreMap":998},[1002,116472,116473,116475,116477,116479,116481,116484,116487,116489,116491],{"class":1004,"line":1005},[1002,116474,6539],{"class":1030},[1002,116476,22063],{"class":15711},[1002,116478,29274],{"class":1026},[1002,116480,2393],{"class":1015},[1002,116482,116483],{"class":1034},"'text\u002Fhandlebars'",[1002,116485,116486],{"class":1026}," data-template-name",[1002,116488,2393],{"class":1015},[1002,116490,85061],{"class":1034},[1002,116492,15703],{"class":1030},[1002,116494,116495],{"class":1004,"line":1012},[1002,116496,116497],{"class":1030}," There are {{productsCount}} products\n",[1002,116499,116500,116502,116504,116507,116509,116512,116515,116518,116520,116523],{"class":1004,"line":1047},[1002,116501,15697],{"class":1030},[1002,116503,963],{"class":15711},[1002,116505,116506],{"class":1030}," {{bind-attr src",[1002,116508,2393],{"class":1015},[1002,116510,116511],{"class":1034},"'logo'",[1002,116513,116514],{"class":1030},"}} ",[1002,116516,116517],{"class":1026},"alt",[1002,116519,2393],{"class":1015},[1002,116521,116522],{"class":1034},"'Logo'",[1002,116524,15258],{"class":1030},[1002,116526,116527],{"class":1004,"line":1054},[1002,116528,116529],{"class":1030}," Current Time: {{time}}\n",[1002,116531,116532,116534,116536],{"class":1004,"line":1060},[1002,116533,22437],{"class":1030},[1002,116535,22063],{"class":15711},[1002,116537,15703],{"class":1030},[925,116539,116540],{},"Templates can use properties from a controller",[953,116542,116544],{"id":116543},"use-route-for-adjectives-verbs-adverbs","Use route for adjectives, verbs, adverbs",[925,116546,116547],{},[1107,116548,47429],{},[993,116550,116552],{"className":995,"code":116551,"language":997,"meta":998,"style":998},"App.Router.map(function () {\n this.route('about');\n});\n",[941,116553,116554,116567,116581],{"__ignoreMap":998},[1002,116555,116556,116559,116561,116563,116565],{"class":1004,"line":1005},[1002,116557,116558],{"class":1030},"App.Router.",[1002,116560,19444],{"class":1026},[1002,116562,1031],{"class":1030},[1002,116564,6965],{"class":1015},[1002,116566,9772],{"class":1030},[1002,116568,116569,116571,116573,116575,116577,116579],{"class":1004,"line":1012},[1002,116570,39364],{"class":1019},[1002,116572,948],{"class":1030},[1002,116574,66565],{"class":1026},[1002,116576,1031],{"class":1030},[1002,116578,67536],{"class":1034},[1002,116580,1085],{"class":1030},[1002,116582,116583],{"class":1004,"line":1047},[1002,116584,2804],{"class":1030},[925,116586,116587],{},[1107,116588,116589],{},"Adjective Routes",[993,116591,116593],{"className":995,"code":116592,"language":997,"meta":998,"style":998},"this.route('onsale');\nthis.route('expiring');\nthis.route('new');\nthis.route('internal');\n",[941,116594,116595,116610,116625,116640],{"__ignoreMap":998},[1002,116596,116597,116599,116601,116603,116605,116608],{"class":1004,"line":1005},[1002,116598,3455],{"class":1019},[1002,116600,948],{"class":1030},[1002,116602,66565],{"class":1026},[1002,116604,1031],{"class":1030},[1002,116606,116607],{"class":1034},"'onsale'",[1002,116609,1085],{"class":1030},[1002,116611,116612,116614,116616,116618,116620,116623],{"class":1004,"line":1012},[1002,116613,3455],{"class":1019},[1002,116615,948],{"class":1030},[1002,116617,66565],{"class":1026},[1002,116619,1031],{"class":1030},[1002,116621,116622],{"class":1034},"'expiring'",[1002,116624,1085],{"class":1030},[1002,116626,116627,116629,116631,116633,116635,116638],{"class":1004,"line":1047},[1002,116628,3455],{"class":1019},[1002,116630,948],{"class":1030},[1002,116632,66565],{"class":1026},[1002,116634,1031],{"class":1030},[1002,116636,116637],{"class":1034},"'new'",[1002,116639,1085],{"class":1030},[1002,116641,116642,116644,116646,116648,116650,116653],{"class":1004,"line":1054},[1002,116643,3455],{"class":1019},[1002,116645,948],{"class":1030},[1002,116647,66565],{"class":1026},[1002,116649,1031],{"class":1030},[1002,116651,116652],{"class":1034},"'internal'",[1002,116654,1085],{"class":1030},[925,116656,116657],{},[1107,116658,116659],{},"Verb Routes",[993,116661,116663],{"className":995,"code":116662,"language":997,"meta":998,"style":998},"this.route('signup');\nthis.route('ignite');\nthis.route('help');\nthis.route('rate');\n",[941,116664,116665,116680,116695,116710],{"__ignoreMap":998},[1002,116666,116667,116669,116671,116673,116675,116678],{"class":1004,"line":1005},[1002,116668,3455],{"class":1019},[1002,116670,948],{"class":1030},[1002,116672,66565],{"class":1026},[1002,116674,1031],{"class":1030},[1002,116676,116677],{"class":1034},"'signup'",[1002,116679,1085],{"class":1030},[1002,116681,116682,116684,116686,116688,116690,116693],{"class":1004,"line":1012},[1002,116683,3455],{"class":1019},[1002,116685,948],{"class":1030},[1002,116687,66565],{"class":1026},[1002,116689,1031],{"class":1030},[1002,116691,116692],{"class":1034},"'ignite'",[1002,116694,1085],{"class":1030},[1002,116696,116697,116699,116701,116703,116705,116708],{"class":1004,"line":1047},[1002,116698,3455],{"class":1019},[1002,116700,948],{"class":1030},[1002,116702,66565],{"class":1026},[1002,116704,1031],{"class":1030},[1002,116706,116707],{"class":1034},"'help'",[1002,116709,1085],{"class":1030},[1002,116711,116712,116714,116716,116718,116720,116723],{"class":1004,"line":1054},[1002,116713,3455],{"class":1019},[1002,116715,948],{"class":1030},[1002,116717,66565],{"class":1026},[1002,116719,1031],{"class":1030},[1002,116721,116722],{"class":1034},"'rate'",[1002,116724,1085],{"class":1030},[953,116726,24000,116728,116731],{"id":116727},"use-resource-routes-for-nouns",[1107,116729,116730],{},"Resource"," Routes for Nouns",[925,116733,116734],{},[1107,116735,47429],{},[993,116737,116739],{"className":995,"code":116738,"language":997,"meta":998,"style":998},"App.Router.map(function () {\n this.route('about');\n});\nthis;\n",[941,116740,116741,116753,116767,116771],{"__ignoreMap":998},[1002,116742,116743,116745,116747,116749,116751],{"class":1004,"line":1005},[1002,116744,116558],{"class":1030},[1002,116746,19444],{"class":1026},[1002,116748,1031],{"class":1030},[1002,116750,6965],{"class":1015},[1002,116752,9772],{"class":1030},[1002,116754,116755,116757,116759,116761,116763,116765],{"class":1004,"line":1012},[1002,116756,39364],{"class":1019},[1002,116758,948],{"class":1030},[1002,116760,66565],{"class":1026},[1002,116762,1031],{"class":1030},[1002,116764,67536],{"class":1034},[1002,116766,1085],{"class":1030},[1002,116768,116769],{"class":1004,"line":1047},[1002,116770,2804],{"class":1030},[1002,116772,116773,116775],{"class":1004,"line":1054},[1002,116774,3455],{"class":1019},[1002,116776,1407],{"class":1030},[925,116778,116779],{},[1107,116780,116781],{},"Noun Resources",[993,116783,116785],{"className":995,"code":116784,"language":997,"meta":998,"style":998},"this.resource('tree');\nthis.resource('review');\nthis.resource('books');\nthis.resource('contacts');\n",[941,116786,116787,116802,116817,116832],{"__ignoreMap":998},[1002,116788,116789,116791,116793,116795,116797,116800],{"class":1004,"line":1005},[1002,116790,3455],{"class":1019},[1002,116792,948],{"class":1030},[1002,116794,107253],{"class":1026},[1002,116796,1031],{"class":1030},[1002,116798,116799],{"class":1034},"'tree'",[1002,116801,1085],{"class":1030},[1002,116803,116804,116806,116808,116810,116812,116815],{"class":1004,"line":1012},[1002,116805,3455],{"class":1019},[1002,116807,948],{"class":1030},[1002,116809,107253],{"class":1026},[1002,116811,1031],{"class":1030},[1002,116813,116814],{"class":1034},"'review'",[1002,116816,1085],{"class":1030},[1002,116818,116819,116821,116823,116825,116827,116830],{"class":1004,"line":1047},[1002,116820,3455],{"class":1019},[1002,116822,948],{"class":1030},[1002,116824,107253],{"class":1026},[1002,116826,1031],{"class":1030},[1002,116828,116829],{"class":1034},"'books'",[1002,116831,1085],{"class":1030},[1002,116833,116834,116836,116838,116840,116842,116845],{"class":1004,"line":1054},[1002,116835,3455],{"class":1019},[1002,116837,948],{"class":1030},[1002,116839,107253],{"class":1026},[1002,116841,1031],{"class":1030},[1002,116843,116844],{"class":1034},"'contacts'",[1002,116846,1085],{"class":1030},[925,116848,116849],{},"There can be singular or plural. The resource keyword has some additional functionality.",[953,116851,116853],{"id":116852},"resource-route-options","Resource Route Options",[925,116855,116856],{},[1107,116857,47429],{},[993,116859,116861],{"className":995,"code":116860,"language":997,"meta":998,"style":998},"App.Router.map(function () {\n this.route('about');\n this.resource('products', { path: '\u002Fitems' });\n});\n",[941,116862,116863,116875,116889,116908],{"__ignoreMap":998},[1002,116864,116865,116867,116869,116871,116873],{"class":1004,"line":1005},[1002,116866,116558],{"class":1030},[1002,116868,19444],{"class":1026},[1002,116870,1031],{"class":1030},[1002,116872,6965],{"class":1015},[1002,116874,9772],{"class":1030},[1002,116876,116877,116879,116881,116883,116885,116887],{"class":1004,"line":1012},[1002,116878,39364],{"class":1019},[1002,116880,948],{"class":1030},[1002,116882,66565],{"class":1026},[1002,116884,1031],{"class":1030},[1002,116886,67536],{"class":1034},[1002,116888,1085],{"class":1030},[1002,116890,116891,116893,116895,116897,116899,116901,116903,116906],{"class":1004,"line":1047},[1002,116892,39364],{"class":1019},[1002,116894,948],{"class":1030},[1002,116896,107253],{"class":1026},[1002,116898,1031],{"class":1030},[1002,116900,107258],{"class":1034},[1002,116902,107280],{"class":1030},[1002,116904,116905],{"class":1034},"'\u002Fitems'",[1002,116907,28417],{"class":1030},[1002,116909,116910],{"class":1004,"line":1054},[1002,116911,2804],{"class":1030},[953,116913,116915],{"id":116914},"resource-views","Resource Views",[925,116917,116918],{},[1107,116919,47429],{},[993,116921,116923],{"className":995,"code":116922,"language":997,"meta":998,"style":998},"App.Router.map(function() {\n this.route('about');\n});\nthis.\n",[941,116924,116925,116937,116951,116955],{"__ignoreMap":998},[1002,116926,116927,116929,116931,116933,116935],{"class":1004,"line":1005},[1002,116928,116558],{"class":1030},[1002,116930,19444],{"class":1026},[1002,116932,1031],{"class":1030},[1002,116934,6965],{"class":1015},[1002,116936,3025],{"class":1030},[1002,116938,116939,116941,116943,116945,116947,116949],{"class":1004,"line":1012},[1002,116940,2387],{"class":1019},[1002,116942,948],{"class":1030},[1002,116944,66565],{"class":1026},[1002,116946,1031],{"class":1030},[1002,116948,67536],{"class":1034},[1002,116950,1085],{"class":1030},[1002,116952,116953],{"class":1004,"line":1047},[1002,116954,2804],{"class":1030},[1002,116956,116957,116959],{"class":1004,"line":1054},[1002,116958,3455],{"class":1019},[1002,116960,116961],{"class":1030},".\n",[925,116963,116964],{},[1107,116965,37877],{},[993,116967,116969],{"className":995,"code":116968,"language":997,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"products\">\n \u003Ch1>Products\u003C\u002Fh1>\n\u003C\u002Fscript>\n",[941,116970,116971,116993,117006],{"__ignoreMap":998},[1002,116972,116973,116975,116977,116979,116981,116984,116986,116988,116991],{"class":1004,"line":1005},[1002,116974,6539],{"class":1030},[1002,116976,22063],{"class":15711},[1002,116978,29274],{"class":1026},[1002,116980,2393],{"class":1015},[1002,116982,116983],{"class":1034},"\"text\u002Fx-handlebars\"",[1002,116985,116486],{"class":1026},[1002,116987,2393],{"class":1015},[1002,116989,116990],{"class":1034},"\"products\"",[1002,116992,15703],{"class":1030},[1002,116994,116995,116997,116999,117002,117004],{"class":1004,"line":1012},[1002,116996,22427],{"class":1030},[1002,116998,15201],{"class":15711},[1002,117000,117001],{"class":1030},">Products\u003C\u002F",[1002,117003,15201],{"class":15711},[1002,117005,15703],{"class":1030},[1002,117007,117008,117010,117012],{"class":1004,"line":1047},[1002,117009,22437],{"class":1030},[1002,117011,22063],{"class":15711},[1002,117013,15703],{"class":1030},[925,117015,117016],{},"Here the data-template-name matches the route name.",[953,117018,117020],{"id":117019},"linking-to-resources","Linking to Resources",[925,117022,117023],{},"We can link to this route with its name like any other.",[925,117025,117026],{},[1107,117027,37877],{},[993,117029,117031],{"className":995,"code":117030,"language":997,"meta":998,"style":998},"\u003Cscript type='text\u002Fx-handlebars' data-template-name='application'>\n ...\n {{#link-to 'products' tagName='li'}}Products{{\u002Flink-to}}\n ...\n\u003C\u002Fscript>\n",[941,117032,117033,117055,117059,117074,117078],{"__ignoreMap":998},[1002,117034,117035,117037,117039,117041,117043,117046,117048,117050,117053],{"class":1004,"line":1005},[1002,117036,6539],{"class":1030},[1002,117038,22063],{"class":15711},[1002,117040,29274],{"class":1026},[1002,117042,2393],{"class":1015},[1002,117044,117045],{"class":1034},"'text\u002Fx-handlebars'",[1002,117047,116486],{"class":1026},[1002,117049,2393],{"class":1015},[1002,117051,117052],{"class":1034},"'application'",[1002,117054,15703],{"class":1030},[1002,117056,117057],{"class":1004,"line":1012},[1002,117058,48894],{"class":1030},[1002,117060,117061,117064,117066,117069,117071],{"class":1004,"line":1047},[1002,117062,117063],{"class":1030}," {{#link-to ",[1002,117065,107258],{"class":1034},[1002,117067,117068],{"class":1030}," tagName=",[1002,117070,112386],{"class":1034},[1002,117072,117073],{"class":1030},"}}Products{{\u002Flink-to}}\n",[1002,117075,117076],{"class":1004,"line":1054},[1002,117077,48894],{"class":1030},[1002,117079,117080,117082,117084],{"class":1004,"line":1060},[1002,117081,22437],{"class":1030},[1002,117083,22063],{"class":15711},[1002,117085,15703],{"class":1030},[953,117087,117089],{"id":117088},"ember-route","Ember Route",[925,117091,117092],{},"Ember Route fetches data and passes it to the Ember Controller. It decides on what model to use for the current route.\nAnd it decides which template to render to the screen.",[925,117094,117095],{},"A model could be a JavaScript Object or an Array of objects.",[925,117097,117098],{},"Ember Router - Translates a path into a route.\nEmber Route - Provides data for the controller.",[925,117100,117101],{},"Don’t get these confused!",[953,117103,117105],{"id":117104},"router-route-controller","Router? Route? Controller?",[1530,117107,117108,117132,117155],{},[974,117109,117110,117112,117113],{},[1107,117111,69052],{}," Used to define routes our application accepts",[993,117114,117116],{"className":995,"code":117115,"language":997,"meta":998,"style":998},"this.resource('products');\n",[941,117117,117118],{"__ignoreMap":998},[1002,117119,117120,117122,117124,117126,117128,117130],{"class":1004,"line":1005},[1002,117121,3455],{"class":1019},[1002,117123,948],{"class":1030},[1002,117125,107253],{"class":1026},[1002,117127,1031],{"class":1030},[1002,117129,107258],{"class":1034},[1002,117131,1085],{"class":1030},[974,117133,117134,117135,117152,117154],{},"Responsible for getting data from external resources",[993,117136,117138],{"className":995,"code":117137,"language":997,"meta":998,"style":998},"App.ProductsRoute = Ember.Route.extend({});\n",[941,117139,117140],{"__ignoreMap":998},[1002,117141,117142,117144,117146,117148,117150],{"class":1004,"line":1005},[1002,117143,106584],{"class":1030},[1002,117145,2393],{"class":1015},[1002,117147,106589],{"class":1030},[1002,117149,106592],{"class":1026},[1002,117151,106724],{"class":1030},[96859,117153],{},"Created by Ember if not defined.",[974,117156,117157,117158,117176,117154],{},"Decorates the model, provides property values",[993,117159,117161],{"className":995,"code":117160,"language":997,"meta":998,"style":998},"App.ProductsController = Ember.Controller.extend({});\n",[941,117162,117163],{"__ignoreMap":998},[1002,117164,117165,117168,117170,117172,117174],{"class":1004,"line":1005},[1002,117166,117167],{"class":1030},"App.ProductsController ",[1002,117169,2393],{"class":1015},[1002,117171,116399],{"class":1030},[1002,117173,106592],{"class":1026},[1002,117175,106724],{"class":1030},[96859,117177],{},[953,117179,117181],{"id":117180},"a-very-basic-model","A Very Basic Model",[925,117183,117184],{},[1107,117185,47429],{},[993,117187,117189],{"className":995,"code":117188,"language":997,"meta":998,"style":998},"App.PRODUCTS = [\n {\n title: 'Flint',\n price: 99,\n description: 'Flint is…',\n isOnSale: true,\n image: 'flint.png',\n },\n {\n title: 'Kindling',\n price: 249,\n description: 'Easily…',\n isOnSale: false,\n image: 'kindling.png',\n },\n];\n\nApp.ProductsRoute = Ember.Route.extend({\n model: function () {\n return App.PRODUCTS;\n },\n});\n",[941,117190,117191,117201,117205,117213,117221,117230,117238,117246,117250,117254,117262,117270,117279,117287,117295,117299,117303,117307,117319,117329,117339,117343],{"__ignoreMap":998},[1002,117192,117193,117195,117197,117199],{"class":1004,"line":1005},[1002,117194,106564],{"class":1030},[1002,117196,106567],{"class":1019},[1002,117198,1023],{"class":1015},[1002,117200,10274],{"class":1030},[1002,117202,117203],{"class":1004,"line":1012},[1002,117204,1235],{"class":1030},[1002,117206,117207,117209,117211],{"class":1004,"line":1047},[1002,117208,29577],{"class":1030},[1002,117210,106753],{"class":1034},[1002,117212,1143],{"class":1030},[1002,117214,117215,117217,117219],{"class":1004,"line":1054},[1002,117216,107017],{"class":1030},[1002,117218,106765],{"class":1019},[1002,117220,1143],{"class":1030},[1002,117222,117223,117225,117228],{"class":1004,"line":1060},[1002,117224,19827],{"class":1030},[1002,117226,117227],{"class":1034},"'Flint is…'",[1002,117229,1143],{"class":1030},[1002,117231,117232,117234,117236],{"class":1004,"line":1272},[1002,117233,107034],{"class":1030},[1002,117235,17397],{"class":1019},[1002,117237,1143],{"class":1030},[1002,117239,117240,117242,117244],{"class":1004,"line":1348},[1002,117241,107043],{"class":1030},[1002,117243,107046],{"class":1034},[1002,117245,1143],{"class":1030},[1002,117247,117248],{"class":1004,"line":1354},[1002,117249,1502],{"class":1030},[1002,117251,117252],{"class":1004,"line":1360},[1002,117253,1235],{"class":1030},[1002,117255,117256,117258,117260],{"class":1004,"line":1366},[1002,117257,29577],{"class":1030},[1002,117259,107063],{"class":1034},[1002,117261,1143],{"class":1030},[1002,117263,117264,117266,117268],{"class":1004,"line":1946},[1002,117265,107017],{"class":1030},[1002,117267,107072],{"class":1019},[1002,117269,1143],{"class":1030},[1002,117271,117272,117274,117277],{"class":1004,"line":1956},[1002,117273,19827],{"class":1030},[1002,117275,117276],{"class":1034},"'Easily…'",[1002,117278,1143],{"class":1030},[1002,117280,117281,117283,117285],{"class":1004,"line":1961},[1002,117282,107034],{"class":1030},[1002,117284,19341],{"class":1019},[1002,117286,1143],{"class":1030},[1002,117288,117289,117291,117293],{"class":1004,"line":1971},[1002,117290,107043],{"class":1030},[1002,117292,107098],{"class":1034},[1002,117294,1143],{"class":1030},[1002,117296,117297],{"class":1004,"line":1980},[1002,117298,1502],{"class":1030},[1002,117300,117301],{"class":1004,"line":1985},[1002,117302,6754],{"class":1030},[1002,117304,117305],{"class":1004,"line":1995},[1002,117306,1051],{"emptyLinePlaceholder":1050},[1002,117308,117309,117311,117313,117315,117317],{"class":1004,"line":2006},[1002,117310,106584],{"class":1030},[1002,117312,2393],{"class":1015},[1002,117314,106589],{"class":1030},[1002,117316,106592],{"class":1026},[1002,117318,2756],{"class":1030},[1002,117320,117321,117323,117325,117327],{"class":1004,"line":2011},[1002,117322,106599],{"class":1026},[1002,117324,1137],{"class":1030},[1002,117326,6965],{"class":1015},[1002,117328,9772],{"class":1030},[1002,117330,117331,117333,117335,117337],{"class":1004,"line":2017},[1002,117332,2687],{"class":1015},[1002,117334,106612],{"class":1030},[1002,117336,106567],{"class":1019},[1002,117338,1407],{"class":1030},[1002,117340,117341],{"class":1004,"line":2022},[1002,117342,1502],{"class":1030},[1002,117344,117345],{"class":1004,"line":2442},[1002,117346,2804],{"class":1030},[925,117348,117349],{},"Above highlighted image could be pulled from an API. and the model property should return an\nan object or an array.",[953,117351,117353],{"id":117352},"putting-it-all-together","Putting it All Together",[925,117355,117356,117358],{},[1107,117357,69052],{}," The Route is responsible for fetching the model. Ember will set\nthis model on the Controller, and that’s what’ll be used in your\nHandlebars Template.",[925,117360,117361,117363],{},[1107,117362,64350],{}," Model",[925,117365,117366],{},[1107,117367,117368],{},"Controller",[925,117370,117371],{},[1107,117372,37877],{},[993,117374,117376],{"className":37880,"code":117375,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"products\">\n ## Products\n {{model}}\n\u003C\u002Fscript>\n",[941,117377,117378,117398,117403,117408],{"__ignoreMap":998},[1002,117379,117380,117382,117384,117386,117388,117390,117392,117394,117396],{"class":1004,"line":1005},[1002,117381,6539],{"class":1030},[1002,117383,22063],{"class":15711},[1002,117385,29274],{"class":1026},[1002,117387,2393],{"class":1030},[1002,117389,116983],{"class":1034},[1002,117391,116486],{"class":1026},[1002,117393,2393],{"class":1030},[1002,117395,116990],{"class":1034},[1002,117397,15703],{"class":1030},[1002,117399,117400],{"class":1004,"line":1012},[1002,117401,117402],{"class":1030}," ## Products\n",[1002,117404,117405],{"class":1004,"line":1047},[1002,117406,117407],{"class":1030}," {{model}}\n",[1002,117409,117410,117412,117414],{"class":1004,"line":1054},[1002,117411,22437],{"class":1030},[1002,117413,22063],{"class":15711},[1002,117415,15703],{"class":1030},[953,117417,117419],{"id":117418},"rendering-the-model","Rendering the Model",[993,117421,117422],{"className":37880,"code":117375,"language":383,"meta":998,"style":998},[941,117423,117424,117444,117448,117452],{"__ignoreMap":998},[1002,117425,117426,117428,117430,117432,117434,117436,117438,117440,117442],{"class":1004,"line":1005},[1002,117427,6539],{"class":1030},[1002,117429,22063],{"class":15711},[1002,117431,29274],{"class":1026},[1002,117433,2393],{"class":1030},[1002,117435,116983],{"class":1034},[1002,117437,116486],{"class":1026},[1002,117439,2393],{"class":1030},[1002,117441,116990],{"class":1034},[1002,117443,15703],{"class":1030},[1002,117445,117446],{"class":1004,"line":1012},[1002,117447,117402],{"class":1030},[1002,117449,117450],{"class":1004,"line":1047},[1002,117451,117407],{"class":1030},[1002,117453,117454,117456,117458],{"class":1004,"line":1054},[1002,117455,22437],{"class":1030},[1002,117457,22063],{"class":15711},[1002,117459,15703],{"class":1030},[925,117461,43464],{},[993,117463,117465],{"className":995,"code":117464,"language":997,"meta":998,"style":998},"## Products\n[object Object],[object Object]\n",[941,117466,117467,117472],{"__ignoreMap":998},[1002,117468,117469],{"class":1004,"line":1005},[1002,117470,117471],{"class":1030},"## Products\n",[1002,117473,117474],{"class":1004,"line":1012},[1002,117475,117476],{"class":1030},"[object Object],[object Object]\n",[925,117478,117479],{},"Model is an array, so we’ll need to loop over it!",[953,117481,117483],{"id":117482},"looping-over-the-array-of-objects","Looping Over the Array of Objects",[925,117485,117486],{},[1107,117487,37877],{},[993,117489,117491],{"className":37880,"code":117490,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"products\">\n ## Products\n {{#each product in model}}\n ## {{product.title}}\n {{\u002Feach}}\n\u003C\u002Fscript>\n",[941,117492,117493,117513,117517,117522,117527,117532],{"__ignoreMap":998},[1002,117494,117495,117497,117499,117501,117503,117505,117507,117509,117511],{"class":1004,"line":1005},[1002,117496,6539],{"class":1030},[1002,117498,22063],{"class":15711},[1002,117500,29274],{"class":1026},[1002,117502,2393],{"class":1030},[1002,117504,116983],{"class":1034},[1002,117506,116486],{"class":1026},[1002,117508,2393],{"class":1030},[1002,117510,116990],{"class":1034},[1002,117512,15703],{"class":1030},[1002,117514,117515],{"class":1004,"line":1012},[1002,117516,117402],{"class":1030},[1002,117518,117519],{"class":1004,"line":1047},[1002,117520,117521],{"class":1030}," {{#each product in model}}\n",[1002,117523,117524],{"class":1004,"line":1054},[1002,117525,117526],{"class":1030}," ## {{product.title}}\n",[1002,117528,117529],{"class":1004,"line":1060},[1002,117530,117531],{"class":1030}," {{\u002Feach}}\n",[1002,117533,117534,117536,117538],{"class":1004,"line":1272},[1002,117535,22437],{"class":1030},[1002,117537,22063],{"class":15711},[1002,117539,15703],{"class":1030},[925,117541,43464],{},[993,117543,117545],{"className":37880,"code":117544,"language":383,"meta":998,"style":998},"\u003Ch1>Products\u003C\u002Fh1>\n## Flint ## Kindling\n",[941,117546,117547,117559],{"__ignoreMap":998},[1002,117548,117549,117551,117553,117555,117557],{"class":1004,"line":1005},[1002,117550,6539],{"class":1030},[1002,117552,15201],{"class":15711},[1002,117554,117001],{"class":1030},[1002,117556,15201],{"class":15711},[1002,117558,15703],{"class":1030},[1002,117560,117561],{"class":1004,"line":1012},[1002,117562,117563],{"class":1030},"## Flint ## Kindling\n",[953,117565,117567,117568,117571],{"id":117566},"a-simpler-each-loop","A Simpler ",[941,117569,117570],{},"#each"," Loop",[925,117573,117574,117576],{},[941,117575,117570],{}," without extra options will look for a model property.",[925,117578,117579],{},[1107,117580,37877],{},[993,117582,117584],{"className":37880,"code":117583,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"products\">\n ...\n {{#each}}\n ## {{title}}\n {{\u002Feach}}\n\u003C\u002Fscript>\n",[941,117585,117586,117606,117610,117615,117620,117624],{"__ignoreMap":998},[1002,117587,117588,117590,117592,117594,117596,117598,117600,117602,117604],{"class":1004,"line":1005},[1002,117589,6539],{"class":1030},[1002,117591,22063],{"class":15711},[1002,117593,29274],{"class":1026},[1002,117595,2393],{"class":1030},[1002,117597,116983],{"class":1034},[1002,117599,116486],{"class":1026},[1002,117601,2393],{"class":1030},[1002,117603,116990],{"class":1034},[1002,117605,15703],{"class":1030},[1002,117607,117608],{"class":1004,"line":1012},[1002,117609,18213],{"class":1030},[1002,117611,117612],{"class":1004,"line":1047},[1002,117613,117614],{"class":1030}," {{#each}}\n",[1002,117616,117617],{"class":1004,"line":1054},[1002,117618,117619],{"class":1030}," ## {{title}}\n",[1002,117621,117622],{"class":1004,"line":1060},[1002,117623,117531],{"class":1030},[1002,117625,117626,117628,117630],{"class":1004,"line":1272},[1002,117627,22437],{"class":1030},[1002,117629,22063],{"class":15711},[1002,117631,15703],{"class":1030},[925,117633,117634],{},"Within the #each loop, you can access properties on that product",[925,117636,117637],{},[1107,117638,37877],{},[993,117640,117642],{"className":37880,"code":117641,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"products\">\n \u003Ch1>Products\u003C\u002Fh1>\n \u003Cul class='list-unstyled col-md-8'>\n {{#each}}\n \u003Cli class='row'>\n \u003Cimg {{bind-attr src='image'}} class='img-thumbnail col-md-5'\u002F>\n \u003Cdiv class='col-md-7'>\n ## {{title}}\n \u003Cp class='product-description'>{{description}}\n \u003Cbutton class='btn btn-success'>Buy for ${{price}}\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n {{\u002Feach}}\n\u003C\u002Fscript>\n",[941,117643,117644,117664,117676,117691,117695,117710,117737,117752,117757,117773,117793,117801,117805,117809],{"__ignoreMap":998},[1002,117645,117646,117648,117650,117652,117654,117656,117658,117660,117662],{"class":1004,"line":1005},[1002,117647,6539],{"class":1030},[1002,117649,22063],{"class":15711},[1002,117651,29274],{"class":1026},[1002,117653,2393],{"class":1030},[1002,117655,116983],{"class":1034},[1002,117657,116486],{"class":1026},[1002,117659,2393],{"class":1030},[1002,117661,116990],{"class":1034},[1002,117663,15703],{"class":1030},[1002,117665,117666,117668,117670,117672,117674],{"class":1004,"line":1012},[1002,117667,22427],{"class":1030},[1002,117669,15201],{"class":15711},[1002,117671,117001],{"class":1030},[1002,117673,15201],{"class":15711},[1002,117675,15703],{"class":1030},[1002,117677,117678,117680,117682,117684,117686,117689],{"class":1004,"line":1047},[1002,117679,22427],{"class":1030},[1002,117681,1530],{"class":15711},[1002,117683,17187],{"class":1026},[1002,117685,2393],{"class":1030},[1002,117687,117688],{"class":1034},"'list-unstyled col-md-8'",[1002,117690,15703],{"class":1030},[1002,117692,117693],{"class":1004,"line":1054},[1002,117694,117614],{"class":1030},[1002,117696,117697,117699,117701,117703,117705,117708],{"class":1004,"line":1060},[1002,117698,22427],{"class":1030},[1002,117700,974],{"class":15711},[1002,117702,17187],{"class":1026},[1002,117704,2393],{"class":1030},[1002,117706,117707],{"class":1034},"'row'",[1002,117709,15703],{"class":1030},[1002,117711,117712,117714,117716,117719,117721,117723,117725,117728,117730,117732,117735],{"class":1004,"line":1272},[1002,117713,15697],{"class":1030},[1002,117715,963],{"class":15711},[1002,117717,117718],{"class":1026}," {{bind-attr",[1002,117720,15242],{"class":1026},[1002,117722,2393],{"class":1030},[1002,117724,16824],{"class":1034},[1002,117726,117727],{"class":1026},"}}",[1002,117729,17187],{"class":1026},[1002,117731,2393],{"class":1030},[1002,117733,117734],{"class":1034},"'img-thumbnail col-md-5'",[1002,117736,19039],{"class":1030},[1002,117738,117739,117741,117743,117745,117747,117750],{"class":1004,"line":1348},[1002,117740,15697],{"class":1030},[1002,117742,19650],{"class":15711},[1002,117744,17187],{"class":1026},[1002,117746,2393],{"class":1030},[1002,117748,117749],{"class":1034},"'col-md-7'",[1002,117751,15703],{"class":1030},[1002,117753,117754],{"class":1004,"line":1354},[1002,117755,117756],{"class":1030}," ## {{title}}\n",[1002,117758,117759,117761,117763,117765,117767,117770],{"class":1004,"line":1360},[1002,117760,15697],{"class":1030},[1002,117762,925],{"class":15711},[1002,117764,17187],{"class":1026},[1002,117766,2393],{"class":1030},[1002,117768,117769],{"class":1034},"'product-description'",[1002,117771,117772],{"class":1030},">{{description}}\n",[1002,117774,117775,117777,117779,117781,117783,117786,117789,117791],{"class":1004,"line":1366},[1002,117776,15697],{"class":1030},[1002,117778,16365],{"class":15711},[1002,117780,17187],{"class":1026},[1002,117782,2393],{"class":1030},[1002,117784,117785],{"class":1034},"'btn btn-success'",[1002,117787,117788],{"class":1030},">Buy for ${{price}}\u003C\u002F",[1002,117790,16365],{"class":15711},[1002,117792,15703],{"class":1030},[1002,117794,117795,117797,117799],{"class":1004,"line":1946},[1002,117796,19647],{"class":1030},[1002,117798,19650],{"class":15711},[1002,117800,15703],{"class":1030},[1002,117802,117803],{"class":1004,"line":1956},[1002,117804,1051],{"emptyLinePlaceholder":1050},[1002,117806,117807],{"class":1004,"line":1961},[1002,117808,117531],{"class":1030},[1002,117810,117811,117813,117815],{"class":1004,"line":1971},[1002,117812,22437],{"class":1030},[1002,117814,22063],{"class":15711},[1002,117816,15703],{"class":1030},[925,117818,117819],{},"Output a few more properties and add some styling.",[1579,117821,117822],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":117824},[117825,117826,117828,117829,117830,117831,117832,117833,117834,117835,117836,117837],{"id":116543,"depth":1012,"text":116544},{"id":116727,"depth":1012,"text":117827},"Use Resource Routes for Nouns",{"id":116852,"depth":1012,"text":116853},{"id":116914,"depth":1012,"text":116915},{"id":117019,"depth":1012,"text":117020},{"id":117088,"depth":1012,"text":117089},{"id":117104,"depth":1012,"text":117105},{"id":117180,"depth":1012,"text":117181},{"id":117352,"depth":1012,"text":117353},{"id":117418,"depth":1012,"text":117419},{"id":117482,"depth":1012,"text":117483},{"id":117566,"depth":1012,"text":117838},"A Simpler #each Loop","2014-12-02","\u002Fimages\u002Fblog\u002Ffeatures\u002Fember-resource-routes.jpg",{},{"title":175,"description":177},"blog\u002Fember-resource-routes",[16,17,173],"55HSZemEZJmmEugyjT1x0GBxdUv_xCEnFqhkUY7rjRY",{"id":117847,"title":558,"author":920,"body":117848,"date":118084,"description":560,"extension":1591,"image":118085,"meta":118086,"navigation":1050,"path":559,"seo":118087,"stem":118088,"tags":118089,"__hash__":118090},"blog\u002Fblog\u002Fmobile-web-introduction.md",{"type":922,"value":117849,"toc":118077},[117850,117853,117857,117860,117871,117875,117878,117882,117885,117888,117892,117902,117906,117911,117914,117922,117925,117930,117933,117997,118000,118005,118008,118071,118074],[925,117851,117852],{},"The web itself is not only targeted for the desktop. It should be accessible from any device, as in ** the internet of things**. Tim Berners-Lee once said \"The primary design principle underlying the Web's usefulness and growth is universality\"",[953,117854,117856],{"id":117855},"web-design","Web Design",[925,117858,117859],{},"Web design consists of three things:",[1530,117861,117862,117865,117868],{},[974,117863,117864],{},"Mobile Design",[974,117866,117867],{},"Adaptive Design",[974,117869,117870],{},"Responsive Design",[953,117872,117874],{"id":117873},"mobile-design-with-fluid-layout","Mobile Design with Fluid Layout",[925,117876,117877],{},"A fluid layout is a layout that uses proportional values as a measuring unit for blocks of content, images, or any other item that is a part of the WordPress theme. This allows the web page to stretch and contract relative to the user's screen size.",[953,117879,117881],{"id":117880},"why-proportional-layouts-are-essential-for-responsive-designs","Why proportional layouts are essential for responsive designs?",[925,117883,117884],{},"Whilst media queries are powerful, we are now aware of some limitations. Any fixed-width design, using only media queries to adapt for different viewports, will merely 'snap' from one set of CSS media query rules to the next with no linear progression between the two.",[925,117886,117887],{},"Instead, we want to create a design that flexes and looks good on all viewports, not just particular ones specified in a media query. Which concludes that we need to switch our fixed, pixel-based layouts to fluid, proportional ones. This will enable elements to scale relative to the viewport until one media query or another modifies the styling.",[953,117889,117891],{"id":117890},"proportional-layouts-and-media-queries","Proportional layouts and media queries",[925,117893,117894,117897,117898,117901],{},[1107,117895,117896],{},"Ethan Marcotte"," wrote the definitive article on Responsive Web Design at ",[1107,117899,117900],{},"A List Apart"," – new ways to create web pages that offered the best of both worlds: a way to have a fluid flexible design based on a proportional layout, whilst being able to limit how far elements could flex with media queries. Putting them together forms the core of a responsive design, creating something truly greater than the sum of its parts.",[953,117903,117905],{"id":117904},"a-formula-to-remember","A formula to remember",[925,117907,117908,117910],{},[1107,117909,117896],{}," provided a simple formula for converting fixed width pixels into proportional percentages:",[925,117912,117913],{},"target ÷ context = result",[925,117915,117916,117918,117919,117921],{},[1107,117917,17247],{}," target font size\n",[1107,117920,6028],{}," font size of containing element",[925,117923,117924],{},"Example:",[925,117926,117927],{},[941,117928,117929],{},"30px ÷ 10px = 3em",[925,117931,117932],{},"Let's see this formula in action:",[993,117934,117936],{"className":35707,"code":117935,"language":29,"meta":998,"style":998},"h1 a {\n font-size: 14px;\n text-transform: uppercase;\n text-decoration: none;\n color: #6c564b;\n}\n",[941,117937,117938,117947,117959,117971,117982,117993],{"__ignoreMap":998},[1002,117939,117940,117942,117945],{"class":1004,"line":1005},[1002,117941,15201],{"class":15711},[1002,117943,117944],{"class":15711}," a",[1002,117946,1457],{"class":1030},[1002,117948,117949,117951,117953,117955,117957],{"class":1004,"line":1012},[1002,117950,37355],{"class":1019},[1002,117952,1137],{"class":1030},[1002,117954,99104],{"class":1019},[1002,117956,43835],{"class":1015},[1002,117958,1407],{"class":1030},[1002,117960,117961,117964,117966,117969],{"class":1004,"line":1047},[1002,117962,117963],{"class":1019}," text-transform",[1002,117965,1137],{"class":1030},[1002,117967,117968],{"class":1019},"uppercase",[1002,117970,1407],{"class":1030},[1002,117972,117973,117976,117978,117980],{"class":1004,"line":1054},[1002,117974,117975],{"class":1019}," text-decoration",[1002,117977,1137],{"class":1030},[1002,117979,36079],{"class":1019},[1002,117981,1407],{"class":1030},[1002,117983,117984,117986,117988,117991],{"class":1004,"line":1060},[1002,117985,35952],{"class":1019},[1002,117987,1137],{"class":1030},[1002,117989,117990],{"class":1019},"#6c564b",[1002,117992,1407],{"class":1030},[1002,117994,117995],{"class":1004,"line":1272},[1002,117996,1170],{"class":1030},[925,117998,117999],{},"Let's convert the font-size into proportional percentages, provided context being 30px.",[925,118001,118002],{},[941,118003,118004],{},"14px ÷ 30px = 0.4666667em",[925,118006,118007],{},"The result will look as follows:",[993,118009,118011],{"className":35707,"code":118010,"language":29,"meta":998,"style":998},"h1 a {\n font-size: 0.46666667em; \u002F* 14px\u002F30px *\u002F\n text-transform: uppercase;\n text-decoration: none;\n color: #6c564b;\n}\n",[941,118012,118013,118021,118037,118047,118057,118067],{"__ignoreMap":998},[1002,118014,118015,118017,118019],{"class":1004,"line":1005},[1002,118016,15201],{"class":15711},[1002,118018,117944],{"class":15711},[1002,118020,1457],{"class":1030},[1002,118022,118023,118025,118027,118030,118032,118034],{"class":1004,"line":1012},[1002,118024,37355],{"class":1019},[1002,118026,1137],{"class":1030},[1002,118028,118029],{"class":1019},"0.46666667",[1002,118031,928],{"class":1015},[1002,118033,17938],{"class":1030},[1002,118035,118036],{"class":1008},"\u002F* 14px\u002F30px *\u002F\n",[1002,118038,118039,118041,118043,118045],{"class":1004,"line":1047},[1002,118040,117963],{"class":1019},[1002,118042,1137],{"class":1030},[1002,118044,117968],{"class":1019},[1002,118046,1407],{"class":1030},[1002,118048,118049,118051,118053,118055],{"class":1004,"line":1054},[1002,118050,117975],{"class":1019},[1002,118052,1137],{"class":1030},[1002,118054,36079],{"class":1019},[1002,118056,1407],{"class":1030},[1002,118058,118059,118061,118063,118065],{"class":1004,"line":1060},[1002,118060,35952],{"class":1019},[1002,118062,1137],{"class":1030},[1002,118064,117990],{"class":1019},[1002,118066,1407],{"class":1030},[1002,118068,118069],{"class":1004,"line":1272},[1002,118070,1170],{"class":1030},[925,118072,118073],{},"Note that there's no need to round.",[1579,118075,118076],{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":118078},[118079,118080,118081,118082,118083],{"id":117855,"depth":1012,"text":117856},{"id":117873,"depth":1012,"text":117874},{"id":117880,"depth":1012,"text":117881},{"id":117890,"depth":1012,"text":117891},{"id":117904,"depth":1012,"text":117905},"2014-12-01","\u002Fimages\u002Fblog\u002Ffeatures\u002Fmobile-web-introduction.jpg",{},{"title":558,"description":560},"blog\u002Fmobile-web-introduction",[16,29,161],"FjBxLzrYpsg9nv_TsqPeks9XYE1Kdpjp8q-btdRfFs0",{"id":118092,"title":131,"author":920,"body":118093,"date":119091,"description":133,"extension":1591,"image":119092,"meta":119093,"navigation":1050,"path":132,"seo":119094,"stem":119095,"tags":119096,"__hash__":119097},"blog\u002Fblog\u002Fcss-introduction.md",{"type":922,"value":118094,"toc":119077},[118095,118099,118102,118106,118111,118136,118142,118201,118208,118262,118266,118269,118273,118277,118307,118311,118350,118354,118358,118386,118390,118427,118431,118435,118463,118467,118505,118509,118513,118541,118545,118584,118588,118591,118607,118610,118613,118660,118666,118669,118729,118732,118781,118785,118792,118838,118863,118866,118872,118878,118882,118885,118890,118893,118970,119017,119023,119068,119074],[953,118096,118098],{"id":118097},"using-css","Using CSS",[925,118100,118101],{},"CSS can be added in different ways.",[953,118103,118105],{"id":118104},"slope-style","Slope Style",[1530,118107,118108],{},[974,118109,118110],{},"Inline style attribute",[993,118112,118114],{"className":37880,"code":118113,"language":383,"meta":998,"style":998},"\u003Ch1 style=\"color: #98c7d4;\">CSS Cross Country\u003C\u002Fh1>\n",[941,118115,118116],{"__ignoreMap":998},[1002,118117,118118,118120,118122,118124,118126,118129,118132,118134],{"class":1004,"line":1005},[1002,118119,6539],{"class":1030},[1002,118121,15201],{"class":15711},[1002,118123,29393],{"class":1026},[1002,118125,2393],{"class":1030},[1002,118127,118128],{"class":1034},"\"color: #98c7d4;\"",[1002,118130,118131],{"class":1030},">CSS Cross Country\u003C\u002F",[1002,118133,15201],{"class":15711},[1002,118135,15703],{"class":1030},[1530,118137,118138],{},[974,118139,35079,118140],{},[941,118141,16028],{},[993,118143,118145],{"className":37880,"code":118144,"language":383,"meta":998,"style":998},"\u003Chead>\n \u003Cstyle>\n h1 {\n color: #98c7d4;\n }\n \u003C\u002Fstyle>\n\u003C\u002Fhead>\n",[941,118146,118147,118155,118163,118170,118181,118185,118193],{"__ignoreMap":998},[1002,118148,118149,118151,118153],{"class":1004,"line":1005},[1002,118150,6539],{"class":1030},[1002,118152,32092],{"class":15711},[1002,118154,15703],{"class":1030},[1002,118156,118157,118159,118161],{"class":1004,"line":1012},[1002,118158,22427],{"class":1030},[1002,118160,1579],{"class":15711},[1002,118162,15703],{"class":1030},[1002,118164,118165,118168],{"class":1004,"line":1047},[1002,118166,118167],{"class":15711}," h1",[1002,118169,1457],{"class":1030},[1002,118171,118172,118174,118176,118179],{"class":1004,"line":1054},[1002,118173,35874],{"class":1019},[1002,118175,1137],{"class":1030},[1002,118177,118178],{"class":1019},"#98c7d4",[1002,118180,1407],{"class":1030},[1002,118182,118183],{"class":1004,"line":1060},[1002,118184,2014],{"class":1030},[1002,118186,118187,118189,118191],{"class":1004,"line":1272},[1002,118188,28112],{"class":1030},[1002,118190,1579],{"class":15711},[1002,118192,15703],{"class":1030},[1002,118194,118195,118197,118199],{"class":1004,"line":1348},[1002,118196,22437],{"class":1030},[1002,118198,32092],{"class":15711},[1002,118200,15703],{"class":1030},[1530,118202,118203],{},[974,118204,118205,118206],{},"External ",[941,118207,16028],{},[993,118209,118211],{"className":37880,"code":118210,"language":383,"meta":998,"style":998},"\u003Chead>\n \u003Ctitle>CSS Cross Country\u003C\u002Ftitle>\n \u003Clink rel=\"stylesheet\" href=\"styles.css\" \u002F>\n\u003C\u002Fhead>\n",[941,118212,118213,118221,118233,118254],{"__ignoreMap":998},[1002,118214,118215,118217,118219],{"class":1004,"line":1005},[1002,118216,6539],{"class":1030},[1002,118218,32092],{"class":15711},[1002,118220,15703],{"class":1030},[1002,118222,118223,118225,118227,118229,118231],{"class":1004,"line":1012},[1002,118224,22427],{"class":1030},[1002,118226,15029],{"class":15711},[1002,118228,118131],{"class":1030},[1002,118230,15029],{"class":15711},[1002,118232,15703],{"class":1030},[1002,118234,118235,118237,118239,118241,118243,118245,118247,118249,118252],{"class":1004,"line":1047},[1002,118236,22427],{"class":1030},[1002,118238,47171],{"class":15711},[1002,118240,47174],{"class":1026},[1002,118242,2393],{"class":1030},[1002,118244,47179],{"class":1034},[1002,118246,47182],{"class":1026},[1002,118248,2393],{"class":1030},[1002,118250,118251],{"class":1034},"\"styles.css\"",[1002,118253,15258],{"class":1030},[1002,118255,118256,118258,118260],{"class":1004,"line":1054},[1002,118257,22437],{"class":1030},[1002,118259,32092],{"class":15711},[1002,118261,15703],{"class":1030},[953,118263,118265],{"id":118264},"selectors","Selectors",[925,118267,118268],{},"Primary DOM selectors:",[1655,118270,118272],{"id":118271},"element-selector","Element selector",[925,118274,118275],{},[1107,118276,108265],{},[993,118278,118280],{"className":37880,"code":118279,"language":383,"meta":998,"style":998},"\u003Ch1 class=\"intro\" id=\"header\">Nice and Toasty\u003C\u002Fh1>\n",[941,118281,118282],{"__ignoreMap":998},[1002,118283,118284,118286,118288,118290,118292,118294,118296,118298,118300,118303,118305],{"class":1004,"line":1005},[1002,118285,6539],{"class":1030},[1002,118287,15201],{"class":15711},[1002,118289,17187],{"class":1026},[1002,118291,2393],{"class":1030},[1002,118293,108326],{"class":1034},[1002,118295,21489],{"class":1026},[1002,118297,2393],{"class":1030},[1002,118299,108923],{"class":1034},[1002,118301,118302],{"class":1030},">Nice and Toasty\u003C\u002F",[1002,118304,15201],{"class":15711},[1002,118306,15703],{"class":1030},[925,118308,118309],{},[1107,118310,35565],{},[993,118312,118314],{"className":35707,"code":118313,"language":29,"meta":998,"style":998},"h1 {\n color: #aba4ac;\n margin-bottom: 10px;\n}\n",[941,118315,118316,118322,118333,118346],{"__ignoreMap":998},[1002,118317,118318,118320],{"class":1004,"line":1005},[1002,118319,15201],{"class":15711},[1002,118321,1457],{"class":1030},[1002,118323,118324,118326,118328,118331],{"class":1004,"line":1012},[1002,118325,35952],{"class":1019},[1002,118327,1137],{"class":1030},[1002,118329,118330],{"class":1019},"#aba4ac",[1002,118332,1407],{"class":1030},[1002,118334,118335,118338,118340,118342,118344],{"class":1004,"line":1047},[1002,118336,118337],{"class":1019}," margin-bottom",[1002,118339,1137],{"class":1030},[1002,118341,4818],{"class":1019},[1002,118343,43835],{"class":1015},[1002,118345,1407],{"class":1030},[1002,118347,118348],{"class":1004,"line":1054},[1002,118349,1170],{"class":1030},[1655,118351,118353],{"id":118352},"class-selector","Class selector",[925,118355,118356],{},[1107,118357,108265],{},[993,118359,118360],{"className":37880,"code":118279,"language":383,"meta":998,"style":998},[941,118361,118362],{"__ignoreMap":998},[1002,118363,118364,118366,118368,118370,118372,118374,118376,118378,118380,118382,118384],{"class":1004,"line":1005},[1002,118365,6539],{"class":1030},[1002,118367,15201],{"class":15711},[1002,118369,17187],{"class":1026},[1002,118371,2393],{"class":1030},[1002,118373,108326],{"class":1034},[1002,118375,21489],{"class":1026},[1002,118377,2393],{"class":1030},[1002,118379,108923],{"class":1034},[1002,118381,118302],{"class":1030},[1002,118383,15201],{"class":15711},[1002,118385,15703],{"class":1030},[925,118387,118388],{},[1107,118389,35565],{},[993,118391,118393],{"className":35707,"code":118392,"language":29,"meta":998,"style":998},".intro {\n color: #aba4ac;\n margin-bottom: 10px;\n}\n",[941,118394,118395,118401,118411,118423],{"__ignoreMap":998},[1002,118396,118397,118399],{"class":1004,"line":1005},[1002,118398,108368],{"class":1026},[1002,118400,1457],{"class":1030},[1002,118402,118403,118405,118407,118409],{"class":1004,"line":1012},[1002,118404,35952],{"class":1019},[1002,118406,1137],{"class":1030},[1002,118408,118330],{"class":1019},[1002,118410,1407],{"class":1030},[1002,118412,118413,118415,118417,118419,118421],{"class":1004,"line":1047},[1002,118414,118337],{"class":1019},[1002,118416,1137],{"class":1030},[1002,118418,4818],{"class":1019},[1002,118420,43835],{"class":1015},[1002,118422,1407],{"class":1030},[1002,118424,118425],{"class":1004,"line":1054},[1002,118426,1170],{"class":1030},[1655,118428,118430],{"id":118429},"id-selector","ID selector",[925,118432,118433],{},[1107,118434,108265],{},[993,118436,118437],{"className":37880,"code":118279,"language":383,"meta":998,"style":998},[941,118438,118439],{"__ignoreMap":998},[1002,118440,118441,118443,118445,118447,118449,118451,118453,118455,118457,118459,118461],{"class":1004,"line":1005},[1002,118442,6539],{"class":1030},[1002,118444,15201],{"class":15711},[1002,118446,17187],{"class":1026},[1002,118448,2393],{"class":1030},[1002,118450,108326],{"class":1034},[1002,118452,21489],{"class":1026},[1002,118454,2393],{"class":1030},[1002,118456,108923],{"class":1034},[1002,118458,118302],{"class":1030},[1002,118460,15201],{"class":15711},[1002,118462,15703],{"class":1030},[925,118464,118465],{},[1107,118466,35565],{},[993,118468,118470],{"className":35707,"code":118469,"language":29,"meta":998,"style":998},"#header {\n color: #aba4ac;\n margin-bottom: 10px;\n}\n",[941,118471,118472,118479,118489,118501],{"__ignoreMap":998},[1002,118473,118474,118477],{"class":1004,"line":1005},[1002,118475,118476],{"class":1026},"#header",[1002,118478,1457],{"class":1030},[1002,118480,118481,118483,118485,118487],{"class":1004,"line":1012},[1002,118482,35952],{"class":1019},[1002,118484,1137],{"class":1030},[1002,118486,118330],{"class":1019},[1002,118488,1407],{"class":1030},[1002,118490,118491,118493,118495,118497,118499],{"class":1004,"line":1047},[1002,118492,118337],{"class":1019},[1002,118494,1137],{"class":1030},[1002,118496,4818],{"class":1019},[1002,118498,43835],{"class":1015},[1002,118500,1407],{"class":1030},[1002,118502,118503],{"class":1004,"line":1054},[1002,118504,1170],{"class":1030},[1655,118506,118508],{"id":118507},"compound-selectors","Compound selectors",[925,118510,118511],{},[1107,118512,108265],{},[993,118514,118515],{"className":37880,"code":118279,"language":383,"meta":998,"style":998},[941,118516,118517],{"__ignoreMap":998},[1002,118518,118519,118521,118523,118525,118527,118529,118531,118533,118535,118537,118539],{"class":1004,"line":1005},[1002,118520,6539],{"class":1030},[1002,118522,15201],{"class":15711},[1002,118524,17187],{"class":1026},[1002,118526,2393],{"class":1030},[1002,118528,108326],{"class":1034},[1002,118530,21489],{"class":1026},[1002,118532,2393],{"class":1030},[1002,118534,108923],{"class":1034},[1002,118536,118302],{"class":1030},[1002,118538,15201],{"class":15711},[1002,118540,15703],{"class":1030},[925,118542,118543],{},[1107,118544,35565],{},[993,118546,118548],{"className":35707,"code":118547,"language":29,"meta":998,"style":998},"h1#header {\n color: #aba4ac;\n margin-bottom: 10px;\n}\n",[941,118549,118550,118558,118568,118580],{"__ignoreMap":998},[1002,118551,118552,118554,118556],{"class":1004,"line":1005},[1002,118553,15201],{"class":15711},[1002,118555,118476],{"class":1026},[1002,118557,1457],{"class":1030},[1002,118559,118560,118562,118564,118566],{"class":1004,"line":1012},[1002,118561,35952],{"class":1019},[1002,118563,1137],{"class":1030},[1002,118565,118330],{"class":1019},[1002,118567,1407],{"class":1030},[1002,118569,118570,118572,118574,118576,118578],{"class":1004,"line":1047},[1002,118571,118337],{"class":1019},[1002,118573,1137],{"class":1030},[1002,118575,4818],{"class":1019},[1002,118577,43835],{"class":1015},[1002,118579,1407],{"class":1030},[1002,118581,118582],{"class":1004,"line":1054},[1002,118583,1170],{"class":1030},[953,118585,118587],{"id":118586},"cascade-order","Cascade Order",[925,118589,118590],{},"Style priority is determined by position in site:",[1530,118592,118593,118598,118602,118604],{},[974,118594,118205,118595],{},[941,118596,118597],{},"\u003Clink>",[974,118599,35079,118600],{},[941,118601,16028],{},[974,118603,118110],{},[974,118605,118606],{},"Using !important",[925,118608,118609],{},"Above order represents Increasing Priority.",[925,118611,118612],{},"Priority is also dependent on position in document:",[993,118614,118616],{"className":35707,"code":118615,"language":29,"meta":998,"style":998},".intro {\n color: #444245;\n}\n.intro {\n color: #dddadd;\n}\n",[941,118617,118618,118624,118635,118639,118645,118656],{"__ignoreMap":998},[1002,118619,118620,118622],{"class":1004,"line":1005},[1002,118621,108368],{"class":1026},[1002,118623,1457],{"class":1030},[1002,118625,118626,118628,118630,118633],{"class":1004,"line":1012},[1002,118627,35952],{"class":1019},[1002,118629,1137],{"class":1030},[1002,118631,118632],{"class":1019},"#444245",[1002,118634,1407],{"class":1030},[1002,118636,118637],{"class":1004,"line":1047},[1002,118638,1170],{"class":1030},[1002,118640,118641,118643],{"class":1004,"line":1054},[1002,118642,108368],{"class":1026},[1002,118644,1457],{"class":1030},[1002,118646,118647,118649,118651,118654],{"class":1004,"line":1060},[1002,118648,35952],{"class":1019},[1002,118650,1137],{"class":1030},[1002,118652,118653],{"class":1019},"#dddadd",[1002,118655,1407],{"class":1030},[1002,118657,118658],{"class":1004,"line":1272},[1002,118659,1170],{"class":1030},[925,118661,118662,118663,118665],{},"the second color definition for ",[1107,118664,108368],{}," overrides the first.",[925,118667,118668],{},"Non-conflicting properties will be combined:",[993,118670,118672],{"className":35707,"code":118671,"language":29,"meta":998,"style":998},".intro {\n color: #dddadd;\n}\n.intro {\n margin-bottom: 5px;\n width: 900px;\n}\n",[941,118673,118674,118680,118690,118694,118700,118712,118725],{"__ignoreMap":998},[1002,118675,118676,118678],{"class":1004,"line":1005},[1002,118677,108368],{"class":1026},[1002,118679,1457],{"class":1030},[1002,118681,118682,118684,118686,118688],{"class":1004,"line":1012},[1002,118683,35952],{"class":1019},[1002,118685,1137],{"class":1030},[1002,118687,118653],{"class":1019},[1002,118689,1407],{"class":1030},[1002,118691,118692],{"class":1004,"line":1047},[1002,118693,1170],{"class":1030},[1002,118695,118696,118698],{"class":1004,"line":1054},[1002,118697,108368],{"class":1026},[1002,118699,1457],{"class":1030},[1002,118701,118702,118704,118706,118708,118710],{"class":1004,"line":1060},[1002,118703,118337],{"class":1019},[1002,118705,1137],{"class":1030},[1002,118707,2859],{"class":1019},[1002,118709,43835],{"class":1015},[1002,118711,1407],{"class":1030},[1002,118713,118714,118716,118718,118721,118723],{"class":1004,"line":1272},[1002,118715,37240],{"class":1019},[1002,118717,1137],{"class":1030},[1002,118719,118720],{"class":1019},"900",[1002,118722,43835],{"class":1015},[1002,118724,1407],{"class":1030},[1002,118726,118727],{"class":1004,"line":1348},[1002,118728,1170],{"class":1030},[925,118730,118731],{},"This can ve combined into:",[993,118733,118735],{"className":35707,"code":118734,"language":29,"meta":998,"style":998},".intro {\n color: #dddadd;\n margin-bottom: 5px;\n width: 900px;\n}\n",[941,118736,118737,118743,118753,118765,118777],{"__ignoreMap":998},[1002,118738,118739,118741],{"class":1004,"line":1005},[1002,118740,108368],{"class":1026},[1002,118742,1457],{"class":1030},[1002,118744,118745,118747,118749,118751],{"class":1004,"line":1012},[1002,118746,35952],{"class":1019},[1002,118748,1137],{"class":1030},[1002,118750,118653],{"class":1019},[1002,118752,1407],{"class":1030},[1002,118754,118755,118757,118759,118761,118763],{"class":1004,"line":1047},[1002,118756,118337],{"class":1019},[1002,118758,1137],{"class":1030},[1002,118760,2859],{"class":1019},[1002,118762,43835],{"class":1015},[1002,118764,1407],{"class":1030},[1002,118766,118767,118769,118771,118773,118775],{"class":1004,"line":1054},[1002,118768,37240],{"class":1019},[1002,118770,1137],{"class":1030},[1002,118772,118720],{"class":1019},[1002,118774,43835],{"class":1015},[1002,118776,1407],{"class":1030},[1002,118778,118779],{"class":1004,"line":1060},[1002,118780,1170],{"class":1030},[953,118782,118784],{"id":118783},"floating-left-right","Floating Left & Right",[925,118786,118787,118788,118791],{},"Let's look at how ",[1107,118789,118790],{},"float"," works. Look at the following markup:",[993,118793,118795],{"className":37880,"code":118794,"language":383,"meta":998,"style":998},"\u003Carticle>\n \u003Cimg src=\"ski.jpg\" alt=\"Ski!\" \u002F>\n To successfully ski, simply do not fall.\n\u003C\u002Farticle>\n",[941,118796,118797,118805,118826,118830],{"__ignoreMap":998},[1002,118798,118799,118801,118803],{"class":1004,"line":1005},[1002,118800,6539],{"class":1030},[1002,118802,15712],{"class":15711},[1002,118804,15703],{"class":1030},[1002,118806,118807,118809,118811,118813,118815,118817,118819,118821,118824],{"class":1004,"line":1012},[1002,118808,22427],{"class":1030},[1002,118810,963],{"class":15711},[1002,118812,15242],{"class":1026},[1002,118814,2393],{"class":1030},[1002,118816,108291],{"class":1034},[1002,118818,60884],{"class":1026},[1002,118820,2393],{"class":1030},[1002,118822,118823],{"class":1034},"\"Ski!\"",[1002,118825,15258],{"class":1030},[1002,118827,118828],{"class":1004,"line":1047},[1002,118829,108305],{"class":1030},[1002,118831,118832,118834,118836],{"class":1004,"line":1054},[1002,118833,22437],{"class":1030},[1002,118835,15712],{"class":15711},[1002,118837,15703],{"class":1030},[993,118839,118841],{"className":35707,"code":118840,"language":29,"meta":998,"style":998},"img {\n float: left;\n}\n",[941,118842,118843,118849,118859],{"__ignoreMap":998},[1002,118844,118845,118847],{"class":1004,"line":1005},[1002,118846,963],{"class":15711},[1002,118848,1457],{"class":1030},[1002,118850,118851,118853,118855,118857],{"class":1004,"line":1012},[1002,118852,108353],{"class":1019},[1002,118854,1137],{"class":1030},[1002,118856,39753],{"class":1019},[1002,118858,1407],{"class":1030},[1002,118860,118861],{"class":1004,"line":1047},[1002,118862,1170],{"class":1030},[925,118864,118865],{},"So, floating removes elements from the document flow and moves\nthem to a specified edge. The other content within the parent element will wrap around floats.",[925,118867,118868],{},[963,118869],{"alt":118870,"src":118871},"Float","\u002Fimages\u002Fblog\u002F2014-10-27-css-introduction\u002Ffloat.png",[993,118873,118876],{"className":118874,"code":118875,"language":24241},[24239],"float: left \u002F right \u002F none\n",[941,118877,118875],{"__ignoreMap":998},[1655,118879,118881],{"id":118880},"stacking-order","Stacking order",[925,118883,118884],{},"Floated elements stack up to the parent edge, then move down to\nthe next available edge.",[925,118886,118887],{},[963,118888],{"alt":51213,"src":118889},"\u002Fimages\u002Fblog\u002F2014-10-27-css-introduction\u002Fstack.jpg",[925,118891,118892],{},"Take care with elements that have differing heights - the first\navailable edge isn't always below.",[993,118894,118896],{"className":37880,"code":118895,"language":383,"meta":998,"style":998},"\u003Carticle>\n \u003Cimg class=\"ski\" src=\"ski.jpg\" alt=\"Ski!\" \u002F>\n \u003Cimg class=\"sled\" src=\"sled.jpg\" alt=\"Sled!\" \u002F>\n\u003C\u002Farticle>\n",[941,118897,118898,118906,118933,118962],{"__ignoreMap":998},[1002,118899,118900,118902,118904],{"class":1004,"line":1005},[1002,118901,6539],{"class":1030},[1002,118903,15712],{"class":15711},[1002,118905,15703],{"class":1030},[1002,118907,118908,118910,118912,118914,118916,118919,118921,118923,118925,118927,118929,118931],{"class":1004,"line":1012},[1002,118909,22427],{"class":1030},[1002,118911,963],{"class":15711},[1002,118913,17187],{"class":1026},[1002,118915,2393],{"class":1030},[1002,118917,118918],{"class":1034},"\"ski\"",[1002,118920,15242],{"class":1026},[1002,118922,2393],{"class":1030},[1002,118924,108291],{"class":1034},[1002,118926,60884],{"class":1026},[1002,118928,2393],{"class":1030},[1002,118930,118823],{"class":1034},[1002,118932,15258],{"class":1030},[1002,118934,118935,118937,118939,118941,118943,118946,118948,118950,118953,118955,118957,118960],{"class":1004,"line":1047},[1002,118936,22427],{"class":1030},[1002,118938,963],{"class":15711},[1002,118940,17187],{"class":1026},[1002,118942,2393],{"class":1030},[1002,118944,118945],{"class":1034},"\"sled\"",[1002,118947,15242],{"class":1026},[1002,118949,2393],{"class":1030},[1002,118951,118952],{"class":1034},"\"sled.jpg\"",[1002,118954,60884],{"class":1026},[1002,118956,2393],{"class":1030},[1002,118958,118959],{"class":1034},"\"Sled!\"",[1002,118961,15258],{"class":1030},[1002,118963,118964,118966,118968],{"class":1004,"line":1054},[1002,118965,22437],{"class":1030},[1002,118967,15712],{"class":15711},[1002,118969,15703],{"class":1030},[993,118971,118973],{"className":35707,"code":118972,"language":29,"meta":998,"style":998},".ski {\n float: right;\n}\n.sled {\n float: left;\n}\n",[941,118974,118975,118982,118992,118996,119003,119013],{"__ignoreMap":998},[1002,118976,118977,118980],{"class":1004,"line":1005},[1002,118978,118979],{"class":1026},".ski",[1002,118981,1457],{"class":1030},[1002,118983,118984,118986,118988,118990],{"class":1004,"line":1012},[1002,118985,108353],{"class":1019},[1002,118987,1137],{"class":1030},[1002,118989,88217],{"class":1019},[1002,118991,1407],{"class":1030},[1002,118993,118994],{"class":1004,"line":1047},[1002,118995,1170],{"class":1030},[1002,118997,118998,119001],{"class":1004,"line":1054},[1002,118999,119000],{"class":1026},".sled",[1002,119002,1457],{"class":1030},[1002,119004,119005,119007,119009,119011],{"class":1004,"line":1060},[1002,119006,108353],{"class":1019},[1002,119008,1137],{"class":1030},[1002,119010,39753],{"class":1019},[1002,119012,1407],{"class":1030},[1002,119014,119015],{"class":1004,"line":1272},[1002,119016,1170],{"class":1030},[925,119018,119019],{},[963,119020],{"alt":119021,"src":119022},"Left left","\u002Fimages\u002Fblog\u002F2014-10-27-css-introduction\u002Fleftleft.jpg",[993,119024,119026],{"className":35707,"code":119025,"language":29,"meta":998,"style":998},".ski {\n float: right;\n}\n.sled {\n float: right;\n}\n",[941,119027,119028,119034,119044,119048,119054,119064],{"__ignoreMap":998},[1002,119029,119030,119032],{"class":1004,"line":1005},[1002,119031,118979],{"class":1026},[1002,119033,1457],{"class":1030},[1002,119035,119036,119038,119040,119042],{"class":1004,"line":1012},[1002,119037,108353],{"class":1019},[1002,119039,1137],{"class":1030},[1002,119041,88217],{"class":1019},[1002,119043,1407],{"class":1030},[1002,119045,119046],{"class":1004,"line":1047},[1002,119047,1170],{"class":1030},[1002,119049,119050,119052],{"class":1004,"line":1054},[1002,119051,119000],{"class":1026},[1002,119053,1457],{"class":1030},[1002,119055,119056,119058,119060,119062],{"class":1004,"line":1060},[1002,119057,108353],{"class":1019},[1002,119059,1137],{"class":1030},[1002,119061,88217],{"class":1019},[1002,119063,1407],{"class":1030},[1002,119065,119066],{"class":1004,"line":1272},[1002,119067,1170],{"class":1030},[925,119069,119070],{},[963,119071],{"alt":119072,"src":119073},"Left right","\u002Fimages\u002Fblog\u002F2014-10-27-css-introduction\u002Fleftright.jpg",[1579,119075,119076],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":998,"searchDepth":1012,"depth":1012,"links":119078},[119079,119080,119081,119087,119088],{"id":118097,"depth":1012,"text":118098},{"id":118104,"depth":1012,"text":118105},{"id":118264,"depth":1012,"text":118265,"children":119082},[119083,119084,119085,119086],{"id":118271,"depth":1047,"text":118272},{"id":118352,"depth":1047,"text":118353},{"id":118429,"depth":1047,"text":118430},{"id":118507,"depth":1047,"text":118508},{"id":118586,"depth":1012,"text":118587},{"id":118783,"depth":1012,"text":118784,"children":119089},[119090],{"id":118880,"depth":1047,"text":118881},"2014-10-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Fcss-introduction.jpg",{},{"title":131,"description":133},"blog\u002Fcss-introduction",[16,29],"VzYG2vVIO_pQ3pq31vtf0GZTAGFt_JaBXAU61V9M_QY",{"id":119099,"title":395,"author":920,"body":119100,"date":119715,"description":397,"extension":1591,"image":119716,"meta":119717,"navigation":1050,"path":396,"seo":119718,"stem":119719,"tags":119720,"__hash__":119721},"blog\u002Fblog\u002Fhtml5-introduction.md",{"type":922,"value":119101,"toc":119706},[119102,119105,119125,119129,119132,119146,119149,119152,119155,119179,119182,119205,119208,119231,119234,119249,119253,119256,119283,119286,119305,119309,119312,119342,119345,119368,119372,119375,119408,119411,119436,119440,119443,119455,119458,119480,119483,119489,119509,119512,119531,119542,119545,119559,119562,119597,119602,119605,119619,119622,119639,119642,119651,119659,119664,119698,119703],[925,119103,119104],{},"HTML5 includes:",[1530,119106,119107,119110,119113,119116,119119,119122],{},[974,119108,119109],{},"New HTML elements and attributes",[974,119111,119112],{},"Full CSS3 Support",[974,119114,119115],{},"Video and audio elements",[974,119117,119118],{},"2D\u002F3D graphics",[974,119120,119121],{},"Local storage",[974,119123,119124],{},"Local SQL database",[953,119126,119128],{"id":119127},"what-is-new-in-html5","What is New in HTML5?",[925,119130,119131],{},"HTML5 has scene new updated elements:",[1530,119133,119134,119137,119140,119143],{},[974,119135,119136],{},"Doctype",[974,119138,119139],{},"Meta declaration",[974,119141,119142],{},"Script tag",[974,119144,119145],{},"Link tag",[953,119147,37891],{"id":119148},"doctype",[925,119150,119151],{},"The DOCTYPE declaration for HTML5 is very simple. But let's look at the doctypes before HTML5:",[925,119153,119154],{},"HTML 4.01 Strict",[993,119156,119158],{"className":37880,"code":119157,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fstrict.dtd\">\n",[941,119159,119160],{"__ignoreMap":998},[1002,119161,119162,119164,119166,119168,119171,119174,119177],{"class":1004,"line":1005},[1002,119163,37888],{"class":1030},[1002,119165,37891],{"class":15711},[1002,119167,21739],{"class":1026},[1002,119169,119170],{"class":1026}," PUBLIC",[1002,119172,119173],{"class":1034}," \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\"",[1002,119175,119176],{"class":1034}," \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fstrict.dtd\"",[1002,119178,15703],{"class":1030},[925,119180,119181],{},"HTML 4.01 Transitional",[993,119183,119185],{"className":37880,"code":119184,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd\">\n",[941,119186,119187],{"__ignoreMap":998},[1002,119188,119189,119191,119193,119195,119197,119200,119203],{"class":1004,"line":1005},[1002,119190,37888],{"class":1030},[1002,119192,37891],{"class":15711},[1002,119194,21739],{"class":1026},[1002,119196,119170],{"class":1026},[1002,119198,119199],{"class":1034}," \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN\"",[1002,119201,119202],{"class":1034}," \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd\"",[1002,119204,15703],{"class":1030},[925,119206,119207],{},"HTML 4.01 Frameset",[993,119209,119211],{"className":37880,"code":119210,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Frameset\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fframeset.dtd\">\n",[941,119212,119213],{"__ignoreMap":998},[1002,119214,119215,119217,119219,119221,119223,119226,119229],{"class":1004,"line":1005},[1002,119216,37888],{"class":1030},[1002,119218,37891],{"class":15711},[1002,119220,21739],{"class":1026},[1002,119222,119170],{"class":1026},[1002,119224,119225],{"class":1034}," \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Frameset\u002F\u002FEN\"",[1002,119227,119228],{"class":1034}," \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fframeset.dtd\"",[1002,119230,15703],{"class":1030},[925,119232,119233],{},"The new HTML5 doctype:",[993,119235,119237],{"className":37880,"code":119236,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html>\n",[941,119238,119239],{"__ignoreMap":998},[1002,119240,119241,119243,119245,119247],{"class":1004,"line":1005},[1002,119242,37888],{"class":1030},[1002,119244,37891],{"class":15711},[1002,119246,21739],{"class":1026},[1002,119248,15703],{"class":1030},[953,119250,119252],{"id":119251},"meta-declaration","META DECLARATION",[925,119254,119255],{},"The meta declaration in HTML4:",[993,119257,119259],{"className":37880,"code":119258,"language":383,"meta":998,"style":998},"\u003Cmeta http-equiv=\"Content-Type\" content=\"text\u002Fhtml; charset=UTF-8\" \u002F>\n",[941,119260,119261],{"__ignoreMap":998},[1002,119262,119263,119265,119267,119269,119271,119274,119276,119278,119281],{"class":1004,"line":1005},[1002,119264,6539],{"class":1030},[1002,119266,37926],{"class":15711},[1002,119268,84393],{"class":1026},[1002,119270,2393],{"class":1030},[1002,119272,119273],{"class":1034},"\"Content-Type\"",[1002,119275,51551],{"class":1026},[1002,119277,2393],{"class":1030},[1002,119279,119280],{"class":1034},"\"text\u002Fhtml; charset=UTF-8\"",[1002,119282,15258],{"class":1030},[925,119284,119285],{},"In HTML5, this has been simplified:",[993,119287,119289],{"className":37880,"code":119288,"language":383,"meta":998,"style":998},"\u003Cmeta charset=\"UTF-8\" \u002F>\n",[941,119290,119291],{"__ignoreMap":998},[1002,119292,119293,119295,119297,119299,119301,119303],{"class":1004,"line":1005},[1002,119294,6539],{"class":1030},[1002,119296,37926],{"class":15711},[1002,119298,37929],{"class":1026},[1002,119300,2393],{"class":1030},[1002,119302,37934],{"class":1034},[1002,119304,15258],{"class":1030},[953,119306,119308],{"id":119307},"script-tag","SCRIPT TAG",[925,119310,119311],{},"In HTML 4.01, we specify the type attribute as text\u002Fjavascript:",[993,119313,119315],{"className":37880,"code":119314,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fjavascript\" src=\"file.js\">\u003C\u002Fscript>\n",[941,119316,119317],{"__ignoreMap":998},[1002,119318,119319,119321,119323,119325,119327,119329,119331,119333,119336,119338,119340],{"class":1004,"line":1005},[1002,119320,6539],{"class":1030},[1002,119322,22063],{"class":15711},[1002,119324,29274],{"class":1026},[1002,119326,2393],{"class":1030},[1002,119328,91065],{"class":1034},[1002,119330,15242],{"class":1026},[1002,119332,2393],{"class":1030},[1002,119334,119335],{"class":1034},"\"file.js\"",[1002,119337,22081],{"class":1030},[1002,119339,22063],{"class":15711},[1002,119341,15703],{"class":1030},[925,119343,119344],{},"In HTML5, the type attribute is not needed, as the browser will infer javascript as the type:",[993,119346,119348],{"className":37880,"code":119347,"language":383,"meta":998,"style":998},"\u003Cscript src=\"file.js\">\u003C\u002Fscript>\n",[941,119349,119350],{"__ignoreMap":998},[1002,119351,119352,119354,119356,119358,119360,119362,119364,119366],{"class":1004,"line":1005},[1002,119353,6539],{"class":1030},[1002,119355,22063],{"class":15711},[1002,119357,15242],{"class":1026},[1002,119359,2393],{"class":1030},[1002,119361,119335],{"class":1034},[1002,119363,22081],{"class":1030},[1002,119365,22063],{"class":15711},[1002,119367,15703],{"class":1030},[953,119369,119371],{"id":119370},"link-tag","LINK TAG",[925,119373,119374],{},"The link tag in HTML 4.01:",[993,119376,119378],{"className":37880,"code":119377,"language":383,"meta":998,"style":998},"\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"file.css\" \u002F>\n",[941,119379,119380],{"__ignoreMap":998},[1002,119381,119382,119384,119386,119388,119390,119392,119394,119396,119399,119401,119403,119406],{"class":1004,"line":1005},[1002,119383,6539],{"class":1030},[1002,119385,47171],{"class":15711},[1002,119387,47174],{"class":1026},[1002,119389,2393],{"class":1030},[1002,119391,47179],{"class":1034},[1002,119393,29274],{"class":1026},[1002,119395,2393],{"class":1030},[1002,119397,119398],{"class":1034},"\"text\u002Fcss\"",[1002,119400,47182],{"class":1026},[1002,119402,2393],{"class":1030},[1002,119404,119405],{"class":1034},"\"file.css\"",[1002,119407,15258],{"class":1030},[925,119409,119410],{},"Again, in HTML5, we don't need the type attribute on the link tag.",[993,119412,119414],{"className":37880,"code":119413,"language":383,"meta":998,"style":998},"\u003Clink rel=\"stylesheet\" href=\"file.css\" \u002F>\n",[941,119415,119416],{"__ignoreMap":998},[1002,119417,119418,119420,119422,119424,119426,119428,119430,119432,119434],{"class":1004,"line":1005},[1002,119419,6539],{"class":1030},[1002,119421,47171],{"class":15711},[1002,119423,47174],{"class":1026},[1002,119425,2393],{"class":1030},[1002,119427,47179],{"class":1034},[1002,119429,47182],{"class":1026},[1002,119431,2393],{"class":1030},[1002,119433,119405],{"class":1034},[1002,119435,15258],{"class":1030},[953,119437,119439],{"id":119438},"existing-html5-tag-updates","EXISTING HTML5 TAG UPDATES",[925,119441,119442],{},"In HTML4, the i and b tags were font style elements:",[1530,119444,119445,119450],{},[974,119446,3898,119447,119449],{},[1107,119448,12031],{}," tag rendered an italic font style",[974,119451,3898,119452,119454],{},[1107,119453,31621],{}," tag rendered a bold font style",[925,119456,119457],{},"In HTML5, these tags have new meanings:",[1530,119459,119460,119471],{},[974,119461,3898,119462,119464,119465,16529,119468],{},[1107,119463,12031],{}," tag represents text in an ",[1107,119466,119467],{},"alternate voice",[1107,119469,119470],{},"mood",[974,119472,3898,119473,119475,119476,119479],{},[1107,119474,31621],{}," tag represents ",[1107,119477,119478],{},"stylistically offset"," text",[953,119481,119439],{"id":119482},"existing-html5-tag-updates-1",[925,119484,119485,119486,119488],{},"Some example uses for the ",[1107,119487,12031],{}," tag:",[1530,119490,119491,119494,119497,119500,119503,119506],{},[974,119492,119493],{},"Taxonomic designation",[974,119495,119496],{},"Technical term",[974,119498,119499],{},"Idiomatic phrase from another language",[974,119501,119502],{},"Transliteration",[974,119504,119505],{},"A thought",[974,119507,119508],{},"Ship name in Western texts",[925,119510,119511],{},"Example usage of the i tag:",[993,119513,119515],{"className":37880,"code":119514,"language":383,"meta":998,"style":998},"\u003Ci>I hope this works\u003C\u002Fi>, he thought.\n",[941,119516,119517],{"__ignoreMap":998},[1002,119518,119519,119521,119523,119526,119528],{"class":1004,"line":1005},[1002,119520,6539],{"class":1030},[1002,119522,12031],{"class":15711},[1002,119524,119525],{"class":1030},">I hope this works\u003C\u002F",[1002,119527,12031],{"class":15711},[1002,119529,119530],{"class":1030},">, he thought.\n",[925,119532,119533,119534,119536,119537,16529,119540,948],{},"Here the words in side ",[1107,119535,12031],{}," tags depicting a text in an ",[1107,119538,119539],{},"alternative voice",[1107,119541,119470],{},[925,119543,119544],{},"Some example uses for the b tag:",[1530,119546,119547,119550,119553,119556],{},[974,119548,119549],{},"Key words in a document abstract",[974,119551,119552],{},"Product names in a review",[974,119554,119555],{},"Actionable words in interactive text-driven software",[974,119557,119558],{},"Article lead",[925,119560,119561],{},"Example usage of the b tag:",[993,119563,119565],{"className":37880,"code":119564,"language":383,"meta":998,"style":998},"\u003Cb class=\"lead\"\n >The event takes place this upcoming Saturday, and over 3,000 people have\n already registered.**\u003C\u002Fb\n>\n",[941,119566,119567,119580,119585,119593],{"__ignoreMap":998},[1002,119568,119569,119571,119573,119575,119577],{"class":1004,"line":1005},[1002,119570,6539],{"class":1030},[1002,119572,31621],{"class":15711},[1002,119574,17187],{"class":1026},[1002,119576,2393],{"class":1030},[1002,119578,119579],{"class":1034},"\"lead\"\n",[1002,119581,119582],{"class":1004,"line":1012},[1002,119583,119584],{"class":1030}," >The event takes place this upcoming Saturday, and over 3,000 people have\n",[1002,119586,119587,119590],{"class":1004,"line":1047},[1002,119588,119589],{"class":1030}," already registered.**\u003C\u002F",[1002,119591,119592],{"class":15711},"b\n",[1002,119594,119595],{"class":1004,"line":1054},[1002,119596,15703],{"class":1030},[925,119598,119599,119600,948],{},"This article lead is ",[1107,119601,119478],{},[925,119603,119604],{},"In HTML4:",[1530,119606,119607,119613],{},[974,119608,3898,119609,119612],{},[941,119610,119611],{},"\u003Cem>"," tag meant emphasis",[974,119614,3898,119615,119618],{},[941,119616,119617],{},"\u003Cstrong>"," tag meant strong emphasis",[925,119620,119621],{},"But in HTML5, the em and strong tags have new meanings:",[1530,119623,119624,119632],{},[974,119625,3898,119626,119628,119629],{},[941,119627,119611],{}," tag now means ",[1107,119630,119631],{},"stress emphasis",[974,119633,3898,119634,119628,119636],{},[941,119635,119617],{},[1107,119637,119638],{},"strong importance",[925,119640,119641],{},"Example usage of the em tag:",[993,119643,119645],{"className":37880,"code":119644,"language":383,"meta":998,"style":998},"Make sure to sign up `before` the day of the event, September 16, 2013.\n",[941,119646,119647],{"__ignoreMap":998},[1002,119648,119649],{"class":1004,"line":1005},[1002,119650,119644],{"class":1030},[925,119652,119653,119654,107237,119656,948],{},"Here we're giving ",[1107,119655,119631],{},[1107,119657,119658],{},"before",[925,119660,119661,119662,119488],{},"Example usage of the ",[941,119663,119617],{},[993,119665,119667],{"className":37880,"code":119666,"language":383,"meta":998,"style":998},"Make sure to sign up \u003Cem>before\u003C\u002Fem> the day of the event,\n\u003Cstrong>September 16, 2013\u003C\u002Fstrong>\".\n",[941,119668,119669,119684],{"__ignoreMap":998},[1002,119670,119671,119674,119676,119679,119681],{"class":1004,"line":1005},[1002,119672,119673],{"class":1030},"Make sure to sign up \u003C",[1002,119675,928],{"class":15711},[1002,119677,119678],{"class":1030},">before\u003C\u002F",[1002,119680,928],{"class":15711},[1002,119682,119683],{"class":1030},"> the day of the event,\n",[1002,119685,119686,119688,119690,119693,119695],{"class":1004,"line":1012},[1002,119687,6539],{"class":1030},[1002,119689,1107],{"class":15711},[1002,119691,119692],{"class":1030},">September 16, 2013\u003C\u002F",[1002,119694,1107],{"class":15711},[1002,119696,119697],{"class":1030},">\".\n",[925,119699,119653,119700,119702],{},[1107,119701,119638],{}," to the date of the event.",[1579,119704,119705],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":119707},[119708,119709,119710,119711,119712,119713,119714],{"id":119127,"depth":1012,"text":119128},{"id":119148,"depth":1012,"text":37891},{"id":119251,"depth":1012,"text":119252},{"id":119307,"depth":1012,"text":119308},{"id":119370,"depth":1012,"text":119371},{"id":119438,"depth":1012,"text":119439},{"id":119482,"depth":1012,"text":119439},"2014-10-23","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhtml5-introduction.jpg",{},{"title":395,"description":397},"blog\u002Fhtml5-introduction",[16,17],"QmgElq_MZvr0sPJ3_E195ulaoLsff-3xlJ7MU5QkhWA",{"id":119723,"title":379,"author":920,"body":119724,"date":120727,"description":381,"extension":1591,"image":120728,"meta":120729,"navigation":1050,"path":380,"seo":120730,"stem":120731,"tags":120732,"__hash__":120733},"blog\u002Fblog\u002Fhtml-introduction.md",{"type":922,"value":119725,"toc":120707},[119726,119729,119733,119736,119740,119747,119751,119754,119758,119765,119768,119771,119775,119778,119781,119785,119788,119791,119819,119823,119826,119830,119833,119877,119888,119891,119909,119913,119919,119969,119972,119975,119979,119987,120059,120062,120066,120069,120155,120158,120161,120165,120168,120236,120239,120243,120246,120344,120348,120353,120471,120476,120480,120486,120532,120538,120542,120548,120613,120616,120620,120623,120698,120701,120704],[925,119727,119728],{},"HTML stands for HyperText Markup Language.",[1655,119730,119732],{"id":119731},"hypertext","Hypertext",[925,119734,119735],{},"Overcoming the constraints of written text. Interactive.",[1655,119737,119739],{"id":119738},"markup-language","Markup Language",[925,119741,119742,119743,119746],{},"A way to literally ",[1107,119744,119745],{},"Mark Up"," a document to specify attributes, like\ndifferent font sizes, lists, links to other webpages, and images.",[1655,119748,119750],{"id":119749},"html-is-written-in-text-files","HTML is written in text files",[925,119752,119753],{},"Just like most programming languages, we type a bunch of HTML into anfile (aka. document) so we can send it around.",[1655,119755,119757],{"id":119756},"to-display-an-html-file-we-need-a-browser","To display an HTML file we need a browser",[925,119759,119760,119761,119764],{},"Web Browsers are basically ",[1107,119762,119763],{},"HTML Readers",". They understand how to read HTML and display it for you.",[953,119766,119767],{"id":112645},"History",[925,119769,119770],{},"In 1980, Tim Berners-Lee worked for CERN, where he proposed a better way for researchers there to share and read documents.\nSo in 1984, he built something called ENQUIRE for CERN, which was made up of Cards (Documents) and Hyperlinks (which connected the Documents). But Tim realized he could do better.",[953,119772,119774],{"id":119773},"the-world-wide-web","The World Wide Web",[925,119776,119777],{},"With Robert Cailliau, Tim Berners-Lee wrote a proposal in 1990 for\nthe creation of the World Wide Web.",[925,119779,119780],{},"When it started, the WWW was a way for scientists around the world\nto create and share their own webpages.",[953,119782,119784],{"id":119783},"first-things-first-content","First things first: Content",[925,119786,119787],{},"Before you start making a web page, you’ve got to figure out what\ncontent it is going to show.",[925,119789,119790],{},"We’ll start with a single recipe with these sections.",[39742,119792,119793,119794],{},"\t\n\t",[39759,119795,119796,90884,119804,90884,119811],{},[39748,119797,90896,119798,90896,119801,90884],{},[39751,119799,119800],{},"Page Title",[39751,119802,119803],{},"Recipe King",[39748,119805,90896,119806,90896,119808,90884],{},[39764,119807,119800],{},[39764,119809,119810],{},"Pancakes",[39748,119812,90896,119813,90896,119816,90884],{},[39764,119814,119815],{},"Section Name",[39764,119817,119818],{},"Ingredients",[953,119820,119822],{"id":119821},"writing-html","Writing HTML",[925,119824,119825],{},"Most of the time, you’ll put your content in between HTML tags, which\nhave corresponding opening and closing versions.",[953,119827,119829],{"id":119828},"use-heading-tags-to-define-your-content-hierarchy","Use heading tags to define your content hierarchy",[925,119831,119832],{},"Higher heading numbers mean the content that appears\nbetween the headings is less important than lower numbers.",[993,119834,119836],{"className":37880,"code":119835,"language":383,"meta":998,"style":998},"\u003Ch1>Recipe King\u003C\u002Fh1>\n\u003Ch2>Pancakes\u003C\u002Fh2>\n\u003Ch3>Ingredients\u003C\u002Fh3>\n",[941,119837,119838,119851,119864],{"__ignoreMap":998},[1002,119839,119840,119842,119844,119847,119849],{"class":1004,"line":1005},[1002,119841,6539],{"class":1030},[1002,119843,15201],{"class":15711},[1002,119845,119846],{"class":1030},">Recipe King\u003C\u002F",[1002,119848,15201],{"class":15711},[1002,119850,15703],{"class":1030},[1002,119852,119853,119855,119857,119860,119862],{"class":1004,"line":1012},[1002,119854,6539],{"class":1030},[1002,119856,953],{"class":15711},[1002,119858,119859],{"class":1030},">Pancakes\u003C\u002F",[1002,119861,953],{"class":15711},[1002,119863,15703],{"class":1030},[1002,119865,119866,119868,119870,119873,119875],{"class":1004,"line":1047},[1002,119867,6539],{"class":1030},[1002,119869,1655],{"class":15711},[1002,119871,119872],{"class":1030},">Ingredients\u003C\u002F",[1002,119874,1655],{"class":15711},[1002,119876,15703],{"class":1030},[925,119878,119879,119880,119882,119883,35115,119885,119887],{},"Here, ",[1107,119881,15201],{}," is more important than ",[1107,119884,1655],{},[1107,119886,953],{}," for that matter.",[925,119889,119890],{},"Generally speaking:",[925,119892,119893,119894,119897,119898,119901,119904,119905,119908],{},"The page title\u002Fcompany name goes in the ",[941,119895,119896],{},"\u003Ch1>","\nThe page main subject goes in the ",[941,119899,119900],{},"\u003Ch2>",[941,119902,119903],{},"\u003Ch3>"," through ",[941,119906,119907],{},"\u003Ch6>"," are used to organize other divisions of page content",[953,119910,119912],{"id":119911},"use-paragraph-tags-for-non-heading-text","Use paragraph tags for non-heading text",[925,119914,119915,119918],{},[941,119916,119917],{},"\u003Cp>"," is called the paragraph tag.",[993,119920,119922],{"className":37880,"code":119921,"language":383,"meta":998,"style":998},"\u003Ch1>Recipe King\u003C\u002Fh1>\n\u003Ch2>Pancake\u003C\u002Fh2>\n\n\u003Ch3>Ingredients\u003C\u002Fh3>\n...\n",[941,119923,119924,119936,119949,119953,119965],{"__ignoreMap":998},[1002,119925,119926,119928,119930,119932,119934],{"class":1004,"line":1005},[1002,119927,6539],{"class":1030},[1002,119929,15201],{"class":15711},[1002,119931,119846],{"class":1030},[1002,119933,15201],{"class":15711},[1002,119935,15703],{"class":1030},[1002,119937,119938,119940,119942,119945,119947],{"class":1004,"line":1012},[1002,119939,6539],{"class":1030},[1002,119941,953],{"class":15711},[1002,119943,119944],{"class":1030},">Pancake\u003C\u002F",[1002,119946,953],{"class":15711},[1002,119948,15703],{"class":1030},[1002,119950,119951],{"class":1004,"line":1047},[1002,119952,1051],{"emptyLinePlaceholder":1050},[1002,119954,119955,119957,119959,119961,119963],{"class":1004,"line":1054},[1002,119956,6539],{"class":1030},[1002,119958,1655],{"class":15711},[1002,119960,119872],{"class":1030},[1002,119962,1655],{"class":15711},[1002,119964,15703],{"class":1030},[1002,119966,119967],{"class":1004,"line":1060},[1002,119968,48279],{"class":1030},[925,119970,119971],{},"The highlighted paragraph describes Pancake.",[925,119973,119974],{},"Add paragraph content (where necessary) in between heading tags.",[953,119976,119978],{"id":119977},"use-an-unordered-list-to-display-a-list-of-things","Use an unordered list to display a list of things",[925,119980,119981,119983,119984,119986],{},[941,119982,112432],{}," stands for unordered list.\nEach list item needs to also be put inside of an ",[941,119985,112243],{}," tag.",[993,119988,119990],{"className":37880,"code":119989,"language":383,"meta":998,"style":998},"\u003Ch3>Ingredients\u003C\u002Fh3>\n\u003Cul>\n \u003Cli>2 eggs\u003C\u002Fli>\n \u003Cli>1 pound of sugar\u003C\u002Fli>\n \u003Cli>3 sticks of butter\u003C\u002Fli>\n\u003C\u002Ful>\n",[941,119991,119992,120004,120012,120025,120038,120051],{"__ignoreMap":998},[1002,119993,119994,119996,119998,120000,120002],{"class":1004,"line":1005},[1002,119995,6539],{"class":1030},[1002,119997,1655],{"class":15711},[1002,119999,119872],{"class":1030},[1002,120001,1655],{"class":15711},[1002,120003,15703],{"class":1030},[1002,120005,120006,120008,120010],{"class":1004,"line":1012},[1002,120007,6539],{"class":1030},[1002,120009,1530],{"class":15711},[1002,120011,15703],{"class":1030},[1002,120013,120014,120016,120018,120021,120023],{"class":1004,"line":1047},[1002,120015,22427],{"class":1030},[1002,120017,974],{"class":15711},[1002,120019,120020],{"class":1030},">2 eggs\u003C\u002F",[1002,120022,974],{"class":15711},[1002,120024,15703],{"class":1030},[1002,120026,120027,120029,120031,120034,120036],{"class":1004,"line":1054},[1002,120028,22427],{"class":1030},[1002,120030,974],{"class":15711},[1002,120032,120033],{"class":1030},">1 pound of sugar\u003C\u002F",[1002,120035,974],{"class":15711},[1002,120037,15703],{"class":1030},[1002,120039,120040,120042,120044,120047,120049],{"class":1004,"line":1060},[1002,120041,22427],{"class":1030},[1002,120043,974],{"class":15711},[1002,120045,120046],{"class":1030},">3 sticks of butter\u003C\u002F",[1002,120048,974],{"class":15711},[1002,120050,15703],{"class":1030},[1002,120052,120053,120055,120057],{"class":1004,"line":1272},[1002,120054,22437],{"class":1030},[1002,120056,1530],{"class":15711},[1002,120058,15703],{"class":1030},[925,120060,120061],{},"This list of ingredients doesn't need to be in a specific order.",[953,120063,120065],{"id":120064},"nesting-tags","Nesting tags",[925,120067,120068],{},"HTML tags don’t have to always just contain text, they can contain other\nHTML tags.",[993,120070,120072],{"className":37880,"code":120071,"language":383,"meta":998,"style":998},"\u003Ch3>Ingredients\u003C\u002Fh3>\n\u003Cul>\n \u003Cli>2 eggs\u003C\u002Fli>\n \u003Cli>1 pound of sugar\u003C\u002Fli>\n \u003Cli>3 sticks of butter\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Directions!\u003C\u002Fh3>\n...\n",[941,120073,120074,120086,120094,120106,120118,120130,120138,120151],{"__ignoreMap":998},[1002,120075,120076,120078,120080,120082,120084],{"class":1004,"line":1005},[1002,120077,6539],{"class":1030},[1002,120079,1655],{"class":15711},[1002,120081,119872],{"class":1030},[1002,120083,1655],{"class":15711},[1002,120085,15703],{"class":1030},[1002,120087,120088,120090,120092],{"class":1004,"line":1012},[1002,120089,6539],{"class":1030},[1002,120091,1530],{"class":15711},[1002,120093,15703],{"class":1030},[1002,120095,120096,120098,120100,120102,120104],{"class":1004,"line":1047},[1002,120097,22427],{"class":1030},[1002,120099,974],{"class":15711},[1002,120101,120020],{"class":1030},[1002,120103,974],{"class":15711},[1002,120105,15703],{"class":1030},[1002,120107,120108,120110,120112,120114,120116],{"class":1004,"line":1054},[1002,120109,22427],{"class":1030},[1002,120111,974],{"class":15711},[1002,120113,120033],{"class":1030},[1002,120115,974],{"class":15711},[1002,120117,15703],{"class":1030},[1002,120119,120120,120122,120124,120126,120128],{"class":1004,"line":1060},[1002,120121,22427],{"class":1030},[1002,120123,974],{"class":15711},[1002,120125,120046],{"class":1030},[1002,120127,974],{"class":15711},[1002,120129,15703],{"class":1030},[1002,120131,120132,120134,120136],{"class":1004,"line":1272},[1002,120133,22437],{"class":1030},[1002,120135,1530],{"class":15711},[1002,120137,15703],{"class":1030},[1002,120139,120140,120142,120144,120147,120149],{"class":1004,"line":1348},[1002,120141,6539],{"class":1030},[1002,120143,1655],{"class":15711},[1002,120145,120146],{"class":1030},">Directions!\u003C\u002F",[1002,120148,1655],{"class":15711},[1002,120150,15703],{"class":1030},[1002,120152,120153],{"class":1004,"line":1354},[1002,120154,48279],{"class":1030},[925,120156,120157],{},"A tag that contains other tags is called the parent.",[925,120159,120160],{},"The tags contained in a parent tag are called children.",[953,120162,120164],{"id":120163},"not-indenting-child-tags-makes-html-hard-to-read","Not indenting child tags makes HTML hard to read",[925,120166,120167],{},"The code below is valid HTML. But it's too diffcult to read!",[993,120169,120170],{"className":37880,"code":119989,"language":383,"meta":998,"style":998},[941,120171,120172,120184,120192,120204,120216,120228],{"__ignoreMap":998},[1002,120173,120174,120176,120178,120180,120182],{"class":1004,"line":1005},[1002,120175,6539],{"class":1030},[1002,120177,1655],{"class":15711},[1002,120179,119872],{"class":1030},[1002,120181,1655],{"class":15711},[1002,120183,15703],{"class":1030},[1002,120185,120186,120188,120190],{"class":1004,"line":1012},[1002,120187,6539],{"class":1030},[1002,120189,1530],{"class":15711},[1002,120191,15703],{"class":1030},[1002,120193,120194,120196,120198,120200,120202],{"class":1004,"line":1047},[1002,120195,22427],{"class":1030},[1002,120197,974],{"class":15711},[1002,120199,120020],{"class":1030},[1002,120201,974],{"class":15711},[1002,120203,15703],{"class":1030},[1002,120205,120206,120208,120210,120212,120214],{"class":1004,"line":1054},[1002,120207,22427],{"class":1030},[1002,120209,974],{"class":15711},[1002,120211,120033],{"class":1030},[1002,120213,974],{"class":15711},[1002,120215,15703],{"class":1030},[1002,120217,120218,120220,120222,120224,120226],{"class":1004,"line":1060},[1002,120219,22427],{"class":1030},[1002,120221,974],{"class":15711},[1002,120223,120046],{"class":1030},[1002,120225,974],{"class":15711},[1002,120227,15703],{"class":1030},[1002,120229,120230,120232,120234],{"class":1004,"line":1272},[1002,120231,22437],{"class":1030},[1002,120233,1530],{"class":15711},[1002,120235,15703],{"class":1030},[925,120237,120238],{},"Always make sure you indent the code for the readability.",[953,120240,120242],{"id":120241},"use-an-ordered-list-to-show-list-items-in-a-certain-order","Use an ordered list to show list items in a certain order",[925,120244,120245],{},"If the content in your list does refer to steps to be followed, use an\nordered list.",[993,120247,120249],{"className":37880,"code":120248,"language":383,"meta":998,"style":998},"\u003Ch3>Ingredients\u003C\u002Fh3>\n\u003Col>\n \u003Cli>Mix eggs, sugar, and butter in a large bowl\u003C\u002Fli>\n \u003Cli>Spread into a non-stick dish\u003C\u002Fli>\n \u003Cli>Bake at 350 degrees for 1 hour\u003C\u002Fli>\n \u003Cli>Let sit at room temperature for 20 minutes\u003C\u002Fli>\n \u003Cli>Eat and enjoy!\u003C\u002Fli>\n\u003C\u002Fol>\n",[941,120250,120251,120263,120271,120284,120297,120310,120323,120336],{"__ignoreMap":998},[1002,120252,120253,120255,120257,120259,120261],{"class":1004,"line":1005},[1002,120254,6539],{"class":1030},[1002,120256,1655],{"class":15711},[1002,120258,119872],{"class":1030},[1002,120260,1655],{"class":15711},[1002,120262,15703],{"class":1030},[1002,120264,120265,120267,120269],{"class":1004,"line":1012},[1002,120266,6539],{"class":1030},[1002,120268,971],{"class":15711},[1002,120270,15703],{"class":1030},[1002,120272,120273,120275,120277,120280,120282],{"class":1004,"line":1047},[1002,120274,22427],{"class":1030},[1002,120276,974],{"class":15711},[1002,120278,120279],{"class":1030},">Mix eggs, sugar, and butter in a large bowl\u003C\u002F",[1002,120281,974],{"class":15711},[1002,120283,15703],{"class":1030},[1002,120285,120286,120288,120290,120293,120295],{"class":1004,"line":1054},[1002,120287,22427],{"class":1030},[1002,120289,974],{"class":15711},[1002,120291,120292],{"class":1030},">Spread into a non-stick dish\u003C\u002F",[1002,120294,974],{"class":15711},[1002,120296,15703],{"class":1030},[1002,120298,120299,120301,120303,120306,120308],{"class":1004,"line":1060},[1002,120300,22427],{"class":1030},[1002,120302,974],{"class":15711},[1002,120304,120305],{"class":1030},">Bake at 350 degrees for 1 hour\u003C\u002F",[1002,120307,974],{"class":15711},[1002,120309,15703],{"class":1030},[1002,120311,120312,120314,120316,120319,120321],{"class":1004,"line":1272},[1002,120313,22427],{"class":1030},[1002,120315,974],{"class":15711},[1002,120317,120318],{"class":1030},">Let sit at room temperature for 20 minutes\u003C\u002F",[1002,120320,974],{"class":15711},[1002,120322,15703],{"class":1030},[1002,120324,120325,120327,120329,120332,120334],{"class":1004,"line":1348},[1002,120326,22427],{"class":1030},[1002,120328,974],{"class":15711},[1002,120330,120331],{"class":1030},">Eat and enjoy!\u003C\u002F",[1002,120333,974],{"class":15711},[1002,120335,15703],{"class":1030},[1002,120337,120338,120340,120342],{"class":1004,"line":1354},[1002,120339,22437],{"class":1030},[1002,120341,971],{"class":15711},[1002,120343,15703],{"class":1030},[953,120345,120347],{"id":120346},"wrapping-everything-in-the-body","Wrapping everything in the body",[925,120349,120350,120351,22397],{},"Any content that appears on a web page should be in between a ",[941,120352,35697],{},[993,120354,120356],{"className":37880,"code":120355,"language":383,"meta":998,"style":998},"\u003Cbody>\n \u003Ch1>Recipe World\u003C\u002Fh1>\n \u003Ch2>Magic Cake\u003C\u002Fh2>!\n \u003Cp>Magic Cake is one of...\u003C\u002Fp>!\n \u003Ch3>Ingredients\u003C\u002Fh3>\n \u003Cul>...\u003C\u002Ful>\n \u003Col>\n \u003Ch3>Directions\u003C\u002Fh3>\n \u003Col>...\u003C\u002Fol>\n\u003C\u002Fbody>\n",[941,120357,120358,120366,120379,120393,120406,120418,120430,120438,120451,120463],{"__ignoreMap":998},[1002,120359,120360,120362,120364],{"class":1004,"line":1005},[1002,120361,6539],{"class":1030},[1002,120363,15034],{"class":15711},[1002,120365,15703],{"class":1030},[1002,120367,120368,120370,120372,120375,120377],{"class":1004,"line":1012},[1002,120369,15697],{"class":1030},[1002,120371,15201],{"class":15711},[1002,120373,120374],{"class":1030},">Recipe World\u003C\u002F",[1002,120376,15201],{"class":15711},[1002,120378,15703],{"class":1030},[1002,120380,120381,120383,120385,120388,120390],{"class":1004,"line":1047},[1002,120382,15697],{"class":1030},[1002,120384,953],{"class":15711},[1002,120386,120387],{"class":1030},">Magic Cake\u003C\u002F",[1002,120389,953],{"class":15711},[1002,120391,120392],{"class":1030},">!\n",[1002,120394,120395,120397,120399,120402,120404],{"class":1004,"line":1054},[1002,120396,15697],{"class":1030},[1002,120398,925],{"class":15711},[1002,120400,120401],{"class":1030},">Magic Cake is one of...\u003C\u002F",[1002,120403,925],{"class":15711},[1002,120405,120392],{"class":1030},[1002,120407,120408,120410,120412,120414,120416],{"class":1004,"line":1060},[1002,120409,15697],{"class":1030},[1002,120411,1655],{"class":15711},[1002,120413,119872],{"class":1030},[1002,120415,1655],{"class":15711},[1002,120417,15703],{"class":1030},[1002,120419,120420,120422,120424,120426,120428],{"class":1004,"line":1272},[1002,120421,15697],{"class":1030},[1002,120423,1530],{"class":15711},[1002,120425,80793],{"class":1030},[1002,120427,1530],{"class":15711},[1002,120429,15703],{"class":1030},[1002,120431,120432,120434,120436],{"class":1004,"line":1348},[1002,120433,15697],{"class":1030},[1002,120435,971],{"class":15711},[1002,120437,15703],{"class":1030},[1002,120439,120440,120442,120444,120447,120449],{"class":1004,"line":1354},[1002,120441,15697],{"class":1030},[1002,120443,1655],{"class":15711},[1002,120445,120446],{"class":1030},">Directions\u003C\u002F",[1002,120448,1655],{"class":15711},[1002,120450,15703],{"class":1030},[1002,120452,120453,120455,120457,120459,120461],{"class":1004,"line":1360},[1002,120454,15697],{"class":1030},[1002,120456,971],{"class":15711},[1002,120458,80793],{"class":1030},[1002,120460,971],{"class":15711},[1002,120462,15703],{"class":1030},[1002,120464,120465,120467,120469],{"class":1004,"line":1366},[1002,120466,22437],{"class":1030},[1002,120468,15034],{"class":15711},[1002,120470,15703],{"class":1030},[925,120472,120473,120475],{},[941,120474,35697],{}," doesn’t display anything, but helps keep the page content organized.",[953,120477,120479],{"id":120478},"adding-a-head-tag","Adding a head tag",[925,120481,120482,120483,120485],{},"Non-visible stuff goes in the ",[941,120484,16028],{}," tag. You’ll eventually use the head tag to load other useful scripts, like CSS and JavaScript.",[993,120487,120489],{"className":37880,"code":120488,"language":383,"meta":998,"style":998},"\u003Chead> \u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>Recipe World\u003C\u002Fh1>\n\u003C\u002Fbody>\n",[941,120490,120491,120504,120512,120524],{"__ignoreMap":998},[1002,120492,120493,120495,120497,120500,120502],{"class":1004,"line":1005},[1002,120494,6539],{"class":1030},[1002,120496,32092],{"class":15711},[1002,120498,120499],{"class":1030},"> \u003C\u002F",[1002,120501,32092],{"class":15711},[1002,120503,15703],{"class":1030},[1002,120505,120506,120508,120510],{"class":1004,"line":1012},[1002,120507,6539],{"class":1030},[1002,120509,15034],{"class":15711},[1002,120511,15703],{"class":1030},[1002,120513,120514,120516,120518,120520,120522],{"class":1004,"line":1047},[1002,120515,22427],{"class":1030},[1002,120517,15201],{"class":15711},[1002,120519,120374],{"class":1030},[1002,120521,15201],{"class":15711},[1002,120523,15703],{"class":1030},[1002,120525,120526,120528,120530],{"class":1004,"line":1054},[1002,120527,22437],{"class":1030},[1002,120529,15034],{"class":15711},[1002,120531,15703],{"class":1030},[925,120533,120534,120535,120537],{},"we'll discuss what goes in the ",[941,120536,16028],{}," later when we need it.",[953,120539,120541],{"id":120540},"make-everything-a-child-of-a-single-parent-tag","Make everything a child of a single parent tag",[925,120543,120544,120545,119986],{},"All of your HTML goes inside of the ",[941,120546,120547],{},"\u003Chtml>",[993,120549,120551],{"className":37880,"code":120550,"language":383,"meta":998,"style":998},"\u003Chtml>\n \u003Chead>\u003C\u002Fhead>\n \u003Cbody>\n \u003Ch1>Recipe King\u003C\u002Fh1>\n ...\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,120552,120553,120561,120573,120581,120593,120597,120605],{"__ignoreMap":998},[1002,120554,120555,120557,120559],{"class":1004,"line":1005},[1002,120556,6539],{"class":1030},[1002,120558,383],{"class":15711},[1002,120560,15703],{"class":1030},[1002,120562,120563,120565,120567,120569,120571],{"class":1004,"line":1012},[1002,120564,22427],{"class":1030},[1002,120566,32092],{"class":15711},[1002,120568,22081],{"class":1030},[1002,120570,32092],{"class":15711},[1002,120572,15703],{"class":1030},[1002,120574,120575,120577,120579],{"class":1004,"line":1047},[1002,120576,22427],{"class":1030},[1002,120578,15034],{"class":15711},[1002,120580,15703],{"class":1030},[1002,120582,120583,120585,120587,120589,120591],{"class":1004,"line":1054},[1002,120584,15697],{"class":1030},[1002,120586,15201],{"class":15711},[1002,120588,119846],{"class":1030},[1002,120590,15201],{"class":15711},[1002,120592,15703],{"class":1030},[1002,120594,120595],{"class":1004,"line":1060},[1002,120596,48894],{"class":1030},[1002,120598,120599,120601,120603],{"class":1004,"line":1272},[1002,120600,28112],{"class":1030},[1002,120602,15034],{"class":15711},[1002,120604,15703],{"class":1030},[1002,120606,120607,120609,120611],{"class":1004,"line":1348},[1002,120608,22437],{"class":1030},[1002,120610,383],{"class":15711},[1002,120612,15703],{"class":1030},[925,120614,120615],{},"Notice that we're indenting again so it's easy to see the parent\u002Fchild relationship",[953,120617,120619],{"id":120618},"setting-the-doctype-to-html","Setting the DOCTYPE to html",[925,120621,120622],{},"The DOCTYPE sets the HTML version.",[993,120624,120626],{"className":37880,"code":120625,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html>\n\u003Chtml>\n \u003Chead>\u003C\u002Fhead>\n \u003Cbody>\n \u003Ch1>Recipe King\u003C\u002Fh1>\n ...\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,120627,120628,120638,120646,120658,120666,120678,120682,120690],{"__ignoreMap":998},[1002,120629,120630,120632,120634,120636],{"class":1004,"line":1005},[1002,120631,37888],{"class":1030},[1002,120633,37891],{"class":15711},[1002,120635,21739],{"class":1026},[1002,120637,15703],{"class":1030},[1002,120639,120640,120642,120644],{"class":1004,"line":1012},[1002,120641,6539],{"class":1030},[1002,120643,383],{"class":15711},[1002,120645,15703],{"class":1030},[1002,120647,120648,120650,120652,120654,120656],{"class":1004,"line":1047},[1002,120649,22427],{"class":1030},[1002,120651,32092],{"class":15711},[1002,120653,22081],{"class":1030},[1002,120655,32092],{"class":15711},[1002,120657,15703],{"class":1030},[1002,120659,120660,120662,120664],{"class":1004,"line":1054},[1002,120661,22427],{"class":1030},[1002,120663,15034],{"class":15711},[1002,120665,15703],{"class":1030},[1002,120667,120668,120670,120672,120674,120676],{"class":1004,"line":1060},[1002,120669,15697],{"class":1030},[1002,120671,15201],{"class":15711},[1002,120673,119846],{"class":1030},[1002,120675,15201],{"class":15711},[1002,120677,15703],{"class":1030},[1002,120679,120680],{"class":1004,"line":1272},[1002,120681,48894],{"class":1030},[1002,120683,120684,120686,120688],{"class":1004,"line":1348},[1002,120685,28112],{"class":1030},[1002,120687,15034],{"class":15711},[1002,120689,15703],{"class":1030},[1002,120691,120692,120694,120696],{"class":1004,"line":1354},[1002,120693,22437],{"class":1030},[1002,120695,383],{"class":15711},[1002,120697,15703],{"class":1030},[925,120699,120700],{},"The browser can make better decisions about how to display your page when it knows which version of HTML you’re using.",[925,120702,120703],{},"That's a barebone HTML page for you. We'll discuss further in the up coming tutorials.",[1579,120705,120706],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":998,"searchDepth":1012,"depth":1012,"links":120708},[120709,120710,120711,120712,120713,120714,120715,120716,120717,120718,120719,120720,120721,120722,120723,120724,120725,120726],{"id":119731,"depth":1047,"text":119732},{"id":119738,"depth":1047,"text":119739},{"id":119749,"depth":1047,"text":119750},{"id":119756,"depth":1047,"text":119757},{"id":112645,"depth":1012,"text":119767},{"id":119773,"depth":1012,"text":119774},{"id":119783,"depth":1012,"text":119784},{"id":119821,"depth":1012,"text":119822},{"id":119828,"depth":1012,"text":119829},{"id":119911,"depth":1012,"text":119912},{"id":119977,"depth":1012,"text":119978},{"id":120064,"depth":1012,"text":120065},{"id":120163,"depth":1012,"text":120164},{"id":120241,"depth":1012,"text":120242},{"id":120346,"depth":1012,"text":120347},{"id":120478,"depth":1012,"text":120479},{"id":120540,"depth":1012,"text":120541},{"id":120618,"depth":1012,"text":120619},"2014-10-20","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhtml-introduction.jpg",{},{"title":379,"description":381},"blog\u002Fhtml-introduction",[16,383],"CQGVGiEa7L6Ga_9U_m0ERDPe9RNNZiWhKjaTnviTDo0",{"id":120735,"title":96,"author":920,"body":120736,"date":121195,"description":98,"extension":1591,"image":121196,"meta":121197,"navigation":1050,"path":97,"seo":121198,"stem":121199,"tags":121200,"__hash__":121201},"blog\u002Fblog\u002Fcoffeescript-introduction.md",{"type":922,"value":120737,"toc":121188},[120738,120741,120750,120753,120759,120761,120764,120772,120775,120779,120785,120788,120792,120822,120825,120830,120836,120841,120876,120879,120884,120890,120893,120899,120906,120910,120913,120919,120923,120929,120933,120993,120997,121000,121004,121010,121014,121017,121021,121027,121031,121114,121118,121121,121134,121137,121140,121149,121152,121161,121164,121173,121176,121185],[925,120739,120740],{},"To install CoffeeScript, use the following command in your console.",[993,120742,120744],{"className":1797,"code":120743,"language":1799,"meta":998,"style":998},"npm install -g coffee-script\n",[941,120745,120746],{"__ignoreMap":998},[1002,120747,120748],{"class":1004,"line":1005},[1002,120749,120743],{},[925,120751,120752],{},".. or you can download it from:",[925,120754,120755],{},[933,120756,120757],{"href":120757,"rel":120758},"https:\u002F\u002Fgithub.com\u002Fjashkenas\u002Fcoffeescript",[937],[953,120760,111658],{"id":111657},[925,120762,120763],{},"In CoffeeScript there are :",[1530,120765,120766,120769],{},[974,120767,120768],{},"No variable declarations",[974,120770,120771],{},"No semicolons",[925,120773,120774],{},"Take a look at the following code snippet:",[925,120776,120777],{},[1107,120778,109977],{},[993,120780,120783],{"className":120781,"code":120782,"language":24241},[24239],"message = \"Ready for some Coffee?\"\nalert(message)\n",[941,120784,120782],{"__ignoreMap":998},[925,120786,120787],{},"This will compile into the following JavaScript file:",[925,120789,120790],{},[1107,120791,109860],{},[993,120793,120795],{"className":995,"code":120794,"language":997,"meta":998,"style":998},"var message;\nmessage = 'Ready for some Coffee?';\nalert(message);\n",[941,120796,120797,120804,120816],{"__ignoreMap":998},[1002,120798,120799,120801],{"class":1004,"line":1005},[1002,120800,18311],{"class":1015},[1002,120802,120803],{"class":1030}," message;\n",[1002,120805,120806,120809,120811,120814],{"class":1004,"line":1012},[1002,120807,120808],{"class":1030},"message ",[1002,120810,2393],{"class":1015},[1002,120812,120813],{"class":1034}," 'Ready for some Coffee?'",[1002,120815,1407],{"class":1030},[1002,120817,120818,120820],{"class":1004,"line":1047},[1002,120819,93687],{"class":1026},[1002,120821,17652],{"class":1030},[925,120823,120824],{},"There are 2 ways to create functions in JavaScript:",[1530,120826,120827],{},[974,120828,120829],{},"Named Functions",[993,120831,120834],{"className":120832,"code":120833,"language":24241},[24239],"function coffee() {\n return confirm(\"Ready for some Coffee?\");\n}\n",[941,120835,120833],{"__ignoreMap":998},[1530,120837,120838],{},[974,120839,120840],{},"Function Expressions",[993,120842,120844],{"className":995,"code":120843,"language":997,"meta":998,"style":998},"var coffee = function () {\n return confirm('Ready for some Coffee?');\n};\n",[941,120845,120846,120859,120872],{"__ignoreMap":998},[1002,120847,120848,120850,120853,120855,120857],{"class":1004,"line":1005},[1002,120849,18311],{"class":1015},[1002,120851,120852],{"class":1026}," coffee",[1002,120854,1023],{"class":1015},[1002,120856,8457],{"class":1015},[1002,120858,9772],{"class":1030},[1002,120860,120861,120863,120865,120867,120870],{"class":1004,"line":1012},[1002,120862,15066],{"class":1015},[1002,120864,17649],{"class":1026},[1002,120866,1031],{"class":1030},[1002,120868,120869],{"class":1034},"'Ready for some Coffee?'",[1002,120871,1085],{"class":1030},[1002,120873,120874],{"class":1004,"line":1047},[1002,120875,1517],{"class":1030},[925,120877,120878],{},"In CoffeeScript, it's written with the following syntax:",[925,120880,120881,120883],{},[1002,120882,941],{},"\ncoffee();",[993,120885,120888],{"className":120886,"code":120887,"language":24241},[24239],"\nBut in CoffeeScript, we only use **Function Expressions.**\n\n**CoffeeScript**\n\n",[941,120889,120887],{"__ignoreMap":998},[925,120891,120892],{},"coffee = ->\nconfirm \"Ready for some Coffee?\"",[993,120894,120897],{"className":120895,"code":120896,"language":24241},[24239],"\n**JavaScript**\n\n```js\nvar coffee = function() {\n return confirm(\"Ready for some Coffee?\");\n}\n",[941,120898,120896],{"__ignoreMap":998},[925,120900,120901,120902,120905],{},"1 tab or 2 spaces indented\n",[941,120903,120904],{},"-> converts to function() {","\nAlways has a return value",[953,120907,120909],{"id":120908},"returning-a-string","Returning a String",[925,120911,120912],{},"The following highlighted expressions is similar to:",[993,120914,120917],{"className":120915,"code":120916,"language":24241},[24239],"\"Your answer is #{answer}\"\n",[941,120918,120916],{"__ignoreMap":998},[925,120920,120921],{},[1107,120922,109977],{},[993,120924,120927],{"className":120925,"code":120926,"language":24241},[24239],"coffee = ->\n answer = confirm \"Ready for some Coffee?\"\n \"Your answer is \" + answer\n",[941,120928,120926],{"__ignoreMap":998},[925,120930,120931],{},[1107,120932,109860],{},[993,120934,120936],{"className":995,"code":120935,"language":997,"meta":998,"style":998},"var coffee;\ncoffee = function () {\n var answer;\n answer = confirm('Ready for some Coffee?');\n return 'Your answer is ' + answer;\n};\n",[941,120937,120938,120945,120956,120963,120978,120989],{"__ignoreMap":998},[1002,120939,120940,120942],{"class":1004,"line":1005},[1002,120941,18311],{"class":1015},[1002,120943,120944],{"class":1030}," coffee;\n",[1002,120946,120947,120950,120952,120954],{"class":1004,"line":1012},[1002,120948,120949],{"class":1026},"coffee",[1002,120951,1023],{"class":1015},[1002,120953,8457],{"class":1015},[1002,120955,9772],{"class":1030},[1002,120957,120958,120960],{"class":1004,"line":1047},[1002,120959,28293],{"class":1015},[1002,120961,120962],{"class":1030}," answer;\n",[1002,120964,120965,120968,120970,120972,120974,120976],{"class":1004,"line":1054},[1002,120966,120967],{"class":1030}," answer ",[1002,120969,2393],{"class":1015},[1002,120971,17649],{"class":1026},[1002,120973,1031],{"class":1030},[1002,120975,120869],{"class":1034},[1002,120977,1085],{"class":1030},[1002,120979,120980,120982,120985,120987],{"class":1004,"line":1060},[1002,120981,15066],{"class":1015},[1002,120983,120984],{"class":1034}," 'Your answer is '",[1002,120986,6583],{"class":1015},[1002,120988,120962],{"class":1030},[1002,120990,120991],{"class":1004,"line":1272},[1002,120992,1517],{"class":1030},[953,120994,120996],{"id":120995},"function-parameters","Function Parameters",[925,120998,120999],{},"With CoffeeScript functions, you should use parenthesis on everything\nbut the outermost call.",[925,121001,121002],{},[1107,121003,109977],{},[993,121005,121008],{"className":121006,"code":121007,"language":24241},[24239],"coffee = (message) ->\n answer = confirm message\n \"Your answer is #{answer}\"\n\nalert coffee(\"Ready for some Coffee?\")\n",[941,121009,121007],{"__ignoreMap":998},[953,121011,121013],{"id":121012},"optinal-parameters","Optinal Parameters",[925,121015,121016],{},"If we want a default message, we can assign it to the argument as below:",[925,121018,121019],{},[1107,121020,109977],{},[993,121022,121025],{"className":121023,"code":121024,"language":24241},[24239],"coffee = (message = \"Ready for some Coffee?\" ) ->\n answer = confirm message\n \"Your answer is #{answer}\"\n",[941,121026,121024],{"__ignoreMap":998},[925,121028,121029],{},[1107,121030,109860],{},[993,121032,121034],{"className":995,"code":121033,"language":997,"meta":998,"style":998},"var coffee;\ncoffee = function (message) {\n var answer;\n if (message == null) {\n message = 'Ready for some Coffee?';\n }\n answer = confirm(message);\n return 'Your answer is ' + answer;\n};\n",[941,121035,121036,121042,121056,121062,121075,121086,121090,121100,121110],{"__ignoreMap":998},[1002,121037,121038,121040],{"class":1004,"line":1005},[1002,121039,18311],{"class":1015},[1002,121041,120944],{"class":1030},[1002,121043,121044,121046,121048,121050,121052,121054],{"class":1004,"line":1012},[1002,121045,120949],{"class":1026},[1002,121047,1023],{"class":1015},[1002,121049,8457],{"class":1015},[1002,121051,6513],{"class":1030},[1002,121053,7100],{"class":2378},[1002,121055,2382],{"class":1030},[1002,121057,121058,121060],{"class":1004,"line":1047},[1002,121059,28293],{"class":1015},[1002,121061,120962],{"class":1030},[1002,121063,121064,121066,121069,121071,121073],{"class":1004,"line":1054},[1002,121065,19971],{"class":1015},[1002,121067,121068],{"class":1030}," (message ",[1002,121070,87480],{"class":1015},[1002,121072,7080],{"class":1019},[1002,121074,2382],{"class":1030},[1002,121076,121077,121080,121082,121084],{"class":1004,"line":1060},[1002,121078,121079],{"class":1030}," message ",[1002,121081,2393],{"class":1015},[1002,121083,120813],{"class":1034},[1002,121085,1407],{"class":1030},[1002,121087,121088],{"class":1004,"line":1272},[1002,121089,1269],{"class":1030},[1002,121091,121092,121094,121096,121098],{"class":1004,"line":1348},[1002,121093,120967],{"class":1030},[1002,121095,2393],{"class":1015},[1002,121097,17649],{"class":1026},[1002,121099,17652],{"class":1030},[1002,121101,121102,121104,121106,121108],{"class":1004,"line":1354},[1002,121103,15066],{"class":1015},[1002,121105,120984],{"class":1034},[1002,121107,6583],{"class":1015},[1002,121109,120962],{"class":1030},[1002,121111,121112],{"class":1004,"line":1360},[1002,121113,1517],{"class":1030},[953,121115,121117],{"id":121116},"the-coffeescript-compiler-optional","The CoffeeScript Compiler (optional)",[925,121119,121120],{},"You can optionally use a CoffeeScript Compiler to compile your code into JavaScript.",[1530,121122,121123,121126,121129],{},[974,121124,121125],{},"Install Node.js",[974,121127,121128],{},"Install npm",[974,121130,48156,121131],{},[941,121132,121133],{},"$ npm install -g coffee-script",[925,121135,121136],{},"Here are few Command-Line examples, you can use:",[925,121138,121139],{},"Creates test.js",[993,121141,121143],{"className":1797,"code":121142,"language":1799,"meta":998,"style":998},"coffee -c test.coffee\n",[941,121144,121145],{"__ignoreMap":998},[1002,121146,121147],{"class":1004,"line":1005},[1002,121148,121142],{},[925,121150,121151],{},"Every time test.coffee is updated re-compile.",[993,121153,121155],{"className":1797,"code":121154,"language":1799,"meta":998,"style":998},"coffee -cw test.coffee\n",[941,121156,121157],{"__ignoreMap":998},[1002,121158,121159],{"class":1004,"line":1005},[1002,121160,121154],{},[925,121162,121163],{},"Compile all .coffee files in the src dir into the js dir.",[993,121165,121167],{"className":1797,"code":121166,"language":1799,"meta":998,"style":998},"coffee -c src -o js\n",[941,121168,121169],{"__ignoreMap":998},[1002,121170,121171],{"class":1004,"line":1005},[1002,121172,121166],{},[925,121174,121175],{},"Every time a file is updated re-compile.",[993,121177,121179],{"className":1797,"code":121178,"language":1799,"meta":998,"style":998},"coffee -wc src -o js\n",[941,121180,121181],{"__ignoreMap":998},[1002,121182,121183],{"class":1004,"line":1005},[1002,121184,121178],{},[1579,121186,121187],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":121189},[121190,121191,121192,121193,121194],{"id":111657,"depth":1012,"text":111658},{"id":120908,"depth":1012,"text":120909},{"id":120995,"depth":1012,"text":120996},{"id":121012,"depth":1012,"text":121013},{"id":121116,"depth":1012,"text":121117},"2014-10-17","\u002Fimages\u002Fblog\u002Ffeatures\u002Fcoffeescript-introduction.jpg",{},{"title":96,"description":98},"blog\u002Fcoffeescript-introduction",[16,17,100],"X1oYGqphgHKFup9UdVHWIs0REdafUsGViDGc9f0ZumQ",{"id":121203,"title":283,"author":920,"body":121204,"date":121357,"description":285,"extension":1591,"image":121358,"meta":121359,"navigation":1050,"path":284,"seo":121360,"stem":121361,"tags":121362,"__hash__":121363},"blog\u002Fblog\u002Ffocal-length-f-stop.md",{"type":922,"value":121205,"toc":121351},[121206,121209,121215,121221,121225,121238,121242,121245,121249,121252,121255,121335,121339,121345,121348],[925,121207,121208],{},"The distances follow this formula:",[925,121210,121211],{},[963,121212],{"alt":121213,"src":121214},"The distances","http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002Fformula.gif",[925,121216,121217,121218,948],{},"This means a 400mm lens should be 400mm long. If you get out your ruler and measure it, you will find it is less than 400mm. That is because a camera lens\nhas many individual glass lenses inside, and this makes it behave as if it is longer than it is. This is called ",[1107,121219,121220],{},"telephoto",[953,121222,121224],{"id":121223},"what-is-f-stop","What is F-Stop?",[925,121226,121227,121228,121231,121232,16529,121235,948],{},"F-stop is the focal length divided by the diameter of the lens. For example, a 200mm f\u002F4 lens will be 50mm wide. Get out your ruler and measure it. 200mm\u002F50mm = f\u002F4.\nThat is why f-stop is typically written as ",[1107,121229,121230],{},"F\u002F4",", meaning ",[1107,121233,121234],{},"focal-length over 4",[1107,121236,121237],{},"focal-length divided by four",[953,121239,121241],{"id":121240},"where-do-those-numbers-come-from","Where do those numbers come from?",[925,121243,121244],{},"Lenses are marked with a series off-stops, each one lets in half as much light as the previous one. The light-gathering ability of a lens is determined by its area, and f-stops are determined by diameter.\nArea is related to diameter squared. The progression of f-stops, 1 - 1.4 - 2 - 2.8 - 4 - 5.6 - 8 - 11 - 16 - 22 - 32, are powers of the square root of 2.",[953,121246,121248],{"id":121247},"lens-focal-length-chart","Lens Focal Length Chart",[925,121250,121251],{},"Taking the nature photographs of wildflowers and wildlife require an assortment of lenses depending on the subject.\nTypically normal to wide-angle lenses are used for landscape photos and very long telephotos are used for wildlife.\nThe photographs below show the views of a single scene taken using these lenses.",[925,121253,121254],{},"These eight photos were taken from the same place with different lenses.",[39742,121256,69649,121257],{},[39759,121258,121259,69649,121280,69649,121299,69649,121317],{},[39748,121260,121261,121262,121261,121269,121261,121272,121261,121277,69649],{},"\n ",[39764,121263,121264],{},[963,121265],{"src":121266,"alt":998,"width":121267,"height":121268},"http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002F24mm.jpg",240,160,[39764,121270,121271],{"width":56354},"24mm",[39764,121273,121274],{},[963,121275],{"src":121276,"alt":998,"width":121267,"height":121268},"http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002F35mm.jpg",[39764,121278,121279],{"width":56354},"35mm",[39748,121281,121261,121282,121261,121287,121261,121290,121261,121296,69649],{},[39764,121283,121284],{},[963,121285],{"src":121286,"alt":998,"width":121267,"height":121268},"http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002F50mm.jpg",[39764,121288,121289],{},"50mm",[39764,121291,121292],{},[963,121293],{"src":121294,"alt":998,"width":121267,"height":121295},"http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002F100mm.jpg",161,[39764,121297,121298],{},"100mm",[39748,121300,121261,121301,121261,121306,121261,121309,121261,121314,69649],{},[39764,121302,121303],{},[963,121304],{"src":121305,"alt":998,"width":121267,"height":121268},"http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002F200mm.jpg",[39764,121307,121308],{},"200mm",[39764,121310,121311],{},[963,121312],{"src":121313,"alt":998,"width":121267,"height":121268},"http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002F400mm.jpg",[39764,121315,121316],{},"400mm",[39748,121318,121261,121319,121261,121324,121261,121327,121261,121332,69649],{},[39764,121320,121321],{},[963,121322],{"src":121323,"alt":998,"width":121267,"height":121268},"http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002F800mm.jpg",[39764,121325,121326],{},"800mm",[39764,121328,121329],{},[963,121330],{"src":121331,"alt":998,"width":121267,"height":121268},"http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002F1200mm.jpg",[39764,121333,121334],{},"1200mm",[953,121336,121338],{"id":121337},"i-want-to-take-a-bird-picture-what-lens-should-i-use","I want to take a bird picture. What lens should I use?",[925,121340,121341],{},[963,121342],{"alt":121343,"src":121344},"a bird picture","http:\u002F\u002Fwww.paragon-press.com\u002Flens\u002Flensmbb.jpg",[925,121346,121347],{},"It is a symptom of bird photography that your lenses never seem to be long enough. This is because the birds are so small.\nWhen photographing large animals, a 400mm gives you a decent image size from a reasonable distance. But remember, an elk is six or seven feet tall.\nA bird is barely six inches long, so when your subject is twelve times smaller, you have to be twelve times closer.",[925,121349,121350],{},"As you can see, even a relatively huge 600mm lens at the relatively close distance of 20 feet doesn't give the huge magnification you might expect.\nThe field of view is about twelve inches. It takes a big lens to photograph a small bird.",{"title":998,"searchDepth":1012,"depth":1012,"links":121352},[121353,121354,121355,121356],{"id":121223,"depth":1012,"text":121224},{"id":121240,"depth":1012,"text":121241},{"id":121247,"depth":1012,"text":121248},{"id":121337,"depth":1012,"text":121338},"2014-10-11","\u002Fimages\u002Fblog\u002Ffeatures\u002Ffocal-length-f-stop.jpg",{},{"title":283,"description":285},"blog\u002Ffocal-length-f-stop",[89],"jdfvjsdkt6Eqq-XohYRcPeRgIWiVZ9kCrOO0zuIcrBU",{"id":121365,"title":761,"author":920,"body":121366,"date":122715,"description":763,"extension":1591,"image":122716,"meta":122717,"navigation":1050,"path":762,"seo":122718,"stem":122719,"tags":122720,"__hash__":122721},"blog\u002Fblog\u002Fsass-introduction.md",{"type":922,"value":121367,"toc":122707},[121368,121371,121382,121395,121399,121402,121416,121418,121516,121518,121597,121600,121607,121609,121639,121641,121649,121653,121659,121662,121689,121693,121696,121698,121738,121742,121745,121867,121870,121988,121991,122110,122113,122117,122120,122168,122203,122206,122208,122299,122302,122389,122397,122399,122467,122469,122555,122558,122561,122563,122644,122646,122701,122704],[925,121369,121370],{},"When you scale CSS:",[1530,121372,121373,121376,121379],{},[974,121374,121375],{},"Slight variations of colors, fonts, numbers & other properties arise",[974,121377,121378],{},"Effective curbing of repetition can decline.",[974,121380,121381],{},"Stylesheet size may become unmanageable",[925,121383,121384,121385,121388,121389,121391,121392,121394],{},"Enter Sass, the ",[1107,121386,121387],{},"S","yntactically ",[1107,121390,15318],{},"wesome ",[1107,121393,121387],{},"tylesheets.",[953,121396,121398],{"id":121397},"what-is-sass","What is Sass?",[925,121400,121401],{},"Here is what Sass is:",[1530,121403,121404,121407,121410,121413],{},[974,121405,121406],{},"Looks like CSS, but adds features to combat shortcomings.",[974,121408,121409],{},"Preprocessor, like CoffeeScript & Haml",[974,121411,121412],{},"Sassy CSS (.scss) is the default file extension.",[974,121414,121415],{},"CSS is valid SCSS",[925,121417,110242],{},[993,121419,121421],{"className":35707,"code":121420,"language":29,"meta":998,"style":998},"$main: #444;\n.btn {\n color: $main;\n display: block;\n}\n.btn-a {\n color: lighten($main, 30%);\n &:hover {\n color: lighten($main, 40%);\n }\n}\n",[941,121422,121423,121436,121442,121449,121459,121463,121469,121487,121492,121508,121512],{"__ignoreMap":998},[1002,121424,121425,121427,121429,121431,121434],{"class":1004,"line":1005},[1002,121426,15864],{"class":1030},[1002,121428,20008],{"class":15711},[1002,121430,1137],{"class":1030},[1002,121432,121433],{"class":18541},"#444",[1002,121435,1407],{"class":1030},[1002,121437,121438,121440],{"class":1004,"line":1012},[1002,121439,96662],{"class":1026},[1002,121441,1457],{"class":1030},[1002,121443,121444,121446],{"class":1004,"line":1047},[1002,121445,35952],{"class":1019},[1002,121447,121448],{"class":1030},": $main;\n",[1002,121450,121451,121453,121455,121457],{"class":1004,"line":1054},[1002,121452,37254],{"class":1019},[1002,121454,1137],{"class":1030},[1002,121456,71253],{"class":1019},[1002,121458,1407],{"class":1030},[1002,121460,121461],{"class":1004,"line":1060},[1002,121462,1170],{"class":1030},[1002,121464,121465,121467],{"class":1004,"line":1272},[1002,121466,110576],{"class":1026},[1002,121468,1457],{"class":1030},[1002,121470,121471,121473,121475,121478,121481,121483,121485],{"class":1004,"line":1348},[1002,121472,35952],{"class":1019},[1002,121474,1137],{"class":1030},[1002,121476,121477],{"class":1019},"lighten",[1002,121479,121480],{"class":1030},"($main, ",[1002,121482,51004],{"class":1019},[1002,121484,32598],{"class":1015},[1002,121486,1085],{"class":1030},[1002,121488,121489],{"class":1004,"line":1354},[1002,121490,121491],{"class":1030}," &:hover {\n",[1002,121493,121494,121496,121498,121500,121502,121504,121506],{"class":1004,"line":1360},[1002,121495,36028],{"class":1019},[1002,121497,1137],{"class":1030},[1002,121499,121477],{"class":1019},[1002,121501,121480],{"class":1030},[1002,121503,51017],{"class":1019},[1002,121505,32598],{"class":1015},[1002,121507,1085],{"class":1030},[1002,121509,121510],{"class":1004,"line":1366},[1002,121511,1269],{"class":1030},[1002,121513,121514],{"class":1004,"line":1946},[1002,121515,1170],{"class":1030},[925,121517,110313],{},[993,121519,121521],{"className":35707,"code":121520,"language":29,"meta":998,"style":998},".btn {\n color: #444444;\n display: block;\n}\n.btn-a {\n color: #919191;\n}\n.btn-a:hover {\n color: #aaaaaa;\n}\n",[941,121522,121523,121529,121540,121550,121554,121560,121571,121575,121582,121593],{"__ignoreMap":998},[1002,121524,121525,121527],{"class":1004,"line":1005},[1002,121526,96662],{"class":1026},[1002,121528,1457],{"class":1030},[1002,121530,121531,121533,121535,121538],{"class":1004,"line":1012},[1002,121532,35952],{"class":1019},[1002,121534,1137],{"class":1030},[1002,121536,121537],{"class":1019},"#444444",[1002,121539,1407],{"class":1030},[1002,121541,121542,121544,121546,121548],{"class":1004,"line":1047},[1002,121543,37254],{"class":1019},[1002,121545,1137],{"class":1030},[1002,121547,71253],{"class":1019},[1002,121549,1407],{"class":1030},[1002,121551,121552],{"class":1004,"line":1054},[1002,121553,1170],{"class":1030},[1002,121555,121556,121558],{"class":1004,"line":1060},[1002,121557,110576],{"class":1026},[1002,121559,1457],{"class":1030},[1002,121561,121562,121564,121566,121569],{"class":1004,"line":1272},[1002,121563,35952],{"class":1019},[1002,121565,1137],{"class":1030},[1002,121567,121568],{"class":1019},"#919191",[1002,121570,1407],{"class":1030},[1002,121572,121573],{"class":1004,"line":1348},[1002,121574,1170],{"class":1030},[1002,121576,121577,121580],{"class":1004,"line":1354},[1002,121578,121579],{"class":1026},".btn-a:hover",[1002,121581,1457],{"class":1030},[1002,121583,121584,121586,121588,121591],{"class":1004,"line":1360},[1002,121585,35952],{"class":1019},[1002,121587,1137],{"class":1030},[1002,121589,121590],{"class":1019},"#aaaaaa",[1002,121592,1407],{"class":1030},[1002,121594,121595],{"class":1004,"line":1366},[1002,121596,1170],{"class":1030},[953,121598,121599],{"id":79294},"Comments",[925,121601,121602,121603,121606],{},"Sass adds ",[941,121604,121605],{},"\u002F\u002F"," for single line comments - not output after compile",[925,121608,110242],{},[993,121610,121612],{"className":35707,"code":121611,"language":29,"meta":998,"style":998},"\u002F\u002F These comments will\n\u002F\u002F not be output to the\n\u002F\u002F compiled CSS file\n\u002F* This comment will *\u002F\n",[941,121613,121614,121619,121629,121634],{"__ignoreMap":998},[1002,121615,121616],{"class":1004,"line":1005},[1002,121617,121618],{"class":1030},"\u002F\u002F These comments will\n",[1002,121620,121621,121624,121626],{"class":1004,"line":1012},[1002,121622,121623],{"class":1030},"\u002F\u002F not be ",[1002,121625,11143],{"class":15711},[1002,121627,121628],{"class":1030}," to the\n",[1002,121630,121631],{"class":1004,"line":1047},[1002,121632,121633],{"class":1030},"\u002F\u002F compiled CSS file\n",[1002,121635,121636],{"class":1004,"line":1054},[1002,121637,121638],{"class":1008},"\u002F* This comment will *\u002F\n",[925,121640,110313],{},[993,121642,121643],{"className":35707,"code":121638,"language":29,"meta":998,"style":998},[941,121644,121645],{"__ignoreMap":998},[1002,121646,121647],{"class":1004,"line":1005},[1002,121648,121638],{"class":1008},[953,121650,121652],{"id":121651},"avoid-css-import","Avoid CSS @import",[925,121654,121655,121656,121658],{},"The CSS @import rule should be avoided to as it prevents parallel downloading. ",[1107,121657,110647],{}," with .scss or .sass happens\nduring compile rather than client-side. Which file extension to use is optional.",[925,121660,121661],{},"application.scss",[993,121663,121665],{"className":35707,"code":121664,"language":29,"meta":998,"style":998},"\u002F\u002F Imports styles found in 'buttons.scss'\n\u002F\u002F when the compiler processes application.scss\n@import \"buttons\";\n",[941,121666,121667,121672,121680],{"__ignoreMap":998},[1002,121668,121669],{"class":1004,"line":1005},[1002,121670,121671],{"class":1030},"\u002F\u002F Imports styles found in 'buttons.scss'\n",[1002,121673,121674,121677],{"class":1004,"line":1012},[1002,121675,121676],{"class":1030},"\u002F\u002F when the compiler processes application",[1002,121678,121679],{"class":1026},".scss\n",[1002,121681,121682,121684,121687],{"class":1004,"line":1047},[1002,121683,110647],{"class":1015},[1002,121685,121686],{"class":1034}," \"buttons\"",[1002,121688,1407],{"class":1030},[953,121690,121692],{"id":121691},"partials","Partials",[925,121694,121695],{},"Adding an underscore creates a partial. Partials can be imported, but will not compile to .css",[925,121697,121661],{},[993,121699,121701],{"className":35707,"code":121700,"language":29,"meta":998,"style":998},"\u002F\u002F Will import _buttons.sass, buttons.sass,\n\u002F\u002F _buttons.scss, or buttons.scss\n@import \"buttons\";\n",[941,121702,121703,121718,121730],{"__ignoreMap":998},[1002,121704,121705,121708,121711,121714,121716],{"class":1004,"line":1005},[1002,121706,121707],{"class":1030},"\u002F\u002F Will import _buttons",[1002,121709,121710],{"class":1026},".sass",[1002,121712,121713],{"class":1030},", buttons",[1002,121715,121710],{"class":1026},[1002,121717,1143],{"class":1030},[1002,121719,121720,121723,121725,121728],{"class":1004,"line":1012},[1002,121721,121722],{"class":1030},"\u002F\u002F _buttons",[1002,121724,48378],{"class":1026},[1002,121726,121727],{"class":1030},", or buttons",[1002,121729,121679],{"class":1026},[1002,121731,121732,121734,121736],{"class":1004,"line":1047},[1002,121733,110647],{"class":1015},[1002,121735,121686],{"class":1034},[1002,121737,1407],{"class":1030},[953,121739,121741],{"id":121740},"nesting-selectors","Nesting Selectors",[925,121743,121744],{},"Consider the Sass file below:",[993,121746,121748],{"className":35707,"code":121747,"language":29,"meta":998,"style":998},".content {\n border: 1px solid #ccc;\n padding: 20px;\n}\n.content h2 {\n font-size: 3em;\n margin: 20px 0;\n}\n.content p {\n font-size: 1.5em;\n margin: 15px 0;\n}\n",[941,121749,121750,121756,121773,121785,121789,121798,121810,121824,121828,121836,121849,121863],{"__ignoreMap":998},[1002,121751,121752,121754],{"class":1004,"line":1005},[1002,121753,73165],{"class":1026},[1002,121755,1457],{"class":1030},[1002,121757,121758,121760,121762,121764,121766,121768,121771],{"class":1004,"line":1012},[1002,121759,71181],{"class":1019},[1002,121761,1137],{"class":1030},[1002,121763,6211],{"class":1019},[1002,121765,43835],{"class":1015},[1002,121767,43838],{"class":1019},[1002,121769,121770],{"class":1019}," #ccc",[1002,121772,1407],{"class":1030},[1002,121774,121775,121777,121779,121781,121783],{"class":1004,"line":1047},[1002,121776,37280],{"class":1019},[1002,121778,1137],{"class":1030},[1002,121780,4809],{"class":1019},[1002,121782,43835],{"class":1015},[1002,121784,1407],{"class":1030},[1002,121786,121787],{"class":1004,"line":1054},[1002,121788,1170],{"class":1030},[1002,121790,121791,121793,121796],{"class":1004,"line":1060},[1002,121792,73165],{"class":1026},[1002,121794,121795],{"class":15711}," h2",[1002,121797,1457],{"class":1030},[1002,121799,121800,121802,121804,121806,121808],{"class":1004,"line":1272},[1002,121801,37355],{"class":1019},[1002,121803,1137],{"class":1030},[1002,121805,2796],{"class":1019},[1002,121807,928],{"class":1015},[1002,121809,1407],{"class":1030},[1002,121811,121812,121814,121816,121818,121820,121822],{"class":1004,"line":1348},[1002,121813,37384],{"class":1019},[1002,121815,1137],{"class":1030},[1002,121817,4809],{"class":1019},[1002,121819,43835],{"class":1015},[1002,121821,4910],{"class":1019},[1002,121823,1407],{"class":1030},[1002,121825,121826],{"class":1004,"line":1354},[1002,121827,1170],{"class":1030},[1002,121829,121830,121832,121834],{"class":1004,"line":1360},[1002,121831,73165],{"class":1026},[1002,121833,16244],{"class":15711},[1002,121835,1457],{"class":1030},[1002,121837,121838,121840,121842,121845,121847],{"class":1004,"line":1366},[1002,121839,37355],{"class":1019},[1002,121841,1137],{"class":1030},[1002,121843,121844],{"class":1019},"1.5",[1002,121846,928],{"class":1015},[1002,121848,1407],{"class":1030},[1002,121850,121851,121853,121855,121857,121859,121861],{"class":1004,"line":1946},[1002,121852,37384],{"class":1019},[1002,121854,1137],{"class":1030},[1002,121856,31465],{"class":1019},[1002,121858,43835],{"class":1015},[1002,121860,4910],{"class":1019},[1002,121862,1407],{"class":1030},[1002,121864,121865],{"class":1004,"line":1956},[1002,121866,1170],{"class":1030},[925,121868,121869],{},"When compiled the CSS output will look like:",[993,121871,121872],{"className":35707,"code":121747,"language":29,"meta":998,"style":998},[941,121873,121874,121880,121896,121908,121912,121920,121932,121946,121950,121958,121970,121984],{"__ignoreMap":998},[1002,121875,121876,121878],{"class":1004,"line":1005},[1002,121877,73165],{"class":1026},[1002,121879,1457],{"class":1030},[1002,121881,121882,121884,121886,121888,121890,121892,121894],{"class":1004,"line":1012},[1002,121883,71181],{"class":1019},[1002,121885,1137],{"class":1030},[1002,121887,6211],{"class":1019},[1002,121889,43835],{"class":1015},[1002,121891,43838],{"class":1019},[1002,121893,121770],{"class":1019},[1002,121895,1407],{"class":1030},[1002,121897,121898,121900,121902,121904,121906],{"class":1004,"line":1047},[1002,121899,37280],{"class":1019},[1002,121901,1137],{"class":1030},[1002,121903,4809],{"class":1019},[1002,121905,43835],{"class":1015},[1002,121907,1407],{"class":1030},[1002,121909,121910],{"class":1004,"line":1054},[1002,121911,1170],{"class":1030},[1002,121913,121914,121916,121918],{"class":1004,"line":1060},[1002,121915,73165],{"class":1026},[1002,121917,121795],{"class":15711},[1002,121919,1457],{"class":1030},[1002,121921,121922,121924,121926,121928,121930],{"class":1004,"line":1272},[1002,121923,37355],{"class":1019},[1002,121925,1137],{"class":1030},[1002,121927,2796],{"class":1019},[1002,121929,928],{"class":1015},[1002,121931,1407],{"class":1030},[1002,121933,121934,121936,121938,121940,121942,121944],{"class":1004,"line":1348},[1002,121935,37384],{"class":1019},[1002,121937,1137],{"class":1030},[1002,121939,4809],{"class":1019},[1002,121941,43835],{"class":1015},[1002,121943,4910],{"class":1019},[1002,121945,1407],{"class":1030},[1002,121947,121948],{"class":1004,"line":1354},[1002,121949,1170],{"class":1030},[1002,121951,121952,121954,121956],{"class":1004,"line":1360},[1002,121953,73165],{"class":1026},[1002,121955,16244],{"class":15711},[1002,121957,1457],{"class":1030},[1002,121959,121960,121962,121964,121966,121968],{"class":1004,"line":1366},[1002,121961,37355],{"class":1019},[1002,121963,1137],{"class":1030},[1002,121965,121844],{"class":1019},[1002,121967,928],{"class":1015},[1002,121969,1407],{"class":1030},[1002,121971,121972,121974,121976,121978,121980,121982],{"class":1004,"line":1946},[1002,121973,37384],{"class":1019},[1002,121975,1137],{"class":1030},[1002,121977,31465],{"class":1019},[1002,121979,43835],{"class":1015},[1002,121981,4910],{"class":1019},[1002,121983,1407],{"class":1030},[1002,121985,121986],{"class":1004,"line":1956},[1002,121987,1170],{"class":1030},[925,121989,121990],{},"Pretty much the same. The whole point of using Sass is to structure your styles in a way easier for you to interpret what you are intending to do. Now look at the following Sass file:",[993,121992,121994],{"className":35707,"code":121993,"language":29,"meta":998,"style":998},".content {\n border: 1px solid #ccc;\n padding: 20px;\n}\n\nh2 {\n font-size: 3em;\n margin: 20px 0;\n}\np {\n font-size: 1.5em;\n margin: 15px 0;\n}\n",[941,121995,121996,122002,122018,122030,122034,122038,122044,122056,122070,122074,122080,122092,122106],{"__ignoreMap":998},[1002,121997,121998,122000],{"class":1004,"line":1005},[1002,121999,73165],{"class":1026},[1002,122001,1457],{"class":1030},[1002,122003,122004,122006,122008,122010,122012,122014,122016],{"class":1004,"line":1012},[1002,122005,71181],{"class":1019},[1002,122007,1137],{"class":1030},[1002,122009,6211],{"class":1019},[1002,122011,43835],{"class":1015},[1002,122013,43838],{"class":1019},[1002,122015,121770],{"class":1019},[1002,122017,1407],{"class":1030},[1002,122019,122020,122022,122024,122026,122028],{"class":1004,"line":1047},[1002,122021,37280],{"class":1019},[1002,122023,1137],{"class":1030},[1002,122025,4809],{"class":1019},[1002,122027,43835],{"class":1015},[1002,122029,1407],{"class":1030},[1002,122031,122032],{"class":1004,"line":1054},[1002,122033,1170],{"class":1030},[1002,122035,122036],{"class":1004,"line":1060},[1002,122037,1051],{"emptyLinePlaceholder":1050},[1002,122039,122040,122042],{"class":1004,"line":1272},[1002,122041,953],{"class":15711},[1002,122043,1457],{"class":1030},[1002,122045,122046,122048,122050,122052,122054],{"class":1004,"line":1348},[1002,122047,37355],{"class":1019},[1002,122049,1137],{"class":1030},[1002,122051,2796],{"class":1019},[1002,122053,928],{"class":1015},[1002,122055,1407],{"class":1030},[1002,122057,122058,122060,122062,122064,122066,122068],{"class":1004,"line":1354},[1002,122059,37384],{"class":1019},[1002,122061,1137],{"class":1030},[1002,122063,4809],{"class":1019},[1002,122065,43835],{"class":1015},[1002,122067,4910],{"class":1019},[1002,122069,1407],{"class":1030},[1002,122071,122072],{"class":1004,"line":1360},[1002,122073,1170],{"class":1030},[1002,122075,122076,122078],{"class":1004,"line":1366},[1002,122077,925],{"class":15711},[1002,122079,1457],{"class":1030},[1002,122081,122082,122084,122086,122088,122090],{"class":1004,"line":1946},[1002,122083,37355],{"class":1019},[1002,122085,1137],{"class":1030},[1002,122087,121844],{"class":1019},[1002,122089,928],{"class":1015},[1002,122091,1407],{"class":1030},[1002,122093,122094,122096,122098,122100,122102,122104],{"class":1004,"line":1956},[1002,122095,37384],{"class":1019},[1002,122097,1137],{"class":1030},[1002,122099,31465],{"class":1019},[1002,122101,43835],{"class":1015},[1002,122103,4910],{"class":1019},[1002,122105,1407],{"class":1030},[1002,122107,122108],{"class":1004,"line":1961},[1002,122109,1170],{"class":1030},[925,122111,122112],{},"This will generate the same CSS file as above, but we have nested selectors in our Sass file.",[953,122114,122116],{"id":122115},"nesting-properties","Nesting Properties",[925,122118,122119],{},"Certain properties with matching namespaces are nestable:",[993,122121,122123],{"className":35707,"code":122122,"language":29,"meta":998,"style":998},".btn {\n text: {\n decoration: underline;\n transform: lowercase;\n }\n}\n",[941,122124,122125,122131,122138,122148,122160,122164],{"__ignoreMap":998},[1002,122126,122127,122129],{"class":1004,"line":1005},[1002,122128,96662],{"class":1026},[1002,122130,1457],{"class":1030},[1002,122132,122133,122136],{"class":1004,"line":1012},[1002,122134,122135],{"class":1019}," text",[1002,122137,15354],{"class":1030},[1002,122139,122140,122143,122146],{"class":1004,"line":1047},[1002,122141,122142],{"class":1030}," decoration: ",[1002,122144,122145],{"class":1019},"underline",[1002,122147,1407],{"class":1030},[1002,122149,122150,122153,122155,122158],{"class":1004,"line":1054},[1002,122151,122152],{"class":1019}," transform",[1002,122154,1137],{"class":1030},[1002,122156,122157],{"class":1019},"lowercase",[1002,122159,1407],{"class":1030},[1002,122161,122162],{"class":1004,"line":1060},[1002,122163,1269],{"class":1030},[1002,122165,122166],{"class":1004,"line":1272},[1002,122167,1170],{"class":1030},[993,122169,122171],{"className":35707,"code":122170,"language":29,"meta":998,"style":998},".btn {\n text-decoration: underline;\n text-transform: lowercase;\n}\n",[941,122172,122173,122179,122189,122199],{"__ignoreMap":998},[1002,122174,122175,122177],{"class":1004,"line":1005},[1002,122176,96662],{"class":1026},[1002,122178,1457],{"class":1030},[1002,122180,122181,122183,122185,122187],{"class":1004,"line":1012},[1002,122182,117975],{"class":1019},[1002,122184,1137],{"class":1030},[1002,122186,122145],{"class":1019},[1002,122188,1407],{"class":1030},[1002,122190,122191,122193,122195,122197],{"class":1004,"line":1047},[1002,122192,117963],{"class":1019},[1002,122194,1137],{"class":1030},[1002,122196,122157],{"class":1019},[1002,122198,1407],{"class":1030},[1002,122200,122201],{"class":1004,"line":1054},[1002,122202,1170],{"class":1030},[925,122204,122205],{},"While nesting, the & symbol references the parent selector:",[925,122207,121661],{},[993,122209,122211],{"className":35707,"code":122210,"language":29,"meta":998,"style":998},".content {\n border: 1px solid #ccc;\n padding: 20px;\n .callout {\n border-color: red;\n }\n &.callout {\n border-color: green;\n }\n}\n",[941,122212,122213,122219,122235,122247,122256,122266,122270,122280,122291,122295],{"__ignoreMap":998},[1002,122214,122215,122217],{"class":1004,"line":1005},[1002,122216,73165],{"class":1026},[1002,122218,1457],{"class":1030},[1002,122220,122221,122223,122225,122227,122229,122231,122233],{"class":1004,"line":1012},[1002,122222,71181],{"class":1019},[1002,122224,1137],{"class":1030},[1002,122226,6211],{"class":1019},[1002,122228,43835],{"class":1015},[1002,122230,43838],{"class":1019},[1002,122232,121770],{"class":1019},[1002,122234,1407],{"class":1030},[1002,122236,122237,122239,122241,122243,122245],{"class":1004,"line":1047},[1002,122238,37280],{"class":1019},[1002,122240,1137],{"class":1030},[1002,122242,4809],{"class":1019},[1002,122244,43835],{"class":1015},[1002,122246,1407],{"class":1030},[1002,122248,122249,122251,122254],{"class":1004,"line":1054},[1002,122250,3794],{"class":1030},[1002,122252,122253],{"class":1019},"callout",[1002,122255,1457],{"class":1030},[1002,122257,122258,122260,122262,122264],{"class":1004,"line":1060},[1002,122259,87904],{"class":1019},[1002,122261,1137],{"class":1030},[1002,122263,70923],{"class":1019},[1002,122265,1407],{"class":1030},[1002,122267,122268],{"class":1004,"line":1272},[1002,122269,1269],{"class":1030},[1002,122271,122272,122275,122278],{"class":1004,"line":1348},[1002,122273,122274],{"class":1030}," &",[1002,122276,122277],{"class":1026},".callout",[1002,122279,1457],{"class":1030},[1002,122281,122282,122284,122286,122289],{"class":1004,"line":1354},[1002,122283,87904],{"class":1019},[1002,122285,1137],{"class":1030},[1002,122287,122288],{"class":1019},"green",[1002,122290,1407],{"class":1030},[1002,122292,122293],{"class":1004,"line":1360},[1002,122294,1269],{"class":1030},[1002,122296,122297],{"class":1004,"line":1366},[1002,122298,1170],{"class":1030},[925,122300,122301],{},"application.css",[993,122303,122305],{"className":35707,"code":122304,"language":29,"meta":998,"style":998},".content {\n border: 1px solid #ccc;\n padding: 20px;\n}\n.content .callout {\n border-color: red;\n}\n.content.callout {\n border-color: green;\n}\n",[941,122306,122307,122313,122329,122341,122345,122354,122364,122368,122375,122385],{"__ignoreMap":998},[1002,122308,122309,122311],{"class":1004,"line":1005},[1002,122310,73165],{"class":1026},[1002,122312,1457],{"class":1030},[1002,122314,122315,122317,122319,122321,122323,122325,122327],{"class":1004,"line":1012},[1002,122316,71181],{"class":1019},[1002,122318,1137],{"class":1030},[1002,122320,6211],{"class":1019},[1002,122322,43835],{"class":1015},[1002,122324,43838],{"class":1019},[1002,122326,121770],{"class":1019},[1002,122328,1407],{"class":1030},[1002,122330,122331,122333,122335,122337,122339],{"class":1004,"line":1047},[1002,122332,37280],{"class":1019},[1002,122334,1137],{"class":1030},[1002,122336,4809],{"class":1019},[1002,122338,43835],{"class":1015},[1002,122340,1407],{"class":1030},[1002,122342,122343],{"class":1004,"line":1054},[1002,122344,1170],{"class":1030},[1002,122346,122347,122349,122352],{"class":1004,"line":1060},[1002,122348,73165],{"class":1026},[1002,122350,122351],{"class":1026}," .callout",[1002,122353,1457],{"class":1030},[1002,122355,122356,122358,122360,122362],{"class":1004,"line":1272},[1002,122357,73250],{"class":1019},[1002,122359,1137],{"class":1030},[1002,122361,70923],{"class":1019},[1002,122363,1407],{"class":1030},[1002,122365,122366],{"class":1004,"line":1348},[1002,122367,1170],{"class":1030},[1002,122369,122370,122373],{"class":1004,"line":1354},[1002,122371,122372],{"class":1026},".content.callout",[1002,122374,1457],{"class":1030},[1002,122376,122377,122379,122381,122383],{"class":1004,"line":1360},[1002,122378,73250],{"class":1019},[1002,122380,1137],{"class":1030},[1002,122382,122288],{"class":1019},[1002,122384,1407],{"class":1030},[1002,122386,122387],{"class":1004,"line":1366},[1002,122388,1170],{"class":1030},[925,122390,122391,122392,122394,122395],{},"Above, ",[1107,122393,99097],{}," references ",[1107,122396,73165],{},[925,122398,121661],{},[993,122400,122402],{"className":35707,"code":122401,"language":29,"meta":998,"style":998},"a {\n color: #999;\n &:hover {\n color: #777;\n }\n &:active {\n color: #888;\n }\n}\n",[941,122403,122404,122410,122421,122425,122435,122439,122448,122459,122463],{"__ignoreMap":998},[1002,122405,122406,122408],{"class":1004,"line":1005},[1002,122407,933],{"class":15711},[1002,122409,1457],{"class":1030},[1002,122411,122412,122414,122416,122419],{"class":1004,"line":1012},[1002,122413,35952],{"class":1019},[1002,122415,1137],{"class":1030},[1002,122417,122418],{"class":1019},"#999",[1002,122420,1407],{"class":1030},[1002,122422,122423],{"class":1004,"line":1047},[1002,122424,121491],{"class":1030},[1002,122426,122427,122429,122431,122433],{"class":1004,"line":1054},[1002,122428,36028],{"class":1019},[1002,122430,1137],{"class":1030},[1002,122432,110594],{"class":1019},[1002,122434,1407],{"class":1030},[1002,122436,122437],{"class":1004,"line":1060},[1002,122438,1269],{"class":1030},[1002,122440,122441,122443,122446],{"class":1004,"line":1272},[1002,122442,122274],{"class":1030},[1002,122444,122445],{"class":1026},":active",[1002,122447,1457],{"class":1030},[1002,122449,122450,122452,122454,122457],{"class":1004,"line":1348},[1002,122451,36028],{"class":1019},[1002,122453,1137],{"class":1030},[1002,122455,122456],{"class":1019},"#888",[1002,122458,1407],{"class":1030},[1002,122460,122461],{"class":1004,"line":1354},[1002,122462,1269],{"class":1030},[1002,122464,122465],{"class":1004,"line":1360},[1002,122466,1170],{"class":1030},[925,122468,122301],{},[993,122470,122472],{"className":35707,"code":122471,"language":29,"meta":998,"style":998},".sidebar {\n float: right;\n width: 300px;\n}\n.sidebar h2 {\n color: #777;\n}\n.users .sidebar h2 {\n color: #444;\n}\n",[941,122473,122474,122480,122490,122503,122507,122515,122525,122529,122541,122551],{"__ignoreMap":998},[1002,122475,122476,122478],{"class":1004,"line":1005},[1002,122477,110269],{"class":1026},[1002,122479,1457],{"class":1030},[1002,122481,122482,122484,122486,122488],{"class":1004,"line":1012},[1002,122483,108353],{"class":1019},[1002,122485,1137],{"class":1030},[1002,122487,88217],{"class":1019},[1002,122489,1407],{"class":1030},[1002,122491,122492,122494,122496,122499,122501],{"class":1004,"line":1047},[1002,122493,37240],{"class":1019},[1002,122495,1137],{"class":1030},[1002,122497,122498],{"class":1019},"300",[1002,122500,43835],{"class":1015},[1002,122502,1407],{"class":1030},[1002,122504,122505],{"class":1004,"line":1054},[1002,122506,1170],{"class":1030},[1002,122508,122509,122511,122513],{"class":1004,"line":1060},[1002,122510,110269],{"class":1026},[1002,122512,121795],{"class":15711},[1002,122514,1457],{"class":1030},[1002,122516,122517,122519,122521,122523],{"class":1004,"line":1272},[1002,122518,35952],{"class":1019},[1002,122520,1137],{"class":1030},[1002,122522,110594],{"class":1019},[1002,122524,1407],{"class":1030},[1002,122526,122527],{"class":1004,"line":1348},[1002,122528,1170],{"class":1030},[1002,122530,122531,122534,122537,122539],{"class":1004,"line":1354},[1002,122532,122533],{"class":1026},".users",[1002,122535,122536],{"class":1026}," .sidebar",[1002,122538,121795],{"class":15711},[1002,122540,1457],{"class":1030},[1002,122542,122543,122545,122547,122549],{"class":1004,"line":1360},[1002,122544,35952],{"class":1019},[1002,122546,1137],{"class":1030},[1002,122548,121433],{"class":1019},[1002,122550,1407],{"class":1030},[1002,122552,122553],{"class":1004,"line":1366},[1002,122554,1170],{"class":1030},[925,122556,122557],{},"Nesting is easy but dangerous, so do not nest unnecessarily.",[925,122559,122560],{},"Here's an example where over-using nesting can become messy.",[925,122562,121661],{},[993,122564,122566],{"className":35707,"code":122565,"language":29,"meta":998,"style":998},".content {\n background: #ccc;\n .cell {\n h2 {\n a {\n &:hover {\n color: red;\n }\n }\n }\n }\n}\n",[941,122567,122568,122574,122584,122593,122601,122608,122613,122624,122628,122632,122636,122640],{"__ignoreMap":998},[1002,122569,122570,122572],{"class":1004,"line":1005},[1002,122571,73165],{"class":1026},[1002,122573,1457],{"class":1030},[1002,122575,122576,122578,122580,122582],{"class":1004,"line":1012},[1002,122577,96669],{"class":1019},[1002,122579,1137],{"class":1030},[1002,122581,110939],{"class":1019},[1002,122583,1407],{"class":1030},[1002,122585,122586,122588,122591],{"class":1004,"line":1047},[1002,122587,3794],{"class":1030},[1002,122589,122590],{"class":1019},"cell",[1002,122592,1457],{"class":1030},[1002,122594,122595,122598],{"class":1004,"line":1054},[1002,122596,122597],{"class":1019}," h",[1002,122599,122600],{"class":1030},"2 {\n",[1002,122602,122603,122606],{"class":1004,"line":1060},[1002,122604,122605],{"class":1019}," a",[1002,122607,1457],{"class":1030},[1002,122609,122610],{"class":1004,"line":1272},[1002,122611,122612],{"class":1030}," &:hover {\n",[1002,122614,122615,122618,122620,122622],{"class":1004,"line":1348},[1002,122616,122617],{"class":1019}," color",[1002,122619,1137],{"class":1030},[1002,122621,70923],{"class":1019},[1002,122623,1407],{"class":1030},[1002,122625,122626],{"class":1004,"line":1354},[1002,122627,7377],{"class":1030},[1002,122629,122630],{"class":1004,"line":1360},[1002,122631,1351],{"class":1030},[1002,122633,122634],{"class":1004,"line":1366},[1002,122635,2014],{"class":1030},[1002,122637,122638],{"class":1004,"line":1946},[1002,122639,1269],{"class":1030},[1002,122641,122642],{"class":1004,"line":1956},[1002,122643,1170],{"class":1030},[925,122645,122301],{},[993,122647,122649],{"className":35707,"code":122648,"language":29,"meta":998,"style":998},".content {\n background: #ccc;\n}\n.content .cell h2 a:hover {\n color: red;\n}\n",[941,122650,122651,122657,122667,122671,122687,122697],{"__ignoreMap":998},[1002,122652,122653,122655],{"class":1004,"line":1005},[1002,122654,73165],{"class":1026},[1002,122656,1457],{"class":1030},[1002,122658,122659,122661,122663,122665],{"class":1004,"line":1012},[1002,122660,96669],{"class":1019},[1002,122662,1137],{"class":1030},[1002,122664,110939],{"class":1019},[1002,122666,1407],{"class":1030},[1002,122668,122669],{"class":1004,"line":1047},[1002,122670,1170],{"class":1030},[1002,122672,122673,122675,122678,122680,122682,122685],{"class":1004,"line":1054},[1002,122674,73165],{"class":1026},[1002,122676,122677],{"class":1026}," .cell",[1002,122679,121795],{"class":15711},[1002,122681,117944],{"class":15711},[1002,122683,122684],{"class":1026},":hover",[1002,122686,1457],{"class":1030},[1002,122688,122689,122691,122693,122695],{"class":1004,"line":1060},[1002,122690,35952],{"class":1019},[1002,122692,1137],{"class":1030},[1002,122694,70923],{"class":1019},[1002,122696,1407],{"class":1030},[1002,122698,122699],{"class":1004,"line":1272},[1002,122700,1170],{"class":1030},[925,122702,122703],{},"Here the outcome has a dangerous level of specificity.",[1579,122705,122706],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":122708},[122709,122710,122711,122712,122713,122714],{"id":121397,"depth":1012,"text":121398},{"id":79294,"depth":1012,"text":121599},{"id":121651,"depth":1012,"text":121652},{"id":121691,"depth":1012,"text":121692},{"id":121740,"depth":1012,"text":121741},{"id":122115,"depth":1012,"text":122116},"2014-09-30","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsass-introduction.jpg",{},{"title":761,"description":763},"blog\u002Fsass-introduction",[16,17],"AYmtFN51zkfYiC45WbmnES4spmg76GUREF8RC8xbvMU",{"id":122723,"title":595,"author":920,"body":122724,"date":123537,"description":597,"extension":1591,"image":123538,"meta":123539,"navigation":1050,"path":596,"seo":123540,"stem":123541,"tags":123542,"__hash__":123543},"blog\u002Fblog\u002Fnodejs-introduction.md",{"type":922,"value":122725,"toc":123525},[122726,122730,122744,122748,122759,122763,122770,122869,122873,122876,122881,122948,122951,122956,123012,123015,123065,123069,123072,123084,123088,123098,123234,123238,123246,123258,123262,123265,123415,123419,123422,123512,123516,123522],[953,122727,122729],{"id":122728},"what-could-you-build-with-nodejs","What could you build with Node.js?",[1530,122731,122732,122735,122738,122741],{},[974,122733,122734],{},"Websocket Server (eg: chat server)",[974,122736,122737],{},"File Upload Client",[974,122739,122740],{},"Ad Server",[974,122742,122743],{},"Any Real-Time Data Apps",[953,122745,122747],{"id":122746},"what-is-nodejs-not","What is Node.js Not?",[1530,122749,122750,122753,122756],{},[974,122751,122752],{},"Not a Web Framework",[974,122754,122755],{},"It's not Multi-threaded. It's more of a single-threaded server.",[974,122757,122758],{},"A Web Framework",[953,122760,122762],{"id":122761},"hello-node","Hello Node!",[925,122764,122765,122766,122769],{},"Let's start with a simple Hello server. First, tell the response which status it should have (a successful status is 200).\nNext, write a message to the response body in the form of ",[941,122767,122768],{},"Hello, this is \u003Cyour name here>",".\nTo finish it up, tell the response to end so the client on the other side knows it's received all the data.",[993,122771,122773],{"className":995,"code":122772,"language":997,"meta":998,"style":998},"var http = require('http');\n\nhttp\n .createServer(function (request, response) {\n response.writeHead(200);\n response.write('Hello, this is Sean');\n response.end();\n })\n .listen(8080);\n",[941,122774,122775,122791,122795,122800,122820,122832,122845,122853,122857],{"__ignoreMap":998},[1002,122776,122777,122779,122781,122783,122785,122787,122789],{"class":1004,"line":1005},[1002,122778,18311],{"class":1015},[1002,122780,28246],{"class":1030},[1002,122782,2393],{"class":1015},[1002,122784,1027],{"class":1026},[1002,122786,1031],{"class":1030},[1002,122788,28255],{"class":1034},[1002,122790,1085],{"class":1030},[1002,122792,122793],{"class":1004,"line":1012},[1002,122794,1051],{"emptyLinePlaceholder":1050},[1002,122796,122797],{"class":1004,"line":1047},[1002,122798,122799],{"class":1030},"http\n",[1002,122801,122802,122804,122806,122808,122810,122812,122814,122816,122818],{"class":1004,"line":1054},[1002,122803,3794],{"class":1030},[1002,122805,28355],{"class":1026},[1002,122807,1031],{"class":1030},[1002,122809,6965],{"class":1015},[1002,122811,6513],{"class":1030},[1002,122813,4786],{"class":2378},[1002,122815,1251],{"class":1030},[1002,122817,28368],{"class":2378},[1002,122819,2382],{"class":1030},[1002,122821,122822,122824,122826,122828,122830],{"class":1004,"line":1060},[1002,122823,28395],{"class":1030},[1002,122825,28398],{"class":1026},[1002,122827,1031],{"class":1030},[1002,122829,28403],{"class":1019},[1002,122831,1085],{"class":1030},[1002,122833,122834,122836,122838,122840,122843],{"class":1004,"line":1272},[1002,122835,28395],{"class":1030},[1002,122837,91009],{"class":1026},[1002,122839,1031],{"class":1030},[1002,122841,122842],{"class":1034},"'Hello, this is Sean'",[1002,122844,1085],{"class":1030},[1002,122846,122847,122849,122851],{"class":1004,"line":1348},[1002,122848,28395],{"class":1030},[1002,122850,28424],{"class":1026},[1002,122852,1428],{"class":1030},[1002,122854,122855],{"class":1004,"line":1354},[1002,122856,61349],{"class":1030},[1002,122858,122859,122861,122863,122865,122867],{"class":1004,"line":1360},[1002,122860,3794],{"class":1030},[1002,122862,22260],{"class":1026},[1002,122864,1031],{"class":1030},[1002,122866,22265],{"class":1019},[1002,122868,1085],{"class":1030},[953,122870,122872],{"id":122871},"blocking-vs-non-blocking-code","Blocking Vs Non-Blocking Code",[925,122874,122875],{},"One of the biggest advantages of Node.js is the ability to use Non-blocking code. Let's write some blocking code followed by its non-blocking version.",[925,122877,122878],{},[1107,122879,122880],{},"Blocking Code",[993,122882,122884],{"className":995,"code":122883,"language":997,"meta":998,"style":998},"var fs = require('fs');\nvar contents = fs.readFileSync('\u002Fetc\u002Fhosts');\nconsole.log(contents);\nconsole.log('Doing something else');\n",[941,122885,122886,122904,122926,122935],{"__ignoreMap":998},[1002,122887,122888,122890,122893,122895,122897,122899,122902],{"class":1004,"line":1005},[1002,122889,18311],{"class":1015},[1002,122891,122892],{"class":1030}," fs ",[1002,122894,2393],{"class":1015},[1002,122896,1027],{"class":1026},[1002,122898,1031],{"class":1030},[1002,122900,122901],{"class":1034},"'fs'",[1002,122903,1085],{"class":1030},[1002,122905,122906,122908,122911,122913,122916,122919,122921,122924],{"class":1004,"line":1012},[1002,122907,18311],{"class":1015},[1002,122909,122910],{"class":1030}," contents ",[1002,122912,2393],{"class":1015},[1002,122914,122915],{"class":1030}," fs.",[1002,122917,122918],{"class":1026},"readFileSync",[1002,122920,1031],{"class":1030},[1002,122922,122923],{"class":1034},"'\u002Fetc\u002Fhosts'",[1002,122925,1085],{"class":1030},[1002,122927,122928,122930,122932],{"class":1004,"line":1047},[1002,122929,2883],{"class":1030},[1002,122931,2886],{"class":1026},[1002,122933,122934],{"class":1030},"(contents);\n",[1002,122936,122937,122939,122941,122943,122946],{"class":1004,"line":1054},[1002,122938,2883],{"class":1030},[1002,122940,2886],{"class":1026},[1002,122942,1031],{"class":1030},[1002,122944,122945],{"class":1034},"'Doing something else'",[1002,122947,1085],{"class":1030},[925,122949,122950],{},"Here it stops the process until the read action is complete.",[925,122952,122953],{},[1107,122954,122955],{},"Non-Blocking Code",[993,122957,122959],{"className":995,"code":122958,"language":997,"meta":998,"style":998},"fs.readFile('\u002Fetc\u002Fhosts', function (err, contents) {\n console.log(contents);\n});\nconsole.log('Doing something else');\n",[941,122960,122961,122988,122996,123000],{"__ignoreMap":998},[1002,122962,122963,122966,122969,122971,122973,122975,122977,122979,122981,122983,122986],{"class":1004,"line":1005},[1002,122964,122965],{"class":1030},"fs.",[1002,122967,122968],{"class":1026},"readFile",[1002,122970,1031],{"class":1030},[1002,122972,122923],{"class":1034},[1002,122974,1251],{"class":1030},[1002,122976,6965],{"class":1015},[1002,122978,6513],{"class":1030},[1002,122980,31035],{"class":2378},[1002,122982,1251],{"class":1030},[1002,122984,122985],{"class":2378},"contents",[1002,122987,2382],{"class":1030},[1002,122989,122990,122992,122994],{"class":1004,"line":1012},[1002,122991,6977],{"class":1030},[1002,122993,2886],{"class":1026},[1002,122995,122934],{"class":1030},[1002,122997,122998],{"class":1004,"line":1047},[1002,122999,2804],{"class":1030},[1002,123001,123002,123004,123006,123008,123010],{"class":1004,"line":1054},[1002,123003,2883],{"class":1030},[1002,123005,2886],{"class":1026},[1002,123007,1031],{"class":1030},[1002,123009,122945],{"class":1034},[1002,123011,1085],{"class":1030},[925,123013,123014],{},"We can move our read action into a function:",[993,123016,123018],{"className":995,"code":123017,"language":997,"meta":998,"style":998},"var callback = function (err, contents) {\n console.log(contents);\n};\nfs.readFile('\u002Fetc\u002Fhosts', callback);\n",[941,123019,123020,123040,123048,123052],{"__ignoreMap":998},[1002,123021,123022,123024,123026,123028,123030,123032,123034,123036,123038],{"class":1004,"line":1005},[1002,123023,18311],{"class":1015},[1002,123025,31007],{"class":1026},[1002,123027,1023],{"class":1015},[1002,123029,8457],{"class":1015},[1002,123031,6513],{"class":1030},[1002,123033,31035],{"class":2378},[1002,123035,1251],{"class":1030},[1002,123037,122985],{"class":2378},[1002,123039,2382],{"class":1030},[1002,123041,123042,123044,123046],{"class":1004,"line":1012},[1002,123043,6977],{"class":1030},[1002,123045,2886],{"class":1026},[1002,123047,122934],{"class":1030},[1002,123049,123050],{"class":1004,"line":1047},[1002,123051,1517],{"class":1030},[1002,123053,123054,123056,123058,123060,123062],{"class":1004,"line":1054},[1002,123055,122965],{"class":1030},[1002,123057,122968],{"class":1026},[1002,123059,1031],{"class":1030},[1002,123061,122923],{"class":1034},[1002,123063,123064],{"class":1030},", callback);\n",[953,123066,123068],{"id":123067},"running-your-code","Running your Code",[925,123070,123071],{},"Install Node.js in your website.\nNow go ahead and run that file we just created to read a file of the filesystem with node app.js",[993,123073,123075],{"className":1797,"code":123074,"language":1799,"meta":998,"style":998},"node app.js\n",[941,123076,123077],{"__ignoreMap":998},[1002,123078,123079,123081],{"class":1004,"line":1005},[1002,123080,12108],{"class":1026},[1002,123082,123083],{"class":1034}," app.js\n",[953,123085,123087],{"id":123086},"read-file-in-server","Read File in Server",[925,123089,123090,123091,123094,123095,123097],{},"Now that you know how to create an HTTP server and how to read a file of the filesystem in a non-blocking way, let's try to combine the two.\nInstead of just writing a string to the HTTP response, use ",[941,123092,123093],{},"fs.readFile"," to write the contents of ",[941,123096,37877],{}," to the response instead.\nNote: since fs.readFile is non-blocking, make sure you end the response inside readFile's callback.",[993,123099,123101],{"className":995,"code":123100,"language":997,"meta":998,"style":998},"var http = require('http');\nvar fs = require('fs');\nhttp\n .createServer(function (request, response) {\n response.writeHead(200);\n fs.readFile('index.html', function (err, contens) {\n response.write(contens);\n response.end();\n });\n })\n .listen(8080);\n",[941,123102,123103,123119,123135,123139,123159,123171,123197,123206,123214,123218,123222],{"__ignoreMap":998},[1002,123104,123105,123107,123109,123111,123113,123115,123117],{"class":1004,"line":1005},[1002,123106,18311],{"class":1015},[1002,123108,28246],{"class":1030},[1002,123110,2393],{"class":1015},[1002,123112,1027],{"class":1026},[1002,123114,1031],{"class":1030},[1002,123116,28255],{"class":1034},[1002,123118,1085],{"class":1030},[1002,123120,123121,123123,123125,123127,123129,123131,123133],{"class":1004,"line":1012},[1002,123122,18311],{"class":1015},[1002,123124,122892],{"class":1030},[1002,123126,2393],{"class":1015},[1002,123128,1027],{"class":1026},[1002,123130,1031],{"class":1030},[1002,123132,122901],{"class":1034},[1002,123134,1085],{"class":1030},[1002,123136,123137],{"class":1004,"line":1047},[1002,123138,122799],{"class":1030},[1002,123140,123141,123143,123145,123147,123149,123151,123153,123155,123157],{"class":1004,"line":1054},[1002,123142,3794],{"class":1030},[1002,123144,28355],{"class":1026},[1002,123146,1031],{"class":1030},[1002,123148,6965],{"class":1015},[1002,123150,6513],{"class":1030},[1002,123152,4786],{"class":2378},[1002,123154,1251],{"class":1030},[1002,123156,28368],{"class":2378},[1002,123158,2382],{"class":1030},[1002,123160,123161,123163,123165,123167,123169],{"class":1004,"line":1060},[1002,123162,28395],{"class":1030},[1002,123164,28398],{"class":1026},[1002,123166,1031],{"class":1030},[1002,123168,28403],{"class":1019},[1002,123170,1085],{"class":1030},[1002,123172,123173,123176,123178,123180,123182,123184,123186,123188,123190,123192,123195],{"class":1004,"line":1272},[1002,123174,123175],{"class":1030}," fs.",[1002,123177,122968],{"class":1026},[1002,123179,1031],{"class":1030},[1002,123181,63806],{"class":1034},[1002,123183,1251],{"class":1030},[1002,123185,6965],{"class":1015},[1002,123187,6513],{"class":1030},[1002,123189,31035],{"class":2378},[1002,123191,1251],{"class":1030},[1002,123193,123194],{"class":2378},"contens",[1002,123196,2382],{"class":1030},[1002,123198,123199,123201,123203],{"class":1004,"line":1348},[1002,123200,61251],{"class":1030},[1002,123202,91009],{"class":1026},[1002,123204,123205],{"class":1030},"(contens);\n",[1002,123207,123208,123210,123212],{"class":1004,"line":1354},[1002,123209,61251],{"class":1030},[1002,123211,28424],{"class":1026},[1002,123213,1428],{"class":1030},[1002,123215,123216],{"class":1004,"line":1360},[1002,123217,8353],{"class":1030},[1002,123219,123220],{"class":1004,"line":1366},[1002,123221,61349],{"class":1030},[1002,123223,123224,123226,123228,123230,123232],{"class":1004,"line":1946},[1002,123225,3794],{"class":1030},[1002,123227,22260],{"class":1026},[1002,123229,1031],{"class":1030},[1002,123231,22265],{"class":1019},[1002,123233,1085],{"class":1030},[953,123235,123237],{"id":123236},"issuing-a-request","Issuing a Request",[925,123239,123240,123241,123245],{},"Let's see our new server in action. We've already run node app.js, so in the terminal below use curl to issue a request to ",[933,123242,123243],{"href":123243,"rel":123244},"http:\u002F\u002Flocalhost:8080",[937]," and we'll see our server respond with the contents of index.html",[993,123247,123249],{"className":1797,"code":123248,"language":1799,"meta":998,"style":998},"curl http:\u002F\u002Flocalhost:8080\n",[941,123250,123251],{"__ignoreMap":998},[1002,123252,123253,123255],{"class":1004,"line":1005},[1002,123254,50132],{"class":1026},[1002,123256,123257],{"class":1034}," http:\u002F\u002Flocalhost:8080\n",[953,123259,123261],{"id":123260},"response-writehead","Response WriteHead",[925,123263,123264],{},"Up until now all we've been sending into the writeHead function is the status code. However, it can take additional parameters. Let's add 'Content-Type' of 'text\u002Fhtml' to the response.",[993,123266,123268],{"className":995,"code":123267,"language":997,"meta":998,"style":998},"var http = require('http');\nvar fs = require('fs');\n\nhttp\n .createServer(function (request, response) {\n response.writeHead(200, { 'Content-Type': 'text\u002Fhtml' });\n\n fs.readFile('index.html', function (err, contents) {\n response.write(contents);\n response.end();\n });\n })\n .listen(8080);\n",[941,123269,123270,123286,123302,123306,123310,123330,123351,123355,123379,123387,123395,123399,123403],{"__ignoreMap":998},[1002,123271,123272,123274,123276,123278,123280,123282,123284],{"class":1004,"line":1005},[1002,123273,18311],{"class":1015},[1002,123275,28246],{"class":1030},[1002,123277,2393],{"class":1015},[1002,123279,1027],{"class":1026},[1002,123281,1031],{"class":1030},[1002,123283,28255],{"class":1034},[1002,123285,1085],{"class":1030},[1002,123287,123288,123290,123292,123294,123296,123298,123300],{"class":1004,"line":1012},[1002,123289,18311],{"class":1015},[1002,123291,122892],{"class":1030},[1002,123293,2393],{"class":1015},[1002,123295,1027],{"class":1026},[1002,123297,1031],{"class":1030},[1002,123299,122901],{"class":1034},[1002,123301,1085],{"class":1030},[1002,123303,123304],{"class":1004,"line":1047},[1002,123305,1051],{"emptyLinePlaceholder":1050},[1002,123307,123308],{"class":1004,"line":1054},[1002,123309,122799],{"class":1030},[1002,123311,123312,123314,123316,123318,123320,123322,123324,123326,123328],{"class":1004,"line":1060},[1002,123313,3794],{"class":1030},[1002,123315,28355],{"class":1026},[1002,123317,1031],{"class":1030},[1002,123319,6965],{"class":1015},[1002,123321,6513],{"class":1030},[1002,123323,4786],{"class":2378},[1002,123325,1251],{"class":1030},[1002,123327,28368],{"class":2378},[1002,123329,2382],{"class":1030},[1002,123331,123332,123334,123336,123338,123340,123342,123345,123347,123349],{"class":1004,"line":1272},[1002,123333,28395],{"class":1030},[1002,123335,28398],{"class":1026},[1002,123337,1031],{"class":1030},[1002,123339,28403],{"class":1019},[1002,123341,28406],{"class":1030},[1002,123343,123344],{"class":1034},"'Content-Type'",[1002,123346,1137],{"class":1030},[1002,123348,28414],{"class":1034},[1002,123350,28417],{"class":1030},[1002,123352,123353],{"class":1004,"line":1348},[1002,123354,1051],{"emptyLinePlaceholder":1050},[1002,123356,123357,123359,123361,123363,123365,123367,123369,123371,123373,123375,123377],{"class":1004,"line":1354},[1002,123358,123175],{"class":1030},[1002,123360,122968],{"class":1026},[1002,123362,1031],{"class":1030},[1002,123364,63806],{"class":1034},[1002,123366,1251],{"class":1030},[1002,123368,6965],{"class":1015},[1002,123370,6513],{"class":1030},[1002,123372,31035],{"class":2378},[1002,123374,1251],{"class":1030},[1002,123376,122985],{"class":2378},[1002,123378,2382],{"class":1030},[1002,123380,123381,123383,123385],{"class":1004,"line":1360},[1002,123382,61251],{"class":1030},[1002,123384,91009],{"class":1026},[1002,123386,122934],{"class":1030},[1002,123388,123389,123391,123393],{"class":1004,"line":1366},[1002,123390,61251],{"class":1030},[1002,123392,28424],{"class":1026},[1002,123394,1428],{"class":1030},[1002,123396,123397],{"class":1004,"line":1946},[1002,123398,8353],{"class":1030},[1002,123400,123401],{"class":1004,"line":1956},[1002,123402,61349],{"class":1030},[1002,123404,123405,123407,123409,123411,123413],{"class":1004,"line":1961},[1002,123406,3794],{"class":1030},[1002,123408,22260],{"class":1026},[1002,123410,1031],{"class":1030},[1002,123412,22265],{"class":1019},[1002,123414,1085],{"class":1030},[953,123416,123418],{"id":123417},"response-end","Response End",[925,123420,123421],{},"Our original Hello server can be shortened since the response.end() function optionally takes data as a parameter. Remove the 'response.write' line altogether, and send the hello string as a parameter on the response.end function. This will send the data, and once finished add the end to the response.",[993,123423,123425],{"className":995,"code":123424,"language":997,"meta":998,"style":998},"var http = require('http');\n\nhttp\n .createServer(function (request, response) {\n response.writeHead(200);\n response.end('Hello, this is dog');\n })\n .listen(8080);\n",[941,123426,123427,123443,123447,123451,123471,123483,123496,123500],{"__ignoreMap":998},[1002,123428,123429,123431,123433,123435,123437,123439,123441],{"class":1004,"line":1005},[1002,123430,18311],{"class":1015},[1002,123432,28246],{"class":1030},[1002,123434,2393],{"class":1015},[1002,123436,1027],{"class":1026},[1002,123438,1031],{"class":1030},[1002,123440,28255],{"class":1034},[1002,123442,1085],{"class":1030},[1002,123444,123445],{"class":1004,"line":1012},[1002,123446,1051],{"emptyLinePlaceholder":1050},[1002,123448,123449],{"class":1004,"line":1047},[1002,123450,122799],{"class":1030},[1002,123452,123453,123455,123457,123459,123461,123463,123465,123467,123469],{"class":1004,"line":1054},[1002,123454,3794],{"class":1030},[1002,123456,28355],{"class":1026},[1002,123458,1031],{"class":1030},[1002,123460,6965],{"class":1015},[1002,123462,6513],{"class":1030},[1002,123464,4786],{"class":2378},[1002,123466,1251],{"class":1030},[1002,123468,28368],{"class":2378},[1002,123470,2382],{"class":1030},[1002,123472,123473,123475,123477,123479,123481],{"class":1004,"line":1060},[1002,123474,28395],{"class":1030},[1002,123476,28398],{"class":1026},[1002,123478,1031],{"class":1030},[1002,123480,28403],{"class":1019},[1002,123482,1085],{"class":1030},[1002,123484,123485,123487,123489,123491,123494],{"class":1004,"line":1272},[1002,123486,28395],{"class":1030},[1002,123488,28424],{"class":1026},[1002,123490,1031],{"class":1030},[1002,123492,123493],{"class":1034},"'Hello, this is dog'",[1002,123495,1085],{"class":1030},[1002,123497,123498],{"class":1004,"line":1348},[1002,123499,61349],{"class":1030},[1002,123501,123502,123504,123506,123508,123510],{"class":1004,"line":1354},[1002,123503,3794],{"class":1030},[1002,123505,22260],{"class":1026},[1002,123507,1031],{"class":1030},[1002,123509,22265],{"class":1019},[1002,123511,1085],{"class":1030},[953,123513,123515],{"id":123514},"the-event-loop","The Event Loop",[925,123517,123518,123519,948],{},"The event loop manages events by processing one at a time from the ",[1107,123520,123521],{},"Event Queue",[1579,123523,123524],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":123526},[123527,123528,123529,123530,123531,123532,123533,123534,123535,123536],{"id":122728,"depth":1012,"text":122729},{"id":122746,"depth":1012,"text":122747},{"id":122761,"depth":1012,"text":122762},{"id":122871,"depth":1012,"text":122872},{"id":123067,"depth":1012,"text":123068},{"id":123086,"depth":1012,"text":123087},{"id":123236,"depth":1012,"text":123237},{"id":123260,"depth":1012,"text":123261},{"id":123417,"depth":1012,"text":123418},{"id":123514,"depth":1012,"text":123515},"2014-09-23","\u002Fimages\u002Fblog\u002Ffeatures\u002Fnodejs-introduction.jpg",{},{"title":595,"description":597},"blog\u002Fnodejs-introduction",[16,17,442],"8iqZwnH-MdU9lRIGRZD8mqf6tgM2PWe4MQTM8pyrWKM",{"id":123545,"title":538,"author":920,"body":123546,"date":124439,"description":540,"extension":1591,"image":124440,"meta":124441,"navigation":1050,"path":539,"seo":124442,"stem":124443,"tags":124444,"__hash__":124445},"blog\u002Fblog\u002Fjquery-introduction.md",{"type":922,"value":123547,"toc":124427},[123548,123552,123555,123587,123591,123594,123598,123605,123609,123612,123616,123627,123630,123724,123727,123736,123738,123747,123750,123776,123779,123804,123808,123814,123819,123824,123839,123844,123863,123869,123875,123879,123884,123908,123912,123915,123936,123942,123983,123987,123993,123996,124018,124020,124023,124128,124131,124136,124151,124156,124178,124181,124377,124382,124385,124399,124404,124407,124421,124424],[953,123549,123551],{"id":123550},"what-you-can-do-with-jquery","What you can do with jQuery?",[925,123553,123554],{},"jQuery makes it easy to:",[1530,123556,123557,123563,123569,123575,123581],{},[974,123558,123559,123562],{},[1107,123560,123561],{},"Find"," elements in an HTML document HTML content",[974,123564,123565,123568],{},[1107,123566,123567],{},"Change"," HTML content",[974,123570,123571,123574],{},[1107,123572,123573],{},"Listen"," to what a user does and react accordingly",[974,123576,123577,123580],{},[1107,123578,123579],{},"Animate"," content on the page",[974,123582,123583,123586],{},[1107,123584,123585],{},"Talk"," over the network to fetch new content",[953,123588,123590],{"id":123589},"document-object-model","Document Object Model",[925,123592,123593],{},"Document Object Model (DOM) is a tree-like structure created by browsers so we can quickly find HTML Elements using JavaScript.",[953,123595,123597],{"id":123596},"so-what-does-that-dom-structure-look-like","So, What does that DOM structure look like?",[925,123599,123600,123601,123604],{},"Inside the DOM, HTML elements become ",[1107,123602,123603],{},"nodes","\nwhich have relationships with one another.",[953,123606,123608],{"id":123607},"how-do-we-search-through-the-dom","How do we search through the DOM?",[925,123610,123611],{},"JavaScript gives developers a language to interact with the DOM. But, each browser has a slightly\ndifferent DOM interface. So if our JavaScript uses jQuery to interact with the DOM then it will work on most\nmodern browsers.",[953,123613,123615],{"id":123614},"basic-jquery-usage","Basic jQuery usage",[993,123617,123619],{"className":1797,"code":123618,"language":1799,"meta":998,"style":998},"jQuery();\n",[941,123620,123621],{"__ignoreMap":998},[1002,123622,123623,123625],{"class":1004,"line":1005},[1002,123624,105303],{"class":1026},[1002,123626,1428],{"class":1030},[925,123628,123629],{},"This is the jQuery function. To make jQuery Access The DOM, we need to use CSS selectors",[993,123631,123633],{"className":995,"code":123632,"language":997,"meta":998,"style":998},"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n\u003Ctitle>jQuery Introduction\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>What does jQuery do?\u003C\u002Fh1>\n Find out yourself.\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,123634,123635,123645,123653,123661,123674,123682,123690,123703,123708,123716],{"__ignoreMap":998},[1002,123636,123637,123639,123641,123643],{"class":1004,"line":1005},[1002,123638,37888],{"class":1015},[1002,123640,37891],{"class":1019},[1002,123642,21739],{"class":1030},[1002,123644,15703],{"class":1015},[1002,123646,123647,123649,123651],{"class":1004,"line":1012},[1002,123648,6539],{"class":1030},[1002,123650,383],{"class":15711},[1002,123652,15703],{"class":1030},[1002,123654,123655,123657,123659],{"class":1004,"line":1047},[1002,123656,6539],{"class":1030},[1002,123658,32092],{"class":15711},[1002,123660,15703],{"class":1030},[1002,123662,123663,123665,123667,123670,123672],{"class":1004,"line":1054},[1002,123664,6539],{"class":1030},[1002,123666,15029],{"class":15711},[1002,123668,123669],{"class":1030},">jQuery Introduction\u003C\u002F",[1002,123671,15029],{"class":15711},[1002,123673,15703],{"class":1030},[1002,123675,123676,123678,123680],{"class":1004,"line":1060},[1002,123677,22437],{"class":1030},[1002,123679,32092],{"class":15711},[1002,123681,15703],{"class":1030},[1002,123683,123684,123686,123688],{"class":1004,"line":1272},[1002,123685,6539],{"class":1030},[1002,123687,15034],{"class":15711},[1002,123689,15703],{"class":1030},[1002,123691,123692,123694,123696,123699,123701],{"class":1004,"line":1348},[1002,123693,15697],{"class":1030},[1002,123695,15201],{"class":15711},[1002,123697,123698],{"class":1030},">What does jQuery do?\u003C\u002F",[1002,123700,15201],{"class":15711},[1002,123702,15703],{"class":1030},[1002,123704,123705],{"class":1004,"line":1354},[1002,123706,123707],{"class":1030}," Find out yourself.\n",[1002,123709,123710,123712,123714],{"class":1004,"line":1360},[1002,123711,22437],{"class":1030},[1002,123713,15034],{"class":15711},[1002,123715,15703],{"class":1030},[1002,123717,123718,123720,123722],{"class":1004,"line":1366},[1002,123719,22437],{"class":1030},[1002,123721,383],{"class":15711},[1002,123723,15703],{"class":1030},[925,123725,123726],{},"Here, the CSS selectors can be:",[993,123728,123730],{"className":37880,"code":123729,"language":383,"meta":998,"style":998},"h1 { font-size: 2em; }\n",[941,123731,123732],{"__ignoreMap":998},[1002,123733,123734],{"class":1004,"line":1005},[1002,123735,123729],{"class":1030},[925,123737,35844],{},[993,123739,123741],{"className":37880,"code":123740,"language":383,"meta":998,"style":998},"p { color: black; }\n",[941,123742,123743],{"__ignoreMap":998},[1002,123744,123745],{"class":1004,"line":1005},[1002,123746,123740],{"class":1030},[925,123748,123749],{},"Using the jQuery function to find nodes,",[993,123751,123753],{"className":995,"code":123752,"language":997,"meta":998,"style":998},"jQuery('h1');\njQuery('p');\n",[941,123754,123755,123766],{"__ignoreMap":998},[1002,123756,123757,123759,123761,123764],{"class":1004,"line":1005},[1002,123758,105303],{"class":1026},[1002,123760,1031],{"class":1030},[1002,123762,123763],{"class":1034},"'h1'",[1002,123765,1085],{"class":1030},[1002,123767,123768,123770,123772,123774],{"class":1004,"line":1012},[1002,123769,105303],{"class":1026},[1002,123771,1031],{"class":1030},[1002,123773,16150],{"class":1034},[1002,123775,1085],{"class":1030},[925,123777,123778],{},"By using short syntax, we can change above to:",[993,123780,123782],{"className":995,"code":123781,"language":997,"meta":998,"style":998},"$('h1');\n$('p');\n",[941,123783,123784,123794],{"__ignoreMap":998},[1002,123785,123786,123788,123790,123792],{"class":1004,"line":1005},[1002,123787,15864],{"class":1026},[1002,123789,1031],{"class":1030},[1002,123791,123763],{"class":1034},[1002,123793,1085],{"class":1030},[1002,123795,123796,123798,123800,123802],{"class":1004,"line":1012},[1002,123797,15864],{"class":1026},[1002,123799,1031],{"class":1030},[1002,123801,16150],{"class":1034},[1002,123803,1085],{"class":1030},[953,123805,123807],{"id":123806},"changing-the-content-of-an-element","Changing the content of an element",[925,123809,123810,123811,123813],{},"How can we modify the text\nof the ",[1107,123812,15201],{}," element?",[1530,123815,123816],{},[974,123817,123818],{},"Find it* Change it",[925,123820,123821],{},[1107,123822,123823],{},"Selecting by HTML element name:",[993,123825,123827],{"className":995,"code":123826,"language":997,"meta":998,"style":998},"$('h1');\n",[941,123828,123829],{"__ignoreMap":998},[1002,123830,123831,123833,123835,123837],{"class":1004,"line":1005},[1002,123832,15864],{"class":1026},[1002,123834,1031],{"class":1030},[1002,123836,123763],{"class":1034},[1002,123838,1085],{"class":1030},[925,123840,123841],{},[1107,123842,123843],{},"Fetching an element’s text:",[993,123845,123847],{"className":995,"code":123846,"language":997,"meta":998,"style":998},"$('h1').text();\n",[941,123848,123849],{"__ignoreMap":998},[1002,123850,123851,123853,123855,123857,123859,123861],{"class":1004,"line":1005},[1002,123852,15864],{"class":1026},[1002,123854,1031],{"class":1030},[1002,123856,123763],{"class":1034},[1002,123858,1539],{"class":1030},[1002,123860,24241],{"class":1026},[1002,123862,1428],{"class":1030},[925,123864,123865,123866],{},"Result is ",[941,123867,123868],{},"What does jQuery do?",[925,123870,122391,123871,123874],{},[1107,123872,123873],{},"text()"," is a method offered by jQuery.",[953,123876,123878],{"id":123877},"modifying-an-elements-text","Modifying an element’s text",[925,123880,123881,123883],{},[1107,123882,123873],{}," also allows to modify the text node.",[993,123885,123887],{"className":995,"code":123886,"language":997,"meta":998,"style":998},"$('h1').text('Where to?');\n",[941,123888,123889],{"__ignoreMap":998},[1002,123890,123891,123893,123895,123897,123899,123901,123903,123906],{"class":1004,"line":1005},[1002,123892,15864],{"class":1026},[1002,123894,1031],{"class":1030},[1002,123896,123763],{"class":1034},[1002,123898,1539],{"class":1030},[1002,123900,24241],{"class":1026},[1002,123902,1031],{"class":1030},[1002,123904,123905],{"class":1034},"'Where to?'",[1002,123907,1085],{"class":1030},[953,123909,123911],{"id":123910},"the-dom-ready-event","The DOM ready event",[925,123913,123914],{},"JavaScript may execute before the DOM loads. We need to make sure the DOM has finished loading the HTML content before we can reliably use jQuery. To do this, we have to listen for the document ready event.",[993,123916,123918],{"className":995,"code":123917,"language":997,"meta":998,"style":998},"jQuery(document).ready(function () {});\n",[941,123919,123920],{"__ignoreMap":998},[1002,123921,123922,123924,123927,123930,123932,123934],{"class":1004,"line":1005},[1002,123923,105303],{"class":1026},[1002,123925,123926],{"class":1030},"(document).",[1002,123928,123929],{"class":1026},"ready",[1002,123931,1031],{"class":1030},[1002,123933,6965],{"class":1015},[1002,123935,84660],{"class":1030},[925,123937,123938,123939,123941],{},"What it means is only run this code once the DOM is ",[1107,123940,123929],{},". So let's change our code to:",[993,123943,123945],{"className":995,"code":123944,"language":997,"meta":998,"style":998},"jQuery(document).ready(function () {\n $('h1').text('Where to?');\n});\n",[941,123946,123947,123961,123979],{"__ignoreMap":998},[1002,123948,123949,123951,123953,123955,123957,123959],{"class":1004,"line":1005},[1002,123950,105303],{"class":1026},[1002,123952,123926],{"class":1030},[1002,123954,123929],{"class":1026},[1002,123956,1031],{"class":1030},[1002,123958,6965],{"class":1015},[1002,123960,9772],{"class":1030},[1002,123962,123963,123965,123967,123969,123971,123973,123975,123977],{"class":1004,"line":1012},[1002,123964,88304],{"class":1026},[1002,123966,1031],{"class":1030},[1002,123968,123763],{"class":1034},[1002,123970,1539],{"class":1030},[1002,123972,24241],{"class":1026},[1002,123974,1031],{"class":1030},[1002,123976,123905],{"class":1034},[1002,123978,1085],{"class":1030},[1002,123980,123981],{"class":1004,"line":1047},[1002,123982,2804],{"class":1030},[953,123984,123986],{"id":123985},"installing-jquery","Installing jQuery",[925,123988,123989,123990,948],{},"First, download jQuery from ",[941,123991,123992],{},"\u003Ca href='jQuery.com'>jQuery.com\u003C\u002Fa>",[925,123994,123995],{},"Now load it in your HTML document.",[993,123997,123998],{"className":995,"code":112212,"language":997,"meta":998,"style":998},[941,123999,124000],{"__ignoreMap":998},[1002,124001,124002,124004,124006,124008,124010,124012,124014,124016],{"class":1004,"line":1005},[1002,124003,6539],{"class":1030},[1002,124005,22063],{"class":15711},[1002,124007,15242],{"class":1026},[1002,124009,2393],{"class":1015},[1002,124011,112227],{"class":1034},[1002,124013,22081],{"class":1030},[1002,124015,22063],{"class":15711},[1002,124017,15703],{"class":1030},[953,124019,112237],{"id":112236},[925,124021,124022],{},"How do we change the text of every * in this page?",[993,124024,124026],{"className":995,"code":124025,"language":997,"meta":998,"style":998},"\u003Ch1>Where do you want to go?\u003C\u002Fh1>\n\u003Ch2>\u003CTravel Destinations\u003C\u002Fh2>\nPlan your next adventure.\n\u003Cul id=\"destinations\">\n \u003Cli>Rome\u003C\u002Fli>\n \u003Cli>Paris\u003C\u002Fli>\n \u003Cli class='promo'>Rio\n\u003C\u002Ful>\n",[941,124027,124028,124040,124055,124068,124081,124093,124105,124120],{"__ignoreMap":998},[1002,124029,124030,124032,124034,124036,124038],{"class":1004,"line":1005},[1002,124031,6539],{"class":1030},[1002,124033,15201],{"class":15711},[1002,124035,112258],{"class":1030},[1002,124037,15201],{"class":15711},[1002,124039,15703],{"class":1030},[1002,124041,124042,124044,124046,124049,124052],{"class":1004,"line":1012},[1002,124043,6539],{"class":1030},[1002,124045,953],{"class":15711},[1002,124047,124048],{"class":1030},">\u003C",[1002,124050,124051],{"class":1019},"Travel",[1002,124053,124054],{"class":18541}," Destinations\u003C\u002Fh2>\n",[1002,124056,124057,124060,124063,124065],{"class":1004,"line":1047},[1002,124058,124059],{"class":1026},"Plan",[1002,124061,124062],{"class":1026}," your",[1002,124064,15867],{"class":1026},[1002,124066,124067],{"class":18541}," adventure.\n",[1002,124069,124070,124073,124075,124077,124079],{"class":1004,"line":1054},[1002,124071,124072],{"class":18541},"\u003Cul",[1002,124074,21489],{"class":1026},[1002,124076,2393],{"class":1015},[1002,124078,112301],{"class":1034},[1002,124080,15703],{"class":1030},[1002,124082,124083,124085,124087,124089,124091],{"class":1004,"line":1060},[1002,124084,15697],{"class":1030},[1002,124086,974],{"class":15711},[1002,124088,112312],{"class":1030},[1002,124090,974],{"class":15711},[1002,124092,15703],{"class":1030},[1002,124094,124095,124097,124099,124101,124103],{"class":1004,"line":1272},[1002,124096,15697],{"class":1030},[1002,124098,974],{"class":15711},[1002,124100,112325],{"class":1030},[1002,124102,974],{"class":15711},[1002,124104,15703],{"class":1030},[1002,124106,124107,124109,124111,124113,124115,124117],{"class":1004,"line":1348},[1002,124108,15697],{"class":1030},[1002,124110,974],{"class":15711},[1002,124112,17187],{"class":1026},[1002,124114,2393],{"class":1015},[1002,124116,112532],{"class":1034},[1002,124118,124119],{"class":1030},">Rio\n",[1002,124121,124122,124124,124126],{"class":1004,"line":1354},[1002,124123,22437],{"class":1030},[1002,124125,1530],{"class":15711},[1002,124127,15703],{"class":1030},[925,124129,124130],{},"Find them, modify their text, and then load HTML into the DOM.",[925,124132,124133],{},[1107,124134,124135],{},"Select multiple elements:",[993,124137,124139],{"className":995,"code":124138,"language":997,"meta":998,"style":998},"$('li');\n",[941,124140,124141],{"__ignoreMap":998},[1002,124142,124143,124145,124147,124149],{"class":1004,"line":1005},[1002,124144,15864],{"class":1026},[1002,124146,1031],{"class":1030},[1002,124148,112386],{"class":1034},[1002,124150,1085],{"class":1030},[925,124152,124153],{},[1107,124154,124155],{},"Modify each of their text nodes:",[993,124157,124158],{"className":995,"code":112375,"language":997,"meta":998,"style":998},[941,124159,124160],{"__ignoreMap":998},[1002,124161,124162,124164,124166,124168,124170,124172,124174,124176],{"class":1004,"line":1005},[1002,124163,15864],{"class":1026},[1002,124165,1031],{"class":1030},[1002,124167,112386],{"class":1034},[1002,124169,1539],{"class":1030},[1002,124171,24241],{"class":1026},[1002,124173,1031],{"class":1030},[1002,124175,112395],{"class":1034},[1002,124177,1085],{"class":1030},[925,124179,124180],{},"We can find elements by ID or Class.",[993,124182,124184],{"className":37880,"code":124183,"language":383,"meta":998,"style":998},"\u003Ctable>\n \u003Ctr>\n \u003Cth style=\"width:100px\">css\u003C\u002Fth>\n \u003Cth>jQuery\u003C\u002Fth>\n \u003C\u002Ftr>\n \u003Ctr>\n \u003Ctd>p { ... }\u003C\u002Ftd>\n \u003Ctd>$(\"p\");\u003C\u002Ftd>\n \u003C\u002Ftr>\n \u003Ctr>\n \u003Ctd>#container { ... }\u003C\u002Ftd>\n \u003Ctd>$(\"#container\");\u003C\u002Ftd>\n \u003C\u002Ftr>\n \u003Ctr>\n \u003Ctd>.articles { ... }\u003C\u002Ftd>\n \u003Ctd>$(\".articles\");\u003C\u002Ftd>\n \u003C\u002Ftr>\n\u003C\u002Ftable>\n",[941,124185,124186,124194,124202,124222,124235,124243,124251,124264,124277,124285,124293,124306,124319,124327,124335,124348,124361,124369],{"__ignoreMap":998},[1002,124187,124188,124190,124192],{"class":1004,"line":1005},[1002,124189,6539],{"class":1030},[1002,124191,39742],{"class":15711},[1002,124193,15703],{"class":1030},[1002,124195,124196,124198,124200],{"class":1004,"line":1012},[1002,124197,22427],{"class":1030},[1002,124199,39748],{"class":15711},[1002,124201,15703],{"class":1030},[1002,124203,124204,124206,124208,124210,124212,124215,124218,124220],{"class":1004,"line":1047},[1002,124205,15697],{"class":1030},[1002,124207,39751],{"class":15711},[1002,124209,29393],{"class":1026},[1002,124211,2393],{"class":1030},[1002,124213,124214],{"class":1034},"\"width:100px\"",[1002,124216,124217],{"class":1030},">css\u003C\u002F",[1002,124219,39751],{"class":15711},[1002,124221,15703],{"class":1030},[1002,124223,124224,124226,124228,124231,124233],{"class":1004,"line":1054},[1002,124225,15697],{"class":1030},[1002,124227,39751],{"class":15711},[1002,124229,124230],{"class":1030},">jQuery\u003C\u002F",[1002,124232,39751],{"class":15711},[1002,124234,15703],{"class":1030},[1002,124236,124237,124239,124241],{"class":1004,"line":1060},[1002,124238,28112],{"class":1030},[1002,124240,39748],{"class":15711},[1002,124242,15703],{"class":1030},[1002,124244,124245,124247,124249],{"class":1004,"line":1272},[1002,124246,22427],{"class":1030},[1002,124248,39748],{"class":15711},[1002,124250,15703],{"class":1030},[1002,124252,124253,124255,124257,124260,124262],{"class":1004,"line":1348},[1002,124254,15697],{"class":1030},[1002,124256,39764],{"class":15711},[1002,124258,124259],{"class":1030},">p { ... }\u003C\u002F",[1002,124261,39764],{"class":15711},[1002,124263,15703],{"class":1030},[1002,124265,124266,124268,124270,124273,124275],{"class":1004,"line":1354},[1002,124267,15697],{"class":1030},[1002,124269,39764],{"class":15711},[1002,124271,124272],{"class":1030},">$(\"p\");\u003C\u002F",[1002,124274,39764],{"class":15711},[1002,124276,15703],{"class":1030},[1002,124278,124279,124281,124283],{"class":1004,"line":1360},[1002,124280,28112],{"class":1030},[1002,124282,39748],{"class":15711},[1002,124284,15703],{"class":1030},[1002,124286,124287,124289,124291],{"class":1004,"line":1366},[1002,124288,22427],{"class":1030},[1002,124290,39748],{"class":15711},[1002,124292,15703],{"class":1030},[1002,124294,124295,124297,124299,124302,124304],{"class":1004,"line":1946},[1002,124296,15697],{"class":1030},[1002,124298,39764],{"class":15711},[1002,124300,124301],{"class":1030},">#container { ... }\u003C\u002F",[1002,124303,39764],{"class":15711},[1002,124305,15703],{"class":1030},[1002,124307,124308,124310,124312,124315,124317],{"class":1004,"line":1956},[1002,124309,15697],{"class":1030},[1002,124311,39764],{"class":15711},[1002,124313,124314],{"class":1030},">$(\"#container\");\u003C\u002F",[1002,124316,39764],{"class":15711},[1002,124318,15703],{"class":1030},[1002,124320,124321,124323,124325],{"class":1004,"line":1961},[1002,124322,28112],{"class":1030},[1002,124324,39748],{"class":15711},[1002,124326,15703],{"class":1030},[1002,124328,124329,124331,124333],{"class":1004,"line":1971},[1002,124330,22427],{"class":1030},[1002,124332,39748],{"class":15711},[1002,124334,15703],{"class":1030},[1002,124336,124337,124339,124341,124344,124346],{"class":1004,"line":1980},[1002,124338,15697],{"class":1030},[1002,124340,39764],{"class":15711},[1002,124342,124343],{"class":1030},">.articles { ... }\u003C\u002F",[1002,124345,39764],{"class":15711},[1002,124347,15703],{"class":1030},[1002,124349,124350,124352,124354,124357,124359],{"class":1004,"line":1985},[1002,124351,15697],{"class":1030},[1002,124353,39764],{"class":15711},[1002,124355,124356],{"class":1030},">$(\".articles\");\u003C\u002F",[1002,124358,39764],{"class":15711},[1002,124360,15703],{"class":1030},[1002,124362,124363,124365,124367],{"class":1004,"line":1995},[1002,124364,28112],{"class":1030},[1002,124366,39748],{"class":15711},[1002,124368,15703],{"class":1030},[1002,124370,124371,124373,124375],{"class":1004,"line":2006},[1002,124372,22437],{"class":1030},[1002,124374,39742],{"class":15711},[1002,124376,15703],{"class":1030},[925,124378,124379],{},[1107,124380,124381],{},"Selecting by unique ID:",[925,124383,124384],{},"Find it using the ID.",[993,124386,124387],{"className":995,"code":112410,"language":997,"meta":998,"style":998},[941,124388,124389],{"__ignoreMap":998},[1002,124390,124391,124393,124395,124397],{"class":1004,"line":1005},[1002,124392,15864],{"class":1026},[1002,124394,1031],{"class":1030},[1002,124396,112421],{"class":1034},[1002,124398,1085],{"class":1030},[925,124400,124401],{},[1107,124402,124403],{},"Selecting by the class:",[925,124405,124406],{},"Find it using the class.",[993,124408,124409],{"className":995,"code":112604,"language":997,"meta":998,"style":998},[941,124410,124411],{"__ignoreMap":998},[1002,124412,124413,124415,124417,124419],{"class":1004,"line":1005},[1002,124414,15864],{"class":1026},[1002,124416,1031],{"class":1030},[1002,124418,112615],{"class":1034},[1002,124420,1085],{"class":1030},[925,124422,124423],{},"Stay tuned for more jQuery posts.",[1579,124425,124426],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":998,"searchDepth":1012,"depth":1012,"links":124428},[124429,124430,124431,124432,124433,124434,124435,124436,124437,124438],{"id":123550,"depth":1012,"text":123551},{"id":123589,"depth":1012,"text":123590},{"id":123596,"depth":1012,"text":123597},{"id":123607,"depth":1012,"text":123608},{"id":123614,"depth":1012,"text":123615},{"id":123806,"depth":1012,"text":123807},{"id":123877,"depth":1012,"text":123878},{"id":123910,"depth":1012,"text":123911},{"id":123985,"depth":1012,"text":123986},{"id":112236,"depth":1012,"text":112237},"2014-09-18","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjquery-introduction.jpg",{},{"title":538,"description":540},"blog\u002Fjquery-introduction",[16,17,106],"Zdz_E0Lxy4NnHSvmPBmBdDYaLikQj5qlYupWg5Ko3-8",{"id":124447,"title":341,"author":920,"body":124448,"date":126881,"description":343,"extension":1591,"image":126882,"meta":126883,"navigation":1050,"path":342,"seo":126884,"stem":126885,"tags":126886,"__hash__":126887},"blog\u002Fblog\u002Fgoogle-picker-with-drive.md",{"type":922,"value":124449,"toc":126859},[124450,124454,124460,124463,124477,124480,124483,124496,124499,124510,124512,124515,124519,124522,124524,124527,124531,124534,124537,124541,124544,124600,124603,124607,124610,124687,124691,124694,124738,124741,124806,124810,124813,124878,124881,124885,124888,124974,124978,124989,125106,125110,125117,125269,125273,125276,125508,125512,125515,125522,125755,125758,125761,126009,126013,126016,126019,126289,126292,126294,126296,126300,126304,126307,126310,126317,126323,126327,126330,126333,126418,126422,126425,126428,126539,126542,126856],[953,124451,124453],{"id":124452},"google-picker-with-drive","Google Picker with Drive",[925,124455,124456,124457,99125],{},"Replaces your traditional upload form. Google Picker is a modal window we can put in our application\nthat integrates with many of Google’s services, including Drive. It’s Easier Than ",[1107,124458,124459],{},"input type=”file”",[925,124461,124462],{},"Google Picker uploads files directly to\nthe user’s Drive, which means...",[1530,124464,124465,124468,124471,124474],{},[974,124466,124467],{},"It’s not taking up space on our server",[974,124469,124470],{},"It’s not using our bandwidth",[974,124472,124473],{},"We don’t have to write any upload code",[974,124475,124476],{},"It also looks a lot nicer than the standard file input",[953,124478,112965],{"id":124479},"google-developers-console",[925,124481,124482],{},"To get started ..",[1530,124484,124485,124487,124490,124493],{},[974,124486,112923],{},[974,124488,124489],{},"Enable the Google Picker API",[974,124491,124492],{},"Create a New OAuth Client ID",[974,124494,124495],{},"Create a Developer API Key",[925,124497,124498],{},"In our application..",[1530,124500,124501,124504,124507],{},[974,124502,124503],{},"Include the Google API Loader script",[974,124505,124506],{},"Authorize the User",[974,124508,124509],{},"Render the Picker",[953,124511,112960],{"id":112959},[925,124513,124514],{},"In the Google Developers Console, create a new API Project.",[953,124516,124518],{"id":124517},"enabling-the-google-picker-api","Enabling the Google Picker API",[925,124520,124521],{},"In the sidebar, goto APIs & auth > APIs then enable the Google Picker API.",[953,124523,112999],{"id":112998},[925,124525,124526],{},"Goto APIs & auth > Credentials then click CREATE NEW CLIENT ID.",[953,124528,124530],{"id":124529},"creating-a-api-key","Creating a API Key",[925,124532,124533],{},"Goto APIs & auth > Credentials then click CREATE NEW KEY and choose\nBrowser key.",[925,124535,124536],{},"Enter your site’s URL. The page will now show our newly created API key!",[953,124538,124540],{"id":124539},"the-google-api-loader-script","The Google API Loader script",[925,124542,124543],{},"This script will be used to load Google’s Authentication and Picker APIs.",[993,124545,124547],{"className":995,"code":124546,"language":997,"meta":998,"style":998},"\u003Cbody>\n \u003Cscript\n type=\"text\u002Fjavascript\"\n src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\"\n >\u003C\u002Fscript>\n\u003C\u002Fbody>\n",[941,124548,124549,124557,124563,124573,124583,124592],{"__ignoreMap":998},[1002,124550,124551,124553,124555],{"class":1004,"line":1005},[1002,124552,6539],{"class":1030},[1002,124554,15034],{"class":15711},[1002,124556,15703],{"class":1030},[1002,124558,124559,124561],{"class":1004,"line":1012},[1002,124560,22427],{"class":1030},[1002,124562,22025],{"class":15711},[1002,124564,124565,124568,124570],{"class":1004,"line":1047},[1002,124566,124567],{"class":1026}," type",[1002,124569,2393],{"class":1015},[1002,124571,124572],{"class":1034},"\"text\u002Fjavascript\"\n",[1002,124574,124575,124578,124580],{"class":1004,"line":1054},[1002,124576,124577],{"class":1026}," src",[1002,124579,2393],{"class":1015},[1002,124581,124582],{"class":1034},"\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\"\n",[1002,124584,124585,124588,124590],{"class":1004,"line":1060},[1002,124586,124587],{"class":1030}," >\u003C\u002F",[1002,124589,22063],{"class":15711},[1002,124591,15703],{"class":1030},[1002,124593,124594,124596,124598],{"class":1004,"line":1272},[1002,124595,22437],{"class":1030},[1002,124597,15034],{"class":15711},[1002,124599,15703],{"class":1030},[925,124601,124602],{},"this method gets called when the API\nLoader script is ready to use (we’ll define that method in a bit)",[953,124604,124606],{"id":124605},"loading-the-picker-api","Loading The Picker API",[925,124608,124609],{},"Before we can create a Google Picker modal window, we need to first load the necessary API.\nWe've setup a script tag which will call our local onApiLoad function when complete.\nImplement this function and have it load the auth and picker libraries.",[993,124611,124613],{"className":995,"code":124612,"language":997,"meta":998,"style":998},"\u003Cscript>\n function onApiLoad() {\n gapi.load('auth');\n gapi.load('picker');\n }\n\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\">\u003C\u002Fscript>\n",[941,124614,124615,124623,124628,124643,124656,124660,124668],{"__ignoreMap":998},[1002,124616,124617,124619,124621],{"class":1004,"line":1005},[1002,124618,6539],{"class":1030},[1002,124620,22063],{"class":15711},[1002,124622,15703],{"class":1030},[1002,124624,124625],{"class":1004,"line":1012},[1002,124626,124627],{"class":1030}," function onApiLoad() {\n",[1002,124629,124630,124633,124636,124638,124641],{"class":1004,"line":1047},[1002,124631,124632],{"class":1030}," gapi.",[1002,124634,124635],{"class":1026},"load",[1002,124637,1031],{"class":1030},[1002,124639,124640],{"class":1034},"'auth'",[1002,124642,1085],{"class":1030},[1002,124644,124645,124647,124649,124651,124654],{"class":1004,"line":1054},[1002,124646,124632],{"class":1030},[1002,124648,124635],{"class":1026},[1002,124650,1031],{"class":1030},[1002,124652,124653],{"class":1034},"'picker'",[1002,124655,1085],{"class":1030},[1002,124657,124658],{"class":1004,"line":1060},[1002,124659,1269],{"class":1030},[1002,124661,124662,124664,124666],{"class":1004,"line":1272},[1002,124663,22437],{"class":1030},[1002,124665,22063],{"class":15711},[1002,124667,15703],{"class":1030},[1002,124669,124670,124672,124674,124676,124678,124681,124683,124685],{"class":1004,"line":1348},[1002,124671,6539],{"class":1030},[1002,124673,22063],{"class":15711},[1002,124675,15242],{"class":1026},[1002,124677,2393],{"class":1015},[1002,124679,124680],{"class":1034},"\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\"",[1002,124682,22081],{"class":1030},[1002,124684,22063],{"class":15711},[1002,124686,15703],{"class":1030},[953,124688,124690],{"id":124689},"loading-the-auth-and-picker-apis","Loading the Auth and Picker APIs",[925,124692,124693],{},"The method below gets called when the Auth\nAPI is done loading (we’ll define that method in a bit too)",[993,124695,124697],{"className":995,"code":124696,"language":997,"meta":998,"style":998},"function onApiLoad() {\n gapi.load('auth', { callback: onAuthApiLoad });\n gapi.load('picker');\n}\n",[941,124698,124699,124708,124722,124734],{"__ignoreMap":998},[1002,124700,124701,124703,124706],{"class":1004,"line":1005},[1002,124702,6965],{"class":1015},[1002,124704,124705],{"class":1026}," onApiLoad",[1002,124707,3025],{"class":1030},[1002,124709,124710,124713,124715,124717,124719],{"class":1004,"line":1012},[1002,124711,124712],{"class":1030}," gapi.",[1002,124714,124635],{"class":1026},[1002,124716,1031],{"class":1030},[1002,124718,124640],{"class":1034},[1002,124720,124721],{"class":1030},", { callback: onAuthApiLoad });\n",[1002,124723,124724,124726,124728,124730,124732],{"class":1004,"line":1047},[1002,124725,124712],{"class":1030},[1002,124727,124635],{"class":1026},[1002,124729,1031],{"class":1030},[1002,124731,124653],{"class":1034},[1002,124733,1085],{"class":1030},[1002,124735,124736],{"class":1004,"line":1054},[1002,124737,1170],{"class":1030},[925,124739,124740],{},"this tells Google we want access to the user’s Drive, called after the user authenticates (we’ll implement that method next)",[993,124742,124744],{"className":995,"code":124743,"language":997,"meta":998,"style":998},"function onAuthApiLoad() {\n window.gapi.auth.authorize(\n {\n client_id: 'XXXXXXXXXXXX',\n scope: ['https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive'],\n },\n handleAuthResult,\n );\n}\n",[941,124745,124746,124755,124765,124769,124779,124789,124793,124798,124802],{"__ignoreMap":998},[1002,124747,124748,124750,124753],{"class":1004,"line":1005},[1002,124749,6965],{"class":1015},[1002,124751,124752],{"class":1026}," onAuthApiLoad",[1002,124754,3025],{"class":1030},[1002,124756,124757,124760,124763],{"class":1004,"line":1012},[1002,124758,124759],{"class":1030}," window.gapi.auth.",[1002,124761,124762],{"class":1026},"authorize",[1002,124764,10468],{"class":1030},[1002,124766,124767],{"class":1004,"line":1047},[1002,124768,91266],{"class":1030},[1002,124770,124771,124774,124777],{"class":1004,"line":1054},[1002,124772,124773],{"class":1030}," client_id: ",[1002,124775,124776],{"class":1034},"'XXXXXXXXXXXX'",[1002,124778,1143],{"class":1030},[1002,124780,124781,124784,124787],{"class":1004,"line":1060},[1002,124782,124783],{"class":1030}," scope: [",[1002,124785,124786],{"class":1034},"'https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive'",[1002,124788,1903],{"class":1030},[1002,124790,124791],{"class":1004,"line":1272},[1002,124792,15108],{"class":1030},[1002,124794,124795],{"class":1004,"line":1348},[1002,124796,124797],{"class":1030}," handleAuthResult,\n",[1002,124799,124800],{"class":1004,"line":1354},[1002,124801,10503],{"class":1030},[1002,124803,124804],{"class":1004,"line":1360},[1002,124805,1170],{"class":1030},[953,124807,124809],{"id":124808},"authenticating-the-user","Authenticating the User",[925,124811,124812],{},"Save the oauthToken and create the Picker.",[993,124814,124816],{"className":995,"code":124815,"language":997,"meta":998,"style":998},"var oauthToken;\nfunction handleAuthResult(authResult) {\n if (authResult && !authResult.error) {\n oauthToken = authResult.access_token;\n createPicker();\n }\n}\n",[941,124817,124818,124825,124839,124853,124863,124870,124874],{"__ignoreMap":998},[1002,124819,124820,124822],{"class":1004,"line":1005},[1002,124821,18311],{"class":1015},[1002,124823,124824],{"class":1030}," oauthToken;\n",[1002,124826,124827,124829,124832,124834,124837],{"class":1004,"line":1012},[1002,124828,6965],{"class":1015},[1002,124830,124831],{"class":1026}," handleAuthResult",[1002,124833,1031],{"class":1030},[1002,124835,124836],{"class":2378},"authResult",[1002,124838,2382],{"class":1030},[1002,124840,124841,124843,124846,124848,124850],{"class":1004,"line":1047},[1002,124842,19971],{"class":1015},[1002,124844,124845],{"class":1030}," (authResult ",[1002,124847,13133],{"class":1015},[1002,124849,32289],{"class":1015},[1002,124851,124852],{"class":1030},"authResult.error) {\n",[1002,124854,124855,124858,124860],{"class":1004,"line":1054},[1002,124856,124857],{"class":1030}," oauthToken ",[1002,124859,2393],{"class":1015},[1002,124861,124862],{"class":1030}," authResult.access_token;\n",[1002,124864,124865,124868],{"class":1004,"line":1060},[1002,124866,124867],{"class":1026}," createPicker",[1002,124869,1428],{"class":1030},[1002,124871,124872],{"class":1004,"line":1272},[1002,124873,1269],{"class":1030},[1002,124875,124876],{"class":1004,"line":1348},[1002,124877,1170],{"class":1030},[925,124879,124880],{},"this is a method we’ll define next that will create our Picker",[953,124882,124884],{"id":124883},"after-authentication","After Authentication",[925,124886,124887],{},"We're successfully loading the Google Auth and Google Picker libraries! After the auth library has loaded, we'll need to authorize with the Google API. To do this, create a new function named authenticateWithGoogle which will be run after the auth library has loaded.",[993,124889,124891],{"className":995,"code":124890,"language":997,"meta":998,"style":998},"\u003Cscript>\n function onApiLoad() {\n gapi.load('auth', {'callback': authenticateWithGoogle});\n gapi.load('picker');\n }\n function authenticateWithGoogle() {\n }\n\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\">\u003C\u002Fscript>\n",[941,124892,124893,124901,124905,124923,124935,124939,124944,124948,124956],{"__ignoreMap":998},[1002,124894,124895,124897,124899],{"class":1004,"line":1005},[1002,124896,6539],{"class":1030},[1002,124898,22063],{"class":15711},[1002,124900,15703],{"class":1030},[1002,124902,124903],{"class":1004,"line":1012},[1002,124904,124627],{"class":1030},[1002,124906,124907,124909,124911,124913,124915,124917,124920],{"class":1004,"line":1047},[1002,124908,124632],{"class":1030},[1002,124910,124635],{"class":1026},[1002,124912,1031],{"class":1030},[1002,124914,124640],{"class":1034},[1002,124916,90638],{"class":1030},[1002,124918,124919],{"class":1034},"'callback'",[1002,124921,124922],{"class":1030},": authenticateWithGoogle});\n",[1002,124924,124925,124927,124929,124931,124933],{"class":1004,"line":1054},[1002,124926,124632],{"class":1030},[1002,124928,124635],{"class":1026},[1002,124930,1031],{"class":1030},[1002,124932,124653],{"class":1034},[1002,124934,1085],{"class":1030},[1002,124936,124937],{"class":1004,"line":1060},[1002,124938,1269],{"class":1030},[1002,124940,124941],{"class":1004,"line":1272},[1002,124942,124943],{"class":1030}," function authenticateWithGoogle() {\n",[1002,124945,124946],{"class":1004,"line":1348},[1002,124947,1269],{"class":1030},[1002,124949,124950,124952,124954],{"class":1004,"line":1354},[1002,124951,22437],{"class":1030},[1002,124953,22063],{"class":15711},[1002,124955,15703],{"class":1030},[1002,124957,124958,124960,124962,124964,124966,124968,124970,124972],{"class":1004,"line":1360},[1002,124959,6539],{"class":1030},[1002,124961,22063],{"class":15711},[1002,124963,15242],{"class":1026},[1002,124965,2393],{"class":1015},[1002,124967,124680],{"class":1034},[1002,124969,22081],{"class":1030},[1002,124971,22063],{"class":15711},[1002,124973,15703],{"class":1030},[953,124975,124977],{"id":124976},"authenticate-with-google","Authenticate with Google",[925,124979,124980,124981,124984,124985,124988],{},"We can start the rest of the Google Authentication process now in our authenticateWithGoogle.\nImplement this function to authorize the ",[933,124982,113254],{"href":113254,"rel":124983},[937]," scope with a ",[941,124986,124987],{},"client_id"," using the variable we defined. Don't worry about the callback on success yet, we'll do that next.",[993,124990,124992],{"className":995,"code":124991,"language":997,"meta":998,"style":998},"\u003Cscript>\n var clientId = '720409271749-hqv3lb4u0q82t68vperem5oi3kosskol.apps.googleusercontent.com';\n function onApiLoad() {\n gapi.load('auth', authenticateWithGoogle);\n gapi.load('picker');\n }\n function authenticateWithGoogle() {\n window.gapi.auth.authorize({\n 'client_id': clientId,\n 'scope': ['https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive']\n });\n }\n\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\">\u003C\u002Fscript>\n",[941,124993,124994,125002,125007,125011,125024,125036,125040,125044,125053,125061,125072,125076,125080,125088],{"__ignoreMap":998},[1002,124995,124996,124998,125000],{"class":1004,"line":1005},[1002,124997,6539],{"class":1030},[1002,124999,22063],{"class":15711},[1002,125001,15703],{"class":1030},[1002,125003,125004],{"class":1004,"line":1012},[1002,125005,125006],{"class":1030}," var clientId = '720409271749-hqv3lb4u0q82t68vperem5oi3kosskol.apps.googleusercontent.com';\n",[1002,125008,125009],{"class":1004,"line":1047},[1002,125010,124627],{"class":1030},[1002,125012,125013,125015,125017,125019,125021],{"class":1004,"line":1054},[1002,125014,124632],{"class":1030},[1002,125016,124635],{"class":1026},[1002,125018,1031],{"class":1030},[1002,125020,124640],{"class":1034},[1002,125022,125023],{"class":1030},", authenticateWithGoogle);\n",[1002,125025,125026,125028,125030,125032,125034],{"class":1004,"line":1060},[1002,125027,124632],{"class":1030},[1002,125029,124635],{"class":1026},[1002,125031,1031],{"class":1030},[1002,125033,124653],{"class":1034},[1002,125035,1085],{"class":1030},[1002,125037,125038],{"class":1004,"line":1272},[1002,125039,1269],{"class":1030},[1002,125041,125042],{"class":1004,"line":1348},[1002,125043,124943],{"class":1030},[1002,125045,125046,125049,125051],{"class":1004,"line":1354},[1002,125047,125048],{"class":1030}," window.gapi.auth.",[1002,125050,124762],{"class":1026},[1002,125052,2756],{"class":1030},[1002,125054,125055,125058],{"class":1004,"line":1360},[1002,125056,125057],{"class":1034}," 'client_id'",[1002,125059,125060],{"class":1030},": clientId,\n",[1002,125062,125063,125066,125068,125070],{"class":1004,"line":1366},[1002,125064,125065],{"class":1034}," 'scope'",[1002,125067,1201],{"class":1030},[1002,125069,124786],{"class":1034},[1002,125071,1207],{"class":1030},[1002,125073,125074],{"class":1004,"line":1946},[1002,125075,8353],{"class":1030},[1002,125077,125078],{"class":1004,"line":1956},[1002,125079,1269],{"class":1030},[1002,125081,125082,125084,125086],{"class":1004,"line":1961},[1002,125083,22437],{"class":1030},[1002,125085,22063],{"class":15711},[1002,125087,15703],{"class":1030},[1002,125089,125090,125092,125094,125096,125098,125100,125102,125104],{"class":1004,"line":1971},[1002,125091,6539],{"class":1030},[1002,125093,22063],{"class":15711},[1002,125095,15242],{"class":1026},[1002,125097,2393],{"class":1015},[1002,125099,124680],{"class":1034},[1002,125101,22081],{"class":1030},[1002,125103,22063],{"class":15711},[1002,125105,15703],{"class":1030},[953,125107,125109],{"id":125108},"handling-authentication","Handling Authentication",[925,125111,125112,125113,125116],{},"After we authenticate with Google with our API key, we can show our actual Picker! …assuming the authentication was successful.\nCreate a new handleAuthentication function that will be called after authentication.\nIn this function, save their ",[941,125114,125115],{},"access_token"," to the accessToken variable if authentication was successful.",[993,125118,125120],{"className":995,"code":125119,"language":997,"meta":998,"style":998},"\u003Cscript>\n var clientId = '720409271749-hqv3lb4u0q82t68vperem5oi3kosskol.apps.googleusercontent.com';\n var accessToken;\n function onApiLoad() {\n gapi.load('auth', authenticateWithGoogle);\n gapi.load('picker');\n }\n function authenticateWithGoogle() {\n window.gapi.auth.authorize({\n 'client_id': clientId,\n 'scope': ['https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive']},\n handleAuthentication);\n }\n function handleAuthentication(authResult) {\n if (authResult && !authResult.error) {\n accessToken = authResult.access_token;\n }\n }\n\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\">\u003C\u002Fscript>\n",[941,125121,125122,125130,125134,125139,125143,125155,125167,125171,125175,125183,125189,125200,125205,125209,125214,125226,125235,125239,125243,125251],{"__ignoreMap":998},[1002,125123,125124,125126,125128],{"class":1004,"line":1005},[1002,125125,6539],{"class":1030},[1002,125127,22063],{"class":15711},[1002,125129,15703],{"class":1030},[1002,125131,125132],{"class":1004,"line":1012},[1002,125133,125006],{"class":1030},[1002,125135,125136],{"class":1004,"line":1047},[1002,125137,125138],{"class":1030}," var accessToken;\n",[1002,125140,125141],{"class":1004,"line":1054},[1002,125142,124627],{"class":1030},[1002,125144,125145,125147,125149,125151,125153],{"class":1004,"line":1060},[1002,125146,124632],{"class":1030},[1002,125148,124635],{"class":1026},[1002,125150,1031],{"class":1030},[1002,125152,124640],{"class":1034},[1002,125154,125023],{"class":1030},[1002,125156,125157,125159,125161,125163,125165],{"class":1004,"line":1272},[1002,125158,124632],{"class":1030},[1002,125160,124635],{"class":1026},[1002,125162,1031],{"class":1030},[1002,125164,124653],{"class":1034},[1002,125166,1085],{"class":1030},[1002,125168,125169],{"class":1004,"line":1348},[1002,125170,1269],{"class":1030},[1002,125172,125173],{"class":1004,"line":1354},[1002,125174,124943],{"class":1030},[1002,125176,125177,125179,125181],{"class":1004,"line":1360},[1002,125178,125048],{"class":1030},[1002,125180,124762],{"class":1026},[1002,125182,2756],{"class":1030},[1002,125184,125185,125187],{"class":1004,"line":1366},[1002,125186,125057],{"class":1034},[1002,125188,125060],{"class":1030},[1002,125190,125191,125193,125195,125197],{"class":1004,"line":1946},[1002,125192,125065],{"class":1034},[1002,125194,1201],{"class":1030},[1002,125196,124786],{"class":1034},[1002,125198,125199],{"class":1030},"]},\n",[1002,125201,125202],{"class":1004,"line":1956},[1002,125203,125204],{"class":1030}," handleAuthentication);\n",[1002,125206,125207],{"class":1004,"line":1961},[1002,125208,1269],{"class":1030},[1002,125210,125211],{"class":1004,"line":1971},[1002,125212,125213],{"class":1030}," function handleAuthentication(authResult) {\n",[1002,125215,125216,125218,125220,125222,125224],{"class":1004,"line":1980},[1002,125217,4368],{"class":1026},[1002,125219,124845],{"class":1030},[1002,125221,13133],{"class":1015},[1002,125223,32289],{"class":1015},[1002,125225,124852],{"class":1030},[1002,125227,125228,125231,125233],{"class":1004,"line":1985},[1002,125229,125230],{"class":1030}," accessToken ",[1002,125232,2393],{"class":1015},[1002,125234,124862],{"class":1030},[1002,125236,125237],{"class":1004,"line":1995},[1002,125238,2014],{"class":1030},[1002,125240,125241],{"class":1004,"line":2006},[1002,125242,1269],{"class":1030},[1002,125244,125245,125247,125249],{"class":1004,"line":2011},[1002,125246,22437],{"class":1030},[1002,125248,22063],{"class":15711},[1002,125250,15703],{"class":1030},[1002,125252,125253,125255,125257,125259,125261,125263,125265,125267],{"class":1004,"line":2017},[1002,125254,6539],{"class":1030},[1002,125256,22063],{"class":15711},[1002,125258,15242],{"class":1026},[1002,125260,2393],{"class":1015},[1002,125262,124680],{"class":1034},[1002,125264,22081],{"class":1030},[1002,125266,22063],{"class":15711},[1002,125268,15703],{"class":1030},[953,125270,125272],{"id":125271},"basic-picker","Basic Picker",[925,125274,125275],{},"After successfully authenticating is a perfect time to set up our picker! Create a new setupPicker function which is executed after successful authentication. In this function, build out a new picker using our saved accessToken and render it.",[993,125277,125279],{"className":995,"code":125278,"language":997,"meta":998,"style":998},"\u003Cscript>\n var clientId = '720409271749-hqv3lb4u0q82t68vperem5oi3kosskol.apps.googleusercontent.com';\n var developerKey = 'AIzaSyBTEWsJ4aXdoOzB4ey81eX9-ja7HejL4Qc';\n var accessToken;\n function onApiLoad() {\n gapi.load('auth', authenticateWithGoogle);\n gapi.load('picker');\n }\n function authenticateWithGoogle() {\n window.gapi.auth.authorize({\n 'client_id': clientId,\n 'scope': ['https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive']\n }, handleAuthentication);\n }\n function handleAuthentication(result) {\n if(result && !result.error) {\n accessToken = result.access_token;\n setupPicker();\n }\n }\n function setupPicker() {\n var picker = new google.picker.PickerBuilder()\n .setOAuthToken(accessToken)\n .setDeveloperKey(developerKey)\n .build();\n picker.setVisible(true);\n }\n\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\">\u003C\u002Fscript>\n",[941,125280,125281,125289,125293,125298,125302,125306,125318,125330,125334,125338,125346,125352,125362,125367,125371,125376,125390,125399,125406,125410,125414,125419,125436,125446,125456,125464,125478,125482,125490],{"__ignoreMap":998},[1002,125282,125283,125285,125287],{"class":1004,"line":1005},[1002,125284,6539],{"class":1030},[1002,125286,22063],{"class":15711},[1002,125288,15703],{"class":1030},[1002,125290,125291],{"class":1004,"line":1012},[1002,125292,125006],{"class":1030},[1002,125294,125295],{"class":1004,"line":1047},[1002,125296,125297],{"class":1030}," var developerKey = 'AIzaSyBTEWsJ4aXdoOzB4ey81eX9-ja7HejL4Qc';\n",[1002,125299,125300],{"class":1004,"line":1054},[1002,125301,125138],{"class":1030},[1002,125303,125304],{"class":1004,"line":1060},[1002,125305,124627],{"class":1030},[1002,125307,125308,125310,125312,125314,125316],{"class":1004,"line":1272},[1002,125309,124632],{"class":1030},[1002,125311,124635],{"class":1026},[1002,125313,1031],{"class":1030},[1002,125315,124640],{"class":1034},[1002,125317,125023],{"class":1030},[1002,125319,125320,125322,125324,125326,125328],{"class":1004,"line":1348},[1002,125321,124632],{"class":1030},[1002,125323,124635],{"class":1026},[1002,125325,1031],{"class":1030},[1002,125327,124653],{"class":1034},[1002,125329,1085],{"class":1030},[1002,125331,125332],{"class":1004,"line":1354},[1002,125333,1269],{"class":1030},[1002,125335,125336],{"class":1004,"line":1360},[1002,125337,124943],{"class":1030},[1002,125339,125340,125342,125344],{"class":1004,"line":1366},[1002,125341,125048],{"class":1030},[1002,125343,124762],{"class":1026},[1002,125345,2756],{"class":1030},[1002,125347,125348,125350],{"class":1004,"line":1946},[1002,125349,125057],{"class":1034},[1002,125351,125060],{"class":1030},[1002,125353,125354,125356,125358,125360],{"class":1004,"line":1956},[1002,125355,125065],{"class":1034},[1002,125357,1201],{"class":1030},[1002,125359,124786],{"class":1034},[1002,125361,1207],{"class":1030},[1002,125363,125364],{"class":1004,"line":1961},[1002,125365,125366],{"class":1030}," }, handleAuthentication);\n",[1002,125368,125369],{"class":1004,"line":1971},[1002,125370,1269],{"class":1030},[1002,125372,125373],{"class":1004,"line":1980},[1002,125374,125375],{"class":1030}," function handleAuthentication(result) {\n",[1002,125377,125378,125380,125383,125385,125387],{"class":1004,"line":1985},[1002,125379,4368],{"class":1026},[1002,125381,125382],{"class":1030},"(result ",[1002,125384,13133],{"class":1015},[1002,125386,32289],{"class":1015},[1002,125388,125389],{"class":1030},"result.error) {\n",[1002,125391,125392,125394,125396],{"class":1004,"line":1995},[1002,125393,125230],{"class":1030},[1002,125395,2393],{"class":1015},[1002,125397,125398],{"class":1030}," result.access_token;\n",[1002,125400,125401,125404],{"class":1004,"line":2006},[1002,125402,125403],{"class":1026}," setupPicker",[1002,125405,1428],{"class":1030},[1002,125407,125408],{"class":1004,"line":2011},[1002,125409,2014],{"class":1030},[1002,125411,125412],{"class":1004,"line":2017},[1002,125413,1269],{"class":1030},[1002,125415,125416],{"class":1004,"line":2022},[1002,125417,125418],{"class":1030}," function setupPicker() {\n",[1002,125420,125421,125424,125426,125428,125431,125434],{"class":1004,"line":2442},[1002,125422,125423],{"class":1030}," var picker ",[1002,125425,2393],{"class":1015},[1002,125427,2690],{"class":1015},[1002,125429,125430],{"class":1030}," google.picker.",[1002,125432,125433],{"class":1026},"PickerBuilder",[1002,125435,17202],{"class":1030},[1002,125437,125438,125440,125443],{"class":1004,"line":2466},[1002,125439,30624],{"class":1030},[1002,125441,125442],{"class":1026},"setOAuthToken",[1002,125444,125445],{"class":1030},"(accessToken)\n",[1002,125447,125448,125450,125453],{"class":1004,"line":2471},[1002,125449,30624],{"class":1030},[1002,125451,125452],{"class":1026},"setDeveloperKey",[1002,125454,125455],{"class":1030},"(developerKey)\n",[1002,125457,125458,125460,125462],{"class":1004,"line":2476},[1002,125459,30624],{"class":1030},[1002,125461,3864],{"class":1026},[1002,125463,1428],{"class":1030},[1002,125465,125466,125469,125472,125474,125476],{"class":1004,"line":2481},[1002,125467,125468],{"class":1030}," picker.",[1002,125470,125471],{"class":1026},"setVisible",[1002,125473,1031],{"class":1030},[1002,125475,17397],{"class":1019},[1002,125477,1085],{"class":1030},[1002,125479,125480],{"class":1004,"line":2491},[1002,125481,1269],{"class":1030},[1002,125483,125484,125486,125488],{"class":1004,"line":2502},[1002,125485,22437],{"class":1030},[1002,125487,22063],{"class":15711},[1002,125489,15703],{"class":1030},[1002,125491,125492,125494,125496,125498,125500,125502,125504,125506],{"class":1004,"line":2513},[1002,125493,6539],{"class":1030},[1002,125495,22063],{"class":15711},[1002,125497,15242],{"class":1026},[1002,125499,2393],{"class":1015},[1002,125501,124680],{"class":1034},[1002,125503,22081],{"class":1030},[1002,125505,22063],{"class":15711},[1002,125507,15703],{"class":1030},[953,125509,125511],{"id":125510},"adding-views","Adding Views",[925,125513,125514],{},"We've successfully rendered our Picker, but it's just an empty window. Let's add a new view to it so it does something.",[925,125516,125517,125518,125521],{},"Update ",[941,125519,125520],{},"setupPicker()"," to give our Picker the ability to upload files to Google Drive.",[993,125523,125525],{"className":995,"code":125524,"language":997,"meta":998,"style":998},"\u003Cscript>\n var clientId = '720409271749-hqv3lb4u0q82t68vperem5oi3kosskol.apps.googleusercontent.com';\n var developerKey = 'AIzaSyBTEWsJ4aXdoOzB4ey81eX9-ja7HejL4Qc';\n var accessToken;\n function onApiLoad() {\n gapi.load('auth', authenticateWithGoogle);\n gapi.load('picker');\n }\n function authenticateWithGoogle() {\n window.gapi.auth.authorize({\n 'client_id': clientId,\n 'scope': ['https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive']\n }, handleAuthentication);\n }\n function handleAuthentication(result) {\n if(result && !result.error) {\n accessToken = result.access_token;\n setupPicker();\n }\n }\n function setupPicker() {\n var picker = new google.picker.PickerBuilder()\n .addView(new google.picker.DocsUploadView())\n .setOAuthToken(accessToken)\n .setDeveloperKey(developerKey)\n .build();\n picker.setVisible(true);\n }\n\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\">\u003C\u002Fscript>\n",[941,125526,125527,125535,125539,125543,125547,125551,125563,125575,125579,125583,125591,125597,125607,125611,125615,125619,125631,125639,125645,125649,125653,125657,125671,125689,125697,125705,125713,125725,125729,125737],{"__ignoreMap":998},[1002,125528,125529,125531,125533],{"class":1004,"line":1005},[1002,125530,6539],{"class":1030},[1002,125532,22063],{"class":15711},[1002,125534,15703],{"class":1030},[1002,125536,125537],{"class":1004,"line":1012},[1002,125538,125006],{"class":1030},[1002,125540,125541],{"class":1004,"line":1047},[1002,125542,125297],{"class":1030},[1002,125544,125545],{"class":1004,"line":1054},[1002,125546,125138],{"class":1030},[1002,125548,125549],{"class":1004,"line":1060},[1002,125550,124627],{"class":1030},[1002,125552,125553,125555,125557,125559,125561],{"class":1004,"line":1272},[1002,125554,124632],{"class":1030},[1002,125556,124635],{"class":1026},[1002,125558,1031],{"class":1030},[1002,125560,124640],{"class":1034},[1002,125562,125023],{"class":1030},[1002,125564,125565,125567,125569,125571,125573],{"class":1004,"line":1348},[1002,125566,124632],{"class":1030},[1002,125568,124635],{"class":1026},[1002,125570,1031],{"class":1030},[1002,125572,124653],{"class":1034},[1002,125574,1085],{"class":1030},[1002,125576,125577],{"class":1004,"line":1354},[1002,125578,1269],{"class":1030},[1002,125580,125581],{"class":1004,"line":1360},[1002,125582,124943],{"class":1030},[1002,125584,125585,125587,125589],{"class":1004,"line":1366},[1002,125586,125048],{"class":1030},[1002,125588,124762],{"class":1026},[1002,125590,2756],{"class":1030},[1002,125592,125593,125595],{"class":1004,"line":1946},[1002,125594,125057],{"class":1034},[1002,125596,125060],{"class":1030},[1002,125598,125599,125601,125603,125605],{"class":1004,"line":1956},[1002,125600,125065],{"class":1034},[1002,125602,1201],{"class":1030},[1002,125604,124786],{"class":1034},[1002,125606,1207],{"class":1030},[1002,125608,125609],{"class":1004,"line":1961},[1002,125610,125366],{"class":1030},[1002,125612,125613],{"class":1004,"line":1971},[1002,125614,1269],{"class":1030},[1002,125616,125617],{"class":1004,"line":1980},[1002,125618,125375],{"class":1030},[1002,125620,125621,125623,125625,125627,125629],{"class":1004,"line":1985},[1002,125622,4368],{"class":1026},[1002,125624,125382],{"class":1030},[1002,125626,13133],{"class":1015},[1002,125628,32289],{"class":1015},[1002,125630,125389],{"class":1030},[1002,125632,125633,125635,125637],{"class":1004,"line":1995},[1002,125634,125230],{"class":1030},[1002,125636,2393],{"class":1015},[1002,125638,125398],{"class":1030},[1002,125640,125641,125643],{"class":1004,"line":2006},[1002,125642,125403],{"class":1026},[1002,125644,1428],{"class":1030},[1002,125646,125647],{"class":1004,"line":2011},[1002,125648,2014],{"class":1030},[1002,125650,125651],{"class":1004,"line":2017},[1002,125652,1269],{"class":1030},[1002,125654,125655],{"class":1004,"line":2022},[1002,125656,125418],{"class":1030},[1002,125658,125659,125661,125663,125665,125667,125669],{"class":1004,"line":2442},[1002,125660,125423],{"class":1030},[1002,125662,2393],{"class":1015},[1002,125664,2690],{"class":1015},[1002,125666,125430],{"class":1030},[1002,125668,125433],{"class":1026},[1002,125670,17202],{"class":1030},[1002,125672,125673,125675,125678,125680,125682,125684,125687],{"class":1004,"line":2466},[1002,125674,40738],{"class":1030},[1002,125676,125677],{"class":1026},"addView",[1002,125679,1031],{"class":1030},[1002,125681,5654],{"class":1015},[1002,125683,125430],{"class":1030},[1002,125685,125686],{"class":1026},"DocsUploadView",[1002,125688,48328],{"class":1030},[1002,125690,125691,125693,125695],{"class":1004,"line":2471},[1002,125692,40738],{"class":1030},[1002,125694,125442],{"class":1026},[1002,125696,125445],{"class":1030},[1002,125698,125699,125701,125703],{"class":1004,"line":2476},[1002,125700,40738],{"class":1030},[1002,125702,125452],{"class":1026},[1002,125704,125455],{"class":1030},[1002,125706,125707,125709,125711],{"class":1004,"line":2481},[1002,125708,40738],{"class":1030},[1002,125710,3864],{"class":1026},[1002,125712,1428],{"class":1030},[1002,125714,125715,125717,125719,125721,125723],{"class":1004,"line":2491},[1002,125716,125468],{"class":1030},[1002,125718,125471],{"class":1026},[1002,125720,1031],{"class":1030},[1002,125722,17397],{"class":1019},[1002,125724,1085],{"class":1030},[1002,125726,125727],{"class":1004,"line":2502},[1002,125728,1269],{"class":1030},[1002,125730,125731,125733,125735],{"class":1004,"line":2513},[1002,125732,22437],{"class":1030},[1002,125734,22063],{"class":15711},[1002,125736,15703],{"class":1030},[1002,125738,125739,125741,125743,125745,125747,125749,125751,125753],{"class":1004,"line":2535},[1002,125740,6539],{"class":1030},[1002,125742,22063],{"class":15711},[1002,125744,15242],{"class":1026},[1002,125746,2393],{"class":1015},[1002,125748,124680],{"class":1034},[1002,125750,22081],{"class":1030},[1002,125752,22063],{"class":15711},[1002,125754,15703],{"class":1030},[925,125756,125757],{},"Let's give the Picker the ability to list files that a user can select.",[925,125759,125760],{},"Add the appropriate view to the Picker.",[993,125762,125764],{"className":995,"code":125763,"language":997,"meta":998,"style":998},"\u003Cscript>\n var clientId = '720409271749-hqv3lb4u0q82t68vperem5oi3kosskol.apps.googleusercontent.com';\n var developerKey = 'AIzaSyBTEWsJ4aXdoOzB4ey81eX9-ja7HejL4Qc';\n var accessToken;\n function onApiLoad() {\n gapi.load('auth', authenticateWithGoogle);\n gapi.load('picker');\n }\n function authenticateWithGoogle() {\n window.gapi.auth.authorize({\n 'client_id': clientId,\n 'scope': ['https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive']\n }, handleAuthentication);\n }\n function handleAuthentication(result) {\n if(result && !result.error) {\n accessToken = result.access_token;\n setupPicker();\n }\n }\n function setupPicker() {\n var picker = new google.picker.PickerBuilder()\n .setOAuthToken(accessToken)\n .setDeveloperKey(developerKey)\n .addView(new google.picker.DocsUploadView())\n .addView(new google.picker.DocsView())\n .build();\n picker.setVisible(true);\n }\n\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\">\u003C\u002Fscript>\n",[941,125765,125766,125774,125778,125782,125786,125790,125802,125814,125818,125822,125830,125836,125846,125850,125854,125858,125870,125878,125884,125888,125892,125896,125910,125918,125926,125942,125959,125967,125979,125983,125991],{"__ignoreMap":998},[1002,125767,125768,125770,125772],{"class":1004,"line":1005},[1002,125769,6539],{"class":1030},[1002,125771,22063],{"class":15711},[1002,125773,15703],{"class":1030},[1002,125775,125776],{"class":1004,"line":1012},[1002,125777,125006],{"class":1030},[1002,125779,125780],{"class":1004,"line":1047},[1002,125781,125297],{"class":1030},[1002,125783,125784],{"class":1004,"line":1054},[1002,125785,125138],{"class":1030},[1002,125787,125788],{"class":1004,"line":1060},[1002,125789,124627],{"class":1030},[1002,125791,125792,125794,125796,125798,125800],{"class":1004,"line":1272},[1002,125793,124632],{"class":1030},[1002,125795,124635],{"class":1026},[1002,125797,1031],{"class":1030},[1002,125799,124640],{"class":1034},[1002,125801,125023],{"class":1030},[1002,125803,125804,125806,125808,125810,125812],{"class":1004,"line":1348},[1002,125805,124632],{"class":1030},[1002,125807,124635],{"class":1026},[1002,125809,1031],{"class":1030},[1002,125811,124653],{"class":1034},[1002,125813,1085],{"class":1030},[1002,125815,125816],{"class":1004,"line":1354},[1002,125817,1269],{"class":1030},[1002,125819,125820],{"class":1004,"line":1360},[1002,125821,124943],{"class":1030},[1002,125823,125824,125826,125828],{"class":1004,"line":1366},[1002,125825,125048],{"class":1030},[1002,125827,124762],{"class":1026},[1002,125829,2756],{"class":1030},[1002,125831,125832,125834],{"class":1004,"line":1946},[1002,125833,125057],{"class":1034},[1002,125835,125060],{"class":1030},[1002,125837,125838,125840,125842,125844],{"class":1004,"line":1956},[1002,125839,125065],{"class":1034},[1002,125841,1201],{"class":1030},[1002,125843,124786],{"class":1034},[1002,125845,1207],{"class":1030},[1002,125847,125848],{"class":1004,"line":1961},[1002,125849,125366],{"class":1030},[1002,125851,125852],{"class":1004,"line":1971},[1002,125853,1269],{"class":1030},[1002,125855,125856],{"class":1004,"line":1980},[1002,125857,125375],{"class":1030},[1002,125859,125860,125862,125864,125866,125868],{"class":1004,"line":1985},[1002,125861,4368],{"class":1026},[1002,125863,125382],{"class":1030},[1002,125865,13133],{"class":1015},[1002,125867,32289],{"class":1015},[1002,125869,125389],{"class":1030},[1002,125871,125872,125874,125876],{"class":1004,"line":1995},[1002,125873,125230],{"class":1030},[1002,125875,2393],{"class":1015},[1002,125877,125398],{"class":1030},[1002,125879,125880,125882],{"class":1004,"line":2006},[1002,125881,125403],{"class":1026},[1002,125883,1428],{"class":1030},[1002,125885,125886],{"class":1004,"line":2011},[1002,125887,2014],{"class":1030},[1002,125889,125890],{"class":1004,"line":2017},[1002,125891,1269],{"class":1030},[1002,125893,125894],{"class":1004,"line":2022},[1002,125895,125418],{"class":1030},[1002,125897,125898,125900,125902,125904,125906,125908],{"class":1004,"line":2442},[1002,125899,125423],{"class":1030},[1002,125901,2393],{"class":1015},[1002,125903,2690],{"class":1015},[1002,125905,125430],{"class":1030},[1002,125907,125433],{"class":1026},[1002,125909,17202],{"class":1030},[1002,125911,125912,125914,125916],{"class":1004,"line":2466},[1002,125913,40738],{"class":1030},[1002,125915,125442],{"class":1026},[1002,125917,125445],{"class":1030},[1002,125919,125920,125922,125924],{"class":1004,"line":2471},[1002,125921,40738],{"class":1030},[1002,125923,125452],{"class":1026},[1002,125925,125455],{"class":1030},[1002,125927,125928,125930,125932,125934,125936,125938,125940],{"class":1004,"line":2476},[1002,125929,40738],{"class":1030},[1002,125931,125677],{"class":1026},[1002,125933,1031],{"class":1030},[1002,125935,5654],{"class":1015},[1002,125937,125430],{"class":1030},[1002,125939,125686],{"class":1026},[1002,125941,48328],{"class":1030},[1002,125943,125944,125946,125948,125950,125952,125954,125957],{"class":1004,"line":2481},[1002,125945,40738],{"class":1030},[1002,125947,125677],{"class":1026},[1002,125949,1031],{"class":1030},[1002,125951,5654],{"class":1015},[1002,125953,125430],{"class":1030},[1002,125955,125956],{"class":1026},"DocsView",[1002,125958,48328],{"class":1030},[1002,125960,125961,125963,125965],{"class":1004,"line":2491},[1002,125962,40738],{"class":1030},[1002,125964,3864],{"class":1026},[1002,125966,1428],{"class":1030},[1002,125968,125969,125971,125973,125975,125977],{"class":1004,"line":2502},[1002,125970,125468],{"class":1030},[1002,125972,125471],{"class":1026},[1002,125974,1031],{"class":1030},[1002,125976,17397],{"class":1019},[1002,125978,1085],{"class":1030},[1002,125980,125981],{"class":1004,"line":2513},[1002,125982,1269],{"class":1030},[1002,125984,125985,125987,125989],{"class":1004,"line":2535},[1002,125986,22437],{"class":1030},[1002,125988,22063],{"class":15711},[1002,125990,15703],{"class":1030},[1002,125992,125993,125995,125997,125999,126001,126003,126005,126007],{"class":1004,"line":2557},[1002,125994,6539],{"class":1030},[1002,125996,22063],{"class":15711},[1002,125998,15242],{"class":1026},[1002,126000,2393],{"class":1015},[1002,126002,124680],{"class":1034},[1002,126004,22081],{"class":1030},[1002,126006,22063],{"class":15711},[1002,126008,15703],{"class":1030},[953,126010,126012],{"id":126011},"setting-a-callback-function","Setting a Callback Function",[925,126014,126015],{},"We've given users the ability to view and select files with the DocsView, but clicking the select button doesn't do anything yet.",[925,126017,126018],{},"Define a callback function called myCallback() and set that as the Picker callback.",[993,126020,126022],{"className":995,"code":126021,"language":997,"meta":998,"style":998},"\u003Cscript>\n var clientId = '720409271749-hqv3lb4u0q82t68vperem5oi3kosskol.apps.googleusercontent.com';\n var developerKey = 'AIzaSyBTEWsJ4aXdoOzB4ey81eX9-ja7HejL4Qc';\n var accessToken;\n function onApiLoad() {\n gapi.load('auth', authenticateWithGoogle);\n gapi.load('picker');\n }\n function authenticateWithGoogle() {\n window.gapi.auth.authorize({\n 'client_id': clientId,\n 'scope': ['https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive']\n }, handleAuthentication);\n }\n function handleAuthentication(result) {\n if(result && !result.error) {\n accessToken = result.access_token;\n setupPicker();\n }\n }\n function setupPicker() {\n var picker = new google.picker.PickerBuilder()\n .setOAuthToken(accessToken)\n .setDeveloperKey(developerKey)\n .addView(new google.picker.DocsUploadView())\n .addView(new google.picker.DocsView())\n .setCallback(myCallback)\n .build();\n picker.setVisible(true);\n }\n function myCallback(data) {\n\n }\n\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\">\u003C\u002Fscript>\n",[941,126023,126024,126032,126036,126040,126044,126048,126060,126072,126076,126080,126088,126094,126104,126108,126112,126116,126128,126136,126142,126146,126150,126154,126168,126176,126184,126200,126216,126226,126234,126246,126250,126255,126259,126263,126271],{"__ignoreMap":998},[1002,126025,126026,126028,126030],{"class":1004,"line":1005},[1002,126027,6539],{"class":1030},[1002,126029,22063],{"class":15711},[1002,126031,15703],{"class":1030},[1002,126033,126034],{"class":1004,"line":1012},[1002,126035,125006],{"class":1030},[1002,126037,126038],{"class":1004,"line":1047},[1002,126039,125297],{"class":1030},[1002,126041,126042],{"class":1004,"line":1054},[1002,126043,125138],{"class":1030},[1002,126045,126046],{"class":1004,"line":1060},[1002,126047,124627],{"class":1030},[1002,126049,126050,126052,126054,126056,126058],{"class":1004,"line":1272},[1002,126051,124632],{"class":1030},[1002,126053,124635],{"class":1026},[1002,126055,1031],{"class":1030},[1002,126057,124640],{"class":1034},[1002,126059,125023],{"class":1030},[1002,126061,126062,126064,126066,126068,126070],{"class":1004,"line":1348},[1002,126063,124632],{"class":1030},[1002,126065,124635],{"class":1026},[1002,126067,1031],{"class":1030},[1002,126069,124653],{"class":1034},[1002,126071,1085],{"class":1030},[1002,126073,126074],{"class":1004,"line":1354},[1002,126075,1269],{"class":1030},[1002,126077,126078],{"class":1004,"line":1360},[1002,126079,124943],{"class":1030},[1002,126081,126082,126084,126086],{"class":1004,"line":1366},[1002,126083,125048],{"class":1030},[1002,126085,124762],{"class":1026},[1002,126087,2756],{"class":1030},[1002,126089,126090,126092],{"class":1004,"line":1946},[1002,126091,125057],{"class":1034},[1002,126093,125060],{"class":1030},[1002,126095,126096,126098,126100,126102],{"class":1004,"line":1956},[1002,126097,125065],{"class":1034},[1002,126099,1201],{"class":1030},[1002,126101,124786],{"class":1034},[1002,126103,1207],{"class":1030},[1002,126105,126106],{"class":1004,"line":1961},[1002,126107,125366],{"class":1030},[1002,126109,126110],{"class":1004,"line":1971},[1002,126111,1269],{"class":1030},[1002,126113,126114],{"class":1004,"line":1980},[1002,126115,125375],{"class":1030},[1002,126117,126118,126120,126122,126124,126126],{"class":1004,"line":1985},[1002,126119,4368],{"class":1026},[1002,126121,125382],{"class":1030},[1002,126123,13133],{"class":1015},[1002,126125,32289],{"class":1015},[1002,126127,125389],{"class":1030},[1002,126129,126130,126132,126134],{"class":1004,"line":1995},[1002,126131,125230],{"class":1030},[1002,126133,2393],{"class":1015},[1002,126135,125398],{"class":1030},[1002,126137,126138,126140],{"class":1004,"line":2006},[1002,126139,125403],{"class":1026},[1002,126141,1428],{"class":1030},[1002,126143,126144],{"class":1004,"line":2011},[1002,126145,2014],{"class":1030},[1002,126147,126148],{"class":1004,"line":2017},[1002,126149,1269],{"class":1030},[1002,126151,126152],{"class":1004,"line":2022},[1002,126153,125418],{"class":1030},[1002,126155,126156,126158,126160,126162,126164,126166],{"class":1004,"line":2442},[1002,126157,125423],{"class":1030},[1002,126159,2393],{"class":1015},[1002,126161,2690],{"class":1015},[1002,126163,125430],{"class":1030},[1002,126165,125433],{"class":1026},[1002,126167,17202],{"class":1030},[1002,126169,126170,126172,126174],{"class":1004,"line":2466},[1002,126171,40738],{"class":1030},[1002,126173,125442],{"class":1026},[1002,126175,125445],{"class":1030},[1002,126177,126178,126180,126182],{"class":1004,"line":2471},[1002,126179,40738],{"class":1030},[1002,126181,125452],{"class":1026},[1002,126183,125455],{"class":1030},[1002,126185,126186,126188,126190,126192,126194,126196,126198],{"class":1004,"line":2476},[1002,126187,40738],{"class":1030},[1002,126189,125677],{"class":1026},[1002,126191,1031],{"class":1030},[1002,126193,5654],{"class":1015},[1002,126195,125430],{"class":1030},[1002,126197,125686],{"class":1026},[1002,126199,48328],{"class":1030},[1002,126201,126202,126204,126206,126208,126210,126212,126214],{"class":1004,"line":2481},[1002,126203,40738],{"class":1030},[1002,126205,125677],{"class":1026},[1002,126207,1031],{"class":1030},[1002,126209,5654],{"class":1015},[1002,126211,125430],{"class":1030},[1002,126213,125956],{"class":1026},[1002,126215,48328],{"class":1030},[1002,126217,126218,126220,126223],{"class":1004,"line":2491},[1002,126219,40738],{"class":1030},[1002,126221,126222],{"class":1026},"setCallback",[1002,126224,126225],{"class":1030},"(myCallback)\n",[1002,126227,126228,126230,126232],{"class":1004,"line":2502},[1002,126229,40738],{"class":1030},[1002,126231,3864],{"class":1026},[1002,126233,1428],{"class":1030},[1002,126235,126236,126238,126240,126242,126244],{"class":1004,"line":2513},[1002,126237,125468],{"class":1030},[1002,126239,125471],{"class":1026},[1002,126241,1031],{"class":1030},[1002,126243,17397],{"class":1019},[1002,126245,1085],{"class":1030},[1002,126247,126248],{"class":1004,"line":2535},[1002,126249,1269],{"class":1030},[1002,126251,126252],{"class":1004,"line":2557},[1002,126253,126254],{"class":1030}," function myCallback(data) {\n",[1002,126256,126257],{"class":1004,"line":2562},[1002,126258,1051],{"emptyLinePlaceholder":1050},[1002,126260,126261],{"class":1004,"line":2567},[1002,126262,1269],{"class":1030},[1002,126264,126265,126267,126269],{"class":1004,"line":2572},[1002,126266,22437],{"class":1030},[1002,126268,22063],{"class":15711},[1002,126270,15703],{"class":1030},[1002,126272,126273,126275,126277,126279,126281,126283,126285,126287],{"class":1004,"line":2582},[1002,126274,6539],{"class":1030},[1002,126276,22063],{"class":15711},[1002,126278,15242],{"class":1026},[1002,126280,2393],{"class":1015},[1002,126282,124680],{"class":1034},[1002,126284,22081],{"class":1030},[1002,126286,22063],{"class":15711},[1002,126288,15703],{"class":1030},[953,126290,126012],{"id":126291},"setting-a-callback-function-1",[925,126293,126015],{},[925,126295,126018],{},[925,126297,126298],{},[941,126299,997],{},[953,126301,126303],{"id":126302},"accessing-file-metadata","Accessing File Metadata",[925,126305,126306],{},"What good is a callback function if it doesn't do anything?",[925,126308,126309],{},"Update myCallback to alert the name of the first file passed in.",[925,126311,126312,126313,126316],{},"[code 1=\"myCallback(data)\" 2=\"{\" 3=\"alert(data.docs",[1002,126314,126315],{},"0\" language=\"function\"",".name);\n}",[993,126318,126321],{"className":126319,"code":126320,"language":24241},[24239],"\n## Handling Picker Actions\n\nThe callback function gets triggered when an event occurs in the Picker, not just selecting files.\n\nUpdate myCallback to only alert the file name if the user clicked Select in the Picker modal.\n\n```js\nfunction myCallback(data) {\n if(data.action == google.picker.Action.PICKED) {\n alert(data.docs[0].name);\n }\n}\n",[941,126322,126320],{"__ignoreMap":998},[953,126324,126326],{"id":126325},"handling-picker-actions-part-2","Handling Picker Actions, Part 2",[925,126328,126329],{},"Remember, multiple events can trigger the callback function, so we need to react differently based on what event occurred.",[925,126331,126332],{},"Update myCallback to alert goodbye when the user clicks the Cancel button.",[993,126334,126336],{"className":995,"code":126335,"language":997,"meta":998,"style":998},"function myCallback(data) {\n if (data.action == google.picker.Action.PICKED) {\n alert(data.docs[0].name);\n } else if (data.action == google.picker.Action.CANCEL) {\n alert('goodbye');\n }\n}\n",[941,126337,126338,126351,126368,126380,126399,126410,126414],{"__ignoreMap":998},[1002,126339,126340,126342,126345,126347,126349],{"class":1004,"line":1005},[1002,126341,6965],{"class":1015},[1002,126343,126344],{"class":1026}," myCallback",[1002,126346,1031],{"class":1030},[1002,126348,16648],{"class":2378},[1002,126350,2382],{"class":1030},[1002,126352,126353,126355,126358,126360,126363,126366],{"class":1004,"line":1012},[1002,126354,19971],{"class":1015},[1002,126356,126357],{"class":1030}," (data.action ",[1002,126359,87480],{"class":1015},[1002,126361,126362],{"class":1030}," google.picker.Action.",[1002,126364,126365],{"class":1019},"PICKED",[1002,126367,2382],{"class":1030},[1002,126369,126370,126372,126375,126377],{"class":1004,"line":1047},[1002,126371,93191],{"class":1026},[1002,126373,126374],{"class":1030},"(data.docs[",[1002,126376,5867],{"class":1019},[1002,126378,126379],{"class":1030},"].name);\n",[1002,126381,126382,126384,126386,126388,126390,126392,126394,126397],{"class":1004,"line":1054},[1002,126383,30770],{"class":1030},[1002,126385,6060],{"class":1015},[1002,126387,6063],{"class":1015},[1002,126389,126357],{"class":1030},[1002,126391,87480],{"class":1015},[1002,126393,126362],{"class":1030},[1002,126395,126396],{"class":1019},"CANCEL",[1002,126398,2382],{"class":1030},[1002,126400,126401,126403,126405,126408],{"class":1004,"line":1060},[1002,126402,93191],{"class":1026},[1002,126404,1031],{"class":1030},[1002,126406,126407],{"class":1034},"'goodbye'",[1002,126409,1085],{"class":1030},[1002,126411,126412],{"class":1004,"line":1272},[1002,126413,1269],{"class":1030},[1002,126415,126416],{"class":1004,"line":1348},[1002,126417,1170],{"class":1030},[953,126419,126421],{"id":126420},"enabling-new-features","Enabling New Features",[925,126423,126424],{},"In this particular Picker example, we only have one view, so the navigation sidebar isn't necessary. Fortunately, there's a feature we can enable that hides the navigation.",[925,126426,126427],{},"Update the Picker so that the navigation is hidden.",[993,126429,126431],{"className":995,"code":126430,"language":997,"meta":998,"style":998},"function setupPicker() {\n var picker = new google.picker.PickerBuilder()\n .setOAuthToken(accessToken)\n .setDeveloperKey(developerKey)\n .addView(new google.picker.DocsUploadView())\n .enableFeature(google.picker.Feature.NAV_HIDDEN)\n .setCallback(myCallback)\n .build();\n picker.setVisible(true);\n}\n",[941,126432,126433,126442,126459,126467,126475,126491,126506,126514,126522,126535],{"__ignoreMap":998},[1002,126434,126435,126437,126440],{"class":1004,"line":1005},[1002,126436,6965],{"class":1015},[1002,126438,126439],{"class":1026}," setupPicker",[1002,126441,3025],{"class":1030},[1002,126443,126444,126446,126449,126451,126453,126455,126457],{"class":1004,"line":1012},[1002,126445,28293],{"class":1015},[1002,126447,126448],{"class":1030}," picker ",[1002,126450,2393],{"class":1015},[1002,126452,2690],{"class":1015},[1002,126454,125430],{"class":1030},[1002,126456,125433],{"class":1026},[1002,126458,17202],{"class":1030},[1002,126460,126461,126463,126465],{"class":1004,"line":1047},[1002,126462,30624],{"class":1030},[1002,126464,125442],{"class":1026},[1002,126466,125445],{"class":1030},[1002,126468,126469,126471,126473],{"class":1004,"line":1054},[1002,126470,30624],{"class":1030},[1002,126472,125452],{"class":1026},[1002,126474,125455],{"class":1030},[1002,126476,126477,126479,126481,126483,126485,126487,126489],{"class":1004,"line":1060},[1002,126478,30624],{"class":1030},[1002,126480,125677],{"class":1026},[1002,126482,1031],{"class":1030},[1002,126484,5654],{"class":1015},[1002,126486,125430],{"class":1030},[1002,126488,125686],{"class":1026},[1002,126490,48328],{"class":1030},[1002,126492,126493,126495,126498,126501,126504],{"class":1004,"line":1272},[1002,126494,30624],{"class":1030},[1002,126496,126497],{"class":1026},"enableFeature",[1002,126499,126500],{"class":1030},"(google.picker.Feature.",[1002,126502,126503],{"class":1019},"NAV_HIDDEN",[1002,126505,3808],{"class":1030},[1002,126507,126508,126510,126512],{"class":1004,"line":1348},[1002,126509,30624],{"class":1030},[1002,126511,126222],{"class":1026},[1002,126513,126225],{"class":1030},[1002,126515,126516,126518,126520],{"class":1004,"line":1354},[1002,126517,30624],{"class":1030},[1002,126519,3864],{"class":1026},[1002,126521,1428],{"class":1030},[1002,126523,126524,126527,126529,126531,126533],{"class":1004,"line":1360},[1002,126525,126526],{"class":1030}," picker.",[1002,126528,125471],{"class":1026},[1002,126530,1031],{"class":1030},[1002,126532,17397],{"class":1019},[1002,126534,1085],{"class":1030},[1002,126536,126537],{"class":1004,"line":1366},[1002,126538,1170],{"class":1030},[925,126540,126541],{},"Final source code:",[993,126543,126545],{"className":995,"code":126544,"language":997,"meta":998,"style":998},"\u003Cscript>\n var clientId = '720409271749-hqv3lb4u0q82t68vperem5oi3kosskol.apps.googleusercontent.com';\n var developerKey = 'AIzaSyBTEWsJ4aXdoOzB4ey81eX9-ja7HejL4Qc';\n var accessToken;\n function onApiLoad() {\n gapi.load('auth', authenticateWithGoogle);\n gapi.load('picker');\n }\n function authenticateWithGoogle() {\n window.gapi.auth.authorize({\n 'client_id': clientId,\n 'scope': ['https:\u002F\u002Fwww.googleapis.com\u002Fauth\u002Fdrive']\n }, handleAuthentication);\n }\n function handleAuthentication(result) {\n if(result && !result.error) {\n accessToken = result.access_token;\n setupPicker();\n }\n }\n function setupPicker() {\n var picker = new google.picker.PickerBuilder()\n .setOAuthToken(accessToken)\n .setDeveloperKey(developerKey)\n .addView(new google.picker.DocsUploadView())\n .enableFeature(google.picker.Feature.NAV_HIDDEN)\n .setCallback(myCallback)\n .build();\n picker.setVisible(true);\n }\n function myCallback(data) {\n if (data.action == google.picker.Action.PICKED) {\n alert(data.docs[0].name);\n } else if (data.action == google.picker.Action.CANCEL) {\n alert('goodbye');\n }\n }\n\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fapis.google.com\u002Fjs\u002Fapi.js?onload=onApiLoad\">\u003C\u002Fscript>\n",[941,126546,126547,126555,126559,126563,126567,126571,126583,126595,126599,126603,126611,126617,126627,126631,126635,126639,126651,126659,126665,126669,126673,126677,126691,126699,126707,126723,126735,126743,126751,126763,126767,126771,126785,126795,126812,126822,126826,126830,126838],{"__ignoreMap":998},[1002,126548,126549,126551,126553],{"class":1004,"line":1005},[1002,126550,6539],{"class":1030},[1002,126552,22063],{"class":15711},[1002,126554,15703],{"class":1030},[1002,126556,126557],{"class":1004,"line":1012},[1002,126558,125006],{"class":1030},[1002,126560,126561],{"class":1004,"line":1047},[1002,126562,125297],{"class":1030},[1002,126564,126565],{"class":1004,"line":1054},[1002,126566,125138],{"class":1030},[1002,126568,126569],{"class":1004,"line":1060},[1002,126570,124627],{"class":1030},[1002,126572,126573,126575,126577,126579,126581],{"class":1004,"line":1272},[1002,126574,124632],{"class":1030},[1002,126576,124635],{"class":1026},[1002,126578,1031],{"class":1030},[1002,126580,124640],{"class":1034},[1002,126582,125023],{"class":1030},[1002,126584,126585,126587,126589,126591,126593],{"class":1004,"line":1348},[1002,126586,124632],{"class":1030},[1002,126588,124635],{"class":1026},[1002,126590,1031],{"class":1030},[1002,126592,124653],{"class":1034},[1002,126594,1085],{"class":1030},[1002,126596,126597],{"class":1004,"line":1354},[1002,126598,1269],{"class":1030},[1002,126600,126601],{"class":1004,"line":1360},[1002,126602,124943],{"class":1030},[1002,126604,126605,126607,126609],{"class":1004,"line":1366},[1002,126606,125048],{"class":1030},[1002,126608,124762],{"class":1026},[1002,126610,2756],{"class":1030},[1002,126612,126613,126615],{"class":1004,"line":1946},[1002,126614,125057],{"class":1034},[1002,126616,125060],{"class":1030},[1002,126618,126619,126621,126623,126625],{"class":1004,"line":1956},[1002,126620,125065],{"class":1034},[1002,126622,1201],{"class":1030},[1002,126624,124786],{"class":1034},[1002,126626,1207],{"class":1030},[1002,126628,126629],{"class":1004,"line":1961},[1002,126630,125366],{"class":1030},[1002,126632,126633],{"class":1004,"line":1971},[1002,126634,1269],{"class":1030},[1002,126636,126637],{"class":1004,"line":1980},[1002,126638,125375],{"class":1030},[1002,126640,126641,126643,126645,126647,126649],{"class":1004,"line":1985},[1002,126642,4368],{"class":1026},[1002,126644,125382],{"class":1030},[1002,126646,13133],{"class":1015},[1002,126648,32289],{"class":1015},[1002,126650,125389],{"class":1030},[1002,126652,126653,126655,126657],{"class":1004,"line":1995},[1002,126654,125230],{"class":1030},[1002,126656,2393],{"class":1015},[1002,126658,125398],{"class":1030},[1002,126660,126661,126663],{"class":1004,"line":2006},[1002,126662,125403],{"class":1026},[1002,126664,1428],{"class":1030},[1002,126666,126667],{"class":1004,"line":2011},[1002,126668,2014],{"class":1030},[1002,126670,126671],{"class":1004,"line":2017},[1002,126672,1269],{"class":1030},[1002,126674,126675],{"class":1004,"line":2022},[1002,126676,125418],{"class":1030},[1002,126678,126679,126681,126683,126685,126687,126689],{"class":1004,"line":2442},[1002,126680,125423],{"class":1030},[1002,126682,2393],{"class":1015},[1002,126684,2690],{"class":1015},[1002,126686,125430],{"class":1030},[1002,126688,125433],{"class":1026},[1002,126690,17202],{"class":1030},[1002,126692,126693,126695,126697],{"class":1004,"line":2466},[1002,126694,40738],{"class":1030},[1002,126696,125442],{"class":1026},[1002,126698,125445],{"class":1030},[1002,126700,126701,126703,126705],{"class":1004,"line":2471},[1002,126702,40738],{"class":1030},[1002,126704,125452],{"class":1026},[1002,126706,125455],{"class":1030},[1002,126708,126709,126711,126713,126715,126717,126719,126721],{"class":1004,"line":2476},[1002,126710,40738],{"class":1030},[1002,126712,125677],{"class":1026},[1002,126714,1031],{"class":1030},[1002,126716,5654],{"class":1015},[1002,126718,125430],{"class":1030},[1002,126720,125686],{"class":1026},[1002,126722,48328],{"class":1030},[1002,126724,126725,126727,126729,126731,126733],{"class":1004,"line":2481},[1002,126726,40738],{"class":1030},[1002,126728,126497],{"class":1026},[1002,126730,126500],{"class":1030},[1002,126732,126503],{"class":1019},[1002,126734,3808],{"class":1030},[1002,126736,126737,126739,126741],{"class":1004,"line":2491},[1002,126738,40738],{"class":1030},[1002,126740,126222],{"class":1026},[1002,126742,126225],{"class":1030},[1002,126744,126745,126747,126749],{"class":1004,"line":2502},[1002,126746,40738],{"class":1030},[1002,126748,3864],{"class":1026},[1002,126750,1428],{"class":1030},[1002,126752,126753,126755,126757,126759,126761],{"class":1004,"line":2513},[1002,126754,125468],{"class":1030},[1002,126756,125471],{"class":1026},[1002,126758,1031],{"class":1030},[1002,126760,17397],{"class":1019},[1002,126762,1085],{"class":1030},[1002,126764,126765],{"class":1004,"line":2535},[1002,126766,1269],{"class":1030},[1002,126768,126769],{"class":1004,"line":2557},[1002,126770,126254],{"class":1030},[1002,126772,126773,126775,126777,126779,126781,126783],{"class":1004,"line":2562},[1002,126774,4368],{"class":1026},[1002,126776,126357],{"class":1030},[1002,126778,87480],{"class":1015},[1002,126780,126362],{"class":1030},[1002,126782,126365],{"class":1019},[1002,126784,2382],{"class":1030},[1002,126786,126787,126789,126791,126793],{"class":1004,"line":2567},[1002,126788,20814],{"class":1026},[1002,126790,126374],{"class":1030},[1002,126792,5867],{"class":1019},[1002,126794,126379],{"class":1030},[1002,126796,126797,126800,126802,126804,126806,126808,126810],{"class":1004,"line":2572},[1002,126798,126799],{"class":1030}," } else ",[1002,126801,46126],{"class":1026},[1002,126803,126357],{"class":1030},[1002,126805,87480],{"class":1015},[1002,126807,126362],{"class":1030},[1002,126809,126396],{"class":1019},[1002,126811,2382],{"class":1030},[1002,126813,126814,126816,126818,126820],{"class":1004,"line":2582},[1002,126815,20814],{"class":1026},[1002,126817,1031],{"class":1030},[1002,126819,126407],{"class":1034},[1002,126821,1085],{"class":1030},[1002,126823,126824],{"class":1004,"line":2594},[1002,126825,2014],{"class":1030},[1002,126827,126828],{"class":1004,"line":2603},[1002,126829,1269],{"class":1030},[1002,126831,126832,126834,126836],{"class":1004,"line":2619},[1002,126833,22437],{"class":1030},[1002,126835,22063],{"class":15711},[1002,126837,15703],{"class":1030},[1002,126839,126840,126842,126844,126846,126848,126850,126852,126854],{"class":1004,"line":2633},[1002,126841,6539],{"class":1030},[1002,126843,22063],{"class":15711},[1002,126845,15242],{"class":1026},[1002,126847,2393],{"class":1015},[1002,126849,124680],{"class":1034},[1002,126851,22081],{"class":1030},[1002,126853,22063],{"class":15711},[1002,126855,15703],{"class":1030},[1579,126857,126858],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":126860},[126861,126862,126863,126864,126865,126866,126867,126868,126869,126870,126871,126872,126873,126874,126875,126876,126877,126878,126879,126880],{"id":124452,"depth":1012,"text":124453},{"id":124479,"depth":1012,"text":112965},{"id":112959,"depth":1012,"text":112960},{"id":124517,"depth":1012,"text":124518},{"id":112998,"depth":1012,"text":112999},{"id":124529,"depth":1012,"text":124530},{"id":124539,"depth":1012,"text":124540},{"id":124605,"depth":1012,"text":124606},{"id":124689,"depth":1012,"text":124690},{"id":124808,"depth":1012,"text":124809},{"id":124883,"depth":1012,"text":124884},{"id":124976,"depth":1012,"text":124977},{"id":125108,"depth":1012,"text":125109},{"id":125271,"depth":1012,"text":125272},{"id":125510,"depth":1012,"text":125511},{"id":126011,"depth":1012,"text":126012},{"id":126291,"depth":1012,"text":126012},{"id":126302,"depth":1012,"text":126303},{"id":126325,"depth":1012,"text":126326},{"id":126420,"depth":1012,"text":126421},"2014-09-04","\u002Fimages\u002Fblog\u002Ffeatures\u002Fgoogle-picker-with-drive.jpg",{},{"title":341,"description":343},"blog\u002Fgoogle-picker-with-drive",[16,17],"kFmcsFc_B60vDOcuwRBwXeSH7vEXgA5_JLFtYM26Ris",{"id":126889,"title":169,"author":920,"body":126890,"date":128605,"description":171,"extension":1591,"image":128606,"meta":128607,"navigation":1050,"path":170,"seo":128608,"stem":128609,"tags":128610,"__hash__":128611},"blog\u002Fblog\u002Fember-handlebars.md",{"type":922,"value":126891,"toc":128577},[126892,126896,126904,126908,126944,126948,126989,126992,126996,126999,127008,127014,127084,127088,127091,127100,127103,127138,127142,127145,127160,127162,127216,127219,127223,127230,127270,127273,127277,127280,127283,127321,127328,127334,127338,127341,127375,127378,127396,127399,127403,127439,127442,127448,127451,127455,127516,127519,127547,127551,127554,127592,127595,127612,127615,127619,127622,127680,127684,127725,127728,127784,127787,127790,127794,127800,127804,127810,127812,127815,127817,127825,127829,127893,127896,127898,127906,127908,127942,127945,127947,127957,127963,127965,127968,127972,128009,128011,128014,128017,128019,128055,128059,128088,128091,128093,128127,128129,128145,128148,128151,128187,128189,128260,128263,128266,128326,128328,128352,128355,128357,128393,128395,128411,128414,128417,128419,128475,128478,128516,128518,128574],[953,126893,126895],{"id":126894},"linking-to-routes","Linking to Routes",[925,126897,126898,126899,2034,126901,126903],{},"Router is solely responsible for all URLs in Ember. Let's inspect the ",[941,126900,47429],{},[941,126902,37877],{}," files.",[925,126905,126906],{},[1107,126907,47429],{},[993,126909,126911],{"className":995,"code":126910,"language":997,"meta":998,"style":998},"App.router.map(function () {\n this.route('about');\n});\n",[941,126912,126913,126926,126940],{"__ignoreMap":998},[1002,126914,126915,126918,126920,126922,126924],{"class":1004,"line":1005},[1002,126916,126917],{"class":1030},"App.router.",[1002,126919,19444],{"class":1026},[1002,126921,1031],{"class":1030},[1002,126923,6965],{"class":1015},[1002,126925,9772],{"class":1030},[1002,126927,126928,126930,126932,126934,126936,126938],{"class":1004,"line":1012},[1002,126929,39364],{"class":1019},[1002,126931,948],{"class":1030},[1002,126933,66565],{"class":1026},[1002,126935,1031],{"class":1030},[1002,126937,67536],{"class":1034},[1002,126939,1085],{"class":1030},[1002,126941,126942],{"class":1004,"line":1047},[1002,126943,2804],{"class":1030},[925,126945,126946],{},[1107,126947,37877],{},[993,126949,126951],{"className":37880,"code":126950,"language":383,"meta":998,"style":998},"\u003Ca href=\"#\">Home\u003C\u002Fa> \u003Ca href=\"#\u002Fabout\">About\u003C\u002Fa>\n",[941,126952,126953],{"__ignoreMap":998},[1002,126954,126955,126957,126959,126961,126963,126966,126969,126971,126974,126976,126978,126980,126983,126985,126987],{"class":1004,"line":1005},[1002,126956,6539],{"class":1030},[1002,126958,933],{"class":15711},[1002,126960,47182],{"class":1026},[1002,126962,2393],{"class":1030},[1002,126964,126965],{"class":1034},"\"#\"",[1002,126967,126968],{"class":1030},">Home\u003C\u002F",[1002,126970,933],{"class":15711},[1002,126972,126973],{"class":1030},"> \u003C",[1002,126975,933],{"class":15711},[1002,126977,47182],{"class":1026},[1002,126979,2393],{"class":1030},[1002,126981,126982],{"class":1034},"\"#\u002Fabout\"",[1002,126984,66899],{"class":1030},[1002,126986,933],{"class":15711},[1002,126988,15703],{"class":1030},[925,126990,126991],{},"It is considered a bad practice to do this. We don't hard code URL paths. Instead, we ask the routes for their path.",[953,126993,126995],{"id":126994},"the-handlebars-link-to-helper","The Handlebars link-to helper",[925,126997,126998],{},"Use the route name to look up the path",[993,127000,127002],{"className":37880,"code":127001,"language":383,"meta":998,"style":998},"{{#link-to 'index'}}Homepage{{\u002Flink-to}} {{#link-to 'about'}}about{{\u002Flink-to}}\n",[941,127003,127004],{"__ignoreMap":998},[1002,127005,127006],{"class":1004,"line":1005},[1002,127007,127001],{"class":1030},[925,127009,3898,127010,127013],{},[1107,127011,127012],{},"link-to"," will determine the path based on the route name. The code above will generate the following HTML:",[993,127015,127017],{"className":37880,"code":127016,"language":383,"meta":998,"style":998},"\u003Ca href=\"#\u002F\" class=\"ember-view\" id=\"ember2\">Homepage\u003C\u002Fa>\n\u003Ca href=\"#\u002Fabout\" class=\"ember-view\" id=\"ember3\">About\u003C\u002Fa>\n",[941,127018,127019,127053],{"__ignoreMap":998},[1002,127020,127021,127023,127025,127027,127029,127032,127034,127036,127039,127041,127043,127046,127049,127051],{"class":1004,"line":1005},[1002,127022,6539],{"class":1030},[1002,127024,933],{"class":15711},[1002,127026,47182],{"class":1026},[1002,127028,2393],{"class":1030},[1002,127030,127031],{"class":1034},"\"#\u002F\"",[1002,127033,17187],{"class":1026},[1002,127035,2393],{"class":1030},[1002,127037,127038],{"class":1034},"\"ember-view\"",[1002,127040,21489],{"class":1026},[1002,127042,2393],{"class":1030},[1002,127044,127045],{"class":1034},"\"ember2\"",[1002,127047,127048],{"class":1030},">Homepage\u003C\u002F",[1002,127050,933],{"class":15711},[1002,127052,15703],{"class":1030},[1002,127054,127055,127057,127059,127061,127063,127065,127067,127069,127071,127073,127075,127078,127080,127082],{"class":1004,"line":1012},[1002,127056,6539],{"class":1030},[1002,127058,933],{"class":15711},[1002,127060,47182],{"class":1026},[1002,127062,2393],{"class":1030},[1002,127064,126982],{"class":1034},[1002,127066,17187],{"class":1026},[1002,127068,2393],{"class":1030},[1002,127070,127038],{"class":1034},[1002,127072,21489],{"class":1026},[1002,127074,2393],{"class":1030},[1002,127076,127077],{"class":1034},"\"ember3\"",[1002,127079,66899],{"class":1030},[1002,127081,933],{"class":15711},[1002,127083,15703],{"class":1030},[1655,127085,127087],{"id":127086},"extra-attributes","Extra Attributes",[925,127089,127090],{},"How to add a custom class to our link.",[993,127092,127094],{"className":37880,"code":127093,"language":383,"meta":998,"style":998},"{{#link-to 'index' class='nav-brand'}Home{{\u002Flink-to}}\n",[941,127095,127096],{"__ignoreMap":998},[1002,127097,127098],{"class":1004,"line":1005},[1002,127099,127093],{"class":1030},[925,127101,127102],{},"The above code will be rendered from template into",[993,127104,127106],{"className":37880,"code":127105,"language":383,"meta":998,"style":998},"\u003Ca href=\"#\u002F\" class=\"ember-view\" id=\"ember2\">Homepage\u003C\u002Fa>\n",[941,127107,127108],{"__ignoreMap":998},[1002,127109,127110,127112,127114,127116,127118,127120,127122,127124,127126,127128,127130,127132,127134,127136],{"class":1004,"line":1005},[1002,127111,6539],{"class":1030},[1002,127113,933],{"class":15711},[1002,127115,47182],{"class":1026},[1002,127117,2393],{"class":1030},[1002,127119,127031],{"class":1034},[1002,127121,17187],{"class":1026},[1002,127123,2393],{"class":1030},[1002,127125,127038],{"class":1034},[1002,127127,21489],{"class":1026},[1002,127129,2393],{"class":1030},[1002,127131,127045],{"class":1034},[1002,127133,127048],{"class":1030},[1002,127135,933],{"class":15711},[1002,127137,15703],{"class":1030},[1655,127139,127141],{"id":127140},"tagname-option","tagName option",[925,127143,127144],{},"How to change the HTML element",[993,127146,127148],{"className":37880,"code":127147,"language":383,"meta":998,"style":998},"{{#link-to 'index' tagName='li'}Home{{\u002Flink-to}} {{#link-to 'about'\ntagName='li'} About{{\u002Flink-to}}\n",[941,127149,127150,127155],{"__ignoreMap":998},[1002,127151,127152],{"class":1004,"line":1005},[1002,127153,127154],{"class":1030},"{{#link-to 'index' tagName='li'}Home{{\u002Flink-to}} {{#link-to 'about'\n",[1002,127156,127157],{"class":1004,"line":1012},[1002,127158,127159],{"class":1030},"tagName='li'} About{{\u002Flink-to}}\n",[925,127161,127102],{},[993,127163,127165],{"className":37880,"code":127164,"language":383,"meta":998,"style":998},"\u003Cli class=\"ember-view\" id=\"ember1\">Home\u003C\u002Fli>\n\u003Cli class=\"ember-view\" id=\"ember2\">About\u003C\u002Fli>\n",[941,127166,127167,127192],{"__ignoreMap":998},[1002,127168,127169,127171,127173,127175,127177,127179,127181,127183,127186,127188,127190],{"class":1004,"line":1005},[1002,127170,6539],{"class":1030},[1002,127172,974],{"class":15711},[1002,127174,17187],{"class":1026},[1002,127176,2393],{"class":1030},[1002,127178,127038],{"class":1034},[1002,127180,21489],{"class":1026},[1002,127182,2393],{"class":1030},[1002,127184,127185],{"class":1034},"\"ember1\"",[1002,127187,126968],{"class":1030},[1002,127189,974],{"class":15711},[1002,127191,15703],{"class":1030},[1002,127193,127194,127196,127198,127200,127202,127204,127206,127208,127210,127212,127214],{"class":1004,"line":1012},[1002,127195,6539],{"class":1030},[1002,127197,974],{"class":15711},[1002,127199,17187],{"class":1026},[1002,127201,2393],{"class":1030},[1002,127203,127038],{"class":1034},[1002,127205,21489],{"class":1026},[1002,127207,2393],{"class":1030},[1002,127209,127045],{"class":1034},[1002,127211,66899],{"class":1030},[1002,127213,974],{"class":15711},[1002,127215,15703],{"class":1030},[925,127217,127218],{},"Notice how href disappeared and now it is a list instead of a link. But the click still works as Ember adds click handlers.",[953,127220,127222],{"id":127221},"template-variables","Template Variables",[925,127224,127225,127226,127229],{},"You can use properties in your template, like the ",[1107,127227,127228],{},"productsCount"," below",[993,127231,127233],{"className":995,"code":127232,"language":997,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fhandlebars\" data-template-name=\"index\">\n There are {{ productsCount }} products\n\u003C\u002Fscript>\n",[941,127234,127235,127257,127262],{"__ignoreMap":998},[1002,127236,127237,127239,127241,127243,127245,127248,127250,127252,127255],{"class":1004,"line":1005},[1002,127238,6539],{"class":1030},[1002,127240,22063],{"class":15711},[1002,127242,29274],{"class":1026},[1002,127244,2393],{"class":1015},[1002,127246,127247],{"class":1034},"\"text\u002Fhandlebars\"",[1002,127249,116486],{"class":1026},[1002,127251,2393],{"class":1015},[1002,127253,127254],{"class":1034},"\"index\"",[1002,127256,15703],{"class":1030},[1002,127258,127259],{"class":1004,"line":1012},[1002,127260,127261],{"class":1030}," There are {{ productsCount }} products\n",[1002,127263,127264,127266,127268],{"class":1004,"line":1047},[1002,127265,22437],{"class":1030},[1002,127267,22063],{"class":15711},[1002,127269,15703],{"class":1030},[925,127271,127272],{},"How do you set a property for use in a template?",[953,127274,127276],{"id":127275},"ember-controller","Ember Controller",[925,127278,127279],{},"Ember COntroller provides properties for the template. Ember Controller is where a template looks to find a property value.\nIt decorates your applications data for the template and\ncontains information that is not saved to a server.",[925,127281,127282],{},"Asking the Controller:",[993,127284,127286],{"className":37880,"code":127285,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"index\">\n There are {{productsCount}} products\n\u003C\u002Fscript>\n",[941,127287,127288,127308,127313],{"__ignoreMap":998},[1002,127289,127290,127292,127294,127296,127298,127300,127302,127304,127306],{"class":1004,"line":1005},[1002,127291,6539],{"class":1030},[1002,127293,22063],{"class":15711},[1002,127295,29274],{"class":1026},[1002,127297,2393],{"class":1030},[1002,127299,116983],{"class":1034},[1002,127301,116486],{"class":1026},[1002,127303,2393],{"class":1030},[1002,127305,127254],{"class":1034},[1002,127307,15703],{"class":1030},[1002,127309,127310],{"class":1004,"line":1012},[1002,127311,127312],{"class":1030}," There are {{productsCount}} products\n",[1002,127314,127315,127317,127319],{"class":1004,"line":1047},[1002,127316,22437],{"class":1030},[1002,127318,22063],{"class":15711},[1002,127320,15703],{"class":1030},[925,127322,127323,127324,127327],{},"Above code looks for a controller named ",[1107,127325,127326],{},"IndexController",", and the property inside it.",[993,127329,127332],{"className":127330,"code":127331,"language":24241},[24239],"App.IndexController = Ember.Controller.extend({\n productsCount: 5\n});\n",[941,127333,127331],{"__ignoreMap":998},[953,127335,127337],{"id":127336},"every-route-has-a-default-controller","Every Route has a Default Controller",[925,127339,127340],{},"Consider the code below:",[993,127342,127343],{"className":995,"code":116551,"language":997,"meta":998,"style":998},[941,127344,127345,127357,127371],{"__ignoreMap":998},[1002,127346,127347,127349,127351,127353,127355],{"class":1004,"line":1005},[1002,127348,116558],{"class":1030},[1002,127350,19444],{"class":1026},[1002,127352,1031],{"class":1030},[1002,127354,6965],{"class":1015},[1002,127356,9772],{"class":1030},[1002,127358,127359,127361,127363,127365,127367,127369],{"class":1004,"line":1012},[1002,127360,39364],{"class":1019},[1002,127362,948],{"class":1030},[1002,127364,66565],{"class":1026},[1002,127366,1031],{"class":1030},[1002,127368,67536],{"class":1034},[1002,127370,1085],{"class":1030},[1002,127372,127373],{"class":1004,"line":1047},[1002,127374,2804],{"class":1030},[925,127376,127377],{},"Behind the scenes, Ember creates this About controller.",[993,127379,127381],{"className":995,"code":127380,"language":997,"meta":998,"style":998},"App.AboutController = Ember.Controller.extend({});\n",[941,127382,127383],{"__ignoreMap":998},[1002,127384,127385,127388,127390,127392,127394],{"class":1004,"line":1005},[1002,127386,127387],{"class":1030},"App.AboutController ",[1002,127389,2393],{"class":1015},[1002,127391,116399],{"class":1030},[1002,127393,106592],{"class":1026},[1002,127395,106724],{"class":1030},[925,127397,127398],{},"If we want to declare properties that get rendered inside a template, then we can declare this Controller.",[953,127400,127402],{"id":127401},"binding-with-metamorph","Binding with Metamorph",[993,127404,127405],{"className":37880,"code":127285,"language":383,"meta":998,"style":998},[941,127406,127407,127427,127431],{"__ignoreMap":998},[1002,127408,127409,127411,127413,127415,127417,127419,127421,127423,127425],{"class":1004,"line":1005},[1002,127410,6539],{"class":1030},[1002,127412,22063],{"class":15711},[1002,127414,29274],{"class":1026},[1002,127416,2393],{"class":1030},[1002,127418,116983],{"class":1034},[1002,127420,116486],{"class":1026},[1002,127422,2393],{"class":1030},[1002,127424,127254],{"class":1034},[1002,127426,15703],{"class":1030},[1002,127428,127429],{"class":1004,"line":1012},[1002,127430,127312],{"class":1030},[1002,127432,127433,127435,127437],{"class":1004,"line":1047},[1002,127434,22437],{"class":1030},[1002,127436,22063],{"class":15711},[1002,127438,15703],{"class":1030},[925,127440,127441],{},"This will render as below:",[993,127443,127446],{"className":127444,"code":127445,"language":24241},[24239],"There are\n \u003Cscript id=\"metamorph-2-start\" type=\"text\u002Fx-placeholder\">\u003C\u002Fscript>\n 5\n \u003Cscript id=\"metamorph-2-end\" type=\"text\u002Fx-placeholder\">\u003C\u002Fscript>\n products\n\n",[941,127447,127445],{"__ignoreMap":998},[925,127449,127450],{},"Ember needs to wrap properties so it can\npotentially update it later. (AKA. Binding)",[953,127452,127454],{"id":127453},"how-to-bind-attributes","How to Bind Attributes",[993,127456,127458],{"className":37880,"code":127457,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"index\">\n There are {{productsCount}} products\n \u003Cimg {{bind-attr src='logo'}} alt='Logo' \u002F>\n\u003C\u002Fscript>\n",[941,127459,127460,127480,127484,127508],{"__ignoreMap":998},[1002,127461,127462,127464,127466,127468,127470,127472,127474,127476,127478],{"class":1004,"line":1005},[1002,127463,6539],{"class":1030},[1002,127465,22063],{"class":15711},[1002,127467,29274],{"class":1026},[1002,127469,2393],{"class":1030},[1002,127471,116983],{"class":1034},[1002,127473,116486],{"class":1026},[1002,127475,2393],{"class":1030},[1002,127477,127254],{"class":1034},[1002,127479,15703],{"class":1030},[1002,127481,127482],{"class":1004,"line":1012},[1002,127483,127312],{"class":1030},[1002,127485,127486,127488,127490,127492,127494,127496,127498,127500,127502,127504,127506],{"class":1004,"line":1047},[1002,127487,22427],{"class":1030},[1002,127489,963],{"class":15711},[1002,127491,117718],{"class":1026},[1002,127493,15242],{"class":1026},[1002,127495,2393],{"class":1030},[1002,127497,116511],{"class":1034},[1002,127499,117727],{"class":1026},[1002,127501,60884],{"class":1026},[1002,127503,2393],{"class":1030},[1002,127505,116522],{"class":1034},[1002,127507,15258],{"class":1030},[1002,127509,127510,127512,127514],{"class":1004,"line":1054},[1002,127511,22437],{"class":1030},[1002,127513,22063],{"class":15711},[1002,127515,15703],{"class":1030},[925,127517,127518],{},"In the rendered html, Ember meta data is still added to enable binding. (data-nindattr-1)",[993,127520,127522],{"className":37880,"code":127521,"language":383,"meta":998,"style":998},"\u003Cimg src=\"\u002Fimages\u002Fblog\u002Flogo.png\" data-bindattr-1=\"1\" \u002F>\n",[941,127523,127524],{"__ignoreMap":998},[1002,127525,127526,127528,127530,127532,127534,127537,127540,127542,127545],{"class":1004,"line":1005},[1002,127527,6539],{"class":1030},[1002,127529,963],{"class":15711},[1002,127531,15242],{"class":1026},[1002,127533,2393],{"class":1030},[1002,127535,127536],{"class":1034},"\"\u002Fimages\u002Fblog\u002Flogo.png\"",[1002,127538,127539],{"class":1026}," data-bindattr-1",[1002,127541,2393],{"class":1030},[1002,127543,127544],{"class":1034},"\"1\"",[1002,127546,15258],{"class":1030},[953,127548,127550],{"id":127549},"dynamic-content","Dynamic Content",[925,127552,127553],{},"How do we fetch the current time?",[993,127555,127557],{"className":37880,"code":127556,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"index\">\n Rendered on {{time}}\n\u003C\u002Fscript>\n",[941,127558,127559,127579,127584],{"__ignoreMap":998},[1002,127560,127561,127563,127565,127567,127569,127571,127573,127575,127577],{"class":1004,"line":1005},[1002,127562,6539],{"class":1030},[1002,127564,22063],{"class":15711},[1002,127566,29274],{"class":1026},[1002,127568,2393],{"class":1030},[1002,127570,116983],{"class":1034},[1002,127572,116486],{"class":1026},[1002,127574,2393],{"class":1030},[1002,127576,127254],{"class":1034},[1002,127578,15703],{"class":1030},[1002,127580,127581],{"class":1004,"line":1012},[1002,127582,127583],{"class":1030}," Rendered on {{time}}\n",[1002,127585,127586,127588,127590],{"class":1004,"line":1047},[1002,127587,22437],{"class":1030},[1002,127589,22063],{"class":15711},[1002,127591,15703],{"class":1030},[925,127593,127594],{},"We need to create a property that calls this function:",[993,127596,127598],{"className":995,"code":127597,"language":997,"meta":998,"style":998},"new Date().toDateString();\n",[941,127599,127600],{"__ignoreMap":998},[1002,127601,127602,127604,127606,127608,127610],{"class":1004,"line":1005},[1002,127603,5654],{"class":1015},[1002,127605,31486],{"class":1026},[1002,127607,12951],{"class":1030},[1002,127609,116446],{"class":1026},[1002,127611,1428],{"class":1030},[925,127613,127614],{},"This is more then just a value, we need to\nexecute some code to get the value.",[953,127616,127618],{"id":127617},"controller-functions","Controller Functions",[925,127620,127621],{},"We need to tell Ember this is a property and to call it",[993,127623,127625],{"className":995,"code":127624,"language":997,"meta":998,"style":998},"App.IndexController = Ember.Controller.extend({\n productsCount: 6,\n logo: '\u002Fimages\u002Fblog\u002Flogo.png',\n time: function () {\n return;\n },\n});\n",[941,127626,127627,127639,127647,127656,127666,127672,127676],{"__ignoreMap":998},[1002,127628,127629,127631,127633,127635,127637],{"class":1004,"line":1005},[1002,127630,116394],{"class":1030},[1002,127632,2393],{"class":1015},[1002,127634,116399],{"class":1030},[1002,127636,106592],{"class":1026},[1002,127638,2756],{"class":1030},[1002,127640,127641,127643,127645],{"class":1004,"line":1012},[1002,127642,116408],{"class":1030},[1002,127644,51334],{"class":1019},[1002,127646,1143],{"class":1030},[1002,127648,127649,127651,127654],{"class":1004,"line":1047},[1002,127650,116417],{"class":1030},[1002,127652,127653],{"class":1034},"'\u002Fimages\u002Fblog\u002Flogo.png'",[1002,127655,1143],{"class":1030},[1002,127657,127658,127660,127662,127664],{"class":1004,"line":1054},[1002,127659,116427],{"class":1026},[1002,127661,1137],{"class":1030},[1002,127663,6965],{"class":1015},[1002,127665,9772],{"class":1030},[1002,127667,127668,127670],{"class":1004,"line":1060},[1002,127669,2687],{"class":1015},[1002,127671,1407],{"class":1030},[1002,127673,127674],{"class":1004,"line":1272},[1002,127675,1502],{"class":1030},[1002,127677,127678],{"class":1004,"line":1348},[1002,127679,2804],{"class":1030},[953,127681,127683],{"id":127682},"controller-functions-as-properties","Controller Functions as Properties",[993,127685,127687],{"className":37880,"code":127686,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebaaprps.\" js data-template-name=\"index\">\n Rendered on {{time}}\n\u003C\u002Fscript>\n",[941,127688,127689,127713,127717],{"__ignoreMap":998},[1002,127690,127691,127693,127695,127697,127699,127702,127705,127707,127709,127711],{"class":1004,"line":1005},[1002,127692,6539],{"class":1030},[1002,127694,22063],{"class":15711},[1002,127696,29274],{"class":1026},[1002,127698,2393],{"class":1030},[1002,127700,127701],{"class":1034},"\"text\u002Fx-handlebaaprps.\"",[1002,127703,127704],{"class":1026}," js",[1002,127706,116486],{"class":1026},[1002,127708,2393],{"class":1030},[1002,127710,127254],{"class":1034},[1002,127712,15703],{"class":1030},[1002,127714,127715],{"class":1004,"line":1012},[1002,127716,127583],{"class":1030},[1002,127718,127719,127721,127723],{"class":1004,"line":1047},[1002,127720,22437],{"class":1030},[1002,127722,22063],{"class":15711},[1002,127724,15703],{"class":1030},[925,127726,127727],{},"time will be called, and that value used as a property",[993,127729,127730],{"className":995,"code":127624,"language":997,"meta":998,"style":998},[941,127731,127732,127744,127752,127760,127770,127776,127780],{"__ignoreMap":998},[1002,127733,127734,127736,127738,127740,127742],{"class":1004,"line":1005},[1002,127735,116394],{"class":1030},[1002,127737,2393],{"class":1015},[1002,127739,116399],{"class":1030},[1002,127741,106592],{"class":1026},[1002,127743,2756],{"class":1030},[1002,127745,127746,127748,127750],{"class":1004,"line":1012},[1002,127747,116408],{"class":1030},[1002,127749,51334],{"class":1019},[1002,127751,1143],{"class":1030},[1002,127753,127754,127756,127758],{"class":1004,"line":1047},[1002,127755,116417],{"class":1030},[1002,127757,127653],{"class":1034},[1002,127759,1143],{"class":1030},[1002,127761,127762,127764,127766,127768],{"class":1004,"line":1054},[1002,127763,116427],{"class":1026},[1002,127765,1137],{"class":1030},[1002,127767,6965],{"class":1015},[1002,127769,9772],{"class":1030},[1002,127771,127772,127774],{"class":1004,"line":1060},[1002,127773,2687],{"class":1015},[1002,127775,1407],{"class":1030},[1002,127777,127778],{"class":1004,"line":1272},[1002,127779,1502],{"class":1030},[1002,127781,127782],{"class":1004,"line":1348},[1002,127783,2804],{"class":1030},[953,127785,126895],{"id":127786},"linking-to-routes-1",[925,127788,127789],{},"Router is solely responsible for all URLs in Ember.",[925,127791,127792],{},[1107,127793,47429],{},[993,127795,127798],{"className":127796,"code":127797,"language":24241},[24239],"App.router.map(function() {\n this.route('about');\n});\n",[941,127799,127797],{"__ignoreMap":998},[925,127801,127802],{},[1107,127803,37877],{},[993,127805,127808],{"className":127806,"code":127807,"language":24241},[24239],"\u003Ca href=\"#\">Home\u003C\u002Fa>\n\u003Ca href=\"#\u002Fabout\">About\u003C\u002Fa>\n",[941,127809,127807],{"__ignoreMap":998},[925,127811,126991],{},[953,127813,126995],{"id":127814},"the-handlebars-link-to-helper-1",[925,127816,126998],{},[993,127818,127819],{"className":37880,"code":127001,"language":383,"meta":998,"style":998},[941,127820,127821],{"__ignoreMap":998},[1002,127822,127823],{"class":1004,"line":1005},[1002,127824,127001],{"class":1030},[925,127826,3898,127827,127013],{},[1107,127828,127012],{},[993,127830,127831],{"className":37880,"code":127016,"language":383,"meta":998,"style":998},[941,127832,127833,127863],{"__ignoreMap":998},[1002,127834,127835,127837,127839,127841,127843,127845,127847,127849,127851,127853,127855,127857,127859,127861],{"class":1004,"line":1005},[1002,127836,6539],{"class":1030},[1002,127838,933],{"class":15711},[1002,127840,47182],{"class":1026},[1002,127842,2393],{"class":1030},[1002,127844,127031],{"class":1034},[1002,127846,17187],{"class":1026},[1002,127848,2393],{"class":1030},[1002,127850,127038],{"class":1034},[1002,127852,21489],{"class":1026},[1002,127854,2393],{"class":1030},[1002,127856,127045],{"class":1034},[1002,127858,127048],{"class":1030},[1002,127860,933],{"class":15711},[1002,127862,15703],{"class":1030},[1002,127864,127865,127867,127869,127871,127873,127875,127877,127879,127881,127883,127885,127887,127889,127891],{"class":1004,"line":1012},[1002,127866,6539],{"class":1030},[1002,127868,933],{"class":15711},[1002,127870,47182],{"class":1026},[1002,127872,2393],{"class":1030},[1002,127874,126982],{"class":1034},[1002,127876,17187],{"class":1026},[1002,127878,2393],{"class":1030},[1002,127880,127038],{"class":1034},[1002,127882,21489],{"class":1026},[1002,127884,2393],{"class":1030},[1002,127886,127077],{"class":1034},[1002,127888,66899],{"class":1030},[1002,127890,933],{"class":15711},[1002,127892,15703],{"class":1030},[1655,127894,127087],{"id":127895},"extra-attributes-1",[925,127897,127090],{},[993,127899,127900],{"className":37880,"code":127093,"language":383,"meta":998,"style":998},[941,127901,127902],{"__ignoreMap":998},[1002,127903,127904],{"class":1004,"line":1005},[1002,127905,127093],{"class":1030},[925,127907,127102],{},[993,127909,127910],{"className":37880,"code":127105,"language":383,"meta":998,"style":998},[941,127911,127912],{"__ignoreMap":998},[1002,127913,127914,127916,127918,127920,127922,127924,127926,127928,127930,127932,127934,127936,127938,127940],{"class":1004,"line":1005},[1002,127915,6539],{"class":1030},[1002,127917,933],{"class":15711},[1002,127919,47182],{"class":1026},[1002,127921,2393],{"class":1030},[1002,127923,127031],{"class":1034},[1002,127925,17187],{"class":1026},[1002,127927,2393],{"class":1030},[1002,127929,127038],{"class":1034},[1002,127931,21489],{"class":1026},[1002,127933,2393],{"class":1030},[1002,127935,127045],{"class":1034},[1002,127937,127048],{"class":1030},[1002,127939,933],{"class":15711},[1002,127941,15703],{"class":1030},[1655,127943,127141],{"id":127944},"tagname-option-1",[925,127946,127144],{},[925,127948,127949,127950,127954],{},"``html`\n",[127951,127952],"binding",{"value":127953},"#link-to 'index' tagName='li'}Home{{\u002Flink-to",[127951,127955],{"value":127956},"#link-to 'about' tagName='li'}\nAbout{{\u002Flink-to",[993,127958,127961],{"className":127959,"code":127960,"language":24241},[24239],"\nThe above code will be rendered from template into\n\n```html\n\u003Cli class=\"ember-view\" id=\"ember1\">Home\n\u003Cli class=\"ember-view\" id=\"ember2\">About\n",[941,127962,127960],{"__ignoreMap":998},[925,127964,127218],{},[953,127966,127222],{"id":127967},"template-variables-1",[925,127969,127225,127970,127229],{},[1107,127971,127228],{},[993,127973,127975],{"className":37880,"code":127974,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fhandlebars\" data-template-name=\"index\">\n There are {{productsCount}} products\n\u003C\u002Fscript>\n",[941,127976,127977,127997,128001],{"__ignoreMap":998},[1002,127978,127979,127981,127983,127985,127987,127989,127991,127993,127995],{"class":1004,"line":1005},[1002,127980,6539],{"class":1030},[1002,127982,22063],{"class":15711},[1002,127984,29274],{"class":1026},[1002,127986,2393],{"class":1030},[1002,127988,127247],{"class":1034},[1002,127990,116486],{"class":1026},[1002,127992,2393],{"class":1030},[1002,127994,127254],{"class":1034},[1002,127996,15703],{"class":1030},[1002,127998,127999],{"class":1004,"line":1012},[1002,128000,127312],{"class":1030},[1002,128002,128003,128005,128007],{"class":1004,"line":1047},[1002,128004,22437],{"class":1030},[1002,128006,22063],{"class":15711},[1002,128008,15703],{"class":1030},[925,128010,127272],{},[953,128012,127276],{"id":128013},"ember-controller-1",[925,128015,128016],{},"Ember COntroller provides properties for the template. Ember Controller is where a template looks to find a property value.\nIt decorates your applications data for the template and contains information that is not saved to a server.",[925,128018,127282],{},[993,128020,128021],{"className":37880,"code":127285,"language":383,"meta":998,"style":998},[941,128022,128023,128043,128047],{"__ignoreMap":998},[1002,128024,128025,128027,128029,128031,128033,128035,128037,128039,128041],{"class":1004,"line":1005},[1002,128026,6539],{"class":1030},[1002,128028,22063],{"class":15711},[1002,128030,29274],{"class":1026},[1002,128032,2393],{"class":1030},[1002,128034,116983],{"class":1034},[1002,128036,116486],{"class":1026},[1002,128038,2393],{"class":1030},[1002,128040,127254],{"class":1034},[1002,128042,15703],{"class":1030},[1002,128044,128045],{"class":1004,"line":1012},[1002,128046,127312],{"class":1030},[1002,128048,128049,128051,128053],{"class":1004,"line":1047},[1002,128050,22437],{"class":1030},[1002,128052,22063],{"class":15711},[1002,128054,15703],{"class":1030},[925,128056,127323,128057,127327],{},[1107,128058,127326],{},[993,128060,128062],{"className":995,"code":128061,"language":997,"meta":998,"style":998},"App.IndexController = Ember.Controller.extend({\n productsCount: 5,\n});\n",[941,128063,128064,128076,128084],{"__ignoreMap":998},[1002,128065,128066,128068,128070,128072,128074],{"class":1004,"line":1005},[1002,128067,116394],{"class":1030},[1002,128069,2393],{"class":1015},[1002,128071,116399],{"class":1030},[1002,128073,106592],{"class":1026},[1002,128075,2756],{"class":1030},[1002,128077,128078,128080,128082],{"class":1004,"line":1012},[1002,128079,116408],{"class":1030},[1002,128081,2859],{"class":1019},[1002,128083,1143],{"class":1030},[1002,128085,128086],{"class":1004,"line":1047},[1002,128087,2804],{"class":1030},[953,128089,127337],{"id":128090},"every-route-has-a-default-controller-1",[925,128092,127340],{},[993,128094,128095],{"className":995,"code":116551,"language":997,"meta":998,"style":998},[941,128096,128097,128109,128123],{"__ignoreMap":998},[1002,128098,128099,128101,128103,128105,128107],{"class":1004,"line":1005},[1002,128100,116558],{"class":1030},[1002,128102,19444],{"class":1026},[1002,128104,1031],{"class":1030},[1002,128106,6965],{"class":1015},[1002,128108,9772],{"class":1030},[1002,128110,128111,128113,128115,128117,128119,128121],{"class":1004,"line":1012},[1002,128112,39364],{"class":1019},[1002,128114,948],{"class":1030},[1002,128116,66565],{"class":1026},[1002,128118,1031],{"class":1030},[1002,128120,67536],{"class":1034},[1002,128122,1085],{"class":1030},[1002,128124,128125],{"class":1004,"line":1047},[1002,128126,2804],{"class":1030},[925,128128,127377],{},[993,128130,128131],{"className":995,"code":127380,"language":997,"meta":998,"style":998},[941,128132,128133],{"__ignoreMap":998},[1002,128134,128135,128137,128139,128141,128143],{"class":1004,"line":1005},[1002,128136,127387],{"class":1030},[1002,128138,2393],{"class":1015},[1002,128140,116399],{"class":1030},[1002,128142,106592],{"class":1026},[1002,128144,106724],{"class":1030},[925,128146,128147],{},"If we want to declare properties that get rendered inside a\ntemplate, then we can declare this Controller.",[953,128149,127402],{"id":128150},"binding-with-metamorph-1",[993,128152,128153],{"className":37880,"code":127285,"language":383,"meta":998,"style":998},[941,128154,128155,128175,128179],{"__ignoreMap":998},[1002,128156,128157,128159,128161,128163,128165,128167,128169,128171,128173],{"class":1004,"line":1005},[1002,128158,6539],{"class":1030},[1002,128160,22063],{"class":15711},[1002,128162,29274],{"class":1026},[1002,128164,2393],{"class":1030},[1002,128166,116983],{"class":1034},[1002,128168,116486],{"class":1026},[1002,128170,2393],{"class":1030},[1002,128172,127254],{"class":1034},[1002,128174,15703],{"class":1030},[1002,128176,128177],{"class":1004,"line":1012},[1002,128178,127312],{"class":1030},[1002,128180,128181,128183,128185],{"class":1004,"line":1047},[1002,128182,22437],{"class":1030},[1002,128184,22063],{"class":15711},[1002,128186,15703],{"class":1030},[925,128188,127441],{},[993,128190,128192],{"className":37880,"code":128191,"language":383,"meta":998,"style":998},"There are\n\u003Cscript id=\"metamorph-2-start\" type=\"text\u002Fx-placeholder\">\u003C\u002Fscript>\n5\n\u003Cscript id=\"metamorph-2-end\" type=\"text\u002Fx-placeholder\">\u003C\u002Fscript>\nproducts\n",[941,128193,128194,128199,128225,128230,128255],{"__ignoreMap":998},[1002,128195,128196],{"class":1004,"line":1005},[1002,128197,128198],{"class":1030},"There are\n",[1002,128200,128201,128203,128205,128207,128209,128212,128214,128216,128219,128221,128223],{"class":1004,"line":1012},[1002,128202,6539],{"class":1030},[1002,128204,22063],{"class":15711},[1002,128206,21489],{"class":1026},[1002,128208,2393],{"class":1030},[1002,128210,128211],{"class":1034},"\"metamorph-2-start\"",[1002,128213,29274],{"class":1026},[1002,128215,2393],{"class":1030},[1002,128217,128218],{"class":1034},"\"text\u002Fx-placeholder\"",[1002,128220,22081],{"class":1030},[1002,128222,22063],{"class":15711},[1002,128224,15703],{"class":1030},[1002,128226,128227],{"class":1004,"line":1047},[1002,128228,128229],{"class":1030},"5\n",[1002,128231,128232,128234,128236,128238,128240,128243,128245,128247,128249,128251,128253],{"class":1004,"line":1054},[1002,128233,6539],{"class":1030},[1002,128235,22063],{"class":15711},[1002,128237,21489],{"class":1026},[1002,128239,2393],{"class":1030},[1002,128241,128242],{"class":1034},"\"metamorph-2-end\"",[1002,128244,29274],{"class":1026},[1002,128246,2393],{"class":1030},[1002,128248,128218],{"class":1034},[1002,128250,22081],{"class":1030},[1002,128252,22063],{"class":15711},[1002,128254,15703],{"class":1030},[1002,128256,128257],{"class":1004,"line":1060},[1002,128258,128259],{"class":1030},"products\n",[925,128261,128262],{},"Ember needs to wrap properties so it can potentially update it later. (AKA. Binding)",[953,128264,127454],{"id":128265},"how-to-bind-attributes-1",[993,128267,128268],{"className":37880,"code":127457,"language":383,"meta":998,"style":998},[941,128269,128270,128290,128294,128318],{"__ignoreMap":998},[1002,128271,128272,128274,128276,128278,128280,128282,128284,128286,128288],{"class":1004,"line":1005},[1002,128273,6539],{"class":1030},[1002,128275,22063],{"class":15711},[1002,128277,29274],{"class":1026},[1002,128279,2393],{"class":1030},[1002,128281,116983],{"class":1034},[1002,128283,116486],{"class":1026},[1002,128285,2393],{"class":1030},[1002,128287,127254],{"class":1034},[1002,128289,15703],{"class":1030},[1002,128291,128292],{"class":1004,"line":1012},[1002,128293,127312],{"class":1030},[1002,128295,128296,128298,128300,128302,128304,128306,128308,128310,128312,128314,128316],{"class":1004,"line":1047},[1002,128297,22427],{"class":1030},[1002,128299,963],{"class":15711},[1002,128301,117718],{"class":1026},[1002,128303,15242],{"class":1026},[1002,128305,2393],{"class":1030},[1002,128307,116511],{"class":1034},[1002,128309,117727],{"class":1026},[1002,128311,60884],{"class":1026},[1002,128313,2393],{"class":1030},[1002,128315,116522],{"class":1034},[1002,128317,15258],{"class":1030},[1002,128319,128320,128322,128324],{"class":1004,"line":1054},[1002,128321,22437],{"class":1030},[1002,128323,22063],{"class":15711},[1002,128325,15703],{"class":1030},[925,128327,127518],{},[993,128329,128330],{"className":37880,"code":127521,"language":383,"meta":998,"style":998},[941,128331,128332],{"__ignoreMap":998},[1002,128333,128334,128336,128338,128340,128342,128344,128346,128348,128350],{"class":1004,"line":1005},[1002,128335,6539],{"class":1030},[1002,128337,963],{"class":15711},[1002,128339,15242],{"class":1026},[1002,128341,2393],{"class":1030},[1002,128343,127536],{"class":1034},[1002,128345,127539],{"class":1026},[1002,128347,2393],{"class":1030},[1002,128349,127544],{"class":1034},[1002,128351,15258],{"class":1030},[953,128353,127550],{"id":128354},"dynamic-content-1",[925,128356,127553],{},[993,128358,128359],{"className":37880,"code":127556,"language":383,"meta":998,"style":998},[941,128360,128361,128381,128385],{"__ignoreMap":998},[1002,128362,128363,128365,128367,128369,128371,128373,128375,128377,128379],{"class":1004,"line":1005},[1002,128364,6539],{"class":1030},[1002,128366,22063],{"class":15711},[1002,128368,29274],{"class":1026},[1002,128370,2393],{"class":1030},[1002,128372,116983],{"class":1034},[1002,128374,116486],{"class":1026},[1002,128376,2393],{"class":1030},[1002,128378,127254],{"class":1034},[1002,128380,15703],{"class":1030},[1002,128382,128383],{"class":1004,"line":1012},[1002,128384,127583],{"class":1030},[1002,128386,128387,128389,128391],{"class":1004,"line":1047},[1002,128388,22437],{"class":1030},[1002,128390,22063],{"class":15711},[1002,128392,15703],{"class":1030},[925,128394,127594],{},[993,128396,128397],{"className":995,"code":127597,"language":997,"meta":998,"style":998},[941,128398,128399],{"__ignoreMap":998},[1002,128400,128401,128403,128405,128407,128409],{"class":1004,"line":1005},[1002,128402,5654],{"class":1015},[1002,128404,31486],{"class":1026},[1002,128406,12951],{"class":1030},[1002,128408,116446],{"class":1026},[1002,128410,1428],{"class":1030},[925,128412,128413],{},"This is more then just a value, we need to execute some code to get the value.",[953,128415,127618],{"id":128416},"controller-functions-1",[925,128418,127621],{},[993,128420,128421],{"className":995,"code":127624,"language":997,"meta":998,"style":998},[941,128422,128423,128435,128443,128451,128461,128467,128471],{"__ignoreMap":998},[1002,128424,128425,128427,128429,128431,128433],{"class":1004,"line":1005},[1002,128426,116394],{"class":1030},[1002,128428,2393],{"class":1015},[1002,128430,116399],{"class":1030},[1002,128432,106592],{"class":1026},[1002,128434,2756],{"class":1030},[1002,128436,128437,128439,128441],{"class":1004,"line":1012},[1002,128438,116408],{"class":1030},[1002,128440,51334],{"class":1019},[1002,128442,1143],{"class":1030},[1002,128444,128445,128447,128449],{"class":1004,"line":1047},[1002,128446,116417],{"class":1030},[1002,128448,127653],{"class":1034},[1002,128450,1143],{"class":1030},[1002,128452,128453,128455,128457,128459],{"class":1004,"line":1054},[1002,128454,116427],{"class":1026},[1002,128456,1137],{"class":1030},[1002,128458,6965],{"class":1015},[1002,128460,9772],{"class":1030},[1002,128462,128463,128465],{"class":1004,"line":1060},[1002,128464,2687],{"class":1015},[1002,128466,1407],{"class":1030},[1002,128468,128469],{"class":1004,"line":1272},[1002,128470,1502],{"class":1030},[1002,128472,128473],{"class":1004,"line":1348},[1002,128474,2804],{"class":1030},[953,128476,127683],{"id":128477},"controller-functions-as-properties-1",[993,128479,128480],{"className":37880,"code":127686,"language":383,"meta":998,"style":998},[941,128481,128482,128504,128508],{"__ignoreMap":998},[1002,128483,128484,128486,128488,128490,128492,128494,128496,128498,128500,128502],{"class":1004,"line":1005},[1002,128485,6539],{"class":1030},[1002,128487,22063],{"class":15711},[1002,128489,29274],{"class":1026},[1002,128491,2393],{"class":1030},[1002,128493,127701],{"class":1034},[1002,128495,127704],{"class":1026},[1002,128497,116486],{"class":1026},[1002,128499,2393],{"class":1030},[1002,128501,127254],{"class":1034},[1002,128503,15703],{"class":1030},[1002,128505,128506],{"class":1004,"line":1012},[1002,128507,127583],{"class":1030},[1002,128509,128510,128512,128514],{"class":1004,"line":1047},[1002,128511,22437],{"class":1030},[1002,128513,22063],{"class":15711},[1002,128515,15703],{"class":1030},[925,128517,127727],{},[993,128519,128520],{"className":995,"code":127624,"language":997,"meta":998,"style":998},[941,128521,128522,128534,128542,128550,128560,128566,128570],{"__ignoreMap":998},[1002,128523,128524,128526,128528,128530,128532],{"class":1004,"line":1005},[1002,128525,116394],{"class":1030},[1002,128527,2393],{"class":1015},[1002,128529,116399],{"class":1030},[1002,128531,106592],{"class":1026},[1002,128533,2756],{"class":1030},[1002,128535,128536,128538,128540],{"class":1004,"line":1012},[1002,128537,116408],{"class":1030},[1002,128539,51334],{"class":1019},[1002,128541,1143],{"class":1030},[1002,128543,128544,128546,128548],{"class":1004,"line":1047},[1002,128545,116417],{"class":1030},[1002,128547,127653],{"class":1034},[1002,128549,1143],{"class":1030},[1002,128551,128552,128554,128556,128558],{"class":1004,"line":1054},[1002,128553,116427],{"class":1026},[1002,128555,1137],{"class":1030},[1002,128557,6965],{"class":1015},[1002,128559,9772],{"class":1030},[1002,128561,128562,128564],{"class":1004,"line":1060},[1002,128563,2687],{"class":1015},[1002,128565,1407],{"class":1030},[1002,128567,128568],{"class":1004,"line":1272},[1002,128569,1502],{"class":1030},[1002,128571,128572],{"class":1004,"line":1348},[1002,128573,2804],{"class":1030},[1579,128575,128576],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":128578},[128579,128580,128584,128585,128586,128587,128588,128589,128590,128591,128592,128593,128597,128598,128599,128600,128601,128602,128603,128604],{"id":126894,"depth":1012,"text":126895},{"id":126994,"depth":1012,"text":126995,"children":128581},[128582,128583],{"id":127086,"depth":1047,"text":127087},{"id":127140,"depth":1047,"text":127141},{"id":127221,"depth":1012,"text":127222},{"id":127275,"depth":1012,"text":127276},{"id":127336,"depth":1012,"text":127337},{"id":127401,"depth":1012,"text":127402},{"id":127453,"depth":1012,"text":127454},{"id":127549,"depth":1012,"text":127550},{"id":127617,"depth":1012,"text":127618},{"id":127682,"depth":1012,"text":127683},{"id":127786,"depth":1012,"text":126895},{"id":127814,"depth":1012,"text":126995,"children":128594},[128595,128596],{"id":127895,"depth":1047,"text":127087},{"id":127944,"depth":1047,"text":127141},{"id":127967,"depth":1012,"text":127222},{"id":128013,"depth":1012,"text":127276},{"id":128090,"depth":1012,"text":127337},{"id":128150,"depth":1012,"text":127402},{"id":128265,"depth":1012,"text":127454},{"id":128354,"depth":1012,"text":127550},{"id":128416,"depth":1012,"text":127618},{"id":128477,"depth":1012,"text":127683},"2014-08-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Fember-handlebars.jpg",{},{"title":169,"description":171},"blog\u002Fember-handlebars",[16,17,173],"HT3Nrlid8YWYQ4B6NfhKnY7-4Tt8lkyiKT6viRmi_Uw",{"id":128613,"title":47,"author":920,"body":128614,"date":129998,"description":49,"extension":1591,"image":129999,"meta":130000,"navigation":1050,"path":48,"seo":130001,"stem":130002,"tags":130003,"__hash__":130004},"blog\u002Fblog\u002Fbackbone-customizing-collections.md",{"type":922,"value":128615,"toc":129990},[128616,128619,128623,128626,128721,128724,128811,128814,128895,128899,128905,128989,129025,129031,129067,129071,129074,129077,129082,129356,129366,129589,129592,129794,129798,129801,129834,129838,129841,129917,129921,129927,129987],[925,128617,128618],{},"Let's assume you have an Appointment application that serves several appointments from a server which you don't have much control of the data.",[953,128620,128622],{"id":128621},"collection-parsing","Collection Parsing",[925,128624,128625],{},"If you want to start paginating appointments instead of just returning all of them when we fetch the Appointments collection, ake a look at the JSON the server is responding with below:",[993,128627,128629],{"className":1120,"code":128628,"language":1122,"meta":998,"style":998},"\u002F\u002F Get \u002Fappointments\n{\n \"per_page\": 10,\n \"page\": 1,\n \"total\": 50,\n \"appointments\": [\n { \"title\": \"Ms. Kate Wilson\", \"cancelled\": false, \"identifier\": 1 }\n ]\n}\n",[941,128630,128631,128636,128640,128651,128662,128673,128680,128713,128717],{"__ignoreMap":998},[1002,128632,128633],{"class":1004,"line":1005},[1002,128634,128635],{"class":1008},"\u002F\u002F Get \u002Fappointments\n",[1002,128637,128638],{"class":1004,"line":1012},[1002,128639,1129],{"class":1030},[1002,128641,128642,128645,128647,128649],{"class":1004,"line":1047},[1002,128643,128644],{"class":1019}," \"per_page\"",[1002,128646,1137],{"class":1030},[1002,128648,4818],{"class":1019},[1002,128650,1143],{"class":1030},[1002,128652,128653,128656,128658,128660],{"class":1004,"line":1054},[1002,128654,128655],{"class":1019}," \"page\"",[1002,128657,1137],{"class":1030},[1002,128659,6211],{"class":1019},[1002,128661,1143],{"class":1030},[1002,128663,128664,128667,128669,128671],{"class":1004,"line":1060},[1002,128665,128666],{"class":1019}," \"total\"",[1002,128668,1137],{"class":1030},[1002,128670,4800],{"class":1019},[1002,128672,1143],{"class":1030},[1002,128674,128675,128678],{"class":1004,"line":1272},[1002,128676,128677],{"class":1019}," \"appointments\"",[1002,128679,1319],{"class":1030},[1002,128681,128682,128685,128688,128690,128693,128695,128698,128700,128702,128704,128707,128709,128711],{"class":1004,"line":1348},[1002,128683,128684],{"class":1030}," { ",[1002,128686,128687],{"class":1019},"\"title\"",[1002,128689,1137],{"class":1030},[1002,128691,128692],{"class":1034},"\"Ms. Kate Wilson\"",[1002,128694,1251],{"class":1030},[1002,128696,128697],{"class":1019},"\"cancelled\"",[1002,128699,1137],{"class":1030},[1002,128701,19341],{"class":1019},[1002,128703,1251],{"class":1030},[1002,128705,128706],{"class":1019},"\"identifier\"",[1002,128708,1137],{"class":1030},[1002,128710,6211],{"class":1019},[1002,128712,71668],{"class":1030},[1002,128714,128715],{"class":1004,"line":1354},[1002,128716,1363],{"class":1030},[1002,128718,128719],{"class":1004,"line":1360},[1002,128720,1170],{"class":1030},[925,128722,128723],{},"Let's modify the parse function to set properties on the collection instance for per_page, total, and page.",[993,128725,128727],{"className":995,"code":128726,"language":997,"meta":998,"style":998},"var Appointments = Backbone.Collection.extend({\n parse: function (response) {\n this.perPage = response.per_page;\n this.page = response.page;\n this.total = response.total;\n return response.appointments;\n },\n});\n",[941,128728,128729,128745,128760,128772,128784,128796,128803,128807],{"__ignoreMap":998},[1002,128730,128731,128733,128736,128738,128741,128743],{"class":1004,"line":1005},[1002,128732,18311],{"class":1015},[1002,128734,128735],{"class":1030}," Appointments ",[1002,128737,2393],{"class":1015},[1002,128739,128740],{"class":1030}," Backbone.Collection.",[1002,128742,106592],{"class":1026},[1002,128744,2756],{"class":1030},[1002,128746,128747,128750,128752,128754,128756,128758],{"class":1004,"line":1012},[1002,128748,128749],{"class":1026}," parse",[1002,128751,1137],{"class":1030},[1002,128753,6965],{"class":1015},[1002,128755,6513],{"class":1030},[1002,128757,28368],{"class":2378},[1002,128759,2382],{"class":1030},[1002,128761,128762,128764,128767,128769],{"class":1004,"line":1047},[1002,128763,2387],{"class":1019},[1002,128765,128766],{"class":1030},".perPage ",[1002,128768,2393],{"class":1015},[1002,128770,128771],{"class":1030}," response.per_page;\n",[1002,128773,128774,128776,128779,128781],{"class":1004,"line":1054},[1002,128775,2387],{"class":1019},[1002,128777,128778],{"class":1030},".page ",[1002,128780,2393],{"class":1015},[1002,128782,128783],{"class":1030}," response.page;\n",[1002,128785,128786,128788,128791,128793],{"class":1004,"line":1060},[1002,128787,2387],{"class":1019},[1002,128789,128790],{"class":1030},".total ",[1002,128792,2393],{"class":1015},[1002,128794,128795],{"class":1030}," response.total;\n",[1002,128797,128798,128800],{"class":1004,"line":1272},[1002,128799,2687],{"class":1015},[1002,128801,128802],{"class":1030}," response.appointments;\n",[1002,128804,128805],{"class":1004,"line":1348},[1002,128806,1502],{"class":1030},[1002,128808,128809],{"class":1004,"line":1354},[1002,128810,2804],{"class":1030},[925,128812,128813],{},"Great! Now to finish the job, just return the appointments array from the parse function, instead of the entire response.",[993,128815,128817],{"className":995,"code":128816,"language":997,"meta":998,"style":998},"var Appointments = Backbone.Collection.extend({\n parse: function (response) {\n this.perPage = response.per_page;\n this.page = response.page;\n this.total = response.total;\n\n return response.appointments;\n },\n});\n",[941,128818,128819,128833,128847,128857,128867,128877,128881,128887,128891],{"__ignoreMap":998},[1002,128820,128821,128823,128825,128827,128829,128831],{"class":1004,"line":1005},[1002,128822,18311],{"class":1015},[1002,128824,128735],{"class":1030},[1002,128826,2393],{"class":1015},[1002,128828,128740],{"class":1030},[1002,128830,106592],{"class":1026},[1002,128832,2756],{"class":1030},[1002,128834,128835,128837,128839,128841,128843,128845],{"class":1004,"line":1012},[1002,128836,128749],{"class":1026},[1002,128838,1137],{"class":1030},[1002,128840,6965],{"class":1015},[1002,128842,6513],{"class":1030},[1002,128844,28368],{"class":2378},[1002,128846,2382],{"class":1030},[1002,128848,128849,128851,128853,128855],{"class":1004,"line":1047},[1002,128850,2387],{"class":1019},[1002,128852,128766],{"class":1030},[1002,128854,2393],{"class":1015},[1002,128856,128771],{"class":1030},[1002,128858,128859,128861,128863,128865],{"class":1004,"line":1054},[1002,128860,2387],{"class":1019},[1002,128862,128778],{"class":1030},[1002,128864,2393],{"class":1015},[1002,128866,128783],{"class":1030},[1002,128868,128869,128871,128873,128875],{"class":1004,"line":1060},[1002,128870,2387],{"class":1019},[1002,128872,128790],{"class":1030},[1002,128874,2393],{"class":1015},[1002,128876,128795],{"class":1030},[1002,128878,128879],{"class":1004,"line":1272},[1002,128880,1051],{"emptyLinePlaceholder":1050},[1002,128882,128883,128885],{"class":1004,"line":1348},[1002,128884,2687],{"class":1015},[1002,128886,128802],{"class":1030},[1002,128888,128889],{"class":1004,"line":1354},[1002,128890,1502],{"class":1030},[1002,128892,128893],{"class":1004,"line":1360},[1002,128894,2804],{"class":1030},[953,128896,128898],{"id":128897},"how-do-we-fetch-with-extra-params","How do we fetch with extra params?",[925,128900,128901,128902],{},"Assume that the server team has implemented a feature for limiting the appointments pulled down based on the appointment date. In the code below, update the fetch call to pass an extra param so that the URL is like: ",[1107,128903,128904],{},"\u002Fappointments?since=2013-01-01",[993,128906,128907],{"className":1120,"code":128628,"language":1122,"meta":998,"style":998},[941,128908,128909,128913,128917,128927,128937,128947,128953,128981,128985],{"__ignoreMap":998},[1002,128910,128911],{"class":1004,"line":1005},[1002,128912,128635],{"class":1008},[1002,128914,128915],{"class":1004,"line":1012},[1002,128916,1129],{"class":1030},[1002,128918,128919,128921,128923,128925],{"class":1004,"line":1047},[1002,128920,128644],{"class":1019},[1002,128922,1137],{"class":1030},[1002,128924,4818],{"class":1019},[1002,128926,1143],{"class":1030},[1002,128928,128929,128931,128933,128935],{"class":1004,"line":1054},[1002,128930,128655],{"class":1019},[1002,128932,1137],{"class":1030},[1002,128934,6211],{"class":1019},[1002,128936,1143],{"class":1030},[1002,128938,128939,128941,128943,128945],{"class":1004,"line":1060},[1002,128940,128666],{"class":1019},[1002,128942,1137],{"class":1030},[1002,128944,4800],{"class":1019},[1002,128946,1143],{"class":1030},[1002,128948,128949,128951],{"class":1004,"line":1272},[1002,128950,128677],{"class":1019},[1002,128952,1319],{"class":1030},[1002,128954,128955,128957,128959,128961,128963,128965,128967,128969,128971,128973,128975,128977,128979],{"class":1004,"line":1348},[1002,128956,128684],{"class":1030},[1002,128958,128687],{"class":1019},[1002,128960,1137],{"class":1030},[1002,128962,128692],{"class":1034},[1002,128964,1251],{"class":1030},[1002,128966,128697],{"class":1019},[1002,128968,1137],{"class":1030},[1002,128970,19341],{"class":1019},[1002,128972,1251],{"class":1030},[1002,128974,128706],{"class":1019},[1002,128976,1137],{"class":1030},[1002,128978,6211],{"class":1019},[1002,128980,71668],{"class":1030},[1002,128982,128983],{"class":1004,"line":1354},[1002,128984,1363],{"class":1030},[1002,128986,128987],{"class":1004,"line":1360},[1002,128988,1170],{"class":1030},[993,128990,128992],{"className":995,"code":128991,"language":997,"meta":998,"style":998},"var appointments = new Appointments();\nappointments.fetch({ data: { since: '2013-01-01' } });\n",[941,128993,128994,129010],{"__ignoreMap":998},[1002,128995,128996,128998,129001,129003,129005,129008],{"class":1004,"line":1005},[1002,128997,18311],{"class":1015},[1002,128999,129000],{"class":1030}," appointments ",[1002,129002,2393],{"class":1015},[1002,129004,2690],{"class":1015},[1002,129006,129007],{"class":1026}," Appointments",[1002,129009,1428],{"class":1030},[1002,129011,129012,129015,129017,129020,129023],{"class":1004,"line":1012},[1002,129013,129014],{"class":1030},"appointments.",[1002,129016,49123],{"class":1026},[1002,129018,129019],{"class":1030},"({ data: { since: ",[1002,129021,129022],{"class":1034},"'2013-01-01'",[1002,129024,24638],{"class":1030},[925,129026,129027,129028],{},"We can limit the number of appointments returned by passing in a per_page parameter also. Go ahead and construct the fetch call below to create a URL that looks like ",[1107,129029,129030],{},"\u002Fappointments?since=2013-01-01&per_page=10",[993,129032,129034],{"className":995,"code":129033,"language":997,"meta":998,"style":998},"var appointments = new Appointments();\nappointments.fetch({ data: { since: '2013-01-01', per_page: 10 } });\n",[941,129035,129036,129050],{"__ignoreMap":998},[1002,129037,129038,129040,129042,129044,129046,129048],{"class":1004,"line":1005},[1002,129039,18311],{"class":1015},[1002,129041,129000],{"class":1030},[1002,129043,2393],{"class":1015},[1002,129045,2690],{"class":1015},[1002,129047,129007],{"class":1026},[1002,129049,1428],{"class":1030},[1002,129051,129052,129054,129056,129058,129060,129063,129065],{"class":1004,"line":1012},[1002,129053,129014],{"class":1030},[1002,129055,49123],{"class":1026},[1002,129057,129019],{"class":1030},[1002,129059,129022],{"class":1034},[1002,129061,129062],{"class":1030},", per_page: ",[1002,129064,4818],{"class":1019},[1002,129066,24638],{"class":1030},[953,129068,129070],{"id":129069},"render-the-next-link","Render the Next Link",[925,129072,129073],{},"Your client has requested that we add a link to the application that will show the next 10 appointments. Luckily we already can paginate through appointments bypassing the per_page and page params to the server when we fetch the collection.",[925,129075,129076],{},"Let's start to implement this feature by adding a template to the AppointmentListView below. The template should have a link that looks like this:",[925,129078,129079],{},[941,129080,129081],{},"\u002Fappointments\u002Fp\u003C%= page %>\u002Fpp\u003C%= per_page %>\">View Next\u003C\u002Fa>",[993,129083,129085],{"className":995,"code":129084,"language":997,"meta":998,"style":998},"\u002F\u002F AppointmentList.js\nvar AppointmentList = Backbone.Collection.extend({\n parse: function (response) {\n this.per_page = response.per_page;\n this.page = response.page;\n this.total = response.total;\n\n return response.appointments;\n },\n});\n\nvar AppointmentListView = Backbone.View.extend({\n initialize: function () {\n this.collection.on('reset', this.render, this);\n },\n render: function () {\n this.$el.empty();\n this.collection.forEach(this.addOne, this);\n },\n addOne: function (model) {\n var appointmentView = new AppointmentView({ model: model });\n appointmentView.render();\n this.$el.append(appointmentView.el);\n },\n template: _.template(\n '\u003Ca href=\"#\u002Fappointments\u002Fp\u003C%= page %>\u002Fpp\u003C%= per_page %>\">View Next\u003C\u002Fa>',\n ),\n});\n",[941,129086,129087,129092,129107,129121,129132,129142,129152,129156,129162,129166,129170,129174,129190,129200,129225,129229,129239,129251,129270,129274,129289,129306,129315,129326,129330,129340,129347,129352],{"__ignoreMap":998},[1002,129088,129089],{"class":1004,"line":1005},[1002,129090,129091],{"class":1008},"\u002F\u002F AppointmentList.js\n",[1002,129093,129094,129096,129099,129101,129103,129105],{"class":1004,"line":1012},[1002,129095,18311],{"class":1015},[1002,129097,129098],{"class":1030}," AppointmentList ",[1002,129100,2393],{"class":1015},[1002,129102,128740],{"class":1030},[1002,129104,106592],{"class":1026},[1002,129106,2756],{"class":1030},[1002,129108,129109,129111,129113,129115,129117,129119],{"class":1004,"line":1047},[1002,129110,128749],{"class":1026},[1002,129112,1137],{"class":1030},[1002,129114,6965],{"class":1015},[1002,129116,6513],{"class":1030},[1002,129118,28368],{"class":2378},[1002,129120,2382],{"class":1030},[1002,129122,129123,129125,129128,129130],{"class":1004,"line":1054},[1002,129124,2387],{"class":1019},[1002,129126,129127],{"class":1030},".per_page ",[1002,129129,2393],{"class":1015},[1002,129131,128771],{"class":1030},[1002,129133,129134,129136,129138,129140],{"class":1004,"line":1060},[1002,129135,2387],{"class":1019},[1002,129137,128778],{"class":1030},[1002,129139,2393],{"class":1015},[1002,129141,128783],{"class":1030},[1002,129143,129144,129146,129148,129150],{"class":1004,"line":1272},[1002,129145,2387],{"class":1019},[1002,129147,128790],{"class":1030},[1002,129149,2393],{"class":1015},[1002,129151,128795],{"class":1030},[1002,129153,129154],{"class":1004,"line":1348},[1002,129155,1051],{"emptyLinePlaceholder":1050},[1002,129157,129158,129160],{"class":1004,"line":1354},[1002,129159,2687],{"class":1015},[1002,129161,128802],{"class":1030},[1002,129163,129164],{"class":1004,"line":1360},[1002,129165,1502],{"class":1030},[1002,129167,129168],{"class":1004,"line":1366},[1002,129169,2804],{"class":1030},[1002,129171,129172],{"class":1004,"line":1946},[1002,129173,1051],{"emptyLinePlaceholder":1050},[1002,129175,129176,129178,129181,129183,129186,129188],{"class":1004,"line":1956},[1002,129177,18311],{"class":1015},[1002,129179,129180],{"class":1030}," AppointmentListView ",[1002,129182,2393],{"class":1015},[1002,129184,129185],{"class":1030}," Backbone.View.",[1002,129187,106592],{"class":1026},[1002,129189,2756],{"class":1030},[1002,129191,129192,129194,129196,129198],{"class":1004,"line":1961},[1002,129193,114354],{"class":1026},[1002,129195,1137],{"class":1030},[1002,129197,6965],{"class":1015},[1002,129199,9772],{"class":1030},[1002,129201,129202,129204,129207,129209,129211,129214,129216,129218,129221,129223],{"class":1004,"line":1971},[1002,129203,2387],{"class":1019},[1002,129205,129206],{"class":1030},".collection.",[1002,129208,43148],{"class":1026},[1002,129210,1031],{"class":1030},[1002,129212,129213],{"class":1034},"'reset'",[1002,129215,1251],{"class":1030},[1002,129217,3455],{"class":1019},[1002,129219,129220],{"class":1030},".render, ",[1002,129222,3455],{"class":1019},[1002,129224,1085],{"class":1030},[1002,129226,129227],{"class":1004,"line":1980},[1002,129228,1502],{"class":1030},[1002,129230,129231,129233,129235,129237],{"class":1004,"line":1985},[1002,129232,20201],{"class":1026},[1002,129234,1137],{"class":1030},[1002,129236,6965],{"class":1015},[1002,129238,9772],{"class":1030},[1002,129240,129241,129243,129246,129249],{"class":1004,"line":1995},[1002,129242,2387],{"class":1019},[1002,129244,129245],{"class":1030},".$el.",[1002,129247,129248],{"class":1026},"empty",[1002,129250,1428],{"class":1030},[1002,129252,129253,129255,129257,129259,129261,129263,129266,129268],{"class":1004,"line":2006},[1002,129254,2387],{"class":1019},[1002,129256,129206],{"class":1030},[1002,129258,8408],{"class":1026},[1002,129260,1031],{"class":1030},[1002,129262,3455],{"class":1019},[1002,129264,129265],{"class":1030},".addOne, ",[1002,129267,3455],{"class":1019},[1002,129269,1085],{"class":1030},[1002,129271,129272],{"class":1004,"line":2011},[1002,129273,1502],{"class":1030},[1002,129275,129276,129279,129281,129283,129285,129287],{"class":1004,"line":2017},[1002,129277,129278],{"class":1026}," addOne",[1002,129280,1137],{"class":1030},[1002,129282,6965],{"class":1015},[1002,129284,6513],{"class":1030},[1002,129286,3978],{"class":2378},[1002,129288,2382],{"class":1030},[1002,129290,129291,129293,129296,129298,129300,129303],{"class":1004,"line":2022},[1002,129292,51906],{"class":1015},[1002,129294,129295],{"class":1030}," appointmentView ",[1002,129297,2393],{"class":1015},[1002,129299,2690],{"class":1015},[1002,129301,129302],{"class":1026}," AppointmentView",[1002,129304,129305],{"class":1030},"({ model: model });\n",[1002,129307,129308,129311,129313],{"class":1004,"line":2442},[1002,129309,129310],{"class":1030}," appointmentView.",[1002,129312,19545],{"class":1026},[1002,129314,1428],{"class":1030},[1002,129316,129317,129319,129321,129323],{"class":1004,"line":2466},[1002,129318,2387],{"class":1019},[1002,129320,129245],{"class":1030},[1002,129322,110122],{"class":1026},[1002,129324,129325],{"class":1030},"(appointmentView.el);\n",[1002,129327,129328],{"class":1004,"line":2471},[1002,129329,1502],{"class":1030},[1002,129331,129332,129335,129338],{"class":1004,"line":2476},[1002,129333,129334],{"class":1030}," template: _.",[1002,129336,129337],{"class":1026},"template",[1002,129339,10468],{"class":1030},[1002,129341,129342,129345],{"class":1004,"line":2481},[1002,129343,129344],{"class":1034}," '\u003Ca href=\"#\u002Fappointments\u002Fp\u003C%= page %>\u002Fpp\u003C%= per_page %>\">View Next\u003C\u002Fa>'",[1002,129346,1143],{"class":1030},[1002,129348,129349],{"class":1004,"line":2491},[1002,129350,129351],{"class":1030}," ),\n",[1002,129353,129354],{"class":1004,"line":2502},[1002,129355,2804],{"class":1030},[925,129357,129358,129359,129362,129363],{},"Great! Now that we have the template, let's add some code in the render function to append the generated HTML from the template into the AppointmentListView $el. Make sure you pass in the page and per_page properties to the template function, getting those values from ",[1107,129360,129361],{},"this.collection.page + 1","and ",[1107,129364,129365],{},"this.collection.per_page respectively.",[993,129367,129369],{"className":995,"code":129368,"language":997,"meta":998,"style":998},"var AppointmentListView = Backbone.View.extend({\n template: _.template(\n '\u003Ca href=\"#\u002Fappointments\u002Fp\u003C%= page %>\u002Fpp\u003C%= per_page %>\">View Next\u003C\u002Fa>',\n ),\n initialize: function () {\n this.collection.on('reset', this.render, this);\n },\n render: function () {\n this.$el.empty();\n this.collection.forEach(this.addOne, this);\n this.$el.append(\n this.template({\n page: this.collection.page + 1,\n per_page: this.collection.per_page,\n }),\n );\n },\n addOne: function (model) {\n var appointmentView = new AppointmentView({ model: model });\n appointmentView.render();\n this.$el.append(appointmentView.el);\n },\n});\n",[941,129370,129371,129385,129393,129399,129403,129413,129435,129439,129449,129459,129477,129487,129497,129513,129523,129527,129531,129535,129549,129563,129571,129581,129585],{"__ignoreMap":998},[1002,129372,129373,129375,129377,129379,129381,129383],{"class":1004,"line":1005},[1002,129374,18311],{"class":1015},[1002,129376,129180],{"class":1030},[1002,129378,2393],{"class":1015},[1002,129380,129185],{"class":1030},[1002,129382,106592],{"class":1026},[1002,129384,2756],{"class":1030},[1002,129386,129387,129389,129391],{"class":1004,"line":1012},[1002,129388,129334],{"class":1030},[1002,129390,129337],{"class":1026},[1002,129392,10468],{"class":1030},[1002,129394,129395,129397],{"class":1004,"line":1047},[1002,129396,129344],{"class":1034},[1002,129398,1143],{"class":1030},[1002,129400,129401],{"class":1004,"line":1054},[1002,129402,129351],{"class":1030},[1002,129404,129405,129407,129409,129411],{"class":1004,"line":1060},[1002,129406,114354],{"class":1026},[1002,129408,1137],{"class":1030},[1002,129410,6965],{"class":1015},[1002,129412,9772],{"class":1030},[1002,129414,129415,129417,129419,129421,129423,129425,129427,129429,129431,129433],{"class":1004,"line":1272},[1002,129416,2387],{"class":1019},[1002,129418,129206],{"class":1030},[1002,129420,43148],{"class":1026},[1002,129422,1031],{"class":1030},[1002,129424,129213],{"class":1034},[1002,129426,1251],{"class":1030},[1002,129428,3455],{"class":1019},[1002,129430,129220],{"class":1030},[1002,129432,3455],{"class":1019},[1002,129434,1085],{"class":1030},[1002,129436,129437],{"class":1004,"line":1348},[1002,129438,1502],{"class":1030},[1002,129440,129441,129443,129445,129447],{"class":1004,"line":1354},[1002,129442,20201],{"class":1026},[1002,129444,1137],{"class":1030},[1002,129446,6965],{"class":1015},[1002,129448,9772],{"class":1030},[1002,129450,129451,129453,129455,129457],{"class":1004,"line":1360},[1002,129452,2387],{"class":1019},[1002,129454,129245],{"class":1030},[1002,129456,129248],{"class":1026},[1002,129458,1428],{"class":1030},[1002,129460,129461,129463,129465,129467,129469,129471,129473,129475],{"class":1004,"line":1366},[1002,129462,2387],{"class":1019},[1002,129464,129206],{"class":1030},[1002,129466,8408],{"class":1026},[1002,129468,1031],{"class":1030},[1002,129470,3455],{"class":1019},[1002,129472,129265],{"class":1030},[1002,129474,3455],{"class":1019},[1002,129476,1085],{"class":1030},[1002,129478,129479,129481,129483,129485],{"class":1004,"line":1946},[1002,129480,2387],{"class":1019},[1002,129482,129245],{"class":1030},[1002,129484,110122],{"class":1026},[1002,129486,10468],{"class":1030},[1002,129488,129489,129491,129493,129495],{"class":1004,"line":1956},[1002,129490,78003],{"class":1019},[1002,129492,948],{"class":1030},[1002,129494,129337],{"class":1026},[1002,129496,2756],{"class":1030},[1002,129498,129499,129502,129504,129507,129509,129511],{"class":1004,"line":1961},[1002,129500,129501],{"class":1030}," page: ",[1002,129503,3455],{"class":1019},[1002,129505,129506],{"class":1030},".collection.page ",[1002,129508,5064],{"class":1015},[1002,129510,6246],{"class":1019},[1002,129512,1143],{"class":1030},[1002,129514,129515,129518,129520],{"class":1004,"line":1971},[1002,129516,129517],{"class":1030}," per_page: ",[1002,129519,3455],{"class":1019},[1002,129521,129522],{"class":1030},".collection.per_page,\n",[1002,129524,129525],{"class":1004,"line":1980},[1002,129526,59892],{"class":1030},[1002,129528,129529],{"class":1004,"line":1985},[1002,129530,22541],{"class":1030},[1002,129532,129533],{"class":1004,"line":1995},[1002,129534,1502],{"class":1030},[1002,129536,129537,129539,129541,129543,129545,129547],{"class":1004,"line":2006},[1002,129538,129278],{"class":1026},[1002,129540,1137],{"class":1030},[1002,129542,6965],{"class":1015},[1002,129544,6513],{"class":1030},[1002,129546,3978],{"class":2378},[1002,129548,2382],{"class":1030},[1002,129550,129551,129553,129555,129557,129559,129561],{"class":1004,"line":2011},[1002,129552,51906],{"class":1015},[1002,129554,129295],{"class":1030},[1002,129556,2393],{"class":1015},[1002,129558,2690],{"class":1015},[1002,129560,129302],{"class":1026},[1002,129562,129305],{"class":1030},[1002,129564,129565,129567,129569],{"class":1004,"line":2017},[1002,129566,129310],{"class":1030},[1002,129568,19545],{"class":1026},[1002,129570,1428],{"class":1030},[1002,129572,129573,129575,129577,129579],{"class":1004,"line":2022},[1002,129574,2387],{"class":1019},[1002,129576,129245],{"class":1030},[1002,129578,110122],{"class":1026},[1002,129580,129325],{"class":1030},[1002,129582,129583],{"class":1004,"line":2442},[1002,129584,1502],{"class":1030},[1002,129586,129587],{"class":1004,"line":2466},[1002,129588,2804],{"class":1030},[925,129590,129591],{},"Now that we are rendering the link, we need to implement the route to handle appointments\u002Fp: page\u002Fpp:per_page and have the route function fetch the new appointments based on the parameters. Name this new function page.",[993,129593,129595],{"className":995,"code":129594,"language":997,"meta":998,"style":998},"var AppRouter = new (Backbone.Router.extend({\n routes: {\n '': 'index',\n 'appointments\u002Fp:page\u002Fpp:per_page': 'page',\n },\n initialize: function (options) {\n this.appointmentList = new AppointmentList();\n },\n index: function () {\n var appointmentsView = new AppointmentListView({\n collection: this.appointmentList,\n });\n appointmentsView.render();\n $('#app').html(appointmentsView.el);\n this.appointmentList.fetch();\n },\n page: function (page) {\n this.appointmentList.fetch({ data: { page: page, per_page: page } });\n },\n}))();\n",[941,129596,129597,129614,129618,129629,129641,129645,129659,129675,129679,129690,129706,129716,129720,129729,129745,129756,129760,129775,129786,129790],{"__ignoreMap":998},[1002,129598,129599,129601,129604,129606,129608,129610,129612],{"class":1004,"line":1005},[1002,129600,18311],{"class":1015},[1002,129602,129603],{"class":1030}," AppRouter ",[1002,129605,2393],{"class":1015},[1002,129607,2690],{"class":1015},[1002,129609,113574],{"class":1030},[1002,129611,106592],{"class":1026},[1002,129613,2756],{"class":1030},[1002,129615,129616],{"class":1004,"line":1012},[1002,129617,113583],{"class":1030},[1002,129619,129620,129623,129625,129627],{"class":1004,"line":1047},[1002,129621,129622],{"class":1034}," ''",[1002,129624,1137],{"class":1030},[1002,129626,85061],{"class":1034},[1002,129628,1143],{"class":1030},[1002,129630,129631,129634,129636,129639],{"class":1004,"line":1054},[1002,129632,129633],{"class":1034}," 'appointments\u002Fp:page\u002Fpp:per_page'",[1002,129635,1137],{"class":1030},[1002,129637,129638],{"class":1034},"'page'",[1002,129640,1143],{"class":1030},[1002,129642,129643],{"class":1004,"line":1060},[1002,129644,1502],{"class":1030},[1002,129646,129647,129649,129651,129653,129655,129657],{"class":1004,"line":1272},[1002,129648,114354],{"class":1026},[1002,129650,1137],{"class":1030},[1002,129652,6965],{"class":1015},[1002,129654,6513],{"class":1030},[1002,129656,2379],{"class":2378},[1002,129658,2382],{"class":1030},[1002,129660,129661,129663,129666,129668,129670,129673],{"class":1004,"line":1348},[1002,129662,2387],{"class":1019},[1002,129664,129665],{"class":1030},".appointmentList ",[1002,129667,2393],{"class":1015},[1002,129669,2690],{"class":1015},[1002,129671,129672],{"class":1026}," AppointmentList",[1002,129674,1428],{"class":1030},[1002,129676,129677],{"class":1004,"line":1354},[1002,129678,1502],{"class":1030},[1002,129680,129681,129684,129686,129688],{"class":1004,"line":1360},[1002,129682,129683],{"class":1026}," index",[1002,129685,1137],{"class":1030},[1002,129687,6965],{"class":1015},[1002,129689,9772],{"class":1030},[1002,129691,129692,129694,129697,129699,129701,129704],{"class":1004,"line":1366},[1002,129693,51906],{"class":1015},[1002,129695,129696],{"class":1030}," appointmentsView ",[1002,129698,2393],{"class":1015},[1002,129700,2690],{"class":1015},[1002,129702,129703],{"class":1026}," AppointmentListView",[1002,129705,2756],{"class":1030},[1002,129707,129708,129711,129713],{"class":1004,"line":1946},[1002,129709,129710],{"class":1030}," collection: ",[1002,129712,3455],{"class":1019},[1002,129714,129715],{"class":1030},".appointmentList,\n",[1002,129717,129718],{"class":1004,"line":1956},[1002,129719,8353],{"class":1030},[1002,129721,129722,129725,129727],{"class":1004,"line":1961},[1002,129723,129724],{"class":1030}," appointmentsView.",[1002,129726,19545],{"class":1026},[1002,129728,1428],{"class":1030},[1002,129730,129731,129733,129735,129738,129740,129742],{"class":1004,"line":1971},[1002,129732,109906],{"class":1026},[1002,129734,1031],{"class":1030},[1002,129736,129737],{"class":1034},"'#app'",[1002,129739,1539],{"class":1030},[1002,129741,383],{"class":1026},[1002,129743,129744],{"class":1030},"(appointmentsView.el);\n",[1002,129746,129747,129749,129752,129754],{"class":1004,"line":1980},[1002,129748,2387],{"class":1019},[1002,129750,129751],{"class":1030},".appointmentList.",[1002,129753,49123],{"class":1026},[1002,129755,1428],{"class":1030},[1002,129757,129758],{"class":1004,"line":1985},[1002,129759,1502],{"class":1030},[1002,129761,129762,129765,129767,129769,129771,129773],{"class":1004,"line":1995},[1002,129763,129764],{"class":1026}," page",[1002,129766,1137],{"class":1030},[1002,129768,6965],{"class":1015},[1002,129770,6513],{"class":1030},[1002,129772,71715],{"class":2378},[1002,129774,2382],{"class":1030},[1002,129776,129777,129779,129781,129783],{"class":1004,"line":2006},[1002,129778,2387],{"class":1019},[1002,129780,129751],{"class":1030},[1002,129782,49123],{"class":1026},[1002,129784,129785],{"class":1030},"({ data: { page: page, per_page: page } });\n",[1002,129787,129788],{"class":1004,"line":2011},[1002,129789,1502],{"class":1030},[1002,129791,129792],{"class":1004,"line":2017},[1002,129793,113671],{"class":1030},[953,129795,129797],{"id":129796},"sorting-by-date","Sorting By Date",[925,129799,129800],{},"Our appointments are being rendered in a pretty haphazard way. So we need to always have our appointments sorted by the date. Add the code below to accomplish this.",[993,129802,129804],{"className":995,"code":129803,"language":997,"meta":998,"style":998},"var Appointments = Backbone.Collection.extend({\n comparator: 'date',\n});\n",[941,129805,129806,129820,129830],{"__ignoreMap":998},[1002,129807,129808,129810,129812,129814,129816,129818],{"class":1004,"line":1005},[1002,129809,18311],{"class":1015},[1002,129811,128735],{"class":1030},[1002,129813,2393],{"class":1015},[1002,129815,128740],{"class":1030},[1002,129817,106592],{"class":1026},[1002,129819,2756],{"class":1030},[1002,129821,129822,129825,129828],{"class":1004,"line":1012},[1002,129823,129824],{"class":1030}," comparator: ",[1002,129826,129827],{"class":1034},"'date'",[1002,129829,1143],{"class":1030},[1002,129831,129832],{"class":1004,"line":1047},[1002,129833,2804],{"class":1030},[953,129835,129837],{"id":129836},"sorting-order","Sorting Order",[925,129839,129840],{},"If you want to reverse the order, Update the comparator below to sort by date in reverse order",[993,129842,129844],{"className":995,"code":129843,"language":997,"meta":998,"style":998},"var Appointments = Backbone.Collection.extend({\n comparator: function (apt1, apt2) {\n return apt1.get('date') \u003C apt2.get('date');\n },\n});\n",[941,129845,129846,129860,129881,129909,129913],{"__ignoreMap":998},[1002,129847,129848,129850,129852,129854,129856,129858],{"class":1004,"line":1005},[1002,129849,18311],{"class":1015},[1002,129851,128735],{"class":1030},[1002,129853,2393],{"class":1015},[1002,129855,128740],{"class":1030},[1002,129857,106592],{"class":1026},[1002,129859,2756],{"class":1030},[1002,129861,129862,129865,129867,129869,129871,129874,129876,129879],{"class":1004,"line":1012},[1002,129863,129864],{"class":1026}," comparator",[1002,129866,1137],{"class":1030},[1002,129868,6965],{"class":1015},[1002,129870,6513],{"class":1030},[1002,129872,129873],{"class":2378},"apt1",[1002,129875,1251],{"class":1030},[1002,129877,129878],{"class":2378},"apt2",[1002,129880,2382],{"class":1030},[1002,129882,129883,129885,129888,129890,129892,129894,129896,129898,129901,129903,129905,129907],{"class":1004,"line":1047},[1002,129884,2687],{"class":1015},[1002,129886,129887],{"class":1030}," apt1.",[1002,129889,8070],{"class":1026},[1002,129891,1031],{"class":1030},[1002,129893,129827],{"class":1034},[1002,129895,5876],{"class":1030},[1002,129897,6539],{"class":1015},[1002,129899,129900],{"class":1030}," apt2.",[1002,129902,8070],{"class":1026},[1002,129904,1031],{"class":1030},[1002,129906,129827],{"class":1034},[1002,129908,1085],{"class":1030},[1002,129910,129911],{"class":1004,"line":1054},[1002,129912,1502],{"class":1030},[1002,129914,129915],{"class":1004,"line":1060},[1002,129916,2804],{"class":1030},[953,129918,129920],{"id":129919},"counting-up","Counting Up",[925,129922,129923,129924],{},"If your client tells us to implement a function on the collection to count up the number of cancelled appointments. Implement this function in the collection class below and call it ",[1107,129925,129926],{},"cancelledCount.",[993,129928,129930],{"className":995,"code":129929,"language":997,"meta":998,"style":998},"var Appointments = Backbone.Collection.extend({\n cancelledCount: function () {\n return this.where({ cancelled: true }).length;\n },\n});\n",[941,129931,129932,129946,129957,129979,129983],{"__ignoreMap":998},[1002,129933,129934,129936,129938,129940,129942,129944],{"class":1004,"line":1005},[1002,129935,18311],{"class":1015},[1002,129937,128735],{"class":1030},[1002,129939,2393],{"class":1015},[1002,129941,128740],{"class":1030},[1002,129943,106592],{"class":1026},[1002,129945,2756],{"class":1030},[1002,129947,129948,129951,129953,129955],{"class":1004,"line":1012},[1002,129949,129950],{"class":1026}," cancelledCount",[1002,129952,1137],{"class":1030},[1002,129954,6965],{"class":1015},[1002,129956,9772],{"class":1030},[1002,129958,129959,129961,129963,129965,129968,129971,129973,129975,129977],{"class":1004,"line":1047},[1002,129960,2687],{"class":1015},[1002,129962,2693],{"class":1019},[1002,129964,948],{"class":1030},[1002,129966,129967],{"class":1026},"where",[1002,129969,129970],{"class":1030},"({ cancelled: ",[1002,129972,17397],{"class":1019},[1002,129974,99965],{"class":1030},[1002,129976,5873],{"class":1019},[1002,129978,1407],{"class":1030},[1002,129980,129981],{"class":1004,"line":1054},[1002,129982,1502],{"class":1030},[1002,129984,129985],{"class":1004,"line":1060},[1002,129986,2804],{"class":1030},[1579,129988,129989],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":129991},[129992,129993,129994,129995,129996,129997],{"id":128621,"depth":1012,"text":128622},{"id":128897,"depth":1012,"text":128898},{"id":129069,"depth":1012,"text":129070},{"id":129796,"depth":1012,"text":129797},{"id":129836,"depth":1012,"text":129837},{"id":129919,"depth":1012,"text":129920},"2014-08-18","\u002Fimages\u002Fblog\u002Ffeatures\u002Fbackbone-customizing-collections.jpg",{},{"title":47,"description":49},"blog\u002Fbackbone-customizing-collections",[16,17,51],"hLWPgjSweWqD4MC-LNUvnS8_TM_yeasfZn1lxFJks7Q",{"id":130006,"title":331,"author":920,"body":130007,"date":130217,"description":333,"extension":1591,"image":130218,"meta":130219,"navigation":1050,"path":332,"seo":130220,"stem":130221,"tags":130222,"__hash__":130223},"blog\u002Fblog\u002Fgit-stash.md",{"type":922,"value":130008,"toc":130209},[130009,130018,130025,130028,130041,130044,130053,130059,130068,130071,130080,130083,130092,130096,130099,130108,130111,130120,130124,130127,130136,130140,130143,130152,130159,130168,130172,130175,130179,130182,130191,130195,130198,130207],[993,130010,130012],{"className":1797,"code":130011,"language":1799,"meta":998,"style":998},"git stash save\n",[941,130013,130014],{"__ignoreMap":998},[1002,130015,130016],{"class":1004,"line":1005},[1002,130017,130011],{},[925,130019,130020,130021,130024],{},"Above command will save your modified files by ",[1107,130022,130023],{},"stashing"," them away. And restoring your last commit to your working copy.",[925,130026,130027],{},"After you submit your fixes, and checked in your changes you can verify the status of your repository:",[993,130029,130031],{"className":1724,"code":130030,"language":1726,"meta":998,"style":998},"git diff\ngit status\n",[941,130032,130033,130037],{"__ignoreMap":998},[1002,130034,130035],{"class":1004,"line":1005},[1002,130036,105864],{},[1002,130038,130039],{"class":1004,"line":1012},[1002,130040,105994],{},[925,130042,130043],{},"this will result in:",[993,130045,130047],{"className":1797,"code":130046,"language":1799,"meta":998,"style":998},"nothing to commit (working directory clean)\n",[941,130048,130049],{"__ignoreMap":998},[1002,130050,130051],{"class":1004,"line":1005},[1002,130052,130046],{},[925,130054,130055,130056,130058],{},"Now you can resume work on the feature where you stopped before fixing the master.",[96859,130057],{},"\nFirst list all the stashes to make sure you get the right one.",[993,130060,130062],{"className":1797,"code":130061,"language":1799,"meta":998,"style":998},"git stash list\n",[941,130063,130064],{"__ignoreMap":998},[1002,130065,130066],{"class":1004,"line":1005},[1002,130067,130061],{},[925,130069,130070],{},"As you can see, your stash is in the stash list. Let's apply the stash so you can get back to work.",[993,130072,130074],{"className":1797,"code":130073,"language":1799,"meta":998,"style":998},"git stash apply\n",[941,130075,130076],{"__ignoreMap":998},[1002,130077,130078],{"class":1004,"line":1005},[1002,130079,130073],{},[925,130081,130082],{},"Ok, so now that you have all your stashed changes back, let's clean up the stash list.\nGo ahead and drop any unwanted stashes.",[993,130084,130086],{"className":1797,"code":130085,"language":1799,"meta":998,"style":998},"git stash drop\n",[941,130087,130088],{"__ignoreMap":998},[1002,130089,130090],{"class":1004,"line":1005},[1002,130091,130085],{},[953,130093,130095],{"id":130094},"conflicts","Conflicts",[925,130097,130098],{},"If you get a conflict when trying to apply your previous stash, you can perform a hard reset back to the last commit.",[993,130100,130102],{"className":1797,"code":130101,"language":1799,"meta":998,"style":998},"git reset --hard HEAD\n",[941,130103,130104],{"__ignoreMap":998},[1002,130105,130106],{"class":1004,"line":1005},[1002,130107,130101],{},[925,130109,130110],{},"Now that you have the file reset, use the pop command to apply and delete the stash at the same time.",[993,130112,130114],{"className":1797,"code":130113,"language":1799,"meta":998,"style":998},"git stash pop\n",[941,130115,130116],{"__ignoreMap":998},[1002,130117,130118],{"class":1004,"line":1005},[1002,130119,130113],{},[953,130121,130123],{"id":130122},"keeping-the-index","Keeping the index",[925,130125,130126],{},"For this you need to swap branches again, but this time some of your changes may ready to be committed. Stash all the unstaged changes, but leave the staged changes intact so they can be committed afterwards.",[993,130128,130130],{"className":1797,"code":130129,"language":1799,"meta":998,"style":998},"git stash save --keep-index\n",[941,130131,130132],{"__ignoreMap":998},[1002,130133,130134],{"class":1004,"line":1005},[1002,130135,130129],{},[953,130137,130139],{"id":130138},"list-options","List Options",[925,130141,130142],{},"If there are so many changes, you may need to stash some more changes, but if it doesn't seem to be working on these untracked files you just created, try using the --include-untracked option to stash all those new files.",[993,130144,130146],{"className":1797,"code":130145,"language":1799,"meta":998,"style":998},"git stash save --include-untracked\n",[941,130147,130148],{"__ignoreMap":998},[1002,130149,130150],{"class":1004,"line":1005},[1002,130151,130145],{},[925,130153,130154,130155,130158],{},"If you've been stashing stuff all day since you keep having to make small quick fixes to master. Then you will have a bunch of stashed changes and you may not be sure which one you need to apply. You could look through them all one by one, or you could use the ",[1107,130156,130157],{},"--stat","\" option to list information about each stash. Give that a try.",[993,130160,130162],{"className":1797,"code":130161,"language":1799,"meta":998,"style":998},"git stash list --stat\n",[941,130163,130164],{"__ignoreMap":998},[1002,130165,130166],{"class":1004,"line":1005},[1002,130167,130161],{},[953,130169,130171],{"id":130170},"stash-details","Stash Details",[925,130173,130174],{},"You now have a list of stashes that are showing you more information, and you think you may have spotted the stash that you need. Take a more detailed look at the stash@{2} stash with the --patch option.",[953,130176,130178],{"id":130177},"stash-message","Stash Message",[925,130180,130181],{},"You're halfway through a large feature. Your team has decided that they want you to deploy what you have so far, but you have a smaller unfinished feature that isn't ready to be committed yet.\nGo ahead and stash your current changes with the message Added method, so you know which stash has your changes.",[993,130183,130185],{"className":1797,"code":130184,"language":1799,"meta":998,"style":998},"git stash save \"Added a method\"\n",[941,130186,130187],{"__ignoreMap":998},[1002,130188,130189],{"class":1004,"line":1005},[1002,130190,130184],{},[953,130192,130194],{"id":130193},"stash-branching","Stash Branching",[925,130196,130197],{},"Now that you've deployed the main part of your feature, you need to finish up what is left. Create a new branch and apply your most current stash all in one command.",[993,130199,130201],{"className":1797,"code":130200,"language":1799,"meta":998,"style":998},"git stash branch \u003Cname> stash@{0}\n",[941,130202,130203],{"__ignoreMap":998},[1002,130204,130205],{"class":1004,"line":1005},[1002,130206,130200],{},[1579,130208,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":130210},[130211,130212,130213,130214,130215,130216],{"id":130094,"depth":1012,"text":130095},{"id":130122,"depth":1012,"text":130123},{"id":130138,"depth":1012,"text":130139},{"id":130170,"depth":1012,"text":130171},{"id":130177,"depth":1012,"text":130178},{"id":130193,"depth":1012,"text":130194},"2014-08-11","\u002Fimages\u002Fblog\u002Ffeatures\u002Fgit-stash.jpg",{},{"title":331,"description":333},"blog\u002Fgit-stash",[16,324],"CjwmeANYsu5bqzLKIQuq0F4EjtVPoG9G0j_B9AD1XrA",{"id":130225,"title":267,"author":920,"body":130226,"date":130725,"description":269,"extension":1591,"image":130726,"meta":130727,"navigation":1050,"path":268,"seo":130728,"stem":130729,"tags":130730,"__hash__":130731},"blog\u002Fblog\u002Fext-js-developing-responsive-applications.md",{"type":922,"value":130227,"toc":130718},[130228,130232,130239,130253,130257,130260,130268,130281,130290,130297,130332,130335,130439,130443,130450,130484,130487,130537,130541,130548,130552,130563,130715],[953,130229,130231],{"id":130230},"introducing-responsiveconfig","Introducing responsiveConfig",[925,130233,130234,130235,130238],{},"The powerful new feature ",[1107,130236,130237],{},"responsiveConfig",", for tablets, makes applications respond dynamically to changes in screen size or orientation. responsiveConfig is enabled using one of two classes:",[1530,130240,130241,130247],{},[974,130242,130243,130246],{},[1107,130244,130245],{},"Ext.plugin.Responsive",": Adds responsive capabilities to an Ext.Component",[974,130248,130249,130252],{},[1107,130250,130251],{},"Ext.mixin.Responsive",": Adds responsive capabilities to any other class",[953,130254,130256],{"id":130255},"making-components-responsive","Making Components Responsive",[925,130258,130259],{},"To make a Component responsive you need to use the responsive plugin, because Ext JS Components' responsive features are not enabled by default for performance reasons. So you have to do one of the following:",[1530,130261,130262,130265],{},[974,130263,130264],{},"Add the responsive plugin to the class body to make all instances responsive, or",[974,130266,130267],{},"Add it to the instance config to enable responsiveness for a single Component instance:",[993,130269,130271],{"className":995,"code":130270,"language":997,"meta":998,"style":998},"plugins 'responsive'\n",[941,130272,130273],{"__ignoreMap":998},[1002,130274,130275,130278],{"class":1004,"line":1005},[1002,130276,130277],{"class":1030},"plugins ",[1002,130279,130280],{"class":1034},"'responsive'\n",[925,130282,130283,130284,130286,130287,130289],{},"Your Component will gain a ",[1107,130285,130237],{}," configuration option, when you have added the responsive plugin to your Component config. ",[1107,130288,130237],{}," is simply an object with keys that represent conditions under which certain configs will be applied.\nLet's consider the following scenario:",[925,130291,130292,130293,130296],{},"In you application Tab Panel, to dynamically set the Panel’s ",[941,130294,130295],{},"tabPosition"," config in response to device orientation change",[39742,130298,69649,130299],{},[39759,130300,130301,69649,130312,69649,130322],{},[39748,130302,130303,130306,130309],{},[39751,130304,130305],{},"Alignment",[39751,130307,130308],{},"Device Orientation Mode",[39751,130310,130311],{},"responsiveConfig Entry",[39748,130313,130314,130317,130320],{},[39764,130315,130316],{},"Left aligned",[39764,130318,130319],{},"landscape",[39764,130321,130319],{},[39748,130323,130324,130327,130329],{},[39764,130325,130326],{},"Top aligned",[39764,130328,130319],{},[39764,130330,130331],{},"portrait",[925,130333,130334],{},"Moving to code:",[993,130336,130338],{"className":995,"code":130337,"language":997,"meta":998,"style":998},"Ext.define('MyApp.view.Main', {\n extend: 'Ext.tab.Panel',\n plugins: 'responsive',\n responsiveConfig: {\n landscape: {\n tabPosition: 'left',\n },\n portrait: {\n tabPosition: 'top',\n },\n },\n items: [{ title: 'Foo' }, { title: 'Bar' }],\n});\n",[941,130339,130340,130355,130365,130375,130380,130385,130394,130398,130403,130412,130416,130420,130435],{"__ignoreMap":998},[1002,130341,130342,130345,130348,130350,130353],{"class":1004,"line":1005},[1002,130343,130344],{"class":1030},"Ext.",[1002,130346,130347],{"class":1026},"define",[1002,130349,1031],{"class":1030},[1002,130351,130352],{"class":1034},"'MyApp.view.Main'",[1002,130354,38330],{"class":1030},[1002,130356,130357,130360,130363],{"class":1004,"line":1012},[1002,130358,130359],{"class":1030}," extend: ",[1002,130361,130362],{"class":1034},"'Ext.tab.Panel'",[1002,130364,1143],{"class":1030},[1002,130366,130367,130370,130373],{"class":1004,"line":1047},[1002,130368,130369],{"class":1030}," plugins: ",[1002,130371,130372],{"class":1034},"'responsive'",[1002,130374,1143],{"class":1030},[1002,130376,130377],{"class":1004,"line":1054},[1002,130378,130379],{"class":1030}," responsiveConfig: {\n",[1002,130381,130382],{"class":1004,"line":1060},[1002,130383,130384],{"class":1030}," landscape: {\n",[1002,130386,130387,130390,130392],{"class":1004,"line":1272},[1002,130388,130389],{"class":1030}," tabPosition: ",[1002,130391,12243],{"class":1034},[1002,130393,1143],{"class":1030},[1002,130395,130396],{"class":1004,"line":1348},[1002,130397,15108],{"class":1030},[1002,130399,130400],{"class":1004,"line":1354},[1002,130401,130402],{"class":1030}," portrait: {\n",[1002,130404,130405,130407,130410],{"class":1004,"line":1360},[1002,130406,130389],{"class":1030},[1002,130408,130409],{"class":1034},"'top'",[1002,130411,1143],{"class":1030},[1002,130413,130414],{"class":1004,"line":1366},[1002,130415,15108],{"class":1030},[1002,130417,130418],{"class":1004,"line":1946},[1002,130419,1502],{"class":1030},[1002,130421,130422,130425,130428,130431,130433],{"class":1004,"line":1956},[1002,130423,130424],{"class":1030}," items: [{ title: ",[1002,130426,130427],{"class":1034},"'Foo'",[1002,130429,130430],{"class":1030}," }, { title: ",[1002,130432,38529],{"class":1034},[1002,130434,45275],{"class":1030},[1002,130436,130437],{"class":1004,"line":1961},[1002,130438,2804],{"class":1030},[953,130440,130442],{"id":130441},"rules","Rules",[925,130444,130445,130446,130449],{},"Each key, or ",[1107,130447,130448],{},"rule",", in the responsiveConfig object is a simple JavaScript expression. The following variables are available for use in responsiveConfig rules:",[1530,130451,130452,130457,130462,130468,130474,130479],{},[974,130453,130454,130456],{},[1107,130455,130319],{}," True if the device orientation is landscape (always ‘true’ on desktop devices)",[974,130458,130459,130461],{},[1107,130460,130331],{}," True if the device orientation is portrait (always ‘false’ on desktop devices)",[974,130463,130464,130467],{},[1107,130465,130466],{},"tall"," True if ‘width’ is less than ‘height’ regardless of device type",[974,130469,130470,130473],{},[1107,130471,130472],{},"wide"," True if ‘width’ is greater than ‘height’ regardless of device type",[974,130475,130476,130478],{},[1107,130477,16089],{}," The width of the viewport",[974,130480,130481,130483],{},[1107,130482,16092],{}," The height of the viewport",[925,130485,130486],{},"To create complex responsive rules, you can combine these variables in a variety of ways . For example, the following responsiveConfig hides a Component if the viewport is less than 800 pixels wide and the viewport’s height is greater than its width:",[993,130488,130490],{"className":995,"code":130489,"language":997,"meta":998,"style":998},"responsiveConfig: {\n 'width \u003C 800 && tall': {\n visible: true\n },\n 'width >= 800': {\n visible: false\n }\n}\n",[941,130491,130492,130498,130505,130512,130516,130523,130529,130533],{"__ignoreMap":998},[1002,130493,130494,130496],{"class":1004,"line":1005},[1002,130495,130237],{"class":1026},[1002,130497,15354],{"class":1030},[1002,130499,130500,130503],{"class":1004,"line":1012},[1002,130501,130502],{"class":1034}," 'width \u003C 800 && tall'",[1002,130504,15354],{"class":1030},[1002,130506,130507,130510],{"class":1004,"line":1047},[1002,130508,130509],{"class":1030}," visible: ",[1002,130511,40378],{"class":1019},[1002,130513,130514],{"class":1004,"line":1054},[1002,130515,15108],{"class":1030},[1002,130517,130518,130521],{"class":1004,"line":1060},[1002,130519,130520],{"class":1034}," 'width >= 800'",[1002,130522,15354],{"class":1030},[1002,130524,130525,130527],{"class":1004,"line":1272},[1002,130526,130509],{"class":1030},[1002,130528,1165],{"class":1019},[1002,130530,130531],{"class":1004,"line":1348},[1002,130532,2014],{"class":1030},[1002,130534,130535],{"class":1004,"line":1354},[1002,130536,1170],{"class":1030},[953,130538,130540],{"id":130539},"which-configs-can-be-responsive","Which Configs Can Be Responsive?",[925,130542,130543,130544,130547],{},"Internally, the framework monitors the viewport for resize and orientation change, and it re-evaluates all of the responsive rules whenever either one of these events occurs. Any matching rules will have setters called for all of their configs. This means that for a configuration option to be used with responsiveConfig, it must have a setter. In the above example, we can use ",[1107,130545,130546],{},"visible"," as a responsiveConfig because Ext.Component has a setVisible() method.",[953,130549,130551],{"id":130550},"making-classes-responsive","Making Classes Responsive",[925,130553,130554,130555,130557,130558,107237,130560,130562],{},"responsiveConfig is most useful for Components, but sometimes you may find the need to make other classes respond to screen size as well. For classes other than Ext.Component, this is accomplished by mixing in Ext.mixin.Responsive. For example, an instance of the following class will have its ",[1107,130556,16521],{}," config updated whenever the screen shape changes from ",[1107,130559,130472],{},[1107,130561,130466],{}," or vice versa:",[993,130564,130566],{"className":995,"code":130565,"language":997,"meta":998,"style":998},"Ext.define('MyClass', {\n mixins: ['Ext.mixin.Responsive'],\n config: {\n foo: null,\n },\n responsiveConfig: {\n wide: {\n foo: 1,\n },\n tall: {\n foo: 2,\n },\n },\n constructor: function (config) {\n this.initConfig(config);\n },\n updateFoo: function (foo) {\n console.log(foo); \u002F\u002F logs \"1\" or \"2\" as screen shape changes between wide and tall\n },\n});\n",[941,130567,130568,130581,130591,130596,130605,130609,130613,130618,130627,130631,130636,130644,130648,130652,130666,130677,130681,130696,130707,130711],{"__ignoreMap":998},[1002,130569,130570,130572,130574,130576,130579],{"class":1004,"line":1005},[1002,130571,130344],{"class":1030},[1002,130573,130347],{"class":1026},[1002,130575,1031],{"class":1030},[1002,130577,130578],{"class":1034},"'MyClass'",[1002,130580,38330],{"class":1030},[1002,130582,130583,130586,130589],{"class":1004,"line":1012},[1002,130584,130585],{"class":1030}," mixins: [",[1002,130587,130588],{"class":1034},"'Ext.mixin.Responsive'",[1002,130590,1903],{"class":1030},[1002,130592,130593],{"class":1004,"line":1047},[1002,130594,130595],{"class":1030}," config: {\n",[1002,130597,130598,130601,130603],{"class":1004,"line":1054},[1002,130599,130600],{"class":1030}," foo: ",[1002,130602,26077],{"class":1019},[1002,130604,1143],{"class":1030},[1002,130606,130607],{"class":1004,"line":1060},[1002,130608,1502],{"class":1030},[1002,130610,130611],{"class":1004,"line":1272},[1002,130612,130379],{"class":1030},[1002,130614,130615],{"class":1004,"line":1348},[1002,130616,130617],{"class":1030}," wide: {\n",[1002,130619,130620,130623,130625],{"class":1004,"line":1354},[1002,130621,130622],{"class":1030}," foo: ",[1002,130624,6211],{"class":1019},[1002,130626,1143],{"class":1030},[1002,130628,130629],{"class":1004,"line":1360},[1002,130630,15108],{"class":1030},[1002,130632,130633],{"class":1004,"line":1366},[1002,130634,130635],{"class":1030}," tall: {\n",[1002,130637,130638,130640,130642],{"class":1004,"line":1946},[1002,130639,130622],{"class":1030},[1002,130641,5681],{"class":1019},[1002,130643,1143],{"class":1030},[1002,130645,130646],{"class":1004,"line":1956},[1002,130647,15108],{"class":1030},[1002,130649,130650],{"class":1004,"line":1961},[1002,130651,1502],{"class":1030},[1002,130653,130654,130656,130658,130660,130662,130664],{"class":1004,"line":1971},[1002,130655,2373],{"class":1026},[1002,130657,1137],{"class":1030},[1002,130659,6965],{"class":1015},[1002,130661,6513],{"class":1030},[1002,130663,47471],{"class":2378},[1002,130665,2382],{"class":1030},[1002,130667,130668,130670,130672,130674],{"class":1004,"line":1980},[1002,130669,2387],{"class":1019},[1002,130671,948],{"class":1030},[1002,130673,92581],{"class":1026},[1002,130675,130676],{"class":1030},"(config);\n",[1002,130678,130679],{"class":1004,"line":1985},[1002,130680,1502],{"class":1030},[1002,130682,130683,130686,130688,130690,130692,130694],{"class":1004,"line":1995},[1002,130684,130685],{"class":1026}," updateFoo",[1002,130687,1137],{"class":1030},[1002,130689,6965],{"class":1015},[1002,130691,6513],{"class":1030},[1002,130693,16521],{"class":2378},[1002,130695,2382],{"class":1030},[1002,130697,130698,130700,130702,130704],{"class":1004,"line":2006},[1002,130699,3030],{"class":1030},[1002,130701,2886],{"class":1026},[1002,130703,88493],{"class":1030},[1002,130705,130706],{"class":1008},"\u002F\u002F logs \"1\" or \"2\" as screen shape changes between wide and tall\n",[1002,130708,130709],{"class":1004,"line":2011},[1002,130710,1502],{"class":1030},[1002,130712,130713],{"class":1004,"line":2017},[1002,130714,2804],{"class":1030},[1579,130716,130717],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":130719},[130720,130721,130722,130723,130724],{"id":130230,"depth":1012,"text":130231},{"id":130255,"depth":1012,"text":130256},{"id":130441,"depth":1012,"text":130442},{"id":130539,"depth":1012,"text":130540},{"id":130550,"depth":1012,"text":130551},"2014-07-26","\u002Fimages\u002Fblog\u002Ffeatures\u002Fext-js-developing-responsive-applications.jpg",{},{"title":267,"description":269},"blog\u002Fext-js-developing-responsive-applications",[16,17,271],"4V3ty3tZLX6asEetwiU0DeiALLWV06yDjzAcsQ5vNhU",{"id":130733,"title":180,"author":920,"body":130734,"date":131160,"description":182,"extension":1591,"image":131161,"meta":131162,"navigation":1050,"path":181,"seo":131163,"stem":131164,"tags":131165,"__hash__":131166},"blog\u002Fblog\u002Fentity-framework-code-first.md",{"type":922,"value":130735,"toc":131155},[130736,130739,130743,130746,130750,130753,130758,130800,130805,130845,130848,130911,130914,130947,130950,130953,130960,130970,130973,130977,130980,130983,131014,131025,131055,131065,131095,131098,131143,131153],[925,130737,130738],{},"We will also see migration which was introduced in EF 4.3. We will use Entity Framework 4.1 and 4.3\u002F5.0 in this tutorial.",[953,130740,130742],{"id":130741},"what-is-code-first","What is Code-First?",[925,130744,130745],{},"Entity Framework introduced Code First approach from Entity Framework 4.1. Code First is mainly useful in Domain-Driven Design In the Code First approach, you can focus on the domain design and start creating classes as per your domain requirement rather than design your database first and then create the classes which match your database design. Code First APIs will create the database on the fly based on your entity classes and configuration. So as a developer, you first start writing C#\u002FVB.net classes rather than focusing on database design and then when you run the application, Code First APIs will create the new database or map your classes with existing database before running your application. So the basic workflow would be: Write code-first application classes → Hit F5 to run the application → Code First API creates new database or map with existing database from application classes → Inserts default\u002Ftest data into the database → Finally launch the application",[953,130747,130749],{"id":130748},"simple-code-first-example","Simple Code First Example",[925,130751,130752],{},"Let’s create a simple code-first example. Create a Class Library project in Visual Studio. Write two simple Movie and Actor entity classes as below:",[925,130754,130755],{},[1107,130756,130757],{},"Actor class:",[993,130759,130762],{"className":130760,"code":130761,"language":184,"meta":998,"style":998},"language-csharp shiki shiki-themes github-light github-dark","public class Actor\n{\n public Actor()\n {\n }\n public int ID { get; set; }\n public string FullName { get; set; }\n}\n",[941,130763,130764,130769,130773,130778,130782,130786,130791,130796],{"__ignoreMap":998},[1002,130765,130766],{"class":1004,"line":1005},[1002,130767,130768],{},"public class Actor\n",[1002,130770,130771],{"class":1004,"line":1012},[1002,130772,1129],{},[1002,130774,130775],{"class":1004,"line":1047},[1002,130776,130777],{}," public Actor()\n",[1002,130779,130780],{"class":1004,"line":1054},[1002,130781,91266],{},[1002,130783,130784],{"class":1004,"line":1060},[1002,130785,2014],{},[1002,130787,130788],{"class":1004,"line":1272},[1002,130789,130790],{}," public int ID { get; set; }\n",[1002,130792,130793],{"class":1004,"line":1348},[1002,130794,130795],{}," public string FullName { get; set; }\n",[1002,130797,130798],{"class":1004,"line":1354},[1002,130799,1170],{},[925,130801,130802],{},[1107,130803,130804],{},"Movie class:",[993,130806,130808],{"className":130760,"code":130807,"language":184,"meta":998,"style":998},"public class Movie\n{\n public Movie()\n {\n }\n public int ID { get; set; }\n public string Title { get; set; }\n}\n",[941,130809,130810,130815,130819,130824,130828,130832,130836,130841],{"__ignoreMap":998},[1002,130811,130812],{"class":1004,"line":1005},[1002,130813,130814],{},"public class Movie\n",[1002,130816,130817],{"class":1004,"line":1012},[1002,130818,1129],{},[1002,130820,130821],{"class":1004,"line":1047},[1002,130822,130823],{}," public Movie()\n",[1002,130825,130826],{"class":1004,"line":1054},[1002,130827,91266],{},[1002,130829,130830],{"class":1004,"line":1060},[1002,130831,2014],{},[1002,130833,130834],{"class":1004,"line":1272},[1002,130835,130790],{},[1002,130837,130838],{"class":1004,"line":1348},[1002,130839,130840],{}," public string Title { get; set; }\n",[1002,130842,130843],{"class":1004,"line":1354},[1002,130844,1170],{},[925,130846,130847],{},"Now, create context class which is derived from DBContext class with two DbSet properties, one for Actor and one for Movie.",[993,130849,130851],{"className":130760,"code":130850,"language":184,"meta":998,"style":998},"namespace MovieDataLayer\n{\n\n public class Context: DbContext\n {\n public Context(): base()\n {\n\n }\n public DbSet\u003CActor> Actors { get; set; }\n public DbSet\u003CMovie> Movies { get; set; }\n }\n}\n",[941,130852,130853,130858,130862,130866,130871,130875,130880,130885,130889,130893,130898,130903,130907],{"__ignoreMap":998},[1002,130854,130855],{"class":1004,"line":1005},[1002,130856,130857],{},"namespace MovieDataLayer\n",[1002,130859,130860],{"class":1004,"line":1012},[1002,130861,1129],{},[1002,130863,130864],{"class":1004,"line":1047},[1002,130865,1051],{"emptyLinePlaceholder":1050},[1002,130867,130868],{"class":1004,"line":1054},[1002,130869,130870],{}," public class Context: DbContext\n",[1002,130872,130873],{"class":1004,"line":1060},[1002,130874,91266],{},[1002,130876,130877],{"class":1004,"line":1272},[1002,130878,130879],{}," public Context(): base()\n",[1002,130881,130882],{"class":1004,"line":1348},[1002,130883,130884],{}," {\n",[1002,130886,130887],{"class":1004,"line":1354},[1002,130888,1051],{"emptyLinePlaceholder":1050},[1002,130890,130891],{"class":1004,"line":1360},[1002,130892,7377],{},[1002,130894,130895],{"class":1004,"line":1366},[1002,130896,130897],{}," public DbSet\u003CActor> Actors { get; set; }\n",[1002,130899,130900],{"class":1004,"line":1946},[1002,130901,130902],{}," public DbSet\u003CMovie> Movies { get; set; }\n",[1002,130904,130905],{"class":1004,"line":1956},[1002,130906,2014],{},[1002,130908,130909],{"class":1004,"line":1961},[1002,130910,1170],{},[925,130912,130913],{},"Now, create console project to test these classes as below:",[993,130915,130917],{"className":130760,"code":130916,"language":184,"meta":998,"style":998},"using (var ctx = new Context())\n{\n Actor actor = new Actor() { FullName = \"Will Smith\" };\n ctx.Actors.Add(actor);\n ctx.SaveChanges();\n}\n",[941,130918,130919,130924,130928,130933,130938,130943],{"__ignoreMap":998},[1002,130920,130921],{"class":1004,"line":1005},[1002,130922,130923],{},"using (var ctx = new Context())\n",[1002,130925,130926],{"class":1004,"line":1012},[1002,130927,1129],{},[1002,130929,130930],{"class":1004,"line":1047},[1002,130931,130932],{}," Actor actor = new Actor() { FullName = \"Will Smith\" };\n",[1002,130934,130935],{"class":1004,"line":1054},[1002,130936,130937],{}," ctx.Actors.Add(actor);\n",[1002,130939,130940],{"class":1004,"line":1060},[1002,130941,130942],{}," ctx.SaveChanges();\n",[1002,130944,130945],{"class":1004,"line":1272},[1002,130946,1170],{},[925,130948,130949],{},"Now, if you run the application then you will surprise to see that application run successfully.",[925,130951,130952],{},"It has successfully stored Actor information into the database. But where is the database and what are the tables and its columns?",[925,130954,130955,130956,130959],{},"This is the beauty of Code First APIs of Entity Framework. It creates the database based on the parameter passed in the base constructor of your context class. We have not passed any parameters so it will create ",[1107,130957,130958],{},"ActorDataLayer.Context"," database in local SQLEXPRESS",[925,130961,130962,130963,130966,130967,130969],{},"Code-first API will also create two tables in the database, Actors and Movies table based on Actor and Movie class. Code First API creates PrimaryKey in the table if class has either ",[1107,130964,130965],{},"Id"," or ClassName + ",[1107,130968,19767],{}," property. For example, the Actor class has \"ID\" property so it will create ID as a PK column. It will also create other columns with the same name and datatype as property names and datatypes.",[925,130971,130972],{},"So this way without creating database first, you can start writing application that will eventually create the database from your domain classes.",[953,130974,130976],{"id":130975},"database-initialization","Database Initialization",[925,130978,130979],{},"Let’s how database initialize in code-first application.",[925,130981,130982],{},"No Parameter: If you do not pass the parameter then it creates the database in your local SQLEXPRESS with name matches your {Namespace}.{Context class name}. eg. MovieDataLayer.Context for following context:",[993,130984,130986],{"className":130760,"code":130985,"language":184,"meta":998,"style":998},"public class Context: DbContext\n{\n public Context(): base()\n {\n }\n}\n",[941,130987,130988,130993,130997,131002,131006,131010],{"__ignoreMap":998},[1002,130989,130990],{"class":1004,"line":1005},[1002,130991,130992],{},"public class Context: DbContext\n",[1002,130994,130995],{"class":1004,"line":1012},[1002,130996,1129],{},[1002,130998,130999],{"class":1004,"line":1047},[1002,131000,131001],{}," public Context(): base()\n",[1002,131003,131004],{"class":1004,"line":1054},[1002,131005,91266],{},[1002,131007,131008],{"class":1004,"line":1060},[1002,131009,2014],{},[1002,131011,131012],{"class":1004,"line":1272},[1002,131013,1170],{},[925,131015,131016,131017,131020,131021,131024],{},"Name: If you pass ",[1107,131018,131019],{},"Name"," parameter then it creates database in the local SQLEXPRESS DB server using that name. For example: below code will create ",[1107,131022,131023],{},"ActorDB-CodeFirst"," database",[993,131026,131028],{"className":130760,"code":131027,"language":184,"meta":998,"style":998},"public class Context: DbContext\n{\n public Context(): base(\"MovieDB-CodeFirst\")\n {\n }\n}\n",[941,131029,131030,131034,131038,131043,131047,131051],{"__ignoreMap":998},[1002,131031,131032],{"class":1004,"line":1005},[1002,131033,130992],{},[1002,131035,131036],{"class":1004,"line":1012},[1002,131037,1129],{},[1002,131039,131040],{"class":1004,"line":1047},[1002,131041,131042],{}," public Context(): base(\"MovieDB-CodeFirst\")\n",[1002,131044,131045],{"class":1004,"line":1054},[1002,131046,91266],{},[1002,131048,131049],{"class":1004,"line":1060},[1002,131050,2014],{},[1002,131052,131053],{"class":1004,"line":1272},[1002,131054,1170],{},[925,131056,131057,131058,16529,131061,131064],{},"ConnectionStringName: If you pass connection string name of ",[941,131059,131060],{},"app.config",[941,131062,131063],{},"web.config"," then it will create the database as per connection string. For example, below code will create \"ActorDB-ByConnectionString\" database:",[993,131066,131068],{"className":130760,"code":131067,"language":184,"meta":998,"style":998},"public class Context: DbContext\n{\n public ActorDBContext() : base(\"ActorDBConnectionString\")\n {\n }\n}\n",[941,131069,131070,131074,131078,131083,131087,131091],{"__ignoreMap":998},[1002,131071,131072],{"class":1004,"line":1005},[1002,131073,130992],{},[1002,131075,131076],{"class":1004,"line":1012},[1002,131077,1129],{},[1002,131079,131080],{"class":1004,"line":1047},[1002,131081,131082],{}," public ActorDBContext() : base(\"ActorDBConnectionString\")\n",[1002,131084,131085],{"class":1004,"line":1054},[1002,131086,91266],{},[1002,131088,131089],{"class":1004,"line":1060},[1002,131090,2014],{},[1002,131092,131093],{"class":1004,"line":1272},[1002,131094,1170],{},[925,131096,131097],{},"App.config:",[993,131099,131101],{"className":130760,"code":131100,"language":184,"meta":998,"style":998},"\u003C?xml version=\"1.0\" encoding=\"utf-8\" ?>\n\u003Cconfiguration>\n \u003CconnectionStrings>\n \u003Cadd name=\"MovieDBConnectionString\"\n connectionString=\"Data Source=.;Initial Catalog=ActorDB-ByConnectionString;Integrated Security=true\"\n providerName=\"System.Data.SqlClient\"\u002F>\n \u003C\u002FconnectionStrings>\n\u003C\u002Fconfiguration>\n",[941,131102,131103,131108,131113,131118,131123,131128,131133,131138],{"__ignoreMap":998},[1002,131104,131105],{"class":1004,"line":1005},[1002,131106,131107],{},"\u003C?xml version=\"1.0\" encoding=\"utf-8\" ?>\n",[1002,131109,131110],{"class":1004,"line":1012},[1002,131111,131112],{},"\u003Cconfiguration>\n",[1002,131114,131115],{"class":1004,"line":1047},[1002,131116,131117],{}," \u003CconnectionStrings>\n",[1002,131119,131120],{"class":1004,"line":1054},[1002,131121,131122],{}," \u003Cadd name=\"MovieDBConnectionString\"\n",[1002,131124,131125],{"class":1004,"line":1060},[1002,131126,131127],{}," connectionString=\"Data Source=.;Initial Catalog=ActorDB-ByConnectionString;Integrated Security=true\"\n",[1002,131129,131130],{"class":1004,"line":1272},[1002,131131,131132],{}," providerName=\"System.Data.SqlClient\"\u002F>\n",[1002,131134,131135],{"class":1004,"line":1348},[1002,131136,131137],{}," \u003C\u002FconnectionStrings>\n",[1002,131139,131140],{"class":1004,"line":1354},[1002,131141,131142],{},"\u003C\u002Fconfiguration>\n",[925,131144,131145,131146,131149,131150,131152],{},"Above Context class sends connection string name as a parameter. So it will create new ",[1107,131147,131148],{},"MovieDB-ByConnectionString"," database or use existing ",[1107,131151,131148],{}," database at local SQL Server (because we have mentioned '.' not SQLEXPRESS). Make sure that you include providerName = \"System.Data.SqlClient\" in the connection string.",[1579,131154,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":131156},[131157,131158,131159],{"id":130741,"depth":1012,"text":130742},{"id":130748,"depth":1012,"text":130749},{"id":130975,"depth":1012,"text":130976},"2014-07-21","\u002Fimages\u002Fblog\u002Ffeatures\u002Fentity-framework-code-first.jpg",{},{"title":180,"description":182},"blog\u002Fentity-framework-code-first",[16,184],"qSkq1SURkaCtGM4rvg4-P6CkvSuBVAd8CQUqokd0Ozs",{"id":131168,"title":320,"author":920,"body":131169,"date":131663,"description":322,"extension":1591,"image":131664,"meta":131665,"navigation":1050,"path":321,"seo":131666,"stem":131667,"tags":131668,"__hash__":131669},"blog\u002Fblog\u002Fgit-introduction.md",{"type":922,"value":131170,"toc":131649},[131171,131174,131177,131201,131205,131208,131217,131224,131228,131231,131240,131243,131252,131256,131263,131282,131286,131289,131298,131301,131310,131313,131322,131326,131329,131338,131341,131350,131353,131357,131367,131376,131379,131387,131390,131399,131402,131411,131415,131418,131426,131429,131438,131441,131449,131452,131461,131465,131468,131477,131480,131484,131487,131495,131498,131507,131510,131519,131522,131531,131534,131543,131546,131555,131559,131562,131571,131574,131577,131592,131596,131599,131602,131611,131614,131623,131626,131635,131638,131647],[953,131172,131173],{"id":51756},"Setup",[925,131175,131176],{},"Download git from the following locations:",[1530,131178,131179,131187,131194],{},[974,131180,131181,131182],{},"OSX: ",[933,131183,131186],{"href":131184,"rel":131185},"http:\u002F\u002Fcode.google.com\u002Fp\u002Fgit-osx-installer\u002Fdownloads\u002Flist?can=3",[937],"Download",[974,131188,131189,131190],{},"Windows: ",[933,131191,131186],{"href":131192,"rel":131193},"http:\u002F\u002Fmsysgit.github.io",[937],[974,131195,131196,131197],{},"Linux: ",[933,131198,131186],{"href":131199,"rel":131200},"http:\u002F\u002Fbook.git-scm.com\u002F2_installing_git.html",[937],[953,131202,131204],{"id":131203},"create-a-new-repository","Create a new repository",[925,131206,131207],{},"create a new directory, and perform the following operation to create a new git repository.",[993,131209,131211],{"className":1724,"code":131210,"language":1726,"meta":998,"style":998},"git init\n",[941,131212,131213],{"__ignoreMap":998},[1002,131214,131215],{"class":1004,"line":1005},[1002,131216,131210],{},[925,131218,131219,131220,131223],{},"Executing git init creates a ",[941,131221,131222],{},".git"," subdirectory in the project root, which contains all of the necessary metadata for the repo.\nAside from the .git directory, an existing project remains unaltered (unlike SVN, Git doesn't require a .git folder in every subdirectory).",[953,131225,131227],{"id":131226},"checkout-a-repository","Checkout a repository",[925,131229,131230],{},"create a working copy of a local repository by running the following command:",[993,131232,131234],{"className":1797,"code":131233,"language":1799,"meta":998,"style":998},"git clone \u002Fpath\u002Fto\u002Frepository\n",[941,131235,131236],{"__ignoreMap":998},[1002,131237,131238],{"class":1004,"line":1005},[1002,131239,131233],{},[925,131241,131242],{},"when using a remote server, your command will be",[993,131244,131246],{"className":1797,"code":131245,"language":1799,"meta":998,"style":998},"git clone username@host:\u002Fpath\u002Fto\u002Frepository\n",[941,131247,131248],{"__ignoreMap":998},[1002,131249,131250],{"class":1004,"line":1005},[1002,131251,131245],{},[953,131253,131255],{"id":131254},"workflow","Workflow",[925,131257,131258,131259,131262],{},"Your local repository consists of 3 ",[1107,131260,131261],{},"trees"," maintained by git:",[1530,131264,131265,131271,131277],{},[974,131266,131267,131270],{},[1107,131268,131269],{},"Working Directory"," which holds the actual files",[974,131272,131273,131276],{},[1107,131274,131275],{},"Index\u002FStaging"," which acts as a staging area",[974,131278,131279,131281],{},[1107,131280,81983],{}," which points to the last commit you've made.",[953,131283,131285],{"id":131284},"add-commit","Add & Commit",[925,131287,131288],{},"You can propose changes (add it to the Index) using:",[993,131290,131292],{"className":1797,"code":131291,"language":1799,"meta":998,"style":998},"git add \u003Cfilename>\n",[941,131293,131294],{"__ignoreMap":998},[1002,131295,131296],{"class":1004,"line":1005},[1002,131297,131291],{},[925,131299,131300],{},"This is the first step in the basic git workflow. To actually commit these changes use",[993,131302,131304],{"className":1797,"code":131303,"language":1799,"meta":998,"style":998},"git add *\n",[941,131305,131306],{"__ignoreMap":998},[1002,131307,131308],{"class":1004,"line":1005},[1002,131309,131303],{},[925,131311,131312],{},"Now the file is committed to the HEAD, but not in your remote repository yet.",[993,131314,131316],{"className":1797,"code":131315,"language":1799,"meta":998,"style":998},"git commit -m \"Commit message\"\n",[941,131317,131318],{"__ignoreMap":998},[1002,131319,131320],{"class":1004,"line":1005},[1002,131321,131315],{},[953,131323,131325],{"id":131324},"pushing-changes","Pushing changes",[925,131327,131328],{},"Your changes are now in the HEAD of your local working copy. To send those changes to your remote repository, execute",[993,131330,131332],{"className":1797,"code":131331,"language":1799,"meta":998,"style":998},"git push origin master\n",[941,131333,131334],{"__ignoreMap":998},[1002,131335,131336],{"class":1004,"line":1005},[1002,131337,131331],{},[925,131339,131340],{},"Change master to whatever branch you want to push your changes to.\nIf you have not cloned an existing repository and want to connect your repository to a remote server, you need to add it with",[993,131342,131344],{"className":1797,"code":131343,"language":1799,"meta":998,"style":998},"git remote add origin \u003Cserver>\n",[941,131345,131346],{"__ignoreMap":998},[1002,131347,131348],{"class":1004,"line":1005},[1002,131349,131343],{},[925,131351,131352],{},"Now you are able to push your changes to the selected remote server",[953,131354,131356],{"id":131355},"branching","Branching",[925,131358,131359,131360,131362,131363,131366],{},"Branches are used to develop features isolated from each other.\nThe master branch is the ",[941,131361,15278],{}," branch when you create a repository.\nUse other branches for development and merge them back to the master branch upon completion.\ncreate a new branch named ",[941,131364,131365],{},"feature_x"," and switch to it using",[993,131368,131370],{"className":1797,"code":131369,"language":1799,"meta":998,"style":998},"git checkout -b feature_x\n",[941,131371,131372],{"__ignoreMap":998},[1002,131373,131374],{"class":1004,"line":1005},[1002,131375,131369],{},[925,131377,131378],{},"switch back to master",[993,131380,131381],{"className":1797,"code":115021,"language":1799,"meta":998,"style":998},[941,131382,131383],{"__ignoreMap":998},[1002,131384,131385],{"class":1004,"line":1005},[1002,131386,115021],{},[925,131388,131389],{},"and delete the branch again",[993,131391,131393],{"className":1797,"code":131392,"language":1799,"meta":998,"style":998},"git branch -d feature_x\n",[941,131394,131395],{"__ignoreMap":998},[1002,131396,131397],{"class":1004,"line":1005},[1002,131398,131392],{},[925,131400,131401],{},"a branch is not available to others unless you push the branch to your remote repository",[993,131403,131405],{"className":1797,"code":131404,"language":1799,"meta":998,"style":998},"git push origin \u003Cbranch>\n",[941,131406,131407],{"__ignoreMap":998},[1002,131408,131409],{"class":1004,"line":1005},[1002,131410,131404],{},[953,131412,131414],{"id":131413},"update-merge","Update & merge",[925,131416,131417],{},"to update your local repository to the newest commit, execute",[993,131419,131420],{"className":1797,"code":106380,"language":1799,"meta":998,"style":998},[941,131421,131422],{"__ignoreMap":998},[1002,131423,131424],{"class":1004,"line":1005},[1002,131425,106380],{},[925,131427,131428],{},"in your working directory to fetch and merge remote changes.\nto merge another branch into your active branch (e.g. master), use",[993,131430,131432],{"className":1797,"code":131431,"language":1799,"meta":998,"style":998},"git merge \u003Cbranch>\n",[941,131433,131434],{"__ignoreMap":998},[1002,131435,131436],{"class":1004,"line":1005},[1002,131437,131431],{},[925,131439,131440],{},"In both cases git tries to auto-merge changes. Unfortunately, this is not always possible and results in conflicts. You are responsible to merge those conflicts manually by editing the files shown by git. After changing, you need to mark them as merged with",[993,131442,131443],{"className":1797,"code":131291,"language":1799,"meta":998,"style":998},[941,131444,131445],{"__ignoreMap":998},[1002,131446,131447],{"class":1004,"line":1005},[1002,131448,131291],{},[925,131450,131451],{},"before merging changes, you can also preview them by using",[993,131453,131455],{"className":1797,"code":131454,"language":1799,"meta":998,"style":998},"git diff \u003Csource_branch> \u003Ctarget_branch>\n",[941,131456,131457],{"__ignoreMap":998},[1002,131458,131459],{"class":1004,"line":1005},[1002,131460,131454],{},[953,131462,131464],{"id":131463},"tagging","Tagging",[925,131466,131467],{},"It's recommended to create tags for software releases. this is a known concept, which also exists in SVN. You can create a new tag named 1.0.0 by executing",[993,131469,131471],{"className":1797,"code":131470,"language":1799,"meta":998,"style":998},"git tag 1.0.0 3a5e1d87af\n",[941,131472,131473],{"__ignoreMap":998},[1002,131474,131475],{"class":1004,"line":1005},[1002,131476,131470],{},[925,131478,131479],{},"The 3a5e1d87af stands for the first 10 characters of the commit id you want to reference with your tag. You can get the commit id by looking at the log.",[953,131481,131483],{"id":131482},"logging","Logging",[925,131485,131486],{},"You can study repository history using:",[993,131488,131489],{"className":1797,"code":115516,"language":1799,"meta":998,"style":998},[941,131490,131491],{"__ignoreMap":998},[1002,131492,131493],{"class":1004,"line":1005},[1002,131494,115516],{},[925,131496,131497],{},"You can add a lot of parameters to make the log look like what you want. To see only the commits of a certain author:",[993,131499,131501],{"className":1797,"code":131500,"language":1799,"meta":998,"style":998},"git log --author=sean\n",[941,131502,131503],{"__ignoreMap":998},[1002,131504,131505],{"class":1004,"line":1005},[1002,131506,131500],{},[925,131508,131509],{},"To see a very compressed log where each commit is one line:",[993,131511,131513],{"className":1797,"code":131512,"language":1799,"meta":998,"style":998},"git log --pretty=oneline\n",[941,131514,131515],{"__ignoreMap":998},[1002,131516,131517],{"class":1004,"line":1005},[1002,131518,131512],{},[925,131520,131521],{},"Or mabe you want to see an ASCII art tree of all the branches, decorated with the names of tags and branches:",[993,131523,131525],{"className":1797,"code":131524,"language":1799,"meta":998,"style":998},"git log --graph --oneline --decorate --all\n",[941,131526,131527],{"__ignoreMap":998},[1002,131528,131529],{"class":1004,"line":1005},[1002,131530,131524],{},[925,131532,131533],{},"See only which files have changed:",[993,131535,131537],{"className":1797,"code":131536,"language":1799,"meta":998,"style":998},"git log --name-status\n",[941,131538,131539],{"__ignoreMap":998},[1002,131540,131541],{"class":1004,"line":1005},[1002,131542,131536],{},[925,131544,131545],{},"These are just a few of the possible parameters you can use. For more, see",[993,131547,131549],{"className":1797,"code":131548,"language":1799,"meta":998,"style":998},"git log --help\n",[941,131550,131551],{"__ignoreMap":998},[1002,131552,131553],{"class":1004,"line":1005},[1002,131554,131548],{},[953,131556,131558],{"id":131557},"replace-local-changes","Replace local changes",[925,131560,131561],{},"In case you did something wrong, you can replace local changes using the command",[993,131563,131565],{"className":1797,"code":131564,"language":1799,"meta":998,"style":998},"git checkout -- \u003Cfilename>\n",[941,131566,131567],{"__ignoreMap":998},[1002,131568,131569],{"class":1004,"line":1005},[1002,131570,131564],{},[925,131572,131573],{},"This replaces the changes in your working tree with the last content in HEAD. Changes already added to the index, as well as new files, will be kept.",[925,131575,131576],{},"If you instead want to drop all your local changes and commits, fetch the latest history from the server and point your local master branch at it like this",[993,131578,131580],{"className":1797,"code":131579,"language":1799,"meta":998,"style":998},"git fetch origin\ngit reset --hard origin\u002Fmaster\n",[941,131581,131582,131587],{"__ignoreMap":998},[1002,131583,131584],{"class":1004,"line":1005},[1002,131585,131586],{},"git fetch origin\n",[1002,131588,131589],{"class":1004,"line":1012},[1002,131590,131591],{},"git reset --hard origin\u002Fmaster\n",[953,131593,131595],{"id":131594},"useful-commands","Useful commands",[925,131597,131598],{},"Here are few more useful git commands:",[925,131600,131601],{},"Built-in git GUI",[993,131603,131605],{"className":1797,"code":131604,"language":1799,"meta":998,"style":998},"gitk\n",[941,131606,131607],{"__ignoreMap":998},[1002,131608,131609],{"class":1004,"line":1005},[1002,131610,131604],{},[925,131612,131613],{},"Use colorful git output",[993,131615,131617],{"className":1797,"code":131616,"language":1799,"meta":998,"style":998},"git config color.ui true\n",[941,131618,131619],{"__ignoreMap":998},[1002,131620,131621],{"class":1004,"line":1005},[1002,131622,131616],{},[925,131624,131625],{},"Show log on just one line per commit",[993,131627,131629],{"className":1797,"code":131628,"language":1799,"meta":998,"style":998},"git config format.pretty oneline\n",[941,131630,131631],{"__ignoreMap":998},[1002,131632,131633],{"class":1004,"line":1005},[1002,131634,131628],{},[925,131636,131637],{},"Use interactive adding",[993,131639,131641],{"className":1797,"code":131640,"language":1799,"meta":998,"style":998},"git add -i\n",[941,131642,131643],{"__ignoreMap":998},[1002,131644,131645],{"class":1004,"line":1005},[1002,131646,131640],{},[1579,131648,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":131650},[131651,131652,131653,131654,131655,131656,131657,131658,131659,131660,131661,131662],{"id":51756,"depth":1012,"text":131173},{"id":131203,"depth":1012,"text":131204},{"id":131226,"depth":1012,"text":131227},{"id":131254,"depth":1012,"text":131255},{"id":131284,"depth":1012,"text":131285},{"id":131324,"depth":1012,"text":131325},{"id":131355,"depth":1012,"text":131356},{"id":131413,"depth":1012,"text":131414},{"id":131463,"depth":1012,"text":131464},{"id":131482,"depth":1012,"text":131483},{"id":131557,"depth":1012,"text":131558},{"id":131594,"depth":1012,"text":131595},"2014-07-12","\u002Fimages\u002Fblog\u002Ffeatures\u002Fgit-introduction.jpg",{},{"title":320,"description":322},"blog\u002Fgit-introduction",[16,324],"PBIjKSGFz14eZpfYd8jOTTiwmhiU2TIdtwS_mv2QiQY",{"id":131671,"title":725,"author":920,"body":131672,"date":131759,"description":727,"extension":1591,"image":131760,"meta":131761,"navigation":1050,"path":726,"seo":131762,"stem":131763,"tags":131764,"__hash__":131765},"blog\u002Fblog\u002Frescuing-details-topaz-labs.md",{"type":922,"value":131673,"toc":131757},[131674,131679,131685,131720,131723,131726],[971,131675,131676],{},[974,131677,131678],{},"Open your image in a compatible host editor. For this demonstration the Topaz standalone editor photo labphotoFXlab will be used, however, our plug-ins can be accessed with a variety of other programs including Photoshop, Photoshop Creative Cloud, Photoshop Elements, Lightroom, iPhoto, Aperture, PaintShop Pro, Serif, and Irfanview.",[925,131680,131681],{},[963,131682],{"alt":131683,"src":131684},"labphotoFXlab","\u002Fimages\u002Fblog\u002F2014-07-08-rescuing-details-topaz-labs\u002FgaryLamott.jpg",[971,131686,131687,131690,131693,131696,131707,131714,131717],{"start":1012},[974,131688,131689],{},"Duplicate the layer (ctrl\u002Fcmd + J) and open Topaz Adjust.",[974,131691,131692],{},"Go to Global Adjustments and expand the Adaptive Exposure panel. Increase adaptive exposure and regions to bring out the shadows in the island.",[974,131694,131695],{},"Up close you will notice that artifacts have formed in the sky and water due to the exposure adjustments. Use the Brush Out tool under the Local Adjustments panel to mask out this effect from the sky and water. Increase the Edge Aware slider when brushing out around the island to maintain a precise edge. Use the Opacity slider to increase or decrease the strength of how much is brushed away.",[974,131697,131698,131699,131702,131703,131706],{},"Press ",[1107,131700,131701],{},"Apply"," to apply the effect and then press ",[1107,131704,131705],{},"Reset"," to dispose of the brush out mask so that you can apply additional effects within the Adjust program.",[974,131708,131709,131710,131713],{},"Go to the Classic Collection and apply the preset ",[1107,131711,131712],{},"Brilliant Cold",". If desired, reduce the transparency of the effect under the Finishing Touches panel. This will blend back in the original image with the effect.",[974,131715,131716],{},"Press OK to return to your host editor. Duplicate the layer and open Topaz Clarity.",[974,131718,131719],{},"In Clarity make these adjustments in dynamics and tone. Here’s what was used for this example…",[925,131721,131722],{},"Black 0.20\nMidtones 0.16\nWhite -0.35",[925,131724,131725],{},"Micro contrast 0.20\nLow contrast 0.25\nMedium contrast 0.13\nHigh contrast -0.19",[971,131727,131728,131731,131734,131741,131744,131747,131754],{"start":1360},[974,131729,131730],{},"Next, make adjustments in the HSL (hue-saturation-luminance) panel. For this example, the overall saturation was boosted to 0.25 and the green luminance was increased to around 0.15.",[974,131732,131733],{},"Press OK. Back in your host editor duplicate the image and open Topaz DeNoise.",[974,131735,131736,131737,131740],{},"Use a preset in DeNoise that will reduce all artifacts seen in the image. This particular example used the ",[1107,131738,131739],{},"JPEG – strongest"," preset. Use the upper-right preview image to navigate around the main photo. Press OK when content with the results.",[974,131742,131743],{},"When finished making all adjustments, the last step in this workflow is to prepare the image for output with detail sharpening. Duplicate the layer and open Topaz Detail.",[974,131745,131746],{},"Use the effect mask to create a mask around the island and then invert that selection.",[974,131748,131749,131750,131753],{},"Under the Creative Detail Collection apply the preset, ",[1107,131751,131752],{},"Micro Contrast Enhancement II"," to bring out details in the island. Press OK when complete.",[974,131755,131756],{},"Save the image.",{"title":998,"searchDepth":1012,"depth":1012,"links":131758},[],"2014-07-08","\u002Fimages\u002Fblog\u002Ffeatures\u002Frescuing-details-topaz-labs.jpg",{},{"title":725,"description":727},"blog\u002Frescuing-details-topaz-labs",[89],"1SNBjvjatQ-E4zlfyxdRXVTxV9xNvFLl8_0O0cq0H_U",{"id":131767,"title":548,"author":920,"body":131768,"date":132518,"description":550,"extension":1591,"image":132519,"meta":132520,"navigation":1050,"path":549,"seo":132521,"stem":132522,"tags":132523,"__hash__":132524},"blog\u002Fblog\u002Flexical-scope.md",{"type":922,"value":131769,"toc":132507},[131770,131773,131776,131779,131783,131786,131788,131791,131794,131811,131825,131828,131846,131850,131853,131856,131944,131947,131950,131953,131956,131959,131962,131966,131969,131972,131975,131986,131989,131998,132001,132004,132008,132015,132021,132023,132026,132029,132039,132042,132116,132119,132129,132135,132138,132141,132199,132202,132205,132208,132210,132213,132216,132347,132350,132498,132501,132504],[925,131771,131772],{},"Before getting into more details, let's have a look how JavaScript engine works when it comes to compilation.\nHere is a breakdown of the parts:",[1655,131774,79028],{"id":131775},"engine",[925,131777,131778],{},"Responsible for start-to-finish compilation and execution of our JavaScript program.",[1655,131780,131782],{"id":131781},"compiler","Compiler",[925,131784,131785],{},"One of Engine’s friends; handles all the dirty work of parsing and code-generation",[1655,131787,91573],{"id":91927},[925,131789,131790],{},"Another friend of Engine; collects and maintains a look-up list of\nall the declared identifiers (variables), and enforces a strict set of\nrules as to how these are accessible to currently executing code.",[925,131792,131793],{},"Take the following statement:",[993,131795,131797],{"className":995,"code":131796,"language":997,"meta":998,"style":998},"var a = 2;\n",[941,131798,131799],{"__ignoreMap":998},[1002,131800,131801,131803,131805,131807,131809],{"class":1004,"line":1005},[1002,131802,18311],{"class":1015},[1002,131804,85662],{"class":1030},[1002,131806,2393],{"class":1015},[1002,131808,10248],{"class":1019},[1002,131810,1407],{"class":1030},[1530,131812,131813,131816],{},[974,131814,131815],{},"Encountering var a, Compiler asks Scope to see if a variable a\nalready exists for that particular scope collection. If so, Compiler\nignores this declaration and moves on. Otherwise, Compiler asks\nScope to declare a new variable called a for that scope collection.",[974,131817,131818,131819,131821,131822,131824],{},"Compiler then produces code for Engine to later execute, to handle\nthe a = 2 assignment. The code Engine runs will first ask Scope if there is a variable called ",[1107,131820,933],{}," accessible in the current scope collection.\nIf so, Engine uses that variable. If not, Engine looks elsewhere.\nIf Engine eventually finds ",[1107,131823,933],{}," variable, it assigns the value 2 to it.\nIf not, Engine will raise its hand and yell out an error!",[925,131826,131827],{},"An LHS look-up is done when a variable appears on\nthe lefthand side of an assignment operation and an RHS look-up is\ndone when a variable appears on the righthand side of an assignment\noperation.",[925,131829,131830,131831,131834,131835,131838,131839,131842,131843,131845],{},"Two mechanisms in JavaScript can ",[1107,131832,131833],{},"cheat"," lexical scope: ",[1107,131836,131837],{},"eval(..)"," and\n",[1107,131840,131841],{},"with",". The former can modify existing lexical scope (at runtime) by\nevaluating a string of ",[1107,131844,941],{}," that has one or more declarations in it.\nThe latter essentially creates a whole new lexical scope (again, at runtime)\nby creating an object reference as a scope and that object’s properties\nas scoped identifiers.\nThere are two predominant models for how scope works. The first of\nthese is by far the most common, used by the vast majority of programming\nlanguages. It’s called the lexical scope, and we will examine it in\ndepth. The other model, which is still used by some languages (such\nas Bash scripting, some modes in Perl, etc) is called dynamic scope.",[953,131847,131849],{"id":131848},"lex-time","Lex-time",[925,131851,131852],{},"The first traditional phase of a standard\nlanguage compiler is called lexing (a.k.a., tokenizing). If you recall, the\nlexing process examines a string of source code characters and assigns\nsemantic meaning to the tokens as a result of some stateful parsing.\nIt is this concept that provides the foundation to understand what\nlexical scope is and where the name comes from.\nTo define it somewhat circularly, lexical scope is scope that is defined\nat lexing time. In other words, lexical scope is based on where variables\nand blocks of scope are authored, by you, at write time, and thus is\n(mostly) set in stone by the time the lexer processes your code.\nWe will see in a little bit that there are some ways to cheat lexical\nscope, thereby modifying it after the lexer has passed by, but\nthese are frowned upon. It is considered best practice to treat\nlexical scope as, in fact, lexical-only.",[925,131854,131855],{},"Let’s consider this block of code:",[993,131857,131859],{"className":995,"code":131858,"language":997,"meta":998,"style":998},"function foo(a) {\n var b = a * 2;\n function bar(c) {\n console.log(a, b, c);\n }\n bar(b * 3);\n}\nfoo(2); \u002F\u002F 2, 4, 12\n",[941,131860,131861,131873,131889,131901,131910,131914,131927,131931],{"__ignoreMap":998},[1002,131862,131863,131865,131867,131869,131871],{"class":1004,"line":1005},[1002,131864,6965],{"class":1015},[1002,131866,34640],{"class":1026},[1002,131868,1031],{"class":1030},[1002,131870,933],{"class":2378},[1002,131872,2382],{"class":1030},[1002,131874,131875,131877,131879,131881,131883,131885,131887],{"class":1004,"line":1012},[1002,131876,28293],{"class":1015},[1002,131878,85667],{"class":1030},[1002,131880,2393],{"class":1015},[1002,131882,85662],{"class":1030},[1002,131884,4703],{"class":1015},[1002,131886,10248],{"class":1019},[1002,131888,1407],{"class":1030},[1002,131890,131891,131893,131895,131897,131899],{"class":1004,"line":1047},[1002,131892,18965],{"class":1015},[1002,131894,38219],{"class":1026},[1002,131896,1031],{"class":1030},[1002,131898,77116],{"class":2378},[1002,131900,2382],{"class":1030},[1002,131902,131903,131905,131907],{"class":1004,"line":1054},[1002,131904,3030],{"class":1030},[1002,131906,2886],{"class":1026},[1002,131908,131909],{"class":1030},"(a, b, c);\n",[1002,131911,131912],{"class":1004,"line":1060},[1002,131913,1269],{"class":1030},[1002,131915,131916,131918,131921,131923,131925],{"class":1004,"line":1272},[1002,131917,100548],{"class":1026},[1002,131919,131920],{"class":1030},"(b ",[1002,131922,4703],{"class":1015},[1002,131924,17813],{"class":1019},[1002,131926,1085],{"class":1030},[1002,131928,131929],{"class":1004,"line":1348},[1002,131930,1170],{"class":1030},[1002,131932,131933,131935,131937,131939,131941],{"class":1004,"line":1354},[1002,131934,16521],{"class":1026},[1002,131936,1031],{"class":1030},[1002,131938,5681],{"class":1019},[1002,131940,18256],{"class":1030},[1002,131942,131943],{"class":1008},"\u002F\u002F 2, 4, 12\n",[925,131945,131946],{},"There are three nested scopes inherent in this code example. It may be\nhelpful to think about these scopes as bubbles inside of each other.",[925,131948,131949],{},"Bubble 1 encompasses the global scope and has just one identifier in\nit: foo.",[925,131951,131952],{},"Bubble 2 encompasses the scope of foo, which includes the three\nidentifiers: a, bar, and b.",[925,131954,131955],{},"Bubble 3 encompasses the scope of bar, and it includes just one identifier:\nc.",[925,131957,131958],{},"Scope bubbles are defined by where the blocks of scope are written,\nwhich one is nested inside the other, etc. The bubble for bar is entirely contained within the bubble for foo, because (and only because) that’s where we chose to define the function\nbar.",[925,131960,131961],{},"Notice that these nested bubbles are strictly nested. We’re not talking\nabout Venn diagrams where the bubbles can cross boundaries. In other\nwords, no bubble for some function can simultaneously exist (partially)\ninside two other outer scope bubbles, just as no function can\npartially be inside each of two-parent functions.",[953,131963,131965],{"id":131964},"lookups","Lookups",[925,131967,131968],{},"The structure and relative placement of these scope bubbles fully explains\nto the engine all the places it needs to look to find an identifier.",[925,131970,131971],{},"In the previous code snippet, the engine executes the con\nsole.log(..) statement and goes looking for the three referenced\nvariables a, b, and c. It first starts with the innermost scope bubble, the\nscope of the bar(..) function. It won’t find a there, so it goes up one\nlevel, out to the next nearest scope bubble, the scope of foo(..). It\nfinds a there, and so it uses that a. Same thing for b. But c, it does find\ninside of bar(..).",[925,131973,131974],{},"Had there been a c both inside of bar(..) and inside of foo(..), the\nconsole.log(..) statement would have found and used the one in\nbar(..), never getting to the one in foo(..).",[925,131976,131977,131978,131981,131982,131985],{},"Scope look-up stops once it finds the first match. The same identifier\nname can be specified at multiple layers of nested scope, which is called\n",[1107,131979,131980],{},"shadowing"," (the inner identifier ",[1107,131983,131984],{},"shadows"," the outer identifier). Regardless\nof shadowing, scope look-up always starts at the innermost\nscope being executed at the time, and works its way outward\u002Fupward\nuntil the first match, and stops.",[925,131987,131988],{},"Global variables are automatically also properties of the global\nobject (window in browsers, etc.), so it is possible to reference\na global variable not directly by its lexical name, but instead\nindirectly as a property reference of the global object.",[993,131990,131992],{"className":995,"code":131991,"language":997,"meta":998,"style":998},"window.a;\n",[941,131993,131994],{"__ignoreMap":998},[1002,131995,131996],{"class":1004,"line":1005},[1002,131997,131991],{"class":1030},[925,131999,132000],{},"This technique gives access to a global variable that would\notherwise be inaccessible due to it being shadowed. However,\nnon-global shadowed variables cannot be accessed.",[925,132002,132003],{},"No matter where a function is invoked from, or even how it is invoked,\nits lexical scope is only defined by where the function was declared.\nThe lexical scope look-up process only applies to first-class identifiers,\nsuch as the a, b, and c. If you had a reference to foo.bar.baz in a piece\nof code, the lexical scope look-up would apply to finding the foo\nidentifier, but once it locates that variable, object property-access rules\ntake over to resolve the bar and baz properties, respectively.",[953,132005,132007],{"id":132006},"cheating-lexical","Cheating Lexical",[925,132009,132010,132011,132014],{},"If lexical scope is defined only by where a function is declared, which\nis entirely an author-time decision, how could there possibly be a chance\nto ",[1107,132012,132013],{},"modify"," (a.k.a., cheat) lexical scope at runtime?",[925,132016,132017,132018],{},"JavaScript has two such mechanisms. Both of them are equally\nfrowned upon in the wider community as bad practices to use in your\ncode. But the typical arguments against them are often missing the\nmost important point: ",[1107,132019,132020],{},"cheating lexical scope leads to poorer performance.",[1655,132022,101537],{"id":101537},[925,132024,132025],{},"The eval(..) function in JavaScript takes a string as an argument and\ntreats the contents of the string as if it had been authored code\nat that point in the program. In other words, you can programmatically\ngenerate code inside of your authored code, and run the generated\ncode as if it had been there at author time.",[925,132027,132028],{},"Evaluating eval(..) in that light, it should be clear\nhow eval(..) allows you to modify the lexical scope environment by cheating and pretending that author-time (a.k.a., lexical) code was\nthere all along.",[925,132030,132031,132032,16529,132035,132038],{},"On subsequent lines of code after an eval(..) has executed, the engine\nwill not ",[1107,132033,132034],{},"know",[1107,132036,132037],{},"care"," that the previous code in question was dynamically\ninterpreted and thus modified the lexical scope\nenvironment. The engine will simply perform its lexical scope lookups\nas it always does.",[925,132040,132041],{},"Consider the following code:",[993,132043,132045],{"className":995,"code":132044,"language":997,"meta":998,"style":998},"function foo(str, a) {\n eval(str); \u002F\u002F cheating!\n console.log(a, b);\n}\nvar b = 2;\nfoo('var b = 3;', 1); \u002F\u002F 1, 3\n",[941,132046,132047,132063,132074,132082,132086,132098],{"__ignoreMap":998},[1002,132048,132049,132051,132053,132055,132057,132059,132061],{"class":1004,"line":1005},[1002,132050,6965],{"class":1015},[1002,132052,34640],{"class":1026},[1002,132054,1031],{"class":1030},[1002,132056,5848],{"class":2378},[1002,132058,1251],{"class":1030},[1002,132060,933],{"class":2378},[1002,132062,2382],{"class":1030},[1002,132064,132065,132068,132071],{"class":1004,"line":1012},[1002,132066,132067],{"class":1026}," eval",[1002,132069,132070],{"class":1030},"(str); ",[1002,132072,132073],{"class":1008},"\u002F\u002F cheating!\n",[1002,132075,132076,132078,132080],{"class":1004,"line":1047},[1002,132077,6977],{"class":1030},[1002,132079,2886],{"class":1026},[1002,132081,31636],{"class":1030},[1002,132083,132084],{"class":1004,"line":1054},[1002,132085,1170],{"class":1030},[1002,132087,132088,132090,132092,132094,132096],{"class":1004,"line":1060},[1002,132089,18311],{"class":1015},[1002,132091,85667],{"class":1030},[1002,132093,2393],{"class":1015},[1002,132095,10248],{"class":1019},[1002,132097,1407],{"class":1030},[1002,132099,132100,132102,132104,132107,132109,132111,132113],{"class":1004,"line":1272},[1002,132101,16521],{"class":1026},[1002,132103,1031],{"class":1030},[1002,132105,132106],{"class":1034},"'var b = 3;'",[1002,132108,1251],{"class":1030},[1002,132110,6211],{"class":1019},[1002,132112,18256],{"class":1030},[1002,132114,132115],{"class":1008},"\u002F\u002F 1, 3\n",[925,132117,132118],{},"The string \"var b = 3;\" is treated, at the point of the eval(..) call,\nas code that was there all along. Because that code happens to declare\na new variable b, it modifies the existing lexical scope of foo(..).\nAs mentioned earlier, this code creates variable b inside\nof foo(..) that shadows the b that was declared in the outer (global)\nscope.",[925,132120,132121,132122,40545,132125,132128],{},"When the console.log(..) call occurs, it finds both a and b in the\nscope of foo(..), and never finds the outer b. Thus, we print out ",[1107,132123,132124],{},"1,\n3",[1107,132126,132127],{},"1, 2"," as would have normally been the case.",[925,132130,132131,132132,132134],{},"In this example, for simplicity sake, the string of ",[1107,132133,941],{}," we pass\nin was a fixed literal. But it could easily have been programmatically\ncreated by adding characters together based on your\nprogram’s logic. eval(..) is usually used to execute dynamically\ncreated code, as dynamically evaluating essentially static\ncode from a string literal would provide no real benefit to just\nauthoring the code directly.",[925,132136,132137],{},"By default, if a string of code that eval(..) executes contains one or\nmore declarations (either variables or functions), this action modifies\nthe existing lexical scope in which the eval(..) resides. Technically,\neval(..) can be invoked indirectly, through various tricks (beyond\nour discussion here), which causes it to instead execute in the context of the global scope, thus modifying it.\nBut in either case, eval(..) can at runtime modify an author-time lexical scope.",[925,132139,132140],{},"eval(..) when used in a strict-mode program, operates in its\nown lexical scope, which means declarations made inside of\nthe eval() do not actually modify the enclosing scope.",[993,132142,132144],{"className":995,"code":132143,"language":997,"meta":998,"style":998},"function foo(str) {\n 'use strict';\n eval(str);\n console.log(a); \u002F\u002F ReferenceError: a is not defined\n}\nfoo('var a = 2');\n",[941,132145,132146,132158,132165,132172,132184,132188],{"__ignoreMap":998},[1002,132147,132148,132150,132152,132154,132156],{"class":1004,"line":1005},[1002,132149,6965],{"class":1015},[1002,132151,34640],{"class":1026},[1002,132153,1031],{"class":1030},[1002,132155,5848],{"class":2378},[1002,132157,2382],{"class":1030},[1002,132159,132160,132163],{"class":1004,"line":1012},[1002,132161,132162],{"class":1034}," 'use strict'",[1002,132164,1407],{"class":1030},[1002,132166,132167,132169],{"class":1004,"line":1047},[1002,132168,132067],{"class":1026},[1002,132170,132171],{"class":1030},"(str);\n",[1002,132173,132174,132176,132178,132181],{"class":1004,"line":1054},[1002,132175,6977],{"class":1030},[1002,132177,2886],{"class":1026},[1002,132179,132180],{"class":1030},"(a); ",[1002,132182,132183],{"class":1008},"\u002F\u002F ReferenceError: a is not defined\n",[1002,132185,132186],{"class":1004,"line":1060},[1002,132187,1170],{"class":1030},[1002,132189,132190,132192,132194,132197],{"class":1004,"line":1272},[1002,132191,16521],{"class":1026},[1002,132193,1031],{"class":1030},[1002,132195,132196],{"class":1034},"'var a = 2'",[1002,132198,1085],{"class":1030},[925,132200,132201],{},"There are other facilities in JavaScript that amount to a very similar\neffect to eval(..). setTimeout(..) and setInterval(..) can take a\nstring for their respective first argument, the contents of which are\nevaluated as the code of a dynamically generated function. This is old,\nlegacy behaviour and long-since deprecated. Don’t do it!",[925,132203,132204],{},"The new Function(..) function constructor similarly takes a string\nof code in its last argument to turn into a dynamically generated function\n(the first argument(s), if any, are the named parameters for the\nnew function). This function-constructor syntax is slightly safer than\neval(..), but it should still be avoided in your code.",[925,132206,132207],{},"The use-cases for dynamically generating code inside your program\nare incredibly rare, as the performance degradations are rarely\nworth the capability.",[953,132209,131841],{"id":131841},[925,132211,132212],{},"The other frowned-upon (and now deprecated!) feature in JavaScript\nthat cheats lexical scope is the with keyword. Multiple valid\nways can be explained, but I will choose here to explain it\nfrom the perspective of how it interacts with and affects lexical scope.",[925,132214,132215],{},"with is typically explained as a shorthand for making multiple property\nreferences against an object without repeating the object reference\nitself each time.",[993,132217,132219],{"className":995,"code":132218,"language":997,"meta":998,"style":998},"var obj = {\n a: 1,\n b: 2,\n};\n\n\u002F\u002F more \"tedious\" to repeat \"obj\"\nobj.a = 2;\nobj.b = 3;\nobj.c = 4;\n\n\u002F\u002F \"easier\" short-hand\nwith (obj) {\n a = 3;\n b = 4;\n c = 5;\n}\n",[941,132220,132221,132231,132240,132249,132253,132257,132262,132273,132284,132295,132299,132304,132311,132322,132332,132343],{"__ignoreMap":998},[1002,132222,132223,132225,132227,132229],{"class":1004,"line":1005},[1002,132224,18311],{"class":1015},[1002,132226,104651],{"class":1030},[1002,132228,2393],{"class":1015},[1002,132230,1457],{"class":1030},[1002,132232,132233,132236,132238],{"class":1004,"line":1012},[1002,132234,132235],{"class":1030}," a: ",[1002,132237,6211],{"class":1019},[1002,132239,1143],{"class":1030},[1002,132241,132242,132245,132247],{"class":1004,"line":1047},[1002,132243,132244],{"class":1030}," b: ",[1002,132246,5681],{"class":1019},[1002,132248,1143],{"class":1030},[1002,132250,132251],{"class":1004,"line":1054},[1002,132252,1517],{"class":1030},[1002,132254,132255],{"class":1004,"line":1060},[1002,132256,1051],{"emptyLinePlaceholder":1050},[1002,132258,132259],{"class":1004,"line":1272},[1002,132260,132261],{"class":1008},"\u002F\u002F more \"tedious\" to repeat \"obj\"\n",[1002,132263,132264,132267,132269,132271],{"class":1004,"line":1348},[1002,132265,132266],{"class":1030},"obj.a ",[1002,132268,2393],{"class":1015},[1002,132270,10248],{"class":1019},[1002,132272,1407],{"class":1030},[1002,132274,132275,132278,132280,132282],{"class":1004,"line":1354},[1002,132276,132277],{"class":1030},"obj.b ",[1002,132279,2393],{"class":1015},[1002,132281,17813],{"class":1019},[1002,132283,1407],{"class":1030},[1002,132285,132286,132289,132291,132293],{"class":1004,"line":1360},[1002,132287,132288],{"class":1030},"obj.c ",[1002,132290,2393],{"class":1015},[1002,132292,2414],{"class":1019},[1002,132294,1407],{"class":1030},[1002,132296,132297],{"class":1004,"line":1366},[1002,132298,1051],{"emptyLinePlaceholder":1050},[1002,132300,132301],{"class":1004,"line":1946},[1002,132302,132303],{"class":1008},"\u002F\u002F \"easier\" short-hand\n",[1002,132305,132306,132308],{"class":1004,"line":1956},[1002,132307,131841],{"class":1015},[1002,132309,132310],{"class":1030}," (obj) {\n",[1002,132312,132313,132316,132318,132320],{"class":1004,"line":1961},[1002,132314,132315],{"class":1030}," a ",[1002,132317,2393],{"class":1015},[1002,132319,17813],{"class":1019},[1002,132321,1407],{"class":1030},[1002,132323,132324,132326,132328,132330],{"class":1004,"line":1971},[1002,132325,98670],{"class":1030},[1002,132327,2393],{"class":1015},[1002,132329,2414],{"class":1019},[1002,132331,1407],{"class":1030},[1002,132333,132334,132337,132339,132341],{"class":1004,"line":1980},[1002,132335,132336],{"class":1030}," c ",[1002,132338,2393],{"class":1015},[1002,132340,6190],{"class":1019},[1002,132342,1407],{"class":1030},[1002,132344,132345],{"class":1004,"line":1985},[1002,132346,1170],{"class":1030},[925,132348,132349],{},"However, there’s much more going on here than just a convenient\nshorthand for object property access. Consider:",[993,132351,132353],{"className":995,"code":132352,"language":997,"meta":998,"style":998},"function foo(obj) {\n with (obj) {\n a = 2;\n }\n}\n\nvar o1 = {\n a: 3,\n};\n\nvar o2 = {\n b: 3,\n};\n\nfoo(o1);\nconsole.log(o1.a); \u002F\u002F 2\nfoo(o2);\nconsole.log(o2.a); \u002F\u002F undefined\nconsole.log(a); \u002F\u002F 2—Oops, leaked global!\n",[941,132354,132355,132367,132374,132385,132389,132393,132397,132408,132416,132420,132424,132435,132443,132447,132451,132458,132469,132476,132487],{"__ignoreMap":998},[1002,132356,132357,132359,132361,132363,132365],{"class":1004,"line":1005},[1002,132358,6965],{"class":1015},[1002,132360,34640],{"class":1026},[1002,132362,1031],{"class":1030},[1002,132364,59497],{"class":2378},[1002,132366,2382],{"class":1030},[1002,132368,132369,132372],{"class":1004,"line":1012},[1002,132370,132371],{"class":1015}," with",[1002,132373,132310],{"class":1030},[1002,132375,132376,132379,132381,132383],{"class":1004,"line":1047},[1002,132377,132378],{"class":1030}," a ",[1002,132380,2393],{"class":1015},[1002,132382,10248],{"class":1019},[1002,132384,1407],{"class":1030},[1002,132386,132387],{"class":1004,"line":1054},[1002,132388,1269],{"class":1030},[1002,132390,132391],{"class":1004,"line":1060},[1002,132392,1170],{"class":1030},[1002,132394,132395],{"class":1004,"line":1272},[1002,132396,1051],{"emptyLinePlaceholder":1050},[1002,132398,132399,132401,132404,132406],{"class":1004,"line":1348},[1002,132400,18311],{"class":1015},[1002,132402,132403],{"class":1030}," o1 ",[1002,132405,2393],{"class":1015},[1002,132407,1457],{"class":1030},[1002,132409,132410,132412,132414],{"class":1004,"line":1354},[1002,132411,132235],{"class":1030},[1002,132413,2796],{"class":1019},[1002,132415,1143],{"class":1030},[1002,132417,132418],{"class":1004,"line":1360},[1002,132419,1517],{"class":1030},[1002,132421,132422],{"class":1004,"line":1366},[1002,132423,1051],{"emptyLinePlaceholder":1050},[1002,132425,132426,132428,132431,132433],{"class":1004,"line":1946},[1002,132427,18311],{"class":1015},[1002,132429,132430],{"class":1030}," o2 ",[1002,132432,2393],{"class":1015},[1002,132434,1457],{"class":1030},[1002,132436,132437,132439,132441],{"class":1004,"line":1956},[1002,132438,132244],{"class":1030},[1002,132440,2796],{"class":1019},[1002,132442,1143],{"class":1030},[1002,132444,132445],{"class":1004,"line":1961},[1002,132446,1517],{"class":1030},[1002,132448,132449],{"class":1004,"line":1971},[1002,132450,1051],{"emptyLinePlaceholder":1050},[1002,132452,132453,132455],{"class":1004,"line":1980},[1002,132454,16521],{"class":1026},[1002,132456,132457],{"class":1030},"(o1);\n",[1002,132459,132460,132462,132464,132467],{"class":1004,"line":1985},[1002,132461,2883],{"class":1030},[1002,132463,2886],{"class":1026},[1002,132465,132466],{"class":1030},"(o1.a); ",[1002,132468,31325],{"class":1008},[1002,132470,132471,132473],{"class":1004,"line":1995},[1002,132472,16521],{"class":1026},[1002,132474,132475],{"class":1030},"(o2);\n",[1002,132477,132478,132480,132482,132485],{"class":1004,"line":2006},[1002,132479,2883],{"class":1030},[1002,132481,2886],{"class":1026},[1002,132483,132484],{"class":1030},"(o2.a); ",[1002,132486,26478],{"class":1008},[1002,132488,132489,132491,132493,132495],{"class":1004,"line":2011},[1002,132490,2883],{"class":1030},[1002,132492,2886],{"class":1026},[1002,132494,132180],{"class":1030},[1002,132496,132497],{"class":1008},"\u002F\u002F 2—Oops, leaked global!\n",[925,132499,132500],{},"In this code example, two objects o1 and o2 are created. One has a\nproperty, and the other does not. The foo(..) function takes an object\nreference obj as an argument and calls with (obj) { .. } on the\nreference. Inside the with block, we make what appears to be a normal\nlexical reference to a variable a, an LHS reference in fact (see Chapter\n1), to assign to it the value of 2.",[925,132502,132503],{},"When we pass in o1, the = 2 assignment finds the property o1.a\nand assigns it the value 2, as reflected in the subsequent con\nsole.log(o1.a) statement. However, when we pass in o2 since it does not have a property, no such property is created, and o2.a remains\nundefined.",[1579,132505,132506],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":132508},[132509,132510,132511,132512,132513,132514,132517],{"id":131775,"depth":1047,"text":79028},{"id":131781,"depth":1047,"text":131782},{"id":91927,"depth":1047,"text":91573},{"id":131848,"depth":1012,"text":131849},{"id":131964,"depth":1012,"text":131965},{"id":132006,"depth":1012,"text":132007,"children":132515},[132516],{"id":101537,"depth":1047,"text":101537},{"id":131841,"depth":1012,"text":131841},"2014-07-06","\u002Fimages\u002Fblog\u002Ffeatures\u002Flexical-scope.jpg",{},{"title":548,"description":550},"blog\u002Flexical-scope",[16,17],"eFhjqNW403owxD8qeezYCsVm0HfYQdLvrG2CryaI1u8",{"id":132526,"title":12,"author":920,"body":132527,"date":133349,"description":14,"extension":1591,"image":133350,"meta":133351,"navigation":1050,"path":13,"seo":133352,"stem":133353,"tags":133354,"__hash__":133355},"blog\u002Fblog\u002Fangular-controllers-share-state.md",{"type":922,"value":132528,"toc":133344},[132529,132532,132536,132539,132601,132607,132659,132676,132679,132686,132697,132853,132856,132867,132976,132979,133082,133086,133089,133159,133162,133224,133241,133341],[925,132530,132531],{},"AngularJS makes you write code with testability, dependency injection, and modularity. You didn't need to create a class to contain that piece of conversion logic, you needed a filter. But there will be situations where one controller needs to talk to another controller. This is a result of keeping all dependencies handled by a Dependency Injection framework. When your controller has to pass state to another controller, that's where you need a service.",[953,132533,132535],{"id":132534},"state-service","State Service",[925,132537,132538],{},"A novice Angular developer would come with a solution like the following.",[993,132540,132542],{"className":995,"code":132541,"language":997,"meta":998,"style":998},"angular.module('services', []).factory('state', function () {\n state;\n\n return {\n state: state,\n };\n});\n",[941,132543,132544,132573,132578,132582,132588,132593,132597],{"__ignoreMap":998},[1002,132545,132546,132549,132551,132553,132556,132559,132562,132564,132567,132569,132571],{"class":1004,"line":1005},[1002,132547,132548],{"class":1030},"angular.",[1002,132550,1227],{"class":1026},[1002,132552,1031],{"class":1030},[1002,132554,132555],{"class":1034},"'services'",[1002,132557,132558],{"class":1030},", []).",[1002,132560,132561],{"class":1026},"factory",[1002,132563,1031],{"class":1030},[1002,132565,132566],{"class":1034},"'state'",[1002,132568,1251],{"class":1030},[1002,132570,6965],{"class":1015},[1002,132572,9772],{"class":1030},[1002,132574,132575],{"class":1004,"line":1012},[1002,132576,132577],{"class":1030}," state;\n",[1002,132579,132580],{"class":1004,"line":1047},[1002,132581,1051],{"emptyLinePlaceholder":1050},[1002,132583,132584,132586],{"class":1004,"line":1054},[1002,132585,15066],{"class":1015},[1002,132587,1457],{"class":1030},[1002,132589,132590],{"class":1004,"line":1060},[1002,132591,132592],{"class":1030}," state: state,\n",[1002,132594,132595],{"class":1004,"line":1272},[1002,132596,15113],{"class":1030},[1002,132598,132599],{"class":1004,"line":1348},[1002,132600,2804],{"class":1030},[925,132602,132603,132604],{},"What's the issue with this solution? In many cases, you may not even notice it. The answer is ",[1107,132605,132606],{},"Objects and arrays are passed by reference. Values are not.",[993,132608,132610],{"className":995,"code":132609,"language":997,"meta":998,"style":998},"var state = { name: \"one\" };\nvar controller = { name: state.name };\nstate. = \"two\";\ncontroller.name; \u002F\u002F \"one\"\n",[941,132611,132612,132627,132639,132651],{"__ignoreMap":998},[1002,132613,132614,132616,132618,132620,132622,132625],{"class":1004,"line":1005},[1002,132615,18311],{"class":1015},[1002,132617,51909],{"class":1030},[1002,132619,2393],{"class":1015},[1002,132621,99627],{"class":1030},[1002,132623,132624],{"class":1034},"\"one\"",[1002,132626,9444],{"class":1030},[1002,132628,132629,132631,132634,132636],{"class":1004,"line":1012},[1002,132630,18311],{"class":1015},[1002,132632,132633],{"class":1030}," controller ",[1002,132635,2393],{"class":1015},[1002,132637,132638],{"class":1030}," { name: state.name };\n",[1002,132640,132641,132644,132646,132649],{"class":1004,"line":1047},[1002,132642,132643],{"class":1030},"state. ",[1002,132645,2393],{"class":1015},[1002,132647,132648],{"class":1034}," \"two\"",[1002,132650,1407],{"class":1030},[1002,132652,132653,132656],{"class":1004,"line":1054},[1002,132654,132655],{"class":1030},"controller.name; ",[1002,132657,132658],{"class":1008},"\u002F\u002F \"one\"\n",[925,132660,132661,132662,132665,132666,132668,132669,132675],{},"So updating the name property of this ",[1107,132663,132664],{},"state service"," does not propagate changes to the scope of each controller. If your state happens to be an array or an object, and you stick to modifying it rather than reassigning it, this would still work (it is possible to implement the ",[1107,132667,132664],{}," using a shared object instead, I’ve added an example of this at the bottom of the page). However, AngularJS’s $scope is a bit more complicated than my silly example, and has some inner machinery that will not react as you expect. You see, in order to keep the DOM and the data on the scope in sync, also known as two way binding, it uses something called the ",[933,132670,132674],{"style":132671,"href":132672,"target":132673},"font-weight: inherit; font-style: inherit; color: #1f0909;","http:\u002F\u002Fdocs.angularjs.org\u002Fguide\u002Fconcepts","_blank","digest cycle",". A new digest cycle is only triggered if AngularJS can recognize a change being made on the scope. Since changes are made far, far away, it will be unable to do so. Bummer!",[953,132677,132678],{"id":4871},"Events",[925,132680,132681,132682,132685],{},"Luckily, we have events. In AngularJS, these are transmitted through the rootScope and bubble up through all scopes.\nUsing ",[941,132683,132684],{},"$scope.$on"," we can attach listeners to these and react to changes in our state service!\nSo lets try again. In steps, what we want to do is this:",[1530,132687,132688,132691,132694],{},[974,132689,132690],{},"Set an initial state and expose this",[974,132692,132693],{},"Expose an updating function",[974,132695,132696],{},"Let this function broadcast changes",[993,132698,132700],{"className":995,"code":132699,"language":997,"meta":998,"style":998},"angular.module('services', []).factory('state', function ($rootScope) {\n 'use strict';\n\n state;\n\n broadcast = function (state) {\n $rootScope.$broadcast('state.update', state);\n };\n\n update = function (newState) {\n state = newState;\n broadcast(state);\n };\n\n return {\n update: update,\n state: state,\n };\n});\n",[941,132701,132702,132731,132737,132741,132745,132749,132764,132780,132784,132788,132804,132814,132822,132826,132830,132836,132841,132845,132849],{"__ignoreMap":998},[1002,132703,132704,132706,132708,132710,132712,132714,132716,132718,132720,132722,132724,132726,132729],{"class":1004,"line":1005},[1002,132705,132548],{"class":1030},[1002,132707,1227],{"class":1026},[1002,132709,1031],{"class":1030},[1002,132711,132555],{"class":1034},[1002,132713,132558],{"class":1030},[1002,132715,132561],{"class":1026},[1002,132717,1031],{"class":1030},[1002,132719,132566],{"class":1034},[1002,132721,1251],{"class":1030},[1002,132723,6965],{"class":1015},[1002,132725,6513],{"class":1030},[1002,132727,132728],{"class":2378},"$rootScope",[1002,132730,2382],{"class":1030},[1002,132732,132733,132735],{"class":1004,"line":1012},[1002,132734,132162],{"class":1034},[1002,132736,1407],{"class":1030},[1002,132738,132739],{"class":1004,"line":1047},[1002,132740,1051],{"emptyLinePlaceholder":1050},[1002,132742,132743],{"class":1004,"line":1054},[1002,132744,132577],{"class":1030},[1002,132746,132747],{"class":1004,"line":1060},[1002,132748,1051],{"emptyLinePlaceholder":1050},[1002,132750,132751,132754,132756,132758,132760,132762],{"class":1004,"line":1272},[1002,132752,132753],{"class":1026}," broadcast",[1002,132755,1023],{"class":1015},[1002,132757,8457],{"class":1015},[1002,132759,6513],{"class":1030},[1002,132761,8589],{"class":2378},[1002,132763,2382],{"class":1030},[1002,132765,132766,132769,132772,132774,132777],{"class":1004,"line":1348},[1002,132767,132768],{"class":1030}," $rootScope.",[1002,132770,132771],{"class":1026},"$broadcast",[1002,132773,1031],{"class":1030},[1002,132775,132776],{"class":1034},"'state.update'",[1002,132778,132779],{"class":1030},", state);\n",[1002,132781,132782],{"class":1004,"line":1354},[1002,132783,15113],{"class":1030},[1002,132785,132786],{"class":1004,"line":1360},[1002,132787,1051],{"emptyLinePlaceholder":1050},[1002,132789,132790,132793,132795,132797,132799,132802],{"class":1004,"line":1366},[1002,132791,132792],{"class":1026}," update",[1002,132794,1023],{"class":1015},[1002,132796,8457],{"class":1015},[1002,132798,6513],{"class":1030},[1002,132800,132801],{"class":2378},"newState",[1002,132803,2382],{"class":1030},[1002,132805,132806,132809,132811],{"class":1004,"line":1946},[1002,132807,132808],{"class":1030}," state ",[1002,132810,2393],{"class":1015},[1002,132812,132813],{"class":1030}," newState;\n",[1002,132815,132816,132819],{"class":1004,"line":1956},[1002,132817,132818],{"class":1026}," broadcast",[1002,132820,132821],{"class":1030},"(state);\n",[1002,132823,132824],{"class":1004,"line":1961},[1002,132825,15113],{"class":1030},[1002,132827,132828],{"class":1004,"line":1971},[1002,132829,1051],{"emptyLinePlaceholder":1050},[1002,132831,132832,132834],{"class":1004,"line":1980},[1002,132833,15066],{"class":1015},[1002,132835,1457],{"class":1030},[1002,132837,132838],{"class":1004,"line":1985},[1002,132839,132840],{"class":1030}," update: update,\n",[1002,132842,132843],{"class":1004,"line":1995},[1002,132844,132592],{"class":1030},[1002,132846,132847],{"class":1004,"line":2006},[1002,132848,15113],{"class":1030},[1002,132850,132851],{"class":1004,"line":2011},[1002,132852,2804],{"class":1030},[925,132854,132855],{},"And on the controller side:",[1530,132857,132858,132861,132864],{},[974,132859,132860],{},"Get the initial state",[974,132862,132863],{},"Set up a listener on the change event",[974,132865,132866],{},"Update the state when needed",[993,132868,132870],{"className":995,"code":132869,"language":997,"meta":998,"style":998},"angular.module('controllers', ['services'])\n .factory('MainCtrl', function ($scope, state) {\n $scope.state = state.state;\n\n $scope.('state.update', function (newState) {\n $scope.state = newState;\n });\n\n $scope.update = state.update;\n });\n",[941,132871,132872,132889,132914,132924,132928,132945,132954,132958,132962,132972],{"__ignoreMap":998},[1002,132873,132874,132876,132878,132880,132883,132885,132887],{"class":1004,"line":1005},[1002,132875,132548],{"class":1030},[1002,132877,1227],{"class":1026},[1002,132879,1031],{"class":1030},[1002,132881,132882],{"class":1034},"'controllers'",[1002,132884,47455],{"class":1030},[1002,132886,132555],{"class":1034},[1002,132888,30641],{"class":1030},[1002,132890,132891,132893,132895,132897,132900,132902,132904,132906,132908,132910,132912],{"class":1004,"line":1012},[1002,132892,3794],{"class":1030},[1002,132894,132561],{"class":1026},[1002,132896,1031],{"class":1030},[1002,132898,132899],{"class":1034},"'MainCtrl'",[1002,132901,1251],{"class":1030},[1002,132903,6965],{"class":1015},[1002,132905,6513],{"class":1030},[1002,132907,47648],{"class":2378},[1002,132909,1251],{"class":1030},[1002,132911,8589],{"class":2378},[1002,132913,2382],{"class":1030},[1002,132915,132916,132919,132921],{"class":1004,"line":1047},[1002,132917,132918],{"class":1030}," $scope.state ",[1002,132920,2393],{"class":1015},[1002,132922,132923],{"class":1030}," state.state;\n",[1002,132925,132926],{"class":1004,"line":1054},[1002,132927,1051],{"emptyLinePlaceholder":1050},[1002,132929,132930,132933,132935,132937,132939,132941,132943],{"class":1004,"line":1060},[1002,132931,132932],{"class":1030}," $scope.(",[1002,132934,132776],{"class":1034},[1002,132936,1251],{"class":1030},[1002,132938,6965],{"class":1015},[1002,132940,6513],{"class":1030},[1002,132942,132801],{"class":2378},[1002,132944,2382],{"class":1030},[1002,132946,132947,132950,132952],{"class":1004,"line":1272},[1002,132948,132949],{"class":1030}," $scope.state ",[1002,132951,2393],{"class":1015},[1002,132953,132813],{"class":1030},[1002,132955,132956],{"class":1004,"line":1348},[1002,132957,8353],{"class":1030},[1002,132959,132960],{"class":1004,"line":1354},[1002,132961,1051],{"emptyLinePlaceholder":1050},[1002,132963,132964,132967,132969],{"class":1004,"line":1360},[1002,132965,132966],{"class":1030}," $scope.update ",[1002,132968,2393],{"class":1015},[1002,132970,132971],{"class":1030}," state.update;\n",[1002,132973,132974],{"class":1004,"line":1366},[1002,132975,19836],{"class":1030},[925,132977,132978],{},"As a convenience, we could move the boilerplate of event attaching to the state manager. Something like this:",[993,132980,132982],{"className":995,"code":132981,"language":997,"meta":998,"style":998},"\u002F\u002F in the service\n onUpdate = function ($scope, callback) {\n $scope.('state.update', function (newState) {\n callback(newState);\n });\n};\n\n\u002F\u002F and in the controller\nstate.onUpdate($scope, function (newState) {\n $scope.state = newState;\n};\n",[941,132983,132984,132989,133008,133025,133033,133037,133041,133045,133050,133069,133078],{"__ignoreMap":998},[1002,132985,132986],{"class":1004,"line":1005},[1002,132987,132988],{"class":1008},"\u002F\u002F in the service\n",[1002,132990,132991,132994,132996,132998,133000,133002,133004,133006],{"class":1004,"line":1012},[1002,132992,132993],{"class":1026}," onUpdate",[1002,132995,1023],{"class":1015},[1002,132997,8457],{"class":1015},[1002,132999,6513],{"class":1030},[1002,133001,47648],{"class":2378},[1002,133003,1251],{"class":1030},[1002,133005,6834],{"class":2378},[1002,133007,2382],{"class":1030},[1002,133009,133010,133013,133015,133017,133019,133021,133023],{"class":1004,"line":1047},[1002,133011,133012],{"class":1030}," $scope.(",[1002,133014,132776],{"class":1034},[1002,133016,1251],{"class":1030},[1002,133018,6965],{"class":1015},[1002,133020,6513],{"class":1030},[1002,133022,132801],{"class":2378},[1002,133024,2382],{"class":1030},[1002,133026,133027,133030],{"class":1004,"line":1054},[1002,133028,133029],{"class":1026}," callback",[1002,133031,133032],{"class":1030},"(newState);\n",[1002,133034,133035],{"class":1004,"line":1060},[1002,133036,19836],{"class":1030},[1002,133038,133039],{"class":1004,"line":1272},[1002,133040,1517],{"class":1030},[1002,133042,133043],{"class":1004,"line":1348},[1002,133044,1051],{"emptyLinePlaceholder":1050},[1002,133046,133047],{"class":1004,"line":1354},[1002,133048,133049],{"class":1008},"\u002F\u002F and in the controller\n",[1002,133051,133052,133055,133058,133061,133063,133065,133067],{"class":1004,"line":1360},[1002,133053,133054],{"class":1030},"state.",[1002,133056,133057],{"class":1026},"onUpdate",[1002,133059,133060],{"class":1030},"($scope, ",[1002,133062,6965],{"class":1015},[1002,133064,6513],{"class":1030},[1002,133066,132801],{"class":2378},[1002,133068,2382],{"class":1030},[1002,133070,133071,133074,133076],{"class":1004,"line":1366},[1002,133072,133073],{"class":1030}," $scope.state ",[1002,133075,2393],{"class":1015},[1002,133077,132813],{"class":1030},[1002,133079,133080],{"class":1004,"line":1946},[1002,133081,1517],{"class":1030},[953,133083,133085],{"id":133084},"finishing-up","Finishing up",[925,133087,133088],{},"Now you can share state between controllers in AngularJS. You can easily manage the logged-in user, the user settings, or handle navigation with one controller, and the page content with another!",[993,133090,133092],{"className":995,"code":133091,"language":997,"meta":998,"style":998},"angular.module('services', []).factory('state', function () {\n 'use strict';\n\n state = {};\n\n return {\n state: state,\n };\n});\n",[941,133093,133094,133118,133124,133128,133137,133141,133147,133151,133155],{"__ignoreMap":998},[1002,133095,133096,133098,133100,133102,133104,133106,133108,133110,133112,133114,133116],{"class":1004,"line":1005},[1002,133097,132548],{"class":1030},[1002,133099,1227],{"class":1026},[1002,133101,1031],{"class":1030},[1002,133103,132555],{"class":1034},[1002,133105,132558],{"class":1030},[1002,133107,132561],{"class":1026},[1002,133109,1031],{"class":1030},[1002,133111,132566],{"class":1034},[1002,133113,1251],{"class":1030},[1002,133115,6965],{"class":1015},[1002,133117,9772],{"class":1030},[1002,133119,133120,133122],{"class":1004,"line":1012},[1002,133121,132162],{"class":1034},[1002,133123,1407],{"class":1030},[1002,133125,133126],{"class":1004,"line":1047},[1002,133127,1051],{"emptyLinePlaceholder":1050},[1002,133129,133130,133133,133135],{"class":1004,"line":1054},[1002,133131,133132],{"class":1030}," state ",[1002,133134,2393],{"class":1015},[1002,133136,7217],{"class":1030},[1002,133138,133139],{"class":1004,"line":1060},[1002,133140,1051],{"emptyLinePlaceholder":1050},[1002,133142,133143,133145],{"class":1004,"line":1272},[1002,133144,15066],{"class":1015},[1002,133146,1457],{"class":1030},[1002,133148,133149],{"class":1004,"line":1348},[1002,133150,132592],{"class":1030},[1002,133152,133153],{"class":1004,"line":1354},[1002,133154,15113],{"class":1030},[1002,133156,133157],{"class":1004,"line":1360},[1002,133158,2804],{"class":1030},[925,133160,133161],{},"Using it our controller looks more like this.",[993,133163,133165],{"className":995,"code":133164,"language":997,"meta":998,"style":998},"angular\n .module('controllers', ['services'])\n .factory('MainCtrl', function ($scope, state) {\n $scope.state = state.state;\n });\n",[941,133166,133167,133172,133188,133212,133220],{"__ignoreMap":998},[1002,133168,133169],{"class":1004,"line":1005},[1002,133170,133171],{"class":1030},"angular\n",[1002,133173,133174,133176,133178,133180,133182,133184,133186],{"class":1004,"line":1012},[1002,133175,3794],{"class":1030},[1002,133177,1227],{"class":1026},[1002,133179,1031],{"class":1030},[1002,133181,132882],{"class":1034},[1002,133183,47455],{"class":1030},[1002,133185,132555],{"class":1034},[1002,133187,30641],{"class":1030},[1002,133189,133190,133192,133194,133196,133198,133200,133202,133204,133206,133208,133210],{"class":1004,"line":1047},[1002,133191,3794],{"class":1030},[1002,133193,132561],{"class":1026},[1002,133195,1031],{"class":1030},[1002,133197,132899],{"class":1034},[1002,133199,1251],{"class":1030},[1002,133201,6965],{"class":1015},[1002,133203,6513],{"class":1030},[1002,133205,47648],{"class":2378},[1002,133207,1251],{"class":1030},[1002,133209,8589],{"class":2378},[1002,133211,2382],{"class":1030},[1002,133213,133214,133216,133218],{"class":1004,"line":1054},[1002,133215,132918],{"class":1030},[1002,133217,2393],{"class":1015},[1002,133219,132923],{"class":1030},[1002,133221,133222],{"class":1004,"line":1060},[1002,133223,19836],{"class":1030},[925,133225,3898,133226,133229,133230,133233,133234,133237,133238,948],{},[1107,133227,133228],{},"big"," difference here will be in the markup, where you refer to your state, eg a property called username, as ",[941,133231,133232],{},"state.username"," rather than just ",[941,133235,133236],{},"username",".\nIn most cases this is plenty! If you need to react to changes in the state object, you can ",[941,133239,133240],{},"$watch",[993,133242,133244],{"className":995,"code":133243,"language":997,"meta":998,"style":998},"angular\n .module('controllers', ['services'])\n .factory('MainCtrl', function ($scope, state) {\n $scope.state = state.state;\n\n $scope.$watch('state', function (newVal, oldVal) {\n \u002F\u002F your code here\n });\n });\n",[941,133245,133246,133250,133266,133290,133298,133302,133328,133333,133337],{"__ignoreMap":998},[1002,133247,133248],{"class":1004,"line":1005},[1002,133249,133171],{"class":1030},[1002,133251,133252,133254,133256,133258,133260,133262,133264],{"class":1004,"line":1012},[1002,133253,3794],{"class":1030},[1002,133255,1227],{"class":1026},[1002,133257,1031],{"class":1030},[1002,133259,132882],{"class":1034},[1002,133261,47455],{"class":1030},[1002,133263,132555],{"class":1034},[1002,133265,30641],{"class":1030},[1002,133267,133268,133270,133272,133274,133276,133278,133280,133282,133284,133286,133288],{"class":1004,"line":1047},[1002,133269,3794],{"class":1030},[1002,133271,132561],{"class":1026},[1002,133273,1031],{"class":1030},[1002,133275,132899],{"class":1034},[1002,133277,1251],{"class":1030},[1002,133279,6965],{"class":1015},[1002,133281,6513],{"class":1030},[1002,133283,47648],{"class":2378},[1002,133285,1251],{"class":1030},[1002,133287,8589],{"class":2378},[1002,133289,2382],{"class":1030},[1002,133291,133292,133294,133296],{"class":1004,"line":1054},[1002,133293,132918],{"class":1030},[1002,133295,2393],{"class":1015},[1002,133297,132923],{"class":1030},[1002,133299,133300],{"class":1004,"line":1060},[1002,133301,1051],{"emptyLinePlaceholder":1050},[1002,133303,133304,133306,133308,133310,133312,133314,133316,133318,133321,133323,133326],{"class":1004,"line":1272},[1002,133305,47660],{"class":1030},[1002,133307,133240],{"class":1026},[1002,133309,1031],{"class":1030},[1002,133311,132566],{"class":1034},[1002,133313,1251],{"class":1030},[1002,133315,6965],{"class":1015},[1002,133317,6513],{"class":1030},[1002,133319,133320],{"class":2378},"newVal",[1002,133322,1251],{"class":1030},[1002,133324,133325],{"class":2378},"oldVal",[1002,133327,2382],{"class":1030},[1002,133329,133330],{"class":1004,"line":1348},[1002,133331,133332],{"class":1008}," \u002F\u002F your code here\n",[1002,133334,133335],{"class":1004,"line":1354},[1002,133336,8353],{"class":1030},[1002,133338,133339],{"class":1004,"line":1360},[1002,133340,19836],{"class":1030},[1579,133342,133343],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":133345},[133346,133347,133348],{"id":132534,"depth":1012,"text":132535},{"id":4871,"depth":1012,"text":132678},{"id":133084,"depth":1012,"text":133085},"2014-06-28","\u002Fimages\u002Fblog\u002Ffeatures\u002Fangular-controllers-share-state.jpg",{},{"title":12,"description":14},"blog\u002Fangular-controllers-share-state",[16,17,18],"UCh27ib5D6c6PKiBHDjX4YuzqJskHoBOVxeSHhMJq5o",{"id":133357,"title":481,"author":920,"body":133358,"date":133423,"description":483,"extension":1591,"image":133424,"meta":133425,"navigation":1050,"path":482,"seo":133426,"stem":133427,"tags":133428,"__hash__":133429},"blog\u002Fblog\u002Fiso-noise-reduction.md",{"type":922,"value":133359,"toc":133420},[133360,133363,133366,133369,133372,133375,133378,133381,133385,133391,133398,133405,133408,133411,133417],[925,133361,133362],{},"One big reason is that the higher-quality lens lets in more light. When available light is an issue, using a better lens often lets us take photos that we otherwise wouldn't be able to get.",[925,133364,133365],{},"It's the same way with noise reduction. You'd normally get ugly image noise by using a fast shutter speed in low light, but noise reduction software can make you feel like there was never any noise at all, almost.",[925,133367,133368],{},"Like a $1,500 lens, noise reduction software doesn't just make your photos look better... it allows you to get shots you otherwise would miss.",[925,133370,133371],{},"Wildlife photography demands a quick shutter speed, so using Topaz DeNoise or Nik Dfine to can help to extract the noise from photos. In the image above, notice how the detail in the beak and fur is still crisp and sharp, even though the noise is gone.",[925,133373,133374],{},"You will only have a split second to grab that perfect wildlife shot before it flies away. There's no room for error in either his judgment or your equipment, so using software will help you to shoot at a higher ISO with more confidence.",[925,133376,133377],{},"Here's some more photos Maxis created this way:",[925,133379,133380],{},"Technology with a single goal: less noise + more detail.",[953,133382,133384],{"id":133383},"noise-vs-detail-a-tricky-problem","Noise vs. detail: a tricky problem.",[925,133386,133387,133388,24117],{},"Noise reduction by itself is easy: just blur the image and voila, no more noise! No, the hard part is: how do you reduce noise while ",[941,133389,133390],{},"perfectly preserving crisp detail",[925,133392,133393,133394,133397],{},"In the photo on the right, which part of the pillar is good detail vs. bad noise? Forget about technology for a minute... how are ",[941,133395,133396],{},"we"," even supposed to tell the difference? And if we can't even tell, how can we expect automated software to?",[925,133399,133400,133401,133404],{},"It's a tough problem to solve. That's why most noise reduction tools also destroy vital image detail. ",[1107,133402,133403],{},"DeNoise or Nik Dfine do not.","\" Defy the tradition and get the best of both worlds.",[925,133406,133407],{},"Here's how it works: DeNoise or Nik Dfine generate a custom full-resolution noise profile for each image it processes. This makes it surprisingly accurate at finding the difference between noise and detail - often even more accurate than humans!",[925,133409,133410],{},"Other software either use pre-built noise profiles or only look at a very small section of the image. Although the DeNoise or Nik Dfine technology is much slower, you'll forget all about speed when you see the image quality of the final results.",[925,133412,133413,133414,133416],{},"These software analyze patterns in the entire image to remove noise and recover underlying detail. ",[96859,133415],{"clear":36079},"In many cases it can make ISO 1600 look like ISO 100. This technology is very new, and so far we've been thrilled with its positive reception.",[925,133418,133419],{},"So, armed with this technology, let's take a look at this photo again. Instead of looking at only the pillar, using software to process the whole photo so it can more accurately determine the specific noise profile. Hover over the image to see the results.",{"title":998,"searchDepth":1012,"depth":1012,"links":133421},[133422],{"id":133383,"depth":1012,"text":133384},"2014-06-14","\u002Fimages\u002Fblog\u002Ffeatures\u002Fiso-noise-reduction.jpg",{},{"title":481,"description":483},"blog\u002Fiso-noise-reduction",[89],"WKdsx8V74zCseAfW_-yRkT-AXn9JHTYjC2kfPxhJRD4",{"id":133431,"title":781,"author":920,"body":133432,"date":133795,"description":783,"extension":1591,"image":133796,"meta":133797,"navigation":1050,"path":782,"seo":133798,"stem":133799,"tags":133800,"__hash__":133801},"blog\u002Fblog\u002Fsend-email-in-umbraco.md",{"type":922,"value":133433,"toc":133793},[133434,133440,133477,133487,133510,133517,133584,133587,133788,133791],[925,133435,133436,133437],{},"In your ASP.NET MVC solution, open App_Code folder. Create a new surface controller called EmailController, extending ",[1107,133438,133439],{},"SurfaceController",[993,133441,133443],{"className":130760,"code":133442,"language":184,"meta":998,"style":998},"using System.Web;\nusing System.Web.Mvc;\nusing System.Net.Mail;\n\npublic class AppointmentController : Umbraco.Web.Mvc.SurfaceController\n{\n}\n",[941,133444,133445,133450,133455,133460,133464,133469,133473],{"__ignoreMap":998},[1002,133446,133447],{"class":1004,"line":1005},[1002,133448,133449],{},"using System.Web;\n",[1002,133451,133452],{"class":1004,"line":1012},[1002,133453,133454],{},"using System.Web.Mvc;\n",[1002,133456,133457],{"class":1004,"line":1047},[1002,133458,133459],{},"using System.Net.Mail;\n",[1002,133461,133462],{"class":1004,"line":1054},[1002,133463,1051],{"emptyLinePlaceholder":1050},[1002,133465,133466],{"class":1004,"line":1060},[1002,133467,133468],{},"public class AppointmentController : Umbraco.Web.Mvc.SurfaceController\n",[1002,133470,133471],{"class":1004,"line":1272},[1002,133472,1129],{},[1002,133474,133475],{"class":1004,"line":1348},[1002,133476,1170],{},[925,133478,133479,133480,133483,133484,67025],{},"Add a new method, ",[1107,133481,133482],{},"SendMail",". Annotate it with ",[1107,133485,133486],{},"HttpPost",[993,133488,133490],{"className":130760,"code":133489,"language":184,"meta":998,"style":998},"[HttpPost]\npublic int SendMail()\n{\n}\n",[941,133491,133492,133497,133502,133506],{"__ignoreMap":998},[1002,133493,133494],{"class":1004,"line":1005},[1002,133495,133496],{},"[HttpPost]\n",[1002,133498,133499],{"class":1004,"line":1012},[1002,133500,133501],{},"public int SendMail()\n",[1002,133503,133504],{"class":1004,"line":1047},[1002,133505,1129],{},[1002,133507,133508],{"class":1004,"line":1054},[1002,133509,1170],{},[925,133511,133512,133513,133516],{},"Now you have to create a model for this method. Create a folder called ",[1107,133514,133515],{},"Models"," in App_Code folder and create a new file for this. Let's name it ContactModel.",[993,133518,133520],{"className":130760,"code":133519,"language":184,"meta":998,"style":998},"using System.ComponentModel.DataAnnotations;\n\npublic class ContactModel\n{\n [Required]\n public string Name { get; set; }\n\n [Required]\n public string Email { get; set; }\n\n [Required]\n public string Message { get; set; }\n\n}\n",[941,133521,133522,133527,133531,133536,133540,133545,133550,133554,133558,133563,133567,133571,133576,133580],{"__ignoreMap":998},[1002,133523,133524],{"class":1004,"line":1005},[1002,133525,133526],{},"using System.ComponentModel.DataAnnotations;\n",[1002,133528,133529],{"class":1004,"line":1012},[1002,133530,1051],{"emptyLinePlaceholder":1050},[1002,133532,133533],{"class":1004,"line":1047},[1002,133534,133535],{},"public class ContactModel\n",[1002,133537,133538],{"class":1004,"line":1054},[1002,133539,1129],{},[1002,133541,133542],{"class":1004,"line":1060},[1002,133543,133544],{}," [Required]\n",[1002,133546,133547],{"class":1004,"line":1272},[1002,133548,133549],{}," public string Name { get; set; }\n",[1002,133551,133552],{"class":1004,"line":1348},[1002,133553,1051],{"emptyLinePlaceholder":1050},[1002,133555,133556],{"class":1004,"line":1354},[1002,133557,133544],{},[1002,133559,133560],{"class":1004,"line":1360},[1002,133561,133562],{}," public string Email { get; set; }\n",[1002,133564,133565],{"class":1004,"line":1366},[1002,133566,1051],{"emptyLinePlaceholder":1050},[1002,133568,133569],{"class":1004,"line":1946},[1002,133570,133544],{},[1002,133572,133573],{"class":1004,"line":1956},[1002,133574,133575],{}," public string Message { get; set; }\n",[1002,133577,133578],{"class":1004,"line":1961},[1002,133579,1051],{"emptyLinePlaceholder":1050},[1002,133581,133582],{"class":1004,"line":1971},[1002,133583,1170],{},[925,133585,133586],{},"This model will consist of 3 properties: Name, Email and Message which are the name of the sender, the email address of the sender,and the body of the message. You could create any property you like here in this model.\nNow let's add the functionality to the method. You can use your SMTP details to replace smtp.example.com here.",[993,133588,133590],{"className":130760,"code":133589,"language":184,"meta":998,"style":998},"[HttpPost]\npublic int SendMail(ContactModel model)\n{\n if (!ModelState.IsValid)\n {\n try\n {\n var fromAddress = new MailAddress(\"abc@example.com\", \"From Name\");\n\n var toAddress = new MailAddress(model.Email, \"To Name\");\n\n const string fromPassword = \"password\";\n string subject = \"subject\";\n string body = model.Message;\n\n var smtp = new SmtpClient\n {\n Host = \"smtp.example.com\",\n Port = 587,\n EnableSsl = true,\n DeliveryMethod = SmtpDeliveryMethod.Network,\n UseDefaultCredentials = false,\n Credentials = new NetworkCredential(fromAddress, fromPassword)\n };\n\n using (var message = new MailMessage(fromAddress.Address, toAddress.Address)\n {\n Subject = subject,\n Body = body\n })\n {\n smtp.Send(message);\n TempData.Add(\"Success\", true);\n }\n }\n catch(Exception ex)\n {\n return -1;\n }\n }\n return 1;\n}\n",[941,133591,133592,133596,133601,133605,133610,133614,133619,133623,133628,133632,133637,133641,133646,133651,133656,133660,133665,133670,133675,133680,133685,133690,133695,133700,133705,133709,133714,133718,133723,133728,133733,133738,133743,133748,133753,133757,133762,133766,133771,133775,133779,133784],{"__ignoreMap":998},[1002,133593,133594],{"class":1004,"line":1005},[1002,133595,133496],{},[1002,133597,133598],{"class":1004,"line":1012},[1002,133599,133600],{},"public int SendMail(ContactModel model)\n",[1002,133602,133603],{"class":1004,"line":1047},[1002,133604,1129],{},[1002,133606,133607],{"class":1004,"line":1054},[1002,133608,133609],{}," if (!ModelState.IsValid)\n",[1002,133611,133612],{"class":1004,"line":1060},[1002,133613,91266],{},[1002,133615,133616],{"class":1004,"line":1272},[1002,133617,133618],{}," try\n",[1002,133620,133621],{"class":1004,"line":1348},[1002,133622,130884],{},[1002,133624,133625],{"class":1004,"line":1354},[1002,133626,133627],{}," var fromAddress = new MailAddress(\"abc@example.com\", \"From Name\");\n",[1002,133629,133630],{"class":1004,"line":1360},[1002,133631,1051],{"emptyLinePlaceholder":1050},[1002,133633,133634],{"class":1004,"line":1366},[1002,133635,133636],{}," var toAddress = new MailAddress(model.Email, \"To Name\");\n",[1002,133638,133639],{"class":1004,"line":1946},[1002,133640,1051],{"emptyLinePlaceholder":1050},[1002,133642,133643],{"class":1004,"line":1956},[1002,133644,133645],{}," const string fromPassword = \"password\";\n",[1002,133647,133648],{"class":1004,"line":1961},[1002,133649,133650],{}," string subject = \"subject\";\n",[1002,133652,133653],{"class":1004,"line":1971},[1002,133654,133655],{}," string body = model.Message;\n",[1002,133657,133658],{"class":1004,"line":1980},[1002,133659,1051],{"emptyLinePlaceholder":1050},[1002,133661,133662],{"class":1004,"line":1985},[1002,133663,133664],{}," var smtp = new SmtpClient\n",[1002,133666,133667],{"class":1004,"line":1995},[1002,133668,133669],{}," {\n",[1002,133671,133672],{"class":1004,"line":2006},[1002,133673,133674],{}," Host = \"smtp.example.com\",\n",[1002,133676,133677],{"class":1004,"line":2011},[1002,133678,133679],{}," Port = 587,\n",[1002,133681,133682],{"class":1004,"line":2017},[1002,133683,133684],{}," EnableSsl = true,\n",[1002,133686,133687],{"class":1004,"line":2022},[1002,133688,133689],{}," DeliveryMethod = SmtpDeliveryMethod.Network,\n",[1002,133691,133692],{"class":1004,"line":2442},[1002,133693,133694],{}," UseDefaultCredentials = false,\n",[1002,133696,133697],{"class":1004,"line":2466},[1002,133698,133699],{}," Credentials = new NetworkCredential(fromAddress, fromPassword)\n",[1002,133701,133702],{"class":1004,"line":2471},[1002,133703,133704],{}," };\n",[1002,133706,133707],{"class":1004,"line":2476},[1002,133708,1051],{"emptyLinePlaceholder":1050},[1002,133710,133711],{"class":1004,"line":2481},[1002,133712,133713],{}," using (var message = new MailMessage(fromAddress.Address, toAddress.Address)\n",[1002,133715,133716],{"class":1004,"line":2491},[1002,133717,133669],{},[1002,133719,133720],{"class":1004,"line":2502},[1002,133721,133722],{}," Subject = subject,\n",[1002,133724,133725],{"class":1004,"line":2513},[1002,133726,133727],{}," Body = body\n",[1002,133729,133730],{"class":1004,"line":2535},[1002,133731,133732],{}," })\n",[1002,133734,133735],{"class":1004,"line":2557},[1002,133736,133737],{}," {\n",[1002,133739,133740],{"class":1004,"line":2562},[1002,133741,133742],{}," smtp.Send(message);\n",[1002,133744,133745],{"class":1004,"line":2567},[1002,133746,133747],{}," TempData.Add(\"Success\", true);\n",[1002,133749,133750],{"class":1004,"line":2572},[1002,133751,133752],{}," }\n",[1002,133754,133755],{"class":1004,"line":2582},[1002,133756,7377],{},[1002,133758,133759],{"class":1004,"line":2594},[1002,133760,133761],{}," catch(Exception ex)\n",[1002,133763,133764],{"class":1004,"line":2603},[1002,133765,130884],{},[1002,133767,133768],{"class":1004,"line":2619},[1002,133769,133770],{}," return -1;\n",[1002,133772,133773],{"class":1004,"line":2633},[1002,133774,7377],{},[1002,133776,133777],{"class":1004,"line":2641},[1002,133778,2014],{},[1002,133780,133781],{"class":1004,"line":2655},[1002,133782,133783],{}," return 1;\n",[1002,133785,133786],{"class":1004,"line":2667},[1002,133787,1170],{},[925,133789,133790],{},"Now you can call this method from your client side code and off you go. Happy emailing!",[1579,133792,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":133794},[],"2014-06-07","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsend-email-in-umbraco.jpg",{},{"title":781,"description":783},"blog\u002Fsend-email-in-umbraco",[16,785,619],"u5SDJyR6xiAIIfx7QIK10egPqokWNQEUfS4h6pnSZKw",{"id":133803,"title":522,"author":920,"body":133804,"date":134870,"description":524,"extension":1591,"image":134871,"meta":134872,"navigation":1050,"path":523,"seo":134873,"stem":134874,"tags":134875,"__hash__":134876},"blog\u002Fblog\u002Fjavascript-hoisting-and-scope.md",{"type":922,"value":133805,"toc":134861},[133806,133809,133812,133855,133858,133918,133922,133925,133928,134010,134013,134094,134097,134100,134168,134171,134175,134179,134182,134241,134244,134318,134321,134324,134399,134402,134406,134409,134441,134448,134532,134535,134538,134659,134662,134768,134771,134774,134778,134788,134851,134855,134858],[925,133807,133808],{},"Look at the two examples below:",[925,133810,133811],{},"Example 1:",[993,133813,133815],{"className":995,"code":133814,"language":997,"meta":998,"style":998},"var foo; \u002F\u002F declare foo\nfoo = 5; \u002F\u002F assign 5 to foo\n\nconsole.log(foo); \u002F\u002F displays 5\n",[941,133816,133817,133827,133840,133844],{"__ignoreMap":998},[1002,133818,133819,133821,133824],{"class":1004,"line":1005},[1002,133820,18311],{"class":1015},[1002,133822,133823],{"class":1030}," foo; ",[1002,133825,133826],{"class":1008},"\u002F\u002F declare foo\n",[1002,133828,133829,133831,133833,133835,133837],{"class":1004,"line":1012},[1002,133830,97694],{"class":1030},[1002,133832,2393],{"class":1015},[1002,133834,6190],{"class":1019},[1002,133836,17938],{"class":1030},[1002,133838,133839],{"class":1008},"\u002F\u002F assign 5 to foo\n",[1002,133841,133842],{"class":1004,"line":1047},[1002,133843,1051],{"emptyLinePlaceholder":1050},[1002,133845,133846,133848,133850,133852],{"class":1004,"line":1054},[1002,133847,2883],{"class":1030},[1002,133849,2886],{"class":1026},[1002,133851,88493],{"class":1030},[1002,133853,133854],{"class":1008},"\u002F\u002F displays 5\n",[925,133856,133857],{},"Example 2:",[993,133859,133861],{"className":995,"code":133860,"language":997,"meta":998,"style":998},"bar = 5; \u002F\u002F assign 5 to foo\n\nconsole.log(bar); \u002F\u002F displays 5\n\nvar bar; \u002F\u002F declare foo\nBoth example 1 and Example 2 produce the same result.\n",[941,133862,133863,133876,133880,133890,133894,133903],{"__ignoreMap":998},[1002,133864,133865,133868,133870,133872,133874],{"class":1004,"line":1005},[1002,133866,133867],{"class":1030},"bar ",[1002,133869,2393],{"class":1015},[1002,133871,6190],{"class":1019},[1002,133873,17938],{"class":1030},[1002,133875,133839],{"class":1008},[1002,133877,133878],{"class":1004,"line":1012},[1002,133879,1051],{"emptyLinePlaceholder":1050},[1002,133881,133882,133884,133886,133888],{"class":1004,"line":1047},[1002,133883,2883],{"class":1030},[1002,133885,2886],{"class":1026},[1002,133887,88524],{"class":1030},[1002,133889,133854],{"class":1008},[1002,133891,133892],{"class":1004,"line":1054},[1002,133893,1051],{"emptyLinePlaceholder":1050},[1002,133895,133896,133898,133901],{"class":1004,"line":1060},[1002,133897,18311],{"class":1015},[1002,133899,133900],{"class":1030}," bar; ",[1002,133902,133826],{"class":1008},[1002,133904,133905,133908,133910,133913,133915],{"class":1004,"line":1272},[1002,133906,133907],{"class":1030},"Both example ",[1002,133909,6211],{"class":1019},[1002,133911,133912],{"class":1030}," and Example ",[1002,133914,5681],{"class":1019},[1002,133916,133917],{"class":1030}," produce the same result.\n",[953,133919,133921],{"id":133920},"javascript-initializations-are-not-hoisted","JavaScript Initializations are Not Hoisted",[925,133923,133924],{},"JavaScript only hoists declarations, not initializations.",[925,133926,133927],{},"Example 1",[993,133929,133931],{"className":995,"code":133930,"language":997,"meta":998,"style":998},"var x = 5; \u002F\u002F Initialize x\nvar y = 7; \u002F\u002F Initialize y\n\nelem = document.getElementById('demo'); \u002F\u002F Find an element\nelem.innerHTML = x + ' ' + y; \u002F\u002F Display x and y\n",[941,133932,133933,133948,133964,133968,133989],{"__ignoreMap":998},[1002,133934,133935,133937,133939,133941,133943,133945],{"class":1004,"line":1005},[1002,133936,18311],{"class":1015},[1002,133938,77069],{"class":1030},[1002,133940,2393],{"class":1015},[1002,133942,6190],{"class":1019},[1002,133944,17938],{"class":1030},[1002,133946,133947],{"class":1008},"\u002F\u002F Initialize x\n",[1002,133949,133950,133952,133954,133956,133959,133961],{"class":1004,"line":1012},[1002,133951,18311],{"class":1015},[1002,133953,50680],{"class":1030},[1002,133955,2393],{"class":1015},[1002,133957,133958],{"class":1019}," 7",[1002,133960,17938],{"class":1030},[1002,133962,133963],{"class":1008},"\u002F\u002F Initialize y\n",[1002,133965,133966],{"class":1004,"line":1047},[1002,133967,1051],{"emptyLinePlaceholder":1050},[1002,133969,133970,133973,133975,133977,133979,133981,133984,133986],{"class":1004,"line":1054},[1002,133971,133972],{"class":1030},"elem ",[1002,133974,2393],{"class":1015},[1002,133976,16142],{"class":1030},[1002,133978,16591],{"class":1026},[1002,133980,1031],{"class":1030},[1002,133982,133983],{"class":1034},"'demo'",[1002,133985,18256],{"class":1030},[1002,133987,133988],{"class":1008},"\u002F\u002F Find an element\n",[1002,133990,133991,133994,133996,133998,134000,134002,134004,134007],{"class":1004,"line":1060},[1002,133992,133993],{"class":1030},"elem.innerHTML ",[1002,133995,2393],{"class":1015},[1002,133997,77069],{"class":1030},[1002,133999,5064],{"class":1015},[1002,134001,63063],{"class":1034},[1002,134003,6583],{"class":1015},[1002,134005,134006],{"class":1030}," y; ",[1002,134008,134009],{"class":1008},"\u002F\u002F Display x and y\n",[925,134011,134012],{},"Example 2",[993,134014,134016],{"className":995,"code":134015,"language":997,"meta":998,"style":998},"var x = 5; \u002F\u002F Initialize x\n\nelem = document.getElementById('demo'); \u002F\u002F Find an element\nelem.innerHTML = x + ' ' + y; \u002F\u002F Display x and y\n\nvar y = 7; \u002F\u002F Initialize y \u002F\u002F Display x and y\n",[941,134017,134018,134032,134036,134054,134072,134076],{"__ignoreMap":998},[1002,134019,134020,134022,134024,134026,134028,134030],{"class":1004,"line":1005},[1002,134021,18311],{"class":1015},[1002,134023,77069],{"class":1030},[1002,134025,2393],{"class":1015},[1002,134027,6190],{"class":1019},[1002,134029,17938],{"class":1030},[1002,134031,133947],{"class":1008},[1002,134033,134034],{"class":1004,"line":1012},[1002,134035,1051],{"emptyLinePlaceholder":1050},[1002,134037,134038,134040,134042,134044,134046,134048,134050,134052],{"class":1004,"line":1047},[1002,134039,133972],{"class":1030},[1002,134041,2393],{"class":1015},[1002,134043,16142],{"class":1030},[1002,134045,16591],{"class":1026},[1002,134047,1031],{"class":1030},[1002,134049,133983],{"class":1034},[1002,134051,18256],{"class":1030},[1002,134053,133988],{"class":1008},[1002,134055,134056,134058,134060,134062,134064,134066,134068,134070],{"class":1004,"line":1054},[1002,134057,133993],{"class":1030},[1002,134059,2393],{"class":1015},[1002,134061,77069],{"class":1030},[1002,134063,5064],{"class":1015},[1002,134065,63063],{"class":1034},[1002,134067,6583],{"class":1015},[1002,134069,134006],{"class":1030},[1002,134071,134009],{"class":1008},[1002,134073,134074],{"class":1004,"line":1060},[1002,134075,1051],{"emptyLinePlaceholder":1050},[1002,134077,134078,134080,134082,134084,134086,134088,134091],{"class":1004,"line":1272},[1002,134079,18311],{"class":1015},[1002,134081,50680],{"class":1030},[1002,134083,2393],{"class":1015},[1002,134085,133958],{"class":1019},[1002,134087,17938],{"class":1030},[1002,134089,134090],{"class":1008},"\u002F\u002F Initialize y",[1002,134092,134093],{"class":1008}," \u002F\u002F Display x and y\n",[925,134095,134096],{},"Example 1 and Example 2 does not produce the same result.",[925,134098,134099],{},"Hers'an example that might surprice you:",[993,134101,134103],{"className":995,"code":134102,"language":997,"meta":998,"style":998},"var a = 1;\nfunction b() {\n a = 10;\n return;\n function a() {}\n}\nb();\nconsole.log(a);\n",[941,134104,134105,134117,134126,134136,134142,134150,134154,134160],{"__ignoreMap":998},[1002,134106,134107,134109,134111,134113,134115],{"class":1004,"line":1005},[1002,134108,18311],{"class":1015},[1002,134110,85662],{"class":1030},[1002,134112,2393],{"class":1015},[1002,134114,6246],{"class":1019},[1002,134116,1407],{"class":1030},[1002,134118,134119,134121,134124],{"class":1004,"line":1012},[1002,134120,6965],{"class":1015},[1002,134122,134123],{"class":1026}," b",[1002,134125,3025],{"class":1030},[1002,134127,134128,134130,134132,134134],{"class":1004,"line":1047},[1002,134129,132315],{"class":1030},[1002,134131,2393],{"class":1015},[1002,134133,8970],{"class":1019},[1002,134135,1407],{"class":1030},[1002,134137,134138,134140],{"class":1004,"line":1054},[1002,134139,15066],{"class":1015},[1002,134141,1407],{"class":1030},[1002,134143,134144,134146,134148],{"class":1004,"line":1060},[1002,134145,18965],{"class":1015},[1002,134147,117944],{"class":1026},[1002,134149,2997],{"class":1030},[1002,134151,134152],{"class":1004,"line":1272},[1002,134153,1170],{"class":1030},[1002,134155,134156,134158],{"class":1004,"line":1348},[1002,134157,31621],{"class":1026},[1002,134159,1428],{"class":1030},[1002,134161,134162,134164,134166],{"class":1004,"line":1354},[1002,134163,2883],{"class":1030},[1002,134165,2886],{"class":1026},[1002,134167,102566],{"class":1030},[925,134169,134170],{},"Here, of course, the browser will return 1. Even though this might seem strange and confusing, this is actually hoisting in action, a powerful feature of JavaScript. To understand hoisting, first lets take a necessary detour to understand JavaScript’s scoping.",[953,134172,134174],{"id":134173},"scoping-in-javascript","Scoping in JavaScript",[1655,134176,134178],{"id":134177},"block-level-scoping-vs-fucntional-level-scoping","Block Level Scoping vs Fucntional Level Scoping",[925,134180,134181],{},"One reason for confusion for JavaScript programmers is scoping. The reason scoping is so confusing in JavaScript is because it looks like a C-family language, and seem to have block-level scope. Consider the following C program:",[993,134183,134187],{"className":134184,"code":134185,"language":134186,"meta":998,"style":998},"language-cpp shiki shiki-themes github-light github-dark","#include \u003Cstdio.h>\n\nint main() {\n int x = 1;\n printf(\"%d, \", x); \u002F\u002F 1\n if (1) {\n int x = 2;\n printf(\"%d, \", x); \u002F\u002F 2\n }\n printf(\"%d\\n\", x); \u002F\u002F 1\n}\n","cpp",[941,134188,134189,134194,134198,134203,134208,134213,134218,134223,134228,134232,134237],{"__ignoreMap":998},[1002,134190,134191],{"class":1004,"line":1005},[1002,134192,134193],{},"#include \u003Cstdio.h>\n",[1002,134195,134196],{"class":1004,"line":1012},[1002,134197,1051],{"emptyLinePlaceholder":1050},[1002,134199,134200],{"class":1004,"line":1047},[1002,134201,134202],{},"int main() {\n",[1002,134204,134205],{"class":1004,"line":1054},[1002,134206,134207],{}," int x = 1;\n",[1002,134209,134210],{"class":1004,"line":1060},[1002,134211,134212],{}," printf(\"%d, \", x); \u002F\u002F 1\n",[1002,134214,134215],{"class":1004,"line":1272},[1002,134216,134217],{}," if (1) {\n",[1002,134219,134220],{"class":1004,"line":1348},[1002,134221,134222],{}," int x = 2;\n",[1002,134224,134225],{"class":1004,"line":1354},[1002,134226,134227],{}," printf(\"%d, \", x); \u002F\u002F 2\n",[1002,134229,134230],{"class":1004,"line":1360},[1002,134231,2014],{},[1002,134233,134234],{"class":1004,"line":1366},[1002,134235,134236],{}," printf(\"%d\\n\", x); \u002F\u002F 1\n",[1002,134238,134239],{"class":1004,"line":1946},[1002,134240,1170],{},[925,134242,134243],{},"The output from this program will be 1, 2, 1. This is because C, and the rest of the C family, has block-level scope. When control enters a block, such as the if statement, new variables can be declared within that scope, without affecting the outer scope. This is not the case in JavaScript. Try the following in Firebug:",[993,134245,134247],{"className":995,"code":134246,"language":997,"meta":998,"style":998},"var x = 1;\nconsole.log(x); \u002F\u002F 1\nif (true) {\n var x = 2;\n console.log(x); \u002F\u002F 2\n}\nconsole.log(x); \u002F\u002F 2\n",[941,134248,134249,134261,134272,134282,134294,134304,134308],{"__ignoreMap":998},[1002,134250,134251,134253,134255,134257,134259],{"class":1004,"line":1005},[1002,134252,18311],{"class":1015},[1002,134254,77069],{"class":1030},[1002,134256,2393],{"class":1015},[1002,134258,6246],{"class":1019},[1002,134260,1407],{"class":1030},[1002,134262,134263,134265,134267,134270],{"class":1004,"line":1012},[1002,134264,2883],{"class":1030},[1002,134266,2886],{"class":1026},[1002,134268,134269],{"class":1030},"(x); ",[1002,134271,50532],{"class":1008},[1002,134273,134274,134276,134278,134280],{"class":1004,"line":1047},[1002,134275,46126],{"class":1015},[1002,134277,6513],{"class":1030},[1002,134279,17397],{"class":1019},[1002,134281,2382],{"class":1030},[1002,134283,134284,134286,134288,134290,134292],{"class":1004,"line":1054},[1002,134285,28293],{"class":1015},[1002,134287,77069],{"class":1030},[1002,134289,2393],{"class":1015},[1002,134291,10248],{"class":1019},[1002,134293,1407],{"class":1030},[1002,134295,134296,134298,134300,134302],{"class":1004,"line":1060},[1002,134297,6977],{"class":1030},[1002,134299,2886],{"class":1026},[1002,134301,134269],{"class":1030},[1002,134303,31325],{"class":1008},[1002,134305,134306],{"class":1004,"line":1272},[1002,134307,1170],{"class":1030},[1002,134309,134310,134312,134314,134316],{"class":1004,"line":1348},[1002,134311,2883],{"class":1030},[1002,134313,2886],{"class":1026},[1002,134315,134269],{"class":1030},[1002,134317,31325],{"class":1008},[925,134319,134320],{},"In this case, Firebug will show 1, 2, 2. This is because JavaScript has a function-level scope. This is radically different from the C family.\nBlocks, such as if statements, do not create a new scope. Simply accessing variables outside of your immediate lexical scope creates a closure in JavaScript.\nOnly functions create a new scope.",[925,134322,134323],{},"To a lot of programmers who are used to languages C family, this is confusing. Luckily, because of the flexibility of JavaScript functions, there is a workaround.\nIf you must create temporary scopes within a function, do the following:",[993,134325,134327],{"className":995,"code":134326,"language":997,"meta":998,"style":998},"function foo() {\n var x = 1;\n if (x) {\n (function () {\n var x = 2;\n \u002F\u002F some other code\n })();\n }\n \u002F\u002F x is still 1.\n}\n",[941,134328,134329,134337,134349,134356,134364,134376,134381,134386,134390,134395],{"__ignoreMap":998},[1002,134330,134331,134333,134335],{"class":1004,"line":1005},[1002,134332,6965],{"class":1015},[1002,134334,34640],{"class":1026},[1002,134336,3025],{"class":1030},[1002,134338,134339,134341,134343,134345,134347],{"class":1004,"line":1012},[1002,134340,28293],{"class":1015},[1002,134342,77069],{"class":1030},[1002,134344,2393],{"class":1015},[1002,134346,6246],{"class":1019},[1002,134348,1407],{"class":1030},[1002,134350,134351,134353],{"class":1004,"line":1047},[1002,134352,19971],{"class":1015},[1002,134354,134355],{"class":1030}," (x) {\n",[1002,134357,134358,134360,134362],{"class":1004,"line":1054},[1002,134359,28796],{"class":1030},[1002,134361,6965],{"class":1015},[1002,134363,9772],{"class":1030},[1002,134365,134366,134368,134370,134372,134374],{"class":1004,"line":1060},[1002,134367,74514],{"class":1015},[1002,134369,77069],{"class":1030},[1002,134371,2393],{"class":1015},[1002,134373,10248],{"class":1019},[1002,134375,1407],{"class":1030},[1002,134377,134378],{"class":1004,"line":1272},[1002,134379,134380],{"class":1008}," \u002F\u002F some other code\n",[1002,134382,134383],{"class":1004,"line":1348},[1002,134384,134385],{"class":1030}," })();\n",[1002,134387,134388],{"class":1004,"line":1354},[1002,134389,1269],{"class":1030},[1002,134391,134392],{"class":1004,"line":1360},[1002,134393,134394],{"class":1008}," \u002F\u002F x is still 1.\n",[1002,134396,134397],{"class":1004,"line":1366},[1002,134398,1170],{"class":1030},[925,134400,134401],{},"This method is actually quite flexible, and can be used anywhere you need a temporary scope, not just within block statements. This is quite powerful, and if you understand scoping, hoisting will make a lot more sense to you.",[953,134403,134405],{"id":134404},"declarations-names-and-hoisting","Declarations, Names, and Hoisting",[925,134407,134408],{},"In JavaScript, a name enters a scope in one of four basic ways:",[1530,134410,134411,134417,134423,134432],{},[974,134412,134413,134416],{},[1107,134414,134415],{},"Language-defined",": All scopes are, by default, given the names this and arguments.",[974,134418,134419,134422],{},[1107,134420,134421],{},"Formal parameters",": Functions can have named formal parameters, which are scoped to the body of that function.",[974,134424,134425,134428,134429,948],{},[1107,134426,134427],{},"Function declarations",": These are of the form ",[1107,134430,134431],{},"function foo() {}",[974,134433,134434,134437,134438,948],{},[1107,134435,134436],{},"Variable declarations",": These take the form ",[1107,134439,134440],{},"var foo;",[925,134442,134443,134444,134447],{},"Function declarations and variable declarations are always moved (",[1107,134445,134446],{},"hoisted",") invisibly to the top of their containing scope by the JavaScript interpreter. Function parameters and language-defined names are, obviously, already there. This means that code like this:",[993,134449,134451],{"className":995,"code":134450,"language":997,"meta":998,"style":998},"function foo() {\n bar();\n var x = 1;\n}\nis actually interpreted like this:\n\nfunction foo() {\n var x;\n bar();\n x = 1;\n}\n",[941,134452,134453,134461,134468,134480,134484,134493,134497,134505,134511,134517,134528],{"__ignoreMap":998},[1002,134454,134455,134457,134459],{"class":1004,"line":1005},[1002,134456,6965],{"class":1015},[1002,134458,34640],{"class":1026},[1002,134460,3025],{"class":1030},[1002,134462,134463,134466],{"class":1004,"line":1012},[1002,134464,134465],{"class":1026}," bar",[1002,134467,1428],{"class":1030},[1002,134469,134470,134472,134474,134476,134478],{"class":1004,"line":1047},[1002,134471,51906],{"class":1015},[1002,134473,77069],{"class":1030},[1002,134475,2393],{"class":1015},[1002,134477,6246],{"class":1019},[1002,134479,1407],{"class":1030},[1002,134481,134482],{"class":1004,"line":1054},[1002,134483,1170],{"class":1030},[1002,134485,134486,134489,134491],{"class":1004,"line":1060},[1002,134487,134488],{"class":1030},"is actually interpreted like ",[1002,134490,3455],{"class":1026},[1002,134492,2616],{"class":1030},[1002,134494,134495],{"class":1004,"line":1272},[1002,134496,1051],{"emptyLinePlaceholder":1050},[1002,134498,134499,134501,134503],{"class":1004,"line":1348},[1002,134500,6965],{"class":1015},[1002,134502,34640],{"class":1026},[1002,134504,3025],{"class":1030},[1002,134506,134507,134509],{"class":1004,"line":1354},[1002,134508,51906],{"class":1015},[1002,134510,96413],{"class":1030},[1002,134512,134513,134515],{"class":1004,"line":1360},[1002,134514,134465],{"class":1026},[1002,134516,1428],{"class":1030},[1002,134518,134519,134522,134524,134526],{"class":1004,"line":1366},[1002,134520,134521],{"class":1030}," x ",[1002,134523,2393],{"class":1015},[1002,134525,6246],{"class":1019},[1002,134527,1407],{"class":1030},[1002,134529,134530],{"class":1004,"line":1946},[1002,134531,1170],{"class":1030},[925,134533,134534],{},"It turns out that it doesn’t matter whether the line that contains the declaration would ever be executed.",[925,134536,134537],{},"The following two functions are equivalent:",[993,134539,134541],{"className":995,"code":134540,"language":997,"meta":998,"style":998},"function foo() {\n if (false) {\n var x = 1;\n }\n return;\n var y = 1;\n}\nfunction foo() {\n var x, y;\n if (false) {\n x = 1;\n }\n return;\n y = 1;\n}\n",[941,134542,134543,134551,134561,134573,134577,134583,134595,134599,134607,134614,134624,134634,134638,134644,134655],{"__ignoreMap":998},[1002,134544,134545,134547,134549],{"class":1004,"line":1005},[1002,134546,6965],{"class":1015},[1002,134548,34640],{"class":1026},[1002,134550,3025],{"class":1030},[1002,134552,134553,134555,134557,134559],{"class":1004,"line":1012},[1002,134554,19971],{"class":1015},[1002,134556,6513],{"class":1030},[1002,134558,19341],{"class":1019},[1002,134560,2382],{"class":1030},[1002,134562,134563,134565,134567,134569,134571],{"class":1004,"line":1047},[1002,134564,51906],{"class":1015},[1002,134566,77069],{"class":1030},[1002,134568,2393],{"class":1015},[1002,134570,6246],{"class":1019},[1002,134572,1407],{"class":1030},[1002,134574,134575],{"class":1004,"line":1054},[1002,134576,1269],{"class":1030},[1002,134578,134579,134581],{"class":1004,"line":1060},[1002,134580,15066],{"class":1015},[1002,134582,1407],{"class":1030},[1002,134584,134585,134587,134589,134591,134593],{"class":1004,"line":1272},[1002,134586,28293],{"class":1015},[1002,134588,50680],{"class":1030},[1002,134590,2393],{"class":1015},[1002,134592,6246],{"class":1019},[1002,134594,1407],{"class":1030},[1002,134596,134597],{"class":1004,"line":1348},[1002,134598,1170],{"class":1030},[1002,134600,134601,134603,134605],{"class":1004,"line":1354},[1002,134602,6965],{"class":1015},[1002,134604,34640],{"class":1026},[1002,134606,3025],{"class":1030},[1002,134608,134609,134611],{"class":1004,"line":1360},[1002,134610,28293],{"class":1015},[1002,134612,134613],{"class":1030}," x, y;\n",[1002,134615,134616,134618,134620,134622],{"class":1004,"line":1366},[1002,134617,19971],{"class":1015},[1002,134619,6513],{"class":1030},[1002,134621,19341],{"class":1019},[1002,134623,2382],{"class":1030},[1002,134625,134626,134628,134630,134632],{"class":1004,"line":1946},[1002,134627,134521],{"class":1030},[1002,134629,2393],{"class":1015},[1002,134631,6246],{"class":1019},[1002,134633,1407],{"class":1030},[1002,134635,134636],{"class":1004,"line":1956},[1002,134637,1269],{"class":1030},[1002,134639,134640,134642],{"class":1004,"line":1961},[1002,134641,15066],{"class":1015},[1002,134643,1407],{"class":1030},[1002,134645,134646,134649,134651,134653],{"class":1004,"line":1971},[1002,134647,134648],{"class":1030}," y ",[1002,134650,2393],{"class":1015},[1002,134652,6246],{"class":1019},[1002,134654,1407],{"class":1030},[1002,134656,134657],{"class":1004,"line":1980},[1002,134658,1170],{"class":1030},[925,134660,134661],{},"Notice that the assignment portion of the declarations were not hoisted. Only the name is hoisted.\nThis is not the case with function declarations, where the entire function body will be hoisted as well.\nBut remember that there are two normal ways to declare functions. Consider the following JavaScript:",[993,134663,134665],{"className":995,"code":134664,"language":997,"meta":998,"style":998},"function test() {\n foo(); \u002F\u002F TypeError \"foo is not a function\"\n bar(); \u002F\u002F \"this will run!\"\n var foo = function () {\n \u002F\u002F function expression assigned to local variable 'foo'\n alert(\"this won't run!\");\n };\n function bar() {\n \u002F\u002F function declaration, given the name 'bar'\n alert('this will run!');\n }\n}\n\ntest();\n",[941,134666,134667,134676,134685,134694,134706,134711,134722,134726,134734,134739,134750,134754,134758,134762],{"__ignoreMap":998},[1002,134668,134669,134671,134674],{"class":1004,"line":1005},[1002,134670,6965],{"class":1015},[1002,134672,134673],{"class":1026}," test",[1002,134675,3025],{"class":1030},[1002,134677,134678,134680,134682],{"class":1004,"line":1012},[1002,134679,97981],{"class":1026},[1002,134681,6859],{"class":1030},[1002,134683,134684],{"class":1008},"\u002F\u002F TypeError \"foo is not a function\"\n",[1002,134686,134687,134689,134691],{"class":1004,"line":1047},[1002,134688,100548],{"class":1026},[1002,134690,6859],{"class":1030},[1002,134692,134693],{"class":1008},"\u002F\u002F \"this will run!\"\n",[1002,134695,134696,134698,134700,134702,134704],{"class":1004,"line":1054},[1002,134697,28293],{"class":1015},[1002,134699,34640],{"class":1026},[1002,134701,1023],{"class":1015},[1002,134703,8457],{"class":1015},[1002,134705,9772],{"class":1030},[1002,134707,134708],{"class":1004,"line":1060},[1002,134709,134710],{"class":1008}," \u002F\u002F function expression assigned to local variable 'foo'\n",[1002,134712,134713,134715,134717,134720],{"class":1004,"line":1272},[1002,134714,93191],{"class":1026},[1002,134716,1031],{"class":1030},[1002,134718,134719],{"class":1034},"\"this won't run!\"",[1002,134721,1085],{"class":1030},[1002,134723,134724],{"class":1004,"line":1348},[1002,134725,15113],{"class":1030},[1002,134727,134728,134730,134732],{"class":1004,"line":1354},[1002,134729,18965],{"class":1015},[1002,134731,38219],{"class":1026},[1002,134733,3025],{"class":1030},[1002,134735,134736],{"class":1004,"line":1360},[1002,134737,134738],{"class":1008}," \u002F\u002F function declaration, given the name 'bar'\n",[1002,134740,134741,134743,134745,134748],{"class":1004,"line":1366},[1002,134742,93191],{"class":1026},[1002,134744,1031],{"class":1030},[1002,134746,134747],{"class":1034},"'this will run!'",[1002,134749,1085],{"class":1030},[1002,134751,134752],{"class":1004,"line":1946},[1002,134753,1269],{"class":1030},[1002,134755,134756],{"class":1004,"line":1956},[1002,134757,1170],{"class":1030},[1002,134759,134760],{"class":1004,"line":1961},[1002,134761,1051],{"emptyLinePlaceholder":1050},[1002,134763,134764,134766],{"class":1004,"line":1971},[1002,134765,21237],{"class":1026},[1002,134767,1428],{"class":1030},[925,134769,134770],{},"In this case, only the function declaration has its body hoisted to the top. The name ‘foo’ is hoisted, but the body is left behind, to be assigned during execution.",[925,134772,134773],{},"That covers the basics of hoisting, which is not as complex or confusing as it seems. Of course, this being JavaScript, there is a little more complexity in certain special cases.",[953,134775,134777],{"id":134776},"how-to-code-with-this-knowledge","How to Code With This Knowledge",[925,134779,134780,134781,134783,134784,134787],{},"The most important thing is to always declare your variables with a ",[941,134782,18311],{}," statement. I strongly recommend that you have exactly one var statement per scope, and that it be at the top. If you force yourself to do this, you will never have hoisting-related confusion. However, doing this can make it hard to keep track of which variables have actually been declared in the current scope. I recommend using JSLint with the ",[941,134785,134786],{},"onevar"," option to enforce this. If you’ve done all of this, your code should look something like this:",[993,134789,134791],{"className":995,"code":134790,"language":997,"meta":998,"style":998},"\u002F*jslint onevar: true [...] *\u002F\nfunction foo(a, b, c) {\n var x = 1,\n bar,\n baz = 'something';\n}\n",[941,134792,134793,134798,134818,134830,134835,134847],{"__ignoreMap":998},[1002,134794,134795],{"class":1004,"line":1005},[1002,134796,134797],{"class":1008},"\u002F*jslint onevar: true [...] *\u002F\n",[1002,134799,134800,134802,134804,134806,134808,134810,134812,134814,134816],{"class":1004,"line":1012},[1002,134801,6965],{"class":1015},[1002,134803,34640],{"class":1026},[1002,134805,1031],{"class":1030},[1002,134807,933],{"class":2378},[1002,134809,1251],{"class":1030},[1002,134811,31621],{"class":2378},[1002,134813,1251],{"class":1030},[1002,134815,77116],{"class":2378},[1002,134817,2382],{"class":1030},[1002,134819,134820,134822,134824,134826,134828],{"class":1004,"line":1047},[1002,134821,28293],{"class":1015},[1002,134823,77069],{"class":1030},[1002,134825,2393],{"class":1015},[1002,134827,6246],{"class":1019},[1002,134829,1143],{"class":1030},[1002,134831,134832],{"class":1004,"line":1054},[1002,134833,134834],{"class":1030}," bar,\n",[1002,134836,134837,134840,134842,134845],{"class":1004,"line":1060},[1002,134838,134839],{"class":1030}," baz ",[1002,134841,2393],{"class":1015},[1002,134843,134844],{"class":1034}," 'something'",[1002,134846,1407],{"class":1030},[1002,134848,134849],{"class":1004,"line":1272},[1002,134850,1170],{"class":1030},[953,134852,134854],{"id":134853},"what-the-standard-says","What the Standard Says",[925,134856,134857],{},"I find that it’s often useful to just consult the ECMAScript Standard directly to understand how these things work.\n ",[1579,134859,134860],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":134862},[134863,134864,134867,134868,134869],{"id":133920,"depth":1012,"text":133921},{"id":134173,"depth":1012,"text":134174,"children":134865},[134866],{"id":134177,"depth":1047,"text":134178},{"id":134404,"depth":1012,"text":134405},{"id":134776,"depth":1012,"text":134777},{"id":134853,"depth":1012,"text":134854},"2014-05-28","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjavascript-hoisting-and-scope.jpg",{},{"title":522,"description":524},"blog\u002Fjavascript-hoisting-and-scope",[16,17],"ROhjtmEydLluFpNScZUnf5EjGDJueEVw0J4lLmEucVo",{"id":134878,"title":455,"author":920,"body":134879,"date":136764,"description":457,"extension":1591,"image":136765,"meta":136766,"navigation":1050,"path":456,"seo":136767,"stem":136768,"tags":136769,"__hash__":136770},"blog\u002Fblog\u002Fintroduction-to-ember-js.md",{"type":922,"value":134880,"toc":136745},[134881,134884,134888,134891,134897,134901,134904,134907,134911,134914,134920,134923,134929,134932,135093,135097,135100,135103,135123,135126,135130,135133,135165,135169,135179,135315,135321,135325,135328,135427,135433,135595,135601,135699,135706,135709,135738,135741,135749,135755,135803,135807,135813,135900,135905,135909,136040,136045,136049,136056,136232,136235,136239,136248,136427,136434,136438,136441,136448,136452,136495,136498,136502,136536,136539,136556,136566,136571,136660,136664,136676,136684,136688,136695,136699,136739,136742],[925,134882,134883],{},"To learn Ember.js you need to have a basic understanding of Javascript, CSS, and HTML, you don't need to know server-side technologies like Ruby on Rails, .NET, Python\u002FDjango or Java",[953,134885,134887],{"id":134886},"who-uses-emberjs","Who uses Ember.js?",[925,134889,134890],{},"Among many who uses Ember.js are Yahoo, Tilde, Discourse, Groupon and Living Social.",[925,134892,134893],{},[963,134894],{"alt":134895,"src":134896},"Among many who uses Ember.js","\u002Fimages\u002Fblog\u002F2014-05-21-introduction-to-ember-js\u002F94ffe968-c78f-4ab8-9453-23cd064c600f.png",[953,134898,134900],{"id":134899},"why-emberjs","Why Ember.js?",[925,134902,134903],{},"With Ember, Small choices are made for you, just like Rails it lets you solve more interesting problems.\nIt also manages the complexity of large application stuff you didn't know you needed is already there.",[925,134905,134906],{},"You could develop a web app that exposes a Restful web API, and Ember.js can consume the web API along with other client-side implementations like an iOS or an Android app.\nEmber.js is not the best option if you are planning to develop something like a blog, a newspaper or static content.",[953,134908,134910],{"id":134909},"getting-started-with-emberjs","Getting Started with Ember.js",[925,134912,134913],{},"You can download the starter kit from the following location:",[925,134915,134916],{},[933,134917,134918],{"href":134918,"rel":134919},"http:\u002F\u002Femberjs.com\u002F",[937],[925,134921,134922],{},"And the Ember Data can be downloaded from:",[925,134924,134925],{},[933,134926,134927],{"href":134927,"rel":134928},"http:\u002F\u002Fgetbootstrap.com\u002F",[937],[925,134930,134931],{},"Let's set up the index.html file",[993,134933,134935],{"className":37880,"code":134934,"language":383,"meta":998,"style":998},"\u003Chtml>\n \u003Chead>\n \u003Cscript src=\"jquery.js\">\u003C\u002Fscript>\n \u003Cscript src=\"handlebars.js\">\u003C\u002Fscript>\n \u003Cscript src=\"ember.js\">\u003C\u002Fscript>\n \u003Cscript src=\"ember-data.js\">\u003C\u002Fscript>\n \u003Cscript src=\"app.js\">\u003C\u002Fscript>\n \u003Clink href=\"bootstrap.css\" media=\"screen\" rel=\"stylesheet\" \u002F>\n \u003C\u002Fhead>\n\u003C\u002Fhtml>\n",[941,134936,134937,134945,134953,134972,134991,135010,135029,135048,135077,135085],{"__ignoreMap":998},[1002,134938,134939,134941,134943],{"class":1004,"line":1005},[1002,134940,6539],{"class":1030},[1002,134942,383],{"class":15711},[1002,134944,15703],{"class":1030},[1002,134946,134947,134949,134951],{"class":1004,"line":1012},[1002,134948,22427],{"class":1030},[1002,134950,32092],{"class":15711},[1002,134952,15703],{"class":1030},[1002,134954,134955,134957,134959,134961,134963,134966,134968,134970],{"class":1004,"line":1047},[1002,134956,15697],{"class":1030},[1002,134958,22063],{"class":15711},[1002,134960,15242],{"class":1026},[1002,134962,2393],{"class":1030},[1002,134964,134965],{"class":1034},"\"jquery.js\"",[1002,134967,22081],{"class":1030},[1002,134969,22063],{"class":15711},[1002,134971,15703],{"class":1030},[1002,134973,134974,134976,134978,134980,134982,134985,134987,134989],{"class":1004,"line":1054},[1002,134975,15697],{"class":1030},[1002,134977,22063],{"class":15711},[1002,134979,15242],{"class":1026},[1002,134981,2393],{"class":1030},[1002,134983,134984],{"class":1034},"\"handlebars.js\"",[1002,134986,22081],{"class":1030},[1002,134988,22063],{"class":15711},[1002,134990,15703],{"class":1030},[1002,134992,134993,134995,134997,134999,135001,135004,135006,135008],{"class":1004,"line":1060},[1002,134994,15697],{"class":1030},[1002,134996,22063],{"class":15711},[1002,134998,15242],{"class":1026},[1002,135000,2393],{"class":1030},[1002,135002,135003],{"class":1034},"\"ember.js\"",[1002,135005,22081],{"class":1030},[1002,135007,22063],{"class":15711},[1002,135009,15703],{"class":1030},[1002,135011,135012,135014,135016,135018,135020,135023,135025,135027],{"class":1004,"line":1272},[1002,135013,15697],{"class":1030},[1002,135015,22063],{"class":15711},[1002,135017,15242],{"class":1026},[1002,135019,2393],{"class":1030},[1002,135021,135022],{"class":1034},"\"ember-data.js\"",[1002,135024,22081],{"class":1030},[1002,135026,22063],{"class":15711},[1002,135028,15703],{"class":1030},[1002,135030,135031,135033,135035,135037,135039,135042,135044,135046],{"class":1004,"line":1348},[1002,135032,15697],{"class":1030},[1002,135034,22063],{"class":15711},[1002,135036,15242],{"class":1026},[1002,135038,2393],{"class":1030},[1002,135040,135041],{"class":1034},"\"app.js\"",[1002,135043,22081],{"class":1030},[1002,135045,22063],{"class":15711},[1002,135047,15703],{"class":1030},[1002,135049,135050,135052,135054,135056,135058,135061,135064,135066,135069,135071,135073,135075],{"class":1004,"line":1354},[1002,135051,15697],{"class":1030},[1002,135053,47171],{"class":15711},[1002,135055,47182],{"class":1026},[1002,135057,2393],{"class":1030},[1002,135059,135060],{"class":1034},"\"bootstrap.css\"",[1002,135062,135063],{"class":1026}," media",[1002,135065,2393],{"class":1030},[1002,135067,135068],{"class":1034},"\"screen\"",[1002,135070,47174],{"class":1026},[1002,135072,2393],{"class":1030},[1002,135074,47179],{"class":1034},[1002,135076,15258],{"class":1030},[1002,135078,135079,135081,135083],{"class":1004,"line":1360},[1002,135080,28112],{"class":1030},[1002,135082,32092],{"class":15711},[1002,135084,15703],{"class":1030},[1002,135086,135087,135089,135091],{"class":1004,"line":1366},[1002,135088,22437],{"class":1030},[1002,135090,383],{"class":15711},[1002,135092,15703],{"class":1030},[953,135094,135096],{"id":135095},"the-ember-application","The Ember Application",[925,135098,135099],{},"We need a single object to contain all the functionality of the app.",[925,135101,135102],{},"Let's create an app.js file",[993,135104,135106],{"className":995,"code":135105,"language":997,"meta":998,"style":998},"var App = Ember.Application.create({});\n",[941,135107,135108],{"__ignoreMap":998},[1002,135109,135110,135112,135114,135116,135119,135121],{"class":1004,"line":1005},[1002,135111,18311],{"class":1015},[1002,135113,28641],{"class":1030},[1002,135115,2393],{"class":1015},[1002,135117,135118],{"class":1030}," Ember.Application.",[1002,135120,48241],{"class":1026},[1002,135122,106724],{"class":1030},[925,135124,135125],{},"Here we are using App as the namespace, but you could use any name for this variable. An application needs to be created only once.",[1655,135127,135129],{"id":135128},"ember-application-options","Ember Application Options",[925,135131,135132],{},"Inside the application, we can send in a JavaScript Object with options. For instance, for debugging, in app.js we can log out a message to the browser everytime a new page is accessed.",[993,135134,135136],{"className":995,"code":135135,"language":997,"meta":998,"style":998},"var App = Ember.Application.create({\n LOG_TRANSITIONS: true,\n});\n",[941,135137,135138,135152,135161],{"__ignoreMap":998},[1002,135139,135140,135142,135144,135146,135148,135150],{"class":1004,"line":1005},[1002,135141,18311],{"class":1015},[1002,135143,28641],{"class":1030},[1002,135145,2393],{"class":1015},[1002,135147,135118],{"class":1030},[1002,135149,48241],{"class":1026},[1002,135151,2756],{"class":1030},[1002,135153,135154,135157,135159],{"class":1004,"line":1012},[1002,135155,135156],{"class":1030}," LOG_TRANSITIONS: ",[1002,135158,17397],{"class":1019},[1002,135160,1143],{"class":1030},[1002,135162,135163],{"class":1004,"line":1047},[1002,135164,2804],{"class":1030},[1655,135166,135168],{"id":135167},"running-our-first-app","Running Our First App",[925,135170,135171,135172,2034,135175,135178],{},"If we open the app in firebug or chrome DevTools and view the source code, you will see that Ember added a body class ",[1107,135173,135174],{},"ember-application",[1107,135176,135177],{},"data-ember-extension",", to our code.",[993,135180,135182],{"className":37880,"code":135181,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html>\n\u003Chtml>\n \u003Chead>\n ...\n \u003C\u002Fhead>\n \u003Cbody class=\"ember-application\" data-ember-extension=\"1\">\n \u003Cdiv class=\"navbar\">\u003C\u002Fdiv>\n \u003Cdiv class=\"container\">\u003C\u002Fdiv>\n \u003Cfooter class=\"container\">\u003C\u002Ffooter>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,135183,135184,135194,135202,135210,135214,135222,135244,135263,135281,135299,135307],{"__ignoreMap":998},[1002,135185,135186,135188,135190,135192],{"class":1004,"line":1005},[1002,135187,37888],{"class":1030},[1002,135189,37891],{"class":15711},[1002,135191,21739],{"class":1026},[1002,135193,15703],{"class":1030},[1002,135195,135196,135198,135200],{"class":1004,"line":1012},[1002,135197,6539],{"class":1030},[1002,135199,383],{"class":15711},[1002,135201,15703],{"class":1030},[1002,135203,135204,135206,135208],{"class":1004,"line":1047},[1002,135205,22427],{"class":1030},[1002,135207,32092],{"class":15711},[1002,135209,15703],{"class":1030},[1002,135211,135212],{"class":1004,"line":1054},[1002,135213,48894],{"class":1030},[1002,135215,135216,135218,135220],{"class":1004,"line":1060},[1002,135217,28112],{"class":1030},[1002,135219,32092],{"class":15711},[1002,135221,15703],{"class":1030},[1002,135223,135224,135226,135228,135230,135232,135235,135238,135240,135242],{"class":1004,"line":1272},[1002,135225,22427],{"class":1030},[1002,135227,15034],{"class":15711},[1002,135229,17187],{"class":1026},[1002,135231,2393],{"class":1030},[1002,135233,135234],{"class":1034},"\"ember-application\"",[1002,135236,135237],{"class":1026}," data-ember-extension",[1002,135239,2393],{"class":1030},[1002,135241,127544],{"class":1034},[1002,135243,15703],{"class":1030},[1002,135245,135246,135248,135250,135252,135254,135257,135259,135261],{"class":1004,"line":1348},[1002,135247,15697],{"class":1030},[1002,135249,19650],{"class":15711},[1002,135251,17187],{"class":1026},[1002,135253,2393],{"class":1030},[1002,135255,135256],{"class":1034},"\"navbar\"",[1002,135258,22081],{"class":1030},[1002,135260,19650],{"class":15711},[1002,135262,15703],{"class":1030},[1002,135264,135265,135267,135269,135271,135273,135275,135277,135279],{"class":1004,"line":1354},[1002,135266,15697],{"class":1030},[1002,135268,19650],{"class":15711},[1002,135270,17187],{"class":1026},[1002,135272,2393],{"class":1030},[1002,135274,30137],{"class":1034},[1002,135276,22081],{"class":1030},[1002,135278,19650],{"class":15711},[1002,135280,15703],{"class":1030},[1002,135282,135283,135285,135287,135289,135291,135293,135295,135297],{"class":1004,"line":1360},[1002,135284,15697],{"class":1030},[1002,135286,109031],{"class":15711},[1002,135288,17187],{"class":1026},[1002,135290,2393],{"class":1030},[1002,135292,30137],{"class":1034},[1002,135294,22081],{"class":1030},[1002,135296,109031],{"class":15711},[1002,135298,15703],{"class":1030},[1002,135300,135301,135303,135305],{"class":1004,"line":1366},[1002,135302,28112],{"class":1030},[1002,135304,15034],{"class":15711},[1002,135306,15703],{"class":1030},[1002,135308,135309,135311,135313],{"class":1004,"line":1946},[1002,135310,22437],{"class":1030},[1002,135312,383],{"class":15711},[1002,135314,15703],{"class":1030},[925,135316,135317,135318,135320],{},"This way Ember will know the part of the page it will control. But then we need to dynamically update the content inside the body, this where templates come in handy. And we will need to move everything within our ",[1107,135319,15034],{}," in to the template.",[953,135322,135324],{"id":135323},"handlebars-template","Handlebars Template",[925,135326,135327],{},"Handlebars templates look like regular HTML with Handlebars expressions.",[993,135329,135331],{"className":37880,"code":135330,"language":383,"meta":998,"style":998},"\u003Cbody>\n \u003Cscript type=\"text\u002Fx-handlebars\">\n \u003Cdiv class='navbar'>\u003C\u002Fdiv>\n \u003Cdiv class='container'>\u003C\u002Fdiv>\n \u003Cfooter class='container'>\u003C\u002Ffooter>\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n",[941,135332,135333,135341,135355,135374,135393,135411,135419],{"__ignoreMap":998},[1002,135334,135335,135337,135339],{"class":1004,"line":1005},[1002,135336,6539],{"class":1030},[1002,135338,15034],{"class":15711},[1002,135340,15703],{"class":1030},[1002,135342,135343,135345,135347,135349,135351,135353],{"class":1004,"line":1012},[1002,135344,22427],{"class":1030},[1002,135346,22063],{"class":15711},[1002,135348,29274],{"class":1026},[1002,135350,2393],{"class":1030},[1002,135352,116983],{"class":1034},[1002,135354,15703],{"class":1030},[1002,135356,135357,135359,135361,135363,135365,135368,135370,135372],{"class":1004,"line":1047},[1002,135358,15697],{"class":1030},[1002,135360,19650],{"class":15711},[1002,135362,17187],{"class":1026},[1002,135364,2393],{"class":1030},[1002,135366,135367],{"class":1034},"'navbar'",[1002,135369,22081],{"class":1030},[1002,135371,19650],{"class":15711},[1002,135373,15703],{"class":1030},[1002,135375,135376,135378,135380,135382,135384,135387,135389,135391],{"class":1004,"line":1054},[1002,135377,15697],{"class":1030},[1002,135379,19650],{"class":15711},[1002,135381,17187],{"class":1026},[1002,135383,2393],{"class":1030},[1002,135385,135386],{"class":1034},"'container'",[1002,135388,22081],{"class":1030},[1002,135390,19650],{"class":15711},[1002,135392,15703],{"class":1030},[1002,135394,135395,135397,135399,135401,135403,135405,135407,135409],{"class":1004,"line":1060},[1002,135396,15697],{"class":1030},[1002,135398,109031],{"class":15711},[1002,135400,17187],{"class":1026},[1002,135402,2393],{"class":1030},[1002,135404,135386],{"class":1034},[1002,135406,22081],{"class":1030},[1002,135408,109031],{"class":15711},[1002,135410,15703],{"class":1030},[1002,135412,135413,135415,135417],{"class":1004,"line":1272},[1002,135414,28112],{"class":1030},[1002,135416,22063],{"class":15711},[1002,135418,15703],{"class":1030},[1002,135420,135421,135423,135425],{"class":1004,"line":1348},[1002,135422,22437],{"class":1030},[1002,135424,15034],{"class":15711},[1002,135426,15703],{"class":1030},[925,135428,135429,135430,948],{},"Ember by default will render the handlebars template into a div, so that Ember can uniquely identify that div. In this case ",[928,135431,135432],{},"ember248",[993,135434,135436],{"className":37880,"code":135435,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html>\n\u003Chtml>\n \u003Chead>\n ...\n \u003C\u002Fhead>\n \u003Cbody class=\"ember-application\" data-ember-extension=\"1\">\n \u003Cdiv id=\"ember248\" class=\"ember-view\">\n \u003Cdiv class=\"navbar\">\u003C\u002Fdiv>\n \u003Cdiv class=\"container\">\u003C\u002Fdiv>\n \u003Cfooter class=\"container\">\u003C\u002Ffooter>\n \u003C\u002Fdiv>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,135437,135438,135448,135456,135464,135468,135476,135496,135517,135535,135553,135571,135579,135587],{"__ignoreMap":998},[1002,135439,135440,135442,135444,135446],{"class":1004,"line":1005},[1002,135441,37888],{"class":1030},[1002,135443,37891],{"class":15711},[1002,135445,21739],{"class":1026},[1002,135447,15703],{"class":1030},[1002,135449,135450,135452,135454],{"class":1004,"line":1012},[1002,135451,6539],{"class":1030},[1002,135453,383],{"class":15711},[1002,135455,15703],{"class":1030},[1002,135457,135458,135460,135462],{"class":1004,"line":1047},[1002,135459,22427],{"class":1030},[1002,135461,32092],{"class":15711},[1002,135463,15703],{"class":1030},[1002,135465,135466],{"class":1004,"line":1054},[1002,135467,48894],{"class":1030},[1002,135469,135470,135472,135474],{"class":1004,"line":1060},[1002,135471,28112],{"class":1030},[1002,135473,32092],{"class":15711},[1002,135475,15703],{"class":1030},[1002,135477,135478,135480,135482,135484,135486,135488,135490,135492,135494],{"class":1004,"line":1272},[1002,135479,22427],{"class":1030},[1002,135481,15034],{"class":15711},[1002,135483,17187],{"class":1026},[1002,135485,2393],{"class":1030},[1002,135487,135234],{"class":1034},[1002,135489,135237],{"class":1026},[1002,135491,2393],{"class":1030},[1002,135493,127544],{"class":1034},[1002,135495,15703],{"class":1030},[1002,135497,135498,135500,135502,135504,135506,135509,135511,135513,135515],{"class":1004,"line":1348},[1002,135499,15697],{"class":1030},[1002,135501,19650],{"class":15711},[1002,135503,21489],{"class":1026},[1002,135505,2393],{"class":1030},[1002,135507,135508],{"class":1034},"\"ember248\"",[1002,135510,17187],{"class":1026},[1002,135512,2393],{"class":1030},[1002,135514,127038],{"class":1034},[1002,135516,15703],{"class":1030},[1002,135518,135519,135521,135523,135525,135527,135529,135531,135533],{"class":1004,"line":1354},[1002,135520,19579],{"class":1030},[1002,135522,19650],{"class":15711},[1002,135524,17187],{"class":1026},[1002,135526,2393],{"class":1030},[1002,135528,135256],{"class":1034},[1002,135530,22081],{"class":1030},[1002,135532,19650],{"class":15711},[1002,135534,15703],{"class":1030},[1002,135536,135537,135539,135541,135543,135545,135547,135549,135551],{"class":1004,"line":1360},[1002,135538,19579],{"class":1030},[1002,135540,19650],{"class":15711},[1002,135542,17187],{"class":1026},[1002,135544,2393],{"class":1030},[1002,135546,30137],{"class":1034},[1002,135548,22081],{"class":1030},[1002,135550,19650],{"class":15711},[1002,135552,15703],{"class":1030},[1002,135554,135555,135557,135559,135561,135563,135565,135567,135569],{"class":1004,"line":1366},[1002,135556,19579],{"class":1030},[1002,135558,109031],{"class":15711},[1002,135560,17187],{"class":1026},[1002,135562,2393],{"class":1030},[1002,135564,30137],{"class":1034},[1002,135566,22081],{"class":1030},[1002,135568,109031],{"class":15711},[1002,135570,15703],{"class":1030},[1002,135572,135573,135575,135577],{"class":1004,"line":1946},[1002,135574,19647],{"class":1030},[1002,135576,19650],{"class":15711},[1002,135578,15703],{"class":1030},[1002,135580,135581,135583,135585],{"class":1004,"line":1956},[1002,135582,28112],{"class":1030},[1002,135584,15034],{"class":15711},[1002,135586,15703],{"class":1030},[1002,135588,135589,135591,135593],{"class":1004,"line":1961},[1002,135590,22437],{"class":1030},[1002,135592,383],{"class":15711},[1002,135594,15703],{"class":1030},[925,135596,135597,135598,948],{},"If we wanted to make the content of the above template dynamic, we use a syntax called ",[1107,135599,135600],{},"handlebars expression",[993,135602,135604],{"className":995,"code":135603,"language":997,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\">\n \u003Cdiv class=\"navbar\">...\u003C\u002Fdiv>\n \u003Cdiv class=\"container\">\n \u003Ch1>Welcome to {{ siteName }}!\u003C\u002Fh1>\n \u003C\u002Fdiv>\n \u003Cfooter class=\"container\">...\u003C\u002Ffooter>\n\u003C\u002Fscript>\n",[941,135605,135606,135620,135638,135652,135665,135673,135691],{"__ignoreMap":998},[1002,135607,135608,135610,135612,135614,135616,135618],{"class":1004,"line":1005},[1002,135609,6539],{"class":1030},[1002,135611,22063],{"class":15711},[1002,135613,29274],{"class":1026},[1002,135615,2393],{"class":1015},[1002,135617,116983],{"class":1034},[1002,135619,15703],{"class":1030},[1002,135621,135622,135624,135626,135628,135630,135632,135634,135636],{"class":1004,"line":1012},[1002,135623,22427],{"class":1030},[1002,135625,19650],{"class":15711},[1002,135627,17187],{"class":1026},[1002,135629,2393],{"class":1015},[1002,135631,135256],{"class":1034},[1002,135633,80793],{"class":1030},[1002,135635,19650],{"class":15711},[1002,135637,15703],{"class":1030},[1002,135639,135640,135642,135644,135646,135648,135650],{"class":1004,"line":1047},[1002,135641,22427],{"class":1030},[1002,135643,19650],{"class":15711},[1002,135645,17187],{"class":1026},[1002,135647,2393],{"class":1015},[1002,135649,30137],{"class":1034},[1002,135651,15703],{"class":1030},[1002,135653,135654,135656,135658,135661,135663],{"class":1004,"line":1054},[1002,135655,15697],{"class":1030},[1002,135657,15201],{"class":15711},[1002,135659,135660],{"class":1030},">Welcome to {{ siteName }}!\u003C\u002F",[1002,135662,15201],{"class":15711},[1002,135664,15703],{"class":1030},[1002,135666,135667,135669,135671],{"class":1004,"line":1060},[1002,135668,28112],{"class":1030},[1002,135670,19650],{"class":15711},[1002,135672,15703],{"class":1030},[1002,135674,135675,135677,135679,135681,135683,135685,135687,135689],{"class":1004,"line":1272},[1002,135676,22427],{"class":1030},[1002,135678,109031],{"class":15711},[1002,135680,17187],{"class":1026},[1002,135682,2393],{"class":1015},[1002,135684,30137],{"class":1034},[1002,135686,80793],{"class":1030},[1002,135688,109031],{"class":15711},[1002,135690,15703],{"class":1030},[1002,135692,135693,135695,135697],{"class":1004,"line":1348},[1002,135694,22437],{"class":1030},[1002,135696,22063],{"class":15711},[1002,135698,15703],{"class":1030},[925,135700,135701,135702,135705],{},"The value ",[941,135703,135704],{},"{{siteName}}"," needs to be provided by our ember app.",[925,135707,135708],{},"Our current webpage layout looks like this:",[993,135710,135712],{"className":24154,"code":135711,"language":24156,"meta":998,"style":998},"tree\nbody -| ('application' template)\n |- div.navbar\n |- div.container\n |- footer.container\n",[941,135713,135714,135718,135723,135728,135733],{"__ignoreMap":998},[1002,135715,135716],{"class":1004,"line":1005},[1002,135717,92241],{},[1002,135719,135720],{"class":1004,"line":1012},[1002,135721,135722],{},"body -| ('application' template)\n",[1002,135724,135725],{"class":1004,"line":1047},[1002,135726,135727],{}," |- div.navbar\n",[1002,135729,135730],{"class":1004,"line":1054},[1002,135731,135732],{}," |- div.container\n",[1002,135734,135735],{"class":1004,"line":1060},[1002,135736,135737],{}," |- footer.container\n",[925,135739,135740],{},"We are going to have multiple pages on our website",[1530,135742,135743,135746],{},[974,135744,135745],{},"Homepage",[974,135747,135748],{},"About page",[925,135750,135751,135754],{},[1107,135752,135753],{},"div.container"," can contain:",[993,135756,135758],{"className":37880,"code":135757,"language":383,"meta":998,"style":998},"\u002F\u002F About Page - 'about' template\n\u003Ch1>About Demo Ember\u003C\u002Fh1>\n\n\u002F\u002F Home Page - 'index' template \u002F\u002F We want this to be the default\n\u003Ch1>Welcome to the Demo Ember site!\u003C\u002Fh1>\n",[941,135759,135760,135765,135778,135782,135790],{"__ignoreMap":998},[1002,135761,135762],{"class":1004,"line":1005},[1002,135763,135764],{"class":1030},"\u002F\u002F About Page - 'about' template\n",[1002,135766,135767,135769,135771,135774,135776],{"class":1004,"line":1012},[1002,135768,6539],{"class":1030},[1002,135770,15201],{"class":15711},[1002,135772,135773],{"class":1030},">About Demo Ember\u003C\u002F",[1002,135775,15201],{"class":15711},[1002,135777,15703],{"class":1030},[1002,135779,135780],{"class":1004,"line":1047},[1002,135781,1051],{"emptyLinePlaceholder":1050},[1002,135783,135784,135787],{"class":1004,"line":1054},[1002,135785,135786],{"class":1030},"\u002F\u002F Home Page - 'index' template",[1002,135788,135789],{"class":1030}," \u002F\u002F We want this to be the default\n",[1002,135791,135792,135794,135796,135799,135801],{"class":1004,"line":1060},[1002,135793,6539],{"class":1030},[1002,135795,15201],{"class":15711},[1002,135797,135798],{"class":1030},">Welcome to the Demo Ember site!\u003C\u002F",[1002,135800,15201],{"class":15711},[1002,135802,15703],{"class":1030},[1655,135804,135806],{"id":135805},"adding-a-the-template-name","Adding a the Template Name",[925,135808,135809,135810],{},"Each template needs a unique name, so are calling our main template, ",[928,135811,135812],{},"application",[993,135814,135816],{"className":995,"code":135815,"language":997,"meta":998,"style":998},"\u003Cscript type='text\u002Fx-handlebars' data-template-name='application'>\n \u003Cdiv class='navbar'>\u003C\u002Fdiv>\n \u003Cdiv class='container'>\u003C\u002Fdiv>\n \u003Cfooter class='container'>\u003C\u002Fdiv>\n\u003C\u002Fscript>\n",[941,135817,135818,135838,135856,135874,135892],{"__ignoreMap":998},[1002,135819,135820,135822,135824,135826,135828,135830,135832,135834,135836],{"class":1004,"line":1005},[1002,135821,6539],{"class":1030},[1002,135823,22063],{"class":15711},[1002,135825,29274],{"class":1026},[1002,135827,2393],{"class":1015},[1002,135829,117045],{"class":1034},[1002,135831,116486],{"class":1026},[1002,135833,2393],{"class":1015},[1002,135835,117052],{"class":1034},[1002,135837,15703],{"class":1030},[1002,135839,135840,135842,135844,135846,135848,135850,135852,135854],{"class":1004,"line":1012},[1002,135841,15697],{"class":1030},[1002,135843,19650],{"class":15711},[1002,135845,17187],{"class":1026},[1002,135847,2393],{"class":1015},[1002,135849,135367],{"class":1034},[1002,135851,22081],{"class":1030},[1002,135853,19650],{"class":15711},[1002,135855,15703],{"class":1030},[1002,135857,135858,135860,135862,135864,135866,135868,135870,135872],{"class":1004,"line":1047},[1002,135859,15697],{"class":1030},[1002,135861,19650],{"class":15711},[1002,135863,17187],{"class":1026},[1002,135865,2393],{"class":1015},[1002,135867,135386],{"class":1034},[1002,135869,22081],{"class":1030},[1002,135871,19650],{"class":15711},[1002,135873,15703],{"class":1030},[1002,135875,135876,135878,135880,135882,135884,135886,135888,135890],{"class":1004,"line":1054},[1002,135877,15697],{"class":1030},[1002,135879,109031],{"class":15711},[1002,135881,17187],{"class":1026},[1002,135883,2393],{"class":1015},[1002,135885,135386],{"class":1034},[1002,135887,22081],{"class":1030},[1002,135889,19650],{"class":15711},[1002,135891,15703],{"class":1030},[1002,135893,135894,135896,135898],{"class":1004,"line":1060},[1002,135895,22437],{"class":1030},[1002,135897,22063],{"class":15711},[1002,135899,15703],{"class":1030},[925,135901,3898,135902,135904],{},[928,135903,135812],{}," template is shown for every page by default.",[1655,135906,135908],{"id":135907},"adding-the-homepage-template","Adding the Homepage Template",[993,135910,135912],{"className":995,"code":135911,"language":997,"meta":998,"style":998},"\u003Cscript type='text\u002Fx-handlebars' data-template-name='application'>\n \u003Cdiv class='navbar'>...\u003C\u002Fdiv>\n \u003Cdiv class='container'>...\u003C\u002Fdiv>\n \u003Cfooter class='container'>...\u003C\u002Ffooter>\n\u003C\u002Fscript>\n\n\u003Cscript type='text\u002Fx-handlebars' data-template-name='index'>\n \u003Ch1>Welcome to the Demo Ember site!\u003C\u002Fh1>\n\u003C\u002Fscript>\n",[941,135913,135914,135934,135952,135970,135988,135996,136000,136020,136032],{"__ignoreMap":998},[1002,135915,135916,135918,135920,135922,135924,135926,135928,135930,135932],{"class":1004,"line":1005},[1002,135917,6539],{"class":1030},[1002,135919,22063],{"class":15711},[1002,135921,29274],{"class":1026},[1002,135923,2393],{"class":1015},[1002,135925,117045],{"class":1034},[1002,135927,116486],{"class":1026},[1002,135929,2393],{"class":1015},[1002,135931,117052],{"class":1034},[1002,135933,15703],{"class":1030},[1002,135935,135936,135938,135940,135942,135944,135946,135948,135950],{"class":1004,"line":1012},[1002,135937,15697],{"class":1030},[1002,135939,19650],{"class":15711},[1002,135941,17187],{"class":1026},[1002,135943,2393],{"class":1015},[1002,135945,135367],{"class":1034},[1002,135947,80793],{"class":1030},[1002,135949,19650],{"class":15711},[1002,135951,15703],{"class":1030},[1002,135953,135954,135956,135958,135960,135962,135964,135966,135968],{"class":1004,"line":1047},[1002,135955,15697],{"class":1030},[1002,135957,19650],{"class":15711},[1002,135959,17187],{"class":1026},[1002,135961,2393],{"class":1015},[1002,135963,135386],{"class":1034},[1002,135965,80793],{"class":1030},[1002,135967,19650],{"class":15711},[1002,135969,15703],{"class":1030},[1002,135971,135972,135974,135976,135978,135980,135982,135984,135986],{"class":1004,"line":1054},[1002,135973,15697],{"class":1030},[1002,135975,109031],{"class":15711},[1002,135977,17187],{"class":1026},[1002,135979,2393],{"class":1015},[1002,135981,135386],{"class":1034},[1002,135983,80793],{"class":1030},[1002,135985,109031],{"class":15711},[1002,135987,15703],{"class":1030},[1002,135989,135990,135992,135994],{"class":1004,"line":1060},[1002,135991,22437],{"class":1030},[1002,135993,22063],{"class":15711},[1002,135995,15703],{"class":1030},[1002,135997,135998],{"class":1004,"line":1272},[1002,135999,1051],{"emptyLinePlaceholder":1050},[1002,136001,136002,136004,136006,136008,136010,136012,136014,136016,136018],{"class":1004,"line":1348},[1002,136003,6539],{"class":1030},[1002,136005,22063],{"class":15711},[1002,136007,29274],{"class":1026},[1002,136009,2393],{"class":1015},[1002,136011,117045],{"class":1034},[1002,136013,116486],{"class":1026},[1002,136015,2393],{"class":1015},[1002,136017,85061],{"class":1034},[1002,136019,15703],{"class":1030},[1002,136021,136022,136024,136026,136028,136030],{"class":1004,"line":1354},[1002,136023,15697],{"class":1030},[1002,136025,15201],{"class":15711},[1002,136027,135798],{"class":1030},[1002,136029,15201],{"class":15711},[1002,136031,15703],{"class":1030},[1002,136033,136034,136036,136038],{"class":1004,"line":1360},[1002,136035,22437],{"class":1030},[1002,136037,22063],{"class":15711},[1002,136039,15703],{"class":1030},[925,136041,136042,136044],{},[928,136043,19458],{}," is what we will call the homepage template name.",[1655,136046,136048],{"id":136047},"adding-the-about-template","Adding the About Template",[925,136050,136051,136052,136055],{},"Now let's add the ",[928,136053,136054],{},"about"," template.",[993,136057,136059],{"className":995,"code":136058,"language":997,"meta":998,"style":998},"\u003Cscript type='text\u002Fx-handlebars' data-template-name='application'>\n \u003Cdiv class='navbar'>...\u003C\u002Fdiv>\n \u003Cdiv class='container'>...\u003C\u002Fdiv>\n \u003Cfooter class='container'>...\u003C\u002Ffooter>\n\u003C\u002Fscript>\n\n\u003Cscript type='text\u002Fx-handlebars' data-template-name='index'>\n \u003Ch1>Welcome to the Demo Ember site!\u003C\u002Fh1>\n\u003C\u002Fscript>\n\n\u003Cscript type='text\u002Fx-handlebars' data-template-name='about'>\n \u003Ch1>About the Demo Ember site\u003C\u002Fh1>\n\u003C\u002Fscript>\n",[941,136060,136061,136081,136099,136117,136135,136143,136147,136167,136179,136187,136191,136211,136224],{"__ignoreMap":998},[1002,136062,136063,136065,136067,136069,136071,136073,136075,136077,136079],{"class":1004,"line":1005},[1002,136064,6539],{"class":1030},[1002,136066,22063],{"class":15711},[1002,136068,29274],{"class":1026},[1002,136070,2393],{"class":1015},[1002,136072,117045],{"class":1034},[1002,136074,116486],{"class":1026},[1002,136076,2393],{"class":1015},[1002,136078,117052],{"class":1034},[1002,136080,15703],{"class":1030},[1002,136082,136083,136085,136087,136089,136091,136093,136095,136097],{"class":1004,"line":1012},[1002,136084,15697],{"class":1030},[1002,136086,19650],{"class":15711},[1002,136088,17187],{"class":1026},[1002,136090,2393],{"class":1015},[1002,136092,135367],{"class":1034},[1002,136094,80793],{"class":1030},[1002,136096,19650],{"class":15711},[1002,136098,15703],{"class":1030},[1002,136100,136101,136103,136105,136107,136109,136111,136113,136115],{"class":1004,"line":1047},[1002,136102,15697],{"class":1030},[1002,136104,19650],{"class":15711},[1002,136106,17187],{"class":1026},[1002,136108,2393],{"class":1015},[1002,136110,135386],{"class":1034},[1002,136112,80793],{"class":1030},[1002,136114,19650],{"class":15711},[1002,136116,15703],{"class":1030},[1002,136118,136119,136121,136123,136125,136127,136129,136131,136133],{"class":1004,"line":1054},[1002,136120,15697],{"class":1030},[1002,136122,109031],{"class":15711},[1002,136124,17187],{"class":1026},[1002,136126,2393],{"class":1015},[1002,136128,135386],{"class":1034},[1002,136130,80793],{"class":1030},[1002,136132,109031],{"class":15711},[1002,136134,15703],{"class":1030},[1002,136136,136137,136139,136141],{"class":1004,"line":1060},[1002,136138,22437],{"class":1030},[1002,136140,22063],{"class":15711},[1002,136142,15703],{"class":1030},[1002,136144,136145],{"class":1004,"line":1272},[1002,136146,1051],{"emptyLinePlaceholder":1050},[1002,136148,136149,136151,136153,136155,136157,136159,136161,136163,136165],{"class":1004,"line":1348},[1002,136150,6539],{"class":1030},[1002,136152,22063],{"class":15711},[1002,136154,29274],{"class":1026},[1002,136156,2393],{"class":1015},[1002,136158,117045],{"class":1034},[1002,136160,116486],{"class":1026},[1002,136162,2393],{"class":1015},[1002,136164,85061],{"class":1034},[1002,136166,15703],{"class":1030},[1002,136168,136169,136171,136173,136175,136177],{"class":1004,"line":1354},[1002,136170,15697],{"class":1030},[1002,136172,15201],{"class":15711},[1002,136174,135798],{"class":1030},[1002,136176,15201],{"class":15711},[1002,136178,15703],{"class":1030},[1002,136180,136181,136183,136185],{"class":1004,"line":1360},[1002,136182,22437],{"class":1030},[1002,136184,22063],{"class":15711},[1002,136186,15703],{"class":1030},[1002,136188,136189],{"class":1004,"line":1366},[1002,136190,1051],{"emptyLinePlaceholder":1050},[1002,136192,136193,136195,136197,136199,136201,136203,136205,136207,136209],{"class":1004,"line":1946},[1002,136194,6539],{"class":1030},[1002,136196,22063],{"class":15711},[1002,136198,29274],{"class":1026},[1002,136200,2393],{"class":1015},[1002,136202,117045],{"class":1034},[1002,136204,116486],{"class":1026},[1002,136206,2393],{"class":1015},[1002,136208,67536],{"class":1034},[1002,136210,15703],{"class":1030},[1002,136212,136213,136215,136217,136220,136222],{"class":1004,"line":1956},[1002,136214,15697],{"class":1030},[1002,136216,15201],{"class":15711},[1002,136218,136219],{"class":1030},">About the Demo Ember site\u003C\u002F",[1002,136221,15201],{"class":15711},[1002,136223,15703],{"class":1030},[1002,136225,136226,136228,136230],{"class":1004,"line":1961},[1002,136227,22437],{"class":1030},[1002,136229,22063],{"class":15711},[1002,136231,15703],{"class":1030},[925,136233,136234],{},"If we tested our application now, you will see only our application template is showing. And no welcome message will appear!\nWe need a way of telling our template where on the page to render.",[953,136236,136238],{"id":136237},"outlet","Outlet",[925,136240,136241,136242,136244,136245,136247],{},"Using the handlebars expression ",[1107,136243,136237],{}," we’re giving our code a hint as to where templates should be inserted.\nIf our Ember code reaches an ",[127951,136246],{"value":136237},", by default it will look to find a template named ‘index’ and render that in place of the outlet.",[993,136249,136251],{"className":37880,"code":136250,"language":383,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"application\">\n \u003Cdiv class='navbar'>...\u003C\u002Fdiv>\n \u003Cdiv class='container'>{{outlet}}\u003C\u002Fdiv>\n \u003Cfooter class='container'>...\u003C\u002Ffooter>\n\u003C\u002Fscript>\n\n\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"index\">\n \u003Ch1>Welcome to The Ember Demo!\u003C\u002Fh1>\n\u003C\u002Fscript>\n\n\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"about\">\n \u003Ch1>About The Ember Demo\u003C\u002Fh1>\n\u003C\u002Fscript>\n",[941,136252,136253,136274,136292,136311,136329,136337,136341,136361,136374,136382,136386,136406,136419],{"__ignoreMap":998},[1002,136254,136255,136257,136259,136261,136263,136265,136267,136269,136272],{"class":1004,"line":1005},[1002,136256,6539],{"class":1030},[1002,136258,22063],{"class":15711},[1002,136260,29274],{"class":1026},[1002,136262,2393],{"class":1030},[1002,136264,116983],{"class":1034},[1002,136266,116486],{"class":1026},[1002,136268,2393],{"class":1030},[1002,136270,136271],{"class":1034},"\"application\"",[1002,136273,15703],{"class":1030},[1002,136275,136276,136278,136280,136282,136284,136286,136288,136290],{"class":1004,"line":1012},[1002,136277,22427],{"class":1030},[1002,136279,19650],{"class":15711},[1002,136281,17187],{"class":1026},[1002,136283,2393],{"class":1030},[1002,136285,135367],{"class":1034},[1002,136287,80793],{"class":1030},[1002,136289,19650],{"class":15711},[1002,136291,15703],{"class":1030},[1002,136293,136294,136296,136298,136300,136302,136304,136307,136309],{"class":1004,"line":1047},[1002,136295,22427],{"class":1030},[1002,136297,19650],{"class":15711},[1002,136299,17187],{"class":1026},[1002,136301,2393],{"class":1030},[1002,136303,135386],{"class":1034},[1002,136305,136306],{"class":1030},">{{outlet}}\u003C\u002F",[1002,136308,19650],{"class":15711},[1002,136310,15703],{"class":1030},[1002,136312,136313,136315,136317,136319,136321,136323,136325,136327],{"class":1004,"line":1054},[1002,136314,22427],{"class":1030},[1002,136316,109031],{"class":15711},[1002,136318,17187],{"class":1026},[1002,136320,2393],{"class":1030},[1002,136322,135386],{"class":1034},[1002,136324,80793],{"class":1030},[1002,136326,109031],{"class":15711},[1002,136328,15703],{"class":1030},[1002,136330,136331,136333,136335],{"class":1004,"line":1060},[1002,136332,22437],{"class":1030},[1002,136334,22063],{"class":15711},[1002,136336,15703],{"class":1030},[1002,136338,136339],{"class":1004,"line":1272},[1002,136340,1051],{"emptyLinePlaceholder":1050},[1002,136342,136343,136345,136347,136349,136351,136353,136355,136357,136359],{"class":1004,"line":1348},[1002,136344,6539],{"class":1030},[1002,136346,22063],{"class":15711},[1002,136348,29274],{"class":1026},[1002,136350,2393],{"class":1030},[1002,136352,116983],{"class":1034},[1002,136354,116486],{"class":1026},[1002,136356,2393],{"class":1030},[1002,136358,127254],{"class":1034},[1002,136360,15703],{"class":1030},[1002,136362,136363,136365,136367,136370,136372],{"class":1004,"line":1354},[1002,136364,22427],{"class":1030},[1002,136366,15201],{"class":15711},[1002,136368,136369],{"class":1030},">Welcome to The Ember Demo!\u003C\u002F",[1002,136371,15201],{"class":15711},[1002,136373,15703],{"class":1030},[1002,136375,136376,136378,136380],{"class":1004,"line":1360},[1002,136377,22437],{"class":1030},[1002,136379,22063],{"class":15711},[1002,136381,15703],{"class":1030},[1002,136383,136384],{"class":1004,"line":1366},[1002,136385,1051],{"emptyLinePlaceholder":1050},[1002,136387,136388,136390,136392,136394,136396,136398,136400,136402,136404],{"class":1004,"line":1946},[1002,136389,6539],{"class":1030},[1002,136391,22063],{"class":15711},[1002,136393,29274],{"class":1026},[1002,136395,2393],{"class":1030},[1002,136397,116983],{"class":1034},[1002,136399,116486],{"class":1026},[1002,136401,2393],{"class":1030},[1002,136403,64381],{"class":1034},[1002,136405,15703],{"class":1030},[1002,136407,136408,136410,136412,136415,136417],{"class":1004,"line":1956},[1002,136409,22427],{"class":1030},[1002,136411,15201],{"class":15711},[1002,136413,136414],{"class":1030},">About The Ember Demo\u003C\u002F",[1002,136416,15201],{"class":15711},[1002,136418,15703],{"class":1030},[1002,136420,136421,136423,136425],{"class":1004,"line":1961},[1002,136422,22437],{"class":1030},[1002,136424,22063],{"class":15711},[1002,136426,15703],{"class":1030},[925,136428,136429,136430,24117],{},"How can we ever render the ‘about’ template? and map it to a URL, like ",[933,136431,136432],{"href":136432,"rel":136433},"http:\u002F\u002Fexample.com\u002Fabout",[937],[953,136435,136437],{"id":136436},"the-ember-router","The Ember Router",[925,136439,136440],{},"An Ember router translates a path into a route. It figures out the route name for each request.",[925,136442,136443,136444,136447],{},"Browser Request > ",[1107,136445,136446],{},"Ember Router"," > Handlebars Template",[925,136449,136450],{},[1107,136451,47429],{},[993,136453,136455],{"className":995,"code":136454,"language":997,"meta":998,"style":998},"var App = Ember.Application.create({\n LOG_TRANSITIONS: true,\n});\nApp.Router.map(function () {});\n",[941,136456,136457,136471,136479,136483],{"__ignoreMap":998},[1002,136458,136459,136461,136463,136465,136467,136469],{"class":1004,"line":1005},[1002,136460,18311],{"class":1015},[1002,136462,28641],{"class":1030},[1002,136464,2393],{"class":1015},[1002,136466,135118],{"class":1030},[1002,136468,48241],{"class":1026},[1002,136470,2756],{"class":1030},[1002,136472,136473,136475,136477],{"class":1004,"line":1012},[1002,136474,135156],{"class":1030},[1002,136476,17397],{"class":1019},[1002,136478,1143],{"class":1030},[1002,136480,136481],{"class":1004,"line":1047},[1002,136482,2804],{"class":1030},[1002,136484,136485,136487,136489,136491,136493],{"class":1004,"line":1054},[1002,136486,116558],{"class":1030},[1002,136488,19444],{"class":1026},[1002,136490,1031],{"class":1030},[1002,136492,6965],{"class":1015},[1002,136494,84660],{"class":1030},[925,136496,136497],{},"Every page for our website will be defined by the router. Let's see how we can render the about Route.",[925,136499,136500],{},[1107,136501,47429],{},[993,136503,136504],{"className":995,"code":116551,"language":997,"meta":998,"style":998},[941,136505,136506,136518,136532],{"__ignoreMap":998},[1002,136507,136508,136510,136512,136514,136516],{"class":1004,"line":1005},[1002,136509,116558],{"class":1030},[1002,136511,19444],{"class":1026},[1002,136513,1031],{"class":1030},[1002,136515,6965],{"class":1015},[1002,136517,9772],{"class":1030},[1002,136519,136520,136522,136524,136526,136528,136530],{"class":1004,"line":1012},[1002,136521,39364],{"class":1019},[1002,136523,948],{"class":1030},[1002,136525,66565],{"class":1026},[1002,136527,1031],{"class":1030},[1002,136529,67536],{"class":1034},[1002,136531,1085],{"class":1030},[1002,136533,136534],{"class":1004,"line":1047},[1002,136535,2804],{"class":1030},[925,136537,136538],{},"This Route corresponds to below values:",[925,136540,136541,136544,136545,136549,136552,136553,136555],{},[1107,136542,136543],{},"URL"," ",[933,136546,136547],{"href":136547,"rel":136548},"http:\u002F\u002Fexample.com#\u002Fabout",[937],[1107,136550,136551],{},"Path"," \u002Fabout\n",[1107,136554,136054],{}," about",[925,136557,136558,136559,136562,136563,136565],{},"When the ",[127951,136560],{"value":136561},"oulet"," is found, ",[928,136564,136054],{}," template is loaded into it.",[925,136567,136568],{},[1107,136569,136570],{},"template.js",[993,136572,136574],{"className":995,"code":136573,"language":997,"meta":998,"style":998},"\u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"application\">\n …{{ outlet }}…\n\u003C\u002Fscript>;\n!(\n \u003Cscript type=\"text\u002Fx-handlebars\" data-template-name=\"about\">\n \u003Ch1>About The Ember Demo site\u003C\u002Fh1>\n \u003C\u002Fscript>\n);\n",[941,136575,136576,136596,136601,136609,136615,136635,136648,136656],{"__ignoreMap":998},[1002,136577,136578,136580,136582,136584,136586,136588,136590,136592,136594],{"class":1004,"line":1005},[1002,136579,6539],{"class":1030},[1002,136581,22063],{"class":15711},[1002,136583,29274],{"class":1026},[1002,136585,2393],{"class":1015},[1002,136587,116983],{"class":1034},[1002,136589,116486],{"class":1026},[1002,136591,2393],{"class":1015},[1002,136593,136271],{"class":1034},[1002,136595,15703],{"class":1030},[1002,136597,136598],{"class":1004,"line":1012},[1002,136599,136600],{"class":1030}," …{{ outlet }}…\n",[1002,136602,136603,136605,136607],{"class":1004,"line":1047},[1002,136604,22437],{"class":1030},[1002,136606,22063],{"class":15711},[1002,136608,21772],{"class":1030},[1002,136610,136611,136613],{"class":1004,"line":1054},[1002,136612,13559],{"class":1015},[1002,136614,10468],{"class":1030},[1002,136616,136617,136619,136621,136623,136625,136627,136629,136631,136633],{"class":1004,"line":1060},[1002,136618,22427],{"class":1030},[1002,136620,22063],{"class":15711},[1002,136622,29274],{"class":1026},[1002,136624,2393],{"class":1015},[1002,136626,116983],{"class":1034},[1002,136628,116486],{"class":1026},[1002,136630,2393],{"class":1015},[1002,136632,64381],{"class":1034},[1002,136634,15703],{"class":1030},[1002,136636,136637,136639,136641,136644,136646],{"class":1004,"line":1272},[1002,136638,15697],{"class":1030},[1002,136640,15201],{"class":15711},[1002,136642,136643],{"class":1030},">About The Ember Demo site\u003C\u002F",[1002,136645,15201],{"class":15711},[1002,136647,15703],{"class":1030},[1002,136649,136650,136652,136654],{"class":1004,"line":1348},[1002,136651,28112],{"class":1030},[1002,136653,22063],{"class":15711},[1002,136655,15703],{"class":1030},[1002,136657,136658],{"class":1004,"line":1354},[1002,136659,1085],{"class":1030},[1655,136661,136663],{"id":136662},"whats-with-the-hash-sign","What’s with the Hash Sign?",[925,136665,136666,136667,136670,136671,136675],{},"You may wonder why there is a hash sign in ",[933,136668,136547],{"href":136547,"rel":136669},[937]," URL. Ember is a single page application, so there are no absolute paths like ",[933,136672,136673],{"href":136673,"rel":136674},"http:\u002F\u002Fexample\u002Fabout",[937],". The hash sign will render the relevant template instead.\nWhen a browser sees the # it knows the file path information is over.",[925,136677,136678,136679,136683],{},"In Ember.js, our entire application is loaded through one file. In our case index.html which is loaded from ",[933,136680,136681],{"href":136681,"rel":136682},"http:\u002F\u002Fexample.com",[937]," No matter what page we load, Homepage, About Page, or Product List, we will have first called up index.html. And this loads up all our templates. So in Ember.js, all our templates are sent over to us when the application loads.",[953,136685,136687],{"id":136686},"using-custom-path","Using custom path",[925,136689,136690,136691,136694],{},"If we want to add a custom path to our ",[928,136692,136693],{},"About"," Route, we can do as follows:",[925,136696,136697],{},[1107,136698,47429],{},[993,136700,136702],{"className":995,"code":136701,"language":997,"meta":998,"style":998},"App.Router.map(function () {\n this.route('about', { path: '\u002Faboutus' });\n});\n",[941,136703,136704,136716,136735],{"__ignoreMap":998},[1002,136705,136706,136708,136710,136712,136714],{"class":1004,"line":1005},[1002,136707,116558],{"class":1030},[1002,136709,19444],{"class":1026},[1002,136711,1031],{"class":1030},[1002,136713,6965],{"class":1015},[1002,136715,9772],{"class":1030},[1002,136717,136718,136720,136722,136724,136726,136728,136730,136733],{"class":1004,"line":1012},[1002,136719,39364],{"class":1019},[1002,136721,948],{"class":1030},[1002,136723,66565],{"class":1026},[1002,136725,1031],{"class":1030},[1002,136727,67536],{"class":1034},[1002,136729,107280],{"class":1030},[1002,136731,136732],{"class":1034},"'\u002Faboutus'",[1002,136734,28417],{"class":1030},[1002,136736,136737],{"class":1004,"line":1047},[1002,136738,2804],{"class":1030},[925,136740,136741],{},"That's the introduction to Ember.js folks! I will discuss more advanced topics in my future posts. Stay tuned!",[1579,136743,136744],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":136746},[136747,136748,136749,136750,136754,136759,136760,136763],{"id":134886,"depth":1012,"text":134887},{"id":134899,"depth":1012,"text":134900},{"id":134909,"depth":1012,"text":134910},{"id":135095,"depth":1012,"text":135096,"children":136751},[136752,136753],{"id":135128,"depth":1047,"text":135129},{"id":135167,"depth":1047,"text":135168},{"id":135323,"depth":1012,"text":135324,"children":136755},[136756,136757,136758],{"id":135805,"depth":1047,"text":135806},{"id":135907,"depth":1047,"text":135908},{"id":136047,"depth":1047,"text":136048},{"id":136237,"depth":1012,"text":136238},{"id":136436,"depth":1012,"text":136437,"children":136761},[136762],{"id":136662,"depth":1047,"text":136663},{"id":136686,"depth":1012,"text":136687},"2014-05-21","\u002Fimages\u002Fblog\u002Ffeatures\u002Fintroduction-to-ember-js.jpg",{},{"title":455,"description":457},"blog\u002Fintroduction-to-ember-js",[16,17,173],"NsrxB3gtuG_Mj5bFE8WgEH79Lz2NTCut63UcZkrXnDQ",{"id":136772,"title":776,"author":920,"body":136773,"date":136871,"description":778,"extension":1591,"image":136872,"meta":136873,"navigation":1050,"path":777,"seo":136874,"stem":136875,"tags":136876,"__hash__":136877},"blog\u002Fblog\u002Fsemantic-hmtl.md",{"type":922,"value":136774,"toc":136864},[136775,136778,136803,136806,136824,136827,136831,136834,136838,136841,136845,136848,136852,136855,136859,136862],[925,136776,136777],{},"Semantic code encourages web developer\u002Fdesigners to write code that describes the content rather than how that content should look. For example, if you code the title of a page like the following:",[993,136779,136781],{"className":37880,"code":136780,"language":383,"meta":998,"style":998},"\u003Cdiv id=\"page-title\">This is the page title\u003C\u002Fdiv>\n",[941,136782,136783],{"__ignoreMap":998},[1002,136784,136785,136787,136789,136791,136793,136796,136799,136801],{"class":1004,"line":1005},[1002,136786,6539],{"class":1030},[1002,136788,19650],{"class":15711},[1002,136790,21489],{"class":1026},[1002,136792,2393],{"class":1030},[1002,136794,136795],{"class":1034},"\"page-title\"",[1002,136797,136798],{"class":1030},">This is the page title\u003C\u002F",[1002,136800,19650],{"class":15711},[1002,136802,15703],{"class":1030},[925,136804,136805],{},"This would make the title stand out, and you could use the id to give it a more striking appearance, giving it the appearance of a page title, but this means a browser is unable to identify this as being the page title and the search engines will not be able to either .\nIdeally, to write the same title semantically so that a browser will understand that this is a title, you would replace the above with the following:",[993,136807,136809],{"className":37880,"code":136808,"language":383,"meta":998,"style":998},"\u003Ch1>This is a heading\u003C\u002Fh1>\n",[941,136810,136811],{"__ignoreMap":998},[1002,136812,136813,136815,136817,136820,136822],{"class":1004,"line":1005},[1002,136814,6539],{"class":1030},[1002,136816,15201],{"class":15711},[1002,136818,136819],{"class":1030},">This is a heading\u003C\u002F",[1002,136821,15201],{"class":15711},[1002,136823,15703],{"class":1030},[925,136825,136826],{},"The job of dealing with the appearance of your heading is the responsibility of the CSS.\nI have already hinted at one reason why semantic code is important when I said that without explaining what a piece of content is, a browser has no way of identifying it. The ability for a browser to be able to understand your content is important for a number of reasons, which I will explain in the topics below.",[953,136828,136830],{"id":136829},"accessibility","Accessibility",[925,136832,136833],{},"Many visually impaired people rely on speech browsers to read pages back to them. These programs cannot interpret pages very well unless they are clearly explained.",[953,136835,136837],{"id":136836},"search-engines","Search Engines",[925,136839,136840],{},"Search engines need to understand what your content is about in order to rank you properly on search engines. Semantic code tends to improve your placement on search engines, as it is easier for the \"search engine spiders\" to understand.",[953,136842,136844],{"id":136843},"faster-to-download","Faster to download",[925,136846,136847],{},"As you can see from the example above, semantic code is shorter and so downloads faster.",[953,136849,136851],{"id":136850},"easy-to-change-the-look-feel","Easy to change the look & feel",[925,136853,136854],{},"Semantic code makes applying themes for sites easier because you can apply design style to headings across an entire site instead of on a per page basis. Because semantic code does not contain design elements it is possible to change the look and feel of your site without recoding all of the HTML. Once again, because design is held separately from your content, semantic code allows anybody to add or edit pages without having to have a good eye for design. You simply describe the content and the cascading style sheet defines what that content looks like.",[953,136856,136858],{"id":136857},"easy-to-read","Easy to read",[925,136860,136861],{},"Semantic code is easier for people to understand too so if a new web designer picks up the code they can learn it much faster.",[1579,136863,119705],{},{"title":998,"searchDepth":1012,"depth":1012,"links":136865},[136866,136867,136868,136869,136870],{"id":136829,"depth":1012,"text":136830},{"id":136836,"depth":1012,"text":136837},{"id":136843,"depth":1012,"text":136844},{"id":136850,"depth":1012,"text":136851},{"id":136857,"depth":1012,"text":136858},"2014-05-11","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsemantic-hmtl.jpg",{},{"title":776,"description":778},"blog\u002Fsemantic-hmtl",[16,383],"-R_04R_fGVAcUACsoMeKFhOKPL0lEzw9jOpVA6s9GZw",{"id":136879,"title":288,"author":920,"body":136880,"date":137317,"description":290,"extension":1591,"image":137318,"meta":137319,"navigation":1050,"path":289,"seo":137320,"stem":137321,"tags":137322,"__hash__":137323},"blog\u002Fblog\u002Ffoundation-5-new-features.md",{"type":922,"value":136881,"toc":137299},[136882,136885,136889,136892,136895,136898,137037,137040,137044,137047,137051,137054,137058,137061,137065,137068,137072,137075,137080,137084,137090,137093,137096,137100,137103,137107,137114,137118,137121,137250,137253,137257,137260,137263,137267,137270,137274,137277,137281,137284,137288,137291,137296],[925,136883,136884],{},"Foundation is built on Sass: fast tracking the development effort with constant deployment, semantic code, faster styling and few other programmatic features. Let's look at Foundation 5 new features.",[953,136886,136888],{"id":136887},"loads-content-faster","Loads Content Faster",[925,136890,136891],{},"Interchange in Foundation, helps developers to create optimized sites by letting the developers to selectively load sections based on the client device type. Interchange uses media queries to dynamically load responsive content that is appropriate for different user's browsers.",[925,136893,136894],{},"Interchange can now pull in HTML partials so you can load different sections of your page for particular media queries. This is great for loading up a mobile-friendly component on small devices, and a more robust or heavier load component on desktops.",[925,136896,136897],{},"Using Interchange with images alone is the same process as arbitrary HTML content, and a common use case for Interchange. This way you'll only load larger resources for devices that can handle it.",[993,136899,136901],{"className":37880,"code":136900,"language":383,"meta":998,"style":998},"\u003C!-- larger screens -->\n\u003Cimg\n alt=\"deafult\"\n data-interchange=\"[\u002Fpath\u002Fto\u002Fdefault.jpg, (default)], [\u002Fpath\u002Fto\u002Fbigger-image.jpg, (large)]\"\n\u002F>\n\n\u003C!-- data-interchange=\"[image_path, (media query)], [image_path, (media query)]\"-->\n\u003Cimg\n alt=\"deafult\"\n data-interchange=\"[\u002Fpath\u002Fto\u002Fdefault.jpg, (only screen and (min-width: 1px))], [\u002Fpath\u002Fto\u002Fbigger-image.jpg, (only screen and (min-width: 1280px))]\"\n\u002F>\n\n\u003C!-- support browsers with JavaScript disabled -->\n\u003Cimg\n data-interchange=\"[\u002Fpath\u002Fto\u002Fdefault.jpg, (default)], [\u002Fpath\u002Fto\u002Fbigger-image.jpg, (large)]\"\n\u002F>\n\u003Cnoscript>\u003Cimg src=\"\u002Fpath\u002Fto\u002Fdefault.jpg\" \u002F>\u003C\u002Fnoscript>\n\u003C!-- Retina images -->\n\u003C!-- data-interchange=\"[image\u002Fpath\u002Fto\u002Fretina.jpg, (retina)]\" -->\n",[941,136902,136903,136908,136915,136925,136935,136939,136943,136948,136954,136962,136971,136975,136979,136984,136990,136998,137002,137027,137032],{"__ignoreMap":998},[1002,136904,136905],{"class":1004,"line":1005},[1002,136906,136907],{"class":1008},"\u003C!-- larger screens -->\n",[1002,136909,136910,136912],{"class":1004,"line":1012},[1002,136911,6539],{"class":1030},[1002,136913,136914],{"class":15711},"img\n",[1002,136916,136917,136920,136922],{"class":1004,"line":1047},[1002,136918,136919],{"class":1026}," alt",[1002,136921,2393],{"class":1030},[1002,136923,136924],{"class":1034},"\"deafult\"\n",[1002,136926,136927,136930,136932],{"class":1004,"line":1054},[1002,136928,136929],{"class":1026}," data-interchange",[1002,136931,2393],{"class":1030},[1002,136933,136934],{"class":1034},"\"[\u002Fpath\u002Fto\u002Fdefault.jpg, (default)], [\u002Fpath\u002Fto\u002Fbigger-image.jpg, (large)]\"\n",[1002,136936,136937],{"class":1004,"line":1060},[1002,136938,19039],{"class":1030},[1002,136940,136941],{"class":1004,"line":1272},[1002,136942,1051],{"emptyLinePlaceholder":1050},[1002,136944,136945],{"class":1004,"line":1348},[1002,136946,136947],{"class":1008},"\u003C!-- data-interchange=\"[image_path, (media query)], [image_path, (media query)]\"-->\n",[1002,136949,136950,136952],{"class":1004,"line":1354},[1002,136951,6539],{"class":1030},[1002,136953,136914],{"class":15711},[1002,136955,136956,136958,136960],{"class":1004,"line":1360},[1002,136957,136919],{"class":1026},[1002,136959,2393],{"class":1030},[1002,136961,136924],{"class":1034},[1002,136963,136964,136966,136968],{"class":1004,"line":1366},[1002,136965,136929],{"class":1026},[1002,136967,2393],{"class":1030},[1002,136969,136970],{"class":1034},"\"[\u002Fpath\u002Fto\u002Fdefault.jpg, (only screen and (min-width: 1px))], [\u002Fpath\u002Fto\u002Fbigger-image.jpg, (only screen and (min-width: 1280px))]\"\n",[1002,136972,136973],{"class":1004,"line":1946},[1002,136974,19039],{"class":1030},[1002,136976,136977],{"class":1004,"line":1956},[1002,136978,1051],{"emptyLinePlaceholder":1050},[1002,136980,136981],{"class":1004,"line":1961},[1002,136982,136983],{"class":1008},"\u003C!-- support browsers with JavaScript disabled -->\n",[1002,136985,136986,136988],{"class":1004,"line":1971},[1002,136987,6539],{"class":1030},[1002,136989,136914],{"class":15711},[1002,136991,136992,136994,136996],{"class":1004,"line":1980},[1002,136993,136929],{"class":1026},[1002,136995,2393],{"class":1030},[1002,136997,136934],{"class":1034},[1002,136999,137000],{"class":1004,"line":1985},[1002,137001,19039],{"class":1030},[1002,137003,137004,137006,137009,137011,137013,137015,137017,137020,137023,137025],{"class":1004,"line":1995},[1002,137005,6539],{"class":1030},[1002,137007,137008],{"class":15711},"noscript",[1002,137010,124048],{"class":1030},[1002,137012,963],{"class":15711},[1002,137014,15242],{"class":1026},[1002,137016,2393],{"class":1030},[1002,137018,137019],{"class":1034},"\"\u002Fpath\u002Fto\u002Fdefault.jpg\"",[1002,137021,137022],{"class":1030}," \u002F>\u003C\u002F",[1002,137024,137008],{"class":15711},[1002,137026,15703],{"class":1030},[1002,137028,137029],{"class":1004,"line":2006},[1002,137030,137031],{"class":1008},"\u003C!-- Retina images -->\n",[1002,137033,137034],{"class":1004,"line":2011},[1002,137035,137036],{"class":1008},"\u003C!-- data-interchange=\"[image\u002Fpath\u002Fto\u002Fretina.jpg, (retina)]\" -->\n",[925,137038,137039],{},"Foundation provides following features to further enhance the speed:",[953,137041,137043],{"id":137042},"fast-click","Fast Click",[925,137045,137046],{},"Integration of fastclick.js for mobile users.",[953,137048,137050],{"id":137049},"gpu-acceleration","GPU Acceleration",[925,137052,137053],{},"Animation will perform significantly better and sleeker.",[953,137055,137057],{"id":137056},"off-canvas","Off Canvas",[925,137059,137060],{},"Off Canvas provides a powerful way to build navigation into screens.",[953,137062,137064],{"id":137063},"improved-forms","Improved Forms",[925,137066,137067],{},"Makes it easy to code up forms, in-line labels and other components.",[953,137069,137071],{"id":137070},"faster-to-code","Faster to Code",[925,137073,137074],{},"Foundation now includes a medium grid that you can leverage, nestled neatly between the small and large grids you’re used to. That’s a lot less custom code for you to write to make use of intermediate sizes.",[925,137076,137077],{},[963,137078],{"alt":137071,"src":137079},"http:\u002F\u002Ffoundation.zurb.com\u002Fassets\u002Fimg\u002Flearn\u002Ffeatures\u002Fmedium-grid.svg",[953,137081,137083],{"id":137082},"cli","CLI",[925,137085,137086,137087,948],{},"Foundation has written their own CLI wrappers so you can quickly spin up new projects. Just use ",[1107,137088,137089],{},"foundation new project-name",[953,137091,112696],{"id":137092},"sublime-text",[925,137094,137095],{},"Sublime Text editor now has Foundation shortcuts.",[953,137097,137099],{"id":137098},"templates","Templates",[925,137101,137102],{},"Foundation has created new templates to jump start a Foundation 5 project.",[953,137104,137106],{"id":137105},"libsassy","Libsassy",[925,137108,137109,137110,137113],{},"Foundation 5 works with ",[1107,137111,137112],{},"Libsass",", a new Sass processor. And it’s fast, sometimes 32x as fast.",[953,137115,137117],{"id":137116},"medium-grid","Medium Grid",[925,137119,137120],{},"Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.",[993,137122,137124],{"className":37880,"code":137123,"language":383,"meta":998,"style":998},"\u003Cdiv class=\"row\">\n \u003Cdiv class=\"medium-2 columns\">2 columns\u003C\u002Fdiv>\n \u003Cdiv class=\"medium-10 columns\">10 columns\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"row\">\n \u003Cdiv class=\"medium-3 columns\">3 columns\u003C\u002Fdiv>\n \u003Cdiv class=\"medium-9 columns\">9 columns\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[941,137125,137126,137140,137160,137180,137188,137202,137222,137242],{"__ignoreMap":998},[1002,137127,137128,137130,137132,137134,137136,137138],{"class":1004,"line":1005},[1002,137129,6539],{"class":1030},[1002,137131,19650],{"class":15711},[1002,137133,17187],{"class":1026},[1002,137135,2393],{"class":1030},[1002,137137,79019],{"class":1034},[1002,137139,15703],{"class":1030},[1002,137141,137142,137144,137146,137148,137150,137153,137156,137158],{"class":1004,"line":1012},[1002,137143,22427],{"class":1030},[1002,137145,19650],{"class":15711},[1002,137147,17187],{"class":1026},[1002,137149,2393],{"class":1030},[1002,137151,137152],{"class":1034},"\"medium-2 columns\"",[1002,137154,137155],{"class":1030},">2 columns\u003C\u002F",[1002,137157,19650],{"class":15711},[1002,137159,15703],{"class":1030},[1002,137161,137162,137164,137166,137168,137170,137173,137176,137178],{"class":1004,"line":1047},[1002,137163,22427],{"class":1030},[1002,137165,19650],{"class":15711},[1002,137167,17187],{"class":1026},[1002,137169,2393],{"class":1030},[1002,137171,137172],{"class":1034},"\"medium-10 columns\"",[1002,137174,137175],{"class":1030},">10 columns\u003C\u002F",[1002,137177,19650],{"class":15711},[1002,137179,15703],{"class":1030},[1002,137181,137182,137184,137186],{"class":1004,"line":1054},[1002,137183,22437],{"class":1030},[1002,137185,19650],{"class":15711},[1002,137187,15703],{"class":1030},[1002,137189,137190,137192,137194,137196,137198,137200],{"class":1004,"line":1060},[1002,137191,6539],{"class":1030},[1002,137193,19650],{"class":15711},[1002,137195,17187],{"class":1026},[1002,137197,2393],{"class":1030},[1002,137199,79019],{"class":1034},[1002,137201,15703],{"class":1030},[1002,137203,137204,137206,137208,137210,137212,137215,137218,137220],{"class":1004,"line":1272},[1002,137205,22427],{"class":1030},[1002,137207,19650],{"class":15711},[1002,137209,17187],{"class":1026},[1002,137211,2393],{"class":1030},[1002,137213,137214],{"class":1034},"\"medium-3 columns\"",[1002,137216,137217],{"class":1030},">3 columns\u003C\u002F",[1002,137219,19650],{"class":15711},[1002,137221,15703],{"class":1030},[1002,137223,137224,137226,137228,137230,137232,137235,137238,137240],{"class":1004,"line":1348},[1002,137225,22427],{"class":1030},[1002,137227,19650],{"class":15711},[1002,137229,17187],{"class":1026},[1002,137231,2393],{"class":1030},[1002,137233,137234],{"class":1034},"\"medium-9 columns\"",[1002,137236,137237],{"class":1030},">9 columns\u003C\u002F",[1002,137239,19650],{"class":15711},[1002,137241,15703],{"class":1030},[1002,137243,137244,137246,137248],{"class":1004,"line":1354},[1002,137245,22437],{"class":1030},[1002,137247,19650],{"class":15711},[1002,137249,15703],{"class":1030},[925,137251,137252],{},"By popular request, Foundation now includes a medium grid that you can leverage, nestled neatly between the small and large grids you’re used to. That’s a lot less custom code for you to write to make use of intermediate sizes.",[953,137254,137256],{"id":137255},"faster-to-learn","Faster to Learn",[925,137258,137259],{},"Foundation is easy to learn and their Getting Started with Foundation guide is the place you should be.",[925,137261,137262],{},"There are few other places you can expand your knowledge of Foundation, and also reuse some of the code.",[953,137264,137266],{"id":137265},"building-blocks","Building Blocks",[925,137268,137269],{},"Building Blocks are bits of code that you can drop into any Foundation project.",[953,137271,137273],{"id":137272},"forum","Forum",[925,137275,137276],{},"A custom forum specifically for Foundation users to get the answers they need.",[953,137278,137280],{"id":137279},"videos","Videos",[925,137282,137283],{},"A premium channel for you to get individual support using Foundation.",[953,137285,137287],{"id":137286},"training","Training",[925,137289,137290],{},"ZURB now offers Web-based and on-site training classes for Foundation, taught by the framework developers themselves.",[925,137292,137293],{},[963,137294],{"alt":137287,"src":137295},"http:\u002F\u002Ffoundation.zurb.com\u002Fassets\u002Fimg\u002Flearn\u002Ffeatures\u002Fgetting-started.svg",[1579,137297,137298],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":998,"searchDepth":1012,"depth":1012,"links":137300},[137301,137302,137303,137304,137305,137306,137307,137308,137309,137310,137311,137312,137313,137314,137315,137316],{"id":136887,"depth":1012,"text":136888},{"id":137042,"depth":1012,"text":137043},{"id":137049,"depth":1012,"text":137050},{"id":137056,"depth":1012,"text":137057},{"id":137063,"depth":1012,"text":137064},{"id":137070,"depth":1012,"text":137071},{"id":137082,"depth":1012,"text":137083},{"id":137092,"depth":1012,"text":112696},{"id":137098,"depth":1012,"text":137099},{"id":137105,"depth":1012,"text":137106},{"id":137116,"depth":1012,"text":137117},{"id":137255,"depth":1012,"text":137256},{"id":137265,"depth":1012,"text":137266},{"id":137272,"depth":1012,"text":137273},{"id":137279,"depth":1012,"text":137280},{"id":137286,"depth":1012,"text":137287},"2014-05-04","\u002Fimages\u002Fblog\u002Ffeatures\u002Ffoundation-5-new-features.jpg",{},{"title":288,"description":290},"blog\u002Ffoundation-5-new-features",[16,29,292],"r_yo3RWo3giqXCXaB1VC38QLFrx9m9Kjy7lhg22iGC4",{"id":137325,"title":798,"author":920,"body":137326,"date":137412,"description":800,"extension":1591,"image":137413,"meta":137414,"navigation":1050,"path":799,"seo":137415,"stem":137416,"tags":137417,"__hash__":137418},"blog\u002Fblog\u002Fsetting-up-umbraco-in-visual-studio.md",{"type":922,"value":137327,"toc":137407},[137328,137332,137343,137350,137353,137365,137371,137386,137401],[953,137329,137331],{"id":137330},"setting-up-visual-studio-2013-project","Setting up Visual Studio 2013 project",[925,137333,137334,137335,137338,137339,137342],{},"Open Visual Studio 2013 and start up a new ",[1107,137336,137337],{},"ASP.NET Web Application"," project give it a name and save it to your preferred location and click ",[1107,137340,137341],{},"OK"," as shown in Figure 1 below. This is the new project type introduced in Visual Studio 2013, which is a starting point for all web applications.",[925,137344,137345,137346,137349],{},"Create new ASP.NET Web Application Project Select the ",[1107,137347,137348],{},"Empty"," template from the **New ASP.NET Project dialog and click OK to create the project as shown in figure 2 below. This will give us a clean slate to start with our Umbraco 7 project, Umbraco 7 project is now auto-configured to work with MVC so we can start with a clean slate and let the Umbraco NuGet package configure everything for us.",[925,137351,137352],{},"Select Empty template",[953,137354,137356,137357,137360,137361,137364],{"id":137355},"installing-the-nuget-package-start-the-package-manager-console-if-its-not-running-already-and-fire-the-command-pm-install-package-umbracocms-as-shown-in-figure-3-below-the-umbraco-team-has-published-the-umbraco-cms-in-nuget-so-it-becomes-the-easiest-way-to-get-the-latest-codebase-and-get-started-with-umbraco-the-above-command-will-take-a-while-to-execute-while-every-dependent-package-is-found-and-installed-for-your-project-so-wait-patiently-while-the-process-completes-figure-3-run-command-on-package-manager-to-download-and-install-umbraco-7-in-our-project-once-all-the-files-required-are-downloaded-and-installed-the-package-manager-will-ask-you-a-question-to-request-permission-to-override-the-webconfig-file-as-shown-below-in-figure-4-umbraco-7-setup-has-a-lot-of-configurations-defined-in-its-webconfig-file-so-its-necessary-that-we-allow-it-to-use-its-webconfig-file-so-type-y-at-the-command-prompt-and-press-enter-to-allow-the-process-to-continue-this-process-will-continue-until-all-the-required-files-are-downloaded-and-configured-once-the-installation-process-completes-you-will-be-shown-a-readme-file-with-information-on-getting-started","Installing the Nuget Package Start the Package Manager Console if it's not running already and fire the command ",[1107,137358,137359],{},"PM"," > ",[1107,137362,137363],{},"Install-Package UmbracoCms"," as shown in figure 3 below. The Umbraco team has published the Umbraco CMS in Nuget so it becomes the easiest way to get the latest codebase and get started with Umbraco. The above command will take a while to execute while every dependent package is found and installed for your project so wait patiently while the process completes. Figure 3: Run command on Package Manager to download and install Umbraco 7 in our project. Once all the files required are downloaded and installed, the Package Manager will ask you a question to request permission to override the web.config file as shown below in figure 4. Umbraco 7 setup has a lot of configurations defined in its web.config file so its necessary that we allow it to use its web.config file so type **Y` at the command prompt and press enter to allow the process to continue. This process will continue until all the required files are downloaded and configured. Once the installation process completes you will be shown a readme file with information on getting started.",[925,137366,137367],{},[963,137368],{"alt":137369,"src":137370},"Installing the Nuget Package Start","http:\u002F\u002Fimg.readitlater.com\u002Fi\u002Fwww.systenics.com\u002Fmedia\u002F15755\u002FWindows-Live-Writer_53e6beb1251c_C2A0_img4\u002FRS\u002Fw640.png",[925,137372,137373,137374,137377,137378,137381,137382,137385],{},"Figure 4: Allow Nuget to override the web.config file With these easy steps, we are ready to get started with the Umbraco instance installation. The manual steps that were required in Umbraco 6 to set the project in MVC mode are no longer required and everything is automatically configured for you in Umbraco 7. You can build the project and start with the Umbraco 7 configuration process. Note: In our testing, we found that if we install a start kit during configuration, the installation fails with a **definition not found for class HttpResponseMessage exception. On further investigation, we found that the start kit creates a **UmbContactController.cs",[941,137375,137376],{}," class file under **App_Code** folder to handle the Contact Form. This class references the **HttpResponseMessage** class, which fails because even through the**System.Net.Http"," assembly containing this class is referenced in Visual Studio, code within **App_Code` is compiled during execution by the asp.net runtime which looks into the web.config file to file the reference to System.Net.Http assembly. If it does not find it there it fails and throws an exception, failing the start kit installation. So if you wish to install a start kit during configuration then open the projects web.config file in Visual Studio and add the following ",[1107,137379,137380],{},"assemblies"," section under the ",[1107,137383,137384],{},"compilation"," section at line number 90 as shown in listing 1 below.",[925,137387,137388,137389],{},"``csharp\n",[137384,137390,137393,137395,137400],{"defaultlanguage":137391,"debug":19341,"batch":19341,"targetframework":137392},"c#","4.5",[96859,137394],{},[137380,137396,137397],{},[7985,137398],{"assembly":137399},"System.Net.Http, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a","\n.....\n",[993,137402,137405],{"className":137403,"code":137404,"language":24241},[24239],"\nListing 1: Add assemblies section to web.config file You can build the project and hit **F5** to run it. Your browser should load up the Umbraco Installation screen as shown in figure 5 below.\nFollow the on-screen instructions get your application configured.\n\n![Umbraco 7 Installation](http:\u002F\u002Fimg.readitlater.com\u002Fi\u002Fwww.systenics.com\u002Fmedia\u002F15765\u002FWindows-Live-Writer_53e6beb1251c_C2A0_img5\u002FRS\u002Fw640.png)\n\nFigure 5: Umbraco 7 Installation\n\n## Installation and Configuration of Umbraco 7\n\nThe steps shown below are completely optional but still, it's good to know for those who are getting started with Umbraco development.\nIn your browser click on the **Let’s get started!** button as shown in figure 5 above.\nOn the next license, screen click on **Accept and Continue** to move forward. Now you are shown the **Database configuration** screen.\nYou can select the database of your choice, I like to use SQL CE 4 during testing and development since it is lightweight and easier to move around since all you need to do is copy the folder and all settings get transferred over.\n\nFigure 6 shows the SQL CE 4 selected as the database. Click **Install** to install them appropriately selected database and move to the next step.\n\n![SQL CE 4](http:\u002F\u002Fimg.readitlater.com\u002Fi\u002Fwww.systenics.com\u002Fmedia\u002F15775\u002FWindows-Live-Writer_53e6beb1251c_C2A0_img6\u002FRS\u002Fw640.png)\n\nFigure 6: Select SQL CE 4 database After database installation is done you will see a confirmation message as shown in figure 7 below, click Continue to move ahead.\n\n![Figure 7](http:\u002F\u002Fimg.readitlater.com\u002Fi\u002Fwww.systenics.com\u002Fmedia\u002F15785\u002FWindows-Live-Writer_53e6beb1251c_C2A0_img7\u002FRS\u002Fw640.png)\n\nFigure 7: Continue after database installation On the Create User screen provides the details to create the admin user.\nThis user will have access to the Admin control panel of Umbraco and all details of the user can be changed at a later stage from within Umbraco.\nI create the user using temporary credentials as shown below in figure 8, please make sure that you use your strong credentials.\n\nClick **Create User** to create the user and move ahead.\n\nName: **Admin**\nEmail: **admin@systenics.com **\nUsername: **root**\nPassword: **@123test**\n\n![Figure 8](http:\u002F\u002Fimg.readitlater.com\u002Fi\u002Fwww.systenics.com\u002Fmedia\u002F15795\u002FWindows-Live-Writer_53e6beb1251c_C2A0_img8\u002FRS\u002Fw640.png)\n\nFigure 8: Create User Once the user is created you are given the option to select a start kit. Umbraco 7 has updated the starter kits to provide two basic ones, advanced features like blog, news is not present in the kits today.\nIf you want to create your site from scratch then its best to not use any of these starter kits.\nSelect **No Thanks I do not wish to install a start kit` image as shown in figure 9 below to setup Umbraco without using an existing starter kit.\nA confirmation prompt will open up asking you to confirm your selection, click **OK** to proceed.\n\n![Figure 9](http:\u002F\u002Fimg.readitlater.com\u002Fi\u002Fwww.systenics.com\u002Fmedia\u002F15805\u002FWindows-Live-Writer_53e6beb1251c_C2A0_img9\u002FRS\u002Fw640.png)\n\nFigure 9: Select Starter Kits The above steps will finish the installation and configuration of Umbraco 7 and you will be presented with a confirmation screen as seen in figure 10 below.\nThis completes the configuration of a blank Umbraco 7 installation. But remember since we did not choose to use a Start Kit our site will be blank and it needs content defined before you can publish or deploy the site.\n\nIt's out of the scope for this blog post to define how to configure your site, please consult the [Umbraco Documentation](http:\u002F\u002Four.umbraco.org\u002Fdocumentation) for further advice.\n\n![Figure 10](http:\u002F\u002Fimg.readitlater.com\u002Fi\u002Fwww.systenics.com\u002Fmedia\u002F15815\u002FWindows-Live-Writer_53e6beb1251c_C2A0_img10\u002FRS\u002Fw640.png)\n\nFigure 10: Umbraco 7 Installation Complete In this short blog, I have tried to cover the essential steps required to configure Umbraco 7 with Visual Studio 2013. I plan to build on this configuration in my future blog posts.\n",[941,137406,137404],{"__ignoreMap":998},{"title":998,"searchDepth":1012,"depth":1012,"links":137408},[137409,137410],{"id":137330,"depth":1012,"text":137331},{"id":137355,"depth":1012,"text":137411},"Installing the Nuget Package Start the Package Manager Console if it's not running already and fire the command PM > Install-Package UmbracoCms as shown in figure 3 below. The Umbraco team has published the Umbraco CMS in Nuget so it becomes the easiest way to get the latest codebase and get started with Umbraco. The above command will take a while to execute while every dependent package is found and installed for your project so wait patiently while the process completes. Figure 3: Run command on Package Manager to download and install Umbraco 7 in our project. Once all the files required are downloaded and installed, the Package Manager will ask you a question to request permission to override the web.config file as shown below in figure 4. Umbraco 7 setup has a lot of configurations defined in its web.config file so its necessary that we allow it to use its web.config file so type **Y` at the command prompt and press enter to allow the process to continue. This process will continue until all the required files are downloaded and configured. Once the installation process completes you will be shown a readme file with information on getting started.","2014-04-28","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsetting-up-umbraco-in-visual-studio.jpg",{},{"title":798,"description":800},"blog\u002Fsetting-up-umbraco-in-visual-studio",[16,619,785],"YPSaLiGpnkp4L_LWykZKRmeQDlryiDFGpNNmkdTDWPE",{"id":137420,"title":157,"author":920,"body":137421,"date":137980,"description":159,"extension":1591,"image":137981,"meta":137982,"navigation":1050,"path":158,"seo":137983,"stem":137984,"tags":137985,"__hash__":137986},"blog\u002Fblog\u002Fdevelop-mobile-apps-phonegap.md",{"type":922,"value":137422,"toc":137963},[137423,137426,137445,137448,137454,137458,137465,137468,137471,137476,137479,137483,137490,137510,137519,137539,137554,137563,137567,137570,137573,137580,137632,137635,137644,137647,137654,137657,137661,137669,137676,137680,137689,137698,137702,137705,137716,137719,137725,137734,137737,137740,137767,137777,137781,137784,137788,137797,137804,137809,137818,137821,137825,137840,137853,137865,137868,137872,137875,137879,137888,137892,137901,137905,137922,137926,137940,137944,137951,137961],[925,137424,137425],{},"PhoneGap supports a wide variety of platforms:",[1530,137427,137428,137430,137433,137436,137439,137442],{},[974,137429,36166],{},[974,137431,137432],{},"Android",[974,137434,137435],{},"Windows 8",[974,137437,137438],{},"Windows Phone 7 and 8",[974,137440,137441],{},"WebOS",[974,137443,137444],{},"Tizen",[925,137446,137447],{},"Building PhoneGap apps require you to know about HMTL, CSS and JavaScript.",[925,137449,137450],{},[963,137451],{"alt":137452,"src":137453},"Building PhoneGap","http:\u002F\u002F1.bp.blogspot.com\u002F-DEJOj4wKMOE\u002FUNhxSB-QlQI\u002FAAAAAAAAAEg\u002F4J01k0tvaI0\u002Fs1600\u002Fhtmlcssjava.png",[953,137455,137457],{"id":137456},"how-does-phonegap-works","How does PhoneGap works?",[925,137459,137460,137461,137464],{},"PhoneGap takes your web application and renders it within a web view. ",[1107,137462,137463],{},"Web view"," is a native application component, which makes web content to display within a native application.",[925,137466,137467],{},"PhoneGap provides a set of JavaScript functions that enables the app to interact with the phone's native API's, such as camera, and accelerometer. This is then compiled into a native application for each platform. So PhoneGap bridges the gap between the Phone and the web application.",[925,137469,137470],{},"Applications built with PhoneGap use the mobile platform’s Web view to render content. As such, the content will appear nearly identical on each platform, much as any Web page would. While you can style the controls differently on each platform, take care in doing this.",[925,137472,137473],{},[1107,137474,137475],{},"What is PhoneGap Build?",[925,137477,137478],{},"Application container that allows you to build natively installed apps using HTML, CSS & JavaScript. There's no need to install any SDK's in your machine. PhoneGap servers will build the apps for you by compiling and packaging the apps. There are free and paid memberships available for developers. The latest version of PhoneGap might not be available and the services can go down periodically.",[953,137480,137482],{"id":137481},"plugins-closing-the-gap-on-native-features","Plugins: Closing The Gap On Native Features",[925,137484,137485,137486,137489],{},"PhoneGap essentially wraps a Web view of your HTML, CSS and JavaScript in a native application. This is required because the Web view in an application does not inherently support many device features, such as access to the file system or the camera. PhoneGap has a ",[941,137487,137488],{},"bridging mechanism"," that allows JavaScript running in the Web view to invoke native code contained in the application. PhoneGap comes complete with plugins to support device capabilities such as the following:",[1530,137491,137492,137495,137498,137501,137504,137507],{},[974,137493,137494],{},"accelerometer,",[974,137496,137497],{},"camera,",[974,137499,137500],{},"contacts,",[974,137502,137503],{},"file system,",[974,137505,137506],{},"media playback and recording,",[974,137508,137509],{},"network availability.",[925,137511,137512,137513,137518],{},"A full list of capabilities for each platform is available ",[933,137514,137517],{"href":137515,"rel":137516},"http:\u002F\u002Fphonegap.com\u002Fabout\u002Ffeature\u002F",[937],"on PhoneGap’s website",".\nIf these capabilities aren’t enough, PhoneGap may be extended with plugins that enable the developer to access more device features, including these:",[1530,137520,137521,137524,137527,137530,137533,137536],{},[974,137522,137523],{},"barcode scanning,",[974,137525,137526],{},"Bluetooth,",[974,137528,137529],{},"push notifications,",[974,137531,137532],{},"text to speech,",[974,137534,137535],{},"calendars,",[974,137537,137538],{},"Facebook Connect.",[925,137540,137541,137542,137547,137548,137553],{},"In previous versions of PhoneGap, a GitHub repository contained a set of ",[933,137543,137546],{"href":137544,"rel":137545},"https:\u002F\u002Fgithub.com\u002Fphonegap\u002Fphonegap-plugins",[937],"prebuilt plugins",".\nWith the arrival of PhoneGap 3, a new plugin architecture has resulted in the old repository being deprecated. A ",[933,137549,137552],{"href":137550,"rel":137551},"http:\u002F\u002Fplugins.cordova.io\u002F#\u002F_browse\u002Fall",[937],"registry"," has been created for all plugins compatible with PhoneGap 3.",[925,137555,137556,137557,137562],{},"Some command-line tools are also provided to make it easy to add the plugins to the repository for your project. We’ll see these later on in this article. PhoneGap also publishes documentation and examples on how to ",[933,137558,137561],{"href":137559,"rel":137560},"http:\u002F\u002Fdocs.phonegap.com\u002Fen\u002F3.0.0\u002Fguide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide",[937],"write your own"," plugins.\nOf course, the development of plugins assumes familiarity with the native platform on which the plugin is to be supported.",[953,137564,137566],{"id":137565},"an-html-css-and-javascript-foundation-for-mobile-development","An HTML, CSS And JavaScript Foundation For Mobile Development",[925,137568,137569],{},"The majority of PhoneGap’s capabilities lie in non-visual components — things that access the file system, network availability, geolocation, etc.\nPhoneGap does not provide much assistance with building the user interface itself. For this, you must rely on the HTML and CSS foundation that you’ve built yourself or on a framework. Applications written for mobile browsers must respect the limitations of the given mobile platform (processing speed, screen size, network speed, touch events, etc.).",[925,137571,137572],{},"Unless you have been working with HTML and CSS for a long time and are well aware of these issues, developing an effective mobile application without some sort of framework can be daunting.",[925,137574,137575,137576,137579],{},"Fortunately, ",[1107,137577,137578],{},"some mobile frameworks have arisen to help"," with this. Here are just some of the offerings in this area:",[1530,137581,137582,137589,137596,137603,137610,137618,137625],{},[974,137583,137584],{},[933,137585,137588],{"href":137586,"rel":137587},"http:\u002F\u002Fjquerymobile.com\u002F",[937],"jQuery Mobile",[974,137590,137591],{},[933,137592,137595],{"href":137593,"rel":137594},"http:\u002F\u002Fionicframework.com\u002F",[937],"Ionic",[974,137597,137598],{},[933,137599,137602],{"href":137600,"rel":137601},"http:\u002F\u002Fwww.sencha.com\u002Fproducts\u002Ftouch\u002F",[937],"Sencha Touch",[974,137604,137605],{},[933,137606,137609],{"href":137607,"rel":137608},"http:\u002F\u002Fwww.kendoui.com\u002F",[937],"Kendo UI Complete",[974,137611,137612,137613],{},"AppGyver’s ",[933,137614,137617],{"href":137615,"rel":137616},"http:\u002F\u002Fwww.appgyver.com\u002Fsteroids",[937],"Steroids",[974,137619,137620],{},[933,137621,137624],{"href":137622,"rel":137623},"http:\u002F\u002Fenyojs.com\u002F",[937],"Enyo",[974,137626,137627],{},[933,137628,137631],{"href":137629,"rel":137630},"http:\u002F\u002Ftopcoat.io\u002F",[937],"TopCoat",[925,137633,137634],{},"These frameworks vary from CSS-oriented libraries (like Topcoat) to complete MVC-based libraries with sets of mobile UI controls (like Sencha Touch). Discussing the differences between these frameworks in detail is beyond the scope of this article and would require an entire series of articles. Visit the websites above and try some of the demonstrations on several mobile devices.",[925,137636,137637,137638,137643],{},"One distinction to be made is that some frameworks support a wider variety of devices and device versions than others. Some mobile frameworks are built on a particular MVC platform. For example, Ionic is built on the ",[933,137639,137642],{"href":137640,"rel":137641},"http:\u002F\u002Fangularjs.org\u002F",[937],"AngularJS"," framework.\nThis might make a particular library more attractive to developers who are already familiar with the respective MVC framework.",[925,137645,137646],{},"Frameworks such as Sencha Touch abstract the DOM from the developer through the use of APIs, freeing the developer from having to worry about details of browser vendor implementations. Sencha also provides graphic development tools, such as Sencha Architect, to aid the development process. Sencha provides commercial support and training, too, which are worth investigating.",[925,137648,137649,137650,137653],{},"I’m often asked to recommend a framework for mobile development. But ",[941,137651,137652],{},"the right tool depends largely on your application’s functionality",", the mobile platforms you need to support, your demand for commercial support and your experience with Web and mobile development in general. I’m encouraged by some emerging frameworks, particularly Ionic, but as of the time of writing, Ionic is still in the alpha stage. If you are looking for something with a longer track record, then Sencha Touch or, for some cases, jQuery Mobile might be appropriate.",[925,137655,137656],{},"To be expedient and because of the wealth of tutorials and documentation available, I’ve written our FasTip application in jQuery Mobile, which provides a wide range of support for mobile devices. It’s a good choice for applications that do not require significant customization to the user interface. The simplicity of our application makes it well suited to jQuery Mobile.",[953,137658,137660],{"id":137659},"phonegap-or-cordova-whats-in-a-name","PhoneGap Or Cordova: What’s In A Name?",[925,137662,137663,137664,137668],{},"In the process of learning about PhoneGap, you’ll encounter the name, Cordova. The command-line tool that we’ll use in just a moment to create our PhoneGap project is named Cordova. Simply put, (",[933,137665,137666],{"href":137666,"rel":137667},"http:\u002F\u002Fcordova.apache.org\u002F)Cordova",[937],"] is the open-source project that is the basis of PhoneGap. Think of it as the engine that drives PhoneGap.",[925,137670,137671,137672,137675],{},"In most cases, the names may be used interchangeably. With ",[1107,137673,137674],{},"PhoneGap"," already being trademarked, a new name was needed when the project was open-sourced — hence, Cordova. “PhoneGap” continues to be used by Adobe for commercial products. Most people still refer to\nthe project as a whole as PhoneGap.",[953,137677,137679],{"id":137678},"installing-phonegap","Installing PhoneGap",[925,137681,137682,137683,137688],{},"With the introduction of version 3, installing PhoneGap’s tools and setting up projects have been greatly simplified, thanks to the new ",[933,137684,137687],{"href":137685,"rel":137686},"http:\u002F\u002Fdocs.phonegap.com\u002Fen\u002F3.3.0\u002Fguide_cli_index.md.html#The%20Command-Line%20Interface",[937],"command-line interface","(or CLI). The command-line tools are based on Node.js; thus, you must install it before installing PhoneGap. Once Node.js is in place, simply run one command for the node package manager to install PhoneGap’s tools:",[993,137690,137692],{"className":1797,"code":137691,"language":1799,"meta":998,"style":998},"npm install -g cordova\n",[941,137693,137694],{"__ignoreMap":998},[1002,137695,137696],{"class":1004,"line":1005},[1002,137697,137691],{},[953,137699,137701],{"id":137700},"considerations-for-supporting-multiple-platforms","Considerations For Supporting Multiple Platforms",[925,137703,137704],{},"We’ve seen that by using PhoneGap and a framework like jQuery Mobile, building a cross-device application is easy. One caveat with jQuery Mobile is that both iOS and Android users would see the same UX; that is, the UX would not be tailored to the respective platform, much like a Web page looks the same whether viewed on OS X or Windows.",[925,137706,137707,137708,137711,137712,137715],{},"Attempting to mimic the native platform controls in HTML and CSS is generally a bad idea.\nWhile you could approximate the ",[941,137709,137710],{},"look"," of the native platform, mimicking the ",[941,137713,137714],{},"feel"," of the platform is exceedingly difficult. The controls might not respond to taps and other gestures in the same way. The result is usually a UX that just feels wrong. Successful PhoneGap projects generally eschew this approach in favour of a platform-independent UX.",[925,137717,137718],{},"If your project requires an experience that closely matches that of the native platform, PhoneGap might not be the right choice.",[925,137720,137721],{},[963,137722],{"alt":137723,"src":137724},"Multiple Platforms","\u002Fimages\u002Fblog\u002F2014-04-27-develop-mobile-apps-phonegap\u002Fphonegap-cordova-500-opt.png",[925,137726,137727,137728,137733],{},"HTML5 capabilities vary widely across devices. While iOS and Android browsers are built on WebKit, some features are implemented only in the latest versions of the platforms. One useful website for checking browser version capabilities is ",[933,137729,137732],{"href":137730,"rel":137731},"http:\u002F\u002Fmobilehtml5.org\u002F",[937],"Mobile HTML5",". The browsers on some old platforms, particularly Android 2.x, have various rendering bugs, which could also hamper your development.",[925,137735,137736],{},"Frameworks such as jQuery Mobile and Sencha Touch take these compatibility issues into account. If you choose to roll your solution, perhaps to gain greater control over the UX, then you will need to plan additional time for testing, particularly for old device versions, on which HTML5 support is less consistent.",[925,137738,137739],{},"jQuery Mobile makes it easy to get started and provides a good feature set for simple applications. Much of the functionality on the screens of our sample application is provided by jQuery Mobile itself, leaving us with less code to write. However, the speed of development with jQuery Mobile comes at the expense of customization. While jQuery Mobile does offer a “theme roller” tool to customize appearance, much of that is “chrome” related to colours and visual attributes like rounded corners.",[925,137741,137742,137743,1251,137748,16529,137753,137758,137759,16529,137762,1539],{},"Assess whether your application fits jQuery Mobile’s paradigm.\nThe platform does offer some alternate layouts for things like forms, but the options are still somewhat limited. If your application requires a truly custom look or layout, then you might find jQuery Mobile too confining. Consider one of the frameworks suggested earlier. Or adopt a “best of breed” approach, mixing a CSS-oriented framework (such as ",[933,137744,137747],{"href":137745,"rel":137746},"http:\u002F\u002Ftwitter.github.io\u002Fbootstrap\u002F",[937],"Twitter Bootstrap",[933,137749,137752],{"href":137750,"rel":137751},"http:\u002F\u002Ffoundation.zurb.com\u002F",[937],"Zurb Foundation",[933,137754,137757],{"href":137755,"rel":137756},"http:\u002F\u002Fmaker.github.io\u002Fratchet\u002F",[937],"Ratchet",") with an MVC framework (such as ",[933,137760,137642],{"href":137640,"rel":137761},[937],[933,137763,137766],{"href":137764,"rel":137765},"http:\u002F\u002Fbackbonejs.org\u002F",[937],"Backbone.js",[925,137768,137769,137770,2034,137773,137776],{},"Some of the large mobile solutions, such as ",[933,137771,137602],{"href":137600,"rel":137772},[937],[933,137774,137595],{"href":137593,"rel":137775},[937],", marry a powerful MVC platform to a set of prebuilt controls focused on mobile development. These tools are attractive and worthy of consideration. But bear in mind the different range of devices that each of these tools supports. At the moment, Sencha Touch supports more devices than Ionic, but jQuery Mobile supports even more. This should also factor in your selection process.",[953,137778,137780],{"id":137779},"using-a-native-plugin","Using A Native Plugin",[925,137782,137783],{},"If you try our sample application on iOS 7, you’ll run into an issue with the device’s status bar that has affected many PhoneGap applications. That is, the status bar now overlaps the top of the application:",[953,137785,137787],{"id":137786},"building-in-the-cloud","Building In The Cloud",[925,137789,137790,137791,137796],{},"Generally speaking, to build an application for a particular platform, you must install the SDK for that platform on your machine. This could be a problem if, for instance, you’re on a Mac and want to target Windows tablets, whose SDK requires you to be on a Windows machine. Adobe offers a service named ",[933,137792,137795],{"href":137793,"rel":137794},"https:\u002F\u002Fbuild.phonegap.com\u002F",[937],"PhoneGap Build","to help in this situation.",[925,137798,137799,137800,137803],{},"PhoneGap Build enables you to upload a ZIP file containing the HTML, CSS and JavaScript of your application. Additionally, PhoneGap 3 enables you to ",[941,137801,137802],{},"submit an application to PhoneGap Build right from the command line","; from there, PhoneGap Build takes over and produces a deployment bundle for the desired platform.",[925,137805,137806],{},[963,137807],{"alt":137787,"src":137808},"\u002Fimages\u002Fblog\u002F2014-04-27-develop-mobile-apps-phonegap\u002Fbuild-500-opt.png",[925,137810,137811,137812,137817],{},"Once the build process is complete, you may either download the deployment bundle and manually install it to your device or take a picture of a QR code on PhoneGap Build’s website and download the deployment package directly to your mobile device. What’s more, PhoneGap Build supports a feature named ",[933,137813,137816],{"href":137814,"rel":137815},"http:\u002F\u002Fdocs.build.phonegap.com\u002Fen_US\u002F3.1.0\u002Ftools_hydration.md.html#Hydration",[937],"Hydration",", which enables the application to download updates to the HTML, CSS and JavaScript files whenever it launches.",[925,137819,137820],{},"This means that testers will always be running the latest version of your application, without having to go through the traditional updating process. Note that, at least for now, Hydration is meant for development and testing — not for final production code that will be submitted to the app store.",[953,137822,137824],{"id":137823},"development-in-the-cloud","Development in the Cloud",[925,137826,137827,137828,137833,137834,137839],{},"You can do more than simply compile and package your application in the cloud. Cloud-based ",[933,137829,137832],{"href":137830,"rel":137831},"http:\u002F\u002Fwww.icenium.com\u002F",[937],"Icenium"," provides a browser-based IDE that lets you edit code in a browser and immediately turn those edits into a deployment package. Using an application in the iOS App Store named ",[933,137835,137838],{"href":137836,"rel":137837},"http:\u002F\u002Fwww.icenium.com\u002Fproduct\u002Fion",[937],"Icenium Ion",", you can dynamically load updates to your application as you change the code in the Web-based IDE.",[925,137841,137842,137843,137847,137848,137852],{},"In addition, Icenium bundles a license to Telerik’s !KendoUI](",[933,137844,137845],{"href":137845,"rel":137846},"http:\u002F\u002Fwww.kendoui.com\u002F)library",[937],". I’ve used this to make changes to an iOS PhoneGap application while on a Windows-based laptop. Icenium also offers a Windows desktop IDE named (",[933,137849,137850],{"href":137850,"rel":137851},"http:\u002F\u002Fwww.icenium.com\u002Fproduct\u002Fgraphite)Graphite",[937],"], which expands on the capabilities of the browser-based tool.",[925,137854,137855,137856,137860,137861,137864],{},"Another alternative to PhoneGap Build is (",[933,137857,137858],{"href":137858,"rel":137859},"http:\u002F\u002Fwww.appgyver.com\u002F)AppGyver",[937],"]. It is not an IDE like Icenium, but it does offer a UX library, named ",[933,137862,137617],{"href":137615,"rel":137863},[937],", that facilities navigation between Web views using some native controls. Note that for page content itself, you must still use HTML and CSS.",[925,137866,137867],{},"The main downside to cloud-based development services is that they have limited support for PhoneGap plugins. However, new plugins are being supported all the time. Determine your application’s needs to see whether a particular cloud-based tool supports the plugins you require.",[953,137869,137871],{"id":137870},"debugging-your-application","Debugging Your Application",[925,137873,137874],{},"In most cases, when attempting to debug an application, you’ll be mostly concerned with debugging the JavaScript, examining the console log and perhaps doing some interactive inspection and manipulation of the DOM. Unfortunately, there is no integrated way to debug across all platforms. However, there are several useful techniques, covered below.",[953,137876,137878],{"id":137877},"chrome-devtools","Chrome DevTools",[925,137880,137881,137882,137887],{},"I generally find it easiest to work with Chrome DevTools by treating my pages as standard Web pages loaded in a desktop browser (although this doesn’t help with the portions of code that rely on PhoneGap plugins). Chrome DevTools provides an ",[933,137883,137886],{"href":137884,"rel":137885},"https:\u002F\u002Fdevelopers.google.com\u002Fchrome-developer-tools\u002Fdocs\u002Fmobile-emulation",[937],"emulation panel"," that simulates the aspect ratios, touch events and more of various mobile device screens.",[953,137889,137891],{"id":137890},"apache-ripple","Apache Ripple",[925,137893,137894,137895,137900],{},"Apache’s ",[933,137896,137899],{"href":137897,"rel":137898},"http:\u002F\u002Fripple.incubator.apache.org\u002F",[937],"Ripple"," is a NodeJS project that serves PhoneGap content in a desktop browser. Ripple enables you to experiment with different screen sizes and orientations. It also allows you to simulate geolocation coordinates and network connectivity events, as well as allows JavaScript code to invoke many of PhoneGap’s core plugins while running in a desktop browser.",[953,137902,137904],{"id":137903},"safari-to-debug-web-views-on-ios-apps","Safari to debug web views on iOS Apps",[925,137906,137907,137908,137913,137914,137917,137918,137921],{},"Starting with Safari 6, Apple has included support for using the Web inspector in ",[933,137909,137912],{"href":137910,"rel":137911},"http:\u002F\u002Fwww.tricedesigns.com\u002F2013\u002F03\u002F18\u002Fon-device-debugging-with-phonegap-ios-6\u002F",[937],"desktop Safari to debug Web views"," running in the simulator. With your app running in the simulator, simply go to the ",[1107,137915,137916],{},"Develop"," menu in Safari and look for the* ",[928,137919,137920],{},"iPhone Simulator","* option. This will connect the Web inspector to the running instance of your PhoneGap application and will allow to you manipulate the DOM, set breakpoints in JavaScript, etc.",[953,137923,137925],{"id":137924},"chrome-devtools-to-debug-web-views-in-android-apps","Chrome DevTools to debug web views in Android Apps",[925,137927,137928,137929,137934,137935,137939],{},"Starting with version 4.4, Android’s Web view is now based on Google Chrome. With this change comes the ability to ",[933,137930,137933],{"href":137931,"rel":137932},"https:\u002F\u002Fdevelopers.google.com\u002Fchrome-developer-tools\u002Fdocs\u002Fremote-debugging#debugging-webviews",[937],"connect to the Web view from DevTools"," and to debug interactively, just like you can with iOS. If you don’t have a 4.4 device, fear not: It works with the 4.4 emulator as well. Note that you’ll need to add a (",[933,137936,137937],{"href":137937,"rel":137938},"https:\u002F\u002Fgithub.com\u002Fjrstarke\u002Fwebview-debug)special",[937]," plugin] to your PhoneGap project to enable Web view debugging on Android.",[953,137941,137943],{"id":137942},"web-inspector-remote","Web Inspector Remote",[925,137945,137946,137950],{},[933,137947,137943],{"href":137948,"rel":137949},"http:\u002F\u002Fpeople.apache.org\u002F~pmuellr\u002Fweinre\u002Fdocs\u002Flatest\u002FHome.html",[937]," (WEINRE) provides a partial set of debugging features, including DOM manipulation and access to the console. However, it does not support JavaScript debugging. Add WEINRE to your application by including a script tag in your application’s HTML and running a NodeJS server that this script connects to. The main advantage of WEINRE is that it works with earlier versions of WebKit on mobile devices and is one way of debugging cross-platform.",[925,137952,3898,137953,6513,137956,137960],{},[1002,137954,137955],{},"PhoneGap wiki",[933,137957,137958],{"href":137958,"rel":137959},"https:\u002F\u002Fgithub.com\u002Fphonegap\u002Fphonegap\u002Fwiki\u002FDebugging-in-PhoneGap",[937],") also has a page on debugging, with links to other tools.",[1579,137962,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":137964},[137965,137966,137967,137968,137969,137970,137971,137972,137973,137974,137975,137976,137977,137978,137979],{"id":137456,"depth":1012,"text":137457},{"id":137481,"depth":1012,"text":137482},{"id":137565,"depth":1012,"text":137566},{"id":137659,"depth":1012,"text":137660},{"id":137678,"depth":1012,"text":137679},{"id":137700,"depth":1012,"text":137701},{"id":137779,"depth":1012,"text":137780},{"id":137786,"depth":1012,"text":137787},{"id":137823,"depth":1012,"text":137824},{"id":137870,"depth":1012,"text":137871},{"id":137877,"depth":1012,"text":137878},{"id":137890,"depth":1012,"text":137891},{"id":137903,"depth":1012,"text":137904},{"id":137924,"depth":1012,"text":137925},{"id":137942,"depth":1012,"text":137943},"2014-04-27","\u002Fimages\u002Fblog\u002Ffeatures\u002Fdevelop-mobile-apps-phonegap.jpg",{},{"title":157,"description":159},"blog\u002Fdevelop-mobile-apps-phonegap",[16,161,17,162],"KmIIZ__IzynCA2azvVZm_-l8A9guXws1JakHacaxh3I",{"id":137988,"title":58,"author":920,"body":137989,"date":142904,"description":60,"extension":1591,"image":142905,"meta":142906,"navigation":1050,"path":59,"seo":142907,"stem":142908,"tags":142909,"__hash__":142910},"blog\u002Fblog\u002Fbackbone-patterns.md",{"type":922,"value":137990,"toc":142881},[137991,137995,137999,138002,138005,138012,138234,138237,138537,138547,138550,138554,138557,138587,138604,138639,138656,138666,138764,138770,138802,138807,138836,138848,138980,138983,139098,139101,139104,139129,139153,139159,139163,139168,139296,139306,139627,139687,139690,139961,139964,139967,139970,139974,139977,140150,140153,140161,140390,140404,140408,140428,140431,140440,140444,140452,140478,140487,140643,140646,140649,140845,140852,140856,140883,141043,141047,141060,141069,141078,141236,141239,141243,141246,141250,141253,141506,141515,141519,141522,141716,141719,141722,141726,141734,141738,141741,141904,141918,141987,141991,141999,142164,142168,142171,142319,142322,142470,142476,142677,142681,142690,142835,142856,142860,142875,142878],[953,137992,137994],{"id":137993},"create-façades-to-objects","Create Façades To Objects",[1655,137996,137998],{"id":137997},"getters-setters","Getters & Setters",[925,138000,138001],{},"When requirements change often, JSON returned by the endpoints that your models and collections hit needs to change as well. This can become a really big pain point in your codebase if your view is tightly coupled to the underlying data model - comes getters and setters for all objects.",[925,138003,138004],{},"The pros of this pattern are many. If any of the underlying data structures change, then the view layers shouldn’t have to update that much; you will have one point of access to the data, so you are less likely to forget to do a deep copy, and your code will be more maintainable and much easier to debug. The downside is that this pattern can cause a bit of bloat in your models or collections.",[925,138006,138007,138008,138011],{},"Let’s look at an example to illustrate this pattern. Imagine we have a ",[941,138009,138010],{},"Cinema"," model that contains rooms and the currently available rooms, and that we want to be able to retrieve rooms by seat price.",[993,138013,138015],{"className":995,"code":138014,"language":997,"meta":998,"style":998},"var Cinema = Backbone.Model.extend({\n defaults: {\n availableRooms: ['a'],\n rooms: {\n a: {\n price: 1200,\n seat: 'back',\n },\n b: {\n price: 900,\n seat: 'middle',\n },\n c: {\n price: 1100,\n seat: 'middle',\n },\n },\n\n getRooms: function () {\n $.extend(true, {}, this.get('rooms'));\n },\n\n getRoomsByBed: function (seat) {\n return _.where(this.getRooms(), { seat: seat });\n },\n },\n});\n",[941,138016,138017,138032,138037,138046,138051,138056,138066,138076,138080,138085,138093,138102,138106,138111,138120,138128,138132,138136,138140,138151,138178,138182,138186,138202,138222,138226,138230],{"__ignoreMap":998},[1002,138018,138019,138021,138024,138026,138028,138030],{"class":1004,"line":1005},[1002,138020,18311],{"class":1015},[1002,138022,138023],{"class":1030}," Cinema ",[1002,138025,2393],{"class":1015},[1002,138027,115611],{"class":1030},[1002,138029,106592],{"class":1026},[1002,138031,2756],{"class":1030},[1002,138033,138034],{"class":1004,"line":1012},[1002,138035,138036],{"class":1030}," defaults: {\n",[1002,138038,138039,138042,138044],{"class":1004,"line":1047},[1002,138040,138041],{"class":1030}," availableRooms: [",[1002,138043,28315],{"class":1034},[1002,138045,1903],{"class":1030},[1002,138047,138048],{"class":1004,"line":1054},[1002,138049,138050],{"class":1030}," rooms: {\n",[1002,138052,138053],{"class":1004,"line":1060},[1002,138054,138055],{"class":1030}," a: {\n",[1002,138057,138058,138061,138064],{"class":1004,"line":1272},[1002,138059,138060],{"class":1030}," price: ",[1002,138062,138063],{"class":1019},"1200",[1002,138065,1143],{"class":1030},[1002,138067,138068,138071,138074],{"class":1004,"line":1348},[1002,138069,138070],{"class":1030}," seat: ",[1002,138072,138073],{"class":1034},"'back'",[1002,138075,1143],{"class":1030},[1002,138077,138078],{"class":1004,"line":1354},[1002,138079,1922],{"class":1030},[1002,138081,138082],{"class":1004,"line":1360},[1002,138083,138084],{"class":1030}," b: {\n",[1002,138086,138087,138089,138091],{"class":1004,"line":1366},[1002,138088,138060],{"class":1030},[1002,138090,118720],{"class":1019},[1002,138092,1143],{"class":1030},[1002,138094,138095,138097,138100],{"class":1004,"line":1946},[1002,138096,138070],{"class":1030},[1002,138098,138099],{"class":1034},"'middle'",[1002,138101,1143],{"class":1030},[1002,138103,138104],{"class":1004,"line":1956},[1002,138105,1922],{"class":1030},[1002,138107,138108],{"class":1004,"line":1961},[1002,138109,138110],{"class":1030}," c: {\n",[1002,138112,138113,138115,138118],{"class":1004,"line":1971},[1002,138114,138060],{"class":1030},[1002,138116,138117],{"class":1019},"1100",[1002,138119,1143],{"class":1030},[1002,138121,138122,138124,138126],{"class":1004,"line":1980},[1002,138123,138070],{"class":1030},[1002,138125,138099],{"class":1034},[1002,138127,1143],{"class":1030},[1002,138129,138130],{"class":1004,"line":1985},[1002,138131,1922],{"class":1030},[1002,138133,138134],{"class":1004,"line":1995},[1002,138135,15108],{"class":1030},[1002,138137,138138],{"class":1004,"line":2006},[1002,138139,1051],{"emptyLinePlaceholder":1050},[1002,138141,138142,138145,138147,138149],{"class":1004,"line":2011},[1002,138143,138144],{"class":1026}," getRooms",[1002,138146,1137],{"class":1030},[1002,138148,6965],{"class":1015},[1002,138150,9772],{"class":1030},[1002,138152,138153,138156,138158,138160,138162,138165,138167,138169,138171,138173,138176],{"class":1004,"line":2017},[1002,138154,138155],{"class":1030}," $.",[1002,138157,106592],{"class":1026},[1002,138159,1031],{"class":1030},[1002,138161,17397],{"class":1019},[1002,138163,138164],{"class":1030},", {}, ",[1002,138166,3455],{"class":1019},[1002,138168,948],{"class":1030},[1002,138170,8070],{"class":1026},[1002,138172,1031],{"class":1030},[1002,138174,138175],{"class":1034},"'rooms'",[1002,138177,5663],{"class":1030},[1002,138179,138180],{"class":1004,"line":2022},[1002,138181,15108],{"class":1030},[1002,138183,138184],{"class":1004,"line":2442},[1002,138185,1051],{"emptyLinePlaceholder":1050},[1002,138187,138188,138191,138193,138195,138197,138200],{"class":1004,"line":2466},[1002,138189,138190],{"class":1026}," getRoomsByBed",[1002,138192,1137],{"class":1030},[1002,138194,6965],{"class":1015},[1002,138196,6513],{"class":1030},[1002,138198,138199],{"class":2378},"seat",[1002,138201,2382],{"class":1030},[1002,138203,138204,138206,138208,138210,138212,138214,138216,138219],{"class":1004,"line":2471},[1002,138205,4376],{"class":1015},[1002,138207,58836],{"class":1030},[1002,138209,129967],{"class":1026},[1002,138211,1031],{"class":1030},[1002,138213,3455],{"class":1019},[1002,138215,948],{"class":1030},[1002,138217,138218],{"class":1026},"getRooms",[1002,138220,138221],{"class":1030},"(), { seat: seat });\n",[1002,138223,138224],{"class":1004,"line":2476},[1002,138225,15108],{"class":1030},[1002,138227,138228],{"class":1004,"line":2481},[1002,138229,1502],{"class":1030},[1002,138231,138232],{"class":1004,"line":2491},[1002,138233,2804],{"class":1030},[925,138235,138236],{},"Now let’s imagine that tomorrow you will be releasing your code, and you find out that the endpoint developers forgot to tell you that the data structure of rooms has changed from an object to an array. Your code now looks like the following.",[993,138238,138240],{"className":995,"code":138239,"language":997,"meta":998,"style":998},"var Cinema = Backbone.Model.extend({\n defaults: {\n availableRooms: ['a'],\n rooms: [\n {\n name: 'a',\n price: 1200,\n seat: 'back',\n },\n {\n name: 'b',\n price: 900,\n seat: 'middle',\n },\n {\n name: 'c',\n price: 1100,\n seat: 'middle',\n },\n ],\n\n getRooms: function () {\n var rooms = $.extend(true, {}, this.get('rooms')),\n newRooms = {};\n\n \u002F\u002F transform rooms from an array back into an object\n _.each(rooms, function (room) {\n newRooms[room.name] = {\n price: room.price,\n seat: room.seat,\n };\n });\n },\n\n getRoomsByBed: function (seat) {\n return _.where(this.getRooms(), { seat: seat });\n },\n },\n});\n",[941,138241,138242,138256,138260,138268,138273,138277,138286,138294,138302,138306,138310,138318,138326,138334,138338,138342,138350,138358,138366,138370,138374,138378,138388,138421,138430,138434,138439,138457,138466,138471,138476,138481,138485,138489,138493,138507,138525,138529,138533],{"__ignoreMap":998},[1002,138243,138244,138246,138248,138250,138252,138254],{"class":1004,"line":1005},[1002,138245,18311],{"class":1015},[1002,138247,138023],{"class":1030},[1002,138249,2393],{"class":1015},[1002,138251,115611],{"class":1030},[1002,138253,106592],{"class":1026},[1002,138255,2756],{"class":1030},[1002,138257,138258],{"class":1004,"line":1012},[1002,138259,138036],{"class":1030},[1002,138261,138262,138264,138266],{"class":1004,"line":1047},[1002,138263,138041],{"class":1030},[1002,138265,28315],{"class":1034},[1002,138267,1903],{"class":1030},[1002,138269,138270],{"class":1004,"line":1054},[1002,138271,138272],{"class":1030}," rooms: [\n",[1002,138274,138275],{"class":1004,"line":1060},[1002,138276,1336],{"class":1030},[1002,138278,138279,138282,138284],{"class":1004,"line":1272},[1002,138280,138281],{"class":1030}," name: ",[1002,138283,28315],{"class":1034},[1002,138285,1143],{"class":1030},[1002,138287,138288,138290,138292],{"class":1004,"line":1348},[1002,138289,138060],{"class":1030},[1002,138291,138063],{"class":1019},[1002,138293,1143],{"class":1030},[1002,138295,138296,138298,138300],{"class":1004,"line":1354},[1002,138297,138070],{"class":1030},[1002,138299,138073],{"class":1034},[1002,138301,1143],{"class":1030},[1002,138303,138304],{"class":1004,"line":1360},[1002,138305,1922],{"class":1030},[1002,138307,138308],{"class":1004,"line":1366},[1002,138309,1336],{"class":1030},[1002,138311,138312,138314,138316],{"class":1004,"line":1946},[1002,138313,138281],{"class":1030},[1002,138315,31566],{"class":1034},[1002,138317,1143],{"class":1030},[1002,138319,138320,138322,138324],{"class":1004,"line":1956},[1002,138321,138060],{"class":1030},[1002,138323,118720],{"class":1019},[1002,138325,1143],{"class":1030},[1002,138327,138328,138330,138332],{"class":1004,"line":1961},[1002,138329,138070],{"class":1030},[1002,138331,138099],{"class":1034},[1002,138333,1143],{"class":1030},[1002,138335,138336],{"class":1004,"line":1971},[1002,138337,1922],{"class":1030},[1002,138339,138340],{"class":1004,"line":1980},[1002,138341,1336],{"class":1030},[1002,138343,138344,138346,138348],{"class":1004,"line":1985},[1002,138345,138281],{"class":1030},[1002,138347,38778],{"class":1034},[1002,138349,1143],{"class":1030},[1002,138351,138352,138354,138356],{"class":1004,"line":1995},[1002,138353,138060],{"class":1030},[1002,138355,138117],{"class":1019},[1002,138357,1143],{"class":1030},[1002,138359,138360,138362,138364],{"class":1004,"line":2006},[1002,138361,138070],{"class":1030},[1002,138363,138099],{"class":1034},[1002,138365,1143],{"class":1030},[1002,138367,138368],{"class":1004,"line":2011},[1002,138369,1922],{"class":1030},[1002,138371,138372],{"class":1004,"line":2017},[1002,138373,33564],{"class":1030},[1002,138375,138376],{"class":1004,"line":2022},[1002,138377,1051],{"emptyLinePlaceholder":1050},[1002,138379,138380,138382,138384,138386],{"class":1004,"line":2442},[1002,138381,138144],{"class":1026},[1002,138383,1137],{"class":1030},[1002,138385,6965],{"class":1015},[1002,138387,9772],{"class":1030},[1002,138389,138390,138392,138395,138397,138400,138402,138404,138406,138408,138410,138412,138414,138416,138418],{"class":1004,"line":2466},[1002,138391,74514],{"class":1015},[1002,138393,138394],{"class":1030}," rooms ",[1002,138396,2393],{"class":1015},[1002,138398,138399],{"class":1030}," $.",[1002,138401,106592],{"class":1026},[1002,138403,1031],{"class":1030},[1002,138405,17397],{"class":1019},[1002,138407,138164],{"class":1030},[1002,138409,3455],{"class":1019},[1002,138411,948],{"class":1030},[1002,138413,8070],{"class":1026},[1002,138415,1031],{"class":1030},[1002,138417,138175],{"class":1034},[1002,138419,138420],{"class":1030},")),\n",[1002,138422,138423,138426,138428],{"class":1004,"line":2471},[1002,138424,138425],{"class":1030}," newRooms ",[1002,138427,2393],{"class":1015},[1002,138429,7217],{"class":1030},[1002,138431,138432],{"class":1004,"line":2476},[1002,138433,1051],{"emptyLinePlaceholder":1050},[1002,138435,138436],{"class":1004,"line":2481},[1002,138437,138438],{"class":1008}," \u002F\u002F transform rooms from an array back into an object\n",[1002,138440,138441,138443,138445,138448,138450,138452,138455],{"class":1004,"line":2491},[1002,138442,59872],{"class":1030},[1002,138444,6633],{"class":1026},[1002,138446,138447],{"class":1030},"(rooms, ",[1002,138449,6965],{"class":1015},[1002,138451,6513],{"class":1030},[1002,138453,138454],{"class":2378},"room",[1002,138456,2382],{"class":1030},[1002,138458,138459,138462,138464],{"class":1004,"line":2502},[1002,138460,138461],{"class":1030}," newRooms[room.name] ",[1002,138463,2393],{"class":1015},[1002,138465,1457],{"class":1030},[1002,138467,138468],{"class":1004,"line":2513},[1002,138469,138470],{"class":1030}," price: room.price,\n",[1002,138472,138473],{"class":1004,"line":2535},[1002,138474,138475],{"class":1030}," seat: room.seat,\n",[1002,138477,138478],{"class":1004,"line":2557},[1002,138479,138480],{"class":1030}," };\n",[1002,138482,138483],{"class":1004,"line":2562},[1002,138484,47582],{"class":1030},[1002,138486,138487],{"class":1004,"line":2567},[1002,138488,15108],{"class":1030},[1002,138490,138491],{"class":1004,"line":2572},[1002,138492,1051],{"emptyLinePlaceholder":1050},[1002,138494,138495,138497,138499,138501,138503,138505],{"class":1004,"line":2582},[1002,138496,138190],{"class":1026},[1002,138498,1137],{"class":1030},[1002,138500,6965],{"class":1015},[1002,138502,6513],{"class":1030},[1002,138504,138199],{"class":2378},[1002,138506,2382],{"class":1030},[1002,138508,138509,138511,138513,138515,138517,138519,138521,138523],{"class":1004,"line":2594},[1002,138510,4376],{"class":1015},[1002,138512,58836],{"class":1030},[1002,138514,129967],{"class":1026},[1002,138516,1031],{"class":1030},[1002,138518,3455],{"class":1019},[1002,138520,948],{"class":1030},[1002,138522,138218],{"class":1026},[1002,138524,138221],{"class":1030},[1002,138526,138527],{"class":1004,"line":2603},[1002,138528,15108],{"class":1030},[1002,138530,138531],{"class":1004,"line":2619},[1002,138532,1502],{"class":1030},[1002,138534,138535],{"class":1004,"line":2633},[1002,138536,2804],{"class":1030},[925,138538,138539,138540,138542,138543,138546],{},"We updated only one function in order to transform the ",[941,138541,138010],{}," structure into the structure that the rest of our application expects, and our entire app still behaves as expected. If we didn’t have a getter here, we might potentially have to update each point of access to ",[941,138544,138545],{},"rooms",". Ideally, you would want to update all of your functions to work with the new data structure, but if you’re pressed for time and have to release, this pattern can save you.",[925,138548,138549],{},"As an aside, this pattern can be thought of as both a facade design pattern, because it hides the complexity of creating a copy of your objects, or a bridge design pattern, because it can be used to transform data into what is expected. A good rule of thumb is to use getters and setters on anything that is an object.",[953,138551,138553],{"id":138552},"perform-deep-copies-of-objects","Perform Deep Copies Of Objects",[925,138555,138556],{},"JavaScript treats all primitive-type variables as pass-by-value. So, the value of a variable is passed when the variable is referenced.",[993,138558,138560],{"className":995,"code":138559,"language":997,"meta":998,"style":998},"var firstName = *Hello World”;\nvar helloWorldCopy = helloWorld;\n",[941,138561,138562,138575],{"__ignoreMap":998},[1002,138563,138564,138566,138568,138570,138572],{"class":1004,"line":1005},[1002,138565,18311],{"class":1015},[1002,138567,82331],{"class":1030},[1002,138569,2393],{"class":1015},[1002,138571,6090],{"class":1015},[1002,138573,138574],{"class":1030},"Hello World”;\n",[1002,138576,138577,138579,138582,138584],{"class":1004,"line":1012},[1002,138578,18311],{"class":1015},[1002,138580,138581],{"class":1030}," helloWorldCopy ",[1002,138583,2393],{"class":1015},[1002,138585,138586],{"class":1030}," helloWorld;\n",[925,138588,138589,138590,138593,138594,138597,138598,138600,138601,138603],{},"For example, the code above will set ",[941,138591,138592],{},"helloWorldCopy"," equal to the value of ",[941,138595,138596],{},"helloWorld",". So, any modification to ",[941,138599,138592],{}," will not modify ",[941,138602,138596],{},", since it is a copy. JavaScript treats all non-primitive type variables as pass-by-reference, meaning that JavaScript will pass a reference of the memory address of the variable when the variable is referenced.",[993,138605,138607],{"className":995,"code":138606,"language":997,"meta":998,"style":998},"var helloWorld = {\n ‘hello’: ‘world’\n}\nvar helloWorldCopy = helloWorld;\n",[941,138608,138609,138620,138625,138629],{"__ignoreMap":998},[1002,138610,138611,138613,138616,138618],{"class":1004,"line":1005},[1002,138612,18311],{"class":1015},[1002,138614,138615],{"class":1030}," helloWorld ",[1002,138617,2393],{"class":1015},[1002,138619,1457],{"class":1030},[1002,138621,138622],{"class":1004,"line":1012},[1002,138623,138624],{"class":1030}," ‘hello’: ‘world’\n",[1002,138626,138627],{"class":1004,"line":1047},[1002,138628,1170],{"class":1030},[1002,138630,138631,138633,138635,138637],{"class":1004,"line":1054},[1002,138632,18311],{"class":1015},[1002,138634,138581],{"class":1030},[1002,138636,2393],{"class":1015},[1002,138638,138586],{"class":1030},[925,138640,138589,138641,138643,138644,138646,138647,138649,138650,138652,138653,138655],{},[941,138642,138592],{}," equal to the reference of",[941,138645,138596],{},", and, as you might guess, any modifications to ",[941,138648,138592],{}," would directly manipulate ",[941,138651,138596],{},". If you’d like to have a copy of the ",[941,138654,138596],{},", you will have to create a copy of the object.",[925,138657,138658,138659,138662,138663,138665],{},"You’re probably wondering, *Why is he explaining all of this pass-by-reference stuff?” Well, Backbone.js does not copy objects, which means that if you",[941,138660,138661],{},".get()"," an object from a model, any modifications to that object will directly manipulate the object! Let’s look at an example to illustrate where this can become an issue. Let’s say you have a ",[941,138664,7664],{}," model like the following:",[993,138667,138669],{"className":995,"code":138668,"language":997,"meta":998,"style":998},"var Person = Backbone.Model.extend({\n defaults: {\n 'name': 'John Doe',\n 'address': {\n 'street': '1st Street'\n 'city': 'Austin',\n 'state': 'TX'\n 'zipCode': 78701\n }\n }\n});\n",[941,138670,138671,138686,138691,138702,138709,138719,138731,138741,138751,138755,138760],{"__ignoreMap":998},[1002,138672,138673,138675,138678,138680,138682,138684],{"class":1004,"line":1005},[1002,138674,18311],{"class":1015},[1002,138676,138677],{"class":1030}," Person ",[1002,138679,2393],{"class":1015},[1002,138681,115611],{"class":1030},[1002,138683,106592],{"class":1026},[1002,138685,2756],{"class":1030},[1002,138687,138688],{"class":1004,"line":1012},[1002,138689,138690],{"class":1030}," defaults: {\n",[1002,138692,138693,138696,138698,138700],{"class":1004,"line":1047},[1002,138694,138695],{"class":1034}," 'name'",[1002,138697,1137],{"class":1030},[1002,138699,7932],{"class":1034},[1002,138701,1143],{"class":1030},[1002,138703,138704,138707],{"class":1004,"line":1054},[1002,138705,138706],{"class":1034}," 'address'",[1002,138708,15354],{"class":1030},[1002,138710,138711,138714,138716],{"class":1004,"line":1060},[1002,138712,138713],{"class":1034}," 'street'",[1002,138715,1137],{"class":1030},[1002,138717,138718],{"class":1034},"'1st Street'\n",[1002,138720,138721,138724,138726,138729],{"class":1004,"line":1272},[1002,138722,138723],{"class":1034}," 'city'",[1002,138725,1137],{"class":1030},[1002,138727,138728],{"class":1034},"'Austin'",[1002,138730,1143],{"class":1030},[1002,138732,138733,138736,138738],{"class":1004,"line":1348},[1002,138734,138735],{"class":1034}," 'state'",[1002,138737,1137],{"class":1030},[1002,138739,138740],{"class":1034},"'TX'\n",[1002,138742,138743,138746,138748],{"class":1004,"line":1354},[1002,138744,138745],{"class":1034}," 'zipCode'",[1002,138747,1137],{"class":1030},[1002,138749,138750],{"class":1019},"78701\n",[1002,138752,138753],{"class":1004,"line":1360},[1002,138754,7377],{"class":1030},[1002,138756,138757],{"class":1004,"line":1366},[1002,138758,138759],{"class":1030}," }\n",[1002,138761,138762],{"class":1004,"line":1946},[1002,138763,2804],{"class":1030},[925,138765,138766,138767,97460],{},"And let’s say you create a new ",[941,138768,138769],{},"person",[993,138771,138773],{"className":995,"code":138772,"language":997,"meta":998,"style":998},"var person = new Person({\n name: 'Phillip W',\n});\n",[941,138774,138775,138789,138798],{"__ignoreMap":998},[1002,138776,138777,138779,138781,138783,138785,138787],{"class":1004,"line":1005},[1002,138778,18311],{"class":1015},[1002,138780,82348],{"class":1030},[1002,138782,2393],{"class":1015},[1002,138784,2690],{"class":1015},[1002,138786,7681],{"class":1026},[1002,138788,2756],{"class":1030},[1002,138790,138791,138793,138796],{"class":1004,"line":1012},[1002,138792,22129],{"class":1030},[1002,138794,138795],{"class":1034},"'Phillip W'",[1002,138797,1143],{"class":1030},[1002,138799,138800],{"class":1004,"line":1047},[1002,138801,2804],{"class":1030},[925,138803,138804,138805,97460],{},"Now, let’s manipulate some of the attributes of the new ",[941,138806,138769],{},[993,138808,138810],{"className":995,"code":138809,"language":997,"meta":998,"style":998},"person.set('name', 'Phillip W.', { validate: true });\n",[941,138811,138812],{"__ignoreMap":998},[1002,138813,138814,138817,138819,138821,138824,138826,138829,138832,138834],{"class":1004,"line":1005},[1002,138815,138816],{"class":1030},"person.",[1002,138818,40544],{"class":1026},[1002,138820,1031],{"class":1030},[1002,138822,138823],{"class":1034},"'name'",[1002,138825,1251],{"class":1030},[1002,138827,138828],{"class":1034},"'Phillip W.'",[1002,138830,138831],{"class":1030},", { validate: ",[1002,138833,17397],{"class":1019},[1002,138835,28417],{"class":1030},[925,138837,138838,138839,138841,138842,138844,138845,138847],{},"The code above successfully manipulates the ",[941,138840,5911],{}," attribute of the ",[941,138843,138769],{},"object. Now let’s try to manipulate the address of the ",[941,138846,138769],{}," object. However, before doing so, let’s add some validation for the address.",[993,138849,138851],{"className":995,"code":138850,"language":997,"meta":998,"style":998},"var Person = Backbone.Model.extend({\n validate: function(attributes) {\n\n if(isNaN(attributes.address.zipCode)) return \"Address ZIP code must be a number!\";\n },\n\n defaults: {\n 'name': 'John Doe',\n 'address': {\n 'street': '1st Street'\n 'city': 'Austin',\n 'state': 'TX'\n 'zipCode': 78701\n }\n }\n});\n",[941,138852,138853,138867,138883,138887,138905,138909,138913,138918,138928,138934,138942,138952,138960,138968,138972,138976],{"__ignoreMap":998},[1002,138854,138855,138857,138859,138861,138863,138865],{"class":1004,"line":1005},[1002,138856,18311],{"class":1015},[1002,138858,138677],{"class":1030},[1002,138860,2393],{"class":1015},[1002,138862,115611],{"class":1030},[1002,138864,106592],{"class":1026},[1002,138866,2756],{"class":1030},[1002,138868,138869,138872,138874,138876,138878,138881],{"class":1004,"line":1012},[1002,138870,138871],{"class":1026}," validate",[1002,138873,1137],{"class":1030},[1002,138875,6965],{"class":1015},[1002,138877,1031],{"class":1030},[1002,138879,138880],{"class":2378},"attributes",[1002,138882,2382],{"class":1030},[1002,138884,138885],{"class":1004,"line":1047},[1002,138886,1051],{"emptyLinePlaceholder":1050},[1002,138888,138889,138891,138893,138895,138898,138900,138903],{"class":1004,"line":1054},[1002,138890,7347],{"class":1015},[1002,138892,1031],{"class":1030},[1002,138894,104486],{"class":1026},[1002,138896,138897],{"class":1030},"(attributes.address.zipCode)) ",[1002,138899,8975],{"class":1015},[1002,138901,138902],{"class":1034}," \"Address ZIP code must be a number!\"",[1002,138904,1407],{"class":1030},[1002,138906,138907],{"class":1004,"line":1060},[1002,138908,15108],{"class":1030},[1002,138910,138911],{"class":1004,"line":1272},[1002,138912,1051],{"emptyLinePlaceholder":1050},[1002,138914,138915],{"class":1004,"line":1348},[1002,138916,138917],{"class":1030}," defaults: {\n",[1002,138919,138920,138922,138924,138926],{"class":1004,"line":1354},[1002,138921,138695],{"class":1034},[1002,138923,1137],{"class":1030},[1002,138925,7932],{"class":1034},[1002,138927,1143],{"class":1030},[1002,138929,138930,138932],{"class":1004,"line":1360},[1002,138931,138706],{"class":1034},[1002,138933,15354],{"class":1030},[1002,138935,138936,138938,138940],{"class":1004,"line":1366},[1002,138937,138713],{"class":1034},[1002,138939,1137],{"class":1030},[1002,138941,138718],{"class":1034},[1002,138943,138944,138946,138948,138950],{"class":1004,"line":1946},[1002,138945,138723],{"class":1034},[1002,138947,1137],{"class":1030},[1002,138949,138728],{"class":1034},[1002,138951,1143],{"class":1030},[1002,138953,138954,138956,138958],{"class":1004,"line":1956},[1002,138955,138735],{"class":1034},[1002,138957,1137],{"class":1030},[1002,138959,138740],{"class":1034},[1002,138961,138962,138964,138966],{"class":1004,"line":1961},[1002,138963,138745],{"class":1034},[1002,138965,1137],{"class":1030},[1002,138967,138750],{"class":1019},[1002,138969,138970],{"class":1004,"line":1971},[1002,138971,7377],{"class":1030},[1002,138973,138974],{"class":1004,"line":1980},[1002,138975,2014],{"class":1030},[1002,138977,138978],{"class":1004,"line":1985},[1002,138979,2804],{"class":1030},[925,138981,138982],{},"Now, let’s attempt to manipulate the address with an incorrect ZIP code.",[993,138984,138986],{"className":995,"code":138985,"language":997,"meta":998,"style":998},"var address = person.get('address');\naddress.zipCode = 'Hello World';\n\u002F\u002F Raises an error since the ZIP code is invalid\nperson.set('address', address, { validate: true });\nconsole.log(person.get('address'));\n\u002F* Prints an object with these properties.\n{\n 'street': '1st Street'\n 'city': 'Austin',\n 'state': 'TX'\n 'zipCode': 'Hello World'\n}\n*\u002F\n",[941,138987,138988,139009,139021,139026,139043,139060,139065,139069,139074,139079,139084,139089,139093],{"__ignoreMap":998},[1002,138989,138990,138992,138995,138997,139000,139002,139004,139007],{"class":1004,"line":1005},[1002,138991,18311],{"class":1015},[1002,138993,138994],{"class":1030}," address ",[1002,138996,2393],{"class":1015},[1002,138998,138999],{"class":1030}," person.",[1002,139001,8070],{"class":1026},[1002,139003,1031],{"class":1030},[1002,139005,139006],{"class":1034},"'address'",[1002,139008,1085],{"class":1030},[1002,139010,139011,139014,139016,139019],{"class":1004,"line":1012},[1002,139012,139013],{"class":1030},"address.zipCode ",[1002,139015,2393],{"class":1015},[1002,139017,139018],{"class":1034}," 'Hello World'",[1002,139020,1407],{"class":1030},[1002,139022,139023],{"class":1004,"line":1047},[1002,139024,139025],{"class":1008},"\u002F\u002F Raises an error since the ZIP code is invalid\n",[1002,139027,139028,139030,139032,139034,139036,139039,139041],{"class":1004,"line":1054},[1002,139029,138816],{"class":1030},[1002,139031,40544],{"class":1026},[1002,139033,1031],{"class":1030},[1002,139035,139006],{"class":1034},[1002,139037,139038],{"class":1030},", address, { validate: ",[1002,139040,17397],{"class":1019},[1002,139042,28417],{"class":1030},[1002,139044,139045,139047,139049,139052,139054,139056,139058],{"class":1004,"line":1060},[1002,139046,2883],{"class":1030},[1002,139048,2886],{"class":1026},[1002,139050,139051],{"class":1030},"(person.",[1002,139053,8070],{"class":1026},[1002,139055,1031],{"class":1030},[1002,139057,139006],{"class":1034},[1002,139059,5663],{"class":1030},[1002,139061,139062],{"class":1004,"line":1272},[1002,139063,139064],{"class":1008},"\u002F* Prints an object with these properties.\n",[1002,139066,139067],{"class":1004,"line":1348},[1002,139068,1129],{"class":1008},[1002,139070,139071],{"class":1004,"line":1354},[1002,139072,139073],{"class":1008}," 'street': '1st Street'\n",[1002,139075,139076],{"class":1004,"line":1360},[1002,139077,139078],{"class":1008}," 'city': 'Austin',\n",[1002,139080,139081],{"class":1004,"line":1366},[1002,139082,139083],{"class":1008}," 'state': 'TX'\n",[1002,139085,139086],{"class":1004,"line":1946},[1002,139087,139088],{"class":1008}," 'zipCode': 'Hello World'\n",[1002,139090,139091],{"class":1004,"line":1956},[1002,139092,1170],{"class":1008},[1002,139094,139095],{"class":1004,"line":1961},[1002,139096,139097],{"class":1008},"*\u002F\n",[925,139099,139100],{},"How can this be? Our validation has raised an error! Why are the attributes still changed? As mentioned, Backbone.js does not copy model attributes; it simply returns whatever you’re asking for. So, as you might guess, if you ask for an object, you will get a reference to that object, and any manipulation to the object will directly manipulate the actual object in the model. This can quickly lead you down a very dark rabbit hole that can take you hours of debugging to diagnose.",[925,139102,139103],{},"This issue catches developers who are new to Backbone.js and even seasoned JavaScript developers off guard. This issue has been heavily discussed in the GitHub issues section of Backbone.js. As Jeremy Ashkenas points out there, performing a deep copy is a very difficult problem to solve, and it can become an expensive operation for very large, deep objects.",[925,139105,139106,139107,139110,139111,139114,139115,139118,139119,139122,139123,139125,139126,139128],{},"Luckily, jQuery provides an implementation of deep copying, ",[941,139108,139109],{},"$.``extend",". As an aside, Underscore.js, a dependency of Backbone.js, provides the ",[941,139112,139113],{},"_.extend ","function, but I would avoid using it because it does not perform a deep copy. Lo-Dash, a forked and optimized version of Underscore.js, provides a ",[941,139116,139117],{},"_.clone ","function with the option to perform a deep copy. However, I use ",[941,139120,139121],{},"$.extend"," to perform a deep copy of any object that I ",[941,139124,138661],{}," from a model using the following syntax. Remember to pass ",[941,139127,17397],{},", so that it performs a deep copy of the object.",[993,139130,139132],{"className":995,"code":139131,"language":997,"meta":998,"style":998},"var address = $.extend(true, {}, person.address);\n",[941,139133,139134],{"__ignoreMap":998},[1002,139135,139136,139138,139140,139142,139144,139146,139148,139150],{"class":1004,"line":1005},[1002,139137,18311],{"class":1015},[1002,139139,138994],{"class":1030},[1002,139141,2393],{"class":1015},[1002,139143,138399],{"class":1030},[1002,139145,106592],{"class":1026},[1002,139147,1031],{"class":1030},[1002,139149,17397],{"class":1019},[1002,139151,139152],{"class":1030},", {}, person.address);\n",[925,139154,139155,139156,139158],{},"We now have an exact copy of the ",[941,139157,14271],{}," object, and we can modify it to our heart’s content without worrying about modifying the actual model. You should be aware that this pattern works for the above example because all of the members of the address object are immutable(numbers, strings, etc.), and that while the above example works you should use caution when deep copying objects that contain objects. You should also know that there is a small performance hit from performing a deep copy, but I have never seen this cause noticeable problems. However, if you’re deep copying massive objects or thousands of objects all at once, you’ll likely want to do some performance profiling. This leads us directly to the next pattern.",[953,139160,139162],{"id":139161},"store-data-not-persisted-by-the-server","Store Data Not Persisted By The Server",[925,139164,139165,139166,58549],{},"Although Backbone.js prescribes that models and collections map to representational state transfer (or REST-ful) endpoints, you will sometimes find that you want to store data in your models or collections that are not persisted on the server. Many other articles about Backbone.js, such as *Backbone.js Tips: Lessons From the Trenches” by Prateek Dayal of SupportBee, describe this pattern. Let’s look at a quick example to help explain where this might come in handy. Suppose you have a ",[941,139167,1530],{},[993,139169,139171],{"className":37880,"code":139170,"language":383,"meta":998,"style":998},"\u003Cul>\n \u003Cli>\u003Ca href=\"#\" data-id=\"1\">One\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"#\" data-id=\"2\">Two\u003C\u002Fa>\u003C\u002Fli>\n . . .\n \u003Cli>\u003Ca href=\"#\" data-id=\"n\">n\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n",[941,139172,139173,139181,139215,139249,139254,139288],{"__ignoreMap":998},[1002,139174,139175,139177,139179],{"class":1004,"line":1005},[1002,139176,6539],{"class":1030},[1002,139178,1530],{"class":15711},[1002,139180,15703],{"class":1030},[1002,139182,139183,139185,139187,139189,139191,139193,139195,139197,139200,139202,139204,139207,139209,139211,139213],{"class":1004,"line":1012},[1002,139184,22427],{"class":1030},[1002,139186,974],{"class":15711},[1002,139188,124048],{"class":1030},[1002,139190,933],{"class":15711},[1002,139192,47182],{"class":1026},[1002,139194,2393],{"class":1030},[1002,139196,126965],{"class":1034},[1002,139198,139199],{"class":1026}," data-id",[1002,139201,2393],{"class":1030},[1002,139203,127544],{"class":1034},[1002,139205,139206],{"class":1030},">One\u003C\u002F",[1002,139208,933],{"class":15711},[1002,139210,22081],{"class":1030},[1002,139212,974],{"class":15711},[1002,139214,15703],{"class":1030},[1002,139216,139217,139219,139221,139223,139225,139227,139229,139231,139233,139235,139238,139241,139243,139245,139247],{"class":1004,"line":1047},[1002,139218,22427],{"class":1030},[1002,139220,974],{"class":15711},[1002,139222,124048],{"class":1030},[1002,139224,933],{"class":15711},[1002,139226,47182],{"class":1026},[1002,139228,2393],{"class":1030},[1002,139230,126965],{"class":1034},[1002,139232,139199],{"class":1026},[1002,139234,2393],{"class":1030},[1002,139236,139237],{"class":1034},"\"2\"",[1002,139239,139240],{"class":1030},">Two\u003C\u002F",[1002,139242,933],{"class":15711},[1002,139244,22081],{"class":1030},[1002,139246,974],{"class":15711},[1002,139248,15703],{"class":1030},[1002,139250,139251],{"class":1004,"line":1054},[1002,139252,139253],{"class":1030}," . . .\n",[1002,139255,139256,139258,139260,139262,139264,139266,139268,139270,139272,139274,139277,139280,139282,139284,139286],{"class":1004,"line":1060},[1002,139257,22427],{"class":1030},[1002,139259,974],{"class":15711},[1002,139261,124048],{"class":1030},[1002,139263,933],{"class":15711},[1002,139265,47182],{"class":1026},[1002,139267,2393],{"class":1030},[1002,139269,126965],{"class":1034},[1002,139271,139199],{"class":1026},[1002,139273,2393],{"class":1030},[1002,139275,139276],{"class":1034},"\"n\"",[1002,139278,139279],{"class":1030},">n\u003C\u002F",[1002,139281,933],{"class":15711},[1002,139283,22081],{"class":1030},[1002,139285,974],{"class":15711},[1002,139287,15703],{"class":1030},[1002,139289,139290,139292,139294],{"class":1004,"line":1272},[1002,139291,22437],{"class":1030},[1002,139293,1530],{"class":15711},[1002,139295,15703],{"class":1030},[925,139297,139298,139299,139301,139302,139305],{},"Where ",[941,139300,25415],{}," is 200 and when the user clicks on one of the items, that item becomes selected and is visualized to the user as the chosen item by a ",[941,139303,139304],{},"selected","class being added. One approach to this would be the following:",[993,139307,139309],{"className":995,"code":139308,"language":997,"meta":998,"style":998},"var Model = Backbone.Model.extend({\n defaults: {\n items: [\n {\n name: 'One',\n id: 1,\n },\n {\n name: 'Two',\n id: 2,\n },\n {\n name: 'Three',\n id: 3,\n },\n ],\n },\n});\n\nvar View = Backbone.View.extend({\n template: _.template($('#list-template').html()),\n\n events: {\n '#items li a': 'setSelectedItem',\n },\n\n render: function () {\n $(this.el).html(this.template(this.model.toJSON()));\n },\n\n setSelectedItem: function (event) {\n var selectedItem = $(event.currentTarget);\n \u002F\u002F Set all of the items to not have the selected class\n $('#items li a').removeClass('selected');\n selectedItem.addClass('selected');\n return false;\n },\n});\n",[941,139310,139311,139326,139330,139335,139339,139348,139357,139361,139365,139374,139382,139386,139390,139399,139407,139411,139415,139419,139423,139427,139442,139464,139468,139473,139485,139489,139493,139503,139536,139540,139544,139559,139573,139578,139598,139611,139619,139623],{"__ignoreMap":998},[1002,139312,139313,139315,139318,139320,139322,139324],{"class":1004,"line":1005},[1002,139314,18311],{"class":1015},[1002,139316,139317],{"class":1030}," Model ",[1002,139319,2393],{"class":1015},[1002,139321,115611],{"class":1030},[1002,139323,106592],{"class":1026},[1002,139325,2756],{"class":1030},[1002,139327,139328],{"class":1004,"line":1012},[1002,139329,138036],{"class":1030},[1002,139331,139332],{"class":1004,"line":1047},[1002,139333,139334],{"class":1030}," items: [\n",[1002,139336,139337],{"class":1004,"line":1054},[1002,139338,1336],{"class":1030},[1002,139340,139341,139343,139346],{"class":1004,"line":1060},[1002,139342,138281],{"class":1030},[1002,139344,139345],{"class":1034},"'One'",[1002,139347,1143],{"class":1030},[1002,139349,139350,139353,139355],{"class":1004,"line":1272},[1002,139351,139352],{"class":1030}," id: ",[1002,139354,6211],{"class":1019},[1002,139356,1143],{"class":1030},[1002,139358,139359],{"class":1004,"line":1348},[1002,139360,1922],{"class":1030},[1002,139362,139363],{"class":1004,"line":1354},[1002,139364,1336],{"class":1030},[1002,139366,139367,139369,139372],{"class":1004,"line":1360},[1002,139368,138281],{"class":1030},[1002,139370,139371],{"class":1034},"'Two'",[1002,139373,1143],{"class":1030},[1002,139375,139376,139378,139380],{"class":1004,"line":1366},[1002,139377,139352],{"class":1030},[1002,139379,5681],{"class":1019},[1002,139381,1143],{"class":1030},[1002,139383,139384],{"class":1004,"line":1946},[1002,139385,1922],{"class":1030},[1002,139387,139388],{"class":1004,"line":1956},[1002,139389,1336],{"class":1030},[1002,139391,139392,139394,139397],{"class":1004,"line":1961},[1002,139393,138281],{"class":1030},[1002,139395,139396],{"class":1034},"'Three'",[1002,139398,1143],{"class":1030},[1002,139400,139401,139403,139405],{"class":1004,"line":1971},[1002,139402,139352],{"class":1030},[1002,139404,2796],{"class":1019},[1002,139406,1143],{"class":1030},[1002,139408,139409],{"class":1004,"line":1980},[1002,139410,1922],{"class":1030},[1002,139412,139413],{"class":1004,"line":1985},[1002,139414,33564],{"class":1030},[1002,139416,139417],{"class":1004,"line":1995},[1002,139418,1502],{"class":1030},[1002,139420,139421],{"class":1004,"line":2006},[1002,139422,2804],{"class":1030},[1002,139424,139425],{"class":1004,"line":2011},[1002,139426,1051],{"emptyLinePlaceholder":1050},[1002,139428,139429,139431,139434,139436,139438,139440],{"class":1004,"line":2017},[1002,139430,18311],{"class":1015},[1002,139432,139433],{"class":1030}," View ",[1002,139435,2393],{"class":1015},[1002,139437,129185],{"class":1030},[1002,139439,106592],{"class":1026},[1002,139441,2756],{"class":1030},[1002,139443,139444,139446,139448,139450,139452,139454,139457,139459,139461],{"class":1004,"line":2022},[1002,139445,129334],{"class":1030},[1002,139447,129337],{"class":1026},[1002,139449,1031],{"class":1030},[1002,139451,15864],{"class":1026},[1002,139453,1031],{"class":1030},[1002,139455,139456],{"class":1034},"'#list-template'",[1002,139458,1539],{"class":1030},[1002,139460,383],{"class":1026},[1002,139462,139463],{"class":1030},"()),\n",[1002,139465,139466],{"class":1004,"line":2442},[1002,139467,1051],{"emptyLinePlaceholder":1050},[1002,139469,139470],{"class":1004,"line":2466},[1002,139471,139472],{"class":1030}," events: {\n",[1002,139474,139475,139478,139480,139483],{"class":1004,"line":2471},[1002,139476,139477],{"class":1034}," '#items li a'",[1002,139479,1137],{"class":1030},[1002,139481,139482],{"class":1034},"'setSelectedItem'",[1002,139484,1143],{"class":1030},[1002,139486,139487],{"class":1004,"line":2476},[1002,139488,1502],{"class":1030},[1002,139490,139491],{"class":1004,"line":2481},[1002,139492,1051],{"emptyLinePlaceholder":1050},[1002,139494,139495,139497,139499,139501],{"class":1004,"line":2491},[1002,139496,20201],{"class":1026},[1002,139498,1137],{"class":1030},[1002,139500,6965],{"class":1015},[1002,139502,9772],{"class":1030},[1002,139504,139505,139507,139509,139511,139514,139516,139518,139520,139522,139524,139526,139528,139531,139533],{"class":1004,"line":2502},[1002,139506,109906],{"class":1026},[1002,139508,1031],{"class":1030},[1002,139510,3455],{"class":1019},[1002,139512,139513],{"class":1030},".el).",[1002,139515,383],{"class":1026},[1002,139517,1031],{"class":1030},[1002,139519,3455],{"class":1019},[1002,139521,948],{"class":1030},[1002,139523,129337],{"class":1026},[1002,139525,1031],{"class":1030},[1002,139527,3455],{"class":1019},[1002,139529,139530],{"class":1030},".model.",[1002,139532,60633],{"class":1026},[1002,139534,139535],{"class":1030},"()));\n",[1002,139537,139538],{"class":1004,"line":2513},[1002,139539,1502],{"class":1030},[1002,139541,139542],{"class":1004,"line":2535},[1002,139543,1051],{"emptyLinePlaceholder":1050},[1002,139545,139546,139549,139551,139553,139555,139557],{"class":1004,"line":2557},[1002,139547,139548],{"class":1026}," setSelectedItem",[1002,139550,1137],{"class":1030},[1002,139552,6965],{"class":1015},[1002,139554,6513],{"class":1030},[1002,139556,16696],{"class":2378},[1002,139558,2382],{"class":1030},[1002,139560,139561,139563,139566,139568,139570],{"class":1004,"line":2562},[1002,139562,51906],{"class":1015},[1002,139564,139565],{"class":1030}," selectedItem ",[1002,139567,2393],{"class":1015},[1002,139569,110094],{"class":1026},[1002,139571,139572],{"class":1030},"(event.currentTarget);\n",[1002,139574,139575],{"class":1004,"line":2567},[1002,139576,139577],{"class":1008}," \u002F\u002F Set all of the items to not have the selected class\n",[1002,139579,139580,139582,139584,139587,139589,139591,139593,139596],{"class":1004,"line":2572},[1002,139581,109906],{"class":1026},[1002,139583,1031],{"class":1030},[1002,139585,139586],{"class":1034},"'#items li a'",[1002,139588,1539],{"class":1030},[1002,139590,109916],{"class":1026},[1002,139592,1031],{"class":1030},[1002,139594,139595],{"class":1034},"'selected'",[1002,139597,1085],{"class":1030},[1002,139599,139600,139603,139605,139607,139609],{"class":1004,"line":2582},[1002,139601,139602],{"class":1030}," selectedItem.",[1002,139604,109936],{"class":1026},[1002,139606,1031],{"class":1030},[1002,139608,139595],{"class":1034},[1002,139610,1085],{"class":1030},[1002,139612,139613,139615,139617],{"class":1004,"line":2594},[1002,139614,2687],{"class":1015},[1002,139616,13166],{"class":1019},[1002,139618,1407],{"class":1030},[1002,139620,139621],{"class":1004,"line":2603},[1002,139622,1502],{"class":1030},[1002,139624,139625],{"class":1004,"line":2619},[1002,139626,2804],{"class":1030},[993,139628,139630],{"className":37880,"code":139629,"language":383,"meta":998,"style":998},"\u003Cscript id=\"list-template\" type=\"template\">\n \u003Cul id=\"items\">\n \u003C% for(i = items.length - 1; i >= 0; i--) { %>\n \u003Cli>\n \u003Ca href=\"#\" data-id=\"\u003C%= item[i].id %>\">\u003C%= item[i].name %>\u003C\u002Fa>\u003C\u002Fli>\n \u003C% } %>\u003C\u002Ful>\n\u003C\u002Fscript>\n",[941,139631,139632,139654,139659,139664,139669,139674,139679],{"__ignoreMap":998},[1002,139633,139634,139636,139638,139640,139642,139645,139647,139649,139652],{"class":1004,"line":1005},[1002,139635,6539],{"class":1030},[1002,139637,22063],{"class":15711},[1002,139639,21489],{"class":1026},[1002,139641,2393],{"class":1030},[1002,139643,139644],{"class":1034},"\"list-template\"",[1002,139646,29274],{"class":1026},[1002,139648,2393],{"class":1030},[1002,139650,139651],{"class":1034},"\"template\"",[1002,139653,15703],{"class":1030},[1002,139655,139656],{"class":1004,"line":1012},[1002,139657,139658],{"class":1030}," \u003Cul id=\"items\">\n",[1002,139660,139661],{"class":1004,"line":1047},[1002,139662,139663],{"class":1030}," \u003C% for(i = items.length - 1; i >= 0; i--) { %>\n",[1002,139665,139666],{"class":1004,"line":1054},[1002,139667,139668],{"class":1030}," \u003Cli>\n",[1002,139670,139671],{"class":1004,"line":1060},[1002,139672,139673],{"class":1030}," \u003Ca href=\"#\" data-id=\"\u003C%= item[i].id %>\">\u003C%= item[i].name %>\u003C\u002Fa>\u003C\u002Fli>\n",[1002,139675,139676],{"class":1004,"line":1272},[1002,139677,139678],{"class":1030}," \u003C% } %>\u003C\u002Ful>\n",[1002,139680,139681,139683,139685],{"class":1004,"line":1348},[1002,139682,22437],{"class":1030},[1002,139684,22063],{"class":15711},[1002,139686,15703],{"class":1030},[925,139688,139689],{},"Now let’s say we want to figure out which item has been selected. One way would be to traverse the list. But if the list is really long, this could become quite an expensive task. Therefore, let’s also store which item is selected when the user clicks on a list item.",[993,139691,139693],{"className":995,"code":139692,"language":997,"meta":998,"style":998},"var View = Backbone.View.extend({\n initialize: function(options) {\n \u002F\u002F Re-render when the model changes\n this.model.on('change:items', this.render, this);\n },\n\n template: _.template($('#list-template').html()),\n\n events: {\n \"#items li a\": \"setSelectedItem\"\n },\n\n render: function() {\n $(this.el).html(this.template(this.model.toJSON()));\n },\n\n setSelectedItem: function(event) {\n var selectedItem = $(event.currentTarget);\n \u002F\u002F Set all of the items to not have the selected class\n $('#items li a').removeClass('selected');\n selectedItem.addClass('selected');\n \u002F\u002F Store a reference to what item was selected\n this.selectedItemId = selectedItem.data('id'));\n return false;\n }\n});\n",[941,139694,139695,139709,139724,139729,139752,139756,139760,139781,139785,139790,139800,139804,139808,139819,139849,139853,139857,139872,139884,139889,139907,139920,139925,139945,139953,139957],{"__ignoreMap":998},[1002,139696,139697,139699,139701,139703,139705,139707],{"class":1004,"line":1005},[1002,139698,18311],{"class":1015},[1002,139700,139433],{"class":1030},[1002,139702,2393],{"class":1015},[1002,139704,129185],{"class":1030},[1002,139706,106592],{"class":1026},[1002,139708,2756],{"class":1030},[1002,139710,139711,139714,139716,139718,139720,139722],{"class":1004,"line":1012},[1002,139712,139713],{"class":1026}," initialize",[1002,139715,1137],{"class":1030},[1002,139717,6965],{"class":1015},[1002,139719,1031],{"class":1030},[1002,139721,2379],{"class":2378},[1002,139723,2382],{"class":1030},[1002,139725,139726],{"class":1004,"line":1047},[1002,139727,139728],{"class":1008}," \u002F\u002F Re-render when the model changes\n",[1002,139730,139731,139733,139735,139737,139739,139742,139744,139746,139748,139750],{"class":1004,"line":1054},[1002,139732,2622],{"class":1019},[1002,139734,139530],{"class":1030},[1002,139736,43148],{"class":1026},[1002,139738,1031],{"class":1030},[1002,139740,139741],{"class":1034},"'change:items'",[1002,139743,1251],{"class":1030},[1002,139745,3455],{"class":1019},[1002,139747,129220],{"class":1030},[1002,139749,3455],{"class":1019},[1002,139751,1085],{"class":1030},[1002,139753,139754],{"class":1004,"line":1060},[1002,139755,15108],{"class":1030},[1002,139757,139758],{"class":1004,"line":1272},[1002,139759,1051],{"emptyLinePlaceholder":1050},[1002,139761,139762,139765,139767,139769,139771,139773,139775,139777,139779],{"class":1004,"line":1348},[1002,139763,139764],{"class":1030}," template: _.",[1002,139766,129337],{"class":1026},[1002,139768,1031],{"class":1030},[1002,139770,15864],{"class":1026},[1002,139772,1031],{"class":1030},[1002,139774,139456],{"class":1034},[1002,139776,1539],{"class":1030},[1002,139778,383],{"class":1026},[1002,139780,139463],{"class":1030},[1002,139782,139783],{"class":1004,"line":1354},[1002,139784,1051],{"emptyLinePlaceholder":1050},[1002,139786,139787],{"class":1004,"line":1360},[1002,139788,139789],{"class":1030}," events: {\n",[1002,139791,139792,139795,139797],{"class":1004,"line":1366},[1002,139793,139794],{"class":1034}," \"#items li a\"",[1002,139796,1137],{"class":1030},[1002,139798,139799],{"class":1034},"\"setSelectedItem\"\n",[1002,139801,139802],{"class":1004,"line":1946},[1002,139803,15108],{"class":1030},[1002,139805,139806],{"class":1004,"line":1956},[1002,139807,1051],{"emptyLinePlaceholder":1050},[1002,139809,139810,139813,139815,139817],{"class":1004,"line":1961},[1002,139811,139812],{"class":1026}," render",[1002,139814,1137],{"class":1030},[1002,139816,6965],{"class":1015},[1002,139818,3025],{"class":1030},[1002,139820,139821,139823,139825,139827,139829,139831,139833,139835,139837,139839,139841,139843,139845,139847],{"class":1004,"line":1971},[1002,139822,110016],{"class":1026},[1002,139824,1031],{"class":1030},[1002,139826,3455],{"class":1019},[1002,139828,139513],{"class":1030},[1002,139830,383],{"class":1026},[1002,139832,1031],{"class":1030},[1002,139834,3455],{"class":1019},[1002,139836,948],{"class":1030},[1002,139838,129337],{"class":1026},[1002,139840,1031],{"class":1030},[1002,139842,3455],{"class":1019},[1002,139844,139530],{"class":1030},[1002,139846,60633],{"class":1026},[1002,139848,139535],{"class":1030},[1002,139850,139851],{"class":1004,"line":1980},[1002,139852,15108],{"class":1030},[1002,139854,139855],{"class":1004,"line":1985},[1002,139856,1051],{"emptyLinePlaceholder":1050},[1002,139858,139859,139862,139864,139866,139868,139870],{"class":1004,"line":1995},[1002,139860,139861],{"class":1026}," setSelectedItem",[1002,139863,1137],{"class":1030},[1002,139865,6965],{"class":1015},[1002,139867,1031],{"class":1030},[1002,139869,16696],{"class":2378},[1002,139871,2382],{"class":1030},[1002,139873,139874,139876,139878,139880,139882],{"class":1004,"line":2006},[1002,139875,74620],{"class":1015},[1002,139877,139565],{"class":1030},[1002,139879,2393],{"class":1015},[1002,139881,110094],{"class":1026},[1002,139883,139572],{"class":1030},[1002,139885,139886],{"class":1004,"line":2011},[1002,139887,139888],{"class":1008}," \u002F\u002F Set all of the items to not have the selected class\n",[1002,139890,139891,139893,139895,139897,139899,139901,139903,139905],{"class":1004,"line":2017},[1002,139892,110016],{"class":1026},[1002,139894,1031],{"class":1030},[1002,139896,139586],{"class":1034},[1002,139898,1539],{"class":1030},[1002,139900,109916],{"class":1026},[1002,139902,1031],{"class":1030},[1002,139904,139595],{"class":1034},[1002,139906,1085],{"class":1030},[1002,139908,139909,139912,139914,139916,139918],{"class":1004,"line":2022},[1002,139910,139911],{"class":1030}," selectedItem.",[1002,139913,109936],{"class":1026},[1002,139915,1031],{"class":1030},[1002,139917,139595],{"class":1034},[1002,139919,1085],{"class":1030},[1002,139921,139922],{"class":1004,"line":2442},[1002,139923,139924],{"class":1008}," \u002F\u002F Store a reference to what item was selected\n",[1002,139926,139927,139929,139932,139934,139937,139939,139941,139943],{"class":1004,"line":2466},[1002,139928,2622],{"class":1019},[1002,139930,139931],{"class":1030},".selectedItemId ",[1002,139933,2393],{"class":1015},[1002,139935,139936],{"class":1030}," selectedItem.",[1002,139938,16648],{"class":1026},[1002,139940,1031],{"class":1030},[1002,139942,116036],{"class":1034},[1002,139944,5663],{"class":1030},[1002,139946,139947,139949,139951],{"class":1004,"line":2471},[1002,139948,8341],{"class":1015},[1002,139950,13166],{"class":1019},[1002,139952,1407],{"class":1030},[1002,139954,139955],{"class":1004,"line":2476},[1002,139956,2014],{"class":1030},[1002,139958,139959],{"class":1004,"line":2481},[1002,139960,2804],{"class":1030},[925,139962,139963],{},"Now we can now easily determine which item has been selected, and we don’t have to traverse the Document Object Model (DOM). This pattern is extremely useful for storing extraneous data that you might want to keep track of; keep in mind also that you can create models and collections that don’t necessarily have endpoints associated with them to store extraneous view data.",[925,139965,139966],{},"The downsides to this pattern are that if you store extraneous data in your models or collections, they won’t follow a RESTful architecture since they won’t map perfectly to a Web resource; also, this pattern can cause a bit of bloat in your objects; and it can cause a bit of pain when saving your models if your endpoint strictly accepts only the JSON it expects.",[925,139968,139969],{},"You may be asking yourself, *How do I determine if I should put the extra data in the view or the model?”. If the extra attributes you’re adding are centred around rendering, such as the height of a container, they should probably be added to the view. If the attributes have anything to do with the underlying data model, then you may want to push that into the model. For example, if the above example were more fleshed out and for some reason I only wanted users to be able to select a specific range of items from the list of items returned by the model, I would likely push that logic into the model. In short, as most things go, it depends on the situation. You can argue for keeping your models truly faithful to REST and you can argue that you should keep your views as dumb as possible and push as much logic into your models.",[953,139971,139973],{"id":139972},"render-parts-of-views-instead-of-entire-views","Render Parts Of Views Instead Of Entire Views",[925,139975,139976],{},"When you first begin developing Backbone.js applications, your views will typically be structured something like this:",[993,139978,139980],{"className":995,"code":139979,"language":997,"meta":998,"style":998},"var View = Backbone.View.extend({\n initialize: function(options) {\n this.model.on('change', this.render, this);\n },\n\n template: _.template($(‘#template’).html()),\n\n render: function() {\n this.$el.html(template(this.model.toJSON());\n $(‘#a’, this.$el).html(this.model.get(‘a’));\n $(‘#b’, this.$el).html(this.model.get(‘b’));\n }\n});\n",[941,139981,139982,139996,140010,140032,140036,140040,140057,140061,140071,140093,140118,140142,140146],{"__ignoreMap":998},[1002,139983,139984,139986,139988,139990,139992,139994],{"class":1004,"line":1005},[1002,139985,18311],{"class":1015},[1002,139987,139433],{"class":1030},[1002,139989,2393],{"class":1015},[1002,139991,129185],{"class":1030},[1002,139993,106592],{"class":1026},[1002,139995,2756],{"class":1030},[1002,139997,139998,140000,140002,140004,140006,140008],{"class":1004,"line":1012},[1002,139999,139713],{"class":1026},[1002,140001,1137],{"class":1030},[1002,140003,6965],{"class":1015},[1002,140005,1031],{"class":1030},[1002,140007,2379],{"class":2378},[1002,140009,2382],{"class":1030},[1002,140011,140012,140014,140016,140018,140020,140022,140024,140026,140028,140030],{"class":1004,"line":1047},[1002,140013,2622],{"class":1019},[1002,140015,139530],{"class":1030},[1002,140017,43148],{"class":1026},[1002,140019,1031],{"class":1030},[1002,140021,48501],{"class":1034},[1002,140023,1251],{"class":1030},[1002,140025,3455],{"class":1019},[1002,140027,129220],{"class":1030},[1002,140029,3455],{"class":1019},[1002,140031,1085],{"class":1030},[1002,140033,140034],{"class":1004,"line":1054},[1002,140035,15108],{"class":1030},[1002,140037,140038],{"class":1004,"line":1060},[1002,140039,1051],{"emptyLinePlaceholder":1050},[1002,140041,140042,140044,140046,140048,140050,140053,140055],{"class":1004,"line":1272},[1002,140043,139764],{"class":1030},[1002,140045,129337],{"class":1026},[1002,140047,1031],{"class":1030},[1002,140049,15864],{"class":1026},[1002,140051,140052],{"class":1030},"(‘#template’).",[1002,140054,383],{"class":1026},[1002,140056,139463],{"class":1030},[1002,140058,140059],{"class":1004,"line":1348},[1002,140060,1051],{"emptyLinePlaceholder":1050},[1002,140062,140063,140065,140067,140069],{"class":1004,"line":1354},[1002,140064,139812],{"class":1026},[1002,140066,1137],{"class":1030},[1002,140068,6965],{"class":1015},[1002,140070,3025],{"class":1030},[1002,140072,140073,140075,140077,140079,140081,140083,140085,140087,140089,140091],{"class":1004,"line":1360},[1002,140074,2622],{"class":1019},[1002,140076,129245],{"class":1030},[1002,140078,383],{"class":1026},[1002,140080,1031],{"class":1030},[1002,140082,129337],{"class":1026},[1002,140084,1031],{"class":1030},[1002,140086,3455],{"class":1019},[1002,140088,139530],{"class":1030},[1002,140090,60633],{"class":1026},[1002,140092,3885],{"class":1030},[1002,140094,140095,140097,140100,140102,140105,140107,140109,140111,140113,140115],{"class":1004,"line":1366},[1002,140096,110016],{"class":1026},[1002,140098,140099],{"class":1030},"(‘#a’, ",[1002,140101,3455],{"class":1019},[1002,140103,140104],{"class":1030},".$el).",[1002,140106,383],{"class":1026},[1002,140108,1031],{"class":1030},[1002,140110,3455],{"class":1019},[1002,140112,139530],{"class":1030},[1002,140114,8070],{"class":1026},[1002,140116,140117],{"class":1030},"(‘a’));\n",[1002,140119,140120,140122,140125,140127,140129,140131,140133,140135,140137,140139],{"class":1004,"line":1946},[1002,140121,110016],{"class":1026},[1002,140123,140124],{"class":1030},"(‘#b’, ",[1002,140126,3455],{"class":1019},[1002,140128,140104],{"class":1030},[1002,140130,383],{"class":1026},[1002,140132,1031],{"class":1030},[1002,140134,3455],{"class":1019},[1002,140136,139530],{"class":1030},[1002,140138,8070],{"class":1026},[1002,140140,140141],{"class":1030},"(‘b’));\n",[1002,140143,140144],{"class":1004,"line":1956},[1002,140145,2014],{"class":1030},[1002,140147,140148],{"class":1004,"line":1961},[1002,140149,2804],{"class":1030},[925,140151,140152],{},"Here, any change to your model will trigger a complete re-rendering of the view. I was a practitioner of this pattern when I first began developing with Backbone.js. But as my view code grew in price, I quickly realized that this approach was not maintainable or optimal because the view was being completely re-rendered when any attribute of the model changed.",[925,140154,140155,140156,140160],{},"When I ran into this problem, I did a quick Google search to see what others had done and found Ian Storm Taylor’s blog post, *",[933,140157,140159],{"href":140158},"http:\u002F\u002Fianstormtaylor.com\u002Fbreak-apart-your-backbonejs-render-methods\u002F","Break Apart Your Backbone.js Render Methods",",” in which he describes listening for individual attribute changes in the model and then re-rendering only the part of the view corresponding to the changed attribute. Taylor also describes returning a reference to the object so that the individual rendering functions can be easily chained together. The example above now transforms into something much more maintainable and performant because we are only updating portions of the view that correspond to the model attributes that have changed.",[993,140162,140164],{"className":995,"code":140163,"language":997,"meta":998,"style":998},"var View = Backbone.View.extend({\n initialize: function(options) {\n this.model.on('change:a', this.renderA, this);\n this.model.on('change:b', this.renderB, this);\n },\n\n renderA: function() {\n $(‘#a’, this.$el).html(this.model.get(‘a’));\n return this;\n },\n\n renderB: function() {\n $(‘#b’, this.$el).html(this.model.get(‘b’));\n return this;\n },\n\n render: function() {\n this\n .renderA()\n .renderB();\n }\n});\n",[941,140165,140166,140180,140194,140218,140242,140246,140250,140261,140283,140291,140295,140299,140310,140332,140340,140344,140348,140358,140363,140373,140382,140386],{"__ignoreMap":998},[1002,140167,140168,140170,140172,140174,140176,140178],{"class":1004,"line":1005},[1002,140169,18311],{"class":1015},[1002,140171,139433],{"class":1030},[1002,140173,2393],{"class":1015},[1002,140175,129185],{"class":1030},[1002,140177,106592],{"class":1026},[1002,140179,2756],{"class":1030},[1002,140181,140182,140184,140186,140188,140190,140192],{"class":1004,"line":1012},[1002,140183,139713],{"class":1026},[1002,140185,1137],{"class":1030},[1002,140187,6965],{"class":1015},[1002,140189,1031],{"class":1030},[1002,140191,2379],{"class":2378},[1002,140193,2382],{"class":1030},[1002,140195,140196,140198,140200,140202,140204,140207,140209,140211,140214,140216],{"class":1004,"line":1047},[1002,140197,2622],{"class":1019},[1002,140199,139530],{"class":1030},[1002,140201,43148],{"class":1026},[1002,140203,1031],{"class":1030},[1002,140205,140206],{"class":1034},"'change:a'",[1002,140208,1251],{"class":1030},[1002,140210,3455],{"class":1019},[1002,140212,140213],{"class":1030},".renderA, ",[1002,140215,3455],{"class":1019},[1002,140217,1085],{"class":1030},[1002,140219,140220,140222,140224,140226,140228,140231,140233,140235,140238,140240],{"class":1004,"line":1054},[1002,140221,2622],{"class":1019},[1002,140223,139530],{"class":1030},[1002,140225,43148],{"class":1026},[1002,140227,1031],{"class":1030},[1002,140229,140230],{"class":1034},"'change:b'",[1002,140232,1251],{"class":1030},[1002,140234,3455],{"class":1019},[1002,140236,140237],{"class":1030},".renderB, ",[1002,140239,3455],{"class":1019},[1002,140241,1085],{"class":1030},[1002,140243,140244],{"class":1004,"line":1060},[1002,140245,15108],{"class":1030},[1002,140247,140248],{"class":1004,"line":1272},[1002,140249,1051],{"emptyLinePlaceholder":1050},[1002,140251,140252,140255,140257,140259],{"class":1004,"line":1348},[1002,140253,140254],{"class":1026}," renderA",[1002,140256,1137],{"class":1030},[1002,140258,6965],{"class":1015},[1002,140260,3025],{"class":1030},[1002,140262,140263,140265,140267,140269,140271,140273,140275,140277,140279,140281],{"class":1004,"line":1354},[1002,140264,110016],{"class":1026},[1002,140266,140099],{"class":1030},[1002,140268,3455],{"class":1019},[1002,140270,140104],{"class":1030},[1002,140272,383],{"class":1026},[1002,140274,1031],{"class":1030},[1002,140276,3455],{"class":1019},[1002,140278,139530],{"class":1030},[1002,140280,8070],{"class":1026},[1002,140282,140117],{"class":1030},[1002,140284,140285,140287,140289],{"class":1004,"line":1360},[1002,140286,8341],{"class":1015},[1002,140288,2693],{"class":1019},[1002,140290,1407],{"class":1030},[1002,140292,140293],{"class":1004,"line":1366},[1002,140294,15108],{"class":1030},[1002,140296,140297],{"class":1004,"line":1946},[1002,140298,1051],{"emptyLinePlaceholder":1050},[1002,140300,140301,140304,140306,140308],{"class":1004,"line":1956},[1002,140302,140303],{"class":1026}," renderB",[1002,140305,1137],{"class":1030},[1002,140307,6965],{"class":1015},[1002,140309,3025],{"class":1030},[1002,140311,140312,140314,140316,140318,140320,140322,140324,140326,140328,140330],{"class":1004,"line":1961},[1002,140313,110016],{"class":1026},[1002,140315,140124],{"class":1030},[1002,140317,3455],{"class":1019},[1002,140319,140104],{"class":1030},[1002,140321,383],{"class":1026},[1002,140323,1031],{"class":1030},[1002,140325,3455],{"class":1019},[1002,140327,139530],{"class":1030},[1002,140329,8070],{"class":1026},[1002,140331,140141],{"class":1030},[1002,140333,140334,140336,140338],{"class":1004,"line":1971},[1002,140335,8341],{"class":1015},[1002,140337,2693],{"class":1019},[1002,140339,1407],{"class":1030},[1002,140341,140342],{"class":1004,"line":1980},[1002,140343,15108],{"class":1030},[1002,140345,140346],{"class":1004,"line":1985},[1002,140347,1051],{"emptyLinePlaceholder":1050},[1002,140349,140350,140352,140354,140356],{"class":1004,"line":1995},[1002,140351,139812],{"class":1026},[1002,140353,1137],{"class":1030},[1002,140355,6965],{"class":1015},[1002,140357,3025],{"class":1030},[1002,140359,140360],{"class":1004,"line":2006},[1002,140361,140362],{"class":1019}," this\n",[1002,140364,140365,140368,140371],{"class":1004,"line":2011},[1002,140366,140367],{"class":1030}," .",[1002,140369,140370],{"class":1026},"renderA",[1002,140372,17202],{"class":1030},[1002,140374,140375,140377,140380],{"class":1004,"line":2017},[1002,140376,140367],{"class":1030},[1002,140378,140379],{"class":1026},"renderB",[1002,140381,1428],{"class":1030},[1002,140383,140384],{"class":1004,"line":2022},[1002,140385,2014],{"class":1030},[1002,140387,140388],{"class":1004,"line":2442},[1002,140389,2804],{"class":1030},[925,140391,140392,140393,2034,140398,140403],{},"I should mention that many plugins, such as ",[933,140394,140397],{"href":140395,"rel":140396},"http:\u002F\u002Fnytimes.github.io\u002Fbackbone.stickit\u002F",[937],"Backbone.StickIt",[933,140399,140402],{"href":140400,"rel":140401},"https:\u002F\u002Fgithub.com\u002Ftheironcook\u002FBackbone.ModelBinder",[937],"Backbone.ModelBinder\u003C",", provide key-value bindings between model attributes and view elements, which can save you from a lot of boilerplate code. So, check them out if you have complex form fields.",[1655,140405,140407],{"id":140406},"keep-models-agnostic-to-views","Keep Models Agnostic To Views",[925,140409,140410,140411,140416,140417,2034,140422,140427],{},"As Jeremy Ashkenas points out in one of Backbone.js ",[933,140412,140415],{"href":140413,"rel":140414},"https:\u002F\u002Fgithub.com\u002Fdocumentcloud\u002Fbackbone\u002Fissues\u002F21",[937],"GitHub issues",", Backbone.js doesn’t enforce any real separation of concerns between the data and view layer, except that models are not created with a reference to their view. Because Backbone.js doesn’t enforce a separation of concerns, should you? I and many other Backbone.js developers, such as ",[933,140418,140421],{"href":140419,"rel":140420},"http:\u002F\u002Fozkatz.github.io\u002Favoiding-common-backbonejs-pitfalls.html",[937],"Oz Katz",[933,140423,140426],{"href":140424,"rel":140425},"https:\u002F\u002Fsupportbee.com\u002Fdevblog\u002F2011\u002F07\u002F29\u002Fbackbone-js-tips-lessons-from-the-trenches\u002F",[937],"Dayal",", believe the answer is overwhelmingly yes: Models and collections, the data layer, should be entirely agnostic of the views that are bound to them, keeping a clear separation of concerns. If you don’t follow a separation of concerns, your codebase could quickly turn into spaghetti code, and no one likes spaghetti code.",[925,140429,140430],{},"Keeping your data layer completely agnostic to the view layer allows for a more modular, reusable and maintainable codebase. You can easily reuse and extend models and collections throughout your application without concern for the views that are tying into them. Following this pattern enables developers who are new to your project to quickly dive into the code base, because they will know exactly where rendering takes place and where all of the business logic of your application should live.",[925,140432,140433,140434,140439],{},"This pattern also enforces the ",[933,140435,140438],{"href":140436,"rel":140437},"http:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSingle_responsibility_principle",[937],"single responsibility principle",", which dictates that each class should have a single responsibility, and its responsibility should be encapsulated in the class since your models and collections should handle data and your views should handle rendering.",[1655,140441,140443],{"id":140442},"parameter-mapping-in-routers","Parameter Mapping In Routers",[925,140445,140446,140447,2034,140449,140451],{},"The best way to demonstrate how this pattern came about is through an example. Let’s say you have some sort of search page, and that the search page allows users to add two different filter types, ",[941,140448,16521],{},[941,140450,30895],{},", each of which has a multitude of options. Therefore, your URL structure would start off looking something like this:",[993,140453,140455],{"className":995,"code":140454,"language":997,"meta":998,"style":998},"'search\u002F:foo';\n'search\u002F:bar';\n'search\u002F:foo\u002F:bar';\n",[941,140456,140457,140464,140471],{"__ignoreMap":998},[1002,140458,140459,140462],{"class":1004,"line":1005},[1002,140460,140461],{"class":1034},"'search\u002F:foo'",[1002,140463,1407],{"class":1030},[1002,140465,140466,140469],{"class":1004,"line":1012},[1002,140467,140468],{"class":1034},"'search\u002F:bar'",[1002,140470,1407],{"class":1030},[1002,140472,140473,140476],{"class":1004,"line":1047},[1002,140474,140475],{"class":1034},"'search\u002F:foo\u002F:bar'",[1002,140477,1407],{"class":1030},[925,140479,140480,140481,140484,140485,948],{},"Now, all of these routes use the same view and model, so you would ideally like them all to use the same function, ",[941,140482,140483],{},"search()",". However, if you examine Backbone.js, there isn’t any sort of parameter mapping; the parameters are just plopped into the function from left to right. So, for them all to use the same function, you would end up creating different functions to correctly map the parameters to ",[941,140486,140483],{},[993,140488,140490],{"className":995,"code":140489,"language":997,"meta":998,"style":998},"routes: {\n 'search\u002F:foo': 'searchFoo',\n 'search\u002F:bar': 'searchBar',\n 'search\u002F:foo\u002F:bar': 'search'\n},\n\nsearch: function(foo, bar) {\n},\n\n\u002F\u002F I know this function will actually still map correctly, but for explanatory purposes, it's left in.\nsearchFoo: function(foo) {\n this.search(foo, undefined);\n},\n\nsearchBar: function(bar) {\n this.search(undefined, bar);\n},\n",[941,140491,140492,140498,140510,140522,140532,140536,140540,140559,140563,140567,140572,140587,140601,140605,140609,140624,140639],{"__ignoreMap":998},[1002,140493,140494,140496],{"class":1004,"line":1005},[1002,140495,69694],{"class":1026},[1002,140497,15354],{"class":1030},[1002,140499,140500,140503,140505,140508],{"class":1004,"line":1012},[1002,140501,140502],{"class":1034}," 'search\u002F:foo'",[1002,140504,1137],{"class":1030},[1002,140506,140507],{"class":1034},"'searchFoo'",[1002,140509,1143],{"class":1030},[1002,140511,140512,140515,140517,140520],{"class":1004,"line":1047},[1002,140513,140514],{"class":1034}," 'search\u002F:bar'",[1002,140516,1137],{"class":1030},[1002,140518,140519],{"class":1034},"'searchBar'",[1002,140521,1143],{"class":1030},[1002,140523,140524,140527,140529],{"class":1004,"line":1054},[1002,140525,140526],{"class":1034}," 'search\u002F:foo\u002F:bar'",[1002,140528,1137],{"class":1030},[1002,140530,140531],{"class":1034},"'search'\n",[1002,140533,140534],{"class":1004,"line":1060},[1002,140535,3492],{"class":1030},[1002,140537,140538],{"class":1004,"line":1272},[1002,140539,1051],{"emptyLinePlaceholder":1050},[1002,140541,140542,140545,140547,140549,140551,140553,140555,140557],{"class":1004,"line":1348},[1002,140543,140544],{"class":1026},"search",[1002,140546,1137],{"class":1030},[1002,140548,6965],{"class":1015},[1002,140550,1031],{"class":1030},[1002,140552,16521],{"class":2378},[1002,140554,1251],{"class":1030},[1002,140556,30895],{"class":2378},[1002,140558,2382],{"class":1030},[1002,140560,140561],{"class":1004,"line":1354},[1002,140562,3492],{"class":1030},[1002,140564,140565],{"class":1004,"line":1360},[1002,140566,1051],{"emptyLinePlaceholder":1050},[1002,140568,140569],{"class":1004,"line":1366},[1002,140570,140571],{"class":1008},"\u002F\u002F I know this function will actually still map correctly, but for explanatory purposes, it's left in.\n",[1002,140573,140574,140577,140579,140581,140583,140585],{"class":1004,"line":1946},[1002,140575,140576],{"class":1026},"searchFoo",[1002,140578,1137],{"class":1030},[1002,140580,6965],{"class":1015},[1002,140582,1031],{"class":1030},[1002,140584,16521],{"class":2378},[1002,140586,2382],{"class":1030},[1002,140588,140589,140591,140593,140595,140597,140599],{"class":1004,"line":1956},[1002,140590,2387],{"class":1019},[1002,140592,948],{"class":1030},[1002,140594,140544],{"class":1026},[1002,140596,101757],{"class":1030},[1002,140598,31012],{"class":1019},[1002,140600,1085],{"class":1030},[1002,140602,140603],{"class":1004,"line":1961},[1002,140604,3492],{"class":1030},[1002,140606,140607],{"class":1004,"line":1971},[1002,140608,1051],{"emptyLinePlaceholder":1050},[1002,140610,140611,140614,140616,140618,140620,140622],{"class":1004,"line":1980},[1002,140612,140613],{"class":1026},"searchBar",[1002,140615,1137],{"class":1030},[1002,140617,6965],{"class":1015},[1002,140619,1031],{"class":1030},[1002,140621,30895],{"class":2378},[1002,140623,2382],{"class":1030},[1002,140625,140626,140628,140630,140632,140634,140636],{"class":1004,"line":1985},[1002,140627,2387],{"class":1019},[1002,140629,948],{"class":1030},[1002,140631,140544],{"class":1026},[1002,140633,1031],{"class":1030},[1002,140635,31012],{"class":1019},[1002,140637,140638],{"class":1030},", bar);\n",[1002,140640,140641],{"class":1004,"line":1995},[1002,140642,3492],{"class":1030},[925,140644,140645],{},"As you can imagine, this pattern could quickly bloat your routers. When I first ran into this problem, I attempted to do some parsing of the actual function definitions with regular expressions to *magically” map the parameters, which would have worked — but only if I had followed specific constraints. So, I scrapped the idea (I might still throw this into a Backbone plugin sometime).",[925,140647,140648],{},"The code above now transforms into something much more maintainable:",[993,140650,140652],{"className":995,"code":140651,"language":997,"meta":998,"style":998},"routes: {\n 'base\u002F:foo': 'search',\n 'base\u002F:bar': 'search',\n 'base\u002F:foo\u002F:bar': 'search'\n},\n\nsearch: function() {\n var foo, bar, i;\n\n for(i = arguments.length - 1; i >= 0; i--) {\n\n if(arguments[i] === 'something to determine foo') {\n foo = arguments[i];\n continue;\n }\n else if(arguments[i] === 'something to determine bar') {\n bar = arguments[i];\n continue;\n }\n }\n},\n",[941,140653,140654,140660,140671,140682,140691,140695,140699,140709,140716,140720,140751,140755,140773,140785,140792,140796,140816,140827,140833,140837,140841],{"__ignoreMap":998},[1002,140655,140656,140658],{"class":1004,"line":1005},[1002,140657,69694],{"class":1026},[1002,140659,15354],{"class":1030},[1002,140661,140662,140665,140667,140669],{"class":1004,"line":1012},[1002,140663,140664],{"class":1034}," 'base\u002F:foo'",[1002,140666,1137],{"class":1030},[1002,140668,73708],{"class":1034},[1002,140670,1143],{"class":1030},[1002,140672,140673,140676,140678,140680],{"class":1004,"line":1047},[1002,140674,140675],{"class":1034}," 'base\u002F:bar'",[1002,140677,1137],{"class":1030},[1002,140679,73708],{"class":1034},[1002,140681,1143],{"class":1030},[1002,140683,140684,140687,140689],{"class":1004,"line":1054},[1002,140685,140686],{"class":1034}," 'base\u002F:foo\u002F:bar'",[1002,140688,1137],{"class":1030},[1002,140690,140531],{"class":1034},[1002,140692,140693],{"class":1004,"line":1060},[1002,140694,3492],{"class":1030},[1002,140696,140697],{"class":1004,"line":1272},[1002,140698,1051],{"emptyLinePlaceholder":1050},[1002,140700,140701,140703,140705,140707],{"class":1004,"line":1348},[1002,140702,140544],{"class":1026},[1002,140704,1137],{"class":1030},[1002,140706,6965],{"class":1015},[1002,140708,3025],{"class":1030},[1002,140710,140711,140713],{"class":1004,"line":1354},[1002,140712,51906],{"class":1015},[1002,140714,140715],{"class":1030}," foo, bar, i;\n",[1002,140717,140718],{"class":1004,"line":1360},[1002,140719,1051],{"emptyLinePlaceholder":1050},[1002,140721,140722,140724,140726,140728,140730,140732,140734,140736,140738,140740,140743,140745,140747,140749],{"class":1004,"line":1366},[1002,140723,6841],{"class":1015},[1002,140725,100133],{"class":1030},[1002,140727,2393],{"class":1015},[1002,140729,39074],{"class":1019},[1002,140731,948],{"class":1030},[1002,140733,5873],{"class":1019},[1002,140735,39112],{"class":1015},[1002,140737,6246],{"class":1019},[1002,140739,6536],{"class":1030},[1002,140741,140742],{"class":1015},">=",[1002,140744,4910],{"class":1019},[1002,140746,16128],{"class":1030},[1002,140748,39127],{"class":1015},[1002,140750,2382],{"class":1030},[1002,140752,140753],{"class":1004,"line":1946},[1002,140754,1051],{"emptyLinePlaceholder":1050},[1002,140756,140757,140759,140761,140763,140766,140768,140771],{"class":1004,"line":1956},[1002,140758,7347],{"class":1015},[1002,140760,1031],{"class":1030},[1002,140762,31403],{"class":1019},[1002,140764,140765],{"class":1030},"[i] ",[1002,140767,2892],{"class":1015},[1002,140769,140770],{"class":1034}," 'something to determine foo'",[1002,140772,2382],{"class":1030},[1002,140774,140775,140778,140780,140782],{"class":1004,"line":1961},[1002,140776,140777],{"class":1030}," foo ",[1002,140779,2393],{"class":1015},[1002,140781,39074],{"class":1019},[1002,140783,140784],{"class":1030},"[i];\n",[1002,140786,140787,140790],{"class":1004,"line":1971},[1002,140788,140789],{"class":1015}," continue",[1002,140791,1407],{"class":1030},[1002,140793,140794],{"class":1004,"line":1980},[1002,140795,7377],{"class":1030},[1002,140797,140798,140801,140803,140805,140807,140809,140811,140814],{"class":1004,"line":1985},[1002,140799,140800],{"class":1015}," else",[1002,140802,6063],{"class":1015},[1002,140804,1031],{"class":1030},[1002,140806,31403],{"class":1019},[1002,140808,140765],{"class":1030},[1002,140810,2892],{"class":1015},[1002,140812,140813],{"class":1034}," 'something to determine bar'",[1002,140815,2382],{"class":1030},[1002,140817,140818,140821,140823,140825],{"class":1004,"line":1995},[1002,140819,140820],{"class":1030}," bar ",[1002,140822,2393],{"class":1015},[1002,140824,39074],{"class":1019},[1002,140826,140784],{"class":1030},[1002,140828,140829,140831],{"class":1004,"line":2006},[1002,140830,140789],{"class":1015},[1002,140832,1407],{"class":1030},[1002,140834,140835],{"class":1004,"line":2011},[1002,140836,7377],{"class":1030},[1002,140838,140839],{"class":1004,"line":2017},[1002,140840,2014],{"class":1030},[1002,140842,140843],{"class":1004,"line":2022},[1002,140844,3492],{"class":1030},[925,140846,140847,140848,140851],{},"This pattern can drastically reduce router bloat. However, be aware that it will not work for parameters that are not distinguishable. For example, if you had two parameters that were both IDs and followed the pattern ",[941,140849,140850],{},"XXXX-XXXX",", you would not be able to identify which ID corresponded to which parameter.",[1655,140853,140855],{"id":140854},"modelfetch-wont-clear-your-model","model.fetch() Won’t Clear Your Model",[925,140857,140858,140859,140862,140863,1251,140865,2034,140867,140869,140870,129362,140872,140874,140875,140877,140878,2034,140880,140882],{},"This usually trips up those who are new to Backbone.js: ",[941,140860,140861],{},"model.fetch()"," will not clear out your model, but rather extends the attributes of your model. Therefore, if your model has attributes ",[941,140864,77056],{},[941,140866,50723],{},[941,140868,96494],{}," and your fetch returns ",[941,140871,50723],{},[941,140873,96494],{},", then ",[941,140876,77056],{}," will still be in the model and only ",[941,140879,50723],{},[941,140881,96494],{}," will be updated. The following example visualizes this concept.",[993,140884,140886],{"className":995,"code":140885,"language":997,"meta":998,"style":998},"var Model = Backbone.Model.extend({\n defaults: {\n x: 1,\n y: 1,\n z: 1,\n },\n});\nvar model = new Model();\n\u002F* model.attributes yields\n{\n x: 1,\n y: 1,\n z: 1\n} *\u002F\nmodel.fetch();\n\u002F* let’s assume that the endpoint returns this\n{\n y: 2,\n z: 2,\n} *\u002F\n\u002F* model.attributes now yields\n{\n x: 1,\n y: 2,\n z: 2\n} *\u002F\n",[941,140887,140888,140902,140906,140915,140924,140933,140937,140941,140956,140961,140965,140970,140975,140980,140985,140994,140999,141003,141008,141013,141017,141022,141026,141030,141034,141039],{"__ignoreMap":998},[1002,140889,140890,140892,140894,140896,140898,140900],{"class":1004,"line":1005},[1002,140891,18311],{"class":1015},[1002,140893,139317],{"class":1030},[1002,140895,2393],{"class":1015},[1002,140897,115611],{"class":1030},[1002,140899,106592],{"class":1026},[1002,140901,2756],{"class":1030},[1002,140903,140904],{"class":1004,"line":1012},[1002,140905,138036],{"class":1030},[1002,140907,140908,140911,140913],{"class":1004,"line":1047},[1002,140909,140910],{"class":1030}," x: ",[1002,140912,6211],{"class":1019},[1002,140914,1143],{"class":1030},[1002,140916,140917,140920,140922],{"class":1004,"line":1054},[1002,140918,140919],{"class":1030}," y: ",[1002,140921,6211],{"class":1019},[1002,140923,1143],{"class":1030},[1002,140925,140926,140929,140931],{"class":1004,"line":1060},[1002,140927,140928],{"class":1030}," z: ",[1002,140930,6211],{"class":1019},[1002,140932,1143],{"class":1030},[1002,140934,140935],{"class":1004,"line":1272},[1002,140936,1502],{"class":1030},[1002,140938,140939],{"class":1004,"line":1348},[1002,140940,2804],{"class":1030},[1002,140942,140943,140945,140948,140950,140952,140954],{"class":1004,"line":1354},[1002,140944,18311],{"class":1015},[1002,140946,140947],{"class":1030}," model ",[1002,140949,2393],{"class":1015},[1002,140951,2690],{"class":1015},[1002,140953,117363],{"class":1026},[1002,140955,1428],{"class":1030},[1002,140957,140958],{"class":1004,"line":1360},[1002,140959,140960],{"class":1008},"\u002F* model.attributes yields\n",[1002,140962,140963],{"class":1004,"line":1366},[1002,140964,1129],{"class":1008},[1002,140966,140967],{"class":1004,"line":1946},[1002,140968,140969],{"class":1008}," x: 1,\n",[1002,140971,140972],{"class":1004,"line":1956},[1002,140973,140974],{"class":1008}," y: 1,\n",[1002,140976,140977],{"class":1004,"line":1961},[1002,140978,140979],{"class":1008}," z: 1\n",[1002,140981,140982],{"class":1004,"line":1971},[1002,140983,140984],{"class":1008},"} *\u002F\n",[1002,140986,140987,140990,140992],{"class":1004,"line":1980},[1002,140988,140989],{"class":1030},"model.",[1002,140991,49123],{"class":1026},[1002,140993,1428],{"class":1030},[1002,140995,140996],{"class":1004,"line":1985},[1002,140997,140998],{"class":1008},"\u002F* let’s assume that the endpoint returns this\n",[1002,141000,141001],{"class":1004,"line":1995},[1002,141002,1129],{"class":1008},[1002,141004,141005],{"class":1004,"line":2006},[1002,141006,141007],{"class":1008}," y: 2,\n",[1002,141009,141010],{"class":1004,"line":2011},[1002,141011,141012],{"class":1008}," z: 2,\n",[1002,141014,141015],{"class":1004,"line":2017},[1002,141016,140984],{"class":1008},[1002,141018,141019],{"class":1004,"line":2022},[1002,141020,141021],{"class":1008},"\u002F* model.attributes now yields\n",[1002,141023,141024],{"class":1004,"line":2442},[1002,141025,1129],{"class":1008},[1002,141027,141028],{"class":1004,"line":2466},[1002,141029,140969],{"class":1008},[1002,141031,141032],{"class":1004,"line":2471},[1002,141033,141007],{"class":1008},[1002,141035,141036],{"class":1004,"line":2476},[1002,141037,141038],{"class":1008}," z: 2\n",[1002,141040,141041],{"class":1004,"line":2481},[1002,141042,140984],{"class":1008},[1655,141044,141046],{"id":141045},"puts-require-an-id-attribute","PUTs Require An ID Attribute",[925,141048,141049,141050,141055,141056,141059],{},"This one also usually trips up those who are new to Backbone.js. To have your models send a ",[933,141051,141054],{"href":141052,"rel":141053},"http:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FHypertext_Transfer_Protocol#Request_methods",[937],"HTTP PUT"," request when you call ",[941,141057,141058],{},".save()",", your model is required to have an ID attribute set. Remember that the HTTP PUT verb is designed to be an update, so it makes sense that to send a PUT request, your model is required to have an ID. In an ideal world, all of your models would have a perfect ID attribute named ID, but the JSON data that you receive from your endpoints will likely not always have perfectly named IDs.",[925,141061,141062,141063,141066,141067,948],{},"Therefore, if you need to update a model, be sure that an ID is on the model before saving it. Backbone.js versions 0.5 and greater allow you to change the name of the ID attribute of your models using ",[941,141064,141065],{},"idAttribute",", in case your endpoint doesn’t return IDs named ",[941,141068,19767],{},[925,141070,141071,141072,141074,141075,948],{},"If are stuck using a version of Backbone.js lower than 0.5, I suggest that you modify the ",[941,141073,7783],{}," function of your collection or model to map your expected ID attribute to the attribute ID. Here’s a quick example of how you can achieve this by modifying your parse function. Let’s imagine you have a collection of cars whose IDs are ",[941,141076,141077],{},"carID",[993,141079,141081],{"className":995,"code":141080,"language":997,"meta":998,"style":998},"parse: function(response) {\n\n _.each(response.cars, function(car, i) {\n \u002F\u002F map the returned ID of carID to the correct attribute ID\n response.cars[i].id = response.cars[i].carID;\n });\n\n return response;\n},```\n\n### Model Data On Page Load\n\nSometimes you will find that your models or collections need to be initialized with data on page load. Many articles about Backbone.js patterns, such as Rico Sta Cruz’ *Backbone Patterns” and Katz’ *Avoiding Common Backbone.js Pitfalls,” discuss this pattern. This pattern is easily achieved by inlining a script on the page and rendering out the data in either single-model attributes or JSON, using the server-side language of your choice. For example, in Rails, I use one of the following:\n\n```js\n\u002F\u002F a single attribute\nvar model = new Model({\n hello:\n});\n\u002F\u002F or to have JSON\nvar model = new Model();\n",[941,141082,141083,141097,141101,141122,141127,141137,141141,141145,141151,141159,141163,141168,141172,141177,141181,141189,141194,141208,141213,141217,141222],{"__ignoreMap":998},[1002,141084,141085,141087,141089,141091,141093,141095],{"class":1004,"line":1005},[1002,141086,7783],{"class":1026},[1002,141088,1137],{"class":1030},[1002,141090,6965],{"class":1015},[1002,141092,1031],{"class":1030},[1002,141094,28368],{"class":2378},[1002,141096,2382],{"class":1030},[1002,141098,141099],{"class":1004,"line":1012},[1002,141100,1051],{"emptyLinePlaceholder":1050},[1002,141102,141103,141105,141107,141110,141112,141114,141116,141118,141120],{"class":1004,"line":1047},[1002,141104,52889],{"class":1030},[1002,141106,6633],{"class":1026},[1002,141108,141109],{"class":1030},"(response.cars, ",[1002,141111,6965],{"class":1015},[1002,141113,1031],{"class":1030},[1002,141115,71461],{"class":2378},[1002,141117,1251],{"class":1030},[1002,141119,12031],{"class":2378},[1002,141121,2382],{"class":1030},[1002,141123,141124],{"class":1004,"line":1054},[1002,141125,141126],{"class":1008}," \u002F\u002F map the returned ID of carID to the correct attribute ID\n",[1002,141128,141129,141132,141134],{"class":1004,"line":1060},[1002,141130,141131],{"class":1030}," response.cars[i].id ",[1002,141133,2393],{"class":1015},[1002,141135,141136],{"class":1030}," response.cars[i].carID;\n",[1002,141138,141139],{"class":1004,"line":1272},[1002,141140,8353],{"class":1030},[1002,141142,141143],{"class":1004,"line":1348},[1002,141144,1051],{"emptyLinePlaceholder":1050},[1002,141146,141147,141149],{"class":1004,"line":1354},[1002,141148,2687],{"class":1015},[1002,141150,74769],{"class":1030},[1002,141152,141153,141156],{"class":1004,"line":1360},[1002,141154,141155],{"class":1030},"},",[1002,141157,141158],{"class":1034},"```\n",[1002,141160,141161],{"class":1004,"line":1366},[1002,141162,1051],{"emptyLinePlaceholder":1050},[1002,141164,141165],{"class":1004,"line":1946},[1002,141166,141167],{"class":1034},"### Model Data On Page Load\n",[1002,141169,141170],{"class":1004,"line":1956},[1002,141171,1051],{"emptyLinePlaceholder":1050},[1002,141173,141174],{"class":1004,"line":1961},[1002,141175,141176],{"class":1034},"Sometimes you will find that your models or collections need to be initialized with data on page load. Many articles about Backbone.js patterns, such as Rico Sta Cruz’ *Backbone Patterns” and Katz’ *Avoiding Common Backbone.js Pitfalls,” discuss this pattern. This pattern is easily achieved by inlining a script on the page and rendering out the data in either single-model attributes or JSON, using the server-side language of your choice. For example, in Rails, I use one of the following:\n",[1002,141178,141179],{"class":1004,"line":1971},[1002,141180,1051],{"emptyLinePlaceholder":1050},[1002,141182,141183,141186],{"class":1004,"line":1980},[1002,141184,141185],{"class":1034},"```",[1002,141187,141188],{"class":1030},"js\n",[1002,141190,141191],{"class":1004,"line":1985},[1002,141192,141193],{"class":1008},"\u002F\u002F a single attribute\n",[1002,141195,141196,141198,141200,141202,141204,141206],{"class":1004,"line":1995},[1002,141197,18311],{"class":1015},[1002,141199,140947],{"class":1030},[1002,141201,2393],{"class":1015},[1002,141203,2690],{"class":1015},[1002,141205,117363],{"class":1026},[1002,141207,2756],{"class":1030},[1002,141209,141210],{"class":1004,"line":2006},[1002,141211,141212],{"class":1030}," hello:\n",[1002,141214,141215],{"class":1004,"line":2011},[1002,141216,2804],{"class":1030},[1002,141218,141219],{"class":1004,"line":2017},[1002,141220,141221],{"class":1008},"\u002F\u002F or to have JSON\n",[1002,141223,141224,141226,141228,141230,141232,141234],{"class":1004,"line":2022},[1002,141225,18311],{"class":1015},[1002,141227,140947],{"class":1030},[1002,141229,2393],{"class":1015},[1002,141231,2690],{"class":1015},[1002,141233,117363],{"class":1026},[1002,141235,1428],{"class":1030},[925,141237,141238],{},"Using this pattern could improve your search engine rankings by *instantly” rendering out your page, and it could drastically shorten the time it takes for your application to be up and running by limiting the application’s initial HTTP requests.",[953,141240,141242],{"id":141241},"handling-failed-model-attribute-validation","Handling Failed Model Attribute Validation",[925,141244,141245],{},"Very often, you will want to know what model attributes have failed validation. For example, if you have an extremely complex form field, you might want to know which model attribute has failed validation so that you can highlight the input field corresponding to the attribute. Unfortunately, alerting your views as to which model attributes have failed validation is not directly baked into Backbone.js, but you can use a few different pattern to handle this.",[953,141247,141249],{"id":141248},"return-an-error-object","RETURN AN ERROR OBJECT",[925,141251,141252],{},"One pattern to notify your views of which model attributes have failed validation is to pass back an object with some sort of flag detailing which attribute has failed validation, such as the following:",[993,141254,141256],{"className":995,"code":141255,"language":997,"meta":998,"style":998},"\u002F\u002F Inside your model\nvalidate: function(attrs) {\n var errors = [];\n\n if(attrs.a \u003C 0) {\n errors.push({\n 'message': 'Form field a is messed up!',\n 'class': 'a'\n });\n }\n if(attrs.b \u003C 0) {\n errors.push({\n 'message': 'Form field b is messed up!',\n 'class': 'b'\n });\n }\n\n if(errors.length) {\n return errors;\n }\n}\n\n\u002F\u002F Inside your view\nthis.model.on('invalid’, function(model, errors) {\n _.each(errors, function(error, i) {\n $(‘.’ + error.class).addClass('error');\n alert(error.message);\n });\n});\n",[941,141257,141258,141263,141279,141290,141294,141307,141316,141328,141338,141342,141346,141359,141367,141378,141387,141391,141395,141399,141410,141417,141421,141425,141429,141434,141449,141470,141490,141498,141502],{"__ignoreMap":998},[1002,141259,141260],{"class":1004,"line":1005},[1002,141261,141262],{"class":1008},"\u002F\u002F Inside your model\n",[1002,141264,141265,141268,141270,141272,141274,141277],{"class":1004,"line":1012},[1002,141266,141267],{"class":1026},"validate",[1002,141269,1137],{"class":1030},[1002,141271,6965],{"class":1015},[1002,141273,1031],{"class":1030},[1002,141275,141276],{"class":2378},"attrs",[1002,141278,2382],{"class":1030},[1002,141280,141281,141283,141286,141288],{"class":1004,"line":1047},[1002,141282,51906],{"class":1015},[1002,141284,141285],{"class":1030}," errors ",[1002,141287,2393],{"class":1015},[1002,141289,4924],{"class":1030},[1002,141291,141292],{"class":1004,"line":1054},[1002,141293,1051],{"emptyLinePlaceholder":1050},[1002,141295,141296,141298,141301,141303,141305],{"class":1004,"line":1060},[1002,141297,4368],{"class":1015},[1002,141299,141300],{"class":1030},"(attrs.a ",[1002,141302,6539],{"class":1015},[1002,141304,4910],{"class":1019},[1002,141306,2382],{"class":1030},[1002,141308,141309,141312,141314],{"class":1004,"line":1272},[1002,141310,141311],{"class":1030}," errors.",[1002,141313,4974],{"class":1026},[1002,141315,2756],{"class":1030},[1002,141317,141318,141321,141323,141326],{"class":1004,"line":1348},[1002,141319,141320],{"class":1034}," 'message'",[1002,141322,1137],{"class":1030},[1002,141324,141325],{"class":1034},"'Form field a is messed up!'",[1002,141327,1143],{"class":1030},[1002,141329,141330,141333,141335],{"class":1004,"line":1354},[1002,141331,141332],{"class":1034}," 'class'",[1002,141334,1137],{"class":1030},[1002,141336,141337],{"class":1034},"'a'\n",[1002,141339,141340],{"class":1004,"line":1360},[1002,141341,49109],{"class":1030},[1002,141343,141344],{"class":1004,"line":1366},[1002,141345,2014],{"class":1030},[1002,141347,141348,141350,141353,141355,141357],{"class":1004,"line":1946},[1002,141349,4368],{"class":1015},[1002,141351,141352],{"class":1030},"(attrs.b ",[1002,141354,6539],{"class":1015},[1002,141356,4910],{"class":1019},[1002,141358,2382],{"class":1030},[1002,141360,141361,141363,141365],{"class":1004,"line":1956},[1002,141362,141311],{"class":1030},[1002,141364,4974],{"class":1026},[1002,141366,2756],{"class":1030},[1002,141368,141369,141371,141373,141376],{"class":1004,"line":1961},[1002,141370,141320],{"class":1034},[1002,141372,1137],{"class":1030},[1002,141374,141375],{"class":1034},"'Form field b is messed up!'",[1002,141377,1143],{"class":1030},[1002,141379,141380,141382,141384],{"class":1004,"line":1971},[1002,141381,141332],{"class":1034},[1002,141383,1137],{"class":1030},[1002,141385,141386],{"class":1034},"'b'\n",[1002,141388,141389],{"class":1004,"line":1980},[1002,141390,49109],{"class":1030},[1002,141392,141393],{"class":1004,"line":1985},[1002,141394,2014],{"class":1030},[1002,141396,141397],{"class":1004,"line":1995},[1002,141398,1051],{"emptyLinePlaceholder":1050},[1002,141400,141401,141403,141406,141408],{"class":1004,"line":2006},[1002,141402,4368],{"class":1015},[1002,141404,141405],{"class":1030},"(errors.",[1002,141407,5873],{"class":1019},[1002,141409,2382],{"class":1030},[1002,141411,141412,141414],{"class":1004,"line":2011},[1002,141413,8341],{"class":1015},[1002,141415,141416],{"class":1030}," errors;\n",[1002,141418,141419],{"class":1004,"line":2017},[1002,141420,2014],{"class":1030},[1002,141422,141423],{"class":1004,"line":2022},[1002,141424,1170],{"class":1030},[1002,141426,141427],{"class":1004,"line":2442},[1002,141428,1051],{"emptyLinePlaceholder":1050},[1002,141430,141431],{"class":1004,"line":2466},[1002,141432,141433],{"class":1008},"\u002F\u002F Inside your view\n",[1002,141435,141436,141438,141440,141442,141444,141447],{"class":1004,"line":2471},[1002,141437,3455],{"class":1019},[1002,141439,139530],{"class":1030},[1002,141441,43148],{"class":1026},[1002,141443,1031],{"class":1030},[1002,141445,141446],{"class":1034},"'invalid’, function(model, errors) ",[1002,141448,1129],{"class":18541},[1002,141450,141451,141453,141455,141458,141460,141462,141464,141466,141468],{"class":1004,"line":2476},[1002,141452,52889],{"class":1030},[1002,141454,6633],{"class":1026},[1002,141456,141457],{"class":1030},"(errors, ",[1002,141459,6965],{"class":1015},[1002,141461,1031],{"class":1030},[1002,141463,25064],{"class":2378},[1002,141465,1251],{"class":1030},[1002,141467,12031],{"class":2378},[1002,141469,2382],{"class":1030},[1002,141471,141472,141474,141477,141479,141482,141484,141486,141488],{"class":1004,"line":2481},[1002,141473,110016],{"class":1026},[1002,141475,141476],{"class":1030},"(‘.’ ",[1002,141478,5064],{"class":1015},[1002,141480,141481],{"class":1030}," error.class).",[1002,141483,109936],{"class":1026},[1002,141485,1031],{"class":1030},[1002,141487,111413],{"class":1034},[1002,141489,1085],{"class":1030},[1002,141491,141492,141495],{"class":1004,"line":2491},[1002,141493,141494],{"class":1026}," alert",[1002,141496,141497],{"class":1030},"(error.message);\n",[1002,141499,141500],{"class":1004,"line":2502},[1002,141501,8353],{"class":1030},[1002,141503,141504],{"class":1004,"line":2513},[1002,141505,2804],{"class":1030},[925,141507,141508,141509,16529,141512,141514],{},"The advantage of this pattern is that you are handling all invalid messages in one location. The disadvantage is that your invalid method could become a large",[941,141510,141511],{},"switch",[941,141513,46126],{}," statement if you deal with invalid attributes differently.",[953,141516,141518],{"id":141517},"broadcast-custom-error-event","BROADCAST CUSTOM ERROR EVENT",[925,141520,141521],{},"An alternative pattern, suggested by a friend of mine, Derick Bailey, is to trigger custom errors events for each model attribute. This allows your views to bind to specific error events for individual attributes:",[993,141523,141525],{"className":995,"code":141524,"language":997,"meta":998,"style":998},"\u002F\u002F Inside your model\nvalidate: function(attrs) {\n\n if(attrs.a \u003C 0) {\n this.trigger(‘invalid:a’, 'Form field a is messed up!', this);\n }\n if(attrs.b \u003C 0) {\n this.trigger(‘invalid:b’, 'Form field b is messed up!', this);\n }\n}\n\n\u002F\u002F Inside your view\nthis.model.on('invalid:a’, function(error) {\n $(‘a’).addClass('error');\n alert(error);\n});\n\nthis.model.on('invalid:b’, function(error) {\n $(‘b’).addClass('error');\n alert(error);\n});\n",[941,141526,141527,141531,141545,141549,141561,141581,141585,141597,141616,141620,141624,141628,141632,141647,141662,141668,141672,141676,141691,141706,141712],{"__ignoreMap":998},[1002,141528,141529],{"class":1004,"line":1005},[1002,141530,141262],{"class":1008},[1002,141532,141533,141535,141537,141539,141541,141543],{"class":1004,"line":1012},[1002,141534,141267],{"class":1026},[1002,141536,1137],{"class":1030},[1002,141538,6965],{"class":1015},[1002,141540,1031],{"class":1030},[1002,141542,141276],{"class":2378},[1002,141544,2382],{"class":1030},[1002,141546,141547],{"class":1004,"line":1047},[1002,141548,1051],{"emptyLinePlaceholder":1050},[1002,141550,141551,141553,141555,141557,141559],{"class":1004,"line":1054},[1002,141552,4368],{"class":1015},[1002,141554,141300],{"class":1030},[1002,141556,6539],{"class":1015},[1002,141558,4910],{"class":1019},[1002,141560,2382],{"class":1030},[1002,141562,141563,141566,141568,141570,141573,141575,141577,141579],{"class":1004,"line":1060},[1002,141564,141565],{"class":1019}," this",[1002,141567,948],{"class":1030},[1002,141569,116181],{"class":1026},[1002,141571,141572],{"class":1030},"(‘invalid:a’, ",[1002,141574,141325],{"class":1034},[1002,141576,1251],{"class":1030},[1002,141578,3455],{"class":1019},[1002,141580,1085],{"class":1030},[1002,141582,141583],{"class":1004,"line":1272},[1002,141584,2014],{"class":1030},[1002,141586,141587,141589,141591,141593,141595],{"class":1004,"line":1348},[1002,141588,4368],{"class":1015},[1002,141590,141352],{"class":1030},[1002,141592,6539],{"class":1015},[1002,141594,4910],{"class":1019},[1002,141596,2382],{"class":1030},[1002,141598,141599,141601,141603,141605,141608,141610,141612,141614],{"class":1004,"line":1354},[1002,141600,141565],{"class":1019},[1002,141602,948],{"class":1030},[1002,141604,116181],{"class":1026},[1002,141606,141607],{"class":1030},"(‘invalid:b’, ",[1002,141609,141375],{"class":1034},[1002,141611,1251],{"class":1030},[1002,141613,3455],{"class":1019},[1002,141615,1085],{"class":1030},[1002,141617,141618],{"class":1004,"line":1360},[1002,141619,2014],{"class":1030},[1002,141621,141622],{"class":1004,"line":1366},[1002,141623,1170],{"class":1030},[1002,141625,141626],{"class":1004,"line":1946},[1002,141627,1051],{"emptyLinePlaceholder":1050},[1002,141629,141630],{"class":1004,"line":1956},[1002,141631,141433],{"class":1008},[1002,141633,141634,141636,141638,141640,141642,141645],{"class":1004,"line":1961},[1002,141635,3455],{"class":1019},[1002,141637,139530],{"class":1030},[1002,141639,43148],{"class":1026},[1002,141641,1031],{"class":1030},[1002,141643,141644],{"class":1034},"'invalid:a’, function(error) ",[1002,141646,1129],{"class":18541},[1002,141648,141649,141651,141654,141656,141658,141660],{"class":1004,"line":1971},[1002,141650,110016],{"class":1026},[1002,141652,141653],{"class":1030},"(‘a’).",[1002,141655,109936],{"class":1026},[1002,141657,1031],{"class":1030},[1002,141659,111413],{"class":1034},[1002,141661,1085],{"class":1030},[1002,141663,141664,141666],{"class":1004,"line":1980},[1002,141665,141494],{"class":1026},[1002,141667,40037],{"class":1030},[1002,141669,141670],{"class":1004,"line":1985},[1002,141671,2804],{"class":1030},[1002,141673,141674],{"class":1004,"line":1995},[1002,141675,1051],{"emptyLinePlaceholder":1050},[1002,141677,141678,141680,141682,141684,141686,141689],{"class":1004,"line":2006},[1002,141679,3455],{"class":1019},[1002,141681,139530],{"class":1030},[1002,141683,43148],{"class":1026},[1002,141685,1031],{"class":1030},[1002,141687,141688],{"class":1034},"'invalid:b’, function(error) ",[1002,141690,1129],{"class":18541},[1002,141692,141693,141695,141698,141700,141702,141704],{"class":1004,"line":2011},[1002,141694,110016],{"class":1026},[1002,141696,141697],{"class":1030},"(‘b’).",[1002,141699,109936],{"class":1026},[1002,141701,1031],{"class":1030},[1002,141703,111413],{"class":1034},[1002,141705,1085],{"class":1030},[1002,141707,141708,141710],{"class":1004,"line":2017},[1002,141709,141494],{"class":1026},[1002,141711,40037],{"class":1030},[1002,141713,141714],{"class":1004,"line":2022},[1002,141715,2804],{"class":1030},[925,141717,141718],{},"The advantage of this pattern is that your view bindings are explicit in the type of error they are bound to, and if you have specific instructions for each type of attribute error, it can clean up your view code and make it more maintainable. The one downside of this pattern is that your views could become rather bloated if there aren’t many differences in how you handle different attribute errors.",[925,141720,141721],{},"Both patterns have their pros and cons, and you should think about which pattern is best for your use case. If you treat all failed validation errors the same way, then the first approach would probably be best; if you have specific UI changes per model attribute, then the latter approach would be better.",[1655,141723,141725],{"id":141724},"http-status-code-200-trigger-error","HTTP Status Code 200 Trigger Error",[925,141727,141728,141729,141733],{},"If the endpoint that your model or collection is hitting returns invalid JSON, then your model or collection will trigger an *error” event, even if the endpoint returns a 200 HTTP status code. This issue mostly comes up when developing locally against mock JSON data. So, a good rule of thumb is to throw any mock JSON files you’re developing through a ",[933,141730,141732],{"href":141731},"http:\u002F\u002Fjsonformatter.curiousconcept.com\u002F","JSON validator",". Or get a plugin for your IDE that will catch any ill-formatted JSON.",[1655,141735,141737],{"id":141736},"create-a-generic-error-display","Create A Generic Error Display",[925,141739,141740],{},"This one could save you time and create a uniform pattern for handling and visualizing error messages, which will improve your user’s overall experience. In any Backbone.js app that I develop, I create a generic view that handles alerts:",[993,141742,141744],{"className":995,"code":141743,"language":997,"meta":998,"style":998},"var AlertView = Backbone.View.extend({\n set: function(typeOfError, message) {\n var alert = $(‘.in-page-alert’).length ? $(‘.in-page-alert’): $(‘.body-alert’);\n alert\n .removeClass(‘error success warning’)\n .addClass(typeOfError)\n .html(message)\n .fadeIn()\n .delay(5000)\n .fadeOut();\n }\n});\n",[941,141745,141746,141761,141781,141833,141838,141847,141856,141865,141874,141887,141896,141900],{"__ignoreMap":998},[1002,141747,141748,141750,141753,141755,141757,141759],{"class":1004,"line":1005},[1002,141749,18311],{"class":1015},[1002,141751,141752],{"class":1030}," AlertView ",[1002,141754,2393],{"class":1015},[1002,141756,129185],{"class":1030},[1002,141758,106592],{"class":1026},[1002,141760,2756],{"class":1030},[1002,141762,141763,141766,141768,141770,141772,141775,141777,141779],{"class":1004,"line":1012},[1002,141764,141765],{"class":1026}," set",[1002,141767,1137],{"class":1030},[1002,141769,6965],{"class":1015},[1002,141771,1031],{"class":1030},[1002,141773,141774],{"class":2378},"typeOfError",[1002,141776,1251],{"class":1030},[1002,141778,7100],{"class":2378},[1002,141780,2382],{"class":1030},[1002,141782,141783,141785,141788,141790,141792,141795,141797,141799,141801,141804,141806,141808,141810,141812,141814,141816,141818,141821,141823,141825,141828,141830],{"class":1004,"line":1047},[1002,141784,74620],{"class":1015},[1002,141786,141787],{"class":1030}," alert ",[1002,141789,2393],{"class":1015},[1002,141791,110094],{"class":1026},[1002,141793,141794],{"class":1030},"(‘.in",[1002,141796,5101],{"class":1015},[1002,141798,71715],{"class":1030},[1002,141800,5101],{"class":1015},[1002,141802,141803],{"class":1030},"alert’).",[1002,141805,5873],{"class":1019},[1002,141807,32515],{"class":1015},[1002,141809,110094],{"class":1026},[1002,141811,141794],{"class":1030},[1002,141813,5101],{"class":1015},[1002,141815,71715],{"class":1030},[1002,141817,5101],{"class":1015},[1002,141819,141820],{"class":1030},"alert’)",[1002,141822,1813],{"class":1015},[1002,141824,110094],{"class":1026},[1002,141826,141827],{"class":1030},"(‘.body",[1002,141829,5101],{"class":1015},[1002,141831,141832],{"class":1030},"alert’);\n",[1002,141834,141835],{"class":1004,"line":1054},[1002,141836,141837],{"class":1030}," alert\n",[1002,141839,141840,141842,141844],{"class":1004,"line":1060},[1002,141841,140367],{"class":1030},[1002,141843,109916],{"class":1026},[1002,141845,141846],{"class":1030},"(‘error success warning’)\n",[1002,141848,141849,141851,141853],{"class":1004,"line":1272},[1002,141850,140367],{"class":1030},[1002,141852,109936],{"class":1026},[1002,141854,141855],{"class":1030},"(typeOfError)\n",[1002,141857,141858,141860,141862],{"class":1004,"line":1348},[1002,141859,140367],{"class":1030},[1002,141861,383],{"class":1026},[1002,141863,141864],{"class":1030},"(message)\n",[1002,141866,141867,141869,141872],{"class":1004,"line":1354},[1002,141868,140367],{"class":1030},[1002,141870,141871],{"class":1026},"fadeIn",[1002,141873,17202],{"class":1030},[1002,141875,141876,141878,141880,141882,141885],{"class":1004,"line":1360},[1002,141877,140367],{"class":1030},[1002,141879,73547],{"class":1026},[1002,141881,1031],{"class":1030},[1002,141883,141884],{"class":1019},"5000",[1002,141886,3808],{"class":1030},[1002,141888,141889,141891,141894],{"class":1004,"line":1366},[1002,141890,140367],{"class":1030},[1002,141892,141893],{"class":1026},"fadeOut",[1002,141895,1428],{"class":1030},[1002,141897,141898],{"class":1004,"line":1946},[1002,141899,2014],{"class":1030},[1002,141901,141902],{"class":1004,"line":1956},[1002,141903,2804],{"class":1030},[925,141905,141906,141907,141910,141911,141914,141915,141917],{},"The view above first looks to see whether there is a view-specific ",[941,141908,141909],{},"in-page-alert","div, which you would declare inside of your view’s markup. If there is no view-specific div, then it falls back to a generic ",[941,141912,141913],{},"body-alert"," div, which you would declare somewhere in the layout. This enables you to deliver a consistent error message to your users and provides a useful fallback in case you forget to specify a view-specific ",[941,141916,141909],{}," div. The pattern above streamlines how you handle error messages in your views, as follows:",[993,141919,141921],{"className":995,"code":141920,"language":997,"meta":998,"style":998},"var alert = new AlertView();\n\nthis.model.on('error', function (model, error) {\n alert.set('TYPE-OF-ERROR', error);\n});\n",[941,141922,141923,141938,141942,141968,141983],{"__ignoreMap":998},[1002,141924,141925,141927,141929,141931,141933,141936],{"class":1004,"line":1005},[1002,141926,18311],{"class":1015},[1002,141928,141787],{"class":1030},[1002,141930,2393],{"class":1015},[1002,141932,2690],{"class":1015},[1002,141934,141935],{"class":1026}," AlertView",[1002,141937,1428],{"class":1030},[1002,141939,141940],{"class":1004,"line":1012},[1002,141941,1051],{"emptyLinePlaceholder":1050},[1002,141943,141944,141946,141948,141950,141952,141954,141956,141958,141960,141962,141964,141966],{"class":1004,"line":1047},[1002,141945,3455],{"class":1019},[1002,141947,139530],{"class":1030},[1002,141949,43148],{"class":1026},[1002,141951,1031],{"class":1030},[1002,141953,111413],{"class":1034},[1002,141955,1251],{"class":1030},[1002,141957,6965],{"class":1015},[1002,141959,6513],{"class":1030},[1002,141961,3978],{"class":2378},[1002,141963,1251],{"class":1030},[1002,141965,25064],{"class":2378},[1002,141967,2382],{"class":1030},[1002,141969,141970,141973,141975,141977,141980],{"class":1004,"line":1054},[1002,141971,141972],{"class":1030}," alert.",[1002,141974,40544],{"class":1026},[1002,141976,1031],{"class":1030},[1002,141978,141979],{"class":1034},"'TYPE-OF-ERROR'",[1002,141981,141982],{"class":1030},", error);\n",[1002,141984,141985],{"class":1004,"line":1060},[1002,141986,2804],{"class":1030},[1655,141988,141990],{"id":141989},"update-single-page-app-document-titles","Update Single-Page App Document Titles",[925,141992,141993,141994,141998],{},"This is more of a usability concern than anything. If you’re developing a single-page application, remember to update the document title of each page! I’ve written a simple Backbone.js plugin, ",[933,141995,141997],{"href":141996},"https:\u002F\u002Fgithub.com\u002Fpwhisenhunt\u002FBackbonejs-Router-Title-Helper","Backbone.js Router Title Helper",", that does this in a simple and elegant format by extending the Backbone.js router. It allows you to specify a title’s object literal, whose keys map to route function names and whose values are page titles.",[993,142000,142002],{"className":995,"code":142001,"language":997,"meta":998,"style":998},"Backbone.Router = Backbone.Router.extend({\n initialize: function (options) {\n var that = this;\n\n this.on('route', function (router, route, params) {\n if (that.titles) {\n if (that.titles[router]) document.title = that.titles[router];\n else if (that.titles.default) document.title = that.titles.default;\n else\n throw (\n 'Backbone.js Router Title Helper: No title found for route:' +\n router +\n ' and no default route specified.'\n );\n }\n });\n },\n});\n",[941,142003,142004,142017,142031,142044,142048,142079,142086,142098,142112,142117,142124,142131,142138,142143,142148,142152,142156,142160],{"__ignoreMap":998},[1002,142005,142006,142009,142011,142013,142015],{"class":1004,"line":1005},[1002,142007,142008],{"class":1030},"Backbone.Router ",[1002,142010,2393],{"class":1015},[1002,142012,114535],{"class":1030},[1002,142014,106592],{"class":1026},[1002,142016,2756],{"class":1030},[1002,142018,142019,142021,142023,142025,142027,142029],{"class":1004,"line":1012},[1002,142020,114354],{"class":1026},[1002,142022,1137],{"class":1030},[1002,142024,6965],{"class":1015},[1002,142026,6513],{"class":1030},[1002,142028,2379],{"class":2378},[1002,142030,2382],{"class":1030},[1002,142032,142033,142035,142038,142040,142042],{"class":1004,"line":1047},[1002,142034,51906],{"class":1015},[1002,142036,142037],{"class":1030}," that ",[1002,142039,2393],{"class":1015},[1002,142041,2693],{"class":1019},[1002,142043,1407],{"class":1030},[1002,142045,142046],{"class":1004,"line":1054},[1002,142047,1051],{"emptyLinePlaceholder":1050},[1002,142049,142050,142052,142054,142056,142058,142061,142063,142065,142067,142069,142071,142073,142075,142077],{"class":1004,"line":1060},[1002,142051,2387],{"class":1019},[1002,142053,948],{"class":1030},[1002,142055,43148],{"class":1026},[1002,142057,1031],{"class":1030},[1002,142059,142060],{"class":1034},"'route'",[1002,142062,1251],{"class":1030},[1002,142064,6965],{"class":1015},[1002,142066,6513],{"class":1030},[1002,142068,69619],{"class":2378},[1002,142070,1251],{"class":1030},[1002,142072,66565],{"class":2378},[1002,142074,1251],{"class":1030},[1002,142076,24866],{"class":2378},[1002,142078,2382],{"class":1030},[1002,142080,142081,142083],{"class":1004,"line":1272},[1002,142082,8328],{"class":1015},[1002,142084,142085],{"class":1030}," (that.titles) {\n",[1002,142087,142088,142090,142093,142095],{"class":1004,"line":1348},[1002,142089,7347],{"class":1015},[1002,142091,142092],{"class":1030}," (that.titles[router]) document.title ",[1002,142094,2393],{"class":1015},[1002,142096,142097],{"class":1030}," that.titles[router];\n",[1002,142099,142100,142102,142104,142107,142109],{"class":1004,"line":1354},[1002,142101,140800],{"class":1015},[1002,142103,6063],{"class":1015},[1002,142105,142106],{"class":1030}," (that.titles.default) document.title ",[1002,142108,2393],{"class":1015},[1002,142110,142111],{"class":1030}," that.titles.default;\n",[1002,142113,142114],{"class":1004,"line":1360},[1002,142115,142116],{"class":1015}," else\n",[1002,142118,142119,142122],{"class":1004,"line":1366},[1002,142120,142121],{"class":1015}," throw",[1002,142123,15692],{"class":1030},[1002,142125,142126,142129],{"class":1004,"line":1946},[1002,142127,142128],{"class":1034}," 'Backbone.js Router Title Helper: No title found for route:'",[1002,142130,102661],{"class":1015},[1002,142132,142133,142136],{"class":1004,"line":1956},[1002,142134,142135],{"class":1030}," router ",[1002,142137,99016],{"class":1015},[1002,142139,142140],{"class":1004,"line":1961},[1002,142141,142142],{"class":1034}," ' and no default route specified.'\n",[1002,142144,142145],{"class":1004,"line":1971},[1002,142146,142147],{"class":1030}," );\n",[1002,142149,142150],{"class":1004,"line":1980},[1002,142151,1351],{"class":1030},[1002,142153,142154],{"class":1004,"line":1985},[1002,142155,8353],{"class":1030},[1002,142157,142158],{"class":1004,"line":1995},[1002,142159,1502],{"class":1030},[1002,142161,142162],{"class":1004,"line":2006},[1002,142163,2804],{"class":1030},[1655,142165,142167],{"id":142166},"cache-objects-in-single-page-applications","CACHE OBJECTS IN SINGLE-PAGE applications",[925,142169,142170],{},"While we are on the topic of single-page applications, another pattern you could follow is to cache objects that will be reused! This case is fairly straightforward and simple:",[993,142172,142174],{"className":995,"code":142173,"language":997,"meta":998,"style":998},"\u002F\u002F Inside a router\ninitialize: function() {\n\n this.cached = {\n view: undefined,\n model: undefined\n }\n},\n\nindex: function(parameter) {\n this.cached.model = this.cached.model || new Model({\n parameter: parameter\n });\n this.cached.view = this.cached.view || new View({\n model: this.cached.model\n });\n}\n",[941,142175,142176,142181,142192,142196,142207,142216,142224,142228,142232,142236,142250,142271,142276,142280,142302,142311,142315],{"__ignoreMap":998},[1002,142177,142178],{"class":1004,"line":1005},[1002,142179,142180],{"class":1008},"\u002F\u002F Inside a router\n",[1002,142182,142183,142186,142188,142190],{"class":1004,"line":1012},[1002,142184,142185],{"class":1026},"initialize",[1002,142187,1137],{"class":1030},[1002,142189,6965],{"class":1015},[1002,142191,3025],{"class":1030},[1002,142193,142194],{"class":1004,"line":1047},[1002,142195,1051],{"emptyLinePlaceholder":1050},[1002,142197,142198,142200,142203,142205],{"class":1004,"line":1054},[1002,142199,2387],{"class":1019},[1002,142201,142202],{"class":1030},".cached ",[1002,142204,2393],{"class":1015},[1002,142206,1457],{"class":1030},[1002,142208,142209,142212,142214],{"class":1004,"line":1060},[1002,142210,142211],{"class":1030}," view: ",[1002,142213,31012],{"class":1019},[1002,142215,1143],{"class":1030},[1002,142217,142218,142221],{"class":1004,"line":1272},[1002,142219,142220],{"class":1030}," model: ",[1002,142222,142223],{"class":1019},"undefined\n",[1002,142225,142226],{"class":1004,"line":1348},[1002,142227,2014],{"class":1030},[1002,142229,142230],{"class":1004,"line":1354},[1002,142231,3492],{"class":1030},[1002,142233,142234],{"class":1004,"line":1360},[1002,142235,1051],{"emptyLinePlaceholder":1050},[1002,142237,142238,142240,142242,142244,142246,142248],{"class":1004,"line":1366},[1002,142239,19458],{"class":1026},[1002,142241,1137],{"class":1030},[1002,142243,6965],{"class":1015},[1002,142245,1031],{"class":1030},[1002,142247,17034],{"class":2378},[1002,142249,2382],{"class":1030},[1002,142251,142252,142254,142257,142259,142261,142263,142265,142267,142269],{"class":1004,"line":1946},[1002,142253,2387],{"class":1019},[1002,142255,142256],{"class":1030},".cached.model ",[1002,142258,2393],{"class":1015},[1002,142260,2693],{"class":1019},[1002,142262,142256],{"class":1030},[1002,142264,8392],{"class":1015},[1002,142266,2690],{"class":1015},[1002,142268,117363],{"class":1026},[1002,142270,2756],{"class":1030},[1002,142272,142273],{"class":1004,"line":1956},[1002,142274,142275],{"class":1030}," parameter: parameter\n",[1002,142277,142278],{"class":1004,"line":1961},[1002,142279,8353],{"class":1030},[1002,142281,142282,142284,142287,142289,142291,142293,142295,142297,142300],{"class":1004,"line":1971},[1002,142283,2387],{"class":1019},[1002,142285,142286],{"class":1030},".cached.view ",[1002,142288,2393],{"class":1015},[1002,142290,2693],{"class":1019},[1002,142292,142286],{"class":1030},[1002,142294,8392],{"class":1015},[1002,142296,2690],{"class":1015},[1002,142298,142299],{"class":1026}," View",[1002,142301,2756],{"class":1030},[1002,142303,142304,142306,142308],{"class":1004,"line":1980},[1002,142305,142220],{"class":1030},[1002,142307,3455],{"class":1019},[1002,142309,142310],{"class":1030},".cached.model\n",[1002,142312,142313],{"class":1004,"line":1985},[1002,142314,8353],{"class":1030},[1002,142316,142317],{"class":1004,"line":1995},[1002,142318,1170],{"class":1030},[925,142320,142321],{},"This pattern will give your application a small bump in speed because you won’t have to reinitialize your Backbone.js objects. However, it could cause your application’s memory footprint to grow rather large; so, I’ll typically only cache objects that are commonly used throughout an application. If you’ve developed Backbone.js apps in the past, then you’re likely asking yourself, *What if I want to fetch data?” You can fetch data each time the route is triggered:",[993,142323,142325],{"className":995,"code":142324,"language":997,"meta":998,"style":998},"\u002F\u002F Inside a router\ninitialize: function() {\n\n this.cached = {\n view: undefined,\n model: undefined\n }\n},\n\nindex: function(parameter) {\n this.cached.model = this.cached.model || new Model({\n parameter: parameter\n });\n this.cached.view = this.cached.view || new View({\n model: this.cached.model\n });\n this.cached.model.fetch();\n}\n",[941,142326,142327,142331,142341,142345,142355,142363,142369,142373,142377,142381,142395,142415,142419,142423,142443,142451,142455,142466],{"__ignoreMap":998},[1002,142328,142329],{"class":1004,"line":1005},[1002,142330,142180],{"class":1008},[1002,142332,142333,142335,142337,142339],{"class":1004,"line":1012},[1002,142334,142185],{"class":1026},[1002,142336,1137],{"class":1030},[1002,142338,6965],{"class":1015},[1002,142340,3025],{"class":1030},[1002,142342,142343],{"class":1004,"line":1047},[1002,142344,1051],{"emptyLinePlaceholder":1050},[1002,142346,142347,142349,142351,142353],{"class":1004,"line":1054},[1002,142348,2387],{"class":1019},[1002,142350,142202],{"class":1030},[1002,142352,2393],{"class":1015},[1002,142354,1457],{"class":1030},[1002,142356,142357,142359,142361],{"class":1004,"line":1060},[1002,142358,142211],{"class":1030},[1002,142360,31012],{"class":1019},[1002,142362,1143],{"class":1030},[1002,142364,142365,142367],{"class":1004,"line":1272},[1002,142366,142220],{"class":1030},[1002,142368,142223],{"class":1019},[1002,142370,142371],{"class":1004,"line":1348},[1002,142372,2014],{"class":1030},[1002,142374,142375],{"class":1004,"line":1354},[1002,142376,3492],{"class":1030},[1002,142378,142379],{"class":1004,"line":1360},[1002,142380,1051],{"emptyLinePlaceholder":1050},[1002,142382,142383,142385,142387,142389,142391,142393],{"class":1004,"line":1366},[1002,142384,19458],{"class":1026},[1002,142386,1137],{"class":1030},[1002,142388,6965],{"class":1015},[1002,142390,1031],{"class":1030},[1002,142392,17034],{"class":2378},[1002,142394,2382],{"class":1030},[1002,142396,142397,142399,142401,142403,142405,142407,142409,142411,142413],{"class":1004,"line":1946},[1002,142398,2387],{"class":1019},[1002,142400,142256],{"class":1030},[1002,142402,2393],{"class":1015},[1002,142404,2693],{"class":1019},[1002,142406,142256],{"class":1030},[1002,142408,8392],{"class":1015},[1002,142410,2690],{"class":1015},[1002,142412,117363],{"class":1026},[1002,142414,2756],{"class":1030},[1002,142416,142417],{"class":1004,"line":1956},[1002,142418,142275],{"class":1030},[1002,142420,142421],{"class":1004,"line":1961},[1002,142422,8353],{"class":1030},[1002,142424,142425,142427,142429,142431,142433,142435,142437,142439,142441],{"class":1004,"line":1971},[1002,142426,2387],{"class":1019},[1002,142428,142286],{"class":1030},[1002,142430,2393],{"class":1015},[1002,142432,2693],{"class":1019},[1002,142434,142286],{"class":1030},[1002,142436,8392],{"class":1015},[1002,142438,2690],{"class":1015},[1002,142440,142299],{"class":1026},[1002,142442,2756],{"class":1030},[1002,142444,142445,142447,142449],{"class":1004,"line":1980},[1002,142446,142220],{"class":1030},[1002,142448,3455],{"class":1019},[1002,142450,142310],{"class":1030},[1002,142452,142453],{"class":1004,"line":1985},[1002,142454,8353],{"class":1030},[1002,142456,142457,142459,142462,142464],{"class":1004,"line":1995},[1002,142458,2387],{"class":1019},[1002,142460,142461],{"class":1030},".cached.model.",[1002,142463,49123],{"class":1026},[1002,142465,1428],{"class":1030},[1002,142467,142468],{"class":1004,"line":2006},[1002,142469,1170],{"class":1030},[925,142471,142472,142473,142475],{},"This pattern will work when your application must retrieve the latest data from the endpoint (for example, an inbox). However, if the data that you’re fetching is dependent on the state of the application (assuming that the state is maintained through your URL and parameters), then you would be prefetching data even if the application’s state hasn’t changed since the user was last on the page. A better solution would be to fetch data only when the state of the application (",[941,142474,17034],{},") has changed:",[993,142477,142479],{"className":995,"code":142478,"language":997,"meta":998,"style":998},"\u002F\u002F Inside a router\ninitialize: function() {\n\n this.cached = {\n view: undefined,\n model: undefined\n }\n},\n\nindex: function(parameter) {\n this.cached.model = this.cached.model || new Model({\n parameter:parameter\n });\n this.cached.model.set('parameter', parameter);\n this.cached.view = this.cached.view || new View({\n model: this.cached.model\n });\n}\n\n\u002F\u002F Inside of the model\ninitialize: function() {\n this.on(\"change:parameter\", this.fetchData, this);\n}\n",[941,142480,142481,142485,142495,142499,142509,142517,142523,142527,142531,142535,142549,142569,142574,142578,142594,142614,142622,142626,142630,142634,142639,142649,142673],{"__ignoreMap":998},[1002,142482,142483],{"class":1004,"line":1005},[1002,142484,142180],{"class":1008},[1002,142486,142487,142489,142491,142493],{"class":1004,"line":1012},[1002,142488,142185],{"class":1026},[1002,142490,1137],{"class":1030},[1002,142492,6965],{"class":1015},[1002,142494,3025],{"class":1030},[1002,142496,142497],{"class":1004,"line":1047},[1002,142498,1051],{"emptyLinePlaceholder":1050},[1002,142500,142501,142503,142505,142507],{"class":1004,"line":1054},[1002,142502,2387],{"class":1019},[1002,142504,142202],{"class":1030},[1002,142506,2393],{"class":1015},[1002,142508,1457],{"class":1030},[1002,142510,142511,142513,142515],{"class":1004,"line":1060},[1002,142512,142211],{"class":1030},[1002,142514,31012],{"class":1019},[1002,142516,1143],{"class":1030},[1002,142518,142519,142521],{"class":1004,"line":1272},[1002,142520,142220],{"class":1030},[1002,142522,142223],{"class":1019},[1002,142524,142525],{"class":1004,"line":1348},[1002,142526,2014],{"class":1030},[1002,142528,142529],{"class":1004,"line":1354},[1002,142530,3492],{"class":1030},[1002,142532,142533],{"class":1004,"line":1360},[1002,142534,1051],{"emptyLinePlaceholder":1050},[1002,142536,142537,142539,142541,142543,142545,142547],{"class":1004,"line":1366},[1002,142538,19458],{"class":1026},[1002,142540,1137],{"class":1030},[1002,142542,6965],{"class":1015},[1002,142544,1031],{"class":1030},[1002,142546,17034],{"class":2378},[1002,142548,2382],{"class":1030},[1002,142550,142551,142553,142555,142557,142559,142561,142563,142565,142567],{"class":1004,"line":1946},[1002,142552,2387],{"class":1019},[1002,142554,142256],{"class":1030},[1002,142556,2393],{"class":1015},[1002,142558,2693],{"class":1019},[1002,142560,142256],{"class":1030},[1002,142562,8392],{"class":1015},[1002,142564,2690],{"class":1015},[1002,142566,117363],{"class":1026},[1002,142568,2756],{"class":1030},[1002,142570,142571],{"class":1004,"line":1956},[1002,142572,142573],{"class":1030}," parameter:parameter\n",[1002,142575,142576],{"class":1004,"line":1961},[1002,142577,8353],{"class":1030},[1002,142579,142580,142582,142584,142586,142588,142591],{"class":1004,"line":1971},[1002,142581,2387],{"class":1019},[1002,142583,142461],{"class":1030},[1002,142585,40544],{"class":1026},[1002,142587,1031],{"class":1030},[1002,142589,142590],{"class":1034},"'parameter'",[1002,142592,142593],{"class":1030},", parameter);\n",[1002,142595,142596,142598,142600,142602,142604,142606,142608,142610,142612],{"class":1004,"line":1980},[1002,142597,2387],{"class":1019},[1002,142599,142286],{"class":1030},[1002,142601,2393],{"class":1015},[1002,142603,2693],{"class":1019},[1002,142605,142286],{"class":1030},[1002,142607,8392],{"class":1015},[1002,142609,2690],{"class":1015},[1002,142611,142299],{"class":1026},[1002,142613,2756],{"class":1030},[1002,142615,142616,142618,142620],{"class":1004,"line":1985},[1002,142617,142220],{"class":1030},[1002,142619,3455],{"class":1019},[1002,142621,142310],{"class":1030},[1002,142623,142624],{"class":1004,"line":1995},[1002,142625,8353],{"class":1030},[1002,142627,142628],{"class":1004,"line":2006},[1002,142629,1170],{"class":1030},[1002,142631,142632],{"class":1004,"line":2011},[1002,142633,1051],{"emptyLinePlaceholder":1050},[1002,142635,142636],{"class":1004,"line":2017},[1002,142637,142638],{"class":1008},"\u002F\u002F Inside of the model\n",[1002,142640,142641,142643,142645,142647],{"class":1004,"line":2022},[1002,142642,142185],{"class":1026},[1002,142644,1137],{"class":1030},[1002,142646,6965],{"class":1015},[1002,142648,3025],{"class":1030},[1002,142650,142651,142653,142655,142657,142659,142662,142664,142666,142669,142671],{"class":1004,"line":2442},[1002,142652,2387],{"class":1019},[1002,142654,948],{"class":1030},[1002,142656,43148],{"class":1026},[1002,142658,1031],{"class":1030},[1002,142660,142661],{"class":1034},"\"change:parameter\"",[1002,142663,1251],{"class":1030},[1002,142665,3455],{"class":1019},[1002,142667,142668],{"class":1030},".fetchData, ",[1002,142670,3455],{"class":1019},[1002,142672,1085],{"class":1030},[1002,142674,142675],{"class":1004,"line":2466},[1002,142676,1170],{"class":1030},[1655,142678,142680],{"id":142679},"jsdoc-functions-and-backbonejs-classes","JSDoc Functions And Backbone.js Classes",[925,142682,142683,142684,142689],{},"I’m a huge fan of documentation and ",[933,142685,142688],{"href":142686,"rel":142687},"http:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FJSDoc",[937],"JSDoc",". I JSDoc all Backbone classes and functions in the following format:",[993,142691,142693],{"className":995,"code":142692,"language":997,"meta":998,"style":998},"var Thing = Backbone.View.extend(\n \u002F** @lends Thing.prototype *\u002F {\n \u002F** @class Thing\n * @author Phillip Whisenhunt\n * @augments Backbone.View\n * @contructs Thing object *\u002F\n initialize() {},\n\n \u002F** Gets data by ID from the thing. If the thing doesn't have data based on the ID, an empty string is returned.\n * @param {String} id The id of get data for.\n * @return {String} The data. *\u002F\n getDataById: function (id) {},\n },\n);\n",[941,142694,142695,142710,142726,142737,142748,142758,142768,142775,142779,142784,142799,142811,142827,142831],{"__ignoreMap":998},[1002,142696,142697,142699,142702,142704,142706,142708],{"class":1004,"line":1005},[1002,142698,18311],{"class":1015},[1002,142700,142701],{"class":1030}," Thing ",[1002,142703,2393],{"class":1015},[1002,142705,129185],{"class":1030},[1002,142707,106592],{"class":1026},[1002,142709,10468],{"class":1030},[1002,142711,142712,142715,142718,142721,142724],{"class":1004,"line":1012},[1002,142713,142714],{"class":1008}," \u002F** ",[1002,142716,142717],{"class":1015},"@lends",[1002,142719,142720],{"class":1026}," Thing.prototype",[1002,142722,142723],{"class":1008}," *\u002F",[1002,142725,1457],{"class":1030},[1002,142727,142728,142731,142734],{"class":1004,"line":1047},[1002,142729,142730],{"class":1008}," \u002F** ",[1002,142732,142733],{"class":1015},"@class",[1002,142735,142736],{"class":1008}," Thing\n",[1002,142738,142739,142742,142745],{"class":1004,"line":1054},[1002,142740,142741],{"class":1008}," * ",[1002,142743,142744],{"class":1015},"@author",[1002,142746,142747],{"class":1026}," Phillip Whisenhunt\n",[1002,142749,142750,142752,142755],{"class":1004,"line":1060},[1002,142751,142741],{"class":1008},[1002,142753,142754],{"class":1015},"@augments",[1002,142756,142757],{"class":1026}," Backbone.View\n",[1002,142759,142760,142762,142765],{"class":1004,"line":1272},[1002,142761,142741],{"class":1008},[1002,142763,142764],{"class":1015},"@contructs",[1002,142766,142767],{"class":1008}," Thing object *\u002F\n",[1002,142769,142770,142772],{"class":1004,"line":1348},[1002,142771,139713],{"class":1026},[1002,142773,142774],{"class":1030},"() {},\n",[1002,142776,142777],{"class":1004,"line":1354},[1002,142778,1051],{"emptyLinePlaceholder":1050},[1002,142780,142781],{"class":1004,"line":1360},[1002,142782,142783],{"class":1008}," \u002F** Gets data by ID from the thing. If the thing doesn't have data based on the ID, an empty string is returned.\n",[1002,142785,142786,142788,142791,142794,142796],{"class":1004,"line":1366},[1002,142787,142741],{"class":1008},[1002,142789,142790],{"class":1015},"@param",[1002,142792,142793],{"class":1026}," {String}",[1002,142795,21489],{"class":1030},[1002,142797,142798],{"class":1008}," The id of get data for.\n",[1002,142800,142801,142803,142806,142808],{"class":1004,"line":1946},[1002,142802,142741],{"class":1008},[1002,142804,142805],{"class":1015},"@return",[1002,142807,142793],{"class":1026},[1002,142809,142810],{"class":1008}," The data. *\u002F\n",[1002,142812,142813,142816,142818,142820,142822,142824],{"class":1004,"line":1956},[1002,142814,142815],{"class":1026}," getDataById",[1002,142817,1137],{"class":1030},[1002,142819,6965],{"class":1015},[1002,142821,6513],{"class":1030},[1002,142823,19767],{"class":2378},[1002,142825,142826],{"class":1030},") {},\n",[1002,142828,142829],{"class":1004,"line":1961},[1002,142830,1502],{"class":1030},[1002,142832,142833],{"class":1004,"line":1971},[1002,142834,1085],{"class":1030},[925,142836,142837,142838,142840,142841,142845,142846,142850,142851,142855],{},"If you document your Backbone classes in the format above, then you can generate beautiful documentation that contains all of your classes and functions with parameters, return types and descriptions. Be sure to keep the ",[941,142839,142185],{},"function as the first function declared, which helps when generating JSDoc. If you’d like to see an example of a project that uses JSDoc, check out the",[933,142842,142844],{"href":142843},"https:\u002F\u002Fgithub.com\u002Fhomeaway\u002Fcalendar-widget","HomeAway Calendar Widget",". There is also a ",[933,142847,142849],{"href":142848},"http:\u002F\u002Fgruntjs.com\u002F","Grunt.js"," plugin, ",[933,142852,142854],{"href":142853},"https:\u002F\u002Fgithub.com\u002Fkrampstudio\u002Fgrunt-jsdoc-plugin","grunt-jsdoc-plugin",", to generate documentation as part of your build process.",[1655,142857,142859],{"id":142858},"practice-test-driven-development","Practice Test-Driven Development",[925,142861,142862,142863,142868,142869,142874],{},"In my opinion, if you’re writing in Backbone.js, you should be following ",[933,142864,142867],{"href":142865,"rel":142866},"http:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FTest-driven_development",[937],"test-driven development"," (TDD) for your models and collections. I follow TDD by first writing failing ",[933,142870,142873],{"href":142871,"rel":142872},"https:\u002F\u002Fgithub.com\u002Fpivotal\u002Fjasmine",[937],"Jasmine.js"," unit tests against my models or collections. Once the unit tests are written and failing, I flush out the model or collection.",[925,142876,142877],{},"By this point, all of my Jasmine tests will have been passing, and I have confidence that my model functions all work as expected. Since I’ve been following TDD, my view layer has been super-easy to write and also extremely thin. When you begin practising TDD, you will slow down; but once you wrap your head around it, your productivity and the quality of your code will dramatically increase.",[1579,142879,142880],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":998,"searchDepth":1012,"depth":1012,"links":142882},[142883,142886,142887,142888,142894,142895,142896],{"id":137993,"depth":1012,"text":137994,"children":142884},[142885],{"id":137997,"depth":1047,"text":137998},{"id":138552,"depth":1012,"text":138553},{"id":139161,"depth":1012,"text":139162},{"id":139972,"depth":1012,"text":139973,"children":142889},[142890,142891,142892,142893],{"id":140406,"depth":1047,"text":140407},{"id":140442,"depth":1047,"text":140443},{"id":140854,"depth":1047,"text":140855},{"id":141045,"depth":1047,"text":141046},{"id":141241,"depth":1012,"text":141242},{"id":141248,"depth":1012,"text":141249},{"id":141517,"depth":1012,"text":141518,"children":142897},[142898,142899,142900,142901,142902,142903],{"id":141724,"depth":1047,"text":141725},{"id":141736,"depth":1047,"text":141737},{"id":141989,"depth":1047,"text":141990},{"id":142166,"depth":1047,"text":142167},{"id":142679,"depth":1047,"text":142680},{"id":142858,"depth":1047,"text":142859},"2014-04-22","\u002Fimages\u002Fblog\u002Ffeatures\u002Fbackbone-patterns.jpg",{},{"title":58,"description":60},"blog\u002Fbackbone-patterns",[16,17,51],"jrMxvAI-Nz0KpfjhjadvgMLgeQeLjHC4Sihv_LZftSc",{"id":142912,"title":877,"author":920,"body":142913,"date":143011,"description":879,"extension":1591,"image":143012,"meta":143013,"navigation":1050,"path":878,"seo":143014,"stem":143015,"tags":143016,"__hash__":143017},"blog\u002Fblog\u002Funits-for-css-font-size.md",{"type":922,"value":142914,"toc":143005},[142915,142921,142925,142935,142939,142943,142950,142953,142956,142960,142987,142989],[925,142916,142917],{},[963,142918],{"alt":142919,"src":142920},"iPhone fonts","\u002Fimages\u002Fblog\u002F2014-04-11-units-for-css-font-size\u002Fiphone-fonts.png",[953,142922,142924],{"id":142923},"units","Units",[15201,142926,142928,142931,142932,142934],{"id":142927},"ems-em-the-em-is-a-scalable-unit-that-is-used-in-web-document-media-an-em-is-equal-to-the-current-font-size-for-instance-if-the-font-size-of-the-document-is-12pt-1em-is-equal-to-12pt-ems-are-scalable-so-2em-would-equal-24pt-5em-would-equal-6pt-etc-ems-are-becoming-increasingly-popular-in-web-documents-due-to-scalability-and-their-mobile-device-friendly-nature",[928,142929,142930],{},"Ems"," (em): The ",[928,142933,928],{}," is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.",[15201,142936,142938],{"id":142937},"pixels-px-pixels-are-fixed-size-units-that-are-used-in-screen-media-ie-to-be-read-on-the-computer-screen-one-pixel-is-equal-to-one-dot-on-the-computer-screen-the-smallest-division-of-your-screens-resolution-many-web-designers-use-pixel-units-in-web-documents-to-produce-a-pixel-perfect-representation-of-their-site-as-it-is-rendered-in-the-browser-one-problem-with-the-pixel-unit-is-that-it-does-not-scale-upward-for-visually-impaired-readers-or-downward-to-fit-mobile-devices","Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.",[15201,142940,142942],{"id":142941},"points-pt-points-are-traditionally-used-in-print-media-anything-that-is-to-be-printed-on-paper-etc-one-point-is-equal-to-172-of-an-inch-points-are-much-like-pixels-in-that-they-are-fixed-size-units-and-cannot-scale-in-size","Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1\u002F72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.",[15201,142944,142946,142947,142949],{"id":142945},"percent-the-per-cent-unit-is-much-like-the-em-unit-save-for-a-few-fundamental-differences-first-and-foremost-the-current-font-size-is-equal-to-100-ie-12pt-100-while-using-the-percent-unit-your-text-remains-fully-scalable-for-mobile-devices-and-for-accessibility","Percent (%): The per cent unit is much like the ",[928,142948,928],{}," unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.",[953,142951,73899],{"id":142952},"differences",[925,142954,142955],{},"Units differ from each other, 1em = 12pt = 16px = 100%. When using these font-sizes, both the em and per cent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and per cent units are preferred for web document text.",[953,142957,142959],{"id":142958},"em-vs","Em vs. %",[925,142961,142962,142963,142966,142967,142970,142971,142974,142975,142978,142979,142982,142983,142986],{},"We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and per cent units. In theory, both the em and the per cent units are identical, but in application, they have a few minor differences that are important to consider.\nIn the example above, we used the per cent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems(i.e. body { font-size: 1em; }), you ",[928,142964,142965],{},"probably"," won’t notice a difference. Let’s see what happens when ",[928,142968,142969],{},"1em"," is our body font-size, and when the client alters the ",[928,142972,142973],{},"Text Size"," setting of their browser (this is available in some browsers, such as Internet Explorer).\nWhen the client’s browser text size is set to ",[928,142976,142977],{},"medium,"," there is no difference between ems and per cent. When the setting is altered, however, the difference is quite large. On the ",[928,142980,142981],{},"Smallest"," setting, ems are much smaller than per cent, and when on the ",[928,142984,142985],{},"Largest"," setting, it’s quite the opposite, with ems displaying much larger than per cent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.",[953,142988,26561],{"id":26560},[925,142990,142991,142992,142994,142995,142998,142999,143001,143002,143004],{},"The em unit is the upcoming standard for font sizes on the web, but in practice, the per cent unit seems to provide a more consistent and accessible display for users. When client settings have changed, per cent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.\nwhen you create a new design,you can use percent on the ",[941,142993,15034],{}," element (",[941,142996,142997],{},"body { font-size: 62.5%; }","), and then use the ",[941,143000,928],{}," unit to size it from there. As long as the ",[941,143003,15034],{}," is set using the per cent unit, you may choose to use either per cent or ems on any other CSS rules and selectors and still retain the benefits of using per cent as your base font size.\nSo the percent(%) is the best choice.",{"title":998,"searchDepth":1012,"depth":1012,"links":143006},[143007,143008,143009,143010],{"id":142923,"depth":1012,"text":142924},{"id":142952,"depth":1012,"text":73899},{"id":142958,"depth":1012,"text":142959},{"id":26560,"depth":1012,"text":26561},"2014-04-11","\u002Fimages\u002Fblog\u002Ffeatures\u002Funits-for-css-font-size.jpg",{},{"title":877,"description":879},"blog\u002Funits-for-css-font-size",[16,29],"huRP2he-ctM7JTbphlTm9WMUAT6ufmiMQ0Trj8tt13M",{"id":143019,"title":142,"author":920,"body":143020,"date":143687,"description":144,"extension":1591,"image":143688,"meta":143689,"navigation":1050,"path":143,"seo":143690,"stem":143691,"tags":143692,"__hash__":143693},"blog\u002Fblog\u002Fcss3-media-queries.md",{"type":922,"value":143021,"toc":143675},[143022,143026,143059,143062,143071,143074,143079,143082,143133,143137,143140,143189,143196,143229,143258,143261,143266,143269,143274,143277,143286,143290,143293,143356,143360,143370,143400,143403,143405,143459,143462,143465,143533,143539,143551,143555,143558,143608,143612,143615,143631,143635,143638,143665,143669,143672],[953,143023,143025],{"id":143024},"min-width","Min-Width",[993,143027,143029],{"className":35707,"code":143028,"language":29,"meta":998,"style":998},"@media only screen and (min-width: 330px) {...}\n",[941,143030,143031],{"__ignoreMap":998},[1002,143032,143033,143035,143038,143040,143042,143044,143046,143048,143051,143053,143056],{"class":1004,"line":1005},[1002,143034,35825],{"class":1015},[1002,143036,143037],{"class":1015}," only",[1002,143039,11670],{"class":1019},[1002,143041,35830],{"class":1015},[1002,143043,6513],{"class":1030},[1002,143045,143024],{"class":1019},[1002,143047,1137],{"class":1030},[1002,143049,143050],{"class":1019},"330",[1002,143052,43835],{"class":1015},[1002,143054,143055],{"class":1030},") {..",[1002,143057,143058],{"class":18541},".}\n",[925,143060,143061],{},"Here's what that actually means:",[925,143063,143064],{},[1107,143065,143066,143067,143070],{},"If ",[1002,143068,143069],{},"device width"," is greater than or equal to: specified value, then do {...}",[925,143072,143073],{},"So if the actual \"device width\" is 310px this condition will return false.",[925,143075,143076],{},[1107,143077,143078],{},"If 310px is greater than or equal to 330px, then do {...}",[925,143080,143081],{},"The following CSS will apply if the viewing area is greater than 900px.",[993,143083,143085],{"className":35707,"code":143084,"language":29,"meta":998,"style":998},"@media screen and (min-width: 900px) {\n .class {\n background: #666;\n }\n}\n",[941,143086,143087,143107,143114,143125,143129],{"__ignoreMap":998},[1002,143088,143089,143091,143093,143095,143097,143099,143101,143103,143105],{"class":1004,"line":1005},[1002,143090,35825],{"class":1015},[1002,143092,11670],{"class":1019},[1002,143094,35830],{"class":1015},[1002,143096,6513],{"class":1030},[1002,143098,143024],{"class":1019},[1002,143100,1137],{"class":1030},[1002,143102,118720],{"class":1019},[1002,143104,43835],{"class":1015},[1002,143106,2382],{"class":1030},[1002,143108,143109,143112],{"class":1004,"line":1012},[1002,143110,143111],{"class":1026}," .class",[1002,143113,1457],{"class":1030},[1002,143115,143116,143118,143120,143123],{"class":1004,"line":1047},[1002,143117,111211],{"class":1019},[1002,143119,1137],{"class":1030},[1002,143121,143122],{"class":1019},"#666",[1002,143124,1407],{"class":1030},[1002,143126,143127],{"class":1004,"line":1054},[1002,143128,1269],{"class":1030},[1002,143130,143131],{"class":1004,"line":1060},[1002,143132,1170],{"class":1030},[953,143134,143136],{"id":143135},"max-width","Max Width",[925,143138,143139],{},"The following CSS will apply if the viewing area is smaller than 600px.",[993,143141,143143],{"className":35707,"code":143142,"language":29,"meta":998,"style":998},"@media screen and (max-width: 600px) {\n .class {\n background: #ccc;\n }\n}\n",[941,143144,143145,143165,143171,143181,143185],{"__ignoreMap":998},[1002,143146,143147,143149,143151,143153,143155,143157,143159,143161,143163],{"class":1004,"line":1005},[1002,143148,35825],{"class":1015},[1002,143150,11670],{"class":1019},[1002,143152,35830],{"class":1015},[1002,143154,6513],{"class":1030},[1002,143156,143135],{"class":1019},[1002,143158,1137],{"class":1030},[1002,143160,72601],{"class":1019},[1002,143162,43835],{"class":1015},[1002,143164,2382],{"class":1030},[1002,143166,143167,143169],{"class":1004,"line":1012},[1002,143168,143111],{"class":1026},[1002,143170,1457],{"class":1030},[1002,143172,143173,143175,143177,143179],{"class":1004,"line":1047},[1002,143174,111211],{"class":1019},[1002,143176,1137],{"class":1030},[1002,143178,110939],{"class":1019},[1002,143180,1407],{"class":1030},[1002,143182,143183],{"class":1004,"line":1054},[1002,143184,1269],{"class":1030},[1002,143186,143187],{"class":1004,"line":1060},[1002,143188,1170],{"class":1030},[925,143190,143191,143192,143195],{},"If you want to link to a separate stylesheet, put the following line of code in between the ",[941,143193,143194],{},"\u003Chead> ","tag.",[993,143197,143199],{"className":37880,"code":143198,"language":383,"meta":998,"style":998},"\u003Clink rel=\"stylesheet\" media=\"screen and (max-width: 600px)\" href=\"small.css\" \u002F>\n",[941,143200,143201],{"__ignoreMap":998},[1002,143202,143203,143205,143207,143209,143211,143213,143215,143217,143220,143222,143224,143227],{"class":1004,"line":1005},[1002,143204,6539],{"class":1030},[1002,143206,47171],{"class":15711},[1002,143208,47174],{"class":1026},[1002,143210,2393],{"class":1030},[1002,143212,47179],{"class":1034},[1002,143214,135063],{"class":1026},[1002,143216,2393],{"class":1030},[1002,143218,143219],{"class":1034},"\"screen and (max-width: 600px)\"",[1002,143221,47182],{"class":1026},[1002,143223,2393],{"class":1030},[1002,143225,143226],{"class":1034},"\"small.css\"",[1002,143228,15258],{"class":1030},[993,143230,143232],{"className":35707,"code":143231,"language":29,"meta":998,"style":998},"@media only screen and (max-width: 330px) {...}\n",[941,143233,143234],{"__ignoreMap":998},[1002,143235,143236,143238,143240,143242,143244,143246,143248,143250,143252,143254,143256],{"class":1004,"line":1005},[1002,143237,35825],{"class":1015},[1002,143239,143037],{"class":1015},[1002,143241,11670],{"class":1019},[1002,143243,35830],{"class":1015},[1002,143245,6513],{"class":1030},[1002,143247,143135],{"class":1019},[1002,143249,1137],{"class":1030},[1002,143251,143050],{"class":1019},[1002,143253,43835],{"class":1015},[1002,143255,143055],{"class":1030},[1002,143257,143058],{"class":18541},[925,143259,143260],{},"Translates to:",[925,143262,143263],{},[1107,143264,143265],{},"If device width is less than or equal to: specified value, then do {...}",[925,143267,143268],{},"So based on this second example, if the \"device width\" is 320px the condition is true:",[925,143270,143271],{},[1107,143272,143273],{},"If 320px is less than or equal to 330px, then do {...}",[925,143275,143276],{},"It becomes false if you pass any value less than 320.",[925,143278,143279,143280,143282,143283,143285],{},"This means that ",[1107,143281,143135],{}," is the maximum width at which these styles will be shown. A screen wider than the specified number will not use the styles associated with that rule. Similarly, ",[1107,143284,143024],{}," is the minimum width at which these styles will be shown. A screen narrower than the specified number will not use the styles associated with that rule.",[1655,143287,143289],{"id":143288},"multiple-media-queries","Multiple Media Queries",[925,143291,143292],{},"You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.",[993,143294,143296],{"className":35707,"code":143295,"language":29,"meta":998,"style":998},"@media screen and (min-width: 600px) and (max-width: 900px) {\n .class {\n background: #333;\n }\n}\n",[941,143297,143298,143332,143338,143348,143352],{"__ignoreMap":998},[1002,143299,143300,143302,143304,143306,143308,143310,143312,143314,143316,143318,143320,143322,143324,143326,143328,143330],{"class":1004,"line":1005},[1002,143301,35825],{"class":1015},[1002,143303,11670],{"class":1019},[1002,143305,35830],{"class":1015},[1002,143307,6513],{"class":1030},[1002,143309,143024],{"class":1019},[1002,143311,1137],{"class":1030},[1002,143313,72601],{"class":1019},[1002,143315,43835],{"class":1015},[1002,143317,5876],{"class":1030},[1002,143319,35844],{"class":1015},[1002,143321,6513],{"class":1030},[1002,143323,143135],{"class":1019},[1002,143325,1137],{"class":1030},[1002,143327,118720],{"class":1019},[1002,143329,43835],{"class":1015},[1002,143331,2382],{"class":1030},[1002,143333,143334,143336],{"class":1004,"line":1012},[1002,143335,143111],{"class":1026},[1002,143337,1457],{"class":1030},[1002,143339,143340,143342,143344,143346],{"class":1004,"line":1047},[1002,143341,111211],{"class":1019},[1002,143343,1137],{"class":1030},[1002,143345,110838],{"class":1019},[1002,143347,1407],{"class":1030},[1002,143349,143350],{"class":1004,"line":1054},[1002,143351,1269],{"class":1030},[1002,143353,143354],{"class":1004,"line":1060},[1002,143355,1170],{"class":1030},[953,143357,143359],{"id":143358},"commonly-used-media-queries-in-email","Commonly used Media Queries in Email",[925,143361,143362,143363,143366,143367,143369],{},"From reading many industry blogs and even blog posts that I have written myself, we generally provide samples with just two conditions: ",[1107,143364,143365],{},"screen"," and a",[1107,143368,143135],{},". For example:",[993,143371,143373],{"className":35707,"code":143372,"language":29,"meta":998,"style":998},"@media only screen and (max-width: 640px) {...}\n",[941,143374,143375],{"__ignoreMap":998},[1002,143376,143377,143379,143381,143383,143385,143387,143389,143391,143394,143396,143398],{"class":1004,"line":1005},[1002,143378,35825],{"class":1015},[1002,143380,143037],{"class":1015},[1002,143382,11670],{"class":1019},[1002,143384,35830],{"class":1015},[1002,143386,6513],{"class":1030},[1002,143388,143135],{"class":1019},[1002,143390,1137],{"class":1030},[1002,143392,143393],{"class":1019},"640",[1002,143395,43835],{"class":1015},[1002,143397,143055],{"class":1030},[1002,143399,143058],{"class":18541},[925,143401,143402],{},"This statement would include a screen (monitor or device) AND any width less than 640px. Confusing right? Especially considering that in our recent responsive email templates, we use a combination of two breakpoints.",[925,143404,18846],{},[993,143406,143408],{"className":35707,"code":143407,"language":29,"meta":998,"style":998},"@media only screen and (max-width: 640px) {...}\n@media only screen and (max-width: 479px) {...}\n",[941,143409,143410,143434],{"__ignoreMap":998},[1002,143411,143412,143414,143416,143418,143420,143422,143424,143426,143428,143430,143432],{"class":1004,"line":1005},[1002,143413,35825],{"class":1015},[1002,143415,143037],{"class":1015},[1002,143417,11670],{"class":1019},[1002,143419,35830],{"class":1015},[1002,143421,6513],{"class":1030},[1002,143423,143135],{"class":1019},[1002,143425,1137],{"class":1030},[1002,143427,143393],{"class":1019},[1002,143429,43835],{"class":1015},[1002,143431,143055],{"class":1030},[1002,143433,143058],{"class":18541},[1002,143435,143436,143438,143440,143442,143444,143446,143448,143450,143453,143455,143457],{"class":1004,"line":1012},[1002,143437,35825],{"class":1015},[1002,143439,143037],{"class":1015},[1002,143441,11670],{"class":1019},[1002,143443,35830],{"class":1015},[1002,143445,6513],{"class":1030},[1002,143447,143135],{"class":1019},[1002,143449,1137],{"class":1030},[1002,143451,143452],{"class":1019},"479",[1002,143454,43835],{"class":1015},[1002,143456,143055],{"class":1030},[1002,143458,143058],{"class":18541},[925,143460,143461],{},"The second media query actually trumps the first due to standard CSS inheritance rules. By rights, the first triggers any device with a width less than 640px and the second triggers any device with a width less than 479px. So if you truly want to trump the first, you need to make sure that you overwrite all CSS properties under the second condition.",[925,143463,143464],{},"A more succinct approach would be to do the following:",[993,143466,143468],{"className":35707,"code":143467,"language":29,"meta":998,"style":998},"@media only screen and (min-width:480px) and (max-width: 640px) {...}\n@media only screen and (max-width: 479px) {...}\n",[941,143469,143470,143509],{"__ignoreMap":998},[1002,143471,143472,143474,143476,143478,143480,143482,143484,143486,143489,143491,143493,143495,143497,143499,143501,143503,143505,143507],{"class":1004,"line":1005},[1002,143473,35825],{"class":1015},[1002,143475,143037],{"class":1015},[1002,143477,11670],{"class":1019},[1002,143479,35830],{"class":1015},[1002,143481,6513],{"class":1030},[1002,143483,143024],{"class":1019},[1002,143485,1813],{"class":1030},[1002,143487,143488],{"class":1019},"480",[1002,143490,43835],{"class":1015},[1002,143492,5876],{"class":1030},[1002,143494,35844],{"class":1015},[1002,143496,6513],{"class":1030},[1002,143498,143135],{"class":1019},[1002,143500,1137],{"class":1030},[1002,143502,143393],{"class":1019},[1002,143504,43835],{"class":1015},[1002,143506,143055],{"class":1030},[1002,143508,143058],{"class":18541},[1002,143510,143511,143513,143515,143517,143519,143521,143523,143525,143527,143529,143531],{"class":1004,"line":1012},[1002,143512,35825],{"class":1015},[1002,143514,143037],{"class":1015},[1002,143516,11670],{"class":1019},[1002,143518,35830],{"class":1015},[1002,143520,6513],{"class":1030},[1002,143522,143135],{"class":1019},[1002,143524,1137],{"class":1030},[1002,143526,143452],{"class":1019},[1002,143528,43835],{"class":1015},[1002,143530,143055],{"class":1030},[1002,143532,143058],{"class":18541},[925,143534,143535,143536,143538],{},"The only difference is that we added a ",[1107,143537,143024],{}," condition to the first media query. This now separates the two queries so that one doesn't necessarily have to trump the other. The first is now saying anything greater than 480px and less than 640px, the other is simply stating anything less than 479px.",[925,143540,3295,143541,143543,143544,143546,143547,143550],{},[1107,143542,143069],{}," that is returned is based on the orientation of the device. It's ",[1107,143545,17947],{}," based on the highest 'possible dimension' that the device can support in any orientation. Again, the term ",[1107,143548,143549],{},"'max-width'"," is what led to my initial confusion here. Some devices return a different value depending on orientation and\u002For zoom level and others return the same value. Either way, there's only one 'width' value returned at any given time, it's not based on a range of values.",[1655,143552,143554],{"id":143553},"device-width","Device Width",[925,143556,143557],{},"The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.",[993,143559,143561],{"className":35707,"code":143560,"language":29,"meta":998,"style":998},"@media screen and (max-device-width: 480px) {\n .class {\n background: #000;\n }\n}\n",[941,143562,143563,143584,143590,143600,143604],{"__ignoreMap":998},[1002,143564,143565,143567,143569,143571,143573,143576,143578,143580,143582],{"class":1004,"line":1005},[1002,143566,35825],{"class":1015},[1002,143568,11670],{"class":1019},[1002,143570,35830],{"class":1015},[1002,143572,6513],{"class":1030},[1002,143574,143575],{"class":1019},"max-device-width",[1002,143577,1137],{"class":1030},[1002,143579,143488],{"class":1019},[1002,143581,43835],{"class":1015},[1002,143583,2382],{"class":1030},[1002,143585,143586,143588],{"class":1004,"line":1012},[1002,143587,143111],{"class":1026},[1002,143589,1457],{"class":1030},[1002,143591,143592,143594,143596,143598],{"class":1004,"line":1047},[1002,143593,111211],{"class":1019},[1002,143595,1137],{"class":1030},[1002,143597,97210],{"class":1019},[1002,143599,1407],{"class":1030},[1002,143601,143602],{"class":1004,"line":1054},[1002,143603,1269],{"class":1030},[1002,143605,143606],{"class":1004,"line":1060},[1002,143607,1170],{"class":1030},[1655,143609,143611],{"id":143610},"for-iphone-4","For iPhone 4",[925,143613,143614],{},"The following stylesheet is specifically for iPhone 4.",[993,143616,143618],{"className":35707,"code":143617,"language":29,"meta":998,"style":998},"\u003Clink rel=\"stylesheet\" media=\"only screen and (-webkit-min-device-pixel-ratio: 2)\" type=\"text\u002Fcss\" href=\"iphone4.css\" \u002F>\n",[941,143619,143620],{"__ignoreMap":998},[1002,143621,143622,143624,143626,143629],{"class":1004,"line":1005},[1002,143623,6539],{"class":1030},[1002,143625,47171],{"class":15711},[1002,143627,143628],{"class":1030}," rel=\"stylesheet\" media=\"only screen and (-webkit-min-device-pixel-ratio: 2)\" type=\"text\u002Fcss\" href=\"iphone4.css\" \u002F",[1002,143630,15703],{"class":1015},[1655,143632,143634],{"id":143633},"for-ipad","For iPad",[925,143636,143637],{},"You can also use media query to detect orientation (portrait or landscapse) on the iPad.",[993,143639,143641],{"className":35707,"code":143640,"language":29,"meta":998,"style":998},"\u003Clink rel=\"stylesheet\" media=\"all and (orientation:portrait)\" href=\"portrait.css\">\n\u003Clink rel=\"stylesheet\" media=\"all and (orientation:landscape)\" href=\"landscape.css\">\n",[941,143642,143643,143654],{"__ignoreMap":998},[1002,143644,143645,143647,143649,143652],{"class":1004,"line":1005},[1002,143646,6539],{"class":1030},[1002,143648,47171],{"class":15711},[1002,143650,143651],{"class":1030}," rel=\"stylesheet\" media=\"all and (orientation:portrait)\" href=\"portrait.css\"",[1002,143653,15703],{"class":1015},[1002,143655,143656,143658,143660,143663],{"class":1004,"line":1012},[1002,143657,6539],{"class":1030},[1002,143659,47171],{"class":15711},[1002,143661,143662],{"class":1030}," rel=\"stylesheet\" media=\"all and (orientation:landscape)\" href=\"landscape.css\"",[1002,143664,15703],{"class":1015},[953,143666,143668],{"id":143667},"media-queries-for-internet-explorer","Media Queries for Internet Explorer",[925,143670,143671],{},"Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around.",[1579,143673,143674],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":998,"searchDepth":1012,"depth":1012,"links":143676},[143677,143678,143681,143686],{"id":143024,"depth":1012,"text":143025},{"id":143135,"depth":1012,"text":143136,"children":143679},[143680],{"id":143288,"depth":1047,"text":143289},{"id":143358,"depth":1012,"text":143359,"children":143682},[143683,143684,143685],{"id":143553,"depth":1047,"text":143554},{"id":143610,"depth":1047,"text":143611},{"id":143633,"depth":1047,"text":143634},{"id":143667,"depth":1012,"text":143668},"2014-04-04","\u002Fimages\u002Fblog\u002Ffeatures\u002Fcss3-media-queries.jpg",{},{"title":142,"description":144},"blog\u002Fcss3-media-queries",[16,29],"4IX7pEKNFKttMH3wqR0PTAtDYZzORkLpnKe11GW7bec",{"id":143695,"title":352,"author":920,"body":143696,"date":144711,"description":354,"extension":1591,"image":144712,"meta":144713,"navigation":1050,"path":353,"seo":144714,"stem":144715,"tags":144716,"__hash__":144717},"blog\u002Fblog\u002Fhow -to-use-grunt.md",{"type":922,"value":143697,"toc":144698},[143698,143712,143721,143727,143733,143737,143754,143758,143761,143775,143784,143788,143791,143793,143796,143805,143808,143817,143826,143830,143833,143836,143839,143917,143920,143928,143933,143937,143946,143988,143991,144006,144011,144018,144021,144172,144175,144183,144187,144194,144204,144235,144245,144248,144254,144446,144450,144455,144599,144613,144617,144624,144672,144685,144695],[925,143699,143700,143701,143705,143706,143711],{},"We’ll then look at how to build a simple input validator, using ",[933,143702,89156],{"href":143703,"rel":143704},"http:\u002F\u002Fsass-lang.com\u002F",[937]," as a preprocessor,\nhow to use grunt-css and CssMin to combine and minify our CSS, how to use ",[933,143707,143710],{"href":143708,"rel":143709},"http:\u002F\u002Fhtmlhint.com\u002F",[937],"HTMLHint","to make\nsure our HTML is written correctly, and how to build our compressed assets on the fly.",[925,143713,143714,143715,143720],{},"Lastly, we’ll look at using ",[933,143716,143719],{"href":143717,"rel":143718},"https:\u002F\u002Fgithub.com\u002Fmishoo\u002FUglifyJS",[937],"UglifyJS"," to reduce the size of our JavaScript and ensure that our\nwebsite uses as little bandwidth as possible.",[925,143722,143723],{},[963,143724],{"alt":143725,"src":143726},"Grunt task runner","\u002Fimages\u002Fblog\u002F2014-03-29-how-to-use-grunt\u002Fgrunt-javascript-task-runner-38671482.jpg",[925,143728,143729,143732],{},[933,143730,142849],{"href":142848,"rel":143731},[937]," is a JavaScript task runner that helps you perform repetitive tasks such as minification, compilation, unit testing or linting.",[953,143734,143736],{"id":143735},"getting-started-with-grunt","Getting Started With Grunt",[925,143738,143739,143740,2034,143743,143747,143748,143753],{},"Most developers would agree that the speed and pace of JavaScript development over the last few years has been pretty astounding. Whether with frameworks such as ",[933,143741,137766],{"href":137764,"rel":143742},[937],[933,143744,143746],{"href":134918,"rel":143745},[937],"Ember.js"," or with communities such as ",[933,143749,143752],{"href":143750,"rel":143751},"http:\u002F\u002Fjsbin.com\u002Fwelcome\u002F1\u002Fedit",[937],"JS Bin",", the development of this language is changing not only the way we experience websites as users but also the way we build them.\nWhen you are working with JavaScript, you will likely need to execute multiple tasks regularly. While this is pretty much a given in most projects, it’s a time-consuming and repetitive way to work. Being in such an active community, you would assume that tools are available to automate and speed up this process. This is where Grunt comes in.",[953,143755,143757],{"id":143756},"what-is-grunt","What Is Grunt?",[925,143759,143760],{},"Built on top of Node.js, Grunt is a task-based command-line tool that speeds up workflows by reducing the effort required to prepare assets for production.",[925,143762,143763,143764,107237,143769,143774],{},"It does this by wrapping up jobs into tasks that are compiled automatically as you go along.\nBasically, you can use Grunt on most tasks that you consider to be grunt work and would normally have to manually configure and run yourself.\nWhile earlier versions came bundled with plugins like JSHint and Uglyify, the most recent release (version 0.4) relies on plugins for everything.\nWhat kind of tasks? Well, the list is exhaustive. Suffice it to say, Grunt can handle most things you throw at it, from ",[933,143765,143768],{"href":143766,"rel":143767},"https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Fgrunt-minified",[937],"minifying",[933,143770,143773],{"href":143771,"rel":143772},"https:\u002F\u002Fgithub.com\u002Fgruntjs\u002Fgrunt-contrib-concat",[937],"concatenating"," JavaScript.",[925,143776,143777,143778,143783],{},"It can also be used for a range of tasks unrelated to JavaScript, such as compiling CSS from LESS and Sass. We’ve even used it with ",[933,143779,143782],{"href":143780,"rel":143781},"http:\u002F\u002Fthingm.com\u002Fproducts\u002Fblink-1.html",[937],"blink(1)"," to notify us when a build fails.",[953,143785,143787],{"id":143786},"why-use-grunt","Why Use Grunt?",[925,143789,143790],{},"One of the best things about Grunt is the consistency it brings to teams.\nIf you work collaboratively, you’ll know how frustrating inconsistency in the code can be.\nGrunt enables teams to work with a unified set of commands, thus ensuring that everyone on the team is writing code to the same standard. After all, nothing is more frustrating than a build that fails because of little inconsistencies in how a team of developers writes code.\nGrunt also has an incredibly active community of developers, with new plugins being released regularly. The barrier to entry is relatively low because a vast range of tools and automated tasks are already available to use.",[953,143792,33146],{"id":33145},[925,143794,143795],{},"The first thing to do in order to use Grunt is to set up Node.js. (If you know nothing about Node.js, don’t worry — it merely needs to be installed in order for Grunt to be able to run.)\nOnce Node.js is installed, run this command:",[993,143797,143799],{"className":1797,"code":143798,"language":1799,"meta":998,"style":998},"npm install -g grunt-cli\n",[941,143800,143801],{"__ignoreMap":998},[1002,143802,143803],{"class":1004,"line":1005},[1002,143804,143798],{},[925,143806,143807],{},"To make sure Grunt has been properly installed, you can run the following command:",[993,143809,143811],{"className":1797,"code":143810,"language":1799,"meta":998,"style":998},"grunt --version\n",[941,143812,143813],{"__ignoreMap":998},[1002,143814,143815],{"class":1004,"line":1005},[1002,143816,143810],{},[925,143818,143819,143820,32093,143822,143825],{},"The next step is to create a ",[941,143821,1102],{},[941,143823,143824],{},"gruntfile.js"," file in the root directory of your project.",[953,143827,143829],{"id":143828},"creating-the-packagejson-file","Creating the package.json File",[925,143831,143832],{},"The JSON file enables us to track and install all of our development dependencies.",[925,143834,143835],{},"Then, anyone who works on the project will have the most current dependencies, which ultimately helps to keep the development environments in sync.",[925,143837,143838],{},"Create a file in the root of your project that contains the following:",[993,143840,143842],{"className":1120,"code":143841,"language":1122,"meta":998,"style":998},"{\n \"name\": \"SampleGrunt\",\n \"version\": \"0.1.0\",\n \"author\": \"Sean Amarasinghe\",\n \"private\": true,\n\n \"devDependencies\": {\n \"grunt\": \"~0.4.0\"\n }\n}\n",[941,143843,143844,143848,143859,143869,143879,143889,143893,143899,143909,143913],{"__ignoreMap":998},[1002,143845,143846],{"class":1004,"line":1005},[1002,143847,1129],{"class":1030},[1002,143849,143850,143852,143854,143857],{"class":1004,"line":1012},[1002,143851,1134],{"class":1019},[1002,143853,1137],{"class":1030},[1002,143855,143856],{"class":1034},"\"SampleGrunt\"",[1002,143858,1143],{"class":1030},[1002,143860,143861,143863,143865,143867],{"class":1004,"line":1047},[1002,143862,1148],{"class":1019},[1002,143864,1137],{"class":1030},[1002,143866,92433],{"class":1034},[1002,143868,1143],{"class":1030},[1002,143870,143871,143873,143875,143877],{"class":1004,"line":1054},[1002,143872,41263],{"class":1019},[1002,143874,1137],{"class":1030},[1002,143876,41268],{"class":1034},[1002,143878,1143],{"class":1030},[1002,143880,143881,143883,143885,143887],{"class":1004,"line":1060},[1002,143882,90814],{"class":1019},[1002,143884,1137],{"class":1030},[1002,143886,17397],{"class":1019},[1002,143888,1143],{"class":1030},[1002,143890,143891],{"class":1004,"line":1272},[1002,143892,1051],{"emptyLinePlaceholder":1050},[1002,143894,143895,143897],{"class":1004,"line":1348},[1002,143896,41731],{"class":1019},[1002,143898,15354],{"class":1030},[1002,143900,143901,143904,143906],{"class":1004,"line":1354},[1002,143902,143903],{"class":1019}," \"grunt\"",[1002,143905,1137],{"class":1030},[1002,143907,143908],{"class":1034},"\"~0.4.0\"\n",[1002,143910,143911],{"class":1004,"line":1360},[1002,143912,1269],{"class":1030},[1002,143914,143915],{"class":1004,"line":1366},[1002,143916,1170],{"class":1030},[925,143918,143919],{},"Once you have done this, run the following command:",[993,143921,143922],{"className":1797,"code":92515,"language":1799,"meta":998,"style":998},[941,143923,143924],{"__ignoreMap":998},[1002,143925,143926],{"class":1004,"line":1005},[1002,143927,92515],{},[925,143929,143930,143931,37413],{},"This tells npm which dependencies to install and places them in a ",[941,143932,62080],{},[953,143934,143936],{"id":143935},"creating-the-gruntfilejs-file","Creating the gruntfile.js File",[925,143938,143939,143942,143943,143945],{},[941,143940,143941],{},"Gruntfile.js"," is essentially made up of a wrapper function that takes ",[941,143944,350],{}," as an argument.",[993,143947,143949],{"className":1120,"code":143948,"language":1122,"meta":998,"style":998},"module.exports = function(grunt){\n grunt.initConfig({\n pkg: grunt.file.readJSON('package.json')\n });\n\n grunt.registerTask('default', []);\n};\n",[941,143950,143951,143956,143961,143971,143975,143979,143984],{"__ignoreMap":998},[1002,143952,143953],{"class":1004,"line":1005},[1002,143954,143955],{"class":1030},"module.exports = function(grunt){\n",[1002,143957,143958],{"class":1004,"line":1012},[1002,143959,143960],{"class":18541}," grunt.initConfig({\n",[1002,143962,143963,143966,143968],{"class":1004,"line":1047},[1002,143964,143965],{"class":18541}," pkg",[1002,143967,1137],{"class":1030},[1002,143969,143970],{"class":18541},"grunt.file.readJSON('package.json')\n",[1002,143972,143973],{"class":1004,"line":1054},[1002,143974,8353],{"class":1030},[1002,143976,143977],{"class":1004,"line":1060},[1002,143978,1051],{"emptyLinePlaceholder":1050},[1002,143980,143981],{"class":1004,"line":1272},[1002,143982,143983],{"class":1030}," grunt.registerTask('default', []);\n",[1002,143985,143986],{"class":1004,"line":1348},[1002,143987,1517],{"class":1030},[925,143989,143990],{},"You are now set up to run Grunt from the command line at the root of your project. But if you do so at this stage, you will get the following warning:",[993,143992,143994],{"className":1724,"code":143993,"language":1726,"meta":998,"style":998},"grunt\n> Task \"default\" not found. Use --force to continue.\n",[941,143995,143996,144001],{"__ignoreMap":998},[1002,143997,143998],{"class":1004,"line":1005},[1002,143999,144000],{},"grunt\n",[1002,144002,144003],{"class":1004,"line":1012},[1002,144004,144005],{},"> Task \"default\" not found. Use --force to continue.\n",[925,144007,144008,144009,33813],{},"We’d get this because we haven’t specified any tasks or dependencies yet other than Grunt. So, let’s do that. But first, let’s look at how to extend the ",[941,144010,1102],{},[953,144012,144014,144015,144017],{"id":144013},"extending-the-packagejson-file","Extending the ",[941,144016,1102],{}," File",[925,144019,144020],{},"The best thing about working with Node.js is that it can find packages and install them in one go, simply based on the contents of the package file. To install all of the new dependencies, just add this to the file:",[993,144022,144024],{"className":1120,"code":144023,"language":1122,"meta":998,"style":998},"{\n \"name\": \"SampleGrunt\",\n \"version\": \"0.1.0\",\n \"author\": \"Sean Amarasinghe\",\n \"private\": true,\n\n \"devDependencies\": {\n \"grunt\": \"~0.4.0\",\n \"grunt-contrib-cssmin\": \"*\",\n \"grunt-contrib-sass\": \"*\",\n \"grunt-contrib-uglify\": \"*\",\n \"grunt-contrib-watch\": \"*\",\n \"grunt-cssc\": \"*\",\n \"grunt-htmlhint\": \"*\",\n \"matchdep\": \"*\"\n }\n}\n",[941,144025,144026,144030,144040,144050,144060,144070,144074,144080,144091,144102,144112,144122,144132,144143,144154,144164,144168],{"__ignoreMap":998},[1002,144027,144028],{"class":1004,"line":1005},[1002,144029,1129],{"class":1030},[1002,144031,144032,144034,144036,144038],{"class":1004,"line":1012},[1002,144033,1134],{"class":1019},[1002,144035,1137],{"class":1030},[1002,144037,143856],{"class":1034},[1002,144039,1143],{"class":1030},[1002,144041,144042,144044,144046,144048],{"class":1004,"line":1047},[1002,144043,1148],{"class":1019},[1002,144045,1137],{"class":1030},[1002,144047,92433],{"class":1034},[1002,144049,1143],{"class":1030},[1002,144051,144052,144054,144056,144058],{"class":1004,"line":1054},[1002,144053,41263],{"class":1019},[1002,144055,1137],{"class":1030},[1002,144057,41268],{"class":1034},[1002,144059,1143],{"class":1030},[1002,144061,144062,144064,144066,144068],{"class":1004,"line":1060},[1002,144063,90814],{"class":1019},[1002,144065,1137],{"class":1030},[1002,144067,17397],{"class":1019},[1002,144069,1143],{"class":1030},[1002,144071,144072],{"class":1004,"line":1272},[1002,144073,1051],{"emptyLinePlaceholder":1050},[1002,144075,144076,144078],{"class":1004,"line":1348},[1002,144077,41731],{"class":1019},[1002,144079,15354],{"class":1030},[1002,144081,144082,144084,144086,144089],{"class":1004,"line":1354},[1002,144083,143903],{"class":1019},[1002,144085,1137],{"class":1030},[1002,144087,144088],{"class":1034},"\"~0.4.0\"",[1002,144090,1143],{"class":1030},[1002,144092,144093,144096,144098,144100],{"class":1004,"line":1360},[1002,144094,144095],{"class":1019}," \"grunt-contrib-cssmin\"",[1002,144097,1137],{"class":1030},[1002,144099,68459],{"class":1034},[1002,144101,1143],{"class":1030},[1002,144103,144104,144106,144108,144110],{"class":1004,"line":1366},[1002,144105,92468],{"class":1019},[1002,144107,1137],{"class":1030},[1002,144109,68459],{"class":1034},[1002,144111,1143],{"class":1030},[1002,144113,144114,144116,144118,144120],{"class":1004,"line":1946},[1002,144115,92479],{"class":1019},[1002,144117,1137],{"class":1030},[1002,144119,68459],{"class":1034},[1002,144121,1143],{"class":1030},[1002,144123,144124,144126,144128,144130],{"class":1004,"line":1956},[1002,144125,92490],{"class":1019},[1002,144127,1137],{"class":1030},[1002,144129,68459],{"class":1034},[1002,144131,1143],{"class":1030},[1002,144133,144134,144137,144139,144141],{"class":1004,"line":1961},[1002,144135,144136],{"class":1019}," \"grunt-cssc\"",[1002,144138,1137],{"class":1030},[1002,144140,68459],{"class":1034},[1002,144142,1143],{"class":1030},[1002,144144,144145,144148,144150,144152],{"class":1004,"line":1971},[1002,144146,144147],{"class":1019}," \"grunt-htmlhint\"",[1002,144149,1137],{"class":1030},[1002,144151,68459],{"class":1034},[1002,144153,1143],{"class":1030},[1002,144155,144156,144159,144161],{"class":1004,"line":1980},[1002,144157,144158],{"class":1019}," \"matchdep\"",[1002,144160,1137],{"class":1030},[1002,144162,144163],{"class":1034},"\"*\"\n",[1002,144165,144166],{"class":1004,"line":1985},[1002,144167,1269],{"class":1030},[1002,144169,144170],{"class":1004,"line":1995},[1002,144171,1170],{"class":1030},[925,144173,144174],{},"And to complete the process? You guessed it:",[993,144176,144177],{"className":1797,"code":92515,"language":1799,"meta":998,"style":998},[941,144178,144179],{"__ignoreMap":998},[1002,144180,144181],{"class":1004,"line":1005},[1002,144182,92515],{},[953,144184,144186],{"id":144185},"loading-npm-tasks-in-grunt","Loading npm Tasks In Grunt",[925,144188,144189,144190,144193],{},"Now that the packages have been installed, they have to be loaded in Grunt before we can do anything with them. We can load all of the tasks automatically with a single line of code, using the ",[941,144191,144192],{},"matchdep","dependency. This is a boon for development because now the dependency list will be included only in the package file.",[925,144195,144196,144197,144199,144200,144203],{},"At the top of ",[941,144198,143824],{},", above ",[941,144201,144202],{},"grunt.initConfig",", paste this:",[993,144205,144207],{"className":995,"code":144206,"language":997,"meta":998,"style":998},"require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);\n",[941,144208,144209],{"__ignoreMap":998},[1002,144210,144211,144213,144215,144218,144220,144223,144225,144228,144230,144232],{"class":1004,"line":1005},[1002,144212,1294],{"class":1026},[1002,144214,1031],{"class":1030},[1002,144216,144217],{"class":1034},"'matchdep'",[1002,144219,1539],{"class":1030},[1002,144221,144222],{"class":1026},"filterDev",[1002,144224,1031],{"class":1030},[1002,144226,144227],{"class":1034},"'grunt-*'",[1002,144229,1539],{"class":1030},[1002,144231,8408],{"class":1026},[1002,144233,144234],{"class":1030},"(grunt.loadNpmTasks);\n",[925,144236,144237,144238,144240,144241,144244],{},"Without ",[941,144239,144192],{},", we would have to write ",[941,144242,144243],{},"grunt.loadNpmTasks(\"grunt-task-name\");"," for each dependency, which would quickly add up as we find and install other plugins.",[925,144246,144247],{},"Because the plugins are loaded into Grunt, we may start specifying options.",[925,144249,144250,144251,144253],{},"First off is the HTML file (",[941,144252,37877],{},"), which contains the following:",[993,144255,144257],{"className":37880,"code":144256,"language":383,"meta":998,"style":998},"\u003C!DOCTYPE html>\n\u003Chtml>\n \u003Chead>\n \u003Ctitle>Grunt Sample\u003C\u002Ftitle>\n \u003Clink rel=\"stylesheet\" href=\"build\u002Fcss\u002Fmaster.css\" \u002F>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Clabel for=\"firstname\">Enter your first name\u003C\u002Flabel>\n \u003Cinput id=\"firstname\" name=\"firstname\" type=\"text\" \u002F>\n \u003Cp id=\"namevalidation\">\u003C\u002Fp>\n\n \u003Cscript type=\"text\u002Fjavascript\" src=\"build\u002Fjs\u002Fbase.min.js\">\u003C\u002Fscript>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[941,144258,144259,144269,144277,144285,144298,144319,144327,144335,144356,144382,144401,144405,144430,144438],{"__ignoreMap":998},[1002,144260,144261,144263,144265,144267],{"class":1004,"line":1005},[1002,144262,37888],{"class":1030},[1002,144264,37891],{"class":15711},[1002,144266,21739],{"class":1026},[1002,144268,15703],{"class":1030},[1002,144270,144271,144273,144275],{"class":1004,"line":1012},[1002,144272,6539],{"class":1030},[1002,144274,383],{"class":15711},[1002,144276,15703],{"class":1030},[1002,144278,144279,144281,144283],{"class":1004,"line":1047},[1002,144280,22427],{"class":1030},[1002,144282,32092],{"class":15711},[1002,144284,15703],{"class":1030},[1002,144286,144287,144289,144291,144294,144296],{"class":1004,"line":1054},[1002,144288,15697],{"class":1030},[1002,144290,15029],{"class":15711},[1002,144292,144293],{"class":1030},">Grunt Sample\u003C\u002F",[1002,144295,15029],{"class":15711},[1002,144297,15703],{"class":1030},[1002,144299,144300,144302,144304,144306,144308,144310,144312,144314,144317],{"class":1004,"line":1060},[1002,144301,15697],{"class":1030},[1002,144303,47171],{"class":15711},[1002,144305,47174],{"class":1026},[1002,144307,2393],{"class":1030},[1002,144309,47179],{"class":1034},[1002,144311,47182],{"class":1026},[1002,144313,2393],{"class":1030},[1002,144315,144316],{"class":1034},"\"build\u002Fcss\u002Fmaster.css\"",[1002,144318,15258],{"class":1030},[1002,144320,144321,144323,144325],{"class":1004,"line":1272},[1002,144322,28112],{"class":1030},[1002,144324,32092],{"class":15711},[1002,144326,15703],{"class":1030},[1002,144328,144329,144331,144333],{"class":1004,"line":1348},[1002,144330,22427],{"class":1030},[1002,144332,15034],{"class":15711},[1002,144334,15703],{"class":1030},[1002,144336,144337,144339,144341,144344,144346,144349,144352,144354],{"class":1004,"line":1354},[1002,144338,15697],{"class":1030},[1002,144340,29228],{"class":15711},[1002,144342,144343],{"class":1026}," for",[1002,144345,2393],{"class":1030},[1002,144347,144348],{"class":1034},"\"firstname\"",[1002,144350,144351],{"class":1030},">Enter your first name\u003C\u002F",[1002,144353,29228],{"class":15711},[1002,144355,15703],{"class":1030},[1002,144357,144358,144360,144362,144364,144366,144368,144370,144372,144374,144376,144378,144380],{"class":1004,"line":1360},[1002,144359,15697],{"class":1030},[1002,144361,5803],{"class":15711},[1002,144363,21489],{"class":1026},[1002,144365,2393],{"class":1030},[1002,144367,144348],{"class":1034},[1002,144369,18584],{"class":1026},[1002,144371,2393],{"class":1030},[1002,144373,144348],{"class":1034},[1002,144375,29274],{"class":1026},[1002,144377,2393],{"class":1030},[1002,144379,33950],{"class":1034},[1002,144381,15258],{"class":1030},[1002,144383,144384,144386,144388,144390,144392,144395,144397,144399],{"class":1004,"line":1366},[1002,144385,15697],{"class":1030},[1002,144387,925],{"class":15711},[1002,144389,21489],{"class":1026},[1002,144391,2393],{"class":1030},[1002,144393,144394],{"class":1034},"\"namevalidation\"",[1002,144396,22081],{"class":1030},[1002,144398,925],{"class":15711},[1002,144400,15703],{"class":1030},[1002,144402,144403],{"class":1004,"line":1946},[1002,144404,1051],{"emptyLinePlaceholder":1050},[1002,144406,144407,144409,144411,144413,144415,144417,144419,144421,144424,144426,144428],{"class":1004,"line":1956},[1002,144408,15697],{"class":1030},[1002,144410,22063],{"class":15711},[1002,144412,29274],{"class":1026},[1002,144414,2393],{"class":1030},[1002,144416,91065],{"class":1034},[1002,144418,15242],{"class":1026},[1002,144420,2393],{"class":1030},[1002,144422,144423],{"class":1034},"\"build\u002Fjs\u002Fbase.min.js\"",[1002,144425,22081],{"class":1030},[1002,144427,22063],{"class":15711},[1002,144429,15703],{"class":1030},[1002,144431,144432,144434,144436],{"class":1004,"line":1961},[1002,144433,28112],{"class":1030},[1002,144435,15034],{"class":15711},[1002,144437,15703],{"class":1030},[1002,144439,144440,144442,144444],{"class":1004,"line":1971},[1002,144441,22437],{"class":1030},[1002,144443,383],{"class":15711},[1002,144445,15703],{"class":1030},[953,144447,144449],{"id":144448},"validating-with-htmlhint","Validating With HTMLHint",[925,144451,144452,144453,1813],{},"Add this configuration to ",[941,144454,144202],{},[993,144456,144458],{"className":1120,"code":144457,"language":1122,"meta":998,"style":998},"hint: {\n build: {\n options: {\n 'tag-pair': true,\n 'tagname-lowercase': true,\n 'attr-lowercase': true,\n 'attr-value-double-quotes': true,\n 'doctype-first': true,\n 'spec-char-escape': true,\n 'id-unique': true,\n 'head-script-disabled': true,\n 'style-disabled': true\n },\n src: ['index.html']\n }\n}\n",[941,144459,144460,144465,144472,144479,144490,144501,144512,144523,144534,144545,144556,144567,144576,144580,144591,144595],{"__ignoreMap":998},[1002,144461,144462],{"class":1004,"line":1005},[1002,144463,144464],{"class":1030},"hint: {\n",[1002,144466,144467,144470],{"class":1004,"line":1012},[1002,144468,144469],{"class":18541}," build",[1002,144471,15354],{"class":1030},[1002,144473,144474,144477],{"class":1004,"line":1047},[1002,144475,144476],{"class":18541}," options",[1002,144478,15354],{"class":1030},[1002,144480,144481,144484,144486,144488],{"class":1004,"line":1054},[1002,144482,144483],{"class":18541}," 'tag-pair'",[1002,144485,1137],{"class":1030},[1002,144487,17397],{"class":1019},[1002,144489,1143],{"class":1030},[1002,144491,144492,144495,144497,144499],{"class":1004,"line":1060},[1002,144493,144494],{"class":18541}," 'tagname-lowercase'",[1002,144496,1137],{"class":1030},[1002,144498,17397],{"class":1019},[1002,144500,1143],{"class":1030},[1002,144502,144503,144506,144508,144510],{"class":1004,"line":1272},[1002,144504,144505],{"class":18541}," 'attr-lowercase'",[1002,144507,1137],{"class":1030},[1002,144509,17397],{"class":1019},[1002,144511,1143],{"class":1030},[1002,144513,144514,144517,144519,144521],{"class":1004,"line":1348},[1002,144515,144516],{"class":18541}," 'attr-value-double-quotes'",[1002,144518,1137],{"class":1030},[1002,144520,17397],{"class":1019},[1002,144522,1143],{"class":1030},[1002,144524,144525,144528,144530,144532],{"class":1004,"line":1354},[1002,144526,144527],{"class":18541}," 'doctype-first'",[1002,144529,1137],{"class":1030},[1002,144531,17397],{"class":1019},[1002,144533,1143],{"class":1030},[1002,144535,144536,144539,144541,144543],{"class":1004,"line":1360},[1002,144537,144538],{"class":18541}," 'spec-char-escape'",[1002,144540,1137],{"class":1030},[1002,144542,17397],{"class":1019},[1002,144544,1143],{"class":1030},[1002,144546,144547,144550,144552,144554],{"class":1004,"line":1366},[1002,144548,144549],{"class":18541}," 'id-unique'",[1002,144551,1137],{"class":1030},[1002,144553,17397],{"class":1019},[1002,144555,1143],{"class":1030},[1002,144557,144558,144561,144563,144565],{"class":1004,"line":1946},[1002,144559,144560],{"class":18541}," 'head-script-disabled'",[1002,144562,1137],{"class":1030},[1002,144564,17397],{"class":1019},[1002,144566,1143],{"class":1030},[1002,144568,144569,144572,144574],{"class":1004,"line":1956},[1002,144570,144571],{"class":18541}," 'style-disabled'",[1002,144573,1137],{"class":1030},[1002,144575,40378],{"class":1019},[1002,144577,144578],{"class":1004,"line":1961},[1002,144579,33555],{"class":1030},[1002,144581,144582,144585,144587,144589],{"class":1004,"line":1971},[1002,144583,144584],{"class":18541}," src",[1002,144586,1201],{"class":1030},[1002,144588,63806],{"class":18541},[1002,144590,1207],{"class":1030},[1002,144592,144593],{"class":1004,"line":1980},[1002,144594,2014],{"class":1030},[1002,144596,144597],{"class":1004,"line":1985},[1002,144598,1170],{"class":1030},[925,144600,144601,144602,144605,144606,144608,144609,144612],{},"A plugin is typically configured like this: the plugin’s name (without the",[941,144603,144604],{},"grunt-contrib-\u002Fgrunt-"," prefix), then one or more targets of your choosing (which can be used to create custom options for the plugin for different files), an ",[941,144607,2379],{}," object, and the files it affects. Now, when we run ",[941,144610,144611],{},"grunt htmlhint"," from the terminal, it will check through the source file and make sure that our HTML has no errors! However, manually typing this command several times an hour would get tedious pretty quickly.",[953,144614,144616],{"id":144615},"automate-tasks-that-run-every-time-a-file-is-saved","Automate Tasks That Run Every Time A File Is Saved",[925,144618,3898,144619,144621,144622,1813],{},[941,144620,48465],{}," task can run a unique set of tasks according to the file being saved, using targets. Add this configuration to ",[941,144623,144202],{},[993,144625,144627],{"className":1120,"code":144626,"language":1122,"meta":998,"style":998},"watch: {\n html: {\n files: ['index.html'],\n tasks: ['htmlhint']\n }\n}\n",[941,144628,144629,144634,144641,144652,144664,144668],{"__ignoreMap":998},[1002,144630,144631],{"class":1004,"line":1005},[1002,144632,144633],{"class":1030},"watch: {\n",[1002,144635,144636,144639],{"class":1004,"line":1012},[1002,144637,144638],{"class":18541}," html",[1002,144640,15354],{"class":1030},[1002,144642,144643,144646,144648,144650],{"class":1004,"line":1047},[1002,144644,144645],{"class":18541}," files",[1002,144647,1201],{"class":1030},[1002,144649,63806],{"class":18541},[1002,144651,1903],{"class":1030},[1002,144653,144654,144657,144659,144662],{"class":1004,"line":1054},[1002,144655,144656],{"class":18541}," tasks",[1002,144658,1201],{"class":1030},[1002,144660,144661],{"class":18541},"'htmlhint'",[1002,144663,1207],{"class":1030},[1002,144665,144666],{"class":1004,"line":1060},[1002,144667,2014],{"class":1030},[1002,144669,144670],{"class":1004,"line":1272},[1002,144671,1170],{"class":1030},[925,144673,144674,144675,144678,144679,144681,144682,144684],{},"Then, run ",[941,144676,144677],{},"grunt watch"," in the terminal. Now, try adding a comment to ",[941,144680,37877],{},". You’ll notice that when the file is saved, validation is automatic! This is a boon for development because it means that ",[941,144683,48465],{},"will silently validate as you write code, and it will fail if the code hasn’t passed the relevant tests (and it will tell you what the problem is).",[925,144686,144687,144688,144690,144691,144694],{},"Note that ",[941,144689,144677],{}," will keep running until the terminal is closed or until it is stopped (",[941,144692,144693],{},"Control + C"," on a Mac).",[1579,144696,144697],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":144699},[144700,144701,144702,144703,144704,144705,144706,144708,144709,144710],{"id":143735,"depth":1012,"text":143736},{"id":143756,"depth":1012,"text":143757},{"id":143786,"depth":1012,"text":143787},{"id":33145,"depth":1012,"text":33146},{"id":143828,"depth":1012,"text":143829},{"id":143935,"depth":1012,"text":143936},{"id":144013,"depth":1012,"text":144707},"Extending the package.json File",{"id":144185,"depth":1012,"text":144186},{"id":144448,"depth":1012,"text":144449},{"id":144615,"depth":1012,"text":144616},"2014-03-29","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhow -to-use-grunt.jpg",{},{"title":352,"description":354},"blog\u002Fhow -to-use-grunt",[16,17,350],"k9nSjhHPdHEGdV8Fvz_XBLDICuT1DwZsqzIqIZfObwg",{"id":144719,"title":814,"author":920,"body":144720,"date":145328,"description":816,"extension":1591,"image":145329,"meta":145330,"navigation":1050,"path":815,"seo":145331,"stem":145332,"tags":145333,"__hash__":145334},"blog\u002Fblog\u002Fstructure-your-sass.md",{"type":922,"value":144721,"toc":145321},[144722,144725,144729,144735,144854,144858,144861,144965,144969,144972,144990,144994,144997,145184,145187,145191,145194,145315,145318],[925,144723,144724],{},"Let's look into how you can structure your individual files.",[953,144726,144728],{"id":144727},"basic-directory-structure","Basic directory structure",[925,144730,144731,144732,144734],{},"In your ",[1107,144733,292],{}," folder, you can layout the files as follows:",[993,144736,144738],{"className":1724,"code":144737,"language":1726,"meta":998,"style":998},"tree\nsass\u002F\n|\n|-- modules\u002F # Common modules\n| |-- _all.scss # Include to get all modules\n| |-- _utility.scss # Module name\n| |-- _colors.scss # Etc...\n| ...\n|\n|-- partials\u002F # Partials\n| |-- _base.sass # imports for all mixins + global project variables\n| |-- _buttons.scss # buttons\n| |-- _figures.scss # figures\n| |-- _grids.scss # grids\n| |-- _typography.scss # typography\n| |-- _reset.scss # reset\n| ...\n|\n|-- vendor\u002F # CSS or Sass from other projects\n| |-- _colorpicker.scss\n| |-- _jquery.ui.core.scss\n| ...\n|\n|-- main.scss # primary Sass file\n",[941,144739,144740,144744,144749,144754,144759,144764,144769,144774,144779,144783,144788,144793,144798,144803,144808,144813,144818,144822,144826,144831,144836,144841,144845,144849],{"__ignoreMap":998},[1002,144741,144742],{"class":1004,"line":1005},[1002,144743,92241],{},[1002,144745,144746],{"class":1004,"line":1012},[1002,144747,144748],{},"sass\u002F\n",[1002,144750,144751],{"class":1004,"line":1047},[1002,144752,144753],{},"|\n",[1002,144755,144756],{"class":1004,"line":1054},[1002,144757,144758],{},"|-- modules\u002F # Common modules\n",[1002,144760,144761],{"class":1004,"line":1060},[1002,144762,144763],{},"| |-- _all.scss # Include to get all modules\n",[1002,144765,144766],{"class":1004,"line":1272},[1002,144767,144768],{},"| |-- _utility.scss # Module name\n",[1002,144770,144771],{"class":1004,"line":1348},[1002,144772,144773],{},"| |-- _colors.scss # Etc...\n",[1002,144775,144776],{"class":1004,"line":1354},[1002,144777,144778],{},"| ...\n",[1002,144780,144781],{"class":1004,"line":1360},[1002,144782,144753],{},[1002,144784,144785],{"class":1004,"line":1366},[1002,144786,144787],{},"|-- partials\u002F # Partials\n",[1002,144789,144790],{"class":1004,"line":1946},[1002,144791,144792],{},"| |-- _base.sass # imports for all mixins + global project variables\n",[1002,144794,144795],{"class":1004,"line":1956},[1002,144796,144797],{},"| |-- _buttons.scss # buttons\n",[1002,144799,144800],{"class":1004,"line":1961},[1002,144801,144802],{},"| |-- _figures.scss # figures\n",[1002,144804,144805],{"class":1004,"line":1971},[1002,144806,144807],{},"| |-- _grids.scss # grids\n",[1002,144809,144810],{"class":1004,"line":1980},[1002,144811,144812],{},"| |-- _typography.scss # typography\n",[1002,144814,144815],{"class":1004,"line":1985},[1002,144816,144817],{},"| |-- _reset.scss # reset\n",[1002,144819,144820],{"class":1004,"line":1995},[1002,144821,144778],{},[1002,144823,144824],{"class":1004,"line":2006},[1002,144825,144753],{},[1002,144827,144828],{"class":1004,"line":2011},[1002,144829,144830],{},"|-- vendor\u002F # CSS or Sass from other projects\n",[1002,144832,144833],{"class":1004,"line":2017},[1002,144834,144835],{},"| |-- _colorpicker.scss\n",[1002,144837,144838],{"class":1004,"line":2022},[1002,144839,144840],{},"| |-- _jquery.ui.core.scss\n",[1002,144842,144843],{"class":1004,"line":2442},[1002,144844,144778],{},[1002,144846,144847],{"class":1004,"line":2466},[1002,144848,144753],{},[1002,144850,144851],{"class":1004,"line":2471},[1002,144852,144853],{},"|-- main.scss # primary Sass file\n",[953,144855,144857],{"id":144856},"primary-stylesheet","Primary stylesheet",[925,144859,144860],{},"This allows you to keep your primary Sass file (main.scss in this example) extremely clean:",[993,144862,144864],{"className":35707,"code":144863,"language":29,"meta":998,"style":998},"\u002F\u002F Modules and Variables\n@import \"partials\u002Fbase\";\n\n\u002F\u002F Partials\n@import \"partials\u002Freset\";\n@import \"partials\u002Ftypography\";\n@import \"partials\u002Fbuttons\";\n@import \"partials\u002Ffigures\";\n@import \"partials\u002Fgrids\";\n\u002F\u002F ...\n\n\u002F\u002F Third-party\n@import \"vendor\u002Fcolorpicker\";\n@import \"vendor\u002Fjquery.ui.core\";\n",[941,144865,144866,144871,144880,144884,144889,144898,144907,144916,144925,144934,144938,144942,144947,144956],{"__ignoreMap":998},[1002,144867,144868],{"class":1004,"line":1005},[1002,144869,144870],{"class":1030},"\u002F\u002F Modules and Variables\n",[1002,144872,144873,144875,144878],{"class":1004,"line":1012},[1002,144874,110647],{"class":1015},[1002,144876,144877],{"class":1034}," \"partials\u002Fbase\"",[1002,144879,1407],{"class":1030},[1002,144881,144882],{"class":1004,"line":1047},[1002,144883,1051],{"emptyLinePlaceholder":1050},[1002,144885,144886],{"class":1004,"line":1054},[1002,144887,144888],{"class":1030},"\u002F\u002F Partials\n",[1002,144890,144891,144893,144896],{"class":1004,"line":1060},[1002,144892,110647],{"class":1015},[1002,144894,144895],{"class":1034}," \"partials\u002Freset\"",[1002,144897,1407],{"class":1030},[1002,144899,144900,144902,144905],{"class":1004,"line":1272},[1002,144901,110647],{"class":1015},[1002,144903,144904],{"class":1034}," \"partials\u002Ftypography\"",[1002,144906,1407],{"class":1030},[1002,144908,144909,144911,144914],{"class":1004,"line":1348},[1002,144910,110647],{"class":1015},[1002,144912,144913],{"class":1034}," \"partials\u002Fbuttons\"",[1002,144915,1407],{"class":1030},[1002,144917,144918,144920,144923],{"class":1004,"line":1354},[1002,144919,110647],{"class":1015},[1002,144921,144922],{"class":1034}," \"partials\u002Ffigures\"",[1002,144924,1407],{"class":1030},[1002,144926,144927,144929,144932],{"class":1004,"line":1360},[1002,144928,110647],{"class":1015},[1002,144930,144931],{"class":1034}," \"partials\u002Fgrids\"",[1002,144933,1407],{"class":1030},[1002,144935,144936],{"class":1004,"line":1366},[1002,144937,16739],{"class":1030},[1002,144939,144940],{"class":1004,"line":1946},[1002,144941,1051],{"emptyLinePlaceholder":1050},[1002,144943,144944],{"class":1004,"line":1956},[1002,144945,144946],{"class":1030},"\u002F\u002F Third-party\n",[1002,144948,144949,144951,144954],{"class":1004,"line":1961},[1002,144950,110647],{"class":1015},[1002,144952,144953],{"class":1034}," \"vendor\u002Fcolorpicker\"",[1002,144955,1407],{"class":1030},[1002,144957,144958,144960,144963],{"class":1004,"line":1971},[1002,144959,110647],{"class":1015},[1002,144961,144962],{"class":1034}," \"vendor\u002Fjquery.ui.core\"",[1002,144964,1407],{"class":1030},[953,144966,144968],{"id":144967},"modules-partials-and-vendor","Modules, partials, and vendor",[925,144970,144971],{},"As you can see this divides your project into three basic types of files. Modules, partials, and vendored stylesheets.",[1530,144973,144974,144979,144984],{},[974,144975,3295,144976,144978],{},[1107,144977,104323],{}," directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.",[974,144980,3295,144981,144983],{},[1107,144982,121691],{}," directory is where the meat of your CSS is constructed. A lot of people would like to break their stylesheets into header, content, sidebar, and footer components (and a few others). But ideally you should break things down into much finer categories (typography, buttons, textboxes, selectboxes, etc…).",[974,144985,3295,144986,144989],{},[1107,144987,144988],{},"vendor"," directory is for third-party CSS. This is handy when using prepackaged components developed by other people (or for your own components that are maintained in another project). jQuery UI and a color picker are examples of CSS that you might want to place in the vendor directory. As a general rule it's better to make it a point not to modify files in your vendor directory. If you need to make modifications, add those after the vendored files. This should make it easy for you to update your third-party stylesheets to more current versions in the future.",[953,144991,144993],{"id":144992},"using-a-base-partial","Using a base partial",[925,144995,144996],{},"In the partials directory you will also notice that there is a base partial. The purpose of this partial is to load up Sass environment so that it's easy to construct a stylesheet.\nIt might look something like this:",[993,144998,145000],{"className":35707,"code":144999,"language":29,"meta":998,"style":998},"\u002F\u002F Use Compass ('cause it rocks!)\n@import \"compass\";\n\n\u002F\u002F Font weights\n$light: 100;\n$regular: 400;\n$bold: 600;\n\n\u002F\u002F Base Font\n$base-font-family: sans-serif;\n$base-font-weight: $regular;\n$base-font-size: 13px;\n$base-line-height: 1.4;\n\n\u002F\u002F Fixed Font\n$fixed-font-family: monospace;\n$fixed-font-size: 85%;\n$fixed-line-height: $base-line-height;\n\n\u002F\u002F Headings\n$header-font-weight: $bold;\n\n@import \"modules\u002Fall\";\n",[941,145001,145002,145013,145022,145026,145036,145041,145046,145051,145055,145064,145077,145087,145097,145107,145111,145119,145129,145139,145152,145156,145161,145171,145175],{"__ignoreMap":998},[1002,145003,145004,145007,145010],{"class":1004,"line":1005},[1002,145005,145006],{"class":1030},"\u002F\u002F ",[1002,145008,145009],{"class":15711},"Use",[1002,145011,145012],{"class":1030}," Compass ('cause it rocks!)\n",[1002,145014,145015,145017,145020],{"class":1004,"line":1012},[1002,145016,110647],{"class":1015},[1002,145018,145019],{"class":1034}," \"compass\"",[1002,145021,1407],{"class":1030},[1002,145023,145024],{"class":1004,"line":1047},[1002,145025,1051],{"emptyLinePlaceholder":1050},[1002,145027,145028,145030,145033],{"class":1004,"line":1054},[1002,145029,145006],{"class":1030},[1002,145031,145032],{"class":15711},"Font",[1002,145034,145035],{"class":1030}," weights\n",[1002,145037,145038],{"class":1004,"line":1060},[1002,145039,145040],{"class":1030},"$light: 100;\n",[1002,145042,145043],{"class":1004,"line":1272},[1002,145044,145045],{"class":1030},"$regular: 400;\n",[1002,145047,145048],{"class":1004,"line":1348},[1002,145049,145050],{"class":1030},"$bold: 600;\n",[1002,145052,145053],{"class":1004,"line":1354},[1002,145054,1051],{"emptyLinePlaceholder":1050},[1002,145056,145057,145059,145061],{"class":1004,"line":1360},[1002,145058,145006],{"class":1030},[1002,145060,70815],{"class":15711},[1002,145062,145063],{"class":15711}," Font\n",[1002,145065,145066,145068,145071,145073,145075],{"class":1004,"line":1366},[1002,145067,15864],{"class":1030},[1002,145069,145070],{"class":15711},"base-font-family",[1002,145072,1137],{"class":1030},[1002,145074,72589],{"class":15711},[1002,145076,1407],{"class":1030},[1002,145078,145079,145081,145084],{"class":1004,"line":1946},[1002,145080,15864],{"class":1030},[1002,145082,145083],{"class":15711},"base-font-weight",[1002,145085,145086],{"class":1030},": $regular;\n",[1002,145088,145089,145091,145094],{"class":1004,"line":1956},[1002,145090,15864],{"class":1030},[1002,145092,145093],{"class":15711},"base-font-size",[1002,145095,145096],{"class":1030},": 13px;\n",[1002,145098,145099,145101,145104],{"class":1004,"line":1961},[1002,145100,15864],{"class":1030},[1002,145102,145103],{"class":15711},"base-line-height",[1002,145105,145106],{"class":1030},": 1.4;\n",[1002,145108,145109],{"class":1004,"line":1971},[1002,145110,1051],{"emptyLinePlaceholder":1050},[1002,145112,145113,145116],{"class":1004,"line":1980},[1002,145114,145115],{"class":1030},"\u002F\u002F Fixed ",[1002,145117,145118],{"class":15711},"Font\n",[1002,145120,145121,145123,145126],{"class":1004,"line":1985},[1002,145122,15864],{"class":1030},[1002,145124,145125],{"class":15711},"fixed-font-family",[1002,145127,145128],{"class":1030},": monospace;\n",[1002,145130,145131,145133,145136],{"class":1004,"line":1995},[1002,145132,15864],{"class":1030},[1002,145134,145135],{"class":15711},"fixed-font-size",[1002,145137,145138],{"class":1030},": 85%;\n",[1002,145140,145141,145143,145146,145148,145150],{"class":1004,"line":2006},[1002,145142,15864],{"class":1030},[1002,145144,145145],{"class":15711},"fixed-line-height",[1002,145147,88309],{"class":1030},[1002,145149,145103],{"class":15711},[1002,145151,1407],{"class":1030},[1002,145153,145154],{"class":1004,"line":2011},[1002,145155,1051],{"emptyLinePlaceholder":1050},[1002,145157,145158],{"class":1004,"line":2017},[1002,145159,145160],{"class":1030},"\u002F\u002F Headings\n",[1002,145162,145163,145165,145168],{"class":1004,"line":2022},[1002,145164,15864],{"class":1030},[1002,145166,145167],{"class":15711},"header-font-weight",[1002,145169,145170],{"class":1030},": $bold;\n",[1002,145172,145173],{"class":1004,"line":2442},[1002,145174,1051],{"emptyLinePlaceholder":1050},[1002,145176,145177,145179,145182],{"class":1004,"line":2466},[1002,145178,110647],{"class":1015},[1002,145180,145181],{"class":1034}," \"modules\u002Fall\"",[1002,145183,1407],{"class":1030},[925,145185,145186],{},"The base stylesheet sets a couple of global variables and loads up all of Sass modules. Again modules are not allowed to contain anything that would cause CSS output when importing. Tying all of your varibles and modules up into a base partial gives the access to your entire Sass environment whenever you are setting up a new stylesheet with a single import statement. This allows you to build multiple stylesheets by importing different partials. Multiple stylesheets are handy once a project grows to a certain size.",[953,145188,145190],{"id":145189},"one-step-further","One step further",[925,145192,145193],{},"You can take this pattern one step further. Since we have multiple sub-projects all bundled together in a single app, we bundle each sub-project into a separate top-level directory. Our stylesheet directory looks more like this:",[993,145195,145197],{"className":1724,"code":145196,"language":1726,"meta":998,"style":998},"tree\nsass\u002F\n|\n|-- admin\u002F # Admin sub-project\n| |-- modules\u002F\n| |-- partials\u002F\n| |-- _base.scss\n|\n|-- account\u002F # Account sub-project\n| |-- modules\u002F\n| |-- partials\u002F\n| |-- _base.scss\n|\n|-- site\u002F # Site sub-project\n| |-- modules\u002F\n| |-- partials\u002F\n| |-- _base.scss\n|\n|-- vendor\u002F # CSS or Sass from other projects\n| |-- _colorpicker-1.1.scss\n| |-- _jquery.ui.core-1.9.1.scss\n| ...\n|\n|-- admin.scss # Primary stylesheets for each project\n|-- account.scss\n|-- site.scss\n",[941,145198,145199,145203,145207,145211,145216,145221,145226,145231,145235,145240,145244,145248,145252,145256,145261,145265,145269,145273,145277,145282,145287,145292,145296,145300,145305,145310],{"__ignoreMap":998},[1002,145200,145201],{"class":1004,"line":1005},[1002,145202,92241],{},[1002,145204,145205],{"class":1004,"line":1012},[1002,145206,144748],{},[1002,145208,145209],{"class":1004,"line":1047},[1002,145210,144753],{},[1002,145212,145213],{"class":1004,"line":1054},[1002,145214,145215],{},"|-- admin\u002F # Admin sub-project\n",[1002,145217,145218],{"class":1004,"line":1060},[1002,145219,145220],{},"| |-- modules\u002F\n",[1002,145222,145223],{"class":1004,"line":1272},[1002,145224,145225],{},"| |-- partials\u002F\n",[1002,145227,145228],{"class":1004,"line":1348},[1002,145229,145230],{},"| |-- _base.scss\n",[1002,145232,145233],{"class":1004,"line":1354},[1002,145234,144753],{},[1002,145236,145237],{"class":1004,"line":1360},[1002,145238,145239],{},"|-- account\u002F # Account sub-project\n",[1002,145241,145242],{"class":1004,"line":1366},[1002,145243,145220],{},[1002,145245,145246],{"class":1004,"line":1946},[1002,145247,145225],{},[1002,145249,145250],{"class":1004,"line":1956},[1002,145251,145230],{},[1002,145253,145254],{"class":1004,"line":1961},[1002,145255,144753],{},[1002,145257,145258],{"class":1004,"line":1971},[1002,145259,145260],{},"|-- site\u002F # Site sub-project\n",[1002,145262,145263],{"class":1004,"line":1980},[1002,145264,145220],{},[1002,145266,145267],{"class":1004,"line":1985},[1002,145268,145225],{},[1002,145270,145271],{"class":1004,"line":1995},[1002,145272,145230],{},[1002,145274,145275],{"class":1004,"line":2006},[1002,145276,144753],{},[1002,145278,145279],{"class":1004,"line":2011},[1002,145280,145281],{},"|-- vendor\u002F # CSS or Sass from other projects\n",[1002,145283,145284],{"class":1004,"line":2017},[1002,145285,145286],{},"| |-- _colorpicker-1.1.scss\n",[1002,145288,145289],{"class":1004,"line":2022},[1002,145290,145291],{},"| |-- _jquery.ui.core-1.9.1.scss\n",[1002,145293,145294],{"class":1004,"line":2442},[1002,145295,144778],{},[1002,145297,145298],{"class":1004,"line":2466},[1002,145299,144753],{},[1002,145301,145302],{"class":1004,"line":2471},[1002,145303,145304],{},"|-- admin.scss # Primary stylesheets for each project\n",[1002,145306,145307],{"class":1004,"line":2476},[1002,145308,145309],{},"|-- account.scss\n",[1002,145311,145312],{"class":1004,"line":2481},[1002,145313,145314],{},"|-- site.scss\n",[925,145316,145317],{},"As you can see each sub-project has it's own primary stylesheet, modules, partials, and base. Vendored stylesheets are typically versioned and have their own top-level directory. This is a handy pattern to use on very large Sass projects.",[1579,145319,145320],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":998,"searchDepth":1012,"depth":1012,"links":145322},[145323,145324,145325,145326,145327],{"id":144727,"depth":1012,"text":144728},{"id":144856,"depth":1012,"text":144857},{"id":144967,"depth":1012,"text":144968},{"id":144992,"depth":1012,"text":144993},{"id":145189,"depth":1012,"text":145190},"2014-03-28","\u002Fimages\u002Fblog\u002Ffeatures\u002Fstructure-your-sass.jpg",{},{"title":814,"description":816},"blog\u002Fstructure-your-sass",[16,29,292],"CWLWjzlFJ0IkoL2C7pFSQNrpqNdUGCgH_95AaF098ZA",{"id":145336,"title":147,"author":920,"body":145337,"date":146051,"description":149,"extension":1591,"image":146052,"meta":146053,"navigation":1050,"path":148,"seo":146054,"stem":146055,"tags":146056,"__hash__":146057},"blog\u002Fblog\u002Fdeferred-and-promise-in-jquery.md",{"type":922,"value":145338,"toc":146046},[145339,145346,145349,145352,145355,145392,145395,145398,145401,145457,145460,145504,145510,145513,145518,145588,145596,145682,145685,145690,145780,145783,145787,145790,145793,145796,145799,145802,145807,145969,145978,145984,145988,145997,146000,146024,146027,146040,146043],[925,145340,145341,145342,145345],{},"Long before Facebook and Xbox, If you wanted to catch a mouseclick, you did it with ",[941,145343,145344],{},"element.onclick = someFunction;"," This became a problem when another part of the code also wanted to listen to this click. This was not possible, because you could only assign one function. This was solved at the time with the addEventListener DOM function. With this, you can add as many listener functions as you want. Since then, that’s the way we know how to do this.",[925,145347,145348],{},"Now we have a similar problem with Ajax calls. This time it’s not the events, but the fact that Ajax supports only one callback function. Not only the jQuery $.ajax() call, but also the underlying XMLHttpRequest object.",[953,145350,25647],{"id":145351},"promise",[925,145353,145354],{},"Until jQuery 1.5, a typical $.ajax() call looked like this:",[993,145356,145358],{"className":995,"code":145357,"language":997,"meta":998,"style":998},"$.ajax({\n url: '\u002FmyServerScript',\n success: mySuccessFunction,\n error: myErrorFunction,\n});\n",[941,145359,145360,145369,145378,145383,145388],{"__ignoreMap":998},[1002,145361,145362,145365,145367],{"class":1004,"line":1005},[1002,145363,145364],{"class":1030},"$.",[1002,145366,79258],{"class":1026},[1002,145368,2756],{"class":1030},[1002,145370,145371,145373,145376],{"class":1004,"line":1012},[1002,145372,40812],{"class":1030},[1002,145374,145375],{"class":1034},"'\u002FmyServerScript'",[1002,145377,1143],{"class":1030},[1002,145379,145380],{"class":1004,"line":1047},[1002,145381,145382],{"class":1030}," success: mySuccessFunction,\n",[1002,145384,145385],{"class":1004,"line":1054},[1002,145386,145387],{"class":1030}," error: myErrorFunction,\n",[1002,145389,145390],{"class":1004,"line":1060},[1002,145391,2804],{"class":1030},[925,145393,145394],{},"The $.ajax() call returns a jQuery XMLHttpRequest object. Nothing new so far.",[925,145396,145397],{},"Since version 1.5, the returned object implements the CommonJS Promises\u002FA interface. That’s a mouth full. CommonJS is a initiative to define common and independent interfaces (API’s). Promises\u002FA is one such interface. The advantage is that these are not jQuery specific. For example, if you work with Node.js, there is a good chance you’ll program with this same interface. That’s good.",[925,145399,145400],{},"The way of assigning callbacks with Promises is quite different:",[993,145402,145404],{"className":995,"code":145403,"language":997,"meta":998,"style":998},"var promise = $.ajax({\n url: '\u002FmyServerScript',\n});\n\npromise.done(mySuccessFunction);\npromise.fail(myErrorFunction);\n",[941,145405,145406,145421,145429,145433,145437,145447],{"__ignoreMap":998},[1002,145407,145408,145410,145413,145415,145417,145419],{"class":1004,"line":1005},[1002,145409,18311],{"class":1015},[1002,145411,145412],{"class":1030}," promise ",[1002,145414,2393],{"class":1015},[1002,145416,138399],{"class":1030},[1002,145418,79258],{"class":1026},[1002,145420,2756],{"class":1030},[1002,145422,145423,145425,145427],{"class":1004,"line":1012},[1002,145424,40812],{"class":1030},[1002,145426,145375],{"class":1034},[1002,145428,1143],{"class":1030},[1002,145430,145431],{"class":1004,"line":1047},[1002,145432,2804],{"class":1030},[1002,145434,145435],{"class":1004,"line":1054},[1002,145436,1051],{"emptyLinePlaceholder":1050},[1002,145438,145439,145442,145444],{"class":1004,"line":1060},[1002,145440,145441],{"class":1030},"promise.",[1002,145443,42689],{"class":1026},[1002,145445,145446],{"class":1030},"(mySuccessFunction);\n",[1002,145448,145449,145451,145454],{"class":1004,"line":1272},[1002,145450,145441],{"class":1030},[1002,145452,145453],{"class":1026},"fail",[1002,145455,145456],{"class":1030},"(myErrorFunction);\n",[925,145458,145459],{},"You can combine the done() and fail() functions in one then() function. The code above can be rewritten as:",[993,145461,145463],{"className":995,"code":145462,"language":997,"meta":998,"style":998},"var promise = $.ajax({\n url: '\u002FmyServerScript',\n});\n\npromise.then(mySuccessFunction, myErrorFunction);\n",[941,145464,145465,145479,145487,145491,145495],{"__ignoreMap":998},[1002,145466,145467,145469,145471,145473,145475,145477],{"class":1004,"line":1005},[1002,145468,18311],{"class":1015},[1002,145470,145412],{"class":1030},[1002,145472,2393],{"class":1015},[1002,145474,138399],{"class":1030},[1002,145476,79258],{"class":1026},[1002,145478,2756],{"class":1030},[1002,145480,145481,145483,145485],{"class":1004,"line":1012},[1002,145482,40812],{"class":1030},[1002,145484,145375],{"class":1034},[1002,145486,1143],{"class":1030},[1002,145488,145489],{"class":1004,"line":1047},[1002,145490,2804],{"class":1030},[1002,145492,145493],{"class":1004,"line":1054},[1002,145494,1051],{"emptyLinePlaceholder":1050},[1002,145496,145497,145499,145501],{"class":1004,"line":1060},[1002,145498,145441],{"class":1030},[1002,145500,25658],{"class":1026},[1002,145502,145503],{"class":1030},"(mySuccessFunction, myErrorFunction);\n",[925,145505,145506,145509],{},[928,145507,145508],{},"Okay, the interface has changed, so what’s in it for me?",", you might ask.",[925,145511,145512],{},"The advantages of promises are:",[971,145514,145515],{},[974,145516,145517],{},"You can call the done() and fail() functions more times, with different callbacks. Maybe you have a callback function that stops an animation, one that does a new Ajax call and another function that shows the received data to the visitor.",[993,145519,145521],{"className":995,"code":145520,"language":997,"meta":998,"style":998},"var promise = $.ajax({\n url: '\u002FmyServerScript',\n});\n\npromise.done(myStopAnimationFunction);\npromise.done(myOtherAjaxFunction);\npromise.done(myShowInfoFunction);\npromise.fail(myErrorFunction);\n",[941,145522,145523,145537,145545,145549,145553,145562,145571,145580],{"__ignoreMap":998},[1002,145524,145525,145527,145529,145531,145533,145535],{"class":1004,"line":1005},[1002,145526,18311],{"class":1015},[1002,145528,145412],{"class":1030},[1002,145530,2393],{"class":1015},[1002,145532,138399],{"class":1030},[1002,145534,79258],{"class":1026},[1002,145536,2756],{"class":1030},[1002,145538,145539,145541,145543],{"class":1004,"line":1012},[1002,145540,40812],{"class":1030},[1002,145542,145375],{"class":1034},[1002,145544,1143],{"class":1030},[1002,145546,145547],{"class":1004,"line":1047},[1002,145548,2804],{"class":1030},[1002,145550,145551],{"class":1004,"line":1054},[1002,145552,1051],{"emptyLinePlaceholder":1050},[1002,145554,145555,145557,145559],{"class":1004,"line":1060},[1002,145556,145441],{"class":1030},[1002,145558,42689],{"class":1026},[1002,145560,145561],{"class":1030},"(myStopAnimationFunction);\n",[1002,145563,145564,145566,145568],{"class":1004,"line":1272},[1002,145565,145441],{"class":1030},[1002,145567,42689],{"class":1026},[1002,145569,145570],{"class":1030},"(myOtherAjaxFunction);\n",[1002,145572,145573,145575,145577],{"class":1004,"line":1348},[1002,145574,145441],{"class":1030},[1002,145576,42689],{"class":1026},[1002,145578,145579],{"class":1030},"(myShowInfoFunction);\n",[1002,145581,145582,145584,145586],{"class":1004,"line":1354},[1002,145583,145441],{"class":1030},[1002,145585,145453],{"class":1026},[1002,145587,145456],{"class":1030},[971,145589,145590,145593],{"start":1012},[974,145591,145592],{},"Even after the Ajax call has finished, you can still call the done() and fail() functions and the callbacks are executed immediately. So no messing around with variables holding different states. When an Ajax call has finished, it will end up in either the success state or the failed state and this state will not change.",[974,145594,145595],{},"You can combine promises. Sometimes you need to do two simultaneous Ajax calls and you want to execute a function when both are successfully finished. To do this, you use the new $.when() function.",[993,145597,145599],{"className":995,"code":145598,"language":997,"meta":998,"style":998},"var promise1 = $.ajax('\u002FmyServerScript1');\nvar promise2 = $.ajax('\u002FmyServerScript2');\n\n$.when(promise1, promise2).done(function (xhrObject1, xhrObject2) {\n \u002F\u002F Handle both XHR objects\n});\n",[941,145600,145601,145621,145641,145645,145673,145678],{"__ignoreMap":998},[1002,145602,145603,145605,145608,145610,145612,145614,145616,145619],{"class":1004,"line":1005},[1002,145604,18311],{"class":1015},[1002,145606,145607],{"class":1030}," promise1 ",[1002,145609,2393],{"class":1015},[1002,145611,138399],{"class":1030},[1002,145613,79258],{"class":1026},[1002,145615,1031],{"class":1030},[1002,145617,145618],{"class":1034},"'\u002FmyServerScript1'",[1002,145620,1085],{"class":1030},[1002,145622,145623,145625,145628,145630,145632,145634,145636,145639],{"class":1004,"line":1012},[1002,145624,18311],{"class":1015},[1002,145626,145627],{"class":1030}," promise2 ",[1002,145629,2393],{"class":1015},[1002,145631,138399],{"class":1030},[1002,145633,79258],{"class":1026},[1002,145635,1031],{"class":1030},[1002,145637,145638],{"class":1034},"'\u002FmyServerScript2'",[1002,145640,1085],{"class":1030},[1002,145642,145643],{"class":1004,"line":1047},[1002,145644,1051],{"emptyLinePlaceholder":1050},[1002,145646,145647,145649,145652,145655,145657,145659,145661,145663,145666,145668,145671],{"class":1004,"line":1054},[1002,145648,145364],{"class":1030},[1002,145650,145651],{"class":1026},"when",[1002,145653,145654],{"class":1030},"(promise1, promise2).",[1002,145656,42689],{"class":1026},[1002,145658,1031],{"class":1030},[1002,145660,6965],{"class":1015},[1002,145662,6513],{"class":1030},[1002,145664,145665],{"class":2378},"xhrObject1",[1002,145667,1251],{"class":1030},[1002,145669,145670],{"class":2378},"xhrObject2",[1002,145672,2382],{"class":1030},[1002,145674,145675],{"class":1004,"line":1060},[1002,145676,145677],{"class":1008}," \u002F\u002F Handle both XHR objects\n",[1002,145679,145680],{"class":1004,"line":1272},[1002,145681,2804],{"class":1030},[925,145683,145684],{},"In contrast to what you might expect, the callback functions don’t get the received data as arguments, but the XHR objects. For Ajax requests this is very useful, but if you want to use $.when for other asynchronous code, it will be much harder.",[971,145686,145687],{"start":1054},[974,145688,145689],{},"Since jQuery 1.8, you can chain the then() function sequentially. In the code below, first promise1 is run and when resolved successfully, getStuff is run, returning a promise and when this is resolved successfully, the anonymous function is executed.",[993,145691,145693],{"className":995,"code":145692,"language":997,"meta":998,"style":998},"var promise1 = $.ajax('\u002FmyServerScript1');\n\nfunction getStuff() {\n return $.ajax('\u002FmyServerScript2');\n}\n\npromise1.then(getStuff).then(function (myServerScript2Data) {\n \u002F\u002F Both promises are resolved\n});\n",[941,145694,145695,145713,145717,145726,145740,145744,145748,145771,145776],{"__ignoreMap":998},[1002,145696,145697,145699,145701,145703,145705,145707,145709,145711],{"class":1004,"line":1005},[1002,145698,18311],{"class":1015},[1002,145700,145607],{"class":1030},[1002,145702,2393],{"class":1015},[1002,145704,138399],{"class":1030},[1002,145706,79258],{"class":1026},[1002,145708,1031],{"class":1030},[1002,145710,145618],{"class":1034},[1002,145712,1085],{"class":1030},[1002,145714,145715],{"class":1004,"line":1012},[1002,145716,1051],{"emptyLinePlaceholder":1050},[1002,145718,145719,145721,145724],{"class":1004,"line":1047},[1002,145720,6965],{"class":1015},[1002,145722,145723],{"class":1026}," getStuff",[1002,145725,3025],{"class":1030},[1002,145727,145728,145730,145732,145734,145736,145738],{"class":1004,"line":1054},[1002,145729,15066],{"class":1015},[1002,145731,138399],{"class":1030},[1002,145733,79258],{"class":1026},[1002,145735,1031],{"class":1030},[1002,145737,145638],{"class":1034},[1002,145739,1085],{"class":1030},[1002,145741,145742],{"class":1004,"line":1060},[1002,145743,1170],{"class":1030},[1002,145745,145746],{"class":1004,"line":1272},[1002,145747,1051],{"emptyLinePlaceholder":1050},[1002,145749,145750,145753,145755,145758,145760,145762,145764,145766,145769],{"class":1004,"line":1348},[1002,145751,145752],{"class":1030},"promise1.",[1002,145754,25658],{"class":1026},[1002,145756,145757],{"class":1030},"(getStuff).",[1002,145759,25658],{"class":1026},[1002,145761,1031],{"class":1030},[1002,145763,6965],{"class":1015},[1002,145765,6513],{"class":1030},[1002,145767,145768],{"class":2378},"myServerScript2Data",[1002,145770,2382],{"class":1030},[1002,145772,145773],{"class":1004,"line":1354},[1002,145774,145775],{"class":1008}," \u002F\u002F Both promises are resolved\n",[1002,145777,145778],{"class":1004,"line":1360},[1002,145779,2804],{"class":1030},[925,145781,145782],{},"Every callback function receives the result of the previous asynchronous function, in the case of Ajax, that would be the returned data.",[953,145784,145786],{"id":145785},"deferred","Deferred",[925,145788,145789],{},"So what is a deferred and what is the difference with a promise? As you have seen above, a promise is an object that is returned from an asynchronous function. You need a deferred when you write such a function yourself.",[925,145791,145792],{},"A deferred object can do the same as a promise object, but it has two functions to trigger the done() and fail() functions.",[925,145794,145795],{},"A deferred object has a resolve() functions for a successful result and to execute the functions assigned with done(). The reject() function is for a failed result and executes the functions assigned with fail().",[925,145797,145798],{},"You can give parameters to both the resolve() and reject() functions and they will be passed on to the functions registered with done() and fail().",[925,145800,145801],{},"The promise object does not have resolve() or reject() functions. This is because you give the promise away to other scripts and you don’t want them to resolve or reject the promise.",[925,145803,145804,145805,948],{},"Below is a simple script that illustrates how it works. The html is just an empty div with id ",[1107,145806,13068],{},[993,145808,145810],{"className":995,"code":145809,"language":997,"meta":998,"style":998},"$('#result').html('waiting...');\n\nvar promise = wait();\npromise.done(result);\n\nfunction result() {\n $('#result').html('done');\n}\n\nfunction wait() {\n var deferred = $.Deferred();\n\n setTimeout(function () {\n deferred.resolve();\n }, 2000);\n\n return deferred.promise();\n}\n",[941,145811,145812,145832,145836,145849,145857,145861,145869,145888,145892,145896,145904,145919,145923,145933,145942,145950,145954,145965],{"__ignoreMap":998},[1002,145813,145814,145816,145818,145821,145823,145825,145827,145830],{"class":1004,"line":1005},[1002,145815,15864],{"class":1026},[1002,145817,1031],{"class":1030},[1002,145819,145820],{"class":1034},"'#result'",[1002,145822,1539],{"class":1030},[1002,145824,383],{"class":1026},[1002,145826,1031],{"class":1030},[1002,145828,145829],{"class":1034},"'waiting...'",[1002,145831,1085],{"class":1030},[1002,145833,145834],{"class":1004,"line":1012},[1002,145835,1051],{"emptyLinePlaceholder":1050},[1002,145837,145838,145840,145842,145844,145847],{"class":1004,"line":1047},[1002,145839,18311],{"class":1015},[1002,145841,145412],{"class":1030},[1002,145843,2393],{"class":1015},[1002,145845,145846],{"class":1026}," wait",[1002,145848,1428],{"class":1030},[1002,145850,145851,145853,145855],{"class":1004,"line":1054},[1002,145852,145441],{"class":1030},[1002,145854,42689],{"class":1026},[1002,145856,13363],{"class":1030},[1002,145858,145859],{"class":1004,"line":1060},[1002,145860,1051],{"emptyLinePlaceholder":1050},[1002,145862,145863,145865,145867],{"class":1004,"line":1272},[1002,145864,6965],{"class":1015},[1002,145866,13336],{"class":1026},[1002,145868,3025],{"class":1030},[1002,145870,145871,145873,145875,145877,145879,145881,145883,145886],{"class":1004,"line":1348},[1002,145872,88304],{"class":1026},[1002,145874,1031],{"class":1030},[1002,145876,145820],{"class":1034},[1002,145878,1539],{"class":1030},[1002,145880,383],{"class":1026},[1002,145882,1031],{"class":1030},[1002,145884,145885],{"class":1034},"'done'",[1002,145887,1085],{"class":1030},[1002,145889,145890],{"class":1004,"line":1354},[1002,145891,1170],{"class":1030},[1002,145893,145894],{"class":1004,"line":1360},[1002,145895,1051],{"emptyLinePlaceholder":1050},[1002,145897,145898,145900,145902],{"class":1004,"line":1366},[1002,145899,6965],{"class":1015},[1002,145901,145846],{"class":1026},[1002,145903,3025],{"class":1030},[1002,145905,145906,145908,145911,145913,145915,145917],{"class":1004,"line":1946},[1002,145907,28293],{"class":1015},[1002,145909,145910],{"class":1030}," deferred ",[1002,145912,2393],{"class":1015},[1002,145914,138399],{"class":1030},[1002,145916,145786],{"class":1026},[1002,145918,1428],{"class":1030},[1002,145920,145921],{"class":1004,"line":1956},[1002,145922,1051],{"emptyLinePlaceholder":1050},[1002,145924,145925,145927,145929,145931],{"class":1004,"line":1961},[1002,145926,25606],{"class":1026},[1002,145928,1031],{"class":1030},[1002,145930,6965],{"class":1015},[1002,145932,9772],{"class":1030},[1002,145934,145935,145938,145940],{"class":1004,"line":1971},[1002,145936,145937],{"class":1030}," deferred.",[1002,145939,1243],{"class":1026},[1002,145941,1428],{"class":1030},[1002,145943,145944,145946,145948],{"class":1004,"line":1980},[1002,145945,92010],{"class":1030},[1002,145947,104217],{"class":1019},[1002,145949,1085],{"class":1030},[1002,145951,145952],{"class":1004,"line":1985},[1002,145953,1051],{"emptyLinePlaceholder":1050},[1002,145955,145956,145958,145961,145963],{"class":1004,"line":1995},[1002,145957,15066],{"class":1015},[1002,145959,145960],{"class":1030}," deferred.",[1002,145962,145351],{"class":1026},[1002,145964,1428],{"class":1030},[1002,145966,145967],{"class":1004,"line":2006},[1002,145968,1170],{"class":1030},[925,145970,145971,145972,145977],{},"You can also find this script on ",[933,145973,145976],{"href":145974,"rel":145975},"http:\u002F\u002Fjsfiddle.net\u002FTT3G5\u002F",[937],"jsFiddle",", so that you can experiment with it yourself.",[925,145979,3898,145980,145983],{},[941,145981,145982],{},"wait()"," function is the function returning a promise. This will be resolved with a setTimeout of two seconds. Instead of setTimeout, everything can be used that is asynchronous, like animations, Web workers etcetera. It should be clear that inside the wait() function, we use the deferred object, but we return the limited promise object.",[953,145985,145987],{"id":145986},"criticism","Criticism",[925,145989,145990,145991,145996],{},"Domenic Denicola wrote the article ",[933,145992,145995],{"href":145993,"rel":145994},"https:\u002F\u002Fgist.github.com\u002F3889970",[937],"You’re Missing the Point of Promises"," in which he criticizes jQuery’s implementation of Promises.",[925,145998,145999],{},"Take for example the following code:",[993,146001,146003],{"className":995,"code":146002,"language":997,"meta":998,"style":998},"promise.then(fn1).then(fn2).then(fn3, fail);\n",[941,146004,146005],{"__ignoreMap":998},[1002,146006,146007,146009,146011,146014,146016,146019,146021],{"class":1004,"line":1005},[1002,146008,145441],{"class":1030},[1002,146010,25658],{"class":1026},[1002,146012,146013],{"class":1030},"(fn1).",[1002,146015,25658],{"class":1026},[1002,146017,146018],{"class":1030},"(fn2).",[1002,146020,25658],{"class":1026},[1002,146022,146023],{"class":1030},"(fn3, fail);\n",[925,146025,146026],{},"If an error is thrown in fn1, the fail function should be called. This is a very nice way to handle errors in asynchronous functions. This does not work in jQuery and the writer sees this as a major shortcoming of jQuery.",[925,146028,146029,146030,146033,146034,146039],{},"If you want to use ",[1107,146031,146032],{},"pure"," Promises\u002FA, there are several JavaScript libraries to choose from. For example ",[933,146035,146038],{"href":146036,"rel":146037},"http:\u002F\u002Fdocumentup.com\u002Fkriskowal\u002Fq\u002F",[937],"Q"," by Kristopher Kowal.",[925,146041,146042],{},"This is an article about deferred and promise in jQuery.",[1579,146044,146045],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":146047},[146048,146049,146050],{"id":145351,"depth":1012,"text":25647},{"id":145785,"depth":1012,"text":145786},{"id":145986,"depth":1012,"text":145987},"2014-03-21","\u002Fimages\u002Fblog\u002Ffeatures\u002Fdeferred-and-promise-in-jquery.jpg",{},{"title":147,"description":149},"blog\u002Fdeferred-and-promise-in-jquery",[16,17,106],"n5FDo84SK_B_E17aC4WAEaPm2Nt8S55wN9LWNm9eHAk",{"id":146059,"title":621,"author":920,"body":146060,"date":146051,"description":623,"extension":1591,"image":146286,"meta":146287,"navigation":1050,"path":622,"seo":146288,"stem":146289,"tags":146290,"__hash__":146291},"blog\u002Fblog\u002Fphotoshop-cc-new-features.md",{"type":922,"value":146061,"toc":146264},[146062,146065,146069,146072,146075,146079,146085,146088,146091,146095,146101,146104,146107,146111,146114,146118,146124,146127,146131,146137,146140,146144,146147,146151,146157,146160,146163,146167,146170,146174,146177,146181,146184,146188,146191,146195,146201,146204,146208,146211,146215,146222,146225,146229,146232,146236,146243,146247,146250,146254,146257,146261],[925,146063,146064],{},"The shift to Photoshop CC also brings some long-term benefits like never having software that’s out of date. Let's dive deep into Photoshop CC new features.",[953,146066,146068],{"id":146067},"_01combines-photoshop-standard-and-photoshop-extended","01  Combines Photoshop Standard and Photoshop Extended",[925,146070,146071],{},"Photoshop CC combines Photoshop Standard and Photoshop Extended. So all Photoshop Extended features, including 3D tools, are included in Photoshop CC.                                    ",[925,146073,146074],{},"Before Creative Cloud, two versions of Photoshop existed: Photoshop and Photoshop Extended. The latter included powerful image, video, analysis and 3D tools. With Creative Cloud and Photoshop CC you now get all of this in one version - so you don't have to pay any more to get all the exciting features of Photoshop Extended. It may seem a little, but if you want to build 3D into your workflow, it's a lot…",[953,146076,146078],{"id":146077},"_02-integration-with-behance","02 Integration with Behance",[925,146080,146081],{},[963,146082],{"alt":146083,"src":146084},"Behance","\u002Fimages\u002Fblog\u002F2014-03-21-photoshop-cc-new-features\u002Fdf27e251-019b-469d-97ad-c3f2da36ad76.png",[925,146086,146087],{},"Photoshop CC offers integration with Behance, the online portfolio sharing website for creative professionals. This integration offers the ability to post directly into your Behance gallery from Photoshop.  Along with the integration mentioned above, Photoshop CC subscribers get free access to the Behance Pro-site.",[925,146089,146090],{},"When you join Creative Cloud, you can quickly sign up to Behance and, of course, its ProSite personal portfolio tool - both are free within the CC subscription. The best part? If you want to showcase a WIP, final illustration or anything you've created in Photoshop on Behance, you can upload it directly from Photoshop itself. Just go to File>Share to Behance. If you haven't linked your Behance account, you'll receive step-by-step instructions the first time you try to share. Also, you can sync Behance with ProSite, meaning that a Creative Cloud membership provides a very simple way to publish new work to your portfolio site.",[953,146092,146094],{"id":146093},"_03camera-shake-reduction","03 Camera Shake Reduction",[925,146096,146097],{},[963,146098],{"alt":146099,"src":146100},"Camera Shake Reduction","\u002Fimages\u002Fblog\u002F2014-03-21-photoshop-cc-new-features\u002FScreenshot-Upsample.jpg",[925,146102,146103],{},"Photoshop CC introduces the sneak-peaked ‘deblur’ filter that’s been talked about since 2011, which is now revealed as: Camera Shake Reduction.",[925,146105,146106],{},"We've spoken about Photoshop CC's camera shake reduction previously, but it is still a handy feature new Camera Shake Reduction feature is great for when you've got some shaky shots you need to save for a client mockup or website. Whether your blur was caused by slow shutter speed or a long focal length, Camera Shake Reduction analyses its trajectory and helps restore sharpness - all in an intuitive dialogue of course.",[953,146108,146110],{"id":146109},"_04-advanced-healing-brush-radial-gradient-tool-and-the-upright-tool","04 Advanced Healing Brush, Radial Gradient tool and the Upright tool",[925,146112,146113],{},"Camera Raw 8 will include the new features being showcased in the Photoshop Lightroom 5 public beta, ie Advanced Healing brush, Radial Gradient tool and the Upright tool.",[953,146115,146117],{"id":146116},"_05-smart-sharpen","05. Smart Sharpen",[925,146119,146120],{},[963,146121],{"alt":146122,"src":146123},"Smart Sharpen","\u002Fimages\u002Fblog\u002F2014-03-21-photoshop-cc-new-features\u002FStep08b.jpg",[925,146125,146126],{},"The Smart Sharpen filter will save you so much time that you won't know what to do with it all!\nIn terms of the new features in Photoshop CC, one great addition is the Smart Sharpen filter. Found in the Filter>Sharpen menu, it enables you to quickly reduce noise and halo effects, using adaptive sharpening technology. You can, of course, dynamically preview the effect, as well as compare the result to Photoshop's legacy sharpening tool with the check of a box. You can use presets or save your own, using Amount, Radius and Reduce Noise sliders (amongst many other options) to get the required result.",[953,146128,146130],{"id":146129},"_06-generator-technology","06. Generator technology",[925,146132,146133],{},[963,146134],{"alt":146135,"src":146136},"Generator technology","\u002Fimages\u002Fblog\u002F2014-03-21-photoshop-cc-new-features\u002F9d3d8328-43cc-4d00-8c6b-28597ed55ad2.png",[925,146138,146139],{},"The Photoshop 14.1 update contains a brilliant new feature - and technology - called Generator. This is a brilliant workflow addition and essentially enables you to quickly create image assets in real-time as you work. Simply add a file extension to the name of your layer or layer group, and Photoshop will automatically create a JPG, PNG or GIF from the contents of that layer. If you make a change to that layer, the file is immediately updated. You can even add scaling factors. It's a huge new feature.",[953,146141,146143],{"id":146142},"_07-save-to-cloud","07. Save to Cloud",[925,146145,146146],{},"Picture this: a client wants to see a work in progress but doesn't really understand file formats and the like. Now, using Photoshop CC you can save your files directly to Creative Cloud and then, using the desktop app or browser-based dialog, choose to share files. The client simply receives an email and can view the project in their browser. How's that for a quick and easy project update? What's more, saving files to the Cloud enables you to manage them across multiple machines - desktop, laptop and even mobile devices.",[953,146148,146150],{"id":146149},"_08-intelligent-upsampling","08 Intelligent upsampling",[925,146152,146153],{},[963,146154],{"alt":146155,"src":146156},"Intelligent upsampling","\u002Fimages\u002Fblog\u002F2014-03-21-photoshop-cc-new-features\u002Fc8c0b223-86fd-4fea-b195-26ca951557ab.png",[925,146158,146159],{},"Intelligent upsampling – in Photoshop CC you will be able to make big prints without compromising edge detail or introducing noise.",[925,146161,146162],{},"Scaling up lo-res images is now simple (and plugin-free) with intelligent upsampling. You've been sent a low-res image by a client who wants it blown up to a huge size. What do you do? It used to be that you would have to resort to the likes of the (albeit excellent) plugin Genuine Fractals to upsample your images without a glaring loss of quality. Thankfully, in Photoshop CC you can now do this directly in the app. Combine this with being able to easily share files via Creative Cloud, and suddenly it's easy to show your client exactly what the low-res image will look like at the requested size.",[953,146164,146166],{"id":146165},"_09-special-subscriber-deal-of-999","09 Special subscriber deal of $9.99",[925,146168,146169],{},"Adobe is offering a special subscriber deal of $9.99 for Photoshop CS3 users and above – for the first year.",[953,146171,146173],{"id":146172},"_10-constant-updates","10 Constant updates",[925,146175,146176],{},"It looks there’ll be no Photoshop CS7, and Photoshop CC will evolve with constant updates to subscribers. What this means is that there is no longer any need to wait 18 months to two years for an upgrade!",[953,146178,146180],{"id":146179},"_11-lightroom","11. Lightroom",[925,146182,146183],{},"A perpetual license of Lightroom will still be available as will Photoshop CS6.",[953,146185,146187],{"id":146186},"_12-no-need-to-be-connected-to-internet","12 No need to be connected to internet",[925,146189,146190],{},"You do not need to be connected to the internet to use Photoshop CC. This is a very common misconception. The Photoshop CC software is installed on your computer. However, Adobe will need to periodically check your subscription is current so you’ll need to log on once a month.",[953,146192,146194],{"id":146193},"_13-multi-shape-and-path-selection","13  Multi-shape and path selection",[925,146196,146197],{},[963,146198],{"alt":146199,"src":146200},"Multi-shape","\u002Fimages\u002Fblog\u002F2014-03-21-photoshop-cc-new-features\u002FSelect-Multiple-Paths-1.jpg",[925,146202,146203],{},"The ability to select multiple paths, shapes and vector masks at once is, again, a simple yet very useful addition. Even in multilayered documents with lots of paths, you can easily target the path and any layer you want right on the canvas using a new Filter mode (rather like the Filter mode in the Layers panel introduced in CS6).",[953,146205,146207],{"id":146206},"_14-conditional-actions","14 Conditional actions",[925,146209,146210],{},"Actions are an important part of any professional Photoshop user's workflow - and with Photoshop CC they have become much better. For processing files they are brilliant: you use if\u002Fthen statements to determine image properties before applying your action. They are all based on the rules you set up, so you are in complete control.",[953,146212,146214],{"id":146213},"_15-editable-rounded-rectangles","15 Editable rounded rectangles",[925,146216,146217,146218],{}," \n",[963,146219],{"alt":146220,"src":146221},"Editable rounded rectangles","\u002Fimages\u002Fblog\u002F2014-03-21-photoshop-cc-new-features\u002F383b8161-bd47-4b19-9ee2-ee3b63b0ce9d.png",[925,146223,146224],{},"The editable rounded rectangles feature is great for web designers.\nFor a web designer who wants to export shapes as CSS data for use in another Adobe app such as Muse, editable rounded rectangles can be a lifesaver. You can resize shapes, edit them and re-edit them - before or after they're created.",[953,146226,146228],{"id":146227},"_16-better-3d-tools","16 Better 3D tools",[925,146230,146231],{},"Photoshop CC brings with it some improved 3D tools. For one, the 3D Scene Panel has been enhanced to make it easier to switch between a 2D and 3D workflow (thanks to a more conventional naming scheme and options). Secondly, higher quality live previews help you achieve great looks in less time. Plus, you can easily create better glow effects, scene illumination, and lighting for bumps and textures. Remember that After Effects now comes with Cinema 4D Lite, making your Creative Cloud 3D workflow - particularly across motion projects - a real breeze.",[953,146233,146235],{"id":146234},"_17-css-from-layers","17 CSS From Layers",[925,146237,146238,146239,146242],{},"Web designers rejoice: the new CSS From Layers feature enables you to generate CSS code for specific design elements, and simply copy and paste the code into Dreamweaver or Muse to get the results you want. Let's say you designed a rounded rectangle element on a layer. Just ",[1107,146240,146241],{},"Ctrl","\"\u002Fright-click a layer or layer group and choose Copy CSS from the Context menu. It's as easy as that, and a great way to quickly move from mockups in Photoshop to live code in Dreamweaver or Muse.",[953,146244,146246],{"id":146245},"_18-colour-import-from-web-files","18 Colour import from web files",[925,146248,146249],{},"With this clever new feature you can import colour swatches directly from HTML, CSS or SVG files - which is great when you need to find inspiration for a colour scheme or require help to match an existing scheme. It's another solid example of the excellent workflow features of Photoshop and the rest of Creative Cloud - and undoubtedly one you'll use again and again.",[953,146251,146253],{"id":146252},"_19-improved-type-styles","19 Improved type styles",[925,146255,146256],{},"The improved styles functionality in CC makes it incredibly easy to quickly set typestyles and apply them across your Photoshop document, enabling you to maintain consistency and accuracy across your design projects.\n ",[953,146258,146260],{"id":146259},"_20-expanded-smart-object-support","20 Expanded Smart Object support",[925,146262,146263],{},"Being able to apply effects non-destructively, without actually affecting the pixels, is a huge bonus. It enables you to experiment with different effects without committing or saving a duplicate of the file. In Photoshop CC you can apply Blur Gallery and liquify effects: your original file will stay intact as you push, pull, pucker or bloat the image or video. You can edit or remove the effects at any time, even after saving your file.",{"title":998,"searchDepth":1012,"depth":1012,"links":146265},[146266,146267,146268,146269,146270,146271,146272,146273,146274,146275,146276,146277,146278,146279,146280,146281,146282,146283,146284,146285],{"id":146067,"depth":1012,"text":146068},{"id":146077,"depth":1012,"text":146078},{"id":146093,"depth":1012,"text":146094},{"id":146109,"depth":1012,"text":146110},{"id":146116,"depth":1012,"text":146117},{"id":146129,"depth":1012,"text":146130},{"id":146142,"depth":1012,"text":146143},{"id":146149,"depth":1012,"text":146150},{"id":146165,"depth":1012,"text":146166},{"id":146172,"depth":1012,"text":146173},{"id":146179,"depth":1012,"text":146180},{"id":146186,"depth":1012,"text":146187},{"id":146193,"depth":1012,"text":146194},{"id":146206,"depth":1012,"text":146207},{"id":146213,"depth":1012,"text":146214},{"id":146227,"depth":1012,"text":146228},{"id":146234,"depth":1012,"text":146235},{"id":146245,"depth":1012,"text":146246},{"id":146252,"depth":1012,"text":146253},{"id":146259,"depth":1012,"text":146260},"\u002Fimages\u002Fblog\u002Ffeatures\u002Fphotoshop-cc-new-features.jpg",{},{"title":621,"description":623},"blog\u002Fphotoshop-cc-new-features",[9,112],"eiVVd3mFmnFBbLuNdymg4r3xRlnKr4sFoHNAfVCbXuc",{"id":146293,"title":756,"author":920,"body":146294,"date":147961,"description":758,"extension":1591,"image":147962,"meta":147963,"navigation":1050,"path":757,"seo":147964,"stem":147965,"tags":147966,"__hash__":147967},"blog\u002Fblog\u002Fsass-for-css.md",{"type":922,"value":146295,"toc":147948},[146296,146307,146316,146320,146323,146382,146386,146391,146394,146398,146401,146406,146409,146412,146445,146449,146452,146454,146460,146463,146529,146539,146589,146591,146594,146723,146736,146862,146864,146874,146877,146886,146900,147031,147044,147047,147146,147150,147156,147229,147246,147325,147329,147336,147503,147517,147657,147659,147677,147822,147825,147828,147945],[925,146297,146298,146299,146302,146303,2034,146305,69371],{},"The newer syntax, ",[1107,146300,146301],{},"SCSS",", uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions ",[941,146304,121710],{},[941,146306,48378],{},[925,146308,146309,146310,146315],{},"Let's start by ",[933,146311,146314],{"href":146312,"rel":146313},"http:\u002F\u002Fsass-lang.com\u002Finstall",[937],"installing"," Sass first.",[953,146317,146319],{"id":146318},"installing-sass","Installing Sass",[925,146321,146322],{},"ApplicationsThere are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it).",[1530,146324,146325,146332,146340,146347,146355,146361,146368,146375],{},[974,146326,146327,146331],{},[933,146328,92335],{"href":146329,"rel":146330},"http:\u002F\u002Fincident57.com\u002Fcodekit\u002F",[937]," (Paid)",[974,146333,146334,146339],{},[933,146335,146338],{"href":146336,"rel":146337},"http:\u002F\u002Fcompass.handlino.com\u002F",[937],"Compass.app"," (Paid, Open Source)",[974,146341,146342,146331],{},[933,146343,146346],{"href":146344,"rel":146345},"http:\u002F\u002Fhammerformac.com\u002F",[937],"Hammer",[974,146348,146349,146354],{},[933,146350,146353],{"href":146351,"rel":146352},"http:\u002F\u002Fkoala-app.com\u002F",[937],"Koala"," (Open Source)",[974,146356,146357,146339],{},[933,146358,89150],{"href":146359,"rel":146360},"http:\u002F\u002Flivereload.com\u002F",[937],[974,146362,146363,146331],{},[933,146364,146367],{"href":146365,"rel":146366},"http:\u002F\u002Fmixture.io\u002F",[937],"Mixture",[974,146369,146370,146339],{},[933,146371,146374],{"href":146372,"rel":146373},"http:\u002F\u002Falphapixels.com\u002Fprepros\u002F",[937],"Prepros",[974,146376,146377,146354],{},[933,146378,146381],{"href":146379,"rel":146380},"http:\u002F\u002Fmhs.github.io\u002Fscout-app\u002F",[937],"Scout",[1655,146383,146385],{"id":146384},"command-line","Command line",[925,146387,146388],{},[1107,146389,146390],{},"Linux",[925,146392,146393],{},"If you're using a distribution of Linux, you'll need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm.",[925,146395,146396],{},[1107,146397,40538],{},[925,146399,146400],{},"Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It's a single-click installer that will get everything set up for you super fast.\nThe installer will also install a Ruby command line powershell application that will let you use the Ruby libraries.",[925,146402,146403],{},[1107,146404,146405],{},"Mac",[925,146407,146408],{},"If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you're using a Mac, congratulations, Ruby comes pre-installed.",[925,146410,146411],{},"Here's the quickest way we've found to start using Sass by using the command line:",[1530,146413,146414,146420,146434],{},[974,146415,146416,146417,948],{},"Open your Terminal or Command Prompt. On the Mac the Terminal.app comes installed by default. It's located in your \"Utilities\" folder. On Windows, run ",[941,146418,146419],{},"cmd",[974,146421,146422,146423,146426,146427,146430,146431],{},"Install Sass. Ruby uses Gems to manage its various packages of code like Sass. In your open terminal window type:",[941,146424,146425],{},"gem install sass","\nThis will install Sass and any dependencies for you. It's pretty magical. If you get an error message then it's likely you will need to use the ",[941,146428,146429],{},"sudo"," command to install the Sass gem. It would look like:",[941,146432,146433],{},"sudo gem install sass",[974,146435,146436,146437,146440,146441,146444],{},"Double-check. You should now have Sass installed, but it never hurts to double-check. In your terminal application you can type: ",[941,146438,146439],{},"sass -v","\nIt should return ",[941,146442,146443],{},"Sass 3.3.2 (Maptastic Maple)",". Congratulations! You've successfully installed Sass.",[953,146446,146448],{"id":146447},"pre-processing","Pre-processing",[925,146450,146451],{},"CSS on its own can lead to stylesheets getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.\nOnce you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.",[953,146453,111658],{"id":111657},[925,146455,146456,146457,146459],{},"Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the ",[941,146458,15864],{}," symbol to make something a variable.",[925,146461,146462],{},"Here's an example:",[993,146464,146466],{"className":35707,"code":146465,"language":29,"meta":998,"style":998},"$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n font: 100% $font-stack;\n color: $primary-color;\n}\n",[941,146467,146468,146482,146495,146499,146505,146518,146525],{"__ignoreMap":998},[1002,146469,146470,146472,146475,146478,146480],{"class":1004,"line":1005},[1002,146471,15864],{"class":1030},[1002,146473,146474],{"class":15711},"font-stack",[1002,146476,146477],{"class":1030},": Helvetica, ",[1002,146479,72589],{"class":15711},[1002,146481,1407],{"class":1030},[1002,146483,146484,146486,146489,146491,146493],{"class":1004,"line":1012},[1002,146485,15864],{"class":1030},[1002,146487,146488],{"class":15711},"primary-color",[1002,146490,1137],{"class":1030},[1002,146492,110838],{"class":18541},[1002,146494,1407],{"class":1030},[1002,146496,146497],{"class":1004,"line":1047},[1002,146498,1051],{"emptyLinePlaceholder":1050},[1002,146500,146501,146503],{"class":1004,"line":1054},[1002,146502,15034],{"class":15711},[1002,146504,1457],{"class":1030},[1002,146506,146507,146509,146511,146513,146515],{"class":1004,"line":1060},[1002,146508,72905],{"class":1019},[1002,146510,1137],{"class":1030},[1002,146512,4791],{"class":1019},[1002,146514,32598],{"class":1015},[1002,146516,146517],{"class":1030}," $font-stack;\n",[1002,146519,146520,146522],{"class":1004,"line":1272},[1002,146521,35952],{"class":1019},[1002,146523,146524],{"class":1030},": $primary-color;\n",[1002,146526,146527],{"class":1004,"line":1348},[1002,146528,1170],{"class":1030},[925,146530,146531,146532,2034,146535,146538],{},"When the Sass is processed, it takes the variables we define for the ",[941,146533,146534],{},"$font-stack",[941,146536,146537],{},"$primary-color"," and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.",[993,146540,146542],{"className":35707,"code":146541,"language":29,"meta":998,"style":998},"body {\n font:\n 100% Helvetica,\n sans-serif;\n color: #333;\n}\n",[941,146543,146544,146550,146556,146568,146575,146585],{"__ignoreMap":998},[1002,146545,146546,146548],{"class":1004,"line":1005},[1002,146547,15034],{"class":15711},[1002,146549,1457],{"class":1030},[1002,146551,146552,146554],{"class":1004,"line":1012},[1002,146553,72905],{"class":1019},[1002,146555,2616],{"class":1030},[1002,146557,146558,146561,146563,146566],{"class":1004,"line":1047},[1002,146559,146560],{"class":1019}," 100",[1002,146562,32598],{"class":1015},[1002,146564,146565],{"class":1019}," Helvetica",[1002,146567,1143],{"class":1030},[1002,146569,146570,146573],{"class":1004,"line":1054},[1002,146571,146572],{"class":1019}," sans-serif",[1002,146574,1407],{"class":1030},[1002,146576,146577,146579,146581,146583],{"class":1004,"line":1060},[1002,146578,35952],{"class":1019},[1002,146580,1137],{"class":1030},[1002,146582,110838],{"class":1019},[1002,146584,1407],{"class":1030},[1002,146586,146587],{"class":1004,"line":1272},[1002,146588,1170],{"class":1030},[953,146590,44766],{"id":64735},[925,146592,146593],{},"When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.\nHere's an example of some typical styles for a site's navigation:",[993,146595,146597],{"className":35707,"code":146596,"language":29,"meta":998,"style":998},"nav {\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n li {\n display: inline-block;\n }\n a {\n display: block;\n padding: 6px 12px;\n text-decoration: none;\n }\n}\n",[941,146598,146599,146605,146612,146623,146633,146644,146648,146655,146666,146670,146677,146687,146704,146715,146719],{"__ignoreMap":998},[1002,146600,146601,146603],{"class":1004,"line":1005},[1002,146602,109351],{"class":15711},[1002,146604,1457],{"class":1030},[1002,146606,146607,146610],{"class":1004,"line":1012},[1002,146608,146609],{"class":1019}," ul",[1002,146611,1457],{"class":1030},[1002,146613,146614,146617,146619,146621],{"class":1004,"line":1047},[1002,146615,146616],{"class":1019}," margin",[1002,146618,1137],{"class":1030},[1002,146620,5867],{"class":1019},[1002,146622,1407],{"class":1030},[1002,146624,146625,146627,146629,146631],{"class":1004,"line":1054},[1002,146626,88292],{"class":1019},[1002,146628,1137],{"class":1030},[1002,146630,5867],{"class":1019},[1002,146632,1407],{"class":1030},[1002,146634,146635,146638,146640,146642],{"class":1004,"line":1060},[1002,146636,146637],{"class":1019}," list-style",[1002,146639,1137],{"class":1030},[1002,146641,36079],{"class":1019},[1002,146643,1407],{"class":1030},[1002,146645,146646],{"class":1004,"line":1272},[1002,146647,1269],{"class":1030},[1002,146649,146650,146653],{"class":1004,"line":1348},[1002,146651,146652],{"class":15711}," li",[1002,146654,1457],{"class":1030},[1002,146656,146657,146660,146662,146664],{"class":1004,"line":1354},[1002,146658,146659],{"class":1019}," display",[1002,146661,1137],{"class":1030},[1002,146663,37259],{"class":1019},[1002,146665,1407],{"class":1030},[1002,146667,146668],{"class":1004,"line":1360},[1002,146669,1269],{"class":1030},[1002,146671,146672,146675],{"class":1004,"line":1366},[1002,146673,146674],{"class":15711}," a",[1002,146676,1457],{"class":1030},[1002,146678,146679,146681,146683,146685],{"class":1004,"line":1946},[1002,146680,146659],{"class":1019},[1002,146682,1137],{"class":1030},[1002,146684,71253],{"class":1019},[1002,146686,1407],{"class":1030},[1002,146688,146689,146691,146693,146695,146697,146700,146702],{"class":1004,"line":1956},[1002,146690,88292],{"class":1019},[1002,146692,1137],{"class":1030},[1002,146694,51334],{"class":1019},[1002,146696,43835],{"class":1015},[1002,146698,146699],{"class":1019}," 12",[1002,146701,43835],{"class":1015},[1002,146703,1407],{"class":1030},[1002,146705,146706,146709,146711,146713],{"class":1004,"line":1961},[1002,146707,146708],{"class":1019}," text-decoration",[1002,146710,1137],{"class":1030},[1002,146712,36079],{"class":1019},[1002,146714,1407],{"class":1030},[1002,146716,146717],{"class":1004,"line":1971},[1002,146718,1269],{"class":1030},[1002,146720,146721],{"class":1004,"line":1980},[1002,146722,1170],{"class":1030},[925,146724,146725,146726,1251,146728,36227,146730,146732,146733,146735],{},"You'll notice that the ",[941,146727,1530],{},[941,146729,974],{},[941,146731,933],{}," selectors are nested inside the ",[941,146734,109351],{}," selector.\nThis is a great way to organize your CSS and make it more readable.\nWhen you generate the CSS you'll get something like this:",[993,146737,146739],{"className":35707,"code":146738,"language":29,"meta":998,"style":998},"nav ul {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\nnav li {\n display: inline-block;\n}\n\nnav a {\n display: block;\n padding: 6px 12px;\n text-decoration: none;\n}\n",[941,146740,146741,146750,146760,146770,146780,146784,146788,146796,146806,146810,146814,146822,146832,146848,146858],{"__ignoreMap":998},[1002,146742,146743,146745,146748],{"class":1004,"line":1005},[1002,146744,109351],{"class":15711},[1002,146746,146747],{"class":15711}," ul",[1002,146749,1457],{"class":1030},[1002,146751,146752,146754,146756,146758],{"class":1004,"line":1012},[1002,146753,37384],{"class":1019},[1002,146755,1137],{"class":1030},[1002,146757,5867],{"class":1019},[1002,146759,1407],{"class":1030},[1002,146761,146762,146764,146766,146768],{"class":1004,"line":1047},[1002,146763,37280],{"class":1019},[1002,146765,1137],{"class":1030},[1002,146767,5867],{"class":1019},[1002,146769,1407],{"class":1030},[1002,146771,146772,146774,146776,146778],{"class":1004,"line":1054},[1002,146773,43756],{"class":1019},[1002,146775,1137],{"class":1030},[1002,146777,36079],{"class":1019},[1002,146779,1407],{"class":1030},[1002,146781,146782],{"class":1004,"line":1060},[1002,146783,1170],{"class":1030},[1002,146785,146786],{"class":1004,"line":1272},[1002,146787,1051],{"emptyLinePlaceholder":1050},[1002,146789,146790,146792,146794],{"class":1004,"line":1348},[1002,146791,109351],{"class":15711},[1002,146793,35730],{"class":15711},[1002,146795,1457],{"class":1030},[1002,146797,146798,146800,146802,146804],{"class":1004,"line":1354},[1002,146799,37254],{"class":1019},[1002,146801,1137],{"class":1030},[1002,146803,37259],{"class":1019},[1002,146805,1407],{"class":1030},[1002,146807,146808],{"class":1004,"line":1360},[1002,146809,1170],{"class":1030},[1002,146811,146812],{"class":1004,"line":1366},[1002,146813,1051],{"emptyLinePlaceholder":1050},[1002,146815,146816,146818,146820],{"class":1004,"line":1946},[1002,146817,109351],{"class":15711},[1002,146819,117944],{"class":15711},[1002,146821,1457],{"class":1030},[1002,146823,146824,146826,146828,146830],{"class":1004,"line":1956},[1002,146825,37254],{"class":1019},[1002,146827,1137],{"class":1030},[1002,146829,71253],{"class":1019},[1002,146831,1407],{"class":1030},[1002,146833,146834,146836,146838,146840,146842,146844,146846],{"class":1004,"line":1961},[1002,146835,37280],{"class":1019},[1002,146837,1137],{"class":1030},[1002,146839,51334],{"class":1019},[1002,146841,43835],{"class":1015},[1002,146843,146699],{"class":1019},[1002,146845,43835],{"class":1015},[1002,146847,1407],{"class":1030},[1002,146849,146850,146852,146854,146856],{"class":1004,"line":1971},[1002,146851,117975],{"class":1019},[1002,146853,1137],{"class":1030},[1002,146855,36079],{"class":1019},[1002,146857,1407],{"class":1030},[1002,146859,146860],{"class":1004,"line":1980},[1002,146861,1170],{"class":1030},[953,146863,121692],{"id":121691},[925,146865,146866,146867,146870,146871,146873],{},"You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like ",[941,146868,146869],{},"_partial.scss",". The underscore lets Sass know that the file is only a partial file and that it should be generated into a CSS file. Sass partials are used with the ",[941,146872,110647],{},"directive.",[953,146875,146876],{"id":943},"Import",[925,146878,146879,146880,146882,146883,146885],{},"CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use ",[941,146881,110647],{},"in CSS it creates another HTTP request. Sass builds on top of the current CSS",[941,146884,110647],{}," but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.",[925,146887,146888,146889,2034,146892,146895,146896,1291,146898,948],{},"Let's say you have a couple of Sass files, ",[941,146890,146891],{},"reset.scss",[941,146893,146894],{},"base.scss",". We want to import ",[941,146897,146891],{},[941,146899,146894],{},[993,146901,146903],{"className":35707,"code":146902,"language":29,"meta":998,"style":998},"\u002F* _reset.scss *\u002F\n\nhtml,\nbody,\nul,\nol {\n margin: 0;\n padding: 0;\n}\n\n\u002F* base.scss *\u002F\n\n@import 'reset';\n\nbody {\n font-size:\n 100% Helvetica,\n sans-serif;\n background-color: #efefef;\n}\n",[941,146904,146905,146910,146914,146920,146926,146932,146938,146948,146958,146962,146966,146971,146975,146984,146988,146994,147000,147010,147016,147027],{"__ignoreMap":998},[1002,146906,146907],{"class":1004,"line":1005},[1002,146908,146909],{"class":1008},"\u002F* _reset.scss *\u002F\n",[1002,146911,146912],{"class":1004,"line":1012},[1002,146913,1051],{"emptyLinePlaceholder":1050},[1002,146915,146916,146918],{"class":1004,"line":1047},[1002,146917,383],{"class":15711},[1002,146919,1143],{"class":1030},[1002,146921,146922,146924],{"class":1004,"line":1054},[1002,146923,15034],{"class":15711},[1002,146925,1143],{"class":1030},[1002,146927,146928,146930],{"class":1004,"line":1060},[1002,146929,1530],{"class":15711},[1002,146931,1143],{"class":1030},[1002,146933,146934,146936],{"class":1004,"line":1272},[1002,146935,971],{"class":15711},[1002,146937,1457],{"class":1030},[1002,146939,146940,146942,146944,146946],{"class":1004,"line":1348},[1002,146941,37384],{"class":1019},[1002,146943,1137],{"class":1030},[1002,146945,5867],{"class":1019},[1002,146947,1407],{"class":1030},[1002,146949,146950,146952,146954,146956],{"class":1004,"line":1354},[1002,146951,37280],{"class":1019},[1002,146953,1137],{"class":1030},[1002,146955,5867],{"class":1019},[1002,146957,1407],{"class":1030},[1002,146959,146960],{"class":1004,"line":1360},[1002,146961,1170],{"class":1030},[1002,146963,146964],{"class":1004,"line":1366},[1002,146965,1051],{"emptyLinePlaceholder":1050},[1002,146967,146968],{"class":1004,"line":1946},[1002,146969,146970],{"class":1008},"\u002F* base.scss *\u002F\n",[1002,146972,146973],{"class":1004,"line":1956},[1002,146974,1051],{"emptyLinePlaceholder":1050},[1002,146976,146977,146979,146982],{"class":1004,"line":1961},[1002,146978,110647],{"class":1015},[1002,146980,146981],{"class":1034}," 'reset'",[1002,146983,1407],{"class":1030},[1002,146985,146986],{"class":1004,"line":1971},[1002,146987,1051],{"emptyLinePlaceholder":1050},[1002,146989,146990,146992],{"class":1004,"line":1980},[1002,146991,15034],{"class":15711},[1002,146993,1457],{"class":1030},[1002,146995,146996,146998],{"class":1004,"line":1985},[1002,146997,37355],{"class":1019},[1002,146999,2616],{"class":1030},[1002,147001,147002,147004,147006,147008],{"class":1004,"line":1995},[1002,147003,146560],{"class":1019},[1002,147005,32598],{"class":1015},[1002,147007,146565],{"class":1019},[1002,147009,1143],{"class":1030},[1002,147011,147012,147014],{"class":1004,"line":2006},[1002,147013,146572],{"class":1019},[1002,147015,1407],{"class":1030},[1002,147017,147018,147020,147022,147025],{"class":1004,"line":2011},[1002,147019,35963],{"class":1019},[1002,147021,1137],{"class":1030},[1002,147023,147024],{"class":1019},"#efefef",[1002,147026,1407],{"class":1030},[1002,147028,147029],{"class":1004,"line":2017},[1002,147030,1170],{"class":1030},[925,147032,147033,147034,147037,147038,147040,147041,147043],{},"Notice we're using ",[941,147035,147036],{},"@import 'reset';"," in the ",[941,147039,146894],{}," file. When you import a file you don't need to include the file extension ",[941,147042,48378],{}," Sass is smart and will figure it out for you.",[925,147045,147046],{},"When you generate the CSS you'll get:",[993,147048,147050],{"className":35707,"code":147049,"language":29,"meta":998,"style":998},"html,\nbody,\nul,\nol {\n margin: 0;\n padding: 0;\n}\n\nbody {\n background-color: #efefef;\n font-size:\n 100% Helvetica,\n sans-serif;\n}\n",[941,147051,147052,147058,147064,147070,147076,147086,147096,147100,147104,147110,147120,147126,147136,147142],{"__ignoreMap":998},[1002,147053,147054,147056],{"class":1004,"line":1005},[1002,147055,383],{"class":15711},[1002,147057,1143],{"class":1030},[1002,147059,147060,147062],{"class":1004,"line":1012},[1002,147061,15034],{"class":15711},[1002,147063,1143],{"class":1030},[1002,147065,147066,147068],{"class":1004,"line":1047},[1002,147067,1530],{"class":15711},[1002,147069,1143],{"class":1030},[1002,147071,147072,147074],{"class":1004,"line":1054},[1002,147073,971],{"class":15711},[1002,147075,1457],{"class":1030},[1002,147077,147078,147080,147082,147084],{"class":1004,"line":1060},[1002,147079,37384],{"class":1019},[1002,147081,1137],{"class":1030},[1002,147083,5867],{"class":1019},[1002,147085,1407],{"class":1030},[1002,147087,147088,147090,147092,147094],{"class":1004,"line":1272},[1002,147089,37280],{"class":1019},[1002,147091,1137],{"class":1030},[1002,147093,5867],{"class":1019},[1002,147095,1407],{"class":1030},[1002,147097,147098],{"class":1004,"line":1348},[1002,147099,1170],{"class":1030},[1002,147101,147102],{"class":1004,"line":1354},[1002,147103,1051],{"emptyLinePlaceholder":1050},[1002,147105,147106,147108],{"class":1004,"line":1360},[1002,147107,15034],{"class":15711},[1002,147109,1457],{"class":1030},[1002,147111,147112,147114,147116,147118],{"class":1004,"line":1366},[1002,147113,35963],{"class":1019},[1002,147115,1137],{"class":1030},[1002,147117,147024],{"class":1019},[1002,147119,1407],{"class":1030},[1002,147121,147122,147124],{"class":1004,"line":1946},[1002,147123,37355],{"class":1019},[1002,147125,2616],{"class":1030},[1002,147127,147128,147130,147132,147134],{"class":1004,"line":1956},[1002,147129,146560],{"class":1019},[1002,147131,32598],{"class":1015},[1002,147133,146565],{"class":1019},[1002,147135,1143],{"class":1030},[1002,147137,147138,147140],{"class":1004,"line":1961},[1002,147139,146572],{"class":1019},[1002,147141,1407],{"class":1030},[1002,147143,147144],{"class":1004,"line":1971},[1002,147145,1170],{"class":1030},[953,147147,147149],{"id":147148},"mixins","Mixins",[925,147151,147152,147153,948],{},"Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for ",[941,147154,147155],{},"border-radius",[993,147157,147159],{"className":35707,"code":147158,"language":29,"meta":998,"style":998},"@mixin border-radius($radius) {\n -webkit-border-radius: $radius;\n -moz-border-radius: $radius;\n -ms-border-radius: $radius;\n -o-border-radius: $radius;\n border-radius: $radius;\n}\n\n.box {\n @include border-radius(10px);\n}\n",[941,147160,147161,147168,147173,147178,147183,147188,147195,147199,147203,147209,147225],{"__ignoreMap":998},[1002,147162,147163,147165],{"class":1004,"line":1005},[1002,147164,87888],{"class":1015},[1002,147166,147167],{"class":1030}," border-radius($radius) {\n",[1002,147169,147170],{"class":1004,"line":1012},[1002,147171,147172],{"class":1030}," -webkit-border-radius: $radius;\n",[1002,147174,147175],{"class":1004,"line":1047},[1002,147176,147177],{"class":1030}," -moz-border-radius: $radius;\n",[1002,147179,147180],{"class":1004,"line":1054},[1002,147181,147182],{"class":1030}," -ms-border-radius: $radius;\n",[1002,147184,147185],{"class":1004,"line":1060},[1002,147186,147187],{"class":1030}," -o-border-radius: $radius;\n",[1002,147189,147190,147192],{"class":1004,"line":1272},[1002,147191,72528],{"class":15711},[1002,147193,147194],{"class":1030},": $radius;\n",[1002,147196,147197],{"class":1004,"line":1348},[1002,147198,1170],{"class":1030},[1002,147200,147201],{"class":1004,"line":1354},[1002,147202,1051],{"emptyLinePlaceholder":1050},[1002,147204,147205,147207],{"class":1004,"line":1360},[1002,147206,71069],{"class":1026},[1002,147208,1457],{"class":1030},[1002,147210,147211,147213,147215,147218,147221,147223],{"class":1004,"line":1366},[1002,147212,17196],{"class":1030},[1002,147214,43818],{"class":1019},[1002,147216,147217],{"class":1019}," border-radius",[1002,147219,147220],{"class":1030},"(10",[1002,147222,43835],{"class":1019},[1002,147224,1085],{"class":1030},[1002,147226,147227],{"class":1004,"line":1946},[1002,147228,1170],{"class":1030},[925,147230,147231,147232,147234,147235,147237,147238,147241,147242,147245],{},"To create a mixin you use the ",[941,147233,87888],{}," directive and give it a name. We've named our mixin ",[941,147236,147155],{},".\nWe're also using the variable ",[941,147239,147240],{},"$radius"," inside the parentheses so we can pass in a radius of whatever we want.\nAfter you create your mixin, you can then use it as a CSS declaration starting with",[941,147243,147244],{},"@include"," followed by the name of the mixin.\nWhen your CSS is generated it'll look like this:",[993,147247,147249],{"className":35707,"code":147248,"language":29,"meta":998,"style":998},".box {\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n -ms-border-radius: 10px;\n -o-border-radius: 10px;\n border-radius: 10px;\n}\n",[941,147250,147251,147257,147270,147283,147296,147309,147321],{"__ignoreMap":998},[1002,147252,147253,147255],{"class":1004,"line":1005},[1002,147254,71069],{"class":1026},[1002,147256,1457],{"class":1030},[1002,147258,147259,147262,147264,147266,147268],{"class":1004,"line":1012},[1002,147260,147261],{"class":1019}," -webkit-border-radius",[1002,147263,1137],{"class":1030},[1002,147265,4818],{"class":1019},[1002,147267,43835],{"class":1015},[1002,147269,1407],{"class":1030},[1002,147271,147272,147275,147277,147279,147281],{"class":1004,"line":1047},[1002,147273,147274],{"class":1019}," -moz-border-radius",[1002,147276,1137],{"class":1030},[1002,147278,4818],{"class":1019},[1002,147280,43835],{"class":1015},[1002,147282,1407],{"class":1030},[1002,147284,147285,147288,147290,147292,147294],{"class":1004,"line":1054},[1002,147286,147287],{"class":1019}," -ms-border-radius",[1002,147289,1137],{"class":1030},[1002,147291,4818],{"class":1019},[1002,147293,43835],{"class":1015},[1002,147295,1407],{"class":1030},[1002,147297,147298,147301,147303,147305,147307],{"class":1004,"line":1060},[1002,147299,147300],{"class":1019}," -o-border-radius",[1002,147302,1137],{"class":1030},[1002,147304,4818],{"class":1019},[1002,147306,43835],{"class":1015},[1002,147308,1407],{"class":1030},[1002,147310,147311,147313,147315,147317,147319],{"class":1004,"line":1272},[1002,147312,72528],{"class":1019},[1002,147314,1137],{"class":1030},[1002,147316,4818],{"class":1019},[1002,147318,43835],{"class":1015},[1002,147320,1407],{"class":1030},[1002,147322,147323],{"class":1004,"line":1348},[1002,147324,1170],{"class":1030},[953,147326,147328],{"id":147327},"extendinheritance","Extend\u002FInheritance",[925,147330,147331,147332,147335],{},"This is one of the most useful features of Sass. Using ",[941,147333,147334],{},"@extend"," lets you share a set of CSS properties from one selector to another. It helps keep your Sass for CSS very DRY. In our example, we're going to create a simple series of messaging for errors, warnings and successes.",[993,147337,147339],{"className":35707,"code":147338,"language":29,"meta":998,"style":998},".message {\n border: 1px solid #ccc;\n padding: 10px;\n color: #333;\n}\n\n.success {\n @extend .message;\n border-color: green;\n}\n\n.error {\n @extend .message;\n border-color: red;\n}\n\n.warning {\n @extend .message;\n border-color: yellow;\n}\n",[941,147340,147341,147348,147364,147376,147386,147390,147394,147401,147414,147424,147428,147432,147439,147451,147461,147465,147469,147476,147488,147499],{"__ignoreMap":998},[1002,147342,147343,147346],{"class":1004,"line":1005},[1002,147344,147345],{"class":1026},".message",[1002,147347,1457],{"class":1030},[1002,147349,147350,147352,147354,147356,147358,147360,147362],{"class":1004,"line":1012},[1002,147351,71181],{"class":1019},[1002,147353,1137],{"class":1030},[1002,147355,6211],{"class":1019},[1002,147357,43835],{"class":1015},[1002,147359,43838],{"class":1019},[1002,147361,121770],{"class":1019},[1002,147363,1407],{"class":1030},[1002,147365,147366,147368,147370,147372,147374],{"class":1004,"line":1047},[1002,147367,37280],{"class":1019},[1002,147369,1137],{"class":1030},[1002,147371,4818],{"class":1019},[1002,147373,43835],{"class":1015},[1002,147375,1407],{"class":1030},[1002,147377,147378,147380,147382,147384],{"class":1004,"line":1054},[1002,147379,35952],{"class":1019},[1002,147381,1137],{"class":1030},[1002,147383,110838],{"class":1019},[1002,147385,1407],{"class":1030},[1002,147387,147388],{"class":1004,"line":1060},[1002,147389,1170],{"class":1030},[1002,147391,147392],{"class":1004,"line":1272},[1002,147393,1051],{"emptyLinePlaceholder":1050},[1002,147395,147396,147399],{"class":1004,"line":1348},[1002,147397,147398],{"class":1026},".success",[1002,147400,1457],{"class":1030},[1002,147402,147403,147405,147407,147410,147412],{"class":1004,"line":1354},[1002,147404,17196],{"class":1030},[1002,147406,106592],{"class":1019},[1002,147408,147409],{"class":1030}," .",[1002,147411,7100],{"class":1019},[1002,147413,1407],{"class":1030},[1002,147415,147416,147418,147420,147422],{"class":1004,"line":1360},[1002,147417,73250],{"class":1019},[1002,147419,1137],{"class":1030},[1002,147421,122288],{"class":1019},[1002,147423,1407],{"class":1030},[1002,147425,147426],{"class":1004,"line":1366},[1002,147427,1170],{"class":1030},[1002,147429,147430],{"class":1004,"line":1946},[1002,147431,1051],{"emptyLinePlaceholder":1050},[1002,147433,147434,147437],{"class":1004,"line":1956},[1002,147435,147436],{"class":1026},".error",[1002,147438,1457],{"class":1030},[1002,147440,147441,147443,147445,147447,147449],{"class":1004,"line":1961},[1002,147442,17196],{"class":1030},[1002,147444,106592],{"class":1019},[1002,147446,147409],{"class":1030},[1002,147448,7100],{"class":1019},[1002,147450,1407],{"class":1030},[1002,147452,147453,147455,147457,147459],{"class":1004,"line":1971},[1002,147454,73250],{"class":1019},[1002,147456,1137],{"class":1030},[1002,147458,70923],{"class":1019},[1002,147460,1407],{"class":1030},[1002,147462,147463],{"class":1004,"line":1980},[1002,147464,1170],{"class":1030},[1002,147466,147467],{"class":1004,"line":1985},[1002,147468,1051],{"emptyLinePlaceholder":1050},[1002,147470,147471,147474],{"class":1004,"line":1995},[1002,147472,147473],{"class":1026},".warning",[1002,147475,1457],{"class":1030},[1002,147477,147478,147480,147482,147484,147486],{"class":1004,"line":2006},[1002,147479,17196],{"class":1030},[1002,147481,106592],{"class":1019},[1002,147483,147409],{"class":1030},[1002,147485,7100],{"class":1019},[1002,147487,1407],{"class":1030},[1002,147489,147490,147492,147494,147497],{"class":1004,"line":2011},[1002,147491,73250],{"class":1019},[1002,147493,1137],{"class":1030},[1002,147495,147496],{"class":1019},"yellow",[1002,147498,1407],{"class":1030},[1002,147500,147501],{"class":1004,"line":2017},[1002,147502,1170],{"class":1030},[925,147504,147505,147506,147508,147509,1251,147511,147513,147514,147516],{},"What the above code does is allow you to take the CSS properties in ",[941,147507,147345],{},"and apply them to ",[941,147510,147398],{},[941,147512,147436],{},", & ",[941,147515,147473],{},". The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks like:",[993,147518,147520],{"className":35707,"code":147519,"language":29,"meta":998,"style":998},".message,\n.success,\n.error,\n.warning {\n border: 1px solid #cccccc;\n padding: 10px;\n color: #333;\n}\n.success {\n border-color: green;\n}\n\n.error {\n border-color: red;\n}\n\n.warning {\n border-color: yellow;\n}\n",[941,147521,147522,147528,147534,147540,147546,147563,147575,147585,147589,147595,147605,147609,147613,147619,147629,147633,147637,147643,147653],{"__ignoreMap":998},[1002,147523,147524,147526],{"class":1004,"line":1005},[1002,147525,147345],{"class":1026},[1002,147527,1143],{"class":1030},[1002,147529,147530,147532],{"class":1004,"line":1012},[1002,147531,147398],{"class":1026},[1002,147533,1143],{"class":1030},[1002,147535,147536,147538],{"class":1004,"line":1047},[1002,147537,147436],{"class":1026},[1002,147539,1143],{"class":1030},[1002,147541,147542,147544],{"class":1004,"line":1054},[1002,147543,147473],{"class":1026},[1002,147545,1457],{"class":1030},[1002,147547,147548,147550,147552,147554,147556,147558,147561],{"class":1004,"line":1060},[1002,147549,71181],{"class":1019},[1002,147551,1137],{"class":1030},[1002,147553,6211],{"class":1019},[1002,147555,43835],{"class":1015},[1002,147557,43838],{"class":1019},[1002,147559,147560],{"class":1019}," #cccccc",[1002,147562,1407],{"class":1030},[1002,147564,147565,147567,147569,147571,147573],{"class":1004,"line":1272},[1002,147566,37280],{"class":1019},[1002,147568,1137],{"class":1030},[1002,147570,4818],{"class":1019},[1002,147572,43835],{"class":1015},[1002,147574,1407],{"class":1030},[1002,147576,147577,147579,147581,147583],{"class":1004,"line":1348},[1002,147578,35952],{"class":1019},[1002,147580,1137],{"class":1030},[1002,147582,110838],{"class":1019},[1002,147584,1407],{"class":1030},[1002,147586,147587],{"class":1004,"line":1354},[1002,147588,1170],{"class":1030},[1002,147590,147591,147593],{"class":1004,"line":1360},[1002,147592,147398],{"class":1026},[1002,147594,1457],{"class":1030},[1002,147596,147597,147599,147601,147603],{"class":1004,"line":1366},[1002,147598,73250],{"class":1019},[1002,147600,1137],{"class":1030},[1002,147602,122288],{"class":1019},[1002,147604,1407],{"class":1030},[1002,147606,147607],{"class":1004,"line":1946},[1002,147608,1170],{"class":1030},[1002,147610,147611],{"class":1004,"line":1956},[1002,147612,1051],{"emptyLinePlaceholder":1050},[1002,147614,147615,147617],{"class":1004,"line":1961},[1002,147616,147436],{"class":1026},[1002,147618,1457],{"class":1030},[1002,147620,147621,147623,147625,147627],{"class":1004,"line":1971},[1002,147622,73250],{"class":1019},[1002,147624,1137],{"class":1030},[1002,147626,70923],{"class":1019},[1002,147628,1407],{"class":1030},[1002,147630,147631],{"class":1004,"line":1980},[1002,147632,1170],{"class":1030},[1002,147634,147635],{"class":1004,"line":1985},[1002,147636,1051],{"emptyLinePlaceholder":1050},[1002,147638,147639,147641],{"class":1004,"line":1995},[1002,147640,147473],{"class":1026},[1002,147642,1457],{"class":1030},[1002,147644,147645,147647,147649,147651],{"class":1004,"line":2006},[1002,147646,73250],{"class":1019},[1002,147648,1137],{"class":1030},[1002,147650,147496],{"class":1019},[1002,147652,1407],{"class":1030},[1002,147654,147655],{"class":1004,"line":2011},[1002,147656,1170],{"class":1030},[953,147658,112137],{"id":112136},[925,147660,147661,147662,1251,147664,1251,147666,1251,147668,36227,147670,147672,147673,86891,147675,948],{},"Doing math in your CSS is very helpful. Sass has a handful of standard math operators like ",[941,147663,5064],{},[941,147665,5101],{},[941,147667,4703],{},[941,147669,4685],{},[941,147671,32598],{},".\nIn our example we're going to do some simple math to calculate widths for an ",[941,147674,109176],{},[941,147676,15712],{},[993,147678,147680],{"className":35707,"code":147679,"language":29,"meta":998,"style":998},".container {\n width: 100%;\n}\n\narticle[role='main'] {\n float: left;\n width: 600px \u002F 960px * 100%;\n}\n\naside[role='complimentary'] {\n float: right;\n width: 300px \u002F 960px * 100%;\n}\n",[941,147681,147682,147688,147700,147704,147708,147725,147735,147761,147765,147769,147784,147794,147818],{"__ignoreMap":998},[1002,147683,147684,147686],{"class":1004,"line":1005},[1002,147685,72462],{"class":1026},[1002,147687,1457],{"class":1030},[1002,147689,147690,147692,147694,147696,147698],{"class":1004,"line":1012},[1002,147691,37240],{"class":1019},[1002,147693,1137],{"class":1030},[1002,147695,4791],{"class":1019},[1002,147697,32598],{"class":1015},[1002,147699,1407],{"class":1030},[1002,147701,147702],{"class":1004,"line":1047},[1002,147703,1170],{"class":1030},[1002,147705,147706],{"class":1004,"line":1054},[1002,147707,1051],{"emptyLinePlaceholder":1050},[1002,147709,147710,147712,147714,147717,147719,147722],{"class":1004,"line":1060},[1002,147711,15712],{"class":15711},[1002,147713,31462],{"class":1030},[1002,147715,147716],{"class":1026},"role",[1002,147718,2393],{"class":1015},[1002,147720,147721],{"class":1034},"'main'",[1002,147723,147724],{"class":1030},"] {\n",[1002,147726,147727,147729,147731,147733],{"class":1004,"line":1272},[1002,147728,108353],{"class":1019},[1002,147730,1137],{"class":1030},[1002,147732,39753],{"class":1019},[1002,147734,1407],{"class":1030},[1002,147736,147737,147739,147741,147743,147745,147747,147750,147752,147755,147757,147759],{"class":1004,"line":1348},[1002,147738,37240],{"class":1019},[1002,147740,1137],{"class":1030},[1002,147742,72601],{"class":1019},[1002,147744,43835],{"class":1015},[1002,147746,88043],{"class":1030},[1002,147748,147749],{"class":1019},"960",[1002,147751,43835],{"class":1015},[1002,147753,147754],{"class":1030}," * ",[1002,147756,4791],{"class":1019},[1002,147758,32598],{"class":1015},[1002,147760,1407],{"class":1030},[1002,147762,147763],{"class":1004,"line":1354},[1002,147764,1170],{"class":1030},[1002,147766,147767],{"class":1004,"line":1360},[1002,147768,1051],{"emptyLinePlaceholder":1050},[1002,147770,147771,147773,147775,147777,147779,147782],{"class":1004,"line":1366},[1002,147772,109176],{"class":15711},[1002,147774,31462],{"class":1030},[1002,147776,147716],{"class":1026},[1002,147778,2393],{"class":1015},[1002,147780,147781],{"class":1034},"'complimentary'",[1002,147783,147724],{"class":1030},[1002,147785,147786,147788,147790,147792],{"class":1004,"line":1946},[1002,147787,108353],{"class":1019},[1002,147789,1137],{"class":1030},[1002,147791,88217],{"class":1019},[1002,147793,1407],{"class":1030},[1002,147795,147796,147798,147800,147802,147804,147806,147808,147810,147812,147814,147816],{"class":1004,"line":1956},[1002,147797,37240],{"class":1019},[1002,147799,1137],{"class":1030},[1002,147801,122498],{"class":1019},[1002,147803,43835],{"class":1015},[1002,147805,88043],{"class":1030},[1002,147807,147749],{"class":1019},[1002,147809,43835],{"class":1015},[1002,147811,147754],{"class":1030},[1002,147813,4791],{"class":1019},[1002,147815,32598],{"class":1015},[1002,147817,1407],{"class":1030},[1002,147819,147820],{"class":1004,"line":1961},[1002,147821,1170],{"class":1030},[925,147823,147824],{},"We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.",[925,147826,147827],{},"The generated CSS will look like:",[993,147829,147831],{"className":35707,"code":147830,"language":29,"meta":998,"style":998},".container {\n width: 100%;\n}\n\narticle[role='main'] {\n float: left;\n width: 62.5%;\n}\n\naside[role='complimentary'] {\n float: right;\n width: 31.25%;\n}\n",[941,147832,147833,147839,147851,147855,147859,147873,147883,147896,147900,147904,147918,147928,147941],{"__ignoreMap":998},[1002,147834,147835,147837],{"class":1004,"line":1005},[1002,147836,72462],{"class":1026},[1002,147838,1457],{"class":1030},[1002,147840,147841,147843,147845,147847,147849],{"class":1004,"line":1012},[1002,147842,37240],{"class":1019},[1002,147844,1137],{"class":1030},[1002,147846,4791],{"class":1019},[1002,147848,32598],{"class":1015},[1002,147850,1407],{"class":1030},[1002,147852,147853],{"class":1004,"line":1047},[1002,147854,1170],{"class":1030},[1002,147856,147857],{"class":1004,"line":1054},[1002,147858,1051],{"emptyLinePlaceholder":1050},[1002,147860,147861,147863,147865,147867,147869,147871],{"class":1004,"line":1060},[1002,147862,15712],{"class":15711},[1002,147864,31462],{"class":1030},[1002,147866,147716],{"class":1026},[1002,147868,2393],{"class":1015},[1002,147870,147721],{"class":1034},[1002,147872,147724],{"class":1030},[1002,147874,147875,147877,147879,147881],{"class":1004,"line":1272},[1002,147876,108353],{"class":1019},[1002,147878,1137],{"class":1030},[1002,147880,39753],{"class":1019},[1002,147882,1407],{"class":1030},[1002,147884,147885,147887,147889,147892,147894],{"class":1004,"line":1348},[1002,147886,37240],{"class":1019},[1002,147888,1137],{"class":1030},[1002,147890,147891],{"class":1019},"62.5",[1002,147893,32598],{"class":1015},[1002,147895,1407],{"class":1030},[1002,147897,147898],{"class":1004,"line":1354},[1002,147899,1170],{"class":1030},[1002,147901,147902],{"class":1004,"line":1360},[1002,147903,1051],{"emptyLinePlaceholder":1050},[1002,147905,147906,147908,147910,147912,147914,147916],{"class":1004,"line":1366},[1002,147907,109176],{"class":15711},[1002,147909,31462],{"class":1030},[1002,147911,147716],{"class":1026},[1002,147913,2393],{"class":1015},[1002,147915,147781],{"class":1034},[1002,147917,147724],{"class":1030},[1002,147919,147920,147922,147924,147926],{"class":1004,"line":1946},[1002,147921,108353],{"class":1019},[1002,147923,1137],{"class":1030},[1002,147925,88217],{"class":1019},[1002,147927,1407],{"class":1030},[1002,147929,147930,147932,147934,147937,147939],{"class":1004,"line":1956},[1002,147931,37240],{"class":1019},[1002,147933,1137],{"class":1030},[1002,147935,147936],{"class":1019},"31.25",[1002,147938,32598],{"class":1015},[1002,147940,1407],{"class":1030},[1002,147942,147943],{"class":1004,"line":1961},[1002,147944,1170],{"class":1030},[1579,147946,147947],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":998,"searchDepth":1012,"depth":1012,"links":147949},[147950,147953,147954,147955,147956,147957,147958,147959,147960],{"id":146318,"depth":1012,"text":146319,"children":147951},[147952],{"id":146384,"depth":1047,"text":146385},{"id":146447,"depth":1012,"text":146448},{"id":111657,"depth":1012,"text":111658},{"id":64735,"depth":1012,"text":44766},{"id":121691,"depth":1012,"text":121692},{"id":943,"depth":1012,"text":146876},{"id":147148,"depth":1012,"text":147149},{"id":147327,"depth":1012,"text":147328},{"id":112136,"depth":1012,"text":112137},"2014-03-14","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsass-for-css.jpg",{},{"title":756,"description":758},"blog\u002Fsass-for-css",[16,29,292],"YK2rwfnj5WYqSjs44VhLOvNo9flVWfdUWYmz2vGlZwM",{"id":147969,"title":114,"author":920,"body":147970,"date":148163,"description":116,"extension":1591,"image":148164,"meta":148165,"navigation":1050,"path":115,"seo":148166,"stem":148167,"tags":148168,"__hash__":148169},"blog\u002Fblog\u002Fcreate-favicons-in-photoshop.md",{"type":922,"value":147971,"toc":148158},[147972,147975,147979,147986,147991,147994,147998,148001,148006,148021,148026,148029,148034,148041,148050,148055,148061,148064,148069,148075,148082,148088,148091,148095,148101,148149,148156],[925,147973,147974],{},"You can create favicons yourself by making ICO files in Photoshop.\nSo let's look at how we can create favicons with Photoshop.",[953,147976,147978],{"id":147977},"what-is-a-favicon","What is a Favicon?",[925,147980,147981,147982,147985],{},"Short for ",[941,147983,147984],{},"favorite icon",", a favicon is a small, usually 16×16 px size logo which you can use on your website. If a browser supports it, it will display the favicon in the places like the address bar, the bookmarks bar, tabs, page history, browsing data, etc.",[925,147987,147988],{},[963,147989],{"alt":147984,"src":147990},"\u002Fimages\u002Fblog\u002F2014-03-13-create-favicons-in-photoshop\u002F13-03-201411-35-05AM.png",[925,147992,147993],{},"Favicons are saved as ICO files, a file format that saves multiple images at different sizes for scaling purposes. All icons in Windows, from desktop executables to Start Menu applications, are saved as .ico file extensions.",[953,147995,147997],{"id":147996},"creating-ico-files-in-photoshop","Creating ICO Files in Photoshop",[925,147999,148000],{},"Photoshop is a great and flexible graphics editing program for creating custom favicons. However, in order to save files under the .ico file extension in Photoshop, you have to download a separate plug-in. Luckily, this is really easy to do.",[925,148002,148003],{},[1107,148004,148005],{},"Step 1 – Install the plug-in",[925,148007,148008,148009,148014,148015,148020],{},"You can find the plug-in at a website called ",[933,148010,148013],{"href":148011,"rel":148012},"http:\u002F\u002Fwww.telegraphics.com.au\u002Fsw\u002F",[937],"Telegraphics",".\nYou’re looking for the download labeled ",[933,148016,148019],{"href":148017,"rel":148018},"http:\u002F\u002Fwww.telegraphics.com.au\u002Fsw\u002Fproduct\u002FICOFormat",[937],"ICOFormat",", which is available for both Mac and Windows.\nTo install the plug-in, first make sure Photoshop is closed. Extract the downloaded files and place them in the Plug-Ins > File Formats sub-folder in your designated Adobe Photoshop location.",[925,148022,148023],{},[963,148024],{"alt":70442,"src":148025},"\u002Fimages\u002Fblog\u002F2014-03-13-create-favicons-in-photoshop\u002FUdemy-Photoshop-ICO-02.png",[925,148027,148028],{},"Now when you open Photoshop, create a new document, click Save As, and expand the drop-down menu, the ICO file type should be an option.",[925,148030,148031],{},[1107,148032,148033],{},"Step 2 – Create your favicon in a 64×64 document",[925,148035,148036,148037],{},"If you’re a total pro and able to work within the confines of 16×16 pixels, by all means, go for it! But if you need a little more space to work with, you can start out with a document that is 64×64 pixels, and then scale it down later.\n \n",[963,148038],{"alt":148039,"src":148040},"64×64 document","\u002Fimages\u002Fblog\u002F2014-03-13-create-favicons-in-photoshop\u002F2014-03-13_22-18-38.jpg",[925,148042,148043,148044,148046,148047],{},"For our example favicon, we’ve created a simple gradient background and a single letter ",[1107,148045,15318],{}," to represent our ",[1107,148048,148049],{},"brand.",[925,148051,148052],{},[1107,148053,148054],{},"Step 3 – Scale it down to 16×16",[925,148056,148057],{},[963,148058],{"alt":148059,"src":148060},"16×16","\u002Fimages\u002Fblog\u002F2014-03-13-create-favicons-in-photoshop\u002F2014-03-13_22-30-49.jpg",[925,148062,148063],{},"Now it’s time to resize the favicon so it’s compatible with web browsers. Go to Image > Image Size in the menu at the top, or press Alt+Ctrl+I, and change the size to 16×16. Make sure that’s pixels, and not inches.\nIt’s also good to open up the drop-down menu where it says Resample and select the Bicubic Sharper option. This ensures the image doesn’t blur too much when it’s resized, but if it still loses too much sharpness, you can always adjust those properties with the Filter options.\nIf done correctly, you should see your 64×64 icon transformed into a 16×16 favicon!\nRounding the corners of your favicon can give it a whole new look. Depending on what kind of style you’re going for, it might be worth learning how to do.",[925,148065,148066],{},[1107,148067,148068],{},"Step 4 – Save your favicon as an ICO, or .ico file type",[925,148070,148071],{},[963,148072],{"alt":148073,"src":148074},"Udemy Photoshop ICO 10","https:\u002F\u002Fwww.udemy.com\u002Fblog\u002Fwp-content\u002Fuploads\u002F2013\u002F12\u002FUdemy-Photoshop-ICO-10.png",[925,148076,148077,148078,148081],{},"This step is simple. If you installed the plug-in correctly, now it’s time to go up to File > Save As, open up the drop-down menu and select the ",[1107,148079,148080],{},"ICO (Windows Icon) (*.ICO)"," option. Hit the Save button, and you should be prompted about the icon format.",[925,148083,148084],{},[963,148085],{"alt":148086,"src":148087},"Udemy Photoshop ICO 11","https:\u002F\u002Fwww.udemy.com\u002Fblog\u002Fwp-content\u002Fuploads\u002F2013\u002F12\u002FUdemy-Photoshop-ICO-11.png",[925,148089,148090],{},"It’s recommended you save your file as a Standard ICO, since the PNG (Vista) format is not very compatible.\nAfter hitting OK, you might feel confused. Why does the Photoshop application still refer to our favicon as a .psd, when we just saved it as an ICO? That’s because an ICO file is not editable in Photoshop. Just try to open it up, and see. Once you save your favicon as an ICO, that ICO file is final. If you want to make changes to it, you’ll have to continue editing the .psd file until you’re satisfied with the final product, and save it as an ICO again.",[953,148092,148094],{"id":148093},"using-your-ico-file-on-your-website","Using Your ICO File on Your Website",[925,148096,148097,148098,148100],{},"So you have your beautiful new favicon saved as an ICO file, but how do you actually make it show up in bookmark bars and tabs for your website?\nThis first rule is important to know: your ICO file should be saved (or moved to) the directory where your home page is located, usually the root folder. If you save it in a separate image directory or elsewhere, the browser will not be able to find it.\nNext, make sure you have the following inserted between the ",[941,148099,16028],{}," tag in the HTML document for your home page:",[993,148102,148104],{"className":37880,"code":148103,"language":383,"meta":998,"style":998},"\u003Chead>\n \u003Clink rel=\"icon\" href=\"FaviconNameHere.ico\" \u002F>\n ;\n\u003C\u002Fhead>\n",[941,148105,148106,148114,148136,148141],{"__ignoreMap":998},[1002,148107,148108,148110,148112],{"class":1004,"line":1005},[1002,148109,6539],{"class":1030},[1002,148111,32092],{"class":15711},[1002,148113,15703],{"class":1030},[1002,148115,148116,148118,148120,148122,148124,148127,148129,148131,148134],{"class":1004,"line":1012},[1002,148117,22427],{"class":1030},[1002,148119,47171],{"class":15711},[1002,148121,47174],{"class":1026},[1002,148123,2393],{"class":1030},[1002,148125,148126],{"class":1034},"\"icon\"",[1002,148128,47182],{"class":1026},[1002,148130,2393],{"class":1030},[1002,148132,148133],{"class":1034},"\"FaviconNameHere.ico\"",[1002,148135,15258],{"class":1030},[1002,148137,148138],{"class":1004,"line":1047},[1002,148139,148140],{"class":1030}," ;\n",[1002,148142,148143,148145,148147],{"class":1004,"line":1054},[1002,148144,22437],{"class":1030},[1002,148146,32092],{"class":15711},[1002,148148,15703],{"class":1030},[925,148150,148151,148152,148155],{},"FaviconNameHere should be substituted with the name of your .ico favicon file. By default, browsers will search for ",[1107,148153,148154],{},"favicon.ico"," so it’s best to save it as such.",[1579,148157,119705],{},{"title":998,"searchDepth":1012,"depth":1012,"links":148159},[148160,148161,148162],{"id":147977,"depth":1012,"text":147978},{"id":147996,"depth":1012,"text":147997},{"id":148093,"depth":1012,"text":148094},"2014-03-13","\u002Fimages\u002Fblog\u002Ffeatures\u002Fcreate-favicons-in-photoshop.jpg",{},{"title":114,"description":116},"blog\u002Fcreate-favicons-in-photoshop",[9,112],"OJO5aCvpD98Gw8UjHqjLiixbnki8F-yhRQZPxmA1wxE",{"id":148171,"title":374,"author":920,"body":148172,"date":148473,"description":376,"extension":1591,"image":148474,"meta":148475,"navigation":1050,"path":375,"seo":148476,"stem":148477,"tags":148478,"__hash__":148479},"blog\u002Fblog\u002Fhow-to-use-telephoto-lenses.md",{"type":922,"value":148173,"toc":148464},[148174,148177,148183,148186,148190,148193,148196,148199,148205,148208,148215,148219,148226,148232,148235,148242,148247,148250,148253,148260,148266,148269,148272,148275,148282,148288,148294,148300,148304,148310,148312,148315,148321,148323,148326,148329,148333,148339,148342,148345,148351,148354,148361,148365,148368,148374,148377,148380,148383,148387,148394,148400,148403,148409,148415,148421,148425,148432,148438,148445,148451,148454,148461],[925,148175,148176],{},"They can make the depth of field appear more shallow by reducing the size difference between near and far objects, and produce beautiful images with your subject and a narrow view of the background let's discuss how to use telephoto lenses.",[925,148178,148179],{},[963,148180],{"alt":148181,"src":148182},"Telephoto lenses","\u002Fimages\u002Fblog\u002F2014-03-07-how-to-use-telephoto-lenses\u002FTokina300mmReflex_256_1351577900.jpg",[925,148184,148185],{},"300 mm telephoto lens - a statue",[953,148187,148189],{"id":148188},"overview","OVERVIEW",[925,148191,148192],{},"If the focal length of a lens is greater than 70mm,  it is called  Medium Telephoto on a full-frame camera. But a lens is considered Full Telephoto when the focal length is greater than 135mm, with an angle of view of 15° at its widest dimension. But on a compact camera with a 3-4x or greater zoom capability, the telephoto is when the lens is fully zoomed.",[925,148194,148195],{},"On a compact camera with a 3-4X or greater zoom lens, telephoto is simply when you've fully zoomed in. However, some compact cameras might require a special adapter in order to achieve full telephoto.",[925,148197,148198],{},"The longer the focal length, the more you will notice the unique effects of a telephoto lens.",[925,148200,148201],{},[963,148202],{"alt":148203,"src":148204},"Maximum angles","\u002Fimages\u002Fblog\u002F2014-03-07-how-to-use-telephoto-lenses\u002Fview-angle.jpg",[925,148206,148207],{},"The above diagrams depict the maximum angles that light rays can take when hitting your camera's sensor. The location where light rays cross is not necessarily equal to the focal length but is instead roughly proportional to this distance. The angle of view therefore still increases similarly.",[925,148209,148210,148211,148214],{},"A common misconception of using telephoto lenses is that telephoto lenses are just for capturing distant objects. While this is a legitimate explanation, there are other reasons, and often times distant objects are better photographed by simply getting a little closer. Perhaps not so practical with a lion, but a pet or a person will likely appear better when they aren't photographed from afar. Why? ",[1107,148212,148213],{},"The distance from your subject actually changes your photo's perspective, even if your subject is still captured at the same size in your camera frame",". Confused? More on this in the next section...",[953,148216,148218],{"id":148217},"telephoto-perspective","TELEPHOTO PERSPECTIVE",[925,148220,148221,148222,148225],{},"A telephoto lens is special because it has a narrow-angle of view — but what does this actually do? ",[1107,148223,148224],{},"A narrow-angle of view means that both the relative size and distance is normalized when comparing near and far objects",". This causes nearby objects to appear similar in size compared to faraway objects — even if the closer object would actually appear larger in person. The reason for this is the angle of view:",[925,148227,148228],{},[963,148229],{"alt":148230,"src":148231},"wide-angle lens - wide angle of view","http:\u002F\u002Fcdn.cambridgeincolour.com\u002Fimages\u002Fblog\u002Ftutorials\u002Fwa_wide-angle-of-view.png",[925,148233,148234],{},"(objects are very different sizes)",[925,148236,148237,148238,80417],{},"![Telephoto Lens]",[933,148239,148240],{"href":148240,"rel":148241},"http:\u002F\u002Fcdn.cambridgeincolour.com\u002Fimages\u002Fblog\u002Ftutorials\u002Fwa_narrow-angle-of-view.png",[937],[925,148243,148244],{},[1107,148245,148246],{},"Telephoto Lens",[925,148248,148249],{},"(objects are similar in size)",[925,148251,148252],{},"Even though the two cylinders above are the same distance apart, their relative sizes are very different when one uses either a wide-angle lens and telephoto lens to fill the frame with the closest cylinder. With a narrow-angle of view, further objects comprise a much greater fraction of the total angle of view.",[925,148254,148255,148256,148259],{},"A misconception is that a telephoto lens affects perspective, but strictly speaking, this isn't true. Perspective is only influenced by where you are located when you take a photograph. However, in practical use, the very fact that you're using a telephoto lens may mean that you're far from your subject — which ",[941,148257,148258],{},"does","affect perspective.",[925,148261,148262],{},[963,148263],{"alt":148264,"src":148265},"Focal length","\u002Fimages\u002Fblog\u002F2014-03-07-how-to-use-telephoto-lenses\u002FEF-S_18-135mm_f35-56_IS_Sample2_tcm14-962716.jpg",[925,148267,148268],{},"Objects appear in proper proportion to one another with this 135 mm telephoto focal length.",[925,148270,148271],{},"This normalization of relative size can be used to give a proper sense of scale. For full impact, you'll want to get as far as possible from the nearest subject in the scene (and zoom in if necessary).",[925,148273,148274],{},"In the telephoto example to the left, the people in the foreground appear quite small compared to the background building. On the other hand, if a normal focal length lens were used, and one was closer to the foreground people, then they would appear much larger relative to the size of the building.",[925,148276,148277,148278,148281],{},"However, ",[1107,148279,148280],{},"normalizing the relative size too much can make the scene appear static, flat and uninteresting"," since our eyes generally expect closer objects to be a little larger. Taking a photo of someone or something from very far away should, therefore, be done only when necessary.",[925,148283,148284,148287],{},[1107,148285,148286],{},"In addition to relative size, a telephoto lens can also make the distance between objects appear compressed",". This can be beneficial when you're trying to emphasize the number of objects, or to enhance the appearance of congestion:",[925,148289,148290],{},[963,148291],{"alt":148292,"src":148293},"Exaggerated Crowd Density","\u002Fimages\u002Fblog\u002F2014-03-07-how-to-use-telephoto-lenses\u002F5f5f8b31764e934646ac839a226603da98771aa1_0.jpg",[925,148295,148296],{},[963,148297],{"alt":148298,"src":148299},"Exaggerated Tree Density","\u002Fimages\u002Fblog\u002F2014-03-07-how-to-use-telephoto-lenses\u002FPart-II-Plantation-1024x655.jpg",[953,148301,148303],{"id":148302},"bringing-far-away-subjects-closer","BRINGING FAR AWAY SUBJECTS CLOSER",[925,148305,148306],{},[963,148307],{"alt":148308,"src":148309},"320 mm detail shot of a bird","\u002Fimages\u002Fblog\u002F2014-03-07-how-to-use-telephoto-lenses\u002FIMGP3295.jpg",[925,148311,148308],{},[925,148313,148314],{},"Perhaps the most common use for a telephoto lens is to bring otherwise small and distant subjects closer, such as wildlife. This can enable a vantage on subjects not otherwise possible in real life. One should therefore pay careful attention to far off detail and texture.",[925,148316,148317],{},[963,148318],{"alt":148319,"src":148320},"Telephoto sunset","\u002Fimages\u002Fblog\u002F2014-03-07-how-to-use-telephoto-lenses\u002Fbest-lens-for-landscape-photography-Flickr-vinothchandar-2013-03-23-CC-BY-20.jpg",[925,148322,148319],{},[925,148324,148325],{},"Furthermore, even if you were able to get a little closer to the subject, this may adversely impact the photograph because being closer might alter the subject's behavior. This is especially true when trying to capture candid photographs of people; believe it or not, people usually act differently when they're aware that someone is taking their photograph.",[925,148327,148328],{},"Finally, consider this: since a telephoto lens encompasses a much narrower angle of view, you as the photographer can be much more selective with what you choose to contain within your camera frame. You might choose to capture just the region of the sky right around the sunset (left), just the surfer on their wave, or just a tight region around someone's interesting facial expression. This added selectivity can make for very simple and focused compositions.",[953,148330,148332],{"id":148331},"landscapes-layering","LANDSCAPES & LAYERING",[925,148334,148335],{},[963,148336],{"alt":148337,"src":148338},"Example of telephoto layering - Mt. Baldy, California","http:\u002F\u002Fcdn.cambridgeincolour.com\u002Fimages\u002Fblog\u002Ftutorials\u002Ftelephoto_layering2.jpg",[925,148340,148341],{},"However, such claims aren't completely unfounded. Telephoto lenses compress the sense of depth, whereas wide-angle lenses exaggerate the sense of depth. Since spaciousness is an important quality in many landscapes, the rationale is that wide-angle lenses are therefore better suited.",[925,148343,148344],{},"However, telephoto landscapes just require different techniques. If you want to improve the sense of depth, a common telephoto technique is to compose the scene so that it's comprised of layered subject matter at distinctly different distances. For example, the closest layer could be a foreground set of trees, the subsequent layers could be successively more distant hillsides, and the furthest layer could be the sky, ocean, and\u002For all other seemingly equidistant background objects.",[925,148346,148347],{},[963,148348],{"alt":148349,"src":148350},"Example of telephoto layering - Mt Hamilton, California","http:\u002F\u002Fcdn.cambridgeincolour.com\u002Fimages\u002Fblog\u002Ftutorials\u002Ftelephoto_layering1.jpg",[925,148352,148353],{},"165 mm telephoto shot using layered subject matter",[925,148355,148356,148357,148360],{},"In the above example, the image would have seemed much less three-dimensional without the foreground layer of trees on the hill. Similarly, the separate layers of trees, clouds and background mountainside also give the first example more depth. A telephoto lens can also enhance how photography in fog, haze or mist",[933,148358,1567],{"href":148359,"target":132673},"http:\u002F\u002Fwww.cambridgeincolour.com\u002Ftutorials\u002Ffog-photography.htm","affect an image, since these lenses make distant objects appear closer.",[953,148362,148364],{"id":148363},"point-of-focus","POINT OF FOCUS",[925,148366,148367],{},"For a given subject distance, a telephoto lens captures the scene with a much shallower depth of field than does other lenses. Out of focus distant objects are also made much larger, which enlarges their blur. It's therefore critical that you achieve pinpoint accuracy with your chosen point of focus.",[925,148369,148370],{},[963,148371],{"alt":148372,"src":148373},"Cat amongst leaves","http:\u002F\u002Fcdn.cambridgeincolour.com\u002Fimages\u002Fblog\u002Ftutorials\u002Ftelephoto_focus-location.jpg",[925,148375,148376],{},"320 mm focal length - shallow depth of field telephoto shot of a cat amongst leaves",[925,148378,148379],{},"In the above example, the foreground fence was less than a foot from the cat's face — yet it appears extremely out of focus due to the shallow depth of field. Even a misfocus of an inch could have therefore caused the cat's eyes to become blurred, which would have ruined the intent of the photograph.",[925,148381,148382],{},"Fortunately, telephoto lenses are rarely subject to the \"focus and recompose\" errors caused by shorter focal lengths — primarily because one is often much further from their subject. This means that you can use your central autofocus point to achieve a focus lock, and then recompose your frame without worry of changing the distance at which objects are in sharpest focus.",[953,148384,148386],{"id":148385},"minimizing-camera-shake","MINIMIZING CAMERA SHAKE",[925,148388,148389,148390,148393],{},"A telephoto lens may have a significant impact on how easy it is to achieve a sharp handheld photograph. ",[1107,148391,148392],{},"Longer focal lengths require shorter exposure times to minimize blurring caused by shaky hands."," Think of this as if one were trying to hold a laser pointer steady; when shining this pointer at a nearby object its bright spot ordinarily jumps around less than for objects further away.",[925,148395,148396],{},[963,148397],{"alt":148398,"src":148399},"Camera shake focal length rule of thumb","http:\u002F\u002Fcdn.cambridgeincolour.com\u002Fimages\u002Fblog\u002Ftutorials\u002Ftripod_focal-length.png",[925,148401,148402],{},"Simulation of what happens when you try to aim a laser pointer at a point on a distant wall;\nthe larger absolute movements on the further wall are similar to what happens with camera shake when you are using a telephoto lens (since objects become more magnified).",[925,148404,148405,148408],{},[1107,148406,148407],{},"Reducing camera shake requires either shooting using a faster shutter speed or holding your camera steadier",", or some combination of the two.",[925,148410,148411,148414],{},[1107,148412,148413],{},"To achieve a faster shutter speed"," you will need to use a larger aperture (such as going from f\u002F8.0 to f\u002F2.8) and\u002For increase the ISO speed. However, both of these options have drawbacks, since a larger aperture decreases depth of field, and a higher ISO speed increases image noise.",[925,148416,148417,148420],{},[1107,148418,148419],{},"To hold your camera steadier",", you can (i) use your other hand to stabilize the lens, (ii) try taking the photo while crouching, or (iii) lean your body or lens against another solid object. However, using a camera tripod or monopod is the only truly consistent way to reduce camera shake.",[953,148422,148424],{"id":148423},"telephoto-lenses-depth-of-field","TELEPHOTO LENSES & DEPTH OF FIELD",[925,148426,148427,148428,148431],{},"Note that I've been careful to say that telephoto lenses only decrease depth of field ",[941,148429,148430],{},"for a given subject distance",". A telephoto lens itself does not have less depth of field. Unfortunately, this is a common misconception. If you are magnifying your subject by the same amount (meaning that they fill the image frame by the same proportion), then a telephoto lens will give the same* depth of field as other lenses.",[925,148433,4703,148434,148437],{},[1107,148435,148436],{},"Technical Note",": for situations of extreme magnification, the depth of field may differ by a small amount. However, this is an extreme case and is not relevant for the uses discussed in this page.",[925,148439,148440,148441,148444],{},"The reason that telephoto lenses get the reputation of decreasing depth of field is not because of any inherent property with the lens itself. It's because of how they're most often ",[941,148442,148443],{},"used",". People usually magnify their subject matter a lot more with telephoto lenses than with lenses that have wider angles of view. In other words, people generally don't get further from their subject, so this subject ends up filling more of the frame. It's this higher magnification that is what causes the shallower depth of field.",[925,148446,148447],{},[963,148448],{"alt":148449,"src":148450},"Example of distracting bokeh with a telephoto lens","http:\u002F\u002Fcdn.cambridgeincolour.com\u002Fimages\u002Fblog\u002Ftutorials\u002Ftelephoto_bokeh2.jpg",[925,148452,148453],{},"Distracting out of focus background",[925,148455,148456,148457,148460],{},"However, a telephoto lens does enlarge out of focus regions (called \"bokeh\"), since it enlarges the background relative to the foreground. This may give the ",[941,148458,148459],{},"appearance"," of a shallower depth of field.",[925,148462,148463],{},"One should, therefore, pay close attention to how a background will look and be positioned when it's out of focus. For example, poorly-positioned out of focus highlights may prove distracting for a foreground subject (such as in the parrot example).",{"title":998,"searchDepth":1012,"depth":1012,"links":148465},[148466,148467,148468,148469,148470,148471,148472],{"id":148188,"depth":1012,"text":148189},{"id":148217,"depth":1012,"text":148218},{"id":148302,"depth":1012,"text":148303},{"id":148331,"depth":1012,"text":148332},{"id":148363,"depth":1012,"text":148364},{"id":148385,"depth":1012,"text":148386},{"id":148423,"depth":1012,"text":148424},"2014-03-07","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhow-to-use-telephoto-lenses.jpg",{},{"title":374,"description":376},"blog\u002Fhow-to-use-telephoto-lenses",[89],"fr3m1MG_pon6a6fTmobsW743fSRtxt66QbQoSgVs2aY",{"id":148481,"title":294,"author":920,"body":148482,"date":148900,"description":296,"extension":1591,"image":148901,"meta":148902,"navigation":1050,"path":295,"seo":148903,"stem":148904,"tags":148905,"__hash__":148906},"blog\u002Fblog\u002Ffree-photoshop-plugins.md",{"type":922,"value":148483,"toc":148884},[148484,148488,148493,148502,148516,148520,148525,148528,148538,148542,148545,148551,148554,148567,148571,148576,148583,148594,148597,148601,148607,148610,148624,148627,148639,148643,148648,148655,148667,148670,148674,148679,148689,148701,148704,148708,148713,148718,148729,148732,148736,148741,148744,148755,148758,148762,148767,148770,148777,148780,148784,148789,148792,148803,148806,148810,148815,148818,148830,148833,148837,148842,148845,148856,148859,148863,148867,148870,148881],[953,148485,148487],{"id":148486},"flaticon","Flaticon",[925,148489,148490],{},[963,148491],{"alt":148487,"src":148492},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002Fflaticonplug.jpg",[925,148494,148495,148496,148501],{},"This free plugin for Photoshop lets you quickly find all the icons without leaving your working environment. You can download free icons, Freepik has launched a tool entirely dedicated to this end: ",[933,148497,148500],{"href":148498,"target":132673,"shape":148499},"http:\u002F\u002FFlaticon.com","rect","Flaticon.com",". The largest database of free vector icons, it enables you to download all of its thousands of icons in .svg, .psd or .png format.",[925,148503,4703,148504,1567,148507,6090,148512,148515],{},[1107,148505,148506],{},"Publisher:",[933,148508,148511],{"href":148509,"rel":148510},"http:\u002F\u002Fwww.freepik.com",[937],"freepik.com",[1107,148513,148514],{},"Good for:"," Web designers",[953,148517,148519],{"id":148518},"css3ps","CSS3PS",[925,148521,148522],{},[963,148523],{"alt":148519,"src":148524},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002F02.jpg",[925,148526,148527],{},"This free plugin makes it easy to convert your Photoshop layers into CSS3 layers Uses the cloud to perform the calculations required to convert your Photoshop layers into CSS3 layers, complete with live-rendered effects where these are achievable with CSS. So, drop-shadows, strokes, outer glows, text and rounded corners are all converted to CSS3 automatically.",[925,148529,4703,148530,1567,148532,6090,148536,148515],{},[1107,148531,148506],{},[933,148533,148519],{"href":148534,"rel":148535},"http:\u002F\u002Fcss3ps.com\u002F",[937],[1107,148537,148514],{},[953,148539,148541],{"id":148540},"perfect-effects-3-free-edition","Perfect Effects 3 Free Edition",[925,148543,148544],{},"Perfect Effects 8 Free Edition gives you an easy way to add subtle to striking effects to your photos instantly or take complete creative control and transform your images into uniquely stylized images. It's also the easiest and most versatile way to add effects when you're using Adobe® Photoshop®, Photoshop Elements, Lightroom®, Apple® Aperture®, or Perfect Effects 8 Free by itself as a standalone application. Whether that's a color treatment, addition of texture and noise, or creative borders. The plugin features an effects library (a bit like the filter gallery in Photoshop) and allows you to stack multiple effects to achieve interesting new results.",[925,148546,148547],{},[963,148548],{"alt":148549,"src":148550},"Perfect Effects 3","\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002Fw640.jpg",[925,148552,148553],{},"If you want to get a quick effect on your image, try this plugin",[925,148555,4703,148556,1567,148558,6090,148563,148566],{},[1107,148557,148506],{},[933,148559,148562],{"href":148560,"rel":148561},"http:\u002F\u002Fwww.ononesoftware.com\u002F",[937],"onOne Software",[1107,148564,148565],{},"Best for:"," Photographers & Designers",[953,148568,148570],{"id":148569},"superpng","SuperPNG",[925,148572,148573,148575],{},[1107,148574,148570],{}," is a free Adobe Photoshop plug-in for using PNG (\"ping\") files. It has more comprehensive support for the format than Photoshop's included plug-in and provides control over alpha channel handling.",[963,148577],{"className":148578,"alt":998,"src":148580,"width":148581,"height":148582},[148579],"alignnone","\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002Fout_dialog.png",430,396,[925,148584,4703,148585,1567,148587,6090,148591,148593],{},[1107,148586,148506],{},[933,148588,148590],{"href":148589,"target":132673,"shape":148499},"http:\u002F\u002Fwww.fnordware.com\u002F","fnord",[1107,148592,148565],{}," Designers",[925,148595,148596],{},"If you're a regular user of the PNG format, you'll know that Photoshop can sometimes struggle a bit to render PNGs quickly. SuperPNG aims to fix this by offering more control over your PNG output, allowing for a balance between speed and file size, control over the alpha channel and meta data. SuperPNG's a handy tool for taking control of your image export, and is free!",[953,148598,148600],{"id":148599},"wire-worm"," Wire Worm",[925,148602,148603],{},[963,148604],{"alt":148605,"src":148606},"Wire Worm","\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002F47c18b6c-e920-4a34-819a-e55272f0757a.jpg",[925,148608,148609],{},"This little plugin will help you remove wires and other unwanted objects from your images. There are, of course, other tools to achieve this goal, e.g. the good old clone stamp or the healing brush, besides a number of dedicated plugins and applications (see below). However, Wire Worm comes with a set of features that I have not seen elsewhere:",[1530,148611,148612,148615,148618,148621],{},[974,148613,148614],{},"specific tool designed for easy selection of long thin objects, e.g. wires",[974,148616,148617],{},"advanced color matching for seamless patches without color bleeding",[974,148619,148620],{},"ability to finetune patch after placement",[974,148622,148623],{},"unlimited undo\u002Fredo",[925,148625,148626],{},"Wire Worm is a free plugin with a single, simple purpose that may save you a lot of time removing telephone wires, fences and similar obstructions in your images. The interface is simple, allowing you to select an area around a wire or other obstruction and have the tool automatically remove it. Results are surprisingly good, especially for the price!",[925,148628,4703,148629,1567,148631,6090,148636,148638],{},[1107,148630,148506],{},[933,148632,148635],{"href":148633,"rel":148634},"http:\u002F\u002Fwww.vicanek.de\u002F",[937],"MV's Plugins",[1107,148637,148565],{}," Photographers",[953,148640,148642],{"id":148641},"tych-panel-2","Tych Panel 2",[925,148644,148645],{},[963,148646],{"alt":148642,"src":148647},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002Fwedding-photographer-goteborg-alex-and-alex.jpg",[925,148649,148650,148651],{},"Photoshop plugins: Create diptych, triptych and ntych panels with Tych Panel 2. Image credit: Gordon Andersson - ",[933,148652,148653],{"href":148653,"rel":148654},"http:\u002F\u002Fwww.gordonandersson.com",[937],[925,148656,4703,148657,1567,148659,6090,148664,148666],{},[1107,148658,148506],{},[933,148660,148663],{"href":148661,"rel":148662},"http:\u002F\u002Flumens.se\u002F",[937],"Lumens",[1107,148665,148514],{}," Photographers and designers",[925,148668,148669],{},"This straightforward plugin makes it simple to create diptych (double), triptych (triple) and ntych (quadrule+) panels within Photoshop. Choose the alignment, number of rows and columns, or hybrid layouts, and Tych Panel 2 will create the layout for you utilizing Smart Objects and layer masks to avoid destructive editing.",[953,148671,148673],{"id":148672},"guideguide"," GuideGuide",[925,148675,148676],{},[963,148677],{"alt":148673,"src":148678},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002Fdemo.gif",[925,148680,148681,148682,14928,148685,148688],{},"With GuideGuide, pixel accurate columns, rows, midpoints, and baselines can be created based on your ",[1107,148683,148684],{},"document",[1107,148686,148687],{},"selection"," with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements.",[925,148690,4703,148691,1567,148693,6090,148698,148700],{},[1107,148692,148506],{},[933,148694,148697],{"href":148695,"rel":148696},"http:\u002F\u002Fwww.cameronmcefee.com\u002F",[937],"Cameron McEfe",[1107,148699,148514],{}," Print & web designers",[925,148702,148703],{},"This simple Photoshop plugin makes it easy to create a grid system in your Photoshop document, hijacking the built-in guides system to create a pinpoint accurate grid according to your chosen settings. You can use negative margins for special hanging columns, separately define individual margins and gutters, and save your preferred options for quick access in the future. Perfect for anyone using a grid to help them create their layouts.",[953,148705,148707],{"id":148706},"cut-slice-me","Cut & Slice me",[925,148709,148710],{},[963,148711],{"alt":148707,"src":148712},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002Fw640-1.jpg",[925,148714,148715,148717],{},[941,148716,148707],{}," cuts and exports them in png format trimming the pixels you don't need, or let you can specify the size you want. Or you can export all states of your buttons. Cut&Slice Me makes it easy to export your designs to the web",[925,148719,4703,148720,1567,148722,6090,148727,148515],{},[1107,148721,148506],{},[933,148723,148726],{"href":148724,"rel":148725},"http:\u002F\u002Fwww.peruho.com\u002F",[937],"Daniel Peruho",[1107,148728,148514],{},[925,148730,148731],{},"This super-handy CS6-only plugin makes it easy to export your designs from Photoshop to the web. Rather than rely on Photoshop's outdated export for web functionality, Cut&Slice me offers a new way of doing things; allowing overlapping slices, multiple button states and even exporting different resolutions of the same assets to cater for different screen sizes and devices.",[953,148733,148735],{"id":148734},"mr-stacks","Mr. Stacks",[925,148737,148738],{},[963,148739],{"alt":148735,"src":148740},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002Fmrstacks.jpg",[925,148742,148743],{},"Mr. Stacks  is a Photoshop script that rapidly generates storyboards, stacks, and PDF(s) for CD check-ins, client-ish presentations, and whatever else it is you do. Helping to Nail some of the most monotonous tasks in art direction.",[925,148745,4703,148746,1567,148748,6090,148752,148754],{},[1107,148747,148506],{},[933,148749,148735],{"href":148750,"rel":148751},"http:\u002F\u002Fhai@MrStacks.com",[937],[1107,148753,148514],{}," Photographers, designers, film-makers",[925,148756,148757],{},"This Photoshop script converts layer comps into a storyboard view, compositing your individual comps into a layout that can be easily output as PDF for printing and sharing with others.",[953,148759,148761],{"id":148760},"freeware-boundary-noise-reduction","Freeware Boundary Noise Reduction",[925,148763,148764],{},[963,148765],{"alt":148761,"src":148766},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002FstringTop-original.jpg",[925,148768,148769],{},"The freeware version of Boundary Noise Reduction lets you remove noise from dSLR images and film scans. Many users comment that it's a big improvement over the noise reduction tool built into Photoshop.",[925,148771,4703,148772,148774,148775,148638],{},[1107,148773,148506],{}," Colormancer *",[1107,148776,148514],{},[925,148778,148779],{},"This Photoshop plugin is a freeware version of the full Boundary Noise Reduction plugin from Colormancer. Offering a simplified set of user controls when compared to the pro version, it's superior to Photoshop's own noise reduction filter.",[953,148781,148783],{"id":148782},"pano-warp","Pano Warp",[925,148785,148786],{},[963,148787],{"alt":148783,"src":148788},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002Fpanowarp.jpg",[925,148790,148791],{},"The Pano Warp plugin will give a simple facility to compensate barrel distortion and vignetting.",[925,148793,4703,148794,1567,148796,6090,148800,148802],{},[1107,148795,148506],{},[933,148797,148635],{"href":148798,"rel":148799},"http:\u002F\u002Fvicanek.de\u002F",[937],[1107,148801,148514],{}," Print and web designers, photographers",[925,148804,148805],{},"While Photoshop offers a handy Lens Correction feature, this filter takes an entirely different approach. Use this Photoshop plugin to adjust the focal length, roll and horizon height to correct for panorama distortion easily.",[953,148807,148809],{"id":148808},"nks5-natural-media-toolkit","NKS5 Natural Media Toolkit",[925,148811,148812],{},[963,148813],{"alt":148809,"src":148814},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002FNKS-Natural-Media-toolkit-for-photoshop.jpg",[925,148816,148817],{},"Nkurence's tool lets you quickly access real-media preset effects",[925,148819,4703,148820,1567,148822,6090,148827,148829],{},[1107,148821,148506],{},[933,148823,148826],{"href":148824,"rel":148825},"http:\u002F\u002FNkurence.com",[937],"Nkurence",[1107,148828,148514],{}," designers & artists",[925,148831,148832],{},"NKS5 is a custom toolkit for Adobe Photoshop CS5, CS5.5 and CS6 – it provides a wide range of natural media, texturing and production tools in an attractive, easy to use palette with a minimal footprint. It’s a free download, but if you’re pro and it’s helping or if you just want to see more projects like this come about please consider making a donation below. Donators will receive download links to updates as the’re available along with early access to future extensions.",[953,148834,148836],{"id":148835},"sinedots-ii","Sinedots II",[925,148838,148839],{},[963,148840],{"alt":148836,"src":148841},"\u002Fimages\u002Fblog\u002F2014-03-04-free-photoshop-plugins\u002FSinedots2.jpg",[925,148843,148844],{},"Generate abstract, random wave patterns with Sinedots II",[925,148846,4703,148847,1567,148849,6090,148854,148593],{},[1107,148848,148506],{},[933,148850,148853],{"href":148851,"rel":148852},"http:\u002F\u002Fwww.philipp-spoeth.de\u002F",[937],"Philipp Spoeth",[1107,148855,148514],{},[925,148857,148858],{},"If you're looking for a quick way to generate abstract, random wave patterns for use as background art, this Photoshop plugin could be just what you need. It's phenomenally complex, and it’s surprisingly old - having been around for at least a decade - but still does the trick and creates some amazing patterns.",[953,148860,148862],{"id":148861},"web-font-plugin","Web Font Plugin",[925,148864,148865],{},[963,148866],{"alt":148862,"src":148550},[925,148868,148869],{},"Web Font Plugin lets you use Google Web Fonts inside Photoshop.",[925,148871,4703,148872,1567,148874,6090,148879,148515],{},[1107,148873,148506],{},[933,148875,148878],{"href":148876,"rel":148877},"http:\u002F\u002Fwww.extensis.com\u002F",[937],"Extensis",[1107,148880,148514],{},[925,148882,148883],{},"Easy access to use thousands of WebINK web fonts in Photoshop from foundries like Dalton Maag, Mark Simonson, MoreType, OurType, TypeTogether and ParaType.",{"title":998,"searchDepth":1012,"depth":1012,"links":148885},[148886,148887,148888,148889,148890,148891,148892,148893,148894,148895,148896,148897,148898,148899],{"id":148486,"depth":1012,"text":148487},{"id":148518,"depth":1012,"text":148519},{"id":148540,"depth":1012,"text":148541},{"id":148569,"depth":1012,"text":148570},{"id":148599,"depth":1012,"text":148600},{"id":148641,"depth":1012,"text":148642},{"id":148672,"depth":1012,"text":148673},{"id":148706,"depth":1012,"text":148707},{"id":148734,"depth":1012,"text":148735},{"id":148760,"depth":1012,"text":148761},{"id":148782,"depth":1012,"text":148783},{"id":148808,"depth":1012,"text":148809},{"id":148835,"depth":1012,"text":148836},{"id":148861,"depth":1012,"text":148862},"2014-03-04","\u002Fimages\u002Fblog\u002Ffeatures\u002Ffree-photoshop-plugins.jpg",{},{"title":294,"description":296},"blog\u002Ffree-photoshop-plugins",[9,112],"1gvroXIDJdZwtxKdFZsrns4ifeOEohP0bPxWg7rKsp4",{"id":148908,"title":369,"author":920,"body":148909,"date":150079,"description":371,"extension":1591,"image":150080,"meta":150081,"navigation":1050,"path":370,"seo":150082,"stem":150083,"tags":150084,"__hash__":150085},"blog\u002Fblog\u002Fhow-to-make-ajax-calls-in-jquery.md",{"type":922,"value":148910,"toc":150063},[148911,148915,148918,148922,148925,148952,148956,148962,149063,149084,149091,149097,149101,149107,149170,149174,149177,149229,149233,149240,149305,149309,149312,149401,149405,149408,149410,149557,149560,149601,149604,149635,149639,149645,149747,149758,149762,149768,149780,149889,149897,149901,149904,150009,150012,150016,150019,150021,150024,150060],[953,148912,148914],{"id":148913},"what-is-ajax","What is AJAX",[925,148916,148917],{},"AJAX stands for Asynchronous JavaScript and XML. The request generated from AJAX is called an XHR, which is shorthand for XML HTTP request is same as AJAX.\nWith AJAX, JavaScript grabs new content from the server and makes changes to the current page throughout the lifetime of the page, no refresh or redirection is needed.",[953,148919,148921],{"id":148920},"caching-ajax","Caching AJAX",[925,148923,148924],{},"The AJAX request content can either be static (like images) or dynamic (data). For static content, we may want the response cached. For dynamic content, which can change in a second's time, caching AJAX becomes a problem. Internet Explorer always caches AJAX calls, while other browsers behave differently. So we tell the browser explicitly whether or not AJAX should be cached. With jQuery, we can accomplish this simply by typing:",[993,148926,148928],{"className":995,"code":148927,"language":997,"meta":998,"style":998},"$.ajaxSetup({\n cache: false,\n});\n",[941,148929,148930,148939,148948],{"__ignoreMap":998},[1002,148931,148932,148934,148937],{"class":1004,"line":1005},[1002,148933,145364],{"class":1030},[1002,148935,148936],{"class":1026},"ajaxSetup",[1002,148938,2756],{"class":1030},[1002,148940,148941,148944,148946],{"class":1004,"line":1012},[1002,148942,148943],{"class":1030}," cache: ",[1002,148945,19341],{"class":1019},[1002,148947,1143],{"class":1030},[1002,148949,148950],{"class":1004,"line":1047},[1002,148951,2804],{"class":1030},[1655,148953,148955],{"id":148954},"_1-load-load-html-from-a-remote-url-and-inject-it-into-the-dom","1. load(): Load HTML From a Remote URL and Inject it into the DOM",[925,148957,148958,148959,86019],{},"The most common use of AJAX is for loading HTML from a remote location and injecting it into the DOM, with jQuery's ",[941,148960,148961],{},"load()",[993,148963,148965],{"className":995,"code":148964,"language":997,"meta":998,"style":998},"$.ajaxSetup({\n cache: false,\n});\nvar ajax_loading_img = \"\u003Cimg src='img\u002Floading.gif' alt='loading...' \u002F>\";\n\u002F\u002F load() functions\nvar loadUrl = 'ajax\u002Fload.html';\n$('#load_basic').click(function () {\n $('#result').html(ajax_loading_img).load(loadUrl);\n});\n",[941,148966,148967,148975,148983,148987,149001,149006,149020,149039,149059],{"__ignoreMap":998},[1002,148968,148969,148971,148973],{"class":1004,"line":1005},[1002,148970,145364],{"class":1030},[1002,148972,148936],{"class":1026},[1002,148974,2756],{"class":1030},[1002,148976,148977,148979,148981],{"class":1004,"line":1012},[1002,148978,148943],{"class":1030},[1002,148980,19341],{"class":1019},[1002,148982,1143],{"class":1030},[1002,148984,148985],{"class":1004,"line":1047},[1002,148986,2804],{"class":1030},[1002,148988,148989,148991,148994,148996,148999],{"class":1004,"line":1054},[1002,148990,18311],{"class":1015},[1002,148992,148993],{"class":1030}," ajax_loading_img ",[1002,148995,2393],{"class":1015},[1002,148997,148998],{"class":1034}," \"\u003Cimg src='img\u002Floading.gif' alt='loading...' \u002F>\"",[1002,149000,1407],{"class":1030},[1002,149002,149003],{"class":1004,"line":1060},[1002,149004,149005],{"class":1008},"\u002F\u002F load() functions\n",[1002,149007,149008,149010,149013,149015,149018],{"class":1004,"line":1272},[1002,149009,18311],{"class":1015},[1002,149011,149012],{"class":1030}," loadUrl ",[1002,149014,2393],{"class":1015},[1002,149016,149017],{"class":1034}," 'ajax\u002Fload.html'",[1002,149019,1407],{"class":1030},[1002,149021,149022,149024,149026,149029,149031,149033,149035,149037],{"class":1004,"line":1348},[1002,149023,15864],{"class":1026},[1002,149025,1031],{"class":1030},[1002,149027,149028],{"class":1034},"'#load_basic'",[1002,149030,1539],{"class":1030},[1002,149032,11181],{"class":1026},[1002,149034,1031],{"class":1030},[1002,149036,6965],{"class":1015},[1002,149038,9772],{"class":1030},[1002,149040,149041,149043,149045,149047,149049,149051,149054,149056],{"class":1004,"line":1354},[1002,149042,88304],{"class":1026},[1002,149044,1031],{"class":1030},[1002,149046,145820],{"class":1034},[1002,149048,1539],{"class":1030},[1002,149050,383],{"class":1026},[1002,149052,149053],{"class":1030},"(ajax_loading_img).",[1002,149055,124635],{"class":1026},[1002,149057,149058],{"class":1030},"(loadUrl);\n",[1002,149060,149061],{"class":1004,"line":1360},[1002,149062,2804],{"class":1030},[1530,149064,149065,149068,149075,149081],{},[974,149066,149067],{},"$.ajaxSetup instructs the browser NOT to cache AJAX calls. (This is important for IE)",[974,149069,149070,149071,149074],{},"After the button is clicked, it takes a little while before the new HTML is loaded. During the loading time, it's better to show an animation (loading.gif)  ensure that the page is currently loading. The ",[941,149072,149073],{},"ajax_loading_img"," variable contains the HTML tag of the loading sign.",[974,149076,149077,149080],{},[941,149078,149079],{},"ajax\u002Fload.html"," is the url from which the HTML is retrieved.",[974,149082,149083],{},"When the button is clicked, it makes an AJAX call to the url, receives the response HTML, and injects it into the DOM. The syntax is simply $(\"#DOM\").load(url).",[925,149085,149086,149087,149090],{},"In Firebug: Click  Net > XHR > + > Params - Here's all parameters passed through the GET method. The long number string passed under a \"",[928,149088,149089],{},"\" key, is how jQuery makes sure the request is not cached.                              \nEvery request has a different \"","\" parameter, so browsers consider each of them to be unique.",[925,149092,149093,149094,149096],{},"Click ",[941,149095,61463],{}," tab. Here's the HTML response returned from the remote url. ",[953,149098,149100],{"id":149099},"load-part-of-the-remote-file","Load Part of the Remote File",[925,149102,86686,149103,149106],{},[941,149104,149105],{},"load(url + \"#DOM\")",", only the contents within #DOM are injected into current page.",[993,149108,149110],{"className":995,"code":149109,"language":997,"meta":998,"style":998},"$('#load_dom').click(function () {\n $('#result')\n .html(ajax_loading_img)\n .load(loadUrl + ' #picture');\n});\n",[941,149111,149112,149131,149141,149150,149166],{"__ignoreMap":998},[1002,149113,149114,149116,149118,149121,149123,149125,149127,149129],{"class":1004,"line":1005},[1002,149115,15864],{"class":1026},[1002,149117,1031],{"class":1030},[1002,149119,149120],{"class":1034},"'#load_dom'",[1002,149122,1539],{"class":1030},[1002,149124,11181],{"class":1026},[1002,149126,1031],{"class":1030},[1002,149128,6965],{"class":1015},[1002,149130,9772],{"class":1030},[1002,149132,149133,149135,149137,149139],{"class":1004,"line":1012},[1002,149134,88304],{"class":1026},[1002,149136,1031],{"class":1030},[1002,149138,145820],{"class":1034},[1002,149140,3808],{"class":1030},[1002,149142,149143,149145,149147],{"class":1004,"line":1047},[1002,149144,30624],{"class":1030},[1002,149146,383],{"class":1026},[1002,149148,149149],{"class":1030},"(ajax_loading_img)\n",[1002,149151,149152,149154,149156,149159,149161,149164],{"class":1004,"line":1054},[1002,149153,30624],{"class":1030},[1002,149155,124635],{"class":1026},[1002,149157,149158],{"class":1030},"(loadUrl ",[1002,149160,5064],{"class":1015},[1002,149162,149163],{"class":1034}," ' #picture'",[1002,149165,1085],{"class":1030},[1002,149167,149168],{"class":1004,"line":1060},[1002,149169,2804],{"class":1030},[953,149171,149173],{"id":149172},"pass-parameters-through-the-get-method","Pass Parameters Through the GET Method",[925,149175,149176],{},"By passing a string as the second param of load(), these parameters are passed to the remote url in the GET method",[993,149178,149180],{"className":995,"code":149179,"language":997,"meta":998,"style":998},"$('#load_get').click(function () {\n $('#result').html(ajax_loading_img).load(loadUrl, 'language=php&version=5');\n});\n",[941,149181,149182,149201,149225],{"__ignoreMap":998},[1002,149183,149184,149186,149188,149191,149193,149195,149197,149199],{"class":1004,"line":1005},[1002,149185,15864],{"class":1026},[1002,149187,1031],{"class":1030},[1002,149189,149190],{"class":1034},"'#load_get'",[1002,149192,1539],{"class":1030},[1002,149194,11181],{"class":1026},[1002,149196,1031],{"class":1030},[1002,149198,6965],{"class":1015},[1002,149200,9772],{"class":1030},[1002,149202,149203,149205,149207,149209,149211,149213,149215,149217,149220,149223],{"class":1004,"line":1012},[1002,149204,88304],{"class":1026},[1002,149206,1031],{"class":1030},[1002,149208,145820],{"class":1034},[1002,149210,1539],{"class":1030},[1002,149212,383],{"class":1026},[1002,149214,149053],{"class":1030},[1002,149216,124635],{"class":1026},[1002,149218,149219],{"class":1030},"(loadUrl, ",[1002,149221,149222],{"class":1034},"'language=php&version=5'",[1002,149224,1085],{"class":1030},[1002,149226,149227],{"class":1004,"line":1047},[1002,149228,2804],{"class":1030},[953,149230,149232],{"id":149231},"pass-parameters-through-the-post-method","Pass Parameters Through the POST Method",[925,149234,149235,149236,149239],{},"If parameters are ",[1107,149237,149238],{},"passed as an object"," (rather than string), they are passed to the remote url in the POST method.",[993,149241,149243],{"className":995,"code":149242,"language":997,"meta":998,"style":998},"$('#load_post').click(function () {\n $('#result')\n .html(ajax_loading_img)\n .load(loadUrl, { language: 'php', version: 5 });\n});\n",[941,149244,149245,149264,149274,149282,149301],{"__ignoreMap":998},[1002,149246,149247,149249,149251,149254,149256,149258,149260,149262],{"class":1004,"line":1005},[1002,149248,15864],{"class":1026},[1002,149250,1031],{"class":1030},[1002,149252,149253],{"class":1034},"'#load_post'",[1002,149255,1539],{"class":1030},[1002,149257,11181],{"class":1026},[1002,149259,1031],{"class":1030},[1002,149261,6965],{"class":1015},[1002,149263,9772],{"class":1030},[1002,149265,149266,149268,149270,149272],{"class":1004,"line":1012},[1002,149267,88304],{"class":1026},[1002,149269,1031],{"class":1030},[1002,149271,145820],{"class":1034},[1002,149273,3808],{"class":1030},[1002,149275,149276,149278,149280],{"class":1004,"line":1047},[1002,149277,30624],{"class":1030},[1002,149279,383],{"class":1026},[1002,149281,149149],{"class":1030},[1002,149283,149284,149286,149288,149291,149294,149297,149299],{"class":1004,"line":1054},[1002,149285,30624],{"class":1030},[1002,149287,124635],{"class":1026},[1002,149289,149290],{"class":1030},"(loadUrl, { language: ",[1002,149292,149293],{"class":1034},"'php'",[1002,149295,149296],{"class":1030},", version: ",[1002,149298,2859],{"class":1019},[1002,149300,28417],{"class":1030},[1002,149302,149303],{"class":1004,"line":1060},[1002,149304,2804],{"class":1030},[953,149306,149308],{"id":149307},"do-something-on-ajax-success","Do Something on AJAX Success",[925,149310,149311],{},"A function can be passed to load() as a callback. This function will be executed as soon as the AJAX request is completed successfully.",[993,149313,149315],{"className":995,"code":149314,"language":997,"meta":998,"style":998},"$('#load_callback').click(function () {\n $('#result')\n .html(ajax_loading_img)\n .load(loadUrl, null, function (responseText) {\n alert('Response:\\n' + responseText);\n });\n});\n",[941,149316,149317,149336,149346,149354,149375,149393,149397],{"__ignoreMap":998},[1002,149318,149319,149321,149323,149326,149328,149330,149332,149334],{"class":1004,"line":1005},[1002,149320,15864],{"class":1026},[1002,149322,1031],{"class":1030},[1002,149324,149325],{"class":1034},"'#load_callback'",[1002,149327,1539],{"class":1030},[1002,149329,11181],{"class":1026},[1002,149331,1031],{"class":1030},[1002,149333,6965],{"class":1015},[1002,149335,9772],{"class":1030},[1002,149337,149338,149340,149342,149344],{"class":1004,"line":1012},[1002,149339,88304],{"class":1026},[1002,149341,1031],{"class":1030},[1002,149343,145820],{"class":1034},[1002,149345,3808],{"class":1030},[1002,149347,149348,149350,149352],{"class":1004,"line":1047},[1002,149349,30624],{"class":1030},[1002,149351,383],{"class":1026},[1002,149353,149149],{"class":1030},[1002,149355,149356,149358,149360,149362,149364,149366,149368,149370,149373],{"class":1004,"line":1054},[1002,149357,30624],{"class":1030},[1002,149359,124635],{"class":1026},[1002,149361,149219],{"class":1030},[1002,149363,26077],{"class":1019},[1002,149365,1251],{"class":1030},[1002,149367,6965],{"class":1015},[1002,149369,6513],{"class":1030},[1002,149371,149372],{"class":2378},"responseText",[1002,149374,2382],{"class":1030},[1002,149376,149377,149379,149381,149384,149386,149388,149390],{"class":1004,"line":1060},[1002,149378,20814],{"class":1026},[1002,149380,1031],{"class":1030},[1002,149382,149383],{"class":1034},"'Response:",[1002,149385,4636],{"class":1019},[1002,149387,14788],{"class":1034},[1002,149389,6583],{"class":1015},[1002,149391,149392],{"class":1030}," responseText);\n",[1002,149394,149395],{"class":1004,"line":1272},[1002,149396,8353],{"class":1030},[1002,149398,149399],{"class":1004,"line":1348},[1002,149400,2804],{"class":1030},[953,149402,149404],{"id":149403},"_2-getjson-retrieve-json-from-a-remote-location","2. $.getJSON(): Retrieve JSON from a Remote Location",[925,149406,149407],{},"JSON (JavaScript Object Notation) is a lightweight data-interchange format. It's very convenient when exchanging data programmatically with JSON.",[925,149409,117924],{},[993,149411,149413],{"className":995,"code":149412,"language":997,"meta":998,"style":998},"$.getJSON('ajax\u002Ftest.json', function (data) {\n var items = [];\n $.each(data, function (key, val) {\n items.push(\"\u003Cli id='\" + key + \"'>\" + val + '\u003C\u002Fli>');\n });\n $('\u003Cul\u002F>', {\n class: 'my-new-list',\n html: items.join(''),\n }).appendTo('body');\n});\n",[941,149414,149415,149437,149447,149469,149502,149506,149517,149527,149540,149553],{"__ignoreMap":998},[1002,149416,149417,149419,149422,149424,149427,149429,149431,149433,149435],{"class":1004,"line":1005},[1002,149418,145364],{"class":1030},[1002,149420,149421],{"class":1026},"getJSON",[1002,149423,1031],{"class":1030},[1002,149425,149426],{"class":1034},"'ajax\u002Ftest.json'",[1002,149428,1251],{"class":1030},[1002,149430,6965],{"class":1015},[1002,149432,6513],{"class":1030},[1002,149434,16648],{"class":2378},[1002,149436,2382],{"class":1030},[1002,149438,149439,149441,149443,149445],{"class":1004,"line":1012},[1002,149440,28293],{"class":1015},[1002,149442,86614],{"class":1030},[1002,149444,2393],{"class":1015},[1002,149446,4924],{"class":1030},[1002,149448,149449,149452,149454,149457,149459,149461,149463,149465,149467],{"class":1004,"line":1047},[1002,149450,149451],{"class":1030}," $.",[1002,149453,6633],{"class":1026},[1002,149455,149456],{"class":1030},"(data, ",[1002,149458,6965],{"class":1015},[1002,149460,6513],{"class":1030},[1002,149462,7857],{"class":2378},[1002,149464,1251],{"class":1030},[1002,149466,39288],{"class":2378},[1002,149468,2382],{"class":1030},[1002,149470,149471,149474,149476,149478,149481,149483,149486,149488,149491,149493,149495,149497,149500],{"class":1004,"line":1054},[1002,149472,149473],{"class":1030}," items.",[1002,149475,4974],{"class":1026},[1002,149477,1031],{"class":1030},[1002,149479,149480],{"class":1034},"\"\u003Cli id='\"",[1002,149482,6583],{"class":1015},[1002,149484,149485],{"class":1030}," key ",[1002,149487,5064],{"class":1015},[1002,149489,149490],{"class":1034}," \"'>\"",[1002,149492,6583],{"class":1015},[1002,149494,17276],{"class":1030},[1002,149496,5064],{"class":1015},[1002,149498,149499],{"class":1034}," '\u003C\u002Fli>'",[1002,149501,1085],{"class":1030},[1002,149503,149504],{"class":1004,"line":1060},[1002,149505,19836],{"class":1030},[1002,149507,149508,149510,149512,149515],{"class":1004,"line":1272},[1002,149509,88304],{"class":1026},[1002,149511,1031],{"class":1030},[1002,149513,149514],{"class":1034},"'\u003Cul\u002F>'",[1002,149516,38330],{"class":1030},[1002,149518,149519,149522,149525],{"class":1004,"line":1348},[1002,149520,149521],{"class":1030}," class: ",[1002,149523,149524],{"class":1034},"'my-new-list'",[1002,149526,1143],{"class":1030},[1002,149528,149529,149532,149534,149536,149538],{"class":1004,"line":1354},[1002,149530,149531],{"class":1030}," html: items.",[1002,149533,7504],{"class":1026},[1002,149535,1031],{"class":1030},[1002,149537,19820],{"class":1034},[1002,149539,1257],{"class":1030},[1002,149541,149542,149544,149547,149549,149551],{"class":1004,"line":1360},[1002,149543,66583],{"class":1030},[1002,149545,149546],{"class":1026},"appendTo",[1002,149548,1031],{"class":1030},[1002,149550,35638],{"class":1034},[1002,149552,1085],{"class":1030},[1002,149554,149555],{"class":1004,"line":1366},[1002,149556,2804],{"class":1030},[925,149558,149559],{},"This is the equivalent to Ajax:",[993,149561,149563],{"className":995,"code":149562,"language":997,"meta":998,"style":998},"$.ajax({\n dataType: 'json',\n url: url,\n data: data,\n success: success,\n});\n",[941,149564,149565,149573,149582,149587,149592,149597],{"__ignoreMap":998},[1002,149566,149567,149569,149571],{"class":1004,"line":1005},[1002,149568,145364],{"class":1030},[1002,149570,79258],{"class":1026},[1002,149572,2756],{"class":1030},[1002,149574,149575,149578,149580],{"class":1004,"line":1012},[1002,149576,149577],{"class":1030}," dataType: ",[1002,149579,79278],{"class":1034},[1002,149581,1143],{"class":1030},[1002,149583,149584],{"class":1004,"line":1047},[1002,149585,149586],{"class":1030}," url: url,\n",[1002,149588,149589],{"class":1004,"line":1054},[1002,149590,149591],{"class":1030}," data: data,\n",[1002,149593,149594],{"class":1004,"line":1060},[1002,149595,149596],{"class":1030}," success: success,\n",[1002,149598,149599],{"class":1004,"line":1272},[1002,149600,2804],{"class":1030},[925,149602,149603],{},"Few facts about getJSON:",[1530,149605,149606,149615,149620,149625,149630],{},[974,149607,149608,149611,149612,948],{},[941,149609,149610],{},"$.getJSON"," doesn’t load information directly to the DOM. So the function is $.getJSON, NOT ",[941,149613,149614],{},"$(“#result”).getJSON",[974,149616,149617,149619],{},[941,149618,149610],{}," accepts three parameters. A url, parameters passed to the url and a callback function",[974,149621,149622,149624],{},[941,149623,149610],{}," passes parameters in GET method. POSTing is not possible with $.getJSON",[974,149626,149627,149629],{},[941,149628,149610],{}," treats response as JSON",[974,149631,149632,149634],{},[941,149633,149610],{},"’s function name is NOT camel-cased. All four letters of “JSON” are in uppercase",[953,149636,149638],{"id":149637},"_3-getscript-load-javascript-from-a-remote-location","3. $.getScript(): Load JavaScript from a Remote Location",[925,149640,149641,149642,22383],{},"We can load JavaScript files with ",[941,149643,149644],{},"$.getScript",[993,149646,149648],{"className":995,"code":149647,"language":997,"meta":998,"style":998},"\u002F\u002F $.getScript()\nvar scriptUrl = 'ajax\u002Fscript.php';\n\n$('#getScript').click(function () {\n $('#result').html(ajax_loading_img);\n $.getScript(scriptUrl, function () {\n $('#result').html('');\n });\n});\n",[941,149649,149650,149655,149669,149673,149692,149707,149721,149739,149743],{"__ignoreMap":998},[1002,149651,149652],{"class":1004,"line":1005},[1002,149653,149654],{"class":1008},"\u002F\u002F $.getScript()\n",[1002,149656,149657,149659,149662,149664,149667],{"class":1004,"line":1012},[1002,149658,18311],{"class":1015},[1002,149660,149661],{"class":1030}," scriptUrl ",[1002,149663,2393],{"class":1015},[1002,149665,149666],{"class":1034}," 'ajax\u002Fscript.php'",[1002,149668,1407],{"class":1030},[1002,149670,149671],{"class":1004,"line":1047},[1002,149672,1051],{"emptyLinePlaceholder":1050},[1002,149674,149675,149677,149679,149682,149684,149686,149688,149690],{"class":1004,"line":1054},[1002,149676,15864],{"class":1026},[1002,149678,1031],{"class":1030},[1002,149680,149681],{"class":1034},"'#getScript'",[1002,149683,1539],{"class":1030},[1002,149685,11181],{"class":1026},[1002,149687,1031],{"class":1030},[1002,149689,6965],{"class":1015},[1002,149691,9772],{"class":1030},[1002,149693,149694,149696,149698,149700,149702,149704],{"class":1004,"line":1060},[1002,149695,88304],{"class":1026},[1002,149697,1031],{"class":1030},[1002,149699,145820],{"class":1034},[1002,149701,1539],{"class":1030},[1002,149703,383],{"class":1026},[1002,149705,149706],{"class":1030},"(ajax_loading_img);\n",[1002,149708,149709,149711,149714,149717,149719],{"class":1004,"line":1272},[1002,149710,149451],{"class":1030},[1002,149712,149713],{"class":1026},"getScript",[1002,149715,149716],{"class":1030},"(scriptUrl, ",[1002,149718,6965],{"class":1015},[1002,149720,9772],{"class":1030},[1002,149722,149723,149725,149727,149729,149731,149733,149735,149737],{"class":1004,"line":1348},[1002,149724,109906],{"class":1026},[1002,149726,1031],{"class":1030},[1002,149728,145820],{"class":1034},[1002,149730,1539],{"class":1030},[1002,149732,383],{"class":1026},[1002,149734,1031],{"class":1030},[1002,149736,19820],{"class":1034},[1002,149738,1085],{"class":1030},[1002,149740,149741],{"class":1004,"line":1354},[1002,149742,19836],{"class":1030},[1002,149744,149745],{"class":1004,"line":1360},[1002,149746,2804],{"class":1030},[1530,149748,149749,149752,149755],{},[974,149750,149751],{},"$.getScript accepts only two parameters, a url, and a callback function.",[974,149753,149754],{},"Neither the GET nor POST params can be passed to $.getScript. (Of course you can append GET params to the url.)",[974,149756,149757],{},"JavaScript files don't have to contain the \".js\" extension. In this case, the remote url points to a PHP file.",[953,149759,149761],{"id":149760},"_4-get-make-get-requests","4. $.get(): Make GET Requests",[925,149763,149764,149767],{},[941,149765,149766],{},"$.get()"," is a more general-purpose way to make GET requests. It handles the response of many formats including xml, html, text, script, json, and jonsp.",[925,149769,149770,149771,149773,149774,149779],{},"Click on the ",[941,149772,149766],{}," button in the ",[933,149775,149778],{"href":149776,"rel":149777},"http:\u002F\u002Fcdn.tutsplus.com\u002Fnet\u002Fuploads\u002Flegacy\u002F412_ajaxCalls\u002FDEMO\u002Findex.htm",[937],"demo page"," and see the code.",[993,149781,149783],{"className":995,"code":149782,"language":997,"meta":998,"style":998},"$('#get').click(function () {\n $('#result').html(ajax_loading_img);\n $.get(\n loadUrl,\n { language: 'php', version: 5 },\n function (responseText) {\n $('#result').html(responseText);\n },\n 'html',\n );\n});\n",[941,149784,149785,149804,149818,149826,149831,149844,149854,149870,149874,149881,149885],{"__ignoreMap":998},[1002,149786,149787,149789,149791,149794,149796,149798,149800,149802],{"class":1004,"line":1005},[1002,149788,15864],{"class":1026},[1002,149790,1031],{"class":1030},[1002,149792,149793],{"class":1034},"'#get'",[1002,149795,1539],{"class":1030},[1002,149797,11181],{"class":1026},[1002,149799,1031],{"class":1030},[1002,149801,6965],{"class":1015},[1002,149803,9772],{"class":1030},[1002,149805,149806,149808,149810,149812,149814,149816],{"class":1004,"line":1012},[1002,149807,88304],{"class":1026},[1002,149809,1031],{"class":1030},[1002,149811,145820],{"class":1034},[1002,149813,1539],{"class":1030},[1002,149815,383],{"class":1026},[1002,149817,149706],{"class":1030},[1002,149819,149820,149822,149824],{"class":1004,"line":1047},[1002,149821,149451],{"class":1030},[1002,149823,8070],{"class":1026},[1002,149825,10468],{"class":1030},[1002,149827,149828],{"class":1004,"line":1054},[1002,149829,149830],{"class":1030}," loadUrl,\n",[1002,149832,149833,149836,149838,149840,149842],{"class":1004,"line":1060},[1002,149834,149835],{"class":1030}," { language: ",[1002,149837,149293],{"class":1034},[1002,149839,149296],{"class":1030},[1002,149841,2859],{"class":1019},[1002,149843,33835],{"class":1030},[1002,149845,149846,149848,149850,149852],{"class":1004,"line":1272},[1002,149847,53413],{"class":1015},[1002,149849,6513],{"class":1030},[1002,149851,149372],{"class":2378},[1002,149853,2382],{"class":1030},[1002,149855,149856,149859,149861,149863,149865,149867],{"class":1004,"line":1348},[1002,149857,149858],{"class":1026}," $",[1002,149860,1031],{"class":1030},[1002,149862,145820],{"class":1034},[1002,149864,1539],{"class":1030},[1002,149866,383],{"class":1026},[1002,149868,149869],{"class":1030},"(responseText);\n",[1002,149871,149872],{"class":1004,"line":1354},[1002,149873,15108],{"class":1030},[1002,149875,149876,149879],{"class":1004,"line":1360},[1002,149877,149878],{"class":1034}," 'html'",[1002,149880,1143],{"class":1030},[1002,149882,149883],{"class":1004,"line":1366},[1002,149884,10503],{"class":1030},[1002,149886,149887],{"class":1004,"line":1946},[1002,149888,2804],{"class":1030},[1530,149890,149891,149894],{},[974,149892,149893],{},"$.get() is completely different, as compared to get(). The latter has nothing to do with AJAX at all.",[974,149895,149896],{},"$.get accepts the response type as the last parameter, which makes it more powerful than the first functions we introduced today. Specify response type if it's not html\u002Ftext. Possible values are xml, html, text, script, json and jonsp.",[953,149898,149900],{"id":149899},"_5-post-make-post-requests","5. $.post(): Make POST Requests",[925,149902,149903],{},"$.post() is a more general-purpose way to make POST requests. It does exactly the same job as $.get(), except for the fact that it makes a POST request instead.",[993,149905,149907],{"className":995,"code":149906,"language":997,"meta":998,"style":998},"$('#post').click(function () {\n $('#result').html(ajax_load);\n $.post(\n loadUrl,\n { language: 'php', version: 5 },\n function (responseText) {\n $('#result').html(responseText);\n },\n 'html',\n );\n});\n",[941,149908,149909,149928,149943,149951,149955,149967,149977,149991,149995,150001,150005],{"__ignoreMap":998},[1002,149910,149911,149913,149915,149918,149920,149922,149924,149926],{"class":1004,"line":1005},[1002,149912,15864],{"class":1026},[1002,149914,1031],{"class":1030},[1002,149916,149917],{"class":1034},"'#post'",[1002,149919,1539],{"class":1030},[1002,149921,11181],{"class":1026},[1002,149923,1031],{"class":1030},[1002,149925,6965],{"class":1015},[1002,149927,9772],{"class":1030},[1002,149929,149930,149932,149934,149936,149938,149940],{"class":1004,"line":1012},[1002,149931,88304],{"class":1026},[1002,149933,1031],{"class":1030},[1002,149935,145820],{"class":1034},[1002,149937,1539],{"class":1030},[1002,149939,383],{"class":1026},[1002,149941,149942],{"class":1030},"(ajax_load);\n",[1002,149944,149945,149947,149949],{"class":1004,"line":1047},[1002,149946,149451],{"class":1030},[1002,149948,24713],{"class":1026},[1002,149950,10468],{"class":1030},[1002,149952,149953],{"class":1004,"line":1054},[1002,149954,149830],{"class":1030},[1002,149956,149957,149959,149961,149963,149965],{"class":1004,"line":1060},[1002,149958,149835],{"class":1030},[1002,149960,149293],{"class":1034},[1002,149962,149296],{"class":1030},[1002,149964,2859],{"class":1019},[1002,149966,33835],{"class":1030},[1002,149968,149969,149971,149973,149975],{"class":1004,"line":1272},[1002,149970,53413],{"class":1015},[1002,149972,6513],{"class":1030},[1002,149974,149372],{"class":2378},[1002,149976,2382],{"class":1030},[1002,149978,149979,149981,149983,149985,149987,149989],{"class":1004,"line":1348},[1002,149980,149858],{"class":1026},[1002,149982,1031],{"class":1030},[1002,149984,145820],{"class":1034},[1002,149986,1539],{"class":1030},[1002,149988,383],{"class":1026},[1002,149990,149869],{"class":1030},[1002,149992,149993],{"class":1004,"line":1354},[1002,149994,15108],{"class":1030},[1002,149996,149997,149999],{"class":1004,"line":1360},[1002,149998,149878],{"class":1034},[1002,150000,1143],{"class":1030},[1002,150002,150003],{"class":1004,"line":1366},[1002,150004,10503],{"class":1030},[1002,150006,150007],{"class":1004,"line":1946},[1002,150008,2804],{"class":1030},[925,150010,150011],{},"The use of $.post() is the same as its brother, $.get(). Check the POST request in Firebug (shown in the following image).",[953,150013,150015],{"id":150014},"_6-ajax","6. $.ajax():",[925,150017,150018],{},"Up to this point, we've examined five commonly used jQuery AJAX functions. They bear different names but, behind the scenes, they generally do the exact same job with slightly different configurations. If you need maximum control over your requests, check out the $.ajax() function.\nThis is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks). -jQuery's official Documentation\nIn my opinion, the first five functions should satisfy most of our needs. But if you need to execute a function on AJAX error, $.ajax() is your only choice.",[953,150020,26561],{"id":26560},[925,150022,150023],{},"In summary, we took an in-depth look of five ways to make AJAX calls with jQuery.",[1530,150025,150026,150031,150037,150043,150048,150054],{},[974,150027,150028,150030],{},[1107,150029,148961],{},": Load a piece of html into a container DOM.",[974,150032,150033,150036],{},[1107,150034,150035],{},"$.getJSON()",": Load a JSON with GET method.",[974,150038,150039,150042],{},[1107,150040,150041],{},"$.getScript()",": Load a JavaScript.",[974,150044,150045,150047],{},[1107,150046,149766],{},": Use this if you want to make a GET call and play extensively with the response.",[974,150049,150050,150053],{},[1107,150051,150052],{},"$.post()",": Use this if you want to make a POST call and don't want to load the response to some container DOM.",[974,150055,150056,150059],{},[1107,150057,150058],{},"$.ajax()",": Use this if you need to do something when XHR fails, or you need to specify ajax options (e.g. cache: true) on the fly.",[1579,150061,150062],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":150064},[150065,150066,150069,150070,150071,150072,150073,150074,150075,150076,150077,150078],{"id":148913,"depth":1012,"text":148914},{"id":148920,"depth":1012,"text":148921,"children":150067},[150068],{"id":148954,"depth":1047,"text":148955},{"id":149099,"depth":1012,"text":149100},{"id":149172,"depth":1012,"text":149173},{"id":149231,"depth":1012,"text":149232},{"id":149307,"depth":1012,"text":149308},{"id":149403,"depth":1012,"text":149404},{"id":149637,"depth":1012,"text":149638},{"id":149760,"depth":1012,"text":149761},{"id":149899,"depth":1012,"text":149900},{"id":150014,"depth":1012,"text":150015},{"id":26560,"depth":1012,"text":26561},"2014-02-28","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhow-to-make-ajax-calls-in-jquery.jpg",{},{"title":369,"description":371},"blog\u002Fhow-to-make-ajax-calls-in-jquery",[16,17],"RCjmQNQOjRiycS58YhWsD0Xf0-oiA40wjMvEX1wRFU4",{"id":150087,"title":819,"author":920,"body":150088,"date":150802,"description":821,"extension":1591,"image":150803,"meta":150804,"navigation":1050,"path":820,"seo":150805,"stem":150806,"tags":150807,"__hash__":150808},"blog\u002Fblog\u002Fstylus-for-css.md",{"type":922,"value":150089,"toc":150794},[150090,150098,150100,150112,150147,150150,150186,150190,150207,150211,150214,150298,150304,150308,150316,150495,150504,150519,150525,150603,150607,150610,150650,150653,150655,150661,150791],[925,150091,150092,150093,150097],{},"That is where  Stylus, a CSS pre-processor which is similar to SASS and LESS comes in to play. You can further simplify your code with ",[933,150094,150096],{"href":150095,"target":132673},"http:\u002F\u002Fjade-lang.com\u002F","Jade",", but first let's find out how you can set up this Stylus for CSS.",[953,150099,131173],{"id":51756},[925,150101,150102,150103,150107,150108,150111],{},"In Node.js install ",[933,150104,70163],{"href":150105,"rel":150106},"http:\u002F\u002Fexpressjs.com\u002F",[937]," and have Stylus set up as a middleware layer.We need a custom ",[941,150109,150110],{},"compile"," function to use some features I will explain later, which looks like this:",[993,150113,150115],{"className":995,"code":150114,"language":997,"meta":998,"style":998},"function compile(str, path) {\n return stylus(str);\n}\n",[941,150116,150117,150134,150143],{"__ignoreMap":998},[1002,150118,150119,150121,150124,150126,150128,150130,150132],{"class":1004,"line":1005},[1002,150120,6965],{"class":1015},[1002,150122,150123],{"class":1026}," compile",[1002,150125,1031],{"class":1030},[1002,150127,5848],{"class":2378},[1002,150129,1251],{"class":1030},[1002,150131,64361],{"class":2378},[1002,150133,2382],{"class":1030},[1002,150135,150136,150138,150141],{"class":1004,"line":1012},[1002,150137,15066],{"class":1015},[1002,150139,150140],{"class":1026}," stylus",[1002,150142,132171],{"class":1030},[1002,150144,150145],{"class":1004,"line":1047},[1002,150146,1170],{"class":1030},[925,150148,150149],{},"Which is then passed to the middleware setup like this:",[993,150151,150153],{"className":995,"code":150152,"language":997,"meta":998,"style":998},"stylus.middleware({\n src: __dirname + '\u002Fpublic',\n compile : compile\n}));\n",[941,150154,150155,150164,150176,150181],{"__ignoreMap":998},[1002,150156,150157,150160,150162],{"class":1004,"line":1005},[1002,150158,150159],{"class":1030},"stylus.",[1002,150161,17174],{"class":1026},[1002,150163,2756],{"class":1030},[1002,150165,150166,150169,150171,150174],{"class":1004,"line":1012},[1002,150167,150168],{"class":1030}," src: __dirname ",[1002,150170,5064],{"class":1015},[1002,150172,150173],{"class":1034}," '\u002Fpublic'",[1002,150175,1143],{"class":1030},[1002,150177,150178],{"class":1004,"line":1047},[1002,150179,150180],{"class":1030}," compile : compile\n",[1002,150182,150183],{"class":1004,"line":1054},[1002,150184,150185],{"class":1030},"}));\n",[953,150187,150189],{"id":150188},"compress-and-organize-your-css","Compress and organize your CSS",[925,150191,150192,150193,150195,150196,150198,150199,150202,150203,150206],{},"For modular CSS files,  ",[941,150194,110647],{}," can be used to encourage the use of smaller, more modular CSS files. However, minimising HTTP requests is the fastest way to gain page load speed and so CSS is often lumped in a huge 1000 loc+ files.\nYou can keep your code modular and legible without the HTTP overhead with Stylus,which  ",[941,150197,110647],{}," directives are parsed on the server.\nBy setting ",[941,150200,150201],{},"compress : true"," in the Stylus middleware, compress the CSS output or calling ",[941,150204,150205],{},"return stylus(str).set('compress', true)"," in the custom compile function.",[953,150208,150210],{"id":150209},"replace-sprite-with-stylus","Replace Sprite with Stylus",[925,150212,150213],{},"Stylus has the ability to inline images referenced in the CSS as data URIs.",[993,150215,150217],{"className":995,"code":150216,"language":997,"meta":998,"style":998},"function compile(str, path) {\n return stylus(str).define(\n 'url',\n stylus.url({\n paths: [__dirname + '\u002Fpublic'],\n limit: 10000,\n }),\n );\n}\n",[941,150218,150219,150235,150248,150255,150265,150276,150285,150290,150294],{"__ignoreMap":998},[1002,150220,150221,150223,150225,150227,150229,150231,150233],{"class":1004,"line":1005},[1002,150222,6965],{"class":1015},[1002,150224,150123],{"class":1026},[1002,150226,1031],{"class":1030},[1002,150228,5848],{"class":2378},[1002,150230,1251],{"class":1030},[1002,150232,64361],{"class":2378},[1002,150234,2382],{"class":1030},[1002,150236,150237,150239,150241,150244,150246],{"class":1004,"line":1012},[1002,150238,15066],{"class":1015},[1002,150240,150140],{"class":1026},[1002,150242,150243],{"class":1030},"(str).",[1002,150245,130347],{"class":1026},[1002,150247,10468],{"class":1030},[1002,150249,150250,150253],{"class":1004,"line":1047},[1002,150251,150252],{"class":1034}," 'url'",[1002,150254,1143],{"class":1030},[1002,150256,150257,150260,150263],{"class":1004,"line":1054},[1002,150258,150259],{"class":1030}," stylus.",[1002,150261,150262],{"class":1026},"url",[1002,150264,2756],{"class":1030},[1002,150266,150267,150270,150272,150274],{"class":1004,"line":1060},[1002,150268,150269],{"class":1030}," paths: [__dirname ",[1002,150271,5064],{"class":1015},[1002,150273,150173],{"class":1034},[1002,150275,1903],{"class":1030},[1002,150277,150278,150281,150283],{"class":1004,"line":1272},[1002,150279,150280],{"class":1030}," limit: ",[1002,150282,40944],{"class":1019},[1002,150284,1143],{"class":1030},[1002,150286,150287],{"class":1004,"line":1348},[1002,150288,150289],{"class":1030}," }),\n",[1002,150291,150292],{"class":1004,"line":1354},[1002,150293,10503],{"class":1030},[1002,150295,150296],{"class":1004,"line":1360},[1002,150297,1170],{"class":1030},[925,150299,150300,150303],{},[941,150301,150302],{},"limit"," is the file size threshold (bytes); if the file is bigger than that, then the url is referenced as usual.\nAlthough URI encoding images incurs a slight size overhead, the resulting CSS file can be gzipped.\nThis technique means you can reference as many images as you want in your stylesheet without worrying about creating extra HTTP requests.",[953,150305,150307],{"id":150306},"vendor-prefixes","Vendor Prefixes",[925,150309,150310,150315],{},[933,150311,150314],{"href":150312,"rel":150313},"http:\u002F\u002Fvisionmedia.github.com\u002Fnib\u002F",[937],"Nib"," is a library for Stylus, which provides cross-browser mixins.  Are you writing CSS like this?",[993,150317,150319],{"className":35707,"code":150318,"language":29,"meta":998,"style":998},"body {\n background: -webkit-gradient(\n linear,\n left top,\n left bottom,\n color-stop(0, #fff),\n color-stop(1, #000)\n );\n background: -webkit-linear-gradient(top, #fff 0%, #000 100%);\n background: -moz-linear-gradient(top, #fff 0%, #000 100%);\n background: linear-gradient(top, #fff 0%, #000 100%);\n}\n",[941,150320,150321,150327,150338,150345,150355,150364,150379,150393,150397,150429,150460,150491],{"__ignoreMap":998},[1002,150322,150323,150325],{"class":1004,"line":1005},[1002,150324,15034],{"class":15711},[1002,150326,1457],{"class":1030},[1002,150328,150329,150331,150333,150336],{"class":1004,"line":1012},[1002,150330,96669],{"class":1019},[1002,150332,1137],{"class":1030},[1002,150334,150335],{"class":18541},"-webkit-gradient",[1002,150337,10468],{"class":1030},[1002,150339,150340,150343],{"class":1004,"line":1047},[1002,150341,150342],{"class":1019}," linear",[1002,150344,1143],{"class":1030},[1002,150346,150347,150350,150353],{"class":1004,"line":1054},[1002,150348,150349],{"class":1019}," left",[1002,150351,150352],{"class":1019}," top",[1002,150354,1143],{"class":1030},[1002,150356,150357,150359,150362],{"class":1004,"line":1060},[1002,150358,150349],{"class":1019},[1002,150360,150361],{"class":1019}," bottom",[1002,150363,1143],{"class":1030},[1002,150365,150366,150369,150371,150373,150375,150377],{"class":1004,"line":1272},[1002,150367,150368],{"class":18541}," color-stop",[1002,150370,1031],{"class":1030},[1002,150372,5867],{"class":1019},[1002,150374,1251],{"class":1030},[1002,150376,97251],{"class":1019},[1002,150378,1257],{"class":1030},[1002,150380,150381,150383,150385,150387,150389,150391],{"class":1004,"line":1348},[1002,150382,150368],{"class":18541},[1002,150384,1031],{"class":1030},[1002,150386,6211],{"class":1019},[1002,150388,1251],{"class":1030},[1002,150390,97210],{"class":1019},[1002,150392,3808],{"class":1030},[1002,150394,150395],{"class":1004,"line":1354},[1002,150396,10503],{"class":1030},[1002,150398,150399,150401,150403,150406,150408,150411,150413,150415,150417,150419,150421,150423,150425,150427],{"class":1004,"line":1360},[1002,150400,96669],{"class":1019},[1002,150402,1137],{"class":1030},[1002,150404,150405],{"class":1019},"-webkit-linear-gradient",[1002,150407,1031],{"class":1030},[1002,150409,150410],{"class":1019},"top",[1002,150412,1251],{"class":1030},[1002,150414,97251],{"class":1019},[1002,150416,4910],{"class":1019},[1002,150418,32598],{"class":1015},[1002,150420,1251],{"class":1030},[1002,150422,97210],{"class":1019},[1002,150424,16125],{"class":1019},[1002,150426,32598],{"class":1015},[1002,150428,1085],{"class":1030},[1002,150430,150431,150433,150435,150438,150440,150442,150444,150446,150448,150450,150452,150454,150456,150458],{"class":1004,"line":1366},[1002,150432,96669],{"class":1019},[1002,150434,1137],{"class":1030},[1002,150436,150437],{"class":1019},"-moz-linear-gradient",[1002,150439,1031],{"class":1030},[1002,150441,150410],{"class":1019},[1002,150443,1251],{"class":1030},[1002,150445,97251],{"class":1019},[1002,150447,4910],{"class":1019},[1002,150449,32598],{"class":1015},[1002,150451,1251],{"class":1030},[1002,150453,97210],{"class":1019},[1002,150455,16125],{"class":1019},[1002,150457,32598],{"class":1015},[1002,150459,1085],{"class":1030},[1002,150461,150462,150464,150466,150469,150471,150473,150475,150477,150479,150481,150483,150485,150487,150489],{"class":1004,"line":1946},[1002,150463,96669],{"class":1019},[1002,150465,1137],{"class":1030},[1002,150467,150468],{"class":1019},"linear-gradient",[1002,150470,1031],{"class":1030},[1002,150472,150410],{"class":1019},[1002,150474,1251],{"class":1030},[1002,150476,97251],{"class":1019},[1002,150478,4910],{"class":1019},[1002,150480,32598],{"class":1015},[1002,150482,1251],{"class":1030},[1002,150484,97210],{"class":1019},[1002,150486,16125],{"class":1019},[1002,150488,32598],{"class":1015},[1002,150490,1085],{"class":1030},[1002,150492,150493],{"class":1004,"line":1956},[1002,150494,1170],{"class":1030},[925,150496,150497,150498,150500,150501,150503],{},"What happens if you want to change ",[941,150499,97210],{}," to ",[941,150502,110939],{},"? Pretty painstaking. With nib, you can write this:",[993,150505,150507],{"className":35707,"code":150506,"language":29,"meta":998,"style":998},"body\n background linear-gradient(top, white, black)\n",[941,150508,150509,150514],{"__ignoreMap":998},[1002,150510,150511],{"class":1004,"line":1005},[1002,150512,150513],{"class":15711},"body\n",[1002,150515,150516],{"class":1004,"line":1012},[1002,150517,150518],{"class":1030}," background linear-gradient(top, white, black)\n",[925,150520,150521,150522,150524],{},"Nib jumps in and vendor-prefixes everything for you, so you don't have to worry about it. I literally only use it for that purpose, but it does lots of other useful things if you want it to.\nTo use nib with your custom ",[941,150523,150110],{}," function do this:",[993,150526,150528],{"className":995,"code":150527,"language":997,"meta":998,"style":998},"\u002F\u002F Make sure you install it\n\u002F\u002F with `npm install nib`\n\nvar nib = require('nib');\n\nfunction compile(str, path) {\n return stylus(str).use(nib());\n}\n",[941,150529,150530,150535,150540,150544,150562,150566,150582,150599],{"__ignoreMap":998},[1002,150531,150532],{"class":1004,"line":1005},[1002,150533,150534],{"class":1008},"\u002F\u002F Make sure you install it\n",[1002,150536,150537],{"class":1004,"line":1012},[1002,150538,150539],{"class":1008},"\u002F\u002F with `npm install nib`\n",[1002,150541,150542],{"class":1004,"line":1047},[1002,150543,1051],{"emptyLinePlaceholder":1050},[1002,150545,150546,150548,150551,150553,150555,150557,150560],{"class":1004,"line":1054},[1002,150547,18311],{"class":1015},[1002,150549,150550],{"class":1030}," nib ",[1002,150552,2393],{"class":1015},[1002,150554,1027],{"class":1026},[1002,150556,1031],{"class":1030},[1002,150558,150559],{"class":1034},"'nib'",[1002,150561,1085],{"class":1030},[1002,150563,150564],{"class":1004,"line":1060},[1002,150565,1051],{"emptyLinePlaceholder":1050},[1002,150567,150568,150570,150572,150574,150576,150578,150580],{"class":1004,"line":1272},[1002,150569,6965],{"class":1015},[1002,150571,150123],{"class":1026},[1002,150573,1031],{"class":1030},[1002,150575,5848],{"class":2378},[1002,150577,1251],{"class":1030},[1002,150579,64361],{"class":2378},[1002,150581,2382],{"class":1030},[1002,150583,150584,150586,150588,150590,150592,150594,150597],{"class":1004,"line":1348},[1002,150585,15066],{"class":1015},[1002,150587,150140],{"class":1026},[1002,150589,150243],{"class":1030},[1002,150591,21894],{"class":1026},[1002,150593,1031],{"class":1030},[1002,150595,150596],{"class":1026},"nib",[1002,150598,3885],{"class":1030},[1002,150600,150601],{"class":1004,"line":1354},[1002,150602,1170],{"class":1030},[953,150604,150606],{"id":150605},"lose-the-punctuation","Lose the punctuation",[925,150608,150609],{},"One of my favourite features of Stylus is the syntax. You have the option to go completely punctuation-free: no semi-colons, no colons and no curly-braces, just whitespace and indentation.\nYou could still write regular CSS or you can use the short hand:",[993,150611,150613],{"className":35707,"code":150612,"language":29,"meta":998,"style":998},"* margin 0 padding 0 * {\n margin: 0;\n padding: 0;\n}\n",[941,150614,150615,150626,150636,150646],{"__ignoreMap":998},[1002,150616,150617,150619,150622,150624],{"class":1004,"line":1005},[1002,150618,4703],{"class":15711},[1002,150620,150621],{"class":1030}," margin 0 padding 0 ",[1002,150623,4703],{"class":15711},[1002,150625,1457],{"class":1030},[1002,150627,150628,150630,150632,150634],{"class":1004,"line":1012},[1002,150629,37384],{"class":1019},[1002,150631,1137],{"class":1030},[1002,150633,5867],{"class":1019},[1002,150635,1407],{"class":1030},[1002,150637,150638,150640,150642,150644],{"class":1004,"line":1047},[1002,150639,37280],{"class":1019},[1002,150641,1137],{"class":1030},[1002,150643,5867],{"class":1019},[1002,150645,1407],{"class":1030},[1002,150647,150648],{"class":1004,"line":1054},[1002,150649,1170],{"class":1030},[925,150651,150652],{},"In the punctuation-free example, only the useful tokens (excl. whitespace) exist, of which there are five. In the punctuated example, there are six extraneous punctuation tokens. It's up to you to choose.",[953,150654,26561],{"id":26560},[925,150656,150657,150658,150660],{},"Here is my complete custom ",[941,150659,150110],{}," function:",[993,150662,150664],{"className":995,"code":150663,"language":997,"meta":998,"style":998},"function compile(str, path) {\n return stylus(str)\n .define(\n 'url',\n stylus.url({\n paths: [__dirname + '\u002Fpublic'],\n limit: 10000,\n }),\n )\n .set('filename', path)\n .set('compress', true)\n .use(nib());\n}\n",[941,150665,150666,150682,150691,150699,150706,150715,150726,150735,150739,150744,150758,150775,150787],{"__ignoreMap":998},[1002,150667,150668,150670,150672,150674,150676,150678,150680],{"class":1004,"line":1005},[1002,150669,6965],{"class":1015},[1002,150671,150123],{"class":1026},[1002,150673,1031],{"class":1030},[1002,150675,5848],{"class":2378},[1002,150677,1251],{"class":1030},[1002,150679,64361],{"class":2378},[1002,150681,2382],{"class":1030},[1002,150683,150684,150686,150688],{"class":1004,"line":1012},[1002,150685,15066],{"class":1015},[1002,150687,150140],{"class":1026},[1002,150689,150690],{"class":1030},"(str)\n",[1002,150692,150693,150695,150697],{"class":1004,"line":1047},[1002,150694,30624],{"class":1030},[1002,150696,130347],{"class":1026},[1002,150698,10468],{"class":1030},[1002,150700,150701,150704],{"class":1004,"line":1054},[1002,150702,150703],{"class":1034}," 'url'",[1002,150705,1143],{"class":1030},[1002,150707,150708,150711,150713],{"class":1004,"line":1060},[1002,150709,150710],{"class":1030}," stylus.",[1002,150712,150262],{"class":1026},[1002,150714,2756],{"class":1030},[1002,150716,150717,150720,150722,150724],{"class":1004,"line":1272},[1002,150718,150719],{"class":1030}," paths: [__dirname ",[1002,150721,5064],{"class":1015},[1002,150723,150173],{"class":1034},[1002,150725,1903],{"class":1030},[1002,150727,150728,150731,150733],{"class":1004,"line":1348},[1002,150729,150730],{"class":1030}," limit: ",[1002,150732,40944],{"class":1019},[1002,150734,1143],{"class":1030},[1002,150736,150737],{"class":1004,"line":1354},[1002,150738,59892],{"class":1030},[1002,150740,150741],{"class":1004,"line":1360},[1002,150742,150743],{"class":1030}," )\n",[1002,150745,150746,150748,150750,150752,150755],{"class":1004,"line":1366},[1002,150747,30624],{"class":1030},[1002,150749,40544],{"class":1026},[1002,150751,1031],{"class":1030},[1002,150753,150754],{"class":1034},"'filename'",[1002,150756,150757],{"class":1030},", path)\n",[1002,150759,150760,150762,150764,150766,150769,150771,150773],{"class":1004,"line":1946},[1002,150761,30624],{"class":1030},[1002,150763,40544],{"class":1026},[1002,150765,1031],{"class":1030},[1002,150767,150768],{"class":1034},"'compress'",[1002,150770,1251],{"class":1030},[1002,150772,17397],{"class":1019},[1002,150774,3808],{"class":1030},[1002,150776,150777,150779,150781,150783,150785],{"class":1004,"line":1956},[1002,150778,30624],{"class":1030},[1002,150780,21894],{"class":1026},[1002,150782,1031],{"class":1030},[1002,150784,150596],{"class":1026},[1002,150786,3885],{"class":1030},[1002,150788,150789],{"class":1004,"line":1961},[1002,150790,1170],{"class":1030},[1579,150792,150793],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":998,"searchDepth":1012,"depth":1012,"links":150795},[150796,150797,150798,150799,150800,150801],{"id":51756,"depth":1012,"text":131173},{"id":150188,"depth":1012,"text":150189},{"id":150209,"depth":1012,"text":150210},{"id":150306,"depth":1012,"text":150307},{"id":150605,"depth":1012,"text":150606},{"id":26560,"depth":1012,"text":26561},"2014-02-21","\u002Fimages\u002Fblog\u002Ffeatures\u002Fstylus-for-css.jpg",{},{"title":819,"description":821},"blog\u002Fstylus-for-css",[16,29],"iGg1_ks_82TVOIoeIPMI0XTM9B8UUZ5DelvUkwarKrw",{"id":150810,"title":73,"author":920,"body":150811,"date":150976,"description":75,"extension":1591,"image":150977,"meta":150978,"navigation":1050,"path":74,"seo":150979,"stem":150980,"tags":150981,"__hash__":150982},"blog\u002Fblog\u002Fbenefits-of-automated-deployment.md",{"type":922,"value":150812,"toc":150966},[150813,150816,150822,150826,150829,150832,150871,150874,150885,150891,150894,150905,150909,150912,150916,150922,150926,150932,150936,150942,150946,150949,150954,150958,150961],[925,150814,150815],{},"Manual deployment can lead to human errors and consume a huge chunk of man-hours to fix. Adopting automation significantly addresses the issues with eliminating human errors, deployments become faster and not only that, their habits change as well, with the ability to deploy more frequently with many times a week, even daily. The benefits of automated deployment are proven in the chart below.",[925,150817,150818],{},[963,150819],{"alt":150820,"src":150821},"Automated deployment","\u002Fimages\u002Fblog\u002F2014-02-14-benefits-of-automated-deployment\u002Fembeddable_9d6af187-7497-4524-99aa-057158d4ed4b.png",[953,150823,150825],{"id":150824},"why-does-that-matter","Why does that matter?",[925,150827,150828],{},"When a bug is fixed or a feature is developed, it is best delivered to the client rather than sitting for the next release in months. The sooner you deliver the new feature is sooner the client gets the values for it, and sooner you get feedback and that improves. A feature or a bug fix waiting for deployment is like inventory waiting for sale that doesn't make money for you.",[925,150830,150831],{},"So how does automation increase the frequency of deployment?  Here are the factors:",[1530,150833,150834,150841,150848,150854,150861],{},[974,150835,150836,150837,150840],{},"Less ",[1107,150838,150839],{},"downtime"," due to faster deployment",[974,150842,150843,150844,150847],{},"Less amount of ",[1107,150845,150846],{},"people"," required to execute the deployment process",[974,150849,150850,150853],{},[1107,150851,150852],{},"Reliable"," deployment process, due to lack of human errors",[974,150855,150856,150857,150860],{},"More ",[1107,150858,150859],{},"frequent"," deployments due to all above facts",[974,150862,150863,150864,136544,150867,150870],{},"Frequent deployments helps out ",[1107,150865,150866],{},"resolving",[1107,150868,150869],{},"bugs"," faster",[925,150872,150873],{},"**How does an Automated Deployment Tool can assit you?**Your team might already be using a source control tool, like TFS, Git, Mercurial or Subversion. Say, you already have a build server or CI (continuous integration) server in place, like JetBrains TeamCity, Team Build or Cruise Control. A tool like Octopus can fit  into your existing software delivery pipeline by building on top of it. With a tool like Octpopus Deploy, the automated deployment pipeline look like this:",[1530,150875,150876,150879,150882],{},[974,150877,150878],{},"Developers commit their code changes to source control",[974,150880,150881],{},"Your build\u002FCI server compiles your code, runs unit tests runs, BDD tests, and bundles the applications into packages",[974,150883,150884],{},"Octopus deploys those packages to your test, staging and production environments",[925,150886,150887],{},[963,150888],{"alt":150889,"src":150890},"Upload","\u002Fimages\u002Fblog\u002F2014-02-14-benefits-of-automated-deployment\u002Fembeddable_f158ab9e-c534-4c7a-af5a-9bfe3570c38c.png",[925,150892,150893],{},"Note that deployments could be triggered in a few different ways. For example:",[1530,150895,150896,150899,150902],{},[974,150897,150898],{},"Your build\u002FCI server might trigger a deployment to a test environment as soon as the build finishes",[974,150900,150901],{},"You might allow testers and developers to \"self service\" deploy to pre-production environments",[974,150903,150904],{},"Release managers\u002Foperations teams can trigger production deployments",[953,150906,150908],{"id":150907},"packaging-applications","Packaging applications",[925,150910,150911],{},"Before an application can deployed, it needs to be turned into a package. Think of a package as being like a ZIP file containing all of the binaries, scripts, CSS files, images and configuration files needed for your application to run. Octopus Deploy uses the NuGet package file format.",[953,150913,150915],{"id":150914},"secure-deployments","Secure deployments",[925,150917,150918,150921],{},[1107,150919,150920],{},"Tentacle",", a lightwieght agent service, will deploy your applications to multiple servers in multiple environments., which you install on each of the machines that you plan to deploy software to. Octopus uses SSL to push packages and deployment instructions to the Tentacles, and the connection uses a two-way trust relationship: similar to SSH in the Linux\u002FUNIX environments.",[953,150923,150925],{"id":150924},"managing-configuration-differences","Managing configuration differences",[925,150927,150928,150929,150931],{},"Different environments, have different configurations when it comes to deployment. This might require different connection strings in test and in production. You might need to set a password for an SMTP server, or an API key for an external API. To support these scenarios, Octopus has the concept of ",[1107,150930,111657],{},". Octopus can even automatically update the configuration file using these variables during deployment, or pass them to powershell scripts for you to perform custom actions on deployment.",[1655,150933,150935],{"id":150934},"packaging-your-applications-for-deployment","Packaging your applications for deployment",[925,150937,150938,150939,948],{},"Before you can deploy an application using Octopus, you will need to bundle all of the executables, DLL's, configuration files, installation scripts, and anything else the application needs to run into a ",[941,150940,150941],{},"package",[953,150943,150945],{"id":150944},"creating-projects","Creating projects",[925,150947,150948],{},"Once your applications have been packaged, you can create a project to deploy them. A project is a set of deployment steps that you want Octopus to perform, and any related configuration variables. You'll create a project for each group of applications that you plan to deploy together.",[925,150950,150951],{},[963,150952],{"alt":150889,"src":150953},"\u002Fimages\u002Fblog\u002F2014-02-14-benefits-of-automated-deployment\u002Fembeddable_6f9d2f5b-0457-4ce8-9905-71f108d1894d.png",[953,150955,150957],{"id":150956},"define-your-deployment-process","Define your deployment process",[925,150959,150960],{},"Your deployment process is like a recipe, specifying all of the steps Octopus Deploy will perform when you deploy your project to an environment.",[925,150962,150963],{},[963,150964],{"alt":150889,"src":150965},"\u002Fimages\u002Fblog\u002F2014-02-14-benefits-of-automated-deployment\u002Fembeddable_7423d6ba-5463-473b-9e44-389a2a3c9dc9.png",{"title":998,"searchDepth":1012,"depth":1012,"links":150967},[150968,150969,150970,150971,150974,150975],{"id":150824,"depth":1012,"text":150825},{"id":150907,"depth":1012,"text":150908},{"id":150914,"depth":1012,"text":150915},{"id":150924,"depth":1012,"text":150925,"children":150972},[150973],{"id":150934,"depth":1047,"text":150935},{"id":150944,"depth":1012,"text":150945},{"id":150956,"depth":1012,"text":150957},"2014-02-14","\u002Fimages\u002Fblog\u002Ffeatures\u002Fbenefits-of-automated-deployment.jpg",{},{"title":73,"description":75},"blog\u002Fbenefits-of-automated-deployment",[16,77],"vYQJ8El7D_s4Cv8err7sahpp7A72dh5hDM-JAu9RFOA",{"id":150984,"title":553,"author":920,"body":150985,"date":152466,"description":555,"extension":1591,"image":152467,"meta":152468,"navigation":1050,"path":554,"seo":152469,"stem":152470,"tags":152471,"__hash__":152472},"blog\u002Fblog\u002Fmaintainable-javascript.md",{"type":922,"value":150986,"toc":152457},[150987,150991,150994,150998,151004,151091,151120,151192,151208,151430,151466,151468,151478,151551,151556,151580,151646,151653,151657,151675,151844,151851,152022,152039,152137,152141,152167,152184,152187,152191,152197,152199,152258,152260,152306,152309,152428,152449,152451,152454],[953,150988,150990],{"id":150989},"why-is-it-challenging","Why is it challenging?",[925,150992,150993],{},"Javascript is a dynamic langauge, which meanins you don't have to deal with strong typing and the complexities of the other object oriented languages like C#, C++ and Java. You can do things in a lot of different ways, but this can be a  blessing in disguise. But this same dynamic feature can also be used to make it a great tool, which is what we are discussing here.",[953,150995,150997],{"id":150996},"design-patterns-and-practices","Design Patterns and Practices",[925,150999,151000,151001,948],{},"Design patterns are reusable solutions to commonly occurring problems in software design. There are lots out there, but you have to make sure to select the most relevant pattern for your requirement. Another commonly used pattern is the ",[1107,151002,151003],{},"Revealing Module Pattern",[993,151005,151007],{"className":995,"code":151006,"language":997,"meta":998,"style":998},"My.App = (function () {\n \u002F\u002F Initialize the application\n var init = function () {\n My.Utils.log('Application initialized...');\n };\n \u002F\u002F Return the public facing methods for the App\n return {\n init: init,\n };\n})();\nMy.App.init();\n",[941,151008,151009,151022,151027,151040,151054,151058,151063,151069,151074,151078,151082],{"__ignoreMap":998},[1002,151010,151011,151014,151016,151018,151020],{"class":1004,"line":1005},[1002,151012,151013],{"class":1030},"My.App ",[1002,151015,2393],{"class":1015},[1002,151017,6513],{"class":1030},[1002,151019,6965],{"class":1015},[1002,151021,9772],{"class":1030},[1002,151023,151024],{"class":1004,"line":1012},[1002,151025,151026],{"class":1008}," \u002F\u002F Initialize the application\n",[1002,151028,151029,151031,151034,151036,151038],{"class":1004,"line":1047},[1002,151030,28293],{"class":1015},[1002,151032,151033],{"class":1026}," init",[1002,151035,1023],{"class":1015},[1002,151037,8457],{"class":1015},[1002,151039,9772],{"class":1030},[1002,151041,151042,151045,151047,151049,151052],{"class":1004,"line":1054},[1002,151043,151044],{"class":1030}," My.Utils.",[1002,151046,2886],{"class":1026},[1002,151048,1031],{"class":1030},[1002,151050,151051],{"class":1034},"'Application initialized...'",[1002,151053,1085],{"class":1030},[1002,151055,151056],{"class":1004,"line":1060},[1002,151057,15113],{"class":1030},[1002,151059,151060],{"class":1004,"line":1272},[1002,151061,151062],{"class":1008}," \u002F\u002F Return the public facing methods for the App\n",[1002,151064,151065,151067],{"class":1004,"line":1348},[1002,151066,15066],{"class":1015},[1002,151068,1457],{"class":1030},[1002,151070,151071],{"class":1004,"line":1354},[1002,151072,151073],{"class":1030}," init: init,\n",[1002,151075,151076],{"class":1004,"line":1360},[1002,151077,15113],{"class":1030},[1002,151079,151080],{"class":1004,"line":1366},[1002,151081,88924],{"class":1030},[1002,151083,151084,151087,151089],{"class":1004,"line":1946},[1002,151085,151086],{"class":1030},"My.App.",[1002,151088,48439],{"class":1026},[1002,151090,1428],{"class":1030},[925,151092,151093,151094,151096,151097,151099,151100,151103,151104,151107,151108,151111,151112,151115,151116,151119],{},"Above, an ",[941,151095,22209],{}," function is defined within the My object. Inside, a function variable for ",[941,151098,48439],{}," is defined, and returned as an ",[1107,151101,151102],{},"anonymous object literal",". Notice that, at the end, there’s that extra set of parenthesis: ",[941,151105,151106],{},"}());",". This forces the ",[941,151109,151110],{},"My.App"," function to automatically execute and return. Now, you can call ",[941,151113,151114],{},"My.App.init()"," to initialize your app. The anonymous function above is a best practice in JavaScript, and is referred to as a ",[1107,151117,151118],{},"Self-Executing Anonymous Function",". Because functions in JavaScript have their own scope – i.e. variables defined inside of functions are not available outside of them – this makes anonymous functions useful in multiple ways.",[993,151121,151123],{"className":995,"code":151122,"language":997,"meta":998,"style":998},"\u002F\u002F Wrap your code in a SEAF\n(function (global) {\n `\u002F\u002F Now any variables you declare in here are unavailable outside.\nvar somethingPrivate = 'you cant get to me!';\nglobal.somethingPublic = 'but you can however get to me!';`;\n})(window);\n\nconsole.log(window.somethingPublic); \u002F\u002F This works...\nconsole.log(somethingPrivate); \u002F\u002F Error\n",[941,151124,151125,151130,151142,151147,151152,151159,151164,151168,151180],{"__ignoreMap":998},[1002,151126,151127],{"class":1004,"line":1005},[1002,151128,151129],{"class":1008},"\u002F\u002F Wrap your code in a SEAF\n",[1002,151131,151132,151134,151136,151138,151140],{"class":1004,"line":1012},[1002,151133,1031],{"class":1030},[1002,151135,6965],{"class":1015},[1002,151137,6513],{"class":1030},[1002,151139,16475],{"class":2378},[1002,151141,2382],{"class":1030},[1002,151143,151144],{"class":1004,"line":1047},[1002,151145,151146],{"class":1034}," `\u002F\u002F Now any variables you declare in here are unavailable outside.\n",[1002,151148,151149],{"class":1004,"line":1054},[1002,151150,151151],{"class":1034},"var somethingPrivate = 'you cant get to me!';\n",[1002,151153,151154,151157],{"class":1004,"line":1060},[1002,151155,151156],{"class":1034},"global.somethingPublic = 'but you can however get to me!';`",[1002,151158,1407],{"class":1030},[1002,151160,151161],{"class":1004,"line":1272},[1002,151162,151163],{"class":1030},"})(window);\n",[1002,151165,151166],{"class":1004,"line":1348},[1002,151167,1051],{"emptyLinePlaceholder":1050},[1002,151169,151170,151172,151174,151177],{"class":1004,"line":1354},[1002,151171,2883],{"class":1030},[1002,151173,2886],{"class":1026},[1002,151175,151176],{"class":1030},"(window.somethingPublic); ",[1002,151178,151179],{"class":1008},"\u002F\u002F This works...\n",[1002,151181,151182,151184,151186,151189],{"class":1004,"line":1360},[1002,151183,2883],{"class":1030},[1002,151185,2886],{"class":1026},[1002,151187,151188],{"class":1030},"(somethingPrivate); ",[1002,151190,151191],{"class":1008},"\u002F\u002F Error\n",[925,151193,151194,151195,151197,151198,151201,151202,151204,151205,151207],{},"In this example, because this function is automatically executed, you can pass the ",[941,151196,16479],{}," in to the executing part ",[941,151199,151200],{},"}(window));",", and it will be made available as",[941,151203,16475],{}," inside of the anonymous function. This practice limits the global variables on the ",[941,151206,16479],{}," object, and will assist in preventing naming collisions. Now, you can start using SEAF’s in other areas of your application to make the code feel more modular. This allows for your code to be re-usable, and promotes good separation of concerns. Here’s an example of a potential use for these ideas.",[993,151209,151211],{"className":995,"code":151210,"language":997,"meta":998,"style":998},"(function ($) {\n var welcomeMessage = 'Welcome to this application!';\n NS.Views.WelcomeScreen = function () {\n this.welcome = $('#welcome');\n };\n NS.Views.WelcomeScreen.prototype = {\n showWelcome: function () {\n this.welcome.html(welcomeMessage).show();\n },\n };\n})(jQuery);\n\n$(function () {\n NS.App.init();\n});\n\n\u002F\u002F Modify the App.init above\nvar init = function () {\n NS.Utils.log('Application initialized...');\n this.welcome = new NS.Views.WelcomeScreen();\n this.welcome.showWelcome();\n};\n",[941,151212,151213,151225,151239,151256,151274,151278,151291,151302,151318,151322,151326,151331,151335,151345,151356,151360,151364,151369,151381,151396,151415,151426],{"__ignoreMap":998},[1002,151214,151215,151217,151219,151221,151223],{"class":1004,"line":1005},[1002,151216,1031],{"class":1030},[1002,151218,6965],{"class":1015},[1002,151220,6513],{"class":1030},[1002,151222,15864],{"class":2378},[1002,151224,2382],{"class":1030},[1002,151226,151227,151229,151232,151234,151237],{"class":1004,"line":1012},[1002,151228,28293],{"class":1015},[1002,151230,151231],{"class":1030}," welcomeMessage ",[1002,151233,2393],{"class":1015},[1002,151235,151236],{"class":1034}," 'Welcome to this application!'",[1002,151238,1407],{"class":1030},[1002,151240,151241,151244,151247,151250,151252,151254],{"class":1004,"line":1047},[1002,151242,151243],{"class":1019}," NS",[1002,151245,151246],{"class":1030},".Views.",[1002,151248,151249],{"class":1026},"WelcomeScreen",[1002,151251,1023],{"class":1015},[1002,151253,8457],{"class":1015},[1002,151255,9772],{"class":1030},[1002,151257,151258,151260,151263,151265,151267,151269,151272],{"class":1004,"line":1054},[1002,151259,2387],{"class":1019},[1002,151261,151262],{"class":1030},".welcome ",[1002,151264,2393],{"class":1015},[1002,151266,110094],{"class":1026},[1002,151268,1031],{"class":1030},[1002,151270,151271],{"class":1034},"'#welcome'",[1002,151273,1085],{"class":1030},[1002,151275,151276],{"class":1004,"line":1060},[1002,151277,15113],{"class":1030},[1002,151279,151280,151282,151285,151287,151289],{"class":1004,"line":1272},[1002,151281,151243],{"class":1019},[1002,151283,151284],{"class":1030},".Views.WelcomeScreen.",[1002,151286,3894],{"class":1019},[1002,151288,1023],{"class":1015},[1002,151290,1457],{"class":1030},[1002,151292,151293,151296,151298,151300],{"class":1004,"line":1348},[1002,151294,151295],{"class":1026}," showWelcome",[1002,151297,1137],{"class":1030},[1002,151299,6965],{"class":1015},[1002,151301,9772],{"class":1030},[1002,151303,151304,151306,151309,151311,151314,151316],{"class":1004,"line":1354},[1002,151305,78003],{"class":1019},[1002,151307,151308],{"class":1030},".welcome.",[1002,151310,383],{"class":1026},[1002,151312,151313],{"class":1030},"(welcomeMessage).",[1002,151315,110152],{"class":1026},[1002,151317,1428],{"class":1030},[1002,151319,151320],{"class":1004,"line":1360},[1002,151321,15108],{"class":1030},[1002,151323,151324],{"class":1004,"line":1366},[1002,151325,15113],{"class":1030},[1002,151327,151328],{"class":1004,"line":1946},[1002,151329,151330],{"class":1030},"})(jQuery);\n",[1002,151332,151333],{"class":1004,"line":1956},[1002,151334,1051],{"emptyLinePlaceholder":1050},[1002,151336,151337,151339,151341,151343],{"class":1004,"line":1961},[1002,151338,15864],{"class":1026},[1002,151340,1031],{"class":1030},[1002,151342,6965],{"class":1015},[1002,151344,9772],{"class":1030},[1002,151346,151347,151349,151352,151354],{"class":1004,"line":1971},[1002,151348,151243],{"class":1019},[1002,151350,151351],{"class":1030},".App.",[1002,151353,48439],{"class":1026},[1002,151355,1428],{"class":1030},[1002,151357,151358],{"class":1004,"line":1980},[1002,151359,2804],{"class":1030},[1002,151361,151362],{"class":1004,"line":1985},[1002,151363,1051],{"emptyLinePlaceholder":1050},[1002,151365,151366],{"class":1004,"line":1995},[1002,151367,151368],{"class":1008},"\u002F\u002F Modify the App.init above\n",[1002,151370,151371,151373,151375,151377,151379],{"class":1004,"line":2006},[1002,151372,18311],{"class":1015},[1002,151374,151033],{"class":1026},[1002,151376,1023],{"class":1015},[1002,151378,8457],{"class":1015},[1002,151380,9772],{"class":1030},[1002,151382,151383,151385,151388,151390,151392,151394],{"class":1004,"line":2011},[1002,151384,151243],{"class":1019},[1002,151386,151387],{"class":1030},".Utils.",[1002,151389,2886],{"class":1026},[1002,151391,1031],{"class":1030},[1002,151393,151051],{"class":1034},[1002,151395,1085],{"class":1030},[1002,151397,151398,151400,151402,151404,151406,151409,151411,151413],{"class":1004,"line":2017},[1002,151399,39364],{"class":1019},[1002,151401,151262],{"class":1030},[1002,151403,2393],{"class":1015},[1002,151405,2690],{"class":1015},[1002,151407,151408],{"class":1019}," NS",[1002,151410,151246],{"class":1030},[1002,151412,151249],{"class":1026},[1002,151414,1428],{"class":1030},[1002,151416,151417,151419,151421,151424],{"class":1004,"line":2022},[1002,151418,39364],{"class":1019},[1002,151420,151308],{"class":1030},[1002,151422,151423],{"class":1026},"showWelcome",[1002,151425,1428],{"class":1030},[1002,151427,151428],{"class":1004,"line":2442},[1002,151429,1517],{"class":1030},[925,151431,151432,151433,151435,151436,151438,151439,151442,151443,151446,151447,151450,151451,151454,151455,151457,151458,151461,151462,151465],{},"So, above, there are a few different things going on. Firstly, ",[941,151434,105303],{}," is passed as an argument to the anonymous function. This ensures that the ",[941,151437,15864],{}," is actually jQuery inside of the anonymous function. Next, there’s a private variable, called ",[941,151440,151441],{},"welcomeMessage",", and a function is assigned to ",[941,151444,151445],{},"NS.Views.WelcomeScreen",". Inside this function, ",[941,151448,151449],{},"this.welcome ","is assigned to a jQuery DOM selector. This caches the selector inside the ",[941,151452,151453],{},"welcomeScreen",", so that jQuery doesn’t have to query the DOM for it more than once. DOM queries can be memory intensive, so please ensure that you cache them as much as possible. Next, we wrap the App ",[941,151456,48439],{}," within ",[941,151459,151460],{},"$(function(){});",", which is the same thing as doing ",[941,151463,151464],{},"$(document).ready()",". Finally, we add some code to the app initializer. This keeps your code nice and separated, and will be considerably easy to come back to and modify at a later day. More maintainability!",[953,151467,18943],{"id":18942},[925,151469,151470,151471,151473,151474,151477],{},"One of the disadvantages of JavaScript is that it operates on top of a ",[1107,151472,16475],{}," object, which is  the the ",[941,151475,151476],{},"window ","object of the browsers .",[993,151479,151481],{"className":995,"code":151480,"language":997,"meta":998,"style":998},"function doSomething() {\n alert('I am doing something');\n}\n\nfunction doSomethingMore() {\n alert('I am doing more things');\n}\n\ndoSomething();\ndoSomethingMore();\n",[941,151482,151483,151491,151502,151506,151510,151519,151530,151534,151538,151544],{"__ignoreMap":998},[1002,151484,151485,151487,151489],{"class":1004,"line":1005},[1002,151486,6965],{"class":1015},[1002,151488,16492],{"class":1026},[1002,151490,3025],{"class":1030},[1002,151492,151493,151495,151497,151500],{"class":1004,"line":1012},[1002,151494,93025],{"class":1026},[1002,151496,1031],{"class":1030},[1002,151498,151499],{"class":1034},"'I am doing something'",[1002,151501,1085],{"class":1030},[1002,151503,151504],{"class":1004,"line":1047},[1002,151505,1170],{"class":1030},[1002,151507,151508],{"class":1004,"line":1054},[1002,151509,1051],{"emptyLinePlaceholder":1050},[1002,151511,151512,151514,151517],{"class":1004,"line":1060},[1002,151513,6965],{"class":1015},[1002,151515,151516],{"class":1026}," doSomethingMore",[1002,151518,3025],{"class":1030},[1002,151520,151521,151523,151525,151528],{"class":1004,"line":1272},[1002,151522,93025],{"class":1026},[1002,151524,1031],{"class":1030},[1002,151526,151527],{"class":1034},"'I am doing more things'",[1002,151529,1085],{"class":1030},[1002,151531,151532],{"class":1004,"line":1348},[1002,151533,1170],{"class":1030},[1002,151535,151536],{"class":1004,"line":1354},[1002,151537,1051],{"emptyLinePlaceholder":1050},[1002,151539,151540,151542],{"class":1004,"line":1360},[1002,151541,16525],{"class":1026},[1002,151543,1428],{"class":1030},[1002,151545,151546,151549],{"class":1004,"line":1366},[1002,151547,151548],{"class":1026},"doSomethingMore",[1002,151550,1428],{"class":1030},[925,151552,151553,151554,7669],{},"The functions doSomething and the doSomethingMore functions are immediately available to the global ",[941,151555,16479],{},[925,151557,151558,151559,151562,151563,151565,151566,151568,151569,151571,151572,151574,151575,151579],{},"This means that if anyone comes along and attempts to write a function, which is also called, ",[941,151560,151561],{},"doStuff",", there will be a conflict! All ",[941,151564,22063],{}," tags are basically taking the code within them, and running it against the ",[941,151567,16479],{}," in the order that they are referenced in the HTML. As a result, the second person to implement ",[941,151570,151561],{},"will overwrite the first ",[941,151573,151561],{},". A common technique for eliminating this problem is to take advantage of either self-executing anonymous functions, or ",[933,151576,18943],{"href":151577,"rel":151578},"http:\u002F\u002Faddyosmani.com\u002Fresources\u002Fessentialjsdesignpatterns\u002Fbook\u002F#detailnamespacing",[937],". The object-oriented folks reading this are likely already familiar with the concept of a namespace, but the basic idea is to group functions into different areas for re-usability.",[993,151581,151583],{"className":995,"code":151582,"language":997,"meta":998,"style":998},"var My = My || {}; \u002F\u002F \"If My is not defined, make it equal to an empty object\"\nMy.Utils = My.Utils || {};\nMy.Models = My.Models || {};\nMy.Views = My.Views || {};\n",[941,151584,151585,151604,151618,151632],{"__ignoreMap":998},[1002,151586,151587,151589,151592,151594,151596,151598,151601],{"class":1004,"line":1005},[1002,151588,18311],{"class":1015},[1002,151590,151591],{"class":1030}," My ",[1002,151593,2393],{"class":1015},[1002,151595,151591],{"class":1030},[1002,151597,8392],{"class":1015},[1002,151599,151600],{"class":1030}," {}; ",[1002,151602,151603],{"class":1008},"\u002F\u002F \"If My is not defined, make it equal to an empty object\"\n",[1002,151605,151606,151609,151611,151614,151616],{"class":1004,"line":1012},[1002,151607,151608],{"class":1030},"My.Utils ",[1002,151610,2393],{"class":1015},[1002,151612,151613],{"class":1030}," My.Utils ",[1002,151615,8392],{"class":1015},[1002,151617,7217],{"class":1030},[1002,151619,151620,151623,151625,151628,151630],{"class":1004,"line":1047},[1002,151621,151622],{"class":1030},"My.Models ",[1002,151624,2393],{"class":1015},[1002,151626,151627],{"class":1030}," My.Models ",[1002,151629,8392],{"class":1015},[1002,151631,7217],{"class":1030},[1002,151633,151634,151637,151639,151642,151644],{"class":1004,"line":1054},[1002,151635,151636],{"class":1030},"My.Views ",[1002,151638,2393],{"class":1015},[1002,151640,151641],{"class":1030}," My.Views ",[1002,151643,8392],{"class":1015},[1002,151645,7217],{"class":1030},[925,151647,151648,151649,151652],{},"This will prevent pollution of the global namespace, and will aid in readability for your application. Now, you simply define functions in their respective namespace. A commonly defined namespace is ",[941,151650,151651],{},"app",", which manages the rest of the application.",[953,151654,151656],{"id":151655},"observer-pattern","Observer Pattern",[925,151658,151659,151660,944,151662,151665,151666,151669,151670,948],{},"Another excellent pattern is the Observer Pattern – sometimes referred to as Pubsub.** Pubsub essentially allows us to subscribe to DOM events, such as",[941,151661,11181],{},[941,151663,151664],{},"mouseover",". On one hand, we’re ",[941,151667,151668],{},"listening"," to these events, and, on the other, something is publishing those events – for example, when the browser publishes (or announces) that someone clicked on a particular element. There are many libraries for pubsub, as it’s a short bit of code. Perform a quick Google search, and thousands of choices will make themselves available. One solid choice is AmplifyJS’s ",[933,151671,151674],{"href":151672,"rel":151673},"http:\u002F\u002Famplifyjs.com\u002Fapi\u002Fpubsub\u002F",[937],"implementation",[993,151676,151678],{"className":995,"code":151677,"language":997,"meta":998,"style":998},"\u002F\u002F A data model for retrieving news.\nNS.Models.News = (function () {\n var newsUrl = '\u002Fnews\u002F';\n\n \u002F\u002F Retrieve the news\n var getNews = function () {\n $.ajax({\n url: newsUrl\n type: 'get',\n success: newsRetrieved\n });\n };\n\n var newsRetrieved = function (news) {\n \u002F\u002F Publish the retrieval of the news\n amplify.publish('news-retrieved', news);\n };\n\n return {\n getNews: getNews\n };\n}());\n",[941,151679,151680,151685,151701,151715,151719,151724,151737,151746,151751,151761,151766,151770,151774,151778,151796,151801,151816,151820,151824,151830,151835,151839],{"__ignoreMap":998},[1002,151681,151682],{"class":1004,"line":1005},[1002,151683,151684],{"class":1008},"\u002F\u002F A data model for retrieving news.\n",[1002,151686,151687,151690,151693,151695,151697,151699],{"class":1004,"line":1012},[1002,151688,151689],{"class":1019},"NS",[1002,151691,151692],{"class":1030},".Models.News ",[1002,151694,2393],{"class":1015},[1002,151696,6513],{"class":1030},[1002,151698,6965],{"class":1015},[1002,151700,9772],{"class":1030},[1002,151702,151703,151705,151708,151710,151713],{"class":1004,"line":1047},[1002,151704,51906],{"class":1015},[1002,151706,151707],{"class":1030}," newsUrl ",[1002,151709,2393],{"class":1015},[1002,151711,151712],{"class":1034}," '\u002Fnews\u002F'",[1002,151714,1407],{"class":1030},[1002,151716,151717],{"class":1004,"line":1054},[1002,151718,1051],{"emptyLinePlaceholder":1050},[1002,151720,151721],{"class":1004,"line":1060},[1002,151722,151723],{"class":1008}," \u002F\u002F Retrieve the news\n",[1002,151725,151726,151728,151731,151733,151735],{"class":1004,"line":1272},[1002,151727,51906],{"class":1015},[1002,151729,151730],{"class":1026}," getNews",[1002,151732,1023],{"class":1015},[1002,151734,8457],{"class":1015},[1002,151736,9772],{"class":1030},[1002,151738,151739,151742,151744],{"class":1004,"line":1348},[1002,151740,151741],{"class":1030}," $.",[1002,151743,79258],{"class":1026},[1002,151745,2756],{"class":1030},[1002,151747,151748],{"class":1004,"line":1354},[1002,151749,151750],{"class":1030}," url: newsUrl\n",[1002,151752,151753,151756,151759],{"class":1004,"line":1360},[1002,151754,151755],{"class":1030}," type: ",[1002,151757,151758],{"class":1034},"'get'",[1002,151760,1143],{"class":1030},[1002,151762,151763],{"class":1004,"line":1366},[1002,151764,151765],{"class":1030}," success: newsRetrieved\n",[1002,151767,151768],{"class":1004,"line":1946},[1002,151769,49109],{"class":1030},[1002,151771,151772],{"class":1004,"line":1956},[1002,151773,10900],{"class":1030},[1002,151775,151776],{"class":1004,"line":1961},[1002,151777,1051],{"emptyLinePlaceholder":1050},[1002,151779,151780,151782,151785,151787,151789,151791,151794],{"class":1004,"line":1971},[1002,151781,51906],{"class":1015},[1002,151783,151784],{"class":1026}," newsRetrieved",[1002,151786,1023],{"class":1015},[1002,151788,8457],{"class":1015},[1002,151790,6513],{"class":1030},[1002,151792,151793],{"class":2378},"news",[1002,151795,2382],{"class":1030},[1002,151797,151798],{"class":1004,"line":1980},[1002,151799,151800],{"class":1008}," \u002F\u002F Publish the retrieval of the news\n",[1002,151802,151803,151806,151808,151810,151813],{"class":1004,"line":1985},[1002,151804,151805],{"class":1030}," amplify.",[1002,151807,41943],{"class":1026},[1002,151809,1031],{"class":1030},[1002,151811,151812],{"class":1034},"'news-retrieved'",[1002,151814,151815],{"class":1030},", news);\n",[1002,151817,151818],{"class":1004,"line":1995},[1002,151819,10900],{"class":1030},[1002,151821,151822],{"class":1004,"line":2006},[1002,151823,1051],{"emptyLinePlaceholder":1050},[1002,151825,151826,151828],{"class":1004,"line":2011},[1002,151827,2687],{"class":1015},[1002,151829,1457],{"class":1030},[1002,151831,151832],{"class":1004,"line":2017},[1002,151833,151834],{"class":1030}," getNews: getNews\n",[1002,151836,151837],{"class":1004,"line":2022},[1002,151838,10900],{"class":1030},[1002,151840,151841],{"class":1004,"line":2442},[1002,151842,151843],{"class":1030},"}());\n",[925,151845,151846,151847,151850],{},"This code defines a model to fetch news from some kind of service. Once the news has been retrieved with AJAX, the ",[941,151848,151849],{},"newsRetrieved"," method fires, passing through the retrieved news to Amplify, and is published on the news-retrieved topic.",[993,151852,151854],{"className":995,"code":151853,"language":997,"meta":998,"style":998},"(function () {\n \u002F\u002F Create a news views.\n NS.Views.News = function () {\n this.news = $('#news');\n\n \u002F\u002F Subscribe to the news retrieval event.\n amplify.subscribe('news-retrieved', $.proxy(this.showNews));\n };\n\n \u002F\u002F Show the news when it arrives\n NS.Views.News.prototype.showNews = function (news) {\n var self = this;\n $.each(news, function (article) {\n self.append(article);\n });\n };\n})();\n",[941,151855,151856,151864,151869,151884,151902,151906,151911,151934,151938,151942,151947,151971,151983,152000,152010,152014,152018],{"__ignoreMap":998},[1002,151857,151858,151860,151862],{"class":1004,"line":1005},[1002,151859,1031],{"class":1030},[1002,151861,6965],{"class":1015},[1002,151863,9772],{"class":1030},[1002,151865,151866],{"class":1004,"line":1012},[1002,151867,151868],{"class":1008}," \u002F\u002F Create a news views.\n",[1002,151870,151871,151873,151875,151878,151880,151882],{"class":1004,"line":1047},[1002,151872,151243],{"class":1019},[1002,151874,151246],{"class":1030},[1002,151876,151877],{"class":1026},"News",[1002,151879,1023],{"class":1015},[1002,151881,8457],{"class":1015},[1002,151883,9772],{"class":1030},[1002,151885,151886,151888,151891,151893,151895,151897,151900],{"class":1004,"line":1054},[1002,151887,2387],{"class":1019},[1002,151889,151890],{"class":1030},".news ",[1002,151892,2393],{"class":1015},[1002,151894,110094],{"class":1026},[1002,151896,1031],{"class":1030},[1002,151898,151899],{"class":1034},"'#news'",[1002,151901,1085],{"class":1030},[1002,151903,151904],{"class":1004,"line":1060},[1002,151905,1051],{"emptyLinePlaceholder":1050},[1002,151907,151908],{"class":1004,"line":1272},[1002,151909,151910],{"class":1008}," \u002F\u002F Subscribe to the news retrieval event.\n",[1002,151912,151913,151916,151918,151920,151922,151925,151927,151929,151931],{"class":1004,"line":1348},[1002,151914,151915],{"class":1030}," amplify.",[1002,151917,8514],{"class":1026},[1002,151919,1031],{"class":1030},[1002,151921,151812],{"class":1034},[1002,151923,151924],{"class":1030},", $.",[1002,151926,14227],{"class":1026},[1002,151928,1031],{"class":1030},[1002,151930,3455],{"class":1019},[1002,151932,151933],{"class":1030},".showNews));\n",[1002,151935,151936],{"class":1004,"line":1354},[1002,151937,15113],{"class":1030},[1002,151939,151940],{"class":1004,"line":1360},[1002,151941,1051],{"emptyLinePlaceholder":1050},[1002,151943,151944],{"class":1004,"line":1366},[1002,151945,151946],{"class":1008}," \u002F\u002F Show the news when it arrives\n",[1002,151948,151949,151951,151954,151956,151958,151961,151963,151965,151967,151969],{"class":1004,"line":1946},[1002,151950,151243],{"class":1019},[1002,151952,151953],{"class":1030},".Views.News.",[1002,151955,3894],{"class":1019},[1002,151957,948],{"class":1030},[1002,151959,151960],{"class":1026},"showNews",[1002,151962,1023],{"class":1015},[1002,151964,8457],{"class":1015},[1002,151966,6513],{"class":1030},[1002,151968,151793],{"class":2378},[1002,151970,2382],{"class":1030},[1002,151972,151973,151975,151977,151979,151981],{"class":1004,"line":1956},[1002,151974,51906],{"class":1015},[1002,151976,91958],{"class":1030},[1002,151978,2393],{"class":1015},[1002,151980,2693],{"class":1019},[1002,151982,1407],{"class":1030},[1002,151984,151985,151987,151989,151992,151994,151996,151998],{"class":1004,"line":1961},[1002,151986,79255],{"class":1030},[1002,151988,6633],{"class":1026},[1002,151990,151991],{"class":1030},"(news, ",[1002,151993,6965],{"class":1015},[1002,151995,6513],{"class":1030},[1002,151997,15712],{"class":2378},[1002,151999,2382],{"class":1030},[1002,152001,152002,152005,152007],{"class":1004,"line":1971},[1002,152003,152004],{"class":1030}," self.",[1002,152006,110122],{"class":1026},[1002,152008,152009],{"class":1030},"(article);\n",[1002,152011,152012],{"class":1004,"line":1980},[1002,152013,8353],{"class":1030},[1002,152015,152016],{"class":1004,"line":1985},[1002,152017,15113],{"class":1030},[1002,152019,152020],{"class":1004,"line":1995},[1002,152021,88924],{"class":1030},[925,152023,152024,152025,152027,152028,152030,152031,152033,152034,948],{},"This code above is a view for displaying the retrieved news. In the ",[941,152026,151877],{},"constructor, Amplify subscribes to the news-retrieved topic. When that topic is published, the ",[941,152029,151960],{}," function is fired, accordingly. Then, the news is appended to the DOM.\nAgain, modify the ",[941,152032,48439],{}," function from the app to add the news retrieval… and you’re done! Now, there are separate pieces of the application, each of which is responsible for a single action. This is known as the ",[933,152035,152038],{"href":152036,"rel":152037},"http:\u002F\u002Ffreshbrewedcode.com\u002Fderekgreer\u002F2011\u002F12\u002F08\u002Fsolid-javascript-single-responsibility-principle\u002F",[937],"Single Responsibility Principle",[993,152040,152042],{"className":995,"code":152041,"language":997,"meta":998,"style":998},"var init = function () {\n NS.Utils.log('Application initialized...');\n this.welcome = new NS.Views.WelcomeScreen();\n this.welcome.showWelcome();\n this.news = new NS.Views.News();\n \u002F\u002F Go get the news!\n NS.Models.News.getNews();\n};\n",[941,152043,152044,152056,152070,152088,152098,152116,152121,152133],{"__ignoreMap":998},[1002,152045,152046,152048,152050,152052,152054],{"class":1004,"line":1005},[1002,152047,18311],{"class":1015},[1002,152049,151033],{"class":1026},[1002,152051,1023],{"class":1015},[1002,152053,8457],{"class":1015},[1002,152055,9772],{"class":1030},[1002,152057,152058,152060,152062,152064,152066,152068],{"class":1004,"line":1012},[1002,152059,151243],{"class":1019},[1002,152061,151387],{"class":1030},[1002,152063,2886],{"class":1026},[1002,152065,1031],{"class":1030},[1002,152067,151051],{"class":1034},[1002,152069,1085],{"class":1030},[1002,152071,152072,152074,152076,152078,152080,152082,152084,152086],{"class":1004,"line":1047},[1002,152073,39364],{"class":1019},[1002,152075,151262],{"class":1030},[1002,152077,2393],{"class":1015},[1002,152079,2690],{"class":1015},[1002,152081,151408],{"class":1019},[1002,152083,151246],{"class":1030},[1002,152085,151249],{"class":1026},[1002,152087,1428],{"class":1030},[1002,152089,152090,152092,152094,152096],{"class":1004,"line":1054},[1002,152091,39364],{"class":1019},[1002,152093,151308],{"class":1030},[1002,152095,151423],{"class":1026},[1002,152097,1428],{"class":1030},[1002,152099,152100,152102,152104,152106,152108,152110,152112,152114],{"class":1004,"line":1060},[1002,152101,39364],{"class":1019},[1002,152103,151890],{"class":1030},[1002,152105,2393],{"class":1015},[1002,152107,2690],{"class":1015},[1002,152109,151408],{"class":1019},[1002,152111,151246],{"class":1030},[1002,152113,151877],{"class":1026},[1002,152115,1428],{"class":1030},[1002,152117,152118],{"class":1004,"line":1272},[1002,152119,152120],{"class":1008}," \u002F\u002F Go get the news!\n",[1002,152122,152123,152125,152128,152131],{"class":1004,"line":1348},[1002,152124,151243],{"class":1019},[1002,152126,152127],{"class":1030},".Models.News.",[1002,152129,152130],{"class":1026},"getNews",[1002,152132,1428],{"class":1030},[1002,152134,152135],{"class":1004,"line":1354},[1002,152136,1517],{"class":1030},[953,152138,152140],{"id":152139},"commenting-documentation-and-filesminification","Commenting, Documentation and Files\u002FMinification",[925,152142,152143,152144,152147,152148,152151,152152,152157,152158,152161,152162,152166],{},"One of the keys to maintainable code of any kind – not just JS – is ",[941,152145,152146],{},"documentation and commenting",". Comments can serve to be invaluble for new developers coming into a project – needing to understand what’s occurring in the code. ",[1107,152149,152150],{},"Why did I write that one line again?",". An excellent tool for generating documentation is called, ",[933,152153,152156],{"href":152154,"rel":152155},"http:\u002F\u002Fjashkenas.github.com\u002Fdocco\u002F",[937],"Docco",". \nThis is the same tool that generates the documentation for the ",[933,152159,137766],{"href":137764,"rel":152160},[937]," web site. Basically, it takes your comments, and places them side by side with your code. There are also tools, like ",[933,152163,142688],{"href":152164,"rel":152165},"https:\u002F\u002Fgithub.com\u002Fjsdoc3\u002Fjsdoc",[937],", which generate an API style documentation, describing every class in your code. Another thing, which can prove to be difficult when starting a new project, is trying to determine how to best organize your code. One way is to separate pieces of functionality into separate folders. For example:",[1530,152168,152169,152172,152175,152178,152181],{},[974,152170,152171],{},"\u002Fapp.js",[974,152173,152174],{},"\u002Flibs\u002Fjquery.js",[974,152176,152177],{},"\u002Flibs\u002Fjquery-ui.js",[974,152179,152180],{},"\u002Fusers\u002Fuser.js",[974,152182,152183],{},"\u002Fviews\u002Fhome.js",[925,152185,152186],{},"This structure helps keep pieces of functionallity apart from one another. There are, of course, several ways to organize code, but all that really matters is deciding on a structure… and then rolling with it. Next, you can make use of a build and minification tool. There are lots of choices: These tools will strip out whitespace, remove comments, and combine all specified files into one. This reduces the file sizes and HTTP requests for the application. Even better, this means that you can keep all of your files separated during development, but combined for production.",[953,152188,152190],{"id":152189},"amd-asynchronous-module-definition","AMD (Asynchronous Module Definition)",[925,152192,152193,152194,152196],{},"Asynchronous Module Definition is a different way of writing JavaScript code; it divides all code into separate modules. AMD creates a standard pattern for writing these modules to load in code asynchronously. Using ",[941,152195,22063],{}," tags blocks the page, as it loads until the DOM is ready. Therefore, using something like AMD will allow the DOM to continue loading, while the scripts are also still loading. Essentially, each module is divided into its own file, and then there’s one file that kicks off the process. The most popular implementation of AMD is RequireJS",[925,152198,90996],{},[993,152200,152202],{"className":995,"code":152201,"language":997,"meta":998,"style":998},"require(['libs\u002Fjquery', 'app.js'], function ($, app) {\n $(function () {\n app.init();\n });\n});\n",[941,152203,152204,152231,152241,152250,152254],{"__ignoreMap":998},[1002,152205,152206,152208,152210,152213,152215,152217,152219,152221,152223,152225,152227,152229],{"class":1004,"line":1005},[1002,152207,1294],{"class":1026},[1002,152209,30910],{"class":1030},[1002,152211,152212],{"class":1034},"'libs\u002Fjquery'",[1002,152214,1251],{"class":1030},[1002,152216,33402],{"class":1034},[1002,152218,32267],{"class":1030},[1002,152220,6965],{"class":1015},[1002,152222,6513],{"class":1030},[1002,152224,15864],{"class":2378},[1002,152226,1251],{"class":1030},[1002,152228,151651],{"class":2378},[1002,152230,2382],{"class":1030},[1002,152232,152233,152235,152237,152239],{"class":1004,"line":1012},[1002,152234,88304],{"class":1026},[1002,152236,1031],{"class":1030},[1002,152238,6965],{"class":1015},[1002,152240,9772],{"class":1030},[1002,152242,152243,152246,152248],{"class":1004,"line":1047},[1002,152244,152245],{"class":1030}," app.",[1002,152247,48439],{"class":1026},[1002,152249,1428],{"class":1030},[1002,152251,152252],{"class":1004,"line":1054},[1002,152253,19836],{"class":1030},[1002,152255,152256],{"class":1004,"line":1060},[1002,152257,2804],{"class":1030},[925,152259,47429],{},[993,152261,152263],{"className":995,"code":152262,"language":997,"meta":998,"style":998},"define(['libs\u002Fjquery', 'views\u002Fhome'], function ($, home) {\n home.showWelcome();\n});\n",[941,152264,152265,152293,152302],{"__ignoreMap":998},[1002,152266,152267,152269,152271,152273,152275,152278,152280,152282,152284,152286,152288,152291],{"class":1004,"line":1005},[1002,152268,130347],{"class":1026},[1002,152270,30910],{"class":1030},[1002,152272,152212],{"class":1034},[1002,152274,1251],{"class":1030},[1002,152276,152277],{"class":1034},"'views\u002Fhome'",[1002,152279,32267],{"class":1030},[1002,152281,6965],{"class":1015},[1002,152283,6513],{"class":1030},[1002,152285,15864],{"class":2378},[1002,152287,1251],{"class":1030},[1002,152289,152290],{"class":2378},"home",[1002,152292,2382],{"class":1030},[1002,152294,152295,152298,152300],{"class":1004,"line":1012},[1002,152296,152297],{"class":1030}," home.",[1002,152299,151423],{"class":1026},[1002,152301,1428],{"class":1030},[1002,152303,152304],{"class":1004,"line":1047},[1002,152305,2804],{"class":1030},[925,152307,152308],{},"home.js",[993,152310,152312],{"className":995,"code":152311,"language":997,"meta":998,"style":998},"define(['libs\u002Fjquery'], function ($) {\n var home = function () {\n this.home = $('#home');\n };\n\n home.prototype.showWelcome = function () {\n this.home.html('Welcome!');\n };\n\n return new home();\n});\n",[941,152313,152314,152332,152345,152363,152367,152371,152390,152406,152410,152414,152424],{"__ignoreMap":998},[1002,152315,152316,152318,152320,152322,152324,152326,152328,152330],{"class":1004,"line":1005},[1002,152317,130347],{"class":1026},[1002,152319,30910],{"class":1030},[1002,152321,152212],{"class":1034},[1002,152323,32267],{"class":1030},[1002,152325,6965],{"class":1015},[1002,152327,6513],{"class":1030},[1002,152329,15864],{"class":2378},[1002,152331,2382],{"class":1030},[1002,152333,152334,152336,152339,152341,152343],{"class":1004,"line":1012},[1002,152335,28293],{"class":1015},[1002,152337,152338],{"class":1026}," home",[1002,152340,1023],{"class":1015},[1002,152342,8457],{"class":1015},[1002,152344,9772],{"class":1030},[1002,152346,152347,152349,152352,152354,152356,152358,152361],{"class":1004,"line":1047},[1002,152348,2387],{"class":1019},[1002,152350,152351],{"class":1030},".home ",[1002,152353,2393],{"class":1015},[1002,152355,110094],{"class":1026},[1002,152357,1031],{"class":1030},[1002,152359,152360],{"class":1034},"'#home'",[1002,152362,1085],{"class":1030},[1002,152364,152365],{"class":1004,"line":1054},[1002,152366,15113],{"class":1030},[1002,152368,152369],{"class":1004,"line":1060},[1002,152370,1051],{"emptyLinePlaceholder":1050},[1002,152372,152373,152376,152378,152380,152382,152384,152386,152388],{"class":1004,"line":1272},[1002,152374,152375],{"class":1019}," home",[1002,152377,948],{"class":1030},[1002,152379,3894],{"class":1019},[1002,152381,948],{"class":1030},[1002,152383,151423],{"class":1026},[1002,152385,1023],{"class":1015},[1002,152387,8457],{"class":1015},[1002,152389,9772],{"class":1030},[1002,152391,152392,152394,152397,152399,152401,152404],{"class":1004,"line":1348},[1002,152393,2387],{"class":1019},[1002,152395,152396],{"class":1030},".home.",[1002,152398,383],{"class":1026},[1002,152400,1031],{"class":1030},[1002,152402,152403],{"class":1034},"'Welcome!'",[1002,152405,1085],{"class":1030},[1002,152407,152408],{"class":1004,"line":1354},[1002,152409,15113],{"class":1030},[1002,152411,152412],{"class":1004,"line":1360},[1002,152413,1051],{"emptyLinePlaceholder":1050},[1002,152415,152416,152418,152420,152422],{"class":1004,"line":1366},[1002,152417,15066],{"class":1015},[1002,152419,2690],{"class":1015},[1002,152421,152338],{"class":1026},[1002,152423,1428],{"class":1030},[1002,152425,152426],{"class":1004,"line":1946},[1002,152427,2804],{"class":1030},[925,152429,152430,152431,152433,152434,152436,152437,152439,152440,152442,152443,152445,152446,152448],{},"In the code snippet above, there is a ",[941,152432,90996],{}," file, which is where the process begins. The first argument to the ",[941,152435,1294],{}," function is an array of dependencies.These dependencies are a list of files that are required for ",[941,152438,47429],{},". As they finish loading, whatever the module returns is passed as an argument to the function callback on the right. Then, there is ",[941,152441,47429],{},", which requires jQuery, as well as a view. Next, the view,",[941,152444,152308],{},", only requires jQuery. It has a ",[941,152447,152290],{}," function within it, and returns an instance of itself. In your application, these modules are all stored within separate files, making your application very maintainable.",[953,152450,26561],{"id":26560},[925,152452,152453],{},"Keeping your applications maintainable is extremely important for development. It reduces bugs, and makes the process of fixing ones that you do find easier.",[1579,152455,152456],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":152458},[152459,152460,152461,152462,152463,152464,152465],{"id":150989,"depth":1012,"text":150990},{"id":150996,"depth":1012,"text":150997},{"id":18942,"depth":1012,"text":18943},{"id":151655,"depth":1012,"text":151656},{"id":152139,"depth":1012,"text":152140},{"id":152189,"depth":1012,"text":152190},{"id":26560,"depth":1012,"text":26561},"2014-01-31","\u002Fimages\u002Fblog\u002Ffeatures\u002Fmaintainable-javascript.jpg",{},{"title":553,"description":555},"blog\u002Fmaintainable-javascript",[16,17],"GzOHlREcNvPjVdjpVQsAxcDcy0_2doyMWN76vUtu-hY",{"id":152474,"title":357,"author":920,"body":152475,"date":152625,"description":359,"extension":1591,"image":152626,"meta":152627,"navigation":1050,"path":358,"seo":152628,"stem":152629,"tags":152630,"__hash__":152631},"blog\u002Fblog\u002Fhow-to-add-a-cover-to-an-epub-pdf-or-a-kindle-mobi-book.md",{"type":922,"value":152476,"toc":152623},[152477,152480,152501,152506,152511,152517,152529,152535,152540,152546,152557,152563,152566,152569,152579,152592,152601,152611,152617,152620],[925,152478,152479],{},"Take it easy. Here I will explain how to add a cover to an EPUB, PDF or a Kindle MOBI book with free Calibre.",[1530,152481,152482,152491,152494],{},[974,152483,152484,152485,152490],{},"Download and install ",[933,152486,152489],{"href":152487,"rel":152488},"https:\u002F\u002Fcalibre-ebook.com\u002Fdownload",[937],"Calibre"," on your computer.",[974,152492,152493],{},"Launch Calibre and drag & drop your cover-missing books to it.",[974,152495,152496,152497,152500],{},"Select a book and click ",[941,152498,152499],{},"Edit metadata"," on top menu bar.",[925,152502,152503],{},[963,152504],{"alt":152499,"src":152505},"\u002Fimages\u002Fblog\u002F2014-01-24-how-to-add-a-cover-to-an-epub-pdf-or-a-kindle-mobi-book\u002F01.jpg",[1530,152507,152508],{},[974,152509,152510],{},"Select Download cover on the following window. Calibre will auto search for the EPUB (PDF \u002F MOBI) cover online. You can edit book title, author, etc on this window as well.",[925,152512,152513],{},[963,152514],{"alt":152515,"src":152516},"Download cover","\u002Fimages\u002Fblog\u002F2014-01-24-how-to-add-a-cover-to-an-epub-pdf-or-a-kindle-mobi-book\u002F02.jpg",[1530,152518,152519,152524],{},[974,152520,152521,152522,948],{},"Click to select a cover from the search results and click ",[941,152523,137341],{},[974,152525,152526,152527,948],{},"The cover will get updated at once. Click ",[941,152528,137341],{},[925,152530,152531],{},[963,152532],{"alt":152533,"src":152534},"Click OK","\u002Fimages\u002Fblog\u002F2014-01-24-how-to-add-a-cover-to-an-epub-pdf-or-a-kindle-mobi-book\u002F03.jpg",[1530,152536,152537],{},[974,152538,152539],{},"Go back to the main panel, you will find the cover added to the EPUB book accordingly.",[925,152541,152542],{},[963,152543],{"alt":152544,"src":152545},"Cover added","\u002Fimages\u002Fblog\u002F2014-01-24-how-to-add-a-cover-to-an-epub-pdf-or-a-kindle-mobi-book\u002F04.jpg",[925,152547,152548,152549,152552,152553,152556],{},"If you have got a cover on your computer, you can also select ",[941,152550,152551],{},"Browse"," on ",[941,152554,152555],{},"Edit Metadata"," screen to add cover.",[925,152558,152559],{},[963,152560],{"alt":152561,"src":152562},"Change cover","https:\u002F\u002F2.bp.blogspot.com\u002F-XZPphKjTb80\u002FURCa9E3F15I\u002FAAAAAAAABow\u002Fv4AUbT_1eu8\u002Fs1600\u002Fbrowse.png",[925,152564,152565],{},"The cover will be added as well. Click “OK” to go back to the main screen.",[925,152567,152568],{},"Covers have been added to the EPUB and PDF books.",[925,152570,152571,152572,152575,152576,152578],{},"When finishing adding covers to EPUB \u002F PDF \u002F MOBI books, don’t forget to select the title and convert the book to its original format again. For example, if the original is ",[941,152573,152574],{},"PDF",", convert it to ",[941,152577,152574],{}," again after adding a cover to it.",[925,152580,152581,152582,152585,152586,152588,152589,152591],{},"Set the ",[941,152583,152584],{},"Output format"," as ",[941,152587,152574],{}," (according to the original) and click ",[941,152590,137341],{}," to convert.",[925,152593,136558,152594,152597,152598,152600],{},[941,152595,152596],{},"status"," in the lower right corner turns to ",[941,152599,5867],{},", the conversion is done.",[925,152602,149093,152603,152606,152607,152610],{},[941,152604,152605],{},"Click to open"," to get the converted book (PDF), you will find both the converted PDF and the original one with ",[941,152608,152609],{},"original"," characters added to the file name under the output folder.",[925,152612,152613],{},[963,152614],{"alt":152615,"src":152616},"Output folder","https:\u002F\u002F4.bp.blogspot.com\u002F-r9UvXuxCgpc\u002FURCftZJECYI\u002FAAAAAAAABqg\u002FJiQFwLsQCwo\u002Fs1600\u002Ffinal_output.png",[925,152618,152619],{},"Add the newly created book (PDF) to Calibre and check again (with all originals deleted from Calibre). You will find the cover has been successfully added to the PDF book this time.",[925,152621,152622],{},"Now, we learnt two steps to add a cover to an EPUB\u002FPDF\u002FMOBI eBook by yourself: Edit metadata and convert to its original format. Drop a comment below if you have any problem.",{"title":998,"searchDepth":1012,"depth":1012,"links":152624},[],"2014-01-24","\u002Fimages\u002Fblog\u002Ffeatures\u002Fhow-to-add-a-cover-to-an-epub-pdf-or-a-kindle-mobi-book.jpg",{},{"title":357,"description":359},"blog\u002Fhow-to-add-a-cover-to-an-epub-pdf-or-a-kindle-mobi-book",[361,362],"F0rS0WZO-CyN6URVGriD42-_e8PZnZVdeXnF_x97iIY",{"id":152633,"title":907,"author":920,"body":152634,"date":152882,"description":909,"extension":1591,"image":152883,"meta":152884,"navigation":1050,"path":908,"seo":152885,"stem":152886,"tags":152887,"__hash__":152888},"blog\u002Fblog\u002Fwhat-is-agile-project-management.md",{"type":922,"value":152635,"toc":152864},[152636,152639,152642,152677,152680,152683,152687,152690,152693,152696,152700,152703,152707,152710,152713,152716,152720,152723,152727,152730,152734,152737,152740,152744,152747,152751,152754,152757,152761,152764,152768,152771,152774,152777,152780,152783,152786,152789,152793,152796,152799,152802,152805,152808,152811,152814,152818,152821,152824,152827,152830,152833,152836,152839,152843,152846,152849,152852,152855,152858,152861],[925,152637,152638],{},"But it is a fragile process that requires objectives, the right scope, and management. In this article, I would like to show you the tools and techniques they need to manage the project successfully through the life cycle of a project. Learn how to use agile projects right and then walk through the four main stages in the cycle, to determine the scope of work and design the structure of the form for requirements gathering, and project management without interfering in the process of rapid construction, and adapt to feedback, and finalize the project.",[925,152640,152641],{},"Topics include :",[1530,152643,152644,152647,152650,152653,152656,152659,152662,152665,152668,152671,152674],{},[974,152645,152646],{},"What is agile project management?",[974,152648,152649],{},"Selecting an agile project",[974,152651,152652],{},"Scoping the project",[974,152654,152655],{},"Designing your sprint structure",[974,152657,152658],{},"Collecting requirements",[974,152660,152661],{},"Running stand-up meetings",[974,152663,152664],{},"Managing issues and risks",[974,152666,152667],{},"Tracking lessons learned",[974,152669,152670],{},"Responding to change requests",[974,152672,152673],{},"Closing the project",[974,152675,152676],{},"Spotting signs of trouble",[953,152678,152646],{"id":152679},"what-is-agile-project-management",[925,152681,152682],{},"Agile Project Management is the process by which projects can be managed and implemented in small chunks of work. Agile projects deliver value to the business in frequent small deliveries of product called ### features. In the traditional Waterfall Methodology, the requirements for the project would be documented upfront. Then the design of the whole solution would be completed, followed by the Development, Testing, and finally Implementation of the product. If this whole process takes a year to complete, the business does not see any tangible value until the very end of that project.",[1655,152684,152686],{"id":152685},"sprints","Sprints",[925,152688,152689],{},"With agile projects, items are created via small logical chunks of work called iterations or ### sprints. Agile is an excellent methodology to use when business needs are frequently changing, or when the business wants to reap product benefits earlier. With Agile you can focus on what the business needs now, and if that changes, the new business needs can be accommodated in the next iteration. Agile is frequently used to manage IT projects, but can also be used to manage non-IT projects.",[925,152691,152692],{},"Examples of non-IT projects that are suitable for Agile are facility moves, company reorganizations, or changing business processes within a department. Just about any project can utilize Agile if deliverables can be produced and implemented in a short period, and can be expanded or added to with future capabilities. Just like building blocks coming together, Agile projects build capabilities one block or a few blocks at a time.",[925,152694,152695],{},"Sprints (iterations) are typically 2 to 12 weeks long.",[1655,152697,152699],{"id":152698},"communication-minimal-documentation","Communication, minimal documentation",[925,152701,152702],{},"Face to face communication is emphasized over documentation. We want to produce a product, not product documentation. As the business requirements change, the documents become redundant. Business and technical team members are co-located or use feature-rich virtual tools to simulate being together. In addition to these, a ### sponsor who is 100% committed to the Agile process plays a vital role.",[1655,152704,152706],{"id":152705},"accommodate-requirement-changes","Accommodate requirement changes",[925,152708,152709],{},"And lastly, requirement changes are anticipated and accommodated. There are other items required for agile projects to work that do not differ from traditional projects. These include having a vision for the endgame, following a universally understood project lifestyle, and the requirements must be understood. You should use a shared and managed schedule and you have a dedicated team that is focused on getting the job done.",[925,152711,152712],{},"And lastly, communication with all stakeholders is critical. There are several Agile methodologies and processes in use today. For this article, we will describe and explain an agile methodology that uses the following lifecycle stages. Envision defines the boundaries of the project. You then loop through the Speculate, Explore and Adapt stages. And you perform a Close phase once at the end.",[925,152714,152715],{},"Now that you've heard about the common characteristics and benefits of an agile project, let's go deeper and explore all of these in greater detail.",[953,152717,152719],{"id":152718},"overview-of-the-agile-life-cycle","Overview of the agile life cycle",[925,152721,152722],{},"Agile projects are conducted in five stages, called the Agile Life Cycle. The stages are Envision, Speculate, Explore, Adapt, and Close. Let's take a look at the highlights of each of these stages.",[1655,152724,152726],{"id":152725},"envision-stage","Envision Stage",[925,152728,152729],{},"During the Envision stage, you and your customer will determine what it is you're trying to build. You will also confirm who needs to be on your team and determine the team values and norms you're going to use. You go through the Envision stage of an Agile project once. At the end of the Envision stage, you should have a project document describing your scope and overall objectives and your defined stakeholders for the project. You should also have your team collaboration tools set up and working. And you should have established team norms. Examples of team norms are your working hours and how the team will work together to solve issues. You will then cycle through the next three stages, Speculate, Explore, and Adapt to complete each sprint.",[1655,152731,152733],{"id":152732},"speculate-stage","Speculate Stage",[925,152735,152736],{},"The Speculate stage is a planning exercise. During the Speculate stage, you will develop or revise the feature-based delivery plan, estimates for each feature and risks you need to manage. A feature is a piece of functionality or outcome that is valued by the client. One or more features are completed as part of each sprint.",[925,152738,152739],{},"At the end of the Speculate stage, you should have a set of requirements for the sprint, and a list of features to be developed based on those requirements. You will also create effort estimates for each feature, and your risks will be identified or updated for the features you are working on.",[1655,152741,152743],{"id":152742},"explore-stage","Explore Stage",[925,152745,152746],{},"During the Explore stage, you develop the product. Activities during the Explore stage include your daily stand-up meetings and frequent and brutally honest peer reviews of the features as they are developed. The reviews come from daily, or nearly daily interactions between business and technical personnel, and frequent and focused testing.",[1655,152748,152750],{"id":152749},"adapt-stage","Adapt Stage",[925,152752,152753],{},"Now that the features for the iteration have been developed, it's time to pause and reflect. This is the purpose of the Adapt stage. A great benefit of Agile is you get feedback frequently, it's easy to remember what worked and what did not, fix things quickly and move forward.",[925,152755,152756],{},"Common activities during the Adapt stage include a final review of the features by the customer and a documented meeting of team members to reflect on their performance. From these, lessons are captured and shared, and future sprint plans are reviewed and adjusted. The Adapt stage can happen very quickly, often being completed in just one day. The project will now loop through the Speculate, Explore and Adapt stages until all sprints for the project are completed.",[1655,152758,152760],{"id":152759},"close-stage","Close Stage",[925,152762,152763],{},"Once all the iterations are complete, or features are implemented, the Close stage can occur. During this stage, you ensure all of your deliverables are completed and a final set of lessons learned are captured for the project. Now that you know what is supposed to happen during each Agile stage, during the next set of videos, we will describe how to make it all happen.",[1655,152765,152767],{"id":152766},"the-envision-phase","The Envision phase",[925,152769,152770],{},"The Envision Phase is the first of five phases in the Agile life cycle and provides the foundation for the project. At the end of the Envision Stage, you should have a documented project charter describing your scope, and overall objectives and your defined stakeholders for the project. You should also have your team collaboration tools set up and working, and you should have established team norms. Let's go into the details for each of these items. The project charter should contain the scope of the project. The scope creates the overall boundaries for the project.",[925,152772,152773],{},"Included in the scope should be the product vision, which is a summary statement about the final product. This includes the target customer, key benefits, and purpose of the project, such as cost savings or competitive advantage. Also, the project charter should identify the project sponsor and project manager responsibilities, authorize the project manager to perform their responsibilities, and define the level of authority given to the project manager. Team collaboration tools are essential to ensure project communication is easy and understood by all team members.",[925,152775,152776],{},"These tools can track and report status, facilitate joint feature development, and push information out to team members. The key is having tools that are easy to use. There are many collaboration tools on the market. The size of the project, the number of stakeholders, and the amount of collaboration desired will determine how advanced you need to get with your collaboration tools. My suggestion is to start with a small number of low complexity tools and add other tools if and when they are required. During the Envision phase, all stakeholders will start working together on the overall design in the project.",[925,152778,152779],{},"At this time, it's important to establish the team norms on how the team will work together, including where they will physically work. As Agile projects involve close collaboration, the team must understand how it will operate. That is the critical element of team norms. Example team norms include, actively listen to what others are saying, attack the problem, not the person. Seek to understand first, only focus on this sprint and feature.",[925,152781,152782],{},"If you see a problem say something and make suggestions for resolution. Actively participate in the daily meetings, be engaged, solve conflicts with the other person if possible. If not achievable, both parties must come forward for help from management. Email is a low touch communication vehicle, and should not be used to solve problems. Don't respond to text messages during meetings. Provide your full attention to the matter at hand.",[925,152784,152785],{},"Be respectful of one another. Have the best interest of the project as your priority. Share and respect the roles and responsibilities of each team member. Agile teams are best if they have 15 or fewer people. Larger teams are possible, but I recommend you split them into smaller subteams to stay within the 15 or less guideline. Larger teams introduce risk. As the coordination between larger numbers of people and the features they produce is much more difficult.",[925,152787,152788],{},"Most of the risk with Agile projects comes from having too ambitious a schedule for feature production. Or not having people on the team that can make decisions without waiting for management approval. These situations should be avoided. With a proper project charter documented, collaboration tools ready to use, and the team in place with minimal risk elements, the project is now well-positioned to commence the planning for the first iteration in the first speculate phase.",[953,152790,152792],{"id":152791},"the-speculate-phase","The Speculate phase",[925,152794,152795],{},"The primary purpose of the speculate phase is for the business and technical teams to identify the features for this iteration. If this is not the first iteration, you should also need to review past features that have not been completed. So in the speculate stage, you and the business need to consider new features. Features from the backlog list, the list of features on your to-do list and features not completed from the prior iteration which get added to the backlog list.",[925,152797,152798],{},"Before we move forward, let's review the characteristics of a feature. A feature is similar to a requirement but instead focuses on a specific business need. A feature is a small client-valued function expressed in the form, action, result, that allows the user to satisfy a business objective or need. To show you what I mean, here are some examples of features. Calculate tax for supplies ordered, display the name and address of buyer on the invoice, display the shipping name and address on the invoice.",[925,152800,152801],{},"Enrol the student in a course. And track course completions. The typical and simple agile approach is to write each feature on an index card or a big sticky note. Using a physical card that you can move from one category to another and back again can make organizing and prioritizing very easy. For larger projects, Agile collaboration tools can simulate the index card approach. Once you have a complete set of features, organize them logically into groups.",[925,152803,152804],{},"You can then have the business review and prioritize features with advice from the technical team. During this process business stakeholders typically ask questions about existing features and add some features as well. This conversation about additional features is great and is part of the agile process. As is prioritizing all these good ideas. If yours is like most agile projects, you will have discussions about features that have to be considered in a future project. Because you'll run out of money, time or both.",[925,152806,152807],{},"Once the feature list has been reviewed, prioritized and agreed by the business and the sponsor, you are ready to roll. Remember, you get to review the feature list at the beginning of each iteration, so you're only done for now. Now that the features have been agreed, you'll need to estimate the work effort required to complete each feature. If this is your first iteration, you should do the estimates for all features. Make sure you work with the team members and business subject matter experts to obtain accurate estimates.",[925,152809,152810],{},"Once this is completed, you can now create your Iteration, Milestone and Release Plan. The Iteration, Milestone and Release Plan will list all features to be completed, when they will be completed and when the features will be implemented for the business. Typically, the speculate phase does not take a long time. For example, if your iteration is eight weeks total, you should only be spending approximately five days or so in the speculate phase. For any agile project, however, the first iteration of the speculate phase will take longer.",[925,152812,152813],{},"As you'll need to identify and estimate the features for the whole project. Not just the first iteration. The speculate phase is about careful planning for each iteration and reprioritizing new features along with a backlog. This considered planning helps you keep the next stage, explore, sharp and focused.",[953,152815,152817],{"id":152816},"the-explore-phase","The Explore phase",[925,152819,152820],{},"Here it is, the phrase most people get excited about, we now get to produce the product, fortunately, with Agile it doesn't take very long to go from the Envision and Speculate phases to the Explore phase, this phase is all about collaboration between the business and technical team members. The daily stand-up meetings, although run throughout all agile project stages, play their most substantial role during the Explore phase. Let's examine what typical stand-ups are like.",[925,152822,152823],{},"A meeting should be around 15 minutes long, 30 minutes max. Each team member shares what they achieved yesterday. What they plan to achieve today and they discuss anything they need help with to progress their work. The stand-up meeting is not the place to resolve issues. If issues are identified they should be noted, addressed after the stand-up meeting and reported back to the group the next day. That's it, nothing to document other than items you may want to put into an issues register, for building lessons learned.",[925,152825,152826],{},"So what does the project manager do in these meetings? The project manager fulfils an observer role, allowing the team to take the lead. As project manager, you should watch for issues that are not being resolved, and remove roadblocks for the team. Also, you should ensure risks are decreasing over time and after the standups communicate status to key stakeholders so they are informed of progress. Listen carefully during the standup meetings. Your job during the Explore stage is to protect and enhance the productivity of each team member.",[925,152828,152829],{},"By letting them get on with the job of building and handle the organizational distractions that may slow them down. The stand-up meetings help you understand how to do this by giving you a view of what the team is facing daily. But also gives you the basis to maintain control of the project. Tracking progresses against the planned features for this sprint is your control mechanism. Completed features are noted in the standouts as well as on a feature board in the team room, so the team can see the progress that has been achieved.",[925,152831,152832],{},"If features are behind schedule, find out why? Make adjustments as quickly as possible and take good notes so lessons learned can be applied. Similar to non-agile projects maintaining an issue register is necessary. What is important is that issues are being resolved in a timely fashion. Your issues register will provide the mechanism to determine if open issues are growing in volume. This could be an indication that something is wrong and changes should be considered. It is easy for teams to get so caught up in building the product that time gets away from everyone.",[925,152834,152835],{},"Timekeeping and sprint schedule tracking is essential. End each Explore phase when the plan features for the sprint have been completed or when the time allocated for this Explore phase has been consumed. You must end the phase under one of these two conditions. If you plan to be in the Explore phase for seven weeks, and the plan features are not complete, stop the phase according to your schedule and proceed to the Adapt phase. At that time, capture and apply lessons learned.",[925,152837,152838],{},"Ensure all team members understand the lessons learned, changes, and set or adjust expectations with your stakeholders. That is the purpose of the Adapt phase which follows Explore.",[953,152840,152842],{"id":152841},"the-adapt-and-close-phases","The Adapt and Close phases",[925,152844,152845],{},"The adapt phase occurs at the end of each sprint immediately following the explore phase. In each adapt phase you will review with the team what has been delivered compared to what was planned for the sprint, discuss what is and is not working and agree to any changes that will be applied. It's also wise to review the prior adapt phase lessons learned to see if trends are occurring. The adapt phase is also the time to review the product with the customer and confirm if features are working as expected. Determine if anything has changed in the business that reduces or changes the effectiveness of the features.",[925,152847,152848],{},"You'll also want to take the time to verify that features are producing the intended business benefits. You must facilitate a lessons learned discussion in each adept phase for feedback to be openly shared, all input is valuable and should be considered. You can then brainstorm ideas to resolve issues or eliminate potential roadblocks to your teams' success. You will find several typical adjustments result from these adapt phase feedback sessions, these adjustments include, adding or removing features, adjusting the estimates for features or reprioritizing the features on the backlog list, modifying the daily stand up meetings agenda to maximize effectiveness.",[925,152850,152851],{},"Changing team members based on project need, availability, and teaming effectiveness, updating the risk register, modifying and removing processes that are not effective, and lastly, adding processes, but only if they're essential to progress the project. It's important to let all stakeholders know about the changes that will be applied to future sprints, along with why those changes are being made. If the team has been working especially hard, this is the perfect opportunity to celebrate the successes of the prior sprints, and acknowledge specific achievements.",[925,152853,152854],{},"Some team members may need a mental break before they start the next sprint. As project manager, you'll need to ensure the team is ready for the next sprint and the morale is positive and ready to go. For longer projects, I suggest occasionally giving team members a holiday from a whole sprint to allow them to complete other work activities or take vacation. This allows them to return to the project rejuvenated. Assuming this is not the end of the project, when you complete the adapt phase you'll proceed to the speculate phase for the next sprint.",[925,152856,152857],{},"Remember if the original agreed cost or schedule have been consumed it'snow time to end the project and proceed to the close phase. If this happens to be your last sprint the project is now ready to be closed. The Close Phase now begins. The administrative activities in the Close Phase include ensuring vendors have been invoiced and payments received. Reconciling any project financials, working with managers and team members to redeploy people to other projects or work activities.",[925,152859,152860],{},"Communicating the overall project results to the project team and other key stakeholders. Now's the time to toot your horn. Next, ensure business benefits continue to be monitored and achieved. It is important to transition this monitoring to the customer. And last. If Agile project management is new to your company, provide a special recap on why the Agile process worked and what lessons you learnt. You should resist the temptation to skip or shorten the close phase activities. Project closure is important to ensure the project is not lingering unnecessarily.",[925,152862,152863],{},"That also gives everyone the chance to appreciate the significance of what has been achieved.",{"title":998,"searchDepth":1012,"depth":1012,"links":152865},[152866,152871,152879,152880,152881],{"id":152679,"depth":1012,"text":152646,"children":152867},[152868,152869,152870],{"id":152685,"depth":1047,"text":152686},{"id":152698,"depth":1047,"text":152699},{"id":152705,"depth":1047,"text":152706},{"id":152718,"depth":1012,"text":152719,"children":152872},[152873,152874,152875,152876,152877,152878],{"id":152725,"depth":1047,"text":152726},{"id":152732,"depth":1047,"text":152733},{"id":152742,"depth":1047,"text":152743},{"id":152749,"depth":1047,"text":152750},{"id":152759,"depth":1047,"text":152760},{"id":152766,"depth":1047,"text":152767},{"id":152791,"depth":1012,"text":152792},{"id":152816,"depth":1012,"text":152817},{"id":152841,"depth":1012,"text":152842},"2013-12-21","\u002Fimages\u002Fblog\u002Ffeatures\u002Fwhat-is-agile-project-management.jpg",{},{"title":907,"description":909},"blog\u002Fwhat-is-agile-project-management",[16,911],"gxgPvtiGOCiGDPk3GCW6QF3NH_ZSjqzWJJecf1VwnUg",{"id":152890,"title":740,"author":920,"body":152891,"date":154097,"description":742,"extension":1591,"image":154098,"meta":154099,"navigation":1050,"path":741,"seo":154100,"stem":154101,"tags":154102,"__hash__":154103},"blog\u002Fblog\u002Frun-commands-for-windows-7.md",{"type":922,"value":152892,"toc":154094},[152893,152896,152902,152905,152909,154069,154074,154079,154084,154089],[925,152894,152895],{},"Knowing the run command for a particular program in Windows 7 can be helpful if Windows isn't working properly but you do have access to a command line interface or if you'd just like to access a particular program more quickly.",[925,152897,152898,152899,152901],{},"Many Windows 7 run command lists online incorrectly include Command Prompt commands or Control Panel ",[1107,152900,107567],{}," as run commands.",[925,152903,152904],{},"Here is the list of run commands for Windows 7.",[953,152906,152908],{"id":152907},"list-of-run-commands-in-windows-7","List of Run Commands in Windows 7",[39742,152910,69649,152911],{},[39759,152912,121261,152913,121261,152926,121261,152934,121261,152942,121261,152950,121261,152958,121261,152966,121261,152974,121261,152982,121261,152989,121261,152997,121261,153005,121261,153013,121261,153021,121261,153029,121261,153037,121261,153045,121261,153052,121261,153060,121261,153067,121261,153075,121261,153082,121261,153090,121261,153098,121261,153106,121261,153114,121261,153122,121261,153130,121261,153137,121261,153145,121261,153153,121261,153160,121261,153168,121261,153176,121261,153184,121261,153192,121261,153200,121261,153208,121261,153216,121261,153224,121261,153231,121261,153239,121261,153247,121261,153255,121261,153263,121261,153270,121261,153278,121261,153286,121261,153294,121261,153302,121261,153309,121261,153317,121261,153325,121261,153333,121261,153341,121261,153349,121261,153356,121261,153364,121261,153372,121261,153380,121261,153387,121261,153394,121261,153402,121261,153410,121261,153417,121261,153425,121261,153433,121261,153440,121261,153448,121261,153456,121261,153464,121261,153472,121261,153480,121261,153488,121261,153496,121261,153504,121261,153512,121261,153519,121261,153527,121261,153535,121261,153543,121261,153551,121261,153558,121261,153566,121261,153574,121261,153581,121261,153589,121261,153594,121261,153602,121261,153610,121261,153618,121261,153623,121261,153631,121261,153639,121261,153647,121261,153655,121261,153662,121261,153670,121261,153678,121261,153686,121261,153694,121261,153702,121261,153709,121261,153717,121261,153725,121261,153733,121261,153741,121261,153749,121261,153757,121261,153765,121261,153773,121261,153781,121261,153789,121261,153797,121261,153805,121261,153813,121261,153821,121261,153829,121261,153836,121261,153843,121261,153851,121261,153859,121261,153867,121261,153875,121261,153883,121261,153891,121261,153899,121261,153907,121261,153915,121261,153923,121261,153931,121261,153939,121261,153947,121261,153955,121261,153960,121261,153968,121261,153976,121261,153983,121261,153991,121261,153999,121261,154007,121261,154014,121261,154022,121261,154030,121261,154038,121261,154046,121261,154054,121261,154061,69649],{},[39748,152914,152915,152916,152915,152921,121261],{},"\n ",[39764,152917,152918],{},[31621,152919,152920],{},"Program Name",[39764,152922,152923],{},[31621,152924,152925],{},"Run Command",[39748,152927,152915,152928,152915,152931,121261],{},[39764,152929,152930],{},"About Windows",[39764,152932,152933],{},"winver",[39748,152935,152915,152936,152915,152939,121261],{},[39764,152937,152938],{},"Add a Device",[39764,152940,152941],{},"devicepairingwizard",[39748,152943,152915,152944,152915,152947,121261],{},[39764,152945,152946],{},"Add Hardware Wizard",[39764,152948,152949],{},"hdwwiz",[39748,152951,152915,152952,152915,152955,121261],{},[39764,152953,152954],{},"Advanced User Accounts",[39764,152956,152957],{},"netplwiz",[39748,152959,152915,152960,152915,152963,121261],{},[39764,152961,152962],{},"Authorization Manager",[39764,152964,152965],{},"azman",[39748,152967,152915,152968,152915,152971,121261],{},[39764,152969,152970],{},"Backup and Restore",[39764,152972,152973],{},"sdclt",[39748,152975,152915,152976,152915,152979,121261],{},[39764,152977,152978],{},"Bluetooth File Transfer",[39764,152980,152981],{},"fsquirt",[39748,152983,152915,152984,152915,152987,121261],{},[39764,152985,152986],{},"Calculator",[39764,152988,98245],{},[39748,152990,152915,152991,152915,152994,121261],{},[39764,152992,152993],{},"Certificates",[39764,152995,152996],{},"certmgr",[39748,152998,152915,152999,152915,153002,121261],{},[39764,153000,153001],{},"Change Computer Performance Settings",[39764,153003,153004],{},"systempropertiesperformance",[39748,153006,152915,153007,152915,153010,121261],{},[39764,153008,153009],{},"Change Data Execution Prevention Settings",[39764,153011,153012],{},"systempropertiesdataexecutionprevention",[39748,153014,152915,153015,152915,153018,121261],{},[39764,153016,153017],{},"Change Printer Settings",[39764,153019,153020],{},"printui",[39748,153022,152915,153023,152915,153026,121261],{},[39764,153024,153025],{},"Character Map",[39764,153027,153028],{},"charmap",[39748,153030,152915,153031,152915,153034,121261],{},[39764,153032,153033],{},"ClearType Tuner",[39764,153035,153036],{},"cttune",[39748,153038,152915,153039,152915,153042,121261],{},[39764,153040,153041],{},"Color Management",[39764,153043,153044],{},"colorcpl",[39748,153046,152915,153047,152915,153050,121261],{},[39764,153048,153049],{},"Command Prompt",[39764,153051,146419],{},[39748,153053,152915,153054,152915,153057,121261],{},[39764,153055,153056],{},"Component Services",[39764,153058,153059],{},"comexp",[39748,153061,152915,153062,152915,153064,121261],{},[39764,153063,153056],{},[39764,153065,153066],{},"dcomcnfg",[39748,153068,152915,153069,152915,153072,121261],{},[39764,153070,153071],{},"Computer Management",[39764,153073,153074],{},"compmgmt",[39748,153076,152915,153077,152915,153079,121261],{},[39764,153078,153071],{},[39764,153080,153081],{},"compmgmtlauncher",[39748,153083,152915,153084,152915,153087,121261],{},[39764,153085,153086],{},"Connect to a Network Projector",[39764,153088,153089],{},"netproj",[39748,153091,152915,153092,152915,153095,121261],{},[39764,153093,153094],{},"Connect to a Projector",[39764,153096,153097],{},"displayswitch",[39748,153099,152915,153100,152915,153103,121261],{},[39764,153101,153102],{},"Control Panel",[39764,153104,153105],{},"control",[39748,153107,152915,153108,152915,153111,121261],{},[39764,153109,153110],{},"Create A Shared Folder Wizard",[39764,153112,153113],{},"shrpubw",[39748,153115,152915,153116,152915,153119,121261],{},[39764,153117,153118],{},"Create a System Repair Disc",[39764,153120,153121],{},"recdisc",[39748,153123,152915,153124,152915,153127,121261],{},[39764,153125,153126],{},"Credential Backup and Restore Wizard",[39764,153128,153129],{},"credwiz",[39748,153131,152915,153132,152915,153135,121261],{},[39764,153133,153134],{},"Data Execution Prevention",[39764,153136,153012],{},[39748,153138,152915,153139,152915,153142,121261],{},[39764,153140,153141],{},"Default Location",[39764,153143,153144],{},"locationnotifications",[39748,153146,152915,153147,152915,153150,121261],{},[39764,153148,153149],{},"Device Manager",[39764,153151,153152],{},"devmgmt",[39748,153154,152915,153155,152915,153158,121261],{},[39764,153156,153157],{},"Device Pairing Wizard",[39764,153159,152941],{},[39748,153161,152915,153162,152915,153165,121261],{},[39764,153163,153164],{},"Diagnostics Troubleshooting Wizard",[39764,153166,153167],{},"msdt",[39748,153169,152915,153170,152915,153173,121261],{},[39764,153171,153172],{},"Digitizer Calibration Tool",[39764,153174,153175],{},"tabcal",[39748,153177,152915,153178,152915,153181,121261],{},[39764,153179,153180],{},"DirectX Diagnostic Tool",[39764,153182,153183],{},"dxdiag",[39748,153185,152915,153186,152915,153189,121261],{},[39764,153187,153188],{},"Disk Cleanup",[39764,153190,153191],{},"cleanmgr",[39748,153193,152915,153194,152915,153197,121261],{},[39764,153195,153196],{},"Disk Defragmenter",[39764,153198,153199],{},"dfrgui",[39748,153201,152915,153202,152915,153205,121261],{},[39764,153203,153204],{},"Disk Management",[39764,153206,153207],{},"diskmgmt",[39748,153209,152915,153210,152915,153213,121261],{},[39764,153211,153212],{},"Display",[39764,153214,153215],{},"dpiscaling",[39748,153217,152915,153218,152915,153221,121261],{},[39764,153219,153220],{},"Display Color Calibration",[39764,153222,153223],{},"dccw",[39748,153225,152915,153226,152915,153229,121261],{},[39764,153227,153228],{},"Display Switch",[39764,153230,153097],{},[39748,153232,152915,153233,152915,153236,121261],{},[39764,153234,153235],{},"DPAPI Key Migration Wizard",[39764,153237,153238],{},"dpapimig",[39748,153240,152915,153241,152915,153244,121261],{},[39764,153242,153243],{},"Driver Verifier Manager",[39764,153245,153246],{},"verifier",[39748,153248,152915,153249,152915,153252,121261],{},[39764,153250,153251],{},"Ease of Access Center",[39764,153253,153254],{},"utilman",[39748,153256,152915,153257,152915,153260,121261],{},[39764,153258,153259],{},"EFS REKEY Wizard",[39764,153261,153262],{},"rekeywiz",[39748,153264,152915,153265,152915,153268,121261],{},[39764,153266,153267],{},"Encrypting File System Wizard",[39764,153269,153262],{},[39748,153271,152915,153272,152915,153275,121261],{},[39764,153273,153274],{},"Event Viewer",[39764,153276,153277],{},"eventvwr",[39748,153279,152915,153280,152915,153283,121261],{},[39764,153281,153282],{},"Fax Cover Page Editor",[39764,153284,153285],{},"fxscover",[39748,153287,152915,153288,152915,153291,121261],{},[39764,153289,153290],{},"File Signature Verification",[39764,153292,153293],{},"sigverif",[39748,153295,152915,153296,152915,153299,121261],{},[39764,153297,153298],{},"Font Viewer",[39764,153300,153301],{},"fontview3",[39748,153303,152915,153304,152915,153306,121261],{},[39764,153305,1714],{},[39764,153307,153308],{},"gettingstarted",[39748,153310,152915,153311,152915,153314,121261],{},[39764,153312,153313],{},"IExpress Wizard",[39764,153315,153316],{},"iexpress",[39748,153318,152915,153319,152915,153322,121261],{},[39764,153320,153321],{},"Import to Windows Contacts",[39764,153323,153324],{},"wabmig1",[39748,153326,152915,153327,152915,153330,121261],{},[39764,153328,153329],{},"Install or Uninstall Display Languages",[39764,153331,153332],{},"lusrmgr",[39748,153334,152915,153335,152915,153338,121261],{},[39764,153336,153337],{},"Internet Explorer",[39764,153339,153340],{},"iexplore1",[39748,153342,152915,153343,152915,153346,121261],{},[39764,153344,153345],{},"iSCSI Initiator Configuration Tool",[39764,153347,153348],{},"iscsicpl",[39748,153350,152915,153351,152915,153354,121261],{},[39764,153352,153353],{},"iSCSI Initiator Properties",[39764,153355,153348],{},[39748,153357,152915,153358,152915,153361,121261],{},[39764,153359,153360],{},"Language Pack Installer",[39764,153362,153363],{},"lpksetup",[39748,153365,152915,153366,152915,153369,121261],{},[39764,153367,153368],{},"Local Group Policy Editor",[39764,153370,153371],{},"gpedit",[39748,153373,152915,153374,152915,153377,121261],{},[39764,153375,153376],{},"Local Security Policy",[39764,153378,153379],{},"secpol",[39748,153381,152915,153382,152915,153385,121261],{},[39764,153383,153384],{},"Local Users and Groups",[39764,153386,153332],{},[39748,153388,152915,153389,152915,153392,121261],{},[39764,153390,153391],{},"Location Activity",[39764,153393,153144],{},[39748,153395,152915,153396,152915,153399,121261],{},[39764,153397,153398],{},"Magnifier",[39764,153400,153401],{},"magnify",[39748,153403,152915,153404,152915,153407,121261],{},[39764,153405,153406],{},"Malicious Software Removal Tool",[39764,153408,153409],{},"mrt",[39748,153411,152915,153412,152915,153415,121261],{},[39764,153413,153414],{},"Manage Your File Encryption Certificates",[39764,153416,153262],{},[39748,153418,152915,153419,152915,153422,121261],{},[39764,153420,153421],{},"Math Input Panel",[39764,153423,153424],{},"mip1",[39748,153426,152915,153427,152915,153430,121261],{},[39764,153428,153429],{},"Microsoft Management Console",[39764,153431,153432],{},"mmc",[39748,153434,152915,153435,152915,153438,121261],{},[39764,153436,153437],{},"Microsoft Support Diagnostic Tool",[39764,153439,153167],{},[39748,153441,152915,153442,152915,153445,121261],{},[39764,153443,153444],{},"NAP Client Configuration",[39764,153446,153447],{},"napclcfg",[39748,153449,152915,153450,152915,153453,121261],{},[39764,153451,153452],{},"Narrator",[39764,153454,153455],{},"narrator",[39748,153457,152915,153458,152915,153461,121261],{},[39764,153459,153460],{},"New Scan Wizard",[39764,153462,153463],{},"wiaacmgr",[39748,153465,152915,153466,152915,153469,121261],{},[39764,153467,153468],{},"Notepad",[39764,153470,153471],{},"notepad",[39748,153473,152915,153474,152915,153477,121261],{},[39764,153475,153476],{},"ODBC Data Source Administrator",[39764,153478,153479],{},"odbcad32",[39748,153481,152915,153482,152915,153485,121261],{},[39764,153483,153484],{},"ODBC Driver Configuration",[39764,153486,153487],{},"odbcconf",[39748,153489,152915,153490,152915,153493,121261],{},[39764,153491,153492],{},"On-Screen Keyboard",[39764,153494,153495],{},"osk",[39748,153497,152915,153498,152915,153501,121261],{},[39764,153499,153500],{},"Paint",[39764,153502,153503],{},"mspaint",[39748,153505,152915,153506,152915,153509,121261],{},[39764,153507,153508],{},"Performance Monitor",[39764,153510,153511],{},"perfmon",[39748,153513,152915,153514,152915,153517,121261],{},[39764,153515,153516],{},"Performance Options",[39764,153518,153004],{},[39748,153520,152915,153521,152915,153524,121261],{},[39764,153522,153523],{},"Phone Dialer",[39764,153525,153526],{},"dialer",[39748,153528,152915,153529,152915,153532,121261],{},[39764,153530,153531],{},"Presentation Settings",[39764,153533,153534],{},"presentationsettings",[39748,153536,152915,153537,152915,153540,121261],{},[39764,153538,153539],{},"Print Management",[39764,153541,153542],{},"printmanagement",[39748,153544,152915,153545,152915,153548,121261],{},[39764,153546,153547],{},"Printer Migration",[39764,153549,153550],{},"printbrmui",[39748,153552,152915,153553,152915,153556,121261],{},[39764,153554,153555],{},"Printer User Interface",[39764,153557,153020],{},[39748,153559,152915,153560,152915,153563,121261],{},[39764,153561,153562],{},"Private Character Editor",[39764,153564,153565],{},"eudcedit",[39748,153567,152915,153568,152915,153571,121261],{},[39764,153569,153570],{},"Problem Steps Recorder",[39764,153572,153573],{},"psr",[39748,153575,152915,153576,152915,153579,121261],{},[39764,153577,153578],{},"Protected Content Migration",[39764,153580,153238],{},[39748,153582,152915,153583,152915,153586,121261],{},[39764,153584,153585],{},"Registry Editor",[39764,153587,153588],{},"regedit",[39748,153590,152915,153591,121261],{},[39764,153592,153593],{},"regedt324",[39748,153595,152915,153596,152915,153599,121261],{},[39764,153597,153598],{},"Remote Access Phonebook",[39764,153600,153601],{},"rasphone",[39748,153603,152915,153604,152915,153607,121261],{},[39764,153605,153606],{},"Remote Desktop Connection",[39764,153608,153609],{},"mstsc",[39748,153611,152915,153612,152915,153615,121261],{},[39764,153613,153614],{},"Resource Monitor",[39764,153616,153617],{},"resmon",[39748,153619,152915,153620,121261],{},[39764,153621,153622],{},"perfmon \u002Fres",[39748,153624,152915,153625,152915,153628,121261],{},[39764,153626,153627],{},"Resultant Set of Policy",[39764,153629,153630],{},"rsop",[39748,153632,152915,153633,152915,153636,121261],{},[39764,153634,153635],{},"Securing the Windows Account Database",[39764,153637,153638],{},"syskey",[39748,153640,152915,153641,152915,153644,121261],{},[39764,153642,153643],{},"Services",[39764,153645,153646],{},"services",[39748,153648,152915,153649,152915,153652,121261],{},[39764,153650,153651],{},"Set Program Access and Computer Defaults",[39764,153653,153654],{},"computerdefaults",[39748,153656,152915,153657,152915,153660,121261],{},[39764,153658,153659],{},"Share Creation Wizard",[39764,153661,153113],{},[39748,153663,152915,153664,152915,153667,121261],{},[39764,153665,153666],{},"Shared Folders",[39764,153668,153669],{},"fsmgmt",[39748,153671,152915,153672,152915,153675,121261],{},[39764,153673,153674],{},"Snipping Tool",[39764,153676,153677],{},"snippingtool",[39748,153679,152915,153680,152915,153683,121261],{},[39764,153681,153682],{},"Sound Recorder",[39764,153684,153685],{},"soundrecorder",[39748,153687,152915,153688,152915,153691,121261],{},[39764,153689,153690],{},"SQL Server Client Network Utility",[39764,153692,153693],{},"cliconfg",[39748,153695,152915,153696,152915,153699,121261],{},[39764,153697,153698],{},"Sticky Notes",[39764,153700,153701],{},"stikynot",[39748,153703,152915,153704,152915,153707,121261],{},[39764,153705,153706],{},"Stored User Names and Passwords",[39764,153708,153129],{},[39748,153710,152915,153711,152915,153714,121261],{},[39764,153712,153713],{},"Sync Center",[39764,153715,153716],{},"mobsync",[39748,153718,152915,153719,152915,153722,121261],{},[39764,153720,153721],{},"System Configuration",[39764,153723,153724],{},"msconfig",[39748,153726,152915,153727,152915,153730,121261],{},[39764,153728,153729],{},"System Configuration Editor",[39764,153731,153732],{},"sysedit5",[39748,153734,152915,153735,152915,153738,121261],{},[39764,153736,153737],{},"System Information",[39764,153739,153740],{},"msinfo32",[39748,153742,152915,153743,152915,153746,121261],{},[39764,153744,153745],{},"System Properties (Advanced Tab)",[39764,153747,153748],{},"systempropertiesadvanced",[39748,153750,152915,153751,152915,153754,121261],{},[39764,153752,153753],{},"System Properties (Computer Name Tab)",[39764,153755,153756],{},"systempropertiescomputername",[39748,153758,152915,153759,152915,153762,121261],{},[39764,153760,153761],{},"System Properties (Hardware Tab)",[39764,153763,153764],{},"systempropertieshardware",[39748,153766,152915,153767,152915,153770,121261],{},[39764,153768,153769],{},"System Properties (Remote Tab)",[39764,153771,153772],{},"systempropertiesremote",[39748,153774,152915,153775,152915,153778,121261],{},[39764,153776,153777],{},"System Properties (System Protection Tab)",[39764,153779,153780],{},"systempropertiesprotection",[39748,153782,152915,153783,152915,153786,121261],{},[39764,153784,153785],{},"System Restore",[39764,153787,153788],{},"rstrui",[39748,153790,152915,153791,152915,153794,121261],{},[39764,153792,153793],{},"Tablet PC Input Panel",[39764,153795,153796],{},"tabtip1",[39748,153798,152915,153799,152915,153802,121261],{},[39764,153800,153801],{},"Task Manager",[39764,153803,153804],{},"taskmgr",[39748,153806,152915,153807,152915,153810,121261],{},[39764,153808,153809],{},"Task Scheduler",[39764,153811,153812],{},"taskschd",[39748,153814,152915,153815,152915,153818,121261],{},[39764,153816,153817],{},"Trusted Platform Module (TPM) Management",[39764,153819,153820],{},"tpm",[39748,153822,152915,153823,152915,153826,121261],{},[39764,153824,153825],{},"User Account Control Settings",[39764,153827,153828],{},"useraccountcontrolsettings",[39748,153830,152915,153831,152915,153834,121261],{},[39764,153832,153833],{},"Utility Manager",[39764,153835,153254],{},[39748,153837,152915,153838,152915,153841,121261],{},[39764,153839,153840],{},"Version Reporter Applet",[39764,153842,152933],{},[39748,153844,152915,153845,152915,153848,121261],{},[39764,153846,153847],{},"Volume Mixer",[39764,153849,153850],{},"sndvol",[39748,153852,152915,153853,152915,153856,121261],{},[39764,153854,153855],{},"Windows Activation Client",[39764,153857,153858],{},"slui",[39748,153860,152915,153861,152915,153864,121261],{},[39764,153862,153863],{},"Windows Anytime Upgrade Results",[39764,153865,153866],{},"windowsanytimeupgraderesults",[39748,153868,152915,153869,152915,153872,121261],{},[39764,153870,153871],{},"Windows Contacts",[39764,153873,153874],{},"wab1",[39748,153876,152915,153877,152915,153880,121261],{},[39764,153878,153879],{},"Windows Disc Image Burning Tool",[39764,153881,153882],{},"isoburn",[39748,153884,152915,153885,152915,153888,121261],{},[39764,153886,153887],{},"Windows DVD Maker",[39764,153889,153890],{},"dvdmaker1",[39748,153892,152915,153893,152915,153896,121261],{},[39764,153894,153895],{},"Windows Easy Transfer",[39764,153897,153898],{},"migwiz1",[39748,153900,152915,153901,152915,153904,121261],{},[39764,153902,153903],{},"Windows Explorer",[39764,153905,153906],{},"explorer",[39748,153908,152915,153909,152915,153912,121261],{},[39764,153910,153911],{},"Windows Fax and Scan",[39764,153913,153914],{},"wfs",[39748,153916,152915,153917,152915,153920,121261],{},[39764,153918,153919],{},"Windows Features",[39764,153921,153922],{},"optionalfeatures",[39748,153924,152915,153925,152915,153928,121261],{},[39764,153926,153927],{},"Windows Firewall with Advanced Security",[39764,153929,153930],{},"wf",[39748,153932,152915,153933,152915,153936,121261],{},[39764,153934,153935],{},"Windows Help and Support",[39764,153937,153938],{},"winhlp32",[39748,153940,152915,153941,152915,153944,121261],{},[39764,153942,153943],{},"Windows Journal",[39764,153945,153946],{},"journal1",[39748,153948,152915,153949,152915,153952,121261],{},[39764,153950,153951],{},"Windows Media Player",[39764,153953,153954],{},"dvdplay2",[39748,153956,152915,153957,121261],{},[39764,153958,153959],{},"wmplayer1",[39748,153961,152915,153962,152915,153965,121261],{},[39764,153963,153964],{},"Windows Memory Diagnostic Scheduler",[39764,153966,153967],{},"mdsched",[39748,153969,152915,153970,152915,153973,121261],{},[39764,153971,153972],{},"Windows Mobility Center",[39764,153974,153975],{},"mblctr",[39748,153977,152915,153978,152915,153981,121261],{},[39764,153979,153980],{},"Windows Picture Acquisition Wizard",[39764,153982,153463],{},[39748,153984,152915,153985,152915,153988,121261],{},[39764,153986,153987],{},"Windows PowerShell",[39764,153989,153990],{},"powershell1",[39748,153992,152915,153993,152915,153996,121261],{},[39764,153994,153995],{},"Windows PowerShell ISE",[39764,153997,153998],{},"powershell_ise1",[39748,154000,152915,154001,152915,154004,121261],{},[39764,154002,154003],{},"Windows Remote Assistance",[39764,154005,154006],{},"msra",[39748,154008,152915,154009,152915,154012,121261],{},[39764,154010,154011],{},"Windows Repair Disc",[39764,154013,153121],{},[39748,154015,152915,154016,152915,154019,121261],{},[39764,154017,154018],{},"Windows Script Host",[39764,154020,154021],{},"wscript",[39748,154023,152915,154024,152915,154027,121261],{},[39764,154025,154026],{},"Windows Update",[39764,154028,154029],{},"wuapp",[39748,154031,152915,154032,152915,154035,121261],{},[39764,154033,154034],{},"Windows Update Standalone Installer",[39764,154036,154037],{},"wusa",[39748,154039,152915,154040,152915,154043,121261],{},[39764,154041,154042],{},"WMI Management",[39764,154044,154045],{},"wmimgmt",[39748,154047,152915,154048,152915,154051,121261],{},[39764,154049,154050],{},"WMI Tester",[39764,154052,154053],{},"wbemtest",[39748,154055,152915,154056,152915,154059,121261],{},[39764,154057,154058],{},"WordPad",[39764,154060,91009],{},[39748,154062,152915,154063,152915,154066,121261],{},[39764,154064,154065],{},"XPS Viewer",[39764,154067,154068],{},"xpsrchvw",[925,154070,154071,154073],{},[1002,154072,6211],{}," This run command can not be executed from the Command Prompt because the file is not in the default Windows path. However, it can be run from the Windows Search box or the Run box.",[925,154075,154076,154078],{},[1002,154077,5681],{}," The dvdplay run command opens Windows Media Player and automatically starts to play the DVD movie in the primary DVD drive.",[925,154080,154081,154083],{},[1002,154082,2796],{}," You must follow the fontview run command with the name of the font that you wish to see.",[925,154085,154086,154088],{},[1002,154087,3837],{}," When you execute the regedt32 run command, it simply forwards to regedit and executes that program instead. Two distinct versions of Registry Editor did exist in some earlier versions of Windows.",[925,154090,154091,154093],{},[1002,154092,2859],{}," This run command is not available in 64-bit versions of Windows 7.",{"title":998,"searchDepth":1012,"depth":1012,"links":154095},[154096],{"id":152907,"depth":1012,"text":152908},"2013-12-03","\u002Fimages\u002Fblog\u002Ffeatures\u002Frun-commands-for-windows-7.jpg",{},{"title":740,"description":742},"blog\u002Frun-commands-for-windows-7",[361,744],"BNfeQiaHzMKv2BGSOGxj7K8GjoPRLxk-i250vs47A3o",{"id":154105,"title":91,"author":920,"body":154106,"date":154385,"description":93,"extension":1591,"image":154386,"meta":154387,"navigation":1050,"path":92,"seo":154388,"stem":154389,"tags":154390,"__hash__":154391},"blog\u002Fblog\u002Fchrome-devtools-web-app-developers.md",{"type":922,"value":154107,"toc":154375},[154108,154111,154114,154134,154140,154144,154151,154162,154168,154172,154178,154196,154202,154206,154213,154219,154223,154229,154232,154252,154257,154261,154268,154271,154277,154281,154288,154291,154297,154301,154324,154338,154344,154348,154351],[925,154109,154110],{},"This overview of DevTools points out the most popular and useful features. DevTools help inspect, debug and optimize Web applications. Following are a break down of features DevTools provide:Inspecting the DOM and styles",[925,154112,154113],{},"Inspecting the DOM and styles",[1530,154115,154116,154119,154122,154125,154128,154131],{},[974,154117,154118],{},"Working with the console",[974,154120,154121],{},"Debugging JavaScript",[974,154123,154124],{},"Improving network performance",[974,154126,154127],{},"Improving rendering performance",[974,154129,154130],{},"Improving JavaScript & CSS performance",[974,154132,154133],{},"Inspecting Storage",[925,154135,154136],{},[963,154137],{"alt":154138,"src":154139},"DevTools","\u002Fimages\u002Fblog\u002F2013-09-24-chrome-devtools-web-app-developers\u002Fdevtools.png",[953,154141,154143],{"id":154142},"web-developer-toolbar","Web Developer Toolbar",[925,154145,154146,154147],{},"Chrome store location: ",[933,154148,154143],{"title":154149,"href":154150,"target":132673},"Web Developer Toobar","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fweb-developer\u002Fbfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en",[925,154152,154153,154154,944,154158,154161],{},"Adds a toolbar button with various web developer tools. The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox. The extension is available for ",[933,154155,154157],{"href":154156},"http:\u002F\u002Fwww.google.com\u002Fchrome\u002F","Chrome",[933,154159,36748],{"href":154160},"http:\u002F\u002Fwww.mozilla.com\u002Ffirefox\u002F",", and will run on any platform that these browsers support including Windows, OS X and Linux.",[925,154163,154164],{},[963,154165],{"alt":154166,"src":154167},"Web Developer","\u002Fimages\u002Fblog\u002F2013-09-24-chrome-devtools-web-app-developers\u002Fweb-developer.png",[953,154169,154171],{"id":154170},"backbone-devtools","Backbone DevTools",[925,154173,154146,154174,154177],{},[933,154175,154171],{"title":154171,"href":154176,"target":132673},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fbackbone-debugger\u002Fbhljhndlimiafopmmhjlgfpnnchjjbhd?hl=en","\nBackbone team hasn't done much for improving the tool itself but this is good enough for debugging Backbone.js apps. Following are the features provided by Backbone DevTools:",[1530,154179,154180,154183,154186,154193],{},[974,154181,154182],{},"Inspects views, models, collections and routers",[974,154184,154185],{},"Detecst which objects have been instantiated",[974,154187,154188,154189,154192],{},"Diaplys a very useful ",[1107,154190,154191],{},"view","\" hierarchy in the Elements panel",[974,154194,154195],{},"Inspect a DOM element and the closest View will be exposed via $view in the console.\"",[925,154197,154198],{},[963,154199],{"alt":154200,"src":154201},"Backbone","\u002Fimages\u002Fblog\u002F2013-09-24-chrome-devtools-web-app-developers\u002Fbackbone.png",[953,154203,154205],{"id":154204},"ember-inspector","Ember Inspector",[925,154207,154208,154209,154212],{},"Chrome store location: ",[933,154210,154205],{"title":154205,"href":154211,"target":132673},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fember-inspector\u002Fbmdblncegkenkacieihfhpjfppoconhi?hl=en"," Yehuda Katz has been working on Ember Inspector, which improves Ember.js debugging workflow with easy inspection of controllers, views, and objects  when running an Ember.js application. This tools provides features to get insights into models and their attributes, layers, bound computed properties and avoid the need to dig deep into the Ember object graph to figure out what is happening behind the scene.\"",[925,154214,154215],{},[963,154216],{"alt":154217,"src":154218},"Ember","\u002Fimages\u002Fblog\u002F2013-09-24-chrome-devtools-web-app-developers\u002Fember.png",[953,154220,154222],{"id":154221},"angular-batarang","Angular Batarang",[925,154224,154208,154225,154228],{},[933,154226,154222],{"title":154222,"href":154227,"target":132673},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fangularjs-batarang\u002Fighdmehidhipcmcojjgiloacoafjmpfk?hl=en"," Angular Batarang(a superheroic tool that lives up to its name)  is the most mature of the extensions you can find.\" \nThe root scope(Scopes provide mechanism for watching the model and provide event processing life cycle) can get diffcult to trace ,so it's useful that it helps you to inspect nested scopes.",[925,154230,154231],{},"Angular Batarang provides following features:",[1530,154233,154234,154237,154240,154243,154246,154249],{},[974,154235,154236],{},"Visualise dependancies",[974,154238,154239],{},"Debug applications",[974,154241,154242],{},"Analyse performance of app extensions to address perfomance bottlenecks",[974,154244,154245],{},"Get insights into models",[974,154247,154248],{},"View DOM elements of a scope",[974,154250,154251],{},"Inspect nested scopes",[925,154253,154254],{},[963,154255],{"alt":154222,"src":154256},"\u002Fimages\u002Fblog\u002F2013-09-24-chrome-devtools-web-app-developers\u002Fangular_batarang.png",[953,154258,154260],{"id":154259},"thorax-inspector","Thorax Inspector",[925,154262,154263,154264,154267],{},"Chrome store location:  ",[933,154265,154260],{"title":154260,"href":154266,"target":132673},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fthorax-inspector\u002Fpoioalbefcopgeaeaadelomciijaondk?hl=en","\nThorax Inspector is an inspector extension for Thorax, a Backbone + Handlebars framework to build large scale web applications.",[925,154269,154270],{},"This tool lets you inspect Thorax projects, Views, Models and Collections via the Elements panel**.**\"",[925,154272,154273],{},[963,154274],{"alt":154275,"src":154276},"Thorax","\u002Fimages\u002Fblog\u002F2013-09-24-chrome-devtools-web-app-developers\u002Fthorax.png",[953,154278,154280],{"id":154279},"knockoutjs-contextdebugger","KnockoutJS ContextDebugger",[925,154282,154146,154283],{},[933,154284,154287],{"title":154285,"href":154286,"target":132673},"knockout Context Debugger","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fsearch\u002Fknockout%20context?hl=en","Knockout Context Debugger",[925,154289,154290],{},"Knockoutjs Context Debugger shows the knockout context & data for the selected DOM node in a sidebar of the elements pane. Knockoutjs debugging extension adds a extra sidebar in the elements pane of the chrome dev tools with the relevant knockout context and data for the selected element. Very usefull if you got large\u002Fnested viewmodels. Allows to add tracing to every observable\u002Fcomputed.",[925,154292,154293],{},[963,154294],{"alt":154295,"src":154296},"Knockout","\u002Fimages\u002Fblog\u002F2013-09-24-chrome-devtools-web-app-developers\u002Fknckout-debuger.png",[953,154298,154300],{"id":154299},"rails-panel","Rails Panel",[925,154302,154208,154303,154306,154307,154310,154311,154313,154314,154318,154319,154323],{},[933,154304,154300],{"title":154300,"href":154305,"target":132673},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Frailspanel\u002Fgjpfobpafnhjhbajcjgccbbdofdckggg"," RailsPanel is a Chrome extension for Rails development that will end your tailing of ",[12031,154308,154309],{},"development.log",". Have all information about your Rails app requests right there in the Developer Tools panel. Provides insight to db\u002Frendering\u002Ftotal times, parameter list, rendered views, text editor integration and more. To use this extension you need to add meta_request gem to your app's Gemfile: group ",[16,154312],{}," do gem 'meta_request' end\nTincr Chrome store location: ",[933,154315,154316],{"title":154316,"href":154317,"target":132673},"Tincr","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Ftincr\u002Flfjbhpnjiajjgnjganiaggebdhhpnbih"," Extension to allow editing and fast reloading of local files from Chrome developer tools The idea behind Tincr is that you can save changes to your original source file from within Chrome Developer Tools. In addition, Tincr does auto-reloading of JavaScript and CSS changes made in other editors.\nCSS-Shack Chrome store location: ",[933,154320,154321],{"title":154321,"href":154322,"target":132673},"CSS-Shack","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fcss-shack\u002Fgeiccgjkigajaicecnhdokggninehdlp"," CSS-Shack allows you to create Layers Styles (just like you would in any other image editing software), and export them into a single CSS file, or copy them to the clipboard. You can create website designs, mockups or just simple button. Notable features :",[1530,154325,154326,154329,154332,154335],{},[974,154327,154328],{},"Fully CSS3 compatible",[974,154330,154331],{},"Images support",[974,154333,154334],{},"11 filters",[974,154336,154337],{},"Works offline",[925,154339,154340],{},[963,154341],{"alt":154342,"src":154343},"CSS Shack","\u002Fimages\u002Fblog\u002F2013-09-24-chrome-devtools-web-app-developers\u002Fcss-shack.png",[953,154345,154347],{"id":154346},"others","Others",[925,154349,154350],{},"There are more extensions and helpers out there. Following are few of them:",[1530,154352,154353,154361,154368],{},[974,154354,154355,154360],{},[933,154356,154359],{"title":154357,"href":154358},"PrettyPrint","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fprettyprint\u002Fnipdlgebaanapcphbcidpmmmkcecpkhg","PrettyPrint ","- Unminify JavaScript and CSS automatically when using view-source",[974,154362,154363,154367],{},[933,154364,154365],{"title":154365,"href":154366,"target":132673},"JS Runtime Inspector","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fjs-runtime-inspector\u002Fiilpjebedgohcmlffhnkhbjhabkdhfmn"," - For easily grepping JavaScript objects from the Elements panel",[974,154369,154370,154374],{},[933,154371,154372],{"title":154372,"href":154373,"target":132673},"JetBrains IDE Support","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fjetbrains-ide-support\u002Fhmhgeddbohgjknpmjagkdomcpobmllji"," -  Live editing  and see real-time changes in Chrome when used with WebStormIDE",{"title":998,"searchDepth":1012,"depth":1012,"links":154376},[154377,154378,154379,154380,154381,154382,154383,154384],{"id":154142,"depth":1012,"text":154143},{"id":154170,"depth":1012,"text":154171},{"id":154204,"depth":1012,"text":154205},{"id":154221,"depth":1012,"text":154222},{"id":154259,"depth":1012,"text":154260},{"id":154279,"depth":1012,"text":154280},{"id":154299,"depth":1012,"text":154300},{"id":154346,"depth":1012,"text":154347},"2013-09-24","\u002Fimages\u002Fblog\u002Ffeatures\u002Fchrome-devtools-web-app-developers.jpg",{},{"title":91,"description":93},"blog\u002Fchrome-devtools-web-app-developers",[16,17],"wBGUm8FhwREyL-FqJ6Dsir5_7tEum-gmwrGR7f4uoeE",{"id":154393,"title":720,"author":920,"body":154394,"date":155419,"description":722,"extension":1591,"image":155420,"meta":155421,"navigation":1050,"path":721,"seo":155422,"stem":155423,"tags":155424,"__hash__":155425},"blog\u002Fblog\u002Frequirejs-handlebars.md",{"type":922,"value":154395,"toc":155409},[154396,154400,154407,154410,154415,154418,154425,154428,154432,154435,154438,154470,154474,154481,154484,154516,154522,154525,154529,154532,154535,154622,154625,154700,154707,154713,154717,154726,154732,154894,154897,154901,154915,154926,154933,154939,155120,155133,155136,155142,155146,155156,155212,155215,155219,155227,155230,155293,155300,155314,155330,155336,155351,155357,155400,155406],[953,154397,154399],{"id":154398},"why-requirejs","Why RequireJS?",[925,154401,154402,154403,154406],{},"When the application grows, we need a way of loading dependencies via a ",[1107,154404,154405],{},"#include\u002Fimport\u002Frequire"," structure.",[925,154408,154409],{},"Also the number of plug-ins can grow bigger, and you will feel the need of adding more modular components. This also could address the ability to load nested dependencies. Uncontrolled scripts can lead in to lose control flow and make it hard to understand the code.",[925,154411,154412,154414],{},[941,154413,87269],{}," is a javascript file and a module loader which can be used to organize your code structure and improve brevity.",[925,154416,154417],{},"We can lazy load dependencies as we wish, and reuse components. Using a modular script loader like RequireJs will improve the speed and the quality of your code.",[925,154419,154420,154421,154424],{},"RequireJS allows modules to be loaded as fast as possible, even if it is out of order but evaluated in the correct dependency order. With ",[1107,154422,154423],{},"r.js",", we could easily minify and combine the app to reduce the amount of script tags.",[925,154426,154427],{},"RequireJS is built on the Module Pattern.",[953,154429,154431],{"id":154430},"the-module-pattern","The Module Pattern",[925,154433,154434],{},"A javascript code module is a collection of javascript code located in a registered location. All of the code running inside a function lives in a closure, which provides privacy and state throughout the lifetime of the app.",[925,154436,154437],{},"Technically, it is an anonymous function that executes immediately.",[993,154439,154441],{"className":995,"code":154440,"language":997,"meta":998,"style":998},"(function () {\n \u002F\u002F variables and function definition\n \u002F\u002F  local to this module\n \u002F\u002F access global variables\n})();\n",[941,154442,154443,154451,154456,154461,154466],{"__ignoreMap":998},[1002,154444,154445,154447,154449],{"class":1004,"line":1005},[1002,154446,1031],{"class":1030},[1002,154448,6965],{"class":1015},[1002,154450,9772],{"class":1030},[1002,154452,154453],{"class":1004,"line":1012},[1002,154454,154455],{"class":1008}," \u002F\u002F variables and function definition\n",[1002,154457,154458],{"class":1004,"line":1047},[1002,154459,154460],{"class":1008}," \u002F\u002F  local to this module\n",[1002,154462,154463],{"class":1004,"line":1054},[1002,154464,154465],{"class":1008}," \u002F\u002F access global variables\n",[1002,154467,154468],{"class":1004,"line":1060},[1002,154469,88924],{"class":1030},[953,154471,154473],{"id":154472},"_1-adding-requirejs-to-your-project","1. Adding Require.js to your project",[925,154475,154476,154477,948],{},"Let's start with downloading the require.js distribution from ",[933,154478,14815],{"href":154479,"rel":154480},"http:\u002F\u002Frequirejs.org\u002Fdocs\u002Fdownload.html",[937],[925,154482,154483],{},"Once we have the library, let's add it to our project. Insert the following snippet to your index.html or equivalent file:",[993,154485,154487],{"className":995,"code":154486,"language":997,"meta":998,"style":998},"\u003Cscript data-main=\"app\u002Fjs\u002Fmain\" src=\"static\u002Fjs\u002Flib\u002Frequire.js\">\u003C\u002Fscript>\n",[941,154488,154489],{"__ignoreMap":998},[1002,154490,154491,154493,154495,154498,154500,154503,154505,154507,154510,154512,154514],{"class":1004,"line":1005},[1002,154492,6539],{"class":1030},[1002,154494,22063],{"class":15711},[1002,154496,154497],{"class":1026}," data-main",[1002,154499,2393],{"class":1015},[1002,154501,154502],{"class":1034},"\"app\u002Fjs\u002Fmain\"",[1002,154504,15242],{"class":1026},[1002,154506,2393],{"class":1015},[1002,154508,154509],{"class":1034},"\"static\u002Fjs\u002Flib\u002Frequire.js\"",[1002,154511,22081],{"class":1030},[1002,154513,22063],{"class":15711},[1002,154515,15703],{"class":1030},[925,154517,3295,154518,154521],{},[941,154519,154520],{},"data-main"," attribute tells require.js which file to load (without .js extension treating it a module). This file contains instructions on how\nto start up our application. It can also contain the configuration.",[925,154523,154524],{},"All other \u003Cscript> tags can be removed from your index.html page.",[953,154526,154528],{"id":154527},"_2-configuringrequirejs","2. Configuring Require.js",[925,154530,154531],{},"Require.js uses AMD style lazy loading, which means that modules need to declare what they depend on, and what they export.",[925,154533,154534],{},"Let's create the main.js file now. Insert the project layout description:",[993,154536,154538],{"className":995,"code":154537,"language":997,"meta":998,"style":998},"requirejs.config({\n baseUrl: '\u002Fpublic',\n paths: {\n app: 'app\u002Fjs',\n jquery: 'js\u002Flib\u002Fjquery-2.0.0.min',\n underscore: 'js\u002Flib\u002Funderscore-min-1.5.1',\n backbone: 'js\u002Flib\u002Fbackbone-min-1.0.0',\n handlebars: 'js\u002Flib\u002Fhandlebars',\n },\n});\n",[941,154539,154540,154549,154559,154564,154574,154584,154594,154604,154614,154618],{"__ignoreMap":998},[1002,154541,154542,154545,154547],{"class":1004,"line":1005},[1002,154543,154544],{"class":1030},"requirejs.",[1002,154546,47471],{"class":1026},[1002,154548,2756],{"class":1030},[1002,154550,154551,154554,154557],{"class":1004,"line":1012},[1002,154552,154553],{"class":1030}," baseUrl: ",[1002,154555,154556],{"class":1034},"'\u002Fpublic'",[1002,154558,1143],{"class":1030},[1002,154560,154561],{"class":1004,"line":1047},[1002,154562,154563],{"class":1030}," paths: {\n",[1002,154565,154566,154569,154572],{"class":1004,"line":1054},[1002,154567,154568],{"class":1030}," app: ",[1002,154570,154571],{"class":1034},"'app\u002Fjs'",[1002,154573,1143],{"class":1030},[1002,154575,154576,154579,154582],{"class":1004,"line":1060},[1002,154577,154578],{"class":1030}," jquery: ",[1002,154580,154581],{"class":1034},"'js\u002Flib\u002Fjquery-2.0.0.min'",[1002,154583,1143],{"class":1030},[1002,154585,154586,154589,154592],{"class":1004,"line":1272},[1002,154587,154588],{"class":1030}," underscore: ",[1002,154590,154591],{"class":1034},"'js\u002Flib\u002Funderscore-min-1.5.1'",[1002,154593,1143],{"class":1030},[1002,154595,154596,154599,154602],{"class":1004,"line":1348},[1002,154597,154598],{"class":1030}," backbone: ",[1002,154600,154601],{"class":1034},"'js\u002Flib\u002Fbackbone-min-1.0.0'",[1002,154603,1143],{"class":1030},[1002,154605,154606,154609,154612],{"class":1004,"line":1354},[1002,154607,154608],{"class":1030}," handlebars: ",[1002,154610,154611],{"class":1034},"'js\u002Flib\u002Fhandlebars'",[1002,154613,1143],{"class":1030},[1002,154615,154616],{"class":1004,"line":1360},[1002,154617,1502],{"class":1030},[1002,154619,154620],{"class":1004,"line":1366},[1002,154621,2804],{"class":1030},[925,154623,154624],{},"This assumes the following structure:",[993,154626,154628],{"className":1724,"code":154627,"language":1726,"meta":998,"style":998},"tree .\npublic\u002F\n app\u002F\n js\u002F\n collections.js views.js\n models.js\n app.js\n main.js\n js\u002F\n lib\u002F\n jquery-2.0.0.min.js\n underscore-min-1.5.1.js\n backbone-min-1.0.0.js\n handlebars.js\u003C\u002Fpre>\n",[941,154629,154630,154635,154640,154645,154650,154655,154660,154665,154670,154675,154680,154685,154690,154695],{"__ignoreMap":998},[1002,154631,154632],{"class":1004,"line":1005},[1002,154633,154634],{},"tree .\n",[1002,154636,154637],{"class":1004,"line":1012},[1002,154638,154639],{},"public\u002F\n",[1002,154641,154642],{"class":1004,"line":1047},[1002,154643,154644],{}," app\u002F\n",[1002,154646,154647],{"class":1004,"line":1054},[1002,154648,154649],{}," js\u002F\n",[1002,154651,154652],{"class":1004,"line":1060},[1002,154653,154654],{}," collections.js views.js\n",[1002,154656,154657],{"class":1004,"line":1272},[1002,154658,154659],{}," models.js\n",[1002,154661,154662],{"class":1004,"line":1348},[1002,154663,154664],{}," app.js\n",[1002,154666,154667],{"class":1004,"line":1354},[1002,154668,154669],{}," main.js\n",[1002,154671,154672],{"class":1004,"line":1360},[1002,154673,154674],{}," js\u002F\n",[1002,154676,154677],{"class":1004,"line":1366},[1002,154678,154679],{}," lib\u002F\n",[1002,154681,154682],{"class":1004,"line":1946},[1002,154683,154684],{}," jquery-2.0.0.min.js\n",[1002,154686,154687],{"class":1004,"line":1956},[1002,154688,154689],{}," underscore-min-1.5.1.js\n",[1002,154691,154692],{"class":1004,"line":1961},[1002,154693,154694],{}," backbone-min-1.0.0.js\n",[1002,154696,154697],{"class":1004,"line":1971},[1002,154698,154699],{}," handlebars.js\u003C\u002Fpre>\n",[925,154701,154702,154703,154706],{},"This informs require.js that ",[941,154704,154705],{},"\u002Fpublic ","is the root URL for our app and all paths are from now on relative to this location.",[925,154708,154709,154710,154712],{},"And describe where our current dependencies are located. Also notice that we don't specify the ",[941,154711,62056],{}," extension here.  Not all modules can be AMD compliant. Let's look at those next.",[953,154714,154716],{"id":154715},"_3-non-amd-modules-and-plug-ins","3. Non AMD modules and plug-ins",[925,154718,154719,154720,2034,154722,154725],{},"Distributions like ",[941,154721,137766],{},[941,154723,154724],{},"Underscore.js"," are currently not AMD compliant.",[925,154727,154728,154731],{},[941,154729,154730],{},"Shims"," let require.js load non AMD compliant libraries.  Let's add them to our config:",[993,154733,154735],{"className":995,"code":154734,"language":997,"meta":998,"style":998},"requirejs.config({\n baseUrl: '\u002Fpublic',\n paths: {\n app: 'app\u002Fjs',\n jquery: 'js\u002Fvendor\u002Fjquery-2.0.0.min',\n underscore: 'js\u002Flib\u002Funderscore-min-1.5.1',\n backbone: 'js\u002Flib\u002Fbackbone-min-1.0.0',\n bootstrap: 'js\u002Flib\u002Fbootstrap.min',\n handlebars: 'js\u002Flib\u002Fhandlebars',\n },\n shim: {\n underscore: {\n exports: '_',\n },\n backbone: {\n deps: ['jquery', 'underscore'],\n exports: 'Backbone',\n },\n handlebars: {\n exports: 'Handlebars',\n },\n },\n});\n",[941,154736,154737,154745,154753,154757,154765,154774,154782,154790,154800,154808,154812,154817,154822,154832,154836,154841,154855,154864,154868,154873,154882,154886,154890],{"__ignoreMap":998},[1002,154738,154739,154741,154743],{"class":1004,"line":1005},[1002,154740,154544],{"class":1030},[1002,154742,47471],{"class":1026},[1002,154744,2756],{"class":1030},[1002,154746,154747,154749,154751],{"class":1004,"line":1012},[1002,154748,154553],{"class":1030},[1002,154750,154556],{"class":1034},[1002,154752,1143],{"class":1030},[1002,154754,154755],{"class":1004,"line":1047},[1002,154756,154563],{"class":1030},[1002,154758,154759,154761,154763],{"class":1004,"line":1054},[1002,154760,154568],{"class":1030},[1002,154762,154571],{"class":1034},[1002,154764,1143],{"class":1030},[1002,154766,154767,154769,154772],{"class":1004,"line":1060},[1002,154768,154578],{"class":1030},[1002,154770,154771],{"class":1034},"'js\u002Fvendor\u002Fjquery-2.0.0.min'",[1002,154773,1143],{"class":1030},[1002,154775,154776,154778,154780],{"class":1004,"line":1272},[1002,154777,154588],{"class":1030},[1002,154779,154591],{"class":1034},[1002,154781,1143],{"class":1030},[1002,154783,154784,154786,154788],{"class":1004,"line":1348},[1002,154785,154598],{"class":1030},[1002,154787,154601],{"class":1034},[1002,154789,1143],{"class":1030},[1002,154791,154792,154795,154798],{"class":1004,"line":1354},[1002,154793,154794],{"class":1030}," bootstrap: ",[1002,154796,154797],{"class":1034},"'js\u002Flib\u002Fbootstrap.min'",[1002,154799,1143],{"class":1030},[1002,154801,154802,154804,154806],{"class":1004,"line":1360},[1002,154803,154608],{"class":1030},[1002,154805,154611],{"class":1034},[1002,154807,1143],{"class":1030},[1002,154809,154810],{"class":1004,"line":1366},[1002,154811,1502],{"class":1030},[1002,154813,154814],{"class":1004,"line":1946},[1002,154815,154816],{"class":1030}," shim: {\n",[1002,154818,154819],{"class":1004,"line":1956},[1002,154820,154821],{"class":1030}," underscore: {\n",[1002,154823,154824,154827,154830],{"class":1004,"line":1961},[1002,154825,154826],{"class":1030}," exports: ",[1002,154828,154829],{"class":1034},"'_'",[1002,154831,1143],{"class":1030},[1002,154833,154834],{"class":1004,"line":1971},[1002,154835,15108],{"class":1030},[1002,154837,154838],{"class":1004,"line":1980},[1002,154839,154840],{"class":1030}," backbone: {\n",[1002,154842,154843,154846,154848,154850,154853],{"class":1004,"line":1985},[1002,154844,154845],{"class":1030}," deps: [",[1002,154847,101564],{"class":1034},[1002,154849,1251],{"class":1030},[1002,154851,154852],{"class":1034},"'underscore'",[1002,154854,1903],{"class":1030},[1002,154856,154857,154859,154862],{"class":1004,"line":1995},[1002,154858,154826],{"class":1030},[1002,154860,154861],{"class":1034},"'Backbone'",[1002,154863,1143],{"class":1030},[1002,154865,154866],{"class":1004,"line":2006},[1002,154867,15108],{"class":1030},[1002,154869,154870],{"class":1004,"line":2011},[1002,154871,154872],{"class":1030}," handlebars: {\n",[1002,154874,154875,154877,154880],{"class":1004,"line":2017},[1002,154876,154826],{"class":1030},[1002,154878,154879],{"class":1034},"'Handlebars'",[1002,154881,1143],{"class":1030},[1002,154883,154884],{"class":1004,"line":2022},[1002,154885,15108],{"class":1030},[1002,154887,154888],{"class":1004,"line":2442},[1002,154889,1502],{"class":1030},[1002,154891,154892],{"class":1004,"line":2466},[1002,154893,2804],{"class":1030},[925,154895,154896],{},"Notice how jQuery does not need such a shim. This is because jQuery version 1.7 and above is AMD compliant, so it should work fine. So now require.js knows what our app looks like. Now it's time to convert our own code to be AMD compliant.",[953,154898,154900],{"id":154899},"_4-converting-our-code-to-be-amd-compliant","4. Converting our code to be AMD compliant",[925,154902,154903,154904,154907,154908,154911,154912,154914],{},"We'll assume for the purpose of this post that our app is laid out as such:  ",[941,154905,154906],{},"views.js"," - containing our Backbone Views, ",[941,154909,154910],{},"models.js"," - containing Backbone Models, and ",[941,154913,47429],{}," - containing our main Application.",[925,154916,154917,154918,154920,154921,154925],{},"First, we examine the file and see what dependencies are being used. for example, the ",[941,154919,154906],{}," file uses jQuery for DOM manipulation, ",[933,154922,154924],{"href":154923,"target":132673},"http:\u002F\u002Fhandlebarsjs.com\u002F","Handlebars"," for rendering templates, and Backbone for defining the View subclasses.",[925,154927,154928,154929,154932],{},"Now we can wrap our code with a ",[941,154930,154931],{},"define()"," function which require.js provides. This function takes 2 arguments: an array of strings (describing the dependencies) and a function that (returns whatever we want to export from this module). This function gets whatever we decided to import as arguments.",[925,154934,154935,154936,154938],{},"Let's explain this with an example. Our converted ",[941,154937,154906],{}," file should now look as follows:",[993,154940,154942],{"className":995,"code":154941,"language":997,"meta":998,"style":998},"define(['jquery', 'handlebars',\n\n'backbone'], function($, Handlebars, Backbone) {\n\n var SomeView = Backbone.view.extend({\n render: function() {\n var template = Handlebars.compile($('#template-someview').html());\n var rendered = template(this.getContext());\n ...\n }\n \u002F\u002F more view code\n ...\n });\n ...\n \u002F\u002F export stuff:\n return {\n 'SomeView': SomeView\n };\n});\n",[941,154943,154944,154959,154963,154986,154990,155006,155016,155045,155068,155072,155076,155081,155085,155089,155093,155098,155104,155112,155116],{"__ignoreMap":998},[1002,154945,154946,154948,154950,154952,154954,154957],{"class":1004,"line":1005},[1002,154947,130347],{"class":1026},[1002,154949,30910],{"class":1030},[1002,154951,101564],{"class":1034},[1002,154953,1251],{"class":1030},[1002,154955,154956],{"class":1034},"'handlebars'",[1002,154958,1143],{"class":1030},[1002,154960,154961],{"class":1004,"line":1012},[1002,154962,1051],{"emptyLinePlaceholder":1050},[1002,154964,154965,154968,154970,154972,154974,154976,154978,154980,154982,154984],{"class":1004,"line":1047},[1002,154966,154967],{"class":1034},"'backbone'",[1002,154969,32267],{"class":1030},[1002,154971,6965],{"class":1015},[1002,154973,1031],{"class":1030},[1002,154975,15864],{"class":2378},[1002,154977,1251],{"class":1030},[1002,154979,154924],{"class":2378},[1002,154981,1251],{"class":1030},[1002,154983,154200],{"class":2378},[1002,154985,2382],{"class":1030},[1002,154987,154988],{"class":1004,"line":1054},[1002,154989,1051],{"emptyLinePlaceholder":1050},[1002,154991,154992,154994,154997,154999,155002,155004],{"class":1004,"line":1060},[1002,154993,28293],{"class":1015},[1002,154995,154996],{"class":1030}," SomeView ",[1002,154998,2393],{"class":1015},[1002,155000,155001],{"class":1030}," Backbone.view.",[1002,155003,106592],{"class":1026},[1002,155005,2756],{"class":1030},[1002,155007,155008,155010,155012,155014],{"class":1004,"line":1272},[1002,155009,139812],{"class":1026},[1002,155011,1137],{"class":1030},[1002,155013,6965],{"class":1015},[1002,155015,3025],{"class":1030},[1002,155017,155018,155020,155023,155025,155028,155030,155032,155034,155036,155039,155041,155043],{"class":1004,"line":1348},[1002,155019,74514],{"class":1015},[1002,155021,155022],{"class":1030}," template ",[1002,155024,2393],{"class":1015},[1002,155026,155027],{"class":1030}," Handlebars.",[1002,155029,150110],{"class":1026},[1002,155031,1031],{"class":1030},[1002,155033,15864],{"class":1026},[1002,155035,1031],{"class":1030},[1002,155037,155038],{"class":1034},"'#template-someview'",[1002,155040,1539],{"class":1030},[1002,155042,383],{"class":1026},[1002,155044,3885],{"class":1030},[1002,155046,155047,155049,155052,155054,155057,155059,155061,155063,155066],{"class":1004,"line":1354},[1002,155048,74514],{"class":1015},[1002,155050,155051],{"class":1030}," rendered ",[1002,155053,2393],{"class":1015},[1002,155055,155056],{"class":1026}," template",[1002,155058,1031],{"class":1030},[1002,155060,3455],{"class":1019},[1002,155062,948],{"class":1030},[1002,155064,155065],{"class":1026},"getContext",[1002,155067,3885],{"class":1030},[1002,155069,155070],{"class":1004,"line":1360},[1002,155071,61822],{"class":1015},[1002,155073,155074],{"class":1004,"line":1366},[1002,155075,2014],{"class":1030},[1002,155077,155078],{"class":1004,"line":1946},[1002,155079,155080],{"class":1008}," \u002F\u002F more view code\n",[1002,155082,155083],{"class":1004,"line":1956},[1002,155084,48894],{"class":1015},[1002,155086,155087],{"class":1004,"line":1961},[1002,155088,19836],{"class":1030},[1002,155090,155091],{"class":1004,"line":1971},[1002,155092,18213],{"class":1015},[1002,155094,155095],{"class":1004,"line":1980},[1002,155096,155097],{"class":1008}," \u002F\u002F export stuff:\n",[1002,155099,155100,155102],{"class":1004,"line":1985},[1002,155101,15066],{"class":1015},[1002,155103,1457],{"class":1030},[1002,155105,155106,155109],{"class":1004,"line":1995},[1002,155107,155108],{"class":1034}," 'SomeView'",[1002,155110,155111],{"class":1030},": SomeView\n",[1002,155113,155114],{"class":1004,"line":2006},[1002,155115,15113],{"class":1030},[1002,155117,155118],{"class":1004,"line":2011},[1002,155119,2804],{"class":1030},[925,155121,155122,155123,155126,155127,155129,155130,155132],{},"Require.js knows how to find our jQuery module using the ",[941,155124,155125],{},"paths"," declaration we made before in ",[941,155128,90996],{},". So loading something such as ",[941,155131,106],{}," seems a bit abstract at first.But the module loading configuration is centralized and decoupled from our code. And the views module doesn't need to know where jQuery is located in our project, making it easy to port this module to another project, without changing or adjusting our imports.",[925,155134,155135],{},"Also you don't have to return all View subclasses. as with any module, you should only export things that could be used by other modules. It's ok to keep some views or bits of functionality for internal \"private\" use by the module itself. It's up to you.",[925,155137,155138,155139,155141],{},"Repeat this process as necessary for other files in your project. This might also be a good time to break things down into smaller files with smaller scopes of functionality. Don't worry about having to load multiple scripts, we'll use ",[941,155140,154423],{}," later to concatenate and minify all our resources into a single file later.",[953,155143,155145],{"id":155144},"_5-launchingour-application","5. Launching our application.",[925,155147,155148,155149,155151,155152,155155],{},"Time to fire up our newly converted app. For that, we'll revisit our ",[941,155150,90996],{}," file, and add the following beneath our ",[941,155153,155154],{},"requirejs.config()"," declaration:",[993,155157,155159],{"className":995,"code":155158,"language":997,"meta":998,"style":998},"require(['app\u002Fapp'], function (Application) {\n var app = new Application();\n app.start(); \u002F\u002F or whatever startup logic your app uses.\n});\n",[941,155160,155161,155181,155196,155208],{"__ignoreMap":998},[1002,155162,155163,155165,155167,155170,155172,155174,155176,155179],{"class":1004,"line":1005},[1002,155164,1294],{"class":1026},[1002,155166,30910],{"class":1030},[1002,155168,155169],{"class":1034},"'app\u002Fapp'",[1002,155171,32267],{"class":1030},[1002,155173,6965],{"class":1015},[1002,155175,6513],{"class":1030},[1002,155177,155178],{"class":2378},"Application",[1002,155180,2382],{"class":1030},[1002,155182,155183,155185,155187,155189,155191,155194],{"class":1004,"line":1012},[1002,155184,28293],{"class":1015},[1002,155186,42880],{"class":1030},[1002,155188,2393],{"class":1015},[1002,155190,2690],{"class":1015},[1002,155192,155193],{"class":1026}," Application",[1002,155195,1428],{"class":1030},[1002,155197,155198,155201,155203,155205],{"class":1004,"line":1047},[1002,155199,155200],{"class":1030}," app.",[1002,155202,9060],{"class":1026},[1002,155204,6859],{"class":1030},[1002,155206,155207],{"class":1008},"\u002F\u002F or whatever startup logic your app uses.\n",[1002,155209,155210],{"class":1004,"line":1054},[1002,155211,2804],{"class":1030},[925,155213,155214],{},"This will load your main application and fire it up, the same way a \"main\" module would probably do in several other languages. Your app is now AMD compliant and uses require.js to manage and declare modules and dependencies. Way to go!",[953,155216,155218],{"id":155217},"_6-deploying-to-production","6. Deploying to production",[925,155220,155221,155222,155226],{},"A great tool that require.js comes with ",[933,155223,154423],{"href":155224,"rel":155225},"http:\u002F\u002Frequirejs.org\u002Fdocs\u002Foptimization.html",[937],". It lets you automatically pull all your dependencies and modules into a single file and minify it. It also lets you do other neat stuff such as concatenating CSS files.",[925,155228,155229],{},"The easiest way to build our app for production, is to create a build.js file containing our build configuration. It should look something like this:",[993,155231,155233],{"className":995,"code":155232,"language":997,"meta":998,"style":998},"({\n ({\n \"baseUrl\": \".\u002Fpublic\",\n \"name\": \"app\u002Fmain\",\n \"mainConfigFile\": \".\u002Fpublic\u002Fapp\u002Fjs\u002Fmain.js\",\n \"out\": \".\u002Fpublic\u002Fjs\u002Fapp.js\"\n})\n",[941,155234,155235,155239,155244,155256,155267,155279,155289],{"__ignoreMap":998},[1002,155236,155237],{"class":1004,"line":1005},[1002,155238,2756],{"class":1030},[1002,155240,155241],{"class":1004,"line":1012},[1002,155242,155243],{"class":1030}," ({\n",[1002,155245,155246,155249,155251,155254],{"class":1004,"line":1047},[1002,155247,155248],{"class":1034}," \"baseUrl\"",[1002,155250,1137],{"class":1030},[1002,155252,155253],{"class":1034},"\".\u002Fpublic\"",[1002,155255,1143],{"class":1030},[1002,155257,155258,155260,155262,155265],{"class":1004,"line":1054},[1002,155259,1134],{"class":1034},[1002,155261,1137],{"class":1030},[1002,155263,155264],{"class":1034},"\"app\u002Fmain\"",[1002,155266,1143],{"class":1030},[1002,155268,155269,155272,155274,155277],{"class":1004,"line":1060},[1002,155270,155271],{"class":1034}," \"mainConfigFile\"",[1002,155273,1137],{"class":1030},[1002,155275,155276],{"class":1034},"\".\u002Fpublic\u002Fapp\u002Fjs\u002Fmain.js\"",[1002,155278,1143],{"class":1030},[1002,155280,155281,155284,155286],{"class":1004,"line":1272},[1002,155282,155283],{"class":1034}," \"out\"",[1002,155285,1137],{"class":1030},[1002,155287,155288],{"class":1034},"\".\u002Fpublic\u002Fjs\u002Fapp.js\"\n",[1002,155290,155291],{"class":1004,"line":1348},[1002,155292,61217],{"class":1030},[925,155294,155295,155296,155299],{},"I generally put this file one level above my public folder, since I don't want it to be deployed as a static asset. The most important setting here to note is ",[941,155297,155298],{},"mainConfigFile"," - this should be the path to our main module from before.",[925,155301,155302,155303,155305,155306,155309,155310,155313],{},"To build the project we need to first install ",[1107,155304,154423],{},". The easiest way to do that (provided you have ",[933,155307,442],{"href":155308,"target":132673},"http:\u002F\u002Fnodejs.org\u002F","and ",[933,155311,27346],{"href":155312,"target":132673},"https:\u002F\u002Fnpmjs.org\u002F"," installed) is to use npm:",[993,155315,155317],{"className":1797,"code":155316,"language":1799,"meta":998,"style":998},"npm install -g requirejs\n",[941,155318,155319],{"__ignoreMap":998},[1002,155320,155321,155323,155325,155327],{"class":1004,"line":1005},[1002,155322,27346],{"class":1026},[1002,155324,27349],{"class":1034},[1002,155326,88978],{"class":1019},[1002,155328,155329],{"class":1034}," requirejs\n",[925,155331,155332,155333,155335],{},"Once installed, we can call ",[1107,155334,154423],{}," pointing it to our build.js file:",[993,155337,155339],{"className":1797,"code":155338,"language":1799,"meta":998,"style":998},"r.js -o build.js\n",[941,155340,155341],{"__ignoreMap":998},[1002,155342,155343,155345,155348],{"class":1004,"line":1005},[1002,155344,154423],{"class":1026},[1002,155346,155347],{"class":1019}," -o",[1002,155349,155350],{"class":1034}," build.js\n",[925,155352,155353,155354,155356],{},"Depending on the size of your project, it could take a few seconds to resolve all dependencies and minify them. Once done, we can change our ",[941,155355,22063],{}," tag to include the built version:",[993,155358,155360],{"className":995,"code":155359,"language":997,"meta":998,"style":998},"\u003Cscript src=\"\u002Fstatic\u002Fjs\u002Fvendor\u002Frequire.js\">\u003C\u002Fscript>\n\u003Cscript src=\"\u002Fstatic\u002Fjs\u002Fapp.js\">\u003C\u002Fscript>\n",[941,155361,155362,155381],{"__ignoreMap":998},[1002,155363,155364,155366,155368,155370,155372,155375,155377,155379],{"class":1004,"line":1005},[1002,155365,6539],{"class":1030},[1002,155367,22063],{"class":15711},[1002,155369,15242],{"class":1026},[1002,155371,2393],{"class":1015},[1002,155373,155374],{"class":1034},"\"\u002Fstatic\u002Fjs\u002Fvendor\u002Frequire.js\"",[1002,155376,22081],{"class":1030},[1002,155378,22063],{"class":15711},[1002,155380,15703],{"class":1030},[1002,155382,155383,155385,155387,155389,155391,155394,155396,155398],{"class":1004,"line":1012},[1002,155384,6539],{"class":1030},[1002,155386,22063],{"class":15711},[1002,155388,15242],{"class":1026},[1002,155390,2393],{"class":1015},[1002,155392,155393],{"class":1034},"\"\u002Fstatic\u002Fjs\u002Fapp.js\"",[1002,155395,22081],{"class":1030},[1002,155397,22063],{"class":15711},[1002,155399,15703],{"class":1030},[925,155401,155402,155403,155405],{},"Notice how we removed the ",[941,155404,154520],{}," attribute. We added the compiled version of our code instead, containing everything we need inside it.",[1579,155407,155408],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":155410},[155411,155412,155413,155414,155415,155416,155417,155418],{"id":154398,"depth":1012,"text":154399},{"id":154430,"depth":1012,"text":154431},{"id":154472,"depth":1012,"text":154473},{"id":154527,"depth":1012,"text":154528},{"id":154715,"depth":1012,"text":154716},{"id":154899,"depth":1012,"text":154900},{"id":155144,"depth":1012,"text":155145},{"id":155217,"depth":1012,"text":155218},"2013-09-10","\u002Fimages\u002Fblog\u002Ffeatures\u002Frequirejs-handlebars.jpg",{},{"title":720,"description":722},"blog\u002Frequirejs-handlebars",[16,17],"lthycEr_BexiYc3RsRIbIDsnu3mWS05TsgQfJHqBEdk",{"id":155427,"title":164,"author":920,"body":155428,"date":155582,"description":166,"extension":1591,"image":155583,"meta":155584,"navigation":1050,"path":165,"seo":155585,"stem":155586,"tags":155587,"__hash__":155588},"blog\u002Fblog\u002Fdodge-burn-and-sponge-tools-in-photoshop-cs6.md",{"type":922,"value":155429,"toc":155571},[155430,155450,155453,155456,155459,155465,155474,155476,155479,155482,155485,155491,155494,155498,155501,155507,155510,155516,155519,155522,155525,155528,155531,155537,155543,155549,155553,155558,155563,155568],[1530,155431,155432,155438,155444],{},[974,155433,155434,155437],{},[1107,155435,155436],{},"Dodge Tool"," - Lighten an area",[974,155439,155440,155443],{},[1107,155441,155442],{},"Burn Tool"," - Darken an area",[974,155445,155446,155449],{},[1107,155447,155448],{},"Sponge Tool"," - Desaturate\u002Fsaturate color",[925,155451,155452],{},"With these tools a photographer can enhance a photo by retouching the areas affected by strong light, harsh shadows and bright\u002Fweak colours.",[953,155454,155436],{"id":155455},"dodge-tool",[925,155457,155458],{},"Dodge Tool is grouped with Burn and Sponge Tools. To use the last Dodge, Burn, Sponge Tools, use the keyboard shortcut of “O”.",[925,155460,155461],{},[963,155462],{"alt":155463,"src":155464},"Dodge Toolobox","\u002Fimages\u002Fblog\u002F2013-08-15-dodge-burn-and-sponge-tools-in-photoshop-cs6\u002Fps_dodgeburn.jpg",[925,155466,155467,155468,2034,155470,155473],{},"Once you selected this tool,  an options bar will be displayed on the top of the window, showing ",[941,155469,50664],{},[941,155471,155472],{},"Exposure"," drop downs.",[1655,155475,50664],{"id":50647},[925,155477,155478],{},"This specifies if the Dodge tool affects shadows, mid-tones, or highlights in the areas you use the tool.",[1655,155480,155472],{"id":155481},"exposure",[925,155483,155484],{},"Specifies the effect the Dodge tool makes as you drag. Always start with a lower exposure, so that you can drag it over again if the areas needs a strong effect.",[925,155486,155487],{},[963,155488],{"alt":155489,"src":155490},"Airbrush","\u002Fimages\u002Fblog\u002F2013-08-15-dodge-burn-and-sponge-tools-in-photoshop-cs6\u002Fairbrush.jpg",[925,155492,155493],{},"Simulates Airbrush stroke.",[1655,155495,155497],{"id":155496},"protect-tones","Protect Tones",[925,155499,155500],{},"Tells Photoshop to minimize the clipping and makes sure the colours do not change.  You can leave this unchecked for most scenarios.",[925,155502,155503],{},[963,155504],{"alt":155505,"src":155506},"Dodge Tool Options","\u002Fimages\u002Fblog\u002F2013-08-15-dodge-burn-and-sponge-tools-in-photoshop-cs6\u002Fdodge-toolbar.jpg",[925,155508,155509],{},"Take a look at the image below. See how the dark areas  and shadows are lightened by the Dodge Tool, bright areas which do not need attention are darkened with the Burn Tool and background colours have been desaturated to focus on the subject with the Sponge Tool.",[925,155511,155512],{},[963,155513],{"alt":155514,"src":155515},"Finished Dodge Tool Example","\u002Fimages\u002Fblog\u002F2013-08-15-dodge-burn-and-sponge-tools-in-photoshop-cs6\u002Fdodgeburn.jpg",[953,155517,155442],{"id":155518},"burn-tool",[925,155520,155521],{},"Opposite of the Dodge Tool, Burn tool darken the image. Right-click the toolbox again and select the Burn Tool.",[925,155523,155524],{},"The options are exactly the same as the Dodge Tool.",[953,155526,155448],{"id":155527},"sponge-tool",[925,155529,155530],{},"The Sponge Tool allows you to desaturate or saturate the colours. Options bar for Sponge tool is a little bit different, so let’s go over each of the options.",[925,155532,155533],{},[963,155534],{"alt":155535,"src":155536},"Sponge Tool Options","\u002Fimages\u002Fblog\u002F2013-08-15-dodge-burn-and-sponge-tools-in-photoshop-cs6\u002Fsponge-toolbar.jpg",[925,155538,155539,155542],{},[941,155540,155541],{},"Mode"," specifies whether the Sponge tool saturates (adds more color intensity) or desaturates (decreases color intensity) in the area you drag over.",[925,155544,155545,155548],{},[941,155546,155547],{},"Flow"," identifies how much of a change the Sponge tool makes as you drag.",[1655,155550,155552],{"id":155551},"where-to-use-these-tools","Where to use these tools",[925,155554,155555,155557],{},[941,155556,155448],{}," - Use the Sponge tool to desaturate to make certain areas of a picture be black and white. For example, use desaturate to take a picture of an object (example: red rose) or one coloured object and create a selection around that object. Then inverse the selection (this makes it so everything but the object can be modified). Now desaturate everything else. Your end result is a black and white picture with an object in the middle (very cool effect).",[925,155559,155560,155562],{},[941,155561,155442],{}," - Fix bright areas, and also you can make shadows appear to be even darker than they were photographed.",[925,155564,155565,155567],{},[941,155566,155436],{}," - You could use this tool to fake sunlight on an object. Sometimes, you are merging 2 pictures together and picture 1 which ends up being the background has some sunlight in it. Picture 2 has no sunlight in it. That is a great time to pull out the Dodge tool and add some specific light to the image.",[925,155569,155570],{},"These tools will be taking a regular part in your toolbox when it comes to enhancing image.",{"title":998,"searchDepth":1012,"depth":1012,"links":155572},[155573,155578,155579],{"id":155455,"depth":1012,"text":155436,"children":155574},[155575,155576,155577],{"id":50647,"depth":1047,"text":50664},{"id":155481,"depth":1047,"text":155472},{"id":155496,"depth":1047,"text":155497},{"id":155518,"depth":1012,"text":155442},{"id":155527,"depth":1012,"text":155448,"children":155580},[155581],{"id":155551,"depth":1047,"text":155552},"2013-08-15","\u002Fimages\u002Fblog\u002Ffeatures\u002Fdodge-burn-and-sponge-tools-in-photoshop-cs6.jpg",{},{"title":164,"description":166},"blog\u002Fdodge-burn-and-sponge-tools-in-photoshop-cs6",[9,89,112],"OzIqhzYLwXOOI0CXjT3-2icEm8xfEjPrlVML692WqyQ",{"id":155590,"title":835,"author":920,"body":155591,"date":155731,"description":837,"extension":1591,"image":155732,"meta":155733,"navigation":1050,"path":836,"seo":155734,"stem":155735,"tags":155736,"__hash__":155737},"blog\u002Fblog\u002Fthe-most-expensive-cameras-in-the-world.md",{"type":922,"value":155592,"toc":155723},[155593,155596,155600,155605,155611,155614,155617,155620,155624,155630,155635,155638,155641,155645,155651,155656,155659,155662,155666,155671,155676,155679,155682,155686,155691,155696,155699,155702,155706,155712,155717,155720],[925,155594,155595],{},"This also has led to targeting products to the luxury and prestige market. The cameras we are discussing here are not particulary exceptional when it comes to value for money, but it is more you pay for the brand than the value. Here we are discussing the most expensive cameras in the world.",[953,155597,155599],{"id":155598},"hasselblad-h4d-200ms","Hasselblad H4D-200MS",[925,155601,155602],{},[963,155603],{"alt":155599,"src":155604},"\u002Fimages\u002Fblog\u002F2013-10-12-the-most-expensive-cameras-in-the-world\u002Fhasselblad_h4d-200ms.jpeg",[925,155606,155607,155610],{},[1107,155608,155609],{},"Price"," $35,995.00",[925,155612,155613],{},"The Hasselblad H4D-200MS Medium Format DSLR Camera** must be the top of them all. Built on the 50 MP  H4D-50MS model, with multi-shot capture technology which renders a high-resolution monster 200MP photos. This camera takes 6 shots to produce extraordinary high-quality images.",[925,155615,155616],{},"The 50MP sensor is mounted onto the Hasselblad patented symmetrical multi-shot frame, which positions the sensor with sub-micron accuracy using piezo-electrical actuators. Bayer-patterned pixels are used to create the 200MP capture.",[925,155618,155619],{},"The H4D-200MS also captures in normal single-shot, at 50MP for live subjects, and in multi-shot capture for 50MP, with 4 shots, for increased detail of still subjects. It features a large, 3\" (7.6 cm) TFT LCD with 24-bit color and a 230,400-pixel resolution.",[953,155621,155623],{"id":155622},"mamiya-leaf-credo-80mp-digital-slr-camerakit","Mamiya Leaf Credo 80MP Digital SLR Camera Kit",[925,155625,155626],{},[963,155627],{"alt":155628,"src":155629},"Mamiya Leaf","\u002Fimages\u002Fblog\u002F2013-10-12-the-most-expensive-cameras-in-the-world\u002Fmamiya_leaf_body-fsl_lens-102968.png",[925,155631,155632,155634],{},[1107,155633,155609],{}," $37,995.00",[925,155636,155637],{},"Targeted to the high-end market, Mamiya 645DF+ camera combined with Leaf Credo backs offers an enhanced auto-focus mechanism delivering accurately focused images, even when shooting in low light or low contrast environments.",[925,155639,155640],{},"To deal with focus critical captures in difficult environments, an all-new custom adjustment feature was introduced to fine tune the alignment of the camera body to its digital back.\nAll new high-powered rechargeable Li-ion battery, enables up to 10,000 captures on a single charge. You could use Mamiya digital focal plane lenses, Hasselblad V lenses, or Schneider-Kreuznach leaf shutter lenses.",[953,155642,155644],{"id":155643},"leica-s2-p-camera","Leica S2-P Camera",[925,155646,155647],{},[963,155648],{"alt":155649,"src":155650},"Leica S2-P","\u002Fimages\u002Fblog\u002F2013-10-12-the-most-expensive-cameras-in-the-world\u002Fad8e0fb2-1953-4e5b-9a1f-9f387ff6c11b.jpg",[925,155652,155653,155655],{},[1107,155654,155609],{}," $30,000",[925,155657,155658],{},"Popular among professional photographers, the Leica S2-P model targeted for those who are interested in outdoor photography. With 37.5 MP 30x45 image sensor, it takes S-System lenses. It is waterproof and dustproof with a scratch resistant Sapphire LCD Cover, and the battery has an extremely long life.",[925,155660,155661],{},"It offers excellent imaging quality along with the usual Leica outputs of sharp and clear color in the pictures, this model has indeed become the camera of choice for those on the road.",[953,155663,155665],{"id":155664},"pentax-645d","Pentax 645D",[925,155667,155668],{},[963,155669],{"alt":155665,"src":155670},"\u002Fimages\u002Fblog\u002F2013-10-12-the-most-expensive-cameras-in-the-world\u002Fpentax_645d_lens-fsr-57991.png",[925,155672,155673,155675],{},[1107,155674,155609],{}," $8799.95",[925,155677,155678],{},"Depending on the type of photographer you are, the Pentax 645Dcould be a dream camera. Not ideal for event photographers though, as the 40-megapixel camera isn't a high ISO monster, can't record video, and doesn't fire off shots in rapid succession. But if you're into studio portraits or landscapes, the weather-sealed 645D  may be right camera for you.",[925,155680,155681],{},"It represents a relatively inexpensive path into medium-format digital photography, as the similar Hasselblad H4D-40 and the Leica S2 are relatively highly expensive.",[953,155683,155685],{"id":155684},"nikon-d3x","Nikon D3X",[925,155687,155688],{},[963,155689],{"alt":155685,"src":155690},"\u002Fimages\u002Fblog\u002F2013-10-12-the-most-expensive-cameras-in-the-world\u002Fnikon_d3x_cad.png",[925,155692,155693,155695],{},[1107,155694,155609],{}," $7,999.95",[925,155697,155698],{},"Nikon D3X is a professional-grade full-frame camera with** **a 24.5-megapixel, FX-format (35.9 x 24.0mm) CMOS sensor , and it's pricier than D4  the latest of the professional-grade camera which only has a resolution of 16.2 megapixels, but only 5 frames per second, instead of 's 11 fps, but has a longer battery life of 4400 shots.",[925,155700,155701],{},"It offers 100% viewfinder coverage and a tough and durable alloy body**.** It features two CF card slots.",[953,155703,155705],{"id":155704},"canon-eos-1d-x","Canon EOS-1D X",[925,155707,155708],{},[963,155709],{"alt":155710,"src":155711},"Canon EOS","\u002Fimages\u002Fblog\u002F2013-10-12-the-most-expensive-cameras-in-the-world\u002FElegant-Canon-Eos-1dx-Lens-Wallpaper.png",[925,155713,155714,155716],{},[1107,155715,155609],{}," $6,799",[925,155718,155719],{},"Canon’s new flagship in the Pro DSLR range, the Canon EOS1Dx with an 18 megapixel Full-Frame CMOS sensor, 61 Autofocus points and dual DIG!C 5 Processors. This means high-resolution images with extremely fast shooting capable of 12 frames per second as well as Full HD Video for 29 minutes and 59 seconds.",[925,155721,155722],{},"The 1Dx also has 2 CF card slots, which can be used to store your data in several different ways; as overflow, one for RAW and one for JPEG, or one for Photos and one for Video.",{"title":998,"searchDepth":1012,"depth":1012,"links":155724},[155725,155726,155727,155728,155729,155730],{"id":155598,"depth":1012,"text":155599},{"id":155622,"depth":1012,"text":155623},{"id":155643,"depth":1012,"text":155644},{"id":155664,"depth":1012,"text":155665},{"id":155684,"depth":1012,"text":155685},{"id":155704,"depth":1012,"text":155705},"2013-08-12","\u002Fimages\u002Fblog\u002Ffeatures\u002Fthe-most-expensive-cameras-in-the-world.jpg",{},{"title":835,"description":837},"blog\u002Fthe-most-expensive-cameras-in-the-world",[89],"dk3XIal5uu3X926_AMusvjAM-j4aumNvcT0oNny-Tu8",{"id":155739,"title":475,"author":920,"body":155740,"date":155935,"description":477,"extension":1591,"image":155936,"meta":155937,"navigation":1050,"path":476,"seo":155938,"stem":155939,"tags":155940,"__hash__":155941},"blog\u002Fblog\u002Fios-7-design-guidelines.md",{"type":922,"value":155741,"toc":155919},[155742,155745,155759,155770,155774,155778,155784,155788,155791,155796,155800,155803,155809,155813,155816,155821,155825,155828,155832,155835,155840,155844,155847,155852,155856,155859,155862,155868,155872,155875,155881,155885,155888,155893,155897,155900,155906,155910,155913],[925,155743,155744],{},"Here are the changes to the way you present your content.",[925,155746,155747,155750,155751,155754,155755,155758],{},[1107,155748,155749],{},"Deference"," - UI should not compete with content. It should help the user to understand the content.\n",[1107,155752,155753],{},"Clarity"," -Legible text in anysize, precise and lucid icons, subtle adornments, and functionality focused design.\n",[1107,155756,155757],{},"Depth"," - Visual layers and realistic motion guiding user understanding. Whether you are creating a new app orredesigning an existing one, follow how iOS 7 design guidelinesapproached the redesign of the built-in apps:",[1530,155760,155761,155764,155767],{},[974,155762,155763],{},"First, strip away the UI to expose the app’s core functionality and reaffirm its relevance.",[974,155765,155766],{},"Next, use the themes of iOS 7 to inform the design of the UI and the user experience.Restore details and embellishments with care and never gratuitously.",[974,155768,155769],{},"Throughout, be prepared to defy precedent, question assumptions, and let a focus on content and functionality motivate every design decision.",[953,155771,155773],{"id":155772},"display-changes","Display changes",[1655,155775,155777],{"id":155776},"_1-the-grid-system","1. The Grid System",[925,155779,155780],{},[963,155781],{"alt":155782,"src":155783},"iOS 7 Grid System","\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002F65dcf483-ff5c-4e80-a20d-0e245cded82f.jpg",[1655,155785,155787],{"id":155786},"_2-tables-lists","2. Tables \u002FLists",[925,155789,155790],{},"Tables, no longer have a container and uses the full width of the display now. Only the table headers are different from the context with different color highlighting the heading. Table items have a padding of 15pt either side, separated by a 1px line, margin 15pt to the left side and connect directly with the right side of the screen.",[925,155792,155793],{},[963,155794],{"alt":80747,"src":155795},"\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Ff1909f6b-da09-4e82-b286-48d4a73ac021.jpg",[1655,155797,155799],{"id":155798},"_3-layers","3. Layers",[925,155801,155802],{},"The new translucent UI layout consists of several different layers in one screen. allowing you to align navigation and tab bar views with a custom view hierarchy to create a new interface. .",[925,155804,155805],{},[963,155806],{"alt":155807,"src":155808},"Layers","\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Flayers.jpg",[1655,155810,155812],{"id":155811},"_4-navigation-status-bars-menus","4. Navigation, Status Bars Menus",[925,155814,155815],{},"Navigation bar includes a title, basic navigation and action buttons. The height of the navigation bar is shrunk to 32pt in landscape orientationto show more content below.",[925,155817,155818],{},[963,155819],{"alt":155807,"src":155820},"\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Fnavbar.png",[1655,155822,155824],{"id":155823},"_5-icons","5. Icons",[925,155826,155827],{},"Icons have gone borderless. They are resizable for different screen sizes for example landscape vs portrait. iPad vs iPhone.",[953,155829,155831],{"id":155830},"take-advantage-of-the-whole-screen-in-your-design","Take advantage of the whole screen in your design",[925,155833,155834],{},"With the new transparent status bar, and the removal of insets and visual frames revealing more room, nowyou can extend the content to the edges of the screen. On screen keyboard, which hides part of the screen has been removed, and the hierarchical elements displayed in an translucentmanner, conveying content awareness.",[925,155836,155837],{},[963,155838],{"alt":155807,"src":155839},"\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Fdesign_refined.jpg",[953,155841,155843],{"id":155842},"realism-and-visual-indicators-or-skeuomorphism-is-discouraged","Realism and visual indicators or Skeuomorphism is discouraged",[925,155845,155846],{},"Apple discourages the use of bevelled elements, gradients, and drop shadows. Skeuomorphism leads to \"heavier UI elements that can overpower or compete with the content\". Apple encourages to focus on the content with the UI playing a supporting role.",[925,155848,155849],{},[963,155850],{"alt":155807,"src":155851},"\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Fdesign_see_screen_gamecenter.jpg",[953,155853,155855],{"id":155854},"depth-to-communicate-hierarchy","Depth to communicate hierarchy",[925,155857,155858],{},"Distinct and functional layers help create depth and establish hierarchy and order. The use of translucency provides a sense of context and place. And new approaches to animation and motion make even the simplest tasks more engaging.",[925,155860,155861],{},"Of course, Apple would like designers to adopt the same approach to authoring apps, making use of transparency and transitions to help communicate hierarchical position.It's a big leap in the way we think about app design, but it's probably won't be long before users of iOS7 start to expect it.",[925,155863,155864],{},[963,155865],{"alt":155866,"src":155867},"iOS 7 Hierarchy","\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Fhierarchy.png",[953,155869,155871],{"id":155870},"more-white-space","More white space",[925,155873,155874],{},"More white space helps to reduce the clutter and improve the clarity by exposing content and functionality. Apple iOS 7 design guidelines emphasize on creating apps with simplicity and plenty of negative space.",[925,155876,155877],{},[963,155878],{"alt":155879,"src":155880},"iOS 7 More White Space","\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Fdesign_see_screen_contacts.jpg",[953,155882,155884],{"id":155883},"meaningful-colors-for-the-ui","Meaningful Colors for the UI",[925,155886,155887],{},"A theme of system colors, that work well with dark and light backgrounds, provide a meaningful visual cue for the built-in apps like yellow in Notes.",[925,155889,155890],{},[963,155891],{"alt":155807,"src":155892},"\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Fdesign_see_screen_notes.jpg",[953,155894,155896],{"id":155895},"dynamic-system-fonts","Dynamic system fonts",[925,155898,155899],{},"iOS 7 dynamic system fonts adjust letter spacing, font-weight and line height, enhancing readability at any size. For system or custom fonts, choose Dynamic Type so the app will respond to any text size. The updated Weather app for iOS 7 has the all-new dynamic type system with a full-screen view.",[925,155901,155902],{},[963,155903],{"alt":155904,"src":155905},"iOS 7 Dynamic System Fonts","\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Fweather.jpg",[953,155907,155909],{"id":155908},"borderless-buttons","Borderless Buttons",[925,155911,155912],{},"In iOS 7, buttons have been simplified to look simple with one color, borderless and explaining context to indicate interactivity. All bar buttons are borderless.And when it makes sense, a content-area button can display a thin border or tinted background that makes it distinctive. In the Messages app, the navigation bar, contact and send buttons have been replaced with text labels.",[925,155914,155915],{},[963,155916],{"alt":155917,"src":155918},"Simple screen","\u002Fimages\u002Fblog\u002F2013-10-03-ios-7-design-guidelines\u002Fdesign_simple_screen_mail2.jpg",{"title":998,"searchDepth":1012,"depth":1012,"links":155920},[155921,155928,155929,155930,155931,155932,155933,155934],{"id":155772,"depth":1012,"text":155773,"children":155922},[155923,155924,155925,155926,155927],{"id":155776,"depth":1047,"text":155777},{"id":155786,"depth":1047,"text":155787},{"id":155798,"depth":1047,"text":155799},{"id":155811,"depth":1047,"text":155812},{"id":155823,"depth":1047,"text":155824},{"id":155830,"depth":1012,"text":155831},{"id":155842,"depth":1012,"text":155843},{"id":155854,"depth":1012,"text":155855},{"id":155870,"depth":1012,"text":155871},{"id":155883,"depth":1012,"text":155884},{"id":155895,"depth":1012,"text":155896},{"id":155908,"depth":1012,"text":155909},"2013-08-03","\u002Fimages\u002Fblog\u002Ffeatures\u002Fios-7-design-guidelines.jpg",{},{"title":475,"description":477},"blog\u002Fios-7-design-guidelines",[16,9,479],"qh5JbwyuTbf7tR4Hyhw1u9--DNZs2FZ7KBedn7MwaSE",{"id":155943,"title":433,"author":920,"body":155944,"date":156139,"description":435,"extension":1591,"image":156140,"meta":156141,"navigation":1050,"path":434,"seo":156142,"stem":156143,"tags":156144,"__hash__":156145},"blog\u002Fblog\u002Finstall-d-link-dwa-125-wireless-driver-on-linux.md",{"type":922,"value":155945,"toc":156130},[155946,155950,155953,155957,155960,155963,155980,155984,155987,155990,155992,155998,156002,156009,156012,156018,156021,156027,156030,156043,156046,156058,156061,156073,156080,156086,156090,156093,156108,156111,156115,156118,156124,156127],[953,155947,155949],{"id":155948},"kernel-upgrade","Kernel Upgrade",[925,155951,155952],{},"If your DLink DWA-125 stops working after a kernel upgrade, you will have to reinstall from source code, by compiling for the new kernel version. Follow the instructions below.",[953,155954,155956],{"id":155955},"permissions","Permissions",[925,155958,155959],{},"To run the commands described here, you need to have sudo access. Also, if you don’t have build-essential package installed, please install it.",[925,155961,155962],{},"Enter the following command in the terminal.",[993,155964,155966],{"className":1797,"code":155965,"language":1799,"meta":998,"style":998},"sudo apt-get install build-essential\n",[941,155967,155968],{"__ignoreMap":998},[1002,155969,155970,155972,155975,155977],{"class":1004,"line":1005},[1002,155971,146429],{"class":1026},[1002,155973,155974],{"class":1034}," apt-get",[1002,155976,27349],{"class":1034},[1002,155978,155979],{"class":1034}," build-essential\n",[953,155981,155983],{"id":155982},"download-source","Download source",[925,155985,155986],{},"First, get the source code. The source code is available from Ralink, but if you have trouble finding the right part, download it from TwiCore’s mirror using this link.",[925,155988,155989],{},"Extract the downloaded zip file to a suitable location.",[953,155991,28562],{"id":28561},[925,155993,155994,155995,948],{},"For the purpose of this documentation, let’s assume the Ubuntu username to be user and the path to the folder where the zip file was extracted to be ",[941,155996,155997],{},"~\u002Fsource\u002Fdwa-125",[953,155999,156001],{"id":156000},"edit-configuration","Edit configuration",[925,156003,156004,156005,156008],{},"Edit the file ",[941,156006,156007],{},"~\u002Fsource\u002Fdwa-125\u002Fos\u002Flinux\u002Fconfig.mk"," and change the following values:",[925,156010,156011],{},"line 56",[993,156013,156016],{"className":156014,"code":156015,"language":24241},[24239],"# Support Wpa_Supplicant\nHAS_WPA_SUPPLICANT=y\nline 59\n",[941,156017,156015],{"__ignoreMap":998},[925,156019,156020],{},"Support Native WpaSupplicant for Network Manager:",[993,156022,156025],{"className":156023,"code":156024,"language":24241},[24239],"HAS_NATIVE_WPA_SUPPLICANT_SUPPORT=y\n",[941,156026,156024],{"__ignoreMap":998},[925,156028,156029],{},"Open a terminal and change directory:",[993,156031,156033],{"className":1797,"code":156032,"language":1799,"meta":998,"style":998},"cd ~\u002Fsource\u002Fdwa-125\n",[941,156034,156035],{"__ignoreMap":998},[1002,156036,156037,156040],{"class":1004,"line":1005},[1002,156038,156039],{"class":1019},"cd",[1002,156041,156042],{"class":1034}," ~\u002Fsource\u002Fdwa-125\n",[925,156044,156045],{},"Run \"make\" :",[993,156047,156049],{"className":1797,"code":156048,"language":1799,"meta":998,"style":998},"sudo make\n",[941,156050,156051],{"__ignoreMap":998},[1002,156052,156053,156055],{"class":1004,"line":1005},[1002,156054,146429],{"class":1026},[1002,156056,156057],{"class":1034}," make\n",[925,156059,156060],{},"sudo “make install” :",[993,156062,156064],{"className":1797,"code":156063,"language":1799,"meta":998,"style":998},"make install\n",[941,156065,156066],{"__ignoreMap":998},[1002,156067,156068,156070],{"class":1004,"line":1005},[1002,156069,13435],{"class":1026},[1002,156071,156072],{"class":1034}," install\n",[925,156074,156075,156076,156079],{},"Blacklist unnecessary drivers\nEdit ",[941,156077,156078],{},"\u002Fetc\u002Fmodprobe.d\u002Fblacklist.conf"," and add these lines:",[993,156081,156084],{"className":156082,"code":156083,"language":24241},[24239],"blacklist rt2x00usb\nblacklist rt2x00lib\nblacklist rt2800usb\n",[941,156085,156083],{"__ignoreMap":998},[953,156087,156089],{"id":156088},"activate-driver-module","Activate driver module",[925,156091,156092],{},"For Ubuntu 11.10, you might to use RT5370STA instead of RT3070STA as mentioned by flbiggs. So here’s the command you need to get the module activated and to bring up the DWA-125 wireless device:",[993,156094,156096],{"className":1797,"code":156095,"language":1799,"meta":998,"style":998},"sudo modprobe rt5370sta\n",[941,156097,156098],{"__ignoreMap":998},[1002,156099,156100,156102,156105],{"class":1004,"line":1005},[1002,156101,146429],{"class":1026},[1002,156103,156104],{"class":1034}," modprobe",[1002,156106,156107],{"class":1034}," rt5370sta\n",[925,156109,156110],{},"This should bring up the wireless adapter and network manager should start scanning and detect available wireless networks.",[953,156112,156114],{"id":156113},"make-driver-load-on-startup","Make driver load on startup",[925,156116,156117],{},"Edit \u002Fetc\u002Fmodules and add this line:",[993,156119,156122],{"className":156120,"code":156121,"language":24241},[24239],"rt5370sta\n",[941,156123,156121],{"__ignoreMap":998},[925,156125,156126],{},"This should activate the DWA-125 wireless device every time you turn on the computer.",[1579,156128,156129],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":998,"searchDepth":1012,"depth":1012,"links":156131},[156132,156133,156134,156135,156136,156137,156138],{"id":155948,"depth":1012,"text":155949},{"id":155955,"depth":1012,"text":155956},{"id":155982,"depth":1012,"text":155983},{"id":28561,"depth":1012,"text":28562},{"id":156000,"depth":1012,"text":156001},{"id":156088,"depth":1012,"text":156089},{"id":156113,"depth":1012,"text":156114},"2013-07-14","\u002Fimages\u002Fblog\u002Ffeatures\u002Finstall-d-link-dwa-125-wireless-driver-on-linux.jpg",{},{"title":433,"description":435},"blog\u002Finstall-d-link-dwa-125-wireless-driver-on-linux",[361,362],"Lsn4Qkd4bPGuPw2vUCO3cJJzOMwf5REpa94hJEb7FzI",{"id":156147,"title":568,"author":920,"body":156148,"date":156632,"description":570,"extension":1591,"image":156633,"meta":156634,"navigation":1050,"path":569,"seo":156635,"stem":156636,"tags":156637,"__hash__":156638},"blog\u002Fblog\u002Fnet-framework-qna.md",{"type":922,"value":156149,"toc":156614},[156150,156160,156163,156169,156175,156179,156182,156186,156189,156192,156197,156200,156205,156212,156216,156219,156222,156225,156229,156236,156239,156248,156252,156255,156258,156265,156269,156272,156275,156289,156293,156296,156304,156308,156311,156325,156335,156340,156344,156354,156360,156368,156458,156472,156477,156482,156487,156490,156493,156591,156595,156598,156601,156612],[953,156151,156153,156154,944,156157],{"id":156152},"the-differences-between-thedisposeandfinalize","The differences between the ",[941,156155,156156],{},"Dispose()",[941,156158,156159],{},"Finalize()",[925,156161,156162],{},"CLR uses the Dispose and Finalize methods to perform garbage collection of run-time objects of .NET applications.",[925,156164,3295,156165,156168],{},[1107,156166,156167],{},"Finalize"," method is called automatically by the runtime. CLR has a garbage collector (GC), which periodically checks for objects in heap that are no longer referenced by any object or program. It calls the Finalize method to free the memory used by such objects.",[925,156170,3295,156171,156174],{},[1107,156172,156173],{},"Dispose"," method is called by the programmer. Dispose is another method to release the memory used by an object. The Dispose method needs to be explicitly called in code to dereference an object from the heap. The Dispose method can be invoked only by the classes that implement the IDisposable interface.",[953,156176,156178],{"id":156177},"what-is-code-access-security-cas","What is code access security (CAS)?",[925,156180,156181],{},"Code access security (CAS) is part of the .NET security model that prevents unauthorized access of resources and operations, and restricts the code to perform particular tasks.",[953,156183,156185],{"id":156184},"how-can-you-turn-on-and-turn-off-cas","How can you turn-on and turn-off CAS?  ",[925,156187,156188],{},"You can use the Code Access Security Tool (Caspol.exe) to turn security on and off.",[925,156190,156191],{},"To turn off security, type the following command at the command prompt:",[925,156193,156194],{},[941,156195,156196],{},"caspol -security off",[925,156198,156199],{},"To turn on security, type the following command at the command prompt:",[925,156201,156202],{},[941,156203,156204],{},"caspol -security on",[925,156206,156207,156208,156211],{},"In the .NET Framework 4.0, for using Caspol.exe, you first need to set the ",[941,156209,156210],{},"\u003CLegacyCasPolicy>"," element to true.",[953,156213,156215],{"id":156214},"differences-between-managed-and-unmanaged-code","Differences between managed and unmanaged Code",[925,156217,156218],{},"Managed code is the code that is executed directly by the CLR instead of the operating system. The code compiler first compiles the managed code to intermediate language (IL) code, also called as MSIL code. This code doesn't depend on machine configurations and can be executed on different machines.",[925,156220,156221],{},"Unmanaged code is the code that is executed directly by the operating system outside the CLR environment. It is directly compiled to native machine code which depends on the machine configuration.",[925,156223,156224],{},"In the managed code, since the execution of the code is governed by CLR, the runtime provides different services, such as garbage collection, type checking, exception handling, and security support. These services help provide uniformity in platform and language-independent behavior of managed code applications. In the unmanaged code, the allocation of memory, type safety, and security is required to be taken care of by the developer. If the unmanaged code is not properly handled, it may result in memory leak. Examples of unmanaged code are ActiveX components and Win32 APIs that execute beyond the scope of native CLR.",[953,156226,156228],{"id":156227},"what-are-tuples","What are tuples?",[925,156230,156231,156232,156235],{},"Tuple is a ",[1107,156233,156234],{},"fixed-size collection"," that can have elements of either same or different data types.  \nSimilar to arrays, a user must have to specify the size of a tuple at the time of declaration.",[925,156237,156238],{},"Tuples are allowed to hold up from 1 to 8 elements and if there are more than 8 elements, then the 8th element can be defined as another tuple.",[925,156240,156241,156242,16529,156244,156247],{},"Tuples can be specified as ",[1107,156243,17034],{},[1107,156245,156246],{},"return type"," of a method.",[953,156249,156251],{"id":156250},"what-is-garbage-collection-what-is-the-difference-between-garbage-collections-in-net-40-and-earlier-versions","What is garbage collection? What is the difference between garbage collections in .NET 4.0 and earlier versions.",[925,156253,156254],{},"Garbage collection prevents memory leaks during execution of programs.",[925,156256,156257],{},"Garbage collector is a low-priority process that manages the allocation and deallocation of memory for your application. It checks for the unreferenced variables and objects. If GC finds any object that is no longer used by the application, it frees up the memory from that object.",[925,156259,156260,156261,156264],{},"GC has changed a bit with the introduction of .NET 4.0. In .NET 4.0, the GC.Collect() method contains the following overloaded methods: ",[941,156262,156263],{},"GC.Collect(int), GC.Collect(int, GCCollectionMode)"," Another new feature introduced in .NET is to notify you when the GC.Collect() method is invoked and completed successfully by using different methods.  .NET 4.0 supports a new background garbage collection that replaces the concurrent garbage collection used in earlier versions.        This concurrent GC allocates memory while running and uses current segment (which is 16 MB on a workstation) for that. After that, all threads are suspended. In case of background GC, a separate ephemeral GC - gen0 and gen1 can be started, while the full GC - gen0, 1, and 2 - is already running.",[953,156266,156268],{"id":156267},"how-does-cas-work","How does CAS work?",[925,156270,156271],{},"There are two key concepts of CAS security policy-code groups and permission**s. A code group contains assemblies in it in a manner that each .NET assembly is related to a particular code group and some permissions are granted to each code group. For example, using the default security policy, a control downloaded from a Web site belongs to the Zone, Internet code group, which adheres to the permissions defined by the named permission set. (Normally, the named permission set represents a very restrictive range of permissions.)",[925,156273,156274],{},"Assembly execution involves the following steps:",[1530,156276,156277,156280,156283,156286],{},[974,156278,156279],{},"Evidences are gathered about assembly.",[974,156281,156282],{},"Depending on the gathered evidences, the assembly is assigned to a code group.",[974,156284,156285],{},"Security rights are allocated to the assembly, depending on the code group.",[974,156287,156288],{},"Assembly runs as per the rights assigned to it.",[953,156290,156292],{"id":156291},"what-is-difference-between-namespace-and-assembly","What is difference between NameSpace and Assembly?",[925,156294,156295],{},"Following are the differences between namespace and assembly:",[1530,156297,156298,156301],{},[974,156299,156300],{},"Assembly is physical grouping of logical units, Namespace, logically groups classes.",[974,156302,156303],{},"Namespace can span multiple assemblies",[953,156305,156307],{"id":156306},"mention-the-execution-process-for-managed-code","Mention the execution process for managed code.",[925,156309,156310],{},"A piece of managed code is executed as follows:",[1530,156312,156313,156316,156319,156322],{},[974,156314,156315],{},"Choosing a language compiler",[974,156317,156318],{},"Compiling the code to MSIL",[974,156320,156321],{},"Compiling MSIL to native code",[974,156323,156324],{},"Executing the code.",[953,156326,156328,156329,2034,156332,24117],{"id":156327},"what-is-the-difference-between-linq-query-syntax-and-method-syntax","What is the difference between LINQ ",[1107,156330,156331],{},"Query syntax",[1107,156333,156334],{},"Method syntax",[971,156336,156337],{},[974,156338,156339],{},"Query expression must be translated into method syntax at the compiled time (deferred execution), but Method expressions get called immediately.\n2. Query syntax is more readable and concise than the Method syntax.\n3. Not every  LINQ operator is available in Query syntax",[953,156341,156343],{"id":156342},"what-is-a-function-predicate","What is a Function predicate?",[925,156345,20721,156346,156349,156350,14928,156352,948],{},[1107,156347,156348],{},"predicate"," is a function that returns ",[941,156351,17397],{},[941,156353,19341],{},[925,156355,20721,156356,156359],{},[1107,156357,156358],{},"predicate delegate"," is a reference to a predicate.",[925,156361,156362,156363,14928,156365,156367],{},"So basically a predicate delegate is a reference to a function that returns ",[941,156364,17397],{},[941,156366,19341],{},".\nPredicates are very useful for filtering a list of values.",[993,156369,156371],{"className":130760,"code":156370,"language":184,"meta":998,"style":998},"using System;\nusing System.Collections.Generic;\n\nclass Program\n{\n static void Main()\n {\n List\u003Cint> list = new List\u003Cint> { 1, 2, 3 };\n\n Predicate\u003Cint> predicate = new Predicate\u003Cint>(greaterThanTwo);\n\n List\u003Cint> newList = list.FindAll(predicate);\n }\n\n static bool greaterThanTwo(int arg)\n {\n return arg > 2;\n }\n}\n",[941,156372,156373,156378,156383,156387,156392,156396,156401,156405,156410,156414,156419,156423,156428,156432,156436,156441,156445,156450,156454],{"__ignoreMap":998},[1002,156374,156375],{"class":1004,"line":1005},[1002,156376,156377],{},"using System;\n",[1002,156379,156380],{"class":1004,"line":1012},[1002,156381,156382],{},"using System.Collections.Generic;\n",[1002,156384,156385],{"class":1004,"line":1047},[1002,156386,1051],{"emptyLinePlaceholder":1050},[1002,156388,156389],{"class":1004,"line":1054},[1002,156390,156391],{},"class Program\n",[1002,156393,156394],{"class":1004,"line":1060},[1002,156395,1129],{},[1002,156397,156398],{"class":1004,"line":1272},[1002,156399,156400],{}," static void Main()\n",[1002,156402,156403],{"class":1004,"line":1348},[1002,156404,91266],{},[1002,156406,156407],{"class":1004,"line":1354},[1002,156408,156409],{}," List\u003Cint> list = new List\u003Cint> { 1, 2, 3 };\n",[1002,156411,156412],{"class":1004,"line":1360},[1002,156413,1051],{"emptyLinePlaceholder":1050},[1002,156415,156416],{"class":1004,"line":1366},[1002,156417,156418],{}," Predicate\u003Cint> predicate = new Predicate\u003Cint>(greaterThanTwo);\n",[1002,156420,156421],{"class":1004,"line":1946},[1002,156422,1051],{"emptyLinePlaceholder":1050},[1002,156424,156425],{"class":1004,"line":1956},[1002,156426,156427],{}," List\u003Cint> newList = list.FindAll(predicate);\n",[1002,156429,156430],{"class":1004,"line":1961},[1002,156431,2014],{},[1002,156433,156434],{"class":1004,"line":1971},[1002,156435,1051],{"emptyLinePlaceholder":1050},[1002,156437,156438],{"class":1004,"line":1980},[1002,156439,156440],{}," static bool greaterThanTwo(int arg)\n",[1002,156442,156443],{"class":1004,"line":1985},[1002,156444,91266],{},[1002,156446,156447],{"class":1004,"line":1995},[1002,156448,156449],{}," return arg > 2;\n",[1002,156451,156452],{"class":1004,"line":2006},[1002,156453,2014],{},[1002,156455,156456],{"class":1004,"line":2011},[1002,156457,1170],{},[953,156459,156461,156462,1251,156465,156468,156469,24117],{"id":156460},"what-is-anaction-func-and-predicate","What is an ",[1107,156463,156464],{},"Action",[1107,156466,156467],{},"Func"," and  ",[1107,156470,156471],{},"Predicate",[925,156473,156474,156476],{},[1107,156475,156464],{}," is a delegate (pointer) to a method, that takes zero, one or more input parameters, but does not return anything.",[925,156478,156479,156481],{},[1107,156480,156467],{}," is a delegate (pointer) to a method, that takes zero, one or more input parameters, and returns a value (or refence).",[925,156483,156484,156486],{},[1107,156485,156471],{}," is a special kind of Func often used for comparisons, returning a boolean.",[925,156488,156489],{},"Though widely used with Linq, Action and Func are concepts logically independent of Linq. C++ already contained the basic concept in form of typed function pointers.",[925,156491,156492],{},"Here is a small example for Action and Func without using Linq:",[993,156494,156496],{"className":130760,"code":156495,"language":184,"meta":998,"style":998},"class Program\n{\n static void Main(string[] args)\n {\n Action\u003Cint> myAction = new Action\u003Cint>(DoSomething);\n myAction.Invoke(123); \u002F\u002F Prints out \"123\"\n\n Func\u003Cint, double> myFunc = new Func\u003Cint, double>(CalculateSomething);\n Console.WriteLine(myFunc(5)); \u002F\u002F Prints out \"2.5\"\n }\n\n static void DoSomething(int i)\n {\n Console.WriteLine(i);\n }\n\n static double CalculateSomething(int i)\n {\n return (double)i\u002F2;\n }\n}\n",[941,156497,156498,156502,156506,156511,156515,156520,156525,156529,156534,156539,156543,156547,156552,156556,156561,156565,156569,156574,156578,156583,156587],{"__ignoreMap":998},[1002,156499,156500],{"class":1004,"line":1005},[1002,156501,156391],{},[1002,156503,156504],{"class":1004,"line":1012},[1002,156505,1129],{},[1002,156507,156508],{"class":1004,"line":1047},[1002,156509,156510],{}," static void Main(string[] args)\n",[1002,156512,156513],{"class":1004,"line":1054},[1002,156514,91266],{},[1002,156516,156517],{"class":1004,"line":1060},[1002,156518,156519],{}," Action\u003Cint> myAction = new Action\u003Cint>(DoSomething);\n",[1002,156521,156522],{"class":1004,"line":1272},[1002,156523,156524],{}," myAction.Invoke(123); \u002F\u002F Prints out \"123\"\n",[1002,156526,156527],{"class":1004,"line":1348},[1002,156528,1051],{"emptyLinePlaceholder":1050},[1002,156530,156531],{"class":1004,"line":1354},[1002,156532,156533],{}," Func\u003Cint, double> myFunc = new Func\u003Cint, double>(CalculateSomething);\n",[1002,156535,156536],{"class":1004,"line":1360},[1002,156537,156538],{}," Console.WriteLine(myFunc(5)); \u002F\u002F Prints out \"2.5\"\n",[1002,156540,156541],{"class":1004,"line":1366},[1002,156542,2014],{},[1002,156544,156545],{"class":1004,"line":1946},[1002,156546,1051],{"emptyLinePlaceholder":1050},[1002,156548,156549],{"class":1004,"line":1956},[1002,156550,156551],{}," static void DoSomething(int i)\n",[1002,156553,156554],{"class":1004,"line":1961},[1002,156555,91266],{},[1002,156557,156558],{"class":1004,"line":1971},[1002,156559,156560],{}," Console.WriteLine(i);\n",[1002,156562,156563],{"class":1004,"line":1980},[1002,156564,2014],{},[1002,156566,156567],{"class":1004,"line":1985},[1002,156568,1051],{"emptyLinePlaceholder":1050},[1002,156570,156571],{"class":1004,"line":1995},[1002,156572,156573],{}," static double CalculateSomething(int i)\n",[1002,156575,156576],{"class":1004,"line":2006},[1002,156577,91266],{},[1002,156579,156580],{"class":1004,"line":2011},[1002,156581,156582],{}," return (double)i\u002F2;\n",[1002,156584,156585],{"class":1004,"line":2017},[1002,156586,2014],{},[1002,156588,156589],{"class":1004,"line":2022},[1002,156590,1170],{},[953,156592,156594],{"id":156593},"what-is-a-delegate","What is a Delegate?",[925,156596,156597],{},"Object-oriented, type-safe function pointer.",[925,156599,156600],{},"Delegates the responsibility for an operation to another function. Defined with:",[1530,156602,156603,156606,156609],{},[974,156604,156605],{},"A named method",[974,156607,156608],{},"A delegate expression",[974,156610,156611],{},"A lambda expression (Unnamed, inline function)",[1579,156613,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":156615},[156616,156618,156619,156620,156621,156622,156623,156624,156625,156626,156628,156629,156631],{"id":156152,"depth":1012,"text":156617},"The differences between the Dispose() and Finalize()",{"id":156177,"depth":1012,"text":156178},{"id":156184,"depth":1012,"text":156185},{"id":156214,"depth":1012,"text":156215},{"id":156227,"depth":1012,"text":156228},{"id":156250,"depth":1012,"text":156251},{"id":156267,"depth":1012,"text":156268},{"id":156291,"depth":1012,"text":156292},{"id":156306,"depth":1012,"text":156307},{"id":156327,"depth":1012,"text":156627},"What is the difference between LINQ Query syntax and Method syntax?",{"id":156342,"depth":1012,"text":156343},{"id":156460,"depth":1012,"text":156630},"What is an Action, Func and  Predicate?",{"id":156593,"depth":1012,"text":156594},"2013-07-07","\u002Fimages\u002Fblog\u002Ffeatures\u002Fnet-framework-qna.jpg",{},{"title":568,"description":570},"blog\u002Fnet-framework-qna",[16,572],"QJkGeOW21KXcPhDwWQw46N8dCGH96UiW5WLtQBpj0cY",{"id":156640,"title":438,"author":920,"body":156641,"date":156948,"description":440,"extension":1591,"image":156949,"meta":156950,"navigation":1050,"path":439,"seo":156951,"stem":156952,"tags":156953,"__hash__":156954},"blog\u002Fblog\u002Finstalling-node-js.md",{"type":922,"value":156642,"toc":156940},[156643,156646,156650,156653,156657,156680,156684,156687,156702,156705,156814,156817,156827,156835,156839,156842,156845,156862,156865,156891,156898,156908,156914,156921,156925,156934,156937],[925,156644,156645],{},"There are two ways of installing Node.js on Mac\nDownload package from nodejs.org or download to one click install ing of Node.js and NPM.",[953,156647,156649],{"id":156648},"install-from-source","Install from source",[925,156651,156652],{},"To install from source you probably know what you are doing but this article might help.",[1655,156654,156656],{"id":156655},"install-homebrew","Install Homebrew",[993,156658,156660],{"className":1797,"code":156659,"language":1799,"meta":998,"style":998},"ruby -e \"$(curl -fsSL https:\u002F\u002Fraw.github.com\u002Fmxcl\u002Fhomebrew\u002Fgo)\"\n",[941,156661,156662],{"__ignoreMap":998},[1002,156663,156664,156666,156669,156672,156674,156677],{"class":1004,"line":1005},[1002,156665,124],{"class":1026},[1002,156667,156668],{"class":1019}," -e",[1002,156670,156671],{"class":1034}," \"$(",[1002,156673,50132],{"class":1026},[1002,156675,156676],{"class":1019}," -fsSL",[1002,156678,156679],{"class":1034}," https:\u002F\u002Fraw.github.com\u002Fmxcl\u002Fhomebrew\u002Fgo)\"\n",[953,156681,156683],{"id":156682},"install-nodejs-via-homebrew","Install Node.js via Homebrew",[925,156685,156686],{},"Once Homebrew is installed you can go ahead and install Node.js",[993,156688,156690],{"className":1797,"code":156689,"language":1799,"meta":998,"style":998},"brew install node\n",[941,156691,156692],{"__ignoreMap":998},[1002,156693,156694,156697,156699],{"class":1004,"line":1005},[1002,156695,156696],{"class":1026},"brew",[1002,156698,27349],{"class":1034},[1002,156700,156701],{"class":1034}," node\n",[925,156703,156704],{},"Now create a file called server.js and paste the server code",[993,156706,156708],{"className":995,"code":156707,"language":997,"meta":998,"style":998},"var http = require('http');\nhttp.createServer(function (req, res) {\n res.writeHead(200, {'Content-Type': 'text\u002Fplain'});\n res.end('Hello World\\n');}).listen(3000, \"127.0.0.1\");\n console.log('Server running at http:\u002F\u002F127.0.0.1:3000\u002F');\n}\n",[941,156709,156710,156726,156746,156767,156797,156810],{"__ignoreMap":998},[1002,156711,156712,156714,156716,156718,156720,156722,156724],{"class":1004,"line":1005},[1002,156713,18311],{"class":1015},[1002,156715,28246],{"class":1030},[1002,156717,2393],{"class":1015},[1002,156719,1027],{"class":1026},[1002,156721,1031],{"class":1030},[1002,156723,28255],{"class":1034},[1002,156725,1085],{"class":1030},[1002,156727,156728,156730,156732,156734,156736,156738,156740,156742,156744],{"class":1004,"line":1012},[1002,156729,111517],{"class":1030},[1002,156731,28355],{"class":1026},[1002,156733,1031],{"class":1030},[1002,156735,6965],{"class":1015},[1002,156737,6513],{"class":1030},[1002,156739,22159],{"class":2378},[1002,156741,1251],{"class":1030},[1002,156743,14985],{"class":2378},[1002,156745,2382],{"class":1030},[1002,156747,156748,156750,156752,156754,156756,156758,156760,156762,156765],{"class":1004,"line":1047},[1002,156749,14992],{"class":1030},[1002,156751,28398],{"class":1026},[1002,156753,1031],{"class":1030},[1002,156755,28403],{"class":1019},[1002,156757,90638],{"class":1030},[1002,156759,123344],{"class":1034},[1002,156761,1137],{"class":1030},[1002,156763,156764],{"class":1034},"'text\u002Fplain'",[1002,156766,2804],{"class":1030},[1002,156768,156769,156771,156773,156775,156778,156780,156782,156785,156787,156789,156791,156793,156795],{"class":1004,"line":1054},[1002,156770,14992],{"class":1030},[1002,156772,28424],{"class":1026},[1002,156774,1031],{"class":1030},[1002,156776,156777],{"class":1034},"'Hello World",[1002,156779,4636],{"class":1019},[1002,156781,14788],{"class":1034},[1002,156783,156784],{"class":1030},");}).",[1002,156786,22260],{"class":1026},[1002,156788,1031],{"class":1030},[1002,156790,20832],{"class":1019},[1002,156792,1251],{"class":1030},[1002,156794,40240],{"class":1034},[1002,156796,1085],{"class":1030},[1002,156798,156799,156801,156803,156805,156808],{"class":1004,"line":1060},[1002,156800,6977],{"class":1030},[1002,156802,2886],{"class":1026},[1002,156804,1031],{"class":1030},[1002,156806,156807],{"class":1034},"'Server running at http:\u002F\u002F127.0.0.1:3000\u002F'",[1002,156809,1085],{"class":1030},[1002,156811,156812],{"class":1004,"line":1272},[1002,156813,1170],{"class":1030},[925,156815,156816],{},"Save the file and from the console run.",[993,156818,156819],{"className":1797,"code":81990,"language":1799,"meta":998,"style":998},[941,156820,156821],{"__ignoreMap":998},[1002,156822,156823,156825],{"class":1004,"line":1005},[1002,156824,12108],{"class":1026},[1002,156826,28487],{"class":1034},[925,156828,156829,156830,156834],{},"Now you can visit ",[933,156831,156832],{"href":156832,"rel":156833},"http:\u002F\u002F127.0.0.1:3000\u002F",[937]," with your favorite browser and you are up and running with server side JavaScript.\nFurther more you can read the Node.js documentation if you want to learn more about what Node.js is and what you can do with it.",[953,156836,156838],{"id":156837},"installing-npm","Installing npm",[925,156840,156841],{},"Node.js provides low level, lightweight platform, so there are lot of modules created for Node. The  package manager for Node - npm will help you manage these.",[925,156843,156844],{},"Even though the package manager was recently removed from Homebrew, you'll need to install it manually.",[993,156846,156848],{"className":1797,"code":156847,"language":1799,"meta":998,"style":998},"curl https:\u002F\u002Fnpmjs.org\u002Finstall.sh | sh\n",[941,156849,156850],{"__ignoreMap":998},[1002,156851,156852,156854,156857,156859],{"class":1004,"line":1005},[1002,156853,50132],{"class":1026},[1002,156855,156856],{"class":1034}," https:\u002F\u002Fnpmjs.org\u002Finstall.sh",[1002,156858,17264],{"class":1015},[1002,156860,156861],{"class":1026}," sh\n",[925,156863,156864],{},"If executing scripts from curl doesn't sound good for you, you can download the source and then install:",[993,156866,156868],{"className":1797,"code":156867,"language":1799,"meta":998,"style":998},"git clone http:\u002F\u002Fgithub.com\u002Fisaacs\u002Fnpm.git\ncd npmsudo make install\n",[941,156869,156870,156880],{"__ignoreMap":998},[1002,156871,156872,156874,156877],{"class":1004,"line":1005},[1002,156873,324],{"class":1026},[1002,156875,156876],{"class":1034}," clone",[1002,156878,156879],{"class":1034}," http:\u002F\u002Fgithub.com\u002Fisaacs\u002Fnpm.git\n",[1002,156881,156882,156884,156887,156889],{"class":1004,"line":1012},[1002,156883,156039],{"class":1019},[1002,156885,156886],{"class":1034}," npmsudo",[1002,156888,78476],{"class":1034},[1002,156890,156072],{"class":1034},[925,156892,156893,156894,156897],{},"You will find out that everything worked fine, other than having to set NODE_PATH.\nNODE_PATH tells Node.js where to look for modules. This means you can do things like ",[941,156895,156896],{},"var client = require 'http'","instead of specifying the full path.",[925,156899,156900,156901,156904,156905,948],{},"To make sure my shell knows where to find Node.js modules, I added ",[941,156902,156903],{},"export NODE_PATH=\"\u002Fusr\u002Flocal\u002Flib\u002Fnode\""," to my ",[941,156906,156907],{},".bashrc file",[925,156909,156910,156911],{},"As some modules have executables you will also need to add \u002Fusr\u002Flocal\u002Fshare\u002Fnpm\u002Fbin to your PATH. Here's how it might look ",[941,156912,156913],{},"export PATH=\"\u002Fusr\u002Flocal\u002Fbin:\u002F...\u002Fusr\u002Flocal\u002Fshare\u002Fnpm\u002Fbin:$PATH\"",[925,156915,156916,156917,156920],{},"Make sure you reload your shell with ",[941,156918,156919],{},"source ~\u002F.bashrc "," so the changes are applied.",[953,156922,156924],{"id":156923},"installing-modules","Installing modules",[925,156926,156927,156928,156930,156931],{},"Now we are can install Node modules using npm. Let's start with ",[1107,156929,70163],{},", which is a good place to start - a Node framework inspired by Sinatra. ",[941,156932,156933],{},"npm install express",[925,156935,156936],{},"This provides a solid foundation to start developing with Node.js including Jade Node template - the Haml (HTML abstraction markup language)  inspired Node templating engine.\nNow let's code!",[1579,156938,156939],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":998,"searchDepth":1012,"depth":1012,"links":156941},[156942,156945,156946,156947],{"id":156648,"depth":1012,"text":156649,"children":156943},[156944],{"id":156655,"depth":1047,"text":156656},{"id":156682,"depth":1012,"text":156683},{"id":156837,"depth":1012,"text":156838},{"id":156923,"depth":1012,"text":156924},"2013-06-06","\u002Fimages\u002Fblog\u002Ffeatures\u002Finstalling-node-js.jpg",{},{"title":438,"description":440},"blog\u002Finstalling-node-js",[16,17,442],"XzkSdOvm5HfWukjlfM1oxo2THth8XcBkoXZvXKoXL2c",{"id":156956,"title":108,"author":920,"body":156957,"date":157007,"description":110,"extension":1591,"image":157008,"meta":157009,"navigation":1050,"path":109,"seo":157010,"stem":157011,"tags":157012,"__hash__":157013},"blog\u002Fblog\u002Fcontent-aware-scaling-in-photoshop.md",{"type":922,"value":156958,"toc":157005},[156959,156962,156970,156973],[925,156960,156961],{},"Advantages:",[1530,156963,156964,156967],{},[974,156965,156966],{},"Resize and reshape your images without the distortion of the content and composition.",[974,156968,156969],{},"Preserves image quality much better than traditional transformations.",[925,156971,156972],{},"Here’s how to apply content-aware scaling:",[1530,156974,156975,156978,156981,156984,156987,156990,156993,156996,156999,157002],{},[974,156976,156977],{},"Choose your desired layer in the Layers panel. If you want to isolate the scaling to a selection on the layer, make that selection now.Content-aware scaling doesn’t work on adjustment layers, layer masks, individual channels or Smart Objects. If you’re scaling a Background layer, choose Select→All.",[974,156979,156980],{},"Choose Edit→Content-Aware Scale.",[974,156982,156983],{},"Specify your options on the Options bar as follows:",[974,156985,156986],{},"*Reference Point: * Click a square in the reference point box to specify the axis point. The default location is the center.",[974,156988,156989],{},"*Use Relative Positioning for Reference Point (triangle icon): * Select this option to specify the new axis point in relation to its current position.",[974,156991,156992],{},"*Amount: * This option specifies the ratio of content-aware scaling to normal scaling. To minimize distortion, specify your Threshold amount. Start with a higher percentage and then adjust accordingly, if necessary.",[974,156994,156995],{},"*Protect: * You can designate areas that you want to protect from scaling by selecting them and saving them as alpha channels. If you have an alpha channel, choose it from this submenu.",[974,156997,156998],{},"*Protect Skin Tone (man icon): * Select this option to preserve skin tones from distorting when scaling.",[974,157000,157001],{},"Click and drag one of the handles of the scale box that surrounds your layer or selection to resize your image.You can upscale (make your image bigger) or downscale (make your image smaller). You can also use the Horizontal and Vertical Scale numerical fields on the Options bar. Select Maintain Aspect Ratio to keep the scaling proportional (chain icon).",[974,157003,157004],{},"When you have completed your scaling, double-click inside the scale box, or press Enter (Return on the Mac) on your keyboard. See the difference between a layer resized with Content-Aware Scale and a layer resized with Free Transform? Note how there is less distortion with the first method in content aware scaling in photoshop.",{"title":998,"searchDepth":1012,"depth":1012,"links":157006},[],"2013-05-13","\u002Fimages\u002Fblog\u002Ffeatures\u002Fcontent-aware-scaling-in-photoshop.jpg",{},{"title":108,"description":110},"blog\u002Fcontent-aware-scaling-in-photoshop",[9,112],"5HrcY0m9I47r8V367gIaEN_iio0a_U6TlWiUjvPBQuo",{"id":157015,"title":152,"author":920,"body":157016,"date":157147,"description":154,"extension":1591,"image":157148,"meta":157149,"navigation":1050,"path":153,"seo":157150,"stem":157151,"tags":157152,"__hash__":157153},"blog\u002Fblog\u002Fdeploying-aspnet-mvc-applications.md",{"type":922,"value":157017,"toc":157143},[157018,157021,157032,157035,157048,157051,157056,157060,157077,157081,157089,157095,157104,157110,157113,157119,157122,157128,157131,157137,157140],[925,157019,157020],{},"High level ASP.NET MVC website dependencies are:",[1530,157022,157023,157026,157029],{},[974,157024,157025],{},"The .NET Framework",[974,157027,157028],{},"Static content - eg: javascript, css, images and content folders",[974,157030,157031],{},"External services - eg: database, web services etc",[925,157033,157034],{},"What to include with deployment:",[1530,157036,157037,157040,157043,157045],{},[974,157038,157039],{},"\u002Fbin\u002Ffolder - compiled code",[974,157041,157042],{},"Special files - eg: Web.Config, Global.asax",[974,157044,157028],{},[974,157046,157047],{},"ASP.NET MVC diverges when it comes to views - include everything under Views folder",[925,157049,157050],{},"What not to include:",[1530,157052,157053],{},[974,157054,157055],{},"Source code files (already included as compiled binaries)",[953,157057,157059],{"id":157058},"deployment-checklist","Deployment checklist",[1530,157061,157062,157065,157068,157071,157074],{},[974,157063,157064],{},"What system-level applications and APIs does the application require (eg: OS version, IIS version, .NET Framework version) - does any software need to be installed on the server?",[974,157066,157067],{},"What system level folders or files does teh application require?",[974,157069,157070],{},"Does the application require databases?  - is it properly configured (ie. users created etc)? - have there been any updates to the database scheme since the last release?",[974,157072,157073],{},"What other servers or services does the application interact with? (firewall rules etc)",[974,157075,157076],{},"Do I have all of the appropriate licenses purchase and available? ",[953,157078,157080],{"id":157079},"deploying-to-iis","Deploying to IIS",[1530,157082,157083,157086],{},[974,157084,157085],{},"Hosting ASP.NET MVC is similar to ASP.NET",[974,157087,157088],{},"Ensure that the target web server has .NET 4.0 or later",[925,157090,157091],{},[963,157092],{"alt":157093,"src":157094},"ASPNET add_application","https:\u002F\u002Fi.imgur.com\u002FU6sJ3J3.png",[925,157096,157097,157098,157103],{},"Run the following script against the database to add a login as a member of a fixed server role. (or use  [",[933,157099,157102],{"href":157100,"rel":157101},"http:\u002F\u002Fmsdn.microsoft.com\u002Fen-us\u002Flibrary\u002Fee677634.aspx%5D(ALTER",[937],"http:\u002F\u002Fmsdn.microsoft.com\u002Fen-us\u002Flibrary\u002Fee677634.aspx](ALTER"," SERVER ROLE) instead as this will be deprecated soon)",[925,157105,157106],{},[963,157107],{"alt":157108,"src":157109},"ASPNET default_apppool_sql","https:\u002F\u002Fi.imgur.com\u002FZmCMecj.png",[925,157111,157112],{},"If getting an access denies error, try adding the server name for database.",[925,157114,157115],{},[963,157116],{"alt":157117,"src":157118},"ASPNET add_connection","https:\u002F\u002Fi.imgur.com\u002FzhRQP65.png",[925,157120,157121],{},"Right click on the project and select publish to publish the web site.",[925,157123,157124],{},[963,157125],{"alt":157126,"src":157127},"ASPNET publish_web","https:\u002F\u002Fi.imgur.com\u002FecBOFPy.png",[925,157129,157130],{},"Run the following command on Visual Studio Command Prompt.",[925,157132,157133],{},[963,157134],{"alt":157135,"src":157136},"7a1a1e73-b9af-476d-9818-e9c96d32f220","https:\u002F\u002Fi.imgur.com\u002FxRqssmR.jpg",[925,157138,157139],{},"Change the connection string to meet these shared settings.",[925,157141,157142],{},"And voilà,  it's out there to be tested!",{"title":998,"searchDepth":1012,"depth":1012,"links":157144},[157145,157146],{"id":157058,"depth":1012,"text":157059},{"id":157079,"depth":1012,"text":157080},"2013-05-07","\u002Fimages\u002Fblog\u002Ffeatures\u002Fdeploying-aspnet-mvc-applications.jpg",{},{"title":152,"description":154},"blog\u002Fdeploying-aspnet-mvc-applications",[16,17],"I-UEh6ft0F2QyTuhvYKJVpRa4WawKplJlDSjU_7xrCU",{"id":157155,"title":615,"author":920,"body":157156,"date":157715,"description":617,"extension":1591,"image":157716,"meta":157717,"navigation":1050,"path":616,"seo":157718,"stem":157719,"tags":157720,"__hash__":157721},"blog\u002Fblog\u002Foptimizing-asp-net-mvc-sites.md",{"type":922,"value":157157,"toc":157704},[157158,157161,157174,157178,157181,157192,157195,157206,157209,157214,157225,157230,157233,157244,157330,157334,157337,157341,157352,157356,157359,157363,157366,157372,157376,157387,157391,157402,157512,157516,157523,157529,157533,157540,157631,157637,157661,157667,157702],[925,157159,157160],{},"In this article we discuss about four ways of optimizing ASP.NET MVC sites:",[1530,157162,157163,157165,157168,157171],{},[974,157164,90708],{},[974,157166,157167],{},"Child actions",[974,157169,157170],{},"Asynchronous actions",[974,157172,157173],{},"Content bundling and minification",[953,157175,157177],{"id":157176},"introduction","Introduction",[925,157179,157180],{},"There are three primary players involved when it comes to optimization:",[1530,157182,157183,157186,157189],{},[974,157184,157185],{},"Server - Respond as faster",[974,157187,157188],{},"Client - Render page as faster",[974,157190,157191],{},"Internet - Send server's response to the client faster",[925,157193,157194],{},"When it comes to optimization, we don't have much control over the internet, but we could reduce the amount of requests.\nClient-side code can be optimized by ## content bundling and## minification.\nCommon server tasks include:",[1530,157196,157197,157200,157203],{},[974,157198,157199],{},"Interacting with database",[974,157201,157202],{},"Logic & data manipulation",[974,157204,157205],{},"Rendering HTML to the browser",[925,157207,157208],{},"Optimizing database interactions",[1530,157210,157211],{},[974,157212,157213],{},"Optimizing data for a limited period of time (caching)",[1530,157215,157216,157219,157222],{},[974,157217,157218],{},"raw data",[974,157220,157221],{},"fully rendered pages",[974,157223,157224],{},"pieces of pages",[1530,157226,157227],{},[974,157228,157229],{},"Interacting with the database on a separate thread",[925,157231,157232],{},"Output caching",[1530,157234,157235,157238,157241],{},[974,157236,157237],{},"Caching fully rendered HTML",[974,157239,157240],{},"Caching part of the HTML",[974,157242,157243],{},"caching the raw data",[993,157245,157247],{"className":130760,"code":157246,"language":184,"meta":998,"style":998},"using System.Web;\nusing System.Web.Optimization;\n\nnamespace Auction\n{\n public class BundleConfig\n\n \u002F\u002F For more information on Bundling, visit http:\u002F\u002Fgo.microsoft.com\u002Ffwlink\u002F?LinkId=254725\n public static void RegisterBundles(BundleCollection bundles)\n {\n bundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjquery\").Include(\n \"~\u002FScripts\u002Fjquery-{version}.js\"));\n bundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjqueryui\").Include(\n \"~\u002FScripts\u002Fjquery-ui-{version}.js\"));\n bundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjqueryval\").Include(\n \"~\u002FScripts\u002Fjquery.unobtrusive*\",\n \"~\u002FScripts\u002Fjquery.validate*\"));\n",[941,157248,157249,157253,157258,157262,157267,157271,157276,157280,157285,157290,157295,157300,157305,157310,157315,157320,157325],{"__ignoreMap":998},[1002,157250,157251],{"class":1004,"line":1005},[1002,157252,133449],{},[1002,157254,157255],{"class":1004,"line":1012},[1002,157256,157257],{},"using System.Web.Optimization;\n",[1002,157259,157260],{"class":1004,"line":1047},[1002,157261,1051],{"emptyLinePlaceholder":1050},[1002,157263,157264],{"class":1004,"line":1054},[1002,157265,157266],{},"namespace Auction\n",[1002,157268,157269],{"class":1004,"line":1060},[1002,157270,1129],{},[1002,157272,157273],{"class":1004,"line":1272},[1002,157274,157275],{}," public class BundleConfig\n",[1002,157277,157278],{"class":1004,"line":1348},[1002,157279,1051],{"emptyLinePlaceholder":1050},[1002,157281,157282],{"class":1004,"line":1354},[1002,157283,157284],{}," \u002F\u002F For more information on Bundling, visit http:\u002F\u002Fgo.microsoft.com\u002Ffwlink\u002F?LinkId=254725\n",[1002,157286,157287],{"class":1004,"line":1360},[1002,157288,157289],{}," public static void RegisterBundles(BundleCollection bundles)\n",[1002,157291,157292],{"class":1004,"line":1366},[1002,157293,157294],{}," {\n",[1002,157296,157297],{"class":1004,"line":1946},[1002,157298,157299],{}," bundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjquery\").Include(\n",[1002,157301,157302],{"class":1004,"line":1956},[1002,157303,157304],{}," \"~\u002FScripts\u002Fjquery-{version}.js\"));\n",[1002,157306,157307],{"class":1004,"line":1961},[1002,157308,157309],{}," bundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjqueryui\").Include(\n",[1002,157311,157312],{"class":1004,"line":1971},[1002,157313,157314],{}," \"~\u002FScripts\u002Fjquery-ui-{version}.js\"));\n",[1002,157316,157317],{"class":1004,"line":1980},[1002,157318,157319],{}," bundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjqueryval\").Include(\n",[1002,157321,157322],{"class":1004,"line":1985},[1002,157323,157324],{}," \"~\u002FScripts\u002Fjquery.unobtrusive*\",\n",[1002,157326,157327],{"class":1004,"line":1995},[1002,157328,157329],{}," \"~\u002FScripts\u002Fjquery.validate*\"));\n",[953,157331,157333],{"id":157332},"microcaching","Microcaching",[925,157335,157336],{},"Caching a for a very short period time like one second. This is required in instances like reducing thousands of database queries per second. This reduces the bottleneck for database access.",[953,157338,157340],{"id":157339},"child-controllers-child-actions","Child Controllers\u002F Child Actions",[925,157342,157343,157344,157347,157348,157351],{},"A Child Action in MVC is similar to a ",[941,157345,157346],{},"User Control"," in ASP.Net web forms. It allows for a controller to execute for a portion of the rendered area of a view, just like in Web Forms where you can execute a ",[941,157349,157350],{},"UserControl"," for a portion of the rendered area of a page.\nChild Actions can be very powerful especially when you want to have re-usable controller code to execute that you otherwise wouldn't want executing inside of your view. This makes unit testing simpler because only controller code need to be tested, not the code in a view.",[953,157353,157355],{"id":157354},"asynchronous-actions","Asynchronous Actions",[925,157357,157358],{},"When there's a long-running operation, you can't apply output caching. Asynchronous actions can be used to resolve this problem by scaling your site for more concurrent users.",[953,157360,157362],{"id":157361},"aspnet-thread-pooling","ASP.NET Thread Pooling",[925,157364,157365],{},"When a request is made on your ASP.NET website, it calls a vacant thread from the thread pool. If there are lots of requests, and the thread pool runs out of free threads, your website will stop responding. To mitigate this issue, asynchronous actions can be used to queue the requests.",[925,157367,157368],{},[963,157369],{"alt":157370,"src":157371},"Thread pool","https:\u002F\u002Fi.imgur.com\u002FAXQjqpe.png",[953,157373,157375],{"id":157374},"when-to-use-asynchronous-controller","When to use asynchronous controller",[1530,157377,157378,157381,157384],{},[974,157379,157380],{},"Long-running operations (eg:- longer than a second)",[974,157382,157383],{},"When a user may cancel a long-running operation",[974,157385,157386],{},"I\u002FO intensive or network related operations (efficiency)",[953,157388,157390],{"id":157389},"when-not-to-use-the-asynchronous-controller","When NOT to use the asynchronous controller",[1530,157392,157393,157396,157399],{},[974,157394,157395],{},"Short running operations",[974,157397,157398],{},"CPU intensive operations",[974,157400,157401],{},"Simple operations (simplicity)",[993,157403,157405],{"className":130760,"code":157404,"language":184,"meta":998,"style":998},"using System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Threading.Tasks;\nsing System.Web;\nusing System.Web.Mvc;\nnamespace Auction.Controllers\n{\n public class SearchController : AsyncController\n {\n public async Task\u003CActionResult> Auctions(string keyword)\n {\n var auctions = await Task.Run\u003CIEnumerable\u003CModels.Auction>>(\n () =>\n {\n var db = new Models.AuctionDataContext();\n return db.Auction.Where(x => x.Title.Contains(keyword)).ToArray();\n });\n\n return Json(auctions, JsonRequestBehavior.AllowGet);\n }\n }\n}\n",[941,157406,157407,157411,157415,157420,157425,157430,157434,157439,157443,157448,157453,157458,157462,157467,157472,157477,157482,157487,157491,157495,157500,157504,157508],{"__ignoreMap":998},[1002,157408,157409],{"class":1004,"line":1005},[1002,157410,156377],{},[1002,157412,157413],{"class":1004,"line":1012},[1002,157414,156382],{},[1002,157416,157417],{"class":1004,"line":1047},[1002,157418,157419],{},"using System.Linq;\n",[1002,157421,157422],{"class":1004,"line":1054},[1002,157423,157424],{},"using System.Threading.Tasks;\n",[1002,157426,157427],{"class":1004,"line":1060},[1002,157428,157429],{},"sing System.Web;\n",[1002,157431,157432],{"class":1004,"line":1272},[1002,157433,133454],{},[1002,157435,157436],{"class":1004,"line":1348},[1002,157437,157438],{},"namespace Auction.Controllers\n",[1002,157440,157441],{"class":1004,"line":1354},[1002,157442,1129],{},[1002,157444,157445],{"class":1004,"line":1360},[1002,157446,157447],{}," public class SearchController : AsyncController\n",[1002,157449,157450],{"class":1004,"line":1366},[1002,157451,157452],{}," {\n",[1002,157454,157455],{"class":1004,"line":1946},[1002,157456,157457],{}," public async Task\u003CActionResult> Auctions(string keyword)\n",[1002,157459,157460],{"class":1004,"line":1956},[1002,157461,157294],{},[1002,157463,157464],{"class":1004,"line":1961},[1002,157465,157466],{}," var auctions = await Task.Run\u003CIEnumerable\u003CModels.Auction>>(\n",[1002,157468,157469],{"class":1004,"line":1971},[1002,157470,157471],{}," () =>\n",[1002,157473,157474],{"class":1004,"line":1980},[1002,157475,157476],{}," {\n",[1002,157478,157479],{"class":1004,"line":1985},[1002,157480,157481],{}," var db = new Models.AuctionDataContext();\n",[1002,157483,157484],{"class":1004,"line":1995},[1002,157485,157486],{}," return db.Auction.Where(x => x.Title.Contains(keyword)).ToArray();\n",[1002,157488,157489],{"class":1004,"line":2006},[1002,157490,21164],{},[1002,157492,157493],{"class":1004,"line":2011},[1002,157494,1051],{"emptyLinePlaceholder":1050},[1002,157496,157497],{"class":1004,"line":2017},[1002,157498,157499],{}," return Json(auctions, JsonRequestBehavior.AllowGet);\n",[1002,157501,157502],{"class":1004,"line":2022},[1002,157503,39023],{},[1002,157505,157506],{"class":1004,"line":2442},[1002,157507,138759],{},[1002,157509,157510],{"class":1004,"line":2466},[1002,157511,1170],{},[953,157513,157515],{"id":157514},"_4-bundling-and-minification","4. Bundling and minification",[925,157517,157518,157519,157522],{},"Modern browsers limit open connection to 6. Rendering stops to wait for some scripts to finish downloading.\nBundling(reduces the number of files) and minification(makes files smaller) can be used for reducing page load times. .NET framework provides ",[941,157520,157521],{},"System.Web.Optimization"," library for this purpose.",[925,157524,157525],{},[963,157526],{"alt":157527,"src":157528},"default_apppool_sql","https:\u002F\u002Fi.imgur.com\u002FsBiqq95.png",[953,157530,157532],{"id":157531},"bundling","Bundling",[925,157534,157535,157536,157539],{},"Bundling compiles multiple files into one request:\nYou can register your bundles on the ",[941,157537,157538],{},"## BundleConfig.cs"," file of App_Start folder.",[993,157541,157543],{"className":130760,"code":157542,"language":184,"meta":998,"style":998},"using System.Web;\nusing System.Web.Optimization;\n\nnamespace Auction\n{\npublic class BundleConfig\n{\n\u002F\u002F For more information on Bundling, visit http:\u002F\u002Fgo.microsoft.com\u002Ffwlink\u002F?LinkId=254725\npublic static void RegisterBundles(BundleCollection bundles)\n{\nbundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjquery\").Include(\n\"~\u002FScripts\u002Fjquery-{version}.js\"));\n\nbundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjqueryui\").Include(\n\"~\u002FScripts\u002Fjquery-ui-{version}.js\"));\n\nbundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjqueryval\").Include(\n\"~\u002FScripts\u002Fjquery.unobtrusive*\",\n\"~\u002FScripts\u002Fjquery.validate*\"));\n",[941,157544,157545,157549,157553,157557,157561,157565,157570,157574,157579,157584,157588,157593,157598,157602,157607,157612,157616,157621,157626],{"__ignoreMap":998},[1002,157546,157547],{"class":1004,"line":1005},[1002,157548,133449],{},[1002,157550,157551],{"class":1004,"line":1012},[1002,157552,157257],{},[1002,157554,157555],{"class":1004,"line":1047},[1002,157556,1051],{"emptyLinePlaceholder":1050},[1002,157558,157559],{"class":1004,"line":1054},[1002,157560,157266],{},[1002,157562,157563],{"class":1004,"line":1060},[1002,157564,1129],{},[1002,157566,157567],{"class":1004,"line":1272},[1002,157568,157569],{},"public class BundleConfig\n",[1002,157571,157572],{"class":1004,"line":1348},[1002,157573,1129],{},[1002,157575,157576],{"class":1004,"line":1354},[1002,157577,157578],{},"\u002F\u002F For more information on Bundling, visit http:\u002F\u002Fgo.microsoft.com\u002Ffwlink\u002F?LinkId=254725\n",[1002,157580,157581],{"class":1004,"line":1360},[1002,157582,157583],{},"public static void RegisterBundles(BundleCollection bundles)\n",[1002,157585,157586],{"class":1004,"line":1366},[1002,157587,1129],{},[1002,157589,157590],{"class":1004,"line":1946},[1002,157591,157592],{},"bundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjquery\").Include(\n",[1002,157594,157595],{"class":1004,"line":1956},[1002,157596,157597],{},"\"~\u002FScripts\u002Fjquery-{version}.js\"));\n",[1002,157599,157600],{"class":1004,"line":1961},[1002,157601,1051],{"emptyLinePlaceholder":1050},[1002,157603,157604],{"class":1004,"line":1971},[1002,157605,157606],{},"bundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjqueryui\").Include(\n",[1002,157608,157609],{"class":1004,"line":1980},[1002,157610,157611],{},"\"~\u002FScripts\u002Fjquery-ui-{version}.js\"));\n",[1002,157613,157614],{"class":1004,"line":1985},[1002,157615,1051],{"emptyLinePlaceholder":1050},[1002,157617,157618],{"class":1004,"line":1995},[1002,157619,157620],{},"bundles.Add(new ScriptBundle(\"~\u002Fbundles\u002Fjqueryval\").Include(\n",[1002,157622,157623],{"class":1004,"line":2006},[1002,157624,157625],{},"\"~\u002FScripts\u002Fjquery.unobtrusive*\",\n",[1002,157627,157628],{"class":1004,"line":2011},[1002,157629,157630],{},"\"~\u002FScripts\u002Fjquery.validate*\"));\n",[925,157632,157633,157634,33813],{},"Note that line 15 uses a version placeholder and line 19 uses a wild card to look for similar files.\nStyles and script files should be references on ",[941,157635,157636],{},"_Layout.cshml",[993,157638,157640],{"className":130760,"code":157639,"language":184,"meta":998,"style":998},"@ViewBag.Title - My ASP.NET MVC Application\n\n@Styles.Render(\"~\u002FContent\u002Fcss\")\n@Scripts.Render(\"~\u002Fbundles\u002Fmodernizr\")\n",[941,157641,157642,157647,157651,157656],{"__ignoreMap":998},[1002,157643,157644],{"class":1004,"line":1005},[1002,157645,157646],{},"@ViewBag.Title - My ASP.NET MVC Application\n",[1002,157648,157649],{"class":1004,"line":1012},[1002,157650,1051],{"emptyLinePlaceholder":1050},[1002,157652,157653],{"class":1004,"line":1047},[1002,157654,157655],{},"@Styles.Render(\"~\u002FContent\u002Fcss\")\n",[1002,157657,157658],{"class":1004,"line":1054},[1002,157659,157660],{},"@Scripts.Render(\"~\u002Fbundles\u002Fmodernizr\")\n",[925,157662,157663,157664,45420],{},"Set the debug flag to false on your ",[941,157665,157666],{},"Web.config",[993,157668,157670],{"className":130760,"code":157669,"language":184,"meta":998,"style":998},"\u003Csystem.web>\n \u003Ccompilation debug=\"false\" targetFramework=\"4.5\" \u002F>\n \u003ChttpRuntime targetFramework=\"4.5\" \u002F>\n \u003Cauthentication mode=\"Forms\">\n \u003Cforms loginUrl=\"~\u002FAccount\u002FLogin\" timeout=\"2880\" \u002F>\n \u003C\u002Fauthentication>\n",[941,157671,157672,157677,157682,157687,157692,157697],{"__ignoreMap":998},[1002,157673,157674],{"class":1004,"line":1005},[1002,157675,157676],{},"\u003Csystem.web>\n",[1002,157678,157679],{"class":1004,"line":1012},[1002,157680,157681],{}," \u003Ccompilation debug=\"false\" targetFramework=\"4.5\" \u002F>\n",[1002,157683,157684],{"class":1004,"line":1047},[1002,157685,157686],{}," \u003ChttpRuntime targetFramework=\"4.5\" \u002F>\n",[1002,157688,157689],{"class":1004,"line":1054},[1002,157690,157691],{}," \u003Cauthentication mode=\"Forms\">\n",[1002,157693,157694],{"class":1004,"line":1060},[1002,157695,157696],{}," \u003Cforms loginUrl=\"~\u002FAccount\u002FLogin\" timeout=\"2880\" \u002F>\n",[1002,157698,157699],{"class":1004,"line":1272},[1002,157700,157701],{}," \u003C\u002Fauthentication>\n",[1579,157703,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":157705},[157706,157707,157708,157709,157710,157711,157712,157713,157714],{"id":157176,"depth":1012,"text":157177},{"id":157332,"depth":1012,"text":157333},{"id":157339,"depth":1012,"text":157340},{"id":157354,"depth":1012,"text":157355},{"id":157361,"depth":1012,"text":157362},{"id":157374,"depth":1012,"text":157375},{"id":157389,"depth":1012,"text":157390},{"id":157514,"depth":1012,"text":157515},{"id":157531,"depth":1012,"text":157532},"2013-04-29","\u002Fimages\u002Fblog\u002Ffeatures\u002Foptimizing-asp-net-mvc-sites.jpg",{},{"title":615,"description":617},"blog\u002Foptimizing-asp-net-mvc-sites",[16,184,619],"HKsbeb1aMUhDRESdzzzEFgWQ_61-D7r8DqTAA7krwfQ",{"id":157723,"title":771,"author":920,"body":157724,"date":157937,"description":773,"extension":1591,"image":157938,"meta":157939,"navigation":1050,"path":772,"seo":157940,"stem":157941,"tags":157942,"__hash__":157943},"blog\u002Fblog\u002Fsecuring-your-asp-net-mvc-4-application.md",{"type":922,"value":157725,"toc":157934},[157726,157735,157743,157818,157825,157866,157869,157874,157877,157882,157885,157889,157892,157922,157932],[925,157727,157728,157729,157732,157733,81194],{},"Microsoft provides a pre-made code for securing your ASP.NET MVC 4 application: ",[1002,157730,157731],{},"Authorize"," attribute Properties of the ",[1002,157734,157731],{},[1530,157736,157737,157740],{},[974,157738,157739],{},"users",[974,157741,157742],{},"roles",[993,157744,157746],{"className":130760,"code":157745,"language":184,"meta":998,"style":998}," [HttpPost]\n [Authorize]\n public ActionResult Create([Bind(Exclude=\"CurrentPrice\")]Models.Auction auction)\n {\n if (ModelState.IsValid)\n {\n \u002F\u002F Save to the database\n var db = new AuctionsDataContext();\n db.Auctions.Add(auction);\n db.SaveChanges();\n return RedirectToAction(\"Index\");\n }\n\n return Create();\n }\n",[941,157747,157748,157753,157758,157763,157767,157772,157776,157781,157786,157791,157796,157801,157805,157809,157814],{"__ignoreMap":998},[1002,157749,157750],{"class":1004,"line":1005},[1002,157751,157752],{}," [HttpPost]\n",[1002,157754,157755],{"class":1004,"line":1012},[1002,157756,157757],{}," [Authorize]\n",[1002,157759,157760],{"class":1004,"line":1047},[1002,157761,157762],{}," public ActionResult Create([Bind(Exclude=\"CurrentPrice\")]Models.Auction auction)\n",[1002,157764,157765],{"class":1004,"line":1054},[1002,157766,1457],{},[1002,157768,157769],{"class":1004,"line":1060},[1002,157770,157771],{}," if (ModelState.IsValid)\n",[1002,157773,157774],{"class":1004,"line":1272},[1002,157775,91266],{},[1002,157777,157778],{"class":1004,"line":1348},[1002,157779,157780],{}," \u002F\u002F Save to the database\n",[1002,157782,157783],{"class":1004,"line":1354},[1002,157784,157785],{}," var db = new AuctionsDataContext();\n",[1002,157787,157788],{"class":1004,"line":1360},[1002,157789,157790],{}," db.Auctions.Add(auction);\n",[1002,157792,157793],{"class":1004,"line":1366},[1002,157794,157795],{}," db.SaveChanges();\n",[1002,157797,157798],{"class":1004,"line":1946},[1002,157799,157800],{}," return RedirectToAction(\"Index\");\n",[1002,157802,157803],{"class":1004,"line":1956},[1002,157804,2014],{},[1002,157806,157807],{"class":1004,"line":1961},[1002,157808,1051],{"emptyLinePlaceholder":1050},[1002,157810,157811],{"class":1004,"line":1971},[1002,157812,157813],{}," return Create();\n",[1002,157815,157816],{"class":1004,"line":1980},[1002,157817,71668],{},[925,157819,157820,157821,157824],{},"You could add ",[1107,157822,157823],{},"AllowAnonymous"," attribute to the controllers that can be accessed by anyone.",[993,157826,157828],{"className":130760,"code":157827,"language":184,"meta":998,"style":998}," [AllowAnonymous]\n public class HomeController : Controller\n {\n public ActionResult Index()\n {\n return View();\n }\n }\n",[941,157829,157830,157835,157840,157844,157849,157853,157858,157862],{"__ignoreMap":998},[1002,157831,157832],{"class":1004,"line":1005},[1002,157833,157834],{}," [AllowAnonymous]\n",[1002,157836,157837],{"class":1004,"line":1012},[1002,157838,157839],{}," public class HomeController : Controller\n",[1002,157841,157842],{"class":1004,"line":1047},[1002,157843,1457],{},[1002,157845,157846],{"class":1004,"line":1054},[1002,157847,157848],{}," public ActionResult Index()\n",[1002,157850,157851],{"class":1004,"line":1060},[1002,157852,91266],{},[1002,157854,157855],{"class":1004,"line":1272},[1002,157856,157857],{}," return View();\n",[1002,157859,157860],{"class":1004,"line":1348},[1002,157861,2014],{},[1002,157863,157864],{"class":1004,"line":1354},[1002,157865,71668],{},[925,157867,157868],{},"Now even though unauthorized users can see and fill the posts page, when they attempt to post, it will redirect to the log in page.\nWe can specify who could access the page by assigning a user to the Authorize attribute. (User)",[925,157870,157871],{},[1002,157872,157873],{},"Authorize(Users=\"John\")",[925,157875,157876],{},"Also we could allow a group to access the create function. (Role)",[925,157878,157879],{},[1002,157880,157881],{},"Authorize(Roles=\"Admin\")",[925,157883,157884],{},"Values as such are called a  Whitelist and opposite being Blacklist.",[953,157886,157888],{"id":157887},"creating-user-accounts","Creating User Accounts",[925,157890,157891],{},"Any user can create an account with your default ASP.NET MVC site by registering a user name and a password.",[993,157893,157895],{"className":130760,"code":157894,"language":184,"meta":998,"style":998},"\u003Csection class=\"social\" id=\"socialLoginForm\">\n     ## Use another service to log \u003Cspan class=\"Statement\">in\u003C\u002Fspan>.\n     @Html.Action(\"ExternalLoginsList\", \n new { ReturnUrl = ViewBag.ReturnUrl })\n\u003C\u002Fsection>\n",[941,157896,157897,157902,157907,157912,157917],{"__ignoreMap":998},[1002,157898,157899],{"class":1004,"line":1005},[1002,157900,157901],{},"\u003Csection class=\"social\" id=\"socialLoginForm\">\n",[1002,157903,157904],{"class":1004,"line":1012},[1002,157905,157906],{},"     ## Use another service to log \u003Cspan class=\"Statement\">in\u003C\u002Fspan>.\n",[1002,157908,157909],{"class":1004,"line":1047},[1002,157910,157911],{},"     @Html.Action(\"ExternalLoginsList\", \n",[1002,157913,157914],{"class":1004,"line":1054},[1002,157915,157916],{}," new { ReturnUrl = ViewBag.ReturnUrl })\n",[1002,157918,157919],{"class":1004,"line":1060},[1002,157920,157921],{},"\u003C\u002Fsection>\n",[925,157923,157924,157925,157928,157929,37413],{},"Also you could use external authentication services by uncommenting the fields of ",[941,157926,157927],{},"AuthConfig.cs"," file in ",[941,157930,157931],{},"App_Start",[1579,157933,24298],{},{"title":998,"searchDepth":1012,"depth":1012,"links":157935},[157936],{"id":157887,"depth":1012,"text":157888},"2013-04-25","\u002Fimages\u002Fblog\u002Ffeatures\u002Fsecuring-your-asp-net-mvc-4-application.jpg",{},{"title":771,"description":773},"blog\u002Fsecuring-your-asp-net-mvc-4-application",[16,184,619],"j2QsAOxpcMCJ8PbYB0zuZ3H61Pp23odvzF70PRiXpWo",{"id":157945,"title":5,"author":920,"body":157946,"date":158453,"description":7,"extension":1591,"image":158454,"meta":158455,"navigation":1050,"path":6,"seo":158456,"stem":158457,"tags":158458,"__hash__":158459},"blog\u002Fblog\u002Fadobe-illustrator-shortcuts.md",{"type":922,"value":157947,"toc":158427},[157948,157954,157958,157961,157967,157971,157978,157984,157988,157998,158004,158008,158011,158015,158019,158025,158029,158033,158039,158042,158046,158052,158056,158062,158068,158074,158078,158084,158090,158094,158098,158104,158108,158124,158127,158133,158138,158144,158149,158154,158159,158163,158170,158176,158180,158188,158194,158198,158204,158210,158214,158226,158230,158236,158242,158246,158253,158259,158263,158269,158275,158279,158285,158291,158297,158300,158306,158311,158317,158321,158327,158333,158337,158343,158349,158353,158359,158365,158371,158375,158383,158391,158399,158405,158409,158415,158421],[7100,157949,157951],{"title":157950,"type":24048},"PC",[925,157952,157953],{},"This article is written in Mac Illustrator CS3 format. If you are using PC, Cmd key = Ctrl key and Opt = Alt.",[953,157955,157957],{"id":157956},"_1-change-the-unit-setting","1. Change the Unit Setting",[925,157959,157960],{},"You can quickly change the Artboard unit measurement setting by right-clicking on the ruler.",[925,157962,157963],{},[963,157964],{"alt":157965,"src":157966},"Unit Setting","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fruler-unit.gif",[953,157968,157970],{"id":157969},"_2-activate-tool-options","2. Activate Tool Options",[925,157972,157973,157974,157977],{},"With the tool selected, (e.g. Blend Tool), press the ",[941,157975,157976],{},"Enter"," key to open up the Blend Options window. Another way to open up the tool option panel is to double-click on the tool icon.",[925,157979,157980],{},[963,157981],{"alt":157982,"src":157983},"Blend tool options","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fblend-options.gif",[953,157985,157987],{"id":157986},"_3-duplicate-a-series-of-objects","3. Duplicate a Series of Objects",[925,157989,157990,157991,157993,157994,157997],{},"Select the object, hold down ",[941,157992,90891],{}," key and drag. You now have a copy of the object. Each time you press ",[941,157995,157996],{},"Cmd + D"," (Transform Again) you distribute more copies.",[925,157999,158000],{},[963,158001],{"alt":158002,"src":158003},"tranform again","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Ftransform-again.gif",[953,158005,158007],{"id":158006},"_4-draw-shape-with-options","4. Draw Shape with Options",[925,158009,158010],{},"Select any shape tool, (e.g. Star Tool), click anywhere on the Artboard, it will let you draw a shape with options.",[963,158012],{"alt":158013,"src":158014},"screenshot","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fstar-tool.gif",[953,158016,158018],{"id":158017},"_5-zoom-with-mouse-wheel","5. Zoom With Mouse Wheel",[925,158020,158021,158022,158024],{},"Hold down ",[941,158023,90891],{}," key & scroll the mouse wheel up or down to zoom in\u002Fout",[963,158026],{"alt":158027,"src":158028},"mouse wheel","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fzoom-mouse-wheel.gif",[953,158030,158032],{"id":158031},"_6-gradient-stop-color","6. Gradient Stop Color",[925,158034,158035,158036,158038],{},"To quickly change a gradient stop color to any color swatch in the library: select a gradient stop, hold down ",[941,158037,90891],{}," key and click on a swatch.",[963,158040],{"alt":158013,"src":158041},"http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fgradient-stop.gif",[953,158043,158045],{"id":158044},"_6-switch-color-profile","6. Switch Color Profile",[925,158047,158021,158048,158051],{},[941,158049,158050],{},"Shift"," key and click on the color bar will let you toggle through the color profiles: Grayscale, RGB, HSB, CMYK, Web Safe RGB.",[953,158053,158055],{"id":158054},"_7-layer-visibility","7. Layer Visibility",[925,158057,158058,158061],{},[941,158059,158060],{},"Cmd + Click"," Visibility Icon = toggle view mode (Outline\u002FPreview)",[925,158063,158064,158067],{},[941,158065,158066],{},"Opt + Click"," Visibility Ico = hide other layers (Opt + click again will show all)",[925,158069,158070,158073],{},[941,158071,158072],{},"Click Visibility Icon & Drag"," = toggle multi layers",[953,158075,158077],{"id":158076},"_8-new-layer","8. New Layer",[925,158079,158080,158083],{},[941,158081,158082],{},"Cmd + L"," = New layer",[925,158085,158086,158089],{},[941,158087,158088],{},"Cmd + Opt + L"," = New layer with options",[963,158091],{"alt":158092,"src":158093},"new layer","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fnew-layer.gif",[953,158095,158097],{"id":158096},"_9-select-all-objects-on-layer","9. Select All Objects on Layer",[925,158099,158100,158101,158103],{},"To select all objects on a particular layer, hold down ",[941,158102,90891],{}," key and click on the layer name.",[953,158105,158107],{"id":158106},"_10-navigate-live-paint-bucket-color","10. Navigate Live Paint Bucket Color",[925,158109,158110,158111,6620,158114,6620,158117,6620,158120,158123],{},"With the Live Paint Bucket tool selected, click on any swatch in the Color palette, now use the arrow keys (",[941,158112,158113],{},"Up",[941,158115,158116],{},"Down",[941,158118,158119],{},"Left",[941,158121,158122],{},"Right",") to navigate through the swatches.",[925,158125,158126],{},"11. ## Fill and Stroke Color",[925,158128,158129,158132],{},[941,158130,158131],{},"D"," = Default color (white fill & black stroke)",[925,158134,158135,158137],{},[941,158136,75710],{}," = Toggle between fill and stroke",[925,158139,158140,158143],{},[941,158141,158142],{},"Shift + X"," = Swap fill and stroke color",[925,158145,158146,158148],{},[941,158147,4685],{}," = None (transparent)",[925,158150,158151,158153],{},[941,158152,6539],{}," = Color fill",[925,158155,158156,158158],{},[941,158157,19171],{}," = Gradient fill",[953,158160,158162],{"id":158161},"_12-saturate-or-desaturate-color","12.  Saturate or Desaturate Color",[925,158164,158165,158166,158169],{},"Holding down ",[941,158167,158168],{},"Cmd"," key and dragging the color slider will saturate or desaturate a mixed color.",[925,158171,158172],{},[963,158173],{"alt":158174,"src":158175},"color slider","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fcolor-slider.gif",[953,158177,158179],{"id":158178},"_13-increasedecrease-input-field-value","13. Increase\u002FDecrease Input Field Value",[925,158181,158182,158183,14928,158185,158187],{},"Place the cursor in any input field, press arrow ",[941,158184,158113],{},[941,158186,158116],{}," to increase\u002Fdecrease.",[925,158189,158190],{},[963,158191],{"alt":158192,"src":158193},"input field","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Finput-field.gif",[953,158195,158197],{"id":158196},"_14-close-pencil-or-brush-path","14. Close Pencil or Brush Path",[925,158199,158200,158201,158203],{},"By default, Illustrator will use close a Pencil and Brush path. To close a Pencil path manually, hold down ",[941,158202,90891],{}," key when you are about to finish drawing the path.",[925,158205,158206],{},[963,158207],{"alt":158208,"src":158209},"close pencil path","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fclose-path.gif",[953,158211,158213],{"id":158212},"_15-add-or-subtract-sides","15. Add or Subtract Sides",[925,158215,158216,158217,14928,158219,158221,158222],{},"With the Star Tool, drag on the Artboard (do not release the mouse yet), press",[941,158218,158113],{},[941,158220,158116],{}," arrow to add\u002Fsubtract sides. Notes: this shortcut can also works for the Arc, Spiral, Rectangle Grid, Polar Grid, Polygon, and Flare Tool.",[963,158223],{"alt":158224,"src":158225},"add or subtract sides","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fadd-subtract-sides.gif",[953,158227,158229],{"id":158228},"_16-inner-radius","16. Inner Radius",[925,158231,158232,158233,158235],{},"With the Star Tool, drag on the Artboard (do not release the mouse yet), holding down the ",[941,158234,158168],{}," key while dragging will let you control the inner radius. This shortcut also works for the Spiral Tool.",[925,158237,158238],{},[963,158239],{"alt":158240,"src":158241},"inner radius","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Finner-radius.gif",[953,158243,158245],{"id":158244},"_17-continuous-duplicates-based-on-mouse-movement","17. Continuous Duplicates Based on Mouse Movement",[925,158247,158248,158249,158252],{},"With any shape tool, holding down the Tilde (",[941,158250,158251],{},"~",") key while dragging will make continuous duplicates based on your mouse movement. This is a very useful shortcut to create fun and complex artwork.",[925,158254,158255],{},[963,158256],{"alt":158257,"src":158258},"tilde","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Ftilde.gif",[953,158260,158262],{"id":158261},"_18-straight-sided-star","18. Straight Sided Star",[925,158264,158265,158266,158268],{},"With the Star Tool, while dragging holding down the ",[941,158267,90891],{}," key will let you draw a straight side star.",[925,158270,158271],{},[963,158272],{"alt":158273,"src":158274},"star shape","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fstraight-side.gif",[953,158276,158278],{"id":158277},"_19-lock-and-unlock-objects","19. Lock and Unlock Objects",[925,158280,158281,158284],{},[941,158282,158283],{},"Cmd + 2"," = Lock selected object(s)",[925,158286,158287,158290],{},[941,158288,158289],{},"Cmd + Opt + Shift + 2"," = Lock all deselected objects",[925,158292,158293,158296],{},[941,158294,158295],{},"Cmd + Opt + 2"," = Unlock all",[925,158298,158299],{},"`## 20. Switch Between Move and Selection Tool",[925,158301,158302,158305],{},[941,158303,158304],{},"Cmd + Opt + Tab"," = Switch between Move and Direct Selection Tool.",[925,158307,158308,158310],{},[941,158309,90891],{}," (Direct Selection Tool selected) = toggle to Group Selection Tool.",[925,158312,158313],{},[963,158314],{"alt":158315,"src":158316},"selection tool","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fmove-selection-tool.gif",[953,158318,158320],{"id":158319},"_21-hide-and-show-objects","21. Hide and Show Objects",[925,158322,158323,158326],{},[941,158324,158325],{},"Cmd + Opt + Shift + 3"," = Hide all deselected objects",[925,158328,158329,158332],{},[941,158330,158331],{},"Cmd + Opt + 3"," = Show all objects",[953,158334,158336],{"id":158335},"_22-eyedropper-sample-photo-or-gradient-color","22. Eyedropper - Sample Photo or Gradient Color",[925,158338,158339,158340,158342],{},"To sample intermediate color from a gradient or photo: with the Eyedropper tool selected, hold down ",[941,158341,158050],{}," key and click on the photo.",[925,158344,158345],{},[963,158346],{"alt":158347,"src":158348},"eyedropper color","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Feyedropper-color.gif",[953,158350,158352],{"id":158351},"_23-make-and-release-guide","23. Make and Release Guide",[925,158354,158355,158358],{},[941,158356,158357],{},"Cmd + 5"," = Convert selected object to Guide",[925,158360,158361,158364],{},[941,158362,158363],{},"Cmd + Shift + double-click on Guide"," = Release Guide",[925,158366,158367],{},[963,158368],{"alt":158369,"src":158370},"make and release guide","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fmake-guide.jpg",[953,158372,158374],{"id":158373},"_24-font-size-leading-kerning-and-tracking","24. Font: Size, Leading, Kerning and Tracking",[925,158376,158377,14928,158380,158382],{},[941,158378,158379],{},"Cmd + Shift + >",[941,158381,6539],{}," = Increase\u002Fdecrease font size",[925,158384,158385,14928,158388,158390],{},[941,158386,158387],{},"Opt + Up",[941,158389,158116],{}," = Increase\u002Fdecrease leading",[925,158392,158393,14928,158396,158398],{},[941,158394,158395],{},"Opt + Left",[941,158397,158122],{}," = Increase\u002Fdecrease kerning or tracking",[925,158400,158401,158404],{},[941,158402,158403],{},"Cmd + Opt + Q"," = Reset kerning\u002Ftracking to zero",[953,158406,158408],{"id":158407},"_25-add-new-fill-and-stroke","25. Add New Fill and Stroke",[925,158410,158411,158414],{},[941,158412,158413],{},"Cmd + \u002F"," = Add new fill",[925,158416,158417,158420],{},[941,158418,158419],{},"Cmd + Opt + \u002F"," = Add new stroke",[925,158422,158423],{},[963,158424],{"alt":158425,"src":158426},"new fill and stroke","http:\u002F\u002Fwww.webdesignerwall.com\u002Fwp-content\u002Fuploads\u002F2008\u002F07\u002Fnew-stroke-fill.gif",{"title":998,"searchDepth":1012,"depth":1012,"links":158428},[158429,158430,158431,158432,158433,158434,158435,158436,158437,158438,158439,158440,158441,158442,158443,158444,158445,158446,158447,158448,158449,158450,158451,158452],{"id":157956,"depth":1012,"text":157957},{"id":157969,"depth":1012,"text":157970},{"id":157986,"depth":1012,"text":157987},{"id":158006,"depth":1012,"text":158007},{"id":158017,"depth":1012,"text":158018},{"id":158031,"depth":1012,"text":158032},{"id":158044,"depth":1012,"text":158045},{"id":158054,"depth":1012,"text":158055},{"id":158076,"depth":1012,"text":158077},{"id":158096,"depth":1012,"text":158097},{"id":158106,"depth":1012,"text":158107},{"id":158161,"depth":1012,"text":158162},{"id":158178,"depth":1012,"text":158179},{"id":158196,"depth":1012,"text":158197},{"id":158212,"depth":1012,"text":158213},{"id":158228,"depth":1012,"text":158229},{"id":158244,"depth":1012,"text":158245},{"id":158261,"depth":1012,"text":158262},{"id":158277,"depth":1012,"text":158278},{"id":158319,"depth":1012,"text":158320},{"id":158335,"depth":1012,"text":158336},{"id":158351,"depth":1012,"text":158352},{"id":158373,"depth":1012,"text":158374},{"id":158407,"depth":1012,"text":158408},"2013-01-10","\u002Fimages\u002Fblog\u002Ffeatures\u002Fadobe-illustrator-shortcuts.jpg",{},{"title":5,"description":7},"blog\u002Fadobe-illustrator-shortcuts",[9,10],"WWu0Zhc1tcMt75u6FSzxaNJbpsmnIgdU0icvCFetvOI",{"id":158461,"title":85,"author":920,"body":158462,"date":158508,"description":87,"extension":1591,"image":158509,"meta":158510,"navigation":1050,"path":86,"seo":158511,"stem":158512,"tags":158513,"__hash__":158514},"blog\u002Fblog\u002Fchromatic-aberration.md",{"type":922,"value":158463,"toc":158506},[158464,158467,158473,158476,158486,158489,158492,158497,158500,158503],[925,158465,158466],{},"It occurs because lenses have a different refractive index for different wavelengths of light (the lens dispersion). The refractive index decreases with increasing wavelength.",[925,158468,158469],{},[963,158470],{"alt":158471,"src":158472},"Chromatic Aberration","https:\u002F\u002Fi.imgur.com\u002Fb0K2vPJ.jpg",[925,158474,158475],{},"Edges of this photo reflects chromatic abrration",[925,158477,158478,158479,944,158482,158485],{},"This results in noticeable defects  in isolated highlights or along strong luminosity edges. There are two kinds,",[1107,158480,158481],{}," axial",[1107,158483,158484],{},"lateral",", and in lenses it is the lateral aberration that is common.",[925,158487,158488],{},"Just like a glass prism dispersing a beam of light into a rainbow of colors, when different colors of light travel at different speeds in a medium (air , water etc.)  on to the sensor, the red, green and blue colors having different wavelength result in chromatic aberration. This has two major effects on the sensor too. Each channel (usually R, G, B) is blurry because it integrates a certain range of wavelengths that are imaged at different positions on the sensor.",[925,158490,158491],{},"Photographic lenses comprise various dispersive, electric glasses. These glasses do not refract all constituent colors of incident light at equal angles, and great efforts may be required to design an overall well-corrected lens that brings all colors together in the same focus. Moreover, the different channels are shifted with respect to one another. This usually yields colored fringes along edges with a high level of contrast.",[925,158493,158494],{},[963,158495],{"alt":158471,"src":158496},"http:\u002F\u002Fwww.dxomark.com\u002Fitext\u002Fmeasurements-and-protocols\u002Faberration_chromatique.jpg",[925,158498,158499],{},"Chromatic aberrations are those departures from perfect imaging that are due to dispersion. Whereas the Seidel aberrations are monochromatic, i.e. they occur also with light of a single color, chromatic aberrations are only noticed with polychromatic light.",[925,158501,158502],{},"The role played in this by sensor blooming  is disputed, and is probably tied to a different aberration known as “purple fringing.” Lateral chromatic aberration shows itself as two opposed colors, usually red-cyan or blue-yellow, and is increasingly common because of wide-range zooms, which are difficult for lens manufacturers to correct across the range.",[925,158504,158505],{},"(Image courtesy of DxO Labs)",{"title":998,"searchDepth":1012,"depth":1012,"links":158507},[],"2012-12-20","\u002Fimages\u002Fblog\u002Ffeatures\u002Fchromatic-aberration.jpg",{},{"title":85,"description":87},"blog\u002Fchromatic-aberration",[89],"wcUtZFqZuFM5kXdpM1NpP_ubBaZ9ao0wqNFYuffYCCc",{"id":158516,"title":532,"author":920,"body":158517,"date":158654,"description":534,"extension":1591,"image":158655,"meta":158656,"navigation":1050,"path":533,"seo":158657,"stem":158658,"tags":158659,"__hash__":158660},"blog\u002Fblog\u002Fjelly-bean-android-4-1-sdk-new-features.md",{"type":922,"value":158518,"toc":158636},[158519,158523,158534,158538,158541,158545,158548,158552,158555,158559,158562,158566,158569,158572,158576,158579,158583,158586,158590,158593,158597,158601,158604,158608,158616,158620,158623,158627,158630,158633],[953,158520,158522],{"id":158521},"_1whats-new-with-jelly-bean","1.What's new with Jelly Bean",[925,158524,158525,158526,158529,158530,158533],{},"Android 4.2 has improved in speed and simplicity . A completely ",[1107,158527,158528],{},"new camera experience"," that’s beyond smart, a ",[1107,158531,158532],{},"new form of typing"," that helps you power through your messages, and much more.",[1655,158535,158537],{"id":158536},"_11-one-tablet-many-users","1.1 One tablet, many users",[925,158539,158540],{},"With support for multiple users, you can give each person their own space. Everyone can have their own homescreen, background, widgets, apps and games – even individual high scores and levels! And since Android is built with multitasking at its core, it’s a snap to switch between users – no need to log in and out. But only available on tablets.",[1655,158542,158544],{"id":158543},"_12-share-whats-on-your-phone-on-the-big-screen","1.2. Share what’s on your phone on the big screen.",[925,158546,158547],{},"Jelly Bean allows devices to enable wireless display. You can share movies, YouTube videos, and anything that’s on your screen on an HDTV. Just connect a wireless display adapter to any HDMI-enabled TV to mirror what’s on your screen quickly and easily.",[1655,158549,158551],{"id":158550},"_13-daydream","1.3 Daydream",[925,158553,158554],{},"Daydream lets your Android device display useful and delightful information when idle or docked. Show off your photo albums, get the latest news from Google Currents, and more.",[1655,158556,158558],{"id":158557},"_14expandable-actionable-notifications","1.4.Expandable, actionable notifications.",[925,158560,158561],{},"Just swipe down from the top of the screen to see all your notifications in one place. Late for a meeting or missed a call? Take action in an instant directly from the notifications shade.",[1655,158563,158565],{"id":158564},"_15-fast-and-smooth","1.5 Fast and smooth.",[925,158567,158568],{},"Jelly Bean's buttery graphics and silky transitions, make moving between home screens and switching between apps effortless, like turning pages in a book.",[925,158570,158571],{},"More reactive and uniform touch responses mean you can almost feel the pixels beneath as your finger moves across the screen. Jelly Bean makes your Android device even more responsive by boosting your device's CPU instantly when you touch the screen, and turns it down when you don't need it to improve battery life.",[1655,158573,158575],{"id":158574},"_16-beam-photos-and-videos","1.6 Beam photos and videos",[925,158577,158578],{},"With Android Beam on Jelly Bean you can now easily share your photos and videos with just a simple tap, in addition to sharing contacts, web pages, YouTube videos, directions, and apps. Just touch two NFC-enabled Android devices back-to-back, then tap to beam whatever's on the screen to your friend.",[1655,158580,158582],{"id":158581},"_17-widgets-work-like-magic","1.7 Widgets work like magic",[925,158584,158585],{},"With Jelly Bean it's now even easier to personalize your home screen. As you place widgets on the screen, everything else automatically moves to make room. When they're too big, widgets resize on their own.",[1655,158587,158589],{"id":158588},"_18-accessibility","1.8 Accessibility",[925,158591,158592],{},"Enable screen magnification to easily zoom or pan the entire screen to get a closer look. Visually impaired users can now enter full-screen magnification with a triple-tap on the screen, and even type and interact with the device while zoomed in. Blind users can use Gesture Mode to reliably navigate the UI using touch and swipe gestures in combination with speech output.",[1655,158594,158596],{"id":158595},"_19-best-of-google","1.9 Best of Google",[953,158598,158600],{"id":158599},"live-in-the-now","Live in the Now",[925,158602,158603],{},"Google Now brings you the information you need, when and where you need it, before you even ask. Google Now tells you today's weather before you start your day, or when the next train will arrive as you’re standing on the platform. With the latest version, you can see popular photo spots nearby, track packages easily, get information about upcoming movies, and much more.",[953,158605,158607],{"id":158606},"a-new-look-for-google-search","A new look for Google Search.",[925,158609,158610,158611,158615],{},"It's easier than ever to quickly get answers, explore, and browse search results. Android also lets you search the web with your voice, and it's convenient for getting quick answers on the fly. It speaks back to you and is powered by the ",[933,158612,158614],{"href":158613},"http:\u002F\u002Fwww.google.com\u002Finsidesearch\u002Ffeatures\u002Fsearch\u002Fknowledge.html","Knowledge Graph",", bringing you a precise answer if it knows it, and precisely ranked search results, so you can always find out more.",[1655,158617,158619],{"id":158618},"_110-amazing-photo-sphere-camera","1.10 Amazing Photo Sphere camera",[925,158621,158622],{},"With Android 4.2, you can snap pictures in every direction that come together into incredible, immersive photo spheres that put you right inside the scene. View your photo spheres right on your phone, share them on Google+ with your friends and family, or even add them to Google Maps for the world to see.",[1655,158624,158626],{"id":158625},"_111-a-smarter-keyboard-now-with-gesture-typing","1.11 A smarter keyboard, now with Gesture Typing",[925,158628,158629],{},"With Gesture Typing – just glide your finger over the letters you want to type, and lift after each word. You don’t have to worry about spaces because they’re added automatically for you.",[925,158631,158632],{},"The keyboard can anticipate and predict the next word, so you can finish entire sentences just by selecting suggested words. Power through your messages like never before.",[925,158634,158635],{},"Android's dictionaries are now more accurate and relevant. With improved speech-to-text capabilities, voice typing on Android is even better. It works even when you don't have a data connection, so you can type with your voice everywhere you go.",{"title":998,"searchDepth":1012,"depth":1012,"links":158637},[158638,158649,158650],{"id":158521,"depth":1012,"text":158522,"children":158639},[158640,158641,158642,158643,158644,158645,158646,158647,158648],{"id":158536,"depth":1047,"text":158537},{"id":158543,"depth":1047,"text":158544},{"id":158550,"depth":1047,"text":158551},{"id":158557,"depth":1047,"text":158558},{"id":158564,"depth":1047,"text":158565},{"id":158574,"depth":1047,"text":158575},{"id":158581,"depth":1047,"text":158582},{"id":158588,"depth":1047,"text":158589},{"id":158595,"depth":1047,"text":158596},{"id":158599,"depth":1012,"text":158600},{"id":158606,"depth":1012,"text":158607,"children":158651},[158652,158653],{"id":158618,"depth":1047,"text":158619},{"id":158625,"depth":1047,"text":158626},"2012-12-19","\u002Fimages\u002Fblog\u002Ffeatures\u002Fjelly-bean-android-4-1-sdk-new-features.jpg",{},{"title":532,"description":534},"blog\u002Fjelly-bean-android-4-1-sdk-new-features",[361,536],"dhmkDqGTNaGyLoYSJCjceqGCFVVEVN1W2tKs7rYfuq0",1784954514917]