LIVESENSE ENGINEER BLOG

リブセンスエンジニアの活動や注目していることを発信しています

フロントエンド

口コミ投稿のハイライト機能をDraft.jsから自前実装に置き換えました

転職会議事業部エンジニアの佐藤です。 転職会議の口コミ投稿にはガイドラインがあり、ガイドラインに違反する内容が含まれた口コミを投稿しようとすると、該当する内容がハイライト表示されます。 例えばこのような内容で投稿しようとすると、 ガイドライン…

【転職ドラフト】Rails 6.1 + esbuild なアプリケーションに PostCSS を使って TailwindCSS を導入する話

こんにちは。転職ドラフトでエンジニアをしている @verdy_266 です。 転職ドラフトでは、デザインシステムを導入するために、 Bootstrap から TailwindCSS への移行を進めようとしています。その際、思った以上にネットの情報が少なく苦戦した点があったので…

DatadogのE2EテストでA/B テストする際の便利な設定と実装例

転職会議でWebエンジニアをしております @ishitan-liv です。 転職会議では、昨年末の記事にも紹介したようにDatadogを活用したE2Eテストに取り組んでいます。 今回は実践編として、具体的な実例を元にA/Bテストの実施方法などについて書きます。 参考までに…

転職会議のフロントエンドパフォーマンス改善〜React/Next.jsでWeb Vitals健全化、スコア2.5倍改善を達成した手法の全て

転職会議フロントエンドのWeb Vitals健全化、スコア2.5倍改善を達成した手法について解説します。

最速の生年月日入力フォームを求めて

こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。 転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。 agent.job-draft.jp そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の…

複数リポジトリ間におけるeslint・prettierの設定共通化

転職会議事業部の srkw です。 今期事業部内で利用する eslint および prettier の共通ルールを管理するパッケージを作成したので、その工程と成果物をご紹介したいと思います。 なお、今回紹介するパッケージの内容には多分に要修正箇所があり、今後他のプ…

ISR化でIESHILの建物詳細ページの読み込み速度を10倍に改善した話

初めに こんにちは、IESHILでエンジニアをしているgccjです。 IESHILはマンション査定価格がいますぐわかるサービスです。 2021年4月6日にその中でも一番アクセスされている建物詳細ページをISR(Incremental Static Regeneration)化しました。 それについ…

日本語の折り返しをJavaScriptで制御する

リブセンスにQ by Livesenseという広報ブログが誕生しました。このブログは明朝体と縦書きと長文にアイデンティティがあり、書籍のような日本語らしさが求められるデザインとなっています。 本記事は、日本語を綺麗に見せるべく実装した「分節区切りでの折り…

転生会議を支える技術「フロント・サーバー編」〜使ってみたいをふんだんに盛り込んでみた〜

転職会議では、2年ぶりとなるエイプリルフール企画を実施しています。 今年のテーマは「転生」、その名も転生会議です! 今回はフロント編です。

入社後、いきなりのサイトリニューアル

はじめに みなさん、こんにちは。 アルバイト事業部で「マッハバイト」のフロントエンドエンジニアをやっています、山田と申します。 私は7月の頭に入社したばかりなのですが、入社後最初のミッションがサイトリニューアルでした。 今回はその話に触れていき…

CSSは簡単だなんて誰が言った

はじめまして!正社員転職サービス転職ナビ(旧ジョブセンスリンク)のフロントエンドを担当しているsueshinです。 CSSはプログラミング経験の浅い方でも扱いやすく、比較的習得が早い言語だと言われることが多いと感じている次第です。 もちろん、それはCSSの…

就活会議トップページをリニューアルしたときのCSS設計のお話

16卒で入社したエンジニアの田口です。 就活会議というメディアで、主にフロントエンド開発を担当しています。5月にトップページをフルリニューアルしましたので、その時のCSS設計についてお話しいたします。 就活会議のフロントエンド開発では、FLOCSSを採…

転職会議の会員情報ページをReact化しました

リブセンスの'16新卒入社が送る記事第2弾。今回は、「転職会議」でのReact化において直面した問題。その解決のために採用・参考にした技術について紹介いたします!

ReduxにおけるGlobal stateとLocal stateの共存

初めまして!エンジニアの米山と申します。 転職会議ではフロントエンド開発にReact.jsとReduxを利用しています。 今回はReact, Redux開発における__Global state__と__Local state__という考え方について、軽く紹介させていただきます。

ジョブセンスに桜を咲かせてみた

4月の頭、ジョブセンスではエイプリルフールネタは行わなかったのですが、 時間をかけずに面白いことをやってみよう、 遊び心をもってなにかやってみようということで、 トップページ(PC)に桜を降らせてみました。