はてなブックマーク

こないだは自作ライブラリを Browserify でモジュール管理する場合に、その自作ライブラリを書き換えるやり方を書いたけど、そのままだと Browserify を使わない場合にはそのモジュールを使うことが出来なくなる。 それはそれで辛いので、Browserify を使う場合でも、以前のやり方のようにhtmlのスクリプトタグで読み込む場合でもどちらでもライブラリ自体の書き換えなしに使えるようにしようと思う。使う時のことも考えて作るってのが男ってもんだよね。 基本方針 Browserify 他で利用するオブジェクトを exports に入れる ライブラリが他ライブラリに依存する場合は require する ブラウザ 他で利用するオブジェクトをグローバル変数に入れる ライブラリが他ライブラリに依存する場合はグローバル変数に入ってるものを使う この方針で色々な書き方を試していたんだけど、結局現

最近、今まで色々と書いてきてた WebフロントエンドUIの 各モジュールファイルをあらかた書き換えた。別に機能を増やしたりしたわけでないんだけど、最近の JS のモジュール化の動きで今までの方針でもモダン（って良い方があってるかどうかは知らんけど）な方針も使えるように変更したので、その経緯とか結果とかを残しておこうと思った次第です。 今までの書き方は基本的にプロジェクト毎にユニークなグローバルのオブジェクトを作ってそこに各UIのオブジェクトをプロパティとして生やしていくという多分それなりにスタンダードだった方針を取ってた。 これがここ数年でガラッと変わったのでそこら辺についてまず。 JavaScriptにはモジュール化の仕組みがない そもそも、JavaScriptにはコードをモジュール化してそれを必要な際に呼び出して使用するような仕組みが言語仕様として存在しない。 よほど小さいプログラムで

最近 .eslintrc とか .jscsrc とかの設定ファイルが増えてきたけどSTはそんな新しい拡張子のファイルはシンタックスハイライトしてくれないから自分で設定する。 設定方法 該当拡張子ファイルを開く View -> Syntax -> Open All with current extension as... で好きなシンタックスを選択 ※ Open All with current extension as...を選ぶこと Preferences -> Settings More -> Syntax Specific - Userを選択 XXXX(選んだシンタックス名).sublime-settings のファイルが出来てるので、extensions の値の配列に他にも追加したい拡張子があれば足す 設定ファイルの置き場 ~/Library/Application Suport/

以前書いた記事で Browserify の使い方とか Browserify でやりたい事が分かったと思う。 では実際に Browserify を使って今までに書いたコードを Browserify 用に書き直してみる。 といっても大したことはない。1つのオブジェクトなり関数にまとめるだけで良い。 例として、よくあるスムーススクロールのスクリプトを挙げる。 $(function(){ $(".anchorlink").on('click', function(e){ e.preventDefault(); var href = $(this).attr("href"); var speed = 500; var easing = 'swing'; var target = $(href == "#" || href == "" ? 'html' : href); var animatePara

ST使ってた時に重宝してた Wrap Selection With Tag を使いたくて調べたというか嘆いたらぐらぷすさんが教えてくれたのでみんな使うと良いよ。 これを こうしたい 手順 選択する Cmd + Alt + j(Surround with live template) タグを指定（ここではEmmetを使う） 完成！！ おまけ この手順でも何だかんだでショートカット押してEmmet選択してタイプして、ってちょっと面倒だから以下に省略したい テキスト選択 ショートカット タグ入力 なので、そもそものEmmetの機能にショートカットを追加する 設定画面でキーワード入力( cmd + , -> [surround]) キーボードショートカット追加 キーを決める 僕はSTで使ってた Cmd + shift + w にしてる IDEA良いよIDEA。マルチセレクト以外ほぼIDEAで良い感

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? STはパッケージを気軽に入れられてすげー楽なんだけど、楽が故にWebとかでたまたま見つけたパッケージとかで「お、これよさそ」って思って入れたは良いものの全く使わないって事もたまにあるから忘れないようにメモ。 つか忘れるような機能はどっちにしろ使わねーんだから良いじゃんって気もしなくはないけど便利だから入れてるわけで忘れたいわけじゃないよね。きっと。 表示を便利に ApacheConf Apacheのconfファイルをハイライトしてくれる BracketHighlighter ブラケットとかクオートとかをハイライトしてくれる Dotfil

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

大体何となくEmacsっぽく使いたくて色々いじってみた結果こんな感じのキーバインド設定になった。 まだ検索関連とか良い感じとは言い難い挙動だから改良の余地ありまくりなんだけど今んとここれで落ち着いてる。 サイドバーのキーバインドは SideBarEnhancements 入れないと効かない。つかこれあるとないとじゃ全然違うし多分必須パッケージですよね。 あとST3になって出たらしい機能の goto_definition が便利すぎて泣ける。メソッド定義元が別ファイルでも一発で探し当ててくれる。マジこれヤバい。 [ {} // ------------------------------------------- // Cursor move // ------------------------------------------- // 右に1つ移動 ,{ "keys": ["cltr+