mac m3 安裝 php 8

#安裝 php

brew install php@8.2

#安裝後要新增path
echo 'export PATH="/usr/local/opt/php@8.2/bin:$PATH"' >> /Users/bigd/.bash_profile

#source才有辦法在cmd視窗直接呼叫
source ~/.bash_profile

#確認有沒有安裝 

php -v

(base) MacBook-Pro-Ken-2:8.2 bigd$ php -v

PHP 8.2.17 (cli) (built: Mar 12 2024 14:26:30) (NTS)

Copyright (c) The PHP Group

Zend Engine v4.2.17, Copyright (c) Zend Technologies

    with Zend OPcache v8.2.17, Copyright (c), by Zend Technologies

angularJS - GTM抓不到表單的廣告轉換

早期沒在埋GTM導致有些表單沒用ng-submit，

會導致只有抓到form_start，

但無法正常擷取的form id 與 form classes變數。

修正完後就正常了

[切版工具] Clippy 好用的clip-path maker

在網頁設計上常常會遇到不同多邊形的網頁效果，

可以使用clip-path屬性來達到，

如果對於空間概念比較不好或跟我一樣懶的話，

就可以使用Clippy這個工具～

如下圖所示，你可以透過快速的圖形效果，

產生語法，這個範例我們是要拉一個算梯形的效果mask

clip-path: polygon(50% 100%, 100% 75%, 100% 100%, 0 100%, 0 75%);

可以從圖上可以看到有五個點（可自行再刪減）

應用到專案上

專案上我們使用一個白底去產生此梯形效果

但發現會讓底色跑出來～所以最後把尺寸加到就藍底完全蓋掉

/* 讓第三個點超出空間讓底色藍可以完整不會出現 */

    clip-path: polygon(50% 100%, 100% 75%, 100% 101%, 0 100%, 0 75%);

網站：艾爾恩影片製作公司

   

踩雷啦!! jquery滑動到指定區塊後，手機畫面會鎖住無法滑動

最近因新客戶反應手機按滑動選單後，

手機會卡死畫面(無法滾動!!)

jq代碼如下:

//選單跳段落

$('.header a').click(function (evt) {

console.log('click menu link:' + this.hash);

// evt.preventDefault();

if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

jumpSection(this.hash,jumpOffset,500);

}

});

問了chatgpt給點建議xd

檢查 CSS 樣式：有時 CSS 屬性可能會影響滾動條的行為。檢查是否有任何 overflow 相關的樣式設定在包含滾動內容的元素上，這可能會限制滾動。

/* 會造成手動跳動anchor異常 */

/* body.active {

    overflow: hidden;

}

.index {

    overflow: hidden;

} */ 

感動解掉~

在mac os安裝penpot 原型設計工具(免費的開源figma軟體)

Penpot是一個開源的設計和協作平台，它可以讓團隊共同協作設計項目。

本文測試chtgpt教學說明如何安裝Penpot，使用Docker來運行Penpot容器。

1. 安裝Docker Desktop for Mac：

首先，你需要在macOS上安裝Docker Desktop，這是運行Docker容器的工具。

你可以從Docker官方網站下載並安裝Docker Desktop for Mac：https://www.docker.com/products/docker-desktop

ps:結果裝完也是去console跑~

2. 從github上抓爬penpot至本機，我是裝到downloads

3. 進入安裝目錄，啟動Penpot容器

cd bigd/Downloads/penpot/docker/images

進到目錄才會有docker-compose.yaml才有辦法執行啟動容器的指令

docker-compose up

接著就跑啟動的指令

4. 連線Penpot Web界面

chtgpt會講是連3000的port，但查了一下port是啟動在localhost:9001

可以以下指令確認容器的運行狀況

docker ps

bootstrap3 表格(table-responsive)無法支援滾動的雷~

最近在客戶專案發現手動的表格無法正常滾動，

因為系統有共用元件處理顯示透明滾軸的議題，

以為是js異常，結果只有一個專案異常，

