精選

園丁的話

歡迎到叡揚第一次嘗試的部落格分享,這也是我們從鼓勵內部分享後邁出的另一大步。

不同於公司公開的官方文件或是網頁資料,這些部落格來自公司現在與過去的員工的個人意見 ── 它們表達我們在工作中智慧上的領悟與挫折,或是情感上的喜樂與哀愁。

繼續閱讀 “園丁的話”

RxJS observable V.S Mobx observable

可觀測資料流的兩大工具PK

這次不是寫 Angular 切版實戰,因為.…..內容實在太龐大了有點難寫(光想要寫個「 如何用 Angular 建立 high order component 」就讓人很頭大)。所以決定先來開小差,寫最近遇到如何用 observable 來處理 Data Flow 的問題。

然後,最近也開始寫 React component,結果發現超好寫(自爆),不禁覺得 Angular 真的要再多加油,如果世界觀再打平一點就好了QQ。

繼續閱讀 “RxJS observable V.S Mobx observable”

透過 Microsoft BotFramework-WebChat 的 botchat.js 連接 Botframework 做的 Chatbot ,輕鬆 Web Application

我們透過 Microsoft BotFramework 來製作 Chatbot 程式後,除了可以接各透的 IM Channel 外,最快速的就是將它整合到現有的 Web Application 之中。Microsoft BotFramework-WebChat 已有提供範例讓我們去整合。
但是一般的網站並不需要一下子就顯示 WebChat ,而是在下方需要一個機器人的小圖示,按下去之後再顯示出 WebChat 。

解法

依上面的需求,我們需要 2 個 div, 一個放網頁下方的小圖示(WebChatButton), 另一個是放 WebChat (WebChatDialog)。
所以預設的 html 如下,

<div ID=“WebChatButtonD” onclick=“開啟WebChat的function”></div><div id=“WebChatDialog”></div>

透過 botchat.js 來建立 WebChat 需要一些設定值,所以就先定訂這些設定值的 interface ,如下,

interface IBotChatUIConfig {
botId: string,
botName: string,
userId: string,
userName: string,
botChatIconUrl: string, //下方機器人的圖示
chatTitle: string, // WebChat Header 的文字
directLineOptions: any, //DirectLine 的設定
locale: string, //語系
showWebChatButton: boolean // 是否顯示下方的機器人圖示
}

再來可以透過 BotChatUI 來封裝要一開始顯示出網頁下方的機器人圖示,按下後,要開啟 WebChat ,而按下 WebChat 的 Header 後,要將 WebChat Hide 起來,並顯示出機器人的圖示。
開始的畫面
另外,我們也可以透過調整 css 來讓 WebChat 長的不一樣,例如我們可以在 WebChat 中也顯示機器人的圖示。
開啟 WebChat 畫面

所以在即有的 Web Application 之中只要加入 WebChatCustomization 的 Botchat 目錄中的檔案,然後在要加入 WebChat 的網頁中加入以下的 Script 及設定您要的值,您就會有美美的 WebChat 了哦!

<!– chatbot –>
<link href=“Botchat/CSS/botchat.css” rel=“stylesheet” />
<link href=“Botchat/CSS/botchat-fullwindow.css” rel=“stylesheet” />
<link href=“Botchat/CSS/botchatCustom.css” rel=“stylesheet” />
<script src=“Botchat/Scripts/botchat-es5.js”></script>
<script src=“Botchat/Scripts/BotChatUI.js”></script>
<script>
var botChatUI = new BotChatUI({
botId: ‘RainmakerBot’,
botName: ‘小亂機器人’,
userId: ‘Rainmaker’,
userName: ‘亂馬客’,
chatTitle: ‘小亂機器人, 按我可縮小’,
locale: ‘zh-tw’,
directLineOptions: {
secret: ,
token: ,
pollingInterval: 1000,
webSocket: false
},
showWebChatButton: true
});
</script>
<!– chatbot –>

因為我想讓 IE 也可以 run ,所以我加入的是 botchat-es5.js。如果您不考慮 IE 的話,可以使用 botchat.js。
在 BotChatUI.ts 中,有特別處理,開啟 WebChat 時才建立 DirectLine 及 WebChat,關閉 WebChat 時,會先儲存 DirectLine 的 ConversationId,並 close 連線。重新開啟 WebChat 時,才知道原本的 ConversationId 是什麼,重新將原本的內容 Load 回來。
為什麼要這樣子呢? 因為我們是使用 offline Direct Line,目前還不 Support WebSocket ,所以 WebChat 會一直 Polling。所以當關掉 WebChat 時,DirectLine close 後,它就不會再 polling。
那要怎麼讓它重新再連線呢? 目前我們的做法是將原本的 WebChat 移掉再重新建立。詳細可以參考 BotChatUI.ts startConversation / endConversation functions。
而重新連的方式,如果有更好的方式會更新上去,如果大家知道的話,也請跟大家分享。

參考資料

WebChatCustomization

Tutorial : Waypoint Landing Page

https://codepen.io/desbear96/pen/Gxrzry

課程目標

了解transition delay來創造進場動畫

透過Waypoint的js產生滾動過程中的動態效果

並再次強調zindex的應用來帶出hero image中的圖層順序

並於此次帶出inline-block垂直置中的實作方式

