もし世界が消滅して Visual Studio Code の設定が失われてしまった時に、この記事を見ればまた VSCode のカスタマイズが復元できる。 ここでは Visual Studio Code の見た目に影響するものについてのみ 取り上げる。 スクリーンショット Editor Terminal Zen Mode 環境 Visual Studio Code バージョン: 1.94.2 (user setup) コミット: 384ff7382de624fb94dbaf6da11977bba1ecd427 日付: 2024-10-09T16:08:44.566Z Electron: 30.5.1 ElectronBuildId: 10262041 Chromium: 124.0.6367.243 Node.js: 20.16.0 V8: 12.4.254.20-electron.0 OS
Electron代替を目指す「Tauri 2.0」正式版に到達。デスクトップアプリとモバイルアプリ開発の両方に対応
Electron代替を目指す「Tauri 2.0」正式版に到達。デスクトップアプリとモバイルアプリ開発の両方に対応 Electronの代替を目指すRust製の軽量なアプリケーションフレームワーク「Tauri」の開発チームは、「Tauri 2.0」正式版の公開を発表しました。 Tauri 2.0 Stable. Out now. Read more:https://t.co/wbxWxFpUCj — Tauri (@TauriApps) October 2, 2024 Web技術を用いてアプリケーションを開発できるフレームワークとしては、Elecronが代表的な存在です。 ElectronはChromiumとNode.jsを用いている一方、Tauriは実行環境のOSが備えるWebViewを用い、Rustでバックエンドを記述することで、ChromiumもNode.jsも組み込むことなく軽量なフ
バーチャルスクロールの限界を突破する
はじめに 私は今、CSVエディタ SmoothCSV 3 を開発しています。フレームワークとして Tauri を採用しており、レンダラーにはWebの技術（React + TypeScript）を使っています。 CSVエディタは大量の行・セルを表示する必要がありますが、Webの技術ではこのようなシーンではバーチャルスクロールを使うのが定石です。 SmoothCSVでもバーチャルスクロールを使っていましたが、どうやらこのバーチャルスクロールにも限界があるらしく、数百万行のような極端に大量のデータを表示する場合に最後まで表示しきれない問題に遭いました。 ここではバーチャルスクロールの基本と、その限界をどう乗り越えたかを紹介します。 About Me 株式会社ヘンリーでソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on
フロントエンド開発にかかせないBurp
便利ツール 私たちは日々の開発の中で様々な便利ツールを使います。 その中でもBurpは多くの機能を持ち、エンジニアにとってかかせないツールとなっています。 今回の記事ではフロントエンド開発においてBurpがどのように役立つかを紹介します。 Burpとは BurpはPortSwiggerにより提供されているツールで、Professional、Enterprise Editionなどの種類があります。中でもCommunity Editionは無料で提供されており、誰でも公式サイトからダウンロードすることができます。 では早速Burpの使い方を紹介していきます。 Proxy ProxyはBurpを使う上で最もベーシックな機能になります。 準備 Burpを立ち上げ、タブからProxyを選択 Open browserをクリックし、ブラウザを立ち上げる 解析したいページを開く 上記のようにBurpで立
Tauri 2.0 Stable Release
import CommandTabs from '@components/CommandTabs.astro'; import TableCompatibility from '@components/plugins/TableCompatibility.astro'; import Cta from '@fragments/cta.mdx'; import FeaturesList from '@components/list/Features.astro'; We are very proud to finally announce the stable release for the new major version of Tauri. Welcome to Tauri 2.0! What is Tauri? :::note[Definition] Tauri is a frame
Chrome“一強”、Webの進化は停滞した？「ブラウザの母」が語る、閉塞感を打破する鍵【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスChrome“一強”、Webの進化は停滞した？「ブラウザの母」が語る、閉塞感を打破する鍵【フォーカス】 一般社団法人 WebDINO Japan 代表理事 瀧田 佐登子 国内大手IT企業でUNIX・インターネット事業に携わった後、米 Netscape 社でブラウザ製品の国際化・日本語化に従事。その後、 Netscape のソースコードを引き継ぐかたちで誕生したオープンソースブラウザ Firefox のリリースを機に、米 Mozilla 財団 （ Mozilla Foundation ）が設立されたのを受け、その日本支部として、2004年に Mozilla Japan を設立。代表理事として、 Mozilla の製品・技術の普及のみならず、Web標準技術やオープンソースの推進、Webの新たな可能性の探求や人材育成などにも取り組む。2017年7月より、社名を一般社団法人 Web
Intro HTML の <dialog> 要素と、 popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初に
PR TIMESフロントエンドのCI パイプラインを改善して、CI 処理時間とBillable Time を50%を削減した話 | PR TIMES 開発者ブログ
ここんにちはPR TIMES開発本部のインターンの Chanoknan です。 PR TIMESについてフロントエンドのCI パイプラインを改善についてお話しします。 PR TIMESでは、Reactで書かれたすべてのフロントエンドのコードのコードはMonorepo として管理しています。 そのMonorepoのCI パイプラインは、システム全体のLint、Type Check、Test、Buildを行うようにCIパイプラインが設定されており、これにはかなりの時間がかかり、GitHub ActionsのBillable Timeにも影響を与えます。これを緩和するため、CI処理時間を減らすためのいくつかの戦略を実施しています。詳細については、以下の記事を参照してください。 改善できる点を特定する この作業に取り組む前、私はCIパイプラインやGitHub Actionsについて詳しくありません
Hello friends, this is the first of two, possibly three (if and when I have time to finish the Windows research) writeups. We will start with targeting GNU/Linux systems with an RCE. As someone who’s directly involved in the CUPS project said: From a generic security point of view, a whole Linux system as it is nowadays is just an endless and hopeless mess of security holes waiting to be exploited
ユーザー（手書き入力）を認識する | Web Platform | Chrome for Developers
手書き入力認識 API とは何ですか。 Handwriting Recognition API を使用すると、ユーザーの手書き文字（インク）をテキストに変換できます。 一部のオペレーティング システムには以前からこのような API が搭載されています。この新機能により、ウェブアプリで この機能を使用しますコンバージョンはユーザーのデバイスで直接行われ、 オフライン モードで起動できます。サードパーティのライブラリやサービスを追加する必要はありません。 この API は、いわゆる「オンライン」ほぼリアルタイムの認識ですつまり、 手書き入力をキャプチャして分析することで、ユーザーが手書き入力を できます。「オフライン」とは対照的に、光学式文字認識（OCR）などの手順を用います。 最終製品のみがわかっているため オンラインアルゴリズムは 個々のインク ストロークの時間的シーケンスや圧力などの追加
Microsoftは2024年5月にCopilot＋ PCの目玉機能として操作履歴検索AI「Recall」を発表しましたが、セキュリティやプライバシーに関する懸念の声が大量に寄せられたことを受けてリリース時期の延期が決定しました。そんなRecallに施されたセキュリティ対策やプライバシー対策についてMicrosoftのエンタープライズおよびOSセキュリティ担当ヴァイスプレジデントを務めるデビッド・ウェストン氏が解説しています。 Update on Recall security and privacy architecture | Windows Experience Blog https://blogs.windows.com/windowsexperience/2024/09/27/update-on-recall-security-and-privacy-architecture/
Intro ここまでで <dialog> 要素が標準化され、 Modal/non-Modal な Dialog がネイティブで出せるようになった。 今まで自前で実装していた z-index の指定や、フォーカスの管理、非活性化、キーボードでの処理、スタイルなども、細かい仕様がほぼ標準によってカバーされた。 Top Layer inert :modal / ::backdrop CloseWatcher Focusable Scrollers etc しかし、 <dialog> はあくまで「ユーザのインタラクションを求める」という用途で使うものであり、 role=dialog ではない、例えばちょっとしたメッセージの通知などに使うものではない。 そこで、これらの資産を活用し、より汎用的な UI を標準化しようという話が、 <dialog> の標準化の裏で並行して行われた。 Toast 最初の
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Our container platform is in production. It has GPUs. Here’s an early look
Our container platform is in production. It has GPUs. Here’s an early look2024-09-27 We’ve been working on something new — a platform for running containers across Cloudflare’s network. We already use it in production for Workers AI, Workers Builds, Remote Browsing Isolation, and the Browser Rendering API. Today, we want to share an early look at how it’s built, why we built it, and how we use it
Benchmarking the performance of CSS @property Stay organized with collections Save and categorize content based on your preferences. Published: Oct 2, 2024 When starting to use a new CSS feature it's important to understand its impact on the performance of your websites, whether positive or negative. With @property now in Baseline this post explores its performance impact, and things you can do to
Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up.
Recording of Fabrizio’s demo By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value after the condition no longer applies. ~ Detecting the Scroll-Direction with CSS Scroll-Driven Animations One of the demos that I built as part of the “Solved by CSS Scroll-Driven Animations: Style an element based on the active
Not long ago, if we wanted a tooltip or popover positioned on top of another element, we would have to set our tooltip’s position to something other than static and use its inset/transform properties to place it exactly where we want. This works, but the element’s position is susceptible to user scrolls, zooming, or animations since the tooltip could overflow off of the screen or wind up in an awk
Intro このあたりから、まだ議論中の話が多いため、今後変わる可能性が高い点に注意。 popup が紆余曲折を経て popover 属性になり、 2023/3 に Safari が TP166 で実装した。そのまま Safari 17 に入ることを 2023/6 の WWDC で発表したあたりから、 popover の実装は各ブラウザで一気に話が進む。 Release Notes for Safari Technology Preview 166 https://webkit.org/blog/13964/release-notes-for-safari-technology-preview-166/ News from WWDC23: WebKit Features in Safari 17 beta https://webkit.org/blog/14205/news-from-ww
Intro ついに <toast> -> <popup> -> popup -> popover として、要素から属性になり名前も決まった。 とはいえ実装は popup とそんなに変わらないので、 popup でやっていた Origin Trials を継続しながら、徐々に実装を進めていくフェーズが 2022/12 くらいの話だ。 Intent to extend Origin Trial: Popover API https://groups.google.com/a/chromium.org/g/blink-dev/c/kZXexHhH7EA/m/UmQYwGW3DAAJ しかし、 popover を実用するには足りていない議論があった、それが Animation だ。 Display and content-visibility animations <dialog> や popov
By ading2210 on 10/16/24 Introduction This blog post details how I found CVE-2024-6778 and CVE-2024-5836, which are vulnerabilities within the Chromium web browser which allowed for a sandbox escape from a browser extension (with a tiny bit of user interaction). Eventually, Google paid me $20,000 for this bug report. In short, these bugs allowed a malicious Chrome extension to run any shell comman
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号)
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/8のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Values and Units Module Level 5 CSS Values and Units Module Level 5のWorking Draftリリースの紹介記事です。 Level 5には多くの機能が追加・拡張されており、Level4との差分仕様としてまとめられています。 attr
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ぼくがかんがえた最強の Visual Studio Code カスタマイズ 2024
Dialog と Popover #1 | blog.jxck.io
Attacking UNIX Systems via CUPS, Part I
リリース延期になったWindowsのPC操作履歴検索AI「Recall」に施されたセキュリティ対策の詳細が明らかに
Dialog と Popover #4 | blog.jxck.io
日本語版 Gemma 2 2B を公開
Benchmarking the performance of CSS @property | Articles | web.dev
CSS Anchor Positioning Guide | CSS-Tricks
「Microsoft Edge」にセキュリティアップデート、「Chromium」「V8」の脆弱性を修正／v129.0.2792.79への更新を
Dialog と Popover #5 | blog.jxck.io
Dialog と Popover #6 | blog.jxck.io
Escaping the Chrome Sandbox Through DevTools