Jame's Blog

前端開發心得 front-end Develop

使用 Xpath 操作 Chrome Browser

| Comments

操作方式

點擊 menu by code

$('[code="action-betting"] a').click()

點擊 單字

Content.showBannerProperties('DANGEROUS_ATTACK')

操作內容

Content.properties[7].Value

儲存

$x("//*[contains(text(),'Save')]")[0].click() 
//透過字面 

$x("//*[contains(text(),'Mobile')]")[0].click() 點選
$x("//*[contains(text(),'Mobile')]/parent::*")[0].click()  展開

//透過 code 

$x("//*[@code='siteblocks']")[0].click() 展開
$x("//*[@code='siteblocks']/a")[0].click() 點選

$x("//*[@id='TabListPlace']/descendant::*[contains(text(),'Site management')]")[0].click()

How to Sign into Two or more skype accounts at once

| Comments

如何在 skype 同時登入不同的帳號

Windows 底下的 skype

"C:\Program Files (x86)\Skype\Phone\Skype.exe" /secondary

Windows 底下的 preview 版 skype

"C:\Program Files (x86)\Microsoft\Skype for Desktop\Skype.exe" --secondary

Mac

open -na /Applications/Skype.app --args -DataPath /Users/$(whoami)/Library/Application\ Support/Skype2

透過改變 skype2 的值,可以建立多個執行程序

安裝 Fish Shell 在 ubuntu

| Comments

ubuntu 安裝 Fish shell

遇到:apt-get install software-properties-common
解決方式

apt-get install software-properties-common
sudo apt-add-repository ppa:fish-shell/release-2
sudo apt-get update
sudo apt-get install fish

Make Fish your default shell:

chsh -s /usr/bin/fish

詳細教學

https://hackercodex.com/guide/install-fish-shell-mac-ubuntu/

另外要設定 prompt 的格式
需要再 ~/.config/fish/ 資料夾中新增 config.fish

set -g -x PATH /usr/local/bin $PATH
set -g -x fish_greeting ''

set -g theme_display_git no
set -g theme_display_git_untracked no
set -g theme_display_git_ahead_verbose yes
set -g theme_git_worktree_support yes
set -g theme_display_vagrant yes
set -g theme_display_docker_machine no
set -g theme_display_hg yes
set -g theme_display_virtualenv no
set -g theme_display_ruby no
set -g theme_display_user yes
set -g theme_display_vi no
set -g theme_display_date no
set -g theme_display_cmd_duration yes
set -g theme_title_display_process yes
set -g theme_title_display_path no
set -g theme_title_use_abbreviated_path no
set -g theme_date_format "+%a %H:%M"
set -g theme_avoid_ambiguous_glyphs yes
set -g theme_powerline_fonts yes
set -g theme_nerd_fonts no
set -g theme_show_exit_status yes
set -g default_user your_normal_user
set -g theme_color_scheme dark
set -g fish_prompt_pwd_dir_length 0
set -g theme_project_dir_length 1

如何升級 gitlab

| Comments

升級 Gitlab CE

檢查是否有新版

https://packages.gitlab.com/gitlab/

更新 ubuntu 套件

sudo apt-get update

有時候會失效,如果並沒有實際更新資料的話,可以執行

curl -s https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.deb.sh | sudo bash

安裝 gitlab-ce

sudo apt-get install gitlab-ce    

參考資料:https://docs.gitlab.com/omnibus/update/README.html

備份 gitlab 的環境設定

| Comments

Gitlab 資料備份環境設定

目前仍然還是採用手動備份,目前現階段的目標是將備份環境設定完成
目標是要把 gitlab 的系統設定及資料庫通通備份到 Nas 上

設定過程如下

  1. 要先設定 Nas 的資料夾,透過NSF能夠被其他的Server存取
  2. 設定完資料夾之後,要讓 gitlab 的 linux Server 可以 mount 到 nas 分享的資料夾

    mount 10.1.1.31:/volume1/NetBackup /mnt/nasbackup/
    
  3. 修改遠端資料夾的權限

    chmod 777 /mnt/nasbackup 
    
  4. 修改 gitlab 設定檔

    sudo vi /etc/gitlab/gitlab.rb
    
  5. 修改 gitlab 備份指令的 存檔位置

    gitlab_rails['backup_upload_connection'] = {
    
    :provider => 'Local',
    
    :local_root => '/mnt/nasbackup'
    
    }
    
  6. 改好要重新啟動

    sudo gitlab-ctl reconfigure
    
  7. 備份 gitlab 設定檔,必須備份整個 etc/gitlab 的目錄

    sudo sh -c 'umask 0077; tar -cf $(date "+etc-gitlab-%s.tar") -C / etc/gitlab' 
    sudo mv *.tar /mnt/nasbackup/configuration\ files
    
  8. 備份 gitlab 資料庫

    sudo gitlab-rake gitlab:backup:create
    

以上步驟要注意到執行身份,還有權限的問題喔
執行完成後就會通通放到 NAS 指定的資料夾囉

參考資料:

  1. Synology NAS How to access files on Synology NAS within the local network NFS
  2. gitlab Uploading to locally mounted shares

從 compass 到 node-sass

| Comments

Compass 專案大改造
由於Compass提供了很多內建的mixin
若改用node-sass勢必要安裝相當多的套件取代
這就是本次的目標
本次的專案是用gulp打包工具
所以就針對gulp來做這次的改造工作