學前必備知識

  • position
  • z-index
  • background-size
  • transform basic
  • transition
  • margin:0 auto
  • clear both
  • float
  • inline-block
  • :before :after ( pseudo element )
  • Scss基礎 nest與variable

重點知識

  • waypoint.js
  • inline-block vertical align middle
  • scss nest selector and XXX &
  • transition delay

教學方式

  • 首先要先解釋inline-block創造垂直置中的條件與概念,將hgroup區塊安至於中間
  • 接著將花與方塊透過指定的大小安置進去
  • 而三段文字則透過after與before安置前後層圖片
  • 並透過variable指定高度順序運算
  • 透過animate &這樣的祖代選擇方式,製作在進場前的位置,讓animate抽走後可以依序展示出物件
  • 安置下方的section結構,安置inner創造中間區塊的置中並設定最大寬度限制
  • 教授透過float與set-left right的樣式名稱,讓原本一樣的結構可以依據樣式名稱置左置右
  • 透過雙層祖代選擇達到同前animate抽換後產生的動畫結構

素材

https://cl.ly/qIfb/hero-flower.png

https://cl.ly/qHo7/vintage.png

https://cl.ly/qHsB/vintage-up.png

https://cl.ly/qHcj/illustration-up.png

https://cl.ly/qHMB/illustration.png

https://cl.ly/qIV4/nature.png

jQuery(document).ready(function(){
jQuery(‘body’).imagesLoaded(function (){
jQuery(‘.os’).addClass(‘ready’);
function onScrollInit( items, trigger ) {
items.each( function() {
var osElement = jQuery(this)
var osTrigger = ( trigger ) ? trigger : osElement;
osTrigger.waypoint(function() {
osElement.removeClass(‘animate’);
},{
triggerOnce: true,
offset: ‘50%’
});
});
}
onScrollInit( jQuery(‘.os’) );
});
});

$bgC:#F3D5D7;

$color:#CE4D5A;

script(src=”https://cl.ly/q6Ke/jquery.min.js“)

script(src=”https://cl.ly/qI9e/imagesloaded.pkgd.min.js“)

script(src=”https://cl.ly/qI1b/jquery.waypoints.min.js“)

script(src=”https://cl.ly/qIja/inview.js“)

Tutorial : Pure CSS Modal

https://codepen.io/desbear96/pen/oqpwLO

課程目標

主要透過:target辦到讓有特定id之物件達到樣式變換的效果,並在此次了解absolute的位置的概念來產生tooltips,並創造滿版遮罩的概念,在tooltips中可以帶入三角形與透過transform讓物件置中的方式。

學前必備知識

  • box-modal
  • html basic
  • inline-block
  • :hover
  • margin:0 auto

重點知識

  • :target
  • position left top right bottom
  • text-align
  • css triangle
  • psedo element
  • transform:translate3d basic

教學方式

  • 先教導創造按鈕並解釋box-modal與inline-block
  • 透過body的text-align來讓按鈕置中
  • 創造a之中的tooltips結構
  • 並透過psedo element創造三角形的部分
  • 在解釋hover後讓子物件作指定除了自己以外的物件作樣式變換後
  • 進一步開始解釋target之用法
  • 先將modal card與overlayer創造出來
  • 將modal card隱藏
  • 將modal card用target設定樣式滑入
  • 創造關閉按鈕reset 網址列

注意

不要透過transform來將modal or card置中

OWASP ZAP 憑證安裝的方式(OWASP ZAP Certificate)

問題

透過 ZAP 去錄 https 時,如果沒有安裝憑證時,在 Browser 就會出現「 “Your connection is not private”, “你的連線並不安全”」的警告訊息,如下圖所示。
Chrome的警告

Firefox的警告

解法

為什麼會出現那個警告訊息呢? 因為 Browser 用的那個憑證已經不是原本連接的那個 host 的憑證,而變成了 OWASP Zed Attack Proxy Root CA 了哦! 而這個憑證並沒有被電腦 Trust 所以就會有那個警告訊息哦!
那要怎麼辦呢? 就是把憑證裝進去電腦的信任區。
以下我們就一步步來說明,

1.儲存 ZAP 憑證

開啟 OWASP ZAP ,Tools -> Options -> Dynamic SSL Certificates -> Save
儲存 ZAP 憑證

2.匯入 ZAP 憑證

DbClick剛才儲存的憑證檔,按下「Install Certificate…」,並將憑證存到「Trusted Root Certification Authorities」之中,如下,
Certificate Import Wizard

記得要將憑證存到「Trusted Root Certification Authorities」之中
存到「Trusted Root Certification Authorities」

最後按下 Finish 就可以了哦!
Import 完成

FIREFOX 匯入 ZAP 憑證

因為 firefox 憑證是自已管理的,所以 firefox 也要匯入 ZAP 憑證 ,如果會用 firefox 來錄的話,可以省略這步哦!
firefox 選項 -> 隱私權與安全性 (或在網址列輸入 about:preferences#privacy) -> 檢視憑證
隱私權與安全性

匯入 ZAP 憑證
匯入 ZAP 憑證

勾選「信任此憑證機構以識別網站」
勾選「信任此憑證機構以識別網站」

透過上述的方式,我們就可以錄 https 的網站,而不會一直出現警告訊息。 如果不會再錄的話,就請記得將 ZAP 的憑證移除哦!