Dabao's Tech Blog
Archives
Label
About
GitHub
Facebook

[ AWS ] S3 掛載到 linux 上

logo

這是很久之前學到的一個小東西,是將AWS上S3服務的bucket掛載到linux上的某個資料夾,讓ftp使用者能直接的操作檔案

Step 1 - Install the service s3fs,fuse

cd /usr/local/src/

wget http://sourceforge.net/projects/fuse/files/fuse-2.X/2.9.2/fuse-2.9.2.tar.gz/download -O fuse-2.9.2.tar.gz

sudo yum install fuse*
sudo chkconfig fuse
#沒有出現任何信息就是安裝好了

#載入模組
sudo modprobe fuse

sudo yum install s3fs
#s3fs 在 AWS 上的instance可以直接安裝,若不是AWS上面的機器可以照以下步驟安裝
git clone https://github.com/s3fs-fuse/s3fs-fuse.git
cd s3fs-fuse
./autogen.sh
./configure --prefix=/usr
make
sudo make install

#檢查s3fs是否安裝成功
s3fs
#show: s3fs: missing BUCKET argument.
#show: Usage: s3fs BUCKET:[PATH] MOUNTPOINT [OPTION]...

which s3fs
#show: /usr/local/bin/s3fs

Step 2 - 將IAM密鑰新增到passwd文件內

在做這個步驟前,需要先到AWS控制台內操作,直到拿到密鑰才能回來繼續往下做

echo 'AKIAIOEO4E2VOHLxxxxx:2LXBboddEpRLmWl48i3+b4ziwPL3bJ4vxxxxxxxx' >> ~/.passwd-s3fs
chmod 600 ~/.passwd-s3fs
  • s3fs 指令:
  • s3fs BUCKET MOUNTPOINT [OPTION]…
  • s3fs [S3 bucket name] [foldername] [OPTION]

OPTION是選項,格式是 –o =,常用的options有:

名稱 含意 預設值
passwd_file 指定掛載的密鑰  
default_acl 開放的權限  
use_cache 是否使用cache (建議使用)  
connect_timeout 設置超時連接等待的時間,單位秒 300
url 設定訪問此s3的網址 http://s3.amazonaws.com
endpoint 設定bucket的endpoint us-east-1
allow_other 設定allow_other允許所有使用者訪問掛載的目錄,設定這個選項需要在/etc/fuse.conf文件添加user_allow_other選項,Like below↓  

/etc/fuse.conf

# 掛載上限
# mount_max = 1000
user_allow_other

Step 3 - 掛載 bucket

#創一個folder來當作載體
cd /home/user
mkdir s3folder
s3fs s3-bucket -o allow_other s3folder -o passwd_file=/home/user/.passwd-s3fs/ -o use_cache=/tmp -o default_acl=public-read

s3fs ez-ftp -o allow_other S3_FTP -o passwd_file=/etc/.passwd-s3fs -o use_cache=/tmp -o default_acl=public-read-write
cd s3foler

du -h
#show: s3fs            256T     0  256T    0% /home/user/s3folder

Step 4 - 卸載 bucket

cd /home/user
fusermount -u s3folder
rmdir s3folder

2017-12-14 補充:

今天赫然遇到一個之前沒解決的問題,如果今天我的Bucket是全新的,照著上面的步驟走就可以讓 ftp 的使用者自由的使用。但是,而我今天遇到的是裡面"已經有檔案"的情況,那麼連上 Bucket 的指令就需要多幾個參數。

今天我照著上面的步驟做,看到的訊息是

ls: cannot open directory .: Permission denied

因為我想掛載的是一個用了一段時間的 bucket ,裡面有不少資料都是 User 丟上去的

如果照著上面的步驟做,是可以正常新增一個以前沒有的檔案並操作它,但是如果是對”已經存在”的檔案操作的話就會看到上面那個訊息

當下我找到這篇,它的 issue 幫助我很多,因為很多人也遇到相同的問題

解決方法是在原本的指令後面加個 -oumask=000 ,參數有點類似chmod 777oumask 000 = chmod 777,如果之後知曉參數意思時再來補充

最後指令如下:

sudo s3fs [Bucket-name] -oallow_other [Folder_PATH] -opasswd_file=/etc/passwd-s3fs -ouse_cache=/tmp -odefault_acl=public-read-write -oumask=000 -ouid=1000 -ogid=1000

參考:https://github.com/s3fs-fuse/s3fs-fuse/wiki/Fuse-Over-Amazon

more

[ Javascript ] 分享 Chrome 也能用的 Smooth scroll

