2020/07 Cola Daily Build

07/01

google map & Map Javascript API

feature

  • 預先 market 店家位置
  • 用戶地址查詢座標, PlaceApi: Autocomplete
  • use my location
  • 移動 center 當點擊座標
  • 自動對照&排序店家位置與用戶地址(dev tools)

branch: map
example:
https://github.com/cscolabear/padada/blob/map/map.html

ref.

google map 教學
https://developers.google.com/maps/documentation/javascript/adding-a-google-map

google 地址轉座標

啟用 api, 申請 api key/token, with vuejs

一般 google map api 範例

取得使用者(瀏覽器)座標
Geolocation: Displaying User or Device Position on Maps
https://developers.google.com/maps/documentation/javascript/geolocation

issue

  • 計算使用者是否在任一店家服務範圍內
    例如,店家服務範圍最大為 3 miles
    超過 3 miles 就刪除店家(不提共服務)

  • auto zoom
    no idea…

07/02

  • vuex

07/03

vue dynamic component & code splitting

使用者進入畫面後,不會立即顯示 formComponent
點擊 button 變更 showForm 後才會觸發 import formComponent

preview gif:

虛擬碼 / example

<template>
  <button class="btn btn-primary" @click="toggleForm">
      add pet
  </button>

  <formComponent v-if="showForm"/>
</template>

<script>
.
.
.
const formComponent = () => import('@/views/Form.vue');

export default {
  components: {
      formComponent,
  },
data() {
    return {
      showForm: false,
.
.
.
.
method: {
  toggleForm() {
    this.showForm = !this.showForm;
  },
}

macbook 待機後,畫面霧霧白白的(內容比較多,幫妳總結一下)

修改 能源節約器
「於此時間後關閉顯示器」滑桿設定為較短的間隔,如 15 分鐘。
Shared with CloudApp

不重開修正霧霧白白

除了重開、登出之外
也可以試著啟動螢幕保護程式
Shared with CloudApp

07/06

承 07/01 ~ 07/03

google map auto zoom

map = new google.maps.Map(document.getElementById('mapDiv'), options)

mapBounds = new google.maps.LatLngBounds();

markers for 0~ N {
var marker = new google.maps.Marker({
      position: location.position,
      address: location.address,
      title: location.store,
    })

    // 這行建議,new marker 時執行
    mapBounds.extend(marker.position)
}

.
.
.

// ps: 只有一個 maeker 時,fitBounds() (zoom)拉的太近建議另外處理
map.fitBounds(mapBounds) // auto zoom
map.panToBounds(mapBounds) // auto center

07/07

  • simpany
    • domain
    • dev env
    • docker

vscode 團隊協作

07/08

07/09

07/12

vscode 自訂樣式

某次更新後 custom css and js 無法使用, 改用 Custom UI “Enable Monkey Patch”

隱藏最邊邊的 action toolsbar


docker workspace

sudo chgrp -R www-data logs/
sudo chmod -R g+rwx logs/

07/20

vue3

with vue2

07/21

先不說,下面提到的套件
但是可以直接把 vuex state 當 v-model 用

裡面 vue computed 的用法也讓 code 直接一些

使用 vuex-map-fields 讓 Vuex state 也可使用 v-model 綁定

based authentication, account, passowrd in url

http://username:[email protected]

快速把 ssh key 放入 docker container 的方法

有時候需要連入 container 做操作, npm, gulp…
(ps: 因為用 volume 權限會跑掉)

本機 copy id_rsa 內容

cat ~/.ssh/id_rsa

docker container 內

mkdir ~/.ssh

~/.ssh 下

echo "貼上剛剛複製的內容" > id_rsa
.
.
.
chmod 700 ~/.ssh
chmod 600 ~/.ssh/id_rsa

07/22

docker php fpm 7 gmp ext

&& apt-get install -y libgmp-dev \
&& ln -s /usr/include/x86_64-linux-gnu/gmp.h /usr/include/gmp.h \
&& docker-php-ext-install gmp \

ref https://github.com/yeszao/dnmp/issues/11

07/23

i don't fxck care about your editor configuration!!

使用 global .gitignore file 讓本機電腦全域 ignore 部份資料夾

ps: home directory .gitignore

note:

$ git config --global core.excludesfile ~/.gitignore_global

07/26

避免 GIT gui(sourcetree) 一直詢問密碼

git config --global credential.helper osxkeychain

ref.


laravel, phpunit command

# group
vendor/bin/phpunit ./tests/API/Featuxxxxxxxxe/ApiCoxxxxxxxerTest --group xxxxx


vendor/bin/phpunit ./tests/API/Featurxxxxxxxxx/ApixxxxxxxrTest --filter class_name


seeder and class

laravel migrate

down 的編寫注意事項
如果有多次 dropColumn 或是這個 drop 是必須的對資料沒有影響 (不需回覆)
注意,前後關係, 基本上,up 和 down 要互相呼應
建議都用

// e.g. 
        if (Schema::hasColumn('users', 'name'))

先行檢查

07/27

larave 置入初始(預設) 資料 migrations or seeders ?

pros, cons…

seed 使用注意~

07/28

laravel migrate 插入資料

  • 變動性極小的資料,靜態資料、參照用資料 e.g. taiwan zip(縣、市郵遞區號等
    放在 migrate

  • 偏向測試、人為操作用、動態資料資料, 放在 seeder e.g. 公司、商品等相關資料

07 /29

07/30

laravel & League\Fractal\Transformer

在實做 Transformer 的時候常常會一起帶入 eloquent model relations 相關欄位

實做 Transformer 會 extends TransformerAbstract

設定 availableIncludes 或 defaultIncludes 可以連帶引入其它 transformer
要注意~

e.g.

// 不會使用 eager loading
protected $availableIncludes = [
        'your relation name',...
];

// 使用 eager loading
protected $defaultIncludes = [
        'your relation name', ...
];


laravel log/dump all APP sql query

每段時間就要記錄一下

at app/Providers/AppServiceProvider.php-> boot()
add

// debug log sql
         \Illuminate\Support\Facades\DB::listen(function ($query) {
            \Illuminate\Support\Facades\Log::debug('query', [
                'sql' => $query->sql,
                'bindings' => $query->bindings,
                'time' => $query->time,
            ]);
        });