2024 年 4 月 – YUAN BLOG

Docker LAMP

Yuan Huang • 2024 年 4 月 30 日

使用 Docker 建立 Apache、MySQL、PHP 的測試開發環境。

開一個新的資料夾(docker-lamp)，並在資料夾內新增下列檔案，檔名必需是 compose.yaml。

services:
  db:
    image: mysql
    environment:
      - MYSQL_ROOT_PASSWORD=12345678
      - TZ=Asia/Taipei
    volumes:
      - ./db:/var/lib/mysql

  apache-php:
    build: ./build
    volumes:
      - ./html:/var/www/html
    ports:
      - 80:80

  pma:
    image: phpmyadmin
    environment:
      - PMA_HOST=db
    ports:
      - 8080:80
    depends_on:
      - db

在 docker-lamp 資料夾內新增 build 資料夾，並新增下列檔案，檔名必需是 Dockerfile，用來下載 php-apache 映像檔。

FROM php:8.3-apache

WORKDIR /var/www/html

RUN docker-php-ext-install mysqli pdo pdo_mysql

RUN a2enmod headers \
  && sed -ri -e 's/^([ \t]*)(<\/VirtualHost>)/\1\tHeader set Access-Control-Allow-Origin "*"\n\1\2/g' /etc/apache2/sites-available/*.conf

EXPOSE 80

再新增 db、html 資料夾，分別用來存放 MySQL、PHP 檔。

在命令列模式下，進入 docker-lamp 資料夾，輸入 docker compose up 指令就可以啟動環境。

Download docker-lamp 資料夾

docker

網頁

[JS] Promise 亮燈

Yuan Huang • 2024 年 4 月 26 日

三秒後亮紅燈，二秒後亮綠燈，一秒後亮黃燈，反覆執行。

// 回傳 promise
function lightPromise(second, light) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(light);
    }, second * 1000);
  });
}

function main() {
  const redPromise = lightPromise(3, '[red]'); // 回傳紅燈 promise

  redPromise
    .then((light) => {
      console.log(light, new Date()); // 亮紅燈

      return lightPromise(2, '[green]'); // 回傳綠燈 promise
    })
    .then((light) => {
      console.log(light, new Date()); // 亮綠燈

      return lightPromise(1, '[yellow]'); / 回傳黃燈 promise
    })
    .then((light) => {
      console.log(light, new Date()); // 亮黃燈
      console.log('---------');
      main(); // 再次執行
    });
}

Demo
https://www.yuantw.com/demo/js-promise-light/

參考連結：

[JS] Async非同步 – callback, promise, async/await練習

javascript

網頁

[JS] Throttle

Yuan Huang • 2024 年 4 月 22 日

簡單的版本：

let timeoutId;

btn.addEventListener('click', function (e) {
  if (!timeoutId) {
    console.log(new Date()); // 要執行的動作

    timeoutId = setTimeout(() => {
      timeoutId = null; // reset
    }, 1000);
  }
});

Demo
https://www.yuantw.com/demo/js-throttle-1/

———

Function 版：

function throttle(fn, delay = 1000) {
  let timeoutId;

  return function () {
    let context = this;
    let args = arguments;

    if (!timeoutId) {
      fn.apply(context, args);

      timeoutId = setTimeout(() => {
        timeoutId = null;
      }, delay);
    }
  };
}

function show(e) {
  console.log(`${e.target.dataset.text} --`, new Date());
}

Demo
https://www.yuantw.com/demo/js-throttle-2/

javascript

拍照

2024-04-20 台中

Yuan Huang • 2024 年 4 月 21 日

網頁

[CSS] Transition

Yuan Huang • 2024 年 4 月 18 日

CSS 的 transition 可以有雙向和單向的設定。

網路上沒有什麼資料，目前只有看到這篇：[CSS筆記] transition、transform、animation 動畫屬性

下面二個都是雙向的例子。

啟動方向跟回復方向都套用一樣的效果，transition 屬性寫在初始狀態中。

div {
  width: 100px;
  height: 100px;
  
  background: red;
  
  transition: width 2s, height 4s; 
}

div:hover {
  width: 300px;
  height: 500px;
}

Demo
https://www.yuantw.com/demo/css-transition/1.html

———

transition 屬性寫在觸發狀態，會套用在啟動方向。transition 屬性寫在初始狀態，會套用在回復方向。

/* 初始狀態 */
div {
  width: 100px;
  height: 100px;

  background: red;

  /* 回復方向 套用 */
  transition: width 5s, height 5s;
}

/* 觸發狀態 */
div:hover {
  width: 300px;
  height: 500px;

  /* 啟動方向 套用 */
  transition: width 2s, height 2s;
}

Demo
https://www.yuantw.com/demo/css-transition/2.html

css