Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
Web アプリ共通ライブラリ "React Shared Component" の紹介 | Wantedly Engineering Handbook
Wantedly のフロントエンドは React で書かれており、フロントエンドコードは複数のリポジトリに分かれています。 元々は一つのモノリシックなリポジトリでフロントエンドも管理していましたが、新規で作成するページの大部分は新しいリポジトリで書かれています。 そして、この新しいフロントエンドのリポジトリも、企業側管理画面、ユーザー側画面とで分かれています。 一方で、ヘッダーやサイドバー、フッターなどといったナビゲーションなど、リポジトリ間で共通の UI があります。 実装が重複しないよう、それらを Wantedly 共通の React コンポーネントライブラリに切り出しています。 以下は実例です。これらのページは異なるリポジトリで実装されてます。 一方、青色で囲われたヘッダーは共通なので、ライブラリの中で実装され、それを各リポジトリで呼び出しています。
Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ
ページが表示された時に要素をアニメーションで表示させたり、ギャラリーで画像を出し入れするようにアニメーションで表示させたり、モーダルやタブをアニメーションで気持ちよく表示させたり、Webページやスマホアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSのライブラリを紹介します。 CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。 AnimXYZ AnimXYZ -GitHub AnimXYZの特徴 AnimXYZのデモ AnimXYZの使い方 AnimXYZの特徴 AnimXYZは、Webページやスマホアプリで使用されるさまざまなCSSアニメーションを簡単に実装できるMITライセンスのライブラリです。 アニメーションの実装が簡単 アニメーションを作成するのは非常に簡単。例え
JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック
スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。 Shrinking Header on Scroll Without JavaScript by Håvard Brynjulfsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。 デモページ 仕組みは、簡単です。 ヘッダは外側と内側の2
Hotwireのススメ ~React製SPAをフルSSRでStimulusとTurboに書き換えた話~
はじめに 私はフリーランスのプログラマで、普段はwebサイト・webアプリを中心に開発を請け負っています。 私のチームでは、CMSを利用した静的webサイトを制作する場合はNext.jsとvercelなどのPaasを推奨しており、webアプリの制作ではNode.jsまたはPHPでサーバー構築することが多いです。 今回はその中の主にクライアントサイド（フロントエンド）とサーバーサイド（バックエンド）のSPAにまつわる争いを止める（？）内容です。 例によって長いので、時間がない方はブラウザバックを。。。 Hotwireとは サーバーサイドの設定を不要とする、HTML主体のSPAライクな環境を構築するためのJavascriptセットです。 Railsプログラマには馴染み深いturbolinksを起源に持ち、そこに新しいライブラリを追加してリニューアルしたプロジェクトがHotwireとなりました。
Webサイトにモーダルは必要か
これは備忘録であり、閉じた空間で話したことをオープンにしたいと思って公開している記事です。文字起こしでありません。 経緯としては、僕がモーダルの不満をツイートしたのがキッカケで、情報設計の分野の大先輩の稲本さんに、とりあえず不満を聞いてもらいつつ、いっしょに意見を整理させてもらった。 定義 ここでいうモーダルは、「モーダルダイアログ」のことで、他の操作を受け付けない状態、つまり文字通りモード状態になるもの。基本的に全面に被さるダイアログが現れてその他の操作はそれをを閉じるまで不可能になるインターフェイスと定義する。 Webアプリはわかる、しかしWebサイトのそれはわからん まず前提として、Webアプリケーションにおけるモーダルの有用性や必要性は理解できている。そもそもGUIが誕生した初期から存在していて、WindowsやmacなどのOSでも要所々々で今でも採用されているインターフェイスだ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
