- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
［速報］マイクロソフト、RPA機能でWindowsアプリ操作を自動化する「Power Automate Desktop」パブリックプレビュー開始、日本語版も。Ignite 2020
マイクロソフトはオンラインで開催中の年次イベント「Ignite 2020」で、RPA（Robotic Process Automation）機能を強化したソフトウェア「Power Automate Desktop」のパブリックプレビューを開始すると発表しました。 「Power Automate」は2019年11月にマイクロソフトが発表したノーコード／ローコードツールです。Microsoft Flowと呼ばれていたサービス連携ツールをベースに、ユーザーの操作を記録し再現するRPA機能を追加したものでした。 参考：［速報］マイクロソフト、RPA機能を搭載した「Power Automate」発表。ユーザーの操作を記録、再現実行で自動化。Ignite 2019 マイクロソフトはこのPower AutomateのRPA機能をさらに強化する目的で、今年の6月にはRPA製品ベンダのSoftomotive
作業配信をしているエンジニア一覧
人がプログラムを書いているところを見たり聞いたりしながらプログラムを書くのが好きなので、作業配信をしている人をまとめておきたい。プログラミングについて話している動画ではなくて、プログラムを書いている動画を載せている方が望ましいです。また、僕が英語を聞くのが得意ではないので日本語限定でお願いします。 追記大歓迎です（特にフォーマットはないですが、前例にならって追記してくれるとわかりやすいと思います）
今話題のこれ。 kubernetes.io これに関しての日本語情報として、 @inductor が相当詳細に記事を書いてくれている。 blog.inductor.me blog.inductor.me にも関わらず、未だに完全に間違った解釈をしている人が多く観測される。記事をちゃんと読めば理解できるはずなのだけど、たぶんタイトルしか読んでいない。 タイトルしか読まないのであれば、あえて強めのタイトルにしておけば目にはつくかなと思い、改めて書いてみることとした。 Dockerは非推奨じゃないし、これからもバンバン使え まず @inductorが解説しているとおり、k8sを使っていない人には全く関係のない話なので、今まで通りDockerを使って良い。 が、もう一つ誤解を解いておきたいのが 自分の環境でDockerを使ってイメージ作成し、Kubernetesにデプロイしている人にも、今回の件は
Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。
はじめに WASMをブラウザの外で動かすトレンドに関して「Linuxコンテナの「次」としてのWebAssemblyの解説」というタイトルで動画を投稿したのですが、動画では話しきれなかった内容をこちらの記事で補完したいと思います。 2022年もWebAssembly(WASM)の話題が多く発表されましたが、そのひとつにDocker for DesktopのWASM対応があります。FastlyやCloudflareもエッジ環境でWASMを動かすソリューションを持っていますし、MSのAKS(Azure Kubernetes Service)でもWASMにpreview対応しています。WASM Buildersでも2023年のWASMの予想としてWASMのアプリケーションランタイム利用に関して言及されました。 WASMといえば元々ブラウザ上で高速にC++のコードなどを実行するところから始まっている
自己紹介 本職のエンジニアではありませんが、ちょっとICT系に詳しそうなやつって感じで、部署のサーバ管理を任されたりもしています。 背景 私の（当時所属していた）部署では、毎年、数週間かけて前年の各人の業務実績をとりまとめて一つの冊子（PDF）にするという仕事があり、この作業を少しでも自動化するため、Webサービスが内製されました。当初は単純に各ユーザが自分の業務実績一覧をテキストで用意してアップロードするというものでしたが、秘伝のタレのように毎年少しずつ改良されたり、大幅に作り直されて別システムから業務データを取り込んでからブラウザ上で編集できるようになったりしつつ、なんやかんやあって私が引き継ぎます。他にやりたい人もなく、ひとり鯖管です。OSはCentOS6でした。 このシステムでは、毎年新しいデータを編集するため、その作業開始時にデータを初期化する必要があります。この作業も自動化し、
エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu
1円も使いたくない個人開発のための技術スタック
対象 一般的なWebアプリケーション 特に、学生などはクレジットカードが使えずそもそも支払いができないという状況もあるので無料のものをまとめてみました。 結論として Supabase Next.js Drizzle Cloudflare Pages Cloudflare D1 / KV どんな要素が必要か Webアプリの開発に必要なのはフロントエンドと、バックエンドです。 バックエンドといっても、その中身は実際の処理に加え、DB、またログイン認証機構が必要になります。 フロントエンド フロントエンドとしては、Next.js一強です。 すでにコミュニティも成熟しているので使いやすく、いろんなところに統合できます。 バックエンド処理 バックエンド処理は、Next.jsの"use server";を使えば簡単に行えるので、別にAPIを作ったりする必要はなさそうです。 フロント・バックエンドのデプ
悪名高きスワイプ広告を解析する - Qiita
この記事の概要 ユーザーから嫌われている広告の1つに「スワイプ広告」というものがある。 誤タップをしやすいことが理由だが、あまりにもこの広告だけ誤タップするため調べたところ 実は誤タップしたように見せかけて意図的に広告先に遷移させる広告であるということがわかった。 スワイプ広告とは、左右にスワイプすると画像がついてくるタイプの広告である。 スワイプ広告とは スワイプ広告とは、主にアフィリエイトサイトで見られる広告形式の一つである。 ユーザーは指で画面上の広告を左右にスワイプすることで、広告画像を切り替えることができる。 スワイプによるインタラクティブ性を活かし、複数のメッセージやメディアを使い、魅力的な広告体験を提供することが特徴である。 なぜ悪名高いのか しかし、スワイプ広告はユーザーから嫌われている。その理由は、誤タップを誘発しやすいからである。 誤って広告をタップして画面が遷移してし
Intro Public Suffix List (PSL) は、現在の Web プラットフォームの一端を支えている非常に重要な要素だ。 実はこれが、少数のボランティアにより GitHub でメンテナンスされた、単なるテキストリストであることは、あまり知られていないかもしれない。 最近、このリストへの追加リクエストがあとを絶たず、問題になっている。 そもそも PSL とは何であり、今どのような問題が起こっているのかについて解説する。 Public Suffix List とは何か PSL を解説するには、まず関連する用語について整理する。 Top Level Domain (TLD) 例えば、このブログのドメインは blog.jxck.io であり、これは筆者が取得したドメイン jxck.io のサブドメインだ。 jxck.io は、.io という TLD のサブドメインを販売しているレジ
ブラウザで動くサービスを作るときの技術選定
はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動くWebサービスを開発することが多いのですが、案件の規模感や要求によって技術選定を少し変えるようにしています。「こういうときはこう」みたいに一概には言えないのですが、普段使う構成を紹介します。誰かの参考になれば幸いです。 2022/02/10 現在での内容です。 前提 開発を委託される場合の運用費をどうするの問題があります。クライアントにクレカ登録をしてもらうか、こちらで支払って毎月請求するかになります。僕は毎月やるのがめんどくさいのでできるだけ前者に倒している関係上、あまりいろいろなSaaSを組み合わせて作ることをなるべく避けています。 規模感によらず使っているもの 私の場合、以下が使えるとめちゃくちゃ効率よく開発できます。 GCP 好きだから
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ～俺のやらかしを越えてゆけ～
Customer Identity Cloud powered by Auth0 を使ったマルチプロダクト構築の実践と総括
Stable Diffusion Forgeを表示した様子。基本的な操作は既存のStable Diffusion WebUI AUTOMATIC1111とほぼ同じ 画像生成AI「Stable Diffusion」用の新しいユーザーインターフェース「Forge」が2月6日に登場しました。開発したのは、これまで「Controlnet」や「Fooocus」などStable Diffusion関連の様々な重要技術を開発してきたillyasviel（イリヤスベル）さん。何よりインパクトが大きいのは、グラフィックボードのVRAM容量が小さい安価なPCでも最新版のStable Diffusion XL（SDXL）が動かせることです。 RTX 40シリーズが求められたSDXL SDXLは、2023年8月にStablity AIが発表した画像生成AI。高画質な出力ができる一方、コミュニティーサイトで話題にな
AIコーディングエージェント勉強会
2025/3/25: AIコーディングエージェント勉強会 (プライベート開催) 資料のみ公開版として
Python だけで作る Web アプリケーション第一弾です。HTML/CSS/JSを使わずに、PythonだけでUIを含むWebアプリケーションを作ります。
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ
10年引きこもりニートしてた就職氷河期直撃アラフィフでも社会復帰してReactで成り上がれるよ｜erukiti
社会問題にもなっている就職氷河期直撃世代のえるきちです。クッソどうでもいい専門学校を出てから10年引きこもりニートしてました。 どん底（と言っても本当にどん底ではないかもしれない）からでも、普通に人生なんとかなるみたいな話です。あと、怪しげなサロンやスクールに通うくらいならN予備校に通う方がいいと思いますという話です。 ワナビー界隈だと年収公開したりするようなキラキラパリピが人気集めるんですって？わざわざ金の話をこれ見よがしに語る人、まっとうなエンジニアではないので気をつけた方がいいですよ。 年収は特に書きませんが、スタートアップに勤めて、同人誌書いたりしつつ、面白おかしく生きるのに問題無い金額は稼いでおります。 前提: 他の世代の人への補足アラフィフ4x歳だったら、経験も豊富で金も一杯もらってんだろ当然だろみたいに考える人もいるかもしれませんが、それは必ずしもそうとはいえません。 たとえ
AIコーディングのプラクティス
・Claude Sonnet 3.7を使え ・Project Rules（.cursor/rules）を使え ・ビルド、lint、テストなどで高速にフィードバックさせろ ・1セッションあたりで依頼することはできるだけ少なくしろ ・よく使うコマンドやライブラリはチートシート作れ Yamada 補足 2025/03/06現在 Roo-Code は .cursor/rules を自動で参照しない。.clinerules, .cursorrules, .windsurfrules は自動で見ておりすべてを結合してコンテキストに入れる。Roo-Codeを使う人は .cursorrules を設定しておくのがよい。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 伝えたいことは全てタイトルに書いた。 動機 https://github.com/topics/awesome を眺めていて本当にawesomeなものばかりだった (割にあまりどこにもそのawesomeさが書かれていないように見えた) ので書く。 awesomeリストとは GitHub で使われる慣習的なリポジトリについてまとめてみた#awesome より: 「特定テーマに関するキュレーションを行うリポジトリ。Markdown のリスト表記で一覧化するのが一般的。また、Contribution も受け付けている（人気のあるリポジトリはガ
Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。 8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。 バックエンドが中心ですが、フロントエンドのCSSのテクニックなども磨けます。 8 Projects with modern designs to become a Full-stack Master 2020 by Thu Nghiem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Image Uploader My Unsplash CatWiki Authentication App Shoppingify Chat Group Tw
Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に、微妙に本で紹介した内容では少し足りなかったので、改めて整理のためにブログ記事にしてみました。次回、本が改訂されることがあればこのブログエントリーの内容も入れて加筆したいと思います。 Real World HTTPだとGoを使っていましたが、フロントとサーバーを同時にいじるので、本エントリーではNext.jsをサンプルに使います。Next.jsでプロジェクトを作って（npx create-next-app@latest –ts)、適当なプロジェクト名を入れてアプリケーションの雛形を作っておいてください。 Next.jsでは、1つのスクリプトファイルを作成すると、それがサーバーAPI(/pages/api以下)と、フロントの画面(/pages/以下のapi以外)になります。Next.j
はじめに 近年、AIを活用したコーディングツールが急速に発展し、プログラマーの生産性向上や開発プロセスの効率化に大きな影響を与えつつあります。これらのツールは、コード補完、チャットアシスタント、コーディングエージェントなど、様々な形態で提供されており、プログラマーの作業をサポートしています。 その中でも、オープンソースのコーディングエージェントである「Cline」は、独特のポジションと活発なコミュニティによって注目を集めています。 本記事では、Clineを中心に、現在のAIコーディングツールの動向を探ります。Clineの特徴や利点、そして他のツールとの比較を通じて、AIコーディングツールの現状について考察します。また、Clineのアーキテクチャや実用面、コミュニティの動向についても解説します。 AIコーディングツールは、特に個人のプログラミングの世界に大きな変革をもたらしつつあります。本記
いくつかのクラウドサービスでは、1年程度の無料トライアルや一定額のクーポンなどに加えて、期間の制限なくずっと無料で使える、いわゆる「Free Tier」や「Always Free」と呼ばれる無料枠のサービスが提供されています。 こうした無料枠は試行用の環境や一時的なテスト環境などとして、期間を気にせずサービスを試すうえで非常に有効です。 もちろん、無料提供サービスは提供側の都合によってある日突然終了することもあり得ますが、いまのところ1年前の記事「ずっと無料で使えるクラウドの「Free Tier」主要サービスまとめ。2020年版」で紹介したサービスで終了したものはないようです。 本記事では期限の制限なくFree TierやAlways Freeとして提供されている主なサービスを、2021年版としてまとめました。 Amazon Web Services（AWS） 「AWS 無料利用枠」のWe
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
Google、ORMが生成するSQLが遅いときの調査を容易にする「sqlcommenter」をオープンソースで公開。Rails、Spring、Djangoなど主要なフレームワークに対応
Google、ORMが生成するSQLが遅いときの調査を容易にする「sqlcommenter」をオープンソースで公開。Rails、Spring、Djangoなど主要なフレームワークに対応 SQL文を直接書かなくとも、自動的にSQL文を生成、実行してくれるORM（Object-Relational Mapper）は、プログラミングを容易にしてくれる技術としてRailsやHibernate、Springなどさまざまなフレームワークなどで活用されています。 一方で、ORMが生成するSQL文はときに複雑に、あるいは非効率なものとなり、データベース処理の遅さにつながることもあります。 このとき、SQL文の生成と実行を明示的にコードとして記述する必要がないというORMの特徴が、なぜデータベース処理が遅くなったのか、どのようなSQL文が生成され、そのどこに原因があるのか、といった調査を難しくている面があり
追記: その後の動きについて書きました → Let's Encryptの証明書切替周りその後 このサイトはLet's Encryptで証明書発行しているのでタイトルの件が気になったのだが、どうもあまり話題になっていない。恥ずかしながらSSL周り詳しいわけじゃないので、誤っているかも知れない。識者の意見を求む。 Let's Encryptが使われているサイトがAndroid7.1以前のバージョンで今年の9月29日以降見られなくなる可能性がある 延命策は用意されそうだが、それも来年の9月29日まで Let's Encryptのルート証明書切り替え計画に起因している Let's Encryptのルート証明書の変更 Let's Encryptはルート証明書を自身(ISRG)の認証局のルート証明書(ISRG Root X1)に切り替えようとしている。現在は、IdenTrustのルート証明書(DST
個人開発で 賃貸物件の検索サービス Comfy を作りました1。グラフや地図でサクサク絞り込める UI が特徴のサービスです。とにかく気持ち良い使い勝手を実現するために色々工夫しています。 既にリリースからは 4 ヶ月以上経っているのですが、改めてサービスの概要や、システム構成及び使用した技術・サービスをご紹介しようと思います。2。 サービスの概要 Comfy は日本全国の賃貸物件を検索できる Web サービス です。画面 UI は上の GIF 画像のような感じです。 こだわったポイントを色々書くよりも実際にさわって頂いた方が新感覚の UI や気持ちよさを体感頂けるかと思いますので、 実際のサービス をぜひお試し頂ければ幸いです！ システム構成 図の通り、システムは大きく 3 つに分けられます。 フロントエンド バックエンド データ基盤 使用技術は図の通りではあるのですが、フロントエンドと
StableDiffusionに対応したGakyoを雑な設計のためわずか数日で10万円くらいのクラウド利用料がかかってしまった。
もうみんなプログラマーになれるよ｜shi3z
僕の20年来の親友にnpakaというプログラマーがいるんだけど、彼はもう超凄い。何でもすごい。何でも書けるし何でも早い。本を書くのもプログラムを書くのも、新しいわけわかんない説明書がバグだらけの環境に慣れるのも早い。 んで、これまではちょっとしたことも難しいことも全部npaka(布留川君)に頼んでたんだけど、最近二人とも独立したからつまんないこと頼むのは悪いなと思って「あれはできるんだっけ」くらいのことは自分で何とかしようかなと思った。 それでChatGPTに「Swiftで⚪︎⚪︎やるにはどうすんの?」と聞いたら、Swiftについてほとんど何も勉強してないのに作りたいものが何となくすぐにできてきちゃって、でもまあやっぱりChatGPTだと知識が古いので詰まったらネットで検索すると、だいたい結局npaka(布留川君)のページが出てきてやはり信頼と実績の大先生(仲間内ではそう呼ばれている)です
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
【🚨無職発生注意報🚨】ヒトはこうして仕事を奪われる~Browser Use Tutorial~ - Qiita
はじめに 2025年はAIエージェントの年です。注目されているAIエージェントの一つが『AIが自動で自分のPC画面を操作』するBrowser Useというツールです。 Browser Useの面白さ Browser Useを使うと、AIが自動で自身のPC画面を操作することであらかじめ決めた目的を達成をしてくれます。 簡単な指示を出すだけで、自動でAIが色々操作してくれるのはキャッチーで衝撃的ですよね。 例えば下記のように完全自動でAIが記事を検索して記事の情報を取得してくれます。 簡単な指示でAIが自分で考えて画面操作をしてくれるのは近未来感ありますよね。 しかし、現場でAIを使いこなすには「AIがすごい」のレベルではまだ足りません。 実際に触ってみて何ができるのか？逆に何が苦手なのか？という肌感覚を持つことが非常に重要です。 そこで本記事は、その肌感覚を養うために実際にBrowser U
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを
Intro 2022/06/06 ~ 9 あたりに、長きに渡って策定作業が行われていた HTTP 関連の RFC が大量に公開された。 RFC 9110: HTTP Semantics RFC 9111: HTTP Caching RFC 9112: HTTP/1.1 RFC 9113: HTTP/2 RFC 9114: HTTP/3 RFC 9163: Expect-CT Extension for HTTP RFC 9204: QPACK: Field Compression for HTTP/3 RFC 9205: Building Protocols with HTTP RFC 9209: The Proxy-Status HTTP Response Header Field RFC 9211: The Cache-Status HTTP Response Header Field
Docker終焉は別にしないと思うけど、知っておいたほうがいい知識の補足を書く - inductor's blog
Docker一強の終焉にあたり、押さえるべきContainer事情 を読んで漠然とDockerが終わるって思った人、素直に手をあげてください。別にDockerは終わりません。なんかむしろWASMとかんばるぞって息巻いてて可愛いので頑張って欲しいと個人的には考えています。 その昔、Kubernetes 1.20からDockerが非推奨になる理由 - inductor's blog を書いたら炎上しました。最初の記事の書き方が良くなかったという反省はあるにせよ、世間一般で「Dockerは開発環境で使うやつ」という認識があまりにも広がりすぎているというのが良くわかる勉強の機会になりました。 逆を言うと、みなさんがこれらの記事を読む時には、Dockerという言葉に含まれる意味に注意して読んでいただきたいと思っています。Dockerには大きく分けて以下の意味が含まれると僕は考えています。 Docke
『アメブロのAMPを終了します』
アメーバスタッフブログでも記載させていただいた通り、11/15より順次アメブロのAMP対応を終了させることになりました。 なぜAMPをやめるのか？2016年の3月にアメブロはAMP対応をスタートさせていました。 （当時のブログ記事はこちら） そこから5年以上AMPを採用し、モバイルの検索結果からはAMPキャッシュに飛ぶようになっていました。 Googleの検索結果からはGoogleのキャッシュに移動するわけで、当然体感速度としては良好なものであったと思います。 「それなのになぜやめるのか？」 ですが、基本的にはビジネス的な問題となります。 ウェブ界の状況、社会状況等々によっての総合的な判断ということになります。 検索結果がクリックされた際にGoogleのキャッシュが表示されるという点では、CDNのコスト削減等はあるのですが、それでもやはりトータルで考えたときに今回はAMPを終了させるという
tl;dr foobarhogehoge.invalidは絶対にリクエストが飛ばないのでおすすめ あらすじ 書いていたコードは、とあるミドルウェア向けに内部利用するURLを環境変数で受け取るようになっていた。普段は実際の内部のURLが書かれているのだが、テスト時には以下のようにダミーを設定していた: FOOBAR_EXTERNAL_URL="https://example.com/foobardummy" テストではこのURLを利用しないのだが、内部で環境変数のバリデーションを行っている都合上、とりあえず適当なURLを指定しなければ起動してくれないから、こうなっていた。重ねて言うが、実際はこの環境変数を利用していないのでこれでいい。 しかしこれだと、うっかり内部の様子がおかしくなったりエンジニアが狂ってしまった場合に、example.comに本当にアクセスしてしまう。なおかつ、セキュリティ
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
Windowsで開発
Windowsで開発環境を整えた。 背景 開発環境を改善しようと思い、PCデスクの見直しなどをやっていたら、Windowsでも開発できるようにしようと思い至った。新しい環境を試してみたい気持ちが1割と、新しいゲーミングPCを組みたい気持ちが9割だ。 エディション Windows 10 Homeエディションを利用している。 Windows 10 ProにはHyper-Vという仮想化機能を直接利用できる利点があるが、WSL2で同じようなことをより便利に実現できるようになったおかげで、この点においてPro版の必要性は薄れてきている。今のところ自分のやりたいことはWindows 10 Homeですべて実現できている。 Windows Update WSL2を使うために、Windowsをバージョン2004・ビルド19041に更新した。 日々の自動更新ではバージョン1903で止まっていて、まだ自動では
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
Dockerは非推奨じゃないし今すぐ騒ぐのをやめろ - Cloud Penguins
あなたが教わってるそのCSSテクニックはもう古い – TAKLOG
Linuxコンテナの「次」としてのWebAssembly、の解説
管理者用初期化URLを踏んでWebサービスのデータをふっとばした話 - Qiita
面白Web API 100連発 - pastak-pub
Public Suffix List の用途と今起こっている問題について | blog.jxck.io
画像生成AI、安いPCでも高速に 衝撃の「Stable Diffusion WebUI Forge」 (1/4)
Python だけで作る Web アプリケーション(フロントエンド編)
フロントエンドを集中的に学習できる究極の無料リソースを厳選してみた！ -
GitHubのawesomeリストが本当にawesomeなものばかりだから一度見てほしい - Qiita
2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ
ファイルダウンロード完全マスター | フューチャー技術ブログ
ClineとAIコーディングツールの現状 - laiso
ずっと無料で使えるクラウドの「Free Tier」主要サービスまとめ。2021年版
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
Android7.1以前でLet's Encrypt証明書のサイトが見られなくなる | おそらくはそれさえも平凡な日々
【個人開発】爆速な賃貸物件の検索サービスを作った - Qiita
10年ぶりに一人でWebサービスを作って思ったこと(エンジニア老人会)｜shi3z
テストの学習へようこそ！ | web.dev
Webフロントエンドパフォーマンスチューニング85選 - Qiita
HTTP 関連 RFC が大量に出た話と 3 行まとめ | blog.jxck.io
テスト用に適当なドメインを注入したいときは .invalid を使うとよさそう - Lambdaカクテル
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
キーボード操作を意識したHTML/CSSコーディング
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp
www.nikkei.com