https://www.spreaker.com/show/the-css-podcastenTechnologyCopyright Continental 9DADEShttps://d3wo5wojvuv7l.cloudfront.net/t_rss_itunes_square_1400/images.spreaker.com/original/77971158e7efc5181924f31e3fdb799b.jpghttps://www.spreaker.com/show/the-css-podcastFri, 24 Jun 2022 10:24:51 +0000Continental 9DADESContinental 9DADESfeeds@spreaker.comCascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who...cleanepisodicContinental 9DADESfeeds@spreaker.comCascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.Nohttps://www.spreaker.com/user/reifamoso1.blogspot.com/057-devtools-mini-series-interaction7e0a6777-54ed-445f-a9a9-a90d1b6e6712Wed, 29 Dec 2021 07:59:18 +0000Continental 9DADESDevTools Mini Series continues, this time on interactions. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss interaction, and interaction inspection/ debugging in DevTools.  Una Kravets (co-host) Twitter | Instagram | YouTube Making...872chrome,css,csspodcast,googlechrome,googlechromedevelopers,googledevelopers,thecsspodcastcleanfullContinental 9DADESDevTools Mini Series continues, this time on interactions. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss interaction, and interaction inspection/ debugging in DevTools.  Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬    Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘    Jecelyn Yeen Twitter | Facebook | YouTube Developer advocate @ChromeDevTools 📐🤩   The CSS Podcast #CSSpodcastNohttps://www.spreaker.com/user/reifamoso1.blogspot.com/056-devtools-mini-series-accessibilitydb56b572-17db-4beb-93ae-a3906a0fddf5Wed, 22 Dec 2021 07:57:10 +0000Continental 9DADESDevTools Mini Series continues, this time on accessibility tooling. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss how DevTools can help you discover and fix accessibility issues.   Una Kravets (co-host) Twitter | Instagram |...829accessibility,adamargyle,chrome,chromedeveloper,chromedevelopers,csspodcast,developer,developers,devtools,google,googlechrome,googlechromedeveloper,googlechromedevelopers,jecelynyeen,thecsspodcast,unakravetscleanfullContinental 9DADESDevTools Mini Series continues, this time on accessibility tooling. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss how DevTools can help you discover and fix accessibility issues.   Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬    Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘    Jecelyn Yeen Twitter | Facebook | YouTube Developer advocate @ChromeDevTools 📐🤩   The CSS Podcast #CSSpodcastNohttps://www.spreaker.com/user/reifamoso1.blogspot.com/028-houdini-series-paint
Links:
CSS Paint API → https://goo.gle/39bWvBV
MDN Docs on CSS Painting API → https://goo.gle/3m3e1M1
Worklet Reference → https://goo.gle/3980Equ]]>563e9c5e-646d-49bc-a198-e643ecb0abe4Wed, 02 Dec 2020 18:00:00 +0000Continental 9DADESIn 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...
Links:
CSS Paint API → https://goo.gle/39bWvBV
MDN Docs on CSS Painting API → https://goo.gle/3m3e1M1
Worklet Reference → https://goo.gle/3980Equ]]>1769computerscience,css,csstipsandtricks,engineering,google,googlechrome,googledevelopers,houdini,houdiniproperties,html,paintworklet,programming,webdevelopment,webworkercomparison,webworkers,whatisaworklet,worklet,writingpaintworkletscleanfullContinental 9DADESIn 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/3980EquNohttps://www.spreaker.com/user/reifamoso1.blogspot.com/027-houdini-series-typed-om
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]]>5d2ece34-60dc-4096-8ed2-0789375e690bWed, 18 Nov 2020 18:00:00 +0000Continental 9DADESIn 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]]>1277animateableproperties,apiforconvertingcss,apiforcreatingcss,apiformanagingcss,apiforparsingcss,computerscience,css,csstipsandtricks,engineering,google,googlechrome,googledevelopers,houdini,houdiniproperties,html,programming,typedom,webdevelopmentcleanfullContinental 9DADESIn 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/3p40ENyNohttps://www.spreaker.com/user/reifamoso1.blogspot.com/026-houdini-series-properties-values
Links
Properties and Values Spec → https://goo.gle/2HZ6Aad
Value Definitions Spec → https://goo.gle/2HZCCTy
Houdini @property → https://goo.gle/3eyFimW]]>e62bd3ee-2cd8-4aa6-ad4f-649912291e44Wed, 11 Nov 2020 18:00:00 +0000Continental 9DADESIn 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 &...
Links
Properties and Values Spec → https://goo.gle/2HZ6Aad
Value Definitions Spec → https://goo.gle/2HZCCTy
Houdini @property → https://goo.gle/3eyFimW]]>1280computerscience,css,cssparser,csstipsandtricks,engineering,google,googlechrome,googledevelopers,houdini,houdiniproperties,houdinipropertiesvalues,html,layoutengine,programming,webdevelopmentcleanfullContinental 9DADESIn 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/3eyFimWNohttps://www.spreaker.com/user/reifamoso1.blogspot.com/025-season-1-wrap-up5acd5250-211d-43aa-b368-881e38b995f8Wed, 16 Sep 2020 17:09:54 +0000Continental 9DADESIn 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...3178computerscience,css,cssanimations,csscolor,cssfunctions,cssselectors,csstipsandtricks,cssvocabulary,engineering,google,googlechrome,googledevelopers,html,programming,seasononerecap,syntax,theboxmodeltozindex,webdevelopmentcleanfullContinental 9DADESIn 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.Nohttps://www.spreaker.com/user/reifamoso1.blogspot.com/024-blend-modes
Links:
mix-blend-mode → https://goo.gle/3m5L9mP
Isolation: Cascading Style Sheets → https://goo.gle/2GIDjiX]]>68c79265-a2d1-4dfc-892c-37ee8c6fb27fWed, 09 Sep 2020 17:15:15 +0000Continental 9DADESToday 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:...
Links:
mix-blend-mode → https://goo.gle/3m5L9mP
Isolation: Cascading Style Sheets → https://goo.gle/2GIDjiX]]>1080blendmodes,blendmodesincss,computerscience,css,css101,cssforbeginners,cssselectors,cssvocabulary,engineering,findelements,findsubjects,google,googlechrome,googledevelopers,html,learnhowtousecss,programming,syntax,webdevelopmentcleanfullContinental 9DADESToday 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/2GIDjiXNohttps://www.spreaker.com/user/reifamoso1.blogspot.com/023-filters
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]]>e58428dc-a754-4cde-b9e6-b9d3b190346cWed, 02 Sep 2020 17:00:00 +0000Continental 9DADESIn 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 →...
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]]>1580addingafilterwithcss,backdropfilter,computerscience,contrastswap,css,cssfilters,cssgram,engineering,filtereffects,filtereffectsmodule,filtersusingcss,google,googlechrome,googledevelopers,howtostylemyphoto,html,programming,stylingyourphotos,webdevelopmentcleanfullContinental 9DADESIn 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/32PJ2uRNohttps://www.spreaker.com/user/reifamoso1.blogspot.com/022-animationLinks
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]]>b16e2b2f-e786-4601-84b5-0b01183f2547Wed, 26 Aug 2020 17:01:02 +0000Continental 9DADESWith 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 →...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]]>2329animationproperties,computerscience,css,cssanimations,cssselectors,cssvocabulary,cubicbeziertool,debugginganimations,engineering,google,googlechrome,googledevelopers,howtoaddanimationsusingcss,html,movinganelement,programming,syntax,webdevelopmentcleanfullContinental 9DADESWith 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.gNohttps://www.spreaker.com/user/reifamoso1.blogspot.com/021-gradients
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]]>558548ec-f442-4cbe-a7bc-a6813d4aff7dWed, 19 Aug 2020 17:00:00 +0000Continental 9DADESIn 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...
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]]>1838colorstops,computerscience,css,cssselectors,cssvocabulary,engineering,google,googlechrome,googledevelopers,gradient,html,interpolatecolor,programming,repeatingconicgradient,syntax,syntaxsecrets,syntaxtips,transitionhints,webdevelopmentcleanfullContinental 9DADESIn 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/2FyeWnrNo