こんにちは、Morphでフロントエンド開発をしている三橋です。 みなさん、shadcn/ui使ってますか？😀 shadcn/uiは美しくシンプルなコンポーネント集であるだけでなく、「オープンコード」というコンセプトを提唱しています。これは、バンドルされたコンポーネント集をnpmを通じて配布するのではなく、ユーザーのコードベースにコードをコピーするというアプローチです。これにより、ユーザーは完成されたデフォルトを使うだけでなく、自身の用途に合わせたカスタマイズをすることができます。また、このオープンコードのコンセプトに沿ってコンポーネントを配布するためにCLIも提供しています。 本記事では、shadcn/uiと同様にオープンコードの特徴を持つコンポーネント集を紹介します。 Tremor ✅ ユースケース: ダッシュボードや社内アプリ Tremorは、ダッシュボード構築のためのコンポーネント
はじめに こんにちは、ARCH チームの立川です。 今回が初めてのテックブログになります。 先日、社内で「条件分岐をスマートに評価する」というテーマで、TypeScript（JavaScript）における条件分岐の書き方について発表する機会がありました。古いコードに触れる中で、見通しの悪い記述を多く見かけることがあったため、発表に至った経緯があります。 この記事では、その発表内容をベースにコードの可読性を高める条件分岐のテクニックをご紹介します。基礎的な内容ではありますが、少しでも役立つヒントがあれば幸いです！ 三項演算子をよりスマートに使うためのヒント 三項演算子は非常に便利ですが、状況によってはもっとシンプルで読みやすい代替手段があります。ここでは、等価な三項演算子と比較しながら、それらの方法を紹介します。 null 合体演算子（ ?? ）を活用する null 合体演算子は、左辺が n
はじめに こんにちは！ エンジニア３年目のTKDSです！ 今回はメタデータ管理をPostgresqlやMySQLなどのSQLデータベースが担う新しいOSSのLakehouseフォーマット、Ducklakeについて試してみました！ 今回はPostgresql+s3(minio)+DuckDBで構築してます。 はじめに Ducklakeの概要 準備 1. composeでPostgresqlとminioを起動 2. minioでバケットを作成する 3. DuckDB側の準備と起動 試す まとめ Ducklakeの概要 Ducklakeは公式HPの一文によるとSQLデータベースをカタログ置き場に、データをparquetファイルに保存する形式のLakehouseフォーマットだそうです。 DuckLake delivers advanced data lake features without tr
◇獣医師記者・若原隆宏の「競馬は科学だ」 日本ダービー当日はWINS新白河（福島県）で、俳優の宮川一朗太さん、司会の小島友美さんのトークショーに加えていただいた。宮川さん◎クロワデュノール、小島さん◎マスカレードボール、私◎ショウヘイだったので、いくらかお役に立てたかと思う。弊紙は中京圏で紙発行の中日スポーツを、その他全国各地は電子版で東京中日スポーツをお届けしている。合わせて全国どこでも読める。トーチュウがもっぱら紙発行だった時代には届けられなかった福島でも、読んでいただけるきっかけになればと思います。 最終競走の目黒記念は帰りがけにファンエリアで見たが、4角でハヤヤッコが外に逸走した時は、詳細はわからなかった。その後「右前浅屈腱不全断裂」と発表。一歩間違えば、命に関わっていた事故だった。
小規模のプロジェクトをはじめ、大規模のプロジェクトもサポートしたCSSのベースとなるテンプレートを紹介します。 大きな特徴は、@layerでCSSの構造を明確にし、リセットCSSやサードパーティのCSS、オリジナルのCSSなどのカスケードをより効率よく管理できることです。詳細度や!importantに頭を悩ますこともなくなります。 /* 事前にレイヤーの順序を決定する */ @layer core, third-party, components, utility; @layer core.reset, core.tokens, core.base; @layer third-party.imports, third-party.overrides; @layer components.base, components.variations; /* リセットCSSやノーマライズ */ @i
Claude CodeをWindows上で動かすにはWSLの調整が必要ですが大変に辛ですよね。 この記事ではDevContainerを使ってWindows上でもClaude Codeを簡単確実に動かせる方法を説明します。 勿論、DevContainerを使っているので、MacやLinuxなどのGUI環境でも同じように動作します。 事前準備 VS Codeをインストールする Docker Desktopをインストールする DevContainerの構成 まず、作業用のディレクトリを作成しましょう。ここでは、C:\dev\devcontainer-claude とします。 次に、.devcontainerディレクトリを作成し、その中にdevcontainer.jsonを作成します。 つまり、C:\dev\devcontainer-claude\.devcontainer\devcontaine
スクロールの状態変化でスタイル切替が可能に！ CSSコンテナークエリーのscroll-state()入門 @container scroll-state()は、CSSコンテナークエリーの一種です。従来はJavaScriptを使って実装していた、「スクロールされたらヘッダーのスタイルを切り替える」等のインタラクションをCSSだけで実装できるようになります。 本記事では、scroll-state()の使い方とできることを作例で紹介します。 コンテナークエリーは、記事『要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方』で紹介しています。コンテナー幅でのレイアウト制御にかかわらず、インタラクティブなUI構築にも役立ちます。コンテナークエリーの可能性の広さを感じ取っていただけたら嬉しいです。 ※本記事の作例は、Chrome 133・Edge 133（2025年2月）以上でご覧ください。
はじめに 「動けばいい」で済ませがちなUI。でもそれ、ユーザーには伝わってないかもしれません。 エンジニアの皆さん、機能開発に集中するあまり、UIが後回しになっていませんか？ コードとして正しく動いていても、ユーザーが使いにくいと感じたら、それは失敗です。どれだけロジックがスマートでも、UIが原因で「なんか使いづらい」と思われてしまうと、全体の評価も下がってしまいます。 この記事では、エンジニアがついやりがちなUIデザインのミスとその回避法を紹介します。共感あり、学びありで、読後すぐに「ちょっとUI直してみようかな」と思える構成を目指しました！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 UIデザインにおける「やりが
こんにちは。ソフトウェアエンジニアの id:masutaka26 です。 ROUTE06 では全社ワークスペースに GitHub を利用しています。 note.route06.co.jp ストック情報としての社内ドキュメントは GitHub Pages で社内限定で公開されており、静的サイトジェネレーターとして Docusaurus を利用しています。 検索精度への課題 DuckDB Wasm で検索フォームを実装した DuckDB とは 検索フォームの実装概要 PoC で検討したこと まとめ 参考 検索精度への課題 今までは Docusaurus の Community plugins でも紹介されている @easyops-cn/docusaurus-search-local を使用していました。 フロントエンドだけで動作し、設定もお手軽なのは良いのですが、検索精度に難があり、一部ではリ
樋口恭介 | Kyosuke Higuchi🇺🇦🇵🇸 @rrr_kgknk 生成AIの業務活用推進をしていると、「作業時間がどれだけ削減できるか」「作業がどれだけ代替できるか」「作業品質をどれだけ上げられるか」的な話になって、定量KPIができて大体泥沼化するんだけど、本質的には「認知負荷が下がる」以上の成果は確約できないので、まずはその前提を広く共有したい。 2025-05-29 23:39:09 樋口恭介 | Kyosuke Higuchi🇺🇦🇵🇸 @rrr_kgknk LLMはどれだけ精度が上がっても本質的な思考形式が確率的推論なので、ハルシネーションはゼロにはできないし完全に意図通り制御することはできない。それでも、概ね指示に沿った出力を24時間365日・高頻度・高速・大量に出力得ることができる。人間はそれを叩き台に、いきなり手を動かすことができる。 2025-05-
by Peter Miller テネシー大学の動物行動学者であるウラジーミル・ディネッツ氏が、北アメリカ原産の中型猛禽類であるクーパーハイタカ(Accipiter cooperii)が都市部で越冬する際に、道路の信号や歩行者用の音響信号を利用して狩りを行っていた様子を観察したと報告しています。 Frontiers | Street smarts: a remarkable adaptation in a city-wintering raptor https://www.frontiersin.org/journals/ethology/articles/10.3389/fetho.2025.1539103/full Street smarts: how a hawk learned to use traffic signals to hunt more successfully http
さがらです。 DuckDBの公式ブログにおいて、メタデータ管理をデータベースで担う新しいLakehouseフォーマット「DuckLake」が発表されました。 本記事では、DuckLakeがどういったものか簡単に紹介し、ローカルで軽く触ってみたのでその内容をまとめてみます。 DuckLakeとは まずDuckLakeですが、DuckDBの開発元が開発したOSSのLakehouseフォーマットとなっております。 昨今のIcebergやDelta Lakeではファイルベースでメタデータを管理するという複雑性があったことを課題認識し、そのメタデータ管理を担うレイヤーをIcebergでいうカタログレイヤーも含めて全てSQLデータベースで担う方向性で実装したプロダクトが、DuckLakeとなっております。 DuckLakeのメリットとして、以下4つが上述のリンク先のブログで言及されています。 Simp
約1年前、JavaScriptを使用したdetails要素のアニメーションの実装方法についての記事を投稿しました。しかし、その後の CSS の進化により <details> 要素の開閉アニメーションが CSS のみで実装可能になりました。 正確には、開く際のアニメーションは以前から CSS で実現できましたが、閉じる際のアニメーションは open 属性が即座に削除されるという仕様上、 JavaScript なしでは不可能でした。 この度、 details-content 疑似要素がサポートされたことにより、 CSS のみで閉じる際のアニメーションも実現できるようになりました。 ::details-content - CSS: Cascading Style Sheets | MDN The ::details-content CSS pseudo-element represents th
import { VoltAgent, Agent, createTool, createHooks } from "@voltagent/core"; import { VercelAIProvider } from "@voltagent/vercel-ai"; import { openai } from "@ai-sdk/openai"; import { fetchRepoContributorsTool } from "./tools"; import { fetchRepoStarsTool } from "./tools"; // Create the stars fetcher agent const starsFetcherAgent = new Agent({ name: "Stars Fetcher", description: "Fetches the numbe
ライブドアニュース @livedoornews 【救世主】害獣被害に悩むイチゴ農園を救った一匹の「保護猫」看板猫としても活躍 news.livedoor.com/article/detail… 「コタロー」くんを迎え入れてからは、害獣が入ってこなくなり、果実の被害もゼロになったそう。飼い主は「1200m2もの農園をたった一匹で守り切るようになった」と仕事ぶりに感謝している。 pic.x.com/KiKwEyD1dI 2025-05-17 10:20:59 リンク ライブドアニュース 害獣被害に悩むイチゴ農園を救ったのは一匹の保護猫。“かぎしっぽ”のコタローが運んだ「お客さんと幸せな日々」 - ライブドアニュース 愛媛県のイチゴ農園の経営者が、5歳の子猫を育てている。イタチやネズミがハウスに侵入し、果実を食べられる被害に悩まされていた。看板猫としても活躍し、1200平方メートルもの農園を1匹
Chrome 135でサポートされた::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。さらに::scroll-marker()疑似要素は、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセットを作成できます。 これらを使用すると、これまでJavaScriptなしでは実装できなかったカルーセルをCSSだけで実装できるようになります。その実装方法、CSSで実装したさまざまなカルーセルを紹介します。 Carousels with CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに ::scroll-button()と::scroll-marker()の新しい疑似
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
