ロードバランサーってなんやねん
はじめに どもども、インフラ案件で奮闘中の井上弥風（いのうえみふう）です。 現在プロジェクトでELB（Elastic Load Balancing）を使用しており、その内部機能を完全に理解したいと思い、この記事を書きました。 この記事について この記事の最終的な目標は、「ELBとは何か？」を深く理解し、それを自信を持って説明できるレベルになることです。 しかし、ELBを完全に理解するためには、まず基本的なロードバランサーの概念を押さえる必要がありました。 そこで、この記事ではELBの根底にあるロードバランサーとは何かという点に焦点を当てていきます。 ELBの詳細については、この記事の後に公開予定の「ELBってなんやねん」という記事で詳しく取り上げます。 ELBに興味のある方は、ぜひそちらもご覧ください。 記事のゴール この記事を通じて、ロードバランサーがどのようにしてトラフィックの負荷分散
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
フルリモートで相手に気持ちよく仕事をしてもらうためのコツあれこれ
社内のプチ発表に使った資料です。 文章のコツ 前置き フルリモートでは、文章でのやり取りがメインになる。 なので、文章がヒドいと「この人と仕事するのキツイ」と思われちゃう😢 そう思われないための色々思ったことを自戒メモ。 なるべく箇条書きにする
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
x86-64機械語入門
この記事はx86-64の機械語を書けるようになるためのガイドとなることを目指します。読者はアセンブリー言語について既にある程度知っていることを想定します。 情報源 x86-64の機械語のオフィシャルなガイドはIntelのSoftware Developer ManualまたはAMDのAMD64 Architecture Programmer's Manualです。 Intel SDM: Intel® 64 and IA-32 Architectures Software Developer Manuals AMD64 Architecture Programmer's Manual, Volumes 1-5 このほか、Cから呼び出される関数を定義したり、Cの関数を呼び出すためには、呼び出し規約の知識も必要です。使用される呼び出し規約はOSに依存し、Unix系では主にSystem V ABI
新入社員「DNSってなんですか？」→ これ、どこまで答えられますか？？？？？？？？？
はじめに 「DNSって何ですか？」 エンジニア・プログラマの皆さんは会社の同僚や後輩などにこの質問をされたらどこまで回答できますか？ 大体の人は、「Domain Name System(ドメイン・ネーム・システム)の略称で、IPアドレスとドメインの紐付けをおこn.....」 みたいな回答になってしまうと思います。 特に自分のような、フロントエンド周りが主領域のエンジニアにとってはDNSの理解はかなり後回しになってしまうかなと思います。 今回は、そんなあまり業務でDNSに携わらない方々に向けて、DNSの最低限知っておきたい基礎知識をやさしくお届けできたらなと思います。 ※タイトルではめちゃくちゃ煽りましたが、本記事は割と基礎的な内容になっています。ご安心を。 DNSとは まずは、DNSとはなんぞやというところから入っていきたいと思います。 DNSとは、冒頭にも登場しましたが、Domain N
ChatGPTのVSCodeプラグインが神すぎる件について
(追記) 自動ログイン機能が利用規約に抵触していたらしく、マーケットプレイスより削除されました。 GitHubにAPIを使ったものは残っているので、知識があれば動作させられるかと思います。（自己責任） これを使った再配布等の行動はトラブルの元なので控えた方がよいでしょう。 ChatGPT いいよね 最近一番メッセージやりとりしてるのChatGPTだし、なんなら1日にしゃべる量よりChatGPTと話してることの方が多い可能性まであります ChatGPTのチャットツール自体はこちらから参加して試せるわけですが、プログラムを書くときに使ったことのない言語やライブラリを開拓する際ここまで有難い存在はありません． このようにネット上を探し回ると地味に時間のかかる情報もチャット形式で手に入ります． さて、今回の話題ですが、我が愛しのテキストエディタ「Visual Studio Code」のChatGP
【決定版】プログラマーが情報収集で必ず確認するべきWEBサイト 8選(2022年10月時点)
はじめに 今回の記事では、プログラマーが情報収集で必ず確認するべきWEBサイトを8つ一覧形式で紹介する。本記事の読者の対象は主に以下の通り。 プログラミング初心者 情報収集で困っているプログラマー 他のプログラマーの情報収集を参考にしたいプログラマー 効率よくプログラミング学習を進めたい人 プログラミング学習を楽しくさせるサイトを知りたい人 freeCodeCamp.org 世界最大規模のプログラミングメディア「freeCodeCamp」の公式サイト。8,000以上のチュートリアルがあり、しかも無料でPythonやJavaScriptなどのプログラミング言語の基礎的な文法、機械学習、WEB開発やモバイル開発などをこの１つのサイトで体系的に学べる。プログラマーは全員このサイトを確認するべきである。 GitHub 世界中のプログラマーがソースコードを共有したり、共同でプロダクトを開発したりする
もっと使いやすいコマンドラインツール10選
背景 ls、cd、psなどのコマンド。 いずれも30年前のもので、今でも毎日使っていますが、"オープンソースの世界には、これらの「古い」Linuxコマンドに代わり、より優れたコマンドラインツールがあるのだろうか？"と思いました。 本記事では、Linuxのコマンドと同じことができるだけでなく、より使いやすいパラメータ、一目でわかる表示、クロスプラットフォーム対応など、使い方、パフォーマンス、表示の面でより優れた新機能を追加したオープンソースのコマンドラインツールを10個まとめてみました。 1. dust（du） 開発言語： Rust Github： https://github.com/bootandy/dust スター数： 4.4k 代替コマンド： du 使用方法： dust プラットフォーム： Windows、Linux、macOS 説明: ディレクトリやファイルのサイズを一目でわかるよ
正規表現の先読み・後読み
正規表現の「先読み（lookahead）」「後読み（lookbehind）」について紹介します。 正規表現の「位置へのマッチ」 正規表現は、文字列のパターンマッチに使われます。たとえば [0-9]{4} は数字4つが並ぶ文字列にマッチする表現です。 多くの正規表現は「文字列」にマッチしますが、「文字列」ではなく「位置」にマッチする表現があります。これは、アンカーと呼ばれます。また、長さ0の文字列にマッチすると考えて、ゼロ幅アサーションとも呼ばれます。 アンカーの例として、^（先頭）$（末尾）\b（単語の境界）などがあります。 この例では、cat にはマッチします。一方、category や concat は cat を含みますが前後が単語の境界になっていないためマッチしません。 先読み 先読み（lookahead）は、位置にマッチする記法の一種です。位置の指定に正規表現を使います。(?=
君には今から3時間で機械学習Webアプリを作ってもらうよ
新人: 「本日データサイエンス部に配属になりました森本です！」 先輩: 「お、君が新人の森本さんか。僕が上司の馬庄だ。よろしく！」 新人: 「よろしくお願いします！」 先輩: 「さっそくだけど、練習として簡単なアプリを作ってみようか」 先輩: 「森本くんは Python なら書けるかな？」 新人: 「はい！大学の研究で Python 書いてました！PyTorch でモデル作成もできます！」 先輩: 「ほう、流石だね」 新人: 😊 先輩: 「じゃ、君には今から 3 時間で機械学習 Web アプリを作ってもらうよ」 先輩: 「題材はそうだなぁ、写真に写ってる顔を絵文字で隠すアプリにしよう」 先輩: 「あ、デプロイは不要。ローカルで動けばいいからね。顔認識と画像処理でいけるよね？」 新人: 😐 新人: (えぇぇぇぇぇぇぇ。3 時間？厳しすぎる...) 新人: (まずモデルどうしよう。てかもら
いちばんやさしい webpack 入門
webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何？ モジュールを 1 つ（もしくは少数）にまとめることでブラウ
中小企業でApple製品を利用する前にやっておくこと
はじめに 企業でApple製品を利用したいというニーズは昨今とても多くなってきていると思います。 しかもApple製品は買えばすぐに使えてしまうというメリットでもあり、企業としては情報統制という意味でデメリットとなります。 またゆるく使い始めてしまうと、後々企業できちんと管理する場合にとても面倒な事になります。 この記事では、今後Apple製品を利用しようとしている中小企業の情シス担当者向けに、事前準備として実施しておいた方がよいことをまとめます。 こんな企業にお勧め スタートアップ これからApple製品を使い始める予定があるけど、よくわかってない 実はもう使っちゃってるけど、心配。。。 やっておく事リスト appleの営業担当と繋がる AppleStoreForBusinessの設定 ABM(AppleBusinessManager)の設定 Appleの営業担当と繋がる 何をするにもま
エンジニアを始めてから便利だったツールまとめ
概要 エンジニアになってから出会った便利ツール・アプリを備忘録としてまとめました。 ※WEB用ツール多め GUIツール・アプリ デスクトップ上で動作させるやつ。 Authy https://authy.com/ 2FAアプリ。Multi-Deviceという複数端末で使える機能があり、PCでログインする際の2FAをPCのみで完結できるので便利。 Hyper https://hyper.is/ コンソールアプリ。テーマ機能やプラグイン追加で自分の好みに環境を整えやすくて見た目がよい。 設定を.hyper.jsファイルで管理するので、gitにて設定管理ができて便利。 VSCode https://code.visualstudio.com/ 言わずもがなの高機能コードエディター。特に理由がなければ基本的にはプログラミングするならこれを使えばいいんじゃないかな。 豊富なプラグインや設定で、Hype
加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける
はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
作ってわかる！ はじめてのgRPC
Python だけで作る Web アプリケーション(フロントエンド編)
フロントエンドのデザインパターン
