position: absolute;

コマンドによるファイル操作を行うSublime Textパッケージ「Sublime Files」


Sublime Textを導入した時に、SideBarEnhancementsは、まず必須パッケージ的に入れますが、ディレクトリやファイルの操作が基本サードバー内でのマウス操作になります。それはそれで構わないのですが、やはりキーボードの操作のみで行いたい場合もあります。今回はそれが行えるSublime Filesを紹介します。

詳しくは上記のパッケージのページを参照して貰えばなんとなく利用感はつかめるかと思いますが、私もデモの動画を作成しました。

Sublime Files デモ - YouTube

では、ざっくりとインストール後の利用法を紹介します。


Sublime TextとEmmetとeCSStractorでBEMもサクサクマークアップ


ちょっとあおり気味のタイトルです。すいません。

Sublime TextにはHTMLからCSSのクラス構成を変換してくれるeCSStractorというプラグインがあります。

どんな感じかといいますと

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <header class="siteheader">
        <h1 class="siteheader__title"><a href="#">siteTitle</a></h1>
        <p class="siteheader__subText">subtext</p>
    </header>
    <nav class="globalNav">
        <ul class="globalNav__list">
            <li class="globalNav__item globalNav__item_active">nav01</li>
            <li class="globalNav__item">nav02</li>
            <li class="globalNav__item">nav03</li>
        </ul>
    </nav>
<body>
</body>
</html>

という感じのHTMLから

.siteheader {
}
.siteheader__title {
}
.siteheader__subText {
}
.globalNav {
}
.globalNav__list {
}
.globalNav__item {
}
.globalNav__item_active {
}

こういう感じに変換してくれます。

さらにはwith BEM Nestingというのを利用すると

.siteheader {
    &__title {
    }
    &__subText {
    }
}
.globalNav {
    &__list {
    }
    &__item {
    }
    &__item_active {
    }
}

こうしてくれます。わおー。(Sass v3.3(のはず)以降で有効)

便利!便利!サクサク!という感じですが、何点か気になるところがあるのでもうちょっと詰めて見て行きましょう。


jQuery 1.xと2.x、そして3.0


このエントリーは、jQuery Advent Calendar 2014 - Adventarの2日目です。

「え、いまさら?」という感じを受ける人もいるかもしれませんが、なんか見た感じ「意外と…」という印象があるので、3.0の情報もちょっと前に出てきた今、改めて整理しようかなと。


Facebookページでシェアした際の画像をFb広告に利用できる画像に差し替える


ども、『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』のプロモーションに勤しんでいる前川です。こんばんは。

そうなんです、結構書籍のプロモーションって執筆した人がやるんですよ。そりゃ一般的な書籍ならわかりませんが、専門書というのは市場も限られますし、業界向けの書籍であればやはり著者のネットワークが効いてくるというのもあるわけです。あ、出版社の担当さんも当然、いろいろと骨を折って頂けるんですが、まあ、出版社と執筆者、今回は監修も含めてスクラム組んでプロモーションを行うわけです。

その中で書籍のFacebookページの管理も共同で行っております。で、今回はその中でただいま絶賛参加者募集中のイベント「『現場のプロが教えるWeb制作の最新常識』発売記念イベント | Peatix」のFacebook内での告知活動で気づいたことをちょろっとメモっておきます。

【追記】これはFacebookページにおいての話です。個人のTLでは今のところこの方法は確認できていませんので注意してください。


とりあえずjQueryのプラグイン作ってみる

このエントリーはjQuery Advent Calendar 2013の18日目になります。

jQueryのプラグインといえば何かしらお世話になっている人がほとんどだと思いますが、自分で作成するというのもできるのでとりあえずサクッと作ることができる範囲で紹介します。

という導入ですので、比較的軽い内容になりますー。