Understanding Jest Mocks
Mocking is a technique to isolate test subjects by replacing dependencies with objects that you can control and inspect. A dependency can be anything your subject depends on, but it is typically a module that the subject imports. For JavaScript, there are great mocking libraries available like testdouble and sinon, and Jest provides mocking out of the box. Recently, I joined Jest as a collaborator
GitHub Actions の JavaScript Action を TypeScript で書いた - はやくプログラムになりたい
GitHub Action を TypeScript で作成したので，覚え書きがてらどうやって作ったかについて書きます． github-action-benchmark という Action をつくりました． 紹介記事：継続的にベンチマークを取るための GitHub Action をつくった Action とは 今年9月に GitHub Action v2 がリリースされました．GitHub Action は GitHub が提供する CI/CD サービスです． 既存のサービスと大きく違う点は，処理を汎用的に Action として切り出して再利用できることです． 例えば，GitHub からのリポジトリのクローン actions/fetch や Node.js のセットアップ actions/setup-node などの基本的な実行ステップも Action として実装されています． Acti
husky + lint-staged で品質を保つ - ナデズダ・ゴボリン🖥
リントツールをインストールしても使わなければ意味がない。 というわけで人的なリント忘れを未然に防ぐためにも、huskey と lint-staged と 各種リントツールを組み合わせてコミット前に自動的にリントが行われる環境を作りましょう。リントエラー時にコミットを弾くことによって git 上のコードの品質を保つことができます。 環境 husky 1.1.0 lint-staged 7.3.0 git hooks の設定を package.json などからできるようにしてくれるツールです。 生の git hooks だとチーム内で共有とかがしにくいですが、husky を使って設定を package.json などに書けば簡単に共有できます。 pre-commit フックを使うことが多いと思いますが、クライアントサイドのフックであればすべてサポートしているみたいです。 ステージングしたファ
IntersectionObserveの遅延読み込みライブラリのLozad.jsを紹介する - Qiita
この記事は 「DeNA IPプラットフォーム事業部 Advent Calendar 2017」 13日目の記事です。 こんにちは。 @yukagil です。 マンガボックスという、スマホ向け電子書籍サービスのサーバーサイド/フロントエンドの担当をしています。 前回は「Perlの行列演算モジュールを用いた推薦システムの実装」の紹介をしたのですが、 今回は「要素の画面内判定をどのようにして行うか」という話を中心に、個人的にもっと知られてほしいと思っているLozad.jsの紹介をします。 はじめに Webサイトの実装(特にスマホ)をする際に、「ある要素が画面内にあるかどうか」の判定が必要になる場面って結構あるかと思います。 ユースケースとしては、 LoadMore(無限スクロール) LazyLoad(遅延読み込み) Log(全体の何％読まれたか等) 画面内に入ったタイミングでアニメーションを実行
FrontendOps
I had recently the privilege to speak about FrontendOps at the last Thoughtworks XConf EU in UK, Germany and Spain. You can find my presentation slides here and at some point soon a video of the talk will be made available. For now if you are interested to the topic what follows is essentially my talk transcript. Update 14.11.18: a video of my talk is now available here. This article describes the
Shape Detection API + PWAでブラウザからそのまま使えるバーコードリーダーアプリを作ってみる - Qiita
ラクス Advent Calendar 2018 繋ぎの3番バッターです。 今回はChrome 70から実験的に使えるようになっているShape Detection APIについてまとめてみます。使ってみると意外と実用的だったのでPWA化してブラウザだけでスマホアプリ相当のことが実現できそうなことも検証してみました。 Shape Detection APIとは Webの新しい技術の普及を推進する団体の WICG が仕様策定を進めているJavaScriptのAPIです。 Accelerated Shape Detection in Images まだEditor's Draft（草案レベル）ですが以下の3つの事ができます。 Face Detection（顔検出） Barcode Detection（バーコードスキャン） Text Detection（テキスト認識） Shape Detecti
画像の最適化 | Web | Google Developers
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
Google Apps ScriptをTypeScriptで実装する(clasp/TSLint/Prettier) #gas #typescript - My External Storage
claspというGoogle Apps Script(GAS)をローカルで開発するためのツールがある。claspを使うと、TypeScriptを使ったGASのコーディングも標準で行える。 今回はclaspを使って以下の要求を満たしながらGASの開発を行う際の設定をまとめる。 TypeScriptによる実装 Gitによる構成管理 Prettierによる自動フォーマット TSLintによる静的解析 TL;DR claspを使えばGoogle Apps Script(GAS)をローカルで開発できる https://github.com/google/clasp claspはwebpackなどを使わずにTypeScriptで実装できる https://github.com/google/clasp/blob/master/docs/typescript.md 静的型付けをすることで補完などを使いな
Lighthouseを自動化する 〜その１〜 - Qiita
Lighthouse大事 LighthouseはGoogleが出しているWebサイトのパフォーマンス測定ツール。 今後はMFIが進んでいくこともあり、Lighthouseの数値を日頃からチェックしておくことは大事。 Webサイトに改修を加えた結果、スコアが落ちてSEOの評価が下がってしまったら目も当てられない。 Lighthouseは面倒 Lighthouseの実行はChrome拡張機能やChromeのデベロッパーツールから実行することができる。 けど、毎回対象のページをブラウザで開いてツールを実行するのは結構面倒。 あと、スコアの共有も面倒。 なので今回は、以下の3つの処理をJavaScript上から自動で行う。 1. スプレッドシートから対象のURLを取得（今回） 2. Lighthouseのスコアを取得 3. Slackへの通知まで スプレッドシートからURLを取得 スプレッドシート
なぜSeleniumテストは不安定なのかとその対策 - 生産性向上ブログ
この記事は、Selenium/Appium Advent Calendar 2016の18日目の記事です。17日目は、xshsakuさんのAppiumとSTFを使ったAndroid実機テストでした。 はじめに Seleniumテストを運用する上で安定性は大事です。テストが不具合以外の原因で頻繁に失敗してしまうと、チームメンバーは段々テスト結果を気にかけなくなってしまいます。そうなってしまうと、いざ不具合でテストが落ちても気づかれずに後回しになってしまう恐れがあります。自動テストの目的が問題の早期発見であることを考えると、これは深刻な問題になります。 この記事では、Seleniumテストが不安定になりやすい要因とその対策を、自分の経験の中からまとめてみます。 環境 Seleniumテストは、テストコードを実行するマシンさえあればいい単体テストと異なり、様々な環境が必要となります。そのため、不
Lodashのファイルサイズを削減する方法 | 綺麗に死ぬITエンジニア
JavaScriptにおける便利な関数の詰め合わせであるライブラリ「Lodash」。JavaScript（Node.js）での開発をしている人の多くは利用したことがあるでしょう。 今回はそのLodashを使う上で、ライブラリを導入後のファイルサイズを削減する方法を紹介します。 なお、今回当記事で紹介するにあたり、検証にモジュールバンドラーツール「webpack」を利用します。ですが、webpackを利用しない場合においても同様の方法でファイルサイズは削減できます。 ユースケースLodashに限らず、比較的高機能なJavaScriptライブラリは、場合によっては性能面や容量（ファイルサイズ）の面で、1機能特化のミニマルなものに比べ劣ることがあります。 例えば、そのライブラリの全ての機能のうち1つの機能しか使わなかったとしても、全ての機能分のファイルサイズを消費し、全ての機能を読み込んでしまい
Conditional Types in TypeScript
January 9, 2019TypeScript 2.8 introduced conditional types, a powerful and exciting addition to the type system. Conditional types let us express non-uniform type mappings, that is, type transformations that differ depending on a condition. #Introduction to Conditional Types A conditional type describes a type relationship test and selects one of two possible types, depending on the outcome of tha
JWTをセッション管理に転用するのはあまり良いアイデアではない(認証だけならいいよ) - id:anatooのブログ
どうしてリスクアセスメントせずに JWT をセッションに使っちゃうわけ？ - co3k.org JWT認証、便利やん？ - ブログ JWT 認証のメリットとセキュリティトレードオフの私感 - ..たれろぐ.. JWTをセッションに使うことに関して最近少し議論があったので、自分のお気持ちを表明したいと思います。 私は以前SPAを書く時にJWTをセッション管理に使おうとしたことがありましたが、仔細に検討していくとJWTをセッション管理に使うのは無意味にセキュリティ上のリスクを増やすだけで、伝統的なクッキーを使ったセッション管理を使った方が良いという結論に至りました。 前提を整理するためにあらかじめ前置きすると、「JWTをセッション管理に使う」というのは認証APIなどで返ってきたJWTをlocalstorageなどJavaScriptからアクセスできるストレージに保管しておいて、ajaxでサーバ
PWA(Progressive Web Apps)と戯れてみる - Qiita
はじめに Livesense Advent Calendar「学」の7日目です。「学」から連想できるものであれば、なんでもよしということで何を題材としようかと迷いましたが、せっかくなので「業務上あまり関わりがない分野の技術を学ぶ」ということにしました。 普段はAWSやGCPなどのクラウドやコンテナ周りを触ることが多く、インフラ関連がほとんどのため、今回はフロントエンド周りで熱いと噂のPWAを触ってみたいと思います。 PWAに関しては、Qiitaでもまだ投稿が少なく30件程度でした。特に目新しいことをしておらず、何番煎じかわかりませんが、なにか参考になることがあれば幸いです。また、的外れなことを書いてたらご指摘いただけると助かります。 PWA(Progressive Web Apps)とは Googleの記事を借用すると、以下の特徴を持つようです。 https://developers.go
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Winston Logger Ultimate Tutorial- Stackify
jest で非同期関数をテストするときの注意点 - Qiita
Complete list of Typescript error codes and their fixes
GitHub - martellaj/chrome-extension-react-typescript-boilerplate: 🔨 A boilerplate project to quickly build a Chrome extension using TypeScript and React (built using webpack).
make_frontend_properly_spa.pdf