merpayでは積極的にStorybookを活用してコードと見た目の両方の観点でレビューを行なっていますが、Pull Requestが飛んでくるたびに該当ブランチをpullしてローカルでStorybookを起動するのが大変という運用上の問題を抱えていました。 そこでソリューションチームの協力のもと、PRが作成されるたびにCIからGAE上にユニークなpathをもったStorybookを配信する仕組みが導入されたのが先週のこと。とてもめでたい👏👏 これによってPRのデザインをチェックする時もURLをクリックするだけでよくなりました。 UI開発の概念がひっくり返るほど便利だったので、この仕組みをプライベートの開発でも導入したいと思います。 やりたいこと Storybookをホスティングする環境(URLの共有だけで完結するもの)を作りたい Pull Requestが作成されるごとに自動で新しい

Node.js のバージョン 10 のリリースは 4/25 を予定しています。 また、ECMAScript Modules は Stability1(実験的)でリリースされます。 議論は以下で行われます。 GitHub - nodejs/modules: Node.js Modules Team Node.js Modules Team. Contribute to nodejs/modules development by creating an account on GitHub. 覚えておくべきこと ESM を使いたい場合は、拡張子を.mjsにする .jsファイルでimport/exportは使えません。 ブラウザではtype="module"となりますが、Node.js では拡張子で判断します。 .mjsの拡張子は省略可能である 拡張子の探査順は ESM の時、.mjsが優先されま

One big 2018 goal for the Rust community is to become a web language. By targeting WebAssembly, Rust can run on the web just like JavaScript. But what does this mean? Does it mean that Rust is trying to replace JavaScript? The answer to that question is no. We don’t expect Rust WebAssembly apps to be written completely in Rust. In fact, we expect the bulk of application code will still be JS, even

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

Chart.js, Highcharts, C3, NVD3, Plotly.js, Chartist, Victory In this article, I provide a decision tree to quickly decide which open source javascript charting library is right for your project. You can use any framework like React, Angular, AngularJS, VueJS or just use vanilla javascript. Links to the graph libraries for each framework are provided below. I purposely exclude D3.js among the chart

Jest is a testing framework maintained by Facebook that works great with Puppeteer, a library for controlling Headless Chrome. In this post we will go over how to: Setup Jest, Puppeteer and BabelUse Puppeteer’s API to emulate a mobile device, use selectors, scroll a page, listen to requests, and return response dataWrite tests that are asynchronous and make assertions in JestPuppeteer is still und

TypeScriptには似たような型としてObject型とobject型と{}型が存在します。 let o1: Object; let o2: object; let o3: {}; 今回はこの3つの使い分け、あるいはobject型導入の経緯についてです。 JavaScriptのデータ型 JavaScript のデータ型とデータ構造 - JavaScript | MDNを読めば分かるように、 Boolean Null Undefined Number String Symbol の6種のプリミティブ型を持つプリミティブ値とオブジェクトでJavaScriptは成り立っています。 TypeScriptにおけるobject型とはここでいうプリミティブ型以外を表現しています。 object型はいつ使われるのか いつ役に立つかというとObject.create()の定義です。 TypeScript/

Mixins and Javascript: The Good, the Bad, and the Ugly. Mixins and JavaScript are a like the classic Clint Eastwood movie. The good is that composing objects out of small pieces of implementation is even possible due to JavaScript's flexible nature, and that mixins are fairly popular in certain circles. The bad is a long list: there's no common idea of what the concept of a mixin even is in JavaSc

Vueの公式ドキュメントが強く推奨するVueコンポーネントのファイル名の命名規則。 単一ファイルコンポーネント 単一ファイルコンポーネントのファイル名はPascalCaseかkebab-case。 mycomponent.vue、myComponent.vue MyComponent.vue、my-component.vue ベースコンポーネント 頻繁に使われるベースコンポーネント(ステートを持たないDumpコンポーネントやPureコンポーネントと呼ばれるもの)は、Base、AppまたはVで始めないとならない。 MyComponent.vue VueTable.vue Icon.vue BaseButton.vue AppTable.vue VIcon.vue シングルインスタンスコンポーネント シングルインスタンスコンポーネント(1ページにつき1個しか使われないコンポーネント)は、The

