ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
何故くそややこしいReactを勉強しないといけないのか？ - Qiita
逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。 しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT
なんでもSPAにするんじゃねぇ！という主張のその先 - console.lealog();
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。
Reactを自作しよう
この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele
なぜ default export を使うべきではないのか？
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
lint系ツールの未使用引数警告の扱いって面倒だよね | site-hhs
たわごと 経験上、数ある「有用なチェック」の中でもとりわけ繊細なんじゃないかと、やるたんびに思う。 なんでもそうだがこうした道具は「バカが使うと全てを台無しに」してしまうわけであるが、未使用引数チェックはその被害が最も簡単に露見しやすいんじゃないのかなぁと思うんだよね。 そもそも「大前提」を忘れているかもしくは単に「知らない」若者、あるいは「本当に学習しないバカ」に対して、多少なりともの説明をしないまま未使用引数のチェックを実施させれば、たぶん「まともな感性」を持ってなければ、ほとんど十中八九「引数を削除」してしまうであろう。そう、「大前提」というのは、「引数というのはインターフェイスである」ということだ。だから「未使用引数のチェック」に引っかかったコードを「削除することによって」措置することは、かなりの高確率で「アプリケーションをぶち壊す」というわけだね。 で、こうした「大原則」が、「ど
Disable form auto submit on button click
I have a HTML form where I use several buttons. The problem is that no matter which button I click, the form will get submitted even if the button is not of type "submit". e.g. Buttons like :<button>Click to do something</button>, result in form submission. It's quite painful to do an e.preventDefault() for each one of these buttons. I use jQuery and jQuery UI and the website is in HTML5. Is there
[2020年版] JavaScriptの便利な書き方まとめ | DevelopersIO
先月、Node.jsバージョン14がリリースされたこともあり、改めて最新のJavaScriptの書き方を調べてみました。その中でも特に便利だと感じたJavaScriptの書き方や普段の開発でよく利用している記法をまとめています。 アロー関数式 アロー関数式は関数を定義するための構文です。function式よりもアロー関数式の方が記述が短いので読みやすくなります。また、function式で度々問題になるthisが固定されるので混乱を避けることができます。メソッドでない関数はアロー関数式で定義するのがよいと思います。 function式 function name(arg) { return 'foo'; } アロー関数式 const name = (arg) => { return 'foo'; }; async/await async/awaitは非同期処理の構文です。また、asyncは非
![[2020年版] JavaScriptの便利な書き方まとめ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6082d053d0b1940e3a9c4d81bf031a09b51ab0c/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F04%2Fjavascript.png)
MEGA HOKI : SLOT GACOR & BANDAR TOGEL TERBAIK 2024 SITUS SLOT PULSA TANPA POTONGAN #1
Ratehoki88 situs slot online yang selalu memberikan Mega hoki dan Big hoki terbesar sepanjang masa dengan menyediakan Mesin slot gacor terbaik saat ini yang selalu menurunkan scatter hitam dan Megawin terbesar di dalam permainan pragamtic play dan Pg shoft salah satunya di game online yang sangat di incar adalah Mahjong ways 1, 2 dan 3, 88 Mega 777 juta juga menyediakan pasaran togel atau situs to
さらなる「#!」URL批判 - karasuyamatenguの日記
このブログはlifehackerを含むgawkerメディア系サイトの#!URLへの移行を批判している。 http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs/ 以下、isolaniとテングの見解をごっちゃ混ぜに紹介する。 lifehacker他のgawkerメディアサイトが数日前に長時間におよびアクセス不能になった。(厳密に言うとページ内のコンテンツアクセス不能になった) #!URLベースのサイトはJavaScriptにエラーがあるとコンテンツが一切ロードせずのっぺらぼう状態になってしまうようだ。 #!について 「#!」は何で呼ぶの？ shebangと綴られる。 Hash=# Bang=!の略 発音すると「シバン」といったところか。(ちなみにUnixの#!とは無関係) 以下「#URL」は： サイト内のロケーション情
最近流行りのWebスキミングについて調べてみた - セキュアスカイプラス
こんにちは！もう新卒エンジニアとは言えなくなった西尾です！（社会人2年目） 最近、世界的に流行っているWebスキミングについて調べていたのですが、意外と日本語の情報が少なかったので、今回はWebスキミングについて調べた内容をブログにまとめてみました。 Webスキミングとは Webスキミング（Web skimming）とは、その名の通り Web版のスキミング です。具体的には、ECサイトなどの決済画面に不正なスクリプトを埋め込み、ユーザがフォームに入力したクレジットカード情報を窃取する攻撃です。 一般的には「フォームジャッキング」とも呼ばれている攻撃ですが、個人的には「Webスキミング」の方が直感的に分かりやすいかなぁと思ってます。 Webスキミング自体は数年前から発生していたようですが、昨年イギリスの大手航空会社が大きな被害を受けたことがきっかけで有名になり、最近は世界中でスキミング被害が
Smashtest
Open Chrome Open Firefox Open Safari Navigate to STR('site.com') Click STR('Sign In') Type STR({username:}) into STR('username box') STR({username}) is STR('joe') STR({username}) is STR('bob') STR({username}) is STR('mary') Verify success STR({username}) is STR('baduser') Verify error Test Case 1 Test Case 2 Test Case 3 ----------- ----------- ----------- Open Chrome Open Firefox Open Safari Navig
Elevator Saga - the elevator programming game
Made by Magnus Wolffelt and contributors Version 1.6.5 Source code on GitHub Run tests
Jest
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Explore DOM Events
GitHub - bradtraversy/vanillawebprojects: Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries
4歳娘「パパ、懐かしいJavaScript書いてるね！」 - Qiita
GitHub - goldbergyoni/javascript-testing-best-practices: 📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)
GitHub - amejiarosario/dsa.js-data-structures-algorithms-javascript: 🥞Data Structures and Algorithms explained and implemented in JavaScript + eBook
GitHub - lerna/lerna: :dragon: Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository.
