Backpackについて調べた - Qiita
お手伝いしているプロジェクトでBackpackなるものが使われており、はてな？と思ったので調べました。 Backpackとは？ Backpack is a minimalistic build system for Node.js projects. Backpackは、Node.jsのプロジェクトの最小限のビルドシステムだぜ！とのことです。create-react-appやNext.jsにインスピレーションを得たようで、設定ファイルの記述や追加のnpmパッケージなしで、 Babelによるトランスパイルの実行。async/await、object rest spread、class propertiesなどの構文の利用 source-mapの対応（source-map-support） nodemon的なファイル監視、再実行（Live Reloading） が、出来るようです。内部ではwe
prettier-markdownでmarkdown内のコードを整える - Qiita
$ cat README.md ## JS ```js function hoge( arg1, arg2) { return 'hoge'; } ``` ## SCSS ```scss .hoge { .fuga { .duga { text-align: center; } } } ``` CLIは、prettier-markdown 対象ファイル オプションの形式で実行する。対象ファイルはsrc/**/*.mdみたいな形式でもOK。オプションはprettierにダイレクトに渡されるっぽいので、--single-quoteなど、prettierにあるオプションはそのまま使える。--dryオプションだけが例外で、--dryオプションを使うと、どのファイルが更新されるかが表示されるが、実際にはファイルは更新されないお試しモード（dryrun）で実行できる。（prettierのWarning
err.stackに含まれるコードの位置情報をsource mapで元に戻す - Qiita
webpackやBabel、uglifyjsなどを使ってソースコードを変換している場合、err.stackに含まれるコードの位置に関する情報が変換後のコードの位置になっており、デバッグが難しい。err.stackに含まれる位置の情報をsource mapを使って、元のコードの位置に変換する方法をちょっとだけ調べた。 調べると色々なnpmパッケージが見つかるが、source-map-supportが有名っぽい。 # 検証用ディレクトリ作成 $ mkdir source-map-support-playground $ cd source-map-support-playground # 依存関係のインストール $ yarn add babel-cli babel-preset-flow source-map-support -D
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID
JSON Schemaとreact-jsonschema-form - Qiita
{ "title": "ユーザー", "type": "object", "properties": { "id": { "title": "ID", "type": "string", "pattern": "^[0-9a-zA-Z]{8}(-[0-9a-zA-Z]{4}){3}-[0-9a-zA-Z]{12}$" }, "name": { "title": "ユーザー名", "type": "string", "pattern": "^[\\sa-zA-Z]+$" }, "age": { "title": "年齢", "type": "integer", "minimum": 0 } }, "required": [ "id", "name" ] }
eslint-config-airbnb利用時にdevDependenciesのimportで怒られる時の対応 - Qiita
これはちょっと厳しすぎるので、テストコードなど一部のファイルだけでdevDependenciesのimportを許可したい。 対応策 eslint-config-airbnbのバージョンによって依存しているeslint-plugin-import、eslint-config-airbnb-baseのバージョンが違うので、対応が異なる。 eslint-config-airbnbの11.1.0以前 eslint-plugin-importのバージョンが、v1.14.0以前の場合。 コメントで一時的に無効にする 少なければこの方法で良さそう。コメントで向こうにする場合、他のルールまでもみ消さないように、どのルールを無効にするか明記した方がよい。（eslint-plugin-eslint-commentsを使うとそのあたりも制限できてよい）
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
deck.gl
deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.
Webpack2のTree Shakingを試す - Qiita
社内勉強用資料。 Tree Shakingとは？ ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。 もともとはrollupというBundlerに実装されていた機能ですが、webpackの次バージョンであるwebpack2にも実装されているということで試してみました。 webpack2のTree Shakingの仕組み Tree-shaking with webpack 2 and Babel 6 上記記事に詳しく書いています。簡潔に説明すると、まず、ESモジュール形式で書かれたJSファイルを全て結合し、そのタイミングでどこからもimportされていないexport文を消してしまいます。あとは、コードをminifyするタイミングで完全に取り除かれるという感じ
ES6 Template Literals, the Handlebars killer?
I had a recent discussion with one of the awesome developers at the FT - @bjfletcher. We were looking at how viable it would be to replace a templating language, like Handlebars with ES6 Template Literals, in some manner. Ben suggested it'd be a good idea to turn our discussion into a post, and here we are - with a click bait title and everything. So what are Template Literals? How can they do wha
Reduxのパターンとアンチパターン | POSTD
Redux は、 Flux のようなアーキテクチャを使用してアプリケーションの状態を管理できる非常にシンプルなライブラリです。私たち Affirm では今、 Reduxのタイムトラベル機能 に注目しています。Affirmの主要事業は、透明性の高い消費者ローンを提供することなので、ローン申し込み時の全過程をユーザ視点で再現できると非常に有用なのです。 Reduxはフレームワークというよりも、パターンの適用に役立つ関数セットです。よって、適切なパターンを慎重に適用しないと、Reduxを使ったことを後悔する結果になりかねません。この記事では、Affirmで確立したReduxのベストプラクティスや、ミスを犯しやすいポイントについて説明します。 ImmutableJS ImmutableJS は、不変の永続データ構造を扱うためのライブラリです。私たちがこのライブラリを好んで使う理由は2つあります。
【乖離性MA】開発者必見！PC版『乖離性』で採用されたWebGLの魅力を聞いてきた | ファミ通App【スマホゲーム情報サイト】
WebGLでブラウザゲーの未来がアツい！！スクウェア・エニックスから好評配信中のキャラクターコマンドRPG『乖離性ミリオンアーサー』（以下、『乖離性』）。 2016年10月より、本作のPCブラウザ版（以下、PC版）が、Yahoo! JAPANの運営するオンラインゲームサービス”Yahoo!ゲーム”で配信中だ。 すでに体験した人なら分かるように、スマホ版の魅力である3Dグラフィックを使用した派手な戦闘演出はPC版でも健在。そうしたブラウザベースでの動作にひと役買っているのが、WebGLという技術である。 今回は、PC版『乖離性』開発ディレクターの加島直弥氏、Mozilla Japanの清水智公氏、そしてUnity Technologies Japanの大前広樹氏に、WebGLについて話を伺った。 ※本インタビューはPC版配信前の9月末に実施されたものです。 WebGLの鍵を握るのはasm.j
Change width of element without reflow
I have a music player with an animated bar that displays the current position in the song. It is rendered with requestAnimationFrame and works by changing the width style of the div to X%, where X is the percentage of time through the current song. This causes huge CPU use in Chrome I believe due to the constant reflow work being done each frame. What are other options I can use to eliminate reflo
Different ways to debug JavaScript code
Much of time of developers spent on fixing problems. When it comes to fixes, one need to be good and fast at debugging. Debugging is part of programming. It’s very difficult to write efficient JavaScript code without debugging. You must diagnose into code to find an actual root cause. In the era of IE, most of the programmer debug using alert. But now a day’s many methods and tools added into brow
Node.js Live Edit - Chrome DevTools - Dev Tips
Chrome DevTools: Live edit running Node.js code with hotswapping Last updated: 19th July 2020 DevTools now has native Node.js debugging. One powerful feature is the ability to live-edit already running code in a Node.js execution context, this is sometimes referred to as 'hotswapping'. You can enable the Node.js debugging experiment in DevTools and then run this command in your terminal: node --in
HTML5 Video
HTML5 Video Events and API This page demonstrates the new HTML5 video element, its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values). See the effect on the video and on the underlying events and properties. load() play() pause() currentTime+=10 currentTime-=10 currentTime=50 playbackR
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Universal JavaScript Apps with React Router 4 | by Patrick Hund | eBay Tech Berlin
JSON Schema in Web Frontend #insideFE
Bad Points.md
GitHub - azu/ui-event-observer: Provide performant way to subscribe to browser UI Events.
