syuji-higa

Public Snippets 58

zinit setting

zinit setting
autoload -Uz compinit && compinit



### Added by Zinit's installer
if [[ ! -f $HOME/.zinit/bin/zinit.zsh ]]; then
    print -P "%F{33}▓▒░ %F{220}Installing DHARMA Initiative Plugin Manager (zdharma/zinit)…%f"
    command mkdir -p "$HOME/.zinit" && command chmod g-rwX "$HOME/.zinit"
    command git clone https://github.com/zdharma/zinit "$HOME/.zinit/bin" && \
        print -P "%F{33}▓▒░ %F{34}Installation successful.%f%b" || \
        print -P "%F{160}▓▒░ The clone has failed.%f%b"
fi

source "

ESLint - ignore setting (v6.7.0~)

ESLint - ignore setting (v6.7.0~)
module.exports = {
  ignorePatterns: []
}

karabiner.json

{
    "global": {
        "check_for_updates_on_startup": true,
        "show_in_menu_bar": true,
        "show_profile_name_in_menu_bar": false
    },
    "profiles": [
        {
            "complex_modifications": {
                "parameters": {
                    "basic.simultaneous_threshold_milliseconds": 50,
                    "basic.to_delayed_action_delay_milliseconds": 500,
                    "basic.to_if_alone_timeout_milliseconds": 1000,
                    "basic.to_if_held_dow

Vue.js - SFC generic components

Vue.js - SFC generic components
<template>
  <component
    :is="tag"
    class="small-button-component"
    :disabled="isDisabled"
    v-bind="attrs"
    v-on="$listeners"
  >
    {{ text }}
  </component>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    tag: {
      type: String, // 'button' | 'a' | 'nuxt-link'
      default: 'button'
    },
    text: {
      type: String,
      required: true
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    attrs() {

Vue.js - SFC generic components

Vue.js - SFC generic components
<template>
  <component
    :is="tag"
    class="small-button-component"
    :disabled="isDisabled"
    v-bind="attrs"
    v-on="$listeners"
  >
    {{ text }}
  </component>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    tag: {
      type: String, // 'button' | 'a' | 'nuxt-link'
      default: 'button'
    },
    text: {
      type: String,
      required: true
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    attrs() {

Nuxt.js - Navigation Guard

Nuxt.js - Navigation Guard
<template>
  <div>
    <div v-if="isLeavePageDialogOpened" class="page-leave-dialog">
      <p>Are you sure you want to change the page?</p>
      <div>
        <button type="button" @onClick="leavePageNext(false)">No</button>
        <button type="button" @onClick="leavePageNext(true)">Yes</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  beforeRouteLeave(to, from, next) {
    // // simple
    // const result = Window.confirm('Are you sure you want to change the

GitHub Actions - Genelate Nuxt.js deploy for GitHub Pages

GitHub Actions - Genelate Nuxt.js deploy for GitHub Pages
name: github pages

on:
  push:
    branches:
    - master

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@master

    - name: Setup Node
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'

    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

    - run: npm ci

Nuxt.js - PWA

Nuxt.js - PWA
// add '/static/icon.png' 512x512 (min: 192×192)

export default {
  modules: [
    '@nuxtjs/pwa'
  ],
  manifest: {
    name: process.env.npm_package_name,
    title: process.env.npm_package_name,
    'og:title': process.env.npm_package_name,
    description: process.env.npm_package_description,
    'og:description': process.env.npm_package_description,
    lang: 'ja',
    theme_color: '#000',
    background_color: '#fff',
    display: 'standalone',
    scope: '/',
    start_url: '/'
  },
  wor

GitHub Actions - Genelate Nuxt.js deploy for GitHub Pages

GitHub Actions - Genelate Nuxt.js deploy for GitHub Pages
name: github pages

on:
  push:
    branches:
    - master

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@master

    - name: Setup Node
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'

    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

    - run: npm ci

Node.js - view server

Node.js - view server
'use strict'

const { join } = require('path')
const Koa = require('koa')
const Router = require('koa-router')
const serve = require('koa-static')
const views = require('co-views')
require('colors')

const CLIENT_PORT = 9999
const VIEWS_DIR = 'views'

const app = new Koa()
const router = new Router()
const render = views(join(__dirname, VIEWS_DIR), {
  map: { html: 'html' }
})

router
  .get('/', async (ctx, next) => {
    const { method, url } = ctx.request
    console.log(`[${method}: ${url}]`

JavaScript - namespace

JavaScript - namespace
if (typeof APP !== 'undefined') {
  throw new Error('namespace "APP" is already exists.')
}
window.APP = {}

Node.js - render HTML

Node.js - render HTML
'use strict'

const { readFile } = require('fs')
const Koa = require('koa')
const Router = require('koa-router')
require('colors')

const app = new Koa()
const router = new Router()

const readFileThunk = function(src) {
  return new Promise(function (resolve, reject) {
    readFile(src, { 'encoding': 'utf8' }, function (err, data) {
      if(err) return reject(err)
      resolve(data)
    })
  })
}

router
  .get('/', async (ctx, next) => {
    const { method, url } = ctx.request
    console.lo

Node.js - WebSocket demo

Node.js - WebSocket demo
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>title</title>
</head>
<body>
  <button type="button" id="btn">Send</button>

  <script>
    const socket = new WebSocket('ws://localhost:9999')

    socket.addEventListener('error', () => {
      console.log('error')
    })

    socket.addEventListener('open', () => {
      console.log('connect')

Docker Compose - Node.js

Docker Compose - Node.js
version: '2'
services:
  node:
    image: library/node
    container_name: node-sample
    volumes:
      - ./src:/src
    working_dir: "/src"
    command: "node index.js"

Jest - Vue.js snipets

Jest - Vue.js snipets
import { shallowMount } from '@vue/test-utils'
import Component from './Component.vue'

describe('Component', () => {
  const wrapper = shallowMount(Component)
  
  const data = wrapper.vm.$options.asyncData()
  wrapper.setData(data)
  
  it('should be shown "test" text', () => {
    expect(wrapper.text()).toBe('test')
  })
  
  it('should be setted "test" value', () => {
    expect(wrapper.element.value.toBe('test')
  })
})

Unity - Shader Raymarching

Unity - Shader Raymarching
Shader "Unlit/Raymarching"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "Queue" = "Transparent" "RenderType" = "Transparent"}
        Blend SrcAlpha OneMinusSrcAlpha
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag alpha:fade 
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appd