2016年8月11日星期四

[筆記]Nlog Elmah 大合體步驟

Step1. 到NuGet安裝Elmah及用到的3個套件
(下圖右側打勾的項目)

Step2. 裝好Elmah的3個套件後會看到一個SQL檔(Elmah.SqlServer.sql)，執行它把Table建起來

Step3. 在專案的web.config檔中找到安裝Elmah套件時所產生的項目(elmah-sqlserver)，然後填入connectionString

Step4. 一樣在web.config檔中找到errorLog並在這個tag中加入一個屬性applicationName="你想填入的名稱"

補充題外話：這個步驟原本沒做，結果測試的時候發現DB中有寫入NLog的錯誤資料但是頁面上卻沒有顯示...

Step5. 如果設定成對外連的到怕別人猜到路徑可以根據喜好修改名稱，不過要改3個項目都要改

Step6. 寫一段會出錯的程式來測試一下結果

Step7. 執行該頁面後到DB查看是否有紀錄

Step8. 接著開啟Elmah的紀錄頁

(網址: [你的Domain]/[你在Step5修改的名稱].axd)

Step9. 點選畫面列表中的Detail可以看到完整的錯誤訊息

Step10. 到NuGet安裝NLog套件及另外兩個
NLog Configuration、NLog Schema for Intellisense

Step11. 到NuGet安裝NLog.Elmah

Step12. 開啟NLog.Config加入extensions、target及logger

如下圖所示加入
<extensions>

</extensions>

如下圖所示加入

如下圖所示加入

Step13. 到Controller中加入測試的Code後建置然後開啟頁面

Step14. 到DB及Elmah的紀錄頁中看結果

The End

2016年6月29日星期三

[筆記].net MVC 安裝Web Essentials 並使用bundle功能將多個CSS or JS檔打包彙整成一個檔案

首先第一步安裝：Web Essentials

https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361

第二步裝好之後到下面這個網址

http://vswebessentials.com/features/bundling

第三步複製畫面中的XML

第四步在專案中加入bundle檔

例如:main.css.bundle

第五步將剛剛複製的XML貼到bundle檔中，然後修改或加入你要匯入的檔案及路徑後存檔

第六步在Visual Studio中先確定檔案已加入專案後點選Update All Bundles

完成了! 此時你會看到多了2隻CSS檔

依本範例為例會多出

main.css及main.min.css

2016年6月23日星期四

[筆記]CSS3 filter blur 濾鏡特效

常常在一些網站上看到滑鼠移入時會出現圖片霧化個幾秒鐘
且同時底下的字或是小icon會移動或是變色

好奇看了一下之後做了一個類似的感覺還不賴

主要是靠CSS中的 @keyframes關鍵影格
以及CSS的一些事件來完成
搜尋關鍵字"css event another"也可以找到一些相關的文章

以下是我的小範例

See the Pen JKbPEg by AllenYu (@allenyjs) on CodePen.

2016年6月16日星期四

[筆記]網頁schema結構化標記

今天再研究網頁結構化標記參考了一些資料

在看google的說明時發現了schema.org

說明中有提到schema.org 是由 Google、Microsoft 與 Yahoo! 聯手打造的計劃，用來幫助解讀網頁中的相關資訊

