JavaScriptライブラリ中毒者(ジャンキー)にならないためにThis browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
D3.jsを使ってスターウォーズっぽくズンドコキヨシ
README.md R2D3_ZUNDOKO D3.jsの勉強がてらに作ったSTARWARS風な六甲おろしを元にして、ズンドコキヨシバージョンを作ってみました。 パソコン用デモとソース → bl.ocks.org モバイル用デモ → bl.ocks.org Qiitaでの紹介ページ → Qiita ズンドコキヨシまとめ → Qiita 以前作ったSTARWARS風六甲おろし → bl.ocks.org STARWARS風六甲おろしの解説 → Qiita index.html ��`�U �Q�`�U <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <
ulやtableにお手軽に足したり引いたり絞り込みしたりできるlist.js - Qiita
v1.2がリリースされたようです。 あまり記事がなかったので備忘代わりにまとめておきます。 公式サイト どういうライブラリ？ ulで作ったリストを、jsで手軽にliを追加したり、条件指定して削除したり、 絞り込みしたりソートしたりする機能を提供します。 jsのみでcssは一切ないので、UIは好きにできます。 インストール 上記に書いてある通り。 npmでもbowerでもCDNでもzipで落として解凍しても大丈夫です。 使い方サンプル ざっくりhtmlファイルとjsファイルを作るとこんな感じになります。 ディレクトリ構成 / ---- index.html | |-- index.js | |-- bower_components/ ---- list.js/ ---- dist/ ---- list.min.js <html> <head> </head> <body> <!-- ここのリ
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]
みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。 前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況
![フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/bceb415754fbfec32bccfd56b9894baea82cf05b/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F398ac51379393380250fefeb8ea8711487a7c935%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkoharusugiura%252F20151222%252F20151222103513.png)
[jQuery] ドラッグ&ドロップをカンタン実装！【draggableメソッドまとめ編】
jQuery メソッドはけっこうな数が用意されていて、ドラッグ&ドロップに関してはなんでもできちゃいそうです。のでまとめました。 ドラッグ&ドロップってどうやって実装するの？という場合は コチラ の記事で詳しく書きました！よければどうぞ！ また今回は使用用途ごとにジャンル分けしてまとめました。上記の目次からジャンルを確認できます。 この記事はJQuery UI – SakuraSaku jQuery Libraryさんのサイトを超参考にさせていただきました。 指定要素にドラッグ&ドロップさせる系 ドロップ先を限定する場合に使うメソッドです。 紐付けしたあとに他のメソッドと組み合わせてなにかするようなものが多いです。 connectToSortable
![[jQuery] ドラッグ&ドロップをカンタン実装！【draggableメソッドまとめ編】](https://cdn-ak-scissors.b.st-hatena.com/image/square/69a7b29b01c5f90cc61760a95830b09e780c3069/height=288;version=1;width=512/http%3A%2F%2Flogic-a.com%2Fwp%2Fwp-content%2Fuploads%2F2013%2F08%2Fdrag_drop2.jpg)
フロントエンドがサーバー負荷を抑えるためにできること - アニメイトラボ開発者ブログ
はじめまして、アニメイトラボのフロントエンドエンジニア id:koharusugiura です。 フロントエンドエンジニアとして働いていると、いかにサーバーサイドに負担を掛けずに処理を行うかについて考えることも多いと思います。 そこで今回は、サーバーに画像の転送を行う前にクライアント側で画像加工をする話について書きます。 この記事は animateLAB Advent Calendar 2015 15 日目の記事です。 qiita.com JavaScript で画像処理を行う ウェブアプリケーションで画像ファイルの加工が要件にある場合、サーバー側で画像加工を処理するケースが大半だと思います。 しかし、データ通信のことを考えると、最適な考え方とは言えない気がしています。 近年、日本のインターネット回線の速度は大きく向上しているとはいえ、モバイルデータ回線はまだまだ速度的に完璧とは言えません
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
JavaScript 基礎編 | プログラミングの入門なら基礎から学べるProgate (プロゲート)
JavaScript 基礎編 フロントエンドからサーバーサイドまで広い可能性を持つJavaScript。まずは、インタラクティブなデザインをつくるjQueryを学ぶために、必要最低限の基礎を身につけましょう！
キー付きコレクション - JavaScript | MDN
Map オブジェクトはキーと値のマップで、挿入順に要素を反復処理することができます。 次のコードでは Map を用いたいくつかの基本的な操作を表しています。また、追加の例や全ての API については、 Map リファレンスページをご覧ください。 for...of ループを使って、各反復処理において [key, value] からなる配列を返しています。 const sayings = new Map(); sayings.set("dog", "woof"); sayings.set("cat", "meow"); sayings.set("elephant", "toot"); sayings.size; // 3 sayings.get("dog"); // woof sayings.get("fox"); // undefined sayings.has("bird"); // fa
Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
Popmotion: The animator's JavaScript toolbox
The animator’s JavaScript toolbox.PowerfulSupports keyframes, spring and inertia animations on numbers, colors, and complex strings.Low levelSimple, composable functions, portable to any JS environment. The library behind the library, it powers the animations in Framer Motion.StableWritten in TypeScript and enjoys over 95% test coverage.TinyThe animate function is less than 5kb, and every utility
コピペでOK。iOS9のAdBlockが有効な場合にページの表示を無効にするサンプル:phpspot開発日誌
CSS3でブロックで組み上げたような文字グラフィックをつくれる「ISO-BLO... 次の記事 ≫：AppStoreでのスクリーンショットを一括作成できるPSDファイル sitexw/FuckAdBlock GitHub iOS9のAdBlockerが話題となっていますが、FuckAdBlockを使うことでAdBlockerがインストールされているかどうかの検出が可能です。 iOS9のAdBlockが有効な場合にページの内容を無効にするサンプルを、非プログラマの方でもコピペで簡単に使えるように書いてみました。 現状、有料アプリで１位となっているため、サイトの利用者層によっては、これから売上等に影響が出てくるのかもしれません。 有効・無効によってUserAgent等が書き換わらないため、こういったライブラリはイタチごっことなるのかもしれませんが、便利に使えるようでした。 <script ty
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
v86
レンガUIのMasonryを超高速化したレイアウトライブラリ「Bricks.js」:phpspot開発日誌
#スーパーイカメーカー について
Ettrics. A full-stack creative agency.
https://phinajs.com/
TechCrunch | Startup and Technology News
