02 2019 档案
摘要:We annihilate the need for the ol' nested for loop using Applicatives. For example we have this kind of nested loop code: We can refactor it by using
阅读全文
摘要:Working our way backwards from solution to problem, we define an applicative functor, then use it to apply a function of multiple arguments. For examp
阅读全文
摘要:Given a string, find the longest subsequence consisting of a single character. Example: longest("ABAACDDDBBA") should return {'D': 3}.
阅读全文
摘要:We refactor a standard node callback style workflow into a composed task-based workflow. Original Code: Using Task: Using Async:
阅读全文
摘要:Let's examine a pointfree way to write these applicative calls. Since we know map is equal to of/ap, we can write generic functions that will ap as ma
阅读全文
摘要:We examine the data structure Task, see some constructors, familiar methods, and finally how it captures side effects through laziness. We are going t
阅读全文
摘要:We rewrite the Box example using lazy evaulation. Here is Box example: So how to make it as Lazy Box? The Answer is instead of passing a value to the
阅读全文
摘要:Previously we have seen how to use Concat with reduce: To simply this, we can use 'fold': Javascript arrray doesn't have 'fold' so we use immutable-ex
阅读全文
摘要:What is applicative functor: the ability to apply functors to each other. For example we have tow functors: Container(2), Container(3) We cannot just
阅读全文
摘要:Got the idea form this lesson. Not sure whether it is the ncessary, no othere better way to handle it. Have a TodoList component, every time types in
阅读全文
摘要:monoids is a semi-group with a neutral element. A semigroup, it does not have an element to return so it's not a safe operation, whereas with the mono
阅读全文
摘要:Before we introduce what is Monad, first let's recap what is a pointed functor: A pointed functor is a Functor with .of() method Why pointed Functor i
阅读全文
摘要:Each row and each column are already SORTED in the given matrix!
阅读全文
摘要:In this post, we are going to see how to use Ramda Lens. For example, we have data: R.lens: R.lens takes a getter and a setter: R.lensProp: There is a
阅读全文
摘要:As an alternate to useState, you could also use the useReducer hook that provides state and a dispatch method for triggering actions. In this lesson,
阅读全文
摘要:A pointed functor is a functor with an of method What's important here is the ability to drop any value in our type and start mapping away. The benifi
阅读全文
摘要:We will see a peculiar example of a pure function. This function contained a side-effect, but we dubbed it pure by wrapping its action in another func
阅读全文
摘要:An introduction to concatting items via the formal Semi-group interface. Semi-groups are simply a type with a concat method that are associative. We d
阅读全文
摘要:It is really important to understand function signature in functional programming. The the code example below: 'map' is pointfree version of any founc
阅读全文
摘要:In the class version of this component, we had a method called safeSetState which would check whether the component was still mounted before trying to
阅读全文
摘要:Transducers are composable algorithmic transformations. They are independent from the context of their input and output sources and specify only the e
阅读全文
摘要:Thanks to react-testing-library our tests are free of implementation details, so when we refactor components to hooks we generally don't need to make
阅读全文
摘要:Maybe has two types: Just / Nothing. Just() will just return the value that passed in. Nothing returns nothing... Just/ Nothing are both functors, the
阅读全文
摘要:We refactor a function that uses try/catch to a single composed expression using Either. We then introduce the chain function to deal with nested Eith
阅读全文
摘要:We can get a lot of utility through CLI tools invoked via npm scripts. Many of these tools have APIs with many flags and options, meaning we will freq
阅读全文
摘要:For a given array, we try to find set of pair which sums up as the given target number. For example, we are given the array and target as: We should b
阅读全文
摘要:We have a render prop based class component that allows us to make a GraphQL request with a given query string and variables and uses a GitHub graphql
阅读全文
摘要:About how to traverse binary tree, can refer this post.
阅读全文
摘要:The development and production modes in webpack optimize the output in different ways. In development mode, the focus is on faster builds and a better
阅读全文
摘要:For example we have: We want to get: Requirement: You can only do in array swap, you cannot create a new array. The way to do it: 1. Reverse whole str
阅读全文
摘要:Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code. 1. Create a new application: 2. Install @angular/elements
阅读全文
摘要:We would like the ability to group a series of actions to be dispatched with single dispatching functions used as handlers in various parts of our gam
阅读全文
摘要:vThere are three ways to solve Fibonacci problem 'First Recursion approach: As we can see to calculate fib(5), we need to calculate fib(3) twice and f
阅读全文
摘要:"If you can't measure it, you can't improve it." The first step when doing performance work is to measure meaningful metrics to establish a baseline f
阅读全文
摘要:We want to show an SVG avatar of the patio11bot, so we'll do that in three ways: Using an img tag - which is easy, but doesn't let us access the inter
阅读全文
摘要:For example we have those code: ngSwith code, and we want to convert to i18n as well, we can use 'select' keyword:
阅读全文
摘要:We only have a few dispatching functions that need to be known by our React Application. Each one actually has multiple actions that need to be dispat
阅读全文
摘要:With our Redux implementation lousy with State ADT based reducers, it is time to hook it all up to a React Shell. Having already built out some UI/UX
阅读全文
摘要:With a well defined demarcation point between Redux and our State ADT based model, hooking up to a Redux store is no different than any other Redux ba
阅读全文
摘要:We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it to a class with animation-name, set the duration
阅读全文
摘要:HTMLTemplates are part of the web components specification. In this lesson we will learn what are HTML templates, how to use them and how to use the p
阅读全文
摘要:When using ADTs in our code base, it can be difficult to use common debugging tools like watches and breakpoints. This is mainly due to the common pat
阅读全文
摘要:Not only will we need to give our initial state to a Redux store, we will also need to be able to reset our state at any time by dispatching an action
阅读全文
摘要:// Component: this.coursesTotal = this.course,length {coursesTotal, plural, =0 {No course in available.} =1 {One course is available.} other {A total of {{coursesTotal}} courses are availab...
阅读全文
摘要:Redux provides a convenient helper for combining many reducers called combineReducer, but it focuses in on specific attributes on our state, making it
阅读全文
摘要:To add translation to the application: 'i18n' is for Angular CLI to extract all the string which need to be translated. Run: It will generate messages
阅读全文
摘要:Proxies allow you to use functions that haven't yet been defined on an object. This means that you can invoke a function then create that function if
阅读全文
摘要:If the user hasn't used your application for a few minutes, you may want to log them out of the application automatically in case they've stepped away
阅读全文
摘要:Among the features introduced to the language of JavaScript in ES2019 is Array.prototype.flat. In this lesson we'll see just how easy the flat method
阅读全文
摘要:For example you are building your own module, the same as Lodash: my-lodash.d.ts Normally you can install @types for popluar 3rd-party libs, if you ha
阅读全文
摘要:To let people easily share the patio11bot, we'll add a "Tweet" button to the page. You can easily add a static share button by going to https://publis
阅读全文
摘要:Q1: Find the smallest value from array: O(n), cannot be improved anymore, because we have to loop though the array once. Q2: Find 2nd smallest value,
阅读全文
摘要:The typical Redux Reducer is function that takes in the previous state and an action and uses a switch case to determine how to transition the provide
阅读全文
摘要:By using the State ADT to define how our application state transitions over time, we clear up the need for a some of the boilerplate that we typically
阅读全文