chromeos / chromeos.dev Goto Github PK

• Pre-build strategies so they can be warmed, warm them, and only precache offline pages
• Remove Service Worker Includes for the time being
• Move to Network First for home page, news & stories landing page
• Implement navigation preloads
• Cache 3P images
• Migrate assets to Cache First as they now have hashes

Bonus

• Refactor service worker includes to stream
• New Cache Strategy for long-lived content pages Discussed w/ @jeffposnick and think the potential issues w/r/t race conditions and trying to bypass the SW lifecycle will lead to issues similar to what the Angular team experienced in angular/angular#28114. Instead, consider using ETag header to notify user that content is updated w/StaleWhileRevalidate, but that needs more investigation.
  • Save content hash to IDB keyed on URL path
  • Generate content hash dict on build (key === URL path), deploy with each SW build
  • On request, check to see if current hash === has in IDB; if it does, serve Cache First, if not, serve Network First, 3s timeout.
  • May be possible to do this as a routing strategy instead of as a caching strategy, or may be able to reuse existing strategies w/in new strategy

Bugs in Chrome OS need to be filed in the right issue tracker (e.g. Android bugs in issuetracker.google.com or Chrome bugs in crbug.com) so that they're handled timely and properly. We should provide an easy to use interface to collect some bug information and redirect developers to the right place to file their bugs.

Currently performed by Gulp.

• Migrate to Vite (production build only?)
• Consider migrating from Lunr to Fuse.js (faster, better fuzzy search, index can be pre-generated too, search results return full items)

The current 404 page doesn't quite render properly and needs to be cached and served properly from our service worker.

Current SW compilation from Vite Plugin PWA doesn’t meet the following core needs:

• Manipulation (filtering, additions, etc…) of files for Workbox’s InjectManifest precache (so we don’t have to precache every single generated Vite file)
• Not requiring Workbox Window to register a Service Worker
• Not requiring InjectManifest to compile service worker (for Workbox Recipes compatibility)
• Option for chunkFileNames to not include a hash
• Ability to test Service Workers during development (optional)

Hi i would like to share my screen and microphone on youtube. i've downloaded obs but that only gave me a black screen.
Could you update chrome os to share on youtube and other streaming platforms?

Some images in the docs, screenshots specifically, have small text that can be difficult to read on some screens. It would be nice to have the ability to click on the image to popup a preview window, or link directly to the image. (See medium for an example of what this could look like).

Increases SEO min, sets Performance min to 80, tests more pages, makes sure Lighthouse results table
only shows if there are results

Critical is currently used to inline critical CSS for each page, improving perceived performance on load by getting the above-the-fold content renderable before the rest of the page has loaded. Rollup Plugin Critical may be a way forward here with Vite.

Consider migrating to pnpm and only-allow for better local/CI DX

Is your feature request related to a problem? Please describe.
Yes, I write an article, I make some changes, I commit those changes, and then when I push the linting fails and I need to re commit my changes after linting.

Describe the solution you'd like
If we are going to block on linting, it would be helpful to do that on commit because the commit workflow takes awhile.

Describe alternatives you've considered
git commit --amend --no-edit -> This does not work though because husky still runs and the command creates a new commit anyways.

Additional context
none

Need a way to minify HTML during production builds. htmlnano with Vite Plugin PostHTML seems like a good potential path forward.

Make custom markdown configuration available as a module

I noticed an error while browsing the code, it says warpper instead of wrapper on line 12 here.

on the page https://chromeos.dev/en/web-environment#the-chrome-you-love

it says:

You can also use penguin.linux.test as a fallback for localhost if needed.

This should probably be clarified and maybe expanded on in more detail per the description is this issue especially once M86 with that fix comes to the stable channel soon.

• Functions
• Build System
• GitHub Actions

Backspace isn't working in the chrome os emulator or it depends on flutter i've run flutter doctor -v without any problems

Migrate Date 11ty date, localeURL, and langName filters into own module, as well as our l10n data fallback function.

Describe the bug
When visiting on the page links, the links are broken with the new tooling

To Reproduce
Steps to reproduce the behavior:

Visit the staging site for the new site and navigate to : https://chromeos.dev/en/posts/dgapi-2-migration#purchase-acknowledgement-moves-to-backend
Happens on all pages.
Click on one of the links of the side.
Nothing happens

