Next.js って App Router が出てきて平和じゃなくなったよね
背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、App Router が導入されるまでは、技術選定の無難な選択肢として Next.js が最有力でした。しかし、現在は App Router の設計のプラクティスが未発達なことや、オーバースペックであるという見方が出てきており、検討しなければならないことが多くなったように感じます。 そうした中で、ではその懸念というのはどのようなものがあり、導入しずらい要因に何があるのか、というところが、今回執筆を行う上での背景になります。 App Router導入で考えないといけな
CSSの擬似要素に代替テキストをつける
こんにちは、株式会社ナレッジワークの@nakajmgです。 今回はChrome 127 betaの機能紹介を見て「こんなのあったの？」となった、擬似要素に代替テキストをつける機能について紹介します。 /で区切って代替テキストが指定できる ::beforeや::afterのcontentプロパティは、/区切りで代替テキストが指定できます。
Python, Docker, Scrapyを使ってURLからWebページをHTML形式でダウンロードする
$ docker-compose up -d --build Creating network "docker-scrapy-spider_default" with the default driver Building scrapy [+] Building 32.9s (8/9) => [internal] load build definition from Dockerfile 0.0s => => transferring dockerfile: 369B 0.0s => [internal] load .dockerignore 0.0s => => transferring context: 2B 0.0s => [internal] load metadata for docker.io/library/python:3.8.12-bullseye 3.6s => [1/
【Python】Webスクレイピング サイトをマルッとダウンロード - Qiita
はじめに Pythonによるスクレイピング&機械学習 開発テクニック BeautifulSoup,scikit-learn,TensorFlowを使ってみようを一通り勉強させていただき、自分なりに工夫したアウトプットと学習ログを残しておこうと考えたため、本稿を記述しています。 本稿はあるページからリンクされている画像やページをマルッとダウンロードする方法について記述しています。 BeautifulSoupやCSSセレクタなどを駆使しますが、サイトからデータをマルッとダウンロードするにはもう一工夫必要のようです。 例えば、＜a＞タグのリンク先が相対パスになっていたり、リンク先がHTMLである場合など、そのHTMLの内容をさらに解析する場合は、リンク先を再帰的にダウンロードする必要があります。 それらを踏まえたマルッとダウンロードの実現方法のまとめになります。 必要なモジュール Beautif
GCP、AWS、Azure 別に見るクラウド VM への攻撃経路まとめ
概要 本稿は、クラウド内の仮想マシン (VM) サービスに対する潜在的な攻撃ベクトルを特定・緩和するための戦略について解説します。組織はこの情報を使って、VM サービスに関連する潜在的リスクを理解し、防御メカニズムを強化できます。この調査では、Amazon Web Services (AWS)、Azure、Google Cloud Platform (GCP) という 3 つの主要クラウド サービス プロバイダー (CSP) が提供する VM サービスを中心に取り上げます。 VM はあらゆるクラウド環境で最も利用数の多いリソースの 1 つで、その多さがゆえに、攻撃者らの主要な標的にされています。私たちの研究からは、インターネットに公開されているクラウドホストの 11% には、深刻度が「緊急 (Critical)」または「重要 (High)」と評価される脆弱性があることがわかっています。 V
Delay loading of Google Analytics / Google Tag Manager script for better PageSpeed score and initial load
Delay loading of Google Analytics / Google Tag Manager script for better PageSpeed score and initial load So I was recently doing some performance optimizations on a website, ensuring it loads as fast as possible, and that Search Engines like Google prioritize it over the competition. I came across the "Add Expires headers" recommendation and was sad to realise we only scored "F" (i.e. 1/100 point
10年稼働してきたSNSピリカサービスをPython2からPython3へマイグレーションしました - Pirika Developers Blog
概要 こんにちは、SNSピリカ開発チームの冨田です。 今年の1月にAPIサーバをPython3に移行するプロジェクトを完遂しました。 本プロジェクトは、SNSピリカ開発チームのメンバーはもちろん、それ以外のメンバー、業務委託で一時的に関わってくださった方々、テストで関わってくださった方々、すでに退社された方々など、たくさんの方々の知恵が詰まっています。 目次 概要 目次 背景 全体の流れ 全体のインフラ構造とその前後 Phase1: マイグレーションの基盤の作成（2020年〜） Phase1-a: Python3のAPIへの立ち上げ・Python2へのAPIへのリダイレクト Phase1-b: 使用できなくなるGAEのバンドルサービスの移行 Phase1-b-a: 検証環境でのCloud Memorystore for Redisの代わりにGCEのプリエンプティブルインスタンスの活用 Ph
GitLabとGoogle Cloudの統合がパブリックベータに。GitLabの認証からソースコード管理、ランナーの実行、デプロイまですべてGoogle Cloud上で
GitLabとGoogle Cloudの統合がパブリックベータに。GitLabの認証からソースコード管理、ランナーの実行、デプロイまですべてGoogle Cloud上で ソースコード管理やCI/CD機能などの開発プラットフォームを提供するGitLabは、Google Cloudとの本格的統合をパブリックベータとして公開しました。 これによりGitLabの認証、ソースコード管理、CI/CDランナーの実行、デプロイまでパイプライン全体がGoogle Cloudのサービスと連係統合され、ユーザーはこれらを利用して迅速にDevOpsのパイプラインを実行できるようになります。 Imagine a world where you can seamlessly move from code creation to deployment — all within a single integrated p
Astroで、ローカルの画像を最適化する
ローカルにある画像を（動的に）最適化するのは難しい importを使えない状況だってある 通常、Astroでローカルの画像を最適化する場合、importであらかじめ画像を静的に指定しておく必要があります。いつも画像の場所が一意に定まっているのであればいいのですが、動的に取得した画像を最適化したいこともあるかと思います。 ですが、astro:assetsでローカルにある画像を扱うのは意外と難しいです。例えば、以下のようなコードで画像を最適化しようとしても、出力されるのは最適化前の画像です。ファイルパスをstringで渡すような使い方は、astro:assetsではできないのです。 --- import {Picture} from "astro:assets"; interface Props{ image: string; // スクリプトの呼出元から画像のファイルパスが渡される } co
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
Largest Contentful Paint を最適化する | Articles | web.dev
これらの時間の内訳はガイドラインであり、厳格なルールではありません。ページの LCP 時間が一貫して 2.5 秒以内であれば、相対的な比率は関係ありません。しかし、いずれかの「遅延」部分に不要な時間を大量に費やしている場合、2.5 秒の目標を常に達成することは非常に困難になります。 LCP 時間の内訳は、以下のように考えることができます。 LCP の時間のほとんどは、HTML ドキュメントと LCP ソースの読み込みに費やされます。 LCP の前にこれら 2 つのリソースのいずれかが読み込まれていない場合は、改善の余地があります。 各要素を最適化する方法 適切に最適化されたページで各 LCP のサブパートの時間がどのように変化するかがわかったところで、次はページの最適化に取り掛かります。 以降の 4 つのセクションでは、各要素を最適化するための推奨事項とベスト プラクティスを紹介します。こ
Cloudflare Proxy 導入後に発生した526エラーの原因と解決方法 | DevelopersIO
Zennチームの五十嵐です。 Zennでは2024年2月頃から、CloudflareのProxyを導入しています。導入から2ヶ月ほど経過したある日、Proxyを導入している一部のサービスで、Cloudflareが526エラーを返すようになりました。 本記事では、その原因と解決方法について説明します。 前提 ZennのサービスはGoogle Cloudで稼働しています。 問題が発生したサービスは、Cloud Run + Cloud Load Balancing という構成です。 この構成に、CloudflareのProxyを導入しました。 ※画像では「フル」が選択されていますが、当時は「フル（厳密）」が選択されていました。 発生した事象 2024/4/1の18時頃から、Zennの機能の一部である「埋め込み」を返すサービスのエンドポイントが、526エラーを返すようになりました。Cloudfla
Astro SSRでBasic認証
フツーにやろうとしたら結構つまづいたので備忘録的にメモっておきます。 早速ですが、答えから先に書いておきますね --- const authorization = Astro.request.headers.get('authorization') const pieces = authorization?.split(/\s+/g) if(authorization) { if(pieces) { if(pieces[0] === 'Basic') { const buffer = Buffer.from(pieces[1], 'base64') const credentials = buffer.toString() console.log(credentials) const [username, password] = credentials.split(':') if(user
ゆるっと話すSLI/SLOを設定してよかったこと出来ていないこと
https://yuru-sre.connpass.com/event/317749/ 登壇資料
Google App Engine，default_expiration，気をつける - hitode909の日記
Google App Engineのapp.yamlで，静的ファイルのキャッシュ期間を設定することができる． これだと一日． default_expiration: "1d"ここに載ってる． http://code.google.com/intl/ja/appengine/docs/python/config/appconfig.html#Static_File_Handlers このキャッシュはブラウザにキャッシュされると同時にGoogleのサーバーでもキャッシュされているようで，Googleのサーバーにキャッシュされてる間は，デプロイし直しても配信されるファイルは更新されない． 最近作ったやつで，そうとは知らずに，キャッシュを10日にしていて，バグを直したりページの構成を変えたりしたものの，8月23日まで更新されない状態になって，すごくテンションが下がった． 10日だからまだいいけど，
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サーバーレスファーストで考えるクレジットカードビジネスの最適化 / Business Optimization for Credit Card by Serverless
DMMプラットフォームにおけるTiDBの導入から運用まで
ソラストグループのこども事業 | 好奇心が未来を創る保育園
astro-middleware-examples/basic-auth/src/middleware.ts at master · understanding-astro/astro-middleware-examples
GitHub - digital-go-jp/design-system-example-components: デジタル庁デザインシステムのサンプルコンポーネント
