コードフォーマッターをPrettierからdprintにしたら10倍以上速くなった話🚀 - KAKEHASHI Tech Blog
はじめに こんにちは！ソフトウェアエンジニアの種岡です。 私たちのチームでは、TypeScriptを使用して開発を行っており、Prettierというコードフォーマッターを利用し、チーム内でコーディングスタイル統一に大変重宝しています。 そんなフォーマッター界隈で、Rust製で爆速で動作すると噂のdprintが良いということで試してみたところ、驚くべきことが起きました！ Prettierでは、コードフォーマッティングに 7.69秒 かかっていたのですが dprintを使うことでわずか 0.47秒 で完了するようになりました🚀🚀🚀 なんと、 10倍以上速い とういう結果に！ コードフォーマットは、Gitのpre-commitフックやGitHub Actionsで日々活用しており、普段の開発作業の裏側でコードの品質を支えてくれているありがたい存在です。 この速度改善により、開発プロセスの中
Chrome の Back button を押した際に「意図しない Cache」が利用されて、期待と違うページが表示される問題について調査した - Nao Minami's Blog
以前、同僚と話していた際に「同じ URL で Accept request header に応じて response の Content-Type を変えていると、Chrome で Back button を押した際の結果が意図しないものになる」ということが話題になりました。 これは、自分も過去に経験した事があり、不思議に思っていた部分です。Safari や Firefox では発生せず、Chrome だけで発生するというのもポイントです。この挙動について、今回は調査してみました。 TL; DR 今回の調査内容を簡潔にまとめると、以下のようになります。 同じ URL で Accept request header に応じて response の Content-Type を変えると、Chrome では Back button を押した際に意図しないコンテンツが表示される事がある。Safar
Codecovセキュリティアップデートの対応~ Android編 - sanadamaru's blog
前回のCodecovのセキュリティアップデートの対応~iOS編 - sanadamaru's blog に引き続き今回はCodecovセキュリティアップデートで対応したことのAndroid編を書いていこうと思います。 対応内容 CircleCIのEnvironment Variablesに登録している以下のシークレット情報を更新しました。 PLAY_ACCOUNT_JSON_BASE64の変更(Google Playのサービスアカウント) Android keystoreとアップロード鍵の変更 Google Play Consoleに登録している各アプリのアップロード鍵のリセット申請 PLAY_ACCOUNT_JSON_BASE64の変更 私のプロジェクトではGoogle Playにapkのアップロードを自動化するためにGradle Play Publisherプラグインを使用しています。
freeeプロジェクト管理でJavaScriptバンドルサイズ削減に取り組んだ話 - freee Developers Hub
こんにちは！ 中部オフィスでエンジニアをやっているichienです。 5月に入社してfreeeプロジェクト管理の開発を担当していました。 今回はfreeeプロジェクト管理のJS(JavaScript)バンドルサイズを削減した話を紹介します。 改善前はバンドルしたJSファイルが5MB以上に肥大化しておりダウンロードに数秒かかっていました。 その分、ファーストビューの表示もその分遅くなり、ユーザ体験に課題がありました。 今回は次の3つの施策を実施して、5MB→1.7MBまで削減し、ダウンロード時間も70%短縮できた話をします。 gzip圧縮の適応 webpack-bundle-analyzerで現状の可視化と削減対象の決定 不要な日付・祝日データの排除 また、今回の取り組みは一度にすべて対応したわけではありません。次の様にstep-by-stepで進めることを意識しました。 現状を可視化し理解
75億ドキュメント以上のデータを保持するMongoDBを、Amazon EC2からMongoDB Atlasへ約3ヶ月で移設した方法 | CyberAgent Developers Blog
75億ドキュメント以上のデータを保持するMongoDBを、Amazon EC2からMongoDB Atlasへ約3ヶ月で移設した方法 はじめに タップル SREの赤野、CAM SREの庭木です。 タップルは2021年3月頃にMongoDB on Amazon EC2(以下EC2 MongoDB)からMongoDB Atlas(以下Atlas)への移設を行いました。 今回はこの移設での取り組みについて紹介します。 Atlasへ移設することになった経緯・目的 タップルでは定期的にキャパシティプランニングを目的とした負荷試験を実施しており、今後のDAU増加のシミュレーションに対してシステムのキャパシティが確保できるかを定期的に確認しています。 タップルSREのキャパシティプランニングの取り組みについては、以前発表させていただいた資料があるのでこちらにも目を通していただけると幸いです。 2020年
Twitterのフリート機能に対する権限昇格
はじめにTwitterはBug Bountyプログラム(脆弱性報奨金制度とも呼ばれる)を実施しており、脆弱性の診断行為を行うことが認められています。 本記事は、そのプログラムを通して報告された脆弱性についてを解説したものであり、Twitterが認知していない未修正の脆弱性を公開する事を意図したものではありません。 また、Twitter上で脆弱性を発見した場合はTwitterのBug Bountyプログラムより報告してください。 (This article is written in Japanese. If you’d like to read this article in English, please visit HackerOne report.) TL;DRTwitterが公開したフリート機能が使用しているAPIに脆弱性が存在し、READ権限しか持っていないサードパーティアプリケ
JavaScriptライブラリを読むときのコツ
少し前からライブラリを読むトレーニングを始めたのですが、最近ようやく読み方がわかってきたので、やり始めた頃に知っておきたかったことをまとめます。 これから JavaScript/TypeScript で書かれたライブラリを読んでみようと思っている方の助けになれば嬉しいです。 「私はこういう道具を使ったり、こういう工夫をしています」みたいな感じの内容ですので、もし「もっといい読み方があるよ」みたいなのがありましたらIssueなどで教えていただきたいです。 （※ライブラリを読むにあたって、ブラウザの話と NodeJS の話があるのですが、似てる点がほとんどなのでごった煮します。） エントリポイントを探す ライブラリを読むにあたって そのライブラリが持つ module がどう協調して全体が作られるのか その関数は正確にはどういう挙動をするのか などを考えると、ユーザーから渡された入力や呼び出しが
Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する - パンダのプログラミングブログ
追記: 本記事がesa.ioの公式Twitterに取り上げられました！ esaに書いた記事をNext.jsで公開する Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。 ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、getStaticPropsは静的なページを構築するために最適なAPIです。 そこで、esaにmarkdownで書いた記事をNext.jsで表示するサイトを構築しました。 実際にサイトにアクセスして記事を開いてみてください。爆速で遷移するのが体験できます。Lighthouseの成績もバツグンです。（blog-starterをベースに利用したため、コンテンツはそのレポジトリの内容を踏襲しています） デモサイトのコードはGitHubにアップ
npqやRenovateでリポジトリを安全に保つ | フロントエンドBlog | ミツエーリンクス
Webのフロントエンド開発に関する記事を読んでいると度々目にする npm install package-name というコマンドがあります。この記事を読んでいる皆さんも数えきれないほど実行してきたコマンドではないでしょうか。 このコマンドはnpmのレジストリから指定したパッケージをインストールするコマンドですが、中には脆弱性が含まれているパッケージもあります。 上のキャプチャの通りnpm installコマンドは脆弱性を報告してくれるものの、それによってインストールが中断されることはありません。 「npq」はパッケージをインストールする際にパッケージの安全性についてチェックを行い、チェックに通らない場合はインストールを続行するかどうかを確認してくれるパッケージです。 いくつかのマーシャルと呼ばれる指標が用意されており、現状では以下の6つのマーシャルに当てはまる場合はパッケージのインストー
ブラウザで何が起こっているのかを知る Reporting API と ReportingObserver | blog.jxck.io
Intro Web サービスにおいては通常、 Web サーバから取得できるアクセスログやエラーログを取得し解析する基盤を保有するだろう。 しかし、 Web サーバから取得できる情報だけでは、ブラウザで何が起こったのかを知るのは限界がある。 今回は、ブラウザ内で起こったことを知るための Reporting API と、その Report の収集について解説する。 Notice 本記事の大半は 1 年以上前に書いたものだが、そのころは仕様も実装もまだまだ落ち着きが無かった。 仕様 report-uri から report-to への移行期 JFV の採用への不安 実装 ディレクティブの実装がバラバラ ReportingObserver では取れるが default group に自動では飛ばない(未実装) ReportingObserver で取った report が JSON Seriali
Renovate ではじめる依存関係更新の自動化 | Recruit Tech Blog
本記事は、リクルートライフスタイルアドベントカレンダー10日目の記事です。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属している渡邉です。 最近は新規開発をやっていて、日々プロジェクトの package.json の更新に追われています。本記事ではその更新タスクを大いに助けてくれた Renovate について紹介します。 Renovate とは Renovate はプロジェクトの依存関係 (Dependency) の更新を自動化するツールです。似たようなツールとしては、Dependabot や Greenkeeper があります。プロダクションレベルのプロジェクトでは、明示している Dependency だけでも 20~30 程度あるのではないでしょうか。それらの Dependency は日々更新されており、最新版に追従していくだけでも時間と手間がかかります。Re
CUEを試して見る | フューチャー技術ブログ
前回のエントリー、一周回って、人間が読み書きする設定ファイルはJSONが良いと思ったの続きです。 設定ファイルをどうするか問題はいろいろ悩ましい問題であります。そんな中、設定ファイル用言語という触れ込みのCUEがリリースされました。 すでに、NSSOLの方が、Linterとして使うという紹介記事をすでに書かれています。これはユースケースの一部（これでも有用ですが）です。まだ使い込んだわけではなく、チュートリアルとドキュメントを一通り読みつつ軽く試した程度ですが、全体的な紹介をしようと思います。 yamlやJsonのチェック(Lint)ができるCUEの紹介 CUEによってできるようになること主な特徴としては次のような感じです。 人が書く設定ファイル(JSON/YAML/TOML/iniあたりがライバル)のための言語 スキーマ定義が書けて、バリデーションが可能 テンプレート機能で一部が違うデー
API Test ライブラリ Tavern のご紹介 - 一休.com Developers Blog
こんにちは。 一休.comの開発基盤を担当しています、akasakasです。 今回は、Tavern という API Test ライブラリ を紹介したいと思います。 一休でAPI Test が必要になった背景 API Test を導入する上で考えたポイント 開発者フレンドリー CI連携 Tavernのご紹介 Tavern のいいところ YAML でテストを記述できる 前のテストの結果を保存できる・次のテストに使える CI連携 Tavern の実運用にまつわる細かい話 まとめ 参考 一休でAPI Test が必要になった背景 前回のブログでも少し触れましたが、APIのテストを無理やりSeleniumを使ってテストを続けた結果、E2Eが破綻しました。 適切なレイヤーで適切なテストをしようということで、APIに関してはちゃんと API Test ライブラリ の導入を決めました。 user-firs
@typescript-eslint ことはじめ - teppeis blog
追記: 2019/05/01 最近の@typescript-eslint/eslint-plugin, Prettierのアップデートによって、正式にTypeScript 3.4対応されました。一通り普通に動いてる感じ。 これまで自分で使っていて問題になったのがパフォーマンス。ESLint単体やTSLintに比べて、プロジェクトによるだろうけど2倍以上遅い。体感で結構辛い。 Poor performance on some projects · Issue #389 · typescript-eslint/typescript-eslint これはTypeScriptのパーサーを通す部分の構造上の問題が原因なので、簡単には直せなそうな気配。 とりあえず、個人的には型を必要とするルールにそこまでの価値を感じていないので、該当ルールを無効にしてparserOptions > projectを削
Amazon CloudWatchのアラームをMackerelアラートにする仕組み - KAYAC engineers' blog
SREチームの吉村です。 弊社では主にAmazon Web Service（AWS）を使ってサービスを構築、運用しており、そのサービスの監視にMackerelを利用しています。 Amazon CloudWatchのメトリクスのうち主要なものはfluentd（fluent-plugin-cloudwatch、fluent-plugin-mackerel）を利用してMackerelに登録していますが、量が多くなるとfluentdの設定が煩雑になってしまいます。 そこで、Mackerelへの登録に必要なそれらの設定なしに、CloudWatch Alarmを使ってMackerelのアラートとして発報できる仕組みを作りました。 Mackerelへアラートを発報するようにした理由は、アラートの通知や管理はMackerelで一元管理をしているためです。 今回その仕組みについてご紹介、組み込み手順まで説明
off-the-main-thread の時代 - mizchi's blog
off-the-main-thread は今フロントエンドで熱いテーマの一つです。日本語圏では今ひとつ話題になってないので紹介しておきます。 off-the-main-thread の概念の大まかな概要については、Chrome 開発者の nhiroki さんの日本語の記事があるので、こちらを参照してください。 nhiroki.jp speakerdeck.com ここまでのあらすじ 従来のウェブブラウザーでは、一つの画面につき一つ割り当てられる、UI スレッドと呼ばれる名前空間で様々な処理を行ってきました。DOMセマンティクスの評価, CSS による rendering / painting、JSのScripting…。もちろん裏側ではブラウザが様々なバックグラウンドサービスに処理を委譲し、スレッドで実行され、その非同期な結果を受け取っているわけですが、少なくともUIスレッドで走るJSから
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
東京地方検察庁の偽サイトを使用した特殊詐欺について - tike blog
はじめに 2018年2月、東京地方検察庁の偽サイトを使用した特殊詐欺事件が各メディアで報じられました。 www.itmedia.co.jp その後も同様の手口により金銭が窃取される事案が全国各地で発生しています。 ニュース記事などから入手可能な事案は以下の通りです。 発生日付 発生場所 被害者 被害額 ソース 2018年1月29日 ~ 2月13日 東京都内 30～40代の女性4人 約390万円 冒頭の記事 2018年3月 埼玉県所沢市 41歳の女性 350万円 ※1 2018年3月 広島県廿日市市 30代の女性 不明 ※2 2018年4月25日 埼玉県三郷市 33歳の女性 146万円 ※1 2018年5月 鹿児島県内 女性 数十万円 ※3 2018年5月25日 愛媛県伊方町 30代女性 100万円 ※4 2018年6月4日 長崎県長崎市 30代女性 50万円 ※5 2018年6月15日 静
Cross-Origin Read Blocking (CORB) とは - ASnoKaze blog
追記20180606 Chrome独自と書いていましたが、「Fetch Standard」に取り込まれていることを確認しました すでに、Chromeで「Cross-Origin Read Blocking (CORB) blocked cross-origin response」というエラーが出るようになっております。imgタグからクロスオリジンでhtmlファイルを取得したり、タグとレスポンスのcontent-typeが一致してない場合に出ます。 もともと、このChromeにCross-Origin Read Blocking (CORB)という機能を実装するという議論が、blink-devのメーリングリストに投稿されています。 「Cross-Origin Read Blocking (CORB)」 に詳しい説明があるので、CORB とはなんぞやと簡単に説明を読んで見る。 CORBはまだC
【翻訳】JSON Web Tokenライブラリの危機的な脆弱性
【翻訳】JSON Web Tokenライブラリの危機的な脆弱性 Written on Sep 14, 2015. Posted in Web Technologies 以下の内容は、JSON Web Tokenを扱うライブラリの脆弱性に関する報告内容を和訳したものです。 https://auth0.com/blog/2015/03/31/critical-vulnerabilities-in-json-web-token-libraries/ JSON Web Tokenライブラリの危機的な脆弱性 最近、いくつかのJSON Web Token実装のセキュリティについてレビューしていた間に、私は検証処理をバイパスする攻撃が可能な危機的な脆弱性を持つ多くのライブラリを発見しました。多くの実装や言語を横断して、同じ2つの欠陥が見つかりました。そして、問題が起こる場所を書き上げることが助けになると
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
