HTTP/3｜Webエンジニアが知るべき新常識 ─ QUICやコネクションマイグレーションなどを学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
HTTP/3｜Webエンジニアが知るべき新常識 ─ QUICやコネクションマイグレーションなどを学ぶ 新しい通信プロトコルとして普及が進んでいるHTTP/3については、エンジニアHubでも過去に概論的な記事を掲載しています。今回はアプリケーション開発者が自社サービスでHTTP/3を採用することを想定して、仕様上の留意点や、どのように使い始めるか、そしてサイトを制作する際に注意しておきたいポイントまでを藤吾郎（gfx）さんに解説していただきました。 本記事ではHTTP/3およびその通信プロトコルであるQUICを、アプリケーション開発者として活用する立場で入門します。HTTP/3は、HTTP/1.1とHTTP/2に続く新しいメジャーバージョンのHTTPプロトコルです。HTTP/3はHTTP/1.1およびHTTP/2を置き換えるポテンシャルを持っています。将来的にほとんどのインターネットトラフィ
ブラウザレンダリングの仕組み
フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ
WEB開発に役に立つAPI一覧+API毎に関連するQiita記事を分類 ！ - Qiita
前回: Qiita APIで記事からYoutube動画を集めてみた 🎬 、Qiita APIを使って、Qiita記事を取得してYoutube動画のURLを抽出することができました。 今回は、特定APIに関連したQiita記事を取得して、API毎に分類、タグを集計してドーナツグラフ化することでAPIの特徴を表してみました。 最新のAPI一覧はこちら API一覧 | DOGAKIITAA! ～ APIごとにQiita記事を分類 ～ Google系 Cloud Vision API https://cloud.google.com/vision/docs/quickstart 📝 機械学習を使用して画像を解析します。画像ラベリング、顔やランドマークの検出、光学式文字認識（OCR）、不適切なコンテンツへのタグ付けなどができます。 Cloud Vision APIの凄さを伝えるべくRasPi b
プログラミング初心者がオリジナルのサービスを作る時に便利なツール23個｜かずたか
※こちらの記事がはてブの総合ホッテントリ入りしました！ ※noteの公式マガジンと、「先月もっとも多くスキされた記事」の一つに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してWebサービスを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 Twitterやnoteの他の記事などでもしつこいぐらいに言っていることなのですが、プログラミング学習はある程度基礎を勉強したら、自分でオリジナルのWebサイトやアプリなどを作ってみるのがオススメです。 今までの勉強ではプロダクトにどんな機能が必要か考えたり、それを色々調べながら実装に落とし込んだりするこ
mozaic bootcampに参加して気づいた、自分に欠けていたWeb技術の知識メモ - ninjinkun's diary
mozaic bootcampというhttps://t.co/OfP8vuZTkfリスナーのための4日間通し勉強会に参加中。2日目の今日はkeep-aliveからのちょっとHTTP2、これからCookieの話— にんじんくん (@ninjinkun) 2019年4月29日 mozaic bootcampとは？ mozaic.fmリスナー向けの勉強会。mozaic.fmはJxck氏が主催するPodcastで、Web標準やブラウザ、プロトコルなどWeb技術をターゲットにしており、自分も愛聴している。 今回行われたbootcampはゴールデンウィークの4日間を使い、「Webを正しく理解し、正しく使う」ことを目的として行われた。 参加者はざっくり言うとそこそこ経験のあるWebエンジニアが6名、主催のJxck氏、mozaic.fmでお馴染みの矢倉氏の計8名。参加にあたってはビデオ通話による選考もあっ
gRPC-Webが正式リリース。WebブラウザからgRPCを直接呼び出し可能に
Googleによって開発され、現在Cloud Native Computing Foundation（CNCF）によって開発がホストされているRPCフレームワーク「gRPC」は、プログラミング言語に依存せず、HTTP/2をサポートしたシンプルで高速なRPCを実現できる特徴を備え、マイクロサービスなど分散アプリケーションなどの実装で広く使われ始めています。 このgRPCをWebブラウザのJavaScriptから呼び出し可能にする「gRPC-Web」が正式リリースとなったことを、CNCFが発表しました。 これまではWebアプリケーションのバックエンドでgRPCを用いて開発を行ったとしても、それをWebブラウザから呼び出すには、WebブラウザとWebサーバ間をRESTful APIなどで接続し、WebサーバからgRPCを呼び出すという手法で、RESTfulとgRPCをブリッジすることが一般的でし
初心者向けWEBアーキテクチャ入門 - masalibの日記
上記の図は、WEBアーキテクチャです。 新人などの場合はあまり経験がない人は、用語すら聞いたことない状態だと思います 全部理解する必要はないですが、googleの検索する時に参考になれば幸いです 会社の勉強会用（無給）に作った資料・・・めっちゃ時間かかった。 資料も公開しています 初心者向けWEBアーキテクチャ入門ver2018-07-23 - Google スライド （ダウンロードして修正もできます） DNS: 説明する前に前提 IPアドレスとは: ネットワークにつながっている機器はかならずIPアドレスが割り振られています IPアドレスとIPアドレスで通信することでデータをやり取りしています グローバルIPとローカルIPについて グローバルIPは世界中で重複がにあように管理されており、世界中の通信で利用されています ローカルIPは会社や家などで自由につかえるIPです ローカルIPのなかで
Atomic Design に学ぶ Web 開発をハッピーにするデザイン手法 - Qiita
この記事は株式会社ソニックムーブ Advent Calendar 2017 の18日目の記事です！ 最近 Atomic Design というワードをよく見かけるけれども… 実際どういうものなの？ なにそれおいしいの？ 状態だったので、思い切ってかじってみることにしました。 Atomic Design って何さ？ Atomic Design とは、デザインシステムを作るための方法論です。 ページ内にある要素を最小単位である「Atoms（原子）」にコンポーネントとして分解します。 分解したコンポーネント同士を組み合わせてデザインしていく考え方が Atomic Design です。 この考え方自体は新しいものではなく、2013 年頃にはすでに登場していたようです。 Atomic Design デザインシステムって？？ デザインシステムとは、デザインの仕組みとその考え方をドキュメント化したものです
Web Bluetooth APIことはじめ | フロントエンドBlog | ミツエーリンクス
Bluetoothはデバイス間でのワイヤレス通信に日常的に使われています。代表的なものとしては、ヘッドフォンとPC間の接続や、外部センサーとスマートフォン間の接続などがあげられます。Bluetoothバージョン4.0で追加された速度よりも省電力に特化した通信方式 Bluetooth Low Energy（以下「BLE」）では、ここ数年で話題となったIoTデバイス間での接続などにも多く用いられています。 今回ご紹介する「Web Bluetooth API」は、そんなBluetoothをWebブラウザから利用して外部デバイスを検索したり、デバイスの持っている情報を読み書きするための機能を提供してくれるAPIです。 各ブラウザの実装についてはまだまだという状況ですが、macOSのGoogle Chromeではバージョン56からデフォルトの状態で使用可能になりました。APIの動作条件としてセキュリ
素人が半年頑張ってWebサービスを作った話 - 変なサービスを作るのが好き
半年ほどかけてWebサービスのプロトタイプを公開するところにこぎつけたのでその記録をしておこうと思います。 作ったもの 一言で言うと「Webブラウザで閲覧したページの履歴を共有するSNS」です。 History（履歴）を流す（stream）ということでHistreamと名付けました。 Chrome拡張をインストールして、ウィンドウを選択し、オンにするとそのウィンドウで見たページ履歴を自動でアップロードします。 そしてWebサービスでアップロードされた履歴を整理された状態で確認したり、友達の履歴を読めたりします。 Chrome拡張: Histream-Extension - Chrome Web Store Webサービス: https://histream.io 作ろうと思ったきっかけ 今から一年前、大学２年の冬にワンタップダイエットというアプリを作っていました。プログラミングするのはほと
知っておきたいブラウザについての基礎入門
知っておきたいブラウザについての基礎入門 at サポーターズ京都勉強会 https://supporterz.connpass.com/event/51220/
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの
HTML5 conference 2016 スライド他まとめ - Qiita
Overview http://events.html5j.org/conference/2016/9/ のとおり、HTML5 Conference 2016が、2016年9月3日 東京電機大学にて開催されました。 そこで利用されたスライドなどのまとめです。 HTML5 Conference 2017版は、こちら 基調講演 https://www.youtube.com/embed/0L0zsaOUKMs (Liveですが録画されているので見れます) http://togetter.com/li/1020730 Reactの最新動向とベストプラクティス by 株式会社TOLOT 小林 徹 氏 https://speakerdeck.com/koba04/reactfalsezui-xin-dong-xiang-tobesutopurakuteisu Service Worker Deep
Webサービスにおける
キャッシュ戦略
YAPC::Asia Hachioji 2016 mid in Shinagawa 2016-07-03 Yusuke Wada a.k.a. yusukebe
HTMLとCSSとJavaScriptの基本の基本 - まさおまっさお
今回は、Webページを表示するために使うHTML、CSS、JavaScriptという3つについて、その関係と、それぞれで何ができるのかを説明していきます。 なるべく簡潔に、プログラミングに慣れていない方にも概要が伝わるよう書こうと思いますので、興味がある方はどうぞ。 【注意！】 この記事は、一般的な定義ではなく、私自身の言葉で説明する記事です。 ちゃんとした定義が知りたい場合は、W3Cなどのページを参照してください。 目次 目次 １．基本ルール ２．HTMLは存在を表現する タグの親子関係 タグの順番 タグの属性 ３．CSSは状態を表現する ４．JavaScriptは動作を表現する 補足１：CSSでの動作と、JavaScriptを使った動作の違い 補足２：開発者ツールを使おう！ さいごに １．基本ルール Webページで使う3つの要素の関係は、簡単に言うとこんな感じ。 HTMLは 存在 を表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://support.google.com/google-ads/answer/7327828?hl=ja
Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend
GitHub - takahashiakira/tech_for_web: Web開発のための技術系ドキュメント
HTML Reference
