We call it Wavie.js An awesome javascript library for creating background waves. Github Download
Wavie.JS
We call it Wavie.js An awesome javascript library for creating background waves. Github Download
リアクティブ・プログラミングに特化した JS フレームワーク Cycle.js を学ぼう #1 - 導入編 | Recruit Tech Blog
リアクティブ・プログラミングに特化した JS フレームワーク Cycle.js を学ぼう #1 - 導入編 wakamsha 2019年4月更新 : RxJS v6 に対応しました。 過去数回に渡って RxJS の基本的な使い方をご紹介してきました。 RxJS を学ぼう #1 - これからはじめる人のための導入編 RxJS を学ぼう #2 - よく使う ( と思う ) オペレータ15選 RxJS を学ぼう #3 - 知ってると便利な ( かもしれない ) オペレータ 8選 RxJS を学ぼう #4 - COLD と HOT について学ぶ / ConnectableObservable RxJS を学ぼう #5 – Subject について学ぶ / Observable × Observer RxJS 自体はリアクティブ・プログラミングを実現するためのいちライブラリであり、いわゆる Angu
日付処理が楽になる！Moment.jsの使い方 - Qiita
Moment.jsとは JavaScriptで日付の処理は面倒ですが、いろいろと便利にしてくれるのが、Moment.jsです。 備考 Moment.jsは、ver 2.8.3で確認 2014年10月24日に実施したので、それを元に以下計算されてます 基本的な使い方 JSを読み込む <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> // momentオブジェクトをセット var m = moment(); //現在の時刻が入る var output = m.format('YYYY年MM月DD日 HH:mm:ss dddd'); console.log(output); // => 2014年10月24日 11:44:00 Friday var m = mom
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
YoutubeやVimeo、Vineなどのembedをレスポンシブにする非依存の軽量スクリプト・「superembed.js」
superembed.jsはYoutubeやVimeo、Vine等の動画共有サービスのembedをレスポンシブWebデザインに対応する為のスクリプトです。CSSで動画要素を包括して、といった作業の必要もなく、他ライブラリへの依存も無く、現状なら圧縮版で1.6kbと非常に軽量なスクリプトですので扱いやすいかと思います。コードは非常にシンプルなので対応サービスを増やしたい場合でもすぐ分かるかと思います。また、iframe要素には自動でsuperembed-forceというclassが付与されますので必要に応じて利用出来ます。スクリプトを読みこめば即RWD対応出来るのは魅力かなと思います。 superembed.js
Node.js ES2015/ES6, ES2016 and ES2017 support
"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
こないだ社内の勉強会でwebpackのこととか話したのでまとめた - getalog
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
デバイスに適したテキストサイズにしてくれるレスポンシブテキストjQueryプラグイン
なんて言えばいいのか・・・。 マルチデバイスにあわせて、フォントがしっかりとフィットするように作られたプラグイン。 凄くシンプルなのに、海外で話題になっていたのでご紹介。 それぞれにあわせた形にフィット FitText - A plugin for inflating web type サンプルコードは以下より抜粋 https://github.com/davatron5000/FitText.js/blob/master/example.html <body> <div class="container"> <header> <h1 id="fittext1">Squeeze with FitText</h1> <h1 id="fittext2">Squeeze with FitText</h1> <h1 id="fittext3">Squeeze with FitText</h1> <
clipboard.js
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop
アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="path/to/Wallop.min.js"></script> </body> アニメーション（scale, foldなど）を利用する時は、アニメーション用のCSSを加えます。 <head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-animation.c
![[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop](https://cdn-ak-scissors.b.st-hatena.com/image/square/c55fb72cc692f14ab3307eef2042769543abed0d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015090103.png)
kushagragour.in - このウェブサイトは販売用です！ - kushagragour リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる
HTMLコード内でアニメーションする超マニアックなJSライブラリ「Dom-Animator.js」
普通にWebサイトを閲覧する人は、HTMLコードを見る機会は少ないと思います。 しかし、今回ご紹介する「Dom-Animator.js」を使う場合、ブラウザのデベロッパーツールなどでHTMLコードを見ないと、何が起きたかまったく分からないという面白いライブラリです。 どんなことが出来るのか？まずは、「Dom-Animator.js」を使うとどんな事が出来るのかを見てみましょう！ 公式サイトへアクセスすると、ブラウザのデベロッパーツールを開くように明記されています。 （参考） Macは、「Command」+「Option」+「I」 Windowsは、「Control」+「Shift」+「I」 で、デベロッパーツールが開きます。 そこで、そのまま開いてみると、コード内にひときわ目立つ「アスキーアート」がアニメーションしているのが分かります！ 分かりやすいように、GIFにしてみました。 このよう
Blockrain.js - a Tetris game in HTML5 + Javascript
Embed & play the classic game on your site. Simple as that. Plug 'n' Play Just copy and paste a bit of code and you'll be good to go Responsive No matter how wide or narrow your display is, you'll always be able to play. Design Customize it as you want. Change the colors to fit your site. Speed Adjust how fast the blocks are falling to make it more difficult. Score Add the scoreboard or not. That'
[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor
指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 Parallaxorのデモ デモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: second Parallaxorの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="parallaxor.min.css" rel="stylesheet"> </head> <body> ... コンテンツ ... <script src="http://code.jquery.com
![[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9ead73de963a2e762fa0becb8a28dab2b49e44e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011904.png)
Phaser - A fast, fun and free open source HTML5 game framework
Open Source HTML5 Game Framework For over a decade, Phaser has enabled developers of all skill levels to create games for the web. Phaser Editor Phaser Editor enables you to visually create Phaser games. Instead of entering numbers in your code to position Game Objects, you can drag and drop them into place, tweak their animations, adjust their physics bodies, enable special effects and more. It's
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://phinajs.com/
http://www.rvl.io/mizchi/js_hell_on_earth