1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - dely Tech Blog
こんにちは！dely でフロントエンドの開発をしています @all__user です。 今回は kurashiru のフロントエンド開発に導入されたビジュアルリグレッションテストについてご紹介したいと思います。 【反応を多くいただいた点について記事の最後に追記しました】 目次 目次 ビジュアルリグレッションテストとは 導入の背景 フロントエンドのテスト？ SPA移行前後の比較 ツール reg-suit Loki Wraith BackstopJS テストのフロー GitHub + CodeBuild + BackstopJS ステージング環境 テストケースは Google スプレッドシートで管理 結果を S3 にアップロードして Slack に通知 まとめ 【追記】 運用が大変ではないか？ 1pxの違いにそこまで工数かける？ 広告が差し込まれたり変わっただけでテストが壊れるのでは？ ビジュ
3歳娘「パパ、関数をカリー化して？」 - Qiita
再就職する前のワイ ワイ「あー、今日は休みやな」 ワイ「いうて昨日も一昨日も休みやったけど」 娘（3歳）「パパ、お絵かきしよ」 ワイ「ええで」 娘「あれ描いて。あの・・・アンパンマ（ｎ」 ワイ「おっとそこまでや」 ワイ「著作権のあるものを言うたらアカン」 ワイ「あれやな？アンパンパーソンのことやな？」 ワイ「描いたるで」 ワイ「チョイチョイチョイ、と」 ワイ「こうやな」 娘「わあ。上手。」 娘「次は食パンマ（ｎ」 ワイ「食パンパーソンやな？」 ワイ「描いたる描いたる」 ワイ「チョイチョイチョイ、と」 ワイ「こうや」 ワイ「ついでにバイキンパーソンも描いたる」 娘「すごいね。上手だね。」 娘「じゃあ、次は・・・」 娘「カリー化された関数を書いて」 ワイ「（おっと？）」 ワイ「カリー・・・カレーパンパーソンのことかいな？」 娘「ちがう、カリー化された関数書いて」 ワイ「お、おう」 ワイ「分かる
Callback を撲滅せよ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート（Node.js）チームの伊藤（@koh110）です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー
ml5 - A friendly machine learning library for the web.
Welcome to our new website! We’ve launched a new version of ml5.js with breaking changes. If you encounter errors such as '... is not a function' or need features that are no longer available, please refer to our FAQ for how to access the previous version and documentation. Friendly Machine Learning for the WebA neighborly approach to creating and exploring artificial intelligence in the browser.
Pts.js
Connecting the dots Like seeing the Big Dipper in a sky full of stars, Pts helps you connect the dots in the vastness of conceptual spaces. Pts enables you to compose and express what you see in your mind's eyes — points as ideas, shapes, colors, motions, interactions, and more. A modern javascript library Pts is lightweight and modular. Written in typescript, it comes with many useful algorithms
Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
お知らせ（2021/05/26 追記） 以前はeslint --fixなどで ESLint を実行時に Prettier でコードを整形し、整形したコードに対して構文チェックが実行されるようにすることが推奨されていました。 ESLint で Prettier を実行するためには、ESLint の Plugin が必要でしたが、これを利用することが公式で推奨されなくなりました（詳細はこちら）。 そのため、記事を更新して Prettier と ESLint をそれぞれ実行させるような内容に変更しました（ついでに husky のバージョンも上げており、それに関する内容も更新しています）。 更新前のコードや記事は以下にありますので、必要に応じてご確認ください。 はじめに Prettier（v.2.3.0） に関しての備忘録です。 「Prettier の何が便利なのかよくわからない」 「ESLint
Gio.js
Create a 3D global data visualization model with your own data in just four lines of javascript code
Delighters
Delighters.JS Add CSS animations to delight users as they scroll down. A tiny javascript library by Q42 https://github.com/Q42/delighters Features Declarative Flexible Light footprint Framework-agnostic Supports desktop, mobile & tablets Degrades gracefully to your default styling Usage 1. Include the script <script type="text/javascript" src="delighters.js"> 2. Add delighter attributes <div class
Build Better JavaScript Apps with Webpack and Poi
Webpack is a build tool that puts all of your JavaScript files, images, fonts, and CSS, in a dependency graph. This lets you use require() in your source code to point to local files and decide how they can be processed in your final JavaScript bundle. Poi is a zero-config bundler that is built on top of Webpack. Zero-config does not indicate that there’s no configuration at all, just that a lot o
2017年JavaScriptのテスト概論 | POSTD
本稿は、JavaScriptのテストについて最も重要な根拠、用語、ツール、アプローチなどの知識を身に着けることを目的とした簡略版ガイドブックです。本稿で検討する数々の側面に関する最新の秀逸な記事も紹介しつつ、私たちが経験的に得たことも多少付け加えたいと思います。 Facebookによるテスト用フレームワークであるJestのロゴをご覧ください。 見てお分かりのように、このフレームワークは「苦痛のない」JavaScriptのテストをスローガンに掲げています。しかし、 “次のように言う人” もいます。 苦痛のないテストなんてあり得ない。 実際、Facebookはこのスローガンを掲げるだけの素晴らしい理由があります。一般的にJSのデベロッパは Webサイトのテストにあまり満足していません 。JSのテストには制限があり、実装が難しく、低速である傾向があります。 一方、正しい戦略を立てて適切にツールを
JavaScriptフレームワーク選定の議論 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在の
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
アメブロ2016 ~ Isomorphic JavaScriptの詳しい話 | CyberAgent Developers Blog
問題点はIsomorphic実装難易度です。では、アメブロのIsomorphicの実装方法と実装する際にあった問題及びその解決策をお伝えします。 ちなみに、Michael Jackson氏はIsomorphic JavaScript ではなく、 Universal JavaScript と呼ぶべきだと主張しています。私たちはIsomorphic JavaScriptという名前で使うのに慣れたので、ここでは*Isomorphic JavaScriptと記述します。 AmebloのIsomorphic 技術選定 先に結論をあげます：React + Redux 技術選定の基準は下記となります。 安定さ。基本的にプロダクト環境で使える正式版があること。 アクティブな開発。 よいコミュニティ。技術の周りに大きいコミュニティが育っていること。 実績がある。 まずView層のライブラリの選定です。このプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Best React-Based Framework | Gatsby
次世代認証プラットフォーム “Auth0” を使ってみた / Next Geneartion Identity "Auth0" - Speaker Deck
Poi
GitHub - GoogleChromeLabs/jsvu: JavaScript (engine) Version Updater
まだ node.js の依存性解決で消耗してるの？ | PLAID engineer blog
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
yarnがnpmと何が違うのか試してみた - Qiita
