LastPassがセキュリティーブリーチだってよ。1Passwordは大丈夫かいな？

LastPassがハックされてユーザーの皆様のアカウント＆パスワードがダダ漏れのようですね。大至急マスターパスを変更して二段階認証を適用しましょう。というか、1Passwordに乗り換えて、keychainを自分で管理した方がいいんじゃね？ クラウドに大事なパスワードを預けるなんて恐ろしいこと、とても僕にはできませんよ。

Password Manager LastPass Warns of Breach

http://krebsonsecurity.com/2015/06/password-manager-lastpass-warns-of-breach/

Hack of cloud-based LastPass exposes hashed master passwords

http://arstechnica.com/security/2015/06/hack-of-cloud-based-lastpass-exposes-encrypted-master-passwords/

LastPass Security Notice - LastPass Blog

https://blog.lastpass.com/2015/06/lastpass-security-notice.html/

ところで、ちょうど昨日、1Passwordのセキュリティーに関してこんな煽り記事があって話題になってたけど、これってよくよく読んでみたら全くもって問題なしという結論じゃないですか。

1Password Leaks Your Data

http://myers.io/2015/10/22/1password-leaks-your-data/

When a Leak Isn’t a Leak

https://blog.agilebits.com/2015/10/19/when-a-leak-isnt-a-leak/

というわけで、いちおう僕が1Passwordをより安全に使うためにやってることを、ここでチラ見せしておくよ。会社のSlackに投稿するために書いた内容だから全部英語だけどね。英語苦手な人はせいぜい頑張ってね。それと内容は全てMacユーザ向けだけどね。Winの人はMacを買って出なおしてねー。

Here are some tips what I have done to make my 1Password security more robust:

• Use OPVault format for your keychain file: for more info → https://support.1password.com/switch-to-opvault/
• Hide your keychain file by changing the location, file name & extension: ie. If you change the keychain file name from 1Password.opvault to test.app, it’s more difficult for hackers to notice that it's a keychain of 1password. Also I put my keychain file inside a hidden folder (just add dot at the head of the folder name).
• Update your master password periodically: ie, if you include some numbers based on calendar, such as 'somepassword2015-10!', you can update your password monthly without forgetting your new password!
• Apply 2 factor authentication on Dropbox if you'd like to put your keychain file on Dropbox to share on multiple devices. Also don't forget to hide the keychain file (as mentioned above) in your Dropbox.
• Turn on the FireWall and FileVault on your Mac: System Preferences > Security & Privacy > Firewall > Turn On Firewall

Furthermore, in my case…

• I completely block any network traffic (both incoming & outgoing) of 1Password.app by using LittleSnitch, as I don’t even trust 1Password.app (engineers in AgileBits could potentially implement some malicious code in their app to leak your passwords).

Do you think this is too much? Maybe it sounds like paranoia…?

However, I’m pretty sure that no cyber security measure is perfect; any encryption or passwords will be compromised sooner or later, and we cannot be too careful.

というわけで、お気をつけてー

IllustratorでWebデザイン、spriteの書き出しまでドバっとやるよ。

Webデザインはたいていイラレでやるよ。

Webデザインするとき、僕はたいていイラレでやってるよ。
Fireworksってサポート終了してほぼ死亡状態だし、Sketch.app はベクターツールがイマイチだし、まだまだバグが多い。

イラレの設定はこんな感じ。

• Pixel Preview を on
• Pixel にスナップを on
• 環境設定 > “キー入力”を 0.5px にする
• 環境設定 > “単位”を全てピクセルにする
• グリッド設定とかは10px単位とかで適当に。
  • ちなみに960pxグリッドシステムのテンプレートとかよく使う -> 960GSでダウンロード
• 変形とかは Pixel Grid に整合を on
• その他 -> IllustratorをWeb作業に最適化するためのポイント

で、できたファイルはきちんとレイヤーを整理してから、レイヤー保持したままフォトショに移す。

• 参考： デザイン業務のスピードアップ！Illustratorのレイヤーを保持したままPhotoshopに持ってくる方法

さらに、そこからSlicy使ってRetina用画像も含めてドバッと書き出し。以上おしまい。

