2020/04 Cola Daily Build

Daily Build
#1

04/01

  • react
  • react styled component
  • on leave
#2

04/06

  • react styled component
    • normal usage

declare

import styled from 'styled-components/macro';

const Container = styled.header`
  display: flex;
  align-items: center;
  max-width: ${wrapper.md.width};
  height: 90px;
  padding: ${wrapper.md.padding};
`;

usage

return (
    <Container>
      .
      .
      .
    </Container>
  );

瀏覽器呈現 html 標籤

  • extend-style, style section(承上)

declare

import { css } from 'styled-components/macro';
import colors from './colors';

export const linkStyle = css`
  border-bottom: 1px solid ${colors.gray.lightest};
  color: ${colors.gray.base};
  line-height: 1.2;
  transition: color 0.3s;
`;

usage

const Container = styled.header`
  ${linkStyle}
  display: flex;
  align-items: center;
  max-width: ${wrapper.md.width};
  height: 90px;
  padding: ${wrapper.md.padding};
`;
  • marcro, global style

declare

import { createGlobalStyle } from 'styled-components/macro';

export const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Muli:400,500,600,700');

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  html {
    box-sizing: border-box;
  }
.
.
.

usage

return (
    <Router>
      <div className="App">
        <GlobalStyle />
.
.
.
#3

04/07

已知問題 firefox 效能很差?!

#4

04/08

  • zoom on scroll 修正效能不好問題
    • 設定 css prefix
    • 拿掉 css blur

project

#5

04/09

  • refactor epub-to-image project
#6

04/10

  • animation on scroll

通知系統使用 GPU 處理

will-change: transform

tricky

transform: translate3d(42px, -62px, -135px);
transform: translate3d(42px, -62px, 0);

呼叫 z 軸，也能觸發 GPU 使用

#7

04/13

video on scroll

本用嘗試用 css position absolute fixed video

但是在捲動時會有抖動的情況

建議改用 sticky 或 fixed

sticky 的使用

  • html element 後 z-index 會大於前者
  • safari sticky 對像僅作用於 block, table-cell line break 對像
display: block;
position: -webkit-sticky; // for safari
position: sticky;
#8

04/14

  • fix css position sticky on safari
  • laravel and jwt (cli) (jwt, jws, jwe, jwk)
  • vscode extension
#9

04/15

  • vscode extension
  • apple video on scroll
#10

04/16

04/17

1個讚
#11

04/20

  • video on scroll update
  • apple iphone se page
#12

04/22

#13

點進去變成 404 not found 了

#14

剛剛有問題，我先關掉了@@;
現在打開了

不過方法是錯的，可能先不要看喔
正在暸解正確的做法

1個讚
#15

04/23

  • apple product on scroll upgrade for mobile
    • gogoro, apple
    • iphone x full screen
  • check res
#16

04/24

  • fix video play icon at mobile browser

  • apple product scroll

    • info
    • new product section

  • review fadein of scroll.js

    • github padada
#17

04/27

apple product scroll

  • add info
  • add iphone multiple effect section
  • docker: 139636332590208:error:141A318A:SSL routines:tls_process_ske_dhe:dh key too small:../ssl/statem/statem_clnt.c:2156: 
RUN apt-get update -yqq \
 && apt-get install -y --no-install-recommends openssl \
 && sed -i 's,^\(MinProtocol[ ]*=\).*,\1'TLSv1.0',g' /etc/ssl/openssl.cnf \
 && sed -i 's,^\(CipherString[ ]*=\).*,\1'DEFAULT@SECLEVEL=1',g' /etc/ssl/openssl.cnf\
 && rm -rf /var/lib/apt/lists/*

open ssl 太舊、不完整
避免用 alpine