はじめに 連続する複数の半角スペースは1つにまとめられたり、先頭末尾の半角スペースは省略される これははじめてHTMLに触れた人が戸惑う部分だと思います。 ではその半角スペース分の空白をどのようにして表示すればいいのかと調べれば、 などの特殊文字を紹介する記事が数多くヒットします。 HTMLでの半角スペースは なんだと強引に表現するサイトもありますが、半角スペースと が異なることは調べればすぐわかります。 もう文字コードから違います。 半角スペースと は別物なのに、半角スペースを表示するために を使っていいのでしょうか？ 答えはNoだと思います。 結論 半角スペースを半角スペースとして表示するにはwhite-space: pre;を使います。 preはおそらくpre要素のpreですね。 white-spaceはCSSプロパティです。 つまり

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 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

2024年1月時点のAWSベストプラクティスに従って作成しました 好評でしたら続編も検討します 1. 環境ごとにアカウントを分離する 本番、検証、開発ごとにアカウントを分割しましょう ✕良くない例 ◎良い例 最初にアカウント分割しておかないと、後で分割するのはとても大変です アカウントを分割することで「検証と思って作業したら、実は本番だった」のような事故を減らすことができます コストがアカウント単位で集計されるため、環境ごとのコストを簡単に算出することができます AWS Organizationsを使用することで、各環境に応じた権限設定が簡単にでき、ガバナンスを強化することができます AWSアカウントはAWS Control TowerのAccount Factoryを使用することで、クレジットカード情報を都度入力することなく簡単にアカウントの払い出しが可能です また、AWS Contro

はじめに 私は、さくらインターネットというクラウドサーバの会社の社長をしていて、よく経営者の方からのメンタリングのリクエストをいただくことがあります。 その中で多くの割合を占めるのが、ITエンジニア(以降、エンジニア)のマネジメントと、エンジニア組織の構築をどのようにすればいいのかというテーマです。 確かに、どんなビジネスをするにしても、単にSaaSやノーコードツールを活用するだけでは足りなくて、自分たちでシステム開発しないといけないケースが増えてきているのは、間違いないなと思います。 外注をしてシステム構築をするケースももちろん多いですが、基幹システムのような使いにくくても自社の社員が我慢すればいいものと違って、自社のお客様向けのシステムだと使いやすくないとお客様が離脱してしまいますし、常にアップデートをし続けて、最良のUI/UXを作ることが業績に直結します。 要は、今のデジタルシステム

はじめに 本記事はMicrosoft Security Advent Calendar 2023、10日目の記事になります。 シリーズ3部作です。 きっかけ 所属企業にて、2022年7月頃、情報システム部門に異動。種々の課題感に対する解決策（ここも話すと長くなる）としてMicrosoft 365 E5を導入することに決定。2023年1月にテナントにライセンスが適用され、E5セキュリティの実装を始める。同時に、組織内でIdPが複数運用されていることに対しても課題感を持っていたため、IdPの整理・統合も始める。 さらに同時期に、セキュリティ侵害の多くの原因が、パスワード漏洩だということを知る。 フィッシングメールでパスワードが漏洩（個人1位）し、クレジットカードが不正利用（個人4位）されたり、インターネット上のサービスに不正ログイン（個人10位）されたり…。スマホ決済の不正利用（個人5位）もで

この記事は、本番環境などでやらかしちゃった人 Advent Calendar 2023 の4日目です。年末進行、いかがお過ごしでしょうか？みなさま無事に仕事が納まることを願っております… 新人インフラエンジニアが、本番ウェブサーバー60台のホスト名を全部 cat にしてしまった話について、ここに供養させていただきたいと思います 背景 おそらく今から7年くらい前、インフラエンジニアとして転職してきて1年ほどが経ち、本番環境での作業もこなれてきたなというバッチリのタイミングで事を起こしてしまいました。サーバーは CentOS 6 だったと思います。 職場としてはまだまだベンチャー感にあふれ大きな裁量が与えられスピード感のある環境ながら、サービスの登録ユーザー数は1,000万を超え、本番環境の規模としては既になかなかの大きさがあり、ウェブサーバーだけでも60台くらいあったと思います。ひと山につき