![logo](https://dabaohuang.github.io/img/logo/javascript.png “Javascript)

這東西也是我在做上一個專案時發現的,有天我正在為了 chrome 不支援 smooth scroll 而煩惱的時候找到 https://www.astralweb.com.tw/ 這網站,我發現他的 Scroll 的效果體驗很好,想拿來用,於是我循線找到了源頭 https://github.com/galambalazs/smoothscroll-for-websites ,使用時只要引入 SmoothScroll.js 網頁就有 smooth scroll 的效果了,非常方便 ! 就讓我們拜讀一下他的 js code 吧 !
//
// SmoothScroll for websites v1.4.6 (Balazs Galambosi)
// http://www.smoothscroll.net/
//
// Licensed under the terms of the MIT license.
//
// You may use it in your theme if you credit me. 
// It is also free to use on any individual website.
//
// Exception:
// The only restriction is to not publish any  
// extension for browsers or native application
// without getting a written permission first.
//

(function () {
  
// Scroll Variables (tweakable)
var defaultOptions = {

    // Scrolling Core
    frameRate        : 150, // [Hz]
    animationTime    : 400, // [ms]
    stepSize         : 100, // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Other
    fixedBackground   : true, 
    excluded          : ''    
};

var options = defaultOptions;


// Other Variables
var isExcluded = false;
var isFrame = false;
var direction = { x: 0, y: 0 };
var initDone  = false;
var root = document.documentElement;
var activeElement;
var observer;
var refreshSize;
var deltaBuffer = [];
var isMac = /^Mac/.test(navigator.platform);

var key = { left: 37, up: 38, right: 39, down: 40, spacebar: 32, 
            pageup: 33, pagedown: 34, end: 35, home: 36 };
var arrowKeys = { 37: 1, 38: 1, 39: 1, 40: 1 };

/***********************************************
 * INITIALIZE
 ***********************************************/

/**
 * Tests if smooth scrolling is allowed. Shuts down everything if not.
 */
function initTest() {
    if (options.keyboardSupport) {
        addEvent('keydown', keydown);
    }
}

/**
 * Sets up scrolls array, determines if frames are involved.
 */
function init() {
  
    if (initDone || !document.body) return;

    initDone = true;

    var body = document.body;
    var html = document.documentElement;
    var windowHeight = window.innerHeight; 
    var scrollHeight = body.scrollHeight;
    
    // check compat mode for root element
    root = (document.compatMode.indexOf('CSS') >= 0) ? html : body;
    activeElement = body;
    
    initTest();

    // Checks if this script is running in a frame
    if (top != self) {
        isFrame = true;
    }

    /**
     * Safari 10 fixed it, Chrome fixed it in v45:
     * This fixes a bug where the areas left and right to 
     * the content does not trigger the onmousewheel event
     * on some pages. e.g.: html, body { height: 100% }
     */
    else if (isOldSafari &&
             scrollHeight > windowHeight &&
            (body.offsetHeight <= windowHeight || 
             html.offsetHeight <= windowHeight)) {

        var fullPageElem = document.createElement('div');
        fullPageElem.style.cssText = 'position:absolute; z-index:-10000; ' +
                                     'top:0; left:0; right:0; height:' + 
                                      root.scrollHeight + 'px';
        document.body.appendChild(fullPageElem);
        
        // DOM changed (throttled) to fix height
        var pendingRefresh;
        refreshSize = function () {
            if (pendingRefresh) return; // could also be: clearTimeout(pendingRefresh);
            pendingRefresh = setTimeout(function () {
                if (isExcluded) return; // could be running after cleanup
                fullPageElem.style.height = '0';
                fullPageElem.style.height = root.scrollHeight + 'px';
                pendingRefresh = null;
            }, 500); // act rarely to stay fast
        };
  
        setTimeout(refreshSize, 10);

        addEvent('resize', refreshSize);

        // TODO: attributeFilter?
        var config = {
            attributes: true, 
            childList: true, 
            characterData: false 
            // subtree: true
        };

        observer = new MutationObserver(refreshSize);
        observer.observe(body, config);

        if (root.offsetHeight <= windowHeight) {
            var clearfix = document.createElement('div');   
            clearfix.style.clear = 'both';
            body.appendChild(clearfix);
        }
    }

    // disable fixed background
    if (!options.fixedBackground && !isExcluded) {
        body.style.backgroundAttachment = 'scroll';
        html.style.backgroundAttachment = 'scroll';
    }
}

/**
 * Removes event listeners and other traces left on the page.
 */
function cleanup() {
    observer && observer.disconnect();
    removeEvent(wheelEvent, wheel);
    removeEvent('mousedown', mousedown);
    removeEvent('keydown', keydown);
    removeEvent('resize', refreshSize);
    removeEvent('load', init);
}


/************************************************
 * SCROLLING 
 ************************************************/
 
var que = [];
var pending = false;
var lastScroll = Date.now();

/**
 * Pushes scroll actions to the scrolling queue.
 */
function scrollArray(elem, left, top) {
    
    directionCheck(left, top);

    if (options.accelerationMax != 1) {
        var now = Date.now();
        var elapsed = now - lastScroll;
        if (elapsed < options.accelerationDelta) {
            var factor = (1 + (50 / elapsed)) / 2;
            if (factor > 1) {
                factor = Math.min(factor, options.accelerationMax);
                left *= factor;
                top  *= factor;
            }
        }
        lastScroll = Date.now();
    }          
    
    // push a scroll command
    que.push({
        x: left, 
        y: top, 
        lastX: (left < 0) ? 0.99 : -0.99,
        lastY: (top  < 0) ? 0.99 : -0.99, 
        start: Date.now()
    });
        
    // don't act if there's a pending queue
    if (pending) {
        return;
    }  

    var scrollWindow = (elem === document.body);
    
    var step = function (time) {
        
        var now = Date.now();
        var scrollX = 0;
        var scrollY = 0; 
    
        for (var i = 0; i < que.length; i++) {
            
            var item = que[i];
            var elapsed  = now - item.start;
            var finished = (elapsed >= options.animationTime);
            
            // scroll position: [0, 1]
            var position = (finished) ? 1 : elapsed / options.animationTime;
            
            // easing [optional]
            if (options.pulseAlgorithm) {
                position = pulse(position);
            }
            
            // only need the difference
            var x = (item.x * position - item.lastX) >> 0;
            var y = (item.y * position - item.lastY) >> 0;
            
            // add this to the total scrolling
            scrollX += x;
            scrollY += y;            
            
            // update last values
            item.lastX += x;
            item.lastY += y;
        
            // delete and step back if it's over
            if (finished) {
                que.splice(i, 1); i--;
            }           
        }

        // scroll left and top
        if (scrollWindow) {
            window.scrollBy(scrollX, scrollY);
        } 
        else {
            if (scrollX) elem.scrollLeft += scrollX;
            if (scrollY) elem.scrollTop  += scrollY;                    
        }
        
        // clean up if there's nothing left to do
        if (!left && !top) {
            que = [];
        }
        
        if (que.length) { 
            requestFrame(step, elem, (1000 / options.frameRate + 1)); 
        } else { 
            pending = false;
        }
    };
    
    // start a new queue of actions
    requestFrame(step, elem, 0);
    pending = true;
}


/***********************************************
 * EVENTS
 ***********************************************/

/**
 * Mouse wheel handler.
 * @param {Object} event
 */
function wheel(event) {

    if (!initDone) {
        init();
    }
    
    var target = event.target;

    // leave early if default action is prevented   
    // or it's a zooming event with CTRL 
    if (event.defaultPrevented || event.ctrlKey) {
        return true;
    }
    
    // leave embedded content alone (flash & pdf)
    if (isNodeName(activeElement, 'embed') || 
       (isNodeName(target, 'embed') && /\.pdf/i.test(target.src)) ||
        isNodeName(activeElement, 'object') ||
        target.shadowRoot) {
        return true;
    }

    var deltaX = -event.wheelDeltaX || event.deltaX || 0;
    var deltaY = -event.wheelDeltaY || event.deltaY || 0;
    
    if (isMac) {
        if (event.wheelDeltaX && isDivisible(event.wheelDeltaX, 120)) {
            deltaX = -120 * (event.wheelDeltaX / Math.abs(event.wheelDeltaX));
        }
        if (event.wheelDeltaY && isDivisible(event.wheelDeltaY, 120)) {
            deltaY = -120 * (event.wheelDeltaY / Math.abs(event.wheelDeltaY));
        }
    }
    
    // use wheelDelta if deltaX/Y is not available
    if (!deltaX && !deltaY) {
        deltaY = -event.wheelDelta || 0;
    }

    // line based scrolling (Firefox mostly)
    if (event.deltaMode === 1) {
        deltaX *= 40;
        deltaY *= 40;
    }

    var overflowing = overflowingAncestor(target);

    // nothing to do if there's no element that's scrollable
    if (!overflowing) {
        // except Chrome iframes seem to eat wheel events, which we need to 
        // propagate up, if the iframe has nothing overflowing to scroll
        if (isFrame && isChrome)  {
            // change target to iframe element itself for the parent frame
            Object.defineProperty(event, "target", {value: window.frameElement});
            return parent.wheel(event);
        }
        return true;
    }
    
    // check if it's a touchpad scroll that should be ignored
    if (isTouchpad(deltaY)) {
        return true;
    }

    // scale by step size
    // delta is 120 most of the time
    // synaptics seems to send 1 sometimes
    if (Math.abs(deltaX) > 1.2) {
        deltaX *= options.stepSize / 120;
    }
    if (Math.abs(deltaY) > 1.2) {
        deltaY *= options.stepSize / 120;
    }
    
    scrollArray(overflowing, deltaX, deltaY);
    event.preventDefault();
    scheduleClearCache();
}

/**
 * Keydown event handler.
 * @param {Object} event
 */
function keydown(event) {

    var target   = event.target;
    var modifier = event.ctrlKey || event.altKey || event.metaKey || 
                  (event.shiftKey && event.keyCode !== key.spacebar);
    
    // our own tracked active element could've been removed from the DOM
    if (!document.body.contains(activeElement)) {
        activeElement = document.activeElement;
    }

    // do nothing if user is editing text
    // or using a modifier key (except shift)
    // or in a dropdown
    // or inside interactive elements
    var inputNodeNames = /^(textarea|select|embed|object)$/i;
    var buttonTypes = /^(button|submit|radio|checkbox|file|color|image)$/i;
    if ( event.defaultPrevented ||
         inputNodeNames.test(target.nodeName) ||
         isNodeName(target, 'input') && !buttonTypes.test(target.type) ||
         isNodeName(activeElement, 'video') ||
         isInsideYoutubeVideo(event) ||
         target.isContentEditable || 
         modifier ) {
      return true;
    }

    // [spacebar] should trigger button press, leave it alone
    if ((isNodeName(target, 'button') ||
         isNodeName(target, 'input') && buttonTypes.test(target.type)) &&
        event.keyCode === key.spacebar) {
      return true;
    }

    // [arrwow keys] on radio buttons should be left alone
    if (isNodeName(target, 'input') && target.type == 'radio' &&
        arrowKeys[event.keyCode])  {
      return true;
    }
    
    var shift, x = 0, y = 0;
    var overflowing = overflowingAncestor(activeElement);

    if (!overflowing) {
        // Chrome iframes seem to eat key events, which we need to 
        // propagate up, if the iframe has nothing overflowing to scroll
        return (isFrame && isChrome) ? parent.keydown(event) : true;
    }

    var clientHeight = overflowing.clientHeight; 

    if (overflowing == document.body) {
        clientHeight = window.innerHeight;
    }

    switch (event.keyCode) {
        case key.up:
            y = -options.arrowScroll;
            break;
        case key.down:
            y = options.arrowScroll;
            break;         
        case key.spacebar: // (+ shift)
            shift = event.shiftKey ? 1 : -1;
            y = -shift * clientHeight * 0.9;
            break;
        case key.pageup:
            y = -clientHeight * 0.9;
            break;
        case key.pagedown:
            y = clientHeight * 0.9;
            break;
        case key.home:
            y = -overflowing.scrollTop;
            break;
        case key.end:
            var scroll = overflowing.scrollHeight - overflowing.scrollTop;
            var scrollRemaining = scroll - clientHeight;
            y = (scrollRemaining > 0) ? scrollRemaining + 10 : 0;
            break;
        case key.left:
            x = -options.arrowScroll;
            break;
        case key.right:
            x = options.arrowScroll;
            break;            
        default:
            return true; // a key we don't care about
    }

    scrollArray(overflowing, x, y);
    event.preventDefault();
    scheduleClearCache();
}

/**
 * Mousedown event only for updating activeElement
 */
function mousedown(event) {
    activeElement = event.target;
}


/***********************************************
 * OVERFLOW
 ***********************************************/

var uniqueID = (function () {
    var i = 0;
    return function (el) {
        return el.uniqueID || (el.uniqueID = i++);
    };
})();

var cache = {}; // cleared out after a scrolling session
var clearCacheTimer;

//setInterval(function () { cache = {}; }, 10 * 1000);

function scheduleClearCache() {
    clearTimeout(clearCacheTimer);
    clearCacheTimer = setInterval(function () { cache = {}; }, 1*1000);
}

function setCache(elems, overflowing) {
    for (var i = elems.length; i--;)
        cache[uniqueID(elems[i])] = overflowing;
    return overflowing;
}

//  (body)                (root)
//         | hidden | visible | scroll |  auto  |
// hidden  |   no   |    no   |   YES  |   YES  |
// visible |   no   |   YES   |   YES  |   YES  |
// scroll  |   no   |   YES   |   YES  |   YES  |
// auto    |   no   |   YES   |   YES  |   YES  |

function overflowingAncestor(el) {
    var elems = [];
    var body = document.body;
    var rootScrollHeight = root.scrollHeight;
    do {
        var cached = cache[uniqueID(el)];
        if (cached) {
            return setCache(elems, cached);
        }
        elems.push(el);
        if (rootScrollHeight === el.scrollHeight) {
            var topOverflowsNotHidden = overflowNotHidden(root) && overflowNotHidden(body);
            var isOverflowCSS = topOverflowsNotHidden || overflowAutoOrScroll(root);
            if (isFrame && isContentOverflowing(root) || 
               !isFrame && isOverflowCSS) {
                return setCache(elems, getScrollRoot()); 
            }
        } else if (isContentOverflowing(el) && overflowAutoOrScroll(el)) {
            return setCache(elems, el);
        }
    } while (el = el.parentElement);
}

function isContentOverflowing(el) {
    return (el.clientHeight + 10 < el.scrollHeight);
}

// typically for <body> and <html>
function overflowNotHidden(el) {
    var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y');
    return (overflow !== 'hidden');
}

// for all other elements
function overflowAutoOrScroll(el) {
    var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y');
    return (overflow === 'scroll' || overflow === 'auto');
}


/***********************************************
 * HELPERS
 ***********************************************/

function addEvent(type, fn) {
    window.addEventListener(type, fn, false);
}

function removeEvent(type, fn) {
    window.removeEventListener(type, fn, false);  
}

function isNodeName(el, tag) {
    return (el.nodeName||'').toLowerCase() === tag.toLowerCase();
}

function directionCheck(x, y) {
    x = (x > 0) ? 1 : -1;
    y = (y > 0) ? 1 : -1;
    if (direction.x !== x || direction.y !== y) {
        direction.x = x;
        direction.y = y;
        que = [];
        lastScroll = 0;
    }
}

var deltaBufferTimer;

if (window.localStorage && localStorage.SS_deltaBuffer) {
    try { // #46 Safari throws in private browsing for localStorage 
        deltaBuffer = localStorage.SS_deltaBuffer.split(',');
    } catch (e) { } 
}

function isTouchpad(deltaY) {
    if (!deltaY) return;
    if (!deltaBuffer.length) {
        deltaBuffer = [deltaY, deltaY, deltaY];
    }
    deltaY = Math.abs(deltaY);
    deltaBuffer.push(deltaY);
    deltaBuffer.shift();
    clearTimeout(deltaBufferTimer);
    deltaBufferTimer = setTimeout(function () {
        try { // #46 Safari throws in private browsing for localStorage
            localStorage.SS_deltaBuffer = deltaBuffer.join(',');
        } catch (e) { }  
    }, 1000);
    return !allDeltasDivisableBy(120) && !allDeltasDivisableBy(100);
} 

function isDivisible(n, divisor) {
    return (Math.floor(n / divisor) == n / divisor);
}

function allDeltasDivisableBy(divisor) {
    return (isDivisible(deltaBuffer[0], divisor) &&
            isDivisible(deltaBuffer[1], divisor) &&
            isDivisible(deltaBuffer[2], divisor));
}

function isInsideYoutubeVideo(event) {
    var elem = event.target;
    var isControl = false;
    if (document.URL.indexOf ('www.youtube.com/watch') != -1) {
        do {
            isControl = (elem.classList && 
                         elem.classList.contains('html5-video-controls'));
            if (isControl) break;
        } while (elem = elem.parentNode);
    }
    return isControl;
}

var requestFrame = (function () {
      return (window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    ||
              function (callback, element, delay) {
                 window.setTimeout(callback, delay || (1000/60));
             });
})();

var MutationObserver = (window.MutationObserver || 
                        window.WebKitMutationObserver ||
                        window.MozMutationObserver);  

var getScrollRoot = (function() {
  var SCROLL_ROOT;
  return function() {
    if (!SCROLL_ROOT) {
      var dummy = document.createElement('div');
      dummy.style.cssText = 'height:10000px;width:1px;';
      document.body.appendChild(dummy);
      var bodyScrollTop  = document.body.scrollTop;
      var docElScrollTop = document.documentElement.scrollTop;
      window.scrollBy(0, 3);
      if (document.body.scrollTop != bodyScrollTop)
        (SCROLL_ROOT = document.body);
      else 
        (SCROLL_ROOT = document.documentElement);
      window.scrollBy(0, -3);
      document.body.removeChild(dummy);
    }
    return SCROLL_ROOT;
  };
})();


/***********************************************
 * PULSE (by Michael Herf)
 ***********************************************/
 
/**
 * Viscous fluid with a pulse for part and decay for the rest.
 * - Applies a fixed force over an interval (a damped acceleration), and
 * - Lets the exponential bleed away the velocity over a longer interval
 * - Michael Herf, http://stereopsis.com/stopping/
 */
function pulse_(x) {
    var val, start, expx;
    // test
    x = x * options.pulseScale;
    if (x < 1) { // acceleartion
        val = x - (1 - Math.exp(-x));
    } else {     // tail
        // the previous animation ended here:
        start = Math.exp(-1);
        // simple viscous drag
        x -= 1;
        expx = 1 - Math.exp(-x);
        val = start + (expx * (1 - start));
    }
    return val * options.pulseNormalize;
}

function pulse(x) {
    if (x >= 1) return 1;
    if (x <= 0) return 0;

    if (options.pulseNormalize == 1) {
        options.pulseNormalize /= pulse_(1);
    }
    return pulse_(x);
}


/***********************************************
 * FIRST RUN
 ***********************************************/

var userAgent = window.navigator.userAgent;
var isEdge    = /Edge/.test(userAgent); // thank you MS
var isChrome  = /chrome/i.test(userAgent) && !isEdge; 
var isSafari  = /safari/i.test(userAgent) && !isEdge; 
var isMobile  = /mobile/i.test(userAgent);
var isIEWin7  = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);
var isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));
var isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;

