既存プロジェクトへ段階的にLinter(eslint)を導入する方法を考える | DevelopersIO
吉川@広島です。 既存のTS/JSプロジェクトにLinterが当たっていない場合、そこからeslintを導入していくのはかなり大変であり、どう実現していくか悩ましい所です。 こういったシチュエーションに何度か遭遇している自分が、既存プロジェクトにeslintを導入する方法は何が良いか、以下のようなことを考えました。 全ファイルに対して eslint --fix してPRを出すやり方はしない 差分が多すぎて怖い 他ブランチとのコンフリクトも多くなりやすい 段階的・漸進的・徐々に導入できるようなやり方が望ましい ルールをすべてOFFにする→一つずつONにしていく方法もあまりやりたくない ルール単位だと、一つだけONにしても複数のファイルで警告が発生することが多いので、差分が多く怖いという問題が残る 「機能開発などで変更したファイルに対してついでにeslint対応もする」といったボーイスカウトル
JavaScript ベスト・オブ・ザ・イヤー 2016
JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
[Linux]PhantomJSをインストールする - Qiita
PhantomJSをLunux(AmazonLinux)にインストールします インストールと言ってもバイナリDLして配置するだけでした 環境 確認したのは AmazonLinux 他のLinuxでもいけるんじゃないかと思います 手順 こちら から最新のものをDL(本記事記述時点(2014/08/27)の最新は1.9.7) $ cd ~/ $ wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2 解凍 $ cd /usr/local/src/ $ sudo tar jxf ~/phantomjs-1.9.7-linux-x86_64.tar.bz2 配置 $ sudo ln -s phantomjs-1.9.7-linux-x86_64 phantomjs $ sud
![[Linux]PhantomJSをインストールする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4dd764885baa0bf07e248e2746c925606a9ee1ee/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTGludXglNURQaGFudG9tSlMlRTMlODIlOTIlRTMlODIlQTQlRTMlODMlQjMlRTMlODIlQjklRTMlODMlODglRTMlODMlQkMlRTMlODMlQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWRiOWJlMTM2ODEyOTRiZGU2Y2M5NzE0YTYzZGJlYmE2%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrbWF0cyU0MGdpdGh1YiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzM0MzNhZDI3NTg1OWYxNzc3ZWE1NDNiNzkyODYyOWU%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Oq44Kz44O8SVTjgr3jg6rjg6Xjg7zjgrfjg6fjg7PjgrrmoKrlvI_kvJrnpL4%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D9d48c00f8298adb1c06fe31e92bca6b2)
Web Components で共通ヘッダーをつくってみた - GMOインターネットグループ グループ研究開発本部
フロントエンド系の技術調査やサーバサイドアプリケーションの開発を担当している D.M. です。今回は Google I/O 等で話題になっている Web Components を取り上げたいと思います。簡単に言うと HTML の再利用性を高めるための HTML の新仕様です。 Web Components 4要素 Shadow DOM ページ内で他の CSS が干渉できない領域を作り出すことができます。これによりページとコンポーネントの CSS が互いに干渉してしまう問題を解決できます。 Templates JS が操作する HTML を JS から分離して Tempalte タグとして定義することで JS から利用しやすい形にすることができます。このタグを利用することで HTML が JS のソース内に混在してしまう問題や、 HTML 内の JS が誤作動する問題を抑制します。 Cust
JSライブラリ/フレームワークの良い、悪いメモ - 素人がプログラミングを勉強していたブログ
※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早速い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFacebook Flowの動向に注目 Backbone.js ModelとEventを使う/Viewは使わなくていい Lodash Underscore.jsをよくしたやつ Gulp Gruntより良いという意味で。browserifyまわりがうまく動かない問題があってnpm runのほうがいいという噂もあるがまあ良いに分類してもいい EventEmitter Custom EventはDOMにくっ付いてる感があるのでロジック志向の物にはEventEmitter使った
JS開発におけるTDDと自動テストツール利用の勘所
1. JS開発における TDDと自動テスト ツール利用の勘所 2012.12.06 株式会社マピオン 中村 浩士 12年12月5日水曜日 2. 自己紹介 中村 浩士 ( @kozy4324 ) 株式会社マピオン所属 主にWebアプリのフロントエンド開発 JavaScript, ActionScript 12年12月5日水曜日
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
Let's Testacular!
TestacularはGoogleのJavaScript MVCフレームワークAngularJSで利用されています（というかAngularJSの開発のために作られたようです）。
HTML5でコーディングするならとりあえずie9.jsとhtml5shiv.jsを入れる : 森のコーディング
9月8 HTML5でコーディングするならとりあえずie9.jsとhtml5shiv.jsを入れる カテゴリ:javascriptHTML5 Tweet 最近のマークアップ界隈を観察してみると、 HTML5でマークアップするときは２つのjsを読み込ませるのが多いみたいです。 ie9.js とhtml5shiv.js ■ ie9.js これは、internetexplore6,7,8をie9に近づけるためのライブラリ。 ・position:fixed; ・max-heightやmin-heightなどの最大サイズ設定 ・aタグ以外での:hover ・margin:0 autoで中央寄せ ・透過PNG ・opacityで透明度 などなどを対応させるという。 これまでIE6やIE7のハックをしてきたコーダーの方々にとっては、 「そうそう、IE6と７に対応させるときは大体ソレだよね」 なやつらですね
HTML5の3つのサウンド出力に対応したリアルタイムサウンドライブラリ·pico-player.js MOONGIFT
pico-player.jsはWeb Audio API、Audio Data API、HTMLAudioElementに対応したJavaScriptサウンドライブラリです。 pico-player.jsはJavaScriptを使ってリアルタイムに音を出力する際に便利なライブラリです。 音が流れますが、マウスの動きによって音程が変化します。 こちらは風車の回転によって音が変化しています。 コマンドを随時送ってサウンドを作り出します。 デモのコードです。 ONE-LINER-ORCHESTRAのデモ動画。 関西電気保安協会リズムマシーンのデモ動画。 pico-player.jsはWeb Audio API、Audio Data API、HTMLAudioElementの3つに対応し、Google Chrome/Firefox/Operaでサウンドを奏でられます。複数の音を重ねたり、サンプリン
enchant.js - A simple JavaScript framework for creating games and apps.
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
インストール不要、最新技術テンコ盛りのHTML5アプリ「MAGICAL BINGO COCORO」(デモ日あり) 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 [読了時間:2分] Node.js、WebSocket API/Socket.IO、、、技術者以外でこのキーワードを知っている人はどれだけいるだろう。筆者が2011年最重要と考えているキーワードである。Node.jsは、ウェブサーバーとして機能を果たすJa
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
node.jsは普及しそうに無い
ここ一ヶ月ぐらいからJavaScriptが注目されているようだ。理由は簡単で、GoogleのJavaScriptエンジンを使ったアプリケーション・サーバーであるnode.jsの性能が高いと主張されているからだ。 地味にブームになりつつあり、Ajaxのようにウェブ開発の現場に定着するかも知れない。多数のブログで紹介がされている。現状のその特徴を振り返りつつ、node.jsが普及するかを考察してみた。 1. JavaScriptは、ブラウザ発の人気スクリプト言語 JavaScriptは、LiveScriptとして1995年にNetscape Navigatorというウェブ・ブラウザに搭載されたのが始まりで、すぐに政治的な理由でJavaScriptに改名された。1996年には、その基本的な文法がECMAScriptとして、ECMA-262とISO/IEC 16262で定義されている。言語仕様が簡
Webブラウザで縦書き表示ができるJavaScript「竹取JS」公開 - MdN Design Interactive
（株）CMONOSはJavaScriptを使ってWebブラウザ上で縦書き表示ができる「竹取JS」をMITライセンスで公開した。対応ブラウザはInternet Explorer 5.5以上、Firefox 3.5以上、Safari 3.2以上、Google Chrome 3.0以上、Opera 10.5以上となっている。 「竹取JS」は、JavaScriptで指定されたブロックを縦書きに変換するツールで、Internet Explorer5.5以上に実装されている「writing-mode: tb-rl;」相当の表示を主要ブラウザで再現している。日本語、中国語、韓国語に対応しているほか、ウインドウサイズにあわせて高さを調節をするなど、JavaScriptならではの機能も用意されている。ダウンロードは特設サイトから行える。 また、同社では既存のWebサイトを縦書き表示する「竹取Web」も公開し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Arcticjs/Arctic.js: HTML5 game framework
IDEA * IDEA
IDEA * IDEA
今風のウェブを作る際に使えるCSS/HTML/JSのテンプレ『Easy Front-End Framework』 - 100SHIKI 〜 世界のアイデアを日替わりで
