0.はじめに最近ESLintの有用性を実感している清水琢巳です。 私は、株式会社ネクストビートで「おもてなしHR」という地方創生に関わる、宿泊業界に特化した転職支援プロダクトの開発をしています。 現在おもてなしHRでは、Svelteを採用して開発しています。 その開発する中で、SvelteのESLint設定について調査をしました。 今回はその結果を共有します。 ※ 本記事はeslint-plugin-svelte［1］を参考にし、私が翻訳した内容を記載しています。そのため言い回しが異なっている場合がありますが、ご了承ください。 目次本記事の構成は以下のとおりです。 1. SvelteのESLintの導入方法 2. plugin:svelte/recommendedの設定内容 3. 個別に追加したおすすめの設定 4. 私のベスト3 5. まとめ 6. 参考文献 7. 告知 1. Svelte

Composables vs. Renderless Components in Vue 3 / Image from ToptalA couple of weeks ago, I saw an example of a renderless component in React, then I thought does this also work in Vue? In this post, I’ll share what I found about my question. Turns out, we do have renderless components in Vue. To have a better understanding of renderless components, we need to know what scoped slots are. Let’s have

Tailwind CSS does not come with ready-made components like Bootstrap. On the other hand, tailwind CSS is a utility-first CSS framework. The simple meaning is that it provides a bunch of classes and removes unused styles (classes) in the production. Tons of libraries help to provide a ready-made component for tailwind CSS. Tailwind CSS helps to increase development speed, and you do not need to wri

In 2021, we launched Thunder Client extension for VSCode which was a game changer as we were the first to launch a GUI based API client inside VSCode. Today we are launching Thunder Client CLI which will have many innovative features for API testing. Key FeaturesSimple & Easy to Use CLI toolSeamless Integration with Thunder Client ExtensionRun Requests/Collections and View Test resultsSyntax Highl

Hi guys, in this writeup I will be showing you how I was able to get a reflected XSS on a VueJS application. I found a vulnerable param named ‘?email=’ which was filtering all the tags. So I referred portswigger’s XSS cheatsheet to get hints for the payloads. The first thing you should do is check the technologies used in that application. So in my case it was an application which was based on Vue

This is part 1 of a 3-part series. Here’s part 2 and part 3. There’s a belief that the hand (pointer) cursor means clickable, but this is wrong and potentially problematic. The hand does not mean clickableIt’s no accident that browsers don’t give buttons (and other elements) a pointer cursor — it’s because they’re not meant to. See the following screenshot: Google’s search page on Chrome on Mac OS

私はソフトウェアエンジニア、宮川達彦さんが運営するポッドキャスト Rebuild.fmの大ファンです。当時の同僚に勧められて初めて聞いた2014年から今まで聞いていない回はおそらくなく、何度も繰り返し聞いた回がいくつもあります。 自身で書いたブログなどでもRebuild.fmを参照させてもらったことも多く、2021年に翔泳社さん運営のWebメディア BizZineにプロダクトマネジメントに関する記事を投稿した際にも、記事内でRebuild.fmの回に触れ、放送回のタイトルを記事タイトルに引用させていただきました。 ビジネス寄りの媒体であるBizZineにRebuild.fmへのリンクが貼られているのは私の記事だけではないかと自負しています。

TL; DRCloud Run にバッチ処理などを実行するのに便利な機能「Cloud Run jobs」が追加されました。従来の Cloud Run と違い、HTTP リクエストに依らず、任意のタイミングでコンテナ(Task)を実行可能で、より長時間の実行、 明示的な並列処理を行うことが可能です。 Cloud Run jobs とはCloud Run jobs とは Cloud Run で、バッチ処理などを行うための機能です。Cloud Run の第二世代の実行環境で動作し、「CPU を常に割り当てる」が適用されます。 従来の Cloud Run との違いは以下の通りです。 HTTP リクエストに依らない実行より長時間の実行 ( 複数の Task を組み合わせることにより 60 分以上の実行を実現 )明示的な並列処理注意: 2022 年 5 月 13 日現在、Cloud Run jobs

Atomic Design is a great methodology for both design and development that was pioneered by Brad Frost. I’ve found that the hierarchy of elements is often interpreted differently from person to person so I’ve tried to solve that with a new approach, I call it Atomic 2.0. The Atomic 2.0 approachConcern #1 with Frost’s approachFrost describes atoms as elements that cease to be functional if broken do

Since we launched Flutter, we’ve focused on delivering a cross-platform solution for beautiful, tailored apps that are compiled to machine code and take full advantage of the underlying graphics hardware of your device. Today marks a significant expansion of this vision with the first production release of support for Windows as an app target, enabling Windows developers to benefit from the same p

Webフロントエンド エンジニアの大須賀です。 Pairsのブラウザ版(以下Pairs)ではいくつかの理由のためにStorybookを使ったページ単位のVisual Regression Test(以下VRT)を導入しました。 なんとなく「すごいコスパいいんじゃないか？」と思ってやってみたらやっぱりコスパよくて満足してます。 この記事は以下の人に読んでもらえたらいいかなと思って書いています。 VRT 良さそうだけど大変なんじゃない？って思ってやってないひとなんか楽にテストのカバレッジ上がらんかな？って思ってるひとStorybookを普通に使ってるひとTesting Trophy 良さそうだけど実際にやるとどうなん？って気になってるひと内容には以下を含みます。 よかったこと・わるかったことPairsのアーキテクチャ概要の紹介VRTするところ・しないところ実際にやったこと参考実装 (in Co

この記事は「Eureka Advent Calendar 2021」の8日目の記事です。 こんにちは、Backendチームのdaisuzuです。 本記事ではPairsのバックエンドで使用していたgithub.com/go-xorm/xorm(v0)をどのようにしてxorm.io/xorm(v1)にアップグレードしたのかを紹介します。 アップグレードの目的としては主に以下の2点を考えていました。 データベースに起因する諸々のトラブルが解消するかもしれないという期待今後も開発が続いていくのにいつまでも古いバージョンを使い続けるのは不健全ここでいうデータベース起因のトラブルとは、1リクエストで複数のセッションが使われるようになっていたため、常にセッション数が多い状態になっていたことや、セッションの制御がうまく効かなかったせいか度々デッドロックやデータ不整合が発生していたことです。 これを去年の1

はじめに早速ですが、皆さんはマイクロサービスを構築するとしたら、どのような構成を考えますか？ 多くの企業で、GKE を使ったマイクロサービス アーキテクチャが採用されています。選定理由として、Kubernetes が持つ機能や大きめなリソースが必要であったり、社内インフラチームによる Kubernetes のサポートがあるといった理由などがあります。一方、定期アップグレードなどの観点から、Kubernetes の運用は少し大変…と感じる方もいるかと思います。 GKE Autopilot の利用という考えもありますが、サーバーレスでコンテナを動かせる Cloud Run を使って、インフラ管理不要でマイクロサービスを構築が出来ると嬉しくないですか？ 実際、そういった構成を採用されている企業も見かけます。 この記事では、設計や実装時に考えるであろう、以下の 5 つのポイントにフォーカスしてみた