ブラウザの仕組み | Articles | web.dev
序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門情報は、イスラエルのデベロッパー Tali Garsiel 氏による多くの研究の成果です。数年にわたり、ブラウザ内部に関するすべての公開データを確認し、ウェブブラウザのソースコードを読むことに多くの時間を費やしました。彼女は次のように書いています。 ウェブ デベロッパーは、ブラウザ操作の内部構造を学ぶことで、より的確な意思決定を行い、開発のベスト プラクティスの背後にある理由を知ることができます。これはかなり長いドキュメントですが、時間をかけてじっくり読むことをおすすめします。やったら嬉しいよ。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは、最も広く使用されているソフトウェアです。この入門編では その仕組みを解説しますアドレスバーに「google.com」と入力し
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
Unity 製 WebGL ゲームを AWS でお手軽公開
この記事は「Happy Elements Advent Calendar 2023」および「AWS for Games Advent Calendar 2023」12月15日の記事です。 はじめに Happy Elements 株式会社でインフラグループのグループリーダーを務めております、長谷川です。 普段は全社横断で AWS, GCP, Azure といったクラウドでのサービス設計・構築・運用を担当するグループのリーダーを担当しています。 Happy Elements カカリアスタジオでは、少人数かつ限られた期間内でゲームを企画から開発まで行うチャレンジプロジェクト「SuperLite アプリ」という取り組みを始めました。 Super Lite アプリでは、新しいチャレンジを希望するメンバーでチームを結成し、およそ1ヶ月程度の作業時間を使って1つのゲームを作り上げます。 限られた作業時間
dl/dt/ddのスクリーンリーダーの読み上げをなんとかする
この記事で取り上げる手法は実験的です。何か問題があった際に、すぐに修正・改善できる立場にないのであれば採用するべきではありません。 期待と異なる読み上げ スクリーンリーダーを使ったことがある開発者ならご存知のとおり、dl要素、dt要素、dd要素の構造はスクリーンリーダーの読み上げにおいては期待と異なる挙動をします。おそらくは歴史的な経緯からそうなっているのだと思いますが、この挙動を理由にdl要素、dt要素、dd要素を使わないという選択をする開発者もいるようです。 現行のスクリーンリーダーの読み上げは概ね以下のような挙動をします。HTMLコメントの部分が読み上げられる内容とします。 <dl> <dt>りんご</dt> <!-- リスト 1/4 りんご --> <dd>バラ科の落葉高木</dd> <!-- リスト 2/4 バラ科の落葉高木 --> <dt>みかん</dt> <!-- リスト 3
【解説】Amazonで売れまくってる「Ankerの格安モバイルバッテリー」、いま買うべきはこれじゃない。｜ずんだもんと学ぶ「激安商品」の実態㊽
今回はいつもと少し方向性を変えて、Amazonの売れ筋ランキングで常に上位にいるAnkerの格安モバイルバッテリー「PowerCore 10000」について解説していきます。〇ご質問やリクエストなどはこちらへ：https://peing.net/ja/saityo_zunda〇音声読み上げ：VOICEVOX https://voicevox.hiroshiba.jp/〇登場キャラクター・VOICEVOX：ずんだもん・VOICEVOX：四国めたん〇動画内で使用させていただいているBGM・fun fun Ukelele：shimtone 様 https://dova-s.jp/bgm/play16650.html・Metal Jingle：shimtone 様 https://dova-s.jp/bgm/play16229.html〇その他素材・pixabay さま https://pixab
なぜHTMLだけなのか。拙著「武器になるHTML」の執筆を通して伝えたかったこと - Shibajuku
こんにちは。 いつも通りのパーマをかけたらトイプードルみたいになった、どうも柴田です。 さてさて、昨年の11月26日に技術評論社さんより「武器になるHTML」というHTMLだけに特化した初学者向けの書籍を出版させて頂きました。 この記事を読んで下さっている方の中にも、すでに本書をお持ちの方もいらっしゃるかもしれませんね。 ご購入頂きありがとうございます！ ひょっとしたら、もう読み終えられた方もいらっしゃるかもですね。 ということで、本書が発売されて半年近く経ちますが、今更ながら、この本をどういう想いで書いて、どんな方に読んで頂きたいのかについて書いてみたいと思います。 目次 初学者の方に向けたHTMLだけの424ページ「とりあえずこう書いておきましょう」は、ありません一人でも多くの人が利用できるWebサイトを構築するために学校やスクールの先生が教科書としても使いやすいように中級者になっても
Web パフォーマンスのための HTML 最適化 | メルカリエンジニアリング
Merpay Advent Calendar 2019 の2日目は @1000ch (id:hc0001) がお送りします。この記事は2019年11月16日に福岡で開催された Frontend Conference Fukuoka 2019 のセッション、HTML Optimization for Web Performance の書き起こし記事です。 docs.google.com なぜ HTML の最適化が重要なのか 先日公開された Chromium Blog: Moving towards a faster web をご覧になられたでしょうか。Google は Web ページのパフォーマンスの重要性を様々な形で啓蒙してきましたが、この記事では Chrome のもとになっている Chromium に、Web ページのパフォーマンスをブラウザ UI として表示する機能を追加し、ユーザーが
[JavaScript]大きいEnterと小さいEnterは別物であることに気づいた
タイトルは上記画像にあるような普通にキーボードにあるEnterキーと、 テンキーの右横にある小さいEnterキーのことです。 私の担当しているシステムではEnterキーを押すとフォーカスが移動する仕様があります。 経験上、このような仕様は多数のデータ入力があるシステムにおいて好まれる傾向を感じます。 キーボードから手を離さなくていいからですね。 正直なところフォーカス移動ならTabだろうと思いますが、まあそこは長年の習慣だと思います。 この仕様をJavaScriptで実現していたのですが、なんか違和感を感じて調べたところ JavaScriptにおいてキーボードにある普通のEnterキーとテンキーの右横にある小さいEnterキーは別物であることに気づきました。 <html> <head></head> <body> </body> <script type="text/javascript"
![[JavaScript]大きいEnterと小さいEnterは別物であることに気づいた](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f6e6acba006f1f5e854ed72bee0e031fcc21383/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--x--w0q-v--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BJavaScript%25255D%2525E5%2525A4%2525A7%2525E3%252581%25258D%2525E3%252581%252584Enter%2525E3%252581%2525A8%2525E5%2525B0%25258F%2525E3%252581%252595%2525E3%252581%252584Enter%2525E3%252581%2525AF%2525E5%252588%2525A5%2525E7%252589%2525A9%2525E3%252581%2525A7%2525E3%252581%252582%2525E3%252582%25258B%2525E3%252581%252593%2525E3%252581%2525A8%2525E3%252581%2525AB%2525E6%2525B0%252597%2525E3%252581%2525A5%2525E3%252581%252584%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ASatoshi%252520Kaneyasu%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Q2MzU5NTZkNDkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
とほほのChrome拡張機能開発入門 - とほほのWWW入門
Chrome の拡張機能を開発する手順について説明します。まずは、拡張機能が実行されたらポップアップを表示するだけのものを作成してみます。下記のフォルダとファイルを作成します。 my-extension manifest.json popup.html { "name": "My Extension", "description": "My Extension", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html" } } <!DOCTYPE html> <html> <body> <h1>Hello world!</h1> </body> </html> Chrome で chrome://extensions を開き、[パッケージ化されていない拡張機能を読み込む] から上記
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開 Pythonの主要なディストリビューション「Anaconda」などを提供しているAnaconda社は、HTML文書の中にJavaScriptと同じようにPythonのコードを記述し、実行可能にする「PyScript」をオープンソースで公開しました。 Did you hear the news from PyCon!? We are thrilled to introduce PyScript, a framework that allows users to create rich Python applications IN THE BROWSER using a mix of Python with standard HTML! Head to h
【JavaScript】実数から整数への変換に parseInt() を使ってはいけない２つの理由🙅♀️ - Qiita
背景（誰のための記事？） JavaScriptプログラマのみなさまこんにちは。 最近のお仕事の傾向として、マイクロサービス化といいいますか、オブジェクト指向の延長といいますか、MVVM化といいますか、下回りは速度＆効率重視でC++で構築し、中間は保守（メンテ）＆書きやすさ＋ちょっぴり速度も重視で node.js（JavaScript）、上層のUIはなるべく広範囲で使えるように考慮して HTML＋CSS 、という３層構造 ・上層：HTML + CSS ・中層：node.js（JavaScript） ・下層：C++ が流行っていまして、今回の事件は中層の node.js スクリプトの部分で発生した問題でした。しかも、下層で生成された巨大なデータを中層で処理し、上層で表示しようとするとある条件で遅延が発生し、表示がカクつくという問題で、その「ある条件」が長期間に渡って特定できない、、、といった難
高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？
はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴
React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
自作 Markdown プロセッサベースの blog.jxck.io v2 リリース | blog.jxck.io
Intro 本サイトは自作の Markdown ビルダを使っていたが、色々と気に食わない部分があったのでフルスクラッチで作り直し、それにともなってサイトの刷新を実施した。 必要だった要件や、意思決定を作業ログとして記す。 Markdown 本サイトは、一般に使われている Markdown -> HTML の変換結果では要件を満たせないため、最も都合の良い AST を吐く Kramdown のパーサから AST だけを取得し、それを Traverser でカスタマイズしてから自前でシリアライズしていた。 その実装を、微修正を繰り返しながら、継ぎ足し継ぎ足しで 5 年くらいイジってきたので、そろそろ自分がブログを書く上での要件も固まっており、記事中の Markdown のスタイルも固定してきた。 一方、 Kramdown の実装が原因でどうしてもワークアラウンドが必要だった部分に、フラストレー
HTMLコーディングでもReact+TypeScriptの開発体験を得る
前置き HTMLを納品する形式の仕事の際にEJSやpugではなくReact+TypeScriptを使ってHTMLを生成しつつ開発体験を高めてほしい。 ということで具体的にどのようなメリットがあるのかを伝えたくてまとめてみました。 開発環境 1から環境を作るのは大変なので今回はクラクさんのministaを拡張していきます。 ministaの紹介記事はこちら 必要な設定はTypeScript, ESLint, Prettier, Babel, エディター(今回はVSCode)になります。 webpack.config.js const path = require('path') const glob = require('glob') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
名作Flashゲー『マテリアルスナイパー』復活！『艦砲射撃！』に続きHTML5版公開 | Game*Spark - 国内・海外ゲーム情報サイト
MPA化するSPAとSPA化するMPA
Python だけで作る Web アプリケーション(フロントエンド編)
阿部寛のHPで「HTMLがたった15行だからはやい」と”わかってる人感”を出されると恥ずかしくなる話
Firebase Hosting を使った HTML, CSS, Prettier, Dockerのサンプルコード