var wheelEvent;
if ('onwheel' in document.createElement('div'))
    wheelEvent = 'wheel';
else if ('onmousewheel' in document.createElement('div'))
    wheelEvent = 'mousewheel';

if (wheelEvent && isEnabledForBrowser) {
    addEvent(wheelEvent, wheel);
    addEvent('mousedown', mousedown);
    addEvent('load', init);
}


/***********************************************
 * PUBLIC INTERFACE
 ***********************************************/

function SmoothScroll(optionsToSet) {
    for (var key in optionsToSet)
        if (defaultOptions.hasOwnProperty(key)) 
            options[key] = optionsToSet[key];
}
SmoothScroll.destroy = cleanup;

if (window.SmoothScrollOptions) // async API
    SmoothScroll(window.SmoothScrollOptions);

if (typeof define === 'function' && define.amd)
    define(function() {
        return SmoothScroll;
    });
else if ('object' == typeof exports)
    module.exports = SmoothScroll;
else
    window.SmoothScroll = SmoothScroll;

})();
more

[ CSS ] bootstrap4 flex 運用

logo

呼,工作總算是告一段落。最近被公司派去支援切版順便學習 (唯一能切版的網站設計離職了),而且一切(ㄑ一ㄝ)就是RWD,真的非常有挑戰性 ... 不過也因為這樣,photoshop 跟 boostrap 的技能都被大幅強化了 (レベルアップ!) 今天就是要來講在這工作中遇到的一些小問題

