マガジンのカバー画像

noteエンジニアのフロントエンド マガジン

22
note社エンジニアのフロントエンドに関わる技術記事をまとめた公式マガジンです。
運営しているクリエイター

記事一覧

Next.js + SvelteによるnoteのフロントエンドApp分割

※ この記事は2021年6月21日に行われた「進化するフロントエンド2021 − 4プロダクトから学ぶS…

「誰もがつかえる」を目指したnoteのデザインシステムの導入とこれから

--- 「デザイナーのための仕組みだと思われないように、本当はデザインシステムという言葉をつ…

note / hey / ANDPADが抱えるデザインシステム導入の知見と課題 - 『デザインシステム…

サービスの成長と比例するように、プロダクトのデザインやUXの一貫性が保たれなくなっていくこ…

石をIoT化した話

戦国系フロントエンドエンジニアの iemong です。6月にnoteに入社して半年経ちました。自分は…

いえもん
7か月前

noteのNuxt.jsへの移行が完了し次世代のフロントエンド構築を進めています

本記事では、noteのフロントエンドについて2つトピックを紹介します。Nuxt.jsへの移行が完了し…

こんぴゅ
7か月前

数式機能実装の裏側

noteのカイゼンチームでエンジニアをしているKota Nonakaです。 note社には今年の8月にJoinし…

rem と vw で画面幅に対して常に可変な要素サイズを指定するCSSの書き方

フロントエンドチームとデザインチームを兼任している uto-usui です🐈 今回は rem の基準となる html 要素のフォントサイズを vw を使った calc() 関数で指定することで、レスポンシブタイポグラフィをやってみて、fluid responsive(画面幅に対して常に可変)な要素サイズ指定をやってみようという話をします。 この手法では、ビューポートが広がったり狭くなってもレイアウトバランスを保ったまま、それぞれのオブジェクトが拡縮してくれます。 実際に採

スキ
21

160個あったアクセシビリティのエラーをエンジニア全員で改善しました

noteではアクセシビリティ向上を行うために、チームを結成して日々対応に取り組んでいます。 …

note株式会社
9か月前

noteのアクセシビリティ向上プロジェクトが始動

「アクセシビリティ」と聞くと、対応が難しそうだと考え、リソースが確保できずにいる企業も多…

「noteのフロントエンドApp分割」という発表をしました

進化するフロントエンド2021 −4プロダクトから学ぶSPA/PWAの技術と実践− というフロントエン…

zochang
1年前

noteのパフォーマンス改善 - サービスの成長によるJSのファイルサイズ増加とN+1クエリ…

noteに投稿された記事数は、累計で昨年同時期比2倍以上に増加。サービスの成長とともに、いま…

エンジニアとデザイナーに聞く、外部サービス連携の舞台裏

noteは幅広いクリエイターやユーザーが集まり、さまざまなコンテンツと出会える場所を目指して…

【Nuxt.js(SSR) × Firebase Authentication】@nuxtjs/firebaseモジュールを使ったロ…

認証基盤にFirebase Authenticationを使ったNuxt.js(SSR)アプリで、@nuxtjs/firebaseモジュー…

sacckey
1年前

UIコンポーネントの自動テスト

Webフロントエンドのテストについて最近いろいろ考えていることをまとめます。 書きやすいテスト/書きにくいテスト書きやすいテストでまず思いつくのは関数の単体テストで、副作用のない純粋な関数なら引数を条件に戻り値を確認するだけ。 でも実際のアプリにはこうゆう関数はあんまりなくて大多数は副作用が多く複雑なオブジェクトの集合体です。 しかも事をもっと複雑にしているのは時間。つまりサーバーサイドと違ってフロントエンドはユーザーがブラウザでURLを入力してページが表示されてから速や

スキ
40