👋 はじめに ナイトウ(@engineer_naito)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 🧐 想定読者 Tailwind CSS などの CSS フレームワークを利用したことのある開発者であればスラスラ読めると思いますが、初学者の方であっても問題なく読めると思います。 (なぜならばぼく自身が CSS フレームワークを使ったモダンフロントエンド開発の経験がないからです 🙋‍♂️) 🗾 UnoCSS と日本 UnoCSS は軽量かつ柔軟な Atomic CSS エンジンであり、現在最も注目を集めている CSS ツールの一つです。 人気調査サイトの結果によると、ここ 2, 3 年で確かに人気や知名度が上昇しています。 しかし、日本ではどうでしょうか？ Zenn で「UnoCSS」と検索してみま

CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか？ R

みなさん、ローカルLLMで遊んでいますか？ 昨年末に、Ollamaが登場してから誰でも簡単にローカルLLMで遊べる時代がやってきました。そこで、僕もローカルLLMでどんなことができるんだろうと思って触りはじめたのですが、ローカルLLMを最大限に活用するためには、まずはどうやったらEmacsからローカルLLMを使えるようになるのかと考えるのはあまりにも自然な流れでした。 この記事では、ローカルLLMに関する基本的な知識から、EmacsからローカルLLMを扱う方法までを解説していきたいと思います。 ローカルLLMの基礎知識 # ローカルLLMとは、LLM（大規模言語モデル）をローカル環境、つまり自分のパソコンで扱えるようにしたモデルです。Facebookが開発しているLlamaが業界のトップランナーで、それをベースにしたモデルを色々な組織（中には個人もいるのかも）が開発しています。 そのLla

米Meta（メタ）が2024年7月23日（米国時間）に、オープンソースの大規模言語モデル（LLM）の最新版「Llama 3.1」を公開した。同社のMark Zuckerberg（マーク・ザッカーバーグ）CEO（最高経営責任者）は同時に公開した書簡で、LLMをオープンソース化する理由を説明しているので、その意図を解説しよう。 最先端モデルがオープンソースに 今回メタが公開したLlama 3.1には、機械学習モデルの規模が4050億パラメーターにも達する「Llama 3.1 405B」が含まれている。メタによればLlama 3.1 405Bは、米OpenAI（オープンAI）の最新モデルであるGPT-4oに匹敵する性能を有するのだという。 従来のLlamaシリーズは、オープンAIや米Anthropic（アンスロピック）などがクラウドサービスとして提供する最高性能のモデルと比べて、モデルのサイズは

米Metaは7月24日（現地時間）、“オープンソースの”LLMの最新版「Llama 3.1」を発表した。最大モデルは4050億（405B）のパラメータを持ち、米NVIDIAの1万6000個以上の「H100」でトレーニングした。Llama 3の70Bモデルと8Bモデルもアップグレードされる。 4月にリリースした「Llama 3」同様に、ほぼすべての主要クラウドサービス（AWS、Databricks、Google Cloud、Hugging Face、Kaggle、IBM WatsonX、Microsoft Azure、NVIDIA NIM、Snowflake）で利用可能になる。 15兆トークンを超えるトレーニングデータでトレーニングしたとしているが、データの出所は明示していない。 405Bモデルは、長文テキストの要約、多言語会話エージェント、コーディングアシスタント、将来のAI言語モデルのト

最近はAIエンジニアを名乗ってるerukitiです。フロントエンドもバックエンドも、LLMを触るあれこれもやってるので、「AIエンジニア」くらいを名乗るとちょうどよさそうだなと思ってます。いずれLLM自体の開発なんかもやってるかもしれません。 LLMプロダクトを開発していると、構造化データを作りたいのに、Anthropic ClaudeのAPIにはJSONモードが無いことや、なんならJSONモードやfunction callingを使っても、データが正しい形式に従ってることは保証しがたい、みたいな自体に遭遇することがあります。 JSONが出力できたとしても、構造化データをうまく吐き出させるのは難しいものです。文字列を出力させたいけど、複数あるときは、配列なのか、それともカンマ区切りなのか？項目がオプショナルの場合はどうするか？項目が存在しない、空文字や 0 や undefined や nu

この記事はVim 駅伝の 7/22 の記事です。 また、この記事は デザインを担当した 輪ごむ さんとの共同執筆記事です。 はじめに 2024年7月8日月曜12時、ポッドキャストラジオ番組「 エンジニアの楽園vim-jpラジオ 」がAuDee（TOKYO FM）公式番組として配信開始されました。 本記事では、この vim-jp ラジオの Landing Page(LP) 制作の舞台裏を紹介します！ デザインや技術的なポイントなど、様々な視点から制作のポイントを紹介します。 デザインについて (by 輪ごむ) コンセプト ロゴから以下のようなイメージを膨らませてデザインを考えました。 夜 バーみたい わいわいとした雰囲気 ネオン調 これらのイメージを頭の片隅に置いて大量の web サイトや LP を大量にインプットしてなんとかひねり出したのが今回完成した LP になります。 デザインのレビュ

ムーザルちゃんねるのzaruです。今回はムーさんと、Tailwind CSS初心者が絶対ハマる落とし穴について話しました。Tailwind CSSを使い始めた人、あるいはまだ使ったことがない人には是非見てほしいです。すでにこの落とし穴から抜け出している人はあるよねーって感じで眺めてください。 すごいサムネイル… ハマるポイント クラス名の動的指定 クラス名のコンフリクト クラス名の動的指定 例えば、通常は背景を青だけど、エラーの時は赤くしたい。そんなときにJavaScriptでクラス名を組み立てると以下のように書きがちです。bg- と -500 は固定なので変化する red blue だけ変数で組み立てるやり方です。 const color = error ? 'red' : 'blue'; <div class={`bg-${color}-500`}></div>

useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#

はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ HTMXとは？ HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。 htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. （訳）htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。 </> htmx ~ Documentation ...と言っても

TL;DR この度、unplugin-typia という Library を作りました unplugin-typia を使うと今までめんどくさかった Typia の導入が簡単になります Vite、esbuild、webpackなどフロントエンドで主流の様々なbundlerに対応しています Next.jsでも簡単に使えます Bunにも対応しています はじめに 皆さんはTypeScriptでのValidationにはどのような Library を使っていますか？ zodはエコシステムが硬いし、最近だとvalibotが流行りつつありますね。 またarktypeも注目に値するLibraryです。 typeboxも耳にする機会が増えてきました。 また個人的には（厳密にはValidatorではないですが)、unknownutilも手に馴染んでよく使っています。 既存のValidation Librar

こちらで登壇させていただいた資料です。 https://trident-qa.connpass.com/event/314818/ ※ こちらは2024/05/23 時点の私の考えとなります。更新の予定はございませんのでご了承ください

TL;DR karabiner.tsがとてもいいぞ はじめに macOSユーザーの皆様におかれましては、キーボードのカスタマイズツールとして有名なKarabiner-Elementsをご存知かと思います。 Karabiner-Elementsは、macOSのキーボードイベントをフックして、キーの入力をカスタマイズすることができるツールです。 中でも Complex Rules という機能を使うと、かなり自由度の高いカスタマイズが可能です。 例えば、 CapsLockをCtrlに変更する Commandを空打ちで英/かなを切り替える アプリを起動するショートカットを追加する など、様々なカスタマイズが可能です。 自分も初めてMacを手にした時からKarabiner-Elementsを使っていて、結構カスタマイズしています。 しかし、Karabiner-Elementsの設定ファイルはJSON

Write your scripts in a modern type-safe and runtime-safe programming language that handles many bugs and mistakes during compilation process.

【シリコンバレー=渡辺直樹】対話型AI（人工知能）「Chat（チャット）GPT」を手がける米新興企業のオープンAIは13日、新型AI「GPT-4o（フォーオー）」を開発したと発表した。従来に比べて処理スピードを2倍に高速化した一方、運用コストを半減した。声で話しかけると、ヒトと同じ反応速度で会話ができる。弱点だった反応の遅延を克服し、AIの活用がさらに広がりそうだ。生成AIはオープンAI以外の

米Appleが5月7日の新iPad発表イベントで公開したプロモーションビデオ「Crush!」（記事末に転載）への批判が高まっている。 この動画は、AppleやNIKEなどの大手企業のグローバルキャンペーンを多く手掛けているICONOCLAST（因習打破主義者という意味）という企業が制作した。iPadには音楽やゲーム、写真などのための多数の道具を圧縮した機能が込められていることを表現したもののようだ。 公開直後は主に日本のユーザーの間で批判が高まっていたが、林信行氏が英語で「Apple Event中に新しいiPad Proを紹介するために表示されたこのビデオについてどう思いましたか？　文化的なものかもしれないが、職人技を尊重する日本人の間では不評となっているようだ。中にはひどく不快感や嫌悪感を抱く人もいた」とポストしたり、Appleのティム・クックCEOのポストに日本のアーティストなどが英語

先日、X（Twitter）で、2万人以上のフォロワーを持ち、起業家でありプログラマでもある元木大介さん（@ai_syacho）が、「Zoltraak（ゾルトラーク）」という自然言語プログラムを発表されました。 このZoltraakは、生成AIに対し自然言語（何らかの既存プログラミング言語ではなく日本語）で命令できる、新しいタイプのものです。 ChatGPTとどこが違うの？ 「え、ChatGPTでも日本語でお願いできるじゃん」と思いますよね？ ChatGPTとZoltraakでは、出力の考え方が根本的に違っています。 現在の生成AIは対話式がメイン ChatGPTに代表される生成AIは対話式です。 GPT、Gemini、Copilotなどの生成AIは向上を続け、入力できるテキスト量こそ増えました。しかし、業務全体を俯瞰して依頼することはまだ難しいのが実情です。 分解したタスク毎に内容を依頼し

はじめに よくQiitaでおすすめアプリとかの記事を見かけますが 逆に使わなくなったアプリの紹介記事ってなくね？ と思い今その勢いで本記事を書き進めています。需要があるかはしーらないっ。 本記事では、今年で4年目のエンジニアが作業効率を追い求める中で淘汰されていったアプリたちを紹介します。 ちなみに当方Macユーザです。 エディタ Visual Studio Code 3年目くらいまでは結構使ってました。 settings.jsonやkeybindings.jsonをdotfilesで管理してみたいなこともするくらいには使ってました。 が、何かのタイミングでvimに興味を持ち、vimを使いはじめてから徐々に使わなくなってゆきました。 vimに興味を持った最初の頃はVSCの拡張でvimがあったので、それを使ってました。 VSCでvimの操作を再現できる拡張です。 しかし vimと言えば学習コ

はじめに こんにちは, 普段は情報科学専攻の大学院生をしながらバックエンドエンジニアをやっている @koki-algebra です. 普段は Go をよく書いているのですが, 大学でやっている機械学習の研究では Python を使うことがほとんどです. Go のエコシステムに慣れきった私は Python の混沌とした環境に耐えきれず, 最強の開発環境を整えることを決意しました. 具体的には Package Manager, Formatter, Linter, Type Checker, Test Tool を選定し, VSCode の DevContainer を用いてポータビリティに優れた開発環境を作ることを目指します. また, Deep Learning では GPU が必須である場合が多いので, GPU 環境も同時に整えたいと思います. 以下のレポジトリが今回考えた開発環境のテンプ

去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS