Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して

WEBアプリケーション開発者です。 特別セキュリティのスペシャリストになりたいというわけでないですが、アプリケーション開発者として徳丸本に記載されている内容レベルのセキュリティ知識はあります。 システムのセキュリティに関してはベンダーの脆弱性診断を通して運用しており、個人的にはセキュリティに関して何か困ったことがいままでありません。 ただ、ふと考えてみると「情報漏洩やサイバー攻撃が発生した際などの有事にどのような行動をとるべきか」という観点ではあまり自信がないなと感じました。社内でもそのような場合の指針が整っているわけではないです。 徳丸先生は、一般的な開発者には最低限どのレベルのセキュリティ知識を求められていますか？ 回答の難しい質問ですが、ここは本音をさらけ出したいと思います。 私が「安全なWebアプリケーションの作り方（通称徳丸本）」を出したのが2011年3月でして、それから13年以

こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます！ きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 （素晴らしい記事をありがとうございます！） これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは？」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動

import { ChangeEvent, FormEvent } from "react"; export default function Form() { const showError = (message: string) => (e: FormEvent<HTMLInputElement>) => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity(message); } else if ( e.currentTarget.validity.patternMismatch && e.currentTarget.name === "postcode" ) { e.currentTarget.setCustomValidity("郵便番号正しく入力してね"); } else

こんにちは。SUZURI事業部の@kromiiiと申します。 私のメインの業務はWebアプリケーションの開発ですが、大学院時代のスキルを活かして並行してデータ分析業務も行っています。 データ分析業務ではデータベースのクエリを書くことが多いのですが、私自身SUZURI事業部に配属されたばかりで、テーブルの名前やリレーションを覚えるのが大変でした。そこでクエリの設計を自動化するツールをSlackに導入しました。 その名も tbls-ask bot です。どのようなものか先に見てみましょう。 ユーザーはSlackでメンションする形で、どのようなクエリを実行したいのか自然言語で入力します。 メンションされるとSlack botが起動し、どのDBスキーマを利用するかを尋ねます。 ユーザーがDBスキーマを選択すると、自然言語からSQLクエリを生成し、Slackに返答します。 今回はパブリックに公開する

元フルスタックエンジニア(死語)をやらせていただいていたものです。 JavaScript(TS)周りの進歩が凄く、あまりにもついていけていなかったので、気になったワードを片っ端から整理してみました。 それぞれに対する説明の正しくないものが含まれてしまっている可能性があります。 そんなところを見つけたときは優しく教えてくださると助かります。 各ツールの詳細というよりは、それぞれがどんな役割のものなのかを記載しています。 この記事が誰かの助けになれば幸いです。 調査・分類した言葉(技術)たち Hono Bun Deno Biome Vite Webpack Turbopack esbuild Babel SWC Prisma まず上記に上げたものが、どういった機能を持つものなのかもわかりませんでした。 それを整理すると以下になるようです。 JavaScript Runtime Deno Bun

今回の記事の内容はGitHub共同創業者のScott Chacon氏の「Pro Git」と同氏の今年の「So You Think You Know Git」（Gitがわかっているとでも思っているか？）発表をベースにしている。 コンフィグ ここでコンフィグにてデフォルトとして指定して損がないオプションをいくつか紹介します。 git rerere git rerereは"reuse recorded resolution"（記録ずみ解決方法を再利用）の略語になっている。 名の通りマージコンフリクトがどう解消されたかを記録し、次に同じようなコンフリクトが発生した際、同様の解決方法を自動的に適用するためのコマンドです。 また、基本的にデフォルトにしてもときに差し支えないため、ぜひgit config --global rerere.enabled trueを実行してみてください。 git main

三井住友カード ゴールド(NL)のデメリットは?メリットない・いらないは勘違い【年会費無料になる100万円修行のコツ】

BARフロントえんどう #2 「CSS Library / Framework」での登壇資料

2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/

meta社製StyleXやChakraチームのPanda CSSなど、CSSフレームワーク界隈は大盛り上がり。そんな各CSSフレームワークはどのような仕組みで動いているのか、自らも「Kuma UI」というCSSフレームワークを作っている観点から深掘りしていきます

フレームワーク「Svelte」「Solid」が話題。画期的だった仮想DOMと脱仮想DOMへの流れ 2024年4月8日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表

