PEG Parser Generator + Packrat Parserを実装してみた
詳しい解説はネット上に沢山存在するので割愛しますが、ご覧のようにEBNFの表現の一つに（EBNFはいくつかの表現方法があるようです。例えばこれはW3Cが定義しているものです）似ています。違いは先に述べたようにChoiceの働きが異なるのと、文法上に先読みが存在することです。 このPEGを使って四則演算を受理するシンプルなルールを書くとすると、例えばこのようになります。 # expressionからパースが始まるとする expression <- additive additive <- multitive ("+" multitive / "-" multitive)* multitive <- primary ("*" primary / "/" primary)* primary <- "(" expression ")" / number number <- digit+ digit
WebHID APIを使ってJoy-ConとChromeを簡単コネクト - Qiita
Joy-ConとChromeがツナガル こんな感じでJoy-Conをクネクネ動かしたりスティックをグリグリしたりすると、Chromeに表示されたJoy-Conが連動して動きます。Joy-Conって、普段はNintendo Switchでゲームする時に使うコントローラーなので、こうしてブラウザのChromeと連動して動くだけでワクワクします。 このアプリはGoogleのエンジニアの方が作られたもので、以下のGitHubで公開されています。 https://tomayac.github.io/joy-con-webhid/demo/ https://github.com/tomayac/joy-con-webhid どうやっているの？ WebHID APIという技術が使われています。 このAPIを使うことで、Webアプリケーションからニンテンドースイッチのジョイコンやプレイステーションのデュア
lumeで個人サイトを作り直した - はいばらのブログ
フロントエンド技術に触れる機会を作るために、定期的に個人サイトを作り直している。 今回はVue.jsのSPAから、Deno向け静的サイトジェネレータであるlumeを使った構成にごっそり変えた。 lume.land SSGをしっかり触るのは初めてだったこともあり、ひとまずlumeの公式サイトにあるドキュメントを読んだ。 こういう文書が整理されているのは本当にありがたい。 手を動かしながらチュートリアルを進めてみて、最近のNext.jsやNuxt.jsよりずっとシンプルで、Jekyllなどよりも取り回しが良く拡張性が高い、というような感触があった。 今回はこのような構成で作ってみた。 静的サイトジェネレータ: lume テンプレートエンジン: JSX CSSフレームワーク: Tailwind CSS ホスティング: Cloudflare Pages またTailwindの実装集であるHyper
社内で使う npm パッケージの作成に Deno を採用した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちわ。フロントエンドエキスパートチームの@nus3_です。 最近、社内用の npm パッケージを作る必要があり、そのパッケージは依存が少なく、実装もシンプルだったので、npm パッケージの作成には Deno と dnt を採用しました。 dnt とは dnt は Deno で実装したモジュールを CJS、ESM に対応した npm パッケージに変換してくれるビルドツールです。 使い方も簡単で、次のように dnt が提供するbuild関数にエントリーポイントや出力先などの必要な情報を渡すだけです。 import { build } from "https://deno.land/x/dnt@0.38.1/mod.ts"; await build({ entryPoints: ["./mod/index.ts"], // Denoで実装したモジュールのエントリーポイント outDir:
Vercel AI SDK で Ollama を使う方法
はじめに Vercel AI SDK (React 等から LLM の API をいい感じに stream で呼び出せるようにするやつ) から Ollama （OSS の LLM をローカルで動かすやつ） を呼び出す方法を調べました。 参考 課題 Vercel AI SDK の サンプルコードを、OpenAI から Ollama の langchain のモデルを使って、置き換えて動かそうとしたけど、なぜかうまくいかなかった。 解決方法 ここのディスカッションにいろんな解決方法が記載されている。その中からいくつか試した。 解決方法 1 OpenAI Compatibility API を使う OpenAI API と同じ API で呼び出す方法。呼び出せるモデルに制約がある。マルチモーダルの llava は呼び出せない。 URL 変えるくらい。シンプル。すんなり動いた。 解決方法 2 la
GatsbyJS v2 はじめの一歩 (5) GraphQLによるデータ管理 - mottox2 blog
今までの記事 GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ GatsbyJS v2 はじめの一歩 (2) 実際にページを作る GatsbyJS v2 はじめの一歩 (3) ページにスタイルを当てる GatsbyJS v2 はじめの一歩 (4) gatsby buildとデプロイ Webページを構成するのに必要なのは、HTML, CSS, JSとDataです。Dataというのは stringという文字列だったり、42という数字だったり、{ pizza: true }のようなオブジェクトで表現できます。データはReact Componentの外にあるべきという考えに基づいており、マークダウンやCSVファイル、一般的なデータベース、Web APIなども含めてデータ層で持っておき、そういったデータを簡単に扱えるようにしています。 GatsbyJSではデータ層からReactコンポ
WebGLからWebGPUにステップアップしよう！ - Qiita
はじめに この記事はHIKKYアドベントカレンダー2023の10日目の記事です。 こんにちは、 @emadurandal と申します。HIKKYのエンジン開発部でメタバースエンジンの開発に従事しています。 今回は、WebGLからWebGPUへのステップアップについての記事を書いてみようと思います。 なぜWebGPUが登場したのか WebGLはOpenGL ESのAPI体系をブラウザに移植したものです。 そのOpenGLですが、歴史的経緯により、GPUやCPUの性能を完全に引き出しきれないレガシーな部分を引きずっていました。 詳しくはこちらの記事をご覧ください。 そのため、WebGL2の次はWebGL3というわけにはいかなかったようです。 よりGPUの性能を引き出せる、よりモダンなAPI体系が必要でした。ネイティブにはVulkan APIがありますが、それをそのままブラウザに持ってくるには、
Supabase+pgvector+OpenAI API+Remixで類似度検索を実装してみる
はじめに こんにちは、健常者エミュレータ事例集の管理人をしているcontradiction29です。 「健常者エミュレータ事例集」は、「個人の属性に寄らず、誰もが暗黙知を投稿でき、閲覧でき、評価できるプラットフォームを作る」をコンセプトに開発が進められているプロジェクトです。以下のリンクからアクセスできるので、よかったら閲覧してみてください。 ユーザーはテンプレートにそって経験を整理し、知識として共有し、自由に評価し、コメントで議論ができます。GPL3.0ライセンスの元、コード自体も公開されています。詳しくは以下のレポジトリをご覧ください。 健常者エミュレータ事例集には、今読んでいる記事と関連した記事を表示する機能が実装されています。例えば、記事食事中に料理の味を悪く言うのはよくないの関連記事は以下のようになっています。 ※ 2024-04-12時点です 今回は、この関連記事の推薦機能の裏
CoffeeScriptは自分にとっては有益だった
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / CoffeeScriptは是か否かという話は、CoffeeScriptを調べていれば否応なしに引っかかる話題で、自分もそれについてはかなり考えさせられた。何回かこのブログでも書いたとおり、CoffeeScriptいいなーと思ってはいて、ここ１，２ヶ月はずっとCoffeeScriptでJavaScriptを書いているんだけども、いい点はもちろんあるにせよ、書いているうちに、最初は見えてなかった問題も見えてきたりした感じがするので、その点について少し書きます。 なぜ CoffeeScript がよいか - 0xff.toBlog()なぜ CoffeeScript がダメか - 冬通りに消え行く制服
SVG勉強した流れを残したよ - syonx
zenn.dev SVGのベジェ曲線の基礎から試しながらだんだん応用して進化していく様子をステップごとに区切って残しました。 その中身はこの Zenn の記事にまかせて、ここでは苦労ポイントみたいなのを書いておきます。 こういうのをつくりたい QuartzComposer UnrealEngine Blueprint 懐かしの QuartzComposer …。こういうのを使ってできるインタラクティブグラフィックやゲームではなく、このGUI自体をつくりたい、というお話です。 どうやるか このワイヤーというかコネクターの曲線をどう実現するかが一番悩ましかった。 とりあえず慣れてるVueでノードコンポーネントのところだけ作ってみたりしたけど、配置するにはキャンバスみたいな概念が必要そう。 いろいろ試行錯誤したりしていると、やっぱりSVGじゃね？となって久方ぶりのD3.jsも試してみたけどなんか
Remixはこれから間違いなく伸びていくので、2025年頃が楽しみ - Life is Really Short, Have Your Life!!
気が変わった。T3 Stackそのものは推して行くが、Theoさんの推す構成ではない。 aroundthedistance.hatenadiary.jp フルスタックはReact前提に RailsでフルスタックWebフレームワークの扉が開いた。Rails,Cake.Django等は、MVCのMCがメイン。Vが弱い。Vにテンプレートエンジンを使い、jQueryを使ってインタラクティブなUIを作っていたけど、もうそれが最適な時代ではない。ReactでUIをプログラミングする前提に立つと、ルーティングとrevalidateがルート単位で可能なFWが一番開発生産性が高くなる。可能であれば、ビジネスロジックもそこに入れて、だ。 Theoさん提唱のT3 Stackでは、Next.js + tRPCがコアのコンセプト。UIはNext.jsで書いて、スキーマを決めてtRPCでエンドポイントを生やし、サーバ
検索システムのフロントを SSR・Remix で作り直した - Unyablog.
かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
Oramaという検索エンジンでブログ検索を作ってみた
この記事は、情報検索・検索技術 Advent Calendar 2023の15日目の記事です。 昨年に続き2回目の情報検索のAdvent Calendar参戦です。 今年は、夏にオンライン参加したBerlin Buzzwordsの「The Debate Returns (with more vectors) Which Search Engine?」というセッションでPhilippさんが話題に出したOrama searchという検索エンジンを紹介してみようと思います（Oramaが正式名称なのかな？）。 Oramaという検索エンジン 公式サイトのトップにも記載がありますが、エッジで動作する全文検索＆ベクトル検索エンジンというもののようです。 なにそれ？という感じがしますが、オープンソース版のドキュメントを見るともう少しわかりやすい説明になっています。 Orama is a fast, bat
Array.prototype.with による不変の配列の更新 | Blog | web.dev
最近、配列に対して呼び出すことができる新しい相互運用可能なメソッド Array.prototype.with() がブラウザに追加されました。 この記事では、このメソッドの仕組みと、元の配列を変更せずに配列を更新する方法について説明します。 Array.prototype.with(index, value) の概要 Array.prototype.with(index, value) メソッドは、指定された新しい value に index を設定して、呼び出された配列のコピーを返します。 次の例は、年齢層の配列を示しています。配列の新しいコピーを作成し、第 2 の年齢を 15 から 16 に変更します。 const ages = [10, 15, 20, 25]; const newAges = ages.with(1, 16); console.log(newAges); // [1
Latest topics > JS開発のつらみ - outsider reflex
Latest topics > JS開発のつらみ 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « 「まんがでわかるLinux シス管系女子」から「ITエンジニア1年生のための まんがでわかるLinux」への改題の意図 Main 理解の不可能性と断絶について » JS開発のつらみ - Nov 20, 2023 JavaScript界隈はソフトウェアのトレンドの移り変わり・流行り廃りが激しい、とはよく聞く。 「だから辛い」とはどういうことなのか、について考えたことのあれこれをXに垂れ流したのを、再編集してまとめた。 流行り廃りの何が辛いのか きっとすでに誰か偉い人も言ってそうだけど、今のWeb技術、特にJavaScriptのつらみは、「プロダクトやサ
毒気のある Web サービスをすべて猫化する
貴様も猫にしてやろうか……! 文脈 これは個人的な話にはなるのですが、最近（色々と知見を積んで）ユーザーコンテンツと向き合う必要のある Web サービスを業務で作っている方々への解像度が上がり、ユーザーコンテンツに対して業務として向き合っている人の中には、その人にとって直視したくないコンテンツと業務として向き合う必要が発生している、と言う事へ関心が向くようになりました。 それでこの見たくないコンテンツをなんとかして技術的に 解毒できないかと考えていたところ、最近始めた misskey.io の謎機能である猫化を応用することでなんとかならないか？ と思い立ち色々とやってみたところ、そこそこに良い感じの UserScript が出来上がったので、今日はそれを共有したいと思います。 ※ なおこの UserScript を適用する範囲は皆様にお任せします。 すべてのコンテンツを猫にする UserS
クリックだけでプログラムが作れる夢のプログラミング環境作った - ABAの日誌
ウソです。いやウソではないか……誇張です。 sarad p5.js demo 上のデモ開いて、左クリックでコード生成、右クリックでコード削除。運が良いと何かのグラフィックスを描くプログラムができる。あまりに何も描かないようだったら一旦右下の[Reset]を押して下さい。グラフィックスAPIはp5.js利用。 左クリックで生成されるコードはRecurrentJSを使ったLSTMで作られている。LSTMやRNNをつかった文書生成はいろんなところでやられていて、有名どころだとThe Unreasonable Effectiveness of Recurrent Neural Networksがある。この記事ではLinuxのソースコードを食わせてCのプログラムを作る例もある。ただ、自動生成でできる文やプログラムはいわゆるワードサラダで、文には意味が無いし、プログラムはコンパイルできない。 ならワー
OxcのLinter、`oxlint`のコードを読む | Memory ice cubes
Linter | The JavaScript Oxidation Compiler https://oxc-project.github.io/docs/guide/usage/linter.html コントリビュートした記念としても、記録を残しておこうかと。 Oxcとoxlint oxc-project/oxc: ⚓ A collection of JavaScript tools written in Rust. https://github.com/oxc-project/oxc Oxcって名前は、Rustで書かれたJS向けツールセット群の総称みたいなもの。 Linter Parser Resolver Formatter Transformer Minifier etc… みたく手広くカバーしてて、eslintの置き換え（完全互換ではないが50x-100x速い）を目指してるのが、
控えめな App Router と持続可能な開発 - PWA Night vol.59
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち ※ SpeakerDeck でダウンロードできる PDF はスライド中のリンクが有効です Offers「オファーズ」 - エンジニア、PM、デザイナーの副業・転職採用サービス プロダクト開発組織/エンジニアリング組織のマネジメント・パフォーマンス最大化 | Offers MGR（オファーズマネージャー） turbo/examples/basic at main · vercel/turbo Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Babylon.js で簡単 WebXR