Node.js Advent Calendar が埋まってなかったので、代わりに細かすぎて伝わりにくいTips入れていきます。 object の文字列化をするための関数です。まぁまぁ便利なのですが、あまり使われてないシリーズです。先日公開した %o 便利という記事でも若干出しましたが、もうちょい詳しく解説してみます。 %o 便利 記事でも触れましたが、 util.inspect は %o フォーマッターを使った時に内部で呼ばれている関数です。 const util = require('util') const obj = { foo: 'bar', bar: 123, baz: true } obj.hoge = obj const str = util.inspect(obj) console.log(str) // '{ foo: 'bar', bar: 123, baz: true

Check out Planning for 7.0 for the last updates throughout the 7.0 pre-releases. If something isn't clear in this post let me know! Project Updates​ We started a new videos page! We created this for people wanting to learn more about how Babel works and to help others contribute back. This page contains videos of conference talks on Babel and related concepts from team members and people in the co

お前は今までスクショした画像の枚数を覚えているのか？ こんにちは。WACULでフロントエンドエンジニアをしている @Quramy です。 冒頭のやつは書いてみたかっただけです。気にしないでください。ちなみに僕はDIOよりも吉良吉影派です。 11月末に、Node学園祭で Introduction to Visual Regression Testing というLTをさせて頂きました。 この時は大分話題を絞っての発表でしたので、今日は弊社で実施しているフロントエンドの画像回帰テストについて、LTでは割愛した部分も含めてヌルっと書いていこうと思います。 そもそも、WACULのアドベントカレンダーでこのネタを書くのはこれが初めてではありません。 2016年にも、 @bokuweb が コンポーネント/単体テスト単位でのvisual regressionテストを行うためのツールを作った話し で、画像

どもです。 先日、MacBookPro15インチ上位モデルを購入しまして、ウキウキで今回もそれについて書こうかと思いましたが、やっぱりやめました。w と。なんとなく、オープンソースってやつ、やってないなと思って作ってみました。 （なんかモテると噂で聞いたのでw あ。嘘です。） iPhoneアプリとかのゲーム内でもよくある会話シーン。 こんな感じの会話シーンがあるかと思うのですが、これをhtml、JavaScriptで簡単実装できる、JavaScriptライブラリです。 その名も「MessageViewJS」 Github https://github.com/webcyou/MessageViewJS デモページ http://webcyou.com/message_view_js/demo/ 会社でも色々と作らさせていただいておりまして、公開したいなーと思っているのが、特許を取ってしまっ

この(0,eval)('this')はいったい何なのか。調べた。 調べた結果 これはindirect eval callを使用した、どのスコープでも必ずグローバルオブジェクトのthisを取得するためのテクニックであった。 ES5ではevalを直接呼び出すと、引数のコードはそのスコープで実行されるが、間接的にevalを呼び出すと、引数のコードは必ずグローバルスコープとなるそうだ。なので引数のthisは必ずグローバルオブジェクトとなる。ブラウザではwindowとなり、Nodeではglobalになるのだ。実際どうするかだが、eval関数を変数に代入し、その変数で実行すればよい。 // Nodeで実行 var obj = new (function(){ this.direct = eval('this'); var ev = eval;// 変数に代入 this.indirect = ev('t

CompanyEngineeringProductSunsetting AtomWe are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022. January 30, 2023 Update: Update to the previous version of Atom before February 2 On December 7, 2022, GitHub detected unauthorized access to a set of repositories used in the planning and development of Atom. After a thorough investigation, we hav

Brendan Eich Standardization "Things that are impossible just take longer." - Hixie What was it like to hack JS in 10 days? Me in 1993, before I created JavaScript in 10 days 1995, after I was done creating JS in 10 days Java was the big Web VM JavaScript was "little brother" Think back to 1995... what was on TV then? I had my big break that year... I'd go to a real library to read Computer Scienc