概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
ちょっとJavaのsynchronizedをGoに移植しようとしたはずが、なぜか１万文字の作文ができた - エムスリーテックブログ
AI・機械学習チームのブログリレーも9日目になりました。同チームの横本@yokomotodです。 本日はJavaとGoを題材に並行プログラミングまわりの自由研究をしたお話をしてみたいと思います。 3部構成で、パート1では発端となった「排他制御」について、パート2では「メモリの可視化」について、それぞれJavaとGoを比べてみました。 最後にパート3では、それらの動作を規定する「メモリモデル」について、わかりやすく解説されているリソースを紹介します。 長過ぎる！ 3行で！！ パート1: synchronized = 「排他制御」？ Java synchronized vs Go sync.Mutex Goで再入可能なロック？ 仮にGoで再入可能なロックを実装するなら？ Javaが再入可能を選択した理由 パート2. sycnhronized = 「排他制御」＋「メモリ可視性の保証」 Javaの
監視ツールを迷ったら CloudWatch から始めてみるのもありなのでは - カミナシ エンジニアブログ
こんにちは、新規プロダクトの開発をしています、a2 （@A2hiro_tim ）です。 昨日、開発してきたプロダクトについて、正式リリースを発表させていただきました 🎉 prtimes.jp employee.kaminashi.jp さて、新規プロダクトの立ち上げは、技術選定や運用ツールの自由度が高く、どの監視ツールを使うか、選択に迷うこともあると思います。 我々のチームでは複数ツールの使用経験はあるものの、特定のツールの導入経験や深い知見があるメンバーはいなかったので、フラットに比較検討し、 Amazon CloudWatch の利用から始めてみよう、と意思決定しました。 主な選定理由は、 AWS エコシステムの中で完結できるため、Terraform Cloud などの既存の設定を流用できて新しく覚えることが少ない、AWS 上でコストを一元管理できる、等のメリットがある。 サービス開
どうも、初めまして。 tokeと申します。 今回は自分の失敗談を話したい、と思います。 実装する前にドキュメントを読まないと、最後になってゴールに辿り着けない可能性がある そういう経験をしたのでご紹介します。 例えば、自社で集めた顧客のデータを活用し、Marketoにデータ連携したいとします。 marketoのAPIドキュメントを調べると、顧客の情報を登録する手段では以下の２パターンがあります。 POST /rest/v1/leads.jsonを使うパターン 以下のドキュメントにあるPOST /rest/v1/leads.jsonを使って、顧客のデータを送信し、連携する事ができます。 https://experienceleague.adobe.com/en/docs/marketo-developer/marketo/rest/lead-database/leads [※Marketoで
モダンなブラウザは JS API として gzip や deflate が使えます。 昔から Chrome に搭載してるのは知ってたんですが、今見たらだいたい搭載してました。 わかってる人向けに言うと、バンドルサイズ大きめの JS実装の pako や zlib.js が不要になって、ブラウザネイティブの(たぶんHTTP上のgzip展開と同等の)高速な実装が使えます。 // impl const encoder = new TextEncoder(); const decoder = new TextDecoder(); export async function compress(str: string): Promise<ArrayBuffer> { const cs = new CompressionStream("gzip"); const buf = encoder.encode(
地方拠点の一つ、九州支社に所属しています。サーバ・ストレージを中心としたSI業務に携わってましたが、現在は技術探索・深堀業務を中心に対応しています。 2018年に難病を患ったことにより、定期的に入退院を繰り返しつつ、2023年には男性更年期障害の発症をきっかけに、トランスジェンダーとしての道を歩み始めてます。 2024/08/22修正： はてなブックマークのコメントから、「それってデシリアライズって言わないよ」というご指摘を頂戴しました。 恥ずかしながら浅学であったがゆえに用語を取り違えたまんま長らく覚えてまして、これを整形表示（Pretty Print）と修正させていただきました。最初の用語登場箇所のみ修正した内容として取り消し線付きで記述しておりまして、それ以降は置換させてもらっています。 ご指摘誠にありがとうございました<(_ _)> これとは別に、後半で記述してるコードの一部に使わ
The error path is still slower than the success path, but the difference is a lot less prominent now. I submitted a PR introducing this optimization and wondered if it’s going to be merged. After all, serde_json has very few dependencies, and dtolnay seems to focus on build times, so would a PR adding a new dependency make it? To my shock, the PR was quickly merged! Not a bad first contribution. W
API を利用している中で、なんとなーくで利用していた iCal 形式の記述。 先輩方の言う通りに記述をいじり、必要なときに必要な箇所だけ修正してきましたが・・・ 涼しい季節になりましたし、勉強し直す良いチャンス！ と、いうことで調べてみることにしました。(*'▽') iCal 形式とは iCal 形式は、正式には iCalendar 形式と言います。 カレンダーアプリ、または電子メールアプリなどで、予定を読み込んだり書き込んだりする際に用いられます。 主な例としては、Google Calendar、Apple Calendar、IBM Lotus Notes、Yahoo! Calendar、LINEWORKS Calendar などなど。 拡張子 .ical .ics .icalendar iCal 形式の記述をファイルとして保存したのが、拡張子が .ical .ics .icalend
GooglePlay の「REST Resource: purchases.subscriptionsv2」 API のレスポンス仕様で以下のオブジェクトがあった。 (一部抜粋) { "autoRenewingPlan": { "autoRenewEnabled": boolean, "priceChangeDetails": { object }, "installmentDetails": { object } } } この構造、autoRenewEnabled が true の時は上記のような構成になっているのですが、false に該当する時は以下の構造になります。 { "autoRenewingPlan": {} } これを php で表現しようとすると空配列を定義することになりますよね。 $json = [ "autoRenewingPlan" => [], ]; しかし、これだ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
実装する前にきちんとドキュメントを読んだ方が良い、という話 - Qiita
CompressionStream でブラウザで gzip 圧縮する
雑にJSONデータを分析させてみる-ローカルLLMの底力 | IIJ Engineers Blog
I sped up serde_json strings by 20%
【iCal 形式】iCalendar について勉強してみた - Qiita
【PHP】json_endodeの関数でJSONの空オブジェクトを表現させる｜サラトガ牧場