AIにフルスタックアプリの生成を指示、Webブラウザ上のNode.js環境でそのまま実行できる「bolt.new」、StackBlitzが公開
AIにフルスタックアプリの生成を指示、Webブラウザ上のNode.js環境でそのまま実行できる「bolt.new」、StackBlitzが公開 WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、Webブラウザ上でAIにフルスタックアプリの生成を指示し、そのままWebブラウザ上のNode.js環境で実行やデバッグなどを行える新サービス「bolt.new」を公開しました。 bolt.newはGitHubでサインオンすることにより誰でも無料で試すことができます。 bolt.newの大きな特徴は3つあります。 1つ目は、AIがフルスタックアプリケーションの生成を、必要なパッケージやライブラリの導入からコードの生成、ビルドまで含めて最初から最後まで実行してくれる点。 2つ目は、AIが生成したフルスタックアプリ
ブラウザの仕組み | Articles | web.dev
序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門ガイドは、 イスラエルのデベロッパー Tali Garsiel 氏による多数の研究の結果です。1 ～ 2、3 ブラウザの内部構造に関する公開データをすべて確認し、 あまり時間を費やすことはありません。彼女は次のように書いています。 ウェブ デベロッパーとしてブラウザの操作の仕組みを学ぶ より適切な意思決定を行い、開発の背後にある正当性を理解するのに役立つ ベスト プラクティスをご覧ください。これはかなり長いドキュメントですが、Google に 時間をかけて調査を進めていきます。できてよかったね。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは最も広く使用されているソフトウェアです。この入門編では 舞台裏で働きます「google.com」と入力するとどうなるかを確認し
Open RSS
Feeds served 281,378 We offer feeds for thousands of popular websites across the internet, and we won't stop until every corner of the internet has one. The more feeds we have, the closer we all get to ditching the intrusive, ad-invested algorithmic feeds that harm and manipulate us. So we can follow internet content on our own terms, in feeds that only we control.
Maximum size of a <canvas> element
I'm working with a canvas element with a height of 600 to 1000 pixels and a width of several tens or hundreds of thousands of pixels. However, after a certain number of pixels (obviously unknown), the canvas no longer display shapes I draw with JS. Does anyone know if there's a limit? Tested both in Chrome 12 and Firefox 4.
ServiceWorkerの落とし穴8選 - Repro Tech Blog
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
フリーWi-Fiを使ったら秘密情報を抜かれる経路にはどのようなものがあるか - Qiita
ゴールデンウィークのはじめ（4月29日）に投稿された以下のツイートですが、5月7日20時において、1,938.8万件の表示ということで、非常に注目されていることが分かります。 我が名はアシタカ！スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた。どうすればよい！ pic.twitter.com/e26L1Bj32Z — スタバでMacを開くエンジニア (@MacopeninSUTABA) April 29, 2023 これに対して、私は以下のようにツイートしましたが、 これ入社試験の問題にしようかな。『スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた』と言う事象に至る現実的にありえる脅威を説明せよ。結構難しいと思いますよ。 https://t.co/LH21zphCTV — 徳丸 浩 (@ockeghem) April
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
Herokuの無料枠が廃止になるのでDeta.shへ移行する - Qiita
追記(2023/3/11) 約半年ほどDeta.shで簡単なサービスを運用していたが、先日Deta.shに大幅なアップデートがあり、仕様が大きく変わった。 これによりREST APIを公開して運用することができなくなった。（できなくはないが必ずヘッダにAPIキーを指定する必要がある。そのため例えばLINE Messaging APIのバックエンドとしては使用不可） Detaは”Personal Cloud”を思想に掲げているらしく、何らかのサービスのバックエンドとして使うにはちょっと使い勝手が悪くなってしまった。 というわけで、自分の使い方には合わなくなったため現在はAWSへ移行している。 HerokuのFree Planが終了するらしい(泣) Starting November 28, 2022, we plan to stop offering free product plans a
Rust and WebAssembly without a Bundler | Tung's Word Box
If you're just getting into compiling your Rust code into WebAssembly and want to load it in a web browser, you might be taken aback by the multitude of ways of doing so. This seems to be due to the differing pace of web browsers implementing web platform features over the years. A lot of entry-level guides to using Rust and WebAssembly make use of a JavaScript bundler for convenience, but this ob
Craiyon, AI Image Generator
Frequently asked questions What is Craiyon? How do you keep it free? Can you make images of higher quality? Do you have any tips to create better images? What are negative words? How do you predict a next prompt? What to do when there is too much traffic? Are you related to DALL·E mini? What if images do not appear? How does the AI model work? What about limitations and biases? Can I use the image
一般ユーザに払い出すと危険なサブドメインやメールアドレス - ASnoKaze blog
ユーザに対して、そのユーザ名のサブドメインやメールアドレスを払い出すWebサービスがあります。 しかし、特定のサブドメインやメールアドレスは特別な用途で使われているものもあります。そのようなサブドメインやメールアドレスを一般ユーザに払い出してしまうと危険です。 現在、IETFでは仕様上利用用途が決められている、それらのラベルをとりまとめる「Dangerous Labels in DNS and E-mail」というdraftが提出されています。 今回はそれを眺めていきます。 （あくまでIETFの取り組みであり、仕様上定義されているものをとりまとめています。クラウドサービスや特定ベンダーで特別利用しているものは現在含まれていません。） サブドメイン ここでとりあげるサブドメインは、利用用途が決まってるため一般ユーザに払い出すべきではありません。(例: mta-sts.example.com)
拡張子に Web アプリを関連付ける File Handling API の使い方 - 株式会社カブク
はじめに File Handling API がデフォルトで有効化された Chrome 102 と Edge 102 がリリースされました。この機能により、 MIME タイプや拡張子に Web アプリを関連付けて開けるようになります。派手な機能のわりには全然話題になっていないように感じるのですが、気のせいでしょうか？ 私は DXF（CAD 用のファイル形式の 1 つ）の中身を覗くツールを Web アプリとして作っています。試しに拡張子 .dxf を当該アプリに関連付けられるようにしてみました。 実装 ざっくり言うとこれだけです。 マニフェストに file_handlers フィールドを持たせる スクリプトから window.launchQueue.setConsumer() を呼び出して、関連付けて開かれたファイルを取得する ファイルを取得しさえすれば、あとは <input type="f
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
CSS Cascading and Inheritance Level 6
CSS Cascading and Inheritance Level 6 W3C Working Draft, 21 March 2023 More details about this document This version: https://www.w3.org/TR/2023/WD-css-cascade-6-20230321/ Latest published version: https://www.w3.org/TR/css-cascade-6/ Editor's Draft: https://drafts.csswg.org/css-cascade-6/ Previous Versions: https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/ History: https://www.w3.org/standard
<selectmenu> タグできる子; <select> に代わるカスタマイズ可能なドロップダウンリスト
<select> タグと自作ドロップダウンリスト HTML の <select> タグ（HTMLSelectElement）は制限が多く、ちょっと凝ったことをしようと思うとすぐ <select> では足りなくなります。たとえば、選択肢にテキストコンテンツ以外（アイコンなど）を含めたい、とか、フィルター用の入力ボックスをつけたい、とか、コンボボックスにしたい、とか。複数選択用の <select multiple> は、 PC ブラウザーで見るとポップアップではなく静的なリストボックスになり、 Ctrl + クリックなど複雑な操作が必要になるため扱いづらく、使われることは稀かと思います。 そこで独自ドロップダウンリストを実装することになるのですが、ちゃんと実装しようと思うと面倒です。 セマンティックマークアップ HTML タグ、 WAI-ARIA のロールやステートなど適切に指定します。 キー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Magic UI
UI Buttons
Bunny Fonts | Explore Faster & GDPR friendly Fonts
Macaron | Visual component editor for Web development
Appears to say: Microsoft Edge now provides auto-generated image labels