以下所有範例都可以到下面連結做測試喔 ! https://codepen.io/anon/pen/jGMMLy

##View-port

以往我對切版的認知是,float: left (right);,不過在 CSS3 後多了新的排版方式flex,一開始還真覺得有點複雜

用了bootstrap後真是海闊天空啊 !!! 考試都考100分,基本版面如下↓

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=0.8,maximum-scale=2.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- CSS -->
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">    
    <!-- font-awsome -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    <!-- JS framework -->
    <!-- jquery -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- jQuery-UI -->
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <!-- Bootstrap -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <!-- modernizr 2.8.3 -->
    <script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
    <!-- scrolling -->
    <script lang="javascript" src="/js/CCscroll.js"></script>
    <!-- fancybox -->
    <link rel="stylesheet" href="/js/fancybox2.15/source/jquery.fancybox.css" />
    <script src="/js/fancybox2.15/source/jquery.fancybox.js"></script>
    <!-- countJS -->
    <script language="JavaScript" src="/js/count.js"></script>
    <!-- Resize -->
    <script language="JavaScript" src="/js/Cresize.js"></script>
    <!-- style -->
    <link rel="stylesheet" href="css/Cstyle.css" />
    <link rel="stylesheet" href="css/Cdevice-tablet.css" />
</head>

