Content-Length: 366718 | pFad | http://b.hatena.ne.jp/luccafort/function/
README.mdに動的コンテンツを埋め込む、あるいはImage via Functionというアプローチ - 余白
突然ですが、 README.md に動的なコンテンツを埋め込みたいと思ったことはないですか？僕はあります。 具体的には、リポジトリのコントリビューターをREADME.mdに埋め込みたいという願望がありました。 つまりこういうことです。 しかし毎回CIなどでREADME.mdを編集するのはセットアップが面倒です。 <contributors-list> みたいなCustom Elementsが使えたらきれいな世界だなあと思ったのですが、肝心のscriptタグが動かないのでそれは無理です。 ということで、頼れるのは 画像 ということになりました。 Image via Function README.mdに埋め込めて、なおかつ動的なコンテンツを扱えるのは画像のURL展開だけなので、つまりコントリビューターリストを画像化するHTTPエンドポイントを用意し、そのURLをREADME.mdに埋め込めば
JS非同期処理のいま
1. JS非同期処理のいま 2016.1.29 Developers in KOBEVol. 3 Bathtimefish 村岡 正和 Promise, Generator, async/awat 2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー 日本ウェアラブルデバイスユーザー会共同発起人 / 神戸ITフェスティバル実行委員など むらおか まさかず 村岡正和 Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング 神戸デジタル・ラボ 社外取締役 @bathtimefish HTML5-WEST.jp 4. function() { callback( function() { callback( function() { callback( function () { c
Electronを使ってJavaScriptでデスクトップアプリを作る
はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http
おまえは今まで実行したassertの回数を覚えているのか？あるいは新しいアサーションユーティリティのご提案 - teppeis blog
JavaScript Advent Calendar 2014 11日目。 いきなり要約: Promiseや非同期テストのアサーションを簡単確実に書けるようになるesplanというライブラリのPoCを作った話。 Promiseや非同期のテストは難しい 詳しくはJavaScript Promiseの本: Chapter.3 Promiseのテストをご覧いただきたいのだが、Promiseのテストを正確に書くのはそんなに簡単ではない。 例えばmochaだと、 // 間違ったテスト1: // mayBeResolveWithOne() が1以外でresolveしたときタイムアウトエラーになる it("mayBeResolveWithOne()は1でresolveする", function(done) { mayBeResolveWithOne().then(function(value) { as
iPhoneでワウペダルを作ったった - aike’s blog
ワウペダルが好きです。ギターのカッティングにかけて遊んでいるとあっというまに時間が過ぎていきます。そんなわけでどこのご家庭にもあるiPhoneとJavaScriptでワウペダルを作ることにしました。こんなやつ。 JavaScriptでiPhoneの加速度センサーとWeb Audio APIを使ったワウペダル作った。 http://t.co/rGDHh5FaWb https://t.co/erfjy9tL80— aike (@aike1000) 2014, 10月 20 ■作り方 まず、Web Audio APIでフィルターを作ります。 Biquad Filterを作ってバンドパスフィルターに設定するだけです。簡単。Qの値を少し大きめの4くらいにしておくとワウらしいクセが出ます。あとは0.0〜1.0の引数の値に応じてフィルターの中心周波数をセットする関数setWahPos()を用意しておきま
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
TypeScriptで複数ファイル構成する2つの方法 - teppeis blog
TypeScriptで複数ファイル構成のプロジェクトを扱う方法について書いてみる。日本語の入門記事や試してみました系の記事で勘違いされてることがたまに見受けられるので、整理してみる。 公式のModules in TypeScriptを既に読んでおられるような御仁は回れ右していただいても結構です。 やりたいこと ソースファイルをモジュールごとに分割して管理したい 実行環境はNode.js or ブラウザ 例えば、こういう処理があって、 // main.ts function trimLeft(str: string): string { return str.replace(/^\s+/, ''); } var input = document.getElementsByTagName('input')[0]; input.value = trimLeft(input.value); tri
新言語Hackで最強PHPerになろう！ - Qiita
新言語 Hack とは こんにちは、新言語 Hack が Facebook より OSS としてリリースされましたね。 詳細は以下の通り。 https://code.facebook.com/posts/264544830379293/hack-a-new-programming-language-for-hhvm/ 新言語 Hack は HHVM 向けの開発言語で静的型付き言語の性質を取り入れ PHP での素早い開発を実施し、PHPとの互換性があります http://hacklang.org/ http://hhvm.com/ HHVM (HipHop Virtual Machine for PHP) とは、Facebook が OSS で開発している PHP 用の JIT コンパイラです。 HHVM は PHP のコードをダイナミックにバイナリコードへと変換することで高速実行の実現を目
PHPのinterfaceとは何か
久しぶりの更新です。最近、修行だと思って色々な本を読み漁っているのですが、やっとこさPHPのinterfaceが分かるようになってきた感じがあるので、まとめてみます。 インターフェースは、クラスから"ユーザー定義型"の能力のみを分離した言語機構です。PHPのそれはJavaのinterfaceのパクリです。 "ユーザー定義型"という単語を使いました。動的型付き言語のことを「型のない言語」と言う人がたまにいるんですが、とんでもねー間違いです。PHPにだって型はあります。変数が型を持たず、値が型を持っているというだけの話です。 interfaceを宣言する文法はクラスとよく似ていますが、キーワードclassの代わりにキーワードinterfaceを使います。中身は定義のないメソッドの宣言を書きます。なお、定数も含めることが可能です。 <?php interface FooInterface { c
私が他人のシェルスクリプトから学んだこと | Yakst
私はシェルスクリプトの大ファンで、他人のスクリプトから面白い方法を学ぶのが大好きだ。最近、SSHサーバの2要素認証を簡単にするためのauthy-sshスクリプトに出会った。このスクリプト群を見まわしていて、みんなと共有したいたくさんのクールなことを見つけた。 出力に色付けする 出力文字列を、成功した時は緑に、失敗した時は赤に、警告は黄色に色づけしたいと思うことはたくさんあるだろう。 NORMAL=$(tput sgr0) GREEN=$(tput setaf 2; tput bold) YELLOW=$(tput setaf 3) RED=$(tput setaf 1) function red() { echo -e "$RED$*$NORMAL" } function green() { echo -e "$GREEN$*$NORMAL" } function yellow() { e
クライアントサイド JavaScript のパフォーマンス改善には backburner.js が便利！ - tricknotesのぼうけんのしょ
DOM 処理や Ajax など、JavaScript が外の世界とやり取りする部分というのは、一般的に待ち時間を多く必要とします。 パフォーマンスを改善しようと思った時に、ロジック部分でコツコツと節約するより、まずコストが高い処理を行わないようにするということで、驚くほどの効果を経験をされたことはありませんか？ 今までパフォーマンス測定をされた方であればピンとくる部分があることと思います。 そんな時に役に立つのが、今回ご紹介する backburner.js です。 ebryn/backburner.js - GitHub backburner.js って? backburner.js とは Ember.js の run loop モジュールから切りだされたとても小さなライブラリで、短時間に集中的に発生するメソッド呼び出しの回数を制限したい場合などに利用することができます。 backburn
JavaScriptの落とし穴
4. JSのオブジェクトは 連想配列みたいなもの 1 // 空のオブジェクトを作成 2 var dog = {}; 3 4 // プロパティをひとつ追加 5 dog.name = "Pochi"; 6 7 // ブラケットでもアクセスできる 8 dog['breed'] = "Shih Tzu"; 9 10 // 関数をひとつ追加 -> メソッド 11 dog.getBreed = function () { 12 return this.breed; 13 } 5. JSのオブジェクトは 連想配列みたいなもの 1 // 同じものをオブジェクトリテラルで表記 2 var dog = { 3 name: "Pochi", 4 breed: "Shih Tzu", 5 getBreed: function () { 6 return this.breed; 7 } 8 }; 6. クラスっぽい
(JavaScriptでの)バイナリデータの送信と受信 - yoya's diary
Sending and Receiving Binary Data https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data 場所変わったので↑https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data 「JavaScript バイナリ」でググっても古い情報ばかり見つかるので、ついカッとなって勢いで翻訳しました。 多分精度は低いのでおかしい所は指摘を頂けると嬉しいです。すぐ直します、恥ずかしいので。 初めに追記 (2013/04/27) 本家の方に翻訳文を移しました。↓こちらの文章の方が精度が高いのでお勧めです。 バイナリデータ
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
美しいプログラムを書く(業務用Webアプリケーション保守編) | Webシステム開発／教育ソリューションのタイムインターメディア
あらすじ あなたはとある業務用 Web アプリケーションの開発・保守を任されています。 このアプリケーションは ASP.NET を用いて作成されており、 クライアントサイドは一部 jQuery を利用してナウなヤングにバカウケの UI を実装しています。 さて、今回は 商品情報の変更履歴を一覧表示する。一覧から2つのバージョンを選んで差分を表示できるようにする。 という機能を実装することになりました。 これ自体はちゃちゃっと実装し、以下のようなHTMLが生成されるようにしました: ... <table> <tr> <th>A</th> <th>B</th> <th>変更日時</th> <th>変更者</th> </tr> <tr> <td><input type="radio" name="new_version" value="9"/></td> <td></td> <td>2012-0
JSX の進化速度が半端ない - ぐるぐる～
気に入らない所を直して pull request 投げたら、取り入れられたので、8 日前に書いたエントリが過去のものとなっちゃいました。 関数型 以前の JSX では、関数型は function(: int): string のように書く必要がありました。 これはこれでそのまま使えるのですが、新たに (int) -> string という形式にも対応しました。 ちなみに、複数引数はカンマ区切りで (int, boolean) -> string のようになります。 カリー化された関数は、 function(: int): function(: number): string の代わりに (int) -> (number) -> string と書けます。 引数を囲むカッコは、(今のところ) 省略不可能です。 これには 2 つの理由があります。 この機能を追加したとき、JSX のパーサの能力
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/luccafort/function/
Alternative Proxies:
Mammouth
モテる JavaScript