丁寧なDeno+JSX - laiso
*1 サーバーレスFunctionsぐらいの気軽さでサーバーアリのWebアプリをデプロイしたいという時がある。主に自分たちだけが使うようなツール系のやつ。 その時に今までのようにSPA+APIアーキテクチャではなく、モノリシックなサーバーサイドアーキテクチャにしつつもフロントエンド開発と同じツールチェインを使いたい、と前から思っていた。 これは単にReactメタフレームワークでも一気通貫に時短で作れそうだけど、個人の楽しみのための活動なので、一旦世間のトレンドからは離れて自分が本当に必要だと思った要素技術のみを最小限に使って理解しながら試行錯誤したい。 ※ただ第三者に提供するシステムとかは安全に作られた既存フレームワークに乗るのがいいというのもある しばらく考えてみたところ、私にとっては「TypeScriptでJSXをテンプレートエンジンに使ってHTMLを書けるだけでよい」という所に落ち着
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 Misskeyでは、新機能の追加や改修・バグ修正はもちろんですが、運営者がより少ないコストでサーバーを維持できるよう、Misskeyのスケーラビリティ改善も継続して行っています。 今回はそういった最近のMisskeyのパフォーマンス改善の取り組みについて紹介します。 Fan-out Timeline Misskey v2023.10.0[1]では、以前より検討を重ねていた、タイムラインのアーキテクチャをPull型からPush型に変更する改修を行いました。 Note：MisskeyではこのPush型アーキテクチャ実装を「Misskey®︎ Fanout Timeline Technology™︎ (FTT)」と名付けています。お察しのように、Intel社の技術のネーミ
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
はじめに 執筆現在、「なんだかよくわからんけどすごいフレームワークだ」みたいに巷で噂になっているnue.jsというフレームワークがどんだけすごいんかを動かしながら試してみます。 なんだか Vue やら React やらのJavascript系フレームワークを全て食ってかかってお釣りが出るようなくらいすごいフレームワークだと聞いています。知らんけど。 なお、読み方はよくわかりません。「ヌエ」と書いてある記事もあったりするが、公式にはドイツ語のneueから来ているそうで「ノイエ」と読むのかもしれません。ノイエというと何かの精神を具現化した素晴らしい兵器とかソロモンに帰ってきたあの人を彷彿とさせますがきっと気のせいでしょう。 ネイティブの発音を調べてみると「ノイエ」というよりは「ノイヤ」が近いかなと思います。 追記 2023.10.01 公式のFAQでは以下のような記載になっています。（なお初版
Translations: Korean Russian I was a bit out of touch with modern front-end development. I also remembered articles about web bloat, how the average web page size was approaching several megabytes! So all this time I was living under impression that, for example, if the average web page size is 3 MB, then JavaScript bundle should be around 1 MB. Surely content should still take the majority, no? W
previs: 面倒なマークアップは AI にやらせる
自分はフロントエンドのロジックを考えるのは得意なんですが、CSS は苦手です。 なので 自分は AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その生成結果を受けいれるかどうかの判断だけすればよくね？と考えて、それを CLIとして実装してみました。 ボタンの色を書き換えるという簡単な例ですが、こんな感じで動きます。 主に React Component の修正をターゲットにしていますが、class(Name) を書き換えることを優先するプロンプトを与えているので、ロジックを保ちつつ、見た目を綺麗にするためのツールになっています。 実装した背景 vscode ターミナル上で画像を表示できる OpenAI API はgpt-4-vision-preview のモデルで画像をアップロードして認識させることができる これらを使って、vscode terminal で実行することを前提
2023/11/21 開催の「技術的負債に向き合う Online Conference」(主催 : ファインディ株式会社)で登壇したスライドです。 https://findy.connpass.com/event/297813/ Chatworkのフロントエンドは一画面で18万行を超えるSPAです。プロダクトとしては12年目であり、技術的負債とも向き合う必要があります。 このセッションでは、Chatworkが機能開発を行いながら、安全かつ段階的に移行するために取り入れている手法や、技術的負債についての向き合い方をご紹介します。
完全招待制のオンラインカンファレンス「PIXIV MEETUP 2023」。「創作活動を、もっと楽しくする。」というミッションを遂行するために、メンバーが普段行っている業務について、自らの言葉で語り、その想いと技術を共有する場です。sue445氏は、 ピクシブ社における、パブリッククラウド活用の取り組みについて発表しました。全2回。前半は、sue445氏が入社後に取り組んだ、GitLab CIのオートスケール化やTerraform導入などについて。 登壇者の自己紹介 sue445氏：「pixiv Cloud Journey」というタイトルで発表させてもらいます。 こちらの発表資料ですが、先ほど「X」にハッシュタグ付きで流しているので、後から見返したいという方は、そちらのURLをご覧ください。 自己紹介させてもらいます。末吉剛といいます。SNSでは「sue445（すえよんよんご）」というID
data-testidはいつ使うべきか？そもそも使うべきなのか？ | フューチャー技術ブログ
Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。どちらでも getByTestId(ID文字列) メソッドを使い、この属性値を使った要素の取得が行えます。しかし、ドキュメントを見ると、PlaywrightもTesting Libraryも、「他の手法が使えないときの最終手段」としています。 In the spirit of the guiding principles, it is recommended to use this only after the other queries don’t work for your use case. Using data-testid attributes do not resemble how your
Intro 2023 年の Web 技術を振り返る試験として、「Web 技術年末試験 2023」を実施した。 その問題と想定解答、平均点などを公開する。 Web 技術年末試験 この試験は、「去年の Web にはどんな変化があったか」「どんな新しい技術が出てきたか」などを、試験形式で振り返るコンテンツを作ってみたことに端を発している。 2022 年はこれを狭い範囲で実施したが、思った以上に評判が良かったため、 2023 は受験者を一般募集してみることにした。 試験形式であるため点数は出るが、目的は「今年はこんなことがあった」を振り返ることや、「こんなことがあったのは知らなかった」という取りこぼしに気づく機会になることである。 解答用紙/想定回答 [解答用紙]: Web 技術年末試験 2023 https://docs.google.com/document/d/1jdN0NsM-PAnYRl
GitHub - taubyte/tau: Open source distributed Platform as a Service (PaaS). A self-hosted Vercel / Netlify / Cloudflare alternative.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
zenn.dev エディタを作っていると iOS Safari でキーボードを開いたときの挙動は本当に大変ですよね。 この記事では、キーボードを開いたままスクロールしてもフッターを固定できるようなワークアラウンドを最近見つけたので紹介します。 Safari 16 以降が必要。キーボード開閉時に追従が遅れる挙動は改善しません。 デモは https://mechairoi.github.io/ios-safari-virtual-keyboard/。iPhone か iOS Simulator でお試しください。 GitHub - mechairoi/ios-safari-virtual-keyboard Virtual Keyboard の挙動 Virtual Keyboard を開いたときには以下のようなことが起こっていると推測しています。 Visual_Viewport_API で取得で
いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web
CSSのmarginをあまり書かなくなった話
この記事は、Lancers（ランサーズ） Advent Calendar 2023 の9日目の記事です。 本記事では、マークアップで、CSSのmarginプロパティをあまり書かなくなった話を紹介します。 Webサービスのレイアウトについて 大きく以下が考えられます。 縦に並べる 横に並べる 絶対配置 さらに、それぞれに対して以下が考えられます。 不規則的な配置 規則的な配置 今回は、縦に並べることに着目して、マークアップを考えてみます。 不規則的な配置のパターン marginを利用する .mt-4 { margin-top: 4px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } <div class="box box1"></div> <div class=
JSer.infoは2024年1月16日で13周年を迎えました。 JSer.info は、JSer.infoというサイト名の通り、JavaScriptの情報を整理して伝えることを目的にしています。 この記事では、JSer.infoの13年間のデータを見ながら、生きているJavaScriptの情報源を整理する方法を紹介します。 今までの JSer.info JSer.infoは13年間で合計676の記事を公開し、12429コのサイトを紹介してきました。 365 * 13 / 676 = 7.01 なので、週一の更新を13年続けてきたことになります。 2023年のJSer.infoで紹介したサイトを見ていきます。 ドメイン別にして紹介回数でソートしてみると次の通りです。 2023年のドメイン別の紹介回数: domain-2023.csv GitHubが30%近く占めていることがわかります。 そ
TL;DR 無駄な買い物チェッカーを作ったよ！緊急度,重要度,欲求度,代替可能度の４軸から無駄かどうかを判断するよ フロントエンドではRemixで開発、フォームライブラリはConformがよかったよ Cloudflareは最高でした。 はじめに どうも、やまぐちです。 エンジニアの皆さん、技術のキャッチアップってどうやってますか？ とりあえずチュートリアルやってみますか？ 技術ブログを読むだけで済ましていますか？ この辺りどうもモチベーションが湧かないんですよね。チュートリアルやっても身についている感覚がないんですよ。 最近Xのタイムラインを眺めていると、React界隈では今はRemixが流行りらしいし、ついでにCloudflareも、安い、速い、便利、で個人開発でめっちゃナウくてイケてるらしいじゃないですか。 んー、モダンでナウい、イケてる技術スタックを使えるようになりたい！！ そんな時
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか 2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 前回の記事の最後で、デザインシステムを構築する際にコンポーネン
移行が大変だもん
Introducing Ruvy
Opens in a new windowOpens an external siteOpens an external site in a new window We’ve recently open sourced a project called Ruvy! Ruvy is a toolchain that takes Ruby code as input and creates a WebAssembly module that will execute that Ruby code. There are other options for creating Wasm modules from Ruby code. The most common one is ruby.wasm. Ruvy is built on top of ruby.wasm to provide some
HTMX とは？ の記事を見ればわかるが、Javascript の知識なしで ajax通信や高度なUIの実装ができるライブラリになっています。 賛否両論はあると思いますが、自分はあまり実装がどうなっているか分からず気になったので、ソースコードを少し見てオレオレHTMXを作ってみることにしました（誰にでも分かるように簡易な実装にとどめています）。 ではまずは、ソースコードを見てみましょう！ HTMX のソースコードを読んでみる HTMX のソースコードは、主に の 3900行程度のコード（2024年1月27日現在）になっています。 最初からこのコードを読むのは骨が折れますが、どうやらエントリーポイントは、 // initialize the document ready(function () { mergeMetaConfig(); insertIndicatorStyles(); var
Intro Referrer-Policy は、送信される Referer の値を制御することが可能だ。 このヘッダの副次的な効果をよく理解していないと、「no-referrer にして送らないのが最も安全だ」という誤解を生むことになる。 では、複数あるポリシーの中でどのような観点で、どのディレクティブを採用するのが良いのだろうか? 前提として前回の記事の「リクエストの出自をチェックすることは現代の実装のベースプラクティスである」という点を踏まえて考えてみる。 令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io https://blog.jxck.io/entries/2024-04-26/csrf.html Referer とアナリティクス Referer は、リクエストに対してその前のページの URL を送るところから始まった。 GET / H
Intlの今までとこれから
JSConf JP 2023 : 2023/11/19 - https://jsconf.jp/2023/talk/ryusei-sajiki-1/
In-browser code playgrounds
I'm a big fan of interactive code snippets in all kinds of technical writing, from product docs to online courses to blog posts. Like this one: In fact, I even built an open source tool called Codapi1 for embedding such snippets. Typically, a code playground consists of a client-side widget and a server-side part that executes the code and returns the result: browser ┌─────────────────────────────
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32％がテストを書かない。JetBrainsによるアンケート調査
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32％がテストを書かない。JetBrainsによるアンケート調査 Kotlin言語やIntelliJ IDEAなどの開発ツールを開発提供しているJetBrainsは、 JavaScriptとTypeScriptに関する調査結果「2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト」を公開しました。 この調査は世界中の2万6348人の開発者からのアンケートを集計したもので、アンケートは2023年に行われています。公開された集計結果から興味深いものを見ていきましょう。 IDEはVisual Studio Codeが過半数のシェア 回答者の半数以上となる51％が、JavaScriptやTypeScriptのプログラミングを行う場合の統合開発ツール
最新のSafari 17.4、日本語の縦書き表示をサポート。Webkitのインラインレイアウトエンジンの全面的な書き換えが完了と報告
AppleのWebブラウザ「Safari 17.4」で、日本語の縦書き表示が可能になった。本バージョンではWebKitのインラインレイアウトエンジンの全面的な書き換えを完了し、相互運用性やパフォーマンスが向上した。 Appleは、3月5日付けでリリースされたiOS 17.4、iPadOS 17.4、現在ベータ版のmacOS Sonoma 14.4などにバンドルされるWebブラウザ「Safari 17.4」で、日本語の縦書き表示が可能になったことを明らかにしました。 AppleはこのSafari 17.4で、過去21年間使われてきたレンダリングエンジンであるWebkitのレガシーなラインレイアウトエンジンをついに廃止し、インラインレイアウトエンジンの全面的な書き換えを完了したことを報告しています。 これにより、最新のWeb標準での相互運用性が向上し、インラインレイアウトのバグが減り、パフォー
ライブラリやツールなどを作っているときに、特定の機能やパッケージを非推奨にする場合があります。 これらの非推奨はリポジトリ上のREADMEやIssueなどに書いても、利用者が気づかないことがあります。 そのため、利用者が気付けるように非推奨の機能やパッケージを使った場合に警告を出す方法を紹介します。 非推奨にはいくつかの段階があり、それに応じてやり方を変えられるので、それぞれの方法を紹介します。 パッケージの非推奨化: npm deprecate <package> <message> コードレベルの非推奨化: JSDocタグの@deprecated 実行時の非推奨化: process.emitWarning() パッケージの非推奨化: npm deprecate <package> <message> npmのパッケージレベルで、そのパッケージが非推奨であることを通知するにはnpm de
Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt
Intro TC39 の Stage 2 と Stage 3 の間に、新たに Stage 2.7 が追加された。 これはなんだろうと思った人が、検索で辿りつけるよう、その経緯と目的をまとめる。 TC39 Stages TC39 は、 ECMAScript (つまりまあ JS) の新機能を議論する Task Group だ。 ここでは、比較的自由に新機能の提案がなされ、定期的に行われるミーティングでの議論や、実装からのフィードバックを経て、 Stage が上がっていく仕組みをとっている。 旧来の Stage は 0~4 まであった。ざっくり言うと以下のようなものだ。
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 今回はHeadless Editor FrameworkであるTiptapのご紹介と、そちらを使ってオリジナルなエディタを作成しようと思います。 Tiptapとは TiptapはHeadless Editor Frameworkと呼ばれています。 これまでWebでのWYSIWYGエディタとしてQuill.jsやDraft.jsなどが存在しました。 これらは文字の装飾や文章の編集に関するUIをデフォルトで提供しており、エディタに特別な機能を追加しようとしたり、UIを大きく変えるというのは少々大変でした。 TiptapのようなHeadless Editor Frameworkは、エディタで必要な機能のコア機能を提供し、必要なUIや機能は拡張機能として追加できるような仕組みになっ
はじめに .NET 8 が先日リリースされて .NET Conf 2023 のセッション動画も YouTube の dotnet チャンネルに投降されています。 .NET Conf 2023 のプレイリストで全て確認できるので興味があるやつだけでも見てみると楽しいのでお勧めです。 今回は、その動画の中の Full stack web UI with Blazor in .NET 8 | .NET Conf 2023 の内容を解説する形で記事を書いていこうと思います。後半の認証や CRUD のページを自動生成してくれる機能については別途余裕があれば書こうと思います。また、記事内の図の多くは、この動画内のものから引用しています。 細かい新機能は色々ありますが、大体の大枠はこのセッションに詰まっているのでとても勉強になります。 Blazor Blazor ですが、ASP.NET Core に完全
Rails: フルスタックRailsの未来（1）Turbo Morph Drive（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: The future of full-stack Rails: Turbo Morph Drive—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/16 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに Web開発コミュニティの「フルスタック回帰」トレンドはますます勢いを増しています
2024/02/21 ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット で発表したスライドです。 https://trident-qa.connpass.com/event/308664/ 参照したURL - https://playwright.dev/docs/test-snapshots - https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions - https://tech.route06.co.jp/entry/2023/03/29/080000
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
3PCA 1 日目: 3rd Party Cookie Advent Calendar Agenda | blog.jxck.io
Intro このエントリは、 3rd Party Cookie Advent Calendar の 1 日目である。 3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiita https://qiita.com/advent-calendar/2023/3rd-party-cookie Agenda 2024 年は、いよいよ 3rd Party Cookie の Deprecation が本格的に開始される。 これは端的に言えば「Web の歴史上最大の破壊的変更」と思って差し支えない。 一方、そのインパクトに対してエコシステム側に万全の準備が整っているかというと、決してそうとは言えない。 そもそも事態を認識していない人もいれば、大した影響を想定していない人もいるだろう。 「3rd Party Cookie が使えないなら、代わりに何か別の
2023年に書いたコード - laiso
「2023年のふりかえり」ではPythonやJavaScriptのコーディングの話ばかり出てくるけど、これって今年全体から見ると1割以下だなぁと思ったのでGitHubのメトリクスを見ながら振り返ることにした laiso.hatenablog.com 言語ごとのコミット数 PHPの話 Laravelの話 開発手法の話 テストの話 GitHub上での活動 2021年 2022年 言語ごとのコミット数 vn7n24fzkq/github-profile-summary-cardsというのが生成してくれたグラフ profile-summary-card-output Python はデータ分析サーバーをFastAPIで書いてるのでその分と、Swiftは記憶にない 他の大部分はLaravel を使った複数のプロジェクトになる PHPの話 PHPの仕事が欲しいわけではないのであんまりPHP書ける人ブラ
TS環境のmangle最適化ベストプラクティス
// in const longLongVar = 1; console.log(longLongVar); // out const o = 1;console.log(o); 主に terser や esbuild のポストプロセスとして行われる。 この記事では mangle のベストプラクティスについてまとめる。本当は jsconf.jp で話したかったが、時間がなかった。 例えば vscode(本体)では外にexportされないプライベートメンバを mangle することで大幅なコード量の削減に成功している。 Shrinking VS Code with name mangling ライブラリ作者やサードパーティスクリプト作者に必要な技術だが、一般的なコードにも適用できる話でもある。何度か自分の発表資料に書いてきたが、単体記事になってないのでここでまとめておく。 極限環境で最終ビル
npm/yarn/pnpm/bunを同じコマンドで扱えるni.zshに、npmで配布されているマルウェアを間違ってインストールするのを防ぐ機能を追加しました。 ni.zshについては、次の記事を参照してください。 npm/yarn/pnpm/bunを同じコマンドで扱える ni のzsh実装を書いた | Web Scratch npmパッケージのマルウェア npmパッケージとしてマルウェアをpublishして開発者を狙うサプライチェーン攻撃が最近多くなっています。 たとえば、次の記事ではemails-helperというもっともらしいパッケージ名でマルウェアが配布されていました。 NPM Package Masquerading as Email Validator Contains C2 and Sophisticated Data Exfiltration 他にもtyposquatting
CSSのネスト記法がFirefox 117でも対応、すべてのモダンブラウザでサポートへ Firefox 117が8月29日リリースされ、このバージョンから、CSSのネスト記法（CSS Nesting）に基本的な部分で対応した。Chrome・Edge・Safariなどでもすでに基本的なサポートは行われており、これでいわゆるモダンブラウザすべてで使えるようになってきた[1]。 CSSのネスト記法を使うことで、あるセレクターのCSS指定内で、Nesting Style Rulesに沿った形でそのセレクターに関するセレクターや@規則を記述できるようになる[2]。 CSSネストが使えない場合には、親のセレクタの記述が必要だった .parent { color: red; } .parent > .self { color: green; } .parent > .self > .child {
Rails 7.1正式リリース。本番デプロイ用のDockerfile自動生成、遅いクエリの非同期化など新機能 Ruby言語によるWebアプリケーションフレームワークの最新版となる「Rails 7.1」正式版がリリースされました。 Rails 7.1: Dockerfiles, BYO Authentication, More Async Queries, and more!https://t.co/c32MdUifNs — Ruby on Rails (@rails) October 5, 2023 メジャーバージョンアップとなったRails 7の登場が2021年12月。 Rails 7は、フロントエンド開発環境が刷新されてNode.jsを用いない構成がデフォルトとなり、TurboとStimulusという2つのフレームワークを搭載したHotwireなどが搭載されるなど、大型のアップデートで
web.dev インフラストラクチャの変更 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 こんにちは、Paul です。 このサイトについてお知らせしたいと思います。 私は、GitHub でホストされている CMS のインフラストラクチャを、Google の多くの異なるチーム間で共有されるインフラストラクチャに移行することにしました。これは、サイトに対するユーザーの関わり方に影響します。その点について簡単に説明します。 このサイトを初めて作成したとき、Google は「ウェブ開発の本棚」を作るつもりでした。サイトで重点を置くべきだと Google が考えたものだけを提供するサイトを作成し、Lighthouse と 110 を組み合わせて使用するカスタム インフラストラクチャを構築しました。そのコンセプトは非常に素晴らしいものでした。ユーザーがサイトをどのよ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Misskeyのパフォーマンス改善の取り組み・2023年11月 | gihyo.jp
UIコンポーネントの大きさは外から制御しよう - Qiita
巷で話題のnue.jsを試してみた - Qiita
JavaScript Bloat in 2024
巨大なSPAの技術的負債と向き合い続けるテクニック(2023年秋)
「僕が今のピクシブのAWSやGCPの形を作ったと言っても過言ではない」 クラウド推進の生き字引が語る、これまでの取り組み
Web 技術年末試験 2023 講評 #web_exam2023 | blog.jxck.io
iOS Safari でキーボード表示時にフッターを固定するもう1つの方法 - *iroi*
いざという時に使える7つのHTML&CSS Tips集vol.2 | BUILD Journal
JSer.info 13周年: JavaScriptの情報源を整理する
最近流行りのRemixとCloudflareをキャッチアップするために一個アプリ作った話
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか | gihyo.jp
Node.js v12 を使い続けていたのはなぁぜなぁぜ？
HTMXの正体が分からないので、オレオレHTMXを作ってみた - Qiita
Referrer-Policy の制限を強めると安全になるという誤解 | blog.jxck.io
Node.jsで機能やパッケージの非推奨メッセージを通知する方法
Vue / Vite 関連ライブラリー名の読み方 2024
TC39 に新設された Stage 2.7 について | blog.jxck.io
Tiptapでオリジナルエディタをつくろう！
.NET 8 の ASP.NET Core Blazor 新機能オーバービュー
Playwright で一番小さく始める VRT と、次のステップの選択肢
CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon
ni.zsh: npmインストール時のサプライチェーン攻撃を検知する機能を追加
CSSのネスト記法がFirefox 117でも対応、すべてのモダンブラウザでサポートへ | gihyo.jp
Rails 7.1正式リリース。本番デプロイ用のDockerfile自動生成、遅いクエリの非同期化など新機能
web.dev インフラストラクチャの変更 | Blog