Prettier の代替として Rome 触ってみた はじめに こんにちは、旅行 PF 部エンジニアの奥田です。 この記事では、Prettier の 10 倍速いと言われるRomeを触っていきます。 ここまで圧倒的な速度を喧伝されては気になるのは人の性…さっそく触っていきます！ Rome とは フロントエンド開発のツールチェインを 1 つに統一することを目指しているプロジェクトです。 Babel,ESLint,webpack,Prettier,Jest などのツールを置き換えることを目的にしています。 速

こんにちは、データアナリストの左海です。 今回はパケットキャプチャツールCharlesを活用してレスポンスヘッダーの Content-Security-Policy フィールドにGA4のディレクティブを追加したお話について書いていきます。 課題と背景 Universal Analyticsのサポート終了発表に伴い、弊社でも対象のサービスサイトにてGA4の導入を進めていたのですが、CSP(Contents Security Policy)関連でエラーが発生しGA4ログの疎通が確認できませんでした。 Goog

こんにちは、テリーです。前記事の続きです。ビデオ会議システムを構築する場合にもっともコストに影響を与えるのが、サーバ側のインターネット回線の通信使用料です。ユーザーとしては画質はきれいでなめらかであるほどよいことが多いで […]

はじめに はじめまして！22卒で開発エンジニアとして新卒入社したS.Kです！ この記事では、今年度マイナビのシステム職向けの研修について、具体的にどんなことを学んだのか紹介していこうと思います。 主にマイナビのシステム職の研修内容が気になっている学生の皆さんを対象として、イメージがつかめるような記事を作りたいと思いますので、ぜひ参考にしてみてください！ 全体のスケジュールと前提情報 スケジュール まず最初に、研修のスケジュールをまとめました。システム職の新人研修は、3か月間にわたります。 3か月間で、社会

こんにちは、 電通国際情報サービス (ISID) 金融ソリューション事業部の大場です。 今回は、Rustでフロントエンドの実装ができるYewというライブラリを使って Markdown エディタを作った話をします。本記事は、Yewの内部実装に触れながらYewやRustのマクロの動作について理解を深めることを目的としています。これらについて詳しく知りたい方はぜひ本記事を参考にしていただければと思います。 また、本記事で紹介するコードはこちらの リポジトリ で公開しています。 https://github.co

今回は、チーム開発などにおいて運用しやすくなる、エンジニアのための「より綺麗なCSSの書き方」を紹介します。 !important を使わない 余分な div は書かない CSS セレクタを深くしない HTML に style を直接指定しない 自分より外のコンポーネントに margin の情報を持たせない まとめ !important を使わない 例えば、以下のようなHTMLがあったとします。 < style > p { color : red !important ; } </ st

こんにちは。 インフラエンジニアをしていますknmriiです。 今回はジョブ管理ツール「Rundeck」の紹介とインストール方法、簡単な使用方法を紹介していきます。 最速でRundeckジョブのテスト実行ができるような記事構成 にしていきたいと思いますのでぜひお試し下さい。 インフラエンジニアの皆様にとって、作業自動化の助けになれば幸いです。 Rundeck Rundeckとは システム要件を確認 Rundeckをサーバにインストールしてみる 事前にJavaをインストール Rundeckインストール Ru

このブログ投稿は、 Ruby on Rails でNTLM認証を実装する必要が出たので、その対応と追加調査の記録である。 NTLMにはv1とv2が存在するが、このブログで扱うのは主にv1である。 プログラマ も歩けばNTLMにあたるとはよく言ったもので、この記事を見ているあなたもおそらくうっかりNTLM対応をすることになったITエンジニアの一人だろう。そんなあなたの一助になれば幸いである。 NTLMとは NTLM（NT LAN Manager）とは、チャレンジ/レスポンス方式を使う認証方式の1つである。前

はじめに みなさんはじめまして。BASEでエンジニアをしております田村 ( taiyou )です。 先日、BASEではショップオーナー向けのコミュニティサイト「BASE Street」にログインするための機能としてSSOログイン機能をリリースしました。 SSOログインを実現するための認証方式はいくつかあるのですが、弊社ではSAML認証方式を用いて実現しました。 そのため、この記事ではSAML認証機構のIdPとしてOSSを使わずにSAML認証機能を実装する方法を紹介します。 前回のテックブログで、このSSO

こんにちは。エンジニアの中島です。 2022年 4月からアクセシビリティ推進グループ（以下推進グループ）に在籍しています。 この組織は新設されたばかりで、まだ出来て半年の組織になります。 そのため、部署の目指すべきゴールイメージや、それを図るための指標といったものを作るところから始めることになりました。 本記事はそういったところについて共有させていただこうと思います。 立ち上げにあたっての話については以前同グループの嶌田が投稿した記事があるのでそちらをご参照ください。 www.lifull.blog 部署

こんにちは！ ラク ス入社１年目の koki _matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダ は以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabas

社内でWebアプリケーションの要件についての話がされている際のことです。 画像の拡張子について要件があったんですが、そこには基本的にWebPで、表示できないブラウザはPNGにするという旨が記載されていました。 AVIF君かわいそう、その場での私の気持ちは一つです。 そんなわけで、不思議と話に上がらないAVIFフォーマットとそれへの変換、フロントエンド周りの話をしてゆこうかと思います。 AVIF とは AVIF (AV1 Image File Format) は、 AV1ビットストリームを HEIF (Hi

こんにちは。ISID CIT事業部の熊倉です。 本記事では、 Salesforce の Summer'21アップデートで正式リリース となったExperience Cloudの新しいテンプレート 『Build Your Own (LWR) テンプレート』 について紹介したいと思います。 Experience Cloud は Salesforce が提供しているWebサイトを構築できるサービスで、カスタマーサイトやFAQサイトといった Salesforce の他サービス（主にService Cloudですね

初めに KINTOテクノロジーズでフロントエンドエンジニアをしているクリスです。普段は多国籍のメンバーが在籍しており、チーム内のコミュニケーションは雑談でも技術的な話でも主に英語で行っているグローバル開発チームに所属して、様々な国に向けて現地サービス及びその裏で利用する管理画面を開発しています。同時に複数のプロジェクトを開発する際は、いかに開発作業を効率化させることが重要になってきます。今回はフロントエンド側の視点から話したいと思います。 解決したい課題 KINTOサービスは世界中20ヵ国以上に既に展開し

要求 React の以下のようなコンポーネントがあり、 onKeyDownHandler で"文字の変換を確定したときのエンターキー押下"と"それ以外のエンターキー押下"を区別したい。 const Component = () => { const onKeyDownHandler = (e) => { if (e.key === 'Enter') { // これだと全てのエンターキー押下でこのブロックに到達する } }; retur