The CSS Podcast

The CSS Podcast

Google
029: Houdini Series: Layout
Dec 09, 2020 16 min

029: Houdini Series: Layout

In this episode, we get a little more experimental as we continue the Houdini series and discuss the Layout Worklet, also sometimes referred to as the Houdini Layout API. The Layout API enables developers to write their own layout algorithms. For more about Houdini worklets, check out our last episode on the Paint Worklet for an overview → https://goo.gle/3mG6BPc Links The Layout API → https://goo.gle/3gspEdI Masonry Layout Example by @iamvdo → https://goo.gle/37pRint
028: Houdini Series: Paint
Dec 02, 2020 29 min

028: Houdini Series: Paint

In this episode, we continue the Houdini series and enter worklet land! We go over the Paint Worklet, an API that enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more. Links: CSS Paint API → https://goo.gle/39bWvBV MDN Docs on CSS Painting API → https://goo.gle/3m3e1M1 Worklet Reference → https://goo.gle/3980Equ
027: Houdini Series: Typed OM
Nov 18, 2020 21 min

027: Houdini Series: Typed OM

In this episode we go over the TypedOM, a new API for parsing, converting, creating and managing CSS. It's typed, as the name suggests, and these typings not only help developers find bugs, they can make properties animateable natively in the engine. Links MDN Typed OM Reference → https://goo.gle/3n2FrC9 Spec → https://goo.gle/32fq94O caniuse attributeStyleMap → https://goo.gle/3leR0Fu caniuse computedStyleMap → https://goo.gle/3p40ENy
026: Houdini Series: Properties & Values
Nov 11, 2020 21 min

026: Houdini Series: Properties & Values

In this episode we introduce Houdini! We start by talking about our hooks into the layout engine and CSS parser, so we can connect our custom functionality with some CSS authored by a designer or developer. These hooks are called Houdini Properties & Values. Links Properties and Values Spec → https://goo.gle/2HZ6Aad Value Definitions Spec → https://goo.gle/2HZCCTy Houdini @property → https://goo.gle/3eyFimW
025: Season 1 Wrap Up
Sep 16, 2020 52 min

025: Season 1 Wrap Up

In this closing episode, we do a whirlwind recap of our entire first season! We go over every episode, from the box model to z-index to animations and functions and color. Listen as we recount our favorite tips and tricks and discuss what we learned in the process of making this podcast.
024: Blend Modes
Sep 09, 2020 18 min

024: Blend Modes

Today we are talking about CSS blend modes! Blend modes are super fun and allow you to specify how you want elements to interact in terms of their overlapping pixel values on the page. Links: mix-blend-mode → https://goo.gle/3m5L9mP Isolation: Cascading Style Sheets → https://goo.gle/2GIDjiX
023: Filters
Sep 02, 2020 26 min

023: Filters

In this episode, we’re talking about CSS filters! We can alter the pixels of our web apps in similar ways to our favorite design tools. Links: Filter Effects Module L1 → https://goo.gle/34SPJ1D Backdrop Filter → https://goo.gle/3hJTMRz CSSGram → https://goo.gle/2EPDOad Photo filters → https://goo.gle/31PhaYi Contrast Swap → https://goo.gle/2G9LpRh feColorMatrix → https://goo.gle/34UKw9u Shaders → https://goo.gle/32PJ2uR
022: Animation
Aug 26, 2020 38 min

022: Animation

With CSS animations a developer creates a set of keyframes, and then uses a variety of animation properties to describe how the element moves through each of the possible keyframes. Links Animations L1 → https://goo.gle/2DhV0V2 Easing L1 → https://goo.gle/3kWoWap Scroll-Linked Animations → https://goo.gle/39VQV4N Cubic-Bezier → https://goo.gle/2Q5xj5i Debugging Animations → https://goo.gle/3ayI2yD Rainbow Button → https://goo.gle/3214e0t Complete Easing Functions → https://goo.g
021: Gradients
Aug 19, 2020 30 min

021: Gradients

In this episode gradients take the stage as we share syntax secrets, tips and tricks, and probably teach you about repeating-conic-gradient. By the end, you’ll be savvy with color stops, transition hints, and all the ways to interpolate color in your design. Links: Spec Level 3 → https://goo.gle/3h8cRN7 Spec Draft Level 4 → https://goo.gle/3iPmDUE Lea’s Pattern Gallery → https://goo.gle/3j4XEwX Lea’s Cicada Principle Article → https://goo.gle/2FyeWnr
020: Functions
Aug 12, 2020 39 min

020: Functions

In this episode we talk about the runtime dynamic side of CSS, commonly recognized as a CSS function. Today, in similar fashion to other episodes, we’ll be doing a massive overview of all the CSS functions, to be later deep dived. Links CSS Tricks Guide to CSS Functions → https://goo.gle/2XRb7Ah CSS Variables → https://goo.gle/2XRb2fX Functional Notations Spec → https://goo.gle/3gJwavQ Cubic Bezier Generator → https://goo.gle/30LiDhG Billion Laughs Attack → https://goo.gle/2XUxjtg
The CSS Podcast
Genre
Technology
Episodes
29
Frequency
Weekly podcast
Website
thecsspodcast.libsyn.com
Social