gaspanik

NameVirtualHost *:80

<Directory "/Users/ユーザー名/Sites">
 Options Indexes FollowSymLinks MultiViews
 AllowOverride All
 Order allow,deny
 Allow from all
</Directory>

<VirtualHost _default_:80> 

gaspanik

#
# Mac OS X / Mac OS X Server
# The <IfDefine> blocks segregate server-specific directives
# and also directives that only apply when Web Sharing or
# server Web Service (as opposed to other services that need Apache) is on.
# The launchd plist sets appropriate Define parameters.
# Generally, desktop has no vhosts and server does; server has added modules,
# custom virtual hosts are only activated when Web Service is on, and
# default document root and personal web sites at ~username are only
# activated when Web Sharing is on.

gaspanik

#
# This is the main Apache HTTP server configuration file.  It contains the
# configuration directives that give the server its instructions.
# See <URL:http://httpd.apache.org/docs/2.2> for detailed information.
# In particular, see 
# <URL:http://httpd.apache.org/docs/2.2/mod/directives.html>
# for a discussion of each configuration directive.
#
# Do NOT simply read the instructions in here without understanding
# what they do.  They're here only as hints or reminders.  If you are unsure

gaspanik

<VirtualHost *:80>
  ServerName pow
  ServerAlias *.dev
  ServerAlias *.xip.io

  ProxyPass / http://localhost:20559/
  ProxyPassReverse / http://localhost:20559/
  ProxyPreserveHost On
</VirtualHost>

gaspanik

In-Browser Design Links

Articles, Styletiles & Styleguide

• Why we skip Photoshop by Jason Fried of 37signals - http://37signals.com/svn/posts/1061-why-we-skip-photoshop
• Style Tiles - http://styletil.es/
• Gimme Bar : Front end styleguides and pattern libraries - https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

Frameworks

gaspanik

Designing in the browser Vol. 1

こけむさずで開催した「インブラウザ勉強会」の補足。

Installing Node.js

Node.jsのインストールは自分の好きな方法でどうぞ。簡単なのはもちろん1です。

1. Node.jsのインストールは公式サイトの「Download」からバイナリをインストールする
2. Homebrewで「brew install node」を実行する

gaspanik

/*
* Takes provided URL passed as argument and make screenshots of this page with several viewport sizes.
* These viewport sizes are arbitrary, taken from iPhone & iPad specs, modify the array as needed
*
* Original:
* nhoizey / screenshots.js https://gist.github.com/nhoizey/4060568
* 
* Usage:
* $ casperjs screenshots.js http://example.com
*/

gaspanik

var screenshotUrl = 'http://example.com/'

var casper = require("casper").create({
    viewportSize: {
        width: 1024,
        height: 768
    }
});

if (casper.cli.args.length < 1) {

gaspanik

requirejs.config({
    baseUrl: '/js',
    paths: {
        jquery: ['//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min','jquery.min'],
        bootstrap: 'bootstrap.min'
    },
    shim: {
        'bootstrap':{deps: ['jquery']}
    }
});

gaspanik

{
  "jam": {
    "packageDir": "public/vendor",
    "baseUrl": "public",
    "dependencies": {
    }
  }
}