In Firefox 30 the Add-on SDK is making a change to the execution environment for content scripts. While this change will not affect most add-ons, some patterns will no longer work. Specifically, content scripts will no longer be able to use unsafeWindow or window.wrappedJSObject to make JavaScript objects available to content. The more common pattern of accessing objects in the page directly via u
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング(SSR)とクライアントサイドレンダリング(CSR)のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏(学習動画教材とかを作っている人)は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
プロパティ発見。 こんにちは、「ふ」です。 SVG要素のtransform-origin(変形の基準点)を指定するには、これまで散々な苦労をしてきました。 例えば⬆︎のオブジェクトをその場で回転させようとしたとき。 #element { animation:rotate_1 3s linear infinite; } @keyframes rotate_1 { to { bbtransform:rotate(1turn); } } オブジェクトはその場では回転してくれません。 SVGのtransformは、その対象が「viewBoxの持つ座標空間」にあるからです。基準点は原点にあり、多くの場合その場所は画像左上になっています。 座標空間が変形した結果、それにともなってオブジェクトも、変形するという順序です。 個別のオブジェクトを思い通りの位置で変形させるには、座標値を検出し、viewBox
This website is currently in the process of being refactored and redesigned. So if you see anything broken, that's why. Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports Published on 05 Aug, 2014 At any point in an SVG drawing, you can establish new viewports and user coordinate systems by either nesting svgs or using elements such as the symbol element
4.図形の変形 基本図形だけでもグラフィックを描くことは可能だが,何れも座標が固定化されているので位置の変更やサイズの変更を行うのが面倒である.このような操作を簡略化するためtransform属性が提供されている.これはcss3でのtransform属性とほぼ同様の機能を提供する. transform属性:座標軸の変形 svgにおける図形要素の描画は,通常その要素が属するコンテナ要素(svg要素,symbol要素,marker要素等)のveiwBox属性の値に従って行われる.即ち,viewBoxから定まる座標軸とスケールを元に図形要素の実際の描画位置が計算される.ここで,この座標軸を変形する事を思い浮かべてみよう.同じ図形要素であっても,描画する基準が異なるため,座標軸の変形度合いに応じ描かれる図形が変形することだろう. この座標軸の変換をアフィン変換と呼び,svgではこの変換をtrans
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The following is a guest post by Ana Tudor. Ana always does a great job digging into the math behind what we can do graphically on the web. In this case, that’s extra-useful as there are several ways to handle SVG transforms and they require a bit of mathematical thinking, especially converting one
あらまし SVGを利用するメリットのひとつは、CSSにインラインで埋め込めるほどのサイズの小ささです。 ただ、SVGは作り方を誤るといくらでもファイルサイズが大きくなるデータフォーマットでもあります。 CSSのインラインに埋め込むということは、同時にそのWebページで表示されることのないSVGもロードされてしまいがち。エンジニアとしては、ちゃんと最低限のサイズで埋め込みをすることで通信コストを抑え、CO2排出量削減に貢献したいですね! ちなみに、ここではSVGはHTMLに埋め込めればいいや、ではなく、SVG-valid (XML-valid) なサイズ削減を目指しています。 チェック項目 軽量化する前に SVGはどう利用されるのか(どのくらいのサイズで描画されるのか、白黒でいいのか、色を塗り分けたいのか、JavaScriptで動的に制御したいのか、など)によって、パスをどう定義するべきかが
ドラッグ&ドロップは素晴らしいインタフェースソリューションです。何かを掴み、ドラッグとドロップをすることは、コピーや移動(ファイルマネージャを参照)から注文(カートにドロップする)まで、多くのことをするための明白かつ簡単な方法です。 現在の HTML 標準では ドラッグイベントに関するセクション があります。 それらはシンプルなタスクを簡単に解決したり、“外部” ファイルのドラッグ&ドロップをブラウザで扱うことができたりと、興味深いです。したがって、OSのファイルマネージャでファイルを取り、ブラウザウィンドウへドロップすることができます。その後、JavaScript はそのコンテンツへアクセスできます。 しかし、ネイティブのドラッグイベントにも制限があります。例えば、特定の領域でドラッグを制限することができます。また、ドラッグを “水平” または “垂直” のみにすることはできません。その
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く