The frontend, backend, and content source code for web.dev

  • By null
  • Last update: Jan 8, 2023
  • Comments: 17

web.dev

Continuous integration

web.dev is the ultimate resource for developers of all backgrounds to learn, create, and solve on the web. It's meant to not only educate developers, but help them apply what they've learned to any site they work on, be it personal or business.

Found a bug? 👷‍♀️

Thanks for letting us know! Please file an issue and a team member should reply shortly.

Authoring content ✍️

Before you start writing take a moment to look over the web.dev handbook and familiarize yourself with the process. When you're ready, follow the steps in the Quickstart to create your content proposal.

Building the site 🏗

You'll need a recent version of Node: v14 (LTS) or higher. To check your node version run node -v in your terminal.

If you don't have node, or if you need to upgrade, we recommend using the Node Version Manager (nvm).

Clone the repo

git clone https://github.com/GoogleChrome/web.dev.git

Change directory into the folder created

cd web.dev

Install dependencies

npm ci

Start a local server to preview the site

npm run dev

Open http://localhost:8080/ to see the site locally. Changes to assets will rebuild the site. Refresh to see your changes.

Set up build flags

Building the entire site can take a while because it's around one thousand pages. If you want to massively speed up your build times, we suggest setting some build flags to ignore certain sections.

  • Create a .env file at the root of your project
  • Add the following:
# Ignore ALL site content
ELEVENTY_IGNORE=true

# Only build the directories you're working on.
# Note, this is a JSON string so you must use double quotes.
ELEVENTY_INCLUDE=["blog", "vitals"]

Environments 🌳

Set ELEVENTY_ENV=prod to force production builds. This is the default when running "stage" or "deploy". No other options for ELEVENTY_ENV are supported, although our Eleventy site config will default to 'dev' if unspecified.

Staging 🕺

When you send in a pull request it will be automatically staged for you. Keep an eye out for the netlify bot to comment on the pull request with your unique URL.

Deploying the site 🚀

Automatic deploys

The site will build and deploy the main branch automatically every hour, Mon-Fri. If you've just merged an article then it should go live at the top of the next hour.

Manual deploys

To manually deploy the site you'll need to be a member of one of these Google teams:

  • web.dev-eng
  • web.dev-owners
  1. Navigate to the Cloud Build Triggers page.
  2. Click the RUN button for the trigger named Deploy.
  3. In the side drawer that opens up, click the RUN TRIGGER button for the trigger for the main branch.

NOTE: web.dev auto deploys every hour if there is a new commit in the main branch. Manual deploys should only occur when a build fails or if auto deploys are disabled.

Debugging 🐛

If you need to debug the site's build process:

  1. Add a debugger statement to .eleventy.js
  2. Run npm run debug:eleventy
  3. Go to about://inspect to attach to the running process.

The Chrome inspect page showing the inspect button

Github

https://github.com/GoogleChrome/web.dev