最後發現是被css的字體是否換行影響，

.editor table tr td {
word-break: break-all;
}

剛好就讓所有文字換行符合無法滾動的大小

.editor table tr td {
word-break: keep-all;
}

效果參考: 偉能淨水 | 淨水器推薦 | 淨水器評比比較

Bing Webmaster長度異常造成索引錯誤?

 

MAC更新bitbucket的known_hosts

按照以下步驟即可完成刷新

IDENTIFY IF YOUR CLIENT IS IMPACTED

$ ssh git@bitbucket.org host_key_info You are using host key with fingerprint: ssh-ed25519 SHA256:ybgmFkzwOSotHTHLJgHO0QN8L0xErw6vd0VhFA9m3SM See https://bitbucket.org/blog/ssh-host-key-changes for more details.

2. CONFIGURE YOUR CLIENT TO TRUST THE NEW HOST KEYS

$ ssh-keygen -R bitbucket.org && curl https://bitbucket.org/site/ssh >> ~/.ssh/known_hosts

或存取下面的網址，取得回應的字串，貼回你的known_hosts

https://bitbucket.org/site/ssh

bitbucket.org ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQDQeJzhupRu0u0cdegZIa8e86EG2qOCsIsD1Xw0xSeiPDlCr7kq97NLmMbpKTX6Esc30NuoqEEHCuc7yWtwp8dI76EEEB1VqY9QJq6vk+aySyboD5QF61I/1WeTwu+deCbgKMGbUijeXhtfbxSxm6JwGrXrhBdofTsbKRUsrN1WoNgUa8uqN1Vx6WAJw1JHPhglEGGHea6QICwJOAr/6mrui/oB7pkaWKHj3z7d1IC4KWLtY47elvjbaTlkN04Kc/5LFEirorGYVbt15kAUlqGM65pk6ZBxtaO3+30LVlORZkxOh+LKL/BvbZ/iRNhItLqNyieoQj/uh/7Iv4uyH/cV/0b4WDSd3DptigWq84lJubb9t/DnZlrJazxyDCulTmKdOR7vs9gMTo+uoIrPSb8ScTtvw65+odKAlBj59dhnVp9zd7QUojOpXlL62Aw56U4oO+FALuevvMjiWeavKhJqlR7i5n9srYcrNV7ttmDw7kf/97P5zauIhxcjX+xHv4M=
bitbucket.org ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAAAAIbmlzdHAyNTYAAABBBPIQmuzMBuKdWeF4+a2sjSSpBK0iqitSQ+5BM9KhpexuGt20JpTVM7u5BDZngncgrqDMbWdxMWWOGtZ9UgbqgZE=
bitbucket.org ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIIazEu89wgQZ4bqs3d63QSMzYVa0MuJ2e2gKTKqu+UUO

REF:

https://bitbucket.org/blog/ssh-host-key-changes

記錄一下現在SSR的相關蒐集資訊

SSR似乎比前幾年更容易處理了，忙到都沒時間玩一下其他框架～箊

[教學] SSR 與 CSR 深度解析：從渲染方式到效能優化

提到react 18效針對Hydration SSR的優化

Angular 16添加新回應式開發模型，並強化Hydration功能提升程式效能

最新的ng16也是強化Hydration SSR

[Day 14] Server-Side-Rendering - (1)
提供另一種不用變更SSR的實作方式，AWS Lambda(Streaming SS)

綠界電子發票串接－發票列印

特店可使用此API取得發票列印網址 

https://developers.ecpay.com.tw/?p=14993

如果要自已產生列表的ｕｉ請參考以下網址：

https://developers.ecpay.com.tw/?p=31732

[Eggplant] iOS Gateway 授權問題

 

久久連一下eggplant iOS gateway異常的話，

建議重走一下apple deveplop的相關的授權流程機制就會正常了。

在診斷通常會有二個警告會沒有綠色，

主要注意新的測試主機上有相關的對應的授權檔案即可

