scss map nested

2019-02-12

layout散佈東一個西一個元素的畫面

會這樣做

<div class="decos">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>


position:reltive;

span{

&:nth-child(1){

position:absolute;

width:0px;

height:0px;

top:10px;

left:10px;

}

&:nth-child(2){etc ...}

&:nth-child(3){etc ...}

}



}

子元素們的位置大小定義會散落各地，不好維護

可以用scss的map結構改善這個問題

1定義巢狀的map結構

d1: (x:67,y:17,w:115,h:84),
d2: (x:14,y:198,w:60,h:64),
d3: (x:385,y:74,w:51,h:48),
d4: (x:30,y:642,w:193,h:406),
d5: (x:948,y:-107,w:115,h:84),
d6: (x:960,y:70,w:72,h:50),
d7: (x:19,y:1221,w:66,h:61),
d8: (x:1254,y:234,w:108,h:97),
d9: (x:1256,y:395,w:161,h:52)
);

2用each方法讀取map，map-get方法取得map結構裡的資料

因為$decos裡的資料也是map結構所以用了兩次map-get取得資料


@each $key, $val in $decos {
$i:index(($decos), ($key $val));
&:nth-child(#{$i}){
background-image: image-url("start/decos/#{$i}.png");
top:map-get(map-get($decos,d+$i),x)*1px;
left:map-get(map-get($decos,d+$i),y)*1px;
width:map-get(map-get($decos,d+$i),w)*1px;
height:map-get(map-get($decos,d+$i),h)*1px;
}
}

簡單愉快，收工!

展開全文 >>

使用imagemagick計算png圖檔列印面積

2018-09-10

1.透明以外的像素轉黑色

1	magick tree.png -fill black +opaque "rgba(255,255,252,0)" b.png

2.計算黑色像素的數量

1	magick b.png -define histogram:unique-colors=true -format %c histogram:info:-

展開全文 >>

使用GCP Container Registry建立docker private registry

2018-01-19

同字面意思，GCP的container Registry提供docker私有庫的host服務，
價格為Google Cloud Storage 儲存空間與網路輸出流量費用。

在專案中啟用Container Registry api

