Bevy + WebGPU
Bevy + WebGPUPosted on May 17, 2023 by Carter Anderson ( @cart @cart_cart cartdev ) I'm excited to announce that Bevy's main branch now supports WebGPU rendering on the web! This means you can play with it now by checking out our repo provided you have a supported web browser (WebGPU is still in the process of rolling out). You can also explore our live WebGPU examples. The upcoming Bevy 0.11 rele
Beyond Console.log() – Level up Your Debugging Skills — SitePoint
You may have established a pattern of coding that utilizes a few key tools offered by your browser’s console. But have you dug any deeper lately? There are some powerful tools available to you, and they might just revolutionize the way you work. The Comfort Zone As developers, we like to find a way of working that make us feel efficient. The trap, though, is that we get comfortable with a certain
フロントエンド開発にかかせないBurp
便利ツール 私たちは日々の開発の中で様々な便利ツールを使います。 その中でもBurpは多くの機能を持ち、エンジニアにとってかかせないツールとなっています。 今回の記事ではフロントエンド開発においてBurpがどのように役立つかを紹介します。 Burpとは BurpはPortSwiggerにより提供されているツールで、Professional、Enterprise Editionなどの種類があります。中でもCommunity Editionは無料で提供されており、誰でも公式サイトからダウンロードすることができます。 では早速Burpの使い方を紹介していきます。 Proxy ProxyはBurpを使う上で最もベーシックな機能になります。 準備 Burpを立ち上げ、タブからProxyを選択 Open browserをクリックし、ブラウザを立ち上げる 解析したいページを開く 上記のようにBurpで立
2023/3/15は完全にGPT-4の話題でもちきりでした。 私も触ってみたところ「これはすごい」と思ったので即課金して色々試していまして、 本業の一部であるE2Eの自動テストを書かせたらどうなるんだろう、を試してみました。 条件など テスト対象はHOTEL PLANISPHERE - テスト自動化練習サイト いつもお世話になっております ChatGPTとのやりとりはModel: GPT-4で3/15~16にかけて E2E自動テストを書かせてみた まずは最初の依頼。 次のサイトに対して、自動E2Eテストを作成したいです。 Python, Playwright, pytestのテストコードを書いてください。 https://hotel.testplanisphere.dev/ja/ ChatGPTが出力したPython+Playwrightのコード これに対する返答が以下です。 --ここから
ブラウザのテキスト入力フィールドに関する脆弱(ぜいじゃく)性の分析により、大手企業や官公庁のサイトのHTMLソースコードに平文でパスワードが保存されていることが判明しました。問題を発見した専門家らは、試しに機密データを抜き取れるテスト用の拡張機能を作成したところ、いとも簡単にChromeウェブストアにアップロードできたと報告しています。 [2308.16321] Exposing and Addressing Security Vulnerabilities in Browser Text Input Fields https://arxiv.org/abs/2308.16321 Chrome extensions can steal plaintext passwords from websites https://www.bleepingcomputer.com/news/securi
JavaScriptの活躍の場を広げる「ランタイム」の今
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
Webブラウザから使えるVRお絵描きアプリ「Silk Brush」公開。OSSとなった「Tilt Brush」派生
Home » Webブラウザから使えるVRお絵描きアプリ「Silk Brush」公開。OSSとなった「Tilt Brush」派生 Webブラウザから使えるVRお絵描きアプリ「Silk Brush」公開。OSSとなった「Tilt Brush」派生 オープンソース化されたVRお絵描きアプリ「Tilt Brush」を、WebXR対応ブラウザで使用できる派生アプリ「Silk Brush」が公開されました。Tilt Brush同様のお絵描きに加え、公式ページではSilk Brushで制作したスケッチやモデル、スナップショットをダウンロードすることも可能です。 Silk BrushはWebXR対応ブラウザからアクセスし「VR」を選択することで利用可能。またOculus Quest（オキュラス クエスト）の場合は、同デバイスのOculus Browserから公式ページにアクセスすることで使用できます。
今回はService Meshについて概要を調べ、Service Meshを提供するプロダクトの一つであるIstioに触れてみました。 Service Meshとは マイクロサービスの課題 Service Meshを考えるうえでまず必要になるのが、マイクロサービスアーキテクチャの抱えるいくつかの課題です。 マイクロサービスを導入・構築するうえでの課題として、ネットワークに関連する事項が挙げられます。マイクロサービスはお互いネットワークを通じて連携するため、ネットワークに関する機能（Load Balancing、Traffic Routingなど）を実装する必要があります。また、アプリケーションを構成するマイクロサービスの数が多くなるほど、マイクロサービス間の接続数は増加し、通信断の発生する確率やパフォーマンス低下など、ネットワーク関連の問題が発生する可能性も増加します。 これまで複数のグロ
Open source, runs in VS Code, integrates with existing TypeScript code, browser and Node.js.
REST API Design Best Practices Handbook – How to Build a REST API with JavaScript, Node.js, and Express.js
I've created and consumed many API's over the past few years. During that time, I've come across good and bad practices and have experienced nasty situations when consuming and building API's. But there also have been great moments. There are helpful articles online which present many best practices, but many of them lack some practicality in my opinion. Knowing the theory with few examples is goo
browser-useの基礎理解
はじめに 最近話題になっている browser-use について自己理解のために基本的なところをまとめてみます。 公式リポジトリはこちら browser-use とは？ browser-use は、Python で作られた「AI エージェントがウェブブラウザを操作できるようにする」ためのライブラリです。具体的には、下記のような機能を提供しています。 ビジョン機能や HTML 抽出 ブラウザで読み込んだページの DOM（要素構造）を解析、スクリーンショットやテキスト情報を取得できます。 マルチタブ管理 自動で複数タブを開き、それぞれのタブを並行して操作できます。 カスタムアクション機能 たとえば「特定のファイルを保存」「データベースへ登録」「社内チャットに通知する」など、ユーザー独自のアクションを定義できます。 自己修正機能 操作が失敗したり、要素を見つけられなかったりした場合に、自分で修正
気になるウェブサイトをPocketやInstapaperといった「後で読む」サービスに保存したり、削除されてしまったウェブサイトをインターネットアーカイブで閲覧したりしたことがある人は少なくないはず。無料のオープンソースサービス「Webrecorder」を使うと、閲覧したウェブサイトのコンテンツをそのままキャプチャし、後で閲覧することができます。 Webrecorder | Homepage https://webrecorder.io/ Release Webrecorder Desktop 2.0.1 · webrecorder/webrecorder-desktop · GitHub https://github.com/webrecorder/webrecorder-desktop/releases/tag/v2.0.1 Webrecorderにはクラウド版とデスクトップ版がありま
Deploy applications on Amazon ECS using Docker Compose | Amazon Web Services
Containers Deploy applications on Amazon ECS using Docker Compose Note: Docker Compose’s integration with Amazon ECS has been deprecated and is retiring in November 2023 There are many reasons why containers have become popular since Docker democratized access to the core Linux primitives that make a “docker run” possible. One reason is that containers are not tied to a specific infrastructure or
HTML Tips
In this article, I will share with you some very useful HTML tips. Enjoy! * Post will be updated regularly with new tips! But first, what is HTML? Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Let’s start!
GitHub - rinsuki/play-flv-in-browser: Play FLV in Browser!
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
外からやってくる値から TypeScript の型を守るライブラリ・ツールまとめ - Mobile Factory Tech Blog
こんにちは、新卒エンジニアの id:d-kimuson です 先日 type-predicates-generator という型定義からユーザー定義型ガード・アサーション関数を自動生成するツールをリリースして紹介記事を書いたのですが、感想とかを眺めていたら同じく外部から来た値に安全な型付けをするためのライブラリやツールの情報をいくつも観測しました この辺りのランタイムチェックライブラリの情報ってあまりまとまっていない印象で自分が知らないものもいくつかあったので、調べつつ簡単にまとめられたらなと思ってこのエントリを書きました 外部からやってきた値を型安全にするにはざっくりと 型生成によるアプローチ ランタイムチェック用の独自型を書かせるアプローチ 型情報からランタイムチェック関数を自動生成するアプローチ の 3 つのアプローチがあると思うので、それぞれのアプローチごとに紹介します ① 型定義
Announcing Microsoft Copilot, your everyday AI companion - The Official Microsoft Blog
All Microsoft Global Microsoft 365 Teams Copilot Windows Surface Xbox Deals Small Business Support Software Windows Apps AI Outlook OneDrive Microsoft Teams OneNote Microsoft Edge Skype PCs & Devices Computers Shop Xbox Accessories VR & mixed reality Certified Refurbished Trade-in for cash Entertainment Xbox Game Pass Ultimate PC Game Pass Xbox games PC and Windows games Movies & TV Business Micro
3rd-party cookieもIDFAもないアドテックに向けた動きまとめ 各機能紹介編｜AD EBiS マーテック研究会
Privacy Sandbox等のクッキーレスアドテックに関する前回の記事から１年が経とうとしています。１年間様々なベンダーから提案が公開され、議論も進化のペースが激しく、しばらくまとめを断念していました。今年に入ってからもGoogle (ChromeとAds）やAppleからクッキーレス、IDレスアドテックについて発表が相次ぎましたが、主要提案の開発とリリーススケジュールが明らかになり、発散から収束フェーズに入ったと思われるので、一度状況まとめておきます。 振り返り Privacy SandboxはGoogle Chromeの開発チームが提案する、3rd-party cookieとフィンガープリンティングの代替技術（サイトを跨いだ計測とターゲティング機能、アドフラウド防止機能）およびサイトを跨いだユーザ単位のトラッキング防止機能の総称です。3rd-party cookieの段階的な廃止自
マイクロソフト、.NET中間言語をWebAssemblyにコンパイルする「Jiterpreter」をBlazor WebAssemblyに搭載へ、.NET 8で
マイクロソフト、.NET中間言語をWebAssemblyにコンパイルする「Jiterpreter」をBlazor WebAssemblyに搭載へ、.NET 8で マイクロソフトは今年（2023年）11月にリリースが予定されている.NET 8のBlazor WebAssemblyにおいて、.NET中間言語をWebAssemblyに動的にコンパイルすることで、Blazor WebAssemlbyの高速化を実現する機能を備えた「Jiterpreter」を搭載予定であることを明らかにしました。 BlazorはWebAssemblyで.NETランタイムを実装している そもそもBlazor WebAssemblyは、.NETとC#などを用いてWebブラウザ上で実行可能なWebアプリケーションを開発できるフレームワークおよびランタイムです。 一般にWebブラウザはJavaScriptで記述されたコードを
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以下はAman Varma( Twitter / GitHub / stackoverflow / Webサイト )による記事、12 Super websites to help you with your CSS problems ☺の日本語訳です。 12 Super websites to help you with your CSS problems ☺ これらは、あなたのCSSをより楽しく簡単に装飾してくれる、そしてもしかしたらあなたが躓いているCSSの問題の多くを解決してくれるかもしれないWebサイトたちです。 1. Pixe
Version 1.93 is now available! Read about the new features and fixes from August. vscode.dev(!) October 20, 2021 by Chris Dias, @chrisdias Back in 2019, when the .dev top-level domain opened, we picked up vscode.dev and quickly parked it, pointing at our website code.visualstudio.com (or, if you are from the Boston area like me, we "pahked it"). Like a lot of people who buy a .dev domain, we had n
Storybook をフル活用してテストを実装したその後の話 - Cybozu Inside Out | サイボウズエンジニアのブログ
この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend stage) DAY13 の記事です。 こんにちは、フロリアでエンジニアとして活動している hacchan です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。 以前、そのフロリアのチームの 1 つである Reactone チーム が Storybook をフル活用してテストを実装した話 を紹介しましたが、今回はそのアフターストーリーを紹介します。 Storybook のフル活用はやめた 以前の Reactone チームでは、Storybook の Test Runner を使って、Integration Test を実行するなど、Storybook をフル活用してテストを実装していましたが、新たな領域の刷新を開
画像生成AIのStable Diffusionをインストール不要でブラウザから動作可能な「Web Stable Diffusion」が登場
画像生成AIのStable Diffusionを動かすには十分な性能のGPUとVRAMが求められるため、ハイスペックなPCやワークステーションを使うか、あるいはGPUサーバーにアクセスして演算リソースを借りる必要があります。エンジニア向けに機械学習の講義を配信しているMachine Learning Compilationが、サーバーのサポートを必要とせずにブラウザ内でStable Diffusionを実行できる「Web Stable Diffusion」を公開しています。 WebSD | Home https://mlc.ai/web-stable-diffusion/ Web Stable Diffusionはデモ版が公開されていますが、記事作成時点ではM1あるいはM2搭載のMacでのみ動作が確認されています。今回はM1搭載iMac(8コアCPU・8コアGPU・256GBストレージ・R
Sapling: Source control that’s user-friendly and scalable
Sapling is a new Git-compatible source control client. Sapling emphasizes usability while also scaling to the largest repositories in the world. ReviewStack is a demonstration code review UI for GitHub pull requests that integrates with Sapling to make reviewing stacks of commits easy. You can get started using Sapling today. Source control is one of the most important tools for modern developers,
January 2016 boasted a Powerball jackpot of 1.5 billion dollars. This generated a lot of interest in the lottery and the Los Angeles Times released a simulator where you start with 100 dollars and play until that is gone. I had seen previous work for predicting Java’s Math.random() and thought it would be a fun project to replicate for the browser. The first step is to find the algorithm used in t
手袋を買いに
Your current browser isn't compatible with SoundCloud. Please download one of our supported browsers. Need help?
Seleniumの独自実装が元となって2018年にはW3C勧告として標準化されました。[1] 言葉の使い方が非常にややこしいのですが、ここでいうW3CのWebDriverはChrome Driver, geckodriverといった具体的な実装ではなく、ブラウザを自動化するためのAPIとプロトコルを規定したものを指しています。 Selenium4を例にとるとWebDriver型のツールは次の流れで動作しています。 Driverに対してクライアントから自動化コマンドを送る Driverが実際のブラウザ操作に変換し、ブラウザを自動操作 Architecture of Selenium WebDriver この方式はW3Cの標準が存在しクロスブラウザ対応が容易な点でメリットがあります。一方で仕組み上flakyになりやすかったり、websocketを使った実装に比べて低速であるというデメリットがあ
2013年にEmacsの使いすぎで小指が痛くなってからVimユーザーをやり始めて、かれこれ8年が経つ。 当時書いたvimrcを秘伝のタレ的に使い続けてきたが、正直あんまりまともにプラグインの更新とかをやっていなかったせいで、ある日突然、普通に使ってるだけなのにエラーが出まくって困る状態になった。 Vim の寿命 後ろめたさを感じつつも NeoBundle.vim、neocomplete.vim、Unite.vim といった一世代古いShougoさんウェアを使い続けていて、特に Unite.vim は後述の都合により2014年のバージョンに固定して更新をサボっていたのだが、Unite関係の何かがVim 8.2で動かなくなった*1。macOSではsystem Vimを使うようにしてみたところ、system Rubyが何か壊れているせいでif_rubyで書いている自作のUniteプラグインが常に
Puppeteer +Lighthouse +GitHubActionsで認証付きWebアプリのWebperfを定期計測
Puppeteer + Lighthouse + GitHub Actions を使って Web アプリのフロントエンドパフォーマンスを定期計測するプロジェクトを作ってみたら良い感じだったので紹介です。 何を作った？ このように GitHub Actions 上で 認証付きの Web アプリに対して Puppeteer 介し Lighthouse を定期実行し、結果を Datadog に送信するプロジェクトを作りました。 実際にそのプロジェクトの計測値を使った Datadog のダッシュボードはこちらです。 Webperf の主要指標をページ別に時系列で表示しています。 サンプルプロジェクトはこちらにあります。 以降で実装について簡単に解説します。 Puppeteer + Lighthouse によるパフォーマンス計測 Puppeteer + Lighthouse によるパフォーマンス計測
開発者向けのツールを展開する企業「JetBrains」がドキュメント作成のためのツール「Writerside」を早期アクセスで公開しました。早期アクセスの期間中はWritersideを無料で利用できるとのことなので、実際に使って試してみました。 Writerside - JetBrains が提供する新しい技術文書作成環境。 https://www.jetbrains.com/ja-jp/writerside/ Writersideの公式ページを開き、「ダウンロード」をクリックします。 今回はスタンドアロンツールとして利用するので、「ダウンロード」をクリックします。JetBrains IDEを利用している人はプラグイン形式で導入することも可能とのこと。 インストーラーがダウンロードされるのでダブルクリックして起動します。 「Next」をクリック。 インストールには空き容量が1.0GB必要で
ウェブサイトを作成する際、文字やリンク、画像といったコンテンツの配置を決めるには、閲覧者がどのような「視点移動」を行っているかという情報があると便利です。無料のオープンソースソフトウェア「WebGazer.js」を使うと、スクリプトひとつで自身のウェブサイトに視点移動の追跡機能を実装することができます。 WebGazer.js: Democratizing Webcam Eye Tracking on the Browser https://webgazer.cs.brown.edu/# WebGazer.jsを使用している様子は、以下のムービーを見るとよくわかります。 WebGazer.js: Scalable Webcam EyeTracking Using User Interactions - YouTube まずはWgetコマンドを利用して「webgazer.js」ファイルをダウ
デジタル認知行動療法アプリ Awarefy は、2022年4月からバックエンドシステムを Go + gRPC / Protocol Buffers を用いて開発・運用しています。現在進行中の Web アプリ開発のために、connect-go への切り替えが事実上必要になったため、grpc-go から connect-go へのマイグレーションを実行しました。 Connect とはそもそも Connect とはなにかですが、Better gRPC と理解するのがよいでしょう。 Getting started | ConnectConnect is a slim library for building browser- and gRPC-compatible HTTP APIs.ConnectConnect is a slim library for building browser- an
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
元記事(英語): My Neovim setup for React, TypeScript, Tailwind CSS, etc こんにちは、個人アプリ作家のTakuyaです。 Vim歴はかれこれ10年以上です。 僕はInkdropというMarkdownノートアプリを独りで開発しています。 このアプリはElectronやReact Nativeで組まれており、マルチプラットフォームで動作します。 それらはいつもNeovimを使って開発しています。 約２年前に自分のNeovimで使用しているプラグインについて紹介しました。 あれから結構アップデートしたので改めてまた書きます。 主な違いは設定がLuaで書かれている点です。 また、vim-plugからPackerに移行しました。 ちなみにYouTubeでM2 MacBook AirにNeovimをセットアップする動画を投稿しましたので、併せて
マイクロソフトのVisual Studio Code（VSCode）に、JavaScriptのデバッガーが内蔵された。 Easier browser debugging with Developer Tools integration in Visual Studio Code 画像クレジット: microsoft これまで開発者は、VSCodeの拡張機能として「Chrome Debugger」や「Microsoft Edge Debugger extension」をインストールするのが一般的だった。 これからは、拡張機能をインストールして使用する代わりに、 F5キーを押すか、メニューバーのデバッグアイコンをアクティブにして「実行してデバッグ」を選択だけで、デバッグすることができる。 また、VSCodeのコマンドパレットから「Debug: Open Link」コマンドでも実行できる。 Ed
Want to learn more about Vitess, horizontal sharding, or Enterprise options? Talk to Solutions By Matt Robenolt | January 4, 2023 Over here at PlanetScale, we offer you a MySQL database. As a part of this offering, it is critical that we offer you a MySQL protocol-compatible interface to access. This enables using mysql-client as well as any MySQL-compatible driver for your favorite language. But
Module Federation(以下 mfe)は webpack@5 から入る新しい仕組みの一つです。 Proposal Merge Proposal: Module federation and code sharing between bundles. Many builds act as one · Issue #10352 · webpack/webpack This is a proposal to merge my existing work into the Webpack core. The base concept is federated ap... 目的 アプリケーションを作る時に、webpack はビルド時のソースコードは使う前提で実行するので、様々な最適化を行うことができます。 もし、node_modules 経由以外でライブラリを使うという場合は scrip
Modern CSS For Dynamic Component-Based Architecture | Modern CSS Solutions
Modern CSS For Dynamic Component-Based Architecture Updated on: Apr 24, 2024 Written by Stephanie Eckles The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers. Today, we will
はじめに はじめまして、オクトSREチームの@DanKadoiです。 https://github.com/DanKadoigithub.com 普段は、 AWS上でのインフラ構築 Docker･Kubernetes環境整備 CI / CD サイクルの改善や効率化 プロダクト初期フェーズにおける様々な運用課題の解決支援 インフラやアプリケーションのモニタリングの仕組みを整備 OS、ボリューム、ネットワーク、AWSアカウントのセキュリティ対策 etc.. などの技術領域で、日々少しずつ会社貢献しています。 Terraformを用いたIaC(Infrastructure as Code)や、運用負荷の低減/耐障害性の強化などを目的としたインフラ構成の改善、サーバレスアーキテクチャ(過去記事参照)への移行、開発量･成果･費用対効果･処理効率などを可視化するためのメトリクス取得法の確立、より高度で
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPT（GPT-4）にE2E自動テストを書かせてみた - Qiita
GmailやAmazonでは「HTMLにプレーンテキストでパスワードが保存されている」とセキュリティ研究者が警告
Istioに入門する - TECHSTEP
Flyde | Visual Programming. For Developers.
無料キャプチャソフト「Webrecorder」はブラウザで閲覧した内容を「そっくりそのまま」キャプチャ可能
【西川和久の不定期コラム】 時間がかかるWebでの調べ物をAIに丸投げしよう！「browser-use」の使い方
あなたのCSS力の助けになってくれる素晴らしいWebサイト12選 - Qiita
vscode.dev Visual Studio Code for the Web
Hacking the JavaScript Lottery
次世代のブラウザテスト自動化プロトコルWeb Driver BiDi
8年ぶりに vimrc を書き直した - k0kubun's blog
コード開発と同じようにしてドキュメントが作成できるJetBrains製「Writerside」を使ってみた
無料＆スクリプトひとつでウェブサイトに「視点の追跡機能」を実装できる「WebGazer.js」レビュー
Better gRPC な Connect に乗り換える - Go言語編
2024年9月 俺の eslint.config.js
vim沼: NeovimのReact、TypeScript、Tailwind CSS用セットアップ
VSCodeにブラウザのデバッガーが統合された！F5一発でDevToolsが起動する
Faster MySQL with HTTP/3 — PlanetScale
webpack@5で入るModule Federationについて - hiroppy's site
AWSサポートの一歩進んだ使い方 ~問い合わせの極意編~ - ANDPAD Tech Blog