YJTC18 B-4 Yahoo! JAPANトップページのコーディング

184 Views

January 29, 18

スライド概要

Yahoo! JAPAN Tech Conference 2018 B-4 セッションのスライドです。

Yahoo!デベロッパーネットワーク

@ydnjp

スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 194.1K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 92.3K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 82.9K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 65.6K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 43.5K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 33.7K

各ページのテキスト

自己紹介橋本龍一スタートページ事業本部デザイナー第7代黒帯テクニカルデザイン (Html/CSS) • Yahoo! toto • Yahoo! JAPAN ID • Yahoo!ウォレット • Yahoo!みんなの政治 • Yahoo!きっず • Yahoo! JAPAN トップページ Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

今日のゴールトップページの裏側を知る

デザイナー視点でのコーディング

デザイナーエンジニア HTML CSS JavaScript JavaScript PHP,Java etc

トップページとは？ホームページに設定する Yahoo BB きっず版アプリ版トラベルヤフオク! ショッピング YAHOO! JAPAN プレミアムカードメールカテゴリー一覧サイトの登録無料ID活用ウェブ画像動画辞書知恵袋地図リアルタイム一覧検索奈良への旅がおトク、宿泊料金が最大50%オフサプリメントや健康食品のセールを開催中首都圏のレストランがネットで予約可能主なサービスショッピングヤフオク! LOHACO 旅行、ホテル予約一休.com 一休.comレストランニュース天気スポーツナビファイナンステレビ GYAO! ゲーム Yahoo!モバゲーニュース経済エンタメスポーツ 9時49分更新敷金やツケ民法どう変わる? NEW 野良猫に餌やり禁止賛否続々 NEW トルコ最大級の地下都市発見 NEW 昏既月食夜桜と競演珍しく奇装に選手も驚き日本代表ママタレ割れる子供の顔出し運転見合わせの路線、再開へ優先席付近電源オフは必要かもっと見るトピックス一覧話題なう新スイーツが猫密度国で違い? 今、話題の「男前インテリア」 Yahoo! JAPANアプリタブレット版 iPad / Android 無料明日の雨をお知らせアプリはこちらログイン IDでもっと便利に [新規取得] ログイン履歴登録情報メールアドレス取得ポイント確認カード新規入会

10.

トップページとは？ YAHOO! JAPAN キーワードを入力検索 2 メール 24/18 100% 港区路線ショッピング 82点魚座ヤフオク! ファイナンススポーツナビ GYAO! すべてすべてニュース話題芸能スポーツ敷金やツケ民法どう変わる? NEW 9/28(月) 7:23 野良猫に餌やり禁止賛否続々 NEW 9/28(月) 6:55

11.

12.

13.

14.

ベースが作られた時期 10年前ホームページに設定する Yahoo BB きっず版アプリ版トラベルヤフオク! ショッピング YAHOO! JAPAN プレミアムカードメールカテゴリー一覧サイトの登録無料ID活用ウェブ画像動画辞書知恵袋地図リアルタイム一覧検索奈良への旅がおトク、宿泊料金が最大50%オフサプリメントや健康食品のセールを開催中首都圏のレストランがネットで予約可能主なサービスショッピングヤフオク! LOHACO 旅行、ホテル予約一休.com ニュース経済エンタメスポーツ 9時49分更新敷金やツケ民法どう変わる? NEW 野良猫に餌やり禁止賛否続々 NEW トルコ最大級の地下都市発見 NEW 昏既月食夜桜と競演珍しく奇装に選手も驚き日本代表ママタレ割れる子供の顔出し運転見合わせの路線、再開へ優先席付近電源オフは必要かもっと見るトピックス一覧 Yahoo! JAPANアプリタブレット版 iPad / Android 無料明日の雨をお知らせアプリはこちら

15.

ベースが作られた時期 3年前 YAHOO! JAPAN キーワードを入力検索 2 メール 24/18 100% 港区路線ショッピング 82点魚座ヤフオク! ファイナンススポーツナビ GYAO! すべてすべてニュース話題芸能スポーツ

16.

17.

18.

19.

20.

21.

22.

yarn

23.

高速

24.

Gulp

25.

軽い

26.

• gulp-autoprefixer • gulp-base64 • gulp-consolidate • gulp-csscomb • gulp-csslint • gulp-csso • gulp-download • gulp-eslint • gulp-filter • gulp-flatten • gulp-foreach • gulp-iconfont • gulp-load-plugins • gulp-mocha • gulp-plumber • gulp-postcss • gulp-rename • gulp-replace • gulp-rsync • gulp-sass • gulp-scss-lint • gulp-shell • gulp-sketch • gulp-uglify • gulp-util • gulp-yaml

27.

webpack

28.

JSをまとめる

29.

BABEL

30.

モダンなJavaScript

31.

stylelint ESLint HTMLHint

32.

stylelint config standard "color-hex-case": "lower" "color-hex-length": "long" "number-leading-zero": "never" "block-no-empty": true "length-zero-no-unit": true "string-quotes": "single" "declaration-colon-newline-after": "always-multi-line" "declaration-no-important": true "indentation": [2, { "indentInsideParens": ["once-at-root-twice-in-block"], }] "order/declaration-block-properties-specified-order": [ ]

33.

PostCSS

34.

様々なプラグインでカスタマイズ

35.

• autoprefixer • postcss-cssnext • postcss-sprites • postcss-cssstats • postcss-reporter • postcss-size • postcss-each • cssnano • stylelint • postcss-nested • postcss-comment • postcss-simple-vars • postcss-mixins • postcss-conditionals • postcss-at-rules-variables • postcss-extend • postcss-simple-extend • postcss-at-warn • postcss-scss • postcss-strip-inline- comments • postcss-discard-comments

36.

トップページの裏側の技術を見てどう思いましたか？

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

今日のゴールトップページの裏側を知る

54.

55.