Google Web Fundamentals

repository·main·Indexed 11 days ago

https://github.com/google/webfundamentals

Educational resources for web developers, including a Python-based Markdown parsing library. Features include the BlockParser for converting Markdown to ElementTree, a customizable BlockProcessor system, and various extensions such as DefListExtension, FootnoteExtension, and TocExtension for generating tables of contents.

Tokens
39K
Snippets
122
Records
271
Agent score
96%

What's inside Web Fundamentals

  1. Overview of the Web Animations API

    main
    The Web Animations API is a high-performance animation model designed by browser vendors to provide developers with powerful creative control via JavaScript while avoiding 'jank' (frame drops). It serves as the underlying engine for CSS Animations and CSS Transitions in Blink-based browsers (like Chrome). The API is a core component used by the Polymer project and allows for complex, programmatic animation sequences that run smoothly on the browser's compositor thread.
  2. Introduction to the Fetch API

    main

    The Fetch API provides a cleaner and more powerful way to request remote resources compared to XMLHttpRequest. It allows for both same-origin and cross-domain requests. Key architectural differences include:

    • Separation of Concerns: It explicitly separates the Request from the Response.
    • Promise-based: Instead of callbacks, Fetch uses Promises to handle the asynchronous lifecycle of a request and its response.
  3. Overview of the ServiceWorker API

    main

    The ServiceWorker API provides developers with full control over the network layer of a web application. It acts as a programmable proxy between the browser and the network, enabling advanced capabilities such as:

    • HTTP Caching: Customizing how requests and responses are cached.
    • Request Interception: Controlling and modifying network requests.
    • Push Messaging: Implementing web push notifications.
    • Background Tasks: Providing the foundation for alarms, geofencing, and background sync.
  4. Overview of Polymer for creating custom HTML elements

    main
    Polymer is a library designed to leverage modern web technologies for building custom HTML elements. It allows you to create encapsulated, reusable components ranging from simple UI elements like buttons to complex, full-scale applications. These components are designed to work seamlessly across both desktop and mobile platforms by utilizing Web Components standards.
  5. Overview of Polymer and modern web APIs at Google scale

    main

    This guide explores how Google uses Polymer alongside modern platform APIs to build fast, lean, and mobile-first applications. Key technologies discussed include:

    • Polymer: A library for building web components.
    • Web Animations API: For high-performance animations.
    • Service Workers: To enable offline capabilities and push notifications.
    • Material Design: For implementing Google's design language.

    This content is presented as a presentation/video session (YouTube ID: fD2As5RmM8Q) featuring Addy Osmani, Eric Bidelman, Matthew McNulty, and Taylor Savage.

  6. Listen to the Designer Vs Developer Podcast: Adopting the native language of the web

    main

    This podcast episode features Ade Oshineye (Developer Advocate, Google Developer Relations Team) discussing the distinction between native web experiences and native app UX practices. The discussion covers how design language influences web development and the potential for the web to establish its own native language.

    Key topics include:

    • The influence of language on design.
    • Tom Formaro's thesis on argumentation on the web.
    • The debate between "web apps" vs. "native web".
    • The PWA directory.
    • Strategies for the web to retain its unique identity.
    <audio style="width: 100%" 
    src="https://storage.googleapis.com/designer-vs-developer-podcast/DVDS1E03-Adopting-the-native-language-of-the-web.mp3" controls preload="none">
    
    **Podcast Subscription Links:**
    * [Spotify](https://bit.ly/MustafaOnSpotify)
    * [Feedburner](https://goo.gl/USHXv8)
    * [iTunes](https://goo.gl/1E9U0G)
    * [Google Music](https://goo.gl/qCBlST)
    
    **Video Recording:**
    * [YouTube Playlist](https://www.youtube.com/playlist?list=PLNYkxOF6rcIC60856GnLEV5GQXMxc9ByJ)
  7. Listen to the HTTP 203 Podcast: Rotating an image… TO THE EXTREME

    main

    This episode of the HTTP 203 podcast explores various methods for rotating images across different programming environments, including JavaScript, C, AssemblyScript, and Rust. It also covers topics such as clip-path performance, the Accessibility Object Model (AOM), and WebAssembly tools like wasm-pack.

    <audio style="width: 100%" src="https://storage.googleapis.com/http-203-podcast/episode-21.mp3" controls preload="none"></audio>