上面的範例是我最新弄好的基本<head>,先導入基本的jQuery、boostrap 4 beta ( 下一篇再來談bootstrap3boostrap4的差別 )

基本你只要看meta view-port那行就好 XD,在view-port裡面我們可以看到一些設定屬性,以下引用w3c的介紹並說明:

  • width:[數字] 或 device-width,直接指定當前裝置寬度為最寬,就可以放心的在 CSS 中寫width: 100% !
  • height:[數字] 或 device-height,同上,設定裝置高度為最高。
  • initial-scale:最小0.25,最大5,正常情況下放大縮小的比例,通常會給1
  • minimum-scale=0.8,這行的意思是指最小縮放不能低於0.8
  • maximum-scale:最小0.25,最大5,最大縮放比例,通常也會只給1
  • user-scalable:1 或 0 (yes 或 no),這項設定其實就是指zoom,是否允許使用者縮放,我通常會給0 (no) XD

##Bootstrap 4 flex

以上只是基本設定,設定好之後,我們來 talking about bootstrap flex

在 bootstrap 4 中,我們有五種響應式斷點,如下

width < 34em / 480px width ≥ 34em / 480px width ≥ 45em / 720px width ≥ 62em / 992px width ≥ 75em / 1200px
.col-xs .col-sm .col-md .col-lg .col-xl