キレッキレなPMは他と何が違うのか？ シリコンバレーのPMが重視する「Step Change」という視点 シリコンバレーのプロダクトマネージャー達に見る、 覚悟を決めたPMは何が違うのか？ #1/4 酸いも甘いも経験してきたシリコンバレーのプロダクトマネージャー 曽根原春樹氏：みなさんお集まりいただきまして誠にありがとうございます。初めましての方も、またお会いできましたねの方も、ご無沙汰しています。曽根原です。今年も「PMカンファレンス」に戻ってきました。 今回はテーマが「覚悟」ということで、どんな話をしようかなと思っていたのですが、みなさんにとって刺激的な話になるといいなと思って、それでこのタイトルに決めたわけですね。「シリコンバレーのプロダクトマネージャー達に見る、覚悟を決めたPMは何が違うのか？」ですね。 本題に入る前に、僕のことをぜんぜん知らないという方もいらっしゃるかもしれないの

日本語のWebサイト（ランディングページ等）をつくっていると、読みにくい所で改行されるパターンがありますよね？実際この記事もブラウザの横幅によって単語の途中なのに改行されています。普通に文章を読んでいる時には良いのですが、これがランディングページのヘッドラインで起きるとものすごいカッコ悪いです。 たとえばPhotoshopのページで「写真のレタッチ、合成、カラー変更」というヘッドラインが以下のようになってたらいかがでしょうか？この場合はできれば、「合成、」の後で改行されている方が自然で読みやすくなっています。（ちなみにこれは、Chrome Developer Toolsで編集して、わざと見にくくしたので、実際にはキレイに改行処理しています）。 よーしそれじゃあ<br>入れれば良いんだなと真っ先に思いついた方がいるでしょう。しかし今日はさまざまなデバイスが皆さんのWebサイトに訪れています。

文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？　この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは

Dain 古今東西のスゴ本（すごい本）を探しまくり、読みまくる書評ブログ「わたしが知らないスゴ本は、きっとあなたが読んでいる」の中の人。自分のアンテナだけを頼りにした閉鎖的な読書から、本を介して人とつながるスタイルへの変化と発見を、ブログに書き続けて10年以上。書評家の傍ら、エンジニア・PMとしても活動している。 わたしが知らないスゴ本は、きっとあなたが読んでいる keyboard_arrow_down はじめに keyboard_arrow_down 独学のキモは「いかに継続するか」 keyboard_arrow_down 「顧客が本当に必要だったもの」をいつ知るか？ keyboard_arrow_down チームに笑顔を keyboard_arrow_down 質の高い課題を見極める keyboard_arrow_down 技術を哲学する keyboard_arrow_down おわり

はじめに Rustを使っているとすべてをRustで書きたい欲に駆られることがあります。 たとえば負荷試験ツールもRustで書きたい、みたいなことがあったりします。 ありがたいことにRustではGooseという負荷テストフレームワークがあり、これを使えば負荷テストをRustで実装できます。 ちなみに、GooseはRust Foundationのメンバーであるtag1が開発しているので安心感があります。[1] 本記事はGooseについて基本的・応用的な使い方などについて紹介していきます。 Gooseとは GooseはPython製の負荷テストツールであるLocustにインスパイアされたRust製の負荷テストフレームワークです。 Locustと比べて、約11倍ほどのトラフィックを生成でき、CPUコアを可能な限り使用してくれます。[2] またLocustと違い、フレームワークなのでビルドしたバイナ

ダイソーの｢黒いボール｣を買ってから、PC作業が快適でしょうがない2024.04.09 16:35816,579 三浦一紀 2023年2月20日の記事を編集して再掲載しています。 黒いゆで卵じゃないよ。 PC作業を快適にするために、何も大掛かりな環境改善をする必要はありません。たった110円で買えるこのボールさえあれば良かったんです。 ボールじゃないよ、PCスタンドだよこれ、ダイソーで売っている｢ノートPC用放熱スタンド｣という商品。こう見えて、PCスタンドなんです。 使用するときは、ボールを2つに割ります。パカッ。 半球状のボールを机の上に置いて、そこにノートPCを置くだけ。これで、ノートPCに適度な角度がついてキーボード入力がしやすくなります。 そのほか、放熱効果もあります。底面が熱くなりやすいノートPCでは、かなり効果を発揮します。 お値段以上すぎる満足感ノートPCスタンドはさまざま