Intro Ladybird は、他のブラウザエンジンをフォークせず、企業との取引に頼らず、寄付だけで作ることを宣言した新しいブラウザエンジンだ。 Ladybird https://ladybird.org/ これがいかに価値のある取り組みなのか、 Web を漫然と眺めてきた筆者による N=1 の妄言を書いてみる。 ブラウザエンジンとは ブラウザは、「ブラウザ UI」と「ブラウザエンジン」と、大きく二つの構成要素に分けて考えることができる。 ブラウザエンジンとは、いわゆる Web 標準の技術を片っ端から実装した、ブラウザの土台となるものだ。 ビルドすれば、入力した URL からネットワーク経由でリソースを取得し、パースしてレンダリングして表示できる。そのための IETF RFC や WHATWG HTML や ECMAScript が実装されている、標準技術の結集だ。 その上に、例えばタブ
こんにちは、LINEスキマニのフロントエンド開発担当や、フロントエンド開発に関するイベントの運営をしている板井（@itatchi3_）です。 LINEヤフーでは、社員が海外のカンファレンスや学会に参加することを支援する制度があります。これを通じて、最先端技術の情報収集や現地の温度感の調査を行い、得た知見を会社に持ち帰ることで、全社的な技術力向上に努めています。 この制度を活用し、2024年5月13日と14日にアメリカ・サンフランシスコ州マウンテンビューで実施された「Google I/O 2024」に現地参加してきました。 現地のエンジニアと実際に触れ合った中で、その熱意の高さからも重要であると感じ、さらにLINEヤフーでも導入の検討が進められているフロントエンド技術について解説します。 Built-in AI 兎にも角にもAI一色の「Google I/O 2024」でした。AI関連の発表が
「1 分 de Web 標準」のやり方 at Web Developer Conference 2024 #wdc2024 | blog.jxck.io
Intro 9/7 開催予定の Web Developer Conference 2024 では、 「1 分 de Web 標準」という LT 大会を予定しています。 CFP も募集中ですが、(筆者の周り以外では)聞き馴染みのないやり方だと思うので、この LT のやり方を解説します。 プロポーザル | Web Developer Conference 2024 - fortee.jp https://fortee.jp/web-dev-conf-2024/proposal/all 1 分 de Web 標準 「Web 標準」な何らかのトピックについて、 1 人 1 ページ 1 分で LT するというものです。 Slide スライドはこちらで用意する Google Slides を共有し、そこに割り当てられた 1 ページのみを使えます。 その 1 ページは、マスターで振るページ番号以外は、ど
Bun は WinterCG meetings に参加せず、標準から外れた拡張を利便性のために結構取り入れている。またエコシステムとして合意の取れていない実装をすることもある。これら API を使ってしまうと Node.js や Deno、Cloudflare Workers などで扱えず相互運用性の問題となる。知らず知らずのうちに使ってしまわないようにまとめておく。 Jarred Sumner @jarredsumner 2024/02/18 02:45 JS runtimes obsess about web standards but web standards orgs are incentivized to only care about browsers Luca Casonato 🏳️🌈 @lcasdev 2024/02/18 05:48 @jarredsumner J
2024年6月22日(土)に第一回の「Hono Conference」を東京で行いました。Honoに焦点当てたトークのみで構成されるイベントとしては初の試みです。ですので、"Our first step"という副題をつけました。100人が参加し、イベントは大成功に終わりました。 この記事ではHono Conferenceについてレポートしたいと思います。 会場 会場はdocomo R&D OPEN LAB ODAIBAさんにお借りました。開放感がありとても素敵な会場でした。ありがとうございます！ 参加者 以下のページで参加者を募りました。 定員90人のところ、140人の希望者がいました。人気のほどが伺えます。当日は、発表者も合わせて100人が参加しました。 Honoを以前に使ったことがあるか？という質問にほぼ全ての人が手を挙げていたのが印象的でした。 トーク イベントは午後1時から4時30
Hono Conference 2024参戦レポート
こんにちは、あさひです。 今回はナウでイケてると話題？の Hono のカンファレンスに潜入してきましたので雰囲気やどんな流れだったかをまとめようと思います。 Hono🔥 って？ Hono - means flame🔥 in Japanese - is a small, simple, and ultrafast web framework built on Web Standards. It works on any JavaScript runtime: Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js. 公式のドキュメントには上記のようにあります。 様々なランタイムで動く Web 標準のシンプルで高速なフレームワークです。 筆者自身
Conformで作るWeb標準なフォーム
Conformの概要 Conformは、RemixやNext.jsのようなフレームワークをサポートしており、クライアントサイドとサーバーサイドのフォームバリデーションを同じ記述で書くことができるライブラリです。RemixやServer Actionsの台頭により、ZennでもConformを紹介する記事がいくつか投稿されています。 今回は「Conformを使うとWeb標準なフォームを作ることになる」という別の観点でConformについて紹介します。ReactではJavaScriptでフォームの状態を管理することが当たり前になっており、仮にフォームのマークアップが正しくなかったとしても入力〜バリデーション〜送信まで機能を作ることができてしまいます。 SPA時代からエンジニアになった自分のようなエンジニアは、正しいフォームのマークアップを知らないことが多いかもしれません。Conformが生成す
木村 浩康さん Rhizomatiks / Flowplateaux / アートディレクター / Webデザイナー 技術と表現の新しい可能性を探求し、研究開発(R&D)要素の強い実験的なプロジェクトを中心に、人とテクノロジーの関係について研究しながらデザインプロジェクトや作品制作を行うクリエイティブチーム「ライゾマティクス」に所属するデザイナー。デザインワークにおいては、印刷物からオンスクリーン(デジタルメディア)まで一貫したアートディレクションを手掛ける。文化庁メディア芸術祭最優秀賞など多数受賞 X Facebook Instagram Webの特性を熟知した上での書体の選定 年に一度しか買えない希少な出雲そば「神在月」｜本田屋 https://sobahonda.com/kamiarizuki/ 商品を取り扱うWebサイトとなると、商品そのものの印象と、使用する書体の印象を揃えるのはと
初学者が、Vite, Cloudflare D1, Drizzle, Remix で個人開発してみてよかったこと・わるかったこと - Qiita
初学者が、Vite, Cloudflare D1, Drizzle, Remix で個人開発してみてよかったこと・わるかったことcloudflareReactRemix未経験エンジニア個人開発 ラジオ好きの方に向けたサービスを作りましたので、ぜひ使ってほしいという一心で記事を執筆しました。また、未経験初学者のなかではすこし珍しめな技術スタックを採用してみて感じた「よかった点、むずかしかった点」についても記載しました。（技術面での採用というよりかは初心者の個人開発における苦労ポイントとなっています、ご了承ください） Reactを中心に学んでいる初学者の人 個人開発におけるReactフレームワーク悩み中の人 ラジオ、お笑い好きの人 にぜひ読んでいただきたいです。 開発したのは、ラジオの切り抜きシェアプラットフォームサービスです。 コードはこちらです サービスの説明 利用イメージ ラジオの切り抜
はじめに こんにちは。NTTテクノクロスの鈴木雅貴です。当社製品やソリューション、受注案件を中心とした成果物をはじめとして、イベントやらコミュニケーションといった社内のあれこれを、デザインの力でよくしていくというチームのリーダをしています。個人としてはWeb標準技術まわりのスキルで生きており、HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.5対応版のいち著者だったりします。 シリーズ1の14日目ではダークモード実現のための新機能を紹介しました。 今日は、2023年11月のFirefox 120で主要ブラウザの実装が出揃った、CSSの新しい長さの単位であるlhとrlhを、使い方例とともに紹介します。 lhとrlhとは CSSの長さの単位です。MDNのlhとrlhの解説はこちら 相対的な長さのところにあります lhは、line-heightと同じ長さを表します。
Apple、ついにiPhone/iPad向けSafari・WebKitで通知をサポート ～ 更にAV1コーデックもサポートへ - Nishiki-Hub
錦です。 Appleが現在ベータテストを行っている「Safari 16.4」及び「iOS 16.4」について、ちょっと面白そうなのでまとめます。 通知サポート ホーム画面に追加 AV1コーデックをサポート 関連リンク 通知サポート iOSやiPadOSのブラウザは原則WebKitを利用することが強制になっています。そのため、WebKitで機能が追加されないとどんなブラウザでも対応できないWeb標準があるものです。その一つが通知機能でした。WebアプリケーションはNotification APIを利用してブラウザから通知を送ることができます。この機能は、Chromeはもちろん、Chromeと処理系統が同じEdgeや、競合するFirefox、そしてMac版Safariで対応していましたが、モバイル向けSafariでは対応していませんでした。それが今回対応します。 なお、注意が必要なのは通知機能
こんにちは、エンジニアの中島です。 この記事は2024年4月〜6月のLIFULL社でのアクセシビリティ改善およびやっていき活動の報告です。 この活動報告は月次で出すかもしれないし出さないかもしれないくらいの温度感で運用されています。 目次 目次 サービス改善 取扱物件検索の検索方法選択タブのボタン化 物件登録画面(賃貸のみ)のタブのボタン化とテーブル文脈の破棄 物件登録画面(賃貸のみ)内のダイアログのキーボード操作を可能に 物件登録画面(賃貸のみ)内の郵便番号からの住所入力補完機能をキーボード操作可能に 物件登録画面(賃貸のみ)内の画像登録UIをキーボード操作可能に 取扱物件一覧(賃貸のみ)内のフォーカス不能なボタンを修正 育成・啓発の取り組み 新入社員研修 アクセシビリティ1on1 WCAG解説書 輪読会 社内表彰 お知らせ サービス改善 本期間中の改善取り組みのターゲットはLIFULL
クロスプラットフォーム対応のキーボードランチャーアプリ「Ueli」が6月21日（日本時間）、v9.0.0へとアップデートされた。5年ぶりのメジャーバージョンアップとなる。 【画像】［Alt］＋［Space］キーで手軽に呼び出せる 「Ueli」は、［Alt］＋［Space］キーで手軽に呼び出せるオープンソースのランチャーアプリ（ライセンスは「MIT」）。キーボード入力でアプリ検索し、すばやく起動することができる。Webブラウザー「Chromium」（「Google Chrome」や「Microsoft Edge」のベースとなっているアプリ）を活用したアプリケーションフレームワーク「Electron」で開発されており、Windows/Macに対応するほか、Web標準技術で機能を拡張できるプラグインシステムを備えるのが特徴だ。 「Ueli 9.0」では、新たにLinuxをサポート。ライト・ダーク
SEOに強いホームページとは？Googleの認識や大切なポイント、対策法を解説｜大阪のホームページ制作会社セブンデザイン
ホームページを制作したら、高いSEO効果を実現したいと考える会社は多いと思います。 しかし、SEOに強いホームページとするための対策法を調べても、どのホームページも「良質なコンテンツを作成することが大切」と書かれており、具体的な対策法が見えないとお悩みの方も多いのではないでしょうか。 当ページでは、SEOに強いホームページとは何かや、GoogleがSEO効果を高めたいホームページとは何か、大切なポイント、対策法を解説します。 SEOに強いホームページとは、WebマスターがGoogleから集客したいビジネスに関係したすべての検索キーワードで上位表示されるホームページのことを言います。 これまでさまざまなホームページを制作してきましたが、SEOに強いホームページは、集客力の高さはもちろんですが、昨今のGoogleはユーザー目線のホームページを評価しているので、成約率も高い特徴が見られます。 す
Google I/O 2024 注目のフロントエンド技術
こんにちは、LINEスキマニのフロントエンド開発担当や、フロントエンド開発に関するイベントの運営をしている板井（@itatchi3_）です。 LINEヤフーでは、社員が海外のカンファレンスや学会に参加することを支援する制度があります。これを通じて、最先端技術の情報収集や現地の温度感の調査を行い、得た知見を会社に持ち帰ることで、全社的な技術力向上に努めています。 この制度を活用し、2024年5月13日と14日にアメリカ・サンフランシスコ州マウンテンビューで実施された「Google I/O 2024」に現地参加してきました。 現地のエンジニアと実際に触れ合った中で、その熱意の高さからも重要であると感じ、さらにLINEヤフーでも導入の検討が進められているフロントエンド技術について解説します。 Built-in AI 兎にも角にもAI一色の「Google I/O 2024」でした。AI関連の発表が
#Ladybirdブラウザとは何か?非chromiumの真に独立したWebブラウザをゼロから構築するための進行中のプロジェクト #六21
#Ladybirdブラウザとは何か?非chromiumの真に独立したWebブラウザをゼロから構築するための進行中のプロジェクト #六21 https://github.com/LadybirdBrowser/ladybird より 天道虫 天道虫 web 標準に基づく新しいエンジンを使用して、真に独立した Web ブラウザです。 重要 Ladybird はアルファ前の状態にあり、開発者による使用にのみ適しています 特徴 私たちは、現代のウェブのための完全で使いやすいブラウザを構築することを目指しています。 Ladybird は、メイン UI プロセス、いくつかの WebContent レンダラー プロセス、ImageDecoder プロセス、および RequestServer プロセスを備えたマルチプロセス アーキテクチャを使用します。 イメージデコードとネットワーク接続は、悪意のあるコン
TypeScript + Node.js + D3.js を使って白地図に自転車で訪れた市町村のみを塗りつぶすプログラムを作った - muscle_keisukeの日記
はじめに 何を使うか D3.jsとは D3.jsで白抜き地図を出力してみる 地図データの取得 TopoJSONとGeoJsonとは TopoJSONを読み込む SVGを出力する TopoJSONからGeoJSONに変換する GeoJSONを元にSVGを出力する 指定の市町村によって塗りつぶす色を変える StravaのGPSデータから訪問した市町村を取り出して塗りつぶす色を変える 中心の緯度経度をTopoJSONから算出する 描画範囲全体がバランスよく出力される倍率を求める SVGからPNGに変換する はじめに 自分は自転車でツーリングで行った後は 思い出にふけるために白地図に対して通った市町村などをポチポチ塗りつぶしたりしてニヤニヤしたりしてました。 ↓ ポチポチしてたときに使ったサイト n.freemap.jp ↓ ニヤニヤしてたときのツイート 通過した市町村 千歳市 恵庭市 札幌市 小
ホームページは、デザインを作成しただけでは終わりません。 デザインを基にして、HTMLやCSSなどのコーディングを行って初めて、ホームページとしてインターネットに公開することができます。 当ページでは、コーディングとは何かや、コーディングの考え方、費用例、SEO効果との関係性を紹介します。 ホームページ制作におけるコーディングとは、ブラウザで適切に表示させるために、HTMLやCSS、JavaScript言語を利用して、コンピューターでも理解できるソースコードを作成することを言います。 単にJPGデザインをインターネットに公開すれば良いと考える方もいると思いますが、それではSEOを行えなかったり、レスポンシブウェブデザインに対応することができない、画像の容量が大きすぎてスムーズにホームページを表示ができないなど、さまざまな問題が発生してしまいます。 そのため、ホームページ制作にコーディングは
マイクロソフト、JavaScriptライブラリ「「Babylon.js 7.0」でMMD（MikuMikuDance）やApple Vision Proサポート（テクノエッジ） - Yahoo!ニュース
マイクロソフト、JavaScriptライブラリ「「Babylon.js 7.0」でMMD（MikuMikuDance）やApple Vision Proサポート マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 7.0」正式版をリリースしました。 MMD（MikuMikuDance）のサポート Babylon.jsは、2022年にリリースされたバージョン5.0で、GPUを用いて高速な描画を行う最新のWeb標準であるWebGPUにフル対応し、2023年に登場した6.0ではWebAssembly化した物理演算ライブラリによる物理演算性能の大幅な向上などを実現してきました。 今回のBabylon.js 7.0ではこれらを基盤とした多くの新機能が追加されていま
Python対応を強化した「Visual Studio Code 1.91」がリリース ～2024年6月更新（窓の杜） - Yahoo!ニュース
米Microsoftは7月6日（日本時間）、「Visual Studio Code」の2024年6月アップデート（v1.91.0）を正式公開した。このリリースでは、「TypeScript 5.5」を同梱。正規表現の構文チェックなどの言語機能が利用できるようになった。他にも多くの新機能や改善が導入されている。 【画像】「TypeScript 5.5」のおかげで、正規表現の構文チェックなどが行えるように ■ Python対応の強化 まず「Python」関連では、新しい環境検出ツール「Python environment tools」が導入された。このツールは「Rust」製で、必要なすべての環境情報の収集を一度で行い、I/O操作を最小限に抑えることで、全体的なパフォーマンスを大幅に向上させる。 また、「Visual Studio Code」ネイティブの「REPL」へコードブロックを送る「Smar
Babylon.js x Hono x Fresh x Deno で作る 3D モデリングツール - 虎の穴開発室ブログ
皆様、夏をいかがお過ごしでしょうか？ 奥谷です。 本記事は虎の穴ラボ2024年夏の連載ブログ 13日目の記事です。 前回は、godanさんによる「刺繍ミシンで日本語を刺繍しよう」でした。 次回は、m.mさんによる「画像ファイルをまとめてWebPに変換しよう！」が投稿予定です。 今回は、Babylon.js と Hono と Fresh とDeno を使って、3D モデリングツールを作ってみました。 https://pile-up.deno.dev/ にアクセスして、遊べます。 pile-up.deno.dev とりあえずソースコードを全部見たい！という方は、こちらからどうぞ。 github.com 3D モデリングツール 『Pile-Up』 今回の3Dモデリングツールは、Babylon.jsが提供するCSG（Constructive Solid Geometry）を3Dモデルを構築します。
サービスワーカーとは何ですか？ サービスワーカーは、ウェブアプリケーション、ブラウザ、および（利用可能な場合）ネットワーク間のプロキシサーバーとして機能します。サービスワーカーは、ソースとパスについて登録するイベントベースのワーカーであり、JavaScriptファイルの形式を取ります。サービスワーカーは関連するウェブページ/サイトを制御し、ナビゲーションとリソースリクエストを傍受して修正し、リソースを非常に詳細にキャッシュすることができます。これにより、ウェブアプリがどのような状況でどのように動作するかを完全に変更することができます （最も代表的な状況はネットワークが使用できない場合です)。 サービスワーカーのライフサイクル ダウンロード インストール アクティベーション ユーザーがサービスワーカーが制御するサイト/ページに初めてアクセスする瞬間、サービスワーカーは即座にダウンロードされま
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待 | blog.jxck.io
Google I/O 2024 注目のフロントエンド技術
Bun の非互換な拡張 API - moriken's project
Hono Conference 2024 - Our first step
Rhizomatiks 木村浩康さんが選ぶ「書体がいい」サイト5選 | Web Designing
CSSの新しい単位lhとrlhを便利に使おう - Qiita
2024年4〜6月 LIFULLのアクセシビリティへの取り組み - LIFULL Creators Blog
キーボードランチャー「Ueli」がv9.0に ～5年ぶりのメジャーバージョンアップ（窓の杜） - Yahoo!ニュース
コーディングとは？ホームページ制作前に知りたい考え方｜大阪のホームページ制作会社セブンデザイン
BEサーバーを通さず、FEをテストする方法 - Qiita