Boeing’s Starliner spacecraft has successfully delivered two astronauts to the International Space Station, a key milestone in the aerospace giant’s quest to certify the capsule for regular crewed missions. Starliner…
個人的に趣味で Chrome Extension の開発をしていますが、最近いろいろとノウハウも溜まってきたので Chrome Extension の CI について少しまとめてみようと思います。 目次 はじめに Chrome Extension のテストを書く 何をテストするのか テストフレームワーク Jasmine のインストール Jasmine でテストを書いてみる JavaScript APIs をモックする HTML Fixture を読み込む Chrome Extension のテストを実行する テストランナー Karma Karma のインストール Karma でテストを実行する ファイルの変更を監視する コードカバレッジを出力する HTML Fixture を読み込む Chrome Extension を CI する CI サービス Wercker Wercker にリポジ
はじめに 利用者に短い文章などを提示して注意や操作を促す通知は、古くはWindowsのタスクバー(標準では右下)に表示されるバルーン表示、最近ではiOSやAndroidにおけるプッシュ通知の表示など、さまざまなシーンで利用されています。 本記事では、このような通知をWebページの内部に表示することができる以下のjQueryプラグインを紹介します。 noty(多機能な通知表示) Notific8(Windows 8風通知表示) CFToaster(AndroidのToast風通知表示) notyは通知にボタンを配置できるなど多機能であるのに対し、Notific8はWindows 8の通知を再現することに特化したシンプルな内容になっています。CFToasterはさらにシンプルで、AndroidのToastのようにメッセージ文字列を表示するだけのプラグインです。利用目的や表示スタイルにより使用す
JavaScript において、文字列を正規表現にマッチさせるためのメソッドは、以下の4つがあります。 1. RegExp.test() 2. RegExp.exec() 3. String.match() 4. String.search() RegExpオブジェクトのメソッド(引数がStringオブジェクト)と、Stringオブジェクトのメソッド(引数がRegExpオブジェクト)があり、しかもすべてのメソッドで微妙に動作が違うので、非常に紛らわしい… ということで、これらがどう違うのか、どう使い分ければいいかをまとめてみました。 ## RegExp.test() とString.search() まずはパターンにマッチするかどうかだけをチェックしたい時。 あるパターンが文字列に存在するかどうかだけを知りたいときは、RegExp.test() または String.search() を使
今まではなんとなくtestemを使っていたのですが、Karmaを検討する必要があったので試してみました。 サンプルの設定などは↓で見ることが出来ます。 https://github.com/koba04/backbone-boilerplate testem to karma これまでは業務でもtestemを使っていて、テストの数が少ないうち(1000以下)は問題なかったのですが、 段々テストが増えてくるとCPU100%になってテストが走るブラウザが固まることが増えてきて辛い感じになってきました。 そんなときに下記の記事を見て同じような現象だなと思いKarmaを試してみることにしました。 http://developer.cybozu.co.jp/tech/?p=7089 Installation インストールはnpm install karmaするだけです。 globalでkarmaのコ
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.3 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
Gruntと同じくタスクランナーのGulp。Gruntよりもビルドファイルが読みやすく、スピードも軽快な気がします。GulpとGrunt Gruntに関しては前回の記事で(タスクランナーGrunt導入メモ)導入方法と簡単な使い方を紹介しましたが、今回はGruntと同じタスクランナーのGulpでSassのコンパイルとブラウザを自動で更新するlivereloadを使ってみたいと思います。 Gulpのいいところ Gruntと大きく違う部分は以下になります。 ・Gruntよりもビルドファイルの可読性が良く、短いコードで済む ・なるべくタスクを並列で実行しようとするので、スピードが早い Gruntもとても優秀ですが、GulpはGruntの良い部分を引き継ぎ、短所を改善したツールだそうです。そのためビルドファイルの書き方や導入方法はGruntと似ているので、Gruntを使ったことのある人は、使いや
あるある デザイナ(コーダ)「うおー!(^ω^)(すごい勢いでデザイン&コーディング)」 エンジニア「デザイナからデータを受け取ったよ!そのまま突っ込むよ!えい!(^ω^)」 ユーザ「画像…めっちょおもぃ(^ω^)」 あなたの…心に…直接…呼びかけています… 画像…最適化できてますか…誰がやるか…曖昧に…なっていたりしませんか… 画像最適化とは 画像最適化とは、Webサイトのレスポンス改善を目的に、画像に適切な処理を施すことです。一口に言っても、様々なアプローチがあり、形式を変換したり、画像をまとめたりすると、コードも触る必要があるので大変。今回は効果がわかりやすく、カジュアルに取り入れやすい 画像ファイルサイズを小さくする(品質を保ちながらデータを削ったり、圧縮する) の最適化手法にフォーカスします。 画像最適化ツールといえば、先日、話題になっていた http://compressor.
3. 自己紹介/所属等 • デンキヤギ株式会社 代表取締役 • 社員, フリーランス, 協業企業 募集してます • DSTokai管理人 • 東海地方のメタコミュニティ • IT勉強会カレンダーっぽいやつの東海地方版 • NGK(名古屋合同懇親会) • エンジニア向けクロスコミュニティ忘年会 • ここ数年は100人超の参加者 2 4. 自己紹介/技術領域 • フロントエンドアーキテクト(自称) • 大量データ×フロントエンドが専門? • 数百万件以上をストレスレスに操作 • 100万件を編集するExcelっぽいヤツとか… • バックエンド込みのアーキテクチャ設計から フレームワーク・コンポーネント実装まで • 最近はHaxe製SPAフレームワークとか • Haxe/JS歴2年, その他にWPF, Silverlight等 • JavaScript歴は12年ぐらい 3
JavaScript Promiseの本という無料で読める電子書籍を書きました。 タイトルそのままで、JavaScriptのPromiseについて書いた書籍です。 書籍の目的 この書籍を読むことで学べる事として、次の3つを目標にして書きました。 Promiseについて学び、パターンやテストを扱えるようになる事 Promiseの向き不向きについて学び、何でもPromiseで解決するべきではないと知る事 ECMAScript6 Promiseの基本をよく学び、発展した形を自分で形成できるようになる事 Promiseは、次のECMAScriptの言語仕様として策定が進められていて既に多くのブラウザに実装されています。 Promiseについて扱う書籍ですが、この機能はjQuery.Deferred()やAngularJSの$qやBluebird等の類似の機能が既にあるため扱ったことがあるかもしれま
全世界ユーザが使える電話番号入力欄実装jQueryプラグイン「International Telephone Input」 2014年06月16日- International Telephone Input 全世界ユーザが使える電話番号入力欄実装jQueryプラグイン「International Telephone Input」 日本などでは+81などのコードが付きますが、他の国にも対応し、以下のようにクールなinputを提供してくれます。 バリデーションやIPアドレスベースで国を自動判別したり、なかなか便利そうです。 世界展開を予定しているサービス関連の方はしっておくとよいかも 関連エントリ 通貨フォーマット変換ができてサイトの国際化に使える「accounting.js」
シンプルなテキストだけのものをはじめ、画像やアイコンを使った凝ったレイアウトの通知パネルをさまざまなアニメーションで表示できるjQueryのプラグインを紹介します。 表示位置やスライド・フェードなどのエフェクトも簡単に設定できる優れ物です。 Amaran JS Amaran JS -GitHub Amaran JSのデモ Amaran JSの使い方 Amaran JSのデモ デモではさまざまなデザインのパネルをさまざまなエフェクトで表示できます。 ↓は上:ユーザースタイル、下:半透明スタイル デモページ:オプション Amaran JSの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/jquery.amaran.min.css"> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く