Ready-to-use foundational React components, free forever.
MUI: The React component library you always wanted
Ready-to-use foundational React components, free forever.
JavaScript開発者が一度は読むべきStackOverflow - Qiita
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
Facebook Relayについてまとめ - Qiita
Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 **結局データをサーバからとってくるところってどうなってるの？**ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか
Relay
Built for scaleRelay is designed for high performance at any scale. Relay keeps management of data-fetching easy, whether your app has tens, hundreds, or thousands of components. And thanks to Relay’s incremental compiler, it keeps your iteration speed fast even as your app grows. Keeps iteration quickRelay is data-fetching turned declarative. Components declare their data dependencies, without wo
イントロダクション - Mithril.js
MithrilはVimeoやNikeといった企業や、Lichessのようなオープンソースプラットフォームで利用されています。 もし、すでにJavaScriptのフレームワークでの開発経験があり、他のフレームワークとなにが違うのかを知りたければ、フレームワークの比較のページを見てください。 MithrilはPolyfillなしでIE9以降のすべてのブラウザに対応しています。 はじめよう CDNを使ってMithrilを読み込んで、これから説明するチュートリアルをなぞるのが、Mithrilを試すもっとも簡単な方法です。このチュートリアルはラウティングやXHRも含めて、主要なAPIを紹介しますが、10分程度しかかかりません。 それでは次のようなHTMLファイルを作ってみましょう: <body> <script src="//unpkg.com/mithril/mithril.js"></scrip
GitHub - videojs/video.js: Video.js - open source HTML5 video player
Update: Big changes coming in Video.js 10, early 2026! Read the discussion. Video.js is a full featured, open source video player for all web-based platforms. Right out of the box, Video.js supports all common media formats used on the web including streaming formats like HLS and DASH. It works on desktops, mobile devices, tablets, and web-based Smart TVs. It can be further extended and customized
Shibu's Diary: 世界最速でMithril本をリリースした話
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 オライリー・ジャパンから、Mithrilの本を出しました。今まで本は何冊も出してきましたが、今回が初の単著です。O'reilly Authorの帽子もいただきました。出版にあたってはいろいろな方々にお世話になりました。ありがとうございました。もちろん、購入していただいた方、興味をもってシェアしていただいた方々もありがとうございます。 ちょっとお酒が入って酔っぱらっている状況ですが、本について紹介しようと思います。 Mithrilのどこに惹かれたのか？ この業界は常に新しいものがたくさんでてきます。本当にエポックメイキングなものもあれば、車輪の再発明的なものもあります。とはいえ、それらは0/1で区切ることはできなくて連続的なものですし、さらに複数の項目が関連しあっていたり絡まって
gulp なしの Web フロントエンド開発
JavaScript コンパイルとファイル監視 JavaScript ビルドは Browserify、ES6 から ES5 へのコンパイルは babelify を利用する。Source Maps ファイルは exorcist が生成。ファイル監視は watchify が担当。コマンド定義は以下。 { "scripts": { "build:js": "browserify -t babelify ./src/js/App.js -d | exorcist ./src/bundle.js.map > ./src/bundle.js", "watch:js": "watchify -v -t babelify ./src/js/App.js -o \"exorcist ./src/bundle.js.map > ./src/bundle.js\" -d", "release:js": "bro
LocalKitを使っているなら自動テストも簡単。JavaScriptテストフレームワークまとめ
LocalKitを使うメリットの一つにテストフレームワークが容易に使えるようになるという点が挙げられます。そこで今回は開発したJavaScriptコードでユニットテストを実現するためのフレームワークを紹介します。 Jasmine: Behavior-Driven JavaScript describe("CallTracker", function() { it("tracks that it was called when executed", function() { var callTracker = new j$.CallTracker(); expect(callTracker.any()).toBe(false); callTracker.track(); expect(callTracker.any()).toBe(true); }); it("tracks that num
jQuery TourBus
Holy crap it is definitely yet another jQuery tour/walkthrough plugin! Current Version: 0.4.4 I wanted a simpler, less things-happen-automatically toolkit for making tours. If I need auto-advance/progress between 'legs' (get it, legs of the tour :)) I just need some callbacks where I can write my setTimeouts. If I want to highlight some elements, I just write some styles to do that and apply them
js.orgの使い方 - Qiita
Mithrilのウェブサイトの日本語訳を公開しました。Mithrilおもしろいんでぜひ遊んでみてください。 今日は、Mithrilの日本語ドキュメントを置いている、js.orgドメインの登録の仕方のお話です。JavaScript関連のモジュールを公開している人は使ってみるとなんかカッコいいURLが取れます。 ドキュメントの準備 まずはgithub pagesにウェブサイトを乗っけます。github pagesについてはもういろいろ紹介があるので特に説明はしません。今回のドキュメントは、以下のURLで翻訳をしています。 https://github.com/shibukawa/mithril-ja 翻訳にあたっては、http://www.transifex.com/とかを使っても良かったんですが、今回は一度じっくり使い込んでみようと思っていたOmegaTを使ってみました。OmegaTをダウン
p2.js·JavaScript製の物理エンジン MOONGIFT
物理エンジンは様々なケースで利用されています。ゲームはもちろんのこと、オブジェクトが動く際に、それがよりリアルに感じられるためには物理エンジンが欠かせません。複数のオブジェクトが関係し合う場合も同様です。 有名どころとしてはBox2dが知られていますが、今回はp2.jsを紹介します。Web上で動作するJavaScript製の物理エンジンです。 p2.jsの使い方 p2.jsは多数のデモを用意していますが、今回はその一部を紹介します。 二つくっついたオブジェクト同士が衝突するデモ。 一つの物質が横に飛んでいくもの。 多数のオブジェクトが衝突するデモ。 車のデモ。矢印キーで動かせます。 実際に車を動かしてみたところ。バネもあって、ショックを吸収しながら進んでいるのが分かります。 p2.jsは衝突検出、コンタクト、摩擦、反発、モーター、スプリングなどの機能が備わっています。サンプルコードは次のよ
クラスの落とし穴1 - プロパティの初期化 - Qiita
クラスの落とし穴1 - プロパティの初期化 (この投稿) クラスの落とし穴2 - メソッドとクロージャ クラスの落とし穴3 - 継承 クラスの落とし穴4 - プライベート変数の実装 はじめに javascriptでもクラスを作成する事が多くなってきました。 しかし、「javascriptにはクラスがない」とよく言われ、実装側が擬似的にクラスを定義しています。 クライアントサイドで大規模開発が増えてきたため、オブジェクト指向の概念で実装したいと思っているのでしょう。 javascriptでは安易な疑似クラスの作成によって見事落とし穴にはまる事があります。 ここでは、本来javascriptにはないクラスをうまく実装する方法を順に追って説明します。 "落とし穴とは、 うまく動いているけど気がついていないだけで実はマズい実装の事 とします 簡単なクラスの実装 クラスの定義には幾つかの方法がありま
JavaScript (Electron) を使ってアプリの見栄えを整える - Qiita
Electronを使って見栄えを整えてみる ElectronはJavaScriptでデスクトップアプリケーションが作れるツールです。 前回「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」では簡単なアプリを作って配布するところまでやりました。 あとはいつも通りの JS + HTML + CSS でガリガリ書いていけばいいのですが、まずは見た目から入ろうということで、もう少しアプリっぽい見栄えにしてみましょう。 ちなみに、Macではいろいろ動作を確認しましたが、Windowsは知りません。 大体同じように動くはずですが、もしダメだったらWindows版の記述を教えて頂けると助かります。 基本設定は browser-window APIで browser-windowはアプリのウィンドウを表示するためのAPIです。 例えば、以下は単なるin
ExpandJS - 多くのUIコンポーネントと役立ちメソッドを備えたJavaScriptライブラリ MOONGIFT
最近のWebはフラットなUIが主流で、かつユーザのアクションに対して何らかのアニメーションを行うマテリアルデザインも取り込まれてきています。そのためにも多くのフレームワークが出ています。しかしそれらを導入するとしばりが強いと感じている人も多いでしょう。 そこでExpandJSの導入です。PolymerとGoogleのマテリアルデザインをベースに、80以上のカスタムエレメントと350を越える関数を提供するライブラリです。 ExpandJSの使い方 フォーム入力系。フォーカスが当たるとアニメーションします。 ツールチップ。 ダイアログ。 アクション付きダイアログ。 パネル。 メニュー。 ペーパー風表示。 アバター。 ボタン。 クリックでアニメーションします。 フローティングボタン。 アイコン。 アイコン付きリスト。 リストの右側に情報追加することもできます。 四角い系統のボタン。 チェックボタ
The Local Storage Bridge – LocalStorageを使ってタブ間連携
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5のLocalStorageの基本的な使い方はKVS型のデータ保存になります。もちろんそれだけで使っても良いのですが、もっと色々な使い方を考える中で新しいアイディアが見つかるかも知れません。 今回はその一例としてThe Local Storage Bridgeを紹介します。Local Storageを使って同じブラウザ、異なるタブ間でメッセージを飛ばし合えるライブラリです。 The Local Storage Bridgeの使い方 The Local Storage Bridgeはいくつのウィンドウ間でもメッセージが飛ばせます。 実際に試しているところです。ちょっと小さいですが…。 使い方としては、まず指定したチャンネルを購読します。そうすると受信した時にメソッドが実行され
horsey
Enter the name of a fruit: horsey(document.querySelector('input'), { source: [{ list: ['banana', 'apple', 'orange'] }] }); Lazy load the fruits, useful for AJAX! (loading starts when the field is focused) horsey(document.querySelector('input'), { source (data, done) { var items = [ 'banana', 'apple', 'orange' ]; setTimeout(() => done(null, [{ list: items.filter(item => item.indexOf(data.input) !==
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Epoch by Fastly
GitHub - gijsroge/offscreen.js: Detects if an element falls of the viewport of your screen
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