(因為也不知道怎麼清除ios gateway上舊的資料 xd)

Angular 1.5 取得表單變數與重設

 常見需要在submit後reset表單的狀態與所有欄位重置預設值參考：

取得表單變數

$scope.initContactForm = function(contactName){

logger.debug('initContactForm');

$scope.contactForm = contactName;

};

重設

$scope.restart = function(){

logger.debug('restart');

$scope.contactForm.$setPristine();

$scope.isShowThanks = false;

//reset

$scope.contact = {

type: '0',

name: null,

mobilePhone: null,

meetdate: null,

meettime: '9:00',

company: '明久家具嘉義店',

jobTitle: null,

email: null,

title: null,

content: null //base64 encode

};

};

OwlCarousel2 owl-lazy未載入圖片時的高度固定解決方法

 https://github.com/OwlCarousel2/OwlCarousel2/issues/2357

git push 異常錯誤： Connection reset by [Server] port 22

Connection reset by 104.192.141.1 port 22

[jQuery Plugin] 實作響應式影像地圖

因為客戶在某些場景要用影像地圖實現點擊的功能，

使用rwdImageMaps套件可以輕鬆達到

外掛：https://github.com/stowball/jQuery-rwdImageMaps

$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

但使用前需要使用初步工具做影像地圖，可以參考https://www.image-maps.com/

產生後原圖會有會有原本定位坐標的原圖比例（要保留，ｊｑ外掛會吃這個值去自動resize到目前畫面的大小坐標）

操作畫面

Demosite: 輔大－亮亮指甲

[Javascript] 使用Javascript呼叫Webcam掃QRCode － 整合的函式庫與html5範例

找了幾個控制webcam的方法，桌機跟手機要可以運行。

QuaggaJS

https://serratus.github.io/quaggaJS/

Instascan

https://www.tutorialstuff.com/tutorials/jquery-html5-qr-code-scanner-using-instascan-js-exampleexample

html5自幹：

使用 jsqrcode 

https://www.sitepoint.com/create-qr-code-reader-mobile-website/

demo網址在iphoneX測試可用

https://ilrm9.csb.app/

AngularJS  1.x directive

2022/10/12  測試本專案的 js 版本不適用目前的版本

使用 jsqrcode 

https://github.com/sembrestels/angular-qr-scanner

後記

要在開發環境啟用 相機(window.navigator.mediaDevices.getUserMedia)

請至chrome設定啟不insecure

chrome://flags/#unsafely-treat-insecure-origin-as-secure

Adsense廣告單元設定

ADSENSE提供新式的自動廣告協助網站快速插入廣告，

但有的網頁的版面自動插入的廣告有可能不是我們預期的大小。

所以可以再透過廣告單元的設定，來維持乾淨的版面

szimek / signature_pad 實作網頁簽名

愈來愈多透過網頁實作簽名的系統，因為不用再開發ａｐｐ成本比較低。

找了signature_pad這個元件，有機會要來整合看看。

之後undo/變字體顏色/另存圖檔(png/jpg/svg，可以回傳自已的server做記錄)

 https://github.com/szimek/signature_pad

Face book轉換api串接

fb轉換api

標準事件列表

伺服器參數說明

user_data欄位說明

[Eggplant Functional] SenseTalk: 將Excel透過Database的方式來操作

除了透過檔案的方式來操作Excel，也可以將Excel透過Database的形式來操作。

個人更覺得更好操作。

以下範別就是想要把測試案例的結果另外存到一份Excel，這樣long testing就可以比較好撈資料

//連線Excel，開啟唯讀模式 

set myExcelDB to {type:"excel", file:excelPath, writable: Yes}

//sheet name當table name

put table worksheet of myExcelDB into sheetTable

//建立要寫入的物件

put the date into currentDateObj

put {TEST_CASE:testcase, DATA_JSON:valueWithJSONString,DATE:currentDateObj} into testresult

//寫入一列

add record testresult to table worksheet of myExcelDB 

Working with Excel as a Database