• 参考： Slicyはあっと驚くほど便利だった。

できあがったスライス画像はCompassでスプライト画像化するんだけど(やり方)、このスプライトをRetina対応にはちょっと工夫が必要。以下を参考にRetina書き出し用のmixinを作ってあげる。

• 参考： 楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法

んで、一旦フォトショを経由するのウザいなーとか思ってたら、こんなんあった。まだ試してないけど。

• Retina画像を一括エクスポートするアプリは本当にないのか？ならばつくろう。 | ここぽんのーと

Markdown でリンクにターゲット属性を付けるよ

Markdown のリンクにはターゲット属性を指定できないんだけど、Webにアップする時とかjQuery使ってクライアント再度で target="_brank" を追加してあげるといいですよ。こんな感じで。

<script>
    $(function () {
        $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
    });
</script>

Sublime Textで更新されたHTMLファイルをすばやくブラウザでプレビューする方法

• Browser Refresh ってパッケージをぶっこむ。
• そしてkeybindをいじる。
• やりかたの参考はこちら -> Sublime Text 2で素早くブラウザプレビューする方法

んで、これだけだとhtmlとかphp以外のファイルでも、更新のたびにブラウザがリロードされちゃってうざいんで、keybindに以下のcontextを設定する。これで、html, php, css, scssの時だけ保存と同時にブラウザを更新できるよー。

// Browser Refresh
{ "keys": ["super+s"], "command": "browser_refresh",
  "args": {
    "auto_save": true,
    "delay": 0.0,
    "activate_browser": false,
    "browser_name" : "Google Chrome"
  },
   "context": [
    {
      "key": "selector",
      "operator": "equal",
      "operand": "text.htm,text.html,source.php,source.scss,source.css"
    },
    { "key": "selector", "operator": "not_equal", "operand": "text.html.markdown" }
  ]
},

以上おしまい。

追記) markdownの保存時にもブラウザが更新されてウザイので、上記コードを一部変更しました。

WordPress で重複記事を削除するプラグインを作ったよ。

WordPressで重複記事を削除するための"Delete all duplicate posts"ってプラグインがあるんですが、なんかうまく動かないので、自分で作りなおしました。タイトルが同じ記事がアップされると、古いバージョンの投稿は自動で削除されます。

<?php
/*
Plugin Name: Delete duplicate posts
Plugin URI: 
Description: Deletes duplicate posts based on their title
Author: Mitsuki Fukunaga
Version: 1.0
Author URI:
*/

function WPDeleteDuplicates(){
    global $wpdb;
    $wpdbprefix = $wpdb->prefix;
    
    $wpdb->query("
        DELETE FROM ".$wpdbprefix."posts
        WHERE ".$wpdbprefix."posts.ID not in (
            select max_id from (
                SELECT MAX(t1.ID) AS max_id
                FROM ".$wpdbprefix."posts AS t1
                WHERE t1.post_type = 'post'
                GROUP BY t1.post_title
            ) as t2
        ) AND ".$wpdbprefix."posts.post_type = 'post'
    ");
}

add_action('publish_post', 'WPDeleteDuplicates');

?>

SCSSのおさらいメモ。

実行コマンド

• sass --style expanded scss/main.scss:css/main.css
  • --style expanded はTabIndexしないoption
• sass --style --watch scss:css 変更を自動反映

 Basic Syntax

• /*…*/ コメント, または //…
• & は親要素を表す
  

  a {
      text-decoration: none;
      &:hover {
          font-weight: bold;
      }
  }
  

 Variables

• $〜で変数を宣言
• {} 記号で値を評価
  

  $baseFontSize: 14px;
  
  #main {
      p {
          font-size: $baseFontSize;
          .sub {
              font-size: $baseFontSize - 2px; // 12px
              font-size: #{12 + 12}px; // 24px
          }
      }
  }
  

• 文字列変数
  

  $imgDir: "../img/";
  
  #main {
      background-image: url($imgDir + "bg.img");
      // or background-image: url("#{$imgDir}bg.img");
  }
  

• カラー変数
  

  $brandColor: rgba(255,0,0,0.9);
  
  #main {
      color: lighten($brandColor, 30%);
  }
  

  • lighten とか darken とか -> Builtin Functions 参照

 制御構文

