Google Web Fundamentals
repository·main·Indexed 11 days ago
https://github.com/google/webfundamentalsEducational 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.
What's inside Web Fundamentals
- 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.
Overview of Making Web Apps Appy
mainThis guide (presented as a video series) explores how to move beyond simple offline capabilities to build highly engaging, "appy" web applications using Service Workers. The core concept is that Service Workers enable a new level of user engagement and app-like behavior that traditional web apps lack.Introduction to the Fetch API
mainThe 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
Requestfrom theResponse. - Promise-based: Instead of callbacks, Fetch uses Promises to handle the asynchronous lifecycle of a request and its response.
- Separation of Concerns: It explicitly separates the
Overview of the ServiceWorker API
mainThe
ServiceWorkerAPI 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.
Overview of Chrome Apps
mainChrome Apps are designed to provide a native app user experience using web technologies. They offer the development simplicity and security of the Web while integrating with Google services like Drive.
Supported Platforms:
- Desktop: Mac, Windows, Linux, and ChromeOS.
- Mobile: iOS and Android.
Overview of Polymer for creating custom HTML elements
mainPolymer 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.Overview of Polymer and modern web APIs at Google scale
mainThis 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.Overview of Media APIs for the Web
mainThe web ecosystem provides a standardized set of interoperable APIs designed for audio, video, and real-time communication across multiple platforms (mobile and desktop). These APIs allow developers to move beyond passive media consumption to interactive, multi-platform experiences.Access Designer Vs Developer content
mainThe 'Designer Vs Developer' show provides discussions, workflow solutions, and tools aimed at bridging the gap between design and development. You can access the content via YouTube or through the hosted podcast.
YouTube: https://www.youtube.com/playlist?list=PLNYkxOF6rcIC60856GnLEV5GQXMxc9ByJ Podcast: /web/shows/designer-vs-developer/podcast/Develop and debug NaCl apps in the browser
mainNative Client (NaCl) applications can be developed and debugged directly within the browser, supporting both online and offline workflows. The environment provides a suite of sandboxed development tools, including:
- Version Control:
git - Editors:
vim - Compilers/Build Tools:
gcc,python - Debugging:
gdb - Networking:
curl
- Version Control:
Listen to the Designer Vs Developer Podcast: Adopting the native language of the web
mainThis 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)Listen to the HTTP 203 Podcast: Rotating an image… TO THE EXTREME
mainThis 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-pathperformance, the Accessibility Object Model (AOM), and WebAssembly tools likewasm-pack.<audio style="width: 100%" src="https://storage.googleapis.com/http-203-podcast/episode-21.mp3" controls preload="none"></audio>