kubosho

/* License: CC0 */
.article__mainImg {
    position: relative;
}

.article__mainImg::before,
.article__mainImg::after {
    display: block;
    position: absolute;
    top: 10px;

kubosho

# Your init script
#
# Atom will evaluate this file each time a new window is opened. It is run
# after packages are loaded/activated and after the previous editor state
# has been restored.
#
# An example hack to log to the console when each text editor is saved.
#
# atom.workspace.observeTextEditors (editor) ->
#   editor.onDidSave ->

kubosho

この記事ではAtomic Designについて、Atomic Designとは？といったところから実例まで書いていきます。

Atomic Designとは

Atomic Designはデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。

どこで使われている？

日本だとAbemaTV（アベマTV）で使われています（Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comからの情報）。

kubosho

/* 下のほうが詳細度が高く見えるが実際は上のほうが詳細度が高い */
div .test {
  /* 詳細度は a=0, b=1, c=1 なので、11となる */
  background-color: blue;
}

div div div div div div div div div div div div div {
  /* 詳細度は a=0, b=0, c=13 なので、13となる */
  background-color: pink;
}

kubosho

/**
 * ファイル内のお掃除　〜非表示レイヤーを削除 for Photoshop〜
 * @author feb19, kubosho_
 */

function splitsInvisible(layer) {
    switch ( layer.typename ) {
        case "Layers":
            for ( var i = layer.length - 1; i >= 0; i-- ) {
                return splitsInvisible(layer[i]);

kubosho

(() => {
  function callback () {
    if (location.host !== 'github.com') {
      return
    }

    if (/[?&]w=/.test(location.search)) {
      return
    }

kubosho

(function () {
  if (location.host !== 'github.com') {
    return;
  }

  if (/[?&]w=/.test(location.search)) {
    return;
  }

  const isPullRequestPage = location.pathname.indexOf('files') > -1;

kubosho

ko.bindingHandlers.attr.preprocess = function (value, name, addBinding) {
  // value = { src:$data}
  value = value.replace(/ /g, '');

  var re = /{(src):(.*)}/;
  var matchAttr = value.match(re);

  if (matchAttr === null) {
    return value;
  }

kubosho

{
  "name": "pinboard-read-later-list",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run build && python -m SimpleHTTPServer 8080",
    "tsc": "tsconfig -u && tsc -p .",
    "browserify": "browserify ./index.js -o ./bundle.js",
    "build": "npm run tsc && npm run browserify"

kubosho

#!/usr/local/bin/python3
# -*- coding: utf-8 -*-
#
#  IkaLog
#  ======
#  Copyright (C) 2015 Takeshi HASEGAWA
#
#  Licensed under the Apache License, Version 2.0 (the "License");
#  you may not use this file except in compliance with the License.
#  You may obtain a copy of the License at