Expected behavior
In page navigation occurs

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] Chrome OS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 96

Additional context
Add any other context about the problem here.

Our NPM scripts are kind of all over the place. After Vite is in place, we should clean them up based on PWA Summit's scripts

Maintaining our content in static Markdown files tightly couples content and code updates. This creates a large barrier to content creation by requiring that content contributions share our same code development process, locking out a large portion of our contributors from managing their contributions directly. It also leads to potential issues where code may be complected with a content release and either the code or the content gets accidentally released, or can't be fully released or easily rolled back. Finally, it incurs a large maintenance overhead , requiring a number of specialized sets of functionality or processes (frontmatter linting, markdown linting, folder structure, file structure, etc…) to accomplish, some of which must be done manually. For these reasons, and more, we're looking to migrate off of flat Markdown files and into a CMS.

See also my recent blog post on the subject

Olá pessoal, tudo bem?
Em minha visita ao chromeos.dev, observei que o menu quebra ao traduzir para o Português Brasil, em algumas páginas dificulta ler o primeiro título.

Sistema: Chrome OS, versão 85.0.4183.59, canal beta
Dispositivo: Samsung Chromebook 3
Navegador: Chrome padrão.

• Investigate ImgIX, Cloudinary, and other 3p solutions for image optimization
• Implement either a 3P solution, or Vite Plugin Img, depending on outcome of investigation
• FIx resulting bugs from using removing need of picture element
  • Home page fade and parallax
• Height and width added
• GIFs using videos instead

3P Solution Criteria

• Must be able to be used based on URL parameters
• Must be able to both resize images and change formats
• (Optionally) allow upload via API call (eventual CMS integration)
• (Optionally) must be able to convert GIF to Video
• Get pricing for estimated current usage.

3P Solution Implementation

• Vite/PostHTML plugin to manipulate images to Picture elements with correct URLs (like Vite Plugin Img)
• Ensure 3P images can be cached with our Service Worker
• (Optional) Ensure that all images are present in 3P system at build time (imgix example)

When using Vite Plugin PostHTML with Vite Plugin Eleventy, every refresh re-runs PostHTML but reuses the previous load's HTML. It should instead run "clean" for each run.

• Investigate if this is a PostHTML problem or an Eleventy problem
• Fix the bug!

(higher difficulty because where it lives is unknown)

Split out the pieces (that are still required) from Static Site Scaffold into stand-alone modules to make them easier to consume, and migrate the config into this project.

Hi i would like to turn of my firewall on a chromebook or is this already possible could you tell me how?

When a visitor hovers over a header, a small "link" item appears beside the header. If the mouse hovers over that icon, it disappears.

Clicking does nothing when the icon is visible. In order to copy a link, the user must hover over the header (icon appears), not hover over the icon, then right-click and copy the link.

I also believe the difference with developer.android.com adds confusion. On that site, you hover over the link icon and click to copy the link (example)

Could chromeos.dev:

• not have the link icon disappear when hovering
• have clicking on the icon (and/or header) auto copy the link to the clipboard?

Describe the bug
The incorrect icon is being used in a card within the Spanish translation of a section.

To Reproduce
Steps to reproduce the behavior:

1. Visit the Spanish homepage
2. Scroll down to the "Comience a construir con información y herramientas para Chrome OS" )Start building with information and tools for Chrome OS) section
3. See error

Expected behavior
I would expect the "publish" icon to be displayed

Screenshots
English version on the left, Spanish on the right

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 85

Smartphone (please complete the following information):
N/A

Additional context
N/A

Is your feature request related to a problem? Please describe.
The Content Indexing API allows web apps to tell the browser about URLs that will load offline. This can then feed into the browser's native UI, e.g., in a custom page that the browser displays while you're offline that lists available content.

Describe the solution you'd like
It would be nice to index the offline-capable URLs based on the current cache storage contents.

Describe alternatives you've considered
Just not indexing them would be an alternative, but since the hard part is getting the pages to work offline and that's already done, this is just some extra visibility.

Additional context
I put together a similar PR for web.dev at GoogleChrome/web.dev#2798

Footnotes are missing!

The site should have an RSS feed for posts appearing under https://chromeos.dev/en/posts/*. Ideally the feed URL should be announced in the source code of all pages under https://chromeos.dev/*, so it can be easily discovered by feed readers.

