Goで実装された高速な
仮想待合室サーバの実装と詳解ペパボのテックカンファレンスで話しました。
CORSの仕様はなぜ複雑なのか
Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基本となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別
【テックコラム】Chrome開発者ツール「Recorder」パネルを使ってみた | DataCurrent
2022.04.21 コラム devtoolsPuppeteerテックコラム開発者ツール 【テックコラム】Chrome開発者ツール「Recorder」パネルを使ってみた ● はじめに こんにちは。今回は、Google Chromeバージョン97から開発者ツールに加わったRecorderパネルを使ってみたので、使い方や、使ってみての感想をコラムにしたいと思います。 ※本記事ではChromeバージョン : 100.0.4896.127 を使用しています。 ● Recorderパネルとは 簡単に紹介すると、Chromeブラウザ上の動作を記録して、記録したものを再生することができる機能です。いまのところはまだプレビュー機能となっており、Chromeのバージョンアップの際に徐々に機能が追加されるなどしています。 詳細を知りたい方は、以下のGoogleによるRecorderパネル紹介ページもご覧くださ
"JWT=ステートレス"から一歩踏み出すための考え方
おはようございます、ritouです。 この話に乗っかっていきます。 3行で ログアウト時にJWTを無効化できない実装は今後脆弱性診断で「OWASP Top 10 2021違反」と指摘されるようになりそう(今も個別にされてるかもしれないけど) JWTは単純なフォーマットなので、ステートレスなセッション管理においてログアウトしたときに文字列自体を無効化できない件は独自エンコード方式(一般的にフレームワークのCookieストアと呼ばれているもの)でも起こり得る 「セッションID vs JWTで内包」 以外にも 「セッションIDをJWTに内包」もあり得る。既存の機能を残しつつ「JWTで武装」する選択肢も考えてみてはどうか。 ステートレスなセッション管理でログアウトの際に文字列自体を無効化できない問題 これは前から言われていますし、駆け出し何とか勢のQiita記事に書かれるぐらいには一般的です。 2
「SEOに強いHTMLの書き方」についての個人的な見解
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！ | 東京フリーランス
制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！2019.08.26特集 HOME特集制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！ こんにちは！Webエンジニアのショーヘーです。 「今はWeb業界の景気がいい！」と言われますが、その分競争が激しくなったことで経営に苦しむ企業も増えています。 どんどん価格競争が激しくなっているため、原価ギリギリで引き受けている企業もあるくらいです。 そんな苦しいWeb業界にありながら、平均月給41.8万円、残業ゼロを実現している超優良Web制作企業が沖縄にあります。沖縄では月給20万を下回ることも珍しくない中、これはとんでもないことです。 その企業の名前は、琉球
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
エンジニアでも知っておきたいデザインの基礎知識 - Qiita
→ English 対象読者 ワイヤーフレームだけが渡されて、それを元にコーディングしなければいけないようなケースで役立つ知識を紹介します。 また、デザイン経験は無いけど、個人開発で何かプロダクトを作ってみたい方にも参考にしていただけるかと思います。 デザインといっても、無からクリエイティブを生み出すような部分ではなく、あくまでワイヤーフレームレベルのものをプロダクトとして最低限機能するレベルに引き上げるまでの範囲について言及します。 概要 最近のWebデザインはシンプルなので、既存のWebサイトに新しいパーツを実装するような場合に、ワイヤーフレームだけが与えられ、デザインデータが用意されないことがあるかもしれません。 そのような場合、エンジニアにデザイン領域への多少の裁量が生じ、実装者によって仕上がりに差が出ます。 この記事では、ワイヤーフレームを元にエンジニアが実装した「ちょっと悪いデ
Zalando RESTful API と イベントスキーマのガイドライン
License: CC-BY-SA 3.0 © Zalando SE 2020 & CC-BY-SA 3.0 © kawasima 2020 Zalandoのソフトウェアアーキテクチャは、疎結合なマイクロサービスを中心としており、 それらはJSONペイロードをもつRESTful API群によって、機能が提供されています。 小さなエンジニアのチームは、自分たちでAWSアカウントにこれらのマイクロサービスを デプロイしたり運用したりしています。 私たちのAPIは、その多くが私たちのシステムが何をするのかを完全に表現しており、 それゆえに貴重なビジネス資産となっています。 Zalandoがとあるオンラインショップから価値あるファッションプラットフォームへと変貌を とげるために、私たちは新しいオープンプラットフォーム戦略の展開をはじめました。 なので、高品質で長持ちするAPIの設計は、私たちにとっ
[翻訳記事]マイクロフロントエンド - マイクロサービスのフロントエンドへの応用
モダンな Web アプリを異なる JavaScript フレームワークを使う複数チームで開発するためのテクニック はじめに この記事は翻訳記事です。 原著者の許可をとって翻訳・掲載しています。 原文はこちらです。 翻訳者 マイクロフロントエンドとは？ マイクロフロントエンドという言葉は 2016 年の終わりにThoughtWorks Technology Radarで言及されました。 それはマイクロサービスの考え方をフロントエンドに拡張したものです。 現在の Web のトレンドは多機能でパワフルな SPA です。 SPA はフロントエンドとバックエンドを切り離すという、マイクロサービスの考え方に基づいています。 開発をすすめていくと、特に複数のチームで管理している場合 フロントエンド層が肥大化して管理が難しくなりがちです。 これを「モノリシックなフロントエンド」と呼びます。 マイクロフロン
Webアプリケーションのベンチマークをとるときに気をつけている10のこと - たごもりすメモ
10もないかも、と思いながら項目を書き出してみたら10以上余裕であってキリがないので10で収めた。いやあ、あるなあ。 仕事柄よくベンチマークを実行したりしてて色々と思うところが溜まっていたところ、以下のような記事を見掛けたのでなんか書こうと思った。ところでこの記事はベンチマークを実行するための準備作業がループを回して2時間かかるところの待ち時間に書かれている。 sfujiwara.hatenablog.com ISUCONといえば多少縁があるコンテストで、文中でISUCON5のことについても言及されているので、それも含めて。 自分が業務でいじっているのは "Webアプリケーション" というとちょっと違うんじゃないのというものばかりだが、いやー、最近なんでもHTTPで外部APIを作るからベンチマークのコツとしては大体変わんなかったりするよね。 なおこの記事でベンチマークはどのようなものかとか
作りたいWebアプリのアイディアを迷走せずに作る方法。まず、エディターを閉じることから始めよう - Make組ブログ
何かを作りたいときは、エディターをいきなり起動してはいけません。 エディターを閉じて、まずはイメージをまとめることに集中しましょう。 なぜこの文章が必要か なぜ何かを作る前にイメージをまとめる必要があるのでしょうか？ 頭の中には完璧な作りたいもののイメージがあることでしょう。 であれば今すぐにでもプログラミングを始めるのが賢明なように思えます。 ですがそうしてはいけません。理由は「作りたいもののイメージは単なる幻想だから です」。 頭のなかにあるイメージはとても素晴らしいものですが、多くの場合は曖昧で、触れられない、価値を検証できないものです。 それを一旦書き出して、まとめていく方法を知っておきましょう。 まとめていく中で作るものがより明確になり、自分でも気づかない価値を発見できます。 作るものをまとめて検証することで、作り始めた後の手戻りを防ぎます 作るものをまとめて明確にすることで、作
Atomic Design
Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook. We’re not designing pages, we’re designing systems of components.—Stephen Hay As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. A lot has been said about creating
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
パスワードに依存しない認証「WebAuthn」をChrome/Firefox/Edgeが実装開始、W3Cが標準化。Webはパスワードに依存しないより安全で便利なものへ
Google、Mozilla、マイクロソフトが「WebAuthn」の実装を開始。これによって「FIDO2」の普及が期待され、Webブラウザから指紋認証や顔認証などで簡単にWebサイトへのログインや支払いの承認といった操作が実現されそうだ。 多くのWebアプリケーションは、ユーザーの認証にユーザー名とパスワードの組み合わせを用いています。 しかしユーザー名とパスワードの組合わせを用いる方法にはさまざまな問題が指摘されています。身近なところでは、安全なパスワードを生成することの手間や、安全性を高めるためにパスワードの使い回しを避けようとした結果発生する多数のパスワードを管理することの手間などがあげられます。 そしてこうしたパスワードの不便さが結果としてパスワードの使い回しを引き起こし、いずれかのサイトで万が一パスワードが流出した場合にはそれを基にしたリスト型攻撃が有効になってしまう、などの状況
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
楽しく学ぶアクセス解析&サイト改善【DPZ×ウェブ解析士】 コーナーの記事一覧 | Web担当者Forum
same-site/cross-site, same-origin/cross-originをちゃんと理解する
Standards.REST
Pingendo
CronMaker