所需的套件有哪些?

  1. gulp-sass
  2. compass-importer 提供一些 compass 函式
  3. sprite-magic-importer 提供一些 compass的sprite 函式
  4. node-sass-asset-functions 提供 compass 的 image-url 相關的函式
  5. compass-sass-mixins 提供一些 compass的sprite 函式

次要的部分

  1. gulp-clean-css
  2. gulp-sourcemaps

gulp 的設定如下

gulp.task("compass", function() {
  gulp
    .src("./resources/assets/sass/*.scss")
    .pipe(sourcemaps.init())
    .pipe(
      plumber(function(error) {
        console.log(error.message);
        this.emit("end"); //中斷這個task

      })
    )
    .pipe(
      sass({
        functions: assetFunctions({
          images_path: "public/img", //設定 image-url 的圖檔位置

          http_images_path: "/img"   //設定 image-url 的輸出後的路徑

        }),
        includePaths: ["node_modules/compass-sass-mixins/lib/"], //設定import sass檔案的路徑有哪些

        importer: [
          SpriteMagicImporter({
            sass_dir: "resources/assets/sass",
            images_dir: "public/img",
            generated_images_dir: "public/img",
            http_stylesheets_path: "/css",
            http_generated_images_path: "/img"
            // cache_dir: 'public/.cache', debug: true

          }),
          compass
        ]
      })
    )
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("./public/css"));
});

next 初體驗

| Comments

next 初體驗

教材來源:https://scotch.io/tutorials/react-universal-with-next-js-server-side-react

步驟:

  1. npm install

    npm init -y
    npm install next --save
    
  2. add start script

    "scripts":{
    "start":"next"
    }
    
  3. npm start

       npm start
    
  4. Error

       react not found. Please install react using 'npm install react'
    react-dom not found. Please install react-dom using 'npm install react-dom'
    
  5. fix package.json

       "dependencies": {
       "next": "^2.2.0",
       "react":"^15.4.2",
       "react-dom":"^15.4.2"
     }
    
  6. than npm i

  7. npm start

如何在 react-slick 避免 Swipe 的時候觸發到連結事件

| Comments

有網友遇到一個問題,在使用react-slick的時候,若其中的 slider 裡面有 a 標籤的時候,
當使用滑鼠,或觸控點擊的時候,會觸發到link的事件。
為了避免發生,就必須針對該事件的狀況做偵測。

本範例的範例內容是從下面這兩個範例參考而來的

實作方式:

  1. 先把測試環境先實做出來。
  2. 然後再根據實際狀況測試。
  3. 實際的操作react 的 event 行為
  4. 再根據實際的狀況做判斷

完成內容如下:
https://esnextb.in/?gist=fd8d61ddcd934623ee4a3872c113d63f

{
  "name": "react-slick-swipe-preventDefault",
  "version": "0.14.8",
  "dependencies": {
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-slick": "0.14.8"
  }
}
import React from 'react';
import ReactDOM from 'react-dom';
import Slider from 'react-slick';

var ReactSlickDemo = React.createClass({
  getInitialState: function() {
        return {
            moving: false,
            clicking:false
        };
  },
  handleClick: function (e) {
    if(this.state.moving){
      console.log("preventDefault");
      e.preventDefault();
      this.state.clicking = false;
      this.state.moving = false;
    }
    this.displayState("handleClick");
  },
  displayState: function(title){
     console.log(title,this.state.clicking,this.state.moving);
  },
  mouseMove: function(e){
    if(this.state.clicking){
      this.state.moving = true;
    }else{
      this.state.moving = false;
    }
    this.displayState("mouseMove");
  },
  ontouchstart: function(e){
    this.state.clicking = true;
    this.displayState("ontouchstart");
  },
  touchMove: function(e){
    this.state.moving = true;
    this.displayState("touchMove");
  },
  touchCancel: function(e){
    this.state.clicking = false;
    this.displayState("onTouchCancel");
  },
  touchEnd: function(e){
    this.state.clicking = false;
    this.displayState("touchEnd");
  },
  onmouseup: function(e){
    this.state.clicking = false;
    this.displayState("onmouseup");
  },
  onmousedown: function(e){
    this.state.clicking = true;
    this.displayState("onmousedown");
  },
  render: function() {
    var settings = {
        dots: true,
        centerMode:true
    }
    
    var linkscount = 4;
    var items = [];
    for(i=0;i<linkscount;i++){
      items.push(<div key={i} >
      <a draggable="false" 
      onTouchStart={this.ontouchstart} 
      onMouseDown={this.onmousedown}
      onMouseUp={this.onmouseup}
      onMouseMove={this.mouseMove} 
      onTouchEnd={this.touchEnd} 
      onTouchCancel={this.touchCancel} 
      onTouchMove={this.touchMove} 
      onClick={this.handleClick} 
      href="#" 
      target="_blank"><img draggable="false" src='http://placekitten.com/g/400/200' /></a></div>);
    }
        
    return (
        <div className='container'>
        <Slider {...settings}>
         { items }
        </Slider>
      </div>
    );
  }
});

ReactDOM.render(
  <ReactSlickDemo />,
  document.getElementById('container')
);

參考資料: SyntheticEvent