あなたのWebサービスの脆弱性を発見者から教えてもらう方法 - RFC9116が発表されました
先日、RFC9116が発表されました🚀 あなたのWebサービスに潜在する未知の脆弱性を誰かが見つけた時、それをあなたに連絡する方法を提示するsecurity.txtを標準化するものです。 この記事では何故これが必要だったのか、そして私たちがこれを実装する方法を簡潔に説明します。 なぜこれが必要だったのか https://securitytxt.org/のSummary(概要)にはこのように書かれています。 Webサービスのセキュリティリスクが、リスクの重大性を理解している独立したセキュリティ研究者によって発見された場合、それらを適切に開示するためのチャンネルが不足していることがよくあります。 その結果、セキュリティの問題が報告されないままになる可能性があります。 security.txtは、組織がセキュリティ研究者がセキュリティの脆弱性を安全に開示するためのプロセスを定義するのに役立つ標
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 の低下を防ぐ部分がある一方
💣Webフロントエンドにおける関数型「風」プログラミングに関する個人的まとめ - Qiita
ここ数年の流れについて 技術的側面 Webフロントエンド（ほぼTypeScript＆React界隈）において、オブジェクト指向（厳密に言うとクラスの利用）から脱却する流れがあります。原因は以下の2点。 クラスの継承の問題点が（IT業界全体に）広く定着したこと JS/TSの進化、Reactの進化、関数型言語の考え方などの影響により、クラスを用いてデータと関数群を紐づけるメリットが薄くなったこと 現状、設計レベル（実務的にはどの関数を纏めてモジュール化するのか、モジュール同士をどう繋ぎ合わせるのか、フォルダ割りどうするのか等）のノウハウがまだ固まっておらず、既存の設計論はそれなりに有効です。 コミュニティ的側面（政治） これらの流れはWebフロントエンドの中でもTypeScript＆Reactの界隈が主導しており、そのノウハウは長年絶対視されてきたオブジェクト指向を解体するような内容であったた
ブラウザで動くサービスを作るときの技術選定
はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動くWebサービスを開発することが多いのですが、案件の規模感や要求によって技術選定を少し変えるようにしています。「こういうときはこう」みたいに一概には言えないのですが、普段使う構成を紹介します。誰かの参考になれば幸いです。 2022/02/10 現在での内容です。 前提 開発を委託される場合の運用費をどうするの問題があります。クライアントにクレカ登録をしてもらうか、こちらで支払って毎月請求するかになります。僕は毎月やるのがめんどくさいのでできるだけ前者に倒している関係上、あまりいろいろなSaaSを組み合わせて作ることをなるべく避けています。 規模感によらず使っているもの 私の場合、以下が使えるとめちゃくちゃ効率よく開発できます。 GCP 好きだから
WebVM: server-less x86 virtual machines in the browser
Back to blog WebVM: server-less x86 virtual machines in the browser TL;DR — We made a server-less virtual Linux environment that runs unmodified Debian binaries in the browser. This is powered by CheerpX, a WebAssembly virtualization platform. Feel free to play with it and report bugs: https://webvm.io WebVM — a server-less virtual Linux environment running fully client-side in HTML5/WebAssembly.
2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
月間500万PV＆転送量80TBのサイトをたった4万円で維持する方法
月間ページビュー(PV)が500万PVあり、データ転送量も80TBあるという人気ウェブサイトを400ドル(約4万6000円)以下で維持する方法を、3Dのアセットライブラリを一般公開しているPoly Havenがまとめています。 How we handle 80TB and 5M page views a month for under $400 – Poly Haven Blog https://blog.polyhaven.com/how-we-handle-80tb-and-5m-page-views-a-month-for-under-400/ ウェブサイト運営のポイントの1つは「資金リソースをどう管理するか」です。資金があればAmazon S3のようなクラウドプラットフォームを利用するのが簡単ですが、データ転送量が月間80TBもあるPoly HavenのようなウェブサイトでAmaz
パフォーマンス改善のいろは
こんにちは、@kaa_a_zu です。私は、今までいくつかの組織でフロントエンドのパフォーマンス改善に取り組んできました。パフォーマンスが劇的に改善したこともあれば、改善点の洗い出しで終わったこともありました。この記事では、それらの経験に基づいて、どのようにしたらチームがパフォーマンスに意識を向けることができるのか、改善を習慣化できるのかについて基本的なことを紹介させていただきます。少しでも参考になったらありがたいです。また、ご指摘や感想も随時お待ちしております。 ※この記事はWebフロントエンド領域を対象にしています。 なぜパフォーマンス改善をするのか パフォーマンスを改善する目的には、大きく３つあると考えています。 ユーザー体験の質を向上させるため(追記: この動画はパフォーマンスの重要性を説いています) SEO対策のため 将来的にリッチな機能を導入するため(既にTWA化の基準にはパフ
Small Dev tools useful for all developers
Sort a list of numbers or strings alphabetically or by length
ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツールが揃っているので、ブックマークしておくと便利です。 SmallDev.tools smalldev-tools -GitHub SmallDev.toolsの特徴 SmallDev.toolsは、Web制作に役立つさまざまなツールが一箇所でまとめて利用できる便利サイトです。完全に無料で利用でき、登録など面倒なことは一切ありません。 最小限のインターフェース🤩 電光石火の速さ⚡ 広告はなし💩 プライバシーフリー🔐（データはすべて、サーバーに
W3Schools.com
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
Cookieを永続化して、どこまでも個人を追跡するEvercookie - Qiita
Evercookieは、ブラウザに究極的に永続的なCookieを生成するJavaScript APIです。 その目的は、標準的なCookie、Flash Cookieなどを削除した後でもクライアントを識別し続けることです。 これは、可能なかぎり多くのストレージにCookieデータを保存することで達成します。 いずれかのストレージからCookieが削除されたとしても、ひとつでも残っている限り、Evercookieは残ったデータからCookieデータを復旧します。 Flash LSO、SilverlightもしくはJavaが有効な場合、Evercookieはブラウザを超えて同じクライアント上の別のブラウザにCookieを伝播することすら可能です。 本リポジトリは、Samy Kamkarおよび多くのコントリビュータによって作られています。 Browser Storage Mechanisms E
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました
この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ 2024/05/07 追記 最新の登壇スライドバージョンはこちらです。 登壇時の様子がYouTubeに上がっているのでよろしければあわせてご覧ください。 はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかな
絵文字をファビコンとして表示する簡単な方法
2021/5/17追記 2021年5月現在、Safariではこの方法に対応していません。Safari用に別途ファビコンを用意する必要があります。 ちょっとしたWebサイトを作るときに地味に面倒なのがファビコンです。わざわざ画像を作るのも、どこかからちょうど良い画像素材を持ってくるのも、アップロードするのも面倒だったりします。 そんなときは絵文字をファビコンとして使いましょう。 やり方 先にやり方を載せておきます。これをHTMLの<head>の中へコピペすればファビコンとして絵文字が表示されます。 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%
必要だと気付いてもいなかったフロントエンド用リポジトリ7選 - Qiita
より良いものをより早く作るのに役立つ、あまり知られていないリポジトリ。 Photo by Juan Rumimpunu on Unsplash はじめに 私たちは、汎用ツールやリソースが数回タップするだけで手に入る時代に生きています。しかも幸いなことに、そのほとんどが無料です。 新しいツールやより簡単な方法が見つかり、面倒で複雑なタスクを実行できれば、誰にとっても、特に開発者には嬉しいことです。 でも、より良く賢い方法があり、予想外の方法で時間を節約できることを知らない場合もあります。 この2年間で見つけたGitHubの素晴らしいリソースは、私をかなり助けてくれました。これらのうちいくつかは、その必要性さえ知りませんでした。 そこで、あなたもおそらく必要になるGitHubリポジトリのリストを作りました。 1. 33 JS concepts ソース 私はプログラミングをJavaで始め、その後
chrome devtools の tips N連発 - mizdra
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Marko
Explore DOM Events
