VS Code 檔案顯示設定

開始寫 Typescript 之後…

編譯後的檔案都會出現在同一個地方,導致每次點選檔案的時候都要留一下自己點到的到底是 ts 還是 js 很不方面。因此開始尋找是否有辦法可以隱藏 Typescript 編譯後的檔案,畢竟我們很少會去看編譯後的檔案,除了一開始學習 typescript 時,會觀察一下編譯前後的變化…但,到後面還是覺得隱藏起來比較方便!

重複顯示的檔名使人眼花

Read More

Http status 狀態筆記

HTTP Status 狀態代表的意思

網頁接收到伺服器的回應後,都會自動去判讀網頁的狀態,其中的 Http Status代碼的意思如下:

- 200 伺服器回應Data成功。
- 206 取得片段資料,Http Request 中有的 Range 屬性,可以指定要取得那一段Bytes數。
- 301 目標網頁移到新網址(永久轉址)。
- 302 暫時轉址
- 304 已讀取過的圖片或網頁,由瀏覽器緩存 (cache) 中讀取。
- 401 需身分驗證,如 SSL key or htaccess pasword。
- 403 沒有權限讀取,可能是 IP 被阻檔或是伺服器限制。
- 404 伺服器未找到目標網址,檔案不存在。
- 408 Client Request timeout
- 411 沒有指定 content-length,使用 POST 傳送參數時,必須指定參數的總長度
- 414 URL 太長導致伺服器拒絕處理。
- 500 伺服器發生錯誤 : 可能是 htaccess 有錯
- 503 伺服器當掉 : maybe is code dump
- 505 不支此 HTTP 版本

資料來源: Http status 狀態 404 304

Sass筆記「@mixin」介紹:節省重複撰寫CSS樣式的時間

撰寫CSS的時候,時常會遇到一種情況:

在開發多種CSS樣式時,會將第一次寫的程式碼複製貼上後,再進行修改,

日後樣式需要整個大修時(例:圓形改方形),又必須將所有CSS重新逐一修正,非常不方便。

使用 Sass @mixin 的話,上述的問題可輕鬆解決,同時還可傳入多個變數進去。

我們先來看下面的code:

Read More

Sass筆記「@extend」介紹:無痛合併CSS樣式

在撰寫CSS過程中,為了避免CSS太龐大,當我們有用到相同的樣式時,

都會將它合併起來如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 第200行位置 */ 
.header h1, .content h1, .footer h1 {
font-size: 20px;
line-height: 1.8;
letter-spacing: 1px;
}
/* 第400行位置 */
.header h1 {
color: black;
}
/* 第1000行位置 */
.content h1 {
color: green;
}
/* 第N000行位置 */
.footer {
color: pink;
}

但這樣子會有個麻煩的地方是,假設合併樣式程式碼的位置在第200行,而我目前位置是在N千多行。

當需要合併樣式時,又必須回到第200行來合併class樣式,所以當程式碼越變越多時,

要集中相同樣式的工作流程相對也會變得更加繁瑣。

因此Sass @extend 繼承的方式可以解決這樣的問題。

Read More

Sass版本與Compass版本的相依問題

今天想嘗試 Sass framework ,Bourbon !!

但是在編譯的過程中遇到了一些問題,就是 sass 已經更新到3.3版了,compass 仍然使用3.2版,於是上網四處找資料。

在經過苦痛的google搜尋之後,才發現原來 compass 有對應的 sass 版本相依,由於沒有裝 compass 相關 app,

所以不清楚是不是可以直接在哪邊做sass版本的修改。

Read More

Sass環境建置紀錄

最近開始練習 Compass + Sass 的練習,記錄一下如何在 Windows 系統下建置 Sass 開發環境。

首先,安裝 Ruby

Sass 與 Compass 是用 ruby 開發的,在 windows 的環境下,

就必須先到他的官網安裝最新的 ruby,http://rubyinstaller.org/downloads/

接著安裝Sass、compass

在開始工作列程式搜尋欄位輸入「CMD」後開啟「命令提示字元」,輸入以下指令後按ENTER。

1
gem install compass

compass 安裝完成之後接著安裝 sass

Read More

Javascript:this用法整理

看到不錯的文章,轉貼過來紀錄做個分享。
轉貼來源:https://software.intel.com/zh-cn/blogs/2013/10/09/javascript-this

常用Javascript的人都知道,[this這個關鍵字在一個函式內究竟指向誰]的這個問題很令人頭大,這裡整理了一下Javascript中this的指向的五種不同情況,其中前三種屬於基本的情況,而後兩種情況可基於前三種情況的方式來進行思考。

#1.this指向於調用該函式之物件

如果你有學過C/C++,你可能會記得一個物件內的成員函式裡的this指的即是該成員函式所在之物件,但在Javascript裡則有那麼些許不同,Javascript裡的this看的是究竟是誰調用該函式,而不是看該函式被定義在哪個物件內,這個大原則抓到了,基本上就已經可以探知this的奧秘了。底下寫一下這種情況的公式與範例:

Read More