Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
Gmailの新スパム規制対応全部書く
[2024年1月10日、19日追記] GmailとYahoo!側のアップデートに合わせていくつか細かい説明を追加しています（大筋は変わっていません）。変更点だけ知りたい方は「追記」でページ内検索してください。 2023年10月3日、Googleはスパム対策強化のため、Gmailへ送るメールが満たすべき条件を2024年2月から厳しくすると発表しました。また米国Yahoo!も、2024年2月 第一四半期[1] から同様の対策を行うと発表しています。端的に言えば、この条件を満たさないと宛先にメールが届かなくなるという影響の大きな変更です。 この記事では、Gmailや米国Yahoo!の規制強化への対応方法を解説します。ただし米国Yahoo!にメールを送る人は多くないと思うので、フォーカスはGmail寄りです。また、メール配信サービス（海外だとSendGridやAmazon SES、国産だとblas
pictBLandとpictSQUAREに対する不正アクセスがあり、パスワードがソルトなしのMD5ハッシュで保存されていたことが話題になっています。 2023年8月16日に外部のフォーラムにpictSQUAREより窃取した情報と主張するデータ販売の取引を持ち掛ける投稿が行われた（中略）パスワードはMD5によるハッシュ化は行われているもののソルト付与は行われていなかったため、単純なパスワードが使用されていた29万4512件は元の文字列が判明していると投稿。（それ以外の26万8172件はまだMD5ハッシュ化されたままと説明。） 不正アクセスによるpictBLand、pictSQUAREの情報流出の可能性についてまとめてみた - piyolog より引用 これに関連してMD5ハッシュやソルトに関するツイート(post)を観察したところ、どうもソルトの理解が間違っている方が多いような気がしました。
要約 Wifiは無いに等しいと考えること。 (来場者1万強/日 なんていう状況下でWifiが動くと想定するのが駄目でした) 進捗管理する第三者を設けること。 ソースコード https://github.com/Na4Yu/EasyEats (RTDBのURLやSquareの個別キーは抜いているのでそのままは使えないです) はじめまして はじめまして、高校2年のNaYuです。 今回は文化祭で派手に失敗した話をさせて頂きます。 血反吐を垂れ流しながら書いていましたが、もし皆さんが文化祭を経て「この人のしたことをしなくて良かった~」なんて言っていただければ幸いです。(人の不幸は蜜の味) お願い 本記事は知見の共有を目的として個人が執筆したものであり、本記事の内容について学校、学校関係者への問い合わせはご遠慮頂けるようお願い申し上げます。 これを読んでいる後輩の方々へ この記事が私からの引き継ぎに
GPT-4の回答を向上させる「プロンプト26の原則」、220以上の生成タスクが実行可能なマルチモーダルモデル「Unified-IO 2」など重要論文5本を解説（生成AIウィークリー） | テクノエッジ TechnoEdge
2014年から先端テクノロジーの研究を論文単位で記事にして紹介しているWebメディアのSeamless（シームレス）を運営し、執筆しています。 1週間分の生成AI関連論文の中から重要なものをピックアップし、解説をする連載です。2024年初っ端の第27回目は、「礼儀は不要」「モデルに質問させる」「良い解答には報酬」など、大規模言語モデルの返答が向上する「プロンプト26の原則」をはじめとする5つの論文をお届けします。 生成AI論文ピックアップ複数の自律AIエージェントが過去の経験を共有して未知のタスクを処理するモデル「Experiential Co-Learning」 画像から動く3Dシーンを生成する新モデル「DreamGaussian4D」 大規模言語モデルの返答が向上する「プロンプト26の原則」が公開。「礼儀は不要」「モデルに質問させる」「良い解答には報酬」など 220以上の生成タスクが実
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
こんにちは。エムスリー・QLife(エムスリーのグループ会社)・エムスリーヘルスデザイン(エムスリーのグループ会社)でエンジニアとして各種作業に関わっている山本です！ 以前もメール送信の話を書かせていただいたことがありますが、今回もまたメールネタとなります。今回のお題はメールセキュリティです。 大量メール送信のための予備知識 - エムスリーテックブログ すでにご覧になった方もいるかと思いますが、次のようなニュースが流れています。 www.proofpoint.com この「GoogleとYahooの新Eメール認証要件」ってつまりどういうことよ？ というところを具体的にどのように進めているかについて書かせていただきたいと思います。 2023/12/18追記 : Googleからメール送信にTLSを使うことが追加要件として示されました。 TL;DR とりあえず何から始める？ 何はともあれ実際に
2024年1月時点のAWSベストプラクティスに従って作成しました 好評でしたら続編も検討します 1. 環境ごとにアカウントを分離する 本番、検証、開発ごとにアカウントを分割しましょう ✕良くない例 ◎良い例 最初にアカウント分割しておかないと、後で分割するのはとても大変です アカウントを分割することで「検証と思って作業したら、実は本番だった」のような事故を減らすことができます コストがアカウント単位で集計されるため、環境ごとのコストを簡単に算出することができます AWS Organizationsを使用することで、各環境に応じた権限設定が簡単にでき、ガバナンスを強化することができます AWSアカウントはAWS Control TowerのAccount Factoryを使用することで、クレジットカード情報を都度入力することなく簡単にアカウントの払い出しが可能です また、AWS Contro
連日さまざまなサイバーセキュリティ犯罪のニュースが報じられる中、いまだに日本のセキュリティレベルは高いとは言えない状況にあります。一方で、企業がサイバーセキュリティ対策を進める上では、人材不足や経営層の意識・関心、コスト、導入による利便性の低下など、さまざまな壁が立ちはだかっています。 そこで今回は、株式会社網屋が主催する「Security BLAZE 2023」より、サイバーセキュリティのエキスパートによる講演をお届けします。本記事では、米金融大手で1億人以上の個人情報が漏えいした事件の背景をひもときながら、問題点とセキュリティ対策のポイントを解説します。 Webセキュリティの第一人者が語る、個人情報流出事件の裏側 徳丸浩氏：ただいまご紹介いただきました、EGセキュアソリューションズの徳丸でございます。本日は「米国金融機関を襲った個人情報大規模流出事件の真相」というテーマでお話をさせてい
※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。
悪名高きスワイプ広告を解析する - Qiita
この記事の概要 ユーザーから嫌われている広告の1つに「スワイプ広告」というものがある。 誤タップをしやすいことが理由だが、あまりにもこの広告だけ誤タップするため調べたところ 実は誤タップしたように見せかけて意図的に広告先に遷移させる広告であるということがわかった。 スワイプ広告とは、左右にスワイプすると画像がついてくるタイプの広告である。 スワイプ広告とは スワイプ広告とは、主にアフィリエイトサイトで見られる広告形式の一つである。 ユーザーは指で画面上の広告を左右にスワイプすることで、広告画像を切り替えることができる。 スワイプによるインタラクティブ性を活かし、複数のメッセージやメディアを使い、魅力的な広告体験を提供することが特徴である。 なぜ悪名高いのか しかし、スワイプ広告はユーザーから嫌われている。その理由は、誤タップを誘発しやすいからである。 誤って広告をタップして画面が遷移してし
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。高画質な出力ができる一方、コミュニティーサイトで話題にな
もうみんなプログラマーになれるよ｜shi3z
僕の20年来の親友にnpakaというプログラマーがいるんだけど、彼はもう超凄い。何でもすごい。何でも書けるし何でも早い。本を書くのもプログラムを書くのも、新しいわけわかんない説明書がバグだらけの環境に慣れるのも早い。 んで、これまではちょっとしたことも難しいことも全部npaka(布留川君)に頼んでたんだけど、最近二人とも独立したからつまんないこと頼むのは悪いなと思って「あれはできるんだっけ」くらいのことは自分で何とかしようかなと思った。 それでChatGPTに「Swiftで⚪︎⚪︎やるにはどうすんの?」と聞いたら、Swiftについてほとんど何も勉強してないのに作りたいものが何となくすぐにできてきちゃって、でもまあやっぱりChatGPTだと知識が古いので詰まったらネットで検索すると、だいたい結局npaka(布留川君)のページが出てきてやはり信頼と実績の大先生(仲間内ではそう呼ばれている)です
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
しずかなインターネットの技術構成
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針 趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。 Next.js
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp
はじめに 社内インフラの運用担当者にとってソフトウェアのバージョンアップは地味な割に大変な業務です。 特に社内のオンプレサーバで動いているようなソフトウェアの場合、バージョンアップに伴う諸々の調整をそのソフトウェアを利用している各部署と行う必要があります。 そんなときに「今は忙しいからバージョンアップを先送りしてほしい」「このバージョンはスキップしてもよいのでは？」なんて声が各部署から聞こえてきます。バージョンアップの価値を各部署に理解してもらうのは大変です。 この文章はそんな時になぜバージョンアップしなければならないのかを上司や各部署のマネージャに伝えるために書きます。 ソフトウェアの有効期限は2-5年 まず、第一に、ソフトウェアというものは無限に使えるわけではなく、一定の有効期限があり、それを過ぎると徐々に動かなくなってきます。俗にいう「何もしてないのに動かなくなった問題」です。 なぜ
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに 人は見た目が9割 皆さん一度はこの言葉を耳にしたことがあるのでしょう。内面がどれほど素晴らしくても、外見がそれに見合わないと、なかなか本当の価値を認めてもらえないものです。 この話は人間だけでなく、アプリケーションにも当てはまります。どれだけ内容が素晴らしくても、見た目がイマイチだったり使い勝手が悪かったりすると、ユーザーに敬遠されてしまいます。(私は以前ネ⚪︎フリからア⚪︎プラに切り替えたのですが、使いにくく感じたため、すぐに元のサービスに戻しました) エンジニアの皆さん、優れた技術力を持ちながら、デザインが原因でユーザー離れを招いていませんか？そうならないよう
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
ブラウザキャッシュの仕組みについてまとめた
Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して
バグは“数千パターンのテスト”をすり抜けた ―NTTデータ「2023/10/10 全銀ネット障害」について説明 NTTデータグループは2023年11月6日、10月10日に発生した全国銀行データ通信システムの障害に関する記者説明会を実施、現時点で判明している障害の概要について説明を行うとともに、再発防止策に向けたタスクフォースの設立などについて明らかにしました。会見の冒頭、NTTデータグループ 代表取締役社長 本間洋氏は、今回の障害により全国の預金者や金融機関をはじめとする社会全体に大きな混乱をもたらしたことを謝罪し、今後の原因究明と再発防止に向け、全国銀行試験決済ネットワーク（以下、全銀ネット）とともに全力をかけて取り組むことを明言していました。 本記事では会見の内容をもとに、現時点で判明している10月10日の事故の原因についてレポートします。 2023年10月10日 ―なにが起こったのか
日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを おすすめ度 サイト内検索の可否 いいね/保存機能の有無 ランキング機能の有無 掲載サイト数 を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です！みなさんのデザイン制作に活かしていただけると嬉しいです。 【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
GitHub、1200台以上のMySQL 5.7を8.0へアップグレード。サービス無停止のまま成功させる GitHubが提供するGitHub.comは、世界最大のソースコード管理システムを始めとするソフトウェア開発者向け支援サービスを提供しています。 そのGitHub.comはRuby on Railsで構築されており、同社はつねにRubyとRuby on Railsをアップデートし続けていることを今年（2023年）4月に明らかにしています。 参考：GitHubは200万行規模のRailsアプリケーションであり、毎週RailsとRubyを最新版にアップデートし続けている そして同社はこのGitHub.comを支える1200台以上のMySQL 5.7を、GitHub.comのサービスレベルを維持したまま1年以上かけてMySQL 8.0にアップグレードしたことをブログで明らかにしました。 Up
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
PHPerKaigi 2024 • Day 1での登壇資料です。 https://phperkaigi.jp/2024/ https://fortee.jp/phperkaigi-2024/proposal/0d0f8507-0a53-46f6-bca6-23386d78f17f ※ Authorizationヘッダーを利用したBearerトークン等の活用については言及していません。
Preparing for the end of third-party cookies | Privacy Sandbox | Google for Developers
Preparing for the end of third-party cookies Stay organized with collections Save and categorize content based on your preferences. If your site uses third-party cookies, it's time to take action as we approach their deprecation. To facilitate testing, Chrome has restricted third-party cookies for 1% of users from January 4th, 2024. Chrome plans to ramp up third-party cookie restrictions to 100% o
Webを構成する重要な要素の1つであるHTTPは、その最新仕様で2層構造となり、バージョンに関係なく使えるSemanticsと、特徴の異なる通信仕様を定めたHTTP/1.1、2、3に分割されました。 さらに現在では、HTTPの上にあらためてUDPやIP、イーサネットなどのプロトコルを実装する提案が行われており、まさにHTTPは通信の全てを飲み込む勢いで進化しつつあります。 こうしたHTTPの最新動向の解説が、大手CDNベンダでエッジクラウドなども展開するFastlyが2023年11月8日開催したイベント「Yamagoya 2023」で同社シニアプリンシパルエンジニアの奥一穂氏が行ったセッション「HTTPが全てを飲み込む」にて行われました。 本記事ではこのセッションをダイジェストで紹介していきます。記事は以下の3つに分かれています。 HTTPが全てを飲み込む（前編）～HTTPの2層構造と、H
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
はじめに Gitのステージングエリアにあるファイルを対象に、レビュー結果をSlackに通知するアプリケーションを作成しました。 開発環境のターミナルで指定したコマンドを実行するだけで、Slackにレビュー結果が送信されます。 ソースコードは以下です。 こんな人におすすめ コードレビューを受ける前に自分で事前チェックをしたい方 一人でコードを書くことが多く、レビュワーがいない方 どうせなら楽しくレビューしてもらいたい、好きなキャラクターにレビューしてもらいたい方 アプリケーションの構成 レビュー依頼の手順と流れ 以下のような手順と流れでレビュー結果を得ることができます。 レビュー対象のファイルをステージングエリアに登録する（複数ファイルの登録が可能です） ローカルのターミナルでaireviewコマンドを実行 Slackに必要な情報が送信される レビュー結果を確認する スレッドにレビュー結果が
サブスクリプションサービスをつくる時にエンジニアが考えること / Behind the Scenes: Engineering a Subscription Service
「B/43 Tech Talk 〜 Fintech×サブスクリプションサービス立ち上げの裏側〜」にて @ohbarye が"サブスクリプションサービスをつくる時にエンジニアが考えること"と題して発表した資料です。 イベントURL: https://smartbank.connpass.com/event/289643/
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
あの時代、ジオシティーズにFFFTPでHTMLをアップロードしていたあなたへ。 この本はひさしぶりに個人サイトをやってみようかなと思った方が、「昔のホームページ制作」と「今のウェブ構築・運営」のギャップを埋めるきっかけになればと思ってまとめた本です。 「調べてみても専門用語ばかりだしブランクがありすぎてどこからやればいいかわからない」という方、ぜひどうぞ。 ベテランの方も、2023/11現在のサービスをざっと網羅していますので、最近情報収集していないなという方におすすめです。 個人サイト制作の第一歩としてお役に立てれば幸いです。 [目次] ● インターネット今昔 ● 個人サイトを作る方法 3選+α -HTML手書きで作る -ノーコードツールで作る -ポートフォリオサービスを利用する -CMSを導入して作る ● TIPS
はじめに Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。 console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。 通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業をより効率的に、かつ迅速に進めることができます。 console.log ブラウザの開発者ツールやNode.jsのコンソール上に、渡された引数を表示します
運用出来るWebアプリケーションの作り方
はじめに 先日、下記のようなツイートを見つけて、そういえば趣味で個人開発してたときには然程気にしてなかったけど、仕事で運用するようになって先輩たちから学んだり自分で身につけたチップスってちょこちょこあるよねー、とふと思ったので、Webアプリケーション開発に関わるものをいくつかまとめてみました。 特に体系的/網羅的という程でもないですし、最近はFWや色々な仕組みでカバーされてるものも多いですが備忘録として。 Tips 機械が読めるログを作る これは割と重要なのですが、ログは人間が読むものではなく機械が読むものです。それはZabbixだったりDatadogだったりSplunkだったりgrep/awkだったりツールは何でも良いのですが、古の時代はさておき現代ではログは機械が読めることが最重要です。 まず大前提として構造化されている必要があります。言うまでもないですが「フリーフォーマット」のログの
マイクロサービス化は本当に難しい
はじめに この記事は、AEON Advent Calendar 2023の21日目です🎉 イオンスマートテクノロジー株式会社（通称AST）のCTO室TechLeadチームの@t0doroki_takaです。弊社ではSREチームの発信に勢いがありますが、アプリケーションレイヤーよりの話題も積極的に発信していければと思います。 自分の敗戦の振り返り 以前、大規模ECシステムのリプレース案件に関わった時(そして敗戦したとき)の振り返りです。 今回取り上げるケーススタディは、システム全体(連係するシステム含む)としては段階的移行ではありましたが、主ターゲットとなるシステムは、全EC機能を包括する大規模なシステムで、それをフルスクラッチでリプレースするものでした。 巨大なモノリス構造であったため、マイクロサービスアーキテクチャに移行することで、サービス提供のアジリティを確保することが目的の一つでし
ポエム特化のZenn2との噂の「しずかなインターネット」を使いはじめたので、ユーザーとしてどんな技術が使われているのかを確認していく。 sizu.me おもむろにbuiltwith.comにかけてみる。 builtwith.com ここで分かる情報はブラウザのDevTools眺めてても得られるのであまり収穫はない。 前段にCloudflareのCDNサーバーがいて Next.jsで生成されたレスポンスを返している ことがわかる。 この時点ではキャッシュのみCloudflareなのか、Pages/WorkersでNext.jsのSSRごと動かしているのかは判断できない。 認証 Set-Cookie: __Secure-next-auth.session-token=が含まれているのでNextAuth.jsを使っているのが分かる。 next-auth.js.org Emailでサインアップする
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方50選
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
ソルト付きハッシュのソルトはどこに保存するのが一般的か - Qiita
文化祭で某チェーン店を再現して失敗した話 - Qiita
Gmailのメール認証規制強化への対応って終わってますか？ - エムスリーテックブログ
業務でAWSを利用する時に知っておくべきポイント10選 - Qiita
ITに強いはずのハイテク企業で、1億人超の個人情報が流出…… 「新技術こそ優れている」という思い込みが招いた大規模事件
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
画像生成AI、安いPCでも高速に 衝撃の「Stable Diffusion WebUI Forge」 (1/4)
テストの学習へようこそ！ | web.dev
令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
ソフトウェアはなぜバージョンアップしなければならないのか - Qiita
【閲覧注意】イライラ不可避なUIデザイン10選 - Qiita
バグは“数千パターンのテスト”をすり抜けた ―NTTデータ「2023/10/10 全銀ネット障害」について説明 | gihyo.jp
私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
GitHub、1200台以上のMySQL 5.7を8.0へアップグレード。サービス無停止のまま成功させる
HTTPが全てを飲み込む（前編）～HTTPの2層構造と、HTTP Semanticsとは何か？
デジタル庁でjQueryが何をしているのか - laiso
もう初回コードレビューはずんだもんに任せる時代になった
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
令和時代の個人サイトの作り方：suama works
JavaScriptでconsole.logを使用してませんか？
「しずかなインターネット」の技術スタックを調べる - laiso