SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
【PoC編】XSSへの耐性においてブラウザのメモリ空間方式はLocal Storage方式より安全か？ - GMO Flatt Security Blog
はじめに こんにちは。 セキュリティエンジニアの@okazu-dm です。 この記事は、Auth0のアクセストークンの保存方法について解説した前回の記事の補足となる記事です。前回の記事の要旨をざっくりまとめると以下のようなものでした。 Auth0はデフォルトではアクセストークンをブラウザのメモリ空間上にのみ保存するin-memory方式であり、XSSへの耐性のなさ等の理由でlocalStorageで保存することを推奨していない しかし、XSSでアクセストークンを奪取できるのはin-memory方式でも同じのはず(検証は行いませんでした)。localStorage方式を過度に忌避する必要はないのではないか なお、Flatt Securityの提供するセキュリティ診断はAuth0に限らずFirebase AuthenticationやAmazon CognitoなどのIDaaSのセキュアな利用
最適化はCDNがやればいい
題名に「CDN」と書きましたが、いわゆる「エッジ」のことです。オリジンありきなのであえてCDNと呼びました。とはいえ、オリジン自身がエッジにある可能性もあります。 メタフレームワークを作る Sonikというメタフレームワークを作っています。まだDevステージなんでどんなことができるか可能性を探っている最中です。 このフレームワークの特徴はとにかくエッジファーストです。 SSRしたバンドルの大きさを極力小さくする。 Islandsアーキテクチャを採用する。 DenoのFreshを参考にする。 CloudflareのBindingsを扱いやすくする。 Honoの上に乗せる。 とりあえずStreamingはサポートしない。 で、こういうのを作っていると、フレームワークは最小限にして、Core Web Vitalsのスコアを上げるために身を削る最後の部分はCDNに任せてしまった方がいいってことです
📝 require(moduleName) は同期処理なのに対して、import(moduleName)は非同期処理となります。 📝 tsconfig.jsonでesModuleInteropがtrueでないとdeafult importの意味合いは異なります。 この表はCommonJS ModulesとECMAScript Modulesで機能的に1対1で応するという意味ではありませんが、 大まかにはこの対応表にそってECMAScript Modulesの構文へと変換ができます。 エディターを使い手動で変換したり、次のようなツールを使ってある程度機械的な変換も可能です。 cjstoesm commonjs-to-es-module-codemod このモジュールの変換で重要なことは、できるだけCommonJS ModulesとECMAScript Modulesを混ぜないことです。
Today, I'll take you through the process I came up with in regard to transforming an SVG path into a vector rope drawing. We'll learn how to turn the path on the left into the rope on the right: The problem popped up on a project my colleagues were working on, and it stuck with me. I thought about it and started playing with it as soon as I got some free time. I had a lot of fun. Therefore I want
はじめに 自分が読んだ本や記事などを読む時に書いたノートを体系的に管理したいですよね。 現在優秀なナレッジマネジメントツールはありふれています。企業向けだと Confluence DocBase Qiita Team などがあります。個人向けは Notion HackMD Boost Note のようなシンプルで使いやすいツールがあります。マインドマップツールをさらに含めると数え切れません。 筆者自身はミニマリストです。 コードのようにGithubで自分のノートを管理したい Webからマインドマップ形式になっているノートを確認したい サブスクではなく、無料で使いたい なので、個人ナレッジマネジメントツールを自作したいという発想に至りました。 結果としては下記の15行シェルスクリプト、GitHub ActionsとMarkdownマインドマップ変換ツールmarkmapで作りました。 項目をク
jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
はじめに こんにちは。GMO Flatt Security株式会社 セキュリティエンジニアの大塚 (@Alphe) です。 最近、AIを活用したバイブコーディングでブラウザ拡張機能を開発するケースが増えています。「コードが書けなくてもChrome拡張を作れる — AI時代の個人開発入門」「Qiitaのトレンド記事をワンクリックで確認できるChrome拡張を作った」といった書籍や記事が頻繁に投稿されているほか、企業でも社内向けChrome拡張を開発・共有する動きが広がっています。 ブラウザ拡張機能は、手軽にWebページの見た目や操作性を自分好みにカスタマイズしたり、日々の作業を自動化したりできる便利な仕組みです。しかし、当然ながら拡張機能特有のセキュリティリスクも存在します。 本記事ではブラウザ拡張機能の仕組みとアタックサーフェスを整理したうえで、代表的な攻撃手法と対策を解説していきます。な
Cloudflare Workers + Hono ワークショップ - ServerlessDays Tokyo 2023
Cloudflare Workers + Hono ワークショップ 資料はこちら => workshops.yusuke.run #serverlessdays Yusuke Wada 2023-09-24 ServerlessDays Tokyo 2023 workshops.yusuke.run アジェンダ ワークショップについて Workers イントロダクション Hono イントロダクション 基本編 プロキシ編 Web API編 フルスタック編 AI編 Honoをより深く知る その他 1. ワークショップについて 1.1 対象 対象者 Cloudflareでのアプリケーション作成に興味のある方 Honoを使ってみたい方 フロント、バックエンド問いません 前提条件 Wranglerが動く環境をつくっておく npx wrangler が動く JavaScriptに対する知識があるとよい
ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 CSSアニメーションとの違い CSSのtransitionプロパティや@keyframesを使ったアニメーションなどがあります。これらは比較的手軽にアニメーションを実装できるのがメリットです。手軽さとは引き換えに複雑なアニメーションや動的に変数が変わるようなアニメーションが苦手です。一方でJavaScriptを使った手法は、複雑なものや動的なアニメーションも実装できるメリットがありますが、CSSと比べると記述量も
React Server Componentsを理解する React Server Components（RSC）の登場により、Reactエコシステムにおけるサーバーレンダリングの重要性が高まりました。RSCを使用することで、デベロッパーは一部のコンポーネントをサーバー側でレンダリングしつつ、抽象化によりクライアントとサーバーの隔たりを感じさせないユーザビリティを実現することができます。Client ComponentsとServer Componentsをコード内に混在させることで、すべてのコードが1カ所で実行されているように見せることができます。 しかし、抽象化には常にコストが伴います。そのコストとはどのようなものでしょうか。RSCはいつ「使える」のでしょうか。バンドルサイズが小さくなると、帯域幅も狭まるのでしょうか。RSCを「使うべき」ときはいつでしょうか。RSCを適切に使う上でデベ
Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ
React's UI State Model vs Vanilla JavaScript DOM State — A Beginner's Introduction
This article is aimed at beginners who've never had the chance to see 'why React'. It takes a very contrived example to make a point about how React's declarative state model could help keep state sanity when code scales. If you're an experienced developer these series of posts by Steven might give deep insights about why declarative abstractions scale in a way you might not have thought before. T
概要 □ スライドパズルのゲームを作る □ 基本に立ち返りHTMLとCSSとピュアなJavaScriptだけで作成する ・パズルの実装はシンプルで簡単。 ・考え方さえ理解すれば早いため、実装の前にイメージで説明する。 □ パズルを試したい人は https://jd253t.csb.app (codesandboxのpreview)から試せる ※下の埋め込み表示ではJavascriptが想定通り動作しないので上記のURLから試してください ※パズルはPCからの操作のみ対応 ※codesandboxのpreviewが安定しないことがあります。もし表示が崩れていたらソースコードを貼っているのでローカルで試してください イメージ.パズルを作る方法 □ 1.canvas要素(390×390で)を作成する □ 2.写真を390×390でcanvas内に描画する □ 3.スライドパズル画像を作る定義を作
Patterns for Reactivity with Modern Vanilla JavaScript – Frontend Masters Blog
“Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web Development We handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We must respond to user inputs, communicate with servers, log, perform, etc.
The story of web framework Hono, from the creator of Hono
The story of web framework Hono, from the creator of Hono2024-10-17 Hono is a fast, lightweight web framework that runs anywhere JavaScript does, built with Web Standards. Of course, it runs on Cloudflare Workers. It was three years ago, in December 2021. At that time, I wanted to create applications for Cloudflare Workers, but the code became verbose without using a framework, and couldn't find a
In this post I’ll walk through the full implementation of a Virtual DOM in a bit over 200 lines of JavaScript. The result is a full-featured and sufficiently performant virtual DOM library (demos). It’s available on NPM as the smvc package. The main goal is to illustrate the fundamental technique behind tools like React. React, Vue and the Elm language all simplify the creation of interactive web
= 1024 }, isThreeColumns() { return document.documentElement.clientWidth >= 768 && document.documentElement.clientWidth < 1280 }, cdnUrl(path) { return `https://fivetiu.com${path}` }, itemUrl(item) { let dmPrefix = item.dm ? `/dm${item.dm}` : ''; let url = this.locale === 'zh' ? `${dmPrefix}/${item.dvd_id}` : `${dmPrefix}/${this.locale}/${item.dvd_id}` if (item.recommend_id) { url += `#${item.reco
Thank you - Open CollectiveFirst and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As... styled-components のメンテナンスモードへの移行が発表された。 これは、CSS in JS 並びに styling library の歴史において、１つの節目となる出来事である。 社内のプロダクトでは styled-components が使
WebHaptics は、Web アプリケーションで触覚フィードバックを実装するための JavaScript ライブラリです。iOS Safari でも触覚フィードバックを提供することができます。この記事では、WebHaptics ライブラリの概要と、どのようにして iOS Safari で触覚フィードバックを実現しているのかについて解説します。 触覚フィードバック（haptic feedback）とは、デバイスが振動や力の変化などを通じて、ユーザーの皮膚や筋肉に物理的な感覚を伝える技術のことです。これにより、視覚や聴覚だけでは伝えられないリアリティのある体験を提供できます。例えばボタンを押した時に振動が発生することで、ユーザーは操作が成功したことを感じ取れます。 今日のモバイルデバイス（iPhone や Android スマートフォンなど）には、触覚フィードバックを提供するためのハードウ
WebKit Features in Safari 18.0
ContentsNew in Safari 18Web apps for MacCSSSpatial WebHTMLJavaScriptWeb APICanvasManaged Media SourceWebRTCHTTPSWebGLWeb InspectorPasskeysSafari ExtensionsApple PayDeprecationsBug Fixes and moreUpdating to Safari 18.0Feedback Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolve
Use JSX without ReactNakedJSX is a command-line tool for generating HTML files from JSX. The output is pure HTML and CSS - unless you choose to add your own JavaScript. This is an overview. Please refer to the documentation for a detailed look at each feature. This page was built using NakedJSX. You can look at its source. At a GlanceGenerate static HTML files from JSX by running an npx command. S
polyfill.io now available on cdnjs: reduce your supply chain risk | The Cloudflare Blog
polyfill.io now available on cdnjs: reduce your supply chain risk2024-02-29 Polyfill.io is a popular JavaScript library that nullifies differences across old browser versions. These differences often take up substantial development time. It does this by adding support for modern functions (via polyfilling), ultimately letting developers work against a uniform environment simplifying development. T
Useful DevTools Tips and Tricks — Smashing Magazine
You might think you know all the tricks when it comes to browser DevTools, but did you know that there are dozens of panels and hundreds of features waiting to supercharge your debugging workflow? Whatever your debugging use case is, there’s probably a tool that’s right for the job. Let’s discover the most popular DevTools tips that can boost your productivity. When it comes to browser DevTools, w
Let's build a Chrome extension that steals everything
Update: this piece was featured on the NBTV YouTube Channel Manifest v3 may have taken some of the juice out of browser extensions, but I think there is still plenty left in the tank. To prove it, let’s build a Chrome extension that steals as much data as possible. I’m talking kitchen sink, whole enchilada, Grinch-plundering-Whoville levels of data theft. This will accomplish two things: Explore t
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
この記事はtraP新歓ブログリレー2022 41日目(4/18)の記事です。 こんにちは、19Bの翠(sappi_red)です。 普段はSysAd班で活動しています。 この記事ではVite-likeなウェブフロントエンドツールをつくっていきながら、Viteの大まかな仕組みを説明していきます。 できる限り細かく手順を書いたので、ぜひ実際に追ってみてください！ 実際に完成したものはこのリポジトリ(sapphi-red/micro-vite)にあります。名称は愚直にMicroViteにしました。 ある程度Viteに近い実装にはなっていますが、そこそこいろんな箇所が異なります また、動作確認はNode.js v16.14.2で行っています。(がおそらくv12以降なら動くと思います) 準備 とりあえず動作確認用のごく単純なウェブアプリケーションを作ります。 動作確認用なのでplaygroundという
UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal では `type="press"` 属性を追加することでボタンが押し込まれた状態を表現することが提案されています。 UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。代表的な例としてミュートボタンがあります。ミュートボタンは音声の入力をミュートにするためのボタンで、押し込まれた状態であればミュートになり、押し込まれていない状態であればミュートが解除されていることを表します。 今まではボタンが押し込まれた状態を表現するためにいくつかの方法がありました。 aria-pressed 属性を使用する ボタンの状態に応じてラベル
KARTE Blocks(以下Blocks)では、Blocksを利用するサイトに1行の<script>タグを埋め込むことでサイト書き換えや効果計測をします。 Blocksでは、この<script>タグで埋め込むスクリプトファイルをbuilder.jsと呼んでいます。 この記事では、Blocksが扱うbuilder.jsというサードパーティスクリプトの仕組みについて紹介します。 builder.jsというセカンドパーティコンテンツをもつサードパーティスクリプトについて知る builder.jsでは安全にサードパーティスクリプトを開発して、配布、読み込みしているのかを知る サードパーティスクリプトの開発、テスト、デバッグ方法について知る この記事は「KARTE Blocksリリースの裏側」の3日目の記事です。全10回の予定です。 これから毎日記事を更新していくため、更新をチェックしたい方は@K
2023最新！【はてなブログ】最終更新日を追加する方法（短くて簡単！コピペでOK）CSSとJavascript利用 - バンビの初心者ブログ教室
最終更新日を追加するコードはこちら↓ コードに関してのお願い 簡単にコード解説 CSS JavaScript このブログについて ↓↓ はてなブログに標準の機能としてこちらが搭載されました！ （2023-08-01より） はてなブログに最終更新日を追加する機能がないので、以前からjQueryやJavaScriptを使ったやり方をいろ〜んな方が色々と説明してくださっています。 ↓↓これね。 様々なコードがあり、私のブログではこれまでは、 →はてなブログの記事の最終更新日を取得 - はしくれエンジニアもどきのメモ こちらの方のコードをアレンジしたものを利用していました。 sitemap.xml から最終更新日を取得してくるというコード。 （↑↓この辺、わからない人は読み飛ばしてOK） ところが、最近自分の「はてなブログ」のソースを見ていて気づいたのですが、AMP対応していなくても <head>
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Blog
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast™️. DOM: Document Object Model – A Brief Overview When you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer tools “Elemen
= 1024 }, isThreeColumns() { return document.documentElement.clientWidth >= 768 && document.documentElement.clientWidth < 1280 }, cdnUrl(path) { return `https://fourhoi.com${path}` }, itemUrl(item) { let dmPrefix = item.dm ? `/dm${item.dm}` : ''; let url = this.locale === 'zh' ? `${dmPrefix}/${item.dvd_id}` : `${dmPrefix}/${this.locale}/${item.dvd_id}` if (item.recommend_id) { url += `#${item.reco
Persistent npm Campaign Shipping Trojanized jQuery | Phylum
Since May 26, 2024, Phylum has been monitoring a persistent supply chain attacker involving a trojanized version of jQuery. We initially discovered the malicious variant on npm, where we saw the compromised version published in dozens of packages over a month. After investigating, we found instances of the trojanized jQuery on other platforms, such as GitHub, and even as a CDN-hosted resource on j
Jun 10, 2024 by Jen Simmons, Jon Davis, Karl Dubost, Anne van Kesteren, Marcos Cáceres, Ada Rose Canon, Tim Nguyen, Sanjana Aithal, Pascoe, and Garrett Davidson ContentsWebXRCSSWeb apps for MacSafari ExtensionsSpatial mediaHTMLMediaWebRTCPasskeysHTTPSJavaScriptWeb APICanvasWebGLWeb InspectorWKWebViewApple PayDeprecationsBug Fixes and moreHelp us Beta TestFeedback The last year has been a great one
100行で作る2D空間ボイチャツール＆入ったら誰も居ない悲しみの解決！ - ABEJA Tech Blog
こんにちは、メリークリスマス。株式会社ABEJAのラボチームで日々もがいてる藤本（@peisuke）です。本記事はABEJAアドベントカレンダー2022の25日目の記事です。 仕事では機械学習をやっていますが、機械学習で何かの問題を解いているだけでは中々インパクトがでないなぁ思います。機械学習だけではなく、何かしらのサービスと組み合わせることで価値が出ると思います。そんなこともあり、たまにはサービス開発するための技術も磨いております。今回は、2D空間でのボイチャツールを作ってみているので紹介していきます。 まず最小に作ってみた奴のスクショを貼ります。 作ったツールのキャプチャ Chrome Extension上にボイチャのログイン状況を可視化 はじめに コロナ禍に入ってからリモートワークが大分増えたのではないかと思います。リモートワーク最高ですね！でも、リモートワークしているだけだとちょっ
【2026年版】Web Components詳細入門ガイド
誰にでも、できればやりたくないと思うプロジェクトがあるはずです。コードが管理不能になり、スコープが拡張し、修正の上に修正を重ねる有様。コードが絡まり合い、構造が崩壊。コーディングは混乱を招くことがあります。 そこで責任の所在がはっきりした、シンプルで独立したモジュールです。これを使用することで、プロジェクトはスムーズに進みます。コードをカプセル化すると、実装についての心配も軽減できます。あるインプットが与えられたときにモジュールが何をアウトプットするかが分かっていれば、その目標が「どのように達成されたか」を理解する必要は必ずしもないのです。 モジュールの概念を単一のプログラミング言語で理解するのは、難しいことではありません。しかし、ウェブ開発の世界では、多様な技術を組み合わせることが必要になります。ブラウザはHTML、CSS、JavaScriptを解析し、ページのコンテンツ、スタイル、機能
以前自分が作った ライブラリをこちらで紹介したのですが、使い所がわかりづらいかもと思いまして、TODOアプリのサンプルを作りました。 このサンプルは以下の技術を組み合わせ、簡易的な TODO リストアプリを構築する例です： gas-db（Google スプレッドシートをデータベースのように扱うためのライブラリ） Google Apps Script のウェブアプリ機能 Apps Script から返される HTML（クライアントサイド JS） GitHub Pages などの外部ホスティングは不要で、すべてを GAS 上で提供します。 また、こちらで紹介したコードはリポジトリ内でも載せていますので 完全なコードが気になる方は こちら をご覧ください。 ↓↓↓ サンプルコード ↓↓↓ 動作するアプリ （デプロイしたらURL変わるから動かなくなるかも） ↓↓ スプレッドシート（誰でも編集できま
OpenAI Codex の使い方｜npaka
1. Codex「Codex」は、自然言語と数十億行のコードの両方で学習したGPT-3ベースのモデルです。Pythonの能力が最も高く、JavaScript、Go、Perl、PHP、Ruby、Swift、TypeScript、SQL、Shell を含む10を超える言語を熟知しています。 「Codex」は、次のような様々なタスクに利用できます。 ・コメントをコードに変換。 ・コンテキスト内で次の行または関数を記述。 ・アプリケーションの有用なライブラリや API 呼び出しなどの知識の提供。 ・コメントの追加。 ・効率化のためのコードの書き直し。 2. Codexの使用例「Playground」でModelに「code-davinci-002」を指定して試しています。 2-1. 「Hello」と言う (Python)""" Ask the user for their name and say
Zennのダークモードを実装しました
背景 Zennのダークモード対応については、リリース当初より望まれていた機能でした。 このissueは2023年に一度クローズしました。当時はZennチームにデザイナーが不在だったこともありデザインシステムやガイドラインのようなものは整備されておらず、数十のページ・数百のコンポーネントにダークテーマを適用していくことは、工数の見積もりすら不可能な状態でした。 しかし、その後も多くの要望が寄せられていたことと、その後にZennチームに加わったデザイナーのfujisawaさんの貢献により、徐々にデザインのガイドラインなどが整備され、ようやくダークテーマの対応に取り組むこととなりました。 本記事では、Zennのダークモード対応の技術的な要素についてお伝えします。デザイン的な要素については、いつかfujisawaさんから語られることを期待しています。 実装 fujisawaさんにデザインのプロトタ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
Draw SVG rope using JavaScript · Muffin Man
ただ15行のシェルスクリプトで個人ナレッジマネジメントツールを作った話
【脱jQuery】jQuery <=> vanillaJS 書き換え集
detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
Chrome拡張機能の開発で気をつけたいセキュリティリスク - GMO Flatt Security Blog
マイクロインタラクションからクリエイティブ表現まで！Tween24.jsを使った演出表現 - ICS MEDIA
React Server Componentsを理解する | POSTD
シンタックスハイライトをライブラリなしで簡単に！Custom Highlight APIの魅力 - コハム
HTML&CSSとピュアなJavaScriptだけでパズルゲームを作る方法
A virtual DOM in 200 lines of JavaScript
MissAV | オンラインで無料ハイビジョンAV映画が見られる | 飽きるまで映画が存分に見られる
styled-components の歴史、現在、これから
iOS Safari で触覚フィードバックを実現する WebHaptics
NakedJSX - Use JSX without React
ECMAScript Realms と ShadowRealm の提案 - Qiita
350行でつくるVite⚡
ボタンが押し込まれた状態を表す Press Button の提案
セカンドパーティコンテンツをもつサードパーティスクリプトの作り方
nJAV | オンラインで無料ハイビジョンAV映画が見られる | 飽きるまで映画が存分に見られる
News from WWDC24: WebKit in Safari 18 beta
Google Apps Script + gas-db + HTML を使った TODO アプリ