profile
viewpoint
Philip Walton philipwalton Google San Francisco, CA https://philipwalton.com

GoogleChrome/workbox 9597

📦 Workbox: JavaScript libraries for Progressive Web Apps

guess-js/guess 6493

🔮 Libraries & tools for enabling Machine Learning driven user-experiences on the web

googleanalytics/autotrack 4793

Automatic and enhanced Google Analytics tracking for common user interactions on the web.

GoogleChrome/web-vitals 2263

Essential metrics for a healthy site.

GoogleChrome/web-vitals-extension 1675

A Chrome extension to measure essential metrics for a healthy site

google/eslint-config-google 1401

ESLint shareable config for the Google JavaScript style guide

philipwalton/analyticsjs-boilerplate 1138

Examples and best practices for using analytics.js

GoogleChromeLabs/idlize 915

Helper classes and methods for implementing the idle-until-urgent pattern

patrickhulce/third-party-web 862

Data on third party entities and their impact on the web.

GoogleChromeLabs/houdini-samples 860

Demos for different Houdini APIs

issue commentw3c/page-visibility

Treating .hidden as "historical" seems unhelpful

We plan to discuss this on the next WG call. I believe that the current plan is not to revive the prerender visibility state.

marcoscaceres

comment created time in a day

startedphilipwalton/solved-by-flexbox

started time in a day

startedphilipwalton/flexbugs

started time in a day

issue openedGoogleChrome/workbox

Page loads incorrectly only with trailing `/`, loads correctly without trailing slash

Welcome! Please use this template for reporting bugs or requesting features. For questions about using Workbox, the best place to ask is Stack Overflow, tagged with [workbox]: https://stackoverflow.com/questions/ask?tags=workbox

Library Affected: workbox-build

Browser & Platform: all

Issue or Feature Request Description:

Im running into a weird behavior with workbox in an MPA. We use a combination of 11ty and rollup to build our MPA, and then use workbox-build to generate the service worker for us. We figured itd be nice to have a 404 fallback so we used the navigateFallback setting like so: https://github.com/daKmoR/rocket/blob/master/packages/cli/src/_building-rollup-fork/createMpaConfig.cjs#L15

The problem that happens, though, is that whenever I go to our MPA (both locally and the deployed version), through the following url: https://www.open-wc.org/testing, the fallback works as expected:

image

But whenever I (or a user) goes to https://www.open-wc.org/testing/ (<- note the trailing /), the following happens:

image

And frankly, I'm not sure why this is happening 😅 I'd expect the /testing/ url to still not be matched in the precache manifest, and the service worker to display the 404 correctly.

You can reproduce by following these links:

  • ✅ https://www.open-wc.org/testing
  • ❌ https://www.open-wc.org/testing/

created time in a day

startedphilipwalton/solved-by-flexbox

started time in a day

startedphilipwalton/solved-by-flexbox

started time in 2 days

PR opened w3c/longtasks

Use GitHub Actions

Also fix an ambiguous ref by adding a direct link because bikeshed says it's unable to distinguish.

+1685 -92

0 comment

8 changed files

pr created time in 2 days

pull request commentw3c/paint-timing

Use GitHub Actions

Ah - just in the README, so we don't need them in the out directory AFAIK.

npm1

comment created time in 2 days

pull request commentw3c/paint-timing

Use GitHub Actions

Hmm filmstrip is not being used in the bs file, not sure where it's meant to be used.

npm1

comment created time in 2 days

PR opened w3c/paint-timing

Use GitHub Actions

Also fix the errors since responsible browsing context has been removed.

+59 -98

0 comment

7 changed files

pr created time in 2 days

startedphilipwalton/flexbugs

started time in 2 days

issue commentWICG/layout-instability

Layout shift reported without actual visual shifting for resized fixed iframe

It took me a little bit longer to get back to this topic but here are several demos of the problem.

This demo is using an absolute iframe within a fixed container: https://codesandbox.io/s/serene-hertz-r4vzt This might look like a weird setup but it's used by several widget-based products due to layout quirks. Even today we suffer from cross-browser issues and this one aims to fix a problem on mobile Chrome as far as I remember. Unfortunately, I don't have any more info beyond that because it's layout that we are already using for some time and we had to iterate to get to it but we have not documented the process and exact problems that we have been suffering when using different layouts. The last change done to this was 100% related to mobiles browsers.

This demo is using a fixed iframe without any container: https://codesandbox.io/s/vibrant-breeze-5ohj6 Note: there is no visual difference between both of them. Yet this one doesn't have any layout shifts reported on the main page.

