judewang

FROM node:10.15.3 as node
FROM ruby:2.5.1

RUN apt-get update -qq && \
  apt-get install -y --no-install-recommends \
  build-essential \
  libpq-dev \
  libfontconfig1 && \
  rm -rf /var/lib/apt/lists/

judewang

FROM node:10.15.3 as node
FROM ruby:2.5.1

RUN apt-get update -qq && \
  apt-get install -y --no-install-recommends \
  build-essential \
  libpq-dev \
  libfontconfig1 && \
  rm -rf /var/lib/apt/lists/

judewang

const puppeteer = require("puppeteer");

const sleep = timeout => new Promise(resolve => setTimeout(resolve, timeout));

const { email, pass } = process.env;
const startTime = "2018/12/2 10:59:00";
const viewport = {
  width: 1368,
  height: 819
};

judewang

const styles = ({ highlight, ... }) => {
  return StyleSheet.create({
    button: {
      backgroundColor: (highlight ? color.highlight : color.primary),
    },
  })
};

...

judewang

Styling Tips

<img> sizing

{
  flex: 1,
  width: null,  // important
  height: 300   // any size
}

judewang

Load More button with Kaminari

Kaminari 1.0.0 以上支援 path_to_next_page(@instance) 這個 helper，用這個 helper 來建構 load more button

button.load-more type="button" data-load-more=path_to_next_page(@users) Load More

$(document).on "click", ".load-more", ->

judewang

1. container 有 padding 的話 masonry 計算會不準確，會一直無故換行
2. container 要 padding 的話要在 container 之外再包一個 wrapper，把 padding 設在 wrapper 即可。
3. percentPosition: true 的時候 gutter 不能接受固定 size 如： 16px or calc(100% - 16%)
4. responsive layout 最保險的作法是把 gutter 當作是 item 裡的 padding 來處理， columnWidth 直接用百分比即可

judewang

const templates =
  fs
  .readdirSync("templateDir")
  .filter(filename => filename.match(/\.pug$/))
  .map((filename) => {
    return new HtmlWebpackPlugin({
      filename: filename,
      template: path.resolve("templateDir", filename)
    })
  });

judewang

export getMediaQuery = getMediaQuery

export getBreakpoint = (targetDevice) ->
  media = {}

  for device, query of getMediaQuery()
    if query.match /min-width:\s(\d+)px/i
      media[device] = RegExp.$1

  media[targetDevice]

judewang

/**
 * Simple Sass mixin to share a map of breakpoints between CSS and JS
 * 
 * Usage:
 *  
 * $breakpoints: (
 *  --small: (max-width: 480px),
 *  --medium: (max-width: 1024px),
 *  --large: (min-width: 1280px)
 * );