Intro Interop 2022 の目覚ましい成果の一つとして :has() の存在がある。 これまでの CSS の限界を突破する、革新的な仕様であり、多くの開発者が期待を寄せる機能の一つだろう。 こうした仕様策定の裏には、必ずと言って良いほど互換性の問題がつきまとい、時にそれはそこまでの作業の蓄積を無に帰すレベルで影響を与える場合がある。 一方それらは Web 開発者が使う時点では解決されており、基本的に気にされることはない。 だからといって、気にする必要がないわけではない。ということを象徴する事件が、今回も裏で起こっていた。 jQuery と :has() :has() は、従来の CSS Selector の常識を変え、子の状態を元に親をクエリすることが可能となった。親から子を見る場合と比べて探索範囲が爆発的に増えるため、非常に実装が難しいとされていた。 Igalia の詳細な調
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って
業務システムでは、入力の速さを求められます。一方で、本当かどうか分かりませんが、「システム利用者はリテラシーが低いこと」を前提に機能要求が積み上がることが多いです。 そんなIMEの辞書のカスタマイズによる入力速度の向上など期待しない中で、入力を速く行えるようにするには…と考えると、フォームごとに専用のキーパッドを用意するとよい場合があります。 また、タブレットで業務システムを使うケースも増えてきました。その入力のしにくさを考えると、やはり専用のキーパッドを用意するとよい場合があります。 keypad 色々、選択肢はあるのですが、カスタマイズしやすいものとなるとあまり見当たりません。jQuery keypadは割と老舗でカスタマイズに関してももよく考えられています。 http://keith-wood.name/keypad.html このjQuery keypadをベースに、キーパッドを設
jQueryからNativeJavaScriptへの変換規則的なTips 1個1個の記事は薄めでも25個で脱jQueryを目指します。 blog：https://q-az.net/ Twitter：https://twitter.com/gzzdino
さて、三日目と四日目に起きたことを書いていくよ！ 三日目も同様にアンカンファレンス形式でスタート ホワイトボード見てもらって分かるかもしれないけど、 Diversity, Documentation, JS Modules, Streams, FrontEnd Packaging, Error Handling などが三日目の議題だった。 JS Modules の話 bower 使ったり jspm 使ったり、 はたまた npm + browserify 使ったりと戦国時代状態のフロントのパッケージモジュールに何使うべきかっていうディスカッション。まだみんないろいろ試してる感じだったけど、 npm + browserify と monolithic な JS library の相性が悪くて、どうするべきかっていう話が一番面白かった。 Workshop 会場にて: package module
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
正直、表示だけするならどれも高機能で大差ないと思う。 ただ、多くのグリッド系ライブラリは、高機能な代わりに遅い＆書きにくかったり、編集機能はあるものの表示→編集モードへの切り替えがもっさりしていたり保存機能が書きにくかったりする。 その中で高速な表示、Excelかのような編集機能を備えているのがSlickGridだ。 「Excelみたいにできないの？」とはよく言われることでその言葉にそんな簡単じゃねーんだよ、とイラッとしたことがある人も多いかと思うが、SlickGridを使うことでお互いストレスフリーな関係を築けるだろう。 では、SlickGridのパワーが実感できる例を紹介したい。 1.パフォーマンス このExampleで表示しているデータは、なんど500,000件である。他のグリッドが数万件表示可能！と言っているそばで、ケタが違う。何せExcel(2003)の限界行より多いんだからビッ
Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね（gif画像参照）。 これのやり方を解説します。 TL;DR textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ textareaの中にDOMを入れても表示されない パッと考えるとtextareaの中にDOMツリーを入れるとそれが表示されるんじゃないか、と思うかも知れません が、ぜんぜんそんなことは無くて、そのまま文字列が表示されてしまいます。 ご存知のようにtextareaやinputは、他の要素のように子要素を表示するのではなく、自身のvalue属性の値を画面に表示する働きをします。value属性は文字列を格納するためのものなのでDOMを入れられないわけですね。 強調用のDOMを重ねあわせる textareaにはDOMをそのまま入れられないので、仕方がなく周り
By Helga Weber ユーザー登録やアカウント作成を行ったあと、登録したメールアドレス宛に仮登録メールや最終確認メールが届く流れになっているシステムはあちこちにありますが、登録時にメールアドレスを間違えてしまうとこのメールが届かず、「もう面倒だからいいや……」と諦めてしまう人が出てしまいます。サービス提供者にとって大きな痛手であるこの「確認メール不達」という事態を減らすため作られたJavaScriptライブラリとjQuery用プラグインが「mailcheck.js」です。 Kicksend/mailcheck · GitHub https://github.com/Kicksend/mailcheck How we decreased sign up confirmation email bounces by 50% - The Kicksend Blog http://blog.
jQuery.textcomplete（デモ） GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 を書いたのも今は昔、いつか続きを書こう書こうと思いながら気がつけば5ヶ月が過ぎました なんか続きを書くのが面倒くさくなったのと、某日本最大レシピ共有サイトの技術部長の人から「OSSにして欲しい」という要請を人伝に受け取ったこともあって、OSS化した次第です。 ライセンス MITライセンス 簡単な使い方 簡単に説明します。詳しくは README を読んでください。 まず jQuery.textcomplete は名前からも分かるように jQuery プラグインになっているので、別途 jQuery が必要です。 <script src="path/to/jquery.js"></script> <script src="path/to/jquery.textcomp
このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。 コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか？ 非同期処理って面倒ですよね。JavaScriptではいわゆる コールバック地獄 というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら
帳票・レポート 日本仕様の帳票開発に必要な機能を搭載したコンポーネント ActiveReports for .NET ActiveReportsJS 表計算・グリッド Excel風のビューと表計算機能を実現するUIコンポーネント SPREAD for Windows Forms SPREAD for ASP.NET SPREAD for WPF SpreadJS 入力支援 快適な入力を実現する日本仕様入力コンポーネントセット InputManPlus for Windows Forms InputManPlus for ASP.NET InputManPlus for WPF InputManJS 多段明細 1レコード複数行&日付表示に 最適なグリッドコンポーネント MultiRowPlus for Windows Forms 戻る コンポーネントセット Visual Studioで利用す
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
jQuery 1.10.0、および 2.0.1 が同時にリリースされました。2バージョン同時リリースとしては最初のバージョンになります。 先週ですが、 jQuery 1.10.0、および 2.0.1 が同時にリリースされました。jQuery 1.x 系と、2.x 系は、お互いに機能的には完全に互換性を保ちつつも、2.x 系は IE8 以前のサポートは捨てて、より高速に、安定して動作させることを目指したバージョンとして、一方の 1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョンとなります。 jQuery 1.10.0 and 2.0.1 Released ： Official jQuery Blog この 2バージョンを並行して開発していく形は、jQuery 2.0 が正式リリースされた際に、今後はこういう形でいくよと予告されていたものですが、今回がその最初のリリースと
<div class="deck-container on-slide-1"> <section class="slide deck-previous"> <h1>My Presentation</h1> </section> <section class="slide deck-current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck-next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit
モバイル用でJavaScriptでアプリケーションを作成できるフレームワークについて比較した記事を翻訳しました。 Comparing HTML5 Mobile Web Framework - Dzyngiri Comparing HTML5 Mobile Web Framework Apr 27, 2012 by Dzyngiri 今年はモバイルWebにとって面白い年になっている。HTML5とCSS3の採択、モバイルブラウザのパフォーマンス向上、モバイルアプリケーションフレームワークの爆発は、モバイルデバイスでのリッチでインタラクティブなWeb体験の作成がこれまでよりも現実的になったことを意味する。PhoneGapのようなラッパを使うことで、iPhoneやiPad、AndroidのネイティブのAppストアでアプリケーションを配布することも可能になった。単一のコードベースでマルチプラットフォ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
