1579356410
A browser-ready efficient scrolling container based on UITableView
React Infinite 0.7.1 only supports React 0.14 and above. Please pin your package to 0.6.0 for React 0.13 support.
- Support for both static and variable element heights
- Built-in support for infinite loading of upcoming pages
- Ability to use the window as the scroll container
- Ability to be used as a chat/messaging-style display
- 94% test coverage with Jest and typechecked with Facebook’s Flow
- Examples are available for experimentation
When a long list of DOM elements are placed in a scrollable container, all of them are kept in the DOM even when they are out the user’s view. This is highly inefficient, especially in cases when scrolling lists can be tens or hundreds of thousands of items long. React Infinite solves this by rendering only DOM nodes that the user is able to see or might soon see. Other DOM nodes are clustered and rendered as a single blank node.
Installation
In the Browser
The relevant files are dist/react-infinite.js and dist/react-infinite.min.js. You must have React available as a global variable named React on the window. Including either file, through concatenation or a script tag, will produce a global variable named Infinite representing the component.
In NPM
React Infinite uses a Universal Module Definition so you can use it in NPM as well. npm install this package and
source-js
var Infinite = require('react-infinite');
In Browserify
If you want to use the source with Browserify, the ES5-compiled source is directly requirable from the /build folder off NPM.
Otherwise, you can follow the instructions for NPM.
Basic Use
Elements of Equal Height
To use React Infinite with a list of elements you want to make scrollable, provide them to React Infinite as children.
text-xml
<Infinite containerHeight={200} elementHeight={40}>
<div className="one"/>
<div className="two"/>
<div className="three"/>
</Infinite>
Elements of Varying Heights
If not all of the children have the same height, you must provide an array of integers to the elementHeight prop instead.
text-xml
<Infinite containerHeight={200} elementHeight={[111, 252, 143]}>
<div className="111-px"/>
<div className="252-px"/>
<div className="143-px"/>
</Infinite>
Using the Window to Scroll (useWindowAsScrollContainer mode)
To use the entire window as a scroll container instead of just a single div (thus using window.scrollY instead of a DOM element’s scrollTop), add the useWindowAsScrollContainer prop.
text-xml
<Infinite containerHeight={200} elementHeight={[111, 252, 143]}
useWindowAsScrollContainer>
<div className="111-px"/>
<div className="252-px"/>
<div className="143-px"/>
</Infinite>
As A Chat or Message Box (displayBottomUpwards mode)
React Infinite now supports being used as a chat box, i.e. appended elements appear at the bottom when added, and the loading of the next page occurs when the user scrolls to the top of the container. To do so, simply add the displayBottomUpwards prop. A sample implementation can be consulted for more information - run gulp develop to compile the example files.
text-xml
<Infinite containerHeight={200} elementHeight={[111, 252, 143]}
displayBottomUpwards>
// insert messages for subsequent pages at this point
<div className="third-latest-chat"/>
<div className="second-latest-chat"/>
<div className="latest-chat-message"/>
</Infinite>
Note on Smooth Scrolling
A wrapper div is applied that disables pointer events on the children for a default of 150 milliseconds after the last user scroll action for browsers with inertial scrolling. To configure this, set timeScrollStateLastsForAfterUserScrolls.
Static Methods
Function Infinite.containerHeightScaleFactor(Number number)
This function allows a value to be specified for preloadBatchSize and preloadAdditionalHeight that is a relative to the container height. Please see the documentation for those two configuration options for further information on how to use it.
Configuration Options
Children
The children of the <Infinite> element are the components you want to render. This gives you as much flexibility as you need in the presentation of those components. Each child can be a different component if you desire. If you wish to render a set of children not all of which have the same height, you must map each component in the children array to an number representing its height and pass it in as the elementHeight prop.
Major Display Modes
By default, React Infinite renders a single element with the provided containerHeight, and the list sticks to the top like a regular table. However, you can choose to use the entire window as the scroll container or make React Infinite like a chatbox with the following options. They can be used together if you wish.
Bool useWindowAsScrollContainer
Defaults to false. This option allows the window to be used as the scroll container, instead of an arbitrary div, when it is set to true. This means that scroll position is detected by window.scrollY instead of the scrollTop of the div that React Infinite creates. Using this option is a way of achieving smoother scrolling on mobile before the problem is solved for container divs.
Bool displayBottomUpwards
Defaults to false. This allows React Infinite to be used as a chatbox. This means that the scroll is stuck to the bottom by default, and the user scrolls up to the top of the container to load the next page. The children are displayed in the same order.
Configuration Options
(Required) Number | [Number] elementHeight
If each child element has the same height, you can pass a number representing that height as the elementHeight prop. If the children do not all have the same height, you can pass an array which is a map the children to numbers representing their heights to the elementHeight prop.
Number containerHeight
The height of the scrolling container in pixels. This is a required prop if useWindowAsScrollContainer is not set to true.
Number | Object preloadBatchSize
Defaults to this.props.containerHeight * 0.5. Imagine the total height of the scrollable divs. Now divide this equally into blocks preloadBatchSize pixels high. Every time the container’s scrollTop enters each of these blocks the set of elements rendered in full are those contained within the block and elements that are within preloadAdditionalHeight above and below it.
When working with the window as the scroll container, it is sometimes useful to specify a scale factor relative to the container height as the batch size, so your code does not need to know anything about the window. To do this, use Infinite.containerHeightScaleFactor. So, for example, if you want the preloaded batch size to be twice the container height, write preloadBatchSize={Infinite.containerHeightScaleFactor(2)}.
Number | Object preloadAdditionalHeight
Defaults to this.props.containerHeight. The total height of the area in which elements are rendered in full is height of the current scroll block (see preloadBatchSize) as well as preloadAdditionalHeight above and below it.
When working with the window as the scroll container, it is sometimes useful to specify this relative to the container height. If you want the preloaded additional height to be twice the container height, write preloadAdditionalHeight={Infinite.containerHeightScaleFactor(2)}. Please see preloadBatchSize for more details.
Function handleScroll(DOMNode node)
Defaults to function(){}. A function that is called when the container is scrolled, i.e. when the onScroll event of the infinite scrolling container is fired. The only argument passed to it is the native DOM Node of the scrolling container.
Number infiniteLoadBeginEdgeOffset
Defaults to undefined, which means that infinite loading is disabled. To disable infinite loading, do not provide this property or set it to undefined.
Regular Mode When the user reaches this number of pixels from the bottom, the infinite load sequence will be triggered by showing the infinite load spinner delegate and calling the function onInfiniteLoad.
displayBottomUpwards mode When the user reaches this number of pixels from the top of the container, the infinite load sequence will be triggered by showing the infinite loading spinner delegate at the top of the container and calling onInfiniteLoad.
Function onInfiniteLoad()
Defaults to function(){}. This function is called when the scroll exceeds infiniteLoadBeginEdgeOffset. Before this function is called, the infinite loading spinner is automatically turned on. You can set up infinite scrolling with this function like this:
- Fetch a new page of records from the appropriate API
- When the AJAX call returns, send the new list of elements (with the items that were just fetched) back as the children of React Infinite.
- Set React Infinite’s
isInfiniteLoadingprop tofalseto hide the loading spinner display
onInfiniteLoad relies heavily on passing props as a means of communication in the style of idiomatic React.
React Node loadingSpinnerDelegate
Defaults to <div/>. The element that is provided is used to render the loading view when React Infinite’s isInfiniteLoading property is set to true. A React Node is anything that satisfies React.PropTypes.node.
Bool isInfiniteLoading
Defaults to false. This property determines whether the infinite spinner is showing.
Number timeScrollStateLastsForAfterUserScrolls
Defaults to 150 (in milliseconds). On Apple and some other devices, scroll is inertial. This means that the window continues to scroll for several hundred milliseconds after an onScroll event is fired. To prevent janky behavior, we do not want pointer-events to reactivate before the window has finished moving. Setting this parameter causes the Infinite component to think that the user is still scrolling for the specified number of milliseconds after the last onScroll event is received.
String className
Allows a CSS class to be set on the scrollable container.
Sample Code
Code samples are now available in the /examples directory for your perusal. Two examples are provided, one for constant height with infinite loading and another with random variable heights with infinite loading. To generate the files necessary for the examples, execute npm install && gulp build -E. You may need to first install gulp with npm install -g gulp.
To get you started, here is some sample code that implements an infinite scroll with an simulated delay of 2.5 seconds. A live demo of this example is available on our blog.
source-js
var createReactClass = require('create-react-class');
var ListItem = createReactClass({
render: function() {
return <div className="infinite-list-item">
List Item {this.props.num}
</div>;
}
});
var InfiniteList = createReactClass({
getInitialState: function() {
return {
elements: this.buildElements(0, 20),
isInfiniteLoading: false
}
},
buildElements: function(start, end) {
var elements = [];
for (var i = start; i < end; i++) {
elements.push(<ListItem key={i} num={i}/>)
}
return elements;
},
handleInfiniteLoad: function() {
var that = this;
this.setState({
isInfiniteLoading: true
});
setTimeout(function() {
var elemLength = that.state.elements.length,
newElements = that.buildElements(elemLength, elemLength + 1000);
that.setState({
isInfiniteLoading: false,
elements: that.state.elements.concat(newElements)
});
}, 2500);
},
elementInfiniteLoad: function() {
return <div className="infinite-list-item">
Loading...
</div>;
},
render: function() {
return <Infinite elementHeight={40}
containerHeight={250}
infiniteLoadBeginEdgeOffset={200}
onInfiniteLoad={this.handleInfiniteLoad}
loadingSpinnerDelegate={this.elementInfiniteLoad()}
isInfiniteLoading={this.state.isInfiniteLoading}
>
{this.state.elements}
</Infinite>;
}
});
ReactDOM.render(<InfiniteList/>, document.getElementById('react-example-one'));
SeatGeek also currently uses React Infinite in production on our event pages; because we only have pages for events in the future, a link would not be appropriate. To see one, head to one of our team pages for the New York Giants, or the New York Mets, or the New York Knicks, and click on the green button for an event to see them in action in the Omnibox.
Download Details:
Author: seatgeek
Official Website: https://github.com/seatgeek/react-infinite
#reactjs #javascript
What is GEEK
Buddha Community
1603763460
AWS Bottlerocket vs. Google Container-Optimized OS: Which Should You Use and When
What’s the difference between popular Container-Centric OS choices, Google’s Container-Optimized OS, and AWS’s Bottlerocket? The concepts underlying containers have been around for many years. Container technologies like Docker, Kubernetes, and an entire ecosystem of products, as well as best practices, have emerged in the last few years. This has enabled different kinds of applications to be containerized.
Web service providers like Amazon AWS and Google are giving a further boost to container innovation, for enterprises to adopt and use containers at scale. This will help them to reap the benefits containers bring, including increased portability and greater efficiency.
Linux-based OS, AWS Bottlerocket is a new option, designed for running containers on virtual machines (VMs) or bare-metal hosts. In this article, you will learn the core uses and differences between the two open-source OS.
**AWS Bottlerocket **
It is an open-source, stripped-down Linux distribution that’s similar to projects like Google’s Container-Optimized OS. This single-step update process helps reduce management overhead.
_It makes OS updates easy to automate using container orchestration services such as Amazon Elastic Container Service (ECS) and Amazon Elastic Kubernetes Service (EKS). _
**Google Container-Optimized OS **
It’s an OS image for Google Compute Engine VMs that’s optimized for running Docker containers. It allows you to bring up your Docker containers on Google Cloud Platform securely, and quickly. It is based on the open-source Chromium OS project and is maintained by Google.
But before diving into the core differences, let us give you a basic overview of containers, VMs, and container-optimized OS, and its underlying challenges to better understand the differences.
If you are already aware of all the underlying processes of containers, then you can skip to the main differences for AWS Bottlerocket vs Google Container-Optimized OS.
#containers #amazon-aws #google-cloud #container-optimized-os #aws-containers #docker-containers #linux-based-os #orchestration
1579356410
A browser-ready efficient scrolling container based on UITableView
React Infinite 0.7.1 only supports React 0.14 and above. Please pin your package to 0.6.0 for React 0.13 support.
- Support for both static and variable element heights
- Built-in support for infinite loading of upcoming pages
- Ability to use the window as the scroll container
- Ability to be used as a chat/messaging-style display
- 94% test coverage with Jest and typechecked with Facebook’s Flow
- Examples are available for experimentation
When a long list of DOM elements are placed in a scrollable container, all of them are kept in the DOM even when they are out the user’s view. This is highly inefficient, especially in cases when scrolling lists can be tens or hundreds of thousands of items long. React Infinite solves this by rendering only DOM nodes that the user is able to see or might soon see. Other DOM nodes are clustered and rendered as a single blank node.
Installation
In the Browser
The relevant files are dist/react-infinite.js and dist/react-infinite.min.js. You must have React available as a global variable named React on the window. Including either file, through concatenation or a script tag, will produce a global variable named Infinite representing the component.
In NPM
React Infinite uses a Universal Module Definition so you can use it in NPM as well. npm install this package and
source-js
var Infinite = require('react-infinite');
In Browserify
If you want to use the source with Browserify, the ES5-compiled source is directly requirable from the /build folder off NPM.
Otherwise, you can follow the instructions for NPM.
Basic Use
Elements of Equal Height
To use React Infinite with a list of elements you want to make scrollable, provide them to React Infinite as children.
text-xml
<Infinite containerHeight={200} elementHeight={40}>
<div className="one"/>
<div className="two"/>
<div className="three"/>
</Infinite>
Elements of Varying Heights
If not all of the children have the same height, you must provide an array of integers to the elementHeight prop instead.
text-xml
<Infinite containerHeight={200} elementHeight={[111, 252, 143]}>
<div className="111-px"/>
<div className="252-px"/>
<div className="143-px"/>
</Infinite>
Using the Window to Scroll (useWindowAsScrollContainer mode)
To use the entire window as a scroll container instead of just a single div (thus using window.scrollY instead of a DOM element’s scrollTop), add the useWindowAsScrollContainer prop.
text-xml
<Infinite containerHeight={200} elementHeight={[111, 252, 143]}
useWindowAsScrollContainer>
<div className="111-px"/>
<div className="252-px"/>
<div className="143-px"/>
</Infinite>
As A Chat or Message Box (displayBottomUpwards mode)
React Infinite now supports being used as a chat box, i.e. appended elements appear at the bottom when added, and the loading of the next page occurs when the user scrolls to the top of the container. To do so, simply add the displayBottomUpwards prop. A sample implementation can be consulted for more information - run gulp develop to compile the example files.
text-xml
<Infinite containerHeight={200} elementHeight={[111, 252, 143]}
displayBottomUpwards>
// insert messages for subsequent pages at this point
<div className="third-latest-chat"/>
<div className="second-latest-chat"/>
<div className="latest-chat-message"/>
</Infinite>
Note on Smooth Scrolling
A wrapper div is applied that disables pointer events on the children for a default of 150 milliseconds after the last user scroll action for browsers with inertial scrolling. To configure this, set timeScrollStateLastsForAfterUserScrolls.
Static Methods
Function Infinite.containerHeightScaleFactor(Number number)
This function allows a value to be specified for preloadBatchSize and preloadAdditionalHeight that is a relative to the container height. Please see the documentation for those two configuration options for further information on how to use it.
Configuration Options
Children
The children of the <Infinite> element are the components you want to render. This gives you as much flexibility as you need in the presentation of those components. Each child can be a different component if you desire. If you wish to render a set of children not all of which have the same height, you must map each component in the children array to an number representing its height and pass it in as the elementHeight prop.
Major Display Modes
By default, React Infinite renders a single element with the provided containerHeight, and the list sticks to the top like a regular table. However, you can choose to use the entire window as the scroll container or make React Infinite like a chatbox with the following options. They can be used together if you wish.
Bool useWindowAsScrollContainer
Defaults to false. This option allows the window to be used as the scroll container, instead of an arbitrary div, when it is set to true. This means that scroll position is detected by window.scrollY instead of the scrollTop of the div that React Infinite creates. Using this option is a way of achieving smoother scrolling on mobile before the problem is solved for container divs.
Bool displayBottomUpwards
Defaults to false. This allows React Infinite to be used as a chatbox. This means that the scroll is stuck to the bottom by default, and the user scrolls up to the top of the container to load the next page. The children are displayed in the same order.
Configuration Options
(Required) Number | [Number] elementHeight
If each child element has the same height, you can pass a number representing that height as the elementHeight prop. If the children do not all have the same height, you can pass an array which is a map the children to numbers representing their heights to the elementHeight prop.
Number containerHeight
The height of the scrolling container in pixels. This is a required prop if useWindowAsScrollContainer is not set to true.
Number | Object preloadBatchSize
Defaults to this.props.containerHeight * 0.5. Imagine the total height of the scrollable divs. Now divide this equally into blocks preloadBatchSize pixels high. Every time the container’s scrollTop enters each of these blocks the set of elements rendered in full are those contained within the block and elements that are within preloadAdditionalHeight above and below it.
When working with the window as the scroll container, it is sometimes useful to specify a scale factor relative to the container height as the batch size, so your code does not need to know anything about the window. To do this, use Infinite.containerHeightScaleFactor. So, for example, if you want the preloaded batch size to be twice the container height, write preloadBatchSize={Infinite.containerHeightScaleFactor(2)}.
Number | Object preloadAdditionalHeight
Defaults to this.props.containerHeight. The total height of the area in which elements are rendered in full is height of the current scroll block (see preloadBatchSize) as well as preloadAdditionalHeight above and below it.
When working with the window as the scroll container, it is sometimes useful to specify this relative to the container height. If you want the preloaded additional height to be twice the container height, write preloadAdditionalHeight={Infinite.containerHeightScaleFactor(2)}. Please see preloadBatchSize for more details.
Function handleScroll(DOMNode node)
Defaults to function(){}. A function that is called when the container is scrolled, i.e. when the onScroll event of the infinite scrolling container is fired. The only argument passed to it is the native DOM Node of the scrolling container.
Number infiniteLoadBeginEdgeOffset
Defaults to undefined, which means that infinite loading is disabled. To disable infinite loading, do not provide this property or set it to undefined.
Regular Mode When the user reaches this number of pixels from the bottom, the infinite load sequence will be triggered by showing the infinite load spinner delegate and calling the function onInfiniteLoad.
displayBottomUpwards mode When the user reaches this number of pixels from the top of the container, the infinite load sequence will be triggered by showing the infinite loading spinner delegate at the top of the container and calling onInfiniteLoad.
Function onInfiniteLoad()
Defaults to function(){}. This function is called when the scroll exceeds infiniteLoadBeginEdgeOffset. Before this function is called, the infinite loading spinner is automatically turned on. You can set up infinite scrolling with this function like this:
- Fetch a new page of records from the appropriate API
- When the AJAX call returns, send the new list of elements (with the items that were just fetched) back as the children of React Infinite.
- Set React Infinite’s
isInfiniteLoadingprop tofalseto hide the loading spinner display
onInfiniteLoad relies heavily on passing props as a means of communication in the style of idiomatic React.
React Node loadingSpinnerDelegate
Defaults to <div/>. The element that is provided is used to render the loading view when React Infinite’s isInfiniteLoading property is set to true. A React Node is anything that satisfies React.PropTypes.node.
Bool isInfiniteLoading
Defaults to false. This property determines whether the infinite spinner is showing.
Number timeScrollStateLastsForAfterUserScrolls
Defaults to 150 (in milliseconds). On Apple and some other devices, scroll is inertial. This means that the window continues to scroll for several hundred milliseconds after an onScroll event is fired. To prevent janky behavior, we do not want pointer-events to reactivate before the window has finished moving. Setting this parameter causes the Infinite component to think that the user is still scrolling for the specified number of milliseconds after the last onScroll event is received.
String className
Allows a CSS class to be set on the scrollable container.
Sample Code
Code samples are now available in the /examples directory for your perusal. Two examples are provided, one for constant height with infinite loading and another with random variable heights with infinite loading. To generate the files necessary for the examples, execute npm install && gulp build -E. You may need to first install gulp with npm install -g gulp.
To get you started, here is some sample code that implements an infinite scroll with an simulated delay of 2.5 seconds. A live demo of this example is available on our blog.
source-js
var createReactClass = require('create-react-class');
var ListItem = createReactClass({
render: function() {
return <div className="infinite-list-item">
List Item {this.props.num}
</div>;
}
});
var InfiniteList = createReactClass({
getInitialState: function() {
return {
elements: this.buildElements(0, 20),
isInfiniteLoading: false
}
},
buildElements: function(start, end) {
var elements = [];
for (var i = start; i < end; i++) {
elements.push(<ListItem key={i} num={i}/>)
}
return elements;
},
handleInfiniteLoad: function() {
var that = this;
this.setState({
isInfiniteLoading: true
});
setTimeout(function() {
var elemLength = that.state.elements.length,
newElements = that.buildElements(elemLength, elemLength + 1000);
that.setState({
isInfiniteLoading: false,
elements: that.state.elements.concat(newElements)
});
}, 2500);
},
elementInfiniteLoad: function() {
return <div className="infinite-list-item">
Loading...
</div>;
},
render: function() {
return <Infinite elementHeight={40}
containerHeight={250}
infiniteLoadBeginEdgeOffset={200}
onInfiniteLoad={this.handleInfiniteLoad}
loadingSpinnerDelegate={this.elementInfiniteLoad()}
isInfiniteLoading={this.state.isInfiniteLoading}
>
{this.state.elements}
</Infinite>;
}
});
ReactDOM.render(<InfiniteList/>, document.getElementById('react-example-one'));
SeatGeek also currently uses React Infinite in production on our event pages; because we only have pages for events in the future, a link would not be appropriate. To see one, head to one of our team pages for the New York Giants, or the New York Mets, or the New York Knicks, and click on the green button for an event to see them in action in the Omnibox.
Download Details:
Author: seatgeek
Official Website: https://github.com/seatgeek/react-infinite
#reactjs #javascript
1649711460
A browser-ready efficient scrolling container based on UITableView
React Infinite
A browser-ready efficient scrolling container based on UITableView.
Installation
In the Browser
The relevant files are dist/react-infinite.js and dist/react-infinite.min.js. You must have React available as a global variable named React on the window. Including either file, through concatenation or a script tag, will produce a global variable named Infinite representing the component.
In NPM
React Infinite uses a Universal Module Definition so you can use it in NPM as well. npm install this package and
var Infinite = require('react-infinite');
In Browserify
If you want to use the source with Browserify, the ES5-compiled source is directly requirable from the /build folder off NPM.
Otherwise, you can follow the instructions for NPM.
Basic Use
Elements of Equal Height
To use React Infinite with a list of elements you want to make scrollable, provide them to React Infinite as children.
<Infinite containerHeight={200} elementHeight={40}>
<div className="one"/>
<div className="two"/>
<div className="three"/>
</Infinite>
Elements of Varying Heights
If not all of the children have the same height, you must provide an array of integers to the elementHeight prop instead.
<Infinite containerHeight={200} elementHeight={[111, 252, 143]}>
<div className="111-px"/>
<div className="252-px"/>
<div className="143-px"/>
</Infinite>
Using the Window to Scroll (useWindowAsScrollContainer mode)
To use the entire window as a scroll container instead of just a single div (thus using window.scrollY instead of a DOM element's scrollTop), add the useWindowAsScrollContainer prop.
<Infinite containerHeight={200} elementHeight={[111, 252, 143]}
useWindowAsScrollContainer>
<div className="111-px"/>
<div className="252-px"/>
<div className="143-px"/>
</Infinite>
As A Chat or Message Box (displayBottomUpwards mode)
React Infinite now supports being used as a chat box, i.e. appended elements appear at the bottom when added, and the loading of the next page occurs when the user scrolls to the top of the container. To do so, simply add the displayBottomUpwards prop. A sample implementation can be consulted for more information - run gulp develop to compile the example files.
<Infinite containerHeight={200} elementHeight={[111, 252, 143]}
displayBottomUpwards>
// insert messages for subsequent pages at this point
<div className="third-latest-chat"/>
<div className="second-latest-chat"/>
<div className="latest-chat-message"/>
</Infinite>
Note on Smooth Scrolling
A wrapper div is applied that disables pointer events on the children for a default of 150 milliseconds after the last user scroll action for browsers with inertial scrolling. To configure this, set timeScrollStateLastsForAfterUserScrolls.
Static Methods
Function Infinite.containerHeightScaleFactor(Number number)
This function allows a value to be specified for preloadBatchSize and preloadAdditionalHeight that is a relative to the container height. Please see the documentation for those two configuration options for further information on how to use it.
Configuration Options
Children
The children of the <Infinite> element are the components you want to render. This gives you as much flexibility as you need in the presentation of those components. Each child can be a different component if you desire. If you wish to render a set of children not all of which have the same height, you must map each component in the children array to an number representing its height and pass it in as the elementHeight prop.
Major Display Modes
By default, React Infinite renders a single element with the provided containerHeight, and the list sticks to the top like a regular table. However, you can choose to use the entire window as the scroll container or make React Infinite like a chatbox with the following options. They can be used together if you wish.
Bool useWindowAsScrollContainer
Defaults to false. This option allows the window to be used as the scroll container, instead of an arbitrary div, when it is set to true. This means that scroll position is detected by window.scrollY instead of the scrollTop of the div that React Infinite creates. Using this option is a way of achieving smoother scrolling on mobile before the problem is solved for container divs.
Bool displayBottomUpwards
Defaults to false. This allows React Infinite to be used as a chatbox. This means that the scroll is stuck to the bottom by default, and the user scrolls up to the top of the container to load the next page. The children are displayed in the same order.
Configuration Options
(Required) Number | [Number] elementHeight
If each child element has the same height, you can pass a number representing that height as the elementHeight prop. If the children do not all have the same height, you can pass an array which is a map the children to numbers representing their heights to the elementHeight prop.
Number containerHeight
The height of the scrolling container in pixels. This is a required prop if useWindowAsScrollContainer is not set to true.
Number | Object preloadBatchSize
Defaults to this.props.containerHeight * 0.5. Imagine the total height of the scrollable divs. Now divide this equally into blocks preloadBatchSize pixels high. Every time the container's scrollTop enters each of these blocks the set of elements rendered in full are those contained within the block and elements that are within preloadAdditionalHeight above and below it.
When working with the window as the scroll container, it is sometimes useful to specify a scale factor relative to the container height as the batch size, so your code does not need to know anything about the window. To do this, use Infinite.containerHeightScaleFactor. So, for example, if you want the preloaded batch size to be twice the container height, write preloadBatchSize={Infinite.containerHeightScaleFactor(2)}.
Number | Object preloadAdditionalHeight
Defaults to this.props.containerHeight. The total height of the area in which elements are rendered in full is height of the current scroll block (see preloadBatchSize) as well as preloadAdditionalHeight above and below it.
When working with the window as the scroll container, it is sometimes useful to specify this relative to the container height. If you want the preloaded additional height to be twice the container height, write preloadAdditionalHeight={Infinite.containerHeightScaleFactor(2)}. Please see preloadBatchSize for more details.
Function handleScroll(DOMNode node)
Defaults to function(){}. A function that is called when the container is scrolled, i.e. when the onScroll event of the infinite scrolling container is fired. The only argument passed to it is the native DOM Node of the scrolling container.
Number infiniteLoadBeginEdgeOffset
Defaults to undefined, which means that infinite loading is disabled. To disable infinite loading, do not provide this property or set it to undefined.
Regular Mode When the user reaches this number of pixels from the bottom, the infinite load sequence will be triggered by showing the infinite load spinner delegate and calling the function onInfiniteLoad.
displayBottomUpwards mode When the user reaches this number of pixels from the top of the container, the infinite load sequence will be triggered by showing the infinite loading spinner delegate at the top of the container and calling onInfiniteLoad.
Function onInfiniteLoad()
Defaults to function(){}. This function is called when the scroll exceeds infiniteLoadBeginEdgeOffset. Before this function is called, the infinite loading spinner is automatically turned on. You can set up infinite scrolling with this function like this:
- Fetch a new page of records from the appropriate API
- When the AJAX call returns, send the new list of elements (with the items that were just fetched) back as the children of React Infinite.
- Set React Infinite's
isInfiniteLoadingprop tofalseto hide the loading spinner display
onInfiniteLoad relies heavily on passing props as a means of communication in the style of idiomatic React.
React Node loadingSpinnerDelegate
Defaults to <div/>. The element that is provided is used to render the loading view when React Infinite's isInfiniteLoading property is set to true. A React Node is anything that satisfies React.PropTypes.node.
Bool isInfiniteLoading
Defaults to false. This property determines whether the infinite spinner is showing.
Number timeScrollStateLastsForAfterUserScrolls
Defaults to 150 (in milliseconds). On Apple and some other devices, scroll is inertial. This means that the window continues to scroll for several hundred milliseconds after an onScroll event is fired. To prevent janky behavior, we do not want pointer-events to reactivate before the window has finished moving. Setting this parameter causes the Infinite component to think that the user is still scrolling for the specified number of milliseconds after the last onScroll event is received.
String className
Allows a CSS class to be set on the scrollable container.
Sample Code
Code samples are now available in the /examples directory for your perusal. Two examples are provided, one for constant height with infinite loading and another with random variable heights with infinite loading. To generate the files necessary for the examples, execute npm install && gulp build -E. You may need to first install gulp with npm install -g gulp.
To get you started, here is some sample code that implements an infinite scroll with an simulated delay of 2.5 seconds. A live demo of this example is available on our blog.
var createReactClass = require('create-react-class');
var ListItem = createReactClass({
render: function() {
return <div className="infinite-list-item">
List Item {this.props.num}
</div>;
}
});
var InfiniteList = createReactClass({
getInitialState: function() {
return {
elements: this.buildElements(0, 20),
isInfiniteLoading: false
}
},
buildElements: function(start, end) {
var elements = [];
for (var i = start; i < end; i++) {
elements.push(<ListItem key={i} num={i}/>)
}
return elements;
},
handleInfiniteLoad: function() {
var that = this;
this.setState({
isInfiniteLoading: true
});
setTimeout(function() {
var elemLength = that.state.elements.length,
newElements = that.buildElements(elemLength, elemLength + 1000);
that.setState({
isInfiniteLoading: false,
elements: that.state.elements.concat(newElements)
});
}, 2500);
},
elementInfiniteLoad: function() {
return <div className="infinite-list-item">
Loading...
</div>;
},
render: function() {
return <Infinite elementHeight={40}
containerHeight={250}
infiniteLoadBeginEdgeOffset={200}
onInfiniteLoad={this.handleInfiniteLoad}
loadingSpinnerDelegate={this.elementInfiniteLoad()}
isInfiniteLoading={this.state.isInfiniteLoading}
>
{this.state.elements}
</Infinite>;
}
});
ReactDOM.render(<InfiniteList/>, document.getElementById('react-example-one'));
SeatGeek also currently uses React Infinite in production on our event pages; because we only have pages for events in the future, a link would not be appropriate. To see one, head to one of our team pages for the New York Giants, or the New York Mets, or the New York Knicks, and click on the green button for an event to see them in action in the Omnibox.
Contributing to React Infinite
Useful notes for how to contribute are available.
React Infinite 0.7.1 only supports React 0.14 and above. Please pin your package to 0.6.0 for React 0.13 support.
- Support for both static and variable element heights
- Built-in support for infinite loading of upcoming pages
- Ability to use the window as the scroll container
- Ability to be used as a chat/messaging-style display
- 94% test coverage with Jest and typechecked with Facebook's Flow
- Examples are available for experimentation
When a long list of DOM elements are placed in a scrollable container, all of them are kept in the DOM even when they are out the user's view. This is highly inefficient, especially in cases when scrolling lists can be tens or hundreds of thousands of items long. React Infinite solves this by rendering only DOM nodes that the user is able to see or might soon see. Other DOM nodes are clustered and rendered as a single blank node.
Author: Seatgeek
Source Code: https://github.com/seatgeek/react-infinite
License: View license
1602964260
50+ Useful Kubernetes Tools for 2020 - Part 2
Introduction
Last year, we provided a list of Kubernetes tools that proved so popular we have decided to curate another list of some useful additions for working with the platform—among which are many tools that we personally use here at Caylent. Check out the original tools list here in case you missed it.
According to a recent survey done by Stackrox, the dominance Kubernetes enjoys in the market continues to be reinforced, with 86% of respondents using it for container orchestration.
And as you can see below, more and more companies are jumping into containerization for their apps. If you’re among them, here are some tools to aid you going forward as Kubernetes continues its rapid growth.
#blog #tools #amazon elastic kubernetes service #application security #aws kms #botkube #caylent #cli #container monitoring #container orchestration tools #container security #containers #continuous delivery #continuous deployment #continuous integration #contour #developers #development #developments #draft #eksctl #firewall #gcp #github #harbor #helm #helm charts #helm-2to3 #helm-aws-secret-plugin #helm-docs #helm-operator-get-started #helm-secrets #iam #json #k-rail #k3s #k3sup #k8s #keel.sh #keycloak #kiali #kiam #klum #knative #krew #ksniff #kube #kube-prod-runtime #kube-ps1 #kube-scan #kube-state-metrics #kube2iam #kubeapps #kubebuilder #kubeconfig #kubectl #kubectl-aws-secrets #kubefwd #kubernetes #kubernetes command line tool #kubernetes configuration #kubernetes deployment #kubernetes in development #kubernetes in production #kubernetes ingress #kubernetes interfaces #kubernetes monitoring #kubernetes networking #kubernetes observability #kubernetes plugins #kubernetes secrets #kubernetes security #kubernetes security best practices #kubernetes security vendors #kubernetes service discovery #kubernetic #kubesec #kubeterminal #kubeval #kudo #kuma #microsoft azure key vault #mozilla sops #octant #octarine #open source #palo alto kubernetes security #permission-manager #pgp #rafay #rakess #rancher #rook #secrets operations #serverless function #service mesh #shell-operator #snyk #snyk container #sonobuoy #strongdm #tcpdump #tenkai #testing #tigera #tilt #vert.x #wireshark #yaml
1599651600
These are the Top 5 Browsers for Privacy and Security
Anonymity on the internet has been in a steady state of decline. In the interest of reversing that trend, this is a list of the top five browsers for privacy and security. While it should be noted that nothing published on the internet is perfectly private or secure, these are the browsers that will do the most to get you close.
The issue
Modern digital marketing agencies, eCommerce sites, and ISPs use cookies to show ads or monetize your browsing data without permission. If there’s a buck to be made, someone will make it.
But anonymous browsing can act as some sort of cover. Not complete cover, however, but more than it’s more than nothing. To enhance your privacy and security while browsing the web, consider these five browsers.
Tor is fully open-sourced and great for anonymous web browsing. It protects against snooping on web browsing activity. Nowadays a lot of ads agencies use this technique to serve you what they believe to be perfectly tantalizing ad content.
Tor is a cross-platform web browser, which means it supports platforms like Windows, macOS, Linu and more. It can also be used as via a USB device and configured to a user’s specifications. While many say it’s a browser designed for hackers, it can also be used by those who simply value their privacy.
Tor hides your IP, which means your physical location is unavailable to those looking for where you’re searching what. It also helps users get around restrictions used by governments looking to block what can be accessed within their borders.
Pros:
- An open-source browser
- Committed to privacy
- Comes with .onion browser extension for extra security
- Shields IP addresses from websites
- Uses strong server relays
Cons:
- Slower than regular browsers
- Doesn’t block malware
- Tells websites Tor is in use
#security #privacy #browsers #privacy-browsers #browsers-for-security #tor #secure-browsers