どうも！chuckです。 会社で使っているHTML/CSS/JS Prettifyをプライベートでも導入しましたのでメモ。 HTML/CSS/JS Prettifyとは SublimeTextのプラグインです。2,3両対応。 詳しくはこちら↓↓ qiita.com この記事ではNode.js, Homebrewなんて書いてありますが、自分はパッケージコントロールから入れました。 chuckwebtips.hatenablog.com 実演 こちらが整形前コード。 GitHubに上げたものを、一部抜粋してローカルに落としました。 適当なところで右クリック。すると、メニューの中にHTML/CSS.JS prettifyという項目が！適当に一番上のPrettify Codeを選択します。 すると、ものの１秒もしないうちにきれいなコードが誕生しました＼(^o^)／ なんて便利！ もっと重いファイル

もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。 ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。 今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割した そしたら今まで動いていたも

JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう

前回の記事の続き。前回は、正規表現が使えない時はパーサコンビネータを使ってみると良いということを書いた。 パーサコンビネータのためのライブラリは、以下のように各言語ごとにいくつかある。 JavaScript - Parsimmon Ruby - rparsec treetop Python - parsy PHP - PHPPEG 各言語でいくつかあるのだが、正規表現と違ってパーサコンビネータには統一的な書き方があるわけではないし、ライブラリによって使い方も様々である。なので、今まで正規表現だけ使ってきた開発者がちょっと使ってみようと思っても、使い方がよくわからずに面食らってしまうことがある。 パーサコンビネータはテキストをパースするための非常に強力な仕組みだが、その背後にある考え方を理解しなければこれらのパーサコンビネータのライブラリを使う際の障害になるだろう。逆に言うと、それさえ理解で

本連載では、GitHub社が開発したチャットbot開発・実行フレームワークである「Hubot」を使用して、チャットツールにオリジナルのbotを住まわせ、開発フローに組み込むことで開発を楽にする方法について解説していきます。 botとはなにか 開発の現場で、開発チーム内のコミュニケーションのためにIRCなどのチャットツールを導入することは、よく見る光景だと思います。そんなチャットツールに常駐してチャット経由でコマンドを待ち受けて実行したり、決められた条件に従ってチャットに発言してチャットの参加者に通知したりするようなプログラムのことをbotと呼びます。 Skype、HipChatやChatWorkなどコミュニケーションツールが多様化した現代においても、それぞれのチャットツールに対応したbotが開発されており、botを開発するためのフレームワークも様々な形で提供されています。botを導入するこ

とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if

npm ERR! Error: EMFILE, too many open files npm ERR! at new Glob (/Users/ore/.nodebrew/node/v0.8.12/lib/node_modules/npm/node_modules/glob/glob.js:105:21) npm ERR! at glob (/Users/ore/.nodebrew/node/v0.8.12/lib/node_modules/npm/node_modules/glob/glob.js:57:11) npm ERR! at gypfile (/Users/ore/.nodebrew/node/v0.8.12/lib/node_modules/npm/node_modules/read-package-json/read-json.js:129:17) npm ERR! at

The document discusses new features in Rails 5.1.0 including encrypted secrets, npm and webpacker integration, system tests, and parameterized mailers. It provides instructions for setting up encrypted secrets in Rails, including using the bin/rails secrets:setup command to generate an encryption key, editing secrets via bin/rails secrets:edit, and configuring different secrets for environments li

最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue

概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける　　　[3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )

■ つかいかた（基礎編） ダウンロードしたmoment.jsをscriptタグで読み込ませたら準備完了です。 あとは下記のような実装で使用できます。 // momentオブジェクトを初期化して・・・ var m = moment(); // formatで出力! var output = m.format("YYYY年MM月DD日 HH:mm:ss dddd"); console.log(output);  // => 2013年05月15日 12:34:56 Wednesday // 現在時刻 moment(); // ミリ秒で指定 moment(1368543600000); // タイムスタンプ（秒）で指定 moment.unix(1368543600); // Date.parseで解析可能な文字列を指定 moment("May 15, 2013"); // Dateオブジェクトか

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

先日めでたく 1.0.0 をリリースした Backbone.js ですが、よくも悪くも「どう作るか」について、作成者側の思いで自由にできるため、始めの取っ掛かりとして、どう作ればよいかと言うことで結構悩む方も多いかと思います。 そこで、同じように悩んでいる人になんらかのヒントを与えられればと思い、シングルページアプリケーションを題材にチュートリアルを作成して公開してみました。 また、私が Backbone.js でアプリケーションを作成する上で、特に View について注意するポイントを幾つか紹介します。 何かの参考になれば幸いです。 このエントリでお伝えしたいこと。 Backbone.js のチュートリアル作りました。 Backbone.View を扱う際に注意するポイントについていくつか紹介します。 チュートリアル 早速ですが、Backbone.js でシングルページアプリケーションを

JavaScriptの人気とともに、JavaScriptでのデザインパターンの利用局面も増えています。本書ではGoFのデザインパターンに沿って、その実装例やパターンの適用事例を網羅的に示し、デザインパターンをJavaScriptにも応用したいというニーズに応えています。モジュール、オブサーバ、ファサード、メディエータといったGoFの代用的なデザインパターンだけでなく、リビーリングモジュールパターンや擬古典的デコレータパターンといった、新しいパターンも取り上げています。美しく、かつ構造化され、メンテナンス性の高いJavaScriptを書くために有用な一冊です。 まえがき 1章　デザインパターンとは？ 1.1 はじめに 1.2 パターンとは？ 1.2.1 既に日常的にパターンを使っている 1.3 「パターン」性検査、プロトパターン、3の法則 1.4 デザインパターンの構造 1.5 デザインパタ

1. はじめに、 本記事は、HTML5 Advent Calendar 2012の参加（6日目）エントリーです。 当初は昨年のアドベントカレンダーでテーマにしたマイナーAPIをネタにして書こうかと考えていたのですが、探してもあまりピンとくるものがなく、いつものごとく新技術ネタに飛びついてしまう習性がでてしまったので今回次世代JavaScript(ES.harmony)ネタ(Object.observe)を書かせていただきます。 現時点では直接HTML5とは関係ありませんが、標準で利用できるようになったら皆さんがお世話になる機会が必ず増えると予感しています。今の時点で知っておいてもらっても絶対損はないと思いますのでどうかご了承ください。 （＿Ｏ＿） 2. Object.observe() とは何か？ 先日のHTML5勉強会でも取り上げられましたが、最近 JavaScript の MVC フレ