Mavo - Webアプリケーションを作る新しいアプローチ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、ReactやVueなどのビューエンジンに人気が集まっています。双方向更新が可能で、データをアップデートすれば自動的にUI側も更新されます。これにより、DOM周りのステータス管理から解放されるようになります。 今回紹介するMavoもビューエンジンですが、半分ロジックも加わったような作りになっています。 Mavoの使い方 基本はJavaScript/スタイルシートを読み込むだけです。 <script src="https://get.mavo.io/mavo.js"></script> <link rel="stylesheet" href="https://get.mavo.io/mavo.css"> サンプルです。以下のようなコードを書きます。 <main mv-app="p
changeではできない？JavaScriptでdivの変更を監視する方法 | オジマネ
オジー WordPress歴8年 副業でデザイン/開発を受託→法人化 WordPressで会社HPをオリジナルテーマで作成 主軸はデザイン、たまにフロントエンドのコードも書きます 事業会社/受託会社 両方経験あり よくフォームでの値が変わったら〇〇という監視をするときにchangeを使うことがあると思いますが、divなどの中身が変更されたときに使用するのはご存知ですか？ changeが使えればいいのですが、changeではdivの変更を受け取ることができません。そんなときはDOMSubtreeModified propertychangeを使用することで監視することができます。 今回はその使用方法を紹介したいと思います。 コード $(document).ready(function() { $('.div_change_lst').on('DOMSubtreeModified proper
scrollMonitor - 大量のデータもスムーズにスクロール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で大量のDOMを表示するのは自殺行為です。Webブラウザの動きがガクガクになったり、フリーズしてしまったりします。そのためページネーションが使われるのですが、業務要件として全データの表示を求められることは多々あります。 そんな時にはscrollMonitorを使ってみましょう。大量のデータであってもスムーズなスクロールが可能になります。 scrollMonitorの使い方 利用例です。実際に表示されているのはこの見えている部分だけで、黄色と紫色の部分は消えたり、新しくDOMに追加表示されます。 見出しを残してスクロールもできます。 scrollMonitorではデータはメモリ上にありますが、それをスクロールにあわせて描画しています。また、不要になった部分は破棄しています。こ
Webデザインの没個性化と認知容易性 | ベイジの社長ブログ
Webサイトのデザインは紙のデザインと異なり、技術的な制約が強く、特に最近は様々な環境（デバイス、ブラウザ、画面サイズ、屋内・屋外など）での閲覧に対応できることを求められます。そのため、戦略から要件、コンテンツ、機能と論理的にデザインを決めていくと、どこかで見たことあるような没個性なデザインになりやすいものです。（注：ここでいうデザインは視覚的なデザインを指します） マルチデバイス、マルチブラウザが進み、レスポンシブWebも選択肢の一つとして一般化した昨今では、Webデザインの没個性化はますます進んだ印象があります。例えば、Googleが公開しているマテリアルデザインのガイドラインを見ても、デザインのパターン化と属人性排除の思想を如実に感じることができます。また、データドリヴンなサイト改善を積極的に行っていくと、「デザインの個性」と成果に大した因果関係がないことを痛感します。 没個性なデザ
最速・最高のファイルアップロードに近づくための1歩 - Qiita
Webアプリを作っていてよく出くわすのがファイルアップロードですね。単純にアップロードするだけなら実装自体はたいしたことないものですが、より良くしようと思うと想像以上に奥が深く…悩ましい沼感があります🤔 今回は今までファイルアップロードを実装していく中で手に入れた改善ポイントを紹介していきます。これで最速・最高のファイルアップロードに1歩でも近づけられればと思います。 なお、僕が普段開発をしているアーキテクチャの都合上、 nginx Rails の話が出てきますが一部を除きWebアプリなら普遍的に使える話だと思います。 2つの側面から紹介します。 UI編 と パフォーマンス編 です。 UI編は、HTML5を中心に使い勝手を向上させるためのポイントを紹介します。パフォーマンス編ではRailsのファイルアップロードを約10倍高速化⚡️した事例を紹介します。それでは長いですが、よろしくお願いし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