(詳細內容參考: https://support.google.com/webmasters/answer/3069489?topic=3070267&hl=zh-Hant&rd=1 )

為了怕之後自己忘記做一下簡易說明筆記
說明如下：(詳細版請參考 https://schema.org/CreativeWork )
1. 在 html Tag 中加入 itemscope itemtype=”http://schema.org/WebSite”
範例:
<html itemscope itemtype="http://schema.org/WebSite"></html>

2. 在 head Tag 中加入以下 meta
範例:
<meta itemprop="name" property="og:title" content="結構化範例網頁" />
<meta itemprop="keywords" name="keywords" content="關鍵字 1,關鍵字 2,關鍵字 3" />
<meta itemprop="description" property="og:description" name="description" content="我的網站超炫超厲害......" />
<meta itemprop="url" property="og:url" content="http://allenyjs.blogspot.tw/" />
<meta itemprop="image" property="og:image" content="image/sample-logo.png" />
<meta itemprop="author" property="og:site_name" name="author" content="資深初心者的部落格">

3. 在 body Tag 中加入 itemscope="" itemtype=http://schema.org/WebPage
範例:
<body itemscope="" itemtype="http://schema.org/WebPage">

4. 在<body></body>內層加入一個標題並在此標題的 Tag 中加入 itemprop="name"
範例:
<h1 itemprop="name">結構化範例網頁</h1>

5. 在版權聲明的 Tag 上加入 itemprop="copyrightHolder"
範例:
<footer>
<p itemprop="copyrightHolder">某某公司版權所有 © 2016 All Rights Reserved. </p>
</footer>

可以利用以下工具協助標記及檢查

結構化資料標記協助工具:
https://www.google.com/webmasters/markup-helper/u/0/

結構化資料測試工具:
https://search.google.com/structured-data/testing-tool/u/0/

當然這只是簡單的標記而已因為太多種了
詳細的說明還是要看https://schema.org/CreativeWork

在Google測試工具中測試的結果大概會長成這樣

最後我的範例請參考：

See the Pen 結構化範例網頁 by AllenYu (@allenyjs) on CodePen.

2016年5月31日星期二

[我的前端筆記] jQuery 綁定小範例

利用陣列(array)跟物件(object) 組成一個Model

接著再用keyup或是change...等監聽事件

當前端UI的資料有異動時事件被觸發時將Element上的值覆蓋回Model

在此範例中假設有接收到後端資料資料時去Call renderForm();

就會把Model 資料填到UI上達到綁定的效果

See the Pen jQuery 綁定資料 by AllenYu (@allenyjs) on CodePen.

2016年5月23日星期一

網址後面出現奇怪的url encode 字串"%E2%80%8B"

今天遇到了一個有點詭異的問題

在網頁上點連接時應該要連到下面這個網址
http://[某某網址]/index.html

結果連過去後卻發現異常無法顯示
實在是有點奇怪
難道是連結網址貼錯嗎???
立馬複製瀏覽器上的網址貼到記事本一看
http://[某某網址]/index.html%E2%80%8B

怎麼會多出了一段%E2%80%8B
於是又馬上去檢查檔案
<a herf="http://[某某網址]/index.html">

沒錯啊!!!~~~~~

那我看到的那段UrlEncode "%E2%80%8B" 又是怎麼一回事呢?

在google大神的大力相助一下
我找到了一些答案

應該是因為現在大家習慣Ctrl+C Ctrl+V

網址有可能來源是word 有時候存在記事本
也有可能是sublime Dreamweaver notepad++ ...等

大家複製來複製去的過程中不知道在哪個編輯器上順手就帶上了"%E2%80%8B"

我找到的答案應該是這樣還望高人指點...

補充一下這兩篇也有提到這個問題底下回覆有人是因為從MS word複製網址後出現"%E2%80%8B"

https://premium.wpmudev.org/forums/topic/something-is-breaking-my-links-with-

https://forums.digitalpoint.com/threads/why-are-some-of-my-urls-getting-appended-with-e2-80-8e.2716588/

如果是C#的話可以用以下方式解決這個麻煩
MailItem.Body.Replace("\u200B", "");
參考這篇:
http://stackoverflow.com/questions/24942167/simplest-way-to-get-rid-of-zero-width-space-in-c-sharp-string

如果是Javascript的話可以用正規式的方式處理
參考這篇:
http://zhi-yuan-chenge.blogspot.tw/2015/10/jsie-buge2808e.html

2016年3月10日星期四

[筆記] 使用Compass Sprite x 自動合併圖片 x 自動產生background-position

1.開啟「命令提示字元」，建立compress專案

2.開啟compress設定檔，檢查設定

3.根據設定建立對應的images及icons資料夾

4.再資料夾中放入要合併的素材圖片

5.建立一個新的scss檔

6.在scss檔中寫入內容，完成後記得儲存檔案

7.儲存檔案後，在「命令提示字元」輸入指令compile 本範例輸入"compass compile test1"

8.完成後會自動在剛剛config.rb設定的相對路徑中generate相對應的css檔，預設是stylesheets資料夾

9.這個時候開啟sprite.css及images資料夾可以看到已經自動generate了css及合併後的圖檔

2015年8月11日星期二

我的AngularJS初學筆記(三) Filters

利用AngularJS過濾器(Filters)
可以將資料轉換成大寫、小寫、貨幣格式
或達成排序、過濾篩選資料等效果

以下是我的練習範例

See the Pen AngularJS 練習範例3 Filters by AllenYu (@allenyjs) on CodePen.

2015年8月8日星期六

我的AngularJS初學筆記(二) Controllers

練習用AngularJS透過Controllers來控制網頁
並且透過$scope物件做雙向設定
在網上有許多介紹$scope物件的文章
http://www.dotblogs.com.tw/blackie1019/archive/2013/09/21/119101.aspx
http://ithelp.ithome.com.tw/question/10133017

以下是我練習的範例

See the Pen AngularJs練習範例2 by AllenYu (@allenyjs) on CodePen.

我的AngularJS初學筆記(一) Expressions 與 Directives

在使用前必須先載入angular.js 在官網上可以下載
第一步在需要設為AngularJS管轄區域的html tag上加上屬性data-ng-app
例如<body data-ng-app=""> 或 <div data-ng-app="">
以往用Javascript或Jquery需要數行的程式碼
用AngularJS只要做些簡單的屬性設定就可以完成

以下是我了練習範例

See the Pen angular練習範例1 by AllenYu (@allenyjs) on CodePen.

2015年8月4日星期二

我的requireJS初學練習筆記

練習範例1

test1.html

在HTML檔案中引入require.js並將data-main設為js資料夾中的common檔案，由於requireJS預設副檔名為js所以可以省略


                    <html>
            <head>
              <script data-main="js/common" src="js/require.js"></script>
            </head>
            <body>
              123
            </body>
          </html>

js(Folder)

common.js


                    require.config({
              paths: {
                  jquery: 'jquery-2.1.4.min',
                  underscore: 'underscore',
                  backbone: 'backbone'
              }
          });
          require(['test1']);

test1.js


                    define(function (require) {
              var $ = require('jquery');
            var _ = require('underscore');
            var backbone = require('backbone');

              $(function(){
                  alert("a");
                  var JQv=$().jquery;
                  var BKv=Backbone.VERSION;
                  var Undv=_.VERSION;

                  var myView = Backbone.View.extend({
                      el: $("body"),
                      initialize: function () {
                          this.showLoadinfo(JQv,Undv,BKv);
                      },
                      showLoadinfo: function (JQv,BKv,Undv) {
                          var hStr="<h1>載入測試</h1><ul id='mylist'>";
                          hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                          hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                          hStr+="<li>3. underscore版本:"+BKv+"</li>";
                          hStr+="</ul>";
                          this.$el.html(hStr);
                      }
                  });
                  var myLoadinfoView = new myView();

              });
          });

結果:

載入測試

1. JQuery版本:2.1.4
2. Backbone版本:1.2.1
3. underscore版本:1.8.3

練習範例2

test2.html

在HTML檔案中引入require.js並將data-main設為js資料夾中的test2檔案，由於requireJS預設副檔名為js所以可以省略


                    <html>
            <head>
              <script data-main="js/test2" src="js/require.js"></script>
            </head>
            <body>
              123
            </body>
          </html>

js(Folder)

common2.js


                    require.config({
              paths: {
                  jquery: 'jquery-2.1.4.min',
                  underscore: 'underscore',
                  backbone: 'backbone',
                  myTestFunc: 'myTestFunc'
              }
          });
          require(['test1']);

test2.js


                    require(['common2'], function (common){
            require(['myTestFunc']);
          });

myTestFunc.js


                    define(function (require) {
              var $ = require('jquery');
            var _ = require('underscore');
            var backbone = require('backbone');

              $(function(){
                  alert("a");
                  var JQv=$().jquery;
                  var BKv=Backbone.VERSION;
                  var Undv=_.VERSION;

                  var myView = Backbone.View.extend({
                      el: $("body"),
                      initialize: function () {
                          this.showLoadinfo(JQv,Undv,BKv);
                      },
                      showLoadinfo: function (JQv,BKv,Undv) {
                          var hStr="<h1>載入測試</h1><ul id='mylist'>";
                          hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                          hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                          hStr+="<li>3. underscore版本:"+BKv+"</li>";
                          hStr+="</ul>";
                          this.$el.html(hStr);
                      }
                  });
                  var myLoadinfoView = new myView();

              });
          });

結果:

載入測試

1. JQuery版本:2.1.4
2. Backbone版本:1.2.1
3. underscore版本:1.8.3

2015年7月30日星期四

2016 民國105年節日放假一覽表

實際放假行事曆以行政院人事行政總處公布為準

105年政府行政機關紀念日及節日放假一覽表

放假之紀念日及節日	日期（含星期六、日）	放假日數	備註
中華民國開國紀念日	1月1日（星期五）至1月3日（星期日）	3日
農曆除夕及春節假期	2月6日（星期六）至2月14日（星期日）	9日	農曆除夕適逢星期日，於2月11（星期四）補假，調整2月12日（星期五）為放假日，並於1月30日（星期六）補行上班。
和平紀念日	2月27日（星期六）至2月29日（星期一）	3日	和平紀念日（2月28日），適逢星期日，於2月29日(星期一）補假。
兒童節及民族掃墓節	4月2日（星期六）至4月5日（星期二）	4日	兒童節及民族掃墓節（4月4日）適逢星期一，兒童節於4月3日（星期日）放假並於4月5日（星期二）補假。
端午節	6月9日（星期四）至6月12日（星期日）	4日	端午節（6月9日）適逢星期四，調整6月10日（星期五）為放假日，並於6月4日（星期六）補行上班。
中秋節	9月15日(星期四)至9月18日（星期日）	4日	中秋節（9月15日）適逢星期四，調整9月16日（星期五）為放假日，並於9月10日（星期六）補行上班。
國慶日	10月8日（星期六）至10月10日（星期一）	3日

資料來源:http://www.dgpa.gov.tw/ct.asp?xItem=12425&CtNode=233&mp=7
行政院人事行政總處

資料來源:http://www.dgpa.gov.tw/ct.asp?xItem=12426&ctNode=1287&mp=7

行政院人事行政總處

宿霧 x 薄荷島 x 自由行 Backpacking tour in Cebu and in Bohol【我在宿霧(I am in Cebu)】

久違的宿霧這是我們第一天落腳的地方IT PARK
對於曾經於此小待過數個月的我卻時有點熟悉
但如今的樣貌又有點陌生了
在這個區域裡可以看到高樓商辦林立許多外商進駐
所以園區內及外圍可以找到一些酒吧、日本料理、韓國料理...等美食
當然麥當勞、星巴克、小七超商一應具全
附近有知名的水藍城堡Waterfront Hotel 裡面有賭場可以小玩一下
走出園區大門右轉可以找到蠻多按摩SPA店
還有KTV及小型韓貨超市，相當便利
所以這次我選擇住宿的飯店就在IT PARK旁的Zerenity Hotel
便宜乾淨蠻多到當地遊學的學生居住的Hotel
晚上也不用怕肚子餓喔
由於宿霧搭計程車蠻便宜的所以到當地旅遊可以把計程車當成主要交通工具
如果想體驗搭乘吉普尼的話可以結伴或找個男性友人一起搭乘