'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
要素マージンを含めた width / height を取得するのがちょいと大変だったのでメモ。 html { font-size: 16px; } .div { margin: 0.3rem 0.2rem; // 4.8px 3.2px 相当 border: .3rem solid #000; // 4.8px 相当 width: 6.2rem; // 99.2px 相当 height: 6.2rem; // 99.2px 相当 } margin を含んだ値で取得できる API は無いっぽい clientWith / clientHeight … border, margin を含まない Int 値 offsetWidth / offsetHeight … border は含み margin は含まない Int 値 getBoundingClientRect … border は含み ma
結論 作ったもの "No Infinite Scroll" インストールをすると無限スクロールを検知するたびに、 「本当に初めやろうとしてたことやってるのか？考え直せ！」 という趣旨の叱咤激励で戒めてくれます。 無限スクロール界隈の大御所、Twitterとかを開くと警告が出まくり使う気がなくなるというメリットがあります。 エンジニア,ネットサーフィン多い問題 Googleや公式ドキュメントとStackoverflowを往復する日々。 個人的には、最近バックエンド系のDocker,Ansible,Linuxの勉強をしていると、エラーの対処のために一日中こうしたサイトを往復することが多いです。 なんでついでにTwitterとか見ちゃう？ 上のような問題の中、関係ないTwitterとかニュースサイトとかついついチェックしたくなる。 なんで？と思ってよくよく考えたら、 この手のサイトは無限にコンテ
実行中のプロセスをフックして任意のコードを実行する (Non-invasive instrumentation) - Qiita
はじめに 掲題の方法を非破壊的、すなわちソースコードや実行可能モジュールのファイルを変更せずに実現するツールを作りました。より具体的には、「実行中のプロセスの任意の箇所をフックして、DLL に実装した任意のコードにジャンプして実行してから、元の処理に戻って動作を継続できる」ツールです。手前味噌ですがけっこう便利だと思います。現実的な使用場面として、パフォーマンス測定やカスタム ロギング、スレッドの競合を意図的に引き起こすためのタイミングの調整、などが考えられます。 msmania/procjack: Not Another Code Injection Toolkit https://github.com/msmania/procjack というわけでこの記事では、以下 2 つの実装例を紹介して Non-invasive instrumentation の便利さを伝えようと思います。残念な
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
Javascript で動く軽量物理エンジン OimoPhysics と3Dレンダラ Three.js で書いた短いサンプルコード - Qiita
Javascript で動く軽量物理エンジン OimoPhysics と3Dレンダラ Three.js で書いた短いサンプルコードJavaScriptthree.js物理エンジンOimoPhysics 以前から「OimoPhysics」を使ってゲームを作ってみたいと思っていた。Three.js は仕事でも使ってるくらいなのだが、物理エンジンに関しては、まったくのど素人。 OimoPhysics は、Javascriptで動く軽量な物理エンジン。 Three.jsは、みなさんご存知の3D描画ライブラリ。 で、ググるものの、サンプルコードが見つからない。最大あって、ここ👇くらい。 http://el-ement.com/blog/2018/01/13/oimophysics-released/ Oimo.js のコードはいくらか見つかるのだが、Oimo.js は、OimoPhysics の分
Take advantage of this front-end technique to deliver content smoothly and continuously. Have you ever come across a website or app that loads and displays more content as you scroll? This is what we call infinite scroll. Infinite scroll is a popular technique that can make it easier to browse large amounts of content. It can also make for a smoother user experience, especially on mobile devices.
Safari Technology Preview Release 94 is now available for download for macOS Mojave and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS. This release covers WebKit revisions 250329-250947. CSS Shadow Parts Added support for the ::part() pseudo element from CSS Shadow Parts (r250889,r250902, r250914,
Vue.js でテンプレート内の DOM 要素や子コンポーネントの参照は、旧来の Options API だと this.$refs で取得できました。 では、Composition API ではどうなっているのでしょうか。 答えは 公式サイトに書いてあります。 <template> <div ref="root"></div> </template> <script> import { ref, onMounted } from 'vue' export default { setup() { const root = ref(null) onMounted(() => { // the DOM element will be assigned to the ref after initial render console.log(root.value) // <div/> }) ret
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
こんにちは。自動化エンジニアの森川です。 本日はSeleniumを使ったブラウザ要素のキャプチャ（スクリーンショット）取得について考えたいと思います。 E2Eテストでも部分的なアサーションだけではなく、画面のレイアウトや可視的な要素を検証する場面がでてきます。いわゆるVisual Testingともいえるスクリーンショットの比較をすることになります。 ネット上の記事でも散々語られてきたSeleniumのスクリーンショット取得ではありますが、今一度考えてみたいと思います。 ＜本記事のインデックス＞ ・どうしてブラウザ要素のスクリーンショットが要るのか？ ・画像比較によるアサーションのメリット・デメリット ・ブラウザ要素のスクリーンショットを用いた検証について ・基本的な実装 ・拡張的な実装 ・まとめ どうしてブラウザ要素のスクリーンショットが要るのか 一般的にGUI自動テストのアサーションは
ウェルネス/アンウェルネス －その真偽を問う－ | Netflix (ネットフリックス) 公式サイト
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
import { WebGLRenderer, Scene, PerspectiveCamera, } from 'three' const Sample: React.FC = () => { const onCanvasLoaded = (canvas: HTMLCanvasElement) => { if (!canvas) { return } const width = window.innerWidth; const height = window.innerHeight; // init scene const scene = new Scene() const camera = new PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000) const renderer = new
ハリウッドを斬る! ～映画あるある大集合～ | Netflix (ネットフリックス) 公式サイト
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでtextareaの入力内容で高さを自動調整する方法をご紹介しています。 では、解説していきます。 本記事で作成するもの 本記事の内容で完成するものがこちら！textareaに値を入力していくと、スクロールバーが表示される行数になった場合にtextareaの高さが自動的に調整されるようになっています。実際に操作してみてください。 See the Pen 6153 by ryohei (@intotheprogram) on CodePen. 注意点としては、textareaの高さを右下の角からマウス等でリサイズすると、幅は維持できますが高さは入力内容に応じて自動で調整されます。その点だけご認識ください。 では、作成していきましょう！ textareaの要素を作成する HTMLでtextareaを作成しま
1 2<input type="button" value="消去" onclick="c.clearRect(0, 0, a.clientWidth, a.clientHeight);"> 3<canvas width="1000" height="1000"></canvas> 4 5<script> 6var f=0; 7var a = document.querySelector("canvas"), 8 c = a.getContext("2d"); 9 10c.lineWidth = 10; 11c.strokeStyle = "rgb(0, 0, 255)"; 12a.onmousedown = function (e) { 13 if(f==0){ 14 f=1; 15 c.moveTo(e.pageX, e.pageY); 16 }; 17}; 18 19a.onmous
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
愛の不時着 | Netflix (ネットフリックス) 公式サイト
ミッチェル家とマシンの反乱 | Netflix (ネットフリックス) 公式サイト
隔たる世界の2人 | Netflix (ネットフリックス) 公式サイト
JavaScript margin 含めた width / height を取得したい - かもメモ
無限スクロール中毒防止のChrome拡張機能を作った話 - Qiita
食品産業に潜む腐敗 | Netflix (ネットフリックス) 公式サイト
How to Add Infinite Scroll in React.js
Release Notes for Safari Technology Preview 94
Vue.js の Composition API における this.$refs の取得方法 - Qiita
地球外少年少女 | Netflix (ネットフリックス) 公式サイト
Seleniumのブラウザ要素スクリーンショットを再考する｜SHIFT Group 技術ブログ
React(Next.js)で素のThree.jsをhooks APIと合わせて使う - Qiita
【JavaScript】textareaの入力内容で高さを自動調整する
JavaScript Canvasについて詳しい方回答お願いいたします
Watch The Playlist | Netflix Official Site