pictBLandとpictSQUAREに対する不正アクセスがあり、パスワードがソルトなしのMD5ハッシュで保存されていたことが話題になっています。 2023年8月16日に外部のフォーラムにpictSQUAREより窃取した情報と主張するデータ販売の取引を持ち掛ける投稿が行われた（中略）パスワードはMD5によるハッシュ化は行われているもののソルト付与は行われていなかったため、単純なパスワードが使用されていた29万4512件は元の文字列が判明していると投稿。（それ以外の26万8172件はまだMD5ハッシュ化されたままと説明。） 不正アクセスによるpictBLand、pictSQUAREの情報流出の可能性についてまとめてみた - piyolog より引用 これに関連してMD5ハッシュやソルトに関するツイート(post)を観察したところ、どうもソルトの理解が間違っている方が多いような気がしました。

はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素

ゴールデンウィークのはじめ（4月29日）に投稿された以下のツイートですが、5月7日20時において、1,938.8万件の表示ということで、非常に注目されていることが分かります。 我が名はアシタカ！スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた。どうすればよい！ pic.twitter.com/e26L1Bj32Z — スタバでMacを開くエンジニア (@MacopeninSUTABA) April 29, 2023 これに対して、私は以下のようにツイートしましたが、 これ入社試験の問題にしようかな。『スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた』と言う事象に至る現実的にありえる脅威を説明せよ。結構難しいと思いますよ。 https://t.co/LH21zphCTV — 徳丸 浩 (@ockeghem) April

はじめに みなさんは、CSSのdisplayプロパティを知っていますか？ CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか？ 最近では、display: flex; や display: grid; が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。 そんな中で、CSS Display Module Level 3で、displayプロパティに2つの値を入れることができるようになることがわかりました。 ※ まだ、Firefox 70以上・Safari 15以上でのみ再現できます。(2022年１月20日) そのため、この記事では、displayプロパティに2つの値を入れられることについて解説しようと思います。 背景 まずは、displayプロパティに2つの値を入れられるようにした背景について解説します。 最近displayプロパティに

会社で支給するPCのスペックについて、どういうものが良いのか、よく思案します。(僕は情シスではないのですが) 要は、エンジニアの生産性です。 最近はなんでもブラウザを利用するようになっていて、例えばクラウドを利用した開発や運用ならそのクラウドのWebページを複数開く必要があるし、システムによっては監視アプリケーションや運用に使うアプリや開発自体もWebでやる場合があると思います。 で、私のローカル環境について言うと、今使っているのは32GBメモリのPCなのですが、ブラウザって、タブごとに数十MB～数百MB(大体200～300MB, 大きいときは500MBなど)使ってて、ブラウザだけでめっちゃメモリ食うんですよね。 以下は、FirefoxでAWSの開発/ステージング/本番環境の検証や運用を1日やっていたときの、タスクマネージャでのfirefox.exeの各タブ(=プロセス)でのメモリ消費です

結論 どちらでもいい セミコロン付けても付けなくても落とし穴はある ESLintを利用することで落とし穴を検知できる 私はセミコロンつけない派 自動セミコロン挿入とは 自動セミコロン挿入(automatic semicolon insertion) この仕組みのおかげでセミコロンを使わなくてもコードを書くことができ、コンパイラが行末を察してセミコロンを挿入してくれる 自動セミコロン挿入のしくみはECMAScriptで規定されており、自動セミコロン挿入はJavaScriptエンジン間で可搬性がある 自動セミコロン挿入には落とし穴があり、ルールを理解しておく必要がある 第１のルール：セミコロンが挿入されるのは、"}"トークンの前か、改行の後か、プログラムの末尾だけ

はじめに このようなタイトルになっていますが、100%自分のミスで$200の請求が来ました。 自分はAWSを勉強するため、12ヶ月間のAWS無料枠というもの利用してアカウントを作成しました。 当時の自分は注意事項等をほとんど読まなかったので「これでAWSは1年間使い放題や。たくさん勉強するで〜」意気込んでいました。 AWSを利用し始めてから3ヶ月後に請求の通知が届いていたので内容を確認すると「$200」との記載が。 勉強利用でしか使っていなかったと思っていたので、通知が届いた瞬間は震え上がりました。 結果的には全額は支払わずに済んだのですが、このような過ちをAWS初心者の人が起こさないため(高額請求が来てもなんとかなるよと安心感を伝えるため)記事を書きました。 この記事の主な対象者 これからAWSの学習を始めようと思っている人 AWSの課金周りについて知りたい人 無料枠でAWSを使っている

