logrocket

In this Hasty Treat, Scott and Wes talk about the new Browser CSS Page Transitions API proposal and what features it opens up for developers on the web.

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

• WICG Shared Element Transitions

• 00:21 Welcome

• 01:33 Sponsor: Prismic

• 02:43 Sponsor: LogRocket

• 04:18 Browser animations on the web vs native apps

• 06:15 What is the targeted use case for it?

• 06:56 Shared Element to Root Transitions

• 11:14 Entry and Exit

• 17:33 How to enable this in Chrome

• Example Code

• Shared Element Transition history

• Sarah Drasner’s demo

 async function doTransition() {   let transition = document.createDocumentTransition();      // Specify offered elements. The tag below is used to refer   // to the generated pseudo elemends in script/CSS.   document.querySelector(".old-message").style.pageTransitionTag = "message";      // The start() call triggers an async operation to capture   // snapshots for the offered elements,   await transition.start(async () => {     // This callback is invoked by the browser when the capture     // finishes and the DOM can be switched to the new state.     // No frames are rendered until this callback returns.          // Asynchronously load the new page.     await coolFramework.changeTheDOMToPageB();          // Clear the old message if that element is still in the page     document.querySelector(".old-message").style.pageTransitionTag = "";     // Set new message as the shared element 'message'     document.querySelector(".new-message").style.pageTransitionTag = "message";          // Set up animations using WA-API on the next frame.     requestAnimationFrame(() => {       document.documentElement.animate(keyframes, {       ...animationOptions,       pseudoElement: "::page-transition-container(message)",       });     });          // Note that when this callback finishes, the animations will start with the tagged elements.   }); }  

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

In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is.

MagicBell - Sponsor

MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

• 00:25 Welcome
• 01:19 Sponsor: MagicBell
• 02:31 Sponsor: LogRocket
• 03:40 Don’t say stupid
• 05:03 :Has
• MDN :Has

 // Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag  p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find 
Hi
 // would not find 
hi
  

• 06:13 Jargon check
• 11:01 Some examples
• 13:25 Nest navigations
• 13:51 Can I use it?
• 15:52 Is and Where
• MDN :where

In the past we would write

 header p:hover, main p:hover, footer p:hover {   color: red;   cursor: pointer; }  

:where is essentially a short had for making this easier considering the 2nd half of these selectors is the same. Will make your css dryer

 :where(header, main, footer) p:hover {}  

Also super handy in avoiding css blocks being ignored for unsupported features.

 // Doesn't work div:has(p), div:some_new_selector(p)  // Will still work for :has if has is supported :where(div:has(p), div:some_new_selector(p))  

• When to use :Where

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

In this Hasty Treat, Scott and Wes talk about seven new JavaScript proposals — what they do, where they’re at, and how you might use them.

Deque - Sponsor

Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

03:32 - Seven new JavaScript proposals

• https://github.com/tc39/proposals

06:25 - JSON Modules

• https://github.com/tc39/proposal-json-modules
• Builds on the import assertions
• No named exports
• Not executed, to avoid security issues
• Not in Node yet

09:55 - Array Find From Last

• https://github.com/tc39/proposal-array-find-from-last
• The problem: you need to group together async code.The only way to do that right now is to wrap it in a function.

11:40 - Async Do

• https://github.com/tc39/proposal-async-do-expressions
• Async do will allow you to group together a block of code and mark it as async.
• No need for an iife
• Downside to this is that it’s a code block, so if you need to return any values, you’ll need to jump that up a scope level.

 Promise.all([   async do {     let result = await fetch('thing A');     await result.json();   },   async do {     let result = await fetch('thing B');     await result.json();   }, ]).then(([a, b]) => console.log([a, b]));  

14:33 - Change Array By Copy

• https://github.com/tc39/proposal-change-array-by-copy
• Like old array methods, but returns a new array rather than mutating

17:48 - Temporal

• https://github.com/tc39/proposal-temporal
• Stage 3, looking good!
• Amazing, large, very good Date API
• Syntax 295: Hasty Treat — Temporal Date Objects in JavaScript

18:35 - As Patterns

• https://github.com/zkat/proposal-as-patterns
• Scott don’t get it
• Stage 0
• when ([ ‘go’, (‘north’ | ‘east’ | ‘south’ | ‘west’) as dir ]) { … }

20:47 - Pattern Matching

• https://github.com/tc39/proposal-pattern-matching
• VERY Rust-like
  • https://doc.rust-lang.org/1.6.0/book/patterns.html
• Stage 1

    {props => match (props) {     when ({ loading }) { ; }     when ({ error }) { ; }     when ({ data }) { ; }   }}   

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

In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

Can it be styled? Solutions

04:28 - Just style the defaults

• Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.
• This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.
• Select
• Input - number, date, etc.
  • Very hard to style
  • Often need appearance: none; for mobile
• Checkbox / Radio
• Generally speaking, these CSS Properties can be applied to all inputs:
  • font-size
  • color
  • padding
  • margin
  • background / images
  • outline (remember focus)
  • border

08:20 - Overlap with more dom elements, set background images

• Checkbox / Radio / Toggle buttons
  • Often used :before and :after along with labels — e.g. label + input:checked
• Select can have element overlap

14:13 - Re-implement the UI with JavaScript

• Video / Audio
  • HUGE rabbit hole of things to code
• Very important to maintain accessibility

15:46 - Use a UI Library

• Bootstrap
• Foundation
• Ant Design
• Carbon Design
• Fast
• Lightning Design System
• Material Design
• Chakra

17:20 - Open UI

• Documenting all the different types of web UI controls
• https://open-ui.org/
• https://twitter.com/stubbornella/status/1384889551924121605

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

In this Hasty Treat, Scott and Wes talk about future tech — some things you may not have heard about yet, and why we’re excited about them!

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

05:20 - Astro

• What it is:
  • astro.build is a next gen “meta” framework that eases some of React’s pain but also is not just React.
  • https://twitter.com/georges_gomes/status/1380801812656226304
• Why we’re excited about it:
  • Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data.
  • Scoped CSS by default (a la Svelte). Sass out of the box.
  • Collections import for .md files

 // pages/blog.astro --- import PostPreview from '../components/PostPreview.astro';  const blogPosts = import.meta.collections('./post/*.md'); ---  <main>   <h1>Blog Postsh1>   {blogPosts.map((post) => (     <PostPreview post={post} />   )} main>  

12:06 - ViteKit

• What it is:
  • Framework-agnostic
  • API routes
  • Pages (frontend, optional hydration)
  • Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit.

15:58 - Svelte Kit

• What it is:
  • https://kit.svelte.dev/docs
  • https://svelte.dev/blog/sveltekit-beta
  • New framework for building Svelte apps

19:07 - Remix.run

• What it is:
  • Remix.run
  • Fullstack React framework
• Why we’re excited about it:
  • Made by Michael Jackson, Ryan Florence
  • License-based
  • React-based
  • Caching-focused, uses “the platform”
  • Centralized data loading, works without client JS if needed
  • Better nested routing

Links

• Sapper
• Vite
• Snowpack

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

In this Hasty Treat, Scott and Wes talk about records and tuples in javascript — what they are, why you might want to use them, and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

??? -

02:42 - Immutability

05:08 - Records

• Immutable object
• Syntax #{x: 1, y: 2}

05:56 - Tuples

• Immutable array
• Syntax #[1,2,3,4]

07:18 - For both

• Referred to as a compound primitive

• Can contain only primitives, not objects

• They are compared deeply by their contents rather than their identity

   assert(#{ a: 1 } === #{ a: 1 }); assert(#[1, 2] === #[1, 2]); assert(#{ a: 1, b: 2 } === #{ b: 2, a: 1 });  

• Potential for optimizations

  • Optimizations for making deep equality checks fast
  • Optimizations for manipulating data structures

• Works well with type systems

• Better integration with the debugger

• Accessed through normal record.scott object like syntax

13:39 - Stage 2

Links

• https://github.com/tc39/proposal-record-tuple

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

In this Hasty Treat it’s another edition of the Top Level Domain Game!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

02:25 - How it works

We pick a TLD from a list, and the other person needs to guess:

1. Is it for a country or business? +5 points
2. What country, business, or type of business is it for? +5 points
3. How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ https://www.101domain.com/
4. Is scott._ and wes._ available? -10 points for each

04:00 - .sd

• Scott: 5 + -5 + -126 + -10 + 10 = -126

05:46 - .ong

• Wes: 5 + -5 + -30 + 20 = -10

07:53 - .koeln

• Scott: 5 + -5 + -20 + 20 = -126

09:23 - .co.ke

• Wes: 10 + -15 + 0 = -15

11:00 - .tr

• Scott: 5 + -5 + 0 + 0 = -126

12:25 - .ist

• Wes: -5 + 5 + -10 + 0 = -25

13:57 - .xn—45q11c

• Scott: 5 + 5 + -295 + 10 = 20 = -401

16:40 - .reit

• Wes: 10 + -1460 + 10 = -1465

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

In this Hasty Treat, Scott and Wes are playing a game! It’s called the TLD game, where Scott and Wes try to stump each other with questions about top level domains.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

1:55 - The rules of the game

We pick a TLD from a list, and the other person needs to guess:

1. Is it for a country or business? -5 points
2. What country, business, or type of business is it for? -5 points
3. How much per year does it cost to register? You may also say “unregisterable” +/- off by $$
4. is scott.___ and wes.___ available? -10 for each

5:40 - .BO

7:51 - .BZH

9:50 - .BANANAREPUBLIC

11:15 - .BABY

14:04 - .KR

16:09 - .MOTO

17:25 - .AW

19:16 - .IM

Links

• 101Domain

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