npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発
YoutubeとVimeoの検索結果のRSSをまとめてOPMLで取得できるサイトを作った | Web scratch で公開した Tech Video RSS Searcher はbrowserifyを使って作ったので、その辺の開発フローについての記事です。 browserify って何? browserify はNode.jsスタイルで書かれたモジュール(CommonJS)を ブラウザで利用できるように変換するコマンドラインツール(Nodeモジュール)となっています。 又、node.jsのCore Modulesのshimが用意されていて、 npmで公開されているnode.js向けのモジュールも一緒に変換してブラウザで動かすことが出来るようになっています。(普通に require で読みこめば勝手に変換されます) 原理的に無理だったり全てのモジュールが動くわけじゃないですが、 その辺の互
サイト速度とonload再考 | ゆっくりと…
単にウケ狙いなら「革新的！GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」（笑）とかの煽りタイトルを付けるところですが、今回はもっと本質的なことを論じてみたいと思います。 「プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。 しかし今回、Hatena や Twitter、Pocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化
jQueryのDeferredとPromiseで応答性の良いアプリをー実践編 | ゆっくりと…
前回 は、「Creating Responsive Applications Using jQuery Deferred and Promises」 の記事と jQuery のリファレンスを翻訳し、Deferred の解説をお届けしました。が、今一歩、Deferred オブジェクトの うれしさ をお伝えできていなかったように思います。今回はその反省をふまえ、単なる翻訳ではなく、元記事の文脈に沿って、Deferred オブジェクトをどのように使うと／何がうれしくて／どうしあわせになるのか、私が学習して得た事をお伝えしたいと思います。 今回は、4本の jsfiddle を記事に埋め込んでいます。jsfiddle 上で自由に編集してテストしてもらえばうれしいのですが、4本すべて実行すると1.4MBものリソースを読み込む事になり、ブラウザに優しくありません。すぐに タブや をクリックせずに、 タブ
フロントエンジニアになってから５ヶ月間で欠かせなくなったツールを晒す - Qiita
概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での開発環境 mac mini (2011) 19インチのシングルモニタ GUI系ツール Sublime Text 2 プログラマ向けのテキストエディタ。 これがないと仕事にならない。 以下、必須なPackage。 Vintage vimっぽいキーバインドにする
Unityのアドオンが無償化されたので一日でゲーム作ってリリースしてみた - ドナドナごとごと
unity android 先日2013/05/21に無償版UnityのiOS/Android向けアドオンが無償化されました。 ということで、簡単なゲームを作成してリリースまでこぎ着けました。 ゲームの実装方法ではなく、Androidでリリースするために行った作業をまとめます。 成果物 単純なタップゲームです。 Macを持っていないためAndroidのみのリリースです https://play.google.com/store/apps/details?id=com.w1mvy.arrowgame Unityって Unityはゲームエンジンです。cocos2d-x、coronaSDKなどのフレームワークとは異なり、ツールや開発環境が 提供されております。とにかくすげー便利ということです。 開発言語としてはC#、Boo、UnityScript(JavaScript)の三種類が選択できます。
JavaScript: カレンダー
JavaScriptのシンプルなカレンダーです。 丁度ブログのカレンダーのような感じでしょうか。 記事へのリンクは付きませんが(笑) 表(table)として出力され、スタイルシートによりカスタマイズする事が出来ます。 カレンダーを生成するJavaScriptです。 今日の日付を取得し、閏年の判定、曜日の算出、テーブルの出力を行います。 <head>〜</head>の中に置いてください。 <script type="text/javascript"><!-- function cal(year,month,day) { today=new Date(); if (!year) var year=today.getFullYear(); if (!month) var month=today.getMonth(); else month--; if (!day) var day=today.g
introduction-1.3.1.js
Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This guide is running against Jasmine version FILLED IN AT RUNTIME. Suites: describe Your Tests A test suite begins with a call to the global Jasmine function describe
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
javascript - からnewを取り除いてみる : 404 Blog Not Found
2011年12月25日22:30 カテゴリLightweight Languages javascript - からnewを取り除いてみる JavaScript: The Good Parts Douglas Crockford / 水野貴明訳 [原著:JavaScript: The Good Parts] giveするイベントも終わったところで、takeしたいと思います。 JavaScriptから、newを。 だぐらす「すべてのnewを、生まれる前に消し去りたい」 newはなぜ危険か "JavaScript: the Good Parts"も言葉では指摘していますが、実演まではしていないので以下で改めて。 (function(){ var o, /* なんの変哲もないコンストラクター */ Point = function Point(x, y){ this.x = x; this.y
Cookie(クッキー)の届く範囲 (あいまいモード)
Cookieが届く範囲を再確認 別のページでCookieについて解説しましたが、 実際Cookieを利用したプログラムを作ると疑問に思えることも出てきます。 その一つとして、Cookieが届く範囲は？というものがあります。 発行されたサーバー（ホスト）に返信されるというのが基本ですが、 Cookieの仕様には「domain」や「path」というのがあったのを覚えてますでしょうか？ （なにそれ？という方は下記のW3CのRFCか前回の解説をどうぞ、、、） Cookieの仕様は下のリンクをどうぞ・・・ W3C (RFC 2109)HTTP State Management Mechanism Netscape HTTP Cookies Cookieの詳細については上のリンクで確認していただくとしても、 実際にプログラムを書く場合にどうやって使うの？という場面も多いと思います。 自分もCookie
Video.js - Make your player yours
Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube and Vimeo. It supports video playback on desktop and mobile devices. The project was started mid 2010, and now has hundreds of contributors and is used on over 450,000 websites. Plays anythingPlays “traditional” file formats such as MP4 and WebM, but
jQuery でサイズや位置を取得する方法を図にしてみた(2) - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回のつづきです。 前回同様 width の記述は省略してますが、height を width に置き換えれば幅も取得できます。 attr() メソッドでサイズを取得する際の注意点 attr('offsetHeight') や attr('clientHeight') でサイズを取得する際、対象要素が非表示状態だと 0 が取得されてしまいます。 要素を表示させる際、位置決め等のために表示処理前に対象要素を採寸することがあるかと思いますが、そのような場合注意が必要です。 対象要素が非表示だった場合、一時的に表示状態し、採寸後に非表示にするようなプラグインを定義しておくと便利です。(以下参照) $j.fn.mea
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
PHPのイタい入門書を読んでAjaxのXSSについて検討した(1) - ockeghem's blog
このエントリでは、あるPHPの入門書を題材として、Ajaxアプリケーションの脆弱性について検討します。全3回となる予定です。 このエントリを書いたきっかけ twitterからタレコミをちょうだいして、作りながら基礎から学ぶPHPによるWebアプリケーション入門XAMPP/jQuery/HTML5で作るイマドキのWeという本を読みました。所感は以下の通りです。 タレコミ氏の主張のように、本書はセキュリティを一切考慮していない 主な脆弱性は、XSS、SQLインジェクション、任意のサーバーサイド・スクリプト実行（アップロード経由）、メールヘッダインジェクション等 脆弱性以前の問題としてサンプルスクリプトの品質が低い。デバッグしないと動かないスクリプトが多数あった 上記に関連して、流用元のソースやデバッグ用のalertなどがコメントとして残っていて痛々しい 今時この水準はないわーと思いました。以前
Enjoy*Study - IE6ではJavaScriptで動的に作成したiframeに対してsubmitできない(IE7は未確認) ->解決
IE6だと下記のようなHTMLを表示すると、別ウインドウに対してsubmitされてしまいます。 なお、Firefox2.0、Opera9.2だとOKです。(iframeに対してsubmitされる) <html> <head></head> <body> <form enctype="multipart/form-data" method="post"> <input type="file" name="userfile" id="file"></input> </form> <script> var iframe = document.createElement('iframe'); iframe.name = 'targetFrame'; document.body.appendChild(iframe); var form = document.forms[0]; form.actio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Templates
VOXEL ARTICLE - voxel
1216彩票-官网平台
Regexper
プロとしての行為 Act as Proffesional