除了以上五種以外,還有一種非斷點,即col,總共六種可以排列

而每一行你都有12個單位可以排列,比方↓

<!-- 請務必一定要記得使用row當parent div,否則斷點不會執行 -->
<div class="row">
    <!-- 我是一整行 -->
    <div class="col-12">1</div>
    <!-- 我是兩個框框 -->
    <div class="col-6">1</div>
    <div class="col-6">2</div>
    <!-- 我是三個框框 -->
    <div class="col-4">1</div>
    <div class="col-4">2</div>
    <div class="col-4">3</div>
    <!-- 我是四個框框 -->
    <div class="col-3">1</div>
    <div class="col-3">2</div>
    <div class="col-3">3</div>
    <div class="col-3">4</div>
    <!-- 我是六個框框 -->
    <div class="col-2">1</div>
    <div class="col-2">2</div>
    <div class="col-2">3</div>
    <div class="col-2">4</div>
    <div class="col-2">5</div>
    <div class="col-2">6</div>
    <!-- 我是十二個框框 -->
    <div class="col-1">1</div>
    <div class="col-1">2</div>
    <div class="col-1">3</div>
    <div class="col-1">4</div>
    <div class="col-1">5</div>
    <div class="col-1">6</div>
    <div class="col-1">7</div>
    <div class="col-1">8</div>
    <div class="col-1">9</div>
    <div class="col-1">10</div>
    <div class="col-1">11</div>
    <div class="col-1">12</div>
