marumoe-devのブックマーク (2,154)

  • Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化

    Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <div> <div class="text-xs font-bold uppercase tracking-wider text-slate-600">{{ eyebrow }}</div> <div class="leading-snug font-bold text-slate-700"> <a :href="url" class="hover:underline">{{ title }}</

    Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化
  • ブラウザの仕組み  |  Articles  |  web.dev

    序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門ガイドは、 イスラエルのデベロッパー Tali Garsiel 氏による多数の研究の結果です。1 ~ 2、3 ブラウザの内部構造に関する公開データをすべて確認し、 あまり時間を費やすことはありません。彼女は次のように書いています。 ウェブ デベロッパーとしてブラウザの操作の仕組みを学ぶ より適切な意思決定を行い、開発の背後にある正当性を理解するのに役立つ ベスト プラクティスをご覧ください。これはかなり長いドキュメントですが、Google に 時間をかけて調査を進めていきます。できてよかったね。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは最も広く使用されているソフトウェアです。この入門編では 舞台裏で働きます「google.com」と入力するとどうなるかを確認し

  • 【GPT-4の全てを凌駕】SNSでも超絶話題の最強のAI『Claude 3』を徹底解説《使い方+プロンプト付き活用事例10選》※実務で使えるプロンプト集63選も紹介|チャエン | 重要AIニュースを毎日発信⚡️

    「Claude」シリーズの最新進化版である「Claude 3」は、異なる特性を持つ3つのモデルファミリーで構成されています。企業のユースケースに最適なスピードとパフォーマンスの組み合わせを、市場に出回っている他のモデルよりも低価格で提供しているのが特徴の一つです。 OpusとSonnetは現在、claude.aiと159カ国で一般利用可能なClaude APIで利用可能です。Haikuは近日中に利用可能になる予定です。 また、GPT-4Vのような画像認識能力も新たに搭載されました。 Claudeの4つの能力高度な推論:単純なパターン認識やテキスト生成を超えた複雑な認知タスクを実行できる。 視覚分析:手書きのメモやグラフから写真まで、ほとんどすべての静止画像を書き写し、分析する。 コード生成:HTMLCSSでウェブサイトを作成したり、画像を構造化されたJSONデータに変換したり、複雑なコー

    【GPT-4の全てを凌駕】SNSでも超絶話題の最強のAI『Claude 3』を徹底解説《使い方+プロンプト付き活用事例10選》※実務で使えるプロンプト集63選も紹介|チャエン | 重要AIニュースを毎日発信⚡️
  • どうしてあなたの共通化は間違っているのか:目次 - Qiita

    はじめに この連載では共通化とモジュール分割について扱います。この話題においてQiitaで有名な記事のひとつが@MinoDrivenさんの単一責任原則で無責任な多目的クラスを爆殺するでしょう。この記事を未読の方はまずこちらを読むことをお勧めします。連載では、この記事に書かれているような基礎的な事項については既知であることを前提に、どのようにすれば単一責任原則にそったモジュールの分割を行うことが出来るのかをなるべく 「場合による」という言葉に逃げずに なるべく 網羅的・理論的に 解説します。 いいね、ストックをよろしくお願いします。 対象読者 設計に興味のあるエンジニア 基礎的な設計原則について学んだものの、実際の場面でどのように応用すればいいのかが掴めないエンジニア ミクロな設計についての知識を増やしたい人 ※この記事では、特定のメソッドをどのように作成するべきか、このクラスは複数の処理

    どうしてあなたの共通化は間違っているのか:目次 - Qiita
  • AIイラストが理解る!StableDiffusion超入門【2024年夏最新版】A1111、Forge対応|賢木イオ

    AIイラストが理解る!StableDiffusion超入門【2024年夏最新版】A1111、Forge対応 こんにちは、2022年10月からAIイラスト技術解説記事をweb連載してます、賢木イオです。この記事は、これまでFANBOXで検証してきた120(約70万文字)を超える記事をもとに、2024年春現在、画像生成を今から最短距離で学ぶための必要情報をまとめたメインコンテンツです。 これから画像生成を学びたい初心者の方や、手描きイラストAI技術を取り入れてみたい方が最初に読む記事として、必要知識が網羅的に備わるよう解説しています。素敵なイラストを思い通りに生成するために覚えるべきことを紹介しつつ、つまずきやすいポイントや参照すべき過去記事、やってはいけないことなどを紹介していますので、最初にこの記事から読んでいただくとスムーズに理解できるはずです。 解説役は更木ミナちゃんです。よろし

    AIイラストが理解る!StableDiffusion超入門【2024年夏最新版】A1111、Forge対応|賢木イオ
  • パフォーマンスを改善するには仕様変更が1番はやい

    PHPerKaigi 2024の登壇資料です。

    パフォーマンスを改善するには仕様変更が1番はやい
  • E2EテストでNextAuth認証(OAuthなど)を突破する方法

    NextAuth (Auth.js) で認証させているWebアプリをPlaywrightなどでE2Eテストする際に、認証をどうやってさせるか、あるいは回避するかが悩ましい部分です。 もし採用している認証方式が、単純なID/パスワード認証であればテストユーザを作成し、Playwrightにパスワードを入力させれば認証できるので問題はありません。 しかし、Google認証などの外部のプロバイダを経由するような場合は、E2Eテストをすることが難しくなります。そこでこの記事では、NextAuthの認証済み状態をPlaywrightで再現させる方法を紹介します。 やり方は大きく2つ NextAuthの設定に依存してやり方は大きく2つあります。 セッションデータを database で管理している場合 セッションデータを jwt で管理している場合 データベースの場合 セッションデータをデータベースに

    E2EテストでNextAuth認証(OAuthなど)を突破する方法
  • フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代

    こちらのイベントのLT登壇資料です。 https://ochacafe.connpass.com/event/308830/ 登壇後、資料内の論理展開を登壇者の判断で改善しております。以下は登壇時からの主な修正点です。 ・レガシーMPAについて、FCPのみに着目して初回表示が遅いとしてい…

    フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代
  • デザインプロセスに生成 AI を取り入れる実験 ~プロンプト全公開~ - Techtouch Developers Blog

    デザイナーの keita です。 年始にベンチプレスの MAX 測定をしたら 105kg でした。今年の目標は 120kg です。 この記事では、生成 AI をデザインプロセスに取り入れるためにチームで試行錯誤した内容を紹介します。ぜひ、最後までお付き合いください。 きっかけ はじめに AI を使ってみる インタビューデータからペルソナを作成 まずは 1 人ずつ整理 1 人のペルソナに統合 ペルソナの課題抽出 リサーチを AI で代替してみた結果 AI が作成したペルソナを使ってみる ペルソナにヘルプセンターの記事を評価させてみる 結果 最後に あとがき ボツ案 文字起こしデータから記事を作成 出力された記事のトーンを変更 出力された記事 きっかけ 「ChatGPT をはじめとした AI ツールが便利なのはわかったけど、自分たちの業務をより効率化するためにデザインプロセスで代替できるところ

    デザインプロセスに生成 AI を取り入れる実験 ~プロンプト全公開~ - Techtouch Developers Blog
  • いつか起業したいエンジニアへ - Qiita

    はじめに 34 歳のとき、勤めていた会社の経営が傾き早期退職を促されたのを契機に独立しました。その後、41 歳で Authleteオースリート 社を設立しました。諸般の事情で現在も Authlete 社の代表取締役という肩書きを持っていますが、経営者的な仕事は他の人に任せ (参照: シリコンバレーのプロフェッショナル CEO を迎えて米国市場に挑戦する日のスタートアップの話)、50 歳目前の現在もプログラマとしてコードを書き続けています。 Authlete 社設立 (2015 年 9 月) から 8 年半弱経過したものの、まだまだ小さな会社で道半ばであるため、起業家として何か語るのは時期尚早ではあるものの、軽い体調不良が長引く中、『自分のエンジニアとしてキャリアを振り返ろう!』という記事投稿キャンペーンを見かけ、生きているうちに子供世代のエンジニアの方々に何か書き残しておこうと思い、文章

    いつか起業したいエンジニアへ - Qiita
  • ChatGPTで画像生成するならコレ! おすすめGPTs紹介 (1/6)

    OpenAIは1月10日、カスタムバージョンのGPTを作成できる「GPTs」機能で作成した多様なGPTを探索できる「GPT Store」の公開を予告通り開始した。今回はストアーのラインアップから画像生成系の「DALL·E」カテゴリーを取り上げてみよう。 「DALL·E」カテゴリー 「DALL·E」カテゴリーには言うまでもなくOpenAI画像生成AI「DALL·E 3」を便利に使うために作られたカスタムGPTが掲載されている。今回は上位6個のGPTを使ってみることにする。 まずは「DALL·E」カテゴリーのトップ「image generator」というGPTを試してみよう。説明欄には「プロフェッショナルかつフレンドリーなトーンで画像を生成し、洗練させることに特化したGPT(A GPT specialized in generating and refining images with a

    ChatGPTで画像生成するならコレ! おすすめGPTs紹介 (1/6)
  • Next.js + Vercel + Supabase を用いた高速アプリ開発 - RAKUS Developers Blog | ラクス エンジニアブログ

    こんにちは!ラクス入社1年目のkoki_matsuraです。 日は、Next.jsVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダは以下の通りです。 Next.jsとは ReactNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabaseの連携 GitHubからクローン Vercelから環境変数を取得 Supabaseのデータベースに接続 コード編集 終わりに 参考文献 Next.jsとは Next.jsReactベースのアプリケーションフレームワークです。 公式サイトではNext.jsとはReactを用いたWebアプリ開発で生

    Next.js + Vercel + Supabase を用いた高速アプリ開発 - RAKUS Developers Blog | ラクス エンジニアブログ
  • AWSが教えてくれないコスト削減の小話いろいろ | 外道父の匠

    米ドル/円 が150円と計算しやすくなり、コスト削減の圧力が日々強まる中、皆様お宝探しと垂れ流し回収の真っ最中でございましょうか。 最近はコスト削減や予算について見ることが多いので、その中で出てきた面白げな話に雑談を加えてとりとめなく書いてみようと思います。 削減余地はある 昨年にご好評いただいた AWSコスト削減とリソース管理 | 外道父の匠 を含め色々な削減施策を試みてきましたが、サクッと成果になる箇所から泥沼に動かない所まで様々あったりします。 ただ、どんなアカウントでもトラフィックや処理負荷には波があり、それに対する余剰リソースを確保して構成しているので、その辺をキュッと絞ることまで含めればやれることは必ず一定以上存在することになります。 そういう大きなお宝ではない小さなお宝だと様々あり、古びたとか退職者が作ったとかで、ほぼ使っていない垂れ流しリソースやデータをかき集めれば、チリツ

    AWSが教えてくれないコスト削減の小話いろいろ | 外道父の匠
  • 踏み台サーバー、SSMセッションマネージャー、EC2 Instance Connect Endpoint サービスを使用したEC2インスタンスへの接続方法と特徴を比較してみた - NRIネットコムBlog

    はじめに 踏み台サーバー経由で接続する方法 ①セキュリティグループを作成する ②パブリックサブネットに踏み台サーバを作成する ③プライベートサブネットにEC2インスタンスを作成する ④踏み台サーバーにプライベートサブネットに配置されたEC2インスタンスのキーペアをコピーする ⑤踏み台サーバーにアクセスする ⑥踏み台サーバーからプライベートサブネットにあるEC2インスタンスにアクセスする SSMセッションマネージャー経由で接続する方法 VPCエンドポイントを使用した方法 ①セキュリティグループとIAMロールを作成する ②プライベートサブネットにEC2インスタンスを作成する ③VPCエンドポイントを作成する ④SSMセッションマネージャー経由でEC2インスタンスに接続する NATゲートウェイを使用した方法 ①IAMロールを作成する ②プライベートサブネットにEC2インスタンスを作成する ③NA

    踏み台サーバー、SSMセッションマネージャー、EC2 Instance Connect Endpoint サービスを使用したEC2インスタンスへの接続方法と特徴を比較してみた - NRIネットコムBlog
  • リレーショナル・データベースの世界

    序文 私の仕事は、DBエンジニアです。といっても別に望んでデータベースの世界へきたわけではなく、当初、私はこの分野が面白くありませんでした。「Web系は花形、データベースは日陰」という言葉も囁かれていました。今でも囁かれているかもしれません。 ですが、しばらくデータベースを触っているうちに、私はこの世界にとても興味深いテーマが多くあることを知りました。なぜもっと早く気づかなかったのか、後悔することしきりです。 もちろん、自分の不明が最大の原因ですが、この世界に足を踏み入れた当時、先生も、導きの書となる入門書もなかったことも事実です。 今でこそバイブルと仰ぐ『プログラマのためのSQL 第2版』も新入社員には敷居が高すぎました (2015年2月追記:その後、自分で第4版を訳出できたのだから、 人生は何があるか分からないものです)。 そこで、です。このサイトの目的は、データベースの世界に足を踏み

  • 「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

    「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
  • Shadow DOMとCSSの現状

    2024-02-27 DOMDOMトークス #1

    Shadow DOMとCSSの現状
  • yamlでテストシナリオを書いてそのまま実行までできるAPIテストツールの新星 “runn” を試してみた | DevelopersIO

    yamlでテストシナリオを書いたらそのまま実行できる……そんな夢のようなシナリオテストツール"runn"の紹介とやってみた記録です これまでのシナリオテストツールに対する課題感 シナリオテストツールといえば、 Cucumber や Gauge といったツールが有名です。 ですが、これらのツールは「シナリオファイル」とは別に、シナリオを実行するためのコードも書かないといけません。しかも、そのコードではAPIを呼び出す処理を特定のプログラミング言語を使って書かなければなりません。その中には、HTTP Clientを実際に操作するような処理も含まれます。 私は「シナリオテストがしたい」のであって、「シナリオに沿ってAPI呼び出しを行う処理を書きたい」のではありません。こういった課題感を、ここ数年ずっと抱えてきました。 そんなとき、ついに見つけたツールが "runn" でした。 APIのシナリオテ

    yamlでテストシナリオを書いてそのまま実行までできるAPIテストツールの新星 “runn” を試してみた | DevelopersIO
  • SaaS アーキテクチャ概要

    SaaS をアーキテクトをするにあたって、どのような事を考えればよいのか?をまとめました。 このスライドでまとめているのは SaaS とは、ビジネスモデル x 技術であることを理解する SaaS アーキテクトでどのように SaaS を作っていくのか?を考える SaaS KPI で…

    SaaS アーキテクチャ概要
  • 今からでも遅くないconsoleを使いこなそう - Qiita

    はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています!興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために

    今からでも遅くないconsoleを使いこなそう - Qiita