web animations

In this supper club episode of Syntax, Wes and Scott talk with Adam Argyle about a ton of new CSS features that have arrived or are coming soon, as well as his new site Gradient.style.

Show Notes

• 00:34 Welcome
• 01:05 Guest introduction
• Adam on Bluesky
• Adam on Twitter
• 01:48 CSS buckets
• New CSS Relative Units · January 6, 2023
• 03:16 rex rch ric rlh
• 08:06 Gradient.style
• CSS HD Gradients
• Open Props: sub-atomic styles
• 13:49 What are style queries vs container queries vs state queries?
• una.im | Style Queries
• Getting Started with Style Queries - Chrome Developers
• CSS Container Style Queries | Can I use… Support tables for HTML5, CSS3, etc
• 18:09 Trig functions
• Trigonometric functions in CSS
• CSS Trigonometric Functions: cos() and sin(): dots on a circle
• 19:57 Live transitions
• Understand Disney’s 12 principles of animation | Creative Bloq
• 25:08 View transitions
• View Transitions Demo
• View Transitions API - Web APIs | MDN
• 26:01 Text-wrap balance
• CSS text-wrap: balance - Chrome Developers
• 26:45 Text-wrap pretty
• 27:44 What’s the future of the browser landscape?
• 31:44 nth-child(An+B [of S])
• 33:06 Cascade layers
• 34:40 CSS Nesting
• 38:03 Animate discrete properties
• 39:42 Linear function
• Linear easing generator
• 41:33 Media query range syntax
• 42:04 Subgrid everywhere
• 44:41 Media query range and variables?
• UI Elements - Basics, Best Practice, and Built Ins — Syntax Podcast 612
• 45:32 env variables
• Hasty Treat - CSS Nesting 1 — Syntax Podcast 343
• 46:59 Animation composition
• 49:50 Select menu HTML element
• 52:16 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

• Onewheel // Future Motion
• Adam Argyle

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

Freshbooks — Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

02:55

• Wes' Async + Await talk on YouTube from DotJS
• JavaScript is Asynchronous
• Ryan Dhal (Creator of Node.js) original Node.js talk

06:00

• Callback Hell
• Q
• Bluebird
• What is a promise?
• Promises are an IOU

8:30

• Async + Await IS promises
• What is Async + Await?
• How does the code look?
• Returning values from an await

15:20

• Performance Considerations
• MEGA PROMISES
• Promise.all()
• Here is an example:
• const [weather, store] = Promise.all(getWeather(), getStores());

19:22

• This stuff is 100% native
• Most new Browser APIs are build on Promises
• Fetch()
• Some examples:
• await fetch(' https://api.github.com/users/wesbos').then(data => data.json())
• OR
• await (await fetch(' https://api.github.com/users/wesbos')).json()
• Axios

22:48

• The Payment Request API
• You should listen to episode 006 on accepting money on the internet
• Web Animation API

27:00

• Snackisodes
• Snack Packs
• Hasty Treats?!!!

28:00

• Making callback-based functions promised basked
• es6-promisify
• util.promisify()

30:00

• Error Handling Methods
• View my slides for some code examples.
• Try/Catch
• High Order Function
• Just handle the error when you callIt().catch(dealWithIt);
• Node's process.on('unhandledRejection') event

36:00

• Browser Support
• Babel it!

38:00

• AbortController()
• Abortable Fetch

SIIIIICK PICKS

42:00

• Scott: Ring Doorbell
• Wes: The Indicator Podcast

47:00

• Sick Tip
• Chrome's Autoplay is changing
• Details on this
• Visit chrome://media-engagement to see your scores

Shameless Plugs

• Fullstack GraphQL
• CSS Grid Course is coming sooooon!

Tweet us your tasty treats!

• Scott's Instagram
• LevelUpTutorials Instagram
• Wes' Instagram
• Wes' Twitter
• Wes' Facebook
• Scott's Twitter
• Make sure to include @SyntaxFM in your tweets