amowu

import styled from "styled-components"

const Sky = styled.section`
  ${props => props.dusk && 'background-color: dusk' }
  ${props => props.day && 'background-color: white' }
  ${props => props.night && 'background-color: black' }
`;

// You can use it like so:
<Sky dusk />

amowu

Continuous deployment of React websites to Amazon S3

This sample includes a continuous deployment pipiline for websites built with React. We use AWS CodePipeline, CodeBuild, and SAM to deploy the application. To deploy the application to S3 using SAM we use a custom CloudFormation resource.

Files included

• buildspec.yml: YAML configuration for CodeBuild, this file should be in the root of your code repository
• configure.js: Script executed in the build step to generate a config.json file for the application, this is used to include values exported by other CloudFormation stacks (separate services of the same application).
• index.js: Custom CloudFormation resource that publishes the website to an S3 bucket. As you can see from the buildspec and SAM template, this function is located in a s3-deployment-custom-resource sub-folder of the repo
• app-sam.yaml: Serverless Application model YAML file. This configures the S3 bucket and the cu

amowu

将 docker ps 输出通过管道重定向到 less -S，避免折行：

$ docker ps -a | less -S

docker logs 默认情况下不会观察日志，除非你使用 -f 参数：

$ docker logs  -f

amowu

import styled, { css } from "styled-components";

import {
  borderProps,
  marginProps,
  backgroundColorProps,
  paddingProps,
  alignmentProps,
  positioningProps,
  sizeProps,

amowu

:first-child               i === 0
:last-child                i === arr.length - 1

:only-child                arr.length === 1

:nth-child(even)           i % 2
:nth-child(odd)            !(i % 2)

:nth-child(n)              i === n - 1
:nth-last-child(n)         i === arr.length - n

amowu

var intersectionObserver = new IntersectionObserver(
  function (entries) {
    // 如果不可见，就返回
    if (entries[0].intersectionRatio <= 0) return;
    loadItems(10);
    console.log('Loaded new items');
  });

// 开始观察
intersectionObserver.observe(

amowu

function query(selector) {
  return Array.from(document.querySelectorAll(selector));
}

var observer = new IntersectionObserver(
  function(changes) {
    changes.forEach(function(change) {
      var container = change.target;
      var content = container.querySelector('template').content;
      container.appendChild(content);

amowu

const button = document.getElementById('button');

const click$ = Rx.Observable.fromEvent(button, 'click');

const doubleClick$ = click$
  .bufferTime(500)
  .filter(array => array.length >= 2);

amowu

const video = document.getElementById('video');
const anchor = documant.getElementById('anchor');

const scroll$ = Rx.Observable.fromEvent(document, 'scroll');

scroll$
  .map(event => anchor.getBoundingClientRect().bottom < 0)
  .subscribe(isScrollOverAnchor => {
    if (isScrollOverAnchor) {
      video.classList.add('video-fixed');

amowu

const body = document.body;
const draggableElement = document.getElementById('drag');

const mouseDown$ = Rx.Observable.fromEvent(draggableElement, 'mousedown');
const mouseUp$ = Rx.Observable.fromEvent(body, 'mouseup');
const mouseMove$ = Rx.Observable.fromEvent(body, 'mousemove');

mouseDown$
  .map(event => mouseMove$.takeUntil(mouseUp$))
  .concatAll()