Comments(17)

  • 1

    Update variable fonts article

    This is an update to Introduction to variable fonts on the web by @davelab6 and @roeln. Dave and I paired on this, and I added some animations afterwards, and now submitting this PR.

    This PR needs one more revision by @davelab6 to address the last TODOs.

    Changes proposed in this pull request:

    • General updates and rewrites
    • Updated @font-face code examples
    • Updated examples to modern GF fonts
    • Updated fallbacks and browser support
    • Add CSS custom properties workaround for font-variation-settings
    • Images and movies have been optimised

    TODO:

    • [ ] TODOs (see "TODO" and "RN" comments in document)
    • [x] Add animation for Amstelvar "Finesse" example
      • [ ] Check text explaining Amstelvar "Finesse" example, not sure my placeholder covers everything
    • [ ] Move image/movie media to https://storage.googleapis.com/web-dev-assets/variable-fonts
  • 2

    Podcast lander page

    web.dev/podcasts

    Screenshot

    localhost_8080_podcasts_ (1)

    todo list:

    • [x] show list needs verified (did i miss any?)
    • [ ] content needs verified by show owners
    • [x] images should probably not be remotely owned
    • [x] overall copy needs looked at
    • [x] new data source could be added to 11ty (shows|podcasts), then looped over in the template (v2?)
    • [x] unique/custom art made for the page (v2?)
    • [x] consider not using <a> around the whole card so that talent names can link to profiles, other shows, etc
    • [x] analytics tracking of links clicked and page visits (is this a todo? or free?)
  • 3

    Adds native lazy loading blog post

    Fixes #1059, #1120

    This PR adds the lazy loading post to /blog

    Need to include (and can do so later once they land):

    • console.log for initial image that let's developer know that lazy loading is happening
    • images that are generated via JS
    • Reporting API/Resource Timing to track

    NOTE: Plan is to hold off merging this article until things are settled with regards to which release the spec-revised version of lazyload ends up landing (76 or 77).

  • 4

    content: How to request new browser features [title tbd.]

    Author: @tomayac Reviewer: @kaycebasques

    Target publish date: any

    • [ ] Check this box if this is a hard deadline.

    • [X] Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

    Quick summary: Web developers are asking how they can make their voice heard and request a feature to be implemented by the different browser vendors. This article will be an attempt at documenting the best way for each vendor to make this happen.

    Process

    Check out the web.dev writing process.

    When you're ready, make a copy of this template and fill in the proposal and outline sections. When you're finished, drop a link to the doc in the 1st step below and check the box. A member of the web.dev team will assign this ticket to themselves and work as your reviewer to help you complete the remaining steps.

    • [ ] 1. I've done my proposal
    • [ ] 2. Proposal approved — reviewer checks this
    • [ ] 3. I've added a draft to my proposal doc
    • [ ] 4. Draft approved — reviewer checks this
    • [ ] 5. I've submitted a pull request #
    • [ ] 6. Pull request approved — reviewer checks this
  • 5

    Why is 'initial response time was short' an issue?

    I'm trying to figure out what the message "initial server response time was short" means. To me, this sounds like undeniably a good thing, but then why does it show up a as performance issue? The issue links to Reduce server response times (TTFB).

    Does this mean that there is a lot of latency when establishing the connecting to the server? If so, I think the wording should be "initial server response time was slow" or "initial server response time was long".

    I've looked at the discussion in the pull request, but I am still confused.

  • 6

    content: Preloading responsive images

    Author: @yoavweiss Reviewer: @mihajlija

    Proposed article

    A one to two sentence description of your post This post will explain the recently shipped responsive image preload feature, how to use it and its benefits.

    Target publish date: 8/14/2019

    • [ ] Check this box if this is a hard deadline.

    Process Make a copy of this template and fill in the proposal and outline sections. When you're finished, drop a link to the doc in the 1st step below and check the box. A member of the web.dev team will assign this ticket to themselves and work as your reviewer to help you complete the remaining steps.

    • [x] 1. I've done my proposal
    • [x] 2. Proposal approved — reviewer checks this
    • [x] 3. I've added a draft to my proposal doc
    • [x] 4. Draft approved — reviewer checks this
    • [x] 5. I've submitted a pull request #1555
    • [ ] 6. Pull request approved — reviewer checks this
  • 7

    "Building multiple Progressive Web Apps on the same domain" article.

    Fixes #5164

    @jpmedley article is ready for review. We are still waiting for the assets of the other two authors before merging.

    cc // @petele @kaycebasques

  • 8

    Move async article from WebFu.

    Fixes #4437

    Changes proposed in this pull request:

    • Converts "Async functions: making promises friendly" from WebFu
    • Adds reciprocal links between this and "JavaScript Promises: An introduction"
  • 9

    📦 NEW: Codelab Cloudinary URL API

    Fixes #1065

    This PR adds a new codelab: Optimize images and serve next-gen formats using Cloudinary

    After discussion with @khempenius and @traderd65 after Google I/O. I went ahead and created this new Codelab to demonstrate how the cloud can help developers avoid a build step and optimize their media both in terms of

    1. Serving images in next-gen formats, e.g., WebP and JPEG-XR.
    2. Serving Efficiently encoded images with optimized size/quality.

    All of that on the basis of a simple URL API.

    Things I have done while creating this codelab:

    • [x] Studied the source code of other codelabs
    • [x] Read the entire Wiki guide for Web.dev
    • [x] Created the Glitch embed in line with the guidelines
    • [x] Kept the codelab formatting similar to other codelabs
    • [x] Used the component sandbox to add relative components
    • [x] Deployed the codelab on Netlify for a quick review

    Looking forward to the review/merge.

    Peace! ✌️

  • 10

    Add Web Payments collection to /learn

    Fixes #2979

    This is a part of larger Web Payments doc set. The first four docs included in this PR:

    • Empowering payment apps with Web Payments
    • Life of a payment transaction
    • Setting up a payment method
    • Android payment apps: developers' guide

    Reviewed by @mihajlija

    @kaycebasques can you create an issue for Web Payments?

  • 11

    Updates "SameSite cookies explainer" and adds "SameSite cookies recipes"

    Fixes: #1460

    Updates to the http://web.dev/samesite-cookies-explained article.

    Changes proposed in this pull request:

    • Provide a table of contents
    • Ensure Chrome and Firefox functionality is referenced
    • Better explain that SameSite is a platform change, not a Chrome change
    • Provide explicit guidance on working around incompatible clients
  • 12

    content: TODO

    • Use this template to request updates to existing content.
    • Delete any fields that aren't relevant to your issue.
    • Update the title of this issue with a brief summary of the work to be done.

    What page(s) need to be updated?

    Provide a list of URLs.

    Why is this update needed?

    What's the deadline?

    Is it a hard deadline?

    If yes, please explain why.

  • 13

    Example link not working

    Describe the bug The example in this page/section doesn't work

    To Reproduce Steps to reproduce the behavior:

    1. Go to https://web.dev/mobile-touchandmouse/##1-clicking-and-tapping-the-natural-order-of-things
    2. Click on example
    3. See error

    Expected behavior The example should be present.

    Screenshots If applicable, add screenshots to help explain your problem. Screenshot 2023-01-09 at 1 09 16 PM

  • 14

    Duplicate content on enabling https

    I am assuming this happened during the migration, but we appear to have a duplicate article:

    1. https://web.dev/enabling-https-on-your-servers/
    2. https://web.dev/enable-https/

    The second is most recently updated and seems to get the most traffic. So we should remove the first and redirect to the second.

  • 15

    Added step to place secret within workflow

    Fixes #9360

    Changes proposed in this pull request:

    • Updated instructions to add the repository secret into the github workflow file

    Individual CLA signed, Mark Vogelgesang

  • 16

    content: Automation with LHCI

    • Use this template to request updates to existing content.
    • Delete any fields that aren't relevant to your issue.
    • Update the title of this issue with a brief summary of the work to be done.

    What page(s) need to be updated?

    https://web.dev/lighthouse-ci/

    Why is this update needed?

    Instructions miss a step to add repository secret that is required for the Status Check to work correctly

    What's the deadline?

    none

  • 17

    chore(content): clarify meaning of LightWallet

    When reading the article and clicking on the link to LightWallet, my first reaction was that the link was incorrectly marked up.

    In its current state, it links to the article the reader is reading. This was not what I was expecting. After reading the article, I realized that LightWallet is the name used to define and test against a predefined performance budget with the Lighthouse CLI.

    The update here attempts to clarify this upfront and removes the link to avoid confusion.

Popular Tag

Related