• if分岐： @if, @else if, @else を使う
  

  $debugMode: true;
  
  #main {
      @if $debugMode == true {
          color: red;
      } @else {
          color: blue;
      }
  }
  

• forループ
  

  // .fs10 〜 .fs14 までいっきに作る！
  @for $i from 10 through 14 {
      .fs#{$i} { font-size: #{$i}px; }
  }
  

• whileループ
  

  // .fs10 〜 .fs14 までいっきに作る！
  $i: 10;
  @while $i <= 14 {
      .fs#{$i} { font-size: #{$i}px; }
      $i: $i + 1;
  }
  

 LIST

• 似たようなデータをまとめて管理
  

  $animals: cat, dog, tiger;
  @each $animal in $animals {
      #{$animal}-icon { background: url("#{$animal}.png"); }
  }
  

• ちょくせつリストをeach文に書いてもよし。
  

  @each $animal in cat, dog, tiger {
      #{$animal}-icon { background: url("#{$animal}.png"); }
  }
  

 FUNCTION

    $totalWidth: 940px;
    $columnCount: 5;

    @function getColumnWidth($width, $count) {
        $padding: 10px;
        $columnWidth: floor(($width - $padding * ($count - 1)) / $count);
        @debug $columnWidth;
        @return $columnWidth;
    }

    .grid {
        float: left;
        width: getColumnWidth($totalWidth, $columnCount);
    }

 ファイルの分離

• _settings.scss settingファイル
  

  $totalWidth: 940px;
  $columnCount: 5;
  

• _functions.scss 関数ファイル
  

  @function getColumnWidth($width, $count) {
      $padding: 10px;
      $columnWidth: floor(($width - $padding * ($count - 1)) / $count);
      @debug $columnWidth;
      @return $columnWidth;
  }
  

• main.scss 読み込み
  

  @import "settings";
  @import "functions";
  
  .grid {
      float: left;
      width: getColumnWidth($totalWidth, $columnCount);
  }
  

 @mixin (複数の設定をまとめて管理)

    @mixin round {
        border-radius: 5px;
    }

    .label {
        font-size: 12px;
        @include round;
    }

• 引数を付けることもできるよ
  

  @mixin round($radius:4px) { // def.value: 4px
      border-radius: $radius;
  }
  
  .label {
      font-size: 12px;
      @include round(10px);
  }
  

 @extend (継承)

    .msg {
        font-size: 12px;
        font-weight: bold;
        padding: 2px 4px;
    }

    .errorMsg {
        background: red;
        @extend .msg;
    }

    .warningMsg {
        background: orange;
        @extend .msg;
    }

Sublime Text 3 で MarkDown をサクサク書くよ。

SublimeText で MarkDown ドキュメント書く場合、ブラウザでプレビューするパッケージ入れてもいいんだけど、いちいちブラウザ出てくるとうざいんだよね。そこで、Marked でプレビューする方が圧倒的におすすめ。たしか450円ぐらいしたけどね。

やりかたはココにスクリーンキャストが落ちてるから見てちょ。
https://tutsplus.com/lesson/sublime-and-markdown-with-marked/

んで、Markedの設定を半透明＆OnTopにしておくとよい。Tool > Build System > Automatic を選択し、⌘-BでビルドするとMarkedが立ち上がってプレビューしてくれる。ついでに SublimeOnSaveBuild ってパッケージをぶっこんであげると、保存する度にプレビューが更新されるて便利だよ(リアルタイムプレビューではないんだけど)。

ところでSublimeTextガシガシ使ってる人は
"trim_trailing_white_space_on_save": true
とかやって行末の余計な空白を自動削除したりしてると思うんだけど、それだとwhitespace使ったMarkDownの改行が使えなくなっちゃうのですね。

その場合は、、、
パッケージが入ってるフォルダにMarkdown.sublime-settingsってファイルを作って、

{
"trim_trailing_white_space_on_save": false
}

って設定を書き込んであげましょう。するとどうでしょう、MarkDown編集時のみ文末空白の自動削除が無効になりますよー。すごい！

これでMOUとかKOBITOとか使ってる人をバカにできますね。