05 2016 档案
摘要:Operator repeat() is somewhat similar to retry(), but is not for handling operators. In this lesson we learn how repeat works.
阅读全文
摘要:Most of the common RxJS operators are about transformation, combination or filtering, but this lesson is about a new category, error handling operator
阅读全文
摘要:So How to do lazy loading for router in Angular 2. The nomarl way to write a router in Angular 2: You have SimpleCmp and UserCmp as child components.
阅读全文
摘要:Operator distinct() and its variants are an important type of Filtering operator. This lessons shows how they work and in what cases are they useful.
阅读全文
摘要:Debounce is known to be a rate-limiting operator, but it's not the only one. This lessons introduces you to throttleTime and throttle, which only drop
阅读全文
摘要:Debounce and debounceTime operators are similar to delayWhen and delay, with the difference that they may drop some emissions. This lesson teaches you
阅读全文
摘要:Let's say we want a parent state which is a abstract state. Two children states, one is for sinlge account view and another is for multi-accounts view
阅读全文
摘要:bufferToggle(open: Observable, () => close: Observalbe : Observalbe<T[]>) bufferToggle take two args, first is opening observable, seconde is a functi
阅读全文
摘要:This lessons teaches about delay and delayWhen: simple operators that time shift. delay(number | date) delayWhen( function :Observable): accept a func
阅读全文
摘要:This lesson will teach you about another horizontal combination operator: buffer and its variants. Buffer groups consecutive values together, emitting
阅读全文
摘要:All of the combination operators take two or more observables as input. These operators may also be alternatively called "vertical combination operato
阅读全文
摘要:PWA: Add to home screen Angular Universal Server side rendering: for achieving better proference on init loading Angular 2 CLI ng new myapp --mobile s
阅读全文
摘要:Clone: Link Modify the structure: Move css, js, image, index.html to an 'app' folder. manifest.json: name: Showing on splash screen. short_name: Showi
阅读全文
摘要:1. Clone the project: 2. install the web server: 3. Open the web server, set app folder as current folder, toggle the switch button to restart the ser
阅读全文
摘要:Operator combineLatest is not the only AND-style combinator. In this lesson we will explore withLatestFrom, another AND-style combination operator, an
阅读全文
摘要:CombineLatest and withLatestFrom are both AND-style combination operators. In this lesson, we will learn about zip, our last AND-style combinator. It
阅读全文
摘要:While merge is an OR-style combination operator, combineLatest is an AND-style combination operator. This lesson explains what AND-style combination m
阅读全文
摘要:Some Observables may complete, and we may want to append another Observable to the one which just completed. This lesson teaches you how to use the co
阅读全文
摘要:After takeUntil() and takeWhile() function, let's have a look on skipWhile() and skilUntil() functions. SkipWhile(predicate: function): Skip the value
阅读全文
摘要:take(), takeLast(), first(), last(), those opreators all take number or no param. takeUtil and takeWhile will take Observalbe and function. takeUntil(
阅读全文
摘要:Operators take(), skip(), and first() all refer to values emitted in the beginning of an Observable execution. In this lesson we will see similar oper
阅读全文
摘要:There are more operators in the filtering category besides filter(). This lesson will teach how take(), first(), and skip() are simply operators to ig
阅读全文
摘要:This lesson introduces filter: an operator that allows us to let only certain events pass, while ignoring others.
阅读全文
摘要:Link to CodeLab In this codelab, we'll retrace those steps but this time we'll use a tool called sw-precache to add offline functionality with only si
阅读全文
摘要:We just saw map which is a transformation operator. There are a couple of categories of operators, such as filtering, combination, flattening, etc. On
阅读全文
摘要:We made our first operator called multiplyBy, which looks a bit useful, but in practice we don't need it because it's too specific: it only does simpl
阅读全文
摘要:There are many operators available, and in order to understand them we need to have a simple way of communicating how they transform a source Observab
阅读全文
摘要:We have covered the basics of what is Observable.create, and other creation functions. Now lets finally dive into operators, which are the focus of th
阅读全文
摘要:Cache the avatars is little different from cache photos. We need to serve the page with our cache data and also go to the network for fetch avatars in
阅读全文
摘要:sw-toolbox: Github It provides a cononical implementation of all the runtime caching strategies that you need for you dynamice content. sw-precache: G
阅读全文
摘要:Mainly about Progressive web app: HTTPS Add to home screen Splash screen service worker notifications, bg sync offline notifications, bg sync Service
阅读全文
摘要:We cannot let photo always keep caching new data without clean the old data. If message is not display on the page anymore, we want to clean it. And a
阅读全文
摘要:To cache photo, You need to spreate cache db to save the photo. So in wittr example, we cache the text already, if there in the wittr there is photo,
阅读全文
摘要:When we save items to IndexDB, we need to think about clean the items or keep those in a short list.
阅读全文
摘要:In this lesson, you will learn how to host a static website on Amazon S3. I will show you how to create the buckets, create the bucket policy to allow
阅读全文
摘要:We want to use IDB to store the wittr messages. The logic is when the page start: In openDatabase(), we create Wittr db, set id as primary key and tim
阅读全文
摘要:import idb from 'idb'; var dbPromise = idb.open('test-db', 4, function (upgradeDb) { switch (upgradeDb.oldVersion) { case 0: // keyval store is already created at version 1 ...
阅读全文
摘要:Create a db: The oldVersion switch between old db and new db. So here we create a new people db. ReadWrite: Group By:TO do gourp by we need to create
阅读全文
摘要:Use the library indexedDB-promised. Create a database and stroe: Notice put() function take value frist then key. Read the key in stroe: Write value t
阅读全文
摘要:Intead of cache the root floder, we want to cache skeleton instead. Respond to requests for the root page with thepage skeleton from the cache:
阅读全文
摘要:CSS combinators allows us to reference the DOM relationship between two or more elements in CSS.
阅读全文
摘要:Learn how to use console.table to render arrays and objects in a tabular format for easy scanning over the values. We'll create some mock data and the
阅读全文
摘要:Learn to use console.time with console.timeEnd to get accurate timings of operations in javascript. This tool can help with javascript profiling and p
阅读全文
摘要:When the refersh button is clicked, we need to tell the waiting service worker to replace the current service worker right away. Then we refresh the p
阅读全文
摘要:In some rare cases, you need to ask user to refresh the browsser to update the version. Maybe because some secrity issues. As we have learnt so far. A
阅读全文
摘要:So once you modify the code, service worker will auto create a new one and it won't take control over until the previous service work total die(close
阅读全文
摘要:If you want your application works offline or lie-wifi. You need to use cache. API: Create Caches: Create single cache: Get the cache: When to start c
阅读全文
摘要:For example, if the url is not match to any API endpoint, we want to return 404 error message. So first thing, we want to send the request to the serv
阅读全文
摘要:Learn how to user console.count in order to log out how many times a given thing has happened. for(var i = 0; i < 10; i++){ var num = Math.random() *
阅读全文
摘要:Learn about console.assert, which is syntactic sugar for logging an error the console when a given condition is not met. It's useful, but may not do w
阅读全文
摘要:Organize your log output by grouping your logs into collapsable hierarchies using console.group(). for(var i = 0; i < 100; i++){ var num = Math.random
阅读全文
摘要:Previously we saw how to Hijacking all the reqest, but this is not useful. So now we want to see how to Hijacking one kind of request. For example we
阅读全文
摘要:With endsWith && startsWith, you can easily find out whether the string ends or starts with some other string: example: So you don't need to write reg
阅读全文
摘要:We want to do offline first, the first thing we need to do is we should able to catch the browser request and return our cache data from serice worker
阅读全文
摘要:You can debug with chrom dev tool: 1. Use console to debug service worker: Swith to sw.js context then you can access 'self' object 2. Set breakpoint:
阅读全文
摘要:The No1. is because, service worker only take control after it is loaded. But the first time we go to the page, service worker actually is not there,
阅读全文
摘要:Service worker stays between our browser and noetwork requests. It can help to fetch data from cache and cache the data from Internet. To get our serv
阅读全文
摘要:Why offline first? Imagin you are visiting a website, it is fine if wifi connection is good. It might be also "fine" if show you "Your don't have inte
阅读全文
摘要:If you are looking for a host website, you can try Firebase, heroku or AWS... Today, I tried to deploy a simple website to Firebase, it looks like pre
阅读全文
摘要:Get more mileage from your console output by going beyond mere string logging - log entire introspectable objects, log multiple items in one call, and
阅读全文
摘要:Go beyond console.log by learning about log levels, filtering log output and structuring your output to be meaningful and concise. The JavaScript cons
阅读全文
摘要:Because semantic-release requires a specific message format, it's easier to follow this convention using a tool called commitizen. In this lesson, we'
阅读全文
摘要:There are so many repeated steps when releasing a new version of a library. The tool semantic-release automates this process by pushing off the respon
阅读全文
摘要:Check the Github: https://github.com/ngrx/devtools Example:
阅读全文
摘要:Link: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
阅读全文
摘要:On Windows, just download the installer and install it. Configure: In your aws console: go to Security Credentials tab Access Keys (Access Key ID and
阅读全文
摘要:The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS. HTML: CSS:
阅读全文
摘要:For example we want to generate the code like this: <a href="#tab1">Tab 1</a><a href="#tab2">Tab 2</a><a href="#tab3">Tab 3</a> <div id="tab1" class="
阅读全文
摘要:Install: Init: Script: Check the src folder. Add mark to the file which you want to check: function to be checked: When the flow runs, it will report
阅读全文
摘要:Using the order property we alter the order in which flexbox children appear on the page, without making changes to the dom. Desktop Mobile
阅读全文
摘要:The Flexbox css spec allows for more adjustable layouts. The flex-directionproperty allows you to easily change the layout on the children of an eleme
阅读全文
摘要:We're going to use rootScope emit here to send out events and then we're going to listen for them in the run block. We're going to use rootScope on do
阅读全文
摘要:Somehow it looks like reflect in Java. For example: We define an mothod on the Object, it called defineMethod(). It accepts two arguements, one is met
阅读全文
摘要:In this lesson, we're going to use webpack to create a UMD (Universal Module Definition) build of our module so users can consume it in a browser. Ins
阅读全文
摘要:@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJS. The result is a tool and philosophy that will t
阅读全文