プロダクトエンジニアリング部のえびさわです。 この一年でLIFULL HOME’Sのメイン開発サーバーのフロントエンド環境が大きく刷新されました。 以前は使えなかったSassも導入され、モリモリとDXが向上しております😭 今回はマークアップにフォーカスし、刷新前に感じていた課題とSass導入後に行なった改善策をご紹介します。 課題 カラーコードのtypo, 種類が多い LIFULL HOME’S にはデザインガイドラインが存在し、使う色はある程度パターン化されています。 代表的なもので言うと弊社のコーポレ

Hi, I'm Jye Ruey . A SET(Software Engineer in Test) from LIFULL. We published an End-to-End testing framework "Bucky" at last time. www.lifull.blog In this time, an image difference detection tool "Gazo-san", which is for visual testing, is also published

こんにちは、ECプラットフォーム部の鶴見、竹中です。普段はZOZOTOWNのリプレイスに関わるID基盤とAPI Gatewayの開発を行っています。 本記事では、API Gatewayの開発で取り入れているJSON Schemaを使ったドキュメントの自動生成および、スキーマの自動検証を紹介します。 API Gateway設定ファイルの運用改善 弊社で開発しているAPI Gatewayは、APIへのリクエストのルーティングやリトライなど様々な機能の制御を設定ファイルで行っています。 バックエンドチームはアプ

こんにちは！スマートキャンプで インサイドセールスに特化した SaaS を作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内の template タグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際に template タグに ESLint を効かせてみて発覚したエラーや警告のなかで数が多かったものや、これから Vue 3 に移行していく上で対応する必要があったルール

ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。 Vue.js で、input タグの ::placeholder 疑似要素に動的なスタイルを当てたい場面がありました。 この記事では、その際の問題と解決方法について紹介します。 この記事のゴール Vue.js では HTML クラスのバインディング や インラインスタイルのバインディング を用いて、動的にクラスやインラインスタイルを割り当てることで CSS を動的に変更ができます。 例えば、 <input :style

クラシルを開発してるAndroidエンジニアの MeilCli です。前回の クラシルAndroidプロジェクトの開発者体験の向上を頑張ってます！ を投稿してから進捗があったので報告します 前回予告した内容は以下の感じでですが、設定した目標通りに行動できないのがエンジニアです。ご了承ください 長年放置し続けてきたlintの対応、不要になったリソースの削除 使用しているOSSなどのライセンス表記のための集計ツールを MeilCli/Librarian に置き換える ライブラリーアップデートの自動検出・通知

メンテナンスのため、一時的にWebサーバへのアクセスを止める必要が発生しました。 その時間帯は、いわゆる「メンテナンスページ」「Sorryページ」を表示させる必要があります。 ふと、 HTMLとかCSSで多少はデザインされたページを返したい と思いました。 今回はEC2インスタンスのフロントにあるALB単体での実現を試みました。 設定 ALBの固定レスポンス機能 を利用します。 リスナーにルールの追加 リスナーのルールに対して設定を追加します。 HTTPとHTTPSがある場合は、それぞれにルールを追加する

技術課の水垣です。こんにちは。 今日はちょっと盲点だった構成について書こうと思います。 通常であれば、S3に格納した静的ページのHTTPS化やカスタムドメイン対応をするには AWS CloudFront を利用するかと思います。ググれば方法はいくらでも出てきますし、定番ですよね。 これを CloudFrontをを利用せずに実現してみようと思います。ただし、静的サイトホスティングではなく、あくまでHTMLを出力する方法です。 なんで、こんなことをやったのか 構成図 S3バケット IAM Role API G

こんにちは。SRE部BtoBチームの竹田です。本記事では、クラウドインフラ環境のセキュリティ対策を講じようと思いつつも何から着手すれば良いのか分からないという方向けに、マルチクラウドに対応したオープンソースのセキュリティ監査ツールであるScout Suiteを紹介します。 Scout Suiteとは Scout Suiteはマルチクラウドに対応したオープンソースのセキュリティ監査ツールです。各クラウドプロバイダーから公開されているAPIを利用してクラウドの設定情報を収集し、リスクとなる項目をHTML形式の

こんにちは。LIFULLでエンジニアをしている中村優太です。 2020年4月に新卒で入社して、早くも4ヶ月、配属されて2ヶ月が経過致しました。 この記事では、配属までのLIFULL新卒エンジニア研修についてご紹介したいと思います。 はじめに 研修スケジュール プログラミングの基礎 個人開発演習 その他トピック 最後に はじめに LIFULLのエンジニアは2ヶ月間の新卒研修があります。 最初の2週間は全職種合同で会社のビジョンの理解や社会人の心構え、ビジネス基礎を学び、残りの1.5ヶ月間はエンジニア研修にな

技術開発部の相馬です。好きな UI フレームワークは Svelte です。 私が現在所属しているグループでは、弊社のメイン事業である LIFULL HOME'S における開発効率の改善などを行っています。 今回は、LIFULL HOME'S の Web フロントエンド（以降はフロントエンドと表記します）開発環境を、Node.js の資産を用いて近代化した話（以降は近代化と表記します）をご紹介したいと思います。 目次 はじめに 近代化として取り組んだ内容 Sass の導入 Rollup の導入 Babel

こんにちは。メドレーにてジョブメドレー開発エンジニアをしています、矢野と申します。 ジョブメドレーでは、主にバックエンド ( Ruby on Rails ) の改修を担当してます 直近では 「サイトパフォーマンス改善施策」 として、Rails コードのリファクタリングによる TTFB 高速化に取り組んでました 「もう絶対にコケないのが分かってる」ビルドやテストを、手元のコンソールで何度も叩いて「わー。ちゃんと通る！」っていう時間が好きです 今回は、上記の「サイトパフォーマンス改善施策」の文脈で調査した、P

こんにちは。メドレーにてジョブメドレー開発エンジニアをしています、矢野と申します。 ジョブメドレーでは、主にバックエンド ( Ruby on Rails ) の改修を担当してます 直近では 「サイトパフォーマンス改善施策」 として、Rails コードのリファクタリングによる TTFB 高速化に取り組んでました 「もう絶対にコケないのが分かってる」ビルドやテストを、手元のコンソールで何度も叩いて「わー。ちゃんと通る！」っていう時間が好きです 今回は、上記の「サイトパフォーマンス改善施策」の文脈で調査した、P

こんにちは。メドレーにてジョブメドレー開発エンジニアをしています、矢野と申します。 ジョブメドレーでは、主にバックエンド ( Ruby on Rails ) の改修を担当してます 直近では 「サイトパフォーマンス改善施策」 として、Rails コードのリファクタリングによる TTFB 高速化に取り組んでました 「もう絶対にコケないのが分かってる」ビルドやテストを、手元のコンソールで何度も叩いて「わー。ちゃんと通る！」っていう時間が好きです 今回は、上記の「サイトパフォーマンス改善施策」の文脈で調査した、P

こんにちは。メドレーにてジョブメドレー開発エンジニアをしています、矢野と申します。 ジョブメドレーでは、主にバックエンド ( Ruby on Rails ) の改修を担当してます 直近では 「サイトパフォーマンス改善施策」 として、Rails コードのリファクタリングによる TTFB 高速化に取り組んでました 「もう絶対にコケないのが分かってる」ビルドやテストを、手元のコンソールで何度も叩いて「わー。ちゃんと通る！」っていう時間が好きです 今回は、上記の「サイトパフォーマンス改善施策」の文脈で調査した、P