タグ

JavaScriptとdesignに関するasiamothのブックマーク (82)

  • 本当に必要なのは仮想DOMではなくkeyだけだった - remakejs/remakeの紹介

    拙作SPAフレームワーク remakejs を作るだけ作って解説するのが面倒だったのでAIに書かせたシリーズ第二弾です。例によって指示出しはしたけど直接は書いていません。 当に必要なのは仮想DOMではなくkeyだった はじめに 現代のWebフロントエンド開発において、ReactVueなどの仮想DOM(Virtual DOM)を採用したフレームワークが主流となっています。仮想DOMは、実際のDOMを直接操作するコストを削減し、効率的なUI更新を実現するための手法として広く受け入れられてきました。 しかし、私たちは立ち止まって考える必要があります。仮想DOMは当に必要なのでしょうか? この記事では、remakeフレームワークの設計思想を通じて、「当に必要なのは仮想DOMではなくkeyだった」という主張について探求します。 仮想DOMの課題 仮想DOMは確かに多くの問題を解決しましたが、

    本当に必要なのは仮想DOMではなくkeyだけだった - remakejs/remakeの紹介
    asiamoth
    asiamoth 2025/03/07
    断言するけど、フロント/バック/言語問わず、新規フレームワークでLLMに生成させるなら、すぐに実例が分かるexamplesとデモサイトでしょ……!
  • COLOKSGP - Link Daftar Situs Slot Thailand Terbaik dengan RTP Slot Tertinggi

    COLOKSGP - Link Daftar Situs Slot Thailand Terbaik dengan RTP Slot Tertinggi Sebagai portal atau situs slot server thailand yang resmi dan terpercaya, COLOKSGP telah menjadi pilihan yang sangat tepat bagi para pemain yang ingin memainkan slot gacor dengan lebih aman dan nyaman. COLOKSGP menawarkan berbagai permainan slot online dari provider-provider terkenal seperti Pragmatic Play, Joker123, Haba

    COLOKSGP - Link Daftar Situs Slot Thailand Terbaik dengan RTP Slot Tertinggi
    asiamoth
    asiamoth 2007/12/04
    tableをグラデーションで配色できたりするjQueryプラグイン。手動でやると大変なので、こういったアプローチは有効かと。
  • 2種類のサイト内検索を併用可能に

    サイトリニューアルにあたり、サイト内検索システムを今まで使用していた 「Google Custom Search Engine」 から以前紹介した、「MT 向け Ajax サイト内検索」 に変更しました。 Google Custom Search Engine 自体は良かったのですが、検索結果表示のサイズが、横幅 500px 以下にならないという制約から、新しいデザインではちょっと収まりが悪かったため、今回の変更に至ったわけです。 ただ、この Ajax サイト内検索は、動作が JavaScript によって行われるため、JavaScript が無効な状態だとサイト内検索がまったく使えない状態になるというのが難点。そこで今回は JavaScript が無効な場合でも不便にならないよう一工夫してみることに。 で、どうするかというと、JavaScript が有効な状態では、Ajax サイト内検索

    2種類のサイト内検索を併用可能に
    asiamoth
    asiamoth 2007/11/16
    JavaScriptでFormのActionなどを変更する。なるほど。
  • Ext JSとprototype.jsで作るリッチなUI(1/4) ─ @IT

    Ext JSとprototype.jsで作るリッチなUI:パターンとライブラリで作るAjaxおいしいレシピ(3)(1/4 ページ) 今回は話題のExt JSを使ったサンプル Ext JSはAjaxアプリケーションを構築するためのJavaScriptライブラリ(フレームワーク)です。Ext JSを使用することで、デスクトップアプリケーションのようなユーザーエクスペリエンスを提供できます。2007年10月11日に2.0のベータ版がリリースされ大変注目を集めました。 今回はそのExt JS 2.0のベータ版を使ったサンプルを紹介していきます。 ■ ごく普通の入力フォームのサンプル まずこちらのサンプルを見てください。 今回のサンプルプログラム(拡大表示はこちら、※注意1:FireBugを有効にしている場合は動作が重くなる場合があります。一時的にFireBugをオフにして利用されることをおすすめし

    Ext JSとprototype.jsで作るリッチなUI(1/4) ─ @IT
    asiamoth
    asiamoth 2007/11/11
    jQueryやYUIにも対応している、という点が最もrich。
  • CSSをURIのクエリーで切り替えるJavaScript - KAZUMiX memo

    2008-03-06 追記: jQuery無しで動くように修正しました あるといいかもと思って試しに作ってみたら、IE*1の印刷対応に端を発する問題でえらい苦労しました。苦労話は後回しにするとして、次が動作サンプルページとサンプルコードです。(要jQuery。要素の取得で楽してコードを短くするために使っています) CSSをクエリーで切り替えるJavaScript 動作サンプルページ (function(){ //クエリーにstylesheetがあれば切り替え関数呼び出し if(location.search.match(/\bstylesheet=([\w]+)/)){ var titleValue = RegExp.$1; changeStyle(titleValue); } // CSS切り替え関数 // 引数titleValueと一致したtitle属性を持つlink要素を有効にする

    CSSをURIのクエリーで切り替えるJavaScript - KAZUMiX memo
    asiamoth
    asiamoth 2007/11/10
    jQueryでCSS切り替え。IE対策もバッチリしてあるので、安心して使えそう。
  • http://10coin.com/products/layout-changer/

    asiamoth
    asiamoth 2007/11/10
    これはすごい! 切り替え画面が凝っていてすばらしい。/Via: http://3ping.org/2007/11/06/2244
  • HTML崩壊 meltdown.js - KAZUMiX memo

    #ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ

    HTML崩壊 meltdown.js - KAZUMiX memo
    asiamoth
    asiamoth 2007/11/09
    ものすごいインパクト! なスクリプト。面白い使い方を見付けたい。
  • [JS]画像を使用しないでグラデーションを表現するスクリプト -gradient

    gradientは、画像を使用しないでブロック要素やインライン要素にグラデーションの背景を表示するスクリプトです。 gradient デモページ gradientはjQueryのプラグインで、動作にはjquery.jsとdimensions.jsが必要です。 キャプチャ画像は、gif画像のためモアレがでてグラデーションが汚いですが、実際はきれいなグラデーションで表示されます。 サンプル グラデーションは、始点と終点の色、水平・垂直方向、グラデーションのポジション・開始位置などの指定ができます。

    asiamoth
    asiamoth 2007/11/09
    jQueryでグラデーション。
  • 私の出会ったバグ達 - ブラウザ依存 - AUSGANG SOFT

    最近、Javascriptで開発していて、ブラウザ依存のバグに出会うことが多いので、実例をメモ。 原因と対策は、リンク先を参照されたし。 ifreame上のinput、textareaからキャレットが消えるバグ Windows版Firefoxで発症。 実例 ↑の場合は、背景のオーバレイDIVを消したら、治った。 Bug 226933 - Caret vanishes in input form elements over iframe - lambda {|diary| lambda { diary += 1 } }.call(hatena) http://d.hatena.ne.jp/winebarrel/20070814/p1 透明のオーバレイDIVを表示すると勝手にFlashが消えるバグ Mac版Firefoxのみ発症。 透明度が関連するので、DIVのフェードイン、フェードアウトのエ

    asiamoth
    asiamoth 2007/10/27
    ブラウザ間の差異は、本当にいくらでも出てくるなー。
  • はてなブログ | 無料ブログを作成しよう

    仲春はゆっくりと通り過ぎる 寝て起きたら3月である。今日の東京の最高気温は20度を超えている。正月のインフルエンザが完治して、これでやっと健康で文化的な年度を始められるぞ、と意気込んだのも束の間、今度は原因不明の高熱を出して1週間寝込んだ。 脳がグツグツ煮える音が聴こえそうなほど…

    はてなブログ | 無料ブログを作成しよう
    asiamoth
    asiamoth 2007/10/21
    CSS用の簡易記法。たしかに、機械的にグラデーションを表現したいとき、CSSは力不足だよなー。GJ!
  • JQuery Cycle Plugin

    Check out Cycle2, the latest in the Cycle line of slideshows. Overview The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. How it Works The plugin provides a method called cycle which is

    asiamoth
    asiamoth 2007/10/19
    自動繰り返しのスライドショーを行う、jQueryプラグイン。
  • jquery.toggleElements.js - Toggle HTML-Elements with jQuery

    jquery.toggleElements.js - Toggle HTML-Elements with jQuerytoggleElements is designed to hide informations on your site and show it only when the user requests more information. Features unobtrusive script, simple to setup full customizeable via CSS only a class and a title-attribute must be added to your original HTML nesting toggleElements is possible This page uses jQuery Version Version

    asiamoth
    asiamoth 2007/09/27
    要素をトグルするjQueryプラグイン。
  • https://10coin.com/memo/2007/09/04/102154

    asiamoth
    asiamoth 2007/09/11
    vicuna対応なのがうれしい。
  • アップした写真をお洒落に見せるJavaScript

    久しぶりのJavaScriptネタです。最近は、マック(MBP)で作業することも多いのですが、アップルの提供する.Mac というサービスを使うと簡単に見栄えのよいホームページ(HP)を作成することが出来ます。このサービスはマックを使ってこそ活きるものですが。 で、何種類ものHP向けのテンプレートが予め用意してあるんですが、多くのテンプレには、デジカメで撮った写真を単に貼り付けるだけでなくて、それらをちょこっと斜めにしたり切手風に縁取りしたり出来て、お洒落に演出できるわけです。自分も以前からこういうことをppBlogでしたいなぁとは思っていて、現状、写真っぽく見せたりドロップシャドウを付けたりというのはスタイルシートを使って出来るようにしています。後は、切手風とか写真を少し傾けて貼り付けるとかですが、これらはサーバーサイドのPHPプログラムで画像を加工すれば可能なんだけど、写真をアップする際

    asiamoth
    asiamoth 2007/09/04
    これ、凄く格好いい! jQueryのプラグインになったら、もっと便利そう。
  • [JS]jQueryのプラグイン33+1選 -2007年9月 | コリス

    当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る

    asiamoth
    asiamoth 2007/09/04
    いろいろあるなー。スタイルシート切り替えが便利そう。
  • /IE7/

    IE7.js is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6. This project is now hosted on google code: http://code.google.com/p/ie7-js/

    asiamoth
    asiamoth 2007/08/23
    このブクマのタイトル通り。あんまりメンテナンスされてないようだが、大丈夫かな?
  • https://www.openvista.jp/archives/note/185/?185/

    asiamoth
    asiamoth 2007/08/12
    訪問者が見やすいように調整できるスクリプト。面白いUI。
  • jQueryでブロック要素の高さを揃えてみる - 徒書

    ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば

    asiamoth
    asiamoth 2007/08/03
    おお、これはいい! 「自分なりに」が自分もできるといいなぁ。
  • 12 のレイアウトを切替可能なテンプレート

    1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら (zip ファイル / 50KB) 8/10 追記 初期に配布したテンプレート内に、結構な量の誤字等がありましたので、現在の最新版を下記からダウンロードしてください。 では使い方などの説明を。 ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。 index.html (XHTML テンプレート) cssCSS ファイル格納フォルダ) img (画像ファイル格納フォルダ) js (JavaScript ファイル格納フォルダ) 基的に

    12 のレイアウトを切替可能なテンプレート
    asiamoth
    asiamoth 2007/07/28
    JavaScriptでCSSを切り替える時の動作が凝っている。
  • ブロックレベル要素の高さを揃えるheightLine.js[to-R]

    ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja

    ブロックレベル要素の高さを揃えるheightLine.js[to-R]
    asiamoth
    asiamoth 2007/07/26
    かっちりとしたグリッドデザインに使える。