There is eleventy-plugin-rss that makes setting this up relatively straight-forward.

due to #166 i might found a solution next to obs his black screen and streamlabs audio problem I found this article
https://linuxforever.info/2017/05/06/how-to-live-stream-to-youtube-from-linux-mint-ubuntu/
and i'm only wondering on wich port does the screen recorder listen or what is his location so i can replace https://gist.github.com/olasd/9841772 the source with?

Prettier auto-formats blockquotes as follows:

> This is a nice quote. Eiusmod incididunt excepteur velit qui amet id voluptate cupidatat. Voluptate exercitation incididunt aute pariatur pariatur deserunt minim proident consequat.
> {cite="Here is the quote attribution"}

> This is a nice quote without attribution. Eiusmod incididunt excepteur velit qui amet id voluptate cupidatat. Voluptate exercitation incididunt aute pariatur pariatur deserunt minim proident consequat.
>
> This is the second paragraph.
> {cite="Here is the quote attribution"}

The first blockquote renders with the citation as expected. The second one doesn't render the citation, but any additional attributes get added as expected. Look into this!

• Get vitejs/vite#3972 resolved

Codeblocks now don't automatically get their language but rather rely on Markdown rendering to add them.

• Add {title="Sample JavaScript" .code-figure} to all markdown code blocks (replacing title appropriately)
• Search for any manual code blocks (pre[class="language-*"]) and update them, too

• Removes the need to add prefixes and ensures that our users are getting the right CSS
• Base on PWA Summit implementation
• Make sure PostCSS transform for aspect-ratio CSS is in/@supports is working for that

Navigation Preload will speed up our Service Worker, but there's currently a Workbox bug GoogleChrome/workbox#2883 that makes usage w/StaleWhileRevalidate impossible (the SWR cache never gets updated). Once that bug is fixed, this can be worked on.

Could you add reload functionallity to the android emulator to restart the app?

Our current Rollup/Gulp combination is slow, cumbersome, and less likely to give us the optimized output we'd want than Vite is, which is optimized for code splitting and modern ES module forward builds.

• Migrate site serving from Rollup/Gulp/BrowserSync to Vite and Eleventy and ensure Eleventy compiling still works
• Ensure JS works in dev
• Ensure Sass works in dev
  • Filed issue that we're currently having
  • Filed PR to help debug error I'm getting
• Ensure JS compiles for production
  • Regular JS works as expected
  • Workers work as expected
  • Service Worker works
• Ensure Sass compiles for production
• Ensure dynamic import polyfill is included (if not already)
• Make sure Firebase proxies for functions run during dev.
• Ensure Search indexes compile

Spinning up a local development server to modify content can be cumbersome and a barrier to entry for members of the team. Investigate using a CMS, like Netlify CMS, to provide a user interface for editing content. Minimum success would include:

• GitHub Event to trigger rebuilds.
• Investigate 11ty Serverless for CMS previews
• GitHub authentication for existing ChromeOS.dev maintainers
• Ability to modify English content and upload images
• Manage site data (en/_data/*)
• Enable Editorial workflow
• Integration of https://hemingwayapp.com/ like functionality
  • Blog for inspiration
  • write-good NPM module

Potential CMSes to investigate:

• https://ghost.org/
• https://www.contentful.com/
• https://www.webiny.com/
• https://strapi.io/
• https://www.sanity.io/
• https://keystonejs.com/
• https://www.netlifycms.org/
• https://gathercontent.com
• Custom

Migrate 11ty.config.js from Static Site Scaffold module into codebase.

• Sass Lint is pretty much deprecated, and Stylelint can do everything we want it to
• Current config

The site currently shows the old Medium logo. The new logo is here

Screenshots

This is a webhook test

Migrate from 11ty plugin safe external links to PostHTML External Link.

Add a postprocess rule to open all external links in a new tab (target=_blank)

Our Eleventy transforms have an expensive build overhead because they're run on every compile for every page and emulate DOM transformations using Cheerio. Moving them to PostHTML plugins via Vite Plugin PostHTML will significantly speed up development time by only running them on the page being served and moving to an AST based transformer.

• ChromeOS Word
• DOM Transforms
• Icons
• Remove Trailing Slash