WHERE 条件のフィールドを UPDATE するのって，明示的にロックしてなくても安全？全パターン調べてみました！MySQLSQLPostgreSQLDatabaseQiitaEngineerFesta2022 TL; DR MySQL/Postgres とも， MVCC アーキテクチャの恩恵で， SELECT と UPDATE は基本的には競合しない。 単一レコードのシンプルな UPDATE でも排他ロックされ，排他ロック中のレコードへの UPDATE での変更操作は トランザクション分離レベルによらず ブロックされる。UPDATE 文に含まれる WHERE 句での検索もブロックされ，これはブロックされない SELECT による検索とは別扱いになる。 但し UPDATE 文の WHERE 句上で，更新対象をサブクエリの SELECT から自己参照している場合は例外。トランザクション分離

複雑なプログラムを書いてしまうのを避けるために、if 文の else を避ける制約を設けてプログラミングしてみましょう、というアプローチがあります。これはあくまで、ThoughtWorks アンソロジーに書かれていた、ある種のプログラミング思考のトレーニング方法のひとつにすぎないものです。 しかし、権威だからか、あるいは、あまりコードを書かない人がわかりやすいと感じるからか、プロダクションコードの規約に使おうとする誤った考えがあります。そんなことをすると、コード品質は下がります。 else 禁止制約というのは、「これまで if-else で記述していた多くのコードは、実は、生成するオブジェクトの多態性によって、分岐の前倒しが可能になるものだったのか」という認識を得られれば、すぐに忘れるべきルールです。 ある実在の OSS コードを例に説明します。 https://github.com/xr

{ "plpgsqlLanguageServer.database": "データベース名", "plpgsqlLanguageServer.user": "ユーザ名", "plpgsqlLanguageServer.password": "パスワード", "plpgsqlLanguageServer.definitionFiles": [ // glob をサポート。 "**/*.sql", "**/*.psql", "**/*.pgsql" ], // Language Server が対応するファイルの拡張子はデフォルトで ['*.pgsql', '*.psql'] です。 // （ SQLite など他の RDS と競合させないためです。） // '*.sql' のファイルも対応させたい場合は、下記の設定を追加してください。 "files.associations": { "*.sq

Reactが好きです。 Reactが好きです。コンポーネントを関数として扱うのが好きです。 SolidJSはReactそっくりの書き心地(DX)を保ちつつ、Reactに足りない要素を兼ね備えた期待の新人です。 コードの比較 React const Counter = () => { const [count, setCount] = useState(0) useEffect(() => { console.log(`Count: ${count}`) }, [count]) return ( <div> <div>{count}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button> </div> ) } const Counter = () => { const [count, setCount] =

この前AWS公式のYouTubeチャンネルにて、面白そうなライブ配信がありました AWSの動画コンテンツといえば、BlackBeltのようなサービス紹介の動画が真っ先に思い浮かぶ方も多いと思います。 自分もその一人ですが、この動画はプロダクトではなく「Infrastructure as Code（IaC）という概念」にフォーカスしたコンテンツです。 Twitterで学びメモを書きましたが、ちゃんと記事として学びをまとめておこうと思います。 また、動画の内容に関連した補足事項を記事の後半にまとめておきました。 ↓動画本編はこちら↓ ↓資料はこちら↓ IaCをなぜ使うのか 純粋にIaCは楽しい、手順書作成は楽しくない リリースのたびに手順書更新 or 新規作成するのは、果たして楽しいのか IaCのほうがリリースまでのリードタイムが短い 運用する上での教育はどうする？ そもそも「教育」はIaCじ

PlanetScaleというサーバレスDBが凄く勢いのあるサービスと聞いて、公式にクイックスタートがあったのでやってみました。 環境 PC: MacBook Pro (Intel Core 2016) OS: macOS Montery12.2.1 では概要から確認していきます。 サーバーレスDBとは サーバがない、のではなく、サーバ管理や検討が不要 AWS Lambda(NoSQL)など PlanetScaleとは PlanetScale年表 2010年頃 YouTubeが急激に成長し、データベースが爆発しそうになっていたので、Sugu氏ともう一人のYouTubeのエンジニアがオープンソースプロジェクト「Vitess.io」（ヴィテス）を立ち上げる 2016年頃 MySQLでバイナリプロトコルを扱えるようにしたことで、VitessはYouTube以外の企業にとっても魅力的なシステムになり

こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン