03 2017 档案
摘要:We can change the automatic behaviour of what order our grid items appear. We can even re-order the items in our grid to fill available space using th
阅读全文
摘要:In this lesson we cover all the details of how to sort a list of items using TypeScript. We also present a few tricks to make your sort logic more rea
阅读全文
摘要:What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situa
阅读全文
摘要:We can use the repeat() function if we have repeating specifications for columns and rows. With the minmax() function, we can define a size range for
阅读全文
摘要:Using minmax() is an amazingly useful way to specify boundaries for the smallest and largest size a grid track can be. Let’s find out how to apply it.
阅读全文
摘要:The problem we face daily when we do testing: The Data structure may changing, component outlook might changing... this makes it hard for us do testin
阅读全文
摘要:We can describe the nature of a grid in an ‘ASCII-art’ way with grid-template-areas. Let’s see how to specify the nature of our grid so that it’s inst
阅读全文
摘要:We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-template-columns and grid-template-rows, and how to r
阅读全文
摘要:It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.
阅读全文
摘要:It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid-template-columns and grid-template-rows, and to th
阅读全文
摘要:Create an app with routing config: If you want to generate a new module with routing , you can also do: Define env variable: You can create a custom e
阅读全文
摘要:If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm that data will be lost, React Router v4 provides a
阅读全文
摘要:Overriding a browser's current location without breaking the back button or causing an infinite redirect can be tricky sometimes. In this lesson we'll
阅读全文
摘要:If you want to reset or just update field value, you can do: reset: reset({key: value, k2:v2}); update: 1. patchValue({k: v}); update part of form fie
阅读全文
摘要:For example we have built a form: We want to reponse to each time 'stock' value changes. To do that we can subscrube 'valueChanges' for form. Notice t
阅读全文
摘要:forkJoin: When all observables complete emit the last value from each.
阅读全文
摘要:Using FormBuilder API can simply our code, for example we want to refactor following code by using FormBuilder: First thing we need to do is actually
阅读全文
摘要:React Router v4 allows us to render Routes as components wherever we like in our components. This can provide some interesting use cases for creating
阅读全文
摘要:We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so
阅读全文
摘要:There are many cases where we will need a catch-all route in our web applications. This can include 404-style routes when nothing is match or other us
阅读全文
摘要:With React Router v4 the entire library is built as a series of React components. That means that creating nested Routes is as simple as creating any
阅读全文
摘要:React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so that you can use that additional information as re
阅读全文
摘要:We can use regular expressions to more precisely define the paths to our routes in React Router v4. To add regex for router, we only need to add (), i
阅读全文
摘要:URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a parti
阅读全文
摘要:We often need to be able to apply style to navigation links based on the current route. In React Router v4 you can easily accomplish this with the Nav
阅读全文
摘要:'FormArray' can work with array of 'FormGroup' or 'FormControl'. So for Javascript, we have a 'form=new FormGroup()', inside formGoup, we have a 'stoc
阅读全文
摘要:First time dealing with Reactive form might be a little bit hard to understand. I have used Angular-formly for AngularJS bofore, what it does is using
阅读全文
摘要:If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link compone
阅读全文
摘要:React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. I
阅读全文
摘要:In this lesson we'll see how Ramda's path and pathOr functions can be used to safely access a deeply nested property from an object while avoiding the
阅读全文
摘要:Link to the artical. Zone detects any async opreations. Once an async oprations happens in Angular, Zone will notify change detection to kick in. Imag
阅读全文
摘要:TypeScript is very particular about what is and isn't allowed in a TS file to protect you from common developer errors. By default if you set the comp
阅读全文
摘要:LoopBack is a framework built on top of Express for creating APIs. It allows you to create end-to-end REST APIs that can access data from many data so
阅读全文
摘要:In this example, we are going to see how to use Pipe as providers inject into component. We have the pipe: We want to inject this pipe as provider to
阅读全文
摘要:For example we want to create a pipe, to tranform byte to Mb. We using it in html like: Create pipe:
阅读全文
摘要:In this post, we are going to create our own structure directive *ngFor. What it should looks like in HTML? So here, we have a '*myFor' directive. It
阅读全文
摘要:In this lesson, we'll use Promise.all to get an array that contains the resolved values from multiple promises. Then we'll see how we can use Ramda to
阅读全文
摘要:In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React we don't need to consider this most of the time be
阅读全文
摘要:Directive ables to change component behaives and lookings. Directive can also export some APIs which enable behaivor changes control by outside direct
阅读全文
摘要:How can we see a histogram of movies on IMDB with a particular rating? Or how much movies grossed at the box office each month? Or how many movies the
阅读全文
摘要:In this lesson, we'll use Ramda's toPairs function, along with map, join, concatand compose to create a reusable function that will convert an object
阅读全文
摘要:In this lesson, we'll filter a list of objects based on multiple conditions and we'll use Ramda's allPass function to create a joint predicate from mu
阅读全文
摘要:Create a new app: Then add you app to INSTALLED_APP array in settings.py. In modes.py we create new models: More about Field: https://docs.djangoproje
阅读全文
摘要:Delete example: Update example:
阅读全文
摘要:You can create an easy to chain API using TypeScript classes. Learn about the thisreturn type annotation and how it plays with function chaining and c
阅读全文
摘要:SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our s
阅读全文
摘要:We will use 'HostListener' and 'HostBinding' to accomplish the task. The HTML: Create directive: Add a HostListener when user type input: And we want
阅读全文
摘要:image: stopped container Run a container: Run in background. Stop it: Start it again: Stop all the running containers: Remove all the containers: remo
阅读全文
摘要:Install the rest api framework: In settings.py: Create serializers to transform python to JSON: It will according to 'Card' and 'List' Models to gener
阅读全文
摘要:When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the abili
阅读全文
摘要:We have all this data, but how do we answer questions about it? In this lesson we’ll learn how to filter down to just the information we’re looking fo
阅读全文
摘要:// Insert one row INSERT INTO movies (title, release_date, count_stars, director_id) VALUES ( 'Kill Bill', '10-10-2003', 3, 1 ); // Insert multi rows INSERT INTO movies (title, release_...
阅读全文
摘要:In this lesson, we'll look at how we can use Ramda's invoker and constructNfunctions to take methods of an object and turn them into reusable utility
阅读全文
摘要:Now let's see how to access admin interface. 1. Create a super user which can access admin interface: 2. Inside admin.py, we import the Models we have
阅读全文
摘要:TypeScript has 'interface' and 'type', so when to use which? It is recommended that to use 'interface' to define the props that obj should have. 'type
阅读全文
摘要:I can use <tamplete> syntax and a entry component as a container to create a dynamic component. Notice it will create a empty div as a placeholder in
阅读全文
摘要:To create a dynamic template, we need to a entry component as a placeholder. Then we can use entry component to create a new Tamplete into it. As we c
阅读全文
摘要:Learn how to create a table using the most widely-used data types (serial, varchar, integer, float, boolean, and date), and the most necessary constra
阅读全文
摘要:For example you have a TS app: The problem for this piece of code is that, you can assign 'kobe' to null, or undefined. And compiler won't catch this
阅读全文
摘要:The difference between sort, sortBy, sortWith is that: 1. sort: take function as args. 2. sortBy: take prop as args. 3. sortWith: take array of funcs
阅读全文
摘要:To add a new app, first cd to the project. Then run: After that a new folder call 'scrumboard' will be created in you applicaiton folder. Now cd to sc
阅读全文
摘要:In this lesson we'll take an array of objects and map it to a new array where each object is a subset of the original. We'll look at multiple ways to
阅读全文
摘要:Promise chains can be a powerful way to handle a series of transformations to the results of an async call. In some cases, additional promises are req
阅读全文
摘要:In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the c
阅读全文
摘要:So what is Point-free function. Take a look this example: To make it as point-free function, we need to get rid of person object we pass into the func
阅读全文
摘要:Naming things is hard and arguments in generic utility functions are no exception. Making functions "tacit" or "point free" removes the need for the e
阅读全文
摘要:After create a component dynamic, we are able to change the component's props and listen to its event. If we log out 'this.component.instance', we can
阅读全文
摘要:In this lesson we'll learn the basics of using lenses in Ramda and see how they enable you to focus changes on specific properties of an object while
阅读全文
摘要:Assume we already have a env created call 'demo-env': Start a new project: Run server:
阅读全文
摘要:Install python3 on MacOS: Come alone with python3, there are also some other tools are installed as well, for examlpe: 'pip, setuptools'... We need 'p
阅读全文