</div>

當然,很多時候這個排版方式其實還是會受到老闆期望的樣式所限制,這時候就可能需要再div.row上做手腳

像是限制最大寬度max-width強制讓div間隔不要太開,讓畫面能達到預期的結果

Bootstrap 4中其中一個改變是,這些col開頭的響應式欄位可以不需要設定數字就可以達到平均分配欄寬的效果

<!-- 兩格 -->
<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
</div>

<!-- 五格 -->
<div class="row">
    <div class="col-xl">1</div>
    <div class="col-xl">2</div>
    <div class="col-xl">3</div>
    <div class="col-xl">4</div>
    <div class="col-xl">5</div>
</div>

##justify - 水平排列

上面的排版方法熟悉之後,就可以來講justify這屬性了,在以前我們通常是用絕對定位或者是text-align來達成置中的效果

在flex中,我們使用的是更方便的justify來定位,而bootstrap 4已經有為我們準備了簡單好用的class,設定在父元素中就可以使用

請看以下範例↓

###justify-content-start、justify-content-center、justify-content-end

  • justify-content-start : 置左
  • justify-content-center : 置中
  • justify-content-end : 置右
<div class="row justify-content-start">
    <div class="col-xl-2">start</div>
</div>

<div class="row justify-content-center">
    <div class="col-xl-2">center</div>
</div>

<div class="row justify-content-end">
    <div class="col-xl-2">end</div>
</div>

###justify-content-around、justify-content-between

  • justify-content-around : 平均分配欄寬在 col 之間
  • justify-content-between : 平均分配欄寬在 col 左右
