Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
HTTP/3とQUICはなぜ必要になり、どのように標準化されてきたのか？ 現代のプロトコル設計とインターネットの課題｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧HTTP/3とQUICはなぜ必要になり、どのように標準化されてきたのか？ 現代のプロトコル設計とインターネットの課題 HTTP/3とQUICはなぜ必要になり、どのように標準化されてきたのか？ 現代のプロトコル設計とインターネットの課題 IETFで標準化が進められているWebの新しい通信プロトコルQUICとHTTP/3について、現在のインターネットが抱える課題やプロトコル設計での議論を中心に、ASnoKaze blogの後藤ゆき（@flano_yuki）さんに執筆いただきました。 2021年、Webに新しい通信プロトコルが登場しました。RFC 9000として標準化されたQUICと、その上で動作するHTTP/3です。HTTP/3はまだドラフト版ですが出版準備段階となっており、すでに実際のWeb通信でも広く使われています この2つのプロトコルは、現在のWebやイン
シンプルで使いやすいオープンソースのノーコードWebサイトビルダー・「Silex」
Silexはシンプルで使いやすいオープンソースのノーコードWebサイトビルダーです。直感的な操作でコードを書かずにWebページの作成が可能です。 全く知識の無い方でも作れる、という類のものではなく、ある程度知識のある方がコードを書かなくても作成できる、というタイプで、細かな調整が可能となっており、細かな数値を入力したり任意のclass名にしたり疑似要素を使う事も可能です。 上記は実際のエディター画面です。真ん中がプレビュー、右ペインが編集ツールとなっています。 左メニューではレスポンシブの表示確認をしたりページを追加したりフォントを変更したりUIレベルで要素を追加するなどが可能です。また、コードエディターも付いていますので、書いた方が早いケースにも対応可能です。 更にプレビュー機能とは別にDropboxやGithubに送ったりFTPでWebサーバにアップロードする等も可能です。また、デスク
Core Web Vitalsを上げる - ゆーすけべー日記
「Core Web Vitalsを上げる」機会があったので、Core Web Vitalsについてまとめてみる。 これから書くことは今現在、僕が把握してることで、間違っていることがあると思うけど、そこはご愛嬌でお願いします。 1. Web Vitalsとは？ Web VitalsというのはGoogleが提唱したUXの指標である。GoogleはWebに対するUXのことを「ページエクスペリエンス」と呼んでいる。「Core Web Vitals」ってのは「Web Vitals」のサブセットになっているので、まずはそこを理解しておく必要がある。 なぜWeb Vitals？ 最近、Webのフロントのことについて調べることが多いのだが、やたらとこの「Web Vitals」もしくは「Core Web Vitals」という言葉に出会う。 「フロントの体験」としてWeb Vitalsが重要だからであると同時
せっかちだからJamstackな静的サイトを約10秒で更新するよ（Gatsby Cloud & Contentful） | DevelopersIO
どうも、ベルリンオフィスの小西です。 Jamstackな静的サイトでは（当たり前ですけど）サイトを公開する前に静的ページをビルドする時間がかかるわけなのですが、「めっちゃ急いでるので1秒でも速くサイトを更新したい」「編集中の記事を秒でプレビューしたいのだが」というニーズがありました。 今回このビルド時間の問題を、Gatsby Cloudの機能 Incremental Build, Cloud Build, そして Preview Builds を使い、約10秒まで短縮したいと思います。いずれの機能もJamstackサイト導入に際して大きなインパクトがある機能だと思ってます。 前提 フロントをGatsby（Version 2.20.4 以降）、ホスティングにGatsby Cloud （ビルドプランでスタンダードプラン以上）を使っている ちなみに今回のビルド速度の検証はスタンダードプランで試し
【レポート】AWS における安全な Web アプリケーションの作り方 #AWS-55 #AWSSummit | DevelopersIO
この記事では、5月12日に行われた AWS Summit Online 2021 のオンラインセッション『AWS における安全な Web アプリケーションの作り方(AWS-55)』の模様をレポートします。 セッション概要 情報処理推進機構(IPA) の公開している「安全なウェブサイトの作り方」をはじめとしたセキュリティを考慮した安全なウェブアプリケーションの設計ガイドラインがいくつか知られています。本セッションでは、アプリケーション開発者向けにガイドラインに則ったアプリケーションを AWS 上でどのように実装するのかを AWS プラットフォームレイヤーとアプリケーションレイヤーのそれぞれの観点から項目ごとに解説し、アプリケーション導入前、または導入後のセキュリティ対策の指標となることを目指します。 登壇者 アマゾン ウェブ サービス ジャパン株式会社 技術統括本部 ソリューションアーキテク
Webフロントエンド開発で役立つサービスまとめ - Qiita
この記事では、Webフロントエンド開発において役に立つと思われるサービスやツールをまとめます。 全般 Can I use 指定した特定の機能が、どのブラウザのどのバージョンで利用可能かを確認するためサービスです。新しいJavaScriptのAPIやCSS3の機能を使ってモダンなWeb開発を行う場合、必須とも言えるくらい利用することになります。 指定した国におけるブラウザのシェア情報をもとにして、特定の機能が何割のユーザーで使用可能かを調べることもできます。 npm / webpack BUNDLE PHOBIA 指定したnpmパッケージのサイズを調べるサービスです。近年のWebではページの表示速度が非常に重要視されており、Webサービスにバンドルするパッケージのサイズも極力小さくすることが求められています。パッケージのサイズを調べる方法は多々ありますが、このツールの場合はパッケージ自体のイ
テーブルに直接入力したデータをそのまま様々なフォーマットに変換できる・「 Table Convert Online」
Table Convert Onlineはテーブルに直接入力したデータをそのまま様々なフォーマットに変換できるWebアプリです。 上部のテーブルに直接書き込んだ内容が下部の各フォーマットで反映される、というシンプルなもの。 用意されているフォーマットは MarkdownやCSV、JSON、XML、SQL、HTML、Excel、プレーンやMediaWiki、PHP、Rubyなどなどまだ他にも用意されており、即時反映されます。 また、行や列の数の増減、各フォーマットからのデータのインポートも可能です。インポートはデータのコピペでもURLでも可能となっています。 地味ながら割と便利な気がします。利用の際にユーザー登録やメールアドレスの収集などは無く、自由に利用できます。 Table Convert Online
WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史
はじめに 「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。 なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBackend for Frontend (BFF)等が必要になるとわかり「これJSでやる必要なくない？」とも感じていたのでちょうど良かったです。 こういうのを見るとRIAやGWTのように似たアプローチで廃れた技術や、登場が早すぎたMeteor、今も頑張ってるMSのBlazorなど色々頭をよぎります。といわけで歴史を俯瞰する意味でHTML + JavaScriptとそれ以外の技術のせめぎ合いの歴史やMSのBlazorやRustのyewなどWebassemblyを使う
「Web 技術解体新書」執筆について
「Web 技術解体新書」執筆について Intro 「Web 技術解体新書(Web Anatomia)」という書籍の執筆と、 zenn 上での販売についてアナウンスします。 各章を分割して執筆し公開していく予定です。 第一章: Origin 解体新書 Web 技術解体新書とは Web というものを正しく理解するために必要な知識や技術は日増しに増え、それに従い学ぶためのコストもかなり上がってきています。 一方で、多くの書籍や雑誌、 Web 上の記事、動画や音声コンテンツは充実しており、学ぶための手段もかなり広がっています。 しかし、 Web に関わる技術書籍の多くは、何らかのフレームワークの解説や、 JS/CSS などの特定技術、特定の非機能要件に特化したものが多く、(その括りの曖昧さ故) Web という括りで書かれたものはあまりありません。 あったとしても、多くは初心者向けなものが多く、ある
Neocities
Create your own free website. Unlimited creativity, zero ads. Neocities is a social network of 766,600 web sites that are bringing back the lost individual creativity of the web. We offer free static web hosting and tools that allow you to create your own web site. Join us! Powerful features to help you build We’ve made it easy to build your web site and explore other sites. Neocities features an
攻撃から学ぶCSRF対策 - Qiita
はじめに WEBエンジニアとして成長するために、セキュリティ対策は避けては通れない道ですよね。 僕も含め 「なんとなく知ってる」 という方は多いのではないでしょうか。 大切なWEBサイトを守るためにも、WEBエンジニアとしての基礎を固める為にも、しっかりと学んで一緒にレベルアップしていきましょう。 また、本記事の内容は様々な文献をもとに自身で調べ、試したものをまとめています。 至らぬ点や、間違いがありましたら、コメントにてご指摘をお願いします。 他にも様々な攻撃手法についてまとめているので、興味のある方は読んでみてください。 攻撃から学ぶXSS対策 攻撃から学ぶSQLインジェクション対策 CSRFって何？ CSRF（Cross-Site Request Forgery）とは、サービスの利用者に意図しないHTTPリクエストを送信させ、意図しない処理を実行させる攻撃手法です。 これだけでは分か
Dark Reader - 任意のWebサイトをダークモードで表示
ダークモードに対応したサイトが増えてきています。多くは自動的に設定されたり、設定画面を使って自分で切り替えるようになっています。しかし、まだまだ未対応のサイトが多いのも事実です。 そこで使ってみたいのがDark Readerです。任意のWebサイトをダークモード対応にします。 Dark Readerの使い方 MOONGIFTを表示した例です。 輝度やコントラストを変更できます。 設定メニューです。 Googleの検索結果。 Wikipedia。 Dark Readerを使えばどんなWebサイトでもダークモードとして目に優しい表示にできます。開発時にはエディタやターミナルを暗くしているのに、Webブラウザだけ明るいと目が辛いです。Dark Readerを使えば目に優しく、可読性も上がるでしょう。 Dark ReaderはGoogle Chrome/Firefox/Safari/Edge用、T
音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
牧歌的 Cookie の終焉 | blog.jxck.io
Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、 Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、 3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る
本当は速くならない「Webサイトの表示高速化アンチパターン」10選｜榊原昌彦
ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image
スプレッドシートをWeb開発の万能ツールに変えるおすすめサービス厳選まとめ！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Googleが提供しているスプレッドシートを表計算ではなく、Web開発の即戦力になる万能ツールへと変えてしまうサービスを厳選してご紹介しようと思います。 スプレッドシートのデータを活用して、Webコンテンツを作成したりデータベースとして活用するなどさまざまな開発手法に応用できるので、ご興味ある方はぜひ参考にしてみてください！ ■スプレッドシートのデータを即座にAPIで提供する！ 【 SwiftSheet 】 SwiftSheetはExcelやスプレッドシートなどで管理しているデータを、即座にRESTful APIとしてホスティングしてくれるのが大きな特徴です。 CSVで保存したファイルをアップロードするだけという簡単な操作のため、ユーザー登録や課金などは一切不要です。 たとえば、お店のリストをスプレッドシートで管理しているとします。 こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web版「Visual Studio Code」がオフライン動作に対応 ～PWAとしてインストール可能に／指定サイズ以下のリポジトリコンテンツを自動DLして高度な検索・定義移動も利用できる
same-site/cross-site, same-origin/cross-originをちゃんと理解する
GitHub - microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer
