Chrome129 で calc-size() 関数がデフォルトで使用可能になります。 可変のボックスに対するアニメーション付与がかなり楽になる予感がするのでご紹介します。 calc-size() ってなに？ 固有サイズの設定キーワードが指す実際の数値を、計算に利用できる関数です。 固有サイズの設定キーワードの例として次のようなものがあります。

標準化されなかったzoom CSSのzoomプロパティをご存知でしょうか？ 有名（だった）なIE向けのハックとして *zoom: 1; などを記述したことがある人、または見たことがある人もいるかと思います。 zoom はIEの独自実装プロパティとして生まれいくつかのブラウザでサポートされたものの、長らく標準化されなかったことからサイトでの利用は推奨されることはありませんでした。 標準化されたzoomがNewly Availableに！ そんなzoomプロパティですが、標準化が進みBaseline 2024において「Newly Available」というステータスになりました👏 まだNewly Availableなので積極的な利用の推奨はできないものの、使い道を考えられるようになりました。 zoomに使い道がありそうな予感 CSSで要素を拡大する手段としてはtransform: scale

こんにちは、株式会社ナレッジワークの@nakajmgです。 今回はChrome 127 betaの機能紹介を見て「こんなのあったの？」となった、擬似要素に代替テキストをつける機能について紹介します。 /で区切って代替テキストが指定できる ::beforeや::afterのcontentプロパティは、/区切りで代替テキストが指定できます。

どうも、iinoです。株式会社ナレッジワークでQAエンジニアをしています。 今回は社内のLT大会で発表した内容を記事にしてみました。 社内のLT大会については、同日の登壇仲間である torii さんが、彼の発表内容をまとめた記事内で紹介してくれているので、そちらをご参照ください！ 登壇資料（Googleスライド） 社内のLT大会ということで、登壇資料には「minispec」「DesignDoc」「TestDesignDoc」などの社内用語を使用しています。本記事内では一般的な用語に置き換えるようにしていますが、興味がある方は以下もご参照いただけると嬉しいです。 ナレッジワークの開発体制 TestDesignDoc：テスト分析・テスト設計に関する新たな試み はじめに 今回取り扱う内容は『分かりやすい、読みやすい文章の書き方』・・・ではありません！ 私が普段、設計ドキュメントのレビューやテスト

自己紹介 入社以来 4 年勤務していたラクスル株式会社を 2024 年 1 月末に退職し、3 月から株式会社ナレッジワークでソフトウェアエンジニアとして勤務しています。 ラクスル株式会社では、ネット印刷事業のバックエンドエンジニアとして、印刷発注基盤システムのリプレイスや、エンタープライズ向け EC/SaaS の開発に携わり、Web サービス開発経験の乏しい状態から多くの経験を積むことができました。在籍中に関わった全ての方々に感謝しています。引き続きよろしくお願いいたします。 この記事では、入社 3 ヶ月目を迎えた筆者の視点からのナレッジワークのご紹介と、入社の決め手、入社後の印象について書きたいと思います。 ナレッジワークとは セールスイネーブルメントクラウド「ナレッジワーク」の開発を行っている企業です。現在はセールスメンバー向けの資料共有・商談準備ツールとして、エンタープライズ企業を中

こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます！ きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 （素晴らしい記事をありがとうございます！） これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは？」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動

ども。コヤマンです。2024年1月より株式会社ナレッジワークでQAエンジニアをしています。 本記事ではjoinしてすぐ作ったバグ傾向Dashboardを使って社内イベントをしたお話を紹介します。 ※2024年4月23日に開催するEncraftという弊社のイベントでこのあたりのお話をします。 ナレッジワークの開発文化 品質へのこだわりが非常に高く、CTO自らが全社ミーティングで「品質が高いことはバフなんです。」と言い切るほど熱意を持っており、実際開発（Team Topologiesでいうところのストリームアラインドチームの各チーム）に1名以上のQAエンジニアを配置、さらにプラットフォームチームにも1名アサインをするほど、品質について高い意識を持っています。 そして私がjoinする前まで「バグ分析会」という名目でインシデントやバグの分析をする会が開催されておりました。 バグ分析会のリニュー

