資深初心者

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