We’re getting things ready Loading your experience… This won’t take long.
We’re getting things ready Loading your experience… This won’t take long.
作成:2015/08/24 更新:2017/04/16 Web制作 > 開発環境 フロントエンド開発規模が増大してカオスな状態みたいだし、何が流行っていて何を勉強すればよいのか分からない。今回は出来るだけ日本語対応してある、2015年も引き続きトレンドになるかもしれないリファレンスやツールを厳選しました。メジャーなもの中心。 エンジニア速報は Twitter の@commteで配信しています。 もくじ altJS 1.Dart 2.TypeScript MVC 3.AngularJS 4.Backbone js 5.React 6.Knockout js JavaScript テンプレートエンジン 7.JsRender 8.Underscore 開発環境 9.JSHint 10.LiveReload 11.VirtualBox / modern IE 12.BrowserStack alt
huluで特に見る予定のなかった映画を見てしまうminamiです。 JavaScriptにはいろいろな演算子があって便利に使えますが、~(チルダ)は今までほとんど使ってこなかったので使い道を探しました。 チルダは何をするもの? JavaScriptのチルダ演算子はなにをするものでしょうか?調べてみます。 ビット演算子 ビットごとの NOT: オペランドの各ビットを反転します。 なるほど。わからん。かいつまんで説明すると、数値を10進数や16進数ではなく32ビットの集合(0と1)として扱います。2進数ですね。整数をビット反転させると必ず符号を反転して1引いた数になります。 console.log(~-4); // 3 console.log(~-3); // 2 console.log(~-2); // 1 console.log(~-1); // 0 console.log(~0); //
Waypoints is the easiest way to trigger a function when you scroll to an element. var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } }) Builds are available for multiple DOM libraries. jQuery 1.8+ Zepto 1.1+ No Framework IE 9+ npm install waypoints or bower install waypoints or GitHub Download Get Help
5月7 iPhone(Android)サイトで縦向き横向きを判定する2つの方法(javascript) カテゴリ:javascriptiphone/ipadサイト Tweet スマホサイトを作っていて、縦向きのときにしか見れないようにしたい、ということがあり、縦横を判定するjavascriptを探していたら2つの方法がありました。 ①window.orientationを使う方法 以下のようにします。 var isLandscape = function(){ if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf(
ブラウザで動くゲームのプロトタイプを作るとき、もちろんPhaserとかの機能満載のゲームエンジンを使ってもいいのだが、こういったエンジンは多彩な機能に応じてAPIが豊富すぎて、使いこなせるようになるまでが若干面倒なことがある。そういった時、もっと軽量のJavaScriptライブラリを機能ごとに組み合わせた方がお手軽に作れるのではないか。そう思って、ゲームで使う機能ごとのライブラリを探してみた。 グラフィックス p5.jsが役立ちそう。p5.jsはビジュアルデザイン向けとして有名な言語ProcessingをJavaScript向けライブラリとして提供したもの。似たものとしてProcessing.jsもあるが、こちらは元のProcessing言語をブラウザ上で動かすことに主眼を置いており、ライブラリとして使う分にはp5.jsの方が使いやすい。 Get Started見れば分かるように、crea
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
An HTML pre-processor for web typography. Typeset provides typographic features used traditionally in fine printing which remain unavailable to browser layout engines. Typeset’s processing brings the following to your webpages: Real hanging punctuation Optical margin alignment Small caps detection Soft hyphen insertion Punctuation substitution Get the code on Git
ちょっと前までヘッダーをスクロールしても上部に残し続けるのが流行っていましたが、最近はさらに最初はヘッダーを大きく表示して、スクロールするとヘッダーサイズを小さくすると言うタイプが多く見られるようになっています。 実装は面倒なイメージがありますが、jquery.cb-slideheader.jsを使えば簡単に実現できます。 jquery.cb-slideheader.jsの使い方 jquery.cb-slideheader.jsにはいくつものメソッドが用意されていますので、それを使うことで多彩な表現が実現します。まずはスクロールするとヘッダーが表示されるもの。 スクロールでヘッダーが変わるもの。 スクロールでヘッダーを非表示に。ただしパララックス風です。 スクロールによってコンテンツを変更するのはパララックスエフェクトをはじめ、最近人気の効果です。jquery.cb-slideheader
Javascript artificial intelligence battle game. Create a spaceship AI and kill your enemies!
ReactとMaterial UIを組み合わせると、それだけでBrowserifyで結合したJavaScriptファイルが1MB超えてしまうので、やっぱり圧縮とかした方が良いのかな―と思い、やり方を調べてみました。 ※2015/08/03更新 Licensifyを開発された @t_wada さんから改良の連絡をいただいたので、Licensifyの最新版1.4.0をもとに内容を更新しました。 Licensify - Nodeモジュールのライセンスコメントを生成する JSファイルを圧縮すると、ライセンスが記載されているコメントが消えてしまうという問題があるということで、本題の前に、Browserifyと組み合わせて、読み込んだNodeモジュールのライセンスコメントを生成してくれる Licensify を試しておくことにしました。 インストールはnpmから。 $ npm install lice
Minimal 2kb zero dependency cascading grid layout without pain. Demo There's a simple example on jsbin. Usage It works on a grid container with a group of grid items. Then: var grid = new Minigrid({ container: '.cards', item: '.card', gutter: 6 }); grid.mount(); Installation Get it from npm. npm install minigrid Or 1998 script tag from npmcdn: Upgrade Upgrading from v1.x or v2.x? Please read the f
JavaScripting.comは公開されている様々なJSライブラリやフレームワーク、プラグイン等を探せるWebツールです。大量のJSライブラリ等を収集しており、細かくカテゴリ分け、探しやすいようにしてあるみたいです。それぞれのJSライブラリやフレームワークは本サイトやGithub等へのリンクとともに、概要、CDN、リポジトリなども確認可能となっています。 JavaScripting.com
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く