Code Snippets on Cacher

CSSグラデーションアニメ

https://codepen.io/P1N2O/pen/pyBNzX

body {
	width: 100wh;
	height: 90vh;
	color: #fff;
	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

h1,
h6 {
	font-family: 'Open Sans';
	font-weight: 300;
	text-align: center;
	position: absolute;
	top: 45%;
	right: 0;
	left: 0;
}

zsh: tips

# Reload config

source ~/.zshrc

Render Movie React Method

...if you don't want to use a ternary directly inside the JSX, you could create a method outside the render and call it within your JSX curly brackets as {this.renderMovie}.

renderMovie = () => {
  if (this.state.result.Title) {
    return (
      <MovieDetail
        src={this.state.result.Poster}
        director={this.state.result.Director}
        genre={this.state.result.Genre}
        released={this.state.result.Released}
      />
    );
  } else {
    return <h3>No Results to Display</h3>;
  }
};

Modal - trigger on form submit

https://stackoverflow.com/questions/34284820/triggering-bootstrap-modal-on-form-submit-and-not-on-click

// You need to remove data-toggle="modal" data-target="#myModal" and trigger your modal manually, you could use this in your code

//First initialize your modal to false so that it doesn't open up

$("#myModal").modal({ show: false});

// in submit method write below code

$("#myModal").modal("show");

Required fields with AJAX

https://stackoverflow.com/questions/31876238/required-fields-are-not-working-with-ajax

$(document).ready(function() {
  $("#register").submit(function(e) {
    //---------------^---------------
    e.preventDefault();
    var firstname = $('#First_name').val(),
      lastname = $('#last_name').val(),
      username = $('#reg_username').val(),
      password = $('#password').val(),
      email = $('#email').val();
    $.ajax({
      type: "POST",
      url: "doRegister.php",
      data: "first_name=" + firstname + "&last_name=" + lastname + "&username=" + username + "&password=" + password + "&email=" + email,
      success: function(html) {
        console.log(html);
      }
    });
    return false;

  });
});

m01_not_in_wide_measure.sql

-- 合并所有商家信息:
-- 来源1: 产品宽表中提取出来的有消耗的商家及信息
-- 来源2: m01表中17年开店但没有90天消耗的商家及信息

SELECT
    t1.vender_id AS id,
    t1.dept_name_1 AS dept_name_1,
    to_date(t1.create_tm) AS create_tm, -- 入驻时间(开店时间)
    0.0 AS consumption_2,
    0.0 AS consumption_1
FROM (
    SELECT
        vender_id,
        create_tm,
        dept_name_1
    FROM
        gdm.gdm_m01_vender_da
    WHERE
        dt = sysdate(-1)
        AND create_tm >= ${hiveconf:dt_start}
        AND create_tm <= ${hiveconf:dt_end}
) AS t1
LEFT OUTER JOIN (
    SELECT
        adv_id -- vender id
    FROM
        tmp.vender_permeability_da
) AS t2
ON
    t1.vender_id = t2.adv_id
WHERE
    t2.adv_id IS NULL

UNION ALL

SELECT
    adv_id AS id,
    dept_name_1 AS dept_name_1,
    create_tm AS create_tm,
    consumption_2,
    consumption_1
FROM
    tmp.vender_permeability_da

Linux开放JDK

# 添加openjdk8的第三方源
sudo apt-get install python-software-properties
sudo apt-get install software-properties-common
sudo add-apt-repository ppa:openjdk-r/ppa

# 执行更新
apt-get update

# 安装openjdk8
sudo apt-get install openjdk-8-jdk

# 选择版本
sudo update-alternatives --config java

linux防火墙ufw

安装：sudo apt-get install ufw
启用：sudo ufw enable	
sudo ufw default deny
关闭：sudo ufw disable
查看：sudo ufw status
开启端口：sudo ufw allow 80/udp
关闭端口：sudo ufw delete allow 80
允许IP所有端口：sudo ufw from 192.168.1.1
禁止IP所有端口：sudo ufw deny from 192.99.142.226 to any
禁止外部访问smtp：sudo ufw deny smtp
删除上面建立的某条规则：sudo ufw delete allow smtp

Get screen / display size

Get the screen dimension at runtime

DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int height = displayMetrics.heightPixels;
int width = displayMetrics.widthPixels;

docker: docker command essentials

# Folder 
	├── service1
	│   └── Dockerfile
	├── service2
	│   └── Dockerfile  
	├── service3
	│   └── Dockerfile  
	├── docker-compose.yml
	└── docker-compose-dev.yml  

# Docker commands
## Run an image
	docker run -d --name ThisIsAName -p 1000:2000 -p 1001:2001 -v ~/abc:/etc/abc blablabla/an_image_name
## Run an attach to an image
	docker run -it --name ThisIsAName -p 1000:2000 -p 1001:2001 -v ~/abc:/etc/abc blablabla/an_image_name
## Bash into a running container
	docker exec -it container_name bash
	
# Logs
## View logs
	docker logs container_name
## View and follow logs
	docker logs -f container_name
	
# Docker Compose
## View config
  docker-compose config

git: command line essentials

# Git alias
    git config --global alias.co checkout
    git config --global alias.ci commit
    git config --global alias.st status
    git config --global alias.br branch
    git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
    
&#x1F34E; **Note: all the following commands assume that the above aliases have been set**
    
# Get remote commits

## Rebase my local commits on top of the remote commits
    git pull --rebase

## Don't rebase or merge, only fast forward
    git pull --ff-only

## See what's in the remote commits in advance
    git fetch
    git lg
    
# See more log details
    git lg --stat

Gist Markdown Cheatsheet

# Heading 1 by # Heading 1
## Heading 2 by ## Heading 2
### Heading 3 by ### Heading 3
#### Heading 4 by #### Heading 4
##### Heading 5 by ##### Heading 5
###### Heading 6 by ######Heading 6	

---

Paragraph

text `Inline Code` text	by \`Inline Code\`

~~Mistaken text.~~ by \~\~Mistaken text.\~\~

*Italics* by \*Italics\*

**Bold** by \*\*Bold\*\*

---

Tasks
- [ ] a task list item
- [ ] list syntax required
- [ ] normal **formatting**
- [ ] incomplete
- [x] completed

---

Code Blocks

    4 space indention
    makes full-width
    standard code blocks

```js
var now = new Date();

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

function fourdigits(number)	{
	return (number < 1000) ? number + 1900 : number;
								}
today =  days[now.getDay()] + ", " +
         months[now.getMonth()] + " " +
         date + ", " +
         (fourdigits(now.getYear())) ;

document.write(today);
```

```css
#sc_drag_area {
  height:100px;
  left:150px;
  position: absolute;
  top:100px;
  width:250px;
  z-index: 9999;
}
```

---

* List item one
* List item two
    * A nested item

---

1. Number list item one		
	1.1. A nested item
2. Number list item two
3. Number list item three

---

> Quote
> 
> Second line Quote

---

Standard link =  http://ghost.org	
[Custom Text Link](http://ghost.org)

---

![Image](https://dl.dropboxusercontent.com/u/41297054/Pic.jpeg)

---

Table

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

---

Special Icons


    RED APPLE (&#x1F34E;): 🍎
    GREEN APPLE (&#x1F34F;): 🍏
    BLUE HEART (&#x1F499;): 💙
    GREEN HEART (&#x1F49A;): 💚
    YELLOW HEART (&#x1F49B;): 💛
    PURPLE HEART (&#x1F49C;): 💜
    GREEN BOOK (&#x1F4D7;): 📗
    BLUE BOOK (&#x1F4D8;): 📘
    ORANGE BOOK (&#x1F4D9;): 📙
    LARGE RED CIRCLE (&#x1F534;): 🔴
    LARGE BLUE CIRCLE (&#x1F535;): 🔵
    LARGE ORANGE DIAMOND (&#x1F536;): 🔶
    LARGE BLUE DIAMOND (&#x1F537;): 🔷
    SMALL ORANGE DIAMOND (&#x1F538;): 🔸
    SMALL BLUE DIAMOND (&#x1F539;): 🔹
    UP-POINTING RED TRIANGLE (&#x1F53A;): 🔺
    DOWN-POINTING RED TRIANGLE (&#x1F53B;): 🔻
    UP-POINTING SMALL RED TRIANGLE (&#x1F53C;): 🔼
    DOWN-POINTING SMALL RED TRIANGLE (&#x1F53D;): 🔽

Squid EC2 Template

Create a securitygroup, role, instance profile and ec2 instance for run squid

Description: Plantilla de creacion y configuracion servidor squid

Parameters:
  Stage:
    Description: Ambiente
    Type: String

  NetworkStack:
    Description: Nombre del stack de infraestructura transversal
    Type: String

  ValidIp1:
    Description: IP valida para usar el proxy
    Type: String

Resources:
    SquidSecutityGroup:
        Type: AWS::EC2::SecurityGroup
        Properties:
            VpcId:
              Fn::ImportValue: !Sub "${NetworkStack}-VPCID"
            GroupDescription: grupo de seguridad squid
            SecurityGroupIngress:
                - IpProtocol: tcp
                  FromPort: 80
                  ToPort: 80
                  CidrIp: !Ref ValidIp1

                - IpProtocol: tcp
                  FromPort: 22
                  ToPort: 22
                  CidrIp: 0.0.0.0/0

            SecurityGroupEgress:
                - IpProtocol: tcp
                  FromPort: 443
                  ToPort: 443
                  CidrIp: 0.0.0.0/0

                - IpProtocol: tcp
                  FromPort: 80
                  ToPort: 80
                  CidrIp: 0.0.0.0/0
            Tags:
                - Key: Name
                  Value: !Sub "awsuseast1-${Stage}squidsg"

    EC2Role:
        Type: AWS::IAM::Role
        Properties:
          Path: /
          RoleName: squidEc2Role
          AssumeRolePolicyDocument: |
              {
                  "Statement": [{
                      "Action": "sts:AssumeRole",
                      "Effect": "Allow",
                      "Principal": {
                          "Service": "ec2.amazonaws.com"
                      }
                  }]
              }
          Policies:
              - PolicyName: squidPolicy
                PolicyDocument: |
                  {
                      "Statement": [{
                          "Effect": "Allow",
                          "Action": [
                              "s3:PutObject",
                              "s3:GetObject",
                              "s3:AbortMultipartUpload",
                              "s3:ListMultipartUploadParts",
                              "s3:ListBucketMultipartUploads"
                          ],
                          "Resource": "*"
                      }]
                  }

    EC2InstanceProfile:
        Type: AWS::IAM::InstanceProfile
        Properties:
            Path: /
            Roles:
                - !Ref EC2Role


    SquidEC2:
        Type: AWS::EC2::Instance
        Properties:
            ImageId: ami-afd15ed0
            KeyName: !Sub "awsuseast1-${Stage}squidkey"
            InstanceType: t2.micro
            PrivateIpAddress: 10.197.10.243
            SecurityGroupIds:
              - !Ref SquidSecutityGroup
            SubnetId:
              Fn::ImportValue: !Sub "${NetworkStack}-PrivateSubnet1"
            IamInstanceProfile: !Ref EC2InstanceProfile
            Tags:
              - Key: Name
                Value: !Sub "awsuseast1-${Stage}squid"
            UserData:
              Fn::Base64: !Sub |
                  #!/bin/bash
                  yum install -y squid
                  mkdir -p /usr/local/squid/ssl_cert
                  /usr/bin/aws s3api get-object --bucket awsuseast1-${Stage}infbuc --key squid-proxy/squid.crt /usr/local/squid/ssl_cert/squid.crt
                  /usr/bin/aws s3api get-object --bucket awsuseast1-${Stage}infbuc --key squid-proxy/squid.key /usr/local/squid/ssl_cert/squid.key
                  echo "acl SSL_ports port 443
                  acl Safe_ports port 80
                  acl Safe_ports port 21
                  acl Safe_ports port 443
                  acl Safe_ports port 70
                  acl Safe_ports port 210
                  acl Safe_ports port 1025-65535
                  acl Safe_ports port 280
                  acl Safe_ports port 488
                  acl Safe_ports port 591
                  acl Safe_ports port 777
                  acl CONNECT method CONNECT
                  acl QUERY urlpath_regex cgi-bin \? asp aspx jsp
                  cache deny QUERY
                  http_access deny !Safe_ports
                  http_access deny CONNECT !SSL_ports
                  http_access allow all
                  http_port 3128
                  cache_mem 64 MB
                  maximum_object_size 1 MB
                  read_ahead_gap 64 KB
                  forwarded_for delete
                  shutdown_lifetime 30 seconds
                  refresh_pattern ^ftp:		1440	20%	10080
                  refresh_pattern ^gopher:	1440	0%	1440
                  refresh_pattern -i (/cgi-bin/|\?) 0	0%	0
                  refresh_pattern .		0	20%	4320
                  always_direct allow all
                  ssl_bump bump all
                  sslproxy_cert_error allow all
                  sslproxy_flags DONT_VERIFY_PEER
                  http_port 3128 intercept ssl-bump cert=/usr/local/squid/ssl_cert/squid.crt key=/usr/local/squid/ssl_cert/squid.key options=NO_SSLv2" > /etc/squid/squid.conf
                  iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3128
                  iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 443 -j REDIRECT --to-port 3128
                  iptables-save > /etc/sysconfig/iptables

Double Open (1 click)

open 2 website when clicking on 1 CTA


<a href="javascript:DoubleOpen('http://www.yahoo.com', 'https://www.google.com');">Click Here</a>

Detect scroll up or down

detectScrollUpOrDown: function () {
    var $el = $('.mega-menu .filters-blade');
    var lastOffsetTop = $el.offset().top - $(window).scrollTop();

    $(window).on('scroll', function () {
        var currentOffsetTop = $el.offset().top - $(window).scrollTop();

        if (currentOffsetTop < lastOffsetTop) {
            // Scrolling down
            console.log('Scrolling down...');
        } else {
            console.log('Scrolling up...');
        }
        
        setTimeout(function(){
            lastOffsetTop = $el.offset().top - $(window).scrollTop();
        }, 250);

    });

}

My HyperTerm Config JS

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    // choose either `'stable'` for receiving highly polished,
    // or `'canary'` for less polished but more frequent updates
    updateChannel: 'stable',

    // default font size in pixels for all tabs
    fontSize: 16,

    // font family with optional fallbacks
    fontFamily: '"SourceCodePro+Powerline+Awesome Regular","Source Code Pro for Powerline",Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // default font weight: 'normal' or 'bold'
    fontWeight: 'normal',

    // font weight for bold characters: 'normal' or 'bold'
    fontWeightBold: 'bold',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(131,148,150,0.8)',

    // terminal text color under BLOCK cursor
    cursorAccentColor: '#000',

    // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
    cursorShape: 'BLOCK',

    // set to `true` (without backticks and without quotes) for blinking cursor
    cursorBlink: true,

    // color of the text
    foregroundColor: '#839496',

    // terminal background color
    // opacity is only supported on macOS
    backgroundColor: 'rgba(0,40,51,0.6)',

    // terminal selection color
    selectionColor: 'rgba(0,53,65,0.3)',

    // border color (window, tabs)
    borderColor: '#333',

    // custom CSS to embed in the main window
    css: '',

    // custom CSS to embed in the terminal window
    termCSS: '',

    // if you're using a Linux setup which show native menus, set to false
    // default: `true` on Linux, `true` on Windows, ignored on macOS
    showHamburgerMenu: '',

    // set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
    // additionally, set to `'left'` if you want them on the left, like in Ubuntu
    // default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
    showWindowControls: '',

    // custom padding (CSS format, i.e.: `top right bottom left`)
    padding: '12px 14px',

    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    colors: {
      black: '#003541',
      red: '#dc322f',
      green: '#859901',
      yellow: '#b58901',
      blue: '#268bd2',
      magenta: '#d33682',
      cyan: '#2aa198',
      white: '#eee8d5',
      lightBlack: '#586e75',
      lightRed: '#cb4b16',
      lightGreen: '#586e75',
      lightYellow: '#657b83',
      lightBlue: '#839496',
      lightMagenta: '#6c6ec6',
      lightCyan: '#93a1a1',
      lightWhite: '#fdf6e3',
    },

    // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
    // if left empty, your system's login shell will be used by default
    //
    // Windows
    // - Make sure to use a full path if the binary name doesn't work
    // - Remove `--login` in shellArgs
    //
    // Bash on Windows
    // - Example: `C:\\Windows\\System32\\bash.exe`
    //
    // PowerShell on Windows
    // - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
    shell: '',

    // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
    // by default `['--login']` will be used
    shellArgs: ['--login'],

    // for environment variables
    env: {},

    // set to `false` for no bell
    bell: 'SOUND',

    // if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
    copyOnSelect: false,

    // if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
    defaultSSHApp: true,

    // if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
    // selection is present (`true` by default on Windows and disables the context menu feature)
    // quickEdit: true,

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',

    // for advanced config flags please refer to https://hyper.is/#cfg
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  plugins: [],

  // in development, you can create a directory under
  // `~/.hyper_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: [],

  keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
  },
};

Cacher is the code snippet organizer for pro developers

Curate a library of useful code snippets for you and your team.