Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスCSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 2024年4月24日 「NES.css」開発者 ダーシノ SIerでの業務アプリ開発や職業訓練校でのプログラミング講師を経て2015年にさくらインターネット株式会社にフロントエンドエンジニアとしてジョイン。2018年にファミコン風CSSフレームワーク「NES.css」を開発、公開する。人生の目標に「笑って死ぬ」を掲げている。柔道初段。 X ブログ GitHub ファミコン風のデザインのWebページをすぐにつくれる、オープンソースのCSSフレームワーク「NES.css」。フロントエンドエンジニアのダーシノさんが2018年にGitHu
WebAssemblyのガベージコレクションが正式機能に、最新版のChrome 119で。Firefoxも今月リリースのFirefox 120で正式機能になる見通し
WebAssemblyのガベージコレクションが正式機能に、最新版のChrome 119で。Firefoxも今月リリースのFirefox 120で正式機能になる見通し 2023年2月にリリースされたChrome 111から試験的実装となっていたChromeにおけるWebAssemblyのガベージコレクション機能（以下、WasmGC）が、10月31日にリリースされたChrome 119で正式機能になったことが明らかになりました。 Firefoxでも今月（2023年11月）21日リリース予定のFirefox 120においてWasmGCが正式機能になる見通しです。 WasmGCを利用することで、ガベージコレクション機能が言語のランタイムに含まれているJavaなどプログラミング言語をWebAssemblyで実装することが容易になるため、今後WebAssembly上でさまざまなプログラミング言語の実装
先月からXにCSSテクニックを定期的に投稿しているので、それのまとめです。 テキストの中央寄せだからといって text-align:center を指定したほうが良いかは考えたほうがいい ポストを別枠で表示する 和文をtext-align:centerで中央寄せすると複数行になった際に見栄えが悪くなるケースが多いです。 inline-size:fit-contentとmargin-inline:autoでセンタリングすることで、1行の場合は中央寄せ、複数行の場合は左寄せといった実装が可能となります。
Go、Python、Kotlin、Rust、TypeScript の5つの言語について「並列処理、並行処理の手法」というテーマに絞り解説する「並列処理をGo/Rust/Kotlin/Python/JSで解説！思想の違いを体感しよう」。JavaScript編では橘氏が登壇。JavaScriptが疑似的な非同期処理をどう実現しているのかと、JavaScriptの非同期処理の歴史について紹介します。 橘氏の自己紹介 橘ゆう氏（以下、橘）：よろしくお願いします。風邪でめちゃくちゃ顔が死んでいるので、カメラオフでいきます。橘です。今日は「JSの非同期処理パターン Promise、async/awaitを理解する」というテーマについて話していきたいと思います。 簡単な自己紹介ですが、もともとDeNAにいて事業統合でそのままGOに移り、今は森下さん（森下篤氏）と同じチームで、主にサーバーサイドやMLOp
Appleが「iOS・iPadOS・macOS用に3つの異なるウェブブラウザが偶然『Safari』という名前で提供されている」というトンデモ主張でEUの規制を回避しようとしていた
AppleがEUのデジタル市場法による規制を逃れるために、「SafariのiOS版・iPadOS版・macOS版は、名前が同じだけで中身は異なるウェブブラウザであり、使用目的も違う」と主張したことが明らかとなりました。 CASES DMA.100013 Apple – online intermediation services – app stores, DMA.100025 Apple – operating systems and DMA.100027 Apple – web browsers (PDFファイル)https://ec.europa.eu/competition/digital_markets_act/cases/202344/DMA_100027_197.pdf To avoid regulation, Apple said it had three Safari b
フロントエンドの技術選定 ~2023を振り返る~ Lunch LT での発表資料です https://findy.connpass.com/event/306714/
WebAssemblyとWebGPUを用い、Webブラウザ上でStable Diffusion Turbo全体を高速実行可能な推論エンジン「ONNX Runtime Web 1.17」マイクロソフトから登場
WebAssemblyとWebGPUを用い、Webブラウザ上でStable Diffusion Turbo全体を高速実行可能な推論エンジン「ONNX Runtime Web 1.17」マイクロソフトから登場 ONNX Runtime WebがWebGPUに対応。Webブラウザ上でさらに高速な推論処理が可能になった。Stable Diffusion Turbo全体をWebブラウザ上で高速に実行可能で、RTX4090を用いた場合1秒以内で結果が出力される。 ONNX Runtime Webの基になっている「ONNX Runtime」はクロスプラットフォーム対応の推論エンジンです。TensorFlow、PyTorch、SciKit Learnなどをはじめとするさまざまな機械学習のモデルに対応し、これらで生成されたモデルによる推論処理をプラットフォームに依存せず実行するランタイムの役割を果たします
2023年11月24日紙版発売 株式会社ICS 池田泰延，西原翼，松本ゆき 著 A5判／344ページ 定価2,860円（本体2,600円＋税10%） ISBN 978-4-297-13871-4 Gihyo Direct Amazon 楽天ブックス honto ヨドバシ.com 電子版 Amazon Kindle この本の概要 フロントエンド開発の範囲は広く，習得すべき技術は多種多様です。 HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの，Webサイトを制作するのか，Webアプリケーションを開発するのか，その違いによって採用すべき技術は全く異なります。それは，Webの多様性に対して技術的な正解がひとつではないことを示しています。 本書はフロントエンドの技術を俯瞰し，「エンジニアが共通して知っておくべき技術はなにか」，「（多種多様なエンジニアにと
You don't need Node.js
Node.jsはいらない場合がある、むしろいらない場合の方が多いかもしれない、 そしてDenoとBunを使い分けて代替する方法を説明するという記事です。 Post Node.js ランタイムの登場 Node.js のあとにできたランタイムがいくつも登場しています。 Deno Bun WinterJS LLRT この中でも、人気であるDenoとBunを中心に考えていきます。 DenoやBunに変えるメリット これがなければNode.jsから変える必要はないと思います。 私は、以下の3つが、2ランタイムに共通して言える大きなメリットだと思います: ネイティブTypeScriptサポート 高速 Web標準 ネイティブTypeScriptサポート 現在、JavaScriptを記述するときは、TypeScriptを利用することが多いと思います。 Node.jsでTypeScriptを使うとき。tsc
あまりに良かったので即課金した。俺のデイリーAIニュースで活躍しまくり・・・なの、だが、あまりにも便利なのであっという間にポイントを使い果たしてしまった。 また、動画なのだが動画の画像自体にあまり意味がないので本当は音声だけ聞き流しながらじっくりと論文本体を目で追いかけたい。 そう、まるで優秀でやる気満々の大学生インターンが、隣で興奮気味に「これすごいんですよ」とギャーギャー騒いでるかのような反応を聞き流しながら「ふーん」と眺めたいのだが、NoLangだとそういう目的とはちょっと異なる。 そこで、Claude3を使ってChrome拡張を作ることにした。ちなみにChrome拡張を作るのは生まれて初めてではないが人生で二回目くらいだし前に作ったのは10年前くらいだからもはやChrome拡張素人と言える。 Chrome拡張には三つのファイルが必要だ。 まず、適当なディレクトリを作る。 そこに、以
CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む
Honoの今の状況 - ゆーすけべー日記
この記事は2023 JSConf JPで発表したHono v3 and v4を元に11月17日に書いたCloudflare社内のブログ記事「Current Status of Hono」を日本語に訳した記事です。 Honoの「Initial commit」からおおよそ2年が経ちました。このプロジェクトは2021年の12月15日に始まりました。 当初、私はCloudflare WorkersのみのためにHonoを作りました。itty-routerはよかったものの、私が欲しかった多くの機能が欠落していました。また、私は勉強のためにTrie木構造のルーターを作りたかったのです。それがHonoの生まれた理由です。 それから多くのことが起こりました。私がCloudflareにいるのもHonoのおかがです！HonoはCloudflare開発者コミュニティで認知されていきました。Honoの人気が出ること
なぜHTTP/3は急速に普及していったのか、その利点とは？
2022年にインターネット技術の標準を策定する団体のIETFがHTTPの新しいバージョンとして「HTTP/3」を標準化して以降、HTTP/3の利用はウェブの世界で急速に普及していきました。HTTP/3にどのような利点があり、なぜ急速に普及したのかについてウェブに関するエキスパートエンジニアのロビン・マークスさんがAPNICのブログに投稿しています。 Why HTTP/3 is eating the world | APNIC Blog https://blog.apnic.net/2023/09/25/why-http-3-is-eating-the-world/ GoogleやMetaなどの大企業がHTTP/3を採用しているため、GIGAZINEやAPNICのブログ記事の読み込みも含めて多くの通信でHTTP/3が利用されています。通信に利用されているHTTPのバージョンごとの推移を調査し
Puppeteer、テスト自動化の次世代標準「WebDriver BiDi」に対応開始。Firefoxもサポートへ
Puppeteer、テスト自動化の次世代標準「WebDriver BiDi」に対応開始。Firefoxもサポートへ Node.jsでヘッドレスブラウザを用いたテスト自動化のためのフレームワーク「Puppeteer」が、ブラウザ自動化の次世代標準である「WebDriver BiDi」（「BiDi」は双方向を表すため、読みは「ウェブドライバー バィディ」とのこと）への対応を開始しました。 Puppeteerは、ChromiumベースのWebブラウザに対してChrome DevTools Protocolを用いて通信することで、Webブラウザの操作を自動化するとともに、コンソールに表示される情報やログなどの収集、画面キャプチャなどの取得によって、テストの自動化を効率化してくれる機能を備えています。 このPuppeteerが、現在策定中の次世代標準の「WebDriver BiDi」に対応を開始しま
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ
TOPコラム新発見！フロントエンド技術の今フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ 2024年9月2日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念
ブラウザテスト自動化のPuppeteerがFirefox正式サポート、新標準のWebDriver BiDi対応で。これでChromeとFirefoxに両方対応に
MozillaとGoogleは、ブラウザを用いたテスト自動化のためのフレームワーク「Puppeteer」がFirefoxを正式にサポートしたことを発表しました。 PuppeteerはGoogleが開発しており、Chrome DevTools Protocol（CDP）を通じてChromeをリモートコントロールすることでテスト自動化を実現しています。 CDPはWebSocketによる高速な双方向通信、コンソール上のメッセージを取得するなど低レイヤのAPIにも対応するなど、より柔軟かつ高度なテスト自動化を実現できます。 しかしCDPはChromium系のWebブラウザしか実装されていません。FirefoxはCDPのサブセットを実験的に実装してPuppeteerから操作可能ですが、あくまでも非公式なサポートにとどまっていました。 新しい標準のWebDriver BiDiをPuppeteerとFi
AIを使って数分でホームページを作成＆無料公開できる「Solo」をFirefox開発元のMozillaがリリースしたので使ってみた
MozillaがAIを使ってホームページを作成できるウェブアプリ「Solo」を公開しました。Soloを使えば作りたいホームページの内容を文章で入力したりフォントを選んだりするだけで簡単に見栄えのいいホームページを作って公開できるとのこと。どんなホームページを作成できるのか気になったので、実際に使ってみました。 Introducing Solo, an AI website builder for solopreneurs https://blog.mozilla.org/en/mozilla/introducing-solo-ai-website-builder/ Soloはフリーランスの人を主なターゲットとしたホームページ作成ツールです。Soloでホームページを作成するには、まず以下のリンクをクリックしてSoloのトップページにアクセスします。 Solo AI Website Build
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
The Browser Companyが開発するChromiumベースでありながらAppleのプログラミング言語・Swiftで開発されているウェブブラウザ「Arc」が、ついにWindowsに対応しました。近年のウェブブラウザでは主流のタブベースのUIとは異なる操作感が特徴で、ChromiumベースであるためChromeの拡張機能を利用可能、さらにSwiftをWindowsに持ち込むことに成功しているという点でも注目を集めるArcを、実際に使ってみました。 Arc for Windows – Arc Help Center https://resources.arc.net/hc/en-us/articles/19400082392215-Arc-for-Windows Arc on Windows is finally here. No more waitlists, no more be
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案 2023.12.23 スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。 input 要素の switch 属性は 2023 年 12 月現在実験的に実装されている機能です。将来的に仕様が変更される可能性があります。 スイッチ とは
![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f498fff7f14d1f4ab6c565817f30f1ad084c770/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput%255Btype%253Dcheckbox%255D%2520%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AB%2520switch%2520%25E5%25B1%259E%25E6%2580%25A7%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%25E3%2581%2599%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%2520HTML%2520%25E6%25A8%2599%25E6%25BA%2596%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25A4%25E3%2583%2583%25E3%2583%2581%2520UI%2520%25E3%2581%25AE%25E6%258F%2590%25E6%25A1%2588%2FHTML.png)
CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark
今年も残すところあと1月を切り、CSSもこの1年でさらに進化を遂げましたね。 CSSは普段、SCSSを使ってコーディングしている方も多いますが、 CSSの進化により、SCSS不要論も今年チラチラ見られるようになりました。 本当にSCSSがなくても問題ないのか、新しいCSSネストについて調べてみました。 CSSネストの基本 まずはCSSネストがなんなのかというおさらいをしておきましょう。 2つのクラスparentとchildがあり、parentより子の階層にchildクラスが含まれているときだけスタイルづけしたい時、普通のCSSだとこのように書きます。 .parent { min-height: 100dvh; width: 100%; } .parent .child { background: white; }
クッキーに代わる技術まとめシリーズ第1回「3rd-party cookieのない2年後のアドテックに向けた動きまとめ」からすでに３年経っていますが、3rd-party cookie廃止まではあと１年です。 廃止に向けてPrivacy Sandboxの名前で知られている代替技術は一般公開が進められています。Chromeを利用されている皆様はすでにユーザへの広告機能有効化の告知をご覧になり、「理解した」ボタンを押されたかと思いますが、ここで有効化したものを含めて、主要ブラウザの各種代替APIについて説明したいと思います。 Chromeのターゲティングや計測API有効化承諾画面ちなみにEUでは「理解した」と「設定」ではなく、「Turn it on」と「No Thanks」の選択になっています（しかもボタンの色が同じ）。 それでは2021年のシリーズ第2回の投稿から約2年ぶりとなる今回は、前回ご紹
null or undefined #kyotoasterisk とその補足など - Object.create(null)
Kyoto.なんか #6 で発表しました. speakerdeck.com 以下はその補足情報など. 仕様書中の出現頻度 null と undefined がそれぞれの仕様でどの程度使われているのかは, 仕様書中の出現頻度を見るだけでもある程度わかりりそうです. ということで ECMAScript 2024 と WHATWG の標準 (2024-09-07 時点) のうちいくつかの仕様書の中での出現頻度を見てみましょう. Spec #null #undefined ES2024 300 939 DOM 368 120 Fetch 276 10 HTML 1778 275 URL 98 9 見ての通り, 顕著に登場頻度に差があることがわかりますね. なお上記の null の出現数には WebIDL の nullable (T?) を含めていないため, Web 標準における実際の null の
片付けパパ（R）／家電メーカー現役社員／パラレルキャリア研究家／国家資格キャリアコンサルタント／一般社団法人パラレルキャリアマネジメント協会 事務局長・理事／合同会社五方よし エグゼクティブ・アドバイザー／NPO法人 SECIプレイス アンバサダー 「知識創造理論」のキーコンセプト4つ 西原文乃氏（以下、西原）：今日ご紹介するキーコンセプトは4つあるんですが、1つは「知識」。特に形式知と暗黙知の話です。そして2つ目が「SECIモデル」。SECIプレイスやSECILALAとか、先ほどからちらっと出ているSECI（セキ）です。 そして（3つ目と4つ目が）「場」と「実践知リーダーシップ」。こちらの写真は野中郁次郎先生です。2024年5月で89歳になられますが、まだ元気に研究されていらっしゃいます。ここでちょっと質問なんですが、「ナレッジ・マネジメント」を聞いたことはありますか？ 大村信夫氏（以下
CSSの大きな問題点のひとつとして、スタイルが影響する範囲を指定することができませんでした。 そのため一か所だけ書き替えたと思ったら全然関係ないところが崩れたりして、その欠陥をどうにかすべくBEMやらScoped CSSやらStyled Componentsやら解決策が乱立してどうにもならなくなりました。 とりあえずStyled Componentsとかの乱数スタイルシートはユーザスタイルシート適用が困難なのでさっさと滅びろ。 さて先日リリースされたGoogle Chrome 118でCSSが@scopeに対応しました。 なんと、素のCSSで適用範囲を制限できるようになります。 <div class="out"> <span>ここはfooの外</span> <div class="foo"> <span>ここはfooの中、barの外</span> <div class="bar"> <sp
朗報！ これでCSSネストの記述方法がより簡単になります
2023年、CSSにもたくさんの新機能がブラウザに実装されました。そのうちの一つがCSSネストで、現在ではChrome, Edge, Safari, Firefoxの主要ブラウザにサポートされています。 来週リリース予定のChrome 120で、CSSネストがより分かりやすい構文もサポートされ、記述方法が簡単になるので紹介します。 CSS nesting relaxed syntax update by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 要素タグのネスト このネストを可能にするために何が変更されたのか はじめに CSSのネストは、2023年3月にリリースされたChrome 112でサポートされ、現在では主要な各ブラウザでサポートされています。
Googleは「Google Workspace Status Dashboard」において、2024年7月24日22時半過ぎから25日16時半ごろ(協定世界時)までChromeのパスワードマネージャーが正常に動作しなくなったと報じた。影響を受けたユーザーは保存していたパスワードが消え、パスワードを保存できなくなったと報告している。 Google Workspace Status Dashboard パスワードが消えた原因 Googleは今回の件の根本原因を次のように説明している。 予備分析から問題の根本的な原因は、適切な機能保護なしに製品の動作を変更したことにあると判明した。Googleのエンジニアは修正プログラムを展開することで問題を軽減した。今後数日以内に完全修復し、根本原因を明らかにする。 現時点では暫定的な修復ではあるものの、問題は解決したと説明している。また、影響を受けたユーザ
動画共有サイトのYouTubeが、Mozillaのウェブブラウザ「Firefox」やMicrosoftの「Edge」において、意図的にユーザーの動画読込速度を低下させているのではないかとの指摘が寄せられています。 YouTube is reportedly slowing down videos for Firefox users https://www.androidauthority.com/youtube-reportedly-slowing-down-videos-firefox-3387206/ ソーシャルニュースサイトのRedditに投稿された動画では、Firefoxを用いてYouTubeの動画を読み込む際に、約5秒の遅延が発生しています。一方で使用するブラウザをGoogle純正ウェブブラウザのChromeに変更すると、Firefoxで発生していた遅延が消え、動画がすぐに読み込
自分に合ったブラウザー拡張機能を見つけるのはなかなか難しい。興味のあるものを検索して見つけるだけでなく、実際に追加して使い勝手をひとつずつ試してみる必要があるからだ。 Googleが先頃発表した、2023年のお気に入り「Chrome」拡張機能をチェックすれば、そうした手間が少し省けるかもしれない。 Googleはまず、「Get tasks done faster」（タスクを迅速に終える）というカテゴリーで同社お気に入りの5つの拡張機能を挙げている。これらはいずれも人工知能（AI）を活用したものだ。 「Scribe」はAIを用いてユーザーのワークフローを文書化することで、職場でのさまざまなプロセスの訓練を実施するためのガイド作成を支援してくれる。「DeepL翻訳」はウェブページの内容を即座にさまざまな言語に翻訳する拡張機能だ。「QuillBot」は、文章作成時（電子メールの作成や返信）におけ
オープンソースで開発される「Zen Browser」はパフォーマンスを考慮して構築されたウェブブラウザで、「ブラウジングが可能な限り高速になるように最適化されている」というのが特徴です。Zen BrowserはMozilla Firefoxがベースになっており、アルファ版が無償で公開されています。 Zen Browser https://www.zen-browser.app/ GitHub - zen-browser/desktop: 🌀 Experience tranquillity while browsing the web without people tracking you! https://github.com/zen-browser/desktop 上記の公式サイトにアクセスし、「Download Zen Browser」をクリック。 OSを選択して「Continue」
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
Web 標準と、その限界
JavaScript、たくさんバックエンドで使われてますよね、あなたも使ったことはありませんか？ そんな バックエンドでも使われている JavaScript。そこに標準で組み込まれている Web 標準な API 。それを考えていきます。 Web 標準 とは何か Web を構成するための技術として、主に HTML/CSS/JavaScript があります。 どのブラウザでサイトを見ても同じ結果が得られるように、その HTML/CSS/JavaScript をまとめている仕様のことです。 例えば、 HTML の仕様は HTML Living Standard が主流で、 WHATWG という団体が決めています。 JavaScript では、構文や基本的な機能 (Arrayなどの言語使用) は ECMA という団体が ECMAScript を策定しています。この中にはfetchは含まれていないの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Remix vs Next.js - React Japan
2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG
ブラウザ上のJavaScriptでの非同期処理を、今までどのように実現してきたか 「コールバック地獄」なども乗り越えてきた歴史
Android版「Firefox」、ようやく拡張機能をフルサポートへ／最大の障害が「Firefox 120」で取り除かれる
RemixでWeb標準を学んだ1年間 / First year with Remix
「X」（Twitter）のインプレゾンビを駆逐しろ！ スパッと報告＋ブロックできるアドオンが登場／「Google Chrome」用、「Microsoft Edge」でも利用可能【やじうまの杜】
フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本
これは捗る! WebページをGPT-4で日本語で要約して読み上げてくれるChrome拡張｜shi3z
CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
Windows版「Arc」がついに登場、ChromiumベースのSwiftで開発されたブラウザの使い心地を確かめてみた
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
SCSSからCSSネスティングに切り替えたい人に贈る3つの罠 - Qiita
3rd-party cookieの引退とブラウザのアドテック進出｜AD EBiS マーテック研究会
知識は「学ぶ」だけでなく「創造」するプロセスが大事 AI時代に人間がスキルを磨くためのポイント
【CSS】スタイルが適用される範囲を限定する@scopeが非常に便利で有能 - Qiita
Google Chromeのパスワード管理に障害、保存していたパスワードが消える
YouTubeがFirefoxやEdgeユーザーの動画読み込み速度を意図的に低下させているとの指摘
グーグルが選ぶ、2023年のお気に入り「Chrome」拡張機能--AI関連が多数
Firefoxベースで高パフォーマンス・高セキュリティなオープンソースブラウザ「Zen Browser」
「確定申告書等作成コーナー」に問題、「Google Chrome」で［次へ］を押しても先へ進めない／国税庁が回避策を案内 【1月19日追記】
HTTP/3に実験対応した「freenginx 1.26.0」が安定版に ～本家「nginx」に動きなし【4月17日追記】／「Apache」と並ぶ市場シェアを誇るオープンソースのWebサーバーシステム
