weblog

WEB全般の忘備録(HTML・CSS・JavaScript・PHPなど)

gulpfile 設定例

var gulp = require('gulp');
var browserSync = require('browser-sync');
var compass = require('gulp-compass');
var reload = browserSync.reload;

// Start the server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./",
index: "test-index.html"
}
});
});

// compass
gulp.task('compass', function(){
gulp.src('sass/**/*.scss').pipe(compass({
config_file: 'config.rb',
comments: true,
css: '_css/',
sass: 'sass/'
}))
.pipe(browserSync.reload({stream:true}));
});

// watch
gulp.task('watch', function(){
gulp.watch('sass/**/*.scss', function(event) {
gulp.run('compass');
});
});

gulp.task('default', ['browser-sync', 'compass'], function () {
gulp.watch("sass/*.scss", ['compass']);
gulp.watch("*.css").on("change", browserSync.reload);
gulp.watch("*.html").on("change", browserSync.reload);
});

/*
gulp.task('default', function(){
gulp.run('watch');
});

/

reactjs 備忘録

$ /projects/react-test/
$ react -v
bash: react: command not found

$ /projects/react-test/
$ npm install react --save
npm WARN ts@1.0.0 No description
npm WARN ts@1.0.0 No repository field.

$ /projects/react-test/
$ npm install react --save-dev
npm WARN ts@1.0.0 No description
npm WARN ts@1.0.0 No repository field.

$ /projects/react-test/
$ npm i -g react-tools
npm WARN deprecated react-tools@0.13.3: react-tools is deprecated. For more information, visit https://fb.me/react-tools-deprecated
C:\Users\AppData\Roaming\npm\jsx -> C:\Users\AppData\Roaming\npm\node_modules\react-tools\bin\jsx
C:\Users\AppData\Roaming\npm
`-- react-tools@0.13.3
`-- commoner@0.10.8
+-- detective@4.5.0
| `-- acorn@4.0.13
+-- glob@5.0.15
| `-- minimatch@3.0.4
| `-- brace-expansion@1.1.8
| `-- balanced-match@1.0.0
+-- iconv-lite@0.4.18
+-- q@1.5.0
`-- recast@0.11.23
`-- ast-types@0.9.6



$ /projects/react-test/
$ jsx --harmony --watch src/ build/
["hello"]
hello.js changed; rebuilding...
built Module("hello")
["hello"]


サイトレイアウトが崩れた時の対処法

メモ。
特にdivタグはあるある。

tsuki10.net

VagrantとVirtualBoxでローカル開発環境を構築

VirtualBox
https://www.virtualbox.org/wiki/Downloads

Vagrant
http://downloads.vagrantup.com/


VirtualBoxは既にインストールされていたバージョン4.3.6を使用。
Vgrantは現時点での最新版1.3.5をダウンロード。

その他基本的なことは下記が詳しい(丸投げ)
http://www.webopixel.net/develop/835.html



共有フォルダ作るには下記コマンドを実行。
/var/www/htmlへシンボリックリンクすればよい。

sudo rm -rf /var/www/html
sudo ln -fs /vagrant /var/www/html

Windows環境でgccコンパイラを使用する(メモ)

忘れそうなのでメモ。

コンパイルするには下記コマンドを実行。

$ cd /work_directory
$ gcc -o hello hello.c

意味は、hello.cというファイルをhelloという実行ファイルに
コンパイルして出力するということらしい。

gccのオプションについてはここが参考になった。
http://kazmax.zpp.jp/cmd/g/gcc.1.html

HTML・CSS コーティング規約参考サイト

HTML・CSS コーティング規約参考サイト


【参考】
google(英語)
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

apple(英語)
http://www.apple.com/html5/

google(和訳)
http://re-dzine.net/2012/05/google-htmlcss-style-guide/

CSSガイドライン
http://2xup.org/log/2006/07/11-1956
http://www.i-seeds.jp/web/cssguideline.html

HTMLガイドライン
http://www.okapiproject.com/web/html_codeconventions/index.html

Class名・ID名の付け方
http://css-happylife.com/archives/2007/0115_1345.php
http://matome.naver.jp/odai/2133510305809813901

HTML5
http://met.hanatoweb.jp/guideline/html5/

jQueryによるスクロール距離の取得方法

jQueryによるスクロール距離の取得方法。

パララックスサイトの作成、ページトップリンクを表示制御、グローバルナビの表示制御など使いドコロがいろいろあると思うのでメモ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スクロール位置の取得</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<script>
$(function() {
    $(window).scroll(function() {
        var dy = $(this).scrollTop();
        if(dy > 100){
            //処理
        }else{
           //処理
        }
    });
});
</script>
</body>
</html>

参考サイト:ドットインストール
#03 スクロール距離を取得しよう
http://dotinstall.com/lessons/parallax_html/10903