庭喵的出包星球

線上程式碼配色工具

Prism

http://prismjs.com/

感覺可以選的樣式就那幾種啊…

highlight.js

https://highlightjs.org/

Syntaxhighlight.in

https://github.com/thierryk/Syntaxhighlight.in

這一個感覺不是很好用，用一下就放棄了

各種網頁問題

CSS讀不到：

class名稱有沒有打對
瀏覽器有沒有清除快取（ctrl+F5），如果用chrome可以檢查：
css選擇器有沒有選對

cmd如何換資料夾

命令列更換資料夾的方法

多多讀：

Red Hat Enterprise Linux 3: Red Hat Enterprise Linux Step By Step Guide

避免進到debugger模式

記得把Any XHR勾掉

【防止frame嵌套】

if (top.location != self.location) {
top.location = self.location;
}
var str = document.URL;
str = str.toLowerCase();

Clickjacking简单介绍 – 瞌睡龙

Break Out of iframe

js如何判斷是否在iframe中及防止網頁被別站用 iframe嵌套

【設定網頁為no-cache】

response.setHeader(“pragma”, “no-cache”);
response.setHeader(“cache-control”, “no-cache”);
response.setDateHeader(“expires”, 0);

請問 jsp 如何設定網頁成 no-cache

JSP缓存的三个问题分析

$(window).scroll(function() {
$(“.slideanim”).each(function() {
var pos = $(this).offset().top;
//傳回此物件距離最上面的長度
var winTop = $(window).scrollTop();
// 偵測window的捲動值
if (pos < winTop + 600) {
//假設原距離top有1000，捲軸滑到距離它600px時就會滑出來
$(this).addClass(“paraslide”);
}
});
});

.slideanim {
  visibility: hidden;
}

.paraslide {
  /* The name of the animation */
  animation-name: slide;
  -webkit-animation-name: slide;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

gulp安裝使用教學

網路上雖然已經有很多教學了，但是自己實作再記一次筆記，看自己的筆記比較好懂，就來寫一下囉。

※RUBY記得要是最新的版本

若gulp無效顯示：

‘gulp’ is not recognized as an internal or external command,
operable program or batch file.

，試試：npm install -g gulp-cli

※記得compass、compass create 要先裝好再執行gulp的watch

Gulp doesn’t work

https://stackoverflow.com/questions/26827560/gulp-doesnt-work

↑安裝有問題參考這篇

步驟

npm install –save del
npm install gulp
gem install compass
compass create
npm init
npm install gulp-compass –save-dev
npm install –save-dev gulp-util
npm install –save-dev gulp-watch
編輯config.rb檔案路徑（檔案最前面記得加Encoding.default_external = ‘utf-8’）才能打中文的註解
建立gulefile.js於想要的目錄

首先輸入指令安裝gulp

然後安裝compass

npm init

呵呵　安裝gulp-compass

記得在根目錄自己建一個gulpfile.js檔

然後貼上其它網站複製來的文字（欸

在cmd上打gulp …　有跑就有救了！

然後難的開始了

發現bug了　崩潰崩潰

輸入compass create 安裝一些compass要的檔案

Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won’t be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
1. To compile on demand:
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile:
compass watch [path/to/project]

More Resources:
* Website: http://compass-style.org/
* Sass: http://sass-lang.com
* Community: http://groups.google.com/group/compass-users/

To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href=”/stylesheets/screen.css” media=”screen, projection” rel=”stylesheet” type=”text/css” />
<link href=”/stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” />
<!–[if IE]>
<link href=”/stylesheets/ie.css” media=”screen, projection” rel=”stylesheet” type=”text/css” />
<![endif]–>
</head>