<div class="row justify-content-around">
    <div class="col-xl-2">around</div>
    <div class="col-xl-2">around</div>
</div>

<div class="row justify-content-between">
    <div class="col-xl-2">between</div>
</div>

##align - 垂直排列

flex的垂直排列有align-itemsalign-self兩種屬性可以設置,bootstrap 4的class中,也是分成兩種使用方式

  • align-items-(start、center、end) : 設定在父元素
  • align-self-(start、center、end) : 設定在子元素

請看以下範例↓

<div class="row align-items-start">
    <div class="col-1"></div>
</div>

<div class="row align-items-center">
    <div class="col-1"></div>
</div>

<div class="row align-items-end">
    <div class="col-1"></div>
</div>

<div class="row" style="height:200px;">
    <div class="col-1 align-self-start"></div>
    <div class="col-1 align-self-center"></div>
    <div class="col-1 align-self-end"></div>
</div>

##Order - 序列戰爭(被毆

Order這屬性滿特別的,決定了每個flex子元素的順序,簡單來說就是數字越小就越前面

<!-- 原本的框框 -->
<div class="d-flex">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<!-- 修改後的框框 -->
<div class="d-flex">
    <div style="order:3;">A</div>
    <div style="order:1;">B</div>
    <div style="order:2;">C</div>
</div>
  • d-flex是boostrap 4預設的display: flex;

以上就是Bootstrap 4 grid system 的一丁點皮毛 … ㄏㄏ

還有很多衍伸應用,比方說d-flex也有斷點,例如d-sm-flex或是d-xl-fle

justify-content-sm-centeralign-self-md-start之類的使用,可以自由發揮

至於,像是flex-wrapflex-wrap-reverse,不過不是我不提,而是我覺得在實際切版的過程中真的比較少用到

畢竟花最多時間的不是切版,而是怎麼做的跟美術給我的圖片一模一樣的網站出來才是頭痛的地方 Haha

以後如果有用到在上來寫囉XD

more

[ Linux ] 實用指令紀錄 - find

logo

find,一般linux user很常用到的指令之一,如同它的英文一樣,可以用來找檔案名稱或是內容。

find 指令結構

find [目錄] [參數]

  • 家目錄搜尋名為test且大小寫一致的資料夾或檔案

    find ~ -name “test”

  • 家目錄搜尋名為test但不分大小寫的資料夾或檔案

    find ~ -iname “test”

  • 家目錄搜尋名稱包含test且大小寫一致的資料夾或檔案

    find ~ -name “*test*”

  • 家目錄搜尋名為test且大小寫一致的檔案

    find ~ -name “test” -type f

  • 家目錄搜尋名為test且大小寫一致的資料夾

    find ~ -name “test” -type d

  • 當前目錄搜尋副檔名為.php且大小寫一致的檔案 ( * 為萬用字元 )

    find . -name “*.php”

  • 家目錄搜尋檔案大小大於10MB的檔案

    find ~ -size +10M -type f

  • 家目錄搜尋小於1024KB的檔案

    find ~ -size -1024k -type f

  • /var/www搜尋60分鐘內有被修改過的檔案

    find ~ -amin -60 -type f

以上只是搜尋,接下來下面要介紹的是進階用法,適合拿來做排程、執行 ↓

  • /var/www搜尋名稱包含DABAO的檔案,並更改擁有者為dabao

    find -name “*DABAO*” -type f -user dabao

  • /tmp搜尋超過七天沒有改動過的檔案並刪除

    find /tmp -mtime +7 -type f -delete

  • /var/www搜尋副檔名為.php且內容包含phpinfo的檔案
 find -name "*.php" | exec grep -H "phpinfo" {} \;
 
more

[ Linux ] 最危險的 Linux 指令

logo

這是在朋友的問卷調查中看到的,做個紀錄以防不時之需 (喂!)
rm -rf /
:(){ :|: & };:
mkfs /dev/sda1 
cat /dev/zero > /dev/sda1
wget url -O - | sh --
curl url | sh
dd if=/dev/zero of=/dev/sda2
echo 726d202d7266202a | xxd -r -p
dd if=/dev/random of=/dev/port
echo 1 > /proc/sys/kernel/panic
cat /dev/port or cat /dev/mem
cat /dev/zero > /dev/mem
sudo chmod -r 444 / or sudo chown -r nobody:nobody /
last | reboot

:(){ :|: & };: 特別說明一下這一行,它是先宣告一個函數叫做,然後true piecetrue執行,因為是自己執行自己,所以一變二、二變四這樣無限執行下去。

光看就好痛 !

more