API経由でメール送信をするためのサービスといえば、SendGrid, Amazon SES, Postmarkのような名前が出てくるかと思います。 そんな中、弊社(トラストハブ)でも利用しているResendというサービスがとても使いやすいので紹介します。また、記事後半でResendを日本で使うにあたり重要なアップデートがあったので、どんな点が変わったかを紹介します。 そもそもResendとはどんなサービスか Resendは後発サービスなだけあり、開発体験の良さに主眼が置かれて開発されています。テストでメールが送信できていることを確認する機能や、ログを確認する機能など、細かいところが使い勝手が良いなと感じています。 SDK・設定がシンプル 公式でたくさんの言語のSDKが用意されています。また、フレームワークごとに組み込むためのドキュメントも充実しています。 Knowledge Baseを見
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
簡単にCSSアニメーションのコードを生成できるAIツールが登場しました。テキストや音声でプロンプトを入力するだけで、複雑なCSSアニメーションでも数秒でコードが生成されます。 生成されたCSSアニメーションはその場ですぐ...記事の続きを読む
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
2024/06/19 Findy主催イベント「鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック 」で公開した資料です。 https://findy.connpass.com/event/318569/ デモのURLなどはこちらのURLからアクセスできます。 https://tonkotsuboy.github.io/20240619-findy-css/
CSS で条件分岐を行う `@when/@else` ルール 2024.06.22 `@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイルが、`false` の場合には `@else` ブロック内のスタイルが適用されます。このルールを使うことでより簡潔なコードを書くことができます。
23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。 実際の動作は、デモページでご覧ください。 See the Pen Gradient Overlay with border-image by coliss (@coliss) on CodePen. HTMLはシンプルです。 テキストのh1要素と背景を設定したdiv要素があるだけです。
コンテナークエリー（@container）は、CSSの新しいアットルールです。従来のメディアクエリー（@media）とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート（ブラウザ幅）を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。 コンテナークエリーを利用することで、再利用性の高いパーツを実装できます。とくに、カラム数が多いレイアウトや複雑な横並びの要素において、コンテナークエリーは有効な機能です。 この記事では、簡単な作例と使用上の注意点を紹介します。 コンテナークエリーの使い方 作例の紹介の前に、コンテナークエリーの使い方を簡単に説明します。 コンテナークエリーを使用するためには、使用したい親の要素にcontainer-typeプロパティを設定する必要があります。以下の2通りの指定ができます。 con
Claude3.5の新機能！Artifacts：Claudeとの新しい対話方法 – 完全ガイド - Sun wood AI labs.2
はじめに みなさん、こんにちは！今日は、AI技術の世界に革命を起こす新機能「Artifacts（アーティファクツ）」について、わかりやすくお話ししていきます。Claudeという人工知能と、より効果的に協力して作業ができるようになる、とてもワクワクする機能なんです。 Artifactsとは何か？ 簡単な説明 Artifactsは、Claude.aiで導入された新機能です。ユーザーがClaudeに何かを作ってもらう時、その成果物を会話とは別の専用ウィンドウで見ることができます。つまり、会話しながら同時に作品を見て編集できる、そんな魔法のようなツールなんです。 Artifactsの主な特徴 リアルタイムの表示: Claudeが作った内容をすぐに見ることができます。 編集可能: 表示された内容を自由に編集できます。 作業の継続性: 一度作ったものを基に、さらに改良を加えていけます。 Artifac
NLUX with ReactGenerative UI With Next.jsChatGPT-Inspired UI import { AiChat, useAsStreamAdapter } from '@nlux/react'; import '@nlux/themes/nova.css'; import { send } from './send'; import { user, assistantAvatar } from './personas'; export default () => { const adapter = useAsStreamAdapter(send, []); return ( <AiChat adapter={ adapter } personaOptions={{ assistant: { name: "EinAssistant", tagline
In UI development, making sure everything looks right is as important as making sure it works. Visual tests are image snapshot tests that solve for this. However, somewhat surprisingly, they can also replace the most brittle part of many UI unit tests: asserting on details of the UI. In many cases this can replace the unit test entirely, allowing you to test more with far less code. This post cove
【入門】Reactとは？特徴やインストール方法をわかりやすく解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の山岡です。この記事では、Webアプリケーション開発の際によく用いられるReactについて解説します。 Reactとは何なのか。どんな特徴があるのか。どうやって勉強すればいいのか。まだアプリケーションの開発に馴染みのない方や、プログラムを勉強したての方にもわかりやすくなるよう、適宜用語を噛み砕いて説明していきますので、ぜひご覧になってください。 Reactとは、Webサイトやアプリケーションの開発の際に用いられる、JavaScriptライブラリの一つです。Facebook社が開発し、2013年にオープンソース化されました。 Reactは、JavaScriptライブラリの中でもSPA（シングルページアプリケーション）の開発に特化しており、可読性やパフォーマンスの高さが評価されています。 Reactの特徴として、以下3つが挙げられます。 宣言的なソースコード コンポーネン
JavaScript記述なしでモダンUIを作成できる「htmx」、最新版「htmx 2.0」で何が変わったか
htmxチームは2024年6月17日（米国時間）、JavaScriptライブラリ「htmx」の最新版となる「htmx 2.0」を公開した。htmxは、JavaScriptコードを記述せずに、HTMLからモダンブラウザの機能に直接アクセスできるライブラリだ。 htmxはHTML内の属性を通じて、Ajax、CSS トランジション、WebSocket、Server Sent Events（SSE：サーバ送信イベント）へのアクセスを直接提供する。開発者がハイパーテキストのシンプルさとパワーを生かして、モダンなユーザーインタフェース（UI）を構築できるようにすることを目的としている。 htmxはサイズが小さく、依存関係がなく、拡張可能だ。htmx 1.xは「Internet Explorer（IE）11」と互換性があり、フロントエンドJavaScriptライブラリである「React」の3割強程度のサ
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
Last week, the CSS WG resolved to add an inline if() to CSS. But what does that mean, and why is it exciting? Last week, we had a CSS WG face-to-face meeting in A Coruña, Spain. There is one resolution from that meeting that I’m particularly excited about: the consensus to add an inline if() to CSS. While I was not the first to propose an inline conditional syntax, I did try and scope down the var
slide-ai-codegen.md
slide-ai-codegen.md marp theme paginate true gaia true LLMによるフロントエンド生成自動化 mizchi | Plaid Inc TechFeed Expert Night 31 LLM 使ってますか？ 便利ですよね ChatGPT / GitHub Copilot WebUI じゃなくて CLI で自動化したいですよね？ 黎明期でまともにモジュール化しても無駄そうだし、 Deno の書き捨てスクリプト量産するぞ！ Deno for LLM 設定や依存のインストール不要のTS実行環境 書き捨ての CLI スクリプトが書きやすい => 実験しやすい npm 資産が使える import {z} from "npm:zod" コード評価に Deno Sandbox を用意できる(後述) @luca/esbuild-deno-loader で
CSS設計を学びたい！ どうもエンジニアになって数ヶ月のひよっこすらなっていない卵エンジニアです！🐣 この記事を見ているのはmarginなどのプロパティやレスポンシブ、flexを学んだばかりという方が意外と悩みがちなクラス名をどうつけるかについて記事にしました！参考にしたのは『技術評論社 CSS設計完全ガイド 半田淳志 第5版』です。有名な本なだけあってわかりやすく、分厚い本でしたがスラスラ読めました。 まず、クラス名をつける前に、みなさんはWebサイトを制作するときにどんなことを意識していますか？クラス名をつける前に、制作するWebサイトをどれだけ細分化と抽象化して見ることが出来ているかが大切です。では細分化と抽象化とは何か？それはWebサイトを見たときに、ブロックやパーツごとに分けることを細分化、デザインが共通してるパーツやブロックを見つけることを抽象化と言います。 細分化 細分化を
最近のGoogle広告にはブログの本文の途中に差し込まれるものがあり、記事と広告の区別がわかりづらいことがある。PCからの閲覧時に広告が目立つよう、下のようなCSSをしつらえた。 div.entry-content div.google-auto-placed.ap_container { margin: 4em 0; /* 広告と本文との上下間隔を広くとる */ padding: 2em 0; /* 広告の上下に広告領域の背景色が見える場所を作る */ background-color: rgb(0 0 0 / 0.1); /* 背景色の指定。透明度10%の黒 */ border-radius: 5em; /* 背景色の領域に大きめのRをつけて目立たせる */ } これが こんな感じになる（画像処理ソフトで制作したイメージです） 広告と本文がよりはっきり分離されて、だいぶわかりやすくなっ
週刊Railsウォッチ: Ruby on Jets 6.0がRailsをサポートほか（20240620後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やX.comでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails: 先週の改修（Rails公式ニュースより） 公式更新情報: Ruby on Rails — Better error message, opt-i
中央競馬 着順掲示板シミュレーター｜競馬のあそびば
このシミュレーターについて JRAの競馬場にある、着順掲示板の表示を自由に変更できるシミュレーターを作りました。 各ドロップダウンリストから値を入力・変更すると、即表示に反映されます。 本シミュレーターはJavaScript・CSS等が正常に動作するブラウザでご覧いただけます。JavaScriptが動作しない環境では動きません。 動作確認はWindows11のGoogle Chromeで行なっています。他のOS・ブラウザでも概ね動作すると思われますが、一部ではレイアウトや挙動が異なったり、エラーで正常に動作しない可能性もあります。 京都競馬場の掲示板では輪郭が滲んだような表示になっていますが（参考）、本シミュレーターでは再現していません。また、その他の競馬場に関しても一部再現できていない箇所がある場合があります。 東京・中山・京都・札幌・新潟競馬場以外の表示も近日中に実装予定です。 シミュ
Saw this from Lea being passed around yesterday: A historical day for CSS 😀🎉 If you write any components used and/or styled by others, you know how huge this is! background: if(style(–variant: success), var(–green)); Even if you don’t, this will allow things like: padding: if(var(–2xl), 1em, var(–xl) or var(–m),… pic.twitter.com/cXeqwBuXvK — Lea Verou (@LeaVerou) June 13, 2024 Whoa, right?! Seei
生成AIを検証してみた件 ~ChatGPTは試験問題を作れるのか~ - シー・エス・エス イノベーションラボ（ブログ）
こんにちは。プロダクト・サービス事業部のしゃるたんです。 本日も引き続き、生成AIを検証してみたいと思います。 今回は後輩ちゃんがRuby技術者認定試験を受けるので、試験合格に向けて生成AIで問題文を作ってもらおうと思います。ベンダー資格は年々増えてきましたが、受験料はどれも高いので一発合格して欲しいですね。 試験問題の生成を、ChatGPTで検証 問題文の作成 回答の解説文の作成 Excel形式のデータをもらえるのか？ 【まとめ】生成AIで作った問題集を販売したら、著作権はどうなる？ この記事を書いた人 試験問題の生成を、ChatGPTで検証 問題文の作成 さて今回はChatGPTを使いたいと思います。ChatGPTではしりとりの相手からクイズの作成まで何でもやってくれますので、どこまで性能を発揮できるか検証していきましょう。 いとも簡単に問題を３問作ってくれました。 ただ、解説も欲しい
GitHub - pheralb/svgl: 🧩 A beautiful library with SVG logos. Built with Sveltekit & Tailwind CSS.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Rails: ビューやコンポーネントに条件付きでCSSクラスを追加する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Conditionally Add CSS Classes to Your Views and Components | Rails Designer 原文公開日: 2024/03/94 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 Rails 6.1でリリースされた class_names（#37918）は、私が多用しているビューヘルパーです。 class_namesがなかった頃は、以下のような読みにくいコードを書くしかありませんでした。 <div class="<%= item.for_sale? ? 'active' : '' %>"
はてなブログに載せる画像URL（アドレス）を調べる方法┃カスタマイズの幅も広がります。 - yunico's fluffy life
ブログデザインをカスタマイズする時など、画像アドレス（URL）が必要になることがあります。 はてなブログの「はてな記法」では画像を載せる時 [f:id:はてなID:画像を投稿した日時j:plain] ⬆このような独自コードが使用されていますが、 CSSなどでデザインを設定する場合 https://〜〜〜.拡張子（jpg/gif/png） ⬆このような画像URLが必要になるため、独自コードは使用できません。 この記事では、編集モード（見たまま / はてな記法 / Markdown）に関係なく、画像のURLを調べる方法をご紹介します。 画像URLの調べ方 使用する際の注意点 おわりに 画像URLの調べ方 画像はクリック/タップで拡大できます。 記事に画像を載せた状態にする。 プレビュー画面で画像を長押し右クリックして、画像プレビューを選択する。 を押して画面を大きくする。 URL部分をコピーし
WordPressテーマ THE THOR（ザ・トール）での「コントローラー」のカスタマイズ 2回目を行います。 カスタマイズ内容 「コントローラー」のカスタマイズ 2回目の内容は、下記の通りです。 「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を以前カスタマイズした「■コントローラーのカスタマイズ」と「■コントローラーメニューのホバーエフェクト化のカスタマイズ」に上書きします。 /************************************ ** ■コントローラーのカスタマイズ ************************************/ li.controller__item:nth-child(2) { /*人気順項目の表示無し*/ display: none; } .controller__catLabel:hover {
はじめに Next.js + WordPress API で Jamstack を構築してみようかと思います。 便利なヘッドレスCMSはたくさんありますが、プランによってはお金がかかることが多いので。 WordPressのAPI化 まずはWordPressのAPI化です。 WordPressはデフォルトでも特定のURLを叩くことでJSON形式で値を取得することはできるかと思いますが、それだと不要なデータが多くあったりするためfunctions.phpに独自で実装しました。 以下、手順になります。 ①空のテーマを作る wp-content/themes/ 上記ののディレクトリ配下にテーマ用の適当なディレクトリを作成し3つの空のファイルを格納します。 functions.phpindex.php（今回は触らない）style.css（今回は触らない） ②functions.phpに記事取得の処理
カテゴリ最新記事 スタイルのカスタマイズ WordPressテーマ THE THOR（ザ・トール）での「カテゴリ最新記事のスタイル」のカスタマイズ 3回目を行います。 カスタマイズ内容 「カテゴリ最新記事のスタイル」のカスタマイズ 3回目の内容は、下記の通りです。 「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容をこれまでカスタマイズした「■カテゴリ最新記事 カスタマイズ」部分に上書きします。 これまで「カテゴリ最新記事」のカスタマイズを行っていない場合には追記する形でOKです。 /************************************ ** ■カテゴリーと最新記事 カスタマイズ ************************************/ .categoryBox { margin-top: 0; margin-bottom
【初心者ハンズオン】ReactでTODOアプリを作ってデプロイしよう【Firebase/Shadcn/TailwindCSS】 - Qiita
【初心者ハンズオン】ReactでTODOアプリを作ってデプロイしよう【Firebase/Shadcn/TailwindCSS】TypeScriptFirebaseハンズオンReact はじめに 今回のハンズオンではReactをこれからやっていきたい人に向けてTODOアプリを作りながらReactの基本的な使い方から実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます。 アプリケーションはとてもシンプルなものですので、短時間で学習することが可能です 初心者向けに本記事は書いておりますので、丁寧にセットアップから紹介していきます。 JavaScriptなどの前提知識は不要で、HTMLとCSSの知識があれば行っていただけます またこのハンズオンでは最近人気がでているShadcn/uiを活用しており、学習した後に簡単にカスタマイズをしていただけるはずです。 ハンズオンだけでは使
2024年06月21日21:00 「伏線すげえええええええええええ」ってなった作品って何？ Tweet 1：以下、名無しにかわりましてVIPがお送りします：2012/11/21(水) 19:51:33.81 ID:y89hweZ10 ゴールデンスランバー 【画像】 田舎の道路脇にある、こういう謎スペース好きなやつｗｗｗ 3： 以下、名無しにかわりましてVIPがお送りします：2012/11/21(水) 19:52:34.99 ID:rgur3KXe0 シュタゲ 154： 以下、名無しにかわりましてVIPがお送りします：2012/11/21(水) 20:15:41.28 ID:Hhtnu95A0 >>3 まさにこれ 4： 以下、名無しにかわりましてVIPがお送りします：2012/11/21(水) 19:52:43.05 ID:MEJi4fgG0 さよなら絶望先生 10： 以下、名無しにかわりま
はじめに 初めまして、エンジニアの中西と申します。 2024年1月に株式会社プレックス(以下、プレックス)にマーケティングチームのエンジニアとして入社致しました。 入社してから今日までの時間の中で感じたプレックスの良さや業務内容などをお伝えできたらと思います。 簡単な自己紹介 2019年に新卒で受託,派遣(SES)の会社に入社し、web開発に従事。 2020年2月ごろに転職し、受託,派遣(SES)の会社に入社。web開発に従事。 2022年5月退職 2024年1月プレックスに入社 2022年5月~プレックスへ入社するまでの間、詳細は割愛しますが鬱病のため療養しておりました。 プレックスへの入社理由 これまで受託や派遣(SES)が主の会社に勤めていましたので、成果物に対して明確なフィードバックがある環境に居ませんでした。 そのため、制作物へのフィードバックがCVRなどの数値となって明確に返っ
<div className={style.buttons}> <Button type="button" color="secondary" startIcon={<FiRotateCcw size={18} />} > キャンセル </Button> <Button type="submit" color="primary" startIcon={<FiCheckCircle size={18} />} > 次に進む </Button> </div> このボタンの仕様はざっくりと以下の通りです。 color Prop は以下の2通りの文字列を指定可能 "primary" … 青い背景、白文字 "secondary" … 薄灰色の背景、黒文字 startIcon Prop として ReactNode を渡せる 省略可。渡されたアイコンを、ラベルの左側に配置する つまり、「コンポジション」
こんにちは、アイオイクス株式会社の渥美（@ioix_atsumi）です。私はこれまで1,000件以上のSEO相談を受け、大規模サイトから小規模サイトまで様々なサイトを見てきました。最近のSEOトレンドは、コンテンツ重視です。しかし、優れたコンテンツを評価されるためにはテクニカルSEOが重要な役割を果たします。 とはいえ、テクニカルSEOは時間がかかり、難しく、専門的な知識がないと実行するのが難しいという課題があります。そのハードルを少しでも下げるために、役立つツールをいくつかご紹介します。 それでもなお、テクニカルSEOが難しいと感じる場合は、ぜひ私たちにご相談ください。専門的なサポートで、あなたのサイトの評価を最大化するお手伝いをいたします。 テクニカルSEOとは？ そもそもテクニカルSEOとは、ウェブサイトが検索エンジンによって適切にクロールされ、インデックスされるために技術的な側面を
Nuxt.jsの設定を全部把握する
モチベーション ＝ 設定で何ができるのかを知りたかった。 alias JavaScript および CSS 内のカスタム ディレクトリにアクセスするための追加のエイリアスを定義することで、DX を改善できます。 デフォルト： { "~": "/<srcDir>", "@": "/<srcDir>", "~~": "/<rootDir>", "@@": "/<rootDir>", "assets": "/<srcDir>/assets", "public": "/<srcDir>/public" } analyzeDir nuxt analyze の実行時に Nuxt が生成されたファイルを保存するディレクトリ。 相対パスが指定されている場合は、rootDir を基準とします。 デフォルト："/<rootDir>/.nuxt/analyze" app baseURL Nuxt アプリケーショ
AWS入門したての新卒がTerraformで挑戦！Next.jsサイトをS3に爆速デプロイ - Qiita
こんにちは！新卒エンジニアのあきともです。 「AWS？難しそう...」 「AWS使ってみたけど、ボタンが多くてよく分からない...」 「Terraform？聞いたことない...」 実は、つい最近までそう思っていました。そんな私でも、Terraformを使いWEBサイトを構築できました。本記事ではAWSとTerraformを使ってNext.jsサイトをS3にデプロイした内容をお話しします！ 必要なもの Terraform Node.js AWS CLI Next.jsプロジェクト作成＆ビルド まずデプロイするプロジェクトを作成します。 $ npx create-next-app@latest Need to install the following packages: create-next-app@14.2.4 Ok to proceed? (y) y ✔ What is your pr
The simplest way to add CSS to React. No build configuration required. Inputimport { styled } from "restyle"; const Button = styled("button", { padding: "0.5rem 1rem", borderRadius: "4px", backgroundColor: "blue", color: "white", }); export default function Page() { return ( <Button css={{ paddingInline: "0.8rem", backgroundColor: "pink", }} onClick={() => alert()} > Click me! </Button> ); } Outpu
Some time ago, Hillel Wayne published an article titled Microfeatures I’d like to see in more languages . In this article, he described three kinds of features in programming languages: fundamental features, deeply engrained features, and nice-to-have convenience features. Hillel’s premise was that language designers tend to focus on the first two; however, because the convenience features are rel
Tailwind CSS IntelliSense VSCodeの拡張機能です。 公式提供のもので、エディタでのリンティングや自動補完を有効にしてくれます。 clsx 複数のクラス名を結合するためのライブラリです。例えばpropsで受け取った値に応じてスタイルを変えたい場合などに便利です。 例えば以下のように、基本的に適用するスタイルに加えてalertLevelに応じたスタイリングを適用するといった用途です。 import clsx from "clsx"; const className = clsx( "mt-4", alertLevel === "danger" && "bg-red-500 text-white", alertLevel === "warn" && "bg-yellow-500 text-black", alertLevel === "info" && "bg-bl
こんにちは、SmartHRでキャリア台帳の開発を担当しているプロダクトエンジニアのhosoyaです。 今日は、私たちがどのようにPlaywrightを使ってキャリア台帳のE2Eテストを実装しているかについてお話しします。 なぜPlaywright？ E2Eの導入・運用の検討を始めた当時、SmartHRで運用されているE2Eは、Rspec x Selenium x Capybaraが主流でした。 キャリア台帳は新規プロダクトという事もあり、新しいツールの選定をしてもよいのではないかということでチーム内での検討がはじまりました。 採用理由に関しては以前紹介された「E2Eテストを Playwright で作り直して開発プロセスに組み込む話」とほぼ被ってしまうのですが以下のような理由になります。 PlaywrightはMicrosoftから公開されているE2Eテストフレームワーク 定期的な更新と新
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メール送信サービスのResendが日本でもまともに使えるようになったので紹介したい
Vite ってよく聞くけど何なんですか？ あれは
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック
CSS で条件分岐を行う `@when/@else` ルール
CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます
要素の幅でレスポンシブ対応を行える！ コンテナークエリーの使い方 - ICS MEDIA
The Powerful Conversational AI JavaScript Library | NLUX
Visual testing: The greatest trick in UI development
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
Inline conditionals in CSS? • Lea Verou
HTML,CSS超初心者向け クラス名の付け方 - Qiita
はてなブログの本文中に差し込まれる広告を見分けやすくするCSS - ただいま村
Conditionals on Custom Properties - Geoff Graham
【THE THOR】コントローラーのカスタマイズ 2回目
WordPress で Jamstack｜株式会社Romantist
【THE THOR】カテゴリ最新記事 スタイル 3回目のカスタマイズ
「伏線すげえええええええええええ」ってなった作品って何？ : 哲学ニュースnwk
【入社エントリ】休養を経てプレックスに入社した理由 - PLEX Product Team Blog
【CSS】「状態変化」と「バリエーション違い」はCSS変数で整理できる - Qiita
おススメのテクニカルSEOツール3選と活用事例 - アイオイクスの社員ブログ
Restyle - Zero Config CSS for React
Microfeatures I Love in Blogs and Personal Websites
Tailwind CSSを使う時に一緒に入れておきたいプラグイン・ライブラリ3選 - Qiita
キャリア台帳のE2EテストでPlaywrightを利用している話 - SmartHR Tech Blog