みなさんお久しぶりです！ 株式会社ナレッジワークのソフトウェアエンジニアのはぎはらです！ 本記事では2024年3月28日に開催した勉強会 Encraft #12 Frontend Quiz Night の開催レポートをお届けいたします。 Encraftとは？ Encraft（エンクラフト）は株式会社ナレッジワークが提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 過去のイベントの開催レポートは以下からご覧ください。 Encraft #1「フロントエンド × 設計」開催レポート Encraft #2「サーバーとクラインアントを結ぶ技術」開催レポート Encraft #3「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」開催

公式ドキュメントに書いてあり、Firebaseからもメールなどで通知されていることではあるのですが、意外と見落としたままになっているかもしれない情報なので、啓蒙の意味も込めて記事にします。 結論 Firebase AuthのJavaScript SDKを使っている場合、今年6月までに以下のドキュメントに従った対応をしないとChrome/Edgeでリダイレクトログインが動かなくなります。 サードパーティのストレージ アクセスをブロックするブラウザで signInWithRedirect を使用する場合のベスト プラクティス 必要な対応 公式ドキュメントにある対応選択肢を、補足や注意点も含めた形で以下に焼き直してみます。 ポップアップ形式のログインでもいい場合 同一タブ内でリダイレクトしてログインする形式から、ポップアップウインドウを開いてログインする形式に切り替えましょう。 （公式ドキュメン

はじめに 本記事では実践的な Cloud Run のデプロイパイプライン実装を通して Cloud Deploy の理解を試みます。Cloud Deploy は元々 Kubernetes 用のプロダクトとしてリリースされたこともあり、Cloud Run に限って利用するには学習コストが高すぎるところもあります。本記事では Cloud Run のデプロイの本番環境構築・運用に必要な部分のみをピックアップして次のようなことを説明します。 Cloud Deploy の仕組み Cloud Deploy を使ったデプロイパイプラインの設計・実装方法 Service Account、IAM 設計 おすすめの Infra as Code の方法 おすすめの skaffold.yaml の書き方 Automation、デプロイフック、カナリアデプロイなどの高度なパイプライン、監視などは上記のような基本をおさ

はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の

どうも、株式会社ナレッジワークのざわきんといいます。 最近よく mermaid というテキストベースの図作成ツールを使っていて、ChatGPTやGitHub CopilotのようなLLMを活用したツールとめちゃくちゃ親和性が高いなと思い、居ても立っても居られないので記事にしました。 TL;DR LLM(Large Language Model)の普及により、テキストベースの図作成ツール（例：mermaid）はますます普及していくと思うので、ガンガン使っていこうぜ！という記事です。 はじめに 言葉によるコミュニケーションの難しさ 突然ですが、言葉によるコミュニケーションって難しいですよね。 頭の中にある構造を言葉だけで相手に正確に伝えることって、なかなか難しいです。 例えば、インフラ構成を説明する場合 例えば、インフラ構成を他の人に説明する場合を考えてみましょう。 ChatGPT に出力して

3月〜11月の期間で、月に1度の開催ペースで開催してきました。 毎回社外からゲスト登壇者の方々をお招きしており、どの回もとても好評でした！ご登壇いただいた皆様、本当にありがとうございました。 立ち上げ経緯 2月頃に、社内のHRメンバーから「エンジニア向けの勉強会イベントをやりたい」という相談がありました。 HR側では（エンジニアの勉強会文化への馴染みがなかったこともあり）単発の小規模座談会的なイメージをしていたようですが、コロナ禍前からのエンジニア勉強会スタイルが完全に脳内インストールされていた私は、その一言で完全に立ち上げ自動運転モードに入ってしまいました。 元々その前から、勉強会文化がコロナ禍で一度失われてしまったことを寂しく感じていました。 そろそろまたそういう場の機会が欲しいな…と別の場で社外のWebの先輩と話していたところ「今度はyoshikoが作る側になるんだよ」と言われ、確か

はじめに 株式会社ナレッジワーク Enablement Groupの上田（@tenntenn）です。 ナレッジワークでは、2023年3月から社外向けにソフトウェアエンジニアや学生向けイベントをはじめ、2023年12月までに25回のイベントを開催しました。また、多くの方に参加頂き、connpassグループの登録者は2200名を超えました。 その中でもEncraftシリーズは、「できる喜びが巡る日々を届ける」というミッションのとおり、技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を提供すべく開催しています。Encraftは”Enablement”（ひとりひとりの成果・能力の向上）とナレッジワーク社員が取るべきスタイルの1つである”Craftmanship”（こだわりを持って）を合わせた造語となっています。 Encraftは月に1回のペースで3月から11月まで、

こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層（ページなど）になるとたちまち ESM 互換性の問題を

本記事は Platform Engineering Advent Calendar 2023 の 25 日目の記事です。 はじめに 本記事ではナレッジワークというスタートアップの Platform Engineering について簡単に紹介します。まだまだこれから始めるという段階であり Platform Engineering が必要な背景と何をしようとしているかをお伝えします。 ナレッジワークとは ナレッジワークは「できる喜びが巡る日々を届ける」をミッションに掲げてセールスイネーブルメントの SaaS を提供するスタートアップです。2023 年の 11 月にシリーズBで45億円の資金調達を実施して今後 3 年で 10 個の新プロダクトの開発・提供を予定しています。 Platform Group 筆者はナレッジワークの Platform Group というチームで Software Eng

Google Cloud のログ管理サービスである Cloud Logging は JSON で出力されたログを構造化ログとして認識します。その際に特別な JSON フィールドを使うとログに特別な属性を与える事ができます。本記事ではそれらの特別な JSON フィールドを用途ごとにまとめて紹介します。 本記事の技術的な内容はほぼすべてこのドキュメント 1 ページに書いてありますが、「実際に UI でどう表示されるのか」と「その特別な JSON フィールドにどんな価値があるのか」はドキュメントにないので参考にしていただけると思います。 Cloud Logging へのログ書き込み Cloud Logging へログを書き込むには大きく 2 つの方法があります。API で LogEntry を直接書き込むか、それ以外かです。 API で直接書き込む方法の場合、メジャーな言語であれば各言語のライブ

株式会社ナレッジワーク ソフトウェアエンジニアのmichioです。 本記事では、2023年07月28日に開催したオフライン勉強会Encraft #5「Go1.21+ 最前線」の開催レポートをお届けいたします！ Encraftとは？ Encraft（エンクラフト）は株式会社ナレッジワークが提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 過去のイベントの開催レポートは以下からご覧ください。 Encraft #1「フロントエンド × 設計」開催レポート Encraft #2「サーバーとクラインアントを結ぶ技術」開催レポート Encraft #3「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」開催レポート Encraft #

こんにちは、よしこです。 今回は、参加者が800人を超え大盛況となった Encraft #4 「React/Next.js 最前線」 の開催レポートをお届けします！ Encraftとは？ Encraft（エンクラフト）は 株式会社ナレッジワーク が提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 過去のイベントの開催レポートは以下からご覧ください。 Encraft #1 「フロントエンド × 設計」 開催レポート Encraft #2 「サーバーとクラインアントを結ぶ技術」 開催レポート Encraft #3 「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」 開催レポート それではさっそく今回のセッション資料と動画アー

今回で3回目の開催となった「Encraft #3」の開催レポートをお届けします！ Encraftとは？ Encraft（エンクラフト）は株式会社ナレッジワークが提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 過去のイベントの開催レポートは以下からご覧ください。 Encraft #1「フロントエンド × 設計」開催レポート Encraft #2「サーバーとクラインアントを結ぶ技術」開催レポート 今回もオフラインで参加することが難しい方などに向けて、YouTubeでのLive配信も行いました。 また、セッションの感想をハッシュタグ #encraft でつぶやいていただけると嬉しいです。 パネルディスカッション 「エンジニアイネーブルメン