Prototype Tree 06 Dec 2017 | experiment Anyone who has worked with JS long enough knows something or the other about delegation, prototype chains, dunder proto and other similar things. There are times when I wonder how complex and deep this chaining can be. This past week, however, my curiosity got the best of me and I just had to find the answer for myself. I wrote a script that scans the global
この記事は 第2のドワンゴ Advent Calendar 2017 7日目の記事です。 昨日の記事は@yue82さんでRTL設計スタイルガイドのアンチパターンをやってみたでした こんにちは。ニコニコ静画でフロントエンド開発を行っているnagisioです。 今年も冬コミに落ちてしまいました 去年の記事はRe:ゼロから始めるElectron開発生活でした。Electronに関して、残念ながら最近はあまり書いてないのですが、Reactは既に趣味でも仕事でも必須なフレームワークとなりました。 本記事ではそんなReactを用いたプロダクト開発について、どのように開発を進めていくのかを追っていきます。 はじめに(宣伝枠) ニコニコ静画チームにおいて、フロントエンドでの新規開発は基本的に少人数(1〜2人程度)で行っています。比較的小規模な開発が多く、例えば直近でリリースしたのがニコニコ漫画@C93です
この記事はReact #1 Advent Calendar 2017の5日目です。 はじめに 私はなんとなくReduxが好きなのですが、 初めて手を出した時はreact-reduxのボイラープレートやディレクトリ構成やstore、Provider、middlewareのセットアップなど初見ではどれも意味不明で、最初はReact専用のフレームワークだと思っていました。 しかしソースコードを読んでみるとRedux自体は実装にflowもTypeScriptも使っていない非常に小さなJSライブラリに過ぎず、Reactとは独立した存在であることが分かりました。 ここではreact-reduxや他のJSフレームワークの事を一旦忘れてVanilla JSでReduxを動かし、純粋にReduxの動作原理について学んでみたいと思います。 FluxアーキテクチャとRedux1 ReduxはFluxアーキテクチ
When writing async functions, there are differences between await vs return vs return await, and picking the right one is important. Let's start with this async function: async function waitAndMaybeReject() { // Wait one second await new Promise((r) => setTimeout(r, 1000)); // Toss a coin const isHeads = Boolean(Math.round(Math.random())); if (isHeads) return 'yay'; throw Error('Boo!'); } This ret
最近、Webページからざっくりメインコンテンツっぽいものを探し出すプログラムを作成しましたので得られた知見についてまとめてみます。本文などの情報を利用せずに汎用的にメインコンテンツを探したかったので、Elementの位置、幅、高さ(以下rect)等の視覚的な情報を使用して抽出してみました。具体的には puppeteerでページをスクレイピングして各Elementの情報をまとめたツリー構造を作る Elementにスコアを付けて尤もらしいものをメインコンテンツとする というステップで抽出します。 メインコンテンツを抽出する完全なコードについてはgistのサンプルを参照してください。 ページのスクレイピング puppeteerを使ってページをスクレイピングします。最初にdomツリーを探索して必要な情報をjsonとて抽出します。視覚的な情最新のとして各Elementごとにrectの情報を取得します
このサイトは、3Dライブラリ「Three.js」の入門サイトです。Three.jsはWebGLとWebGPUの両方に対応していますが、このサイトでは次世代のWebGPU版(three/webgpu)を中心に解説します。 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGPUやWebGLを素のAPIだけで3D表現しようとすると、立方体1つ表示するだけでも多くのJavaScriptやWGSL / GLSLコードが必要です。Three.jsを使えば
This is a simplified import of the excellent diff-match-patch library by Neil Fraser into the Node.js environment. The match and patch parts are removed, as well as all the extra diff options. What remains is incredibly fast diffing between two strings. The diff function is an implementation of "An O(ND) Difference Algorithm and its Variations" (Myers, 1986) with the suggested divide and conquer s
In this blog post, I take a different approach to explaining this in JavaScript: I pretend that arrow functions are the real functions and ordinary functions a special construct for methods. I think it makes this easier to understand – give it a try. Two kinds of functions # In this post, we focus on two different kinds of functions: Ordinary functions: function () {} Arrow functions: () => {} Or
Note: This is part of a talk I’m giving at Google’s Mountain View campus on Wednesday, December 6th — come join! After four months of hard work, I’m excited to finally announce Turbo! 🎉 Turbo is a blazing fast NPM client originally built for StackBlitz that: Installs packages ≥5x faster than Yarn & NPM 🔥Reduces the size of node_modules up to two orders of magnitude 😮Has multiple layers of redun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く