Thinking on ways to solve TOASTS

[@Mezzle]

Finding it really hard to follow along with this, due to the colouring of the code. With things like braces and brackets and quotes having such a low contrast to the background, they're almost invisible to me (someone who's got issues with contrast definition). Please consider this when showing code on screen!

[@abdusco]

Agreed. Great content, if only I could read it.

[@patrickc.6183]

I agree, the contrast makes it hard to read.

[@GifCoDigital]

Yea pretty bad for a tutorial that claims to "build an adaptive and accessible component." lol

[@lukor-tech]

The animations paus "hack" is a new to me. Thanks for that!

[@ashatron656]

Love Adams content! However, I find it a lot harder to understand an already-made solution. Its much easier watching him build it from scratch.

[@AdamArgyleInk]

Videos like that I put on my personal channel because they're longer and tend to reach less folks. Find them here! kzbin.info

[@frederikcreemers7751]

I generally don't like the "toast" pattern. i use a screen magnifier, so I only see part of the screen at a time, so I often end up missing toasts that appear on a completely different part of the screen from where I performed an action, sometimes causing confusion as to whether my click actually did anything.

[@WictorHansen]

What is a better 'message' system for magnify users?

[@frederikcreemers7751]

@@WictorHansen I'm not sure if there is a universal best option here, but just give some clear visual feedback near the location where the user performed an action.

[@TheNewton]

@@frederikcreemers7751 does the mouse cursor appear as any part of your magnification?

[@viktorsoroka4510]

Really cool, took me a day to figure out all the bits you did. flipToast animation really cool feature, trying without it also works fine but comparing the two you see the difference straight away. Not sure this is a sort of animation to disable though in case of reduced motion. Really slight change that improves UI significantly IMO. The video where Paul did it is a more vivid example definitely, but it is great that you covered it anyways as I did not even know about this feature before. By the way, did not encounter any problem with your editor and color scheme. I liked how you had four tabs on one screen and switched to the needed one in a second.

[@devPunks]

Can probably use the sibling selector (section.toasts ~ * {...}) instead of breaking the html validator. Just have it be the first child of the .

[@swampflux]

THIS IS GOOD

[@TheUnknownFactor]

I really love this content! It really helps teach accessibility in an amazing way. One thing I would like to see improved though is the code editor in the video; as it is rather accessibility-unfriendly (very low contrast on a lot of characters and a font that for some characters needs more mental work to read).

[@AdamArgyleInk]

the colors are chosen to boost the important bits of the code and subdue the rest. during editing, if the syntax is incorrect, these characters turn bright. so when the code is g2g, it's easier to scan for meaning as the important parts are not mixed into a mess of syntax. code is on github tho with their color choices, in case you're curious and want to read it there? 🙂

[@aaeonCodes]

Excellent tutorial. 👌

[@dave6012]

Never could solve the dynamic height adjustment of the toast container, I have to check out the FLIP method!

[@rctneil]

Can I please ask why the toasts was placed outside the ? I can't figure out the benefit to doing so? I was always told that nothing apart from the should be outside the ? and then both wrapped in ?

[@AdamArgyleInk]

was placed outside the body to be in a place where it's verrry unlikely to not be on top of everything. a toast, like a modal, needs to never be covered or else it loses it's effect/value. by placing it above the body, the toasts won't compete with any body elements.

[@phyllis3198]

I agree there is no reason to do this especially when the toasts have fixed position. I would say it’s extremely bad form and will cause an error somewhere on some browser

[@YuriyKravets29]

@@AdamArgyleInk the toast will compete with `dialog` however, so it loses it's effect when the dialog is used

[@AdamArgyleInk]

@@YuriyKravets29 yep, would be good to move this to popup so it can be in the :top-layer too, good call.

[@asheaven1st]

Love this content.. Thank you!

[@user-vd3ph6zh8q]

Wait are you using css variables in your media queries? You can do that?

[@KaizenCodes]