This is an additional demo that is somewhat offtopic to the main problem but it also related to the layout shifts. Maybe you would know if this repo is the appropriate place to report this (might not be as I don't see anything svg-related in the spec) or should we maybe report this directly to Chromium as an implementation bug. The problem here is that <svg></svg> (even an empty one!) within an iframe that gets resized is triggering layout shift reports within the iframe, even though the very same markup just with an empty <div></div> instead of the SVG doesn't suffer from the same: https://codesandbox.io/s/elegant-robinson-mvpk7

Andarist

comment created time in 2 days

startedphilipwalton/flexbugs

started time in 3 days

issue openedGoogleChrome/workbox

self.__WB_MANIFEST is replaced only on the first occurrence

Library Affected:

workbox-webpack-plugin

Browser & Platform:

Webpack 5 Workbox 6.0.0-rc.0

Issue Description:

I have this code in my service worker:

if (self.__WB_MANIFEST) {
    console.log('precached', self.__WB_MANIFEST)
    precacheController.addToCacheList(self.__WB_MANIFEST)
}

And this in the webpack config:

        new InjectManifest({
            swSrc: './src/sw/sw.js',
            include: undefined,
        }),

After building this (without minification), the output files has self.__WB_MANIFEST replaced with the manifest only on the first occurrence:

// Manifest omitted
if ([{...}]) {
    console.log('precached', self.__WB_MANIFEST)
    sw_precacheController.addToCacheList(self.__WB_MANIFEST)
}

Instead, the manifest should have been replaced in all occurrences.

created time in 3 days

startedphilipwalton/flexbugs

started time in 3 days

push eventWICG/layout-instability

npm1

commit sha 740e4dc82c1aca8dd4e66c70e8451401bedb073a

deploy: 86f1dcb4d23649e6bde1f865b80449b0ed0e14cc

view details

push time in 3 days

push eventWICG/layout-instability

Nicolás Peña Moreno

commit sha f7ad62340660d826b8dc7ca6143c880d5f53740d

Use GitHub Actions

view details

npm1

commit sha 86f1dcb4d23649e6bde1f865b80449b0ed0e14cc

Merge pull request #85 from npm1/master Use GitHub Actions

view details

push time in 3 days

PR merged WICG/layout-instability

Use GitHub Actions
+51 -95

0 comment

6 changed files

npm1

pr closed time in 3 days

PR opened WICG/layout-instability

Use GitHub Actions
+51 -95

0 comment

6 changed files

pr created time in 3 days

startedphilipwalton/flexbugs

started time in 3 days

startedphilipwalton/flexbugs

started time in 3 days

startedphilipwalton/rollup-native-modules-boilerplate

started time in 3 days

startedphilipwalton/flexbugs

started time in 3 days

startedphilipwalton/flexbugs

started time in 3 days

issue openedGoogleChrome/web-vitals

Internet Explorer 11 Support - WeakSet is undefined

Hi,

According to the README file, this library should support IE9+ without any error. I just updated to v1.0.1 and I see that you are using WeakSet which is not supported in old browsers.

https://github.com/GoogleChrome/web-vitals/blob/bebca81aa66041ffdfacb5ae65990d1acede07f9/src/lib/finalMetrics.ts

created time in 3 days

startedphilipwalton/flexbugs

started time in 3 days

issue commentGoogleChrome/web-vitals

Data Visualization - Can you provide examples/instructions?

And maybe you`ll find helpful more simple way - to visualize it. If you use gtm implementation:

Just create such variable function () { var eventValue = {{eventValue}}; if(eventValue < 2500) { return "Good LCP"; } if(eventValue > 4000) { return "Poor LCP"; } return "NI LCP"; }

And change your tag in such way: https://www.screencast.com/t/AhjBWjWK

And you`ll receive events with labels: Good, Poor, NI. So you can visualize it in data studio, or check numbers in GA

cb-eli

comment created time in 4 days

issue openedGoogleChrome/web-vitals

Value of web vitals Events in GA

Hi Colleagues!

We have implemented Core Web Vitals Tracking via GTM as recommended here https://web.dev/vitals/#measure-core-web-vitals-in-javascript So with this Library https://github.com/GoogleChrome/web-vitals

But I have some questions about the numbers we receive: CLS - in classic documentation should be like 0.1, 0.25, In GA we receiving numbers like 1694, etc. Could you help me with clarifying - 0.1 - it will be 1000, or 100? And 0.25 will be 250 or 2500? And I also wonder about FID - good Value, in this case, will be 100 and less, am I right?

I need it to properly separate events in GA - https://www.screencast.com/t/v1p00x9INkcW

Thanks in Advance!

created time in 4 days

startedphilipwalton/flexbugs

started time in 4 days

pull request commentGoogleChrome/web-vitals

Extend analytics endpoint example with `web-vitals-reporter`

Thanks, @philipwalton, for your reply. I'd be happy to hear feedback about the web-vitals-reporter from you. Have a great holiday :)

alekseykulikov

comment created time in 4 days

more