[https://console.cloud.google.com/apis/library]

安裝GCP Command Line tool 並登入帳號

參考: [https://cloud.google.com/sdk/docs/quickstarts?hl=zh-tw]

安裝完後用Command line tool登入GCP帳號

gcloud auth login

修改要存放到GCR的docker映像檔tag

參考:[https://cloud.google.com/container-registry/docs/pushing-and-pulling]

文件中tag的格式為[HOSTNAME]/[PROJECT-ID]/[IMAGE][:TAG|@DIGEST]

PROJECT-ID可由gcloud projects list查詢

HOSTNAME是GCR的區域名稱有us.gcr.io / eu.gcr.io / asia.gcr.io / gcr.io四個可選

這裡選擇asia.gcr.io，指令像這樣

docker tag 換tag的image名稱 asia.gcr.io/專案-ID/換tag的image名稱:lastest

上傳映像檔

gcloud docker -- push asia.gcr.io/專案-ID/換tag的image名稱:lastest

下載映像檔

gcloud docker -- pull asia.gcr.io/專案-ID/換tag的image名稱:lastest

使用docker pull 、 docker push 取得、上傳images

上文的docker push 或是docker pull都是使用gcloud的指令

直接使用docker 進行pull 或 push 需要把GCP的token放到docker CLI

參考:[https://cloud.google.com/container-registry/docs/advanced-authentication]

在專案中建立一個Service Account

在API和服務的選單> 選擇憑證> 建立憑證>服務帳戶金鑰
金鑰類型選JSON，並下載檔案

設定 GOOGLE_APPLICATION_CREDENTIALS

參考:[https://cloud.google.com/docs/authentication/getting-started]

Linux :
export GOOGLE_APPLICATION_CREDENTIALS="下載的Service Account JSON檔案.json"
Windows:
$env:GOOGLE_APPLICATION_CREDENTIALS="下載的json檔.json"

產生 token

gcloud auth application-default print-access-token

在docker中使用token進行GCR認證

docker login -u oauth2accesstoken -p "上文產生的token" https://asia.gcr.io

注意HOSTNAME要與push / pull的host name相同

如此便可使用docker 命令直接 pull / push 映像檔了

展開全文 >>

rails5.1與webpacker

2017-05-23

近幾年前端技術大躍進發展出許多新工具

以往要把這些工具整合進rails會讓工作流程有點繁瑣

rails5.1增加了與webpack的整合，解決了這個痛點

webpack介紹

‘Webpack 是一個針對JavaScript的打包工具。但是自發布以來，演變成了一個針對所有前端代碼的管理工具（不管是其本身有意還是社區的意願）。

見 https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/

在rails5引入webpack

https://github.com/rails/webpacker

rails new [your_project] --webpack

rails webpacker:install

安裝要使用的js 框架(這裡使用vue)

rails webpacker:install:vue

修改application.html.erb的helper

改為<%= javascript_pack_tag 'xxxxx' %>

啟動webpack dev server

修改js後能livereload

若在遠端進行開發，到config/webpack/development.server.yml修改host選項

更詳細介紹:https://ruby-china.org/topics/32904

展開全文 >>

AWS api gateway筆記

2017-05-19

參閱

http://docs.aws.amazon.com/apigateway/latest/developerguide/use-custom-authorizer.html

重點1

identity token source最後的”Auth”，是發request要做認證的header名稱可自由更換

重點2

apigateway頁面中，Update Custom Authorizer > Execution role，這個角色要增加Trust Relationship的設定
IAM > Roles > Trust relationships > Edit Trust Relationship

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "",
      "Effect": "Allow",
      "Principal": {
        "Service": "apigateway.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

展開全文 >>

在aws Lambda上運行含binary的nodejs modules

2017-03-14

據amazon文件所述(http://docs.aws.amazon.com/zh_cn/lambda/latest/dg/current-supported-versions.html)

`
底层 AWS Lambda 执行环境建立在以下各项的基础之上：

公用 Amazon Linux AMI 版本（AMI 名称：amzn-ami-hvm-2016.03.3.x86_64-gp2）：
有关使用 AMI 的信息，请参阅Amazon EC2 用户指南（适用于 Linux 实例）中的 Amazon 系统映像 (AMI)。
Linux 内核版本 - 4.4.35-33.55.amzn1.x86_64
如果您使用代码中的任何本机二进制文件，请确保在此环境编译这些文件。注意，在 AWS Lambda 上仅支持 64 位二进制文件。

AWS Lambda 支持以下运行时版本：

Node.js - v0.10.36，v4.3.2（建议）
`

最快的方法就是在ec2上開一台 Amazon Linux AMI的機器，在機器中進行打包

參考https://blogs.csc.com/2016/08/02/creating-your-own-lambda-function-using-node-js/

設定環境

sudo yum groupinstall 'Development Tools'

wget https://nodejs.org/dist/v4.3.2/node-v4.3.2-linux-x64.tar.gz

解開node-v4.3.2-linux-x64.tar.gz

設定路徑PATH=$PATH:~/node-v4.3.2-linux-x64/bin/

建立aws command tool的登入認證

mkdir ~/.aws && cd ~/.aws

vim config

[default] output = json region = ap-northeast-1(你的region)

vim credentials

[default] aws_access_key_id = xxxxxxxxxxxx aws_secret_access_key = xxxxxxxxxxxxxx

複製你的lambda function到這台機器然後運行、測試

然後打包

zip -r xxx.zip index.js node_modules

aws lambda update-function-code --function-name xxxxxx --zip-file fileb://xxx.zip

完成!

展開全文 >>

讓redmine的訊息發到JANDI

2017-03-10

最近公司內部溝通工具由Slack改為JANDI

個人感覺比Slack穩定，且議題支援中文

費用也較便宜XDDD

我fork github上的redmine_webhook專案

增加了JANDI的支援，讓redmine能發訊息到

JANDI，需要的朋友試試吧

https://github.com/joehwang/redmine_webhook_for_JANDI

展開全文 >>

rails使用https網址(link_to導向https protocol)

2014-10-29

rails使用route處理url要走http或https

1.在route設定路由並命名
(命名後rails會自動產生login_path / login_url兩個helper，可用在link_to)

MyApplication::Application.routes.draw do
  match 'user/login' => "user#login", :as => :login, :constraints => { :protocol => "https" }
end

在link_to中使用

<%= link_to "登入", login_url(:protocol => 'https') %>

記得要用xxx__url絕對路徑，

不要用xxx__path 相對路徑

否則網址永遠不會導到https

可參考 http://stackoverflow.com/questions/3634100/rails-3-ssl-deprecation

同場加映

Nginx的http和https(ssl)共存

http://www.linuxyan.com/web-server/407.html

自已簽發免費ssl証書，並綁在server

http://blog.csdn.net/babydavic/article/details/8442817

展開全文 >>

rails3.2 + ruby 2.0 發出http get request 資料亂碼

2013-12-06

把server升上ruby 2.0後在rails3.2中發出get抓facebook api資料有時會是Ascii-8，印在頁面無法識別，用encoding類別強轉utf8也沒有用，測了一下發現換回 ruby 1.9.3不會有這樣的問題

解法:

1.改用Ruby 1.9.3 + rails 3.2

2.Ruby 2.0 + rails 3.2 + 發http的程式改用httparty

3.Ruby 2.0 + rails 4

展開全文 >>

Rails阻止頁面快取

2013-12-06

遇到一個問題，User登入後按瀏覽器的回上頁，右上角的登入區塊

不會更新，觀察log發現，瀏覽器回上面時沒有向server發出request

解決方法:

停用頁面快取

response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate" response.headers["Pragma"] = "no-cache" response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"

展開全文 >>