I watched this video and had to close the app for a few hours and ponder the context. The solution is absolutely great. But it didn’t seem like something that would happen in the real world, so it sort of felt like a fictional film/production. I am sure there are amazing programmers out there that would over-engineer a ‘glorified popup’ like this, but what bothered me more was the motivation behind it. So I came back to leave this comment and maybe someone else had this feeling. I think I came to the conclusion that this video wasn’t about toasts at all. It was geared towards chrome features like prefers-reduced-motion, which isn’t bad in and of itself - but it’s the angle, right? Anyway, great video, learnt a lot, hope to sip some more of the koolaid soon.

[@AdamArgyleInk]

Oh, sorry it seemed that way! In my history of building apps, we almost always ended up making or using a toast component so the SPA could communicate passive messages. I definitely dont go pick chrome features and then work backwards, I'm very rooted in "what are common components found across apps" and "how to build them". Maybe it's also this video format that gives this vibe? The videos are mostly "show" where the blog posts are "tell all the details". Perhaps the "show it" centric nature of the video makes it seem fictional? anyway, thanks for sharing! good food for thought 🙂

[@KaizenCodes]

@@AdamArgyleInk Hey Adam. Right, I think it’s perhaps just that it’s very unique that leaves one thinking. I just meant that a toast could be done simpler. But just because it can doesn’t mean it should right? 😅 Regardless - the CSS and other tips in there were very interesting to learn. I will approach new videos with that mindset instead. 👍

[@dailymeow3283]

Omg, your web dev level is 10 times me 😅

[@AdamArgyleInk]

you'll get there too!

[@GRA00071]

Oh wow is that even legal, having elements outside the body tag like that? I feel like it would break in older browsers, surely it's not part of the spec.

[@abdusco]

Any browser that's recent enough to support Animation API should have no problem rendering out-of-place elements.

[@devPunks]

@@abdusco this does not mean it passes validity. See below.

[@handerson171]

What VS Code theme is this?

[@AdamArgyleInk]

Kung Fury

[@azabroflovski]

Vite =)

[@ke1vin280]

Which is the related discussion about document.timeline.currentTime? It's interesting

[@AdamArgyleInk]

I havent created a discussion about it yet! it's a trick to force the renderer to not wait til the next frame to start animating, you can kick it off straight away so there's no jank or jump or visible frame between the new rendered location and the animation that wants to intro the element. def one for the back pocket that hopefully doesnt need used much, but came in very handy here for Firefox.

[@AmxCsifier]

The zIndex trick is very cool but it didn't work for me for some reason! I have a header with z 999 that I don't seem to be able to display fixed content over it any ideas?

[@AdamArgyleInk]

send me a link on twitter and I'll take a look!

[@haojiang4882]

What chrome theme is that? Looks cool.

[@AdamArgyleInk]

code theme is Kung Fury, but the Chrome theme is the default!

[@haojiang4882]

@@AdamArgyleInk Ah, thanks man! Props to the tab group!

[@DrakeXiang]

Also, the Read along link is 404

[@AdamArgyleInk]

it's publishing right now, they released this episode a bit early on me! 😅

[@bilygomez7951]

i dotn have these rendering and animatios tabs

[@AdamArgyleInk]

i move mine to the top, you definitely have them but they can be hard to find initially developer.chrome.com/docs/devtools/css/animations/

[@whaisonw2865]

Why are you doing all that async-in-Promise jumble in the Toast function? Couldn't you just make Toast an async function and remove lines 33, 40 and 41?

[@AdamArgyleInk]

fork and PR the idea!?

[@derjansan9564]

First Toast!

[@AdamArgyleInk]

🍞

[@Skatox]

It's hard to follow with some cut of the code. It's better to keep it more time in the screen.

[@DrakeXiang]

I feel like I'm a fake frontend developer...

[@AdamArgyleInk]

no way! we're all just trying our best and each new time we build something we do better. keep at it!

[@bumblebeegamerreal]

RIP Adblockers Its going to be phased out like the dislike button

[@omsunkoradji120]

OMG, why do U use JQuery here? R U joking?

[@BehruzbekOtayev]

what does this mean? @custom-media --motionOK (prefers-reduced-motion: no-preference);