ウェブ開発者が、ユーザーのブラウザー（つまり、ユーザーがウェブサイトを閲覧するために使用している端末のローカルディスク）にデータを格納するために利用できる技術はたくさんあります。 ブラウザーがウェブサイトに格納することを許可するデータ量と、その制限に達したときにデータを削除するために使用する仕組みは、ブラウザーによって異なります。 この記事では、データを格納するために使用できるウェブ技術、ウェブサイトがデータを格納しすぎないように制限するためにブラウザーが所有しているクォータ、および必要なときにデータを削除するために使用する仕組みについて記述されています。 ブラウザーは、ユーザーがウェブ上で追跡されるリスクを縮小するために、ウェブサイトからのデータをさまざまな場所に格納します（バケットとも呼ばれます）。ほとんどの場合、ブラウザーは格納されるデータをオリジンごとに管理します。 このため、オリ

概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発

はじめに ニコニコ生放送でフロントエンドを担当している misuken です。 今回は関心が分散してしまう理由やその原理、この問題に対する適切な対処法を通して、package by feature の合理性や、そこで重要になってくる関心の単位などについて解説していきます。 規模の大きなものを扱っている方、分類が苦手な方、分類に関して悩みを感じている方には特に有用です。 前提 Reactでコンポーネントを管理する例で説明します 当然React以外の様々なディレクトリ構成でも応用できます BCD Design の概念も覚えておくとより体系的に理解できます 精度の高い明名ができれば、分類の効率も精度も上がります 現実世界で捉える関心の分散 通常、自宅や職場でトイレに行くとき、同じフロアや同じ建物内のトイレに行きます。 もしもトイレだけの建物が隣に建っていて、そこに行かなければならないとなったらと

CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance  |  CSS and UI  |  Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。

はじめに こんにちは。エンジニアの皆さん。 日々の業務にお疲れではないでしょうか？ 消えないエラー、動かないプログラム、迫る締切、etc... 数あるストレスで限界になっていませんか？ ... ...!!! そんな時はペットを飼いましょう！！！！！！！！！！ ...というわけで、VSCode上でペットを飼うことができる拡張機能を紹介します。 その名も、vscode-pets.......!!!!!!!!!! これです。vscode-petsで検索しましょう。 導入 インストールしたらコマンドからPet Coding: Start pet coding sessionを実行します。 Pet Coding:Spawn additional petから好きなペットを選んで... ほわああああああああ！！！！！！！ 殺伐としたVSCodeに一輪の花が爆誕しました。かわいいですねー。 あそびかた す

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove

"fib" = (("val") => { (val < 2) ? { val } : { (@fib(val - 1)) + (@fib(val - 2)) } }); @print(@fib(7)); @print(@fib(8)); @print(@fib(9)); @print(@fib(10));

要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe

はじめに HTMXというものがあることを知りました。 最近急に有名になっているそうで、AjaxをJavaScriptなしで直接HTMLに記述できるものみたいです。 そこで、勉強がてら、Symbolブロックチェーンと無理やり絡めて何かやってみようと思いました。 ネタを何にしようと考えましたが、HTMXはWebSocketも対応しているみたいなので、あまり使われていなそうなSymbolのRESTゲートウェイのWebSocketを使って、新規ブロックのリアルタイム表示なんかをやってみたいと思います。 結論から先に言いますが、HTMXだけでSymbolの新規ブロックをリアルタイム表示をすることはできませんでした。 インストール 今回はNode.jsなどを使用せず、HTMLを直接編集する形をとります。 その場合は、HTMLに以下の一行を追加するだけです。 <script src="https://u

CSRF 対策は One Time Token を form なりに付与して、サーバ側でチェックすれば良い。 それをデフォルトでサポートしてるフレームワークなどもあるし、なくてもライブラリでいくらでも対応できる。 どうせ完全にステートレスなサービスはなかなかないので、サーバ側に redis や memcache を用意するのも別に大変じゃない。 なので、 CSRF 対策として Token を付与するのは、最も安全で推奨できる方式ではある。 っていうのを踏まえた上で、もう SameSite=Lax デフォルトだけど、今でも Token 必須なの？みたいなのがたびたび話に出るので、いい加減まとめる。 前提 この話は、スコープがどこなのかによって話が多少変わるので、そこを絞る。 今回は Passive ではなく Active に対策していく場合を考えるので、前提をこうする。 SameSite=l

Next.js 14 / Auth.js v5 / Prisma / Planet Scale / shadcn/ui / Tailwind CSS を用いた認証・認可をハンズオン形式で学びます。

はじめに 明けましておめでとうございます。 (一週間遅れ) この記事はJavaScriptの組み込みAPI Intl の紹介と解説です。 Intl とは？ MDN から引用すると Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します 用はi18nの書式版です。 例を出すより見たほうが早いので実際に機能解説します。 (先に言っておきますが、実はこれバックエンド無しで自然言語処理が出来る優れものです。) 用語解説 localesって何？そもそもnewって何？って人がいるかもしれないので locales https://developer.mozilla.

HTML HTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。 CSS CSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。 JavaScript JavaScriptは主にWebブラウ